I am currently trying to get the custom_card_httpedo13_thermostat to work. The card functions but it is not showing the state and icon. Any suggestions as to what I could be doing wrong?
- type: 'custom:button-card'
template: custom_card_httpedo13_thermostat_with_buttons
variables:
entity: climate.garage_boven_thermostaat
name: Garage
Hi guys, quick info to the round. @stokkie90 has been working on making the UI HACS compatible for some time now and is making good progress.
Anyone who wants to track the current state of development can do so via his pull request: WIP: Hacs Support by stokkie90 · Pull Request #168 · UI-Lovelace-Minimalist/UI · GitHub
We also invite you to follow our discussion in the git repo or on our brand new Discord server.
But now to the real point. We need your help. We need a nice logo for the UI for HACS Brands and are looking forward to your suggestions,if any of you are graphically talented. 
Looks like you need quotes around the variable data e.g. entity: âclimate.garage_boven_thermostaatâ
And you might have a typo in the name staat vs stat
Hi, do you have included all files? The templates for the icon and name seem to be missing.
Check that the climate entity only has off and heat modes.
hi
I am looking for template and yaml code for camera. Can anyone help please?
Is anyone able to help me with my layout, pretty new to this so please bear with me.
My /config/lovelace-minimalist.yaml contains:
button_card_templates: !include_dir_merge_named minimalist-templates/
views:
- title: Minimalist
cards:
- type: 'custom:button-card'
template: card_title
name: Welcome Home!
label: 'Home Screen'
- type: custom:button-card
template: card_person
variables:
ulm_card_person_entity: person.terry
ulm_card_person_use_entity_picture: true
ulm_card_person_zone1: home
ulm_card_person_zone2: work
- type: custom:button-card
template: card_person
variables:
ulm_card_person_entity: person.amber
ulm_card_person_use_entity_picture: true
ulm_card_person_zone1: home
ulm_card_person_zone2: work
But this is not putting the 2 person entities next to each other as I would like them, instead it is putting the user âAmberâ into a new column.
Any ideas where I have gone wrong?
Thanks
Hi @terryharman
By default lovelace arranges your layout into a masonry layout. This is a dynamic layout where you donât know where your card will end up.
If you want to have more control over your cards, you an put them into a vertical, horizontal or a grid layout card.
If you want even more control over your cards you can use the lovelace layout card by @thomasloven for even more control. But this is more of an advanced feature.
Hope this helps.
Happy holidays 
please help me
What camera?
Iâve never worked with cameraâs in home assistant before 
Security Cameras
clemalex ( <â thank you 
) posted his camera solution here:
https://community.home-assistant.io/t/lovelace-ui-minimalist/322687/593
Maybe you can adjust it for your needs.
Thank you for help
Hello
I use the ui mode and I was wondering if anyone knew a way to use the !include?
I would like to add the popup templates but I dont want everything in one file.
However, everything that I have found says that the âincludeâ is only available in .yaml
Sharing⊠Created a custom card for minimalist to show a bar graph for commute time
This mod uses the bignumber-card, please install that from HACS before using this card.
You will need to have a travel time sensor created - e.g. Waze -
All variables are required:
ulm_card_commute_entity - Travel time sensor
ulm_card_commute_name - Name to display under the bar graph
These variables are in minutes
ulm_card_commute_normal - defines the normal commuting time, this time or less shows a green bar
ulm_card_commute_slow - commute times up to this this number will show yellow
ulm_card_commute_max - defines the maximum time. Anything between slow and max will show red.
Lovelace YAML example
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: card_commute
variables:
ulm_card_commute_entity: 'sensor.school_traveltime'
ulm_card_commute_name: "School"
ulm_card_commute_normal: 15
ulm_card_commute_slow: 20
ulm_card_commute_max: 120
- type: 'custom:button-card'
template: card_commute
variables:
ulm_card_commute_entity: 'sensor.ymca_traveltime'
ulm_card_commute_name: "YMCA"
ulm_card_commute_normal: 12
ulm_card_commute_slow: 20
ulm_card_commute_max: 120
minimalist-templates/custom_card_commute/custom_card_commute.yaml
### used card_graph as a template
card_commute:
variables:
ulm_card_commute_color: "var(--info-color)"
ulm_card_commute_name: "n/a"
triggers_update:
- "[[[ variables.ulm_card_commute_entity ]]]"
styles:
grid:
- grid-template-areas: '"item1 item2 item3"'
- grid-template-columns: 0.25fr 2fr 0fr
- grid-template-rows: 1fr
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 0px
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- commute_icon_only
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 12px
entity: '[[[ return variables.ulm_card_commute_entity ]]]'
item2:
card:
type: 'custom:bignumber-card'
entity: '[[[ return variables.ulm_card_commute_entity ]]]'
title: '[[[ return variables.ulm_card_commute_name ]]]'
scale: 12px
from: left
min: 0
max: '[[[ return variables.ulm_card_commute_max ]]]'
hideunit: true
severity:
- value: '[[[ return variables.ulm_card_commute_normal ]]]'
bnStyle: 'var(--label-badge-green)'
- value: '[[[ return variables.ulm_card_commute_slow ]]]'
bnStyle: 'var(--label-badge-yellow)'
- value: '[[[ return variables.ulm_card_commute_max ]]]'
bnStyle: 'var(--label-badge-red)'
item3:
card:
type: 'custom:button-card'
template:
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 12px
entity: '[[[ return variables.ulm_card_commute_entity ]]]'
commute_icon_only:
color: var(--google-grey)
show_icon: true
show_label: false
show_name: false
styles:
icon:
- color: 'rgba(var(--color-theme),0.9)'
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content
size: 20px
Kudos to tben for Minimalist (this is an awesome framework!) and the bignumber-card team!
On my dashboard this visible palette icon to change color is missing, I need to hold click, how can I change to this palette? Thanks
I also needed to clean some names on your code to work, here is the result for the next people:
list_items_light:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
light_with_colors:
tap_action:
action: toggle
hold_action:
action: more-info
label: |-
[[[ if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri + '%' : 'On') ;
}
}else{
return "Indisponible";
}
]]]
state:
- styles:
icon:
- filter: |-
[[[
var bri = entity.attributes.brightness / 2.55;
return ('brightness(' + (50+bri/2) + '%)') ;
]]]
- color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',1)'
}
else{
return 'rgba(var(--couleur-jaune),1)'
}
]]]
img_cell:
- background-color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.2)'
}
else{
return 'rgba(var(--couleur-jaune),0.2)'
}
]]]
value: 'on'
light_buttons_with_colors_light:
show_name: false
show_icon: false
variables:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: "[[[ return entity.entity_id ]]]"
radius: 12px
height: 42px
thumbColorOff: rgba(var(--couleur-theme),0.2)
mainSliderColorOff: rgb(var(--couleur-theme),0.2)
secondarySliderColorOff: var(--google-grey-500)
mainSliderColor: rgb(var(--couleur-gris-light))
thumbColor: rgb(var(--couleur-gris-light))
secondarySliderColor: var(--google-grey-500)
card_mod:
style: |
ha-card {
border-radius: 14px;
}
div {
border: 2px solid var(--google-grey-500);
border-radius: 14px !important;
box-sizing: border-box;
position: relative;
}
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: "[[[ return entity.entity_id ]]]"
template: widget_icon
light_buttons_with_colors:
show_name: false
show_icon: false
variables:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return entity.attributes.friendly_name ]]]"
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: "[[[ return entity.entity_id ]]]"
radius: 14px
height: 42px
mainSliderColorOff: var(--google-grey-500)
secondarySliderColor: rgba(var(--couleur-theme),0.05)
secondarySliderColorOff: rgba(var(--couleur-theme),0.05)
thumbColorOff: white
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: "[[[ return entity.entity_id ]]]"
template: widget_icon
You need to fix that using layout cards, you can use the standard horizontal layout card and put the header into one and the other cards to one. I prefer to use the custom:layout-card with grid layout for maximum control.
The new popup cards for lights are really awesome, thanks a bunch! Anyone knows if itâs possible to somehow only control lights that are on in a light group? I use the popup with light groups so Iâm looking into maybe adding a button on there for all the entities in that group to turn on/off them individually and only control the ones that are on with the popup card.
Sorry @Br3b, Iâm a little bit late. Here comes my code.
Note that I made one big hardcoded template, because we have also one big poop area for our kitties 
Card:
#### KATZENKLO
- type: custom:button-card
entity: binary_sensor.bewegungsmelder_katzenklo
variables:
count: counter.katzenklo_besuche
reset: input_boolean.katzenklo
template: katzenklo
Template:
katzenklo:
triggers_update: all
show_name: false
show_icon: false
show_state: false
show_label: false
styles:
card:
- border-radius: 5px
- padding: 10px 10px 0px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 10px
custom_fields:
item1:
card:
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: more-info
show_icon: true
show_name: true
show_state: false
show_label: true
size: 20px
icon: mdi:toilet
label: |
[[[
if (entity.state == 'on') return 'âŠwird gerade benutzt';
return ' '
]]]
state:
- value: 'on'
styles:
icon:
- color: rgba(255, 69, 0, 1)
img_cell:
- background-color: rgba(255, 69, 0, 0.2)
- border: none
name:
- color: rgba(255, 69, 0, 1)
state:
- color: rgba(255, 69, 0, 1)
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
img_cell:
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
- background: rgba(0, 0, 0, 0.06)
name:
- align-self: end
- justify-self: start
- font-weight: 500
- font-size: 13px
- margin-left: 12px
label:
- align-self: start
- justify-self: start
- text-align: left
- font-weight: 450
- font-size: 12px
- filter: opacity(70%)
- margin-left: 12px
item2:
card:
type: custom:button-card
styles:
card:
- box-shadow: none
- padding-bottom: 10px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- justify-items: center
- justify-content: space-between
custom_fields:
item1:
card:
type: custom:button-card
entity: '[[[ return variables.count ]]]'
tap_action:
action: more-info
show_state: false
show_name: false
show_icon: false
show_label: true
label: |
[[[
var c = states[variables.count].state;
return `<ha-icon icon="mdi:paper-roll-outline" style="width: 20px; height: 20px; color: var(--text-color-sensor);"></ha-icon>
<span style="font-weight: 450; color: var(--text-color-sensor)">Besuche: ${c}</span>`;
]]]
styles:
card:
- box-shadow: none
- padding: 0px
label:
- justify-self: start
- font-size: 11px
- '--text-color-sensor': |
[[[
var c = states[variables.count].state;
if (c == 2) return 'orange';
if (c >= 3) return 'red';
return 'var(--text-color-sensor)'
]]]
item2:
card:
type: custom:button-card
entity: '[[[ return variables.reset ]]]'
tap_action:
action: call-service
service: counter.reset
service_data:
entity_id: '[[[ return variables.count ]]]'
show_state: false
show_name: false
show_icon: false
show_label: true
label: |
[[[
var c = states[variables.count].state;
var status = 'Klo sÀubern!'
if (c > 0) { status = 'sÀubern!';}
if (c == 0) { status = 'gereinigt';}
return `<ha-icon icon="mdi:broom" style="width: 20px; height: 20px; color: var(--text-color-sensor);"></ha-icon>
<span style="color: var(--text-color-sensor)">${status}</span>`;
]]]
styles:
card:
- box-shadow: none
- padding: 0px
label:
- justify-self: start
- font-size: 11px
- '--text-color-sensor': |
[[[
var c = states[variables.count].state;
if (c == 0) return 'green';
if (c == 2) return 'orange';
if (c >= 3) return 'red';
return 'var(--primary-text-color)';
]]]
#### END ####
Helper:
input_boolean:
katzenklo:
name: Katzentoilette gereinigt
icon: mdi:broom
counter:
katzenklo_besuche:
name: Katzenklo-Besuche
icon: mdi:paper-roll-outline
initial: 0
restore: true
step: 1
minimum: 0
maximum: 24
Automation:
automation:
#### COUNTER VISITS
- id: katzenklo_besuche
alias: Katzenklo-Besuche
mode: single
trigger:
- platform: state
entity_id: binary_sensor.bewegungsmelder_katzenklo
to: 'on'
condition:
- condition: template
value_template: |
{{ as_timestamp(now()) - as_timestamp(states.automation.katzenklo_besuche.attributes.last_triggered) | int > 120 }}
action:
- service: counter.increment
target:
entity_id: counter.katzenklo_besuche
#### CAT TOILET USED; WARNINGS
- id: katzenklo_warnstufen
alias: 'benutztes Katzenklo Warnstufen'
mode: single
trigger:
- platform: state
entity_id: counter.katzenklo_besuche
condition:
- condition: state
entity_id: group.anwesend ## are servants at home?
state: 'on'
- condition: time
after: '07:00:00'
before: '22:00:00'
action:
- choose:
#### 1. WARNING
- conditions:
- condition: state
entity_id: counter.katzenklo_besuche
state: '2'
sequence:
- service: media_player.volume_set
target:
entity_id: media_player.echo_dotchen
data:
volume_level: 0.3
- service: notify.alexa_media_echo_dotchen
data:
message: Die Katzentoilette wurde benutzt.<break time="500ms"/>Bitte reinige sie.
data:
type: tts
method: speak
#### 2. WARNING
- conditions:
- condition: state
entity_id: counter.katzenklo_besuche
state: '4'
sequence:
- service: media_player.volume_set
target:
entity_id: media_player.echo_dotchen
data:
volume_level: 0.3
- service: notify.alexa_media_echo_dotchen
data:
message: |
<amazon:emotion name="disappointed" intensity="medium">Ich darf daran erinnern, die Katzentoilette zu reinigen.</amazon:emotion>
data:
type: tts
method: speak
#### 3. WARNING
- conditions:
- condition: state
entity_id: counter.katzenklo_besuche
state: '7'
sequence:
- service: media_player.volume_set
target:
entity_id: media_player.echo_dotchen
data:
volume_level: 0.3
- service: notify.alexa_media_echo_dotchen
data:
message: |
<amazon:emotion name="disappointed" intensity="high">Ich sag nur Katzentoilette.<break time="500ms"/>Aber auf mich hört ja sowieso keiner.</amazon:emotion>
data:
type: tts
method: speak
#### INFO
- id: katzenklo_besuche_info
alias: Katzenklo-Besuche Info
mode: single
trigger:
- platform: state
entity_id: counter.katzenklo_besuche
action:
- choose:
#### 3 visits
- conditions:
- condition: state
entity_id: counter.katzenklo_besuche
state: '6'
sequence:
- service: notify.alexa_media_this_device
data:
message: Katzentoilette zum 3. Mal benutzt
data:
type: push
#### more than 3 visits
- conditions:
- condition: numeric_state
entity_id: counter.katzenklo_besuche
above: '6'
sequence:
- service: notify.alexa_media_this_device
data:
message: Katzentoilette muss gereinigt werden!
data:
type: push
#### RESET COUNTER
- id: katzenklo_besuche_zuruecksetzen
alias: ZĂ€hler Katzenklo-Besuche zurĂŒcksetzen
mode: single
trigger:
- platform: state
entity_id: input_boolean.katzenklo
to:
- 'on'
- 'off'
action:
- service: counter.reset
target:
entity_id: counter.katzenklo_besuche
#### END ####
Hi and happy new year!
Thank you for your answer, but how would I go about doing that? When I look at the yaml code of the card it is referencing to âicon_infoâ and âlist_3_itemsâ. These templates are present in the button_card_templates.yaml file. I tried to copy these specific templates to the custom_card_httpedo13_thermostat.yaml file to see if that would make a difference, but without luck. The rest of the card is functioning properly though, so there must be something obvious Iâm missing.
This is the code of my thermostat:
- platform: generic_thermostat
name: Garage Boven Thermostaat
heater: switch.garage_boven_thermostaat_switch
target_sensor: sensor.garage_temperatuur
min_temp: 15
max_temp: 25
ac_mode: false
target_temp: 20
cold_tolerance: 0.3
hot_tolerance: 0
initial_hvac_mode: "heat"
precision: 0.1
Hey @flave, Iâm using the new sidebar feature:
title: Homezone
path: panel-diele
type: sidebar
cards:
#### SIDEBAR
- !include sidebar.yaml
It is not ideal, but ok for my needs.
sidebar.yaml:
#### SIDEBAR
type: grid
columns: 1
square: false
cards:
- !include uhr_sidebar.yaml
- !include wetter_sidebar.yaml
#### SIDEBAR - NAVIGATION
- type: custom:button-card
entity: group.diele
template: panel_navigation_sidebar
- type: custom:button-card
entity: group.schlafzimmer
template: panel_navigation_sidebar
- type: custom:button-card
entity: group.kueche
template: panel_navigation_sidebar
- type: custom:button-card
entity: group.wohnzimmer
template: panel_navigation_sidebar
view_layout: ## IMPORTANT!
position: sidebar
#### END ####
uhr_sidebar.yaml / clock - date - sun - lux:
type: custom:button-card
entity: sensor.time
triggers_update: all
show_icon: false
show_name: true
show_state: true
show_label: true
tap_action:
action: more-info
name: "[[[ return entity.state ]]]"
state_display: |
[[[
var tag = states['sensor.datumsanzeige'].state; ## sensor date
var kw = states['sensor.aktuelle_kalenderwoche'].state; ## sensor calendar week
return tag + '<br>(Kalenderwoche ' + kw + ')'
]]]
label: |
[[[
var s = states['sun.sun'].state
var auf = states['sensor.sonnenaufgang'].state; ## sensor sunrise
var unter = states['sensor.sonnenuntergang'].state; ## sensor sunset
var lux = states['sensor.lux'].state;
if (s == 'below_horizon')
return 'Die Sonne geht um ' + auf + ' auf.';
return 'Die Sonne geht um ' + unter + ' unter.<br> LichtintensitÀt: ' + lux + ' lx'
]]]
styles:
card:
- margin-left: 40px
- width: 25vw
- padding: 0
- border-radius: 0%
- box-shadow: none
- color: var(--primary-text-color)
- font-size: 13px
grid:
- grid-template-areas: '"n" "s" "l"'
- grid-template-columns: max-content
- justify-content: center
name:
- font-family: Arial Rounded MT Bold
- font-size: 42px
label:
- padding: 13px 0px
- white-space: pre-line
#### END ####
wetter_sidebar.yaml / weather:
type: custom:button-card
triggers_update: all
tap_action:
action: navigate
navigation_path: /homezone-yaml/wetter
styles:
card:
- margin-left: 40px
- width: 25vw
- padding: 0
- border-radius: 0%
- box-shadow: none
- color: var(--primary-text-color)
- font-size: 13px
grid:
- grid-template-areas: '"wetter"'
- grid-template-columns: max-content
- grid-template-rows: 1fr 1fr
- justify-content: center
custom_fields:
wetter:
- align-self: start
- justify-self: center
- text-align: left
- '--text-color-sensor': |
[[[
var entity = states['sensor.openweathermap_condition'].state;
if (entity == 'sunny') return 'yellow';
if (entity == 'windy') return 'skyblue';
if (entity == 'windy-variant') return 'skyblue';
if (entity == 'clear-night') return '#FFFFE0';
if (entity == 'partlycloudy') return 'lightgrey';
if (entity == 'cloudy') return 'lightgrey';
if (entity == 'overcast') return 'lightgrey';
if (entity == 'fog') return 'ivory';
if (entity == 'hail') return 'silver';
if (entity == 'lightning') return '#f4f3ef';
if (entity == 'lightning-rainy') return '#f4f3ef';
if (entity == 'rainy') return '#00d1d2';
if (entity == 'pouring') return '#00d1d2';
if (entity == 'snowy-rainy') return 'grey';
if (entity == 'snowy') return 'white';
else return 'teal';
]]]
custom_fields:
wetter: |
[[[
var i = states['sensor.openweathermap_condition'].state;
var mdi = 'mdi:white-balance-sunny';
if (i == 'sunny') { mdi = 'mdi:white-balance-sunny'; }
else if (i == 'windy') { mdi = 'mdi:weather-windy'; }
else if (i == 'windy-variant') { mdi = 'mdi:weather-windy-variant'; }
else if (i == 'clear-night') { mdi = 'mdi:weather-night'; }
else if (i == 'partlycloudy') { mdi = 'mdi:weather-partly-cloudy'; }
else if (i == 'cloudy') { mdi = 'mdi:weather-cloudy'; }
else if (i == 'overcast') { mdi = 'mdi:weather-cloudy-arrow-right'; }
else if (i == 'fog') { mdi = 'mdi:weather-fog'; }
else if (i == 'hail') { mdi = 'mdi:weather-hail'; }
else if (i == 'lightning') { mdi = 'mdi:weather-lightning'; }
else if (i == 'lightning-rainy') { mdi = 'mdi:weather-lightning-rainy'; }
else if (i == 'pouring') { mdi = 'mdi:weather-pouring'; }
else if (i == 'rainy') { mdi = 'mdi:weather-rainy'; }
else if (i == 'snowy-rainy') { mdi = 'mdi:weather-snowy-rainy'; }
else if (i == 'snowy') { mdi = 'mdi:weather-snowy'; }
else if (i == 'fog') { mdi = 'mdi:weather-fog'; }
var w = 'sunny';
if (i == 'sunny') { w = 'Sonnig'; }
else if (i == 'clear-night') { w = 'Klare Nacht'; }
else if (i == 'windy') { w = 'Windig'; }
else if (i == 'windy-variant') { w = '?'; }
else if (i == 'partlycloudy') { w = 'Tw. bewölkt'; }
else if (i == 'cloudy') { w = 'Bewölkt'; }
else if (i == 'overcast') { w = 'Bedeckt'; }
else if (i == 'fog') { w = 'Neblig'; }
else if (i == 'hail') { w = 'Hagel'; }
else if (i == 'lightning') { w = 'Gewittrig'; }
else if (i == 'lightning-rainy') { w = '?'; }
else if (i == 'rainy') { w = 'Regnerisch'; }
else if (i == 'pouring') { w = 'Starkregen'; }
else if (i == 'snowy') { w = 'Schnee'; }
else if (i == 'snowy-rainy') { w = 'Schneeregen'; }
else if (i == 'fog') { w = 'Nebel'; }
var temp = Math.round(states['sensor.openweathermap_temperature'].state * 10) / 10 ;
var nied = states['sensor.openweathermap_forecast_precipitation_probability'].state;
var feuchte = states['sensor.openweathermap_humidity'].state;
return `<ha-icon
icon='${mdi}'
style='width: 20px; height: 20px; color: var(--text-color-sensor);'>
</ha-icon>
<span style='vertical-align: -1px;'>${w} bei ${temp}°<br>Niederschlagswahrsch.: ${nied}%<br>Luftfeuchte: ${feuchte}%</span>`
]]]
#### END ####