feat: elevation-limit-aware Sun Today chart + show/hide toggles (#46) (#113)

Author: jrhubott

dist/adaptive-cover-pro-card.js

@@ -136,6 +136,7 @@ export class AcpHarnessCardStage extends LitElement {
       show_sunrise_sunset: c.show_sunrise_sunset,
       show_cover_fill: c.show_cover_fill,
       show_window_arrow: c.show_window_arrow,
+      show_elevation_chart: c.show_elevation_chart,
       cover_colors: this.config.entries.map((e) => e.color),
       north_offset: c.north_offset,
     };
@@ -158,6 +159,7 @@ export class AcpHarnessCardStage extends LitElement {
       show_badge: t.show_badge,
       ...(Object.keys(badges).length > 0 ? { badges } : {}),
       show_compass: t.show_compass,
+      show_elevation_chart: t.show_elevation_chart,
       show_motion_icon: t.show_motion_icon,
       layout: t.layout,
     };

harness/src/card-stage.ts

@@ -754,6 +754,7 @@ export class AcpHarnessControlPanel extends LitElement {
             'show_sunrise_sunset',
             'show_cover_fill',
             'show_window_arrow',
+            'show_elevation_chart',
           ] as const
         ).map((k) =>
           this._checkbox(k, this.config.compass[k], (v) =>
@@ -784,6 +785,7 @@ export class AcpHarnessControlPanel extends LitElement {
             'show_controls',
             'show_badge',
             'show_compass',
+            'show_elevation_chart',
             'show_motion_icon',
           ] as const
         ).map((k) =>

harness/src/control-panel.ts

@@ -35,6 +35,7 @@ function defaultCompass(): HarnessConfig['compass'] {
     show_sunrise_sunset: true,
     show_cover_fill: true,
     show_window_arrow: true,
+    show_elevation_chart: true,
     north_offset: 0,
   };
 }
@@ -65,6 +66,7 @@ function defaultTile(): HarnessConfig['tile'] {
     show_badge: true,
     badges: defaultBadges(),
     show_compass: true,
+    show_elevation_chart: true,
     show_motion_icon: true,
     layout: 'detailed',
   };
@@ -468,6 +470,7 @@ export const SCENARIOS: Scenario[] = [
           title: 'Living Room',
           window_azimuth: 180,
           min_elevation: 10,
+          max_elevation: 70,
           color: '#ff7043',
         }),
         makeEntry({

harness/src/scenarios.ts

@@ -103,6 +103,7 @@ export interface SkyCompassCardOptions {
   show_sunrise_sunset: boolean;
   show_cover_fill: boolean;
   show_window_arrow: boolean;
+  show_elevation_chart: boolean;
   north_offset: number;
 }
 
@@ -127,6 +128,7 @@ export interface TileCardOptions {
     cloud: boolean;
   };
   show_compass: boolean;
+  show_elevation_chart: boolean;
   show_motion_icon: boolean;
   layout: 'one-line' | 'detailed';
 }

harness/src/types.ts

@@ -19,7 +19,8 @@ type ToggleKey =
   | 'show_sun_path'
   | 'show_sunrise_sunset'
   | 'show_cover_fill'
-  | 'show_window_arrow';
+  | 'show_window_arrow'
+  | 'show_elevation_chart';
 
 interface ToggleRow {
   key: ToggleKey;
@@ -89,6 +90,12 @@ const TOGGLE_ROWS: ToggleRow[] = [
     descKey: 'editor.compass.toggle_window_arrow_desc',
     defaultOn: true,
   },
+  {
+    key: 'show_elevation_chart',
+    labelKey: 'editor.compass.toggle_elevation_chart_label',
+    descKey: 'editor.compass.toggle_elevation_chart_desc',
+    defaultOn: true,
+  },
 ];
 
 @customElement(SKY_COMPASS_CARD_EDITOR_NAME)

src/adaptive-cover-pro-sky-compass-card-editor.ts

@@ -14,6 +14,7 @@ import {
 import type { DiscoveredEntities, SkyCompassCardConfig } from './types';
 
 import './components/sky-compass';
+import './components/elevation-chart';
 import './adaptive-cover-pro-sky-compass-card-editor';
 
 @customElement(SKY_COMPASS_CARD_NAME)
@@ -156,6 +157,13 @@ export class AdaptiveCoverProSkyCompassCard extends LitElement {
           .coverColors=${cfg.cover_colors ?? []}
           .northOffsetDeg=${normalizeAzimuth(cfg.north_offset ?? 0)}
         ></acp-sky-compass>
+        ${cfg.show_elevation_chart !== false
+          ? html`<acp-elevation-chart
+              .hass=${this.hass}
+              .discovered=${discoveredList[0]}
+              ?compact=${!!cfg.compact}
+            ></acp-elevation-chart>`
+          : nothing}
         ${missing.length > 0
           ? html`<div class="warn dim">
               ${t('root.compass_not_found', this.hass, { entries: missing.join(', ') })}

src/adaptive-cover-pro-sky-compass-card.ts

@@ -57,6 +57,7 @@ const FORM_DEFAULTS = {
   show_controls: true,
   show_badge: true,
   show_compass: true,
+  show_elevation_chart: true,
   show_motion_icon: true,
   layout: 'detailed',
   // All badges default on; only `=== false` hides.
@@ -95,6 +96,7 @@ const LABEL_KEYS: Record<string, string> = {
   badge_glare_zone: 'editor.tile.badge_glare_zone',
   badge_cloud: 'editor.tile.badge_cloud',
   show_compass: 'editor.tile.show_compass',
+  show_elevation_chart: 'editor.tile.show_elevation_chart',
   show_motion_icon: 'editor.tile.show_motion_icon',
   tap_action: 'editor.tile.tap_action',
   hold_action: 'editor.tile.hold_action',
@@ -382,6 +384,7 @@ export class AdaptiveCoverProTileCardEditor extends LitElement implements Lovela
       },
       { name: 'show_motion_icon', selector: { boolean: {} } },
       { name: 'show_compass', selector: { boolean: {} } },
+      { name: 'show_elevation_chart', selector: { boolean: {} } },
       { name: 'tap_action', selector: { ui_action: {} } },
       { name: 'hold_action', selector: { ui_action: {} } },
       { name: 'double_tap_action', selector: { ui_action: {} } },

src/adaptive-cover-pro-tile-card-editor.ts

@@ -175,6 +175,7 @@ export class AdaptiveCoverProTileCard extends LitElement {
         .discovered=${discovered}
         .open=${this._dialogOpen}
         .showCompass=${this._config.show_compass !== false}
+        .showElevationChart=${this._config.show_elevation_chart !== false}
         .badges=${this._config.badges}
         @acp-dialog-close=${this._closeDialog}
       ></acp-more-info-dialog>

src/adaptive-cover-pro-tile-card.ts

@@ -4,6 +4,7 @@ import type { HomeAssistant } from 'custom-card-helpers';
 
 import type { DiscoveredEntities, SunPositionAttributes } from '../types';
 import { findFovWindows, sampleDay, startOfDayInZone, type SunSample } from '../lib/sun-model';
+import { elevationBandFraction } from '../lib/geometry';
 import { formatClock } from '../lib/formatters';
 import { t } from '../lib/i18n';
 
@@ -31,7 +32,7 @@ export class ElevationChart extends LitElement {
   protected render(): TemplateResult | typeof nothing {
     if (!this.hass || !this.discovered) return nothing;
     const attrs = this._sunAttrs();
-    const { latitude, longitude, time_zone } = this.hass.config as unknown as {
+    const { latitude, longitude, time_zone } = (this.hass.config ?? {}) as unknown as {
       latitude?: number;
       longitude?: number;
       time_zone?: string;
@@ -72,6 +73,27 @@ export class ElevationChart extends LitElement {
     const currentSample = this._interpAt(samples, now);
     const currentY = currentSample ? yAt(currentSample.elevation) : null;
 
+    // Elevation limits (optional integration attrs). When present, the FOV
+    // time-bands are clipped to the in-band elevation range and horizontal
+    // limit gridlines are drawn. Graceful no-op when both are absent.
+    const hasMin = typeof attrs.min_elevation === 'number';
+    const hasMax = typeof attrs.max_elevation === 'number';
+    const plotTop = PAD_T;
+    const plotBottom = VIEWBOX_H - PAD_B;
+    // loFrac → lower elevation (axisMin side, bottom of plot); hiFrac → upper.
+    const { loFrac, hiFrac } = elevationBandFraction(
+      attrs.min_elevation,
+      attrs.max_elevation,
+      minElev,
+      maxElev,
+    );
+    // Map a 0..1 elevation-axis fraction to a y coordinate (0 = bottom).
+    const yForFrac = (frac: number): number => plotBottom - frac * (plotBottom - plotTop);
+    const bandTopY = yForFrac(hiFrac);
+    const bandBottomY = yForFrac(loFrac);
+    const bandY = hasMin || hasMax ? bandTopY : plotTop;
+    const bandHeight = hasMin || hasMax ? bandBottomY - bandTopY : plotBottom - plotTop;
+
     const fovBands = fovWindows.map((w) => ({
       x0: xAt(samples[w.startIdx].t),
       x1: xAt(samples[w.endIdx].t),
@@ -117,14 +139,27 @@ export class ElevationChart extends LitElement {
             <!-- horizon -->
             <line class="horizon" x1=${PAD_L} y1=${horizonY} x2=${VIEWBOX_W - PAD_R} y2=${horizonY} />
 
-            <!-- FOV shaded bands (each time the sun is actually in FOV + above horizon) -->
+            <!-- elevation limit gridlines (drawn only for limits actually set) -->
+            ${
+              hasMin
+                ? svg`<line class="limit-line" x1=${PAD_L} y1=${bandBottomY} x2=${VIEWBOX_W - PAD_R} y2=${bandBottomY} />`
+                : nothing
+            }
+            ${
+              hasMax
+                ? svg`<line class="limit-line" x1=${PAD_L} y1=${bandTopY} x2=${VIEWBOX_W - PAD_R} y2=${bandTopY} />`
+                : nothing
+            }
+
+            <!-- FOV shaded bands (each time the sun is actually in FOV + above horizon),
+                 clipped to the in-band elevation range when limits are present -->
             ${fovBands.map(
               (b) => svg`<rect
                   class="fov-band"
                   x=${b.x0}
-                  y=${PAD_T}
+                  y=${bandY}
                   width=${b.x1 - b.x0}
-                  height=${VIEWBOX_H - PAD_T - PAD_B}
+                  height=${bandHeight}
                 />`,
             )}
 
@@ -215,6 +250,12 @@ export class ElevationChart extends LitElement {
       stroke-width: 1;
       stroke-dasharray: 2 2;
     }
+    .limit-line {
+      stroke: var(--warning-color, gold);
+      stroke-width: 1;
+      stroke-dasharray: 4 3;
+      opacity: 0.7;
+    }
     .fov-band {
       fill: var(--warning-color, gold);
       fill-opacity: 0.18;