Skip to content

Climate Tab — House Temperature Tiles (all Ecobee sensors)

Date: 2026-07-04 Ticket: #67 Status: Approved (design settled via visual brainstorm)

Goal

Give the Command dashboard → Climate tab (command_dashboard.yaml) a full-house temperature readout — a tile for every Ecobee thermostat and Ecobee remote sensor — styled like the Desk dashboard temps view (desk_companion.yaml): glowing conic-gradient rings colored by comfort band, with an occupancy dot.

Scope (8 sensors — settled)

Exactly the set the Desk temps view renders. No Echo temps, plant/soil, food/fridge, or appliance temps.

3 thermostat zones (Ecobee built-ins) — big "hero" rings with temp + VOC/CO₂/RH + occupancy dot: | Room | temp | AQ (VOC / CO₂ / RH) | occupancy | |---|---|---|---| | Office | sensor.office_temperature | sensor.office_volatile_organic_compounds / sensor.office_carbon_dioxide / sensor.office_humidity | binary_sensor.office_occupancy | | Master Bedroom | sensor.bedroom_temperature | sensor.bedroom_volatile_organic_compounds / sensor.bedroom_carbon_dioxide / sensor.bedroom_humidity | binary_sensor.bedroom_occupancy | | Dining | sensor.dining_room_temperature | sensor.dining_room_volatile_organic_compounds / sensor.dining_room_carbon_dioxide / sensor.dining_room_humidity | binary_sensor.dining_room_occupancy |

5 Ecobee remote sensors — smaller temp-only rings + occupancy dot: | Label | temp | occupancy | |---|---|---| | Henry | sensor.bedroom_1_temperature | binary_sensor.bedroom_1_occupancy | | Isaac | sensor.bedroom_2_temperature | binary_sensor.bedroom_2_occupancy | | Vivian | sensor.bedroom_3_temperature | binary_sensor.bedroom_3_occupancy | | Annie | sensor.bedroom_4_temperature | binary_sensor.bedroom_4_occupancy | | Kitchen | sensor.downstairs_temperature | binary_sensor.downstairs_occupancy |

All 25 referenced entities verified present in tests/fixtures/entities.txt.

Visual design (approved: Option A, two-tier, full-width)

Reuse the Desk temps ring renderer verbatim in style: - Ring: conic-gradient(<band> 0 <pct>%, rgba(255,255,255,0.08) <pct>%), dark inner disc with the temperature; pct = clamp((temp-55)/(90-55), 0, 1) * 100. - Band color: green #34d399 when 68 ≤ t ≤ 76, amber #fbbf24 when 64 ≤ t ≤ 80, red #ef4444 otherwise. - Occupancy dot: green glow when the paired binary_sensor.*_occupancy is on, else dim. - Hero rings also show a VOC/CO₂/RH stat row (VOC amber ≥500/red ≥1000; CO₂ amber ≥800/red ≥1200; RH neutral) — same thresholds as the Desk view. - Tap: hero rings → the existing thermostat pop-ups (#thermo-office / #thermo-bedroom / #thermo-dining); remote rings → more-info.

The Desk view's kiosk-sized fixed heights (54vh / 30vh) are dropped — the tiles size to fit the Climate tab. This is the "responsive re-fit" the ticket flagged.

Layout (approved: full-width band via sections view)

The Climate tab is currently a masonry view; a row of hero rings squeezes into one narrow column there. Convert the Climate view to type: sections so the temps band and the two thermostat cards can span full width. Same cards, more controllable layout engine.

New top-to-bottom order:

  1. Hero — greeting / weather / 4-day forecast / house-status dot. Full width. Unchanged.
  2. House Temperatures band — NEW, full width. A vertical-stack: row of 3 hero rings (horizontal-stack) above a row of 5 remote rings (horizontal-stack), ported from the Desk temps view minus its hero/nav bar and fixed vh heights.
  3. "Why it's running" — thermostat reason card. Full-size / full width (per user).
  4. Temperature — 24h trend — the apexcharts Bedroom/Office/Dining lines. Full-size / full width (per user).
  5. Responsive grid row — Food temps (fridge / fridge-freezer / deep freezer), HVAC — condenser runtime today, Pre-cool before peak (threshold + "pre-cooling now"). These flow side-by-side on wide screens, wrapping on narrow.
  6. Thermostat pop-ups (#thermo-*) — hidden until a ring is tapped. Only #thermo-bedroom and #thermo-office exist today, so add a new #thermo-dining pop-up (bubble-card: thermostat for climate.dining_room + a 24h mini-graph-card, matching the existing two) — the Dining hero ring taps to it.

Removed: the current 3-tile "Room Temps + Occupancy" grid (Bedroom / Dining / Downstairs) — superseded by the new band (those three are now Master Bed / Dining / Kitchen, plus 5 more).

Constraints / conventions

  • No standalone title/header cards above tiles (house convention / memory no-title-cards-on-dashboards). The band has no title card; rings are self-labeling.
  • Keep the tab's glass styling (rgba(255,255,255,0.10) bg, hairline border, blur).
  • Consider factoring the ring body template into a shared YAML anchor to avoid duplicating the JS 8× (nice-to-have, not required).

Testing / docs

  • make test — Tier 3 entity-ref check covers every new entity_id (all pre-verified).
  • Manually confirm on the live tab after deploy: rings render, colors/occupancy correct, taps open the right pop-ups, layout holds on a narrower window.
  • Update docs/climate.md (manual) — describe the new House Temperatures tiles.
  • Close #67 on merge.

Out of scope

  • Any sensor outside the 8 (Echo temps, plant/soil, food, appliances).
  • Changes to the Desk temps view (style reference only).
  • New automations or template sensors — this is presentation only.