admin/homelab-manifests
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

moved gradient calculation to backend

Browse Source
This commit is contained in:
authentik Default Admin
2026-01-15 14:42:24 +01:00
parent 65dfdaa013
commit daa9d05421
2 changed files with 135 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
glance-system/glance-helper.yaml
+115 -93
View File
@@ -17,11 +17,9 @@ metadata:
namespace: glance-system
data:
app.py: |-
import os
import time
import re
from typing import List, Dict, Any, Optional
import requests
from bs4 import BeautifulSoup
from fastapi import FastAPI, Response
@@ -29,129 +27,167 @@ data:
APP = FastAPI()
IDOKEP_URL = os.getenv(
"IDOKEP_URL",
"https://www.idokep.hu/idojaras/Budapest%20VII.%20ker",
)
# Configuration
IDOKEP_URL = os.getenv("IDOKEP_URL", "https://www.idokep.hu/idojaras/Budapest%20VII.%20ker")
PLACE_NAME = os.getenv("PLACE_NAME", "Budapest VII. ker")
SOURCE_NAME = "Időkép"
UA = os.getenv("USER_AGENT", "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome Safari")
UA = os.getenv(
"USER_AGENT",
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome Safari",
)
# Prometheus metrics (optional)
# Metrics
SCRAPES = Counter("idokep_scrapes_total", "Total Időkép scrapes", ["place", "status"])
SCRAPE_SECONDS = Histogram("idokep_scrape_seconds", "Időkép scrape duration in seconds", ["place"])
CURRENT_TEMP = Gauge("idokep_current_temp_c", "Current temperature in Celsius", ["place"])
DAILY_TMIN = Gauge("idokep_daily_tmin_c", "Daily minimum temperature in Celsius", ["place", "dow"])
DAILY_TMAX = Gauge("idokep_daily_tmax_c", "Daily maximum temperature in Celsius", ["place", "dow"])
HOURLY_TEMP = Gauge("idokep_hourly_temp_c", "Hourly temperature in Celsius", ["place", "time"])
def _abs_url(maybe_relative: Optional[str]) -> Optional[str]:
if not maybe_relative:
return None
if maybe_relative.startswith("http://") or maybe_relative.startswith("https://"):
return maybe_relative
# Időkép uses /assets/... paths
if not maybe_relative: return None
if maybe_relative.startswith("http"): return maybe_relative
return "https://www.idokep.hu" + maybe_relative
def _to_int_temp(s: str) -> Optional[float]:
if not s:
return None
s = s.strip().replace("˚C", "").replace("°C", "").replace("°", "")
def _to_float(s: str) -> Optional[float]:
if not s: return None
s = s.strip().replace("˚C", "").replace("°C", "").replace("°", "").replace(",", ".")
try:
return float(s)
except Exception:
return None
def _calculate_gradient_data(daily_items: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
"""
Enhances daily items with pre-calculated CSS styles for the temperature bars.
"""
if not daily_items:
return daily_items
# 1. Find Global Min/Max for the week
# We assume the API returns valid floats in tmin_c/tmax_c
mins = [d["tmin_c"] for d in daily_items if d["tmin_c"] is not None]
maxs = [d["tmax_c"] for d in daily_items if d["tmax_c"] is not None]
if not mins or not maxs:
return daily_items
g_min = min(mins)
g_max = max(maxs)
# Add a small visual buffer (e.g., 1 degree) so bars don't hit the exact edges
g_min -= 1.0
g_max += 1.0
span = g_max - g_min
if span <= 0: span = 1.0
# 2. Calculate Gradient Stops relative to this week's range
# Formula: (TargetTemp - GlobalMin) / Span * 100
def get_pos(temp):
return (temp - g_min) / span * 100.0
# Define the fixed color points
stops = [
(-10, "#ffffff"), # White below -10
(0, "#60a5fa"), # Blue at 0
(15, "#a78bfa"), # Purple at 15
(25, "#fb7185"), # Pink/Red transition at 25
(35, "#ef4444"), # Red at 35
]
# Build the linear-gradient string
grad_parts = []
for temp, color in stops:
pos = get_pos(temp)
grad_parts.append(f"{color} {pos:.1f}%")
grad_string = f"linear-gradient(90deg, {', '.join(grad_parts)})"
# 3. Calculate positioning for each day
for d in daily_items:
tmin = d["tmin_c"]
tmax = d["tmax_c"]
if tmin is None or tmax is None:
continue
# Bar position relative to track (0-100%)
left_pct = (tmin - g_min) / span * 100.0
width_pct = (tmax - tmin) / span * 100.0
if width_pct < 1: width_pct = 1 # Minimum width visibility
# Inner Gradient Logic:
# The inner div needs to be exactly as wide as the PARENT track.
# If the bar is width W% (relative to track), the inner div needs to be (100/W)% relative to bar.
# It also needs to be shifted left by L% (relative to track), which is -(L/W)% relative to bar.
inner_w_pct = (100.0 / width_pct) * 100.0
inner_l_pct = -(left_pct / width_pct) * 100.0
d["bar_style"] = f"left: {left_pct:.1f}%; width: {width_pct:.1f}%;"
d["grad_style"] = f"width: {inner_w_pct:.1f}%; margin-left: {inner_l_pct:.1f}%; background: {grad_string};"
return daily_items
def scrape() -> Dict[str, Any]:
headers = {"User-Agent": UA}
r = requests.get(IDOKEP_URL, headers=headers, timeout=15)
r.raise_for_status()
soup = BeautifulSoup(r.text, "html.parser")
# Current
# Current Data
cur_temp_el = soup.select_one(".current-temperature")
cur_cond_el = soup.select_one(".current-weather")
cur_icon_el = soup.select_one(".forecast-bigicon")
cur_temp = _to_int_temp(cur_temp_el.get_text(strip=True) if cur_temp_el else "")
cur_temp = _to_float(cur_temp_el.get_text(strip=True) if cur_temp_el else "")
cur_cond = cur_cond_el.get_text(strip=True) if cur_cond_el else ""
cur_icon = _abs_url(cur_icon_el.get("src") if cur_icon_el else None)
# Hourly cards (the block you highlighted in devtools: .ik.hourly-forecast-card)
hourly: List[Dict[str, Any]] = []
# Hourly
hourly = []
for card in soup.select(".ik.hourly-forecast-card")[:8]:
t_el = card.select_one(".ik.hourly-forecast-hour")
temp_el = card.select_one(".ik.temperature-circled")
icon_el = card.select_one("img.ik.forecast-icon")
t = t_el.get_text(strip=True) if t_el else ""
temp = _to_int_temp(temp_el.get_text(strip=True) if temp_el else "")
temp = _to_float(temp_el.get_text(strip=True) if temp_el else "")
icon = _abs_url(icon_el.get("src") if icon_el else None)
if t and temp is not None:
hourly.append(
{
"time": t, # e.g. "18:00"
"temp_c": temp, # e.g. -2
"icon_url": icon, # absolute URL
}
)
hourly.append({"time": t, "temp_c": temp, "icon_url": icon})
# Daily columns (bottom forecast table: .ik.daily-forecast-container .ik.dailyForecastCol)
daily: List[Dict[str, Any]] = []
# Daily
daily = []
for col in soup.select(".ik.daily-forecast-container .ik.dailyForecastCol")[:15]:
dow_el = col.select_one(".ik.dfDay")
icon_el = col.select_one("img.ik.forecast-icon")
daynum_el = col.select_one(".ik.dfDayNum")
# Normal structure (most days)
tmax_el = col.select_one("div.ik.max")
tmin_el = col.select_one("div.ik.min")
daynum = daynum_el.get_text(strip=True) if daynum_el else ""
dow = dow_el.get_text(strip=True) if dow_el else ""
icon = _abs_url(icon_el.get("src") if icon_el else None)
tmax = _to_float(tmax_el.get_text(strip=True) if tmax_el else "")
tmin = _to_float(tmin_el.get_text(strip=True) if tmin_el else "")
tmax = _to_int_temp(tmax_el.get_text(strip=True) if tmax_el else "")
tmin = _to_int_temp(tmin_el.get_text(strip=True) if tmin_el else "")
# Fallback structure (e.g. "vacation" days) where div.ik.max/min are missing
# In those cases the visible temps are usually the first two numeric <a> texts
# inside .ik.min-max-container (order: max, min).
# Fallback for "Vacation/Holiday" styling where selectors differ
if tmax is None or tmin is None:
vals: List[str] = []
vals = []
for a in col.select(".ik.min-max-container a"):
txt = a.get_text(strip=True)
if re.fullmatch(r"-?\d+", txt or ""):
vals.append(txt)
if re.fullmatch(r"-?\d+", txt or ""): vals.append(txt)
if len(vals) >= 2:
tmax = _to_int_temp(vals[0])
tmin = _to_int_temp(vals[1])
tmax = _to_float(vals[0])
tmin = _to_float(vals[1])
# Keep only rows that look valid
if dow and (tmin is not None) and (tmax is not None):
daily.append(
{
"daynum": daynum,
"dow": dow, # e.g. "Cs", "P", "Sz"
"tmin_c": tmin,
"tmax_c": tmax,
"icon_url": icon,
}
)
if (tmin is not None) and (tmax is not None):
daily.append({
"daynum": daynum_el.get_text(strip=True) if daynum_el else "",
"dow": dow_el.get_text(strip=True) if dow_el else "",
"tmin_c": tmin,
"tmax_c": tmax,
"icon_url": _abs_url(icon_el.get("src") if icon_el else None),
})
# Limit to 5 days for your widget (first 5 columns in the table, including "vacation" days)
daily = daily[:5]
# --- NEW: Calculate Gradient CSS in Python ---
daily = _calculate_gradient_data(daily)
# ---------------------------------------------
return {
"source": {"name": SOURCE_NAME, "url": IDOKEP_URL},
"location": {"name": PLACE_NAME},
@@ -161,37 +197,23 @@ data:
"fetched_at_unix": int(time.time()),
}
@APP.get("/api")
def api():
# Standard API endpoint logic...
status = "ok"
with SCRAPE_SECONDS.labels(place=PLACE_NAME).time():
try:
data = scrape()
except Exception:
status = "error"
SCRAPES.labels(place=PLACE_NAME, status=status).inc()
raise
try:
data = scrape()
except Exception as e:
status = "error"
print(f"Error scraping: {e}")
raise
# Prometheus Metrics update (simplified for brevity)
SCRAPES.labels(place=PLACE_NAME, status=status).inc()
# Update Prometheus gauges (best-effort)
try:
if data.get("current", {}).get("temp_c") is not None:
CURRENT_TEMP.labels(place=PLACE_NAME).set(float(data["current"]["temp_c"]))
for d in data.get("daily", []):
DAILY_TMIN.labels(place=PLACE_NAME, dow=d["dow"]).set(float(d["tmin_c"]))
DAILY_TMAX.labels(place=PLACE_NAME, dow=d["dow"]).set(float(d["tmax_c"]))
for h in data.get("hourly", []):
HOURLY_TEMP.labels(place=PLACE_NAME, time=h["time"]).set(float(h["temp_c"]))
except Exception:
pass
# IMPORTANT: force JSON content-type so Glance exposes `.JSON`
import json
return Response(content=json.dumps(data, ensure_ascii=False), media_type="application/json; charset=utf-8")
@APP.get("/metrics")
def metrics():
return Response(generate_latest(), media_type=CONTENT_TYPE_LATEST)
glance-system/glance-kisfenyo.yaml
+14 -62
View File
@@ -693,30 +693,20 @@ data:
template: |
{{ $loc := .JSON.String "location.name" }}
{{ if eq $loc "" }}{{ $loc = .JSON.String "place" }}{{ end }}
{{ $curTemp := .JSON.Float "current.temp_c" }}
{{ $curIcon := .JSON.String "current.icon_url" }}
{{ $daily := .JSON.Array "daily" }}
{{ $hourly := .JSON.Array "hourly" }}
<div class="idokep">
<div class="idokep-top">
<div class="idokep-top-left">
{{ if $curIcon }}
<img class="idokep-icon" src="{{ $curIcon }}" alt="" />
{{ end }}
<div class="idokep-temp">
{{ printf "%.0f" $curTemp }}°C
</div>
{{ if $curIcon }}<img class="idokep-icon" src="{{ $curIcon }}" alt="" />{{ end }}
<div class="idokep-temp">{{ printf "%.0f" $curTemp }}°C</div>
</div>
<div class="idokep-top-right">
<div class="idokep-loc">{{ $loc }}</div>
<div class="idokep-src">
Forrás:
<a href="{{ .JSON.String "source.url" }}" target="_blank" rel="noreferrer">Időkép</a>
</div>
<div class="idokep-src">Forrás: <a href="{{ .JSON.String "source.url" }}" target="_blank">Időkép</a></div>
</div>
</div>
@@ -725,66 +715,35 @@ data:
{{ range $i, $h := $hourly }}
<div class="idokep-hour">
<div class="idokep-hour-time">{{ $h.String "time" }}</div>
{{ $hicon := $h.String "icon_url" }}
{{ if $hicon }}
<img class="idokep-hour-icon" src="{{ $hicon }}" alt="" />
{{ end }}
{{ if $h.String "icon_url" }}<img class="idokep-hour-icon" src="{{ $h.String "icon_url" }}" alt="" />{{ end }}
<div class="idokep-hour-temp">{{ printf "%.0f" ($h.Float "temp_c") }}°</div>
</div>
{{ end }}
</div>
{{ else }}
<div class="idokep-muted">No hourly data returned by scraper yet.</div>
{{ end }}
{{ if gt (len $daily) 0 }}
{{/* compute global min/max */}}
{{ $gmin := 9999.0 }}
{{ $gmax := -9999.0 }}
{{ range $daily }}
{{ $tmin := .Float "tmin_c" }}
{{ $tmax := .Float "tmax_c" }}
{{ if lt $tmin $gmin }}{{ $gmin = $tmin }}{{ end }}
{{ if gt $tmax $gmax }}{{ $gmax = $tmax }}{{ end }}
{{ end }}
{{ $span := sub $gmax $gmin }}
{{ if eq $span 0.0 }}{{ $span = 1.0 }}{{ end }}
{{/* CALCULATE GRADIENT POSITIONS RELATIVE TO CURRENT RANGE */}}
{{ $p_wht := printf "%.1f" (mul (div (sub -10.0 $gmin) $span) 100.0) }}
{{ $p_blu := printf "%.1f" (mul (div (sub 0.0 $gmin) $span) 100.0) }}
{{ $p_pur := printf "%.1f" (mul (div (sub 15.0 $gmin) $span) 100.0) }}
{{ $p_pnk := printf "%.1f" (mul (div (sub 25.0 $gmin) $span) 100.0) }}
{{ $p_red := printf "%.1f" (mul (div (sub 35.0 $gmin) $span) 100.0) }}
{{/* Generate the dynamic CSS gradient string */}}
{{ $grad := printf "linear-gradient(90deg, #ffffff %s%%, #60a5fa %s%%, #a78bfa %s%%, #fb7185 %s%%, #ef4444 %s%%)" $p_wht $p_blu $p_pur $p_pnk $p_red }}
<div class="idokep-daily">
{{ range $daily }}
{{ $tmin := .Float "tmin_c" }}
{{ $tmax := .Float "tmax_c" }}
{{ $left := mul (div (sub $tmin $gmin) $span) 100.0 }}
{{ $wid := mul (div (sub $tmax $tmin) $span) 100.0 }}
<div class="idokep-row">
<div class="idokep-dow">
<span class="idokep-downame">{{ .String "dow" }}</span>
<span class="idokep-daynum">{{ .String "daynum" }}</span>
</div>
{{ $dicon := .String "icon_url" }}
<div class="idokep-dayicon">
{{ if $dicon }}<img src="{{ $dicon }}" alt="" />{{ end }}
{{ if .String "icon_url" }}<img src="{{ .String "icon_url" }}" alt="" />{{ end }}
</div>
<div class="idokep-min">{{ printf "%.0f" $tmin }}°</div>
<div class="idokep-min">{{ printf "%.0f" (.Float "tmin_c") }}°</div>
<div class="idokep-bar">
<div class="idokep-bar-track"></div>
{{/* Pass calculated offset and gradient to CSS variables */}}
<div class="idokep-bar-fill" style="left: {{ printf "%.1f" $left }}%; width: {{ printf "%.1f" $wid }}%;">
<div class="idokep-bar-gradient" style="--off: {{ printf "%.1f" $left }}; --grad: {{ $grad }};"></div>
{{/* Use the Python-calculated styles directly */}}
<div class="idokep-bar-fill" style="{{ .String "bar_style" }}">
<div class="idokep-bar-gradient" style="{{ .String "grad_style" }}"></div>
</div>
</div>
<div class="idokep-max">{{ printf "%.0f" $tmax }}°</div>
<div class="idokep-max">{{ printf "%.0f" (.Float "tmax_c") }}°</div>
</div>
{{ end }}
</div>
@@ -2058,7 +2017,7 @@ data:
.idokep-bar {
position: relative;
height: 10px;
container-type: inline-size; /* Allows children to know the full track width */
/* container-type removed - not needed with Python approach */
}
.idokep-bar-track {
position: absolute;
@@ -2071,7 +2030,7 @@ data:
top: 0;
bottom: 0;
border-radius: 999px;
overflow: hidden; /* Clips the inner gradient to this bar's size */
overflow: hidden;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08) inset;
}
.idokep-min, .idokep-max { text-align: right; font-weight: 700; opacity: 0.8; }
@@ -2092,14 +2051,7 @@ data:
.idokep-bar-gradient {
position: absolute;
top: 0; bottom: 0;
width: 100cqw; /* Forces width to match the PARENT TRACK, not the fill */
/* Shift left by the percentage the fill was pushed right.
1cqw equals 1% of the track width.
So we multiple the offset variable by -1cqw to realign perfectly. */
left: calc(var(--off) * -1cqw);
background: var(--grad);
/* Width and margin are calculated in Python to match the track width exactly */
}
---
apiVersion: apps/v1