From 93551c62d52885c76057e230cdcbd3d32030511d Mon Sep 17 00:00:00 2001 From: Tony Stork Date: Tue, 8 Jul 2025 16:28:20 -0400 Subject: [PATCH] Add SPC outlooks to weather page --- main_dashboard.yaml | 600 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 600 insertions(+) diff --git a/main_dashboard.yaml b/main_dashboard.yaml index 8d98607..ffe69d5 100644 --- a/main_dashboard.yaml +++ b/main_dashboard.yaml @@ -6090,6 +6090,606 @@ views: units: pressure: '' speed: '' + - type: grid + cards: + - type: heading + heading: SPC Outlooks + heading_style: title + - type: vertical-stack + cards: + - type: grid + columns: 4 + square: false + cards: + - type: markdown + content: '**Risk**' + - type: custom:mushroom-template-card + primary: Day 1 + fill_container: true + secondary: >- + {{ + as_local(strptime(state_attr('sensor.spc_outlook_day_1', + 'valid')+'+0000', '%Y%m%d%H%M%z')).strftime('%a %d %H:%M') + }} + + {{ + as_local(strptime(state_attr('sensor.spc_outlook_day_1', + 'expire')+'+0000', '%Y%m%d%H%M%z')).strftime('%a %d + %H:%M') }} + card_mod: + style: + mushroom-state-info$: | + .container { + --card-secondary-font-size: 9px; + } + .secondary { + white-space: break-spaces !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + - type: custom:mushroom-template-card + primary: Day 2 + fill_container: true + secondary: >- + {{ + as_local(strptime(state_attr('sensor.spc_outlook_day_2', + 'valid')+'+0000', '%Y%m%d%H%M%z')).strftime('%a %d %H:%M') + }} + + {{ + as_local(strptime(state_attr('sensor.spc_outlook_day_2', + 'expire')+'+0000', '%Y%m%d%H%M%z')).strftime('%a %d + %H:%M') }} + card_mod: + style: + mushroom-state-info$: | + .container { + --card-secondary-font-size: 9px; + } + .secondary { + white-space: break-spaces !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + - type: custom:mushroom-template-card + primary: Day 3 + fill_container: true + secondary: >- + {{ + as_local(strptime(state_attr('sensor.spc_outlook_day_3', + 'valid')+'+0000', '%Y%m%d%H%M%z')).strftime('%a %d %H:%M') + }} + + {{ + as_local(strptime(state_attr('sensor.spc_outlook_day_3', + 'expire')+'+0000', '%Y%m%d%H%M%z')).strftime('%a %d + %H:%M') }} + card_mod: + style: + mushroom-state-info$: | + .container { + --card-secondary-font-size: 9px; + } + .secondary { + white-space: break-spaces !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + - type: grid + columns: 4 + square: false + cards: + - type: custom:mushroom-template-card + icon: mdi:weather-lightning + icon_color: white + layout: vertical + fill_container: true + primary: Categorical + tap_action: + action: more-info + card_mod: + style: + mushroom-shape-icon$: | + .shape { + --icon-symbol-size: 40px; + --icon-size: 100px; + left: -20px; + top: -35px; + margin-bottom: -80px; + border-radius: 50% !important; + } + mushroom-state-info$: | + .container { + --card-primary-font-size: 10px; + --card-primary-color: white; + } + .: | + ha-card { + overflow: hidden; + } + - type: custom:mushroom-template-card + entity: sensor.spc_outlook_day_1_outlook_day + primary: '{{ states(''sensor.spc_outlook_day_1'') }}' + layout: vertical + fill_container: true + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + {% if not is_state('sensor.spc_outlook_day_1', 'No Risk') %} + --card-primary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_1', 'categorical_fill') }} + } + - type: custom:mushroom-template-card + entity: sensor.spc_outlook_day_2 + primary: '{{ states(''sensor.spc_outlook_day_2'') }}' + layout: vertical + fill_container: true + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + {% if not is_state('sensor.spc_outlook_day_2', 'No Risk') %} + --card-primary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_2', 'categorical_fill') }} + } + - type: custom:mushroom-template-card + entity: sensor.spc_outlook_day_3 + primary: '{{ states(''sensor.spc_outlook_day_3'') }}' + layout: vertical + fill_container: true + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + {% if not is_state('sensor.spc_outlook_day_3', 'No Risk') %} + --card-primary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_3', 'categorical_fill') }} + } + - type: grid + columns: 4 + square: false + cards: + - type: custom:mushroom-template-card + icon: mdi:weather-windy + icon_color: cyan + layout: vertical + fill_container: true + primary: Wind + card_mod: + style: + mushroom-shape-icon$: | + .shape { + --icon-symbol-size: 40px; + --icon-size: 100px; + left: -20px; + top: -45px; + margin-bottom: -80px; + border-radius: 50% !important; + } + mushroom-state-info$: | + .container { + --card-primary-font-size: 10px; + --card-primary-color: cyan; + } + .: | + ha-card { + overflow: hidden; + } + - type: custom:mushroom-template-card + entity: sensor.spc_outlook_day_1 + primary: >- + {{ state_attr('sensor.spc_outlook_day_1', + 'wind_probability') }} + layout: vertical + fill_container: true + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + {% if state_attr('sensor.spc_outlook_day_1', 'wind_probability') != 'No Risk' %} + --card-primary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_1', 'wind_fill') }} + } + - type: custom:mushroom-template-card + entity: sensor.spc_outlook_day_2 + primary: >- + {{ state_attr('sensor.spc_outlook_day_2', + 'wind_probability') }} + layout: vertical + fill_container: true + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + {% if state_attr('sensor.spc_outlook_day_2', 'wind_probability') != 'No Risk' %} + --card-primary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_2', 'wind_fill') }} + } + - type: vertical-stack + cards: + - type: custom:mushroom-template-card + primary: Day 4 + secondary: '{{ states(''sensor.spc_outlook_day_4'') }}' + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + --card-secondary-font-size: 9px; + {% if not is_state('sensor.spc_outlook_day_4', 'No Risk') %} + --card-primary-color: black; + --card-secondary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_4', 'probabilistic_fill') }} + } + - type: custom:mushroom-template-card + primary: Day 5 + secondary: '{{ states(''sensor.spc_outlook_day_5'') }}' + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + --card-secondary-font-size: 9px; + {% if not is_state('sensor.spc_outlook_day_5', 'No Risk') %} + --card-primary-color: black; + --card-secondary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_5', 'probabilistic_fill') }} + } + - type: grid + columns: 4 + square: false + cards: + - type: custom:mushroom-template-card + icon: mdi:weather-tornado + icon_color: red + layout: vertical + fill_container: true + primary: Tornado + card_mod: + style: + mushroom-shape-icon$: | + .shape { + --icon-symbol-size: 40px; + --icon-size: 100px; + left: -20px; + top: -45px; + margin-bottom: -80px; + border-radius: 50% !important; + } + mushroom-state-info$: | + .container { + --card-primary-font-size: 10px; + --card-primary-color: red; + } + .: | + ha-card { + overflow: hidden; + } + - type: custom:mushroom-template-card + entity: sensor.spc_outlook_day_1 + primary: >- + {{ state_attr('sensor.spc_outlook_day_1', + 'torn_probability') }} + layout: vertical + fill_container: true + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + {% if state_attr('sensor.spc_outlook_day_1', 'torn_probability') != 'No Risk' %} + --card-primary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_1', 'torn_fill') }} + } + - type: custom:mushroom-template-card + entity: sensor.spc_outlook_day_2 + primary: >- + {{ state_attr('sensor.spc_outlook_day_2', + 'torn_probability') }} + layout: vertical + fill_container: true + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + {% if state_attr('sensor.spc_outlook_day_2', 'torn_probability') != 'No Risk' %} + --card-primary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_2', 'torn_fill') }} + } + - type: vertical-stack + cards: + - type: custom:mushroom-template-card + primary: Day 6 + secondary: '{{ states(''sensor.spc_outlook_day_6'') }}' + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + --card-secondary-font-size: 9px; + {% if not is_state('sensor.spc_outlook_day_6', 'No Risk') %} + --card-primary-color: black; + --card-secondary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_6', 'probabilistic_fill') }} + } + - type: custom:mushroom-template-card + primary: Day 7 + secondary: '{{ states(''sensor.spc_outlook_day_7'') }}' + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + --card-secondary-font-size: 9px; + {% if not is_state('sensor.spc_outlook_day_7', 'No Risk') %} + --card-primary-color: black; + --card-secondary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_7', 'probabilistic_fill') }} + } + - type: grid + columns: 4 + square: false + cards: + - type: custom:mushroom-template-card + icon: mdi:weather-hail + icon_color: blue + layout: vertical + fill_container: true + primary: Hail + card_mod: + style: + mushroom-shape-icon$: | + .shape { + --icon-symbol-size: 40px; + --icon-size: 100px; + left: -20px; + top: -40px; + margin-bottom: -80px; + border-radius: 50% !important; + } + mushroom-state-info$: | + .container { + --card-primary-font-size: 10px; + --card-primary-color: #2196F2; + } + .: | + ha-card { + overflow: hidden; + } + - type: custom:mushroom-template-card + entity: sensor.spc_outlook_day_1 + primary: >- + {{ state_attr('sensor.spc_outlook_day_1', + 'hail_probability') }} + layout: vertical + fill_container: true + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + {% if state_attr('sensor.spc_outlook_day_1', 'hail_probability') != 'No Risk' %} + --card-primary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_1', 'hail_fill') }} + } + - type: custom:mushroom-template-card + entity: sensor.spc_outlook_day_2 + primary: >- + {{ state_attr('sensor.spc_outlook_day_2', + 'hail_probability') }} + layout: vertical + fill_container: true + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + {% if state_attr('sensor.spc_outlook_day_2', 'hail_probability') != 'No Risk' %} + --card-primary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_2', 'hail_fill') }} + } + - type: vertical-stack + cards: + - type: custom:mushroom-template-card + primary: Day 8 + secondary: '{{ states(''sensor.spc_outlook_day_8'') }}' + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + --card-secondary-font-size: 9px; + {% if not is_state('sensor.spc_outlook_day_8', 'No Risk') %} + --card-primary-color: black; + --card-secondary-color: black; + {% endif %} + } + .primary { + white-space: normal !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + .: | + ha-card { + background-color: {{ state_attr('sensor.spc_outlook_day_8', 'probabilistic_fill') }} + } + - type: custom:mushroom-template-card + primary: ... + card_mod: + style: + mushroom-state-info$: | + .container { + --card-primary-font-size: 12px; + } + .primary { + white-space: normal !important; + word-wrap: break-word; + overflow-wrap: break-word; + + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + .: | + ha-card { + background-color: #000000; + } - type: grid cards: - type: heading