San Jose UI Popup Yaml
Referring page: Dynamic Weather Dashboard
This section of code is broken out from the decluttering card code from the prior link to keep the san_jose_current_temp template in that file a little more readable. Look for the line that reads !include weather/popup_stack_san_jose.yaml
UI Code:
- type: custom:decluttering-card
template: pop_up_sky_wind_panel
variables:
- entity_weather_condition: weather.pw_san_jose
- entity_current_temp: sensor.outdoor_temperature_merged
- entity_sky_coverage: sensor.sky_coverage_san_jose
- entity_precip_probability: sensor.pw_san_jose_precip_probability
- entity_wind_description: sensor.wind_description_san_jose
- type: custom:decluttering-card
template: pop_up_temperature_panel
variables:
- entity_forecast_high: sensor.pw_san_jose_daytime_high_temperature_0d
- entity_current_temp: sensor.outdoor_temperature_merged
- entity_feels_like_temp: sensor.feels_like_temperature_san_jose
#Pop-up Apex Temp Graph
- type: custom:expander-card
title-card:
type: custom:decluttering-card
template: test_apex
variables:
- entity_temp: sensor.outdoor_temperature_merged
- entity_dewpoint: sensor.gw1100b_dewpoint
- entity_forecast_temp: sensor.weather_forecast_san_jose_hourly
cards:
- type: markdown
content: |
---
# **7 Day History**
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
margin-top: -0.3em !important;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.gw1100b_outdoor_temperature
icon: mdi:thermometer
icon_color: green
content: Office {{ states('sensor.gw1100b_outdoor_temperature')}} °F
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: template
entity: sensor.outside_temp_temperature
icon: mdi:thermometer
icon_color: blue
content: Porch {{ states('sensor.outside_temp_temperature')}} °F
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: template
entity: sensor.gw1100b_temperature_1
icon: mdi:thermometer
icon_color: orange
content: Fence {{ states('sensor.gw1100b_temperature_1')}} °F
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.gw1100b_outdoor_temperature
name: Out Temp
color: green
- entity: sensor.outside_temp_temperature
name: Front Porch
color: '#2196f3'
#y_axis: secondary
- entity: sensor.gw1100b_temperature_1
name: Out Temp1
color: orange
hours_to_show: 120
points_per_hour: 12
line_width: 3
font_size: 50
animate: false
show:
name: false
icon: false
labels: true
state: false
legend: false
fill: fade
expanded: false
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: custom:decluttering-card
template: min_max_stack2
variables:
- entity_curr_temp: sensor.outdoor_temperature_merged
- entity_min_base: sensor.min_temperature_san_jose_today
- entity_min_attrib_this_week: min_temperature_san_jose_this_week
- entity_min_attrib_this_week_lu: attributes.min_temperature_san_jose_this_week_lu
- entity_min_attrib_this_month: min_temperature_san_jose_this_month
- entity_min_attrib_this_month_lu: attributes.min_temperature_san_jose_this_month_lu
- entity_min_attrib_this_year: min_temperature_san_jose_this_year
- entity_min_attrib_this_year_lu: attributes.min_temperature_san_jose_this_year_lu
- entity_min_attrib_atl: min_temperature_san_jose_atl
- entity_min_attrib_atl_lu: attributes.min_temperature_san_jose_atl_lu
- entity_max_base: sensor.max_temperature_san_jose_today
- entity_max_attrib_this_week: max_temperature_san_jose_this_week
- entity_max_attrib_this_week_lu: attributes.max_temperature_san_jose_this_week_lu
- entity_max_attrib_this_month: max_temperature_san_jose_this_month
- entity_max_attrib_this_month_lu: attributes.max_temperature_san_jose_this_month_lu
- entity_max_attrib_this_year: max_temperature_san_jose_this_year
- entity_max_attrib_this_year_lu: attributes.max_temperature_san_jose_this_year_lu
- entity_max_attrib_ath: max_temperature_san_jose_ath
- entity_max_attrib_ath_lu: attributes.max_temperature_san_jose_ath_lu
- type: markdown
content: |
---
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-top: -1.9em !important;
}
# House Temps
- type: custom:expander-card
title-card:
#type: custom:stack-in-card
#mode: horizontal
#cards:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 55% 45%
grid-template-rows: 1
grid-template-areas: |
"z01 z02"
cards:
- type: custom:mushroom-template-card
entity: sensor.ecobee_temperature
primary: House
secondary: "{{ states('sensor.ecobee_temperature') }}°F"
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.ecobee_temperature') }}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: none;
border: none !important;
height: 40px !important;
}
view_layout:
grid-area: z01
- type: custom:mushroom-template-card
entity: sensor.computed_office_temp
primary: Office
secondary: "{{ states('sensor.computed_office_temp') }}°F"
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.computed_office_temp') }}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: none;
border: none !important;
height: 40px !important;
}
# margin-top: -0.6em !important;
# width: fit-content;
# background: none;
# border: none !important;
# box-shadow: none !important;
view_layout:
grid-area: z02
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-template-rows: 3
grid-template-areas: |
"zone1 zone2"
"zone3 zone4"
"zone5 zone6"
"zone7 zone8"
"zone9 zone10"
"zone11 zone12"
"zone13 zone14"
"zone15 zone16"
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.weather_station_temperature
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.weather_station_temperature') }}
content: "Family Room {{ states('sensor.weather_station_temperature') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone1
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.ecobee_temperature
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.ecobee_temperature') }}
content: "Hallway {{ states('sensor.ecobee_temperature') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone3
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.garage_sidedoor_sensor_temperature
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.garage_sidedoor_sensor_temperature') }}
content: "Garage {{ states('sensor.garage_sidedoor_sensor_temperature') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone5
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.attic_sensor_temperature
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.attic_sensor_temperature') }}
content: "Attic {{ states('sensor.attic_sensor_temperature') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone7
- type: custom:mushroom-chips-card
chips:
- type: template
#entity: sensor.master_bedroom_temperature
#icon: mdi:thermometer
content: "Bedrooms:"
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
--chip-font-size: 12px;
margin-left: 1.0em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone9
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.master_bedroom_temperature
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.master_bedroom_temperature') }}
content: "Master {{ states('sensor.master_bedroom_temperature') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone11
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.sydneys_room_sensor_temperature
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.sydneys_room_sensor_temperature') }}
content: "Sydney {{ states('sensor.sydneys_room_sensor_temperature') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone13
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.carsons_room_sensor_temperature
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.carsons_room_sensor_temperature') }}
content: "Carson {{ states('sensor.carsons_room_sensor_temperature') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone15
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.computed_office_temp
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.computed_office_temp') }}
content: "Avg {{ states('sensor.computed_office_temp') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone2
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.gw1100b_indoor_temperature
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.gw1100b_indoor_temperature') }}
content: "Bookcase {{ states('sensor.gw1100b_indoor_temperature') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone4
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.office_couch_window_sensor_temperature
icon: mdi:thermometer
icon_color: |-
{% from 'weather.jinja' import icon_color_temp %}
{{ icon_color_temp('sensor.office_couch_window_sensor_temperature') }}
content: "Window {{ states('sensor.office_couch_window_sensor_temperature') }}°F"
tap_action:
action: more-info
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.3em !important;
margin-top: -0.3em !important;
margin-bottom: -0.2em !important;
}
view_layout:
grid-area: zone6
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-left: 0.6em !important;
}
card_mod:
style:
mushroom-state-info$: |
.: |
ha-card {
border: none !important;
box-shadow: none !important;
margin-top: -1.2em !important;
margin-bottom: -1.2em !important;
}