Release 2026.8.2

Author: ReikanYsora

ARCHITECTURE.md

@@ -108,7 +108,7 @@ coalesces redraws into one `requestAnimationFrame` pass, owns its own
 lock-step. The `<svg>` is bound to the card box (`contain: paint`): its building
 paths reach a whole neighbourhood past the card, and without that bound an old iOS
 compositor sized the layer's backing store to that content, capped it and painted
-only the top half (#304); binding it also trims the off-card raster on every frame.
+only the top half; binding it also trims the off-card raster on every frame.
 Colour math (building tint, day / night grading of the ground + buildings) lives in
 `core/render-kit/colors.ts`, over the shared hex primitives in
 `core/render-kit/hex.ts`; the shared 2D point type + SVG-points formatter live in

CHANGELOG.md

@@ -14,18 +14,20 @@ A corrective release on top of 2026.8.1.
 ### Fixed: the card rendered only in half 3D on some older iPads
 
 On older iPads, older WebKit could composite the flat basemap over the 3D scene
-incorrectly, leaving the card looking cut in half. Helios now detects those devices,
+incorrectly, leaving the card looking cut in half (#304). Helios now detects those devices,
 including inside the Home Assistant and Kiosk apps, not just Safari, and paints the
 ground already projected into the scene, so the whole card renders. The perspective
 on the map's vector elements is very slightly different on that path, but the scene
-is whole again. Every other device is unchanged.
+is whole again. Every other device is unchanged. Thanks to @Spaniard85 for testing
+the fix on the affected hardware.
 
-### Changed: the battery detail panel marks its state of charge as an average
+### Changed: the detail panel now names its period, and marks averages with Ø
 
-The state-of-charge line in the battery detail panel is the average over the shown
-period, not the live level. It now carries the same approximately-equal marker the
-panel already uses elsewhere, so it no longer reads as the current charge. Thanks to
-@stalakerob for the suggestion.
+The detail panel shows the selected period as its title, so every figure reads as a
+total or average over that window, not a live value. Averages (including the battery
+state of charge) now carry a Ø mean symbol instead of the old approximately-equal
+sign, which wrongly suggested a rough value. Thanks to @stalakerob for the nudge on
+the battery line (#331).
 
 ---
 

README.md

@@ -9,14 +9,17 @@
 A Home Assistant card that turns your Energy dashboard into a living scene:
 what your home produces, stores and consumes, as the sun crosses your sky.
 
-<img src="images/helios-preview.gif" alt="The Helios card: the sun crossing its arc over a home, the day's production curve rising around the house, live production and consumption chips following along." width="880">
+<img src="images/preview_01.png" alt="The Helios card: the day's production curve arcing over the home along the sun's path, with the live production and consumption chips and the timeline below." width="880">
 
 [**Live demo**](https://helios-ha.org/helios/) &nbsp;&nbsp; [**Documentation**](https://helios-ha.org/help/) &nbsp;&nbsp; [**Roadmap**](https://helios-ha.org/roadmap/)
 
-[![HACS default](https://img.shields.io/badge/HACS-Default-41BDF5.svg)](https://hacs.xyz/)
-[![License: GPL-3.0](https://img.shields.io/badge/License-GPL%20v3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0)
-[![Stars](https://img.shields.io/github/stars/ReikanYsora/Helios?style=flat&color=e0a106)](https://github.com/ReikanYsora/Helios/stargazers)
-[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-Support-FFDD00?logo=buymeacoffee&logoColor=000000)](https://www.buymeacoffee.com/reikanysora)
+[![Release](https://img.shields.io/github/v/release/ReikanYsora/Helios?display_name=tag&style=for-the-badge&color=e0a106)](https://github.com/ReikanYsora/Helios/releases)
+[![HACS Default](https://img.shields.io/badge/HACS-Default-e0a106.svg?style=for-the-badge)](https://github.com/hacs/default)
+[![License](https://img.shields.io/github/license/ReikanYsora/Helios?style=for-the-badge&color=blue)](https://www.gnu.org/licenses/gpl-3.0)
+[![Stars](https://img.shields.io/github/stars/ReikanYsora/Helios?style=for-the-badge&color=e0a106)](https://github.com/ReikanYsora/Helios/stargazers)
+[![Downloads](https://img.shields.io/github/downloads/ReikanYsora/Helios/total?style=for-the-badge&color=e0a106&label=downloads)](https://github.com/ReikanYsora/Helios/releases)
+[![Community: Discussions](https://img.shields.io/badge/community-discussions-e0a106?style=for-the-badge&logo=github&logoColor=white)](https://github.com/ReikanYsora/Helios/discussions)
+[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-support-FFDD00?style=for-the-badge&logo=buymeacoffee&logoColor=000000)](https://www.buymeacoffee.com/reikanysora)
 
 </div>
 
@@ -128,11 +131,9 @@ against.
 
 <br>
 
-<img src="images/preview_01.png" alt="Helios: the live 2.5D scene with the sun's arc, the production and consumption chips and the timeline below.">
+<img src="images/preview_02.png" alt="Helios: the live flow with the production, battery, grid, home and device chips around the house, and the sun's irradiance.">
 
-<img src="images/preview_02.png" alt="Helios: the day's curve standing on the sun's ground track around the home, with a per-source breakdown.">
-
-<img src="images/preview_03.png" alt="Helios: the scene with cast building shadows and the detail panel open on a chip.">
+<img src="images/preview_03.png" alt="Helios: a custom-themed scene with the chip cluster and the timeline below.">
 
 An interactive live demo is at [helios-ha.org](https://helios-ha.org/helios/).
 

dist/helios.js

@@ -1,6 +1,6 @@
 {
   "name": "helios",
-  "version": "2026.8.2-b2",
+  "version": "2026.8.2",
   "description": "HELIOS - real-time solar exposure, cloud cover and PV production card for Home Assistant",
   "license": "GPL-3.0-or-later",
   "type": "module",

images/preview_01.png

@@ -21,8 +21,8 @@ export interface ClipRect
 //The card box grown by a margin. The margin keeps a clipped edge (and its stroke) off the visible
 //card, which ha-card already hides, while still bounding the painted ink to near the card box. On
 //old iOS WebKit the composited SVG layer's backing store is sized to its painted ink: unclipped it
-//spans the whole projected neighbourhood, overflows the layer-size cap and paints only its top half
-//(issue #304). Trimming the geometry also shrinks the per-frame SVG string on every device.
+//spans the whole projected neighbourhood, overflows the layer-size cap and paints only its top half.
+//Trimming the geometry also shrinks the per-frame SVG string on every device.
 const CLIP_MARGIN = 32;
 
 export function cardClipRect(width: number, height: number): ClipRect

images/preview_02.png

@@ -110,7 +110,7 @@ export const heliosCardStyles = css`
     /*  Screen-space scene SVG: cast shadows + extruded buildings repainted every frame.
         Full-size overlay above the ground, click-transparent (the HUD SVGs own their pointer events).
         The building/shadow paths extend far past the card (a whole neighbourhood projected), so this element's
-        painted content is much larger than its box. On old iOS (issue #304) the compositor then sized this
+        painted content is much larger than its box. On old iOS the compositor then sized this
         layer's backing store to that content, blew the OS layer-size cap and painted only its top half. contain:
         paint + overflow:hidden bound the layer to the card box (what we actually see), so the backing store stays
         card-sized and the whole scene paints. No visible change elsewhere: off-card paint was already clipped. */
@@ -364,6 +364,23 @@ export const heliosCardStyles = css`
         pointer-events: none;
         -webkit-font-smoothing: antialiased;
     }
+    /*  Panel title: the selected rolling period, so the figures below never read as a live value. */
+    .detail-panel .dp-title
+    {
+        align-self: stretch;
+        text-align: center;
+        font-size: var(--ha-font-size-xs, 10px);
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--detail-accent, var(--primary-color, #03a9f4));
+        padding-bottom: 4px;
+        margin-bottom: 2px;
+        border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
     .detail-panel .dp-row
     {
         display: flex;
@@ -377,6 +394,17 @@ export const heliosCardStyles = css`
         flex: 0 0 auto;
         color: var(--detail-accent, var(--primary-color, #03a9f4));
     }
+    /*  The Ø average marker, held to the same 16px column as the icons so the min / avg / max rows line up. */
+    .detail-panel .dp-row .dp-glyph
+    {
+        flex: 0 0 auto;
+        width: 16px;
+        text-align: center;
+        font-size: 15px;
+        line-height: 1;
+        font-weight: 700;
+        color: var(--detail-accent, var(--primary-color, #03a9f4));
+    }
     .detail-panel .dp-row span
     {
         flex: 1 1 auto;