Making a usable weather dashboard
Below is the yaml code discussed here - INSERT LINK to create a trigger based sensor entity.
# 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 %}