KB8PMY
/
Home-AssistantConfig
mirror of https://github.com/CCOSTAN/Home-AssistantConfig.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve overview climate ribbon responsiveness

Browse Source
master
Carlo Costanzo 1 day ago
parent 64543c0e61
commit 5440d5415c
2 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File

41
config/dashboards/infrastructure/templates/button_card_templates.yaml
Unescape View File

@ -902,6 +902,14 @@ bearstone_overview_ribbon_control:
raw_suffix: ''
display_mode: state
humidity_entity: ''
cooling_entity: ''
cooling_active: >
[[[
const coolingEntity = String(variables?.cooling_entity ?? '').trim();
return Boolean(coolingEntity && states[coolingEntity]?.state === 'on');
]]]
mobile_compact: >
[[[ return window.innerWidth <= 600; ]]]
state_display: >
[[[
const raw = String(entity?.state ?? 'unknown').toLowerCase();
@ -913,6 +921,7 @@ bearstone_overview_ribbon_control:
const currentText = Number.isFinite(current) ? `${Math.round(current)}°` : 'n/a';
const targetText = Number.isFinite(target) ? `${Math.round(target)}°` : 'n/a';
const humidityText = Number.isFinite(humidity) ? ` · ${Math.round(humidity)}%` : '';
if (variables?.mobile_compact) return `${currentText}/${targetText}${humidityText}`;
return `${currentText} / ${targetText}${humidityText}`;
}
const labels = variables?.state_labels || {};
@ -923,12 +932,17 @@ bearstone_overview_ribbon_control:
]]]
styles:
card:
- min-height: >
[[[ return variables?.mobile_compact ? '44px' : 'auto'; ]]]
- padding: >
[[[ return variables?.mobile_compact ? '5px 7px' : '10px 12px'; ]]]
- border-color: >
[[[
const raw = String(entity?.state ?? '').toLowerCase();
const ok = Array.isArray(variables?.ok_states) ? variables.ok_states.map(String) : [];
const active = Array.isArray(variables?.active_states) ? variables.active_states.map(String) : [];
const warning = Array.isArray(variables?.warning_states) ? variables.warning_states.map(String) : [];
if (variables?.cooling_active) return 'rgba(30,136,229,0.45)';
if (['unknown', 'unavailable', 'none', ''].includes(raw) || warning.includes(raw)) return 'rgba(245,124,0,0.45)';
if (active.includes(raw)) return 'rgba(30,136,229,0.45)';
return ok.includes(raw) ? 'rgba(67,160,71,0.45)' : 'rgba(229,57,53,0.40)';
@ -939,24 +953,41 @@ bearstone_overview_ribbon_control:
const ok = Array.isArray(variables?.ok_states) ? variables.ok_states.map(String) : [];
const active = Array.isArray(variables?.active_states) ? variables.active_states.map(String) : [];
const warning = Array.isArray(variables?.warning_states) ? variables.warning_states.map(String) : [];
if (variables?.cooling_active) return 'rgba(227,242,253,0.90)';
if (['unknown', 'unavailable', 'none', ''].includes(raw) || warning.includes(raw)) return 'rgba(255,243,224,0.85)';
if (active.includes(raw)) return 'rgba(227,242,253,0.90)';
return ok.includes(raw) ? 'rgba(232,245,233,0.85)' : 'rgba(255,235,238,0.85)';
]]]
grid:
- grid-template-areas: >
[[[ return variables?.mobile_compact ? '"n" "s"' : '"i n" "i s"'; ]]]
- grid-template-columns: >
[[[ return variables?.mobile_compact ? '1fr' : '28px 1fr'; ]]]
- column-gap: 0
icon:
- display: >
[[[ return variables?.mobile_compact ? 'none' : 'block'; ]]]
- width: >
[[[ return variables?.mobile_compact ? '14px' : '18px'; ]]]
- color: >
[[[
const raw = String(entity?.state ?? '').toLowerCase();
const ok = Array.isArray(variables?.ok_states) ? variables.ok_states.map(String) : [];
const active = Array.isArray(variables?.active_states) ? variables.active_states.map(String) : [];
const warning = Array.isArray(variables?.warning_states) ? variables.warning_states.map(String) : [];
if (variables?.cooling_active) return 'rgba(25,118,210,1)';
if (['unknown', 'unavailable', 'none', ''].includes(raw) || warning.includes(raw)) return 'rgba(245,124,0,1)';
if (active.includes(raw)) return 'rgba(25,118,210,1)';
return ok.includes(raw) ? 'rgba(46,125,50,1)' : 'rgba(198,40,40,1)';
]]]
name:
- font-size: 13px
- font-size: >
[[[ return variables?.mobile_compact ? '10px' : '13px'; ]]]
- font-weight: 900
- line-height: >
[[[ return variables?.mobile_compact ? '11px' : 'normal'; ]]]
- justify-self: >
[[[ return variables?.mobile_compact ? 'center' : 'start'; ]]]
- opacity: 1
state:
- color: >
@ -965,12 +996,18 @@ bearstone_overview_ribbon_control:
const ok = Array.isArray(variables?.ok_states) ? variables.ok_states.map(String) : [];
const active = Array.isArray(variables?.active_states) ? variables.active_states.map(String) : [];
const warning = Array.isArray(variables?.warning_states) ? variables.warning_states.map(String) : [];
if (variables?.cooling_active) return 'rgba(25,118,210,1)';
if (['unknown', 'unavailable', 'none', ''].includes(raw) || warning.includes(raw)) return 'rgba(230,81,0,1)';
if (active.includes(raw)) return 'rgba(25,118,210,1)';
return ok.includes(raw) ? 'rgba(46,125,50,1)' : 'rgba(198,40,40,1)';
]]]
- font-size: 12px
- font-size: >
[[[ return variables?.mobile_compact ? '9px' : '12px'; ]]]
- font-weight: 900
- line-height: >
[[[ return variables?.mobile_compact ? '10px' : 'normal'; ]]]
- justify-self: >
[[[ return variables?.mobile_compact ? 'center' : 'start'; ]]]
- opacity: 1
bearstone_overview_sleep_summary:

9
config/dashboards/overview/sections/00_summary.yaml
Unescape View File

@ -8,6 +8,8 @@
# Systems first, then frequent entry points, climate, and vacuum access.
# -------------------------------------------------------------------
# Notes: Equal-width pills keep the whole ribbon compact and consistent.
# Notes: Thermostat pills use the climate cooling helpers for active light-blue shading.
# Notes: Mobile uses a compact four-column ribbon while preserving 44px tap targets.
######################################################################
type: grid
@ -27,8 +29,9 @@ cards:
grid-gap: 10px
margin: 0
mediaquery:
"(max-width: 900px)":
grid-template-columns: repeat(2, minmax(0, 1fr))
"(max-width: 600px)":
grid-template-columns: repeat(4, minmax(0, 1fr))
grid-gap: 4px
cards:
- type: custom:button-card
template: bearstone_overview_ribbon_control
@ -89,6 +92,7 @@ cards:
variables:
display_mode: climate
humidity_entity: sensor.downstairs_humidity
cooling_entity: binary_sensor.downstairs_ac_is_cooling
ok_states:
- auto
- cool
@ -106,6 +110,7 @@ cards:
variables:
display_mode: climate
humidity_entity: sensor.upstairs_humidity
cooling_entity: binary_sensor.upstairs_ac_is_cooling
ok_states:
- auto
- cool

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.