fribse
March 5, 2020, 10:43pm
1
So I created a nice little card for the corona virus sensor.@Gluwc can’t use the “confirmed” directly, I got a hint from him about @iantrich excellent config template card and together with @thomasloven auto-entities it works nicely.
The result looks like this:
The config looks like this:
type: 'custom:config-template-card'
variables:
- 'states[''sensor.worldwide_coronavirus_confirmed''].state'
- 'states[''sensor.denmark_coronavirus_confirmed''].state'
entities:
- sensor.worldwide_coronavirus_confirmed
- sensor.denmark_coronavirus_confirmed
card:
entities:
- cards:
- card:
card_style:
opacity: 0.7;
max: '${vars[0]}'
min: 0
padding: 2px
title_position: inside
type: 'custom:bar-card'
filter:
include:
- entity_id: '*worldwide_coronavirus*'
sort: entity_id
type: 'custom:auto-entities'
- card:
card_style:
opacity: 0.7;
max: '${vars[1]}'
min: 0
padding: 2px
title_position: inside
type: 'custom:bar-card'
width: 100%
filter:
include:
- entity_id: '*denmark_coronavirus*'
sort: entity_id
type: 'custom:auto-entities'
type: 'custom:hui-vertical-stack-card'
show_header_toggle: false
style: |
ha-card {
background-image: url('/local/images/corona.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
title: Corona
type: entities
So it’s a bit intricate.
4 Likes
I glommed your card and added a few bits for me. Mini-graph card and a couple of iframes.
Thanks
1 Like
fribse
March 8, 2020, 8:46pm
3
Good idea with the graph…
finity
March 9, 2020, 3:05am
4
Do you mind posting your code?
cjsimmons
March 9, 2020, 5:33am
5
Looks good guys. I’ve just done something similar.
Is there a way to have the coronavirus map centre in on a specific region or tab when it load up?
cards:
- aspect_ratio: 150%
type: iframe
url: >-
https://www.arcgis.com/apps/opsdashboard/index.html#/85320e2ea5424dfaaa75ae62e5c06e61
- card:
entities:
- cards:
- align_icon: right
align_state: right
entities:
- sensor.us_coronavirus_confirmed
font_size: 75
group: true
hours_to_show: 84
icon: 'mdi:bug-outline'
line_color: orange
line_width: 2
name: ' US'
show:
animate: true
extrema: false
fill: true
icon: false
labels: false
legend: false
name: false
points: true
state: true
state_adaptive_color: true
type: 'custom:mini-graph-card'
unit: US infected
style: |
ha-card {
background-image: url('/local/coronavirustrans.png');
background-size: cover;
'background-position: center;
background-repeat: no-repeat;
'background-color: #cccccc; /* Used if the image is unavailable */
'height: 100; /* You must set a specified height */
background-size: cover; /* Resize the background image to cover the entire container */
}
- card:
card_style:
opacity: 0.8;
max: '${vars[0]}'
min: 0
padding: 2px
title_position: inside
type: 'custom:bar-card'
filter:
include:
- entity_id: '*us_coronavirus*'
sort: entity_id
type: 'custom:auto-entities'
type: 'custom:hui-vertical-stack-card'
show_header_toggle: false
theme: darkcyan3
type: entities
entities:
- sensor.us_coronavirus_confirmed
type: 'custom:config-template-card'
- aspect_ratio: 70%
type: iframe
url: >-
https://www.cdc.gov/coronavirus/2019-ncov/cases-in-us.html#reporting-cases
icon: 'mdi:bug-outline'
path: cov19
title: Cov-19
You’ll also need card-mod for the background image to work.
2 Likes
darkcyan3:
# Main colors that can be changed
primary-color: "#00bcd4" # light blue 42%
disabled-text-color: "#2b2b2b" # light gray (me)
divider-color: "rgba(255, 255, 255, 0.12)"
paper-card-background-color: "#9e9e9e" # Lt gray (me)
paper-grey-200: "#191919" # very dark gray 10%
paper-item-icon-color: "#d3d3d3" # light gray 83%
paper-listbox-background-color: "#202020" # dark gray 13%
paper-listbox-color: "#FFFFFF" # white
primary-background-color: "#eeeeee" # dark gray 19%
primary-text-color: "#cfcfcf" # light gray 81%
secondary-background-color: "#eeeeee" # dark gray 17%
secondary-text-color: "#04a7bc" # blue 38%
sidebar-icon-color: "#4e4e4e" # light gray 80% (me)
light-primary-color: "#0066ff" # blue, profile button, slider on
#sidebar-background-color: "#0000ff" # medium blue (me), bottom half
# Colors based on variables, see above
label-badge-background-color: "var(--secondary-background-color)"
label-badge-text-color: "var(--text-primary-color)"
paper-card-header-color: "#var(--paper-item-icon-color)"
paper-grey-50: "var(--primary-text-color)"
paper-item-icon-active-color: "var(--primary-color)"
paper-item-icon_-_color: "var(--primary-text-color)"
paper-slider-active-color: "var(--primary-color)"
paper-slider-knob-color: "var(--primary-color)"
paper-slider-knob-start-color: "var(--primary-color)"
paper-slider-pin-color: "var(--primary-color)"
paper-slider-secondary-color: "var(--light-primary-color)"
paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
paper-toggle-button-checked-button-color: "var(--primary-color)"
paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
paper-toggle-button-unchecked-bar-color: "var(--primary-text-color)"
ha-card-border-radius: 20px
ha-card-background: "#505050"
2 Likes
radar
March 13, 2020, 2:15pm
8
Hi,
Since deaths+recovered+current=confirmed, maybe we can have a unique bar per country.
fribse
March 13, 2020, 6:10pm
9
You mean a stacked bar graph, right? The bar-card does not currently support it.
radar
March 13, 2020, 9:02pm
10
Exactly what I meant. Thanks.
roco17
March 17, 2020, 5:02am
11
Not much experience with adding cards. Where would I add that code? Into raw configuration or into another file and call it from raw? Thanks in advance, awesome card.
fribse
March 17, 2020, 5:01pm
12
Hi @roco17
I tweaked it a little as the CDC page didn’t add much and they rarely update my state. I will post it if wanted.
2 Likes
Wow! That’s looks like a desktop from “Pandemic”, and I guess now it is! Surreal! I really love the the clean lines/space/layout and color palette! I would not have predicted the combo would look so fresh, it pops! Kuddos! Please share
roussell
March 20, 2020, 2:22am
16
Hey another Bama HA user! Where did you find the state by county map?
Terry
Glad y’all (for authenticity) find it useful. Let me know if you need help getting it going. This is a copy of the whole tab from the raw config editor. Just paste 'er in.
Cards needed: mini-graph, bar-card, hui-vertical-stack-card, auto-entities, config-template-card, card-mod
Cheers.
- background: center / cover no-repeat url("/local/covid19-background.jpg") fixed
badges: []
cards:
- cards:
- entities:
- align_header: center
align_icon: left
align_state: right
bar_spacing: 2
entities:
- color: orange
entity: sensor.corona_virus_alabama_confirmed
name: confirmed
unit: "\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_Alabama infected"
- color: red
entity: sensor.corona_virus_alabama_deaths
name: deaths
unit: "\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_Alabama Deaths"
font_size: 75
font_size_header: 1
group: false
height: 100
hours_to_show: 84
icon: 'mdi:bug-outline'
icon_adaptive_color: true
labels_secondary: true
line_width: 2
name: ' Alabama'
name_adaptive_color: false
show:
animate: true
extrema: false
fill: true
graph: line
icon: false
labels: false
legend: true
name: false
points: true
state: true
state_adaptive_color: true
style: |
ha-card {
background: #202020;
background-image: url('/local/alabama-map.png');
background-position: 53% 50%;
background-repeat: no-repeat no-repeat;
background-size: 20%;
color: white;
font-family: Arial;
font-weight: 900;
border: 3px ridge #404040 ;
}
type: 'custom:mini-graph-card'
style: |
ha-card {
background: black;
font-weight: bolder;
color: white;
}
tap_action:
action: navigate
navigation_path: 'https://data.montgomeryadvertiser.com/coronavirus/'
type: entities
- aspect_ratio: 124%
theme: darkcyan3
type: iframe
url: >-
https://www.arcgis.com/apps/opsdashboard/index.html#/85320e2ea5424dfaaa75ae62e5c06e61
type: vertical-stack
- cards:
- card:
entities:
- cards:
- align_icon: right
align_state: right
bar_spacing: 2
entities:
- sensor.us_coronavirus_confirmed
font_size: 75
group: false
hours_to_show: 84
icon: 'mdi:bug-outline'
line_color: orange
line_width: 2
name: ' US'
show:
animate: true
extrema: false
fill: true
graph: line
icon: false
labels: false
legend: false
name: false
points: true
state: true
state_adaptive_color: false
style: |
ha-card {
background: #202020;
background-image: url('/local/coronavirustrans.png');
background-size: cover;
background-repeat: no-repeat;
font-family: Arial;
font-weight: 900;
color: white;
border: 3px ridge #404040;
}
type: 'custom:mini-graph-card'
unit: "\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_US infected"
- card:
align: null
card_style:
line-height: 33px
text-indent: 3px
color: '#008b8b'
max: '${vars[0]}'
min: 0
padding: 5px
title_position: inside
type: 'custom:bar-card'
unit_of_measurement: ''
filter:
include:
- entity_id: '*us_coronavirus*'
sort: entity_id
type: 'custom:auto-entities'
type: 'custom:hui-vertical-stack-card'
show_header_toggle: false
style: |
ha-card {
padding: 0px;
background: black;
font-weight: bold;
color: white;
}
theme: darkcyan3
type: entities
entities:
- sensor.us_coronavirus_confirmed
type: 'custom:config-template-card'
variables:
- 'states[''sensor.us_coronavirus_confirmed''].state'
- card:
entities:
- cards:
- align_icon: right
align_state: right
bar_spacing: 2
entities:
- sensor.worldwide_coronavirus_confirmed
font_size: 75
group: false
hours_to_show: 84
icon: 'mdi:bug-outline'
line_color: orange
line_width: 2
name: ' World'
show:
animate: true
extrema: false
fill: true
graph: line
icon: false
labels: false
legend: false
name: false
points: true
state: true
state_adaptive_color: false
style: |
ha-card {
background: #202020;
background-image: url('/local/coronavirustrans.png');
background-size: cover;
background-repeat: no-repeat;
font-family: Arial;
font-weight: 900;
color: white;
border: 3px ridge #404040;
}
type: 'custom:mini-graph-card'
unit: "\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_World infected"
- card:
align: null
card_style:
line-height: 33px
text-indent: 3px
color: '#008b8b'
max: '${vars[0]}'
min: 0
padding: 5px
title_position: inside
type: 'custom:bar-card'
unit_of_measurement: ''
filter:
include:
- entity_id: '*worldwide_coronavirus*'
sort: entity_id
style: |
ha-card {
line-height: 2.5;
background: #202020;
color: white;
}
type: 'custom:auto-entities'
type: 'custom:hui-vertical-stack-card'
show_header_toggle: false
style: |
ha-card {
padding: 0px;
background: black;
font-weight: bold;
color: white;
}
theme: darkcyan3
type: entities
entities:
- sensor.worldwide_coronavirus_confirmed
type: 'custom:config-template-card'
variables:
- 'states[''sensor.worldwide_coronavirus_confirmed''].state'
type: vertical-stack
icon: 'mdi:bug-outline'
panel: false
path: cov19
title: Cov-19
1 Like
fribse
March 20, 2020, 1:25pm
18
It doesn’t seem to scale the bar-graph correctly, just full bars, and I don’t see the variables defined anywhere in your code?
Oh, yeah. I stripped some stuff out troubleshooting an issue and forgot to re-add
