This template and theme is inspired by rounded by LE0N.
You need some custom cards. The best way to install them is using HACS.
- Put the template directory anywhere in you config directory, e.g. /config/ui/templates
├── config
| ├── ui
| | ├── templates
- open your ui-lovelace.yaml and add the following line at the top:
button_card_templates: !include_dir_merge_named "ui/templates"
You can find language files here:
├── templates
| ├── base
| | ├── languages
If you want to add a new one, just duplicate an existing language file and rename it. Open it and change the name on top, e.G. de-DE Edit the state values for your needs. When you're ready open the state_engine.yaml and replace the language template with yours:
state_engine:
template:
- de-de # replace it with the name of your language file
You can add more translations to your language file. Be sure to add the variables to the language dictionary in your state_engine.yaml:
var lang = {
"on": variables.lang_on,
"off": variables.lang_off,
"not_home": variables.lang_not_home,
"home": variables.lang_home,
"paused": variables.lang_paused,
"playing": variables.lang_playing,
"stopped": variables.lang_stopped,
"heat": variables.lang_heat,
"night": variables.lang_armed_night,
"armed_custom_bypass": variables.lang_armed_custom_bypass,
"arming": variables.lang_arming,
"armed_away": variables.lang_armed_away,
"disarmed": variables.lang_disarmed
};
- Download the theme and put it in your config directory:
├── config
| ├── themes
| | ├── rounded
| | | ├── rounded.yaml
- go to developer tools > services and call
service: frontend.reload_themes
- You can set it to default by calling:
service: frontend.set_theme
data:
name: Rounded
- Go to your profile settings and select the theme rounded if you're not using the default theme.
type: 'custom:button-card'
entity: alarm_control_panel.alarmo
template: alarm
name: Hausalarm
type: 'custom:button-card'
template: base
entity: some.entity
type: 'custom:button-card'
entity: calendar.familie
template: calendar
type: 'custom:button-card'
template: caption
show_label: false
name: Wohnzimmer
type: sensor
entity: sensor.schlafzimmer_luftfeuchtigkeit
name: Luftfeuchtigkeit
hours_to_show: 24
detail: 1
graph: line
icon: none
card_mod:
class: graph
style: |
ha-card {
--graph-color: var(--blue);
--graph-background-color: var(--blue-tint);
}
type: custom:mini-graph-card
card_mod:
style: |
ha-card {
background-color: var(--orange-tint) !important;
}
ha-card .graph {
background: transparent !important;
}
line_color: "var(--orange)"
show:
icon: false
name: false
state: true
legend: false
fill: true
labels: false
points: false
graph: line
entities:
- sensor.wohnzimmer_temperatur
type: 'custom:button-card'
template: input_number
entity: input_number.erdgeschoss_wohlfuehltemperatur
type: 'custom:button-card'
template: button_light
entity: light.kueche_deckenlicht
type: 'custom:button-card'
template: button_light_slider
entity: light.kueche_deckenlicht
type: custom:button-card
template: media_player
entity: media_player.fernseher
variables:
max_height: true #see modifiers for more info
type: 'custom:button-card'
template: person
entity: person.hans
type: custom:apexcharts-card
chart_type: radialBar
style: |
ha-card {
border-radius: "var(--border-radius)";
box-shadow: none;
padding-bottom: 0px;
padding-top: 0px;
background-color: transparent;
}
header:
show: false
apex_config:
title:
floating: false
align: top
style:
fontSize: 2px
fontWeight: bold
chart:
fontFamily: Poppins
foreColor: rgb(148,148,148)
offsetY: 5
legend:
show: false
series:
- entity: sensor.disk_use_percent
name: SSD
color: var(--green)
- entity: sensor.processor_use
name: CPU
color: var(--red)
- entity: sensor.memory_use_percent
name: RAM
color: var(--orange)
type: 'custom:button-card'
template: room
variables:
icon: mdi:sofa-single
# entity_1_icon: mdi:thermometer
entity_1_value: "[[[ return states['sensor.wohnzimmer_temperatur'].state+'°C ' + states['sensor.wohnzimmer_luftfeuchtigkeit'].state + '%'; ]]]"
entity_1_on: true
entity_2_icon: mdi:lightbulb
entity_2_on: "[[[ return states['light.wohnzimmer_kuechenlichter'].state == 'on'; ]]]"
entity_3_icon: mdi:thermostat
entity_3_on: "[[[ return states['climate.wohnzimmer_thermostat'].state == 'heat'; ]]]"
entity_4_icon: mdi:speaker
entity_4_on: "[[[ return states['media_player.fernseher'].state != 'off' || states['media_player.nestmini_kueche'].state == 'playing'; ]]]"
type: 'custom:button-card'
template: scene
variables:
color: orange
scene: scene.muggelmodus
type: 'custom:button-card'
name: Terasseneingang
template: button_script
entity: script.reiner_reinigung_terasseneingang
type: 'custom:button-card'
name: Terasseneingang
template: sensor
entity: sensor.test
type: 'custom:button-card'
template: title_card
name: Erdgeschoss
label: Lichter & Geräte # optional
type: 'custom:button-card'
template: title_card_badge
name: Esszimmer
entity: sensor.esszimmer_temperatur
variables:
badge_name: "[[[ return states['sensor.esszimmer_temperatur'].state + ' °C'; ]]]"
badge_label: "[[[ return states['sensor.esszimmer_luftfeuchtigkeit'].state + '%'; ]]]"
type: 'custom:button-card'
template: pill
show_icon: true
icon: mdi:sofa-single
entity: sensor.wohnzimmer_temperatur
name: "[[[ return states['sensor.wohnzimmer_temperatur'].state + ' °C'; ]]]" # If you don't define the name and label, the state of the entity including its unit will be shown.
label: "[[[ return states['sensor.wohnzimmer_luftfeuchtigkeit'].state + '%'; ]]]"
type: 'custom:button-card'
template: weather_pill
entity: weather.dwd_weather_schwerin
Here are some variables to modify the shown values:
variables:
round: 2 # round state value if it's numeric
multiplier: 1 # multiply state if it's numeric
show_last_changed: false # show last_changes instead of state
force_date: false # activate this if the state is a date but treat it like a string
show_unit: false # show / hide unit
max_height: false # maximize height if needed
on_state: heat # define a state, except 'on' which enables the activation color of your card
active_color: #if your entity is 'on' or the state matches the on_state this background color will be set
You can add additional info to any card except pills, captions and titles:
You can define an extra entity using a variable:
variables:
extra_entity: sensor.your_entity
... or overwrite the custom field:
type: 'custom:button-card'
name: Name
template: base
entity: sensor.test
custom_fields:
es: Extra Information #here you can add extra information. It will be displayed in the upper right corner
If you want some color for your cards, add the background color template. You can define a background color variable in order to set a color. Leave it for a random color.
type: 'custom:button-card'
name: Name
template:
- sensor
- background_color
variables:
background_color: red # Delete this for a random color
entity: sensor.test
type: horizontal-stack
cards:
- type: 'custom:button-card' # put this at the start and end to center the cards between
color_type: blank-card
- type: 'custom:button-card'
template:
- pill
- background_color
variables:
background_color: green
icon: mdi:harddisk
show_icon: true
entity: sensor.disk_use_percent
label: "%"
- type: 'custom:button-card'
color_type: blank-card