Decluttering Card
The main UI code) makes many calls to the code on this page. This helps reduce what otherwise would be hundreds to thousands of lines of redundant code.
While the name Decluttering Card is awkward, it functions as a library to retrieve reusable code. More information about the card is available here.
Code:
# General Sections:
#1) Temperature
#2) Wind
#3) Rain
#************************* TEMPERATURE ******************************
temperature_range:
card:
type: custom:mushroom-template-card
#entity: sensor.outdoor_temperature
primary: "[[e_label]]: {{ states('[[entity]]') }}°F"
secondary: |-
{% set t_today = states('[[entity]]') %}
{% set t_now = states('sensor.outdoor_temperature_merged') %}
{% if t_today == t_now %}
Now
{% else %}
{{ as_timestamp(states.[[entity]].[[e_attribute]]) | [[filter_format]] }}
{% endif %}
icon: |-
{% set temp=states('[[entity]]') | float() %}
{% if temp >= 90 %}
mdi:sun-thermometer
{% else %}
[[icon]]
{% endif %}
icon_color: |-
{% set temp=states('[[entity]]') | float() %}
{% if temp < 28 %}
#3C0ADA
{% elif temp < 30 %}
#2E0ADA
{% elif temp < 32 %}
#200ADA
{% elif temp < 34 %}
#120ADA'
{% elif temp < 36 %}
#0A0FDA
{% elif temp < 38 %}
#0A1DDA
{% elif temp < 40 %}
#092BDB
{% elif temp < 42 %}
#0938DB
{% elif temp < 44 %}
#0946DB
{% elif temp < 46 %}
#0954DB
{% elif temp < 48 %}
#0962DB
{% elif temp < 50 %}
#0970DB
{% elif temp < 52 %}
#097EDB
{% elif temp < 54 %}
#098CDB
{% elif temp < 56 %}
#099ADB
{% elif temp < 58 %}
#08A8DC
{% elif temp < 60 %}
#03D1FA
{% elif temp < 62 %}
#05FAEB
{% elif temp < 64 %}
#07F9B3
{% elif temp < 66 %}
#09F87C
{% elif temp < 68 %}
#0BF747
{% elif temp < 70 %}
#0DF713
{% elif temp < 72 %}
#3EF60F
{% elif temp < 74 %}
#73F511
{% elif temp < 76 %}
#A7F413
{% elif temp < 78 %}
#DBF415
{% elif temp < 80 %}
#ECF80C
{% elif temp < 82 %}
#F5ED0C
{% elif temp < 84 %}
#F3D80B
{% elif temp < 86 %}
#F0C40A
{% elif temp < 88 %}
#EEAF09
{% elif temp < 90 %}
#EC9B08
{% elif temp < 92 %}
#E98808
{% elif temp < 94 %}
#E77407
{% elif temp < 96 %}
#E46106
{% elif temp < 98 %}
#E24E06
{% elif temp < 100 %}
#E03B05
{% elif temp < 102 %}
#DD2804
{% elif temp < 104 %}
#DB1603
{% elif temp < 106 %}
#D80403
{% elif temp < 108 %}
#D60211
{% else %}
#D40122
{% endif %}
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
--title-font-size: var(--mush-title-font-size, 24px);
}
.container {
--card-secondary-font-size: 30px;
--card-primary-font-size: 10px;
}
temperature_mushroom_template1:
card:
type: custom:mushroom-template-card
#entity: sensor.outdoor_temperature
primary: "[[e_label]]: {{ states('[[entity]]') }}°F"
secondary: |-
{% set temp_today = states('[[entity]]') %}
{% set temp_now = states('[[entity2]]') %}
{% if temp_today == temp_now %}
Now
{% else %}
{{ as_timestamp(states.[[entity]].attributes.[[e_attribute]]) | [[filter_format]] }}
{% endif %}
icon: |-
{% from 'weather.jinja' import icon_temperature_type %}
{{ icon_temperature_type('[[entity]]') }}
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('[[entity]]') }}
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
margin-top: -1.2em !important;
}
temperature_min_max_stack_element:
card:
type: custom:mushroom-template-card
#entity: sensor.outdoor_temperature
primary: "[[e_label]]: {{ state_attr('[[entity]]','[[e_attribute]]') }}°F"
secondary: |-
{% set t_element = state_attr('[[entity]]','[[e_attribute]]') %}
{% set t_now = states('[[entity2]]') %}
{% if t_element == t_now %}
Now
{% else %}
{{ as_timestamp(states.[[entity]].[[e_attribute_lu]]) | [[filter_format]] }}
{% endif %}
icon: |-
{% from 'weather.jinja' import icon_temperature_type %}
{{ icon_temperature_type('[[entity]]','[[e_attribute]]') }}
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('[[entity]]','[[e_attribute]]') }}
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
width: fit-content;
background: none;
border: none !important;
box-shadow: none !important;
--card-primary-font-size: 12px;
--card-secondary-font-size: 10px;
margin-top: -1.2em !important;
}
min_max_stack2:
card:
type: custom:expander-card
title-card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 55% 45%
grid-template-rows: 2
grid-template-areas: |
"z01 z02"
"z03 z04"
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: "Min"
tap_action:
action: none
card_mod:
style: |
ha-card {
justify-content: center;
border: none !important;
margin-left: 0.1em !important;
box-shadow: none !important;
margin-bottom: -0.2em !important;
--chip-font-size: 14px;
margin-left: 1.3em !important;
}
view_layout:
grid-area: z01
- type: custom:mushroom-chips-card
chips:
- type: template
content: "Max"
tap_action:
action: none
card_mod:
style: |
ha-card {
justify-content: center;
border: none !important;
margin-left: 0.1em !important;
box-shadow: none !important;
margin-bottom: -0.2em !important;
--chip-font-size: 14px;
margin-left: 1.3em !important;
}
view_layout:
grid-area: z02
- type: custom:decluttering-card
template: temperature_mushroom_template1
variables:
- entity: '[[entity_min_base]]'
- entity2: '[[entity_curr_temp]]'
- e_label: Today
- e_attribute: last_updated
- filter_format: timestamp_custom('%-I:%M %p')
view_layout:
grid-area: z03
- type: custom:decluttering-card
template: temperature_mushroom_template1
variables:
- entity: '[[entity_max_base]]'
- entity2: '[[entity_curr_temp]]'
- e_label: Today
- e_attribute: last_updated
- filter_format: timestamp_custom('%-I:%M %p')
view_layout:
grid-area: z04
expanded: false
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-template-rows: 4
grid-template-areas: |
"z12 z13"
"z17 z18"
"z22 z23"
"z27 z28"
cards:
- type: custom:decluttering-card
template: temperature_min_max_stack_element
variables:
- entity: '[[entity_min_base]]'
- e_attribute: '[[entity_min_attrib_this_week]]'
- e_attribute_lu: '[[entity_min_attrib_this_week_lu]]'
- e_label: Week
- entity2: '[[entity_curr_temp]]'
- filter_format: timestamp_custom('%A@%-I:%M %p')
view_layout:
grid-area: z12
- type: custom:decluttering-card
template: temperature_min_max_stack_element
variables:
- entity: '[[entity_max_base]]'
- e_attribute: '[[entity_max_attrib_this_week]]'
- e_attribute_lu: '[[entity_max_attrib_this_week_lu]]'
- e_label: Week
- entity2: '[[entity_curr_temp]]'
- filter_format: timestamp_custom('%A@%-I:%M %p')
view_layout:
grid-area: z13
- type: custom:decluttering-card
template: temperature_min_max_stack_element
variables:
- entity: '[[entity_min_base]]'
- e_attribute: '[[entity_min_attrib_this_month]]'
- e_attribute_lu: '[[entity_min_attrib_this_month_lu]]'
- e_label: Month
- entity2: '[[entity_curr_temp]]'
- filter_format: timestamp_custom('%m-%d@%-I:%M %p')
view_layout:
grid-area: z17
- type: custom:decluttering-card
template: temperature_min_max_stack_element
variables:
- entity: '[[entity_max_base]]'
- e_attribute: '[[entity_max_attrib_this_month]]'
- e_attribute_lu: '[[entity_max_attrib_this_month_lu]]'
- e_label: Month
- entity2: '[[entity_curr_temp]]'
- filter_format: timestamp_custom('%m-%d@%-I:%M %p')
view_layout:
grid-area: z18
- type: custom:decluttering-card
template: temperature_min_max_stack_element
variables:
- entity: '[[entity_min_base]]'
- e_attribute: '[[entity_min_attrib_this_year]]'
- e_attribute_lu: '[[entity_min_attrib_this_year_lu]]'
- e_label: Year
- entity2: '[[entity_curr_temp]]'
- filter_format: timestamp_custom('%Y-%m-%d@%-I:%M %p')
view_layout:
grid-area: z22
- type: custom:decluttering-card
template: temperature_min_max_stack_element
variables:
- entity: '[[entity_max_base]]'
- e_attribute: '[[entity_max_attrib_this_year]]'
- e_attribute_lu: '[[entity_max_attrib_this_year_lu]]'
- e_label: Year
- entity2: '[[entity_curr_temp]]'
- filter_format: timestamp_custom('%Y-%m-%d@%-I:%M %p')
view_layout:
grid-area: z23
- type: custom:decluttering-card
template: temperature_min_max_stack_element
variables:
- entity: '[[entity_min_base]]'
- e_attribute: '[[entity_min_attrib_atl]]'
- e_attribute_lu: '[[entity_min_attrib_atl_lu]]'
- e_label: ATL
- entity2: '[[entity_curr_temp]]'
- filter_format: timestamp_custom('%Y-%m-%d@%-I:%M %p')
view_layout:
grid-area: z27
- type: custom:decluttering-card
template: temperature_min_max_stack_element
variables:
- entity: '[[entity_max_base]]'
- e_attribute: '[[entity_max_attrib_ath]]'
- e_attribute_lu: '[[entity_max_attrib_ath_lu]]'
- e_label: ATH
- entity2: '[[entity_curr_temp]]'
- filter_format: timestamp_custom('%Y-%m-%d@%-I:%M %p')
view_layout:
grid-area: z28
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
pop_up_temperature_panel:
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 35% 65%
grid-template-rows: 2
grid-template-areas: |
"z01 z02"
cards:
- type: custom:mushroom-template-card
primary: "Temp:"
#secondary:
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('[[entity_current_temp]]') }}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-top: -0.5em !important;
margin-bottom: -0.35em !important;
}
view_layout:
grid-area: z01
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 33% 33% 34%
grid-template-rows: 2
grid-template-areas: |
"z02 z03 z04"
"z06 z07 z08"
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
content: "Forecast"
tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: -0.5em !important;
margin-bottom: -0.35em !important;
margin-left: -0.3em !important;
border: none !important;
}
view_layout:
grid-area: z02
- type: custom:mushroom-chips-card
chips:
- type: template
content: "Now"
# tap_action:
# action: none
card_mod:
style: |
ha-card {
margin-top: -0.5em !important;
margin-bottom: -0.35em !important;
border: none !important;
}
view_layout:
grid-area: z03
- type: custom:mushroom-chips-card
chips:
- type: template
content: "Feels Like"
# tap_action:
# action: none
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
margin-top: -0.5em !important;
margin-bottom: -0.35em !important;
border: none !important;
}
view_layout:
grid-area: z04
- type: custom:mushroom-chips-card
chips:
- type: template
entity: '[[entity_forecast_high]]'
content: "{{ states('[[entity_forecast_high]]') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.0em !important;
{% from 'weather.jinja' import icon_color_temp %}
--chip-background: {{ icon_color_temp('[[entity_forecast_high]]') }};
--chip-height: 25px;
--chip-font-size: 12px;
{% if states('[[entity_forecast_high]]') | float () < 60 %}
--text-color: white;
{% endif %}
}
view_layout:
grid-area: z06
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.outdoor_temperature_merged
content: "{{ states('[[entity_current_temp]]') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.0em !important;
{% from 'weather.jinja' import icon_color_temp %}
--chip-background: {{ icon_color_temp('[[entity_current_temp]]') }};
--chip-height: 25px;
--chip-font-size: 12px;
{% if states('[[entity_current_temp]]') | float () < 60 %}
--text-color: white;
{% endif %}
}
view_layout:
grid-area: z07
- type: custom:mushroom-chips-card
chips:
- type: template
entity: '[[entity_feels_like_temp]]'
content: "{{ states('[[entity_feels_like_temp]]') | float() | round (1) }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.45em !important;
{% from 'weather.jinja' import icon_color_temp %}
--chip-background: {{ icon_color_temp('[[entity_feels_like_temp]]') }};
--chip-height: 25px;
--chip-font-size: 12px;
{% if states('[[entity_feels_like_temp]]') | float () < 60 %}
--text-color: white;
{% endif %}
}
view_layout:
grid-area: z08
view_layout:
grid-area: z02
temperature_mini_graph:
card:
type: 'custom:mini-graph-card'
animate: false
color_thresholds:
- value: 28
color: '#3C0ADA'
- value: 30
color: '#2E0ADA'
- value: 32
color: '#200ADA'
- value: 34
color: '#120ADA'
- value: 36
color: '#0A0FDA'
- value: 38
color: '#0A1DDA'
- value: 40
color: '#092BDB'
- value: 42
color: '#0938DB'
- value: 44
color: '#0946DB'
- value: 46
color: '#0954DB'
- value: 48
color: '#0962DB'
- value: 50
color: '#0970DB'
- value: 52
color: '#097EDB'
- value: 54
color: '#098CDB'
- value: 56
color: '#099ADB'
- value: 58
color: '#08A8DC'
- value: 60
color: '#03D1FA'
- value: 62
color: '#05FAEB'
- value: 64
color: '#07F9B3'
- value: 66
color: '#09F87C'
- value: 68
color: '#0BF747'
- value: 70
color: '#0DF713'
- value: 72
color: '#3EF60F'
- value: 74
color: '#73F511'
- value: 76
color: '#A7F413'
- value: 78
color: '#DBF415'
- value: 80
color: '#ECF80C'
- value: 82
color: '#F5ED0C'
- value: 84
color: '#F3D80B'
- value: 86
color: '#F0C40A'
- value: 88
color: '#EEAF09'
- value: 90
color: '#EC9B08'
- value: 92
color: '#E98808'
- value: 94
color: '#E77407'
- value: 96
color: '#E46106'
- value: 98
color: '#E24E06'
- value: 100
color: '#E03B05'
- value: 102
color: '#DD2804'
- value: 104
color: '#DB1603'
- value: 106
color: '#D80403'
- value: 108
color: '#D60211'
- value: 110
color: '#D40122'
entities:
#- entity: sensor.outdoor_temperature_merged
- entity: '[[entity]]'
#index: 0
name: Outside
show_state: true
show_legend: false
state_adaptive_color: true
- entity: input_number.nighttime
name: Night
color: gray
show_line: false
show_points: false
show_legend: false
y_axis: secondary
#lower_bound_secondary: 0
hours_to_show: '[[hours]]'
name: '[[label]]'
hour24: false
line_width: 2
show:
points: false
state: false
icon: false
extrema: '[[show_extrema]]'
points_per_hour: 12
style: |
.graph {
border-top: 1px dotted grey;
}
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
mini_graph_title_card:
card:
type: 'custom:mini-graph-card'
entities:
- entity: '[[entity_1]]'
- entity: '[[entity_2]]'
color: gray
show_line: false
y_axis: secondary
upper_bound: '[[upper_bound]]'
lower_bound: '[[lower_bound]]'
hours_to_show: '[[hours]]'
#name: '[[label]]'
#hour24: false
line_width: 2
points_per_hour: 12
show:
name: false
icon: false
points: false
state: false
legend: false
#extrema: '[[show_extrema]]'
color_thresholds:
- value: 28
color: '#3C0ADA'
- value: 30
color: '#2E0ADA'
- value: 32
color: '#200ADA'
- value: 34
color: '#120ADA'
- value: 36
color: '#0A0FDA'
- value: 38
color: '#0A1DDA'
- value: 40
color: '#092BDB'
- value: 42
color: '#0938DB'
- value: 44
color: '#0946DB'
- value: 46
color: '#0954DB'
- value: 48
color: '#0962DB'
- value: 50
color: '#0970DB'
- value: 52
color: '#097EDB'
- value: 54
color: '#098CDB'
- value: 56
color: '#099ADB'
- value: 58
color: '#08A8DC'
- value: 60
color: '#03D1FA'
- value: 62
color: '#05FAEB'
- value: 64
color: '#07F9B3'
- value: 66
color: '#09F87C'
- value: 68
color: '#0BF747'
- value: 70
color: '#0DF713'
- value: 72
color: '#3EF60F'
- value: 74
color: '#73F511'
- value: 76
color: '#A7F413'
- value: 78
color: '#DBF415'
- value: 80
color: '#ECF80C'
- value: 82
color: '#F5ED0C'
- value: 84
color: '#F3D80B'
- value: 86
color: '#F0C40A'
- value: 88
color: '#EEAF09'
- value: 90
color: '#EC9B08'
- value: 92
color: '#E98808'
- value: 94
color: '#E77407'
- value: 96
color: '#E46106'
- value: 98
color: '#E24E06'
- value: 100
color: '#E03B05'
- value: 102
color: '#DD2804'
- value: 104
color: '#DB1603'
- value: 106
color: '#D80403'
- value: 108
color: '#D60211'
- value: 110
color: '#D40122'
mini_graph_title_card_solid_color:
card:
type: 'custom:mini-graph-card'
entities:
- entity: '[[entity_1]]'
color: blue
- entity: sensor.night_san_jose
color: gray
show_line: false
y_axis: secondary
upper_bound: '[[upper_bound]]'
lower_bound: '[[lower_bound]]'
hours_to_show: '[[hours]]'
#name: '[[label]]'
#hour24: false
line_width: 2
points_per_hour: 12
show:
name: false
icon: false
points: false
state: false
legend: false
#extrema: '[[show_extrema]]'
style: |
.graph {
border-top: 1px dotted grey;
}
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
test_apex:
card:
type: custom:apexcharts-card
#layout: minimal
header:
show: true
title: "5 day trend"
#colorize_states: true
show_states: false
graph_span: 120hr
span:
start: hour
offset: -96h
now:
show: true
color: red
#label: Now
yaxis:
- id: local_temp
max: ~85
apex_config:
labels:
show: false
axisBorder:
show: false
axisTicks:
show: false
tickAmount: 3
stroke:
show: true,
width: 1
- id: time_of_day
apex_config:
labels:
show: false
axisBorder:
show: false
axisTicks:
show: false
experimental:
color_threshold: true
series:
- entity: '[[entity_temp]]'
color_threshold:
- value: 26
color: '#3C0ADA'
- value: 28
color: '#2E0ADA'
- value: 30
color: '#200ADA'
- value: 32
color: '#120ADA'
- value: 34
color: '#0A0FDA'
- value: 36
color: '#0A1DDA'
- value: 38
color: '#092BDB'
- value: 40
color: '#0938DB'
- value: 42
color: '#0946DB'
- value: 44
color: '#0954DB'
- value: 46
color: '#0962DB'
- value: 48
color: '#0970DB'
- value: 50
color: '#097EDB'
- value: 52
color: '#098CDB'
- value: 54
color: '#099ADB'
- value: 56
color: '#08A8DC'
- value: 58
color: '#03D1FA'
- value: 60
color: '#05FAEB'
- value: 62
color: '#07F9B3'
- value: 64
color: '#09F87C'
- value: 66
color: '#0BF747'
- value: 68
color: '#0DF713'
- value: 70
color: '#3EF60F'
- value: 72
color: '#73F511'
- value: 74
color: '#A7F413'
- value: 76
color: '#DBF415'
- value: 78
color: '#ECF80C'
- value: 80
color: '#F5ED0C'
- value: 82
color: '#F3D80B'
- value: 84
color: '#F0C40A'
- value: 86
color: '#EEAF09'
- value: 88
color: '#EC9B08'
- value: 90
color: '#E98808'
- value: 92
color: '#E77407'
- value: 94
color: '#E46106'
- value: 96
color: '#E24E06'
- value: 98
color: '#E03B05'
- value: 100
color: '#DD2804'
- value: 102
color: '#DB1603'
- value: 104
color: '#D80403'
- value: 106
color: '#D60211'
- value: 108
color: '#D40122'
yaxis_id: local_temp
stroke_width: 3
#show:
# extremas: max
extend_to: now
- entity: '[[entity_dewpoint]]'
name: Dewpoint
yaxis_id: local_temp
#type: area
#curve: stepline
color: dark grey
opacity: 0.4
stroke_width: 1
show:
datalabels: false
in_header: false
extremas: false
- entity: '[[entity_forecast_temp]]'
name: Forecast
yaxis_id: local_temp
type: line
#curve: stepline
data_generator: |
return entity.attributes.forecast.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.temperature];
});
color: grey
opacity: 0.4
stroke_width: 3
stroke_dash: 3
show:
datalabels: false
in_header: false
extremas: false
in_chart: true
- entity: sun.sun
transform: 'return x === "below_horizon" ? 1 : 0;'
name: Nighttime
yaxis_id: time_of_day
type: area
curve: stepline
color: grey
opacity: 0.20
stroke_width: 0
show:
datalabels: false
in_header: false
extremas: false
update_interval: 10min
cache: true
apex_config:
#stroke:
# show: true,
# width: 1
#yaxis:
# max: 320
#span:
# offset: '+12h'
chart:
height: 150px
zoom:
enabled: true
legend:
show: false
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
# 2) WIND ***********************************************************************************************
wind_component_title:
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: '[[wind_title]]'
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-bottom: -0.2em !important;
}
wind_component_value:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: '[[gust_base]]'
content: "{{ (state_attr('[[gust_base]]','[[gust_base_attrib]]') | float(0)) | round(2) }} mph"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.0em !important;
--chip-font-size: 14px;
wind_mini_graph:
card:
type: 'custom:mini-graph-card'
animate: false
entities:
- entity: '[[entity_wind]]'
#index: 0
#name: Wind Speed
#show_state: true
#show_legend: false
color: orange
- entity: '[[entity_gust]]'
color: blue
- entity: sensor.night_san_jose
color: gray
show_line: false
show_points: false
show_legend: false
y_axis: secondary
upper_bound: ~35
hours_to_show: 24
line_width: 2
show:
name: false
icon: false
#points: false
state: false
legend: false
fill: fade
#extrema: true
points_per_hour: 48
card_mod:
style:
.: |
ha-card {
border: none !important;
}
pop_up_sky_wind_panel:
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 35% 65%
grid-template-rows: 1
grid-template-areas: |
"z01 z02"
cards:
- type: custom:mushroom-template-card
primary: |-
Sky:
secondary: "Wind:"
icon: |-
{% from 'weather.jinja' import icon_weather_type %}
{{ icon_weather_type('[[entity_weather_condition]]') }}
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('[[entity_current_temp]]') }}
card_mod:
style: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
--card-primary-font-size: 14px;
--card-primary-font-weight: bold;
--card-secondary-font-size: 14px;
--card-secondary-font-weight: bold;
}
view_layout:
grid-area: z01
- type: custom:mushroom-template-card
primary: |-
{{ states('[[entity_sky_coverage]]') }}, chance of rain: {{ states('[[entity_precip_probability]]') }}%
secondary: "{{ states('[[entity_wind_description]]') }}"
card_mod:
style: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
--card-primary-font-size: 12px;
--card-primary-font-weight: normal;
--card-secondary-font-size: 12px;
--card-secondary-font-weight: normal;
}
view_layout:
grid-area: z02
wind_detail_popup:
card:
type: custom:vertical-stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
#entity: sensor.outdoor_temperature
primary: "Wind: {{ states('[[wind_speed]]') }} mph"
secondary: |-
{% from 'bft_related.jinja' import wind_direction_converted %}
{% set wind_direction_label = wind_direction_converted('[[wind_direction]]') %}
{% from 'bft_related.jinja' import bft_wind_text %}
{{ bft_wind_text('[[wind_speed]]', wind_direction_label) }}
icon: mdi:weather-windy
icon_color: |-
{% from 'weather.jinja' import icon_color_bft_wind %}
{{ icon_color_bft_wind('[[wind_speed]]') }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Wind Detail
content:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
#entity: sensor.outdoor_temperature
primary: |
{% from 'bft_related.jinja' import wind_direction_converted %}
{% set wind_direction_label = wind_direction_converted('[[wind_direction]]') %}
{% from 'bft_related.jinja' import bft_wind_text %}
{{ bft_wind_text('[[wind_speed]]', wind_direction_label)}} @{{ states('[[wind_speed]]') }} mph
#"Wind: {{ states('[[wind_speed]]') }} mph"
#secondary: |-
# {% from 'bft_related.jinja' import wind_direction_converted %}
# {% set wind_direction_label = wind_direction_converted('[[wind_direction]]') %}
# {% from 'bft_related.jinja' import bft_wind_text %}
# {{ bft_wind_text('[[wind_speed]]', wind_direction_label) }}
icon: mdi:weather-windy
icon_color: |-
{% from 'weather.jinja' import icon_color_bft_wind %}
{{ icon_color_bft_wind('[[wind_speed]]') }}
#tap_action:
# action: fire-dom-event
- type: custom:apexcharts-card
layout: minimal
header:
standard_format: false
show: true
title: 48Hr Wind Speed
graph_span: 48hr
yaxis:
- id: wind_speed
max: ~25
apex_config:
#labels:
# show: false
#axisBorder:
# show: false
tickAmount: 5
#axisTicks:
# show: false
stroke:
show: true,
width: 1
- id: air_pressure
max: ~30
apex_config:
tickAmount: 3
decimals: 1
opposite: true
- id: time_of_day
# decimals: 0
apex_config:
labels:
show: false
axisBorder:
show: false
axisTicks:
show: false
- id: sun_elevation
apex_config:
labels:
show: false
#axisBorder:
# show: false
min: 0
tickAmount: 5
#axisTicks:
# show: false
stroke:
show: true,
width: 1
series:
- entity: '[[wind_speed]]'
name: Wind
yaxis_id: wind_speed
stroke_width: 1.25
- entity: '[[wind_gust]]'
name: Gust
yaxis_id: wind_speed
stroke_width: 0.5
opacity: 0.75
show:
datalabels: false
in_header: false
extremas: max
- entity: '[[relative_pressure]]'
name: rPressure
yaxis_id: air_pressure
stroke_width: 0.5
opacity: 0.75
color: purple
show:
datalabels: false
in_header: false
#extremas: max
- entity: sun.sun
transform: 'return x === "below_horizon" ? 1 : 0;'
name: Night
yaxis_id: time_of_day
type: area
curve: stepline
color: grey
opacity: 0.25
stroke_width: 0
#show:
# datalabels: false
# in_header: false
# extremas: false
update_interval: 1min
#cache: true
apex_config:
#stroke:
# show: true,
# width: 1
chart:
height: 150px
zoom:
enabled: true
card_mod:
style:
.: |
ha-card {
border: none !important;
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 28% 18% 18% 18% 18%
grid-template-rows: 2
grid-template-areas: |
"z01 z02 z03 z04 z05"
"z07 z08 z09 z10 z11"
cards:
- type: custom:decluttering-card
template: wind_component_title
variables:
- wind_title: Today
view_layout:
grid-area: z02
- type: custom:decluttering-card
template: wind_component_title
variables:
- wind_title: Week
view_layout:
grid-area: z03
- type: custom:decluttering-card
template: wind_component_title
variables:
- wind_title: Month
view_layout:
grid-area: z04
- type: custom:decluttering-card
template: wind_component_title
variables:
- wind_title: Year
view_layout:
grid-area: z05
- type: custom:mushroom-chips-card
chips:
- type: template
content: "Gusts"
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
--chip-font-size: 16px;
}
view_layout:
grid-area: z07
- type: custom:mushroom-chips-card
chips:
- type: template
entity: '[[gust_base]]'
content: "{{ states('[[gust_base]]') |round(2) }} mph"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.0em !important;
--chip-font-size: 14px;
}
view_layout:
grid-area: z08
- type: custom:decluttering-card
template: wind_component_value
variables:
- gust_base: '[[gust_base]]'
- gust_base_attrib: '[[gust_base_attrib_tw]]'
view_layout:
grid-area: z09
- type: custom:decluttering-card
template: wind_component_value
variables:
- gust_base: '[[gust_base]]'
- gust_base_attrib: '[[gust_base_attrib_tm]]'
view_layout:
grid-area: z10
- type: custom:decluttering-card
template: wind_component_value
variables:
- gust_base: '[[gust_base]]'
- gust_base_attrib: '[[gust_base_attrib_ty]]'
view_layout:
grid-area: z11
- type: custom:windrose-card
#title: Wind Speed & Direction
hours_to_show: 12
max_width: 300
refresh_interval: 300
background_image: '[[windrose_image]]'
current_direction:
show_arrow: true
arrow_size: 40
center_circle_size: 30
#windspeed_bar_full: true
windspeed_bar_location: right
windspeed_bar_full: false
#render_relative_scale: false
wind_direction_entity:
entity: '[[wind_direction]]'
wind_direction_unit: degrees
windspeed_entities:
- entity: '[[wind_speed]]'
name: Last 12 Hours
speed_range_beaufort: true
input_speed_unit: mph
output_speed_unit: mph
direction_compensation: 0
cardinal_direction_letters: NESW
card_mod:
class: top-level-card
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
}
card_mod:
style: >
ha-card { border-radius: 8px;background: none;box-shadow:
none;--ha-card-border-width: 0; } :host { flex: 1 1 0% !important;
min-width: min-content !important; }
mushroom-shape-icon$: |
{% set wind = states('[[wind_speed]]') | float() %}
{% if wind > 18 %}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% endif %}
# This shows the mini graph to the right on the main pop-up
- type: custom:decluttering-card
template: wind_mini_graph
variables:
- entity_wind: '[[wind_speed]]'
- entity_gust: '[[wind_gust]]'
card_mod:
style:
.: |
ha-card {
border: none !important;
}
card_mod:
style:
.: |
ha-card {
border: none !important;
}
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
# 3) RAIN **********************************************************************************************************
rain_mini_graph_pacific:
card:
type: 'custom:mini-graph-card'
animate: false
entities:
- entity: '[[entity_rain]]'
#index: 0
#name: Wind Speed
#show_state: true
#show_legend: false
color: blue
- entity: sensor.night_san_jose
color: gray
show_line: false
show_points: false
show_legend: false
y_axis: secondary
upper_bound: ~1
hours_to_show: 24
line_width: 2
show:
name: false
icon: false
#points: false
state: false
legend: false
fill: fade
#extrema: true
points_per_hour: 48
rain_mini_graph_eastern:
card:
type: 'custom:mini-graph-card'
animate: false
entities:
- entity: '[[entity_rain]]'
#index: 0
#name: Wind Speed
#show_state: true
#show_legend: false
color: blue
- entity: sensor.night_florida
color: gray
show_line: false
show_points: false
show_legend: false
y_axis: secondary
upper_bound: ~1
hours_to_show: 24
line_width: 2
show:
name: false
icon: false
#points: false
state: false
legend: false
fill: fade
#extrema: true
points_per_hour: 48
rain_value:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: '[[rain_base]]'
content: "{{ ((states('[[rain_today]]') | float(0)) + (state_attr('[[rain_base]]','[[base_attrib]]') | float(0))) | round(2) }} in"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.0em !important;
--chip-font-size: 14px;
rain_summary:
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 40% 15% 15% 15% 15%
grid-template-rows: 2
grid-template-areas: |
"z01 z02 z03 z04 z05"
"z07 z08 z09 z10 z11"
cards:
- type: custom:decluttering-card
template: max_aqi_title
variables:
- aqi_title: Today
view_layout:
grid-area: z02
- type: custom:decluttering-card
template: max_aqi_title
variables:
- aqi_title: Week
view_layout:
grid-area: z03
- type: custom:decluttering-card
template: max_aqi_title
variables:
- aqi_title: Month
view_layout:
grid-area: z04
- type: custom:decluttering-card
template: max_aqi_title
variables:
- aqi_title: Season
view_layout:
grid-area: z05
- type: custom:mushroom-chips-card
chips:
- type: template
content: "Rain"
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
--chip-font-size: 16px;
}
view_layout:
grid-area: z07
- type: custom:mushroom-chips-card
chips:
- type: template
entity: '[[rain_today]]'
content: "{{ states('[[rain_today]]') |round(2) }} in"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.0em !important;
--chip-font-size: 14px;
}
view_layout:
grid-area: z08
- type: custom:decluttering-card
template: rain_value
variables:
- rain_today: '[[rain_today]]'
- rain_base: '[[rain_base]]'
- base_attrib: '[[rbase_attr01]]'
view_layout:
grid-area: z09
- type: custom:decluttering-card
template: rain_value
variables:
- rain_today: '[[rain_today]]'
- rain_base: '[[rain_base]]'
- base_attrib: '[[rbase_attr02]]'
view_layout:
grid-area: z10
- type: custom:decluttering-card
template: rain_value
variables:
- rain_today: '[[rain_today]]'
- rain_base: '[[rain_base]]'
- base_attrib: '[[rbase_attr03]]'
view_layout:
grid-area: z11
rain_summary_on_popup:
card:
type: custom:expander-card
title-card:
type: custom:mushroom-template-card
#entity: sensor.outdoor_temperature
primary: |-
{% set r_today = states('[[rain_today]]') | float() %}
{% if r_today > 0 %}
Rain Today: {{ r_today | round(2) }} in
{% else %}
Last Rain: {{ states('[[rain_base]]') | round(2) }} in
{% endif%}
secondary: |-
{% set r_today = states('[[rain_today]]') | float() %}
{% set r_today_time = state_attr('[[rain_today]]','last_updated') %}
{% set l_rain_time = state_attr('[[rain_base]]','last_rain_updated') %}
{% set l_rain_date = as_datetime(l_rain_time).date() %}
{% set days_ago = (now().date() - l_rain_date).days %}
{% set hours_ago = (today_at() - as_datetime(r_today_time)).hours %}
{% set time_diff = now() - as_datetime(r_today_time) %}
{% set mins_diff = (time_diff.total_seconds() / 60) | round(0) %}
{% if days_ago >= 2 and r_today == 0 %}
{{ days_ago }} days ago, on {{ as_timestamp(l_rain_time) | timestamp_custom('%B %-d @%-I:%M %p') }}
{% elif days_ago == 1 and r_today == 0 %}
Yesterday {{ as_timestamp(l_rain_time) | timestamp_custom('@%-I:%M %p') }}
{% elif r_today > 0 and mins_diff >= 60 %}
{% set hours_diff = (mins_diff / 60 ) | round (0,'floor') %}
{% if mins_diff - (hours_diff * 60) <= 15 %}
{{ hours_diff }} hours ago at {{ as_timestamp(r_today_time) | timestamp_custom('@%-I:%M %p') }}
{% else %}
{{ hours_diff }}+ hours ago at {{ as_timestamp(r_today_time) | timestamp_custom('@%-I:%M %p') }}
{% endif %}
{% elif r_today > 0 and mins_diff >= 15 %}
{{ mins_diff }} minutes ago at {{ as_timestamp(r_today_time) | timestamp_custom('@%-I:%M %p') }}
{% else%}
Raining Now
{% endif%}
icon: mdi:weather-rainy
icon_color: |-
{% set r_today = states('[[rain_today]]') | float() %}
{% if r_today > 0 %}
blue
{% else%}
grey
{% endif %}
expanded: false
card_mod:
style:
.: |
ha-card {
border: none !important;
}
cards:
- type: custom:decluttering-card
template: rain_detail
variables:
- rain_today: '[[rain_today]]'
- rain_base: '[[rain_base]]'
- rbase_attr01: '[[rbase_attr01]]'
- rbase_attr02: '[[rbase_attr02]]'
- rbase_attr03: '[[rbase_attr03]]'
- rain_daily_history: '[[rain_daily_history]]'
- web_link_01: '[[web_link_01]]'
- web_link_02: '[[web_link_02]]'
- web_link_03: '[[web_link_03]]'
- web_link_04: '[[web_link_04]]'
- web_link_05: '[[web_link_05]]'
card_mod:
style:
.: |
ha-card {
border: none !important;
}
rain_detail:
card:
type: vertical-stack
cards:
- type: custom:decluttering-card
template: rain_summary
variables:
- rain_today: '[[rain_today]]'
- rain_base: '[[rain_base]]'
- rbase_attr01: '[[rbase_attr01]]'
- rbase_attr02: '[[rbase_attr02]]'
- rbase_attr03: '[[rbase_attr03]]'
# ADD RAIN GRAPHS IF APPLICABLE
#1 day rain graph
- type: custom:decluttering-card
template: rain_graph_1day
variables:
- rain_today: '[[rain_today]]'
#14 day rain graph
- type: custom:decluttering-card
template: rain_graph_14day
variables:
- rain_base: '[[rain_base]]'
- rain_daily_history: '[[rain_daily_history]]'
- type: custom:decluttering-card
template: web_links
variables:
- web_link_01: '[[web_link_01]]'
- web_link_02: '[[web_link_02]]'
- web_link_03: '[[web_link_03]]'
- web_link_04: '[[web_link_04]]'
- web_link_05: '[[web_link_05]]'
rain_graph_1day:
card:
type: custom:apexcharts-card
#layout: minimal
header:
show: true
title: "Hourly rain today"
show_states: false
#graph_span: 1d
#span:
# end: day
#offset: '+3hr'
graph_span: 24hr
span:
start: day
#offset: -96h
now:
show: true
color: red
#label: Now
yaxis:
- id: sj_temp
#max: ~75
apex_config:
labels:
show: true
decimals: 2
- id: time_of_day
# decimals: 0
apex_config:
labels:
show: false
axisBorder:
show: false
axisTicks:
show: false
series:
- entity: '[[rain_today]]'
type: line
color: blue
yaxis_id: sj_temp
stroke_width: 2
show:
name_in_header: true
datalabels: false
in_chart: true
legend_value: true
extremas: false
- entity: sun.sun
transform: 'return x === "below_horizon" ? 1 : 0;'
name: Night
yaxis_id: time_of_day
type: area
curve: stepline
color: grey
opacity: 0.25
stroke_width: 0
update_interval: 10min
cache: true
stacked: true
apex_config:
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0.0
opacityFrom: 1
opacityTo: 0.5
stops: 10
chart:
height: 150px
grid:
show: false
borderColor: blue
strokeDashArray: 2
dataLabels:
background:
borderWidth: 0
opacity: 0
foreColor: blue
#This is the one to use
card_mod:
style: |
ha-card {
border: none !important;
{% if states('[[rain_today]]') | float() < 0.001 %}
display: none;
{% endif %}
}
rain_graph_14day:
card:
type: custom:apexcharts-card
#layout: minimal
header:
show: true
#title: "Last 14 days"
#colorize_states: true
show_states: true
graph_span: 14d
span:
end: day
offset: '-1d'
apex_config:
fill:
type: gradient
gradient:
type: vertical
shadeIntensity: 0
opacityFrom: 1
opacityTo: 0.5
stops: 10
chart:
height: 150px
grid:
show: false
borderColor: blue
strokeDashArray: 2
dataLabels:
background:
borderWidth: 0
opacity: 0
foreColor: blue
offsetY: -10
plotOptions:
bar:
borderRadius: 0
dataLabels:
position: top
series:
#using this entry just for the 14 sum total in header
- entity: '[[rain_daily_history]]'
name: Last 14 Days
type: column
color: blue
#yaxis_id: sj_temp
#stroke_width: 2
group_by:
func: sum
duration: 14d
fill: zero
statistics:
type: state
period: day
align: middle
show:
name_in_header: true
datalabels: false
in_chart: false
legend_value: false
extremas: false
#using this entry to display daily rain totals
- entity: '[[rain_daily_history]]'
name: Yesterday
type: column
color: blue
group_by:
func: max
duration: 1day
fill: zero
statistics:
type: state
period: day
align: start
show:
name_in_header: true
datalabels: true
in_chart: true
legend_value: false
extremas: false
card_mod:
style:
.: |
ha-card {
border: none !important;
{% if state_attr('[[rain_base]]','last_rain_days_ago') | int >= 14 %}
display: none;
{% endif %}
}
web_links:
default:
- web_link_01: ""
- web_link_02: ""
- web_link_03: ""
- web_link_04: ""
- web_link_05: ""
card:
type: markdown
content: |
**Local Links**
<font color='#0000ff'><ha-icon icon="mdi:water"> </ha-icon> [[web_link_01]]
<ha-icon icon="mdi:water"> </ha-icon> [[web_link_02]]
<ha-icon icon="mdi:water"> </ha-icon> [[web_link_03]]
<ha-icon icon="mdi:water"> </ha-icon> [[web_link_04]]
<ha-icon icon="mdi:water"> </ha-icon> [[web_link_05]]
#title: Local Links Title
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
margin-top: -0.3em !important;
border: none !important;
box-shadow: none !important;
}
attributes:
label: Links
legend_label_top:
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: '[[legend_label]]'
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
--chip-font-size: 9px;
--chip-height: 20px;
margin-top: -0.4em !important;
margin-bottom: -0.4em !important;
}
legend_label_bottom:
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: '[[legend_label]]'
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
--chip-font-size: 9px;
--chip-height: 20px;
margin-top: -0.4em !important;
}
max_aqi_title:
card:
type: custom:mushroom-chips-card
chips:
- type: template
content: '[[aqi_title]]'
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-bottom: -0.2em !important;
}
max_aqi_value:
card:
type: custom:mushroom-chips-card
chips:
- type: template
entity: '[[aqi_entity]]'
content: |
{% if '[[aqi_attrib]]' == 'none' %}
{{ states('[[aqi_entity]]') }}
{% else%}
{{ state_attr('[[aqi_entity]]','[[aqi_attrib]]') }}
{% endif %}
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
justify-content: center;
border: none !important;
box-shadow: none !important;
margin-top: -0.3em !important;
margin-left: 0.25em !important;
{% if '[[aqi_attrib]]' == 'none' %}
{% set aqi = states('[[aqi_entity]]') | int %}
{% else%}
{% set aqi = state_attr('[[aqi_entity]]','[[aqi_attrib]]') | int %}
{% endif %}
{% if aqi >= 300 %}
--chip-background: #800000 ;
--text-color: white;
{% elif aqi >= 200 %}
--chip-background: #800080 ;
--text-color: white;
{% elif aqi >= 150 %}
--chip-background: #FF0000 ;
{% elif aqi >= 100 %}
--chip-background: #FFA500 ;
{% elif aqi >= 50 %}
--chip-background: #FFFF00 ;
{% else %}
--chip-background: #008000 ;
--text-color: white;
{% endif %}
}
#maroon, #800000
#purple, #800080
#red, #FF0000
#orange, #FFA500
#yellow, #FFFF00
#green, #008000
weather_warning_card:
card:
type: custom:mushroom-template-card
entity: sensor.outdoor_temperature
primary: '[[label]]'
secondary:
icon: '[[icon]]'
icon_color: purple
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: '[[label]]'
content:
# type: vertical-stack
# cards:
type: markdown
content: |
{% if states('sensor.pw_san_jose_alerts') >= 1 %}
{{ state_attr('sensor.pw_san_jose_alerts','description') }}
{% else %}
<ha-alert alert-type="warning">Frost Warning — check it out!</ha-alert>
{% endif %}
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
{{ '--ha-card-background: rgba(var(--rgb-blue), 0.3);' }};
animation: ping 2s infinite;
border-radius: 12px;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
nws_weather_alert:
default:
label_segment: ""
card:
type: custom:mushroom-template-card
#entity: sensor.outdoor_temperature
primary: |
{% if states('[[alert_sensor]]') | int >= 2 %}
{% set numcount = states('[[alert_sensor]]') %}
{% else %}
{% set numcount = "" %}
{% endif %}
{% if states('[[alert_sensor]]') | int == 1 %}
[[label_segment]] {{ state_attr('[[alert_sensor]]','title') }}
{% else %}
[[label_segment]] {{ state_attr('[[alert_sensor]]','title_0') }} ({{ numcount }})
{% endif %}
secondary:
icon: |
{% if states('[[alert_sensor]]') | int == 1 %}
{% set search_term = state_attr('[[alert_sensor]]','title') %}
{% else %}
{% set search_term = state_attr('[[alert_sensor]]','title_0') %}
{% endif %}
{% from 'weather.jinja' import find_nws_warning_type %}
{% set alert_type = find_nws_warning_type(search_term) | trim %}
{% if alert_type == "Frost" or alert_type == "Cold" %}
mdi:snowflake-thermometer
{% elif alert_type == "Freeze" %}
mdi:snowflake-alert
{% elif alert_type == "Winter" %}
mdi:weather-snowy-heavy
{% elif alert_type == "Rip" %}
mdi:wave-undercurrent
{% elif alert_type == "Fog" %}
mdi:weather-fog
{% elif alert_type == "Wind" %}
mdi:weather-windy
{% elif alert_type == "Flood" or alert_type == "Rain" %}
mdi:waves
{% else %}
mdi:alert-outline
{% endif %}
icon_color: |
{% if states('[[alert_sensor]]') | int == 1 %}
{% set search_term = state_attr('[[alert_sensor]]','title') %}
{% else %}
{% set search_term = state_attr('[[alert_sensor]]','title_0') %}
{% endif %}
{% from 'weather.jinja' import find_nws_warning_type %}
{% set alert_type = find_nws_warning_type(search_term) | trim %}
{% if alert_type == "Frost" or alert_type == "Cold" or alert_type == "Freeze" or alert_type == "Winter" %}
purple
{% elif alert_type == "Flood" or alert_type == "Rain" %}
blue
{% else %}
red
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: "[[label_segment]] NWS Alert"
content:
# type: vertical-stack
# cards:
type: markdown
content: |
{% if states('[[alert_sensor]]') | int == 1 %}
{{ state_attr('[[alert_sensor]]','title') }}
{{ state_attr('[[alert_sensor]]','description') }}
{{ state_attr('[[alert_sensor]]','uri') }}
{% else %}
**Total Alerts: {{ states('[[alert_sensor]]') }}**
**Alert 1**
{{ state_attr('[[alert_sensor]]','title_0') }}
{{ state_attr('[[alert_sensor]]','description_0') }}
{{ state_attr('[[alert_sensor]]','uri_0') }}
**Alert 2**
{{ state_attr('[[alert_sensor]]','title_1') }}
{{ state_attr('[[alert_sensor]]','description_1') }}
{{ state_attr('[[alert_sensor]]','uri_1') }}
{% if states('[[alert_sensor]]') | int == 3 %}
**Alert 3**
{{ state_attr('[[alert_sensor]]','title_2') }}
{{ state_attr('[[alert_sensor]]','description_2') }}
{{ state_attr('[[alert_sensor]]','uri_2') }}
{% endif %}
{% endif %}
card_mod:
style:
mushroom-state-info$: |
.: |
{% if states('[[alert_sensor]]') | int == 1 %}
{% set search_term = state_attr('[[alert_sensor]]','title') %}
{% else %}
{% set search_term = state_attr('[[alert_sensor]]','title_0') %}
{% endif %}
{% from 'weather.jinja' import find_nws_warning_type %}
{% set alert_type = find_nws_warning_type(search_term) | trim %}
{% if alert_type == "Frost" or alert_type == "Cold" or alert_type == "Freeze" or alert_type == "Winter" %}
ha-card {
{{ '--ha-card-background: rgba(var(--rgb-blue), 0.3);' }};
animation: ping 2s infinite;
border-radius: 12px;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% elif alert_type == "Flood" or alert_type == "Rain" %}
ha-card {
{{ '--ha-card-background: rgba(var(--rgb-blue), 0.3);' }};
animation: ping 2s infinite;
border-radius: 12px;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-blue), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% else %}
ha-card {
{{ '--ha-card-background: rgba(var(--rgb-red), 0.3);' }};
animation: ping 2s infinite;
border-radius: 12px;
}
@keyframes ping {
0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
70% {box-shadow: 0 0 0 10px transparent;}
100% {box-shadow: 0 0 0 0 transparent;}
}
{% endif %}