diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 000000000..e69de29bb diff --git a/404.html b/404.html new file mode 100644 index 000000000..caf0576fa --- /dev/null +++ b/404.html @@ -0,0 +1,3603 @@ + + + + + + + + + + + + + + + + + + + UI Lovelace Minimalist + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +
+ + + + +
+ + +
+ +
+ + + + + + + + + +
+
+ + + +
+
+
+ + + + + + + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+ +

404 - Not found

+ +
+
+ + + + + +
+ + + +
+ + + + + + +
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/assets/images/favicon.png b/assets/images/favicon.png new file mode 100644 index 000000000..1cf13b9f9 Binary files /dev/null and b/assets/images/favicon.png differ diff --git a/assets/img/Heat_pump.PNG b/assets/img/Heat_pump.PNG new file mode 100644 index 000000000..72395f644 Binary files /dev/null and b/assets/img/Heat_pump.PNG differ diff --git a/assets/img/actions.png b/assets/img/actions.png new file mode 100644 index 000000000..c972e8d6c Binary files /dev/null and b/assets/img/actions.png differ diff --git a/assets/img/anatomy.png b/assets/img/anatomy.png new file mode 100644 index 000000000..dc3e9224e Binary files /dev/null and b/assets/img/anatomy.png differ diff --git a/assets/img/car.png b/assets/img/car.png new file mode 100644 index 000000000..70ea5f13d Binary files /dev/null and b/assets/img/car.png differ diff --git a/assets/img/card_input_datetime.png b/assets/img/card_input_datetime.png new file mode 100644 index 000000000..2285e998e Binary files /dev/null and b/assets/img/card_input_datetime.png differ diff --git a/assets/img/card_input_number.png b/assets/img/card_input_number.png new file mode 100644 index 000000000..e10bafab8 Binary files /dev/null and b/assets/img/card_input_number.png differ diff --git a/assets/img/card_scenes.png b/assets/img/card_scenes.png new file mode 100644 index 000000000..dbfd9031a Binary files /dev/null and b/assets/img/card_scenes.png differ diff --git a/assets/img/cards.png b/assets/img/cards.png new file mode 100644 index 000000000..ffab9df0c Binary files /dev/null and b/assets/img/cards.png differ diff --git a/assets/img/chip_icon.png b/assets/img/chip_icon.png new file mode 100644 index 000000000..94e3befe8 Binary files /dev/null and b/assets/img/chip_icon.png differ diff --git a/assets/img/chips.png b/assets/img/chips.png new file mode 100644 index 000000000..669500a45 Binary files /dev/null and b/assets/img/chips.png differ diff --git a/assets/img/chromecast.png b/assets/img/chromecast.png new file mode 100644 index 000000000..1b4f7143f Binary files /dev/null and b/assets/img/chromecast.png differ diff --git a/assets/img/custom_card_apexcharts_donut.png b/assets/img/custom_card_apexcharts_donut.png new file mode 100644 index 000000000..edfccd413 Binary files /dev/null and b/assets/img/custom_card_apexcharts_donut.png differ diff --git a/assets/img/custom_card_apexcharts_line.png b/assets/img/custom_card_apexcharts_line.png new file mode 100644 index 000000000..ddcf0c87e Binary files /dev/null and b/assets/img/custom_card_apexcharts_line.png differ diff --git a/assets/img/custom_card_apexcharts_radialBar.png b/assets/img/custom_card_apexcharts_radialBar.png new file mode 100644 index 000000000..c47eb664b Binary files /dev/null and b/assets/img/custom_card_apexcharts_radialBar.png differ diff --git a/assets/img/custom_card_device_tracker.png b/assets/img/custom_card_device_tracker.png new file mode 100644 index 000000000..8ca8503b1 Binary files /dev/null and b/assets/img/custom_card_device_tracker.png differ diff --git a/assets/img/custom_card_drealine_roomview_1.png b/assets/img/custom_card_drealine_roomview_1.png new file mode 100644 index 000000000..234161589 Binary files /dev/null and b/assets/img/custom_card_drealine_roomview_1.png differ diff --git a/assets/img/custom_card_eraycetinay_elapsed_time.png b/assets/img/custom_card_eraycetinay_elapsed_time.png new file mode 100644 index 000000000..d9695b9a1 Binary files /dev/null and b/assets/img/custom_card_eraycetinay_elapsed_time.png differ diff --git a/assets/img/custom_card_eraycetinay_lock.png b/assets/img/custom_card_eraycetinay_lock.png new file mode 100644 index 000000000..9f03fbe71 Binary files /dev/null and b/assets/img/custom_card_eraycetinay_lock.png differ diff --git a/assets/img/custom_card_esh_room_dark.png b/assets/img/custom_card_esh_room_dark.png new file mode 100644 index 000000000..a6066c020 Binary files /dev/null and b/assets/img/custom_card_esh_room_dark.png differ diff --git a/assets/img/custom_card_esh_room_light.png b/assets/img/custom_card_esh_room_light.png new file mode 100644 index 000000000..fa110dfe5 Binary files /dev/null and b/assets/img/custom_card_esh_room_light.png differ diff --git a/assets/img/custom_card_esh_welcome_dark.png b/assets/img/custom_card_esh_welcome_dark.png new file mode 100644 index 000000000..410a392c8 Binary files /dev/null and b/assets/img/custom_card_esh_welcome_dark.png differ diff --git a/assets/img/custom_card_esh_welcome_light.png b/assets/img/custom_card_esh_welcome_light.png new file mode 100644 index 000000000..221088552 Binary files /dev/null and b/assets/img/custom_card_esh_welcome_light.png differ diff --git a/assets/img/custom_card_group_counter_chip_dark.png b/assets/img/custom_card_group_counter_chip_dark.png new file mode 100644 index 000000000..e652c0561 Binary files /dev/null and b/assets/img/custom_card_group_counter_chip_dark.png differ diff --git a/assets/img/custom_card_group_counter_chip_light.png b/assets/img/custom_card_group_counter_chip_light.png new file mode 100644 index 000000000..f894602b5 Binary files /dev/null and b/assets/img/custom_card_group_counter_chip_light.png differ diff --git a/assets/img/custom_card_haven_washer_off.png b/assets/img/custom_card_haven_washer_off.png new file mode 100644 index 000000000..9e051893e Binary files /dev/null and b/assets/img/custom_card_haven_washer_off.png differ diff --git a/assets/img/custom_card_haven_washer_ready.png b/assets/img/custom_card_haven_washer_ready.png new file mode 100644 index 000000000..2c399709e Binary files /dev/null and b/assets/img/custom_card_haven_washer_ready.png differ diff --git a/assets/img/custom_card_haven_washer_remote_control.png b/assets/img/custom_card_haven_washer_remote_control.png new file mode 100644 index 000000000..71979e64e Binary files /dev/null and b/assets/img/custom_card_haven_washer_remote_control.png differ diff --git a/assets/img/custom_card_haven_washer_running.png b/assets/img/custom_card_haven_washer_running.png new file mode 100644 index 000000000..eb98e8d43 Binary files /dev/null and b/assets/img/custom_card_haven_washer_running.png differ diff --git a/assets/img/custom_card_haven_washer_timer.png b/assets/img/custom_card_haven_washer_timer.png new file mode 100644 index 000000000..442e8e627 Binary files /dev/null and b/assets/img/custom_card_haven_washer_timer.png differ diff --git a/assets/img/custom_card_iAbadia_battery_chip.png b/assets/img/custom_card_iAbadia_battery_chip.png new file mode 100644 index 000000000..89a9a910d Binary files /dev/null and b/assets/img/custom_card_iAbadia_battery_chip.png differ diff --git a/assets/img/custom_card_imswel_medias/medias_library_plex.png b/assets/img/custom_card_imswel_medias/medias_library_plex.png new file mode 100644 index 000000000..d8bc10a81 Binary files /dev/null and b/assets/img/custom_card_imswel_medias/medias_library_plex.png differ diff --git a/assets/img/custom_card_imswel_medias/medias_upcoming_radarr.png b/assets/img/custom_card_imswel_medias/medias_upcoming_radarr.png new file mode 100644 index 000000000..9a9195dc4 Binary files /dev/null and b/assets/img/custom_card_imswel_medias/medias_upcoming_radarr.png differ diff --git a/assets/img/custom_card_imswel_medias/medias_upcoming_sonarr.png b/assets/img/custom_card_imswel_medias/medias_upcoming_sonarr.png new file mode 100644 index 000000000..ad3cdf8af Binary files /dev/null and b/assets/img/custom_card_imswel_medias/medias_upcoming_sonarr.png differ diff --git a/assets/img/custom_card_imswel_person.gif b/assets/img/custom_card_imswel_person.gif new file mode 100644 index 000000000..c68759b7c Binary files /dev/null and b/assets/img/custom_card_imswel_person.gif differ diff --git a/assets/img/custom_card_nas.png b/assets/img/custom_card_nas.png new file mode 100644 index 000000000..8e5cc3ad4 Binary files /dev/null and b/assets/img/custom_card_nas.png differ diff --git a/assets/img/custom_card_neekster_update.png b/assets/img/custom_card_neekster_update.png new file mode 100644 index 000000000..dc0956572 Binary files /dev/null and b/assets/img/custom_card_neekster_update.png differ diff --git a/assets/img/custom_card_nik_clock.png b/assets/img/custom_card_nik_clock.png new file mode 100644 index 000000000..47634ef27 Binary files /dev/null and b/assets/img/custom_card_nik_clock.png differ diff --git a/assets/img/custom_card_nik_door.png b/assets/img/custom_card_nik_door.png new file mode 100644 index 000000000..0c36e8910 Binary files /dev/null and b/assets/img/custom_card_nik_door.png differ diff --git a/assets/img/custom_card_nik_nas_off.png b/assets/img/custom_card_nik_nas_off.png new file mode 100644 index 000000000..7e4399d33 Binary files /dev/null and b/assets/img/custom_card_nik_nas_off.png differ diff --git a/assets/img/custom_card_nik_nas_on.png b/assets/img/custom_card_nik_nas_on.png new file mode 100644 index 000000000..d79d9714c Binary files /dev/null and b/assets/img/custom_card_nik_nas_on.png differ diff --git a/assets/img/custom_card_nik_tablet_1.png b/assets/img/custom_card_nik_tablet_1.png new file mode 100644 index 000000000..c23847858 Binary files /dev/null and b/assets/img/custom_card_nik_tablet_1.png differ diff --git a/assets/img/custom_card_nik_tablet_2.png b/assets/img/custom_card_nik_tablet_2.png new file mode 100644 index 000000000..2550b4fd9 Binary files /dev/null and b/assets/img/custom_card_nik_tablet_2.png differ diff --git a/assets/img/custom_card_person_info.png b/assets/img/custom_card_person_info.png new file mode 100644 index 000000000..532556875 Binary files /dev/null and b/assets/img/custom_card_person_info.png differ diff --git a/assets/img/custom_card_person_info2.png b/assets/img/custom_card_person_info2.png new file mode 100644 index 000000000..07114c587 Binary files /dev/null and b/assets/img/custom_card_person_info2.png differ diff --git a/assets/img/custom_card_person_info_small_dark.png b/assets/img/custom_card_person_info_small_dark.png new file mode 100644 index 000000000..36ec3c6a9 Binary files /dev/null and b/assets/img/custom_card_person_info_small_dark.png differ diff --git a/assets/img/custom_card_person_info_small_light.png b/assets/img/custom_card_person_info_small_light.png new file mode 100644 index 000000000..aeabb5fc1 Binary files /dev/null and b/assets/img/custom_card_person_info_small_light.png differ diff --git a/assets/img/custom_card_ristou_person/custom_card_ristou_person_camera.png b/assets/img/custom_card_ristou_person/custom_card_ristou_person_camera.png new file mode 100644 index 000000000..c73ebf90b Binary files /dev/null and b/assets/img/custom_card_ristou_person/custom_card_ristou_person_camera.png differ diff --git a/assets/img/custom_card_ristou_person/custom_card_ristou_person_dark.png b/assets/img/custom_card_ristou_person/custom_card_ristou_person_dark.png new file mode 100644 index 000000000..6e44400ea Binary files /dev/null and b/assets/img/custom_card_ristou_person/custom_card_ristou_person_dark.png differ diff --git a/assets/img/custom_card_ristou_person/custom_card_ristou_person_face_icon_badge.png b/assets/img/custom_card_ristou_person/custom_card_ristou_person_face_icon_badge.png new file mode 100644 index 000000000..f63138509 Binary files /dev/null and b/assets/img/custom_card_ristou_person/custom_card_ristou_person_face_icon_badge.png differ diff --git a/assets/img/custom_card_ristou_person/custom_card_ristou_person_icon_only.png b/assets/img/custom_card_ristou_person/custom_card_ristou_person_icon_only.png new file mode 100644 index 000000000..b1901c9dc Binary files /dev/null and b/assets/img/custom_card_ristou_person/custom_card_ristou_person_icon_only.png differ diff --git a/assets/img/custom_card_ristou_person/custom_card_ristou_person_light.png b/assets/img/custom_card_ristou_person/custom_card_ristou_person_light.png new file mode 100644 index 000000000..194147b48 Binary files /dev/null and b/assets/img/custom_card_ristou_person/custom_card_ristou_person_light.png differ diff --git a/assets/img/custom_card_ristou_person/custom_card_ristou_person_map.png b/assets/img/custom_card_ristou_person/custom_card_ristou_person_map.png new file mode 100644 index 000000000..39a17349b Binary files /dev/null and b/assets/img/custom_card_ristou_person/custom_card_ristou_person_map.png differ diff --git a/assets/img/custom_card_ristou_person/custom_card_ristou_person_no_map.png b/assets/img/custom_card_ristou_person/custom_card_ristou_person_no_map.png new file mode 100644 index 000000000..0e8bb3c7e Binary files /dev/null and b/assets/img/custom_card_ristou_person/custom_card_ristou_person_no_map.png differ diff --git a/assets/img/custom_card_ristou_person/custom_card_ristou_person_picture_badge.png b/assets/img/custom_card_ristou_person/custom_card_ristou_person_picture_badge.png new file mode 100644 index 000000000..6a09451ee Binary files /dev/null and b/assets/img/custom_card_ristou_person/custom_card_ristou_person_picture_badge.png differ diff --git a/assets/img/custom_card_sisimomo_printer.png b/assets/img/custom_card_sisimomo_printer.png new file mode 100644 index 000000000..f8e8c0119 Binary files /dev/null and b/assets/img/custom_card_sisimomo_printer.png differ diff --git a/assets/img/custom_card_wsly_pollen_dark.png b/assets/img/custom_card_wsly_pollen_dark.png new file mode 100644 index 000000000..a61705b17 Binary files /dev/null and b/assets/img/custom_card_wsly_pollen_dark.png differ diff --git a/assets/img/custom_card_wsly_pollen_light.png b/assets/img/custom_card_wsly_pollen_light.png new file mode 100644 index 000000000..57058ab1d Binary files /dev/null and b/assets/img/custom_card_wsly_pollen_light.png differ diff --git a/assets/img/custom_chip_tesla_temperature.png b/assets/img/custom_chip_tesla_temperature.png new file mode 100644 index 000000000..7dd0f97c4 Binary files /dev/null and b/assets/img/custom_chip_tesla_temperature.png differ diff --git a/assets/img/custom_chip_vlape_garage/custom_chip_vlape_garage_dark.png b/assets/img/custom_chip_vlape_garage/custom_chip_vlape_garage_dark.png new file mode 100644 index 000000000..fa23652c8 Binary files /dev/null and b/assets/img/custom_chip_vlape_garage/custom_chip_vlape_garage_dark.png differ diff --git a/assets/img/custom_chip_vlape_garage/custom_chip_vlape_garage_light.png b/assets/img/custom_chip_vlape_garage/custom_chip_vlape_garage_light.png new file mode 100644 index 000000000..c24ab0176 Binary files /dev/null and b/assets/img/custom_chip_vlape_garage/custom_chip_vlape_garage_light.png differ diff --git a/assets/img/custom_device_tracer.jpg b/assets/img/custom_device_tracer.jpg new file mode 100644 index 000000000..8b59927de Binary files /dev/null and b/assets/img/custom_device_tracer.jpg differ diff --git a/assets/img/custom_device_tracer_wol.jpg b/assets/img/custom_device_tracer_wol.jpg new file mode 100644 index 000000000..00f6576f9 Binary files /dev/null and b/assets/img/custom_device_tracer_wol.jpg differ diff --git a/assets/img/custom_dual_graph.png b/assets/img/custom_dual_graph.png new file mode 100644 index 000000000..b3532eb28 Binary files /dev/null and b/assets/img/custom_dual_graph.png differ diff --git a/assets/img/custom_fan_dark_theme.png b/assets/img/custom_fan_dark_theme.png new file mode 100644 index 000000000..a52d8e276 Binary files /dev/null and b/assets/img/custom_fan_dark_theme.png differ diff --git a/assets/img/custom_fan_light_theme.png b/assets/img/custom_fan_light_theme.png new file mode 100644 index 000000000..875b79a00 Binary files /dev/null and b/assets/img/custom_fan_light_theme.png differ diff --git a/assets/img/custom_gauge.png b/assets/img/custom_gauge.png new file mode 100644 index 000000000..2ea1a79aa Binary files /dev/null and b/assets/img/custom_gauge.png differ diff --git a/assets/img/custom_power_details.png b/assets/img/custom_power_details.png new file mode 100644 index 000000000..9c8b04df1 Binary files /dev/null and b/assets/img/custom_power_details.png differ diff --git a/assets/img/custom_printer.png b/assets/img/custom_printer.png new file mode 100644 index 000000000..3fa0404df Binary files /dev/null and b/assets/img/custom_printer.png differ diff --git a/assets/img/custom_thermostat.png b/assets/img/custom_thermostat.png new file mode 100644 index 000000000..1f958fbf8 Binary files /dev/null and b/assets/img/custom_thermostat.png differ diff --git a/assets/img/custom_wifisignal.png b/assets/img/custom_wifisignal.png new file mode 100644 index 000000000..33ae0a20d Binary files /dev/null and b/assets/img/custom_wifisignal.png differ diff --git a/assets/img/example_consumption.png b/assets/img/example_consumption.png new file mode 100644 index 000000000..040a5eb2b Binary files /dev/null and b/assets/img/example_consumption.png differ diff --git a/assets/img/example_home.png b/assets/img/example_home.png new file mode 100644 index 000000000..369b34ca5 Binary files /dev/null and b/assets/img/example_home.png differ diff --git a/assets/img/example_localisation.png b/assets/img/example_localisation.png new file mode 100644 index 000000000..b90cac407 Binary files /dev/null and b/assets/img/example_localisation.png differ diff --git a/assets/img/example_temperature.png b/assets/img/example_temperature.png new file mode 100644 index 000000000..cce6d8c7f Binary files /dev/null and b/assets/img/example_temperature.png differ diff --git a/assets/img/flower.png b/assets/img/flower.png new file mode 100644 index 000000000..1c679b3d0 Binary files /dev/null and b/assets/img/flower.png differ diff --git a/assets/img/fork.png b/assets/img/fork.png new file mode 100644 index 000000000..128e1a694 Binary files /dev/null and b/assets/img/fork.png differ diff --git a/assets/img/heat_pump.gif b/assets/img/heat_pump.gif new file mode 100644 index 000000000..dc8e233dc Binary files /dev/null and b/assets/img/heat_pump.gif differ diff --git a/assets/img/layout/chip_center.png b/assets/img/layout/chip_center.png new file mode 100644 index 000000000..3ea424dd2 Binary files /dev/null and b/assets/img/layout/chip_center.png differ diff --git a/assets/img/layout/chip_left_right.png b/assets/img/layout/chip_left_right.png new file mode 100644 index 000000000..67d99333a Binary files /dev/null and b/assets/img/layout/chip_left_right.png differ diff --git a/assets/img/layout/chip_right.png b/assets/img/layout/chip_right.png new file mode 100644 index 000000000..fd74070cd Binary files /dev/null and b/assets/img/layout/chip_right.png differ diff --git a/assets/img/light_dark.png b/assets/img/light_dark.png new file mode 100644 index 000000000..39a944eab Binary files /dev/null and b/assets/img/light_dark.png differ diff --git a/assets/img/light_dark_horizontal.png b/assets/img/light_dark_horizontal.png new file mode 100644 index 000000000..a7f86a8a0 Binary files /dev/null and b/assets/img/light_dark_horizontal.png differ diff --git a/assets/img/light_dark_slider.png b/assets/img/light_dark_slider.png new file mode 100644 index 000000000..838987d33 Binary files /dev/null and b/assets/img/light_dark_slider.png differ diff --git a/assets/img/light_light.png b/assets/img/light_light.png new file mode 100644 index 000000000..5f5988f7c Binary files /dev/null and b/assets/img/light_light.png differ diff --git a/assets/img/light_light_horizontal.png b/assets/img/light_light_horizontal.png new file mode 100644 index 000000000..e21337393 Binary files /dev/null and b/assets/img/light_light_horizontal.png differ diff --git a/assets/img/light_light_slider.png b/assets/img/light_light_slider.png new file mode 100644 index 000000000..40411108a Binary files /dev/null and b/assets/img/light_light_slider.png differ diff --git a/assets/img/media_player_sonos.png b/assets/img/media_player_sonos.png new file mode 100644 index 000000000..e778cd496 Binary files /dev/null and b/assets/img/media_player_sonos.png differ diff --git a/assets/img/popup_cover.png b/assets/img/popup_cover.png new file mode 100644 index 000000000..39b316c55 Binary files /dev/null and b/assets/img/popup_cover.png differ diff --git a/assets/img/popup_light_phone.png b/assets/img/popup_light_phone.png new file mode 100644 index 000000000..6c2eca933 Binary files /dev/null and b/assets/img/popup_light_phone.png differ diff --git a/assets/img/popup_light_tablet.png b/assets/img/popup_light_tablet.png new file mode 100644 index 000000000..8184f6b39 Binary files /dev/null and b/assets/img/popup_light_tablet.png differ diff --git a/assets/img/popup_media_phone.png b/assets/img/popup_media_phone.png new file mode 100644 index 000000000..f51d846d3 Binary files /dev/null and b/assets/img/popup_media_phone.png differ diff --git a/assets/img/popup_media_tablet.png b/assets/img/popup_media_tablet.png new file mode 100644 index 000000000..26a0f5fdd Binary files /dev/null and b/assets/img/popup_media_tablet.png differ diff --git a/assets/img/popup_power_phone.png b/assets/img/popup_power_phone.png new file mode 100644 index 000000000..63b78f1ee Binary files /dev/null and b/assets/img/popup_power_phone.png differ diff --git a/assets/img/popup_power_tablet.png b/assets/img/popup_power_tablet.png new file mode 100644 index 000000000..50f3edb47 Binary files /dev/null and b/assets/img/popup_power_tablet.png differ diff --git a/assets/img/popup_thermostat_phone.png b/assets/img/popup_thermostat_phone.png new file mode 100644 index 000000000..fd2ed6e87 Binary files /dev/null and b/assets/img/popup_thermostat_phone.png differ diff --git a/assets/img/popup_vacuum.PNG b/assets/img/popup_vacuum.PNG new file mode 100644 index 000000000..f1078c0ae Binary files /dev/null and b/assets/img/popup_vacuum.PNG differ diff --git a/assets/img/popup_vacuum_no_camera.PNG b/assets/img/popup_vacuum_no_camera.PNG new file mode 100644 index 000000000..139fc8c48 Binary files /dev/null and b/assets/img/popup_vacuum_no_camera.PNG differ diff --git a/assets/img/popup_weather_phone.png b/assets/img/popup_weather_phone.png new file mode 100644 index 000000000..1e5ee1728 Binary files /dev/null and b/assets/img/popup_weather_phone.png differ diff --git a/assets/img/popup_weather_tablet.png b/assets/img/popup_weather_tablet.png new file mode 100644 index 000000000..869fb1c56 Binary files /dev/null and b/assets/img/popup_weather_tablet.png differ diff --git a/assets/img/scene.gif b/assets/img/scene.gif new file mode 100644 index 000000000..eb396c3d9 Binary files /dev/null and b/assets/img/scene.gif differ diff --git a/assets/img/screenshot_bar_card.png b/assets/img/screenshot_bar_card.png new file mode 100644 index 000000000..2c171a78f Binary files /dev/null and b/assets/img/screenshot_bar_card.png differ diff --git a/assets/img/screenshot_custom_camera1.png b/assets/img/screenshot_custom_camera1.png new file mode 100644 index 000000000..0d70fd3dc Binary files /dev/null and b/assets/img/screenshot_custom_camera1.png differ diff --git a/assets/img/screenshot_custom_camera2.png b/assets/img/screenshot_custom_camera2.png new file mode 100644 index 000000000..a2c2f1ec2 Binary files /dev/null and b/assets/img/screenshot_custom_camera2.png differ diff --git a/assets/img/screenshot_dark_count_lights.png b/assets/img/screenshot_dark_count_lights.png new file mode 100644 index 000000000..32629d7a3 Binary files /dev/null and b/assets/img/screenshot_dark_count_lights.png differ diff --git a/assets/img/screenshot_irmajavi_entities_card.jpg b/assets/img/screenshot_irmajavi_entities_card.jpg new file mode 100644 index 000000000..17669712e Binary files /dev/null and b/assets/img/screenshot_irmajavi_entities_card.jpg differ diff --git a/assets/img/screenshot_irmajavi_speedtest_card.jpg b/assets/img/screenshot_irmajavi_speedtest_card.jpg new file mode 100644 index 000000000..0a7aed968 Binary files /dev/null and b/assets/img/screenshot_irmajavi_speedtest_card.jpg differ diff --git a/assets/img/screenshot_irmajavi_weather_card.jpg b/assets/img/screenshot_irmajavi_weather_card.jpg new file mode 100644 index 000000000..ff6dc9389 Binary files /dev/null and b/assets/img/screenshot_irmajavi_weather_card.jpg differ diff --git a/assets/img/screenshot_light_count_lights.png b/assets/img/screenshot_light_count_lights.png new file mode 100644 index 000000000..03d28d68d Binary files /dev/null and b/assets/img/screenshot_light_count_lights.png differ diff --git a/assets/img/setup/hacs_adaptive_dashboard.png b/assets/img/setup/hacs_adaptive_dashboard.png new file mode 100644 index 000000000..5958d977b Binary files /dev/null and b/assets/img/setup/hacs_adaptive_dashboard.png differ diff --git a/assets/img/setup/hacs_integration_config.png b/assets/img/setup/hacs_integration_config.png new file mode 100644 index 000000000..d055cf178 Binary files /dev/null and b/assets/img/setup/hacs_integration_config.png differ diff --git a/assets/img/setup/minimalist_adaptive_dash.gif b/assets/img/setup/minimalist_adaptive_dash.gif new file mode 100644 index 000000000..88f382a40 Binary files /dev/null and b/assets/img/setup/minimalist_adaptive_dash.gif differ diff --git a/assets/img/sun-card.png b/assets/img/sun-card.png new file mode 100644 index 000000000..7d221d964 Binary files /dev/null and b/assets/img/sun-card.png differ diff --git a/assets/img/thermostat_dark.png b/assets/img/thermostat_dark.png new file mode 100644 index 000000000..80eed7000 Binary files /dev/null and b/assets/img/thermostat_dark.png differ diff --git a/assets/img/thermostat_dark_with_heating_ui.png b/assets/img/thermostat_dark_with_heating_ui.png new file mode 100644 index 000000000..c9f8fd1ba Binary files /dev/null and b/assets/img/thermostat_dark_with_heating_ui.png differ diff --git a/assets/img/thermostat_white.png b/assets/img/thermostat_white.png new file mode 100644 index 000000000..05d35e127 Binary files /dev/null and b/assets/img/thermostat_white.png differ diff --git a/assets/img/thermostat_white_collapse.png b/assets/img/thermostat_white_collapse.png new file mode 100644 index 000000000..609ef2186 Binary files /dev/null and b/assets/img/thermostat_white_collapse.png differ diff --git a/assets/img/thermostat_white_with_heating_ui.png b/assets/img/thermostat_white_with_heating_ui.png new file mode 100644 index 000000000..4af943bce Binary files /dev/null and b/assets/img/thermostat_white_with_heating_ui.png differ diff --git a/assets/img/title.png b/assets/img/title.png new file mode 100644 index 000000000..258bf9620 Binary files /dev/null and b/assets/img/title.png differ diff --git a/assets/img/ulm_cards/card_battery.png b/assets/img/ulm_cards/card_battery.png new file mode 100644 index 000000000..d4df2b99e Binary files /dev/null and b/assets/img/ulm_cards/card_battery.png differ diff --git a/assets/img/ulm_cards/card_binary_sensor.png b/assets/img/ulm_cards/card_binary_sensor.png new file mode 100644 index 000000000..482aa7a10 Binary files /dev/null and b/assets/img/ulm_cards/card_binary_sensor.png differ diff --git a/assets/img/ulm_cards/card_binary_sensor_alert.png b/assets/img/ulm_cards/card_binary_sensor_alert.png new file mode 100644 index 000000000..839124074 Binary files /dev/null and b/assets/img/ulm_cards/card_binary_sensor_alert.png differ diff --git a/assets/img/ulm_cards/card_cover.png b/assets/img/ulm_cards/card_cover.png new file mode 100644 index 000000000..f698e58a7 Binary files /dev/null and b/assets/img/ulm_cards/card_cover.png differ diff --git a/assets/img/ulm_cards/card_cover_buttons.png b/assets/img/ulm_cards/card_cover_buttons.png new file mode 100644 index 000000000..6b9362251 Binary files /dev/null and b/assets/img/ulm_cards/card_cover_buttons.png differ diff --git a/assets/img/ulm_cards/card_cover_controls.png b/assets/img/ulm_cards/card_cover_controls.png new file mode 100644 index 000000000..e7cf0e3f7 Binary files /dev/null and b/assets/img/ulm_cards/card_cover_controls.png differ diff --git a/assets/img/ulm_cards/card_cover_horizontal.png b/assets/img/ulm_cards/card_cover_horizontal.png new file mode 100644 index 000000000..5f5fb4845 Binary files /dev/null and b/assets/img/ulm_cards/card_cover_horizontal.png differ diff --git a/assets/img/ulm_cards/card_cover_slider.png b/assets/img/ulm_cards/card_cover_slider.png new file mode 100644 index 000000000..0dad6ea98 Binary files /dev/null and b/assets/img/ulm_cards/card_cover_slider.png differ diff --git a/assets/img/ulm_cards/card_cover_slider_horizontal.png b/assets/img/ulm_cards/card_cover_slider_horizontal.png new file mode 100644 index 000000000..2772912fd Binary files /dev/null and b/assets/img/ulm_cards/card_cover_slider_horizontal.png differ diff --git a/assets/img/ulm_cards/card_example.png b/assets/img/ulm_cards/card_example.png new file mode 100644 index 000000000..0dd12c5a8 Binary files /dev/null and b/assets/img/ulm_cards/card_example.png differ diff --git a/assets/img/ulm_cards/card_fan.png b/assets/img/ulm_cards/card_fan.png new file mode 100644 index 000000000..c3b80fb97 Binary files /dev/null and b/assets/img/ulm_cards/card_fan.png differ diff --git a/assets/img/ulm_cards/card_fan_slider.png b/assets/img/ulm_cards/card_fan_slider.png new file mode 100644 index 000000000..0756179ef Binary files /dev/null and b/assets/img/ulm_cards/card_fan_slider.png differ diff --git a/assets/img/ulm_cards/card_fan_slider_collapse.png b/assets/img/ulm_cards/card_fan_slider_collapse.png new file mode 100644 index 000000000..b5c65d8e5 Binary files /dev/null and b/assets/img/ulm_cards/card_fan_slider_collapse.png differ diff --git a/assets/img/ulm_cards/card_fan_slider_horizontal.png b/assets/img/ulm_cards/card_fan_slider_horizontal.png new file mode 100644 index 000000000..e26c54af2 Binary files /dev/null and b/assets/img/ulm_cards/card_fan_slider_horizontal.png differ diff --git a/assets/img/ulm_cards/card_generic.png b/assets/img/ulm_cards/card_generic.png new file mode 100644 index 000000000..add0a8b4d Binary files /dev/null and b/assets/img/ulm_cards/card_generic.png differ diff --git a/assets/img/ulm_cards/card_generic_swap.png b/assets/img/ulm_cards/card_generic_swap.png new file mode 100644 index 000000000..30584c9e7 Binary files /dev/null and b/assets/img/ulm_cards/card_generic_swap.png differ diff --git a/assets/img/ulm_cards/card_graph.png b/assets/img/ulm_cards/card_graph.png new file mode 100644 index 000000000..5865b026f Binary files /dev/null and b/assets/img/ulm_cards/card_graph.png differ diff --git a/assets/img/ulm_cards/card_homeassistant_updates.png b/assets/img/ulm_cards/card_homeassistant_updates.png new file mode 100644 index 000000000..f55e2947a Binary files /dev/null and b/assets/img/ulm_cards/card_homeassistant_updates.png differ diff --git a/assets/img/ulm_cards/card_input_boolean.png b/assets/img/ulm_cards/card_input_boolean.png new file mode 100644 index 000000000..9bfb237ca Binary files /dev/null and b/assets/img/ulm_cards/card_input_boolean.png differ diff --git a/assets/img/ulm_cards/card_input_number.png b/assets/img/ulm_cards/card_input_number.png new file mode 100644 index 000000000..ab5f83da6 Binary files /dev/null and b/assets/img/ulm_cards/card_input_number.png differ diff --git a/assets/img/ulm_cards/card_light.png b/assets/img/ulm_cards/card_light.png new file mode 100644 index 000000000..821bb43b2 Binary files /dev/null and b/assets/img/ulm_cards/card_light.png differ diff --git a/assets/img/ulm_cards/card_light_combi.png b/assets/img/ulm_cards/card_light_combi.png new file mode 100644 index 000000000..a034281c1 Binary files /dev/null and b/assets/img/ulm_cards/card_light_combi.png differ diff --git a/assets/img/ulm_cards/card_light_slider.png b/assets/img/ulm_cards/card_light_slider.png new file mode 100644 index 000000000..129ee43b9 Binary files /dev/null and b/assets/img/ulm_cards/card_light_slider.png differ diff --git a/assets/img/ulm_cards/card_light_slider_collapse.png b/assets/img/ulm_cards/card_light_slider_collapse.png new file mode 100644 index 000000000..88a8629ec Binary files /dev/null and b/assets/img/ulm_cards/card_light_slider_collapse.png differ diff --git a/assets/img/ulm_cards/card_light_slider_horizontal.png b/assets/img/ulm_cards/card_light_slider_horizontal.png new file mode 100644 index 000000000..b2469e060 Binary files /dev/null and b/assets/img/ulm_cards/card_light_slider_horizontal.png differ diff --git a/assets/img/ulm_cards/card_media_player.png b/assets/img/ulm_cards/card_media_player.png new file mode 100644 index 000000000..12d4812f4 Binary files /dev/null and b/assets/img/ulm_cards/card_media_player.png differ diff --git a/assets/img/ulm_cards/card_media_player_art.png b/assets/img/ulm_cards/card_media_player_art.png new file mode 100644 index 000000000..63aca17d3 Binary files /dev/null and b/assets/img/ulm_cards/card_media_player_art.png differ diff --git a/assets/img/ulm_cards/card_media_player_art_controls.png b/assets/img/ulm_cards/card_media_player_art_controls.png new file mode 100644 index 000000000..239abec0d Binary files /dev/null and b/assets/img/ulm_cards/card_media_player_art_controls.png differ diff --git a/assets/img/ulm_cards/card_media_player_controls.png b/assets/img/ulm_cards/card_media_player_controls.png new file mode 100644 index 000000000..be67ea40d Binary files /dev/null and b/assets/img/ulm_cards/card_media_player_controls.png differ diff --git a/assets/img/ulm_cards/card_media_player_icon.png b/assets/img/ulm_cards/card_media_player_icon.png new file mode 100644 index 000000000..708519ecb Binary files /dev/null and b/assets/img/ulm_cards/card_media_player_icon.png differ diff --git a/assets/img/ulm_cards/card_media_player_volume_slider.png b/assets/img/ulm_cards/card_media_player_volume_slider.png new file mode 100644 index 000000000..cde959ffa Binary files /dev/null and b/assets/img/ulm_cards/card_media_player_volume_slider.png differ diff --git a/assets/img/ulm_cards/card_navigate.png b/assets/img/ulm_cards/card_navigate.png new file mode 100644 index 000000000..d0aceb375 Binary files /dev/null and b/assets/img/ulm_cards/card_navigate.png differ diff --git a/assets/img/ulm_cards/card_person.png b/assets/img/ulm_cards/card_person.png new file mode 100644 index 000000000..6ed0dbed2 Binary files /dev/null and b/assets/img/ulm_cards/card_person.png differ diff --git a/assets/img/ulm_cards/card_power_outlet.png b/assets/img/ulm_cards/card_power_outlet.png new file mode 100644 index 000000000..f3300e593 Binary files /dev/null and b/assets/img/ulm_cards/card_power_outlet.png differ diff --git a/assets/img/ulm_cards/card_scenes.png b/assets/img/ulm_cards/card_scenes.png new file mode 100644 index 000000000..d747328b2 Binary files /dev/null and b/assets/img/ulm_cards/card_scenes.png differ diff --git a/assets/img/ulm_cards/card_script.png b/assets/img/ulm_cards/card_script.png new file mode 100644 index 000000000..292f24613 Binary files /dev/null and b/assets/img/ulm_cards/card_script.png differ diff --git a/assets/img/ulm_cards/card_thermostat.png b/assets/img/ulm_cards/card_thermostat.png new file mode 100644 index 000000000..49b3a7ebb Binary files /dev/null and b/assets/img/ulm_cards/card_thermostat.png differ diff --git a/assets/img/ulm_cards/card_thermostat_with_controls.png b/assets/img/ulm_cards/card_thermostat_with_controls.png new file mode 100644 index 000000000..c35399ce9 Binary files /dev/null and b/assets/img/ulm_cards/card_thermostat_with_controls.png differ diff --git a/assets/img/ulm_cards/card_thermostat_with_high_low.png b/assets/img/ulm_cards/card_thermostat_with_high_low.png new file mode 100644 index 000000000..67123e8a7 Binary files /dev/null and b/assets/img/ulm_cards/card_thermostat_with_high_low.png differ diff --git a/assets/img/ulm_cards/card_thermostat_with_hvac_and_color.png b/assets/img/ulm_cards/card_thermostat_with_hvac_and_color.png new file mode 100644 index 000000000..aaaf6344c Binary files /dev/null and b/assets/img/ulm_cards/card_thermostat_with_hvac_and_color.png differ diff --git a/assets/img/ulm_cards/card_title.png b/assets/img/ulm_cards/card_title.png new file mode 100644 index 000000000..c361c7598 Binary files /dev/null and b/assets/img/ulm_cards/card_title.png differ diff --git a/assets/img/ulm_cards/card_vacuum_cleaning.png b/assets/img/ulm_cards/card_vacuum_cleaning.png new file mode 100644 index 000000000..298680cae Binary files /dev/null and b/assets/img/ulm_cards/card_vacuum_cleaning.png differ diff --git a/assets/img/ulm_cards/card_vacuum_docked.png b/assets/img/ulm_cards/card_vacuum_docked.png new file mode 100644 index 000000000..415e01bd1 Binary files /dev/null and b/assets/img/ulm_cards/card_vacuum_docked.png differ diff --git a/assets/img/ulm_cards/card_vacuum_returning.png b/assets/img/ulm_cards/card_vacuum_returning.png new file mode 100644 index 000000000..53ca7974b Binary files /dev/null and b/assets/img/ulm_cards/card_vacuum_returning.png differ diff --git a/assets/img/ulm_cards/card_weather.png b/assets/img/ulm_cards/card_weather.png new file mode 100644 index 000000000..b985c7fad Binary files /dev/null and b/assets/img/ulm_cards/card_weather.png differ diff --git a/assets/img/ulm_cards/card_weather_ulm.png b/assets/img/ulm_cards/card_weather_ulm.png new file mode 100644 index 000000000..5964e0515 Binary files /dev/null and b/assets/img/ulm_cards/card_weather_ulm.png differ diff --git a/assets/img/ulm_cards/card_welcome_scenes.png b/assets/img/ulm_cards/card_welcome_scenes.png new file mode 100644 index 000000000..3d1fef7b0 Binary files /dev/null and b/assets/img/ulm_cards/card_welcome_scenes.png differ diff --git a/assets/img/ulm_cards/custom_card_afvalophaling_1.png b/assets/img/ulm_cards/custom_card_afvalophaling_1.png new file mode 100644 index 000000000..2b333ee43 Binary files /dev/null and b/assets/img/ulm_cards/custom_card_afvalophaling_1.png differ diff --git a/assets/img/ulm_cards/custom_card_afvalophaling_2.png b/assets/img/ulm_cards/custom_card_afvalophaling_2.png new file mode 100644 index 000000000..072dcbdd8 Binary files /dev/null and b/assets/img/ulm_cards/custom_card_afvalophaling_2.png differ diff --git a/assets/img/ulm_cards/room-card.png b/assets/img/ulm_cards/room-card.png new file mode 100644 index 000000000..ab8646a9e Binary files /dev/null and b/assets/img/ulm_cards/room-card.png differ diff --git a/assets/img/ulm_chips/chip_alarm.png b/assets/img/ulm_chips/chip_alarm.png new file mode 100644 index 000000000..2ea2237e7 Binary files /dev/null and b/assets/img/ulm_chips/chip_alarm.png differ diff --git a/assets/img/ulm_chips/chip_back.png b/assets/img/ulm_chips/chip_back.png new file mode 100644 index 000000000..68065712a Binary files /dev/null and b/assets/img/ulm_chips/chip_back.png differ diff --git a/assets/img/ulm_chips/chip_example.png b/assets/img/ulm_chips/chip_example.png new file mode 100644 index 000000000..534a2e275 Binary files /dev/null and b/assets/img/ulm_chips/chip_example.png differ diff --git a/assets/img/ulm_chips/chip_icon_double_state.png b/assets/img/ulm_chips/chip_icon_double_state.png new file mode 100644 index 000000000..7aeb7515b Binary files /dev/null and b/assets/img/ulm_chips/chip_icon_double_state.png differ diff --git a/assets/img/ulm_chips/chip_icon_label.png b/assets/img/ulm_chips/chip_icon_label.png new file mode 100644 index 000000000..46424ef51 Binary files /dev/null and b/assets/img/ulm_chips/chip_icon_label.png differ diff --git a/assets/img/ulm_chips/chip_icon_only.png b/assets/img/ulm_chips/chip_icon_only.png new file mode 100644 index 000000000..e16e1773f Binary files /dev/null and b/assets/img/ulm_chips/chip_icon_only.png differ diff --git a/assets/img/ulm_chips/chip_icon_state.png b/assets/img/ulm_chips/chip_icon_state.png new file mode 100644 index 000000000..dde318a44 Binary files /dev/null and b/assets/img/ulm_chips/chip_icon_state.png differ diff --git a/assets/img/ulm_chips/chip_mdi_icon_only.png b/assets/img/ulm_chips/chip_mdi_icon_only.png new file mode 100644 index 000000000..3fbc12f29 Binary files /dev/null and b/assets/img/ulm_chips/chip_mdi_icon_only.png differ diff --git a/assets/img/ulm_chips/chip_mdi_icon_state.png b/assets/img/ulm_chips/chip_mdi_icon_state.png new file mode 100644 index 000000000..4389abfaf Binary files /dev/null and b/assets/img/ulm_chips/chip_mdi_icon_state.png differ diff --git a/assets/img/ulm_chips/chip_myenedis_all.png b/assets/img/ulm_chips/chip_myenedis_all.png new file mode 100644 index 000000000..88be00803 Binary files /dev/null and b/assets/img/ulm_chips/chip_myenedis_all.png differ diff --git a/assets/img/ulm_chips/chip_myenedis_hp_hc.png b/assets/img/ulm_chips/chip_myenedis_hp_hc.png new file mode 100644 index 000000000..28561f6e1 Binary files /dev/null and b/assets/img/ulm_chips/chip_myenedis_hp_hc.png differ diff --git a/assets/img/ulm_chips/chip_navigate.png b/assets/img/ulm_chips/chip_navigate.png new file mode 100644 index 000000000..a7ccf0943 Binary files /dev/null and b/assets/img/ulm_chips/chip_navigate.png differ diff --git a/assets/img/ulm_chips/chip_power_consumption.png b/assets/img/ulm_chips/chip_power_consumption.png new file mode 100644 index 000000000..d0d90e167 Binary files /dev/null and b/assets/img/ulm_chips/chip_power_consumption.png differ diff --git a/assets/img/ulm_chips/chip_presence_detection.png b/assets/img/ulm_chips/chip_presence_detection.png new file mode 100644 index 000000000..fc34d7121 Binary files /dev/null and b/assets/img/ulm_chips/chip_presence_detection.png differ diff --git a/assets/img/ulm_chips/chip_temperature.png b/assets/img/ulm_chips/chip_temperature.png new file mode 100644 index 000000000..34c10b29d Binary files /dev/null and b/assets/img/ulm_chips/chip_temperature.png differ diff --git a/assets/img/unix_line_endings.png b/assets/img/unix_line_endings.png new file mode 100644 index 000000000..b8872295d Binary files /dev/null and b/assets/img/unix_line_endings.png differ diff --git a/assets/img/upload.png b/assets/img/upload.png new file mode 100644 index 000000000..ec33831ef Binary files /dev/null and b/assets/img/upload.png differ diff --git a/assets/javascripts/bundle.88dd0f4e.min.js b/assets/javascripts/bundle.88dd0f4e.min.js new file mode 100644 index 000000000..fb8f31090 --- /dev/null +++ b/assets/javascripts/bundle.88dd0f4e.min.js @@ -0,0 +1,16 @@ +"use strict";(()=>{var Wi=Object.create;var gr=Object.defineProperty;var Di=Object.getOwnPropertyDescriptor;var Vi=Object.getOwnPropertyNames,Vt=Object.getOwnPropertySymbols,Ni=Object.getPrototypeOf,yr=Object.prototype.hasOwnProperty,ao=Object.prototype.propertyIsEnumerable;var io=(e,t,r)=>t in e?gr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,$=(e,t)=>{for(var r in t||(t={}))yr.call(t,r)&&io(e,r,t[r]);if(Vt)for(var r of Vt(t))ao.call(t,r)&&io(e,r,t[r]);return e};var so=(e,t)=>{var r={};for(var o in e)yr.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&Vt)for(var o of Vt(e))t.indexOf(o)<0&&ao.call(e,o)&&(r[o]=e[o]);return r};var xr=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var zi=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of Vi(t))!yr.call(e,n)&&n!==r&&gr(e,n,{get:()=>t[n],enumerable:!(o=Di(t,n))||o.enumerable});return e};var Mt=(e,t,r)=>(r=e!=null?Wi(Ni(e)):{},zi(t||!e||!e.__esModule?gr(r,"default",{value:e,enumerable:!0}):r,e));var co=(e,t,r)=>new Promise((o,n)=>{var i=p=>{try{s(r.next(p))}catch(c){n(c)}},a=p=>{try{s(r.throw(p))}catch(c){n(c)}},s=p=>p.done?o(p.value):Promise.resolve(p.value).then(i,a);s((r=r.apply(e,t)).next())});var lo=xr((Er,po)=>{(function(e,t){typeof Er=="object"&&typeof po!="undefined"?t():typeof define=="function"&&define.amd?define(t):t()})(Er,function(){"use strict";function e(r){var o=!0,n=!1,i=null,a={text:!0,search:!0,url:!0,tel:!0,email:!0,password:!0,number:!0,date:!0,month:!0,week:!0,time:!0,datetime:!0,"datetime-local":!0};function s(k){return!!(k&&k!==document&&k.nodeName!=="HTML"&&k.nodeName!=="BODY"&&"classList"in k&&"contains"in k.classList)}function p(k){var ft=k.type,qe=k.tagName;return!!(qe==="INPUT"&&a[ft]&&!k.readOnly||qe==="TEXTAREA"&&!k.readOnly||k.isContentEditable)}function c(k){k.classList.contains("focus-visible")||(k.classList.add("focus-visible"),k.setAttribute("data-focus-visible-added",""))}function l(k){k.hasAttribute("data-focus-visible-added")&&(k.classList.remove("focus-visible"),k.removeAttribute("data-focus-visible-added"))}function f(k){k.metaKey||k.altKey||k.ctrlKey||(s(r.activeElement)&&c(r.activeElement),o=!0)}function u(k){o=!1}function d(k){s(k.target)&&(o||p(k.target))&&c(k.target)}function y(k){s(k.target)&&(k.target.classList.contains("focus-visible")||k.target.hasAttribute("data-focus-visible-added"))&&(n=!0,window.clearTimeout(i),i=window.setTimeout(function(){n=!1},100),l(k.target))}function L(k){document.visibilityState==="hidden"&&(n&&(o=!0),X())}function X(){document.addEventListener("mousemove",J),document.addEventListener("mousedown",J),document.addEventListener("mouseup",J),document.addEventListener("pointermove",J),document.addEventListener("pointerdown",J),document.addEventListener("pointerup",J),document.addEventListener("touchmove",J),document.addEventListener("touchstart",J),document.addEventListener("touchend",J)}function te(){document.removeEventListener("mousemove",J),document.removeEventListener("mousedown",J),document.removeEventListener("mouseup",J),document.removeEventListener("pointermove",J),document.removeEventListener("pointerdown",J),document.removeEventListener("pointerup",J),document.removeEventListener("touchmove",J),document.removeEventListener("touchstart",J),document.removeEventListener("touchend",J)}function J(k){k.target.nodeName&&k.target.nodeName.toLowerCase()==="html"||(o=!1,te())}document.addEventListener("keydown",f,!0),document.addEventListener("mousedown",u,!0),document.addEventListener("pointerdown",u,!0),document.addEventListener("touchstart",u,!0),document.addEventListener("visibilitychange",L,!0),X(),r.addEventListener("focus",d,!0),r.addEventListener("blur",y,!0),r.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&r.host?r.host.setAttribute("data-js-focus-visible",""):r.nodeType===Node.DOCUMENT_NODE&&(document.documentElement.classList.add("js-focus-visible"),document.documentElement.setAttribute("data-js-focus-visible",""))}if(typeof window!="undefined"&&typeof document!="undefined"){window.applyFocusVisiblePolyfill=e;var t;try{t=new CustomEvent("focus-visible-polyfill-ready")}catch(r){t=document.createEvent("CustomEvent"),t.initCustomEvent("focus-visible-polyfill-ready",!1,!1,{})}window.dispatchEvent(t)}typeof document!="undefined"&&e(document)})});var qr=xr((hy,On)=>{"use strict";/*! + * escape-html + * Copyright(c) 2012-2013 TJ Holowaychuk + * Copyright(c) 2015 Andreas Lubbe + * Copyright(c) 2015 Tiancheng "Timothy" Gu + * MIT Licensed + */var $a=/["'&<>]/;On.exports=Pa;function Pa(e){var t=""+e,r=$a.exec(t);if(!r)return t;var o,n="",i=0,a=0;for(i=r.index;i{/*! + * clipboard.js v2.0.11 + * https://clipboardjs.com/ + * + * Licensed MIT © Zeno Rocha + */(function(t,r){typeof It=="object"&&typeof Yr=="object"?Yr.exports=r():typeof define=="function"&&define.amd?define([],r):typeof It=="object"?It.ClipboardJS=r():t.ClipboardJS=r()})(It,function(){return function(){var e={686:function(o,n,i){"use strict";i.d(n,{default:function(){return Ui}});var a=i(279),s=i.n(a),p=i(370),c=i.n(p),l=i(817),f=i.n(l);function u(V){try{return document.execCommand(V)}catch(A){return!1}}var d=function(A){var M=f()(A);return u("cut"),M},y=d;function L(V){var A=document.documentElement.getAttribute("dir")==="rtl",M=document.createElement("textarea");M.style.fontSize="12pt",M.style.border="0",M.style.padding="0",M.style.margin="0",M.style.position="absolute",M.style[A?"right":"left"]="-9999px";var F=window.pageYOffset||document.documentElement.scrollTop;return M.style.top="".concat(F,"px"),M.setAttribute("readonly",""),M.value=V,M}var X=function(A,M){var F=L(A);M.container.appendChild(F);var D=f()(F);return u("copy"),F.remove(),D},te=function(A){var M=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{container:document.body},F="";return typeof A=="string"?F=X(A,M):A instanceof HTMLInputElement&&!["text","search","url","tel","password"].includes(A==null?void 0:A.type)?F=X(A.value,M):(F=f()(A),u("copy")),F},J=te;function k(V){"@babel/helpers - typeof";return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?k=function(M){return typeof M}:k=function(M){return M&&typeof Symbol=="function"&&M.constructor===Symbol&&M!==Symbol.prototype?"symbol":typeof M},k(V)}var ft=function(){var A=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{},M=A.action,F=M===void 0?"copy":M,D=A.container,Y=A.target,$e=A.text;if(F!=="copy"&&F!=="cut")throw new Error('Invalid "action" value, use either "copy" or "cut"');if(Y!==void 0)if(Y&&k(Y)==="object"&&Y.nodeType===1){if(F==="copy"&&Y.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if(F==="cut"&&(Y.hasAttribute("readonly")||Y.hasAttribute("disabled")))throw new Error(`Invalid "target" attribute. You can't cut text from elements with "readonly" or "disabled" attributes`)}else throw new Error('Invalid "target" value, use a valid Element');if($e)return J($e,{container:D});if(Y)return F==="cut"?y(Y):J(Y,{container:D})},qe=ft;function Fe(V){"@babel/helpers - typeof";return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?Fe=function(M){return typeof M}:Fe=function(M){return M&&typeof Symbol=="function"&&M.constructor===Symbol&&M!==Symbol.prototype?"symbol":typeof M},Fe(V)}function ki(V,A){if(!(V instanceof A))throw new TypeError("Cannot call a class as a function")}function no(V,A){for(var M=0;M0&&arguments[0]!==void 0?arguments[0]:{};this.action=typeof D.action=="function"?D.action:this.defaultAction,this.target=typeof D.target=="function"?D.target:this.defaultTarget,this.text=typeof D.text=="function"?D.text:this.defaultText,this.container=Fe(D.container)==="object"?D.container:document.body}},{key:"listenClick",value:function(D){var Y=this;this.listener=c()(D,"click",function($e){return Y.onClick($e)})}},{key:"onClick",value:function(D){var Y=D.delegateTarget||D.currentTarget,$e=this.action(Y)||"copy",Dt=qe({action:$e,container:this.container,target:this.target(Y),text:this.text(Y)});this.emit(Dt?"success":"error",{action:$e,text:Dt,trigger:Y,clearSelection:function(){Y&&Y.focus(),window.getSelection().removeAllRanges()}})}},{key:"defaultAction",value:function(D){return vr("action",D)}},{key:"defaultTarget",value:function(D){var Y=vr("target",D);if(Y)return document.querySelector(Y)}},{key:"defaultText",value:function(D){return vr("text",D)}},{key:"destroy",value:function(){this.listener.destroy()}}],[{key:"copy",value:function(D){var Y=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{container:document.body};return J(D,Y)}},{key:"cut",value:function(D){return y(D)}},{key:"isSupported",value:function(){var D=arguments.length>0&&arguments[0]!==void 0?arguments[0]:["copy","cut"],Y=typeof D=="string"?[D]:D,$e=!!document.queryCommandSupported;return Y.forEach(function(Dt){$e=$e&&!!document.queryCommandSupported(Dt)}),$e}}]),M}(s()),Ui=Fi},828:function(o){var n=9;if(typeof Element!="undefined"&&!Element.prototype.matches){var i=Element.prototype;i.matches=i.matchesSelector||i.mozMatchesSelector||i.msMatchesSelector||i.oMatchesSelector||i.webkitMatchesSelector}function a(s,p){for(;s&&s.nodeType!==n;){if(typeof s.matches=="function"&&s.matches(p))return s;s=s.parentNode}}o.exports=a},438:function(o,n,i){var a=i(828);function s(l,f,u,d,y){var L=c.apply(this,arguments);return l.addEventListener(u,L,y),{destroy:function(){l.removeEventListener(u,L,y)}}}function p(l,f,u,d,y){return typeof l.addEventListener=="function"?s.apply(null,arguments):typeof u=="function"?s.bind(null,document).apply(null,arguments):(typeof l=="string"&&(l=document.querySelectorAll(l)),Array.prototype.map.call(l,function(L){return s(L,f,u,d,y)}))}function c(l,f,u,d){return function(y){y.delegateTarget=a(y.target,f),y.delegateTarget&&d.call(l,y)}}o.exports=p},879:function(o,n){n.node=function(i){return i!==void 0&&i instanceof HTMLElement&&i.nodeType===1},n.nodeList=function(i){var a=Object.prototype.toString.call(i);return i!==void 0&&(a==="[object NodeList]"||a==="[object HTMLCollection]")&&"length"in i&&(i.length===0||n.node(i[0]))},n.string=function(i){return typeof i=="string"||i instanceof String},n.fn=function(i){var a=Object.prototype.toString.call(i);return a==="[object Function]"}},370:function(o,n,i){var a=i(879),s=i(438);function p(u,d,y){if(!u&&!d&&!y)throw new Error("Missing required arguments");if(!a.string(d))throw new TypeError("Second argument must be a String");if(!a.fn(y))throw new TypeError("Third argument must be a Function");if(a.node(u))return c(u,d,y);if(a.nodeList(u))return l(u,d,y);if(a.string(u))return f(u,d,y);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}function c(u,d,y){return u.addEventListener(d,y),{destroy:function(){u.removeEventListener(d,y)}}}function l(u,d,y){return Array.prototype.forEach.call(u,function(L){L.addEventListener(d,y)}),{destroy:function(){Array.prototype.forEach.call(u,function(L){L.removeEventListener(d,y)})}}}function f(u,d,y){return s(document.body,u,d,y)}o.exports=p},817:function(o){function n(i){var a;if(i.nodeName==="SELECT")i.focus(),a=i.value;else if(i.nodeName==="INPUT"||i.nodeName==="TEXTAREA"){var s=i.hasAttribute("readonly");s||i.setAttribute("readonly",""),i.select(),i.setSelectionRange(0,i.value.length),s||i.removeAttribute("readonly"),a=i.value}else{i.hasAttribute("contenteditable")&&i.focus();var p=window.getSelection(),c=document.createRange();c.selectNodeContents(i),p.removeAllRanges(),p.addRange(c),a=p.toString()}return a}o.exports=n},279:function(o){function n(){}n.prototype={on:function(i,a,s){var p=this.e||(this.e={});return(p[i]||(p[i]=[])).push({fn:a,ctx:s}),this},once:function(i,a,s){var p=this;function c(){p.off(i,c),a.apply(s,arguments)}return c._=a,this.on(i,c,s)},emit:function(i){var a=[].slice.call(arguments,1),s=((this.e||(this.e={}))[i]||[]).slice(),p=0,c=s.length;for(p;p0&&i[i.length-1])&&(c[0]===6||c[0]===2)){r=0;continue}if(c[0]===3&&(!i||c[1]>i[0]&&c[1]=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function N(e,t){var r=typeof Symbol=="function"&&e[Symbol.iterator];if(!r)return e;var o=r.call(e),n,i=[],a;try{for(;(t===void 0||t-- >0)&&!(n=o.next()).done;)i.push(n.value)}catch(s){a={error:s}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(a)throw a.error}}return i}function q(e,t,r){if(r||arguments.length===2)for(var o=0,n=t.length,i;o1||p(d,L)})},y&&(n[d]=y(n[d])))}function p(d,y){try{c(o[d](y))}catch(L){u(i[0][3],L)}}function c(d){d.value instanceof nt?Promise.resolve(d.value.v).then(l,f):u(i[0][2],d)}function l(d){p("next",d)}function f(d){p("throw",d)}function u(d,y){d(y),i.shift(),i.length&&p(i[0][0],i[0][1])}}function uo(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t=e[Symbol.asyncIterator],r;return t?t.call(e):(e=typeof he=="function"?he(e):e[Symbol.iterator](),r={},o("next"),o("throw"),o("return"),r[Symbol.asyncIterator]=function(){return this},r);function o(i){r[i]=e[i]&&function(a){return new Promise(function(s,p){a=e[i](a),n(s,p,a.done,a.value)})}}function n(i,a,s,p){Promise.resolve(p).then(function(c){i({value:c,done:s})},a)}}function H(e){return typeof e=="function"}function ut(e){var t=function(o){Error.call(o),o.stack=new Error().stack},r=e(t);return r.prototype=Object.create(Error.prototype),r.prototype.constructor=r,r}var zt=ut(function(e){return function(r){e(this),this.message=r?r.length+` errors occurred during unsubscription: +`+r.map(function(o,n){return n+1+") "+o.toString()}).join(` + `):"",this.name="UnsubscriptionError",this.errors=r}});function Qe(e,t){if(e){var r=e.indexOf(t);0<=r&&e.splice(r,1)}}var Ue=function(){function e(t){this.initialTeardown=t,this.closed=!1,this._parentage=null,this._finalizers=null}return e.prototype.unsubscribe=function(){var t,r,o,n,i;if(!this.closed){this.closed=!0;var a=this._parentage;if(a)if(this._parentage=null,Array.isArray(a))try{for(var s=he(a),p=s.next();!p.done;p=s.next()){var c=p.value;c.remove(this)}}catch(L){t={error:L}}finally{try{p&&!p.done&&(r=s.return)&&r.call(s)}finally{if(t)throw t.error}}else a.remove(this);var l=this.initialTeardown;if(H(l))try{l()}catch(L){i=L instanceof zt?L.errors:[L]}var f=this._finalizers;if(f){this._finalizers=null;try{for(var u=he(f),d=u.next();!d.done;d=u.next()){var y=d.value;try{ho(y)}catch(L){i=i!=null?i:[],L instanceof zt?i=q(q([],N(i)),N(L.errors)):i.push(L)}}}catch(L){o={error:L}}finally{try{d&&!d.done&&(n=u.return)&&n.call(u)}finally{if(o)throw o.error}}}if(i)throw new zt(i)}},e.prototype.add=function(t){var r;if(t&&t!==this)if(this.closed)ho(t);else{if(t instanceof e){if(t.closed||t._hasParent(this))return;t._addParent(this)}(this._finalizers=(r=this._finalizers)!==null&&r!==void 0?r:[]).push(t)}},e.prototype._hasParent=function(t){var r=this._parentage;return r===t||Array.isArray(r)&&r.includes(t)},e.prototype._addParent=function(t){var r=this._parentage;this._parentage=Array.isArray(r)?(r.push(t),r):r?[r,t]:t},e.prototype._removeParent=function(t){var r=this._parentage;r===t?this._parentage=null:Array.isArray(r)&&Qe(r,t)},e.prototype.remove=function(t){var r=this._finalizers;r&&Qe(r,t),t instanceof e&&t._removeParent(this)},e.EMPTY=function(){var t=new e;return t.closed=!0,t}(),e}();var Tr=Ue.EMPTY;function qt(e){return e instanceof Ue||e&&"closed"in e&&H(e.remove)&&H(e.add)&&H(e.unsubscribe)}function ho(e){H(e)?e():e.unsubscribe()}var Pe={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1};var dt={setTimeout:function(e,t){for(var r=[],o=2;o0},enumerable:!1,configurable:!0}),t.prototype._trySubscribe=function(r){return this._throwIfClosed(),e.prototype._trySubscribe.call(this,r)},t.prototype._subscribe=function(r){return this._throwIfClosed(),this._checkFinalizedStatuses(r),this._innerSubscribe(r)},t.prototype._innerSubscribe=function(r){var o=this,n=this,i=n.hasError,a=n.isStopped,s=n.observers;return i||a?Tr:(this.currentObservers=null,s.push(r),new Ue(function(){o.currentObservers=null,Qe(s,r)}))},t.prototype._checkFinalizedStatuses=function(r){var o=this,n=o.hasError,i=o.thrownError,a=o.isStopped;n?r.error(i):a&&r.complete()},t.prototype.asObservable=function(){var r=new j;return r.source=this,r},t.create=function(r,o){return new To(r,o)},t}(j);var To=function(e){oe(t,e);function t(r,o){var n=e.call(this)||this;return n.destination=r,n.source=o,n}return t.prototype.next=function(r){var o,n;(n=(o=this.destination)===null||o===void 0?void 0:o.next)===null||n===void 0||n.call(o,r)},t.prototype.error=function(r){var o,n;(n=(o=this.destination)===null||o===void 0?void 0:o.error)===null||n===void 0||n.call(o,r)},t.prototype.complete=function(){var r,o;(o=(r=this.destination)===null||r===void 0?void 0:r.complete)===null||o===void 0||o.call(r)},t.prototype._subscribe=function(r){var o,n;return(n=(o=this.source)===null||o===void 0?void 0:o.subscribe(r))!==null&&n!==void 0?n:Tr},t}(g);var _r=function(e){oe(t,e);function t(r){var o=e.call(this)||this;return o._value=r,o}return Object.defineProperty(t.prototype,"value",{get:function(){return this.getValue()},enumerable:!1,configurable:!0}),t.prototype._subscribe=function(r){var o=e.prototype._subscribe.call(this,r);return!o.closed&&r.next(this._value),o},t.prototype.getValue=function(){var r=this,o=r.hasError,n=r.thrownError,i=r._value;if(o)throw n;return this._throwIfClosed(),i},t.prototype.next=function(r){e.prototype.next.call(this,this._value=r)},t}(g);var At={now:function(){return(At.delegate||Date).now()},delegate:void 0};var Ct=function(e){oe(t,e);function t(r,o,n){r===void 0&&(r=1/0),o===void 0&&(o=1/0),n===void 0&&(n=At);var i=e.call(this)||this;return i._bufferSize=r,i._windowTime=o,i._timestampProvider=n,i._buffer=[],i._infiniteTimeWindow=!0,i._infiniteTimeWindow=o===1/0,i._bufferSize=Math.max(1,r),i._windowTime=Math.max(1,o),i}return t.prototype.next=function(r){var o=this,n=o.isStopped,i=o._buffer,a=o._infiniteTimeWindow,s=o._timestampProvider,p=o._windowTime;n||(i.push(r),!a&&i.push(s.now()+p)),this._trimBuffer(),e.prototype.next.call(this,r)},t.prototype._subscribe=function(r){this._throwIfClosed(),this._trimBuffer();for(var o=this._innerSubscribe(r),n=this,i=n._infiniteTimeWindow,a=n._buffer,s=a.slice(),p=0;p0?e.prototype.schedule.call(this,r,o):(this.delay=o,this.state=r,this.scheduler.flush(this),this)},t.prototype.execute=function(r,o){return o>0||this.closed?e.prototype.execute.call(this,r,o):this._execute(r,o)},t.prototype.requestAsyncId=function(r,o,n){return n===void 0&&(n=0),n!=null&&n>0||n==null&&this.delay>0?e.prototype.requestAsyncId.call(this,r,o,n):(r.flush(this),0)},t}(gt);var Lo=function(e){oe(t,e);function t(){return e!==null&&e.apply(this,arguments)||this}return t}(yt);var kr=new Lo(Oo);var Mo=function(e){oe(t,e);function t(r,o){var n=e.call(this,r,o)||this;return n.scheduler=r,n.work=o,n}return t.prototype.requestAsyncId=function(r,o,n){return n===void 0&&(n=0),n!==null&&n>0?e.prototype.requestAsyncId.call(this,r,o,n):(r.actions.push(this),r._scheduled||(r._scheduled=vt.requestAnimationFrame(function(){return r.flush(void 0)})))},t.prototype.recycleAsyncId=function(r,o,n){var i;if(n===void 0&&(n=0),n!=null?n>0:this.delay>0)return e.prototype.recycleAsyncId.call(this,r,o,n);var a=r.actions;o!=null&&((i=a[a.length-1])===null||i===void 0?void 0:i.id)!==o&&(vt.cancelAnimationFrame(o),r._scheduled=void 0)},t}(gt);var _o=function(e){oe(t,e);function t(){return e!==null&&e.apply(this,arguments)||this}return t.prototype.flush=function(r){this._active=!0;var o=this._scheduled;this._scheduled=void 0;var n=this.actions,i;r=r||n.shift();do if(i=r.execute(r.state,r.delay))break;while((r=n[0])&&r.id===o&&n.shift());if(this._active=!1,i){for(;(r=n[0])&&r.id===o&&n.shift();)r.unsubscribe();throw i}},t}(yt);var me=new _o(Mo);var S=new j(function(e){return e.complete()});function Yt(e){return e&&H(e.schedule)}function Hr(e){return e[e.length-1]}function Xe(e){return H(Hr(e))?e.pop():void 0}function ke(e){return Yt(Hr(e))?e.pop():void 0}function Bt(e,t){return typeof Hr(e)=="number"?e.pop():t}var xt=function(e){return e&&typeof e.length=="number"&&typeof e!="function"};function Gt(e){return H(e==null?void 0:e.then)}function Jt(e){return H(e[bt])}function Xt(e){return Symbol.asyncIterator&&H(e==null?void 0:e[Symbol.asyncIterator])}function Zt(e){return new TypeError("You provided "+(e!==null&&typeof e=="object"?"an invalid object":"'"+e+"'")+" where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.")}function Zi(){return typeof Symbol!="function"||!Symbol.iterator?"@@iterator":Symbol.iterator}var er=Zi();function tr(e){return H(e==null?void 0:e[er])}function rr(e){return fo(this,arguments,function(){var r,o,n,i;return Nt(this,function(a){switch(a.label){case 0:r=e.getReader(),a.label=1;case 1:a.trys.push([1,,9,10]),a.label=2;case 2:return[4,nt(r.read())];case 3:return o=a.sent(),n=o.value,i=o.done,i?[4,nt(void 0)]:[3,5];case 4:return[2,a.sent()];case 5:return[4,nt(n)];case 6:return[4,a.sent()];case 7:return a.sent(),[3,2];case 8:return[3,10];case 9:return r.releaseLock(),[7];case 10:return[2]}})})}function or(e){return H(e==null?void 0:e.getReader)}function U(e){if(e instanceof j)return e;if(e!=null){if(Jt(e))return ea(e);if(xt(e))return ta(e);if(Gt(e))return ra(e);if(Xt(e))return Ao(e);if(tr(e))return oa(e);if(or(e))return na(e)}throw Zt(e)}function ea(e){return new j(function(t){var r=e[bt]();if(H(r.subscribe))return r.subscribe(t);throw new TypeError("Provided object does not correctly implement Symbol.observable")})}function ta(e){return new j(function(t){for(var r=0;r=2;return function(o){return o.pipe(e?b(function(n,i){return e(n,i,o)}):le,Te(1),r?De(t):Qo(function(){return new ir}))}}function jr(e){return e<=0?function(){return S}:E(function(t,r){var o=[];t.subscribe(T(r,function(n){o.push(n),e=2,!0))}function pe(e){e===void 0&&(e={});var t=e.connector,r=t===void 0?function(){return new g}:t,o=e.resetOnError,n=o===void 0?!0:o,i=e.resetOnComplete,a=i===void 0?!0:i,s=e.resetOnRefCountZero,p=s===void 0?!0:s;return function(c){var l,f,u,d=0,y=!1,L=!1,X=function(){f==null||f.unsubscribe(),f=void 0},te=function(){X(),l=u=void 0,y=L=!1},J=function(){var k=l;te(),k==null||k.unsubscribe()};return E(function(k,ft){d++,!L&&!y&&X();var qe=u=u!=null?u:r();ft.add(function(){d--,d===0&&!L&&!y&&(f=Ur(J,p))}),qe.subscribe(ft),!l&&d>0&&(l=new at({next:function(Fe){return qe.next(Fe)},error:function(Fe){L=!0,X(),f=Ur(te,n,Fe),qe.error(Fe)},complete:function(){y=!0,X(),f=Ur(te,a),qe.complete()}}),U(k).subscribe(l))})(c)}}function Ur(e,t){for(var r=[],o=2;oe.next(document)),e}function P(e,t=document){return Array.from(t.querySelectorAll(e))}function R(e,t=document){let r=fe(e,t);if(typeof r=="undefined")throw new ReferenceError(`Missing element: expected "${e}" to be present`);return r}function fe(e,t=document){return t.querySelector(e)||void 0}function Ie(){var e,t,r,o;return(o=(r=(t=(e=document.activeElement)==null?void 0:e.shadowRoot)==null?void 0:t.activeElement)!=null?r:document.activeElement)!=null?o:void 0}var wa=O(h(document.body,"focusin"),h(document.body,"focusout")).pipe(_e(1),Q(void 0),m(()=>Ie()||document.body),G(1));function et(e){return wa.pipe(m(t=>e.contains(t)),K())}function $t(e,t){return C(()=>O(h(e,"mouseenter").pipe(m(()=>!0)),h(e,"mouseleave").pipe(m(()=>!1))).pipe(t?Ht(r=>Le(+!r*t)):le,Q(e.matches(":hover"))))}function Jo(e,t){if(typeof t=="string"||typeof t=="number")e.innerHTML+=t.toString();else if(t instanceof Node)e.appendChild(t);else if(Array.isArray(t))for(let r of t)Jo(e,r)}function x(e,t,...r){let o=document.createElement(e);if(t)for(let n of Object.keys(t))typeof t[n]!="undefined"&&(typeof t[n]!="boolean"?o.setAttribute(n,t[n]):o.setAttribute(n,""));for(let n of r)Jo(o,n);return o}function sr(e){if(e>999){let t=+((e-950)%1e3>99);return`${((e+1e-6)/1e3).toFixed(t)}k`}else return e.toString()}function Tt(e){let t=x("script",{src:e});return C(()=>(document.head.appendChild(t),O(h(t,"load"),h(t,"error").pipe(v(()=>$r(()=>new ReferenceError(`Invalid script: ${e}`))))).pipe(m(()=>{}),_(()=>document.head.removeChild(t)),Te(1))))}var Xo=new g,Ta=C(()=>typeof ResizeObserver=="undefined"?Tt("https://unpkg.com/resize-observer-polyfill"):I(void 0)).pipe(m(()=>new ResizeObserver(e=>e.forEach(t=>Xo.next(t)))),v(e=>O(Ye,I(e)).pipe(_(()=>e.disconnect()))),G(1));function ce(e){return{width:e.offsetWidth,height:e.offsetHeight}}function ge(e){let t=e;for(;t.clientWidth===0&&t.parentElement;)t=t.parentElement;return Ta.pipe(w(r=>r.observe(t)),v(r=>Xo.pipe(b(o=>o.target===t),_(()=>r.unobserve(t)))),m(()=>ce(e)),Q(ce(e)))}function St(e){return{width:e.scrollWidth,height:e.scrollHeight}}function cr(e){let t=e.parentElement;for(;t&&(e.scrollWidth<=t.scrollWidth&&e.scrollHeight<=t.scrollHeight);)t=(e=t).parentElement;return t?e:void 0}function Zo(e){let t=[],r=e.parentElement;for(;r;)(e.clientWidth>r.clientWidth||e.clientHeight>r.clientHeight)&&t.push(r),r=(e=r).parentElement;return t.length===0&&t.push(document.documentElement),t}function Ve(e){return{x:e.offsetLeft,y:e.offsetTop}}function en(e){let t=e.getBoundingClientRect();return{x:t.x+window.scrollX,y:t.y+window.scrollY}}function tn(e){return O(h(window,"load"),h(window,"resize")).pipe(Me(0,me),m(()=>Ve(e)),Q(Ve(e)))}function pr(e){return{x:e.scrollLeft,y:e.scrollTop}}function Ne(e){return O(h(e,"scroll"),h(window,"scroll"),h(window,"resize")).pipe(Me(0,me),m(()=>pr(e)),Q(pr(e)))}var rn=new g,Sa=C(()=>I(new IntersectionObserver(e=>{for(let t of e)rn.next(t)},{threshold:0}))).pipe(v(e=>O(Ye,I(e)).pipe(_(()=>e.disconnect()))),G(1));function tt(e){return Sa.pipe(w(t=>t.observe(e)),v(t=>rn.pipe(b(({target:r})=>r===e),_(()=>t.unobserve(e)),m(({isIntersecting:r})=>r))))}function on(e,t=16){return Ne(e).pipe(m(({y:r})=>{let o=ce(e),n=St(e);return r>=n.height-o.height-t}),K())}var lr={drawer:R("[data-md-toggle=drawer]"),search:R("[data-md-toggle=search]")};function nn(e){return lr[e].checked}function Je(e,t){lr[e].checked!==t&&lr[e].click()}function ze(e){let t=lr[e];return h(t,"change").pipe(m(()=>t.checked),Q(t.checked))}function Oa(e,t){switch(e.constructor){case HTMLInputElement:return e.type==="radio"?/^Arrow/.test(t):!0;case HTMLSelectElement:case HTMLTextAreaElement:return!0;default:return e.isContentEditable}}function La(){return O(h(window,"compositionstart").pipe(m(()=>!0)),h(window,"compositionend").pipe(m(()=>!1))).pipe(Q(!1))}function an(){let e=h(window,"keydown").pipe(b(t=>!(t.metaKey||t.ctrlKey)),m(t=>({mode:nn("search")?"search":"global",type:t.key,claim(){t.preventDefault(),t.stopPropagation()}})),b(({mode:t,type:r})=>{if(t==="global"){let o=Ie();if(typeof o!="undefined")return!Oa(o,r)}return!0}),pe());return La().pipe(v(t=>t?S:e))}function ye(){return new URL(location.href)}function lt(e,t=!1){if(B("navigation.instant")&&!t){let r=x("a",{href:e.href});document.body.appendChild(r),r.click(),r.remove()}else location.href=e.href}function sn(){return new g}function cn(){return location.hash.slice(1)}function pn(e){let t=x("a",{href:e});t.addEventListener("click",r=>r.stopPropagation()),t.click()}function Ma(e){return O(h(window,"hashchange"),e).pipe(m(cn),Q(cn()),b(t=>t.length>0),G(1))}function ln(e){return Ma(e).pipe(m(t=>fe(`[id="${t}"]`)),b(t=>typeof t!="undefined"))}function Pt(e){let t=matchMedia(e);return ar(r=>t.addListener(()=>r(t.matches))).pipe(Q(t.matches))}function mn(){let e=matchMedia("print");return O(h(window,"beforeprint").pipe(m(()=>!0)),h(window,"afterprint").pipe(m(()=>!1))).pipe(Q(e.matches))}function Nr(e,t){return e.pipe(v(r=>r?t():S))}function zr(e,t){return new j(r=>{let o=new XMLHttpRequest;return o.open("GET",`${e}`),o.responseType="blob",o.addEventListener("load",()=>{o.status>=200&&o.status<300?(r.next(o.response),r.complete()):r.error(new Error(o.statusText))}),o.addEventListener("error",()=>{r.error(new Error("Network error"))}),o.addEventListener("abort",()=>{r.complete()}),typeof(t==null?void 0:t.progress$)!="undefined"&&(o.addEventListener("progress",n=>{var i;if(n.lengthComputable)t.progress$.next(n.loaded/n.total*100);else{let a=(i=o.getResponseHeader("Content-Length"))!=null?i:0;t.progress$.next(n.loaded/+a*100)}}),t.progress$.next(5)),o.send(),()=>o.abort()})}function je(e,t){return zr(e,t).pipe(v(r=>r.text()),m(r=>JSON.parse(r)),G(1))}function fn(e,t){let r=new DOMParser;return zr(e,t).pipe(v(o=>o.text()),m(o=>r.parseFromString(o,"text/html")),G(1))}function un(e,t){let r=new DOMParser;return zr(e,t).pipe(v(o=>o.text()),m(o=>r.parseFromString(o,"text/xml")),G(1))}function dn(){return{x:Math.max(0,scrollX),y:Math.max(0,scrollY)}}function hn(){return O(h(window,"scroll",{passive:!0}),h(window,"resize",{passive:!0})).pipe(m(dn),Q(dn()))}function bn(){return{width:innerWidth,height:innerHeight}}function vn(){return h(window,"resize",{passive:!0}).pipe(m(bn),Q(bn()))}function gn(){return z([hn(),vn()]).pipe(m(([e,t])=>({offset:e,size:t})),G(1))}function mr(e,{viewport$:t,header$:r}){let o=t.pipe(ee("size")),n=z([o,r]).pipe(m(()=>Ve(e)));return z([r,t,n]).pipe(m(([{height:i},{offset:a,size:s},{x:p,y:c}])=>({offset:{x:a.x-p,y:a.y-c+i},size:s})))}function _a(e){return h(e,"message",t=>t.data)}function Aa(e){let t=new g;return t.subscribe(r=>e.postMessage(r)),t}function yn(e,t=new Worker(e)){let r=_a(t),o=Aa(t),n=new g;n.subscribe(o);let i=o.pipe(Z(),ie(!0));return n.pipe(Z(),Re(r.pipe(W(i))),pe())}var Ca=R("#__config"),Ot=JSON.parse(Ca.textContent);Ot.base=`${new URL(Ot.base,ye())}`;function xe(){return Ot}function B(e){return Ot.features.includes(e)}function Ee(e,t){return typeof t!="undefined"?Ot.translations[e].replace("#",t.toString()):Ot.translations[e]}function Se(e,t=document){return R(`[data-md-component=${e}]`,t)}function ae(e,t=document){return P(`[data-md-component=${e}]`,t)}function ka(e){let t=R(".md-typeset > :first-child",e);return h(t,"click",{once:!0}).pipe(m(()=>R(".md-typeset",e)),m(r=>({hash:__md_hash(r.innerHTML)})))}function xn(e){if(!B("announce.dismiss")||!e.childElementCount)return S;if(!e.hidden){let t=R(".md-typeset",e);__md_hash(t.innerHTML)===__md_get("__announce")&&(e.hidden=!0)}return C(()=>{let t=new g;return t.subscribe(({hash:r})=>{e.hidden=!0,__md_set("__announce",r)}),ka(e).pipe(w(r=>t.next(r)),_(()=>t.complete()),m(r=>$({ref:e},r)))})}function Ha(e,{target$:t}){return t.pipe(m(r=>({hidden:r!==e})))}function En(e,t){let r=new g;return r.subscribe(({hidden:o})=>{e.hidden=o}),Ha(e,t).pipe(w(o=>r.next(o)),_(()=>r.complete()),m(o=>$({ref:e},o)))}function Rt(e,t){return t==="inline"?x("div",{class:"md-tooltip md-tooltip--inline",id:e,role:"tooltip"},x("div",{class:"md-tooltip__inner md-typeset"})):x("div",{class:"md-tooltip",id:e,role:"tooltip"},x("div",{class:"md-tooltip__inner md-typeset"}))}function wn(...e){return x("div",{class:"md-tooltip2",role:"tooltip"},x("div",{class:"md-tooltip2__inner md-typeset"},e))}function Tn(e,t){if(t=t?`${t}_annotation_${e}`:void 0,t){let r=t?`#${t}`:void 0;return x("aside",{class:"md-annotation",tabIndex:0},Rt(t),x("a",{href:r,class:"md-annotation__index",tabIndex:-1},x("span",{"data-md-annotation-id":e})))}else return x("aside",{class:"md-annotation",tabIndex:0},Rt(t),x("span",{class:"md-annotation__index",tabIndex:-1},x("span",{"data-md-annotation-id":e})))}function Sn(e){return x("button",{class:"md-clipboard md-icon",title:Ee("clipboard.copy"),"data-clipboard-target":`#${e} > code`})}var Ln=Mt(qr());function Qr(e,t){let r=t&2,o=t&1,n=Object.keys(e.terms).filter(p=>!e.terms[p]).reduce((p,c)=>[...p,x("del",null,(0,Ln.default)(c))," "],[]).slice(0,-1),i=xe(),a=new URL(e.location,i.base);B("search.highlight")&&a.searchParams.set("h",Object.entries(e.terms).filter(([,p])=>p).reduce((p,[c])=>`${p} ${c}`.trim(),""));let{tags:s}=xe();return x("a",{href:`${a}`,class:"md-search-result__link",tabIndex:-1},x("article",{class:"md-search-result__article md-typeset","data-md-score":e.score.toFixed(2)},r>0&&x("div",{class:"md-search-result__icon md-icon"}),r>0&&x("h1",null,e.title),r<=0&&x("h2",null,e.title),o>0&&e.text.length>0&&e.text,e.tags&&x("nav",{class:"md-tags"},e.tags.map(p=>{let c=s?p in s?`md-tag-icon md-tag--${s[p]}`:"md-tag-icon":"";return x("span",{class:`md-tag ${c}`},p)})),o>0&&n.length>0&&x("p",{class:"md-search-result__terms"},Ee("search.result.term.missing"),": ",...n)))}function Mn(e){let t=e[0].score,r=[...e],o=xe(),n=r.findIndex(l=>!`${new URL(l.location,o.base)}`.includes("#")),[i]=r.splice(n,1),a=r.findIndex(l=>l.scoreQr(l,1)),...p.length?[x("details",{class:"md-search-result__more"},x("summary",{tabIndex:-1},x("div",null,p.length>0&&p.length===1?Ee("search.result.more.one"):Ee("search.result.more.other",p.length))),...p.map(l=>Qr(l,1)))]:[]];return x("li",{class:"md-search-result__item"},c)}function _n(e){return x("ul",{class:"md-source__facts"},Object.entries(e).map(([t,r])=>x("li",{class:`md-source__fact md-source__fact--${t}`},typeof r=="number"?sr(r):r)))}function Kr(e){let t=`tabbed-control tabbed-control--${e}`;return x("div",{class:t,hidden:!0},x("button",{class:"tabbed-button",tabIndex:-1,"aria-hidden":"true"}))}function An(e){return x("div",{class:"md-typeset__scrollwrap"},x("div",{class:"md-typeset__table"},e))}function Ra(e){var o;let t=xe(),r=new URL(`../${e.version}/`,t.base);return x("li",{class:"md-version__item"},x("a",{href:`${r}`,class:"md-version__link"},e.title,((o=t.version)==null?void 0:o.alias)&&e.aliases.length>0&&x("span",{class:"md-version__alias"},e.aliases[0])))}function Cn(e,t){var o;let r=xe();return e=e.filter(n=>{var i;return!((i=n.properties)!=null&&i.hidden)}),x("div",{class:"md-version"},x("button",{class:"md-version__current","aria-label":Ee("select.version")},t.title,((o=r.version)==null?void 0:o.alias)&&t.aliases.length>0&&x("span",{class:"md-version__alias"},t.aliases[0])),x("ul",{class:"md-version__list"},e.map(Ra)))}var Ia=0;function ja(e){let t=z([et(e),$t(e)]).pipe(m(([o,n])=>o||n),K()),r=C(()=>Zo(e)).pipe(ne(Ne),pt(1),He(t),m(()=>en(e)));return t.pipe(Ae(o=>o),v(()=>z([t,r])),m(([o,n])=>({active:o,offset:n})),pe())}function Fa(e,t){let{content$:r,viewport$:o}=t,n=`__tooltip2_${Ia++}`;return C(()=>{let i=new g,a=new _r(!1);i.pipe(Z(),ie(!1)).subscribe(a);let s=a.pipe(Ht(c=>Le(+!c*250,kr)),K(),v(c=>c?r:S),w(c=>c.id=n),pe());z([i.pipe(m(({active:c})=>c)),s.pipe(v(c=>$t(c,250)),Q(!1))]).pipe(m(c=>c.some(l=>l))).subscribe(a);let p=a.pipe(b(c=>c),re(s,o),m(([c,l,{size:f}])=>{let u=e.getBoundingClientRect(),d=u.width/2;if(l.role==="tooltip")return{x:d,y:8+u.height};if(u.y>=f.height/2){let{height:y}=ce(l);return{x:d,y:-16-y}}else return{x:d,y:16+u.height}}));return z([s,i,p]).subscribe(([c,{offset:l},f])=>{c.style.setProperty("--md-tooltip-host-x",`${l.x}px`),c.style.setProperty("--md-tooltip-host-y",`${l.y}px`),c.style.setProperty("--md-tooltip-x",`${f.x}px`),c.style.setProperty("--md-tooltip-y",`${f.y}px`),c.classList.toggle("md-tooltip2--top",f.y<0),c.classList.toggle("md-tooltip2--bottom",f.y>=0)}),a.pipe(b(c=>c),re(s,(c,l)=>l),b(c=>c.role==="tooltip")).subscribe(c=>{let l=ce(R(":scope > *",c));c.style.setProperty("--md-tooltip-width",`${l.width}px`),c.style.setProperty("--md-tooltip-tail","0px")}),a.pipe(K(),ve(me),re(s)).subscribe(([c,l])=>{l.classList.toggle("md-tooltip2--active",c)}),z([a.pipe(b(c=>c)),s]).subscribe(([c,l])=>{l.role==="dialog"?(e.setAttribute("aria-controls",n),e.setAttribute("aria-haspopup","dialog")):e.setAttribute("aria-describedby",n)}),a.pipe(b(c=>!c)).subscribe(()=>{e.removeAttribute("aria-controls"),e.removeAttribute("aria-describedby"),e.removeAttribute("aria-haspopup")}),ja(e).pipe(w(c=>i.next(c)),_(()=>i.complete()),m(c=>$({ref:e},c)))})}function mt(e,{viewport$:t},r=document.body){return Fa(e,{content$:new j(o=>{let n=e.title,i=wn(n);return o.next(i),e.removeAttribute("title"),r.append(i),()=>{i.remove(),e.setAttribute("title",n)}}),viewport$:t})}function Ua(e,t){let r=C(()=>z([tn(e),Ne(t)])).pipe(m(([{x:o,y:n},i])=>{let{width:a,height:s}=ce(e);return{x:o-i.x+a/2,y:n-i.y+s/2}}));return et(e).pipe(v(o=>r.pipe(m(n=>({active:o,offset:n})),Te(+!o||1/0))))}function kn(e,t,{target$:r}){let[o,n]=Array.from(e.children);return C(()=>{let i=new g,a=i.pipe(Z(),ie(!0));return i.subscribe({next({offset:s}){e.style.setProperty("--md-tooltip-x",`${s.x}px`),e.style.setProperty("--md-tooltip-y",`${s.y}px`)},complete(){e.style.removeProperty("--md-tooltip-x"),e.style.removeProperty("--md-tooltip-y")}}),tt(e).pipe(W(a)).subscribe(s=>{e.toggleAttribute("data-md-visible",s)}),O(i.pipe(b(({active:s})=>s)),i.pipe(_e(250),b(({active:s})=>!s))).subscribe({next({active:s}){s?e.prepend(o):o.remove()},complete(){e.prepend(o)}}),i.pipe(Me(16,me)).subscribe(({active:s})=>{o.classList.toggle("md-tooltip--active",s)}),i.pipe(pt(125,me),b(()=>!!e.offsetParent),m(()=>e.offsetParent.getBoundingClientRect()),m(({x:s})=>s)).subscribe({next(s){s?e.style.setProperty("--md-tooltip-0",`${-s}px`):e.style.removeProperty("--md-tooltip-0")},complete(){e.style.removeProperty("--md-tooltip-0")}}),h(n,"click").pipe(W(a),b(s=>!(s.metaKey||s.ctrlKey))).subscribe(s=>{s.stopPropagation(),s.preventDefault()}),h(n,"mousedown").pipe(W(a),re(i)).subscribe(([s,{active:p}])=>{var c;if(s.button!==0||s.metaKey||s.ctrlKey)s.preventDefault();else if(p){s.preventDefault();let l=e.parentElement.closest(".md-annotation");l instanceof HTMLElement?l.focus():(c=Ie())==null||c.blur()}}),r.pipe(W(a),b(s=>s===o),Ge(125)).subscribe(()=>e.focus()),Ua(e,t).pipe(w(s=>i.next(s)),_(()=>i.complete()),m(s=>$({ref:e},s)))})}function Wa(e){return e.tagName==="CODE"?P(".c, .c1, .cm",e):[e]}function Da(e){let t=[];for(let r of Wa(e)){let o=[],n=document.createNodeIterator(r,NodeFilter.SHOW_TEXT);for(let i=n.nextNode();i;i=n.nextNode())o.push(i);for(let i of o){let a;for(;a=/(\(\d+\))(!)?/.exec(i.textContent);){let[,s,p]=a;if(typeof p=="undefined"){let c=i.splitText(a.index);i=c.splitText(s.length),t.push(c)}else{i.textContent=s,t.push(i);break}}}}return t}function Hn(e,t){t.append(...Array.from(e.childNodes))}function fr(e,t,{target$:r,print$:o}){let n=t.closest("[id]"),i=n==null?void 0:n.id,a=new Map;for(let s of Da(t)){let[,p]=s.textContent.match(/\((\d+)\)/);fe(`:scope > li:nth-child(${p})`,e)&&(a.set(p,Tn(p,i)),s.replaceWith(a.get(p)))}return a.size===0?S:C(()=>{let s=new g,p=s.pipe(Z(),ie(!0)),c=[];for(let[l,f]of a)c.push([R(".md-typeset",f),R(`:scope > li:nth-child(${l})`,e)]);return o.pipe(W(p)).subscribe(l=>{e.hidden=!l,e.classList.toggle("md-annotation-list",l);for(let[f,u]of c)l?Hn(f,u):Hn(u,f)}),O(...[...a].map(([,l])=>kn(l,t,{target$:r}))).pipe(_(()=>s.complete()),pe())})}function $n(e){if(e.nextElementSibling){let t=e.nextElementSibling;if(t.tagName==="OL")return t;if(t.tagName==="P"&&!t.children.length)return $n(t)}}function Pn(e,t){return C(()=>{let r=$n(e);return typeof r!="undefined"?fr(r,e,t):S})}var Rn=Mt(Br());var Va=0;function In(e){if(e.nextElementSibling){let t=e.nextElementSibling;if(t.tagName==="OL")return t;if(t.tagName==="P"&&!t.children.length)return In(t)}}function Na(e){return ge(e).pipe(m(({width:t})=>({scrollable:St(e).width>t})),ee("scrollable"))}function jn(e,t){let{matches:r}=matchMedia("(hover)"),o=C(()=>{let n=new g,i=n.pipe(jr(1));n.subscribe(({scrollable:c})=>{c&&r?e.setAttribute("tabindex","0"):e.removeAttribute("tabindex")});let a=[];if(Rn.default.isSupported()&&(e.closest(".copy")||B("content.code.copy")&&!e.closest(".no-copy"))){let c=e.closest("pre");c.id=`__code_${Va++}`;let l=Sn(c.id);c.insertBefore(l,e),B("content.tooltips")&&a.push(mt(l,{viewport$}))}let s=e.closest(".highlight");if(s instanceof HTMLElement){let c=In(s);if(typeof c!="undefined"&&(s.classList.contains("annotate")||B("content.code.annotate"))){let l=fr(c,e,t);a.push(ge(s).pipe(W(i),m(({width:f,height:u})=>f&&u),K(),v(f=>f?l:S)))}}return P(":scope > span[id]",e).length&&e.classList.add("md-code__content"),Na(e).pipe(w(c=>n.next(c)),_(()=>n.complete()),m(c=>$({ref:e},c)),Re(...a))});return B("content.lazy")?tt(e).pipe(b(n=>n),Te(1),v(()=>o)):o}function za(e,{target$:t,print$:r}){let o=!0;return O(t.pipe(m(n=>n.closest("details:not([open])")),b(n=>e===n),m(()=>({action:"open",reveal:!0}))),r.pipe(b(n=>n||!o),w(()=>o=e.open),m(n=>({action:n?"open":"close"}))))}function Fn(e,t){return C(()=>{let r=new g;return r.subscribe(({action:o,reveal:n})=>{e.toggleAttribute("open",o==="open"),n&&e.scrollIntoView()}),za(e,t).pipe(w(o=>r.next(o)),_(()=>r.complete()),m(o=>$({ref:e},o)))})}var Un=".node circle,.node ellipse,.node path,.node polygon,.node rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}marker{fill:var(--md-mermaid-edge-color)!important}.edgeLabel .label rect{fill:#0000}.flowchartTitleText{fill:var(--md-mermaid-label-fg-color)}.label{color:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.label foreignObject{line-height:normal;overflow:visible}.label div .edgeLabel{color:var(--md-mermaid-label-fg-color)}.edgeLabel,.edgeLabel p,.label div .edgeLabel{background-color:var(--md-mermaid-label-bg-color)}.edgeLabel,.edgeLabel p{fill:var(--md-mermaid-label-bg-color);color:var(--md-mermaid-edge-color)}.edgePath .path,.flowchart-link{stroke:var(--md-mermaid-edge-color);stroke-width:.05rem}.edgePath .arrowheadPath{fill:var(--md-mermaid-edge-color);stroke:none}.cluster rect{fill:var(--md-default-fg-color--lightest);stroke:var(--md-default-fg-color--lighter)}.cluster span{color:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}g #flowchart-circleEnd,g #flowchart-circleStart,g #flowchart-crossEnd,g #flowchart-crossStart,g #flowchart-pointEnd,g #flowchart-pointStart{stroke:none}.classDiagramTitleText{fill:var(--md-mermaid-label-fg-color)}g.classGroup line,g.classGroup rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}g.classGroup text{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.classLabel .box{fill:var(--md-mermaid-label-bg-color);background-color:var(--md-mermaid-label-bg-color);opacity:1}.classLabel .label{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.node .divider{stroke:var(--md-mermaid-node-fg-color)}.relation{stroke:var(--md-mermaid-edge-color)}.cardinality{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.cardinality text{fill:inherit!important}defs #classDiagram-compositionEnd,defs #classDiagram-compositionStart,defs #classDiagram-dependencyEnd,defs #classDiagram-dependencyStart,defs #classDiagram-extensionEnd,defs #classDiagram-extensionStart{fill:var(--md-mermaid-edge-color)!important;stroke:var(--md-mermaid-edge-color)!important}defs #classDiagram-aggregationEnd,defs #classDiagram-aggregationStart{fill:var(--md-mermaid-label-bg-color)!important;stroke:var(--md-mermaid-edge-color)!important}.statediagramTitleText{fill:var(--md-mermaid-label-fg-color)}g.stateGroup rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}g.stateGroup .state-title{fill:var(--md-mermaid-label-fg-color)!important;font-family:var(--md-mermaid-font-family)}g.stateGroup .composit{fill:var(--md-mermaid-label-bg-color)}.nodeLabel,.nodeLabel p{color:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}a .nodeLabel{text-decoration:underline}.node circle.state-end,.node circle.state-start,.start-state{fill:var(--md-mermaid-edge-color);stroke:none}.end-state-inner,.end-state-outer{fill:var(--md-mermaid-edge-color)}.end-state-inner,.node circle.state-end{stroke:var(--md-mermaid-label-bg-color)}.transition{stroke:var(--md-mermaid-edge-color)}[id^=state-fork] rect,[id^=state-join] rect{fill:var(--md-mermaid-edge-color)!important;stroke:none!important}.statediagram-cluster.statediagram-cluster .inner{fill:var(--md-default-bg-color)}.statediagram-cluster rect{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}.statediagram-state rect.divider{fill:var(--md-default-fg-color--lightest);stroke:var(--md-default-fg-color--lighter)}defs #statediagram-barbEnd{stroke:var(--md-mermaid-edge-color)}.entityTitleText{fill:var(--md-mermaid-label-fg-color)}.attributeBoxEven,.attributeBoxOdd{fill:var(--md-mermaid-node-bg-color);stroke:var(--md-mermaid-node-fg-color)}.entityBox{fill:var(--md-mermaid-label-bg-color);stroke:var(--md-mermaid-node-fg-color)}.entityLabel{fill:var(--md-mermaid-label-fg-color);font-family:var(--md-mermaid-font-family)}.relationshipLabelBox{fill:var(--md-mermaid-label-bg-color);fill-opacity:1;background-color:var(--md-mermaid-label-bg-color);opacity:1}.relationshipLabel{fill:var(--md-mermaid-label-fg-color)}.relationshipLine{stroke:var(--md-mermaid-edge-color)}defs #ONE_OR_MORE_END *,defs #ONE_OR_MORE_START *,defs #ONLY_ONE_END *,defs #ONLY_ONE_START *,defs #ZERO_OR_MORE_END *,defs #ZERO_OR_MORE_START *,defs #ZERO_OR_ONE_END *,defs #ZERO_OR_ONE_START *{stroke:var(--md-mermaid-edge-color)!important}defs #ZERO_OR_MORE_END circle,defs #ZERO_OR_MORE_START circle{fill:var(--md-mermaid-label-bg-color)}text:not([class]):last-child{fill:var(--md-mermaid-label-fg-color)}.actor{fill:var(--md-mermaid-sequence-actor-bg-color);stroke:var(--md-mermaid-sequence-actor-border-color)}text.actor>tspan{fill:var(--md-mermaid-sequence-actor-fg-color);font-family:var(--md-mermaid-font-family)}line{stroke:var(--md-mermaid-sequence-actor-line-color)}.actor-man circle,.actor-man line{fill:var(--md-mermaid-sequence-actorman-bg-color);stroke:var(--md-mermaid-sequence-actorman-line-color)}.messageLine0,.messageLine1{stroke:var(--md-mermaid-sequence-message-line-color)}.note{fill:var(--md-mermaid-sequence-note-bg-color);stroke:var(--md-mermaid-sequence-note-border-color)}.loopText,.loopText>tspan,.messageText,.noteText>tspan{stroke:none;font-family:var(--md-mermaid-font-family)!important}.messageText{fill:var(--md-mermaid-sequence-message-fg-color)}.loopText,.loopText>tspan{fill:var(--md-mermaid-sequence-loop-fg-color)}.noteText>tspan{fill:var(--md-mermaid-sequence-note-fg-color)}#arrowhead path{fill:var(--md-mermaid-sequence-message-line-color);stroke:none}.loopLine{fill:var(--md-mermaid-sequence-loop-bg-color);stroke:var(--md-mermaid-sequence-loop-border-color)}.labelBox{fill:var(--md-mermaid-sequence-label-bg-color);stroke:none}.labelText,.labelText>span{fill:var(--md-mermaid-sequence-label-fg-color);font-family:var(--md-mermaid-font-family)}.sequenceNumber{fill:var(--md-mermaid-sequence-number-fg-color)}rect.rect{fill:var(--md-mermaid-sequence-box-bg-color);stroke:none}rect.rect+text.text{fill:var(--md-mermaid-sequence-box-fg-color)}defs #sequencenumber{fill:var(--md-mermaid-sequence-number-bg-color)!important}";var Gr,Qa=0;function Ka(){return typeof mermaid=="undefined"||mermaid instanceof Element?Tt("https://unpkg.com/mermaid@11/dist/mermaid.min.js"):I(void 0)}function Wn(e){return e.classList.remove("mermaid"),Gr||(Gr=Ka().pipe(w(()=>mermaid.initialize({startOnLoad:!1,themeCSS:Un,sequence:{actorFontSize:"16px",messageFontSize:"16px",noteFontSize:"16px"}})),m(()=>{}),G(1))),Gr.subscribe(()=>co(this,null,function*(){e.classList.add("mermaid");let t=`__mermaid_${Qa++}`,r=x("div",{class:"mermaid"}),o=e.textContent,{svg:n,fn:i}=yield mermaid.render(t,o),a=r.attachShadow({mode:"closed"});a.innerHTML=n,e.replaceWith(r),i==null||i(a)})),Gr.pipe(m(()=>({ref:e})))}var Dn=x("table");function Vn(e){return e.replaceWith(Dn),Dn.replaceWith(An(e)),I({ref:e})}function Ya(e){let t=e.find(r=>r.checked)||e[0];return O(...e.map(r=>h(r,"change").pipe(m(()=>R(`label[for="${r.id}"]`))))).pipe(Q(R(`label[for="${t.id}"]`)),m(r=>({active:r})))}function Nn(e,{viewport$:t,target$:r}){let o=R(".tabbed-labels",e),n=P(":scope > input",e),i=Kr("prev");e.append(i);let a=Kr("next");return e.append(a),C(()=>{let s=new g,p=s.pipe(Z(),ie(!0));z([s,ge(e),tt(e)]).pipe(W(p),Me(1,me)).subscribe({next([{active:c},l]){let f=Ve(c),{width:u}=ce(c);e.style.setProperty("--md-indicator-x",`${f.x}px`),e.style.setProperty("--md-indicator-width",`${u}px`);let d=pr(o);(f.xd.x+l.width)&&o.scrollTo({left:Math.max(0,f.x-16),behavior:"smooth"})},complete(){e.style.removeProperty("--md-indicator-x"),e.style.removeProperty("--md-indicator-width")}}),z([Ne(o),ge(o)]).pipe(W(p)).subscribe(([c,l])=>{let f=St(o);i.hidden=c.x<16,a.hidden=c.x>f.width-l.width-16}),O(h(i,"click").pipe(m(()=>-1)),h(a,"click").pipe(m(()=>1))).pipe(W(p)).subscribe(c=>{let{width:l}=ce(o);o.scrollBy({left:l*c,behavior:"smooth"})}),r.pipe(W(p),b(c=>n.includes(c))).subscribe(c=>c.click()),o.classList.add("tabbed-labels--linked");for(let c of n){let l=R(`label[for="${c.id}"]`);l.replaceChildren(x("a",{href:`#${l.htmlFor}`,tabIndex:-1},...Array.from(l.childNodes))),h(l.firstElementChild,"click").pipe(W(p),b(f=>!(f.metaKey||f.ctrlKey)),w(f=>{f.preventDefault(),f.stopPropagation()})).subscribe(()=>{history.replaceState({},"",`#${l.htmlFor}`),l.click()})}return B("content.tabs.link")&&s.pipe(Ce(1),re(t)).subscribe(([{active:c},{offset:l}])=>{let f=c.innerText.trim();if(c.hasAttribute("data-md-switching"))c.removeAttribute("data-md-switching");else{let u=e.offsetTop-l.y;for(let y of P("[data-tabs]"))for(let L of P(":scope > input",y)){let X=R(`label[for="${L.id}"]`);if(X!==c&&X.innerText.trim()===f){X.setAttribute("data-md-switching",""),L.click();break}}window.scrollTo({top:e.offsetTop-u});let d=__md_get("__tabs")||[];__md_set("__tabs",[...new Set([f,...d])])}}),s.pipe(W(p)).subscribe(()=>{for(let c of P("audio, video",e))c.pause()}),Ya(n).pipe(w(c=>s.next(c)),_(()=>s.complete()),m(c=>$({ref:e},c)))}).pipe(Ke(se))}function zn(e,{viewport$:t,target$:r,print$:o}){return O(...P(".annotate:not(.highlight)",e).map(n=>Pn(n,{target$:r,print$:o})),...P("pre:not(.mermaid) > code",e).map(n=>jn(n,{target$:r,print$:o})),...P("pre.mermaid",e).map(n=>Wn(n)),...P("table:not([class])",e).map(n=>Vn(n)),...P("details",e).map(n=>Fn(n,{target$:r,print$:o})),...P("[data-tabs]",e).map(n=>Nn(n,{viewport$:t,target$:r})),...P("[title]",e).filter(()=>B("content.tooltips")).map(n=>mt(n,{viewport$:t})))}function Ba(e,{alert$:t}){return t.pipe(v(r=>O(I(!0),I(!1).pipe(Ge(2e3))).pipe(m(o=>({message:r,active:o})))))}function qn(e,t){let r=R(".md-typeset",e);return C(()=>{let o=new g;return o.subscribe(({message:n,active:i})=>{e.classList.toggle("md-dialog--active",i),r.textContent=n}),Ba(e,t).pipe(w(n=>o.next(n)),_(()=>o.complete()),m(n=>$({ref:e},n)))})}var Ga=0;function Ja(e,t){document.body.append(e);let{width:r}=ce(e);e.style.setProperty("--md-tooltip-width",`${r}px`),e.remove();let o=cr(t),n=typeof o!="undefined"?Ne(o):I({x:0,y:0}),i=O(et(t),$t(t)).pipe(K());return z([i,n]).pipe(m(([a,s])=>{let{x:p,y:c}=Ve(t),l=ce(t),f=t.closest("table");return f&&t.parentElement&&(p+=f.offsetLeft+t.parentElement.offsetLeft,c+=f.offsetTop+t.parentElement.offsetTop),{active:a,offset:{x:p-s.x+l.width/2-r/2,y:c-s.y+l.height+8}}}))}function Qn(e){let t=e.title;if(!t.length)return S;let r=`__tooltip_${Ga++}`,o=Rt(r,"inline"),n=R(".md-typeset",o);return n.innerHTML=t,C(()=>{let i=new g;return i.subscribe({next({offset:a}){o.style.setProperty("--md-tooltip-x",`${a.x}px`),o.style.setProperty("--md-tooltip-y",`${a.y}px`)},complete(){o.style.removeProperty("--md-tooltip-x"),o.style.removeProperty("--md-tooltip-y")}}),O(i.pipe(b(({active:a})=>a)),i.pipe(_e(250),b(({active:a})=>!a))).subscribe({next({active:a}){a?(e.insertAdjacentElement("afterend",o),e.setAttribute("aria-describedby",r),e.removeAttribute("title")):(o.remove(),e.removeAttribute("aria-describedby"),e.setAttribute("title",t))},complete(){o.remove(),e.removeAttribute("aria-describedby"),e.setAttribute("title",t)}}),i.pipe(Me(16,me)).subscribe(({active:a})=>{o.classList.toggle("md-tooltip--active",a)}),i.pipe(pt(125,me),b(()=>!!e.offsetParent),m(()=>e.offsetParent.getBoundingClientRect()),m(({x:a})=>a)).subscribe({next(a){a?o.style.setProperty("--md-tooltip-0",`${-a}px`):o.style.removeProperty("--md-tooltip-0")},complete(){o.style.removeProperty("--md-tooltip-0")}}),Ja(o,e).pipe(w(a=>i.next(a)),_(()=>i.complete()),m(a=>$({ref:e},a)))}).pipe(Ke(se))}function Xa({viewport$:e}){if(!B("header.autohide"))return I(!1);let t=e.pipe(m(({offset:{y:n}})=>n),Be(2,1),m(([n,i])=>[nMath.abs(i-n.y)>100),m(([,[n]])=>n),K()),o=ze("search");return z([e,o]).pipe(m(([{offset:n},i])=>n.y>400&&!i),K(),v(n=>n?r:I(!1)),Q(!1))}function Kn(e,t){return C(()=>z([ge(e),Xa(t)])).pipe(m(([{height:r},o])=>({height:r,hidden:o})),K((r,o)=>r.height===o.height&&r.hidden===o.hidden),G(1))}function Yn(e,{header$:t,main$:r}){return C(()=>{let o=new g,n=o.pipe(Z(),ie(!0));o.pipe(ee("active"),He(t)).subscribe(([{active:a},{hidden:s}])=>{e.classList.toggle("md-header--shadow",a&&!s),e.hidden=s});let i=ue(P("[title]",e)).pipe(b(()=>B("content.tooltips")),ne(a=>Qn(a)));return r.subscribe(o),t.pipe(W(n),m(a=>$({ref:e},a)),Re(i.pipe(W(n))))})}function Za(e,{viewport$:t,header$:r}){return mr(e,{viewport$:t,header$:r}).pipe(m(({offset:{y:o}})=>{let{height:n}=ce(e);return{active:o>=n}}),ee("active"))}function Bn(e,t){return C(()=>{let r=new g;r.subscribe({next({active:n}){e.classList.toggle("md-header__title--active",n)},complete(){e.classList.remove("md-header__title--active")}});let o=fe(".md-content h1");return typeof o=="undefined"?S:Za(o,t).pipe(w(n=>r.next(n)),_(()=>r.complete()),m(n=>$({ref:e},n)))})}function Gn(e,{viewport$:t,header$:r}){let o=r.pipe(m(({height:i})=>i),K()),n=o.pipe(v(()=>ge(e).pipe(m(({height:i})=>({top:e.offsetTop,bottom:e.offsetTop+i})),ee("bottom"))));return z([o,n,t]).pipe(m(([i,{top:a,bottom:s},{offset:{y:p},size:{height:c}}])=>(c=Math.max(0,c-Math.max(0,a-p,i)-Math.max(0,c+p-s)),{offset:a-i,height:c,active:a-i<=p})),K((i,a)=>i.offset===a.offset&&i.height===a.height&&i.active===a.active))}function es(e){let t=__md_get("__palette")||{index:e.findIndex(o=>matchMedia(o.getAttribute("data-md-color-media")).matches)},r=Math.max(0,Math.min(t.index,e.length-1));return I(...e).pipe(ne(o=>h(o,"change").pipe(m(()=>o))),Q(e[r]),m(o=>({index:e.indexOf(o),color:{media:o.getAttribute("data-md-color-media"),scheme:o.getAttribute("data-md-color-scheme"),primary:o.getAttribute("data-md-color-primary"),accent:o.getAttribute("data-md-color-accent")}})),G(1))}function Jn(e){let t=P("input",e),r=x("meta",{name:"theme-color"});document.head.appendChild(r);let o=x("meta",{name:"color-scheme"});document.head.appendChild(o);let n=Pt("(prefers-color-scheme: light)");return C(()=>{let i=new g;return i.subscribe(a=>{if(document.body.setAttribute("data-md-color-switching",""),a.color.media==="(prefers-color-scheme)"){let s=matchMedia("(prefers-color-scheme: light)"),p=document.querySelector(s.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");a.color.scheme=p.getAttribute("data-md-color-scheme"),a.color.primary=p.getAttribute("data-md-color-primary"),a.color.accent=p.getAttribute("data-md-color-accent")}for(let[s,p]of Object.entries(a.color))document.body.setAttribute(`data-md-color-${s}`,p);for(let s=0;sa.key==="Enter"),re(i,(a,s)=>s)).subscribe(({index:a})=>{a=(a+1)%t.length,t[a].click(),t[a].focus()}),i.pipe(m(()=>{let a=Se("header"),s=window.getComputedStyle(a);return o.content=s.colorScheme,s.backgroundColor.match(/\d+/g).map(p=>(+p).toString(16).padStart(2,"0")).join("")})).subscribe(a=>r.content=`#${a}`),i.pipe(ve(se)).subscribe(()=>{document.body.removeAttribute("data-md-color-switching")}),es(t).pipe(W(n.pipe(Ce(1))),ct(),w(a=>i.next(a)),_(()=>i.complete()),m(a=>$({ref:e},a)))})}function Xn(e,{progress$:t}){return C(()=>{let r=new g;return r.subscribe(({value:o})=>{e.style.setProperty("--md-progress-value",`${o}`)}),t.pipe(w(o=>r.next({value:o})),_(()=>r.complete()),m(o=>({ref:e,value:o})))})}var Jr=Mt(Br());function ts(e){e.setAttribute("data-md-copying","");let t=e.closest("[data-copy]"),r=t?t.getAttribute("data-copy"):e.innerText;return e.removeAttribute("data-md-copying"),r.trimEnd()}function Zn({alert$:e}){Jr.default.isSupported()&&new j(t=>{new Jr.default("[data-clipboard-target], [data-clipboard-text]",{text:r=>r.getAttribute("data-clipboard-text")||ts(R(r.getAttribute("data-clipboard-target")))}).on("success",r=>t.next(r))}).pipe(w(t=>{t.trigger.focus()}),m(()=>Ee("clipboard.copied"))).subscribe(e)}function ei(e,t){return e.protocol=t.protocol,e.hostname=t.hostname,e}function rs(e,t){let r=new Map;for(let o of P("url",e)){let n=R("loc",o),i=[ei(new URL(n.textContent),t)];r.set(`${i[0]}`,i);for(let a of P("[rel=alternate]",o)){let s=a.getAttribute("href");s!=null&&i.push(ei(new URL(s),t))}}return r}function ur(e){return un(new URL("sitemap.xml",e)).pipe(m(t=>rs(t,new URL(e))),de(()=>I(new Map)))}function os(e,t){if(!(e.target instanceof Element))return S;let r=e.target.closest("a");if(r===null)return S;if(r.target||e.metaKey||e.ctrlKey)return S;let o=new URL(r.href);return o.search=o.hash="",t.has(`${o}`)?(e.preventDefault(),I(new URL(r.href))):S}function ti(e){let t=new Map;for(let r of P(":scope > *",e.head))t.set(r.outerHTML,r);return t}function ri(e){for(let t of P("[href], [src]",e))for(let r of["href","src"]){let o=t.getAttribute(r);if(o&&!/^(?:[a-z]+:)?\/\//i.test(o)){t[r]=t[r];break}}return I(e)}function ns(e){for(let o of["[data-md-component=announce]","[data-md-component=container]","[data-md-component=header-topic]","[data-md-component=outdated]","[data-md-component=logo]","[data-md-component=skip]",...B("navigation.tabs.sticky")?["[data-md-component=tabs]"]:[]]){let n=fe(o),i=fe(o,e);typeof n!="undefined"&&typeof i!="undefined"&&n.replaceWith(i)}let t=ti(document);for(let[o,n]of ti(e))t.has(o)?t.delete(o):document.head.appendChild(n);for(let o of t.values()){let n=o.getAttribute("name");n!=="theme-color"&&n!=="color-scheme"&&o.remove()}let r=Se("container");return We(P("script",r)).pipe(v(o=>{let n=e.createElement("script");if(o.src){for(let i of o.getAttributeNames())n.setAttribute(i,o.getAttribute(i));return o.replaceWith(n),new j(i=>{n.onload=()=>i.complete()})}else return n.textContent=o.textContent,o.replaceWith(n),S}),Z(),ie(document))}function oi({location$:e,viewport$:t,progress$:r}){let o=xe();if(location.protocol==="file:")return S;let n=ur(o.base);I(document).subscribe(ri);let i=h(document.body,"click").pipe(He(n),v(([p,c])=>os(p,c)),pe()),a=h(window,"popstate").pipe(m(ye),pe());i.pipe(re(t)).subscribe(([p,{offset:c}])=>{history.replaceState(c,""),history.pushState(null,"",p)}),O(i,a).subscribe(e);let s=e.pipe(ee("pathname"),v(p=>fn(p,{progress$:r}).pipe(de(()=>(lt(p,!0),S)))),v(ri),v(ns),pe());return O(s.pipe(re(e,(p,c)=>c)),s.pipe(v(()=>e),ee("pathname"),v(()=>e),ee("hash")),e.pipe(K((p,c)=>p.pathname===c.pathname&&p.hash===c.hash),v(()=>i),w(()=>history.back()))).subscribe(p=>{var c,l;history.state!==null||!p.hash?window.scrollTo(0,(l=(c=history.state)==null?void 0:c.y)!=null?l:0):(history.scrollRestoration="auto",pn(p.hash),history.scrollRestoration="manual")}),e.subscribe(()=>{history.scrollRestoration="manual"}),h(window,"beforeunload").subscribe(()=>{history.scrollRestoration="auto"}),t.pipe(ee("offset"),_e(100)).subscribe(({offset:p})=>{history.replaceState(p,"")}),s}var ni=Mt(qr());function ii(e){let t=e.separator.split("|").map(n=>n.replace(/(\(\?[!=<][^)]+\))/g,"").length===0?"\uFFFD":n).join("|"),r=new RegExp(t,"img"),o=(n,i,a)=>`${i}${a}`;return n=>{n=n.replace(/[\s*+\-:~^]+/g," ").trim();let i=new RegExp(`(^|${e.separator}|)(${n.replace(/[|\\{}()[\]^$+*?.-]/g,"\\$&").replace(r,"|")})`,"img");return a=>(0,ni.default)(a).replace(i,o).replace(/<\/mark>(\s+)]*>/img,"$1")}}function jt(e){return e.type===1}function dr(e){return e.type===3}function ai(e,t){let r=yn(e);return O(I(location.protocol!=="file:"),ze("search")).pipe(Ae(o=>o),v(()=>t)).subscribe(({config:o,docs:n})=>r.next({type:0,data:{config:o,docs:n,options:{suggest:B("search.suggest")}}})),r}function si(e){var l;let{selectedVersionSitemap:t,selectedVersionBaseURL:r,currentLocation:o,currentBaseURL:n}=e,i=(l=Xr(n))==null?void 0:l.pathname;if(i===void 0)return;let a=ss(o.pathname,i);if(a===void 0)return;let s=ps(t.keys());if(!t.has(s))return;let p=Xr(a,s);if(!p||!t.has(p.href))return;let c=Xr(a,r);if(c)return c.hash=o.hash,c.search=o.search,c}function Xr(e,t){try{return new URL(e,t)}catch(r){return}}function ss(e,t){if(e.startsWith(t))return e.slice(t.length)}function cs(e,t){let r=Math.min(e.length,t.length),o;for(o=0;oS)),o=r.pipe(m(n=>{let[,i]=t.base.match(/([^/]+)\/?$/);return n.find(({version:a,aliases:s})=>a===i||s.includes(i))||n[0]}));r.pipe(m(n=>new Map(n.map(i=>[`${new URL(`../${i.version}/`,t.base)}`,i]))),v(n=>h(document.body,"click").pipe(b(i=>!i.metaKey&&!i.ctrlKey),re(o),v(([i,a])=>{if(i.target instanceof Element){let s=i.target.closest("a");if(s&&!s.target&&n.has(s.href)){let p=s.href;return!i.target.closest(".md-version")&&n.get(p)===a?S:(i.preventDefault(),I(new URL(p)))}}return S}),v(i=>ur(i).pipe(m(a=>{var s;return(s=si({selectedVersionSitemap:a,selectedVersionBaseURL:i,currentLocation:ye(),currentBaseURL:t.base}))!=null?s:i})))))).subscribe(n=>lt(n,!0)),z([r,o]).subscribe(([n,i])=>{R(".md-header__topic").appendChild(Cn(n,i))}),e.pipe(v(()=>o)).subscribe(n=>{var a;let i=__md_get("__outdated",sessionStorage);if(i===null){i=!0;let s=((a=t.version)==null?void 0:a.default)||"latest";Array.isArray(s)||(s=[s]);e:for(let p of s)for(let c of n.aliases.concat(n.version))if(new RegExp(p,"i").test(c)){i=!1;break e}__md_set("__outdated",i,sessionStorage)}if(i)for(let s of ae("outdated"))s.hidden=!1})}function ls(e,{worker$:t}){let{searchParams:r}=ye();r.has("q")&&(Je("search",!0),e.value=r.get("q"),e.focus(),ze("search").pipe(Ae(i=>!i)).subscribe(()=>{let i=ye();i.searchParams.delete("q"),history.replaceState({},"",`${i}`)}));let o=et(e),n=O(t.pipe(Ae(jt)),h(e,"keyup"),o).pipe(m(()=>e.value),K());return z([n,o]).pipe(m(([i,a])=>({value:i,focus:a})),G(1))}function pi(e,{worker$:t}){let r=new g,o=r.pipe(Z(),ie(!0));z([t.pipe(Ae(jt)),r],(i,a)=>a).pipe(ee("value")).subscribe(({value:i})=>t.next({type:2,data:i})),r.pipe(ee("focus")).subscribe(({focus:i})=>{i&&Je("search",i)}),h(e.form,"reset").pipe(W(o)).subscribe(()=>e.focus());let n=R("header [for=__search]");return h(n,"click").subscribe(()=>e.focus()),ls(e,{worker$:t}).pipe(w(i=>r.next(i)),_(()=>r.complete()),m(i=>$({ref:e},i)),G(1))}function li(e,{worker$:t,query$:r}){let o=new g,n=on(e.parentElement).pipe(b(Boolean)),i=e.parentElement,a=R(":scope > :first-child",e),s=R(":scope > :last-child",e);ze("search").subscribe(l=>s.setAttribute("role",l?"list":"presentation")),o.pipe(re(r),Wr(t.pipe(Ae(jt)))).subscribe(([{items:l},{value:f}])=>{switch(l.length){case 0:a.textContent=f.length?Ee("search.result.none"):Ee("search.result.placeholder");break;case 1:a.textContent=Ee("search.result.one");break;default:let u=sr(l.length);a.textContent=Ee("search.result.other",u)}});let p=o.pipe(w(()=>s.innerHTML=""),v(({items:l})=>O(I(...l.slice(0,10)),I(...l.slice(10)).pipe(Be(4),Vr(n),v(([f])=>f)))),m(Mn),pe());return p.subscribe(l=>s.appendChild(l)),p.pipe(ne(l=>{let f=fe("details",l);return typeof f=="undefined"?S:h(f,"toggle").pipe(W(o),m(()=>f))})).subscribe(l=>{l.open===!1&&l.offsetTop<=i.scrollTop&&i.scrollTo({top:l.offsetTop})}),t.pipe(b(dr),m(({data:l})=>l)).pipe(w(l=>o.next(l)),_(()=>o.complete()),m(l=>$({ref:e},l)))}function ms(e,{query$:t}){return t.pipe(m(({value:r})=>{let o=ye();return o.hash="",r=r.replace(/\s+/g,"+").replace(/&/g,"%26").replace(/=/g,"%3D"),o.search=`q=${r}`,{url:o}}))}function mi(e,t){let r=new g,o=r.pipe(Z(),ie(!0));return r.subscribe(({url:n})=>{e.setAttribute("data-clipboard-text",e.href),e.href=`${n}`}),h(e,"click").pipe(W(o)).subscribe(n=>n.preventDefault()),ms(e,t).pipe(w(n=>r.next(n)),_(()=>r.complete()),m(n=>$({ref:e},n)))}function fi(e,{worker$:t,keyboard$:r}){let o=new g,n=Se("search-query"),i=O(h(n,"keydown"),h(n,"focus")).pipe(ve(se),m(()=>n.value),K());return o.pipe(He(i),m(([{suggest:s},p])=>{let c=p.split(/([\s-]+)/);if(s!=null&&s.length&&c[c.length-1]){let l=s[s.length-1];l.startsWith(c[c.length-1])&&(c[c.length-1]=l)}else c.length=0;return c})).subscribe(s=>e.innerHTML=s.join("").replace(/\s/g," ")),r.pipe(b(({mode:s})=>s==="search")).subscribe(s=>{switch(s.type){case"ArrowRight":e.innerText.length&&n.selectionStart===n.value.length&&(n.value=e.innerText);break}}),t.pipe(b(dr),m(({data:s})=>s)).pipe(w(s=>o.next(s)),_(()=>o.complete()),m(()=>({ref:e})))}function ui(e,{index$:t,keyboard$:r}){let o=xe();try{let n=ai(o.search,t),i=Se("search-query",e),a=Se("search-result",e);h(e,"click").pipe(b(({target:p})=>p instanceof Element&&!!p.closest("a"))).subscribe(()=>Je("search",!1)),r.pipe(b(({mode:p})=>p==="search")).subscribe(p=>{let c=Ie();switch(p.type){case"Enter":if(c===i){let l=new Map;for(let f of P(":first-child [href]",a)){let u=f.firstElementChild;l.set(f,parseFloat(u.getAttribute("data-md-score")))}if(l.size){let[[f]]=[...l].sort(([,u],[,d])=>d-u);f.click()}p.claim()}break;case"Escape":case"Tab":Je("search",!1),i.blur();break;case"ArrowUp":case"ArrowDown":if(typeof c=="undefined")i.focus();else{let l=[i,...P(":not(details) > [href], summary, details[open] [href]",a)],f=Math.max(0,(Math.max(0,l.indexOf(c))+l.length+(p.type==="ArrowUp"?-1:1))%l.length);l[f].focus()}p.claim();break;default:i!==Ie()&&i.focus()}}),r.pipe(b(({mode:p})=>p==="global")).subscribe(p=>{switch(p.type){case"f":case"s":case"/":i.focus(),i.select(),p.claim();break}});let s=pi(i,{worker$:n});return O(s,li(a,{worker$:n,query$:s})).pipe(Re(...ae("search-share",e).map(p=>mi(p,{query$:s})),...ae("search-suggest",e).map(p=>fi(p,{worker$:n,keyboard$:r}))))}catch(n){return e.hidden=!0,Ye}}function di(e,{index$:t,location$:r}){return z([t,r.pipe(Q(ye()),b(o=>!!o.searchParams.get("h")))]).pipe(m(([o,n])=>ii(o.config)(n.searchParams.get("h"))),m(o=>{var a;let n=new Map,i=document.createNodeIterator(e,NodeFilter.SHOW_TEXT);for(let s=i.nextNode();s;s=i.nextNode())if((a=s.parentElement)!=null&&a.offsetHeight){let p=s.textContent,c=o(p);c.length>p.length&&n.set(s,c)}for(let[s,p]of n){let{childNodes:c}=x("span",null,p);s.replaceWith(...Array.from(c))}return{ref:e,nodes:n}}))}function fs(e,{viewport$:t,main$:r}){let o=e.closest(".md-grid"),n=o.offsetTop-o.parentElement.offsetTop;return z([r,t]).pipe(m(([{offset:i,height:a},{offset:{y:s}}])=>(a=a+Math.min(n,Math.max(0,s-i))-n,{height:a,locked:s>=i+n})),K((i,a)=>i.height===a.height&&i.locked===a.locked))}function Zr(e,o){var n=o,{header$:t}=n,r=so(n,["header$"]);let i=R(".md-sidebar__scrollwrap",e),{y:a}=Ve(i);return C(()=>{let s=new g,p=s.pipe(Z(),ie(!0)),c=s.pipe(Me(0,me));return c.pipe(re(t)).subscribe({next([{height:l},{height:f}]){i.style.height=`${l-2*a}px`,e.style.top=`${f}px`},complete(){i.style.height="",e.style.top=""}}),c.pipe(Ae()).subscribe(()=>{for(let l of P(".md-nav__link--active[href]",e)){if(!l.clientHeight)continue;let f=l.closest(".md-sidebar__scrollwrap");if(typeof f!="undefined"){let u=l.offsetTop-f.offsetTop,{height:d}=ce(f);f.scrollTo({top:u-d/2})}}}),ue(P("label[tabindex]",e)).pipe(ne(l=>h(l,"click").pipe(ve(se),m(()=>l),W(p)))).subscribe(l=>{let f=R(`[id="${l.htmlFor}"]`);R(`[aria-labelledby="${l.id}"]`).setAttribute("aria-expanded",`${f.checked}`)}),fs(e,r).pipe(w(l=>s.next(l)),_(()=>s.complete()),m(l=>$({ref:e},l)))})}function hi(e,t){if(typeof t!="undefined"){let r=`https://api.github.com/repos/${e}/${t}`;return st(je(`${r}/releases/latest`).pipe(de(()=>S),m(o=>({version:o.tag_name})),De({})),je(r).pipe(de(()=>S),m(o=>({stars:o.stargazers_count,forks:o.forks_count})),De({}))).pipe(m(([o,n])=>$($({},o),n)))}else{let r=`https://api.github.com/users/${e}`;return je(r).pipe(m(o=>({repositories:o.public_repos})),De({}))}}function bi(e,t){let r=`https://${e}/api/v4/projects/${encodeURIComponent(t)}`;return st(je(`${r}/releases/permalink/latest`).pipe(de(()=>S),m(({tag_name:o})=>({version:o})),De({})),je(r).pipe(de(()=>S),m(({star_count:o,forks_count:n})=>({stars:o,forks:n})),De({}))).pipe(m(([o,n])=>$($({},o),n)))}function vi(e){let t=e.match(/^.+github\.com\/([^/]+)\/?([^/]+)?/i);if(t){let[,r,o]=t;return hi(r,o)}if(t=e.match(/^.+?([^/]*gitlab[^/]+)\/(.+?)\/?$/i),t){let[,r,o]=t;return bi(r,o)}return S}var us;function ds(e){return us||(us=C(()=>{let t=__md_get("__source",sessionStorage);if(t)return I(t);if(ae("consent").length){let o=__md_get("__consent");if(!(o&&o.github))return S}return vi(e.href).pipe(w(o=>__md_set("__source",o,sessionStorage)))}).pipe(de(()=>S),b(t=>Object.keys(t).length>0),m(t=>({facts:t})),G(1)))}function gi(e){let t=R(":scope > :last-child",e);return C(()=>{let r=new g;return r.subscribe(({facts:o})=>{t.appendChild(_n(o)),t.classList.add("md-source__repository--active")}),ds(e).pipe(w(o=>r.next(o)),_(()=>r.complete()),m(o=>$({ref:e},o)))})}function hs(e,{viewport$:t,header$:r}){return ge(document.body).pipe(v(()=>mr(e,{header$:r,viewport$:t})),m(({offset:{y:o}})=>({hidden:o>=10})),ee("hidden"))}function yi(e,t){return C(()=>{let r=new g;return r.subscribe({next({hidden:o}){e.hidden=o},complete(){e.hidden=!1}}),(B("navigation.tabs.sticky")?I({hidden:!1}):hs(e,t)).pipe(w(o=>r.next(o)),_(()=>r.complete()),m(o=>$({ref:e},o)))})}function bs(e,{viewport$:t,header$:r}){let o=new Map,n=P(".md-nav__link",e);for(let s of n){let p=decodeURIComponent(s.hash.substring(1)),c=fe(`[id="${p}"]`);typeof c!="undefined"&&o.set(s,c)}let i=r.pipe(ee("height"),m(({height:s})=>{let p=Se("main"),c=R(":scope > :first-child",p);return s+.8*(c.offsetTop-p.offsetTop)}),pe());return ge(document.body).pipe(ee("height"),v(s=>C(()=>{let p=[];return I([...o].reduce((c,[l,f])=>{for(;p.length&&o.get(p[p.length-1]).tagName>=f.tagName;)p.pop();let u=f.offsetTop;for(;!u&&f.parentElement;)f=f.parentElement,u=f.offsetTop;let d=f.offsetParent;for(;d;d=d.offsetParent)u+=d.offsetTop;return c.set([...p=[...p,l]].reverse(),u)},new Map))}).pipe(m(p=>new Map([...p].sort(([,c],[,l])=>c-l))),He(i),v(([p,c])=>t.pipe(Fr(([l,f],{offset:{y:u},size:d})=>{let y=u+d.height>=Math.floor(s.height);for(;f.length;){let[,L]=f[0];if(L-c=u&&!y)f=[l.pop(),...f];else break}return[l,f]},[[],[...p]]),K((l,f)=>l[0]===f[0]&&l[1]===f[1])))))).pipe(m(([s,p])=>({prev:s.map(([c])=>c),next:p.map(([c])=>c)})),Q({prev:[],next:[]}),Be(2,1),m(([s,p])=>s.prev.length{let i=new g,a=i.pipe(Z(),ie(!0));if(i.subscribe(({prev:s,next:p})=>{for(let[c]of p)c.classList.remove("md-nav__link--passed"),c.classList.remove("md-nav__link--active");for(let[c,[l]]of s.entries())l.classList.add("md-nav__link--passed"),l.classList.toggle("md-nav__link--active",c===s.length-1)}),B("toc.follow")){let s=O(t.pipe(_e(1),m(()=>{})),t.pipe(_e(250),m(()=>"smooth")));i.pipe(b(({prev:p})=>p.length>0),He(o.pipe(ve(se))),re(s)).subscribe(([[{prev:p}],c])=>{let[l]=p[p.length-1];if(l.offsetHeight){let f=cr(l);if(typeof f!="undefined"){let u=l.offsetTop-f.offsetTop,{height:d}=ce(f);f.scrollTo({top:u-d/2,behavior:c})}}})}return B("navigation.tracking")&&t.pipe(W(a),ee("offset"),_e(250),Ce(1),W(n.pipe(Ce(1))),ct({delay:250}),re(i)).subscribe(([,{prev:s}])=>{let p=ye(),c=s[s.length-1];if(c&&c.length){let[l]=c,{hash:f}=new URL(l.href);p.hash!==f&&(p.hash=f,history.replaceState({},"",`${p}`))}else p.hash="",history.replaceState({},"",`${p}`)}),bs(e,{viewport$:t,header$:r}).pipe(w(s=>i.next(s)),_(()=>i.complete()),m(s=>$({ref:e},s)))})}function vs(e,{viewport$:t,main$:r,target$:o}){let n=t.pipe(m(({offset:{y:a}})=>a),Be(2,1),m(([a,s])=>a>s&&s>0),K()),i=r.pipe(m(({active:a})=>a));return z([i,n]).pipe(m(([a,s])=>!(a&&s)),K(),W(o.pipe(Ce(1))),ie(!0),ct({delay:250}),m(a=>({hidden:a})))}function Ei(e,{viewport$:t,header$:r,main$:o,target$:n}){let i=new g,a=i.pipe(Z(),ie(!0));return i.subscribe({next({hidden:s}){e.hidden=s,s?(e.setAttribute("tabindex","-1"),e.blur()):e.removeAttribute("tabindex")},complete(){e.style.top="",e.hidden=!0,e.removeAttribute("tabindex")}}),r.pipe(W(a),ee("height")).subscribe(({height:s})=>{e.style.top=`${s+16}px`}),h(e,"click").subscribe(s=>{s.preventDefault(),window.scrollTo({top:0})}),vs(e,{viewport$:t,main$:o,target$:n}).pipe(w(s=>i.next(s)),_(()=>i.complete()),m(s=>$({ref:e},s)))}function wi({document$:e,viewport$:t}){e.pipe(v(()=>P(".md-ellipsis")),ne(r=>tt(r).pipe(W(e.pipe(Ce(1))),b(o=>o),m(()=>r),Te(1))),b(r=>r.offsetWidth{let o=r.innerText,n=r.closest("a")||r;return n.title=o,B("content.tooltips")?mt(n,{viewport$:t}).pipe(W(e.pipe(Ce(1))),_(()=>n.removeAttribute("title"))):S})).subscribe(),B("content.tooltips")&&e.pipe(v(()=>P(".md-status")),ne(r=>mt(r,{viewport$:t}))).subscribe()}function Ti({document$:e,tablet$:t}){e.pipe(v(()=>P(".md-toggle--indeterminate")),w(r=>{r.indeterminate=!0,r.checked=!1}),ne(r=>h(r,"change").pipe(Dr(()=>r.classList.contains("md-toggle--indeterminate")),m(()=>r))),re(t)).subscribe(([r,o])=>{r.classList.remove("md-toggle--indeterminate"),o&&(r.checked=!1)})}function gs(){return/(iPad|iPhone|iPod)/.test(navigator.userAgent)}function Si({document$:e}){e.pipe(v(()=>P("[data-md-scrollfix]")),w(t=>t.removeAttribute("data-md-scrollfix")),b(gs),ne(t=>h(t,"touchstart").pipe(m(()=>t)))).subscribe(t=>{let r=t.scrollTop;r===0?t.scrollTop=1:r+t.offsetHeight===t.scrollHeight&&(t.scrollTop=r-1)})}function Oi({viewport$:e,tablet$:t}){z([ze("search"),t]).pipe(m(([r,o])=>r&&!o),v(r=>I(r).pipe(Ge(r?400:100))),re(e)).subscribe(([r,{offset:{y:o}}])=>{if(r)document.body.setAttribute("data-md-scrolllock",""),document.body.style.top=`-${o}px`;else{let n=-1*parseInt(document.body.style.top,10);document.body.removeAttribute("data-md-scrolllock"),document.body.style.top="",n&&window.scrollTo(0,n)}})}Object.entries||(Object.entries=function(e){let t=[];for(let r of Object.keys(e))t.push([r,e[r]]);return t});Object.values||(Object.values=function(e){let t=[];for(let r of Object.keys(e))t.push(e[r]);return t});typeof Element!="undefined"&&(Element.prototype.scrollTo||(Element.prototype.scrollTo=function(e,t){typeof e=="object"?(this.scrollLeft=e.left,this.scrollTop=e.top):(this.scrollLeft=e,this.scrollTop=t)}),Element.prototype.replaceWith||(Element.prototype.replaceWith=function(...e){let t=this.parentNode;if(t){e.length===0&&t.removeChild(this);for(let r=e.length-1;r>=0;r--){let o=e[r];typeof o=="string"?o=document.createTextNode(o):o.parentNode&&o.parentNode.removeChild(o),r?t.insertBefore(this.previousSibling,o):t.replaceChild(o,this)}}}));function ys(){return location.protocol==="file:"?Tt(`${new URL("search/search_index.js",eo.base)}`).pipe(m(()=>__index),G(1)):je(new URL("search/search_index.json",eo.base))}document.documentElement.classList.remove("no-js");document.documentElement.classList.add("js");var ot=Go(),Ut=sn(),Lt=ln(Ut),to=an(),Oe=gn(),hr=Pt("(min-width: 960px)"),Mi=Pt("(min-width: 1220px)"),_i=mn(),eo=xe(),Ai=document.forms.namedItem("search")?ys():Ye,ro=new g;Zn({alert$:ro});var oo=new g;B("navigation.instant")&&oi({location$:Ut,viewport$:Oe,progress$:oo}).subscribe(ot);var Li;((Li=eo.version)==null?void 0:Li.provider)==="mike"&&ci({document$:ot});O(Ut,Lt).pipe(Ge(125)).subscribe(()=>{Je("drawer",!1),Je("search",!1)});to.pipe(b(({mode:e})=>e==="global")).subscribe(e=>{switch(e.type){case"p":case",":let t=fe("link[rel=prev]");typeof t!="undefined"&<(t);break;case"n":case".":let r=fe("link[rel=next]");typeof r!="undefined"&<(r);break;case"Enter":let o=Ie();o instanceof HTMLLabelElement&&o.click()}});wi({viewport$:Oe,document$:ot});Ti({document$:ot,tablet$:hr});Si({document$:ot});Oi({viewport$:Oe,tablet$:hr});var rt=Kn(Se("header"),{viewport$:Oe}),Ft=ot.pipe(m(()=>Se("main")),v(e=>Gn(e,{viewport$:Oe,header$:rt})),G(1)),xs=O(...ae("consent").map(e=>En(e,{target$:Lt})),...ae("dialog").map(e=>qn(e,{alert$:ro})),...ae("palette").map(e=>Jn(e)),...ae("progress").map(e=>Xn(e,{progress$:oo})),...ae("search").map(e=>ui(e,{index$:Ai,keyboard$:to})),...ae("source").map(e=>gi(e))),Es=C(()=>O(...ae("announce").map(e=>xn(e)),...ae("content").map(e=>zn(e,{viewport$:Oe,target$:Lt,print$:_i})),...ae("content").map(e=>B("search.highlight")?di(e,{index$:Ai,location$:Ut}):S),...ae("header").map(e=>Yn(e,{viewport$:Oe,header$:rt,main$:Ft})),...ae("header-title").map(e=>Bn(e,{viewport$:Oe,header$:rt})),...ae("sidebar").map(e=>e.getAttribute("data-md-type")==="navigation"?Nr(Mi,()=>Zr(e,{viewport$:Oe,header$:rt,main$:Ft})):Nr(hr,()=>Zr(e,{viewport$:Oe,header$:rt,main$:Ft}))),...ae("tabs").map(e=>yi(e,{viewport$:Oe,header$:rt})),...ae("toc").map(e=>xi(e,{viewport$:Oe,header$:rt,main$:Ft,target$:Lt})),...ae("top").map(e=>Ei(e,{viewport$:Oe,header$:rt,main$:Ft,target$:Lt})))),Ci=ot.pipe(v(()=>Es),Re(xs),G(1));Ci.subscribe();window.document$=ot;window.location$=Ut;window.target$=Lt;window.keyboard$=to;window.viewport$=Oe;window.tablet$=hr;window.screen$=Mi;window.print$=_i;window.alert$=ro;window.progress$=oo;window.component$=Ci;})(); +//# sourceMappingURL=bundle.88dd0f4e.min.js.map + diff --git a/assets/javascripts/bundle.88dd0f4e.min.js.map b/assets/javascripts/bundle.88dd0f4e.min.js.map new file mode 100644 index 000000000..dab2a8754 --- /dev/null +++ b/assets/javascripts/bundle.88dd0f4e.min.js.map @@ -0,0 +1,7 @@ +{ + "version": 3, + "sources": ["node_modules/focus-visible/dist/focus-visible.js", "node_modules/escape-html/index.js", "node_modules/clipboard/dist/clipboard.js", "src/templates/assets/javascripts/bundle.ts", "node_modules/tslib/tslib.es6.mjs", "node_modules/rxjs/src/internal/util/isFunction.ts", "node_modules/rxjs/src/internal/util/createErrorClass.ts", "node_modules/rxjs/src/internal/util/UnsubscriptionError.ts", "node_modules/rxjs/src/internal/util/arrRemove.ts", "node_modules/rxjs/src/internal/Subscription.ts", "node_modules/rxjs/src/internal/config.ts", "node_modules/rxjs/src/internal/scheduler/timeoutProvider.ts", "node_modules/rxjs/src/internal/util/reportUnhandledError.ts", "node_modules/rxjs/src/internal/util/noop.ts", "node_modules/rxjs/src/internal/NotificationFactories.ts", "node_modules/rxjs/src/internal/util/errorContext.ts", "node_modules/rxjs/src/internal/Subscriber.ts", "node_modules/rxjs/src/internal/symbol/observable.ts", "node_modules/rxjs/src/internal/util/identity.ts", "node_modules/rxjs/src/internal/util/pipe.ts", "node_modules/rxjs/src/internal/Observable.ts", "node_modules/rxjs/src/internal/util/lift.ts", "node_modules/rxjs/src/internal/operators/OperatorSubscriber.ts", "node_modules/rxjs/src/internal/scheduler/animationFrameProvider.ts", "node_modules/rxjs/src/internal/util/ObjectUnsubscribedError.ts", "node_modules/rxjs/src/internal/Subject.ts", "node_modules/rxjs/src/internal/BehaviorSubject.ts", "node_modules/rxjs/src/internal/scheduler/dateTimestampProvider.ts", "node_modules/rxjs/src/internal/ReplaySubject.ts", "node_modules/rxjs/src/internal/scheduler/Action.ts", "node_modules/rxjs/src/internal/scheduler/intervalProvider.ts", "node_modules/rxjs/src/internal/scheduler/AsyncAction.ts", "node_modules/rxjs/src/internal/Scheduler.ts", "node_modules/rxjs/src/internal/scheduler/AsyncScheduler.ts", "node_modules/rxjs/src/internal/scheduler/async.ts", "node_modules/rxjs/src/internal/scheduler/QueueAction.ts", "node_modules/rxjs/src/internal/scheduler/QueueScheduler.ts", "node_modules/rxjs/src/internal/scheduler/queue.ts", "node_modules/rxjs/src/internal/scheduler/AnimationFrameAction.ts", "node_modules/rxjs/src/internal/scheduler/AnimationFrameScheduler.ts", "node_modules/rxjs/src/internal/scheduler/animationFrame.ts", "node_modules/rxjs/src/internal/observable/empty.ts", "node_modules/rxjs/src/internal/util/isScheduler.ts", "node_modules/rxjs/src/internal/util/args.ts", "node_modules/rxjs/src/internal/util/isArrayLike.ts", "node_modules/rxjs/src/internal/util/isPromise.ts", "node_modules/rxjs/src/internal/util/isInteropObservable.ts", "node_modules/rxjs/src/internal/util/isAsyncIterable.ts", "node_modules/rxjs/src/internal/util/throwUnobservableError.ts", "node_modules/rxjs/src/internal/symbol/iterator.ts", "node_modules/rxjs/src/internal/util/isIterable.ts", "node_modules/rxjs/src/internal/util/isReadableStreamLike.ts", "node_modules/rxjs/src/internal/observable/innerFrom.ts", "node_modules/rxjs/src/internal/util/executeSchedule.ts", "node_modules/rxjs/src/internal/operators/observeOn.ts", "node_modules/rxjs/src/internal/operators/subscribeOn.ts", "node_modules/rxjs/src/internal/scheduled/scheduleObservable.ts", "node_modules/rxjs/src/internal/scheduled/schedulePromise.ts", "node_modules/rxjs/src/internal/scheduled/scheduleArray.ts", "node_modules/rxjs/src/internal/scheduled/scheduleIterable.ts", "node_modules/rxjs/src/internal/scheduled/scheduleAsyncIterable.ts", "node_modules/rxjs/src/internal/scheduled/scheduleReadableStreamLike.ts", "node_modules/rxjs/src/internal/scheduled/scheduled.ts", "node_modules/rxjs/src/internal/observable/from.ts", "node_modules/rxjs/src/internal/observable/of.ts", "node_modules/rxjs/src/internal/observable/throwError.ts", "node_modules/rxjs/src/internal/util/EmptyError.ts", "node_modules/rxjs/src/internal/util/isDate.ts", "node_modules/rxjs/src/internal/operators/map.ts", "node_modules/rxjs/src/internal/util/mapOneOrManyArgs.ts", "node_modules/rxjs/src/internal/util/argsArgArrayOrObject.ts", "node_modules/rxjs/src/internal/util/createObject.ts", "node_modules/rxjs/src/internal/observable/combineLatest.ts", "node_modules/rxjs/src/internal/operators/mergeInternals.ts", "node_modules/rxjs/src/internal/operators/mergeMap.ts", "node_modules/rxjs/src/internal/operators/mergeAll.ts", "node_modules/rxjs/src/internal/operators/concatAll.ts", "node_modules/rxjs/src/internal/observable/concat.ts", "node_modules/rxjs/src/internal/observable/defer.ts", "node_modules/rxjs/src/internal/observable/fromEvent.ts", "node_modules/rxjs/src/internal/observable/fromEventPattern.ts", "node_modules/rxjs/src/internal/observable/timer.ts", "node_modules/rxjs/src/internal/observable/merge.ts", "node_modules/rxjs/src/internal/observable/never.ts", "node_modules/rxjs/src/internal/util/argsOrArgArray.ts", "node_modules/rxjs/src/internal/operators/filter.ts", "node_modules/rxjs/src/internal/observable/zip.ts", "node_modules/rxjs/src/internal/operators/audit.ts", "node_modules/rxjs/src/internal/operators/auditTime.ts", "node_modules/rxjs/src/internal/operators/bufferCount.ts", "node_modules/rxjs/src/internal/operators/catchError.ts", "node_modules/rxjs/src/internal/operators/scanInternals.ts", "node_modules/rxjs/src/internal/operators/combineLatest.ts", "node_modules/rxjs/src/internal/operators/combineLatestWith.ts", "node_modules/rxjs/src/internal/operators/debounce.ts", "node_modules/rxjs/src/internal/operators/debounceTime.ts", "node_modules/rxjs/src/internal/operators/defaultIfEmpty.ts", "node_modules/rxjs/src/internal/operators/take.ts", "node_modules/rxjs/src/internal/operators/ignoreElements.ts", "node_modules/rxjs/src/internal/operators/mapTo.ts", "node_modules/rxjs/src/internal/operators/delayWhen.ts", "node_modules/rxjs/src/internal/operators/delay.ts", "node_modules/rxjs/src/internal/operators/distinctUntilChanged.ts", "node_modules/rxjs/src/internal/operators/distinctUntilKeyChanged.ts", "node_modules/rxjs/src/internal/operators/throwIfEmpty.ts", "node_modules/rxjs/src/internal/operators/endWith.ts", "node_modules/rxjs/src/internal/operators/finalize.ts", "node_modules/rxjs/src/internal/operators/first.ts", "node_modules/rxjs/src/internal/operators/takeLast.ts", "node_modules/rxjs/src/internal/operators/merge.ts", "node_modules/rxjs/src/internal/operators/mergeWith.ts", "node_modules/rxjs/src/internal/operators/repeat.ts", "node_modules/rxjs/src/internal/operators/scan.ts", "node_modules/rxjs/src/internal/operators/share.ts", "node_modules/rxjs/src/internal/operators/shareReplay.ts", "node_modules/rxjs/src/internal/operators/skip.ts", "node_modules/rxjs/src/internal/operators/skipUntil.ts", "node_modules/rxjs/src/internal/operators/startWith.ts", "node_modules/rxjs/src/internal/operators/switchMap.ts", "node_modules/rxjs/src/internal/operators/takeUntil.ts", "node_modules/rxjs/src/internal/operators/takeWhile.ts", "node_modules/rxjs/src/internal/operators/tap.ts", "node_modules/rxjs/src/internal/operators/throttle.ts", "node_modules/rxjs/src/internal/operators/throttleTime.ts", "node_modules/rxjs/src/internal/operators/withLatestFrom.ts", "node_modules/rxjs/src/internal/operators/zip.ts", "node_modules/rxjs/src/internal/operators/zipWith.ts", "src/templates/assets/javascripts/browser/document/index.ts", "src/templates/assets/javascripts/browser/element/_/index.ts", "src/templates/assets/javascripts/browser/element/focus/index.ts", "src/templates/assets/javascripts/browser/element/hover/index.ts", "src/templates/assets/javascripts/utilities/h/index.ts", "src/templates/assets/javascripts/utilities/round/index.ts", "src/templates/assets/javascripts/browser/script/index.ts", "src/templates/assets/javascripts/browser/element/size/_/index.ts", "src/templates/assets/javascripts/browser/element/size/content/index.ts", "src/templates/assets/javascripts/browser/element/offset/_/index.ts", "src/templates/assets/javascripts/browser/element/offset/content/index.ts", "src/templates/assets/javascripts/browser/element/visibility/index.ts", "src/templates/assets/javascripts/browser/toggle/index.ts", "src/templates/assets/javascripts/browser/keyboard/index.ts", "src/templates/assets/javascripts/browser/location/_/index.ts", "src/templates/assets/javascripts/browser/location/hash/index.ts", "src/templates/assets/javascripts/browser/media/index.ts", "src/templates/assets/javascripts/browser/request/index.ts", "src/templates/assets/javascripts/browser/viewport/offset/index.ts", "src/templates/assets/javascripts/browser/viewport/size/index.ts", "src/templates/assets/javascripts/browser/viewport/_/index.ts", "src/templates/assets/javascripts/browser/viewport/at/index.ts", "src/templates/assets/javascripts/browser/worker/index.ts", "src/templates/assets/javascripts/_/index.ts", "src/templates/assets/javascripts/components/_/index.ts", "src/templates/assets/javascripts/components/announce/index.ts", "src/templates/assets/javascripts/components/consent/index.ts", "src/templates/assets/javascripts/templates/tooltip/index.tsx", "src/templates/assets/javascripts/templates/annotation/index.tsx", "src/templates/assets/javascripts/templates/clipboard/index.tsx", "src/templates/assets/javascripts/templates/search/index.tsx", "src/templates/assets/javascripts/templates/source/index.tsx", "src/templates/assets/javascripts/templates/tabbed/index.tsx", "src/templates/assets/javascripts/templates/table/index.tsx", "src/templates/assets/javascripts/templates/version/index.tsx", "src/templates/assets/javascripts/components/tooltip2/index.ts", "src/templates/assets/javascripts/components/content/annotation/_/index.ts", "src/templates/assets/javascripts/components/content/annotation/list/index.ts", "src/templates/assets/javascripts/components/content/annotation/block/index.ts", "src/templates/assets/javascripts/components/content/code/_/index.ts", "src/templates/assets/javascripts/components/content/details/index.ts", "src/templates/assets/javascripts/components/content/mermaid/index.css", "src/templates/assets/javascripts/components/content/mermaid/index.ts", "src/templates/assets/javascripts/components/content/table/index.ts", "src/templates/assets/javascripts/components/content/tabs/index.ts", "src/templates/assets/javascripts/components/content/_/index.ts", "src/templates/assets/javascripts/components/dialog/index.ts", "src/templates/assets/javascripts/components/tooltip/index.ts", "src/templates/assets/javascripts/components/header/_/index.ts", "src/templates/assets/javascripts/components/header/title/index.ts", "src/templates/assets/javascripts/components/main/index.ts", "src/templates/assets/javascripts/components/palette/index.ts", "src/templates/assets/javascripts/components/progress/index.ts", "src/templates/assets/javascripts/integrations/clipboard/index.ts", "src/templates/assets/javascripts/integrations/sitemap/index.ts", "src/templates/assets/javascripts/integrations/instant/index.ts", "src/templates/assets/javascripts/integrations/search/highlighter/index.ts", "src/templates/assets/javascripts/integrations/search/worker/message/index.ts", "src/templates/assets/javascripts/integrations/search/worker/_/index.ts", "src/templates/assets/javascripts/integrations/version/findurl/index.ts", "src/templates/assets/javascripts/integrations/version/index.ts", "src/templates/assets/javascripts/components/search/query/index.ts", "src/templates/assets/javascripts/components/search/result/index.ts", "src/templates/assets/javascripts/components/search/share/index.ts", "src/templates/assets/javascripts/components/search/suggest/index.ts", "src/templates/assets/javascripts/components/search/_/index.ts", "src/templates/assets/javascripts/components/search/highlight/index.ts", "src/templates/assets/javascripts/components/sidebar/index.ts", "src/templates/assets/javascripts/components/source/facts/github/index.ts", "src/templates/assets/javascripts/components/source/facts/gitlab/index.ts", "src/templates/assets/javascripts/components/source/facts/_/index.ts", "src/templates/assets/javascripts/components/source/_/index.ts", "src/templates/assets/javascripts/components/tabs/index.ts", "src/templates/assets/javascripts/components/toc/index.ts", "src/templates/assets/javascripts/components/top/index.ts", "src/templates/assets/javascripts/patches/ellipsis/index.ts", "src/templates/assets/javascripts/patches/indeterminate/index.ts", "src/templates/assets/javascripts/patches/scrollfix/index.ts", "src/templates/assets/javascripts/patches/scrolllock/index.ts", "src/templates/assets/javascripts/polyfills/index.ts"], + "sourcesContent": ["(function (global, factory) {\n typeof exports === 'object' && typeof module !== 'undefined' ? factory() :\n typeof define === 'function' && define.amd ? define(factory) :\n (factory());\n}(this, (function () { 'use strict';\n\n /**\n * Applies the :focus-visible polyfill at the given scope.\n * A scope in this case is either the top-level Document or a Shadow Root.\n *\n * @param {(Document|ShadowRoot)} scope\n * @see https://github.com/WICG/focus-visible\n */\n function applyFocusVisiblePolyfill(scope) {\n var hadKeyboardEvent = true;\n var hadFocusVisibleRecently = false;\n var hadFocusVisibleRecentlyTimeout = null;\n\n var inputTypesAllowlist = {\n text: true,\n search: true,\n url: true,\n tel: true,\n email: true,\n password: true,\n number: true,\n date: true,\n month: true,\n week: true,\n time: true,\n datetime: true,\n 'datetime-local': true\n };\n\n /**\n * Helper function for legacy browsers and iframes which sometimes focus\n * elements like document, body, and non-interactive SVG.\n * @param {Element} el\n */\n function isValidFocusTarget(el) {\n if (\n el &&\n el !== document &&\n el.nodeName !== 'HTML' &&\n el.nodeName !== 'BODY' &&\n 'classList' in el &&\n 'contains' in el.classList\n ) {\n return true;\n }\n return false;\n }\n\n /**\n * Computes whether the given element should automatically trigger the\n * `focus-visible` class being added, i.e. whether it should always match\n * `:focus-visible` when focused.\n * @param {Element} el\n * @return {boolean}\n */\n function focusTriggersKeyboardModality(el) {\n var type = el.type;\n var tagName = el.tagName;\n\n if (tagName === 'INPUT' && inputTypesAllowlist[type] && !el.readOnly) {\n return true;\n }\n\n if (tagName === 'TEXTAREA' && !el.readOnly) {\n return true;\n }\n\n if (el.isContentEditable) {\n return true;\n }\n\n return false;\n }\n\n /**\n * Add the `focus-visible` class to the given element if it was not added by\n * the author.\n * @param {Element} el\n */\n function addFocusVisibleClass(el) {\n if (el.classList.contains('focus-visible')) {\n return;\n }\n el.classList.add('focus-visible');\n el.setAttribute('data-focus-visible-added', '');\n }\n\n /**\n * Remove the `focus-visible` class from the given element if it was not\n * originally added by the author.\n * @param {Element} el\n */\n function removeFocusVisibleClass(el) {\n if (!el.hasAttribute('data-focus-visible-added')) {\n return;\n }\n el.classList.remove('focus-visible');\n el.removeAttribute('data-focus-visible-added');\n }\n\n /**\n * If the most recent user interaction was via the keyboard;\n * and the key press did not include a meta, alt/option, or control key;\n * then the modality is keyboard. Otherwise, the modality is not keyboard.\n * Apply `focus-visible` to any current active element and keep track\n * of our keyboard modality state with `hadKeyboardEvent`.\n * @param {KeyboardEvent} e\n */\n function onKeyDown(e) {\n if (e.metaKey || e.altKey || e.ctrlKey) {\n return;\n }\n\n if (isValidFocusTarget(scope.activeElement)) {\n addFocusVisibleClass(scope.activeElement);\n }\n\n hadKeyboardEvent = true;\n }\n\n /**\n * If at any point a user clicks with a pointing device, ensure that we change\n * the modality away from keyboard.\n * This avoids the situation where a user presses a key on an already focused\n * element, and then clicks on a different element, focusing it with a\n * pointing device, while we still think we're in keyboard modality.\n * @param {Event} e\n */\n function onPointerDown(e) {\n hadKeyboardEvent = false;\n }\n\n /**\n * On `focus`, add the `focus-visible` class to the target if:\n * - the target received focus as a result of keyboard navigation, or\n * - the event target is an element that will likely require interaction\n * via the keyboard (e.g. a text box)\n * @param {Event} e\n */\n function onFocus(e) {\n // Prevent IE from focusing the document or HTML element.\n if (!isValidFocusTarget(e.target)) {\n return;\n }\n\n if (hadKeyboardEvent || focusTriggersKeyboardModality(e.target)) {\n addFocusVisibleClass(e.target);\n }\n }\n\n /**\n * On `blur`, remove the `focus-visible` class from the target.\n * @param {Event} e\n */\n function onBlur(e) {\n if (!isValidFocusTarget(e.target)) {\n return;\n }\n\n if (\n e.target.classList.contains('focus-visible') ||\n e.target.hasAttribute('data-focus-visible-added')\n ) {\n // To detect a tab/window switch, we look for a blur event followed\n // rapidly by a visibility change.\n // If we don't see a visibility change within 100ms, it's probably a\n // regular focus change.\n hadFocusVisibleRecently = true;\n window.clearTimeout(hadFocusVisibleRecentlyTimeout);\n hadFocusVisibleRecentlyTimeout = window.setTimeout(function() {\n hadFocusVisibleRecently = false;\n }, 100);\n removeFocusVisibleClass(e.target);\n }\n }\n\n /**\n * If the user changes tabs, keep track of whether or not the previously\n * focused element had .focus-visible.\n * @param {Event} e\n */\n function onVisibilityChange(e) {\n if (document.visibilityState === 'hidden') {\n // If the tab becomes active again, the browser will handle calling focus\n // on the element (Safari actually calls it twice).\n // If this tab change caused a blur on an element with focus-visible,\n // re-apply the class when the user switches back to the tab.\n if (hadFocusVisibleRecently) {\n hadKeyboardEvent = true;\n }\n addInitialPointerMoveListeners();\n }\n }\n\n /**\n * Add a group of listeners to detect usage of any pointing devices.\n * These listeners will be added when the polyfill first loads, and anytime\n * the window is blurred, so that they are active when the window regains\n * focus.\n */\n function addInitialPointerMoveListeners() {\n document.addEventListener('mousemove', onInitialPointerMove);\n document.addEventListener('mousedown', onInitialPointerMove);\n document.addEventListener('mouseup', onInitialPointerMove);\n document.addEventListener('pointermove', onInitialPointerMove);\n document.addEventListener('pointerdown', onInitialPointerMove);\n document.addEventListener('pointerup', onInitialPointerMove);\n document.addEventListener('touchmove', onInitialPointerMove);\n document.addEventListener('touchstart', onInitialPointerMove);\n document.addEventListener('touchend', onInitialPointerMove);\n }\n\n function removeInitialPointerMoveListeners() {\n document.removeEventListener('mousemove', onInitialPointerMove);\n document.removeEventListener('mousedown', onInitialPointerMove);\n document.removeEventListener('mouseup', onInitialPointerMove);\n document.removeEventListener('pointermove', onInitialPointerMove);\n document.removeEventListener('pointerdown', onInitialPointerMove);\n document.removeEventListener('pointerup', onInitialPointerMove);\n document.removeEventListener('touchmove', onInitialPointerMove);\n document.removeEventListener('touchstart', onInitialPointerMove);\n document.removeEventListener('touchend', onInitialPointerMove);\n }\n\n /**\n * When the polfyill first loads, assume the user is in keyboard modality.\n * If any event is received from a pointing device (e.g. mouse, pointer,\n * touch), turn off keyboard modality.\n * This accounts for situations where focus enters the page from the URL bar.\n * @param {Event} e\n */\n function onInitialPointerMove(e) {\n // Work around a Safari quirk that fires a mousemove on whenever the\n // window blurs, even if you're tabbing out of the page. \u00AF\\_(\u30C4)_/\u00AF\n if (e.target.nodeName && e.target.nodeName.toLowerCase() === 'html') {\n return;\n }\n\n hadKeyboardEvent = false;\n removeInitialPointerMoveListeners();\n }\n\n // For some kinds of state, we are interested in changes at the global scope\n // only. For example, global pointer input, global key presses and global\n // visibility change should affect the state at every scope:\n document.addEventListener('keydown', onKeyDown, true);\n document.addEventListener('mousedown', onPointerDown, true);\n document.addEventListener('pointerdown', onPointerDown, true);\n document.addEventListener('touchstart', onPointerDown, true);\n document.addEventListener('visibilitychange', onVisibilityChange, true);\n\n addInitialPointerMoveListeners();\n\n // For focus and blur, we specifically care about state changes in the local\n // scope. This is because focus / blur events that originate from within a\n // shadow root are not re-dispatched from the host element if it was already\n // the active element in its own scope:\n scope.addEventListener('focus', onFocus, true);\n scope.addEventListener('blur', onBlur, true);\n\n // We detect that a node is a ShadowRoot by ensuring that it is a\n // DocumentFragment and also has a host property. This check covers native\n // implementation and polyfill implementation transparently. If we only cared\n // about the native implementation, we could just check if the scope was\n // an instance of a ShadowRoot.\n if (scope.nodeType === Node.DOCUMENT_FRAGMENT_NODE && scope.host) {\n // Since a ShadowRoot is a special kind of DocumentFragment, it does not\n // have a root element to add a class to. So, we add this attribute to the\n // host element instead:\n scope.host.setAttribute('data-js-focus-visible', '');\n } else if (scope.nodeType === Node.DOCUMENT_NODE) {\n document.documentElement.classList.add('js-focus-visible');\n document.documentElement.setAttribute('data-js-focus-visible', '');\n }\n }\n\n // It is important to wrap all references to global window and document in\n // these checks to support server-side rendering use cases\n // @see https://github.com/WICG/focus-visible/issues/199\n if (typeof window !== 'undefined' && typeof document !== 'undefined') {\n // Make the polyfill helper globally available. This can be used as a signal\n // to interested libraries that wish to coordinate with the polyfill for e.g.,\n // applying the polyfill to a shadow root:\n window.applyFocusVisiblePolyfill = applyFocusVisiblePolyfill;\n\n // Notify interested libraries of the polyfill's presence, in case the\n // polyfill was loaded lazily:\n var event;\n\n try {\n event = new CustomEvent('focus-visible-polyfill-ready');\n } catch (error) {\n // IE11 does not support using CustomEvent as a constructor directly:\n event = document.createEvent('CustomEvent');\n event.initCustomEvent('focus-visible-polyfill-ready', false, false, {});\n }\n\n window.dispatchEvent(event);\n }\n\n if (typeof document !== 'undefined') {\n // Apply the polyfill to the global document, so that no JavaScript\n // coordination is required to use the polyfill in the top-level document:\n applyFocusVisiblePolyfill(document);\n }\n\n})));\n", "/*!\n * escape-html\n * Copyright(c) 2012-2013 TJ Holowaychuk\n * Copyright(c) 2015 Andreas Lubbe\n * Copyright(c) 2015 Tiancheng \"Timothy\" Gu\n * MIT Licensed\n */\n\n'use strict';\n\n/**\n * Module variables.\n * @private\n */\n\nvar matchHtmlRegExp = /[\"'&<>]/;\n\n/**\n * Module exports.\n * @public\n */\n\nmodule.exports = escapeHtml;\n\n/**\n * Escape special characters in the given string of html.\n *\n * @param {string} string The string to escape for inserting into HTML\n * @return {string}\n * @public\n */\n\nfunction escapeHtml(string) {\n var str = '' + string;\n var match = matchHtmlRegExp.exec(str);\n\n if (!match) {\n return str;\n }\n\n var escape;\n var html = '';\n var index = 0;\n var lastIndex = 0;\n\n for (index = match.index; index < str.length; index++) {\n switch (str.charCodeAt(index)) {\n case 34: // \"\n escape = '"';\n break;\n case 38: // &\n escape = '&';\n break;\n case 39: // '\n escape = ''';\n break;\n case 60: // <\n escape = '<';\n break;\n case 62: // >\n escape = '>';\n break;\n default:\n continue;\n }\n\n if (lastIndex !== index) {\n html += str.substring(lastIndex, index);\n }\n\n lastIndex = index + 1;\n html += escape;\n }\n\n return lastIndex !== index\n ? html + str.substring(lastIndex, index)\n : html;\n}\n", "/*!\n * clipboard.js v2.0.11\n * https://clipboardjs.com/\n *\n * Licensed MIT \u00A9 Zeno Rocha\n */\n(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ClipboardJS\"] = factory();\n\telse\n\t\troot[\"ClipboardJS\"] = factory();\n})(this, function() {\nreturn /******/ (function() { // webpackBootstrap\n/******/ \tvar __webpack_modules__ = ({\n\n/***/ 686:\n/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n\n// EXPORTS\n__webpack_require__.d(__webpack_exports__, {\n \"default\": function() { return /* binding */ clipboard; }\n});\n\n// EXTERNAL MODULE: ./node_modules/tiny-emitter/index.js\nvar tiny_emitter = __webpack_require__(279);\nvar tiny_emitter_default = /*#__PURE__*/__webpack_require__.n(tiny_emitter);\n// EXTERNAL MODULE: ./node_modules/good-listener/src/listen.js\nvar listen = __webpack_require__(370);\nvar listen_default = /*#__PURE__*/__webpack_require__.n(listen);\n// EXTERNAL MODULE: ./node_modules/select/src/select.js\nvar src_select = __webpack_require__(817);\nvar select_default = /*#__PURE__*/__webpack_require__.n(src_select);\n;// CONCATENATED MODULE: ./src/common/command.js\n/**\n * Executes a given operation type.\n * @param {String} type\n * @return {Boolean}\n */\nfunction command(type) {\n try {\n return document.execCommand(type);\n } catch (err) {\n return false;\n }\n}\n;// CONCATENATED MODULE: ./src/actions/cut.js\n\n\n/**\n * Cut action wrapper.\n * @param {String|HTMLElement} target\n * @return {String}\n */\n\nvar ClipboardActionCut = function ClipboardActionCut(target) {\n var selectedText = select_default()(target);\n command('cut');\n return selectedText;\n};\n\n/* harmony default export */ var actions_cut = (ClipboardActionCut);\n;// CONCATENATED MODULE: ./src/common/create-fake-element.js\n/**\n * Creates a fake textarea element with a value.\n * @param {String} value\n * @return {HTMLElement}\n */\nfunction createFakeElement(value) {\n var isRTL = document.documentElement.getAttribute('dir') === 'rtl';\n var fakeElement = document.createElement('textarea'); // Prevent zooming on iOS\n\n fakeElement.style.fontSize = '12pt'; // Reset box model\n\n fakeElement.style.border = '0';\n fakeElement.style.padding = '0';\n fakeElement.style.margin = '0'; // Move element out of screen horizontally\n\n fakeElement.style.position = 'absolute';\n fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px'; // Move element to the same position vertically\n\n var yPosition = window.pageYOffset || document.documentElement.scrollTop;\n fakeElement.style.top = \"\".concat(yPosition, \"px\");\n fakeElement.setAttribute('readonly', '');\n fakeElement.value = value;\n return fakeElement;\n}\n;// CONCATENATED MODULE: ./src/actions/copy.js\n\n\n\n/**\n * Create fake copy action wrapper using a fake element.\n * @param {String} target\n * @param {Object} options\n * @return {String}\n */\n\nvar fakeCopyAction = function fakeCopyAction(value, options) {\n var fakeElement = createFakeElement(value);\n options.container.appendChild(fakeElement);\n var selectedText = select_default()(fakeElement);\n command('copy');\n fakeElement.remove();\n return selectedText;\n};\n/**\n * Copy action wrapper.\n * @param {String|HTMLElement} target\n * @param {Object} options\n * @return {String}\n */\n\n\nvar ClipboardActionCopy = function ClipboardActionCopy(target) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {\n container: document.body\n };\n var selectedText = '';\n\n if (typeof target === 'string') {\n selectedText = fakeCopyAction(target, options);\n } else if (target instanceof HTMLInputElement && !['text', 'search', 'url', 'tel', 'password'].includes(target === null || target === void 0 ? void 0 : target.type)) {\n // If input type doesn't support `setSelectionRange`. Simulate it. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange\n selectedText = fakeCopyAction(target.value, options);\n } else {\n selectedText = select_default()(target);\n command('copy');\n }\n\n return selectedText;\n};\n\n/* harmony default export */ var actions_copy = (ClipboardActionCopy);\n;// CONCATENATED MODULE: ./src/actions/default.js\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\n\n\n/**\n * Inner function which performs selection from either `text` or `target`\n * properties and then executes copy or cut operations.\n * @param {Object} options\n */\n\nvar ClipboardActionDefault = function ClipboardActionDefault() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n // Defines base properties passed from constructor.\n var _options$action = options.action,\n action = _options$action === void 0 ? 'copy' : _options$action,\n container = options.container,\n target = options.target,\n text = options.text; // Sets the `action` to be performed which can be either 'copy' or 'cut'.\n\n if (action !== 'copy' && action !== 'cut') {\n throw new Error('Invalid \"action\" value, use either \"copy\" or \"cut\"');\n } // Sets the `target` property using an element that will be have its content copied.\n\n\n if (target !== undefined) {\n if (target && _typeof(target) === 'object' && target.nodeType === 1) {\n if (action === 'copy' && target.hasAttribute('disabled')) {\n throw new Error('Invalid \"target\" attribute. Please use \"readonly\" instead of \"disabled\" attribute');\n }\n\n if (action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {\n throw new Error('Invalid \"target\" attribute. You can\\'t cut text from elements with \"readonly\" or \"disabled\" attributes');\n }\n } else {\n throw new Error('Invalid \"target\" value, use a valid Element');\n }\n } // Define selection strategy based on `text` property.\n\n\n if (text) {\n return actions_copy(text, {\n container: container\n });\n } // Defines which selection strategy based on `target` property.\n\n\n if (target) {\n return action === 'cut' ? actions_cut(target) : actions_copy(target, {\n container: container\n });\n }\n};\n\n/* harmony default export */ var actions_default = (ClipboardActionDefault);\n;// CONCATENATED MODULE: ./src/clipboard.js\nfunction clipboard_typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { clipboard_typeof = function _typeof(obj) { return typeof obj; }; } else { clipboard_typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return clipboard_typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (clipboard_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\n\n\n\n\n\n/**\n * Helper function to retrieve attribute value.\n * @param {String} suffix\n * @param {Element} element\n */\n\nfunction getAttributeValue(suffix, element) {\n var attribute = \"data-clipboard-\".concat(suffix);\n\n if (!element.hasAttribute(attribute)) {\n return;\n }\n\n return element.getAttribute(attribute);\n}\n/**\n * Base class which takes one or more elements, adds event listeners to them,\n * and instantiates a new `ClipboardAction` on each click.\n */\n\n\nvar Clipboard = /*#__PURE__*/function (_Emitter) {\n _inherits(Clipboard, _Emitter);\n\n var _super = _createSuper(Clipboard);\n\n /**\n * @param {String|HTMLElement|HTMLCollection|NodeList} trigger\n * @param {Object} options\n */\n function Clipboard(trigger, options) {\n var _this;\n\n _classCallCheck(this, Clipboard);\n\n _this = _super.call(this);\n\n _this.resolveOptions(options);\n\n _this.listenClick(trigger);\n\n return _this;\n }\n /**\n * Defines if attributes would be resolved using internal setter functions\n * or custom functions that were passed in the constructor.\n * @param {Object} options\n */\n\n\n _createClass(Clipboard, [{\n key: \"resolveOptions\",\n value: function resolveOptions() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n this.action = typeof options.action === 'function' ? options.action : this.defaultAction;\n this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;\n this.text = typeof options.text === 'function' ? options.text : this.defaultText;\n this.container = clipboard_typeof(options.container) === 'object' ? options.container : document.body;\n }\n /**\n * Adds a click event listener to the passed trigger.\n * @param {String|HTMLElement|HTMLCollection|NodeList} trigger\n */\n\n }, {\n key: \"listenClick\",\n value: function listenClick(trigger) {\n var _this2 = this;\n\n this.listener = listen_default()(trigger, 'click', function (e) {\n return _this2.onClick(e);\n });\n }\n /**\n * Defines a new `ClipboardAction` on each click event.\n * @param {Event} e\n */\n\n }, {\n key: \"onClick\",\n value: function onClick(e) {\n var trigger = e.delegateTarget || e.currentTarget;\n var action = this.action(trigger) || 'copy';\n var text = actions_default({\n action: action,\n container: this.container,\n target: this.target(trigger),\n text: this.text(trigger)\n }); // Fires an event based on the copy operation result.\n\n this.emit(text ? 'success' : 'error', {\n action: action,\n text: text,\n trigger: trigger,\n clearSelection: function clearSelection() {\n if (trigger) {\n trigger.focus();\n }\n\n window.getSelection().removeAllRanges();\n }\n });\n }\n /**\n * Default `action` lookup function.\n * @param {Element} trigger\n */\n\n }, {\n key: \"defaultAction\",\n value: function defaultAction(trigger) {\n return getAttributeValue('action', trigger);\n }\n /**\n * Default `target` lookup function.\n * @param {Element} trigger\n */\n\n }, {\n key: \"defaultTarget\",\n value: function defaultTarget(trigger) {\n var selector = getAttributeValue('target', trigger);\n\n if (selector) {\n return document.querySelector(selector);\n }\n }\n /**\n * Allow fire programmatically a copy action\n * @param {String|HTMLElement} target\n * @param {Object} options\n * @returns Text copied.\n */\n\n }, {\n key: \"defaultText\",\n\n /**\n * Default `text` lookup function.\n * @param {Element} trigger\n */\n value: function defaultText(trigger) {\n return getAttributeValue('text', trigger);\n }\n /**\n * Destroy lifecycle.\n */\n\n }, {\n key: \"destroy\",\n value: function destroy() {\n this.listener.destroy();\n }\n }], [{\n key: \"copy\",\n value: function copy(target) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {\n container: document.body\n };\n return actions_copy(target, options);\n }\n /**\n * Allow fire programmatically a cut action\n * @param {String|HTMLElement} target\n * @returns Text cutted.\n */\n\n }, {\n key: \"cut\",\n value: function cut(target) {\n return actions_cut(target);\n }\n /**\n * Returns the support of the given action, or all actions if no action is\n * given.\n * @param {String} [action]\n */\n\n }, {\n key: \"isSupported\",\n value: function isSupported() {\n var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['copy', 'cut'];\n var actions = typeof action === 'string' ? [action] : action;\n var support = !!document.queryCommandSupported;\n actions.forEach(function (action) {\n support = support && !!document.queryCommandSupported(action);\n });\n return support;\n }\n }]);\n\n return Clipboard;\n}((tiny_emitter_default()));\n\n/* harmony default export */ var clipboard = (Clipboard);\n\n/***/ }),\n\n/***/ 828:\n/***/ (function(module) {\n\nvar DOCUMENT_NODE_TYPE = 9;\n\n/**\n * A polyfill for Element.matches()\n */\nif (typeof Element !== 'undefined' && !Element.prototype.matches) {\n var proto = Element.prototype;\n\n proto.matches = proto.matchesSelector ||\n proto.mozMatchesSelector ||\n proto.msMatchesSelector ||\n proto.oMatchesSelector ||\n proto.webkitMatchesSelector;\n}\n\n/**\n * Finds the closest parent that matches a selector.\n *\n * @param {Element} element\n * @param {String} selector\n * @return {Function}\n */\nfunction closest (element, selector) {\n while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {\n if (typeof element.matches === 'function' &&\n element.matches(selector)) {\n return element;\n }\n element = element.parentNode;\n }\n}\n\nmodule.exports = closest;\n\n\n/***/ }),\n\n/***/ 438:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\nvar closest = __webpack_require__(828);\n\n/**\n * Delegates event to a selector.\n *\n * @param {Element} element\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @param {Boolean} useCapture\n * @return {Object}\n */\nfunction _delegate(element, selector, type, callback, useCapture) {\n var listenerFn = listener.apply(this, arguments);\n\n element.addEventListener(type, listenerFn, useCapture);\n\n return {\n destroy: function() {\n element.removeEventListener(type, listenerFn, useCapture);\n }\n }\n}\n\n/**\n * Delegates event to a selector.\n *\n * @param {Element|String|Array} [elements]\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @param {Boolean} useCapture\n * @return {Object}\n */\nfunction delegate(elements, selector, type, callback, useCapture) {\n // Handle the regular Element usage\n if (typeof elements.addEventListener === 'function') {\n return _delegate.apply(null, arguments);\n }\n\n // Handle Element-less usage, it defaults to global delegation\n if (typeof type === 'function') {\n // Use `document` as the first parameter, then apply arguments\n // This is a short way to .unshift `arguments` without running into deoptimizations\n return _delegate.bind(null, document).apply(null, arguments);\n }\n\n // Handle Selector-based usage\n if (typeof elements === 'string') {\n elements = document.querySelectorAll(elements);\n }\n\n // Handle Array-like based usage\n return Array.prototype.map.call(elements, function (element) {\n return _delegate(element, selector, type, callback, useCapture);\n });\n}\n\n/**\n * Finds closest match and invokes callback.\n *\n * @param {Element} element\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @return {Function}\n */\nfunction listener(element, selector, type, callback) {\n return function(e) {\n e.delegateTarget = closest(e.target, selector);\n\n if (e.delegateTarget) {\n callback.call(element, e);\n }\n }\n}\n\nmodule.exports = delegate;\n\n\n/***/ }),\n\n/***/ 879:\n/***/ (function(__unused_webpack_module, exports) {\n\n/**\n * Check if argument is a HTML element.\n *\n * @param {Object} value\n * @return {Boolean}\n */\nexports.node = function(value) {\n return value !== undefined\n && value instanceof HTMLElement\n && value.nodeType === 1;\n};\n\n/**\n * Check if argument is a list of HTML elements.\n *\n * @param {Object} value\n * @return {Boolean}\n */\nexports.nodeList = function(value) {\n var type = Object.prototype.toString.call(value);\n\n return value !== undefined\n && (type === '[object NodeList]' || type === '[object HTMLCollection]')\n && ('length' in value)\n && (value.length === 0 || exports.node(value[0]));\n};\n\n/**\n * Check if argument is a string.\n *\n * @param {Object} value\n * @return {Boolean}\n */\nexports.string = function(value) {\n return typeof value === 'string'\n || value instanceof String;\n};\n\n/**\n * Check if argument is a function.\n *\n * @param {Object} value\n * @return {Boolean}\n */\nexports.fn = function(value) {\n var type = Object.prototype.toString.call(value);\n\n return type === '[object Function]';\n};\n\n\n/***/ }),\n\n/***/ 370:\n/***/ (function(module, __unused_webpack_exports, __webpack_require__) {\n\nvar is = __webpack_require__(879);\nvar delegate = __webpack_require__(438);\n\n/**\n * Validates all params and calls the right\n * listener function based on its target type.\n *\n * @param {String|HTMLElement|HTMLCollection|NodeList} target\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\nfunction listen(target, type, callback) {\n if (!target && !type && !callback) {\n throw new Error('Missing required arguments');\n }\n\n if (!is.string(type)) {\n throw new TypeError('Second argument must be a String');\n }\n\n if (!is.fn(callback)) {\n throw new TypeError('Third argument must be a Function');\n }\n\n if (is.node(target)) {\n return listenNode(target, type, callback);\n }\n else if (is.nodeList(target)) {\n return listenNodeList(target, type, callback);\n }\n else if (is.string(target)) {\n return listenSelector(target, type, callback);\n }\n else {\n throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');\n }\n}\n\n/**\n * Adds an event listener to a HTML element\n * and returns a remove listener function.\n *\n * @param {HTMLElement} node\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\nfunction listenNode(node, type, callback) {\n node.addEventListener(type, callback);\n\n return {\n destroy: function() {\n node.removeEventListener(type, callback);\n }\n }\n}\n\n/**\n * Add an event listener to a list of HTML elements\n * and returns a remove listener function.\n *\n * @param {NodeList|HTMLCollection} nodeList\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\nfunction listenNodeList(nodeList, type, callback) {\n Array.prototype.forEach.call(nodeList, function(node) {\n node.addEventListener(type, callback);\n });\n\n return {\n destroy: function() {\n Array.prototype.forEach.call(nodeList, function(node) {\n node.removeEventListener(type, callback);\n });\n }\n }\n}\n\n/**\n * Add an event listener to a selector\n * and returns a remove listener function.\n *\n * @param {String} selector\n * @param {String} type\n * @param {Function} callback\n * @return {Object}\n */\nfunction listenSelector(selector, type, callback) {\n return delegate(document.body, selector, type, callback);\n}\n\nmodule.exports = listen;\n\n\n/***/ }),\n\n/***/ 817:\n/***/ (function(module) {\n\nfunction select(element) {\n var selectedText;\n\n if (element.nodeName === 'SELECT') {\n element.focus();\n\n selectedText = element.value;\n }\n else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {\n var isReadOnly = element.hasAttribute('readonly');\n\n if (!isReadOnly) {\n element.setAttribute('readonly', '');\n }\n\n element.select();\n element.setSelectionRange(0, element.value.length);\n\n if (!isReadOnly) {\n element.removeAttribute('readonly');\n }\n\n selectedText = element.value;\n }\n else {\n if (element.hasAttribute('contenteditable')) {\n element.focus();\n }\n\n var selection = window.getSelection();\n var range = document.createRange();\n\n range.selectNodeContents(element);\n selection.removeAllRanges();\n selection.addRange(range);\n\n selectedText = selection.toString();\n }\n\n return selectedText;\n}\n\nmodule.exports = select;\n\n\n/***/ }),\n\n/***/ 279:\n/***/ (function(module) {\n\nfunction E () {\n // Keep this empty so it's easier to inherit from\n // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)\n}\n\nE.prototype = {\n on: function (name, callback, ctx) {\n var e = this.e || (this.e = {});\n\n (e[name] || (e[name] = [])).push({\n fn: callback,\n ctx: ctx\n });\n\n return this;\n },\n\n once: function (name, callback, ctx) {\n var self = this;\n function listener () {\n self.off(name, listener);\n callback.apply(ctx, arguments);\n };\n\n listener._ = callback\n return this.on(name, listener, ctx);\n },\n\n emit: function (name) {\n var data = [].slice.call(arguments, 1);\n var evtArr = ((this.e || (this.e = {}))[name] || []).slice();\n var i = 0;\n var len = evtArr.length;\n\n for (i; i < len; i++) {\n evtArr[i].fn.apply(evtArr[i].ctx, data);\n }\n\n return this;\n },\n\n off: function (name, callback) {\n var e = this.e || (this.e = {});\n var evts = e[name];\n var liveEvents = [];\n\n if (evts && callback) {\n for (var i = 0, len = evts.length; i < len; i++) {\n if (evts[i].fn !== callback && evts[i].fn._ !== callback)\n liveEvents.push(evts[i]);\n }\n }\n\n // Remove event from queue to prevent memory leak\n // Suggested by https://github.com/lazd\n // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910\n\n (liveEvents.length)\n ? e[name] = liveEvents\n : delete e[name];\n\n return this;\n }\n};\n\nmodule.exports = E;\nmodule.exports.TinyEmitter = E;\n\n\n/***/ })\n\n/******/ \t});\n/************************************************************************/\n/******/ \t// The module cache\n/******/ \tvar __webpack_module_cache__ = {};\n/******/ \t\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(__webpack_module_cache__[moduleId]) {\n/******/ \t\t\treturn __webpack_module_cache__[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = __webpack_module_cache__[moduleId] = {\n/******/ \t\t\t// no module.id needed\n/******/ \t\t\t// no module.loaded needed\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/ \t\n/******/ \t\t// Execute the module function\n/******/ \t\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n/******/ \t\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/ \t\n/************************************************************************/\n/******/ \t/* webpack/runtime/compat get default export */\n/******/ \t!function() {\n/******/ \t\t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t\t__webpack_require__.n = function(module) {\n/******/ \t\t\tvar getter = module && module.__esModule ?\n/******/ \t\t\t\tfunction() { return module['default']; } :\n/******/ \t\t\t\tfunction() { return module; };\n/******/ \t\t\t__webpack_require__.d(getter, { a: getter });\n/******/ \t\t\treturn getter;\n/******/ \t\t};\n/******/ \t}();\n/******/ \t\n/******/ \t/* webpack/runtime/define property getters */\n/******/ \t!function() {\n/******/ \t\t// define getter functions for harmony exports\n/******/ \t\t__webpack_require__.d = function(exports, definition) {\n/******/ \t\t\tfor(var key in definition) {\n/******/ \t\t\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n/******/ \t\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t};\n/******/ \t}();\n/******/ \t\n/******/ \t/* webpack/runtime/hasOwnProperty shorthand */\n/******/ \t!function() {\n/******/ \t\t__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }\n/******/ \t}();\n/******/ \t\n/************************************************************************/\n/******/ \t// module exports must be returned from runtime so entry inlining is disabled\n/******/ \t// startup\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(686);\n/******/ })()\n.default;\n});", "/*\n * Copyright (c) 2016-2024 Martin Donath \n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to\n * deal in the Software without restriction, including without limitation the\n * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or\n * sell copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS\n * IN THE SOFTWARE.\n */\n\nimport \"focus-visible\"\n\nimport {\n EMPTY,\n NEVER,\n Observable,\n Subject,\n defer,\n delay,\n filter,\n map,\n merge,\n mergeWith,\n shareReplay,\n switchMap\n} from \"rxjs\"\n\nimport { configuration, feature } from \"./_\"\nimport {\n at,\n getActiveElement,\n getOptionalElement,\n requestJSON,\n setLocation,\n setToggle,\n watchDocument,\n watchKeyboard,\n watchLocation,\n watchLocationTarget,\n watchMedia,\n watchPrint,\n watchScript,\n watchViewport\n} from \"./browser\"\nimport {\n getComponentElement,\n getComponentElements,\n mountAnnounce,\n mountBackToTop,\n mountConsent,\n mountContent,\n mountDialog,\n mountHeader,\n mountHeaderTitle,\n mountPalette,\n mountProgress,\n mountSearch,\n mountSearchHiglight,\n mountSidebar,\n mountSource,\n mountTableOfContents,\n mountTabs,\n watchHeader,\n watchMain\n} from \"./components\"\nimport {\n SearchIndex,\n setupClipboardJS,\n setupInstantNavigation,\n setupVersionSelector\n} from \"./integrations\"\nimport {\n patchEllipsis,\n patchIndeterminate,\n patchScrollfix,\n patchScrolllock\n} from \"./patches\"\nimport \"./polyfills\"\n\n/* ----------------------------------------------------------------------------\n * Functions - @todo refactor\n * ------------------------------------------------------------------------- */\n\n/**\n * Fetch search index\n *\n * @returns Search index observable\n */\nfunction fetchSearchIndex(): Observable {\n if (location.protocol === \"file:\") {\n return watchScript(\n `${new URL(\"search/search_index.js\", config.base)}`\n )\n .pipe(\n // @ts-ignore - @todo fix typings\n map(() => __index),\n shareReplay(1)\n )\n } else {\n return requestJSON(\n new URL(\"search/search_index.json\", config.base)\n )\n }\n}\n\n/* ----------------------------------------------------------------------------\n * Application\n * ------------------------------------------------------------------------- */\n\n/* Yay, JavaScript is available */\ndocument.documentElement.classList.remove(\"no-js\")\ndocument.documentElement.classList.add(\"js\")\n\n/* Set up navigation observables and subjects */\nconst document$ = watchDocument()\nconst location$ = watchLocation()\nconst target$ = watchLocationTarget(location$)\nconst keyboard$ = watchKeyboard()\n\n/* Set up media observables */\nconst viewport$ = watchViewport()\nconst tablet$ = watchMedia(\"(min-width: 960px)\")\nconst screen$ = watchMedia(\"(min-width: 1220px)\")\nconst print$ = watchPrint()\n\n/* Retrieve search index, if search is enabled */\nconst config = configuration()\nconst index$ = document.forms.namedItem(\"search\")\n ? fetchSearchIndex()\n : NEVER\n\n/* Set up Clipboard.js integration */\nconst alert$ = new Subject()\nsetupClipboardJS({ alert$ })\n\n/* Set up progress indicator */\nconst progress$ = new Subject()\n\n/* Set up instant navigation, if enabled */\nif (feature(\"navigation.instant\"))\n setupInstantNavigation({ location$, viewport$, progress$ })\n .subscribe(document$)\n\n/* Set up version selector */\nif (config.version?.provider === \"mike\")\n setupVersionSelector({ document$ })\n\n/* Always close drawer and search on navigation */\nmerge(location$, target$)\n .pipe(\n delay(125)\n )\n .subscribe(() => {\n setToggle(\"drawer\", false)\n setToggle(\"search\", false)\n })\n\n/* Set up global keyboard handlers */\nkeyboard$\n .pipe(\n filter(({ mode }) => mode === \"global\")\n )\n .subscribe(key => {\n switch (key.type) {\n\n /* Go to previous page */\n case \"p\":\n case \",\":\n const prev = getOptionalElement(\"link[rel=prev]\")\n if (typeof prev !== \"undefined\")\n setLocation(prev)\n break\n\n /* Go to next page */\n case \"n\":\n case \".\":\n const next = getOptionalElement(\"link[rel=next]\")\n if (typeof next !== \"undefined\")\n setLocation(next)\n break\n\n /* Expand navigation, see https://bit.ly/3ZjG5io */\n case \"Enter\":\n const active = getActiveElement()\n if (active instanceof HTMLLabelElement)\n active.click()\n }\n })\n\n/* Set up patches */\npatchEllipsis({ viewport$, document$ })\npatchIndeterminate({ document$, tablet$ })\npatchScrollfix({ document$ })\npatchScrolllock({ viewport$, tablet$ })\n\n/* Set up header and main area observable */\nconst header$ = watchHeader(getComponentElement(\"header\"), { viewport$ })\nconst main$ = document$\n .pipe(\n map(() => getComponentElement(\"main\")),\n switchMap(el => watchMain(el, { viewport$, header$ })),\n shareReplay(1)\n )\n\n/* Set up control component observables */\nconst control$ = merge(\n\n /* Consent */\n ...getComponentElements(\"consent\")\n .map(el => mountConsent(el, { target$ })),\n\n /* Dialog */\n ...getComponentElements(\"dialog\")\n .map(el => mountDialog(el, { alert$ })),\n\n /* Color palette */\n ...getComponentElements(\"palette\")\n .map(el => mountPalette(el)),\n\n /* Progress bar */\n ...getComponentElements(\"progress\")\n .map(el => mountProgress(el, { progress$ })),\n\n /* Search */\n ...getComponentElements(\"search\")\n .map(el => mountSearch(el, { index$, keyboard$ })),\n\n /* Repository information */\n ...getComponentElements(\"source\")\n .map(el => mountSource(el))\n)\n\n/* Set up content component observables */\nconst content$ = defer(() => merge(\n\n /* Announcement bar */\n ...getComponentElements(\"announce\")\n .map(el => mountAnnounce(el)),\n\n /* Content */\n ...getComponentElements(\"content\")\n .map(el => mountContent(el, { viewport$, target$, print$ })),\n\n /* Search highlighting */\n ...getComponentElements(\"content\")\n .map(el => feature(\"search.highlight\")\n ? mountSearchHiglight(el, { index$, location$ })\n : EMPTY\n ),\n\n /* Header */\n ...getComponentElements(\"header\")\n .map(el => mountHeader(el, { viewport$, header$, main$ })),\n\n /* Header title */\n ...getComponentElements(\"header-title\")\n .map(el => mountHeaderTitle(el, { viewport$, header$ })),\n\n /* Sidebar */\n ...getComponentElements(\"sidebar\")\n .map(el => el.getAttribute(\"data-md-type\") === \"navigation\"\n ? at(screen$, () => mountSidebar(el, { viewport$, header$, main$ }))\n : at(tablet$, () => mountSidebar(el, { viewport$, header$, main$ }))\n ),\n\n /* Navigation tabs */\n ...getComponentElements(\"tabs\")\n .map(el => mountTabs(el, { viewport$, header$ })),\n\n /* Table of contents */\n ...getComponentElements(\"toc\")\n .map(el => mountTableOfContents(el, {\n viewport$, header$, main$, target$\n })),\n\n /* Back-to-top button */\n ...getComponentElements(\"top\")\n .map(el => mountBackToTop(el, { viewport$, header$, main$, target$ }))\n))\n\n/* Set up component observables */\nconst component$ = document$\n .pipe(\n switchMap(() => content$),\n mergeWith(control$),\n shareReplay(1)\n )\n\n/* Subscribe to all components */\ncomponent$.subscribe()\n\n/* ----------------------------------------------------------------------------\n * Exports\n * ------------------------------------------------------------------------- */\n\nwindow.document$ = document$ /* Document observable */\nwindow.location$ = location$ /* Location subject */\nwindow.target$ = target$ /* Location target observable */\nwindow.keyboard$ = keyboard$ /* Keyboard observable */\nwindow.viewport$ = viewport$ /* Viewport observable */\nwindow.tablet$ = tablet$ /* Media tablet observable */\nwindow.screen$ = screen$ /* Media screen observable */\nwindow.print$ = print$ /* Media print observable */\nwindow.alert$ = alert$ /* Alert subject */\nwindow.progress$ = progress$ /* Progress indicator subject */\nwindow.component$ = component$ /* Component observable */\n", "/******************************************************************************\nCopyright (c) Microsoft Corporation.\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\nPERFORMANCE OF THIS SOFTWARE.\n***************************************************************************** */\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\n\nvar extendStatics = function(d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\n return extendStatics(d, b);\n};\n\nexport function __extends(d, b) {\n if (typeof b !== \"function\" && b !== null)\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n}\n\nexport var __assign = function() {\n __assign = Object.assign || function __assign(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\n }\n return t;\n }\n return __assign.apply(this, arguments);\n}\n\nexport function __rest(s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n}\n\nexport function __decorate(decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n}\n\nexport function __param(paramIndex, decorator) {\n return function (target, key) { decorator(target, key, paramIndex); }\n}\n\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\n function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\n var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\n var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\n var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\n var _, done = false;\n for (var i = decorators.length - 1; i >= 0; i--) {\n var context = {};\n for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\n for (var p in contextIn.access) context.access[p] = contextIn.access[p];\n context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\n var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\n if (kind === \"accessor\") {\n if (result === void 0) continue;\n if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\n if (_ = accept(result.get)) descriptor.get = _;\n if (_ = accept(result.set)) descriptor.set = _;\n if (_ = accept(result.init)) initializers.unshift(_);\n }\n else if (_ = accept(result)) {\n if (kind === \"field\") initializers.unshift(_);\n else descriptor[key] = _;\n }\n }\n if (target) Object.defineProperty(target, contextIn.name, descriptor);\n done = true;\n};\n\nexport function __runInitializers(thisArg, initializers, value) {\n var useValue = arguments.length > 2;\n for (var i = 0; i < initializers.length; i++) {\n value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\n }\n return useValue ? value : void 0;\n};\n\nexport function __propKey(x) {\n return typeof x === \"symbol\" ? x : \"\".concat(x);\n};\n\nexport function __setFunctionName(f, name, prefix) {\n if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\n return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\n};\n\nexport function __metadata(metadataKey, metadataValue) {\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\n}\n\nexport function __awaiter(thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n}\n\nexport function __generator(thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\n return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n}\n\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n});\n\nexport function __exportStar(m, o) {\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\n}\n\nexport function __values(o) {\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\n if (m) return m.call(o);\n if (o && typeof o.length === \"number\") return {\n next: function () {\n if (o && i >= o.length) o = void 0;\n return { value: o && o[i++], done: !o };\n }\n };\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\n}\n\nexport function __read(o, n) {\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\n if (!m) return o;\n var i = m.call(o), r, ar = [], e;\n try {\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\n }\n catch (error) { e = { error: error }; }\n finally {\n try {\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\n }\n finally { if (e) throw e.error; }\n }\n return ar;\n}\n\n/** @deprecated */\nexport function __spread() {\n for (var ar = [], i = 0; i < arguments.length; i++)\n ar = ar.concat(__read(arguments[i]));\n return ar;\n}\n\n/** @deprecated */\nexport function __spreadArrays() {\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\n r[k] = a[j];\n return r;\n}\n\nexport function __spreadArray(to, from, pack) {\n if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n if (ar || !(i in from)) {\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n ar[i] = from[i];\n }\n }\n return to.concat(ar || Array.prototype.slice.call(from));\n}\n\nexport function __await(v) {\n return this instanceof __await ? (this.v = v, this) : new __await(v);\n}\n\nexport function __asyncGenerator(thisArg, _arguments, generator) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\n return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\n function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\n function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\n function fulfill(value) { resume(\"next\", value); }\n function reject(value) { resume(\"throw\", value); }\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\n}\n\nexport function __asyncDelegator(o) {\n var i, p;\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\n}\n\nexport function __asyncValues(o) {\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\n var m = o[Symbol.asyncIterator], i;\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\n}\n\nexport function __makeTemplateObject(cooked, raw) {\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\n return cooked;\n};\n\nvar __setModuleDefault = Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n};\n\nexport function __importStar(mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n}\n\nexport function __importDefault(mod) {\n return (mod && mod.__esModule) ? mod : { default: mod };\n}\n\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\n}\n\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\n if (typeof state === \"function\" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\n}\n\nexport function __classPrivateFieldIn(state, receiver) {\n if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\n return typeof state === \"function\" ? receiver === state : state.has(receiver);\n}\n\nexport function __addDisposableResource(env, value, async) {\n if (value !== null && value !== void 0) {\n if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\n var dispose, inner;\n if (async) {\n if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\n dispose = value[Symbol.asyncDispose];\n }\n if (dispose === void 0) {\n if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\n dispose = value[Symbol.dispose];\n if (async) inner = dispose;\n }\n if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\n if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\n env.stack.push({ value: value, dispose: dispose, async: async });\n }\n else if (async) {\n env.stack.push({ async: true });\n }\n return value;\n}\n\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\n var e = new Error(message);\n return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\n};\n\nexport function __disposeResources(env) {\n function fail(e) {\n env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\n env.hasError = true;\n }\n var r, s = 0;\n function next() {\n while (r = env.stack.pop()) {\n try {\n if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\n if (r.dispose) {\n var result = r.dispose.call(r.value);\n if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\n }\n else s |= 1;\n }\n catch (e) {\n fail(e);\n }\n }\n if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\n if (env.hasError) throw env.error;\n }\n return next();\n}\n\nexport default {\n __extends,\n __assign,\n __rest,\n __decorate,\n __param,\n __metadata,\n __awaiter,\n __generator,\n __createBinding,\n __exportStar,\n __values,\n __read,\n __spread,\n __spreadArrays,\n __spreadArray,\n __await,\n __asyncGenerator,\n __asyncDelegator,\n __asyncValues,\n __makeTemplateObject,\n __importStar,\n __importDefault,\n __classPrivateFieldGet,\n __classPrivateFieldSet,\n __classPrivateFieldIn,\n __addDisposableResource,\n __disposeResources,\n};\n", "/**\n * Returns true if the object is a function.\n * @param value The value to check\n */\nexport function isFunction(value: any): value is (...args: any[]) => any {\n return typeof value === 'function';\n}\n", "/**\n * Used to create Error subclasses until the community moves away from ES5.\n *\n * This is because compiling from TypeScript down to ES5 has issues with subclassing Errors\n * as well as other built-in types: https://github.com/Microsoft/TypeScript/issues/12123\n *\n * @param createImpl A factory function to create the actual constructor implementation. The returned\n * function should be a named function that calls `_super` internally.\n */\nexport function createErrorClass(createImpl: (_super: any) => any): T {\n const _super = (instance: any) => {\n Error.call(instance);\n instance.stack = new Error().stack;\n };\n\n const ctorFunc = createImpl(_super);\n ctorFunc.prototype = Object.create(Error.prototype);\n ctorFunc.prototype.constructor = ctorFunc;\n return ctorFunc;\n}\n", "import { createErrorClass } from './createErrorClass';\n\nexport interface UnsubscriptionError extends Error {\n readonly errors: any[];\n}\n\nexport interface UnsubscriptionErrorCtor {\n /**\n * @deprecated Internal implementation detail. Do not construct error instances.\n * Cannot be tagged as internal: https://github.com/ReactiveX/rxjs/issues/6269\n */\n new (errors: any[]): UnsubscriptionError;\n}\n\n/**\n * An error thrown when one or more errors have occurred during the\n * `unsubscribe` of a {@link Subscription}.\n */\nexport const UnsubscriptionError: UnsubscriptionErrorCtor = createErrorClass(\n (_super) =>\n function UnsubscriptionErrorImpl(this: any, errors: (Error | string)[]) {\n _super(this);\n this.message = errors\n ? `${errors.length} errors occurred during unsubscription:\n${errors.map((err, i) => `${i + 1}) ${err.toString()}`).join('\\n ')}`\n : '';\n this.name = 'UnsubscriptionError';\n this.errors = errors;\n }\n);\n", "/**\n * Removes an item from an array, mutating it.\n * @param arr The array to remove the item from\n * @param item The item to remove\n */\nexport function arrRemove(arr: T[] | undefined | null, item: T) {\n if (arr) {\n const index = arr.indexOf(item);\n 0 <= index && arr.splice(index, 1);\n }\n}\n", "import { isFunction } from './util/isFunction';\nimport { UnsubscriptionError } from './util/UnsubscriptionError';\nimport { SubscriptionLike, TeardownLogic, Unsubscribable } from './types';\nimport { arrRemove } from './util/arrRemove';\n\n/**\n * Represents a disposable resource, such as the execution of an Observable. A\n * Subscription has one important method, `unsubscribe`, that takes no argument\n * and just disposes the resource held by the subscription.\n *\n * Additionally, subscriptions may be grouped together through the `add()`\n * method, which will attach a child Subscription to the current Subscription.\n * When a Subscription is unsubscribed, all its children (and its grandchildren)\n * will be unsubscribed as well.\n *\n * @class Subscription\n */\nexport class Subscription implements SubscriptionLike {\n /** @nocollapse */\n public static EMPTY = (() => {\n const empty = new Subscription();\n empty.closed = true;\n return empty;\n })();\n\n /**\n * A flag to indicate whether this Subscription has already been unsubscribed.\n */\n public closed = false;\n\n private _parentage: Subscription[] | Subscription | null = null;\n\n /**\n * The list of registered finalizers to execute upon unsubscription. Adding and removing from this\n * list occurs in the {@link #add} and {@link #remove} methods.\n */\n private _finalizers: Exclude[] | null = null;\n\n /**\n * @param initialTeardown A function executed first as part of the finalization\n * process that is kicked off when {@link #unsubscribe} is called.\n */\n constructor(private initialTeardown?: () => void) {}\n\n /**\n * Disposes the resources held by the subscription. May, for instance, cancel\n * an ongoing Observable execution or cancel any other type of work that\n * started when the Subscription was created.\n * @return {void}\n */\n unsubscribe(): void {\n let errors: any[] | undefined;\n\n if (!this.closed) {\n this.closed = true;\n\n // Remove this from it's parents.\n const { _parentage } = this;\n if (_parentage) {\n this._parentage = null;\n if (Array.isArray(_parentage)) {\n for (const parent of _parentage) {\n parent.remove(this);\n }\n } else {\n _parentage.remove(this);\n }\n }\n\n const { initialTeardown: initialFinalizer } = this;\n if (isFunction(initialFinalizer)) {\n try {\n initialFinalizer();\n } catch (e) {\n errors = e instanceof UnsubscriptionError ? e.errors : [e];\n }\n }\n\n const { _finalizers } = this;\n if (_finalizers) {\n this._finalizers = null;\n for (const finalizer of _finalizers) {\n try {\n execFinalizer(finalizer);\n } catch (err) {\n errors = errors ?? [];\n if (err instanceof UnsubscriptionError) {\n errors = [...errors, ...err.errors];\n } else {\n errors.push(err);\n }\n }\n }\n }\n\n if (errors) {\n throw new UnsubscriptionError(errors);\n }\n }\n }\n\n /**\n * Adds a finalizer to this subscription, so that finalization will be unsubscribed/called\n * when this subscription is unsubscribed. If this subscription is already {@link #closed},\n * because it has already been unsubscribed, then whatever finalizer is passed to it\n * will automatically be executed (unless the finalizer itself is also a closed subscription).\n *\n * Closed Subscriptions cannot be added as finalizers to any subscription. Adding a closed\n * subscription to a any subscription will result in no operation. (A noop).\n *\n * Adding a subscription to itself, or adding `null` or `undefined` will not perform any\n * operation at all. (A noop).\n *\n * `Subscription` instances that are added to this instance will automatically remove themselves\n * if they are unsubscribed. Functions and {@link Unsubscribable} objects that you wish to remove\n * will need to be removed manually with {@link #remove}\n *\n * @param teardown The finalization logic to add to this subscription.\n */\n add(teardown: TeardownLogic): void {\n // Only add the finalizer if it's not undefined\n // and don't add a subscription to itself.\n if (teardown && teardown !== this) {\n if (this.closed) {\n // If this subscription is already closed,\n // execute whatever finalizer is handed to it automatically.\n execFinalizer(teardown);\n } else {\n if (teardown instanceof Subscription) {\n // We don't add closed subscriptions, and we don't add the same subscription\n // twice. Subscription unsubscribe is idempotent.\n if (teardown.closed || teardown._hasParent(this)) {\n return;\n }\n teardown._addParent(this);\n }\n (this._finalizers = this._finalizers ?? []).push(teardown);\n }\n }\n }\n\n /**\n * Checks to see if a this subscription already has a particular parent.\n * This will signal that this subscription has already been added to the parent in question.\n * @param parent the parent to check for\n */\n private _hasParent(parent: Subscription) {\n const { _parentage } = this;\n return _parentage === parent || (Array.isArray(_parentage) && _parentage.includes(parent));\n }\n\n /**\n * Adds a parent to this subscription so it can be removed from the parent if it\n * unsubscribes on it's own.\n *\n * NOTE: THIS ASSUMES THAT {@link _hasParent} HAS ALREADY BEEN CHECKED.\n * @param parent The parent subscription to add\n */\n private _addParent(parent: Subscription) {\n const { _parentage } = this;\n this._parentage = Array.isArray(_parentage) ? (_parentage.push(parent), _parentage) : _parentage ? [_parentage, parent] : parent;\n }\n\n /**\n * Called on a child when it is removed via {@link #remove}.\n * @param parent The parent to remove\n */\n private _removeParent(parent: Subscription) {\n const { _parentage } = this;\n if (_parentage === parent) {\n this._parentage = null;\n } else if (Array.isArray(_parentage)) {\n arrRemove(_parentage, parent);\n }\n }\n\n /**\n * Removes a finalizer from this subscription that was previously added with the {@link #add} method.\n *\n * Note that `Subscription` instances, when unsubscribed, will automatically remove themselves\n * from every other `Subscription` they have been added to. This means that using the `remove` method\n * is not a common thing and should be used thoughtfully.\n *\n * If you add the same finalizer instance of a function or an unsubscribable object to a `Subscription` instance\n * more than once, you will need to call `remove` the same number of times to remove all instances.\n *\n * All finalizer instances are removed to free up memory upon unsubscription.\n *\n * @param teardown The finalizer to remove from this subscription\n */\n remove(teardown: Exclude): void {\n const { _finalizers } = this;\n _finalizers && arrRemove(_finalizers, teardown);\n\n if (teardown instanceof Subscription) {\n teardown._removeParent(this);\n }\n }\n}\n\nexport const EMPTY_SUBSCRIPTION = Subscription.EMPTY;\n\nexport function isSubscription(value: any): value is Subscription {\n return (\n value instanceof Subscription ||\n (value && 'closed' in value && isFunction(value.remove) && isFunction(value.add) && isFunction(value.unsubscribe))\n );\n}\n\nfunction execFinalizer(finalizer: Unsubscribable | (() => void)) {\n if (isFunction(finalizer)) {\n finalizer();\n } else {\n finalizer.unsubscribe();\n }\n}\n", "import { Subscriber } from './Subscriber';\nimport { ObservableNotification } from './types';\n\n/**\n * The {@link GlobalConfig} object for RxJS. It is used to configure things\n * like how to react on unhandled errors.\n */\nexport const config: GlobalConfig = {\n onUnhandledError: null,\n onStoppedNotification: null,\n Promise: undefined,\n useDeprecatedSynchronousErrorHandling: false,\n useDeprecatedNextContext: false,\n};\n\n/**\n * The global configuration object for RxJS, used to configure things\n * like how to react on unhandled errors. Accessible via {@link config}\n * object.\n */\nexport interface GlobalConfig {\n /**\n * A registration point for unhandled errors from RxJS. These are errors that\n * cannot were not handled by consuming code in the usual subscription path. For\n * example, if you have this configured, and you subscribe to an observable without\n * providing an error handler, errors from that subscription will end up here. This\n * will _always_ be called asynchronously on another job in the runtime. This is because\n * we do not want errors thrown in this user-configured handler to interfere with the\n * behavior of the library.\n */\n onUnhandledError: ((err: any) => void) | null;\n\n /**\n * A registration point for notifications that cannot be sent to subscribers because they\n * have completed, errored or have been explicitly unsubscribed. By default, next, complete\n * and error notifications sent to stopped subscribers are noops. However, sometimes callers\n * might want a different behavior. For example, with sources that attempt to report errors\n * to stopped subscribers, a caller can configure RxJS to throw an unhandled error instead.\n * This will _always_ be called asynchronously on another job in the runtime. This is because\n * we do not want errors thrown in this user-configured handler to interfere with the\n * behavior of the library.\n */\n onStoppedNotification: ((notification: ObservableNotification, subscriber: Subscriber) => void) | null;\n\n /**\n * The promise constructor used by default for {@link Observable#toPromise toPromise} and {@link Observable#forEach forEach}\n * methods.\n *\n * @deprecated As of version 8, RxJS will no longer support this sort of injection of a\n * Promise constructor. If you need a Promise implementation other than native promises,\n * please polyfill/patch Promise as you see appropriate. Will be removed in v8.\n */\n Promise?: PromiseConstructorLike;\n\n /**\n * If true, turns on synchronous error rethrowing, which is a deprecated behavior\n * in v6 and higher. This behavior enables bad patterns like wrapping a subscribe\n * call in a try/catch block. It also enables producer interference, a nasty bug\n * where a multicast can be broken for all observers by a downstream consumer with\n * an unhandled error. DO NOT USE THIS FLAG UNLESS IT'S NEEDED TO BUY TIME\n * FOR MIGRATION REASONS.\n *\n * @deprecated As of version 8, RxJS will no longer support synchronous throwing\n * of unhandled errors. All errors will be thrown on a separate call stack to prevent bad\n * behaviors described above. Will be removed in v8.\n */\n useDeprecatedSynchronousErrorHandling: boolean;\n\n /**\n * If true, enables an as-of-yet undocumented feature from v5: The ability to access\n * `unsubscribe()` via `this` context in `next` functions created in observers passed\n * to `subscribe`.\n *\n * This is being removed because the performance was severely problematic, and it could also cause\n * issues when types other than POJOs are passed to subscribe as subscribers, as they will likely have\n * their `this` context overwritten.\n *\n * @deprecated As of version 8, RxJS will no longer support altering the\n * context of next functions provided as part of an observer to Subscribe. Instead,\n * you will have access to a subscription or a signal or token that will allow you to do things like\n * unsubscribe and test closed status. Will be removed in v8.\n */\n useDeprecatedNextContext: boolean;\n}\n", "import type { TimerHandle } from './timerHandle';\ntype SetTimeoutFunction = (handler: () => void, timeout?: number, ...args: any[]) => TimerHandle;\ntype ClearTimeoutFunction = (handle: TimerHandle) => void;\n\ninterface TimeoutProvider {\n setTimeout: SetTimeoutFunction;\n clearTimeout: ClearTimeoutFunction;\n delegate:\n | {\n setTimeout: SetTimeoutFunction;\n clearTimeout: ClearTimeoutFunction;\n }\n | undefined;\n}\n\nexport const timeoutProvider: TimeoutProvider = {\n // When accessing the delegate, use the variable rather than `this` so that\n // the functions can be called without being bound to the provider.\n setTimeout(handler: () => void, timeout?: number, ...args) {\n const { delegate } = timeoutProvider;\n if (delegate?.setTimeout) {\n return delegate.setTimeout(handler, timeout, ...args);\n }\n return setTimeout(handler, timeout, ...args);\n },\n clearTimeout(handle) {\n const { delegate } = timeoutProvider;\n return (delegate?.clearTimeout || clearTimeout)(handle as any);\n },\n delegate: undefined,\n};\n", "import { config } from '../config';\nimport { timeoutProvider } from '../scheduler/timeoutProvider';\n\n/**\n * Handles an error on another job either with the user-configured {@link onUnhandledError},\n * or by throwing it on that new job so it can be picked up by `window.onerror`, `process.on('error')`, etc.\n *\n * This should be called whenever there is an error that is out-of-band with the subscription\n * or when an error hits a terminal boundary of the subscription and no error handler was provided.\n *\n * @param err the error to report\n */\nexport function reportUnhandledError(err: any) {\n timeoutProvider.setTimeout(() => {\n const { onUnhandledError } = config;\n if (onUnhandledError) {\n // Execute the user-configured error handler.\n onUnhandledError(err);\n } else {\n // Throw so it is picked up by the runtime's uncaught error mechanism.\n throw err;\n }\n });\n}\n", "/* tslint:disable:no-empty */\nexport function noop() { }\n", "import { CompleteNotification, NextNotification, ErrorNotification } from './types';\n\n/**\n * A completion object optimized for memory use and created to be the\n * same \"shape\" as other notifications in v8.\n * @internal\n */\nexport const COMPLETE_NOTIFICATION = (() => createNotification('C', undefined, undefined) as CompleteNotification)();\n\n/**\n * Internal use only. Creates an optimized error notification that is the same \"shape\"\n * as other notifications.\n * @internal\n */\nexport function errorNotification(error: any): ErrorNotification {\n return createNotification('E', undefined, error) as any;\n}\n\n/**\n * Internal use only. Creates an optimized next notification that is the same \"shape\"\n * as other notifications.\n * @internal\n */\nexport function nextNotification(value: T) {\n return createNotification('N', value, undefined) as NextNotification;\n}\n\n/**\n * Ensures that all notifications created internally have the same \"shape\" in v8.\n *\n * TODO: This is only exported to support a crazy legacy test in `groupBy`.\n * @internal\n */\nexport function createNotification(kind: 'N' | 'E' | 'C', value: any, error: any) {\n return {\n kind,\n value,\n error,\n };\n}\n", "import { config } from '../config';\n\nlet context: { errorThrown: boolean; error: any } | null = null;\n\n/**\n * Handles dealing with errors for super-gross mode. Creates a context, in which\n * any synchronously thrown errors will be passed to {@link captureError}. Which\n * will record the error such that it will be rethrown after the call back is complete.\n * TODO: Remove in v8\n * @param cb An immediately executed function.\n */\nexport function errorContext(cb: () => void) {\n if (config.useDeprecatedSynchronousErrorHandling) {\n const isRoot = !context;\n if (isRoot) {\n context = { errorThrown: false, error: null };\n }\n cb();\n if (isRoot) {\n const { errorThrown, error } = context!;\n context = null;\n if (errorThrown) {\n throw error;\n }\n }\n } else {\n // This is the general non-deprecated path for everyone that\n // isn't crazy enough to use super-gross mode (useDeprecatedSynchronousErrorHandling)\n cb();\n }\n}\n\n/**\n * Captures errors only in super-gross mode.\n * @param err the error to capture\n */\nexport function captureError(err: any) {\n if (config.useDeprecatedSynchronousErrorHandling && context) {\n context.errorThrown = true;\n context.error = err;\n }\n}\n", "import { isFunction } from './util/isFunction';\nimport { Observer, ObservableNotification } from './types';\nimport { isSubscription, Subscription } from './Subscription';\nimport { config } from './config';\nimport { reportUnhandledError } from './util/reportUnhandledError';\nimport { noop } from './util/noop';\nimport { nextNotification, errorNotification, COMPLETE_NOTIFICATION } from './NotificationFactories';\nimport { timeoutProvider } from './scheduler/timeoutProvider';\nimport { captureError } from './util/errorContext';\n\n/**\n * Implements the {@link Observer} interface and extends the\n * {@link Subscription} class. While the {@link Observer} is the public API for\n * consuming the values of an {@link Observable}, all Observers get converted to\n * a Subscriber, in order to provide Subscription-like capabilities such as\n * `unsubscribe`. Subscriber is a common type in RxJS, and crucial for\n * implementing operators, but it is rarely used as a public API.\n *\n * @class Subscriber\n */\nexport class Subscriber extends Subscription implements Observer {\n /**\n * A static factory for a Subscriber, given a (potentially partial) definition\n * of an Observer.\n * @param next The `next` callback of an Observer.\n * @param error The `error` callback of an\n * Observer.\n * @param complete The `complete` callback of an\n * Observer.\n * @return A Subscriber wrapping the (partially defined)\n * Observer represented by the given arguments.\n * @nocollapse\n * @deprecated Do not use. Will be removed in v8. There is no replacement for this\n * method, and there is no reason to be creating instances of `Subscriber` directly.\n * If you have a specific use case, please file an issue.\n */\n static create(next?: (x?: T) => void, error?: (e?: any) => void, complete?: () => void): Subscriber {\n return new SafeSubscriber(next, error, complete);\n }\n\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n protected isStopped: boolean = false;\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n protected destination: Subscriber | Observer; // this `any` is the escape hatch to erase extra type param (e.g. R)\n\n /**\n * @deprecated Internal implementation detail, do not use directly. Will be made internal in v8.\n * There is no reason to directly create an instance of Subscriber. This type is exported for typings reasons.\n */\n constructor(destination?: Subscriber | Observer) {\n super();\n if (destination) {\n this.destination = destination;\n // Automatically chain subscriptions together here.\n // if destination is a Subscription, then it is a Subscriber.\n if (isSubscription(destination)) {\n destination.add(this);\n }\n } else {\n this.destination = EMPTY_OBSERVER;\n }\n }\n\n /**\n * The {@link Observer} callback to receive notifications of type `next` from\n * the Observable, with a value. The Observable may call this method 0 or more\n * times.\n * @param {T} [value] The `next` value.\n * @return {void}\n */\n next(value?: T): void {\n if (this.isStopped) {\n handleStoppedNotification(nextNotification(value), this);\n } else {\n this._next(value!);\n }\n }\n\n /**\n * The {@link Observer} callback to receive notifications of type `error` from\n * the Observable, with an attached `Error`. Notifies the Observer that\n * the Observable has experienced an error condition.\n * @param {any} [err] The `error` exception.\n * @return {void}\n */\n error(err?: any): void {\n if (this.isStopped) {\n handleStoppedNotification(errorNotification(err), this);\n } else {\n this.isStopped = true;\n this._error(err);\n }\n }\n\n /**\n * The {@link Observer} callback to receive a valueless notification of type\n * `complete` from the Observable. Notifies the Observer that the Observable\n * has finished sending push-based notifications.\n * @return {void}\n */\n complete(): void {\n if (this.isStopped) {\n handleStoppedNotification(COMPLETE_NOTIFICATION, this);\n } else {\n this.isStopped = true;\n this._complete();\n }\n }\n\n unsubscribe(): void {\n if (!this.closed) {\n this.isStopped = true;\n super.unsubscribe();\n this.destination = null!;\n }\n }\n\n protected _next(value: T): void {\n this.destination.next(value);\n }\n\n protected _error(err: any): void {\n try {\n this.destination.error(err);\n } finally {\n this.unsubscribe();\n }\n }\n\n protected _complete(): void {\n try {\n this.destination.complete();\n } finally {\n this.unsubscribe();\n }\n }\n}\n\n/**\n * This bind is captured here because we want to be able to have\n * compatibility with monoid libraries that tend to use a method named\n * `bind`. In particular, a library called Monio requires this.\n */\nconst _bind = Function.prototype.bind;\n\nfunction bind any>(fn: Fn, thisArg: any): Fn {\n return _bind.call(fn, thisArg);\n}\n\n/**\n * Internal optimization only, DO NOT EXPOSE.\n * @internal\n */\nclass ConsumerObserver implements Observer {\n constructor(private partialObserver: Partial>) {}\n\n next(value: T): void {\n const { partialObserver } = this;\n if (partialObserver.next) {\n try {\n partialObserver.next(value);\n } catch (error) {\n handleUnhandledError(error);\n }\n }\n }\n\n error(err: any): void {\n const { partialObserver } = this;\n if (partialObserver.error) {\n try {\n partialObserver.error(err);\n } catch (error) {\n handleUnhandledError(error);\n }\n } else {\n handleUnhandledError(err);\n }\n }\n\n complete(): void {\n const { partialObserver } = this;\n if (partialObserver.complete) {\n try {\n partialObserver.complete();\n } catch (error) {\n handleUnhandledError(error);\n }\n }\n }\n}\n\nexport class SafeSubscriber extends Subscriber {\n constructor(\n observerOrNext?: Partial> | ((value: T) => void) | null,\n error?: ((e?: any) => void) | null,\n complete?: (() => void) | null\n ) {\n super();\n\n let partialObserver: Partial>;\n if (isFunction(observerOrNext) || !observerOrNext) {\n // The first argument is a function, not an observer. The next\n // two arguments *could* be observers, or they could be empty.\n partialObserver = {\n next: (observerOrNext ?? undefined) as (((value: T) => void) | undefined),\n error: error ?? undefined,\n complete: complete ?? undefined,\n };\n } else {\n // The first argument is a partial observer.\n let context: any;\n if (this && config.useDeprecatedNextContext) {\n // This is a deprecated path that made `this.unsubscribe()` available in\n // next handler functions passed to subscribe. This only exists behind a flag\n // now, as it is *very* slow.\n context = Object.create(observerOrNext);\n context.unsubscribe = () => this.unsubscribe();\n partialObserver = {\n next: observerOrNext.next && bind(observerOrNext.next, context),\n error: observerOrNext.error && bind(observerOrNext.error, context),\n complete: observerOrNext.complete && bind(observerOrNext.complete, context),\n };\n } else {\n // The \"normal\" path. Just use the partial observer directly.\n partialObserver = observerOrNext;\n }\n }\n\n // Wrap the partial observer to ensure it's a full observer, and\n // make sure proper error handling is accounted for.\n this.destination = new ConsumerObserver(partialObserver);\n }\n}\n\nfunction handleUnhandledError(error: any) {\n if (config.useDeprecatedSynchronousErrorHandling) {\n captureError(error);\n } else {\n // Ideal path, we report this as an unhandled error,\n // which is thrown on a new call stack.\n reportUnhandledError(error);\n }\n}\n\n/**\n * An error handler used when no error handler was supplied\n * to the SafeSubscriber -- meaning no error handler was supplied\n * do the `subscribe` call on our observable.\n * @param err The error to handle\n */\nfunction defaultErrorHandler(err: any) {\n throw err;\n}\n\n/**\n * A handler for notifications that cannot be sent to a stopped subscriber.\n * @param notification The notification being sent\n * @param subscriber The stopped subscriber\n */\nfunction handleStoppedNotification(notification: ObservableNotification, subscriber: Subscriber) {\n const { onStoppedNotification } = config;\n onStoppedNotification && timeoutProvider.setTimeout(() => onStoppedNotification(notification, subscriber));\n}\n\n/**\n * The observer used as a stub for subscriptions where the user did not\n * pass any arguments to `subscribe`. Comes with the default error handling\n * behavior.\n */\nexport const EMPTY_OBSERVER: Readonly> & { closed: true } = {\n closed: true,\n next: noop,\n error: defaultErrorHandler,\n complete: noop,\n};\n", "/**\n * Symbol.observable or a string \"@@observable\". Used for interop\n *\n * @deprecated We will no longer be exporting this symbol in upcoming versions of RxJS.\n * Instead polyfill and use Symbol.observable directly *or* use https://www.npmjs.com/package/symbol-observable\n */\nexport const observable: string | symbol = (() => (typeof Symbol === 'function' && Symbol.observable) || '@@observable')();\n", "/**\n * This function takes one parameter and just returns it. Simply put,\n * this is like `(x: T): T => x`.\n *\n * ## Examples\n *\n * This is useful in some cases when using things like `mergeMap`\n *\n * ```ts\n * import { interval, take, map, range, mergeMap, identity } from 'rxjs';\n *\n * const source$ = interval(1000).pipe(take(5));\n *\n * const result$ = source$.pipe(\n * map(i => range(i)),\n * mergeMap(identity) // same as mergeMap(x => x)\n * );\n *\n * result$.subscribe({\n * next: console.log\n * });\n * ```\n *\n * Or when you want to selectively apply an operator\n *\n * ```ts\n * import { interval, take, identity } from 'rxjs';\n *\n * const shouldLimit = () => Math.random() < 0.5;\n *\n * const source$ = interval(1000);\n *\n * const result$ = source$.pipe(shouldLimit() ? take(5) : identity);\n *\n * result$.subscribe({\n * next: console.log\n * });\n * ```\n *\n * @param x Any value that is returned by this function\n * @returns The value passed as the first parameter to this function\n */\nexport function identity(x: T): T {\n return x;\n}\n", "import { identity } from './identity';\nimport { UnaryFunction } from '../types';\n\nexport function pipe(): typeof identity;\nexport function pipe(fn1: UnaryFunction): UnaryFunction;\nexport function pipe(fn1: UnaryFunction, fn2: UnaryFunction): UnaryFunction;\nexport function pipe(fn1: UnaryFunction, fn2: UnaryFunction, fn3: UnaryFunction): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction,\n fn7: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction,\n fn7: UnaryFunction,\n fn8: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction,\n fn7: UnaryFunction,\n fn8: UnaryFunction,\n fn9: UnaryFunction\n): UnaryFunction;\nexport function pipe(\n fn1: UnaryFunction,\n fn2: UnaryFunction,\n fn3: UnaryFunction,\n fn4: UnaryFunction,\n fn5: UnaryFunction,\n fn6: UnaryFunction,\n fn7: UnaryFunction,\n fn8: UnaryFunction,\n fn9: UnaryFunction,\n ...fns: UnaryFunction[]\n): UnaryFunction;\n\n/**\n * pipe() can be called on one or more functions, each of which can take one argument (\"UnaryFunction\")\n * and uses it to return a value.\n * It returns a function that takes one argument, passes it to the first UnaryFunction, and then\n * passes the result to the next one, passes that result to the next one, and so on. \n */\nexport function pipe(...fns: Array>): UnaryFunction {\n return pipeFromArray(fns);\n}\n\n/** @internal */\nexport function pipeFromArray(fns: Array>): UnaryFunction {\n if (fns.length === 0) {\n return identity as UnaryFunction;\n }\n\n if (fns.length === 1) {\n return fns[0];\n }\n\n return function piped(input: T): R {\n return fns.reduce((prev: any, fn: UnaryFunction) => fn(prev), input as any);\n };\n}\n", "import { Operator } from './Operator';\nimport { SafeSubscriber, Subscriber } from './Subscriber';\nimport { isSubscription, Subscription } from './Subscription';\nimport { TeardownLogic, OperatorFunction, Subscribable, Observer } from './types';\nimport { observable as Symbol_observable } from './symbol/observable';\nimport { pipeFromArray } from './util/pipe';\nimport { config } from './config';\nimport { isFunction } from './util/isFunction';\nimport { errorContext } from './util/errorContext';\n\n/**\n * A representation of any set of values over any amount of time. This is the most basic building block\n * of RxJS.\n *\n * @class Observable\n */\nexport class Observable implements Subscribable {\n /**\n * @deprecated Internal implementation detail, do not use directly. Will be made internal in v8.\n */\n source: Observable | undefined;\n\n /**\n * @deprecated Internal implementation detail, do not use directly. Will be made internal in v8.\n */\n operator: Operator | undefined;\n\n /**\n * @constructor\n * @param {Function} subscribe the function that is called when the Observable is\n * initially subscribed to. This function is given a Subscriber, to which new values\n * can be `next`ed, or an `error` method can be called to raise an error, or\n * `complete` can be called to notify of a successful completion.\n */\n constructor(subscribe?: (this: Observable, subscriber: Subscriber) => TeardownLogic) {\n if (subscribe) {\n this._subscribe = subscribe;\n }\n }\n\n // HACK: Since TypeScript inherits static properties too, we have to\n // fight against TypeScript here so Subject can have a different static create signature\n /**\n * Creates a new Observable by calling the Observable constructor\n * @owner Observable\n * @method create\n * @param {Function} subscribe? the subscriber function to be passed to the Observable constructor\n * @return {Observable} a new observable\n * @nocollapse\n * @deprecated Use `new Observable()` instead. Will be removed in v8.\n */\n static create: (...args: any[]) => any = (subscribe?: (subscriber: Subscriber) => TeardownLogic) => {\n return new Observable(subscribe);\n };\n\n /**\n * Creates a new Observable, with this Observable instance as the source, and the passed\n * operator defined as the new observable's operator.\n * @method lift\n * @param operator the operator defining the operation to take on the observable\n * @return a new observable with the Operator applied\n * @deprecated Internal implementation detail, do not use directly. Will be made internal in v8.\n * If you have implemented an operator using `lift`, it is recommended that you create an\n * operator by simply returning `new Observable()` directly. See \"Creating new operators from\n * scratch\" section here: https://rxjs.dev/guide/operators\n */\n lift(operator?: Operator): Observable {\n const observable = new Observable();\n observable.source = this;\n observable.operator = operator;\n return observable;\n }\n\n subscribe(observerOrNext?: Partial> | ((value: T) => void)): Subscription;\n /** @deprecated Instead of passing separate callback arguments, use an observer argument. Signatures taking separate callback arguments will be removed in v8. Details: https://rxjs.dev/deprecations/subscribe-arguments */\n subscribe(next?: ((value: T) => void) | null, error?: ((error: any) => void) | null, complete?: (() => void) | null): Subscription;\n /**\n * Invokes an execution of an Observable and registers Observer handlers for notifications it will emit.\n *\n * Use it when you have all these Observables, but still nothing is happening.\n *\n * `subscribe` is not a regular operator, but a method that calls Observable's internal `subscribe` function. It\n * might be for example a function that you passed to Observable's constructor, but most of the time it is\n * a library implementation, which defines what will be emitted by an Observable, and when it be will emitted. This means\n * that calling `subscribe` is actually the moment when Observable starts its work, not when it is created, as it is often\n * the thought.\n *\n * Apart from starting the execution of an Observable, this method allows you to listen for values\n * that an Observable emits, as well as for when it completes or errors. You can achieve this in two\n * of the following ways.\n *\n * The first way is creating an object that implements {@link Observer} interface. It should have methods\n * defined by that interface, but note that it should be just a regular JavaScript object, which you can create\n * yourself in any way you want (ES6 class, classic function constructor, object literal etc.). In particular, do\n * not attempt to use any RxJS implementation details to create Observers - you don't need them. Remember also\n * that your object does not have to implement all methods. If you find yourself creating a method that doesn't\n * do anything, you can simply omit it. Note however, if the `error` method is not provided and an error happens,\n * it will be thrown asynchronously. Errors thrown asynchronously cannot be caught using `try`/`catch`. Instead,\n * use the {@link onUnhandledError} configuration option or use a runtime handler (like `window.onerror` or\n * `process.on('error)`) to be notified of unhandled errors. Because of this, it's recommended that you provide\n * an `error` method to avoid missing thrown errors.\n *\n * The second way is to give up on Observer object altogether and simply provide callback functions in place of its methods.\n * This means you can provide three functions as arguments to `subscribe`, where the first function is equivalent\n * of a `next` method, the second of an `error` method and the third of a `complete` method. Just as in case of an Observer,\n * if you do not need to listen for something, you can omit a function by passing `undefined` or `null`,\n * since `subscribe` recognizes these functions by where they were placed in function call. When it comes\n * to the `error` function, as with an Observer, if not provided, errors emitted by an Observable will be thrown asynchronously.\n *\n * You can, however, subscribe with no parameters at all. This may be the case where you're not interested in terminal events\n * and you also handled emissions internally by using operators (e.g. using `tap`).\n *\n * Whichever style of calling `subscribe` you use, in both cases it returns a Subscription object.\n * This object allows you to call `unsubscribe` on it, which in turn will stop the work that an Observable does and will clean\n * up all resources that an Observable used. Note that cancelling a subscription will not call `complete` callback\n * provided to `subscribe` function, which is reserved for a regular completion signal that comes from an Observable.\n *\n * Remember that callbacks provided to `subscribe` are not guaranteed to be called asynchronously.\n * It is an Observable itself that decides when these functions will be called. For example {@link of}\n * by default emits all its values synchronously. Always check documentation for how given Observable\n * will behave when subscribed and if its default behavior can be modified with a `scheduler`.\n *\n * #### Examples\n *\n * Subscribe with an {@link guide/observer Observer}\n *\n * ```ts\n * import { of } from 'rxjs';\n *\n * const sumObserver = {\n * sum: 0,\n * next(value) {\n * console.log('Adding: ' + value);\n * this.sum = this.sum + value;\n * },\n * error() {\n * // We actually could just remove this method,\n * // since we do not really care about errors right now.\n * },\n * complete() {\n * console.log('Sum equals: ' + this.sum);\n * }\n * };\n *\n * of(1, 2, 3) // Synchronously emits 1, 2, 3 and then completes.\n * .subscribe(sumObserver);\n *\n * // Logs:\n * // 'Adding: 1'\n * // 'Adding: 2'\n * // 'Adding: 3'\n * // 'Sum equals: 6'\n * ```\n *\n * Subscribe with functions ({@link deprecations/subscribe-arguments deprecated})\n *\n * ```ts\n * import { of } from 'rxjs'\n *\n * let sum = 0;\n *\n * of(1, 2, 3).subscribe(\n * value => {\n * console.log('Adding: ' + value);\n * sum = sum + value;\n * },\n * undefined,\n * () => console.log('Sum equals: ' + sum)\n * );\n *\n * // Logs:\n * // 'Adding: 1'\n * // 'Adding: 2'\n * // 'Adding: 3'\n * // 'Sum equals: 6'\n * ```\n *\n * Cancel a subscription\n *\n * ```ts\n * import { interval } from 'rxjs';\n *\n * const subscription = interval(1000).subscribe({\n * next(num) {\n * console.log(num)\n * },\n * complete() {\n * // Will not be called, even when cancelling subscription.\n * console.log('completed!');\n * }\n * });\n *\n * setTimeout(() => {\n * subscription.unsubscribe();\n * console.log('unsubscribed!');\n * }, 2500);\n *\n * // Logs:\n * // 0 after 1s\n * // 1 after 2s\n * // 'unsubscribed!' after 2.5s\n * ```\n *\n * @param {Observer|Function} observerOrNext (optional) Either an observer with methods to be called,\n * or the first of three possible handlers, which is the handler for each value emitted from the subscribed\n * Observable.\n * @param {Function} error (optional) A handler for a terminal event resulting from an error. If no error handler is provided,\n * the error will be thrown asynchronously as unhandled.\n * @param {Function} complete (optional) A handler for a terminal event resulting from successful completion.\n * @return {Subscription} a subscription reference to the registered handlers\n * @method subscribe\n */\n subscribe(\n observerOrNext?: Partial> | ((value: T) => void) | null,\n error?: ((error: any) => void) | null,\n complete?: (() => void) | null\n ): Subscription {\n const subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);\n\n errorContext(() => {\n const { operator, source } = this;\n subscriber.add(\n operator\n ? // We're dealing with a subscription in the\n // operator chain to one of our lifted operators.\n operator.call(subscriber, source)\n : source\n ? // If `source` has a value, but `operator` does not, something that\n // had intimate knowledge of our API, like our `Subject`, must have\n // set it. We're going to just call `_subscribe` directly.\n this._subscribe(subscriber)\n : // In all other cases, we're likely wrapping a user-provided initializer\n // function, so we need to catch errors and handle them appropriately.\n this._trySubscribe(subscriber)\n );\n });\n\n return subscriber;\n }\n\n /** @internal */\n protected _trySubscribe(sink: Subscriber): TeardownLogic {\n try {\n return this._subscribe(sink);\n } catch (err) {\n // We don't need to return anything in this case,\n // because it's just going to try to `add()` to a subscription\n // above.\n sink.error(err);\n }\n }\n\n /**\n * Used as a NON-CANCELLABLE means of subscribing to an observable, for use with\n * APIs that expect promises, like `async/await`. You cannot unsubscribe from this.\n *\n * **WARNING**: Only use this with observables you *know* will complete. If the source\n * observable does not complete, you will end up with a promise that is hung up, and\n * potentially all of the state of an async function hanging out in memory. To avoid\n * this situation, look into adding something like {@link timeout}, {@link take},\n * {@link takeWhile}, or {@link takeUntil} amongst others.\n *\n * #### Example\n *\n * ```ts\n * import { interval, take } from 'rxjs';\n *\n * const source$ = interval(1000).pipe(take(4));\n *\n * async function getTotal() {\n * let total = 0;\n *\n * await source$.forEach(value => {\n * total += value;\n * console.log('observable -> ' + value);\n * });\n *\n * return total;\n * }\n *\n * getTotal().then(\n * total => console.log('Total: ' + total)\n * );\n *\n * // Expected:\n * // 'observable -> 0'\n * // 'observable -> 1'\n * // 'observable -> 2'\n * // 'observable -> 3'\n * // 'Total: 6'\n * ```\n *\n * @param next a handler for each value emitted by the observable\n * @return a promise that either resolves on observable completion or\n * rejects with the handled error\n */\n forEach(next: (value: T) => void): Promise;\n\n /**\n * @param next a handler for each value emitted by the observable\n * @param promiseCtor a constructor function used to instantiate the Promise\n * @return a promise that either resolves on observable completion or\n * rejects with the handled error\n * @deprecated Passing a Promise constructor will no longer be available\n * in upcoming versions of RxJS. This is because it adds weight to the library, for very\n * little benefit. If you need this functionality, it is recommended that you either\n * polyfill Promise, or you create an adapter to convert the returned native promise\n * to whatever promise implementation you wanted. Will be removed in v8.\n */\n forEach(next: (value: T) => void, promiseCtor: PromiseConstructorLike): Promise;\n\n forEach(next: (value: T) => void, promiseCtor?: PromiseConstructorLike): Promise {\n promiseCtor = getPromiseCtor(promiseCtor);\n\n return new promiseCtor((resolve, reject) => {\n const subscriber = new SafeSubscriber({\n next: (value) => {\n try {\n next(value);\n } catch (err) {\n reject(err);\n subscriber.unsubscribe();\n }\n },\n error: reject,\n complete: resolve,\n });\n this.subscribe(subscriber);\n }) as Promise;\n }\n\n /** @internal */\n protected _subscribe(subscriber: Subscriber): TeardownLogic {\n return this.source?.subscribe(subscriber);\n }\n\n /**\n * An interop point defined by the es7-observable spec https://github.com/zenparsing/es-observable\n * @method Symbol.observable\n * @return {Observable} this instance of the observable\n */\n [Symbol_observable]() {\n return this;\n }\n\n /* tslint:disable:max-line-length */\n pipe(): Observable;\n pipe(op1: OperatorFunction): Observable;\n pipe(op1: OperatorFunction, op2: OperatorFunction): Observable;\n pipe(op1: OperatorFunction, op2: OperatorFunction, op3: OperatorFunction): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction,\n op7: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction,\n op7: OperatorFunction,\n op8: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction,\n op7: OperatorFunction,\n op8: OperatorFunction,\n op9: OperatorFunction\n ): Observable;\n pipe(\n op1: OperatorFunction,\n op2: OperatorFunction,\n op3: OperatorFunction,\n op4: OperatorFunction,\n op5: OperatorFunction,\n op6: OperatorFunction,\n op7: OperatorFunction,\n op8: OperatorFunction,\n op9: OperatorFunction,\n ...operations: OperatorFunction[]\n ): Observable;\n /* tslint:enable:max-line-length */\n\n /**\n * Used to stitch together functional operators into a chain.\n * @method pipe\n * @return {Observable} the Observable result of all of the operators having\n * been called in the order they were passed in.\n *\n * ## Example\n *\n * ```ts\n * import { interval, filter, map, scan } from 'rxjs';\n *\n * interval(1000)\n * .pipe(\n * filter(x => x % 2 === 0),\n * map(x => x + x),\n * scan((acc, x) => acc + x)\n * )\n * .subscribe(x => console.log(x));\n * ```\n */\n pipe(...operations: OperatorFunction[]): Observable {\n return pipeFromArray(operations)(this);\n }\n\n /* tslint:disable:max-line-length */\n /** @deprecated Replaced with {@link firstValueFrom} and {@link lastValueFrom}. Will be removed in v8. Details: https://rxjs.dev/deprecations/to-promise */\n toPromise(): Promise;\n /** @deprecated Replaced with {@link firstValueFrom} and {@link lastValueFrom}. Will be removed in v8. Details: https://rxjs.dev/deprecations/to-promise */\n toPromise(PromiseCtor: typeof Promise): Promise;\n /** @deprecated Replaced with {@link firstValueFrom} and {@link lastValueFrom}. Will be removed in v8. Details: https://rxjs.dev/deprecations/to-promise */\n toPromise(PromiseCtor: PromiseConstructorLike): Promise;\n /* tslint:enable:max-line-length */\n\n /**\n * Subscribe to this Observable and get a Promise resolving on\n * `complete` with the last emission (if any).\n *\n * **WARNING**: Only use this with observables you *know* will complete. If the source\n * observable does not complete, you will end up with a promise that is hung up, and\n * potentially all of the state of an async function hanging out in memory. To avoid\n * this situation, look into adding something like {@link timeout}, {@link take},\n * {@link takeWhile}, or {@link takeUntil} amongst others.\n *\n * @method toPromise\n * @param [promiseCtor] a constructor function used to instantiate\n * the Promise\n * @return A Promise that resolves with the last value emit, or\n * rejects on an error. If there were no emissions, Promise\n * resolves with undefined.\n * @deprecated Replaced with {@link firstValueFrom} and {@link lastValueFrom}. Will be removed in v8. Details: https://rxjs.dev/deprecations/to-promise\n */\n toPromise(promiseCtor?: PromiseConstructorLike): Promise {\n promiseCtor = getPromiseCtor(promiseCtor);\n\n return new promiseCtor((resolve, reject) => {\n let value: T | undefined;\n this.subscribe(\n (x: T) => (value = x),\n (err: any) => reject(err),\n () => resolve(value)\n );\n }) as Promise;\n }\n}\n\n/**\n * Decides between a passed promise constructor from consuming code,\n * A default configured promise constructor, and the native promise\n * constructor and returns it. If nothing can be found, it will throw\n * an error.\n * @param promiseCtor The optional promise constructor to passed by consuming code\n */\nfunction getPromiseCtor(promiseCtor: PromiseConstructorLike | undefined) {\n return promiseCtor ?? config.Promise ?? Promise;\n}\n\nfunction isObserver(value: any): value is Observer {\n return value && isFunction(value.next) && isFunction(value.error) && isFunction(value.complete);\n}\n\nfunction isSubscriber(value: any): value is Subscriber {\n return (value && value instanceof Subscriber) || (isObserver(value) && isSubscription(value));\n}\n", "import { Observable } from '../Observable';\nimport { Subscriber } from '../Subscriber';\nimport { OperatorFunction } from '../types';\nimport { isFunction } from './isFunction';\n\n/**\n * Used to determine if an object is an Observable with a lift function.\n */\nexport function hasLift(source: any): source is { lift: InstanceType['lift'] } {\n return isFunction(source?.lift);\n}\n\n/**\n * Creates an `OperatorFunction`. Used to define operators throughout the library in a concise way.\n * @param init The logic to connect the liftedSource to the subscriber at the moment of subscription.\n */\nexport function operate(\n init: (liftedSource: Observable, subscriber: Subscriber) => (() => void) | void\n): OperatorFunction {\n return (source: Observable) => {\n if (hasLift(source)) {\n return source.lift(function (this: Subscriber, liftedSource: Observable) {\n try {\n return init(liftedSource, this);\n } catch (err) {\n this.error(err);\n }\n });\n }\n throw new TypeError('Unable to lift unknown Observable type');\n };\n}\n", "import { Subscriber } from '../Subscriber';\n\n/**\n * Creates an instance of an `OperatorSubscriber`.\n * @param destination The downstream subscriber.\n * @param onNext Handles next values, only called if this subscriber is not stopped or closed. Any\n * error that occurs in this function is caught and sent to the `error` method of this subscriber.\n * @param onError Handles errors from the subscription, any errors that occur in this handler are caught\n * and send to the `destination` error handler.\n * @param onComplete Handles completion notification from the subscription. Any errors that occur in\n * this handler are sent to the `destination` error handler.\n * @param onFinalize Additional teardown logic here. This will only be called on teardown if the\n * subscriber itself is not already closed. This is called after all other teardown logic is executed.\n */\nexport function createOperatorSubscriber(\n destination: Subscriber,\n onNext?: (value: T) => void,\n onComplete?: () => void,\n onError?: (err: any) => void,\n onFinalize?: () => void\n): Subscriber {\n return new OperatorSubscriber(destination, onNext, onComplete, onError, onFinalize);\n}\n\n/**\n * A generic helper for allowing operators to be created with a Subscriber and\n * use closures to capture necessary state from the operator function itself.\n */\nexport class OperatorSubscriber extends Subscriber {\n /**\n * Creates an instance of an `OperatorSubscriber`.\n * @param destination The downstream subscriber.\n * @param onNext Handles next values, only called if this subscriber is not stopped or closed. Any\n * error that occurs in this function is caught and sent to the `error` method of this subscriber.\n * @param onError Handles errors from the subscription, any errors that occur in this handler are caught\n * and send to the `destination` error handler.\n * @param onComplete Handles completion notification from the subscription. Any errors that occur in\n * this handler are sent to the `destination` error handler.\n * @param onFinalize Additional finalization logic here. This will only be called on finalization if the\n * subscriber itself is not already closed. This is called after all other finalization logic is executed.\n * @param shouldUnsubscribe An optional check to see if an unsubscribe call should truly unsubscribe.\n * NOTE: This currently **ONLY** exists to support the strange behavior of {@link groupBy}, where unsubscription\n * to the resulting observable does not actually disconnect from the source if there are active subscriptions\n * to any grouped observable. (DO NOT EXPOSE OR USE EXTERNALLY!!!)\n */\n constructor(\n destination: Subscriber,\n onNext?: (value: T) => void,\n onComplete?: () => void,\n onError?: (err: any) => void,\n private onFinalize?: () => void,\n private shouldUnsubscribe?: () => boolean\n ) {\n // It's important - for performance reasons - that all of this class's\n // members are initialized and that they are always initialized in the same\n // order. This will ensure that all OperatorSubscriber instances have the\n // same hidden class in V8. This, in turn, will help keep the number of\n // hidden classes involved in property accesses within the base class as\n // low as possible. If the number of hidden classes involved exceeds four,\n // the property accesses will become megamorphic and performance penalties\n // will be incurred - i.e. inline caches won't be used.\n //\n // The reasons for ensuring all instances have the same hidden class are\n // further discussed in this blog post from Benedikt Meurer:\n // https://benediktmeurer.de/2018/03/23/impact-of-polymorphism-on-component-based-frameworks-like-react/\n super(destination);\n this._next = onNext\n ? function (this: OperatorSubscriber, value: T) {\n try {\n onNext(value);\n } catch (err) {\n destination.error(err);\n }\n }\n : super._next;\n this._error = onError\n ? function (this: OperatorSubscriber, err: any) {\n try {\n onError(err);\n } catch (err) {\n // Send any errors that occur down stream.\n destination.error(err);\n } finally {\n // Ensure finalization.\n this.unsubscribe();\n }\n }\n : super._error;\n this._complete = onComplete\n ? function (this: OperatorSubscriber) {\n try {\n onComplete();\n } catch (err) {\n // Send any errors that occur down stream.\n destination.error(err);\n } finally {\n // Ensure finalization.\n this.unsubscribe();\n }\n }\n : super._complete;\n }\n\n unsubscribe() {\n if (!this.shouldUnsubscribe || this.shouldUnsubscribe()) {\n const { closed } = this;\n super.unsubscribe();\n // Execute additional teardown if we have any and we didn't already do so.\n !closed && this.onFinalize?.();\n }\n }\n}\n", "import { Subscription } from '../Subscription';\n\ninterface AnimationFrameProvider {\n schedule(callback: FrameRequestCallback): Subscription;\n requestAnimationFrame: typeof requestAnimationFrame;\n cancelAnimationFrame: typeof cancelAnimationFrame;\n delegate:\n | {\n requestAnimationFrame: typeof requestAnimationFrame;\n cancelAnimationFrame: typeof cancelAnimationFrame;\n }\n | undefined;\n}\n\nexport const animationFrameProvider: AnimationFrameProvider = {\n // When accessing the delegate, use the variable rather than `this` so that\n // the functions can be called without being bound to the provider.\n schedule(callback) {\n let request = requestAnimationFrame;\n let cancel: typeof cancelAnimationFrame | undefined = cancelAnimationFrame;\n const { delegate } = animationFrameProvider;\n if (delegate) {\n request = delegate.requestAnimationFrame;\n cancel = delegate.cancelAnimationFrame;\n }\n const handle = request((timestamp) => {\n // Clear the cancel function. The request has been fulfilled, so\n // attempting to cancel the request upon unsubscription would be\n // pointless.\n cancel = undefined;\n callback(timestamp);\n });\n return new Subscription(() => cancel?.(handle));\n },\n requestAnimationFrame(...args) {\n const { delegate } = animationFrameProvider;\n return (delegate?.requestAnimationFrame || requestAnimationFrame)(...args);\n },\n cancelAnimationFrame(...args) {\n const { delegate } = animationFrameProvider;\n return (delegate?.cancelAnimationFrame || cancelAnimationFrame)(...args);\n },\n delegate: undefined,\n};\n", "import { createErrorClass } from './createErrorClass';\n\nexport interface ObjectUnsubscribedError extends Error {}\n\nexport interface ObjectUnsubscribedErrorCtor {\n /**\n * @deprecated Internal implementation detail. Do not construct error instances.\n * Cannot be tagged as internal: https://github.com/ReactiveX/rxjs/issues/6269\n */\n new (): ObjectUnsubscribedError;\n}\n\n/**\n * An error thrown when an action is invalid because the object has been\n * unsubscribed.\n *\n * @see {@link Subject}\n * @see {@link BehaviorSubject}\n *\n * @class ObjectUnsubscribedError\n */\nexport const ObjectUnsubscribedError: ObjectUnsubscribedErrorCtor = createErrorClass(\n (_super) =>\n function ObjectUnsubscribedErrorImpl(this: any) {\n _super(this);\n this.name = 'ObjectUnsubscribedError';\n this.message = 'object unsubscribed';\n }\n);\n", "import { Operator } from './Operator';\nimport { Observable } from './Observable';\nimport { Subscriber } from './Subscriber';\nimport { Subscription, EMPTY_SUBSCRIPTION } from './Subscription';\nimport { Observer, SubscriptionLike, TeardownLogic } from './types';\nimport { ObjectUnsubscribedError } from './util/ObjectUnsubscribedError';\nimport { arrRemove } from './util/arrRemove';\nimport { errorContext } from './util/errorContext';\n\n/**\n * A Subject is a special type of Observable that allows values to be\n * multicasted to many Observers. Subjects are like EventEmitters.\n *\n * Every Subject is an Observable and an Observer. You can subscribe to a\n * Subject, and you can call next to feed values as well as error and complete.\n */\nexport class Subject extends Observable implements SubscriptionLike {\n closed = false;\n\n private currentObservers: Observer[] | null = null;\n\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n observers: Observer[] = [];\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n isStopped = false;\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n hasError = false;\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n thrownError: any = null;\n\n /**\n * Creates a \"subject\" by basically gluing an observer to an observable.\n *\n * @nocollapse\n * @deprecated Recommended you do not use. Will be removed at some point in the future. Plans for replacement still under discussion.\n */\n static create: (...args: any[]) => any = (destination: Observer, source: Observable): AnonymousSubject => {\n return new AnonymousSubject(destination, source);\n };\n\n constructor() {\n // NOTE: This must be here to obscure Observable's constructor.\n super();\n }\n\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n lift(operator: Operator): Observable {\n const subject = new AnonymousSubject(this, this);\n subject.operator = operator as any;\n return subject as any;\n }\n\n /** @internal */\n protected _throwIfClosed() {\n if (this.closed) {\n throw new ObjectUnsubscribedError();\n }\n }\n\n next(value: T) {\n errorContext(() => {\n this._throwIfClosed();\n if (!this.isStopped) {\n if (!this.currentObservers) {\n this.currentObservers = Array.from(this.observers);\n }\n for (const observer of this.currentObservers) {\n observer.next(value);\n }\n }\n });\n }\n\n error(err: any) {\n errorContext(() => {\n this._throwIfClosed();\n if (!this.isStopped) {\n this.hasError = this.isStopped = true;\n this.thrownError = err;\n const { observers } = this;\n while (observers.length) {\n observers.shift()!.error(err);\n }\n }\n });\n }\n\n complete() {\n errorContext(() => {\n this._throwIfClosed();\n if (!this.isStopped) {\n this.isStopped = true;\n const { observers } = this;\n while (observers.length) {\n observers.shift()!.complete();\n }\n }\n });\n }\n\n unsubscribe() {\n this.isStopped = this.closed = true;\n this.observers = this.currentObservers = null!;\n }\n\n get observed() {\n return this.observers?.length > 0;\n }\n\n /** @internal */\n protected _trySubscribe(subscriber: Subscriber): TeardownLogic {\n this._throwIfClosed();\n return super._trySubscribe(subscriber);\n }\n\n /** @internal */\n protected _subscribe(subscriber: Subscriber): Subscription {\n this._throwIfClosed();\n this._checkFinalizedStatuses(subscriber);\n return this._innerSubscribe(subscriber);\n }\n\n /** @internal */\n protected _innerSubscribe(subscriber: Subscriber) {\n const { hasError, isStopped, observers } = this;\n if (hasError || isStopped) {\n return EMPTY_SUBSCRIPTION;\n }\n this.currentObservers = null;\n observers.push(subscriber);\n return new Subscription(() => {\n this.currentObservers = null;\n arrRemove(observers, subscriber);\n });\n }\n\n /** @internal */\n protected _checkFinalizedStatuses(subscriber: Subscriber) {\n const { hasError, thrownError, isStopped } = this;\n if (hasError) {\n subscriber.error(thrownError);\n } else if (isStopped) {\n subscriber.complete();\n }\n }\n\n /**\n * Creates a new Observable with this Subject as the source. You can do this\n * to create custom Observer-side logic of the Subject and conceal it from\n * code that uses the Observable.\n * @return {Observable} Observable that the Subject casts to\n */\n asObservable(): Observable {\n const observable: any = new Observable();\n observable.source = this;\n return observable;\n }\n}\n\n/**\n * @class AnonymousSubject\n */\nexport class AnonymousSubject extends Subject {\n constructor(\n /** @deprecated Internal implementation detail, do not use directly. Will be made internal in v8. */\n public destination?: Observer,\n source?: Observable\n ) {\n super();\n this.source = source;\n }\n\n next(value: T) {\n this.destination?.next?.(value);\n }\n\n error(err: any) {\n this.destination?.error?.(err);\n }\n\n complete() {\n this.destination?.complete?.();\n }\n\n /** @internal */\n protected _subscribe(subscriber: Subscriber): Subscription {\n return this.source?.subscribe(subscriber) ?? EMPTY_SUBSCRIPTION;\n }\n}\n", "import { Subject } from './Subject';\nimport { Subscriber } from './Subscriber';\nimport { Subscription } from './Subscription';\n\n/**\n * A variant of Subject that requires an initial value and emits its current\n * value whenever it is subscribed to.\n *\n * @class BehaviorSubject\n */\nexport class BehaviorSubject extends Subject {\n constructor(private _value: T) {\n super();\n }\n\n get value(): T {\n return this.getValue();\n }\n\n /** @internal */\n protected _subscribe(subscriber: Subscriber): Subscription {\n const subscription = super._subscribe(subscriber);\n !subscription.closed && subscriber.next(this._value);\n return subscription;\n }\n\n getValue(): T {\n const { hasError, thrownError, _value } = this;\n if (hasError) {\n throw thrownError;\n }\n this._throwIfClosed();\n return _value;\n }\n\n next(value: T): void {\n super.next((this._value = value));\n }\n}\n", "import { TimestampProvider } from '../types';\n\ninterface DateTimestampProvider extends TimestampProvider {\n delegate: TimestampProvider | undefined;\n}\n\nexport const dateTimestampProvider: DateTimestampProvider = {\n now() {\n // Use the variable rather than `this` so that the function can be called\n // without being bound to the provider.\n return (dateTimestampProvider.delegate || Date).now();\n },\n delegate: undefined,\n};\n", "import { Subject } from './Subject';\nimport { TimestampProvider } from './types';\nimport { Subscriber } from './Subscriber';\nimport { Subscription } from './Subscription';\nimport { dateTimestampProvider } from './scheduler/dateTimestampProvider';\n\n/**\n * A variant of {@link Subject} that \"replays\" old values to new subscribers by emitting them when they first subscribe.\n *\n * `ReplaySubject` has an internal buffer that will store a specified number of values that it has observed. Like `Subject`,\n * `ReplaySubject` \"observes\" values by having them passed to its `next` method. When it observes a value, it will store that\n * value for a time determined by the configuration of the `ReplaySubject`, as passed to its constructor.\n *\n * When a new subscriber subscribes to the `ReplaySubject` instance, it will synchronously emit all values in its buffer in\n * a First-In-First-Out (FIFO) manner. The `ReplaySubject` will also complete, if it has observed completion; and it will\n * error if it has observed an error.\n *\n * There are two main configuration items to be concerned with:\n *\n * 1. `bufferSize` - This will determine how many items are stored in the buffer, defaults to infinite.\n * 2. `windowTime` - The amount of time to hold a value in the buffer before removing it from the buffer.\n *\n * Both configurations may exist simultaneously. So if you would like to buffer a maximum of 3 values, as long as the values\n * are less than 2 seconds old, you could do so with a `new ReplaySubject(3, 2000)`.\n *\n * ### Differences with BehaviorSubject\n *\n * `BehaviorSubject` is similar to `new ReplaySubject(1)`, with a couple of exceptions:\n *\n * 1. `BehaviorSubject` comes \"primed\" with a single value upon construction.\n * 2. `ReplaySubject` will replay values, even after observing an error, where `BehaviorSubject` will not.\n *\n * @see {@link Subject}\n * @see {@link BehaviorSubject}\n * @see {@link shareReplay}\n */\nexport class ReplaySubject extends Subject {\n private _buffer: (T | number)[] = [];\n private _infiniteTimeWindow = true;\n\n /**\n * @param bufferSize The size of the buffer to replay on subscription\n * @param windowTime The amount of time the buffered items will stay buffered\n * @param timestampProvider An object with a `now()` method that provides the current timestamp. This is used to\n * calculate the amount of time something has been buffered.\n */\n constructor(\n private _bufferSize = Infinity,\n private _windowTime = Infinity,\n private _timestampProvider: TimestampProvider = dateTimestampProvider\n ) {\n super();\n this._infiniteTimeWindow = _windowTime === Infinity;\n this._bufferSize = Math.max(1, _bufferSize);\n this._windowTime = Math.max(1, _windowTime);\n }\n\n next(value: T): void {\n const { isStopped, _buffer, _infiniteTimeWindow, _timestampProvider, _windowTime } = this;\n if (!isStopped) {\n _buffer.push(value);\n !_infiniteTimeWindow && _buffer.push(_timestampProvider.now() + _windowTime);\n }\n this._trimBuffer();\n super.next(value);\n }\n\n /** @internal */\n protected _subscribe(subscriber: Subscriber): Subscription {\n this._throwIfClosed();\n this._trimBuffer();\n\n const subscription = this._innerSubscribe(subscriber);\n\n const { _infiniteTimeWindow, _buffer } = this;\n // We use a copy here, so reentrant code does not mutate our array while we're\n // emitting it to a new subscriber.\n const copy = _buffer.slice();\n for (let i = 0; i < copy.length && !subscriber.closed; i += _infiniteTimeWindow ? 1 : 2) {\n subscriber.next(copy[i] as T);\n }\n\n this._checkFinalizedStatuses(subscriber);\n\n return subscription;\n }\n\n private _trimBuffer() {\n const { _bufferSize, _timestampProvider, _buffer, _infiniteTimeWindow } = this;\n // If we don't have an infinite buffer size, and we're over the length,\n // use splice to truncate the old buffer values off. Note that we have to\n // double the size for instances where we're not using an infinite time window\n // because we're storing the values and the timestamps in the same array.\n const adjustedBufferSize = (_infiniteTimeWindow ? 1 : 2) * _bufferSize;\n _bufferSize < Infinity && adjustedBufferSize < _buffer.length && _buffer.splice(0, _buffer.length - adjustedBufferSize);\n\n // Now, if we're not in an infinite time window, remove all values where the time is\n // older than what is allowed.\n if (!_infiniteTimeWindow) {\n const now = _timestampProvider.now();\n let last = 0;\n // Search the array for the first timestamp that isn't expired and\n // truncate the buffer up to that point.\n for (let i = 1; i < _buffer.length && (_buffer[i] as number) <= now; i += 2) {\n last = i;\n }\n last && _buffer.splice(0, last + 1);\n }\n }\n}\n", "import { Scheduler } from '../Scheduler';\nimport { Subscription } from '../Subscription';\nimport { SchedulerAction } from '../types';\n\n/**\n * A unit of work to be executed in a `scheduler`. An action is typically\n * created from within a {@link SchedulerLike} and an RxJS user does not need to concern\n * themselves about creating and manipulating an Action.\n *\n * ```ts\n * class Action extends Subscription {\n * new (scheduler: Scheduler, work: (state?: T) => void);\n * schedule(state?: T, delay: number = 0): Subscription;\n * }\n * ```\n *\n * @class Action\n */\nexport class Action extends Subscription {\n constructor(scheduler: Scheduler, work: (this: SchedulerAction, state?: T) => void) {\n super();\n }\n /**\n * Schedules this action on its parent {@link SchedulerLike} for execution. May be passed\n * some context object, `state`. May happen at some point in the future,\n * according to the `delay` parameter, if specified.\n * @param {T} [state] Some contextual data that the `work` function uses when\n * called by the Scheduler.\n * @param {number} [delay] Time to wait before executing the work, where the\n * time unit is implicit and defined by the Scheduler.\n * @return {void}\n */\n public schedule(state?: T, delay: number = 0): Subscription {\n return this;\n }\n}\n", "import type { TimerHandle } from './timerHandle';\ntype SetIntervalFunction = (handler: () => void, timeout?: number, ...args: any[]) => TimerHandle;\ntype ClearIntervalFunction = (handle: TimerHandle) => void;\n\ninterface IntervalProvider {\n setInterval: SetIntervalFunction;\n clearInterval: ClearIntervalFunction;\n delegate:\n | {\n setInterval: SetIntervalFunction;\n clearInterval: ClearIntervalFunction;\n }\n | undefined;\n}\n\nexport const intervalProvider: IntervalProvider = {\n // When accessing the delegate, use the variable rather than `this` so that\n // the functions can be called without being bound to the provider.\n setInterval(handler: () => void, timeout?: number, ...args) {\n const { delegate } = intervalProvider;\n if (delegate?.setInterval) {\n return delegate.setInterval(handler, timeout, ...args);\n }\n return setInterval(handler, timeout, ...args);\n },\n clearInterval(handle) {\n const { delegate } = intervalProvider;\n return (delegate?.clearInterval || clearInterval)(handle as any);\n },\n delegate: undefined,\n};\n", "import { Action } from './Action';\nimport { SchedulerAction } from '../types';\nimport { Subscription } from '../Subscription';\nimport { AsyncScheduler } from './AsyncScheduler';\nimport { intervalProvider } from './intervalProvider';\nimport { arrRemove } from '../util/arrRemove';\nimport { TimerHandle } from './timerHandle';\n\nexport class AsyncAction extends Action {\n public id: TimerHandle | undefined;\n public state?: T;\n // @ts-ignore: Property has no initializer and is not definitely assigned\n public delay: number;\n protected pending: boolean = false;\n\n constructor(protected scheduler: AsyncScheduler, protected work: (this: SchedulerAction, state?: T) => void) {\n super(scheduler, work);\n }\n\n public schedule(state?: T, delay: number = 0): Subscription {\n if (this.closed) {\n return this;\n }\n\n // Always replace the current state with the new state.\n this.state = state;\n\n const id = this.id;\n const scheduler = this.scheduler;\n\n //\n // Important implementation note:\n //\n // Actions only execute once by default, unless rescheduled from within the\n // scheduled callback. This allows us to implement single and repeat\n // actions via the same code path, without adding API surface area, as well\n // as mimic traditional recursion but across asynchronous boundaries.\n //\n // However, JS runtimes and timers distinguish between intervals achieved by\n // serial `setTimeout` calls vs. a single `setInterval` call. An interval of\n // serial `setTimeout` calls can be individually delayed, which delays\n // scheduling the next `setTimeout`, and so on. `setInterval` attempts to\n // guarantee the interval callback will be invoked more precisely to the\n // interval period, regardless of load.\n //\n // Therefore, we use `setInterval` to schedule single and repeat actions.\n // If the action reschedules itself with the same delay, the interval is not\n // canceled. If the action doesn't reschedule, or reschedules with a\n // different delay, the interval will be canceled after scheduled callback\n // execution.\n //\n if (id != null) {\n this.id = this.recycleAsyncId(scheduler, id, delay);\n }\n\n // Set the pending flag indicating that this action has been scheduled, or\n // has recursively rescheduled itself.\n this.pending = true;\n\n this.delay = delay;\n // If this action has already an async Id, don't request a new one.\n this.id = this.id ?? this.requestAsyncId(scheduler, this.id, delay);\n\n return this;\n }\n\n protected requestAsyncId(scheduler: AsyncScheduler, _id?: TimerHandle, delay: number = 0): TimerHandle {\n return intervalProvider.setInterval(scheduler.flush.bind(scheduler, this), delay);\n }\n\n protected recycleAsyncId(_scheduler: AsyncScheduler, id?: TimerHandle, delay: number | null = 0): TimerHandle | undefined {\n // If this action is rescheduled with the same delay time, don't clear the interval id.\n if (delay != null && this.delay === delay && this.pending === false) {\n return id;\n }\n // Otherwise, if the action's delay time is different from the current delay,\n // or the action has been rescheduled before it's executed, clear the interval id\n if (id != null) {\n intervalProvider.clearInterval(id);\n }\n\n return undefined;\n }\n\n /**\n * Immediately executes this action and the `work` it contains.\n * @return {any}\n */\n public execute(state: T, delay: number): any {\n if (this.closed) {\n return new Error('executing a cancelled action');\n }\n\n this.pending = false;\n const error = this._execute(state, delay);\n if (error) {\n return error;\n } else if (this.pending === false && this.id != null) {\n // Dequeue if the action didn't reschedule itself. Don't call\n // unsubscribe(), because the action could reschedule later.\n // For example:\n // ```\n // scheduler.schedule(function doWork(counter) {\n // /* ... I'm a busy worker bee ... */\n // var originalAction = this;\n // /* wait 100ms before rescheduling the action */\n // setTimeout(function () {\n // originalAction.schedule(counter + 1);\n // }, 100);\n // }, 1000);\n // ```\n this.id = this.recycleAsyncId(this.scheduler, this.id, null);\n }\n }\n\n protected _execute(state: T, _delay: number): any {\n let errored: boolean = false;\n let errorValue: any;\n try {\n this.work(state);\n } catch (e) {\n errored = true;\n // HACK: Since code elsewhere is relying on the \"truthiness\" of the\n // return here, we can't have it return \"\" or 0 or false.\n // TODO: Clean this up when we refactor schedulers mid-version-8 or so.\n errorValue = e ? e : new Error('Scheduled action threw falsy error');\n }\n if (errored) {\n this.unsubscribe();\n return errorValue;\n }\n }\n\n unsubscribe() {\n if (!this.closed) {\n const { id, scheduler } = this;\n const { actions } = scheduler;\n\n this.work = this.state = this.scheduler = null!;\n this.pending = false;\n\n arrRemove(actions, this);\n if (id != null) {\n this.id = this.recycleAsyncId(scheduler, id, null);\n }\n\n this.delay = null!;\n super.unsubscribe();\n }\n }\n}\n", "import { Action } from './scheduler/Action';\nimport { Subscription } from './Subscription';\nimport { SchedulerLike, SchedulerAction } from './types';\nimport { dateTimestampProvider } from './scheduler/dateTimestampProvider';\n\n/**\n * An execution context and a data structure to order tasks and schedule their\n * execution. Provides a notion of (potentially virtual) time, through the\n * `now()` getter method.\n *\n * Each unit of work in a Scheduler is called an `Action`.\n *\n * ```ts\n * class Scheduler {\n * now(): number;\n * schedule(work, delay?, state?): Subscription;\n * }\n * ```\n *\n * @class Scheduler\n * @deprecated Scheduler is an internal implementation detail of RxJS, and\n * should not be used directly. Rather, create your own class and implement\n * {@link SchedulerLike}. Will be made internal in v8.\n */\nexport class Scheduler implements SchedulerLike {\n public static now: () => number = dateTimestampProvider.now;\n\n constructor(private schedulerActionCtor: typeof Action, now: () => number = Scheduler.now) {\n this.now = now;\n }\n\n /**\n * A getter method that returns a number representing the current time\n * (at the time this function was called) according to the scheduler's own\n * internal clock.\n * @return {number} A number that represents the current time. May or may not\n * have a relation to wall-clock time. May or may not refer to a time unit\n * (e.g. milliseconds).\n */\n public now: () => number;\n\n /**\n * Schedules a function, `work`, for execution. May happen at some point in\n * the future, according to the `delay` parameter, if specified. May be passed\n * some context object, `state`, which will be passed to the `work` function.\n *\n * The given arguments will be processed an stored as an Action object in a\n * queue of actions.\n *\n * @param {function(state: ?T): ?Subscription} work A function representing a\n * task, or some unit of work to be executed by the Scheduler.\n * @param {number} [delay] Time to wait before executing the work, where the\n * time unit is implicit and defined by the Scheduler itself.\n * @param {T} [state] Some contextual data that the `work` function uses when\n * called by the Scheduler.\n * @return {Subscription} A subscription in order to be able to unsubscribe\n * the scheduled work.\n */\n public schedule(work: (this: SchedulerAction, state?: T) => void, delay: number = 0, state?: T): Subscription {\n return new this.schedulerActionCtor(this, work).schedule(state, delay);\n }\n}\n", "import { Scheduler } from '../Scheduler';\nimport { Action } from './Action';\nimport { AsyncAction } from './AsyncAction';\nimport { TimerHandle } from './timerHandle';\n\nexport class AsyncScheduler extends Scheduler {\n public actions: Array> = [];\n /**\n * A flag to indicate whether the Scheduler is currently executing a batch of\n * queued actions.\n * @type {boolean}\n * @internal\n */\n public _active: boolean = false;\n /**\n * An internal ID used to track the latest asynchronous task such as those\n * coming from `setTimeout`, `setInterval`, `requestAnimationFrame`, and\n * others.\n * @type {any}\n * @internal\n */\n public _scheduled: TimerHandle | undefined;\n\n constructor(SchedulerAction: typeof Action, now: () => number = Scheduler.now) {\n super(SchedulerAction, now);\n }\n\n public flush(action: AsyncAction): void {\n const { actions } = this;\n\n if (this._active) {\n actions.push(action);\n return;\n }\n\n let error: any;\n this._active = true;\n\n do {\n if ((error = action.execute(action.state, action.delay))) {\n break;\n }\n } while ((action = actions.shift()!)); // exhaust the scheduler queue\n\n this._active = false;\n\n if (error) {\n while ((action = actions.shift()!)) {\n action.unsubscribe();\n }\n throw error;\n }\n }\n}\n", "import { AsyncAction } from './AsyncAction';\nimport { AsyncScheduler } from './AsyncScheduler';\n\n/**\n *\n * Async Scheduler\n *\n * Schedule task as if you used setTimeout(task, duration)\n *\n * `async` scheduler schedules tasks asynchronously, by putting them on the JavaScript\n * event loop queue. It is best used to delay tasks in time or to schedule tasks repeating\n * in intervals.\n *\n * If you just want to \"defer\" task, that is to perform it right after currently\n * executing synchronous code ends (commonly achieved by `setTimeout(deferredTask, 0)`),\n * better choice will be the {@link asapScheduler} scheduler.\n *\n * ## Examples\n * Use async scheduler to delay task\n * ```ts\n * import { asyncScheduler } from 'rxjs';\n *\n * const task = () => console.log('it works!');\n *\n * asyncScheduler.schedule(task, 2000);\n *\n * // After 2 seconds logs:\n * // \"it works!\"\n * ```\n *\n * Use async scheduler to repeat task in intervals\n * ```ts\n * import { asyncScheduler } from 'rxjs';\n *\n * function task(state) {\n * console.log(state);\n * this.schedule(state + 1, 1000); // `this` references currently executing Action,\n * // which we reschedule with new state and delay\n * }\n *\n * asyncScheduler.schedule(task, 3000, 0);\n *\n * // Logs:\n * // 0 after 3s\n * // 1 after 4s\n * // 2 after 5s\n * // 3 after 6s\n * ```\n */\n\nexport const asyncScheduler = new AsyncScheduler(AsyncAction);\n\n/**\n * @deprecated Renamed to {@link asyncScheduler}. Will be removed in v8.\n */\nexport const async = asyncScheduler;\n", "import { AsyncAction } from './AsyncAction';\nimport { Subscription } from '../Subscription';\nimport { QueueScheduler } from './QueueScheduler';\nimport { SchedulerAction } from '../types';\nimport { TimerHandle } from './timerHandle';\n\nexport class QueueAction extends AsyncAction {\n constructor(protected scheduler: QueueScheduler, protected work: (this: SchedulerAction, state?: T) => void) {\n super(scheduler, work);\n }\n\n public schedule(state?: T, delay: number = 0): Subscription {\n if (delay > 0) {\n return super.schedule(state, delay);\n }\n this.delay = delay;\n this.state = state;\n this.scheduler.flush(this);\n return this;\n }\n\n public execute(state: T, delay: number): any {\n return delay > 0 || this.closed ? super.execute(state, delay) : this._execute(state, delay);\n }\n\n protected requestAsyncId(scheduler: QueueScheduler, id?: TimerHandle, delay: number = 0): TimerHandle {\n // If delay exists and is greater than 0, or if the delay is null (the\n // action wasn't rescheduled) but was originally scheduled as an async\n // action, then recycle as an async action.\n\n if ((delay != null && delay > 0) || (delay == null && this.delay > 0)) {\n return super.requestAsyncId(scheduler, id, delay);\n }\n\n // Otherwise flush the scheduler starting with this action.\n scheduler.flush(this);\n\n // HACK: In the past, this was returning `void`. However, `void` isn't a valid\n // `TimerHandle`, and generally the return value here isn't really used. So the\n // compromise is to return `0` which is both \"falsy\" and a valid `TimerHandle`,\n // as opposed to refactoring every other instanceo of `requestAsyncId`.\n return 0;\n }\n}\n", "import { AsyncScheduler } from './AsyncScheduler';\n\nexport class QueueScheduler extends AsyncScheduler {\n}\n", "import { QueueAction } from './QueueAction';\nimport { QueueScheduler } from './QueueScheduler';\n\n/**\n *\n * Queue Scheduler\n *\n * Put every next task on a queue, instead of executing it immediately\n *\n * `queue` scheduler, when used with delay, behaves the same as {@link asyncScheduler} scheduler.\n *\n * When used without delay, it schedules given task synchronously - executes it right when\n * it is scheduled. However when called recursively, that is when inside the scheduled task,\n * another task is scheduled with queue scheduler, instead of executing immediately as well,\n * that task will be put on a queue and wait for current one to finish.\n *\n * This means that when you execute task with `queue` scheduler, you are sure it will end\n * before any other task scheduled with that scheduler will start.\n *\n * ## Examples\n * Schedule recursively first, then do something\n * ```ts\n * import { queueScheduler } from 'rxjs';\n *\n * queueScheduler.schedule(() => {\n * queueScheduler.schedule(() => console.log('second')); // will not happen now, but will be put on a queue\n *\n * console.log('first');\n * });\n *\n * // Logs:\n * // \"first\"\n * // \"second\"\n * ```\n *\n * Reschedule itself recursively\n * ```ts\n * import { queueScheduler } from 'rxjs';\n *\n * queueScheduler.schedule(function(state) {\n * if (state !== 0) {\n * console.log('before', state);\n * this.schedule(state - 1); // `this` references currently executing Action,\n * // which we reschedule with new state\n * console.log('after', state);\n * }\n * }, 0, 3);\n *\n * // In scheduler that runs recursively, you would expect:\n * // \"before\", 3\n * // \"before\", 2\n * // \"before\", 1\n * // \"after\", 1\n * // \"after\", 2\n * // \"after\", 3\n *\n * // But with queue it logs:\n * // \"before\", 3\n * // \"after\", 3\n * // \"before\", 2\n * // \"after\", 2\n * // \"before\", 1\n * // \"after\", 1\n * ```\n */\n\nexport const queueScheduler = new QueueScheduler(QueueAction);\n\n/**\n * @deprecated Renamed to {@link queueScheduler}. Will be removed in v8.\n */\nexport const queue = queueScheduler;\n", "import { AsyncAction } from './AsyncAction';\nimport { AnimationFrameScheduler } from './AnimationFrameScheduler';\nimport { SchedulerAction } from '../types';\nimport { animationFrameProvider } from './animationFrameProvider';\nimport { TimerHandle } from './timerHandle';\n\nexport class AnimationFrameAction extends AsyncAction {\n constructor(protected scheduler: AnimationFrameScheduler, protected work: (this: SchedulerAction, state?: T) => void) {\n super(scheduler, work);\n }\n\n protected requestAsyncId(scheduler: AnimationFrameScheduler, id?: TimerHandle, delay: number = 0): TimerHandle {\n // If delay is greater than 0, request as an async action.\n if (delay !== null && delay > 0) {\n return super.requestAsyncId(scheduler, id, delay);\n }\n // Push the action to the end of the scheduler queue.\n scheduler.actions.push(this);\n // If an animation frame has already been requested, don't request another\n // one. If an animation frame hasn't been requested yet, request one. Return\n // the current animation frame request id.\n return scheduler._scheduled || (scheduler._scheduled = animationFrameProvider.requestAnimationFrame(() => scheduler.flush(undefined)));\n }\n\n protected recycleAsyncId(scheduler: AnimationFrameScheduler, id?: TimerHandle, delay: number = 0): TimerHandle | undefined {\n // If delay exists and is greater than 0, or if the delay is null (the\n // action wasn't rescheduled) but was originally scheduled as an async\n // action, then recycle as an async action.\n if (delay != null ? delay > 0 : this.delay > 0) {\n return super.recycleAsyncId(scheduler, id, delay);\n }\n // If the scheduler queue has no remaining actions with the same async id,\n // cancel the requested animation frame and set the scheduled flag to\n // undefined so the next AnimationFrameAction will request its own.\n const { actions } = scheduler;\n if (id != null && actions[actions.length - 1]?.id !== id) {\n animationFrameProvider.cancelAnimationFrame(id as number);\n scheduler._scheduled = undefined;\n }\n // Return undefined so the action knows to request a new async id if it's rescheduled.\n return undefined;\n }\n}\n", "import { AsyncAction } from './AsyncAction';\nimport { AsyncScheduler } from './AsyncScheduler';\n\nexport class AnimationFrameScheduler extends AsyncScheduler {\n public flush(action?: AsyncAction): void {\n this._active = true;\n // The async id that effects a call to flush is stored in _scheduled.\n // Before executing an action, it's necessary to check the action's async\n // id to determine whether it's supposed to be executed in the current\n // flush.\n // Previous implementations of this method used a count to determine this,\n // but that was unsound, as actions that are unsubscribed - i.e. cancelled -\n // are removed from the actions array and that can shift actions that are\n // scheduled to be executed in a subsequent flush into positions at which\n // they are executed within the current flush.\n const flushId = this._scheduled;\n this._scheduled = undefined;\n\n const { actions } = this;\n let error: any;\n action = action || actions.shift()!;\n\n do {\n if ((error = action.execute(action.state, action.delay))) {\n break;\n }\n } while ((action = actions[0]) && action.id === flushId && actions.shift());\n\n this._active = false;\n\n if (error) {\n while ((action = actions[0]) && action.id === flushId && actions.shift()) {\n action.unsubscribe();\n }\n throw error;\n }\n }\n}\n", "import { AnimationFrameAction } from './AnimationFrameAction';\nimport { AnimationFrameScheduler } from './AnimationFrameScheduler';\n\n/**\n *\n * Animation Frame Scheduler\n *\n * Perform task when `window.requestAnimationFrame` would fire\n *\n * When `animationFrame` scheduler is used with delay, it will fall back to {@link asyncScheduler} scheduler\n * behaviour.\n *\n * Without delay, `animationFrame` scheduler can be used to create smooth browser animations.\n * It makes sure scheduled task will happen just before next browser content repaint,\n * thus performing animations as efficiently as possible.\n *\n * ## Example\n * Schedule div height animation\n * ```ts\n * // html:
\n * import { animationFrameScheduler } from 'rxjs';\n *\n * const div = document.querySelector('div');\n *\n * animationFrameScheduler.schedule(function(height) {\n * div.style.height = height + \"px\";\n *\n * this.schedule(height + 1); // `this` references currently executing Action,\n * // which we reschedule with new state\n * }, 0, 0);\n *\n * // You will see a div element growing in height\n * ```\n */\n\nexport const animationFrameScheduler = new AnimationFrameScheduler(AnimationFrameAction);\n\n/**\n * @deprecated Renamed to {@link animationFrameScheduler}. Will be removed in v8.\n */\nexport const animationFrame = animationFrameScheduler;\n", "import { Observable } from '../Observable';\nimport { SchedulerLike } from '../types';\n\n/**\n * A simple Observable that emits no items to the Observer and immediately\n * emits a complete notification.\n *\n * Just emits 'complete', and nothing else.\n *\n * ![](empty.png)\n *\n * A simple Observable that only emits the complete notification. It can be used\n * for composing with other Observables, such as in a {@link mergeMap}.\n *\n * ## Examples\n *\n * Log complete notification\n *\n * ```ts\n * import { EMPTY } from 'rxjs';\n *\n * EMPTY.subscribe({\n * next: () => console.log('Next'),\n * complete: () => console.log('Complete!')\n * });\n *\n * // Outputs\n * // Complete!\n * ```\n *\n * Emit the number 7, then complete\n *\n * ```ts\n * import { EMPTY, startWith } from 'rxjs';\n *\n * const result = EMPTY.pipe(startWith(7));\n * result.subscribe(x => console.log(x));\n *\n * // Outputs\n * // 7\n * ```\n *\n * Map and flatten only odd numbers to the sequence `'a'`, `'b'`, `'c'`\n *\n * ```ts\n * import { interval, mergeMap, of, EMPTY } from 'rxjs';\n *\n * const interval$ = interval(1000);\n * const result = interval$.pipe(\n * mergeMap(x => x % 2 === 1 ? of('a', 'b', 'c') : EMPTY),\n * );\n * result.subscribe(x => console.log(x));\n *\n * // Results in the following to the console:\n * // x is equal to the count on the interval, e.g. (0, 1, 2, 3, ...)\n * // x will occur every 1000ms\n * // if x % 2 is equal to 1, print a, b, c (each on its own)\n * // if x % 2 is not equal to 1, nothing will be output\n * ```\n *\n * @see {@link Observable}\n * @see {@link NEVER}\n * @see {@link of}\n * @see {@link throwError}\n */\nexport const EMPTY = new Observable((subscriber) => subscriber.complete());\n\n/**\n * @param scheduler A {@link SchedulerLike} to use for scheduling\n * the emission of the complete notification.\n * @deprecated Replaced with the {@link EMPTY} constant or {@link scheduled} (e.g. `scheduled([], scheduler)`). Will be removed in v8.\n */\nexport function empty(scheduler?: SchedulerLike) {\n return scheduler ? emptyScheduled(scheduler) : EMPTY;\n}\n\nfunction emptyScheduled(scheduler: SchedulerLike) {\n return new Observable((subscriber) => scheduler.schedule(() => subscriber.complete()));\n}\n", "import { SchedulerLike } from '../types';\nimport { isFunction } from './isFunction';\n\nexport function isScheduler(value: any): value is SchedulerLike {\n return value && isFunction(value.schedule);\n}\n", "import { SchedulerLike } from '../types';\nimport { isFunction } from './isFunction';\nimport { isScheduler } from './isScheduler';\n\nfunction last(arr: T[]): T | undefined {\n return arr[arr.length - 1];\n}\n\nexport function popResultSelector(args: any[]): ((...args: unknown[]) => unknown) | undefined {\n return isFunction(last(args)) ? args.pop() : undefined;\n}\n\nexport function popScheduler(args: any[]): SchedulerLike | undefined {\n return isScheduler(last(args)) ? args.pop() : undefined;\n}\n\nexport function popNumber(args: any[], defaultValue: number): number {\n return typeof last(args) === 'number' ? args.pop()! : defaultValue;\n}\n", "export const isArrayLike = ((x: any): x is ArrayLike => x && typeof x.length === 'number' && typeof x !== 'function');", "import { isFunction } from \"./isFunction\";\n\n/**\n * Tests to see if the object is \"thennable\".\n * @param value the object to test\n */\nexport function isPromise(value: any): value is PromiseLike {\n return isFunction(value?.then);\n}\n", "import { InteropObservable } from '../types';\nimport { observable as Symbol_observable } from '../symbol/observable';\nimport { isFunction } from './isFunction';\n\n/** Identifies an input as being Observable (but not necessary an Rx Observable) */\nexport function isInteropObservable(input: any): input is InteropObservable {\n return isFunction(input[Symbol_observable]);\n}\n", "import { isFunction } from './isFunction';\n\nexport function isAsyncIterable(obj: any): obj is AsyncIterable {\n return Symbol.asyncIterator && isFunction(obj?.[Symbol.asyncIterator]);\n}\n", "/**\n * Creates the TypeError to throw if an invalid object is passed to `from` or `scheduled`.\n * @param input The object that was passed.\n */\nexport function createInvalidObservableTypeError(input: any) {\n // TODO: We should create error codes that can be looked up, so this can be less verbose.\n return new TypeError(\n `You provided ${\n input !== null && typeof input === 'object' ? 'an invalid object' : `'${input}'`\n } where a stream was expected. You can provide an Observable, Promise, ReadableStream, Array, AsyncIterable, or Iterable.`\n );\n}\n", "export function getSymbolIterator(): symbol {\n if (typeof Symbol !== 'function' || !Symbol.iterator) {\n return '@@iterator' as any;\n }\n\n return Symbol.iterator;\n}\n\nexport const iterator = getSymbolIterator();\n", "import { iterator as Symbol_iterator } from '../symbol/iterator';\nimport { isFunction } from './isFunction';\n\n/** Identifies an input as being an Iterable */\nexport function isIterable(input: any): input is Iterable {\n return isFunction(input?.[Symbol_iterator]);\n}\n", "import { ReadableStreamLike } from '../types';\nimport { isFunction } from './isFunction';\n\nexport async function* readableStreamLikeToAsyncGenerator(readableStream: ReadableStreamLike): AsyncGenerator {\n const reader = readableStream.getReader();\n try {\n while (true) {\n const { value, done } = await reader.read();\n if (done) {\n return;\n }\n yield value!;\n }\n } finally {\n reader.releaseLock();\n }\n}\n\nexport function isReadableStreamLike(obj: any): obj is ReadableStreamLike {\n // We don't want to use instanceof checks because they would return\n // false for instances from another Realm, like an + + + +

We call it a "theme" (the quotation marks are on purpose), as it uses theme specific techniques, but it uses so much more, that one can’t say it is only a theme. This "theme" is depending on two things, namely using a theme and make extensive use of the template function from the custom_component button-card made by RomRaider.

+

A little history

+

This "theme" is based on the awesome work 7ahang made on behance (see the links under credits), and was developed from tben for his own use of Home Assistant. But as this “theme” is such a wonderful and nice look for Home Assistant, it quickly became clear, that some organizational work should be done, to give others the possibility to use it as well. And here we are!

+

Contributions

+

This is a living project and all input is very welcome! If you configured and designed a card, that you would like to share, please feel free to do so! We are happy to include your contribution so others can use it as well!

+

Credits

+
    +
  • This design was made by tben
    • +
  • A lot of inspiration is taken from 7ahang’s work found on Behance.
    • +
  • Contributions from others in the HomeAssistant forum thread, you can find it here.
    • +
  • The technical part is realised mostly by taking advantage of the great work RomRaider did with his button-card.
    • +
  • Code refactor, cleanup and maintenance by schumijo and paddy0174 & CM000n.
    • +
  • dwainscheeren for his inspiration to deliver themes via HACS.
    • +
  • Wiki by paddy0174.
    • +
  • Special thanks to clemalex and schumijofor contributing their cards to the main repository.
    • +
  • stokkie90 for implementing most of the HACS functionalities.
    • +
  • And of course all the others who cannot be named here due to space limitations. 😉 Thank you for your contribution ❤️
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/search/search_index.json b/search/search_index.json new file mode 100644 index 000000000..76f02ab47 --- /dev/null +++ b/search/search_index.json @@ -0,0 +1 @@ +{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"Welcome to the UI-Lovelace-Minimalist wiki!","text":""},{"location":"#welcome-to-the-ui-lovelace-minimalist-wiki","title":"Welcome to the UI-Lovelace-Minimalist wiki","text":"

Under construction!

Hello dear UI Lovelace Minimalist fan. Nice that you found our new wiki. This is currently under construction! The contents are therefore to be enjoyed with caution and can still change at any time.

This wiki is intended to help you install and use the wonderful \u201ctheme\u201d UI-Lovelace-Minimalist created by tben. Feel free to look around and get a deeper insight into the internal functions and tricks, this \u201ctheme\u201d is using. Use them to your own likings, and if you develop something, that others must see, feel free to post it to this wiki or in the thread at the Home Assistant forum, which you can find here.

"},{"location":"#youtube-video-on-how-to-setup-ui-minimalist","title":"Youtube video on how to setup UI Minimalist","text":""},{"location":"#what-is-ui-lovelace-minimalist","title":"What is \"Ui-Lovelace-Minimalist\"","text":"

We call it a \"theme\" (the quotation marks are on purpose), as it uses theme specific techniques, but it uses so much more, that one can\u2019t say it is only a theme. This \"theme\" is depending on two things, namely using a theme and make extensive use of the template function from the custom_component button-card made by RomRaider.

"},{"location":"#a-little-history","title":"A little history","text":"

This \"theme\" is based on the awesome work 7ahang made on behance (see the links under credits), and was developed from tben for his own use of Home Assistant. But as this \u201ctheme\u201d is such a wonderful and nice look for Home Assistant, it quickly became clear, that some organizational work should be done, to give others the possibility to use it as well. And here we are!

"},{"location":"#contributions","title":"Contributions","text":"

This is a living project and all input is very welcome! If you configured and designed a card, that you would like to share, please feel free to do so! We are happy to include your contribution so others can use it as well!

"},{"location":"#credits","title":"Credits","text":"
  • This design was made by tben
  • A lot of inspiration is taken from 7ahang\u2019s work found on Behance.
  • Contributions from others in the HomeAssistant forum thread, you can find it here.
  • The technical part is realised mostly by taking advantage of the great work RomRaider did with his button-card.
  • Code refactor, cleanup and maintenance by schumijo and paddy0174 & CM000n.
  • dwainscheeren for his inspiration to deliver themes via HACS.
  • Wiki by paddy0174.
  • Special thanks to clemalex and schumijofor contributing their cards to the main repository.
  • stokkie90 for implementing most of the HACS functionalities.
  • And of course all the others who cannot be named here due to space limitations. \ud83d\ude09 Thank you for your contribution \u2764\ufe0f
"},{"location":"development/card_style_guide/","title":"Card Style Guide","text":""},{"location":"development/card_style_guide/#card-style-guide","title":"Card Style Guide","text":""},{"location":"development/card_style_guide/#this-theme-introduced","title":"This \"theme\" introduced","text":"

This \"theme\" provides you with four different elements, that combined give you a nice and functional layout. The basis for all these elements is button-card that allows for a great and individual styling. These elements, \"cards\", \"chips\", \"title\" and \"vertical buttons\", are fully customizable and can be enhanced to fit your needs. All this is only possible, because we are able to use the templating function from button-card.

"},{"location":"development/card_style_guide/#chips","title":"Chips","text":"

At the top of each page you can find the chips, which allow to quickly visualize important information.

"},{"location":"development/card_style_guide/#title","title":"Title","text":"

Titles are used to separate the different sections. Kind of a divider.

"},{"location":"development/card_style_guide/#vertical-buttons","title":"Vertical buttons","text":"

Vertical buttons show the information vertically aligned. These find their use eg. as navigation or scene buttons.

"},{"location":"development/card_style_guide/#cards","title":"Cards","text":"

Cards are the main part of this design and are widely used in very different designs and functions. With these cards you can set up nearly every entity in HA, showing from \"state-only\" over a \"full blown\" information graphic with various values to \"controlling\" your covers and climate entities.

"},{"location":"development/card_style_guide/#anatomy-of-cards","title":"Anatomy of cards","text":"
  1. Dot: Visible when the device is unavailable. Also used on the entity person
  2. Icon: Icon that represents the device
  3. Primary line: Main information
  4. Secondary line: Secondary information
  5. Optional part: Possibility to display buttons to launch actions related to the device. Or display a graph to view the history of a sensor or you let your fantasy take the ride...

In the list above #5 enhances the normal cards with a \"second line\", that is used to display other information like a graph or the controls for your covers. For this readme the cards are divided into three groups:

  • 1-line cards: These are cards for sensor or binary_sensors like light or power outlets.
  • 2-line cards: These are cards with a second line for information or controls, eg. your cover controls.
  • Custom cards: These are special cards, that you can install, only if needed. These cards are mostly developed and contributed to the repository. Eg. an aircondition-card that shows the state of your aircondition and buttons to control it.
"},{"location":"development/card_style_guide/#color-scheme","title":"Color Scheme","text":"Type Color Hex RGB \ud83d\udca1 Light \u26a1 Electricity #FF9101 rgb(255,145,1) \ud83d\udd25 Heating #F54436 rgb(245,6,54) \u2611\ufe0f on/off \ud83c\udfe0 Home #3D5AFE rgb(61,90,254) \ud83c\udf33 Exterior #01C852 rgb(1,200,82)"},{"location":"development/card_style_guide/#icons","title":"Icons","text":"

For the chips, this \u201ctheme\u201d uses the standard unicode emojis. The main reason is, they are multi-color whereas the mdi-icons that HomeAssistant uses are one color only.

These emojis are only used on the chips, all other cards or buttons use the standard mdi-icons!

Overview over standard unicode emojis:

  • https://emojipedia.org or
  • https://github.com/ikatyang/emoji-cheat-sheet

Overview Home Assistant mdi-icons:

  • https://materialdesignicons.com/

Using emojis is easy:

  • Go to one of the Github pages above
  • Select the emoji you want and copy it (\u201cCTRL + C\u201d or right-click \u201ccopy\u201d / at emojipedia.org you already find a \u201ccopy\u201d button)
  • Go to your view and paste the icon

Note: There are a lot of emojis on these pages, so we suggest you use the built-in search at emojipedia or the browser integrated search by pressing \u201cCTRL + F\u201d and type in your query like \u201cheart\u201d.

"},{"location":"development/card_style_guide/#language-specific-buttons","title":"Language specific buttons","text":"

Sometimes the language specific strings from Home Assistant aren't available for your button, so we added the possibility to use language specific strings over the template system.

"},{"location":"development/card_style_guide/#custom-cards","title":"Custom cards","text":"

This \"theme\" is designed with an open structure in mind, that's why it is possible to add custom-cards without much hassle. A few custom-cards are readily available through the folder custom-cards in the repository. Custom-cards are cards, that don't fit everywhere and therefore are not part of the standard installation, but can be easily added, if needed. Take an air-condition card. Not everybody has an air-condition. So why include this card as a default? And that's why we did a structure and system for custom-cards. Easily added, but only when needed! And the best thing is: everybody can develop a cool card and can (not have to) share it afterwards with the community (hint, hint, the support thread is here).

See a complete list of already included custom-cards in our wiki.

Find information on how to develop a custom-card here.

"},{"location":"development/card_style_guide/#extend-with-your-own-code","title":"Extend with your own code","text":"

As we tried to be as modular as possible (and useful), it is easy to enhance or extend the code, we provide with your own definitions. That means for you, you can inherit every template to enhance it only with functions, you really want. No need to copy full blocks of code - just inherit and enhance only where changes are needed.

We provided some instructions in our wiki, see this page.

"},{"location":"development/custom_cards/","title":"Custom-Cards","text":""},{"location":"development/custom_cards/#develop-a-custom-card","title":"Develop a custom-card","text":"

If you have configured something great for this theme, like a new card, you might want to share it with the community. To ease this process, here are some instructions on how to do that.

"},{"location":"development/custom_cards/#building-your-custom-card","title":"Building your custom-card","text":"
  • Create a new folder following the naming convention of this theme, preferably by using the username and describing your card, eg. custom_card_paddy_temperature.
  • Create a new file README.md where you describe your card, note of specific requirements (like custom_components from HA or other custom-cards) and your name as the author.
  • Create a new file in this folder, naming it the same like your folder, eg. custom_card_paddy_temperature.yaml.
  • IMPORTANT! Name the folder and file to your liking (preferably describing your chip/card), but you must add the prefix custom_ to both, the folder and the file name. Otherwise the file will not be correctly included! Example: custom_card_paddy_temperature/custom_card_paddy_temperature.yaml
  • IMPORTANT! All files need to follow our community style-guidelines. Please read these guidelines carefully before adding a pull request.
  • You can use and inherit all template definitions, that are available through the main button_card_templates.yaml of this theme. See the here for all definitions, including internal templates.
  • If you need to use language specific strings, please see here.
  • Please don\u2019t inherit from other custom-cards, as the user might not have installed that card! If you really need to inherit from other custom-cards, you should clearly state this in your readme file!
"},{"location":"development/custom_cards/#style-and-qualtiy-guidelines","title":"Style and Qualtiy guidelines","text":"

  • Your card needs to satisfy some guidelines to assure your card is easy to read and looks like all the other cards in the repository.

  • Each file needs to start only with --- on the first line.

  • Each file needs to end with a empty code line.
  • All strings need to be \"double-quoted\".
  • Only use lowercase in your code.
  • No trailing white-space (No random space between and around the code).
  • A line-length of 256.

  • IMPORTANT! Unix-style line endings. (It's recommended to use a code-editor like VSCode and set CRLF to LF)

  • More advanced users can make use of Pre-commit to apply most of the styles automatically.

  • Open your fork in a code-editor like VSCode.
  • Install Pre-commit (Linux or Mac-system recommended).
  • All the needed hooks are available within the repository.
  • After your changes run pre-commit run --all-files in the terminal of your editor.
  • You could test your card in a dev-environment with the use of Docker-desktop.
  • Make sure you read https://github.com/UI-Lovelace-Minimalist/UI/blob/dev/.devcontainer/README.md
"},{"location":"development/custom_cards/#add-your-custom-card","title":"Add your custom-card","text":"
  • You can make a pull request on Github to add your custom-card.
  • To make a pull request you need to fork the repository first.
  • Add your custom-card folder to your fork. This needs to be in the already existing folder: custom_cards.
  • All pull requests for custom_cards need to be directed to the main branch: UI-Lovelace-Minimalist:main. Additional documentation
"},{"location":"development/custom_cards/#naming-conventions","title":"Naming conventions","text":"

To make it easier for the user, we would prefer, if you would use the following naming conventions to name your folders and files.

  • Prefix (custom_)
  • Type (like chip or card)
  • Developer name (like paddy0174)
  • Name describing your chip/card (temperature)

This should look like this: custom_card_paddy0174_temperature/custom_card_paddy0174_temperature.yaml

In the end, your custom-card folder should have at least these structure:

custom_card_paddy_temperature\n\u2514\u2500\u2500 custom_card_paddy_temperature.yaml\n\u2514\u2500\u2500 README.md\n\u2514\u2500\u2500 languages\n   \u2514\u2500\u2500 DE.yaml (optional)\n   \u2514\u2500\u2500 EN.yaml (if language variables are used, at least EN needs to be provided)\n

Note: This is optional and you can use whatever naming you want, but keep in mind, the use of custom_ as a prefix is required!

"},{"location":"development/custom_cards/#order","title":"Order","text":"

To make reading the definitions easier, we use the following structure in our definitions in button_card_templates.yaml:

name:\n  template:\n  variables:\n  tap_action/hold action/...:\n  triggers_update:\n  show_icon:\n  show_label:\n  show_name:\n  show_state:\n  icon:\n  label:\n  name:\n  state:\n  entity:\n  styles:\n    icon:\n    label:\n    name:\n    state:\n    img_cell:\n    grid:\n    card:\n  custom_fields:\n    item1:\n      card:\n        type:\n        template:\n

Feel free to delete definitions, that you don\u2019t use or need.

Note: Here as well, this is optional! It is just easier to use a structure, that can be easily compared to other definitions. But please do to your own liking and needs!

"},{"location":"development/custom_cards/#language-specific-strings","title":"Language specific strings","text":"

This \u201ctheme\u201d supports language specific strings, as the translated strings (states) from HA are sometimes not available.

Most variables are already provided by Home Assistant:

  • On
  • Off
  • Open
  • Closed
  • Unavailable
  • Standby
  • Idle
  • and more

The usage is easy: Include the language variables by including the template ulm_translation_engine in your card and then use them just like every other variable. As long as you want to translate an entity state to a human readable state, you should be good with just using variables.ulm_translation_state. If you use variables to supply an entity this variable won't work (yet).

template:\n  - ulm_translation_engine\n  # optional, only if general language variables not provided by Home Assistant are used\n  - ulm_language_variables\n  # optional, only if language variables are used\n  - custom_card_paddy0174_temperature_language_variables\nstate:\n  [[[\n    # if you use your own language variables, use them like this\n    if (state == 'cool') {\n      return variables.custom_card_paddy0174_temperature_cool;\n    } else {\n      return variables.ulm_translation_state;\n    }\n  ]]]\n# Alternative short version, works in 90 percent of use cases, useful if you have lots of states or other variables which act for one entity\n  [[[\n  let state = entity.state;\n  # Check if custom language variable for the entity state exists, otherwise check default language_variables, otherwise just output the entity state\n  return variables[\"ulm_custom_card_paddy0174_temperature_\" + state] ? variables[\"ulm_custom_card_paddy0174_temperature_\" + state] : variables[\"ulm_\" + state] ? variables[\"ulm_\" + state] : state;\n  ]]]\n

Your language file should use this format:

# EN.yaml for custom_card_paddy0174_temperature\ncustom_card_paddy0174_temperature_language_variables:\n  variables:\n    ulm_custom_card_paddy0174_temperature_cool: \"Cool\"\n

Provide at least a file EN.yaml in your custom-cards language folder. If you want to support more languages, name them accordingly and use the same structure as in the EN.yaml file. In the end you will have different files in your languages folder, like EN.yaml, FR.yaml and DE.yaml. Please advise the user in your readme to delete all but one of these language files, otherwise the loading order gets messed up and the wrong strings get loaded.

"},{"location":"development/docs_style_guide/","title":"Docs Style Guide","text":""},{"location":"development/docs_style_guide/#documentation-style-guide","title":"Documentation Style Guide","text":"

This document defines the standards for UI Lovelace Minimalist Documentation.

  • Rather than repeating information from another topic, link to the single source of truth and explain why it is important.

Include all media types

Include any media types/sources if the content is relevant to readers. You can freely include or link presentations, diagrams, and videos. No matter who it was originally composed for, if it is helpful to any of our audiences, we can include it.

  • If you use an image that has a separate source file (for example, a vector or diagram format), link the image to the source file so that it may be reused or updated by anyone.
"},{"location":"development/docs_style_guide/#structure","title":"Structure","text":"Directory Contents docs/index.md Home Page. docs/assets Can contain images/javascript/stylesheets. docs/setup Guides on how to setup the UI Lovelace Minimalist. docs/usage Guides on how to use UI Lovelace Minimalist."},{"location":"development/docs_style_guide/#work-with-directories-and-files","title":"Work with directories and files","text":"

When working with directories and files:

  1. When you create a new directory, always start with an index.md file. Don't use another filename and do not create README.md files.
  2. Do not use special characters and spaces, or capital letters in file names, directory names, branch names, and anything that generates a path.
  3. When creating or renaming a file or directory and it has more than one word in its name, use underscores (_) instead of spaces or dashes. For example, proper naming would be import_project/import_from_github.md. This applies to both image files and Markdown files.
  4. For image files, do not exceed 100KB.
  5. Do not include the same information in multiple places.

If you\u2019re unsure where to place a document or a content addition, this shouldn\u2019t stop you from authoring and contributing. Use your best judgment, and then ask the reviewer of your MR to confirm your decision.

"},{"location":"development/docs_style_guide/#card-page","title":"Card page","text":"

Create a Card Page by checking the ._example.md in the cards directory. This can be used as a structure to build upon.

"},{"location":"development/docs_style_guide/#images","title":"Images","text":"

Images, including screenshots, can help a reader better understand a concept. However, they should be used sparingly because:

  • They tend to become out-of-date.
  • They are difficult and expensive to localize.
  • They cannot be read by screen readers.
"},{"location":"development/docs_style_guide/#save-the-image","title":"Save the image","text":"
  • Place all images in the central asset directory named assets/img/ inside the docs root folder.
  • Consider using PNG images instead of JPEG.
  • Compress GIFs with https://ezgif.com/optimize or similar tool.
  • Images should be used (only when necessary) to illustrate the description of a process, not to replace it.
"},{"location":"development/docs_style_guide/#add-the-image-link-to-content","title":"Add the image link to content","text":"

The Markdown code for including an image in a document is ![Image description which will be the alt tag](../../assets/img/ulm_cards/example.png)

"},{"location":"development/docs_style_guide/#admonitions-call-outs","title":"Admonitions / Call-outs","text":"

Admonitions, also known as call-outs, are an excellent choice for including side content without significantly interrupting the document flow. More information of this can be found on Upstream documentation of MkDocs: Admonitions

"},{"location":"development/docs_style_guide/#code-blocks","title":"Code Blocks","text":"

Code blocks and examples are an essential part of technical project documentation. ULM Docs provides different ways to set up syntax highlighting for code blocks. For a more advanced usage of Code Blocks like adding Annations, Line Numbers, Highlighting, Embedding external files see the Code Blocks page on mkdocs-material.

"},{"location":"development/docs_style_guide/#developing","title":"Developing","text":"

Run local:

pip install -r requirements.txt\n\nmkdocs serve\n\n# or\nmkdocs serve --dirtyreload\n
"},{"location":"development/docs_style_guide/#markdown-linting","title":"Markdown linting","text":"

Can be done automatically by running pre-commit

pre-commit run markdownlint\n
"},{"location":"setup/adaptive_dash/","title":"Adaptive Dashboard","text":""},{"location":"setup/adaptive_dash/#add-adaptive-dashboard","title":"Add Adaptive Dashboard","text":"

To get full use of your Minimalist themed HA you need to setup some more custom_components (see requirements below). This dashboard automatically changes based on the device/screen size your are using. You can also alter the cards showing on the right-side by double-tapping a card. (Steps to configure this are described below)

"},{"location":"setup/adaptive_dash/#additional-requirements","title":"Additional Requirements","text":"

This dashboard make extensive use of state-switch and layout-card. These are available through HACS or as manual install from Github.

Warning

For now the state-switch works only with version v1.9.3 or below!

Additional lovelace resources layout-card state-switch

You need also configure an input_select with options for each popup_card and view you have configured. This input_select controls the cards showing on the right-side of the screen when in fullscreen mode.

Popups

Note: Not all device types do have Minimalist UI themed popups. Currently supported devices are: lights, mediaplayers, thermostats, sensors.

You can setup an input_select either via the GUI or in YAML. See HA docs

# Example configuration.yaml entry\ninput_select:\n  minimalist_ui_switch:\n    name: Select popup/view\n    options:\n      - light 1\n      - light 2\n      - mediaplayer 1\n      - mediaplayer 2\n      - climate 1\n      - climate 2\n      - power 1\n      - power 2\n      - livingroom\n
"},{"location":"setup/adaptive_dash/#setup","title":"Setup","text":"

To enable the adaptive dashboard you need to select the right option in the integration configuration menu. You can also set a name and icon for the new dashboard.

Once setup you should see another dashboard in your sidebar. This dashboard is filled with card_title template cards as placeholders on the pre-configured grid.

We have also added a folder with all the needed files to customizing your new dashboard:

config\n\u2514\u2500\u2500 ui_lovelace_minimalist\n    \u251c\u2500\u2500 custom_cards\n    \u2514\u2500\u2500 dashboard\n        \u2514\u2500\u2500 ui-lovelace.yaml\n        \u2514\u2500\u2500 adaptive-dash\n            \u2514\u2500\u2500 adaptive-ui.yaml\n            \u2514\u2500\u2500 popup\n                \u2514\u2500\u2500 popup.yaml\n            \u2514\u2500\u2500 views\n                \u2514\u2500\u2500 livingroom.yaml\n                \u2514\u2500\u2500 main.yaml\n
"},{"location":"setup/adaptive_dash/#customizing","title":"Customizing","text":"

The best place to start adding your personal cards is in adaptive-dash/views/main.yaml.

Grid-Layout

All files use CSS grids. By giving each card an own grid-area we can control there place in the dashboard. For more information on how grid-areas do work check this amazing guide.

When you are familiar with CSS grids you can start to alter the grid-template-areas to your personal preference.

"},{"location":"setup/adaptive_dash/#adding-cards","title":"Adding Cards","text":"

You can assign cards to a certain grid-area by adding this to your card configuration. We already have put in this config for some cards and titles.

view_layout:\n  grid-area: \"card1\"\n

To put card_light to the area: card1; you have to paste in the code as in your normal Minimalist UI dashboard on the place of the placeholder.

# Placeholder for card1 in main.yaml\n- view_layout:\n    grid-area: \"card1\"\n  type: \"custom:button-card\"\n  template: \"card_title\"\n  name: \"Put here your <br> first card\"\n  label: \"grid-area: card1\"\n
# Example of a card_light assigned to area card1\n- view_layout:\n    grid-area: \"card1\"\n  type: \"custom:button-card\"\n  template: \"card_light\"\n  entity: \"light.your_light\"\n  variables:\n    ulm_card_light_enable_color: true\n    ulm_card_light_enable_slider: true\n    ulm_card_light_enable_popup: true\n

Do this for all placeholders. You can always use less cards by deleting placeholders or add more cards by adding new areas under the grid-template-areas.

For adapting the action use adaptive within the corresponding custom actions' variables. Take a look in the custom actions section within this docs.

"},{"location":"setup/adaptive_dash/#adding-popups-on-the-right-side","title":"Adding popups on the right-side","text":"

All cards on the right-side are configured in adaptive-dash/popup/popup.yaml.

First you need to add the input_select you have created to the file.

Important

type: custom:state-switch\nview_layout:\n  grid-area: popup\n  show:\n    mediaquery: \"(min-width: 1100px)\"\nentity: input_select.minimalist_ui # put your input_select here\n

We preconfigured multiple popups for different types of devices. In popup.yaml you only have to complete the information in the variables part. The light 1, mediaplayer 1, livingroom parts in the code refer to the options you have configuered in your input_select. Make sure they are spelled the same. (see documentation on state-switch)

Warning

Only uncomment the options you have configured! Else it could result in multiple errors in the dev-console of your browser.

Follow this part to add a card to an option of your input_select: To add a light popup to your first light card you just have to add the corresponding entity:

type: custom:state-switch\nview_layout:\n  grid-area: popup\n  show:\n    mediaquery: \"(min-width: 1100px)\"\nentity: input_select.minimalist_ui # put your input_select here\ndefault: default\ntransition: slide-down\ntransition_time: 500\nstates:\n  ## Lights\n  light 1:\n    type: \"custom:button-card\"\n    template: \"popup_light_brightness\"\n    entity: \"<your_entity>\"\n

You can also add any other card by copying its yaml code in without the hyphen (-)

states:\n  ## Lights\n  light 1:\n    type: \"custom:button-card\"\n    template: \"popup_light_brightness\"\n    entity: \"<your_entity>\"\n  card 1:\n    type: \"custom:button-card\"\n    template: \"<your_template>\"\n

Important!

All options(devices) do need its own config in popup.yaml!

To switch between popups we need to go back to adaptive-dash/views/main.yaml. Here we have to add two variables to the cards we want to show a popup off. After adding these variables the cards need to be double_tapped to change popups.

variables:\n  ulm_input_select_option: light 1\n  ulm_input_select: input_select.minimalist_ui_switch\n

Eventually the card_light we did configure should be like this:

- view_layout:\n    grid-area: \"card1\"\n  type: \"custom:button-card\"\n  template: \"card_light\"\n  entity: \"light.your_light\"\n  variables:\n    ulm_card_light_enable_color: true\n    ulm_card_light_enable_slider: true\n    ulm_card_light_enable_popup: true\n    ulm_input_select_option: light 1\n    ulm_input_select: input_select.minimalist_ui_switch\n

From here you can duplicate the steps for each card.

Supported

All cards working with official popups and the card_room support these variables. The name is uniform between all supported cards.

"},{"location":"setup/adaptive_dash/#setup-more-views","title":"Setup more views","text":"

We already made a file for a second view: adaptive-dash/views/livingroom.yaml. You can make as many views as you want by duplicating and alter the views files.

To make the new view visible you have to add some entry to adaptive-dash/adaptive-ui.yaml. You only have to change the name of the room/view to the new entry.

Add an extra view example (click to open) 
title: \"UI Lovelace Minimalist\"\ntheme: \"minimalist-desktop\"\nbackground: \"var(--background-image)\"\nviews:\n  - type: \"custom:grid-layout\"\n    title: \"home\"\n    icon: \"mdi:home\"\n    path: \"0\"\n    layout:\n    grid-template-columns: \"1fr 1fr\"\n    grid-template-rows: \"min-content\"\n    grid-template-areas: |\n        \"main popup\"\n    mediaquery:\n        \"(max-width: 1100px), (orientation: portrait)\":\n        grid-template-columns: \"100%\"\n        grid-template-areas: \"main\"\n    cards:\n    - !include \"views/main.yaml\"\n    - !include \"popup/popup.yaml\"\n\n  - type: \"custom:grid-layout\"\n    title: \"Livingroom\"\n    icon: \"mdi:sofa\"\n    path: \"Livingroom\"\n    layout:\n    grid-template-columns: \"1fr 1fr\"\n    grid-template-rows: \"min-content\"\n    grid-template-areas: |\n        \"livingroom popup\"\n    mediaquery:\n        \"(max-width: 1100px), (orientation: portrait)\":\n        grid-template-columns: \"100%\"\n        grid-template-areas: \"livingroom\"\n    cards:\n    - !include \"views/livingroom.yaml\"\n    - !include \"popup/popup.yaml\"\n\n  - type: \"custom:grid-layout\"\n    title: \"New View\"\n    icon: \"mdi:flower\"\n    path: \"New View\"\n    layout:\n    grid-template-columns: \"1fr 1fr\"\n    grid-template-rows: \"min-content\"\n    grid-template-areas: |\n        \"new_view popup\"\n    mediaquery:\n        \"(max-width: 1100px), (orientation: portrait)\":\n        grid-template-columns: \"100%\"\n        grid-template-areas: \"newview\"\n    cards:\n    - !include \"views/newview.yaml\"\n    - !include \"popup/popup.yaml\"\n

You can also show room views as a popup. To configure this add a !include entry in the popup.yaml file. As example we configured livingroom already. Make sure this is also an option in your input_select.

# Add livingroom popup to popup.yaml\nlivingroom: !include \"../views/livingroom.yaml\"\n

Also add the two variables to the corresponding card_room:

variables:\n  ulm_input_select_option: livingroom\n  ulm_input_select: input_select.minimalist_ui_switch\n
"},{"location":"setup/configuration/","title":"Configuration","text":""},{"location":"setup/configuration/#add-theme-to-your-lovelace","title":"Add theme to your Lovelace","text":"

To get this theme with all the button templates working make sure at least the generated Lovelace Dashboard is working.

"},{"location":"setup/configuration/#yaml-mode","title":"YAML Mode","text":"

As described in the installation step, we have already created a small sample dashboard for you, whose file is called ui-lovelace.yaml in the following directory when setting up the integration:

config\n\u2514\u2500\u2500 ui_lovelace_minimalist\n    \u251c\u2500\u2500 custom_cards\n    \u2514\u2500\u2500 dashboard\n        \u2514\u2500\u2500 ui-lovelace.yaml\n

This example dashboard file already contains the necessary directory bindings with our templates from the custom_component and you can directly start customizing the dashboard according to your own wishes.

However, if you want to use your own, possibly already existing, dashboard file, you must make the necessary bindings of the templates in it yourself. This can be done for example by specifying the following:

# Button cards location\nbutton_card_templates: !include_dir_merge_named \"custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/\"\n

Please note! This step is only necessary if you are not using the sample dashboard file created for you. The path specifications are relative. Depending on where you have stored your own Dashboard .yaml file, your path specification can differ from the example and must be adapted by you. In the example it was assumed that the .yaml file is located in the top level of the Home Assistant configuration.

"},{"location":"setup/configuration/#ui-mode","title":"UI Mode","text":"

Currently not supported

The Problem: Home Assistant doesn\u2019t let you include complete folders or even files in UI-mode. That means for you, you can\u2019t work with the folder and file structure, we have provided in our download. You can manually go through the template files and copy the content that you need to paste in your raw-config-editor. However, this is very time-consuming and error-prone, which is why we have decided not to support this method at present.

"},{"location":"setup/configuration/#custom-cards","title":"Custom Cards","text":"

This integration also allows you to add your own Custom Button Cards. These cards are not part of the HACS installation and must be downloaded separately from the repo as needed. You can find an overview of the cards here in our wiki. The cards themselves for the download are on our repo here.

To find some more detailed instructions to include the custom-cards to your dashboard take a look on this page.

"},{"location":"setup/custom_actions/","title":"Custom actions","text":""},{"location":"setup/custom_actions/#customize-tap-double-tap-and-hold-actions","title":"Customize tap, double-tap and hold actions","text":"

This 'theme' do offer support for customizing actions. Tap, double-tap and hold on different parts (card, icon and name) of the cards could be changed. To achieve this customization follow the instructions on this page.

To change the normal behaviour of tap_action, double_tap_action and hold_action, edit custom_actions.yaml file located under /config/ui_lovelace_minimalist/custom_actions/.

---\nulm_custom_actions:\n  variables:\n    ulm_card_tap_action: \"toggle\"\n    ulm_card_hold_action: \"popup\"\n    ulm_card_double_tap_action: \"more-info\"\n    ulm_icon_tap_action: \"popup\"\n    ulm_icon_hold_action: \"none\"\n    ulm_icon_double_tap_action: \"none\"\n    ulm_name_tap_action: \"more-info\"\n    ulm_name_hold_action: \"toggle\"\n    ulm_name_double_tap_action: \"popup\"\n

Possible values for each variables are :

Value Description none No action toggle Toggle an entity if available (for binary_sensor and sensor entity, none action is used) more-info Display more-info window popup Display UI LOVELACE MINIMALIST popup if available and enabled on card (if not more-info action is used) adaptive Switch UI LOVELACE MINIMALIST popup on adaptive dashboard if current dashboard is adaptive (if not popup action is used) navigate Navigate to an other UI LOVELACE MINIMALIST view. Need additional variable (see below)"},{"location":"setup/custom_actions/#haptic-feedback","title":"Haptic feedback","text":"

Next to the action also the haptic feedback of the actions can be configured in the custom_actions.yaml file:

For each action a haptic feedback could be configured:

---\nulm_custom_actions:\n  variables:\n    ulm_card_tap_haptic: \"medium\"\n    ulm_card_hold_haptic: \"none\"\n    ulm_card_double_tap_haptic: \"none\"\n    ulm_icon_tap_haptic: \"none\"\n    ulm_icon_hold_haptic: \"none\"\n    ulm_icon_double_tap_haptic: \"none\"\n    ulm_name_tap_haptic: \"medium\"\n    ulm_name_hold_haptic: \"none\"\n    ulm_name_double_tap_haptic: \"none\"\n

Possible values for each variables (according to the underlying button card) are :

  • none
  • success
  • warning
  • failure
  • light
  • medium
  • heavy
  • selection

Reloading

Once you have edited custom_actions.yaml file, you must reload \"UI LOVELACE MINIMALIST\" configuration. Just go to \"Configuration\" --> \"Settings\" in Home Assistant and press the \"UI_LOVELACE_MINIMALIST\" button within the \"YAML configuration reloading\" section.

"},{"location":"setup/custom_actions/#navigate-action","title":"Navigate action","text":"

To define the path of navigate action, add one of the following depending on your action :

  • ulm_card_tap_navigate_path
  • ulm_card_hold_navigate_path
  • ulm_card_double_tap_navigate_path
  • ulm_icon_tap_navigate_path
  • ulm_icon_hold_navigate_path
  • ulm_icon_double_tap_navigate_path
  • ulm_name_tap_navigate_path
  • ulm_name_hold_navigate_path
  • ulm_name_double_tap_navigate_path
- type: \"custom:button-card\"\n  template: \"card_cover\"\n  entity: \"cover.somfy_portail\"\n  variables:\n    ulm_name_hold_action: \"navigate\"\n    ulm_name_hold_navigate_path: \"/adaptive-dash/Livingroom\"\n
"},{"location":"setup/custom_actions/#call-service-action","title":"Call service action","text":"

It is possible to call a service using the custom actions on the icon, name and card.

To define the service and its data of call-service action, add one of the following variables depending on your action :

  • ulm_card_tap_service / ulm_card_tap_service_data
  • ulm_card_hold_service / ulm_card_hold_service_data
  • ulm_card_double_tap_service / ulm_card_double_tap_service_data
  • ulm_icon_tap_service / ulm_icon_tap_service_data
  • ulm_icon_hold_service / ulm_icon_hold_service_data
  • ulm_icon_double_tap_service / ulm_icon_double_tap_service_data
  • ulm_name_tap_service / ulm_name_tap_service_data
  • ulm_name_hold_service / ulm_name_hold_service_data
  • ulm_name_double_tap_service / ulm_name_double_tap_service_data

The following configuration shows the configuration of a service call using the tap action.

- type: \"custom:button-card\"\n  template: \"card_cover\"\n  entity: \"cover.somfy_portail\"\n  variables:\n    ulm_name_tap_action: \"call-service\"\n    ulm_name_tap_service: \"light.toggle\"\n    ulm_name_tap_service_data:\n      entity_id: light.light_livingroom_2\n
"},{"location":"setup/custom_actions/#overwrite-custom-actions","title":"Overwrite custom actions","text":"

When creating a dashboard, custom actions and the haptic feedback can be overwritten on your card definition. For example, this code will overwrite the tap action on card with more-info action :

- type: \"custom:button-card\"\n  template: \"card_cover\"\n  entity: \"cover.somfy_portail\"\n  variables:\n    ulm_card_tap_action: \"more-info\"\n    ulm_card_tap_haptic: \"success\"\n
"},{"location":"setup/custom_actions/#custom-popups","title":"Custom Popups","text":"

The implementation of the custom action now supports the configuration of individual popups. The custom popup can be easily configured for each card.

To enable a custom popup the variable ulm_custom_popup must be set within the card. This variable have three subvariables template, entity and popup_variables. The template must be the name of the template that should be loaded. The necessary configuration variables for the popup can be configured in the variable popup_variables.

Usually the popup uses the same entity as the card that calls the popup. It is also possible to overwrite the entity for the popup. Therefore the entity can be set using the entity variable within the ulm_custom_popup. This entity variable is optional. It is also possible to disable the entity of the custom popup it the entity variable within the ulm_custom_popup is set tonone`.

- type: 'custom:button-card'\n  template: card_power_outlet\n  entity: switch.power_outlet_livingroom\n  variables:\n    ulm_card_power_outlet_consumption_sensor: sensor.power_outlet_livingroom_consumption\n    ulm_card_power_outlet_name: Power Outlet Livingroom\n    ulm_custom_popup:\n      template: \"popup_power_outlet_stats\"\n      entity: switch.power_outlet_livingroom\n      popup_variables:\n        ulm_popup_power_outlet_sensor1: sensor.power_outlet_livingroom\n        ulm_popup_power_outlet_sensor2: sensor.power_outlet_livingroom_consumption\n        ulm_popup_power_outlet_graph_sensor: sensor.power_outlet_livingroom\n        ulm_popup_power_outlet_entity: switch.power_outlet_livingroom\n

The available popup templates popup_media_player_infos, popup_light_brightness, popup_thermostat_temperature or popup_power_outlet_stats can already be used with the custom popups.

This implementation allows the easy creation of custom popups that can be loaded by other cards.

Light, Media Player, Thermostat

The card_light, card_media_player and card_thermostat uses a different approach. Therefore the popup can be simply enabled by setting one of the variables ulm_card_light_enable_popup, ulm_card_thermostat_enable_popup or ulm_card_media_player_enable_popup to true.

"},{"location":"setup/custom_actions/#for-developers","title":"For developers","text":"

To enable action customization on your custom cards, use either the icon_more_info_new, icon_more_info_alert or the extended_card template. There is no need to implement the ulm_card_actions template anymore.

There are three possibilities to include the custom actions into your custom cards:

"},{"location":"setup/custom_actions/#use-template-extend_card-as-combination-of-two-cards","title":"Use template extend_card as combination of two cards","text":"

The simplest way to create a custom card that uses these custom actions is the combination of two cards.

For enabling the feature the custom card must implement the template extended_card. Then two custom fields must be used:

  • item1 must be a card that already implements the template icon_more_info_new. Most of the core cards already implements this template.
  • item2 can be any Lovelace card that should extend the card.

If you add custom styles to item2 then following code should be added into the style field

ha-card {\n  box-shadow: none;\n  border-radius: var(--border-radius);\n}\n

The already available Graph card (card_graph) is an example for this implementation. As item1 a generic_card is used. The item2 provides a mini-graph-card.

Graph card as example card_binary_sensor_alert.yaml
---\n### Card Graph ###\ncard_graph:\n  template:\n    - \"extended_card\"\n  variables:\n    ulm_card_graph_color: \"var(--info-color)\"\n    ulm_card_graph_name: \"[[[ return entity.attributes.friendly_name; ]]]\"\n    ulm_card_graph_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_graph_color2: \"var(--info-color)\"\n    ulm_card_graph_entity2: \"\"\n    ulm_card_graph_hours: 24\n    ulm_card_graph_type: \"fill\"\n    ulm_card_graph_points: \"0.5\"\n    ulm_card_graph_group_by: \"interval\"\n    ulm_card_graph_line_width: 5\n    ulm_card_graph_icon_color: \"\"\n  triggers_update:\n    - \"[[[ return variables.ulm_card_graph_entity2 ]]]\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"card_generic\"\n        variables:\n          ulm_card_generic_icon: \"[[[ return variables.ulm_card_graph_icon; ]]]\"\n          ulm_card_generic_name: \"[[[ return variables.ulm_card_graph_name; ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              custom_fields:\n                item1:\n                  card:\n                    type: \"custom:button-card\"\n                    styles:\n                      icon:\n                        - color: >\n                            [[[\n                              var color = variables.ulm_card_graph_icon_color;\n                              if (variables.ulm_card_graph_icon_color){\n                                return 'rgba(var(--color-' + color + '),1)';\n                              }\n                              return 'rgba(var(--color-theme),0.2)';\n                            ]]]\n                      img_cell:\n                        - background-color: >\n                            [[[\n                              var color = variables.ulm_card_graph_icon_color;\n                              if (variables.ulm_card_graph_icon_color){\n                                return 'rgba(var(--color-' + color + '),0.2)';\n                              }\n                              return 'rgba(var(--color-theme),0.05)';\n                            ]]]\n    item2:\n      card:\n        type: \"custom:mini-graph-card\"\n        entities: >\n          [[[\n            var ent = [];\n            ent.push(variables.ulm_card_graph_entity);\n            if(variables.ulm_card_graph_entity2 != \"\")\n              ent.push(variables.ulm_card_graph_entity2);\n            return ent;\n          ]]]\n        line_color: >\n          [[[\n            var col = [];\n            col.push(variables.ulm_card_graph_color);\n            if(variables.ulm_card_graph_color2 != \"\")\n              col.push(variables.ulm_card_graph_color2);\n            return col;\n          ]]]\n        show:\n          name: false\n          icon: false\n          legend: false\n          state: false\n          graph: \"[[[ return variables.ulm_card_graph_type=='fill'?'line':variables.ulm_card_graph_type; ]]]\"\n          fill: \"[[[ return variables.ulm_card_graph_type=='fill'?true:false; ]]]\"\n        hours_to_show: \"[[[ return variables.ulm_card_graph_hours; ]]]\"\n        points_per_hour: \"[[[ return variables.ulm_card_graph_points; ]]]\"\n        group_by: \"[[[ return variables.ulm_card_graph_group_by; ]]]\"\n        line_width: \"[[[ return variables.ulm_card_graph_line_width; ]]]\"\n        style: |\n          ha-card {\n            box-shadow: none;\n            border-radius: var(--border-radius);\n          }\n
"},{"location":"setup/custom_actions/#use-template-icon_more_info_new-or-icon_more_info_alert","title":"Use template icon_more_info_new or icon_more_info_alert","text":"

The card must implement the template icon_more_info_newor icon_more_info_alert. Then it must implement a custom field item1 which is also a custom:button-card. This card must have the custom fields item1which represents the icon and item2which represents the name.

Most of the internal card templates uses this option. Take a look into the code.

Generic card as example card_binary_sensor_alert.yaml
---\n### Card Generic ###\ncard_generic:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_generic_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_generic_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_outlet_power_enable_popup: false\n    ulm_card_generic_color: \"blue\"\n    ulm_card_generic_force_background_color: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                if (variables.ulm_card_generic_force_background_color) {\n                  var color = variables.ulm_card_generic_color;\n                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                }\n              ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_generic_icon; ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_generic_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.2)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_generic_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_translation_state ]]]\"\n              label: \"[[[ return variables.ulm_card_generic_name ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_generic_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_generic_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n
"},{"location":"setup/custom_actions/#use-template-ulm_actions_card_overlay","title":"Use template ulm_actions_card_overlay","text":"

If you implement a custom card that is based on another Lovelace card like the weather card you can simply enable custom card actions by using the template ulm_actions_card_overlay on the card. This template adds an overlay over the whole card and reaction on the tap, hold, double tap actions. It also enables the integration of custom popups for the card. Actions of the underlying card will be disabled by this method.

The weather card gives you an example and will show the usage of this method.

"},{"location":"setup/custom_actions/#individual-implementation","title":"Individual implementation","text":"

The following script shows the usage off all necessary variables and template that will be used by the custom actions.

The card must implement the templates ulm_custom_actions and ulm_action_card in the correct order. The example shows the custom fields item1 that implements the redirection of an icon field and item2 that implements the redirecton of a name field.

---\ncustom_card:\n  template:\n    - \"ulm_custom_actions\"\n    - \"ulm_actions_card\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        template:\n          - \"ulm_actions_icon\"\n        variables:\n          ulm_input_select_option: \"[[[ return variables.ulm_input_select_option; ]]]\"\n          ulm_input_select: \"[[[ return variables.ulm_input_select; ]]]\"\n          ulm_icon_tap_action: \"[[[ return variables.ulm_icon_tap_action; ]]]\"\n          ulm_icon_tap_haptic: \"[[[ return variables.ulm_icon_tap_haptic; ]]]\"\n          ulm_icon_tap_navigate_path: \"[[[ return variables.ulm_icon_tap_navigate_path; ]]]\"\n          ulm_icon_tap_service: \"[[[ return variables.ulm_icon_tap_service; ]]]\"\n          ulm_icon_tap_service_data: \"[[[ return variables.ulm_icon_tap_service_data]]]\"\n          ulm_icon_hold_action: \"[[[ return variables.ulm_icon_hold_action; ]]]\"\n          ulm_icon_hold_haptic: \"[[[ return variables.ulm_icon_hold_haptic; ]]]\"\n          ulm_icon_hold_navigate_path: \"[[[ return variables.ulm_icon_hold_navigate_path; ]]]\"\n          ulm_icon_hold_service: \"[[[ return variables.ulm_icon_hold_service; ]]]\"\n          ulm_icon_hold_service_data: \"[[[ return variables.ulm_icon_hold_service_data]]]\"\n          ulm_icon_double_tap_action: \"[[[ return variables.ulm_icon_double_tap_action; ]]]\"\n          ulm_icon_double_tap_haptic: \"[[[ return variables.ulm_icon_double_tap_haptic; ]]]\"\n          ulm_icon_double_tap_navigate_path: \"[[[ return variables.ulm_icon_double_tap_navigate_path; ]]]\"\n          ulm_icon_double_tap_service: \"[[[ return variables.ulm_icon_double_tap_service; ]]]\"\n          ulm_icon_double_tap_service_data: \"[[[ return variables.ulm_icon_double_tap_service_data]]]\"\n          ulm_custom_popup: \"[[[ return variables.ulm_custom_popup; ]]]\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        template:\n          - \"ulm_actions_name\"\n        variables:\n          ulm_input_select_option: \"[[[ return variables.ulm_input_select_option; ]]]\"\n          ulm_input_select: \"[[[ return variables.ulm_input_select; ]]]\"\n          ulm_name_tap_action: \"[[[ return variables.ulm_name_tap_action; ]]]\"\n          ulm_name_tap_haptic: \"[[[ return variables.ulm_name_tap_haptic; ]]]\"\n          ulm_name_tap_navigate_path: \"[[[ return variables.ulm_name_tap_navigate_path; ]]]\"\n          ulm_name_tap_service: \"[[[ return variables.ulm_name_tap_service; ]]]\"\n          ulm_name_tap_service_data: \"[[[ return variables.ulm_name_tap_service_data]]]\"\n          ulm_name_hold_action: \"[[[ return variables.ulm_name_hold_action; ]]]\"\n          ulm_name_hold_haptic: \"[[[ return variables.ulm_name_hold_haptic; ]]]\"\n          ulm_name_hold_navigate_path: \"[[[ return variables.ulm_name_hold_navigate_path; ]]]\"\n          ulm_name_hold_service: \"[[[ return variables.ulm_name_hold_service; ]]]\"\n          ulm_name_hold_service_data: \"[[[ return variables.ulm_name_hold_service_data]]]\"\n          ulm_name_double_tap_action: \"[[[ return variables.ulm_name_double_tap_action; ]]]\"\n          ulm_name_double_tap_haptic: \"[[[ return variables.ulm_name_double_tap_haptic; ]]]\"\n          ulm_name_double_tap_navigate_path: \"[[[ return variables.ulm_name_double_tap_navigate_path; ]]]\"\n          ulm_name_double_tap_service: \"[[[ return variables.ulm_name_double_tap_service; ]]]\"\n          ulm_name_double_tap_service_data: \"[[[ return variables.ulm_name_double_tap_service_data]]]\"\n          ulm_custom_popup: \"[[[ return variables.ulm_custom_popup; ]]]\"\n

For developes who have already implemented the custom actions on their card

There could be some breaking changes:

  • The custom card should either implement the icon_more_info_new or the extended_card
  • The template ulm_actions_card can be removed
  • The variable redirections for the ulm_*_action can be removed

Also the custom popup feature has some breaking changes: The variables ulm_card_light_enable_popup, ulm_card_thermostat_enable_popup and ulm_card_media_player_enable_popup aren't used internally anymore. The are only working on their appropriate cards as configuration option for the end user of the card. So the custom_popup variable should be used instead.

"},{"location":"setup/custom_actions/#for-developers-of-custom-popups","title":"For developers of custom popups","text":"

Custom popups must be a custom:button-card. It is also recommended to disable the icon, name and label within the card configuration using

show_icon: false\nshow_name: false\nshow_label: false\nshow_units: false\n

The usage of variables within the popup have some restrictions. Default variables of the popup don't work in the same way as for other custom button cards. The default variables -- defined in the variables section -- will always be overwritten by the custom actions caller.

The following code won't work on custom popup cards:

popup_weather_forecast:\n...\n  variables:\n    ulm_weather_popup_surpress_first_forecast: false\n...\n

Instead of using the variables section of the card the variables must be checked within a JavaScript template. The following code shows an example how to check and define a default value of custom popup variable:

element: >\n  [[[\n    let surpress_first_forecast = ('ulm_weather_popup_surpress_first_forecast' in variables) ? variables.ulm_weather_popup_surpress_first_forecast : false;\n\n    if (surpress_first_forecast) {\n      ...\n    }\n\n    return surpress_first_forecast;\n  ]]]\n

The code checks if the variable is available before reading from the variabl and if the variable isn't available it will set a default value.

"},{"location":"setup/custom_cards/","title":"Configuration","text":""},{"location":"setup/custom_cards/#add-custom-cards-to-your-dashboard","title":"Add Custom-cards to your dashboard","text":"

This 'theme' and his community do offer support for multiple great Custom-cards. To use and download these Custom-cards follow the instructions on this page.

\ud83d\ude80 New Custom Card Selection Feature! \ud83d\ude80

Since the release of v1.1.0 support has been build in to select custom/community cards that are available in the main branch on our Github Repository in the custom_cards folder. This Removes the need for copying over files from the Github Repo and put them in the /config/ui_lovelace_minimlist/custom_cards folder. You can select the custom cards you want to use in your integration options (see installation). This requires a GitHub account. Alternatively you can copy the custom cards you want to use as outlined below.

"},{"location":"setup/custom_cards/#custom-cards","title":"Custom Cards","text":"

This integration also allows you to add your own Custom Button Cards. These cards are not part of the HACS installation and must be downloaded separately from the repo as needed. You can find an overview of the cards here in our wiki. The cards themselves for the download are on our repo here, or select them on the integration Configuration page.

You might have noticed, during the installation process a directory for UI Lovelace Minimalist is/should be created in the Home Assistant configuration directory (in the folder /config). The directory is named ui_lovelace_minimalist, within this directory you can put custom cards in the folder custom_cards. Basically you just have to create an folder inside ui_lovelace_minimalist/custom_cards for each custom_card you want to add and put the custom_card.yaml file and the translation file you need for the respective custom_card inside. These cards will then be merged into a directory together witch the cards of this integration and the selected Language.

Translation files for custom cards

Most Custom Cards do not work without adding a small translation file. These files can be found in the corresponding folder of a particular Custom Card within a folder languages. Make sure to only download the translation file you need. As adding multiple translation files can give unwanted results/errors!

Make sure it's in the format like the following example:

config\n\u2514\u2500\u2500 ui_lovelace_minimalist\n    \u251c\u2500\u2500 custom_cards\n    |   \u251c\u2500\u2500 custom_card_1\n    |   |   \u251c\u2500\u2500 custom_card_1.yaml\n    |   |   \u2514\u2500\u2500 EN.yaml\n    |   \u2514\u2500\u2500 custom_card_2\n    |       \u251c\u2500\u2500 custom_card_2.yaml\n    |       \u2514\u2500\u2500 EN.yaml\n    \u2514\u2500\u2500 dashboard\n

Warning

Do not alter files in custom_components/ui_lovelace_minimalist as those changes will be overridden with each new release/update through HACS!!

You don't need to do any extra inclusion in your dashboard yaml via !include, the custom_cards will be copied from this folder to the custom_component directory. The custom_cards folder itself remains untouched. A list of all currently available custom_cards can be found on our repo here: https://github.com/UI-Lovelace-Minimalist/UI/tree/main/custom_cards

Reloading

Once you have added new custom_cards, you can always reload that folder via Home Assistant and add the new cards to the config. Just go to \"Developer Tools\" in Home Assistant and press the \"UI_LOVELACE_MINIMALIST\" button within the \"YAML configuration reloading\" section.

"},{"location":"setup/custom_cards/#develop-your-own-custom-cards","title":"Develop your own Custom-cards","text":"

You can always manual add new YAML-files with card-templates to /config/ui_lovelace_minimalist/custom_cards for your own use. If you want to share and contribute your custom-cards to the community please read this page.

"},{"location":"setup/customizing/","title":"Customizing","text":"

When you have finished the installation process successfully it's time to start customizing your dashboard. You can find your ui-minimalist-lovelace file here:

config\n\u2514\u2500\u2500 ui_lovelace_minimalist\n    \u251c\u2500\u2500 custom_cards\n    \u2514\u2500\u2500 dashboard\n        \u2514\u2500\u2500 ui-lovelace.yaml\n

It should look like this:

ui-lovelace.yaml 
---\nbutton_card_templates: !include_dir_merge_named \"../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/\"\n\ntitle: \"UI Lovelace Minimalist\"\ntheme: \"minimalist-desktop\"\nbackground: \"var(--background-image)\"\n# views: !include_dir_merge_list \"views/\"\nviews:\n  - title: \"Example View\"\n    path: 0\n    icon: \"mdi:flower\"\n    cards:\n      - type: \"vertical-stack\"\n        cards:\n          - type: \"custom:button-card\"\n            template: \"card_title\"\n            name: \"Congrats with your installation \ud83c\udf89\"\n            label: \"Explore some of the wonderful 'Minimalistic-UI' cards we offer here\"\n          - type: \"custom:auto-entities\"\n            card:\n              type: \"grid\"\n              columns: 1\n              square: false\n            card_param: \"cards\"\n            sort:\n              count: 1\n            filter:\n              include:\n                - domain: \"weather\"\n                  options:\n                    type: \"custom:button-card\"\n                    template: \"card_welcome_scenes\"\n                    variables:\n                      ulm_weather: \"this.entity_id\"\n          - type: \"custom:button-card\"\n            template: \"card_title\"\n            name: \"[[[ hass.resources[hass['language']]['ui.panel.lovelace.editor.card.light.name'] ]]]\"\n            label: \"This is the Minimalist-light-card\"\n          - type: \"custom:auto-entities\"\n            card:\n              type: \"grid\"\n              columns: 2\n              square: false\n            card_param: \"cards\"\n            sort:\n              count: 4\n            filter:\n              include:\n                - domain: \"light\"\n                  options:\n                    type: \"custom:button-card\"\n                    template: \"card_light\"\n                    variables:\n                      ulm_card_light_enable_slider: true\n                      ulm_card_light_enable_color: true\n                      ulm_card_light_enable_popup: true\n          - type: \"custom:button-card\"\n            template: \"card_title\"\n            name: \"Binary Sensors\"\n            label: \"This is the Minimalist-binary_sensor-card\"\n          - type: \"custom:auto-entities\"\n            card:\n              type: \"grid\"\n              columns: 2\n              square: false\n            card_param: \"cards\"\n            sort:\n              count: 4\n            filter:\n              include:\n                - domain: \"binary_sensor\"\n                  options:\n                    type: \"custom:button-card\"\n                    template: \"card_binary_sensor_alert\"\n                    variables:\n                      - ulm_card_binary_sensor_alert: true\n          - type: \"custom:button-card\"\n            template: \"card_title\"\n            name: \"[[[ hass.resources[hass['language']]['ui.panel.lovelace.editor.card.sensor.name'] ]]]\"\n            label: \"This is the Minimalist-sensor-card\"\n          - type: \"custom:auto-entities\"\n            card:\n              type: \"grid\"\n              columns: 2\n              square: false\n            card_param: \"cards\"\n            sort:\n              count: 4\n            filter:\n              include:\n                - domain: \"sensor\"\n                  options:\n                    type: \"custom:button-card\"\n                    template: \"card_generic\"\n          - type: \"custom:button-card\"\n            template: \"card_title\"\n            name: \"[[[ hass.resources[hass['language']]['ui.dialogs.entity_registry.editor.device_classes.binary_sensor.battery'] ]]]\"\n            label: \"This is the Minimalist-battery-card\"\n          - type: \"custom:auto-entities\"\n            card:\n              type: \"grid\"\n              columns: 2\n              square: false\n            card_param: \"cards\"\n            sort:\n              count: 4\n            filter:\n              include:\n                - attributes:\n                    unit_of_measurement: \"%\"\n                    device_class: \"battery\"\n                  options:\n                    type: \"custom:button-card\"\n                    template: \"card_battery\"\n                    variables:\n                      ulm_card_battery_battery_state_entity_id: \"this.entity_id\"\n                      ulm_card_battery_battery_level_danger: 30\n                      ulm_card_battery_battery_level_warning: 80\n
"},{"location":"setup/customizing/#how-to-customize-the-dashboard","title":"How to customize the dashboard","text":"

You can customize your dashboard like any other YAML-based lovelace dashboard.

UI-mode is not yet supported

So first let add some cards. These can be found on the Wiki. As an example we will add the card_light and card_vacuum next to each other with help of a horizontal-stack. Please read carefully the wiki-page of each of the cards to understand their specific variables.

---\nbutton_card_templates: !include_dir_merge_named \"../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/\"\n\ntitle: \"UI Lovelace Minimalist\"\ntheme: \"minimalist-desktop\"\nbackground: \"var(--background-image)\"\n# views: !include_dir_merge_list \"views/\"\nviews:\n  - title: \"Example View\"\n    path: 0\n    icon: \"mdi:flower\"\n    cards:\n      - type: \"horizontal-stack\"\n        cards:\n          - type: \"custom:button-card\"\n            template: card_light\n            entity: light.living_room\n            variables:\n              ulm_card_light_enable_slider: true\n              ulm_card_light_enable_color: true\n          - type: \"custom:button-card\"\n            template: \"card_vacuum\"\n            entity: \"vacuum.roborock_s5\"\n

The path: in the example above is also the path name used in navigation_path:

"},{"location":"setup/customizing/#add-extra-views-tabs","title":"Add extra views (tabs)","text":"

All views/tabs are created as list items underneath:

views:\n

Make sure you set at least parameters for title, path and icon for each view

views:\n  - title: \"Main\"\n    path: 0\n    icon: \"mdi:flower\"\n    cards:\n      - type: \"custom:button-card\"\n            template: card_light\n            entity: light.living_room\n            variables:\n              ulm_card_light_enable_slider: true\n              ulm_card_light_enable_color: true\n  - title: \"Lights\"\n    path: lights\n    icon: \"mdi:lightbulb\"\n    cards:\n      - type: \"custom:button-card\"\n            template: card_light\n            entity: light.living_room\n            variables:\n              ulm_card_light_enable_slider: true\n              ulm_card_light_enable_color: true\n
"},{"location":"setup/customizing/#add-multiple-dashboards","title":"Add multiple dashboards","text":"

After you have build your first dashboard with UI-Minimalist it's time to build multiple dashboards. If you would to be able to adjust non-UI-Minimalist with the UI-mode it's best to work with storage mode. For the first dashboard we did all the configuration for you. To add a second one you need to take a few steps.

Add another ui-lovelace.yaml to your dashboard folder:

config\n\u2514\u2500\u2500 ui_lovelace_minimalist\n    \u251c\u2500\u2500 custom_cards\n    \u2514\u2500\u2500 dashboard\n        \u2514\u2500\u2500 ui-lovelace.yaml\n        \u2514\u2500\u2500 ui-lovelace_2.yaml\n

Add a reference to it in configuration.yaml:

lovelace:\n  mode: storage\n  # Add yaml dashboards\n  dashboards:\n    lovelace-minimalist-2:\n      mode: yaml\n      title: Minimalist 2\n      icon: mdi:flower\n      show_in_sidebar: true\n      filename: ui_lovelace_minimalist/dashboard/ui-lovelace_2.yaml\n

You don't need to add the first dashboard which is installed with the integration

As mentioned on the configuration page you need to add a line of code to load in all Minimalist card templates. The start of each new dashboard file should therefore, look like this:

---\nbutton_card_templates: !include_dir_merge_named \"../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/\"\n\ntitle: \"My new dashboard\"\ntheme: \"minimalist-desktop\"\nbackground: \"var(--background-image)\"\n# views: !include_dir_merge_list \"views/\"\nviews:\n
"},{"location":"setup/download/","title":"Prepare & Download","text":"

Before get started on anything, make sure you have created a backup of your home assistant configuration.

In case you experience problems during installation please reach join the Discord Server.

You can install this UI Lovelace Minimalist Theme manual or through HACS.

You should have a HomeAssistant (HA) instance running, preferably with HACS installed and you should know the basics in using HA, eg. how to change settings in your lovelace configuration.

You have access to your config folder of HA. Doesn\u2019t matter which way this is, but you need to be able to upload and change files in your config. If you\u2019re running HA-OS or a supervised install of HA, we highly recommend the Samba AddOn (see the AddOn page for instructions) and for editing the File editor AddOn or a good editor like Notepad++ or SublimeText for your OS.

Breaking Changes

This integration is still under heavy development and might cause breaking changes

"},{"location":"setup/download/#hacs-download","title":"HACS Download","text":""},{"location":"setup/download/#prerequisites","title":"Prerequisites","text":"

For the pop-up cards to work it's required to install the Custom Integration called browser-mod. This can be done in HACS and search under Integration on browser-mod. Optionally you can install Frontend modules, but the integration also has a checkmark to include and configure them for you.

"},{"location":"setup/download/#install-repository","title":"Install Repository","text":"

To find this Integration on HACS we first need to add the UI Lovelace Minimalist (ULM) repository to Custom Reposistories.

  1. Go to HACS
  2. Click on Integrations
  3. Search for \"UI Lovelace Minimalist\" and click \"Download this Repository with HACS\"
  4. Select the version (will auto select latest)
  5. Now we need to restart home-assistant under
  6. Wait until Home assistant is restarted and Continue to \"Install Integration\".
"},{"location":"setup/download/#manual-download","title":"Manual Download","text":"

If you can't or don't like to use HACS, you still have the possibility to use this fantastic \"theme\"

"},{"location":"setup/download/#prerequisites_1","title":"Prerequisites","text":"

In order to function correctly, the UI Lovelace Mininmalist \"Theme\" requires some additional integrations and lovelace resources. While we can install most of these for you during the installation via HACS, you will also have to install and configuring them manually in advance for a manual installation.

"},{"location":"setup/download/#required-integration","title":"Required Integration","text":"
  • browser_mod by Thomas Lov\u00e9n
"},{"location":"setup/download/#required-lovelace-resources","title":"Required Lovelace Resources","text":"
  • button-card by RomRider
  • card-mod by Thomas Lov\u00e9n
  • mini-graph-card by Karl Kihlstr\u00f6m
  • Mini Media Player by Karl Kihlstr\u00f6m
  • My Cards Bundle by AnthonMS**
  • Light Entity Card by Leonardo Merza
  • auto-entities by Thomas Lov\u00e9n
  • simple-weather-card by Karl Kihlstr\u00f6m
  • weather-radar-card by Makin-Things
  • lovelace-layout-card by Thomas Lov\u00e9n
  • lovelace-state-swtch by Thomas Lov\u00e9n

You can install these via HACS or manually.

Some resources (as marked above with **) might not be available in HACS by default. To find and install these using HACS, first add them as custom repositories.

"},{"location":"setup/download/#download-release-file","title":"Download Release File","text":"

Go to the release page and download the ui_lovelace_minimalist.zip attached to the latest release.

Unpack the file and move the folder it contains called ui_lovelace_minimalist to the following directory of your Home Assistant configuration:

/config/custom_components/

If this folder does not exist in your configuration directory, create it. Then you have to restart your Home Assistant and can follow the step \"Install Integration\".

"},{"location":"setup/installation/","title":"Installation","text":""},{"location":"setup/installation/#install-integration","title":"Install Integration","text":"

Open your Home Assistant instance and start setting up by following these steps:

  • Navigate to \"Settings\" --> \"Devices & Services\"
  • Click \"+ Add Integration\"
  • Search for and select -> \"UI Lovelace Minimalist\"

Or you can use the My Home Assistant Button below.

Unsaved Settings

Currently the settings are not stored between initial setup and the settings after installation. After installation the settings drop back to their default values. This bug is reported and looked at.

Now you can configure the Integration, you can do this also after it's installed!

  • Language: Will set the language for the Integration.
  • Enable creation of a Dashboard entry in the Side panel: If you want to add an Entry in the Side Panel for the auto generated Dashboard. (Still under heavy development!)
  • Side panel title: Will set the title for the Lovelace Dashboard in the Sidebar.
  • Side panel icon: Which icon to put in front of the Title.
  • Enable adaptive Dashboard with popup splitview: Creates an entry for the adaptive dashboard
  • Adaptive panel title: Will set the title for the adaptive dashboard in the Sidebar.
  • Adaptive panel icon: Which icon to put in front of the adaptive dashboard sidebar entry.
  • Theme: Choose a theme of your choice (Note: Both themes will be installed anyway and can be customized later if needed.)

Currently, it may happen that themes are not automatically selected correctly for you in all cases automatically. Please make sure that the minimalist theme is correctly selected in your Home Assistant settings (click on your profile picture in Home Assistant, bottom left).

  • Theme path: Make sure this is set to the same path as is configured in your configuration.yaml (default: themes/)

Please make sure that you have included this themes/ folder in your configuration.yaml in the frontend settings. Unfortunately, this is something that the HACS integration cannot do for you. If you use the themes/ folder, your entry in configuration.yaml must look like this for example:

frontend:\n  themes: !include_dir_merge_named themes\n

You will also need to change your user theme to the chosen theme or else no visual modifications will work.

  • Include Custom Cards: This will make sure almost all dependency cards are included and configured for you.

Activate \"Include Custom Cards\" only if you have not already installed the required Lovelace resources yourself, or if you dont want to install them by yourself. Otherwise this can currently lead to a freeze of the frontend due to double loaded lovelace resources.

Included lovelace resources button-card lovelace-card-mod mini-graph-card mini-media-player my-cards-slider-card light-entity-card auto-entities simple-weather-card weather-radar-card lovelace-layout-card lovelace-state-swtch
  • Select Community Cards you want to enable: Selected custom cards will be downloaded automatically to enable usage. Requires a GitHub account. Restart or reload your configuration after toggling this setting. If needed, a notification will appear, indicating that GitHub needs to be set up. You will be prompted to go to your integrations and to reconfigure this integration. Selecting \"reconfigure\" on your Lovelace Minimalist UI integration, the GitHub-Login-flow will start. You might need to restart HomeAssistant, when your selected community cards change.

Hit submit and in the Sidebar a new Dashboard entry should appear. A new file for the dashboard configuration, with a small example, where you can generate your own layout should have been created under that location:

config\n\u2514\u2500\u2500 ui_lovelace_minimalist\n\u251c\u2500\u2500 custom_cards\n\u2514\u2500\u2500 dashboard\n\u2514\u2500\u2500 ui-lovelace.yaml\n

In case you want to use your own ui-lovelace files go to Configuration.

"},{"location":"troubleshooting/troubleshooting/","title":"FAQ","text":"

On this page you can find answers and ways to troubleshoot the most common errors with installing and using this 'theme'.

Most times reloading the integration and emptying the cache can resolve most problems. This is done by:

  1. Hit C and click reload Ui_lovelace_minimalist
  2. Clear your cache by clicking CTRL + F5 on Windows or SHIFT + reload on Mac
"},{"location":"troubleshooting/troubleshooting/#most-common-errors","title":"Most common errors","text":"Not everything is loaded after installation
  1. Check if you have installed all dependencies of this list.
  2. Clear your cache by clicking CTRL + F5 on Windows or SHIFT + reload on Mac
The theme looks off/weird

Check if you have applied the Minimalist theme. Go to User_profile --> theme

Weird border lines after updating to HA 2022.11.0
  1. Check in Minimalist version v1.1.6 or higher is installed
  2. Check in config/themes/ if this line is added to the minimalist theme files: 
        # fix added border-lines in 2022.11\n    ha-card-border-width: \"0px\"\n
  3. Go to the affected dashboard on a PC and hit C on your keyboard. Then select reload Themes.
Custom element doesn't exist
  1. Check if you did install all dependencies or checked the box to let UI-Minimalist them.
  2. (additional) If the dependencies are installed manually check if all resources are added right.
  3. Clear your cache by clicking CTRL + F5 on Windows or SHIFT + reload on Mac.
Popups do not show up
  1. Check if you have installed Browser_mod V2 correctly.
  2. Check if you followed the card specific way to enable popups This is either with adding a template or setting a variable to true
Custom card template does not exist/showing up
  1. Check if you placed the custom_card in the right directory 
    config\n    \u2514\u2500\u2500 ui_lovelace_minimalist\n        \u251c\u2500\u2500 custom_cards\n        |   \u251c\u2500\u2500 custom_card_1\n        |   |   \u251c\u2500\u2500 custom_card_1.yaml\n        |   |   \u2514\u2500\u2500 EN.yaml\n        |   \u2514\u2500\u2500 custom_card_2\n        |       \u251c\u2500\u2500 custom_card_2.yaml\n        |       \u2514\u2500\u2500 EN.yaml\n        \u2514\u2500\u2500 dashboard\n
  2. Hit C and click reload Ui_lovelace_minimalist
  3. Reload dashboard by clicking the three dots in the upper-right corner and click refresh
HACS Frontend resources are not showing up in https://homeassistant.local/config/lovelace/resources

  1. First check what is being displayed when you download a frontend component. If it's showing something like:

    since you are not using Lovelace in storage mode you need to manually add the resource with these settings

  2. First make sure your configuration file has the setting: 

    lovelace:\n  mode: storage\n

  3. In case it still shows that error. go to https://homeassistant.local/config/system_health and search for what is under: Dashboard -> Mode. if that is on auto-gen. Go to the autogenerated lovelace dashboard. and hit the 3 dots and Edit Dashboard. And just hit Save dashboard.
  4. Now go and restart Home assistant. and try to install a frontend module. It should not show the message from step 1.
"},{"location":"usage/cards/card_battery/","title":"Battery Card","text":""},{"location":"usage/cards/card_battery/#description","title":"Description","text":"

Charging animation if ulm_card_battery_charging_animation is true:

The battery-card is a slightly enhanced generic-card, that can indicate whether and how a device is being charged and colors the icon based on the battery level.

"},{"location":"usage/cards/card_battery/#variables","title":"Variables","text":"Variable Default Required Notes entity This is your battery entity ulm_card_battery_name friendly_name Customize name ulm_card_battery_attribute If your entity provides the battery percent in an attribute (= not as an own sensor), fill in the attribute's name here. E.g. if you have sensor.livingroom_thermometer and the attribute for your battery power is sensor.livingroom_thermometer.attributes.battery_percent, you fill in battery_percent here. ulm_card_battery_battery_state_entity_id Entity that holds the battery state (charging/discharging). If provided, the Icon will display the current status. ulm_card_battery_charger_type_entity_id Entity that holds the charger type (ac/wireless/none). This Entity replaces the need for the ulm_card_battery_battery_state_entity_id entity. If provided, the Icon will display the current charger type. This is only useful if you charge your devices Wireless and with cable. ulm_card_battery_charging_animation false Weather to show charging animation or not. If set to true, ulm_card_battery_battery_state_entity_id needs to be defined and ulm_card_battery_charger_type_entity_id will be ignored. ulm_card_battery_battery_level_danger Changes the color of the Icon, if the battery level falls below the provided value. Must be higher than ulm_card_battery_battery_level_waring ulm_card_battery_battery_level_waring Changes the color of the Icon, if the battery level falls below the provided value. ulm_card_battery_color_battery_level_danger var(--google-red) Color of icon if battery level is within the 'danger' zone. ulm_card_battery_color_battery_level_warning var(--google-yellow) Color of icon if battery level is within the 'warning' zone. ulm_card_battery_color_battery_level_ok var(--google-green) Color of icon if battery level is not within the 'danger' or 'warning' zone."},{"location":"usage/cards/card_battery/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_battery\n  entity: sensor.battery_level\n  variables:\n     ulm_card_battery_charger_type_entity_id: sensor.battery_level\n     ulm_card_battery_battery_level_danger: 30\n     ulm_card_battery_battery_level_warning: 80\n     ulm_card_battery_name: Smartphone\n
Template Code card_battery.yaml
---\n### Card Battery ###\ncard_battery:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_battery_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_card_battery_attribute:\n    ulm_card_battery_battery_state_entity_id:\n    ulm_card_battery_charger_type_entity_id:\n    ulm_card_battery_charging_animation: false\n    ulm_card_battery_battery_level_danger:\n    ulm_card_battery_battery_level_warning:\n    ulm_card_battery_color_battery_level_danger: \"var(--google-red)\"\n    ulm_card_battery_color_battery_level_warning: \"var(--google-yellow)\"\n    ulm_card_battery_color_battery_level_ok: \"var(--google-green)\"\n    ulm_outlet_power_enable_popup: false\n  triggers_update:\n    - \"[[[ return variables?.ulm_card_battery_battery_state_entity_id ]]]\"\n    - \"[[[ return variables?.ulm_card_battery_charger_type_entity_id ]]]\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              icon: |\n                [[[\n                  // Get battery level\n                  const battery_level = variables.ulm_card_battery_attribute !== null ?\n                    states[entity.entity_id].attributes[variables.ulm_card_battery_attribute] :\n                    states[entity.entity_id].state;\n                  // Generate icon infix\n                  let infix = \"\";\n                  if (variables.ulm_card_battery_charger_type_entity_id == null) {\n                    // Check wether the battery state is charging\n                    infix = variables.ulm_card_battery_battery_state_entity_id !== null &&\n                      variables.ulm_card_battery_charging_animation === false &&\n                      states[variables.ulm_card_battery_battery_state_entity_id].state.toLowerCase() === \"charging\" ?\n                      \"-charging\" : \"\"\n                  } else {\n                    // Select the infix based on the entity charging state\n                    switch (states[variables.ulm_card_battery_charger_type_entity_id].state.toLowerCase()) {\n                      case \"wireless\":\n                        infix = \"-charging-wireless\";\n                        break;\n                      case \"charging\":\n                        infix = \"-charging\";\n                        break;\n                      case \"ac\":\n                        infix = \"-charging\";\n                        break;\n                      case \"usb\":\n                        infix = \"-charging\";\n                        break;\n                      default:\n                        infix = \"\";\n                    }\n                  }\n                  // Generate the icon based on the battery_level\n                  let icon = \"mdi:help-circle-outline\";\n                  if (battery_level == 100) {\n                    icon = \"mdi:battery\";\n                  } else if (battery_level < 10) {\n                    icon = \"mdi:battery\" + infix + \"-outline\";\n                  } else if (battery_level == \"unknown\" || battery_level == \"unavailable\") {\n                    icon = \"mdi:battery-off\";\n                  } else {\n                    icon = \"mdi:battery\" + infix + \"-\" + Math.floor(battery_level / 10) * 10;\n                  }\n                  return icon;\n                ]]]\n              extra_styles: |\n                @keyframes charge {\n                  0%, 80% { clip-path: inset(0 0 0 0); }\n                  10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 66%, 34% 66%, 34% 100%, 100% 100%, 100% 0%); }\n                  20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 62%, 34% 62%, 34% 100%, 100% 100%, 100% 0%); }\n                  30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 58%, 34% 58%, 34% 100%, 100% 100%, 100% 0%); }\n                  40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }\n                  50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 50%, 34% 50%, 34% 100%, 100% 100%, 100% 0%); }\n                  60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 46%, 34% 46%, 34% 100%, 100% 100%, 100% 0%); }\n                  70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 40%, 34% 40%, 34% 100%, 100% 100%, 100% 0%); }\n                }\n              styles:\n                icon:\n                  - color: |\n                      [[[\n                        const battery_level = variables.ulm_card_battery_attribute !== null ?\n                          states[entity.entity_id].attributes[variables.ulm_card_battery_attribute] :\n                          states[entity.entity_id].state;\n                        // Get the color based on battery_level\n                        let color = \"rgba(var(--color-theme), 0.9)\";\n                        if (battery_level !== \"unavailable\" && (variables.ulm_card_battery_battery_level_danger !== null || variables.ulm_card_battery_battery_level_warning !== null)) {\n                          if (battery_level <= variables.ulm_card_battery_battery_level_danger) {\n                            color = variables.ulm_card_battery_color_battery_level_danger;\n                          } else if (battery_level <= variables.ulm_card_battery_battery_level_warning) {\n                            color = variables.ulm_card_battery_color_battery_level_warning;\n                          } else if (battery_level == \"unknown\" || battery_level == \"unavailable\") {\n                            color = variables.ulm_card_battery_color_battery_level_danger;\n                          } else {\n                            color = variables.ulm_card_battery_color_battery_level_ok;\n                          }\n                        }\n                        return color;\n                      ]]]\n                  - animation: |\n                      [[[\n                        if (variables.ulm_card_battery_battery_state_entity_id !== null &&\n                          variables.ulm_card_battery_charging_animation === true &&\n                          states[variables.ulm_card_battery_battery_state_entity_id].state.toLowerCase() === \"charging\"){\n                            return \"charge 3s linear infinite\"\n                          }\n                        return \"none\"\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_card_battery_name ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              label: |\n                [[[\n                  const battery_level = variables.ulm_card_battery_attribute !== null\n                    ? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute]\n                    : states[entity.entity_id].state;\n                  return battery_level + \"%\";\n                  if(battery_level == \"unknown\")\n                  { return variables.ulm_translation_state; }\n                  else\n                  { return battery_level + \"%\"; }\n                ]]]\n
"},{"location":"usage/cards/card_binary_sensor/","title":"Binary Sensor Card","text":""},{"location":"usage/cards/card_binary_sensor/#description","title":"Description","text":"

The binary-sensor-card is to show the state (on/off, open/close, etc.) of a binary sensor, eg. your garage door or a window contact sensor.

"},{"location":"usage/cards/card_binary_sensor/#variables","title":"Variables","text":"Variable Default Required Notes entity ulm_card_binary_sensor_show_last_changed true or false ulm_card_binary_sensor_name Set custom Name ulm_card_binary_sensor_icon Set custom Icon ulm_card_binary_sensor_color blue Set Custom Color ulm_card_binary_sensor_force_background_color false Set ulm_card_binary_sensor_color as background color in active state `

\u26a0\ufe0f Breaking Change v1.0.1

show_last_changed is changed to be used as variable: 

variables:\n  ulm_show_last_changed: true\n

\u26a0\ufe0f Breaking Change v1.3.8

ulm_show_last_changed is renamed to ulm_card_binary_sensor_show_last_changed: 

variables:\n  ulm_card_binary_sensor_show_last_changed: true\n

"},{"location":"usage/cards/card_binary_sensor/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_binary_sensor\n  variables:\n    ulm_card_binary_sensor_alert: true\n    ulm_card_binary_sensor_show_last_changed: true\n  entity: binary_sensor.garage_door\n
Template Code card_binary_sensor.yaml
---\n### Card Binary Sensor ###\ncard_binary_sensor:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  show_last_changed: false\n  variables:\n    ulm_card_binary_sensor_show_last_changed: false\n    ulm_card_binary_sensor_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_binary_sensor_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_outlet_power_enable_popup: false\n    ulm_card_binary_sensor_color: \"blue\"\n    ulm_card_binary_sensor_force_background_color: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                if (variables.ulm_card_binary_sensor_force_background_color) {\n                  var color = variables.ulm_card_binary_sensor_color;\n                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                }\n              ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_binary_sensor_icon; ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_binary_sensor_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.2)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_binary_sensor_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_card_binary_sensor_name; ]]]\"\n              label: \"[[[ return variables.ulm_translation_state;]]]\"\n              show_last_changed: \"[[[ return variables.ulm_card_binary_sensor_show_last_changed; ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_binary_sensor_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_binary_sensor_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n
"},{"location":"usage/cards/card_binary_sensor_alert/","title":"Binary Sensor Alert Card","text":""},{"location":"usage/cards/card_binary_sensor_alert/#description","title":"Description","text":"

The binary-sensor-card is to show the state (on/off, open/close, etc.) of a binary sensor, eg. your garage door or a window contact sensor. This card shows an alert if the state is on/open or unavailable.

"},{"location":"usage/cards/card_binary_sensor_alert/#variables","title":"Variables","text":"Variable Default Required Notes entity ulm_card_binary_sensor_alert_show_last_changed true or false ulm_card_binary_sensor_alert_name Set custom Name ulm_card_binary_sensor_alert_icon Set custom Icon ulm_icon_alert_invert_state false Invert the alert state logic so an alert is shown when the sensor is \"off\" ulm_card_binary_sensor_alert_color blue Set Custom Color ulm_card_binary_sensor_alert_force_background_color false Set ulm_card_binary_sensor_alert_color as background color in active state `

\u26a0\ufe0f Breaking Change v1.0.1

show_last_changed is changed to be used as variable: 

variables:\n  ulm_show_last_changed: true\n

\u26a0\ufe0f Breaking Change v1.3.8

ulm_show_last_changed is renamed to ulm_card_binary_sensor_show_last_changed: 

variables:\n  ulm_card_binary_sensor_show_last_changed: true\n

"},{"location":"usage/cards/card_binary_sensor_alert/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_binary_sensor_alert\n  variables:\n    ulm_card_binary_sensor_alert: true\n    ulm_card_binary_sensor_show_last_changed: true\n  entity: binary_sensor.garage_door\n
Template Code card_binary_sensor_alert.yaml
---\n### Card Binary Sensor Alert ###\ncard_binary_sensor_alert:\n  template:\n    - \"icon_more_info_alert\"\n    - \"ulm_translation_engine\"\n  show_last_changed: false\n  variables:\n    ulm_card_binary_sensor_alert_show_last_changed: false\n    ulm_card_binary_sensor_alert_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_binary_sensor_alert_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_outlet_power_enable_popup: false\n    ulm_card_binary_sensor_alert_color: \"blue\"\n    ulm_card_binary_sensor_alert_force_background_color: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                if (variables.ulm_card_binary_sensor_alert_force_background_color) {\n                  var color = variables.ulm_card_binary_sensor_alert_color;\n                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                }\n              ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_binary_sensor_alert_icon; ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_binary_sensor_alert_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.2)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_binary_sensor_alert_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_card_binary_sensor_alert_name; ]]]\"\n              label: \"[[[ return variables.ulm_translation_state;]]]\"\n              show_last_changed: \"[[[ return variables.ulm_card_binary_sensor_alert_show_last_changed; ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_binary_sensor_alert_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_binary_sensor_alert_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n
"},{"location":"usage/cards/card_cover/","title":"Cover Card","text":""},{"location":"usage/cards/card_cover/#description","title":"Description","text":"

With the cover-card you have the state of your cover. Optionally, on the second line, OPEN / PAUSE / CLOSE to control it and/or a slider to control position.

Warning

This card has backward compatibility with older template except custom name. It means variable ulm_card_cover_buttons_name must be replaced by ulm_card_cover_name.

"},{"location":"usage/cards/card_cover/#variables","title":"Variables","text":"Variable/Entity Default Required Notes Requirement entity Your HA entity ulm_card_cover_name friendly_name Customize name ulm_card_cover_icon Customize icon ulm_card_invert_percent false Invert the Percentage (100% = Closed) ulm_card_cover_display_left_right false Display left right control button ulm_card_cover_garage_large false Display variant garage icon for garage cover Only if device_class = 'garage ulm_card_cover_enable_controls false Enable control buttons ulm_card_cover_enable_slider false Enable slider ulm_card_cover_enable_horizontal false Enable horizontal card Need ulm_card_cover_enable_controls: true or ulm_card_cover_enable_slider: true ulm_card_cover_favorite_percentage false Display favorite button to jump to preset position enter number ulm_card_cover_enable_tilt false Display angled buttons for Venetian blind tilt ulm_card_cover_enable_popup false Enable popup_cover ulm_card_cover_slider_min 0 Set Minimum Slider Value ulm_card_cover_slider_max 100 Set Maximum Slider Value ulm_card_cover_color blue Set Custom Color ulm_card_cover_force_background_color false Set ulm_card_cover_color as background color in active state `"},{"location":"usage/cards/card_cover/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_cover\n  entity: cover.window\n  variables:\n    ulm_card_cover_enable_controls: true\n    ulm_card_cover_enable_slider: true\n    ulm_card_cover_favorite_percentage: 45\n    ulm_card_cover_color: \"green\"\n
Template Code card_cover_buttons.yaml
---\n### Card Cover ###\ncard_cover:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_cover_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_card_cover_icon: false\n    ulm_card_cover_color: \"blue\"\n    ulm_card_invert_percent: false\n    ulm_card_cover_invert_percent: false\n    ulm_card_cover_display_left_right: false\n    ulm_card_cover_garage_large: false\n    ulm_card_cover_gate: false\n    ulm_card_cover_enable_controls: false\n    ulm_card_cover_favorite_percentage: null\n    ulm_card_cover_enable_slider: false\n    ulm_card_cover_slider_min: 0\n    ulm_card_cover_slider_max: 100\n    ulm_card_cover_enable_tilt: false\n    ulm_card_cover_enable_horizontal: false\n    ulm_card_cover_enable_popup: false\n    ulm_card_cover_show_last_changed: false\n    ulm_card_cover_force_background_color: false\n  show_icon: false\n  show_name: false\n  show_label: false\n  show_last_changed: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                  if (variables.ulm_card_cover_color) {\n                    if (variables.ulm_card_cover_force_background_color) {\n                      var color = variables.ulm_card_cover_color;\n                      return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                    }\n                  }\n              ]]]\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n              if (variables.ulm_card_cover_enable_horizontal) {\n\n                  var hor_area = [\"item1\"];\n                  var ver_area = [];\n\n                  if (variables.ulm_card_cover_enable_controls) {\n                    if (variables.ulm_card_cover_enable_horizontal == \"controls\" || variables.ulm_card_cover_enable_horizontal == true) {\n                      hor_area.push(\"item2\");\n                    } else {\n                      ver_area.push(\"item2\" + \" \" + \"item2\");\n                    }\n                  }\n                  if (variables.ulm_card_cover_enable_slider) {\n                    if (variables.ulm_card_cover_enable_horizontal == \"slider\") {\n                      hor_area.push(\"item3\");\n                    } else {\n                      ver_area.push(\"item3\" + \" \" + \"item3\");\n                    }\n                  }\n                  if (variables.ulm_card_cover_enable_tilt) {\n                    if (variables.ulm_card_cover_enable_horizontal == \"tilt\") {\n                      hor_area.push(\"item4\");\n                    } else {\n                      ver_area.push(\"item4\" + \" \" + \"item4\");\n                    }\n                  }\n\n                  if (ver_area.length < 1) {\n                    return \"\\\"\" + hor_area.join(\" \") + \"\\\" \";\n                  } else {\n                    return \"\\\"\" + hor_area.join(\" \") + \"\\\" \" + \"\\\"\" + ver_area.join(\"\\\" \\\"\") + \"\\\"\";\n                  }\n              } else {\n                  var areas = [];\n                  areas.push(\"item1\");\n\n                  if (variables.ulm_card_cover_enable_controls) {\n                    areas.push(\"item2\");\n                  }\n                  if (variables.ulm_card_cover_enable_slider) {\n                      areas.push(\"item3\");\n                  }\n                  if (variables.ulm_card_cover_enable_tilt) {\n                    areas.push(\"item4\");\n                  }\n\n                  return \"\\\"\" + areas.join(\"\\\" \\\"\") + \"\\\"\";\n              }\n          ]]]\n      - grid-template-columns: >\n          [[[\n              if (variables.ulm_card_cover_enable_horizontal) {\n                  return \"1fr 1fr\";\n              }\n              return \"1fr\";\n          ]]]\n      - grid-template-rows: >\n          [[[\n              var rows = [];\n              rows.push(\"min-content\");\n              if (variables.ulm_card_cover_enable_controls) {\n                  rows.push(\"min-content\");\n              }\n              if (variables.ulm_card_cover_enable_slider) {\n                  rows.push(\"min-content\");\n              }\n              if (variables.ulm_card_cover_enable_tilt) {\n                  rows.push(\"min-content\");\n              }\n              if (variables.ulm_card_cover_enable_horizontal) {\n                  if (rows.length > 1) {\n                    rows.pop()\n                  }\n              }\n              return rows.join(\" \");\n          ]]]\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n    custom_fields:\n      item2:\n        - display: >\n            [[[\n              if (variables.ulm_card_cover_enable_controls) {\n                  return \"block\";\n              } else {\n                  return \"none\";\n              }\n            ]]]\n      item3:\n        - display: >\n            [[[\n              if (variables.ulm_card_cover_enable_slider) {\n                  return \"block\";\n              } else {\n                  return \"none\";\n              }\n            ]]]\n      item4:\n        - display: >\n            [[[\n              if (variables.ulm_card_cover_enable_tilt) {\n                  return \"block\";\n              } else {\n                  return \"none\";\n              }\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n                  if (variables.ulm_card_cover_enable_popup) {\n                      vars.ulm_custom_popup = {\n                          'template': 'popup_cover'\n                      };\n                  }\n                  return vars;\n                ]]]\n              icon: >\n                [[[\n                  var icon = entity.attributes.icon || \"mdi:help-circle\";\n                  var icon_state = {\n                    \"open\": \"open\",\n                    \"opening\": \"open\",\n                    \"closed\": \"closed\",\n                    \"closing\": \"closed\"\n                  };\n                  if(entity.attributes?.device_class){\n                    var device_class = entity.attributes?.device_class;\n                  }\n                  var icon_open = {\n                    \"awning\": \"mdi:window-open\",\n                    \"blind\": \"mdi:blinds-open\",\n                    \"curtain\": \"mdi:curtains\",\n                    \"damper\": \"mdi:circle-outline\",\n                    \"door\": \"mdi:door-open\",\n                    \"garage\": variables.ulm_card_cover_garage_large ? \"mdi:garage-open-variant\" : \"mdi:garage-open\",\n                    \"gate\": \"mdi:gate-open\",\n                    \"shade\": \"mdi:roller-shade\",\n                    \"shutter\": \"mdi:window-shutter-open\",\n                    \"window\": \"mdi:window-open\",\n                  };\n                  var icon_closed = {\n                    \"awning\": \"mdi:window-closed\",\n                    \"blind\": \"mdi:blinds\",\n                    \"curtain\": \"mdi:curtains-closed\",\n                    \"damper\": \"mdi:circle-slice-8\",\n                    \"door\": \"mdi:door-closed\",\n                    \"garage\": variables.ulm_card_cover_garage_large ? \"mdi:garage-variant\" : \"mdi:garage\",\n                    \"gate\": \"mdi:gate\",\n                    \"shade\": \"mdi:roller-shade-closed\",\n                    \"shutter\": \"mdi:window-shutter\",\n                    \"window\": \"mdi:window-closed\",\n                  };\n                  return variables.ulm_card_cover_icon || (icon_state[entity.state]=='open' ? icon_open[device_class] : icon_closed[device_class]) || icon\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_cover_color;\n                        if (variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) {\n                            if (entity.attributes.current_position == 100) {\n                                return 'rgba(var(--color-theme),0.2)';\n                            }\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n\n                        if (typeof entity !== \"undefined\") {\n                          if (states[entity.entity_id].state != \"closed\") {\n                              return 'rgba(var(--color-' + color + '),1)';\n                          }\n                          return 'rgba(var(--color-theme),0.2)';\n                        }\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_cover_color;\n                        if (variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) {\n                            if (entity.attributes.current_position == 100) {\n                                return 'rgba(var(--color-theme),0.05)';\n                            }\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n\n                        if (typeof entity !== \"undefined\") {\n                          if (states[entity.entity_id].state != \"closed\") {\n                              return 'rgba(var(--color-' + color + '),0.2)';\n                          }\n                          return 'rgba(var(--color-theme),0.05)';\n                        }\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n                  if(variables.ulm_card_cover_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_cover'\n                    };\n                  }\n                  return vars;\n                ]]]\n              name: \"[[[ return variables.ulm_card_cover_name ]]]\"\n              label: >\n                [[[\n                  var position = states[entity.entity_id]?.attributes?.current_position;\n                  var invert = {\n                    \"closed\": hass.resources[hass['language']]['component.cover.state._.open'],\n                    \"closing\": hass.resources[hass['language']]['component.cover.state._.opening'],\n                    \"open\": hass.resources[hass['language']]['component.cover.state._.closed'],\n                    \"opening\": hass.resources[hass['language']]['component.cover.state._.closing']\n                  };\n\n                  if ((variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) && typeof entity !== \"undefined\") {\n                    if (position == 0) {\n                      return invert[entity.state] + \" \u2022 \" + (100 - position) + \"%\";\n                    } else {\n                      return invert[entity.state];\n                    }\n                  }\n\n                  if([\"unknown\", \"unavailable\", \"closed\"].includes(entity.state)  || position === undefined) {\n                    return variables.ulm_translation_state;\n                  }\n\n                  if (typeof entity !== \"undefined\") {\n                    if (entity == 0) {\n                      return variables.ulm_translation_state;\n                    } else {\n                      return variables.ulm_translation_state + \" \u2022 \" + position + \"%\";\n                    }\n                  }\n                  return variables.ulm_translation_state;\n                ]]]\n              show_last_changed: \"[[[ return variables.ulm_card_cover_show_last_changed; ]]]\"\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_cover_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_cover_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"[[[ return (variables.ulm_card_cover_favorite_percentage) ? 'list_4_items' : 'list_3_items' ]]]\"\n        styles:\n          card:\n            - background: \"none\"\n          custom_fields:\n            item4:\n              - display: >\n                  [[[\n                    if (variables.ulm_card_cover_favorite_percentage) {\n                        return \"block\";\n                    } else {\n                        return \"none\";\n                    }\n                  ]]]\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.attributes.current_position == \"0\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"closing\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"opening\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"cover.close_cover\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: >\n                [[[\n                  if (variables.ulm_card_cover_display_left_right) {\n                      return \"mdi:arrow-left\";\n                  }\n                  var device_class = entity.attributes?.device_class;\n                  if (device_class == 'curtain' || device_class == 'gate' || device_class == 'awning') {\n                      return \"mdi:arrow-collapse-horizontal\";\n                  }\n                  return \"mdi:arrow-down\";\n                ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"cover.stop_cover\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:stop\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.attributes.current_position == \"100\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"closing\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"opening\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"cover.open_cover\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: >-\n                [[[\n                  if (variables.ulm_card_cover_display_left_right) {\n                      return \"mdi:arrow-right\";\n                  }\n                  var device_class = entity.attributes?.device_class;\n                  if (device_class == 'curtain' || device_class == 'gate' || device_class == 'awning') {\n                      return \"mdi:arrow-expand-horizontal\";\n                  }\n                  return \"mdi:arrow-up\";\n                ]]]\n          item4:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"cover.set_cover_position\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  position: \"[[[ return variables.ulm_card_cover_favorite_percentage ]]]\"\n              icon: \"mdi:star\"\n    item3:\n      card:\n        type: \"custom:my-slider\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        radius: \"14px\"\n        height: \"42px\"\n        minSet: \"[[[ return variables.ulm_card_cover_slider_min ]]]\"\n        maxSet: \"[[[ return variables.ulm_card_cover_slider_max ]]]\"\n        mainSliderColor: >\n          [[[\n            var color = variables.ulm_card_cover_color;\n            if (variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) {\n                if (entity.attributes.current_position == 100) {\n                    return 'rgba(var(--color-theme),0.05)';\n                }\n              if (variables.ulm_card_cover_force_background_color) {\n                return 'rgb(250,250,250)';\n              }\n              return 'rgba(var(--color-' + color + '),0.8)';\n            }\n\n            if (typeof entity !== \"undefined\") {\n              if (states[entity.entity_id].state != \"closed\") {\n                if (variables.ulm_card_cover_force_background_color) {\n                  return 'rgb(250,250,250)';\n                }\n                return 'rgba(var(--color-' + color + '),0.8)';\n              }\n              return 'rgba(var(--color-theme),0.05)';\n            }\n          ]]]\n        secondarySliderColor: >\n          [[[\n            var color = variables.ulm_card_cover_color;\n            if (variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) {\n                if (entity.attributes.current_position == 100) {\n                    return 'rgba(var(--color-theme),0.05)';\n                }\n              if (variables.ulm_card_cover_force_background_color) {\n                return 'rgba(var(--color-' + color + '),0.3)';\n              }\n              return 'rgba(var(--color-' + color + '),0.1)';\n            }\n\n            if (typeof entity !== \"undefined\") {\n              if (states[entity.entity_id].state != \"closed\") {\n                if (variables.ulm_card_cover_force_background_color) {\n                  return 'rgba(var(--color-' + color + '),0.3)';\n                }\n                return 'rgba(var(--color-' + color + '),0.1)';\n              }\n              return 'rgba(var(--color-theme),0.05)';\n            }\n          ]]]\n        mainSliderColorOff: \"rgba(var(--color-theme),0.05)\"\n        secondarySliderColorOff: \"rgba(var(--color-theme),0.05)\"\n        thumbHorizontalPadding: \"0px\"\n        thumbVerticalPadding: \"0px\"\n        thumbWidth: \"0px\"\n        card_mod:\n        style: |\n          ha-card {\n            border-radius: 14px;\n            box-shadow: none;\n          }\n    item4:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        styles:\n          card:\n            - background: \"none\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.attributes.current_tilt_position == \"0\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"closing\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"opening\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"cover.close_cover_tilt\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:arrow-bottom-left\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"cover.stop_cover_tilt\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:stop\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_cover_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.attributes.current_tilt_position == \"100\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"closing\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"opening\";\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.4)\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"cover.open_cover_tilt\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:arrow-top-right\"\n
"},{"location":"usage/cards/card_fan/","title":"Fan Card","text":""},{"location":"usage/cards/card_fan/#description","title":"Description","text":"

This is the fan-card, used to toggle a fan entity. Shows state of the fan and, if available, percentage and humidity in %.

This is a new card based off of the Sexel Fan Custom Card. Rather than deprecate and many breaking changes on that card for users, this new card can be used as an alternative.

"},{"location":"usage/cards/card_fan/#light-theme","title":"Light theme","text":""},{"location":"usage/cards/card_fan/#dark-theme","title":"Dark theme","text":""},{"location":"usage/cards/card_fan/#variables","title":"Variables","text":"Variable Example Required Explanation entity fan.smart_fan yes Fan entity ulm_card_fan_name Fan no Name to show. If not specified the attribute friendly_name is shown instead ulm_card_fan_icon Fan no Icon to show. If not specified the attribute icon is shown instead ulm_card_fan_enable_horizontal true no true/false if the card should be horizontal. Default: false ulm_card_fan_enable_collapse true no true/false if the fan speed row should collapse when the fan is turned off. Default: false ulm_card_fan_color blue no Custom Color for the Card. default: \"blue\" ulm_card_fan_force_background_color true no true/false if the card should force the background color, not just in dark mode.\" ulm_card_fan_enable_button true no true/false if the card should show a button next to the slider for turning Oscillation on/off.\""},{"location":"usage/cards/card_fan/#others","title":"Others","text":"
ulm_card_fan_enable_slider: false\nulm_card_fan_slider_min: 0\nulm_card_fan_slider_max: 100\nulm_card_fan_enable_button: false\nulm_card_fan_temp_attribute: \"temp\"\nulm_card_fan_hum_attribute: \"hum\"\n
"},{"location":"usage/cards/card_fan/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_fan\n  entity: fan.bedroom\n  variables:\n    ulm_card_fan_enable_slider: true\n    ulm_card_fan_color: \"blue\"\n    ulm_card_fan_force_background_color: true\n
Template Code card_fan.yaml
---\n### Card Fan ###\ncard_fan:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_fan_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_card_fan_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_fan_enable_horizontal: false\n    ulm_card_fan_color: \"blue\"\n    ulm_card_fan_force_background_color: false\n    ulm_card_fan_enable_collapse: false\n    ulm_card_fan_enable_slider: false\n    ulm_card_fan_slider_min: 0\n    ulm_card_fan_slider_max: 100\n    ulm_card_fan_enable_button: false\n    ulm_card_fan_button_icon: \"mdi:rotate-3d-variant\"\n    ulm_card_fan_button_service: \"fan.oscillate\"\n    ulm_card_fan_oscillate_attribute: \"oscillate\"\n    ulm_card_fan_temp_attribute: false\n    ulm_card_fan_hum_attribute: false\n  show_icon: false\n  show_name: false\n  show_label: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                  if (variables.ulm_card_fan_color) {\n                    if (variables.ulm_card_fan_force_background_color) {\n                      var color = variables.ulm_card_fan_color;\n                      return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                    }\n                  }\n              ]]]\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            if (variables.ulm_card_fan_enable_collapse && entity.state != \"on\") {\n              return \"\\\"item1\\\"\";\n            }\n\n            var areas = [];\n            areas.push(\"item1\");\n            if (variables.ulm_card_fan_enable_slider) {\n              areas.push(\"item2\");\n            }\n\n            if (variables.ulm_card_fan_enable_horizontal) {\n              return \"\\\"\" + areas.join(\" \") + \"\\\"\";\n            }\n            return \"\\\"\" + areas.join(\"\\\" \\\"\") + \"\\\"\";\n          ]]]\n      - grid-template-columns: >\n          [[[\n            if (variables.ulm_card_fan_enable_collapse && entity.state != \"on\") {\n              return \"1fr\";\n            }\n            if (variables.ulm_card_fan_enable_horizontal) {\n              return \"1fr 1fr\";\n            }\n            return \"1fr\";\n          ]]]\n      - grid-template-rows: >\n          [[[\n            if (variables.ulm_card_fan_enable_horizontal || (variables.ulm_card_fan_enable_collapse && entity.state != \"on\")) {\n              return \"min-content\";\n            }\n\n            var rows = [];\n            rows.push(\"min-content\");\n            if (variables.ulm_card_fan_enable_slider) {\n                rows.push(\"min-content\");\n            }\n            return rows.join(\" \");\n          ]]]\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n    custom_fields:\n      item2:\n        - display: >\n            [[[\n                if (variables.ulm_card_fan_enable_collapse && entity.state != \"on\") {\n                    return \"none\";\n                } else if (variables.ulm_card_fan_enable_slider) {\n                    return \"block\";\n                } else {\n                    return \"none\";\n                }\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_fan_icon ]]]\"\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                          if (entity.state == \"on\") {\n                            if (variables.ulm_card_fan_color) {\n                              var color = variables.ulm_card_fan_color;\n                              return 'rgba(var(--color-' + color + '),1)';\n                            }\n                            return 'rgba(var(--color-theme),1)';\n                          }\n                          return 'rgba(var(--color-theme),0.2)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                          if (entity.state == \"on\") {\n                            if (variables.ulm_card_fan_color) {\n                              var color = variables.ulm_card_fan_color;\n                              return 'rgba(var(--color-' + color + '),0.2)';\n                            }\n                          }\n                          return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_card_fan_name ]]]\"\n              label: >\n                [[[\n                    if (entity.state == 'unavailable') {\n                      return variables.ulm_translation_unavailable;\n                    }\n\n                    let temp_str = '';\n                    if (variables.ulm_card_fan_temp_attribute) {\n                        var temp = Math.round(entity.attributes[variables.ulm_card_fan_temp_attribute]);\n                        temp_str = ' \u2022 ' + (temp ? temp : '0') + '\u00b0C';\n                    }\n                    let hum_str = '';\n                    if (variables.ulm_card_fan_hum_attribute) {\n                        var hum = Math.round(entity.attributes[variables.ulm_card_fan_hum_attribute]);\n                        hum_str = ' \u2022 ' + (hum ? hum : '0') + '%';\n                    }\n\n                    if (entity.state != 'off') {\n                      if (entity.attributes.percentage != null) {\n                        var per = entity.attributes.percentage;\n                        let per_str = (per ? per : '0') + '%';\n                        return per_str + temp_str + hum_str;\n                      }\n                      return variables.ulm_translation_on + temp_str + hum_str;\n                    }\n                    return variables.ulm_translation_off + temp_str + hum_str;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_fan_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_fan_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_one_third_items\"\n        styles:\n          card:\n            - background: \"none\"\n            - overflow: \"visible\"\n          grid:\n            - grid-template-areas: >\n                [[[\n                    if (variables.ulm_card_fan_enable_button) {\n                      return \"'slider button'\";\n                    }\n                    return \"'slider'\";\n                ]]]\n            - grid-template-columns: >\n                [[[\n                    if (variables.ulm_card_fan_enable_button) {\n                      return \"2fr 1fr\";\n                    }\n                    return \"1fr\";\n                ]]]\n          custom_fields:\n            button:\n              - display: >\n                  [[[\n                    if (variables.ulm_card_fan_enable_button) {\n                        return \"block\";\n                    }\n                    return \"none\";\n                  ]]]\n        custom_fields:\n          slider:\n            card:\n              type: \"custom:my-slider\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              radius: \"14px\"\n              height: \"42px\"\n              minSet: \"[[[ return variables.ulm_card_fan_slider_min ]]]\"\n              maxSet: \"[[[ return variables.ulm_card_fan_slider_max ]]]\"\n              mainSliderColor: >\n                [[[\n                  var color = variables.ulm_card_fan_color;\n\n                  if (entity.state == \"on\") {\n                    if (variables.ulm_card_fan_force_background_color) {\n                      return 'rgb(250,250,250)';\n                    }\n                    return 'rgba(var(--color-' + color + '),0.8)';\n                  }\n                    return \"rgba(var(--color-grey),0.8)\";\n                ]]]\n              secondarySliderColor: >\n                [[[\n                  var color = variables.ulm_card_fan_color;\n                  if (entity.state == \"on\") {\n                    if (variables.ulm_card_fan_force_background_color) {\n                      return 'rgba(var(--color-' + color + '),0.3)';\n                    }\n                    return 'rgba(var(--color-' + color + '),0.1)';\n                  }\n                  return \"rgba(var(--color-grey),0.1)\";\n                ]]]\n              mainSliderColorOff: \"rgba(var(--color-theme),0.05)\"\n              secondarySliderColorOff: \"rgba(var(--color-theme),0.05)\"\n              thumbHorizontalPadding: \"0px\"\n              thumbVerticalPadding: \"0px\"\n              thumbWidth: \"0px\"\n              card_mod:\n              style: |\n                ha-card {\n                  border-radius: 14px;\n                  box-shadow: none;\n                }\n          button:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"widget_icon\"\n              icon: \"[[[ return variables.ulm_card_fan_button_icon ]]]\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"[[[ return variables.ulm_card_fan_button_service ]]]\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  oscillating: \"[[[ return !entity.attributes[variables.ulm_card_fan_oscillate_attribute] ]]]\"\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return entity.state === 'on' && !entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]\"\n                  styles:\n                    card:\n                      - background-color: >\n                          [[[\n                            if(!hass.themes.darkMode && variables.ulm_card_light_force_background_color){\n                              return 'rgb(250,250,250)'\n                            }\n                          ]]]\n                    img_cell:\n                      - background-color: >\n                          [[[\n                            var color = variables.ulm_card_fan_color;\n                            if (variables.ulm_card_fan_force_background_color) {\n                              return 'rgba(var(--color-' + color + '),0.2)';\n                            }\n                              return 'rgba(var(--color-theme),0.05)';\n                          ]]]\n                    icon:\n                      - color: >\n                          [[[\n                            var color = variables.ulm_card_fan_color;\n                            if (variables.ulm_card_fan_force_background_color) {\n                              return 'rgba(var(--color-' + color + '),1)';\n                            }\n                              return 'rgba(var(--color-theme),0.9)';\n                          ]]]\n                - operator: \"template\"\n                  value: \"[[[ return entity.state === 'on' && entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]\"\n                  styles:\n                    img_cell:\n                      - background-color: >\n                          [[[\n                            var color = variables.ulm_card_fan_color;\n                            if (variables.ulm_card_fan_force_background_color) {\n                              return 'rgba(250, 250, 250, 1)';\n                            }\n                              return 'rgba(var(--color-' + color + '),0.2)';\n                          ]]]\n                    icon:\n                      - color: >\n                          [[[\n                            var color = variables.ulm_card_fan_color;\n                            return 'rgba(var(--color-' + color + '),1)'\n                          ]]]\n
"},{"location":"usage/cards/card_generic/","title":"Generic Card","text":""},{"location":"usage/cards/card_generic/#description","title":"Description","text":"

This is the generic-card to display values from a sensor, eg. to show humidity, your next waste collection date or whatever sensor value is provided.

"},{"location":"usage/cards/card_generic/#variables","title":"Variables","text":"Variable Default Required Notes entity ulm_card_generic_name Set custom Name ulm_card_generic_icon Set custom Icon ulm_card_generic_color blue Set Custom Color ulm_card_generic_force_background_color false Set ulm_card_generic_color as background color in active state `"},{"location":"usage/cards/card_generic/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_generic\n  entity: sensor.next_waste_collection\n
Template Code card_generic.yaml
---\n### Card Generic ###\ncard_generic:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_generic_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_generic_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_outlet_power_enable_popup: false\n    ulm_card_generic_color: \"blue\"\n    ulm_card_generic_force_background_color: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                if (variables.ulm_card_generic_force_background_color) {\n                  var color = variables.ulm_card_generic_color;\n                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                }\n              ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_generic_icon; ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_generic_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.2)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_generic_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_translation_state ]]]\"\n              label: \"[[[ return variables.ulm_card_generic_name ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_generic_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_generic_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n
"},{"location":"usage/cards/card_generic_swap/","title":"Generic Swap Card","text":""},{"location":"usage/cards/card_generic_swap/#description","title":"Description","text":"

This is a generic-card with swapped label and name.

"},{"location":"usage/cards/card_generic_swap/#variables","title":"Variables","text":"Variable Default Required Notes entity ulm_card_generic_swap_name Set custom Name ulm_card_generic_swap_icon Set custom Icon ulm_card_generic_swap_color blue Set Custom Color ulm_card_generic_swap_force_background_color false Set ulm_card_generic_swap_color as background color in active state `"},{"location":"usage/cards/card_generic_swap/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_generic_swap\n  entity: sensor.next_waste_collection\n
Template Code card_generic_swap.yaml
---\n### Card Generic Swap ###\ncard_generic_swap:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_generic_swap_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_generic_swap_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_outlet_power_enable_popup: false\n    ulm_card_generic_swap_color: \"blue\"\n    ulm_card_generic_swap_force_background_color: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                if (variables.ulm_card_generic_swap_force_background_color) {\n                  var color = variables.ulm_card_generic_swap_color;\n                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                }\n              ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_generic_swap_icon; ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_generic_swap_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.2)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_generic_swap_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              label: \"[[[ return variables.ulm_translation_state ]]]\"\n              name: \"[[[ return variables.ulm_card_generic_swap_name ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_generic_swap_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_generic_swap_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n
"},{"location":"usage/cards/card_graph/","title":"Graph Card","text":""},{"location":"usage/cards/card_graph/#description","title":"Description","text":"

The card_graph shows an entity with the actual state and a min-graph-card integrated. This can be used for a thermostat to show the actual temperature and the history. It now supports dual graphs as well as bar style graphs.

"},{"location":"usage/cards/card_graph/#variables","title":"Variables","text":"Variable Default Required Notes entity Your entity_id for the temperature sensor ulm_card_graph_color This is to adjust your color value. Use a CSS variable from HA or set a color value (eg. #FFFFFF) ulm_card_graph_name Set graph name ulm_card_graph_icon Set custom icon ulm_card_graph_entity Your entity_id for the temperature sensor ulm_card_graph_entity2 Your entity_id for the second temperature sensor ulm_card_graph_color2 This is to adjust your color value of the second graph. Use a CSS variable from HA or set a color value (eg. #FFFFFF) ulm_card_graph_type fill This is to change the appearance of the graph. Default is fill, but line, bar are valid options. ulm_card_graph_hours 24 How much time should the graph cover, default is 24 hours. ulm_card_graph_points 0.5 Specify amount of data points the graph should display for each hour. A larger number results in a more detailed graph. ulm_card_graph_group_by interval Specify type of grouping of data, dynamic interval, date or hour. ulm_card_graph_line_width 5 Set the thickness of the line."},{"location":"usage/cards/card_graph/#usage","title":"Usage","text":"
  - type: 'custom:button-card'\n    template: card_graph\n    entity: sensor.livingroom_temperature\n    variables:\n      ulm_card_graph_color: \"var(--google-blue)\"\n      ulm_card_graph_name: Temperature Livingroom\n      ulm_card_graph_entity: sensor.livingroom_temperature\n      ulm_card_graph_color2: \"var(--google-green)\"\n      ulm_card_graph_entity2: sensor.bedgroom_temperature\n      ulm_card_graph_type: fill\n      ulm_card_graph_hours: 24\n      ulm_card_graph_group_by: interval\n      ulm_card_graph_line_width: 5\n
Template Code card_graph.yaml
---\n### Card Graph ###\ncard_graph:\n  template:\n    - \"extended_card\"\n  variables:\n    ulm_card_graph_color: \"var(--info-color)\"\n    ulm_card_graph_name: \"[[[ return entity.attributes.friendly_name; ]]]\"\n    ulm_card_graph_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_graph_color2: \"var(--info-color)\"\n    ulm_card_graph_entity2: \"\"\n    ulm_card_graph_hours: 24\n    ulm_card_graph_type: \"fill\"\n    ulm_card_graph_points: \"0.5\"\n    ulm_card_graph_group_by: \"interval\"\n    ulm_card_graph_line_width: 5\n    ulm_card_graph_icon_color: \"\"\n  triggers_update:\n    - \"[[[ return variables.ulm_card_graph_entity2 ]]]\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"card_generic\"\n        variables:\n          ulm_card_generic_icon: \"[[[ return variables.ulm_card_graph_icon; ]]]\"\n          ulm_card_generic_name: \"[[[ return variables.ulm_card_graph_name; ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              custom_fields:\n                item1:\n                  card:\n                    type: \"custom:button-card\"\n                    styles:\n                      icon:\n                        - color: >\n                            [[[\n                              var color = variables.ulm_card_graph_icon_color;\n                              if (variables.ulm_card_graph_icon_color){\n                                return 'rgba(var(--color-' + color + '),1)';\n                              }\n                              return 'rgba(var(--color-theme),0.2)';\n                            ]]]\n                      img_cell:\n                        - background-color: >\n                            [[[\n                              var color = variables.ulm_card_graph_icon_color;\n                              if (variables.ulm_card_graph_icon_color){\n                                return 'rgba(var(--color-' + color + '),0.2)';\n                              }\n                              return 'rgba(var(--color-theme),0.05)';\n                            ]]]\n    item2:\n      card:\n        type: \"custom:mini-graph-card\"\n        entities: >\n          [[[\n            var ent = [];\n            ent.push(variables.ulm_card_graph_entity);\n            if(variables.ulm_card_graph_entity2 != \"\")\n              ent.push(variables.ulm_card_graph_entity2);\n            return ent;\n          ]]]\n        line_color: >\n          [[[\n            var col = [];\n            col.push(variables.ulm_card_graph_color);\n            if(variables.ulm_card_graph_color2 != \"\")\n              col.push(variables.ulm_card_graph_color2);\n            return col;\n          ]]]\n        show:\n          name: false\n          icon: false\n          legend: false\n          state: false\n          graph: \"[[[ return variables.ulm_card_graph_type=='fill'?'line':variables.ulm_card_graph_type; ]]]\"\n          fill: \"[[[ return variables.ulm_card_graph_type=='fill'?true:false; ]]]\"\n        hours_to_show: \"[[[ return variables.ulm_card_graph_hours; ]]]\"\n        points_per_hour: \"[[[ return variables.ulm_card_graph_points; ]]]\"\n        group_by: \"[[[ return variables.ulm_card_graph_group_by; ]]]\"\n        line_width: \"[[[ return variables.ulm_card_graph_line_width; ]]]\"\n        style: |\n          ha-card {\n            box-shadow: none;\n            border-radius: var(--border-radius);\n          }\n
"},{"location":"usage/cards/card_input_boolean/","title":"Input_boolean Card","text":""},{"location":"usage/cards/card_input_boolean/#description","title":"Description","text":"

The input-boolean-card is to switch an input_boolean on or off.

"},{"location":"usage/cards/card_input_boolean/#variables","title":"Variables","text":"Variable Default Required Notes entity ulm_card_input_boolean_name Set custom Name ulm_card_input_boolean_icon Set custom Icon ulm_card_input_boolean_color blue Set Custom Color ulm_card_input_boolean_force_background_color false Set ulm_card_input_boolean_color as background color in active state `"},{"location":"usage/cards/card_input_boolean/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_input_boolean\n  entity: input_boolean.guest_mode\n  variables:\n    ulm_card_input_boolean_name: Guest Mode\n
Template Code card_input_boolean.yaml
---\n### Card Input Boolean ###\ncard_input_boolean:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_input_boolean_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_input_boolean_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_outlet_power_enable_popup: false\n    ulm_card_input_boolean_color: \"blue\"\n    ulm_card_input_boolean_force_background_color: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                if (variables.ulm_card_input_boolean_force_background_color) {\n                  var color = variables.ulm_card_input_boolean_color;\n                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                }\n              ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_input_boolean_icon; ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_input_boolean_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.2)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_input_boolean_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_card_input_boolean_name; ]]]\"\n              label: \"[[[ return variables.ulm_translation_state ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {\n                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor\n                      }\n                    };\n                  }\n                  return vars;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_input_boolean_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_input_boolean_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n
"},{"location":"usage/cards/card_light/","title":"Light Card","text":""},{"location":"usage/cards/card_light/#description","title":"Description","text":"

This is the light-card, used to toggle a light or a light group. Shows state of the light and, if available, brightness in %.

This documentation refers to the new \"All in one\" light card. This card merges the following one :

  • legacy card_light (the old one)
  • legacy card_light_slider
  • legacy card_light_slider_collapse
  • legacy card_light_slider_horizontal
  • custom card_light_color by basbruss
  • custom card_light_horizontal_color by basbruss
  • custom card_light_slider_color by basbruss
  • custom card_light_slider_collapse_color by basbruss

Warning

This card has backward compatibility with older template except custom names and icons. It means variables like ulm_card_XXX_name and ulm_card_XXX_icon must be replaced by ulm_card_light_name and ulm_card_light_icon. To use popup_light you need to set the variable ulm_card_light_enable_popup to true. This is a different approach as the other popup_cards use.

"},{"location":"usage/cards/card_light/#variables","title":"Variables","text":"Variable/Entity Default Required Notes Requirement entity Your HA entity ulm_card_light_name friendly_name Customize name ulm_card_light_icon mdi:lightbulb Customize icon ulm_card_light_enable_slider false Enable slider ulm_card_light_enable_slider_minSet 0 Minimum brightness value user can select in the slider Need ulm_card_light_enable_slider: true ulm_card_light_enable_slider_maxSet 100 Maximum brightness value user can select in the slider Need ulm_card_light_enable_slider: true ulm_card_light_enable_collapse false Collapse slider when off Need ulm_card_light_enable_slider: true ulm_card_light_enable_horizontal false Enable horizontal card ulm_card_light_enable_horizontal_wide false Wider slider Need ulm_card_light_enable_horizontal: true ulm_card_light_color yellow Set a manual color from the theme for icon, slider and background ulm_card_light_enable_color false Enable icon and label light color from the light itself. Overrides ulm_card_light_color ulm_card_light_force_background_color false Force background light color even in light theme ulm_card_light_enable_popup false Enable popup_light ulm_card_light_enable_popup_tap false Enable popup_light on simple icon tap ulm_card_light_color_palette Add select entity to control color palette ulm_card_light_enable_buttons false Enable Preset Brightness Buttons ulm_card_light_brightness_low/med/high Override the Brightness defaults for Buttons - Percentages"},{"location":"usage/cards/card_light/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_light\n  entity: light.allee\n  variables:\n    ulm_card_light_enable_slider: true\n    ulm_card_light_enable_color: true\n    ulm_card_light_force_background_color: true\n
Template Code card_light.yaml
---\n### Card Light ###\ncard_light:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_light_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_card_light_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_light_enable_collapse: false\n    ulm_card_light_enable_horizontal: false\n    ulm_card_light_enable_horizontal_wide: false\n    ulm_card_light_enable_color: false\n    ulm_card_light_color_palette: \"\"\n    ulm_card_light_color: \"yellow\"\n    ulm_card_light_force_background_color: false\n    ulm_card_light_enable_slider: false\n    ulm_card_light_enable_slider_minSet: 0\n    ulm_card_light_enable_slider_maxSet: 100\n    ulm_card_light_enable_buttons: false\n    ulm_card_light_brightness_low: 1\n    ulm_card_light_brightness_medium: 50\n    ulm_card_light_brightness_high: 100\n    ulm_card_light_enable_popup: false\n    ulm_card_light_enable_popup_tap: false\n  show_icon: false\n  show_name: false\n  show_label: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                var color_set = (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n                var color = 'rgba(var(--color-' + color_set + '),var(--opacity-bg))'\n                if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){\n                  color = 'rgba(' + color_set + ',var(--opacity-bg))'\n                }\n                if (variables.ulm_card_light_force_background_color) {\n                  return color\n                }\n              ]]]\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n              if (variables.ulm_card_light_enable_collapse && entity.state != \"on\") {\n                  return \"\\\"item1\\\"\";\n              }\n\n              var areas = [];\n              areas.push(\"item1\");\n              if (variables.ulm_card_light_enable_slider) {\n                  areas.push(\"item2\");\n              }\n              if (variables.ulm_card_light_enable_buttons) {\n                  areas.push(\"item3\");\n              }\n\n              if (variables.ulm_card_light_enable_horizontal) {\n                  areas = areas.slice(0, 2);\n                  return \"\\\"\" + areas.join(\" \") + \"\\\"\";\n              }\n              return \"\\\"\" + areas.join(\"\\\" \\\"\") + \"\\\"\";\n          ]]]\n      - grid-template-columns: >\n          [[[\n              if (variables.ulm_card_light_enable_collapse && entity.state != \"on\") {\n                  return \"1fr\";\n              }\n              if (variables.ulm_card_light_enable_horizontal) {\n                  if(variables.ulm_card_light_enable_horizontal_wide){\n                    return \"1fr 2fr\";\n                  } else {\n                    return \"1fr 1fr\";\n                  }\n              }\n              return \"1fr\";\n          ]]]\n      - grid-template-rows: >\n          [[[\n              if (variables.ulm_card_light_enable_horizontal || (variables.ulm_card_light_enable_collapse && entity.state != \"on\")) {\n                  return \"min-content\";\n              }\n              var rows = [];\n              rows.push(\"min-content\");\n              if (variables.ulm_card_light_enable_slider) {\n                  rows.push(\"min-content\");\n              }\n              if (variables.ulm_card_light_enable_buttons) {\n                  rows.push(\"min-content\");\n              }\n              return rows.join(\" \");\n          ]]]\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n    custom_fields:\n      item2:\n        - display: >\n            [[[\n                  if (variables.ulm_card_light_enable_collapse && entity.state != \"on\") {\n                      return \"none\";\n                  } else if (variables.ulm_card_light_enable_slider) {\n                      return \"block\";\n                  } else {\n                      return \"none\";\n                  }\n            ]]]\n      item3:\n        - display: >\n            [[[\n                if (variables.ulm_card_light_enable_collapse && entity.state != \"on\") {\n                    return \"none\";\n                } else if (variables.ulm_card_light_enable_buttons) {\n                    if (variables.ulm_card_light_enable_horizontal && variables.ulm_card_light_enable_slider) {\n                      return \"none\";\n                    }\n                    return \"block\";\n                } else {\n                    return \"none\";\n                }\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_light_icon ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n                  if (variables.ulm_card_light_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_light_brightness',\n                      'popup_variables': {'ulm_card_light_color_palette': variables.ulm_card_light_color_palette}\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n                        var color = 'rgba(var(--color-' + color_set + '),1)'\n                        if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){\n                          color = 'rgba(' + color_set + ',1)'\n                        }\n                        if (entity.state != \"on\") {\n                          return 'rgba(var(--color-theme),0.2)';\n                        }\n                        return color\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n                        var color = 'rgba(var(--color-' + color_set + '),0.2)'\n                        if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){\n                          color = 'rgba(' + color_set + ',0.2)'\n                        }\n                        if (entity.state != \"on\") {\n                          return 'rgba(var(--color-theme),0.05)';\n                        }\n                        return color\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n                  if (variables.ulm_card_light_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_light_brightness',\n                      'popup_variables': {'ulm_card_light_color_palette': variables.ulm_card_light_color_palette}\n                    };\n                  }\n                  return vars;\n                ]]]\n              name: \"[[[ return variables.ulm_card_light_name ]]]\"\n              label: >\n                [[[\n                  var label = variables.ulm_translation_state;\n                  if (entity.attributes.brightness != null && entity.state === 'on') {\n                    var bri = Math.round(entity.attributes.brightness / 2.55);\n                    label = (bri ? bri : \"0\") + \"%\";\n                  }\n                  return label;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_light_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_light_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n    item2:\n      card:\n        type: \"custom:my-slider\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        radius: \"14px\"\n        height: \"42px\"\n        minSet: \"[[[ return variables.ulm_card_light_enable_slider_minSet ]]]\"\n        maxSet: \"[[[ return variables.ulm_card_light_enable_slider_maxSet ]]]\"\n        mainSliderColor: >\n          [[[\n            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n            var color = 'rgba(var(--color-' + color_set + '),1)'\n            if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){\n              color = 'rgba(' + color_set + ',1)'\n            }\n            if (entity.state == \"unavailable\") {\n              return \"rgba(var(--color-grey),1)\";\n            }\n            if(variables.ulm_card_light_force_background_color && !hass.themes.darkMode){\n              return 'rgba(250,250,250,1)'\n            }\n            return color\n          ]]]\n        secondarySliderColor: >\n          [[[\n            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n            var color = 'rgba(var(--color-' + color_set + '),0.2)'\n            if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){\n              color = 'rgba(' + color_set + ',0.2)'\n            }\n            if (entity.state == \"unavailable\") {\n              return \"rgba(var(--color-grey),0.2)\";\n            }\n            return color\n          ]]]\n        thumbColor: >\n          [[[\n            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n            var color = 'rgba(var(--color-' + color_set + '),1)'\n            if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){\n              color = 'rgba(' + color_set + ',1)'\n            }\n            if (entity.state == \"unavailable\") {\n              return \"rgba(var(--color-grey),1)\";\n            }\n            if(variables.ulm_card_light_force_background_color && !hass.themes.darkMode){\n              return 'rgba(250,250,250,1)'\n            }\n            return color\n          ]]]\n        mainSliderColorOff: \"rgba(var(--color-theme),0.05)\"\n        secondarySliderColorOff: \"rgba(var(--color-theme),0.05)\"\n        thumbHorizontalPadding: \"0px\"\n        thumbVerticalPadding: \"0px\"\n        thumbWidth: \"12px\"\n        card_mod:\n        style: |\n          ha-card {\n            border-radius: 14px;\n            box-shadow: none;\n          }\n    item3:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        styles:\n          card:\n            - background: \"none\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_light_force_background_color){\n                          if (entity.state != \"off\"){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_light_force_background_color) {\n                          if (entity.state != \"off\") {\n                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n                            var color = 'rgba(var(--color-' + color_set + '),0.2)'\n                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {\n                              color = 'rgba(' + color_set + ',0.2)';\n                            }\n                            return color;\n                          }\n                        }\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_light_force_background_color) {\n                          if (entity.state != \"off\") {\n                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n                            var color = 'rgba(var(--color-' + color_set + '),1)';\n                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {\n                              color = 'rgba(' + color_set + ',1)';\n                            }\n                            return color;\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"light.turn_on\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  brightness_pct: \"[[[ return variables.ulm_card_light_brightness_low ]]]\"\n              icon: \"mdi:lightbulb-on-10\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_light_force_background_color){\n                          if (entity.state != \"off\"){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_light_force_background_color) {\n                          if (entity.state != \"off\") {\n                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n                            var color = 'rgba(var(--color-' + color_set + '),0.2)'\n                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {\n                              color = 'rgba(' + color_set + ',0.2)';\n                            }\n                            return color;\n                          }\n                        }\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_light_force_background_color) {\n                          if (entity.state != \"off\") {\n                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n                            var color = 'rgba(var(--color-' + color_set + '),1)';\n                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {\n                              color = 'rgba(' + color_set + ',1)';\n                            }\n                            return color;\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"light.turn_on\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  brightness_pct: \"[[[ return variables.ulm_card_light_brightness_medium ]]]\"\n              icon: \"mdi:lightbulb-on-50\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_light_force_background_color){\n                          if (entity.state != \"off\"){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_light_force_background_color) {\n                          if (entity.state != \"off\") {\n                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n                            var color = 'rgba(var(--color-' + color_set + '),0.2)'\n                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {\n                              color = 'rgba(' + color_set + ',0.2)';\n                            }\n                            return color;\n                          }\n                        }\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (variables.ulm_card_light_force_background_color) {\n                          if (entity.state != \"off\") {\n                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;\n                            var color = 'rgba(var(--color-' + color_set + '),1)';\n                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {\n                              color = 'rgba(' + color_set + ',1)';\n                            }\n                            return color;\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"light.turn_on\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  brightness_pct: \"[[[ return variables.ulm_card_light_brightness_high ]]]\"\n              icon: \"mdi:lightbulb-on\"\n
"},{"location":"usage/cards/card_media_player/","title":"Media_player Card","text":""},{"location":"usage/cards/card_media_player/#description","title":"Description","text":"

The card_media_player shows you the app, the title and the album name playing, if the data is available through HA. The app is shown via a different icon.

"},{"location":"usage/cards/card_media_player/#variables","title":"Variables","text":"Variable Default Required Notes entity The media-player entity ulm_card_media_player_name Name to display for your media-player ulm_card_media_player_icon Change the icon displayed ulm_card_media_player_enable_art false Enable album picture on background ulm_card_media_player_enable_controls false Enable controls below the title ulm_card_media_player_enable_volume_slider false Enable volume slider below controls ulm_card_media_player_enable_volume_buttons false Enable volume buttons below controls ulm_card_media_player_enable_volume_adjust 5 Volume Adjust Amount - if not set then 1 for TV and 5 for Speaker ulm_card_media_player_collapsible false Controls are collapsible when state is off ulm_card_media_player_player_controls_entity entity Change the controlled entity ulm_card_media_player_enable_popup false Enable pop-up ulm_card_media_player_more_info false Displays artist and album info in the sub-label ulm_card_media_player_power_button false Show power button ulm_card_media_player_color blue Set Custom Color ulm_card_media_player_force_background_color false Set ulm_card_media_player_color as background color in active state `

Note

To use popup_media_player you need to set the variable ulm_card_media_player_enable_popup to true. This is a different approach as the other popup_cards use.

"},{"location":"usage/cards/card_media_player/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_media_player\n  entity: media_player.livingroom_shield\n  variables:\n    ulm_card_media_player_name : Livingroom Nvidia Shield\n
Template Code card_media_player.yaml
---\n### Card Media Player ###\ncard_media_player:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_media_player_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_card_media_player_icon: false\n    ulm_card_media_player_enable_art: false\n    ulm_card_media_player_enable_controls: false\n    ulm_card_media_player_enable_volume_slider: false\n    ulm_card_media_player_enable_volume_buttons: false\n    ulm_card_media_player_enable_volume_adjust: 0\n    ulm_card_media_player_collapsible: false\n    ulm_card_media_player_player_controls_entity: \"[[[ return entity.entity_id ]]]\"\n    ulm_card_media_player_enable_popup: false\n    ulm_card_media_player_more_info: false\n    ulm_card_media_player_power_button: false\n    ulm_card_media_player_force_background_color: false\n    ulm_card_media_player_color: \"blue\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state && !variables.ulm_card_media_player_enable_art ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                  if (variables.ulm_card_media_player_color) {\n                    if (variables.ulm_card_media_player_force_background_color) {\n                      var color = variables.ulm_card_media_player_color;\n                      return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                    }\n                  }\n              ]]]\n  styles:\n    grid:\n      - grid-template-areas: |\n          [[[\n            var areas = \"'item1'\";\n            if (variables.ulm_card_media_player_enable_controls){\n              areas = areas + \" 'item2'\";\n            }\n            if (variables.ulm_card_media_player_enable_volume_slider){\n              areas = areas + \" 'item3'\";\n            }\n            if (variables.ulm_card_media_player_enable_volume_buttons){\n              areas = areas + \" 'item4'\";\n            }\n            return areas;\n          ]]]\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: |\n          [[[\n            var rows = \"min-content\";\n            if (variables.ulm_card_media_player_enable_controls){\n              rows = rows + \" min-content\";\n            }\n            if (variables.ulm_card_media_player_enable_volume_slider){\n              rows = rows + \" min-content\";\n            }\n            if (variables.ulm_card_media_player_enable_volume_buttons){\n              rows = rows + \" min-content\";\n            }\n            return rows;\n          ]]]\n      - row-gap: |-\n          [[[\n            if (!variables.ulm_card_media_player_collapsible) {\n                return \"12px\";\n              } else {\n                return (entity.state === \"off\" || entity.state === \"standby\") ? \"0px\" : \"12px\";\n              }\n          ]]]\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - background: |\n          [[[\n            return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null\n            ? 'center / cover url(' + states[entity.entity_id].attributes.entity_picture + ') rgba(0, 0, 0, 0.15)'\n            : ''\n          ]]]\n    custom_fields:\n      power:\n        - display: \"[[[ return variables.ulm_card_media_player_power_button ? 'block' : 'none']]]\"\n        - position: \"absolute\"\n        - top: \"12px\"\n        - right: \"12px\"\n      item2:\n        - display: |\n            [[[\n              if(variables.ulm_card_media_player_enable_controls) {\n                if(variables.ulm_card_media_player_collapsible){\n                return (entity.state === \"off\" || entity.state === \"standby\") ? \"none\" : \"block\";\n                }\n                return \"block\";\n              }\n              return \"none\";\n            ]]]\n      item3:\n        - border-radius: \"14px\"\n        - background-color: >\n            [[[\n              if(variables.ulm_card_media_player_enable_art){\n                return 'transparent'\n              }\n              if(!hass.themes.darkMode){\n                return 'rgb(250,250,250)' ;\n              }\n            ]]]\n        - display: |\n            [[[\n              if(variables.ulm_card_media_player_enable_volume_slider) {\n                if(variables.ulm_card_media_player_collapsible){\n                return (entity.state === \"off\" || entity.state === \"standby\") ? \"none\" : \"block\";\n                }\n                return \"block\";\n              }\n              return \"none\";\n            ]]]\n      item4:\n        - display: |\n            [[[\n              if(variables.ulm_card_media_player_enable_volume_buttons) {\n                if(variables.ulm_card_media_player_collapsible){\n                return (entity.state === \"off\" || entity.state === \"standby\") ? \"none\" : \"block\";\n                }\n                return \"block\";\n              }\n              return \"none\";\n            ]]]\n  custom_fields:\n    power:\n      card:\n        type: \"custom:button-card\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        template: \"widget_icon\"\n        icon: \"mdi:power\"\n        tap_action:\n          action: \"toggle\"\n        styles:\n          card:\n            - background-color: |\n                [[[\n                  if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                    return 'rgba(0, 0, 0, 0.2)'\n                  }\n                  if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){\n                    if (variables.ulm_active_state){\n                      return 'rgb(250,250,250)'\n                    }\n                  }\n                  return 'rgba(var(--color-theme),0.05)'\n                ]]]\n          img_cell:\n            - width: \"42px\"\n            - heigth: \"42px\"\n            - background-color: >\n                [[[\n                  if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {\n                    var color = variables.ulm_card_media_player_color;\n                    return 'rgba(var(--color-' + color + '),0.2)';\n                  }\n                  return 'rgba(var(--color-theme),0.05)';\n                ]]]\n          icon:\n            - color: |\n                [[[\n                  if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                    return 'white'\n                  }\n                  if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {\n                    var color = variables.ulm_card_media_player_color;\n                    return 'rgba(var(--color-' + color + '),1)';\n                  }\n                  return 'rgba(var(--color-theme),0.9)';\n                ]]]\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n                  if(variables.ulm_card_media_player_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_media_player_infos'\n                    };\n                  }\n                  return vars;\n                ]]]\n              icon: |\n                [[[\n                  var icon = entity.attributes.icon || \"mdi:speaker\";\n                  if(entity.attributes.app_name){\n                    var app = entity.attributes.app_name.toLowerCase();\n                    var icon = {\n                      \"spotify\": \"mdi:spotify\",\n                      \"google podcasts\": \"mdi:google-podcast\",\n                      \"plex\": \"mdi:plex\",\n                      \"soundcloud\": \"mdi:soundcloud\",\n                      \"youtube music\": \"mdi:youtube\",\n                      \"oto music\": \"mdi:music-circle\",\n                      \"pandora\": \"mdi:pandora\",\n                      \"netflix\": \"mdi:netflix\",\n                      \"hulu\": \"mdi:hulu\",\n                      \"bluetooth audio\": \"mdi:bluetooth\"\n                    }\n                  }\n                  return variables.ulm_card_media_player_icon || icon[app];\n                ]]]\n              styles:\n                icon:\n                  - color: |\n                      [[[\n                        var color = variables.ulm_card_media_player_color;\n                        var active_color = 'rgba(var(--color-theme),0.2)'\n                        if (variables.ulm_active_state){\n                          active_color = 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null\n                        ? 'white'\n                        : active_color\n                      ]]]\n                img_cell:\n                  - background-color: |\n                      [[[\n                        var color = variables.ulm_card_media_player_color;\n                        var active_color = 'rgba(var(--color-theme),0.05)'\n                        if (variables.ulm_active_state){\n                          active_color = 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null\n                        ? 'rgba(0, 0, 0, 0.2)'\n                        : active_color\n                      ]]]\n                card:\n                  - background: >\n                      [[[\n                        if(!variables.ulm_card_media_player_enable_art && variables.ulm_card_media_player_force_background_color && !hass.themes.darkMode){\n                          return 'rgb(250,250,250)'\n                        }\n                        return 'none'\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n                  if(variables.ulm_card_media_player_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_media_player_infos'\n                    };\n                  }\n                  return vars;\n                ]]]\n              label: \"[[[ return variables.ulm_translation_state ]]]\"\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return entity.state == 'off' ]]]\"\n                  name: |\n                    [[[\n                      let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;\n                      return name;\n                    ]]]\n                - operator: \"template\"\n                  value: \"[[[ return entity.state == 'standby' ]]]\"\n                  name: |\n                    [[[\n                      let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;\n                      return name;\n                    ]]]\n                - operator: \"template\"\n                  value: \"[[[ return entity.state != 'off'  || entity.state != 'standby']]]\"\n                  name: |\n                    [[[\n                      let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;\n                      if(states[entity.entity_id].attributes.media_title){\n                          name = states[entity.entity_id].attributes.media_title;\n                      }\n                      return name;\n                    ]]]\n                  label: |\n                    [[[\n                      let label = variables.ulm_translation_on;\n                      if (variables.ulm_card_media_player_more_info && states[entity.entity_id].attributes.media_artist\n                          && states[entity.entity_id].attributes.media_album_name) {\n                          label = states[entity.entity_id].attributes.media_artist + \" \u2022 \" + states[entity.entity_id].attributes.media_album_name;\n                      } else if(states[entity.entity_id].attributes.media_album_name) {\n                          label = states[entity.entity_id].attributes.media_album_name;\n                      } else if (states[entity.entity_id].attributes.media_artist) {\n                          label = states[entity.entity_id].attributes.media_artist\n                      }\n                      return label;\n                    ]]]\n              styles:\n                label:\n                  - opacity: \"1\"\n                  - filter: \"opacity(100%)\"\n                  - text-shadow: |\n                      [[[\n                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null\n                        ? '0 0 black'\n                        : 'none'\n                      ]]]\n                  - color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'white'\n                        }\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state){\n                          return 'rgba(250,250,250,0.5)'\n                        }\n                        return 'rgba(var(--color-theme), .5)'\n                      ]]]\n                name:\n                  - color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'white'\n                        }\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state){\n                          return 'rgb(250,250,250)'\n                        }\n                        return'rgba(var(--color-theme), 1)'\n                      ]]]\n                  - text-shadow: \"0 0 black\"\n                card:\n                  - padding: \"0px\"\n                  - background: \"none\"\n                  - border-radius: \"0\"\n                  - box-shadow: \"none\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_4_items\"\n        styles:\n          card:\n            - padding: \"0px\"\n            - background: \"none\"\n            - border-radius: \"0\"\n            - box-shadow: \"none\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              hold_action:\n                action: >\n                  [[[\n                      return variables.ulm_card_media_player_enable_popup ? \"fire-dom-event\" : \"more-info\";\n                  ]]]\n                browser_mod:\n                  service: \"browser_mod.popup\"\n                  data:\n                    large: true\n                    hide_header: true\n                    content:\n                      type: \"custom:button-card\"\n                      template: \"popup_media_player_infos\"\n                      entity: \"[[[ return entity.entity_id ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.media_previous_track\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n              icon: \"mdi:skip-previous\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              styles:\n                card:\n                  - background-color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'rgba(0, 0, 0, 0.2)'\n                        }\n                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'white'\n                        }\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n              hold_action:\n                action: >\n                  [[[\n                      return variables.ulm_card_media_player_enable_popup ? \"fire-dom-event\" : \"more-info\";\n                  ]]]\n                browser_mod:\n                  service: \"browser_mod.popup\"\n                  data:\n                    large: true\n                    hide_header: true\n                    content:\n                      type: \"custom:button-card\"\n                      template: \"popup_media_player_infos\"\n                      entity: \"[[[ return entity.entity_id; ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"[[[ return (entity.attributes?.media_duration > 0) ? 'media_player.media_play_pause' : entity.state =='playing' ? 'media_player.media_stop' : 'media_player.media_play']]]\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n              icon: \"[[[ return (entity.attributes?.media_duration > 0) ? 'mdi:pause' : 'mdi:stop' ]]]\"\n              state:\n                - value: \"playing\"\n                  icon: \"mdi:pause\"\n                - value: \"paused\"\n                  icon: \"mdi:play\"\n                - value: \"off\"\n                  icon: \"mdi:play\"\n                - value: \"standby\"\n                  icon: \"mdi:play\"\n                - value: \"idle\"\n                  icon: \"mdi:play\"\n              styles:\n                card:\n                  - background-color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'rgba(0, 0, 0, 0.2)'\n                        }\n                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'white'\n                        }\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              hold_action:\n                action: >\n                  [[[\n                      return variables.ulm_card_media_player_enable_popup ? \"fire-dom-event\" : \"more-info\";\n                  ]]]\n                browser_mod:\n                  service: \"browser_mod.popup\"\n                  data:\n                    large: true\n                    hide_header: true\n                    content:\n                      type: \"custom:button-card\"\n                      template: \"popup_media_player_infos\"\n                      entity: \"[[[ return entity.entity_id; ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.media_next_track\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n              icon: \"mdi:skip-next\"\n              styles:\n                card:\n                  - background-color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'rgba(0, 0, 0, 0.2)'\n                        }\n                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'white'\n                        }\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n          item4:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:playlist-music\"\n              entity: \"[[[ return entity.entity_id; ]]]\"\n              styles:\n                card:\n                  - background-color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'rgba(0, 0, 0, 0.2)'\n                        }\n                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'white'\n                        }\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              hold_action:\n                action: >\n                  [[[\n                      return variables.ulm_card_media_player_enable_popup && entity.attributes?.source_list ? \"fire-dom-event\" : \"more-info\";\n                  ]]]\n                browser_mod:\n                  service: \"browser_mod.popup\"\n                  data:\n                    large: true\n                    hide_header: true\n                    content:\n                      type: \"custom:button-card\"\n                      template: \"popup_media_player_source_card\"\n                      entity: \"[[[ return entity.entity_id; ]]]\"\n              tap_action:\n                action: >\n                  [[[\n                      return variables.ulm_card_media_player_enable_popup && entity.attributes?.source_list ? \"fire-dom-event\" : \"more-info\";\n                  ]]]\n                browser_mod:\n                  service: \"browser_mod.popup\"\n                  data:\n                    large: true\n                    hide_header: true\n                    style: |\n                      --popup-background-color: var(--primary-background-color);\n                      --popup-border-radius: 20px;\n                      --popup-padding-x: 24px;\n                      --popup-padding-y: 20px;\n                      --popup-max-width: auto\n                      --popup-min-width: 800px;\n                    card_mod:\n                      style:\n                        ha-dialog$: |\n                          @media (max-width: 800px){\n                            div.mdc-dialog__container {\n                              --mdc-dialog-min-width: 100vw;\n                              --mdc-dialog-max-width: 100vw;\n                              --mdc-dialog-min-height: 100%;\n                              --ha-dialog-border-radius: 0px;\n                            }\n                          }\n                    content:\n                      type: \"custom:button-card\"\n                      template: \"popup_media_player_source_card\"\n                      entity: \"[[[ return entity.entity_id; ]]]\"\n    item3:\n      card:\n        type: \"custom:my-slider\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        radius: \"14px\"\n        height: \"42px\"\n        mainSliderColor: |\n          [[[\n            var color = variables.ulm_card_media_player_color;\n            if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n              return 'rgba(0, 0, 0, 0.5)'\n            }\n            if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {\n              return 'rgb(250,250,250)';\n            }\n            return 'rgba(var(--color-' + color + '),1)'\n          ]]]\n        secondarySliderColor: |\n          [[[\n            var color = variables.ulm_card_media_player_color;\n            if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n              return 'rgba(0, 0, 0, 0.3)'\n            }\n            if (variables.ulm_card_media_player_force_background_color) {\n              return 'rgba(var(--color-' + color + '),0.3)';\n            }\n            return 'rgba(var(--color-' + color + '),0.2)'\n          ]]]\n        mainSliderColorOff: \"rgba(var(--color-theme),0.05)\"\n        secondarySliderColorOff: \"rgba(var(--color-theme),0.05)\"\n        thumbHorizontalPadding: \"0px\"\n        thumbVerticalPadding: \"0px\"\n        thumbWidth: \"0px\"\n        card_mod:\n          style: |\n            ha-card {\n              border-radius: 14px;\n              background-color: transparent;\n              box-shadow: none;\n            }\n    item4:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        styles:\n          card:\n            - padding: \"0px\"\n            - background: \"none\"\n            - border-radius: \"0\"\n            - box-shadow: \"none\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n              hold_action:\n                action: >\n                  [[[\n                      return variables.ulm_card_media_player_enable_popup ? \"fire-dom-event\" : \"more-info\";\n                  ]]]\n                browser_mod:\n                  service: \"browser_mod.popup\"\n                  data:\n                    large: true\n                    hide_header: true\n                    content:\n                      type: \"custom:button-card\"\n                      template: \"popup_media_player_infos\"\n                      entity: \"[[[ return entity.entity_id; ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.volume_mute\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n                data:\n                  is_volume_muted: \"[[[ return (states[entity.entity_id].attributes.is_volume_muted) ? false : true; ]]]\"\n              icon: \"mdi:volume-mute\"\n              styles:\n                card:\n                  - background-color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'rgba(0, 0, 0, 0.2)'\n                        }\n                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'white'\n                        }\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n              hold_action:\n                action: >\n                  [[[\n                      return variables.ulm_card_media_player_enable_popup ? \"fire-dom-event\" : \"more-info\";\n                  ]]]\n                browser_mod:\n                  service: \"browser_mod.popup\"\n                  data:\n                    large: true\n                    hide_header: true\n                    content:\n                      type: \"custom:button-card\"\n                      template: \"popup_media_player_infos\"\n                      entity: \"[[[ return entity.entity_id; ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.volume_set\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n                data:\n                  volume_level: |\n                    [[[\n                      var volume = states[entity.entity_id].attributes.volume_level;\n                      if (variables.ulm_card_media_player_enable_volume_adjust != 0) {\n                          volume = states[entity.entity_id].attributes.volume_level - variables.ulm_card_media_player_enable_volume_adjust;\n                      } else {\n                          if (states[entity.entity_id].attributes.device_class === \"tv\") {\n                              volume = states[entity.entity_id].attributes.volume_level - 0.01;\n                          }\n                          if (states[entity.entity_id].attributes.device_class === \"speaker\") {\n                              volume = states[entity.entity_id].attributes.volume_level - 0.05;\n                          }\n                          if (states[entity.entity_id].attributes.device_class === \"receiver\") {\n                              volume = states[entity.entity_id].attributes.volume_level - 0.025;\n                          } else {\n                              volume = states[entity.entity_id].attributes.volume_level - 0.025;\n                          }\n                      }\n                      return volume;\n                    ]]]\n              icon: \"mdi:volume-minus\"\n              styles:\n                card:\n                  - background-color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'rgba(0, 0, 0, 0.2)'\n                        }\n                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'white'\n                        }\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n              hold_action:\n                action: >\n                  [[[\n                      return variables.ulm_card_media_player_enable_popup ? \"fire-dom-event\" : \"more-info\";\n                  ]]]\n                browser_mod:\n                  service: \"browser_mod.popup\"\n                  data:\n                    large: true\n                    hide_header: true\n                    content:\n                      type: \"custom:button-card\"\n                      template: \"popup_media_player_infos\"\n                      entity: \"[[[ return entity.entity_id; ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.volume_set\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_player_controls_entity ]]]\"\n                data:\n                  volume_level: |\n                    [[[\n                      var volume = states[entity.entity_id].attributes.volume_level;\n                      if (variables.ulm_card_media_player_enable_volume_adjust != 0) {\n                          volume = states[entity.entity_id].attributes.volume_level + variables.ulm_card_media_player_enable_volume_adjust;\n                      } else {\n                          if (states[entity.entity_id].attributes.device_class === \"tv\") {\n                              volume = states[entity.entity_id].attributes.volume_level + 0.01;\n                          }\n                          if (states[entity.entity_id].attributes.device_class === \"speaker\") {\n                              volume = states[entity.entity_id].attributes.volume_level + 0.05;\n                          }\n                          if (states[entity.entity_id].attributes.device_class === \"receiver\") {\n                              volume = states[entity.entity_id].attributes.volume_level + 0.025;\n                          } else {\n                              volume = states[entity.entity_id].attributes.volume_level + 0.025;\n                          }\n                      }\n                      return volume;\n                    ]]]\n              icon: \"mdi:volume-plus\"\n              styles:\n                card:\n                  - background-color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'rgba(0, 0, 0, 0.2)'\n                        }\n                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){\n                          if (variables.ulm_active_state){\n                            return 'rgb(250,250,250)'\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)'\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: |\n                      [[[\n                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){\n                          return 'white'\n                        }\n                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {\n                          var color = variables.ulm_card_media_player_color;\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n
"},{"location":"usage/cards/card_navigate/","title":"Navigate Card","text":""},{"location":"usage/cards/card_navigate/#description","title":"Description","text":"

The card_navigate is for navigating inside your HA dashboard(s).

"},{"location":"usage/cards/card_navigate/#variables","title":"Variables","text":"Variable Default Required Notes ulm_card_navigate_path The path to your lovelace dashboard ulm_card_navigate_title Title to show for the link ulm_card_navigate_icon Icon to show ulm_card_navigate_color Blue No Color of Icon"},{"location":"usage/cards/card_navigate/#usage","title":"Usage","text":"
- type: custom:button-card\n  template: card_navigate\n  variables:\n    ulm_card_navigate_path: /ui-lovelace-minimalist/media\n    ulm_card_navigate_title: Media\n    ulm_card_navigate_icon: mdi:television\n    ulm_card_navigate_color: var(--color-red)\n
Template Code card_navigate.yaml
---\n### Card Navigate ###\ncard_navigate:\n  template:\n    - \"icon_only\"\n  tap_action:\n    action: \"navigate\"\n    navigation_path: \"[[[ return variables.ulm_card_navigate_path; ]]]\"\n  variables:\n    ulm_card_navigate_color: \"var(--color-blue)\"\n  label: \"[[[ return variables.ulm_card_navigate_title; ]]]\"\n  icon: \"[[[ return variables.ulm_card_navigate_icon; ]]]\"\n  styles:\n    icon:\n      - color: >\n          [[[\n            let color = variables.ulm_card_navigate_color;\n            return \"rgba(\" + color + \",0.7)\"\n          ]]]\n    label:\n      - align-self: \"center\"\n      - font-size: \"14px\"\n      - filter: \"opacity(100%)\"\n    grid:\n      - grid-template-columns: \"min-content min-content\"\n
"},{"location":"usage/cards/card_person/","title":"Person Card","text":""},{"location":"usage/cards/card_person/#description","title":"Description","text":"

The card_person shows if a person is home or not_home. If you have setup other zones, it will show these as well.

"},{"location":"usage/cards/card_person/#variables","title":"Variables","text":"Variable Default Required Notes entity The person entity ulm_card_person_entity The person entity ulm_card_person_use_entity_picture If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false. ulm_card_person_icon mdi:face-man Sets the icon to display if entity picture not shown. ulm_card_person_battery Battery sensor shown in the upper right corner ulm_card_person_eta Sensor with ETA info from integrations like: Waze, Google and HERE ulm_address Show an address as label, add an entity with a geo location"},{"location":"usage/cards/card_person/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_person\n  entity: person.username\n  variables:\n    ulm_card_person_entity: person.username\n    ulm_card_person_use_entity_picture: true\n    ulm_card_person_icon: mdi:face-woman\n    ulm_card_person_battery: sensor.battery_iphone\n    ulm_card_person_eta: sensor.waze_travel_time_person\n    ulm_address: sensor.s10_mike_gegeocodeerde_locatie\n
Template Code card_person.yaml
---\n### Card Person ###\ncard_person:\n  template:\n    - \"icon_info_bg\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_person_use_entity_picture: false\n    ulm_card_person_icon: \"mdi:face-man\"\n    ulm_address: \"\"\n  triggers_update:\n    - \"[[[ return variables.ulm_card_person_entity ]]]\"\n    - \"[[[ return variables.ulm_card_person_eta ]]]\"\n    - \"[[[ return variables.ulm_address ]]]\"\n  tap_action:\n    action: \"more-info\"\n  show_label: true\n  show_name: true\n  label: >\n    [[[\n      let translation = helpers.localize(entity)\n      var eta = \"\"\n      if (variables.ulm_card_person_eta && entity.state != 'home'){\n        eta = \" | \" + helpers.localize(states[variables.ulm_card_person_eta]);\n      }\n      if (variables.ulm_address){\n        return helpers.localize(states[variables.ulm_address]) + eta;\n      }\n      return translation + eta\n    ]]]\n  name: \"[[[ return entity.attributes.friendly_name ]]]\"\n  entity: \"[[[ return variables.ulm_card_person_entity; ]]]\"\n  icon: \"[[[ return variables.ulm_card_person_icon; ]]]\"\n  show_entity_picture: \"[[[ return variables.ulm_card_person_use_entity_picture ]]]\"\n  entity_picture:\n    \"[[[ return variables.ulm_card_person_use_entity_picture ? entity.attributes.entity_picture\\\n    \\ : null ]]]\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.9)\"\n      - width: >\n          [[[\n            return !variables.ulm_card_person_use_entity_picture ? \"20px\" : \"42px\";\n          ]]]\n      - place-self: >\n          [[[\n            return !variables.ulm_card_person_use_entity_picture ? \"center\" : \"stretch stretch\";\n          ]]]\n    custom_fields:\n      notification:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"38px\"\n        - top: \"8px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: >\n            [[[\n              return (entity.state !== 'home') ? \"rgba(var(--color-green),1)\" : \"rgba(var(--color-blue),1)\";\n            ]]]\n      info:\n        - position: \"absolute\"\n        - right: \"6px\"\n        - top: \"6px\"\n        - width: \"25px\"\n        - height: \"25px\"\n  custom_fields:\n    notification: >\n      [[[\n        if (entity.state == 'home') {\n            return '<ha-icon icon=\"mdi:home-variant\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        } else {\n            for (let st in states) {\n                if (st.startsWith(\"zone.\")) {\n                    if (states[st]?.attributes?.persons?.includes(entity.state) && !states[st]?.attributes?.passive) {\n                        var icon = states[st].attributes.icon !== null ? states[st].attributes.icon : 'mdi:help-circle';\n                        return '<ha-icon icon=\"' + icon + '\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n                    }\n                }\n            }\n        }\n        return '<ha-icon icon=\"mdi:home-minus\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n      ]]]\n    info: |\n      [[[\n        if(variables.ulm_card_person_battery){\n        const battery = Math.round(states[variables.ulm_card_person_battery].state/1);\n        const radius = 20.5; const circumference = radius * 2 * Math.PI;\n        return `<svg viewBox=\"0 0 50 50\"><circle cx=\"25\" cy=\"25\" r=\"${radius}\"\n        stroke=\"green\" stroke-width=\"3\" fill=\"none\"\n        style=\"transform: rotate(-90deg); transform-origin: 50% 50%;\n        stroke-dasharray: ${circumference};\n        stroke-dashoffset: ${circumference - battery / 100 * circumference};\" />\n        <text x=\"50%\" y=\"54%\" fill=\"var(--primary-text-color)\" font-size=\"16\" font-weight= \"bold\"\n        text-anchor=\"middle\" alignment-baseline=\"middle\">\n        ${battery}<tspan font-size=\"10\">%</tspan></text></svg>`;\n        }\n      ]]]\n
"},{"location":"usage/cards/card_power_outlet/","title":"Power Outlet Card","text":""},{"location":"usage/cards/card_power_outlet/#description","title":"Description","text":"

This is the power-outlet-card. It shows you the state of a power outlet, and if configured, the actual power consumption of the power outlet.

"},{"location":"usage/cards/card_power_outlet/#variables","title":"Variables","text":"Variable Default Required Notes entity ulm_card_power_outlet_name Set custom Name ulm_card_power_outlet_icon Set custom Icon ulm_card_power_outlet_consumption_sensor If you set this sensor, the power-outlet-card shows the energy consumption next to the state. ulm_card_power_outlet_color yellow Set Custom Color ulm_card_power_outlet_force_background_color false Set ulm_card_power_outlet_color as background color in active state `"},{"location":"usage/cards/card_power_outlet/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_power_outlet\n  variables:\n    ulm_card_power_outlet_consumption_sensor: sensor.power_outlet_livingroom_consumption\n    ulm_card_power_outlet_name: Power Outlet Livingroom\n  entity: switch.power_outlet_livingroom\n
Template Code card_power_outlet.yaml
---\n### Card Power Outlet ###\ncard_power_outlet:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_power_outlet_consumption_sensor:\n    ulm_card_power_outlet_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_card_power_outlet_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_outlet_power_enable_popup: false\n    ulm_card_power_outlet_color: \"yellow\"\n    ulm_card_power_outlet_force_background_color: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                if (variables.ulm_card_power_outlet_force_background_color) {\n                  var color = variables.ulm_card_power_outlet_color;\n                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                }\n              ]]]\n  triggers_update:\n    - \"[[[ return variables.ulm_card_power_outlet_consumption_sensor ]]]\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_power_outlet_icon ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor}\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_power_outlet_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                        return 'rgba(var(--color-theme),0.2)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_power_outlet_color;\n                        if (variables.ulm_active_state){\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_card_power_outlet_name ]]]\"\n              label: |-\n                [[[\n                  if (entity.state === \"on\" && variables.ulm_card_power_outlet_consumption_sensor !== null) {\n                    return variables.ulm_translation_state + \" \u2022 \" + states[variables.ulm_card_power_outlet_consumption_sensor].state + \"W\";\n                  } else {\n                    return variables.ulm_translation_state;\n                  }\n                ]]]\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_outlet_power_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_power_outlet_stats',\n                      'popup_variables': {'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,\n                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,\n                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor}\n                    };\n                  }\n                  return vars;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_power_outlet_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_power_outlet_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n
"},{"location":"usage/cards/card_room/","title":"Room Card","text":""},{"location":"usage/cards/card_room/#description","title":"Description","text":"

This is the room-card, used to show the state of single room in a quick glance. The card has support for up to 4 subicons at the right side of the card. These can be configured using custom colors and tap actions.

"},{"location":"usage/cards/card_room/#variables","title":"Variables","text":"Variable Default Required Notes Requirement label_use_temperature true Define whether the label should show the current room temperatureThe temperature should be provide by either a temperature or current_temperature attribute or by the entity state label_use_brightness false Define whether the label should show the current room brightness of the lightsRequires label_use_temperature to be false entity_1 a room_entity object (see below) entity_2 a room_entity object (see below) entity_3 a room_entity object (see below) entity_4 a room_entity object (see below)"},{"location":"usage/cards/card_room/#room-entity","title":"Room entity","text":"Variable Default Required Notes Requirement entity_id The entity_id of the status icon templates List of the additional button card templates to apply to this icon tap_action tap_action for the icon (see button card documentation for options) hold_action tap_action for the icon (see button card documentation for options)"},{"location":"usage/cards/card_room/#default-card-options","title":"Default card options","text":"

All the options from the button card are still available for the large room card. If you want to tweak this card a little bit more, below are some examples. The full list can be found here: link

Options Default Required Notes Requirement entity The entity_id for the large card icon Icon to display. Defaults to the entity icon tap_action Define the type of action on click, if undefined, toggle will be used.See Action hold_action Define the type of action on hold, if undefined, nothing happens See Action label Change the label text title Change the title text"},{"location":"usage/cards/card_room/#usage","title":"Usage","text":"
  - type: 'custom:button-card'\n    template:\n      - card_room\n      - red_no_state\n    name: Bathroom\n    entity: light.bathroom\n    icon: mdi:shower-head\n    tap_action:\n      action: navigate\n      navigation_path: '/ui-lovelace-minimalist/bathroom'\n    variables:\n      label_use_temperature: false\n      label_use_brightness: true\n      entity_1:\n        entity_id: light.bathroom\n        templates:\n          - yellow_on\n        tap_action:\n          action: toggle\n      entity_2:\n        entity_id: binary_sensor.badkamer_motion_sensor\n        templates:\n          - blue_on\n        tap_action:\n          action: none\n      entity_3:\n        entity_id: input_boolean.badkamer_motionsensor_enabled\n        templates:\n          - green_on\n          - red_off\n        tap_action:\n          action: toggle\n      entity_4:\n        entity_id: input_boolean.bath_mode\n        templates:\n          - pink_on\n        tap_action:\n          action: toggle\n
Template Code card_room.yaml
---\ncard_room:\n  template:\n    - \"ulm_translation_engine\"\n  variables:\n    label_use_temperature: true\n    label_use_brightness: false\n  double_tap_action:\n    action: \"perform-action\"\n    perform_action: \"input_select.select_option\"\n    target:\n      entity_id: \"[[[ return variables.ulm_input_select ]]]\"\n    data:\n      option: \"[[[ return variables.ulm_input_select_option ]]]\"\n  color: \"var(--google-grey-500)\"\n  size: \"45%\"\n  aspect_ratio: \"1/1\"\n  show_icon: true\n  show_label: true\n  show_name: true\n  icon: \"mdi:sofa-single\"\n  label: |-\n    [[[\n      if (variables.label_use_temperature) {\n        return (entity?.attributes?.current_temperature || entity?.attributes?.temperature || entity?.attributes?.device_temperature || entity?.state || '-') + (entity?.attributes?.unit_of_measurement || '\u00b0C');\n      } else if (variables.label_use_brightness && entity?.state == \"on\" && entity?.attributes?.brightness != null) {\n        let bri = Math.round(entity?.attributes?.brightness / 2.55);\n        return (bri ? bri : \"0\") + \"%\";\n      }\n      return variables.ulm_translation_state;\n    ]]]\n  state:\n    - value: \"unavailable\"\n      styles:\n        custom_fields:\n          notification:\n            - border-radius: \"50%\"\n            - border: \"2px solid var(--card-background-color)\"\n            - width: \"24.5px\"\n            - height: \"24.5px\"\n            - position: \"absolute\"\n            - left: \"50%\"\n            - top: \"50%\"\n            - transform: \"translate(-50%,-50%)\"\n            - margin-top: \"35%\"\n            - margin-left: \"-35%\"\n            - line-height: 0\n            - display: \"grid\"\n            - background-color: \"[[[ return 'rgba(var(--color-red),1)'; ]]]\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n    label:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n      - max-width: \"[[[ return `calc(100% - (12px + ${!variables?.entity_1 && !variables?.entity_2 ? 5 : 0}px))`; ]]]\"\n      - text-overflow: \"ellipsis\"\n      - overflow: \"hidden\"\n      - margin-top: \"[[[ return !variables?.entity_1 ? '-24%' : '-10%'; ]]]\"\n    name:\n      - justify-self: \"start\"\n      - align-self: \"end\"\n      - font-weight: \"bold\"\n      - font-size: \"18px\"\n      - margin-left: \"12px\"\n      - margin-bottom: \"[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? '15.8%' : '24%') : '10%'; ]]]\"\n      - max-width: \"[[[ return `calc(100% - (12px + ${!variables?.entity_2 ? 5 : 0}px))`; ]]]\"\n      - text-overflow: \"ellipsis\"\n      - overflow: \"hidden\"\n    state:\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"6px\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"50%\"\n      - width: \"75%\"\n      - height: \"75%\"\n      - max-width: \"none\"\n      - max-height: \"none\"\n      - position: \"absolute\"\n      - left: \"50%\"\n      - top: \"50%\"\n      - transform: \"translate(-50%,-50%)\"\n      - margin-top: \"25%\"\n      - margin-left: \"-25%\"\n    grid:\n      - grid-template-areas: \"[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? `'n n n' 'l l i3' 'i i i4'` : `'n n i2' 'l l i3' 'i i i4'`) : `'n n n i1' 'l l l i2' 'i i . i3' 'i i . i4'`; ]]]\"\n      - grid-template-columns: \"[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]\"\n      - grid-template-rows: \"[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]\"\n      - justify-items: \"center\"\n    card:\n      - border-radius: \"20px\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"5px\"\n    custom_fields:\n      i1: &widget_icon_room_styling\n        - border-radius: \"50%\"\n        - width: \"80%\"\n        - height: \"80%\"\n        - line-height: 0\n        - display: \"grid\"\n      i2: *widget_icon_room_styling\n      i3: *widget_icon_room_styling\n      i4: *widget_icon_room_styling\n  custom_fields:\n    notification: >\n      [[[\n        if (entity?.state == 'unavailable'){\n          return '<ha-icon icon=\"mdi:exclamation\" style=\"width: 50%; height: 50%; color: var(--primary-background-color);\"></ha-icon>';\n        }\n      ]]]\n\n    i1:\n      card:\n        type: \"custom:button-card\"\n        template: >\n          [[[\n            let templates = [ 'widget_icon_room' ];\n            if (variables?.entity_1?.templates?.length) {\n              templates.push(...variables.entity_1.templates);\n            }\n            return templates;\n          ]]]\n        variables: \"[[[ return variables?.entity_1; ]]]\"\n        state:\n          - operator: \"template\"\n            value: \"[[[ return !variables.entity_1; ]]]\"\n            styles:\n              card:\n                - display: \"none\"\n        entity: \"[[[ return variables?.entity_1?.entity_id; ]]]\"\n\n    i2:\n      card:\n        type: \"custom:button-card\"\n        template: >\n          [[[\n            let templates = [ 'widget_icon_room' ];\n            if (variables?.entity_2?.templates?.length) {\n              templates.push(...variables.entity_2.templates);\n            }\n            return templates;\n          ]]]\n        variables: \"[[[ return variables?.entity_2; ]]]\"\n        state:\n          - operator: \"template\"\n            value: \"[[[ return !variables.entity_2; ]]]\"\n            styles:\n              card:\n                - display: \"none\"\n        entity: \"[[[ return variables?.entity_2?.entity_id; ]]]\"\n\n    i3:\n      card:\n        type: \"custom:button-card\"\n        template: >\n          [[[\n            let templates = [ 'widget_icon_room' ];\n            if (variables?.entity_3?.templates?.length) {\n              templates.push(...variables.entity_3.templates);\n            }\n            return templates;\n          ]]]\n        variables: \"[[[ return variables?.entity_3; ]]]\"\n        state:\n          - operator: \"template\"\n            value: \"[[[ return !variables.entity_3; ]]]\"\n            styles:\n              card:\n                - display: \"none\"\n        entity: \"[[[ return variables?.entity_3?.entity_id; ]]]\"\n\n    i4:\n      card:\n        type: \"custom:button-card\"\n        template: >\n          [[[\n            let templates = [ 'widget_icon_room' ];\n            if (variables?.entity_4?.templates?.length) {\n              templates.push(...variables.entity_4.templates);\n            }\n            return templates;\n          ]]]\n        variables: \"[[[ return variables?.entity_4; ]]]\"\n        state:\n          - operator: \"template\"\n            value: \"[[[ return !variables.entity_4; ]]]\"\n            styles:\n              card:\n                - display: \"none\"\n        entity: \"[[[ return variables?.entity_4?.entity_id; ]]]\"\n\nwidget_icon_room:\n  variables:\n    tap_action:\n      action: \"toggle\"\n    hold_action:\n      action: \"more-info\"\n  tap_action:\n    action: \"[[[ return variables?.tap_action?.action ? variables.tap_action.action : 'none'; ]]]\"\n    entity: \"[[[ return variables.tap_action.entity; ]]]\"\n    navigation_path: \"[[[ return variables.tap_action.navigation_path; ]]]\"\n    url_path: \"[[[ return variables.tap_action.url_path; ]]]\"\n    perform_action: \"[[[ return variables.tap_action.service; ]]]\"\n    target: \"[[[ return variables.tap_action.service_data; ]]]\"\n  hold_action:\n    action: \"[[[ return variables?.hold_action?.action ? variables.hold_action.action : 'none'; ]]]\"\n    entity: \"[[[ return variables.hold_action.entity; ]]]\"\n    navigation_path: \"[[[ return variables.hold_action.navigation_path; ]]]\"\n    url_path: \"[[[ return variables.hold_action.url_path; ]]]\"\n    perform_action: \"[[[ return variables.hold_action.service; ]]]\"\n    target: \"[[[ return variables.hold_action.service_data; ]]]\"\n  size: \"15px\"\n  color: \"var(--google-grey)\"\n  show_icon: true\n  show_name: false\n  styles:\n    icon:\n      - width: \"50%\"\n      - height: \"50%\"\n      - line-height: \"0\"\n      - color: \"rgba(var(--color-theme),0.2)\"\n    img_cell:\n      - border-radius: \"50%\"\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n    grid:\n      - grid-template-areas: \"'i'\"\n    card:\n      - height: \"100%\"\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - border-radius: \"50%\"\n
"},{"location":"usage/cards/card_scenes/","title":"Scenes Card","text":""},{"location":"usage/cards/card_scenes/#description","title":"Description","text":"

This card is part of the Welcome Scenes card and can be used separately to only show the scene pills. It has the same features set as the pills in the Welcome Scenes card.

"},{"location":"usage/cards/card_scenes/#variables","title":"Variables","text":"Variable Default Required Notes entity_1 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_2 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_3 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_4 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_5 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_6 none Can be any common type of entity entity_7 none Can be any common type of entity"},{"location":"usage/cards/card_scenes/#entity-variables","title":"Entity Variables","text":"Variable Default Required Notes _entity_id Support almost all types of entities Scenes do always show as off _icon The icon to show _name The name to show _color Random Color of the icon Can choose between: blue, red, green, yellow, pink, purple If not specified, it will take a random color _state on or playing Define input_select state or give manual state for pill to be full _nav_path Navigate to another view Overrides other types of actions"},{"location":"usage/cards/card_scenes/#usage","title":"Usage","text":"

You can set 1 to 7 entities to show 1 to 7 pills dynamically If set none it uses auto-entities with max 5 pills

- type: \"custom:button-card\"\n  template: \"card_scenes_welcome\"\n  variables:\n    entity_1:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"blue\"\n    entity_2:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"red\"\n    entity_3:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"green\"\n    entity_4:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"purple\"\n    entity_5:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"yellow\"\n    entity_6:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"pink\"\n    entity_7:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"yellow\"\n
Auto-entities 
- type: \"custom:button-card\"\n  template: \"card_scenes_welcome\"\n
Template Code card_welcome_scenes.yaml
---\ncard_scenes_welcome:\n  show_icon: false\n  show_name: true\n  show_label: false\n  variables:\n    entity_1:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_2:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_3:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_4:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_5:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_6:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_7:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            var pills = []\n            const entities = [variables.entity_1?.entity_id, variables.entity_2?.entity_id, variables.entity_3?.entity_id, variables.entity_4?.entity_id, variables.entity_5?.entity_id, variables.entity_6?.entity_id, variables.entity_7?.entity_id]\n            function entity_check(item) {\n                if (item != \"\") {\n                    pills.push(\"item\" + (pills.length+1))\n                }\n            }\n            entities.forEach(entity_check)\n            return pills.join(\" \")\n          ]]]\n      - display: \"flex\"\n      - grid-template-rows: \"min-content\"\n      - justify-content: \"space-evenly\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - overflow: \"visible\"\n    custom_fields:\n      item1:\n        - display: \"[[[ return (variables.entity_1.entity_id != '') ? 'block' : 'none' ]]]\"\n      item2:\n        - display: \"[[[ return (variables.entity_2.entity_id != '') ? 'block' : 'none' ]]]\"\n      item3:\n        - display: \"[[[ return (variables.entity_3.entity_id != '') ? 'block' : 'none' ]]]\"\n      item4:\n        - display: \"[[[ return (variables.entity_4.entity_id != '') ? 'block' : 'none' ]]]\"\n      item5:\n        - display: \"[[[ return (variables.entity_5.entity_id != '') ? 'block' : 'none' ]]]\"\n      item6:\n        - display: \"[[[ return (variables.entity_6.entity_id != '') ? 'block' : 'none' ]]]\"\n      item7:\n        - display: \"[[[ return (variables.entity_7.entity_id != '') ? 'block' : 'none' ]]]\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill_welcome\"\n        variables: \"[[[ return variables.entity_1; ]]]\"\n        entity: \"[[[ return variables.entity_1.entity_id ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_1.entity_id ]]]\"\n              icon: \"[[[ return variables.entity_1.icon ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_1.entity_id ]]]\"\n              name: \"[[[ return variables.entity_1.name ]]]\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill_welcome\"\n        variables: \"[[[ return variables.entity_2; ]]]\"\n        entity: \"[[[ return variables.entity_2.entity_id ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_2.entity_id ]]]\"\n              icon: \"[[[ return variables.entity_2.icon ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_2.entity_id ]]]\"\n              name: \"[[[ return variables.entity_2.name ]]]\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill_welcome\"\n        variables: \"[[[ return variables.entity_3; ]]]\"\n        entity: \"[[[ return variables.entity_3.entity_id ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_3.entity_id ]]]\"\n              icon: \"[[[ return variables.entity_3.icon ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_3.entity_id ]]]\"\n              name: \"[[[ return variables.entity_3.name ]]]\"\n    item4:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill_welcome\"\n        variables: \"[[[ return variables.entity_4; ]]]\"\n        entity: \"[[[ return variables.entity_4.entity_id ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_4.entity_id ]]]\"\n              icon: \"[[[ return variables.entity_4.icon ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_4.entity_id ]]]\"\n              name: \"[[[ return variables.entity_4.name ]]]\"\n    item5:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill_welcome\"\n        variables: \"[[[ return variables.entity_5; ]]]\"\n        entity: \"[[[ return variables.entity_5.entity_id ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_5.entity_id ]]]\"\n              icon: \"[[[ return variables.entity_5.icon ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_5.entity_id ]]]\"\n              name: \"[[[ return variables.entity_5.name ]]]\"\n    item6:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill_welcome\"\n        variables: \"[[[ return variables.entity_6; ]]]\"\n        entity: \"[[[ return variables.entity_6.entity_id ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_6.entity_id ]]]\"\n              icon: \"[[[ return variables.entity_6.icon ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_6.entity_id ]]]\"\n              name: \"[[[ return variables.entity_6.name ]]]\"\n    item7:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill_welcome\"\n        variables: \"[[[ return variables.entity_7; ]]]\"\n        entity: \"[[[ return variables.entity_7.entity_id ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_7.entity_id ]]]\"\n              icon: \"[[[ return variables.entity_7.icon ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.entity_7.entity_id ]]]\"\n              name: \"[[[ return variables.entity_7.name ]]]\"\n
"},{"location":"usage/cards/card_script/","title":"Script Card","text":""},{"location":"usage/cards/card_script/#description","title":"Description","text":"

This card starts/runs a script. You can configure icon and text.

"},{"location":"usage/cards/card_script/#variables","title":"Variables","text":"Variable Default Required Notes ulm_card_script_title Name to show for the script. ulm_card_script_icon Icon to show for the script. tap_action_action Only call-service is allowed here. tap_action_service Let the script run by turning it on. tap_action_service_data This is the service_data needed by your script. That can be an entity_id and/or some variables."},{"location":"usage/cards/card_script/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_script\n  variables:\n    ulm_card_script_title: Romantic lights\n    ulm_card_script_icon: 'mdi:candle'\n  tap_action:\n    action: call-service\n    service: script.turn_on\n    service_data:\n      entity_id: script.romantic_livingroom_lights\n
Template Code card_script.yaml
---\n### Card Script ###\ncard_script:\n  template:\n    - \"icon_only\"\n  label: \"[[[ return variables.ulm_card_script_title; ]]]\"\n  icon: \"[[[ return variables.ulm_card_script_icon; ]]]\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-blue),0.7)\"\n    label:\n      - align-self: \"center\"\n      - font-size: \"14px\"\n      - filter: \"opacity(100%)\"\n    img_cell:\n      - background-color: \"rgba(var(--color-blue), 0.2)\"\n    grid:\n      - grid-template-columns: \"min-content min-content\"\n
"},{"location":"usage/cards/card_thermostat/","title":"Thermostat Card","text":""},{"location":"usage/cards/card_thermostat/#description","title":"Description","text":"

This is the thermostat-card, used to toggle a climate entity. Shows state of the thermostat and, if available, current temperature.

This documentation refers to the new \"All in one\" thermostat card. This card merges the following one :

  • legacy card_thermostat (the old one)
  • custom custom_card_heat_pump by Kam
  • custom custom_card_mpse_thermostat by mpse
  • custom custom_card_httpedo13_thermostat by httpedo13
  • custom custom_card_httpedo13_thermostat_with_buttons by httpedo13
  • custom custom_card_httpedo13_thermostat_with_buttons_collapse by httpedo13

Warning

This card has backward compatibility with older template except custom names and icons. It means variables like ulm_card_XXX_name and ulm_card_XXX_icon must be replaced by ulm_card_thermostat_name and ulm_card_thermostat_icon. To use popup_thermostat you need to set the variable ulm_card_thermostat_enable_popup to true. This is a different approach as the other popup_cards use.

"},{"location":"usage/cards/card_thermostat/#variables","title":"Variables","text":"Variable/Entity Default Required Notes Requirement entity Your HA entity ulm_card_thermostat_name friendly_name Customize name ulm_card_thermostat_icon mdi:thermometer Customize icon ulm_card_thermostat_enable_collapse false Collapse controls when off Need ulm_card_thermostat_enable_controls: true ulm_card_thermostat_enable_controls false Enable temperature control ulm_card_thermostat_enable_hvac_modes false Enable HVAC modes control ulm_card_thermostat_enable_background_color false Enable background color when cooling or heating ulm_card_thermostat_enable_display_temperature false Display current temperature on top right ulm_card_thermostat_enable_horizontal false Enable horizontal card Need ulm_card_thermostat_enable_controls: true ulm_card_thermostat_enable_popup false Enable popup_thermostat ulm_card_thermostat_fan_entity null fan entity for climate if separate entity ulm_card_thermostat_minimum_temp_spread 1 Minimum temperature spread between low and high temperature when in heat_cool mode ulm_card_thermostat_temp_step false Set the step size for increasing and decreasing temperature"},{"location":"usage/cards/card_thermostat/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_thermostat\n  entity: climate.hvac\n  variables:\n    ulm_card_thermostat_enable_collapse: true\n    ulm_card_thermostat_enable_controls: true\n    ulm_card_thermostat_enable_hvac_modes: true\n    ulm_card_thermostat_enable_popup: true\n
Template Code card_thermostat.yaml
---\n### Card Thermostat ###\ncard_thermostat:\n  template:\n    - \"ulm_translation_engine\"\n    - \"icon_more_info_new\"\n  variables:\n    ulm_card_thermostat_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_card_thermostat_icon: \"[[[ return 'mdi:thermometer' ]]]\"\n    ulm_card_thermostat_enable_collapse: false\n    ulm_card_thermostat_enable_controls: false\n    ulm_card_thermostat_enable_hvac_modes: false\n    ulm_card_thermostat_enable_background_color: false\n    ulm_card_thermostat_enable_display_temperature: false\n    ulm_card_thermostat_enable_horizontal: false\n    ulm_card_thermostat_enable_popup: false\n    ulm_card_thermostat_fan_entity: null\n    ulm_card_thermostat_minimum_temp_spread: 1\n    ulm_card_thermostat_preset_mode: false\n  show_icon: false\n  show_name: false\n  show_label: false\n  state:\n    - operator: \"template\"\n      value: >\n        [[[\n          return (entity.attributes.hvac_action == 'heating' && variables.ulm_card_thermostat_enable_background_color)\n        ]]]\n      styles:\n        card:\n          - background-color: \"rgba(255,165,0,0.75)\"\n    - operator: \"template\"\n      value: >\n        [[[\n          return (entity.attributes.hvac_action == 'cooling' && variables.ulm_card_thermostat_enable_background_color)\n        ]]]\n      styles:\n        card:\n          - background-color: \"rgba(0,191,255,0.75)\"\n    - operator: \"template\"\n      value: >\n        [[[\n          return entity.state != 'off'\n        ]]]\n      styles:\n        card:\n          - background-color: \"rgba(var(--color-background-yellow),var(--opacity-bg))\"\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n                var areas = [];\n                if (variables.ulm_card_thermostat_enable_horizontal) {\n                  return \"\\\"item1 item2\\\"\";\n                }\n                if (variables.ulm_card_thermostat_enable_display_temperature) {\n                    areas.push(\"item1 item4\");\n                } else {\n                  areas.push(\"item1 item1\");\n                }\n                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == \"off\") && variables.ulm_card_thermostat_enable_controls) {\n                    areas.push(\"item2 item2\");\n                }\n                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == \"off\") && variables.ulm_card_thermostat_enable_controls && entity.attributes.target_temp_high != null) {\n                    areas.push(\"low_temp_adjustment low_temp_adjustment\");\n                }\n                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == \"off\") && variables.ulm_card_thermostat_enable_hvac_modes) {\n                    areas.push(\"item3 item3\");\n                }\n                return \"\\\"\" + areas.join(\"\\\" \\\"\") + \"\\\"\";\n          ]]]\n      - grid-template-columns: >\n          [[[\n                  return variables.ulm_card_thermostat_enable_horizontal ? \"1fr 1fr\" : \"2fr 1fr\";\n          ]]]\n      - grid-template-rows: >\n          [[[\n                var rows = [];\n                rows.push(\"min-content\");\n                if (variables.ulm_card_thermostat_enable_horizontal) {\n                  return \"min-content\";\n                }\n                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == \"off\") && variables.ulm_card_thermostat_enable_controls) {\n                    rows.push(\"min-content\");\n                }\n                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == \"off\") && variables.ulm_card_thermostat_enable_controls && entity.attributes.target_temp_high != null) {\n                    rows.push(\"min-content\");\n                }\n                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == \"off\") && variables.ulm_card_thermostat_enable_hvac_modes) {\n                    rows.push(\"min-content\");\n                }\n                return rows.join(\" \");\n          ]]]\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n    custom_fields:\n      item2:\n        - display: >\n            [[[\n                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == \"off\") && variables.ulm_card_thermostat_enable_controls) {\n                      return \"block\";\n                  } else {\n                      return \"none\";\n                  }\n            ]]]\n      low_temp_adjustment:\n        - display: >\n            [[[\n                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == \"off\") && variables.ulm_card_thermostat_enable_controls && entity.attributes.target_temp_high != null) {\n                      return \"block\";\n                  } else {\n                      return \"none\";\n                  }\n            ]]]\n      item3:\n        - display: >\n            [[[\n                if (variables.ulm_card_thermostat_enable_horizontal) {\n                  return \"none\";\n                }\n                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == \"off\") && variables.ulm_card_thermostat_enable_hvac_modes) {\n                  return \"block\";\n                } else {\n                  return \"none\";\n                }\n            ]]]\n      item4:\n        - display: >\n            [[[\n                if (variables.ulm_card_thermostat_enable_horizontal) {\n                  return \"none\";\n                }\n                if (variables.ulm_card_thermostat_enable_display_temperature) {\n                  return \"block\";\n                } else {\n                  return \"none\";\n                }\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_card_thermostat_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_thermostat_temperature',\n                      'popup_variables': {'ulm_card_thermostat_preset_mode': variables.ulm_card_thermostat_preset_mode }\n                    };\n                  }\n                  return vars;\n                ]]]\n              icon: \"[[[ return variables.ulm_card_thermostat_icon ]]]\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'heating')\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-red),1)\"\n                    img_cell:\n                      - background-color: \"rgba(var(--color-red),0.2)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling')\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-blue),1)\"\n                    img_cell:\n                      - background-color: \"rgba(var(--color-blue),0.2)\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_card_thermostat_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_thermostat_temperature',\n                      'popup_variables': {'ulm_card_thermostat_preset_mode': variables.ulm_card_thermostat_preset_mode }\n                    };\n                  }\n                  return vars;\n                ]]]\n              name: \"[[[ return variables.ulm_card_thermostat_name ]]]\"\n              label: >-\n                [[[\n                    var label = variables.ulm_translation_state;\n                    if((entity.attributes.temperature || entity.attributes.target_temp_high != null) && !variables.ulm_card_thermostat_enable_display_temperature){\n                      return variables.ulm_translation_state;\n                    }\n                    return label;\n                ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        styles:\n          card:\n            - background: \"none\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:minus\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  target_temp_low: |\n                    [[[\n                      if (entity.attributes.target_temp_low == null) {\n                        return 0;\n                      } else {\n                        const unit = hass.config.unit_system.temperature\n                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '\u00b0F' ? 1.0 : 0.5)\n                        const new_temp =  (parseFloat(entity.attributes.target_temp_high) - step)\n                        return (new_temp - variables.ulm_card_thermostat_minimum_temp_spread < entity.attributes.target_temp_low ? new_temp - variables.ulm_card_thermostat_minimum_temp_spread : entity.attributes.target_temp_low);\n                      }\n                    ]]]\n                  target_temp_high: |\n                    [[[\n                      if (entity.attributes.target_temp_low == null) {\n                        return 0;\n                      } else {\n                        const unit = hass.config.unit_system.temperature\n                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '\u00b0F' ? 1.0 : 0.5)\n                        return (parseFloat(entity.attributes.target_temp_high) - step)\n                      }\n                    ]]]\n                  temperature: |\n                    [[[\n                      if (entity.attributes.temperature == null) {\n                        return 0;\n                      } else {\n                        const unit = hass.config.unit_system.temperature\n                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '\u00b0F' ? 1.0 : 0.5)\n                        return (parseFloat(states[entity.entity_id].attributes.temperature) - step)\n                      }\n                    ]]]\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              show_icon: false\n              show_name: false\n              show_label: true\n              entity: \"[[[ return entity.entity_id ]]]\"\n              label: |-\n                [[[\n                    var temperature = entity.attributes.temperature || entity.attributes.target_temp_high;\n                    if (temperature == null) {\n                      var temperature = '-';\n                    }\n                    return temperature + hass.config.unit_system.temperature;\n                ]]]\n              styles:\n                card:\n                  - background: \"none\"\n                  - box-shadow: \"none\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:plus\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  target_temp_low: |\n                    [[[\n                      if (entity.attributes.target_temp_low == null) {\n                        return 0;\n                      } else {\n                        return entity.attributes.target_temp_low;\n                      }\n                    ]]]\n                  target_temp_high: |\n                    [[[\n                      if (entity.attributes.target_temp_high == null) {\n                        return 0;\n                      } else {\n                        const unit = hass.config.unit_system.temperature\n                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '\u00b0F' ? 1.0 : 0.5)\n                        return (parseFloat(entity.attributes.target_temp_high) + step)\n                      }\n                    ]]]\n                  temperature: |\n                    [[[\n                      if (entity.attributes.temperature == null) {\n                        return 0;\n                      } else {\n                        const unit = hass.config.unit_system.temperature\n                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '\u00b0F' ? 1.0 : 0.5)\n                        return (parseFloat(states[entity.entity_id].attributes.temperature) + step)\n                      }\n                    ]]]\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n    low_temp_adjustment:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        styles:\n          card:\n            - background: \"none\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:minus\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  target_temp_low: |\n                    [[[\n                      const unit = hass.config.unit_system.temperature\n                      const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '\u00b0F' ? 1.0 : 0.5)\n                      return (parseFloat(entity.attributes.target_temp_low) - step)\n                    ]]]\n                  target_temp_high: \"[[[ return entity.attributes.target_temp_high ]]]\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              show_icon: false\n              show_name: false\n              show_label: true\n              entity: \"[[[ return entity.entity_id ]]]\"\n              label: |-\n                [[[\n                    var temperature = entity.attributes.target_temp_low;\n                    if (temperature == null) {\n                      var temperature = '-';\n                    }\n                    return temperature + hass.config.unit_system.temperature;\n                ]]]\n              styles:\n                card:\n                  - background: \"none\"\n                  - box-shadow: \"none\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:plus\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  target_temp_low: |\n                    [[[\n                      const unit = hass.config.unit_system.temperature\n                      const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '\u00b0F' ? 1.0 : 0.5)\n                      return (parseFloat(entity.attributes.target_temp_low) + step)\n                    ]]]\n                  target_temp_high: |\n                    [[[\n                      const unit = hass.config.unit_system.temperature\n                      const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '\u00b0F' ? 1.0 : 0.5)\n                      const new_temp = (parseFloat(entity.attributes.target_temp_low) + step)\n                      return (new_temp + variables.ulm_card_thermostat_minimum_temp_spread > entity.attributes.target_temp_high ? new_temp + variables.ulm_card_thermostat_minimum_temp_spread : entity.attributes.target_temp_high)\n                    ]]]\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        styles:\n          grid:\n            - grid-template-areas: >\n                [[[\n                      var areas = [];\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"auto\")) {\n                          areas.push(\"auto\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"heat\")) {\n                          areas.push(\"heat\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"cool\")) {\n                          areas.push(\"cool\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"dry\")) {\n                          areas.push(\"dry\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"heat_cool\")) {\n                          areas.push(\"heat_cool\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"fan_only\")) {\n                          areas.push(\"fan_only\");\n                      }\n                      if (!states[entity.entity_id].attributes.hvac_modes.includes(\"fan_only\") && (variables.ulm_card_thermostat_fan_entity !== null)) {\n                          areas.push(\"fan_entity_only\");\n                      }\n                      return \"\\\"\" + areas.join(\" \") + \"\\\"\";\n                ]]]\n            - grid-template-columns: >\n                [[[\n                      var columns = [];\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"auto\")) {\n                          columns.push(\"1fr\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"heat\")) {\n                          columns.push(\"1fr\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"cool\")) {\n                          columns.push(\"1fr\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"dry\")) {\n                          columns.push(\"1fr\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"heat_cool\")) {\n                          columns.push(\"1fr\");\n                      }\n                      if (states[entity.entity_id].attributes.hvac_modes.includes(\"fan_only\")) {\n                          columns.push(\"1fr\");\n                      }\n                      if (!states[entity.entity_id].attributes.hvac_modes.includes(\"fan_only\") && (variables.ulm_card_thermostat_fan_entity !== null)) {\n                          columns.push(\"1fr\");\n                      }\n                      return columns.join(\" \");\n                ]]]\n            - grid-template-rows: \"min-content\"\n            - column-gap: \"7px\"\n          card:\n            - box-shadow: \"none\"\n            - padding: \"0px\"\n            - background: \"none\"\n          custom_fields:\n            auto:\n              - display: >\n                  [[[\n                    if (states[entity.entity_id].attributes.hvac_modes.includes(\"auto\")) {\n                        return \"block\";\n                    } else {\n                        return \"none\";\n                    }\n                  ]]]\n            heat:\n              - display: >\n                  [[[\n                    if (states[entity.entity_id].attributes.hvac_modes.includes(\"heat\")) {\n                        return \"block\";\n                    } else {\n                        return \"none\";\n                    }\n                  ]]]\n            cool:\n              - display: >\n                  [[[\n                    if (states[entity.entity_id].attributes.hvac_modes.includes(\"cool\")) {\n                        return \"block\";\n                    } else {\n                        return \"none\";\n                    }\n                  ]]]\n            dry:\n              - display: >\n                  [[[\n                    if (states[entity.entity_id].attributes.hvac_modes.includes(\"dry\")) {\n                        return \"block\";\n                    } else {\n                        return \"none\";\n                    }\n                  ]]]\n            heat_cool:\n              - display: >\n                  [[[\n                    if (states[entity.entity_id].attributes.hvac_modes.includes(\"heat_cool\")) {\n                        return \"block\";\n                    } else {\n                        return \"none\";\n                    }\n                  ]]]\n            fan_only:\n              - display: >\n                  [[[\n                    if (states[entity.entity_id].attributes.hvac_modes.includes(\"fan_only\")) {\n                        return \"block\";\n                    } else {\n                        return \"none\";\n                    }\n                  ]]]\n            fan_entity_only:\n              - display: >\n                  [[[\n                    if (!states[entity.entity_id].attributes.hvac_modes.includes(\"fan_only\") && (variables.ulm_card_thermostat_fan_entity !== null)) {\n                        return \"block\";\n                    } else {\n                        return \"none\";\n                    }\n                  ]]]\n        custom_fields:\n          auto:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:autorenew\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_hvac_mode\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  hvac_mode: \"auto\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"auto\"\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-green),0.5)\"\n                    icon:\n                      - color: \"rgba(var(--color-green),1)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n          heat:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:fire\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_hvac_mode\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  hvac_mode: \"heat\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"heat\"\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-red),0.5)\"\n                    icon:\n                      - color: \"rgba(var(--color-red),1)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n          cool:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:snowflake\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_hvac_mode\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  hvac_mode: \"cool\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"cool\"\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-blue),0.5)\"\n                    icon:\n                      - color: \"rgba(var(--color-blue),1)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n          dry:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:water\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_hvac_mode\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  hvac_mode: \"dry\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"dry\"\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-yellow),0.5)\"\n                    icon:\n                      - color: \"rgba(var(--color-yellow),1)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n          heat_cool:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:sun-snowflake\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_hvac_mode\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  hvac_mode: \"heat_cool\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"heat_cool\"\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-purple),0.5)\"\n                    icon:\n                      - color: \"rgba(var(--color-purple),1)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n          fan_only:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:fan\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_hvac_mode\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  hvac_mode: \"fan_only\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return entity.state == \"fan_only\"\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.5)\"\n                    icon:\n                      - color: \"rgba(var(--color-green),1)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n          fan_entity_only:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:fan\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"fan.toggle\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_thermostat_fan_entity !== null ? states[variables.ulm_card_thermostat_fan_entity].entity_id : null ]]]\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return ((variables.ulm_card_thermostat_fan_entity !== null) && states[variables.ulm_card_thermostat_fan_entity].state == 'on')\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.5)\"\n                    icon:\n                      - color: \"rgba(var(--color-green),1)\"\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color\n                    ]]]\n                  styles:\n                    card:\n                      - background-color: \"rgba(var(--color-theme),0.15)\"\n    item4:\n      card:\n        type: \"custom:button-card\"\n        show_icon: false\n        show_name: false\n        show_label: true\n        entity: \"[[[ return entity.entity_id ]]]\"\n        label: |-\n          [[[\n              var temperature = entity.attributes.current_temperature;\n              if (temperature == null) {\n                var temperature = '-';\n              }\n              return temperature + hass.config.unit_system.temperature;\n          ]]]\n        styles:\n          card:\n            - background: \"none\"\n            - box-shadow: \"none\"\n
"},{"location":"usage/cards/card_title/","title":"Title Card","text":""},{"location":"usage/cards/card_title/#description","title":"Description","text":"

Titles (and optionally subtitles) are used to separate different areas in your design. You can use only a title, only a subtitle or both at once.

"},{"location":"usage/cards/card_title/#variables","title":"Variables","text":"Variable Default Required Notes name This is a main title (either title or subtitle is required) label This is a subtitle (either title or subtitle is required)"},{"location":"usage/cards/card_title/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_title\n  name: My Title\n  label: 'Subtitle'\n
Template Code card_title.yaml
---\n### Card Title ###\ncard_title:\n  tap_action:\n    action: \"none\"\n  show_icon: false\n  show_label: true\n  show_name: true\n  styles:\n    card:\n      - background-color: \"rgba(0,0,0,0)\"\n      - box-shadow: \"none\"\n      - height: \"auto\"\n      - width: \"auto\"\n      - margin-top: \"6px\"\n      - margin-left: \"18px\"\n      - margin-bottom: \"0px\"\n      - padding: \"6px\"\n    grid:\n      - grid-template-areas: \"'n' 'l'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n    name:\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"1.5rem\"\n    label:\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"1rem\"\n      - opacity: \"0.4\"\n
"},{"location":"usage/cards/card_vacuum/","title":"Vacuum Card","text":""},{"location":"usage/cards/card_vacuum/#description","title":"Description","text":"

This is a card to control your Robot-vacuum. It has support for all vacuums which use the services vacuum.start, vacuum.stop, vacuum.return_to_base and vacuum.locate

"},{"location":"usage/cards/card_vacuum/#variables","title":"Variables","text":"Variable Default Required Notes entity vacuum.* ulm_card_vacuum_name Add a custom name ulm_card_vacuum_icon Add a custom MDI icon ulm_card_vacuum_label Add a custom label ulm_card_vacuum_room Add a script to clean a specific room ulm_card_vacuum_room_icon Add custom icon to the room script ulm_card_vacuum_camera Add a camera entity to the card to show the vacuum map ulm_card_vacuum_camera_toggle Only show the camera entity while cleaning ulm_card_vacuum_color state based Set Custom Color ulm_card_vacuum_force_background_color false Set ulm_card_vacuum_color as background color in active state `"},{"location":"usage/cards/card_vacuum/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: \"card_vacuum\"\n  entity: \"vacuum.<Your_Vacuum>\"\n\n- type: \"custom:button-card\"\n  template: \"card_vacuum\"\n  entity: \"vacuum.<Your_Vacuum>\"\n  variables:\n    ulm_card_vacuum_room: \"script.clean_kitchen\"\n    ulm_card_vacuum_room_icon: \"mdi:table-chair\"\n    ulm_card_vacuum_camera: \"camera.vacuum_map\"\n    ulm_card_vacuum_camera_toggle: true\n
Template Code card_vacuum.yaml
---\n### Card Vacuum ###\ncard_vacuum:\n  show_name: false\n  show_icon: false\n  show_label: false\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_vacuum_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_card_vacuum_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_vacuum_room:\n    ulm_card_vacuum_room_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_vacuum_camera: \"\"\n    ulm_card_vacuum_enable_popup: false\n    ulm_card_vacuum_camera_toggle: false\n    ulm_card_vacuum_force_background_color: false\n    ulm_card_vacuum_color: >\n      [[[\n        var state = entity.state.toLowerCase();\n        var colors = {\n          \"cleaning\": \"blue\",\n          \"paused\": \"green\",\n          \"mopping\": \"yellow\",\n          \"returning\": \"purple\",\n          \"error\": \"red\",\n          \"default\": \"theme\"\n        }\n        return (colors[state] || colors[\"default\"]);\n      ]]]\n  triggers_update:\n    - \"[[[ return variables.ulm_card_vacuum_camera ]]]\"\n  state:\n    - operator: \"template\"\n      value: \"[[[ return variables.ulm_active_state ]]]\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                  if (variables.ulm_card_vacuum_color) {\n                    if (variables.ulm_card_vacuum_force_background_color) {\n                      var color = variables.ulm_card_vacuum_color;\n                      return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                    }\n                  }\n              ]]]\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            let map = \"'item1' 'map' 'item2'\"\n            if(variables.ulm_card_vacuum_camera != \"\"){\n              if(variables.ulm_card_vacuum_camera_toggle){\n                if(entity.state.toLowerCase() === 'cleaning' || entity.state.toLowerCase() === 'mopping'){\n                  return map;\n                }\n              } else {\n                 return map;\n              }\n            }\n            return \"'item1' 'item2'\"\n          ]]]\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: >\n          [[[\n            let map = \"repeat(3, min-content)\"\n            if(variables.ulm_card_vacuum_camera != \"\"){\n              if(variables.ulm_card_vacuum_camera_toggle){\n                if(entity.state.toLowerCase() === 'cleaning' || entity.state.toLowerCase() === 'mopping'){\n                  return map;\n                }\n              } else {\n                 return map;\n              }\n            }\n            return \"repeat(2, min-content)\"\n          ]]]\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - background-color: >\n          [[[\n            if(hass.themes.darkMode){\n              return \"variables.ulm_card_vacuum_color\" + \", 0.1)\";\n              }\n          ]]]\n    custom_fields:\n      map:\n        - display: >\n            [[[\n              let map = \"block\"\n              if(variables.ulm_card_vacuum_camera != \"\"){\n                if(variables.ulm_card_vacuum_camera_toggle){\n                  if(entity.state.toLowerCase() === 'cleaning' || entity.state.toLowerCase() === 'mopping'){\n                    return map;\n                  }\n                } else {\n                  return map;\n                }\n              }\n              return \"none\"\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_vacuum_icon ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n                  if(variables.ulm_card_vacuum_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_vacuum_map',\n                      'popup_variables': {'ulm_card_vacuum_camera': variables.ulm_card_vacuum_camera }\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if(color == 'theme' || !variables.ulm_active_state){\n                          return 'rgba(var(--color-theme),0.2)';\n                        }\n                        return 'rgba(var(--color-' + color + '),1)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if(color == 'theme' || !variables.ulm_active_state){\n                          return 'rgba(var(--color-theme),0.05)';\n                        }\n                        return 'rgba(var(--color-' + color + '),0.2)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              variables: >\n                [[[\n                  let vars = variables;\n                  if(variables.ulm_card_vacuum_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_vacuum_map',\n                      'popup_variables': {'ulm_card_vacuum_camera': variables.ulm_card_vacuum_camera }\n                    };\n                  }\n                  return vars;\n                ]]]\n              name: \"[[[ return variables.ulm_card_vacuum_name ]]]\"\n              label: >\n                [[[\n                  let label = entity.attributes.friendly_name\n                  if(variables.ulm_card_vacuum_label){\n                    label = variables.ulm_card_vacuum_label;\n                  } else {\n                    label = variables.ulm_translation_state;\n                  }\n                  return label;\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return variables.ulm_active_state ]]]\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_vacuum_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                              if (variables.ulm_card_vacuum_force_background_color) {\n                                  return 'rgb(250,250,250)';\n                              }\n                          ]]]\n    map:\n      card:\n        type: \"custom:button-card\"\n        show_name: false\n        show_icon: false\n        show_label: false\n        entity: \"[[[ return variables.ulm_card_vacuum_camera ]]]\"\n        show_entity_picture: \"true\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n          icon:\n            - border-radius: \"20px\"\n            - width: \"100%\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: >\n          [[[ return variables.ulm_card_vacuum_room ? \"list_4_items\" : \"list_3_items\"; ]]]\n        styles:\n          card:\n            - background: \"none\"\n            - border-radius: \"0\"\n          custom_fields:\n            item4:\n              - display: >\n                  [[[ return variables.ulm_card_vacuum_room ? \"block\" : \"none\"; ]]]\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:play\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state){\n                          return 'rgb(250,250,250)'\n                        }\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                          return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                          return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return ['cleaning','mopping'].includes(entity.state.toLowerCase()) ]]]\"\n                  icon: \"mdi:stop\"\n                  tap_action:\n                    action: \"perform-action\"\n                    perform_action: \"vacuum.stop\"\n                    target:\n                      entity_id: \"[[[ return entity.entity_id ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: >\n                  [[[\n                    return ['cleaning','mopping'].includes(entity.state.toLowerCase()) ? \"vacuum.stop\" : \"vacuum.start\";\n                  ]]]\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:home-map-marker\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state){\n                          return 'rgb(250,250,250)'\n                        }\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                          return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                          return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"vacuum.return_to_base\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:map-marker\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state){\n                          return 'rgb(250,250,250)'\n                        }\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                          return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                          return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"vacuum.locate\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n          item4:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return variables.ulm_card_vacuum_room ]]]\"\n              icon: \"[[[ return variables.ulm_card_vacuum_room_icon ]]]\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if(!hass.themes.darkMode && variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state){\n                          return 'rgb(250,250,250)'\n                        }\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {\n                          return 'rgba(var(--color-' + color + '),0.2)';\n                        }\n                          return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_vacuum_color;\n                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {\n                          return 'rgba(var(--color-' + color + '),1)';\n                        }\n                          return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"script.turn_on\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_vacuum_room ]]]\"\n
"},{"location":"usage/cards/card_vertical_button/","title":"Vertical Button Card","text":""},{"location":"usage/cards/card_vertical_button/#description","title":"Description","text":"

Card card_vertical_button can be used in different ways. The primary usage is to switch between scenes or toggle a scene on/off. The secondary use is to toggle a switch or light. It's intended to be used with helper entities, either input_select or input_boolean.

You connect the card to either an input_select (toggle between scenes) or input_boolean (toggle one scene) and the button will change the state of these entities. The final step is to create an automation that triggers on the state change and then runs the actions you want, apply a scene or interact with other entities.

The variable ulm_card_vertical_button_state needs to be used together with input_select to tie a specific state to the button.

"},{"location":"usage/cards/card_vertical_button/#variables","title":"Variables","text":"Variable Default Required Notes ulm_card_vertical_button_state on Compare the entity state value with this value, ex: the button will be on if the entity.state == state (only required with input_select) ulm_card_vertical_button_color blue color for the when the button is on. The color names are defined in the theme. The following colors are supported: blue, green, yellow, pink, red, purple"},{"location":"usage/cards/card_vertical_button/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: card_vertical_button\n  entity: input_select.test_vertical_buttons\n  name: Away\n  icon: mdi:television-classic\n  show_last_changed: true\n  variables:\n    ulm_card_vertical_button_state: Away\n    ulm_card_vertical_button_color: green\n
Template Code card_vertical_button.yaml
---\n### VERTICAL BUTTONS (fka SCENES) ###\ncard_vertical_button:\n  variables:\n    ulm_card_vertical_button_color: \"blue\"\n    ulm_card_vertical_button_state: \"on\"\n  show_label: true\n  label: \"\"\n  name: |\n    [[[\n      if( entity.entity_id.startsWith(\"input_select.\") )\n        return variables.ulm_card_vertical_button_state;\n      else if( entity.entity_id.startsWith(\"input_boolean.\") )\n        return \"\";\n      return entity.state;\n    ]]]\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n    label:\n      - justify-self: \"center\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n    name:\n      - margin-top: \"10px\"\n      - justify-self: \"center\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - width: \"42px\"\n      - height: \"42px\"\n    grid:\n      - grid-template-areas: \"'i' 'n' 'l'\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"10px 0px 8px 0px\"\n  size: \"20px\"\n  state:\n    - operator: \"template\"\n      value: |\n        [[[\n          return entity.state == variables.ulm_card_vertical_button_state;\n        ]]]\n      styles:\n        icon:\n          - color: \"[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 1)`; ]]]\"\n        label:\n          - color: \"[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]\"\n        name:\n          - color: \"[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]\"\n        img_cell:\n          - background-color: \"[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 0.2)`; ]]]\"\n        card:\n          - background-color: \"[[[ return `rgba(var(--color-background-${variables.ulm_card_vertical_button_color}), var(--opacity-bg))`; ]]]\"\n  tap_action:\n    action: \"perform-action\"\n    perform_action: |\n      [[[\n        if( entity.entity_id.startsWith(\"input_select.\") )\n          return \"input_select.select_option\";\n        if( entity.entity_id.startsWith(\"input_boolean.\") )\n          return \"input_boolean.toggle\";\n        if( entity.entity_id.startsWith(\"switch.\") )\n          return \"switch.toggle\";\n        if( entity.entity_id.startsWith(\"light.\") )\n          return \"light.toggle\";\n        if( entity.entity_id.startsWith(\"automation.\") )\n          return \"automation.toggle\";\n        if( entity.entity_id.startsWith(\"input_button.\") )\n          return \"input_button.press\";\n        if( entity.entity_id.startsWith(\"fan.\") )\n          return \"fan.toggle\";\n        if( entity.entity_id.startsWith(\"vacuum.\") )\n          return \"vacuum.toggle\";\n        if( entity.entity_id.startsWith(\"script.\") )\n          return \"script.toggle\";\n        if( entity.entity_id.startsWith(\"button.\") )\n          return \"button.press\";\n        // If we need to support other entities we can add these options here.\n        return \"\";\n      ]]]\n    target: |\n      [[[\n        var obj;\n        if( entity.entity_id.startsWith(\"input_select.\") )\n          obj = { entity_id: entity.entity_id, option: variables.ulm_card_vertical_button_state };\n        else\n          obj = { entity_id: entity.entity_id };\n        return obj;\n      ]]]\n
"},{"location":"usage/cards/card_weather/","title":"Weather Card","text":""},{"location":"usage/cards/card_weather/#description","title":"Description","text":"

This is a card based on simple-weather-card to show your weather. simple-weather-card lovelace resources must be installed for this one!

"},{"location":"usage/cards/card_weather/#variables","title":"Variables","text":"Variable Default Required Notes entity your weather entity ulm_card_weather_name friendly_name customize display name ulm_card_weather_primary_info extrema customize primary info. Set to false to disable. See simple-weather-card for more information ulm_card_weather_secondary_info precipitation customize secondary info. Set to false to disable. See simple-weather-card for more information ulm_card_weather_backdrop false add backdrop. See simple-weather-card for more information ulm_card_weather_custom customize weather data. See simple-weather-card"},{"location":"usage/cards/card_weather/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_weather\n  entity: weather.my_local_weather\n  variables:\n    ulm_card_weather_name: \" \"\n    ulm_card_weather_primary_info:\n      - wind_speed\n      - precipitation_probability\n    ulm_card_weather_backdrop:\n      fade: true\n    ulm_card_weather_custom:\n      - temp: sensor.temperature\n
Template Code card_weather.yaml
---\n### Card Weather ###\ncard_weather:\n  template:\n    - \"ulm_actions_card_overlay\"\n  variables:\n    ulm_card_weather_backdrop: false\n    ulm_card_weather_primary_info: \"extrema\"\n    ulm_card_weather_secondary_info: \"precipitation\"\n    ulm_card_weather_custom:\n      - temp: \"[[[ return entity.attributes.temperature ]]]\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: \"'item1'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"0px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:simple-weather-card\"\n        entity: \"[[[ return entity.entity_id; ]]]\"\n        name: \"[[[ return variables.ulm_card_weather_name || entity.attributes.friendly_name ]]]\"\n        primary_info: \"[[[ return variables.ulm_card_weather_primary_info ]]]\"\n        secondary_info: \"[[[ return variables.ulm_card_weather_secondary_info ]]]\"\n        backdrop: \"[[[ return variables.ulm_card_weather_backdrop ]]]\"\n        custom: \"[[[ return variables?.ulm_card_weather_custom ]]]\"\n        style: |\n          ha-card {\n            border-radius: 14px;\n            box-shadow: none;\n          }\n          ha-card.type-custom-simple-weather-card {\n            padding: 24px;\n          }\n          ha-card[bg].type-custom-simple-weather-card{\n            color: white;\n          }\n          ha-card.type-custom-simple-weather-card .weather__info {\n            text-align: left\n          }\n
"},{"location":"usage/cards/card_weather_ulm/","title":"Weather Card ULM","text":""},{"location":"usage/cards/card_weather_ulm/#description","title":"Description","text":"

This is a card to show your weather without usage of custom resources.

"},{"location":"usage/cards/card_weather_ulm/#variables","title":"Variables","text":"Variable Default Required Notes entity your weather entity ulm_card_weather_ulm_enable_popup false"},{"location":"usage/cards/card_weather_ulm/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: \"card_weather_ulm\"\n  entity: \"weather.lieusaint\"\n  variables:\n    ulm_card_weather_ulm_enable_popup: true\n
Template Code card_weather.yaml
---\n### Card Weather ULM ###\ncard_weather_ulm:\n  template:\n    - \"icon_more_info_new\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_weather_ulm_enable_popup: false\n    ulm_weather_popup_surpress_first_forecast: false\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"1fr 1fr\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: |\n                [[[\n                  var state = entity.state;\n                  var icon = {\n                    \"clear-night\": \"mdi:weather-night\",\n                    \"cloudy\": \"mdi:weather-cloudy\",\n                    \"exceptional\": \"mdi:weather-sunny-alert\",\n                    \"fog\": \"mdi:weather-fog\",\n                    \"hail\": \"mdi:weather-hail\",\n                    \"lightning\": \"mdi:weather-lightning\",\n                    \"lightning-rainy\": \"mdi:weather-lightning-rainy\",\n                    \"partlycloudy\": \"mdi:weather-partly-cloudy\",\n                    \"pouring\": \"mdi:weather-pouring\",\n                    \"rainy\": \"mdi:weather-rainy\",\n                    \"snowy\": \"mdi:weather-snowy\",\n                    \"snowy-rainy\": \"mdi:weather-snowy-rainy\",\n                    \"sunny\": \"mdi:weather-sunny\",\n                    \"windy\": \"mdi:weather-windy\",\n                    \"default\": \"mdi:crosshairs-question\"\n                    }\n                  return (icon[state] || icon[\"default\"]);\n                ]]]\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_card_weather_ulm_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_weather_forecast',\n                      'popup_variables': {'ulm_weather_popup_surpress_first_forecast': variables.ulm_weather_popup_surpress_first_forecast}\n                    };\n                  }\n                  return vars;\n                ]]]\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var state = entity.state;\n                        var icon = {\n                          \"clear-night\": \"rgba(var(--color-yellow),1)\",\n                          \"cloudy\": \"rgba(var(--color-blue),1)\",\n                          \"exceptional\": \"rgba(var(--color-red),1)\",\n                          \"fog\": \"rgba(var(--color-grey),1)\",\n                          \"hail\": \"rgba(var(--color-blue),1)\",\n                          \"lightning\": \"rgba(var(--color-blue),1)\",\n                          \"lightning-rainy\": \"rgba(var(--color-blue),1)\",\n                          \"partlycloudy\": \"rgba(var(--color-yellow),1)\",\n                          \"pouring\": \"rgba(var(--color-grey),1)\",\n                          \"rainy\": \"rgba(var(--color-blue),1)\",\n                          \"snowy\": \"rgba(var(--color-blue),1)\",\n                          \"snowy-rainy\": \"rgba(var(--color-blue),1)\",\n                          \"sunny\": \"rgba(var(--color-yellow),1)\",\n                          \"windy\": \"rgba(var(--color-grey),1)\",\n                          \"default\": \"rgba(var(--color-grey),1)\",\n                          }\n                        return (icon[state] || icon[\"default\"]);\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var state = entity.state;\n                        var icon = {\n                          \"clear-night\": \"rgba(var(--color-yellow),0.2)\",\n                          \"cloudy\": \"rgba(var(--color-blue),0.2)\",\n                          \"exceptional\": \"rgba(var(--color-red),0.2)\",\n                          \"fog\": \"rgba(var(--color-grey),0.2)\",\n                          \"hail\": \"rgba(var(--color-blue),0.2)\",\n                          \"lightning\": \"rgba(var(--color-blue),0.2)\",\n                          \"lightning-rainy\": \"rgba(var(--color-blue),0.2)\",\n                          \"partlycloudy\": \"rgba(var(--color-yellow),0.2)\",\n                          \"pouring\": \"rgba(var(--color-grey),0.2)\",\n                          \"rainy\": \"rgba(var(--color-blue),0.2)\",\n                          \"snowy\": \"rgba(var(--color-blue),0.2)\",\n                          \"snowy-rainy\": \"rgba(var(--color-blue),0.2)\",\n                          \"sunny\": \"rgba(var(--color-yellow),0.2)\",\n                          \"windy\": \"rgba(var(--color-grey),0.2)\",\n                          \"default\": \"rgba(var(--color-grey),0.2)\",\n                          }\n                        return (icon[state] || icon[\"default\"]);\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              show_state: true\n              styles:\n                grid:\n                  - grid-template-areas: \"'i n' 'i s'\"\n              variables: >\n                [[[\n                  let vars = variables;\n\n                  if(variables.ulm_card_weather_ulm_enable_popup) {\n                    vars.ulm_custom_popup = {\n                      'template': 'popup_weather_forecast',\n                      'popup_variables': {'ulm_weather_popup_surpress_first_forecast': variables.ulm_weather_popup_surpress_first_forecast}\n                    };\n                  }\n                  return vars;\n                ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_2_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:water\"\n              tap_action:\n                action: \"none\"\n              layout: \"icon_state\"\n              show_state: false\n              show_units: false\n              show_name: false\n              custom_fields:\n                item: \"[[[ return entity.attributes.humidity + '%' ]]]\"\n              styles:\n                grid:\n                  - grid-template-areas: \"'i item'\"\n                  - grid-template-columns: \"40% 60%\"\n                card:\n                  - box-shadow: \"none\"\n                  - padding: \"0px\"\n                  - background-color: \"rgba(var(--color-theme),0.05)\"\n                  - border-radius: \"14px\"\n                  - place-self: \"center\"\n                  - height: \"42px\"\n                icon:\n                  - color: \"rgba(var(--color-theme),0.9)\"\n                img_cell:\n                  - justify-content: \"right\"\n                custom_fields:\n                  item:\n                    - text-align: \"left\"\n                    - font-size: \"1rem\"\n              size: \"20px\"\n              color: \"var(--google-grey)\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:thermometer\"\n              tap_action:\n                action: \"none\"\n              layout: \"icon_state\"\n              show_state: false\n              show_units: false\n              show_name: false\n              custom_fields:\n                item: \"[[[ return entity.attributes.temperature + entity.attributes.temperature_unit ]]]\"\n              styles:\n                grid:\n                  - grid-template-areas: \"'i item'\"\n                  - grid-template-columns: \"45% 55%\"\n                card:\n                  - box-shadow: \"none\"\n                  - padding: \"0px\"\n                  - background-color: \"rgba(var(--color-theme),0.05)\"\n                  - border-radius: \"14px\"\n                  - place-self: \"center\"\n                  - height: \"42px\"\n                icon:\n                  - color: \"rgba(var(--color-theme),0.9)\"\n                img_cell:\n                  - justify-content: \"right\"\n                custom_fields:\n                  item:\n                    - text-align: \"left\"\n                    - font-size: \"1rem\"\n              size: \"20px\"\n              color: \"var(--google-grey)\"\n
"},{"location":"usage/cards/card_welcome_scenes/","title":"Welcome Scenes Card","text":""},{"location":"usage/cards/card_welcome_scenes/#description","title":"Description","text":"

This is a card which shows the basic needs for your dashboard. This card can generate itself automatically. It is also included in the preview-dashboard which comes with a fresh installation of UI-Minimalist.

"},{"location":"usage/cards/card_welcome_scenes/#variables","title":"Variables","text":"Variable Default Required Notes ulm_card_welcome_scenes_collapse Enables the collapse function. requires an input_boolean to track the state ulm_weather This is your weather provider. Example: weather.your_provider ulm_language Language of your system You can set a different format with the BCP-47 language tags Example: \"en-US\" or just \"en\" entity_1 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_2 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_3 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_4 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_5 auto-entities Can be any common type of entity if no entity is specified defaults to auto-entities entity_6 none Can be any common type of entity entity_7 none Can be any common type of entity"},{"location":"usage/cards/card_welcome_scenes/#entity-variables","title":"Entity Variables","text":"Variable Default Required Notes _entity_id Support almost all types of entities Scenes do always show as off _icon The icon to show _name The name to show _color Random Color of the icon Can choose between: blue, red, green, yellow, pink, purple If not specified, it will take a random color _state on or playing Define input_select state or give manual state for pill to be full _nav_path Navigate to another view Overrides other types of actions _service_data Data to be passed through to data_service. Useful for running scripts with custom fields/parameters"},{"location":"usage/cards/card_welcome_scenes/#requirement-collapse-function","title":"Requirement Collapse Function","text":"

This feature is fully optional. It requires some more manual configuration!

You need to create a input_boolean in HA to track the state. See Docs. Furthermore, you need to add the input_boolean to the variable ulm_card_welcome_scenes_collapse and to either the entity or triggers_update to make sure it directly refreshes the state.

Warning

Do not use triggers_update: \"all\"! This will lead to unwanted behavior with the random colors generator.

"},{"location":"usage/cards/card_welcome_scenes/#usage","title":"Usage","text":"

You can set 1 to 7 entities to show 1 to 7 pills dynamically If set none it uses auto-entities with max 5 pills

- type: \"custom:button-card\"\n  template: \"card_welcome_scenes\"\n  #triggers_update: input_boolean.<Your_boolean>\n  #entity: input_boolean.<Your_boolean>\n  variables:\n    ulm_card_welcome_scenes_collapse: input_boolean.<Your_boolean> #OPTIONAl --> uncomment also entity or triggers_update\n    ulm_weather: \"weather.YOUR_WEATHERPROVIDER\"\n    entity_1:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"blue\"\n    entity_2:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"red\"\n    entity_3:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"green\"\n    entity_4:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"purple\"\n    entity_5:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"yellow\"\n    entity_6:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"pink\"\n    entity_7:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n      color: \"yellow\"\n
Auto-entities 
- type: \"custom:button-card\"\n  template: \"card_welcome_scenes\"\n  #triggers_update: input_boolean.<Your_boolean>\n  #entity: input_boolean.<Your_boolean>\n  variables:\n    ulm_card_welcome_scenes_collapse: input_boolean.<Your_boolean> #OPTIONAl --> uncomment also entity or triggers_update\n    ulm_weather: \"weather.YOUR_WEATHERPROVIDER\"\n
Random Colors 
- type: \"custom:button-card\"\n  template: \"card_welcome_scenes\"\n  #triggers_update: input_boolean.<Your_boolean>\n  #entity: input_boolean.<Your_boolean>\n  variables:\n    ulm_card_welcome_scenes_collapse: input_boolean.<Your_boolean> #OPTIONAl --> uncomment also entity or triggers_update\n    ulm_weather: \"weather.YOUR_WEATHERPROVIDER\"\n    entity_1:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n    entity_2:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n    entity_3:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n    entity_4:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n    entity_5:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n    entity_6:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n    entity_7:\n      entity_id: \"<YOUR_ENTITY>\"\n      icon: \"mdi:YOUR_ICON\" #OPTIONAL\n      name: \"YOUR_NAME\" #OPTIONAL\n
Template Code card_welcome_scenes.yaml
---\ncard_welcome_scenes:\n  variables:\n    ulm_weather: \"[[[ return variables.ulm_weather]]]\"\n    ulm_language: \"[[[ return hass['language']; ]]]\"\n    entity_1:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_2:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_3:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_4:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_5:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_6:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_7:\n      entity_id: \"\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n  template:\n    - \"ulm_language_variables\"\n    - \"ulm_translation_engine\"\n  show_icon: false\n  show_name: false\n  show_label: true\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){\n              return \"\\'item1\\' \\'item2\\' \";\n            } else {\n              return \"\\'item1\\' \\'item2\\' \\'item3\\' \\'item4\\'\";\n            }\n          ]]]\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n      - row-gap: \"0px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"10px\"\n    custom_fields:\n      item3:\n        - display: >\n            [[[\n              if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){\n                return \"none\";\n              } else {\n                return \"block\";\n              }\n            ]]]\n      item4:\n        - display: >\n            [[[\n              if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){\n                return \"none\";\n              } else {\n                return \"block\";\n              }\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_topbar_welcome\"\n        variables:\n          ulm_card_welcome_scenes_collapse: \"[[[ return variables.ulm_card_welcome_scenes_collapse ]]]\"\n          ulm_weather: \"[[[ return variables.ulm_weather]]]\"\n          ulm_language: \"[[[ return variables.ulm_language ]]]\"\n        styles:\n          card:\n            - border-radius: \"none\"\n            - box-shadow: \"none\"\n            - padding: \"4px\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        show_icon: false\n        show_label: false\n        show_name: true\n        show_entity_picture: false\n        name: |\n          [[[\n            var today = new Date();\n            var time = today.getHours()\n            let welcome = '';\n            if (time >= '18'){\n              welcome = variables.ulm_evening;\n            } else if (time >= '12'){\n              welcome = variables.ulm_afternoon;\n            } else if (time >= '5'){\n              welcome = variables.ulm_morning;\n            } else {\n              welcome = variables.ulm_hello;\n            }\n            return welcome + ', ' + '   <br>' + user.name + '!';\n          ]]]\n        styles:\n          name:\n            - align-self: \"start\"\n            - justify-self: \"start\"\n            - font-weight: \"bold\"\n            - font-size: \"24px\"\n            - margin-left: \"16px\"\n          grid:\n            - grid-template-areas: \"'i n' 'i l'\"\n            - grid-template-columns: \"min-content auto\"\n            - grid-template-rows: \"min-content min-content\"\n            - text-align: \"start\"\n          card:\n            - box-shadow: \"none\"\n            - padding-bottom: \"8px\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        show_icon: true\n        show_label: true\n        show_name: true\n        show_entity_picture: false\n        name: \"[[[ return variables.ulm_translation_scenes ]]]\"\n        icon: \"mdi:dots-vertical\"\n        styles:\n          icon:\n            - height: \"20px\"\n            - filter: \"opacity(50%)\"\n          name:\n            - align-self: \"start\"\n            - justify-self: \"start\"\n            - font-weight: \"bold\"\n            - font-size: \"18px\"\n            - margin-left: \"16px\"\n          grid:\n            - grid-template-areas: \"'n i'\"\n            - grid-template-columns: \"6fr 1fr\"\n            - grid-template-rows: \"min-content min-content\"\n            - text-align: \"start\"\n          card:\n            - box-shadow: \"none\"\n            - padding-bottom: \"0px\"\n            - bottom: \"10px\"\n    item4:\n      card:\n        type: \"custom:button-card\"\n        template: >\n          [[[\n            if(variables?.entity_1?.entity_id != \"\"){\n              return 'card_scenes_welcome'\n            } else {\n              return 'card_scenes_welcome_auto'\n            }\n          ]]]\n        styles:\n          card:\n            - border-radius: \"none\"\n            - box-shadow: \"none\"\n            - padding: \"4px\"\n        variables:\n          entity_1: \"[[[ return variables.entity_1]]]\"\n          entity_2: \"[[[ return variables.entity_2]]]\"\n          entity_3: \"[[[ return variables.entity_3]]]\"\n          entity_4: \"[[[ return variables.entity_4]]]\"\n          entity_5: \"[[[ return variables.entity_5]]]\"\n          entity_6: \"[[[ return variables.entity_6]]]\"\n          entity_7: \"[[[ return variables.entity_7]]]\"\ncard_title_welcome:\n  tap_action:\n    action: \"none\"\n  show_icon: false\n  show_label: true\n  show_name: true\n  styles:\n    card:\n      - background-color: \"rgba(0,0,0,0)\"\n      - box-shadow: \"none\"\n      - height: \"auto\"\n      - width: \"auto\"\n      - margin-top: \"-10px\"\n      - margin-left: \"16px\"\n      - margin-bottom: \"-15px\"\n    grid:\n      - grid-template-areas: \"'n' 'l'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n    name:\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"20px\"\n    label:\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"1rem\"\n      - opacity: \"0.4\"\n\n# pill\ncard_scenes_pill_welcome:\n  show_icon: false\n  show_label: false\n  show_name: false\n  state:\n    - operator: \"template\"\n      value: >\n        [[[\n          return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state)\n        ]]]\n      styles:\n        card:\n          - overflow: \"visible\"\n          - box-shadow: \"none\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"min-content\"\n      - grid-template-rows: \"1fr 1fr\"\n      - row-gap: \"12px\"\n      - justify-items: \"center\"\n      - column-gap: \"auto\"\n    card:\n      - border-radius: \"50px\"\n      - place-self: \"center\"\n      - width: \"52px\"\n      - height: \"84px\"\n      - box-shadow: >\n          [[[\n            if (hass.themes.darkMode){\n              return \"0px 2px 4px 0px rgba(0,0,0,0.80)\";\n            } else {\n              return \"var(--box-shadow)\";\n            }\n          ]]]\n  color: \"var(--google-grey)\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        show_icon: true\n        show_label: false\n        show_name: false\n        tap_action:\n          action: >\n            [[[\n              if(variables?.nav_path){\n                return \"navigate\"\n              }\n              return \"perform-action\"\n            ]]]\n          perform_action: >\n            [[[\n              if(entity?.entity_id.startsWith(\"scene.\")){\n                return \"scene.turn_on\"\n              }\n              if(entity?.entity_id.startsWith(\"media_player.\")){\n                return \"media_player.media_play_pause\"\n              }\n              if(entity?.entity_id.startsWith(\"input_select.\")){\n                return \"input_select.select_option\"\n              }\n              if(entity?.entity_id.startsWith(\"script.\")){\n                return entity.entity_id\n              }\n              return \"homeassistant.toggle\"\n            ]]]\n          navigation_path: \"[[[ return variables?.nav_path; ]]]\"\n          target: |\n            [[[\n              if (variables.service_data){\n                return variables.service_data\n              }\n              var obj;\n              if(typeof(entity) !== 'undefined' && entity !== undefined){\n                if( entity?.entity_id.startsWith(\"input_select.\") )\n                  obj = { entity_id: entity?.entity_id, option: variables.state };\n                else\n                  obj = { entity_id: entity?.entity_id };\n                return obj;\n              }\n            ]]]\n        styles:\n          grid:\n            - grid-template-areas: \"i\"\n          icon:\n            - color: >\n                [[[\n                  var color = variables?.color\n                  if(hass.themes.darkMode){var color = \"#FAFAFA\";}\n                  return `rgba(var(--color-${color}), 1)`;\n                ]]]\n            - width: \"20px\"\n          img_cell:\n            - background-color: >\n                [[[\n                  var color = variables?.color\n                  var opacity = '0.20'\n                  if(hass.themes.darkMode){var opacity = '1'}\n                  return `rgba(var(--color-${color}), ${opacity})`;\n                ]]]\n            - border-radius: \"50%\"\n            - width: \"42px\"\n            - height: \"42px\"\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"50px\"\n            - padding: \"5px\"\n        state:\n          - operator: \"template\"\n            value: >\n              [[[\n                return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state)\n              ]]]\n            styles:\n              card:\n                - overflow: \"visible\"\n                - box-shadow: >\n                    [[[\n                      if (hass.themes.darkMode){\n                        return \"0px 2px 4px 0px rgba(0,0,0,0.80)\";\n                      } else {\n                        return \"var(--box-shadow)\";\n                      }\n                    ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        show_icon: false\n        show_label: false\n        tap_action:\n          action: >\n            [[[\n              if(variables?.nav_path){\n                return \"navigate\"\n              }\n              return \"perform-action\"\n            ]]]\n          navigation_path: \"[[[ return variables?.nav_path; ]]]\"\n          perform_action: >\n            [[[\n              if(entity?.entity_id.startsWith(\"scene.\")){\n                return \"scene.turn_on\"\n              }\n              if(entity?.entity_id.startsWith(\"media_player.\")){\n                return \"media_player.media_play_pause\"\n              }\n              if(entity?.entity_id.startsWith(\"input_select.\")){\n                return \"input_select.select_option\"\n              }\n              if(entity?.entity_id.startsWith(\"script.\")){\n                return entity.entity_id\n              }\n              return \"homeassistant.toggle\"\n            ]]]\n          target: |\n            [[[\n              var obj;\n              if(typeof(entity) !== 'undefined' && entity !== undefined){\n                if( entity?.entity_id.startsWith(\"input_select.\") )\n                  obj = { entity_id: entity?.entity_id };\n                return obj;\n              }\n            ]]]\n          data: |\n            [[[\n              if (variables.service_data){\n                return variables.service_data\n              }\n              var obj;\n              if(typeof(entity) !== 'undefined' && entity !== undefined){\n                if( entity?.entity_id.startsWith(\"input_select.\") )\n                  obj = { option: variables.state };\n                return obj;\n              }\n            ]]]\n        styles:\n          grid:\n            - grid-template-areas: \"n\"\n          name:\n            - justify-self: \"center\"\n            - font-weight: \"bold\"\n            - font-size: \"9.5px\"\n            - padding-bottom: \"7px\"\n            - overflow: \"[[[return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state) ? 'visible' : 'hidden']]]\"\n          card:\n            - box-shadow: \"none\"\n            - padding: \"0px 5px 5px 5px\"\n            - margin-top: \"-5px\"\n            - border-radius: \"50px\"\n            - overflow: \"[[[return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state) ? 'visible' : 'hidden']]]\"\ncard_topbar_welcome:\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: \"item1 item2 item3\"\n      - justify-content: \"space-between\"\n      - display: \"flex\"\n    card:\n      - border-radius: \"none\"\n      - box-shadow: \"none\"\n      - padding: \"12px\"\n      - background: \"none\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"chips\"\n        entity: \"[[[ return variables.ulm_card_welcome_scenes_collapse ]]]\"\n        icon: \"mdi:chevron-up\"\n        show_icon: true\n        styles:\n          grid:\n            - grid-template-areas: \"'i'\"\n        state:\n          - value: \"on\"\n            icon: \"mdi:chevron-down\"\n            styles:\n              icon:\n                - color: \"rgb(var(--color-theme))\"\n        tap_action:\n          action: \"perform-action\"\n          perform_action: \"input_boolean.toggle\"\n          target:\n            entity_id: \"[[[ return variables.ulm_card_welcome_scenes_collapse ]]]\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"chip_weather_date\"\n        entity: \"[[[ return variables.ulm_weather]]]\"\n        variables:\n          ulm_weather: \"[[[ return variables.ulm_weather ]]]\"\n          ulm_language: \"[[[ return variables.ulm_language ]]]\"\n        styles:\n          card:\n            - width: \"100px\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        tap_action:\n          action: \"navigate\"\n          navigation_path: \"/config/dashboard\"\n        template: \"chip_mdi_icon_only\"\n        variables:\n          ulm_chip_mdi_icon_only_icon: \"mdi:cog-outline\"\n        styles:\n          card:\n            - align-self: \"end\"\n# auto-entities\ncard_scenes_welcome_auto:\n  show_icon: false\n  show_name: true\n  show_label: false\n  variables:\n    colors: >\n      [[[\n        var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n        var color = colors[Math.floor(Math.random() * colors.length)];\n        return color;\n      ]]]\n  styles:\n    grid:\n      - grid-template-areas: \"item1\"\n      - display: \"flex\"\n      - justify-content: \"center\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:auto-entities\"\n        card:\n          type: \"grid\"\n          columns: 5\n          square: false\n        card_param: \"cards\"\n        sort:\n          count: 5\n        filter:\n          include:\n            - domain: \"light\"\n              options:\n                type: \"custom:button-card\"\n                template: \"card_scenes_pill_welcome\"\n                custom_fields:\n                  item1:\n                    card:\n                      type: \"custom:button-card\"\n                      entity: \"this.entity_id\"\n                      styles:\n                        icon:\n                          - color: >\n                              [[[\n                                var color = variables.colors\n                                if(hass.themes.darkMode){var color = \"#FAFAFA\";}\n                                return `rgba(var(--color-${color}), 1)`;\n                              ]]]\n                          - width: \"20px\"\n                        img_cell:\n                          - background-color: >\n                              [[[\n                                var color = variables.colors\n                                var opacity = '0.20'\n                                if(hass.themes.darkMode){var opacity = '1'}\n                                return `rgba(var(--color-${color}), ${opacity})`;\n                              ]]]\n                  item2:\n                    card:\n                      type: \"custom:button-card\"\n                      entity: \"this.entity_id\"\n
"},{"location":"usage/chips/chip_alarm/","title":"Alarm Chip","text":""},{"location":"usage/chips/chip_alarm/#description","title":"Description","text":"

Alarm chip that displays alarm armed and disarmed state with colored icon.

"},{"location":"usage/chips/chip_alarm/#variables","title":"Variables","text":"Variable Default Required Notes entity entity of your alarm_control_panel"},{"location":"usage/chips/chip_alarm/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: chip_alarm\n  entity: alarm_control_panel.alarm\n
Template Code chip_alarm.yaml
---\n### chip_alarm ###\nchip_alarm:\n  template:\n    - \"chip_icon_label\"\n    - \"ulm_translation_engine\"\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  icon: |\n    [[[\n      var state = entity.state.toLowerCase();\n      var alarm_icon = {\n        \"default\": \"mdi:shield-outline\",\n        \"armed_home\": \"mdi:shield-home\",\n        \"armed_away\": \"mdi:shield-lock\",\n        \"armed_night\": \"mdi:shield-moon\",\n        \"disarmed\": \"mdi:shield-off\",\n        \"arming\": \"mdi:shield\",\n        \"triggered\": \"mdi:shield-alert\"\n      }\n      return (alarm_icon[state] || alarm_icon[\"default\"]);\n    ]]]\n  styles:\n    icon:\n      - color: |\n          [[[\n            var state = entity.state.toLowerCase();\n            var alarm_color = {\n              \"default\": \"var(--google-yellow)\",\n              \"armed_home\": \"var(--google-red)\",\n              \"armed_away\": \"var(--google-red)\",\n              \"armed_night\": \"var(--google-red)\",\n              \"disarmed\": \"var(--google-green)\",\n              \"arming\": \"var(--google-yellow)\",\n              \"triggered\": \"var(--google-red)\"\n            }\n            return (alarm_color[state] || alarm_color[\"default\"]);\n          ]]]\n
"},{"location":"usage/chips/chip_back/","title":"Back Chip","text":""},{"location":"usage/chips/chip_back/#description","title":"Description","text":"

This is a back-button, primarily used if you switch between views and want a convenient way back.

"},{"location":"usage/chips/chip_back/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_back_path /ui-lovelace-minimalist/0 Set the navigation path to your default view, eg. ui-lovelace-minimalist/home or lovelace. Not required if you run a default installation with HACS."},{"location":"usage/chips/chip_back/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: chip_back\n  variables:\n    ulm_chip_back_path: /ui-lovelace-minimalist/home\n
Template Code chip_back.yaml
---\n### Chip Back ###\nchip_back:\n  template: \"chips\"\n  variables:\n    ulm_chip_back_path: >\n      [[[\n        return hass[\"panelUrl\"];\n      ]]]\n  tap_action:\n    action: \"navigate\"\n    navigation_path: \"[[[ return variables.ulm_chip_back_path; ]]]\"\n  show_icon: true\n  icon: \"mdi:arrow-left\"\n  styles:\n    grid:\n      - grid-template-areas: \"'i'\"\n
"},{"location":"usage/chips/chip_icon_double_state/","title":"Icon Double State Chip","text":""},{"location":"usage/chips/chip_icon_double_state/#description","title":"Description","text":"

This chip displays can display an icon and value of two entities.

"},{"location":"usage/chips/chip_icon_double_state/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_icon_double_state_icon This is the icon to show. See icons to read more about the used unicode emojis. ulm_chip_icon_double_state_entity_1 This is the entity to display in first position ulm_chip_icon_double_state_entity_2 This is the entity to display in second position ulm_chip_navigate_path The path to your view"},{"location":"usage/chips/chip_icon_double_state/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: chip_icon_double_state\n  variables:\n    ulm_chip_icon_double_state_icon: '\ud83d\udcbb'\n    ulm_chip_icon_double_state_entity_1: sensor.nas_disk_used\n    ulm_chip_icon_double_state_entity_2: sensor.nas_cpu_load\n    ulm_chip_navigate_path: /lovelace-minimalist-ui/0\n
Template Code chip_icon_double_state.yaml
---\n### Chip Icon Double State ###\nchip_icon_double_state:\n  template: \"chips\"\n  tap_action:\n    action: \"navigate\"\n    navigation_path: \"[[[ return variables.ulm_chip_navigate_path; ]]]\"\n  triggers_update:\n    - \"[[[ return variables.ulm_chip_icon_double_state_entity_1 ]]]\"\n    - \"[[[ return variables.ulm_chip_icon_double_state_entity_2 ]]]\"\n  label: |\n    [[[\n      var icon = \"\u2754\";\n      if (variables.ulm_chip_icon_double_state_icon){\n        var icon = variables.ulm_chip_icon_double_state_icon;\n      }\n      var state1 = \"\";\n      if (states[variables.ulm_chip_icon_double_state_entity_1].state){\n        var state1 = helpers.localize(states[variables.ulm_chip_icon_double_state_entity_1])\n      }\n      var state2 = \"\";\n      if (states[variables.ulm_chip_icon_double_state_entity_2].state){\n        var state2 = helpers.localize(states[variables.ulm_chip_icon_double_state_entity_2])\n      }\n      return icon + \" \" + state1 + \" \u2022 \" + state2;\n    ]]]\n
"},{"location":"usage/chips/chip_icon_label/","title":"Icon Label Chip","text":""},{"location":"usage/chips/chip_icon_label/#description","title":"Description","text":"

This chip displays an icon using mdi and a label.

"},{"location":"usage/chips/chip_icon_label/#variables","title":"Variables","text":"Variable Default Required Notes icon Icon to display label Label to display"},{"location":"usage/chips/chip_icon_label/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: chip_icon_label\n  label: Label\n  icon: 'mdi:heart'\n
Template Code chip_icon_label.yaml
---\n## Chips Icon Label ###\nchip_icon_label:\n  template: \"chips\"\n  show_icon: true\n  size: \"100%\"\n  styles:\n    card:\n      - padding-top: \"6px\"\n      - padding-button: \"6px\"\n      - padding-left: \"12px\"\n    grid:\n      - grid-template-areas: \"'i l'\"\n      - grid-template-columns: \"max_content auto\"\n      - grid-template-rows: \"min-content\"\n    img_cell:\n      - place-self: \"center\"\n      - width: \"14px\"\n      - height: \"24px\"\n    label:\n      - font-size: \"12px\"\n      - margin-left: \"0px\"\n      - margin-top: \"0px\"\n
"},{"location":"usage/chips/chip_icon_only/","title":"Icon Only Chip","text":""},{"location":"usage/chips/chip_icon_only/#description","title":"Description","text":"

This chip displays just an icon.

"},{"location":"usage/chips/chip_icon_only/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_icon_only This is the icon to show. See icons to read more about the used unicode emojis."},{"location":"usage/chips/chip_icon_only/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: chip_icon_only\n  variables:\n    ulm_chip_icon_only: '\u2764\ufe0f'\n
Template Code chip_icon_only.yaml
---\n### Chip Icon Only ###\nchip_icon_only:\n  template: \"chips\"\n  label: |\n    [[[\n      var icon = \"\u2754\";\n      if (variables.ulm_chip_icon_only){\n        var icon = variables.ulm_chip_icon_only;\n      }\n      return icon;\n    ]]]\n
"},{"location":"usage/chips/chip_icon_state/","title":"Icon State Chip","text":""},{"location":"usage/chips/chip_icon_state/#description","title":"Description","text":"

This chip displays an icon and a label, where the label can be any state of a sensor you configure.

"},{"location":"usage/chips/chip_icon_state/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_icon_state_icon This is the icon to show. See See icons to read more about the used unicode emojis. ulm_chip_icon_state_entity Enable background"},{"location":"usage/chips/chip_icon_state/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: chip_icon_state\n  variables:\n    ulm_chip_icon_state_icon: '\ud83d\udecf\ufe0f'\n    ulm_chip_icon_state_entity: sensor.bed_occupancy\n
Template Code chip_icon_state.yaml
---\n### Chip Icon State ###\nchip_icon_state:\n  template: \"chips\"\n  triggers_update:\n    - \"[[[ return variables.ulm_chip_icon_state_entity ]]]\"\n  label: |\n    [[[\n      var icon = \"\u2754\";\n      if (variables.ulm_chip_icon_state_icon){\n        var icon = variables.ulm_chip_icon_state_icon;\n      }\n      var state = \"\";\n      if (states[variables.ulm_chip_icon_state_entity].state){\n        var state = helpers.localize(states[variables.ulm_chip_icon_state_entity]);\n      }\n      return icon + \" \" + state;\n    ]]]\n
"},{"location":"usage/chips/chip_mdi_icon_only/","title":"Mdi:icon Only Chip","text":""},{"location":"usage/chips/chip_mdi_icon_only/#description","title":"Description","text":"

This chip displays an icon using mdi.

"},{"location":"usage/chips/chip_mdi_icon_only/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_mdi_icon_only_entity entity to link ulm_chip_mdi_icon_only_icon mdi:icon to display ulm_chip_mdi_icon_only_icon_color primary-text-color Allow to change icon color"},{"location":"usage/chips/chip_mdi_icon_only/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: chip_mdi_icon_only\n  variables:\n    ulm_chip_mdi_icon_only_entity: binary_sensor.bedroom_master_closed_door\n    ulm_chip_mdi_icon_only_icon: mdi:door\n
Template Code chip_mdi_icon_only.yaml
---\n### Chip Mdi Icon Only ###\nchip_mdi_icon_only:\n  template: \"chips\"\n  tap_action:\n    action: \"more-info\"\n    entity: \"[[[ return variables.ulm_chip_mdi_icon_only_entity ]]]\"\n  show_icon: true\n  icon: \"[[[ return variables.ulm_chip_mdi_icon_only_icon ]]]\"\n  styles:\n    grid:\n      - grid-template-areas: \"'i'\"\n    icon:\n      - color: \"[[[ return variables.ulm_chip_mdi_icon_only_icon_color; ]]]\"\n
"},{"location":"usage/chips/chip_mdi_icon_state/","title":"Mdi:icon State Chip","text":""},{"location":"usage/chips/chip_mdi_icon_state/#description","title":"Description","text":"

This chip displays an icon using mdi and state of the chosen entity.

"},{"location":"usage/chips/chip_mdi_icon_state/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_mdi_icon_state_entity entity to link ulm_chip_mdi_icon_state_icon mdi:icon to display ulm_chip_mdi_icon_state_icon_color primary-text-color Allow to change icon color ulm_chip_mdi_icon_state_label_color primary-text-color Allow to change label color"},{"location":"usage/chips/chip_mdi_icon_state/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: chip_mdi_icon_state\n  variables:\n    ulm_chip_mdi_icon_state_entity: light.kitchen_lights\n    ulm_chip_mdi_icon_state_icon: mdi:lightbulb\n
Template Code chip_mdi_icon_state.yaml
---\n### Chip Mdi Icon State ###\nchip_mdi_icon_state:\n  template: \"chips\"\n  tap_action:\n    action: \"more-info\"\n  entity: \"[[[ return variables.ulm_chip_mdi_icon_state_entity ]]]\"\n  triggers_update:\n    - \"[[[ return variables.ulm_chip_mdi_icon_state_entity ]]]\"\n  show_icon: true\n  icon: \"[[[ return variables.ulm_chip_mdi_icon_state_icon ]]]\"\n  label: |\n    [[[\n      var state = \"\";\n      if (states[variables.ulm_chip_mdi_icon_state_entity].state){\n        var state = helpers.localize(entity)\n      }\n      return state;\n    ]]]\n  styles:\n    grid:\n      - grid-template-areas: \"'i l'\"\n    icon:\n      - color: \"[[[ return variables.ulm_chip_mdi_icon_state_icon_color; ]]]\"\n    label:\n      - color: \"[[[ return variables.ulm_chip_mdi_icon_state_label_color; ]]]\"\n
"},{"location":"usage/chips/chip_navigate/","title":"Navigate Chip","text":""},{"location":"usage/chips/chip_navigate/#description","title":"Description","text":"

This chip is a menu button with an icon using mdi.

"},{"location":"usage/chips/chip_navigate/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_navigate_path path to navigate to ulm_chip_navigate_icon Icon to use ulm_chip_navigate_icon_color primary-text-color Allow to change icon color ulm_chip_navigate_label_color primary-text-color Allow to change label color"},{"location":"usage/chips/chip_navigate/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: chip_navigate\n  label: 'Living Room'\n  variables:\n    ulm_chip_navigate_path: /lovelace-minimalist-test/\n    ulm_chip_navigate_icon: mdi:sofa\n
Template Code chip_navigate.yaml
---\n### Chip Navigate ###\nchip_navigate:\n  template: \"chips\"\n  tap_action:\n    action: \"navigate\"\n    navigation_path: \"[[[ return variables.ulm_chip_navigate_path; ]]]\"\n  show_icon: true\n  icon: \"[[[ return variables.ulm_chip_navigate_icon; ]]]\"\n  styles:\n    grid:\n      - grid-template-areas: \"'i l'\"\n    icon:\n      - color: \"[[[ return variables.ulm_chip_navigate_icon_color; ]]]\"\n    label:\n      - color: \"[[[ return variables.ulm_chip_navigate_label_color; ]]]\"\n
"},{"location":"usage/chips/chip_power_consumption/","title":"Power Consumption Chip","text":""},{"location":"usage/chips/chip_power_consumption/#description","title":"Description","text":"

This chip shows you the electric consumption from a sensor. Configurable to show power (kWh) or price (currency).

"},{"location":"usage/chips/chip_power_consumption/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_electric_consumption Variable / Entry Example Required ulm_chip_electric_consumption sensor.my_electric_power_consumption true. This is your consumed energy. This is the sensor, that shows how many kWhs are consumed. ulm_chip_electric_price This is the price for your consumed energy, if you have such a sensor. This should be a sensor that shows a price in your defined currency. If this variable is not set, the chip shows only the kWhs! If this variable is set the chip shows the price for the consumed energy!"},{"location":"usage/chips/chip_power_consumption/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: chip_power_consumption\n  variables:\n    ulm_chip_electric_consumption: sensor.my_electric_power_consumption\n    ulm_chip_electric_price: sensor.my_electric_power_price\n
Template Code chip_power_consumption.yaml
---\n### Chip Power Consumption ###\nchip_power_consumption:\n  template:\n    - \"chips\"\n    - \"ulm_translation_engine\"\n  triggers_update:\n    - \"[[[ return variables.ulm_chip_electric_price ]]]\"\n    - \"[[[ return variables.ulm_chip_electric_consumption ]]]\"\n  label: |\n    [[[\n      var amount = variables.ulm_chip_electric_price != \"\" ? true : false\n      if (amount){\n        return \"\u26a1 \" +  states[variables.ulm_chip_electric_price].state + variables.ulm_translation_currency;\n      } else {\n        return \"\u26a1 \" +  helpers.localize(states[variables.ulm_chip_electric_consumption]);\n      }\n    ]]]\n
"},{"location":"usage/chips/chip_presence_detection/","title":"Presence Detection Chip","text":""},{"location":"usage/chips/chip_presence_detection/#description","title":"Description","text":"

This chip shows you the actual presence in your home. Shows residents and guests (guests only if one or more).

"},{"location":"usage/chips/chip_presence_detection/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_presence_counter_residents This is the sensor that shows your residents counter. ulm_chip_presence_counter_guests This is the sensor that shows your guests counter."},{"location":"usage/chips/chip_presence_detection/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: chip_presence_detection\n  variables:\n    ulm_chip_presence_counter_residents: sensor.people_home\n    ulm_chip_presence_counter_guests: sensor.guests_home\n
Template Code chip_presence_detection.yaml
---\n### Chip Presence Detection ###\nchip_presence_detection:\n  template: \"chips\"\n  triggers_update:\n    - \"[[[ return variables.ulm_chip_presence_counter_residents ]]]\"\n    - \"[[[ return variables.ulm_chip_presence_counter_guests ]]]\"\n  label: |\n    [[[\n      if (!!variables.ulm_chip_presence_counter_guests) {\n        return \"\ud83c\udfe0 \" +  states[variables.ulm_chip_presence_counter_residents].state + \" / \" + states[variables.ulm_chip_presence_counter_guests].state;\n      } else {\n        return \"\ud83c\udfe0 \" +  states[variables.ulm_chip_presence_counter_residents].state;\n      }\n    ]]]\n
"},{"location":"usage/chips/chip_temperature/","title":"Temperature Chip","text":""},{"location":"usage/chips/chip_temperature/#description","title":"Description","text":"

This chip is to display a weather icon together with the outside and inside temperature, where the latter is optional.

"},{"location":"usage/chips/chip_temperature/#variables","title":"Variables","text":"Variable Default Required Notes ulm_chip_temperature_outside This is the sensor that provides your outside temperature. If you want to use eg. a temperature value from your weather provider, you'd need to setup a template sensor first. The state of this sensor should represent a numeric value (\u00b0C or \u00b0F doesn't matter). ulm_chip_temperature_inside This is the sensor that provides your inside temperature. The state of this sensor should represent a numeric value (\u00b0C or \u00b0F doesn't matter). ulm_chip_temperature_weather This is the sensor for your weather entity for showing current weather conditions"},{"location":"usage/chips/chip_temperature/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: chip_temperature\n  variables:\n    ulm_chip_temperature_inside: sensor.my_temperature_sensor_inside\n    ulm_chip_temperature_outside: sensor.my_temperature_sensor_outside\n    ulm_chip_temperature_weather: weather.my_weather_provider\n
Template Code chip_temperature.yaml
---\n### Chip Temperature ###\nchip_temperature:\n  template:\n    - \"chips\"\n    - \"ulm_actions_card\"\n  variables:\n    ulm_card_weather_enable_popup: false\n  triggers_update:\n    - \"[[[ return variables.ulm_chip_temperature_weather ]]]\"\n    - \"[[[ return variables.ulm_chip_temperature_outside ]]]\"\n    - \"[[[ return variables.ulm_chip_temperature_inside ]]]\"\n  label: |\n    [[[\n      var state = states[variables.ulm_chip_temperature_weather].state;\n      var icon = {\n        \"clear-night\": \"\ud83c\udf19\",\n        \"cloudy\": \"\u2601\ufe0f\",\n        \"exceptional\": \"\ud83c\udf1e\",\n        \"fog\": \"\ud83c\udf2b\ufe0f\",\n        \"hail\": \"\u26c8\ufe0f\",\n        \"lightning\": \"\u26a1\",\n        \"lightning-rainy\": \"\u26c8\ufe0f\",\n        \"partlycloudy\": \"\u26c5\",\n        \"pouring\": \"\ud83c\udf27\ufe0f\",\n        \"rainy\": \"\ud83d\udca7\",\n        \"snowy\": \"\u2744\ufe0f\",\n        \"snowy-rainy\": \"\ud83c\udf28\ufe0f\",\n        \"sunny\": \"\u2600\ufe0f\",\n        \"windy\": \"\ud83c\udf2a\ufe0f\",\n        \"default\": \"\ud83c\udf21\ufe0f\"\n        }\n      function convertTemperature(temp) {\n        if (parseFloat(temp) == temp && Math.floor(temp) != temp) {\n            return parseFloat(temp).toFixed(1);\n        }\n        return temp;\n      }\n      var outside_temp = states[variables.ulm_chip_temperature_outside].state;\n      var inside_temp = null;\n      if (variables.ulm_chip_temperature_inside) {\n        inside_temp = states[variables.ulm_chip_temperature_inside].state;\n      }\n      var label = (icon[state] || icon[\"default\"]) + \" \" + convertTemperature(outside_temp) + \"\u00b0\";\n      if (inside_temp) {\n        label = label + \" / \" + convertTemperature(inside_temp) + \"\u00b0\";\n      }\n      return label;\n    ]]]\n
"},{"location":"usage/custom_cards/custom_card_afvalophaling/","title":"Afvalophaling Custom-card","text":""},{"location":"usage/custom_cards/custom_card_afvalophaling/#custom-card-afvalophaling","title":"Custom-card \"Afvalophaling\"","text":"

!! Attention !!

This card can only be used if the integration \"Home-Assistant-Sensor-Afvalbeheer\" from pippyn is installed.

"},{"location":"usage/custom_cards/custom_card_afvalophaling/#credits","title":"Credits","text":"
  • Author: AndyVRD - 2021
  • Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_afvalophaling/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_afvalophaling/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template:\n    - card_afvalophaling\n  variables:\n    ulm_card_ophaling_vandaag: \"sensor.limburg_net_afvalophaling_vandaag\"\n    ulm_card_ophaling_morgen: \"sensor.limburg_net_afvalophaling_morgen\"\n    ulm_card_datum_gft: \"sensor.limburg_net_afvalophaling_gft\"\n    ulm_card_datum_pmd: \"sensor.limburg_net_afvalophaling_pmd\"\n    ulm_card_datum_rest: \"sensor.limburg_net_afvalophaling_restafval\"\n    ulm_card_datum_papier: \"sensor.limburg_net_afvalophaling_papier\"\n
"},{"location":"usage/custom_cards/custom_card_afvalophaling/#requirements","title":"Requirements","text":"

Integration from HACS: \"Home-Assistant-Sensor-Afvalbeheer\" from pippyn

"},{"location":"usage/custom_cards/custom_card_afvalophaling/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_card_ophaling_vandaag sensor.limburg_net_afvalophaling_vandaag yes Collection(s) for today ulm_card_ophaling_morgen sensor.limburg_net_afvalophaling_morgen yes Collection(s) for tomorrow ulm_card_datum_gft sensor.limburg_net_afvalophaling_gft yes GFT collection date ulm_card_datum_pmd sensor.limburg_net_afvalophaling_pmd yes PMD collection date ulm_card_datum_rest sensor.limburg_net_afvalophaling_rest yes Restafval collection date ulm_card_datum_papier sensor.limburg_net_afvalophaling_papier yes Papier collection date Template Code card_afvalophaling.yaml
---\ncard_afvalophaling:\n  template:\n    - \"ulm_language_variables\"\n    - \"icon_info_afvalophaling\"\n    - \"custom_colors\"\n  triggers_update: \"all\"\n  icon: \"mdi:delete\"\n  name: >\n        [[[\n          if((variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state !== 'Geen') ||\n            (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state !== 'Geen')) {\n            return variables.ulm_ophaling\n          } else {\n            return variables.ulm_volgende_ophaling\n          }\n        ]]]\n  label: |\n        [[[\n          if(variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state !== 'Geen'){\n            return states[variables.ulm_card_ophaling_vandaag].state\n          }\n\n          if(variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state !== 'Geen'){\n            return states[variables.ulm_card_ophaling_morgen].state\n          }\n\n          var collections = [];\n          if(variables.ulm_card_datum_rest){\n            collections.push(\"Restafval \" + ' \u2022 ' + states[variables.ulm_card_datum_rest].state);\n          }\n\n          if(variables.ulm_card_datum_papier){\n            collections.push(\"Papier \" + ' \u2022 ' + states[variables.ulm_card_datum_papier].state);\n          }\n\n          if(variables.ulm_card_datum_pmd){\n            collections.push(\"PMD \" + ' \u2022 ' + states[variables.ulm_card_datum_pmd].state);\n          }\n\n          if(variables.ulm_card_datum_gft){\n            collections.push(\"GFT \" + ' \u2022 ' + states[variables.ulm_card_datum_gft].state);\n          }\n\n          if(variables.ulm_card_datum_glas){\n            collections.push(\"Glas \" + ' \u2022 ' + states[variables.ulm_card_datum_glas].state);\n          }\n\n          return collections.join('<br>');\n        ]]]\ncustom_colors:\n  state:\n    - styles:\n        icon:\n          - color: \"rgba(var(--color-green),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-green), 0.2)\"\n      value: >\n        [[[\n          return (variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state !== \"Geen\") || (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state !== \"Geen\")\n        ]]]\n      icon: \"mdi:recycle\"\n      operator: \"template\"\n    - styles:\n        icon:\n          - color: \"rgba(var(--color-blue),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-blue), 0.2)\"\n      value: >\n        [[[\n          return (variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state === \"glas\") || (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state === \"glas\")\n        ]]]\n      icon: \"mdi:bottle-wine-outline\"\n      operator: \"template\"\nicon_info_afvalophaling:\n  color: \"var(--google-grey)\"\n  show_icon: \"true\"\n  show_label: \"true\"\n  show_name: \"true\"\n  state:\n    - value: \"unavailable\"\n      styles:\n        icon:\n          - color: \"rgba(var(--color-red),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-red), 0.2)\"\n        custom_fields:\n          notification:\n            - border-radius: \"50%\"\n            - position: \"absolute\"\n            - left: \"42px\"\n            - top: \"10px\"\n            - height: \"16px\"\n            - width: \"16px\"\n            - font-size: \"12px\"\n            - line-height: \"14px\"\n            - background-color: >\n                [[[\n                  return \"rgba(var(--color-red),1)\";\n                ]]]\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n    label:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n      - text-align: \"start\"\n    name:\n      - align-self: \"end\"\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n      - margin-left: \"12px\"\n      - margin-bottom: \"4px\"\n    state:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - width: \"42px\"\n      - height: \"42px\"\n    grid:\n      - grid-template-areas: \"'i n' 'i l'\"\n      - grid-template-columns: \"min-content auto\"\n      - grid-template-rows: \"min-content min-content\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    notification: >\n      [[[\n        if ((variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state =='unavailable') ||\n          (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state =='unavailable')) {\n          return `<ha-icon icon=\"mdi:help\" style=\"width: 12px; height: 12px; color: var(--primary-background-color);\"></ha-icon>`\n        }\n      ]]]\n  size: \"20px\"\n
"},{"location":"usage/custom_cards/custom_card_alarm_time/","title":"Alarm Time Custom-card","text":""},{"location":"usage/custom_cards/custom_card_alarm_time/#custom-card-alarm-time-card","title":"Custom-card \"Alarm Time Card\"","text":"

The card_alarm_time you can control a input_datetime entity and a boolean. This card is useful for setting alarms (e.g. wakeup alarm), as you can modify the time and toggle the state of the alarm from one card.

"},{"location":"usage/custom_cards/custom_card_alarm_time/#credits","title":"Credits","text":"

Author: benbur - 2023 Version: 1.0.0

This is built largely on top of the original Input_Datetime Card: Author: sildehoop - 2022 Version: 1.0.0

"},{"location":"usage/custom_cards/custom_card_alarm_time/#changelog","title":"Changelog","text":"1.0.0 Initial Release"},{"location":"usage/custom_cards/custom_card_alarm_time/#variables","title":"Variables","text":"Variable Example Required Default Explanation ulm_card_alarm_time_name 'Morning Alarm' no Set Custom Name ulm_card_alarm_time_icon 'mdi:alarm' no Set Custom Icon ulm_card_alarm_time_color 'green' no 'blue' Set Custom Color for Card Elements ulm_card_alarm_time_force_background_color true no false Force Background Color in Light Mode/td> ulm_card_alarm_time_collapse true no false Make card collapsible when off ulm_card_alarm_time_horizontal true no false Horizontal Mode for the Card ulm_card_alarm_time_step '30' no 15 Set Adjust Time (minutes)"},{"location":"usage/custom_cards/custom_card_alarm_time/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_alarm_time\n  entity: input_boolean.morning_alarm_toggle\n  variables:\n    ulm_card_alarm_time_datetime: input_datetime.morning_alarm_time\n    ulm_card_alarm_time_horizontal: true\n    ulm_card_alarm_time_collapse: true\n
"},{"location":"usage/custom_cards/custom_card_alarm_time/#requirements","title":"Requirements","text":"

Input DateTime Helper Input Boolean

"},{"location":"usage/custom_cards/custom_card_alarm_time/#template-code","title":"Template code","text":"Template Code custom_card_alarm_time.yaml
---\n### Card Alarm ###\ncard_alarm_time:\n  triggers_update: \"all\"\n  template:\n    - \"icon_more_info_new\"\n  variables:\n    ulm_card_alarm_time_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_card_alarm_time_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_card_alarm_time_horizontal: false\n    ulm_card_alarm_time_collapse: false\n    ulm_card_alarm_time_color: \"blue\"\n    ulm_card_alarm_time_force_background_color: false\n    ulm_card_alarm_time_step: 15\n  show_icon: false\n  show_name: false\n  show_label: false\n  state:\n    - value: \"on\"\n      styles:\n        card:\n          - background-color: >\n              [[[\n                if (variables.ulm_card_alarm_time_force_background_color || hass.themes.darkMode) {\n                  var color = variables.ulm_card_alarm_time_color;\n                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';\n                }\n              ]]]\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n              if (entity.state != \"on\" && variables.ulm_card_alarm_time_collapse) {\n                  return \"\\\"item1\\\"\";\n              }\n              if (variables.ulm_card_alarm_time_horizontal) {\n                  return \"\\\"item1 item2\\\"\";\n              }\n              return \"\\\"item1\\\" \\\"item2\\\"\";\n          ]]]\n      - grid-template-columns: >\n          [[[\n              if (variables.ulm_card_alarm_time_horizontal) {\n                  return \"1fr 1fr\";\n              }\n              return \"1fr\";\n          ]]]\n      - grid-template-rows: >\n          [[[\n              if (variables.ulm_card_alarm_time_horizontal || (entity.state != \"on\" && variables.ulm_card_alarm_time_collapse)) {\n                  return \"1fr\";\n              }\n              return \"min-content min-content\";\n          ]]]\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n    custom_fields:\n      item2:\n        - display: >\n            [[[\n              if (entity.state != \"off\") {\n                  return \"block\";\n              }\n              return \"none\";\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"[[[ return variables.ulm_card_alarm_time_icon ]]]\"\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        var color = variables.ulm_card_alarm_time_color;\n                        if (typeof entity !== \"undefined\") {\n                          if (entity.state != \"off\") {\n                              return 'rgba(var(--color-' + color + '),1)';\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.2)';\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        var color = variables.ulm_card_alarm_time_color;\n                        if (typeof entity !== \"undefined\") {\n                          if (entity.state != \"off\") {\n                              return 'rgba(var(--color-' + color + '),0.2)';\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_card_alarm_time_name ]]]\"\n              label: >\n                [[[\n                  if (entity.state == \"on\") {\n                    return \"On\";\n                  } else if (entity.state == \"off\") {\n                    return \"Off\";\n                  }\n                ]]]\n              state:\n                - value: \"on\"\n                  styles:\n                    name:\n                      - color: >\n                          [[[\n                            if (variables.ulm_card_alarm_time_force_background_color) {\n                              return 'rgb(250,250,250)';\n                            }\n                          ]]]\n                    label:\n                      - color: >\n                          [[[\n                            if (variables.ulm_card_alarm_time_force_background_color) {\n                              return 'rgb(250,250,250)';\n                            }\n                          ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        styles:\n          card:\n            - background: \"none\"\n          grid:\n            - grid-template-areas: >\n                [[[\n                    if (variables.ulm_card_alarm_time_horizontal) {\n                      return \"'item2'\";\n                    } else {\n                      return \"'item1 item2 item3'\";\n                    }\n                ]]]\n            - grid-template-columns: >\n                [[[\n                    if (variables.ulm_card_alarm_time_horizontal) {\n                      return \"1fr\";\n                    } else {\n                      return \"1fr 1fr 1fr\";\n                    }\n                ]]]\n          custom_fields:\n            item1:\n              - display: >\n                  [[[\n                    if (variables.ulm_card_alarm_time_horizontal) {\n                        return \"none\";\n                    }\n                    return \"block\";\n                  ]]]\n            item3:\n              - display: >\n                  [[[\n                    if (variables.ulm_card_alarm_time_horizontal) {\n                        return \"none\";\n                    }\n                    return \"block\";\n                  ]]]\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_alarm_time_datetime ]]]\"\n                data:\n                  time: >\n                    [[[\n                      var timestamp = states[variables.ulm_card_alarm_time_datetime].attributes.timestamp;\n                      let time_adjust = (60 + variables.ulm_card_alarm_time_step) * 60;\n                      let new_timestamp = timestamp - time_adjust;\n                      var date = new Date(new_timestamp * 1000);\n                      var hours = date.getHours();\n                      var minutes = \"0\" + date.getMinutes();\n                      var seconds = \"0\" + date.getSeconds();\n                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);\n                      return formattedTime;\n                    ]]]\n              icon: \"mdi:minus\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {\n                          if (entity.state != \"off\") {\n                            return 'rgba(250,250,250,0.8)';\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {\n                          if (entity.state != \"off\") {\n                            var color_set = variables.ulm_card_alarm_time_color;\n                            var color = 'rgba(var(--color-' + color_set + '),1)';\n                            return color;\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"widget_icon\"\n              entity: \"[[[ return variables.ulm_card_alarm_time_datetime ]]]\"\n              tap_action:\n                action: \"more-info\"\n              show_icon: false\n              show_label: true\n              label: \"[[[ return states[variables.ulm_card_alarm_time_datetime].state ]]]\"\n              styles:\n                grid:\n                  - grid-template-areas: \"'l'\"\n                card:\n                  - background-color: >\n                      [[[\n                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {\n                          if (entity.state != \"off\") {\n                            return 'rgba(250,250,250,0.8)';\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {\n                          if (entity.state != \"off\") {\n                            var color_set = variables.ulm_card_alarm_time_color;\n                            var color = 'rgba(var(--color-' + color_set + '),1)';\n                            return color;\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_alarm_time_datetime ]]]\"\n                data:\n                  time: >\n                    [[[\n                      var timestamp = states[variables.ulm_card_alarm_time_datetime].attributes.timestamp;\n                      let time_adjust = (60 - variables.ulm_card_alarm_time_step) * 60;\n                      let new_timestamp = timestamp - time_adjust;\n                      var date = new Date(new_timestamp * 1000);\n                      var hours = date.getHours();\n                      var minutes = \"0\" + date.getMinutes();\n                      var seconds = \"0\" + date.getSeconds();\n                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);\n                      return formattedTime;\n                    ]]]\n              icon: \"mdi:plus\"\n              styles:\n                card:\n                  - background-color: >\n                      [[[\n                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {\n                          if (entity.state != \"off\") {\n                            return 'rgba(250,250,250,0.8)';\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.05)';\n                      ]]]\n                icon:\n                  - color: >\n                      [[[\n                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {\n                          if (entity.state != \"off\") {\n                            var color_set = variables.ulm_card_alarm_time_color;\n                            var color = 'rgba(var(--color-' + color_set + '),1)';\n                            return color;\n                          }\n                        }\n                        return 'rgba(var(--color-theme),0.9)';\n                      ]]]\n
"},{"location":"usage/custom_cards/custom_card_apexcharts/","title":"Apexcharts Custom-card","text":""},{"location":"usage/custom_cards/custom_card_apexcharts/#custom-card-apexcharts","title":"Custom-card \"Apexcharts\"","text":""},{"location":"usage/custom_cards/custom_card_apexcharts/#credits","title":"Credits","text":"
  • Author: AndyVRD - 2022
  • Credits to benm7
  • Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_apexcharts/#changelog","title":"Changelog","text":"1.0.0 Initial release 1.0.1 Fix for UI Minimalist v1.0.1."},{"location":"usage/custom_cards/custom_card_apexcharts/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: \"custom_card_apexcharts\"\n  variables:\n    chart_type: \"donut\"\n    graph_span: \"1d\"\n    entity_1:\n      entity_id: \"sensor.google\"\n      icon: \"\"\n      name: \"Google\"\n      color: \"blue\"\n      max_value: 300\n    entity_2:\n      entity_id: \"sensor.cloudflare\"\n      icon: \"\"\n      name: \"Cloudflare\"\n      color: \"yellow\"\n      max_value: 50\n    entity_3:\n      entity_id: \"sensor.gateway\"\n      icon: \"\"\n      name: \"Gateway\"\n      color: \"green\"\n      max_value: 30\n
"},{"location":"usage/custom_cards/custom_card_apexcharts/#requirements","title":"Requirements","text":"

Integration from HACS: \"custom:apexcharts-card\" from RomRider

"},{"location":"usage/custom_cards/custom_card_apexcharts/#variables","title":"Variables","text":"Variable Example Required Explanation chart_type line, scatter, pie, donut or radialBar yes The chart type you want to display graph_span 1h, 12min, 1d, 1h25, 10sec, ... no The span of the graph as a time interval entity_id sensor.speedtest_download yes Entity sensor of choice icon mdi:cpu-64-bit no mdi icon you want to be exposed in the img_cell, '' will return entity.attributes.icon name name for the used sensor no '' will return entity.attributes.friendly_name color green, blue, yellow, red or grey no if you don't use the color variable it will choice a random color max_value 10, 300, ... no Maximum value of the sensor. Default will be 100 Template Code apexcharts.yaml
---\ncustom_card_apexcharts:\n  variables:\n    entity_1:\n      entity_id:\n      icon: \"[[[ return entity.attributes.icon ]]]\"\n      name: \"[[[ return entity.attributes.friendly_name ]]]\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'green'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_2:\n      entity_id:\n      icon: \"[[[ return entity.attributes.icon  ]]]\"\n      name: \"[[[ return entity.attributes.friendly_name ]]]\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'green'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_3:\n      entity_id:\n      icon: \"[[[ return entity.attributes.icon  ]]]\"\n      name: \"[[[ return entity.attributes.friendly_name ]]]\"\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red','green'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n  color: \"auto\"\n  variable: \"spin\"\n  spin: false\n  show_name: false\n  show_state: false\n  show_label: false\n  show_icon: false\n  show_last_changed: false\n  show_entity_picture: false\n  tap_action:\n    action: \"none\"\n  aspect_ratio: \"2/1\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1 radial' 'item2 radial' 'item3 radial'\"\n      - grid-template-columns: \"35% 65%\"\n      - grid-template-rows: \"1fr 1fr 1fr\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"0px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        entity: \"[[[ return variables.entity_1.entity_id ]]]\"\n        template:\n          - \"card_generic_swap\"\n        variables:\n          ulm_card_generic_swap_name: \"[[[ return variables.entity_1.name ]]]\"\n          ulm_card_generic_swap_icon: \"[[[ return variables.entity_1.icon ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              custom_fields:\n                item1:\n                  card:\n                    type: \"custom:button-card\"\n                    styles:\n                      icon:\n                        - color: \"[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]\"\n                      img_cell:\n                        - background-color: \"[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"none\"\n            - padding-top: \"1px\"\n            - padding-bottom: \"1px\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        entity: \"[[[ return variables.entity_2.entity_id ]]]\"\n        template:\n          - \"card_generic_swap\"\n        variables:\n          ulm_card_generic_swap_name: \"[[[ return variables.entity_2.name ]]]\"\n          ulm_card_generic_swap_icon: \"[[[ return variables.entity_2.icon ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              custom_fields:\n                item1:\n                  card:\n                    type: \"custom:button-card\"\n                    styles:\n                      icon:\n                        - color: \"[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]\"\n                      img_cell:\n                        - background-color: \"[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"none\"\n            - padding-top: \"1px\"\n            - padding-bottom: \"1px\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        entity: \"[[[ return variables.entity_3.entity_id ]]]\"\n        template:\n          - \"card_generic_swap\"\n        variables:\n          ulm_card_generic_swap_name: \"[[[ return variables.entity_3.name ]]]\"\n          ulm_card_generic_swap_icon: \"[[[ return variables.entity_3.icon ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              custom_fields:\n                item1:\n                  card:\n                    type: \"custom:button-card\"\n                    styles:\n                      icon:\n                        - color: \"[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]\"\n                      img_cell:\n                        - background-color: \"[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"none\"\n            - padding-top: \"1px\"\n            - padding-bottom: \"1px\"\n    radial:\n      card:\n        type: \"custom:apexcharts-card\"\n        graph_span: \"[[[ return variables.graph_span ]]]\"\n        chart_type: \"[[[ return variables.chart_type ]]]\"\n        style: |\n          ha-card {\n            border-radius: \"var(--border-radius)\";\n            box-shadow: none;\n            padding-left: 10px;\n            padding-bottom: 0px;\n          }\n        header:\n          show: false\n        apex_config:\n          title:\n            floating: false\n            align: \"top\"\n            style:\n              fontSize: \"2px\"\n              fontWeight: \"bold\"\n          chart:\n            foreColor: \"rgb(148,148,148)\"\n            offsetY: 5\n          legend:\n            show: false\n        series:\n          - entity: \"[[[ return variables.entity_1.entity_id ]]]\"\n            name: \"[[[ return variables.entity_1_name ]]]\"\n            color: \"[[[ return `var(--google-${variables.entity_1.color})`;]]]\"\n            max: \"[[[ return variables.entity_1.max_value ]]]\"\n          - entity: \"[[[ return variables.entity_2.entity_id ]]]\"\n            name: \"[[[ return variables.entity_2_name ]]]\"\n            color: \"[[[ return `var(--google-${variables.entity_2.color})`;]]]\"\n            max: \"[[[ return variables.entity_2.max_value ]]]\"\n          - entity: \"[[[ return variables.entity_3.entity_id ]]]\"\n            name: \"[[[ return variables.entity_3_name ]]]\"\n            color: \"[[[ return `var(--google-${variables.entity_3.color})`;]]]\"\n            max: \"[[[ return variables.entity_3.max_value ]]]\"\n
"},{"location":"usage/custom_cards/custom_card_bar_card/","title":"Bar Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_bar_card/#custom-card-bar-card","title":"Custom-card \"Bar Card\"","text":"

This is a custom-card to display a percentage value as a bar.

"},{"location":"usage/custom_cards/custom_card_bar_card/#credits","title":"Credits","text":"

Author: rphlwnk - 2021 Version: 1.0.0

"},{"location":"usage/custom_cards/custom_card_bar_card/#changelog","title":"Changelog","text":"1.0.0 Initial release. 0.1.1 Fix for UI Minimalist v1.0.1. 0.1.2 Fix border radius"},{"location":"usage/custom_cards/custom_card_bar_card/#requirements","title":"Requirements","text":"

This card needs the following to function correctly:

Custom Card 'Bar-Card'

"},{"location":"usage/custom_cards/custom_card_bar_card/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_bar_card\n  variables:\n    ulm_custom_card_bar_card_entity: sensor.memory_use_percent\n    ulm_custom_card_bar_card_name: Memory Usage\n    ulm_custom_card_bar_card_value: true\n    ulm_custom_card_bar_card_indicator: true\n    ulm_custom_card_bar_card_color: \"var(--google-green)\"\n    ulm_custom_card_bar_card_min: 10\n    ulm_custom_card_bar_card_max: 20\n
"},{"location":"usage/custom_cards/custom_card_bar_card/#variables","title":"Variables","text":"Variable Example Required Default Explanation ulm_custom_card_bar_card_entity sensor.memory_use_percent yes The entity with the desired value ulm_custom_card_bar_card_name \"Memory Consumption\" no Sensor Name Overwrites the sensor name ulm_custom_card_bar_card_icon \"mdi:icon\" no Sensor Icon Overwrites the sensor icon ulm_custom_card_bar_card_value true / false no false If true, shows the value in the bar ulm_custom_card_bar_card_indicator true / false no false If true, shows if the value has changed up or down ulm_custom_card_bar_card_color \"var(--google-green)\" no \"var(--google-blue)\" Change the color of the bar ulm_custom_card_bar_card_min 10 no 0 Change the minimum value of the bar ulm_custom_card_bar_card_max 20 no 100 Change the maximum value of the bar"},{"location":"usage/custom_cards/custom_card_bar_card/#example","title":"Example","text":"
- type: \"custom:button-card\"\n  template: custom_card_bar_card\n  variables:\n    ulm_custom_card_bar_card_entity: sensor.memory_use_percent\n    ulm_custom_card_bar_card_name: Memory Usage\n
Template Code custom_card_bar_card.yaml
---\ncustom_card_bar_card:\n  variables:\n    ulm_custom_card_bar_card_color: \"var(--google-blue)\"\n    ulm_custom_card_bar_card_min: \"0\"\n    ulm_custom_card_bar_card_max: \"100\"\n  triggers_update: \"all\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-rows: \"1fr\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"0px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info\"\n          - \"card_generic\"\n        variables:\n          ulm_card_generic_name: \"[[[ return variables.ulm_custom_card_bar_card_name != '' ? variables.ulm_custom_card_bar_card_name : '' ]]]\"\n          ulm_card_generic_icon: \"[[[ return variables.ulm_custom_card_bar_card_icon != '' ? variables.ulm_custom_card_bar_card_icon : '' ]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"var(--border-radius) var(--border-radius) 0px 0px\"\n            - padding: \"12px\"\n        entity: \"[[[ return variables.ulm_custom_card_bar_card_entity ]]]\"\n    item2:\n      card:\n        type: \"custom:bar-card\"\n        entities:\n          - entity: \"[[[ return variables.ulm_custom_card_bar_card_entity ]]]\"\n        color: \"[[[ return variables.ulm_custom_card_bar_card_color ]]]\"\n        positions:\n          icon: \"off\"\n          indicator: \"[[[ return variables.ulm_custom_card_bar_card_indicator == true ? 'inside' : 'off' ]]]\"\n          minmax: \"off\"\n          title: \"off\"\n          value: \"[[[ return variables.ulm_custom_card_bar_card_value == true ? 'inside' : 'off' ]]]\"\n          name: \"off\"\n        min: \"[[[ return variables.ulm_custom_card_bar_card_min ]]]\"\n        max: \"[[[ return variables.ulm_custom_card_bar_card_max ]]]\"\n        card_mod:\n          style: |-\n            bar-card-currentbar {\n              border-radius: 0px !important;\n              right: 0;\n            }\n            bar-card-backgroundbar {\n              border-radius: 0px !important;\n              right: 0;\n            }\n            #states {\n              padding: 0;\n              height: 35px;\n            }\n            bar-card-background {\n              height: 35px !important;\n            }\n            bar-card-indicator {\n              left: 10px;\n            }\n            bar-card-value {\n              font-weight: bold;\n              font-size: 12px;\n            }\n
"},{"location":"usage/custom_cards/custom_card_camera/","title":"Custom Camera Card","text":""},{"location":"usage/custom_cards/custom_card_camera/#custom-card-camera","title":"Custom-card \"Camera\"","text":"

This is a custom-card to display a camera live view.

"},{"location":"usage/custom_cards/custom_card_camera/#credits","title":"Credits","text":"

Author: Eltarius, from the script of Clemalex - 2022 Version: 1.0.0

"},{"location":"usage/custom_cards/custom_card_camera/#changelog","title":"Changelog","text":"1.0.1 Added variable to passthough aspect ratio to the picture entity card. Fix minor issues with title. 1.0.0 Initial release."},{"location":"usage/custom_cards/custom_card_camera/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  entity: \"camera.sensor\"\n  template: \"custom_card_camera\"\n  show_icon: false #True if you set ulm_custom_card_camera_title: true\n  variables:\n    ulm_custom_card_camera_title: true\n    ulm_custom_card_camera_name: \"name\"\n    ulm_custom_card_camera_label: \"label\"\n    ulm_custom_card_camera_aspect_ratio: '16:9'\n
"},{"location":"usage/custom_cards/custom_card_camera/#variables","title":"Variables","text":"Variable Example Required Default Explanation ulm_custom_card_camera_title true yes If you want header card ulm_custom_card_camera_name \"Garden\" no Name of your choice ulm_custom_card_camera_label \"Room\" no Label of your choice ulm_custom_card_camera_aspect_ratio '16:9' no Aspect ratio of camera entity Template Code custom_card_camera.yaml
---\ncustom_card_camera:\n  template:\n    - \"blue_no_state\"\n  show_name: false\n  show_label: false\n  styles:\n    card:\n      - border-radius: \"20px\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: |-\n          [[[\n            if(variables.ulm_custom_card_camera_title)\n              return \"12px\";\n            else\n              return \"0px\";\n          ]]]\n    img_cell:\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - width: \"42px\"\n      - height: \"42px\"\n    grid:\n      - grid-template-areas: \"'i item1' 'i item1' 'item2 item2'\"\n      - grid-template-columns: \"min-content auto\"\n      - grid-template-rows: \"min-content min-content min-content\"\n      - row-gap: |-\n          [[[\n            if(variables.ulm_custom_card_camera_title)\n              return \"12px\";\n            else\n              return \"0px\";\n          ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        show_name: \"[[[ return variables.ulm_custom_card_camera_title; ]]]\"\n        show_label: \"[[[ return variables.ulm_custom_card_camera_title; ]]]\"\n        show_icon: \"[[[ return variables.ulm_custom_card_camera_title; ]]]\"\n        name: \"[[[ return variables.ulm_custom_card_camera_name; ]]]\"\n        label: \"[[[ return variables.ulm_custom_card_camera_label; ]]]\"\n        tap_action:\n          action: \"more-info\"\n          entity: \"[[[ return entity.entity_id ]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - padding: \"0\"\n            - --mdc-ripple-press-opacity: 0\n          name:\n            - align-self: \"end\"\n            - justify-self: \"start\"\n            - font-weight: \"bold\"\n            - font-size: \"14px\"\n            - margin-left: \"12px\"\n            - filter: \"opacity(100%)\"\n          label:\n            - justify-self: \"start\"\n            - align-self: \"start\"\n            - font-weight: \"bolder\"\n            - font-size: \"12px\"\n            - filter: \"opacity(40%)\"\n            - margin-left: \"12px\"\n          grid:\n            - grid-template-areas: \"'n' 'l'\"\n            - grid-template-columns: \"auto\"\n            - grid-template-rows: \"min-content min-content\"\n    item2:\n      card:\n        type: \"picture-entity\"\n        camera_image: \"[[[ return entity.entity_id ]]]\"\n        camera_view: \"live\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        show_name: false\n        show_state: false\n        aspect_ratio: \"[[[ return variables.ulm_custom_card_camera_aspect_ratio; ]]]\"\n  tap_action:\n    action: \"more-info\"\n
"},{"location":"usage/custom_cards/custom_card_chromecast/","title":"Mediaplayer Chromecast Custom-card","text":""},{"location":"usage/custom_cards/custom_card_chromecast/#media-player-sonos","title":"Media player: sonos","text":"

NOTE This card is under review and is not ready to use!

Usage ## Example 
- type: \"custom:button-card\"\n  template: card_media_player_chromecast_with_controls\n  variables:\n    ulm_card_media_player_with_controls_name: \"Chromecast\"\n    ulm_card_media_player_with_controls_entity: media_player.my_chromecast\n
## Variables Variable Example Required Explanation ulm_card_media_player_with_controls_name Chromecast Yes Name shown in lovelace ulm_card_media_player_with_controls_entity media_player.my_chromecast Yes Entity id Template Code custom_card_chromecast.yaml
---\ncard_media_player_chromecast:\n  size: \"20px\"\n  show_icon: true\n  show_entity_picture: false\n  show_state: false\n  show_name: true\n  template:\n    - \"icon_info\"\n    - \"blue_not_unavailable\"\n    - \"ulm_translation_engine\"\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\ncard_media_player_chromecast_with_controls:\n  variables:\n    ulm_card_media_player_with_controls_name: \"No name set\"\n  triggers_update:\n    - \"[[[ ulm_card_media_player_with_controls_entity ]]]\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"card_media_player_chromecast\"\n        tap_action:\n          action: \"more-info\"\n        entity: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n        name: \"[[[ return variables.ulm_card_media_player_with_controls_name ]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - padding: \"0px\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.toggle\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n              icon: \"mdi:power\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.media_play_pause\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n              icon: \"mdi:pause\"\n              state:\n                - value: \"paused\"\n                  icon: \"mdi:play\"\n                - value: \"off\"\n                  icon: \"mdi:play\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.toggle\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n              icon: \"mdi:video-input-hdmi\"\n\nblue_not_unavailable:\n  state:\n    - styles:\n        icon:\n          - color: \"rgba(var(--color-blue),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-blue), 0.2)\"\n      value: \"unavailable\"\n      operator: \"!=\"\n
"},{"location":"usage/custom_cards/custom_card_damix48_power_details/","title":"Power Details Custom-card","text":""},{"location":"usage/custom_cards/custom_card_damix48_power_details/#custom-card-power-details","title":"Custom-card \"Power details\"","text":"

The custom_card_damix48_power_details is an extension of the standard graph card and can show a detailed graphs of power consumption. If hover (or tap in mobile) the points of the line show the average power in that time interval.

"},{"location":"usage/custom_cards/custom_card_damix48_power_details/#credits","title":"Credits","text":"

Author: Damix48 Version: 0.1.1

"},{"location":"usage/custom_cards/custom_card_damix48_power_details/#changelog","title":"Changelog","text":"0.1.0 Initial release. 0.1.1 Fix for UI Minimalist v1.0.1.

Breaking Change

Since v1.0.2 you also need to specify the entity outside the variables section.

"},{"location":"usage/custom_cards/custom_card_damix48_power_details/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_damix48_power_details\n  entity: sensor.shellyem_id_channel_1_power\n  variables:\n    ulm_card_power_details_name: Power\n    ulm_card_power_details_entity: sensor.shellyem_id_channel_1_power\n    ulm_card_power_details_hours: 2\n    ulm_card_power_details_24hour: true\n    ulm_card_power_details_thresholds:\n      - value: 0\n        color: \"#43A047\"\n      - value: 2500\n        color: \"#FFA600\"\n      - value: 3000\n        color: \"#DB4437\"\n
"},{"location":"usage/custom_cards/custom_card_damix48_power_details/#requirements","title":"Requirements","text":"

Need mini-graph-card

"},{"location":"usage/custom_cards/custom_card_damix48_power_details/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_card_power_details_entity sensor.shellyem_id_channel_1_power yes Power sensor entity ulm_card_power_details_name \"Power\" no Name to show on card. ulm_card_power_details_hours 2 no Number of hour to show in the graph (2 is the default value) ulm_card_power_details_24hour true no Switch from AM/PM (default) to 24h format ulm_card_power_details_thresholds 
\n- value: 0\n  color: \"#43A047\"\n- value: 2500\n  color: \"#FFA600\"\n- value: 3000\n  color: \"#DB4437\"\n
\n\nno\nThresholds to change color in the graph according to power value (default is only one color)\n\n\nulm_card_power_details_height\n180\nno\nHeight of the graph (180 is the default value)\n\n\n\n\nTemplate Code\ncustom_card_damix48_power_details.yaml
---\ncustom_card_damix48_power_details:\n  template:\n    - \"ulm_custom_card_damix48_power_details_language_variables\"\n  variables:\n    ulm_card_power_details_name: \"n/a\"\n    ulm_card_power_details_hours: 2\n    ulm_card_power_details_24hour: false\n    ulm_card_power_details_height: 180\n  show_icon: false\n  show_name: false\n  show_label: false\n  triggers_update: \"all\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"0px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info\"\n          - \"card_generic_swap\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        variables:\n          ulm_card_generic_swap_name: \"[[[ return variables.ulm_card_power_details_name ]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"var(--border-radius) var(--border-radius) 0px 0px\"\n            - padding: \"12px\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"icon_more_info\"\n              custom_fields:\n                item1:\n                  card:\n                    type: \"custom:button-card\"\n                    entity: \"[[[ return entity.entity_id ]]]\"\n                item2:\n                  card:\n                    type: \"custom:button-card\"\n                    entity: \"[[[ return entity.entity_id ]]]\"\n                    label: |\n                      [[[\n                        if (variables.ulm_card_power_details_hours == 1) {\n                          return variables.ulm_custom_card_damix48_power_details_in_the_last + \" \" + variables.ulm_custom_card_damix48_power_details_hour;\n                        } else {\n                          return variables.ulm_custom_card_damix48_power_details_in_the_lasts + \" \" + variables.ulm_card_power_details_hours + \" \" + variables.ulm_custom_card_damix48_power_details_hours;\n                        }\n                      ]]]\n    item2:\n      card:\n        type: \"custom:mini-graph-card\"\n        template:\n          - \"icon_info\"\n          - \"card_generic\"\n        entities:\n          - entity: \"[[[ return variables.ulm_card_power_details_entity ]]]\"\n        color_thresholds: |\n          [[[\n            if (variables.ulm_card_power_details_thresholds) {\n              return variables.ulm_card_power_details_thresholds;\n            } else {\n              return [{\n                value: 0,\n                color: \"var(--info-color)\"\n              }];\n            }\n          ]]]\n        hours_to_show: \"[[[ return variables.ulm_card_power_details_hours ]]]\"\n        points_per_hour: \"[[[ return Math.floor(120 / variables.ulm_card_power_details_hours) ]]]\"\n        name: \"[[[ return variables.ulm_card_power_details_name ]]]\"\n        hour24: \"[[[ return variables.ulm_card_power_details_24hour ]]]\"\n        decimals: 1\n        show:\n          name: false\n          icon: false\n          legend: false\n          state: true\n        align_state: \"center\"\n        height: \"[[[ return variables.ulm_card_power_details_height ]]]\"\n        style: |\n          ha-card {\n            box-shadow: none;\n            border-radius: var(--border-radius);\n          }\n          ha-card .state {\n            font-weight: bold;\n            font-size: 14px;\n          }\n          ha-card .graph__labels > span {\n            background: var(--card-background-color);\n            color: var(--secondary-text-color)\n          }\n
"},{"location":"usage/custom_cards/custom_card_device_tracker/","title":"Device Tracker Custom-card","text":""},{"location":"usage/custom_cards/custom_card_device_tracker/#description","title":"Description","text":"
The custom_card_device_tracker displays presence state of a device according to the provided entity. It allow to display the state of two tracker for this device
"},{"location":"usage/custom_cards/custom_card_device_tracker/#variables","title":"Variables","text":"Variable Default Required Notes entity The device entity or group ulm_custom_card_device_tracker_icon icon to display ulm_custom_card_device_tracker_tracker_1_entity Set the first tracker entity. ulm_custom_card_device_tracker_tracker_1_type Set the type of the first tracker, for the notification icon ulm_custom_card_device_tracker_tracker_2_entity Set the second tracker entity. ulm_custom_card_device_tracker_tracker_2_type Set the type of the second tracker, for the notification icon"},{"location":"usage/custom_cards/custom_card_device_tracker/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: custom_card_device_tracker\n  entity: group.my_smartphone\n  variables:\n    ulm_custom_card_device_tracker_icon: mdi:cellphone\n    ulm_custom_card_device_tracker_tracker_1_entity: device_tracker.my_smartphone_ping\n    ulm_custom_card_device_tracker_tracker_1_type: 'lan'\n    ulm_custom_card_device_tracker_tracker_2_entity: device_tracker.my_smartphone_bluetooth\n    ulm_custom_card_device_tracker_tracker_2_type: 'bluetooth'\n
 Template Code custom_card_device_tracker.yaml
---\ncustom_card_device_tracker:\n  template:\n    - \"icon_info_bg\"\n    - \"ulm_translation_engine\"\n  tap_action:\n    action: \"more-info\"\n  show_label: true\n  show_name: true\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  entity: \"[[[ return entity; ]]]\"\n  icon: \"[[[ return variables.ulm_custom_card_device_tracker_icon; ]]]\"\n  styles:\n    icon:\n      - color: >\n          [[[\n              return entity.state === \"not_home\" ?\n              \"rgba(var(--color-theme),0.9)\":\n              \"rgba(var(--color-green),1)\";\n          ]]]\n    custom_fields:\n      tracker_1:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"38px\"\n        - top: \"8px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: >\n            [[[\n              if (variables.ulm_custom_card_device_tracker_tracker_1_entity) {\n                if (states[variables.ulm_custom_card_device_tracker_tracker_1_entity].state !== 'home') {\n                  return \"rgba(var(--color-green),1)\";\n                } else {\n                  return \"rgba(var(--color-blue),1)\";\n                }\n              }\n            ]]]\n      tracker_2:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"38px\"\n        - top: \"38px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: >\n            [[[\n              if (variables.ulm_custom_card_device_tracker_tracker_2_entity) {\n                if (states[variables.ulm_custom_card_device_tracker_tracker_2_entity].state !== 'home') {\n                  return \"rgba(var(--color-green),1)\";\n                } else {\n                  return \"rgba(var(--color-blue),1)\";\n                }\n              }\n            ]]]\n  custom_fields:\n    tracker_1: >\n      [[[\n        if (variables.ulm_custom_card_device_tracker_tracker_1_entity) {\n          let state = states[variables.ulm_custom_card_device_tracker_tracker_1_entity].state;\n          let icon = state === 'home' ? 'mdi:home-variant' : 'mdi:home-minus';\n          let type = variables.ulm_custom_card_device_tracker_tracker_1_type\n\n          if (type == 'bluetooth') {\n            icon = state === 'home' ? 'mdi:bluetooth': 'mdi:bluetooth-off';\n          } else if (type == 'lan') {\n            icon = state === 'home' ? 'mdi:lan-connect' : 'mdi:lan-disconnect';\n          }\n          return '<ha-icon icon=\"' + icon + '\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        }\n      ]]]\n    tracker_2: >\n      [[[\n        if (variables.ulm_custom_card_device_tracker_tracker_2_entity) {\n          let state = states[variables.ulm_custom_card_device_tracker_tracker_2_entity].state;\n          let icon = state === 'home' ? 'mdi:home-variant' : 'mdi:home-minus';\n          let type = variables.ulm_custom_card_device_tracker_tracker_2_type\n\n          if (type == 'bluetooth') {\n            icon = state === 'home' ? 'mdi:bluetooth': 'mdi:bluetooth-off';\n          } else if (type == 'lan') {\n            icon = state === 'home' ? 'mdi:lan-connect' : 'mdi:lan-disconnect';\n          }\n          return '<ha-icon icon=\"' + icon + '\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        }\n      ]]]\n
"},{"location":"usage/custom_cards/custom_card_drealine_roomview/","title":"Drealine RoomView - Custom Card","text":""},{"location":"usage/custom_cards/custom_card_drealine_roomview/#custom-card-drealine-roomview","title":"Custom-card \"Drealine RoomView\"","text":""},{"location":"usage/custom_cards/custom_card_drealine_roomview/#credits","title":"Credits","text":"
     
  • Author: Drealine - 2022
    •  
  • Version: 1.0.0
    •  
"},{"location":"usage/custom_cards/custom_card_drealine_roomview/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_drealine_roomview/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: \"custom_card_drealine_roomview\"\n  variables:\n    icon: \"mdi:home-variant-outline\"\n    name: \"Entr\u00e9e\"\n    group_lights:\n    group_motions:\n    group_doors:\n    group_windows:\n    group_outlets:\n    group_tv:\n    group_water:\n    group_windows_shutters:\n    temperature:\n    humidity:\n
"},{"location":"usage/custom_cards/custom_card_drealine_roomview/#requirements","title":"Requirements","text":"
No requirements at the moment.
"},{"location":"usage/custom_cards/custom_card_drealine_roomview/#variables","title":"Variables","text":"Variable Example Required Explanation Icon mdi:bedroom no Icon of the card Name Text no Title for the card (it's not showing, just for more readable) group_lights group.lights no Any groups that contain lights group_motions group.motions no Any groups that contain motions sensors group_doors group.doors no Any groups that contain doors sensors group_windows group.windows no Any groups that contain windows sensors group_outlets group.outlets no Any groups that contain outlets group_tv group.tv no Any groups that contain TV's group_water group.water no Any groups that contain water sensors group_windows_shutters group.windows_shutters no Any groups that contain windows shutters temperature entity.temperature_saloon no Temperature sensor or the room humidity entity.humidity_saloon no Humidity sensor or the room Template Code custom_card_drealine_roomview.yaml
---\ncustom_card_drealine_roomview:\n  template:\n    - \"custom_card_drealine_roomview_style_root\"\n  variables:\n    group_lights:\n    group_motions:\n    group_doors:\n    group_windows:\n    group_outlets:\n    group_tv:\n    group_water:\n    group_windows_shutters:\n    temperature:\n    humidity:\n  triggers_update: \"all\"\n  group_expand: true\n  custom_fields:\n    header:\n      card:\n        template:\n          - \"custom_card_drealine_roomview_conf_header_root\"\n        type: \"custom:button-card\"\n        custom_fields:\n          header_card:\n            card:\n              variables:\n                ulm_card_tap_action: \"[[[ return variables.ulm_card_tap_action; ]]]\"\n                ulm_input_select_option: \"[[[ return variables.ulm_input_select_option; ]]]\"\n                ulm_input_select: \"[[[ return variables.ulm_input_select; ]]]\"\n                ulm_card_tap_navigate_path: \"[[[ return variables.ulm_card_tap_navigate_path; ]]]\"\n              styles:\n                custom_fields:\n                  warning:\n                    - display: |\n                        [[[\n                          var groups = [variables.group_lights, variables.group_motions,variables.group_doors,\n                          variables.group_windows, variables.group_outlets, variables.group_water];\n                          var arrayLength = groups.length;\n                          var count_unavailable = 0;\n                          for (var i = 0; i < arrayLength; i++){\n                            if(states[groups[i]]){\n                              if (states[groups[i]].attributes['entity_id']){\n                                states[groups[i]].attributes['entity_id'].forEach(function(entity){\n                                  if(states[entity] && states[entity].state == 'unavailable'){\n                                    count_unavailable += 1;\n                                  }\n                                });\n                              }\n                              else\n                              {\n                                if (states[groups[i]].state == 'unavailable'){\n                                  count_unavailable += 1;\n                                }\n                              }\n                            }\n                          }\n                          if (count_unavailable >= 1){\n                            return \"auto\";\n                          }\n                          else{\n                            return \"none\";\n                          }\n                        ]]]\n              icon: \"[[[ return variables.icon ]]]\"\n              name: |\n                [[[\n                  var temperature = '';\n                  temperature += '<ha-icon icon=\"mdi:thermometer\" style=\"width: 17px; height: 17px; color: grey,1);\"></ha-icon>';\n                  if (states[variables.temperature]){\n                    temperature += states[variables.temperature].state + states[variables.temperature].attributes.unit_of_measurement\n                  }\n                  else{\n                    temperature = \"N/A\"\n                  }\n                  return temperature;\n                ]]]\n              label: |\n                [[[\n                  var humidity = '';\n                  humidity += '<ha-icon icon=\"mdi:water-percent\" style=\"width: 17px; height: 17px; color: grey,1);\"></ha-icon>';\n                  if (states[variables.humidity]){\n                    humidity += states[variables.humidity].state + states[variables.humidity].attributes.unit_of_measurement\n                  }\n                  else{\n                    humidity = \"N/A\"\n                  }\n                  return humidity;\n                ]]]\n              template:\n                - \"custom_card_drealine_roomview_conf_header\"\n                - \"ulm_actions_card\"\n              type: \"custom:button-card\"\n    sensors:\n      card:\n        template:\n          - \"custom_card_drealine_roomview_conf_sensors\"\n        styles:\n          card:\n            - display: |\n                [[[\n                  var groups = [variables.group_lights, variables.group_motions,variables.group_doors,\n                  variables.group_windows, variables.group_outlets, variables.group_water];\n                  var arrayLength = groups.length;\n                  var count_if_show_box_sensors = 0;\n                  for (var i = 0; i < arrayLength; i++) {\n                    if(states[groups[i]]){\n                      if (states[groups[i]].attributes['entity_id']){\n                        states[groups[i]].attributes['entity_id'].forEach(function(entity){\n                          if(states[entity] && states[entity].attributes.battery <= 20){\n                            count_if_show_box_sensors += 1;\n                          }\n                        });\n                      }\n                    }\n                  }\n                  for (var i = 0; i < arrayLength; i++) {\n                    if(states[groups[i]]){\n                      if(states[groups[i]].state == \"on\"){\n                        count_if_show_box_sensors += 1;\n                      }\n                    }\n\n                  }\n                  if (count_if_show_box_sensors >= 1){\n                    return \"auto\";\n                  }\n                  else\n                  {\n                    return \"none\";\n                  }\n                ]]]\n          custom_fields:\n            battery:\n              - display: |\n                  [[[\n                    var groups = [variables.group_lights, variables.group_motions,variables.group_doors,\n                    variables.group_windows, variables.group_outlets, variables.group_water];\n                    var arrayLength = groups.length;\n                    var count_if_show_box_sensors = 0;\n                    for (var i = 0; i < arrayLength; i++) {\n                      if(states[groups[i]]){\n                        if (states[groups[i]].attributes['entity_id']){\n                          states[groups[i]].attributes['entity_id'].forEach(function(entity){\n                            if(states[entity] && states[entity].attributes.battery <= 20){\n                              count_if_show_box_sensors += 1;\n                            }\n                          });\n                        }\n                      }\n                    }\n                    if (count_if_show_box_sensors >= 1){\n                      return \"auto\";\n                    }\n                    else\n                    {\n                      return \"none\";\n                    }\n                  ]]]\n            doors:\n              - display: |\n                  [[[\n                    if (variables.group_doors){\n                      return \"auto\";\n                    }\n                    else\n                    {\n                      return \"none\";\n                    }\n                  ]]]\n            windows:\n              - display: |\n                  [[[\n                    if (variables.group_windows){\n                      return \"auto\";\n                    }\n                    else\n                    {\n                      return \"none\";\n                    }\n                  ]]]\n            motions:\n              - display: |\n                  [[[\n                    if (variables.group_motions){\n                      return \"auto\";\n                    }\n                    else\n                    {\n                      return \"none\";\n                    }\n                  ]]]\n            water:\n              - display: |\n                  [[[\n                    if (variables.group_water){\n                      return \"auto\";\n                    }\n                    else\n                    {\n                      return \"none\";\n                    }\n                  ]]]\n        type: \"custom:button-card\"\n        custom_fields:\n          doors:\n            card:\n              template:\n                - \"custom_card_drealine_roomview_conf_icons_sensors\"\n                - \"custom_card_drealine_roomview_count_sensors\"\n              icon: \"mdi:door-open\"\n              entity: \"[[[ return variables.group_doors ]]]\"\n              styles:\n                card:\n                  - display: >-\n                      [[[\n                        if (variables.group_doors && states[variables.group_doors].state == 'on'){\n                          return \"auto\";\n                        }\n                        else{\n                          return \"none\";\n                        }\n                      ]]]\n              type: \"custom:button-card\"\n          battery:\n            card:\n              template:\n                - \"custom_card_drealine_roomview_conf_icons_sensors\"\n                - \"custom_card_drealine_roomview_style_count_batteries\"\n              icon: \"mdi:battery-20\"\n              styles:\n                card:\n                  - display: >-\n                      [[[\n                        var count_alert = 0;\n                        var groups = [variables.group_lights, variables.group_motions,variables.group_doors,\n                        variables.group_windows, variables.group_outlets, variables.group_water];\n                        var arrayLength = groups.length;\n                        for (var i = 0; i < arrayLength; i++) {\n                          if(states[groups[i]]){\n                            if (states[groups[i]].attributes['entity_id']){\n                              states[groups[i]].attributes['entity_id'].forEach(function(entity){\n                                if(states[entity] && states[entity].attributes.battery <= 20){\n                                  count_alert += 1;\n                                }\n                              });\n                            }\n                          }\n                        }\n                        if (count_alert >= 1){\n                          return \"auto\";\n                        }\n                        else{\n                          return \"none\";\n                        }\n                      ]]]\n                custom_fields:\n                  count_batteries:\n                    - display: |\n                        [[[\n                          var count_alert = 0;\n                          var groups = [variables.group_lights, variables.group_motions,variables.group_doors,\n                          variables.group_windows, variables.group_outlets, variables.group_water];\n                          var arrayLength = groups.length;\n                          for (var i = 0; i < arrayLength; i++) {\n                            if(states[groups[i]]){\n                              if (states[groups[i]].attributes['entity_id']){\n                                states[groups[i]].attributes['entity_id'].forEach(function(entity){\n                                  if(states[entity] && states[entity].attributes.battery <= 20){\n                                    count_alert += 1;\n                                  }\n                                });\n                              }\n                            }\n                          }\n                          if (count_alert >= 1){\n                            return \"auto\";\n                          }\n                          else{\n                            return \"none\";\n                          }\n                        ]]]\n              custom_fields:\n                count_batteries: |\n                    [[[\n                      var battery = 0;\n                      var groups = [variables.group_lights, variables.group_motions,variables.group_doors,\n                      variables.group_windows, variables.group_outlets, variables.group_water];\n                      var arrayLength = groups.length;\n                      for (var i = 0; i < arrayLength; i++) {\n                        if(states[groups[i]]){\n                          if (states[groups[i]].attributes['entity_id']){\n                            states[groups[i]].attributes['entity_id'].forEach(function(entity){\n                              if(states[entity] && states[entity].attributes.battery <= 20){\n                                battery += 1;\n                              }\n                            });\n                          }\n                        }\n                      }\n                      return battery;\n                    ]]]\n              type: \"custom:button-card\"\n          windows:\n            card:\n              template:\n                - \"custom_card_drealine_roomview_conf_icons_sensors\"\n                - \"custom_card_drealine_roomview_count_sensors\"\n              icon: \"mdi:window-closed-variant\"\n              entity: \"[[[ return variables.group_windows ]]]\"\n              styles:\n                card:\n                  - display: >-\n                      [[[\n                        if (variables.group_windows && states[variables.group_windows].state == 'on'){\n                          return \"auto\";\n                        }\n                        else{\n                          return \"none\";\n                        }\n                      ]]]\n              type: \"custom:button-card\"\n          motions:\n            card:\n              template:\n                - \"custom_card_drealine_roomview_conf_icons_sensors\"\n              icon: \"mdi:motion-sensor\"\n              entity: \"[[[ return variables.group_motions ]]]\"\n              styles:\n                card:\n                  - display: >-\n                      [[[\n                        if (variables.group_motions && states[variables.group_motions].state == 'on'){\n                          return \"auto\";\n                        }\n                        else{\n                          return \"none\";\n                        }\n                      ]]]\n              type: \"custom:button-card\"\n          water:\n            card:\n              template:\n                - \"custom_card_drealine_roomview_conf_icons_sensors\"\n              icon: \"mdi:water\"\n              entity: \"[[[ return variables.group_water ]]]\"\n              styles:\n                card:\n                  - display: >-\n                      [[[\n                        if (variables.group_water && states[variables.group_water].state == 'on'){\n                          return \"auto\";\n                        }\n                        else{\n                          return \"none\";\n                        }\n                      ]]]\n              type: \"custom:button-card\"\n    devices:\n      card:\n        template: \"custom_card_drealine_roomview_conf_devices_root\"\n        type: \"custom:button-card\"\n        custom_fields:\n          lights:\n            card:\n              template:\n                - \"custom_card_drealine_roomview_conf_devices\"\n              icon: |\n                [[[\n                var count_unavailable = 0;\n                var count_entity = 0;\n                if (states[variables.group_lights]){\n                  if (states[variables.group_lights].attributes['entity_id']){\n                    states[variables.group_lights].attributes['entity_id'].forEach(function(entity){\n                      count_entity += 1;\n                      if(states[entity] && states[entity].state == 'unavailable'){\n                        count_unavailable += 1;\n                      }\n                    });\n                    if (count_entity == count_unavailable){\n                      return \"mdi:lightbulb-alert\";\n                    }\n                  }\n                  else return \"mdi:exclamation\"\n                  var state_lights = states[variables.group_lights].state;\n                  if (state_lights == 'on') return \"mdi:lightbulb-group\";\n                  else if (state_lights == 'off') return \"mdi:lightbulb-group-off\";\n                }\n                else{\n                  return \"mdi:lightbulb-group-off\"\n                }\n                ]]]\n              entity: \"[[[ return variables.group_lights ]]]\"\n              type: \"custom:button-card\"\n          windows_shutters:\n            card:\n              template:\n                - \"custom_card_drealine_roomview_conf_devices\"\n              icon: >\n                [[[\n                var count_unavailable = 0;\n                var count_entity = 0;\n                if (states[variables.group_windows_shutters]){\n                  if (states[variables.group_windows_shutters].attributes['entity_id']){\n                    states[variables.group_windows_shutters].attributes['entity_id'].forEach(function(entity){\n                      count_entity += 1;\n                      if(states[entity] && states[entity].state == 'unavailable'){\n                        count_unavailable += 1;\n                      }\n                    });\n                    if (count_entity == count_unavailable){\n                      return \"mdi:window-shutter-alert\";\n                    }\n                  }\n                  else return \"mdi:exclamation\"\n                  var state_windows = states[variables.group_windows_shutters].state;\n                  if (state_windows == 'on') return \"mdi:window-shutter-open\";\n                  else if (state_windows == 'off') return \"mdi:window-shutter\";\n                  else return \"mdi:exclamation\"\n                }\n                else{\n                  return \"mdi:window-shutter\"\n                }\n                ]]]\n              entity: \"[[[ return variables.group_windows_shutters ]]]\"\n              type: \"custom:button-card\"\n          outlets:\n            card:\n              template:\n                - \"custom_card_drealine_roomview_conf_devices\"\n              icon: >\n                [[[\n                var count_unavailable = 0;\n                var count_entity = 0;\n                if (states[variables.group_outlets]){\n                  if (states[variables.group_outlets].attributes['entity_id']){\n                    states[variables.group_outlets].attributes['entity_id'].forEach(function(entity){\n                      count_entity += 1;\n                      if(states[entity] && states[entity].state == 'unavailable'){\n                        count_unavailable += 1;\n                      }\n                    });\n                    if (count_entity == count_unavailable){\n                      return \"mdi:exclamation-thick\";\n                    }\n                  }\n                  var group_outlets = states[variables.group_outlets].state;\n                  if (group_outlets == 'on') return \"mdi:power-plug\";\n                  else if (group_outlets == 'off') return \"mdi:power-plug-off\";\n                  else return \"mdi:exclamation\"\n                }\n                else{\n                  return \"mdi:power-plug-off\"\n                }\n                ]]]\n              entity: \"[[[ return variables.group_outlets ]]]\"\n              type: \"custom:button-card\"\n          tv:\n            card:\n              template:\n                - \"custom_card_drealine_roomview_conf_devices\"\n              icon: >\n                [[[\n                  var count_unavailable = 0;\n                  var count_entity = 0;\n\n                  if (states[variables.group_tv]){\n                    if (states[variables.group_tv].attributes['entity_id']){\n                      states[variables.group_tv].attributes['entity_id'].forEach(function(entity){\n                        count_entity += 1;\n                        if(states[entity] && states[entity].state == 'unavailable'){\n                          count_unavailable += 1;\n                        }\n                      });\n                      if (count_entity == count_unavailable){\n                        return \"mdi:exclamation-thick\";\n                      }\n                    }\n                    var group_tv = states[variables.group_tv].state;\n                    if (group_tv == 'on') return \"mdi:television\";\n                    else if (group_tv == 'off') return \"mdi:television-off\";\n                    else return \"mdi:exclamation\"\n                  }\n                  else{\n                    return \"mdi:television-off\"\n                  }\n                ]]]\n              entity: \"[[[ return variables.group_tv ]]]\"\n              type: \"custom:button-card\"\n        styles:\n          custom_fields:\n            lights:\n              - flex: \"auto\"\n              - display: \"auto\"\n            windows_shutters:\n              - flex: \"auto\"\n              - display: |\n                  [[[\n                    if (variables.group_windows_shutters){\n                      return \"auto\";\n                    }\n                    else\n                    {\n                      return \"none\";\n                    }\n                  ]]]\n            outlets:\n              - flex: \"auto\"\n              - display: |\n                  [[[\n                    if (variables.group_outlets){\n                      return \"auto\";\n                    }\n                    else\n                    {\n                      return \"none\";\n                    }\n                  ]]]\n            tv:\n              - flex: \"auto\"\n              - display: |\n                  [[[\n                    if (variables.group_tv){\n                      return \"auto\";\n                    }\n                    else\n                    {\n                      return \"none\";\n                    }\n                  ]]]\ncustom_card_drealine_roomview_conf_devices_root:\n  styles:\n    grid:\n      - display: \"flex\"\n      - gap: \"2%\"\n      - flex-wrap: \"wrap\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - border-radius: \"0%\"\ncustom_card_drealine_roomview_style_count_batteries:\n  styles:\n    custom_fields:\n      count_batteries:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"58%\"\n        - top: \"5%\"\n        - height: \"13px\"\n        - width: \"13px\"\n        - font-weight: \"900\"\n        - font-size: \"10px\"\n        - line-height: \"13px\"\n        - color: \"white\"\n        - background-color: \"rgba(var(--color-blue),0.75)\"\ncustom_card_drealine_roomview_count_sensors:\n  group_expand: true\n  show_name: false\n  styles:\n    custom_fields:\n      number_of_sensors:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"58%\"\n        - top: \"5%\"\n        - height: \"13px\"\n        - width: \"13px\"\n        - font-weight: \"900\"\n        - font-size: \"10px\"\n        - line-height: \"13px\"\n        - color: \"white\"\n        - background-color: \"rgba(var(--color-blue),0.75)\"\n        - display: |\n            [[[\n              if ((entity !== undefined && states[entity.entity_id].state == 'on')){\n                return \"auto\";\n              }\n              else\n              {\n                return \"none\";\n              }\n            ]]]\n  custom_fields:\n    number_of_sensors: |\n        [[[\n          var count = 0;\n          if(entity !== undefined){\n            if (states[entity.entity_id].attributes['entity_id']){\n              states[entity.entity_id].attributes['entity_id'].forEach(function(entity){\n                if(states[entity] && states[entity].state == 'on'){\n                  count++;\n                }\n              });\n            }\n          }\n          return count;\n        ]]]\ncustom_card_drealine_roomview_style_root:\n  styles:\n    grid:\n      - grid-template-areas: \"'header' 'sensors' 'devices'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"6px\"\n    card:\n      - border-radius: \"20px\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\ncustom_card_drealine_roomview_conf_header_root:\n  styles:\n    grid:\n      - grid-template-areas: \"'header_card'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content\"\n      - column-gap: \"7px\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\ncustom_card_drealine_roomview_conf_sensors:\n  styles:\n    grid:\n      - display: \"flex\"\n      - justify-content: \"center\"\n      - flex-wrap: \"wrap\"\n      - align-content: \"center\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - margin: \"0px\"\n      - height: \"auto\"\n      - align-items: \"center\"\n      - border-radius: \"0%\"\ncustom_card_drealine_roomview_conf_devices:\n  group_expand: true\n  color: \"var(--google-grey)\"\n  tap_action:\n    action: \"none\"\n  double_tap_action:\n    action: \"toggle\"\n  size: \"20px\"\n  show_icon: true\n  show_name: false\n  state:\n    - styles:\n        icon:\n          - color: \"rgba(var(--color-yellow),1)\"\n        label:\n          - color: \"rgba(var(--color-yellow-text),1)\"\n        name:\n          - color: \"rgba(var(--color-yellow-text),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-yellow), 0.2)\"\n        card:\n          - background-color: \"rgba(var(--color-background-yellow),var(--opacity-bg))\"\n      value: \"on\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.9)\"\n      - height: \"40px\"\n    grid:\n      - grid-template-areas: \"'i'\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"14px\"\n      - min-width: \"40px\"\n    custom_fields:\n      number_of_devices:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"50.5%\"\n        - top: \"24%\"\n        - height: \"13px\"\n        - width: \"13px\"\n        - font-size: \"10px\"\n        - font-weight: \"900\"\n        - line-height: \"13px\"\n        - background-color: \"rgba(var(--color-blue),0.75)\"\n        - color: \"white\"\n        - display: |\n            [[[\n              if ((entity !== undefined && states[entity.entity_id].state == 'on')){\n                return \"auto\";\n              }\n              else\n              {\n                return \"none\";\n              }\n            ]]]\n  custom_fields:\n    number_of_devices: |\n        [[[\n          var count = 0;\n          if(entity !== undefined){\n            if (states[entity.entity_id].attributes['entity_id']){\n              states[entity.entity_id].attributes['entity_id'].forEach(function(entity){\n                if(states[entity] && states[entity].state == 'on'){\n                  count++;\n                }\n              });\n            }\n          }\n          return count;\n        ]]]\ncustom_card_drealine_roomview_conf_header:\n  color: \"var(--google-grey)\"\n  show_icon: true\n  show_name: true\n  show_label: true\n  size: \"20px\"\n  custom_fields:\n    warning: |\n      [[[\n        return `<ha-icon icon=\"mdi:exclamation-thick\" style=\"width: 12px; height: 12px; color: var(--primary-background-color);\"></ha-icon>`\n      ]]]\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n      - transform: \"scale(1.2)\"\n    label:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"12px\"\n      - filter: \"opacity(50%)\"\n      - margin-left: \"10px\"\n    name:\n      - align-self: \"start\"\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"12px\"\n      - margin-top: \"2px\"\n      - margin-left: \"10px\"\n      - filter: \"opacity(50%)\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - width: \"42px\"\n      - height: \"42px\"\n    grid:\n      - grid-template-areas: \"'i n' 'i l'\"\n      - grid-template-columns: \"min-content auto\"\n      - grid-template-rows: \"min-content\"\n      - position: \"relative\"\n    card:\n      - border-radius: \"21px 8px 8px 21px\"\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n    custom_fields:\n      warning:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"28px\"\n        - top: \"0px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: \"rgba(var(--color-red),1)\"\ncustom_card_drealine_roomview_conf_icons_sensors:\n  show_name: false\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.9)\"\n      - transform: \"scale(1)\"\n      - width: \"20px\"\n    img_cell:\n      - height: \"auto\"\n      - width: \"35px\"\n    grid:\n      - grid-template-areas: \"'i'\"\n      - grid-template-columns: \"1fr\"\n    card:\n      - background: \"transparent\"\n      - box-shadow: \"none\"\n
"},{"location":"usage/custom_cards/custom_card_eraycetinay_elapsed_time/","title":"Elapsed Time Custom-card","text":""},{"location":"usage/custom_cards/custom_card_eraycetinay_elapsed_time/#custom-card-elapsed-time","title":"Custom-card \"Elapsed Time\"","text":"
This is a custom-card that works with a input_datetime input. Template checks the has_date and has_time attributes and creates a label in x days x hours x minutes ago format.
 
     
  • x days only included if has_date is true (datetime object)
    •  
  • x hours only included if has_time is true (datetime and time objects)
    •  
  • x minutes only included if has_time is true and has_date is false (time object)
    •  
 
"},{"location":"usage/custom_cards/custom_card_eraycetinay_elapsed_time/#credits","title":"Credits","text":"
Author: eraycetinay - 2022 Version: 0.0.1
"},{"location":"usage/custom_cards/custom_card_eraycetinay_elapsed_time/#changelog","title":"Changelog","text":"0.0.1   Initial release"},{"location":"usage/custom_cards/custom_card_eraycetinay_elapsed_time/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: \"custom_card_eraycetinay_elapsed_time\"\n  entity: input_datetime.cat_litter\n  name: \"Cat Litter\"\n
 Template Code custom_card_eraycetinay_elapsed_time.yaml
---\ncustom_card_eraycetinay_elapsed_time:\n  template:\n    - \"ulm_custom_card_eraycetinay_elapsed_time_language_variables\"\n    - \"icon_info_bg\"\n  show_label: true\n  show_name: true\n  triggers_update:\n    - \"[[[ return entity.entity_id ]]]\"\n  label: |\n    [[[\n      let endDate = new Date();\n      let today = new Date();\n      if(entity.attributes.has_date) {\n        today = new Date(entity.state.replace(\" \", \"T\"));\n      } else {\u00a0\n        today = new Date().setHours(entity.attributes.hour,entity.attributes.minute,entity.attributes.second);\n      }\n\n      const days = parseInt((endDate - today) / (1000 * 60 * 60 * 24));\n      const hours = parseInt(Math.abs(endDate - today) / (1000 * 60 * 60) % 24);\n      const minutes = parseInt(Math.abs(endDate - today) / (1000 * 60) % 60);\n\n      let text = '';\n      if(entity.attributes.has_date) {\n        text += days > 0 ? days + ' ' + (days > 1 ? variables.ulm_custom_card_eraycetinay_elapsed_time_days : variables.ulm_custom_card_eraycetinay_elapsed_time_day) +' ' : '';\n      }\n      if(entity.attributes.has_time) {\n        text += hours > 0 ? hours + ' ' + (hours > 1 ? variables.ulm_custom_card_eraycetinay_elapsed_time_hours : variables.ulm_custom_card_eraycetinay_elapsed_time_hour) +' ' : '';\n      }\n      if(entity.attributes.has_time && !entity.attributes.has_date) {\n        text += minutes > 0 ? minutes + ' ' + (minutes > 1 ? variables.ulm_custom_card_eraycetinay_elapsed_time_minutes : variables.ulm_custom_card_eraycetinay_elapsed_time_minute) +' ' : '';\n      }\n\n      text = text.length ? text += variables.ulm_custom_card_eraycetinay_elapsed_time_ago : variables.ulm_custom_card_eraycetinay_elapsed_time_justnow;\n      return text;\n    ]]]\n
"},{"location":"usage/custom_cards/custom_card_eraycetinay_lock/","title":"Lock Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_eraycetinay_lock/#custom-card-lock","title":"Custom-card \"Lock\"","text":"
This is a custom-card that works in switch logic with a lock entity. Card structure uses lock, unlock (optional open) actions and lock,unlock,locking,unlocking, jammed states.
 
"},{"location":"usage/custom_cards/custom_card_eraycetinay_lock/#credits","title":"Credits","text":"
Author: eraycetinay - 2022 Version: 0.0.3
"},{"location":"usage/custom_cards/custom_card_eraycetinay_lock/#changelog","title":"Changelog","text":"0.0.3 
     Contributor: Sisimomo - 2022-06-14 
  • Now can displays a warning when the battery is low.
    •  
  • Now can displays a warning when the door is lock but the door is still open.
    •  
  • Code refactoring to fit framework structure.
    •  
  • Documentation clean up.
    •  
  • Code clean up.
    •  
 0.0.2   Added option to only use lock.open  0.0.1   Initial release"},{"location":"usage/custom_cards/custom_card_eraycetinay_lock/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  entity: lock.door_lock\n  template: \"custom_card_eraycetinay_lock\"\n  name: \"Door Lock\"\n  variables:\n    ulm_custom_card_eraycetinay_lock_tap_control: true\n    ulm_custom_card_eraycetinay_lock_battery_level: sensor.door_battery\n    ulm_custom_card_eraycetinay_lock_door_open: binary_sensor.door_open\n  triggers_update:\n    - \"sensor.door_battery\"\n    - \"binary_sensor.door_open\"\n
"},{"location":"usage/custom_cards/custom_card_eraycetinay_lock/#variables","title":"Variables","text":"Variable Example Default Required Explanation ulm_custom_card_eraycetinay_lock_tap_control true false no Lock/Unlock on tap action ulm_custom_card_eraycetinay_lock_only_open true false no Only use the card to open the door (always sends lock.open on tap) ulm_custom_card_eraycetinay_lock_battery_level sensor.door_battery no Displays a warning when the battery is low. ulm_custom_card_eraycetinay_lock_battery_warning 25 20 no At what battery percentage should the low battery warning appear. ulm_custom_card_eraycetinay_lock_battery_warning_low 10 5 no At what battery percentage should the very low battery warning appear. ulm_custom_card_eraycetinay_lock_door_open binary_sensor.door_open no Displays a warning when the door is lock but the door is still open. ulm_custom_card_eraycetinay_lock_battery_sensor_binary true false no Set to true if using a binary battery sensor. Will ignore battery_warning percentage settings ulm_custom_card_eraycetinay_lock_battery_sensor_binary_low_state off on no Set whether the binary sensor turns to on or off when in low state Template Code custom_card_eraycetinay_lock.yaml
---\ncustom_card_eraycetinay_lock:\n  template:\n    - \"icon_info_bg\"\n    - \"ulm_translation_engine\"\n    - \"custom_card_eraycetinay_lock_language_variables\"\n  variables:\n    ulm_custom_card_eraycetinay_lock_battery_warning: 20\n    ulm_custom_card_eraycetinay_lock_battery_warning_low: 5\n    ulm_custom_card_eraycetinay_lock_battery_sensor_binary: false\n    ulm_custom_card_eraycetinay_lock_battery_sensor_binary_low_state: \"on\"\n    ulm_custom_card_eraycetinay_lock_only_open: false\n  tap_action:\n    action: |\n      [[[\n        return variables.ulm_custom_card_eraycetinay_lock_tap_control ? \"perform-action\" : \"more-info\";\n      ]]]\n    # only related with perform-action\n    perform_action: |\n      [[[\n        if(variables.ulm_custom_card_eraycetinay_lock_tap_control){\n          if(variables.ulm_custom_card_eraycetinay_lock_only_open){\n            return \"lock.open\";\n          } else {\n            if (entity.state == \"locked\"){\n                return \"lock.unlock\";\n            } else if (entity.state == \"unlocked\"){\n              return \"lock.lock\";\n            }\n          }\n        }\n      ]]]\n    # only related with perform-action\n    target:\n      entity_id: |\n        [[[ return entity.entity_id; ]]]\n  show_label: true\n  show_name: true\n  triggers_update:\n    - \"[[[ return entity.entity_id; ]]]\"\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  state:\n    - operator: \"template\"\n      value: |\n        [[[ return entity.state == (\"unlocked\" || \"open\" || \"opened\"); ]]]\n      styles:\n        icon:\n          - color: \"rgba(var(--color-yellow),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-yellow), 0.2)\"\n    - operator: \"template\"\n      value: |\n        [[[ return entity.state == \"locked\" || \"closed\"; ]]]\n      styles:\n        icon:\n          - color: \"rgba(var(--color-green),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-green), 0.2)\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - width: \"42px\"\n      - height: \"42px\"\n    grid:\n      - position: \"relative\"\n    custom_fields:\n      notification_locked_and_opened:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"28px\"\n        - top: \"-6px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: \"[[[ return 'rgba(var(--color-red),1)'; ]]]\"\n      notification_battery:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"-6px\"\n        - top: \"-6px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: |\n            [[[\n              if (variables.ulm_custom_card_eraycetinay_lock_battery_level !== undefined) {\n                if (variables.ulm_custom_card_eraycetinay_lock_battery_sensor_binary) {\n                  if (states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state == variables.ulm_custom_card_eraycetinay_lock_battery_sensor_binary_low_state) {\n                    return \"rgba(var(--color-red),1)\";\n                  }\n                } else {\n                  if (states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state <= variables.ulm_custom_card_eraycetinay_lock_battery_warning_low) {\n                    return \"rgba(var(--color-red),1)\";\n                  } else if (states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state <= variables.ulm_custom_card_eraycetinay_lock_battery_warning) {\n                    return \"rgba(var(--color-yellow),1)\";\n                  }\n                }\n              }\n            ]]]\n  custom_fields:\n    notification_locked_and_opened: >\n      [[[\n          if (variables.ulm_custom_card_eraycetinay_lock_door_open !== undefined && (entity.state === \"locked\" && states[variables.ulm_custom_card_eraycetinay_lock_door_open].state === \"on\")) {\n            return `<span title=\"${variables.ulm_custom_card_eraycetinay_lock_locked_and_opened}\"><ha-icon icon=\"mdi:door-open\" style=\"width: 12px; height: 12px; color: var(--primary-background-color);\"></ha-icon></span>`;\n          }\n      ]]]\n    notification_battery: >\n      [[[\n          if (variables.ulm_custom_card_eraycetinay_lock_battery_level !== undefined) {\n            if (variables.ulm_custom_card_eraycetinay_lock_battery_sensor_binary) {\n              if (states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state == variables.ulm_custom_card_eraycetinay_lock_battery_sensor_binary_low_state) {\n                return `<span title=\"${variables.ulm_custom_card_eraycetinay_lock_battery_is_low}\">\n                          <ha-icon icon=\"mdi:battery-low\" style=\"width: 12px; height: 12px; color: var(--primary-background-color);\"></ha-icon>\n                        </span>`;\n              }\n            } else {\n              if (variables.ulm_custom_card_eraycetinay_lock_battery_warning >= states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state) {\n                return `<span title=\"${variables.ulm_custom_card_eraycetinay_lock_battery_is_at} ${states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state}%\">\n                          <ha-icon icon=\"mdi:battery-low\" style=\"width: 12px; height: 12px; color: var(--primary-background-color);\"></ha-icon>\n                        </span>`;\n              }\n            }\n          }\n      ]]]\n
"},{"location":"usage/custom_cards/custom_card_esh_room/","title":"Custom Card Room","text":""},{"location":"usage/custom_cards/custom_card_esh_room/#custom-card-room","title":"Custom Card \"Room\"","text":""},{"location":"usage/custom_cards/custom_card_esh_room/#credits","title":"Credits","text":"
     
  • Authors:
       
    • Everything Smart Home - 2022
      •  
    • mpeterson
      •  
    • rensknoors
      •  
     
    •  
  • Full credit to user bms on the forum, they created the design and base of it in full, EverythingSmartHome put it into a PR as the basis
    •  
  • beasthouse and basbruss on the EverythingSmartHome discord channel for emoji/humidity customization
    •  
  • mpeterson added support for a switch to control climate and also to remove the need to have an entity associated
    •  
  • Version: 2.1.1
    •  
"},{"location":"usage/custom_cards/custom_card_esh_room/#changelog","title":"Changelog","text":"1.0.0 Initial release  2.0.0 Breaking changes! This change introduces two variables to allow the display of the card with no buttons, one for light, one for climate or both for light and climate. It also now allows the use of no entity at all.  2.0.1 Fixes text overflow issue over the climate button.  2.1.0 - It now uses the `ulm_actions_card` template, which allows the usage of the popups wherever custom actions are set as `popup`. - Allow overflowing label and text to the climate button area whenever there is no climate button.  2.1.1 Add support for the new popup framework while maintaining backwards compatibility with the old one.  2.2.0 Introduces a new variable that lets you set the card background to the color of a light entity."},{"location":"usage/custom_cards/custom_card_esh_room/#description","title":"Description","text":"
This is an alternative room card to the standard one that is more rectangular than square.
"},{"location":"usage/custom_cards/custom_card_esh_room/#variables","title":"Variables","text":"Variable Default Required Notes entity No The entity to represent on the room icon Name Yes Name of the room to display icon No The icon to show tap_action No The action to perform when tapping label No The label to display information, this can be a template or static text ulm_custom_card_esh_room_light_entity No The entity to use for the light button ulm_custom_card_esh_room_climate_entity No The entity to use for the climate button ulm_card_esh_room_light_icon_on No Customize the light ON icon ulm_card_esh_room_light_icon_off No Customize the light OFF icon ulm_card_light_enable_popup false No Enable popup_light ulm_card_thermostat_enable_popup false No Enable popup_thermostat ulm_card_dynamic_color false No Enables dynamic background color (requires ulm_custom_card_esh_room_light_entity)"},{"location":"usage/custom_cards/custom_card_esh_room/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template:\n    - card_esh_room\n    - yellow_on\n  name: Bathroom\n  entity: light.bathroom_lights\n  icon: mdi:bathtub\n  tap_action:\n    action: navigate\n    navigation_path: \"bathroom\"\n  variables:\n    ulm_custom_card_esh_room_light_entity: light.bathroom_lights\n    ulm_custom_card_esh_room_climate_entity: climate.bathroom\n  label: '[[[ return states[\"sensor.room_temperature\"].state + \"\u00b0C\" ]]]'\n
"},{"location":"usage/custom_cards/custom_card_esh_room/#customizations","title":"Customizations","text":"
To add both temperature and humidity (as shown below) to the card, replace the label section with this code: 
 
label: >\n  [[[\n    return \"\ud83c\udf21\ufe0f \" + states['sensor.temperature'].state + \" \u00b0C\" + \" \ud83d\udca7 \" + states['sensor.humidity'].state + \" %\"\n  ]]]\n
 
You can also replace \ud83c\udf21\ufe0f and \ud83d\udca7 with any desired Emoji, and sensor.room_temperature/sensor.room_humidity to match any of your HA entities you would like to be displayed. Ensure that the correct units of measurement are also updated (or removed) to match your custom entities. In this example they are \u00b0C and %.
"},{"location":"usage/custom_cards/custom_card_esh_room/#template-code","title":"Template code","text":"Template Code custom_card_esh_room.yaml
---\ncard_esh_room:\n  tap_action:\n    action: \"more-info\"\n  color: \"var(--google-grey-500)\"\n  show_icon: true\n  show_name: true\n  show_label: true\n  template:\n    - \"ulm_translation_engine\"\n  size: \"20px\"\n  variables:\n    ulm_custom_card_esh_room_light_entity: null\n    ulm_custom_card_esh_room_climate_entity: null\n    ulm_card_thermostat_enable_popup: false\n    ulm_card_light_enable_popup: false\n    ulm_card_dynamic_color: false\n    ulm_card_esh_room_light_icon_on: \"mdi:lightbulb\"\n    ulm_card_esh_room_light_icon_off: \"mdi:lightbulb-off\"\n  label: >-\n    [[[\n      var label_entity = variables.ulm_custom_card_esh_room_light_entity\n        ? states[variables.ulm_custom_card_esh_room_light_entity]\n        : entity;\n      if (!label_entity) {\n        return \"<br />\";\n      } else if (label_entity.state == \"on\") {\n        var bri = Math.round(label_entity.attributes.brightness / 2.55);\n        return (bri ? bri + \"%\" : variables.ulm_translation_state);\n      } else {\n        return variables.ulm_translation_state;\n      }\n    ]]]\n  styles:\n    card:\n      - border-radius: \"20px\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - background-color: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity) {\n              var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;\n              if (states[variables.ulm_custom_card_esh_room_light_entity].state == \"on\") {\n                if (color && variables.ulm_card_dynamic_color) {\n                  return 'rgba(' + color + ', 0.2)';\n                }\n                return 'rgba(var(--color-background-yellow), 0.2)';\n              }\n            }\n            return 'var(--ha-card-background, var(--card-background-color, white))';\n          ]]]\n    grid:\n      - grid-template-areas: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"'i light' 'n climate' 'l climate'\";\n            } else if (variables.ulm_custom_card_esh_room_light_entity) {\n              return \"'i light' 'n n' 'l l'\";\n            } else if (variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"'i .' 'n climate' 'l climate'\";\n            } else {\n              return \"'i .' 'n n' 'l l'\";\n            }\n          ]]]\n      - grid-template-columns: \"1fr 1fr\"\n      - grid-template-rows: \"min-content\"\n    icon:\n      - filter: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity\n                && states[variables.ulm_custom_card_esh_room_light_entity].state == \"on\"\n                && variables.ulm_card_dynamic_color) {\n              return \"contrast(0.6) saturate(1.7)\";\n            }\n          ]]]\n      - color: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity) {\n              var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;\n              if (states[variables.ulm_custom_card_esh_room_light_entity].state == \"on\") {\n                if (color && variables.ulm_card_dynamic_color) {\n                  return 'rgba(' + color + ', 1)';\n                }\n                return 'rgba(var(--color-yellow), 1)';\n              }\n            }\n            return 'rgba(var(--color-theme), 0.2)';\n          ]]]\n    img_cell:\n      - border-radius: \"50%\"\n      - place-self: \"flex-start\"\n      - width: \"42px\"\n      - height: \"42px\"\n      - margin-left: \"12px\"\n      - background-color: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity) {\n              var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;\n              if (states[variables.ulm_custom_card_esh_room_light_entity].state == \"on\") {\n                if (color && variables.ulm_card_dynamic_color) {\n                  return 'rgba(' + color + ', 0.3)';\n                }\n                return 'rgba(var(--color-yellow), 0.2)';\n              }\n            }\n            return 'rgba(var(--color-theme), 0.05)';\n          ]]]\n    name:\n      - align-self: \"end\"\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n      - margin-left: \"12px\"\n      - margin-top: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"8px\";\n            } else if (variables.ulm_custom_card_esh_room_light_entity) {\n              return \"12px\";\n            } else if (variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"8px\";\n            } else {\n              return \"12px\";\n            }\n          ]]]\n      - max-width: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"85%\";\n            } else if (variables.ulm_custom_card_esh_room_light_entity) {\n              return \"100%\";\n            } else if (variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"85%\";\n            } else {\n              return \"100%\";\n            }\n          ]]]\n      - color: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity) {\n              var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;\n              if (states[variables.ulm_custom_card_esh_room_light_entity].state == \"on\") {\n                if (color && variables.ulm_card_dynamic_color) {\n                  return 'rgba(' + color + ', 1)';\n                }\n                return 'rgba(var(color-yellow-text), 1)';\n              }\n              return 'rgba(var(--color-theme), 0.6)';\n            }\n            return 'rgba(var(--color-theme), 0.6)';\n          ]]]\n      - filter: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity\n                && states[variables.ulm_custom_card_esh_room_light_entity].state == \"on\"\n                && variables.ulm_card_dynamic_color) {\n              return \"contrast(0.6) saturate(1.7)\";\n            }\n          ]]]\n    label:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n      - margin-bottom: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"0px\";\n            } else if (variables.ulm_custom_card_esh_room_light_entity) {\n              return \"3px\";\n            } else if (variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"0px\";\n            } else {\n              return \"3px\";\n            }\n          ]]]\n      - max-width: >-\n          [[[\n            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"85%\";\n            } else if (variables.ulm_custom_card_esh_room_light_entity) {\n              return \"100%\";\n            } else if (variables.ulm_custom_card_esh_room_climate_entity) {\n              return \"85%\";\n            } else {\n              return \"100%\";\n            }\n          ]]]\n    state:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n    custom_fields:\n      light:\n        - display: >\n            [[[\n              if (variables.ulm_custom_card_esh_room_light_entity) {\n                  return \"block\";\n              } else {\n                  return \"none\";\n              }\n            ]]]\n      climate:\n        - display: >\n            [[[\n              if (variables.ulm_custom_card_esh_room_climate_entity) {\n                return \"block\";\n              } else {\n                return \"none\";\n              }\n            ]]]\n  custom_fields:\n    light:\n      card:\n        entity: \"[[[ return variables.ulm_custom_card_esh_room_light_entity ]]]\"\n        name: \"[[[ return name ]]]\"\n        state:\n          - value: \"on\"\n            icon: \"[[[ return variables.ulm_card_esh_room_light_icon_on; ]]]\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-yellow), 1)\"\n              img_cell:\n                - background-color: >-\n                    [[[\n                      if (variables.ulm_custom_card_esh_room_light_entity) {\n                        var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;\n                        if (color && variables.ulm_card_dynamic_color) {\n                          return 'rgba(' + color + ', 0.3)';\n                        }\n                      }\n                      return 'rgba(var(--color-yellow), 0.2)';\n                    ]]]\n          - value: \"off\"\n            icon: \"[[[ return variables.ulm_card_esh_room_light_icon_off; ]]]\"\n        type: \"custom:button-card\"\n        template:\n          - \"widget_icon\"\n          - \"ulm_actions_card\"\n          - \"ulm_custom_actions\"\n        variables: >\n          [[[\n            let vars = {};\n            vars.ulm_card_light_enable_popup = variables.ulm_card_light_enable_popup;\n            if (variables.ulm_card_light_enable_popup) {\n              vars.ulm_custom_popup = {\n                'template': 'popup_light_brightness',\n                'popup_variables': {\n                  'ulm_popup_light_entity': variables.ulm_custom_card_esh_room_light_entity,\n                }\n              };\n            }\n            return vars;\n          ]]]\n    climate:\n      card:\n        entity: \"[[[ return variables.ulm_custom_card_esh_room_climate_entity ]]]\"\n        name: \"[[[ return name ]]]\"\n        state:\n          - value: \"auto\"\n            icon: \"mdi:autorenew\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-green),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-green), 0.2)\"\n          - value: \"cool\"\n            icon: \"mdi:snowflake\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-blue),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-blue), 0.2)\"\n          - value: \"heat\"\n            icon: \"mdi:fire\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-red),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-red), 0.2)\"\n          - value: \"dry\"\n            icon: \"mdi:water\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-yellow),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-yellow), 0.2)\"\n          - value: \"heat_cool\"\n            icon: \"mdi:sun-snowflake\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-purple),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-purple), 0.2)\"\n          - value: \"fan_only\"\n            icon: \"mdi:fan\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-green),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-green), 0.2)\"\n          - value: \"off\"\n            icon: \"mdi:snowflake-off\"\n        type: \"custom:button-card\"\n        styles:\n          card:\n            - margin-top: \"5px\"\n        template:\n          - \"widget_icon\"\n          - \"ulm_actions_card\"\n          - \"ulm_custom_actions\"\n        variables: >\n          [[[\n            let vars = {};\n            vars.ulm_card_thermostat_enable_popup = variables.ulm_card_light_enable_popup;\n            if (variables.ulm_card_thermostat_enable_popup) {\n              vars.ulm_custom_popup = {\n                'template': 'popup_thermostat_temperature',\n                'popup_variables': {\n                  'ulm_popup_thermostat_entity': variables.ulm_custom_card_esh_room_climate_entity,\n                }\n              };\n            }\n            return vars;\n          ]]]\n
"},{"location":"usage/custom_cards/custom_card_esh_welcome/","title":"Custom Card Welcome Navigation","text":""},{"location":"usage/custom_cards/custom_card_esh_welcome/#custom-card-welcome-navigation","title":"Custom Card \"Welcome Navigation\"","text":""},{"location":"usage/custom_cards/custom_card_esh_welcome/#credits","title":"Credits","text":"
     
  • Author: Everything Smart Home - 2022
    •  
  • Credits to the welcome scenes card as the basis
    •  
  • Version: 1.1.0
    •  
"},{"location":"usage/custom_cards/custom_card_esh_welcome/#changelog","title":"Changelog","text":"1.1.0 
     Contributor: Sisimomo - 2022-06-12 
  • Now support from 0-5 navigation pill.
    •  
  • Added dynamic nav pill size.
    •  
  • Code refactoring to fit framework structure.
    •  
  • Code clean up.
    •  
 1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_esh_welcome/#description","title":"Description","text":"
This is a welcome card based on the welcome scenes card but replaces the scenes for page navigation instead.
"},{"location":"usage/custom_cards/custom_card_esh_welcome/#variables","title":"Variables","text":"Variable Default Required Notes ulm_card_esh_welcome_collapse No Enables the collapse function.  requires an input_boolean to track the state ulm_weather Yes This is your weather provider.  Example: weather.your_provider entity_ Yes Support almost all types of entities  Scenes do always show as off icon_ Yes The icon to show name_ Yes The name to show color_ Yes Color of the icon  Can choose between: blue, red, green, yellow, pink, purple nav_ Yes The page/view to navigate to"},{"location":"usage/custom_cards/custom_card_esh_welcome/#collapse","title":"Collapse","text":"
Note
 
This feature is fully optional. It requires some more manual configuration! You need to create a input_boolean in HA to track the state. See Docs. Furthermore, you need to add the input_boolean to the variable ulm_card_esh_welcome_collapse and to either the entity or triggers_update to make sure it directly refreshes the state.
 
Warning
 
Do not use triggers_update: \"all\"! This will lead to unwanted behavior with the random colors generator.
"},{"location":"usage/custom_cards/custom_card_esh_welcome/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: \"card_esh_welcome\"\n  triggers_update: \"input_boolean.welcome_toggle\"\n  variables:\n    ulm_card_esh_welcome_collapse: input_boolean.welcome_toggle\n    ulm_weather: \"weather.your_weather\"\n    entity_1:\n      nav: \"house\"\n      icon: \"mdi:home\"\n      name: \"House\"\n      color: \"blue\"\n    entity_2:\n      nav: \"lights\"\n      icon: \"mdi:lightbulb\"\n      name: \"Lights\"\n      color: \"yellow\"\n    entity_3:\n      nav: \"security\"\n      icon: \"mdi:shield\"\n      name: Secure\n      color: \"green\"\n    entity_4:\n      nav: \"network\"\n      icon: \"mdi:nas\"\n      name: Lab\n      color: \"purple\"\n    entity_5:\n      nav: \"network\"\n      icon: \"mdi:flask\"\n      name: Lab\n      color: \"red\"\n
"},{"location":"usage/custom_cards/custom_card_esh_welcome/#template-code","title":"Template code","text":"Template Code custom_card_esh_welcome.yaml
---\ncard_esh_welcome:\n  template: \"ulm_language_variables\"\n  variables:\n    ulm_weather: \"[[[ return variables.ulm_weather]]]\"\n    entity_1:\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_2:\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_3:\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_4:\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_5:\n      color: >\n        [[[\n          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n  show_icon: false\n  show_label: true\n  show_name: false\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){\n              return \"\\'item1\\' \\'item2\\' \";\n            } else {\n              return \"\\'item1\\' \\'item2\\' \\'item3\\'\";\n            }\n          ]]]\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n      - row-gap: \"0px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"10px\"\n      - cursor: \"default\"\n      - \"--mdc-ripple-press-opacity\": 0   # prevent click animation\n    custom_fields:\n      item3:\n        - display: >\n            [[[\n              if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){\n                return \"none\";\n              } else {\n                return \"block\";\n              }\n            ]]]\n      item4:\n        - display: >\n            [[[\n              if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){\n                return \"none\";\n              } else {\n                return \"block\";\n              }\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_esh_welcome_topbar\"\n        variables:\n          ulm_card_esh_welcome_collapse: \"[[[ return variables.ulm_card_esh_welcome_collapse ]]]\"\n          ulm_weather: \"[[[ return variables.ulm_weather]]]\"\n        styles:\n          card:\n            - border-radius: \"none\"\n            - box-shadow: \"none\"\n            - padding: \"4px\"\n            - margin-left: \"relative\"\n            - cursor: \"default\"\n            - \"--mdc-ripple-press-opacity\": 0   # prevent click animation\n    item2:\n      card:\n        type: \"custom:button-card\"\n        show_icon: false\n        show_label: false\n        show_name: true\n        show_entity_picture: false\n        name: |\n          [[[\n            var today = new Date();\n            var time = today.getHours()\n            let welcome = '';\n            if (time >= '18'){\n              welcome = variables.ulm_evening;\n            } else if (time >= '12'){\n              welcome = variables.ulm_afternoon;\n            } else if (time >= '5'){\n              welcome = variables.ulm_morning;\n            } else {\n              welcome = variables.ulm_hello;\n            }\n            return welcome + ', ' + '   <br>' + user.name + '!';\n          ]]]\n        styles:\n          name:\n            - align-self: \"start\"\n            - justify-self: \"start\"\n            - font-weight: \"bold\"\n            - font-size: \"24px\"\n            - margin-left: \"16px\"\n          grid:\n            - grid-template-areas: \"'i n' 'i l'\"\n            - grid-template-columns: \"min-content auto\"\n            - grid-template-rows: \"min-content min-content\"\n            - text-align: \"start\"\n          card:\n            - box-shadow: \"none\"\n            - padding-bottom: \"8px\"\n            - cursor: \"default\"\n            - \"--mdc-ripple-press-opacity\": 0   # prevent click animation\n    item3:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_esh_welcome_nav\"\n        styles:\n          card:\n            - border-radius: \"none\"\n            - box-shadow: \"none\"\n            - padding: \"4px\"\n            - cursor: \"default\"\n            - \"--mdc-ripple-press-opacity\": 0   # prevent click animation\n        variables:\n          entity_1: \"[[[ return variables.entity_1 ]]]\"\n          entity_2: \"[[[ return variables.entity_2 ]]]\"\n          entity_3: \"[[[ return variables.entity_3 ]]]\"\n          entity_4: \"[[[ return variables.entity_4 ]]]\"\n          entity_5: \"[[[ return variables.entity_5 ]]]\"\n\ncard_esh_welcome_title:\n  tap_action:\n    action: \"none\"\n  show_icon: false\n  show_label: true\n  show_name: true\n  styles:\n    label:\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"1rem\"\n      - opacity: \"0.4\"\n    name:\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"20px\"\n    grid:\n      - grid-template-areas: \"'n' 'l'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n    card:\n      - background-color: \"rgba(0,0,0,0)\"\n      - box-shadow: \"none\"\n      - height: \"auto\"\n      - width: \"auto\"\n      - margin-top: \"-10px\"\n      - margin-left: \"16px\"\n      - margin-bottom: \"-15px\"\n      - cursor: \"default\"\n      - \"--mdc-ripple-press-opacity\": 0   # prevent click animation\n\ncard_esh_welcome_nav:\n  show_icon: false\n  show_name: true\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: |\n          [[[\n            return \"'\" + [(variables.entity_1?.nav ? 'item1' : ''),\n                        (variables.entity_2?.nav ? 'item2' : ''),\n                        (variables.entity_3?.nav ? 'item3' : ''),\n                        (variables.entity_4?.nav ? 'item4' : ''),\n                        (variables.entity_5?.nav ? 'item5' : '')].join(' ') + \"'\";\n          ]]]\n      - grid-template-columns: |\n          [[[\n            return [(variables.entity_1?.nav ? '1fr' : ''),\n                    (variables.entity_2?.nav ? '1fr' : ''),\n                    (variables.entity_3?.nav ? '1fr' : ''),\n                    (variables.entity_4?.nav ? '1fr' : ''),\n                    (variables.entity_5?.nav ? '1fr' : '')].join(' ');\n          ]]]\n      - grid-template-rows: \"min-content\"\n      - justify-items: \"center\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - overflow: \"visible\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_esh_welcome_pill_nav\"\n        variables:\n          number_of_nav_pills: |\n            [[[\n              return [variables.entity_1?.nav,\n                      variables.entity_2?.nav,\n                      variables.entity_3?.nav,\n                      variables.entity_4?.nav,\n                      variables.entity_5?.nav].filter(el => el !== undefined).length;\n            ]]]\n          entity: \"[[[ return variables.entity_1; ]]]\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_esh_welcome_pill_nav\"\n        variables:\n          number_of_nav_pills: |\n            [[[\n              return [variables.entity_1?.nav,\n                      variables.entity_2?.nav,\n                      variables.entity_3?.nav,\n                      variables.entity_4?.nav,\n                      variables.entity_5?.nav].filter(el => el !== undefined).length;\n            ]]]\n          entity: \"[[[ return variables.entity_2; ]]]\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_esh_welcome_pill_nav\"\n        variables:\n          number_of_nav_pills: |\n            [[[\n              return [variables.entity_1?.nav,\n                      variables.entity_2?.nav,\n                      variables.entity_3?.nav,\n                      variables.entity_4?.nav,\n                      variables.entity_5?.nav].filter(el => el !== undefined).length;\n            ]]]\n          entity: \"[[[ return variables.entity_3; ]]]\"\n    item4:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_esh_welcome_pill_nav\"\n        variables:\n          number_of_nav_pills: |\n            [[[\n              return [variables.entity_1?.nav,\n                      variables.entity_2?.nav,\n                      variables.entity_3?.nav,\n                      variables.entity_4?.nav,\n                      variables.entity_5?.nav].filter(el => el !== undefined).length;\n            ]]]\n          entity: \"[[[ return variables.entity_4; ]]]\"\n    item5:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_esh_welcome_pill_nav\"\n        variables:\n          number_of_nav_pills: |\n            [[[\n              return [variables.entity_1?.nav,\n                      variables.entity_2?.nav,\n                      variables.entity_3?.nav,\n                      variables.entity_4?.nav,\n                      variables.entity_5?.nav].filter(el => el !== undefined).length;\n            ]]]\n          entity: \"[[[ return variables.entity_5; ]]]\"\n\ncard_esh_welcome_pill_nav:\n  tap_action:\n    action: \"navigate\"\n    navigation_path: \"[[[ return variables.entity?.nav; ]]]\"\n  show_icon: false\n  show_label: false\n  show_name: false\n  state:\n    - operator: \"template\"\n      value: \"[[[ return !variables.entity?.nav; ]]]\"\n      styles:\n        card:\n          - display: \"none\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"1fr 1fr\"\n      - row-gap: \"12px\"\n      - justify-items: \"center\"\n      - column-gap: \"auto\"\n    card:\n      - border-radius: \"50px\"\n      - place-self: \"center\"\n      - width: \"[[[ return (52 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]\"\n      - height: \"[[[ return (84 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]\"\n      - box-shadow: >\n          [[[\n            if (hass.themes.darkMode){\n              return \"0px 2px 4px 0px rgba(0,0,0,0.80)\";\n            } else {\n              return \"var(--box-shadow)\";\n            }\n          ]]]\n      - \"--mdc-ripple-press-opacity\": 0.12    # allow click animation\n  color: \"var(--google-grey)\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        tap_action:\n          action: \"navigate\"\n          navigation_path: \"[[[ return variables.entity?.nav; ]]]\"\n        show_icon: true\n        show_label: false\n        show_name: false\n        icon: \"[[[ return variables.entity?.icon ]]]\"\n        styles:\n          icon:\n            - color: \"[[[ return `rgba(var(--color-${variables.entity?.color}), 1)`;]]]\"\n            - width: \"[[[ return (20 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]\"\n          img_cell:\n            - background-color: \"[[[ return `rgba(var(--color-${variables.entity?.color}), 0.20)`;]]]\"\n            - border-radius: \"50%\"\n            - width: \"[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]\"\n            - height: \"[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]\"\n          grid:\n            - grid-template-areas: \"i\"\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"50px\"\n            - padding: \"5px\"\n        state:\n          - value: \"on\"\n            styles:\n              card:\n                - overflow: \"visible\"\n                - box-shadow: |\n                    [[[\n                      if (hass.themes.darkMode){\n                        return \"0px 2px 4px 0px rgba(0,0,0,0.80)\";\n                      } else {\n                        return \"var(--box-shadow)\";\n                      }\n                    ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        tap_action:\n          action: \"navigate\"\n          navigation_path: \"[[[ return variables.entity?.nav; ]]]\"\n        show_icon: false\n        show_label: false\n        name: \"[[[ return variables.entity?.name ]]]\"\n        styles:\n          name:\n            - font-weight: \"bold\"\n            - font-size: \"[[[ return (9.5 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]\"\n            - width: \"[[[ return (33 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]\"\n            - padding-bottom: \"7px\"\n          grid:\n            - grid-template-areas: \"n\"\n          card:\n            - box-shadow: \"none\"\n            - padding: \"0px 5px 5px 5px\"\n            - margin-top: \"-5px\"\n            - border-radius: \"50px\"\n\ncard_esh_welcome_topbar:\n  show_icon: false\n  show_label: false\n  show_name: true\n  styles:\n    grid:\n      - grid-template-areas: \"'item1 item2 item3'\"\n      - grid-template-columns: \"1fr 7fr 1fr\"\n      - grid-template-rows: \"min-content\"\n      - justify-items: \"center\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - cursor: \"default\"\n      - \"--mdc-ripple-press-opacity\": 0   # prevent click animation\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"chips\"\n        tap_action:\n          action: \"perform-action\"\n          perform_action: \"input_boolean.toggle\"\n          target:\n            entity_id: \"[[[ return variables.ulm_card_esh_welcome_collapse ]]]\"\n        show_icon: true\n        icon: \"mdi:chevron-up\"\n        entity: \"[[[ return variables.ulm_card_esh_welcome_collapse ]]]\"\n        styles:\n          grid:\n            - grid-template-areas: \"'i'\"\n          card:\n            - box-shadow: >\n                [[[\n                  if (hass.themes.darkMode){\n                    return \"0px 2px 4px 0px rgba(0,0,0,0.80)\";\n                  } else {\n                    return \"var(--box-shadow)\";\n                  }\n                ]]]\n            - visibility: \"[[[ return variables.ulm_card_esh_welcome_collapse ? 'visible' : 'hidden'; ]]]\"\n            - \"--mdc-ripple-press-opacity\": 0.12    # allow click animation\n        state:\n          - value: \"on\"\n            icon: \"mdi:chevron-down\"\n            styles:\n              icon:\n                - color: \"rgb(var(--color-theme))\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"chip_weather_date\"\n        variables:\n          ulm_weather: \"[[[ return variables.ulm_weather]]]\"\n        tap_action:\n          action: \"more-info\"\n        entity: \"[[[ return variables.ulm_weather]]]\"\n        styles:\n          card:\n            - width: \"100px\"\n            - box-shadow: >\n                [[[\n                  if (hass.themes.darkMode){\n                    return \"0px 2px 4px 0px rgba(0,0,0,0.80)\";\n                  } else {\n                    return \"var(--box-shadow)\";\n                  }\n                ]]]\n            - \"--mdc-ripple-press-opacity\": 0.12    # allow click animation\n    item3:\n      card:\n        type: \"custom:button-card\"\n        template: \"chip_mdi_icon_only\"\n        variables:\n          ulm_chip_mdi_icon_only_icon: \"mdi:cog-outline\"\n        tap_action:\n          action: \"navigate\"\n          navigation_path: \"/config/dashboard\"\n        styles:\n          card:\n            - align-self: \"end\"\n            - box-shadow: >\n                [[[\n                  if (hass.themes.darkMode){\n                    return \"0px 2px 4px 0px rgba(0,0,0,0.80)\";\n                  } else {\n                    return \"var(--box-shadow)\";\n                  }\n                ]]]\n            - \"--mdc-ripple-press-opacity\": 0.12    # allow click animation\n
"},{"location":"usage/custom_cards/custom_card_haven_washer/","title":"Washer/Dryer/Dishwasher Custom-card","text":""},{"location":"usage/custom_cards/custom_card_haven_washer/#custom-card-washer","title":"Custom-card \"Washer\"","text":"
Small layout when the washer, dryer or dishwasher is turned off (ulm_custom_card_washer_power === \"off\"). It shows the content of the idle label variable (ulm_custom_card_washer_label_idle)
 
 
When the washer, dryer or dishwasher is turned on the possible (job) stages of machine become visible (In this example the dryer has no different (job) stages so the stages remain closed)
 
 
When the washer, dryer or dishwasher is set to smart control (ulm_custom_card_washer_remote_control === \"true\"), you can start the machine from you app, or you can start it using automation. The buttons will reflect this stage change.
 
 
When you want to start the washer, dryer or dishwasher at a specific time (through automation) you can turn on the timer (press the icon and the ulm_custom_card_washer_delayed_start === \"on\") and set the time to start (use the up and down buttons of click on the time to set ulm_custom_card_washer_delayed_starttime (Time only)). It shows the content of the configuration label variable (ulm_custom_card_washer_label_configuring).
 
 
When the washer, dryer or dishwasher is running you can use the running label variable (ulm_custom_card_washer_label_running) to show the remaining time. The dryer can't be paused so the button is disabled.
 
!! Attention !!
 
This custom card is build based on a Samsung Washer and Dryer and based on the SmartThings Custom integration (installable using HACS: https://github.com/veista/smartthings). Other washer, dryers or dishwasher could work with this custom card, but might require some work. This card is highly configurable, but for the machine state you might need a template sensors to support the same terminology (run, pause, stop).
"},{"location":"usage/custom_cards/custom_card_haven_washer/#credits","title":"Credits","text":"
     
  • Author: Cruguah - 2023
    •  
  •  
    Version: 1.0.2
     
    •  
  •  
    Thanks to rphlwnk for sharing his code of his washing machine card.
     
    •  
  • Thanks to dougmaitelli for sharing his experience and configuration of his washing machine (LG SmartThinQ).
    •  
"},{"location":"usage/custom_cards/custom_card_haven_washer/#changelog","title":"Changelog","text":"1.0.2   Added an extra variable ulm_custom_card_washer_machine_stop_state to support more washers (LG SmartThinQ) #1268.   Thanks to dougmaitelli for pointing out this issue.  1.0.1   Small bug fix resolving issue #1230.  1.0.0   Initial release."},{"location":"usage/custom_cards/custom_card_haven_washer/#usage","title":"Usage","text":"
Example for Samsung SmartThings:
 
- type: \"custom:button-card\"\n  template: \"custom_card_haven_washer\"\n  variables:\n    ulm_custom_card_washer_power: switch.washingmachine_switch\n    ulm_custom_card_washer_remote_control: sensor.washingmachine_remote_control\n    ulm_custom_card_washer_machine_state: sensor.washingmachine_machine_state\n    ulm_custom_card_washer_job_state: sensor.washingmachine_job_state\n    ulm_custom_card_washer_job_states:\n      state1:\n        name: \"weightSensing\"\n        icon: \"mdi:scale\"\n      state2:\n        name: \"wash\"\n        icon: \"mdi:waves\"\n      state3:\n        name: \"rinse\"\n        icon: \"mdi:water\"\n      state4:\n        name: \"spin\"\n        icon: \"mdi:fan\"\n    ulm_custom_card_washer_delayed_start: input_boolean.washingmachine_latest_start\n    ulm_custom_card_washer_delayed_starttime: input_datetime.washingmachine_latest_starttime\n    ulm_custom_card_washer_label_idle: >\n      [[[\n        var name = states[\"sensor.washingmachine_energy\"].attributes.friendly_name;\n        var value = states[\"sensor.washingmachine_energy\"].state;\n        var measurement = states[\"sensor.washingmachine_energy\"].attributes.unit_of_measurement;\n        return name + \" \u2022 \" + value + \" \" + measurement;\n      ]]]\n    ulm_custom_card_washer_label_running: \"[[[ return states[\"sensor.washer_remaining_time\"].state; ]]]\"\n    ulm_custom_card_washer_label_configuring: >\n      [[[\n          var name = states[\"sensor.washer_actual_starttime\"].attributes.friendly_name;\n          var time = states[\"sensor.washer_actual_starttime\"].attributes.display_time;\n          return name + \" \u2022 \" + time;\n      ]]]\n    ulm_custom_card_washer_start_action:\n      action: \"call-service\"\n      service: switch.turn_on\n      service_data:\n        entity_id: switch.washer_run_action\n    ulm_custom_card_washer_pause_action:\n      action: \"call-service\"\n      service: switch.turn_on\n      service_data:\n        entity_id: switch.washer_pause_action\n    ulm_custom_card_washer_stop_action:\n      action: \"call-service\"\n      service: switch.turn_on\n      service_data:\n        entity_id: switch.washer_stop_action\n
 
Example for LG SmartThinQ
 
- type: \"custom:button-card\"\n  template: \"custom_card_haven_washer\"\n  variables:\n    ulm_custom_card_washer_power: sensor.washer\n    ulm_custom_card_washer_machine_state: sensor.washer_run_state\n    ulm_custom_card_washer_machine_stop_state: \"-\"\n    ulm_custom_card_washer_job_state: sensor.washer_run_state\n    ulm_custom_card_washer_job_states:\n      state1:\n        name: \"Detecting\"\n        icon: \"mdi:scale\"\n      state2:\n        name: \"Washing\"\n        icon: \"mdi:waves\"\n      state3:\n        name: \"Rinsing\"\n        icon: \"mdi:water\"\n      state4:\n        name: \"Spin\"\n        icon: \"mdi:fan\"\n    ulm_custom_card_washer_label_idle: >\n      [[[\n        return \"-\";\n      ]]]\n    ulm_custom_card_washer_label_running: >\n      [[[\n        return states[\"sensor.washer_remaining_time\"].state;\n      ]]]\n    ulm_custom_card_washer_label_configuring: >\n      [[[\n          var name = states[\"sensor.washer_initial_time\"].attributes.friendly_name;\n          var time = states[\"sensor.washer_initial_time\"].attributes.display_time;\n          return name + \" \u2022 \" + time;\n      ]]]\n
"},{"location":"usage/custom_cards/custom_card_haven_washer/#requirements","title":"Requirements","text":"
An integration that will support your washer, dryer, dishwasher or any other machine with job stages that you want to monitor.
 
When using a Samsung Washing machine or Dryer that integrates with SmartThings, a default integration is available in Home Assistant and this custom card works with this integration. One thing missing in the default SmartThings integration is the ability to see is remote control is enabled. A custom integration is available which extends the sensors with a remote control sensor. Integration from HACS: \"SmartThings Custom\" (https://github.com/veista/smartthings) from veista.
 
When using a LG Washing machine or Dryer or Dishwasher that integrates with LG SmartThinQ, a custom integration is available from HACS: \"LG ThinQ Devices integration for HomeAssistant\" (https://github.com/ollo69/ha-smartthinq-sensors) that works with this integration.
"},{"location":"usage/custom_cards/custom_card_haven_washer/#additional-show-the-remaining-time","title":"Additional: Show the remaining time","text":"
If you want to show the remaining time of your wash you can use the following template sensor to calculate duration.
 
template:\n  - sensor:\n      - unique_id: washer_remaining_time\n        name: \"Remaining Time\"\n        state: >-\n          {% set rem_h = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom(\"%-H\", false) %}\n          {% set rem_m = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom(\"%-M\", false) %}\n          {% if int(rem_h) > 0.9 %} {{ rem_h }} hour(s) and {{ rem_m }} minute(s)  {% else %} {{ rem_m }} minute(s) {% endif %}\n
"},{"location":"usage/custom_cards/custom_card_haven_washer/#additional-control-the-washing-machine-of-dryer-remotely","title":"Additional: Control the washing machine of dryer remotely","text":"
Starting, pausing or stopping the washer or dryer is currently not supported by the Samsung SmartThings integration. To use the start, pause, and stop buttons, you can create command line switches, which can initiate the corresponding action. When creating a command-line switch, you need to replace the following items:
 Variable Explanation action this should be run, pause or stop deviceId The id of your device (guid) PAT Token The same PAT Token you\"ve created during the installation of the SmartThings integration 
For every action you need to create an other command-line switch.
 
Please ensure the capabilities of you machine before creating command-line switches.
 
switch:\n  - platform: command_line\n    switches:\n      washer_run_action:\n        unique_id: switch.washer_<action>_action\n        value_template: >\n          {% if is_state(\"switch.washer_<action>_action\", \"on\") %}\n            false\n          {% endif %}\n        command_on: >\n          curl --location --request POST \"https://api.smartthings.com/v1/devices/<deviceId>/commands\" --header \"authorization: Bearer <PAT Token>\" --header  \"Content-Type: text/plain\" --data-raw \"[{\"capability\":\"washerOperatingState\",\"command\":\"setMachineState\",\"arguments\":[\"<action>\"]}]\"\n
"},{"location":"usage/custom_cards/custom_card_haven_washer/#variables","title":"Variables","text":""},{"location":"usage/custom_cards/custom_card_haven_washer/#main-parameters","title":"Main parameters","text":"Variable Example Required Explanation ulm_custom_card_washer_power switch.washingmachine_switch yes Is the washing machine or dryer turned on? ulm_custom_card_washer_remote_control sensor.washingmachine_remote_control no Can we control the washing machine or dryer remotely ulm_custom_card_washer_machine_state sensor.washingmachine_machine_state no What is the current state of washing machine or dryer: none, run or pause ulm_custom_card_washer_machine_stop_state \"stop\" no What is the value for the stop stage of the ulm_custom_card_washer_machine_state ulm_custom_card_washer_job_state sensor.washingmachine_job_state no What is the current step in the program, weightSensing, wash, rinse, spin or drying ulm_custom_card_washer_job_states List of maximum 5 states (name and icon) to show as job states no Define the job states of the washing machine of dryer (or any other machine that you wanna use) ulm_custom_card_washer_delayed_start input_boolean.washingmachine_latest_start no Turn on the ability to start the washing machine of dryer at a specific time ulm_custom_card_washer_delayed_starttime input_datetime.washingmachine_latest_starttime no What time should the washing machine or dryer start ulm_custom_card_washer_label_idle Any text, for example the number of runs no What label to show when the washing machine or dryer is idle ulm_custom_card_washer_label_running Any text, for example the remaining time of the current program no What label to show when the washing machine or dryer is running ulm_custom_card_washer_label_configuring Any text, for example, the end result of all the settings no What label to show when the washing machine or dryer is being configured ulm_custom_card_washer_start_action A collection of setting to change a value or start an action no This contains all the parameters to start the washing machine or dryer (See the next table) ulm_custom_card_washer_pause_action A collection of setting to change a value or start an action no This contains all the parameters to pause the washing machine or dryer (See the next table) ulm_custom_card_washer_stop_action A collection of setting to change a value or start an action no This contains all the parameters to stop the washing machine or dryer (See the next table)"},{"location":"usage/custom_cards/custom_card_haven_washer/#parameters-specific-for-the-start-pause-and-stop-of-the-washing-machine-of-dryer","title":"Parameters specific for the start, pause and stop of the washing machine of dryer","text":"Variable Example Required Explanation action none no Action to perform (more-info, toggle, call-service, navigate, url, none) Default: none entity entity_id no Entity id to call the action on navigation_path The navigation path for the call no Path to navigate to (e.g., /lovelace/0/) when action defined as navigate url_path The url path for the call no Path to navigate to (e.g., https://www.home-assistant.io) when action defined as url service The service to call the action on no Service to call (e.g., media_player.media_play_pause) when action defined as call-service service_data The service_data to call the action on no Service data to include (e.g., entity_id: media_player.bedroom) when action defined as call-service Template Code custom_card_haven_washer.yaml
---\ncustom_card_haven_washer:\n  template:\n    - \"ulm_language_variables\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_custom_card_washer_power:\n    ulm_custom_card_washer_remote_control:\n    ulm_custom_card_washer_machine_state:\n    ulm_custom_card_washer_machine_stop_state: \"stop\"\n    ulm_custom_card_washer_job_state:\n    ulm_custom_card_washer_label_idle: \"idle\"\n    ulm_custom_card_washer_label_configuring: \"configure\"\n    ulm_custom_card_washer_label_running: \"run\"\n    ulm_custom_card_washer_delayed_start:\n    ulm_custom_card_washer_delayed_starttime:\n    ulm_custom_card_washer_job_states:\n      state1:\n        name:\n        icon:\n      state2:\n        name:\n        icon:\n      state3:\n        name:\n        icon:\n      state4:\n        name:\n        icon:\n      state5:\n        name:\n        icon:\n    ulm_custom_card_washer_start_action:\n      action: \"none\"\n    ulm_custom_card_washer_pause_action:\n      action: \"none\"\n    ulm_custom_card_washer_stop_action:\n      action: \"none\"\n  triggers_update: \"all\"\n  show_icon: false\n  show_label: false\n  show_name: false\n  show_state: false\n  show_last_changed: false\n  show_entity_picture: false\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            var rows = [\"\\'row1\\'\"];\n\n            if (!!variables.ulm_custom_card_washer_job_state) {\n              rows.push(\"\\'row2\\'\");\n            }\n\n            if (!!variables.ulm_custom_card_washer_remote_control) {\n              rows.push(\"\\'row3\\'\");\n            }\n\n            if (!!variables.ulm_custom_card_washer_delayed_start\n              && !!variables.ulm_custom_card_washer_delayed_starttime) {\n              rows.push(\"\\'row4\\'\");\n            }\n\n            return rows.join(\" \");\n          ]]]\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content\"\n      - row-gap: \"0px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n    custom_fields:\n      row2:\n        - display: >\n            [[[\n              return (!!variables.ulm_custom_card_washer_job_state\n                && !!variables.ulm_custom_card_washer_power\n                && !!states[variables.ulm_custom_card_washer_power]?.state\n                && states[variables.ulm_custom_card_washer_power].state === \"on\") ? \"block\" : \"none\";\n            ]]]\n      row3:\n        - display: >\n            [[[\n              return (!!variables.ulm_custom_card_washer_power\n                && !!states[variables.ulm_custom_card_washer_power]?.state\n                && states[variables.ulm_custom_card_washer_power].state === \"on\"\n                && !!variables.ulm_custom_card_washer_remote_control\n                && !!states[variables.ulm_custom_card_washer_remote_control]?.state\n                && states[variables.ulm_custom_card_washer_remote_control].state === \"true\") ? \"block\" : \"none\";\n            ]]]\n      row4:\n        - display: >\n            [[[\n              return (!!variables.ulm_custom_card_washer_power\n                && !!states[variables.ulm_custom_card_washer_power]?.state\n                && states[variables.ulm_custom_card_washer_power].state === \"on\"\n                && !!variables.ulm_custom_card_washer_remote_control\n                && !!states[variables.ulm_custom_card_washer_remote_control]?.state\n                && states[variables.ulm_custom_card_washer_remote_control].state === \"true\"\n                && !!variables.ulm_custom_card_washer_delayed_start\n                && !!states[variables.ulm_custom_card_washer_delayed_start]?.state\n                && states[variables.ulm_custom_card_washer_delayed_start].state === \"on\"\n                && !!variables.ulm_custom_card_washer_delayed_starttime) ? \"block\" : \"none\";\n            ]]]\n  custom_fields:\n    row1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info\"\n          - \"blue_on\"\n        tap_action:\n          action: \"more-info\"\n        label: >\n          [[[\n            if (!!variables.ulm_custom_card_washer_power\n              && !!states[variables.ulm_custom_card_washer_power]?.state\n              && states[variables.ulm_custom_card_washer_power].state === \"on\") {\n              if (!!variables.ulm_custom_card_washer_machine_state\n                && !!states[variables.ulm_custom_card_washer_machine_state]?.state\n                && states[variables.ulm_custom_card_washer_machine_state].state !== variables.ulm_custom_card_washer_machine_stop_state) {\n                if (!!variables.ulm_custom_card_washer_label_running) {\n                  return variables.ulm_custom_card_washer_label_running;\n                }\n              } else {\n                if (!!variables.ulm_custom_card_washer_remote_control\n                  && !!states[variables.ulm_custom_card_washer_remote_control]?.state\n                  && states[variables.ulm_custom_card_washer_remote_control].state === \"true\"\n                  && !!variables.ulm_custom_card_washer_delayed_start\n                  && !!states[variables.ulm_custom_card_washer_delayed_start]?.state\n                  && states[variables.ulm_custom_card_washer_delayed_start].state === \"on\") {\n                  if (!!variables.ulm_custom_card_washer_label_configuring) {\n                    return variables.ulm_custom_card_washer_label_configuring;\n                  }\n                } else {\n                  if (!!variables.ulm_custom_card_washer_label_idle) {\n                    return variables.ulm_custom_card_washer_label_idle;\n                  }\n                }\n              }\n            } else {\n              if (!!variables.ulm_custom_card_washer_label_idle) {\n                return variables.ulm_custom_card_washer_label_idle;\n              }\n            }\n\n            var label = states[variables.ulm_custom_card_washer_power].state;\n            label = variables[\"ulm_\" + label] ?? label;\n\n            if (!!variables.ulm_custom_card_washer_machine_state\n              && !!states[variables.ulm_custom_card_washer_machine_state]\n              && !!states[variables.ulm_custom_card_washer_machine_state].state) {\n              var state = states[variables.ulm_custom_card_washer_machine_state].state;\n              label += \" \u2022 \" + variables[\"ulm_\" + state] ?? state;\n            }\n\n            return label;\n          ]]]\n        entity: \"[[[ return variables.ulm_custom_card_washer_power; ]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - padding: \"0px\"\n    row2:\n      card:\n        type: \"custom:button-card\"\n        styles:\n          img_cell:\n            - justify-items: \"center\"\n          grid:\n            - grid-template-areas: >\n                [[[\n                  var items = [];\n\n                  if (!!variables.ulm_custom_card_washer_job_states) {\n                    if (!!variables.ulm_custom_card_washer_job_states.state1?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state1?.icon) {\n                      items.push(\"item1\");\n                    }\n                    if (!!variables.ulm_custom_card_washer_job_states.state2?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state2?.icon) {\n                      items.push(\"item2\");\n                    }\n                    if (!!variables.ulm_custom_card_washer_job_states.state3?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state3?.icon) {\n                      items.push(\"item3\");\n                    }\n                    if (!!variables.ulm_custom_card_washer_job_states.state4?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state4?.icon) {\n                      items.push(\"item4\");\n                    }\n                    if (!!variables.ulm_custom_card_washer_job_states.state5?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state5?.icon) {\n                      items.push(\"item5\");\n                    }\n                  }\n\n                  return \"\\'\" + items.join(\" \") + \"\\'\";\n                ]]]\n            - grid-template-columns: >\n                [[[\n                  var columns = [];\n\n                  if (!!variables.ulm_custom_card_washer_job_states) {\n                    if (!!variables.ulm_custom_card_washer_job_states.state1?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state1?.icon) {\n                      columns.push(\"1fr\");\n                    }\n                    if (!!variables.ulm_custom_card_washer_job_states.state2?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state2?.icon) {\n                      columns.push(\"1fr\");\n                    }\n                    if (!!variables.ulm_custom_card_washer_job_states.state3?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state3?.icon) {\n                      columns.push(\"1fr\");\n                    }\n                    if (!!variables.ulm_custom_card_washer_job_states.state4?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state4?.icon) {\n                      columns.push(\"1fr\");\n                    }\n                    if (!!variables.ulm_custom_card_washer_job_states.state5?.name\n                      && !!variables.ulm_custom_card_washer_job_states.state5?.icon) {\n                      columns.push(\"1fr\");\n                    }\n                  }\n\n                  return columns.join(\" \");\n                ]]]\n            - grid-template-rows: \"min-content\"\n            - column-gap: \"7px\"\n            - justify-items: \"center\"\n          card:\n            - padding: \"0px\"\n            - box-shadow: \"none\"\n            - margin-top: \"12px\"\n            - border-radius: \"var(--border-radius)\"\n            - pointer-events: \"none\"\n            - background-color: \"rgba(var(--color-theme), 0.05)\"\n            - justify-items: \"center\"\n          custom_fields:\n            item1:\n              - display: >\n                  [[[\n                    return (!!variables.ulm_custom_card_washer_job_states?.state1\n                      && !!variables.ulm_custom_card_washer_job_states.state1.name\n                      && !!variables.ulm_custom_card_washer_job_states.state1.icon) ? \"block\" : \"none\";\n                  ]]]\n            item2:\n              - display: >\n                  [[[\n                    return (!!variables.ulm_custom_card_washer_job_states?.state2\n                      && !!variables.ulm_custom_card_washer_job_states.state2.name\n                      && !!variables.ulm_custom_card_washer_job_states.state2.icon) ? \"block\" : \"none\";\n                  ]]]\n            item3:\n              - display: >\n                  [[[\n                    return (!!variables.ulm_custom_card_washer_job_states?.state3\n                      && !!variables.ulm_custom_card_washer_job_states.state3.name\n                      && !!variables.ulm_custom_card_washer_job_states.state3.icon) ? \"block\" : \"none\";\n                  ]]]\n            item4:\n              - display: >\n                  [[[\n                    return (!!variables.ulm_custom_card_washer_job_states?.state4\n                      && !!variables.ulm_custom_card_washer_job_states.state4.name\n                      && !!variables.ulm_custom_card_washer_job_states.state4.icon) ? \"block\" : \"none\";\n                  ]]]\n            item5:\n              - display: >\n                  [[[\n                    return (!!variables.ulm_custom_card_washer_job_states?.state5\n                      && !!variables.ulm_custom_card_washer_job_states.state5.name\n                      && !!variables.ulm_custom_card_washer_job_states.state5.icon) ? \"block\" : \"none\";\n                  ]]]\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_card_haven_washer_state\"\n              icon: >\n                [[[\n                  return (!!variables.ulm_custom_card_washer_job_states?.state1\n                    && !!variables.ulm_custom_card_washer_job_states.state1.icon)\n                      ? variables.ulm_custom_card_washer_job_states.state1.icon\n                      : \"mdi:cancel\";\n                ]]]\n              state:\n                - value: >\n                    [[[\n                      return (!!variables.ulm_custom_card_washer_job_states?.state1\n                        && !!variables.ulm_custom_card_washer_job_states.state1.name)\n                          ? variables.ulm_custom_card_washer_job_states.state1.name\n                          : \"unknown\";\n                    ]]]\n                  styles:\n                    icon:\n                      - transform: \"scale(1.2)\"\n                      - color: \"black\"\n                    card:\n                      - background-color: \"white\"\n              entity: \"[[[ return variables.ulm_custom_card_washer_job_state; ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_card_haven_washer_state\"\n              icon: >\n                [[[\n                  return (!!variables.ulm_custom_card_washer_job_states?.state2\n                    && !!variables.ulm_custom_card_washer_job_states.state2.icon)\n                      ? variables.ulm_custom_card_washer_job_states.state2.icon\n                      : \"mdi:cancel\";\n                ]]]\n              state:\n                - value: >\n                    [[[\n                      return (!!variables.ulm_custom_card_washer_job_states?.state2\n                        && !!variables.ulm_custom_card_washer_job_states.state2.name)\n                          ? variables.ulm_custom_card_washer_job_states.state2.name\n                          : \"unknown\";\n                    ]]]\n                  styles:\n                    icon:\n                      - transform: \"scale(1.2)\"\n                      - color: \"black\"\n                    card:\n                      - background-color: \"white\"\n              entity: \"[[[ return variables.ulm_custom_card_washer_job_state; ]]]\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_card_haven_washer_state\"\n              icon: >\n                [[[\n                  return (!!variables.ulm_custom_card_washer_job_states?.state3\n                    && !!variables.ulm_custom_card_washer_job_states.state3.icon)\n                      ? variables.ulm_custom_card_washer_job_states.state3.icon\n                      : \"mdi:cancel\";\n                ]]]\n              state:\n                - value: >\n                    [[[\n                      return (!!variables.ulm_custom_card_washer_job_states?.state3\n                        && !!variables.ulm_custom_card_washer_job_states.state3.name)\n                          ? variables.ulm_custom_card_washer_job_states.state3.name\n                          : \"unknown\";\n                    ]]]\n                  styles:\n                    icon:\n                      - transform: \"scale(1.2)\"\n                      - color: \"black\"\n                    card:\n                      - background-color: \"white\"\n              entity: \"[[[ return variables.ulm_custom_card_washer_job_state; ]]]\"\n          item4:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_card_haven_washer_state\"\n              icon: >\n                [[[\n                  return (!!variables.ulm_custom_card_washer_job_states?.state4\n                    && !!variables.ulm_custom_card_washer_job_states.state4.icon)\n                      ? variables.ulm_custom_card_washer_job_states.state4.icon\n                      : \"mdi:cancel\";\n                ]]]\n              state:\n                - value: >\n                    [[[\n                      return (!!variables.ulm_custom_card_washer_job_states?.state4\n                        && !!variables.ulm_custom_card_washer_job_states.state4.name)\n                          ? variables.ulm_custom_card_washer_job_states.state4.name\n                          : \"unknown\";\n                    ]]]\n                  styles:\n                    icon:\n                      - transform: \"scale(1.2)\"\n                      - color: \"black\"\n                    card:\n                      - background-color: \"white\"\n              entity: \"[[[ return variables.ulm_custom_card_washer_job_state; ]]]\"\n          item5:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_card_haven_washer_state\"\n              icon: >\n                [[[\n                  return (!!variables.ulm_custom_card_washer_job_states?.state5\n                    && !!variables.ulm_custom_card_washer_job_states.state5.icon)\n                      ? variables.ulm_custom_card_washer_job_states.state5.icon\n                      : \"mdi:cancel\";\n                ]]]\n              state:\n                - value: >\n                    [[[\n                      return (!!variables.ulm_custom_card_washer_job_states?.state5\n                        && !!variables.ulm_custom_card_washer_job_states.state5.name)\n                          ? variables.ulm_custom_card_washer_job_states.state5.name\n                          : \"unknown\";\n                    ]]]\n                  styles:\n                    icon:\n                      - transform: \"scale(1.2)\"\n                      - color: \"black\"\n                    card:\n                      - background-color: \"white\"\n              entity: \"[[[ return variables.ulm_custom_card_washer_job_state ]]]\"\n    row3:\n      card:\n        type: \"custom:button-card\"\n        template: >\n          [[[\n            return !!variables.ulm_custom_card_washer_delayed_start\n              && !!variables.ulm_custom_card_washer_delayed_starttime ? \"list_3_items\" : \"list_2_items\";\n          ]]]\n        styles:\n          card:\n            - padding: \"0px\"\n            - margin-top: \"12px\"\n          custom_fields:\n            item3:\n              - display: >\n                  [[[\n                    return (!!variables.ulm_custom_card_washer_delayed_start\n                      && !!variables.ulm_custom_card_washer_delayed_starttime) ? \"block\" : \"none\";\n                  ]]]\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: >\n                  [[[\n                    if (!!states[variables.ulm_custom_card_washer_machine_state]?.state\n                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state) {\n                      return variables.ulm_custom_card_washer_start_action?.action ?? \"none\";\n                    } else {\n                      return variables.ulm_custom_card_washer_pause_action?.action ?? \"none\";\n                    }\n                  ]]]\n                entity: \"[[[ return variables.ulm_custom_card_washer_start_action.entity; ]]]\"\n                navigation_path: >\n                  [[[\n                    return (!!states[variables.ulm_custom_card_washer_machine_state]?.state\n                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)\n                      ? variables.ulm_custom_card_washer_start_action?.navigation_path\n                      : variables.ulm_custom_card_washer_pause_action?.navigation_path;\n                  ]]]\n                url_path: >\n                  [[[\n                    return (!!states[variables.ulm_custom_card_washer_machine_state]?.state\n                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)\n                      ? variables.ulm_custom_card_washer_start_action?.url_path\n                      : variables.ulm_custom_card_washer_pause_action?.url_path;\n                  ]]]\n                service: >\n                  [[[\n                    return (!!states[variables.ulm_custom_card_washer_machine_state]?.state\n                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)\n                      ? variables.ulm_custom_card_washer_start_action?.service\n                      :  variables.ulm_custom_card_washer_pause_action?.service;\n                  ]]]\n                service_data: >\n                  [[[\n                    return (!!states[variables.ulm_custom_card_washer_machine_state]?.state\n                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)\n                      ? variables.ulm_custom_card_washer_start_action?.service_data\n                      : variables.ulm_custom_card_washer_pause_action?.service_data;\n                  ]]]\n              icon: >\n                [[[\n                  return (!!states[variables.ulm_custom_card_washer_machine_state]?.state\n                    && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state) ? \"mdi:play\" : \"mdi:pause\";\n                ]]]\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return ((states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state\n                          && (!variables.ulm_custom_card_washer_start_action?.action\n                            || (!!variables.ulm_custom_card_washer_start_action?.action\n                              && variables.ulm_custom_card_washer_start_action.action === \"none\")))\n                        || (states[variables.ulm_custom_card_washer_machine_state].state !== variables.ulm_custom_card_washer_machine_stop_state\n                          && (!variables.ulm_custom_card_washer_pause_action?.action\n                            || (!!variables.ulm_custom_card_washer_pause_action?.action\n                              && variables.ulm_custom_card_washer_pause_action.action === \"none\"))));\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.2)\"\n              entity: \"[[[ return variables.ulm_custom_card_washer_machine_state; ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: >\n                  [[[\n                    return (!!variables.ulm_custom_card_washer_machine_state\n                      && !!states[variables.ulm_custom_card_washer_machine_state]?.state\n                      && states[variables.ulm_custom_card_washer_machine_state].state !== variables.ulm_custom_card_washer_machine_stop_state\n                      && variables.ulm_custom_card_washer_stop_action?.action) ?? \"none\";\n                  ]]]\n                entity: \"[[[ return variables.ulm_custom_card_washer_stop_action.entity; ]]]\"\n                navigation_path: \"[[[ return variables.ulm_custom_card_washer_stop_action.navigation_path; ]]]\"\n                url_path: \"[[[ return variables.ulm_custom_card_washer_stop_action.url_path; ]]]\"\n                service: \"[[[ return variables.ulm_custom_card_washer_stop_action.service; ]]]\"\n                service_data: \"[[[ return variables.ulm_custom_card_washer_stop_action.service_data; ]]]\"\n              icon: \"mdi:stop\"\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return ((!!variables.ulm_custom_card_washer_machine_state\n                          && !!states[variables.ulm_custom_card_washer_machine_state]?.state\n                          && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)\n                        || !variables.ulm_custom_card_washer_stop_action?.action\n                        || (!!variables.ulm_custom_card_washer_stop_action?.action\n                          && variables.ulm_custom_card_washer_stop_action.action === \"none\"));\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.2)\"\n              entity: \"[[[ return variables.ulm_custom_card_washer_machine_state ]]]\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"widget_icon\"\n                - \"green_on\"\n              tap_action:\n                action: >\n                  [[[\n                    return (!!variables.ulm_custom_card_washer_machine_state\n                      && !!states[variables.ulm_custom_card_washer_machine_state]?.state\n                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)\n                        ? \"toggle\"\n                        : \"none\";\n                  ]]]\n              state:\n                - operator: \"template\"\n                  value: >\n                    [[[\n                      return (!!variables.ulm_custom_card_washer_machine_state\n                        && !!states[variables.ulm_custom_card_washer_machine_state]?.state\n                        && states[variables.ulm_custom_card_washer_machine_state].state !== variables.ulm_custom_card_washer_machine_stop_state);\n                    ]]]\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.2)\"\n              entity: \"[[[ return variables.ulm_custom_card_washer_delayed_start; ]]]\"\n    row4:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        styles:\n          card:\n            - padding: \"0px\"\n            - margin-top: \"12px\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_custom_card_washer_delayed_starttime; ]]]\"\n                data:\n                  time: >\n                    [[[\n                      if (!!variables.ulm_custom_card_washer_delayed_starttime\n                        && !!states[variables.ulm_custom_card_washer_delayed_starttime]?.attributes) {\n                        var timestamp = states[variables.ulm_custom_card_washer_delayed_starttime].attributes.timestamp\n\n                        let unix_timestamp = timestamp - 4500;\n                        // Create a new JavaScript Date object based on the timestamp\n                        // multiplied by 1000 so that the argument is in milliseconds, not seconds.\n                        var date = new Date(unix_timestamp * 1000);\n                        // Hours part from the timestamp\n                        var hours = date.getHours();\n                        // Minutes part from the timestamp\n                        var minutes = \"0\" + date.getMinutes();\n                        // Seconds part from the timestamp\n                        var seconds = \"0\" + date.getSeconds();\n                        // Will display time in 10:30:23 format\n                        return hours + \":\" + minutes.substr(-2) + \":\" + seconds.substr(-2);\n                      } else {\n                        return \"00:00:00\";\n                      }\n                    ]]]\n              icon: \"mdi:arrow-down\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_card_haven_washer_delayed_text\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_custom_card_washer_delayed_starttime; ]]]\"\n                data:\n                  time: >\n                    [[[\n                      if (!!variables.ulm_custom_card_washer_delayed_starttime\n                        && !!states[variables.ulm_custom_card_washer_delayed_starttime]?.attributes) {\n                        var timestamp = states[variables.ulm_custom_card_washer_delayed_starttime].attributes.timestamp\n\n                        let unix_timestamp = timestamp - 3540;\n                        // Create a new JavaScript Date object based on the timestamp\n                        // multiplied by 1000 so that the argument is in milliseconds, not seconds.\n                        var date = new Date(unix_timestamp * 1000);\n                        // Hours part from the timestamp\n                        var hours = date.getHours();\n                        // Minutes part from the timestamp\n                        var minutes = \"0\" + date.getMinutes();\n                        // Seconds part from the timestamp\n                        var seconds = \"0\" + date.getSeconds();\n                        // Will display time in 10:30:23 format\n                        return  hours + \":\" + minutes.substr(-2) + \":\" + seconds.substr(-2);\n                      } else {\n                        return \"00:00:00\";\n                      }\n                    ]]]\n              hold_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ variables.ulm_custom_card_washer_delayed_starttime ]]]\"\n                data:\n                  time: >\n                    [[[\n                      if (!!variables.ulm_custom_card_washer_delayed_starttime\n                        && !!states[variables.ulm_custom_card_washer_delayed_starttime]?.attributes) {\n                        var timestamp = states[variables.ulm_custom_card_washer_delayed_starttime].attributes.timestamp\n\n                        let unix_timestamp = timestamp - 3660;\n                        // Create a new JavaScript Date object based on the timestamp\n                        // multiplied by 1000 so that the argument is in milliseconds, not seconds.\n                        var date = new Date(unix_timestamp * 1000);\n                        // Hours part from the timestamp\n                        var hours = date.getHours();\n                        // Minutes part from the timestamp\n                        var minutes = \"0\" + date.getMinutes();\n                        // Seconds part from the timestamp\n                        var seconds = \"0\" + date.getSeconds();\n                        // Will display time in 10:30:23 format\n                        return hours + \":\" + minutes.substr(-2) + \":\" + seconds.substr(-2);\n                      } else {\n                        return \"00:00:00\";\n                      }\n                    ]]]\n              entity: \"[[[ return variables.ulm_custom_card_washer_delayed_starttime; ]]]\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_custom_card_washer_delayed_starttime ]]]\"\n                data:\n                  time: >\n                    [[[\n                      if (!!variables.ulm_custom_card_washer_delayed_starttime\n                        && !!states[variables.ulm_custom_card_washer_delayed_starttime]?.attributes) {\n                        var timestamp = states[variables.ulm_custom_card_washer_delayed_starttime].attributes.timestamp\n                        let unix_timestamp = timestamp - 2700;\n                        // Create a new JavaScript Date object based on the timestamp\n                        // multiplied by 1000 so that the argument is in milliseconds, not seconds.\n                        var date = new Date(unix_timestamp * 1000);\n                        // Hours part from the timestamp\n                        var hours = date.getHours();\n                        // Minutes part from the timestamp\n                        var minutes = \"0\" + date.getMinutes();\n                        // Seconds part from the timestamp\n                        var seconds = \"0\" + date.getSeconds();\n                        // Will display time in 10:30:23 format\n                        return hours + \":\" + minutes.substr(-2) + \":\" + seconds.substr(-2);\n                      } else {\n                        return \"00:00:00\";\n                      }\n                    ]]]\n              icon: \"mdi:arrow-up\"\n\ncustom_card_haven_washer_state:\n  show_icon: true\n  show_name: false\n  tap_action:\n    action: \"none\"\n  size: \"20px\"\n  styles:\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - height: \"42px\"\n      - width: \"42px\"\n      - pointer-events: \"auto\"\n      - background-color: \"transparent\"\n    grid:\n      - grid-template-areas: \"'i'\"\n    icon:\n      - color: \"var(--google-grey)\"\n\ncustom_card_haven_washer_delayed_text:\n  template:\n    - \"ulm_translation_engine\"\n  tap_action:\n    action: \"toggle\"\n  show_icon: false\n  show_label: true\n  show_name: false\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  styles:\n    state:\n      - color: \"rgba(var(--color-theme),0.9)\"\n    grid:\n      - grid-template-areas: \"'l'\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"14px\"\n      - place-self: \"center\"\n      - height: \"42px\"\n  size: \"20px\"\n  color: \"var(--google-grey)\"\n
"},{"location":"usage/custom_cards/custom_card_heat_pump/","title":"Heat Pump Custom-card","text":""},{"location":"usage/custom_cards/custom_card_heat_pump/#custom-card-heat-pump","title":"Custom-card \"Heat Pump\"","text":"
The custom_card_heat_pump allows you to control your HVAC system and all its modes. This card is inspired by Simple Thermostat Card.
"},{"location":"usage/custom_cards/custom_card_heat_pump/#credits","title":"Credits","text":"
Author: Kam - 2022 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_heat_pump/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_heat_pump/#images","title":"Images","text":""},{"location":"usage/custom_cards/custom_card_heat_pump/#usage","title":"Usage","text":"
- type: custom:button-card\n  template: custom_card_heat_pump\n  entity: climate.heat_pump\n
"},{"location":"usage/custom_cards/custom_card_heat_pump/#requirements","title":"Requirements","text":"
Entity climate with only heat mode
"},{"location":"usage/custom_cards/custom_card_heat_pump/#modification","title":"Modification","text":"
If your entity does not have all the available options in the hvac component, modify (delete or comment out) the following part to match your setup. Each button corresponds to a mode of the hvac component.
 
item3:\n      card:\n        type: \"horizontal-stack\"\n        cards:\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:power\"\n            tap_action:\n              action: \"call-service\"\n              service: \"climate.set_hvac_mode\"\n              service_data:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n                hvac_mode: \"off\"\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:fire\"\n            tap_action:\n              action: \"call-service\"\n              service: \"climate.set_hvac_mode\"\n              service_data:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n                hvac_mode: \"heat\"\n            ...\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:snowflake\"\n            tap_action:\n              action: \"call-service\"\n              service: \"climate.set_hvac_mode\"\n              service_data:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n                hvac_mode: \"cool\"\n            ...\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:sync\"\n            tap_action:\n              action: \"call-service\"\n              service: \"climate.set_hvac_mode\"\n              service_data:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n                hvac_mode: \"heat_cool\"\n            ...\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:water\"\n            tap_action:\n              action: \"call-service\"\n              service: \"climate.set_hvac_mode\"\n              service_data:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n                hvac_mode: \"dry\"\n            ...\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:fan\"\n            tap_action:\n              action: \"call-service\"\n              service: \"climate.set_hvac_mode\"\n              service_data:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n                hvac_mode: \"fan_only\"\n            ...\n
 Template Code custom_card_heat_pump.yaml
---\ncustom_card_heat_pump:\n  show_name: false\n  show_icon: false\n  template:\n    - \"icon_info_bg\"\n    - \"ulm_translation_engine\"\n  hold_action:\n    action: \"more-info\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2' 'item3'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info\"\n          - \"ulm_translation_engine\"\n        tap_action:\n          action: \"more-info\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        name: \"[[[ return entity.name ]]]\"\n        label: >-\n          [[[\n              if(entity.attributes.temperature){\n                return (entity.attributes.current_temperature ) + '\u00b0' + ' \u2022 ' + variables.ulm_translation_state + ' (' + entity.attributes.hvac_action + ')';\n              }\n              return variables.ulm_translation_state;\n          ]]]\n        icon: >\n          [[[\n            var icon = \"mdi:thermostat\";\n            var state = entity.state;\n            if (state =='dry') {\n              return \"mdi:water\";\n            } else if (state =='heat') {\n              return \"mdi:fire\";\n            } else if (state =='cool') {\n              return \"mdi:snowflake\";\n            } else if (state =='fan_only') {\n              return \"mdi:fan\";\n            } else if (state =='heat_cool') {\n              return \"mdi:sync\";\n            }\n            return icon;\n          ]]]\n        state:\n          - operator: \"template\"\n            value: \"[[[return entity.state == 'dry']]]\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color, 255, 165, 0),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color, 255, 165, 0),0.2)\"\n          - operator: \"template\"\n            value: \"[[[return entity.state == 'cool']]]\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-blue),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-blue),0.2)\"\n          - operator: \"template\"\n            value: \"[[[return entity.state == 'heat']]]\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-red),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-red),0.2)\"\n          - operator: \"template\"\n            value: \"[[[return entity.state == 'fan_only']]]\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color, 195, 0, 255),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color, 195, 0, 255),0.2)\"\n          - operator: \"template\"\n            value: \"[[[return entity.state == 'heat_cool']]]\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-green),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-green),0.2)\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:arrow-down\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  temperature: \"[[[ return entity.attributes.temperature - entity.attributes.target_temp_step ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return entity.attributes.temperature + '\u00b0C' ]]]\"\n              styles:\n                card:\n                  - box-shadow: \"none\"\n              show_icon: false\n              tap_action: \"none\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:arrow-up\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  temperature: \"[[[ return entity.attributes.temperature + entity.attributes.target_temp_step ]]]\"\n    item3:\n      card:\n        type: \"horizontal-stack\"\n        cards:\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:power\"\n            tap_action:\n              action: \"perform-action\"\n              perform_action: \"climate.set_hvac_mode\"\n              target:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n              data:\n                hvac_mode: \"off\"\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:fire\"\n            tap_action:\n              action: \"perform-action\"\n              perform_action: \"climate.set_hvac_mode\"\n              target:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n              data:\n                hvac_mode: \"heat\"\n            styles:\n              icon:\n                - color: |\n                    [[[\n                      var color = 'rgba(var(--color-theme), 1)';\n                      if (entity.state == \"heat\"){\n                        var color = 'rgba(var(--color-red), 1)';\n                      }\n                      return color;\n                    ]]]\n              card:\n                - background-color: |\n                    [[[\n                      var bc_color = 'rgba(var(--color-theme),0.05)';\n                      if (entity.state == \"heat\"){\n                        var bc_color = 'rgba(var(--color-red), 0.2)';\n                      }\n                      return bc_color;\n                    ]]]\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:snowflake\"\n            tap_action:\n              action: \"perform-action\"\n              perform_action: \"climate.set_hvac_mode\"\n              target:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n              data:\n                hvac_mode: \"cool\"\n            styles:\n              icon:\n                - color: |\n                    [[[\n                      var color = 'rgba(var(--color-theme), 1)';\n                      if (entity.state == \"cool\"){\n                        var color = 'rgba(var(--color-blue), 1)';\n                      }\n                      return color;\n                    ]]]\n              card:\n                - background-color: |\n                    [[[\n                      var bc_color = 'rgba(var(--color-theme),0.05)';\n                      if (entity.state == \"cool\"){\n                        var bc_color = 'rgba(var(--color-blue), 0.2)';\n                      }\n                      return bc_color;\n                    ]]]\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:sync\"\n            tap_action:\n              action: \"perform-action\"\n              perform_action: \"climate.set_hvac_mode\"\n              target:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n              data:\n                hvac_mode: \"heat_cool\"\n            styles:\n              icon:\n                - color: |\n                    [[[\n                      var color = 'rgba(var(--color-theme), 1)';\n                      if (entity.state == \"heat_cool\"){\n                        var color = 'rgba(var(--color-green), 1)';\n                      }\n                      return color;\n                    ]]]\n              card:\n                - background-color: |\n                    [[[\n                      var bc_color = 'rgba(var(--color-theme),0.05)';\n                      if (entity.state == \"heat_cool\"){\n                        var bc_color = 'rgba(var(--color-green), 0.2)';\n                      }\n                      return bc_color;\n                    ]]]\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:water\"\n            tap_action:\n              action: \"perform-action\"\n              perform_action: \"climate.set_hvac_mode\"\n              target:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n              data:\n                hvac_mode: \"dry\"\n            styles:\n              icon:\n                - color: |\n                    [[[\n                      var color = 'rgba(var(--color-theme), 1)';\n                      if (entity.state == \"dry\"){\n                        var color = 'rgba(var(--color, 255, 165, 0), 1)';\n                      }\n                      return color;\n                    ]]]\n              card:\n                - background-color: |\n                    [[[\n                      var bc_color = 'rgba(var(--color-theme),0.05)';\n                      if (entity.state == \"dry\"){\n                        var bc_color = 'rgba(var(--color, 255, 165, 0), 0.2)';\n                      }\n                      return bc_color;\n                    ]]]\n          - type: \"custom:button-card\"\n            template: \"widget_icon_juve\"\n            icon: \"mdi:fan\"\n            tap_action:\n              action: \"perform-action\"\n              perform_action: \"climate.set_hvac_mode\"\n              target:\n                entity_id: \"[[[ return entity.entity_id ]]]\"\n              data:\n                hvac_mode: \"fan_only\"\n            styles:\n              icon:\n                - color: |\n                    [[[\n                      var color = 'rgba(var(--color-theme), 1)';\n                      if (entity.state == \"fan_only\"){\n                        var color = 'rgba(var(--color, 195, 0, 255), 1)';\n                      }\n                      return color;\n                    ]]]\n              card:\n                - background-color: |\n                    [[[\n                      var bc_color = 'rgba(var(--color-theme),0.05)';\n                      if (entity.state == \"fan_only\"){\n                        var bc_color = 'rgba(var(--color, 195, 0, 255), 0.2)';\n                      }\n                      return bc_color;\n                    ]]]\nwidget_icon_juve:\n  tap_action:\n    action: \"toggle\"\n  show_icon: true\n  show_name: false\n  show_state: true\n  styles:\n    grid:\n      - grid-template-areas: \"'i'\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"14px\"\n      - place-self: \"center\"\n      - height: \"42px\"\n    icon:\n      - color: \"rgba(var(--color-theme),0.9)\"\n  size: \"20px\"\n
"},{"location":"usage/custom_cards/custom_card_homeassistant_updates/","title":"Homeassistant Updates Custom-card","text":""},{"location":"usage/custom_cards/custom_card_homeassistant_updates/#custom-card-homeassistant-updates","title":"Custom-card \"Homeassistant updates\"","text":""},{"location":"usage/custom_cards/custom_card_homeassistant_updates/#credits","title":"Credits","text":"
     
  • Author: AndyVRD - 2021
    •  
  • Special thanks to basbruss
    •  
  • Version: 1.0.2
    •  
"},{"location":"usage/custom_cards/custom_card_homeassistant_updates/#changelog","title":"Changelog","text":"1.0.0 Initial release  1.0.1 Added support for ulm_language variables  1.0.2 Updated capitalization of OS  1.0.3 Updated sensors and binary_sensors + Removed group.updaters"},{"location":"usage/custom_cards/custom_card_homeassistant_updates/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_homeassistant_updates\n  variables:\n    ulm_card_homeassistant_entity: \"binary_sensor.updates\"\n    ulm_card_homeassistant_core: \"sensor.core_updates\"\n    ulm_card_homeassistant_supervisor: \"sensor.supervisor_updates\"\n    ulm_card_homeassistant_os: \"sensor.os_updates\"\n
"},{"location":"usage/custom_cards/custom_card_homeassistant_updates/#requirements","title":"Requirements","text":"
!! Attention !! This card needs additional template sensors and binary_sensor updaters to work, all detail can be found in this readme.
"},{"location":"usage/custom_cards/custom_card_homeassistant_updates/#variables","title":"Variables","text":"Variable Example Required Explanation core_ sensor.core_updates yes sensor core installed/latest version os_ sensor.os_updates no sensor os installed/latest version supervisor_ sensor.supervisor_updates no sensor supervisor installed/latest version 
<<<<<<< Updated upstream
"},{"location":"usage/custom_cards/custom_card_homeassistant_updates/#template-code","title":"Template code","text":"
---\ncard_homeassistant_updates:\n  triggers_update: \"all\"\n  template:\n    - \"ulm_language_variables\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        triggers_update: \"all\"\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info_updates\"\n        icon: \"mdi:home-assistant\"\n        tap_action:\n          action: \"none\"\n        entity: \"[[[ return variables.ulm_card_homeassistant_entity ]]]\"\n        name: >\n              [[[\n                if(states[variables.ulm_card_homeassistant_core].state ==='True' || states[variables.ulm_card_homeassistant_supervisor].state ==='True' || states[variables.ulm_card_homeassistant_os].state ==='True'){\n                  return variables.ulm_updates_available;\n                } else {\n                  return variables.ulm_no_updates_available;\n                }\n              ]]]\n        label: >\n              [[[\n                if(variables.ulm_card_homeassistant_core){\n                  if(states[variables.ulm_card_homeassistant_core].state ==='True'){\n                    var core = 'Core: ' + states[variables.ulm_card_homeassistant_core].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_core].attributes.latest_version;\n                  } else {\n                    var core = 'Core: ' + states[variables.ulm_card_homeassistant_core].attributes.installed_version;\n                  }\n                }\n                if(variables.ulm_card_homeassistant_supervisor){\n                  if(states[variables.ulm_card_homeassistant_supervisor].state ==='True'){\n                    var supervisor = 'Supervisor: ' + states[variables.ulm_card_homeassistant_supervisor].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_supervisor].attributes.latest_version;\n                  } else {\n                    var supervisor = 'Supervisor: ' + states[variables.ulm_card_homeassistant_supervisor].attributes.installed_version;\n                  }\n                }\n                if(variables.ulm_card_homeassistant_os){\n                  if(states[variables.ulm_card_homeassistant_os].state ==='True'){\n                    var os = 'OS: ' + states[variables.ulm_card_homeassistant_os].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_os].attributes.latest_version;\n                  } else {\n                    var os = 'OS: ' + states[variables.ulm_card_homeassistant_os].attributes.installed_version;\n                  }\n                }\n                if(variables.ulm_card_homeassistant_core && variables.ulm_card_homeassistant_supervisor && variables.ulm_card_homeassistant_os){\n                  return supervisor + '<br>' + core + '<br>' + os;\n                } else if(variables.ulm_card_homeassistant_core && variables.ulm_card_homeassistant_supervisor){\n                  return supervisor + '<br>' + core;\n                } else if(variables.ulm_card_homeassistant_core){\n                  return core;\n                }\n              ]]]\n        styles:\n          icon:\n            - color: \"rgba(var(--color-theme),0.9)\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:file-document\"\n              tap_action:\n                action: \"url\"\n                url_path: \"https://www.home-assistant.io/latest-release-notes/\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:cog\"\n              tap_action:\n                action: \"navigate\"\n                navigation_path: \"/developer-tools/yaml\"\n\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:update\"\n              tap_action:\n                action: \"navigate\"\n                navigation_path: \"/config/dashboard\"\n\nicon_info_updates:\n  color: \"var(--google-grey)\"\n  show_icon: true\n  show_label: true\n  show_name: true\n  state:\n    - value: \"on\"\n      styles:\n        custom_fields:\n          notification:\n            - border-radius: \"50%\"\n            - position: \"absolute\"\n            - left: \"28px\"\n            - top: \"8px\"\n            - height: \"16px\"\n            - width: \"16px\"\n            - border: \"2px solid var(--card-background-color)\"\n            - font-size: \"12px\"\n            - line-height: \"14px\"\n            - background-color: >\n                [[[\n                  return \"rgba(var(--color-blue),1)\";\n                ]]]\n        icon:\n          - color: \"rgba(var(--color-blue),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-blue), 0.2)\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n    label:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"16px\"\n      - text-align: \"start\"\n    name:\n      - align-self: \"end\"\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n      - margin-left: \"16px\"\n      - margin-bottom: \"4px\"\n    state:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - width: \"42px\"\n      - height: \"42px\"\n    grid:\n      - grid-template-areas: \"'i n' 'i l'\"\n      - grid-template-columns: \"min-content auto\"\n      - grid-template-rows: \"min-content min-content\"\n    card:\n      - border-radius: \"21px 8px 8px 21px\"\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n  custom_fields:\n    notification: >\n      [[[\n        if ( entity.state ==\"unavailable\" || entity.state ==\"on\" ){\n          return `<ha-icon icon=\"mdi:party-popper\" style=\"width: 12px; height: 12px; color: var(--primary-background-color);\"></ha-icon>`;\n        }\n      ]]]\n  size: \"20px\"\n
"},{"location":"usage/custom_cards/custom_card_homeassistant_updates/#template-sensors-code","title":"Template sensors code","text":"
```yaml sensor:   - platform: command_line     name: core_updates     command: 'curl http://supervisor/core/info -H \"Authorization: Bearer $(printenv SUPERVISOR_TOKEN)\" | jq ''{\"latest_version\":.data.version_latest,\"installed_version\":.data.version,\"update_available\":.data.update_available}'''     value_template: '{{ value_json.update_available }}'     scan_interval: 600     json_attributes:       - update_available       - latest_version       - installed_version
 
     
  •  
    platform: command_line     name: supervisor_updates     command: 'curl http://supervisor/supervisor/info -H \"Authorization: Bearer $(printenv SUPERVISOR_TOKEN)\" | jq ''{\"latest_version\":.data.version_latest,\"installed_version\":.data.version,\"update_available\":.data.update_available}'''     value_template: '{{ value_json.update_available }}'     scan_interval: 600     json_attributes:
     
       
    • update_available
      •  
    • latest_version
      •  
    • installed_version
      •  
     
    •  
  •  
    platform: command_line     name: os_updates     command: 'curl http://supervisor/os/info -H \"Authorization: Bearer $(printenv SUPERVISOR_TOKEN)\" | jq ''{\"latest_version\":.data.version_latest,\"installed_version\":.data.version,\"update_available\":.data.update_available}'''     value_template: '{{ value_json.update_available }}'     scan_interval: 600     json_attributes:
     
       
    • update_available
      •  
    • latest_version
      •  
    • installed_version
      •  
     
    •  
  •  
    platform: command_line     name: addons_updates     command: 'curl http://supervisor/addons -H \"Authorization: Bearer $(printenv SUPERVISOR_TOKEN)\" | jq ''{\"addons\":[.data.addons[] | select(.update_available)]}'''     value_template: '{{ value_json.addons | length }}'     scan_interval: 600     unit_of_measurement: pending update(s)     json_attributes:
     
       
    • addons
      •  
     
    •  
 
binary_sensor:   - platform: template     sensors:       updater_core:         friendly_name: Core         device_class: problem         value_template: \"{{ states('sensor.core_updates') }}\"         attribute_templates:           installed_version: \"{{ state_attr('sensor.core_updates', 'installed_version') }}\"           latest_version: \"{{ state_attr('sensor.core_updates', 'latest_version') }}\" =======
 Template Code 
Stashed changes
 
```yaml title=\"custom_card_homeassistant_updates.yaml\"\n---\ncard_homeassistant_updates:\n  triggers_update: \"all\"\n  template:\n    - \"ulm_language_variables\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        triggers_update: \"all\"\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info_updates\"\n        icon: \"mdi:home-assistant\"\n        tap_action:\n          action: \"none\"\n        entity: \"[[[ return variables.ulm_card_homeassistant_entity ]]]\"\n        name: >\n              [[[\n                if(states[variables.ulm_card_homeassistant_core].state ==='True' || states[variables.ulm_card_homeassistant_supervisor].state ==='True' || states[variables.ulm_card_homeassistant_os].state ==='True'){\n                  return variables.ulm_updates_available;\n                } else {\n                  return variables.ulm_no_updates_available;\n                }\n              ]]]\n        label: >\n              [[[\n                if(variables.ulm_card_homeassistant_core){\n                  if(states[variables.ulm_card_homeassistant_core].state ==='True'){\n                    var core = 'Core: ' + states[variables.ulm_card_homeassistant_core].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_core].attributes.latest_version;\n                  } else {\n                    var core = 'Core: ' + states[variables.ulm_card_homeassistant_core].attributes.installed_version;\n                  }\n                }\n                if(variables.ulm_card_homeassistant_supervisor){\n                  if(states[variables.ulm_card_homeassistant_supervisor].state ==='True'){\n                    var supervisor = 'Supervisor: ' + states[variables.ulm_card_homeassistant_supervisor].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_supervisor].attributes.latest_version;\n                  } else {\n                    var supervisor = 'Supervisor: ' + states[variables.ulm_card_homeassistant_supervisor].attributes.installed_version;\n                  }\n                }\n                if(variables.ulm_card_homeassistant_os){\n                  if(states[variables.ulm_card_homeassistant_os].state ==='True'){\n                    var os = 'OS: ' + states[variables.ulm_card_homeassistant_os].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_os].attributes.latest_version;\n                  } else {\n                    var os = 'OS: ' + states[variables.ulm_card_homeassistant_os].attributes.installed_version;\n                  }\n                }\n                if(variables.ulm_card_homeassistant_core && variables.ulm_card_homeassistant_supervisor && variables.ulm_card_homeassistant_os){\n                  return supervisor + '<br>' + core + '<br>' + os;\n                } else if(variables.ulm_card_homeassistant_core && variables.ulm_card_homeassistant_supervisor){\n                  return supervisor + '<br>' + core;\n                } else if(variables.ulm_card_homeassistant_core){\n                  return core;\n                }\n              ]]]\n        styles:\n          icon:\n            - color: \"rgba(var(--color-theme),0.9)\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:file-document\"\n              tap_action:\n                action: \"url\"\n                url_path: \"https://www.home-assistant.io/latest-release-notes/\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:cog\"\n              tap_action:\n                action: \"navigate\"\n                navigation_path: \"/developer-tools/yaml\"\n\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:update\"\n              tap_action:\n                action: \"navigate\"\n                navigation_path: \"/config/dashboard\"\n\nicon_info_updates:\n  color: \"var(--google-grey)\"\n  show_icon: true\n  show_label: true\n  show_name: true\n  state:\n    - value: \"on\"\n      styles:\n        custom_fields:\n          notification:\n            - border-radius: \"50%\"\n            - position: \"absolute\"\n            - left: \"28px\"\n            - top: \"8px\"\n            - height: \"16px\"\n            - width: \"16px\"\n            - border: \"2px solid var(--card-background-color)\"\n            - font-size: \"12px\"\n            - line-height: \"14px\"\n            - background-color: >\n                [[[\n                  return \"rgba(var(--color-blue),1)\";\n                ]]]\n        icon:\n          - color: \"rgba(var(--color-blue),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-blue), 0.2)\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n    label:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"16px\"\n      - text-align: \"start\"\n    name:\n      - align-self: \"end\"\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n      - margin-left: \"16px\"\n      - margin-bottom: \"4px\"\n    state:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - width: \"42px\"\n      - height: \"42px\"\n    grid:\n      - grid-template-areas: \"'i n' 'i l'\"\n      - grid-template-columns: \"min-content auto\"\n      - grid-template-rows: \"min-content min-content\"\n    card:\n      - border-radius: \"21px 8px 8px 21px\"\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n  custom_fields:\n    notification: >\n      [[[\n        if ( entity.state ==\"unavailable\" || entity.state ==\"on\" ){\n          return `<ha-icon icon=\"mdi:party-popper\" style=\"width: 12px; height: 12px; color: var(--primary-background-color);\"></ha-icon>`;\n        }\n      ]]]\n  size: \"20px\"\n\n```\n
"},{"location":"usage/custom_cards/custom_card_httpedo13_sun/","title":"Sun Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_httpedo13_sun/#custom-card-sun","title":"Custom-card \"Sun\"","text":"
The custom_card_httpedo13_sun adapt sun card for minimalist ui.
"},{"location":"usage/custom_cards/custom_card_httpedo13_sun/#credits","title":"Credits","text":"
Author: httpedo13 - 2021 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_httpedo13_sun/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_httpedo13_sun/#requirements","title":"Requirements","text":"
This card uses:
 Component / card required Link Sun integration yes more info Sun card yes more info"},{"location":"usage/custom_cards/custom_card_httpedo13_sun/#images","title":"Images","text":""},{"location":"usage/custom_cards/custom_card_httpedo13_sun/#usage","title":"Usage","text":"
  - type: custom:button-card\n    template: custom_card_httpedo13_sun\n    variables:\n      language: 'it'\n
"},{"location":"usage/custom_cards/custom_card_httpedo13_sun/#variables","title":"Variables","text":"
The same sun card config.
 Name Accepted values Description Default darkMode boolean Changes card colors to dark or light Home assistant dark mode state language string1 Changes card language Home assistant language or english if not supported showAzimuth boolean Displays azimuth in the footer false showElevation boolean Displays elevation in the footer false timeFormat '12h'/'24h' Displayed time format Locale based on Home assistant language title string Card title Doesn't display a title by default 
(1) Supported languages: da, de, en, es, et, fi, fr, hu, it, nl, pl, pt-BR, ru, sl, sv
"},{"location":"usage/custom_cards/custom_card_httpedo13_thermostat/","title":"Thermostat Custom-card","text":""},{"location":"usage/custom_cards/custom_card_httpedo13_thermostat/#custom-card-thermostat","title":"Custom-card \"Thermostat\"","text":"
The custom_card_httpedo13_thermostat shows data from your thermostat and gives you the possibility to control it. Thanks to tpx01's air-condition custom card!
"},{"location":"usage/custom_cards/custom_card_httpedo13_thermostat/#credits","title":"Credits","text":"
Author: httpedo13 - 2021 Version: 1.0.0
 
This design was made by tpx01's
"},{"location":"usage/custom_cards/custom_card_httpedo13_thermostat/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_httpedo13_thermostat/#images","title":"Images","text":""},{"location":"usage/custom_cards/custom_card_httpedo13_thermostat/#usage","title":"Usage","text":"
With buttons:
 
- type: custom:button-card\n  template: custom_card_httpedo13_thermostat_with_buttons\n  variables:\n    entity: climate.ground_floor\n    name: Heater Ground Floor\n
 
With collapse button:
 
- type: custom:button-card\n  template: custom_card_httpedo13_thermostat_with_buttons_collapse\n  variables:\n    entity: climate.ground_floor\n    name: Heater Ground Floor\n
"},{"location":"usage/custom_cards/custom_card_httpedo13_thermostat/#requirements","title":"Requirements","text":"
Entity climate with only heat mode
"},{"location":"usage/custom_cards/custom_card_httpedo13_thermostat/#variables","title":"Variables","text":"Variable Example Required Explanation entity climate.ground_floor yes Your climate with only heat mode entity name Heater Ground Floor yes The name to show Template Code custom_card_httpedo13_thermostat.yaml
---\ncustom_card_httpedo13_thermostat:\n  template:\n    - \"ulm_translation_engine\"\n  tap_action:\n    action: \"toggle\"\n  icon: |\n    [[[\n        if (entity.attributes.hvac_action == 'heating') {\n          return \"mdi:radiator\";\n        }\n        return \"mdi:radiator-off\";\n    ]]]\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  state:\n    - operator: \"template\"\n      value: >\n        [[[\n          return entity.state != 'off';\n        ]]]\n      styles:\n        label:\n          - color: |\n              [[[\n                if (entity.attributes.hvac_action == 'heating'){\n                  return \"var(--card-background-color)\";\n                }\n                return \"rgba(var(--color-theme),0.9)\";\n              ]]]\n        name:\n          - font-weight: \"bold\"\n          - color: |\n              [[[\n                if (entity.attributes.hvac_action == 'heating'){\n                  return \"var(--card-background-color)\";\n                }\n                return \"rgba(var(--color-theme),0.9)\";\n              ]]]\n        icon:\n          - color: \"rgba(var(--color-red),1)\"\n        img_cell:\n          - background-color: |\n              [[[\n                if (entity.attributes.hvac_action == 'heating'){\n                  return 'var(--card-background-color)';\n                }\n                return 'rgba(var(--color-red),0.2)';\n              ]]]\n        card:\n          - background-color: |\n              [[[\n                if (entity.attributes.hvac_action == 'heating'){\n                  return '#ff8100';\n                }\n                return 'var(--card-background-color)';\n              ]]]\n\ncustom_card_httpedo13_thermostat_with_buttons:\n  triggers_update: \"all\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - background-color: |\n          [[[\n            if (states[variables.entity].attributes.hvac_action == 'heating'){\n              return '#ff8100';\n            }\n            return 'var(--card-background-color)';\n          ]]]\n  tap_action:\n    action: \"perform-action\"\n    perform_action: \"climate.set_hvac_mode\"\n    target:\n      entity_id: \"[[[ return variables.entity ]]]\"\n    data:\n      hvac_mode: |\n        [[[\n          if (states[variables.entity].state == \"off\"){\n            return 'heat';\n          } else if (states[variables.entity].state == \"heat\"){\n            return 'off';\n          }\n        ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_items_favorite\"\n        styles:\n          card:\n            - background-color: |\n                [[[\n                  if (states[variables.entity].attributes.hvac_action == 'heating'){\n                    return '#ff8100';\n                  }\n                  return 'var(--card-background-color)';\n                ]]]\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"icon_info\"\n                - \"custom_card_httpedo13_thermostat\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_hvac_mode\"\n                target:\n                  entity_id: \"[[[ return variables.entity ]]]\"\n                data:\n                  hvac_mode: |\n                    [[[\n                      if (states[variables.entity].state == \"off\"){\n                        return 'heat';\n                      } else if (states[variables.entity].state == \"heat\"){\n                        return 'off';\n                      }\n                    ]]]\n              name: >\n                [[[\n                    if (variables.name == null) {\n                      return variables.entity;\n                    }\n                    return variables.name;\n                ]]]\n              entity: \"[[[ return variables.entity ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_current_temperature\"\n              tap_action:\n                action: \"toggle\"\n              entity: \"[[[ return variables.entity ]]]\"\n              icon: \"mdi:temperature-celsius\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        styles:\n          card:\n            - background-color: |\n                [[[\n                  if (states[variables.entity].attributes.hvac_action == 'heating'){\n                    return '#ff8100';\n                  }\n                  return 'var(--card-background-color)';\n                ]]]\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon_for_thermostat\"\n              entity: \"[[[ return variables.entity ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return variables.entity ]]]\"\n                data:\n                  temperature: \"[[[ return (parseFloat(states[variables.entity].attributes.temperature) - 0.5)  ]]]\"\n              icon: \"mdi:minus\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_temperature\"\n              tap_action:\n                action: \"toggle\"\n              entity: \"[[[ return variables.entity ]]]\"\n              icon: \"mdi:temperature-celsius\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon_for_thermostat\"\n              entity: \"[[[ return variables.entity ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return variables.entity ]]]\"\n                data:\n                  temperature: \"[[[ return (parseFloat(states[variables.entity].attributes.temperature) + 0.5)  ]]]\"\n              icon: \"mdi:plus\"\n\ncustom_card_httpedo13_thermostat_with_buttons_collapse:\n  triggers_update: \"all\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - background-color: |\n          [[[\n            if (states[variables.entity].attributes.hvac_action == 'heating'){\n              return '#ff8100';\n            }\n            return 'var(--card-background-color)';\n          ]]]\n  tap_action:\n    action: \"perform-action\"\n    perform_action: \"climate.set_hvac_mode\"\n    target:\n      entity_id: \"[[[ return variables.entity ]]]\"\n    data:\n      hvac_mode: |\n        [[[\n          if (states[variables.entity].state == \"off\"){\n            return 'heat';\n          } else if (states[variables.entity].state == \"heat\"){\n            return 'off';\n          }\n        ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_items_favorite\"\n        styles:\n          card:\n            - background-color: |\n                [[[\n                  if (states[variables.entity].attributes.hvac_action == 'heating'){\n                    return '#ff8100';\n                  }\n                  return 'var(--card-background-color)';\n                ]]]\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"icon_info\"\n                - \"custom_card_httpedo13_thermostat\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_hvac_mode\"\n                target:\n                  entity_id: \"[[[ return variables.entity ]]]\"\n                data:\n                  hvac_mode: |\n                    [[[\n                      if (states[variables.entity].state == \"off\"){\n                        return 'heat';\n                      } else if (states[variables.entity].state == \"heat\"){\n                        return 'off';\n                      }\n                    ]]]\n              name: >\n                [[[\n                    if (variables.name == null) {\n                      return variables.entity;\n                    }\n                    return variables.name;\n                ]]]\n              entity: \"[[[ return variables.entity ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_current_temperature\"\n              tap_action:\n                action: \"toggle\"\n              entity: \"[[[ return variables.entity ]]]\"\n              icon: \"mdi:temperature-celsius\"\n    item2:\n      card:\n        type: \"conditional\"\n        conditions:\n          - entity: \"[[[ return states[variables.entity].entity_id ]]]\"\n            state: \"heat\"\n        card:\n          type: \"custom:button-card\"\n          template: \"list_3_items\"\n          styles:\n            card:\n              - background-color: |\n                  [[[\n                    if (states[variables.entity].attributes.hvac_action == 'heating'){\n                      return '#ff8100';\n                    }\n                    return 'var(--card-background-color)';\n                  ]]]\n          custom_fields:\n            item1:\n              card:\n                type: \"custom:button-card\"\n                template: \"widget_icon_for_thermostat\"\n                entity: \"[[[ return variables.entity ]]]\"\n                tap_action:\n                  action: \"perform-action\"\n                  perform_action: \"climate.set_temperature\"\n                  target:\n                    entity_id: \"[[[ return variables.entity ]]]\"\n                  data:\n                    temperature: \"[[[ return (parseFloat(states[variables.entity].attributes.temperature) - 0.5)  ]]]\"\n                icon: \"mdi:minus\"\n            item2:\n              card:\n                type: \"custom:button-card\"\n                template: \"widget_temperature\"\n                tap_action:\n                  action: \"toggle\"\n                entity: \"[[[ return variables.entity ]]]\"\n                icon: \"mdi:temperature-celsius\"\n            item3:\n              card:\n                type: \"custom:button-card\"\n                template: \"widget_icon_for_thermostat\"\n                entity: \"[[[ return variables.entity ]]]\"\n                tap_action:\n                  action: \"perform-action\"\n                  perform_action: \"climate.set_temperature\"\n                  target:\n                    entity_id: \"[[[ return variables.entity ]]]\"\n                  data:\n                    temperature: \"[[[ return (parseFloat(states[variables.entity].attributes.temperature) + 0.5)  ]]]\"\n                icon: \"mdi:plus\"\n\nwidget_current_temperature:\n  color: \"var(--google-grey-500)\"\n  show_icon: false\n  show_name: false\n  show_label: true\n  size: \"20px\"\n  label: |-\n    [[[\n        var temperature = entity.attributes.current_temperature;\n        if (temperature == null) {\n          var temperature = '-';\n        }\n        return temperature + '\u00b0C'\n    ]]]\n  styles:\n    label:\n      - font-weight: \"bold\"\n      - color: |\n          [[[\n            if (entity.attributes.hvac_action == 'heating'){\n              return 'var(--card-background-color)';\n            }\n            return 'rgb(var(--color-theme),0.9)';\n          ]]]\n    grid:\n      - grid-template-areas: \"'l'\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - border-radius: \"14px\"\n      - place-self: \"center\"\n      - height: \"42px\"\n      - background-color: |\n          [[[\n            if (entity.attributes.hvac_action == 'heating'){\n              return '#ff8100';\n            }\n            return 'var(--card-background-color)';\n          ]]]\n\nwidget_temperature:\n  color: \"var(--google-grey-500)\"\n  show_icon: false\n  show_name: false\n  show_label: true\n  size: \"20px\"\n  label: |-\n    [[[\n        var temperature = entity.attributes.temperature;\n        if (temperature == null) {\n          var temperature = '-';\n        }\n        return temperature + '\u00b0C'\n    ]]]\n  styles:\n    label:\n      - color: |\n          [[[\n            if (entity.attributes.hvac_action == 'heating'){\n              return 'var(--card-background-color)';\n            }\n            return 'rgb(var(--color-theme),0.9)';\n          ]]]\n    grid:\n      - grid-template-areas: \"'l'\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - border-radius: \"14px\"\n      - place-self: \"center\"\n      - height: \"42px\"\n      - background-color: |\n          [[[\n            if (entity.attributes.hvac_action == 'heating'){\n              return '#ff8100';\n            }\n            return 'var(--card-background-color)';\n          ]]]\n\nwidget_icon_for_thermostat:\n  tap_action:\n    action: \"toggle\"\n  show_icon: true\n  show_name: false\n  styles:\n    grid:\n      - grid-template-areas: \"'i'\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - background-color: |\n          [[[\n            if (entity.attributes.hvac_action == 'heating'){\n              return 'var(--card-background-color)';\n            }\n            return 'rgba(var(--color-theme),0.05)';\n          ]]]\n      - border-radius: \"14px\"\n      - place-self: \"center\"\n      - height: \"42px\"\n    icon:\n      - color: \"rgba(var(--color-theme),0.9)\"\n  size: \"20px\"\n  color: \"var(--google-grey)\"\n\nlist_items_favorite:\n  styles:\n    grid:\n      - grid-template-areas: \"'item1 item1 item2'\"\n      - grid-template-columns: \"1fr 1fr 1fr\"\n      - grid-template-rows: \"min-content\"\n      - column-gap: \"7px\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n
"},{"location":"usage/custom_cards/custom_card_iAbadia_battery_chip/","title":"iAbadia's Battery Chip Custom Card","text":""},{"location":"usage/custom_cards/custom_card_iAbadia_battery_chip/#custom-card-battery-chip","title":"Custom-card \"Battery Chip\"","text":"
This is a custom-card or custom-chip to see your device's battery level at a glance.
 
"},{"location":"usage/custom_cards/custom_card_iAbadia_battery_chip/#credits","title":"Credits","text":"
Author: I\u00f1aki Abadia - 2024 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_iAbadia_battery_chip/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_iAbadia_battery_chip/#requirements","title":"Requirements","text":"
None
"},{"location":"usage/custom_cards/custom_card_iAbadia_battery_chip/#usage","title":"Usage","text":"
type: \"custom:button-card\"\ntemplate: custom_card_iAbadia_battery_chip\nvariables:\n  ulm_custom_card_iAbadia_battery_chip_entity: sensor.living_room_sensor_battery\n  ulm_custom_card_iAbadia_battery_chip_icon: mdi:thermostat\n  ulm_custom_card_iAbadia_battery_chip_warning: 30\n  ulm_custom_card_iAbadia_battery_chip_danger: 10\n
"},{"location":"usage/custom_cards/custom_card_iAbadia_battery_chip/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_custom_card_iAbadia_battery_chip_entity sensor.temperature \u2713 Battery entity ulm_custom_card_iAbadia_battery_chip_icon mdi:thermometer \u2718 Icon to be displayed. Will default to mdi:battery ulm_custom_card_iAbadia_battery_chip_warning 20 \u2718 Battery level below which to color as warning (yellow) ulm_custom_card_iAbadia_battery_chip_danger 10 \u2718 Battery level below which to color as danger (red)"},{"location":"usage/custom_cards/custom_card_iAbadia_battery_chip/#template-code","title":"Template Code","text":"Template Code custom_card_irmajavi_speedtest.yaml
---\ncustom_card_iAbadia_battery_chip:\n  template:\n    - \"chips\"\n  variables:\n    ulm_custom_card_iAbadia_battery_chip_entity: \"\"\n    ulm_custom_card_iAbadia_battery_chip_icon: \"\"\n    ulm_custom_card_iAbadia_battery_chip_danger: \"10\"\n    ulm_custom_card_iAbadia_battery_chip_warning: \"20\"\n  show_icon: true\n  triggers_update: \"all\"\n  icon: >\n    [[[\n      if (variables.ulm_custom_card_iAbadia_battery_chip_icon){\n        return variables.ulm_custom_card_iAbadia_battery_chip_icon;\n      } else {\n        return \"mdi:battery\"\n      }\n    ]]]\n  entity: \"[[[ return variables.ulm_custom_card_iAbadia_battery_chip_entity; ]]]\"\n  tap_action:\n    action: \"more-info\"\n    entity: \"[[[ return variables.ulm_custom_card_iAbadia_battery_chip_entity; ]]]\"\n  styles:\n    icon:\n      - color: >\n          [[[\n            let battery_level = Math.round((states[variables.ulm_custom_card_iAbadia_battery_chip_entity].state)/1);\n            if (battery_level > variables.ulm_custom_card_iAbadia_battery_chip_warning) {\n              return \"var(--google-green)\"\n            } else if (battery_level <= variables.ulm_custom_card_iAbadia_battery_chip_warning && battery_level > variables.ulm_custom_card_iAbadia_battery_chip_danger) {\n              return \"var(--google-yellow)\"\n            } else {\n              return \"var(--google-red)\"\n            }\n          ]]]\n    grid:\n      - grid-template-areas: \"'i'\"\n
"},{"location":"usage/custom_cards/custom_card_imswel_medias/","title":"Custom Card Media","text":""},{"location":"usage/custom_cards/custom_card_imswel_medias/#custom-card-media","title":"Custom Card \"Media\"","text":"
These are some custom-card for your plex, radarr and sonarr media libraries.
 
 
"},{"location":"usage/custom_cards/custom_card_imswel_medias/#credits","title":"Credits","text":"
     
  • Author: imswel - 2023
    •  
  • Version: 1.0.0
    •  
"},{"location":"usage/custom_cards/custom_card_imswel_medias/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_imswel_medias/#requirements","title":"Requirements","text":"
This card needs the following to function correctly: | Component                                                                                 | Required                           | | ----------------------------------------------------------------------------------------- | ---------------------------------- | |Plex Recently Added             | Yes for Media Library Card   | |Radarr Upcoming Media | Yes for Media Upcoming Card  | |Sonarr Upcoming Media | Yes for Media Upcoming Card  |
"},{"location":"usage/custom_cards/custom_card_imswel_medias/#usage","title":"Usage","text":"
Media Library Card for Plex Recently Added :
 
 | Variable                              | Default | Required | Notes                                                                   | | -----------------------------         | ------- | -------- | ----------------------------------------------------------------------- | | ulm_custom_card_imswel_medias_index   |    1    | Yes      | The index of the item in your Plex library  to show.                |
 
- type: custom:button-card\n  template: \"custom_card_imswel_medias_library\"\n  entity: sensor.plex_recently_added\n  variables:\n    ulm_custom_card_imswel_medias_index: 1\n
 
 
Media Upcoming Card for Radarr Upcoming Media & Sonarr Upcoming Media :
 
  | Variable                              | Default | Required | Notes                                                                                                    | | -----------------------------         | ------- | -------- | -------------------------------------------------------------------------------------------------------- | | ulm_custom_card_imswel_medias_index   | 1       | Yes      | The index of the item in your Radarr/Sonarr library to show.                                         | | ulm_custom_card_imswel_medias_platform| radarr  | Yes      | The platform to choose depending on the selected entity.  Can be: radarr or sonarr.  |
 
- type: custom:button-card\n  template: \"custom_card_imswel_medias_upcoming\"\n  entity: sensor.sonarr_upcoming_media\n  variables:\n    ulm_custom_card_imswel_medias_index: 1\n    ulm_custom_card_imswel_medias_platform: \"sonarr\"\n
"},{"location":"usage/custom_cards/custom_card_imswel_medias/#template-code","title":"Template code","text":"Template Code custom_card_imswel_medias.yaml
---\ncustom_card_imswel_medias:\n  show_icon: false\n  show_label: true\n  show_name: true\n  show_state: false\n  styles:\n    label:\n      - z-index: 2\n      - color: \"white\"\n      - font-weight: \"bold\"\n      - font-size: \"12px\"\n      - filter: \"opacity(60%)\"\n    name:\n      - z-index: 2\n      - color: \"white\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n    card:\n      - z-index: 0\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - background-size: \"cover\"\n      - background-position: \"center center\"\n      - text-shadow: >\n          [[[\n            return entity == \"undefined\" ? \"none\" : \"1px 1px 5px rgba(18, 22, 23, 0.9)\";\n          ]]]\n\ncustom_card_imswel_medias_library:\n  template:\n    - \"custom_card_imswel_medias\"\n    - \"ulm_translation_engine\"\n    - \"custom_card_imswel_medias_language_variables\"\n  variables:\n    ulm_custom_card_imswel_medias_index: 1\n  triggers_update: \"[[[ return entity.entity_id; ]]]\"\n  aspect_ratio: \"5/2\"\n  label: >\n    [[[\n      if (entity.state == \"unavailable\" || entity.state == \"undefined\"){\n        return variables.ulm_translation_unavailable;\n      } else{\n        var data = entity.attributes.data;\n        if (data[variables.ulm_custom_card_imswel_medias_index].number == undefined){\n          var number = '(' + data[variables.ulm_custom_card_imswel_medias_index].aired.split('-')[0] + ')';\n        } else{\n          var number = data[variables.ulm_custom_card_imswel_medias_index].number;\n        }\n        return `${data[variables.ulm_custom_card_imswel_medias_index].title} ${number}`;\n      }\n    ]]]\n  name: \"[[[ return variables.ulm_custom_card_imswel_recentlyadded ]]]\"\n  styles:\n    label:\n      - align-self: \"start\"\n      - justify-self: \"start\"\n      - margin-left: \"12px\"\n    name:\n      - align-self: \"end\"\n      - justify-self: \"start\"\n      - margin-left: \"12px\"\n    grid:\n      - grid-template-areas: \"'icon .' 'n n' 'l l' '. .'\"\n      - grid-template-rows: \"auto repeat(2, min-content) 12px\"\n    card:\n      - padding: \"0px\"\n      - background-image: >\n          [[[\n            return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].fanart})`;\n          ]]]\n      - border: \"none\"\n    custom_fields:\n      icon:\n        - z-index: 2\n        - align-self: \"start\"\n        - justify-self: \"start\"\n        - height: \"24px\"\n        - width: \"24px\"\n        - margin-left: \"12px\"\n        - margin-top: \"12px\"\n      blur:\n        - z-index: 1\n        - position: \"absolute\"\n        - top: 0\n        - left: 0\n        - height: \"100%\"\n        - width: \"100%\"\n        - border-radius: \"var(--border-radius)\"\n        - background: \"linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%)\"\n  custom_fields:\n    icon: >\n      <svg viewBox=\"0 0 50 50\">\n        <path d=\"M7.7.3h34.6c4.1 0 7.4 3.3 7.4 7.4v34.6c0 4.1-3.3 7.4-7.4 7.4H7.7c-4.1 0-7.4-3.3-7.4-7.4V7.7C.3 3.6 3.6.3 7.7.3z\" fill=\"#282a2d\"/>\n        <path d=\"M25,7.1H14.6L25,25L14.6,42.9H25L35.4,25L25,7.1z\" fill=\"#e5a00d\"/>\n      </svg>\n    blur: >\n      [[[ return entity === undefined ? null : \"<div id='blur'></div>\"; ]]]\n\ncustom_card_imswel_medias_upcoming:\n  template:\n    - \"custom_card_imswel_medias\"\n    - \"ulm_translation_engine\"\n    - \"custom_card_imswel_medias_language_variables\"\n  variables:\n    ulm_custom_card_imswel_medias_index: 1\n    ulm_custom_card_imswel_medias_platform: >\n      [[[\n        if (entity.entity_id.includes(\"sonarr\")){\n          return \"sonarr\";\n        } else if(entity.entity_id.includes(\"plex\")){\n          return \"plex\";\n        } else{\n          return \"radarr\";\n        }\n      ]]]\n  triggers_update: \"all\"\n  aspect_ratio: \"3/4\"\n  label: >\n    [[[\n      var data = entity.attributes?.data;\n      var platform = variables.ulm_custom_card_imswel_medias_platform;\n      var airdate = new Date(data[variables.ulm_custom_card_imswel_medias_index].airdate);\n\n      Date.prototype.addDays = function (days) {\n        const date = new Date(this.valueOf());\n        date.setDate(date.getDate() + days);\n        return date;\n      }\n\n      function formatRelease(release){\n        if(release.includes(\"Available\")){\n          return \"\"\n        } else if (release.includes(\"In Theaters\")){\n          return variables.ulm_custom_card_imswel_in_theaters;\n        }\n      }\n\n      function formatDate(date){\n        var weekday = variables.ulm_custom_card_imswel_weekday;\n        var now = new Date();\n        var tomorrow = now.addDays(1);\n\n        var time = date - now;\n        var secs = parseInt((time / 1000), 10);\n        var days = Math.floor(secs / (3600*24));\n\n        if (days < 6){\n          if (weekday[date.getDay()] == weekday[now.getDay()]){\n            return variables.ulm_custom_card_imswel_today;\n          } else if (weekday[date.getDay()] == weekday[tomorrow.getDay()]){\n            return variables.ulm_custom_card_imswel_tommorow;\n          } else{\n            return weekday[date.getDay()];\n          }\n        } else{\n          return date.toLocaleDateString(variables.ulm_custom_card_imswel_locale);\n        }\n      }\n\n      if(platform == \"radarr\"){\n        var release = data[variables.ulm_custom_card_imswel_medias_index].release;\n        return formatDate(airdate) + \" \" + formatRelease(release);\n      } else if(platform == \"sonarr\"){\n        return formatDate(airdate);\n      }\n    ]]]\n  name: >\n    [[[\n      if (entity.state == \"unavailable\" || entity.state == \"undefined\"){\n        return variables.ulm_translation_unavailable;\n      } else{\n        var data = entity.attributes?.data;\n        var platform = variables.ulm_custom_card_imswel_medias_platform;\n\n        if(platform == \"radarr\"){\n          return `${data[variables.ulm_custom_card_imswel_medias_index].title}`;\n        } else if(platform ==\"sonarr\"){\n          var number = data[variables.ulm_custom_card_imswel_medias_index].number;\n          return `${data[variables.ulm_custom_card_imswel_medias_index].title} - ${number}`;\n        }\n      }\n    ]]]\n  styles:\n    icon:\n    label:\n      - align-self: \"start\"\n      - justify-self: \"center\"\n    name:\n      - align-self: \"end\"\n      - justify-self: \"center\"\n    state:\n    img_cell:\n    grid:\n      - grid-template-areas: \"'. . .' '. n .' '. l .' '. . .'\"\n      - grid-template-columns: \"8px 1fr 8px\"\n      - grid-template-rows: \"auto repeat(2, min-content) 8px\"\n    card:\n      - background-image: >\n          [[[\n            return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].poster})`;\n          ]]]\n      - border: \"none\"\n    custom_fields:\n      overlay:\n        - z-index: 1\n        - position: \"absolute\"\n        - top: 0\n        - left: 0\n        - height: \"100%\"\n        - width: \"100%\"\n        - border-radius: \"var(--border-radius)\"\n        - background: \"linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%)\"\n  extra_styles: >\n    .ellipsis:not(#overlay){\n      white-space: normal !important;\n      word-wrap: break-all;\n      max-height: 2.4em;\n      line-height: 1.2em;\n    }\n  custom_fields:\n    overlay: >\n      [[[ return entity === undefined ? null : \"<div id='overlay'></div>\"; ]]]\n
"},{"location":"usage/custom_cards/custom_card_imswel_person/","title":"Person Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_imswel_person/#custom-card-person","title":"Custom-card \"Person\"","text":"
This is a custom-card that improves the original person card (card_person) by automatically using all zones and adding a pop-up window inspired by the nice theme of @matt8707
 
"},{"location":"usage/custom_cards/custom_card_imswel_person/#credits","title":"Credits","text":"
Author: imswel - 2022 Version: 1.0.2
"},{"location":"usage/custom_cards/custom_card_imswel_person/#changelog","title":"Changelog","text":"1.0.2   UI fix and improvement.  1.0.1   Breaking change: removed variable for zones, instead load all zones automatically.  1.0.0   Initial release"},{"location":"usage/custom_cards/custom_card_imswel_person/#requirements","title":"Requirements","text":"
This card needs the following to function correctly:
 Component / card required browser_mod yes lovelace-card-mod yes"},{"location":"usage/custom_cards/custom_card_imswel_person/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_imswel_person\n  variables:\n    ulm_card_imswel_person_entity: person.john\n    ulm_card_imswel_person_wifi_tracker: device_tracker.my_phone_wifi\n    ulm_card_imswel_person_gps_tracker: device_tracker.my_phone\n    ulm_card_imswel_person_findmy_script: script.find_my_phone\n    ulm_card_imswel_person_use_entity_picture: true\n
"},{"location":"usage/custom_cards/custom_card_imswel_person/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_card_imswel_person_entity person.john yes The person entity ulm_card_imswel_person_wifi_tracker device_tracker.my_phone_wifi yes A device_tracker entity of the person based on wifi ulm_card_imswel_person_gps_tracker device_tracker.my_phone yes A device_tracker entity of the person based on location ulm_card_imswel_person_findmy_script script.find_my_phone yes A script entity that make ring your phone ulm_card_imswel_person_use_entity_picture true or false no If true, shows the entity picture from your user instead of the icon. Default is false"},{"location":"usage/custom_cards/custom_card_imswel_person/#phone-finder-script-example","title":"Phone finder script example","text":"
find_my_phone:\n  sequence:\n  - service: notify.mobile_app_my_android\n    data:\n      message: command_volume_level\n      data:\n        media_stream: alarm_stream\n        command: 20\n  - service: notify.mobile_app_my_android\n    data:\n      message: Home Assistant is searching your phone !\n      data:\n        ttl: 0\n        priority: high\n        channel: alarm_stream\n  mode: single\n
 Template Code custom_card_imswel_person.yaml
---\ncustom_card_imswel_person:\n  template:\n    - \"ulm_translation_engine\"\n    - \"icon_info_bg\"\n    - \"ulm_custom_card_imswel_person_language_variables\"\n    - \"custom_popup_imswel_person\"\n  variables:\n    ulm_card_imswel_person_use_entity_picture: false\n  triggers_update: \"[[[ return variables.ulm_card_imswel_person_entity ]]]\"\n  show_entity_picture: \"[[[ return variables.ulm_card_imswel_person_use_entity_picture ]]]\"\n  show_label: true\n  show_name: true\n  icon: \"mdi:face-man\"\n  entity_picture: >\n    [[[\n      if (variables.ulm_card_imswel_person_use_entity_picture == true){\n        return states[variables.ulm_card_imswel_person_entity].attributes.entity_picture;\n      } else{\n        return null;\n      }\n    ]]]\n  label: >\n    [[[\n      let state = states[variables.ulm_card_imswel_person_entity].state;\n      let option = [\"home\", \"not_home\", \"unavailable\", \"unknown\"];\n      if (option.includes(state)){\n        if (state == \"home\"){\n          return variables.ulm_custom_card_imswel_person_home;\n        } else if (state == \"not_home\"){\n          return variables.ulm_custom_card_imswel_person_not_home;\n        } else{\n          return variables.ulm_translation_unavailable;\n        }\n      } else{\n        return state;\n      }\n    ]]]\n  name: \"[[[ return states[variables.ulm_card_imswel_person_entity].attributes.friendly_name ]]]\"\n  entity: \"[[[ return variables.ulm_card_imswel_person_entity; ]]]\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme), 0.9)\"\n      - width: >\n          [[[\n            if (variables.ulm_card_imswel_person_use_entity_picture == true){\n              return \"42px\";\n            } else {\n              return \"20px\";\n            }\n          ]]]\n    custom_fields:\n      notification:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"38px\"\n        - top: \"8px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: >\n            [[[\n              let state = states[variables.ulm_card_imswel_person_entity].state;\n              let option = [\"unavailable\", \"unknown\"];\n              if (option.includes(state)){\n                return \"rgba(var(--color-red),1)\";\n              } else if (state == 'home') {\n                return \"rgba(var(--color-blue),1)\";\n              } else {\n                return \"rgba(var(--color-green),1)\";\n              }\n            ]]]\n  custom_fields:\n    notification: >\n      [[[\n        var zones = Object.values(states).filter((entity) => entity.entity_id.startsWith(\"zone.\")).map((entity) => entity.entity_id);\n        var person_location = states[variables.ulm_card_imswel_person_entity].state;\n        let option = [\"unavailable\", \"unknown\"];\n        if (option.includes(person_location)){\n          return '<ha-icon icon=\"mdi:alert\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        } else{\n          if (person_location == \"home\"){\n            return '<ha-icon icon=\"mdi:home-variant\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n          } else{\n            for (const item of zones){\n              if (person_location == states[item]?.attributes?.friendly_name){\n                var icon = (states[item].attributes.icon !== null) ? states[item].attributes.icon : 'mdi:help-circle';\n                return '<ha-icon icon=\"' + icon + '\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n              } else if (person_location == 'not_home'){\n                return '<ha-icon icon=\"mdi:home-minus\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n              }\n            }\n          }\n        }\n      ]]]\n\ncustom_popup_imswel_person:\n  tap_action:\n    action: \"fire-dom-event\"\n    browser_mod:\n      service: \"browser_mod.popup\"\n      data:\n        title: \"[[[ return states[variables.ulm_card_imswel_person_entity].attributes.friendly_name ]]]\"\n        size: >\n          [[[\n            const mediaQuery = window.matchMedia(\"(max-width: 800px)\")\n            if (mediaQuery.matches) {\n              return \"fullscreen\";\n            }\n          ]]]\n        style: >\n          --popup-padding-x: 0px;\n          --popup-padding-y: 0px;\n        card_mod:\n          style:\n            ha-dialog: >\n              .content .container{\n                padding: 0 !important;\n              }\n        content:\n          type: \"vertical-stack\"\n          cards:\n            - type: \"entities\"\n              style: >\n                ha-card{\n                  box-shadow: none;\n                }\n              entities:\n                - entity: \"[[[ return variables.ulm_card_imswel_person_entity; ]]]\"\n                  secondary_info: \"last-changed\"\n            - type: \"history-graph\"\n              style: >\n                ha-card{\n                  box-shadow: none;\n                }\n              hours_to_show: 8\n              entities:\n                - entity: \"[[[ return variables.ulm_card_imswel_person_entity; ]]]\"\n                  name: \"\u200e\"\n            - type: \"horizontal-stack\"\n              cards:\n                - type: \"custom:button-card\"\n                  template: \"custom_card_imswel_person_glance_icon\"\n                  entity: \"[[[ return variables.ulm_card_imswel_person_wifi_tracker; ]]]\"\n                  name: \"WiFi\"\n                  icon: \"mdi:wifi\"\n                - type: \"custom:button-card\"\n                  template: \"custom_card_imswel_person_glance_icon\"\n                  entity: \"[[[ return variables.ulm_card_imswel_person_gps_tracker; ]]]\"\n                  name: \"GPS\"\n                  icon: \"mdi:map-marker\"\n            - type: \"custom:button-card\"\n              template: \"custom_card_imswel_person_findmy_button\"\n              entity: \"[[[ return variables.ulm_card_imswel_person_findmy_script; ]]]\"\n            - type: \"map\"\n              style:\n                .: >\n                  ha-card{\n                    box-shadow: none;\n                    border-radius: 0px;\n                  }\n                ha-map:\n                  $: >\n                    .leaflet-control-attribution {\n                      display: none;\n                    }\n              aspect_ratio: \"90%\"\n              default_zoom: 16\n              entities: \"[[[ return [variables.ulm_card_imswel_person_gps_tracker]; ]]]\"\n\ncustom_card_imswel_person_glance_icon:\n  variables:\n    color: \"green\"\n    state: \"home\"\n  tap_action:\n    action: \"none\"\n  triggers_update: \"[[[ return entity.entity_id; ]]]\"\n  show_label: false\n  show_state: false\n  size: \"20px\"\n  state:\n    - operator: \"template\"\n      value: \"[[[ return entity.state == variables.state; ]]]\"\n      styles:\n        icon:\n          - color: \"[[[ return `rgba(var(--color-${variables.color}), 1)`; ]]]\"\n        img_cell:\n          - background-color: \"[[[ return `rgba(var(--color-${variables.color}), 0.2)`; ]]]\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n    name:\n      - margin-bottom: \"12px\"\n      - justify-self: \"center\"\n      - align-self: \"start\"\n      - font-weight: \"regular\"\n      - font-size: \"14px\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - width: \"42px\"\n      - height: \"42px\"\n    grid:\n      - grid-template-areas: \"'n' 'i'\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"none\"\n\ncustom_card_imswel_person_findmy_button:\n  template:\n    - \"ulm_custom_card_imswel_person_language_variables\"\n  tap_action:\n    action: \"toggle\"\n  icon: \"mdi:volume-high\"\n  size: \"1.4em\"\n  name: \"[[[ return variables.ulm_custom_card_imswel_person_findmy; ]]]\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.4)\"\n    name:\n      - font-size: \"1.06em\"\n      - letterspacing: \"0.015em\"\n      - color: \"rgba(var(--color-theme),1)\"\n      - filter: \"opacity(60%)\"\n    img_cell:\n      - margin-right: \"4px\"\n    grid:\n      - grid-template-areas: \"'i n'\"\n      - grid-column-gap: \"0.3em\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - padding: \"1em 1.4em\"\n      - margin: \"16px auto\"\n      - width: \"100%\"\n      - font-size: \"1.06em\"\n      - box-shadow: \"none\"\n      - border: \"1px solid rgba(var(--color-theme),0.4)\"\n  extra_styles: >\n    :host{\n      align-self: center !important;\n    }\n    ha-card:hover{\n      background: rgba(var(--color-blue),0.2);\n      border: 1px solid rgba(var(--color-blue),0.1) !important;\n    }\n    ha-card:hover #name{\n      color: rgba(var(--color-blue),1) !important;\n      filter: opacity(100%) !important;\n    }\n    ha-card:hover #icon{\n      color: rgba(var(--color-blue),1) !important;\n    }\n
"},{"location":"usage/custom_cards/custom_card_input_datetime/","title":"Input Datetime Custom-card","text":""},{"location":"usage/custom_cards/custom_card_input_datetime/#custom-card-input-datetime-card","title":"Custom-card \"Input Datetime Card\"","text":"
The card_input_datetime you can control a input_datetime entity.
 
"},{"location":"usage/custom_cards/custom_card_input_datetime/#credits","title":"Credits","text":"
Author: sildehoop - 2022 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_input_datetime/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_input_datetime/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template:\n    - card_input_datetime\n  entity: input_datetime.YOUR_INPUT_DATETIME_ENTITY\n  variables:\n    ulm_card_input_datetime_name: \"YOUR_NAME\"\n
"},{"location":"usage/custom_cards/custom_card_input_datetime/#requirements","title":"Requirements","text":"
n/a
"},{"location":"usage/custom_cards/custom_card_input_datetime/#variables","title":"Variables","text":"Variable Example Required Explanation"},{"location":"usage/custom_cards/custom_card_input_datetime/#template-code","title":"Template code","text":"Template Code custom_card_input_datetime.yaml
---\ncard_input_datetime:\n  show_name: false\n  show_icon: false\n  variables:\n    ulm_card_input_datetime_name: \"n/a\"\n  triggers_update: \"all\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info\"\n          - \"ulm_translation_engine\"\n          - \"input_datetime\"\n        tap_action:\n          action: \"more-info\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        name: \"[[[ return variables.ulm_card_input_datetime_name ]]]\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  time: >\n                    [[[\n                      var timestamp = entity.attributes.timestamp\n\n                      let unix_timestamp = timestamp - 4500;\n                      // Create a new JavaScript Date object based on the timestamp\n                      // multiplied by 1000 so that the argument is in milliseconds, not seconds.\n                      var date = new Date(unix_timestamp * 1000);\n                      // Hours part from the timestamp\n                      var hours = date.getHours();\n                      // Minutes part from the timestamp\n                      var minutes = \"0\" + date.getMinutes();\n                      // Seconds part from the timestamp\n                      var seconds = \"0\" + date.getSeconds();\n\n                      // Will display time in 10:30:23 format\n                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);\n\n                      return formattedTime;\n                    ]]]\n              icon: \"mdi:arrow-down\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_text\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  time: >\n                    [[[\n                      var timestamp = entity.attributes.timestamp\n\n                      let unix_timestamp = timestamp - 3540;\n                      // Create a new JavaScript Date object based on the timestamp\n                      // multiplied by 1000 so that the argument is in milliseconds, not seconds.\n                      var date = new Date(unix_timestamp * 1000);\n                      // Hours part from the timestamp\n                      var hours = date.getHours();\n                      // Minutes part from the timestamp\n                      var minutes = \"0\" + date.getMinutes();\n                      // Seconds part from the timestamp\n                      var seconds = \"0\" + date.getSeconds();\n\n                      // Will display time in 10:30:23 format\n                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);\n\n                      return formattedTime;\n                    ]]]\n              hold_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  time: >\n                    [[[\n                      var timestamp = entity.attributes.timestamp\n\n                      let unix_timestamp = timestamp - 3660;\n                      // Create a new JavaScript Date object based on the timestamp\n                      // multiplied by 1000 so that the argument is in milliseconds, not seconds.\n                      var date = new Date(unix_timestamp * 1000);\n                      // Hours part from the timestamp\n                      var hours = date.getHours();\n                      // Minutes part from the timestamp\n                      var minutes = \"0\" + date.getMinutes();\n                      // Seconds part from the timestamp\n                      var seconds = \"0\" + date.getSeconds();\n\n                      // Will display time in 10:30:23 format\n                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);\n\n                      return formattedTime;\n                    ]]]\n\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"input_datetime.set_datetime\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  time: >\n                    [[[\n                      var timestamp = entity.attributes.timestamp\n\n                      let unix_timestamp = timestamp - 2700;\n                      var date = new Date(unix_timestamp * 1000);\n                      var hours = date.getHours();\n                      var minutes = \"0\" + date.getMinutes();\n                      var seconds = \"0\" + date.getSeconds();\n                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);\n\n                      return formattedTime;\n                    ]]]\n              icon: \"mdi:arrow-up\"\n\ninput_datetime:\n  tap_action:\n    action: \"more-info\"\n  show_last_changed: true\n\nwidget_text:\n  tap_action:\n    action: \"toggle\"\n  template:\n    - \"ulm_translation_engine\"\n  show_icon: false\n  show_label: true\n  show_name: false\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  styles:\n    grid:\n      - grid-template-areas: \"'l'\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"14px\"\n      - place-self: \"center\"\n      - height: \"42px\"\n    state:\n      - color: \"rgba(var(--color-theme),0.9)\"\n  size: \"20px\"\n  color: \"var(--google-grey)\"\n
"},{"location":"usage/custom_cards/custom_card_input_number/","title":"Input Number Custom-card","text":""},{"location":"usage/custom_cards/custom_card_input_number/#custom-card-input-number","title":"Custom-card \"Input Number\"","text":"
The card_input_number you can control a input_number entity
 
"},{"location":"usage/custom_cards/custom_card_input_number/#credits","title":"CreditsBraking changes","text":"
Author: sildehoop - 2021 Version: 1.1.0
 1.1.0 
#OLD\n- type: \"custom:button-card\"\n  template:\n    - card_input_number\n  variables:\n    ulm_card_input_number_name: \"YOUR_NAME\"\n    ulm_card_input_number_entity: \"input_number.YOUR_INPUT_NUMBER\"\n
 
#NEW\n- type: \"custom:button-card\"\n  template: card_input_number\n  entity: input_number.YOUR_INPUT_NUMBER_ENTITY\n  variables:\n    ulm_card_input_number_name: \"YOUR_CARD_NAME\"\n
"},{"location":"usage/custom_cards/custom_card_input_number/#changelog","title":"Changelog","text":"1.1.0 Adds ability to work with counter entities. Compatibility with input number entities is not affected.  1.0.1 Added option to leave ulm_card_input_number_name empty (takes the friendly_name of the entity) Removed background from middle text (because it is not a button). Removed variables ulm_card_input_number_entity.  1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_input_number/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_input_number\n  entity: input_number.YOUR_INPUT_NUMBER\n  variables:\n    ulm_card_input_number_name: \"YOUR_NAME\"\n
"},{"location":"usage/custom_cards/custom_card_input_number/#requirements","title":"Requirements","text":"
n/a
"},{"location":"usage/custom_cards/custom_card_input_number/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_card_input_number_name Bathroom Ceiling Fan Threshold false The name to display on your card"},{"location":"usage/custom_cards/custom_card_input_number/#template-code","title":"Template code","text":"Template Code custom_card_input_number.yaml
---\ncard_input_number:\n  variables:\n    ulm_card_input_number_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n  triggers_update: \"all\"\n  show_icon: false\n  show_label: false\n  show_name: false\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info\"\n          - \"ulm_translation_engine\"\n          - \"input_number\"\n        tap_action:\n          action: \"more-info\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        name: \"[[[ return variables.ulm_card_input_number_name ]]]\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: |\n                  [[[\n                    if( entity.entity_id.startsWith(\"input_number.\") )\n                      return \"input_number.decrement\";\n                    else if( entity.entity_id.startsWith(\"counter.\") )\n                      return \"counter.decrement\";\n                    else if( entity.entity_id.startsWith(\"select.\") )\n                      return \"select.select_previous\";\n                    return \"\";\n                  ]]]\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:arrow-down\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_text\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"cover.stop_cover\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: |\n                  [[[\n                    if( entity.entity_id.startsWith(\"input_number.\") )\n                      return \"input_number.increment\";\n                    else if( entity.entity_id.startsWith(\"counter.\") )\n                      return \"counter.increment\";\n                    else if( entity.entity_id.startsWith(\"select.\") )\n                      return \"select.select_next\";\n                    return \"\";\n                  ]]]\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:arrow-up\"\n\ninput_number:\n  tap_action:\n    action: \"more-info\"\n  show_last_changed: true\n\nwidget_text:\n  tap_action:\n    action: \"toggle\"\n  template:\n    - \"ulm_translation_engine\"\n  show_icon: false\n  show_label: true\n  show_name: false\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  styles:\n    grid:\n      - grid-template-areas: \"'l'\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - border-radius: \"14px\"\n      - place-self: \"center\"\n      - height: \"42px\"\n    state:\n      - color: \"rgba(var(--color-theme),0.9)\"\n  size: \"20px\"\n  color: \"var(--google-grey)\"\n
"},{"location":"usage/custom_cards/custom_card_irmajavi_entities/","title":"Entities Custom-card","text":""},{"location":"usage/custom_cards/custom_card_irmajavi_entities/#custom-card-entities","title":"Custom-card \"Entities\"","text":"
This is a custom-card to display states from multiple entities or from an entity with multiples attributes (To use it with attributes need to modify the code)
 
"},{"location":"usage/custom_cards/custom_card_irmajavi_entities/#credits","title":"Credits","text":"
Author: irmajavi - 2022 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_irmajavi_entities/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_irmajavi_entities/#requirements","title":"Requirements","text":"
none
"},{"location":"usage/custom_cards/custom_card_irmajavi_entities/#usage","title":"Usage","text":"
type: custom:button-card\ntemplate: custom_card_irmajavi_entities\nvariables:\n  ulm_custom_card_irmajavi_entities_entity_1: sensor.inverter_voltage\n  ulm_custom_card_irmajavi_entities_entity_2: sensor.inverter_temperature\n  ulm_custom_card_irmajavi_entities_entity_3: sensor.active_ac_power\n  ulm_custom_card_irmajavi_entities_entity_4: sensor.ac_load_current\n  ulm_custom_card_irmajavi_entities_name_1: Voltage\n  ulm_custom_card_irmajavi_entities_name_2: Temperature\n  ulm_custom_card_irmajavi_entities_name_3: AC Power\n  ulm_custom_card_irmajavi_entities_name_4: Current\n  ulm_custom_card_irmajavi_entities_name: System Status\n  ulm_custom_card_irmajavi_entities: sensor.inverter_operating_mode\n
"},{"location":"usage/custom_cards/custom_card_irmajavi_entities/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_custom_card_irmajavi_entities sensor.main Yes Main entity ulm_custom_card_irmajavi_entitites_name Status Yes Main entity name ulm_custom_card_irmajavi_entities_entity_1 sensor.test1 Yes The first entity ulm_custom_card_irmajavi_entities_entity_2 sensor.test2 Yes The second entity ulm_custom_card_irmajavi_entities_entity_3 sensor.test3 Yes The third entity ulm_custom_card_irmajavi_entities_entity_4 sensor.test4 Yes The forth entity ulm_custom_card_irmajavi_entities_name_1 Test1 Yes The name of the first entity ulm_custom_card_irmajavi_entities_name_2 Test2 Yes The name of the second entity ulm_custom_card_irmajavi_entities_name_3 Test3 Yes The name of the third entity ulm_custom_card_irmajavi_entities_name_4 Test4 Yes The name of the forth entity"},{"location":"usage/custom_cards/custom_card_irmajavi_entities/#template-code","title":"Template Code","text":"Template Code custom_card_irmajavi_entities.yaml
---\ncustom_card_irmajavi_entities:\n  template:\n    - \"ulm_translation_engine\"\n  triggers_update: \"all\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2''item3' 'item4'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"30px\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - height: \"160px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        color: \"var(--google-grey)\"\n        show_icon: false\n        show_label: true\n        show_name: true\n        styles:\n          name:\n            - align-self: \"start\"\n            - justify-self: \"start\"\n            - font-weight: \"bold\"\n            - font-size: \"14px\"\n            - margin-left: \"12px\"\n          grid:\n            - grid-template-areas: \"'n' 'l'\"\n            - grid-template-columns: \"min-content auto min-content\"\n            - grid-template-rows: \"min-content min-content\"\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"20px\"\n            - border: \"2px solid var(--google-grey)\"\n            - height: \"70px\"\n          label:\n            - justify-self: \"start\"\n            - align-self: \"end\"\n            - font-weight: \"bold\"\n            - font-size: \"14px\"\n            - filter: \"opacity(40%)\"\n            - margin-left: \"35px\"\n        name: |\n          [[[\n            var icon = '\ud83d\udc7d';\n            if (variables.ulm_custom_card_irmajavi_entities_icon)\n            {\n              var icon = variables.ulm_custom_card_irmajavi_entities_icon;\n            }\n            return icon + \"' '\" + variables.ulm_custom_card_irmajavi_entities_name;\n          ]]]\n        label: |\n          [[[ return states[variables.ulm_custom_card_irmajavi_entities].state ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_4_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_widget_irmajavi\"\n              entity: >-\n                [[[ return variables.ulm_custom_card_irmajavi_entities_entity_1;\n                ]]]\n              name: >-\n                [[[ return variables.ulm_custom_card_irmajavi_entities_name_1\n                ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_widget_irmajavi\"\n              entity: >-\n                [[[ return variables.ulm_custom_card_irmajavi_entities_entity_2;\n                ]]]\n              name: >-\n                [[[ return variables.ulm_custom_card_irmajavi_entities_name_2\n                ]]]\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_widget_irmajavi\"\n              entity: >-\n                [[[ return variables.ulm_custom_card_irmajavi_entities_entity_3;\n                ]]]\n              name: >-\n                [[[ return variables.ulm_custom_card_irmajavi_entities_name_3\n                ]]]\n          item4:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_widget_irmajavi\"\n              entity: >-\n                [[[ return variables.ulm_custom_card_irmajavi_entities_entity_4;\n                ]]]\n              name: >-\n                [[[ return variables.ulm_custom_card_irmajavi_entities_name_4\n                ]]]\ncustom_widget_irmajavi:\n  show_label: true\n  show_icon: false\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  styles:\n    name:\n      - justify-self: \"center\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n    label:\n      - margin-top: \"10px\"\n      - justify-self: \"center\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n    grid:\n      - grid-template-areas: \"'l' 'n'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n    card:\n      - box-shadow: \"none\"\n
"},{"location":"usage/custom_cards/custom_card_irmajavi_speedtest/","title":"Speedtest Custom-card","text":""},{"location":"usage/custom_cards/custom_card_irmajavi_speedtest/#custom-card-speedtest","title":"Custom-card \"Speedtest\"","text":"
This is a custom-card to display the results from the Speedtest.net integration. The integration uses the Speedtest.net web service to measure network bandwidth performance.
 
"},{"location":"usage/custom_cards/custom_card_irmajavi_speedtest/#credits","title":"CreditsBreaking changes","text":"
Author: irmajavi - 2022 Version: 1.0.0
 1.1.0  Changed from speedtestdotnet.speedtest service to update entity service from Home Assistant due to announced deprecation of the speedtest service."},{"location":"usage/custom_cards/custom_card_irmajavi_speedtest/#changelog","title":"Changelog","text":"1.1.0 The variable ulm_custom_card_irmajavi_speedtest_download_speed_entity is now used to trigger an update of all the speedtest sensors.  1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_irmajavi_speedtest/#requirements","title":"Requirements","text":"
Home Assistant Speedtest.net integration
"},{"location":"usage/custom_cards/custom_card_irmajavi_speedtest/#usage","title":"Usage","text":"
type: custom:button-card\ntemplate: custom_card_irmajavi_speedtest\nvariables:\n  ulm_custom_card_irmajavi_speedtest_download_speed_entity: sensor.speedtest_download\n  ulm_custom_card_irmajavi_speedtest_upload_speed_entity: sensor.speedtest_upload\n  ulm_custom_card_irmajavi_speedtest_ping_entity: sensor.speedtest_ping\n  ulm_custom_card_irmajavi_speedtest_color: blue\n  ulm_custom_card_irmajavi_speedtest_router_name: router_name\n  ulm_custom_card_irmajavi_speedtest_router_model: router_model\n
"},{"location":"usage/custom_cards/custom_card_irmajavi_speedtest/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_custom_card_irmajavi_speedtest_router_name Linksys Yes Your router name ulm_custom_card_irmajavi_speedtest_router_model EA8549 Yes Your router model ulm_custom_card_irmajavi_speedtest_color blue Yes The color of the icon ulm_custom_card_irmajavi_speedtest_upload_speed_entity sensor.test2 Yes The upload sensor created by the integration ulm_custom_card_irmajavi_speedtest_download_speed_entity sensor.test3 Yes The download sensor created by the integration ulm_custom_card_irmajavi_speedtest_ping_entity sensor.test4 Yes The ping sensor created by the integration"},{"location":"usage/custom_cards/custom_card_irmajavi_speedtest/#template-code","title":"Template Code","text":"Template Code custom_card_irmajavi_speedtest.yaml
---\ncustom_card_irmajavi_speedtest:\n  triggers_update: \"all\"\n  show_name: false\n  show_label: false\n  template:\n    - \"ulm_custom_card_irmajavi_speedtest_language_variables\"\n  variables:\n    ulm_custom_card_irmajavi_speedtest_color: \"blue\"\n    ulm_custom_card_irmajavi_speedtest_router_name: \"router_name\"\n    ulm_custom_card_irmajavi_speedtest_router_model: \"router_model\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2' 'item3'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        tap_action:\n          action: \"none\"\n        show_last_changed: false\n        show_label: true\n        show_name: true\n        show_icon: true\n        label: >-\n          [[[ return variables.ulm_custom_card_irmajavi_speedtest_router_model ]]]\n        name: >-\n          [[[ return variables.ulm_custom_card_irmajavi_speedtest_router_name ]]]\n        icon: \"mdi:wifi\"\n        styles:\n          icon:\n            - color: >-\n                [[[ return\n                `rgba(var(--color-${variables.ulm_custom_card_irmajavi_speedtest_color}),\n                1)`; ]]]\n            - width: \"32px\"\n          label:\n            - justify-self: \"center\"\n            - align-self: \"start\"\n            - font-weight: \"bolder\"\n            - font-size: \"12px\"\n            - filter: \"opacity(40%)\"\n          name:\n            - margin-top: \"10px\"\n            - justify-self: \"center\"\n            - font-weight: \"bold\"\n            - font-size: \"14px\"\n          img_cell:\n            - background-color: >-\n                [[[ return\n                `rgba(var(--color-${variables.ulm_custom_card_irmajavi_speedtest_color}),\n                0.2)`; ]]]\n            - border-radius: \"50%\"\n            - place-self: \"center\"\n            - width: \"62px\"\n            - height: \"62px\"\n          grid:\n            - grid-template-areas: \"'i' 'n' 'l'\"\n          card:\n            - box-shadow: \"none\"\n        size: \"20px\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        tap_action:\n          action: \"perform-action\"\n          perform_action: \"homeassistant.update_entity\"\n          target:\n            entity_id:\n              - \"[[[ return variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity]]]\"\n              - \"[[[ return variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity]]]\"\n              - \"[[[ return variables.ulm_custom_card_irmajavi_speedtest_ping_entity]]]\"\n        color: \"var(--google-grey)\"\n        show_icon: true\n        show_label: false\n        show_name: true\n        styles:\n          custom_fields:\n            item1:\n              - justify-self: \"end\"\n              - margin-top: \"-23px\"\n              - margin-right: \"3px\"\n          icon:\n            - color: \"rgba(var(--color-theme),0.9)\"\n            - width: \"20px\"\n          img_cell:\n            - background-color: \"none\"\n            - place-self: \"center\"\n            - justify-self: \"start\"\n            - width: \"40px\"\n            - height: \"20px\"\n          name:\n            - align-self: \"end\"\n            - justify-self: \"start\"\n            - font-weight: \"bold\"\n            - font-size: \"16px\"\n            - margin-left: \"40px\"\n            - margin-top: \"3px\"\n          grid:\n            - grid-template-areas: \"i n item1\"\n            - grid-template-columns: \"min-content\"\n            - grid-template-rows: \"auto\"\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"10px\"\n            - border: \"2px solid var(--google-grey)\"\n            - padding_bottom: \"-8px\"\n            - height: \"40px\"\n            - padding-top: \"5px\"\n            - padding-left: \"5px\"\n        name: \"[[[ return variables.ulm_custom_card_irmajavi_speedtest_speedtest ]]]\"\n        icon: \"mdi:speedometer\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              show_icon: true\n              show_name: false\n              show_label: false\n              styles:\n                icon:\n                  - color: \"rgba(var(--color-theme),0.9)\"\n                  - width: \"20px\"\n                  - justify-self: \"end\"\n                grid:\n                  - grid-template-areas: \"i\"\n                  - grid-template-columns: \"auto\"\n                  - grid-template-rows: \"auto\"\n                card:\n                  - box-shadow: \"none\"\n              icon: \"mdi:chevron-right\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_2_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              color: \"var(--google-blue)\"\n              show_label: true\n              show_icon: false\n              name: \"[[[ return variables.ulm_custom_card_irmajavi_speedtest_download ]]]\"\n              entity: >-\n                [[[ return\n                variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity;\n                ]]]\n              label: |\n                [[[\n                    var state1 = \"\";\n                    if (states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].state){\n                      var state1 = states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].state;\n                      if (states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].attributes.unit_of_measurement){\n                        state1 += states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].attributes.unit_of_measurement;\n                      }\n                    }\n                    return state1;\n                ]]]\n              styles:\n                icon:\n                  - width: \"30px\"\n                  - height: \"30px\"\n                label:\n                  - align-self: \"center\"\n                  - justify-self: \"center\"\n                  - font-weight: \"bold\"\n                  - font-size: \"23px\"\n                name:\n                  - align-self: \"center\"\n                  - justify-self: \"center\"\n                  - font-weight: \"bold\"\n                  - font-size: \"12px\"\n                  - filter: \"opacity(40%)\"\n                grid:\n                  - grid-template-areas: \"'l' 'n'\"\n                  - grid-template-columns: \"auto\"\n                  - grid-template-rows: \"min-content\"\n                card:\n                  - box-shadow: \"none\"\n                  - padding-top: \"15px\"\n                  - padding-botton: \"10px\"\n                  - background-color: \"rgba(var(--color-theme),0.05)\"\n                  - border-radius: \"14px\"\n                  - place-self: \"center\"\n                  - height: \"80px\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              color: \"var(--google-blue)\"\n              show_label: true\n              show_icon: false\n              name: \"[[[ return variables.ulm_custom_card_irmajavi_speedtest_upload ]]]\"\n              entity: >-\n                [[[ return\n                variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity;\n                ]]]\n              label: |\n                [[[\n                    var state1 = \"\";\n                    if (states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].state){\n                      var state1 = states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].state;\n                      if (states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].attributes.unit_of_measurement){\n                        state1 += states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].attributes.unit_of_measurement;\n                      }\n                    }\n                    return state1;\n                ]]]\n              styles:\n                icon:\n                  - width: \"30px\"\n                  - height: \"30px\"\n                label:\n                  - align-self: \"center\"\n                  - justify-self: \"center\"\n                  - font-weight: \"bold\"\n                  - font-size: \"23px\"\n                name:\n                  - align-self: \"center\"\n                  - justify-self: \"center\"\n                  - font-weight: \"bold\"\n                  - font-size: \"12px\"\n                  - filter: \"opacity(40%)\"\n                grid:\n                  - grid-template-areas: \"'l' 'n'\"\n                  - grid-template-columns: \"auto\"\n                  - grid-template-rows: \"min-content\"\n                card:\n                  - box-shadow: \"none\"\n                  - padding-top: \"15px\"\n                  - padding-botton: \"10px\"\n                  - background-color: \"rgba(var(--color-theme),0.05)\"\n                  - border-radius: \"14px\"\n                  - place-self: \"center\"\n                  - height: \"80px\"\n
"},{"location":"usage/custom_cards/custom_card_irmajavi_weather/","title":"Weather Custom-card","text":""},{"location":"usage/custom_cards/custom_card_irmajavi_weather/#custom-card-weather","title":"Custom-card \"Weather\"","text":"
This is a custom-card to display states from weather entities or from a weather entity with multiples attributes (To use it with attributes need to modify the code)
 
"},{"location":"usage/custom_cards/custom_card_irmajavi_weather/#credits","title":"Credits","text":"
Author: irmajavi - 2022 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_irmajavi_weather/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_irmajavi_weather/#requirements","title":"Requirements","text":"
In your configuration.yaml you need to create a new sensor in order to use the custom date format the card uses.
 
- platform: template\n  sensors:\n    date_long:\n      friendly_name: \"Date and Day of week\"\n      value_template: >\n        {% set months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Agu\", \"Sep\", \"Oct\", \"Nov\", \"Dic\"] %}\n        {% set days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"] %}\n        {{ months[now().month-1] }}.{{ now().day }}th. {{ days[now().weekday()] }}\n
"},{"location":"usage/custom_cards/custom_card_irmajavi_weather/#usage","title":"Usage","text":"
type: custom:button-card\ntemplate: custom_card_irmajavi_weather\nvariables:\n  ulm_custom_card_irmajavi_weather: weather.aguada_2\n  ulm_custom_card_irmajavi_weather_entity_1: sensor.aguada_wind\n  ulm_custom_card_irmajavi_weather_entity_2: sensor.aguada_precipitation\n  ulm_custom_card_irmajavi_weather_entity_3: sensor.aguada_uv_index\n  ulm_custom_card_irmajavi_weather_entity_4: sensor.weather_humidity\n  ulm_custom_card_irmajavi_weather_name_1: Wind\n  ulm_custom_card_irmajavi_weather_name_2: Precipitation\n  ulm_custom_card_irmajavi_weather_name_3: UV\n  ulm_custom_card_irmajavi_weather_name_4: Humidity\n  ulm_custom_card_irmajavi_weather_temperature_outside: sensor.aguada_realfeel_temperature\n  ulm_custom_card_irmajavi_weather_date: sensor.date_long\n
"},{"location":"usage/custom_cards/custom_card_irmajavi_weather/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_custom_card_irmajavi_weather weather.yourplace Yes The main entity ulm_custom_card_irmajavi_weather_entity_1 weather.humidity Yes Weather entity ulm_custom_card_irmajavi_weather_entity_2 sensor.test1 Yes Weather entity ulm_custom_card_irmajavi_weather_entity_3 sensor.test2 Yes Weather entity ulm_custom_card_irmajavi_weather_entity_4 sensor.test3 Yes Weather entity ulm_custom_card_irmajavi_weather_name_1 Wind Yes Entity name ulm_custom_card_irmajavi_weather_name_2 Humidity Yes Entity name ulm_custom_card_irmajavi_weather_name_3 UV Index Yes Entity name ulm_custom_card_irmajavi_weather_name_4 Precipitation Yes Entity name ulm_custom_card_irmajavi_weather_temperature_outside sensor.test4 Yes Weather entity ulm_custom_card_irmajavi_weather_date sensor.test5 Yes Custom date format sensor"},{"location":"usage/custom_cards/custom_card_irmajavi_weather/#template-code","title":"Template Code","text":"Template Code custom_card_irmajavi_weather.yaml
---\ncustom_card_irmajavi_weather:\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2' 'item3' 'item4'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"30px\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - height: \"160px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        color: \"var(--google-grey)\"\n        show_icon: false\n        show_label: true\n        show_name: true\n        styles:\n          name:\n            - justify-self: \"end\"\n            - align-self: \"end\"\n            - font-weight: \"bold\"\n            - font-size: \"20px\"\n            - border: \"10px solid var(--google-grey)\"\n            - background-color: \"var(--google-grey)\"\n            - color: \"#000000\"\n            - border-radius: \"12px\"\n            - margin-right: \"10px\"\n            - margin-top: \"'-4px'\"\n          label:\n            - align-self: \"start\"\n            - justify-self: \"center\"\n            - font-weight: \"bold\"\n            - font-size: \"14px\"\n            - margin-left: \"12px\"\n          grid:\n            - grid-template-areas: \"'l n item1'\"\n            - grid-template-columns: \"min-content auto min-content\"\n            - grid-template-rows: \"min-content min-content\"\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"20px\"\n            - border: \"2px solid var(--google-grey)\"\n            - height: \"70px\"\n        label: |\n          [[[\n            var icon = '\u2754';\n            if (states[variables.ulm_custom_card_irmajavi_weather].state == 'clear-night'){\n              var icon = '\ud83c\udf19';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'cloudy'){\n              var icon = '\u2601\ufe0f';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'exceptional'){\n              var icon = '\ud83c\udf1e';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'fog'){\n              var icon = '\ud83c\udf2b\ufe0f';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'hail'){\n              var icon = '\u26c8\ufe0f';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'lightning'){\n              var icon = '\u26a1';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'lightning-rainy'){\n              var icon = '\u26c8\ufe0f';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'partlycloudy'){\n              var icon = '\u26c5';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'pouring'){\n              var icon = '\ud83c\udf27\ufe0f';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'rainy'){\n              var icon = '\ud83d\udca7';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'snowy'){\n              var icon = '\u2744\ufe0f';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'snowy-rainy'){\n              var icon = '\ud83c\udf28\ufe0f';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'sunny'){\n              var icon = '\u2600\ufe0f';\n            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'windy'){\n              var icon = '\ud83c\udf2a\ufe0f';\n            }\n            return icon + ' ' + states[variables.ulm_custom_card_irmajavi_weather_date].state;\n          ]]]\n        name: |\n          [[[\n            var unit = states[variables.ulm_custom_card_irmajavi_weather_temperature_outside].attributes.unit_of_measurement != null ? ' ' + states[variables.ulm_custom_card_irmajavi_weather_temperature_outside].attributes.unit_of_measurement : ''\n            return states[variables.ulm_custom_card_irmajavi_weather_temperature_outside].state + unit;\n          ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_4_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"generic_text\"\n              entity: \"'[[[ return variables.ulm_custom_card_irmajavi_weather_entity_1; ]]]'\"\n              name: \"'[[[ return variables.ulm_custom_card_irmajavi_weather_name_1; ]]]'\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"generic_text\"\n              entity: \"'[[[ return variables.ulm_custom_card_irmajavi_weather_entity_2; ]]]'\"\n              name: \"'[[[ return variables.ulm_custom_card_irmajavi_weather_name_2; ]]]'\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"generic_text\"\n              entity: \"'[[[ return variables.ulm_custom_card_irmajavi_weather_entity_3; ]]]'\"\n              name: \"'[[[ return variables.ulm_custom_card_irmajavi_weather_name_3; ]]]'\"\n          item4:\n            card:\n              type: \"custom:button-card\"\n              template: \"generic_text\"\n              entity: \"'[[[ return variables.ulm_custom_card_irmajavi_weather_entity_4; ]]]'\"\n              name: \"'[[[ return variables.ulm_custom_card_irmajavi_weather_name_4; ]]]'\"\ngeneric_text:\n  show_label: true\n  show_icon: false\n  label: |\n    [[[\n      var unit = entity.attributes.unit_of_measurement != null ? ' ' + entity.attributes.unit_of_measurement : ''\n      return entity.state + unit;\n    ]]]\n  styles:\n    name:\n      - justify-self: \"center\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n    label:\n      - margin-top: \"10px\"\n      - justify-self: \"center\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n    grid:\n      - grid-template-areas: \"'l' 'n'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n    card:\n      - box-shadow: \"none\"\n
"},{"location":"usage/custom_cards/custom_card_light_colorpick/","title":"Colorpicker Light Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_light_colorpick/#custom-card-colorpicker-light-card","title":"Custom-card \"Colorpicker Light Card\"","text":"
This is a custom-card to add additional function to the light_card.
 
The card uses a slider as well as six conditional icons to pick the color of the light.
"},{"location":"usage/custom_cards/custom_card_light_colorpick/#credits","title":"Credits","text":"
Author: 13robin37 - 2021 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_light_colorpick/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_light_colorpick/#requirements","title":"Requirements","text":"
This card needs the following to function correctly:
 Component / card required Note light-entity yes RGB Light Card yes"},{"location":"usage/custom_cards/custom_card_light_colorpick/#usage","title":"Usage","text":"
- type: custom:button-card\n  template: card_light_colorpick\n  entity: light.your_light\n  variables:\n    ulm_card_light_slider_horizontal_colors_name: Ceiling light\n    ulm_card_light_slider_horizontal_colors_transition: 1\n
"},{"location":"usage/custom_cards/custom_card_light_colorpick/#variables","title":"Variables","text":"Card type Variable Example Required Explanation all ulm_card_light_slider_horizontal_colors_name Light no This is the name the card shows all ulm_card_light_slider_horizontal_colors_transition 1 no This is the color change transition in seconds"},{"location":"usage/custom_cards/custom_card_media_player_sonos/","title":"Mediaplayer Sonos Custom-card","text":""},{"location":"usage/custom_cards/custom_card_media_player_sonos/#media-player-sonos","title":"Media player: sonos","text":"
NOTE This card is under review and is not ready to use!
 
 Usage  #### Example  
- type: \"custom:button-card\"\n  template: card_media_player_sonos_with_controls\n  variables:\n    ulm_card_media_player_with_controls_name: \"Slaapkamer\"\n    ulm_card_media_player_with_controls_entity: media_player.slaapkamer\n
  #### Variables   Variable Example Required Explanation ulm_card_media_player_with_controls_name Sonos room 1 Yes Name shown in lovelace ulm_card_media_player_with_controls_entity media_player.sonos_room_1 Yes Entity id Template Code custom_card_media_player_sonos.yaml
---\ncard_media_player_sonos:\n  size: \"20px\"\n  show_icon: true\n  show_entity_picture: false\n  show_state: false\n  show_name: true\n  template:\n    - \"green_playing\"\n    - \"icon_info_bg\"\n    - \"ulm_translation_engine\"\n  label: |\n    [[[\n        if (entity.state == 'idle' || entity.state == 'paused' || entity.state == 'unavailable'){\n          return variables.ulm_translation_state;\n        } else {\n        return (entity.attributes.source ? entity.attributes.source : variables.ulm_translation_state)\n            + ' \u2022 ' +  ( Math.round(entity.attributes.volume_level / 0.01)) + '%' ;\n        }\n    ]]]\n\ncard_media_player_sonos_with_controls:\n  variables:\n    ulm_card_media_player_with_controls_name: \"No name set\"\n  triggers_update:\n    - \"[[[ ulm_card_media_player_with_controls_entity ]]]\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"card_media_player_sonos\"\n        tap_action:\n          action: \"more-info\"\n        entity: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n        name: \"[[[ return variables.ulm_card_media_player_with_controls_name ]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - padding: \"0px\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.volume_down\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n              icon: \"mdi:volume-minus\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.media_play_pause\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n              icon: \"mdi:pause\"\n              state:\n                - value: \"paused\"\n                  icon: \"mdi:play\"\n                - value: \"off\"\n                  icon: \"mdi:play\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"media_player.volume_up\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_card_media_player_with_controls_entity ]]]\"\n              icon: \"mdi:volume-plus\"\n\nicon_info_bg_sonos:\n  color: \"var(--google-grey)\"\n  show_icon: true\n  show_label: true\n  show_name: true\n  state:\n    - value: \"unavailable\"\n      styles:\n        custom_fields:\n          notification:\n            - border-radius: \"50%\"\n            - position: \"absolute\"\n            - left: \"3px\"\n            - top: \"8px\"\n            - height: \"18px\"\n            - width: \"18px\"\n            - font-size: \"12px\"\n            - line-height: \"14px\"\n            - background-color: >\n                [[[\n                  return \"rgba(var(--color-red),1)\";\n                ]]]\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n    label:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n    name:\n      - align-self: \"end\"\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n      - margin-left: \"12px\"\n    state:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n    grid:\n      - grid-template-areas: \"'i n' 'i l'\"\n      - grid-template-columns: \"min-content auto\"\n      - grid-template-rows: \"min-content min-content\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  size: \"20px\"\n\ngreen_playing:\n  state:\n    - styles:\n        icon:\n          - color: \"rgba(var(--color-green),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-green), 0.2)\"\n      value: \"playing\"\n
"},{"location":"usage/custom_cards/custom_card_more_power_outlet/","title":"More Power Outlet Card","text":""},{"location":"usage/custom_cards/custom_card_more_power_outlet/#description","title":"Description","text":"
This is the power outlet card is very similar to the default power-outlet-card from UI-Minimalist but it is also possible to show two additional sensors - one for total energy and one for time.
"},{"location":"usage/custom_cards/custom_card_more_power_outlet/#credits","title":"Credits","text":"
Author: Wranglatang - 2022 Version 1.0.0
"},{"location":"usage/custom_cards/custom_card_more_power_outlet/#variables","title":"Variables","text":"Variable Default Required Notes entity name Enable background custom_card_more_power_outlet_power_sensor If you set this sensor, the custom_card_more_power_outlet shows the current power consumption (W). custom_card_more_power_outlet_energy_sensor If you set this sensor, the custom_card_more_power_outlet shows the energy consumption (kWh) - Typically used with a Daily Utility Meter. custom_card_more_power_outlet_time_sensor If you set this sensor, the custom_card_more_power_outlet shows the a duration (Mins) - Typically used with the History Stats."},{"location":"usage/custom_cards/custom_card_more_power_outlet/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_more_power_outlet\n  variables:\n    custom_card_more_power_outlet_power_sensor: sensor.immersion_heater_power\n    custom_card_more_power_outlet_energy_sensor: sensor.immersion_heater_energy_daily\n    custom_card_more_power_outlet_time_sensor: sensor.time_immersion_heater_heating\n  entity: switch.immersion_heater\n  name: Immersion Heater\n
"},{"location":"usage/custom_cards/custom_card_more_power_outlet/#template-code","title":"Template code","text":"Template Code custom_card_more_power_outlet.yaml
---\n### Custom Card More Power Outlet ###\ncustom_card_more_power_outlet:\n  template:\n    - \"icon_info_bg\"\n    - \"yellow\"\n    - \"ulm_translation_engine\"\n  variables:\n    custom_card_more_power_outlet_power_sensor:\n    custom_card_more_power_outlet_energy_sensor:\n    custom_card_more_power_outlet_time_sensor:\n  triggers_update: \"all\"\n  label: |-\n    [[[\n      if (entity.state === \"on\" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_energy_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) {\n        if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){\n          return states[variables.custom_card_more_power_outlet_power_sensor].state + \"W \u2022 \" + states[variables.custom_card_more_power_outlet_energy_sensor].state + \"kWh \u2022 \" +\n          (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + \"Mins\";\n        } else\n          return states[variables.custom_card_more_power_outlet_power_sensor].state + \"W \u2022 \" + states[variables.custom_card_more_power_outlet_energy_sensor].state + \"kWh \u2022 \" + states[variables.custom_card_more_power_outlet_time_sensor].state + \"Hrs\";\n      } else if (entity.state === \"on\" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_energy_sensor !== null) {\n        return states[variables.custom_card_more_power_outlet_power_sensor].state + \"W \u2022 \" + states[variables.custom_card_more_power_outlet_energy_sensor].state + \"kWh\";\n      } else if (entity.state === \"on\" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) {\n          if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){\n          return states[variables.custom_card_more_power_outlet_power_sensor].state + \"W \u2022 \" + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + \"Mins\";\n        } else\n          return states[variables.custom_card_more_power_outlet_power_sensor].state + \"W \u2022 \" + states[variables.custom_card_more_power_outlet_time_sensor].state + \"Hrs\";\n      } else if (entity.state === \"on\" && variables.custom_card_more_power_outlet_energy_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) {\n          if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){\n          return states[variables.custom_card_more_power_outlet_energy_sensor].state + \"kWh \u2022 \" + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + \"Mins\";\n        } else\n          return states[variables.custom_card_more_power_outlet_energy_sensor].state + \"kWh \u2022 \" + states[variables.custom_card_more_power_outlet_time_sensor].state + \"Hrs\";\n      } else if (entity.state === \"on\" && variables.custom_card_more_power_outlet_power_sensor !== null) {\n        return states[variables.custom_card_more_power_outlet_power_sensor].state + \"W\";\n      } else if (entity.state === \"on\" && variables.custom_card_more_power_outlet_energy_sensor !== null) {\n        return states[variables.custom_card_more_power_outlet_energy_sensor].state + \"kWh\";\n      } else if (entity.state === \"on\" && variables.custom_card_more_power_outlet_time_sensor !== null) {\n          if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){\n          return (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + \"Mins\";\n        } else\n          return states[variables.custom_card_more_power_outlet_time_sensor].state + \"Hrs\";\n      } else if (entity.state === \"on\") {\n        return variables.ulm_translation_state;\n      } else if (entity.state === \"off\" && variables.custom_card_more_power_outlet_energy_sensor !== null) {\n        if (states[variables.custom_card_more_power_outlet_energy_sensor].state > 0){\n          return variables.ulm_translation_state + \" \u2022 \" + states[variables.custom_card_more_power_outlet_energy_sensor].state + \"kWh\";\n        } else {\n          return variables.ulm_translation_state;\n        }\n      } else {\n        return variables.ulm_translation_state;\n      }\n    ]]]\n
"},{"location":"usage/custom_cards/custom_card_mpse_gauge/","title":"Gauge Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_mpse_gauge/#custom-card-gauge","title":"Custom-card \"Gauge\"","text":"
The custom_card_mpse_gauge is used present a value in form of a gauge. The card can handle two gauges so it would be easy to adapt the card to that if required. I preferred the minimal look.
 
"},{"location":"usage/custom_cards/custom_card_mpse_gauge/#credits","title":"Credits","text":"
Author: mpse Version: 0.1.0
"},{"location":"usage/custom_cards/custom_card_mpse_gauge/#changelog","title":"Changelog","text":"Initial release."},{"location":"usage/custom_cards/custom_card_mpse_gauge/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_mpse_gauge\n  entity: sensor.temp_office_temperature\n  variables:\n    ulm_card_mpse_gauge_min: 10\n    ulm_card_mpse_gauge_max: 30\n
"},{"location":"usage/custom_cards/custom_card_mpse_gauge/#requirements","title":"Requirements","text":"
Uses this card: https://github.com/custom-cards/dual-gauge-card which can be installed via HACS.
"},{"location":"usage/custom_cards/custom_card_mpse_gauge/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_card_mpse_gauge_min 0 no Minimum value, defaults to 0. ulm_card_mpse_gauge_max 100 no Maximum value, defaults to 100."},{"location":"usage/custom_cards/custom_card_mpse_gauge/#template-code","title":"Template code","text":"Template Code custom_card_mpse_gauge.yaml
---\ncustom_card_mpse_gauge:\n  variables:\n    ulm_card_mpse_gauge_min: 0\n    ulm_card_mpse_gauge_max: 100\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"0px\"\n  show_name: false\n  show_icon: false\n  custom_fields:\n    item1:\n      card:\n        entity: \"[[[ return entity.entity_id ]]]\"\n        label: >-\n          [[[\n            return entity.state;\n          ]]]\n        template:\n          - \"icon_info\"\n        styles:\n          card:\n            - padding: \"12px\"\n        type: \"custom:button-card\"\n    item2:\n      card:\n        type: \"custom:dual-gauge-card\"\n        min: \"[[[ return variables.ulm_card_mpse_gauge_min ]]]\"\n        max: \"[[[ return variables.ulm_card_mpse_gauge_max ]]]\"\n        title: >\n          [[[\n            var min = variables.ulm_card_mpse_gauge_min;\n            var max = variables.ulm_card_mpse_gauge_max;\n\n            if( min == 0 && max == 100 )\n              return \"\";\n\n            return min + ' - ' + max;\n          ]]]\n        shadeInner: false\n        cardwidth: 200\n        outer:\n          entity: \"[[[ return entity.entity_id ]]]\"\n        inner:\n          entity: \"[[[ return entity.entity_id ]]]\"\n        colors:\n          - color: \"var(--google-blue)\"\n            value: 0\n        card_mod:\n          style: |\n            div.gauge-value.gauge-value-inner {\n              color: rgba(0,0,0,0);\n            }\n            div.gauge-value.gauge-value-outer {\n              color: rgba(0,0,0,0);\n            }\n            div.gauge-dual-card {\n              margin: 0px 0px;\n              --title-font-size: calc(var(--gauge-card-width) / 16);\n              color: var(--google-grey);\n            }\n
"},{"location":"usage/custom_cards/custom_card_mpse_printer/","title":"Printer Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_mpse_printer/#custom-card-printer","title":"Custom-card \"Printer\"","text":"
The custom_card_mpse_printer is used to display the status of a printer and the toner.
 
"},{"location":"usage/custom_cards/custom_card_mpse_printer/#credits","title":"Credits","text":"
Author: mpse (based on clemalex post) Version: 0.3.0
"},{"location":"usage/custom_cards/custom_card_mpse_printer/#changelog","title":"Changelog","text":"0.3.0 Updated documentation. Cleanup code in card. Updated colors to match input values.  0.2.0 Added reference to used card. Fixed yaml indentation  0.1.0 Initial release adapted from a post on home assistant forum by user clemalex."},{"location":"usage/custom_cards/custom_card_mpse_printer/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_mpse_printer\n  entity: sensor.hp_color_laser_mfp_178nw\n  variables:\n    ulm_card_printer_name: HP Color Laser MFP 178nw\n    ulm_card_printer_black_name: sensor.hp_color_laser_mfp_178nw_black_toner\n    ulm_card_printer_yellow_name: sensor.hp_color_laser_mfp_178nw_yellow_toner\n    ulm_card_printer_cyan_name: sensor.hp_color_laser_mfp_178nw_cyan_toner\n    ulm_card_printer_magenta_name: sensor.hp_color_laser_mfp_178nw_magenta_toner\n
"},{"location":"usage/custom_cards/custom_card_mpse_printer/#requirements","title":"Requirements","text":"
Uses this card: https://github.com/custom-cards/bar-card Tested with the IPP Integration from Home Assistant: https://www.home-assistant.io/integrations/ipp On my printer i cannot get any state update, it always reports idle. I wanted to highlight the button when the printer is active.
"},{"location":"usage/custom_cards/custom_card_mpse_printer/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_card_printer_name HP Color Laser MFP 178nw yes Name of printer to display on card ulm_card_printer_black_name sensor.hp_color_laser_mfp_178nw_black_toner yes Name of black toner sensor ulm_card_printer_yellow_name sensor.hp_color_laser_mfp_178nw_yellow_toner yes Name of yellow toner sensor ulm_card_printer_cyan_name sensor.hp_color_laser_mfp_178nw_cyan_toner yes Name of cyan toner sensor ulm_card_printer_magenta_name sensor.hp_color_laser_mfp_178nw_magenta_toner yes Name of magenta toner sensor"},{"location":"usage/custom_cards/custom_card_mpse_printer/#template-code","title":"Template code","text":"Template Code custom_card_mpse_printer.yaml
---\ncustom_card_mpse_printer:\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    card:\n      - border-radius: \"20px\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"0px\"\n    grid:\n      - grid-template-areas: \"'item1' 'item2' 'item3' 'item4' 'item5'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content\"\n  custom_fields:\n    item1:\n      card:\n        entity: \"[[[ return entity.entity_id ]]]\"\n        name: \"[[[ return variables.ulm_card_printer_name ]]]\"\n        label: >-\n          [[[\n          return entity.state;\n          ]]]\n        template:\n          - \"icon_info\"\n          - \"custom_card_mpse_printer_blue\"\n        styles:\n          card:\n            - padding: \"12px\"\n        type: \"custom:button-card\"\n    item2:\n      card:\n        type: \"custom:bar-card\"\n        height: \"20px\"\n        positions:\n          name: off\n          value: \"inside\"\n          icon: off\n          indicator: off\n          minmax: off\n        color: \"black\"\n        entities:\n          - entity: \"[[[ return variables.ulm_card_printer_black_name ]]]\"\n        card_mod:\n          style: |\n            bar-card-currentbar{\n              border: 0.01rem solid rgba(var(--color-theme),.4);\n            }\n            bar-card-backgroundbar{\n              display: none;\n            }\n            bar-card-name{\n              width: 2rem;\n              margin-right: 40px !important;\n            }\n            bar-card-value{\n              width: 2rem;\n              margin-left: 40px !important;\n              justify-content: center;\n              display: flex;\n              color: grey;\n            }\n            bar-card-background{\n              margin: 4px 0 4px 0 !important;\n              text-align: initial;\n            }\n            ha-card{\n              --bar-card-border-radius: 5px;\n              border-radius: 0px;\n              box-shadow: none;\n            }\n            #states{\n              padding: 0 16px;\n            }\n    item3:\n      card:\n        type: \"custom:bar-card\"\n        height: \"20px\"\n        positions:\n          name: off\n          value: \"inside\"\n          icon: off\n          indicator: off\n          minmax: off\n        color: \"rgb(250,255,0)\"\n        entities:\n          - entity: \"[[[ return variables.ulm_card_printer_yellow_name ]]]\"\n        card_mod:\n          style: |\n            bar-card-currentbar{\n              border: 0.01rem solid rgba(var(--color-theme),.4);\n            }\n            bar-card-backgroundbar{\n              display: none;\n            }\n              bar-card-name{\n              width: 2rem;\n              margin-right: 40px !important;\n            }\n            bar-card-value{\n              width: 2rem;\n              margin-left: 40px !important;\n              justify-content: center;\n              display: flex;\n              color: grey;\n            }\n            bar-card-background{\n              margin: 4px 0 4px 0 !important;\n              text-align: initial;\n            }\n            ha-card{\n              --bar-card-border-radius: 5px;\n              border-radius: 0px;\n              box-shadow: none;\n            }\n            #states{\n              padding: 0 16px;\n            }\n    item4:\n      card:\n        type: \"custom:bar-card\"\n        height: \"20px\"\n        positions:\n          name: off\n          value: \"inside\"\n          icon: off\n          indicator: off\n          minmax: off\n        color: \"rgb(248,0,255)\"\n        entities:\n          - entity: \"[[[ return variables.ulm_card_printer_magenta_name ]]]\"\n        card_mod:\n          style: |\n            bar-card-currentbar{\n              border: 0.01rem solid rgba(var(--color-theme),.4);\n            }\n            bar-card-backgroundbar{\n              display: none;\n            }\n            bar-card-name{\n              width: 2rem;\n              margin-right: 40px !important;\n            }\n            bar-card-value{\n              width: 2rem;\n              margin-left: 40px !important;\n              justify-content: center;\n              display: flex;\n              color: grey;\n            }\n            bar-card-background{\n              margin: 4px 0 4px 0 !important;\n              text-align: initial;\n            }\n            ha-card{\n              --bar-card-border-radius: 5px;\n              border-radius: 0px;\n              box-shadow: none;\n            }\n            #states{\n              padding: 0 16px;\n            }\n    item5:\n      card:\n        type: \"custom:bar-card\"\n        height: \"20px\"\n        positions:\n          name: off\n          value: \"inside\"\n          icon: off\n          indicator: off\n          minmax: off\n        color: \"rgb(0,255,255)\"\n        entities:\n          - entity: \"[[[ return variables.ulm_card_printer_cyan_name ]]]\"\n        card_mod:\n          style: |\n            bar-card-currentbar{\n              border: 0.01rem solid rgba(var(--color-theme),.4);\n            }\n            bar-card-backgroundbar{\n              display: none;\n            }\n            bar-card-name{\n              width: 2rem;\n              margin-right: 40px !important;\n            }\n            bar-card-value{\n              width: 2rem;\n              margin-left: 40px !important;\n              justify-content: center;\n              display: flex;\n              color: grey;\n            }\n              bar-card-background{\n              margin: 4px 0 4px 0 !important;\n              text-align: initial;\n            }\n            ha-card{\n              --bar-card-border-radius: 5px;\n              border-radius: 0px;\n              box-shadow: none;\n            }\n            #states{\n              padding: 0 16px 16px 16px;\n            }\ncustom_card_mpse_printer_blue:\n  state:\n    - styles:\n        icon:\n          - color: \"rgba(var(--color-blue),1)\"\n        label:\n          - color: \"rgba(var(--color-blue-text),1)\"\n        name:\n          - color: \"rgba(var(--color-blue-text),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-blue), 0.2)\"\n        card:\n          - background-color: \"rgba(var(--color-background-blue), var(--opacity-bg))\"\n      operator: \"template\"\n      value: >\n        [[[\n          return entity.state!=\"idle\" ? true : false\n        ]]]\n
"},{"location":"usage/custom_cards/custom_card_mpse_thermostat/","title":"Thermostat mpse Custom-card","text":""},{"location":"usage/custom_cards/custom_card_mpse_thermostat/#custom-card-thermostat","title":"Custom-card \"Thermostat\"","text":"
The custom_card_mpse_thermostat is used to display temperature and control a simple thermostat. I have tested this with a cooling function that I use to control my beer fridge.
 
The buttons are used to lower/raise the set temperature which is displayed between the arrows. It uses the defined steps configured on the thermostat (In my case I use esphome to control the frigde). The current temperature is shown in the grey label. The card uses the standard language parameters.
 
"},{"location":"usage/custom_cards/custom_card_mpse_thermostat/#credits","title":"Credits","text":"
Author: mpse Version: 0.1.0
"},{"location":"usage/custom_cards/custom_card_mpse_thermostat/#changelog","title":"Changelog","text":"0.1.0 Initial release inspired from various posts on home assistant forum."},{"location":"usage/custom_cards/custom_card_mpse_thermostat/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_mpse_thermostat\n  entity: climate.fermentation_climate_controller\n
"},{"location":"usage/custom_cards/custom_card_mpse_thermostat/#requirements","title":"Requirements","text":""},{"location":"usage/custom_cards/custom_card_mpse_thermostat/#variables","title":"Variables","text":"Variable Example Required Explanation None"},{"location":"usage/custom_cards/custom_card_mpse_thermostat/#template-code","title":"Template code","text":"Template Code custom_card_mpse_thermostat.yaml
---\ncustom_card_mpse_thermostat:\n  show_name: false\n  show_icon: false\n  template:\n    - \"icon_info_bg\"\n  hold_action:\n    action: \"more-info\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info\"\n          - \"ulm_translation_engine\"\n        tap_action:\n          action: \"more-info\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        name: \"[[[ return entity.name ]]]\"\n        label: >-\n          [[[\n              label = variables.ulm_translation_state;\n              if(entity.attributes.temperature){\n                return (entity.attributes.current_temperature ) + '\u00b0' + ' \u2022 ' + label + ' (' + entity.attributes.hvac_action + ')';\n              }\n              return variables.ulm_translation_state;\n          ]]]\n        icon: >\n          [[[\n            var icon = \"mdi:thermostat\";\n            var state = entity.state;\n\n            if( state == \"cool\" )\n              icon = \"mdi:snowflake\"\n            else if( state == \"heat\" )\n              icon = \"mdi:fire\"\n\n            return icon;\n          ]]]\n        state:\n          - operator: \"template\"\n            value: \"[[[return entity.state == 'heat']]]\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-red),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-red),0.2)\"\n              card:\n                - background-color: \"rgba(var(--color-background-red),var(--opacity-bg))\"\n              name:\n                - color: \"rgba(var(--color-red-text),1)\"\n              label:\n                - color: \"rgba(var(--color-red-text),1)\"\n          - operator: \"template\"\n            value: \"[[[return entity.state == 'cool']]]\"\n            styles:\n              icon:\n                - color: \"rgba(var(--color-blue),1)\"\n              img_cell:\n                - background-color: \"rgba(var(--color-blue),0.2)\"\n              card:\n                - background-color: \"rgba(var(--color-background-blue),var(--opacity-bg))\"\n              name:\n                - color: \"rgba(var(--color-blue-text),1)\"\n              label:\n                - color: \"rgba(var(--color-blue-text),1)\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:arrow-down\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  temperature: \"[[[ return entity.attributes.temperature - entity.attributes.target_temp_step ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return entity.attributes.temperature + '\u00b0C' ]]]\"\n              styles:\n                card:\n                  - box-shadow: \"none\"\n              show_icon: false\n              tap_action: \"none\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:arrow-up\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"climate.set_temperature\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n                data:\n                  temperature: \"[[[ return entity.attributes.temperature + entity.attributes.target_temp_step ]]]\"\n
"},{"location":"usage/custom_cards/custom_card_mpse_wifisignal/","title":"Wifi Signal Custom-card","text":""},{"location":"usage/custom_cards/custom_card_mpse_wifisignal/#custom-card-wifi-signal","title":"Custom-card \"WiFi Signal\"","text":"
The custom_card_mpse_wifisignal is used to display the status of a wifi signal (dBm). Icon changes based on signal strength.
 
"},{"location":"usage/custom_cards/custom_card_mpse_wifisignal/#credits","title":"Credits","text":"
Author: mpse Version: 0.2.0
"},{"location":"usage/custom_cards/custom_card_mpse_wifisignal/#changelog","title":"Changelog","text":"0.2.0 Cleanup and updated documentation.  0.1.0 Initial release."},{"location":"usage/custom_cards/custom_card_mpse_wifisignal/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_mpse_wifisignal\n  entity: sensor.wifi_julgran\n
"},{"location":"usage/custom_cards/custom_card_mpse_wifisignal/#requirements","title":"Requirements","text":"
No special cards needed.
"},{"location":"usage/custom_cards/custom_card_mpse_wifisignal/#variables","title":"Variables","text":"Variable Example Required Explanation None"},{"location":"usage/custom_cards/custom_card_mpse_wifisignal/#template-code","title":"Template code","text":"Template Code custom_card_mpse_wifisignal.yaml
---\ncustom_card_mpse_wifisignal:\n  template:\n    - \"icon_info_bg\"\n  icon: |\n    [[[\n      var icon = \"mdi:wifi-strength-off\";\n      var signal = states[entity.entity_id].state;\n      if (signal >= -50) {\n        icon = \"mdi:wifi-strength-4\";\n      } else if (signal >= -60) {\n        icon = \"mdi:wifi-strength-3\";\n      } else if (signal >= -70) {\n        icon = \"mdi:wifi-strength-2\";\n      } else if (signal >= -80) {\n        icon = \"mdi:wifi-strength-1\";\n      }\n      return icon;\n    ]]]\n  label: |\n    [[[\n      return entity.state + \" dBm\";\n    ]]]\n
"},{"location":"usage/custom_cards/custom_card_nas/","title":"NAS Custom-card","text":""},{"location":"usage/custom_cards/custom_card_nas/#custom-card-nas","title":"Custom-card \"NAS\"","text":"
The card-nas shows you a specific sensor value from your NAS, eg. the disk space used.
 
"},{"location":"usage/custom_cards/custom_card_nas/#credits","title":"Credits","text":"
Author: tben - 2021 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_nas/#changelog","title":"Changelog","text":"1.0.0 Initial release  1.0.1 Fix card & add Screenshot"},{"location":"usage/custom_cards/custom_card_nas/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template:\n    - custom_card_nas\n  variables:\n    ulm_custom_card_nas_sensor: sensor.pinas_disk_use\n    ulm_custom_card_nas_text: \"HDD used\"\n    ulm_custom_cad_nas_unit: %\n
"},{"location":"usage/custom_cards/custom_card_nas/#requirements","title":"Requirements","text":"
n/a
"},{"location":"usage/custom_cards/custom_card_nas/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_custom_card_nas_sensor sensor.nas_disk_use yes The sensor that shows your sensor state, eg. the disk use on your NAS ulm_custom_card_nas_text HDD used yes The text to show on your card ulm_custom_card_nas_unit % yes The unit to show after your sensors state"},{"location":"usage/custom_cards/custom_card_nas/#template-code","title":"Template code","text":"Template Code custom_card_nik_door.yaml
---\ncustom_card_nas:\n  template:\n    - \"blue_no_state\"\n  tap_action:\n    action: \"more-info\"\n    entity: \"[[[ return variables.ulm_custom_card_nas_sensor; ]]]\"\n  show_icon: true\n  show_label: true\n  show_name: true\n  icon: |-\n    [[[\n       return \"mdi:nas\";\n    ]]]\n  label: |-\n    [[[\n       return variables.ulm_custom_card_nas_text + \" \" + states[variables.ulm_custom_card_nas_sensor].state + variables.ulm_custom_card_nas_unit;\n    ]]]\n  name: |-\n    [[[\n       return \"Nas\";\n    ]]]\n  size: \"20px\"\n  styles:\n    label:\n      - justify-self: \"start\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n      - margin-left: \"12px\"\n    name:\n      - align-self: \"end\"\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n      - margin-left: \"12px\"\n      - filter: \"opacity(100%)\"\n    img_cell:\n      - border-radius: \"50%\"\n      - place-self: \"center\"\n      - width: \"42px\"\n      - height: \"42px\"\n    grid:\n      - grid-template-areas: \"'i n' 'i l'\"\n      - grid-template-columns: \"min-content auto\"\n      - grid-template-rows: \"min-content min-content\"\n    card:\n      - border-radius: \"20px\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n
"},{"location":"usage/custom_cards/custom_card_neekster_update/","title":"Custom Card Update","text":""},{"location":"usage/custom_cards/custom_card_neekster_update/#custom-card-update","title":"Custom-card \"Update\"","text":""},{"location":"usage/custom_cards/custom_card_neekster_update/#credits","title":"Credits","text":"
Author: Neekster - 2022 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_neekster_update/#changelog","title":"Changelog","text":"1.0.0   Initial release"},{"location":"usage/custom_cards/custom_card_neekster_update/#description","title":"Description","text":"
This custom cards works with any entity in the update domain and gives options for two-button control to begin the update or skip. It also supports both horizontal and vertical configurations.
"},{"location":"usage/custom_cards/custom_card_neekster_update/#variables","title":"Variables","text":"Variable Default Required Notes enable_controls false No Enable two-button controls for update and skip collapsible false No Auto-collapse controls when no update is available/update has been skipped horizontal false No Display card horizontally narrow_buttons false No Allow more space for text in horizontal configuration"},{"location":"usage/custom_cards/custom_card_neekster_update/#usage","title":"Usage","text":"Example 1 
- type: custom:button-card\n  template: card_neekster_update\n  entity: update.home_assistant_core_update\n
 Example 2 
- type: custom:button-card\n  template: card_neekster_update\n  entity: update.home_assistant_core_update\n  variables:\n    ulm_card_neekster_update_enable_controls: true\n    ulm_card_neekster_update_collapsible: true\n    ulm_card_neekster_update_horizontal: true\n    ulm_card_neekster_update_narrow_buttons: true\n
"},{"location":"usage/custom_cards/custom_card_neekster_update/#template-code","title":"Template code","text":"Template Code custom_card_neekster_update.yaml
---\n### Card Neekster Update ###\ncard_neekster_update:\n  template:\n    - \"ulm_language_variables\"\n  variables:\n    ulm_card_neekster_update_icon: false\n    ulm_card_neekster_update_enable_controls: false\n    ulm_card_neekster_update_collapsible: false\n    ulm_card_neekster_update_horizontal: false\n    ulm_card_neekster_update_narrow_buttons: false\n  triggers_update: \"all\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  hold_action:\n    action: \"more-info\"\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n                if (variables.ulm_card_neekster_update_collapsible && entity.state != \"on\") {\n                    return \"\\\"item1\\\"\";\n                } else if (variables.ulm_card_neekster_update_horizontal) {\n                    return \"\\\"item1 item2\\\"\";\n                } else if (variables.ulm_card_neekster_update_enable_controls) {\n                    return \"\\\"item1\\\" \\\"item2\\\"\";\n                } else {\n                    return \"\\\"item1\\\"\";\n                }\n          ]]]\n      - grid-template-columns: >\n          [[[\n                if (variables.ulm_card_neekster_update_collapsible && entity.state != \"on\") {\n                    return \"1fr\";\n                } else if (variables.ulm_card_neekster_update_horizontal) {\n                  if(variables.ulm_card_neekster_update_narrow_buttons){\n                    return \"2fr 1fr\";\n                    } else {\n                      return \"1fr 1fr\";\n                    }\n                } else {\n                    return \"1fr\";\n                }\n          ]]]\n      - grid-template-rows: >\n          [[[\n                if (variables.ulm_card_neekster_update_collapsible && entity.state != \"on\") {\n                    return \"1fr\";\n                } else if (variables.ulm_card_neekster_update_enable_controls && !variables.ulm_card_neekster_update_horizontal) {\n                    return \"min-content min-content\";\n                } else {\n                    return \"1fr\";\n                }\n          ]]]\n      - row-gap: |-\n          [[[\n            if (!variables.ulm_card_neekster_update_collapsible) {\n                return \"12px\";\n              } else {\n                return entity.state !== \"off\" ? \"12px\" : \"0px\";\n              }\n          ]]]\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n    custom_fields:\n      item2:\n        - display: |\n            [[[\n              if(variables.ulm_card_neekster_update_enable_controls) {\n                if(variables.ulm_card_neekster_update_collapsible){\n                  return entity.state === \"off\" ? \"none\" : \"block\";\n                }\n                return \"block\";\n              }\n              return \"none\";\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info_bg\"\n          - \"ulm_language_variables\"\n        entity: \"[[[ return entity.entity_id ]]]\"\n        hold_action:\n          action: \"more-info\"\n        styles:\n          label:\n            - opacity: \"1\"\n            - filter: \"opacity(100%)\"\n          card:\n            - padding: \"0px\"\n            - background: \"none\"\n            - border-radius: \"0\"\n            - box-shadow: \"none\"\n        state:\n          - operator: \"template\"\n            value: \"[[[ return entity.state == 'off' ]]]\"\n            icon: \"mdi:cloud-check\"\n            label: \"Up to Date.\"\n            styles:\n              img_cell:\n                - background-color: \"rgba(var(--color-green), 0.2)\"\n          - operator: \"template\"\n            value: \"[[[ return entity.state != 'off' ]]]\"\n            icon: \"mdi:cloud-download\"\n            label: \"Update Available!\"\n            styles:\n              img_cell:\n                - background-color: \"rgba(var(--color-yellow), 0.2)\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_2_items\"\n        hold_action:\n          action: \"more-info\"\n        styles:\n          card:\n            - padding: \"0px\"\n            - background: \"none\"\n            - border-radius: \"0\"\n            - box-shadow: \"none\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              hold_action:\n                action: \"more-info\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"update.install\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:package-down\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              hold_action:\n                action: \"cperform-action\"\n                perform_action: \"update.clear_skipped\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"update.skip\"\n                target:\n                  entity_id: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:cancel\"\n
"},{"location":"usage/custom_cards/custom_card_nik_clock/","title":"Tablet Clock Card","text":""},{"location":"usage/custom_cards/custom_card_nik_clock/#custom-card-tablet-clock-card","title":"Custom-card \"Tablet clock Card\"","text":"
This is a custom-card that shows the currenct time and Date. This is designed for a tablet or big monitor.
 
"},{"location":"usage/custom_cards/custom_card_nik_clock/#credits","title":"Credits","text":"
Author: Nik - 2022 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_nik_clock/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_nik_clock/#requirements","title":"Requirements","text":"
     
  • To have all the Minimalist Card and Custom Cards installed
    •  
"},{"location":"usage/custom_cards/custom_card_nik_clock/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_nik_clock\n  variables:\n    ulm_custom_card_nik_clock_switch: input_boolean.menu_tablet\n    ulm_custom_card_nik_clock_switch_enable: false\n
"},{"location":"usage/custom_cards/custom_card_nik_clock/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_custom_card_nik_clock_switch lock.input_boolean.menu_tablet no This is an optional hidden switch to combine with a state-switch card to use some additional logics. ulm_custom_card_nik_clock_switch_enable true / false no Default is false. It enables the options above."},{"location":"usage/custom_cards/custom_card_nik_clock/#template-sensor-code","title":"Template Sensor Code","text":"Template Code custom_card_irmajavi_weather.yaml
---\ncustom_card_nik_clock:\n  triggers_update: \"all\"\n  variables:\n    ulm_custom_card_nik_clock_switch:\n    ulm_custom_card_nik_clock_switch_enable: false\n    ulm_language: >\n      [[[\n        return hass[\"language\"];\n      ]]]\n  show_icon: false\n  show_name: true\n  show_state: false\n  show_label: true\n  name: >\n    [[[\n      const time = new Date();\n      let hour = time.getHours();\n      let minute = (time.getMinutes()<10?'0':'') + time.getMinutes()\n      return hour + \":\" + minute;\n    ]]]\n  layout: \"vertical\"\n  label: >\n    [[[\n      const event = new Date();\n      const options = {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };\n      var locale = variables.ulm_language;\n      let formatted_date = event.toLocaleDateString(locale, options);\n      return formatted_date;\n    ]]]\n  tap_action:\n    action: >\n      [[[\n          if (variables.ulm_custom_card_nik_clock_switch_enable){\n            return 'perform-action'\n          }\n          else{\n            return 'none'\n          }\n      ]]]\n    perform_action: \"input_boolean.toggle\"\n    target:\n      entity_id: \"[[[ return variables.ulm_custom_card_nik_clock_switch ]]]\"\n  styles:\n    card:\n      - background-color: \"transparent\"\n      - height: \"100px\"\n      - box-shadow: \"none\"\n    name:\n      - font-size: \"290%\"\n      - font-weight: \"bold\"\n      - justify-self: \"center\"\n    label:\n      - justify-self: \"center\"\n      - font-size: \"110%\"\n
"},{"location":"usage/custom_cards/custom_card_nik_door/","title":"Minimal Door Lock Card","text":""},{"location":"usage/custom_cards/custom_card_nik_door/#custom-card-minimal-door-lock","title":"Custom-card \"Minimal Door Lock\"","text":"
This is a custom-card that shows the currenct state of your Lock and allows you to open and close it showing the state with a Minimal Design.
 
"},{"location":"usage/custom_cards/custom_card_nik_door/#credits","title":"Credits","text":"
Author: Nik - 2022 Version: 2.0.0
"},{"location":"usage/custom_cards/custom_card_nik_door/#changelog","title":"Changelog","text":"1.0.0 Initial release  2.0.0 Added Battery Level for monitoring Added double_tap unlock to prevent accidental opening"},{"location":"usage/custom_cards/custom_card_nik_door/#requirements","title":"Requirements","text":"
To have the Minimalist cards and custom cards installed
"},{"location":"usage/custom_cards/custom_card_nik_door/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: \"custom_card_nik_door\"\n  entity: \"sensor.nuki_blindato_door_security_state\"\n  variables:\n    ulm_custom_card_entity_1_name: \"Blindato\"\n    ulm_custom_card_entity_1_lock: \"lock.nuki_blindato_lock\"\n    ulm_custom_card_entity_1_lock_battery: \"sensor.blindato_battery\"\n
"},{"location":"usage/custom_cards/custom_card_nik_door/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_custom_card_entity_1_name sensor.nuki_blindato_door_security_state Yes Your Door Name ulm_custom_card_entity_1_lock lock.nuki_blindato_lock Yes Your Door Lock entity ulm_custom_card_entity_1_lock_battery sensor.blindato_battery Yes Your Door Lock battery sensor entity sensor.nuki_blindato_door_security_state Yes Your door sensor to track \"Open\" and \"Close\" state."},{"location":"usage/custom_cards/custom_card_nik_door/#template-code","title":"Template code","text":"Template Code custom_card_nik_door.yaml
---\ncustom_card_nik_door:\n  template:\n    - \"ulm_language_variables\"\n  variables:\n    ulm_custom_card_entity_1_name: \"[[[ return variables.ulm_custom_card_entity_1_name ]]]\"\n    ulm_custom_card_entity_1_lock: \"[[[ return variables.ulm_custom_card_entity_1_lock ]]]\"\n    ulm_custom_card_entity_1_lock_battery: \"[[[ return variables.ulm_custom_card_entity_1_lock_battery ]]]\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  lock:\n    enabled: true\n    unlock: \"double_tap\"\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            var areas = [];\n            areas.push(\"item1 item1\");\n            areas.push(\"item2 item2\");\n            return \"\\\"\" + areas.join(\"\\\" \\\"\") + \"\\\"\";\n          ]]]\n      - grid-template-columns: \"1fr 1fr\"\n      - grid-template-rows: \"min-content min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_more_info\"\n        styles:\n          icon:\n            - color: \"rgba(var(--color-theme),0.9)\"\n            - width: \"20px\"\n            - place-self: \"center\"\n          custom_fields:\n            lock:\n              - z-index: 2\n              - border-radius: \"50%\"\n              - position: \"absolute\"\n              - left: \"30px\"\n              - top: \"24px\"\n              - height: \"18px\"\n              - width: \"18px\"\n              - border: \"2px solid var(--card-background-color)\"\n              - font-size: \"12px\"\n              - line-height: \"14px\"\n              - background-color: >\n                  [[[\n                    if (states[variables.ulm_custom_card_entity_1_lock_battery].state <= 40){\n                      return \"rgba(var(--color-red),1)\";\n                    } else {\n                      return \"rgba(var(--color-green),1)\";\n                    }\n                  ]]]\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: \"mdi:door\"\n              styles:\n                icon:\n                  - color: \"rgba(var(--color-blue),1)\"\n                img_cell:\n                  - background-color: \"rgba(var(--color-blue),0.2)\"\n              tap_action:\n                action: \"none\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_custom_card_entity_1_name ]]]\"\n              label: >\n                [[[\n                  return entity.state\n                ]]]\n          lock: >\n            [[[\n              if (states[variables.ulm_custom_card_entity_1_lock_battery].state == 100){\n                return '<ha-icon icon=\"mdi:battery\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n\n              } if (states[variables.ulm_custom_card_entity_1_lock_battery].state >= 80){\n                return '<ha-icon icon=\"mdi:battery-70\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n\n              } if (states[variables.ulm_custom_card_entity_1_lock_battery].state >= 60){\n                return '<ha-icon icon=\"mdi:battery-60\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n\n              } if (states[variables.ulm_custom_card_entity_1_lock_battery].state >= 50){\n                return '<ha-icon icon=\"mdi:battery-50\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n              }\n                if (states[variables.ulm_custom_card_entity_1_lock_battery].state <= 40){\n                return '<ha-icon icon=\"mdi:battery-20\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n              }\n            ]]]\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_2_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:lock-open-variant\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"lock.open\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_custom_card_entity_1_lock ]]]\"\n              state:\n                - value: \"Open\"\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-red),1)\"\n                    img_cell:\n                      - background-color: \"rgba(var(--color-red),0.2)\"\n                - value: \"Closed & Unlocked\"\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-yellow),1)\"\n                    img_cell:\n                      - background-color: \"rgba(var(--color-yellow),0.2)\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              icon: \"mdi:lock\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"lock.lock\"\n                target:\n                  entity_id: \"[[[ return variables.ulm_custom_card_entity_1_lock ]]]\"\n              state:\n                - value: \"Closed & Locked\"\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-green),1)\"\n                    img_cell:\n                      - background-color: \"rgba(var(--color-green),0.2)\"\n
"},{"location":"usage/custom_cards/custom_card_nik_nas/","title":"Nas Summary Card","text":""},{"location":"usage/custom_cards/custom_card_nik_nas/#custom-card-nas-summary-card","title":"Custom-card \"Nas Summary Card\"","text":"
This is a custom-card that shows you a summary for your NAS with sensors, Wake on Lan and collapsed info. Once the NAS is off or unavailable it collapses the info.
 
 
"},{"location":"usage/custom_cards/custom_card_nik_nas/#credits","title":"Credits","text":"
Author: Nik - 2022 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_nik_nas/#changelog","title":"Changelog","text":"1.0.0 Initial release  0.1.1 
Fix for UI Minimalist v1.0.1. 
"},{"location":"usage/custom_cards/custom_card_nik_nas/#requirements","title":"Requirements","text":"
To have the Minimalist cards and custom cards installed
"},{"location":"usage/custom_cards/custom_card_nik_nas/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n    template: \"custom_card_nik_nas\"\n    entity: switch.qnap_wol\n    variables:\n      graph_span: \"1d\"\n      chart_type: \"radialBar\"\n      entity_1:\n        entity_id: \"sensor.nas_cpu_temperature\"\n        icon: ''\n        name: \"Temp\"\n        color: \"yellow\"\n        max_value: 100\n      entity_2:\n        entity_id: \"sensor.nas_memory_usage\"\n        icon: ''\n        name: \"Memory\"\n        color: \"blue\"\n        max_value: 100\n      entity_3:\n        entity_id: \"sensor.nas_cpu_usage\"\n        icon: ''\n        name: \"CPU\"\n        color: \"green\"\n        max_value: 100\n      entity_4:\n        entity_id: \"sensor.disk_use_percent\"\n        icon: \"mdi:harddisk\"\n        name: \"Disk\"\n        color: \"red\"\n
"},{"location":"usage/custom_cards/custom_card_nik_nas/#variables","title":"Variables","text":"Variable Example Required Explanation entity switch.qnap_wol yes The Switch to turn On or Off the NAS chart_type line, scatter, pie, donut or radialBar yes The chart type you want to display graph_span 1h, 12min, 1d, 1h25, 10sec, ... yes The span of the graph as a time interval entity_id sensor.disk_use_percent yes Entity sensor of choice. 4 entities must be added icon mdi:cpu-64-bit no mdi icon you want to be exposed in the img_cell, '' will return entity.attributes.icon  name name for the used sensor no '' will return entity.attributes.friendly_name color green, blue, yellow, red or grey no if you don't use the color variable it will choice a random color max_value 10, 300, ... no Maximum value of the sensor. Default will be 100"},{"location":"usage/custom_cards/custom_card_nik_nas/#template-code","title":"Template Code","text":"Template Code custom_card_nik_nas.yaml
---\ncustom_card_nik_nas:\n  template:\n    - \"ulm_translation_engine\"\n  variables:\n    entity_1:\n      entity_id:\n      icon: \"[[[ return entity.attributes.icon ]]]\"\n      name: \"[[[ return entity.attributes.friendly_name ]]]\"\n      color: >\n        [[[\n          var colors = [\"yellow\", \"blue\", \"red\", \"green\"];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_2:\n      entity_id:\n      icon: \"[[[ return entity.attributes.icon  ]]]\"\n      name: \"[[[ return entity.attributes.friendly_name ]]]\"\n      color: >\n        [[[\n          var colors = [\"yellow\", \"blue\", \"red\", \"green\"];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_3:\n      entity_id:\n      icon: \"[[[ return entity.attributes.icon  ]]]\"\n      name: \"[[[ return entity.attributes.friendly_name ]]]\"\n      color: >\n        [[[\n          var colors = [\"yellow\", \"blue\", \"red\",\"green\"];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n    entity_4:\n      entity_id:\n      icon: \"[[[ return entity.attributes.icon  ]]]\"\n      name: \"[[[ return entity.attributes.friendly_name ]]]\"\n      color: >\n        [[[\n          var colors = [\"yellow\", \"blue\", \"red\",\"green\"];\n          var color = colors[Math.floor(Math.random() * colors.length)];\n          return color;\n        ]]]\n  show_name: false\n  show_state: false\n  show_label: false\n  show_icon: false\n  show_last_changed: false\n  show_entity_picture: false\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            var areas = [];\n            if (entity.state == \"off\" || entity.state == \"unavailable\") {\n                areas.push(\"item5\");\n                return \"\\\"\" + areas.join(\"\\\" \\\"\") + \"\\\"\";\n            } else {\n                areas.push(\"item4 item4\");\n                areas.push(\"item1 radial\");\n                areas.push(\"item2 radial\");\n                areas.push(\"item3 radial\");\n                return \"\\\"\" + areas.join(\"\\\" \\\"\") + \"\\\"\";\n            }\n          ]]]\n      - grid-template-columns: >\n          [[[\n            if (entity.state == \"off\" || entity.state == \"unavailable\") {\n                return \"1fr\";\n            } else {\n                return \"35% 65%\";\n            }\n          ]]]\n      - grid-template-rows: >\n          [[[\n            if (entity.state == \"off\" || entity.state == \"unavailable\") {\n                return \"min-content\";\n            } else {\n                return \"1fr\";\n            }\n          ]]]\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n    custom_fields:\n      item1:\n        - display: >\n            [[[\n              if (entity.state == \"off\" || entity.state == \"unavailable\") {\n                  return \"none\";\n              } else {\n                  return \"block\";\n              }\n            ]]]\n      item2:\n        - display: >\n            [[[\n              if (entity.state == \"off\" || entity.state == \"unavailable\") {\n                  return \"none\";\n              } else {\n                  return \"block\";\n              }\n            ]]]\n      item3:\n        - display: >\n            [[[\n              if (entity.state == \"off\" || entity.state == \"unavailable\") {\n                  return \"none\";\n              } else {\n                  return \"block\";\n              }\n            ]]]\n      item4:\n        - display: >\n            [[[\n              if (entity.state == \"off\" || entity.state == \"unavailable\") {\n                  return \"none\";\n              } else {\n                  return \"block\";\n              }\n            ]]]\n      item5:\n        - display: >\n            [[[\n              if (entity.state == \"off\" || entity.state == \"unavailable\") {\n                  return \"block\";\n              } else {\n                  return \"none\";\n              }\n            ]]]\n      radial:\n        - display: >\n            [[[\n              if (entity.state == \"off\" || entity.state == \"unavailable\") {\n                  return \"none\";\n              } else {\n                  return \"block\";\n              }\n            ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        entity: \"[[[ return variables.entity_1.entity_id ]]]\"\n        template: \"card_generic_swap\"\n        variables:\n          ulm_card_generic_swap_name: \"[[[ return variables.entity_1.name ]]]\"\n          ulm_card_generic_swap_icon: \"[[[ return variables.entity_1.icon ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              custom_fields:\n                item1:\n                  card:\n                    type: \"custom:button-card\"\n                    styles:\n                      icon:\n                        - color: \"[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]\"\n                      img_cell:\n                        - background-color: \"[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"none\"\n            - padding-top: \"1px\"\n            - padding-bottom: \"1px\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        entity: \"[[[ return variables.entity_2.entity_id ]]]\"\n        template: \"card_generic_swap\"\n        variables:\n          ulm_card_generic_swap_name: \"[[[ return variables.entity_2.name ]]]\"\n          ulm_card_generic_swap_icon: \"[[[ return variables.entity_2.icon ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              custom_fields:\n                item1:\n                  card:\n                    type: \"custom:button-card\"\n                    styles:\n                      icon:\n                        - color: \"[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]\"\n                      img_cell:\n                        - background-color: \"[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"none\"\n            - padding-top: \"1px\"\n            - padding-bottom: \"1px\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        entity: \"[[[ return variables.entity_3.entity_id ]]]\"\n        template: \"card_generic_swap\"\n        variables:\n          ulm_card_generic_swap_name: \"[[[ return variables.entity_3.name ]]]\"\n          ulm_card_generic_swap_icon: \"[[[ return variables.entity_3.icon ]]]\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              custom_fields:\n                item1:\n                  card:\n                    type: \"custom:button-card\"\n                    styles:\n                      icon:\n                        - color: \"[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]\"\n                      img_cell:\n                        - background-color: \"[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"none\"\n            - padding-top: \"1px\"\n            - padding-bottom: \"1px\"\n    item4:\n      card:\n        type: \"horizontal-stack\"\n        cards:\n          - type: \"custom:button-card\"\n            template: \"card_input_boolean\"\n            entity: \"[[[ return entity.entity_id]]]\"\n            variables:\n              ulm_card_input_boolean_name: \"[[[ return variables.ulm_translation_status ]]]\"\n              ulm_card_input_boolean_icon: \"mdi:nas\"\n            styles:\n              card:\n                - background-color: \"transparent\"\n                - box-shadow: \"none\"\n                - border: \"2px solid var(--google-grey)\"\n            tap_action:\n              action: \"more-info\"\n\n          - type: \"custom:button-card\"\n            template: \"card_generic_swap\"\n            entity: \"[[[ return variables.entity_4.entity_id ]]]\"\n            variables:\n              ulm_card_generic_swap_name: \"[[[ return variables.entity_4.name ]]]\"\n              ulm_card_generic_swap_icon: \"[[[ return variables.entity_4.icon ]]]\"\n            custom_fields:\n              item1:\n                card:\n                  type: \"custom:button-card\"\n                  custom_fields:\n                    item1:\n                      card:\n                        type: \"custom:button-card\"\n                        styles:\n                          icon:\n                            - color: \"[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]\"\n                          img_cell:\n                            - background-color: \"[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]\"\n            styles:\n              card:\n                - background-color: \"transparent\"\n                - box-shadow: \"none\"\n                - border: \"2px solid var(--google-grey)\"\n            tap_action:\n              action: \"none\"\n    item5:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_input_boolean\"\n        entity: \"[[[ return entity.entity_id]]]\"\n        variables:\n          ulm_card_input_boolean_name: \"[[[ return variables.ulm_translation_status ]]]\"\n          ulm_card_input_boolean_icon: \"mdi:nas\"\n        styles:\n          card:\n            - background-color: \"transparent\"\n            - box-shadow: \"none\"\n            - border: \"2px solid var(--google-grey)\"\n        tap_action:\n          action: \"more-info\"\n    radial:\n      card:\n        type: \"custom:apexcharts-card\"\n        graph_span: \"[[[ return variables.graph_span ]]]\"\n        chart_type: \"[[[ return variables.chart_type ]]]\"\n        style: |\n          ha-card {\n            border-radius: \"var(--border-radius)\";\n            box-shadow: none;\n            padding-left: 10px;\n            padding-bottom: 0px;\n          }\n        header:\n          show: false\n        apex_config:\n          title:\n            floating: false\n            align: \"top\"\n            style:\n              fontSize: \"2px\"\n              fontWeight: \"bold\"\n          chart:\n            foreColor: \"rgb(148,148,148)\"\n            offsetY: 5\n          legend:\n            show: false\n        series:\n          - entity: \"[[[ return variables.entity_1.entity_id ]]]\"\n            name: \"[[[ return variables.entity_1.name ]]]\"\n            color: \"[[[ return `var(--google-${variables.entity_1.color})`;]]]\"\n            max: \"[[[ return variables.entity_1.max_value ]]]\"\n          - entity: \"[[[ return variables.entity_2.entity_id ]]]\"\n            name: \"[[[ return variables.entity_2.name ]]]\"\n            color: \"[[[ return `var(--google-${variables.entity_2.color})`;]]]\"\n            max: \"[[[ return variables.entity_2.max_value ]]]\"\n          - entity: \"[[[ return variables.entity_3.entity_id ]]]\"\n            name: \"[[[ return variables.entity_3.name ]]]\"\n            color: \"[[[ return `var(--google-${variables.entity_3.color})`;]]]\"\n            max: \"[[[ return variables.entity_3.max_value ]]]\"\n
"},{"location":"usage/custom_cards/custom_card_nik_tablet/","title":"Tablet Custom Card","text":""},{"location":"usage/custom_cards/custom_card_nik_tablet/#custom-card-tablet-custom-card","title":"Custom-card \"Tablet Custom Card\"","text":"
This is a custom-card that uses the installed Kiosk app on a tablet to get information from. It includes USB Power (if the tablet has it), Motion, light and maintenance switch as well as restart and reload mode.
 
 
"},{"location":"usage/custom_cards/custom_card_nik_tablet/#credits","title":"Credits","text":"
Author: Nik - 2022 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_nik_tablet/#changelog","title":"Changelog","text":"1.0.0 Initial release  0.1.1 Fix for UI Minimalist v1.0.1."},{"location":"usage/custom_cards/custom_card_nik_tablet/#requirements","title":"Requirements","text":"
     
  • To have all the Minimalist Cards and Custom Cards;
    •  
  • To have installed and configured Kiosk APP on the Tablet (enabled permissions etc...);
    •  
  • To have the HACS Integration \"Fully Kiosk Browser\" installed and configured in HomeAssistant;
    •  
  • Add Bar Card to HACS frontend
    •  
"},{"location":"usage/custom_cards/custom_card_nik_tablet/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: \"custom_card_nik_tablet\"\n  variables:\n    ulm_custom_card_nik_tablet_main: binary_sensor.ping_tablet_1p\n    ulm_custom_card_nik_tablet_name: \"Tablet 1P\"\n    ulm_custom_card_nik_tablet_battery: sensor.tablet_1p_battery_level\n    ulm_custom_card_nik_tablet_battery_name: \"Battery\"\n    ulm_custom_card_nik_tablet_button1: switch.sonoff_tablet_1p\n    ulm_custom_card_nik_tablet_button2: switch.tablet_1p_motion_detection\n    ulm_custom_card_nik_tablet_button3: light.tablet_1p_screen\n    ulm_custom_card_nik_tablet_restart: button.tablet_1p_restart_browser\n    ulm_custom_card_nik_tablet_reload: button.tablet_1p_load_start_url\n    ulm_custom_card_nik_tablet_maintenance: switch.tablet_1p_maintenance_mode\n    ulm_custom_card_nik_tablet_par1: sensor.tablet_1p_ram_free_memory\n    ulm_custom_card_nik_tablet_par1_name: \"RAM\"\n    ulm_custom_card_nik_tablet_par2: sensor.tablet_1p_internal_storage_free_space\n    ulm_custom_card_nik_tablet_par2_name: \"Disk\"\n    ulm_custom_card_nik_tablet_par3: binary_sensor.tablet_1p_plugged_in\n    ulm_custom_card_nik_tablet_par3_name: \"Power\"\n
"},{"location":"usage/custom_cards/custom_card_nik_tablet/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_custom_card_nik_tablet_main binary_sensor.ping_tablet_1p Yes A sensor that checks if the tablet is online. A simple binary ping sensor does the job. ulm_custom_card_nik_tablet_name Tablet 1P Yes Name of the Tablet ulm_custom_card_nik_tablet_battery sensor.tablet_1p_battery_level Yes Battery sensor for the Tablet ulm_custom_card_nik_tablet_battery_name Battery Yes If you want to customize the Battery name ulm_custom_card_nik_tablet_button1 switch.sonoff_tablet_1p Yes A Switch that enables or not USB Power for the Tablet. If not present you can replace it with another Switch of your choice. (check your device configs) ulm_custom_card_nik_tablet_button2 switch.tablet_1p_motion_detection Yes The Motion detection switch for your tablet (check your device configs) ulm_custom_card_nik_tablet_button3 light.tablet_1p_screen Yes The entity that turns on or off the Screen of the Tablet (check your device configs) ulm_custom_card_nik_tablet_restart button.tablet_1p_restart_browser Yes The entity to restart the Kiosk App of the Tablet (check your device configs) ulm_custom_card_nik_tablet_reload button.tablet_1p_load_start_url Yes The entity to reload the web page of the Kios App of the Tablet (check your device configs) ulm_custom_card_nik_tablet_maintenance switch.tablet_1p_maintenance_mode Yes The entity to put the tablet in maintenance mode. (check your device configs) ulm_custom_card_nik_tablet_par1 sensor.example Yes An entity of your choice to monitor a specific tablet parameter ulm_custom_card_nik_tablet_par2 sensor.example Yes An entity of your choice to monitor a specific tablet parameter ulm_custom_card_nik_tablet_par3 sensor.example Yes An entity of your choice to monitor a specific tablet parameter ulm_custom_card_nik_tablet_par1_name sensor.example Yes Name for Parameter 1 ulm_custom_card_nik_tablet_par2_name sensor.example Yes Name for Parameter 2 ulm_custom_card_nik_tablet_par3_name sensor.example Yes Name for Parameter 3"},{"location":"usage/custom_cards/custom_card_nik_tablet/#template-code","title":"Template Code","text":"
---\ncustom_card_nik_tablet:\n  template:\n    - \"ulm_language_variables\"\n  triggers_update: \"all\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  variables:\n    ulm_custom_card_nik_tablet_main: \"[[[ return variables.ulm_custom_card_nik_tablet_main ]]]\"\n    ulm_custom_card_nik_tablet_name: \"[[[ return variables.ulm_custom_card_nik_tablet_name ]]]\"\n    ulm_custom_card_nik_tablet_battery: \"[[[ return variables.ulm_custom_card_nik_tablet_battery ]]]\"\n    ulm_custom_card_nik_tablet_battery_name: \"[[[ return variables.ulm_custom_card_nik_tablet_battery_name ]]]\"\n    ulm_custom_card_nik_tablet_button1: \"[[[ return variables.ulm_custom_card_nik_tablet_button1 ]]]\"\n    ulm_custom_card_nik_tablet_button2: \"[[[ return variables.ulm_custom_card_nik_tablet_button2 ]]]\"\n    ulm_custom_card_nik_tablet_button3: \"[[[ return variables.ulm_custom_card_nik_tablet_button3 ]]]\"\n    ulm_custom_card_nik_tablet_restart: \"[[[ return variables.ulm_custom_card_nik_tablet_restart ]]]\"\n    ulm_custom_card_nik_tablet_reload: \"[[[ return variables.ulm_custom_card_nik_tablet_reload ]]]\"\n    ulm_custom_card_nik_tablet_maintenance: \"[[[ return variables.ulm_custom_card_nik_tablet_maintenance ]]]\"\n    ulm_custom_card_nik_tablet_par1: \"[[[ return variables.ulm_custom_card_nik_tablet_par1 ]]]\"\n    ulm_custom_card_nik_tablet_par2: \"[[[ return variables.ulm_custom_card_nik_tablet_par2 ]]]\"\n    ulm_custom_card_nik_tablet_par3: \"[[[ return variables.ulm_custom_card_nik_tablet_par3 ]]]\"\n    ulm_custom_card_nik_tablet_par1_name: \"[[[ return variables.ulm_custom_card_nik_tablet_par1_name ]]]\"\n    ulm_custom_card_nik_tablet_par2_name: \"[[[ return variables.ulm_custom_card_nik_tablet_par2_name ]]]\"\n    ulm_custom_card_nik_tablet_par3_name: \"[[[ return variables.ulm_custom_card_nik_tablet_par3_name ]]]\"\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            var areas = [];\n            areas.push(\"item1 item1\");\n            areas.push(\". .\");\n            areas.push(\"item2 item2\");\n            areas.push(\". .\");\n            areas.push(\"item3 item3\");\n            areas.push(\"item4 item4\");\n            areas.push(\"item5 item5\");\n            return \"\\\"\" + areas.join(\"\\\" \\\"\") + \"\\\"\";\n          ]]]\n      - grid-template-columns: \"1fr 1fr\"\n      - grid-template-rows: \"min-content 10px min-content 10px min-content min-content min-content\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_input_boolean\"\n        entity: \"[[[ return variables.ulm_custom_card_nik_tablet_main ]]]\"\n        icon: \"mdi:tablet\"\n        name: \"[[[ return variables.ulm_custom_card_nik_tablet_name ]]]\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n        tap_action:\n          action: \"none\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"widget_icon\"\n                - \"green\"\n              entity: \"[[[ return variables.ulm_custom_card_nik_tablet_button1 ]]]\"\n              icon: \"mdi:usb\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"widget_icon\"\n                - \"green\"\n              entity: \"[[[ return variables.ulm_custom_card_nik_tablet_button2 ]]]\"\n              icon: \"mdi:motion-sensor\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"widget_icon\"\n                - \"green\"\n              entity: \"[[[ return variables.ulm_custom_card_nik_tablet_button3 ]]]\"\n              icon: \"mdi:monitor\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"widget_icon\"\n                - \"blue_no_state\"\n              entity: \"[[[ return variables.ulm_custom_card_nik_tablet_restart ]]]\"\n              icon: \"mdi:restart-alert\"\n              tap_action:\n              action: \"call-service\"\n              service: \"button.press\"\n              service_data:\n                entity_id: \"[[[ return variables.ulm_custom_card_nik_tablet_restart ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"widget_icon\"\n                - \"yellow\"\n              entity: \"[[[ return variables.ulm_custom_card_nik_tablet_maintenance ]]]\"\n              icon: \"mdi:account-hard-hat-outline\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"widget_icon\"\n                - \"blue_no_state\"\n              entity: \"[[[ return variables.ulm_custom_card_nik_tablet_reload ]]]\"\n              icon: \"mdi:reload\"\n              tap_action:\n                action: \"call-service\"\n                service: \"button.press\"\n                service_data:\n                  entity_id: \"[[[ return variables.ulm_custom_card_nik_tablet_reload ]]]\"\n    item4:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_3_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_widget_nik_tablet\"\n              entity: \"[[[ return variables.ulm_custom_card_nik_tablet_par1 ]]]\"\n              name: \"[[[ return variables.ulm_custom_card_nik_tablet_par1_name ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_widget_nik_tablet\"\n              entity: \"[[[ return variables.ulm_custom_card_nik_tablet_par2 ]]]\"\n              name: \"[[[ return variables.ulm_custom_card_nik_tablet_par2_name ]]]\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"custom_widget_nik_tablet\"\n              entity: \"[[[ return variables.ulm_custom_card_nik_tablet_par3 ]]]\"\n              name: \"[[[ return variables.ulm_custom_card_nik_tablet_par3_name ]]]\"\n    item5:\n      card:\n        type: \"custom:button-card\"\n        template: \"custom_bar_card_nik_tablet\"\n        variables:\n          ulm_custom_bar_card_nik_tablet_card_entity: \"[[[ return variables.ulm_custom_card_nik_tablet_battery ]]]\"\n          ulm_custom_bar_card_nik_tablet_card_name: \"[[[ return variables.ulm_custom_card_nik_tablet_battery_name ]]]\"\n          ulm_custom_bar_card_nik_tablet_card_value: true\n          ulm_custom_bar_card_nik_tablet_card_indicator: false\n\ncustom_widget_nik_tablet:\n  show_label: true\n  show_icon: false\n  label: |\n    [[[\n      if (entity.attributes.unit_of_measurement) {\n        var unit = entity.attributes.unit_of_measurement != null ? ' ' + entity.attributes.unit_of_measurement: ''\n        return entity.state + unit;\n      } else {\n        return entity.state;\n      }\n    ]]]\n  styles:\n    name:\n      - justify-self: \"center\"\n      - align-self: \"start\"\n      - font-weight: \"bolder\"\n      - font-size: \"12px\"\n      - filter: \"opacity(40%)\"\n    label:\n      - margin-top: \"10px\"\n      - justify-self: \"center\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n    grid:\n      - grid-template-areas: \"'l' 'n'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n    card:\n      - box-shadow: \"none\"\n\ncustom_bar_card_nik_tablet:\n  triggers_update: \"all\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-rows: \"1fr\"\n    card:\n      - border-radius: \"none\"\n      - background-color: \"transparent\"\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_info\"\n          - \"card_generic\"\n        styles:\n          card:\n            - box-shadow: \"none\"\n            - border-radius: \"none\"\n            - padding: \"12px\"\n        entity: \"[[[ return variables.ulm_custom_bar_card_nik_tablet_card_entity ]]]\"\n        name: \"[[[ return variables.ulm_custom_bar_card_nik_tablet_card_name != '' ? variables.ulm_custom_bar_card_nik_tablet_card_name : '' ]]]\"\n    item2:\n      card:\n        type: \"custom:bar-card\"\n        entities:\n          - entity: \"[[[ return variables.ulm_custom_bar_card_nik_tablet_card_entity ]]]\"\n        positions:\n          icon: \"off\"\n          indicator: \"[[[ return variables.ulm_custom_bar_card_nik_tablet_card_indicator == true ? 'inside' : 'off' ]]]\"\n          minmax: \"off\"\n          title: \"off\"\n          value: \"[[[ return variables.ulm_custom_bar_card_nik_tablet_card_value == true ? 'inside' : 'off' ]]]\"\n          name: \"off\"\n        severity:\n          - color: \"var(--google-red)\"\n            from: 1\n            to: 30\n          - color: \"var(--google-yellow)\"\n            from: 31\n            to: 59\n          - color: \"var(--google-green)\"\n            from: 60\n            to: 100\n        min: 1\n        max: 100\n        style: |-\n          bar-card-currentbar {\n            right: 0;\n          }\n          bar-card-backgroundbar {\n            right: 0;\n          }\n          #states {\n            padding: 0;\n            height: 35px;\n          }\n          bar-card-background {\n            height: 35px !important;\n          }\n          bar-card-indicator {\n            left: 10px;\n          }\n          bar-card-value {\n            font-weight: bold;\n            font-size: 12px;\n          }\n
"},{"location":"usage/custom_cards/custom_card_paddy_dwd_pollen/","title":"DWD Pollen Custom-card","text":""},{"location":"usage/custom_cards/custom_card_paddy_dwd_pollen/#custom-card-dwd-pollen","title":"Custom-card \"DWD Pollen\"","text":"
This is a custom-card to show the pollen count, taken from the DWD pollen service via a rest sensor.
"},{"location":"usage/custom_cards/custom_card_paddy_dwd_pollen/#credits","title":"Credits","text":"
Author: Paddy0174 - 2021 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_paddy_dwd_pollen/#changelog","title":"Changelog","text":"1.0.0 Initial release  1.0.1 Fix for UI Minimalist v1.0.1."},{"location":"usage/custom_cards/custom_card_paddy_dwd_pollen/#usage","title":"Usage","text":"
- type: custom:button-card\n  template:\n    - custom_card_paddy_dwd_pollen\n  entity: sensor.dwd_pollenbelastung_birke\n
"},{"location":"usage/custom_cards/custom_card_paddy_dwd_pollen/#requirements","title":"Requirements","text":"
n/a
"},{"location":"usage/custom_cards/custom_card_paddy_dwd_pollen/#template-code","title":"Template code","text":"Template Code custom_card_paddy_dwd_pollen.yaml
---\ncustom_card_paddy_dwd_pollen:\n  template:\n    - \"card_generic_swap\"\n    - \"ulm_custom_card_paddy_dwd_pollen_language_variables\"\n  variables:\n    ulm_card_generic_swap_name: \"[[[ return variables.ulm_custom_card_paddy_dwd_pollen_name; ]]]\"\n    ulm_card_generic_swap_icon: \"[[[ return variables.ulm_custom_card_paddy_dwd_pollen_icon; ]]]\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_more_info\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              state:\n                - value: \"6\"\n                  styles:\n                    img_cell:\n                      - background-color: \"rgba(190,0,33,1)\"\n                - value: \"5\"\n                  styles:\n                    img_cell:\n                      - background-color: \"rgba(240,56,26,1)\"\n                - value: \"4\"\n                  styles:\n                    img_cell:\n                      - background-color: \"rgba(254,154,36,1)\"\n                - value: \"3\"\n                  styles:\n                    img_cell:\n                      - background-color: \"rgba(254,197,77,1)\"\n                - value: \"2\"\n                  styles:\n                    img_cell:\n                      - background-color: \"rgba(254,228,156,1)\"\n                - value: \"1\"\n                  styles:\n                    img_cell:\n                      - background-color: \"rgba(219,250,200,1)\"\n                - value: \"0\"\n                  styles:\n                    icon:\n                      - color: \"rgba(var(--color-theme),0.2)\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              label: >\n                [[[\n                  if (entity.state == \"6\"){\n                    return variables.ulm_custom_card_paddy_dwd_pollen_6;\n                  } else if (entity.state == \"5\"){\n                    return variables.ulm_custom_card_paddy_dwd_pollen_5;\n                  } else if (entity.state == \"4\"){\n                    return variables.ulm_custom_card_paddy_dwd_pollen_4;\n                  } else if (entity.state == \"3\"){\n                    return variables.ulm_custom_card_paddy_dwd_pollen_3;\n                  } else if (entity.state == \"2\"){\n                    return variables.ulm_custom_card_paddy_dwd_pollen_2;\n                  } else if (entity.state == \"1\"){\n                    return variables.ulm_custom_card_paddy_dwd_pollen_1;\n                  }\n                  return variables.ulm_custom_card_paddy_dwd_pollen_none;\n                ]]]\n
"},{"location":"usage/custom_cards/custom_card_paddy_dwd_pollen/#homeassistant","title":"HomeAssistant","text":"
I use the following rest and template sensors in HA:
 
sensor:\n  - platform: rest\n    scan_interval: 3600\n    name: \"DWD Pollenbelastung\"\n    resource: https://opendata.dwd.de/climate_environment/health/alerts/s31fg.json\n    json_attributes_path: \"$..content[?(@.partregion_id==XXX)].Pollen\"\n    json_attributes:\n      #- Erle\n      #- Beifuss\n      #- Ambrosia\n      - Birke\n      #- Esche\n      - Hasel\n      - Graeser\n      #- Roggen\n    value_template: \"{{ value_json.last_update }}\"\n  - platform: template\n    sensors:\n      dwd_pollenbelastung_birke:\n        icon_template: \"mdi:tree-outline\"\n        friendly_name: \"Birke\"\n        value_template: >-\n          {% set dwd_state = state_attr('sensor.dwd_pollenbelastung', 'Birke')['today'] %}\n          {% if dwd_state == \"3\" %}6{% elif dwd_state == \"2-3\"%}5{% elif dwd_state == \"2\"%}4{% elif dwd_state == \"1-2\"%}3{% elif dwd_state == \"1\"%}2{% elif dwd_state == \"0-1\"%}1{% else %}0{% endif %}\n        attribute_templates:\n          today: >-\n            {% set dwd_state = state_attr('sensor.dwd_pollenbelastung', 'Birke')['today'] %}\n            {% if dwd_state == \"3\" %}6{% elif dwd_state == \"2-3\"%}5{% elif dwd_state == \"2\"%}4{% elif dwd_state == \"1-2\"%}3{% elif dwd_state == \"1\"%}2{% elif dwd_state == \"0-1\"%}1{% else %}0{% endif %}\n          tomorrow: >-\n            {% set dwd_state = state_attr('sensor.dwd_pollenbelastung', 'Birke')['tomorrow'] %}\n            {% if dwd_state == \"3\" %}6{% elif dwd_state == \"2-3\"%}5{% elif dwd_state == \"2\"%}4{% elif dwd_state == \"1-2\"%}3{% elif dwd_state == \"1\"%}2{% elif dwd_state == \"0-1\"%}1{% else %}0{% endif %}\n
"},{"location":"usage/custom_cards/custom_card_paddy_dwd_pollen/#notes","title":"Notes","text":"
     
  • As this card is mainly for the DWD pollen sensor, that is based in Germany and shows only german data, the only available language is \"German\". If you want another language added, please leave a message in the support thread.
    •  
"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/","title":"Waste Collection Custom-card","text":""},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#custom-card-waste-collection","title":"Custom-card \"Waste collection\"","text":"
This is a custom-card to show the next waste collection date. It uses the data from the custom_component \"Waste Collection Framework\".
"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#credits","title":"Credits","text":"
Author: Paddy0174 - 2021 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#changelog","title":"Changelog","text":"1.0.0 Initial release  1.0.1 Fix for UI Minimalist v1.0.1.  1.0.2 Fixed the bug where card doesn't show at all"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#usage","title":"Usage","text":"
- type: custom:button-card\n  template:\n    - custom_card_paddy_waste_collection\n  entity: sensor.waste_collection_paper\n
"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#requirements","title":"Requirements","text":"
This card needs the following to function correctly:
 Component / card required Link Waste Collection Schedule Framework yes more info"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#variables","title":"Variables","text":"Variable Example Required Explanation entity sensor.waste_collection_paper yes Your waste collection sensor. See HA example on how to configure. ulm_card_generic_swap_name Paper no ulm_card_generic_swap_icon mdi:trash-can no"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#template-code","title":"Template code","text":"Template Code custom_card_paddy_waste_collection.yaml
---\ncustom_card_paddy_waste_collection:\n  template:\n    - \"card_generic_swap\"\n  variables:\n    ulm_card_generic_swap_name: \"[[[ return entity.name; ]]]\"\n    ulm_card_generic_swap_icon: \"[[[ return entity.icon; ]]]\"\n  state:\n    - operator: \"template\"\n      value: \"[[[ return states[entity.entity_id].attributes.daysTo == 0; ]]]\"\n      styles:\n        custom_fields:\n          notification:\n            - border-radius: \"50%\"\n            - position: \"absolute\"\n            - left: \"38px\"\n            - top: \"8px\"\n            - height: \"16px\"\n            - width: \"16px\"\n            - border: \"2px solid var(--card-background-color)\"\n            - font-size: \"12px\"\n            - line-height: \"14px\"\n            - z-index: \"1\"\n            - background-color: >\n                [[[\n                  return \"rgba(var(--color-red),1)\";\n                ]]]\n    - operator: \"template\"\n      value: \"[[[ return states[entity.entity_id].attributes.daysTo == 1; ]]]\"\n      styles:\n        custom_fields:\n          notification:\n            - border-radius: \"50%\"\n            - position: \"absolute\"\n            - left: \"38px\"\n            - top: \"8px\"\n            - height: \"16px\"\n            - width: \"16px\"\n            - border: \"2px solid var(--card-background-color)\"\n            - font-size: \"12px\"\n            - line-height: \"14px\"\n            - z-index: \"1\"\n            - background-color: >\n                [[[\n                  return \"rgba(var(--color-red),1)\";\n                ]]]\n    - value: \"unavailable\"\n      styles:\n        custom_fields:\n          notification:\n            - border-radius: \"50%\"\n            - position: \"absolute\"\n            - left: \"38px\"\n            - top: \"8px\"\n            - height: \"16px\"\n            - width: \"16px\"\n            - border: \"2px solid var(--card-background-color)\"\n            - font-size: \"12px\"\n            - line-height: \"14px\"\n            - z-index: \"1\"\n            - background-color: >\n                [[[\n                  return \"rgba(var(--color-red),1)\";\n                ]]]\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_more_info\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              state:\n                - operator: \"template\"\n                  value: \"[[[ return states[entity.entity_id].attributes.daysTo == 0; ]]]\"\n                  styles:\n                    img_cell:\n                      - background-color: \"rgba(var(--color-red),0.5)\"\n                    icon:\n                      - color: \"rgba(var(--color-red),1)\"\n                - operator: \"template\"\n                  value: \"[[[ return states[entity.entity_id].attributes.daysTo == 1; ]]]\"\n                  styles:\n                    img_cell:\n                      - background-color: \"rgba(var(--color-red),0.05)\"\n                    icon:\n                      - color: \"rgba(var(--color-red),1)\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n    notification: >\n      [[[\n        if (entity.state == 'unavailable' || states[entity.entity_id].attributes.daysTo == 0 || states[entity.entity_id].attributes.daysTo == 1){\n          return '<ha-icon icon=\"mdi:exclamation\" style=\"width: 12px; height: 12px; color: var(--primary-background-color);\"></ha-icon>'\n        }\n      ]]]\n
"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#homeassistant","title":"HomeAssistant","text":"
This is my sensor setup in HA. I do the change from \"days\" to \"friendly days\" in my template sensor.
 
sensor:\n  - platform: waste_collection_schedule\n    name: waste_collection_paper\n    details_format: upcoming\n    add_days_to: true # this line is important\n    value_template: >-\n      {% if value.daysTo == 0 %}\n      HEUTE\n      {% elif value.daysTo == 1 %}\n      MORGEN\n      {% else %}\n      in {{value.daysTo}} Tagen\n      {% endif %}\n    types:\n      - Papiertonne\n
"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#note","title":"Note","text":"
     
  • Don't forget to set add_days_to in your sensor config
    •  
  • \"HEUTE\" is german for today or aujourd'hui
    •  
  • \"MORGEN\" is german for tomorrow or demain
    •  
"},{"location":"usage/custom_cards/custom_card_paddy_waste_collection/#notes","title":"Notes","text":"
n/a
"},{"location":"usage/custom_cards/custom_card_paddy_welcome/","title":"Welcome Custom-card","text":""},{"location":"usage/custom_cards/custom_card_paddy_welcome/#custom-card-welcome","title":"Custom-card \"Welcome\"","text":"
This is a custom-card to show a welcome message to the user. It comes in four different versions:
 
     
  • welcome message (custom_card_paddy_welcome)
    •  
  • welcome message + weather-forecast (custom_card_paddy_welcome_with_weather)
    •  
  • welcome message + news (custom_card_paddy_welcome_with_news) [based on home-feed-card]
    •  
 
The card shows a time based message (good morning/afternoon/evening/hello) to the logged-in user with username. The second part of the card varies depending on what version you choose. Note, that you have different requirements depending on the version!
"},{"location":"usage/custom_cards/custom_card_paddy_welcome/#credits","title":"Credits","text":"
Author: Paddy0174 - 2021 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_paddy_welcome/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_paddy_welcome/#requirements","title":"Requirements","text":"
This card needs the following to function correctly:
 Component / card required Note lovelace-card-mod yes a weather integration/provider only for welcome-card-with-weather See setup instructions for a HA weather integration home-feed-card only for welcome-card-with-news"},{"location":"usage/custom_cards/custom_card_paddy_welcome/#usage","title":"Usage","text":"
- type: custom:button-card\n  template: custom_card_paddy_welcome\n  variables:\n    ulm_custom_card_paddy_welcome_time: sensor.time\n\n- type: custom:button-card\n  template: custom_card_paddy_welcome_with_weather\n  variables:\n    ulm_custom_card_paddy_welcome_time: sensor.time\n    ulm_custom_card_paddy_welcome_weather_provider: weather.accu_weather\n\n- type: custom:button-card\n  template: custom_card_paddy_welcome_with_news\n  variables:\n    ulm_custom_card_paddy_welcome_time: sensor.time\n    ulm_custom_card_paddy_welcome_news_entities:\n      - entity: sensor.waste_collection_paper\n        content_template: \"<b>{{display_name}}</b><br>{{state}}\"\n      - entity: sensor.waste_collection_waste\n        content_template: \"<b>{{display_name}}</b><br>{{state}}\"\n
"},{"location":"usage/custom_cards/custom_card_paddy_welcome/#variables","title":"Variables","text":"Card type Variable Example Required Explanation all ulm_custom_card_paddy_welcome_time sensor.time yes This is your Home Assistant sensor.time _welcome_with_weather ulm_custom_card_paddy_welcome_weather_provider weather.accu_weather yes This is your weather provider _welcome_with_news ulm_custom_card_paddy_welcome_news_entities entity: sensor.waste_collection_papercontent_template: \"<b>{{display_name}}</b><br>{{state}}\" yes A list of your entities to show in the news feed, see the note underneath."},{"location":"usage/custom_cards/custom_card_paddy_welcome/#note-_welcome_with_news","title":"Note _welcome_with_news","text":"
This card is based on home-feed-card and needs a little different configuration in the variables. To allow almost all entities from HomeAssistant to show in the news, you're able to set all options that home-feed-card provides. This makes it necessary, that you set these entities in a list. Let me show you an example:
 
# normally you do this\nvariables:\n  ulm_variable: your_variable_entity\n\n# here you need to do a list\nvariables:\n  ulm_variable:\n    - your_variable_entity_1\n    - your_variable_entity_2\n\n# to use an option from home-feed-card\nvariables:\n  ulm_variable:\n    - entity: your_variable_entity_1\n      content_template: \"<b>{{ display_name }}</b><br>{{ state }}\"\n    - your_variable_entity_2\n
 
You can find all available options and their description here.
 
I recommend to use a content_template to format the output for every news item, eg. like this:
 
content_template: \"<b>{{ display_name }}</b><br />{{ state }}\"\n
"},{"location":"usage/custom_cards/custom_card_paddy_welcome/#example","title":"Example","text":"
- type: custom:button-card\n  template: custom_card_paddy_welcome_with_news\n  variables:\n    ulm_custom_card_paddy_welcome_news_entities:\n      - entity: input_datetime.alarm_clock\n        content_template: \"<b>{{display_name}}</b><br />{{state}}\"\n      - entity: sensor.waste_collection_bio\n        content_template: \"<b>{{display_name}}</b><br />{{state}}\"\n      - entity: sensor.waste_collection_paper\n        content_template: \"<b>{{display_name}}</b><br />{{state}}\"\n      - entity: sensor.waste_collection_plastic\n        content_template: \"<b>{{display_name}}</b><br />{{state}}\"\n
"},{"location":"usage/custom_cards/custom_card_paddy_welcome/#template-code","title":"Template code","text":"Template Code custom_card_paddy_welcome.yaml
---\ncustom_card_paddy_welcome:\n  template:\n    - \"ulm_language_variables\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: \"'item1'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"markdown\"\n        content: >\n          [[[\n            let time = states[variables.ulm_custom_card_paddy_welcome_time].state;\n            let welcome = '';\n\n            if (time > '18:00'){\n              welcome = variables.ulm_evening;\n            } else if (time > '12:00'){\n              welcome = variables.ulm_afternoon;\n            } else if (time > '05:00'){\n              welcome = variables.ulm_morning;\n            } else {\n              welcome = variables.ulm_hello;\n            }\n            return welcome + ',<br>' + user.name + '!';\n          ]]]\n        card_mod:\n        style: |\n          ha-card {\n            border-radius: 14px;\n            box-shadow: none;\n            font-size: 30px;\n            text-align: left;\n            cursor: default;\n          }\n\ncustom_card_paddy_welcome_with_weather:\n  template:\n    - \"ulm_language_variables\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"markdown\"\n        content: >\n          [[[\n            let time = states[variables.ulm_custom_card_paddy_welcome_time].state;\n            let welcome = '';\n\n            if (time > '18:00'){\n              welcome = variables.ulm_evening;\n            } else if (time > '12:00'){\n              welcome = variables.ulm_afternoon;\n            } else if (time > '05:00'){\n              welcome = variables.ulm_morning;\n            } else {\n              welcome = variables.ulm_hello;\n            }\n            return welcome + ',<br>' + user.name + '!';\n          ]]]\n        card_mod:\n        style: |\n          ha-card {\n            border-radius: 14px;\n            box-shadow: none;\n            font-size: 30px;\n            text-align: left;\n            cursor: default;\n          }\n    item2:\n      card:\n        type: \"weather-forecast\"\n        entity: \"[[[ return variables.ulm_custom_card_paddy_welcome_weather_provider; ]]]\"\n        show_forecast: false\n        card_mod:\n        style: |\n          ha-card.type-weather-forecast {\n            border-radius: 14px;\n            box-shadow: none;\n          }\n          ha-card.type-weather-forecast .state {\n            text-align: left;\n            font-size: 14px;\n            font-weight: bolder;\n          }\n          ha-card.type-weather-forecast .name {\n            text-align: left;\n            font-size: 14px;\n          }\n          ha-card.type-weather-forecast .temp-attribute {\n            text-align: right;\n          }\n          ha-card.type-weather-forecast .temp {\n            text-align: right;\n            font-size: medium;\n            font-weight: bolder;\n            margin-right: 16px;\n          }\n          ha-card.type-weather-forecast .temp span {\n            text-align: right;\n            font-size: medium;\n            font-weight: bolder;\n          }\n          ha-card.type-weather-forecast .attribute {\n            text-align: right;\n            font-size: smaller;\n          }\n\ncustom_card_paddy_welcome_with_news:\n  template:\n    - \"ulm_language_variables\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"markdown\"\n        content: >\n          [[[\n            let time = states[variables.ulm_custom_card_paddy_welcome_time].state;\n            let welcome = '';\n\n            if (time > '18:00'){\n              welcome = variables.ulm_evening;\n            } else if (time > '12:00'){\n              welcome = variables.ulm_afternoon;\n            } else if (time > '05:00'){\n              welcome = variables.ulm_morning;\n            } else {\n              welcome = variables.ulm_hello;\n            }\n            return welcome + ',<br>' + user.name + '!';\n          ]]]\n        card_mod:\n        style: |\n          ha-card {\n            border-radius: 14px;\n            box-shadow: none;\n            font-size: 30px;\n            text-align: left;\n            cursor: default;\n          }\n    item2:\n      card:\n        type: \"custom:home-feed-card\"\n        card_id: \"main_feed\"\n        show_empty: false\n        more_info_on_tap: true\n        state_color: false\n        compact_mode: true\n        max_item_count: 3\n        show_icons: true\n        entities: >\n          [[[\n            return variables.ulm_custom_card_paddy_welcome_news_entities;\n          ]]]\n        card_mod:\n        style: |\n          ha-card {\n            border-radius: 14px;\n            box-shadow: none;\n            font-size: 14px;\n            text-align: left;\n          }\n
"},{"location":"usage/custom_cards/custom_card_paddy_welcome/#custom-configuration-example","title":"Custom configuration Example","text":"
Here is one example, on how you can extend this (actually every) card. In the end we have the welcome card extended by four buttons to have something like a header with a navigation.
 
- type: horizontal-stack\n    cards:\n      - type: custom:button-card\n        template: edge\n      - type: custom:button-card\n        template: custom_card_paddy_welcome\n        # here we override the styles to extend the welcome card with a second item\n        styles:\n          grid:\n            - grid-template-areas: '\"item1\" \"item2\"'\n            - grid-template-rows: min-content min-content\n            - row-gap: 12px\n        custom_fields:\n        # here we set up the second item and its contents\n          item2:\n            card:\n              type: horizontal-stack\n              cards:\n                - type: custom:button-card\n                  template: edge\n                - type: custom:button-card\n                  template: vertical_buttons\n                  tap_action:\n                    action: navigate\n                    navigation_path: /ui-lovelace-minimalist/living\n                  icon: \"mdi:sofa\"\n                  name: Living\n                  label: Livingroom\n                - type: custom:button-card\n                  template: vertical_buttons\n                  tap_action:\n                    action: navigate\n                    navigation_path: /ui-lovelace-minimalist/working\n                  icon: \"mdi:factory\"\n                  name: Working\n                  label: Office\n                - type: custom:button-card\n                  template: vertical_buttons\n                  tap_action:\n                    action: navigate\n                    navigation_path: /ui-lovelace-minimalist/sleeping\n                  icon: \"mdi:bed-king-outline\"\n                  name: Sleeping\n                  label: Bedroom\n                - type: custom:button-card\n                  template: vertical_buttons\n                  tap_action:\n                    action: navigate\n                    navigation_path: /ui-lovelace-minimalist/climate\n                  icon: \"mdi:air-conditioner\"\n                  name: Air Conditioning\n                  label: Livingroom\n                - type: custom:button-card\n                  template: edge\n      - type: custom:button-card\n        template: edge\n
"},{"location":"usage/custom_cards/custom_card_person_chip/","title":"Person Chip Custom-card","text":""},{"location":"usage/custom_cards/custom_card_person_chip/#custom-card-person-chip","title":"Custom-card \"Person Chip\"","text":"
This is a custom-card to display a person entity as a chip.
 
"},{"location":"usage/custom_cards/custom_card_person_chip/#credits","title":"Credits","text":"
Author: tmatheussen - 2022 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_person_chip/#changelog","title":"Changelog","text":"1.0.0 Initial release."},{"location":"usage/custom_cards/custom_card_person_chip/#usage","title":"Usage","text":"
- type: 'custom:button-card'\n  template: custom_card_person_chip\n  variables:\n    ulm_custom_card_person_chip_entity: person.tom\n
"},{"location":"usage/custom_cards/custom_card_person_chip/#variables","title":"Variables","text":"Variable Example Required Default Explanation ulm_custom_card_person_chip_entity person.tom yes The person to show"},{"location":"usage/custom_cards/custom_card_person_chip/#example","title":"Example","text":"
- type: 'custom:button-card'\n  template: custom_card_person_chip\n  variables:\n    ulm_custom_card_person_chip_entity: person.tom\n
"},{"location":"usage/custom_cards/custom_card_person_info/","title":"Person Info Card","text":""},{"location":"usage/custom_cards/custom_card_person_info/#description","title":"Description","text":"
The custom_card_person_info is an extension of card_person. It can also show if the user is driving, a related battery level, and a related commute time.
"},{"location":"usage/custom_cards/custom_card_person_info/#credits","title":"Credits","text":"
     
  • Author: Jordan Janzen <@jordandrako>
    •  
  • Version: 1.0.0
    •  
"},{"location":"usage/custom_cards/custom_card_person_info/#variables","title":"Variables","text":"Variable Default Required Notes ulm_card_person_entity The person entity ulm_card_person_use_entity_picture If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false. ulm_card_person_zone1 Set another zone (beside \"home\") to use for the card. You can set up two zones besides \"home\". ulm_card_person_zone2 Set another zone (beside \"home\") to use for the card. You can set up two zones besides \"home\". ulm_address Show an address as label, add an entity with a geo location ulm_multiline false Show battery and commute sensors below state ulm_card_person_driving_entity Set a binary sensor that depicts when this person is driving ulm_card_person_battery_entity Set a battery level sensor ulm_card_person_battery_state_entity Set a battery state sensor (eg the battery state sensor from the home assistant companion app will have the states \"charging\" or \"discharging\") ulm_card_person_commute_entity Set a travel time sensor ulm_card_person_cummute_icon \"mdi:car\" Set an icon for the commute sensor to use"},{"location":"usage/custom_cards/custom_card_person_info/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_person_info\n  variables:\n    ulm_card_person_entity: person.lee\n    ulm_card_person_use_entity_picture: true\n    ulm_card_person_zone1: zone.uw\n    ulm_card_person_zone2: zone.store\n    ulm_multiline: true\n    ulm_card_person_driving_entity: binary_sensor.lee_in_car\n    ulm_card_person_commute_entity: sensor.uw_commute\n    ulm_card_person_commute_icon: mdi:bus\n    ulm_card_person_battery_entity: sensor.lees_phone_battery_level\n    ulm_card_person_battery_state_entity: sensor.lees_phone_battery_state\n
"},{"location":"usage/custom_cards/custom_card_person_info/#template-code","title":"Template Code","text":"Template Code custom_card_person_info.yaml
---\ncard_person_info:\n  template:\n    - \"icon_info_bg\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_card_person_use_entity_picture: false\n    ulm_card_person_zone1: \"\"\n    ulm_card_person_zone2: \"\"\n    ulm_address: \"\"\n    ulm_address_locality: \"\"\n    ulm_card_person_driving_entity: \"\"\n    ulm_card_person_battery_entity: \"\"\n    ulm_card_person_battery_state_entity: \"\"\n    ulm_card_person_commute_entity: \"\"\n    ulm_card_person_cummute_icon: \"mdi:car\"\n    ulm_multiline: true\n  triggers_update: \"all\"\n  tap_action:\n    action: \"more-info\"\n    entity: \"[[[ return variables.ulm_card_person_entity; ]]]\"\n  show_label: true\n  show_name: true\n  label: >\n    [[[\n      if (variables.ulm_address){\n        return states[variables.ulm_address].state;\n      } else if (variables.ulm_address_locality){\n        return states[variables.ulm_address_locality].attributes.Locality;\n      }\n      else if (states[variables.ulm_card_person_driving_entity]?.state === \"on\") {\n        let state = states[variables.ulm_card_person_entity].state;\n        return `Driving - ${variables.ulm_translation_state}`;\n      } else {\n        let state = states[variables.ulm_card_person_entity].state;\n        return hass.resources[hass[\"language\"]][\"component.person.entity_component._.state.\" + state] ? hass.resources[hass[\"language\"]][\"component.person.entity_component._.state.\" + state] : state;\n      }\n    ]]]\n  name: \"[[[ return states[variables.ulm_card_person_entity].attributes.friendly_name ]]]\"\n  entity: \"[[[ return variables.ulm_card_person_entity; ]]]\"\n  icon: \"mdi:face-man\"\n  show_entity_picture: \"[[[ return variables.ulm_card_person_use_entity_picture ]]]\"\n  entity_picture:\n    \"[[[ return variables.ulm_card_person_use_entity_picture != false ? states[variables.ulm_card_person_entity].attributes.entity_picture\\\n    \\ : null ]]]\"\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            return variables.ulm_multiline\n              ? \"'i n' 'i l' 'battery commute'\"\n              : \"'i n battery' 'i l commute'\"\n          ]]]\n      - grid-template-columns: >\n          [[[\n            return variables.ulm_multiline\n              ? \"min-content auto\"\n              : \"min-content auto min-content\"\n          ]]]\n      - grid-template-rows: \"min-content min-content\"\n    icon:\n      - color: \"rgba(var(--color-theme),0.9)\"\n      - width: >\n          [[[\n            if (variables.ulm_card_person_use_entity_picture !== true){\n              return \"20px\";\n            } else {\n              return \"42px\";\n            }\n          ]]]\n      - place-self: >\n          [[[\n            if (variables.ulm_card_person_use_entity_picture !== true){\n              return \"center\";\n            } else {\n              return \"stretch stretch\";\n            }\n          ]]]\n    custom_fields:\n      notification:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"38px\"\n        - top: \"8px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: >\n            [[[\n              if (states[variables.ulm_card_person_driving_entity]?.state === \"on\") {\n                return \"rgba(var(--color-red),1)\";\n              } else if (states[variables.ulm_card_person_entity].state !== 'home') {\n                return \"rgba(var(--color-green),1)\";\n              } else {\n                return \"rgba(var(--color-blue),1)\";\n              }\n            ]]]\n      battery:\n        - align-self: \"middle\"\n        - justify-self: \"start\"\n        - display: \"flex\"\n        - align-items: \"center\"\n        - margin-top: >\n            [[[\n              return variables.ulm_multiline ? \"6px\" : \"0\";\n            ]]]\n        - font-size: \"12px\"\n      commute:\n        - align-self: \"middle\"\n        - justify-self: \"end\"\n        - display: \"flex\"\n        - align-items: \"center\"\n        - margin-top: \"6px\"\n        - font-size: \"12px\"\n\n  custom_fields:\n    notification: >\n      [[[\n        if (states[variables.ulm_card_person_driving_entity]?.state === \"on\") {\n          var icon = 'mdi:car'\n          return '<ha-icon icon=\"' + icon + '\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        } else if (states[variables.ulm_card_person_entity].state !== 'home') {\n          if (states[variables.ulm_card_person_entity].state === states[variables.ulm_card_person_zone1]?.attributes?.friendly_name) {\n            var icon = states[variables.ulm_card_person_zone1].attributes.icon !== null ? states[variables.ulm_card_person_zone1].attributes.icon : 'mdi:help-circle'\n            return '<ha-icon icon=\"' + icon + '\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n          } else if (states[variables.ulm_card_person_entity].state === states[variables.ulm_card_person_zone2]?.attributes?.friendly_name) {\n            var icon = states[variables.ulm_card_person_zone2].attributes.icon !== null ? states[variables.ulm_card_person_zone2].attributes.icon : 'mdi:help-circle'\n            return '<ha-icon icon=\"' + icon + '\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n          } else {\n            return '<ha-icon icon=\"mdi:home-minus\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n          }\n        } else {\n          return '<ha-icon icon=\"mdi:home-variant\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        }\n      ]]]\n    battery: >\n      [[[\n        if (states[variables.ulm_card_person_battery_entity]?.state) {\n          var battery = states[variables.ulm_card_person_battery_entity]?.state;\n          var charging = states[variables.ulm_card_person_battery_state_entity]?.state.toLowerCase() === \"charging\";\n          var iconBase = charging ? \"mdi:battery-charging\" : \"mdi:battery\"\n          var roundedBattery = Math.ceil(battery / 10) * 10;\n          var icon = roundedBattery === 100 ? iconBase : `${iconBase}-${roundedBattery}`;\n          var foo = \"mdi:battery\"\n          var color = \"rgba(var(--color-green),1)\";\n          if (battery <= 50) {\n            color = \"rgba(var(--color-yellow),1)\"\n          } else if (battery <= 25) {\n            color = \"rgba(var(--color-red),1)\"\n          }\n          return `\n            <ha-icon icon=\"${icon}\" style=\"width: 16px; height: 16px; font-size: 14px; color: ${color}; margin: 0 2px 0 0\"></ha-icon>\n            <span style=\"padding-top: 6px;\">${battery}%</span>\n          `;\n        }\n      ]]]\n    commute: >\n      [[[\n        if (states[variables.ulm_card_person_commute_entity]?.state) {\n          var icon = variables.ulm_card_person_commute_icon || \"mdi:car\";\n          var commute = states[variables.ulm_card_person_commute_entity]?.state;\n          var color = \"rgba(var(--color-green),1)\";\n          if (commute >= 30) {\n            color = \"rgba(var(--color-yellow),1)\"\n          }\n          if (commute >= 60) {\n            color = \"rgba(var(--color-red),1)\"\n          }\n          return `\n            <ha-icon icon=\"${icon}\" style=\"width: 16px; height: 16px; font-size: 14px; color: ${color}; margin: 0 2px 0 0\"></ha-icon>\n            <span style=\"padding-top: 6px;\">${commute} min</span>\n          `;\n        }\n      ]]]\n
"},{"location":"usage/custom_cards/custom_card_playstation/","title":"PS4 Custom-card","text":""},{"location":"usage/custom_cards/custom_card_playstation/#playstation","title":"Playstation","text":"
NOTE This card is under review and is not ready to use!
 Usage  #### Example  
- type: \"custom:button-card\"\n  template: card_ps4\n  entity: media_player.example\n
  #### Variables   Variable Example Required Explanation Template Code custom_card_playstation.yaml
---\ncard_ps4:\n  template:\n    - \"icon_info_bg\"\n    - \"ulm_translation_engine\"\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.2)\"\n    img_cell:\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n  state:\n    - value: \"idle\"\n      styles:\n        icon:\n          - color: \"rgba(var(--color-blue),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-blue), 0.2)\"\n    - value: \"standby\"\n      styles:\n        icon:\n          - color: \"rgba(var(--color-theme),0.2)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-theme),0.05)\"\n    - operator: \"template\"\n      value: \"[[[ return entity.state !='unknown' ]]]\"\n      name: \"[[[ return entity.attributes.media_title; ]]]\"\n      label: \"[[[ return entity.attributes.friendly_name; ]]]\"\n      styles:\n        label:\n          - color: \"white\"\n          - filter: \"opacity(100%)\"\n        img_cell:\n          - background-color: \"none\"\n        icon:\n          - color: \"white\"\n        name:\n          - color: \"white\"\n        card:\n          - background-blend-mode: \"multiply\"\n          - background: >\n              [[[\n                var image = entity.attributes.entity_picture;\n                return 'center / cover url(' + image + ') rgba(0, 0, 0, 0.15)';\n              ]]]\n
"},{"location":"usage/custom_cards/custom_card_qubino/","title":"Qubino Custom-card","text":""},{"location":"usage/custom_cards/custom_card_qubino/#custom-card-qubino","title":"Custom-card \"Qubino\"","text":"
NOTE This card is under review and is not ready to use!
"},{"location":"usage/custom_cards/custom_card_qubino/#credits","title":"Credits","text":"
Author: tben - 2021 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_qubino/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_qubino/#usage","title":"Usage","text":""},{"location":"usage/custom_cards/custom_card_qubino/#requirements","title":"Requirements","text":"
This card needs the following to function correctly:
 Component / card required Note"},{"location":"usage/custom_cards/custom_card_qubino/#variables","title":"Variables","text":"Variable Example Required Explanation"},{"location":"usage/custom_cards/custom_card_qubino/#template-code","title":"Template code","text":"Template Code custom_card_qubino.yaml
---\ncard_qubino:\n  icon: \"mdi:memory\"\n  tap_action:\n    action: \"more-info\"\n    entity: \"input_select.ordres_fil_pilote\"\n  label: >-\n    [[[ if (entity.state !='unavailable'){\n          var bri = Math.round(entity.attributes.brightness / 2.55);\n          var bri = (bri ? bri : '0')\n          var consigne = 'Inconnue';\n        if (bri >= 51){\n          var consigne = 'Confort';\n        } else if(bri < 51 && bri >= 41){\n          var consigne = 'Confort -1\u00b0C';\n        } else if(bri < 41 && bri >= 31){\n          var consigne = 'Confort -2\u00b0C\ufe0f';\n        } else if(bri < 31 && bri >= 21){\n          var consigne = 'Eco\ufe0f';\n        } else if(bri < 21 && bri >= 11){\n          var consigne = 'Hors Gel\ufe0f';\n        } else if(bri < 11 && bri >= 0){\n          var consigne = 'Arr\u00eat\ufe0f';\n        }\n        return consigne + ' \u2022 ' + bri;\n      }else{\n        return \"Indisponible\";\n      }\n    ]]]\n  template:\n    - \"blue\"\n
"},{"location":"usage/custom_cards/custom_card_qubino/#homeassistant","title":"HomeAssistant","text":"
...
"},{"location":"usage/custom_cards/custom_card_qubino/#example","title":"Example","text":"
...
"},{"location":"usage/custom_cards/custom_card_qubino/#note","title":"Note","text":"
...
"},{"location":"usage/custom_cards/custom_card_ristou_person/","title":"Custom Card Ristou Person","text":""},{"location":"usage/custom_cards/custom_card_ristou_person/#custom-card-ristou-person","title":"Custom Card Ristou Person","text":"Light Dark"},{"location":"usage/custom_cards/custom_card_ristou_person/#credits","title":"Credits","text":"
     
  • Author: Ristou - 2022
    •  
  • Version: 1.0.0
    •  
"},{"location":"usage/custom_cards/custom_card_ristou_person/#changelog","title":"Changelog","text":"1.0.1  - Fixed image path on documentation - Added new template on card ( `icon_more_info_new` & `ulm_actions_card` )   1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_ristou_person/#description","title":"Description","text":"
The custom_card_ristou_person shows if a person is home or not_home. If you have setup other zones, it will show these as well (e.g work, school, doctor, etc... ).
 
Showing driving state is also possible with a binary sensor.
 
In addition, this card can display a map (either static or using built in map) in a second row.
"},{"location":"usage/custom_cards/custom_card_ristou_person/#icon-style","title":"Icon style","text":"
As the main icon of this card you can choose the following set up
 Variables UI ulm_custom_card_ristou_use_badge: true  ulm_custom_card_ristou_use_entity_picture: false ulm_custom_card_ristou_use_badge: true  ulm_custom_card_ristou_use_entity_picture: true ulm_custom_card_ristou_use_badge: false  ulm_custom_card_ristou_use_entity_picture: false"},{"location":"usage/custom_cards/custom_card_ristou_person/#map-style","title":"map style","text":"Variables UI ulm_custom_card_ristou_camera_entity_light != \"\" and  ulm_custom_card_ristou_camera_entity_dark != \"\" ulm_custom_card_ristou_map_enable: true ulm_custom_card_ristou_camera_entity_light = \"\" and ulm_custom_card_ristou_camera_entity_dark = \"\" and ulm_custom_card_ristou_map_enable = false"},{"location":"usage/custom_cards/custom_card_ristou_person/#about-static-maps","title":"About Static maps","text":"
The advantage of static map is that it is easy to custom and non-draggable. For instance when you scroll down and you accidentally press first on map card.
 
I choose map box for the following reasons:
 
     
  • Easy to sep it up with static image API playground
    •  
  • Already existing styles (light & dark) to fit to your theme.
    •  
  • Add many custom markers, I decided to represent my current location , home, and work.
    •  
  • Possibility to remove attribution and logo.
    •  
 
URL can be directly used inside a camera entity using dynamic markers as explain here
 
below is an example of the url I use for mapbox:
 
https://api.mapbox.com/styles/v1/mapbox/light-v10/static/pin-l-suitcase+f88927({{ state_attr('zone.work', 'longitude') }},{{ state_attr('zone.work', 'latitude') }}),pin-l-home+01C852({{ state_attr('zone.home', 'longitude') }},{{ state_attr('zone.home', 'latitude') }}),pin-l-m+3D5AFE({{ state_attr('device_tracker.mathieu_phone', 'longitude') }},{{ state_attr('device_tracker.mathieu_phone', 'latitude') }})/auto/466x200?attribution=false&logo=false&&access_token=YOUR_TOKEN\n
"},{"location":"usage/custom_cards/custom_card_ristou_person/#known-issues","title":"Known issues","text":""},{"location":"usage/custom_cards/custom_card_ristou_person/#map","title":"map","text":"
built in map is not always rendering properly. I observed 2 issues:
 
     
  • Not displaying if under sub stack like horizontal stack or vertical stack. another map has to be added somewhere else in the page. Github issue
    •  
  • In IOS (never tried with other devices) bottom corner radius is not taken into consideration
    •  
"},{"location":"usage/custom_cards/custom_card_ristou_person/#static-map","title":"Static map","text":"
Static map can be blurry if ratio does not fit card width. In my case I used developer tool to find out exact width of the card (which is 466px) and then I adjusted the height to my needs.
"},{"location":"usage/custom_cards/custom_card_ristou_person/#variables","title":"Variables","text":"Variable Default Required Notes entity \u2714\ufe0f person entity ulm_custom_card_ristou_use_entity_picture false \u274c If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false. ulm_custom_card_ristou_use_badge true \u274c Show a notification badge on the icon. if set to false and not sing entity picture, then icon will be dynamically displayed to (Home, Away, Known place, or CAR) ulm_custom_card_ristou_map_enable false \u274c Display built in map as a second row ulm_custom_card_ristou_map_aspect_ratio 16:5 \u274c Display built in map as a second row ulm_custom_card_ristou_map_hours_to_show 24 \u274c Display built in map as a second row ulm_custom_card_ristou_map_default_zoom 9 \u274c Display built in map as a second row ulm_custom_card_ristou_camera_entity_light \u274c Camera entity picture in light mode ulm_custom_card_ristou_camera_entity_dark \u274c Camera entity picture in dark mode ulm_custom_card_ristou_zones \u274c Used to display known zone on badge, icon, label or map ulm_custom_card_ristou_find_device_script \u274c Show a button to find your device"},{"location":"usage/custom_cards/custom_card_ristou_person/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_ristou_person\n  entity: person.mathieu\n  variables:\n    ulm_custom_card_ristou_use_entity_picture: true\n    ulm_custom_card_ristou_find_device_script: script.find_phone_mathieu\n    ulm_custom_card_ristou_person_driving_entity: binary_sensor.mathieu_driving\n    ulm_custom_card_ristou_camera_entity_light: \"camera.mapbox_mathieu_light\"\n    ulm_custom_card_ristou_camera_entity_dark: \"camera.mapbox_mathieu_dark\"\n    ulm_custom_card_ristou_zones:\n      - person.isabelle\n      - person.mathieu\n      - zone.work\n      - zone.judo\n      - zone.doctor\n      - zone.nounou\n      - zone.work_isabelle\n
"},{"location":"usage/custom_cards/custom_card_ristou_person/#template-code","title":"Template code","text":"Template Code custom_card_ristou_person.yaml
---\n### custom card ristou person ###\ncustom_card_ristou_person:\n  template:\n    - \"ulm_translation_engine\"\n    - \"ulm_custom_card_ristou_person_language_variables\"\n    - \"icon_more_info_new\"\n    - \"ulm_actions_card\"\n  variables:\n    ulm_custom_card_ristou_name: \"[[[ return entity.attributes.friendly_name ]]]\"\n    ulm_custom_card_ristou_icon: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_custom_card_ristou_use_entity_picture: false\n    ulm_custom_card_ristou_use_badge: true\n    ulm_custom_card_ristou_map_enable: false\n    ulm_custom_card_ristou_find_device_script: \"\"\n    ulm_custom_card_ristou_zones:\n    ulm_custom_card_ristou_person_driving_entity: \"\"\n    ulm_custom_card_ristou_map_aspect_ratio: \"466:200\"\n    ulm_custom_card_ristou_map_hours_to_show: 0\n    ulm_custom_card_ristou_map_default_zoom: 11\n    ulm_custom_card_ristou_camera_entity_light: \"\"\n    ulm_custom_card_ristou_camera_entity_dark: \"\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  triggers_update: \"all\"\n  styles:\n    grid:\n      - grid-template-areas: >\n          [[[\n            if (variables.ulm_custom_card_ristou_map_enable) {\n                return \"\\\"item1\\\" \\\"item3\\\"\";\n            } else if (\n              variables.ulm_custom_card_ristou_camera_entity_light !== \"\"\n              && variables.ulm_custom_card_ristou_camera_entity_dark !== \"\"\n            ) {\n                return \"\\\"item1\\\" \\\"item2\\\"\";\n            } else {\n              return \"\\\"item1\\\"\"\n            }\n          ]]]\n      - grid-template-columns: >\n          [[[\n\n            return \"1fr\";\n          ]]]\n      - grid-template-rows: >\n          [[[\n            return \"1fr\";\n          ]]]\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"0px\"\n    custom_fields:\n      item2:\n        - display: >\n            [[[\n              if (\n                variables.ulm_custom_card_ristou_camera_entity_light !== \"\"\n                && variables.ulm_custom_card_ristou_camera_entity_dark !== \"\"\n                && !variables.ulm_custom_card_ristou_map_enable\n              ) {\n                  return \"block\";\n              } else {\n                  return \"none\";\n              }\n            ]]]\n      item3:\n        - display: >\n            [[[\n              if (variables.ulm_custom_card_ristou_map_enable) {\n                  return \"block\";\n              } else {\n                  return \"none\";\n              }\n            ]]]\n  custom_fields:\n    item1:\n      ###############\n      ### 1ST ROW ###\n      ###############\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_more_info\"\n        styles:\n          grid:\n            - grid-template-areas: \"'item1 item2 item3'\"\n            - grid-template-columns: \"min-content 1fr auto\"\n            - grid-template-rows: \"min-content\"\n          custom_fields:\n            item3:\n              - display: >\n                  [[[\n                        if (variables.ulm_custom_card_ristou_find_device_script !== \"\") {\n                            return \"block\";\n                        } else {\n                            return \"none\";\n                        }\n                  ]]]\n        custom_fields:\n          ###################\n          ### PERSON ICON ###\n          ###################\n          item1:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              icon: >\n                [[[\n                  if (!variables.ulm_custom_card_ristou_use_badge) {\n                    var zones = variables.ulm_custom_card_ristou_zones;\n                    var person_location = entity.state;\n                    var driving_state = \"off\"\n                    if (variables.ulm_custom_card_ristou_person_driving_entity !== \"\") {\n                      driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;\n                    }\n                    if (driving_state === \"on\" || driving_state === \"true\") {\n                      return \"mdi:car\";\n                    } else {\n                      if (person_location !== 'home'){\n                          for (const item of zones){\n                            if (person_location == states[item]?.attributes?.friendly_name){\n                              var icon = (states[item].attributes.icon !== null) ? states[item].attributes.icon : 'mdi:help-circle';\n                              return icon ;\n                            } else if (person_location == 'not_home'){\n                              return \"mdi:home-minus\";\n                            }\n                          }\n                      } else{\n                        return \"mdi:home-variant\";\n                      }\n                    }\n                  } else {\n                    return  \"mdi:face-man\";\n                  }\n                ]]]\n              show_entity_picture: \"[[[ return variables.ulm_custom_card_ristou_use_entity_picture ]]]\"\n              entity_picture:\n                \"[[[ return variables.ulm_custom_card_ristou_use_entity_picture != false ? states[entity.entity_id].attributes.entity_picture\\\n                \\ : null ]]]\"\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                        if (!variables.ulm_custom_card_ristou_use_badge) {\n                          var zones = variables.ulm_custom_card_ristou_zones;\n                          var person_location = entity.state;\n                          var driving_state = \"off\"\n                          if (variables.ulm_custom_card_ristou_person_driving_entity !== \"\") {\n                            driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;\n                          }\n\n                          if (driving_state === \"on\" || driving_state === \"true\") {\n                            return 'rgba(var(--color-red),0.9)';\n                          } else {\n                            if (person_location !== 'home'){\n                              for (const item of zones){\n                                if (person_location == states[item]?.attributes?.friendly_name){\n                                  return 'rgba(var(--color-yellow),0.9)';\n                                } else if (person_location == 'not_home'){\n                                  return 'rgba(var(--color-blue),0.9)';\n                                }\n                              }\n                            } else{\n                              return 'rgba(var(--color-green),0.9)';\n                            }\n                          }\n                        } else {\n                          return \"rgba(var(--color-theme),0.9)\";\n                        }\n                      ]]]\n                  - width: >\n                      [[[\n                        if (variables.ulm_custom_card_ristou_use_entity_picture !== true){\n                          return \"20px\";\n                        } else {\n                          return \"42px\";\n                        }\n                      ]]]\n                  - place-self: >\n                      [[[\n                        if (variables.ulm_custom_card_ristou_use_entity_picture !== true){\n                          return \"center\";\n                        } else {\n                          return \"stretch stretch\";\n                        }\n                      ]]]\n                img_cell:\n                  - background-color: >\n                      [[[\n                        if (!variables.ulm_custom_card_ristou_use_badge) {\n                          var zones = variables.ulm_custom_card_ristou_zones;\n                          var person_location = entity.state;\n                          var driving_state = \"off\"\n                          if (variables.ulm_custom_card_ristou_person_driving_entity !== \"\") {\n                            driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;\n                          }\n                          if (driving_state === \"on\" || driving_state === \"true\") {\n                            return 'rgba(var(--color-red),0.2)';\n                          } else {\n                            if (person_location !== 'home'){\n                              for (const item of zones){\n                                if (person_location == states[item]?.attributes?.friendly_name){\n                                  return 'rgba(var(--color-yellow),0.2)';\n                                } else if (person_location == 'not_home'){\n                                  return 'rgba(var(--color-blue),0.2)';\n                                }\n                              }\n                            } else {\n                              return 'rgba(var(--color-green),0.2)';\n                            }\n                          }\n                        } else {\n                          return 'rgba(var(--color-theme),0.05)';\n                        }\n                      ]]]\n                card:\n                  - box-shadow: \"none\"\n                  - border-radius: \"var(--border-radius) var(--border-radius) 0px 0px\"\n                  - padding: \"12px 0px 12px 12px\"\n                custom_fields:\n                  notification:\n                    - border-radius: \"50%\"\n                    - position: \"absolute\"\n                    - left: \"38px\"\n                    - top: \"8px\"\n                    - height: \"16px\"\n                    - width: \"16px\"\n                    - border: \"2px solid var(--card-background-color)\"\n                    - font-size: \"12px\"\n                    - line-height: \"14px\"\n                    - background-color: >\n                        [[[\n                          var zones = variables.ulm_custom_card_ristou_zones;\n                          var person_location = entity.state;\n                          var driving_state = \"off\"\n                          if (variables.ulm_custom_card_ristou_person_driving_entity !== \"\") {\n                            driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;\n                          }\n                          if (driving_state === \"on\" || driving_state === \"true\") {\n                            return \"rgba(var(--color-red),1)\";\n                          } else {\n                            if (person_location !== 'home'){\n                              for (const item of zones){\n                                if (person_location == states[item]?.attributes?.friendly_name){\n                                  return \"rgba(var(--color-yellow),1)\";\n                                } else if (person_location == 'not_home'){\n                                  return \"rgba(var(--color-blue),1)\";\n                                }\n                              }\n                            } else{\n                              return \"rgba(var(--color-green),1)\";\n                            }\n                          }\n                        ]]]\n                    - display: >\n                        [[[\n                              if (variables.ulm_custom_card_ristou_use_badge) {\n                                  return \"block\";\n                              } else {\n                                  return \"none\";\n                              }\n                        ]]]\n              custom_fields:\n                notification: >\n                  [[[\n                    var zones = variables.ulm_custom_card_ristou_zones;\n                    var person_location = entity.state;\n                    var driving_state = \"off\"\n                    var icon = \"mdi:help-circle\"\n                    if (variables.ulm_custom_card_ristou_person_driving_entity !== \"\") {\n                      driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;\n                    }\n                    if (driving_state === \"on\" || driving_state === \"true\") {\n                      icon = 'mdi:car';\n                    } else {\n                      if (person_location !== 'home'){\n                        for (const item of zones){\n                          if (person_location == states[item]?.attributes?.friendly_name){\n                            icon = (states[item].attributes.icon !== null) ? states[item].attributes.icon : 'mdi:help-circle';\n                          } else if (person_location == 'not_home'){\n                            icon = 'mdi:home-minus';\n                          }\n                        }\n                      } else{\n                        icon = 'mdi:home-variant';\n                      }\n                    }\n                    return '<ha-icon icon=\"' + icon + '\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n                  ]]]\n          #####################\n          ### LABEL + STATE ###\n          #####################\n          item2:\n            card:\n              type: \"custom:button-card\"\n              entity: \"[[[ return entity.entity_id ]]]\"\n              name: \"[[[ return variables.ulm_custom_card_ristou_name ]]]\"\n              label: >-\n                [[[\n                  var location = entity.state\n                  var driving_state = \"off\"\n                  if (variables.ulm_custom_card_ristou_person_driving_entity !== \"\") {\n                    driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;\n                  }\n                  if (driving_state === \"on\" || driving_state === \"true\") {\n                    return variables.ulm_custom_card_ristou_person_driving;\n                  } else {\n                    let state = location;\n                    let option = [\"home\", \"not_home\", \"unavailable\", \"unknown\"]\n                    return (option.includes(state)) ? variables.ulm_translation_state : state\n                  }\n                ]]]\n          #####################\n          ### FIND MY PHONE ###\n          #####################\n          item3:\n            card:\n              template:\n                - \"icon_info_bg\"\n                - \"blue\"\n              show_name: false\n              show_label: false\n              type: \"custom:button-card\"\n              entity: \"[[[ return variables.ulm_custom_card_ristou_find_device_script ]]]\"\n              icon: \"[[[ return variables.ulm_custom_card_ristou_icon ]]]\"\n              tap_action:\n                action: \"toggle\"\n              styles:\n                card:\n                  - box-shadow: \"none\"\n                  - border-radius: \"var(--border-radius)\"\n                  - padding: \"12px\"\n    ###############\n    ### 2ND ROW ###\n    ###############\n    item2:\n      ##################\n      ### STATIC MAP ###\n      ##################\n      card:\n        type: \"picture-entity\"\n        show_state: false\n        show_name: false\n        camera_view: \"auto\"\n        entity: >-\n          [[[\n              if (hass.themes.darkMode) {\n                return variables.ulm_custom_card_ristou_camera_entity_dark;\n              } else {\n                return variables.ulm_custom_card_ristou_camera_entity_light;\n              }\n          ]]]\n        style:\n          .: |\n            ha-card {\n              box-shadow: none;\n              border-radius: 0px 0px var(--border-radius) var(--border-radius);\n            }\n    item3:\n      ###################\n      ### BUILTIN MAP ###\n      ###################\n      card:\n        type: \"map\"\n        default_zoom: \"[[[ return variables.ulm_custom_card_ristou_map_default_zoom ]]]\"\n        aspect_ratio: \"[[[ return variables.ulm_custom_card_ristou_map_aspect_ratio ]]]\"\n        hours_to_show: \"[[[ return variables.ulm_custom_card_ristou_map_hours_to_show ]]]\"\n        entities: \"[[[ return variables.ulm_custom_card_ristou_zones ]]]\"\n        style:\n          ha-map$: |\n            .leaflet-control-attribution {\n              visibility: hidden;\n            }\n            .leaflet-control-zoom {\n              visibility: hidden;\n            }\n          .: |\n            ha-card {\n              box-shadow: none;\n              border-radius: 0px 0px var(--border-radius) var(--border-radius);\n            }\n
"},{"location":"usage/custom_cards/custom_card_saxel_fan/","title":"Fan Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_saxel_fan/#custom-card-fan","title":"Custom-card \"Fan\"","text":"
This is a custom card to control a fan. It allows you to turn on/off the fan, adjusting the fan speed with a slider, and turn on/off oscillation. Two styles are available:
 Template Description custom_card_saxel_fan Follows the standard theme of UI-Lovelace-Minimalist custom_card_saxel_fan_blue Card is theme based when the fan is OFF, Blue when the fan is ON"},{"location":"usage/custom_cards/custom_card_saxel_fan/#light-theme","title":"Light theme","text":""},{"location":"usage/custom_cards/custom_card_saxel_fan/#dark-theme","title":"Dark theme","text":""},{"location":"usage/custom_cards/custom_card_saxel_fan/#credits","title":"Credits","text":"
Author: saxel - 2021 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_saxel_fan/#changelog","title":"Changelog","text":"1.0.0   Initial release"},{"location":"usage/custom_cards/custom_card_saxel_fan/#requirements","title":"Requirements","text":"
This card needs the following to function correctly:
 Component / card Required Note My Cards yes Card Mod yes"},{"location":"usage/custom_cards/custom_card_saxel_fan/#usage","title":"Usage","text":""},{"location":"usage/custom_cards/custom_card_saxel_fan/#standard","title":"Standard","text":"
- type: custom:button-card\n  template: custom_card_saxel_fan_blue\n  entity: fan.smart_fan\n  name: Fan\n  variables:\n    collapsible: false\n    oscillate_attribute: oscillate\n
"},{"location":"usage/custom_cards/custom_card_saxel_fan/#blue","title":"Blue","text":"
- type: custom:button-card\n  template: custom_card_saxel_fan\n  entity: fan.smart_fan\n  name: Fan\n  variables:\n    collapsible: true\n    oscillate_attribute: oscillate\n
"},{"location":"usage/custom_cards/custom_card_saxel_fan/#variables","title":"Variables","text":"Variable Example Required Explanation entity fan.smart_fan yes Fan entity name Fan no Name to show. If not specified the attribute friendly_name is shown instead collapsible true no true/false if the fan speed row should collapse when the fan is turned off. Default: true ulm_card_fan_horizontal true no Single Line Horizontal Control. Collapsible MUST be false for this currently. Default: false ulm_show_button false no Set to false to remove the Button and have a full width Slider. Default: true ulm_button_icon mdi:button no Set the icon for the Button. Default: mdi:rotate-3d-variant ulm_button_service fan.toggle no Name of the Service Call on button press. Default: fan.oscillate oscillate_attribute oscillate no Name of the oscillate attribute of the fan entity. Default: oscillate"},{"location":"usage/custom_cards/custom_card_scenes/","title":"Scenes Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_scenes/#custom-card-scenes-card","title":"Custom-card \"Scenes Card\"","text":"
The card_scenes you can control up to 5 entity such as scene, script or automation.
 
"},{"location":"usage/custom_cards/custom_card_scenes/#credits","title":"CreditsBreaking changes","text":"
Author: sildehoop - 2021 Version: 1.2.0
 1.2.0 
#OLD\n- type: \"custom:button-card\"\n template:\n   - card_scenes\n variables:\n   entity_1: \"scene.YOUR_SCENE\"\n   entity_2: \"scene.YOUR_SCENE\"\n   entity_3: \"scene.YOUR_SCENE\"\n   entity_4: \"scene.YOUR_SCENE\"\n   entity_5: \"scene.YOUR_SCENE\"\n   name_1: \"YOUR_NAME\"\n   name_2: \"YOUR_NAME\"\n   name_3: \"YOUR_NAME\"\n   name_4: \"YOUR_NAME\"\n   name_5: \"YOUR_NAME\"\n   icon_1: \"mdi:YOUR_ICON\"\n   icon_2: \"mdi:YOUR_ICON\"\n   icon_3: \"mdi:YOUR_ICON\"\n   icon_4: \"mdi:YOUR_ICON\"\n   icon_5: \"mdi:YOUR_ICON\"\n   icon_color_1: \"yellow\"\n   icon_color_2: \"blue\"\n   icon_color_3: \"purple\"\n   icon_color_4: \"green\"\n   icon_color_5: \"red\"\n   bg_color_1: \"yellow\"\n   bg_color_2: \"blue\"\n   bg_color_3: \"purple\"\n   bg_color_4: \"green\"\n   bg_color_5: \"red\"\n
 
#NEW\n- type: \"custom:button-card\"\n template:\n   - card_scenes\n variables:\n   entity_1:\n     entity_id: \"scene.YOUR_SCENE\"\n     icon: \"mdi:YOUR_ICON\"\n     icon_color: \"yellow\"\n     name: \"YOUR_NAME\"\n     bg_color: \"yellow\"\n   entity_2:\n     entity_id: \"scene.YOUR_SCENE\"\n     icon: \"mdi:YOUR_ICON\"\n     icon_color: \"blue\"\n     name: \"YOUR_NAME\"\n     bg_color: \"blue\"\n   entity_3:\n     entity_id: \"scene.YOUR_SCENE\"\n     icon: \"mdi:YOUR_ICON\"\n     icon_color: \"purple\"\n     name: \"YOUR_NAME\"\n     bg_color: \"purple\"\n   entity_4:\n     entity_id: \"scene.YOUR_SCENE\"\n     icon: \"mdi:YOUR_ICON\"\n     icon_color: \"green\"\n     name: \"YOUR_NAME\"\n     bg_color: \"green\"\n   entity_5:\n     entity_id: \"scene.YOUR_SCENE\"\n     icon: \"mdi:YOUR_ICON\"\n     icon_color: \"red\"\n     name: \"YOUR_NAME\"\n     bg_color: \"red\"\n
"},{"location":"usage/custom_cards/custom_card_scenes/#changelog","title":"Changelog","text":"1.3.0 Option to trigger automation  1.2.0 Implementation of nested variables  1.1.0 Auto dark mode box shadow  1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_scenes/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template:\n    - card_scenes\n  variables:\n    entity_1:\n      entity_id: \"scene.YOUR_SCENE\"\n      icon: \"mdi:YOUR_ICON\"\n      icon_color: \"yellow\"\n      name: \"YOUR_NAME\"\n      bg_color: \"yellow\"\n    entity_2:\n      entity_id: \"scene.YOUR_SCENE\"\n      icon: \"mdi:YOUR_ICON\"\n      icon_color: \"blue\"\n      name: \"YOUR_NAME\"\n      bg_color: \"blue\"\n    entity_3:\n      entity_id: \"scene.YOUR_SCENE\"\n      icon: \"mdi:YOUR_ICON\"\n      icon_color: \"purple\"\n      name: \"YOUR_NAME\"\n      bg_color: \"purple\"\n    entity_4:\n      entity_id: \"scene.YOUR_SCENE\"\n      icon: \"mdi:YOUR_ICON\"\n      icon_color: \"green\"\n      name: \"YOUR_NAME\"\n      bg_color: \"green\"\n    entity_5:\n      entity_id: \"scene.YOUR_SCENE\"\n      icon: \"mdi:YOUR_ICON\"\n      icon_color: \"red\"\n      name: \"YOUR_NAME\"\n      bg_color: \"red\"\n
"},{"location":"usage/custom_cards/custom_card_scenes/#requirements","title":"Requirements","text":"
n/a
"},{"location":"usage/custom_cards/custom_card_scenes/#variables","title":"Variables","text":"Variable Example Required Explanation entity_ scene.evening_light yes Your scene entity name_ Night yes The name to show icon_ mdi:weather-night yes The icon to show color_icon_ yellow, blue, purple, green, red no The color of the icon to show color_bg_ yellow, blue, purple, green, red no The color of the icon background to show"},{"location":"usage/custom_cards/custom_card_scenes/#template-code","title":"Template code","text":"Template Code custom_card_scenes.yaml
---\ncard_scenes:\n  show_icon: false\n  show_name: false\n  show_label: false\n  variables:\n    entity_1:\n      entity_id:\n      icon: \"mdi:help-circle-outline\"\n      icon_color: \"gray\"\n      name: \"n/a\"\n      bg_color: \"gray\"\n    entity_2:\n      entity_id:\n      icon: \"mdi:help-circle-outline\"\n      icon_color: \"gray\"\n      name: \"n/a\"\n      bg_color: \"gray\"\n    entity_3:\n      entity_id:\n      icon: \"mdi:help-circle-outline\"\n      icon_color: \"gray\"\n      name: \"n/a\"\n      bg_color: \"gray\"\n    entity_4:\n      entity_id:\n      icon: \"mdi:help-circle-outline\"\n      icon_color: \"gray\"\n      name: \"n/a\"\n      bg_color: \"gray\"\n    entity_5:\n      entity_id:\n      icon: \"mdi:help-circle-outline\"\n      icon_color: \"gray\"\n      name: \"n/a\"\n      bg_color: \"gray\"\n  styles:\n    grid:\n      - grid-template-areas: \"'item1 item2 item3 item4 item5'\"\n      - grid-template-columns: \"1fr 1fr 1fr 1fr 1fr\"\n      - grid-template-rows: \"min-content\"\n      - justify-items: \"center\"\n      - column-gap: \"auto\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill\"\n        entity: \"[[[ return variables.entity_1.entity_id ]]]\"\n        icon: \"[[[ return variables.entity_1.icon ]]]\"\n        name: \"[[[ return variables.entity_1.name ]]]\"\n        variables:\n          color_icon: \"[[[ return variables.entity_1.icon_color ]]]\"\n          color_bg: \"[[[ return variables.entity_1.bg_color ]]]\"\n        tap_action:\n          action: \"perform-action\"\n          perform_action: |\n            [[[\n              let domain = variables.entity_1.entity_id.substr(0, variables.entity_1.entity_id.indexOf(\".\"));\n              if (domain == \"automation\") {\n                return \"automation.trigger\"\n              } else {\n                return \"homeassistant.turn_on\"\n              }\n            ]]]\n          target:\n            entity_id: \"[[[ return variables.entity_1.entity_id ]]]\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill\"\n        entity: \"[[[ return variables.entity_2.entity_id ]]]\"\n        icon: \"[[[ return variables.entity_2.icon ]]]\"\n        name: \"[[[ return variables.entity_2.name ]]]\"\n        variables:\n          color_icon: \"[[[ return variables.entity_2.icon_color ]]]\"\n          color_bg: \"[[[ return variables.entity_2.bg_color ]]]\"\n        tap_action:\n          action: \"perform-action\"\n          perform_action: |\n            [[[\n              let domain = variables.entity_2.entity_id.substr(0, variables.entity_2.entity_id.indexOf(\".\"));\n              if (domain == \"automation\") {\n                return \"automation.trigger\"\n              } else {\n                return \"homeassistant.turn_on\"\n              }\n            ]]]\n          target:\n            entity_id: \"[[[ return variables.entity_2.entity_id ]]]\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill\"\n        entity: \"[[[ return variables.entity_3.entity_id ]]]\"\n        icon: \"[[[ return variables.entity_3.icon ]]]\"\n        name: \"[[[ return variables.entity_3.name ]]]\"\n        variables:\n          color_icon: \"[[[ return variables.entity_3.icon_color ]]]\"\n          color_bg: \"[[[ return variables.entity_3.bg_color ]]]\"\n        tap_action:\n          action: \"perform-action\"\n          perform_action: |\n            [[[\n              let domain = variables.entity_3.entity_id.substr(0, variables.entity_3.entity_id.indexOf(\".\"));\n              if (domain == \"automation\") {\n                return \"automation.trigger\"\n              } else {\n                return \"homeassistant.turn_on\"\n              }\n            ]]]\n          target:\n            entity_id: \"[[[ return variables.entity_3.entity_id ]]]\"\n    item4:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill\"\n        entity: \"[[[ return variables.entity_4.entity_id ]]]\"\n        icon: \"[[[ return variables.entity_4.icon ]]]\"\n        name: \"[[[ return variables.entity_4.name ]]]\"\n        variables:\n          color_icon: \"[[[ return variables.entity_4.icon_color ]]]\"\n          color_bg: \"[[[ return variables.entity_4.bg_color ]]]\"\n        tap_action:\n          action: \"perform-action\"\n          perform_action: |\n            [[[\n              let domain = variables.entity_4.entity_id.substr(0, variables.entity_4.entity_id.indexOf(\".\"));\n              if (domain == \"automation\") {\n                return \"automation.trigger\"\n              } else {\n                return \"homeassistant.turn_on\"\n              }\n            ]]]\n          target:\n            entity_id: \"[[[ return variables.entity_4.entity_id ]]]\"\n    item5:\n      card:\n        type: \"custom:button-card\"\n        template: \"card_scenes_pill\"\n        entity: \"[[[ return variables.entity_5.entity_id ]]]\"\n        icon: \"[[[ return variables.entity_5.icon ]]]\"\n        name: \"[[[ return variables.entity_5.name ]]]\"\n        variables:\n          color_icon: \"[[[ return variables.entity_5.icon_color ]]]\"\n          color_bg: \"[[[ return variables.entity_5.bg_color ]]]\"\n        tap_action:\n          action: \"perform-action\"\n          perform_action: |\n            [[[\n              let domain = variables.entity_5.entity_id.substr(0, variables.entity_5.entity_id.indexOf(\".\"));\n              if (domain == \"automation\") {\n                return \"automation.trigger\"\n              } else {\n                return \"homeassistant.turn_on\"\n              }\n            ]]]\n          target:\n            entity_id: \"[[[ return variables.entity_5.entity_id ]]]\"\n\ncard_scenes_pill:\n  show_icon: true\n  show_label: false\n  show_name: true\n  variables:\n    color_icon: \"gray\"\n    color_bg: \"gray\"\n  styles:\n    grid:\n      - grid-template-areas: \"'i' 'n'\"\n      - grid-template-columns: \"min-content\"\n      - grid-template-rows: \"1fr 1fr\"\n      - row-gap: \"12px\"\n      - justify-items: \"center\"\n      - column-gap: \"auto\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"5px\"\n      - box-shadow: >\n          [[[\n            if (hass.themes.darkMode){\n              return \"0px 2px 4px 0px rgba(0,0,0,0.80)\";\n            } else {\n              return \"var(--box-shadow)\";\n            }\n          ]]]\n      - border-radius: \"50px\"\n      - place-self: \"center\"\n      - width: \"52px\"\n      - height: \"84px\"\n    icon:\n      - color: >\n          [[[\n            var color = [variables.color_icon];\n            if (color == \"gray\"){\n              var color = \"rgba(var(--color-theme),0.20)\";\n            } else if(color == \"yellow\"){\n              var color = \"rgba(var(--color-yellow),1)\";\n            } else if(color == \"blue\"){\n              var color = \"rgba(var(--color-blue),1)\";\n            } else if(color == \"purple\"){\n              var color = \"rgba(var(--color-purple),1)\";\n            } else if(color == \"green\"){\n              var color = \"rgba(var(--color-green),1)\";\n            } else if(color == \"red\"){\n              var color = \"rgba(var(--color-red),1)\";\n            }\n            return color;\n          ]]]\n    img_cell:\n      - background-color: >\n          [[[\n            var color = [variables.color_bg];\n            if (color == \"gray\"){\n              var color = \"rgba(var(--color-theme),0.05)\";\n            } else if(color == \"yellow\"){\n              var color = \"rgba(var(--color-yellow),0.20)\";\n            } else if(color == \"blue\"){\n              var color = \"rgba(var(--color-blue),0.20)\";\n            } else if(color == \"purple\"){\n              var color = \"rgba(var(--color-purple),0.20)\";\n            } else if(color == \"green\"){\n              var color = \"rgba(var(--color-green),0.20)\";\n            } else if(color == \"red\"){\n              var color = \"rgba(var(--color-red),0.20)\";\n            }\n            return color;\n          ]]]\n      - border-radius: \"50%\"\n      - width: \"42px\"\n      - height: \"42px\"\n    name:\n      - font-weight: \"bold\"\n      - font-size: \"9.5px\"\n      - width: \"33px\"\n      - padding-bottom: \"7px\"\n    state:\n      - color: \"rgba(var(--color-theme),0.9)\"\n  color: \"var(--google-grey)\"\n
"},{"location":"usage/custom_cards/custom_card_schumijo_car/","title":"Car Custom-card","text":""},{"location":"usage/custom_cards/custom_card_schumijo_car/#custom-card-car","title":"Custom-card \"Car\"","text":"
This is a custom-card to information about your car.
 
 
NB : This card has only been tested with Audi Connect integration but should work with some others.
"},{"location":"usage/custom_cards/custom_card_schumijo_car/#credits","title":"Credits","text":"
Author: schumijo - 2021 Version: 1.0.0
"},{"location":"usage/custom_cards/custom_card_schumijo_car/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_schumijo_car/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: custom_card_schumijo_car\n  variables:\n    ulm_card_schumijo_car_name: \"Audi Q3\"\n    ulm_card_schumijo_car_tracker: device_tracker.audi_q3_position\n    ulm_card_schumijo_car_lock: lock.audi_q3_door_lock\n    ulm_card_schumijo_car_energy_level: sensor.audi_q3_tank_level\n    ulm_card_schumijo_car_range: sensor.audi_q3_range\n
"},{"location":"usage/custom_cards/custom_card_schumijo_car/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_card_schumijo_car_name Audi Q3 yes The name of your car ulm_card_schumijo_car_tracker device_tracker.audi_q3_position yes A device_tracker entity of your car ulm_card_schumijo_car_lock lock.audi_q3_door_lock yes A lock entity of your car ulm_card_schumijo_car_energy_level sensor.audi_q3_tank_level yes A sensor entity that represents energy level of your car (can be fuel or electric) ulm_card_schumijo_car_range sensor.audi_q3_range yes A sensor entity that represents range of your car"},{"location":"usage/custom_cards/custom_card_schumijo_car/#template-code","title":"Template code","text":"Template Code custom_card_schumijo_car.yaml
---\nwidget_icon_state:\n  tap_action:\n    action: \"none\"\n  layout: \"icon_state\"\n  show_state: true\n  show_units: false\n  styles:\n    grid:\n      - grid-template-areas: \"'i s' 'n n'\"\n      - grid-template-columns: \"45% 55%\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - background-color: \"rgba(var(--color-theme),0.05)\"\n      - border-radius: \"14px\"\n      - place-self: \"center\"\n      - height: \"42px\"\n    name:\n      - font-weight: \"bold\"\n      - font-size: \"10px\"\n      - filter: \"opacity(40%)\"\n      - margin-bottom: \"2px\"\n    state:\n      - justify-self: \"start\"\n      - margin-left: \"5px\"\n      - font-size: \"18px\"\n      - font-weight: 600\n    icon:\n      - color: \"rgba(var(--color-theme),0.9)\"\n    img_cell:\n      - justify-content: \"right\"\n  size: \"20px\"\n  color: \"var(--google-grey)\"\n\ncar:\n  template:\n    - \"icon_info\"\n  tap_action:\n    action: \"more-info\"\n  show_name: true\n  show_last_changed: true\n  name: \"[[[ return variables.ulm_card_schumijo_car_name ]]]\"\n  entity: \"[[[ return entity.entity_id ]]]\"\n  icon: \"mdi:car\"\n  styles:\n    icon:\n      - color: \"rgba(var(--color-theme),0.9)\"\n      - width: \"20px\"\n      - place-self: \"center\"\n    custom_fields:\n      tracker:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"30px\"\n        - top: \"-2px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: >\n            [[[\n              if (states[variables.ulm_card_schumijo_car_tracker].state != 'home'){\n                return \"rgba(var(--color-green),1)\";\n              } else {\n                return \"rgba(var(--color-blue),1)\";\n              }\n            ]]]\n      lock:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - left: \"30px\"\n        - top: \"24px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: >\n            [[[\n              if (states[variables.ulm_card_schumijo_car_lock].state != 'locked'){\n                return \"rgba(var(--color-red),1)\";\n              } else {\n                return \"rgba(var(--color-blue),1)\";\n              }\n            ]]]\n  custom_fields:\n    tracker: >\n      [[[\n        if (states[variables.ulm_card_schumijo_car_tracker].state != 'home'){\n          return '<ha-icon icon=\"mdi:road-variant\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        } else {\n          return '<ha-icon icon=\"mdi:home-variant\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        }\n      ]]]\n    lock: >\n      [[[\n        if (states[variables.ulm_card_schumijo_car_lock].state != 'locked'){\n          return '<ha-icon icon=\"mdi:lock-open\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        } else {\n          return '<ha-icon icon=\"mdi:lock\" style=\"width: 10px; height: 10px; color: var(--primary-background-color);\"></ha-icon>';\n        }\n      ]]]\n\nulm_custom_card_schumijo_ca_popup:\n  tap_action:\n    action: \"fire-dom-event\"\n    browser_mod:\n      service: \"browser_mod.popup\"\n      data:\n        size: >\n          [[[\n            const mediaQuery = window.matchMedia('(max-width: 800px)')\n            if (mediaQuery.matches) {\n              return 'fullscreen'\n            }\n          ]]]\n        title: \"Map\"\n        style:\n          $: >\n            [[[\n              if (hass.themes.theme.includes(\"desktop\")){\n                var dialog = `\n                  .mdc-dialog__surface{\n                    border-radius: var(--border-radius) !important;\n                  }\n                `;\n              } else{\n                var dialog = \"\";\n              }\n              return `\n                *{\n                  --secondary-background-color: none !important;\n                }\n                ${dialog}\n              `;\n            ]]]\n          hui-vertical-stack-card:\n            $: >\n              button-card {\n                align-self: center;\n                padding: 0.2em 0 2.3em 0;\n              }\n              hui-entities-card{\n                padding: 0.8em 1.4em;\n              }\n            $hui-entities-card$: >\n              ha-card{\n                box-shadow: none;\n              }\n            $hui-history-graph-card$: >\n              .content {\n                padding: 0 2.4em !important;\n              }\n              ha-card{\n                box-shadow: none;\n              }\n            $hui-glance-card$: >\n              ha-card{\n                box-shadow: none;\n              }\n            $hui-map-card:\n              $: >\n                ha-icon-button {\n                  color: rgba(var(--color-blue),1);\n                }\n              $ha-map:\n                $: >\n                  .leaflet-control-attribution {\n                    display: none;\n                  }\n                  .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {\n                    border: 2px solid rgba(var(--color-blue),0.4) !important;\n                  }\n                  .leaflet-bar a {\n                    background-color: rgba(var(--color-blue),0.2) !important;\n                    color: rgba(var(--color-blue),1) !important;\n                  }\n                  .leaflet-bar a:first-child {\n                    border-bottom: 2px solid rgba(var(--color-blue),0.4) !important;\n                  }\n                  .leaflet-pane.leaflet-tile-pane {\n                    filter: contrast(95%);\n                  }\n        content:\n          type: \"map\"\n          aspect_ratio: \"12:10\"\n          default_zoom: 16\n          entities: \"[[[ return [variables.ulm_card_schumijo_car_tracker]; ]]]\"\n\ncustom_card_schumijo_car:\n  template:\n    - \"ulm_custom_card_schumijo_car_language_variables\"\n  variables:\n    ulm_card_schumijo_car_name: \"n/a\"\n  show_icon: false\n  show_name: false\n  show_label: false\n  styles:\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"car\"\n          - \"ulm_custom_card_schumijo_ca_popup\"\n        entity: \"[[[ return variables.ulm_card_schumijo_car_tracker ]]]\"\n        variables:\n          ulm_card_schumijo_car_tracker: \"[[[ return variables.ulm_card_schumijo_car_tracker ]]]\"\n          ulm_card_schumijo_car_name: \"[[[ return variables.ulm_card_schumijo_car_name ]]]\"\n          ulm_card_schumijo_car_lock: \"[[[ return variables.ulm_card_schumijo_car_lock ]]]\"\n    item2:\n      card:\n        template: \"list_2_items\"\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon_state\"\n              entity: \"[[[ return variables.ulm_card_schumijo_car_energy_level ]]]\"\n              state_display: >\n                [[[\n                  return parseFloat(states[variables.ulm_card_schumijo_car_energy_level].state).toFixed(0);\n                ]]]\n              name:\n                \"[[[ return states[variables.ulm_card_schumijo_car_energy_level].attributes.unit_of_measurement + ' ' + variables.ulm_custom_card_schumijo_car_energy_level\\\n                \\ ]]]\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon_state\"\n              entity: \"[[[ return variables.ulm_card_schumijo_car_range ]]]\"\n              state_display: >\n                [[[\n                  return parseFloat(states[variables.ulm_card_schumijo_car_range].state).toFixed(0);\n                ]]]\n              name:\n                \"[[[ return states[variables.ulm_card_schumijo_car_range].attributes.unit_of_measurement + ' ' + variables.ulm_custom_card_schumijo_car_range\\\n                \\ ]]]\"\n
"},{"location":"usage/custom_cards/custom_card_schumijo_flower/","title":"Flower Custom-card","text":""},{"location":"usage/custom_cards/custom_card_schumijo_flower/#custom-card-flower","title":"Custom-card \"Flower\"","text":"
This is a custom-card to display a plant entity. Shows state of the plant and attributes.
 
"},{"location":"usage/custom_cards/custom_card_schumijo_flower/#credits","title":"Credits","text":"
     
  • Author: schumijo - 2021
    •  
  • Update 2.0.0 : Ashino - 2024
    •  
  • Version: 2.0.0
    •  
"},{"location":"usage/custom_cards/custom_card_schumijo_flower/#changelog","title":"Changelog","text":"1.0.0 Initial release  1.1.0 Fix language files for beta5 Updated README  2.0.0 Add support to lovelace-flower-card from Olen (advanced forked version) Updated README"},{"location":"usage/custom_cards/custom_card_schumijo_flower/#usage","title":"Usage","text":"
- type: \"custom:button-card\"\n  template: card_flower\n  variables:\n    ulm_card_flower_entity: plant.bonsai_ficus\n    ulm_card_flower_name: Bonsai Ficus\n    ulm_card_flower_species: \"ficus retusa\"\n    ulm_card_flower_show_bars:\n        - temperature\n        - humidity\n        - moisture\n
"},{"location":"usage/custom_cards/custom_card_schumijo_flower/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_card_flower_entity plant.bonsai_ficus yes The entity of your plant ulm_card_flower_name Bonsai Ficus no The name of your plant ulm_card_flower_species \"ficus retusa\" yes The species of your plant ulm_card_flower_show_bars  - temperature  - moisture  - humidity  no The bar you want to display. Any of : 
  • illuminance
    •  
  • humidity
    •  
  • moisture
    •  
  • conductivity
    •  
  • temperature
    •  
  • dli
    • "},{"location":"usage/custom_cards/custom_card_schumijo_flower/#requirements","title":"Requirements","text":"
    Need lovelace-flower-card
    "},{"location":"usage/custom_cards/custom_card_schumijo_flower/#template-code","title":"Template code","text":"Template Code custom_card_schumijo_flower.yaml
    ---\nlist_1_item:\n  styles:\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n    grid:\n      - grid-template-areas: \"'item1'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content\"\n      - column-gap: \"7px\"\n\nflower:\n  template:\n    - \"ulm_custom_card_schumijo_flower_language_variables\"\n  tap_action:\n    action: \"more-info\"\n  icon: |\n    [[[\n        var icon = 'mdi:flower';\n        if (entity.state == 'problem'){\n          var icon = 'mdi:alert-circle';\n        }\n        return icon ;\n    ]]]\n  label: >-\n    [[[\n        if (entity.state == 'problem'){\n          return variables.ulm_custom_card_schumijo_flower_problem;\n        }else{\n          return variables.ulm_custom_card_schumijo_flower_correct;\n        }\n    ]]]\n  state:\n    - operator: \"template\"\n      value: >\n        [[[\n          return entity.state != 'on';\n        ]]]\n      styles:\n        icon:\n          - color: \"rgba(var(--color-green),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-green),0.2)\"\n\ncard_flower:\n  variables:\n    ulm_card_flower_name: \"No name set\"\n  styles:\n    card:\n      - border-radius: \"20px\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n    grid:\n      - grid-template-areas: \"'item1' 'item2'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content  min-content\"\n      - row-gap: \"6px\"\n  custom_fields:\n    item1:\n      card:\n        entity: \"[[[ return variables.ulm_card_flower_entity ]]]\"\n        name: \"[[[ return variables.ulm_card_flower_name ]]]\"\n        tap_action:\n          action: \"more-info\"\n        template:\n          - \"icon_info\"\n          - \"flower\"\n        type: \"custom:button-card\"\n    item2:\n      card:\n        template: \"list_1_item\"\n        type: \"custom:button-card\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:flower-card\"\n              entity: \"[[[ return variables.ulm_card_flower_entity ]]]\"\n              species: \"[[[ return variables.ulm_card_flower_species ]]]\"\n              show_bars: \"[[[ return variables.ulm_card_flower_show_bars ]]]\"\n              card_mod:\n                style: |\n                  ha-card{\n                    margin-top: 0px !important;\n                    box-shadow: none !important;\n                    --mdc-icon-size: 16px !important;\n                  }\n                  .header{\n                    display: none !important;\n                  }\n                  .divider{\n                    display: none !important;\n                  }\n                  .value{\n                    display: none !important;\n                  }\n                  .attributes{\n                    padding: 0px !important;\n                  }\n                  .attribute ha-icon {\n                      margin-right: 0px !important;\n                  }\n
    "},{"location":"usage/custom_cards/custom_card_sisimomo_printer/","title":"Printer Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#custom-card-printer","title":"Custom-card \"Printer\"","text":"
    This is the custom_card_sisimomo_printer, used to show the state of a printer including, if wanted, ink sensors. The card has support any number of ink sensors under the state of the printer. These can be configured using custom colors and labels.
    "},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#credits","title":"Credits","text":"
    Author: Sisimomo (based on hiddevanbrussel pictures) Version: 0.1.0
     
    Contributors:
     
       
    • ByteFloater Version 0.2.0
      •  
    "},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#changelog","title":"Changelog","text":"0.1.0 - Initial Release  - Initial release   0.2.0 - Added additional cases  - Added support for other cartridge types (tricolor) - Added further error checking for previously uncaught states - Added support for the IPP 'unavailable' state - Added CSS for better theming of error screens - Added card string translation files - Changed `text-transform` of label to capitalize - Changed `ulm_unavailable` to `ulm_translation_unavailable` - Removed some unnecessary inline stylings - Fixed the handling of unavailable and idle state styling"},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#card-options","title":"Card options","text":"Options Required Description entity The entity_id for the large card"},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#variables","title":"Variables","text":"Variable Required Description printer_name The chosen display name of the printer.  If not provided, will use the friendly name of the provided entity. cartridges A list of  Cartridge entity objects. (See below)"},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#cartridge-entity","title":"Cartridge entity","text":"Variable Required Description Requirement label The label for the ink sensor. For better aesthetic, keep this string short eg: \"BK\", \"Y\", \"M\", \"C\", \"PB\" entity_id The entity_id of the ink sensor Must be a value between 0-100 (percentage). type The type of cartridge associated with the ink sensor Must be either 'unicolor' or 'tricolor'.  If not provided, 'unicolor' is assumed for backwards compatibility. color The color of the ink bar For unicolor cartridges, must be a single CSS Legal Color Value. For tricolor cartridges, 3 colours are required. (See usage for more info)"},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#usage","title":"Usage","text":""},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#unicolor-printers","title":"Unicolor Printers","text":"
    - type: \"custom:button-card\"\n  template: \"custom_card_sisimomo_printer\"\n  entity: sensor.hp_printer_status\n  variables:\n    printer_name: HP LaserJet MFP M28w\n    cartridges:\n      - label: \"BK\"\n        entity_id: sensor.printer_black_ink\n        type: unicolor\n        color: \"black\"\n      - label: \"B\"\n        entity_id: sensor.printer_photo_black_ink\n        type: unicolor\n        color: \"black\"\n      - label: \"Y\"\n        entity_id: sensor.printer_yellow_ink\n        type: unicolor\n        color: \"rgba(var(--color-yellow), 1)\"\n      - label: \"M\"\n        entity_id: sensor.printer_magenta_ink\n        type: unicolor\n        color: \"#F84B7A\"\n      - label: \"C\"\n        entity_id: sensor.printer_cyan_ink\n        type: unicolor\n        color: \"#427EDE\"\n      - label: \"PB\"\n        entity_id: sensor.printer_photo_blue_ink\n        type: unicolor\n        color: \"#9272BE\"\n
    "},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#tricolor-printers","title":"Tricolor Printers","text":"
    - type: \"custom:button-card\"\n  template: custom_card_sisimomo_printer\n  entity: sensor.canon_mg3600_series\n  variables:\n    ulm_card_printer_name: Canon MG3650\n    cartridges:\n      - label: \"Col\"\n        entity_id: sensor.canon_mg3600_series_black\n        type: tricolor\n        color:\n          - cyan\n          - magenta\n          - yellow\n      - label: \"BK\"\n        entity_id: sensor.canon_mg3600_series_black\n        type: unicolor\n        color: black\n
    "},{"location":"usage/custom_cards/custom_card_sisimomo_printer/#template-code","title":"Template code","text":"Template Code custom_card_sisimomo_printer.yaml
    ---\ncustom_card_sisimomo_printer:\n  template:\n    - \"ulm_translation_engine\"\n    - \"ulm_language_variables\"\n  variables:\n    printer_name: \"[[[ entity.attributes.friendly_name; ]]]\"\n    ulm_idle: \"idle\"\n  show_icon: false\n  show_label: false\n  show_name: false\n  triggers_update: \"all\"\n  tap_action:\n    action: \"\"\n  styles:\n    grid:\n      - grid-template-areas: \"'printer_state' 'cartridges'\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n      - \"--mdc-ripple-press-opacity\": 0\n      - cursor: \"default\"\n  custom_fields:\n    printer_state:\n      card:\n        type: \"custom:button-card\"\n        template: |\n          [[[\n            return (\n              entity.state.toLowerCase() != variables.ulm_idle.toLowerCase()\n              && entity.state.toLowerCase() != variables.ulm_translation_unavailable.toLowerCase()\n              ? [ \"icon_info\", \"blue_no_state\" ] : [ \"icon_info\" ]\n            );\n          ]]]\n        tap_action:\n          action: \"more-info\"\n        label: \"[[[ return entity.state; ]]]\"\n        name: \"[[[ return variables.printer_name; ]]]\"\n        entity: \"[[[ return entity.entity_id; ]]]\"\n        styles:\n          card:\n            - padding: \"0\"\n            - \"--mdc-ripple-press-opacity\": 0.12\n            - cursor: \"pointer\"\n          label:\n            - text-transform: \"capitalize\"\n    cartridges: |\n      [[[\n        // Source: https://stackoverflow.com/a/56266358\n        const isColor = (strColor) => {\n          const s = new Option().style;\n          s.color = strColor;\n          return s.color !== '';\n        }\n\n        let toner_info_available = true;\n        if (variables.cartridges !== undefined ? Array.isArray(variables.cartridges) && variables.cartridges.length > 0 : false) {\n          let errorArray = [];\n          variables.cartridges.forEach(cartridge => {\n            let index = variables.cartridges.indexOf(cartridge);\n            let valid_cartridge_types = ['unicolor', 'tricolor']\n\n            // Confirm that the label is provided.\n            if (cartridge.label === undefined) {\n              errorArray.push(`cartridges.[${index}].label: You must provide a value.`);\n            }\n\n            // Confirm that a valid cartridge type is provided, if not default to 'unicolor'\n            // for backwards compatibility with older configuration files\n            if (cartridge.type === undefined) {\n                cartridge.type = 'unicolor'\n            } else if (!valid_cartridge_types.includes(cartridge.type)) {\n                errorArray.push(`cartridges.[${index}].type: You must provide a valid cartridge type`);\n            }\n\n            // Confirm that the color is provided and is valid color css.\n            if (cartridge.color !== undefined) {\n              if (cartridge.type === 'unicolor') {\n                if (typeof cartridge.color === 'string' || cartridge.color instanceof String ? !isColor(cartridge.color) : false) {\n                  errorArray.push(`cartridges.[${index}].color: You must provide a single valid CSS color value.`);\n                }\n              } else if (Array.isArray(cartridge.color) && cartridge.color.length === 3 ? cartridge.type === 'tricolor' : false) {\n                cartridge.color.forEach(color => {\n                  let col_index = cartridge.color.indexOf(color);\n                  if (!isColor(String(color))) {\n                    errorArray.push(`cartridges.[${index}].color.[${col_index}]: You must provide a single valid CSS color value.`);\n                  }\n                });\n              } else {\n                errorArray.push(`cartridges.[${index}].color: Invalid combination of colour and type.`);\n              }\n            } else {\n              errorArray.push(`cartridges.[${index}].color: You must provide a value.`);\n            }\n\n            // Confirm that the entity_id is provided, is a valid entity_id, a integer and a value between 0 and 100 inclusively.\n            if (cartridge.entity_id === undefined) {\n              errorArray.push(`cartridges.[${index}].entity_id: You must provide a value.`);\n            } else if (states[cartridge.entity_id] === undefined) {\n              errorArray.push(`cartridges.[${index}].entity_id: You must provide a existing entity_id.`);\n            } else if (String(states[cartridge.entity_id].state).toLowerCase() === String(variables.ulm_translation_unavailable).toLowerCase()) {\n              toner_info_available = false;\n            } else if (isNaN(states[cartridge.entity_id].state) || typeof states[cartridge.entity_id].state === \"boolean\") {\n              errorArray.push(`cartridges.[${index}].entity_id: You must provide a entity representing an integer.`);\n            } else if (states[cartridge.entity_id].state < 0 || states[cartridge.entity_id].state > 100) {\n              errorArray.push(`cartridges.[${index}].entity_id: You must provide a entity representing an integer between 0 and 100 inclusively.`);\n            }\n          });\n          if (errorArray.length > 0) {\n            return `<div class=\"error-container\">\n              <b>Configuration Error:</b>\n              <ul>\n                ${errorArray.map(error => `<li>${error}</li>`).join(\"\")}\n              </ul>\n            </div>`;\n          }\n\n          if (toner_info_available) {\n            return '<div class=\"wrapper\">' +\n              variables.cartridges.map(cartridge => {\n                if (cartridge.type === \"unicolor\") {\n                  cartridge.bar_style = `\n                    background-color: ${cartridge.color};\n                    width: ${states[cartridge.entity_id].state}%;\n                  `;\n                } else if (cartridge.type === \"tricolor\") {\n                  cartridge.bar_style = `\n                    background: linear-gradient(\n                      180deg,\n                      ${cartridge.color[0]},\n                      ${cartridge.color[0]} 33%,\n                      ${cartridge.color[1]} 33%,\n                      ${cartridge.color[1]} 66%,\n                      ${cartridge.color[2]} 66%,\n                      ${cartridge.color[2]}\n                    );\n                    width: ${states[cartridge.entity_id].state}%;\n                  `;\n                }\n\n                // Removes unnecessary whitespace from inline CSS\n                cartridge.bar_style = cartridge.bar_style.replace(/\\s{2,}/g, '')\n                return `\n                  <div class=\"label\">${cartridge.label}</div>\n                  <div class=\"container-bar\">\n                    <div class=\"bar\" style=\"${cartridge.bar_style}\"></div>\n                  </div>\n                  <div class=\"state\">${states[cartridge.entity_id].state}%</div>\n                `;\n              }).join(\"\") +\n            '</div>';\n          } else {\n            return `\n              <div class=\"info-unavailable\">\n                Toner Information Unavailable\n              </div>\n            `;\n          }\n        } else {\n\n        }\n      ]]]\n  card_mod:\n    style: |\n      /* Cartridge CSS */\n      div#cartridges .wrapper {\n        display: grid;\n        grid-template-columns: auto 1fr auto;\n        grid-gap: 1rem;\n        padding: 12px 8px 8px 8px;\n      }\n      div#cartridges .wrapper > *:nth-child(3n-2), .wrapper > *:nth-child(3n) {\n        place-self: center start;\n      }\n      div#cartridges .wrapper > .label {\n        filter: opacity(70%);\n        font-size: medium;\n      }\n      div#cartridges .wrapper > .container-bar {\n        position: relative;\n        border-radius: 4px;\n        border: 0.01rem solid rgba(var(--color-theme),.35);\n      }\n      div#cartridges .wrapper > .container-bar .bar {\n        height: 20px;\n        border-radius: 4px;\n      }\n      div#cartridges .wrapper > .state {\n        filter: opacity(40%);\n        font-size: medium;\n      }\n\n      /* Error CSS */\n      div#cartridges .error-container {\n        text-align: left;\n        font-size: 75%;\n        font-family: var(--code-font-family, monospace);\n        padding: 10px;\n        background-color: rgba(219, 68, 55, 0.75);\n        margin-top:10px;\n        border-radius:8px;\n      }\n      div#cartridges .error-container ul {\n        list-style: none;\n        padding: 0;\n        margin: 0;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        white-space: normal !important;\n      }\n      div#cartridges .error-container ul li {\n        margin-top: 0.5em;\n      }\n      div#cartridges .info-unavailable {\n        padding: 1em;\n        white-space: normal;\n        margin-top:10px;\n        border-radius:8px;\n        opacity: 60%;\n      }\n
    "},{"location":"usage/custom_cards/custom_card_tpx01_aircondition/","title":"AirCondition Custom-card","text":""},{"location":"usage/custom_cards/custom_card_tpx01_aircondition/#custom-card-aircondition","title":"Custom-card \"AirCondition\"","text":"
    The custom_card_tpx01_aircondition shows data from your air condition and gives you the possibility to control it.
    "},{"location":"usage/custom_cards/custom_card_tpx01_aircondition/#credits","title":"Credits","text":"
    Author: tpx01 - 2021 Version: 1.0.0
    "},{"location":"usage/custom_cards/custom_card_tpx01_aircondition/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_tpx01_aircondition/#usage","title":"Usage","text":"
    - type: custom:button-card\n  template: custom_card_tpx01_aircondition_with_buttons\n  variables:\n    entity: climate.livingroom\n    name: A/C Livingroom\n
    "},{"location":"usage/custom_cards/custom_card_tpx01_aircondition/#requirements","title":"Requirements","text":"
    n/a
    "},{"location":"usage/custom_cards/custom_card_tpx01_aircondition/#variables","title":"Variables","text":"Variable Example Required Explanation entity climate.livingroom yes Your climate entity name A/C Livingroom yes The name to show"},{"location":"usage/custom_cards/custom_card_tpx01_aircondition/#template-code","title":"Template code","text":"Template Code custom_card_tpx01_aircondition.yaml
    ---\ncustom_card_tpx01_aircondition:\n  template:\n    - \"ulm_translation_engine\"\n    - \"custom_card_tpx01_aircondition_language_variables\"\n  tap_action:\n    action: \"more-info\"\n  icon: |\n    [[[\n        if (entity.state =='dry') {\n          return 'mdi:water';\n        } else if (entity.state =='heat') {\n          return 'mdi:radiator';\n        } else if (entity.state =='cool') {\n          return 'mdi:snowflake';\n        } else if (entity.state =='fan_only') {\n          return 'mdi:fan';\n        }\n        return 'mdi:air-conditioner';\n    ]]]\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  state:\n    - operator: \"template\"\n      value: >\n        [[[\n          return entity.state != 'off';\n        ]]]\n      styles:\n        icon:\n          - color: \"rgba(var(--color-blue),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-blue),0.2)\"\n\ncustom_card_tpx01_aircondition_with_buttons:\n  variables:\n    name:\n  styles:\n    grid:\n      - grid-template-areas: \"item1 item2\"\n      - grid-template-columns: \"1fr\"\n      - grid-template-rows: \"min-content min-content\"\n      - row-gap: \"12px\"\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n      - padding: \"12px\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_items_favorite\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template:\n                - \"icon_info\"\n                - \"custom_card_tpx01_aircondition\"\n              tap_action:\n                action: \"more-info\"\n              name: >\n                [[[\n                    if (variables.name == null) {\n                      return variables.entity;\n                    }\n                    return variables.name;\n                ]]]\n              entity: \"[[[ return variables.entity ]]]\"\n          item2:\n            card:\n              type: \"horizontal-stack\"\n              cards:\n                - type: \"conditional\"\n                  conditions:\n                    - entity: \"[[[ return variables.entity ]]]\"\n                      state: \"off\"\n                  card:\n                    type: \"custom:button-card\"\n                    template: \"widget_icon\"\n                    tap_action:\n                      action: \"perform-action\"\n                      perform_action: \"climate.set_hvac_mode\"\n                      target:\n                        entity_id: \"[[[ return variables.entity ]]]\"\n                      data:\n                        hvac_mode: \"cool\"\n                    icon: \"mdi:power\"\n                - type: \"conditional\"\n                  conditions:\n                    - entity: \"[[[ return variables.entity ]]]\"\n                      state_not: \"off\"\n                  card:\n                    type: \"custom:button-card\"\n                    template: \"widget_icon\"\n                    tap_action:\n                      action: \"perform-action\"\n                      perform_action: \"climate.set_hvac_mode\"\n                      target:\n                        entity_id: \"[[[ return variables.entity ]]]\"\n                      data:\n                        hvac_mode: \"off\"\n                    icon: \"mdi:power-off\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"list_items\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"script.decrease_climate_temperature\"\n                target:\n                  entity_id: \"[[[ return variables.entity ]]]\"\n              icon: \"mdi:minus\"\n          item2:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_temperature\"\n              tap_action:\n                action: \"none\"\n              entity: \"[[[ return variables.entity ]]]\"\n              icon: \"mdi:temperature-celsius\"\n          item3:\n            card:\n              type: \"custom:button-card\"\n              template: \"widget_icon\"\n              tap_action:\n                action: \"perform-action\"\n                perform_action: \"script.increment_climate_temperature\"\n                target:\n                  entity_id: \"[[[ return variables.entity ]]]\"\n              icon: \"mdi:plus\"\n\nlist_items_favorite:\n  styles:\n    grid:\n      - grid-template-areas: \"item1 item1 item2\"\n      - grid-template-columns: \"1fr 1fr 1fr\"\n      - grid-template-rows: \"min-content\"\n      - column-gap: \"7px\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n\nwidget_temperature:\n  tap_action:\n    action: \"toggle\"\n  color: \"var(--google-grey-500)\"\n  show_icon: false\n  show_name: false\n  show_label: true\n  size: \"20px\"\n  label: |-\n    [[[\n        var temperature = entity.attributes.temperature;\n        if (temperature == null) {\n          var temperature = '-';\n        }\n        return temperature + '\u00b0C'\n    ]]]\n  styles:\n    label:\n      - color: \"rgb(var(--color-theme),0.9)\"\n    grid:\n      - grid-template-areas: \"l\"\n    card:\n      - box-shadow: \"none\"\n      - padding: \"0px\"\n      - background-color: \"rgba(var(--couleur-theme),0)\"\n      - border-radius: \"14px\"\n      - place-self: \"center\"\n      - height: \"42px\"\n
    "},{"location":"usage/custom_cards/custom_card_vncntdev_device_tracer/","title":"Device Tracker Custom-card","text":""},{"location":"usage/custom_cards/custom_card_vncntdev_device_tracer/#custom-card-device-tracker-online-or-offline","title":"Custom-card \"Device Tracker (Online or Offline ?)\"","text":"
    This card indicated whether a given device is online or offline using the Home Assistant device_tracker or the WoL-integration.
     
      Turn on you device with WoL:  
    "},{"location":"usage/custom_cards/custom_card_vncntdev_device_tracer/#credits","title":"Credits","text":"
    Author: vncnt.dev - 2021 Version: 1.0.0
    "},{"location":"usage/custom_cards/custom_card_vncntdev_device_tracer/#changelog","title":"Changelog","text":"1.1.1 Fix for UI Minimalist v1.0.1.  1.1.0 Support WoL  1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_vncntdev_device_tracer/#usage","title":"Usage","text":"
    - type: \"custom:button-card\"\n  template: \"custom_card_vncntdev_device_tracker\"\n  entity: switch.pc\n  variables:\n    custom_card_vncntdev_device_tracker_icon: mdi:desktop-mac\n    custom_card_vncntdev_device_tracker_name: \"PC\"\n    custom_card_vncntdev_device_tracker_status_as_name: true\n\n- type: \"custom:button-card\"\n  template: \"custom_card_vncntdev_device_tracker\"\n  entity: device_tracker.raspberry4\n  variables:\n    custom_card_vncntdev_device_tracker_name: \"Raspberry Pi 4\"\n
    "},{"location":"usage/custom_cards/custom_card_vncntdev_device_tracer/#requirements","title":"Requirements","text":"
    Setup the device tracker integration
     
    if you want to use WoL: Setup WoL integration
    "},{"location":"usage/custom_cards/custom_card_vncntdev_device_tracer/#variables","title":"Variables","text":"Variable Example Required Explanation entity device_tracker.pc true Icon of the Card custom_card_vncntdev_device_tracker_name \"PC\" false Custom name of devicedefault: friendly name of device tracer custom_card_vncntdev_device_tracker_status_as_name true true swap label and name?default: false default: \"mdi:server\" custom_card_vncntdev_device_tracker_icon mdi:desktop-mac false Icon of the Card default: \"mdi:server\" custom_card_vncntdev_device_tracker_color_online \"var(--google-green)\" false Color of icon if device is online default: \"var(--google-green)\" custom_card_vncntdev_device_tracker_color_offline \"var(--google-red)\" false Color of icon if offline default: \"var(--google-red)\""},{"location":"usage/custom_cards/custom_card_vncntdev_device_tracer/#template-code","title":"Template code","text":"Template Code vncntdev_card_device_tracer.yaml
    ---\ncustom_card_vncntdev_device_tracker:\n  template: \"card_generic\"\n  variables:\n    custom_card_vncntdev_device_tracker_name:\n    custom_card_vncntdev_device_tracker_status_as_name: false\n    custom_card_vncntdev_device_tracker_icon: \"mdi:server\"\n    custom_card_vncntdev_device_tracker_color_online: \"var(--google-green)\"\n    custom_card_vncntdev_device_tracker_color_offline: \"var(--google-red)\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template:\n          - \"icon_more_info\"\n        custom_fields:\n          item1:\n            card:\n              type: \"custom:button-card\"\n              icon: \"[[[return variables.custom_card_vncntdev_device_tracker_icon]]]\"\n              styles:\n                icon:\n                  - color: >\n                      [[[\n                          return (entity.state == \"not_home\" || entity.state == \"off\") ?\n                          variables.custom_card_vncntdev_device_tracker_color_offline:\n                          variables.custom_card_vncntdev_device_tracker_color_online;\n                      ]]]\n          item2:\n            card:\n              type: \"custom:button-card\"\n              name: |\n                [[[\n                    if (!variables.custom_card_vncntdev_device_tracker_status_as_name) {\n                      return variables.custom_card_vncntdev_device_tracker_name !== null?\n                      variables.custom_card_vncntdev_device_tracker_name:\n                      entity.attributes.friendly_name;\n                    } else {\n                      return (entity.state == \"not_home\" || entity.state == \"off\") ? \"Offline\" : \"Online\";\n                    }\n                ]]]\n              label: |\n                [[[\n                    if (variables.custom_card_vncntdev_device_tracker_status_as_name) {\n                      return variables.custom_card_vncntdev_device_tracker_name !== null?\n                      variables.custom_card_vncntdev_device_tracker_name:\n                      entity.attributes.friendly_name;\n                    } else {\n                      return (entity.state == \"not_home\" || entity.state == \"off\") ? \"Offline\" : \"Online\";\n                    }\n                ]]]\n
    "},{"location":"usage/custom_cards/custom_card_vncntdev_device_tracer/#note","title":"Note","text":""},{"location":"usage/custom_cards/custom_card_water_heater/","title":"Water Heater Custom-card","text":""},{"location":"usage/custom_cards/custom_card_water_heater/#custom-card-water-heater","title":"Custom-card \"Water heater\"","text":"
    NOTE This card is under review and is not ready to use!
    "},{"location":"usage/custom_cards/custom_card_water_heater/#credits","title":"Credits","text":"
    Author: tben - 2021 Version: 1.0.0
    "},{"location":"usage/custom_cards/custom_card_water_heater/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_card_water_heater/#usage","title":"Usage","text":""},{"location":"usage/custom_cards/custom_card_water_heater/#requirements","title":"Requirements","text":"
    This card needs the following to function correctly:
     Component / card required Note"},{"location":"usage/custom_cards/custom_card_water_heater/#variables","title":"Variables","text":"Variable Example Required Explanation"},{"location":"usage/custom_cards/custom_card_water_heater/#template-code","title":"Template code","text":"Template Code custom_card_water_heater.yaml
    ---\ncard_water_heater:\n  icon: \"mdi:waves\"\n  tap_action:\n    action: \"more-info\"\n  hold_action:\n    action: \"more-info\"\n  label: >-\n    [[[\n        if (entity.state == 'off'){\n          return 'Arr\u00eat forc\u00e9';\n        }else{\n          if (states[\"sensor.shelly_prise_salon_conso\"].state > 0){\n            var etat = \"Chauffe \u2022 \" + states[\"sensor.shelly_prise_salon_conso\"].state + \"W\";\n          }else{\n            var etat = \"Inactif\";\n          }\n          return etat ;\n        }\n    ]]]\n  state:\n    - operator: \"template\"\n      value: >\n        [[[\n          return (states['sensor.shelly_prise_salon_conso'].state > 0)\n        ]]]\n      styles:\n        icon:\n          - color: \"rgba(var(--color-red),1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-red),0.2)\"\n        card:\n          - background-color: \"rgba(var(--color-background-red),var(--opacity-bg))\"\n        name:\n          - color: \"rgba(var(--color-red-text),1)\"\n        label:\n          - color: \"rgba(var(--color-red-text),1)\"\n
    "},{"location":"usage/custom_cards/custom_card_water_heater/#homeassistant","title":"HomeAssistant","text":"
    ...
    "},{"location":"usage/custom_cards/custom_card_water_heater/#example","title":"Example","text":"
    ...
    "},{"location":"usage/custom_cards/custom_card_water_heater/#note","title":"Note","text":"
    ...
    "},{"location":"usage/custom_cards/custom_card_wsly_pollen/","title":"Tomorrow.io Pollen card","text":""},{"location":"usage/custom_cards/custom_card_wsly_pollen/#custom-card-tomorrowio-pollen-card","title":"Custom-card \"Tomorrow.io Pollen card\"","text":"
    This is a custom-card to display the pollen index of the Tomorrow.io index
     
     
    "},{"location":"usage/custom_cards/custom_card_wsly_pollen/#credits","title":"Credits","text":"
    Author: wsly - 05/2022 Version: 1.0.1
    "},{"location":"usage/custom_cards/custom_card_wsly_pollen/#changelog","title":"Changelog","text":"1.0.0 Initial release.  1.0.1 Allow customizing the name and icon of each pollen index, with localized defaults. (`*_name`, `*_icon` variables)"},{"location":"usage/custom_cards/custom_card_wsly_pollen/#requirements","title":"Requirements","text":"
    This card uses the following integration:
     
    Tomorrow.io
    "},{"location":"usage/custom_cards/custom_card_wsly_pollen/#usage","title":"Usage","text":"
    - type: 'custom:button-card'\n  template: custom_card_wsly_pollen\n  variables:\n    custom_card_wsly_pollen_tree: sensor.tomorrow_io_home_tree_pollen_index\n    custom_card_wsly_pollen_grass: sensor.tomorrow_io_home_grass_pollen_index\n    custom_card_wsly_pollen_weed: sensor.tomorrow_io_home_weed_pollen_index\n
    "},{"location":"usage/custom_cards/custom_card_wsly_pollen/#variables","title":"Variables","text":"Variable Example Required Default Explanation custom_card_wsly_pollen_tree \"sensor.tomorrow_io_home_tree_pollen_index\" Yes The entity for the tree pollen index custom_card_wsly_pollen_grass \"sensor.tomorrow_io_home_grass_pollen_index\" Yes The entity for the grass pollen index custom_card_wsly_pollen_weed \"sensor.tomorrow_io_home_weed_pollen_index\" Yes The entity for the weed pollen index custom_card_wsly_pollen_tree_name \"Trees\" No \"Trees\" (localized) The name to display for the tree pollen index, or `false` to use the `custom_card_wsly_pollen_tree` entity's friendly name. custom_card_wsly_pollen_tree_icon \"mdi:tree\" No \"mdi:tree\" The icon to display for the tree pollen index, or `false` to use the `custom_card_wsly_pollen_tree` entity's icon. custom_card_wsly_pollen_grass_name \"Grass\" No \"Grass\" (localized) The name to display for the grass pollen index, or `false` to use the `custom_card_wsly_pollen_grass` entity's friendly name. custom_card_wsly_pollen_grass_icon \"mdi:grass\" No \"mdi:grass\" The icon to display for the grass pollen index, or `false` to use the `custom_card_wsly_pollen_grass` entity's icon. custom_card_wsly_pollen_weed_name \"Weeds\" No \"Weeds\" (localized) The name to display for the weed pollen index, or `false` to use the `custom_card_wsly_pollen_weed` entity's friendly name. custom_card_wsly_pollen_weed_icon \"mdi:flower-pollen\" No \"mdi:flower-pollen\" The icon to display for the weed pollen index, or `false` to use the `custom_card_wsly_pollen_weed` entity's icon."},{"location":"usage/custom_cards/custom_card_wsly_pollen/#template-code","title":"Template code","text":"Template Code custom_card_wsly_pollen.yaml
    ---\n### Custom card Pollen ###\ncustom_card_wsly_pollen:\n  type: \"custom:button-card\"\n  template:\n    - \"custom_card_wsly_pollen_language_variables\"\n    - \"list_3_items\"\n  triggers_update: \"all\"\n  styles:\n    card:\n      - border-radius: \"var(--border-radius)\"\n      - box-shadow: \"var(--box-shadow)\"\n  custom_fields:\n    item1:\n      card:\n        type: \"custom:button-card\"\n        template: \"custom_card_wsly_pollen_item\"\n        entity: \"[[[ return variables.custom_card_wsly_pollen_tree ]]]\"\n        name: \"[[[ return variables.custom_card_wsly_pollen_tree_name || states[variables.custom_card_wsly_pollen_tree].attributes.friendly_name ]]]\"\n        icon: \"[[[ return variables.custom_card_wsly_pollen_tree_icon || states[variables.custom_card_wsly_pollen_tree].attributes.icon ]]]\"\n    item2:\n      card:\n        type: \"custom:button-card\"\n        template: \"custom_card_wsly_pollen_item\"\n        entity: \"[[[ return variables.custom_card_wsly_pollen_grass ]]]\"\n        name: \"[[[ return variables.custom_card_wsly_pollen_grass_name || states[variables.custom_card_wsly_pollen_grass].attributes.friendly_name ]]]\"\n        icon: \"[[[ return variables.custom_card_wsly_pollen_grass_icon || states[variables.custom_card_wsly_pollen_grass].attributes.icon ]]]\"\n    item3:\n      card:\n        type: \"custom:button-card\"\n        template: \"custom_card_wsly_pollen_item\"\n        entity: \"[[[ return variables.custom_card_wsly_pollen_weed ]]]\"\n        name: \"[[[ return variables.custom_card_wsly_pollen_weed_name || states[variables.custom_card_wsly_pollen_weed].attributes.friendly_name ]]]\"\n        icon: \"[[[ return variables.custom_card_wsly_pollen_weed_icon || states[variables.custom_card_wsly_pollen_weed].attributes.icon ]]]\"\n\ncustom_card_wsly_pollen_item:\n  type: \"custom:button-card\"\n  template:\n    - \"custom_card_wsly_pollen_language_variables\"\n    - \"vertical_buttons\"\n  label: >\n    [[[\n      let pollen_state_label = variables.custom_card_wsly_pollen_none;\n      if (entity.state == \"very_low\") pollen_state_label = variables.custom_card_wsly_pollen_very_low;\n      else if (entity.state == \"low\") pollen_state_label = variables.custom_card_wsly_pollen_low;\n      else if (entity.state == \"medium\") pollen_state_label = variables.custom_card_wsly_pollen_medium;\n      else if (entity.state == \"high\") pollen_state_label = variables.custom_card_wsly_pollen_high;\n      else if (entity.state == \"very_high\") pollen_state_label = variables.custom_card_wsly_pollen_very_high;\n      return pollen_state_label;\n    ]]]\n  state:\n    - value: \"none\"\n      styles:\n        icon:\n          - color: \"rgba(var(--color-grey), 1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-grey), 0.2)\"\n    - value: \"very_low\"\n      styles:\n        icon:\n          - color: \"rgba(var(--color-green), 1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-green), 0.2)\"\n    - value: \"low\"\n      styles:\n        icon:\n          - color: \"rgba(241, 196, 15, 1)\"\n        img_cell:\n          - background-color: \"rgba(241, 196, 15, 0.2)\"\n    - value: \"medium\"\n      styles:\n        icon:\n          - color: \"rgba(243, 156, 18, 1)\"\n        img_cell:\n          - background-color: \"rgba(243, 156, 18, 0.2)\"\n    - value: \"high\"\n      styles:\n        icon:\n          - color: \"rgba(231, 76, 60, 1)\"\n        img_cell:\n          - background-color: \"rgba(231, 76, 60, 0.2)\"\n    - value: \"very_high\"\n      styles:\n        icon:\n          - color: \"rgba(var(--color-pink), 1)\"\n        img_cell:\n          - background-color: \"rgba(var(--color-pink), 0.2)\"\n  styles:\n    card:\n      - box-shadow: \"none\"\n      - border-radius: \"var(--border-radius)\"\n    custom_fields:\n      extreme:\n        - border-radius: \"50%\"\n        - position: \"absolute\"\n        - margin-left: \"auto\"\n        - margin-right: \"auto\"\n        - left: \"38px\"\n        - right: \"0\"\n        - top: \"8px\"\n        - height: \"16px\"\n        - width: \"16px\"\n        - border: \"2px solid var(--card-background-color)\"\n        - font-size: \"12px\"\n        - line-height: \"14px\"\n        - background-color: \"rgba(var(--color-red),1)\"\n        - color: \"white\"\n  custom_fields:\n    extreme: >\n      [[[\n        if (entity.state == \"very_high\"){\n          return `<ha-icon icon=\"mdi:exclamation-thick\" style=\"width: 12px; height: 12px; color: var(--primary-background-color);\"></ha-icon>`\n        }\n      ]]]\n
    "},{"location":"usage/custom_cards/custom_card_yagrasdemonde_lights_count/","title":"Counter Lights/Covers Card Custom-card","text":""},{"location":"usage/custom_cards/custom_card_yagrasdemonde_lights_count/#custom-card-counter-lightscover-card","title":"Custom-card \"Counter Lights/Cover Card\"","text":"
    This is a custom-card to display number of lights on or covers open.
     
     
    "},{"location":"usage/custom_cards/custom_card_yagrasdemonde_lights_count/#credits","title":"Credits","text":"
    Author: yagrasdemonde - 04/2022
     
    Version: 1.0.0
    "},{"location":"usage/custom_cards/custom_card_yagrasdemonde_lights_count/#changelog","title":"Changelog","text":"1.0.0 Initial release."},{"location":"usage/custom_cards/custom_card_yagrasdemonde_lights_count/#requirements","title":"Requirements","text":"
    This card needs sensor counting lights/covers you want:
     
    template:\n  - sensor:\n      - name: \"lights on\"\n        unique_id: lights_on\n        icon: mdi:lightbulb-on-outline\n        state: >\n          {% set lights = [\n              states.light.living_room,\n              states.light.bedroom,\n              states.light.bathroom,\n              states.switch.kitchen,\n              ] %}\n          {{ lights | selectattr('state','eq','on') | list | count }}\n      - name: \"covers open\"\n        unique_id: covers_open\n        icon: mdi:window-shutter-open\n        state: >\n          {% set covers = [\n              states.cover.bedroom,\n              states.cover.livingroom1,\n              states.cover.livingroom2,\n              ] %}\n          {{ covers | selectattr('state','eq','open') | list | count }}\n
    "},{"location":"usage/custom_cards/custom_card_yagrasdemonde_lights_count/#usage","title":"Usage","text":"
    For lights
     
    - type: \"custom:button-card\"\n  template: custom_card_yagrasdemonde_lights_count\n  entity: sensor.lights_on\n
     
    For covers
     
    - type: \"custom:button-card\"\n  template: custom_card_yagrasdemonde_lights_count\n  entity: sensor.covers_open\n  variables:\n    ulm_custom_card_yagrasdemonde_lights_count_type: \"cover\"\n    ulm_custom_card_yagrasdemonde_lights_count_icon_off: \"mdi:window-shutter\"\n    ulm_custom_card_yagrasdemonde_lights_count_color: \"blue\"\n
    "},{"location":"usage/custom_cards/custom_card_yagrasdemonde_lights_count/#variables","title":"Variables","text":"Variable Example Required Default Explanation ulm_custom_card_yagrasdemonde_lights_count_type \"cover\" No \"light\" The entity type used for translationsValues available : cover, light ulm_custom_card_yagrasdemonde_lights_count_icon_on \"mdi:lightbulb-on-outline\" No Sensor Icon Overwrites the sensor icon used for on/open state ulm_custom_card_yagrasdemonde_lights_count_icon_off \"mdi:lightbulb-outline\" No \"mdi:lightbulb-outline\" Icon for state off/closed ulm_custom_card_yagrasdemonde_lights_count_color \"red\" No \"yellow\" Style the color of icon, name and card (if applicable)Values available : blue, green, grey, pink, purple, red, yellow ulm_custom_card_yagrasdemonde_lights_count_force_background_color true No false Force background card color even in light mode Template Code custom_card_yagrasdemonde_lights_count.yaml
    ---\n### Custom Card Lights (or covers) Counter ###\ncustom_card_yagrasdemonde_lights_count:\n  show_name: true\n  template:\n    - \"ulm_custom_card_yagrasdemonde_lights_count_language_variables\"\n    - \"icon_only\"\n    - \"ulm_translation_engine\"\n  variables:\n    ulm_custom_card_yagrasdemonde_lights_count_icon_on: \"[[[ return entity.attributes.icon ]]]\"\n    ulm_custom_card_yagrasdemonde_lights_count_icon_off: \"mdi:lightbulb-outline\"\n    ulm_custom_card_yagrasdemonde_lights_count_color: \"yellow\"\n    ulm_custom_card_yagrasdemonde_lights_count_force_background_color: false\n  tap_action:\n    action: \"none\"\n  name: >-\n      [[[\n        var entity_count_O = '';\n        var entity_count_1 = '';\n        var entity_count_many = '';\n        if(variables.ulm_custom_card_yagrasdemonde_lights_count_type == \"cover\") {\n          entity_count_O = variables.ulm_custom_card_yagrasdemonde_lights_count_cover_0;\n          entity_count_1 = variables.ulm_custom_card_yagrasdemonde_lights_count_cover_1;\n          entity_count_many = variables.ulm_custom_card_yagrasdemonde_lights_count_cover_many;\n        }\n        else {\n          entity_count_O = variables.ulm_custom_card_yagrasdemonde_lights_count_light_0;\n          entity_count_1 = variables.ulm_custom_card_yagrasdemonde_lights_count_light_1;\n          entity_count_many = variables.ulm_custom_card_yagrasdemonde_lights_count_light_many;\n        }\n        if (entity.state != \"unavailable\") {\n          if (entity.state == 0) {\n            return entity_count_O;\n          } else if (entity.state == 1) {\n            return entity_count_1;\n          } else {\n            return entity.state + \" \" + entity_count_many;\n          }\n        } else {\n          return variables.ulm_translation_state;\n        }\n      ]]]\n  icon: >\n      [[[\n          if (entity.state == 0) {\n            return variables.ulm_custom_card_yagrasdemonde_lights_count_icon_off;\n          }\n          else {\n            return variables.ulm_custom_card_yagrasdemonde_lights_count_icon_on;\n          }\n      ]]]\n  styles:\n    icon:\n      - color: >\n          [[[\n              if (entity.state == 0) {\n                return 'rgba(var(--color-theme),0.2)';\n              }\n              else {\n                return 'rgba(var(--color-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '),1)';\n              }\n          ]]]\n    name:\n      - align-self: \"center\"\n      - justify-self: \"start\"\n      - font-weight: \"bold\"\n      - font-size: \"14px\"\n      - margin-left: \"12px\"\n      - filter: \"opacity(100%)\"\n    img_cell:\n      - background-color: >\n          [[[\n              if (entity.state == 0) {\n                return 'rgba(var(--color-theme),0.05)';\n              }\n              else {\n                return 'rgba(var(--color-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '),0.2)';\n              }\n          ]]]\n    grid:\n      - grid-template-areas: \"'i n'\"\n      - grid-template-columns: \"min-content min-content\"\n      - grid-template-rows: \"min-content\"\n  state:\n    - value: 1\n      operator: \">=\"\n      styles:\n        card:\n          - background-color: >-\n              [[[\n                  if (variables.ulm_custom_card_yagrasdemonde_lights_count_force_background_color == true || hass.themes.darkMode){\n                    return 'rgba(var(--color-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '-text),0.1)';\n                  }\n                  else {\n                    return 'rgba(var(--color-background-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '),var(--opacity-bg))';\n                  }\n              ]]]\n        name:\n          - color: \"[[[ return 'rgba(var(--color-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '-text),1)' ]]]\"\n
    "},{"location":"usage/custom_cards/custom_chip_group_counter/","title":"Custom Chip Group Counter","text":""},{"location":"usage/custom_cards/custom_chip_group_counter/#custom-card-group-counter","title":"Custom Card \"Group Counter\"","text":""},{"location":"usage/custom_cards/custom_chip_group_counter/#credits","title":"Credits","text":"
       
    • Author: Albin M\u00e9doc - 2023     Version: 1.0.0
      •  
    "},{"location":"usage/custom_cards/custom_chip_group_counter/#changelog","title":"Changelog","text":"1.0.0   Initial release"},{"location":"usage/custom_cards/custom_chip_group_counter/#description","title":"Description","text":"
    This cards show a chip with custom text representing how many entities in a group have a specific state. Pressing on the chip will toggle the entity group, eg turn on/off all lights.
    "},{"location":"usage/custom_cards/custom_chip_group_counter/#variables","title":"Variables","text":"Variable Default Required Notes entity Yes Hide chip if no entities are active. ulm_custom_chip_group_counter_hide_if_zero false No Hide chip if no entities are active. ulm_custom_chip_group_counter_type light No Specify the type of entities, used for translation ulm_custom_chip_group_counter_count_state on No States that should be counted ulm_custom_chip_group_counter_color yellow Yes Color of the icon  Can choose between: blue, red, green, yellow, pink, purple ulm_custom_chip_group_counter_icon_zero mdi:lightbulb-outline No Icon when no entity's state is satisfied ulm_custom_chip_group_counter_icon_one mdi:lightbulb-on-outline No Icon when one entity's state is satisfied ulm_custom_chip_group_counter_icon_multiple mdi:lightbulb-on-outline No Icon when multiple entities state is satisfied"},{"location":"usage/custom_cards/custom_chip_group_counter/#usage","title":"Usage","text":""},{"location":"usage/custom_cards/custom_chip_group_counter/#minimal-config-1","title":"Minimal config 1","text":"
    The entities active within the group will only go one level down. If you have a group with a group the subgroup will only be treated as a single entity.
     
    - type: 'custom:button-card'\n  template: 'custom_chip_group_counter'\n  entity: 'lights.living_room'\n
    "},{"location":"usage/custom_cards/custom_chip_group_counter/#minimal-config-2","title":"Minimal config 2","text":"
    This configuration can be used if you have a sensor that should represent the state. This can be good if you have groups within groups and the calculation is happening outside this card. The entity must still be set and should represent all the entities that should be toggled on press.
     
    - type: 'custom:button-card'\n  template: 'custom_chip_group_counter'\n  entity: 'light.all'\n  variables:\n      ulm_custom_chip_group_counter_entities_active: 'sensor.lights_on'\n
    "},{"location":"usage/custom_cards/custom_chip_group_counter/#full-config-2","title":"Full config 2","text":"
    - type: 'custom:button-card'\n  template: 'custom_chip_group_counter'\n  entity: 'light.all'\n  variables:\n      ulm_custom_chip_group_counter_hide_if_zero: true\n      ulm_custom_chip_group_counter_type: speaker\n      ulm_custom_chip_group_counter_count_state:\n          - 'playing'\n          - 'buffering'\n      ulm_custom_chip_group_counter_color: green\n      ulm_custom_chip_group_counter_icon_zero: 'mdi:speaker'\n      ulm_custom_chip_group_counter_icon_one: 'mdi:speaker'\n      ulm_custom_chip_group_counter_icon_multiple: 'mdi:speaker-multiple'\n
    "},{"location":"usage/custom_cards/custom_chip_group_counter/#template-code","title":"Template code","text":"Template Code custom_chip_group_counter.yaml
    ---\n### Custom Chip Group Counter ###\ncustom_chip_group_counter:\n  template:\n    - \"chips\"\n    - \"custom_chip_group_counter_language_variables\"\n  variables:\n    ulm_custom_chip_group_counter_icon_zero: \"mdi:lightbulb-outline\"\n    ulm_custom_chip_group_counter_icon_one: \"mdi:lightbulb-on-outline\"\n    ulm_custom_chip_group_counter_icon_multiple: \"mdi:lightbulb-on-outline\"\n    ulm_custom_chip_group_counter_color: \"yellow\"\n    ulm_custom_chip_group_counter_count_state: \"on\"\n    ulm_custom_chip_group_counter_type: \"light\"\n    ulm_custom_chip_group_counter_hide_if_zero: false\n  tap_action:\n    action: \"toggle\"\n  triggers_update: \"all\"\n  show_icon: true\n  icon: |\n    [[[\n      let entities_active = 0;\n      if(variables.ulm_custom_chip_group_counter_entities_active) {\n        entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;\n      } else {\n        entities_active = states[\n          entity.entity_id\n        ].attributes.entity_id.filter((child_entity_id) => {\n          return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);\n        }).length;\n      }\n\n      if (entities_active == 0) {\n        return variables.ulm_custom_chip_group_counter_icon_zero;\n      } else if (entities_active == 1) {\n        return variables.ulm_custom_chip_group_counter_icon_one;\n      } else {\n        return variables.ulm_custom_chip_group_counter_icon_multiple;\n      }\n    ]]]\n  label: |\n    [[[\n      let entities_active = 0;\n      if(variables.ulm_custom_chip_group_counter_entities_active) {\n        entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;\n      } else {\n        entities_active = states[\n          entity.entity_id\n        ].attributes.entity_id.filter((child_entity_id) => {\n          return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);\n        }).length;\n      }\n\n      const type = variables.ulm_custom_chip_group_counter_type;\n      const plural_typ = entities_active == 0 ? \"zero\" : entities_active == 1 ? \"one\" : \"multiple\";\n      const translation_path = `custom_chip_group_counter_${type}_${plural_typ}`\n      return variables[translation_path].replace('{count}', entities_active);\n    ]]]\n  styles:\n    card:\n      - display: |\n          [[[\n            let entities_active = 0;\n            if(variables.ulm_custom_chip_group_counter_entities_active) {\n              entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;\n            } else {\n              entities_active = states[\n                entity.entity_id\n              ].attributes.entity_id.filter((child_entity_id) => {\n                return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);\n              }).length;\n            }\n\n            if(variables.ulm_custom_chip_group_counter_hide_if_zero && entities_active == 0){\n              return \"none\";\n            }\n            return \"block\";\n          ]]]\n    grid:\n      - grid-template-areas: \"'i l'\"\n    icon:\n      - color: |\n          [[[\n            let entities_active = 0;\n            if(variables.ulm_custom_chip_group_counter_entities_active) {\n              entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;\n            } else {\n              entities_active = states[\n                entity.entity_id\n              ].attributes.entity_id.filter((child_entity_id) => {\n                return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);\n              }).length;\n            }\n\n            if (entities_active == 0) {\n              return 'rgba(var(--color-theme),0.2)';\n            }\n            else {\n              return 'rgba(var(--color-' + variables.ulm_custom_chip_group_counter_color + '),1)';\n            }\n          ]]]\n
    "},{"location":"usage/custom_cards/custom_chip_myenedis/","title":"My Enedis Chip Custom-card","text":""},{"location":"usage/custom_cards/custom_chip_myenedis/#custom-chip-my-enedis","title":"Custom-chip \"My Enedis\"","text":"
    The myenedis you can control a input_number entity
     
     
    "},{"location":"usage/custom_cards/custom_chip_myenedis/#credits","title":"Credits","text":"
    Author: acesyde - 2021 Version: 1.0.0
    "},{"location":"usage/custom_cards/custom_chip_myenedis/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_chip_myenedis/#why-not-the-default-chip_power_consumption","title":"Why not the default chip_power_consumption","text":"
       
    • The my enedis integration doesn't split the cost and the consumption in a specific sensor
      •  
    • All values are in the main sensor under the attributes item
      •  
    • Split Heures Creuses (HC) and Heures pleines (HP)
      •  
    "},{"location":"usage/custom_cards/custom_chip_myenedis/#usage","title":"Usage","text":"
    - type: \"custom:button-card\"\n  template: custom_chip_myenedis\n  entity: sensor.myenedis_123456789\n  variables:\n    ulm_chip_separate_hp_hc: true\n
    "},{"location":"usage/custom_cards/custom_chip_myenedis/#requirements","title":"Requirements","text":"
    My Enedis integration
    "},{"location":"usage/custom_cards/custom_chip_myenedis/#variables","title":"Variables","text":"Variable Default Required Notes entity Your MyEnedis Sensor ulm_chip_separate_hp_hc false Separate HC/HC in the chip"},{"location":"usage/custom_cards/custom_chip_myenedis/#template-code","title":"Template code","text":"Template Code custom_chip_myenedis.yaml
    ---\n### Chip Power Consumption ###\ncustom_chip_myenedis:\n  template:\n    - \"chips\"\n  variables:\n    ulm_chip_separate_hp_hc: false\n    ulm_chip_unit_of_measurement: \"[[[ return entity.attributes.unit_of_measurement ]]]\"\n  triggers_update: \"all\"\n  label: |\n    [[[\n      var result = \"\ud83d\udcb0 \" +  parseFloat(entity.attributes.daily_cost).toFixed(1) + \" \u20ac\";\n\n      if(variables.ulm_chip_separate_hp_hc) {\n        result += \" \u2600\ufe0f \" + parseFloat(entity.attributes.yesterday_HP).toFixed(1) + \" \" +  variables.ulm_chip_unit_of_measurement;\n        result += \" \ud83c\udf11 \" + parseFloat(entity.attributes.yesterday_HC).toFixed(1) + \" \" +  variables.ulm_chip_unit_of_measurement;\n      } else {\n        result += \" \u26a1 \" + parseFloat(entity.attributes.yesterday_HCHP).toFixed(1) + \" \" +  variables.ulm_chip_unit_of_measurement;\n      }\n\n      return result;\n    ]]]\n
    "},{"location":"usage/custom_cards/custom_chip_tesla_temperature/","title":"Custom-chip Tesla Temperature","text":""},{"location":"usage/custom_cards/custom_chip_tesla_temperature/#information","title":"Information","text":"
    Custom-chip Tesla Temperature is a chip showing the status of set temperature and current inside temperature.
    "},{"location":"usage/custom_cards/custom_chip_tesla_temperature/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_chip_tesla_temperature/#usage","title":"Usage","text":"
    - type: \"custom:button-card\"\n  template: custom_chip_tesla_temperature\n  variables:\n      ulm_chip_hvac: climate.tesla_hvac_climate_system\n
    "},{"location":"usage/custom_cards/custom_chip_tesla_temperature/#requirements","title":"Requirements","text":"
    UI Lovelace Minimalist
     
    Tesla Custom Integration
    "},{"location":"usage/custom_cards/custom_chip_tesla_temperature/#variables","title":"Variables","text":"Variable Default Required Explanation ulm_chip_hvac Yes Tesla hvac entity"},{"location":"usage/custom_cards/custom_chip_tesla_temperature/#template-code","title":"Template code","text":"
    ---\ncustom_chip_tesla_temperature:\n  template:\n    - \"chip_icon_label\"\n    - \"ulm_translation_engine\"\n  variables:\n  ulm_card_enable_popup: false\n  triggers_update: \"all\"\n  label: |\n    [[[\n      function convertTemperature(temp) {\n        if (parseFloat(temp) == temp && Math.floor(temp) != temp) {\n          return parseFloat(temp).toFixed(1);\n        }\n        return temp;\n      }\n      var set_temp = states[variables.ulm_chip_hvac].attributes.temperature;\n      var inside_temp = states[variables.ulm_chip_hvac].attributes.current_temperature;\n      var label = \"Set \" + convertTemperature(set_temp) + \"\u00b0\" + \" / Current \" + convertTemperature(inside_temp) + \"\u00b0\";\n      return label;\n    ]]]\n  icon: |\n    [[[\n      var preset = states[variables.ulm_chip_hvac].attributes.preset_mode.toLowerCase();\n      var icon = {\n        \"normal\": \"mdi:thermometer\",\n        \"defrost\": \"mdi:snowflake-melt\",\n        \"keep on\": \"mdi:heat-wave\",\n        \"dog mode\": \"mdi:dog-side\",\n        \"camp mode\": \"mdi:campfire\",\n        \"default\": \"mdi:thermometer\"\n      }\n      return (icon[preset] || icon[\"default\"]);\n    ]]]\n
    "},{"location":"usage/custom_cards/custom_chip_update/","title":"Custom-chip \"Update\"","text":""},{"location":"usage/custom_cards/custom_chip_update/#information","title":"Information","text":"
    Chip that shows you if an update for Home Assistant is available.
    "},{"location":"usage/custom_cards/custom_chip_update/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_chip_update/#usage","title":"Usage","text":"
    - type: custom:button-card\n  template: chip_update\n  entity: group.updates\n  variables:\n    ulm_chip_update_path: '/ui-lovelace-minimalist/system'\n
    "},{"location":"usage/custom_cards/custom_chip_update/#variables","title":"Variables","text":"Variable Example Required Explanation entity group.updates yes update entity ulm_chip_update_path /ui-lovelace-minimalist/system yes path to navigate"},{"location":"usage/custom_cards/custom_chip_update/#template-code","title":"Template code","text":"
    ---\n### Chip Update ###\nchip_update:\n  template:\n    - \"ulm_language_variables\"\n    - \"chips\"\n  tap_action:\n    action: navigate\n    navigation_path: \"[[[ return variables.ulm_chip_update_path; ]]]\"\n    haptic: light\n  show_icon: true\n  state:\n  - operator: default\n    color: red\n    icon: mdi:shield-alert\n    label: \"[[[ return variables.ulm_updates_available  ]]]\"\n  - value: 'off'\n    color: green\n    icon: mdi:shield-check\n    label: \"[[[ return variables.ulm_no_updates_available  ]]]\"\n  styles:\n    grid:\n      - grid-template-areas: \"'i l'\"\n
    "},{"location":"usage/custom_cards/custom_chip_update/#requirements","title":"Requirements","text":"
    If you don't have an update sensor follow that instruction to create one.
    "},{"location":"usage/custom_cards/custom_chip_update/#credits","title":"Credits","text":"
       
    • Author: JeffConrad18 - 2022
      •  
    • Version: 1.0
      •  
    "},{"location":"usage/custom_cards/custom_chip_vlape_garage/","title":"Garage Chip Custom-card","text":""},{"location":"usage/custom_cards/custom_chip_vlape_garage/#custom-chip-garage","title":"Custom-chip Garage","text":"
    Custom-chip Garage is a chip showing the status of a garage door.
     
    INSERT IMAGES
    "},{"location":"usage/custom_cards/custom_chip_vlape_garage/#credits","title":"Credits","text":"
    Author: Vincent Lape - 2023 Credits: THe basis of this chip was derived from built-in Alarm chip Version: 1.0.0
    "},{"location":"usage/custom_cards/custom_chip_vlape_garage/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_chip_vlape_garage/#usage","title":"Usage","text":"
      - type: 'custom:button-card'\n    template: chip_garage\n    entity: cover.garage_door\n
    "},{"location":"usage/custom_cards/custom_chip_vlape_garage/#requirements","title":"Requirements","text":"
    UI Lovelace Minimalist
    "},{"location":"usage/custom_cards/custom_chip_vlape_garage/#variables","title":"Variables","text":"Variable Default Required Notes entity Yes Garage door entity"},{"location":"usage/custom_cards/custom_chip_vlape_garage/#template-code","title":"Template code","text":"Template Code custom_chip_vlape_garage.yaml
    ---\n### custom_chip_vlape_garage ###\nchip_garage:\n  template:\n    - \"chip_icon_label\"\n    - \"ulm_translation_engine\"\n  label: \"[[[ return variables.ulm_translation_state ]]]\"\n  icon: |\n    [[[\n      var state = entity.state.toLowerCase();\n      var garage_icon = {\n        \"default\": \"mdi:garage\",\n        \"closed\": \"mdi:garage\",\n        \"open\": \"mdi:garage-open\"\n      }\n      return (garage_icon[state] || garage_icon[\"default\"]);\n    ]]]\n  styles:\n    icon:\n      - color: |\n          [[[\n            var state = entity.state.toLowerCase();\n            var garage_color = {\n              \"default\": \"var(--google-green)\",\n              \"closed\": \"var(--google-green)\",\n              \"open\": \"var(--google-red)\"\n            }\n            return (garage_color[state] || garage_color[\"default\"]);\n          ]]]\n
    "},{"location":"usage/custom_cards/custom_template_shogun160_battery_info/","title":"Custom Template Battery Info","text":""},{"location":"usage/custom_cards/custom_template_shogun160_battery_info/#custom-template-battery-info","title":"Custom Template \"Battery Info\"","text":""},{"location":"usage/custom_cards/custom_template_shogun160_battery_info/#credits","title":"Credits","text":"
       
    • Full credit to user basbruss, who created the design and base of it in his person card
      •  
    "},{"location":"usage/custom_cards/custom_template_shogun160_battery_info/#changelog","title":"Changelog","text":"1.0.0 Initial release"},{"location":"usage/custom_cards/custom_template_shogun160_battery_info/#description","title":"Description","text":"
    This is an template to add the battery level to every ui minimalist card
    "},{"location":"usage/custom_cards/custom_template_shogun160_battery_info/#variables","title":"Variables","text":"Variable Default Required Notes ulm_battery_entity No The entity to represent the battery_level"},{"location":"usage/custom_cards/custom_template_shogun160_battery_info/#usage-with-battery-or-battery_level-attribute-from-entity","title":"Usage with battery or battery_level attribute from entity","text":"
    - type: 'custom:button-card'\n    template:\n      - card_binary_sensor\n      - battery_info\n    entity: binary_sensor.badezimmer_tuer_contact\n    variables:\n      ulm_show_last_changed: false\n
    "},{"location":"usage/custom_cards/custom_template_shogun160_battery_info/#usage-with-variable-ulm_battery_entity","title":"Usage with variable ulm_battery_entity","text":"
    - type: 'custom:button-card'\n    template:\n      - card_binary_sensor\n      - battery_info\n    entity: binary_sensor.badezimmer_tuer_contact\n    variables:\n      ulm_show_last_changed: false\n      ulm_battery_entity: sensor.badezimmer_tuer_battery_level\n
    "},{"location":"usage/layout/","title":"Layout Formatting","text":""},{"location":"usage/layout/#aligning-cards","title":"Aligning cards","text":"
    If you want to alight cards to the center, right. Or only 1 card on the right it can be done using a blank-card.
     Center 
     
    # Card in the Center\n- type: horizontal-stack\n  cards:\n    - type: \"custom:button-card\"\n      color_type: blank-card\n\n    - type: custom:button-card\n      template: chip_icon_label\n      label: Your Card Here\n\n    - type: \"custom:button-card\"\n      color_type: blank-card\n
     Right 
     
    # Card on the Right\n- type: horizontal-stack\n  cards:\n    - type: \"custom:button-card\"\n      color_type: blank-card\n\n    - type: custom:button-card\n      template: chip_icon_label\n      label: Your Card Here\n
     Left & Right 
     
    # Card on the Right and Left\n- type: horizontal-stack\n  cards:\n    - type: custom:button-card\n      template: chip_icon_label\n      label: Your left card here\n\n    - type: \"custom:button-card\"\n      color_type: blank-card\n\n    - type: custom:button-card\n      template: chip_icon_label\n      label: Your right card here\n
    "},{"location":"usage/popups/popup_cover/","title":"Cover Popup","text":""},{"location":"usage/popups/popup_cover/#cover-popup","title":"Cover popup","text":""},{"location":"usage/popups/popup_cover/#card-compatibility","title":"Card compatibility","text":"
    This popup is displayed using popup and it is compatible with the following cards/chips :
     
       
    • card_cover
      •  
    "},{"location":"usage/popups/popup_cover/#how-to-use","title":"How to use","text":"
    To enable this popup, add the variable ulm_card_cover_enable_popup and set to true.
     
    Warning
     
    This is a different approach as the other popup_cards use.
     
    For example :
     
    - type: \"custom:button-card\"\n  template: card_cover\n  entity: cover.garage\n  variables:\n    ulm_card_cover_enable_popup: true\n
    "},{"location":"usage/popups/popup_cover/#credits","title":"Credits","text":"
       
    • Designed by AndyVRD
      •  
    "},{"location":"usage/popups/popup_light/","title":"Light Popup","text":""},{"location":"usage/popups/popup_light/#light-popup","title":"Light popup","text":""},{"location":"usage/popups/popup_light/#requirements","title":"Requirements","text":"
       
    • My Cards Bundle aka slider-card (download for HACS)
      •  
    • Light Entity Card (download for HACS)
      •  
    "},{"location":"usage/popups/popup_light/#card-compatibility","title":"Card compatibility","text":"
    This popup is displayed using hold_action and it is compatible with the following cards/chips :
     
       
    • card_light
      •  
    "},{"location":"usage/popups/popup_light/#how-to-use","title":"How to use","text":""},{"location":"usage/popups/popup_light/#variables","title":"Variables","text":"Variable/Entity Default Required Notes Requirement ulm_card_light_color_palette Add select entity to control color palette 
    To enable this popup, add the variable ulm_card_light_enable_popup and set to true.
     
    Warning
     
    This is a different approach as the other popup_cards use.
     
    For example :
     
    - type: \"custom:button-card\"\n  template:\n    - card_light\n  entity: light.cuisine\n  variables:\n    ulm_card_light_enable_popup: true\n    ulm_card_light_color_palette: select.wled_color_palette\n
    "},{"location":"usage/popups/popup_light/#credits","title":"Credits","text":"
       
    • Designed by schumijo and bavo (special thanks to him for his help on this development)).
      •  
    "},{"location":"usage/popups/popup_media_player/","title":"Media_player Popup","text":""},{"location":"usage/popups/popup_media_player/#media-player-popup","title":"Media Player popup","text":""},{"location":"usage/popups/popup_media_player/#card-compatibility","title":"Card compatibility","text":"
    This popup is displayed using hold_action and it is compatible with the following cards/chips :
     
       
    • card_media_player
      •  
    "},{"location":"usage/popups/popup_media_player/#how-to-use","title":"How to use","text":"
    To enable this popup, add the variable ulm_card_media_player_enable_popup and set to true.
     
    !!! warning This is a different approach as the other popup_cards use.
     
    For example :
     
    - type: \"custom:button-card\"\n  template:\n    - card_media_player\n  entity: media_player.lounge_room\n  variables:\n    ulm_card_media_player_enable_popup: true\n
    "},{"location":"usage/popups/popup_media_player/#credits","title":"Credits","text":"
       
    • Designed by schumijo and bavo (special thanks to him for his help on this development)).
      •  
    "},{"location":"usage/popups/popup_power_outlet/","title":"Power Outlet Popup","text":""},{"location":"usage/popups/popup_power_outlet/#power-outlet-popup","title":"Power outlet popup","text":""},{"location":"usage/popups/popup_power_outlet/#requirements","title":"Requirements","text":"
       
    • mini-graph-card (download for HACS)
      •  
    "},{"location":"usage/popups/popup_power_outlet/#card-compatibility","title":"Card compatibility","text":"
    This popup is displayed using custom_actions and it is compatible with the following cards/chips :
     
       
    • card_generic
      •  
    • card_generic_swap
      •  
    • card_binary_sensor
      •  
    • card_binary_sensor_alert
      •  
    • card_power_outlet
      •  
    • card_input_boolean
      •  
    • card_battery
      •  
    "},{"location":"usage/popups/popup_power_outlet/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_popup_power_outlet_sensor1 sensor.metered_power yes Sensor entity displayed on top left button ulm_popup_power_outlet_sensor2 sensor.metered_electric_consumed yes Sensor entity displayed on top right button ulm_popup_power_outlet_graph_sensor sensor.metered_power yes Sensor entity displayed on graph"},{"location":"usage/popups/popup_power_outlet/#how-to-use","title":"How to use","text":"
    Breaking Change from version V1.1.2
     
    This popup can now be triggered with the custom action \"popup\". The popup template can be deleted and use instead the variable ulm_outlet_power_enable_popup: true to enable the use of the popup.
     
    For example :
     
    - type: \"custom:button-card\"\n  template:\n    - card_power_outlet\n  variables:\n    ulm_card_power_outlet_consumption_sensor: sensor.metered_wall_plug_switch_power_3\n    ulm_popup_power_outlet_sensor1: sensor.metered_wall_plug_switch_power_3\n    ulm_popup_power_outlet_sensor2: sensor.metered_wall_plug_switch_electric_consumed_kwh_2\n    ulm_popup_power_outlet_graph_sensor: sensor.metered_wall_plug_switch_power_3\n    ulm_outlet_power_enable_popup: true\n  entity: switch.metered_wall_plug_switch_2\n
    "},{"location":"usage/popups/popup_power_outlet/#credits","title":"Credits","text":"
       
    • Designed by schumijo and bavo (special thanks to him for his help on this development)).
      •  
    "},{"location":"usage/popups/popup_thermostat/","title":"Thermostat Popup","text":""},{"location":"usage/popups/popup_thermostat/#thermostat-popup","title":"Thermostat popup","text":""},{"location":"usage/popups/popup_thermostat/#card-compatibility","title":"Card compatibility","text":"
    This popup is displayed using hold_action and it is compatible with the following cards/chips :
     
       
    • card_thermostat
      •  
    "},{"location":"usage/popups/popup_thermostat/#variables","title":"Variables","text":"Variable Example Required Explanation ulm_card_thermostat_preset_mode true no Switch to Preset Mode"},{"location":"usage/popups/popup_thermostat/#how-to-use","title":"How to use","text":"
    To enable this popup, add the variable ulm_card_thermostat_enable_popup and set to true.
     
    Warning
     
    This is a different approach as the other popup_cards use.
     
    For example :
     
    - type: \"custom:button-card\"\n  template: card_thermostat\n  entity: climate.thermostat\n  variables:\n    ulm_card_thermostat_enable_popup: true\n    ulm_card_thermostat_preset_mode: true\n
    "},{"location":"usage/popups/popup_thermostat/#credits","title":"Credits","text":"
       
    • Designed by schumijo
      •  
    "},{"location":"usage/popups/popup_vacuum/","title":"Vacuum Popup","text":""},{"location":"usage/popups/popup_vacuum/#vacuum-popup","title":"Vacuum popup","text":""},{"location":"usage/popups/popup_vacuum/#requirements","title":"Requirements","text":"
    This popup does not work without the following card from HACS:
     
       
    • Vacuum Card (download from HACS)
      •  
    "},{"location":"usage/popups/popup_vacuum/#card-compatibility","title":"Card compatibility","text":"
    This popup is displayed using popup and it is compatible with the following cards/chips :
     
       
    • card_vacuum
      •  
    "},{"location":"usage/popups/popup_vacuum/#how-to-use","title":"How to use","text":"
    To enable this popup, add the variable ulm_card_vacuum_enable_popup and set to true.
     
    Warning
     
    This is a different approach as the other popup_cards use.
     
    For example :
     
    - type: \"custom:button-card\"\n  template: card_vacuum\n  entity: vacuum.garage\n  variables:\n    ulm_card_vacuum_enable_popup: true\n    uml_card_vacuum_camera: camera.vacuum\n
    "},{"location":"usage/popups/popup_vacuum/#credits","title":"Credits","text":"
       
    • Designed by Basbruss
      •  
    "},{"location":"usage/popups/popup_weather/","title":"Weather Popup","text":""},{"location":"usage/popups/popup_weather/#weather-popup","title":"Weather popup","text":""},{"location":"usage/popups/popup_weather/#requirements","title":"Requirements","text":"
       
    • weather-radar-card (download for HACS)
      •  
    "},{"location":"usage/popups/popup_weather/#how-to-use","title":"How to use","text":"
    To enable this popup, add the following code to your card:
     
      ulm_custom_popup:\n      template: \"popup_weather_forecast\"\n      entity: weather.xxx\n      popup_variables:\n          ulm_weather_popup_surpress_first_forecast: false\n
    "},{"location":"usage/popups/popup_weather/#variables","title":"Variables","text":"Variable Default Required Notes entity ulm_weather_popup_surpress_first_forecast false Suppress first forecast entry"},{"location":"usage/popups/popup_weather/#credits","title":"Credits","text":"
       
    • Designed by schumijo
      •  
    "}]}
\ No newline at end of file
diff --git a/setup/adaptive_dash/index.html b/setup/adaptive_dash/index.html
new file mode 100644
index 000000000..3f55d422f
--- /dev/null
+++ b/setup/adaptive_dash/index.html
@@ -0,0 +1,4089 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Adaptive Dashboard - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Adaptive Dashboard
    
+
+
+
    Minimalist_adaptive_dashboard
    
+
    Add Adaptive Dashboard
    
+
    To get full use of your Minimalist themed HA you need to setup some more custom_components (see requirements below). 
    
+This dashboard automatically changes based on the device/screen size your are using. You can also alter the cards showing on the right-side by double-tapping a card. (Steps to configure this are described below)
    
+
    Additional Requirements
    
+
    This dashboard make extensive use of state-switch and layout-card. These are available through HACS or as manual install from Github.
    
+
    
+
    Warning
    
+
    For now the state-switch works only with version v1.9.3 or below!
    
+
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Additional lovelace resources
    layout-card
    state-switch
    
+
    You need also configure an input_select with options for each popup_card and view you have configured. This input_select controls the cards showing on the right-side of the screen when in fullscreen mode.
    
+
    
+
    Popups
    
+
    Note: Not all device types do have Minimalist UI themed popups.
+Currently supported devices are: lights, mediaplayers, thermostats, sensors.
    
+
    
+
    You can setup an input_select either via the GUI or in YAML. See HA docs
    
+
    # Example configuration.yaml entry
+input_select:
+  minimalist_ui_switch:
+    name: Select popup/view
+    options:
+      - light 1
+      - light 2
+      - mediaplayer 1
+      - mediaplayer 2
+      - climate 1
+      - climate 2
+      - power 1
+      - power 2
+      - livingroom
+
    
+
    Setup
    
+
    To enable the adaptive dashboard you need to select the right option in the integration configuration menu. You can also set a name and icon for the new dashboard.
    
+
    hacs_adaptive_dashboard
    
+
    Once setup you should see another dashboard in your sidebar. This dashboard is filled with card_title template cards as placeholders on the pre-configured grid.
    
+
    We have also added a folder with all the needed files to customizing your new dashboard:
    
+
    config
+└── ui_lovelace_minimalist
+    ├── custom_cards
+    └── dashboard
+        └── ui-lovelace.yaml
+        └── adaptive-dash
+            └── adaptive-ui.yaml
+            └── popup
+                └── popup.yaml
+            └── views
+                └── livingroom.yaml
+                └── main.yaml
+
    
+
    Customizing
    
+
    The best place to start adding your personal cards is in adaptive-dash/views/main.yaml.
    
+
    
+
    Grid-Layout
    
+
    All files use CSS grids. By giving each card an own grid-area we can control there place in the dashboard. For more information on how grid-areas do work check this amazing guide.
    
+
    
+
    When you are familiar with CSS grids you can start to alter the grid-template-areas to your personal preference.
    
+
    Adding Cards
    
+
    You can assign cards to a certain grid-area by adding this to your card configuration. We already have put in this config for some cards and titles.
    
+
    view_layout:
+  grid-area: "card1"
+
    
+
    To put card_light to the area: card1; you have to paste in the code as in your normal Minimalist UI dashboard on the place of the placeholder.
    
+
    # Placeholder for card1 in main.yaml
+- view_layout:
+    grid-area: "card1"
+  type: "custom:button-card"
+  template: "card_title"
+  name: "Put here your <br> first card"
+  label: "grid-area: card1"
+
    
+
    # Example of a card_light assigned to area card1
+- view_layout:
+    grid-area: "card1"
+  type: "custom:button-card"
+  template: "card_light"
+  entity: "light.your_light"
+  variables:
+    ulm_card_light_enable_color: true
+    ulm_card_light_enable_slider: true
+    ulm_card_light_enable_popup: true
+
    
+
    Do this for all placeholders. You can always use less cards by deleting placeholders or add more cards by adding new areas under the grid-template-areas.
    
+
    For adapting the action use adaptive within the corresponding custom actions' variables. Take a look in the
+custom actions section within this docs.
    
+
    Adding popups on the right-side
    
+
    All cards on the right-side are configured in adaptive-dash/popup/popup.yaml.
    
+
    First you need to add the input_select you have created to the file.
    
+
    
+
    Important
    
+
    type: custom:state-switch
+view_layout:
+  grid-area: popup
+  show:
+    mediaquery: "(min-width: 1100px)"
+entity: input_select.minimalist_ui # put your input_select here
+
    
+
    
+
    We preconfigured multiple popups for different types of devices. In popup.yaml you only have to complete the information in the variables part. The light 1, mediaplayer 1, livingroom parts in the code refer to the options you have configuered in your input_select. Make sure they are spelled the same. (see documentation on state-switch)
    
+
    
+
    Warning
    
+
    Only uncomment the options you have configured!
+Else it could result in multiple errors in the dev-console of your browser.
    
+
    
+
    Follow this part to add a card to an option of your input_select:
+To add a light popup to your first light card you just have to add the corresponding entity:
    
+
    type: custom:state-switch
+view_layout:
+  grid-area: popup
+  show:
+    mediaquery: "(min-width: 1100px)"
+entity: input_select.minimalist_ui # put your input_select here
+default: default
+transition: slide-down
+transition_time: 500
+states:
+  ## Lights
+  light 1:
+    type: "custom:button-card"
+    template: "popup_light_brightness"
+    entity: "<your_entity>"
+
    
+
    You can also add any other card by copying its yaml code in without the hyphen (-)
    
+
    states:
+  ## Lights
+  light 1:
+    type: "custom:button-card"
+    template: "popup_light_brightness"
+    entity: "<your_entity>"
+  card 1:
+    type: "custom:button-card"
+    template: "<your_template>"
+
    
+
    
+
    Important!
    
+
    All options(devices) do need its own config in popup.yaml!
    
+
    
+
    To switch between popups we need to go back to adaptive-dash/views/main.yaml. Here we have to add two variables to the cards we want to show a popup off. After adding these variables the cards need to be double_tapped to change popups.
    
+
    variables:
+  ulm_input_select_option: light 1
+  ulm_input_select: input_select.minimalist_ui_switch
+
    
+
    Eventually the card_light we did configure should be like this:
    
+
    - view_layout:
+    grid-area: "card1"
+  type: "custom:button-card"
+  template: "card_light"
+  entity: "light.your_light"
+  variables:
+    ulm_card_light_enable_color: true
+    ulm_card_light_enable_slider: true
+    ulm_card_light_enable_popup: true
+    ulm_input_select_option: light 1
+    ulm_input_select: input_select.minimalist_ui_switch
+
    
+
    From here you can duplicate the steps for each card.
    
+
    
+
    Supported
    
+
    All cards working with official popups and the card_room support these variables. The name is uniform between all supported cards.
    
+
    
+
    Setup more views
    
+
    We already made a file for a second view: adaptive-dash/views/livingroom.yaml. You can make as many views as you want by duplicating and alter the views files.
    
+
    To make the new view visible you have to add some entry to adaptive-dash/adaptive-ui.yaml. You only have to change the name of the room/view to the new entry.
    
+
    
+Add an extra view example (click to open)
+
    title: "UI Lovelace Minimalist"
+theme: "minimalist-desktop"
+background: "var(--background-image)"
+views:
+  - type: "custom:grid-layout"
+    title: "home"
+    icon: "mdi:home"
+    path: "0"
+    layout:
+    grid-template-columns: "1fr 1fr"
+    grid-template-rows: "min-content"
+    grid-template-areas: |
+        "main popup"
+    mediaquery:
+        "(max-width: 1100px), (orientation: portrait)":
+        grid-template-columns: "100%"
+        grid-template-areas: "main"
+    cards:
+    - !include "views/main.yaml"
+    - !include "popup/popup.yaml"
+
+  - type: "custom:grid-layout"
+    title: "Livingroom"
+    icon: "mdi:sofa"
+    path: "Livingroom"
+    layout:
+    grid-template-columns: "1fr 1fr"
+    grid-template-rows: "min-content"
+    grid-template-areas: |
+        "livingroom popup"
+    mediaquery:
+        "(max-width: 1100px), (orientation: portrait)":
+        grid-template-columns: "100%"
+        grid-template-areas: "livingroom"
+    cards:
+    - !include "views/livingroom.yaml"
+    - !include "popup/popup.yaml"
+
+  - type: "custom:grid-layout"
+    title: "New View"
+    icon: "mdi:flower"
+    path: "New View"
+    layout:
+    grid-template-columns: "1fr 1fr"
+    grid-template-rows: "min-content"
+    grid-template-areas: |
+        "new_view popup"
+    mediaquery:
+        "(max-width: 1100px), (orientation: portrait)":
+        grid-template-columns: "100%"
+        grid-template-areas: "newview"
+    cards:
+    - !include "views/newview.yaml"
+    - !include "popup/popup.yaml"
+
    
+
    
+
    You can also show room views as a popup. To configure this add a !include entry in the popup.yaml file. As example we configured livingroom already. Make sure this is also an option in your input_select.
    
+
    # Add livingroom popup to popup.yaml
+livingroom: !include "../views/livingroom.yaml"
+
    
+
    Also add the two variables to the corresponding card_room:
    
+
    variables:
+  ulm_input_select_option: livingroom
+  ulm_input_select: input_select.minimalist_ui_switch
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/setup/configuration/index.html b/setup/configuration/index.html
new file mode 100644
index 000000000..13583abce
--- /dev/null
+++ b/setup/configuration/index.html
@@ -0,0 +1,3805 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Configuration - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Configuration
    
+
+
+
    Add theme to your Lovelace
    
+
    To get this theme with all the button templates working make sure at least the generated Lovelace Dashboard is working.
    
+
    YAML Mode
    
+
    As described in the installation step, we have already created a small sample dashboard for you, whose file is called ui-lovelace.yaml in the following directory when setting up the integration:
    
+
    config
+└── ui_lovelace_minimalist
+    ├── custom_cards
+    └── dashboard
+        └── ui-lovelace.yaml
+
    
+
    This example dashboard file already contains the necessary directory bindings with our templates from the custom_component and you can directly start customizing the dashboard according to your own wishes.
    
+
    However, if you want to use your own, possibly already existing, dashboard file, you must make the necessary bindings of the templates in it yourself. This can be done for example by specifying the following:
    
+
    # Button cards location
+button_card_templates: !include_dir_merge_named "custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
+
    
+
    
+
    Please note! This step is only necessary if you are not using the sample dashboard file created for you. The path specifications are relative. Depending on where you have stored your own Dashboard .yaml file, your path specification can differ from the example and must be adapted by you. In the example it was assumed that the .yaml file is located in the top level of the Home Assistant configuration.
    
+
    
+
    UI Mode
    
+
    
+
    Currently not supported
    
+
    The Problem: Home Assistant doesn’t let you include complete folders or even files in UI-mode. That means for you, you can’t work with the folder and file structure, we have provided in our download.
+You can manually go through the template files and copy the content that you need to paste in your raw-config-editor. However, this is very time-consuming and error-prone, which is why we have decided not to support this method at present.
    
+
    
+
    Custom Cards
    
+
    This integration also allows you to add your own Custom Button Cards. These cards are not part of the HACS installation and must be downloaded separately from the repo as needed. You can find an overview of the cards here in our wiki. The cards themselves for the download are on our repo here.
    
+
    To find some more detailed instructions to include the custom-cards to your dashboard take a look on this page.
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/setup/custom_actions/index.html b/setup/custom_actions/index.html
new file mode 100644
index 000000000..5c06956aa
--- /dev/null
+++ b/setup/custom_actions/index.html
@@ -0,0 +1,4445 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom actions - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Custom Actions
    
+
+
+
    Customize tap, double-tap and hold actions
    
+
    This 'theme' do offer support for customizing actions. Tap, double-tap and hold on different parts (card, icon and name) of the cards could be changed. To achieve this customization follow the instructions on this page.
    
+
    actions
    
+
    To change the normal behaviour of tap_action, double_tap_action and hold_action, edit custom_actions.yaml file located under /config/ui_lovelace_minimalist/custom_actions/.
    
+
    ---
+ulm_custom_actions:
+  variables:
+    ulm_card_tap_action: "toggle"
+    ulm_card_hold_action: "popup"
+    ulm_card_double_tap_action: "more-info"
+    ulm_icon_tap_action: "popup"
+    ulm_icon_hold_action: "none"
+    ulm_icon_double_tap_action: "none"
+    ulm_name_tap_action: "more-info"
+    ulm_name_hold_action: "toggle"
+    ulm_name_double_tap_action: "popup"
+
    
+
    Possible values for each variables are :
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    ValueDescription
    noneNo action
    toggleToggle an entity if available (for binary_sensor and sensor entity, none action is used)
    more-infoDisplay more-info window
    popupDisplay UI LOVELACE MINIMALIST popup if available and enabled on card (if not more-info action is used)
    adaptiveSwitch UI LOVELACE MINIMALIST popup on adaptive dashboard
     if current dashboard is adaptive (if not popup action is used)
    navigateNavigate to an other UI LOVELACE MINIMALIST view. Need additional variable (see below)
    
+
    Haptic feedback
    
+
    Next to the action also the haptic feedback of the actions can be configured in the custom_actions.yaml file:
    
+
    For each action a haptic feedback could be configured:
    
+
    ---
+ulm_custom_actions:
+  variables:
+    ulm_card_tap_haptic: "medium"
+    ulm_card_hold_haptic: "none"
+    ulm_card_double_tap_haptic: "none"
+    ulm_icon_tap_haptic: "none"
+    ulm_icon_hold_haptic: "none"
+    ulm_icon_double_tap_haptic: "none"
+    ulm_name_tap_haptic: "medium"
+    ulm_name_hold_haptic: "none"
+    ulm_name_double_tap_haptic: "none"
+
    
+
    Possible values for each variables (according to the underlying button card) are :
    
+
      
+
    • none
      • 
+
    • success
      • 
+
    • warning
      • 
+
    • failure
      • 
+
    • light
      • 
+
    • medium
      • 
+
    • heavy
      • 
+
    • selection
      • 
+
    
+
    
+
    Reloading
    
+
    Once you have edited custom_actions.yaml file, you must reload "UI LOVELACE MINIMALIST" configuration.
+Just go to "Configuration" --> "Settings" in Home Assistant and press the "UI_LOVELACE_MINIMALIST" button within the "YAML configuration reloading" section.
    
+
    
+
+
    To define the path of navigate action, add one of the following depending on your action :
    
+
      
+
    • ulm_card_tap_navigate_path
      • 
+
    • ulm_card_hold_navigate_path
      • 
+
    • ulm_card_double_tap_navigate_path
      • 
+
    • ulm_icon_tap_navigate_path
      • 
+
    • ulm_icon_hold_navigate_path
      • 
+
    • ulm_icon_double_tap_navigate_path
      • 
+
    • ulm_name_tap_navigate_path
      • 
+
    • ulm_name_hold_navigate_path
      • 
+
    • ulm_name_double_tap_navigate_path
      • 
+
    
+
    - type: "custom:button-card"
+  template: "card_cover"
+  entity: "cover.somfy_portail"
+  variables:
+    ulm_name_hold_action: "navigate"
+    ulm_name_hold_navigate_path: "/adaptive-dash/Livingroom"
+
    
+
    Call service action
    
+
    It is possible to call a service using the custom actions on the icon, name and card.
    
+
    To define the service and its data of call-service action, add one of the following
+variables depending on your action :
    
+
      
+
    • ulm_card_tap_service / ulm_card_tap_service_data
      • 
+
    • ulm_card_hold_service / ulm_card_hold_service_data
      • 
+
    • ulm_card_double_tap_service / ulm_card_double_tap_service_data
      • 
+
    • ulm_icon_tap_service / ulm_icon_tap_service_data
      • 
+
    • ulm_icon_hold_service / ulm_icon_hold_service_data
      • 
+
    • ulm_icon_double_tap_service / ulm_icon_double_tap_service_data
      • 
+
    • ulm_name_tap_service / ulm_name_tap_service_data
      • 
+
    • ulm_name_hold_service / ulm_name_hold_service_data
      • 
+
    • ulm_name_double_tap_service / ulm_name_double_tap_service_data
      • 
+
    
+
    The following configuration shows the configuration of a service call using the
+tap action.
    
+
    - type: "custom:button-card"
+  template: "card_cover"
+  entity: "cover.somfy_portail"
+  variables:
+    ulm_name_tap_action: "call-service"
+    ulm_name_tap_service: "light.toggle"
+    ulm_name_tap_service_data:
+      entity_id: light.light_livingroom_2
+
    
+
    Overwrite custom actions
    
+
    When creating a dashboard, custom actions and the haptic feedback can be overwritten on your card definition.
+For example, this code will overwrite the tap action on card with more-info action :
    
+
    - type: "custom:button-card"
+  template: "card_cover"
+  entity: "cover.somfy_portail"
+  variables:
+    ulm_card_tap_action: "more-info"
+    ulm_card_tap_haptic: "success"
+
    
+
    Custom Popups
    
+
    The implementation of the custom action now supports the configuration of individual popups. The custom popup
+can be easily configured for each card.
    
+
    To enable a custom popup the variable ulm_custom_popup must be set within the card.
+This variable have three subvariables template, entity and popup_variables. The template must be the name of the
+template that should be loaded. The necessary configuration variables for the popup can be configured in
+the variable popup_variables.
    
+
    Usually the popup uses the same entity as the card that calls the popup. It is also possible to overwrite the entity
+for the popup. Therefore the entity can be set using the entity variable
+within the ulm_custom_popup. This entity variable is optional. It is also possible to disable the entity of the
+custom popup it the entity variable within the ulm_custom_popup is set tonone`.
    
+
    - type: 'custom:button-card'
+  template: card_power_outlet
+  entity: switch.power_outlet_livingroom
+  variables:
+    ulm_card_power_outlet_consumption_sensor: sensor.power_outlet_livingroom_consumption
+    ulm_card_power_outlet_name: Power Outlet Livingroom
+    ulm_custom_popup:
+      template: "popup_power_outlet_stats"
+      entity: switch.power_outlet_livingroom
+      popup_variables:
+        ulm_popup_power_outlet_sensor1: sensor.power_outlet_livingroom
+        ulm_popup_power_outlet_sensor2: sensor.power_outlet_livingroom_consumption
+        ulm_popup_power_outlet_graph_sensor: sensor.power_outlet_livingroom
+        ulm_popup_power_outlet_entity: switch.power_outlet_livingroom
+
    
+
    The available popup templates popup_media_player_infos, popup_light_brightness, popup_thermostat_temperature
+or popup_power_outlet_stats can already be used with the custom popups.
    
+
    This implementation allows the easy creation of custom popups that can be loaded by other cards.
    
+
    
+
    Light, Media Player, Thermostat
    
+
    The card_light, card_media_player and card_thermostat uses a different approach. Therefore the popup can
+be simply enabled by setting one of the variables  ulm_card_light_enable_popup, ulm_card_thermostat_enable_popup
+or  ulm_card_media_player_enable_popup to true.
    
+
    
+
    For developers
    
+
    To enable action customization on your custom cards, use either the icon_more_info_new, icon_more_info_alert or
+the extended_card template. There is no need to implement the ulm_card_actions template anymore.
    
+
    There are three possibilities to include the custom actions into your custom cards:
    
+
    Use template extend_card as combination of two cards
    
+
    The simplest way to create a custom card that uses these custom actions is the combination of two cards.
    
+
    For enabling the feature the custom card must implement the template extended_card.
+Then two custom fields must be used:
    
+
      
+
    • item1 must be a card that already implements the template icon_more_info_new.
+  Most of the core cards already implements this template.
      • 
+
    • item2 can be any Lovelace card that should extend the card.
      • 
+
    
+
    If you add custom styles to item2 then following code should be added into the style field
    
+
    ha-card {
+  box-shadow: none;
+  border-radius: var(--border-radius);
+}
+
    
+
    The already available Graph card (card_graph) is an example for this implementation. As
+item1 a generic_card is used. The item2 provides a mini-graph-card.
    
+
    
+Graph card as example
+
    card_binary_sensor_alert.yaml
    ---
+### Card Graph ###
+card_graph:
+  template:
+    - "extended_card"
+  variables:
+    ulm_card_graph_color: "var(--info-color)"
+    ulm_card_graph_name: "[[[ return entity.attributes.friendly_name; ]]]"
+    ulm_card_graph_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_graph_color2: "var(--info-color)"
+    ulm_card_graph_entity2: ""
+    ulm_card_graph_hours: 24
+    ulm_card_graph_type: "fill"
+    ulm_card_graph_points: "0.5"
+    ulm_card_graph_group_by: "interval"
+    ulm_card_graph_line_width: 5
+    ulm_card_graph_icon_color: ""
+  triggers_update:
+    - "[[[ return variables.ulm_card_graph_entity2 ]]]"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "card_generic"
+        variables:
+          ulm_card_generic_icon: "[[[ return variables.ulm_card_graph_icon; ]]]"
+          ulm_card_generic_name: "[[[ return variables.ulm_card_graph_name; ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              custom_fields:
+                item1:
+                  card:
+                    type: "custom:button-card"
+                    styles:
+                      icon:
+                        - color: >
+                            [[[
+                              var color = variables.ulm_card_graph_icon_color;
+                              if (variables.ulm_card_graph_icon_color){
+                                return 'rgba(var(--color-' + color + '),1)';
+                              }
+                              return 'rgba(var(--color-theme),0.2)';
+                            ]]]
+                      img_cell:
+                        - background-color: >
+                            [[[
+                              var color = variables.ulm_card_graph_icon_color;
+                              if (variables.ulm_card_graph_icon_color){
+                                return 'rgba(var(--color-' + color + '),0.2)';
+                              }
+                              return 'rgba(var(--color-theme),0.05)';
+                            ]]]
+    item2:
+      card:
+        type: "custom:mini-graph-card"
+        entities: >
+          [[[
+            var ent = [];
+            ent.push(variables.ulm_card_graph_entity);
+            if(variables.ulm_card_graph_entity2 != "")
+              ent.push(variables.ulm_card_graph_entity2);
+            return ent;
+          ]]]
+        line_color: >
+          [[[
+            var col = [];
+            col.push(variables.ulm_card_graph_color);
+            if(variables.ulm_card_graph_color2 != "")
+              col.push(variables.ulm_card_graph_color2);
+            return col;
+          ]]]
+        show:
+          name: false
+          icon: false
+          legend: false
+          state: false
+          graph: "[[[ return variables.ulm_card_graph_type=='fill'?'line':variables.ulm_card_graph_type; ]]]"
+          fill: "[[[ return variables.ulm_card_graph_type=='fill'?true:false; ]]]"
+        hours_to_show: "[[[ return variables.ulm_card_graph_hours; ]]]"
+        points_per_hour: "[[[ return variables.ulm_card_graph_points; ]]]"
+        group_by: "[[[ return variables.ulm_card_graph_group_by; ]]]"
+        line_width: "[[[ return variables.ulm_card_graph_line_width; ]]]"
+        style: |
+          ha-card {
+            box-shadow: none;
+            border-radius: var(--border-radius);
+          }
+
    
+
    
+
    Use template icon_more_info_new or icon_more_info_alert
    
+
    The card must implement the template icon_more_info_newor icon_more_info_alert. Then it must implement a custom field
+item1 which is also a custom:button-card. This card must have the custom fields item1which represents the icon and
+item2which represents the name.
    
+
    Most of the internal card templates uses this option. Take a look into the code.
    
+
    
+Generic card as example
+
    card_binary_sensor_alert.yaml
    ---
+### Card Generic ###
+card_generic:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_generic_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_generic_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_outlet_power_enable_popup: false
+    ulm_card_generic_color: "blue"
+    ulm_card_generic_force_background_color: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (variables.ulm_card_generic_force_background_color) {
+                  var color = variables.ulm_card_generic_color;
+                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                }
+              ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_generic_icon; ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_generic_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.2)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_generic_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_translation_state ]]]"
+              label: "[[[ return variables.ulm_card_generic_name ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_generic_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_generic_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+
    
+
    
+
    Use template ulm_actions_card_overlay
    
+
    If you implement a custom card that is based on another Lovelace card like the
+weather card you can simply enable custom
+card actions by using the template ulm_actions_card_overlay on the card. This template adds an overlay over the whole card and
+reaction on the tap, hold, double tap actions. It also enables the integration of custom popups for the card.
+Actions of the underlying card will be disabled by this method.
    
+
    The weather card gives you an example and
+will show the usage of this method.
    
+
    Individual implementation
    
+
    The following script shows the usage off all necessary variables and template that will be used by the custom actions.
    
+
    The card must implement the templates ulm_custom_actions and ulm_action_card in the correct order.
+The example shows the custom fields item1 that implements the redirection of an icon field and item2 that implements the
+redirecton of a name field.
    
+
    ---
+custom_card:
+  template:
+    - "ulm_custom_actions"
+    - "ulm_actions_card"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        entity: "[[[ return entity.entity_id ]]]"
+        template:
+          - "ulm_actions_icon"
+        variables:
+          ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
+          ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
+          ulm_icon_tap_action: "[[[ return variables.ulm_icon_tap_action; ]]]"
+          ulm_icon_tap_haptic: "[[[ return variables.ulm_icon_tap_haptic; ]]]"
+          ulm_icon_tap_navigate_path: "[[[ return variables.ulm_icon_tap_navigate_path; ]]]"
+          ulm_icon_tap_service: "[[[ return variables.ulm_icon_tap_service; ]]]"
+          ulm_icon_tap_service_data: "[[[ return variables.ulm_icon_tap_service_data]]]"
+          ulm_icon_hold_action: "[[[ return variables.ulm_icon_hold_action; ]]]"
+          ulm_icon_hold_haptic: "[[[ return variables.ulm_icon_hold_haptic; ]]]"
+          ulm_icon_hold_navigate_path: "[[[ return variables.ulm_icon_hold_navigate_path; ]]]"
+          ulm_icon_hold_service: "[[[ return variables.ulm_icon_hold_service; ]]]"
+          ulm_icon_hold_service_data: "[[[ return variables.ulm_icon_hold_service_data]]]"
+          ulm_icon_double_tap_action: "[[[ return variables.ulm_icon_double_tap_action; ]]]"
+          ulm_icon_double_tap_haptic: "[[[ return variables.ulm_icon_double_tap_haptic; ]]]"
+          ulm_icon_double_tap_navigate_path: "[[[ return variables.ulm_icon_double_tap_navigate_path; ]]]"
+          ulm_icon_double_tap_service: "[[[ return variables.ulm_icon_double_tap_service; ]]]"
+          ulm_icon_double_tap_service_data: "[[[ return variables.ulm_icon_double_tap_service_data]]]"
+          ulm_custom_popup: "[[[ return variables.ulm_custom_popup; ]]]"
+    item2:
+      card:
+        type: "custom:button-card"
+        entity: "[[[ return entity.entity_id ]]]"
+        template:
+          - "ulm_actions_name"
+        variables:
+          ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
+          ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
+          ulm_name_tap_action: "[[[ return variables.ulm_name_tap_action; ]]]"
+          ulm_name_tap_haptic: "[[[ return variables.ulm_name_tap_haptic; ]]]"
+          ulm_name_tap_navigate_path: "[[[ return variables.ulm_name_tap_navigate_path; ]]]"
+          ulm_name_tap_service: "[[[ return variables.ulm_name_tap_service; ]]]"
+          ulm_name_tap_service_data: "[[[ return variables.ulm_name_tap_service_data]]]"
+          ulm_name_hold_action: "[[[ return variables.ulm_name_hold_action; ]]]"
+          ulm_name_hold_haptic: "[[[ return variables.ulm_name_hold_haptic; ]]]"
+          ulm_name_hold_navigate_path: "[[[ return variables.ulm_name_hold_navigate_path; ]]]"
+          ulm_name_hold_service: "[[[ return variables.ulm_name_hold_service; ]]]"
+          ulm_name_hold_service_data: "[[[ return variables.ulm_name_hold_service_data]]]"
+          ulm_name_double_tap_action: "[[[ return variables.ulm_name_double_tap_action; ]]]"
+          ulm_name_double_tap_haptic: "[[[ return variables.ulm_name_double_tap_haptic; ]]]"
+          ulm_name_double_tap_navigate_path: "[[[ return variables.ulm_name_double_tap_navigate_path; ]]]"
+          ulm_name_double_tap_service: "[[[ return variables.ulm_name_double_tap_service; ]]]"
+          ulm_name_double_tap_service_data: "[[[ return variables.ulm_name_double_tap_service_data]]]"
+          ulm_custom_popup: "[[[ return variables.ulm_custom_popup; ]]]"
+
    
+
    
+
    For developes who have already implemented the custom actions on their card
    
+
    There could be some breaking changes:
    
+
      
+
    • The custom card should either implement the icon_more_info_new or the extended_card
      • 
+
    • The template ulm_actions_card can be removed
      • 
+
    • The variable redirections for the ulm_*_action can be removed
      • 
+
    
+
    Also the custom popup feature has some breaking changes:
+The variables ulm_card_light_enable_popup, ulm_card_thermostat_enable_popup and  ulm_card_media_player_enable_popup
+aren't used internally anymore. The are only working on their appropriate cards as configuration option for the end user
+of the card. So the custom_popup variable should be used instead.
    
+
    
+
    For developers of custom popups
    
+
    Custom popups must be a custom:button-card. It is also recommended to disable the icon, name and label within the
+card configuration using
    
+
    show_icon: false
+show_name: false
+show_label: false
+show_units: false
+
    
+
    The usage of variables within the popup have some restrictions. Default variables of the popup don't work in the same
+way as for other custom button cards. The default variables -- defined in the variables section -- will always be overwritten by
+the custom actions caller.
    
+
    The following code won't work on custom popup cards:
    
+
    popup_weather_forecast:
+...
+  variables:
+    ulm_weather_popup_surpress_first_forecast: false
+...
+
    
+
    Instead of using the variables section of the card the variables must be checked within a JavaScript template. The following
+code shows an example how to check and define a default value of custom popup variable:
    
+
    element: >
+  [[[
+    let surpress_first_forecast = ('ulm_weather_popup_surpress_first_forecast' in variables) ? variables.ulm_weather_popup_surpress_first_forecast : false;
+
+    if (surpress_first_forecast) {
+      ...
+    }
+
+    return surpress_first_forecast;
+  ]]]
+
    
+
    The code checks if the variable is available before reading from the variabl and if the variable isn't available it will set a default value.
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/setup/custom_cards/index.html b/setup/custom_cards/index.html
new file mode 100644
index 000000000..4c8f40a05
--- /dev/null
+++ b/setup/custom_cards/index.html
@@ -0,0 +1,3801 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Configuration - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Custom cards
    
+
+
+
    Add Custom-cards to your dashboard
    
+
    This 'theme' and his community do offer support for multiple great Custom-cards. To use and download these Custom-cards follow the instructions on this page.
    
+
    
+
      🚀  New Custom Card Selection Feature!  🚀
    
+
    Since the release of v1.1.0 support has been build in to select custom/community cards that are available in the main branch on our Github Repository in the custom_cards folder. This Removes the need for copying over files from the Github Repo and put them in the /config/ui_lovelace_minimlist/custom_cards folder.
+You can select the custom cards you want to use in your integration options (see installation). This requires a GitHub account. Alternatively
+you can copy the custom cards you want to use as outlined below.
    
+
    
+
    Custom Cards
    
+
    This integration also allows you to add your own Custom Button Cards. These cards are not part of the HACS installation and must be downloaded separately from the repo as needed. You can find an overview of the cards here in our wiki. The cards themselves for the download are on our repo here, or select them on the integration Configuration page.
    
+
    You might have noticed, during the installation process a directory for UI Lovelace Minimalist is/should be created in the Home Assistant configuration directory (in the folder /config). The directory is named ui_lovelace_minimalist, within this directory you can put custom cards in the folder custom_cards.
+Basically you just have to create an folder inside ui_lovelace_minimalist/custom_cards for each custom_card you want to add and put the custom_card.yaml file and the translation file you need for the respective custom_card inside. These cards will then be merged into a directory together witch the cards of this integration and the selected Language.
    
+
    
+
    Translation files for custom cards
    
+
    Most Custom Cards do not work without adding a small translation file. These files can be found in the corresponding folder of a particular Custom Card within a folder languages. Make sure to only download the translation file you need. As adding multiple translation files can give unwanted results/errors!
    
+
    
+
    Make sure it's in the format like the following example:
    
+
    config
+└── ui_lovelace_minimalist
+    ├── custom_cards
+    |   ├── custom_card_1
+    |   |   ├── custom_card_1.yaml
+    |   |   └── EN.yaml
+    |   └── custom_card_2
+    |       ├── custom_card_2.yaml
+    |       └── EN.yaml
+    └── dashboard
+
    
+
    
+
    Warning
    
+
    Do not alter files in custom_components/ui_lovelace_minimalist as those changes will be overridden with each new release/update through HACS!!
    
+
    
+
    You don't need to do any extra inclusion in your dashboard yaml via !include, the custom_cards will be copied from this folder to the custom_component directory. The custom_cards folder itself remains untouched. A list of all currently available custom_cards can be found on our repo here: https://github.com/UI-Lovelace-Minimalist/UI/tree/main/custom_cards
    
+
    
+
    Reloading
    
+
    Once you have added new custom_cards, you can always reload that folder via Home Assistant and add the new cards to the config.
+Just go to "Developer Tools" in Home Assistant and press the "UI_LOVELACE_MINIMALIST" button within the "YAML configuration   reloading" section.
    
+
    
+
    Develop your own Custom-cards
    
+
    You can always manual add new YAML-files with card-templates to /config/ui_lovelace_minimalist/custom_cards for your own use.
+If you want to share and contribute your custom-cards to the community please read this page.
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/setup/customizing/index.html b/setup/customizing/index.html
new file mode 100644
index 000000000..a2e6c6934
--- /dev/null
+++ b/setup/customizing/index.html
@@ -0,0 +1,3978 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Customizing - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Customizing
    
+
+
+
+
    When you have finished the installation process successfully it's time to start customizing your dashboard.
+You can find your ui-minimalist-lovelace file here:
    
+
    config
+└── ui_lovelace_minimalist
+    ├── custom_cards
+    └── dashboard
+        └── ui-lovelace.yaml
+
    
+
    It should look like this:
    
+
    
+ui-lovelace.yaml
+
    ---
+button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
+
+title: "UI Lovelace Minimalist"
+theme: "minimalist-desktop"
+background: "var(--background-image)"
+# views: !include_dir_merge_list "views/"
+views:
+  - title: "Example View"
+    path: 0
+    icon: "mdi:flower"
+    cards:
+      - type: "vertical-stack"
+        cards:
+          - type: "custom:button-card"
+            template: "card_title"
+            name: "Congrats with your installation 🎉"
+            label: "Explore some of the wonderful 'Minimalistic-UI' cards we offer here"
+          - type: "custom:auto-entities"
+            card:
+              type: "grid"
+              columns: 1
+              square: false
+            card_param: "cards"
+            sort:
+              count: 1
+            filter:
+              include:
+                - domain: "weather"
+                  options:
+                    type: "custom:button-card"
+                    template: "card_welcome_scenes"
+                    variables:
+                      ulm_weather: "this.entity_id"
+          - type: "custom:button-card"
+            template: "card_title"
+            name: "[[[ hass.resources[hass['language']]['ui.panel.lovelace.editor.card.light.name'] ]]]"
+            label: "This is the Minimalist-light-card"
+          - type: "custom:auto-entities"
+            card:
+              type: "grid"
+              columns: 2
+              square: false
+            card_param: "cards"
+            sort:
+              count: 4
+            filter:
+              include:
+                - domain: "light"
+                  options:
+                    type: "custom:button-card"
+                    template: "card_light"
+                    variables:
+                      ulm_card_light_enable_slider: true
+                      ulm_card_light_enable_color: true
+                      ulm_card_light_enable_popup: true
+          - type: "custom:button-card"
+            template: "card_title"
+            name: "Binary Sensors"
+            label: "This is the Minimalist-binary_sensor-card"
+          - type: "custom:auto-entities"
+            card:
+              type: "grid"
+              columns: 2
+              square: false
+            card_param: "cards"
+            sort:
+              count: 4
+            filter:
+              include:
+                - domain: "binary_sensor"
+                  options:
+                    type: "custom:button-card"
+                    template: "card_binary_sensor_alert"
+                    variables:
+                      - ulm_card_binary_sensor_alert: true
+          - type: "custom:button-card"
+            template: "card_title"
+            name: "[[[ hass.resources[hass['language']]['ui.panel.lovelace.editor.card.sensor.name'] ]]]"
+            label: "This is the Minimalist-sensor-card"
+          - type: "custom:auto-entities"
+            card:
+              type: "grid"
+              columns: 2
+              square: false
+            card_param: "cards"
+            sort:
+              count: 4
+            filter:
+              include:
+                - domain: "sensor"
+                  options:
+                    type: "custom:button-card"
+                    template: "card_generic"
+          - type: "custom:button-card"
+            template: "card_title"
+            name: "[[[ hass.resources[hass['language']]['ui.dialogs.entity_registry.editor.device_classes.binary_sensor.battery'] ]]]"
+            label: "This is the Minimalist-battery-card"
+          - type: "custom:auto-entities"
+            card:
+              type: "grid"
+              columns: 2
+              square: false
+            card_param: "cards"
+            sort:
+              count: 4
+            filter:
+              include:
+                - attributes:
+                    unit_of_measurement: "%"
+                    device_class: "battery"
+                  options:
+                    type: "custom:button-card"
+                    template: "card_battery"
+                    variables:
+                      ulm_card_battery_battery_state_entity_id: "this.entity_id"
+                      ulm_card_battery_battery_level_danger: 30
+                      ulm_card_battery_battery_level_warning: 80
+
    
+
    
+
    How to customize the dashboard
    
+
    You can customize your dashboard like any other YAML-based lovelace dashboard.
    
+
    
+
    UI-mode is not yet supported
    
+
    
+
    So first let add some cards. These can be found on the Wiki. As an example we will add the card_light and card_vacuum next to each other with help of a horizontal-stack. Please read carefully the wiki-page of each of the cards to understand their specific variables.
    
+
    ---
+button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
+
+title: "UI Lovelace Minimalist"
+theme: "minimalist-desktop"
+background: "var(--background-image)"
+# views: !include_dir_merge_list "views/"
+views:
+  - title: "Example View"
+    path: 0
+    icon: "mdi:flower"
+    cards:
+      - type: "horizontal-stack"
+        cards:
+          - type: "custom:button-card"
+            template: card_light
+            entity: light.living_room
+            variables:
+              ulm_card_light_enable_slider: true
+              ulm_card_light_enable_color: true
+          - type: "custom:button-card"
+            template: "card_vacuum"
+            entity: "vacuum.roborock_s5"
+
    
+
    
+
    The path: in the example above is also the path name used in navigation_path:
    
+
    
+
    Add extra views (tabs)
    
+
    All views/tabs are created as list items underneath:
    
+
    views:
+
    
+
    Make sure you set at least parameters for title, path and icon for each view
    
+
    views:
+  - title: "Main"
+    path: 0
+    icon: "mdi:flower"
+    cards:
+      - type: "custom:button-card"
+            template: card_light
+            entity: light.living_room
+            variables:
+              ulm_card_light_enable_slider: true
+              ulm_card_light_enable_color: true
+  - title: "Lights"
+    path: lights
+    icon: "mdi:lightbulb"
+    cards:
+      - type: "custom:button-card"
+            template: card_light
+            entity: light.living_room
+            variables:
+              ulm_card_light_enable_slider: true
+              ulm_card_light_enable_color: true
+
    
+
    Add multiple dashboards
    
+
    After you have build your first dashboard with UI-Minimalist it's time to build multiple dashboards.
+If you would to be able to adjust non-UI-Minimalist with the UI-mode it's best to work with storage mode.
+For the first dashboard we did all the configuration for you. To add a second one you need to take a few steps.
    
+
    Add another ui-lovelace.yaml to your dashboard folder:
    
+
    config
+└── ui_lovelace_minimalist
+    ├── custom_cards
+    └── dashboard
+        └── ui-lovelace.yaml
+        └── ui-lovelace_2.yaml
+
    
+
    Add a reference to it in configuration.yaml:
    
+
    lovelace:
+  mode: storage
+  # Add yaml dashboards
+  dashboards:
+    lovelace-minimalist-2:
+      mode: yaml
+      title: Minimalist 2
+      icon: mdi:flower
+      show_in_sidebar: true
+      filename: ui_lovelace_minimalist/dashboard/ui-lovelace_2.yaml
+
    
+
    
+
    You don't need to add the first dashboard which is installed with the integration
    
+
    
+
    As mentioned on the configuration page you need to add a line of code to load in all Minimalist card templates. 
    
+The start of each new dashboard file should therefore, look like this:
    
+
    ---
+button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"
+
+title: "My new dashboard"
+theme: "minimalist-desktop"
+background: "var(--background-image)"
+# views: !include_dir_merge_list "views/"
+views:
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/setup/download/index.html b/setup/download/index.html
new file mode 100644
index 000000000..e0c8d8549
--- /dev/null
+++ b/setup/download/index.html
@@ -0,0 +1,3931 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Prepare & Download - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Download
    
+
+
+
+
    Before get started on anything, make sure you have created a backup of your home assistant configuration.
    
+
    
+
    In case you experience problems during installation please reach join the Discord Server.
    
+
    
+
    You can install this UI Lovelace Minimalist Theme manual or through HACS.
    
+
    You should have a HomeAssistant (HA) instance running, preferably with HACS installed and you should know the basics in using HA, eg. how to change settings in your lovelace configuration.
    
+
    You have access to your config folder of HA. Doesn’t matter which way this is, but you need to be able to upload and change files in your config. If you’re running HA-OS or a supervised install of HA, we highly recommend the Samba AddOn (see the AddOn page for instructions) and for editing the File editor AddOn or a good editor like Notepad++ or SublimeText for your OS.
    
+
    
+
    Breaking Changes
    
+
    
+
    This integration is still under heavy development and might cause breaking changes
    
+
    HACS Download
    
+
    Prerequisites
    
+
    For the pop-up cards to work it's required to install the Custom Integration called browser-mod. This can be done in HACS and search under Integration on browser-mod. Optionally you can install Frontend modules, but the integration also has a checkmark to include and configure them for you.
    
+
    Install Repository
    
+
    To find this Integration on HACS we first need to add the UI Lovelace Minimalist (ULM) repository to Custom Reposistories.
    
+
      
+
    1. Go to HACS
      2. 
+
    2. Click on Integrations
      3. 
+
    3. Search for "UI Lovelace Minimalist" and click "Download this Repository with HACS"
      4. 
+
    4. Select the version (will auto select latest)
      5. 
+
    5. Now we need to restart home-assistant under Open your Home Assistant instance and show your server controls.
      6. 
+
    6. Wait until Home assistant is restarted and Continue to "Install Integration".
      7. 
+
    
+
    
+
    Manual Download
    
+
    If you can't or don't like to use HACS, you still have the possibility to use this fantastic "theme"
    
+
    Prerequisites
    
+
    In order to function correctly, the UI Lovelace Mininmalist "Theme" requires some additional integrations and lovelace resources. While we can install most of these for you during the installation via HACS, you will also have to install and configuring them manually in advance for a manual installation.
    
+
    Required Integration
    
+
+
    Required Lovelace Resources
    
+
+
    You can install these via HACS or manually.
    
+
    Some resources (as marked above with **) might not be available in HACS by default.
+To find and install these using HACS, first add them as custom repositories.
    
+
    Download Release File
    
+
    Go to the release page and download the ui_lovelace_minimalist.zip attached to the latest release.
    
+
    Unpack the file and move the folder it contains called ui_lovelace_minimalist to the following directory of your Home Assistant configuration:
    
+
    /config/custom_components/
    
+
    If this folder does not exist in your configuration directory, create it.
+Then you have to restart your Home Assistant and can follow the step "Install Integration".
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/setup/installation/index.html b/setup/installation/index.html
new file mode 100644
index 000000000..07d55b479
--- /dev/null
+++ b/setup/installation/index.html
@@ -0,0 +1,3811 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Installation - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Installation
    
+
+
+
+
    Install Integration
    
+
    Open your Home Assistant instance and start setting up by following these steps:
    
+
      
+
    • Navigate to "Settings" --> "Devices & Services"
      • 
+
    • Click "+ Add Integration"
      • 
+
    • Search for and select -> "UI Lovelace Minimalist"
      • 
+
    
+
    Or you can use the My Home Assistant Button below.
    
+
    
+
    Unsaved Settings
    
+
    Currently the settings are not stored between initial setup and the settings after installation. After installation the settings drop back to their default values. This bug is reported and looked at.
    
+
    
+
    Open your Home Assistant instance and start setting up a new integration.
    
+
    Now you can configure the Integration, you can do this also after it's installed!
    
+
    hacs_integration_config
    
+
      
+
    • Language: Will set the language for the Integration.
      • 
+
    • Enable creation of a Dashboard entry in the Side panel: If you want to add an Entry in the Side Panel for the auto generated Dashboard. (Still under heavy development!)
      • 
+
    • Side panel title: Will set the title for the Lovelace Dashboard in the Sidebar.
      • 
+
    • Side panel icon: Which icon to put in front of the Title.
      • 
+
    • Enable adaptive Dashboard with popup splitview: Creates an entry for the adaptive dashboard
      • 
+
    • Adaptive panel title: Will set the title for the adaptive dashboard in the Sidebar.
      • 
+
    • Adaptive panel icon: Which icon to put in front of the adaptive dashboard sidebar entry.
      • 
+
    • Theme: Choose a theme of your choice (Note: Both themes will be installed anyway and can be customized later if needed.)
      • 
+
    
+
    
+
    Currently, it may happen that themes are not automatically selected correctly for you in all cases automatically. Please make sure that the minimalist theme is correctly selected in your Home Assistant settings (click on your profile picture in Home Assistant, bottom left).
    
+
    
+
      
+
    • Theme path: Make sure this is set to the same path as is configured in your configuration.yaml (default: themes/)
      • 
+
    
+
    
+
    Please make sure that you have included this themes/ folder in your configuration.yaml in the frontend settings. Unfortunately, this is something that the HACS integration cannot do for you. If you use the themes/ folder, your entry in configuration.yaml must look like this for example:
    
+
    frontend:
+  themes: !include_dir_merge_named themes
+
    
+
    You will also need to change your user theme to the chosen theme or else no visual modifications will work.
    
+
    
+
      
+
    • Include Custom Cards: This will make sure almost all dependency cards are included and configured for you.
      • 
+
    
+
    
+
    Activate "Include Custom Cards" only if you have not already installed the required Lovelace resources yourself, or if you dont want to install them by yourself. Otherwise this can currently lead to a freeze of the frontend due to double loaded lovelace resources.
    
+
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Included lovelace resources
    button-card
    lovelace-card-mod
    mini-graph-card
    mini-media-player
    my-cards-slider-card
    light-entity-card
    auto-entities
    simple-weather-card
    weather-radar-card
    lovelace-layout-card
    lovelace-state-swtch
    
+
      
+
    • Select Community Cards you want to enable: Selected custom cards will be downloaded automatically to enable usage. Requires a GitHub account. Restart or reload your configuration after toggling this setting. If needed, a notification will appear, indicating that GitHub needs to be set up. You will be prompted to go to your integrations and to reconfigure this integration. Selecting "reconfigure" on your Lovelace Minimalist UI integration, the GitHub-Login-flow will start. You might need to restart HomeAssistant, when your selected community cards change.
      • 
+
    
+
    Hit submit and in the Sidebar a new Dashboard entry should appear.
+A new file for the dashboard configuration, with a small example, where you can generate your own layout should have been created under that location:
    
+
    config
+└── ui_lovelace_minimalist
+├── custom_cards
+└── dashboard
+└── ui-lovelace.yaml
+
    
+
    In case you want to use your own ui-lovelace files go to Configuration.
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/sitemap.xml b/sitemap.xml
new file mode 100644
index 000000000..332a1e5b1
--- /dev/null
+++ b/sitemap.xml
@@ -0,0 +1,479 @@
+
+
+    
+         https://ui-lovelace-minimalist.github.io/UI/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/development/card_style_guide/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/development/custom_cards/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/development/docs_style_guide/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/setup/adaptive_dash/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/setup/configuration/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/setup/custom_actions/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/setup/custom_cards/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/setup/customizing/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/setup/download/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/setup/installation/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/troubleshooting/troubleshooting/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_battery/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_binary_sensor/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_binary_sensor_alert/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_cover/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_fan/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_generic/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_generic_swap/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_graph/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_input_boolean/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_light/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_media_player/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_navigate/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_person/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_power_outlet/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_scenes/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_script/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_thermostat/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_title/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_vacuum/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_vertical_button/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_weather/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_weather_ulm/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_welcome_scenes/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_alarm/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_back/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_icon_double_state/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_icon_label/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_icon_only/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_icon_state/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_mdi_icon_only/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_mdi_icon_state/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_navigate/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_power_consumption/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_presence_detection/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/chips/chip_temperature/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_afvalophaling/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_alarm_time/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_apexcharts/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_bar_card/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_camera/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_chromecast/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_damix48_power_details/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_device_tracker/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_drealine_roomview/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_eraycetinay_elapsed_time/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_eraycetinay_lock/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_esh_room/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_esh_welcome/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_haven_washer/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_heat_pump/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_homeassistant_updates/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_httpedo13_sun/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_httpedo13_thermostat/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_iAbadia_battery_chip/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_imswel_medias/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_imswel_person/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_input_datetime/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_input_number/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_irmajavi_entities/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_irmajavi_speedtest/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_irmajavi_weather/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_light_colorpick/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_media_player_sonos/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_more_power_outlet/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_mpse_gauge/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_mpse_printer/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_mpse_thermostat/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_mpse_wifisignal/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_nas/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_neekster_update/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_nik_clock/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_nik_door/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_nik_nas/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_nik_tablet/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_paddy_dwd_pollen/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_paddy_waste_collection/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_paddy_welcome/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_person_chip/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_person_info/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_playstation/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_qubino/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_ristou_person/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_saxel_fan/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_scenes/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_schumijo_car/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_schumijo_flower/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_sisimomo_printer/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_tpx01_aircondition/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_vncntdev_device_tracer/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_water_heater/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_wsly_pollen/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_yagrasdemonde_lights_count/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_chip_group_counter/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_chip_myenedis/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_chip_tesla_temperature/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_chip_update/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_chip_vlape_garage/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_template_shogun160_battery_info/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/layout/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/popups/popup_cover/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/popups/popup_light/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/popups/popup_media_player/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/popups/popup_power_outlet/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/popups/popup_thermostat/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/popups/popup_vacuum/
+         2024-12-24
+    
+    
+         https://ui-lovelace-minimalist.github.io/UI/usage/popups/popup_weather/
+         2024-12-24
+    
+
\ No newline at end of file
diff --git a/sitemap.xml.gz b/sitemap.xml.gz
new file mode 100644
index 000000000..4177e32c7
Binary files /dev/null and b/sitemap.xml.gz differ
diff --git a/testenv.code-workspace b/testenv.code-workspace
new file mode 100644
index 000000000..985f94a15
--- /dev/null
+++ b/testenv.code-workspace
@@ -0,0 +1,10 @@
+{
+    "folders": [
+        {
+            "path": ".."
+        },
+        {
+            "path": "../../../config"
+        }
+    ]
+}
diff --git a/troubleshooting/troubleshooting/index.html b/troubleshooting/troubleshooting/index.html
new file mode 100644
index 000000000..cb62c626f
--- /dev/null
+++ b/troubleshooting/troubleshooting/index.html
@@ -0,0 +1,3798 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+      
+    
+    
+      
+        FAQ - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    FAQ
    
+
+
+
    
+
    On this page you can find answers and ways to troubleshoot the most common errors with installing and using this 'theme'.
    
+
    
+
    Most times reloading the integration and emptying the cache can resolve most problems. 
    
+This is done by:
    
+
      
+
    1. Hit C and click reload Ui_lovelace_minimalist
      2. 
+
    2. Clear your cache by clicking CTRL + F5 on Windows or SHIFT + reload on Mac
      3. 
+
    
+
    Most common errors
    
+
    
+Not everything is loaded after installation
+
      
+
    1. Check if you have installed all dependencies of this list.
      2. 
+
    2. Clear your cache by clicking CTRL + F5 on Windows or SHIFT + reload on Mac
      3. 
+
    
+
    
+
    
+The theme looks off/weird
+
    Check if you have applied the Minimalist theme. Go to User_profile --> theme
    
+
    
+
    
+Weird border lines after updating to HA 2022.11.0
+
      
+
    1. Check in Minimalist version v1.1.6 or higher is installed
      2. 
+
    2. Check in config/themes/ if this line is added to the minimalist theme files:
+
          # fix added border-lines in 2022.11
+    ha-card-border-width: "0px"
+
      3. 
+
    3. Go to the affected dashboard on a PC and hit C on your keyboard. Then select reload Themes.
+image
      4. 
+
    
+
    
+
    
+Custom element doesn't exist
+
      
+
    1. Check if you did install all dependencies or checked the box to let UI-Minimalist them.
      2. 
+
    2. (additional) If the dependencies are installed manually check if all resources are added right. Open your Home Assistant instance and show your dashboard resources.
      3. 
+
    3. Clear your cache by clicking CTRL + F5 on Windows or SHIFT + reload on Mac.
      4. 
+
    
+
    
+
    
+Popups do not show up
+
      
+
    1. Check if you have installed Browser_mod V2 correctly.
      2. 
+
    2. Check if you followed the card specific way to enable popups 
      
+    This is either with adding a template or setting a variable to true
      3. 
+
    
+
    
+
    
+Custom card template does not exist/showing up
+
      
+
    1. Check if you placed the custom_card in the right directory
+
      config
+    └── ui_lovelace_minimalist
+        ├── custom_cards
+        |   ├── custom_card_1
+        |   |   ├── custom_card_1.yaml
+        |   |   └── EN.yaml
+        |   └── custom_card_2
+        |       ├── custom_card_2.yaml
+        |       └── EN.yaml
+        └── dashboard
+
      2. 
+
    2. Hit C and click reload Ui_lovelace_minimalist
      3. 
+
    3. Reload dashboard by clicking the three dots in the upper-right corner and click refresh
      4. 
+
    
+
    
+
    
+HACS Frontend resources are not showing up in https://homeassistant.local/config/lovelace/resources
+
      
+
    1. 
+
      First check what is being displayed when you download a frontend component. If it's showing something like:
      
+
      
+
      since you are not using Lovelace in storage mode you need to manually add the resource with these settings
      
+
      
+
      2. 
+
    2. 
+
      First make sure your configuration file has the setting:
+
      lovelace:
+  mode: storage
+
      
+
      3. 
+
    3. In case it still shows that error. go to https://homeassistant.local/config/system_health and search for what is under: Dashboard -> Mode. if that is on auto-gen.
+    Go to the autogenerated lovelace dashboard. and hit the 3 dots and Edit Dashboard. And just hit Save dashboard.
      4. 
+
    4. Now go and restart Home assistant. and try to install a frontend module. It should not show the message from step 1.
      5. 
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_battery/index.html b/usage/cards/card_battery/index.html
new file mode 100644
index 000000000..b2bd9a63f
--- /dev/null
+++ b/usage/cards/card_battery/index.html
@@ -0,0 +1,4017 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Battery Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Battery Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    Charging animation if ulm_card_battery_charging_animation is true:
    
+
    
+
    The battery-card is a slightly enhanced generic-card, that can indicate whether and how a device is being charged and colors the icon based on the battery level.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityThis is your battery entity
    ulm_card_battery_namefriendly_nameCustomize name
    ulm_card_battery_attributeIf your entity provides the battery percent in an attribute (= not as an own sensor), fill in the attribute's name here. E.g. if you have sensor.livingroom_thermometer and the attribute for your battery power is sensor.livingroom_thermometer.attributes.battery_percent, you fill in battery_percent here.
    ulm_card_battery_battery_state_entity_idEntity that holds the battery state (charging/discharging). If provided, the Icon will display the current status.
    ulm_card_battery_charger_type_entity_idEntity that holds the charger type (ac/wireless/none). This Entity replaces the need for the ulm_card_battery_battery_state_entity_id entity. If provided, the Icon will display the current charger type. This is only useful if you charge your devices Wireless and with cable.
    ulm_card_battery_charging_animationfalseWeather to show charging animation or not. If set to true, ulm_card_battery_battery_state_entity_id needs to be defined and ulm_card_battery_charger_type_entity_id will be ignored.
    ulm_card_battery_battery_level_dangerChanges the color of the Icon, if the battery level falls below the provided value. Must be higher than ulm_card_battery_battery_level_waring
    ulm_card_battery_battery_level_waringChanges the color of the Icon, if the battery level falls below the provided value.
    ulm_card_battery_color_battery_level_dangervar(--google-red)Color of icon if battery level is within the 'danger' zone.
    ulm_card_battery_color_battery_level_warningvar(--google-yellow)Color of icon if battery level is within the 'warning' zone.
    ulm_card_battery_color_battery_level_okvar(--google-green)Color of icon if battery level is not within the 'danger' or 'warning' zone.
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_battery
+  entity: sensor.battery_level
+  variables:
+     ulm_card_battery_charger_type_entity_id: sensor.battery_level
+     ulm_card_battery_battery_level_danger: 30
+     ulm_card_battery_battery_level_warning: 80
+     ulm_card_battery_name: Smartphone
+
    
+
    
+Template Code
+
    card_battery.yaml
    ---
+### Card Battery ###
+card_battery:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_battery_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_battery_attribute:
+    ulm_card_battery_battery_state_entity_id:
+    ulm_card_battery_charger_type_entity_id:
+    ulm_card_battery_charging_animation: false
+    ulm_card_battery_battery_level_danger:
+    ulm_card_battery_battery_level_warning:
+    ulm_card_battery_color_battery_level_danger: "var(--google-red)"
+    ulm_card_battery_color_battery_level_warning: "var(--google-yellow)"
+    ulm_card_battery_color_battery_level_ok: "var(--google-green)"
+    ulm_outlet_power_enable_popup: false
+  triggers_update:
+    - "[[[ return variables?.ulm_card_battery_battery_state_entity_id ]]]"
+    - "[[[ return variables?.ulm_card_battery_charger_type_entity_id ]]]"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              icon: |
+                [[[
+                  // Get battery level
+                  const battery_level = variables.ulm_card_battery_attribute !== null ?
+                    states[entity.entity_id].attributes[variables.ulm_card_battery_attribute] :
+                    states[entity.entity_id].state;
+                  // Generate icon infix
+                  let infix = "";
+                  if (variables.ulm_card_battery_charger_type_entity_id == null) {
+                    // Check wether the battery state is charging
+                    infix = variables.ulm_card_battery_battery_state_entity_id !== null &&
+                      variables.ulm_card_battery_charging_animation === false &&
+                      states[variables.ulm_card_battery_battery_state_entity_id].state.toLowerCase() === "charging" ?
+                      "-charging" : ""
+                  } else {
+                    // Select the infix based on the entity charging state
+                    switch (states[variables.ulm_card_battery_charger_type_entity_id].state.toLowerCase()) {
+                      case "wireless":
+                        infix = "-charging-wireless";
+                        break;
+                      case "charging":
+                        infix = "-charging";
+                        break;
+                      case "ac":
+                        infix = "-charging";
+                        break;
+                      case "usb":
+                        infix = "-charging";
+                        break;
+                      default:
+                        infix = "";
+                    }
+                  }
+                  // Generate the icon based on the battery_level
+                  let icon = "mdi:help-circle-outline";
+                  if (battery_level == 100) {
+                    icon = "mdi:battery";
+                  } else if (battery_level < 10) {
+                    icon = "mdi:battery" + infix + "-outline";
+                  } else if (battery_level == "unknown" || battery_level == "unavailable") {
+                    icon = "mdi:battery-off";
+                  } else {
+                    icon = "mdi:battery" + infix + "-" + Math.floor(battery_level / 10) * 10;
+                  }
+                  return icon;
+                ]]]
+              extra_styles: |
+                @keyframes charge {
+                  0%, 80% { clip-path: inset(0 0 0 0); }
+                  10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 66%, 34% 66%, 34% 100%, 100% 100%, 100% 0%); }
+                  20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 62%, 34% 62%, 34% 100%, 100% 100%, 100% 0%); }
+                  30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 58%, 34% 58%, 34% 100%, 100% 100%, 100% 0%); }
+                  40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
+                  50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 50%, 34% 50%, 34% 100%, 100% 100%, 100% 0%); }
+                  60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 46%, 34% 46%, 34% 100%, 100% 100%, 100% 0%); }
+                  70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 40%, 66% 40%, 66% 40%, 34% 40%, 34% 100%, 100% 100%, 100% 0%); }
+                }
+              styles:
+                icon:
+                  - color: |
+                      [[[
+                        const battery_level = variables.ulm_card_battery_attribute !== null ?
+                          states[entity.entity_id].attributes[variables.ulm_card_battery_attribute] :
+                          states[entity.entity_id].state;
+                        // Get the color based on battery_level
+                        let color = "rgba(var(--color-theme), 0.9)";
+                        if (battery_level !== "unavailable" && (variables.ulm_card_battery_battery_level_danger !== null || variables.ulm_card_battery_battery_level_warning !== null)) {
+                          if (battery_level <= variables.ulm_card_battery_battery_level_danger) {
+                            color = variables.ulm_card_battery_color_battery_level_danger;
+                          } else if (battery_level <= variables.ulm_card_battery_battery_level_warning) {
+                            color = variables.ulm_card_battery_color_battery_level_warning;
+                          } else if (battery_level == "unknown" || battery_level == "unavailable") {
+                            color = variables.ulm_card_battery_color_battery_level_danger;
+                          } else {
+                            color = variables.ulm_card_battery_color_battery_level_ok;
+                          }
+                        }
+                        return color;
+                      ]]]
+                  - animation: |
+                      [[[
+                        if (variables.ulm_card_battery_battery_state_entity_id !== null &&
+                          variables.ulm_card_battery_charging_animation === true &&
+                          states[variables.ulm_card_battery_battery_state_entity_id].state.toLowerCase() === "charging"){
+                            return "charge 3s linear infinite"
+                          }
+                        return "none"
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_card_battery_name ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              label: |
+                [[[
+                  const battery_level = variables.ulm_card_battery_attribute !== null
+                    ? states[entity.entity_id].attributes[variables.ulm_card_battery_attribute]
+                    : states[entity.entity_id].state;
+                  return battery_level + "%";
+                  if(battery_level == "unknown")
+                  { return variables.ulm_translation_state; }
+                  else
+                  { return battery_level + "%"; }
+                ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_binary_sensor/index.html b/usage/cards/card_binary_sensor/index.html
new file mode 100644
index 000000000..89ef51bfc
--- /dev/null
+++ b/usage/cards/card_binary_sensor/index.html
@@ -0,0 +1,3943 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Binary Sensor Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Binary Sensor Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    The binary-sensor-card is to show the state (on/off, open/close, etc.) of a binary sensor, eg. your garage door or a window contact sensor.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity
    ulm_card_binary_sensor_show_last_changedtrue or false
    ulm_card_binary_sensor_nameSet custom Name
    ulm_card_binary_sensor_iconSet custom Icon
    ulm_card_binary_sensor_colorblueSet Custom Color
    ulm_card_binary_sensor_force_background_colorfalseSet ulm_card_binary_sensor_color as background color in active state `
    
+
    
+
    ⚠️ Breaking Change v1.0.1
    
+
    show_last_changed is changed to be used as variable:
+
    variables:
+  ulm_show_last_changed: true
+
    
+
    
+
    
+
    ⚠️ Breaking Change v1.3.8
    
+
    ulm_show_last_changed is renamed to ulm_card_binary_sensor_show_last_changed:
+
    variables:
+  ulm_card_binary_sensor_show_last_changed: true
+
    
+
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_binary_sensor
+  variables:
+    ulm_card_binary_sensor_alert: true
+    ulm_card_binary_sensor_show_last_changed: true
+  entity: binary_sensor.garage_door
+
    
+
    
+Template Code
+
    card_binary_sensor.yaml
    ---
+### Card Binary Sensor ###
+card_binary_sensor:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  show_last_changed: false
+  variables:
+    ulm_card_binary_sensor_show_last_changed: false
+    ulm_card_binary_sensor_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_binary_sensor_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_outlet_power_enable_popup: false
+    ulm_card_binary_sensor_color: "blue"
+    ulm_card_binary_sensor_force_background_color: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (variables.ulm_card_binary_sensor_force_background_color) {
+                  var color = variables.ulm_card_binary_sensor_color;
+                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                }
+              ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_binary_sensor_icon; ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_binary_sensor_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.2)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_binary_sensor_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_card_binary_sensor_name; ]]]"
+              label: "[[[ return variables.ulm_translation_state;]]]"
+              show_last_changed: "[[[ return variables.ulm_card_binary_sensor_show_last_changed; ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_binary_sensor_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_binary_sensor_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_binary_sensor_alert/index.html b/usage/cards/card_binary_sensor_alert/index.html
new file mode 100644
index 000000000..6105b1510
--- /dev/null
+++ b/usage/cards/card_binary_sensor_alert/index.html
@@ -0,0 +1,3949 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Binary Sensor Alert Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Binary Sensor Alert Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    The binary-sensor-card is to show the state (on/off, open/close, etc.) of a binary sensor, eg. your garage door or a window contact sensor. This card shows an alert if the state is on/open or unavailable.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity
    ulm_card_binary_sensor_alert_show_last_changedtrue or false
    ulm_card_binary_sensor_alert_nameSet custom Name
    ulm_card_binary_sensor_alert_iconSet custom Icon
    ulm_icon_alert_invert_statefalseInvert the alert state logic so an alert is shown when the sensor is "off"
    ulm_card_binary_sensor_alert_colorblueSet Custom Color
    ulm_card_binary_sensor_alert_force_background_colorfalseSet ulm_card_binary_sensor_alert_color as background color in active state `
    
+
    
+
    ⚠️ Breaking Change v1.0.1
    
+
    show_last_changed is changed to be used as variable:
+
    variables:
+  ulm_show_last_changed: true
+
    
+
    
+
    
+
    ⚠️ Breaking Change v1.3.8
    
+
    ulm_show_last_changed is renamed to ulm_card_binary_sensor_show_last_changed:
+
    variables:
+  ulm_card_binary_sensor_show_last_changed: true
+
    
+
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_binary_sensor_alert
+  variables:
+    ulm_card_binary_sensor_alert: true
+    ulm_card_binary_sensor_show_last_changed: true
+  entity: binary_sensor.garage_door
+
    
+
    
+Template Code
+
    card_binary_sensor_alert.yaml
    ---
+### Card Binary Sensor Alert ###
+card_binary_sensor_alert:
+  template:
+    - "icon_more_info_alert"
+    - "ulm_translation_engine"
+  show_last_changed: false
+  variables:
+    ulm_card_binary_sensor_alert_show_last_changed: false
+    ulm_card_binary_sensor_alert_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_binary_sensor_alert_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_outlet_power_enable_popup: false
+    ulm_card_binary_sensor_alert_color: "blue"
+    ulm_card_binary_sensor_alert_force_background_color: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (variables.ulm_card_binary_sensor_alert_force_background_color) {
+                  var color = variables.ulm_card_binary_sensor_alert_color;
+                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                }
+              ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_binary_sensor_alert_icon; ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_binary_sensor_alert_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.2)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_binary_sensor_alert_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_card_binary_sensor_alert_name; ]]]"
+              label: "[[[ return variables.ulm_translation_state;]]]"
+              show_last_changed: "[[[ return variables.ulm_card_binary_sensor_alert_show_last_changed; ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_binary_sensor_alert_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_binary_sensor_alert_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_cover/index.html b/usage/cards/card_cover/index.html
new file mode 100644
index 000000000..cc88158b5
--- /dev/null
+++ b/usage/cards/card_cover/index.html
@@ -0,0 +1,4710 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Cover Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Cover Card
    
+
+
+
+
    Description
    
+
    example-image
+example-image
+example-image
    
+
    With the cover-card you have the state of your cover. Optionally, on the second line, OPEN / PAUSE / CLOSE to control it and/or a slider to control position.
    
+
    
+
    Warning
    
+
    
+
    This card has backward compatibility with older template except custom name. It means variable ulm_card_cover_buttons_name must be replaced by ulm_card_cover_name.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Variable/EntityDefaultRequiredNotesRequirement
    entityYour HA entity
    ulm_card_cover_namefriendly_nameCustomize name
    ulm_card_cover_iconCustomize icon
    ulm_card_invert_percentfalseInvert the Percentage (100% = Closed)
    ulm_card_cover_display_left_rightfalseDisplay left right control button
    ulm_card_cover_garage_largefalseDisplay variant garage icon for garage coverOnly if device_class = 'garage
    ulm_card_cover_enable_controlsfalseEnable control buttons
    ulm_card_cover_enable_sliderfalseEnable slider
    ulm_card_cover_enable_horizontalfalseEnable horizontal cardNeed ulm_card_cover_enable_controls: true or ulm_card_cover_enable_slider: true
    ulm_card_cover_favorite_percentagefalseDisplay favorite button to jump to preset positionenter number
    ulm_card_cover_enable_tiltfalseDisplay angled buttons for Venetian blind tilt
    ulm_card_cover_enable_popupfalseEnable popup_cover
    ulm_card_cover_slider_min0Set Minimum Slider Value
    ulm_card_cover_slider_max100Set Maximum Slider Value
    ulm_card_cover_colorblueSet Custom Color
    ulm_card_cover_force_background_colorfalseSet ulm_card_cover_color as background color in active state `
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_cover
+  entity: cover.window
+  variables:
+    ulm_card_cover_enable_controls: true
+    ulm_card_cover_enable_slider: true
+    ulm_card_cover_favorite_percentage: 45
+    ulm_card_cover_color: "green"
+
    
+
    
+Template Code
+
    card_cover_buttons.yaml
    ---
+### Card Cover ###
+card_cover:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_cover_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_cover_icon: false
+    ulm_card_cover_color: "blue"
+    ulm_card_invert_percent: false
+    ulm_card_cover_invert_percent: false
+    ulm_card_cover_display_left_right: false
+    ulm_card_cover_garage_large: false
+    ulm_card_cover_gate: false
+    ulm_card_cover_enable_controls: false
+    ulm_card_cover_favorite_percentage: null
+    ulm_card_cover_enable_slider: false
+    ulm_card_cover_slider_min: 0
+    ulm_card_cover_slider_max: 100
+    ulm_card_cover_enable_tilt: false
+    ulm_card_cover_enable_horizontal: false
+    ulm_card_cover_enable_popup: false
+    ulm_card_cover_show_last_changed: false
+    ulm_card_cover_force_background_color: false
+  show_icon: false
+  show_name: false
+  show_label: false
+  show_last_changed: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                  if (variables.ulm_card_cover_color) {
+                    if (variables.ulm_card_cover_force_background_color) {
+                      var color = variables.ulm_card_cover_color;
+                      return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                    }
+                  }
+              ]]]
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+              if (variables.ulm_card_cover_enable_horizontal) {
+
+                  var hor_area = ["item1"];
+                  var ver_area = [];
+
+                  if (variables.ulm_card_cover_enable_controls) {
+                    if (variables.ulm_card_cover_enable_horizontal == "controls" || variables.ulm_card_cover_enable_horizontal == true) {
+                      hor_area.push("item2");
+                    } else {
+                      ver_area.push("item2" + " " + "item2");
+                    }
+                  }
+                  if (variables.ulm_card_cover_enable_slider) {
+                    if (variables.ulm_card_cover_enable_horizontal == "slider") {
+                      hor_area.push("item3");
+                    } else {
+                      ver_area.push("item3" + " " + "item3");
+                    }
+                  }
+                  if (variables.ulm_card_cover_enable_tilt) {
+                    if (variables.ulm_card_cover_enable_horizontal == "tilt") {
+                      hor_area.push("item4");
+                    } else {
+                      ver_area.push("item4" + " " + "item4");
+                    }
+                  }
+
+                  if (ver_area.length < 1) {
+                    return "\"" + hor_area.join(" ") + "\" ";
+                  } else {
+                    return "\"" + hor_area.join(" ") + "\" " + "\"" + ver_area.join("\" \"") + "\"";
+                  }
+              } else {
+                  var areas = [];
+                  areas.push("item1");
+
+                  if (variables.ulm_card_cover_enable_controls) {
+                    areas.push("item2");
+                  }
+                  if (variables.ulm_card_cover_enable_slider) {
+                      areas.push("item3");
+                  }
+                  if (variables.ulm_card_cover_enable_tilt) {
+                    areas.push("item4");
+                  }
+
+                  return "\"" + areas.join("\" \"") + "\"";
+              }
+          ]]]
+      - grid-template-columns: >
+          [[[
+              if (variables.ulm_card_cover_enable_horizontal) {
+                  return "1fr 1fr";
+              }
+              return "1fr";
+          ]]]
+      - grid-template-rows: >
+          [[[
+              var rows = [];
+              rows.push("min-content");
+              if (variables.ulm_card_cover_enable_controls) {
+                  rows.push("min-content");
+              }
+              if (variables.ulm_card_cover_enable_slider) {
+                  rows.push("min-content");
+              }
+              if (variables.ulm_card_cover_enable_tilt) {
+                  rows.push("min-content");
+              }
+              if (variables.ulm_card_cover_enable_horizontal) {
+                  if (rows.length > 1) {
+                    rows.pop()
+                  }
+              }
+              return rows.join(" ");
+          ]]]
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+    custom_fields:
+      item2:
+        - display: >
+            [[[
+              if (variables.ulm_card_cover_enable_controls) {
+                  return "block";
+              } else {
+                  return "none";
+              }
+            ]]]
+      item3:
+        - display: >
+            [[[
+              if (variables.ulm_card_cover_enable_slider) {
+                  return "block";
+              } else {
+                  return "none";
+              }
+            ]]]
+      item4:
+        - display: >
+            [[[
+              if (variables.ulm_card_cover_enable_tilt) {
+                  return "block";
+              } else {
+                  return "none";
+              }
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+                  if (variables.ulm_card_cover_enable_popup) {
+                      vars.ulm_custom_popup = {
+                          'template': 'popup_cover'
+                      };
+                  }
+                  return vars;
+                ]]]
+              icon: >
+                [[[
+                  var icon = entity.attributes.icon || "mdi:help-circle";
+                  var icon_state = {
+                    "open": "open",
+                    "opening": "open",
+                    "closed": "closed",
+                    "closing": "closed"
+                  };
+                  if(entity.attributes?.device_class){
+                    var device_class = entity.attributes?.device_class;
+                  }
+                  var icon_open = {
+                    "awning": "mdi:window-open",
+                    "blind": "mdi:blinds-open",
+                    "curtain": "mdi:curtains",
+                    "damper": "mdi:circle-outline",
+                    "door": "mdi:door-open",
+                    "garage": variables.ulm_card_cover_garage_large ? "mdi:garage-open-variant" : "mdi:garage-open",
+                    "gate": "mdi:gate-open",
+                    "shade": "mdi:roller-shade",
+                    "shutter": "mdi:window-shutter-open",
+                    "window": "mdi:window-open",
+                  };
+                  var icon_closed = {
+                    "awning": "mdi:window-closed",
+                    "blind": "mdi:blinds",
+                    "curtain": "mdi:curtains-closed",
+                    "damper": "mdi:circle-slice-8",
+                    "door": "mdi:door-closed",
+                    "garage": variables.ulm_card_cover_garage_large ? "mdi:garage-variant" : "mdi:garage",
+                    "gate": "mdi:gate",
+                    "shade": "mdi:roller-shade-closed",
+                    "shutter": "mdi:window-shutter",
+                    "window": "mdi:window-closed",
+                  };
+                  return variables.ulm_card_cover_icon || (icon_state[entity.state]=='open' ? icon_open[device_class] : icon_closed[device_class]) || icon
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_cover_color;
+                        if (variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) {
+                            if (entity.attributes.current_position == 100) {
+                                return 'rgba(var(--color-theme),0.2)';
+                            }
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+
+                        if (typeof entity !== "undefined") {
+                          if (states[entity.entity_id].state != "closed") {
+                              return 'rgba(var(--color-' + color + '),1)';
+                          }
+                          return 'rgba(var(--color-theme),0.2)';
+                        }
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_cover_color;
+                        if (variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) {
+                            if (entity.attributes.current_position == 100) {
+                                return 'rgba(var(--color-theme),0.05)';
+                            }
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+
+                        if (typeof entity !== "undefined") {
+                          if (states[entity.entity_id].state != "closed") {
+                              return 'rgba(var(--color-' + color + '),0.2)';
+                          }
+                          return 'rgba(var(--color-theme),0.05)';
+                        }
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+                  if(variables.ulm_card_cover_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_cover'
+                    };
+                  }
+                  return vars;
+                ]]]
+              name: "[[[ return variables.ulm_card_cover_name ]]]"
+              label: >
+                [[[
+                  var position = states[entity.entity_id]?.attributes?.current_position;
+                  var invert = {
+                    "closed": hass.resources[hass['language']]['component.cover.state._.open'],
+                    "closing": hass.resources[hass['language']]['component.cover.state._.opening'],
+                    "open": hass.resources[hass['language']]['component.cover.state._.closed'],
+                    "opening": hass.resources[hass['language']]['component.cover.state._.closing']
+                  };
+
+                  if ((variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) && typeof entity !== "undefined") {
+                    if (position == 0) {
+                      return invert[entity.state] + " • " + (100 - position) + "%";
+                    } else {
+                      return invert[entity.state];
+                    }
+                  }
+
+                  if(["unknown", "unavailable", "closed"].includes(entity.state)  || position === undefined) {
+                    return variables.ulm_translation_state;
+                  }
+
+                  if (typeof entity !== "undefined") {
+                    if (entity == 0) {
+                      return variables.ulm_translation_state;
+                    } else {
+                      return variables.ulm_translation_state + " • " + position + "%";
+                    }
+                  }
+                  return variables.ulm_translation_state;
+                ]]]
+              show_last_changed: "[[[ return variables.ulm_card_cover_show_last_changed; ]]]"
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_cover_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_cover_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "[[[ return (variables.ulm_card_cover_favorite_percentage) ? 'list_4_items' : 'list_3_items' ]]]"
+        styles:
+          card:
+            - background: "none"
+          custom_fields:
+            item4:
+              - display: >
+                  [[[
+                    if (variables.ulm_card_cover_favorite_percentage) {
+                        return "block";
+                    } else {
+                        return "none";
+                    }
+                  ]]]
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.attributes.current_position == "0";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "closing";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "opening";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+              tap_action:
+                action: "perform-action"
+                perform_action: "cover.close_cover"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: >
+                [[[
+                  if (variables.ulm_card_cover_display_left_right) {
+                      return "mdi:arrow-left";
+                  }
+                  var device_class = entity.attributes?.device_class;
+                  if (device_class == 'curtain' || device_class == 'gate' || device_class == 'awning') {
+                      return "mdi:arrow-collapse-horizontal";
+                  }
+                  return "mdi:arrow-down";
+                ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              tap_action:
+                action: "perform-action"
+                perform_action: "cover.stop_cover"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:stop"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.attributes.current_position == "100";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "closing";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "opening";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+              tap_action:
+                action: "perform-action"
+                perform_action: "cover.open_cover"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: >-
+                [[[
+                  if (variables.ulm_card_cover_display_left_right) {
+                      return "mdi:arrow-right";
+                  }
+                  var device_class = entity.attributes?.device_class;
+                  if (device_class == 'curtain' || device_class == 'gate' || device_class == 'awning') {
+                      return "mdi:arrow-expand-horizontal";
+                  }
+                  return "mdi:arrow-up";
+                ]]]
+          item4:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              tap_action:
+                action: "perform-action"
+                perform_action: "cover.set_cover_position"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  position: "[[[ return variables.ulm_card_cover_favorite_percentage ]]]"
+              icon: "mdi:star"
+    item3:
+      card:
+        type: "custom:my-slider"
+        entity: "[[[ return entity.entity_id ]]]"
+        radius: "14px"
+        height: "42px"
+        minSet: "[[[ return variables.ulm_card_cover_slider_min ]]]"
+        maxSet: "[[[ return variables.ulm_card_cover_slider_max ]]]"
+        mainSliderColor: >
+          [[[
+            var color = variables.ulm_card_cover_color;
+            if (variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) {
+                if (entity.attributes.current_position == 100) {
+                    return 'rgba(var(--color-theme),0.05)';
+                }
+              if (variables.ulm_card_cover_force_background_color) {
+                return 'rgb(250,250,250)';
+              }
+              return 'rgba(var(--color-' + color + '),0.8)';
+            }
+
+            if (typeof entity !== "undefined") {
+              if (states[entity.entity_id].state != "closed") {
+                if (variables.ulm_card_cover_force_background_color) {
+                  return 'rgb(250,250,250)';
+                }
+                return 'rgba(var(--color-' + color + '),0.8)';
+              }
+              return 'rgba(var(--color-theme),0.05)';
+            }
+          ]]]
+        secondarySliderColor: >
+          [[[
+            var color = variables.ulm_card_cover_color;
+            if (variables.ulm_card_invert_percent || variables.ulm_card_cover_invert_percent) {
+                if (entity.attributes.current_position == 100) {
+                    return 'rgba(var(--color-theme),0.05)';
+                }
+              if (variables.ulm_card_cover_force_background_color) {
+                return 'rgba(var(--color-' + color + '),0.3)';
+              }
+              return 'rgba(var(--color-' + color + '),0.1)';
+            }
+
+            if (typeof entity !== "undefined") {
+              if (states[entity.entity_id].state != "closed") {
+                if (variables.ulm_card_cover_force_background_color) {
+                  return 'rgba(var(--color-' + color + '),0.3)';
+                }
+                return 'rgba(var(--color-' + color + '),0.1)';
+              }
+              return 'rgba(var(--color-theme),0.05)';
+            }
+          ]]]
+        mainSliderColorOff: "rgba(var(--color-theme),0.05)"
+        secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
+        thumbHorizontalPadding: "0px"
+        thumbVerticalPadding: "0px"
+        thumbWidth: "0px"
+        card_mod:
+        style: |
+          ha-card {
+            border-radius: 14px;
+            box-shadow: none;
+          }
+    item4:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        styles:
+          card:
+            - background: "none"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.attributes.current_tilt_position == "0";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "closing";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "opening";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+              tap_action:
+                action: "perform-action"
+                perform_action: "cover.close_cover_tilt"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:arrow-bottom-left"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              tap_action:
+                action: "perform-action"
+                perform_action: "cover.stop_cover_tilt"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:stop"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_cover_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_cover_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_cover_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.attributes.current_tilt_position == "100";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "closing";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "opening";
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.4)"
+              tap_action:
+                action: "perform-action"
+                perform_action: "cover.open_cover_tilt"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:arrow-top-right"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_fan/index.html b/usage/cards/card_fan/index.html
new file mode 100644
index 000000000..2b51955ce
--- /dev/null
+++ b/usage/cards/card_fan/index.html
@@ -0,0 +1,4237 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Fan Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Fan Card
    
+
+
+
+
    Description
    
+
    This is the fan-card, used to toggle a fan entity.
+Shows state of the fan and, if available, percentage and humidity in %.
    
+
    This is a new card based off of the Sexel Fan Custom Card.
+Rather than deprecate and many breaking changes on that card for users, this new card can be used as an alternative.
    
+
    Light theme
    
+
    Light theme
    
+
    Dark theme
    
+
    Dark theme
    
+
    Variables
    
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
    VariableExampleRequiredExplanation
    entityfan.smart_fanyesFan entity
    ulm_card_fan_nameFannoName to show. If not specified the attribute friendly_name is shown instead
    ulm_card_fan_iconFannoIcon to show. If not specified the attribute icon is shown instead
    ulm_card_fan_enable_horizontaltruenotrue/false if the card should be horizontal. Default: false
    ulm_card_fan_enable_collapsetruenotrue/false if the fan speed row should collapse when the fan is turned off. Default: false
    ulm_card_fan_colorbluenoCustom Color for the Card. default: "blue"
    ulm_card_fan_force_background_colortruenotrue/false if the card should force the background color, not just in dark mode."
    ulm_card_fan_enable_buttontruenotrue/false if the card should show a button next to the slider for turning Oscillation on/off."
    
+
+
    Others
    
+
    ulm_card_fan_enable_slider: false
+ulm_card_fan_slider_min: 0
+ulm_card_fan_slider_max: 100
+ulm_card_fan_enable_button: false
+ulm_card_fan_temp_attribute: "temp"
+ulm_card_fan_hum_attribute: "hum"
+
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_fan
+  entity: fan.bedroom
+  variables:
+    ulm_card_fan_enable_slider: true
+    ulm_card_fan_color: "blue"
+    ulm_card_fan_force_background_color: true
+
    
+
    
+Template Code
+
    card_fan.yaml
    ---
+### Card Fan ###
+card_fan:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_fan_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_fan_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_fan_enable_horizontal: false
+    ulm_card_fan_color: "blue"
+    ulm_card_fan_force_background_color: false
+    ulm_card_fan_enable_collapse: false
+    ulm_card_fan_enable_slider: false
+    ulm_card_fan_slider_min: 0
+    ulm_card_fan_slider_max: 100
+    ulm_card_fan_enable_button: false
+    ulm_card_fan_button_icon: "mdi:rotate-3d-variant"
+    ulm_card_fan_button_service: "fan.oscillate"
+    ulm_card_fan_oscillate_attribute: "oscillate"
+    ulm_card_fan_temp_attribute: false
+    ulm_card_fan_hum_attribute: false
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                  if (variables.ulm_card_fan_color) {
+                    if (variables.ulm_card_fan_force_background_color) {
+                      var color = variables.ulm_card_fan_color;
+                      return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                    }
+                  }
+              ]]]
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            if (variables.ulm_card_fan_enable_collapse && entity.state != "on") {
+              return "\"item1\"";
+            }
+
+            var areas = [];
+            areas.push("item1");
+            if (variables.ulm_card_fan_enable_slider) {
+              areas.push("item2");
+            }
+
+            if (variables.ulm_card_fan_enable_horizontal) {
+              return "\"" + areas.join(" ") + "\"";
+            }
+            return "\"" + areas.join("\" \"") + "\"";
+          ]]]
+      - grid-template-columns: >
+          [[[
+            if (variables.ulm_card_fan_enable_collapse && entity.state != "on") {
+              return "1fr";
+            }
+            if (variables.ulm_card_fan_enable_horizontal) {
+              return "1fr 1fr";
+            }
+            return "1fr";
+          ]]]
+      - grid-template-rows: >
+          [[[
+            if (variables.ulm_card_fan_enable_horizontal || (variables.ulm_card_fan_enable_collapse && entity.state != "on")) {
+              return "min-content";
+            }
+
+            var rows = [];
+            rows.push("min-content");
+            if (variables.ulm_card_fan_enable_slider) {
+                rows.push("min-content");
+            }
+            return rows.join(" ");
+          ]]]
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+    custom_fields:
+      item2:
+        - display: >
+            [[[
+                if (variables.ulm_card_fan_enable_collapse && entity.state != "on") {
+                    return "none";
+                } else if (variables.ulm_card_fan_enable_slider) {
+                    return "block";
+                } else {
+                    return "none";
+                }
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_fan_icon ]]]"
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                          if (entity.state == "on") {
+                            if (variables.ulm_card_fan_color) {
+                              var color = variables.ulm_card_fan_color;
+                              return 'rgba(var(--color-' + color + '),1)';
+                            }
+                            return 'rgba(var(--color-theme),1)';
+                          }
+                          return 'rgba(var(--color-theme),0.2)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                          if (entity.state == "on") {
+                            if (variables.ulm_card_fan_color) {
+                              var color = variables.ulm_card_fan_color;
+                              return 'rgba(var(--color-' + color + '),0.2)';
+                            }
+                          }
+                          return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_card_fan_name ]]]"
+              label: >
+                [[[
+                    if (entity.state == 'unavailable') {
+                      return variables.ulm_translation_unavailable;
+                    }
+
+                    let temp_str = '';
+                    if (variables.ulm_card_fan_temp_attribute) {
+                        var temp = Math.round(entity.attributes[variables.ulm_card_fan_temp_attribute]);
+                        temp_str = ' • ' + (temp ? temp : '0') + '°C';
+                    }
+                    let hum_str = '';
+                    if (variables.ulm_card_fan_hum_attribute) {
+                        var hum = Math.round(entity.attributes[variables.ulm_card_fan_hum_attribute]);
+                        hum_str = ' • ' + (hum ? hum : '0') + '%';
+                    }
+
+                    if (entity.state != 'off') {
+                      if (entity.attributes.percentage != null) {
+                        var per = entity.attributes.percentage;
+                        let per_str = (per ? per : '0') + '%';
+                        return per_str + temp_str + hum_str;
+                      }
+                      return variables.ulm_translation_on + temp_str + hum_str;
+                    }
+                    return variables.ulm_translation_off + temp_str + hum_str;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_fan_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_fan_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_one_third_items"
+        styles:
+          card:
+            - background: "none"
+            - overflow: "visible"
+          grid:
+            - grid-template-areas: >
+                [[[
+                    if (variables.ulm_card_fan_enable_button) {
+                      return "'slider button'";
+                    }
+                    return "'slider'";
+                ]]]
+            - grid-template-columns: >
+                [[[
+                    if (variables.ulm_card_fan_enable_button) {
+                      return "2fr 1fr";
+                    }
+                    return "1fr";
+                ]]]
+          custom_fields:
+            button:
+              - display: >
+                  [[[
+                    if (variables.ulm_card_fan_enable_button) {
+                        return "block";
+                    }
+                    return "none";
+                  ]]]
+        custom_fields:
+          slider:
+            card:
+              type: "custom:my-slider"
+              entity: "[[[ return entity.entity_id ]]]"
+              radius: "14px"
+              height: "42px"
+              minSet: "[[[ return variables.ulm_card_fan_slider_min ]]]"
+              maxSet: "[[[ return variables.ulm_card_fan_slider_max ]]]"
+              mainSliderColor: >
+                [[[
+                  var color = variables.ulm_card_fan_color;
+
+                  if (entity.state == "on") {
+                    if (variables.ulm_card_fan_force_background_color) {
+                      return 'rgb(250,250,250)';
+                    }
+                    return 'rgba(var(--color-' + color + '),0.8)';
+                  }
+                    return "rgba(var(--color-grey),0.8)";
+                ]]]
+              secondarySliderColor: >
+                [[[
+                  var color = variables.ulm_card_fan_color;
+                  if (entity.state == "on") {
+                    if (variables.ulm_card_fan_force_background_color) {
+                      return 'rgba(var(--color-' + color + '),0.3)';
+                    }
+                    return 'rgba(var(--color-' + color + '),0.1)';
+                  }
+                  return "rgba(var(--color-grey),0.1)";
+                ]]]
+              mainSliderColorOff: "rgba(var(--color-theme),0.05)"
+              secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
+              thumbHorizontalPadding: "0px"
+              thumbVerticalPadding: "0px"
+              thumbWidth: "0px"
+              card_mod:
+              style: |
+                ha-card {
+                  border-radius: 14px;
+                  box-shadow: none;
+                }
+          button:
+            card:
+              type: "custom:button-card"
+              template:
+                - "widget_icon"
+              icon: "[[[ return variables.ulm_card_fan_button_icon ]]]"
+              entity: "[[[ return entity.entity_id ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "[[[ return variables.ulm_card_fan_button_service ]]]"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  oscillating: "[[[ return !entity.attributes[variables.ulm_card_fan_oscillate_attribute] ]]]"
+              state:
+                - operator: "template"
+                  value: "[[[ return entity.state === 'on' && !entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]"
+                  styles:
+                    card:
+                      - background-color: >
+                          [[[
+                            if(!hass.themes.darkMode && variables.ulm_card_light_force_background_color){
+                              return 'rgb(250,250,250)'
+                            }
+                          ]]]
+                    img_cell:
+                      - background-color: >
+                          [[[
+                            var color = variables.ulm_card_fan_color;
+                            if (variables.ulm_card_fan_force_background_color) {
+                              return 'rgba(var(--color-' + color + '),0.2)';
+                            }
+                              return 'rgba(var(--color-theme),0.05)';
+                          ]]]
+                    icon:
+                      - color: >
+                          [[[
+                            var color = variables.ulm_card_fan_color;
+                            if (variables.ulm_card_fan_force_background_color) {
+                              return 'rgba(var(--color-' + color + '),1)';
+                            }
+                              return 'rgba(var(--color-theme),0.9)';
+                          ]]]
+                - operator: "template"
+                  value: "[[[ return entity.state === 'on' && entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]"
+                  styles:
+                    img_cell:
+                      - background-color: >
+                          [[[
+                            var color = variables.ulm_card_fan_color;
+                            if (variables.ulm_card_fan_force_background_color) {
+                              return 'rgba(250, 250, 250, 1)';
+                            }
+                              return 'rgba(var(--color-' + color + '),0.2)';
+                          ]]]
+                    icon:
+                      - color: >
+                          [[[
+                            var color = variables.ulm_card_fan_color;
+                            return 'rgba(var(--color-' + color + '),1)'
+                          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_generic/index.html b/usage/cards/card_generic/index.html
new file mode 100644
index 000000000..ebe30c573
--- /dev/null
+++ b/usage/cards/card_generic/index.html
@@ -0,0 +1,3917 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Generic Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Generic Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This is the generic-card to display values from a sensor, eg. to show humidity, your next waste collection date or whatever sensor value is provided.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity
    ulm_card_generic_nameSet custom Name
    ulm_card_generic_iconSet custom Icon
    ulm_card_generic_colorblueSet Custom Color
    ulm_card_generic_force_background_colorfalseSet ulm_card_generic_color as background color in active state `
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_generic
+  entity: sensor.next_waste_collection
+
    
+
    
+Template Code
+
    card_generic.yaml
    ---
+### Card Generic ###
+card_generic:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_generic_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_generic_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_outlet_power_enable_popup: false
+    ulm_card_generic_color: "blue"
+    ulm_card_generic_force_background_color: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (variables.ulm_card_generic_force_background_color) {
+                  var color = variables.ulm_card_generic_color;
+                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                }
+              ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_generic_icon; ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_generic_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.2)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_generic_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_translation_state ]]]"
+              label: "[[[ return variables.ulm_card_generic_name ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_generic_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_generic_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_generic_swap/index.html b/usage/cards/card_generic_swap/index.html
new file mode 100644
index 000000000..11dcb8df6
--- /dev/null
+++ b/usage/cards/card_generic_swap/index.html
@@ -0,0 +1,3917 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Generic Swap Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Generic Swap Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This is a generic-card with swapped label and name.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity
    ulm_card_generic_swap_nameSet custom Name
    ulm_card_generic_swap_iconSet custom Icon
    ulm_card_generic_swap_colorblueSet Custom Color
    ulm_card_generic_swap_force_background_colorfalseSet ulm_card_generic_swap_color as background color in active state `
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_generic_swap
+  entity: sensor.next_waste_collection
+
    
+
    
+Template Code
+
    card_generic_swap.yaml
    ---
+### Card Generic Swap ###
+card_generic_swap:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_generic_swap_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_generic_swap_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_outlet_power_enable_popup: false
+    ulm_card_generic_swap_color: "blue"
+    ulm_card_generic_swap_force_background_color: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (variables.ulm_card_generic_swap_force_background_color) {
+                  var color = variables.ulm_card_generic_swap_color;
+                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                }
+              ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_generic_swap_icon; ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_generic_swap_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.2)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_generic_swap_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              label: "[[[ return variables.ulm_translation_state ]]]"
+              name: "[[[ return variables.ulm_card_generic_swap_name ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_generic_swap_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_generic_swap_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_graph/index.html b/usage/cards/card_graph/index.html
new file mode 100644
index 000000000..28ffb8c15
--- /dev/null
+++ b/usage/cards/card_graph/index.html
@@ -0,0 +1,3950 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Graph Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Graph Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    The card_graph shows an entity with the actual state and a min-graph-card integrated. This can be used for a thermostat to show the actual temperature and the history. It now supports dual graphs as well as bar style graphs.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityYour entity_id for the temperature sensor
    ulm_card_graph_colorThis is to adjust your color value. Use a CSS variable from HA or set a color value (eg. #FFFFFF)
    ulm_card_graph_nameSet graph name
    ulm_card_graph_iconSet custom icon
    ulm_card_graph_entityYour entity_id for the temperature sensor
    ulm_card_graph_entity2Your entity_id for the second temperature sensor
    ulm_card_graph_color2This is to adjust your color value of the second graph. Use a CSS variable from HA or set a color value (eg. #FFFFFF)
    ulm_card_graph_typefillThis is to change the appearance of the graph. Default is fill, but line, bar are valid options.
    ulm_card_graph_hours24How much time should the graph cover, default is 24 hours.
    ulm_card_graph_points0.5Specify amount of data points the graph should display for each hour. A larger number results in a more detailed graph.
    ulm_card_graph_group_byintervalSpecify type of grouping of data, dynamic interval, date or hour.
    ulm_card_graph_line_width5Set the thickness of the line.
    
+
    Usage
    
+
      - type: 'custom:button-card'
+    template: card_graph
+    entity: sensor.livingroom_temperature
+    variables:
+      ulm_card_graph_color: "var(--google-blue)"
+      ulm_card_graph_name: Temperature Livingroom
+      ulm_card_graph_entity: sensor.livingroom_temperature
+      ulm_card_graph_color2: "var(--google-green)"
+      ulm_card_graph_entity2: sensor.bedgroom_temperature
+      ulm_card_graph_type: fill
+      ulm_card_graph_hours: 24
+      ulm_card_graph_group_by: interval
+      ulm_card_graph_line_width: 5
+
    
+
    
+Template Code
+
    card_graph.yaml
    ---
+### Card Graph ###
+card_graph:
+  template:
+    - "extended_card"
+  variables:
+    ulm_card_graph_color: "var(--info-color)"
+    ulm_card_graph_name: "[[[ return entity.attributes.friendly_name; ]]]"
+    ulm_card_graph_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_graph_color2: "var(--info-color)"
+    ulm_card_graph_entity2: ""
+    ulm_card_graph_hours: 24
+    ulm_card_graph_type: "fill"
+    ulm_card_graph_points: "0.5"
+    ulm_card_graph_group_by: "interval"
+    ulm_card_graph_line_width: 5
+    ulm_card_graph_icon_color: ""
+  triggers_update:
+    - "[[[ return variables.ulm_card_graph_entity2 ]]]"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "card_generic"
+        variables:
+          ulm_card_generic_icon: "[[[ return variables.ulm_card_graph_icon; ]]]"
+          ulm_card_generic_name: "[[[ return variables.ulm_card_graph_name; ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              custom_fields:
+                item1:
+                  card:
+                    type: "custom:button-card"
+                    styles:
+                      icon:
+                        - color: >
+                            [[[
+                              var color = variables.ulm_card_graph_icon_color;
+                              if (variables.ulm_card_graph_icon_color){
+                                return 'rgba(var(--color-' + color + '),1)';
+                              }
+                              return 'rgba(var(--color-theme),0.2)';
+                            ]]]
+                      img_cell:
+                        - background-color: >
+                            [[[
+                              var color = variables.ulm_card_graph_icon_color;
+                              if (variables.ulm_card_graph_icon_color){
+                                return 'rgba(var(--color-' + color + '),0.2)';
+                              }
+                              return 'rgba(var(--color-theme),0.05)';
+                            ]]]
+    item2:
+      card:
+        type: "custom:mini-graph-card"
+        entities: >
+          [[[
+            var ent = [];
+            ent.push(variables.ulm_card_graph_entity);
+            if(variables.ulm_card_graph_entity2 != "")
+              ent.push(variables.ulm_card_graph_entity2);
+            return ent;
+          ]]]
+        line_color: >
+          [[[
+            var col = [];
+            col.push(variables.ulm_card_graph_color);
+            if(variables.ulm_card_graph_color2 != "")
+              col.push(variables.ulm_card_graph_color2);
+            return col;
+          ]]]
+        show:
+          name: false
+          icon: false
+          legend: false
+          state: false
+          graph: "[[[ return variables.ulm_card_graph_type=='fill'?'line':variables.ulm_card_graph_type; ]]]"
+          fill: "[[[ return variables.ulm_card_graph_type=='fill'?true:false; ]]]"
+        hours_to_show: "[[[ return variables.ulm_card_graph_hours; ]]]"
+        points_per_hour: "[[[ return variables.ulm_card_graph_points; ]]]"
+        group_by: "[[[ return variables.ulm_card_graph_group_by; ]]]"
+        line_width: "[[[ return variables.ulm_card_graph_line_width; ]]]"
+        style: |
+          ha-card {
+            box-shadow: none;
+            border-radius: var(--border-radius);
+          }
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_input_boolean/index.html b/usage/cards/card_input_boolean/index.html
new file mode 100644
index 000000000..f3857d502
--- /dev/null
+++ b/usage/cards/card_input_boolean/index.html
@@ -0,0 +1,3919 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Input_boolean Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Input_boolean Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    The input-boolean-card is to switch an input_boolean on or off.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity
    ulm_card_input_boolean_nameSet custom Name
    ulm_card_input_boolean_iconSet custom Icon
    ulm_card_input_boolean_colorblueSet Custom Color
    ulm_card_input_boolean_force_background_colorfalseSet ulm_card_input_boolean_color as background color in active state `
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_input_boolean
+  entity: input_boolean.guest_mode
+  variables:
+    ulm_card_input_boolean_name: Guest Mode
+
    
+
    
+Template Code
+
    card_input_boolean.yaml
    ---
+### Card Input Boolean ###
+card_input_boolean:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_input_boolean_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_input_boolean_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_outlet_power_enable_popup: false
+    ulm_card_input_boolean_color: "blue"
+    ulm_card_input_boolean_force_background_color: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (variables.ulm_card_input_boolean_force_background_color) {
+                  var color = variables.ulm_card_input_boolean_color;
+                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                }
+              ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_input_boolean_icon; ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_input_boolean_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.2)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_input_boolean_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_card_input_boolean_name; ]]]"
+              label: "[[[ return variables.ulm_translation_state ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {
+                        'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor
+                      }
+                    };
+                  }
+                  return vars;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_input_boolean_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_input_boolean_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_light/index.html b/usage/cards/card_light/index.html
new file mode 100644
index 000000000..b60a2ac61
--- /dev/null
+++ b/usage/cards/card_light/index.html
@@ -0,0 +1,4368 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Light Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Light Card
    
+
+
+
+
    Description
    
+
    Image title
+Image title
+Image title
+Image title
    
+
    This is the light-card, used to toggle a light or a light group. Shows state of the light and, if available, brightness in %.
    
+
    This documentation refers to the new "All in one" light card.
+This card merges the following one :
    
+
      
+
    • legacy card_light (the old one)
      • 
+
    • legacy card_light_slider
      • 
+
    • legacy card_light_slider_collapse
      • 
+
    • legacy card_light_slider_horizontal
      • 
+
    • custom card_light_color by basbruss
      • 
+
    • custom card_light_horizontal_color by basbruss
      • 
+
    • custom card_light_slider_color by basbruss
      • 
+
    • custom card_light_slider_collapse_color by basbruss
      • 
+
    
+
    
+
    Warning
    
+
    
+
    This card has backward compatibility with older template except custom names and icons. It means variables like ulm_card_XXX_name and ulm_card_XXX_icon must be replaced by ulm_card_light_name and ulm_card_light_icon.
+To use popup_light you need to set the variable ulm_card_light_enable_popup to true. This is a different approach as the other popup_cards use.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Variable/EntityDefaultRequiredNotesRequirement
    entityYour HA entity
    ulm_card_light_namefriendly_nameCustomize name
    ulm_card_light_iconmdi:lightbulbCustomize icon
    ulm_card_light_enable_sliderfalseEnable slider
    ulm_card_light_enable_slider_minSet0Minimum brightness value user can select in the sliderNeed ulm_card_light_enable_slider: true
    ulm_card_light_enable_slider_maxSet100Maximum brightness value user can select in the sliderNeed ulm_card_light_enable_slider: true
    ulm_card_light_enable_collapsefalseCollapse slider when offNeed ulm_card_light_enable_slider: true
    ulm_card_light_enable_horizontalfalseEnable horizontal card
    ulm_card_light_enable_horizontal_widefalseWider sliderNeed ulm_card_light_enable_horizontal: true
    ulm_card_light_coloryellowSet a manual color from the theme for icon, slider and background
    ulm_card_light_enable_colorfalseEnable icon and label light color from the light itself.Overrides ulm_card_light_color
    ulm_card_light_force_background_colorfalseForce background light color even in light theme
    ulm_card_light_enable_popupfalseEnable popup_light
    ulm_card_light_enable_popup_tapfalseEnable popup_light on simple icon tap
    ulm_card_light_color_paletteAdd select entity to control color palette
    ulm_card_light_enable_buttonsfalseEnable Preset Brightness Buttons
    ulm_card_light_brightness_low/med/highOverride the Brightness defaults for Buttons - Percentages
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_light
+  entity: light.allee
+  variables:
+    ulm_card_light_enable_slider: true
+    ulm_card_light_enable_color: true
+    ulm_card_light_force_background_color: true
+
    
+
    
+Template Code
+
    card_light.yaml
    ---
+### Card Light ###
+card_light:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_light_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_light_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_light_enable_collapse: false
+    ulm_card_light_enable_horizontal: false
+    ulm_card_light_enable_horizontal_wide: false
+    ulm_card_light_enable_color: false
+    ulm_card_light_color_palette: ""
+    ulm_card_light_color: "yellow"
+    ulm_card_light_force_background_color: false
+    ulm_card_light_enable_slider: false
+    ulm_card_light_enable_slider_minSet: 0
+    ulm_card_light_enable_slider_maxSet: 100
+    ulm_card_light_enable_buttons: false
+    ulm_card_light_brightness_low: 1
+    ulm_card_light_brightness_medium: 50
+    ulm_card_light_brightness_high: 100
+    ulm_card_light_enable_popup: false
+    ulm_card_light_enable_popup_tap: false
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                var color_set = (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+                var color = 'rgba(var(--color-' + color_set + '),var(--opacity-bg))'
+                if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){
+                  color = 'rgba(' + color_set + ',var(--opacity-bg))'
+                }
+                if (variables.ulm_card_light_force_background_color) {
+                  return color
+                }
+              ]]]
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+              if (variables.ulm_card_light_enable_collapse && entity.state != "on") {
+                  return "\"item1\"";
+              }
+
+              var areas = [];
+              areas.push("item1");
+              if (variables.ulm_card_light_enable_slider) {
+                  areas.push("item2");
+              }
+              if (variables.ulm_card_light_enable_buttons) {
+                  areas.push("item3");
+              }
+
+              if (variables.ulm_card_light_enable_horizontal) {
+                  areas = areas.slice(0, 2);
+                  return "\"" + areas.join(" ") + "\"";
+              }
+              return "\"" + areas.join("\" \"") + "\"";
+          ]]]
+      - grid-template-columns: >
+          [[[
+              if (variables.ulm_card_light_enable_collapse && entity.state != "on") {
+                  return "1fr";
+              }
+              if (variables.ulm_card_light_enable_horizontal) {
+                  if(variables.ulm_card_light_enable_horizontal_wide){
+                    return "1fr 2fr";
+                  } else {
+                    return "1fr 1fr";
+                  }
+              }
+              return "1fr";
+          ]]]
+      - grid-template-rows: >
+          [[[
+              if (variables.ulm_card_light_enable_horizontal || (variables.ulm_card_light_enable_collapse && entity.state != "on")) {
+                  return "min-content";
+              }
+              var rows = [];
+              rows.push("min-content");
+              if (variables.ulm_card_light_enable_slider) {
+                  rows.push("min-content");
+              }
+              if (variables.ulm_card_light_enable_buttons) {
+                  rows.push("min-content");
+              }
+              return rows.join(" ");
+          ]]]
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+    custom_fields:
+      item2:
+        - display: >
+            [[[
+                  if (variables.ulm_card_light_enable_collapse && entity.state != "on") {
+                      return "none";
+                  } else if (variables.ulm_card_light_enable_slider) {
+                      return "block";
+                  } else {
+                      return "none";
+                  }
+            ]]]
+      item3:
+        - display: >
+            [[[
+                if (variables.ulm_card_light_enable_collapse && entity.state != "on") {
+                    return "none";
+                } else if (variables.ulm_card_light_enable_buttons) {
+                    if (variables.ulm_card_light_enable_horizontal && variables.ulm_card_light_enable_slider) {
+                      return "none";
+                    }
+                    return "block";
+                } else {
+                    return "none";
+                }
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_light_icon ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+                  if (variables.ulm_card_light_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_light_brightness',
+                      'popup_variables': {'ulm_card_light_color_palette': variables.ulm_card_light_color_palette}
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+                        var color = 'rgba(var(--color-' + color_set + '),1)'
+                        if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){
+                          color = 'rgba(' + color_set + ',1)'
+                        }
+                        if (entity.state != "on") {
+                          return 'rgba(var(--color-theme),0.2)';
+                        }
+                        return color
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+                        var color = 'rgba(var(--color-' + color_set + '),0.2)'
+                        if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){
+                          color = 'rgba(' + color_set + ',0.2)'
+                        }
+                        if (entity.state != "on") {
+                          return 'rgba(var(--color-theme),0.05)';
+                        }
+                        return color
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+                  if (variables.ulm_card_light_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_light_brightness',
+                      'popup_variables': {'ulm_card_light_color_palette': variables.ulm_card_light_color_palette}
+                    };
+                  }
+                  return vars;
+                ]]]
+              name: "[[[ return variables.ulm_card_light_name ]]]"
+              label: >
+                [[[
+                  var label = variables.ulm_translation_state;
+                  if (entity.attributes.brightness != null && entity.state === 'on') {
+                    var bri = Math.round(entity.attributes.brightness / 2.55);
+                    label = (bri ? bri : "0") + "%";
+                  }
+                  return label;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_light_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_light_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+    item2:
+      card:
+        type: "custom:my-slider"
+        entity: "[[[ return entity.entity_id ]]]"
+        radius: "14px"
+        height: "42px"
+        minSet: "[[[ return variables.ulm_card_light_enable_slider_minSet ]]]"
+        maxSet: "[[[ return variables.ulm_card_light_enable_slider_maxSet ]]]"
+        mainSliderColor: >
+          [[[
+            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+            var color = 'rgba(var(--color-' + color_set + '),1)'
+            if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){
+              color = 'rgba(' + color_set + ',1)'
+            }
+            if (entity.state == "unavailable") {
+              return "rgba(var(--color-grey),1)";
+            }
+            if(variables.ulm_card_light_force_background_color && !hass.themes.darkMode){
+              return 'rgba(250,250,250,1)'
+            }
+            return color
+          ]]]
+        secondarySliderColor: >
+          [[[
+            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+            var color = 'rgba(var(--color-' + color_set + '),0.2)'
+            if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){
+              color = 'rgba(' + color_set + ',0.2)'
+            }
+            if (entity.state == "unavailable") {
+              return "rgba(var(--color-grey),0.2)";
+            }
+            return color
+          ]]]
+        thumbColor: >
+          [[[
+            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+            var color = 'rgba(var(--color-' + color_set + '),1)'
+            if(variables.ulm_card_light_enable_color && entity.attributes.rgb_color){
+              color = 'rgba(' + color_set + ',1)'
+            }
+            if (entity.state == "unavailable") {
+              return "rgba(var(--color-grey),1)";
+            }
+            if(variables.ulm_card_light_force_background_color && !hass.themes.darkMode){
+              return 'rgba(250,250,250,1)'
+            }
+            return color
+          ]]]
+        mainSliderColorOff: "rgba(var(--color-theme),0.05)"
+        secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
+        thumbHorizontalPadding: "0px"
+        thumbVerticalPadding: "0px"
+        thumbWidth: "12px"
+        card_mod:
+        style: |
+          ha-card {
+            border-radius: 14px;
+            box-shadow: none;
+          }
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        styles:
+          card:
+            - background: "none"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_light_force_background_color){
+                          if (entity.state != "off"){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_light_force_background_color) {
+                          if (entity.state != "off") {
+                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+                            var color = 'rgba(var(--color-' + color_set + '),0.2)'
+                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {
+                              color = 'rgba(' + color_set + ',0.2)';
+                            }
+                            return color;
+                          }
+                        }
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_light_force_background_color) {
+                          if (entity.state != "off") {
+                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+                            var color = 'rgba(var(--color-' + color_set + '),1)';
+                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {
+                              color = 'rgba(' + color_set + ',1)';
+                            }
+                            return color;
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              tap_action:
+                action: "perform-action"
+                perform_action: "light.turn_on"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  brightness_pct: "[[[ return variables.ulm_card_light_brightness_low ]]]"
+              icon: "mdi:lightbulb-on-10"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_light_force_background_color){
+                          if (entity.state != "off"){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_light_force_background_color) {
+                          if (entity.state != "off") {
+                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+                            var color = 'rgba(var(--color-' + color_set + '),0.2)'
+                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {
+                              color = 'rgba(' + color_set + ',0.2)';
+                            }
+                            return color;
+                          }
+                        }
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_light_force_background_color) {
+                          if (entity.state != "off") {
+                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+                            var color = 'rgba(var(--color-' + color_set + '),1)';
+                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {
+                              color = 'rgba(' + color_set + ',1)';
+                            }
+                            return color;
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              tap_action:
+                action: "perform-action"
+                perform_action: "light.turn_on"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  brightness_pct: "[[[ return variables.ulm_card_light_brightness_medium ]]]"
+              icon: "mdi:lightbulb-on-50"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_light_force_background_color){
+                          if (entity.state != "off"){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_light_force_background_color) {
+                          if (entity.state != "off") {
+                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+                            var color = 'rgba(var(--color-' + color_set + '),0.2)'
+                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {
+                              color = 'rgba(' + color_set + ',0.2)';
+                            }
+                            return color;
+                          }
+                        }
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (variables.ulm_card_light_force_background_color) {
+                          if (entity.state != "off") {
+                            var color_set = variables.ulm_card_light_enable_color && entity.attributes.rgb_color ? entity.attributes.rgb_color : variables.ulm_card_light_color;
+                            var color = 'rgba(var(--color-' + color_set + '),1)';
+                            if (variables.ulm_card_light_enable_color && entity.attributes.rgb_color) {
+                              color = 'rgba(' + color_set + ',1)';
+                            }
+                            return color;
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              tap_action:
+                action: "perform-action"
+                perform_action: "light.turn_on"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  brightness_pct: "[[[ return variables.ulm_card_light_brightness_high ]]]"
+              icon: "mdi:lightbulb-on"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_media_player/index.html b/usage/cards/card_media_player/index.html
new file mode 100644
index 000000000..e3c8d794f
--- /dev/null
+++ b/usage/cards/card_media_player/index.html
@@ -0,0 +1,4785 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Media_player Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Media_player Card
    
+
+
+
+
    Description
    
+
    example-image
+example-image
+example-image
+example-image
+example-image
+example-image
    
+
    The card_media_player shows you the app, the title and the album name playing, if the data is available through HA. The app is shown via a different icon.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityThe media-player entity
    ulm_card_media_player_nameName to display for your media-player
    ulm_card_media_player_iconChange the icon displayed
    ulm_card_media_player_enable_artfalseEnable album picture on background
    ulm_card_media_player_enable_controlsfalseEnable controls below the title
    ulm_card_media_player_enable_volume_sliderfalseEnable volume slider below controls
    ulm_card_media_player_enable_volume_buttonsfalseEnable volume buttons below controls
    ulm_card_media_player_enable_volume_adjust5Volume Adjust Amount - if not set then 1 for TV and 5 for Speaker
    ulm_card_media_player_collapsiblefalseControls are collapsible when state is off
    ulm_card_media_player_player_controls_entityentityChange the controlled entity
    ulm_card_media_player_enable_popupfalseEnable pop-up
    ulm_card_media_player_more_infofalseDisplays artist and album info in the sub-label
    ulm_card_media_player_power_buttonfalseShow power button
    ulm_card_media_player_colorblueSet Custom Color
    ulm_card_media_player_force_background_colorfalseSet ulm_card_media_player_color as background color in active state `
    
+
    
+
    Note
    
+
    
+
    To use popup_media_player you need to set the variable ulm_card_media_player_enable_popup to true. This is a different approach as the other popup_cards use.
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_media_player
+  entity: media_player.livingroom_shield
+  variables:
+    ulm_card_media_player_name : Livingroom Nvidia Shield
+
    
+
    
+Template Code
+
    card_media_player.yaml
    ---
+### Card Media Player ###
+card_media_player:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_media_player_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_media_player_icon: false
+    ulm_card_media_player_enable_art: false
+    ulm_card_media_player_enable_controls: false
+    ulm_card_media_player_enable_volume_slider: false
+    ulm_card_media_player_enable_volume_buttons: false
+    ulm_card_media_player_enable_volume_adjust: 0
+    ulm_card_media_player_collapsible: false
+    ulm_card_media_player_player_controls_entity: "[[[ return entity.entity_id ]]]"
+    ulm_card_media_player_enable_popup: false
+    ulm_card_media_player_more_info: false
+    ulm_card_media_player_power_button: false
+    ulm_card_media_player_force_background_color: false
+    ulm_card_media_player_color: "blue"
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state && !variables.ulm_card_media_player_enable_art ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                  if (variables.ulm_card_media_player_color) {
+                    if (variables.ulm_card_media_player_force_background_color) {
+                      var color = variables.ulm_card_media_player_color;
+                      return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                    }
+                  }
+              ]]]
+  styles:
+    grid:
+      - grid-template-areas: |
+          [[[
+            var areas = "'item1'";
+            if (variables.ulm_card_media_player_enable_controls){
+              areas = areas + " 'item2'";
+            }
+            if (variables.ulm_card_media_player_enable_volume_slider){
+              areas = areas + " 'item3'";
+            }
+            if (variables.ulm_card_media_player_enable_volume_buttons){
+              areas = areas + " 'item4'";
+            }
+            return areas;
+          ]]]
+      - grid-template-columns: "1fr"
+      - grid-template-rows: |
+          [[[
+            var rows = "min-content";
+            if (variables.ulm_card_media_player_enable_controls){
+              rows = rows + " min-content";
+            }
+            if (variables.ulm_card_media_player_enable_volume_slider){
+              rows = rows + " min-content";
+            }
+            if (variables.ulm_card_media_player_enable_volume_buttons){
+              rows = rows + " min-content";
+            }
+            return rows;
+          ]]]
+      - row-gap: |-
+          [[[
+            if (!variables.ulm_card_media_player_collapsible) {
+                return "12px";
+              } else {
+                return (entity.state === "off" || entity.state === "standby") ? "0px" : "12px";
+              }
+          ]]]
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - background: |
+          [[[
+            return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
+            ? 'center / cover url(' + states[entity.entity_id].attributes.entity_picture + ') rgba(0, 0, 0, 0.15)'
+            : ''
+          ]]]
+    custom_fields:
+      power:
+        - display: "[[[ return variables.ulm_card_media_player_power_button ? 'block' : 'none']]]"
+        - position: "absolute"
+        - top: "12px"
+        - right: "12px"
+      item2:
+        - display: |
+            [[[
+              if(variables.ulm_card_media_player_enable_controls) {
+                if(variables.ulm_card_media_player_collapsible){
+                return (entity.state === "off" || entity.state === "standby") ? "none" : "block";
+                }
+                return "block";
+              }
+              return "none";
+            ]]]
+      item3:
+        - border-radius: "14px"
+        - background-color: >
+            [[[
+              if(variables.ulm_card_media_player_enable_art){
+                return 'transparent'
+              }
+              if(!hass.themes.darkMode){
+                return 'rgb(250,250,250)' ;
+              }
+            ]]]
+        - display: |
+            [[[
+              if(variables.ulm_card_media_player_enable_volume_slider) {
+                if(variables.ulm_card_media_player_collapsible){
+                return (entity.state === "off" || entity.state === "standby") ? "none" : "block";
+                }
+                return "block";
+              }
+              return "none";
+            ]]]
+      item4:
+        - display: |
+            [[[
+              if(variables.ulm_card_media_player_enable_volume_buttons) {
+                if(variables.ulm_card_media_player_collapsible){
+                return (entity.state === "off" || entity.state === "standby") ? "none" : "block";
+                }
+                return "block";
+              }
+              return "none";
+            ]]]
+  custom_fields:
+    power:
+      card:
+        type: "custom:button-card"
+        entity: "[[[ return entity.entity_id ]]]"
+        template: "widget_icon"
+        icon: "mdi:power"
+        tap_action:
+          action: "toggle"
+        styles:
+          card:
+            - background-color: |
+                [[[
+                  if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                    return 'rgba(0, 0, 0, 0.2)'
+                  }
+                  if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
+                    if (variables.ulm_active_state){
+                      return 'rgb(250,250,250)'
+                    }
+                  }
+                  return 'rgba(var(--color-theme),0.05)'
+                ]]]
+          img_cell:
+            - width: "42px"
+            - heigth: "42px"
+            - background-color: >
+                [[[
+                  if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
+                    var color = variables.ulm_card_media_player_color;
+                    return 'rgba(var(--color-' + color + '),0.2)';
+                  }
+                  return 'rgba(var(--color-theme),0.05)';
+                ]]]
+          icon:
+            - color: |
+                [[[
+                  if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                    return 'white'
+                  }
+                  if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
+                    var color = variables.ulm_card_media_player_color;
+                    return 'rgba(var(--color-' + color + '),1)';
+                  }
+                  return 'rgba(var(--color-theme),0.9)';
+                ]]]
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+                  if(variables.ulm_card_media_player_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_media_player_infos'
+                    };
+                  }
+                  return vars;
+                ]]]
+              icon: |
+                [[[
+                  var icon = entity.attributes.icon || "mdi:speaker";
+                  if(entity.attributes.app_name){
+                    var app = entity.attributes.app_name.toLowerCase();
+                    var icon = {
+                      "spotify": "mdi:spotify",
+                      "google podcasts": "mdi:google-podcast",
+                      "plex": "mdi:plex",
+                      "soundcloud": "mdi:soundcloud",
+                      "youtube music": "mdi:youtube",
+                      "oto music": "mdi:music-circle",
+                      "pandora": "mdi:pandora",
+                      "netflix": "mdi:netflix",
+                      "hulu": "mdi:hulu",
+                      "bluetooth audio": "mdi:bluetooth"
+                    }
+                  }
+                  return variables.ulm_card_media_player_icon || icon[app];
+                ]]]
+              styles:
+                icon:
+                  - color: |
+                      [[[
+                        var color = variables.ulm_card_media_player_color;
+                        var active_color = 'rgba(var(--color-theme),0.2)'
+                        if (variables.ulm_active_state){
+                          active_color = 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
+                        ? 'white'
+                        : active_color
+                      ]]]
+                img_cell:
+                  - background-color: |
+                      [[[
+                        var color = variables.ulm_card_media_player_color;
+                        var active_color = 'rgba(var(--color-theme),0.05)'
+                        if (variables.ulm_active_state){
+                          active_color = 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
+                        ? 'rgba(0, 0, 0, 0.2)'
+                        : active_color
+                      ]]]
+                card:
+                  - background: >
+                      [[[
+                        if(!variables.ulm_card_media_player_enable_art && variables.ulm_card_media_player_force_background_color && !hass.themes.darkMode){
+                          return 'rgb(250,250,250)'
+                        }
+                        return 'none'
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+                  if(variables.ulm_card_media_player_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_media_player_infos'
+                    };
+                  }
+                  return vars;
+                ]]]
+              label: "[[[ return variables.ulm_translation_state ]]]"
+              state:
+                - operator: "template"
+                  value: "[[[ return entity.state == 'off' ]]]"
+                  name: |
+                    [[[
+                      let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;
+                      return name;
+                    ]]]
+                - operator: "template"
+                  value: "[[[ return entity.state == 'standby' ]]]"
+                  name: |
+                    [[[
+                      let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;
+                      return name;
+                    ]]]
+                - operator: "template"
+                  value: "[[[ return entity.state != 'off'  || entity.state != 'standby']]]"
+                  name: |
+                    [[[
+                      let name = variables.ulm_card_media_player_name || states[entity.entity_id].attributes.friendly_name;
+                      if(states[entity.entity_id].attributes.media_title){
+                          name = states[entity.entity_id].attributes.media_title;
+                      }
+                      return name;
+                    ]]]
+                  label: |
+                    [[[
+                      let label = variables.ulm_translation_on;
+                      if (variables.ulm_card_media_player_more_info && states[entity.entity_id].attributes.media_artist
+                          && states[entity.entity_id].attributes.media_album_name) {
+                          label = states[entity.entity_id].attributes.media_artist + " • " + states[entity.entity_id].attributes.media_album_name;
+                      } else if(states[entity.entity_id].attributes.media_album_name) {
+                          label = states[entity.entity_id].attributes.media_album_name;
+                      } else if (states[entity.entity_id].attributes.media_artist) {
+                          label = states[entity.entity_id].attributes.media_artist
+                      }
+                      return label;
+                    ]]]
+              styles:
+                label:
+                  - opacity: "1"
+                  - filter: "opacity(100%)"
+                  - text-shadow: |
+                      [[[
+                        return variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null
+                        ? '0 0 black'
+                        : 'none'
+                      ]]]
+                  - color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'white'
+                        }
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state){
+                          return 'rgba(250,250,250,0.5)'
+                        }
+                        return 'rgba(var(--color-theme), .5)'
+                      ]]]
+                name:
+                  - color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'white'
+                        }
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state){
+                          return 'rgb(250,250,250)'
+                        }
+                        return'rgba(var(--color-theme), 1)'
+                      ]]]
+                  - text-shadow: "0 0 black"
+                card:
+                  - padding: "0px"
+                  - background: "none"
+                  - border-radius: "0"
+                  - box-shadow: "none"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_4_items"
+        styles:
+          card:
+            - padding: "0px"
+            - background: "none"
+            - border-radius: "0"
+            - box-shadow: "none"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              hold_action:
+                action: >
+                  [[[
+                      return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
+                  ]]]
+                browser_mod:
+                  service: "browser_mod.popup"
+                  data:
+                    large: true
+                    hide_header: true
+                    content:
+                      type: "custom:button-card"
+                      template: "popup_media_player_infos"
+                      entity: "[[[ return entity.entity_id ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.media_previous_track"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+              icon: "mdi:skip-previous"
+              entity: "[[[ return entity.entity_id ]]]"
+              styles:
+                card:
+                  - background-color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'rgba(0, 0, 0, 0.2)'
+                        }
+                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'white'
+                        }
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+              hold_action:
+                action: >
+                  [[[
+                      return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
+                  ]]]
+                browser_mod:
+                  service: "browser_mod.popup"
+                  data:
+                    large: true
+                    hide_header: true
+                    content:
+                      type: "custom:button-card"
+                      template: "popup_media_player_infos"
+                      entity: "[[[ return entity.entity_id; ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "[[[ return (entity.attributes?.media_duration > 0) ? 'media_player.media_play_pause' : entity.state =='playing' ? 'media_player.media_stop' : 'media_player.media_play']]]"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+              icon: "[[[ return (entity.attributes?.media_duration > 0) ? 'mdi:pause' : 'mdi:stop' ]]]"
+              state:
+                - value: "playing"
+                  icon: "mdi:pause"
+                - value: "paused"
+                  icon: "mdi:play"
+                - value: "off"
+                  icon: "mdi:play"
+                - value: "standby"
+                  icon: "mdi:play"
+                - value: "idle"
+                  icon: "mdi:play"
+              styles:
+                card:
+                  - background-color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'rgba(0, 0, 0, 0.2)'
+                        }
+                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'white'
+                        }
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              hold_action:
+                action: >
+                  [[[
+                      return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
+                  ]]]
+                browser_mod:
+                  service: "browser_mod.popup"
+                  data:
+                    large: true
+                    hide_header: true
+                    content:
+                      type: "custom:button-card"
+                      template: "popup_media_player_infos"
+                      entity: "[[[ return entity.entity_id; ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.media_next_track"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+              icon: "mdi:skip-next"
+              styles:
+                card:
+                  - background-color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'rgba(0, 0, 0, 0.2)'
+                        }
+                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'white'
+                        }
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+          item4:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:playlist-music"
+              entity: "[[[ return entity.entity_id; ]]]"
+              styles:
+                card:
+                  - background-color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'rgba(0, 0, 0, 0.2)'
+                        }
+                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'white'
+                        }
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              hold_action:
+                action: >
+                  [[[
+                      return variables.ulm_card_media_player_enable_popup && entity.attributes?.source_list ? "fire-dom-event" : "more-info";
+                  ]]]
+                browser_mod:
+                  service: "browser_mod.popup"
+                  data:
+                    large: true
+                    hide_header: true
+                    content:
+                      type: "custom:button-card"
+                      template: "popup_media_player_source_card"
+                      entity: "[[[ return entity.entity_id; ]]]"
+              tap_action:
+                action: >
+                  [[[
+                      return variables.ulm_card_media_player_enable_popup && entity.attributes?.source_list ? "fire-dom-event" : "more-info";
+                  ]]]
+                browser_mod:
+                  service: "browser_mod.popup"
+                  data:
+                    large: true
+                    hide_header: true
+                    style: |
+                      --popup-background-color: var(--primary-background-color);
+                      --popup-border-radius: 20px;
+                      --popup-padding-x: 24px;
+                      --popup-padding-y: 20px;
+                      --popup-max-width: auto
+                      --popup-min-width: 800px;
+                    card_mod:
+                      style:
+                        ha-dialog$: |
+                          @media (max-width: 800px){
+                            div.mdc-dialog__container {
+                              --mdc-dialog-min-width: 100vw;
+                              --mdc-dialog-max-width: 100vw;
+                              --mdc-dialog-min-height: 100%;
+                              --ha-dialog-border-radius: 0px;
+                            }
+                          }
+                    content:
+                      type: "custom:button-card"
+                      template: "popup_media_player_source_card"
+                      entity: "[[[ return entity.entity_id; ]]]"
+    item3:
+      card:
+        type: "custom:my-slider"
+        entity: "[[[ return entity.entity_id ]]]"
+        radius: "14px"
+        height: "42px"
+        mainSliderColor: |
+          [[[
+            var color = variables.ulm_card_media_player_color;
+            if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+              return 'rgba(0, 0, 0, 0.5)'
+            }
+            if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
+              return 'rgb(250,250,250)';
+            }
+            return 'rgba(var(--color-' + color + '),1)'
+          ]]]
+        secondarySliderColor: |
+          [[[
+            var color = variables.ulm_card_media_player_color;
+            if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+              return 'rgba(0, 0, 0, 0.3)'
+            }
+            if (variables.ulm_card_media_player_force_background_color) {
+              return 'rgba(var(--color-' + color + '),0.3)';
+            }
+            return 'rgba(var(--color-' + color + '),0.2)'
+          ]]]
+        mainSliderColorOff: "rgba(var(--color-theme),0.05)"
+        secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
+        thumbHorizontalPadding: "0px"
+        thumbVerticalPadding: "0px"
+        thumbWidth: "0px"
+        card_mod:
+          style: |
+            ha-card {
+              border-radius: 14px;
+              background-color: transparent;
+              box-shadow: none;
+            }
+    item4:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        styles:
+          card:
+            - padding: "0px"
+            - background: "none"
+            - border-radius: "0"
+            - box-shadow: "none"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+              hold_action:
+                action: >
+                  [[[
+                      return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
+                  ]]]
+                browser_mod:
+                  service: "browser_mod.popup"
+                  data:
+                    large: true
+                    hide_header: true
+                    content:
+                      type: "custom:button-card"
+                      template: "popup_media_player_infos"
+                      entity: "[[[ return entity.entity_id; ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.volume_mute"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+                data:
+                  is_volume_muted: "[[[ return (states[entity.entity_id].attributes.is_volume_muted) ? false : true; ]]]"
+              icon: "mdi:volume-mute"
+              styles:
+                card:
+                  - background-color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'rgba(0, 0, 0, 0.2)'
+                        }
+                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'white'
+                        }
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+              hold_action:
+                action: >
+                  [[[
+                      return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
+                  ]]]
+                browser_mod:
+                  service: "browser_mod.popup"
+                  data:
+                    large: true
+                    hide_header: true
+                    content:
+                      type: "custom:button-card"
+                      template: "popup_media_player_infos"
+                      entity: "[[[ return entity.entity_id; ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.volume_set"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+                data:
+                  volume_level: |
+                    [[[
+                      var volume = states[entity.entity_id].attributes.volume_level;
+                      if (variables.ulm_card_media_player_enable_volume_adjust != 0) {
+                          volume = states[entity.entity_id].attributes.volume_level - variables.ulm_card_media_player_enable_volume_adjust;
+                      } else {
+                          if (states[entity.entity_id].attributes.device_class === "tv") {
+                              volume = states[entity.entity_id].attributes.volume_level - 0.01;
+                          }
+                          if (states[entity.entity_id].attributes.device_class === "speaker") {
+                              volume = states[entity.entity_id].attributes.volume_level - 0.05;
+                          }
+                          if (states[entity.entity_id].attributes.device_class === "receiver") {
+                              volume = states[entity.entity_id].attributes.volume_level - 0.025;
+                          } else {
+                              volume = states[entity.entity_id].attributes.volume_level - 0.025;
+                          }
+                      }
+                      return volume;
+                    ]]]
+              icon: "mdi:volume-minus"
+              styles:
+                card:
+                  - background-color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'rgba(0, 0, 0, 0.2)'
+                        }
+                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'white'
+                        }
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+              hold_action:
+                action: >
+                  [[[
+                      return variables.ulm_card_media_player_enable_popup ? "fire-dom-event" : "more-info";
+                  ]]]
+                browser_mod:
+                  service: "browser_mod.popup"
+                  data:
+                    large: true
+                    hide_header: true
+                    content:
+                      type: "custom:button-card"
+                      template: "popup_media_player_infos"
+                      entity: "[[[ return entity.entity_id; ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.volume_set"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_player_controls_entity ]]]"
+                data:
+                  volume_level: |
+                    [[[
+                      var volume = states[entity.entity_id].attributes.volume_level;
+                      if (variables.ulm_card_media_player_enable_volume_adjust != 0) {
+                          volume = states[entity.entity_id].attributes.volume_level + variables.ulm_card_media_player_enable_volume_adjust;
+                      } else {
+                          if (states[entity.entity_id].attributes.device_class === "tv") {
+                              volume = states[entity.entity_id].attributes.volume_level + 0.01;
+                          }
+                          if (states[entity.entity_id].attributes.device_class === "speaker") {
+                              volume = states[entity.entity_id].attributes.volume_level + 0.05;
+                          }
+                          if (states[entity.entity_id].attributes.device_class === "receiver") {
+                              volume = states[entity.entity_id].attributes.volume_level + 0.025;
+                          } else {
+                              volume = states[entity.entity_id].attributes.volume_level + 0.025;
+                          }
+                      }
+                      return volume;
+                    ]]]
+              icon: "mdi:volume-plus"
+              styles:
+                card:
+                  - background-color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'rgba(0, 0, 0, 0.2)'
+                        }
+                        if(!hass.themes.darkMode && variables.ulm_card_media_player_force_background_color){
+                          if (variables.ulm_active_state){
+                            return 'rgb(250,250,250)'
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)'
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state && !variables.ulm_card_media_player_enable_art) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: |
+                      [[[
+                        if(variables.ulm_card_media_player_enable_art && states[entity.entity_id].attributes.entity_picture != null){
+                          return 'white'
+                        }
+                        if (variables.ulm_card_media_player_force_background_color && variables.ulm_active_state) {
+                          var color = variables.ulm_card_media_player_color;
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_navigate/index.html b/usage/cards/card_navigate/index.html
new file mode 100644
index 000000000..d42d85312
--- /dev/null
+++ b/usage/cards/card_navigate/index.html
@@ -0,0 +1,3831 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Navigate Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Navigate Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    The card_navigate is for navigating inside your HA dashboard(s).
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_card_navigate_pathThe path to your lovelace dashboard
    ulm_card_navigate_titleTitle to show for the link
    ulm_card_navigate_iconIcon to show
    ulm_card_navigate_colorBlueNoColor of Icon
    
+
    Usage
    
+
    - type: custom:button-card
+  template: card_navigate
+  variables:
+    ulm_card_navigate_path: /ui-lovelace-minimalist/media
+    ulm_card_navigate_title: Media
+    ulm_card_navigate_icon: mdi:television
+    ulm_card_navigate_color: var(--color-red)
+
    
+
    
+Template Code
+
    card_navigate.yaml
    ---
+### Card Navigate ###
+card_navigate:
+  template:
+    - "icon_only"
+  tap_action:
+    action: "navigate"
+    navigation_path: "[[[ return variables.ulm_card_navigate_path; ]]]"
+  variables:
+    ulm_card_navigate_color: "var(--color-blue)"
+  label: "[[[ return variables.ulm_card_navigate_title; ]]]"
+  icon: "[[[ return variables.ulm_card_navigate_icon; ]]]"
+  styles:
+    icon:
+      - color: >
+          [[[
+            let color = variables.ulm_card_navigate_color;
+            return "rgba(" + color + ",0.7)"
+          ]]]
+    label:
+      - align-self: "center"
+      - font-size: "14px"
+      - filter: "opacity(100%)"
+    grid:
+      - grid-template-columns: "min-content min-content"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_person/index.html b/usage/cards/card_person/index.html
new file mode 100644
index 000000000..5411609bb
--- /dev/null
+++ b/usage/cards/card_person/index.html
@@ -0,0 +1,3928 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Person Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Person Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    The card_person shows if a person is home or not_home. If you have setup other zones, it will show these as well.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityThe person entity
    ulm_card_person_entityThe person entity
    ulm_card_person_use_entity_pictureIf you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false.
    ulm_card_person_iconmdi:face-manSets the icon to display if entity picture not shown.
    ulm_card_person_batteryBattery sensor shown in the upper right corner
    ulm_card_person_etaSensor with ETA info from integrations like: Waze, Google and HERE
    ulm_addressShow an address as label, add an entity with a geo location
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_person
+  entity: person.username
+  variables:
+    ulm_card_person_entity: person.username
+    ulm_card_person_use_entity_picture: true
+    ulm_card_person_icon: mdi:face-woman
+    ulm_card_person_battery: sensor.battery_iphone
+    ulm_card_person_eta: sensor.waze_travel_time_person
+    ulm_address: sensor.s10_mike_gegeocodeerde_locatie
+
    
+
    
+Template Code
+
    card_person.yaml
    ---
+### Card Person ###
+card_person:
+  template:
+    - "icon_info_bg"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_person_use_entity_picture: false
+    ulm_card_person_icon: "mdi:face-man"
+    ulm_address: ""
+  triggers_update:
+    - "[[[ return variables.ulm_card_person_entity ]]]"
+    - "[[[ return variables.ulm_card_person_eta ]]]"
+    - "[[[ return variables.ulm_address ]]]"
+  tap_action:
+    action: "more-info"
+  show_label: true
+  show_name: true
+  label: >
+    [[[
+      let translation = helpers.localize(entity)
+      var eta = ""
+      if (variables.ulm_card_person_eta && entity.state != 'home'){
+        eta = " | " + helpers.localize(states[variables.ulm_card_person_eta]);
+      }
+      if (variables.ulm_address){
+        return helpers.localize(states[variables.ulm_address]) + eta;
+      }
+      return translation + eta
+    ]]]
+  name: "[[[ return entity.attributes.friendly_name ]]]"
+  entity: "[[[ return variables.ulm_card_person_entity; ]]]"
+  icon: "[[[ return variables.ulm_card_person_icon; ]]]"
+  show_entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture ]]]"
+  entity_picture:
+    "[[[ return variables.ulm_card_person_use_entity_picture ? entity.attributes.entity_picture\
+    \ : null ]]]"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.9)"
+      - width: >
+          [[[
+            return !variables.ulm_card_person_use_entity_picture ? "20px" : "42px";
+          ]]]
+      - place-self: >
+          [[[
+            return !variables.ulm_card_person_use_entity_picture ? "center" : "stretch stretch";
+          ]]]
+    custom_fields:
+      notification:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "38px"
+        - top: "8px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: >
+            [[[
+              return (entity.state !== 'home') ? "rgba(var(--color-green),1)" : "rgba(var(--color-blue),1)";
+            ]]]
+      info:
+        - position: "absolute"
+        - right: "6px"
+        - top: "6px"
+        - width: "25px"
+        - height: "25px"
+  custom_fields:
+    notification: >
+      [[[
+        if (entity.state == 'home') {
+            return '<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        } else {
+            for (let st in states) {
+                if (st.startsWith("zone.")) {
+                    if (states[st]?.attributes?.persons?.includes(entity.state) && !states[st]?.attributes?.passive) {
+                        var icon = states[st].attributes.icon !== null ? states[st].attributes.icon : 'mdi:help-circle';
+                        return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+                    }
+                }
+            }
+        }
+        return '<ha-icon icon="mdi:home-minus" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+      ]]]
+    info: |
+      [[[
+        if(variables.ulm_card_person_battery){
+        const battery = Math.round(states[variables.ulm_card_person_battery].state/1);
+        const radius = 20.5; const circumference = radius * 2 * Math.PI;
+        return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
+        stroke="green" stroke-width="3" fill="none"
+        style="transform: rotate(-90deg); transform-origin: 50% 50%;
+        stroke-dasharray: ${circumference};
+        stroke-dashoffset: ${circumference - battery / 100 * circumference};" />
+        <text x="50%" y="54%" fill="var(--primary-text-color)" font-size="16" font-weight= "bold"
+        text-anchor="middle" alignment-baseline="middle">
+        ${battery}<tspan font-size="10">%</tspan></text></svg>`;
+        }
+      ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_power_outlet/index.html b/usage/cards/card_power_outlet/index.html
new file mode 100644
index 000000000..f78e7651a
--- /dev/null
+++ b/usage/cards/card_power_outlet/index.html
@@ -0,0 +1,3932 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Power Outlet Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Power Outlet Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This is the power-outlet-card. It shows you the state of a power outlet, and if configured, the actual power consumption of the power outlet.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity
    ulm_card_power_outlet_nameSet custom Name
    ulm_card_power_outlet_iconSet custom Icon
    ulm_card_power_outlet_consumption_sensorIf you set this sensor, the power-outlet-card shows the energy consumption next to the state.
    ulm_card_power_outlet_coloryellowSet Custom Color
    ulm_card_power_outlet_force_background_colorfalseSet ulm_card_power_outlet_color as background color in active state `
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_power_outlet
+  variables:
+    ulm_card_power_outlet_consumption_sensor: sensor.power_outlet_livingroom_consumption
+    ulm_card_power_outlet_name: Power Outlet Livingroom
+  entity: switch.power_outlet_livingroom
+
    
+
    
+Template Code
+
    card_power_outlet.yaml
    ---
+### Card Power Outlet ###
+card_power_outlet:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_power_outlet_consumption_sensor:
+    ulm_card_power_outlet_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_power_outlet_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_outlet_power_enable_popup: false
+    ulm_card_power_outlet_color: "yellow"
+    ulm_card_power_outlet_force_background_color: false
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (variables.ulm_card_power_outlet_force_background_color) {
+                  var color = variables.ulm_card_power_outlet_color;
+                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                }
+              ]]]
+  triggers_update:
+    - "[[[ return variables.ulm_card_power_outlet_consumption_sensor ]]]"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_power_outlet_icon ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor}
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_power_outlet_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                        return 'rgba(var(--color-theme),0.2)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_power_outlet_color;
+                        if (variables.ulm_active_state){
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_card_power_outlet_name ]]]"
+              label: |-
+                [[[
+                  if (entity.state === "on" && variables.ulm_card_power_outlet_consumption_sensor !== null) {
+                    return variables.ulm_translation_state + " • " + states[variables.ulm_card_power_outlet_consumption_sensor].state + "W";
+                  } else {
+                    return variables.ulm_translation_state;
+                  }
+                ]]]
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_outlet_power_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_power_outlet_stats',
+                      'popup_variables': {'ulm_popup_power_outlet_sensor1': variables.ulm_popup_power_outlet_sensor1,
+                        'ulm_popup_power_outlet_sensor2': variables.ulm_popup_power_outlet_sensor2,
+                        'ulm_popup_power_outlet_graph_sensor': variables.ulm_popup_power_outlet_graph_sensor}
+                    };
+                  }
+                  return vars;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_power_outlet_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_power_outlet_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_room/index.html b/usage/cards/card_room/index.html
new file mode 100644
index 000000000..329ff8de7
--- /dev/null
+++ b/usage/cards/card_room/index.html
@@ -0,0 +1,4232 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Room Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Room Card
    
+
+
+
+
    Description
    
+
    Image title
    
+
    This is the room-card, used to show the state of single room in a quick glance.
+The card has support for up to 4 subicons at the right side of the card. These can be configured using custom colors and tap actions.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotesRequirement
    label_use_temperaturetrueDefine whether the label should show the current room temperature
    The temperature should be provide by either a temperature or current_temperature attribute or by the entity state
    label_use_brightnessfalseDefine whether the label should show the current room brightness of the lights
    Requires label_use_temperature to be false
    entity_1a room_entity object (see below)
    entity_2a room_entity object (see below)
    entity_3a room_entity object (see below)
    entity_4a room_entity object (see below)
    
+
    Room entity
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotesRequirement
    entity_idThe entity_id of the status icon
    templatesList of the additional button card templates to apply to this icon
    tap_actiontap_action for the icon (see button card documentation for options)
    hold_actiontap_action for the icon (see button card documentation for options)
    
+
    Default card options
    
+
    All the options from the button card are still available for the large room card.
+If you want to tweak this card a little bit more, below are some examples. The full list can be found here: link
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    OptionsDefaultRequiredNotesRequirement
    entityThe entity_id for the large card
    iconIcon to display. Defaults to the entity icon
    tap_actionDefine the type of action on click, if undefined, toggle will be used.
    See Action
    hold_actionDefine the type of action on hold, if undefined, nothing happens
     See Action
    labelChange the label text
    titleChange the title text
    
+
    Usage
    
+
      - type: 'custom:button-card'
+    template:
+      - card_room
+      - red_no_state
+    name: Bathroom
+    entity: light.bathroom
+    icon: mdi:shower-head
+    tap_action:
+      action: navigate
+      navigation_path: '/ui-lovelace-minimalist/bathroom'
+    variables:
+      label_use_temperature: false
+      label_use_brightness: true
+      entity_1:
+        entity_id: light.bathroom
+        templates:
+          - yellow_on
+        tap_action:
+          action: toggle
+      entity_2:
+        entity_id: binary_sensor.badkamer_motion_sensor
+        templates:
+          - blue_on
+        tap_action:
+          action: none
+      entity_3:
+        entity_id: input_boolean.badkamer_motionsensor_enabled
+        templates:
+          - green_on
+          - red_off
+        tap_action:
+          action: toggle
+      entity_4:
+        entity_id: input_boolean.bath_mode
+        templates:
+          - pink_on
+        tap_action:
+          action: toggle
+
    
+
    
+Template Code
+
    card_room.yaml
    ---
+card_room:
+  template:
+    - "ulm_translation_engine"
+  variables:
+    label_use_temperature: true
+    label_use_brightness: false
+  double_tap_action:
+    action: "perform-action"
+    perform_action: "input_select.select_option"
+    target:
+      entity_id: "[[[ return variables.ulm_input_select ]]]"
+    data:
+      option: "[[[ return variables.ulm_input_select_option ]]]"
+  color: "var(--google-grey-500)"
+  size: "45%"
+  aspect_ratio: "1/1"
+  show_icon: true
+  show_label: true
+  show_name: true
+  icon: "mdi:sofa-single"
+  label: |-
+    [[[
+      if (variables.label_use_temperature) {
+        return (entity?.attributes?.current_temperature || entity?.attributes?.temperature || entity?.attributes?.device_temperature || entity?.state || '-') + (entity?.attributes?.unit_of_measurement || '°C');
+      } else if (variables.label_use_brightness && entity?.state == "on" && entity?.attributes?.brightness != null) {
+        let bri = Math.round(entity?.attributes?.brightness / 2.55);
+        return (bri ? bri : "0") + "%";
+      }
+      return variables.ulm_translation_state;
+    ]]]
+  state:
+    - value: "unavailable"
+      styles:
+        custom_fields:
+          notification:
+            - border-radius: "50%"
+            - border: "2px solid var(--card-background-color)"
+            - width: "24.5px"
+            - height: "24.5px"
+            - position: "absolute"
+            - left: "50%"
+            - top: "50%"
+            - transform: "translate(-50%,-50%)"
+            - margin-top: "35%"
+            - margin-left: "-35%"
+            - line-height: 0
+            - display: "grid"
+            - background-color: "[[[ return 'rgba(var(--color-red),1)'; ]]]"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bold"
+      - font-size: "14px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+      - max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_1 && !variables?.entity_2 ? 5 : 0}px))`; ]]]"
+      - text-overflow: "ellipsis"
+      - overflow: "hidden"
+      - margin-top: "[[[ return !variables?.entity_1 ? '-24%' : '-10%'; ]]]"
+    name:
+      - justify-self: "start"
+      - align-self: "end"
+      - font-weight: "bold"
+      - font-size: "18px"
+      - margin-left: "12px"
+      - margin-bottom: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? '15.8%' : '24%') : '10%'; ]]]"
+      - max-width: "[[[ return `calc(100% - (12px + ${!variables?.entity_2 ? 5 : 0}px))`; ]]]"
+      - text-overflow: "ellipsis"
+      - overflow: "hidden"
+    state:
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "6px"
+    img_cell:
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "50%"
+      - width: "75%"
+      - height: "75%"
+      - max-width: "none"
+      - max-height: "none"
+      - position: "absolute"
+      - left: "50%"
+      - top: "50%"
+      - transform: "translate(-50%,-50%)"
+      - margin-top: "25%"
+      - margin-left: "-25%"
+    grid:
+      - grid-template-areas: "[[[ return !variables?.entity_1 ? (!variables?.entity_2 ? `'n n n' 'l l i3' 'i i i4'` : `'n n i2' 'l l i3' 'i i i4'`) : `'n n n i1' 'l l l i2' 'i i . i3' 'i i . i4'`; ]]]"
+      - grid-template-columns: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
+      - grid-template-rows: "[[[ return !variables?.entity_1 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr'; ]]]"
+      - justify-items: "center"
+    card:
+      - border-radius: "20px"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "5px"
+    custom_fields:
+      i1: &widget_icon_room_styling
+        - border-radius: "50%"
+        - width: "80%"
+        - height: "80%"
+        - line-height: 0
+        - display: "grid"
+      i2: *widget_icon_room_styling
+      i3: *widget_icon_room_styling
+      i4: *widget_icon_room_styling
+  custom_fields:
+    notification: >
+      [[[
+        if (entity?.state == 'unavailable'){
+          return '<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>';
+        }
+      ]]]
+
+    i1:
+      card:
+        type: "custom:button-card"
+        template: >
+          [[[
+            let templates = [ 'widget_icon_room' ];
+            if (variables?.entity_1?.templates?.length) {
+              templates.push(...variables.entity_1.templates);
+            }
+            return templates;
+          ]]]
+        variables: "[[[ return variables?.entity_1; ]]]"
+        state:
+          - operator: "template"
+            value: "[[[ return !variables.entity_1; ]]]"
+            styles:
+              card:
+                - display: "none"
+        entity: "[[[ return variables?.entity_1?.entity_id; ]]]"
+
+    i2:
+      card:
+        type: "custom:button-card"
+        template: >
+          [[[
+            let templates = [ 'widget_icon_room' ];
+            if (variables?.entity_2?.templates?.length) {
+              templates.push(...variables.entity_2.templates);
+            }
+            return templates;
+          ]]]
+        variables: "[[[ return variables?.entity_2; ]]]"
+        state:
+          - operator: "template"
+            value: "[[[ return !variables.entity_2; ]]]"
+            styles:
+              card:
+                - display: "none"
+        entity: "[[[ return variables?.entity_2?.entity_id; ]]]"
+
+    i3:
+      card:
+        type: "custom:button-card"
+        template: >
+          [[[
+            let templates = [ 'widget_icon_room' ];
+            if (variables?.entity_3?.templates?.length) {
+              templates.push(...variables.entity_3.templates);
+            }
+            return templates;
+          ]]]
+        variables: "[[[ return variables?.entity_3; ]]]"
+        state:
+          - operator: "template"
+            value: "[[[ return !variables.entity_3; ]]]"
+            styles:
+              card:
+                - display: "none"
+        entity: "[[[ return variables?.entity_3?.entity_id; ]]]"
+
+    i4:
+      card:
+        type: "custom:button-card"
+        template: >
+          [[[
+            let templates = [ 'widget_icon_room' ];
+            if (variables?.entity_4?.templates?.length) {
+              templates.push(...variables.entity_4.templates);
+            }
+            return templates;
+          ]]]
+        variables: "[[[ return variables?.entity_4; ]]]"
+        state:
+          - operator: "template"
+            value: "[[[ return !variables.entity_4; ]]]"
+            styles:
+              card:
+                - display: "none"
+        entity: "[[[ return variables?.entity_4?.entity_id; ]]]"
+
+widget_icon_room:
+  variables:
+    tap_action:
+      action: "toggle"
+    hold_action:
+      action: "more-info"
+  tap_action:
+    action: "[[[ return variables?.tap_action?.action ? variables.tap_action.action : 'none'; ]]]"
+    entity: "[[[ return variables.tap_action.entity; ]]]"
+    navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
+    url_path: "[[[ return variables.tap_action.url_path; ]]]"
+    perform_action: "[[[ return variables.tap_action.service; ]]]"
+    target: "[[[ return variables.tap_action.service_data; ]]]"
+  hold_action:
+    action: "[[[ return variables?.hold_action?.action ? variables.hold_action.action : 'none'; ]]]"
+    entity: "[[[ return variables.hold_action.entity; ]]]"
+    navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
+    url_path: "[[[ return variables.hold_action.url_path; ]]]"
+    perform_action: "[[[ return variables.hold_action.service; ]]]"
+    target: "[[[ return variables.hold_action.service_data; ]]]"
+  size: "15px"
+  color: "var(--google-grey)"
+  show_icon: true
+  show_name: false
+  styles:
+    icon:
+      - width: "50%"
+      - height: "50%"
+      - line-height: "0"
+      - color: "rgba(var(--color-theme),0.2)"
+    img_cell:
+      - border-radius: "50%"
+      - background-color: "rgba(var(--color-theme),0.05)"
+    grid:
+      - grid-template-areas: "'i'"
+    card:
+      - height: "100%"
+      - box-shadow: "none"
+      - padding: "0px"
+      - border-radius: "50%"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_scenes/index.html b/usage/cards/card_scenes/index.html
new file mode 100644
index 000000000..6197eb7b7
--- /dev/null
+++ b/usage/cards/card_scenes/index.html
@@ -0,0 +1,4151 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Scenes Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Scenes Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This card is part of the Welcome Scenes card and can be used separately to only show the scene pills. It has the same features set as the pills in the Welcome Scenes card.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity_1auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_2auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_3auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_4auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_5auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_6noneCan be any common type of entity
    entity_7noneCan be any common type of entity
    
+
    Entity Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    _entity_idSupport almost all types of entities 
     Scenes do always show as off
    _iconThe icon to show
    _nameThe name to show
    _colorRandomColor of the icon 
     Can choose between: blue, red, green, yellow, pink, purple 
     If not specified, it will take a random color
    _stateon or playingDefine input_select state or give manual state for pill to be full
    _nav_pathNavigate to another view 
     Overrides other types of actions
    
+
    Usage
    
+
    
+
    You can set 1 to 7 entities to show 1 to 7 pills dynamically 
    
+If set none it uses auto-entities with max 5 pills
    
+
    
+
    - type: "custom:button-card"
+  template: "card_scenes_welcome"
+  variables:
+    entity_1:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "blue"
+    entity_2:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "red"
+    entity_3:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "green"
+    entity_4:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "purple"
+    entity_5:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "yellow"
+    entity_6:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "pink"
+    entity_7:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "yellow"
+
    
+
    
+Auto-entities
+
    - type: "custom:button-card"
+  template: "card_scenes_welcome"
+
    
+
    
+
    
+Template Code
+
    card_welcome_scenes.yaml
    ---
+card_scenes_welcome:
+  show_icon: false
+  show_name: true
+  show_label: false
+  variables:
+    entity_1:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_2:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_3:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_4:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_5:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_6:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_7:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            var pills = []
+            const entities = [variables.entity_1?.entity_id, variables.entity_2?.entity_id, variables.entity_3?.entity_id, variables.entity_4?.entity_id, variables.entity_5?.entity_id, variables.entity_6?.entity_id, variables.entity_7?.entity_id]
+            function entity_check(item) {
+                if (item != "") {
+                    pills.push("item" + (pills.length+1))
+                }
+            }
+            entities.forEach(entity_check)
+            return pills.join(" ")
+          ]]]
+      - display: "flex"
+      - grid-template-rows: "min-content"
+      - justify-content: "space-evenly"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - overflow: "visible"
+    custom_fields:
+      item1:
+        - display: "[[[ return (variables.entity_1.entity_id != '') ? 'block' : 'none' ]]]"
+      item2:
+        - display: "[[[ return (variables.entity_2.entity_id != '') ? 'block' : 'none' ]]]"
+      item3:
+        - display: "[[[ return (variables.entity_3.entity_id != '') ? 'block' : 'none' ]]]"
+      item4:
+        - display: "[[[ return (variables.entity_4.entity_id != '') ? 'block' : 'none' ]]]"
+      item5:
+        - display: "[[[ return (variables.entity_5.entity_id != '') ? 'block' : 'none' ]]]"
+      item6:
+        - display: "[[[ return (variables.entity_6.entity_id != '') ? 'block' : 'none' ]]]"
+      item7:
+        - display: "[[[ return (variables.entity_7.entity_id != '') ? 'block' : 'none' ]]]"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill_welcome"
+        variables: "[[[ return variables.entity_1; ]]]"
+        entity: "[[[ return variables.entity_1.entity_id ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_1.entity_id ]]]"
+              icon: "[[[ return variables.entity_1.icon ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_1.entity_id ]]]"
+              name: "[[[ return variables.entity_1.name ]]]"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill_welcome"
+        variables: "[[[ return variables.entity_2; ]]]"
+        entity: "[[[ return variables.entity_2.entity_id ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_2.entity_id ]]]"
+              icon: "[[[ return variables.entity_2.icon ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_2.entity_id ]]]"
+              name: "[[[ return variables.entity_2.name ]]]"
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill_welcome"
+        variables: "[[[ return variables.entity_3; ]]]"
+        entity: "[[[ return variables.entity_3.entity_id ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_3.entity_id ]]]"
+              icon: "[[[ return variables.entity_3.icon ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_3.entity_id ]]]"
+              name: "[[[ return variables.entity_3.name ]]]"
+    item4:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill_welcome"
+        variables: "[[[ return variables.entity_4; ]]]"
+        entity: "[[[ return variables.entity_4.entity_id ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_4.entity_id ]]]"
+              icon: "[[[ return variables.entity_4.icon ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_4.entity_id ]]]"
+              name: "[[[ return variables.entity_4.name ]]]"
+    item5:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill_welcome"
+        variables: "[[[ return variables.entity_5; ]]]"
+        entity: "[[[ return variables.entity_5.entity_id ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_5.entity_id ]]]"
+              icon: "[[[ return variables.entity_5.icon ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_5.entity_id ]]]"
+              name: "[[[ return variables.entity_5.name ]]]"
+    item6:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill_welcome"
+        variables: "[[[ return variables.entity_6; ]]]"
+        entity: "[[[ return variables.entity_6.entity_id ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_6.entity_id ]]]"
+              icon: "[[[ return variables.entity_6.icon ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_6.entity_id ]]]"
+              name: "[[[ return variables.entity_6.name ]]]"
+    item7:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill_welcome"
+        variables: "[[[ return variables.entity_7; ]]]"
+        entity: "[[[ return variables.entity_7.entity_id ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_7.entity_id ]]]"
+              icon: "[[[ return variables.entity_7.icon ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return variables.entity_7.entity_id ]]]"
+              name: "[[[ return variables.entity_7.name ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_script/index.html b/usage/cards/card_script/index.html
new file mode 100644
index 000000000..a6acde04f
--- /dev/null
+++ b/usage/cards/card_script/index.html
@@ -0,0 +1,3833 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Script Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Script Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This card starts/runs a script. You can configure icon and text.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_card_script_titleName to show for the script.
    ulm_card_script_iconIcon to show for the script.
    tap_action_actionOnly call-service is allowed here.
    tap_action_serviceLet the script run by turning it on.
    tap_action_service_dataThis is the service_data needed by your script. That can be an entity_id and/or some variables.
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_script
+  variables:
+    ulm_card_script_title: Romantic lights
+    ulm_card_script_icon: 'mdi:candle'
+  tap_action:
+    action: call-service
+    service: script.turn_on
+    service_data:
+      entity_id: script.romantic_livingroom_lights
+
    
+
    
+Template Code
+
    card_script.yaml
    ---
+### Card Script ###
+card_script:
+  template:
+    - "icon_only"
+  label: "[[[ return variables.ulm_card_script_title; ]]]"
+  icon: "[[[ return variables.ulm_card_script_icon; ]]]"
+  styles:
+    icon:
+      - color: "rgba(var(--color-blue),0.7)"
+    label:
+      - align-self: "center"
+      - font-size: "14px"
+      - filter: "opacity(100%)"
+    img_cell:
+      - background-color: "rgba(var(--color-blue), 0.2)"
+    grid:
+      - grid-template-columns: "min-content min-content"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_thermostat/index.html b/usage/cards/card_thermostat/index.html
new file mode 100644
index 000000000..244ff7353
--- /dev/null
+++ b/usage/cards/card_thermostat/index.html
@@ -0,0 +1,4681 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Thermostat Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Thermostat Card
    
+
+
+
+
    Description
    
+
    Image title
+Image title
+Image title
+Image title
    
+
    This is the thermostat-card, used to toggle a climate entity. Shows state of the thermostat and, if available, current temperature.
    
+
    This documentation refers to the new "All in one" thermostat card.
+This card merges the following one :
    
+
      
+
    • legacy card_thermostat (the old one)
      • 
+
    • custom custom_card_heat_pump by Kam
      • 
+
    • custom custom_card_mpse_thermostat by mpse
      • 
+
    • custom custom_card_httpedo13_thermostat by httpedo13
      • 
+
    • custom custom_card_httpedo13_thermostat_with_buttons by httpedo13
      • 
+
    • custom custom_card_httpedo13_thermostat_with_buttons_collapse by httpedo13
      • 
+
    
+
    
+
    Warning
    
+
    This card has backward compatibility with older template except custom names and icons. It means variables like ulm_card_XXX_name and ulm_card_XXX_icon must be replaced by ulm_card_thermostat_name and ulm_card_thermostat_icon.
+To use popup_thermostat you need to set the variable ulm_card_thermostat_enable_popup to true. This is a different approach as the other popup_cards use.
    
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Variable/EntityDefaultRequiredNotesRequirement
    entityYour HA entity
    ulm_card_thermostat_namefriendly_nameCustomize name
    ulm_card_thermostat_iconmdi:thermometerCustomize icon
    ulm_card_thermostat_enable_collapsefalseCollapse controls when offNeed ulm_card_thermostat_enable_controls: true
    ulm_card_thermostat_enable_controlsfalseEnable temperature control
    ulm_card_thermostat_enable_hvac_modesfalseEnable HVAC modes control
    ulm_card_thermostat_enable_background_colorfalseEnable background color when cooling or heating
    ulm_card_thermostat_enable_display_temperaturefalseDisplay  current temperature on top right
    ulm_card_thermostat_enable_horizontalfalseEnable horizontal cardNeed ulm_card_thermostat_enable_controls: true
    ulm_card_thermostat_enable_popupfalseEnable popup_thermostat
    ulm_card_thermostat_fan_entitynullfan entity for climate if separate entity
    ulm_card_thermostat_minimum_temp_spread1Minimum temperature spread between low and high temperature when in heat_cool mode
    ulm_card_thermostat_temp_stepfalseSet the step size for increasing and decreasing temperature
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_thermostat
+  entity: climate.hvac
+  variables:
+    ulm_card_thermostat_enable_collapse: true
+    ulm_card_thermostat_enable_controls: true
+    ulm_card_thermostat_enable_hvac_modes: true
+    ulm_card_thermostat_enable_popup: true
+
    
+
    
+Template Code
+
    card_thermostat.yaml
    ---
+### Card Thermostat ###
+card_thermostat:
+  template:
+    - "ulm_translation_engine"
+    - "icon_more_info_new"
+  variables:
+    ulm_card_thermostat_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_thermostat_icon: "[[[ return 'mdi:thermometer' ]]]"
+    ulm_card_thermostat_enable_collapse: false
+    ulm_card_thermostat_enable_controls: false
+    ulm_card_thermostat_enable_hvac_modes: false
+    ulm_card_thermostat_enable_background_color: false
+    ulm_card_thermostat_enable_display_temperature: false
+    ulm_card_thermostat_enable_horizontal: false
+    ulm_card_thermostat_enable_popup: false
+    ulm_card_thermostat_fan_entity: null
+    ulm_card_thermostat_minimum_temp_spread: 1
+    ulm_card_thermostat_preset_mode: false
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - operator: "template"
+      value: >
+        [[[
+          return (entity.attributes.hvac_action == 'heating' && variables.ulm_card_thermostat_enable_background_color)
+        ]]]
+      styles:
+        card:
+          - background-color: "rgba(255,165,0,0.75)"
+    - operator: "template"
+      value: >
+        [[[
+          return (entity.attributes.hvac_action == 'cooling' && variables.ulm_card_thermostat_enable_background_color)
+        ]]]
+      styles:
+        card:
+          - background-color: "rgba(0,191,255,0.75)"
+    - operator: "template"
+      value: >
+        [[[
+          return entity.state != 'off'
+        ]]]
+      styles:
+        card:
+          - background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+                var areas = [];
+                if (variables.ulm_card_thermostat_enable_horizontal) {
+                  return "\"item1 item2\"";
+                }
+                if (variables.ulm_card_thermostat_enable_display_temperature) {
+                    areas.push("item1 item4");
+                } else {
+                  areas.push("item1 item1");
+                }
+                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == "off") && variables.ulm_card_thermostat_enable_controls) {
+                    areas.push("item2 item2");
+                }
+                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == "off") && variables.ulm_card_thermostat_enable_controls && entity.attributes.target_temp_high != null) {
+                    areas.push("low_temp_adjustment low_temp_adjustment");
+                }
+                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == "off") && variables.ulm_card_thermostat_enable_hvac_modes) {
+                    areas.push("item3 item3");
+                }
+                return "\"" + areas.join("\" \"") + "\"";
+          ]]]
+      - grid-template-columns: >
+          [[[
+                  return variables.ulm_card_thermostat_enable_horizontal ? "1fr 1fr" : "2fr 1fr";
+          ]]]
+      - grid-template-rows: >
+          [[[
+                var rows = [];
+                rows.push("min-content");
+                if (variables.ulm_card_thermostat_enable_horizontal) {
+                  return "min-content";
+                }
+                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == "off") && variables.ulm_card_thermostat_enable_controls) {
+                    rows.push("min-content");
+                }
+                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == "off") && variables.ulm_card_thermostat_enable_controls && entity.attributes.target_temp_high != null) {
+                    rows.push("min-content");
+                }
+                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == "off") && variables.ulm_card_thermostat_enable_hvac_modes) {
+                    rows.push("min-content");
+                }
+                return rows.join(" ");
+          ]]]
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+    custom_fields:
+      item2:
+        - display: >
+            [[[
+                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == "off") && variables.ulm_card_thermostat_enable_controls) {
+                      return "block";
+                  } else {
+                      return "none";
+                  }
+            ]]]
+      low_temp_adjustment:
+        - display: >
+            [[[
+                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == "off") && variables.ulm_card_thermostat_enable_controls && entity.attributes.target_temp_high != null) {
+                      return "block";
+                  } else {
+                      return "none";
+                  }
+            ]]]
+      item3:
+        - display: >
+            [[[
+                if (variables.ulm_card_thermostat_enable_horizontal) {
+                  return "none";
+                }
+                if ( !(variables.ulm_card_thermostat_enable_collapse && entity.state == "off") && variables.ulm_card_thermostat_enable_hvac_modes) {
+                  return "block";
+                } else {
+                  return "none";
+                }
+            ]]]
+      item4:
+        - display: >
+            [[[
+                if (variables.ulm_card_thermostat_enable_horizontal) {
+                  return "none";
+                }
+                if (variables.ulm_card_thermostat_enable_display_temperature) {
+                  return "block";
+                } else {
+                  return "none";
+                }
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_card_thermostat_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_thermostat_temperature',
+                      'popup_variables': {'ulm_card_thermostat_preset_mode': variables.ulm_card_thermostat_preset_mode }
+                    };
+                  }
+                  return vars;
+                ]]]
+              icon: "[[[ return variables.ulm_card_thermostat_icon ]]]"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'heating')
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-red),1)"
+                    img_cell:
+                      - background-color: "rgba(var(--color-red),0.2)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling')
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-blue),1)"
+                    img_cell:
+                      - background-color: "rgba(var(--color-blue),0.2)"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_card_thermostat_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_thermostat_temperature',
+                      'popup_variables': {'ulm_card_thermostat_preset_mode': variables.ulm_card_thermostat_preset_mode }
+                    };
+                  }
+                  return vars;
+                ]]]
+              name: "[[[ return variables.ulm_card_thermostat_name ]]]"
+              label: >-
+                [[[
+                    var label = variables.ulm_translation_state;
+                    if((entity.attributes.temperature || entity.attributes.target_temp_high != null) && !variables.ulm_card_thermostat_enable_display_temperature){
+                      return variables.ulm_translation_state;
+                    }
+                    return label;
+                ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        styles:
+          card:
+            - background: "none"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:minus"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  target_temp_low: |
+                    [[[
+                      if (entity.attributes.target_temp_low == null) {
+                        return 0;
+                      } else {
+                        const unit = hass.config.unit_system.temperature
+                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '°F' ? 1.0 : 0.5)
+                        const new_temp =  (parseFloat(entity.attributes.target_temp_high) - step)
+                        return (new_temp - variables.ulm_card_thermostat_minimum_temp_spread < entity.attributes.target_temp_low ? new_temp - variables.ulm_card_thermostat_minimum_temp_spread : entity.attributes.target_temp_low);
+                      }
+                    ]]]
+                  target_temp_high: |
+                    [[[
+                      if (entity.attributes.target_temp_low == null) {
+                        return 0;
+                      } else {
+                        const unit = hass.config.unit_system.temperature
+                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '°F' ? 1.0 : 0.5)
+                        return (parseFloat(entity.attributes.target_temp_high) - step)
+                      }
+                    ]]]
+                  temperature: |
+                    [[[
+                      if (entity.attributes.temperature == null) {
+                        return 0;
+                      } else {
+                        const unit = hass.config.unit_system.temperature
+                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '°F' ? 1.0 : 0.5)
+                        return (parseFloat(states[entity.entity_id].attributes.temperature) - step)
+                      }
+                    ]]]
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+          item2:
+            card:
+              type: "custom:button-card"
+              show_icon: false
+              show_name: false
+              show_label: true
+              entity: "[[[ return entity.entity_id ]]]"
+              label: |-
+                [[[
+                    var temperature = entity.attributes.temperature || entity.attributes.target_temp_high;
+                    if (temperature == null) {
+                      var temperature = '-';
+                    }
+                    return temperature + hass.config.unit_system.temperature;
+                ]]]
+              styles:
+                card:
+                  - background: "none"
+                  - box-shadow: "none"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:plus"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  target_temp_low: |
+                    [[[
+                      if (entity.attributes.target_temp_low == null) {
+                        return 0;
+                      } else {
+                        return entity.attributes.target_temp_low;
+                      }
+                    ]]]
+                  target_temp_high: |
+                    [[[
+                      if (entity.attributes.target_temp_high == null) {
+                        return 0;
+                      } else {
+                        const unit = hass.config.unit_system.temperature
+                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '°F' ? 1.0 : 0.5)
+                        return (parseFloat(entity.attributes.target_temp_high) + step)
+                      }
+                    ]]]
+                  temperature: |
+                    [[[
+                      if (entity.attributes.temperature == null) {
+                        return 0;
+                      } else {
+                        const unit = hass.config.unit_system.temperature
+                        const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '°F' ? 1.0 : 0.5)
+                        return (parseFloat(states[entity.entity_id].attributes.temperature) + step)
+                      }
+                    ]]]
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+    low_temp_adjustment:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        styles:
+          card:
+            - background: "none"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:minus"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  target_temp_low: |
+                    [[[
+                      const unit = hass.config.unit_system.temperature
+                      const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '°F' ? 1.0 : 0.5)
+                      return (parseFloat(entity.attributes.target_temp_low) - step)
+                    ]]]
+                  target_temp_high: "[[[ return entity.attributes.target_temp_high ]]]"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+          item2:
+            card:
+              type: "custom:button-card"
+              show_icon: false
+              show_name: false
+              show_label: true
+              entity: "[[[ return entity.entity_id ]]]"
+              label: |-
+                [[[
+                    var temperature = entity.attributes.target_temp_low;
+                    if (temperature == null) {
+                      var temperature = '-';
+                    }
+                    return temperature + hass.config.unit_system.temperature;
+                ]]]
+              styles:
+                card:
+                  - background: "none"
+                  - box-shadow: "none"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:plus"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  target_temp_low: |
+                    [[[
+                      const unit = hass.config.unit_system.temperature
+                      const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '°F' ? 1.0 : 0.5)
+                      return (parseFloat(entity.attributes.target_temp_low) + step)
+                    ]]]
+                  target_temp_high: |
+                    [[[
+                      const unit = hass.config.unit_system.temperature
+                      const step = variables.ulm_card_thermostat_temp_step || entity.attributes.target_temp_step || (unit == '°F' ? 1.0 : 0.5)
+                      const new_temp = (parseFloat(entity.attributes.target_temp_low) + step)
+                      return (new_temp + variables.ulm_card_thermostat_minimum_temp_spread > entity.attributes.target_temp_high ? new_temp + variables.ulm_card_thermostat_minimum_temp_spread : entity.attributes.target_temp_high)
+                    ]]]
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+    item3:
+      card:
+        type: "custom:button-card"
+        styles:
+          grid:
+            - grid-template-areas: >
+                [[[
+                      var areas = [];
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("auto")) {
+                          areas.push("auto");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("heat")) {
+                          areas.push("heat");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("cool")) {
+                          areas.push("cool");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("dry")) {
+                          areas.push("dry");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("heat_cool")) {
+                          areas.push("heat_cool");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("fan_only")) {
+                          areas.push("fan_only");
+                      }
+                      if (!states[entity.entity_id].attributes.hvac_modes.includes("fan_only") && (variables.ulm_card_thermostat_fan_entity !== null)) {
+                          areas.push("fan_entity_only");
+                      }
+                      return "\"" + areas.join(" ") + "\"";
+                ]]]
+            - grid-template-columns: >
+                [[[
+                      var columns = [];
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("auto")) {
+                          columns.push("1fr");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("heat")) {
+                          columns.push("1fr");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("cool")) {
+                          columns.push("1fr");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("dry")) {
+                          columns.push("1fr");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("heat_cool")) {
+                          columns.push("1fr");
+                      }
+                      if (states[entity.entity_id].attributes.hvac_modes.includes("fan_only")) {
+                          columns.push("1fr");
+                      }
+                      if (!states[entity.entity_id].attributes.hvac_modes.includes("fan_only") && (variables.ulm_card_thermostat_fan_entity !== null)) {
+                          columns.push("1fr");
+                      }
+                      return columns.join(" ");
+                ]]]
+            - grid-template-rows: "min-content"
+            - column-gap: "7px"
+          card:
+            - box-shadow: "none"
+            - padding: "0px"
+            - background: "none"
+          custom_fields:
+            auto:
+              - display: >
+                  [[[
+                    if (states[entity.entity_id].attributes.hvac_modes.includes("auto")) {
+                        return "block";
+                    } else {
+                        return "none";
+                    }
+                  ]]]
+            heat:
+              - display: >
+                  [[[
+                    if (states[entity.entity_id].attributes.hvac_modes.includes("heat")) {
+                        return "block";
+                    } else {
+                        return "none";
+                    }
+                  ]]]
+            cool:
+              - display: >
+                  [[[
+                    if (states[entity.entity_id].attributes.hvac_modes.includes("cool")) {
+                        return "block";
+                    } else {
+                        return "none";
+                    }
+                  ]]]
+            dry:
+              - display: >
+                  [[[
+                    if (states[entity.entity_id].attributes.hvac_modes.includes("dry")) {
+                        return "block";
+                    } else {
+                        return "none";
+                    }
+                  ]]]
+            heat_cool:
+              - display: >
+                  [[[
+                    if (states[entity.entity_id].attributes.hvac_modes.includes("heat_cool")) {
+                        return "block";
+                    } else {
+                        return "none";
+                    }
+                  ]]]
+            fan_only:
+              - display: >
+                  [[[
+                    if (states[entity.entity_id].attributes.hvac_modes.includes("fan_only")) {
+                        return "block";
+                    } else {
+                        return "none";
+                    }
+                  ]]]
+            fan_entity_only:
+              - display: >
+                  [[[
+                    if (!states[entity.entity_id].attributes.hvac_modes.includes("fan_only") && (variables.ulm_card_thermostat_fan_entity !== null)) {
+                        return "block";
+                    } else {
+                        return "none";
+                    }
+                  ]]]
+        custom_fields:
+          auto:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:autorenew"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_hvac_mode"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  hvac_mode: "auto"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "auto"
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-green),0.5)"
+                    icon:
+                      - color: "rgba(var(--color-green),1)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+          heat:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:fire"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_hvac_mode"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  hvac_mode: "heat"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "heat"
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-red),0.5)"
+                    icon:
+                      - color: "rgba(var(--color-red),1)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+          cool:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:snowflake"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_hvac_mode"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  hvac_mode: "cool"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "cool"
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-blue),0.5)"
+                    icon:
+                      - color: "rgba(var(--color-blue),1)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+          dry:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:water"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_hvac_mode"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  hvac_mode: "dry"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "dry"
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-yellow),0.5)"
+                    icon:
+                      - color: "rgba(var(--color-yellow),1)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+          heat_cool:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:sun-snowflake"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_hvac_mode"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  hvac_mode: "heat_cool"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "heat_cool"
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-purple),0.5)"
+                    icon:
+                      - color: "rgba(var(--color-purple),1)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+          fan_only:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:fan"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_hvac_mode"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  hvac_mode: "fan_only"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return entity.state == "fan_only"
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.5)"
+                    icon:
+                      - color: "rgba(var(--color-green),1)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+          fan_entity_only:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:fan"
+              tap_action:
+                action: "perform-action"
+                perform_action: "fan.toggle"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_thermostat_fan_entity !== null ? states[variables.ulm_card_thermostat_fan_entity].entity_id : null ]]]"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return ((variables.ulm_card_thermostat_fan_entity !== null) && states[variables.ulm_card_thermostat_fan_entity].state == 'on')
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.5)"
+                    icon:
+                      - color: "rgba(var(--color-green),1)"
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (entity.attributes.hvac_action == 'cooling' || entity.attributes.hvac_action == 'heating') && variables.ulm_card_thermostat_enable_background_color
+                    ]]]
+                  styles:
+                    card:
+                      - background-color: "rgba(var(--color-theme),0.15)"
+    item4:
+      card:
+        type: "custom:button-card"
+        show_icon: false
+        show_name: false
+        show_label: true
+        entity: "[[[ return entity.entity_id ]]]"
+        label: |-
+          [[[
+              var temperature = entity.attributes.current_temperature;
+              if (temperature == null) {
+                var temperature = '-';
+              }
+              return temperature + hass.config.unit_system.temperature;
+          ]]]
+        styles:
+          card:
+            - background: "none"
+            - box-shadow: "none"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_title/index.html b/usage/cards/card_title/index.html
new file mode 100644
index 000000000..39621190d
--- /dev/null
+++ b/usage/cards/card_title/index.html
@@ -0,0 +1,3822 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Title Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Title Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    Titles (and optionally subtitles) are used to separate different areas in your design. You can use only a title, only a subtitle or both at once.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    nameThis is a main title (either title or subtitle is required)
    labelThis is a subtitle (either title or subtitle is required)
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_title
+  name: My Title
+  label: 'Subtitle'
+
    
+
    
+Template Code
+
    card_title.yaml
    ---
+### Card Title ###
+card_title:
+  tap_action:
+    action: "none"
+  show_icon: false
+  show_label: true
+  show_name: true
+  styles:
+    card:
+      - background-color: "rgba(0,0,0,0)"
+      - box-shadow: "none"
+      - height: "auto"
+      - width: "auto"
+      - margin-top: "6px"
+      - margin-left: "18px"
+      - margin-bottom: "0px"
+      - padding: "6px"
+    grid:
+      - grid-template-areas: "'n' 'l'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+    name:
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "1.5rem"
+    label:
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "1rem"
+      - opacity: "0.4"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_vacuum/index.html b/usage/cards/card_vacuum/index.html
new file mode 100644
index 000000000..1fe00bae8
--- /dev/null
+++ b/usage/cards/card_vacuum/index.html
@@ -0,0 +1,4226 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Vacuum Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Vacuum Card
    
+
+
+
+
    Description
    
+
    example-image
+example-image
+example-image
    
+
    This is a card to control your Robot-vacuum. It has support for all vacuums which use the services vacuum.start, vacuum.stop, vacuum.return_to_base and vacuum.locate
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityvacuum.*
    ulm_card_vacuum_nameAdd a custom name
    ulm_card_vacuum_iconAdd a custom MDI icon
    ulm_card_vacuum_labelAdd a custom label
    ulm_card_vacuum_roomAdd a script to clean a specific room
    ulm_card_vacuum_room_iconAdd custom icon to the room script
    ulm_card_vacuum_cameraAdd a camera entity to the card to show the vacuum map
    ulm_card_vacuum_camera_toggleOnly show the camera entity while cleaning
    ulm_card_vacuum_colorstate basedSet Custom Color
    ulm_card_vacuum_force_background_colorfalseSet ulm_card_vacuum_color as background color in active state `
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: "card_vacuum"
+  entity: "vacuum.<Your_Vacuum>"
+
+- type: "custom:button-card"
+  template: "card_vacuum"
+  entity: "vacuum.<Your_Vacuum>"
+  variables:
+    ulm_card_vacuum_room: "script.clean_kitchen"
+    ulm_card_vacuum_room_icon: "mdi:table-chair"
+    ulm_card_vacuum_camera: "camera.vacuum_map"
+    ulm_card_vacuum_camera_toggle: true
+
    
+
    
+Template Code
+
    card_vacuum.yaml
    ---
+### Card Vacuum ###
+card_vacuum:
+  show_name: false
+  show_icon: false
+  show_label: false
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_vacuum_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_vacuum_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_vacuum_room:
+    ulm_card_vacuum_room_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_vacuum_camera: ""
+    ulm_card_vacuum_enable_popup: false
+    ulm_card_vacuum_camera_toggle: false
+    ulm_card_vacuum_force_background_color: false
+    ulm_card_vacuum_color: >
+      [[[
+        var state = entity.state.toLowerCase();
+        var colors = {
+          "cleaning": "blue",
+          "paused": "green",
+          "mopping": "yellow",
+          "returning": "purple",
+          "error": "red",
+          "default": "theme"
+        }
+        return (colors[state] || colors["default"]);
+      ]]]
+  triggers_update:
+    - "[[[ return variables.ulm_card_vacuum_camera ]]]"
+  state:
+    - operator: "template"
+      value: "[[[ return variables.ulm_active_state ]]]"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                  if (variables.ulm_card_vacuum_color) {
+                    if (variables.ulm_card_vacuum_force_background_color) {
+                      var color = variables.ulm_card_vacuum_color;
+                      return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                    }
+                  }
+              ]]]
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            let map = "'item1' 'map' 'item2'"
+            if(variables.ulm_card_vacuum_camera != ""){
+              if(variables.ulm_card_vacuum_camera_toggle){
+                if(entity.state.toLowerCase() === 'cleaning' || entity.state.toLowerCase() === 'mopping'){
+                  return map;
+                }
+              } else {
+                 return map;
+              }
+            }
+            return "'item1' 'item2'"
+          ]]]
+      - grid-template-columns: "1fr"
+      - grid-template-rows: >
+          [[[
+            let map = "repeat(3, min-content)"
+            if(variables.ulm_card_vacuum_camera != ""){
+              if(variables.ulm_card_vacuum_camera_toggle){
+                if(entity.state.toLowerCase() === 'cleaning' || entity.state.toLowerCase() === 'mopping'){
+                  return map;
+                }
+              } else {
+                 return map;
+              }
+            }
+            return "repeat(2, min-content)"
+          ]]]
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - background-color: >
+          [[[
+            if(hass.themes.darkMode){
+              return "variables.ulm_card_vacuum_color" + ", 0.1)";
+              }
+          ]]]
+    custom_fields:
+      map:
+        - display: >
+            [[[
+              let map = "block"
+              if(variables.ulm_card_vacuum_camera != ""){
+                if(variables.ulm_card_vacuum_camera_toggle){
+                  if(entity.state.toLowerCase() === 'cleaning' || entity.state.toLowerCase() === 'mopping'){
+                    return map;
+                  }
+                } else {
+                  return map;
+                }
+              }
+              return "none"
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_vacuum_icon ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+                  if(variables.ulm_card_vacuum_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_vacuum_map',
+                      'popup_variables': {'ulm_card_vacuum_camera': variables.ulm_card_vacuum_camera }
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if(color == 'theme' || !variables.ulm_active_state){
+                          return 'rgba(var(--color-theme),0.2)';
+                        }
+                        return 'rgba(var(--color-' + color + '),1)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if(color == 'theme' || !variables.ulm_active_state){
+                          return 'rgba(var(--color-theme),0.05)';
+                        }
+                        return 'rgba(var(--color-' + color + '),0.2)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              variables: >
+                [[[
+                  let vars = variables;
+                  if(variables.ulm_card_vacuum_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_vacuum_map',
+                      'popup_variables': {'ulm_card_vacuum_camera': variables.ulm_card_vacuum_camera }
+                    };
+                  }
+                  return vars;
+                ]]]
+              name: "[[[ return variables.ulm_card_vacuum_name ]]]"
+              label: >
+                [[[
+                  let label = entity.attributes.friendly_name
+                  if(variables.ulm_card_vacuum_label){
+                    label = variables.ulm_card_vacuum_label;
+                  } else {
+                    label = variables.ulm_translation_state;
+                  }
+                  return label;
+                ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return variables.ulm_active_state ]]]"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_vacuum_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                              if (variables.ulm_card_vacuum_force_background_color) {
+                                  return 'rgb(250,250,250)';
+                              }
+                          ]]]
+    map:
+      card:
+        type: "custom:button-card"
+        show_name: false
+        show_icon: false
+        show_label: false
+        entity: "[[[ return variables.ulm_card_vacuum_camera ]]]"
+        show_entity_picture: "true"
+        styles:
+          card:
+            - box-shadow: "none"
+          icon:
+            - border-radius: "20px"
+            - width: "100%"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: >
+          [[[ return variables.ulm_card_vacuum_room ? "list_4_items" : "list_3_items"; ]]]
+        styles:
+          card:
+            - background: "none"
+            - border-radius: "0"
+          custom_fields:
+            item4:
+              - display: >
+                  [[[ return variables.ulm_card_vacuum_room ? "block" : "none"; ]]]
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:play"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state){
+                          return 'rgb(250,250,250)'
+                        }
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                          return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                          return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              state:
+                - operator: "template"
+                  value: "[[[ return ['cleaning','mopping'].includes(entity.state.toLowerCase()) ]]]"
+                  icon: "mdi:stop"
+                  tap_action:
+                    action: "perform-action"
+                    perform_action: "vacuum.stop"
+                    target:
+                      entity_id: "[[[ return entity.entity_id ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: >
+                  [[[
+                    return ['cleaning','mopping'].includes(entity.state.toLowerCase()) ? "vacuum.stop" : "vacuum.start";
+                  ]]]
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:home-map-marker"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state){
+                          return 'rgb(250,250,250)'
+                        }
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                          return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                          return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              tap_action:
+                action: "perform-action"
+                perform_action: "vacuum.return_to_base"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:map-marker"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state){
+                          return 'rgb(250,250,250)'
+                        }
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                          return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                          return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              tap_action:
+                action: "perform-action"
+                perform_action: "vacuum.locate"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+          item4:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return variables.ulm_card_vacuum_room ]]]"
+              icon: "[[[ return variables.ulm_card_vacuum_room_icon ]]]"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if(!hass.themes.darkMode && variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state){
+                          return 'rgb(250,250,250)'
+                        }
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {
+                          return 'rgba(var(--color-' + color + '),0.2)';
+                        }
+                          return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_vacuum_color;
+                        if (variables.ulm_card_vacuum_force_background_color && variables.ulm_active_state) {
+                          return 'rgba(var(--color-' + color + '),1)';
+                        }
+                          return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+              tap_action:
+                action: "perform-action"
+                perform_action: "script.turn_on"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_vacuum_room ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_vertical_button/index.html b/usage/cards/card_vertical_button/index.html
new file mode 100644
index 000000000..9ed026d42
--- /dev/null
+++ b/usage/cards/card_vertical_button/index.html
@@ -0,0 +1,3894 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Vertical Button Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Vertical Button Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    Card card_vertical_button can be used in different ways. The primary usage is to switch between scenes or toggle a scene on/off. The secondary use is to toggle a switch or light. It's intended to be used with helper entities, either input_select or input_boolean.
    
+
    You connect the card to either an input_select (toggle between scenes) or input_boolean (toggle one scene) and the button will change the state of these entities. The final step is to create an automation that triggers on the state change and then runs the actions you want, apply a scene or interact with other entities.
    
+
    The variable ulm_card_vertical_button_state needs to be used together with input_select to tie a specific state to the button.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_card_vertical_button_stateonCompare the entity state value with this value, ex: the button will be on if the entity.state == state (only required with input_select)
    ulm_card_vertical_button_colorbluecolor for the when the button is on. The color names are defined in the theme. The following colors are supported: blue, green, yellow, pink, red, purple
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: card_vertical_button
+  entity: input_select.test_vertical_buttons
+  name: Away
+  icon: mdi:television-classic
+  show_last_changed: true
+  variables:
+    ulm_card_vertical_button_state: Away
+    ulm_card_vertical_button_color: green
+
    
+
    
+Template Code
+
    card_vertical_button.yaml
    ---
+### VERTICAL BUTTONS (fka SCENES) ###
+card_vertical_button:
+  variables:
+    ulm_card_vertical_button_color: "blue"
+    ulm_card_vertical_button_state: "on"
+  show_label: true
+  label: ""
+  name: |
+    [[[
+      if( entity.entity_id.startsWith("input_select.") )
+        return variables.ulm_card_vertical_button_state;
+      else if( entity.entity_id.startsWith("input_boolean.") )
+        return "";
+      return entity.state;
+    ]]]
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+    label:
+      - justify-self: "center"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+    name:
+      - margin-top: "10px"
+      - justify-self: "center"
+      - font-weight: "bold"
+      - font-size: "14px"
+    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' 'n' 'l'"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "10px 0px 8px 0px"
+  size: "20px"
+  state:
+    - operator: "template"
+      value: |
+        [[[
+          return entity.state == variables.ulm_card_vertical_button_state;
+        ]]]
+      styles:
+        icon:
+          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 1)`; ]]]"
+        label:
+          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]"
+        name:
+          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]"
+        img_cell:
+          - background-color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 0.2)`; ]]]"
+        card:
+          - background-color: "[[[ return `rgba(var(--color-background-${variables.ulm_card_vertical_button_color}), var(--opacity-bg))`; ]]]"
+  tap_action:
+    action: "perform-action"
+    perform_action: |
+      [[[
+        if( entity.entity_id.startsWith("input_select.") )
+          return "input_select.select_option";
+        if( entity.entity_id.startsWith("input_boolean.") )
+          return "input_boolean.toggle";
+        if( entity.entity_id.startsWith("switch.") )
+          return "switch.toggle";
+        if( entity.entity_id.startsWith("light.") )
+          return "light.toggle";
+        if( entity.entity_id.startsWith("automation.") )
+          return "automation.toggle";
+        if( entity.entity_id.startsWith("input_button.") )
+          return "input_button.press";
+        if( entity.entity_id.startsWith("fan.") )
+          return "fan.toggle";
+        if( entity.entity_id.startsWith("vacuum.") )
+          return "vacuum.toggle";
+        if( entity.entity_id.startsWith("script.") )
+          return "script.toggle";
+        if( entity.entity_id.startsWith("button.") )
+          return "button.press";
+        // If we need to support other entities we can add these options here.
+        return "";
+      ]]]
+    target: |
+      [[[
+        var obj;
+        if( entity.entity_id.startsWith("input_select.") )
+          obj = { entity_id: entity.entity_id, option: variables.ulm_card_vertical_button_state };
+        else
+          obj = { entity_id: entity.entity_id };
+        return obj;
+      ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_weather/index.html b/usage/cards/card_weather/index.html
new file mode 100644
index 000000000..f82b84c64
--- /dev/null
+++ b/usage/cards/card_weather/index.html
@@ -0,0 +1,3872 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Weather Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Weather Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This is a card based on simple-weather-card to show your weather.
+simple-weather-card lovelace resources must be installed for this one!
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityyour weather entity
    ulm_card_weather_namefriendly_namecustomize display name
    ulm_card_weather_primary_infoextremacustomize primary info. Set to false to disable. See simple-weather-card for more information
    ulm_card_weather_secondary_infoprecipitationcustomize secondary info. Set to false to disable. See simple-weather-card for more information
    ulm_card_weather_backdropfalseadd backdrop. See simple-weather-card for more information
    ulm_card_weather_customcustomize weather data. See simple-weather-card
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_weather
+  entity: weather.my_local_weather
+  variables:
+    ulm_card_weather_name: " "
+    ulm_card_weather_primary_info:
+      - wind_speed
+      - precipitation_probability
+    ulm_card_weather_backdrop:
+      fade: true
+    ulm_card_weather_custom:
+      - temp: sensor.temperature
+
    
+
    
+Template Code
+
    card_weather.yaml
    ---
+### Card Weather ###
+card_weather:
+  template:
+    - "ulm_actions_card_overlay"
+  variables:
+    ulm_card_weather_backdrop: false
+    ulm_card_weather_primary_info: "extrema"
+    ulm_card_weather_secondary_info: "precipitation"
+    ulm_card_weather_custom:
+      - temp: "[[[ return entity.attributes.temperature ]]]"
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: "'item1'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "0px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:simple-weather-card"
+        entity: "[[[ return entity.entity_id; ]]]"
+        name: "[[[ return variables.ulm_card_weather_name || entity.attributes.friendly_name ]]]"
+        primary_info: "[[[ return variables.ulm_card_weather_primary_info ]]]"
+        secondary_info: "[[[ return variables.ulm_card_weather_secondary_info ]]]"
+        backdrop: "[[[ return variables.ulm_card_weather_backdrop ]]]"
+        custom: "[[[ return variables?.ulm_card_weather_custom ]]]"
+        style: |
+          ha-card {
+            border-radius: 14px;
+            box-shadow: none;
+          }
+          ha-card.type-custom-simple-weather-card {
+            padding: 24px;
+          }
+          ha-card[bg].type-custom-simple-weather-card{
+            color: white;
+          }
+          ha-card.type-custom-simple-weather-card .weather__info {
+            text-align: left
+          }
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_weather_ulm/index.html b/usage/cards/card_weather_ulm/index.html
new file mode 100644
index 000000000..f288c4d31
--- /dev/null
+++ b/usage/cards/card_weather_ulm/index.html
@@ -0,0 +1,3997 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Weather Card ULM - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Weather Card ULM
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This is a card to show your weather without usage of custom resources.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityyour weather entity
    ulm_card_weather_ulm_enable_popupfalse
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: "card_weather_ulm"
+  entity: "weather.lieusaint"
+  variables:
+    ulm_card_weather_ulm_enable_popup: true
+
    
+
    
+Template Code
+
    card_weather.yaml
    ---
+### Card Weather ULM ###
+card_weather_ulm:
+  template:
+    - "icon_more_info_new"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_weather_ulm_enable_popup: false
+    ulm_weather_popup_surpress_first_forecast: false
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "1fr 1fr"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: |
+                [[[
+                  var state = entity.state;
+                  var icon = {
+                    "clear-night": "mdi:weather-night",
+                    "cloudy": "mdi:weather-cloudy",
+                    "exceptional": "mdi:weather-sunny-alert",
+                    "fog": "mdi:weather-fog",
+                    "hail": "mdi:weather-hail",
+                    "lightning": "mdi:weather-lightning",
+                    "lightning-rainy": "mdi:weather-lightning-rainy",
+                    "partlycloudy": "mdi:weather-partly-cloudy",
+                    "pouring": "mdi:weather-pouring",
+                    "rainy": "mdi:weather-rainy",
+                    "snowy": "mdi:weather-snowy",
+                    "snowy-rainy": "mdi:weather-snowy-rainy",
+                    "sunny": "mdi:weather-sunny",
+                    "windy": "mdi:weather-windy",
+                    "default": "mdi:crosshairs-question"
+                    }
+                  return (icon[state] || icon["default"]);
+                ]]]
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_card_weather_ulm_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_weather_forecast',
+                      'popup_variables': {'ulm_weather_popup_surpress_first_forecast': variables.ulm_weather_popup_surpress_first_forecast}
+                    };
+                  }
+                  return vars;
+                ]]]
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var state = entity.state;
+                        var icon = {
+                          "clear-night": "rgba(var(--color-yellow),1)",
+                          "cloudy": "rgba(var(--color-blue),1)",
+                          "exceptional": "rgba(var(--color-red),1)",
+                          "fog": "rgba(var(--color-grey),1)",
+                          "hail": "rgba(var(--color-blue),1)",
+                          "lightning": "rgba(var(--color-blue),1)",
+                          "lightning-rainy": "rgba(var(--color-blue),1)",
+                          "partlycloudy": "rgba(var(--color-yellow),1)",
+                          "pouring": "rgba(var(--color-grey),1)",
+                          "rainy": "rgba(var(--color-blue),1)",
+                          "snowy": "rgba(var(--color-blue),1)",
+                          "snowy-rainy": "rgba(var(--color-blue),1)",
+                          "sunny": "rgba(var(--color-yellow),1)",
+                          "windy": "rgba(var(--color-grey),1)",
+                          "default": "rgba(var(--color-grey),1)",
+                          }
+                        return (icon[state] || icon["default"]);
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var state = entity.state;
+                        var icon = {
+                          "clear-night": "rgba(var(--color-yellow),0.2)",
+                          "cloudy": "rgba(var(--color-blue),0.2)",
+                          "exceptional": "rgba(var(--color-red),0.2)",
+                          "fog": "rgba(var(--color-grey),0.2)",
+                          "hail": "rgba(var(--color-blue),0.2)",
+                          "lightning": "rgba(var(--color-blue),0.2)",
+                          "lightning-rainy": "rgba(var(--color-blue),0.2)",
+                          "partlycloudy": "rgba(var(--color-yellow),0.2)",
+                          "pouring": "rgba(var(--color-grey),0.2)",
+                          "rainy": "rgba(var(--color-blue),0.2)",
+                          "snowy": "rgba(var(--color-blue),0.2)",
+                          "snowy-rainy": "rgba(var(--color-blue),0.2)",
+                          "sunny": "rgba(var(--color-yellow),0.2)",
+                          "windy": "rgba(var(--color-grey),0.2)",
+                          "default": "rgba(var(--color-grey),0.2)",
+                          }
+                        return (icon[state] || icon["default"]);
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              show_state: true
+              styles:
+                grid:
+                  - grid-template-areas: "'i n' 'i s'"
+              variables: >
+                [[[
+                  let vars = variables;
+
+                  if(variables.ulm_card_weather_ulm_enable_popup) {
+                    vars.ulm_custom_popup = {
+                      'template': 'popup_weather_forecast',
+                      'popup_variables': {'ulm_weather_popup_surpress_first_forecast': variables.ulm_weather_popup_surpress_first_forecast}
+                    };
+                  }
+                  return vars;
+                ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_2_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:water"
+              tap_action:
+                action: "none"
+              layout: "icon_state"
+              show_state: false
+              show_units: false
+              show_name: false
+              custom_fields:
+                item: "[[[ return entity.attributes.humidity + '%' ]]]"
+              styles:
+                grid:
+                  - grid-template-areas: "'i item'"
+                  - grid-template-columns: "40% 60%"
+                card:
+                  - box-shadow: "none"
+                  - padding: "0px"
+                  - background-color: "rgba(var(--color-theme),0.05)"
+                  - border-radius: "14px"
+                  - place-self: "center"
+                  - height: "42px"
+                icon:
+                  - color: "rgba(var(--color-theme),0.9)"
+                img_cell:
+                  - justify-content: "right"
+                custom_fields:
+                  item:
+                    - text-align: "left"
+                    - font-size: "1rem"
+              size: "20px"
+              color: "var(--google-grey)"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:thermometer"
+              tap_action:
+                action: "none"
+              layout: "icon_state"
+              show_state: false
+              show_units: false
+              show_name: false
+              custom_fields:
+                item: "[[[ return entity.attributes.temperature + entity.attributes.temperature_unit ]]]"
+              styles:
+                grid:
+                  - grid-template-areas: "'i item'"
+                  - grid-template-columns: "45% 55%"
+                card:
+                  - box-shadow: "none"
+                  - padding: "0px"
+                  - background-color: "rgba(var(--color-theme),0.05)"
+                  - border-radius: "14px"
+                  - place-self: "center"
+                  - height: "42px"
+                icon:
+                  - color: "rgba(var(--color-theme),0.9)"
+                img_cell:
+                  - justify-content: "right"
+                custom_fields:
+                  item:
+                    - text-align: "left"
+                    - font-size: "1rem"
+              size: "20px"
+              color: "var(--google-grey)"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/cards/card_welcome_scenes/index.html b/usage/cards/card_welcome_scenes/index.html
new file mode 100644
index 000000000..468bb2a5f
--- /dev/null
+++ b/usage/cards/card_welcome_scenes/index.html
@@ -0,0 +1,4583 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Welcome Scenes Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Welcome Scenes Card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This is a card which shows the basic needs for your dashboard. This card can generate itself automatically. It is also included in the preview-dashboard which comes with a fresh installation of UI-Minimalist.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_card_welcome_scenes_collapseEnables the collapse function. 
     requires an input_boolean to track the state
    ulm_weatherThis is your weather provider. 
     Example: weather.your_provider
    ulm_languageLanguage of your systemYou can set a different format with the BCP-47 language tags 
     Example: "en-US" or just "en"
    entity_1auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_2auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_3auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_4auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_5auto-entitiesCan be any common type of entity 
     if no entity is specified defaults to auto-entities
    entity_6noneCan be any common type of entity
    entity_7noneCan be any common type of entity
    
+
    Entity Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    _entity_idSupport almost all types of entities 
     Scenes do always show as off
    _iconThe icon to show
    _nameThe name to show
    _colorRandomColor of the icon 
     Can choose between: blue, red, green, yellow, pink, purple 
     If not specified, it will take a random color
    _stateon or playingDefine input_select state or give manual state for pill to be full
    _nav_pathNavigate to another view 
     Overrides other types of actions
    _service_dataData to be passed through to data_service. Useful for running scripts with custom fields/parameters
    
+
    Requirement Collapse Function
    
+
    
+
    This feature is fully optional. It requires some more manual configuration!
    
+
    
+
    You need to create a input_boolean in HA to track the state. See Docs.
+Furthermore, you need to add the input_boolean to the variable ulm_card_welcome_scenes_collapse and to either the entity or triggers_update to make sure it directly refreshes the state.
    
+
    
+
    Warning
    
+
    Do not use triggers_update: "all"! This will lead to unwanted behavior with the random colors generator.
    
+
    
+
    Usage
    
+
    
+
    You can set 1 to 7 entities to show 1 to 7 pills dynamically 
    
+If set none it uses auto-entities with max 5 pills
    
+
    
+
    - type: "custom:button-card"
+  template: "card_welcome_scenes"
+  #triggers_update: input_boolean.<Your_boolean>
+  #entity: input_boolean.<Your_boolean>
+  variables:
+    ulm_card_welcome_scenes_collapse: input_boolean.<Your_boolean> #OPTIONAl --> uncomment also entity or triggers_update
+    ulm_weather: "weather.YOUR_WEATHERPROVIDER"
+    entity_1:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "blue"
+    entity_2:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "red"
+    entity_3:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "green"
+    entity_4:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "purple"
+    entity_5:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "yellow"
+    entity_6:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "pink"
+    entity_7:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+      color: "yellow"
+
    
+
    
+Auto-entities
+
    - type: "custom:button-card"
+  template: "card_welcome_scenes"
+  #triggers_update: input_boolean.<Your_boolean>
+  #entity: input_boolean.<Your_boolean>
+  variables:
+    ulm_card_welcome_scenes_collapse: input_boolean.<Your_boolean> #OPTIONAl --> uncomment also entity or triggers_update
+    ulm_weather: "weather.YOUR_WEATHERPROVIDER"
+
    
+
    
+
    
+Random Colors
+
    - type: "custom:button-card"
+  template: "card_welcome_scenes"
+  #triggers_update: input_boolean.<Your_boolean>
+  #entity: input_boolean.<Your_boolean>
+  variables:
+    ulm_card_welcome_scenes_collapse: input_boolean.<Your_boolean> #OPTIONAl --> uncomment also entity or triggers_update
+    ulm_weather: "weather.YOUR_WEATHERPROVIDER"
+    entity_1:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+    entity_2:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+    entity_3:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+    entity_4:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+    entity_5:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+    entity_6:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+    entity_7:
+      entity_id: "<YOUR_ENTITY>"
+      icon: "mdi:YOUR_ICON" #OPTIONAL
+      name: "YOUR_NAME" #OPTIONAL
+
    
+
    
+
    
+Template Code
+
    card_welcome_scenes.yaml
    ---
+card_welcome_scenes:
+  variables:
+    ulm_weather: "[[[ return variables.ulm_weather]]]"
+    ulm_language: "[[[ return hass['language']; ]]]"
+    entity_1:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_2:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_3:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_4:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_5:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_6:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_7:
+      entity_id: ""
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+  template:
+    - "ulm_language_variables"
+    - "ulm_translation_engine"
+  show_icon: false
+  show_name: false
+  show_label: true
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){
+              return "\'item1\' \'item2\' ";
+            } else {
+              return "\'item1\' \'item2\' \'item3\' \'item4\'";
+            }
+          ]]]
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+      - row-gap: "0px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "10px"
+    custom_fields:
+      item3:
+        - display: >
+            [[[
+              if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){
+                return "none";
+              } else {
+                return "block";
+              }
+            ]]]
+      item4:
+        - display: >
+            [[[
+              if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){
+                return "none";
+              } else {
+                return "block";
+              }
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "card_topbar_welcome"
+        variables:
+          ulm_card_welcome_scenes_collapse: "[[[ return variables.ulm_card_welcome_scenes_collapse ]]]"
+          ulm_weather: "[[[ return variables.ulm_weather]]]"
+          ulm_language: "[[[ return variables.ulm_language ]]]"
+        styles:
+          card:
+            - border-radius: "none"
+            - box-shadow: "none"
+            - padding: "4px"
+    item2:
+      card:
+        type: "custom:button-card"
+        show_icon: false
+        show_label: false
+        show_name: true
+        show_entity_picture: false
+        name: |
+          [[[
+            var today = new Date();
+            var time = today.getHours()
+            let welcome = '';
+            if (time >= '18'){
+              welcome = variables.ulm_evening;
+            } else if (time >= '12'){
+              welcome = variables.ulm_afternoon;
+            } else if (time >= '5'){
+              welcome = variables.ulm_morning;
+            } else {
+              welcome = variables.ulm_hello;
+            }
+            return welcome + ', ' + '   <br>' + user.name + '!';
+          ]]]
+        styles:
+          name:
+            - align-self: "start"
+            - justify-self: "start"
+            - font-weight: "bold"
+            - font-size: "24px"
+            - margin-left: "16px"
+          grid:
+            - grid-template-areas: "'i n' 'i l'"
+            - grid-template-columns: "min-content auto"
+            - grid-template-rows: "min-content min-content"
+            - text-align: "start"
+          card:
+            - box-shadow: "none"
+            - padding-bottom: "8px"
+    item3:
+      card:
+        type: "custom:button-card"
+        show_icon: true
+        show_label: true
+        show_name: true
+        show_entity_picture: false
+        name: "[[[ return variables.ulm_translation_scenes ]]]"
+        icon: "mdi:dots-vertical"
+        styles:
+          icon:
+            - height: "20px"
+            - filter: "opacity(50%)"
+          name:
+            - align-self: "start"
+            - justify-self: "start"
+            - font-weight: "bold"
+            - font-size: "18px"
+            - margin-left: "16px"
+          grid:
+            - grid-template-areas: "'n i'"
+            - grid-template-columns: "6fr 1fr"
+            - grid-template-rows: "min-content min-content"
+            - text-align: "start"
+          card:
+            - box-shadow: "none"
+            - padding-bottom: "0px"
+            - bottom: "10px"
+    item4:
+      card:
+        type: "custom:button-card"
+        template: >
+          [[[
+            if(variables?.entity_1?.entity_id != ""){
+              return 'card_scenes_welcome'
+            } else {
+              return 'card_scenes_welcome_auto'
+            }
+          ]]]
+        styles:
+          card:
+            - border-radius: "none"
+            - box-shadow: "none"
+            - padding: "4px"
+        variables:
+          entity_1: "[[[ return variables.entity_1]]]"
+          entity_2: "[[[ return variables.entity_2]]]"
+          entity_3: "[[[ return variables.entity_3]]]"
+          entity_4: "[[[ return variables.entity_4]]]"
+          entity_5: "[[[ return variables.entity_5]]]"
+          entity_6: "[[[ return variables.entity_6]]]"
+          entity_7: "[[[ return variables.entity_7]]]"
+card_title_welcome:
+  tap_action:
+    action: "none"
+  show_icon: false
+  show_label: true
+  show_name: true
+  styles:
+    card:
+      - background-color: "rgba(0,0,0,0)"
+      - box-shadow: "none"
+      - height: "auto"
+      - width: "auto"
+      - margin-top: "-10px"
+      - margin-left: "16px"
+      - margin-bottom: "-15px"
+    grid:
+      - grid-template-areas: "'n' 'l'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+    name:
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "20px"
+    label:
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "1rem"
+      - opacity: "0.4"
+
+# pill
+card_scenes_pill_welcome:
+  show_icon: false
+  show_label: false
+  show_name: false
+  state:
+    - operator: "template"
+      value: >
+        [[[
+          return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state)
+        ]]]
+      styles:
+        card:
+          - overflow: "visible"
+          - box-shadow: "none"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "min-content"
+      - grid-template-rows: "1fr 1fr"
+      - row-gap: "12px"
+      - justify-items: "center"
+      - column-gap: "auto"
+    card:
+      - border-radius: "50px"
+      - place-self: "center"
+      - width: "52px"
+      - height: "84px"
+      - box-shadow: >
+          [[[
+            if (hass.themes.darkMode){
+              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
+            } else {
+              return "var(--box-shadow)";
+            }
+          ]]]
+  color: "var(--google-grey)"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        show_icon: true
+        show_label: false
+        show_name: false
+        tap_action:
+          action: >
+            [[[
+              if(variables?.nav_path){
+                return "navigate"
+              }
+              return "perform-action"
+            ]]]
+          perform_action: >
+            [[[
+              if(entity?.entity_id.startsWith("scene.")){
+                return "scene.turn_on"
+              }
+              if(entity?.entity_id.startsWith("media_player.")){
+                return "media_player.media_play_pause"
+              }
+              if(entity?.entity_id.startsWith("input_select.")){
+                return "input_select.select_option"
+              }
+              if(entity?.entity_id.startsWith("script.")){
+                return entity.entity_id
+              }
+              return "homeassistant.toggle"
+            ]]]
+          navigation_path: "[[[ return variables?.nav_path; ]]]"
+          target: |
+            [[[
+              if (variables.service_data){
+                return variables.service_data
+              }
+              var obj;
+              if(typeof(entity) !== 'undefined' && entity !== undefined){
+                if( entity?.entity_id.startsWith("input_select.") )
+                  obj = { entity_id: entity?.entity_id, option: variables.state };
+                else
+                  obj = { entity_id: entity?.entity_id };
+                return obj;
+              }
+            ]]]
+        styles:
+          grid:
+            - grid-template-areas: "i"
+          icon:
+            - color: >
+                [[[
+                  var color = variables?.color
+                  if(hass.themes.darkMode){var color = "#FAFAFA";}
+                  return `rgba(var(--color-${color}), 1)`;
+                ]]]
+            - width: "20px"
+          img_cell:
+            - background-color: >
+                [[[
+                  var color = variables?.color
+                  var opacity = '0.20'
+                  if(hass.themes.darkMode){var opacity = '1'}
+                  return `rgba(var(--color-${color}), ${opacity})`;
+                ]]]
+            - border-radius: "50%"
+            - width: "42px"
+            - height: "42px"
+          card:
+            - box-shadow: "none"
+            - border-radius: "50px"
+            - padding: "5px"
+        state:
+          - operator: "template"
+            value: >
+              [[[
+                return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state)
+              ]]]
+            styles:
+              card:
+                - overflow: "visible"
+                - box-shadow: >
+                    [[[
+                      if (hass.themes.darkMode){
+                        return "0px 2px 4px 0px rgba(0,0,0,0.80)";
+                      } else {
+                        return "var(--box-shadow)";
+                      }
+                    ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        show_icon: false
+        show_label: false
+        tap_action:
+          action: >
+            [[[
+              if(variables?.nav_path){
+                return "navigate"
+              }
+              return "perform-action"
+            ]]]
+          navigation_path: "[[[ return variables?.nav_path; ]]]"
+          perform_action: >
+            [[[
+              if(entity?.entity_id.startsWith("scene.")){
+                return "scene.turn_on"
+              }
+              if(entity?.entity_id.startsWith("media_player.")){
+                return "media_player.media_play_pause"
+              }
+              if(entity?.entity_id.startsWith("input_select.")){
+                return "input_select.select_option"
+              }
+              if(entity?.entity_id.startsWith("script.")){
+                return entity.entity_id
+              }
+              return "homeassistant.toggle"
+            ]]]
+          target: |
+            [[[
+              var obj;
+              if(typeof(entity) !== 'undefined' && entity !== undefined){
+                if( entity?.entity_id.startsWith("input_select.") )
+                  obj = { entity_id: entity?.entity_id };
+                return obj;
+              }
+            ]]]
+          data: |
+            [[[
+              if (variables.service_data){
+                return variables.service_data
+              }
+              var obj;
+              if(typeof(entity) !== 'undefined' && entity !== undefined){
+                if( entity?.entity_id.startsWith("input_select.") )
+                  obj = { option: variables.state };
+                return obj;
+              }
+            ]]]
+        styles:
+          grid:
+            - grid-template-areas: "n"
+          name:
+            - justify-self: "center"
+            - font-weight: "bold"
+            - font-size: "9.5px"
+            - padding-bottom: "7px"
+            - overflow: "[[[return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state) ? 'visible' : 'hidden']]]"
+          card:
+            - box-shadow: "none"
+            - padding: "0px 5px 5px 5px"
+            - margin-top: "-5px"
+            - border-radius: "50px"
+            - overflow: "[[[return (entity?.state !== 'on' && entity?.state !== 'playing' && entity?.state != variables?.state) ? 'visible' : 'hidden']]]"
+card_topbar_welcome:
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: "item1 item2 item3"
+      - justify-content: "space-between"
+      - display: "flex"
+    card:
+      - border-radius: "none"
+      - box-shadow: "none"
+      - padding: "12px"
+      - background: "none"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "chips"
+        entity: "[[[ return variables.ulm_card_welcome_scenes_collapse ]]]"
+        icon: "mdi:chevron-up"
+        show_icon: true
+        styles:
+          grid:
+            - grid-template-areas: "'i'"
+        state:
+          - value: "on"
+            icon: "mdi:chevron-down"
+            styles:
+              icon:
+                - color: "rgb(var(--color-theme))"
+        tap_action:
+          action: "perform-action"
+          perform_action: "input_boolean.toggle"
+          target:
+            entity_id: "[[[ return variables.ulm_card_welcome_scenes_collapse ]]]"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "chip_weather_date"
+        entity: "[[[ return variables.ulm_weather]]]"
+        variables:
+          ulm_weather: "[[[ return variables.ulm_weather ]]]"
+          ulm_language: "[[[ return variables.ulm_language ]]]"
+        styles:
+          card:
+            - width: "100px"
+    item3:
+      card:
+        type: "custom:button-card"
+        tap_action:
+          action: "navigate"
+          navigation_path: "/config/dashboard"
+        template: "chip_mdi_icon_only"
+        variables:
+          ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
+        styles:
+          card:
+            - align-self: "end"
+# auto-entities
+card_scenes_welcome_auto:
+  show_icon: false
+  show_name: true
+  show_label: false
+  variables:
+    colors: >
+      [[[
+        var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+        var color = colors[Math.floor(Math.random() * colors.length)];
+        return color;
+      ]]]
+  styles:
+    grid:
+      - grid-template-areas: "item1"
+      - display: "flex"
+      - justify-content: "center"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:auto-entities"
+        card:
+          type: "grid"
+          columns: 5
+          square: false
+        card_param: "cards"
+        sort:
+          count: 5
+        filter:
+          include:
+            - domain: "light"
+              options:
+                type: "custom:button-card"
+                template: "card_scenes_pill_welcome"
+                custom_fields:
+                  item1:
+                    card:
+                      type: "custom:button-card"
+                      entity: "this.entity_id"
+                      styles:
+                        icon:
+                          - color: >
+                              [[[
+                                var color = variables.colors
+                                if(hass.themes.darkMode){var color = "#FAFAFA";}
+                                return `rgba(var(--color-${color}), 1)`;
+                              ]]]
+                          - width: "20px"
+                        img_cell:
+                          - background-color: >
+                              [[[
+                                var color = variables.colors
+                                var opacity = '0.20'
+                                if(hass.themes.darkMode){var opacity = '1'}
+                                return `rgba(var(--color-${color}), ${opacity})`;
+                              ]]]
+                  item2:
+                    card:
+                      type: "custom:button-card"
+                      entity: "this.entity_id"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_alarm/index.html b/usage/chips/chip_alarm/index.html
new file mode 100644
index 000000000..bd9259fd3
--- /dev/null
+++ b/usage/chips/chip_alarm/index.html
@@ -0,0 +1,3821 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Alarm Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Alarm Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    Alarm chip that displays alarm armed and disarmed state with colored icon.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityentity of your alarm_control_panel
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: chip_alarm
+  entity: alarm_control_panel.alarm
+
    
+
    
+Template Code
+
    chip_alarm.yaml
    ---
+### chip_alarm ###
+chip_alarm:
+  template:
+    - "chip_icon_label"
+    - "ulm_translation_engine"
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  icon: |
+    [[[
+      var state = entity.state.toLowerCase();
+      var alarm_icon = {
+        "default": "mdi:shield-outline",
+        "armed_home": "mdi:shield-home",
+        "armed_away": "mdi:shield-lock",
+        "armed_night": "mdi:shield-moon",
+        "disarmed": "mdi:shield-off",
+        "arming": "mdi:shield",
+        "triggered": "mdi:shield-alert"
+      }
+      return (alarm_icon[state] || alarm_icon["default"]);
+    ]]]
+  styles:
+    icon:
+      - color: |
+          [[[
+            var state = entity.state.toLowerCase();
+            var alarm_color = {
+              "default": "var(--google-yellow)",
+              "armed_home": "var(--google-red)",
+              "armed_away": "var(--google-red)",
+              "armed_night": "var(--google-red)",
+              "disarmed": "var(--google-green)",
+              "arming": "var(--google-yellow)",
+              "triggered": "var(--google-red)"
+            }
+            return (alarm_color[state] || alarm_color["default"]);
+          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_back/index.html b/usage/chips/chip_back/index.html
new file mode 100644
index 000000000..23b1c0c5d
--- /dev/null
+++ b/usage/chips/chip_back/index.html
@@ -0,0 +1,3802 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Back Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Back Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This is a back-button, primarily used if you switch between views and want a convenient way back.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_back_path/ui-lovelace-minimalist/0Set the navigation path to your default view, eg. ui-lovelace-minimalist/home or lovelace. Not required if you run a default installation with HACS.
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: chip_back
+  variables:
+    ulm_chip_back_path: /ui-lovelace-minimalist/home
+
    
+
    
+Template Code
+
    chip_back.yaml
    ---
+### Chip Back ###
+chip_back:
+  template: "chips"
+  variables:
+    ulm_chip_back_path: >
+      [[[
+        return hass["panelUrl"];
+      ]]]
+  tap_action:
+    action: "navigate"
+    navigation_path: "[[[ return variables.ulm_chip_back_path; ]]]"
+  show_icon: true
+  icon: "mdi:arrow-left"
+  styles:
+    grid:
+      - grid-template-areas: "'i'"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_icon_double_state/index.html b/usage/chips/chip_icon_double_state/index.html
new file mode 100644
index 000000000..0e1a571f1
--- /dev/null
+++ b/usage/chips/chip_icon_double_state/index.html
@@ -0,0 +1,3832 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Icon Double State Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Icon Double State Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip displays can display an icon and value of two entities.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_icon_double_state_iconThis is the icon to show. See icons to read more about the used unicode emojis.
    ulm_chip_icon_double_state_entity_1This is the entity to display in first position
    ulm_chip_icon_double_state_entity_2This is the entity to display in second position
    ulm_chip_navigate_pathThe path to your view
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: chip_icon_double_state
+  variables:
+    ulm_chip_icon_double_state_icon: '💻'
+    ulm_chip_icon_double_state_entity_1: sensor.nas_disk_used
+    ulm_chip_icon_double_state_entity_2: sensor.nas_cpu_load
+    ulm_chip_navigate_path: /lovelace-minimalist-ui/0
+
    
+
    
+Template Code
+
    chip_icon_double_state.yaml
    ---
+### Chip Icon Double State ###
+chip_icon_double_state:
+  template: "chips"
+  tap_action:
+    action: "navigate"
+    navigation_path: "[[[ return variables.ulm_chip_navigate_path; ]]]"
+  triggers_update:
+    - "[[[ return variables.ulm_chip_icon_double_state_entity_1 ]]]"
+    - "[[[ return variables.ulm_chip_icon_double_state_entity_2 ]]]"
+  label: |
+    [[[
+      var icon = "❔";
+      if (variables.ulm_chip_icon_double_state_icon){
+        var icon = variables.ulm_chip_icon_double_state_icon;
+      }
+      var state1 = "";
+      if (states[variables.ulm_chip_icon_double_state_entity_1].state){
+        var state1 = helpers.localize(states[variables.ulm_chip_icon_double_state_entity_1])
+      }
+      var state2 = "";
+      if (states[variables.ulm_chip_icon_double_state_entity_2].state){
+        var state2 = helpers.localize(states[variables.ulm_chip_icon_double_state_entity_2])
+      }
+      return icon + " " + state1 + " • " + state2;
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_icon_label/index.html b/usage/chips/chip_icon_label/index.html
new file mode 100644
index 000000000..93e1667ad
--- /dev/null
+++ b/usage/chips/chip_icon_label/index.html
@@ -0,0 +1,3814 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Icon Label Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Icon Label Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip displays an icon using mdi and a label.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    iconIcon to display
    labelLabel to display
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: chip_icon_label
+  label: Label
+  icon: 'mdi:heart'
+
    
+
    
+Template Code
+
    chip_icon_label.yaml
    ---
+## Chips Icon Label ###
+chip_icon_label:
+  template: "chips"
+  show_icon: true
+  size: "100%"
+  styles:
+    card:
+      - padding-top: "6px"
+      - padding-button: "6px"
+      - padding-left: "12px"
+    grid:
+      - grid-template-areas: "'i l'"
+      - grid-template-columns: "max_content auto"
+      - grid-template-rows: "min-content"
+    img_cell:
+      - place-self: "center"
+      - width: "14px"
+      - height: "24px"
+    label:
+      - font-size: "12px"
+      - margin-left: "0px"
+      - margin-top: "0px"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_icon_only/index.html b/usage/chips/chip_icon_only/index.html
new file mode 100644
index 000000000..ec1a6e372
--- /dev/null
+++ b/usage/chips/chip_icon_only/index.html
@@ -0,0 +1,3797 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Icon Only Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Icon Only Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip displays just an icon.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_icon_onlyThis is the icon to show. See icons to read more about the used unicode emojis.
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: chip_icon_only
+  variables:
+    ulm_chip_icon_only: '❤️'
+
    
+
    
+Template Code
+
    chip_icon_only.yaml
    ---
+### Chip Icon Only ###
+chip_icon_only:
+  template: "chips"
+  label: |
+    [[[
+      var icon = "❔";
+      if (variables.ulm_chip_icon_only){
+        var icon = variables.ulm_chip_icon_only;
+      }
+      return icon;
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_icon_state/index.html b/usage/chips/chip_icon_state/index.html
new file mode 100644
index 000000000..bb9b8d796
--- /dev/null
+++ b/usage/chips/chip_icon_state/index.html
@@ -0,0 +1,3810 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Icon State Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Icon State Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip displays an icon and a label, where the label can be any state of a sensor you configure.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_icon_state_iconThis is the icon to show. See See icons to read more about the used unicode emojis.
    ulm_chip_icon_state_entityEnable background
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: chip_icon_state
+  variables:
+    ulm_chip_icon_state_icon: '🛏️'
+    ulm_chip_icon_state_entity: sensor.bed_occupancy
+
    
+
    
+Template Code
+
    chip_icon_state.yaml
    ---
+### Chip Icon State ###
+chip_icon_state:
+  template: "chips"
+  triggers_update:
+    - "[[[ return variables.ulm_chip_icon_state_entity ]]]"
+  label: |
+    [[[
+      var icon = "❔";
+      if (variables.ulm_chip_icon_state_icon){
+        var icon = variables.ulm_chip_icon_state_icon;
+      }
+      var state = "";
+      if (states[variables.ulm_chip_icon_state_entity].state){
+        var state = helpers.localize(states[variables.ulm_chip_icon_state_entity]);
+      }
+      return icon + " " + state;
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_mdi_icon_only/index.html b/usage/chips/chip_mdi_icon_only/index.html
new file mode 100644
index 000000000..d40d0c313
--- /dev/null
+++ b/usage/chips/chip_mdi_icon_only/index.html
@@ -0,0 +1,3812 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Mdi:icon Only Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Mdi:icon Only Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip displays an icon using mdi.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_mdi_icon_only_entityentity to link
    ulm_chip_mdi_icon_only_iconmdi:icon to display
    ulm_chip_mdi_icon_only_icon_colorprimary-text-colorAllow to change icon color
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: chip_mdi_icon_only
+  variables:
+    ulm_chip_mdi_icon_only_entity: binary_sensor.bedroom_master_closed_door
+    ulm_chip_mdi_icon_only_icon: mdi:door
+
    
+
    
+Template Code
+
    chip_mdi_icon_only.yaml
    ---
+### Chip Mdi Icon Only ###
+chip_mdi_icon_only:
+  template: "chips"
+  tap_action:
+    action: "more-info"
+    entity: "[[[ return variables.ulm_chip_mdi_icon_only_entity ]]]"
+  show_icon: true
+  icon: "[[[ return variables.ulm_chip_mdi_icon_only_icon ]]]"
+  styles:
+    grid:
+      - grid-template-areas: "'i'"
+    icon:
+      - color: "[[[ return variables.ulm_chip_mdi_icon_only_icon_color; ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_mdi_icon_state/index.html b/usage/chips/chip_mdi_icon_state/index.html
new file mode 100644
index 000000000..42a58bc12
--- /dev/null
+++ b/usage/chips/chip_mdi_icon_state/index.html
@@ -0,0 +1,3830 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Mdi:icon State Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Mdi:icon State Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip displays an icon using mdi and state of the chosen entity.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_mdi_icon_state_entityentity to link
    ulm_chip_mdi_icon_state_iconmdi:icon to display
    ulm_chip_mdi_icon_state_icon_colorprimary-text-colorAllow to change icon color
    ulm_chip_mdi_icon_state_label_colorprimary-text-colorAllow to change label color
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: chip_mdi_icon_state
+  variables:
+    ulm_chip_mdi_icon_state_entity: light.kitchen_lights
+    ulm_chip_mdi_icon_state_icon: mdi:lightbulb
+
    
+
    
+Template Code
+
    chip_mdi_icon_state.yaml
    ---
+### Chip Mdi Icon State ###
+chip_mdi_icon_state:
+  template: "chips"
+  tap_action:
+    action: "more-info"
+  entity: "[[[ return variables.ulm_chip_mdi_icon_state_entity ]]]"
+  triggers_update:
+    - "[[[ return variables.ulm_chip_mdi_icon_state_entity ]]]"
+  show_icon: true
+  icon: "[[[ return variables.ulm_chip_mdi_icon_state_icon ]]]"
+  label: |
+    [[[
+      var state = "";
+      if (states[variables.ulm_chip_mdi_icon_state_entity].state){
+        var state = helpers.localize(entity)
+      }
+      return state;
+    ]]]
+  styles:
+    grid:
+      - grid-template-areas: "'i l'"
+    icon:
+      - color: "[[[ return variables.ulm_chip_mdi_icon_state_icon_color; ]]]"
+    label:
+      - color: "[[[ return variables.ulm_chip_mdi_icon_state_label_color; ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_navigate/index.html b/usage/chips/chip_navigate/index.html
new file mode 100644
index 000000000..da0fb674c
--- /dev/null
+++ b/usage/chips/chip_navigate/index.html
@@ -0,0 +1,3821 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Navigate Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Navigate Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip is a menu button with an icon using mdi.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_navigate_pathpath to navigate to
    ulm_chip_navigate_iconIcon to use
    ulm_chip_navigate_icon_colorprimary-text-colorAllow to change icon color
    ulm_chip_navigate_label_colorprimary-text-colorAllow to change label color
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: chip_navigate
+  label: 'Living Room'
+  variables:
+    ulm_chip_navigate_path: /lovelace-minimalist-test/
+    ulm_chip_navigate_icon: mdi:sofa
+
    
+
    
+Template Code
+
    chip_navigate.yaml
    ---
+### Chip Navigate ###
+chip_navigate:
+  template: "chips"
+  tap_action:
+    action: "navigate"
+    navigation_path: "[[[ return variables.ulm_chip_navigate_path; ]]]"
+  show_icon: true
+  icon: "[[[ return variables.ulm_chip_navigate_icon; ]]]"
+  styles:
+    grid:
+      - grid-template-areas: "'i l'"
+    icon:
+      - color: "[[[ return variables.ulm_chip_navigate_icon_color; ]]]"
+    label:
+      - color: "[[[ return variables.ulm_chip_navigate_label_color; ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_power_consumption/index.html b/usage/chips/chip_power_consumption/index.html
new file mode 100644
index 000000000..c3b4594fd
--- /dev/null
+++ b/usage/chips/chip_power_consumption/index.html
@@ -0,0 +1,3810 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Power Consumption Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Power Consumption Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip shows you the electric consumption from a sensor. Configurable to show power (kWh) or price (currency).
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_electric_consumptionVariable / Entry Example Required ulm_chip_electric_consumption sensor.my_electric_power_consumption true. This is your consumed energy. This is the sensor, that shows how many kWhs are consumed.
    ulm_chip_electric_priceThis is the price for your consumed energy, if you have such a sensor. This should be a sensor that shows a price in your defined currency. If this variable is not set, the chip shows only the kWhs! If this variable is set the chip shows the price for the consumed energy!
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: chip_power_consumption
+  variables:
+    ulm_chip_electric_consumption: sensor.my_electric_power_consumption
+    ulm_chip_electric_price: sensor.my_electric_power_price
+
    
+
    
+Template Code
+
    chip_power_consumption.yaml
    ---
+### Chip Power Consumption ###
+chip_power_consumption:
+  template:
+    - "chips"
+    - "ulm_translation_engine"
+  triggers_update:
+    - "[[[ return variables.ulm_chip_electric_price ]]]"
+    - "[[[ return variables.ulm_chip_electric_consumption ]]]"
+  label: |
+    [[[
+      var amount = variables.ulm_chip_electric_price != "" ? true : false
+      if (amount){
+        return "⚡ " +  states[variables.ulm_chip_electric_price].state + variables.ulm_translation_currency;
+      } else {
+        return "⚡ " +  helpers.localize(states[variables.ulm_chip_electric_consumption]);
+      }
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_presence_detection/index.html b/usage/chips/chip_presence_detection/index.html
new file mode 100644
index 000000000..37eb37161
--- /dev/null
+++ b/usage/chips/chip_presence_detection/index.html
@@ -0,0 +1,3807 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Presence Detection Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Presence Detection Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip shows you the actual presence in your home. Shows residents and guests (guests only if one or more).
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_presence_counter_residentsThis is the sensor that shows your residents counter.
    ulm_chip_presence_counter_guestsThis is the sensor that shows your guests counter.
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: chip_presence_detection
+  variables:
+    ulm_chip_presence_counter_residents: sensor.people_home
+    ulm_chip_presence_counter_guests: sensor.guests_home
+
    
+
    
+Template Code
+
    chip_presence_detection.yaml
    ---
+### Chip Presence Detection ###
+chip_presence_detection:
+  template: "chips"
+  triggers_update:
+    - "[[[ return variables.ulm_chip_presence_counter_residents ]]]"
+    - "[[[ return variables.ulm_chip_presence_counter_guests ]]]"
+  label: |
+    [[[
+      if (!!variables.ulm_chip_presence_counter_guests) {
+        return "🏠 " +  states[variables.ulm_chip_presence_counter_residents].state + " / " + states[variables.ulm_chip_presence_counter_guests].state;
+      } else {
+        return "🏠 " +  states[variables.ulm_chip_presence_counter_residents].state;
+      }
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/chips/chip_temperature/index.html b/usage/chips/chip_temperature/index.html
new file mode 100644
index 000000000..2aab0d341
--- /dev/null
+++ b/usage/chips/chip_temperature/index.html
@@ -0,0 +1,3848 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Temperature Chip - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Temperature Chip
    
+
+
+
+
    Description
    
+
    example-image
    
+
    This chip is to display a weather icon together with the outside and inside temperature, where the latter is optional.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_chip_temperature_outsideThis is the sensor that provides your outside temperature. If you want to use eg. a temperature value from your weather provider, you'd need to setup a template sensor first. The state of this sensor should represent a numeric value (°C or °F doesn't matter).
    ulm_chip_temperature_insideThis is the sensor that provides your inside temperature. The state of this sensor should represent a numeric value (°C or °F doesn't matter).
    ulm_chip_temperature_weatherThis is the sensor for your weather entity for showing current weather conditions
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: chip_temperature
+  variables:
+    ulm_chip_temperature_inside: sensor.my_temperature_sensor_inside
+    ulm_chip_temperature_outside: sensor.my_temperature_sensor_outside
+    ulm_chip_temperature_weather: weather.my_weather_provider
+
    
+
    
+Template Code
+
    chip_temperature.yaml
    ---
+### Chip Temperature ###
+chip_temperature:
+  template:
+    - "chips"
+    - "ulm_actions_card"
+  variables:
+    ulm_card_weather_enable_popup: false
+  triggers_update:
+    - "[[[ return variables.ulm_chip_temperature_weather ]]]"
+    - "[[[ return variables.ulm_chip_temperature_outside ]]]"
+    - "[[[ return variables.ulm_chip_temperature_inside ]]]"
+  label: |
+    [[[
+      var state = states[variables.ulm_chip_temperature_weather].state;
+      var icon = {
+        "clear-night": "🌙",
+        "cloudy": "☁️",
+        "exceptional": "🌞",
+        "fog": "🌫️",
+        "hail": "⛈️",
+        "lightning": "⚡",
+        "lightning-rainy": "⛈️",
+        "partlycloudy": "⛅",
+        "pouring": "🌧️",
+        "rainy": "💧",
+        "snowy": "❄️",
+        "snowy-rainy": "🌨️",
+        "sunny": "☀️",
+        "windy": "🌪️",
+        "default": "🌡️"
+        }
+      function convertTemperature(temp) {
+        if (parseFloat(temp) == temp && Math.floor(temp) != temp) {
+            return parseFloat(temp).toFixed(1);
+        }
+        return temp;
+      }
+      var outside_temp = states[variables.ulm_chip_temperature_outside].state;
+      var inside_temp = null;
+      if (variables.ulm_chip_temperature_inside) {
+        inside_temp = states[variables.ulm_chip_temperature_inside].state;
+      }
+      var label = (icon[state] || icon["default"]) + " " + convertTemperature(outside_temp) + "°";
+      if (inside_temp) {
+        label = label + " / " + convertTemperature(inside_temp) + "°";
+      }
+      return label;
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_afvalophaling/index.html b/usage/custom_cards/custom_card_afvalophaling/index.html
new file mode 100644
index 000000000..0f365d727
--- /dev/null
+++ b/usage/custom_cards/custom_card_afvalophaling/index.html
@@ -0,0 +1,4021 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Afvalophaling Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Afvalophaling"
    
+
    Afvalophaling
+Afvalophaling
    
+
    !! Attention !!
    
+
    This card can only be used if the integration "Home-Assistant-Sensor-Afvalbeheer" from pippyn is installed.
    
+
    Credits
    
+
      
+
    • Author: AndyVRD - 2021
      • 
+
    • Version: 1.0.0
      • 
+
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template:
+    - card_afvalophaling
+  variables:
+    ulm_card_ophaling_vandaag: "sensor.limburg_net_afvalophaling_vandaag"
+    ulm_card_ophaling_morgen: "sensor.limburg_net_afvalophaling_morgen"
+    ulm_card_datum_gft: "sensor.limburg_net_afvalophaling_gft"
+    ulm_card_datum_pmd: "sensor.limburg_net_afvalophaling_pmd"
+    ulm_card_datum_rest: "sensor.limburg_net_afvalophaling_restafval"
+    ulm_card_datum_papier: "sensor.limburg_net_afvalophaling_papier"
+
    
+
    Requirements
    
+
    Integration from HACS: "Home-Assistant-Sensor-Afvalbeheer" from pippyn
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_card_ophaling_vandaagsensor.limburg_net_afvalophaling_vandaagyesCollection(s) for today
    ulm_card_ophaling_morgensensor.limburg_net_afvalophaling_morgenyesCollection(s) for tomorrow
    ulm_card_datum_gftsensor.limburg_net_afvalophaling_gftyesGFT collection date
    ulm_card_datum_pmdsensor.limburg_net_afvalophaling_pmdyesPMD collection date
    ulm_card_datum_restsensor.limburg_net_afvalophaling_restyesRestafval collection date
    ulm_card_datum_papiersensor.limburg_net_afvalophaling_papieryesPapier collection date
    
+
+
    
+Template Code
+
    card_afvalophaling.yaml
    ---
+card_afvalophaling:
+  template:
+    - "ulm_language_variables"
+    - "icon_info_afvalophaling"
+    - "custom_colors"
+  triggers_update: "all"
+  icon: "mdi:delete"
+  name: >
+        [[[
+          if((variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state !== 'Geen') ||
+            (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state !== 'Geen')) {
+            return variables.ulm_ophaling
+          } else {
+            return variables.ulm_volgende_ophaling
+          }
+        ]]]
+  label: |
+        [[[
+          if(variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state !== 'Geen'){
+            return states[variables.ulm_card_ophaling_vandaag].state
+          }
+
+          if(variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state !== 'Geen'){
+            return states[variables.ulm_card_ophaling_morgen].state
+          }
+
+          var collections = [];
+          if(variables.ulm_card_datum_rest){
+            collections.push("Restafval " + ' • ' + states[variables.ulm_card_datum_rest].state);
+          }
+
+          if(variables.ulm_card_datum_papier){
+            collections.push("Papier " + ' • ' + states[variables.ulm_card_datum_papier].state);
+          }
+
+          if(variables.ulm_card_datum_pmd){
+            collections.push("PMD " + ' • ' + states[variables.ulm_card_datum_pmd].state);
+          }
+
+          if(variables.ulm_card_datum_gft){
+            collections.push("GFT " + ' • ' + states[variables.ulm_card_datum_gft].state);
+          }
+
+          if(variables.ulm_card_datum_glas){
+            collections.push("Glas " + ' • ' + states[variables.ulm_card_datum_glas].state);
+          }
+
+          return collections.join('<br>');
+        ]]]
+custom_colors:
+  state:
+    - styles:
+        icon:
+          - color: "rgba(var(--color-green),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-green), 0.2)"
+      value: >
+        [[[
+          return (variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state !== "Geen") || (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state !== "Geen")
+        ]]]
+      icon: "mdi:recycle"
+      operator: "template"
+    - styles:
+        icon:
+          - color: "rgba(var(--color-blue),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-blue), 0.2)"
+      value: >
+        [[[
+          return (variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state === "glas") || (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state === "glas")
+        ]]]
+      icon: "mdi:bottle-wine-outline"
+      operator: "template"
+icon_info_afvalophaling:
+  color: "var(--google-grey)"
+  show_icon: "true"
+  show_label: "true"
+  show_name: "true"
+  state:
+    - value: "unavailable"
+      styles:
+        icon:
+          - color: "rgba(var(--color-red),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-red), 0.2)"
+        custom_fields:
+          notification:
+            - border-radius: "50%"
+            - position: "absolute"
+            - left: "42px"
+            - top: "10px"
+            - height: "16px"
+            - width: "16px"
+            - font-size: "12px"
+            - line-height: "14px"
+            - background-color: >
+                [[[
+                  return "rgba(var(--color-red),1)";
+                ]]]
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bold"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+      - text-align: "start"
+    name:
+      - align-self: "end"
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "14px"
+      - margin-left: "12px"
+      - margin-bottom: "4px"
+    state:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bold"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+    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 n' 'i l'"
+      - grid-template-columns: "min-content auto"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    notification: >
+      [[[
+        if ((variables.ulm_card_ophaling_vandaag && states[variables.ulm_card_ophaling_vandaag].state =='unavailable') ||
+          (variables.ulm_card_ophaling_morgen && states[variables.ulm_card_ophaling_morgen].state =='unavailable')) {
+          return `<ha-icon icon="mdi:help" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
+        }
+      ]]]
+  size: "20px"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_alarm_time/index.html b/usage/custom_cards/custom_card_alarm_time/index.html
new file mode 100644
index 000000000..567f53ec1
--- /dev/null
+++ b/usage/custom_cards/custom_card_alarm_time/index.html
@@ -0,0 +1,4200 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Alarm Time Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+                  
    
+                
    
+              
    
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Alarm Time Card"
    
+
    The card_alarm_time you can control a input_datetime entity and a boolean.
+This card is useful for setting alarms (e.g. wakeup alarm), as you can modify the time and toggle the state of the alarm from one card.
    
+
    Credits
    
+
    Author: benbur - 2023
+Version: 1.0.0
    
+
    This is built largely on top of the original Input_Datetime Card:
+Author: sildehoop - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial Release
+
    
+
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredDefaultExplanation
    ulm_card_alarm_time_name'Morning Alarm'noSet Custom Name
    ulm_card_alarm_time_icon'mdi:alarm'noSet Custom Icon
    ulm_card_alarm_time_color'green'no'blue'Set Custom Color for Card Elements
    ulm_card_alarm_time_force_background_colortruenofalseForce Background Color in Light Mode/td>
+
    ulm_card_alarm_time_collapsetruenofalseMake card collapsible when off
    ulm_card_alarm_time_horizontaltruenofalseHorizontal Mode for the Card
    ulm_card_alarm_time_step'30'no15Set Adjust Time (minutes)
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_alarm_time
+  entity: input_boolean.morning_alarm_toggle
+  variables:
+    ulm_card_alarm_time_datetime: input_datetime.morning_alarm_time
+    ulm_card_alarm_time_horizontal: true
+    ulm_card_alarm_time_collapse: true
+
    
+
    Requirements
    
+
    Input DateTime Helper
+Input Boolean
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_alarm_time.yaml
    ---
+### Card Alarm ###
+card_alarm_time:
+  triggers_update: "all"
+  template:
+    - "icon_more_info_new"
+  variables:
+    ulm_card_alarm_time_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_card_alarm_time_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_card_alarm_time_horizontal: false
+    ulm_card_alarm_time_collapse: false
+    ulm_card_alarm_time_color: "blue"
+    ulm_card_alarm_time_force_background_color: false
+    ulm_card_alarm_time_step: 15
+  show_icon: false
+  show_name: false
+  show_label: false
+  state:
+    - value: "on"
+      styles:
+        card:
+          - background-color: >
+              [[[
+                if (variables.ulm_card_alarm_time_force_background_color || hass.themes.darkMode) {
+                  var color = variables.ulm_card_alarm_time_color;
+                  return 'rgba(var(--color-' + color + '),var(--opacity-bg))';
+                }
+              ]]]
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+              if (entity.state != "on" && variables.ulm_card_alarm_time_collapse) {
+                  return "\"item1\"";
+              }
+              if (variables.ulm_card_alarm_time_horizontal) {
+                  return "\"item1 item2\"";
+              }
+              return "\"item1\" \"item2\"";
+          ]]]
+      - grid-template-columns: >
+          [[[
+              if (variables.ulm_card_alarm_time_horizontal) {
+                  return "1fr 1fr";
+              }
+              return "1fr";
+          ]]]
+      - grid-template-rows: >
+          [[[
+              if (variables.ulm_card_alarm_time_horizontal || (entity.state != "on" && variables.ulm_card_alarm_time_collapse)) {
+                  return "1fr";
+              }
+              return "min-content min-content";
+          ]]]
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+    custom_fields:
+      item2:
+        - display: >
+            [[[
+              if (entity.state != "off") {
+                  return "block";
+              }
+              return "none";
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "[[[ return variables.ulm_card_alarm_time_icon ]]]"
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        var color = variables.ulm_card_alarm_time_color;
+                        if (typeof entity !== "undefined") {
+                          if (entity.state != "off") {
+                              return 'rgba(var(--color-' + color + '),1)';
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.2)';
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        var color = variables.ulm_card_alarm_time_color;
+                        if (typeof entity !== "undefined") {
+                          if (entity.state != "off") {
+                              return 'rgba(var(--color-' + color + '),0.2)';
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_card_alarm_time_name ]]]"
+              label: >
+                [[[
+                  if (entity.state == "on") {
+                    return "On";
+                  } else if (entity.state == "off") {
+                    return "Off";
+                  }
+                ]]]
+              state:
+                - value: "on"
+                  styles:
+                    name:
+                      - color: >
+                          [[[
+                            if (variables.ulm_card_alarm_time_force_background_color) {
+                              return 'rgb(250,250,250)';
+                            }
+                          ]]]
+                    label:
+                      - color: >
+                          [[[
+                            if (variables.ulm_card_alarm_time_force_background_color) {
+                              return 'rgb(250,250,250)';
+                            }
+                          ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        styles:
+          card:
+            - background: "none"
+          grid:
+            - grid-template-areas: >
+                [[[
+                    if (variables.ulm_card_alarm_time_horizontal) {
+                      return "'item2'";
+                    } else {
+                      return "'item1 item2 item3'";
+                    }
+                ]]]
+            - grid-template-columns: >
+                [[[
+                    if (variables.ulm_card_alarm_time_horizontal) {
+                      return "1fr";
+                    } else {
+                      return "1fr 1fr 1fr";
+                    }
+                ]]]
+          custom_fields:
+            item1:
+              - display: >
+                  [[[
+                    if (variables.ulm_card_alarm_time_horizontal) {
+                        return "none";
+                    }
+                    return "block";
+                  ]]]
+            item3:
+              - display: >
+                  [[[
+                    if (variables.ulm_card_alarm_time_horizontal) {
+                        return "none";
+                    }
+                    return "block";
+                  ]]]
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_alarm_time_datetime ]]]"
+                data:
+                  time: >
+                    [[[
+                      var timestamp = states[variables.ulm_card_alarm_time_datetime].attributes.timestamp;
+                      let time_adjust = (60 + variables.ulm_card_alarm_time_step) * 60;
+                      let new_timestamp = timestamp - time_adjust;
+                      var date = new Date(new_timestamp * 1000);
+                      var hours = date.getHours();
+                      var minutes = "0" + date.getMinutes();
+                      var seconds = "0" + date.getSeconds();
+                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+                      return formattedTime;
+                    ]]]
+              icon: "mdi:minus"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {
+                          if (entity.state != "off") {
+                            return 'rgba(250,250,250,0.8)';
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {
+                          if (entity.state != "off") {
+                            var color_set = variables.ulm_card_alarm_time_color;
+                            var color = 'rgba(var(--color-' + color_set + '),1)';
+                            return color;
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+
+          item2:
+            card:
+              type: "custom:button-card"
+              template:
+                - "widget_icon"
+              entity: "[[[ return variables.ulm_card_alarm_time_datetime ]]]"
+              tap_action:
+                action: "more-info"
+              show_icon: false
+              show_label: true
+              label: "[[[ return states[variables.ulm_card_alarm_time_datetime].state ]]]"
+              styles:
+                grid:
+                  - grid-template-areas: "'l'"
+                card:
+                  - background-color: >
+                      [[[
+                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {
+                          if (entity.state != "off") {
+                            return 'rgba(250,250,250,0.8)';
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {
+                          if (entity.state != "off") {
+                            var color_set = variables.ulm_card_alarm_time_color;
+                            var color = 'rgba(var(--color-' + color_set + '),1)';
+                            return color;
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_alarm_time_datetime ]]]"
+                data:
+                  time: >
+                    [[[
+                      var timestamp = states[variables.ulm_card_alarm_time_datetime].attributes.timestamp;
+                      let time_adjust = (60 - variables.ulm_card_alarm_time_step) * 60;
+                      let new_timestamp = timestamp - time_adjust;
+                      var date = new Date(new_timestamp * 1000);
+                      var hours = date.getHours();
+                      var minutes = "0" + date.getMinutes();
+                      var seconds = "0" + date.getSeconds();
+                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+                      return formattedTime;
+                    ]]]
+              icon: "mdi:plus"
+              styles:
+                card:
+                  - background-color: >
+                      [[[
+                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {
+                          if (entity.state != "off") {
+                            return 'rgba(250,250,250,0.8)';
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.05)';
+                      ]]]
+                icon:
+                  - color: >
+                      [[[
+                        if (!hass.themes.darkMode && variables.ulm_card_alarm_time_force_background_color) {
+                          if (entity.state != "off") {
+                            var color_set = variables.ulm_card_alarm_time_color;
+                            var color = 'rgba(var(--color-' + color_set + '),1)';
+                            return color;
+                          }
+                        }
+                        return 'rgba(var(--color-theme),0.9)';
+                      ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_apexcharts/index.html b/usage/custom_cards/custom_card_apexcharts/index.html
new file mode 100644
index 000000000..984c49d5f
--- /dev/null
+++ b/usage/custom_cards/custom_card_apexcharts/index.html
@@ -0,0 +1,4074 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Apexcharts Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Apexcharts"
    
+
    Apexcharts radialBar
+Apexcharts line
+Apexcharts Donut
    
+
    Credits
    
+
      
+
    • Author: AndyVRD - 2022
      • 
+
    • Credits to benm7
      • 
+
    • Version: 1.0.0
      • 
+
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
    
+1.0.1
+Fix for UI Minimalist v1.0.1.
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: "custom_card_apexcharts"
+  variables:
+    chart_type: "donut"
+    graph_span: "1d"
+    entity_1:
+      entity_id: "sensor.google"
+      icon: ""
+      name: "Google"
+      color: "blue"
+      max_value: 300
+    entity_2:
+      entity_id: "sensor.cloudflare"
+      icon: ""
+      name: "Cloudflare"
+      color: "yellow"
+      max_value: 50
+    entity_3:
+      entity_id: "sensor.gateway"
+      icon: ""
+      name: "Gateway"
+      color: "green"
+      max_value: 30
+
    
+
    Requirements
    
+
    Integration from HACS: "custom:apexcharts-card" from RomRider
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    chart_typeline, scatter, pie, donut or radialBaryesThe chart type you want to display
    graph_span1h, 12min, 1d, 1h25, 10sec, ...noThe span of the graph as a time interval
    entity_idsensor.speedtest_downloadyesEntity sensor of choice
    iconmdi:cpu-64-bitnomdi icon you want to be exposed in the img_cell, '' will return entity.attributes.icon 
    namename for the used sensorno'' will return entity.attributes.friendly_name
    colorgreen, blue, yellow, red or greynoif you don't use the color variable it will choice a random color
    max_value10, 300, ...noMaximum value of the sensor. Default will be 100
    
+
+
    
+Template Code
+
    apexcharts.yaml
    ---
+custom_card_apexcharts:
+  variables:
+    entity_1:
+      entity_id:
+      icon: "[[[ return entity.attributes.icon ]]]"
+      name: "[[[ return entity.attributes.friendly_name ]]]"
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'green'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_2:
+      entity_id:
+      icon: "[[[ return entity.attributes.icon  ]]]"
+      name: "[[[ return entity.attributes.friendly_name ]]]"
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'green'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_3:
+      entity_id:
+      icon: "[[[ return entity.attributes.icon  ]]]"
+      name: "[[[ return entity.attributes.friendly_name ]]]"
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red','green'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+  color: "auto"
+  variable: "spin"
+  spin: false
+  show_name: false
+  show_state: false
+  show_label: false
+  show_icon: false
+  show_last_changed: false
+  show_entity_picture: false
+  tap_action:
+    action: "none"
+  aspect_ratio: "2/1"
+  styles:
+    grid:
+      - grid-template-areas: "'item1 radial' 'item2 radial' 'item3 radial'"
+      - grid-template-columns: "35% 65%"
+      - grid-template-rows: "1fr 1fr 1fr"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "0px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        entity: "[[[ return variables.entity_1.entity_id ]]]"
+        template:
+          - "card_generic_swap"
+        variables:
+          ulm_card_generic_swap_name: "[[[ return variables.entity_1.name ]]]"
+          ulm_card_generic_swap_icon: "[[[ return variables.entity_1.icon ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              custom_fields:
+                item1:
+                  card:
+                    type: "custom:button-card"
+                    styles:
+                      icon:
+                        - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]"
+                      img_cell:
+                        - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "none"
+            - padding-top: "1px"
+            - padding-bottom: "1px"
+    item2:
+      card:
+        type: "custom:button-card"
+        entity: "[[[ return variables.entity_2.entity_id ]]]"
+        template:
+          - "card_generic_swap"
+        variables:
+          ulm_card_generic_swap_name: "[[[ return variables.entity_2.name ]]]"
+          ulm_card_generic_swap_icon: "[[[ return variables.entity_2.icon ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              custom_fields:
+                item1:
+                  card:
+                    type: "custom:button-card"
+                    styles:
+                      icon:
+                        - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]"
+                      img_cell:
+                        - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "none"
+            - padding-top: "1px"
+            - padding-bottom: "1px"
+    item3:
+      card:
+        type: "custom:button-card"
+        entity: "[[[ return variables.entity_3.entity_id ]]]"
+        template:
+          - "card_generic_swap"
+        variables:
+          ulm_card_generic_swap_name: "[[[ return variables.entity_3.name ]]]"
+          ulm_card_generic_swap_icon: "[[[ return variables.entity_3.icon ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              custom_fields:
+                item1:
+                  card:
+                    type: "custom:button-card"
+                    styles:
+                      icon:
+                        - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]"
+                      img_cell:
+                        - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "none"
+            - padding-top: "1px"
+            - padding-bottom: "1px"
+    radial:
+      card:
+        type: "custom:apexcharts-card"
+        graph_span: "[[[ return variables.graph_span ]]]"
+        chart_type: "[[[ return variables.chart_type ]]]"
+        style: |
+          ha-card {
+            border-radius: "var(--border-radius)";
+            box-shadow: none;
+            padding-left: 10px;
+            padding-bottom: 0px;
+          }
+        header:
+          show: false
+        apex_config:
+          title:
+            floating: false
+            align: "top"
+            style:
+              fontSize: "2px"
+              fontWeight: "bold"
+          chart:
+            foreColor: "rgb(148,148,148)"
+            offsetY: 5
+          legend:
+            show: false
+        series:
+          - entity: "[[[ return variables.entity_1.entity_id ]]]"
+            name: "[[[ return variables.entity_1_name ]]]"
+            color: "[[[ return `var(--google-${variables.entity_1.color})`;]]]"
+            max: "[[[ return variables.entity_1.max_value ]]]"
+          - entity: "[[[ return variables.entity_2.entity_id ]]]"
+            name: "[[[ return variables.entity_2_name ]]]"
+            color: "[[[ return `var(--google-${variables.entity_2.color})`;]]]"
+            max: "[[[ return variables.entity_2.max_value ]]]"
+          - entity: "[[[ return variables.entity_3.entity_id ]]]"
+            name: "[[[ return variables.entity_3_name ]]]"
+            color: "[[[ return `var(--google-${variables.entity_3.color})`;]]]"
+            max: "[[[ return variables.entity_3.max_value ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_bar_card/index.html b/usage/custom_cards/custom_card_bar_card/index.html
new file mode 100644
index 000000000..1460e1294
--- /dev/null
+++ b/usage/custom_cards/custom_card_bar_card/index.html
@@ -0,0 +1,3994 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Bar Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Bar Card"
    
+
    This is a custom-card to display a percentage value as a bar.
    
+
    Screenshot
    
+
    Credits
    
+
    Author: rphlwnk - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release.
+
    
+
    
+0.1.1
+Fix for UI Minimalist v1.0.1.
+
    
+
    
+0.1.2
+Fix border radius
+
    
+
+
    Requirements
    
+
    This card needs the following to function correctly:
    
+
    Custom Card 'Bar-Card'
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_bar_card
+  variables:
+    ulm_custom_card_bar_card_entity: sensor.memory_use_percent
+    ulm_custom_card_bar_card_name: Memory Usage
+    ulm_custom_card_bar_card_value: true
+    ulm_custom_card_bar_card_indicator: true
+    ulm_custom_card_bar_card_color: "var(--google-green)"
+    ulm_custom_card_bar_card_min: 10
+    ulm_custom_card_bar_card_max: 20
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredDefaultExplanation
    ulm_custom_card_bar_card_entitysensor.memory_use_percentyesThe entity with the desired value
    ulm_custom_card_bar_card_name"Memory Consumption"noSensor NameOverwrites the sensor name
    ulm_custom_card_bar_card_icon"mdi:icon"noSensor IconOverwrites the sensor icon
    ulm_custom_card_bar_card_valuetrue / falsenofalseIf true, shows the value in the bar
    ulm_custom_card_bar_card_indicatortrue / falsenofalseIf true, shows if the value has changed up or down
    ulm_custom_card_bar_card_color"var(--google-green)"no"var(--google-blue)"Change the color of the bar
    ulm_custom_card_bar_card_min10no0Change the minimum value of the bar
    ulm_custom_card_bar_card_max20no100Change the maximum value of the bar
    
+
+
    Example
    
+
    - type: "custom:button-card"
+  template: custom_card_bar_card
+  variables:
+    ulm_custom_card_bar_card_entity: sensor.memory_use_percent
+    ulm_custom_card_bar_card_name: Memory Usage
+
    
+
    
+Template Code
+
    custom_card_bar_card.yaml
    ---
+custom_card_bar_card:
+  variables:
+    ulm_custom_card_bar_card_color: "var(--google-blue)"
+    ulm_custom_card_bar_card_min: "0"
+    ulm_custom_card_bar_card_max: "100"
+  triggers_update: "all"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - 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:
+          - "icon_info"
+          - "card_generic"
+        variables:
+          ulm_card_generic_name: "[[[ return variables.ulm_custom_card_bar_card_name != '' ? variables.ulm_custom_card_bar_card_name : '' ]]]"
+          ulm_card_generic_icon: "[[[ return variables.ulm_custom_card_bar_card_icon != '' ? variables.ulm_custom_card_bar_card_icon : '' ]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
+            - padding: "12px"
+        entity: "[[[ return variables.ulm_custom_card_bar_card_entity ]]]"
+    item2:
+      card:
+        type: "custom:bar-card"
+        entities:
+          - entity: "[[[ return variables.ulm_custom_card_bar_card_entity ]]]"
+        color: "[[[ return variables.ulm_custom_card_bar_card_color ]]]"
+        positions:
+          icon: "off"
+          indicator: "[[[ return variables.ulm_custom_card_bar_card_indicator == true ? 'inside' : 'off' ]]]"
+          minmax: "off"
+          title: "off"
+          value: "[[[ return variables.ulm_custom_card_bar_card_value == true ? 'inside' : 'off' ]]]"
+          name: "off"
+        min: "[[[ return variables.ulm_custom_card_bar_card_min ]]]"
+        max: "[[[ return variables.ulm_custom_card_bar_card_max ]]]"
+        card_mod:
+          style: |-
+            bar-card-currentbar {
+              border-radius: 0px !important;
+              right: 0;
+            }
+            bar-card-backgroundbar {
+              border-radius: 0px !important;
+              right: 0;
+            }
+            #states {
+              padding: 0;
+              height: 35px;
+            }
+            bar-card-background {
+              height: 35px !important;
+            }
+            bar-card-indicator {
+              left: 10px;
+            }
+            bar-card-value {
+              font-weight: bold;
+              font-size: 12px;
+            }
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_camera/index.html b/usage/custom_cards/custom_card_camera/index.html
new file mode 100644
index 000000000..2ab31b6c9
--- /dev/null
+++ b/usage/custom_cards/custom_card_camera/index.html
@@ -0,0 +1,3925 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom Camera Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Camera"
    
+
    This is a custom-card to display a camera live view.
    
+
    Screenshot
+Screenshot
    
+
    Credits
    
+
    Author: Eltarius, from the script of Clemalex - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.1
+Added variable to passthough aspect ratio to the picture entity card. Fix minor issues with title.
+
    
+
    
+1.0.0
+Initial release.
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  entity: "camera.sensor"
+  template: "custom_card_camera"
+  show_icon: false #True if you set ulm_custom_card_camera_title: true
+  variables:
+    ulm_custom_card_camera_title: true
+    ulm_custom_card_camera_name: "name"
+    ulm_custom_card_camera_label: "label"
+    ulm_custom_card_camera_aspect_ratio: '16:9'
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredDefaultExplanation
    ulm_custom_card_camera_titletrueyesIf you want header card
    ulm_custom_card_camera_name"Garden"noName of your choice
    ulm_custom_card_camera_label"Room"noLabel of your choice
    ulm_custom_card_camera_aspect_ratio'16:9'noAspect ratio of camera entity
    
+
+
    
+Template Code
+
    custom_card_camera.yaml
    ---
+custom_card_camera:
+  template:
+    - "blue_no_state"
+  show_name: false
+  show_label: false
+  styles:
+    card:
+      - border-radius: "20px"
+      - box-shadow: "var(--box-shadow)"
+      - padding: |-
+          [[[
+            if(variables.ulm_custom_card_camera_title)
+              return "12px";
+            else
+              return "0px";
+          ]]]
+    img_cell:
+      - border-radius: "50%"
+      - place-self: "center"
+      - width: "42px"
+      - height: "42px"
+    grid:
+      - grid-template-areas: "'i item1' 'i item1' 'item2 item2'"
+      - grid-template-columns: "min-content auto"
+      - grid-template-rows: "min-content min-content min-content"
+      - row-gap: |-
+          [[[
+            if(variables.ulm_custom_card_camera_title)
+              return "12px";
+            else
+              return "0px";
+          ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        show_name: "[[[ return variables.ulm_custom_card_camera_title; ]]]"
+        show_label: "[[[ return variables.ulm_custom_card_camera_title; ]]]"
+        show_icon: "[[[ return variables.ulm_custom_card_camera_title; ]]]"
+        name: "[[[ return variables.ulm_custom_card_camera_name; ]]]"
+        label: "[[[ return variables.ulm_custom_card_camera_label; ]]]"
+        tap_action:
+          action: "more-info"
+          entity: "[[[ return entity.entity_id ]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - padding: "0"
+            - --mdc-ripple-press-opacity: 0
+          name:
+            - align-self: "end"
+            - justify-self: "start"
+            - font-weight: "bold"
+            - font-size: "14px"
+            - margin-left: "12px"
+            - filter: "opacity(100%)"
+          label:
+            - justify-self: "start"
+            - align-self: "start"
+            - font-weight: "bolder"
+            - font-size: "12px"
+            - filter: "opacity(40%)"
+            - margin-left: "12px"
+          grid:
+            - grid-template-areas: "'n' 'l'"
+            - grid-template-columns: "auto"
+            - grid-template-rows: "min-content min-content"
+    item2:
+      card:
+        type: "picture-entity"
+        camera_image: "[[[ return entity.entity_id ]]]"
+        camera_view: "live"
+        entity: "[[[ return entity.entity_id ]]]"
+        show_name: false
+        show_state: false
+        aspect_ratio: "[[[ return variables.ulm_custom_card_camera_aspect_ratio; ]]]"
+  tap_action:
+    action: "more-info"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_chromecast/index.html b/usage/custom_cards/custom_card_chromecast/index.html
new file mode 100644
index 000000000..481f62bc9
--- /dev/null
+++ b/usage/custom_cards/custom_card_chromecast/index.html
@@ -0,0 +1,3803 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Mediaplayer Chromecast Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Media player: sonos
    
+
    
+
    NOTE
+This card is under review and is not ready to use!
    
+
    
+
    Sonos
    
+
    
+Usage
+
+## Example
+
+
    - type: "custom:button-card"
+  template: card_media_player_chromecast_with_controls
+  variables:
+    ulm_card_media_player_with_controls_name: "Chromecast"
+    ulm_card_media_player_with_controls_entity: media_player.my_chromecast
+
    
+
+## Variables
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_card_media_player_with_controls_nameChromecastYesName shown in lovelace
    ulm_card_media_player_with_controls_entitymedia_player.my_chromecastYesEntity id
    
+
    
+
    
+
+
    
+Template Code
+
    custom_card_chromecast.yaml
    ---
+card_media_player_chromecast:
+  size: "20px"
+  show_icon: true
+  show_entity_picture: false
+  show_state: false
+  show_name: true
+  template:
+    - "icon_info"
+    - "blue_not_unavailable"
+    - "ulm_translation_engine"
+  label: "[[[ return variables.ulm_translation_state ]]]"
+card_media_player_chromecast_with_controls:
+  variables:
+    ulm_card_media_player_with_controls_name: "No name set"
+  triggers_update:
+    - "[[[ ulm_card_media_player_with_controls_entity ]]]"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "card_media_player_chromecast"
+        tap_action:
+          action: "more-info"
+        entity: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+        name: "[[[ return variables.ulm_card_media_player_with_controls_name ]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - padding: "0px"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.toggle"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+              icon: "mdi:power"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.media_play_pause"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+              icon: "mdi:pause"
+              state:
+                - value: "paused"
+                  icon: "mdi:play"
+                - value: "off"
+                  icon: "mdi:play"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.toggle"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+              icon: "mdi:video-input-hdmi"
+
+blue_not_unavailable:
+  state:
+    - styles:
+        icon:
+          - color: "rgba(var(--color-blue),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-blue), 0.2)"
+      value: "unavailable"
+      operator: "!="
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_damix48_power_details/index.html b/usage/custom_cards/custom_card_damix48_power_details/index.html
new file mode 100644
index 000000000..76e2b4ba8
--- /dev/null
+++ b/usage/custom_cards/custom_card_damix48_power_details/index.html
@@ -0,0 +1,3995 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Power Details Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Power details"
    
+
    The custom_card_damix48_power_details is an extension of the standard graph card and can show a detailed graphs of power consumption. If hover (or tap in mobile) the points of the line show the average power in that time interval.
    
+
    Power details
    
+
    Credits
    
+
    Author: Damix48
+Version: 0.1.1
    
+
    Changelog
    
+
    
+0.1.0
+Initial release.
+
    
+
    
+0.1.1
+Fix for UI Minimalist v1.0.1.
+
    
+
+
    
+
    Breaking Change
    
+
    Since v1.0.2 you also need to specify the entity outside the variables section.
    
+
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_damix48_power_details
+  entity: sensor.shellyem_id_channel_1_power
+  variables:
+    ulm_card_power_details_name: Power
+    ulm_card_power_details_entity: sensor.shellyem_id_channel_1_power
+    ulm_card_power_details_hours: 2
+    ulm_card_power_details_24hour: true
+    ulm_card_power_details_thresholds:
+      - value: 0
+        color: "#43A047"
+      - value: 2500
+        color: "#FFA600"
+      - value: 3000
+        color: "#DB4437"
+
    
+
    Requirements
    
+
    Need mini-graph-card
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_card_power_details_entitysensor.shellyem_id_channel_1_poweryesPower sensor entity
    ulm_card_power_details_name"Power"noName to show on card.
    ulm_card_power_details_hours2noNumber of hour to show in the graph (2 is the default value)
    ulm_card_power_details_24hourtruenoSwitch from AM/PM (default) to 24h format
    ulm_card_power_details_thresholds
+
    +- value: 0
+  color: "#43A047"
+- value: 2500
+  color: "#FFA600"
+- value: 3000
+  color: "#DB4437"
+
    +
    		noThresholds to change color in the graph according to power value (default is only one color)
    ulm_card_power_details_height180noHeight of the graph (180 is the default value)
    
+
+
    
+Template Code
+
    custom_card_damix48_power_details.yaml
    ---
+custom_card_damix48_power_details:
+  template:
+    - "ulm_custom_card_damix48_power_details_language_variables"
+  variables:
+    ulm_card_power_details_name: "n/a"
+    ulm_card_power_details_hours: 2
+    ulm_card_power_details_24hour: false
+    ulm_card_power_details_height: 180
+  show_icon: false
+  show_name: false
+  show_label: false
+  triggers_update: "all"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "0px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_info"
+          - "card_generic_swap"
+        entity: "[[[ return entity.entity_id ]]]"
+        variables:
+          ulm_card_generic_swap_name: "[[[ return variables.ulm_card_power_details_name ]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
+            - padding: "12px"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template:
+                - "icon_more_info"
+              custom_fields:
+                item1:
+                  card:
+                    type: "custom:button-card"
+                    entity: "[[[ return entity.entity_id ]]]"
+                item2:
+                  card:
+                    type: "custom:button-card"
+                    entity: "[[[ return entity.entity_id ]]]"
+                    label: |
+                      [[[
+                        if (variables.ulm_card_power_details_hours == 1) {
+                          return variables.ulm_custom_card_damix48_power_details_in_the_last + " " + variables.ulm_custom_card_damix48_power_details_hour;
+                        } else {
+                          return variables.ulm_custom_card_damix48_power_details_in_the_lasts + " " + variables.ulm_card_power_details_hours + " " + variables.ulm_custom_card_damix48_power_details_hours;
+                        }
+                      ]]]
+    item2:
+      card:
+        type: "custom:mini-graph-card"
+        template:
+          - "icon_info"
+          - "card_generic"
+        entities:
+          - entity: "[[[ return variables.ulm_card_power_details_entity ]]]"
+        color_thresholds: |
+          [[[
+            if (variables.ulm_card_power_details_thresholds) {
+              return variables.ulm_card_power_details_thresholds;
+            } else {
+              return [{
+                value: 0,
+                color: "var(--info-color)"
+              }];
+            }
+          ]]]
+        hours_to_show: "[[[ return variables.ulm_card_power_details_hours ]]]"
+        points_per_hour: "[[[ return Math.floor(120 / variables.ulm_card_power_details_hours) ]]]"
+        name: "[[[ return variables.ulm_card_power_details_name ]]]"
+        hour24: "[[[ return variables.ulm_card_power_details_24hour ]]]"
+        decimals: 1
+        show:
+          name: false
+          icon: false
+          legend: false
+          state: true
+        align_state: "center"
+        height: "[[[ return variables.ulm_card_power_details_height ]]]"
+        style: |
+          ha-card {
+            box-shadow: none;
+            border-radius: var(--border-radius);
+          }
+          ha-card .state {
+            font-weight: bold;
+            font-size: 14px;
+          }
+          ha-card .graph__labels > span {
+            background: var(--card-background-color);
+            color: var(--secondary-text-color)
+          }
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_device_tracker/index.html b/usage/custom_cards/custom_card_device_tracker/index.html
new file mode 100644
index 000000000..59b87c190
--- /dev/null
+++ b/usage/custom_cards/custom_card_device_tracker/index.html
@@ -0,0 +1,3913 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Device Tracker Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Device Tracker Custom-card
    
+
+
+
+
    Description
    
+
    example-image
    
+
    The custom_card_device_tracker displays presence state of a device according to the provided entity.
+It allow to display the state of two tracker for this device
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityThe device entity or group
    ulm_custom_card_device_tracker_iconicon to display
    ulm_custom_card_device_tracker_tracker_1_entitySet the first tracker entity.
    ulm_custom_card_device_tracker_tracker_1_typeSet the type of the first tracker, for the notification icon
    ulm_custom_card_device_tracker_tracker_2_entitySet the second tracker entity.
    ulm_custom_card_device_tracker_tracker_2_typeSet the type of the second tracker, for the notification icon
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: custom_card_device_tracker
+  entity: group.my_smartphone
+  variables:
+    ulm_custom_card_device_tracker_icon: mdi:cellphone
+    ulm_custom_card_device_tracker_tracker_1_entity: device_tracker.my_smartphone_ping
+    ulm_custom_card_device_tracker_tracker_1_type: 'lan'
+    ulm_custom_card_device_tracker_tracker_2_entity: device_tracker.my_smartphone_bluetooth
+    ulm_custom_card_device_tracker_tracker_2_type: 'bluetooth'
+
    
+
    
+Template Code
+
    custom_card_device_tracker.yaml
    ---
+custom_card_device_tracker:
+  template:
+    - "icon_info_bg"
+    - "ulm_translation_engine"
+  tap_action:
+    action: "more-info"
+  show_label: true
+  show_name: true
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  entity: "[[[ return entity; ]]]"
+  icon: "[[[ return variables.ulm_custom_card_device_tracker_icon; ]]]"
+  styles:
+    icon:
+      - color: >
+          [[[
+              return entity.state === "not_home" ?
+              "rgba(var(--color-theme),0.9)":
+              "rgba(var(--color-green),1)";
+          ]]]
+    custom_fields:
+      tracker_1:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "38px"
+        - top: "8px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: >
+            [[[
+              if (variables.ulm_custom_card_device_tracker_tracker_1_entity) {
+                if (states[variables.ulm_custom_card_device_tracker_tracker_1_entity].state !== 'home') {
+                  return "rgba(var(--color-green),1)";
+                } else {
+                  return "rgba(var(--color-blue),1)";
+                }
+              }
+            ]]]
+      tracker_2:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "38px"
+        - top: "38px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: >
+            [[[
+              if (variables.ulm_custom_card_device_tracker_tracker_2_entity) {
+                if (states[variables.ulm_custom_card_device_tracker_tracker_2_entity].state !== 'home') {
+                  return "rgba(var(--color-green),1)";
+                } else {
+                  return "rgba(var(--color-blue),1)";
+                }
+              }
+            ]]]
+  custom_fields:
+    tracker_1: >
+      [[[
+        if (variables.ulm_custom_card_device_tracker_tracker_1_entity) {
+          let state = states[variables.ulm_custom_card_device_tracker_tracker_1_entity].state;
+          let icon = state === 'home' ? 'mdi:home-variant' : 'mdi:home-minus';
+          let type = variables.ulm_custom_card_device_tracker_tracker_1_type
+
+          if (type == 'bluetooth') {
+            icon = state === 'home' ? 'mdi:bluetooth': 'mdi:bluetooth-off';
+          } else if (type == 'lan') {
+            icon = state === 'home' ? 'mdi:lan-connect' : 'mdi:lan-disconnect';
+          }
+          return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        }
+      ]]]
+    tracker_2: >
+      [[[
+        if (variables.ulm_custom_card_device_tracker_tracker_2_entity) {
+          let state = states[variables.ulm_custom_card_device_tracker_tracker_2_entity].state;
+          let icon = state === 'home' ? 'mdi:home-variant' : 'mdi:home-minus';
+          let type = variables.ulm_custom_card_device_tracker_tracker_2_type
+
+          if (type == 'bluetooth') {
+            icon = state === 'home' ? 'mdi:bluetooth': 'mdi:bluetooth-off';
+          } else if (type == 'lan') {
+            icon = state === 'home' ? 'mdi:lan-connect' : 'mdi:lan-disconnect';
+          }
+          return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        }
+      ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_drealine_roomview/index.html b/usage/custom_cards/custom_card_drealine_roomview/index.html
new file mode 100644
index 000000000..2290f2820
--- /dev/null
+++ b/usage/custom_cards/custom_card_drealine_roomview/index.html
@@ -0,0 +1,4689 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Drealine RoomView - Custom Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Drealine RoomView"
    
+
    Drealine RoomView 1
    
+
    Credits
    
+
      
+
    • Author: Drealine - 2022
      • 
+
    • Version: 1.0.0
      • 
+
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: "custom_card_drealine_roomview"
+  variables:
+    icon: "mdi:home-variant-outline"
+    name: "Entrée"
+    group_lights:
+    group_motions:
+    group_doors:
+    group_windows:
+    group_outlets:
+    group_tv:
+    group_water:
+    group_windows_shutters:
+    temperature:
+    humidity:
+
    
+
    Requirements
    
+
    No requirements at the moment.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    Iconmdi:bedroomnoIcon of the card
    NameTextnoTitle for the card (it's not showing, just for more readable)
    group_lightsgroup.lightsnoAny groups that contain lights
    group_motionsgroup.motionsnoAny groups that contain motions sensors
    group_doorsgroup.doorsnoAny groups that contain doors sensors
    group_windowsgroup.windowsnoAny groups that contain windows sensors
    group_outletsgroup.outletsnoAny groups that contain outlets
    group_tvgroup.tvnoAny groups that contain TV's
    group_watergroup.waternoAny groups that contain water sensors
    group_windows_shuttersgroup.windows_shuttersnoAny groups that contain windows shutters
    temperatureentity.temperature_saloonnoTemperature sensor or the room
    humidityentity.humidity_saloonnoHumidity sensor or the room
    
+
+
    
+Template Code
+
    custom_card_drealine_roomview.yaml
    ---
+custom_card_drealine_roomview:
+  template:
+    - "custom_card_drealine_roomview_style_root"
+  variables:
+    group_lights:
+    group_motions:
+    group_doors:
+    group_windows:
+    group_outlets:
+    group_tv:
+    group_water:
+    group_windows_shutters:
+    temperature:
+    humidity:
+  triggers_update: "all"
+  group_expand: true
+  custom_fields:
+    header:
+      card:
+        template:
+          - "custom_card_drealine_roomview_conf_header_root"
+        type: "custom:button-card"
+        custom_fields:
+          header_card:
+            card:
+              variables:
+                ulm_card_tap_action: "[[[ return variables.ulm_card_tap_action; ]]]"
+                ulm_input_select_option: "[[[ return variables.ulm_input_select_option; ]]]"
+                ulm_input_select: "[[[ return variables.ulm_input_select; ]]]"
+                ulm_card_tap_navigate_path: "[[[ return variables.ulm_card_tap_navigate_path; ]]]"
+              styles:
+                custom_fields:
+                  warning:
+                    - display: |
+                        [[[
+                          var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
+                          variables.group_windows, variables.group_outlets, variables.group_water];
+                          var arrayLength = groups.length;
+                          var count_unavailable = 0;
+                          for (var i = 0; i < arrayLength; i++){
+                            if(states[groups[i]]){
+                              if (states[groups[i]].attributes['entity_id']){
+                                states[groups[i]].attributes['entity_id'].forEach(function(entity){
+                                  if(states[entity] && states[entity].state == 'unavailable'){
+                                    count_unavailable += 1;
+                                  }
+                                });
+                              }
+                              else
+                              {
+                                if (states[groups[i]].state == 'unavailable'){
+                                  count_unavailable += 1;
+                                }
+                              }
+                            }
+                          }
+                          if (count_unavailable >= 1){
+                            return "auto";
+                          }
+                          else{
+                            return "none";
+                          }
+                        ]]]
+              icon: "[[[ return variables.icon ]]]"
+              name: |
+                [[[
+                  var temperature = '';
+                  temperature += '<ha-icon icon="mdi:thermometer" style="width: 17px; height: 17px; color: grey,1);"></ha-icon>';
+                  if (states[variables.temperature]){
+                    temperature += states[variables.temperature].state + states[variables.temperature].attributes.unit_of_measurement
+                  }
+                  else{
+                    temperature = "N/A"
+                  }
+                  return temperature;
+                ]]]
+              label: |
+                [[[
+                  var humidity = '';
+                  humidity += '<ha-icon icon="mdi:water-percent" style="width: 17px; height: 17px; color: grey,1);"></ha-icon>';
+                  if (states[variables.humidity]){
+                    humidity += states[variables.humidity].state + states[variables.humidity].attributes.unit_of_measurement
+                  }
+                  else{
+                    humidity = "N/A"
+                  }
+                  return humidity;
+                ]]]
+              template:
+                - "custom_card_drealine_roomview_conf_header"
+                - "ulm_actions_card"
+              type: "custom:button-card"
+    sensors:
+      card:
+        template:
+          - "custom_card_drealine_roomview_conf_sensors"
+        styles:
+          card:
+            - display: |
+                [[[
+                  var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
+                  variables.group_windows, variables.group_outlets, variables.group_water];
+                  var arrayLength = groups.length;
+                  var count_if_show_box_sensors = 0;
+                  for (var i = 0; i < arrayLength; i++) {
+                    if(states[groups[i]]){
+                      if (states[groups[i]].attributes['entity_id']){
+                        states[groups[i]].attributes['entity_id'].forEach(function(entity){
+                          if(states[entity] && states[entity].attributes.battery <= 20){
+                            count_if_show_box_sensors += 1;
+                          }
+                        });
+                      }
+                    }
+                  }
+                  for (var i = 0; i < arrayLength; i++) {
+                    if(states[groups[i]]){
+                      if(states[groups[i]].state == "on"){
+                        count_if_show_box_sensors += 1;
+                      }
+                    }
+
+                  }
+                  if (count_if_show_box_sensors >= 1){
+                    return "auto";
+                  }
+                  else
+                  {
+                    return "none";
+                  }
+                ]]]
+          custom_fields:
+            battery:
+              - display: |
+                  [[[
+                    var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
+                    variables.group_windows, variables.group_outlets, variables.group_water];
+                    var arrayLength = groups.length;
+                    var count_if_show_box_sensors = 0;
+                    for (var i = 0; i < arrayLength; i++) {
+                      if(states[groups[i]]){
+                        if (states[groups[i]].attributes['entity_id']){
+                          states[groups[i]].attributes['entity_id'].forEach(function(entity){
+                            if(states[entity] && states[entity].attributes.battery <= 20){
+                              count_if_show_box_sensors += 1;
+                            }
+                          });
+                        }
+                      }
+                    }
+                    if (count_if_show_box_sensors >= 1){
+                      return "auto";
+                    }
+                    else
+                    {
+                      return "none";
+                    }
+                  ]]]
+            doors:
+              - display: |
+                  [[[
+                    if (variables.group_doors){
+                      return "auto";
+                    }
+                    else
+                    {
+                      return "none";
+                    }
+                  ]]]
+            windows:
+              - display: |
+                  [[[
+                    if (variables.group_windows){
+                      return "auto";
+                    }
+                    else
+                    {
+                      return "none";
+                    }
+                  ]]]
+            motions:
+              - display: |
+                  [[[
+                    if (variables.group_motions){
+                      return "auto";
+                    }
+                    else
+                    {
+                      return "none";
+                    }
+                  ]]]
+            water:
+              - display: |
+                  [[[
+                    if (variables.group_water){
+                      return "auto";
+                    }
+                    else
+                    {
+                      return "none";
+                    }
+                  ]]]
+        type: "custom:button-card"
+        custom_fields:
+          doors:
+            card:
+              template:
+                - "custom_card_drealine_roomview_conf_icons_sensors"
+                - "custom_card_drealine_roomview_count_sensors"
+              icon: "mdi:door-open"
+              entity: "[[[ return variables.group_doors ]]]"
+              styles:
+                card:
+                  - display: >-
+                      [[[
+                        if (variables.group_doors && states[variables.group_doors].state == 'on'){
+                          return "auto";
+                        }
+                        else{
+                          return "none";
+                        }
+                      ]]]
+              type: "custom:button-card"
+          battery:
+            card:
+              template:
+                - "custom_card_drealine_roomview_conf_icons_sensors"
+                - "custom_card_drealine_roomview_style_count_batteries"
+              icon: "mdi:battery-20"
+              styles:
+                card:
+                  - display: >-
+                      [[[
+                        var count_alert = 0;
+                        var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
+                        variables.group_windows, variables.group_outlets, variables.group_water];
+                        var arrayLength = groups.length;
+                        for (var i = 0; i < arrayLength; i++) {
+                          if(states[groups[i]]){
+                            if (states[groups[i]].attributes['entity_id']){
+                              states[groups[i]].attributes['entity_id'].forEach(function(entity){
+                                if(states[entity] && states[entity].attributes.battery <= 20){
+                                  count_alert += 1;
+                                }
+                              });
+                            }
+                          }
+                        }
+                        if (count_alert >= 1){
+                          return "auto";
+                        }
+                        else{
+                          return "none";
+                        }
+                      ]]]
+                custom_fields:
+                  count_batteries:
+                    - display: |
+                        [[[
+                          var count_alert = 0;
+                          var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
+                          variables.group_windows, variables.group_outlets, variables.group_water];
+                          var arrayLength = groups.length;
+                          for (var i = 0; i < arrayLength; i++) {
+                            if(states[groups[i]]){
+                              if (states[groups[i]].attributes['entity_id']){
+                                states[groups[i]].attributes['entity_id'].forEach(function(entity){
+                                  if(states[entity] && states[entity].attributes.battery <= 20){
+                                    count_alert += 1;
+                                  }
+                                });
+                              }
+                            }
+                          }
+                          if (count_alert >= 1){
+                            return "auto";
+                          }
+                          else{
+                            return "none";
+                          }
+                        ]]]
+              custom_fields:
+                count_batteries: |
+                    [[[
+                      var battery = 0;
+                      var groups = [variables.group_lights, variables.group_motions,variables.group_doors,
+                      variables.group_windows, variables.group_outlets, variables.group_water];
+                      var arrayLength = groups.length;
+                      for (var i = 0; i < arrayLength; i++) {
+                        if(states[groups[i]]){
+                          if (states[groups[i]].attributes['entity_id']){
+                            states[groups[i]].attributes['entity_id'].forEach(function(entity){
+                              if(states[entity] && states[entity].attributes.battery <= 20){
+                                battery += 1;
+                              }
+                            });
+                          }
+                        }
+                      }
+                      return battery;
+                    ]]]
+              type: "custom:button-card"
+          windows:
+            card:
+              template:
+                - "custom_card_drealine_roomview_conf_icons_sensors"
+                - "custom_card_drealine_roomview_count_sensors"
+              icon: "mdi:window-closed-variant"
+              entity: "[[[ return variables.group_windows ]]]"
+              styles:
+                card:
+                  - display: >-
+                      [[[
+                        if (variables.group_windows && states[variables.group_windows].state == 'on'){
+                          return "auto";
+                        }
+                        else{
+                          return "none";
+                        }
+                      ]]]
+              type: "custom:button-card"
+          motions:
+            card:
+              template:
+                - "custom_card_drealine_roomview_conf_icons_sensors"
+              icon: "mdi:motion-sensor"
+              entity: "[[[ return variables.group_motions ]]]"
+              styles:
+                card:
+                  - display: >-
+                      [[[
+                        if (variables.group_motions && states[variables.group_motions].state == 'on'){
+                          return "auto";
+                        }
+                        else{
+                          return "none";
+                        }
+                      ]]]
+              type: "custom:button-card"
+          water:
+            card:
+              template:
+                - "custom_card_drealine_roomview_conf_icons_sensors"
+              icon: "mdi:water"
+              entity: "[[[ return variables.group_water ]]]"
+              styles:
+                card:
+                  - display: >-
+                      [[[
+                        if (variables.group_water && states[variables.group_water].state == 'on'){
+                          return "auto";
+                        }
+                        else{
+                          return "none";
+                        }
+                      ]]]
+              type: "custom:button-card"
+    devices:
+      card:
+        template: "custom_card_drealine_roomview_conf_devices_root"
+        type: "custom:button-card"
+        custom_fields:
+          lights:
+            card:
+              template:
+                - "custom_card_drealine_roomview_conf_devices"
+              icon: |
+                [[[
+                var count_unavailable = 0;
+                var count_entity = 0;
+                if (states[variables.group_lights]){
+                  if (states[variables.group_lights].attributes['entity_id']){
+                    states[variables.group_lights].attributes['entity_id'].forEach(function(entity){
+                      count_entity += 1;
+                      if(states[entity] && states[entity].state == 'unavailable'){
+                        count_unavailable += 1;
+                      }
+                    });
+                    if (count_entity == count_unavailable){
+                      return "mdi:lightbulb-alert";
+                    }
+                  }
+                  else return "mdi:exclamation"
+                  var state_lights = states[variables.group_lights].state;
+                  if (state_lights == 'on') return "mdi:lightbulb-group";
+                  else if (state_lights == 'off') return "mdi:lightbulb-group-off";
+                }
+                else{
+                  return "mdi:lightbulb-group-off"
+                }
+                ]]]
+              entity: "[[[ return variables.group_lights ]]]"
+              type: "custom:button-card"
+          windows_shutters:
+            card:
+              template:
+                - "custom_card_drealine_roomview_conf_devices"
+              icon: >
+                [[[
+                var count_unavailable = 0;
+                var count_entity = 0;
+                if (states[variables.group_windows_shutters]){
+                  if (states[variables.group_windows_shutters].attributes['entity_id']){
+                    states[variables.group_windows_shutters].attributes['entity_id'].forEach(function(entity){
+                      count_entity += 1;
+                      if(states[entity] && states[entity].state == 'unavailable'){
+                        count_unavailable += 1;
+                      }
+                    });
+                    if (count_entity == count_unavailable){
+                      return "mdi:window-shutter-alert";
+                    }
+                  }
+                  else return "mdi:exclamation"
+                  var state_windows = states[variables.group_windows_shutters].state;
+                  if (state_windows == 'on') return "mdi:window-shutter-open";
+                  else if (state_windows == 'off') return "mdi:window-shutter";
+                  else return "mdi:exclamation"
+                }
+                else{
+                  return "mdi:window-shutter"
+                }
+                ]]]
+              entity: "[[[ return variables.group_windows_shutters ]]]"
+              type: "custom:button-card"
+          outlets:
+            card:
+              template:
+                - "custom_card_drealine_roomview_conf_devices"
+              icon: >
+                [[[
+                var count_unavailable = 0;
+                var count_entity = 0;
+                if (states[variables.group_outlets]){
+                  if (states[variables.group_outlets].attributes['entity_id']){
+                    states[variables.group_outlets].attributes['entity_id'].forEach(function(entity){
+                      count_entity += 1;
+                      if(states[entity] && states[entity].state == 'unavailable'){
+                        count_unavailable += 1;
+                      }
+                    });
+                    if (count_entity == count_unavailable){
+                      return "mdi:exclamation-thick";
+                    }
+                  }
+                  var group_outlets = states[variables.group_outlets].state;
+                  if (group_outlets == 'on') return "mdi:power-plug";
+                  else if (group_outlets == 'off') return "mdi:power-plug-off";
+                  else return "mdi:exclamation"
+                }
+                else{
+                  return "mdi:power-plug-off"
+                }
+                ]]]
+              entity: "[[[ return variables.group_outlets ]]]"
+              type: "custom:button-card"
+          tv:
+            card:
+              template:
+                - "custom_card_drealine_roomview_conf_devices"
+              icon: >
+                [[[
+                  var count_unavailable = 0;
+                  var count_entity = 0;
+
+                  if (states[variables.group_tv]){
+                    if (states[variables.group_tv].attributes['entity_id']){
+                      states[variables.group_tv].attributes['entity_id'].forEach(function(entity){
+                        count_entity += 1;
+                        if(states[entity] && states[entity].state == 'unavailable'){
+                          count_unavailable += 1;
+                        }
+                      });
+                      if (count_entity == count_unavailable){
+                        return "mdi:exclamation-thick";
+                      }
+                    }
+                    var group_tv = states[variables.group_tv].state;
+                    if (group_tv == 'on') return "mdi:television";
+                    else if (group_tv == 'off') return "mdi:television-off";
+                    else return "mdi:exclamation"
+                  }
+                  else{
+                    return "mdi:television-off"
+                  }
+                ]]]
+              entity: "[[[ return variables.group_tv ]]]"
+              type: "custom:button-card"
+        styles:
+          custom_fields:
+            lights:
+              - flex: "auto"
+              - display: "auto"
+            windows_shutters:
+              - flex: "auto"
+              - display: |
+                  [[[
+                    if (variables.group_windows_shutters){
+                      return "auto";
+                    }
+                    else
+                    {
+                      return "none";
+                    }
+                  ]]]
+            outlets:
+              - flex: "auto"
+              - display: |
+                  [[[
+                    if (variables.group_outlets){
+                      return "auto";
+                    }
+                    else
+                    {
+                      return "none";
+                    }
+                  ]]]
+            tv:
+              - flex: "auto"
+              - display: |
+                  [[[
+                    if (variables.group_tv){
+                      return "auto";
+                    }
+                    else
+                    {
+                      return "none";
+                    }
+                  ]]]
+custom_card_drealine_roomview_conf_devices_root:
+  styles:
+    grid:
+      - display: "flex"
+      - gap: "2%"
+      - flex-wrap: "wrap"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - border-radius: "0%"
+custom_card_drealine_roomview_style_count_batteries:
+  styles:
+    custom_fields:
+      count_batteries:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "58%"
+        - top: "5%"
+        - height: "13px"
+        - width: "13px"
+        - font-weight: "900"
+        - font-size: "10px"
+        - line-height: "13px"
+        - color: "white"
+        - background-color: "rgba(var(--color-blue),0.75)"
+custom_card_drealine_roomview_count_sensors:
+  group_expand: true
+  show_name: false
+  styles:
+    custom_fields:
+      number_of_sensors:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "58%"
+        - top: "5%"
+        - height: "13px"
+        - width: "13px"
+        - font-weight: "900"
+        - font-size: "10px"
+        - line-height: "13px"
+        - color: "white"
+        - background-color: "rgba(var(--color-blue),0.75)"
+        - display: |
+            [[[
+              if ((entity !== undefined && states[entity.entity_id].state == 'on')){
+                return "auto";
+              }
+              else
+              {
+                return "none";
+              }
+            ]]]
+  custom_fields:
+    number_of_sensors: |
+        [[[
+          var count = 0;
+          if(entity !== undefined){
+            if (states[entity.entity_id].attributes['entity_id']){
+              states[entity.entity_id].attributes['entity_id'].forEach(function(entity){
+                if(states[entity] && states[entity].state == 'on'){
+                  count++;
+                }
+              });
+            }
+          }
+          return count;
+        ]]]
+custom_card_drealine_roomview_style_root:
+  styles:
+    grid:
+      - grid-template-areas: "'header' 'sensors' 'devices'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "6px"
+    card:
+      - border-radius: "20px"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+custom_card_drealine_roomview_conf_header_root:
+  styles:
+    grid:
+      - grid-template-areas: "'header_card'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content"
+      - column-gap: "7px"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+custom_card_drealine_roomview_conf_sensors:
+  styles:
+    grid:
+      - display: "flex"
+      - justify-content: "center"
+      - flex-wrap: "wrap"
+      - align-content: "center"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - margin: "0px"
+      - height: "auto"
+      - align-items: "center"
+      - border-radius: "0%"
+custom_card_drealine_roomview_conf_devices:
+  group_expand: true
+  color: "var(--google-grey)"
+  tap_action:
+    action: "none"
+  double_tap_action:
+    action: "toggle"
+  size: "20px"
+  show_icon: true
+  show_name: false
+  state:
+    - styles:
+        icon:
+          - color: "rgba(var(--color-yellow),1)"
+        label:
+          - color: "rgba(var(--color-yellow-text),1)"
+        name:
+          - color: "rgba(var(--color-yellow-text),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-yellow), 0.2)"
+        card:
+          - background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
+      value: "on"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.9)"
+      - height: "40px"
+    grid:
+      - grid-template-areas: "'i'"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "14px"
+      - min-width: "40px"
+    custom_fields:
+      number_of_devices:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "50.5%"
+        - top: "24%"
+        - height: "13px"
+        - width: "13px"
+        - font-size: "10px"
+        - font-weight: "900"
+        - line-height: "13px"
+        - background-color: "rgba(var(--color-blue),0.75)"
+        - color: "white"
+        - display: |
+            [[[
+              if ((entity !== undefined && states[entity.entity_id].state == 'on')){
+                return "auto";
+              }
+              else
+              {
+                return "none";
+              }
+            ]]]
+  custom_fields:
+    number_of_devices: |
+        [[[
+          var count = 0;
+          if(entity !== undefined){
+            if (states[entity.entity_id].attributes['entity_id']){
+              states[entity.entity_id].attributes['entity_id'].forEach(function(entity){
+                if(states[entity] && states[entity].state == 'on'){
+                  count++;
+                }
+              });
+            }
+          }
+          return count;
+        ]]]
+custom_card_drealine_roomview_conf_header:
+  color: "var(--google-grey)"
+  show_icon: true
+  show_name: true
+  show_label: true
+  size: "20px"
+  custom_fields:
+    warning: |
+      [[[
+        return `<ha-icon icon="mdi:exclamation-thick" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
+      ]]]
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+      - transform: "scale(1.2)"
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bold"
+      - font-size: "12px"
+      - filter: "opacity(50%)"
+      - margin-left: "10px"
+    name:
+      - align-self: "start"
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "12px"
+      - margin-top: "2px"
+      - margin-left: "10px"
+      - filter: "opacity(50%)"
+    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 n' 'i l'"
+      - grid-template-columns: "min-content auto"
+      - grid-template-rows: "min-content"
+      - position: "relative"
+    card:
+      - border-radius: "21px 8px 8px 21px"
+      - box-shadow: "none"
+      - padding: "0px"
+    custom_fields:
+      warning:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "28px"
+        - top: "0px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: "rgba(var(--color-red),1)"
+custom_card_drealine_roomview_conf_icons_sensors:
+  show_name: false
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.9)"
+      - transform: "scale(1)"
+      - width: "20px"
+    img_cell:
+      - height: "auto"
+      - width: "35px"
+    grid:
+      - grid-template-areas: "'i'"
+      - grid-template-columns: "1fr"
+    card:
+      - background: "transparent"
+      - box-shadow: "none"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_eraycetinay_elapsed_time/index.html b/usage/custom_cards/custom_card_eraycetinay_elapsed_time/index.html
new file mode 100644
index 000000000..18bb44089
--- /dev/null
+++ b/usage/custom_cards/custom_card_eraycetinay_elapsed_time/index.html
@@ -0,0 +1,3822 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Elapsed Time Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Elapsed Time"
    
+
    This is a custom-card that works with a input_datetime input.
+Template checks the has_date and has_time attributes and creates a label in x days x hours x minutes ago format.
    
+
      
+
    • x days only included if has_date is true (datetime object)
      • 
+
    • x hours only included if has_time is true (datetime and time objects)
      • 
+
    • x minutes only included if has_time is true and has_date is false (time object)
      • 
+
    
+
    Generic
    
+
    Credits
    
+
    Author: eraycetinay - 2022
+Version: 0.0.1
    
+
    Changelog
    
+
    
+  0.0.1
+  Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: "custom_card_eraycetinay_elapsed_time"
+  entity: input_datetime.cat_litter
+  name: "Cat Litter"
+
    
+
    
+Template Code
+
    custom_card_eraycetinay_elapsed_time.yaml
    ---
+custom_card_eraycetinay_elapsed_time:
+  template:
+    - "ulm_custom_card_eraycetinay_elapsed_time_language_variables"
+    - "icon_info_bg"
+  show_label: true
+  show_name: true
+  triggers_update:
+    - "[[[ return entity.entity_id ]]]"
+  label: |
+    [[[
+      let endDate = new Date();
+      let today = new Date();
+      if(entity.attributes.has_date) {
+        today = new Date(entity.state.replace(" ", "T"));
+      } else { 
+        today = new Date().setHours(entity.attributes.hour,entity.attributes.minute,entity.attributes.second);
+      }
+
+      const days = parseInt((endDate - today) / (1000 * 60 * 60 * 24));
+      const hours = parseInt(Math.abs(endDate - today) / (1000 * 60 * 60) % 24);
+      const minutes = parseInt(Math.abs(endDate - today) / (1000 * 60) % 60);
+
+      let text = '';
+      if(entity.attributes.has_date) {
+        text += days > 0 ? days + ' ' + (days > 1 ? variables.ulm_custom_card_eraycetinay_elapsed_time_days : variables.ulm_custom_card_eraycetinay_elapsed_time_day) +' ' : '';
+      }
+      if(entity.attributes.has_time) {
+        text += hours > 0 ? hours + ' ' + (hours > 1 ? variables.ulm_custom_card_eraycetinay_elapsed_time_hours : variables.ulm_custom_card_eraycetinay_elapsed_time_hour) +' ' : '';
+      }
+      if(entity.attributes.has_time && !entity.attributes.has_date) {
+        text += minutes > 0 ? minutes + ' ' + (minutes > 1 ? variables.ulm_custom_card_eraycetinay_elapsed_time_minutes : variables.ulm_custom_card_eraycetinay_elapsed_time_minute) +' ' : '';
+      }
+
+      text = text.length ? text += variables.ulm_custom_card_eraycetinay_elapsed_time_ago : variables.ulm_custom_card_eraycetinay_elapsed_time_justnow;
+      return text;
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_eraycetinay_lock/index.html b/usage/custom_cards/custom_card_eraycetinay_lock/index.html
new file mode 100644
index 000000000..3a087ff58
--- /dev/null
+++ b/usage/custom_cards/custom_card_eraycetinay_lock/index.html
@@ -0,0 +1,4018 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Lock Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Lock"
    
+
    This is a custom-card that works in switch logic with a lock entity. Card structure uses lock, unlock (optional open) actions and lock,unlock,locking,unlocking, jammed states.
    
+
    Generic
    
+
    Credits
    
+
    Author: eraycetinay - 2022
+Version: 0.0.3
    
+
    Changelog
    
+
    
+  0.0.3
+  
      
+    
      Contributor: Sisimomo - 2022-06-14
      
+    
    • Now can displays a warning when the battery is low.
      • 
+    
    • Now can displays a warning when the door is lock but the door is still open.
      • 
+    
    • Code refactoring to fit framework structure.
      • 
+    
    • Documentation clean up.
      • 
+    
    • Code clean up.
      • 
+  
    
+
    
+
    
+  0.0.2
+  Added option to only use lock.open
+
    
+
    
+  0.0.1
+  Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  entity: lock.door_lock
+  template: "custom_card_eraycetinay_lock"
+  name: "Door Lock"
+  variables:
+    ulm_custom_card_eraycetinay_lock_tap_control: true
+    ulm_custom_card_eraycetinay_lock_battery_level: sensor.door_battery
+    ulm_custom_card_eraycetinay_lock_door_open: binary_sensor.door_open
+  triggers_update:
+    - "sensor.door_battery"
+    - "binary_sensor.door_open"
+
    
+
    Variables
    
+
+  
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+    
+  
+
    VariableExampleDefaultRequiredExplanation
    ulm_custom_card_eraycetinay_lock_tap_controltruefalsenoLock/Unlock on tap action
    ulm_custom_card_eraycetinay_lock_only_opentruefalsenoOnly use the card to open the door (always sends lock.open on tap)
    ulm_custom_card_eraycetinay_lock_battery_levelsensor.door_batterynoDisplays a warning when the battery is low.
    ulm_custom_card_eraycetinay_lock_battery_warning2520noAt what battery percentage should the low battery warning appear.
    ulm_custom_card_eraycetinay_lock_battery_warning_low105noAt what battery percentage should the very low battery warning appear.
    ulm_custom_card_eraycetinay_lock_door_openbinary_sensor.door_opennoDisplays a warning when the door is lock but the door is still open.
    ulm_custom_card_eraycetinay_lock_battery_sensor_binarytruefalsenoSet to true if using a binary battery sensor. Will ignore battery_warning percentage settings
    ulm_custom_card_eraycetinay_lock_battery_sensor_binary_low_stateoffonnoSet whether the binary sensor turns to on or off when in low state
    
+
+
    
+Template Code
+
    custom_card_eraycetinay_lock.yaml
    ---
+custom_card_eraycetinay_lock:
+  template:
+    - "icon_info_bg"
+    - "ulm_translation_engine"
+    - "custom_card_eraycetinay_lock_language_variables"
+  variables:
+    ulm_custom_card_eraycetinay_lock_battery_warning: 20
+    ulm_custom_card_eraycetinay_lock_battery_warning_low: 5
+    ulm_custom_card_eraycetinay_lock_battery_sensor_binary: false
+    ulm_custom_card_eraycetinay_lock_battery_sensor_binary_low_state: "on"
+    ulm_custom_card_eraycetinay_lock_only_open: false
+  tap_action:
+    action: |
+      [[[
+        return variables.ulm_custom_card_eraycetinay_lock_tap_control ? "perform-action" : "more-info";
+      ]]]
+    # only related with perform-action
+    perform_action: |
+      [[[
+        if(variables.ulm_custom_card_eraycetinay_lock_tap_control){
+          if(variables.ulm_custom_card_eraycetinay_lock_only_open){
+            return "lock.open";
+          } else {
+            if (entity.state == "locked"){
+                return "lock.unlock";
+            } else if (entity.state == "unlocked"){
+              return "lock.lock";
+            }
+          }
+        }
+      ]]]
+    # only related with perform-action
+    target:
+      entity_id: |
+        [[[ return entity.entity_id; ]]]
+  show_label: true
+  show_name: true
+  triggers_update:
+    - "[[[ return entity.entity_id; ]]]"
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  state:
+    - operator: "template"
+      value: |
+        [[[ return entity.state == ("unlocked" || "open" || "opened"); ]]]
+      styles:
+        icon:
+          - color: "rgba(var(--color-yellow),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-yellow), 0.2)"
+    - operator: "template"
+      value: |
+        [[[ return entity.state == "locked" || "closed"; ]]]
+      styles:
+        icon:
+          - color: "rgba(var(--color-green),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-green), 0.2)"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+    img_cell:
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "50%"
+      - place-self: "center"
+      - width: "42px"
+      - height: "42px"
+    grid:
+      - position: "relative"
+    custom_fields:
+      notification_locked_and_opened:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "28px"
+        - top: "-6px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: "[[[ return 'rgba(var(--color-red),1)'; ]]]"
+      notification_battery:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "-6px"
+        - top: "-6px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: |
+            [[[
+              if (variables.ulm_custom_card_eraycetinay_lock_battery_level !== undefined) {
+                if (variables.ulm_custom_card_eraycetinay_lock_battery_sensor_binary) {
+                  if (states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state == variables.ulm_custom_card_eraycetinay_lock_battery_sensor_binary_low_state) {
+                    return "rgba(var(--color-red),1)";
+                  }
+                } else {
+                  if (states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state <= variables.ulm_custom_card_eraycetinay_lock_battery_warning_low) {
+                    return "rgba(var(--color-red),1)";
+                  } else if (states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state <= variables.ulm_custom_card_eraycetinay_lock_battery_warning) {
+                    return "rgba(var(--color-yellow),1)";
+                  }
+                }
+              }
+            ]]]
+  custom_fields:
+    notification_locked_and_opened: >
+      [[[
+          if (variables.ulm_custom_card_eraycetinay_lock_door_open !== undefined && (entity.state === "locked" && states[variables.ulm_custom_card_eraycetinay_lock_door_open].state === "on")) {
+            return `<span title="${variables.ulm_custom_card_eraycetinay_lock_locked_and_opened}"><ha-icon icon="mdi:door-open" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon></span>`;
+          }
+      ]]]
+    notification_battery: >
+      [[[
+          if (variables.ulm_custom_card_eraycetinay_lock_battery_level !== undefined) {
+            if (variables.ulm_custom_card_eraycetinay_lock_battery_sensor_binary) {
+              if (states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state == variables.ulm_custom_card_eraycetinay_lock_battery_sensor_binary_low_state) {
+                return `<span title="${variables.ulm_custom_card_eraycetinay_lock_battery_is_low}">
+                          <ha-icon icon="mdi:battery-low" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>
+                        </span>`;
+              }
+            } else {
+              if (variables.ulm_custom_card_eraycetinay_lock_battery_warning >= states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state) {
+                return `<span title="${variables.ulm_custom_card_eraycetinay_lock_battery_is_at} ${states[variables.ulm_custom_card_eraycetinay_lock_battery_level].state}%">
+                          <ha-icon icon="mdi:battery-low" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>
+                        </span>`;
+              }
+            }
+          }
+      ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_esh_room/index.html b/usage/custom_cards/custom_card_esh_room/index.html
new file mode 100644
index 000000000..7c8990118
--- /dev/null
+++ b/usage/custom_cards/custom_card_esh_room/index.html
@@ -0,0 +1,4321 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom Card Room - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom Card "Room"
    
+
    example-image-light
+example-image-dark
    
+
    Credits
    
+
      
+
    • Authors:
        
+
      • Everything Smart Home - 2022
        • 
+
      • mpeterson
        • 
+
      • rensknoors
        • 
+
      
+
      • 
+
    • Full credit to user bms on the forum, they created the design and base of it in full, EverythingSmartHome put it into a PR as the basis
      • 
+
    • beasthouse and basbruss on the EverythingSmartHome discord channel for emoji/humidity customization
      • 
+
    • mpeterson added support for a switch to control climate and also to remove the need to have an entity associated
      • 
+
    • Version: 2.1.1
      • 
+
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
    
+2.0.0
+Breaking changes!
+This change introduces two variables to allow the display of the card with no buttons, one for light, one for climate or both for light and climate.
+It also now allows the use of no entity at all.
+
    
+
    
+2.0.1
+Fixes text overflow issue over the climate button.
+
    
+
    
+2.1.0
+- It now uses the `ulm_actions_card` template, which allows the usage of the popups wherever custom actions are set as `popup`.
+- Allow overflowing label and text to the climate button area whenever there is no climate button.
+
    
+
    
+2.1.1
+Add support for the new popup framework while maintaining backwards compatibility with the old one.
+
    
+
    
+2.2.0
+Introduces a new variable that lets you set the card background to the color of a light entity.
+
    
+
+
    Description
    
+
    This is an alternative room card to the standard one that is more rectangular than square.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityNoThe entity to represent on the room icon
    NameYesName of the room to display
    iconNoThe icon to show
    tap_actionNoThe action to perform when tapping
    labelNoThe label to display information, this can be a template or static text
    ulm_custom_card_esh_room_light_entityNoThe entity to use for the light button
    ulm_custom_card_esh_room_climate_entityNoThe entity to use for the climate button
    ulm_card_esh_room_light_icon_onNoCustomize the light ON icon
    ulm_card_esh_room_light_icon_offNoCustomize the light OFF icon
    ulm_card_light_enable_popupfalseNoEnable popup_light
    ulm_card_thermostat_enable_popupfalseNoEnable popup_thermostat
    ulm_card_dynamic_colorfalseNoEnables dynamic background color (requires ulm_custom_card_esh_room_light_entity)
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template:
+    - card_esh_room
+    - yellow_on
+  name: Bathroom
+  entity: light.bathroom_lights
+  icon: mdi:bathtub
+  tap_action:
+    action: navigate
+    navigation_path: "bathroom"
+  variables:
+    ulm_custom_card_esh_room_light_entity: light.bathroom_lights
+    ulm_custom_card_esh_room_climate_entity: climate.bathroom
+  label: '[[[ return states["sensor.room_temperature"].state + "°C" ]]]'
+
    
+
    Customizations
    
+
    To add both temperature and humidity (as shown below) to the card, replace the label section with this code:
+image
    
+
    label: >
+  [[[
+    return "🌡️ " + states['sensor.temperature'].state + " °C" + " 💧 " + states['sensor.humidity'].state + " %"
+  ]]]
+
    
+
    You can also replace 🌡️ and 💧 with any desired Emoji, and sensor.room_temperature/sensor.room_humidity to match any of your HA entities you would like to be displayed. Ensure that the correct units of measurement are also updated (or removed) to match your custom entities. In this example they are °C and %.
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_esh_room.yaml
    ---
+card_esh_room:
+  tap_action:
+    action: "more-info"
+  color: "var(--google-grey-500)"
+  show_icon: true
+  show_name: true
+  show_label: true
+  template:
+    - "ulm_translation_engine"
+  size: "20px"
+  variables:
+    ulm_custom_card_esh_room_light_entity: null
+    ulm_custom_card_esh_room_climate_entity: null
+    ulm_card_thermostat_enable_popup: false
+    ulm_card_light_enable_popup: false
+    ulm_card_dynamic_color: false
+    ulm_card_esh_room_light_icon_on: "mdi:lightbulb"
+    ulm_card_esh_room_light_icon_off: "mdi:lightbulb-off"
+  label: >-
+    [[[
+      var label_entity = variables.ulm_custom_card_esh_room_light_entity
+        ? states[variables.ulm_custom_card_esh_room_light_entity]
+        : entity;
+      if (!label_entity) {
+        return "<br />";
+      } else if (label_entity.state == "on") {
+        var bri = Math.round(label_entity.attributes.brightness / 2.55);
+        return (bri ? bri + "%" : variables.ulm_translation_state);
+      } else {
+        return variables.ulm_translation_state;
+      }
+    ]]]
+  styles:
+    card:
+      - border-radius: "20px"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - background-color: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity) {
+              var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;
+              if (states[variables.ulm_custom_card_esh_room_light_entity].state == "on") {
+                if (color && variables.ulm_card_dynamic_color) {
+                  return 'rgba(' + color + ', 0.2)';
+                }
+                return 'rgba(var(--color-background-yellow), 0.2)';
+              }
+            }
+            return 'var(--ha-card-background, var(--card-background-color, white))';
+          ]]]
+    grid:
+      - grid-template-areas: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {
+              return "'i light' 'n climate' 'l climate'";
+            } else if (variables.ulm_custom_card_esh_room_light_entity) {
+              return "'i light' 'n n' 'l l'";
+            } else if (variables.ulm_custom_card_esh_room_climate_entity) {
+              return "'i .' 'n climate' 'l climate'";
+            } else {
+              return "'i .' 'n n' 'l l'";
+            }
+          ]]]
+      - grid-template-columns: "1fr 1fr"
+      - grid-template-rows: "min-content"
+    icon:
+      - filter: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity
+                && states[variables.ulm_custom_card_esh_room_light_entity].state == "on"
+                && variables.ulm_card_dynamic_color) {
+              return "contrast(0.6) saturate(1.7)";
+            }
+          ]]]
+      - color: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity) {
+              var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;
+              if (states[variables.ulm_custom_card_esh_room_light_entity].state == "on") {
+                if (color && variables.ulm_card_dynamic_color) {
+                  return 'rgba(' + color + ', 1)';
+                }
+                return 'rgba(var(--color-yellow), 1)';
+              }
+            }
+            return 'rgba(var(--color-theme), 0.2)';
+          ]]]
+    img_cell:
+      - border-radius: "50%"
+      - place-self: "flex-start"
+      - width: "42px"
+      - height: "42px"
+      - margin-left: "12px"
+      - background-color: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity) {
+              var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;
+              if (states[variables.ulm_custom_card_esh_room_light_entity].state == "on") {
+                if (color && variables.ulm_card_dynamic_color) {
+                  return 'rgba(' + color + ', 0.3)';
+                }
+                return 'rgba(var(--color-yellow), 0.2)';
+              }
+            }
+            return 'rgba(var(--color-theme), 0.05)';
+          ]]]
+    name:
+      - align-self: "end"
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "14px"
+      - margin-left: "12px"
+      - margin-top: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {
+              return "8px";
+            } else if (variables.ulm_custom_card_esh_room_light_entity) {
+              return "12px";
+            } else if (variables.ulm_custom_card_esh_room_climate_entity) {
+              return "8px";
+            } else {
+              return "12px";
+            }
+          ]]]
+      - max-width: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {
+              return "85%";
+            } else if (variables.ulm_custom_card_esh_room_light_entity) {
+              return "100%";
+            } else if (variables.ulm_custom_card_esh_room_climate_entity) {
+              return "85%";
+            } else {
+              return "100%";
+            }
+          ]]]
+      - color: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity) {
+              var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;
+              if (states[variables.ulm_custom_card_esh_room_light_entity].state == "on") {
+                if (color && variables.ulm_card_dynamic_color) {
+                  return 'rgba(' + color + ', 1)';
+                }
+                return 'rgba(var(color-yellow-text), 1)';
+              }
+              return 'rgba(var(--color-theme), 0.6)';
+            }
+            return 'rgba(var(--color-theme), 0.6)';
+          ]]]
+      - filter: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity
+                && states[variables.ulm_custom_card_esh_room_light_entity].state == "on"
+                && variables.ulm_card_dynamic_color) {
+              return "contrast(0.6) saturate(1.7)";
+            }
+          ]]]
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+      - margin-bottom: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {
+              return "0px";
+            } else if (variables.ulm_custom_card_esh_room_light_entity) {
+              return "3px";
+            } else if (variables.ulm_custom_card_esh_room_climate_entity) {
+              return "0px";
+            } else {
+              return "3px";
+            }
+          ]]]
+      - max-width: >-
+          [[[
+            if (variables.ulm_custom_card_esh_room_light_entity && variables.ulm_custom_card_esh_room_climate_entity) {
+              return "85%";
+            } else if (variables.ulm_custom_card_esh_room_light_entity) {
+              return "100%";
+            } else if (variables.ulm_custom_card_esh_room_climate_entity) {
+              return "85%";
+            } else {
+              return "100%";
+            }
+          ]]]
+    state:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+    custom_fields:
+      light:
+        - display: >
+            [[[
+              if (variables.ulm_custom_card_esh_room_light_entity) {
+                  return "block";
+              } else {
+                  return "none";
+              }
+            ]]]
+      climate:
+        - display: >
+            [[[
+              if (variables.ulm_custom_card_esh_room_climate_entity) {
+                return "block";
+              } else {
+                return "none";
+              }
+            ]]]
+  custom_fields:
+    light:
+      card:
+        entity: "[[[ return variables.ulm_custom_card_esh_room_light_entity ]]]"
+        name: "[[[ return name ]]]"
+        state:
+          - value: "on"
+            icon: "[[[ return variables.ulm_card_esh_room_light_icon_on; ]]]"
+            styles:
+              icon:
+                - color: "rgba(var(--color-yellow), 1)"
+              img_cell:
+                - background-color: >-
+                    [[[
+                      if (variables.ulm_custom_card_esh_room_light_entity) {
+                        var color = states[variables.ulm_custom_card_esh_room_light_entity].attributes.rgb_color;
+                        if (color && variables.ulm_card_dynamic_color) {
+                          return 'rgba(' + color + ', 0.3)';
+                        }
+                      }
+                      return 'rgba(var(--color-yellow), 0.2)';
+                    ]]]
+          - value: "off"
+            icon: "[[[ return variables.ulm_card_esh_room_light_icon_off; ]]]"
+        type: "custom:button-card"
+        template:
+          - "widget_icon"
+          - "ulm_actions_card"
+          - "ulm_custom_actions"
+        variables: >
+          [[[
+            let vars = {};
+            vars.ulm_card_light_enable_popup = variables.ulm_card_light_enable_popup;
+            if (variables.ulm_card_light_enable_popup) {
+              vars.ulm_custom_popup = {
+                'template': 'popup_light_brightness',
+                'popup_variables': {
+                  'ulm_popup_light_entity': variables.ulm_custom_card_esh_room_light_entity,
+                }
+              };
+            }
+            return vars;
+          ]]]
+    climate:
+      card:
+        entity: "[[[ return variables.ulm_custom_card_esh_room_climate_entity ]]]"
+        name: "[[[ return name ]]]"
+        state:
+          - value: "auto"
+            icon: "mdi:autorenew"
+            styles:
+              icon:
+                - color: "rgba(var(--color-green),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-green), 0.2)"
+          - value: "cool"
+            icon: "mdi:snowflake"
+            styles:
+              icon:
+                - color: "rgba(var(--color-blue),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-blue), 0.2)"
+          - value: "heat"
+            icon: "mdi:fire"
+            styles:
+              icon:
+                - color: "rgba(var(--color-red),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-red), 0.2)"
+          - value: "dry"
+            icon: "mdi:water"
+            styles:
+              icon:
+                - color: "rgba(var(--color-yellow),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-yellow), 0.2)"
+          - value: "heat_cool"
+            icon: "mdi:sun-snowflake"
+            styles:
+              icon:
+                - color: "rgba(var(--color-purple),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-purple), 0.2)"
+          - value: "fan_only"
+            icon: "mdi:fan"
+            styles:
+              icon:
+                - color: "rgba(var(--color-green),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-green), 0.2)"
+          - value: "off"
+            icon: "mdi:snowflake-off"
+        type: "custom:button-card"
+        styles:
+          card:
+            - margin-top: "5px"
+        template:
+          - "widget_icon"
+          - "ulm_actions_card"
+          - "ulm_custom_actions"
+        variables: >
+          [[[
+            let vars = {};
+            vars.ulm_card_thermostat_enable_popup = variables.ulm_card_light_enable_popup;
+            if (variables.ulm_card_thermostat_enable_popup) {
+              vars.ulm_custom_popup = {
+                'template': 'popup_thermostat_temperature',
+                'popup_variables': {
+                  'ulm_popup_thermostat_entity': variables.ulm_custom_card_esh_room_climate_entity,
+                }
+              };
+            }
+            return vars;
+          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_esh_welcome/index.html b/usage/custom_cards/custom_card_esh_welcome/index.html
new file mode 100644
index 000000000..434c074d0
--- /dev/null
+++ b/usage/custom_cards/custom_card_esh_welcome/index.html
@@ -0,0 +1,4437 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom Card Welcome Navigation - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom Card "Welcome Navigation"
    
+
    example-image-light
+example-image-dark
    
+
    Credits
    
+
      
+
    • Author: Everything Smart Home - 2022
      • 
+
    • Credits to the welcome scenes card as the basis
      • 
+
    • Version: 1.1.0
      • 
+
    
+
    Changelog
    
+
    
+1.1.0
+  
      
+    
      Contributor: Sisimomo - 2022-06-12
      
+    
    • Now support from 0-5 navigation pill.
      • 
+    
    • Added dynamic nav pill size.
      • 
+    
    • Code refactoring to fit framework structure.
      • 
+    
    • Code clean up.
      • 
+  
    
+
    
+
+
    
+1.0.0
+Initial release
+
    
+
+
    Description
    
+
    This is a welcome card based on the welcome scenes card but replaces the scenes for page navigation instead.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_card_esh_welcome_collapseNoEnables the collapse function. 
     requires an input_boolean to track the state
    ulm_weatherYesThis is your weather provider. 
     Example: weather.your_provider
    entity_YesSupport almost all types of entities 
     Scenes do always show as off
    icon_YesThe icon to show
    name_YesThe name to show
    color_YesColor of the icon 
     Can choose between: blue, red, green, yellow, pink, purple 
    nav_YesThe page/view to navigate to
    
+
    Collapse
    
+
    
+
    Note
    
+
    
+
    This feature is fully optional. It requires some more manual configuration!
+You need to create a input_boolean in HA to track the state. See Docs.
+Furthermore, you need to add the input_boolean to the variable ulm_card_esh_welcome_collapse and to either the entity or triggers_update to make sure it directly refreshes the state.
    
+
    
+
    Warning
    
+
    
+
    Do not use triggers_update: "all"! This will lead to unwanted behavior with the random colors generator.
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: "card_esh_welcome"
+  triggers_update: "input_boolean.welcome_toggle"
+  variables:
+    ulm_card_esh_welcome_collapse: input_boolean.welcome_toggle
+    ulm_weather: "weather.your_weather"
+    entity_1:
+      nav: "house"
+      icon: "mdi:home"
+      name: "House"
+      color: "blue"
+    entity_2:
+      nav: "lights"
+      icon: "mdi:lightbulb"
+      name: "Lights"
+      color: "yellow"
+    entity_3:
+      nav: "security"
+      icon: "mdi:shield"
+      name: Secure
+      color: "green"
+    entity_4:
+      nav: "network"
+      icon: "mdi:nas"
+      name: Lab
+      color: "purple"
+    entity_5:
+      nav: "network"
+      icon: "mdi:flask"
+      name: Lab
+      color: "red"
+
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_esh_welcome.yaml
    ---
+card_esh_welcome:
+  template: "ulm_language_variables"
+  variables:
+    ulm_weather: "[[[ return variables.ulm_weather]]]"
+    entity_1:
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_2:
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_3:
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_4:
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_5:
+      color: >
+        [[[
+          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+  show_icon: false
+  show_label: true
+  show_name: false
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
+              return "\'item1\' \'item2\' ";
+            } else {
+              return "\'item1\' \'item2\' \'item3\'";
+            }
+          ]]]
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+      - row-gap: "0px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "10px"
+      - cursor: "default"
+      - "--mdc-ripple-press-opacity": 0   # prevent click animation
+    custom_fields:
+      item3:
+        - display: >
+            [[[
+              if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
+                return "none";
+              } else {
+                return "block";
+              }
+            ]]]
+      item4:
+        - display: >
+            [[[
+              if(variables.ulm_card_esh_welcome_collapse && states[variables.ulm_card_esh_welcome_collapse].state == 'on'){
+                return "none";
+              } else {
+                return "block";
+              }
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "card_esh_welcome_topbar"
+        variables:
+          ulm_card_esh_welcome_collapse: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
+          ulm_weather: "[[[ return variables.ulm_weather]]]"
+        styles:
+          card:
+            - border-radius: "none"
+            - box-shadow: "none"
+            - padding: "4px"
+            - margin-left: "relative"
+            - cursor: "default"
+            - "--mdc-ripple-press-opacity": 0   # prevent click animation
+    item2:
+      card:
+        type: "custom:button-card"
+        show_icon: false
+        show_label: false
+        show_name: true
+        show_entity_picture: false
+        name: |
+          [[[
+            var today = new Date();
+            var time = today.getHours()
+            let welcome = '';
+            if (time >= '18'){
+              welcome = variables.ulm_evening;
+            } else if (time >= '12'){
+              welcome = variables.ulm_afternoon;
+            } else if (time >= '5'){
+              welcome = variables.ulm_morning;
+            } else {
+              welcome = variables.ulm_hello;
+            }
+            return welcome + ', ' + '   <br>' + user.name + '!';
+          ]]]
+        styles:
+          name:
+            - align-self: "start"
+            - justify-self: "start"
+            - font-weight: "bold"
+            - font-size: "24px"
+            - margin-left: "16px"
+          grid:
+            - grid-template-areas: "'i n' 'i l'"
+            - grid-template-columns: "min-content auto"
+            - grid-template-rows: "min-content min-content"
+            - text-align: "start"
+          card:
+            - box-shadow: "none"
+            - padding-bottom: "8px"
+            - cursor: "default"
+            - "--mdc-ripple-press-opacity": 0   # prevent click animation
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "card_esh_welcome_nav"
+        styles:
+          card:
+            - border-radius: "none"
+            - box-shadow: "none"
+            - padding: "4px"
+            - cursor: "default"
+            - "--mdc-ripple-press-opacity": 0   # prevent click animation
+        variables:
+          entity_1: "[[[ return variables.entity_1 ]]]"
+          entity_2: "[[[ return variables.entity_2 ]]]"
+          entity_3: "[[[ return variables.entity_3 ]]]"
+          entity_4: "[[[ return variables.entity_4 ]]]"
+          entity_5: "[[[ return variables.entity_5 ]]]"
+
+card_esh_welcome_title:
+  tap_action:
+    action: "none"
+  show_icon: false
+  show_label: true
+  show_name: true
+  styles:
+    label:
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "1rem"
+      - opacity: "0.4"
+    name:
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "20px"
+    grid:
+      - grid-template-areas: "'n' 'l'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - background-color: "rgba(0,0,0,0)"
+      - box-shadow: "none"
+      - height: "auto"
+      - width: "auto"
+      - margin-top: "-10px"
+      - margin-left: "16px"
+      - margin-bottom: "-15px"
+      - cursor: "default"
+      - "--mdc-ripple-press-opacity": 0   # prevent click animation
+
+card_esh_welcome_nav:
+  show_icon: false
+  show_name: true
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: |
+          [[[
+            return "'" + [(variables.entity_1?.nav ? 'item1' : ''),
+                        (variables.entity_2?.nav ? 'item2' : ''),
+                        (variables.entity_3?.nav ? 'item3' : ''),
+                        (variables.entity_4?.nav ? 'item4' : ''),
+                        (variables.entity_5?.nav ? 'item5' : '')].join(' ') + "'";
+          ]]]
+      - grid-template-columns: |
+          [[[
+            return [(variables.entity_1?.nav ? '1fr' : ''),
+                    (variables.entity_2?.nav ? '1fr' : ''),
+                    (variables.entity_3?.nav ? '1fr' : ''),
+                    (variables.entity_4?.nav ? '1fr' : ''),
+                    (variables.entity_5?.nav ? '1fr' : '')].join(' ');
+          ]]]
+      - grid-template-rows: "min-content"
+      - justify-items: "center"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - overflow: "visible"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "card_esh_welcome_pill_nav"
+        variables:
+          number_of_nav_pills: |
+            [[[
+              return [variables.entity_1?.nav,
+                      variables.entity_2?.nav,
+                      variables.entity_3?.nav,
+                      variables.entity_4?.nav,
+                      variables.entity_5?.nav].filter(el => el !== undefined).length;
+            ]]]
+          entity: "[[[ return variables.entity_1; ]]]"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "card_esh_welcome_pill_nav"
+        variables:
+          number_of_nav_pills: |
+            [[[
+              return [variables.entity_1?.nav,
+                      variables.entity_2?.nav,
+                      variables.entity_3?.nav,
+                      variables.entity_4?.nav,
+                      variables.entity_5?.nav].filter(el => el !== undefined).length;
+            ]]]
+          entity: "[[[ return variables.entity_2; ]]]"
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "card_esh_welcome_pill_nav"
+        variables:
+          number_of_nav_pills: |
+            [[[
+              return [variables.entity_1?.nav,
+                      variables.entity_2?.nav,
+                      variables.entity_3?.nav,
+                      variables.entity_4?.nav,
+                      variables.entity_5?.nav].filter(el => el !== undefined).length;
+            ]]]
+          entity: "[[[ return variables.entity_3; ]]]"
+    item4:
+      card:
+        type: "custom:button-card"
+        template: "card_esh_welcome_pill_nav"
+        variables:
+          number_of_nav_pills: |
+            [[[
+              return [variables.entity_1?.nav,
+                      variables.entity_2?.nav,
+                      variables.entity_3?.nav,
+                      variables.entity_4?.nav,
+                      variables.entity_5?.nav].filter(el => el !== undefined).length;
+            ]]]
+          entity: "[[[ return variables.entity_4; ]]]"
+    item5:
+      card:
+        type: "custom:button-card"
+        template: "card_esh_welcome_pill_nav"
+        variables:
+          number_of_nav_pills: |
+            [[[
+              return [variables.entity_1?.nav,
+                      variables.entity_2?.nav,
+                      variables.entity_3?.nav,
+                      variables.entity_4?.nav,
+                      variables.entity_5?.nav].filter(el => el !== undefined).length;
+            ]]]
+          entity: "[[[ return variables.entity_5; ]]]"
+
+card_esh_welcome_pill_nav:
+  tap_action:
+    action: "navigate"
+    navigation_path: "[[[ return variables.entity?.nav; ]]]"
+  show_icon: false
+  show_label: false
+  show_name: false
+  state:
+    - operator: "template"
+      value: "[[[ return !variables.entity?.nav; ]]]"
+      styles:
+        card:
+          - display: "none"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "1fr 1fr"
+      - row-gap: "12px"
+      - justify-items: "center"
+      - column-gap: "auto"
+    card:
+      - border-radius: "50px"
+      - place-self: "center"
+      - width: "[[[ return (52 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
+      - height: "[[[ return (84 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
+      - box-shadow: >
+          [[[
+            if (hass.themes.darkMode){
+              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
+            } else {
+              return "var(--box-shadow)";
+            }
+          ]]]
+      - "--mdc-ripple-press-opacity": 0.12    # allow click animation
+  color: "var(--google-grey)"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        tap_action:
+          action: "navigate"
+          navigation_path: "[[[ return variables.entity?.nav; ]]]"
+        show_icon: true
+        show_label: false
+        show_name: false
+        icon: "[[[ return variables.entity?.icon ]]]"
+        styles:
+          icon:
+            - color: "[[[ return `rgba(var(--color-${variables.entity?.color}), 1)`;]]]"
+            - width: "[[[ return (20 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
+          img_cell:
+            - background-color: "[[[ return `rgba(var(--color-${variables.entity?.color}), 0.20)`;]]]"
+            - border-radius: "50%"
+            - width: "[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
+            - height: "[[[ return (42 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
+          grid:
+            - grid-template-areas: "i"
+          card:
+            - box-shadow: "none"
+            - border-radius: "50px"
+            - padding: "5px"
+        state:
+          - value: "on"
+            styles:
+              card:
+                - overflow: "visible"
+                - box-shadow: |
+                    [[[
+                      if (hass.themes.darkMode){
+                        return "0px 2px 4px 0px rgba(0,0,0,0.80)";
+                      } else {
+                        return "var(--box-shadow)";
+                      }
+                    ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        tap_action:
+          action: "navigate"
+          navigation_path: "[[[ return variables.entity?.nav; ]]]"
+        show_icon: false
+        show_label: false
+        name: "[[[ return variables.entity?.name ]]]"
+        styles:
+          name:
+            - font-weight: "bold"
+            - font-size: "[[[ return (9.5 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
+            - width: "[[[ return (33 * (1+(5-Math.max(variables.number_of_nav_pills, 3))*0.25)) + 'px'; ]]]"
+            - padding-bottom: "7px"
+          grid:
+            - grid-template-areas: "n"
+          card:
+            - box-shadow: "none"
+            - padding: "0px 5px 5px 5px"
+            - margin-top: "-5px"
+            - border-radius: "50px"
+
+card_esh_welcome_topbar:
+  show_icon: false
+  show_label: false
+  show_name: true
+  styles:
+    grid:
+      - grid-template-areas: "'item1 item2 item3'"
+      - grid-template-columns: "1fr 7fr 1fr"
+      - grid-template-rows: "min-content"
+      - justify-items: "center"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - cursor: "default"
+      - "--mdc-ripple-press-opacity": 0   # prevent click animation
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "chips"
+        tap_action:
+          action: "perform-action"
+          perform_action: "input_boolean.toggle"
+          target:
+            entity_id: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
+        show_icon: true
+        icon: "mdi:chevron-up"
+        entity: "[[[ return variables.ulm_card_esh_welcome_collapse ]]]"
+        styles:
+          grid:
+            - grid-template-areas: "'i'"
+          card:
+            - box-shadow: >
+                [[[
+                  if (hass.themes.darkMode){
+                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
+                  } else {
+                    return "var(--box-shadow)";
+                  }
+                ]]]
+            - visibility: "[[[ return variables.ulm_card_esh_welcome_collapse ? 'visible' : 'hidden'; ]]]"
+            - "--mdc-ripple-press-opacity": 0.12    # allow click animation
+        state:
+          - value: "on"
+            icon: "mdi:chevron-down"
+            styles:
+              icon:
+                - color: "rgb(var(--color-theme))"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "chip_weather_date"
+        variables:
+          ulm_weather: "[[[ return variables.ulm_weather]]]"
+        tap_action:
+          action: "more-info"
+        entity: "[[[ return variables.ulm_weather]]]"
+        styles:
+          card:
+            - width: "100px"
+            - box-shadow: >
+                [[[
+                  if (hass.themes.darkMode){
+                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
+                  } else {
+                    return "var(--box-shadow)";
+                  }
+                ]]]
+            - "--mdc-ripple-press-opacity": 0.12    # allow click animation
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "chip_mdi_icon_only"
+        variables:
+          ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
+        tap_action:
+          action: "navigate"
+          navigation_path: "/config/dashboard"
+        styles:
+          card:
+            - align-self: "end"
+            - box-shadow: >
+                [[[
+                  if (hass.themes.darkMode){
+                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
+                  } else {
+                    return "var(--box-shadow)";
+                  }
+                ]]]
+            - "--mdc-ripple-press-opacity": 0.12    # allow click animation
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_haven_washer/index.html b/usage/custom_cards/custom_card_haven_washer/index.html
new file mode 100644
index 000000000..c40c7abcb
--- /dev/null
+++ b/usage/custom_cards/custom_card_haven_washer/index.html
@@ -0,0 +1,4945 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Washer/Dryer/Dishwasher Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Washer"
    
+
    Washer Dryer off
    
+
    Small layout when the washer, dryer or dishwasher is turned off (ulm_custom_card_washer_power === "off"). It shows the content of the idle label variable (ulm_custom_card_washer_label_idle)
    
+
    Washer Dryer Ready
    
+
    When the washer, dryer or dishwasher is turned on the possible (job) stages of machine become visible (In this example the dryer has no different (job) stages so the stages remain closed)
    
+
    Washer Dryer Remote Control
    
+
    When the washer, dryer or dishwasher is set to smart control (ulm_custom_card_washer_remote_control === "true"), you can start the machine from you app, or you can start it using automation. The buttons will reflect this stage change.
    
+
    Washer Dryer Timer
    
+
    When you want to start the washer, dryer or dishwasher at a specific time (through automation) you can turn on the timer (press the icon and the ulm_custom_card_washer_delayed_start === "on") and set the time to start (use the up and down buttons of click on the time to set ulm_custom_card_washer_delayed_starttime (Time only)). It shows the content of the configuration label variable (ulm_custom_card_washer_label_configuring).
    
+
    Washer Dryer Running
    
+
    When the washer, dryer or dishwasher is running you can use the running label variable (ulm_custom_card_washer_label_running) to show the remaining time. The dryer can't be paused so the button is disabled.
    
+
    !! Attention !!
    
+
    This custom card is build based on a Samsung Washer and Dryer and based on the SmartThings Custom integration (installable using HACS: https://github.com/veista/smartthings). Other washer, dryers or dishwasher could work with this custom card, but might require some work. This card is highly configurable, but for the machine state you might need a template sensors to support the same terminology (run, pause, stop).
    
+
    Credits
    
+
      
+
    • Author: Cruguah - 2023
      • 
+
    • 
+
      Version: 1.0.2
      
+
      • 
+
    • 
+
      Thanks to rphlwnk for sharing his code of his washing machine card.
      
+
      • 
+
    • Thanks to dougmaitelli for sharing his experience and configuration of his washing machine (LG SmartThinQ).
      • 
+
    
+
    Changelog
    
+
    
+  1.0.2
+  Added an extra variable ulm_custom_card_washer_machine_stop_state to support more washers (LG SmartThinQ) #1268.
+  Thanks to dougmaitelli for pointing out this issue.
+
    
+
    
+  1.0.1
+  Small bug fix resolving issue #1230.
+
    
+
    
+  1.0.0
+  Initial release.
+
    
+
+
    Usage
    
+
    Example for Samsung SmartThings:
    
+
    - type: "custom:button-card"
+  template: "custom_card_haven_washer"
+  variables:
+    ulm_custom_card_washer_power: switch.washingmachine_switch
+    ulm_custom_card_washer_remote_control: sensor.washingmachine_remote_control
+    ulm_custom_card_washer_machine_state: sensor.washingmachine_machine_state
+    ulm_custom_card_washer_job_state: sensor.washingmachine_job_state
+    ulm_custom_card_washer_job_states:
+      state1:
+        name: "weightSensing"
+        icon: "mdi:scale"
+      state2:
+        name: "wash"
+        icon: "mdi:waves"
+      state3:
+        name: "rinse"
+        icon: "mdi:water"
+      state4:
+        name: "spin"
+        icon: "mdi:fan"
+    ulm_custom_card_washer_delayed_start: input_boolean.washingmachine_latest_start
+    ulm_custom_card_washer_delayed_starttime: input_datetime.washingmachine_latest_starttime
+    ulm_custom_card_washer_label_idle: >
+      [[[
+        var name = states["sensor.washingmachine_energy"].attributes.friendly_name;
+        var value = states["sensor.washingmachine_energy"].state;
+        var measurement = states["sensor.washingmachine_energy"].attributes.unit_of_measurement;
+        return name + " • " + value + " " + measurement;
+      ]]]
+    ulm_custom_card_washer_label_running: "[[[ return states["sensor.washer_remaining_time"].state; ]]]"
+    ulm_custom_card_washer_label_configuring: >
+      [[[
+          var name = states["sensor.washer_actual_starttime"].attributes.friendly_name;
+          var time = states["sensor.washer_actual_starttime"].attributes.display_time;
+          return name + " • " + time;
+      ]]]
+    ulm_custom_card_washer_start_action:
+      action: "call-service"
+      service: switch.turn_on
+      service_data:
+        entity_id: switch.washer_run_action
+    ulm_custom_card_washer_pause_action:
+      action: "call-service"
+      service: switch.turn_on
+      service_data:
+        entity_id: switch.washer_pause_action
+    ulm_custom_card_washer_stop_action:
+      action: "call-service"
+      service: switch.turn_on
+      service_data:
+        entity_id: switch.washer_stop_action
+
    
+
    Example for LG SmartThinQ
    
+
    - type: "custom:button-card"
+  template: "custom_card_haven_washer"
+  variables:
+    ulm_custom_card_washer_power: sensor.washer
+    ulm_custom_card_washer_machine_state: sensor.washer_run_state
+    ulm_custom_card_washer_machine_stop_state: "-"
+    ulm_custom_card_washer_job_state: sensor.washer_run_state
+    ulm_custom_card_washer_job_states:
+      state1:
+        name: "Detecting"
+        icon: "mdi:scale"
+      state2:
+        name: "Washing"
+        icon: "mdi:waves"
+      state3:
+        name: "Rinsing"
+        icon: "mdi:water"
+      state4:
+        name: "Spin"
+        icon: "mdi:fan"
+    ulm_custom_card_washer_label_idle: >
+      [[[
+        return "-";
+      ]]]
+    ulm_custom_card_washer_label_running: >
+      [[[
+        return states["sensor.washer_remaining_time"].state;
+      ]]]
+    ulm_custom_card_washer_label_configuring: >
+      [[[
+          var name = states["sensor.washer_initial_time"].attributes.friendly_name;
+          var time = states["sensor.washer_initial_time"].attributes.display_time;
+          return name + " • " + time;
+      ]]]
+
    
+
    Requirements
    
+
    An integration that will support your washer, dryer, dishwasher or any other machine with job stages that you want to monitor.
    
+
    When using a Samsung Washing machine or Dryer that integrates with SmartThings, a default integration is available in Home Assistant and this custom card works with this integration. One thing missing in the default SmartThings integration is the ability to see is remote control is enabled. A custom integration is available which extends the sensors with a remote control sensor. Integration from HACS: "SmartThings Custom" (https://github.com/veista/smartthings) from veista.
    
+
    When using a LG Washing machine or Dryer or Dishwasher that integrates with LG SmartThinQ, a custom integration is available from HACS: "LG ThinQ Devices integration for HomeAssistant" (https://github.com/ollo69/ha-smartthinq-sensors) that works with this integration.
    
+
    Additional: Show the remaining time
    
+
    If you want to show the remaining time of your wash you can use the following template sensor to calculate duration.
    
+
    template:
+  - sensor:
+      - unique_id: washer_remaining_time
+        name: "Remaining Time"
+        state: >-
+          {% set rem_h = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom("%-H", false) %}
+          {% set rem_m = (as_timestamp(states.sensor.washer_completion_time.state) - as_timestamp(now())) | timestamp_custom("%-M", false) %}
+          {% if int(rem_h) > 0.9 %} {{ rem_h }} hour(s) and {{ rem_m }} minute(s)  {% else %} {{ rem_m }} minute(s) {% endif %}
+
    
+
    Additional: Control the washing machine of dryer remotely
    
+
    Starting, pausing or stopping the washer or dryer is currently not supported by the Samsung SmartThings integration.
+To use the start, pause, and stop buttons, you can create command line switches, which can initiate the corresponding action.
+When creating a command-line switch, you need to replace the following items:
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExplanation
    actionthis should be run, pause or stop
    deviceIdThe id of your device (guid)
    PAT TokenThe same PAT Token you"ve created during the installation of the SmartThings integration
    
+
    For every action you need to create an other command-line switch.
    
+
    Please ensure the capabilities of you machine before creating command-line switches.
    
+
    switch:
+  - platform: command_line
+    switches:
+      washer_run_action:
+        unique_id: switch.washer_<action>_action
+        value_template: >
+          {% if is_state("switch.washer_<action>_action", "on") %}
+            false
+          {% endif %}
+        command_on: >
+          curl --location --request POST "https://api.smartthings.com/v1/devices/<deviceId>/commands" --header "authorization: Bearer <PAT Token>" --header  "Content-Type: text/plain" --data-raw "[{"capability":"washerOperatingState","command":"setMachineState","arguments":["<action>"]}]"
+
    
+
    Variables
    
+
    Main parameters
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_custom_card_washer_powerswitch.washingmachine_switchyesIs the washing machine or dryer turned on?
    ulm_custom_card_washer_remote_controlsensor.washingmachine_remote_controlnoCan we control the washing machine or dryer remotely
    ulm_custom_card_washer_machine_statesensor.washingmachine_machine_statenoWhat is the current state of washing machine or dryer: none, run or pause
    ulm_custom_card_washer_machine_stop_state"stop"noWhat is the value for the stop stage of the ulm_custom_card_washer_machine_state
    ulm_custom_card_washer_job_statesensor.washingmachine_job_statenoWhat is the current step in the program, weightSensing, wash, rinse, spin or drying
    ulm_custom_card_washer_job_statesList of maximum 5 states (name and icon) to show as job statesnoDefine the job states of the washing machine of dryer (or any other machine that you wanna use)
    ulm_custom_card_washer_delayed_startinput_boolean.washingmachine_latest_startnoTurn on the ability to start the washing machine of dryer at a specific time
    ulm_custom_card_washer_delayed_starttimeinput_datetime.washingmachine_latest_starttimenoWhat time should the washing machine or dryer start
    ulm_custom_card_washer_label_idleAny text, for example the number of runsnoWhat label to show when the washing machine or dryer is idle
    ulm_custom_card_washer_label_runningAny text, for example the remaining time of the current programnoWhat label to show when the washing machine or dryer is running
    ulm_custom_card_washer_label_configuringAny text, for example, the end result of all the settingsnoWhat label to show when the washing machine or dryer is being configured
    ulm_custom_card_washer_start_actionA collection of setting to change a value or start an actionnoThis contains all the parameters to start the washing machine or dryer (See the next table)
    ulm_custom_card_washer_pause_actionA collection of setting to change a value or start an actionnoThis contains all the parameters to pause the washing machine or dryer (See the next table)
    ulm_custom_card_washer_stop_actionA collection of setting to change a value or start an actionnoThis contains all the parameters to stop the washing machine or dryer (See the next table)
    
+
    Parameters specific for the start, pause and stop of the washing machine of dryer
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    actionnonenoAction to perform (more-info, toggle, call-service, navigate, url, none) Default: none
    entityentity_idnoEntity id to call the action on
    navigation_pathThe navigation path for the callnoPath to navigate to (e.g., /lovelace/0/) when action defined as navigate
    url_pathThe url path for the callnoPath to navigate to (e.g., https://www.home-assistant.io) when action defined as url
    serviceThe service to call the action onnoService to call (e.g., media_player.media_play_pause) when action defined as call-service
    service_dataThe service_data to call the action onnoService data to include (e.g., entity_id: media_player.bedroom) when action defined as call-service
    
+
    
+Template Code
+
    custom_card_haven_washer.yaml
    ---
+custom_card_haven_washer:
+  template:
+    - "ulm_language_variables"
+    - "ulm_translation_engine"
+  variables:
+    ulm_custom_card_washer_power:
+    ulm_custom_card_washer_remote_control:
+    ulm_custom_card_washer_machine_state:
+    ulm_custom_card_washer_machine_stop_state: "stop"
+    ulm_custom_card_washer_job_state:
+    ulm_custom_card_washer_label_idle: "idle"
+    ulm_custom_card_washer_label_configuring: "configure"
+    ulm_custom_card_washer_label_running: "run"
+    ulm_custom_card_washer_delayed_start:
+    ulm_custom_card_washer_delayed_starttime:
+    ulm_custom_card_washer_job_states:
+      state1:
+        name:
+        icon:
+      state2:
+        name:
+        icon:
+      state3:
+        name:
+        icon:
+      state4:
+        name:
+        icon:
+      state5:
+        name:
+        icon:
+    ulm_custom_card_washer_start_action:
+      action: "none"
+    ulm_custom_card_washer_pause_action:
+      action: "none"
+    ulm_custom_card_washer_stop_action:
+      action: "none"
+  triggers_update: "all"
+  show_icon: false
+  show_label: false
+  show_name: false
+  show_state: false
+  show_last_changed: false
+  show_entity_picture: false
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            var rows = ["\'row1\'"];
+
+            if (!!variables.ulm_custom_card_washer_job_state) {
+              rows.push("\'row2\'");
+            }
+
+            if (!!variables.ulm_custom_card_washer_remote_control) {
+              rows.push("\'row3\'");
+            }
+
+            if (!!variables.ulm_custom_card_washer_delayed_start
+              && !!variables.ulm_custom_card_washer_delayed_starttime) {
+              rows.push("\'row4\'");
+            }
+
+            return rows.join(" ");
+          ]]]
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content"
+      - row-gap: "0px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+    custom_fields:
+      row2:
+        - display: >
+            [[[
+              return (!!variables.ulm_custom_card_washer_job_state
+                && !!variables.ulm_custom_card_washer_power
+                && !!states[variables.ulm_custom_card_washer_power]?.state
+                && states[variables.ulm_custom_card_washer_power].state === "on") ? "block" : "none";
+            ]]]
+      row3:
+        - display: >
+            [[[
+              return (!!variables.ulm_custom_card_washer_power
+                && !!states[variables.ulm_custom_card_washer_power]?.state
+                && states[variables.ulm_custom_card_washer_power].state === "on"
+                && !!variables.ulm_custom_card_washer_remote_control
+                && !!states[variables.ulm_custom_card_washer_remote_control]?.state
+                && states[variables.ulm_custom_card_washer_remote_control].state === "true") ? "block" : "none";
+            ]]]
+      row4:
+        - display: >
+            [[[
+              return (!!variables.ulm_custom_card_washer_power
+                && !!states[variables.ulm_custom_card_washer_power]?.state
+                && states[variables.ulm_custom_card_washer_power].state === "on"
+                && !!variables.ulm_custom_card_washer_remote_control
+                && !!states[variables.ulm_custom_card_washer_remote_control]?.state
+                && states[variables.ulm_custom_card_washer_remote_control].state === "true"
+                && !!variables.ulm_custom_card_washer_delayed_start
+                && !!states[variables.ulm_custom_card_washer_delayed_start]?.state
+                && states[variables.ulm_custom_card_washer_delayed_start].state === "on"
+                && !!variables.ulm_custom_card_washer_delayed_starttime) ? "block" : "none";
+            ]]]
+  custom_fields:
+    row1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_info"
+          - "blue_on"
+        tap_action:
+          action: "more-info"
+        label: >
+          [[[
+            if (!!variables.ulm_custom_card_washer_power
+              && !!states[variables.ulm_custom_card_washer_power]?.state
+              && states[variables.ulm_custom_card_washer_power].state === "on") {
+              if (!!variables.ulm_custom_card_washer_machine_state
+                && !!states[variables.ulm_custom_card_washer_machine_state]?.state
+                && states[variables.ulm_custom_card_washer_machine_state].state !== variables.ulm_custom_card_washer_machine_stop_state) {
+                if (!!variables.ulm_custom_card_washer_label_running) {
+                  return variables.ulm_custom_card_washer_label_running;
+                }
+              } else {
+                if (!!variables.ulm_custom_card_washer_remote_control
+                  && !!states[variables.ulm_custom_card_washer_remote_control]?.state
+                  && states[variables.ulm_custom_card_washer_remote_control].state === "true"
+                  && !!variables.ulm_custom_card_washer_delayed_start
+                  && !!states[variables.ulm_custom_card_washer_delayed_start]?.state
+                  && states[variables.ulm_custom_card_washer_delayed_start].state === "on") {
+                  if (!!variables.ulm_custom_card_washer_label_configuring) {
+                    return variables.ulm_custom_card_washer_label_configuring;
+                  }
+                } else {
+                  if (!!variables.ulm_custom_card_washer_label_idle) {
+                    return variables.ulm_custom_card_washer_label_idle;
+                  }
+                }
+              }
+            } else {
+              if (!!variables.ulm_custom_card_washer_label_idle) {
+                return variables.ulm_custom_card_washer_label_idle;
+              }
+            }
+
+            var label = states[variables.ulm_custom_card_washer_power].state;
+            label = variables["ulm_" + label] ?? label;
+
+            if (!!variables.ulm_custom_card_washer_machine_state
+              && !!states[variables.ulm_custom_card_washer_machine_state]
+              && !!states[variables.ulm_custom_card_washer_machine_state].state) {
+              var state = states[variables.ulm_custom_card_washer_machine_state].state;
+              label += " • " + variables["ulm_" + state] ?? state;
+            }
+
+            return label;
+          ]]]
+        entity: "[[[ return variables.ulm_custom_card_washer_power; ]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - padding: "0px"
+    row2:
+      card:
+        type: "custom:button-card"
+        styles:
+          img_cell:
+            - justify-items: "center"
+          grid:
+            - grid-template-areas: >
+                [[[
+                  var items = [];
+
+                  if (!!variables.ulm_custom_card_washer_job_states) {
+                    if (!!variables.ulm_custom_card_washer_job_states.state1?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state1?.icon) {
+                      items.push("item1");
+                    }
+                    if (!!variables.ulm_custom_card_washer_job_states.state2?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state2?.icon) {
+                      items.push("item2");
+                    }
+                    if (!!variables.ulm_custom_card_washer_job_states.state3?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state3?.icon) {
+                      items.push("item3");
+                    }
+                    if (!!variables.ulm_custom_card_washer_job_states.state4?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state4?.icon) {
+                      items.push("item4");
+                    }
+                    if (!!variables.ulm_custom_card_washer_job_states.state5?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state5?.icon) {
+                      items.push("item5");
+                    }
+                  }
+
+                  return "\'" + items.join(" ") + "\'";
+                ]]]
+            - grid-template-columns: >
+                [[[
+                  var columns = [];
+
+                  if (!!variables.ulm_custom_card_washer_job_states) {
+                    if (!!variables.ulm_custom_card_washer_job_states.state1?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state1?.icon) {
+                      columns.push("1fr");
+                    }
+                    if (!!variables.ulm_custom_card_washer_job_states.state2?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state2?.icon) {
+                      columns.push("1fr");
+                    }
+                    if (!!variables.ulm_custom_card_washer_job_states.state3?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state3?.icon) {
+                      columns.push("1fr");
+                    }
+                    if (!!variables.ulm_custom_card_washer_job_states.state4?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state4?.icon) {
+                      columns.push("1fr");
+                    }
+                    if (!!variables.ulm_custom_card_washer_job_states.state5?.name
+                      && !!variables.ulm_custom_card_washer_job_states.state5?.icon) {
+                      columns.push("1fr");
+                    }
+                  }
+
+                  return columns.join(" ");
+                ]]]
+            - grid-template-rows: "min-content"
+            - column-gap: "7px"
+            - justify-items: "center"
+          card:
+            - padding: "0px"
+            - box-shadow: "none"
+            - margin-top: "12px"
+            - border-radius: "var(--border-radius)"
+            - pointer-events: "none"
+            - background-color: "rgba(var(--color-theme), 0.05)"
+            - justify-items: "center"
+          custom_fields:
+            item1:
+              - display: >
+                  [[[
+                    return (!!variables.ulm_custom_card_washer_job_states?.state1
+                      && !!variables.ulm_custom_card_washer_job_states.state1.name
+                      && !!variables.ulm_custom_card_washer_job_states.state1.icon) ? "block" : "none";
+                  ]]]
+            item2:
+              - display: >
+                  [[[
+                    return (!!variables.ulm_custom_card_washer_job_states?.state2
+                      && !!variables.ulm_custom_card_washer_job_states.state2.name
+                      && !!variables.ulm_custom_card_washer_job_states.state2.icon) ? "block" : "none";
+                  ]]]
+            item3:
+              - display: >
+                  [[[
+                    return (!!variables.ulm_custom_card_washer_job_states?.state3
+                      && !!variables.ulm_custom_card_washer_job_states.state3.name
+                      && !!variables.ulm_custom_card_washer_job_states.state3.icon) ? "block" : "none";
+                  ]]]
+            item4:
+              - display: >
+                  [[[
+                    return (!!variables.ulm_custom_card_washer_job_states?.state4
+                      && !!variables.ulm_custom_card_washer_job_states.state4.name
+                      && !!variables.ulm_custom_card_washer_job_states.state4.icon) ? "block" : "none";
+                  ]]]
+            item5:
+              - display: >
+                  [[[
+                    return (!!variables.ulm_custom_card_washer_job_states?.state5
+                      && !!variables.ulm_custom_card_washer_job_states.state5.name
+                      && !!variables.ulm_custom_card_washer_job_states.state5.icon) ? "block" : "none";
+                  ]]]
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "custom_card_haven_washer_state"
+              icon: >
+                [[[
+                  return (!!variables.ulm_custom_card_washer_job_states?.state1
+                    && !!variables.ulm_custom_card_washer_job_states.state1.icon)
+                      ? variables.ulm_custom_card_washer_job_states.state1.icon
+                      : "mdi:cancel";
+                ]]]
+              state:
+                - value: >
+                    [[[
+                      return (!!variables.ulm_custom_card_washer_job_states?.state1
+                        && !!variables.ulm_custom_card_washer_job_states.state1.name)
+                          ? variables.ulm_custom_card_washer_job_states.state1.name
+                          : "unknown";
+                    ]]]
+                  styles:
+                    icon:
+                      - transform: "scale(1.2)"
+                      - color: "black"
+                    card:
+                      - background-color: "white"
+              entity: "[[[ return variables.ulm_custom_card_washer_job_state; ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "custom_card_haven_washer_state"
+              icon: >
+                [[[
+                  return (!!variables.ulm_custom_card_washer_job_states?.state2
+                    && !!variables.ulm_custom_card_washer_job_states.state2.icon)
+                      ? variables.ulm_custom_card_washer_job_states.state2.icon
+                      : "mdi:cancel";
+                ]]]
+              state:
+                - value: >
+                    [[[
+                      return (!!variables.ulm_custom_card_washer_job_states?.state2
+                        && !!variables.ulm_custom_card_washer_job_states.state2.name)
+                          ? variables.ulm_custom_card_washer_job_states.state2.name
+                          : "unknown";
+                    ]]]
+                  styles:
+                    icon:
+                      - transform: "scale(1.2)"
+                      - color: "black"
+                    card:
+                      - background-color: "white"
+              entity: "[[[ return variables.ulm_custom_card_washer_job_state; ]]]"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "custom_card_haven_washer_state"
+              icon: >
+                [[[
+                  return (!!variables.ulm_custom_card_washer_job_states?.state3
+                    && !!variables.ulm_custom_card_washer_job_states.state3.icon)
+                      ? variables.ulm_custom_card_washer_job_states.state3.icon
+                      : "mdi:cancel";
+                ]]]
+              state:
+                - value: >
+                    [[[
+                      return (!!variables.ulm_custom_card_washer_job_states?.state3
+                        && !!variables.ulm_custom_card_washer_job_states.state3.name)
+                          ? variables.ulm_custom_card_washer_job_states.state3.name
+                          : "unknown";
+                    ]]]
+                  styles:
+                    icon:
+                      - transform: "scale(1.2)"
+                      - color: "black"
+                    card:
+                      - background-color: "white"
+              entity: "[[[ return variables.ulm_custom_card_washer_job_state; ]]]"
+          item4:
+            card:
+              type: "custom:button-card"
+              template: "custom_card_haven_washer_state"
+              icon: >
+                [[[
+                  return (!!variables.ulm_custom_card_washer_job_states?.state4
+                    && !!variables.ulm_custom_card_washer_job_states.state4.icon)
+                      ? variables.ulm_custom_card_washer_job_states.state4.icon
+                      : "mdi:cancel";
+                ]]]
+              state:
+                - value: >
+                    [[[
+                      return (!!variables.ulm_custom_card_washer_job_states?.state4
+                        && !!variables.ulm_custom_card_washer_job_states.state4.name)
+                          ? variables.ulm_custom_card_washer_job_states.state4.name
+                          : "unknown";
+                    ]]]
+                  styles:
+                    icon:
+                      - transform: "scale(1.2)"
+                      - color: "black"
+                    card:
+                      - background-color: "white"
+              entity: "[[[ return variables.ulm_custom_card_washer_job_state; ]]]"
+          item5:
+            card:
+              type: "custom:button-card"
+              template: "custom_card_haven_washer_state"
+              icon: >
+                [[[
+                  return (!!variables.ulm_custom_card_washer_job_states?.state5
+                    && !!variables.ulm_custom_card_washer_job_states.state5.icon)
+                      ? variables.ulm_custom_card_washer_job_states.state5.icon
+                      : "mdi:cancel";
+                ]]]
+              state:
+                - value: >
+                    [[[
+                      return (!!variables.ulm_custom_card_washer_job_states?.state5
+                        && !!variables.ulm_custom_card_washer_job_states.state5.name)
+                          ? variables.ulm_custom_card_washer_job_states.state5.name
+                          : "unknown";
+                    ]]]
+                  styles:
+                    icon:
+                      - transform: "scale(1.2)"
+                      - color: "black"
+                    card:
+                      - background-color: "white"
+              entity: "[[[ return variables.ulm_custom_card_washer_job_state ]]]"
+    row3:
+      card:
+        type: "custom:button-card"
+        template: >
+          [[[
+            return !!variables.ulm_custom_card_washer_delayed_start
+              && !!variables.ulm_custom_card_washer_delayed_starttime ? "list_3_items" : "list_2_items";
+          ]]]
+        styles:
+          card:
+            - padding: "0px"
+            - margin-top: "12px"
+          custom_fields:
+            item3:
+              - display: >
+                  [[[
+                    return (!!variables.ulm_custom_card_washer_delayed_start
+                      && !!variables.ulm_custom_card_washer_delayed_starttime) ? "block" : "none";
+                  ]]]
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: >
+                  [[[
+                    if (!!states[variables.ulm_custom_card_washer_machine_state]?.state
+                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state) {
+                      return variables.ulm_custom_card_washer_start_action?.action ?? "none";
+                    } else {
+                      return variables.ulm_custom_card_washer_pause_action?.action ?? "none";
+                    }
+                  ]]]
+                entity: "[[[ return variables.ulm_custom_card_washer_start_action.entity; ]]]"
+                navigation_path: >
+                  [[[
+                    return (!!states[variables.ulm_custom_card_washer_machine_state]?.state
+                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)
+                      ? variables.ulm_custom_card_washer_start_action?.navigation_path
+                      : variables.ulm_custom_card_washer_pause_action?.navigation_path;
+                  ]]]
+                url_path: >
+                  [[[
+                    return (!!states[variables.ulm_custom_card_washer_machine_state]?.state
+                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)
+                      ? variables.ulm_custom_card_washer_start_action?.url_path
+                      : variables.ulm_custom_card_washer_pause_action?.url_path;
+                  ]]]
+                service: >
+                  [[[
+                    return (!!states[variables.ulm_custom_card_washer_machine_state]?.state
+                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)
+                      ? variables.ulm_custom_card_washer_start_action?.service
+                      :  variables.ulm_custom_card_washer_pause_action?.service;
+                  ]]]
+                service_data: >
+                  [[[
+                    return (!!states[variables.ulm_custom_card_washer_machine_state]?.state
+                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)
+                      ? variables.ulm_custom_card_washer_start_action?.service_data
+                      : variables.ulm_custom_card_washer_pause_action?.service_data;
+                  ]]]
+              icon: >
+                [[[
+                  return (!!states[variables.ulm_custom_card_washer_machine_state]?.state
+                    && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state) ? "mdi:play" : "mdi:pause";
+                ]]]
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return ((states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state
+                          && (!variables.ulm_custom_card_washer_start_action?.action
+                            || (!!variables.ulm_custom_card_washer_start_action?.action
+                              && variables.ulm_custom_card_washer_start_action.action === "none")))
+                        || (states[variables.ulm_custom_card_washer_machine_state].state !== variables.ulm_custom_card_washer_machine_stop_state
+                          && (!variables.ulm_custom_card_washer_pause_action?.action
+                            || (!!variables.ulm_custom_card_washer_pause_action?.action
+                              && variables.ulm_custom_card_washer_pause_action.action === "none"))));
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.2)"
+              entity: "[[[ return variables.ulm_custom_card_washer_machine_state; ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: >
+                  [[[
+                    return (!!variables.ulm_custom_card_washer_machine_state
+                      && !!states[variables.ulm_custom_card_washer_machine_state]?.state
+                      && states[variables.ulm_custom_card_washer_machine_state].state !== variables.ulm_custom_card_washer_machine_stop_state
+                      && variables.ulm_custom_card_washer_stop_action?.action) ?? "none";
+                  ]]]
+                entity: "[[[ return variables.ulm_custom_card_washer_stop_action.entity; ]]]"
+                navigation_path: "[[[ return variables.ulm_custom_card_washer_stop_action.navigation_path; ]]]"
+                url_path: "[[[ return variables.ulm_custom_card_washer_stop_action.url_path; ]]]"
+                service: "[[[ return variables.ulm_custom_card_washer_stop_action.service; ]]]"
+                service_data: "[[[ return variables.ulm_custom_card_washer_stop_action.service_data; ]]]"
+              icon: "mdi:stop"
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return ((!!variables.ulm_custom_card_washer_machine_state
+                          && !!states[variables.ulm_custom_card_washer_machine_state]?.state
+                          && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)
+                        || !variables.ulm_custom_card_washer_stop_action?.action
+                        || (!!variables.ulm_custom_card_washer_stop_action?.action
+                          && variables.ulm_custom_card_washer_stop_action.action === "none"));
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.2)"
+              entity: "[[[ return variables.ulm_custom_card_washer_machine_state ]]]"
+          item3:
+            card:
+              type: "custom:button-card"
+              template:
+                - "widget_icon"
+                - "green_on"
+              tap_action:
+                action: >
+                  [[[
+                    return (!!variables.ulm_custom_card_washer_machine_state
+                      && !!states[variables.ulm_custom_card_washer_machine_state]?.state
+                      && states[variables.ulm_custom_card_washer_machine_state].state === variables.ulm_custom_card_washer_machine_stop_state)
+                        ? "toggle"
+                        : "none";
+                  ]]]
+              state:
+                - operator: "template"
+                  value: >
+                    [[[
+                      return (!!variables.ulm_custom_card_washer_machine_state
+                        && !!states[variables.ulm_custom_card_washer_machine_state]?.state
+                        && states[variables.ulm_custom_card_washer_machine_state].state !== variables.ulm_custom_card_washer_machine_stop_state);
+                    ]]]
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.2)"
+              entity: "[[[ return variables.ulm_custom_card_washer_delayed_start; ]]]"
+    row4:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        styles:
+          card:
+            - padding: "0px"
+            - margin-top: "12px"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ return variables.ulm_custom_card_washer_delayed_starttime; ]]]"
+                data:
+                  time: >
+                    [[[
+                      if (!!variables.ulm_custom_card_washer_delayed_starttime
+                        && !!states[variables.ulm_custom_card_washer_delayed_starttime]?.attributes) {
+                        var timestamp = states[variables.ulm_custom_card_washer_delayed_starttime].attributes.timestamp
+
+                        let unix_timestamp = timestamp - 4500;
+                        // Create a new JavaScript Date object based on the timestamp
+                        // multiplied by 1000 so that the argument is in milliseconds, not seconds.
+                        var date = new Date(unix_timestamp * 1000);
+                        // Hours part from the timestamp
+                        var hours = date.getHours();
+                        // Minutes part from the timestamp
+                        var minutes = "0" + date.getMinutes();
+                        // Seconds part from the timestamp
+                        var seconds = "0" + date.getSeconds();
+                        // Will display time in 10:30:23 format
+                        return hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
+                      } else {
+                        return "00:00:00";
+                      }
+                    ]]]
+              icon: "mdi:arrow-down"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "custom_card_haven_washer_delayed_text"
+              tap_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ return variables.ulm_custom_card_washer_delayed_starttime; ]]]"
+                data:
+                  time: >
+                    [[[
+                      if (!!variables.ulm_custom_card_washer_delayed_starttime
+                        && !!states[variables.ulm_custom_card_washer_delayed_starttime]?.attributes) {
+                        var timestamp = states[variables.ulm_custom_card_washer_delayed_starttime].attributes.timestamp
+
+                        let unix_timestamp = timestamp - 3540;
+                        // Create a new JavaScript Date object based on the timestamp
+                        // multiplied by 1000 so that the argument is in milliseconds, not seconds.
+                        var date = new Date(unix_timestamp * 1000);
+                        // Hours part from the timestamp
+                        var hours = date.getHours();
+                        // Minutes part from the timestamp
+                        var minutes = "0" + date.getMinutes();
+                        // Seconds part from the timestamp
+                        var seconds = "0" + date.getSeconds();
+                        // Will display time in 10:30:23 format
+                        return  hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
+                      } else {
+                        return "00:00:00";
+                      }
+                    ]]]
+              hold_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ variables.ulm_custom_card_washer_delayed_starttime ]]]"
+                data:
+                  time: >
+                    [[[
+                      if (!!variables.ulm_custom_card_washer_delayed_starttime
+                        && !!states[variables.ulm_custom_card_washer_delayed_starttime]?.attributes) {
+                        var timestamp = states[variables.ulm_custom_card_washer_delayed_starttime].attributes.timestamp
+
+                        let unix_timestamp = timestamp - 3660;
+                        // Create a new JavaScript Date object based on the timestamp
+                        // multiplied by 1000 so that the argument is in milliseconds, not seconds.
+                        var date = new Date(unix_timestamp * 1000);
+                        // Hours part from the timestamp
+                        var hours = date.getHours();
+                        // Minutes part from the timestamp
+                        var minutes = "0" + date.getMinutes();
+                        // Seconds part from the timestamp
+                        var seconds = "0" + date.getSeconds();
+                        // Will display time in 10:30:23 format
+                        return hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
+                      } else {
+                        return "00:00:00";
+                      }
+                    ]]]
+              entity: "[[[ return variables.ulm_custom_card_washer_delayed_starttime; ]]]"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ return variables.ulm_custom_card_washer_delayed_starttime ]]]"
+                data:
+                  time: >
+                    [[[
+                      if (!!variables.ulm_custom_card_washer_delayed_starttime
+                        && !!states[variables.ulm_custom_card_washer_delayed_starttime]?.attributes) {
+                        var timestamp = states[variables.ulm_custom_card_washer_delayed_starttime].attributes.timestamp
+                        let unix_timestamp = timestamp - 2700;
+                        // Create a new JavaScript Date object based on the timestamp
+                        // multiplied by 1000 so that the argument is in milliseconds, not seconds.
+                        var date = new Date(unix_timestamp * 1000);
+                        // Hours part from the timestamp
+                        var hours = date.getHours();
+                        // Minutes part from the timestamp
+                        var minutes = "0" + date.getMinutes();
+                        // Seconds part from the timestamp
+                        var seconds = "0" + date.getSeconds();
+                        // Will display time in 10:30:23 format
+                        return hours + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);
+                      } else {
+                        return "00:00:00";
+                      }
+                    ]]]
+              icon: "mdi:arrow-up"
+
+custom_card_haven_washer_state:
+  show_icon: true
+  show_name: false
+  tap_action:
+    action: "none"
+  size: "20px"
+  styles:
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - border-radius: "50%"
+      - place-self: "center"
+      - height: "42px"
+      - width: "42px"
+      - pointer-events: "auto"
+      - background-color: "transparent"
+    grid:
+      - grid-template-areas: "'i'"
+    icon:
+      - color: "var(--google-grey)"
+
+custom_card_haven_washer_delayed_text:
+  template:
+    - "ulm_translation_engine"
+  tap_action:
+    action: "toggle"
+  show_icon: false
+  show_label: true
+  show_name: false
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  styles:
+    state:
+      - color: "rgba(var(--color-theme),0.9)"
+    grid:
+      - grid-template-areas: "'l'"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "14px"
+      - place-self: "center"
+      - height: "42px"
+  size: "20px"
+  color: "var(--google-grey)"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_heat_pump/index.html b/usage/custom_cards/custom_card_heat_pump/index.html
new file mode 100644
index 000000000..b191c5ada
--- /dev/null
+++ b/usage/custom_cards/custom_card_heat_pump/index.html
@@ -0,0 +1,4209 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Heat Pump Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Heat Pump"
    
+
    The custom_card_heat_pump allows you to control your HVAC system and all its modes. This card is inspired by Simple Thermostat Card.
    
+
    Credits
    
+
    Author: Kam - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Images
    
+
    Heat_pump
    
+
    Heat_pump_gif
    
+
    Usage
    
+
    - type: custom:button-card
+  template: custom_card_heat_pump
+  entity: climate.heat_pump
+
    
+
    Requirements
    
+
    Entity climate with only heat mode
    
+
    Modification
    
+
    If your entity does not have all the available options in the hvac component, modify (delete or comment out) the following part to match your setup. Each button corresponds to a mode of the hvac component.
    
+
    item3:
+      card:
+        type: "horizontal-stack"
+        cards:
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:power"
+            tap_action:
+              action: "call-service"
+              service: "climate.set_hvac_mode"
+              service_data:
+                entity_id: "[[[ return entity.entity_id ]]]"
+                hvac_mode: "off"
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:fire"
+            tap_action:
+              action: "call-service"
+              service: "climate.set_hvac_mode"
+              service_data:
+                entity_id: "[[[ return entity.entity_id ]]]"
+                hvac_mode: "heat"
+            ...
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:snowflake"
+            tap_action:
+              action: "call-service"
+              service: "climate.set_hvac_mode"
+              service_data:
+                entity_id: "[[[ return entity.entity_id ]]]"
+                hvac_mode: "cool"
+            ...
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:sync"
+            tap_action:
+              action: "call-service"
+              service: "climate.set_hvac_mode"
+              service_data:
+                entity_id: "[[[ return entity.entity_id ]]]"
+                hvac_mode: "heat_cool"
+            ...
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:water"
+            tap_action:
+              action: "call-service"
+              service: "climate.set_hvac_mode"
+              service_data:
+                entity_id: "[[[ return entity.entity_id ]]]"
+                hvac_mode: "dry"
+            ...
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:fan"
+            tap_action:
+              action: "call-service"
+              service: "climate.set_hvac_mode"
+              service_data:
+                entity_id: "[[[ return entity.entity_id ]]]"
+                hvac_mode: "fan_only"
+            ...
+
    
+
    
+Template Code
+
    custom_card_heat_pump.yaml
    ---
+custom_card_heat_pump:
+  show_name: false
+  show_icon: false
+  template:
+    - "icon_info_bg"
+    - "ulm_translation_engine"
+  hold_action:
+    action: "more-info"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2' 'item3'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_info"
+          - "ulm_translation_engine"
+        tap_action:
+          action: "more-info"
+        entity: "[[[ return entity.entity_id ]]]"
+        name: "[[[ return entity.name ]]]"
+        label: >-
+          [[[
+              if(entity.attributes.temperature){
+                return (entity.attributes.current_temperature ) + '°' + ' • ' + variables.ulm_translation_state + ' (' + entity.attributes.hvac_action + ')';
+              }
+              return variables.ulm_translation_state;
+          ]]]
+        icon: >
+          [[[
+            var icon = "mdi:thermostat";
+            var state = entity.state;
+            if (state =='dry') {
+              return "mdi:water";
+            } else if (state =='heat') {
+              return "mdi:fire";
+            } else if (state =='cool') {
+              return "mdi:snowflake";
+            } else if (state =='fan_only') {
+              return "mdi:fan";
+            } else if (state =='heat_cool') {
+              return "mdi:sync";
+            }
+            return icon;
+          ]]]
+        state:
+          - operator: "template"
+            value: "[[[return entity.state == 'dry']]]"
+            styles:
+              icon:
+                - color: "rgba(var(--color, 255, 165, 0),1)"
+              img_cell:
+                - background-color: "rgba(var(--color, 255, 165, 0),0.2)"
+          - operator: "template"
+            value: "[[[return entity.state == 'cool']]]"
+            styles:
+              icon:
+                - color: "rgba(var(--color-blue),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-blue),0.2)"
+          - operator: "template"
+            value: "[[[return entity.state == 'heat']]]"
+            styles:
+              icon:
+                - color: "rgba(var(--color-red),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-red),0.2)"
+          - operator: "template"
+            value: "[[[return entity.state == 'fan_only']]]"
+            styles:
+              icon:
+                - color: "rgba(var(--color, 195, 0, 255),1)"
+              img_cell:
+                - background-color: "rgba(var(--color, 195, 0, 255),0.2)"
+          - operator: "template"
+            value: "[[[return entity.state == 'heat_cool']]]"
+            styles:
+              icon:
+                - color: "rgba(var(--color-green),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-green),0.2)"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:arrow-down"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  temperature: "[[[ return entity.attributes.temperature - entity.attributes.target_temp_step ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return entity.attributes.temperature + '°C' ]]]"
+              styles:
+                card:
+                  - box-shadow: "none"
+              show_icon: false
+              tap_action: "none"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:arrow-up"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  temperature: "[[[ return entity.attributes.temperature + entity.attributes.target_temp_step ]]]"
+    item3:
+      card:
+        type: "horizontal-stack"
+        cards:
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:power"
+            tap_action:
+              action: "perform-action"
+              perform_action: "climate.set_hvac_mode"
+              target:
+                entity_id: "[[[ return entity.entity_id ]]]"
+              data:
+                hvac_mode: "off"
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:fire"
+            tap_action:
+              action: "perform-action"
+              perform_action: "climate.set_hvac_mode"
+              target:
+                entity_id: "[[[ return entity.entity_id ]]]"
+              data:
+                hvac_mode: "heat"
+            styles:
+              icon:
+                - color: |
+                    [[[
+                      var color = 'rgba(var(--color-theme), 1)';
+                      if (entity.state == "heat"){
+                        var color = 'rgba(var(--color-red), 1)';
+                      }
+                      return color;
+                    ]]]
+              card:
+                - background-color: |
+                    [[[
+                      var bc_color = 'rgba(var(--color-theme),0.05)';
+                      if (entity.state == "heat"){
+                        var bc_color = 'rgba(var(--color-red), 0.2)';
+                      }
+                      return bc_color;
+                    ]]]
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:snowflake"
+            tap_action:
+              action: "perform-action"
+              perform_action: "climate.set_hvac_mode"
+              target:
+                entity_id: "[[[ return entity.entity_id ]]]"
+              data:
+                hvac_mode: "cool"
+            styles:
+              icon:
+                - color: |
+                    [[[
+                      var color = 'rgba(var(--color-theme), 1)';
+                      if (entity.state == "cool"){
+                        var color = 'rgba(var(--color-blue), 1)';
+                      }
+                      return color;
+                    ]]]
+              card:
+                - background-color: |
+                    [[[
+                      var bc_color = 'rgba(var(--color-theme),0.05)';
+                      if (entity.state == "cool"){
+                        var bc_color = 'rgba(var(--color-blue), 0.2)';
+                      }
+                      return bc_color;
+                    ]]]
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:sync"
+            tap_action:
+              action: "perform-action"
+              perform_action: "climate.set_hvac_mode"
+              target:
+                entity_id: "[[[ return entity.entity_id ]]]"
+              data:
+                hvac_mode: "heat_cool"
+            styles:
+              icon:
+                - color: |
+                    [[[
+                      var color = 'rgba(var(--color-theme), 1)';
+                      if (entity.state == "heat_cool"){
+                        var color = 'rgba(var(--color-green), 1)';
+                      }
+                      return color;
+                    ]]]
+              card:
+                - background-color: |
+                    [[[
+                      var bc_color = 'rgba(var(--color-theme),0.05)';
+                      if (entity.state == "heat_cool"){
+                        var bc_color = 'rgba(var(--color-green), 0.2)';
+                      }
+                      return bc_color;
+                    ]]]
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:water"
+            tap_action:
+              action: "perform-action"
+              perform_action: "climate.set_hvac_mode"
+              target:
+                entity_id: "[[[ return entity.entity_id ]]]"
+              data:
+                hvac_mode: "dry"
+            styles:
+              icon:
+                - color: |
+                    [[[
+                      var color = 'rgba(var(--color-theme), 1)';
+                      if (entity.state == "dry"){
+                        var color = 'rgba(var(--color, 255, 165, 0), 1)';
+                      }
+                      return color;
+                    ]]]
+              card:
+                - background-color: |
+                    [[[
+                      var bc_color = 'rgba(var(--color-theme),0.05)';
+                      if (entity.state == "dry"){
+                        var bc_color = 'rgba(var(--color, 255, 165, 0), 0.2)';
+                      }
+                      return bc_color;
+                    ]]]
+          - type: "custom:button-card"
+            template: "widget_icon_juve"
+            icon: "mdi:fan"
+            tap_action:
+              action: "perform-action"
+              perform_action: "climate.set_hvac_mode"
+              target:
+                entity_id: "[[[ return entity.entity_id ]]]"
+              data:
+                hvac_mode: "fan_only"
+            styles:
+              icon:
+                - color: |
+                    [[[
+                      var color = 'rgba(var(--color-theme), 1)';
+                      if (entity.state == "fan_only"){
+                        var color = 'rgba(var(--color, 195, 0, 255), 1)';
+                      }
+                      return color;
+                    ]]]
+              card:
+                - background-color: |
+                    [[[
+                      var bc_color = 'rgba(var(--color-theme),0.05)';
+                      if (entity.state == "fan_only"){
+                        var bc_color = 'rgba(var(--color, 195, 0, 255), 0.2)';
+                      }
+                      return bc_color;
+                    ]]]
+widget_icon_juve:
+  tap_action:
+    action: "toggle"
+  show_icon: true
+  show_name: false
+  show_state: true
+  styles:
+    grid:
+      - grid-template-areas: "'i'"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "14px"
+      - place-self: "center"
+      - height: "42px"
+    icon:
+      - color: "rgba(var(--color-theme),0.9)"
+  size: "20px"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_homeassistant_updates/index.html b/usage/custom_cards/custom_card_homeassistant_updates/index.html
new file mode 100644
index 000000000..d081963fd
--- /dev/null
+++ b/usage/custom_cards/custom_card_homeassistant_updates/index.html
@@ -0,0 +1,4329 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Homeassistant Updates Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Homeassistant updates"
    
+
    Homeassistant updates card
    
+
    Credits
    
+
      
+
    • Author: AndyVRD - 2021
      • 
+
    • Special thanks to basbruss
      • 
+
    • Version: 1.0.2
      • 
+
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
    
+1.0.1
+Added support for ulm_language variables
+
    
+
    
+1.0.2
+Updated capitalization of OS
+
    
+
    
+1.0.3
+Updated sensors and binary_sensors + Removed group.updaters
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_homeassistant_updates
+  variables:
+    ulm_card_homeassistant_entity: "binary_sensor.updates"
+    ulm_card_homeassistant_core: "sensor.core_updates"
+    ulm_card_homeassistant_supervisor: "sensor.supervisor_updates"
+    ulm_card_homeassistant_os: "sensor.os_updates"
+
    
+
    Requirements
    
+
    !! Attention !!
+This card needs additional template sensors and binary_sensor updaters to work, all detail can be found in this readme.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    core_sensor.core_updatesyessensor core installed/latest version
    os_sensor.os_updatesnosensor os installed/latest version
    supervisor_sensor.supervisor_updatesnosensor supervisor installed/latest version
    
+
+
    <<<<<<< Updated upstream
    
+
    Template code
    
+
    ---
+card_homeassistant_updates:
+  triggers_update: "all"
+  template:
+    - "ulm_language_variables"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        triggers_update: "all"
+        type: "custom:button-card"
+        template:
+          - "icon_info_updates"
+        icon: "mdi:home-assistant"
+        tap_action:
+          action: "none"
+        entity: "[[[ return variables.ulm_card_homeassistant_entity ]]]"
+        name: >
+              [[[
+                if(states[variables.ulm_card_homeassistant_core].state ==='True' || states[variables.ulm_card_homeassistant_supervisor].state ==='True' || states[variables.ulm_card_homeassistant_os].state ==='True'){
+                  return variables.ulm_updates_available;
+                } else {
+                  return variables.ulm_no_updates_available;
+                }
+              ]]]
+        label: >
+              [[[
+                if(variables.ulm_card_homeassistant_core){
+                  if(states[variables.ulm_card_homeassistant_core].state ==='True'){
+                    var core = 'Core: ' + states[variables.ulm_card_homeassistant_core].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_core].attributes.latest_version;
+                  } else {
+                    var core = 'Core: ' + states[variables.ulm_card_homeassistant_core].attributes.installed_version;
+                  }
+                }
+                if(variables.ulm_card_homeassistant_supervisor){
+                  if(states[variables.ulm_card_homeassistant_supervisor].state ==='True'){
+                    var supervisor = 'Supervisor: ' + states[variables.ulm_card_homeassistant_supervisor].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_supervisor].attributes.latest_version;
+                  } else {
+                    var supervisor = 'Supervisor: ' + states[variables.ulm_card_homeassistant_supervisor].attributes.installed_version;
+                  }
+                }
+                if(variables.ulm_card_homeassistant_os){
+                  if(states[variables.ulm_card_homeassistant_os].state ==='True'){
+                    var os = 'OS: ' + states[variables.ulm_card_homeassistant_os].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_os].attributes.latest_version;
+                  } else {
+                    var os = 'OS: ' + states[variables.ulm_card_homeassistant_os].attributes.installed_version;
+                  }
+                }
+                if(variables.ulm_card_homeassistant_core && variables.ulm_card_homeassistant_supervisor && variables.ulm_card_homeassistant_os){
+                  return supervisor + '<br>' + core + '<br>' + os;
+                } else if(variables.ulm_card_homeassistant_core && variables.ulm_card_homeassistant_supervisor){
+                  return supervisor + '<br>' + core;
+                } else if(variables.ulm_card_homeassistant_core){
+                  return core;
+                }
+              ]]]
+        styles:
+          icon:
+            - color: "rgba(var(--color-theme),0.9)"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:file-document"
+              tap_action:
+                action: "url"
+                url_path: "https://www.home-assistant.io/latest-release-notes/"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:cog"
+              tap_action:
+                action: "navigate"
+                navigation_path: "/developer-tools/yaml"
+
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:update"
+              tap_action:
+                action: "navigate"
+                navigation_path: "/config/dashboard"
+
+icon_info_updates:
+  color: "var(--google-grey)"
+  show_icon: true
+  show_label: true
+  show_name: true
+  state:
+    - value: "on"
+      styles:
+        custom_fields:
+          notification:
+            - border-radius: "50%"
+            - position: "absolute"
+            - left: "28px"
+            - top: "8px"
+            - height: "16px"
+            - width: "16px"
+            - border: "2px solid var(--card-background-color)"
+            - font-size: "12px"
+            - line-height: "14px"
+            - background-color: >
+                [[[
+                  return "rgba(var(--color-blue),1)";
+                ]]]
+        icon:
+          - color: "rgba(var(--color-blue),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-blue), 0.2)"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "16px"
+      - text-align: "start"
+    name:
+      - align-self: "end"
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "14px"
+      - margin-left: "16px"
+      - margin-bottom: "4px"
+    state:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+    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 n' 'i l'"
+      - grid-template-columns: "min-content auto"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - border-radius: "21px 8px 8px 21px"
+      - box-shadow: "none"
+      - padding: "0px"
+  custom_fields:
+    notification: >
+      [[[
+        if ( entity.state =="unavailable" || entity.state =="on" ){
+          return `<ha-icon icon="mdi:party-popper" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`;
+        }
+      ]]]
+  size: "20px"
+
    
+
    Template sensors code
    
+
    ```yaml
+sensor:
+  - platform: command_line
+    name: core_updates
+    command: 'curl http://supervisor/core/info -H "Authorization: Bearer $(printenv SUPERVISOR_TOKEN)" | jq ''{"latest_version":.data.version_latest,"installed_version":.data.version,"update_available":.data.update_available}'''
+    value_template: '{{ value_json.update_available }}'
+    scan_interval: 600
+    json_attributes:
+      - update_available
+      - latest_version
+      - installed_version
    
+
      
+
    • 
+
      platform: command_line
+    name: supervisor_updates
+    command: 'curl http://supervisor/supervisor/info -H "Authorization: Bearer $(printenv SUPERVISOR_TOKEN)" | jq ''{"latest_version":.data.version_latest,"installed_version":.data.version,"update_available":.data.update_available}'''
+    value_template: '{{ value_json.update_available }}'
+    scan_interval: 600
+    json_attributes:
      
+
        
+
      • update_available
        • 
+
      • latest_version
        • 
+
      • installed_version
        • 
+
      
+
      • 
+
    • 
+
      platform: command_line
+    name: os_updates
+    command: 'curl http://supervisor/os/info -H "Authorization: Bearer $(printenv SUPERVISOR_TOKEN)" | jq ''{"latest_version":.data.version_latest,"installed_version":.data.version,"update_available":.data.update_available}'''
+    value_template: '{{ value_json.update_available }}'
+    scan_interval: 600
+    json_attributes:
      
+
        
+
      • update_available
        • 
+
      • latest_version
        • 
+
      • installed_version
        • 
+
      
+
      • 
+
    • 
+
      platform: command_line
+    name: addons_updates
+    command: 'curl http://supervisor/addons -H "Authorization: Bearer $(printenv SUPERVISOR_TOKEN)" | jq ''{"addons":[.data.addons[] | select(.update_available)]}'''
+    value_template: '{{ value_json.addons | length }}'
+    scan_interval: 600
+    unit_of_measurement: pending update(s)
+    json_attributes:
      
+
        
+
      • addons
        • 
+
      
+
      • 
+
    
+
    binary_sensor:
+  - platform: template
+    sensors:
+      updater_core:
+        friendly_name: Core
+        device_class: problem
+        value_template: "{{ states('sensor.core_updates') }}"
+        attribute_templates:
+          installed_version: "{{ state_attr('sensor.core_updates', 'installed_version') }}"
+          latest_version: "{{ state_attr('sensor.core_updates', 'latest_version') }}"
+=======
    
+
    
+Template Code
+
    
+
    
+
    
+
    
+
    
+
    
+
    
+
    
+
    Stashed changes
    
+
    
+
    
+
    
+
    
+
    
+
    
+
    
+
    ```yaml title="custom_card_homeassistant_updates.yaml"
+---
+card_homeassistant_updates:
+  triggers_update: "all"
+  template:
+    - "ulm_language_variables"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        triggers_update: "all"
+        type: "custom:button-card"
+        template:
+          - "icon_info_updates"
+        icon: "mdi:home-assistant"
+        tap_action:
+          action: "none"
+        entity: "[[[ return variables.ulm_card_homeassistant_entity ]]]"
+        name: >
+              [[[
+                if(states[variables.ulm_card_homeassistant_core].state ==='True' || states[variables.ulm_card_homeassistant_supervisor].state ==='True' || states[variables.ulm_card_homeassistant_os].state ==='True'){
+                  return variables.ulm_updates_available;
+                } else {
+                  return variables.ulm_no_updates_available;
+                }
+              ]]]
+        label: >
+              [[[
+                if(variables.ulm_card_homeassistant_core){
+                  if(states[variables.ulm_card_homeassistant_core].state ==='True'){
+                    var core = 'Core: ' + states[variables.ulm_card_homeassistant_core].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_core].attributes.latest_version;
+                  } else {
+                    var core = 'Core: ' + states[variables.ulm_card_homeassistant_core].attributes.installed_version;
+                  }
+                }
+                if(variables.ulm_card_homeassistant_supervisor){
+                  if(states[variables.ulm_card_homeassistant_supervisor].state ==='True'){
+                    var supervisor = 'Supervisor: ' + states[variables.ulm_card_homeassistant_supervisor].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_supervisor].attributes.latest_version;
+                  } else {
+                    var supervisor = 'Supervisor: ' + states[variables.ulm_card_homeassistant_supervisor].attributes.installed_version;
+                  }
+                }
+                if(variables.ulm_card_homeassistant_os){
+                  if(states[variables.ulm_card_homeassistant_os].state ==='True'){
+                    var os = 'OS: ' + states[variables.ulm_card_homeassistant_os].attributes.installed_version + ' -> ' + states[variables.ulm_card_homeassistant_os].attributes.latest_version;
+                  } else {
+                    var os = 'OS: ' + states[variables.ulm_card_homeassistant_os].attributes.installed_version;
+                  }
+                }
+                if(variables.ulm_card_homeassistant_core && variables.ulm_card_homeassistant_supervisor && variables.ulm_card_homeassistant_os){
+                  return supervisor + '<br>' + core + '<br>' + os;
+                } else if(variables.ulm_card_homeassistant_core && variables.ulm_card_homeassistant_supervisor){
+                  return supervisor + '<br>' + core;
+                } else if(variables.ulm_card_homeassistant_core){
+                  return core;
+                }
+              ]]]
+        styles:
+          icon:
+            - color: "rgba(var(--color-theme),0.9)"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:file-document"
+              tap_action:
+                action: "url"
+                url_path: "https://www.home-assistant.io/latest-release-notes/"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:cog"
+              tap_action:
+                action: "navigate"
+                navigation_path: "/developer-tools/yaml"
+
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:update"
+              tap_action:
+                action: "navigate"
+                navigation_path: "/config/dashboard"
+
+icon_info_updates:
+  color: "var(--google-grey)"
+  show_icon: true
+  show_label: true
+  show_name: true
+  state:
+    - value: "on"
+      styles:
+        custom_fields:
+          notification:
+            - border-radius: "50%"
+            - position: "absolute"
+            - left: "28px"
+            - top: "8px"
+            - height: "16px"
+            - width: "16px"
+            - border: "2px solid var(--card-background-color)"
+            - font-size: "12px"
+            - line-height: "14px"
+            - background-color: >
+                [[[
+                  return "rgba(var(--color-blue),1)";
+                ]]]
+        icon:
+          - color: "rgba(var(--color-blue),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-blue), 0.2)"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "16px"
+      - text-align: "start"
+    name:
+      - align-self: "end"
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "14px"
+      - margin-left: "16px"
+      - margin-bottom: "4px"
+    state:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+    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 n' 'i l'"
+      - grid-template-columns: "min-content auto"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - border-radius: "21px 8px 8px 21px"
+      - box-shadow: "none"
+      - padding: "0px"
+  custom_fields:
+    notification: >
+      [[[
+        if ( entity.state =="unavailable" || entity.state =="on" ){
+          return `<ha-icon icon="mdi:party-popper" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`;
+        }
+      ]]]
+  size: "20px"
+
+```
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_httpedo13_sun/index.html b/usage/custom_cards/custom_card_httpedo13_sun/index.html
new file mode 100644
index 000000000..ed5bf6248
--- /dev/null
+++ b/usage/custom_cards/custom_card_httpedo13_sun/index.html
@@ -0,0 +1,3901 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Sun Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Sun"
    
+
    The custom_card_httpedo13_sun adapt sun card for minimalist ui.
    
+
    Credits
    
+
    Author: httpedo13 - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Requirements
    
+
    This card uses:
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Component / cardrequiredLink
    Sun integrationyesmore info
    Sun cardyesmore info
    
+
+
    Images
    
+
    Generic
    
+
    Usage
    
+
      - type: custom:button-card
+    template: custom_card_httpedo13_sun
+    variables:
+      language: 'it'
+
    
+
    Variables
    
+
    The same sun card config.
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    NameAccepted valuesDescriptionDefault
    darkModebooleanChanges card colors to dark or lightHome assistant dark mode state
    languagestring1Changes card languageHome assistant language or english if not supported
    showAzimuthbooleanDisplays azimuth in the footerfalse
    showElevationbooleanDisplays elevation in the footerfalse
    timeFormat'12h'/'24h'Displayed time formatLocale based on Home assistant language
    titlestringCard titleDoesn't display a title by default
    
+
    (1) Supported languages: da, de, en, es, et, fi, fr, hu, it, nl, pl, pt-BR, ru, sl, sv
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_httpedo13_thermostat/index.html b/usage/custom_cards/custom_card_httpedo13_thermostat/index.html
new file mode 100644
index 000000000..115b698c4
--- /dev/null
+++ b/usage/custom_cards/custom_card_httpedo13_thermostat/index.html
@@ -0,0 +1,4315 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Thermostat Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Thermostat"
    
+
    The custom_card_httpedo13_thermostat shows data from your thermostat and gives you the possibility to control it. Thanks to tpx01's air-condition custom card!
    
+
    Credits
    
+
    Author: httpedo13 - 2021
+Version: 1.0.0
    
+
    This design was made by tpx01's
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Images
    
+
    thermostat_white_collapse
    
+
    thermostat_white
    
+
    thermostat_white_with_heating_ui
    
+
    thermostat_dark
    
+
    thermostat_dark_with_heating_ui
    
+
    Usage
    
+
    With buttons:
    
+
    - type: custom:button-card
+  template: custom_card_httpedo13_thermostat_with_buttons
+  variables:
+    entity: climate.ground_floor
+    name: Heater Ground Floor
+
    
+
    With collapse button:
    
+
    - type: custom:button-card
+  template: custom_card_httpedo13_thermostat_with_buttons_collapse
+  variables:
+    entity: climate.ground_floor
+    name: Heater Ground Floor
+
    
+
    Requirements
    
+
    Entity climate with only heat mode
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    entityclimate.ground_flooryesYour climate with only heat mode entity
    nameHeater Ground FlooryesThe name to show
    
+
+
    
+Template Code
+
    custom_card_httpedo13_thermostat.yaml
    ---
+custom_card_httpedo13_thermostat:
+  template:
+    - "ulm_translation_engine"
+  tap_action:
+    action: "toggle"
+  icon: |
+    [[[
+        if (entity.attributes.hvac_action == 'heating') {
+          return "mdi:radiator";
+        }
+        return "mdi:radiator-off";
+    ]]]
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  state:
+    - operator: "template"
+      value: >
+        [[[
+          return entity.state != 'off';
+        ]]]
+      styles:
+        label:
+          - color: |
+              [[[
+                if (entity.attributes.hvac_action == 'heating'){
+                  return "var(--card-background-color)";
+                }
+                return "rgba(var(--color-theme),0.9)";
+              ]]]
+        name:
+          - font-weight: "bold"
+          - color: |
+              [[[
+                if (entity.attributes.hvac_action == 'heating'){
+                  return "var(--card-background-color)";
+                }
+                return "rgba(var(--color-theme),0.9)";
+              ]]]
+        icon:
+          - color: "rgba(var(--color-red),1)"
+        img_cell:
+          - background-color: |
+              [[[
+                if (entity.attributes.hvac_action == 'heating'){
+                  return 'var(--card-background-color)';
+                }
+                return 'rgba(var(--color-red),0.2)';
+              ]]]
+        card:
+          - background-color: |
+              [[[
+                if (entity.attributes.hvac_action == 'heating'){
+                  return '#ff8100';
+                }
+                return 'var(--card-background-color)';
+              ]]]
+
+custom_card_httpedo13_thermostat_with_buttons:
+  triggers_update: "all"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - background-color: |
+          [[[
+            if (states[variables.entity].attributes.hvac_action == 'heating'){
+              return '#ff8100';
+            }
+            return 'var(--card-background-color)';
+          ]]]
+  tap_action:
+    action: "perform-action"
+    perform_action: "climate.set_hvac_mode"
+    target:
+      entity_id: "[[[ return variables.entity ]]]"
+    data:
+      hvac_mode: |
+        [[[
+          if (states[variables.entity].state == "off"){
+            return 'heat';
+          } else if (states[variables.entity].state == "heat"){
+            return 'off';
+          }
+        ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "list_items_favorite"
+        styles:
+          card:
+            - background-color: |
+                [[[
+                  if (states[variables.entity].attributes.hvac_action == 'heating'){
+                    return '#ff8100';
+                  }
+                  return 'var(--card-background-color)';
+                ]]]
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template:
+                - "icon_info"
+                - "custom_card_httpedo13_thermostat"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_hvac_mode"
+                target:
+                  entity_id: "[[[ return variables.entity ]]]"
+                data:
+                  hvac_mode: |
+                    [[[
+                      if (states[variables.entity].state == "off"){
+                        return 'heat';
+                      } else if (states[variables.entity].state == "heat"){
+                        return 'off';
+                      }
+                    ]]]
+              name: >
+                [[[
+                    if (variables.name == null) {
+                      return variables.entity;
+                    }
+                    return variables.name;
+                ]]]
+              entity: "[[[ return variables.entity ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_current_temperature"
+              tap_action:
+                action: "toggle"
+              entity: "[[[ return variables.entity ]]]"
+              icon: "mdi:temperature-celsius"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        styles:
+          card:
+            - background-color: |
+                [[[
+                  if (states[variables.entity].attributes.hvac_action == 'heating'){
+                    return '#ff8100';
+                  }
+                  return 'var(--card-background-color)';
+                ]]]
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon_for_thermostat"
+              entity: "[[[ return variables.entity ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return variables.entity ]]]"
+                data:
+                  temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) - 0.5)  ]]]"
+              icon: "mdi:minus"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_temperature"
+              tap_action:
+                action: "toggle"
+              entity: "[[[ return variables.entity ]]]"
+              icon: "mdi:temperature-celsius"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon_for_thermostat"
+              entity: "[[[ return variables.entity ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return variables.entity ]]]"
+                data:
+                  temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) + 0.5)  ]]]"
+              icon: "mdi:plus"
+
+custom_card_httpedo13_thermostat_with_buttons_collapse:
+  triggers_update: "all"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - background-color: |
+          [[[
+            if (states[variables.entity].attributes.hvac_action == 'heating'){
+              return '#ff8100';
+            }
+            return 'var(--card-background-color)';
+          ]]]
+  tap_action:
+    action: "perform-action"
+    perform_action: "climate.set_hvac_mode"
+    target:
+      entity_id: "[[[ return variables.entity ]]]"
+    data:
+      hvac_mode: |
+        [[[
+          if (states[variables.entity].state == "off"){
+            return 'heat';
+          } else if (states[variables.entity].state == "heat"){
+            return 'off';
+          }
+        ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "list_items_favorite"
+        styles:
+          card:
+            - background-color: |
+                [[[
+                  if (states[variables.entity].attributes.hvac_action == 'heating'){
+                    return '#ff8100';
+                  }
+                  return 'var(--card-background-color)';
+                ]]]
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template:
+                - "icon_info"
+                - "custom_card_httpedo13_thermostat"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_hvac_mode"
+                target:
+                  entity_id: "[[[ return variables.entity ]]]"
+                data:
+                  hvac_mode: |
+                    [[[
+                      if (states[variables.entity].state == "off"){
+                        return 'heat';
+                      } else if (states[variables.entity].state == "heat"){
+                        return 'off';
+                      }
+                    ]]]
+              name: >
+                [[[
+                    if (variables.name == null) {
+                      return variables.entity;
+                    }
+                    return variables.name;
+                ]]]
+              entity: "[[[ return variables.entity ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_current_temperature"
+              tap_action:
+                action: "toggle"
+              entity: "[[[ return variables.entity ]]]"
+              icon: "mdi:temperature-celsius"
+    item2:
+      card:
+        type: "conditional"
+        conditions:
+          - entity: "[[[ return states[variables.entity].entity_id ]]]"
+            state: "heat"
+        card:
+          type: "custom:button-card"
+          template: "list_3_items"
+          styles:
+            card:
+              - background-color: |
+                  [[[
+                    if (states[variables.entity].attributes.hvac_action == 'heating'){
+                      return '#ff8100';
+                    }
+                    return 'var(--card-background-color)';
+                  ]]]
+          custom_fields:
+            item1:
+              card:
+                type: "custom:button-card"
+                template: "widget_icon_for_thermostat"
+                entity: "[[[ return variables.entity ]]]"
+                tap_action:
+                  action: "perform-action"
+                  perform_action: "climate.set_temperature"
+                  target:
+                    entity_id: "[[[ return variables.entity ]]]"
+                  data:
+                    temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) - 0.5)  ]]]"
+                icon: "mdi:minus"
+            item2:
+              card:
+                type: "custom:button-card"
+                template: "widget_temperature"
+                tap_action:
+                  action: "toggle"
+                entity: "[[[ return variables.entity ]]]"
+                icon: "mdi:temperature-celsius"
+            item3:
+              card:
+                type: "custom:button-card"
+                template: "widget_icon_for_thermostat"
+                entity: "[[[ return variables.entity ]]]"
+                tap_action:
+                  action: "perform-action"
+                  perform_action: "climate.set_temperature"
+                  target:
+                    entity_id: "[[[ return variables.entity ]]]"
+                  data:
+                    temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) + 0.5)  ]]]"
+                icon: "mdi:plus"
+
+widget_current_temperature:
+  color: "var(--google-grey-500)"
+  show_icon: false
+  show_name: false
+  show_label: true
+  size: "20px"
+  label: |-
+    [[[
+        var temperature = entity.attributes.current_temperature;
+        if (temperature == null) {
+          var temperature = '-';
+        }
+        return temperature + '°C'
+    ]]]
+  styles:
+    label:
+      - font-weight: "bold"
+      - color: |
+          [[[
+            if (entity.attributes.hvac_action == 'heating'){
+              return 'var(--card-background-color)';
+            }
+            return 'rgb(var(--color-theme),0.9)';
+          ]]]
+    grid:
+      - grid-template-areas: "'l'"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - border-radius: "14px"
+      - place-self: "center"
+      - height: "42px"
+      - background-color: |
+          [[[
+            if (entity.attributes.hvac_action == 'heating'){
+              return '#ff8100';
+            }
+            return 'var(--card-background-color)';
+          ]]]
+
+widget_temperature:
+  color: "var(--google-grey-500)"
+  show_icon: false
+  show_name: false
+  show_label: true
+  size: "20px"
+  label: |-
+    [[[
+        var temperature = entity.attributes.temperature;
+        if (temperature == null) {
+          var temperature = '-';
+        }
+        return temperature + '°C'
+    ]]]
+  styles:
+    label:
+      - color: |
+          [[[
+            if (entity.attributes.hvac_action == 'heating'){
+              return 'var(--card-background-color)';
+            }
+            return 'rgb(var(--color-theme),0.9)';
+          ]]]
+    grid:
+      - grid-template-areas: "'l'"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - border-radius: "14px"
+      - place-self: "center"
+      - height: "42px"
+      - background-color: |
+          [[[
+            if (entity.attributes.hvac_action == 'heating'){
+              return '#ff8100';
+            }
+            return 'var(--card-background-color)';
+          ]]]
+
+widget_icon_for_thermostat:
+  tap_action:
+    action: "toggle"
+  show_icon: true
+  show_name: false
+  styles:
+    grid:
+      - grid-template-areas: "'i'"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - background-color: |
+          [[[
+            if (entity.attributes.hvac_action == 'heating'){
+              return 'var(--card-background-color)';
+            }
+            return 'rgba(var(--color-theme),0.05)';
+          ]]]
+      - border-radius: "14px"
+      - place-self: "center"
+      - height: "42px"
+    icon:
+      - color: "rgba(var(--color-theme),0.9)"
+  size: "20px"
+  color: "var(--google-grey)"
+
+list_items_favorite:
+  styles:
+    grid:
+      - grid-template-areas: "'item1 item1 item2'"
+      - grid-template-columns: "1fr 1fr 1fr"
+      - grid-template-rows: "min-content"
+      - column-gap: "7px"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_iAbadia_battery_chip/index.html b/usage/custom_cards/custom_card_iAbadia_battery_chip/index.html
new file mode 100644
index 000000000..e0a965425
--- /dev/null
+++ b/usage/custom_cards/custom_card_iAbadia_battery_chip/index.html
@@ -0,0 +1,3914 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        iAbadia's Battery Chip Custom Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Battery Chip"
    
+
    This is a custom-card or custom-chip to see your device's battery level at a glance.
    
+
    Screenshot
    
+
    Credits
    
+
    Author: Iñaki Abadia - 2024
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Requirements
    
+
    None
    
+
    Usage
    
+
    type: "custom:button-card"
+template: custom_card_iAbadia_battery_chip
+variables:
+  ulm_custom_card_iAbadia_battery_chip_entity: sensor.living_room_sensor_battery
+  ulm_custom_card_iAbadia_battery_chip_icon: mdi:thermostat
+  ulm_custom_card_iAbadia_battery_chip_warning: 30
+  ulm_custom_card_iAbadia_battery_chip_danger: 10
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_custom_card_iAbadia_battery_chip_entitysensor.temperature✓Battery entity
    ulm_custom_card_iAbadia_battery_chip_iconmdi:thermometer✘Icon to be displayed. Will default to mdi:battery
    ulm_custom_card_iAbadia_battery_chip_warning20✘Battery level below which to color as warning (yellow)
    ulm_custom_card_iAbadia_battery_chip_danger10✘Battery level below which to color as danger (red)
    
+
    Template Code
    
+
    
+Template Code
+
    custom_card_irmajavi_speedtest.yaml
    ---
+custom_card_iAbadia_battery_chip:
+  template:
+    - "chips"
+  variables:
+    ulm_custom_card_iAbadia_battery_chip_entity: ""
+    ulm_custom_card_iAbadia_battery_chip_icon: ""
+    ulm_custom_card_iAbadia_battery_chip_danger: "10"
+    ulm_custom_card_iAbadia_battery_chip_warning: "20"
+  show_icon: true
+  triggers_update: "all"
+  icon: >
+    [[[
+      if (variables.ulm_custom_card_iAbadia_battery_chip_icon){
+        return variables.ulm_custom_card_iAbadia_battery_chip_icon;
+      } else {
+        return "mdi:battery"
+      }
+    ]]]
+  entity: "[[[ return variables.ulm_custom_card_iAbadia_battery_chip_entity; ]]]"
+  tap_action:
+    action: "more-info"
+    entity: "[[[ return variables.ulm_custom_card_iAbadia_battery_chip_entity; ]]]"
+  styles:
+    icon:
+      - color: >
+          [[[
+            let battery_level = Math.round((states[variables.ulm_custom_card_iAbadia_battery_chip_entity].state)/1);
+            if (battery_level > variables.ulm_custom_card_iAbadia_battery_chip_warning) {
+              return "var(--google-green)"
+            } else if (battery_level <= variables.ulm_custom_card_iAbadia_battery_chip_warning && battery_level > variables.ulm_custom_card_iAbadia_battery_chip_danger) {
+              return "var(--google-yellow)"
+            } else {
+              return "var(--google-red)"
+            }
+          ]]]
+    grid:
+      - grid-template-areas: "'i'"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_imswel_medias/index.html b/usage/custom_cards/custom_card_imswel_medias/index.html
new file mode 100644
index 000000000..58ad3870a
--- /dev/null
+++ b/usage/custom_cards/custom_card_imswel_medias/index.html
@@ -0,0 +1,4071 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom Card Media - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom Card "Media"
    
+
    These are some custom-card for your plex, radarr and sonarr media libraries.
    
+
    example-image-radarr
+example-image-sonarr
    
+example-image-plex
    
+
    Credits
    
+
      
+
    • Author: imswel - 2023
      • 
+
    • Version: 1.0.0
      • 
+
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Requirements
    
+
    This card needs the following to function correctly:
+| Component                                                                                 | Required                           |
+| ----------------------------------------------------------------------------------------- | ---------------------------------- |
+|Plex Recently Added             | Yes for Media Library Card   |
+|Radarr Upcoming Media | Yes for Media Upcoming Card  |
+|Sonarr Upcoming Media | Yes for Media Upcoming Card  |
    
+
    Usage
    
+
    Media Library Card for Plex Recently Added :
    
+
    example-image-plex
    
+| Variable                              | Default | Required | Notes                                                                   |
+| -----------------------------         | ------- | -------- | ----------------------------------------------------------------------- |
+| ulm_custom_card_imswel_medias_index   |    1    | Yes      | The index of the item in your Plex library  to show.                |
    
+
    - type: custom:button-card
+  template: "custom_card_imswel_medias_library"
+  entity: sensor.plex_recently_added
+  variables:
+    ulm_custom_card_imswel_medias_index: 1
+
    
+

    
+
    Media Upcoming Card for Radarr Upcoming Media & Sonarr Upcoming Media :
    
+
    example-image-radarr
+example-image-sonarr
    
+| Variable                              | Default | Required | Notes                                                                                                    |
+| -----------------------------         | ------- | -------- | -------------------------------------------------------------------------------------------------------- |
+| ulm_custom_card_imswel_medias_index   | 1       | Yes      | The index of the item in your Radarr/Sonarr library to show.                                         |
+| ulm_custom_card_imswel_medias_platform| radarr  | Yes      | The platform to choose depending on the selected entity. 
     Can be: radarr or sonarr. 
     |
    
+
    - type: custom:button-card
+  template: "custom_card_imswel_medias_upcoming"
+  entity: sensor.sonarr_upcoming_media
+  variables:
+    ulm_custom_card_imswel_medias_index: 1
+    ulm_custom_card_imswel_medias_platform: "sonarr"
+
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_imswel_medias.yaml
    ---
+custom_card_imswel_medias:
+  show_icon: false
+  show_label: true
+  show_name: true
+  show_state: false
+  styles:
+    label:
+      - z-index: 2
+      - color: "white"
+      - font-weight: "bold"
+      - font-size: "12px"
+      - filter: "opacity(60%)"
+    name:
+      - z-index: 2
+      - color: "white"
+      - font-weight: "bold"
+      - font-size: "14px"
+    card:
+      - z-index: 0
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - background-size: "cover"
+      - background-position: "center center"
+      - text-shadow: >
+          [[[
+            return entity == "undefined" ? "none" : "1px 1px 5px rgba(18, 22, 23, 0.9)";
+          ]]]
+
+custom_card_imswel_medias_library:
+  template:
+    - "custom_card_imswel_medias"
+    - "ulm_translation_engine"
+    - "custom_card_imswel_medias_language_variables"
+  variables:
+    ulm_custom_card_imswel_medias_index: 1
+  triggers_update: "[[[ return entity.entity_id; ]]]"
+  aspect_ratio: "5/2"
+  label: >
+    [[[
+      if (entity.state == "unavailable" || entity.state == "undefined"){
+        return variables.ulm_translation_unavailable;
+      } else{
+        var data = entity.attributes.data;
+        if (data[variables.ulm_custom_card_imswel_medias_index].number == undefined){
+          var number = '(' + data[variables.ulm_custom_card_imswel_medias_index].aired.split('-')[0] + ')';
+        } else{
+          var number = data[variables.ulm_custom_card_imswel_medias_index].number;
+        }
+        return `${data[variables.ulm_custom_card_imswel_medias_index].title} ${number}`;
+      }
+    ]]]
+  name: "[[[ return variables.ulm_custom_card_imswel_recentlyadded ]]]"
+  styles:
+    label:
+      - align-self: "start"
+      - justify-self: "start"
+      - margin-left: "12px"
+    name:
+      - align-self: "end"
+      - justify-self: "start"
+      - margin-left: "12px"
+    grid:
+      - grid-template-areas: "'icon .' 'n n' 'l l' '. .'"
+      - grid-template-rows: "auto repeat(2, min-content) 12px"
+    card:
+      - padding: "0px"
+      - background-image: >
+          [[[
+            return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].fanart})`;
+          ]]]
+      - border: "none"
+    custom_fields:
+      icon:
+        - z-index: 2
+        - align-self: "start"
+        - justify-self: "start"
+        - height: "24px"
+        - width: "24px"
+        - margin-left: "12px"
+        - margin-top: "12px"
+      blur:
+        - z-index: 1
+        - position: "absolute"
+        - top: 0
+        - left: 0
+        - height: "100%"
+        - width: "100%"
+        - border-radius: "var(--border-radius)"
+        - background: "linear-gradient(rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%)"
+  custom_fields:
+    icon: >
+      <svg viewBox="0 0 50 50">
+        <path d="M7.7.3h34.6c4.1 0 7.4 3.3 7.4 7.4v34.6c0 4.1-3.3 7.4-7.4 7.4H7.7c-4.1 0-7.4-3.3-7.4-7.4V7.7C.3 3.6 3.6.3 7.7.3z" fill="#282a2d"/>
+        <path d="M25,7.1H14.6L25,25L14.6,42.9H25L35.4,25L25,7.1z" fill="#e5a00d"/>
+      </svg>
+    blur: >
+      [[[ return entity === undefined ? null : "<div id='blur'></div>"; ]]]
+
+custom_card_imswel_medias_upcoming:
+  template:
+    - "custom_card_imswel_medias"
+    - "ulm_translation_engine"
+    - "custom_card_imswel_medias_language_variables"
+  variables:
+    ulm_custom_card_imswel_medias_index: 1
+    ulm_custom_card_imswel_medias_platform: >
+      [[[
+        if (entity.entity_id.includes("sonarr")){
+          return "sonarr";
+        } else if(entity.entity_id.includes("plex")){
+          return "plex";
+        } else{
+          return "radarr";
+        }
+      ]]]
+  triggers_update: "all"
+  aspect_ratio: "3/4"
+  label: >
+    [[[
+      var data = entity.attributes?.data;
+      var platform = variables.ulm_custom_card_imswel_medias_platform;
+      var airdate = new Date(data[variables.ulm_custom_card_imswel_medias_index].airdate);
+
+      Date.prototype.addDays = function (days) {
+        const date = new Date(this.valueOf());
+        date.setDate(date.getDate() + days);
+        return date;
+      }
+
+      function formatRelease(release){
+        if(release.includes("Available")){
+          return ""
+        } else if (release.includes("In Theaters")){
+          return variables.ulm_custom_card_imswel_in_theaters;
+        }
+      }
+
+      function formatDate(date){
+        var weekday = variables.ulm_custom_card_imswel_weekday;
+        var now = new Date();
+        var tomorrow = now.addDays(1);
+
+        var time = date - now;
+        var secs = parseInt((time / 1000), 10);
+        var days = Math.floor(secs / (3600*24));
+
+        if (days < 6){
+          if (weekday[date.getDay()] == weekday[now.getDay()]){
+            return variables.ulm_custom_card_imswel_today;
+          } else if (weekday[date.getDay()] == weekday[tomorrow.getDay()]){
+            return variables.ulm_custom_card_imswel_tommorow;
+          } else{
+            return weekday[date.getDay()];
+          }
+        } else{
+          return date.toLocaleDateString(variables.ulm_custom_card_imswel_locale);
+        }
+      }
+
+      if(platform == "radarr"){
+        var release = data[variables.ulm_custom_card_imswel_medias_index].release;
+        return formatDate(airdate) + " " + formatRelease(release);
+      } else if(platform == "sonarr"){
+        return formatDate(airdate);
+      }
+    ]]]
+  name: >
+    [[[
+      if (entity.state == "unavailable" || entity.state == "undefined"){
+        return variables.ulm_translation_unavailable;
+      } else{
+        var data = entity.attributes?.data;
+        var platform = variables.ulm_custom_card_imswel_medias_platform;
+
+        if(platform == "radarr"){
+          return `${data[variables.ulm_custom_card_imswel_medias_index].title}`;
+        } else if(platform =="sonarr"){
+          var number = data[variables.ulm_custom_card_imswel_medias_index].number;
+          return `${data[variables.ulm_custom_card_imswel_medias_index].title} - ${number}`;
+        }
+      }
+    ]]]
+  styles:
+    icon:
+    label:
+      - align-self: "start"
+      - justify-self: "center"
+    name:
+      - align-self: "end"
+      - justify-self: "center"
+    state:
+    img_cell:
+    grid:
+      - grid-template-areas: "'. . .' '. n .' '. l .' '. . .'"
+      - grid-template-columns: "8px 1fr 8px"
+      - grid-template-rows: "auto repeat(2, min-content) 8px"
+    card:
+      - background-image: >
+          [[[
+            return entity === undefined || `url(${states[entity.entity_id].attributes.data[variables.ulm_custom_card_imswel_medias_index].poster})`;
+          ]]]
+      - border: "none"
+    custom_fields:
+      overlay:
+        - z-index: 1
+        - position: "absolute"
+        - top: 0
+        - left: 0
+        - height: "100%"
+        - width: "100%"
+        - border-radius: "var(--border-radius)"
+        - background: "linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%)"
+  extra_styles: >
+    .ellipsis:not(#overlay){
+      white-space: normal !important;
+      word-wrap: break-all;
+      max-height: 2.4em;
+      line-height: 1.2em;
+    }
+  custom_fields:
+    overlay: >
+      [[[ return entity === undefined ? null : "<div id='overlay'></div>"; ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_imswel_person/index.html b/usage/custom_cards/custom_card_imswel_person/index.html
new file mode 100644
index 000000000..813ba2564
--- /dev/null
+++ b/usage/custom_cards/custom_card_imswel_person/index.html
@@ -0,0 +1,4187 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Person Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Person"
    
+
    This is a custom-card that improves the original person card (card_person) by automatically using all zones and adding a pop-up window inspired by the nice theme of @matt8707
    
+
    Generic
    
+
    Credits
    
+
    Author: imswel - 2022
+Version: 1.0.2
    
+
    Changelog
    
+
    
+  1.0.2
+  UI fix and improvement.
+
    
+
    
+  1.0.1
+  Breaking change: removed variable for zones, instead load all zones automatically.
+
    
+
    
+  1.0.0
+  Initial release
+
    
+
+
    Requirements
    
+
    This card needs the following to function correctly:
    
+
+  
+    
+    
+  
+  
+    
+    
+  
+  
+    
+    
+  
+
    Component / cardrequired
    browser_modyes
    lovelace-card-modyes
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_imswel_person
+  variables:
+    ulm_card_imswel_person_entity: person.john
+    ulm_card_imswel_person_wifi_tracker: device_tracker.my_phone_wifi
+    ulm_card_imswel_person_gps_tracker: device_tracker.my_phone
+    ulm_card_imswel_person_findmy_script: script.find_my_phone
+    ulm_card_imswel_person_use_entity_picture: true
+
    
+
    Variables
    
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
    VariableExampleRequiredExplanation
    ulm_card_imswel_person_entityperson.johnyesThe person entity
    ulm_card_imswel_person_wifi_trackerdevice_tracker.my_phone_wifiyesA device_tracker entity of the person based on wifi
    ulm_card_imswel_person_gps_trackerdevice_tracker.my_phoneyesA device_tracker entity of the person based on location
    ulm_card_imswel_person_findmy_scriptscript.find_my_phoneyesA script entity that make ring your phone
    ulm_card_imswel_person_use_entity_picturetrue or falsenoIf true, shows the entity picture from your user instead of the icon. Default is false
    
+
+
    Phone finder script example
    
+
    find_my_phone:
+  sequence:
+  - service: notify.mobile_app_my_android
+    data:
+      message: command_volume_level
+      data:
+        media_stream: alarm_stream
+        command: 20
+  - service: notify.mobile_app_my_android
+    data:
+      message: Home Assistant is searching your phone !
+      data:
+        ttl: 0
+        priority: high
+        channel: alarm_stream
+  mode: single
+
    
+
    
+Template Code
+
    custom_card_imswel_person.yaml
    ---
+custom_card_imswel_person:
+  template:
+    - "ulm_translation_engine"
+    - "icon_info_bg"
+    - "ulm_custom_card_imswel_person_language_variables"
+    - "custom_popup_imswel_person"
+  variables:
+    ulm_card_imswel_person_use_entity_picture: false
+  triggers_update: "[[[ return variables.ulm_card_imswel_person_entity ]]]"
+  show_entity_picture: "[[[ return variables.ulm_card_imswel_person_use_entity_picture ]]]"
+  show_label: true
+  show_name: true
+  icon: "mdi:face-man"
+  entity_picture: >
+    [[[
+      if (variables.ulm_card_imswel_person_use_entity_picture == true){
+        return states[variables.ulm_card_imswel_person_entity].attributes.entity_picture;
+      } else{
+        return null;
+      }
+    ]]]
+  label: >
+    [[[
+      let state = states[variables.ulm_card_imswel_person_entity].state;
+      let option = ["home", "not_home", "unavailable", "unknown"];
+      if (option.includes(state)){
+        if (state == "home"){
+          return variables.ulm_custom_card_imswel_person_home;
+        } else if (state == "not_home"){
+          return variables.ulm_custom_card_imswel_person_not_home;
+        } else{
+          return variables.ulm_translation_unavailable;
+        }
+      } else{
+        return state;
+      }
+    ]]]
+  name: "[[[ return states[variables.ulm_card_imswel_person_entity].attributes.friendly_name ]]]"
+  entity: "[[[ return variables.ulm_card_imswel_person_entity; ]]]"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme), 0.9)"
+      - width: >
+          [[[
+            if (variables.ulm_card_imswel_person_use_entity_picture == true){
+              return "42px";
+            } else {
+              return "20px";
+            }
+          ]]]
+    custom_fields:
+      notification:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "38px"
+        - top: "8px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: >
+            [[[
+              let state = states[variables.ulm_card_imswel_person_entity].state;
+              let option = ["unavailable", "unknown"];
+              if (option.includes(state)){
+                return "rgba(var(--color-red),1)";
+              } else if (state == 'home') {
+                return "rgba(var(--color-blue),1)";
+              } else {
+                return "rgba(var(--color-green),1)";
+              }
+            ]]]
+  custom_fields:
+    notification: >
+      [[[
+        var zones = Object.values(states).filter((entity) => entity.entity_id.startsWith("zone.")).map((entity) => entity.entity_id);
+        var person_location = states[variables.ulm_card_imswel_person_entity].state;
+        let option = ["unavailable", "unknown"];
+        if (option.includes(person_location)){
+          return '<ha-icon icon="mdi:alert" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        } else{
+          if (person_location == "home"){
+            return '<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+          } else{
+            for (const item of zones){
+              if (person_location == states[item]?.attributes?.friendly_name){
+                var icon = (states[item].attributes.icon !== null) ? states[item].attributes.icon : 'mdi:help-circle';
+                return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+              } else if (person_location == 'not_home'){
+                return '<ha-icon icon="mdi:home-minus" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+              }
+            }
+          }
+        }
+      ]]]
+
+custom_popup_imswel_person:
+  tap_action:
+    action: "fire-dom-event"
+    browser_mod:
+      service: "browser_mod.popup"
+      data:
+        title: "[[[ return states[variables.ulm_card_imswel_person_entity].attributes.friendly_name ]]]"
+        size: >
+          [[[
+            const mediaQuery = window.matchMedia("(max-width: 800px)")
+            if (mediaQuery.matches) {
+              return "fullscreen";
+            }
+          ]]]
+        style: >
+          --popup-padding-x: 0px;
+          --popup-padding-y: 0px;
+        card_mod:
+          style:
+            ha-dialog: >
+              .content .container{
+                padding: 0 !important;
+              }
+        content:
+          type: "vertical-stack"
+          cards:
+            - type: "entities"
+              style: >
+                ha-card{
+                  box-shadow: none;
+                }
+              entities:
+                - entity: "[[[ return variables.ulm_card_imswel_person_entity; ]]]"
+                  secondary_info: "last-changed"
+            - type: "history-graph"
+              style: >
+                ha-card{
+                  box-shadow: none;
+                }
+              hours_to_show: 8
+              entities:
+                - entity: "[[[ return variables.ulm_card_imswel_person_entity; ]]]"
+                  name: "‎"
+            - type: "horizontal-stack"
+              cards:
+                - type: "custom:button-card"
+                  template: "custom_card_imswel_person_glance_icon"
+                  entity: "[[[ return variables.ulm_card_imswel_person_wifi_tracker; ]]]"
+                  name: "WiFi"
+                  icon: "mdi:wifi"
+                - type: "custom:button-card"
+                  template: "custom_card_imswel_person_glance_icon"
+                  entity: "[[[ return variables.ulm_card_imswel_person_gps_tracker; ]]]"
+                  name: "GPS"
+                  icon: "mdi:map-marker"
+            - type: "custom:button-card"
+              template: "custom_card_imswel_person_findmy_button"
+              entity: "[[[ return variables.ulm_card_imswel_person_findmy_script; ]]]"
+            - type: "map"
+              style:
+                .: >
+                  ha-card{
+                    box-shadow: none;
+                    border-radius: 0px;
+                  }
+                ha-map:
+                  $: >
+                    .leaflet-control-attribution {
+                      display: none;
+                    }
+              aspect_ratio: "90%"
+              default_zoom: 16
+              entities: "[[[ return [variables.ulm_card_imswel_person_gps_tracker]; ]]]"
+
+custom_card_imswel_person_glance_icon:
+  variables:
+    color: "green"
+    state: "home"
+  tap_action:
+    action: "none"
+  triggers_update: "[[[ return entity.entity_id; ]]]"
+  show_label: false
+  show_state: false
+  size: "20px"
+  state:
+    - operator: "template"
+      value: "[[[ return entity.state == variables.state; ]]]"
+      styles:
+        icon:
+          - color: "[[[ return `rgba(var(--color-${variables.color}), 1)`; ]]]"
+        img_cell:
+          - background-color: "[[[ return `rgba(var(--color-${variables.color}), 0.2)`; ]]]"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+    name:
+      - margin-bottom: "12px"
+      - justify-self: "center"
+      - align-self: "start"
+      - font-weight: "regular"
+      - font-size: "14px"
+    img_cell:
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "50%"
+      - place-self: "center"
+      - width: "42px"
+      - height: "42px"
+    grid:
+      - grid-template-areas: "'n' 'i'"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "none"
+
+custom_card_imswel_person_findmy_button:
+  template:
+    - "ulm_custom_card_imswel_person_language_variables"
+  tap_action:
+    action: "toggle"
+  icon: "mdi:volume-high"
+  size: "1.4em"
+  name: "[[[ return variables.ulm_custom_card_imswel_person_findmy; ]]]"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.4)"
+    name:
+      - font-size: "1.06em"
+      - letterspacing: "0.015em"
+      - color: "rgba(var(--color-theme),1)"
+      - filter: "opacity(60%)"
+    img_cell:
+      - margin-right: "4px"
+    grid:
+      - grid-template-areas: "'i n'"
+      - grid-column-gap: "0.3em"
+    card:
+      - border-radius: "var(--border-radius)"
+      - padding: "1em 1.4em"
+      - margin: "16px auto"
+      - width: "100%"
+      - font-size: "1.06em"
+      - box-shadow: "none"
+      - border: "1px solid rgba(var(--color-theme),0.4)"
+  extra_styles: >
+    :host{
+      align-self: center !important;
+    }
+    ha-card:hover{
+      background: rgba(var(--color-blue),0.2);
+      border: 1px solid rgba(var(--color-blue),0.1) !important;
+    }
+    ha-card:hover #name{
+      color: rgba(var(--color-blue),1) !important;
+      filter: opacity(100%) !important;
+    }
+    ha-card:hover #icon{
+      color: rgba(var(--color-blue),1) !important;
+    }
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_input_datetime/index.html b/usage/custom_cards/custom_card_input_datetime/index.html
new file mode 100644
index 000000000..8c6c5488f
--- /dev/null
+++ b/usage/custom_cards/custom_card_input_datetime/index.html
@@ -0,0 +1,4024 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Input Datetime Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+                  
    
+                
    
+              
    
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Input Datetime Card"
    
+
    The card_input_datetime you can control a input_datetime entity.
    
+
    Input Datetime Card
    
+
    Credits
    
+
    Author: sildehoop - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template:
+    - card_input_datetime
+  entity: input_datetime.YOUR_INPUT_DATETIME_ENTITY
+  variables:
+    ulm_card_input_datetime_name: "YOUR_NAME"
+
    
+
    Requirements
    
+
    n/a
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_input_datetime.yaml
    ---
+card_input_datetime:
+  show_name: false
+  show_icon: false
+  variables:
+    ulm_card_input_datetime_name: "n/a"
+  triggers_update: "all"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_info"
+          - "ulm_translation_engine"
+          - "input_datetime"
+        tap_action:
+          action: "more-info"
+        entity: "[[[ return entity.entity_id ]]]"
+        name: "[[[ return variables.ulm_card_input_datetime_name ]]]"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  time: >
+                    [[[
+                      var timestamp = entity.attributes.timestamp
+
+                      let unix_timestamp = timestamp - 4500;
+                      // Create a new JavaScript Date object based on the timestamp
+                      // multiplied by 1000 so that the argument is in milliseconds, not seconds.
+                      var date = new Date(unix_timestamp * 1000);
+                      // Hours part from the timestamp
+                      var hours = date.getHours();
+                      // Minutes part from the timestamp
+                      var minutes = "0" + date.getMinutes();
+                      // Seconds part from the timestamp
+                      var seconds = "0" + date.getSeconds();
+
+                      // Will display time in 10:30:23 format
+                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+
+                      return formattedTime;
+                    ]]]
+              icon: "mdi:arrow-down"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_text"
+              entity: "[[[ return entity.entity_id ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  time: >
+                    [[[
+                      var timestamp = entity.attributes.timestamp
+
+                      let unix_timestamp = timestamp - 3540;
+                      // Create a new JavaScript Date object based on the timestamp
+                      // multiplied by 1000 so that the argument is in milliseconds, not seconds.
+                      var date = new Date(unix_timestamp * 1000);
+                      // Hours part from the timestamp
+                      var hours = date.getHours();
+                      // Minutes part from the timestamp
+                      var minutes = "0" + date.getMinutes();
+                      // Seconds part from the timestamp
+                      var seconds = "0" + date.getSeconds();
+
+                      // Will display time in 10:30:23 format
+                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+
+                      return formattedTime;
+                    ]]]
+              hold_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  time: >
+                    [[[
+                      var timestamp = entity.attributes.timestamp
+
+                      let unix_timestamp = timestamp - 3660;
+                      // Create a new JavaScript Date object based on the timestamp
+                      // multiplied by 1000 so that the argument is in milliseconds, not seconds.
+                      var date = new Date(unix_timestamp * 1000);
+                      // Hours part from the timestamp
+                      var hours = date.getHours();
+                      // Minutes part from the timestamp
+                      var minutes = "0" + date.getMinutes();
+                      // Seconds part from the timestamp
+                      var seconds = "0" + date.getSeconds();
+
+                      // Will display time in 10:30:23 format
+                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+
+                      return formattedTime;
+                    ]]]
+
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "input_datetime.set_datetime"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  time: >
+                    [[[
+                      var timestamp = entity.attributes.timestamp
+
+                      let unix_timestamp = timestamp - 2700;
+                      var date = new Date(unix_timestamp * 1000);
+                      var hours = date.getHours();
+                      var minutes = "0" + date.getMinutes();
+                      var seconds = "0" + date.getSeconds();
+                      var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
+
+                      return formattedTime;
+                    ]]]
+              icon: "mdi:arrow-up"
+
+input_datetime:
+  tap_action:
+    action: "more-info"
+  show_last_changed: true
+
+widget_text:
+  tap_action:
+    action: "toggle"
+  template:
+    - "ulm_translation_engine"
+  show_icon: false
+  show_label: true
+  show_name: false
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  styles:
+    grid:
+      - grid-template-areas: "'l'"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "14px"
+      - place-self: "center"
+      - height: "42px"
+    state:
+      - color: "rgba(var(--color-theme),0.9)"
+  size: "20px"
+  color: "var(--google-grey)"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_input_number/index.html b/usage/custom_cards/custom_card_input_number/index.html
new file mode 100644
index 000000000..a823d281d
--- /dev/null
+++ b/usage/custom_cards/custom_card_input_number/index.html
@@ -0,0 +1,3998 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Input Number Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Input Number"
    
+
    The card_input_number you can control a input_number entity
    
+
    Input Number Card
    
+
    Credits
    
+
    Author: sildehoop - 2021
+Version: 1.1.0
    
+
    Braking changes
    
+
+
    
+  1.1.0
+
+
    #OLD
+- type: "custom:button-card"
+  template:
+    - card_input_number
+  variables:
+    ulm_card_input_number_name: "YOUR_NAME"
+    ulm_card_input_number_entity: "input_number.YOUR_INPUT_NUMBER"
+
    
+
+
    #NEW
+- type: "custom:button-card"
+  template: card_input_number
+  entity: input_number.YOUR_INPUT_NUMBER_ENTITY
+  variables:
+    ulm_card_input_number_name: "YOUR_CARD_NAME"
+
    
+
+
    
+
+
    Changelog
    
+
    
+1.1.0
+Adds ability to work with counter entities. Compatibility with input number entities is not affected.
+
    
+
    
+1.0.1
+Added option to leave ulm_card_input_number_name empty (takes the friendly_name of the entity)
+Removed background from middle text (because it is not a button).
+Removed variables ulm_card_input_number_entity.
+
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_input_number
+  entity: input_number.YOUR_INPUT_NUMBER
+  variables:
+    ulm_card_input_number_name: "YOUR_NAME"
+
    
+
    Requirements
    
+
    n/a
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_card_input_number_nameBathroom Ceiling Fan ThresholdfalseThe name to display on your card
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_input_number.yaml
    ---
+card_input_number:
+  variables:
+    ulm_card_input_number_name: "[[[ return entity.attributes.friendly_name ]]]"
+  triggers_update: "all"
+  show_icon: false
+  show_label: false
+  show_name: false
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_info"
+          - "ulm_translation_engine"
+          - "input_number"
+        tap_action:
+          action: "more-info"
+        entity: "[[[ return entity.entity_id ]]]"
+        name: "[[[ return variables.ulm_card_input_number_name ]]]"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: |
+                  [[[
+                    if( entity.entity_id.startsWith("input_number.") )
+                      return "input_number.decrement";
+                    else if( entity.entity_id.startsWith("counter.") )
+                      return "counter.decrement";
+                    else if( entity.entity_id.startsWith("select.") )
+                      return "select.select_previous";
+                    return "";
+                  ]]]
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:arrow-down"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_text"
+              entity: "[[[ return entity.entity_id ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "cover.stop_cover"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: |
+                  [[[
+                    if( entity.entity_id.startsWith("input_number.") )
+                      return "input_number.increment";
+                    else if( entity.entity_id.startsWith("counter.") )
+                      return "counter.increment";
+                    else if( entity.entity_id.startsWith("select.") )
+                      return "select.select_next";
+                    return "";
+                  ]]]
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:arrow-up"
+
+input_number:
+  tap_action:
+    action: "more-info"
+  show_last_changed: true
+
+widget_text:
+  tap_action:
+    action: "toggle"
+  template:
+    - "ulm_translation_engine"
+  show_icon: false
+  show_label: true
+  show_name: false
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  styles:
+    grid:
+      - grid-template-areas: "'l'"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - border-radius: "14px"
+      - place-self: "center"
+      - height: "42px"
+    state:
+      - color: "rgba(var(--color-theme),0.9)"
+  size: "20px"
+  color: "var(--google-grey)"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_irmajavi_entities/index.html b/usage/custom_cards/custom_card_irmajavi_entities/index.html
new file mode 100644
index 000000000..0429774bb
--- /dev/null
+++ b/usage/custom_cards/custom_card_irmajavi_entities/index.html
@@ -0,0 +1,4061 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Entities Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Entities Custom-card
    
+
+
+
+
    Custom-card "Entities"
    
+
    This is a custom-card to display states from multiple entities or from an entity with multiples attributes (To use it with attributes need to modify the code)
    
+
    Screenshot
    
+
    Credits
    
+
    Author: irmajavi - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Requirements
    
+
    none
    
+
    Usage
    
+
    type: custom:button-card
+template: custom_card_irmajavi_entities
+variables:
+  ulm_custom_card_irmajavi_entities_entity_1: sensor.inverter_voltage
+  ulm_custom_card_irmajavi_entities_entity_2: sensor.inverter_temperature
+  ulm_custom_card_irmajavi_entities_entity_3: sensor.active_ac_power
+  ulm_custom_card_irmajavi_entities_entity_4: sensor.ac_load_current
+  ulm_custom_card_irmajavi_entities_name_1: Voltage
+  ulm_custom_card_irmajavi_entities_name_2: Temperature
+  ulm_custom_card_irmajavi_entities_name_3: AC Power
+  ulm_custom_card_irmajavi_entities_name_4: Current
+  ulm_custom_card_irmajavi_entities_name: System Status
+  ulm_custom_card_irmajavi_entities: sensor.inverter_operating_mode
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_custom_card_irmajavi_entitiessensor.mainYesMain entity
    ulm_custom_card_irmajavi_entitites_nameStatusYesMain entity name
    ulm_custom_card_irmajavi_entities_entity_1sensor.test1YesThe first entity
    ulm_custom_card_irmajavi_entities_entity_2sensor.test2YesThe second entity
    ulm_custom_card_irmajavi_entities_entity_3sensor.test3YesThe third entity
    ulm_custom_card_irmajavi_entities_entity_4sensor.test4YesThe forth entity
    ulm_custom_card_irmajavi_entities_name_1Test1YesThe name of the first entity
    ulm_custom_card_irmajavi_entities_name_2Test2YesThe name of the second entity
    ulm_custom_card_irmajavi_entities_name_3Test3YesThe name of the third entity
    ulm_custom_card_irmajavi_entities_name_4Test4YesThe name of the forth entity
    
+
+
    Template Code
    
+
    
+Template Code
+
    custom_card_irmajavi_entities.yaml
    ---
+custom_card_irmajavi_entities:
+  template:
+    - "ulm_translation_engine"
+  triggers_update: "all"
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2''item3' 'item4'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "30px"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - height: "160px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        color: "var(--google-grey)"
+        show_icon: false
+        show_label: true
+        show_name: true
+        styles:
+          name:
+            - align-self: "start"
+            - justify-self: "start"
+            - font-weight: "bold"
+            - font-size: "14px"
+            - margin-left: "12px"
+          grid:
+            - grid-template-areas: "'n' 'l'"
+            - grid-template-columns: "min-content auto min-content"
+            - grid-template-rows: "min-content min-content"
+          card:
+            - box-shadow: "none"
+            - border-radius: "20px"
+            - border: "2px solid var(--google-grey)"
+            - height: "70px"
+          label:
+            - justify-self: "start"
+            - align-self: "end"
+            - font-weight: "bold"
+            - font-size: "14px"
+            - filter: "opacity(40%)"
+            - margin-left: "35px"
+        name: |
+          [[[
+            var icon = '👽';
+            if (variables.ulm_custom_card_irmajavi_entities_icon)
+            {
+              var icon = variables.ulm_custom_card_irmajavi_entities_icon;
+            }
+            return icon + "' '" + variables.ulm_custom_card_irmajavi_entities_name;
+          ]]]
+        label: |
+          [[[ return states[variables.ulm_custom_card_irmajavi_entities].state ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_4_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "custom_widget_irmajavi"
+              entity: >-
+                [[[ return variables.ulm_custom_card_irmajavi_entities_entity_1;
+                ]]]
+              name: >-
+                [[[ return variables.ulm_custom_card_irmajavi_entities_name_1
+                ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "custom_widget_irmajavi"
+              entity: >-
+                [[[ return variables.ulm_custom_card_irmajavi_entities_entity_2;
+                ]]]
+              name: >-
+                [[[ return variables.ulm_custom_card_irmajavi_entities_name_2
+                ]]]
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "custom_widget_irmajavi"
+              entity: >-
+                [[[ return variables.ulm_custom_card_irmajavi_entities_entity_3;
+                ]]]
+              name: >-
+                [[[ return variables.ulm_custom_card_irmajavi_entities_name_3
+                ]]]
+          item4:
+            card:
+              type: "custom:button-card"
+              template: "custom_widget_irmajavi"
+              entity: >-
+                [[[ return variables.ulm_custom_card_irmajavi_entities_entity_4;
+                ]]]
+              name: >-
+                [[[ return variables.ulm_custom_card_irmajavi_entities_name_4
+                ]]]
+custom_widget_irmajavi:
+  show_label: true
+  show_icon: false
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  styles:
+    name:
+      - justify-self: "center"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+    label:
+      - margin-top: "10px"
+      - justify-self: "center"
+      - font-weight: "bold"
+      - font-size: "14px"
+    grid:
+      - grid-template-areas: "'l' 'n'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - box-shadow: "none"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_irmajavi_speedtest/index.html b/usage/custom_cards/custom_card_irmajavi_speedtest/index.html
new file mode 100644
index 000000000..ec1be8e45
--- /dev/null
+++ b/usage/custom_cards/custom_card_irmajavi_speedtest/index.html
@@ -0,0 +1,4146 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Speedtest Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Speedtest"
    
+
    This is a custom-card to display the results from the Speedtest.net integration. The integration uses the Speedtest.net web service to measure network bandwidth performance.
    
+
    Screenshot
    
+
    Credits
    
+
    Author: irmajavi - 2022
+Version: 1.0.0
    
+
    Breaking changes
    
+
+
    
+  1.1.0
+
+Changed from speedtestdotnet.speedtest service to update entity service from Home Assistant due to announced deprecation of the speedtest service.
+
+
    
+
+
    Changelog
    
+
    
+1.1.0
+The variable ulm_custom_card_irmajavi_speedtest_download_speed_entity is now used to trigger an update of all the speedtest sensors.
+
    
+
+
    
+1.0.0
+Initial release
+
    
+
+
    Requirements
    
+
    Home Assistant Speedtest.net integration
    
+
    Usage
    
+
    type: custom:button-card
+template: custom_card_irmajavi_speedtest
+variables:
+  ulm_custom_card_irmajavi_speedtest_download_speed_entity: sensor.speedtest_download
+  ulm_custom_card_irmajavi_speedtest_upload_speed_entity: sensor.speedtest_upload
+  ulm_custom_card_irmajavi_speedtest_ping_entity: sensor.speedtest_ping
+  ulm_custom_card_irmajavi_speedtest_color: blue
+  ulm_custom_card_irmajavi_speedtest_router_name: router_name
+  ulm_custom_card_irmajavi_speedtest_router_model: router_model
+
    
+
    Variables
    
+
+
+  
+    
+    
+    
+    
+  
+
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
+
    VariableExampleRequiredExplanation
    ulm_custom_card_irmajavi_speedtest_router_nameLinksysYesYour router name
    ulm_custom_card_irmajavi_speedtest_router_modelEA8549YesYour router model
    ulm_custom_card_irmajavi_speedtest_colorblueYesThe color of the icon
    ulm_custom_card_irmajavi_speedtest_upload_speed_entitysensor.test2YesThe upload sensor created by the integration
    ulm_custom_card_irmajavi_speedtest_download_speed_entitysensor.test3YesThe download sensor created by the integration
    ulm_custom_card_irmajavi_speedtest_ping_entitysensor.test4YesThe ping sensor created by the integration
    
+
+
    Template Code
    
+
    
+Template Code
+
    custom_card_irmajavi_speedtest.yaml
    ---
+custom_card_irmajavi_speedtest:
+  triggers_update: "all"
+  show_name: false
+  show_label: false
+  template:
+    - "ulm_custom_card_irmajavi_speedtest_language_variables"
+  variables:
+    ulm_custom_card_irmajavi_speedtest_color: "blue"
+    ulm_custom_card_irmajavi_speedtest_router_name: "router_name"
+    ulm_custom_card_irmajavi_speedtest_router_model: "router_model"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2' 'item3'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        tap_action:
+          action: "none"
+        show_last_changed: false
+        show_label: true
+        show_name: true
+        show_icon: true
+        label: >-
+          [[[ return variables.ulm_custom_card_irmajavi_speedtest_router_model ]]]
+        name: >-
+          [[[ return variables.ulm_custom_card_irmajavi_speedtest_router_name ]]]
+        icon: "mdi:wifi"
+        styles:
+          icon:
+            - color: >-
+                [[[ return
+                `rgba(var(--color-${variables.ulm_custom_card_irmajavi_speedtest_color}),
+                1)`; ]]]
+            - width: "32px"
+          label:
+            - justify-self: "center"
+            - align-self: "start"
+            - font-weight: "bolder"
+            - font-size: "12px"
+            - filter: "opacity(40%)"
+          name:
+            - margin-top: "10px"
+            - justify-self: "center"
+            - font-weight: "bold"
+            - font-size: "14px"
+          img_cell:
+            - background-color: >-
+                [[[ return
+                `rgba(var(--color-${variables.ulm_custom_card_irmajavi_speedtest_color}),
+                0.2)`; ]]]
+            - border-radius: "50%"
+            - place-self: "center"
+            - width: "62px"
+            - height: "62px"
+          grid:
+            - grid-template-areas: "'i' 'n' 'l'"
+          card:
+            - box-shadow: "none"
+        size: "20px"
+    item2:
+      card:
+        type: "custom:button-card"
+        tap_action:
+          action: "perform-action"
+          perform_action: "homeassistant.update_entity"
+          target:
+            entity_id:
+              - "[[[ return variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity]]]"
+              - "[[[ return variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity]]]"
+              - "[[[ return variables.ulm_custom_card_irmajavi_speedtest_ping_entity]]]"
+        color: "var(--google-grey)"
+        show_icon: true
+        show_label: false
+        show_name: true
+        styles:
+          custom_fields:
+            item1:
+              - justify-self: "end"
+              - margin-top: "-23px"
+              - margin-right: "3px"
+          icon:
+            - color: "rgba(var(--color-theme),0.9)"
+            - width: "20px"
+          img_cell:
+            - background-color: "none"
+            - place-self: "center"
+            - justify-self: "start"
+            - width: "40px"
+            - height: "20px"
+          name:
+            - align-self: "end"
+            - justify-self: "start"
+            - font-weight: "bold"
+            - font-size: "16px"
+            - margin-left: "40px"
+            - margin-top: "3px"
+          grid:
+            - grid-template-areas: "i n item1"
+            - grid-template-columns: "min-content"
+            - grid-template-rows: "auto"
+          card:
+            - box-shadow: "none"
+            - border-radius: "10px"
+            - border: "2px solid var(--google-grey)"
+            - padding_bottom: "-8px"
+            - height: "40px"
+            - padding-top: "5px"
+            - padding-left: "5px"
+        name: "[[[ return variables.ulm_custom_card_irmajavi_speedtest_speedtest ]]]"
+        icon: "mdi:speedometer"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              show_icon: true
+              show_name: false
+              show_label: false
+              styles:
+                icon:
+                  - color: "rgba(var(--color-theme),0.9)"
+                  - width: "20px"
+                  - justify-self: "end"
+                grid:
+                  - grid-template-areas: "i"
+                  - grid-template-columns: "auto"
+                  - grid-template-rows: "auto"
+                card:
+                  - box-shadow: "none"
+              icon: "mdi:chevron-right"
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "list_2_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              color: "var(--google-blue)"
+              show_label: true
+              show_icon: false
+              name: "[[[ return variables.ulm_custom_card_irmajavi_speedtest_download ]]]"
+              entity: >-
+                [[[ return
+                variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity;
+                ]]]
+              label: |
+                [[[
+                    var state1 = "";
+                    if (states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].state){
+                      var state1 = states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].state;
+                      if (states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].attributes.unit_of_measurement){
+                        state1 += states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].attributes.unit_of_measurement;
+                      }
+                    }
+                    return state1;
+                ]]]
+              styles:
+                icon:
+                  - width: "30px"
+                  - height: "30px"
+                label:
+                  - align-self: "center"
+                  - justify-self: "center"
+                  - font-weight: "bold"
+                  - font-size: "23px"
+                name:
+                  - align-self: "center"
+                  - justify-self: "center"
+                  - font-weight: "bold"
+                  - font-size: "12px"
+                  - filter: "opacity(40%)"
+                grid:
+                  - grid-template-areas: "'l' 'n'"
+                  - grid-template-columns: "auto"
+                  - grid-template-rows: "min-content"
+                card:
+                  - box-shadow: "none"
+                  - padding-top: "15px"
+                  - padding-botton: "10px"
+                  - background-color: "rgba(var(--color-theme),0.05)"
+                  - border-radius: "14px"
+                  - place-self: "center"
+                  - height: "80px"
+          item2:
+            card:
+              type: "custom:button-card"
+              color: "var(--google-blue)"
+              show_label: true
+              show_icon: false
+              name: "[[[ return variables.ulm_custom_card_irmajavi_speedtest_upload ]]]"
+              entity: >-
+                [[[ return
+                variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity;
+                ]]]
+              label: |
+                [[[
+                    var state1 = "";
+                    if (states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].state){
+                      var state1 = states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].state;
+                      if (states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].attributes.unit_of_measurement){
+                        state1 += states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].attributes.unit_of_measurement;
+                      }
+                    }
+                    return state1;
+                ]]]
+              styles:
+                icon:
+                  - width: "30px"
+                  - height: "30px"
+                label:
+                  - align-self: "center"
+                  - justify-self: "center"
+                  - font-weight: "bold"
+                  - font-size: "23px"
+                name:
+                  - align-self: "center"
+                  - justify-self: "center"
+                  - font-weight: "bold"
+                  - font-size: "12px"
+                  - filter: "opacity(40%)"
+                grid:
+                  - grid-template-areas: "'l' 'n'"
+                  - grid-template-columns: "auto"
+                  - grid-template-rows: "min-content"
+                card:
+                  - box-shadow: "none"
+                  - padding-top: "15px"
+                  - padding-botton: "10px"
+                  - background-color: "rgba(var(--color-theme),0.05)"
+                  - border-radius: "14px"
+                  - place-self: "center"
+                  - height: "80px"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_irmajavi_weather/index.html b/usage/custom_cards/custom_card_irmajavi_weather/index.html
new file mode 100644
index 000000000..1233ebf89
--- /dev/null
+++ b/usage/custom_cards/custom_card_irmajavi_weather/index.html
@@ -0,0 +1,4094 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Weather Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Weather Custom-card
    
+
+
+
+
    Custom-card "Weather"
    
+
    This is a custom-card to display states from weather entities or from a weather entity with multiples attributes (To use it with attributes need to modify the code)
    
+
    Screenshot
    
+
    Credits
    
+
    Author: irmajavi - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Requirements
    
+
    In your configuration.yaml you need to create a new sensor in order to use the custom date format the card uses.
    
+
    - platform: template
+  sensors:
+    date_long:
+      friendly_name: "Date and Day of week"
+      value_template: >
+        {% set months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Agu", "Sep", "Oct", "Nov", "Dic"] %}
+        {% set days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] %}
+        {{ months[now().month-1] }}.{{ now().day }}th. {{ days[now().weekday()] }}
+
    
+
    Usage
    
+
    type: custom:button-card
+template: custom_card_irmajavi_weather
+variables:
+  ulm_custom_card_irmajavi_weather: weather.aguada_2
+  ulm_custom_card_irmajavi_weather_entity_1: sensor.aguada_wind
+  ulm_custom_card_irmajavi_weather_entity_2: sensor.aguada_precipitation
+  ulm_custom_card_irmajavi_weather_entity_3: sensor.aguada_uv_index
+  ulm_custom_card_irmajavi_weather_entity_4: sensor.weather_humidity
+  ulm_custom_card_irmajavi_weather_name_1: Wind
+  ulm_custom_card_irmajavi_weather_name_2: Precipitation
+  ulm_custom_card_irmajavi_weather_name_3: UV
+  ulm_custom_card_irmajavi_weather_name_4: Humidity
+  ulm_custom_card_irmajavi_weather_temperature_outside: sensor.aguada_realfeel_temperature
+  ulm_custom_card_irmajavi_weather_date: sensor.date_long
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_custom_card_irmajavi_weatherweather.yourplaceYesThe main entity
    ulm_custom_card_irmajavi_weather_entity_1weather.humidityYesWeather entity
    ulm_custom_card_irmajavi_weather_entity_2sensor.test1YesWeather entity
    ulm_custom_card_irmajavi_weather_entity_3sensor.test2YesWeather entity
    ulm_custom_card_irmajavi_weather_entity_4sensor.test3YesWeather entity
    ulm_custom_card_irmajavi_weather_name_1WindYesEntity name
    ulm_custom_card_irmajavi_weather_name_2HumidityYesEntity name
    ulm_custom_card_irmajavi_weather_name_3UV IndexYesEntity name
    ulm_custom_card_irmajavi_weather_name_4PrecipitationYesEntity name
    ulm_custom_card_irmajavi_weather_temperature_outsidesensor.test4YesWeather entity
    ulm_custom_card_irmajavi_weather_datesensor.test5YesCustom date format sensor
    
+
+
    Template Code
    
+
    
+Template Code
+
    custom_card_irmajavi_weather.yaml
    ---
+custom_card_irmajavi_weather:
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2' 'item3' 'item4'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "30px"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - height: "160px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        color: "var(--google-grey)"
+        show_icon: false
+        show_label: true
+        show_name: true
+        styles:
+          name:
+            - justify-self: "end"
+            - align-self: "end"
+            - font-weight: "bold"
+            - font-size: "20px"
+            - border: "10px solid var(--google-grey)"
+            - background-color: "var(--google-grey)"
+            - color: "#000000"
+            - border-radius: "12px"
+            - margin-right: "10px"
+            - margin-top: "'-4px'"
+          label:
+            - align-self: "start"
+            - justify-self: "center"
+            - font-weight: "bold"
+            - font-size: "14px"
+            - margin-left: "12px"
+          grid:
+            - grid-template-areas: "'l n item1'"
+            - grid-template-columns: "min-content auto min-content"
+            - grid-template-rows: "min-content min-content"
+          card:
+            - box-shadow: "none"
+            - border-radius: "20px"
+            - border: "2px solid var(--google-grey)"
+            - height: "70px"
+        label: |
+          [[[
+            var icon = '❔';
+            if (states[variables.ulm_custom_card_irmajavi_weather].state == 'clear-night'){
+              var icon = '🌙';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'cloudy'){
+              var icon = '☁️';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'exceptional'){
+              var icon = '🌞';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'fog'){
+              var icon = '🌫️';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'hail'){
+              var icon = '⛈️';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'lightning'){
+              var icon = '⚡';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'lightning-rainy'){
+              var icon = '⛈️';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'partlycloudy'){
+              var icon = '⛅';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'pouring'){
+              var icon = '🌧️';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'rainy'){
+              var icon = '💧';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'snowy'){
+              var icon = '❄️';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'snowy-rainy'){
+              var icon = '🌨️';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'sunny'){
+              var icon = '☀️';
+            } else if(states[variables.ulm_custom_card_irmajavi_weather].state == 'windy'){
+              var icon = '🌪️';
+            }
+            return icon + ' ' + states[variables.ulm_custom_card_irmajavi_weather_date].state;
+          ]]]
+        name: |
+          [[[
+            var unit = states[variables.ulm_custom_card_irmajavi_weather_temperature_outside].attributes.unit_of_measurement != null ? ' ' + states[variables.ulm_custom_card_irmajavi_weather_temperature_outside].attributes.unit_of_measurement : ''
+            return states[variables.ulm_custom_card_irmajavi_weather_temperature_outside].state + unit;
+          ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_4_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "generic_text"
+              entity: "'[[[ return variables.ulm_custom_card_irmajavi_weather_entity_1; ]]]'"
+              name: "'[[[ return variables.ulm_custom_card_irmajavi_weather_name_1; ]]]'"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "generic_text"
+              entity: "'[[[ return variables.ulm_custom_card_irmajavi_weather_entity_2; ]]]'"
+              name: "'[[[ return variables.ulm_custom_card_irmajavi_weather_name_2; ]]]'"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "generic_text"
+              entity: "'[[[ return variables.ulm_custom_card_irmajavi_weather_entity_3; ]]]'"
+              name: "'[[[ return variables.ulm_custom_card_irmajavi_weather_name_3; ]]]'"
+          item4:
+            card:
+              type: "custom:button-card"
+              template: "generic_text"
+              entity: "'[[[ return variables.ulm_custom_card_irmajavi_weather_entity_4; ]]]'"
+              name: "'[[[ return variables.ulm_custom_card_irmajavi_weather_name_4; ]]]'"
+generic_text:
+  show_label: true
+  show_icon: false
+  label: |
+    [[[
+      var unit = entity.attributes.unit_of_measurement != null ? ' ' + entity.attributes.unit_of_measurement : ''
+      return entity.state + unit;
+    ]]]
+  styles:
+    name:
+      - justify-self: "center"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+    label:
+      - margin-top: "10px"
+      - justify-self: "center"
+      - font-weight: "bold"
+      - font-size: "14px"
+    grid:
+      - grid-template-areas: "'l' 'n'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - box-shadow: "none"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_light_colorpick/index.html b/usage/custom_cards/custom_card_light_colorpick/index.html
new file mode 100644
index 000000000..a7a546226
--- /dev/null
+++ b/usage/custom_cards/custom_card_light_colorpick/index.html
@@ -0,0 +1,3857 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Colorpicker Light Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Colorpicker Light Card"
    
+
    This is a custom-card to add additional function to the light_card.
    
+
    The card uses a slider as well as six conditional icons to pick the color of the light.
    
+
    Credits
    
+
    Author: 13robin37 - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Requirements
    
+
    This card needs the following to function correctly:
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Component / cardrequiredNote
    light-entityyes
    RGB Light Cardyes
    
+
+
    Usage
    
+
    - type: custom:button-card
+  template: card_light_colorpick
+  entity: light.your_light
+  variables:
+    ulm_card_light_slider_horizontal_colors_name: Ceiling light
+    ulm_card_light_slider_horizontal_colors_transition: 1
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Card typeVariableExampleRequiredExplanation
    allulm_card_light_slider_horizontal_colors_nameLightnoThis is the name the card shows
    allulm_card_light_slider_horizontal_colors_transition1noThis is the color change transition in seconds
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_media_player_sonos/index.html b/usage/custom_cards/custom_card_media_player_sonos/index.html
new file mode 100644
index 000000000..04482a9d7
--- /dev/null
+++ b/usage/custom_cards/custom_card_media_player_sonos/index.html
@@ -0,0 +1,3922 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Mediaplayer Sonos Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Mediaplayer Sonos Custom-card
    
+
+
+
+
    Media player: sonos
    
+
    
+
    NOTE
+This card is under review and is not ready to use!
    
+
    
+
    Sonos
    
+
    
+Usage
+
+#### Example
+
+
    - type: "custom:button-card"
+  template: card_media_player_sonos_with_controls
+  variables:
+    ulm_card_media_player_with_controls_name: "Slaapkamer"
+    ulm_card_media_player_with_controls_entity: media_player.slaapkamer
+
    
+
+#### Variables
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_card_media_player_with_controls_nameSonos room 1YesName shown in lovelace
    ulm_card_media_player_with_controls_entitymedia_player.sonos_room_1YesEntity id
    
+
    
+
    
+
+
    
+Template Code
+
    custom_card_media_player_sonos.yaml
    ---
+card_media_player_sonos:
+  size: "20px"
+  show_icon: true
+  show_entity_picture: false
+  show_state: false
+  show_name: true
+  template:
+    - "green_playing"
+    - "icon_info_bg"
+    - "ulm_translation_engine"
+  label: |
+    [[[
+        if (entity.state == 'idle' || entity.state == 'paused' || entity.state == 'unavailable'){
+          return variables.ulm_translation_state;
+        } else {
+        return (entity.attributes.source ? entity.attributes.source : variables.ulm_translation_state)
+            + ' • ' +  ( Math.round(entity.attributes.volume_level / 0.01)) + '%' ;
+        }
+    ]]]
+
+card_media_player_sonos_with_controls:
+  variables:
+    ulm_card_media_player_with_controls_name: "No name set"
+  triggers_update:
+    - "[[[ ulm_card_media_player_with_controls_entity ]]]"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "card_media_player_sonos"
+        tap_action:
+          action: "more-info"
+        entity: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+        name: "[[[ return variables.ulm_card_media_player_with_controls_name ]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - padding: "0px"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.volume_down"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+              icon: "mdi:volume-minus"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.media_play_pause"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+              icon: "mdi:pause"
+              state:
+                - value: "paused"
+                  icon: "mdi:play"
+                - value: "off"
+                  icon: "mdi:play"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "media_player.volume_up"
+                target:
+                  entity_id: "[[[ return variables.ulm_card_media_player_with_controls_entity ]]]"
+              icon: "mdi:volume-plus"
+
+icon_info_bg_sonos:
+  color: "var(--google-grey)"
+  show_icon: true
+  show_label: true
+  show_name: true
+  state:
+    - value: "unavailable"
+      styles:
+        custom_fields:
+          notification:
+            - border-radius: "50%"
+            - position: "absolute"
+            - left: "3px"
+            - top: "8px"
+            - height: "18px"
+            - width: "18px"
+            - font-size: "12px"
+            - line-height: "14px"
+            - background-color: >
+                [[[
+                  return "rgba(var(--color-red),1)";
+                ]]]
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bold"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+    name:
+      - align-self: "end"
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "14px"
+      - margin-left: "12px"
+    state:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bold"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+    img_cell:
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "50%"
+      - place-self: "center"
+    grid:
+      - grid-template-areas: "'i n' 'i l'"
+      - grid-template-columns: "min-content auto"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  size: "20px"
+
+green_playing:
+  state:
+    - styles:
+        icon:
+          - color: "rgba(var(--color-green),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-green), 0.2)"
+      value: "playing"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_more_power_outlet/index.html b/usage/custom_cards/custom_card_more_power_outlet/index.html
new file mode 100644
index 000000000..aaf147bfb
--- /dev/null
+++ b/usage/custom_cards/custom_card_more_power_outlet/index.html
@@ -0,0 +1,3899 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        More Power Outlet Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+                  
    
+                
    
+              
    
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    More Power Outlet Card
    
+
+
+
+
    Description
    
+
    image
    
+
    This is the power outlet card is very similar to the default power-outlet-card from UI-Minimalist but it is also possible to show two additional sensors - one for total energy and one for time.
    
+
    Credits
    
+
    Author: Wranglatang - 2022 Version 1.0.0
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity
    nameEnable background
    custom_card_more_power_outlet_power_sensorIf you set this sensor, the custom_card_more_power_outlet shows the current power consumption (W).
    custom_card_more_power_outlet_energy_sensorIf you set this sensor, the custom_card_more_power_outlet shows the energy consumption (kWh) - Typically used with a Daily Utility Meter.
    custom_card_more_power_outlet_time_sensorIf you set this sensor, the custom_card_more_power_outlet shows the a duration (Mins) - Typically used with the History Stats.
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_more_power_outlet
+  variables:
+    custom_card_more_power_outlet_power_sensor: sensor.immersion_heater_power
+    custom_card_more_power_outlet_energy_sensor: sensor.immersion_heater_energy_daily
+    custom_card_more_power_outlet_time_sensor: sensor.time_immersion_heater_heating
+  entity: switch.immersion_heater
+  name: Immersion Heater
+
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_more_power_outlet.yaml
    ---
+### Custom Card More Power Outlet ###
+custom_card_more_power_outlet:
+  template:
+    - "icon_info_bg"
+    - "yellow"
+    - "ulm_translation_engine"
+  variables:
+    custom_card_more_power_outlet_power_sensor:
+    custom_card_more_power_outlet_energy_sensor:
+    custom_card_more_power_outlet_time_sensor:
+  triggers_update: "all"
+  label: |-
+    [[[
+      if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_energy_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) {
+        if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){
+          return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " +
+          (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins";
+        } else
+          return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs";
+      } else if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_energy_sensor !== null) {
+        return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh";
+      } else if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) {
+          if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){
+          return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins";
+        } else
+          return states[variables.custom_card_more_power_outlet_power_sensor].state + "W • " + states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs";
+      } else if (entity.state === "on" && variables.custom_card_more_power_outlet_energy_sensor !== null && variables.custom_card_more_power_outlet_time_sensor !== null) {
+          if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){
+          return states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins";
+        } else
+          return states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh • " + states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs";
+      } else if (entity.state === "on" && variables.custom_card_more_power_outlet_power_sensor !== null) {
+        return states[variables.custom_card_more_power_outlet_power_sensor].state + "W";
+      } else if (entity.state === "on" && variables.custom_card_more_power_outlet_energy_sensor !== null) {
+        return states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh";
+      } else if (entity.state === "on" && variables.custom_card_more_power_outlet_time_sensor !== null) {
+          if (states[variables.custom_card_more_power_outlet_time_sensor].state < 1){
+          return (states[variables.custom_card_more_power_outlet_time_sensor].state * 100) + "Mins";
+        } else
+          return states[variables.custom_card_more_power_outlet_time_sensor].state + "Hrs";
+      } else if (entity.state === "on") {
+        return variables.ulm_translation_state;
+      } else if (entity.state === "off" && variables.custom_card_more_power_outlet_energy_sensor !== null) {
+        if (states[variables.custom_card_more_power_outlet_energy_sensor].state > 0){
+          return variables.ulm_translation_state + " • " + states[variables.custom_card_more_power_outlet_energy_sensor].state + "kWh";
+        } else {
+          return variables.ulm_translation_state;
+        }
+      } else {
+        return variables.ulm_translation_state;
+      }
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_mpse_gauge/index.html b/usage/custom_cards/custom_card_mpse_gauge/index.html
new file mode 100644
index 000000000..ac2906337
--- /dev/null
+++ b/usage/custom_cards/custom_card_mpse_gauge/index.html
@@ -0,0 +1,3926 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Gauge Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Gauge"
    
+
    The custom_card_mpse_gauge is used present a value in form of a gauge. The card can handle two gauges so it would be easy to adapt the card to that if required. I preferred the minimal look.
    
+
    Printer
    
+
    Credits
    
+
    Author: mpse
+Version: 0.1.0
    
+
    Changelog
    
+
    
+Initial release.
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_mpse_gauge
+  entity: sensor.temp_office_temperature
+  variables:
+    ulm_card_mpse_gauge_min: 10
+    ulm_card_mpse_gauge_max: 30
+
    
+
    Requirements
    
+
    Uses this card: https://github.com/custom-cards/dual-gauge-card which can be installed via HACS.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_card_mpse_gauge_min0noMinimum value, defaults to 0.
    ulm_card_mpse_gauge_max100noMaximum value, defaults to 100.
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_mpse_gauge.yaml
    ---
+custom_card_mpse_gauge:
+  variables:
+    ulm_card_mpse_gauge_min: 0
+    ulm_card_mpse_gauge_max: 100
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "0px"
+  show_name: false
+  show_icon: false
+  custom_fields:
+    item1:
+      card:
+        entity: "[[[ return entity.entity_id ]]]"
+        label: >-
+          [[[
+            return entity.state;
+          ]]]
+        template:
+          - "icon_info"
+        styles:
+          card:
+            - padding: "12px"
+        type: "custom:button-card"
+    item2:
+      card:
+        type: "custom:dual-gauge-card"
+        min: "[[[ return variables.ulm_card_mpse_gauge_min ]]]"
+        max: "[[[ return variables.ulm_card_mpse_gauge_max ]]]"
+        title: >
+          [[[
+            var min = variables.ulm_card_mpse_gauge_min;
+            var max = variables.ulm_card_mpse_gauge_max;
+
+            if( min == 0 && max == 100 )
+              return "";
+
+            return min + ' - ' + max;
+          ]]]
+        shadeInner: false
+        cardwidth: 200
+        outer:
+          entity: "[[[ return entity.entity_id ]]]"
+        inner:
+          entity: "[[[ return entity.entity_id ]]]"
+        colors:
+          - color: "var(--google-blue)"
+            value: 0
+        card_mod:
+          style: |
+            div.gauge-value.gauge-value-inner {
+              color: rgba(0,0,0,0);
+            }
+            div.gauge-value.gauge-value-outer {
+              color: rgba(0,0,0,0);
+            }
+            div.gauge-dual-card {
+              margin: 0px 0px;
+              --title-font-size: calc(var(--gauge-card-width) / 16);
+              color: var(--google-grey);
+            }
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_mpse_printer/index.html b/usage/custom_cards/custom_card_mpse_printer/index.html
new file mode 100644
index 000000000..9d4d72517
--- /dev/null
+++ b/usage/custom_cards/custom_card_mpse_printer/index.html
@@ -0,0 +1,4119 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Printer Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Printer"
    
+
    The custom_card_mpse_printer is used to display the status of a printer and the toner.
    
+
    Printer
    
+
    Credits
    
+
    Author: mpse (based on clemalex post)
+Version: 0.3.0
    
+
    Changelog
    
+
    
+0.3.0
+Updated documentation.
+Cleanup code in card.
+Updated colors to match input values.
+
    
+
    
+0.2.0
+Added reference to used card.
+Fixed yaml indentation
+
    
+
    
+0.1.0
+Initial release adapted from a post on home assistant forum by user clemalex.
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_mpse_printer
+  entity: sensor.hp_color_laser_mfp_178nw
+  variables:
+    ulm_card_printer_name: HP Color Laser MFP 178nw
+    ulm_card_printer_black_name: sensor.hp_color_laser_mfp_178nw_black_toner
+    ulm_card_printer_yellow_name: sensor.hp_color_laser_mfp_178nw_yellow_toner
+    ulm_card_printer_cyan_name: sensor.hp_color_laser_mfp_178nw_cyan_toner
+    ulm_card_printer_magenta_name: sensor.hp_color_laser_mfp_178nw_magenta_toner
+
    
+
    Requirements
    
+
    Uses this card: https://github.com/custom-cards/bar-card
+Tested with the IPP Integration from Home Assistant: https://www.home-assistant.io/integrations/ipp
+On my printer i cannot get any state update, it always reports idle. I wanted to highlight the button when the printer is active.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_card_printer_nameHP Color Laser MFP 178nwyesName of printer to display on card
    ulm_card_printer_black_namesensor.hp_color_laser_mfp_178nw_black_toneryesName of black toner sensor
    ulm_card_printer_yellow_namesensor.hp_color_laser_mfp_178nw_yellow_toneryesName of yellow toner sensor
    ulm_card_printer_cyan_namesensor.hp_color_laser_mfp_178nw_cyan_toneryesName of cyan toner sensor
    ulm_card_printer_magenta_namesensor.hp_color_laser_mfp_178nw_magenta_toneryesName of magenta toner sensor
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_mpse_printer.yaml
    ---
+custom_card_mpse_printer:
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    card:
+      - border-radius: "20px"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "0px"
+    grid:
+      - grid-template-areas: "'item1' 'item2' 'item3' 'item4' 'item5'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content"
+  custom_fields:
+    item1:
+      card:
+        entity: "[[[ return entity.entity_id ]]]"
+        name: "[[[ return variables.ulm_card_printer_name ]]]"
+        label: >-
+          [[[
+          return entity.state;
+          ]]]
+        template:
+          - "icon_info"
+          - "custom_card_mpse_printer_blue"
+        styles:
+          card:
+            - padding: "12px"
+        type: "custom:button-card"
+    item2:
+      card:
+        type: "custom:bar-card"
+        height: "20px"
+        positions:
+          name: off
+          value: "inside"
+          icon: off
+          indicator: off
+          minmax: off
+        color: "black"
+        entities:
+          - entity: "[[[ return variables.ulm_card_printer_black_name ]]]"
+        card_mod:
+          style: |
+            bar-card-currentbar{
+              border: 0.01rem solid rgba(var(--color-theme),.4);
+            }
+            bar-card-backgroundbar{
+              display: none;
+            }
+            bar-card-name{
+              width: 2rem;
+              margin-right: 40px !important;
+            }
+            bar-card-value{
+              width: 2rem;
+              margin-left: 40px !important;
+              justify-content: center;
+              display: flex;
+              color: grey;
+            }
+            bar-card-background{
+              margin: 4px 0 4px 0 !important;
+              text-align: initial;
+            }
+            ha-card{
+              --bar-card-border-radius: 5px;
+              border-radius: 0px;
+              box-shadow: none;
+            }
+            #states{
+              padding: 0 16px;
+            }
+    item3:
+      card:
+        type: "custom:bar-card"
+        height: "20px"
+        positions:
+          name: off
+          value: "inside"
+          icon: off
+          indicator: off
+          minmax: off
+        color: "rgb(250,255,0)"
+        entities:
+          - entity: "[[[ return variables.ulm_card_printer_yellow_name ]]]"
+        card_mod:
+          style: |
+            bar-card-currentbar{
+              border: 0.01rem solid rgba(var(--color-theme),.4);
+            }
+            bar-card-backgroundbar{
+              display: none;
+            }
+              bar-card-name{
+              width: 2rem;
+              margin-right: 40px !important;
+            }
+            bar-card-value{
+              width: 2rem;
+              margin-left: 40px !important;
+              justify-content: center;
+              display: flex;
+              color: grey;
+            }
+            bar-card-background{
+              margin: 4px 0 4px 0 !important;
+              text-align: initial;
+            }
+            ha-card{
+              --bar-card-border-radius: 5px;
+              border-radius: 0px;
+              box-shadow: none;
+            }
+            #states{
+              padding: 0 16px;
+            }
+    item4:
+      card:
+        type: "custom:bar-card"
+        height: "20px"
+        positions:
+          name: off
+          value: "inside"
+          icon: off
+          indicator: off
+          minmax: off
+        color: "rgb(248,0,255)"
+        entities:
+          - entity: "[[[ return variables.ulm_card_printer_magenta_name ]]]"
+        card_mod:
+          style: |
+            bar-card-currentbar{
+              border: 0.01rem solid rgba(var(--color-theme),.4);
+            }
+            bar-card-backgroundbar{
+              display: none;
+            }
+            bar-card-name{
+              width: 2rem;
+              margin-right: 40px !important;
+            }
+            bar-card-value{
+              width: 2rem;
+              margin-left: 40px !important;
+              justify-content: center;
+              display: flex;
+              color: grey;
+            }
+            bar-card-background{
+              margin: 4px 0 4px 0 !important;
+              text-align: initial;
+            }
+            ha-card{
+              --bar-card-border-radius: 5px;
+              border-radius: 0px;
+              box-shadow: none;
+            }
+            #states{
+              padding: 0 16px;
+            }
+    item5:
+      card:
+        type: "custom:bar-card"
+        height: "20px"
+        positions:
+          name: off
+          value: "inside"
+          icon: off
+          indicator: off
+          minmax: off
+        color: "rgb(0,255,255)"
+        entities:
+          - entity: "[[[ return variables.ulm_card_printer_cyan_name ]]]"
+        card_mod:
+          style: |
+            bar-card-currentbar{
+              border: 0.01rem solid rgba(var(--color-theme),.4);
+            }
+            bar-card-backgroundbar{
+              display: none;
+            }
+            bar-card-name{
+              width: 2rem;
+              margin-right: 40px !important;
+            }
+            bar-card-value{
+              width: 2rem;
+              margin-left: 40px !important;
+              justify-content: center;
+              display: flex;
+              color: grey;
+            }
+              bar-card-background{
+              margin: 4px 0 4px 0 !important;
+              text-align: initial;
+            }
+            ha-card{
+              --bar-card-border-radius: 5px;
+              border-radius: 0px;
+              box-shadow: none;
+            }
+            #states{
+              padding: 0 16px 16px 16px;
+            }
+custom_card_mpse_printer_blue:
+  state:
+    - styles:
+        icon:
+          - color: "rgba(var(--color-blue),1)"
+        label:
+          - color: "rgba(var(--color-blue-text),1)"
+        name:
+          - color: "rgba(var(--color-blue-text),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-blue), 0.2)"
+        card:
+          - background-color: "rgba(var(--color-background-blue), var(--opacity-bg))"
+      operator: "template"
+      value: >
+        [[[
+          return entity.state!="idle" ? true : false
+        ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_mpse_thermostat/index.html b/usage/custom_cards/custom_card_mpse_thermostat/index.html
new file mode 100644
index 000000000..c4bbafd71
--- /dev/null
+++ b/usage/custom_cards/custom_card_mpse_thermostat/index.html
@@ -0,0 +1,3967 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Thermostat mpse Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Thermostat"
    
+
    The custom_card_mpse_thermostat is used to display temperature and control a simple thermostat. I have tested this with a cooling function that I use to control my beer fridge.
    
+
    The buttons are used to lower/raise the set temperature which is displayed between the arrows. It uses the defined steps configured on the thermostat (In my case I use esphome to control the frigde). The current temperature is shown in the grey label. The card uses the standard language parameters.
    
+
    Thermostat
    
+
    Credits
    
+
    Author: mpse
+Version: 0.1.0
    
+
    Changelog
    
+
    
+0.1.0
+Initial release inspired from various posts on home assistant forum.
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_mpse_thermostat
+  entity: climate.fermentation_climate_controller
+
    
+
    Requirements
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    None
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_mpse_thermostat.yaml
    ---
+custom_card_mpse_thermostat:
+  show_name: false
+  show_icon: false
+  template:
+    - "icon_info_bg"
+  hold_action:
+    action: "more-info"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content  min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_info"
+          - "ulm_translation_engine"
+        tap_action:
+          action: "more-info"
+        entity: "[[[ return entity.entity_id ]]]"
+        name: "[[[ return entity.name ]]]"
+        label: >-
+          [[[
+              label = variables.ulm_translation_state;
+              if(entity.attributes.temperature){
+                return (entity.attributes.current_temperature ) + '°' + ' • ' + label + ' (' + entity.attributes.hvac_action + ')';
+              }
+              return variables.ulm_translation_state;
+          ]]]
+        icon: >
+          [[[
+            var icon = "mdi:thermostat";
+            var state = entity.state;
+
+            if( state == "cool" )
+              icon = "mdi:snowflake"
+            else if( state == "heat" )
+              icon = "mdi:fire"
+
+            return icon;
+          ]]]
+        state:
+          - operator: "template"
+            value: "[[[return entity.state == 'heat']]]"
+            styles:
+              icon:
+                - color: "rgba(var(--color-red),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-red),0.2)"
+              card:
+                - background-color: "rgba(var(--color-background-red),var(--opacity-bg))"
+              name:
+                - color: "rgba(var(--color-red-text),1)"
+              label:
+                - color: "rgba(var(--color-red-text),1)"
+          - operator: "template"
+            value: "[[[return entity.state == 'cool']]]"
+            styles:
+              icon:
+                - color: "rgba(var(--color-blue),1)"
+              img_cell:
+                - background-color: "rgba(var(--color-blue),0.2)"
+              card:
+                - background-color: "rgba(var(--color-background-blue),var(--opacity-bg))"
+              name:
+                - color: "rgba(var(--color-blue-text),1)"
+              label:
+                - color: "rgba(var(--color-blue-text),1)"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:arrow-down"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  temperature: "[[[ return entity.attributes.temperature - entity.attributes.target_temp_step ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return entity.attributes.temperature + '°C' ]]]"
+              styles:
+                card:
+                  - box-shadow: "none"
+              show_icon: false
+              tap_action: "none"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:arrow-up"
+              tap_action:
+                action: "perform-action"
+                perform_action: "climate.set_temperature"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+                data:
+                  temperature: "[[[ return entity.attributes.temperature + entity.attributes.target_temp_step ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_mpse_wifisignal/index.html b/usage/custom_cards/custom_card_mpse_wifisignal/index.html
new file mode 100644
index 000000000..1fe139c29
--- /dev/null
+++ b/usage/custom_cards/custom_card_mpse_wifisignal/index.html
@@ -0,0 +1,3878 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Wifi Signal Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "WiFi Signal"
    
+
    The custom_card_mpse_wifisignal is used to display the status of a wifi signal (dBm). Icon changes based on signal strength.
    
+
    WiFi Signal
    
+
    Credits
    
+
    Author: mpse
+Version: 0.2.0
    
+
    Changelog
    
+
    
+0.2.0
+Cleanup and updated documentation.
+
    
+
    
+0.1.0
+Initial release.
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_mpse_wifisignal
+  entity: sensor.wifi_julgran
+
    
+
    Requirements
    
+
    No special cards needed.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    None
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_mpse_wifisignal.yaml
    ---
+custom_card_mpse_wifisignal:
+  template:
+    - "icon_info_bg"
+  icon: |
+    [[[
+      var icon = "mdi:wifi-strength-off";
+      var signal = states[entity.entity_id].state;
+      if (signal >= -50) {
+        icon = "mdi:wifi-strength-4";
+      } else if (signal >= -60) {
+        icon = "mdi:wifi-strength-3";
+      } else if (signal >= -70) {
+        icon = "mdi:wifi-strength-2";
+      } else if (signal >= -80) {
+        icon = "mdi:wifi-strength-1";
+      }
+      return icon;
+    ]]]
+  label: |
+    [[[
+      return entity.state + " dBm";
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_nas/index.html b/usage/custom_cards/custom_card_nas/index.html
new file mode 100644
index 000000000..121a80e99
--- /dev/null
+++ b/usage/custom_cards/custom_card_nas/index.html
@@ -0,0 +1,3922 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        NAS Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "NAS"
    
+
    The card-nas shows you a specific sensor value from your NAS, eg. the disk space used.
    
+
    Screenshot
    
+
    Credits
    
+
    Author: tben - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
    
+1.0.1
+Fix card & add Screenshot
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template:
+    - custom_card_nas
+  variables:
+    ulm_custom_card_nas_sensor: sensor.pinas_disk_use
+    ulm_custom_card_nas_text: "HDD used"
+    ulm_custom_cad_nas_unit: %
+
    
+
    Requirements
    
+
    n/a
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_custom_card_nas_sensorsensor.nas_disk_useyesThe sensor that shows your sensor state, eg. the disk use on your NAS
    ulm_custom_card_nas_textHDD usedyesThe text to show on your card
    ulm_custom_card_nas_unit%yesThe unit to show after your sensors state
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_nik_door.yaml
    ---
+custom_card_nas:
+  template:
+    - "blue_no_state"
+  tap_action:
+    action: "more-info"
+    entity: "[[[ return variables.ulm_custom_card_nas_sensor; ]]]"
+  show_icon: true
+  show_label: true
+  show_name: true
+  icon: |-
+    [[[
+       return "mdi:nas";
+    ]]]
+  label: |-
+    [[[
+       return variables.ulm_custom_card_nas_text + " " + states[variables.ulm_custom_card_nas_sensor].state + variables.ulm_custom_card_nas_unit;
+    ]]]
+  name: |-
+    [[[
+       return "Nas";
+    ]]]
+  size: "20px"
+  styles:
+    label:
+      - justify-self: "start"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+      - margin-left: "12px"
+    name:
+      - align-self: "end"
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "14px"
+      - margin-left: "12px"
+      - filter: "opacity(100%)"
+    img_cell:
+      - border-radius: "50%"
+      - place-self: "center"
+      - width: "42px"
+      - height: "42px"
+    grid:
+      - grid-template-areas: "'i n' 'i l'"
+      - grid-template-columns: "min-content auto"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - border-radius: "20px"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_neekster_update/index.html b/usage/custom_cards/custom_card_neekster_update/index.html
new file mode 100644
index 000000000..4c94925ea
--- /dev/null
+++ b/usage/custom_cards/custom_card_neekster_update/index.html
@@ -0,0 +1,4045 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom Card Update - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Update"
    
+
    example-image-light
    
+
    Credits
    
+
    Author: Neekster - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+  1.0.0
+  Initial release
+
    
+
+
    Description
    
+
    This custom cards works with any entity in the update domain and gives options for two-button control to begin the update or skip. It also supports both horizontal and vertical configurations.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    enable_controlsfalseNoEnable two-button controls for update and skip
    collapsiblefalseNoAuto-collapse controls when no update is available/update has been skipped
    horizontalfalseNoDisplay card horizontally
    narrow_buttonsfalseNoAllow more space for text in horizontal configuration
    
+
    Usage
    
+
    
+Example 1
+
+
    - type: custom:button-card
+  template: card_neekster_update
+  entity: update.home_assistant_core_update
+
    
+
+
    
+
    
+Example 2
+
+
    - type: custom:button-card
+  template: card_neekster_update
+  entity: update.home_assistant_core_update
+  variables:
+    ulm_card_neekster_update_enable_controls: true
+    ulm_card_neekster_update_collapsible: true
+    ulm_card_neekster_update_horizontal: true
+    ulm_card_neekster_update_narrow_buttons: true
+
    
+
+
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_neekster_update.yaml
    ---
+### Card Neekster Update ###
+card_neekster_update:
+  template:
+    - "ulm_language_variables"
+  variables:
+    ulm_card_neekster_update_icon: false
+    ulm_card_neekster_update_enable_controls: false
+    ulm_card_neekster_update_collapsible: false
+    ulm_card_neekster_update_horizontal: false
+    ulm_card_neekster_update_narrow_buttons: false
+  triggers_update: "all"
+  show_icon: false
+  show_name: false
+  show_label: false
+  hold_action:
+    action: "more-info"
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+                if (variables.ulm_card_neekster_update_collapsible && entity.state != "on") {
+                    return "\"item1\"";
+                } else if (variables.ulm_card_neekster_update_horizontal) {
+                    return "\"item1 item2\"";
+                } else if (variables.ulm_card_neekster_update_enable_controls) {
+                    return "\"item1\" \"item2\"";
+                } else {
+                    return "\"item1\"";
+                }
+          ]]]
+      - grid-template-columns: >
+          [[[
+                if (variables.ulm_card_neekster_update_collapsible && entity.state != "on") {
+                    return "1fr";
+                } else if (variables.ulm_card_neekster_update_horizontal) {
+                  if(variables.ulm_card_neekster_update_narrow_buttons){
+                    return "2fr 1fr";
+                    } else {
+                      return "1fr 1fr";
+                    }
+                } else {
+                    return "1fr";
+                }
+          ]]]
+      - grid-template-rows: >
+          [[[
+                if (variables.ulm_card_neekster_update_collapsible && entity.state != "on") {
+                    return "1fr";
+                } else if (variables.ulm_card_neekster_update_enable_controls && !variables.ulm_card_neekster_update_horizontal) {
+                    return "min-content min-content";
+                } else {
+                    return "1fr";
+                }
+          ]]]
+      - row-gap: |-
+          [[[
+            if (!variables.ulm_card_neekster_update_collapsible) {
+                return "12px";
+              } else {
+                return entity.state !== "off" ? "12px" : "0px";
+              }
+          ]]]
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+    custom_fields:
+      item2:
+        - display: |
+            [[[
+              if(variables.ulm_card_neekster_update_enable_controls) {
+                if(variables.ulm_card_neekster_update_collapsible){
+                  return entity.state === "off" ? "none" : "block";
+                }
+                return "block";
+              }
+              return "none";
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_info_bg"
+          - "ulm_language_variables"
+        entity: "[[[ return entity.entity_id ]]]"
+        hold_action:
+          action: "more-info"
+        styles:
+          label:
+            - opacity: "1"
+            - filter: "opacity(100%)"
+          card:
+            - padding: "0px"
+            - background: "none"
+            - border-radius: "0"
+            - box-shadow: "none"
+        state:
+          - operator: "template"
+            value: "[[[ return entity.state == 'off' ]]]"
+            icon: "mdi:cloud-check"
+            label: "Up to Date."
+            styles:
+              img_cell:
+                - background-color: "rgba(var(--color-green), 0.2)"
+          - operator: "template"
+            value: "[[[ return entity.state != 'off' ]]]"
+            icon: "mdi:cloud-download"
+            label: "Update Available!"
+            styles:
+              img_cell:
+                - background-color: "rgba(var(--color-yellow), 0.2)"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_2_items"
+        hold_action:
+          action: "more-info"
+        styles:
+          card:
+            - padding: "0px"
+            - background: "none"
+            - border-radius: "0"
+            - box-shadow: "none"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              hold_action:
+                action: "more-info"
+              tap_action:
+                action: "perform-action"
+                perform_action: "update.install"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:package-down"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              entity: "[[[ return entity.entity_id ]]]"
+              hold_action:
+                action: "cperform-action"
+                perform_action: "update.clear_skipped"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "update.skip"
+                target:
+                  entity_id: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:cancel"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_nik_clock/index.html b/usage/custom_cards/custom_card_nik_clock/index.html
new file mode 100644
index 000000000..51e1e5173
--- /dev/null
+++ b/usage/custom_cards/custom_card_nik_clock/index.html
@@ -0,0 +1,3919 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Tablet Clock Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Tablet clock Card"
    
+
    This is a custom-card that shows the currenct time and Date. This is designed for a tablet or big monitor.
    
+
    Screenshot
    
+
    Credits
    
+
    Author: Nik - 2022 Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Requirements
    
+
      
+
    • To have all the Minimalist Card and Custom Cards installed
      • 
+
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_nik_clock
+  variables:
+    ulm_custom_card_nik_clock_switch: input_boolean.menu_tablet
+    ulm_custom_card_nik_clock_switch_enable: false
+
    
+
    Variables
    
+
+
+  
+    
+    
+    
+    
+  
+
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
+
    VariableExampleRequiredExplanation
    ulm_custom_card_nik_clock_switchlock.input_boolean.menu_tabletnoThis is an optional hidden switch to combine with a state-switch card to use some additional logics.
    ulm_custom_card_nik_clock_switch_enabletrue / falsenoDefault is false. It enables the options above.
    
+
+
    Template Sensor Code
    
+
    
+Template Code
+
    custom_card_irmajavi_weather.yaml
    ---
+custom_card_nik_clock:
+  triggers_update: "all"
+  variables:
+    ulm_custom_card_nik_clock_switch:
+    ulm_custom_card_nik_clock_switch_enable: false
+    ulm_language: >
+      [[[
+        return hass["language"];
+      ]]]
+  show_icon: false
+  show_name: true
+  show_state: false
+  show_label: true
+  name: >
+    [[[
+      const time = new Date();
+      let hour = time.getHours();
+      let minute = (time.getMinutes()<10?'0':'') + time.getMinutes()
+      return hour + ":" + minute;
+    ]]]
+  layout: "vertical"
+  label: >
+    [[[
+      const event = new Date();
+      const options = {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+      var locale = variables.ulm_language;
+      let formatted_date = event.toLocaleDateString(locale, options);
+      return formatted_date;
+    ]]]
+  tap_action:
+    action: >
+      [[[
+          if (variables.ulm_custom_card_nik_clock_switch_enable){
+            return 'perform-action'
+          }
+          else{
+            return 'none'
+          }
+      ]]]
+    perform_action: "input_boolean.toggle"
+    target:
+      entity_id: "[[[ return variables.ulm_custom_card_nik_clock_switch ]]]"
+  styles:
+    card:
+      - background-color: "transparent"
+      - height: "100px"
+      - box-shadow: "none"
+    name:
+      - font-size: "290%"
+      - font-weight: "bold"
+      - justify-self: "center"
+    label:
+      - justify-self: "center"
+      - font-size: "110%"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_nik_door/index.html b/usage/custom_cards/custom_card_nik_door/index.html
new file mode 100644
index 000000000..2a3552d63
--- /dev/null
+++ b/usage/custom_cards/custom_card_nik_door/index.html
@@ -0,0 +1,4031 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Minimal Door Lock Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Minimal Door Lock"
    
+
    This is a custom-card that shows the currenct state of your Lock and allows you to open and close it showing the state with a Minimal Design.
    
+
    Screenshot
    
+
    Credits
    
+
    Author: Nik - 2022 Version: 2.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    
+2.0.0
+Added Battery Level for monitoring
+Added double_tap unlock to prevent accidental opening
+
    
+
+
    Requirements
    
+
    To have the Minimalist cards and custom cards installed
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: "custom_card_nik_door"
+  entity: "sensor.nuki_blindato_door_security_state"
+  variables:
+    ulm_custom_card_entity_1_name: "Blindato"
+    ulm_custom_card_entity_1_lock: "lock.nuki_blindato_lock"
+    ulm_custom_card_entity_1_lock_battery: "sensor.blindato_battery"
+
    
+
    Variables
    
+
+
+  
+    
+    
+    
+    
+  
+
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
+
    VariableExampleRequiredExplanation
    ulm_custom_card_entity_1_namesensor.nuki_blindato_door_security_stateYesYour Door Name
    ulm_custom_card_entity_1_locklock.nuki_blindato_lockYesYour Door Lock entity
    ulm_custom_card_entity_1_lock_batterysensor.blindato_batteryYesYour Door Lock battery sensor
    entitysensor.nuki_blindato_door_security_stateYesYour door sensor to track "Open" and "Close" state.
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_nik_door.yaml
    ---
+custom_card_nik_door:
+  template:
+    - "ulm_language_variables"
+  variables:
+    ulm_custom_card_entity_1_name: "[[[ return variables.ulm_custom_card_entity_1_name ]]]"
+    ulm_custom_card_entity_1_lock: "[[[ return variables.ulm_custom_card_entity_1_lock ]]]"
+    ulm_custom_card_entity_1_lock_battery: "[[[ return variables.ulm_custom_card_entity_1_lock_battery ]]]"
+  show_icon: false
+  show_name: false
+  show_label: false
+  lock:
+    enabled: true
+    unlock: "double_tap"
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            var areas = [];
+            areas.push("item1 item1");
+            areas.push("item2 item2");
+            return "\"" + areas.join("\" \"") + "\"";
+          ]]]
+      - grid-template-columns: "1fr 1fr"
+      - grid-template-rows: "min-content min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_more_info"
+        styles:
+          icon:
+            - color: "rgba(var(--color-theme),0.9)"
+            - width: "20px"
+            - place-self: "center"
+          custom_fields:
+            lock:
+              - z-index: 2
+              - border-radius: "50%"
+              - position: "absolute"
+              - left: "30px"
+              - top: "24px"
+              - height: "18px"
+              - width: "18px"
+              - border: "2px solid var(--card-background-color)"
+              - font-size: "12px"
+              - line-height: "14px"
+              - background-color: >
+                  [[[
+                    if (states[variables.ulm_custom_card_entity_1_lock_battery].state <= 40){
+                      return "rgba(var(--color-red),1)";
+                    } else {
+                      return "rgba(var(--color-green),1)";
+                    }
+                  ]]]
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: "mdi:door"
+              styles:
+                icon:
+                  - color: "rgba(var(--color-blue),1)"
+                img_cell:
+                  - background-color: "rgba(var(--color-blue),0.2)"
+              tap_action:
+                action: "none"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_custom_card_entity_1_name ]]]"
+              label: >
+                [[[
+                  return entity.state
+                ]]]
+          lock: >
+            [[[
+              if (states[variables.ulm_custom_card_entity_1_lock_battery].state == 100){
+                return '<ha-icon icon="mdi:battery" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+
+              } if (states[variables.ulm_custom_card_entity_1_lock_battery].state >= 80){
+                return '<ha-icon icon="mdi:battery-70" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+
+              } if (states[variables.ulm_custom_card_entity_1_lock_battery].state >= 60){
+                return '<ha-icon icon="mdi:battery-60" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+
+              } if (states[variables.ulm_custom_card_entity_1_lock_battery].state >= 50){
+                return '<ha-icon icon="mdi:battery-50" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+              }
+                if (states[variables.ulm_custom_card_entity_1_lock_battery].state <= 40){
+                return '<ha-icon icon="mdi:battery-20" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+              }
+            ]]]
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_2_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:lock-open-variant"
+              entity: "[[[ return entity.entity_id ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "lock.open"
+                target:
+                  entity_id: "[[[ return variables.ulm_custom_card_entity_1_lock ]]]"
+              state:
+                - value: "Open"
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-red),1)"
+                    img_cell:
+                      - background-color: "rgba(var(--color-red),0.2)"
+                - value: "Closed & Unlocked"
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-yellow),1)"
+                    img_cell:
+                      - background-color: "rgba(var(--color-yellow),0.2)"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              icon: "mdi:lock"
+              entity: "[[[ return entity.entity_id ]]]"
+              tap_action:
+                action: "perform-action"
+                perform_action: "lock.lock"
+                target:
+                  entity_id: "[[[ return variables.ulm_custom_card_entity_1_lock ]]]"
+              state:
+                - value: "Closed & Locked"
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-green),1)"
+                    img_cell:
+                      - background-color: "rgba(var(--color-green),0.2)"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_nik_nas/index.html b/usage/custom_cards/custom_card_nik_nas/index.html
new file mode 100644
index 000000000..f6b2892f9
--- /dev/null
+++ b/usage/custom_cards/custom_card_nik_nas/index.html
@@ -0,0 +1,4248 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Nas Summary Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Nas Summary Card"
    
+
    This is a custom-card that shows you a summary for your NAS with sensors, Wake on Lan and collapsed info. Once the NAS is off or unavailable it collapses the info.
    
+
    Screenshot
+Screenshot
    
+
    Credits
    
+
    Author: Nik - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+0.1.1
+
    Fix for UI Minimalist v1.0.1.
+
    
+
    Requirements
    
+
    To have the Minimalist cards and custom cards installed
    
+
    Usage
    
+
    - type: "custom:button-card"
+    template: "custom_card_nik_nas"
+    entity: switch.qnap_wol
+    variables:
+      graph_span: "1d"
+      chart_type: "radialBar"
+      entity_1:
+        entity_id: "sensor.nas_cpu_temperature"
+        icon: ''
+        name: "Temp"
+        color: "yellow"
+        max_value: 100
+      entity_2:
+        entity_id: "sensor.nas_memory_usage"
+        icon: ''
+        name: "Memory"
+        color: "blue"
+        max_value: 100
+      entity_3:
+        entity_id: "sensor.nas_cpu_usage"
+        icon: ''
+        name: "CPU"
+        color: "green"
+        max_value: 100
+      entity_4:
+        entity_id: "sensor.disk_use_percent"
+        icon: "mdi:harddisk"
+        name: "Disk"
+        color: "red"
+
    
+
    Variables
    
+
+
+  
+    
+    
+    
+    
+  
+
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
+
    VariableExampleRequiredExplanation
    entityswitch.qnap_wolyesThe Switch to turn On or Off the NAS
    chart_typeline, scatter, pie, donut or radialBaryesThe chart type you want to display
    graph_span1h, 12min, 1d, 1h25, 10sec, ...yesThe span of the graph as a time interval
    entity_idsensor.disk_use_percentyesEntity sensor of choice. 4 entities must be added
    iconmdi:cpu-64-bitnomdi icon you want to be exposed in the img_cell, '' will return entity.attributes.icon 
    namename for the used sensorno'' will return entity.attributes.friendly_name
    colorgreen, blue, yellow, red or greynoif you don't use the color variable it will choice a random color
    max_value10, 300, ...noMaximum value of the sensor. Default will be 100
    
+
+
    Template Code
    
+
    
+Template Code
+
    custom_card_nik_nas.yaml
    ---
+custom_card_nik_nas:
+  template:
+    - "ulm_translation_engine"
+  variables:
+    entity_1:
+      entity_id:
+      icon: "[[[ return entity.attributes.icon ]]]"
+      name: "[[[ return entity.attributes.friendly_name ]]]"
+      color: >
+        [[[
+          var colors = ["yellow", "blue", "red", "green"];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_2:
+      entity_id:
+      icon: "[[[ return entity.attributes.icon  ]]]"
+      name: "[[[ return entity.attributes.friendly_name ]]]"
+      color: >
+        [[[
+          var colors = ["yellow", "blue", "red", "green"];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_3:
+      entity_id:
+      icon: "[[[ return entity.attributes.icon  ]]]"
+      name: "[[[ return entity.attributes.friendly_name ]]]"
+      color: >
+        [[[
+          var colors = ["yellow", "blue", "red","green"];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+    entity_4:
+      entity_id:
+      icon: "[[[ return entity.attributes.icon  ]]]"
+      name: "[[[ return entity.attributes.friendly_name ]]]"
+      color: >
+        [[[
+          var colors = ["yellow", "blue", "red","green"];
+          var color = colors[Math.floor(Math.random() * colors.length)];
+          return color;
+        ]]]
+  show_name: false
+  show_state: false
+  show_label: false
+  show_icon: false
+  show_last_changed: false
+  show_entity_picture: false
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            var areas = [];
+            if (entity.state == "off" || entity.state == "unavailable") {
+                areas.push("item5");
+                return "\"" + areas.join("\" \"") + "\"";
+            } else {
+                areas.push("item4 item4");
+                areas.push("item1 radial");
+                areas.push("item2 radial");
+                areas.push("item3 radial");
+                return "\"" + areas.join("\" \"") + "\"";
+            }
+          ]]]
+      - grid-template-columns: >
+          [[[
+            if (entity.state == "off" || entity.state == "unavailable") {
+                return "1fr";
+            } else {
+                return "35% 65%";
+            }
+          ]]]
+      - grid-template-rows: >
+          [[[
+            if (entity.state == "off" || entity.state == "unavailable") {
+                return "min-content";
+            } else {
+                return "1fr";
+            }
+          ]]]
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+    custom_fields:
+      item1:
+        - display: >
+            [[[
+              if (entity.state == "off" || entity.state == "unavailable") {
+                  return "none";
+              } else {
+                  return "block";
+              }
+            ]]]
+      item2:
+        - display: >
+            [[[
+              if (entity.state == "off" || entity.state == "unavailable") {
+                  return "none";
+              } else {
+                  return "block";
+              }
+            ]]]
+      item3:
+        - display: >
+            [[[
+              if (entity.state == "off" || entity.state == "unavailable") {
+                  return "none";
+              } else {
+                  return "block";
+              }
+            ]]]
+      item4:
+        - display: >
+            [[[
+              if (entity.state == "off" || entity.state == "unavailable") {
+                  return "none";
+              } else {
+                  return "block";
+              }
+            ]]]
+      item5:
+        - display: >
+            [[[
+              if (entity.state == "off" || entity.state == "unavailable") {
+                  return "block";
+              } else {
+                  return "none";
+              }
+            ]]]
+      radial:
+        - display: >
+            [[[
+              if (entity.state == "off" || entity.state == "unavailable") {
+                  return "none";
+              } else {
+                  return "block";
+              }
+            ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        entity: "[[[ return variables.entity_1.entity_id ]]]"
+        template: "card_generic_swap"
+        variables:
+          ulm_card_generic_swap_name: "[[[ return variables.entity_1.name ]]]"
+          ulm_card_generic_swap_icon: "[[[ return variables.entity_1.icon ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              custom_fields:
+                item1:
+                  card:
+                    type: "custom:button-card"
+                    styles:
+                      icon:
+                        - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]"
+                      img_cell:
+                        - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "none"
+            - padding-top: "1px"
+            - padding-bottom: "1px"
+    item2:
+      card:
+        type: "custom:button-card"
+        entity: "[[[ return variables.entity_2.entity_id ]]]"
+        template: "card_generic_swap"
+        variables:
+          ulm_card_generic_swap_name: "[[[ return variables.entity_2.name ]]]"
+          ulm_card_generic_swap_icon: "[[[ return variables.entity_2.icon ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              custom_fields:
+                item1:
+                  card:
+                    type: "custom:button-card"
+                    styles:
+                      icon:
+                        - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]"
+                      img_cell:
+                        - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "none"
+            - padding-top: "1px"
+            - padding-bottom: "1px"
+    item3:
+      card:
+        type: "custom:button-card"
+        entity: "[[[ return variables.entity_3.entity_id ]]]"
+        template: "card_generic_swap"
+        variables:
+          ulm_card_generic_swap_name: "[[[ return variables.entity_3.name ]]]"
+          ulm_card_generic_swap_icon: "[[[ return variables.entity_3.icon ]]]"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              custom_fields:
+                item1:
+                  card:
+                    type: "custom:button-card"
+                    styles:
+                      icon:
+                        - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]"
+                      img_cell:
+                        - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "none"
+            - padding-top: "1px"
+            - padding-bottom: "1px"
+    item4:
+      card:
+        type: "horizontal-stack"
+        cards:
+          - type: "custom:button-card"
+            template: "card_input_boolean"
+            entity: "[[[ return entity.entity_id]]]"
+            variables:
+              ulm_card_input_boolean_name: "[[[ return variables.ulm_translation_status ]]]"
+              ulm_card_input_boolean_icon: "mdi:nas"
+            styles:
+              card:
+                - background-color: "transparent"
+                - box-shadow: "none"
+                - border: "2px solid var(--google-grey)"
+            tap_action:
+              action: "more-info"
+
+          - type: "custom:button-card"
+            template: "card_generic_swap"
+            entity: "[[[ return variables.entity_4.entity_id ]]]"
+            variables:
+              ulm_card_generic_swap_name: "[[[ return variables.entity_4.name ]]]"
+              ulm_card_generic_swap_icon: "[[[ return variables.entity_4.icon ]]]"
+            custom_fields:
+              item1:
+                card:
+                  type: "custom:button-card"
+                  custom_fields:
+                    item1:
+                      card:
+                        type: "custom:button-card"
+                        styles:
+                          icon:
+                            - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]"
+                          img_cell:
+                            - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]"
+            styles:
+              card:
+                - background-color: "transparent"
+                - box-shadow: "none"
+                - border: "2px solid var(--google-grey)"
+            tap_action:
+              action: "none"
+    item5:
+      card:
+        type: "custom:button-card"
+        template: "card_input_boolean"
+        entity: "[[[ return entity.entity_id]]]"
+        variables:
+          ulm_card_input_boolean_name: "[[[ return variables.ulm_translation_status ]]]"
+          ulm_card_input_boolean_icon: "mdi:nas"
+        styles:
+          card:
+            - background-color: "transparent"
+            - box-shadow: "none"
+            - border: "2px solid var(--google-grey)"
+        tap_action:
+          action: "more-info"
+    radial:
+      card:
+        type: "custom:apexcharts-card"
+        graph_span: "[[[ return variables.graph_span ]]]"
+        chart_type: "[[[ return variables.chart_type ]]]"
+        style: |
+          ha-card {
+            border-radius: "var(--border-radius)";
+            box-shadow: none;
+            padding-left: 10px;
+            padding-bottom: 0px;
+          }
+        header:
+          show: false
+        apex_config:
+          title:
+            floating: false
+            align: "top"
+            style:
+              fontSize: "2px"
+              fontWeight: "bold"
+          chart:
+            foreColor: "rgb(148,148,148)"
+            offsetY: 5
+          legend:
+            show: false
+        series:
+          - entity: "[[[ return variables.entity_1.entity_id ]]]"
+            name: "[[[ return variables.entity_1.name ]]]"
+            color: "[[[ return `var(--google-${variables.entity_1.color})`;]]]"
+            max: "[[[ return variables.entity_1.max_value ]]]"
+          - entity: "[[[ return variables.entity_2.entity_id ]]]"
+            name: "[[[ return variables.entity_2.name ]]]"
+            color: "[[[ return `var(--google-${variables.entity_2.color})`;]]]"
+            max: "[[[ return variables.entity_2.max_value ]]]"
+          - entity: "[[[ return variables.entity_3.entity_id ]]]"
+            name: "[[[ return variables.entity_3.name ]]]"
+            color: "[[[ return `var(--google-${variables.entity_3.color})`;]]]"
+            max: "[[[ return variables.entity_3.max_value ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_nik_tablet/index.html b/usage/custom_cards/custom_card_nik_tablet/index.html
new file mode 100644
index 000000000..567406582
--- /dev/null
+++ b/usage/custom_cards/custom_card_nik_tablet/index.html
@@ -0,0 +1,4244 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Tablet Custom Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Tablet Custom Card
    
+
+
+
+
    Custom-card "Tablet Custom Card"
    
+
    This is a custom-card that uses the installed Kiosk app on a tablet to get information from. It includes USB Power (if the tablet has it), Motion, light and maintenance switch as well as restart and reload mode.
    
+
    Screenshot
+Screenshot
    
+
    Credits
    
+
    Author: Nik - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
    
+0.1.1
+Fix for UI Minimalist v1.0.1.
+
    
+
+
    Requirements
    
+
      
+
    • To have all the Minimalist Cards and Custom Cards;
      • 
+
    • To have installed and configured Kiosk APP on the Tablet (enabled permissions etc...);
      • 
+
    • To have the HACS Integration "Fully Kiosk Browser" installed and configured in HomeAssistant;
      • 
+
    • Add Bar Card to HACS frontend
      • 
+
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: "custom_card_nik_tablet"
+  variables:
+    ulm_custom_card_nik_tablet_main: binary_sensor.ping_tablet_1p
+    ulm_custom_card_nik_tablet_name: "Tablet 1P"
+    ulm_custom_card_nik_tablet_battery: sensor.tablet_1p_battery_level
+    ulm_custom_card_nik_tablet_battery_name: "Battery"
+    ulm_custom_card_nik_tablet_button1: switch.sonoff_tablet_1p
+    ulm_custom_card_nik_tablet_button2: switch.tablet_1p_motion_detection
+    ulm_custom_card_nik_tablet_button3: light.tablet_1p_screen
+    ulm_custom_card_nik_tablet_restart: button.tablet_1p_restart_browser
+    ulm_custom_card_nik_tablet_reload: button.tablet_1p_load_start_url
+    ulm_custom_card_nik_tablet_maintenance: switch.tablet_1p_maintenance_mode
+    ulm_custom_card_nik_tablet_par1: sensor.tablet_1p_ram_free_memory
+    ulm_custom_card_nik_tablet_par1_name: "RAM"
+    ulm_custom_card_nik_tablet_par2: sensor.tablet_1p_internal_storage_free_space
+    ulm_custom_card_nik_tablet_par2_name: "Disk"
+    ulm_custom_card_nik_tablet_par3: binary_sensor.tablet_1p_plugged_in
+    ulm_custom_card_nik_tablet_par3_name: "Power"
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+  
+  
+  
+  
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_custom_card_nik_tablet_mainbinary_sensor.ping_tablet_1pYesA sensor that checks if the tablet is online. A simple binary ping sensor does the job.
    ulm_custom_card_nik_tablet_nameTablet 1PYesName of the Tablet
    ulm_custom_card_nik_tablet_batterysensor.tablet_1p_battery_levelYesBattery sensor for the Tablet
    ulm_custom_card_nik_tablet_battery_nameBatteryYesIf you want to customize the Battery name
    ulm_custom_card_nik_tablet_button1switch.sonoff_tablet_1pYesA Switch that enables or not USB Power for the Tablet. If not present you can replace it with another Switch of your choice. (check your device configs)
    ulm_custom_card_nik_tablet_button2switch.tablet_1p_motion_detectionYesThe Motion detection switch for your tablet (check your device configs)
    ulm_custom_card_nik_tablet_button3light.tablet_1p_screenYesThe entity that turns on or off the Screen of the Tablet (check your device configs)
    ulm_custom_card_nik_tablet_restartbutton.tablet_1p_restart_browserYesThe entity to restart the Kiosk App of the Tablet (check your device configs)
    ulm_custom_card_nik_tablet_reloadbutton.tablet_1p_load_start_urlYesThe entity to reload the web page of the Kios App of the Tablet (check your device configs)
    ulm_custom_card_nik_tablet_maintenanceswitch.tablet_1p_maintenance_modeYesThe entity to put the tablet in maintenance mode. (check your device configs)
    ulm_custom_card_nik_tablet_par1sensor.exampleYesAn entity of your choice to monitor a specific tablet parameter
    ulm_custom_card_nik_tablet_par2sensor.exampleYesAn entity of your choice to monitor a specific tablet parameter
    ulm_custom_card_nik_tablet_par3sensor.exampleYesAn entity of your choice to monitor a specific tablet parameter
    ulm_custom_card_nik_tablet_par1_namesensor.exampleYesName for Parameter 1
    ulm_custom_card_nik_tablet_par2_namesensor.exampleYesName for Parameter 2
    ulm_custom_card_nik_tablet_par3_namesensor.exampleYesName for Parameter 3
    
+
+
    Template Code
    
+
    ---
+custom_card_nik_tablet:
+  template:
+    - "ulm_language_variables"
+  triggers_update: "all"
+  show_icon: false
+  show_name: false
+  show_label: false
+  variables:
+    ulm_custom_card_nik_tablet_main: "[[[ return variables.ulm_custom_card_nik_tablet_main ]]]"
+    ulm_custom_card_nik_tablet_name: "[[[ return variables.ulm_custom_card_nik_tablet_name ]]]"
+    ulm_custom_card_nik_tablet_battery: "[[[ return variables.ulm_custom_card_nik_tablet_battery ]]]"
+    ulm_custom_card_nik_tablet_battery_name: "[[[ return variables.ulm_custom_card_nik_tablet_battery_name ]]]"
+    ulm_custom_card_nik_tablet_button1: "[[[ return variables.ulm_custom_card_nik_tablet_button1 ]]]"
+    ulm_custom_card_nik_tablet_button2: "[[[ return variables.ulm_custom_card_nik_tablet_button2 ]]]"
+    ulm_custom_card_nik_tablet_button3: "[[[ return variables.ulm_custom_card_nik_tablet_button3 ]]]"
+    ulm_custom_card_nik_tablet_restart: "[[[ return variables.ulm_custom_card_nik_tablet_restart ]]]"
+    ulm_custom_card_nik_tablet_reload: "[[[ return variables.ulm_custom_card_nik_tablet_reload ]]]"
+    ulm_custom_card_nik_tablet_maintenance: "[[[ return variables.ulm_custom_card_nik_tablet_maintenance ]]]"
+    ulm_custom_card_nik_tablet_par1: "[[[ return variables.ulm_custom_card_nik_tablet_par1 ]]]"
+    ulm_custom_card_nik_tablet_par2: "[[[ return variables.ulm_custom_card_nik_tablet_par2 ]]]"
+    ulm_custom_card_nik_tablet_par3: "[[[ return variables.ulm_custom_card_nik_tablet_par3 ]]]"
+    ulm_custom_card_nik_tablet_par1_name: "[[[ return variables.ulm_custom_card_nik_tablet_par1_name ]]]"
+    ulm_custom_card_nik_tablet_par2_name: "[[[ return variables.ulm_custom_card_nik_tablet_par2_name ]]]"
+    ulm_custom_card_nik_tablet_par3_name: "[[[ return variables.ulm_custom_card_nik_tablet_par3_name ]]]"
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            var areas = [];
+            areas.push("item1 item1");
+            areas.push(". .");
+            areas.push("item2 item2");
+            areas.push(". .");
+            areas.push("item3 item3");
+            areas.push("item4 item4");
+            areas.push("item5 item5");
+            return "\"" + areas.join("\" \"") + "\"";
+          ]]]
+      - grid-template-columns: "1fr 1fr"
+      - grid-template-rows: "min-content 10px min-content 10px min-content min-content min-content"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "card_input_boolean"
+        entity: "[[[ return variables.ulm_custom_card_nik_tablet_main ]]]"
+        icon: "mdi:tablet"
+        name: "[[[ return variables.ulm_custom_card_nik_tablet_name ]]]"
+        styles:
+          card:
+            - box-shadow: "none"
+        tap_action:
+          action: "none"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template:
+                - "widget_icon"
+                - "green"
+              entity: "[[[ return variables.ulm_custom_card_nik_tablet_button1 ]]]"
+              icon: "mdi:usb"
+          item2:
+            card:
+              type: "custom:button-card"
+              template:
+                - "widget_icon"
+                - "green"
+              entity: "[[[ return variables.ulm_custom_card_nik_tablet_button2 ]]]"
+              icon: "mdi:motion-sensor"
+          item3:
+            card:
+              type: "custom:button-card"
+              template:
+                - "widget_icon"
+                - "green"
+              entity: "[[[ return variables.ulm_custom_card_nik_tablet_button3 ]]]"
+              icon: "mdi:monitor"
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template:
+                - "widget_icon"
+                - "blue_no_state"
+              entity: "[[[ return variables.ulm_custom_card_nik_tablet_restart ]]]"
+              icon: "mdi:restart-alert"
+              tap_action:
+              action: "call-service"
+              service: "button.press"
+              service_data:
+                entity_id: "[[[ return variables.ulm_custom_card_nik_tablet_restart ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              template:
+                - "widget_icon"
+                - "yellow"
+              entity: "[[[ return variables.ulm_custom_card_nik_tablet_maintenance ]]]"
+              icon: "mdi:account-hard-hat-outline"
+          item3:
+            card:
+              type: "custom:button-card"
+              template:
+                - "widget_icon"
+                - "blue_no_state"
+              entity: "[[[ return variables.ulm_custom_card_nik_tablet_reload ]]]"
+              icon: "mdi:reload"
+              tap_action:
+                action: "call-service"
+                service: "button.press"
+                service_data:
+                  entity_id: "[[[ return variables.ulm_custom_card_nik_tablet_reload ]]]"
+    item4:
+      card:
+        type: "custom:button-card"
+        template: "list_3_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "custom_widget_nik_tablet"
+              entity: "[[[ return variables.ulm_custom_card_nik_tablet_par1 ]]]"
+              name: "[[[ return variables.ulm_custom_card_nik_tablet_par1_name ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "custom_widget_nik_tablet"
+              entity: "[[[ return variables.ulm_custom_card_nik_tablet_par2 ]]]"
+              name: "[[[ return variables.ulm_custom_card_nik_tablet_par2_name ]]]"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "custom_widget_nik_tablet"
+              entity: "[[[ return variables.ulm_custom_card_nik_tablet_par3 ]]]"
+              name: "[[[ return variables.ulm_custom_card_nik_tablet_par3_name ]]]"
+    item5:
+      card:
+        type: "custom:button-card"
+        template: "custom_bar_card_nik_tablet"
+        variables:
+          ulm_custom_bar_card_nik_tablet_card_entity: "[[[ return variables.ulm_custom_card_nik_tablet_battery ]]]"
+          ulm_custom_bar_card_nik_tablet_card_name: "[[[ return variables.ulm_custom_card_nik_tablet_battery_name ]]]"
+          ulm_custom_bar_card_nik_tablet_card_value: true
+          ulm_custom_bar_card_nik_tablet_card_indicator: false
+
+custom_widget_nik_tablet:
+  show_label: true
+  show_icon: false
+  label: |
+    [[[
+      if (entity.attributes.unit_of_measurement) {
+        var unit = entity.attributes.unit_of_measurement != null ? ' ' + entity.attributes.unit_of_measurement: ''
+        return entity.state + unit;
+      } else {
+        return entity.state;
+      }
+    ]]]
+  styles:
+    name:
+      - justify-self: "center"
+      - align-self: "start"
+      - font-weight: "bolder"
+      - font-size: "12px"
+      - filter: "opacity(40%)"
+    label:
+      - margin-top: "10px"
+      - justify-self: "center"
+      - font-weight: "bold"
+      - font-size: "14px"
+    grid:
+      - grid-template-areas: "'l' 'n'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+    card:
+      - box-shadow: "none"
+
+custom_bar_card_nik_tablet:
+  triggers_update: "all"
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-rows: "1fr"
+    card:
+      - border-radius: "none"
+      - background-color: "transparent"
+      - box-shadow: "none"
+      - padding: "0px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_info"
+          - "card_generic"
+        styles:
+          card:
+            - box-shadow: "none"
+            - border-radius: "none"
+            - padding: "12px"
+        entity: "[[[ return variables.ulm_custom_bar_card_nik_tablet_card_entity ]]]"
+        name: "[[[ return variables.ulm_custom_bar_card_nik_tablet_card_name != '' ? variables.ulm_custom_bar_card_nik_tablet_card_name : '' ]]]"
+    item2:
+      card:
+        type: "custom:bar-card"
+        entities:
+          - entity: "[[[ return variables.ulm_custom_bar_card_nik_tablet_card_entity ]]]"
+        positions:
+          icon: "off"
+          indicator: "[[[ return variables.ulm_custom_bar_card_nik_tablet_card_indicator == true ? 'inside' : 'off' ]]]"
+          minmax: "off"
+          title: "off"
+          value: "[[[ return variables.ulm_custom_bar_card_nik_tablet_card_value == true ? 'inside' : 'off' ]]]"
+          name: "off"
+        severity:
+          - color: "var(--google-red)"
+            from: 1
+            to: 30
+          - color: "var(--google-yellow)"
+            from: 31
+            to: 59
+          - color: "var(--google-green)"
+            from: 60
+            to: 100
+        min: 1
+        max: 100
+        style: |-
+          bar-card-currentbar {
+            right: 0;
+          }
+          bar-card-backgroundbar {
+            right: 0;
+          }
+          #states {
+            padding: 0;
+            height: 35px;
+          }
+          bar-card-background {
+            height: 35px !important;
+          }
+          bar-card-indicator {
+            left: 10px;
+          }
+          bar-card-value {
+            font-weight: bold;
+            font-size: 12px;
+          }
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_paddy_dwd_pollen/index.html b/usage/custom_cards/custom_card_paddy_dwd_pollen/index.html
new file mode 100644
index 000000000..e3174dd35
--- /dev/null
+++ b/usage/custom_cards/custom_card_paddy_dwd_pollen/index.html
@@ -0,0 +1,3964 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        DWD Pollen Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "DWD Pollen"
    
+
    This is a custom-card to show the pollen count, taken from the DWD pollen service via a rest sensor.
    
+
    Credits
    
+
    Author: Paddy0174 - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
    
+1.0.1
+Fix for UI Minimalist v1.0.1.
+
    
+
+
    Usage
    
+
    - type: custom:button-card
+  template:
+    - custom_card_paddy_dwd_pollen
+  entity: sensor.dwd_pollenbelastung_birke
+
    
+
    Requirements
    
+
    n/a
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_paddy_dwd_pollen.yaml
    ---
+custom_card_paddy_dwd_pollen:
+  template:
+    - "card_generic_swap"
+    - "ulm_custom_card_paddy_dwd_pollen_language_variables"
+  variables:
+    ulm_card_generic_swap_name: "[[[ return variables.ulm_custom_card_paddy_dwd_pollen_name; ]]]"
+    ulm_card_generic_swap_icon: "[[[ return variables.ulm_custom_card_paddy_dwd_pollen_icon; ]]]"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_more_info"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              state:
+                - value: "6"
+                  styles:
+                    img_cell:
+                      - background-color: "rgba(190,0,33,1)"
+                - value: "5"
+                  styles:
+                    img_cell:
+                      - background-color: "rgba(240,56,26,1)"
+                - value: "4"
+                  styles:
+                    img_cell:
+                      - background-color: "rgba(254,154,36,1)"
+                - value: "3"
+                  styles:
+                    img_cell:
+                      - background-color: "rgba(254,197,77,1)"
+                - value: "2"
+                  styles:
+                    img_cell:
+                      - background-color: "rgba(254,228,156,1)"
+                - value: "1"
+                  styles:
+                    img_cell:
+                      - background-color: "rgba(219,250,200,1)"
+                - value: "0"
+                  styles:
+                    icon:
+                      - color: "rgba(var(--color-theme),0.2)"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              label: >
+                [[[
+                  if (entity.state == "6"){
+                    return variables.ulm_custom_card_paddy_dwd_pollen_6;
+                  } else if (entity.state == "5"){
+                    return variables.ulm_custom_card_paddy_dwd_pollen_5;
+                  } else if (entity.state == "4"){
+                    return variables.ulm_custom_card_paddy_dwd_pollen_4;
+                  } else if (entity.state == "3"){
+                    return variables.ulm_custom_card_paddy_dwd_pollen_3;
+                  } else if (entity.state == "2"){
+                    return variables.ulm_custom_card_paddy_dwd_pollen_2;
+                  } else if (entity.state == "1"){
+                    return variables.ulm_custom_card_paddy_dwd_pollen_1;
+                  }
+                  return variables.ulm_custom_card_paddy_dwd_pollen_none;
+                ]]]
+
    
+
    
+
    HomeAssistant
    
+
    I use the following rest and template sensors in HA:
    
+
    sensor:
+  - platform: rest
+    scan_interval: 3600
+    name: "DWD Pollenbelastung"
+    resource: https://opendata.dwd.de/climate_environment/health/alerts/s31fg.json
+    json_attributes_path: "$..content[?(@.partregion_id==XXX)].Pollen"
+    json_attributes:
+      #- Erle
+      #- Beifuss
+      #- Ambrosia
+      - Birke
+      #- Esche
+      - Hasel
+      - Graeser
+      #- Roggen
+    value_template: "{{ value_json.last_update }}"
+  - platform: template
+    sensors:
+      dwd_pollenbelastung_birke:
+        icon_template: "mdi:tree-outline"
+        friendly_name: "Birke"
+        value_template: >-
+          {% set dwd_state = state_attr('sensor.dwd_pollenbelastung', 'Birke')['today'] %}
+          {% if dwd_state == "3" %}6{% elif dwd_state == "2-3"%}5{% elif dwd_state == "2"%}4{% elif dwd_state == "1-2"%}3{% elif dwd_state == "1"%}2{% elif dwd_state == "0-1"%}1{% else %}0{% endif %}
+        attribute_templates:
+          today: >-
+            {% set dwd_state = state_attr('sensor.dwd_pollenbelastung', 'Birke')['today'] %}
+            {% if dwd_state == "3" %}6{% elif dwd_state == "2-3"%}5{% elif dwd_state == "2"%}4{% elif dwd_state == "1-2"%}3{% elif dwd_state == "1"%}2{% elif dwd_state == "0-1"%}1{% else %}0{% endif %}
+          tomorrow: >-
+            {% set dwd_state = state_attr('sensor.dwd_pollenbelastung', 'Birke')['tomorrow'] %}
+            {% if dwd_state == "3" %}6{% elif dwd_state == "2-3"%}5{% elif dwd_state == "2"%}4{% elif dwd_state == "1-2"%}3{% elif dwd_state == "1"%}2{% elif dwd_state == "0-1"%}1{% else %}0{% endif %}
+
    
+
    Notes
    
+
      
+
    • As this card is mainly for the DWD pollen sensor, that is based in Germany and shows only german data, the only available language is "German". If you want another language added, please leave a message in the support thread.
      • 
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_paddy_waste_collection/index.html b/usage/custom_cards/custom_card_paddy_waste_collection/index.html
new file mode 100644
index 000000000..9a5d847cc
--- /dev/null
+++ b/usage/custom_cards/custom_card_paddy_waste_collection/index.html
@@ -0,0 +1,4076 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Waste Collection Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Waste collection"
    
+
    This is a custom-card to show the next waste collection date. It uses the data from the custom_component "Waste Collection Framework".
    
+
    Credits
    
+
    Author: Paddy0174 - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
    
+1.0.1
+Fix for UI Minimalist v1.0.1.
+
    
+
    
+1.0.2
+Fixed the bug where card doesn't show at all
+
    
+
+
    Usage
    
+
    - type: custom:button-card
+  template:
+    - custom_card_paddy_waste_collection
+  entity: sensor.waste_collection_paper
+
    
+
    Requirements
    
+
    This card needs the following to function correctly:
    
+
+
+
+
+
+
+
+
+
+
+
+
    Component / cardrequiredLink
    Waste Collection Schedule Frameworkyesmore info
    
+
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    entitysensor.waste_collection_paperyesYour waste collection sensor. See HA example on how to configure.
    ulm_card_generic_swap_namePaperno
    ulm_card_generic_swap_iconmdi:trash-canno
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_paddy_waste_collection.yaml
    ---
+custom_card_paddy_waste_collection:
+  template:
+    - "card_generic_swap"
+  variables:
+    ulm_card_generic_swap_name: "[[[ return entity.name; ]]]"
+    ulm_card_generic_swap_icon: "[[[ return entity.icon; ]]]"
+  state:
+    - operator: "template"
+      value: "[[[ return states[entity.entity_id].attributes.daysTo == 0; ]]]"
+      styles:
+        custom_fields:
+          notification:
+            - border-radius: "50%"
+            - position: "absolute"
+            - left: "38px"
+            - top: "8px"
+            - height: "16px"
+            - width: "16px"
+            - border: "2px solid var(--card-background-color)"
+            - font-size: "12px"
+            - line-height: "14px"
+            - z-index: "1"
+            - background-color: >
+                [[[
+                  return "rgba(var(--color-red),1)";
+                ]]]
+    - operator: "template"
+      value: "[[[ return states[entity.entity_id].attributes.daysTo == 1; ]]]"
+      styles:
+        custom_fields:
+          notification:
+            - border-radius: "50%"
+            - position: "absolute"
+            - left: "38px"
+            - top: "8px"
+            - height: "16px"
+            - width: "16px"
+            - border: "2px solid var(--card-background-color)"
+            - font-size: "12px"
+            - line-height: "14px"
+            - z-index: "1"
+            - background-color: >
+                [[[
+                  return "rgba(var(--color-red),1)";
+                ]]]
+    - value: "unavailable"
+      styles:
+        custom_fields:
+          notification:
+            - border-radius: "50%"
+            - position: "absolute"
+            - left: "38px"
+            - top: "8px"
+            - height: "16px"
+            - width: "16px"
+            - border: "2px solid var(--card-background-color)"
+            - font-size: "12px"
+            - line-height: "14px"
+            - z-index: "1"
+            - background-color: >
+                [[[
+                  return "rgba(var(--color-red),1)";
+                ]]]
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_more_info"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              state:
+                - operator: "template"
+                  value: "[[[ return states[entity.entity_id].attributes.daysTo == 0; ]]]"
+                  styles:
+                    img_cell:
+                      - background-color: "rgba(var(--color-red),0.5)"
+                    icon:
+                      - color: "rgba(var(--color-red),1)"
+                - operator: "template"
+                  value: "[[[ return states[entity.entity_id].attributes.daysTo == 1; ]]]"
+                  styles:
+                    img_cell:
+                      - background-color: "rgba(var(--color-red),0.05)"
+                    icon:
+                      - color: "rgba(var(--color-red),1)"
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+    notification: >
+      [[[
+        if (entity.state == 'unavailable' || states[entity.entity_id].attributes.daysTo == 0 || states[entity.entity_id].attributes.daysTo == 1){
+          return '<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>'
+        }
+      ]]]
+
    
+
    
+
    HomeAssistant
    
+
    This is my sensor setup in HA. I do the change from "days" to "friendly days" in my template sensor.
    
+
    
+
    Note
    
+
      
+
    • Don't forget to set add_days_to in your sensor config
      • 
+
    • "HEUTE" is german for today or aujourd'hui
      • 
+
    • "MORGEN" is german for tomorrow or demain
      • 
+
    
+
    
+
    sensor:
+  - platform: waste_collection_schedule
+    name: waste_collection_paper
+    details_format: upcoming
+    add_days_to: true # this line is important
+    value_template: >-
+      {% if value.daysTo == 0 %}
+      HEUTE
+      {% elif value.daysTo == 1 %}
+      MORGEN
+      {% else %}
+      in {{value.daysTo}} Tagen
+      {% endif %}
+    types:
+      - Papiertonne
+
    
+
    Notes
    
+
    n/a
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_paddy_welcome/index.html b/usage/custom_cards/custom_card_paddy_welcome/index.html
new file mode 100644
index 000000000..f0150645a
--- /dev/null
+++ b/usage/custom_cards/custom_card_paddy_welcome/index.html
@@ -0,0 +1,4275 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Welcome Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Welcome"
    
+
    This is a custom-card to show a welcome message to the user. It comes in four different versions:
    
+
      
+
    • welcome message (custom_card_paddy_welcome)
      • 
+
    • welcome message + weather-forecast (custom_card_paddy_welcome_with_weather)
      • 
+
    • welcome message + news (custom_card_paddy_welcome_with_news) [based on home-feed-card]
      • 
+
    
+
    The card shows a time based message (good morning/afternoon/evening/hello) to the logged-in user with username. The second part of the card varies depending on what version you choose. Note, that you have different requirements depending on the version!
    
+
    Credits
    
+
    Author: Paddy0174 - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Requirements
    
+
    This card needs the following to function correctly:
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Component / cardrequiredNote
    lovelace-card-modyes
    a weather integration/provideronly for welcome-card-with-weatherSee setup instructions for a HA weather integration
    home-feed-cardonly for welcome-card-with-news
    
+
+
    Usage
    
+
    - type: custom:button-card
+  template: custom_card_paddy_welcome
+  variables:
+    ulm_custom_card_paddy_welcome_time: sensor.time
+
+- type: custom:button-card
+  template: custom_card_paddy_welcome_with_weather
+  variables:
+    ulm_custom_card_paddy_welcome_time: sensor.time
+    ulm_custom_card_paddy_welcome_weather_provider: weather.accu_weather
+
+- type: custom:button-card
+  template: custom_card_paddy_welcome_with_news
+  variables:
+    ulm_custom_card_paddy_welcome_time: sensor.time
+    ulm_custom_card_paddy_welcome_news_entities:
+      - entity: sensor.waste_collection_paper
+        content_template: "<b>{{display_name}}</b><br>{{state}}"
+      - entity: sensor.waste_collection_waste
+        content_template: "<b>{{display_name}}</b><br>{{state}}"
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Card typeVariableExampleRequiredExplanation
    allulm_custom_card_paddy_welcome_timesensor.timeyesThis is your Home Assistant sensor.time
    _welcome_with_weatherulm_custom_card_paddy_welcome_weather_providerweather.accu_weatheryesThis is your weather provider
    _welcome_with_newsulm_custom_card_paddy_welcome_news_entitiesentity: sensor.waste_collection_paper
    content_template: "<b>{{display_name}}</b><br>{{state}}"    		yesA list of your entities to show in the news feed, see the note underneath.
    
+
+
    
+
    Note _welcome_with_news
    
+
    This card is based on home-feed-card and needs a little different configuration in the variables.
+To allow almost all entities from HomeAssistant to show in the news, you're able to set all options that home-feed-card provides. This makes it necessary, that you set these entities in a list. Let me show you an example:
    
+
    # normally you do this
+variables:
+  ulm_variable: your_variable_entity
+
+# here you need to do a list
+variables:
+  ulm_variable:
+    - your_variable_entity_1
+    - your_variable_entity_2
+
+# to use an option from home-feed-card
+variables:
+  ulm_variable:
+    - entity: your_variable_entity_1
+      content_template: "<b>{{ display_name }}</b><br>{{ state }}"
+    - your_variable_entity_2
+
    
+
    You can find all available options and their description here.
    
+
    I recommend to use a content_template to format the output for every news item, eg. like this:
    
+
    content_template: "<b>{{ display_name }}</b><br />{{ state }}"
+
    
+
    
+
    Example
    
+
    - type: custom:button-card
+  template: custom_card_paddy_welcome_with_news
+  variables:
+    ulm_custom_card_paddy_welcome_news_entities:
+      - entity: input_datetime.alarm_clock
+        content_template: "<b>{{display_name}}</b><br />{{state}}"
+      - entity: sensor.waste_collection_bio
+        content_template: "<b>{{display_name}}</b><br />{{state}}"
+      - entity: sensor.waste_collection_paper
+        content_template: "<b>{{display_name}}</b><br />{{state}}"
+      - entity: sensor.waste_collection_plastic
+        content_template: "<b>{{display_name}}</b><br />{{state}}"
+
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_paddy_welcome.yaml
    ---
+custom_card_paddy_welcome:
+  template:
+    - "ulm_language_variables"
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: "'item1'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "markdown"
+        content: >
+          [[[
+            let time = states[variables.ulm_custom_card_paddy_welcome_time].state;
+            let welcome = '';
+
+            if (time > '18:00'){
+              welcome = variables.ulm_evening;
+            } else if (time > '12:00'){
+              welcome = variables.ulm_afternoon;
+            } else if (time > '05:00'){
+              welcome = variables.ulm_morning;
+            } else {
+              welcome = variables.ulm_hello;
+            }
+            return welcome + ',<br>' + user.name + '!';
+          ]]]
+        card_mod:
+        style: |
+          ha-card {
+            border-radius: 14px;
+            box-shadow: none;
+            font-size: 30px;
+            text-align: left;
+            cursor: default;
+          }
+
+custom_card_paddy_welcome_with_weather:
+  template:
+    - "ulm_language_variables"
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "markdown"
+        content: >
+          [[[
+            let time = states[variables.ulm_custom_card_paddy_welcome_time].state;
+            let welcome = '';
+
+            if (time > '18:00'){
+              welcome = variables.ulm_evening;
+            } else if (time > '12:00'){
+              welcome = variables.ulm_afternoon;
+            } else if (time > '05:00'){
+              welcome = variables.ulm_morning;
+            } else {
+              welcome = variables.ulm_hello;
+            }
+            return welcome + ',<br>' + user.name + '!';
+          ]]]
+        card_mod:
+        style: |
+          ha-card {
+            border-radius: 14px;
+            box-shadow: none;
+            font-size: 30px;
+            text-align: left;
+            cursor: default;
+          }
+    item2:
+      card:
+        type: "weather-forecast"
+        entity: "[[[ return variables.ulm_custom_card_paddy_welcome_weather_provider; ]]]"
+        show_forecast: false
+        card_mod:
+        style: |
+          ha-card.type-weather-forecast {
+            border-radius: 14px;
+            box-shadow: none;
+          }
+          ha-card.type-weather-forecast .state {
+            text-align: left;
+            font-size: 14px;
+            font-weight: bolder;
+          }
+          ha-card.type-weather-forecast .name {
+            text-align: left;
+            font-size: 14px;
+          }
+          ha-card.type-weather-forecast .temp-attribute {
+            text-align: right;
+          }
+          ha-card.type-weather-forecast .temp {
+            text-align: right;
+            font-size: medium;
+            font-weight: bolder;
+            margin-right: 16px;
+          }
+          ha-card.type-weather-forecast .temp span {
+            text-align: right;
+            font-size: medium;
+            font-weight: bolder;
+          }
+          ha-card.type-weather-forecast .attribute {
+            text-align: right;
+            font-size: smaller;
+          }
+
+custom_card_paddy_welcome_with_news:
+  template:
+    - "ulm_language_variables"
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "markdown"
+        content: >
+          [[[
+            let time = states[variables.ulm_custom_card_paddy_welcome_time].state;
+            let welcome = '';
+
+            if (time > '18:00'){
+              welcome = variables.ulm_evening;
+            } else if (time > '12:00'){
+              welcome = variables.ulm_afternoon;
+            } else if (time > '05:00'){
+              welcome = variables.ulm_morning;
+            } else {
+              welcome = variables.ulm_hello;
+            }
+            return welcome + ',<br>' + user.name + '!';
+          ]]]
+        card_mod:
+        style: |
+          ha-card {
+            border-radius: 14px;
+            box-shadow: none;
+            font-size: 30px;
+            text-align: left;
+            cursor: default;
+          }
+    item2:
+      card:
+        type: "custom:home-feed-card"
+        card_id: "main_feed"
+        show_empty: false
+        more_info_on_tap: true
+        state_color: false
+        compact_mode: true
+        max_item_count: 3
+        show_icons: true
+        entities: >
+          [[[
+            return variables.ulm_custom_card_paddy_welcome_news_entities;
+          ]]]
+        card_mod:
+        style: |
+          ha-card {
+            border-radius: 14px;
+            box-shadow: none;
+            font-size: 14px;
+            text-align: left;
+          }
+
    
+
    
+
    Custom configuration Example
    
+
    Here is one example, on how you can extend this (actually every) card. In the end we have the welcome card extended by four buttons to have something like a header with a navigation.
    
+
    - type: horizontal-stack
+    cards:
+      - type: custom:button-card
+        template: edge
+      - type: custom:button-card
+        template: custom_card_paddy_welcome
+        # here we override the styles to extend the welcome card with a second item
+        styles:
+          grid:
+            - grid-template-areas: '"item1" "item2"'
+            - grid-template-rows: min-content min-content
+            - row-gap: 12px
+        custom_fields:
+        # here we set up the second item and its contents
+          item2:
+            card:
+              type: horizontal-stack
+              cards:
+                - type: custom:button-card
+                  template: edge
+                - type: custom:button-card
+                  template: vertical_buttons
+                  tap_action:
+                    action: navigate
+                    navigation_path: /ui-lovelace-minimalist/living
+                  icon: "mdi:sofa"
+                  name: Living
+                  label: Livingroom
+                - type: custom:button-card
+                  template: vertical_buttons
+                  tap_action:
+                    action: navigate
+                    navigation_path: /ui-lovelace-minimalist/working
+                  icon: "mdi:factory"
+                  name: Working
+                  label: Office
+                - type: custom:button-card
+                  template: vertical_buttons
+                  tap_action:
+                    action: navigate
+                    navigation_path: /ui-lovelace-minimalist/sleeping
+                  icon: "mdi:bed-king-outline"
+                  name: Sleeping
+                  label: Bedroom
+                - type: custom:button-card
+                  template: vertical_buttons
+                  tap_action:
+                    action: navigate
+                    navigation_path: /ui-lovelace-minimalist/climate
+                  icon: "mdi:air-conditioner"
+                  name: Air Conditioning
+                  label: Livingroom
+                - type: custom:button-card
+                  template: edge
+      - type: custom:button-card
+        template: edge
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_person_chip/index.html b/usage/custom_cards/custom_card_person_chip/index.html
new file mode 100644
index 000000000..4bf7adcca
--- /dev/null
+++ b/usage/custom_cards/custom_card_person_chip/index.html
@@ -0,0 +1,3836 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Person Chip Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Person Chip"
    
+
    This is a custom-card to display a person entity as a chip.
    
+
    image
    
+
    Credits
    
+
    Author: tmatheussen - 2022
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release.
+
    
+
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: custom_card_person_chip
+  variables:
+    ulm_custom_card_person_chip_entity: person.tom
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredDefaultExplanation
    ulm_custom_card_person_chip_entityperson.tomyesThe person to show
    
+
+
    Example
    
+
    - type: 'custom:button-card'
+  template: custom_card_person_chip
+  variables:
+    ulm_custom_card_person_chip_entity: person.tom
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_person_info/index.html b/usage/custom_cards/custom_card_person_info/index.html
new file mode 100644
index 000000000..8078b0d45
--- /dev/null
+++ b/usage/custom_cards/custom_card_person_info/index.html
@@ -0,0 +1,4067 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Person Info Card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+                  
    
+                
    
+              
    
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Person Info Card
    
+
+
+
+
    Description
    
+
    Person Info
+Person Info
    
+
    The custom_card_person_info is an extension of card_person. It can also show if the user is driving, a related battery level, and a related commute time.
    
+
    Credits
    
+
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_card_person_entityThe person entity
    ulm_card_person_use_entity_pictureIf you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false.
    ulm_card_person_zone1Set another zone (beside "home") to use for the card. You can set up two zones besides "home".
    ulm_card_person_zone2Set another zone (beside "home") to use for the card. You can set up two zones besides "home".
    ulm_addressShow an address as label, add an entity with a geo location
    ulm_multilinefalseShow battery and commute sensors below state
    ulm_card_person_driving_entitySet a binary sensor that depicts when this person is driving
    ulm_card_person_battery_entitySet a battery level sensor
    ulm_card_person_battery_state_entitySet a battery state sensor (eg the battery state sensor from the home assistant companion app will have the states "charging" or "discharging")
    ulm_card_person_commute_entitySet a travel time sensor
    ulm_card_person_cummute_icon"mdi:car"Set an icon for the commute sensor to use
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_person_info
+  variables:
+    ulm_card_person_entity: person.lee
+    ulm_card_person_use_entity_picture: true
+    ulm_card_person_zone1: zone.uw
+    ulm_card_person_zone2: zone.store
+    ulm_multiline: true
+    ulm_card_person_driving_entity: binary_sensor.lee_in_car
+    ulm_card_person_commute_entity: sensor.uw_commute
+    ulm_card_person_commute_icon: mdi:bus
+    ulm_card_person_battery_entity: sensor.lees_phone_battery_level
+    ulm_card_person_battery_state_entity: sensor.lees_phone_battery_state
+
    
+
    Template Code
    
+
    
+Template Code
+
    custom_card_person_info.yaml
    ---
+card_person_info:
+  template:
+    - "icon_info_bg"
+    - "ulm_translation_engine"
+  variables:
+    ulm_card_person_use_entity_picture: false
+    ulm_card_person_zone1: ""
+    ulm_card_person_zone2: ""
+    ulm_address: ""
+    ulm_address_locality: ""
+    ulm_card_person_driving_entity: ""
+    ulm_card_person_battery_entity: ""
+    ulm_card_person_battery_state_entity: ""
+    ulm_card_person_commute_entity: ""
+    ulm_card_person_cummute_icon: "mdi:car"
+    ulm_multiline: true
+  triggers_update: "all"
+  tap_action:
+    action: "more-info"
+    entity: "[[[ return variables.ulm_card_person_entity; ]]]"
+  show_label: true
+  show_name: true
+  label: >
+    [[[
+      if (variables.ulm_address){
+        return states[variables.ulm_address].state;
+      } else if (variables.ulm_address_locality){
+        return states[variables.ulm_address_locality].attributes.Locality;
+      }
+      else if (states[variables.ulm_card_person_driving_entity]?.state === "on") {
+        let state = states[variables.ulm_card_person_entity].state;
+        return `Driving - ${variables.ulm_translation_state}`;
+      } else {
+        let state = states[variables.ulm_card_person_entity].state;
+        return hass.resources[hass["language"]]["component.person.entity_component._.state." + state] ? hass.resources[hass["language"]]["component.person.entity_component._.state." + state] : state;
+      }
+    ]]]
+  name: "[[[ return states[variables.ulm_card_person_entity].attributes.friendly_name ]]]"
+  entity: "[[[ return variables.ulm_card_person_entity; ]]]"
+  icon: "mdi:face-man"
+  show_entity_picture: "[[[ return variables.ulm_card_person_use_entity_picture ]]]"
+  entity_picture:
+    "[[[ return variables.ulm_card_person_use_entity_picture != false ? states[variables.ulm_card_person_entity].attributes.entity_picture\
+    \ : null ]]]"
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            return variables.ulm_multiline
+              ? "'i n' 'i l' 'battery commute'"
+              : "'i n battery' 'i l commute'"
+          ]]]
+      - grid-template-columns: >
+          [[[
+            return variables.ulm_multiline
+              ? "min-content auto"
+              : "min-content auto min-content"
+          ]]]
+      - grid-template-rows: "min-content min-content"
+    icon:
+      - color: "rgba(var(--color-theme),0.9)"
+      - width: >
+          [[[
+            if (variables.ulm_card_person_use_entity_picture !== true){
+              return "20px";
+            } else {
+              return "42px";
+            }
+          ]]]
+      - place-self: >
+          [[[
+            if (variables.ulm_card_person_use_entity_picture !== true){
+              return "center";
+            } else {
+              return "stretch stretch";
+            }
+          ]]]
+    custom_fields:
+      notification:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "38px"
+        - top: "8px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: >
+            [[[
+              if (states[variables.ulm_card_person_driving_entity]?.state === "on") {
+                return "rgba(var(--color-red),1)";
+              } else if (states[variables.ulm_card_person_entity].state !== 'home') {
+                return "rgba(var(--color-green),1)";
+              } else {
+                return "rgba(var(--color-blue),1)";
+              }
+            ]]]
+      battery:
+        - align-self: "middle"
+        - justify-self: "start"
+        - display: "flex"
+        - align-items: "center"
+        - margin-top: >
+            [[[
+              return variables.ulm_multiline ? "6px" : "0";
+            ]]]
+        - font-size: "12px"
+      commute:
+        - align-self: "middle"
+        - justify-self: "end"
+        - display: "flex"
+        - align-items: "center"
+        - margin-top: "6px"
+        - font-size: "12px"
+
+  custom_fields:
+    notification: >
+      [[[
+        if (states[variables.ulm_card_person_driving_entity]?.state === "on") {
+          var icon = 'mdi:car'
+          return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        } else if (states[variables.ulm_card_person_entity].state !== 'home') {
+          if (states[variables.ulm_card_person_entity].state === states[variables.ulm_card_person_zone1]?.attributes?.friendly_name) {
+            var icon = states[variables.ulm_card_person_zone1].attributes.icon !== null ? states[variables.ulm_card_person_zone1].attributes.icon : 'mdi:help-circle'
+            return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+          } else if (states[variables.ulm_card_person_entity].state === states[variables.ulm_card_person_zone2]?.attributes?.friendly_name) {
+            var icon = states[variables.ulm_card_person_zone2].attributes.icon !== null ? states[variables.ulm_card_person_zone2].attributes.icon : 'mdi:help-circle'
+            return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+          } else {
+            return '<ha-icon icon="mdi:home-minus" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+          }
+        } else {
+          return '<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        }
+      ]]]
+    battery: >
+      [[[
+        if (states[variables.ulm_card_person_battery_entity]?.state) {
+          var battery = states[variables.ulm_card_person_battery_entity]?.state;
+          var charging = states[variables.ulm_card_person_battery_state_entity]?.state.toLowerCase() === "charging";
+          var iconBase = charging ? "mdi:battery-charging" : "mdi:battery"
+          var roundedBattery = Math.ceil(battery / 10) * 10;
+          var icon = roundedBattery === 100 ? iconBase : `${iconBase}-${roundedBattery}`;
+          var foo = "mdi:battery"
+          var color = "rgba(var(--color-green),1)";
+          if (battery <= 50) {
+            color = "rgba(var(--color-yellow),1)"
+          } else if (battery <= 25) {
+            color = "rgba(var(--color-red),1)"
+          }
+          return `
+            <ha-icon icon="${icon}" style="width: 16px; height: 16px; font-size: 14px; color: ${color}; margin: 0 2px 0 0"></ha-icon>
+            <span style="padding-top: 6px;">${battery}%</span>
+          `;
+        }
+      ]]]
+    commute: >
+      [[[
+        if (states[variables.ulm_card_person_commute_entity]?.state) {
+          var icon = variables.ulm_card_person_commute_icon || "mdi:car";
+          var commute = states[variables.ulm_card_person_commute_entity]?.state;
+          var color = "rgba(var(--color-green),1)";
+          if (commute >= 30) {
+            color = "rgba(var(--color-yellow),1)"
+          }
+          if (commute >= 60) {
+            color = "rgba(var(--color-red),1)"
+          }
+          return `
+            <ha-icon icon="${icon}" style="width: 16px; height: 16px; font-size: 14px; color: ${color}; margin: 0 2px 0 0"></ha-icon>
+            <span style="padding-top: 6px;">${commute} min</span>
+          `;
+        }
+      ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_playstation/index.html b/usage/custom_cards/custom_card_playstation/index.html
new file mode 100644
index 000000000..db556f38c
--- /dev/null
+++ b/usage/custom_cards/custom_card_playstation/index.html
@@ -0,0 +1,3800 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        PS4 Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    PS4 Custom-card
    
+
+
+
+
    Playstation
    
+
    
+
    NOTE
+This card is under review and is not ready to use!
    
+
    
+
    
+Usage
+
+#### Example
+
+
    - type: "custom:button-card"
+  template: card_ps4
+  entity: media_player.example
+
    
+
+#### Variables
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    
+
    
+
    
+
+
    
+Template Code
+
    custom_card_playstation.yaml
    ---
+card_ps4:
+  template:
+    - "icon_info_bg"
+    - "ulm_translation_engine"
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.2)"
+    img_cell:
+      - background-color: "rgba(var(--color-theme),0.05)"
+  state:
+    - value: "idle"
+      styles:
+        icon:
+          - color: "rgba(var(--color-blue),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-blue), 0.2)"
+    - value: "standby"
+      styles:
+        icon:
+          - color: "rgba(var(--color-theme),0.2)"
+        img_cell:
+          - background-color: "rgba(var(--color-theme),0.05)"
+    - operator: "template"
+      value: "[[[ return entity.state !='unknown' ]]]"
+      name: "[[[ return entity.attributes.media_title; ]]]"
+      label: "[[[ return entity.attributes.friendly_name; ]]]"
+      styles:
+        label:
+          - color: "white"
+          - filter: "opacity(100%)"
+        img_cell:
+          - background-color: "none"
+        icon:
+          - color: "white"
+        name:
+          - color: "white"
+        card:
+          - background-blend-mode: "multiply"
+          - background: >
+              [[[
+                var image = entity.attributes.entity_picture;
+                return 'center / cover url(' + image + ') rgba(0, 0, 0, 0.15)';
+              ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_qubino/index.html b/usage/custom_cards/custom_card_qubino/index.html
new file mode 100644
index 000000000..6af5be311
--- /dev/null
+++ b/usage/custom_cards/custom_card_qubino/index.html
@@ -0,0 +1,3956 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Qubino Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Qubino"
    
+
    
+
    NOTE
+This card is under review and is not ready to use!
    
+
    
+
    Credits
    
+
    Author: tben - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    
+
    
+
    Requirements
    
+
    This card needs the following to function correctly:
    
+
+
+
+
+
+
+
+
+
+
+
    Component / cardrequiredNote
    
+
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_qubino.yaml
    ---
+card_qubino:
+  icon: "mdi:memory"
+  tap_action:
+    action: "more-info"
+    entity: "input_select.ordres_fil_pilote"
+  label: >-
+    [[[ if (entity.state !='unavailable'){
+          var bri = Math.round(entity.attributes.brightness / 2.55);
+          var bri = (bri ? bri : '0')
+          var consigne = 'Inconnue';
+        if (bri >= 51){
+          var consigne = 'Confort';
+        } else if(bri < 51 && bri >= 41){
+          var consigne = 'Confort -1°C';
+        } else if(bri < 41 && bri >= 31){
+          var consigne = 'Confort -2°C️';
+        } else if(bri < 31 && bri >= 21){
+          var consigne = 'Eco️';
+        } else if(bri < 21 && bri >= 11){
+          var consigne = 'Hors Gel️';
+        } else if(bri < 11 && bri >= 0){
+          var consigne = 'Arrêt️';
+        }
+        return consigne + ' • ' + bri;
+      }else{
+        return "Indisponible";
+      }
+    ]]]
+  template:
+    - "blue"
+
    
+
    
+
    HomeAssistant
    
+
    ...
    
+
    Example
    
+
    ...
    
+
    
+
    
+
    Note
    
+
    ...
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_ristou_person/index.html b/usage/custom_cards/custom_card_ristou_person/index.html
new file mode 100644
index 000000000..ec2a8f38f
--- /dev/null
+++ b/usage/custom_cards/custom_card_ristou_person/index.html
@@ -0,0 +1,4527 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom Card Ristou Person - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom Card Ristou Person
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    LightDark
    lightdark
    
+
    Credits
    
+
      
+
    • Author: Ristou - 2022
      • 
+
    • Version: 1.0.0
      • 
+
    
+
    Changelog
    
+
    
+1.0.1
+
+- Fixed image path on documentation
+- Added new template on card ( `icon_more_info_new` & `ulm_actions_card` )
+
+
    
+
+
    
+1.0.0
+Initial release
+
    
+
+
    Description
    
+
    The custom_card_ristou_person shows if a person is home or not_home. If you have setup other zones, it will show these as well (e.g work, school, doctor, etc... ).
    
+
    Showing driving state is also possible with a binary sensor.
    
+
    In addition, this card can display a map (either static or using built in map) in a second row.
    
+
    Icon style
    
+
    As the main icon of this card you can choose the following set up
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariablesUI
    ulm_custom_card_ristou_use_badge: true 
     ulm_custom_card_ristou_use_entity_picture: false    		face_icon_badge
    ulm_custom_card_ristou_use_badge: true 
     ulm_custom_card_ristou_use_entity_picture: true    		picture_badge
    ulm_custom_card_ristou_use_badge: false 
     ulm_custom_card_ristou_use_entity_picture: false    		icon_only
    
+
    map style
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariablesUI
    ulm_custom_card_ristou_camera_entity_light != "" and 
     ulm_custom_card_ristou_camera_entity_dark != ""    		camera
    ulm_custom_card_ristou_map_enable: truemap
    ulm_custom_card_ristou_camera_entity_light = "" and 
    ulm_custom_card_ristou_camera_entity_dark = "" and 
    ulm_custom_card_ristou_map_enable = false    		no_map
    
+
    About Static maps
    
+
    The advantage of static map is that it is easy to custom and non-draggable.
+For instance when you scroll down and you accidentally press first on map card.
    
+
    I choose map box for the following reasons:
    
+
      
+
    • Easy to sep it up with static image API playground
      • 
+
    • Already existing styles (light & dark) to fit to your theme.
      • 
+
    • Add many custom markers, I decided to represent my current location , home, and work.
      • 
+
    • Possibility to remove attribution and logo.
      • 
+
    
+
    URL can be directly used inside a camera entity using dynamic markers as explain here
    
+
    below is an example of the url I use for mapbox:
    
+
    https://api.mapbox.com/styles/v1/mapbox/light-v10/static/pin-l-suitcase+f88927({{ state_attr('zone.work', 'longitude') }},{{ state_attr('zone.work', 'latitude') }}),pin-l-home+01C852({{ state_attr('zone.home', 'longitude') }},{{ state_attr('zone.home', 'latitude') }}),pin-l-m+3D5AFE({{ state_attr('device_tracker.mathieu_phone', 'longitude') }},{{ state_attr('device_tracker.mathieu_phone', 'latitude') }})/auto/466x200?attribution=false&logo=false&&access_token=YOUR_TOKEN
+
    
+
    Known issues
    
+
    map
    
+
    built in map is not always rendering properly. I observed 2 issues:
    
+
      
+
    • Not displaying if under sub stack like horizontal stack or vertical stack. another map has to be added somewhere else in the page. Github issue
      • 
+
    • In IOS (never tried with other devices) bottom corner radius is not taken into consideration
      • 
+
    
+
    Static map
    
+
    Static map can be blurry if ratio does not fit card width.
+In my case I used developer tool to find out exact width of the card (which is 466px) and then I adjusted the height to my needs.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity✔️person entity
    ulm_custom_card_ristou_use_entity_picturefalse❌If you set this to true, the card shows the entity picture from your user, otherwise (set to false) shows the icon. Default is false.
    ulm_custom_card_ristou_use_badgetrue❌Show a notification badge on the icon. if set to false and not sing entity picture, then icon will be dynamically displayed to (Home, Away, Known place, or CAR)
    ulm_custom_card_ristou_map_enablefalse❌Display built in map as a second row
    ulm_custom_card_ristou_map_aspect_ratio16:5❌Display built in map as a second row
    ulm_custom_card_ristou_map_hours_to_show24❌Display built in map as a second row
    ulm_custom_card_ristou_map_default_zoom9❌Display built in map as a second row
    ulm_custom_card_ristou_camera_entity_light❌Camera entity picture in light mode
    ulm_custom_card_ristou_camera_entity_dark❌Camera entity picture in dark mode
    ulm_custom_card_ristou_zones❌Used to display known zone on badge, icon, label or map
    ulm_custom_card_ristou_find_device_script❌Show a button to find your device
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_ristou_person
+  entity: person.mathieu
+  variables:
+    ulm_custom_card_ristou_use_entity_picture: true
+    ulm_custom_card_ristou_find_device_script: script.find_phone_mathieu
+    ulm_custom_card_ristou_person_driving_entity: binary_sensor.mathieu_driving
+    ulm_custom_card_ristou_camera_entity_light: "camera.mapbox_mathieu_light"
+    ulm_custom_card_ristou_camera_entity_dark: "camera.mapbox_mathieu_dark"
+    ulm_custom_card_ristou_zones:
+      - person.isabelle
+      - person.mathieu
+      - zone.work
+      - zone.judo
+      - zone.doctor
+      - zone.nounou
+      - zone.work_isabelle
+
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_ristou_person.yaml
    ---
+### custom card ristou person ###
+custom_card_ristou_person:
+  template:
+    - "ulm_translation_engine"
+    - "ulm_custom_card_ristou_person_language_variables"
+    - "icon_more_info_new"
+    - "ulm_actions_card"
+  variables:
+    ulm_custom_card_ristou_name: "[[[ return entity.attributes.friendly_name ]]]"
+    ulm_custom_card_ristou_icon: "[[[ return entity.attributes.icon ]]]"
+    ulm_custom_card_ristou_use_entity_picture: false
+    ulm_custom_card_ristou_use_badge: true
+    ulm_custom_card_ristou_map_enable: false
+    ulm_custom_card_ristou_find_device_script: ""
+    ulm_custom_card_ristou_zones:
+    ulm_custom_card_ristou_person_driving_entity: ""
+    ulm_custom_card_ristou_map_aspect_ratio: "466:200"
+    ulm_custom_card_ristou_map_hours_to_show: 0
+    ulm_custom_card_ristou_map_default_zoom: 11
+    ulm_custom_card_ristou_camera_entity_light: ""
+    ulm_custom_card_ristou_camera_entity_dark: ""
+  show_icon: false
+  show_name: false
+  show_label: false
+  triggers_update: "all"
+  styles:
+    grid:
+      - grid-template-areas: >
+          [[[
+            if (variables.ulm_custom_card_ristou_map_enable) {
+                return "\"item1\" \"item3\"";
+            } else if (
+              variables.ulm_custom_card_ristou_camera_entity_light !== ""
+              && variables.ulm_custom_card_ristou_camera_entity_dark !== ""
+            ) {
+                return "\"item1\" \"item2\"";
+            } else {
+              return "\"item1\""
+            }
+          ]]]
+      - grid-template-columns: >
+          [[[
+
+            return "1fr";
+          ]]]
+      - grid-template-rows: >
+          [[[
+            return "1fr";
+          ]]]
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "0px"
+    custom_fields:
+      item2:
+        - display: >
+            [[[
+              if (
+                variables.ulm_custom_card_ristou_camera_entity_light !== ""
+                && variables.ulm_custom_card_ristou_camera_entity_dark !== ""
+                && !variables.ulm_custom_card_ristou_map_enable
+              ) {
+                  return "block";
+              } else {
+                  return "none";
+              }
+            ]]]
+      item3:
+        - display: >
+            [[[
+              if (variables.ulm_custom_card_ristou_map_enable) {
+                  return "block";
+              } else {
+                  return "none";
+              }
+            ]]]
+  custom_fields:
+    item1:
+      ###############
+      ### 1ST ROW ###
+      ###############
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_more_info"
+        styles:
+          grid:
+            - grid-template-areas: "'item1 item2 item3'"
+            - grid-template-columns: "min-content 1fr auto"
+            - grid-template-rows: "min-content"
+          custom_fields:
+            item3:
+              - display: >
+                  [[[
+                        if (variables.ulm_custom_card_ristou_find_device_script !== "") {
+                            return "block";
+                        } else {
+                            return "none";
+                        }
+                  ]]]
+        custom_fields:
+          ###################
+          ### PERSON ICON ###
+          ###################
+          item1:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              icon: >
+                [[[
+                  if (!variables.ulm_custom_card_ristou_use_badge) {
+                    var zones = variables.ulm_custom_card_ristou_zones;
+                    var person_location = entity.state;
+                    var driving_state = "off"
+                    if (variables.ulm_custom_card_ristou_person_driving_entity !== "") {
+                      driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;
+                    }
+                    if (driving_state === "on" || driving_state === "true") {
+                      return "mdi:car";
+                    } else {
+                      if (person_location !== 'home'){
+                          for (const item of zones){
+                            if (person_location == states[item]?.attributes?.friendly_name){
+                              var icon = (states[item].attributes.icon !== null) ? states[item].attributes.icon : 'mdi:help-circle';
+                              return icon ;
+                            } else if (person_location == 'not_home'){
+                              return "mdi:home-minus";
+                            }
+                          }
+                      } else{
+                        return "mdi:home-variant";
+                      }
+                    }
+                  } else {
+                    return  "mdi:face-man";
+                  }
+                ]]]
+              show_entity_picture: "[[[ return variables.ulm_custom_card_ristou_use_entity_picture ]]]"
+              entity_picture:
+                "[[[ return variables.ulm_custom_card_ristou_use_entity_picture != false ? states[entity.entity_id].attributes.entity_picture\
+                \ : null ]]]"
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                        if (!variables.ulm_custom_card_ristou_use_badge) {
+                          var zones = variables.ulm_custom_card_ristou_zones;
+                          var person_location = entity.state;
+                          var driving_state = "off"
+                          if (variables.ulm_custom_card_ristou_person_driving_entity !== "") {
+                            driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;
+                          }
+
+                          if (driving_state === "on" || driving_state === "true") {
+                            return 'rgba(var(--color-red),0.9)';
+                          } else {
+                            if (person_location !== 'home'){
+                              for (const item of zones){
+                                if (person_location == states[item]?.attributes?.friendly_name){
+                                  return 'rgba(var(--color-yellow),0.9)';
+                                } else if (person_location == 'not_home'){
+                                  return 'rgba(var(--color-blue),0.9)';
+                                }
+                              }
+                            } else{
+                              return 'rgba(var(--color-green),0.9)';
+                            }
+                          }
+                        } else {
+                          return "rgba(var(--color-theme),0.9)";
+                        }
+                      ]]]
+                  - width: >
+                      [[[
+                        if (variables.ulm_custom_card_ristou_use_entity_picture !== true){
+                          return "20px";
+                        } else {
+                          return "42px";
+                        }
+                      ]]]
+                  - place-self: >
+                      [[[
+                        if (variables.ulm_custom_card_ristou_use_entity_picture !== true){
+                          return "center";
+                        } else {
+                          return "stretch stretch";
+                        }
+                      ]]]
+                img_cell:
+                  - background-color: >
+                      [[[
+                        if (!variables.ulm_custom_card_ristou_use_badge) {
+                          var zones = variables.ulm_custom_card_ristou_zones;
+                          var person_location = entity.state;
+                          var driving_state = "off"
+                          if (variables.ulm_custom_card_ristou_person_driving_entity !== "") {
+                            driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;
+                          }
+                          if (driving_state === "on" || driving_state === "true") {
+                            return 'rgba(var(--color-red),0.2)';
+                          } else {
+                            if (person_location !== 'home'){
+                              for (const item of zones){
+                                if (person_location == states[item]?.attributes?.friendly_name){
+                                  return 'rgba(var(--color-yellow),0.2)';
+                                } else if (person_location == 'not_home'){
+                                  return 'rgba(var(--color-blue),0.2)';
+                                }
+                              }
+                            } else {
+                              return 'rgba(var(--color-green),0.2)';
+                            }
+                          }
+                        } else {
+                          return 'rgba(var(--color-theme),0.05)';
+                        }
+                      ]]]
+                card:
+                  - box-shadow: "none"
+                  - border-radius: "var(--border-radius) var(--border-radius) 0px 0px"
+                  - padding: "12px 0px 12px 12px"
+                custom_fields:
+                  notification:
+                    - border-radius: "50%"
+                    - position: "absolute"
+                    - left: "38px"
+                    - top: "8px"
+                    - height: "16px"
+                    - width: "16px"
+                    - border: "2px solid var(--card-background-color)"
+                    - font-size: "12px"
+                    - line-height: "14px"
+                    - background-color: >
+                        [[[
+                          var zones = variables.ulm_custom_card_ristou_zones;
+                          var person_location = entity.state;
+                          var driving_state = "off"
+                          if (variables.ulm_custom_card_ristou_person_driving_entity !== "") {
+                            driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;
+                          }
+                          if (driving_state === "on" || driving_state === "true") {
+                            return "rgba(var(--color-red),1)";
+                          } else {
+                            if (person_location !== 'home'){
+                              for (const item of zones){
+                                if (person_location == states[item]?.attributes?.friendly_name){
+                                  return "rgba(var(--color-yellow),1)";
+                                } else if (person_location == 'not_home'){
+                                  return "rgba(var(--color-blue),1)";
+                                }
+                              }
+                            } else{
+                              return "rgba(var(--color-green),1)";
+                            }
+                          }
+                        ]]]
+                    - display: >
+                        [[[
+                              if (variables.ulm_custom_card_ristou_use_badge) {
+                                  return "block";
+                              } else {
+                                  return "none";
+                              }
+                        ]]]
+              custom_fields:
+                notification: >
+                  [[[
+                    var zones = variables.ulm_custom_card_ristou_zones;
+                    var person_location = entity.state;
+                    var driving_state = "off"
+                    var icon = "mdi:help-circle"
+                    if (variables.ulm_custom_card_ristou_person_driving_entity !== "") {
+                      driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;
+                    }
+                    if (driving_state === "on" || driving_state === "true") {
+                      icon = 'mdi:car';
+                    } else {
+                      if (person_location !== 'home'){
+                        for (const item of zones){
+                          if (person_location == states[item]?.attributes?.friendly_name){
+                            icon = (states[item].attributes.icon !== null) ? states[item].attributes.icon : 'mdi:help-circle';
+                          } else if (person_location == 'not_home'){
+                            icon = 'mdi:home-minus';
+                          }
+                        }
+                      } else{
+                        icon = 'mdi:home-variant';
+                      }
+                    }
+                    return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+                  ]]]
+          #####################
+          ### LABEL + STATE ###
+          #####################
+          item2:
+            card:
+              type: "custom:button-card"
+              entity: "[[[ return entity.entity_id ]]]"
+              name: "[[[ return variables.ulm_custom_card_ristou_name ]]]"
+              label: >-
+                [[[
+                  var location = entity.state
+                  var driving_state = "off"
+                  if (variables.ulm_custom_card_ristou_person_driving_entity !== "") {
+                    driving_state = states[variables.ulm_custom_card_ristou_person_driving_entity].state;
+                  }
+                  if (driving_state === "on" || driving_state === "true") {
+                    return variables.ulm_custom_card_ristou_person_driving;
+                  } else {
+                    let state = location;
+                    let option = ["home", "not_home", "unavailable", "unknown"]
+                    return (option.includes(state)) ? variables.ulm_translation_state : state
+                  }
+                ]]]
+          #####################
+          ### FIND MY PHONE ###
+          #####################
+          item3:
+            card:
+              template:
+                - "icon_info_bg"
+                - "blue"
+              show_name: false
+              show_label: false
+              type: "custom:button-card"
+              entity: "[[[ return variables.ulm_custom_card_ristou_find_device_script ]]]"
+              icon: "[[[ return variables.ulm_custom_card_ristou_icon ]]]"
+              tap_action:
+                action: "toggle"
+              styles:
+                card:
+                  - box-shadow: "none"
+                  - border-radius: "var(--border-radius)"
+                  - padding: "12px"
+    ###############
+    ### 2ND ROW ###
+    ###############
+    item2:
+      ##################
+      ### STATIC MAP ###
+      ##################
+      card:
+        type: "picture-entity"
+        show_state: false
+        show_name: false
+        camera_view: "auto"
+        entity: >-
+          [[[
+              if (hass.themes.darkMode) {
+                return variables.ulm_custom_card_ristou_camera_entity_dark;
+              } else {
+                return variables.ulm_custom_card_ristou_camera_entity_light;
+              }
+          ]]]
+        style:
+          .: |
+            ha-card {
+              box-shadow: none;
+              border-radius: 0px 0px var(--border-radius) var(--border-radius);
+            }
+    item3:
+      ###################
+      ### BUILTIN MAP ###
+      ###################
+      card:
+        type: "map"
+        default_zoom: "[[[ return variables.ulm_custom_card_ristou_map_default_zoom ]]]"
+        aspect_ratio: "[[[ return variables.ulm_custom_card_ristou_map_aspect_ratio ]]]"
+        hours_to_show: "[[[ return variables.ulm_custom_card_ristou_map_hours_to_show ]]]"
+        entities: "[[[ return variables.ulm_custom_card_ristou_zones ]]]"
+        style:
+          ha-map$: |
+            .leaflet-control-attribution {
+              visibility: hidden;
+            }
+            .leaflet-control-zoom {
+              visibility: hidden;
+            }
+          .: |
+            ha-card {
+              box-shadow: none;
+              border-radius: 0px 0px var(--border-radius) var(--border-radius);
+            }
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_saxel_fan/index.html b/usage/custom_cards/custom_card_saxel_fan/index.html
new file mode 100644
index 000000000..a9c88d9d6
--- /dev/null
+++ b/usage/custom_cards/custom_card_saxel_fan/index.html
@@ -0,0 +1,4006 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Fan Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Fan"
    
+
    This is a custom card to control a fan. It allows you to turn on/off the fan, adjusting the fan speed with a slider, and turn on/off oscillation. Two styles are available:
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    TemplateDescription
    custom_card_saxel_fanFollows the standard theme of UI-Lovelace-Minimalist
    custom_card_saxel_fan_blueCard is theme based when the fan is OFF, Blue when the fan is ON
    
+
    Light theme
    
+
    Light theme
    
+
    Dark theme
    
+
    Dark theme
    
+
    Credits
    
+
    Author: saxel - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+  1.0.0
+  Initial release
+
    
+
+
    Requirements
    
+
    This card needs the following to function correctly:
    
+
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+  
+    
+    
+    
+  
+
    Component / cardRequiredNote
    My Cardsyes
    Card Modyes
    
+
+
    Usage
    
+
    Standard
    
+
    - type: custom:button-card
+  template: custom_card_saxel_fan_blue
+  entity: fan.smart_fan
+  name: Fan
+  variables:
+    collapsible: false
+    oscillate_attribute: oscillate
+
    
+
    Blue
    
+
    - type: custom:button-card
+  template: custom_card_saxel_fan
+  entity: fan.smart_fan
+  name: Fan
+  variables:
+    collapsible: true
+    oscillate_attribute: oscillate
+
    
+
    Variables
    
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
    VariableExampleRequiredExplanation
    entityfan.smart_fanyesFan entity
    nameFannoName to show. If not specified the attribute friendly_name is shown instead
    collapsibletruenotrue/false if the fan speed row should collapse when the fan is turned off. Default: true
    ulm_card_fan_horizontaltruenoSingle Line Horizontal Control. Collapsible MUST be false for this currently. Default: false
    ulm_show_buttonfalsenoSet to false to remove the Button and have a full width Slider. Default: true
    ulm_button_iconmdi:buttonnoSet the icon for the Button. Default: mdi:rotate-3d-variant
    ulm_button_servicefan.togglenoName of the Service Call on button press. Default: fan.oscillate
    oscillate_attributeoscillatenoName of the oscillate attribute of the fan entity. Default: oscillate
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_scenes/index.html b/usage/custom_cards/custom_card_scenes/index.html
new file mode 100644
index 000000000..6e493e477
--- /dev/null
+++ b/usage/custom_cards/custom_card_scenes/index.html
@@ -0,0 +1,4237 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Scenes Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Scenes Card"
    
+
    The card_scenes you can control up to 5 entity such as scene, script or automation.
    
+
    Scenes Card
    
+
    Credits
    
+
    Author: sildehoop - 2021
+Version: 1.2.0
    
+
    Breaking changes
    
+
+
    
+   1.2.0
+
+
    #OLD
+- type: "custom:button-card"
+ template:
+   - card_scenes
+ variables:
+   entity_1: "scene.YOUR_SCENE"
+   entity_2: "scene.YOUR_SCENE"
+   entity_3: "scene.YOUR_SCENE"
+   entity_4: "scene.YOUR_SCENE"
+   entity_5: "scene.YOUR_SCENE"
+   name_1: "YOUR_NAME"
+   name_2: "YOUR_NAME"
+   name_3: "YOUR_NAME"
+   name_4: "YOUR_NAME"
+   name_5: "YOUR_NAME"
+   icon_1: "mdi:YOUR_ICON"
+   icon_2: "mdi:YOUR_ICON"
+   icon_3: "mdi:YOUR_ICON"
+   icon_4: "mdi:YOUR_ICON"
+   icon_5: "mdi:YOUR_ICON"
+   icon_color_1: "yellow"
+   icon_color_2: "blue"
+   icon_color_3: "purple"
+   icon_color_4: "green"
+   icon_color_5: "red"
+   bg_color_1: "yellow"
+   bg_color_2: "blue"
+   bg_color_3: "purple"
+   bg_color_4: "green"
+   bg_color_5: "red"
+
    
+
+
    #NEW
+- type: "custom:button-card"
+ template:
+   - card_scenes
+ variables:
+   entity_1:
+     entity_id: "scene.YOUR_SCENE"
+     icon: "mdi:YOUR_ICON"
+     icon_color: "yellow"
+     name: "YOUR_NAME"
+     bg_color: "yellow"
+   entity_2:
+     entity_id: "scene.YOUR_SCENE"
+     icon: "mdi:YOUR_ICON"
+     icon_color: "blue"
+     name: "YOUR_NAME"
+     bg_color: "blue"
+   entity_3:
+     entity_id: "scene.YOUR_SCENE"
+     icon: "mdi:YOUR_ICON"
+     icon_color: "purple"
+     name: "YOUR_NAME"
+     bg_color: "purple"
+   entity_4:
+     entity_id: "scene.YOUR_SCENE"
+     icon: "mdi:YOUR_ICON"
+     icon_color: "green"
+     name: "YOUR_NAME"
+     bg_color: "green"
+   entity_5:
+     entity_id: "scene.YOUR_SCENE"
+     icon: "mdi:YOUR_ICON"
+     icon_color: "red"
+     name: "YOUR_NAME"
+     bg_color: "red"
+
    
+
+ 
    
+
+
    Changelog
    
+
    
+1.3.0
+Option to trigger automation
+
    
+
    
+1.2.0
+Implementation of nested variables
+
    
+
    
+1.1.0
+Auto dark mode box shadow
+
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template:
+    - card_scenes
+  variables:
+    entity_1:
+      entity_id: "scene.YOUR_SCENE"
+      icon: "mdi:YOUR_ICON"
+      icon_color: "yellow"
+      name: "YOUR_NAME"
+      bg_color: "yellow"
+    entity_2:
+      entity_id: "scene.YOUR_SCENE"
+      icon: "mdi:YOUR_ICON"
+      icon_color: "blue"
+      name: "YOUR_NAME"
+      bg_color: "blue"
+    entity_3:
+      entity_id: "scene.YOUR_SCENE"
+      icon: "mdi:YOUR_ICON"
+      icon_color: "purple"
+      name: "YOUR_NAME"
+      bg_color: "purple"
+    entity_4:
+      entity_id: "scene.YOUR_SCENE"
+      icon: "mdi:YOUR_ICON"
+      icon_color: "green"
+      name: "YOUR_NAME"
+      bg_color: "green"
+    entity_5:
+      entity_id: "scene.YOUR_SCENE"
+      icon: "mdi:YOUR_ICON"
+      icon_color: "red"
+      name: "YOUR_NAME"
+      bg_color: "red"
+
    
+
    Requirements
    
+
    n/a
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    entity_scene.evening_lightyesYour scene entity
    name_NightyesThe name to show
    icon_mdi:weather-nightyesThe icon to show
    color_icon_yellow, blue, purple, green, rednoThe color of the icon to show
    color_bg_yellow, blue, purple, green, rednoThe color of the icon background to show
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_scenes.yaml
    ---
+card_scenes:
+  show_icon: false
+  show_name: false
+  show_label: false
+  variables:
+    entity_1:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+    entity_2:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+    entity_3:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+    entity_4:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+    entity_5:
+      entity_id:
+      icon: "mdi:help-circle-outline"
+      icon_color: "gray"
+      name: "n/a"
+      bg_color: "gray"
+  styles:
+    grid:
+      - grid-template-areas: "'item1 item2 item3 item4 item5'"
+      - grid-template-columns: "1fr 1fr 1fr 1fr 1fr"
+      - grid-template-rows: "min-content"
+      - justify-items: "center"
+      - column-gap: "auto"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_1.entity_id ]]]"
+        icon: "[[[ return variables.entity_1.icon ]]]"
+        name: "[[[ return variables.entity_1.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_1.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_1.bg_color ]]]"
+        tap_action:
+          action: "perform-action"
+          perform_action: |
+            [[[
+              let domain = variables.entity_1.entity_id.substr(0, variables.entity_1.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          target:
+            entity_id: "[[[ return variables.entity_1.entity_id ]]]"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_2.entity_id ]]]"
+        icon: "[[[ return variables.entity_2.icon ]]]"
+        name: "[[[ return variables.entity_2.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_2.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_2.bg_color ]]]"
+        tap_action:
+          action: "perform-action"
+          perform_action: |
+            [[[
+              let domain = variables.entity_2.entity_id.substr(0, variables.entity_2.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          target:
+            entity_id: "[[[ return variables.entity_2.entity_id ]]]"
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_3.entity_id ]]]"
+        icon: "[[[ return variables.entity_3.icon ]]]"
+        name: "[[[ return variables.entity_3.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_3.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_3.bg_color ]]]"
+        tap_action:
+          action: "perform-action"
+          perform_action: |
+            [[[
+              let domain = variables.entity_3.entity_id.substr(0, variables.entity_3.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          target:
+            entity_id: "[[[ return variables.entity_3.entity_id ]]]"
+    item4:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_4.entity_id ]]]"
+        icon: "[[[ return variables.entity_4.icon ]]]"
+        name: "[[[ return variables.entity_4.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_4.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_4.bg_color ]]]"
+        tap_action:
+          action: "perform-action"
+          perform_action: |
+            [[[
+              let domain = variables.entity_4.entity_id.substr(0, variables.entity_4.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          target:
+            entity_id: "[[[ return variables.entity_4.entity_id ]]]"
+    item5:
+      card:
+        type: "custom:button-card"
+        template: "card_scenes_pill"
+        entity: "[[[ return variables.entity_5.entity_id ]]]"
+        icon: "[[[ return variables.entity_5.icon ]]]"
+        name: "[[[ return variables.entity_5.name ]]]"
+        variables:
+          color_icon: "[[[ return variables.entity_5.icon_color ]]]"
+          color_bg: "[[[ return variables.entity_5.bg_color ]]]"
+        tap_action:
+          action: "perform-action"
+          perform_action: |
+            [[[
+              let domain = variables.entity_5.entity_id.substr(0, variables.entity_5.entity_id.indexOf("."));
+              if (domain == "automation") {
+                return "automation.trigger"
+              } else {
+                return "homeassistant.turn_on"
+              }
+            ]]]
+          target:
+            entity_id: "[[[ return variables.entity_5.entity_id ]]]"
+
+card_scenes_pill:
+  show_icon: true
+  show_label: false
+  show_name: true
+  variables:
+    color_icon: "gray"
+    color_bg: "gray"
+  styles:
+    grid:
+      - grid-template-areas: "'i' 'n'"
+      - grid-template-columns: "min-content"
+      - grid-template-rows: "1fr 1fr"
+      - row-gap: "12px"
+      - justify-items: "center"
+      - column-gap: "auto"
+    card:
+      - box-shadow: "none"
+      - padding: "5px"
+      - box-shadow: >
+          [[[
+            if (hass.themes.darkMode){
+              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
+            } else {
+              return "var(--box-shadow)";
+            }
+          ]]]
+      - border-radius: "50px"
+      - place-self: "center"
+      - width: "52px"
+      - height: "84px"
+    icon:
+      - color: >
+          [[[
+            var color = [variables.color_icon];
+            if (color == "gray"){
+              var color = "rgba(var(--color-theme),0.20)";
+            } else if(color == "yellow"){
+              var color = "rgba(var(--color-yellow),1)";
+            } else if(color == "blue"){
+              var color = "rgba(var(--color-blue),1)";
+            } else if(color == "purple"){
+              var color = "rgba(var(--color-purple),1)";
+            } else if(color == "green"){
+              var color = "rgba(var(--color-green),1)";
+            } else if(color == "red"){
+              var color = "rgba(var(--color-red),1)";
+            }
+            return color;
+          ]]]
+    img_cell:
+      - background-color: >
+          [[[
+            var color = [variables.color_bg];
+            if (color == "gray"){
+              var color = "rgba(var(--color-theme),0.05)";
+            } else if(color == "yellow"){
+              var color = "rgba(var(--color-yellow),0.20)";
+            } else if(color == "blue"){
+              var color = "rgba(var(--color-blue),0.20)";
+            } else if(color == "purple"){
+              var color = "rgba(var(--color-purple),0.20)";
+            } else if(color == "green"){
+              var color = "rgba(var(--color-green),0.20)";
+            } else if(color == "red"){
+              var color = "rgba(var(--color-red),0.20)";
+            }
+            return color;
+          ]]]
+      - border-radius: "50%"
+      - width: "42px"
+      - height: "42px"
+    name:
+      - font-weight: "bold"
+      - font-size: "9.5px"
+      - width: "33px"
+      - padding-bottom: "7px"
+    state:
+      - color: "rgba(var(--color-theme),0.9)"
+  color: "var(--google-grey)"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_schumijo_car/index.html b/usage/custom_cards/custom_card_schumijo_car/index.html
new file mode 100644
index 000000000..cba9169a0
--- /dev/null
+++ b/usage/custom_cards/custom_card_schumijo_car/index.html
@@ -0,0 +1,4123 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Car Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Car"
    
+
    This is a custom-card to information about your car.
    
+
    Generic
    
+
    NB : This card has only been tested with Audi Connect integration but should work with some others.
    
+
    Credits
    
+
    Author: schumijo - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_card_schumijo_car
+  variables:
+    ulm_card_schumijo_car_name: "Audi Q3"
+    ulm_card_schumijo_car_tracker: device_tracker.audi_q3_position
+    ulm_card_schumijo_car_lock: lock.audi_q3_door_lock
+    ulm_card_schumijo_car_energy_level: sensor.audi_q3_tank_level
+    ulm_card_schumijo_car_range: sensor.audi_q3_range
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_card_schumijo_car_nameAudi Q3yesThe name of your car
    ulm_card_schumijo_car_trackerdevice_tracker.audi_q3_positionyesA device_tracker entity of your car
    ulm_card_schumijo_car_locklock.audi_q3_door_lockyesA lock entity of your car
    ulm_card_schumijo_car_energy_levelsensor.audi_q3_tank_levelyesA sensor entity that represents energy level of your car (can be fuel or electric)
    ulm_card_schumijo_car_rangesensor.audi_q3_rangeyesA sensor entity that represents range of your car
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_schumijo_car.yaml
    ---
+widget_icon_state:
+  tap_action:
+    action: "none"
+  layout: "icon_state"
+  show_state: true
+  show_units: false
+  styles:
+    grid:
+      - grid-template-areas: "'i s' 'n n'"
+      - grid-template-columns: "45% 55%"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - background-color: "rgba(var(--color-theme),0.05)"
+      - border-radius: "14px"
+      - place-self: "center"
+      - height: "42px"
+    name:
+      - font-weight: "bold"
+      - font-size: "10px"
+      - filter: "opacity(40%)"
+      - margin-bottom: "2px"
+    state:
+      - justify-self: "start"
+      - margin-left: "5px"
+      - font-size: "18px"
+      - font-weight: 600
+    icon:
+      - color: "rgba(var(--color-theme),0.9)"
+    img_cell:
+      - justify-content: "right"
+  size: "20px"
+  color: "var(--google-grey)"
+
+car:
+  template:
+    - "icon_info"
+  tap_action:
+    action: "more-info"
+  show_name: true
+  show_last_changed: true
+  name: "[[[ return variables.ulm_card_schumijo_car_name ]]]"
+  entity: "[[[ return entity.entity_id ]]]"
+  icon: "mdi:car"
+  styles:
+    icon:
+      - color: "rgba(var(--color-theme),0.9)"
+      - width: "20px"
+      - place-self: "center"
+    custom_fields:
+      tracker:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "30px"
+        - top: "-2px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: >
+            [[[
+              if (states[variables.ulm_card_schumijo_car_tracker].state != 'home'){
+                return "rgba(var(--color-green),1)";
+              } else {
+                return "rgba(var(--color-blue),1)";
+              }
+            ]]]
+      lock:
+        - border-radius: "50%"
+        - position: "absolute"
+        - left: "30px"
+        - top: "24px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: >
+            [[[
+              if (states[variables.ulm_card_schumijo_car_lock].state != 'locked'){
+                return "rgba(var(--color-red),1)";
+              } else {
+                return "rgba(var(--color-blue),1)";
+              }
+            ]]]
+  custom_fields:
+    tracker: >
+      [[[
+        if (states[variables.ulm_card_schumijo_car_tracker].state != 'home'){
+          return '<ha-icon icon="mdi:road-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        } else {
+          return '<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        }
+      ]]]
+    lock: >
+      [[[
+        if (states[variables.ulm_card_schumijo_car_lock].state != 'locked'){
+          return '<ha-icon icon="mdi:lock-open" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        } else {
+          return '<ha-icon icon="mdi:lock" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
+        }
+      ]]]
+
+ulm_custom_card_schumijo_ca_popup:
+  tap_action:
+    action: "fire-dom-event"
+    browser_mod:
+      service: "browser_mod.popup"
+      data:
+        size: >
+          [[[
+            const mediaQuery = window.matchMedia('(max-width: 800px)')
+            if (mediaQuery.matches) {
+              return 'fullscreen'
+            }
+          ]]]
+        title: "Map"
+        style:
+          $: >
+            [[[
+              if (hass.themes.theme.includes("desktop")){
+                var dialog = `
+                  .mdc-dialog__surface{
+                    border-radius: var(--border-radius) !important;
+                  }
+                `;
+              } else{
+                var dialog = "";
+              }
+              return `
+                *{
+                  --secondary-background-color: none !important;
+                }
+                ${dialog}
+              `;
+            ]]]
+          hui-vertical-stack-card:
+            $: >
+              button-card {
+                align-self: center;
+                padding: 0.2em 0 2.3em 0;
+              }
+              hui-entities-card{
+                padding: 0.8em 1.4em;
+              }
+            $hui-entities-card$: >
+              ha-card{
+                box-shadow: none;
+              }
+            $hui-history-graph-card$: >
+              .content {
+                padding: 0 2.4em !important;
+              }
+              ha-card{
+                box-shadow: none;
+              }
+            $hui-glance-card$: >
+              ha-card{
+                box-shadow: none;
+              }
+            $hui-map-card:
+              $: >
+                ha-icon-button {
+                  color: rgba(var(--color-blue),1);
+                }
+              $ha-map:
+                $: >
+                  .leaflet-control-attribution {
+                    display: none;
+                  }
+                  .leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
+                    border: 2px solid rgba(var(--color-blue),0.4) !important;
+                  }
+                  .leaflet-bar a {
+                    background-color: rgba(var(--color-blue),0.2) !important;
+                    color: rgba(var(--color-blue),1) !important;
+                  }
+                  .leaflet-bar a:first-child {
+                    border-bottom: 2px solid rgba(var(--color-blue),0.4) !important;
+                  }
+                  .leaflet-pane.leaflet-tile-pane {
+                    filter: contrast(95%);
+                  }
+        content:
+          type: "map"
+          aspect_ratio: "12:10"
+          default_zoom: 16
+          entities: "[[[ return [variables.ulm_card_schumijo_car_tracker]; ]]]"
+
+custom_card_schumijo_car:
+  template:
+    - "ulm_custom_card_schumijo_car_language_variables"
+  variables:
+    ulm_card_schumijo_car_name: "n/a"
+  show_icon: false
+  show_name: false
+  show_label: false
+  styles:
+    grid:
+      - grid-template-areas: "'item1' 'item2'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "car"
+          - "ulm_custom_card_schumijo_ca_popup"
+        entity: "[[[ return variables.ulm_card_schumijo_car_tracker ]]]"
+        variables:
+          ulm_card_schumijo_car_tracker: "[[[ return variables.ulm_card_schumijo_car_tracker ]]]"
+          ulm_card_schumijo_car_name: "[[[ return variables.ulm_card_schumijo_car_name ]]]"
+          ulm_card_schumijo_car_lock: "[[[ return variables.ulm_card_schumijo_car_lock ]]]"
+    item2:
+      card:
+        template: "list_2_items"
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon_state"
+              entity: "[[[ return variables.ulm_card_schumijo_car_energy_level ]]]"
+              state_display: >
+                [[[
+                  return parseFloat(states[variables.ulm_card_schumijo_car_energy_level].state).toFixed(0);
+                ]]]
+              name:
+                "[[[ return states[variables.ulm_card_schumijo_car_energy_level].attributes.unit_of_measurement + ' ' + variables.ulm_custom_card_schumijo_car_energy_level\
+                \ ]]]"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon_state"
+              entity: "[[[ return variables.ulm_card_schumijo_car_range ]]]"
+              state_display: >
+                [[[
+                  return parseFloat(states[variables.ulm_card_schumijo_car_range].state).toFixed(0);
+                ]]]
+              name:
+                "[[[ return states[variables.ulm_card_schumijo_car_range].attributes.unit_of_measurement + ' ' + variables.ulm_custom_card_schumijo_car_range\
+                \ ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_schumijo_flower/index.html b/usage/custom_cards/custom_card_schumijo_flower/index.html
new file mode 100644
index 000000000..31e2533fb
--- /dev/null
+++ b/usage/custom_cards/custom_card_schumijo_flower/index.html
@@ -0,0 +1,4016 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Flower Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Flower"
    
+
    This is a custom-card to display a plant entity. Shows state of the plant and attributes.
    
+
    Generic
    
+
    Credits
    
+
      
+
    • Author: schumijo - 2021
      • 
+
    • Update 2.0.0 : Ashino - 2024
      • 
+
    • Version: 2.0.0
      • 
+
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
    
+1.1.0
+Fix language files for beta5
+Updated README
+
    
+
    
+2.0.0
+Add support to lovelace-flower-card from Olen (advanced forked version)
+Updated README
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: card_flower
+  variables:
+    ulm_card_flower_entity: plant.bonsai_ficus
+    ulm_card_flower_name: Bonsai Ficus
+    ulm_card_flower_species: "ficus retusa"
+    ulm_card_flower_show_bars:
+        - temperature
+        - humidity
+        - moisture
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    ulm_card_flower_entityplant.bonsai_ficusyesThe entity of your plant
    ulm_card_flower_nameBonsai FicusnoThe name of your plant
    ulm_card_flower_species"ficus retusa"yesThe species of your plant
    ulm_card_flower_show_bars
+- temperature
+
    
+- moisture
+
    
+- humidity
+    		noThe bar you want to display. Any of :
+
  • illuminance
    • 
+
  • humidity
    • 
+
  • moisture
    • 
+
  • conductivity
    • 
+
  • temperature
    • 
+
  • dli
    • 
+
    
+
+
    Requirements
    
+
    Need lovelace-flower-card
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_schumijo_flower.yaml
    ---
+list_1_item:
+  styles:
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+    grid:
+      - grid-template-areas: "'item1'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content"
+      - column-gap: "7px"
+
+flower:
+  template:
+    - "ulm_custom_card_schumijo_flower_language_variables"
+  tap_action:
+    action: "more-info"
+  icon: |
+    [[[
+        var icon = 'mdi:flower';
+        if (entity.state == 'problem'){
+          var icon = 'mdi:alert-circle';
+        }
+        return icon ;
+    ]]]
+  label: >-
+    [[[
+        if (entity.state == 'problem'){
+          return variables.ulm_custom_card_schumijo_flower_problem;
+        }else{
+          return variables.ulm_custom_card_schumijo_flower_correct;
+        }
+    ]]]
+  state:
+    - operator: "template"
+      value: >
+        [[[
+          return entity.state != 'on';
+        ]]]
+      styles:
+        icon:
+          - color: "rgba(var(--color-green),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-green),0.2)"
+
+card_flower:
+  variables:
+    ulm_card_flower_name: "No name set"
+  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: "6px"
+  custom_fields:
+    item1:
+      card:
+        entity: "[[[ return variables.ulm_card_flower_entity ]]]"
+        name: "[[[ return variables.ulm_card_flower_name ]]]"
+        tap_action:
+          action: "more-info"
+        template:
+          - "icon_info"
+          - "flower"
+        type: "custom:button-card"
+    item2:
+      card:
+        template: "list_1_item"
+        type: "custom:button-card"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:flower-card"
+              entity: "[[[ return variables.ulm_card_flower_entity ]]]"
+              species: "[[[ return variables.ulm_card_flower_species ]]]"
+              show_bars: "[[[ return variables.ulm_card_flower_show_bars ]]]"
+              card_mod:
+                style: |
+                  ha-card{
+                    margin-top: 0px !important;
+                    box-shadow: none !important;
+                    --mdc-icon-size: 16px !important;
+                  }
+                  .header{
+                    display: none !important;
+                  }
+                  .divider{
+                    display: none !important;
+                  }
+                  .value{
+                    display: none !important;
+                  }
+                  .attributes{
+                    padding: 0px !important;
+                  }
+                  .attribute ha-icon {
+                      margin-right: 0px !important;
+                  }
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_sisimomo_printer/index.html b/usage/custom_cards/custom_card_sisimomo_printer/index.html
new file mode 100644
index 000000000..90be194d0
--- /dev/null
+++ b/usage/custom_cards/custom_card_sisimomo_printer/index.html
@@ -0,0 +1,4266 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Printer Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Printer"
    
+
    Image title
    
+
    This is the custom_card_sisimomo_printer, used to show the state of a printer including, if wanted, ink sensors.
+The card has support any number of ink sensors under the state of the printer. These can be configured using custom colors and labels.
    
+
    Credits
    
+
    Author: Sisimomo (based on hiddevanbrussel pictures)
+Version: 0.1.0
    
+
    Contributors:
    
+
+
    Changelog
    
+
    
+  0.1.0 - Initial Release
+
+- Initial release
+
+
    
+
    
+  0.2.0 - Added additional cases
+
+- Added support for other cartridge types (tricolor)
+- Added further error checking for previously uncaught states
+- Added support for the IPP 'unavailable' state
+- Added CSS for better theming of error screens
+- Added card string translation files
+- Changed `text-transform` of label to capitalize
+- Changed `ulm_unavailable` to `ulm_translation_unavailable`
+- Removed some unnecessary inline stylings
+- Fixed the handling of unavailable and idle state styling
+
+
    
+
+
    Card options
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    OptionsRequiredDescription
    entityThe entity_id for the large card
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableRequiredDescription
    printer_nameThe chosen display name of the printer. 
     If not provided, will use the friendly name of the provided entity.
    cartridgesA list of  Cartridge entity objects. (See below)
    
+
    Cartridge entity
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableRequiredDescriptionRequirement
    labelThe label for the ink sensor. For better aesthetic, keep this string short eg: "BK", "Y", "M", "C", "PB"
    entity_idThe entity_id of the ink sensorMust be a value between 0-100 (percentage).
    typeThe type of cartridge associated with the ink sensorMust be either 'unicolor' or 'tricolor'. 
     If not provided, 'unicolor' is assumed for backwards compatibility.
    colorThe color of the ink barFor unicolor cartridges, must be a single CSS Legal Color Value. For tricolor cartridges, 3 colours are required. (See usage for more info)
    
+
    Usage
    
+
    Unicolor Printers
    
+
    - type: "custom:button-card"
+  template: "custom_card_sisimomo_printer"
+  entity: sensor.hp_printer_status
+  variables:
+    printer_name: HP LaserJet MFP M28w
+    cartridges:
+      - label: "BK"
+        entity_id: sensor.printer_black_ink
+        type: unicolor
+        color: "black"
+      - label: "B"
+        entity_id: sensor.printer_photo_black_ink
+        type: unicolor
+        color: "black"
+      - label: "Y"
+        entity_id: sensor.printer_yellow_ink
+        type: unicolor
+        color: "rgba(var(--color-yellow), 1)"
+      - label: "M"
+        entity_id: sensor.printer_magenta_ink
+        type: unicolor
+        color: "#F84B7A"
+      - label: "C"
+        entity_id: sensor.printer_cyan_ink
+        type: unicolor
+        color: "#427EDE"
+      - label: "PB"
+        entity_id: sensor.printer_photo_blue_ink
+        type: unicolor
+        color: "#9272BE"
+
    
+
    Tricolor Printers
    
+
    - type: "custom:button-card"
+  template: custom_card_sisimomo_printer
+  entity: sensor.canon_mg3600_series
+  variables:
+    ulm_card_printer_name: Canon MG3650
+    cartridges:
+      - label: "Col"
+        entity_id: sensor.canon_mg3600_series_black
+        type: tricolor
+        color:
+          - cyan
+          - magenta
+          - yellow
+      - label: "BK"
+        entity_id: sensor.canon_mg3600_series_black
+        type: unicolor
+        color: black
+
    
+
    Template code
    
+
    
+Template Code
+
    custom_card_sisimomo_printer.yaml
    ---
+custom_card_sisimomo_printer:
+  template:
+    - "ulm_translation_engine"
+    - "ulm_language_variables"
+  variables:
+    printer_name: "[[[ entity.attributes.friendly_name; ]]]"
+    ulm_idle: "idle"
+  show_icon: false
+  show_label: false
+  show_name: false
+  triggers_update: "all"
+  tap_action:
+    action: ""
+  styles:
+    grid:
+      - grid-template-areas: "'printer_state' 'cartridges'"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+      - "--mdc-ripple-press-opacity": 0
+      - cursor: "default"
+  custom_fields:
+    printer_state:
+      card:
+        type: "custom:button-card"
+        template: |
+          [[[
+            return (
+              entity.state.toLowerCase() != variables.ulm_idle.toLowerCase()
+              && entity.state.toLowerCase() != variables.ulm_translation_unavailable.toLowerCase()
+              ? [ "icon_info", "blue_no_state" ] : [ "icon_info" ]
+            );
+          ]]]
+        tap_action:
+          action: "more-info"
+        label: "[[[ return entity.state; ]]]"
+        name: "[[[ return variables.printer_name; ]]]"
+        entity: "[[[ return entity.entity_id; ]]]"
+        styles:
+          card:
+            - padding: "0"
+            - "--mdc-ripple-press-opacity": 0.12
+            - cursor: "pointer"
+          label:
+            - text-transform: "capitalize"
+    cartridges: |
+      [[[
+        // Source: https://stackoverflow.com/a/56266358
+        const isColor = (strColor) => {
+          const s = new Option().style;
+          s.color = strColor;
+          return s.color !== '';
+        }
+
+        let toner_info_available = true;
+        if (variables.cartridges !== undefined ? Array.isArray(variables.cartridges) && variables.cartridges.length > 0 : false) {
+          let errorArray = [];
+          variables.cartridges.forEach(cartridge => {
+            let index = variables.cartridges.indexOf(cartridge);
+            let valid_cartridge_types = ['unicolor', 'tricolor']
+
+            // Confirm that the label is provided.
+            if (cartridge.label === undefined) {
+              errorArray.push(`cartridges.[${index}].label: You must provide a value.`);
+            }
+
+            // Confirm that a valid cartridge type is provided, if not default to 'unicolor'
+            // for backwards compatibility with older configuration files
+            if (cartridge.type === undefined) {
+                cartridge.type = 'unicolor'
+            } else if (!valid_cartridge_types.includes(cartridge.type)) {
+                errorArray.push(`cartridges.[${index}].type: You must provide a valid cartridge type`);
+            }
+
+            // Confirm that the color is provided and is valid color css.
+            if (cartridge.color !== undefined) {
+              if (cartridge.type === 'unicolor') {
+                if (typeof cartridge.color === 'string' || cartridge.color instanceof String ? !isColor(cartridge.color) : false) {
+                  errorArray.push(`cartridges.[${index}].color: You must provide a single valid CSS color value.`);
+                }
+              } else if (Array.isArray(cartridge.color) && cartridge.color.length === 3 ? cartridge.type === 'tricolor' : false) {
+                cartridge.color.forEach(color => {
+                  let col_index = cartridge.color.indexOf(color);
+                  if (!isColor(String(color))) {
+                    errorArray.push(`cartridges.[${index}].color.[${col_index}]: You must provide a single valid CSS color value.`);
+                  }
+                });
+              } else {
+                errorArray.push(`cartridges.[${index}].color: Invalid combination of colour and type.`);
+              }
+            } else {
+              errorArray.push(`cartridges.[${index}].color: You must provide a value.`);
+            }
+
+            // Confirm that the entity_id is provided, is a valid entity_id, a integer and a value between 0 and 100 inclusively.
+            if (cartridge.entity_id === undefined) {
+              errorArray.push(`cartridges.[${index}].entity_id: You must provide a value.`);
+            } else if (states[cartridge.entity_id] === undefined) {
+              errorArray.push(`cartridges.[${index}].entity_id: You must provide a existing entity_id.`);
+            } else if (String(states[cartridge.entity_id].state).toLowerCase() === String(variables.ulm_translation_unavailable).toLowerCase()) {
+              toner_info_available = false;
+            } else if (isNaN(states[cartridge.entity_id].state) || typeof states[cartridge.entity_id].state === "boolean") {
+              errorArray.push(`cartridges.[${index}].entity_id: You must provide a entity representing an integer.`);
+            } else if (states[cartridge.entity_id].state < 0 || states[cartridge.entity_id].state > 100) {
+              errorArray.push(`cartridges.[${index}].entity_id: You must provide a entity representing an integer between 0 and 100 inclusively.`);
+            }
+          });
+          if (errorArray.length > 0) {
+            return `<div class="error-container">
+              <b>Configuration Error:</b>
+              <ul>
+                ${errorArray.map(error => `<li>${error}</li>`).join("")}
+              </ul>
+            </div>`;
+          }
+
+          if (toner_info_available) {
+            return '<div class="wrapper">' +
+              variables.cartridges.map(cartridge => {
+                if (cartridge.type === "unicolor") {
+                  cartridge.bar_style = `
+                    background-color: ${cartridge.color};
+                    width: ${states[cartridge.entity_id].state}%;
+                  `;
+                } else if (cartridge.type === "tricolor") {
+                  cartridge.bar_style = `
+                    background: linear-gradient(
+                      180deg,
+                      ${cartridge.color[0]},
+                      ${cartridge.color[0]} 33%,
+                      ${cartridge.color[1]} 33%,
+                      ${cartridge.color[1]} 66%,
+                      ${cartridge.color[2]} 66%,
+                      ${cartridge.color[2]}
+                    );
+                    width: ${states[cartridge.entity_id].state}%;
+                  `;
+                }
+
+                // Removes unnecessary whitespace from inline CSS
+                cartridge.bar_style = cartridge.bar_style.replace(/\s{2,}/g, '')
+                return `
+                  <div class="label">${cartridge.label}</div>
+                  <div class="container-bar">
+                    <div class="bar" style="${cartridge.bar_style}"></div>
+                  </div>
+                  <div class="state">${states[cartridge.entity_id].state}%</div>
+                `;
+              }).join("") +
+            '</div>';
+          } else {
+            return `
+              <div class="info-unavailable">
+                Toner Information Unavailable
+              </div>
+            `;
+          }
+        } else {
+
+        }
+      ]]]
+  card_mod:
+    style: |
+      /* Cartridge CSS */
+      div#cartridges .wrapper {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        grid-gap: 1rem;
+        padding: 12px 8px 8px 8px;
+      }
+      div#cartridges .wrapper > *:nth-child(3n-2), .wrapper > *:nth-child(3n) {
+        place-self: center start;
+      }
+      div#cartridges .wrapper > .label {
+        filter: opacity(70%);
+        font-size: medium;
+      }
+      div#cartridges .wrapper > .container-bar {
+        position: relative;
+        border-radius: 4px;
+        border: 0.01rem solid rgba(var(--color-theme),.35);
+      }
+      div#cartridges .wrapper > .container-bar .bar {
+        height: 20px;
+        border-radius: 4px;
+      }
+      div#cartridges .wrapper > .state {
+        filter: opacity(40%);
+        font-size: medium;
+      }
+
+      /* Error CSS */
+      div#cartridges .error-container {
+        text-align: left;
+        font-size: 75%;
+        font-family: var(--code-font-family, monospace);
+        padding: 10px;
+        background-color: rgba(219, 68, 55, 0.75);
+        margin-top:10px;
+        border-radius:8px;
+      }
+      div#cartridges .error-container ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        white-space: normal !important;
+      }
+      div#cartridges .error-container ul li {
+        margin-top: 0.5em;
+      }
+      div#cartridges .info-unavailable {
+        padding: 1em;
+        white-space: normal;
+        margin-top:10px;
+        border-radius:8px;
+        opacity: 60%;
+      }
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_tpx01_aircondition/index.html b/usage/custom_cards/custom_card_tpx01_aircondition/index.html
new file mode 100644
index 000000000..a3946c365
--- /dev/null
+++ b/usage/custom_cards/custom_card_tpx01_aircondition/index.html
@@ -0,0 +1,4033 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        AirCondition Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "AirCondition"
    
+
    The custom_card_tpx01_aircondition shows data from your air condition and gives you the possibility to control it.
    
+
    Credits
    
+
    Author: tpx01 - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: custom:button-card
+  template: custom_card_tpx01_aircondition_with_buttons
+  variables:
+    entity: climate.livingroom
+    name: A/C Livingroom
+
    
+
    Requirements
    
+
    n/a
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    entityclimate.livingroomyesYour climate entity
    nameA/C LivingroomyesThe name to show
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_tpx01_aircondition.yaml
    ---
+custom_card_tpx01_aircondition:
+  template:
+    - "ulm_translation_engine"
+    - "custom_card_tpx01_aircondition_language_variables"
+  tap_action:
+    action: "more-info"
+  icon: |
+    [[[
+        if (entity.state =='dry') {
+          return 'mdi:water';
+        } else if (entity.state =='heat') {
+          return 'mdi:radiator';
+        } else if (entity.state =='cool') {
+          return 'mdi:snowflake';
+        } else if (entity.state =='fan_only') {
+          return 'mdi:fan';
+        }
+        return 'mdi:air-conditioner';
+    ]]]
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  state:
+    - operator: "template"
+      value: >
+        [[[
+          return entity.state != 'off';
+        ]]]
+      styles:
+        icon:
+          - color: "rgba(var(--color-blue),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-blue),0.2)"
+
+custom_card_tpx01_aircondition_with_buttons:
+  variables:
+    name:
+  styles:
+    grid:
+      - grid-template-areas: "item1 item2"
+      - grid-template-columns: "1fr"
+      - grid-template-rows: "min-content min-content"
+      - row-gap: "12px"
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+      - padding: "12px"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "list_items_favorite"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template:
+                - "icon_info"
+                - "custom_card_tpx01_aircondition"
+              tap_action:
+                action: "more-info"
+              name: >
+                [[[
+                    if (variables.name == null) {
+                      return variables.entity;
+                    }
+                    return variables.name;
+                ]]]
+              entity: "[[[ return variables.entity ]]]"
+          item2:
+            card:
+              type: "horizontal-stack"
+              cards:
+                - type: "conditional"
+                  conditions:
+                    - entity: "[[[ return variables.entity ]]]"
+                      state: "off"
+                  card:
+                    type: "custom:button-card"
+                    template: "widget_icon"
+                    tap_action:
+                      action: "perform-action"
+                      perform_action: "climate.set_hvac_mode"
+                      target:
+                        entity_id: "[[[ return variables.entity ]]]"
+                      data:
+                        hvac_mode: "cool"
+                    icon: "mdi:power"
+                - type: "conditional"
+                  conditions:
+                    - entity: "[[[ return variables.entity ]]]"
+                      state_not: "off"
+                  card:
+                    type: "custom:button-card"
+                    template: "widget_icon"
+                    tap_action:
+                      action: "perform-action"
+                      perform_action: "climate.set_hvac_mode"
+                      target:
+                        entity_id: "[[[ return variables.entity ]]]"
+                      data:
+                        hvac_mode: "off"
+                    icon: "mdi:power-off"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "list_items"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "script.decrease_climate_temperature"
+                target:
+                  entity_id: "[[[ return variables.entity ]]]"
+              icon: "mdi:minus"
+          item2:
+            card:
+              type: "custom:button-card"
+              template: "widget_temperature"
+              tap_action:
+                action: "none"
+              entity: "[[[ return variables.entity ]]]"
+              icon: "mdi:temperature-celsius"
+          item3:
+            card:
+              type: "custom:button-card"
+              template: "widget_icon"
+              tap_action:
+                action: "perform-action"
+                perform_action: "script.increment_climate_temperature"
+                target:
+                  entity_id: "[[[ return variables.entity ]]]"
+              icon: "mdi:plus"
+
+list_items_favorite:
+  styles:
+    grid:
+      - grid-template-areas: "item1 item1 item2"
+      - grid-template-columns: "1fr 1fr 1fr"
+      - grid-template-rows: "min-content"
+      - column-gap: "7px"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+
+widget_temperature:
+  tap_action:
+    action: "toggle"
+  color: "var(--google-grey-500)"
+  show_icon: false
+  show_name: false
+  show_label: true
+  size: "20px"
+  label: |-
+    [[[
+        var temperature = entity.attributes.temperature;
+        if (temperature == null) {
+          var temperature = '-';
+        }
+        return temperature + '°C'
+    ]]]
+  styles:
+    label:
+      - color: "rgb(var(--color-theme),0.9)"
+    grid:
+      - grid-template-areas: "l"
+    card:
+      - box-shadow: "none"
+      - padding: "0px"
+      - background-color: "rgba(var(--couleur-theme),0)"
+      - border-radius: "14px"
+      - place-self: "center"
+      - height: "42px"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_vncntdev_device_tracer/index.html b/usage/custom_cards/custom_card_vncntdev_device_tracer/index.html
new file mode 100644
index 000000000..8f0799bf6
--- /dev/null
+++ b/usage/custom_cards/custom_card_vncntdev_device_tracer/index.html
@@ -0,0 +1,3979 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Device Tracker Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Device Tracker (Online or Offline ?)"
    
+
    This card indicated whether a given device is online or offline using the Home Assistant device_tracker or the WoL-integration.
    
+
    Preview
+
     Turn on you device with WoL: 
    
+WoL Preview
    
+
    Credits
    
+
    Author: vncnt.dev - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.1.1
+Fix for UI Minimalist v1.0.1.
+
    
+
+
    
+1.1.0
+Support WoL
+
    
+
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: "custom_card_vncntdev_device_tracker"
+  entity: switch.pc
+  variables:
+    custom_card_vncntdev_device_tracker_icon: mdi:desktop-mac
+    custom_card_vncntdev_device_tracker_name: "PC"
+    custom_card_vncntdev_device_tracker_status_as_name: true
+
+- type: "custom:button-card"
+  template: "custom_card_vncntdev_device_tracker"
+  entity: device_tracker.raspberry4
+  variables:
+    custom_card_vncntdev_device_tracker_name: "Raspberry Pi 4"
+
    
+
    Requirements
    
+
    Setup the device tracker integration
    
+
    if you want to use WoL:
+Setup WoL integration
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    entitydevice_tracker.pctrueIcon of the Card
    custom_card_vncntdev_device_tracker_name"PC"falseCustom name of device
    default: friendly name of device tracer
    custom_card_vncntdev_device_tracker_status_as_nametruetrueswap label and name?
    default: false
+default: "mdi:server"
    custom_card_vncntdev_device_tracker_iconmdi:desktop-macfalseIcon of the Card
    
+default: "mdi:server"
    custom_card_vncntdev_device_tracker_color_online"var(--google-green)"falseColor of icon if device is online
    
+default: "var(--google-green)"
    custom_card_vncntdev_device_tracker_color_offline"var(--google-red)"falseColor of icon if offline
    
+default: "var(--google-red)"
    
+
+
    Template code
    
+
    
+Template Code
+
    vncntdev_card_device_tracer.yaml
    ---
+custom_card_vncntdev_device_tracker:
+  template: "card_generic"
+  variables:
+    custom_card_vncntdev_device_tracker_name:
+    custom_card_vncntdev_device_tracker_status_as_name: false
+    custom_card_vncntdev_device_tracker_icon: "mdi:server"
+    custom_card_vncntdev_device_tracker_color_online: "var(--google-green)"
+    custom_card_vncntdev_device_tracker_color_offline: "var(--google-red)"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template:
+          - "icon_more_info"
+        custom_fields:
+          item1:
+            card:
+              type: "custom:button-card"
+              icon: "[[[return variables.custom_card_vncntdev_device_tracker_icon]]]"
+              styles:
+                icon:
+                  - color: >
+                      [[[
+                          return (entity.state == "not_home" || entity.state == "off") ?
+                          variables.custom_card_vncntdev_device_tracker_color_offline:
+                          variables.custom_card_vncntdev_device_tracker_color_online;
+                      ]]]
+          item2:
+            card:
+              type: "custom:button-card"
+              name: |
+                [[[
+                    if (!variables.custom_card_vncntdev_device_tracker_status_as_name) {
+                      return variables.custom_card_vncntdev_device_tracker_name !== null?
+                      variables.custom_card_vncntdev_device_tracker_name:
+                      entity.attributes.friendly_name;
+                    } else {
+                      return (entity.state == "not_home" || entity.state == "off") ? "Offline" : "Online";
+                    }
+                ]]]
+              label: |
+                [[[
+                    if (variables.custom_card_vncntdev_device_tracker_status_as_name) {
+                      return variables.custom_card_vncntdev_device_tracker_name !== null?
+                      variables.custom_card_vncntdev_device_tracker_name:
+                      entity.attributes.friendly_name;
+                    } else {
+                      return (entity.state == "not_home" || entity.state == "off") ? "Offline" : "Online";
+                    }
+                ]]]
+
    
+
    
+
    Note
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_water_heater/index.html b/usage/custom_cards/custom_card_water_heater/index.html
new file mode 100644
index 000000000..fee14ef88
--- /dev/null
+++ b/usage/custom_cards/custom_card_water_heater/index.html
@@ -0,0 +1,3962 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Water Heater Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Water heater"
    
+
    
+
    NOTE
+This card is under review and is not ready to use!
    
+
    
+
    Credits
    
+
    Author: tben - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    
+
    
+
    Requirements
    
+
    This card needs the following to function correctly:
    
+
+
+
+
+
+
+
+
+
+
+
    Component / cardrequiredNote
    
+
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_water_heater.yaml
    ---
+card_water_heater:
+  icon: "mdi:waves"
+  tap_action:
+    action: "more-info"
+  hold_action:
+    action: "more-info"
+  label: >-
+    [[[
+        if (entity.state == 'off'){
+          return 'Arrêt forcé';
+        }else{
+          if (states["sensor.shelly_prise_salon_conso"].state > 0){
+            var etat = "Chauffe • " + states["sensor.shelly_prise_salon_conso"].state + "W";
+          }else{
+            var etat = "Inactif";
+          }
+          return etat ;
+        }
+    ]]]
+  state:
+    - operator: "template"
+      value: >
+        [[[
+          return (states['sensor.shelly_prise_salon_conso'].state > 0)
+        ]]]
+      styles:
+        icon:
+          - color: "rgba(var(--color-red),1)"
+        img_cell:
+          - background-color: "rgba(var(--color-red),0.2)"
+        card:
+          - background-color: "rgba(var(--color-background-red),var(--opacity-bg))"
+        name:
+          - color: "rgba(var(--color-red-text),1)"
+        label:
+          - color: "rgba(var(--color-red-text),1)"
+
    
+
    
+
    HomeAssistant
    
+
    ...
    
+
    Example
    
+
    ...
    
+
    
+
    
+
    Note
    
+
    ...
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_wsly_pollen/index.html b/usage/custom_cards/custom_card_wsly_pollen/index.html
new file mode 100644
index 000000000..4c2f8e811
--- /dev/null
+++ b/usage/custom_cards/custom_card_wsly_pollen/index.html
@@ -0,0 +1,4032 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Tomorrow.io Pollen card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Tomorrow.io Pollen card"
    
+
    This is a custom-card to display the pollen index of the Tomorrow.io index
    
+
    Screenshot light mode
+Screenshot dark mode
    
+
    Credits
    
+
    Author: wsly - 05/2022
+Version: 1.0.1
    
+
    Changelog
    
+
    
+1.0.0
+Initial release.
+
    
+
    
+1.0.1
+Allow customizing the name and icon of each pollen index, with localized defaults. (`*_name`, `*_icon` variables)
+
    
+
+
    Requirements
    
+
    This card uses the following integration:
    
+
    Tomorrow.io
    
+
    Usage
    
+
    - type: 'custom:button-card'
+  template: custom_card_wsly_pollen
+  variables:
+    custom_card_wsly_pollen_tree: sensor.tomorrow_io_home_tree_pollen_index
+    custom_card_wsly_pollen_grass: sensor.tomorrow_io_home_grass_pollen_index
+    custom_card_wsly_pollen_weed: sensor.tomorrow_io_home_weed_pollen_index
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredDefaultExplanation
    custom_card_wsly_pollen_tree"sensor.tomorrow_io_home_tree_pollen_index"YesThe entity for the tree pollen index
    custom_card_wsly_pollen_grass"sensor.tomorrow_io_home_grass_pollen_index"YesThe entity for the grass pollen index
    custom_card_wsly_pollen_weed"sensor.tomorrow_io_home_weed_pollen_index"YesThe entity for the weed pollen index
    custom_card_wsly_pollen_tree_name"Trees"No"Trees" (localized)The name to display for the tree pollen index, or `false` to use the `custom_card_wsly_pollen_tree` entity's friendly name.
    custom_card_wsly_pollen_tree_icon"mdi:tree"No"mdi:tree"The icon to display for the tree pollen index, or `false` to use the `custom_card_wsly_pollen_tree` entity's icon.
    custom_card_wsly_pollen_grass_name"Grass"No"Grass" (localized)The name to display for the grass pollen index, or `false` to use the `custom_card_wsly_pollen_grass` entity's friendly name.
    custom_card_wsly_pollen_grass_icon"mdi:grass"No"mdi:grass"The icon to display for the grass pollen index, or `false` to use the `custom_card_wsly_pollen_grass` entity's icon.
    custom_card_wsly_pollen_weed_name"Weeds"No"Weeds" (localized)The name to display for the weed pollen index, or `false` to use the `custom_card_wsly_pollen_weed` entity's friendly name.
    custom_card_wsly_pollen_weed_icon"mdi:flower-pollen"No"mdi:flower-pollen"The icon to display for the weed pollen index, or `false` to use the `custom_card_wsly_pollen_weed` entity's icon.
    
+
+
    Template code
    
+
    
+Template Code
+
    custom_card_wsly_pollen.yaml
    ---
+### Custom card Pollen ###
+custom_card_wsly_pollen:
+  type: "custom:button-card"
+  template:
+    - "custom_card_wsly_pollen_language_variables"
+    - "list_3_items"
+  triggers_update: "all"
+  styles:
+    card:
+      - border-radius: "var(--border-radius)"
+      - box-shadow: "var(--box-shadow)"
+  custom_fields:
+    item1:
+      card:
+        type: "custom:button-card"
+        template: "custom_card_wsly_pollen_item"
+        entity: "[[[ return variables.custom_card_wsly_pollen_tree ]]]"
+        name: "[[[ return variables.custom_card_wsly_pollen_tree_name || states[variables.custom_card_wsly_pollen_tree].attributes.friendly_name ]]]"
+        icon: "[[[ return variables.custom_card_wsly_pollen_tree_icon || states[variables.custom_card_wsly_pollen_tree].attributes.icon ]]]"
+    item2:
+      card:
+        type: "custom:button-card"
+        template: "custom_card_wsly_pollen_item"
+        entity: "[[[ return variables.custom_card_wsly_pollen_grass ]]]"
+        name: "[[[ return variables.custom_card_wsly_pollen_grass_name || states[variables.custom_card_wsly_pollen_grass].attributes.friendly_name ]]]"
+        icon: "[[[ return variables.custom_card_wsly_pollen_grass_icon || states[variables.custom_card_wsly_pollen_grass].attributes.icon ]]]"
+    item3:
+      card:
+        type: "custom:button-card"
+        template: "custom_card_wsly_pollen_item"
+        entity: "[[[ return variables.custom_card_wsly_pollen_weed ]]]"
+        name: "[[[ return variables.custom_card_wsly_pollen_weed_name || states[variables.custom_card_wsly_pollen_weed].attributes.friendly_name ]]]"
+        icon: "[[[ return variables.custom_card_wsly_pollen_weed_icon || states[variables.custom_card_wsly_pollen_weed].attributes.icon ]]]"
+
+custom_card_wsly_pollen_item:
+  type: "custom:button-card"
+  template:
+    - "custom_card_wsly_pollen_language_variables"
+    - "vertical_buttons"
+  label: >
+    [[[
+      let pollen_state_label = variables.custom_card_wsly_pollen_none;
+      if (entity.state == "very_low") pollen_state_label = variables.custom_card_wsly_pollen_very_low;
+      else if (entity.state == "low") pollen_state_label = variables.custom_card_wsly_pollen_low;
+      else if (entity.state == "medium") pollen_state_label = variables.custom_card_wsly_pollen_medium;
+      else if (entity.state == "high") pollen_state_label = variables.custom_card_wsly_pollen_high;
+      else if (entity.state == "very_high") pollen_state_label = variables.custom_card_wsly_pollen_very_high;
+      return pollen_state_label;
+    ]]]
+  state:
+    - value: "none"
+      styles:
+        icon:
+          - color: "rgba(var(--color-grey), 1)"
+        img_cell:
+          - background-color: "rgba(var(--color-grey), 0.2)"
+    - value: "very_low"
+      styles:
+        icon:
+          - color: "rgba(var(--color-green), 1)"
+        img_cell:
+          - background-color: "rgba(var(--color-green), 0.2)"
+    - value: "low"
+      styles:
+        icon:
+          - color: "rgba(241, 196, 15, 1)"
+        img_cell:
+          - background-color: "rgba(241, 196, 15, 0.2)"
+    - value: "medium"
+      styles:
+        icon:
+          - color: "rgba(243, 156, 18, 1)"
+        img_cell:
+          - background-color: "rgba(243, 156, 18, 0.2)"
+    - value: "high"
+      styles:
+        icon:
+          - color: "rgba(231, 76, 60, 1)"
+        img_cell:
+          - background-color: "rgba(231, 76, 60, 0.2)"
+    - value: "very_high"
+      styles:
+        icon:
+          - color: "rgba(var(--color-pink), 1)"
+        img_cell:
+          - background-color: "rgba(var(--color-pink), 0.2)"
+  styles:
+    card:
+      - box-shadow: "none"
+      - border-radius: "var(--border-radius)"
+    custom_fields:
+      extreme:
+        - border-radius: "50%"
+        - position: "absolute"
+        - margin-left: "auto"
+        - margin-right: "auto"
+        - left: "38px"
+        - right: "0"
+        - top: "8px"
+        - height: "16px"
+        - width: "16px"
+        - border: "2px solid var(--card-background-color)"
+        - font-size: "12px"
+        - line-height: "14px"
+        - background-color: "rgba(var(--color-red),1)"
+        - color: "white"
+  custom_fields:
+    extreme: >
+      [[[
+        if (entity.state == "very_high"){
+          return `<ha-icon icon="mdi:exclamation-thick" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
+        }
+      ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_card_yagrasdemonde_lights_count/index.html b/usage/custom_cards/custom_card_yagrasdemonde_lights_count/index.html
new file mode 100644
index 000000000..df3be56e8
--- /dev/null
+++ b/usage/custom_cards/custom_card_yagrasdemonde_lights_count/index.html
@@ -0,0 +1,3996 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Counter Lights/Covers Card Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-card "Counter Lights/Cover Card"
    
+
    This is a custom-card to display number of lights on or covers open.
    
+
    Screenshot light mode
+Screenshot dark mode
    
+
    Credits
    
+
    Author: yagrasdemonde - 04/2022
    
+
    Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release.
+
    
+
+
    Requirements
    
+
    This card needs sensor counting lights/covers you want:
    
+
    template:
+  - sensor:
+      - name: "lights on"
+        unique_id: lights_on
+        icon: mdi:lightbulb-on-outline
+        state: >
+          {% set lights = [
+              states.light.living_room,
+              states.light.bedroom,
+              states.light.bathroom,
+              states.switch.kitchen,
+              ] %}
+          {{ lights | selectattr('state','eq','on') | list | count }}
+      - name: "covers open"
+        unique_id: covers_open
+        icon: mdi:window-shutter-open
+        state: >
+          {% set covers = [
+              states.cover.bedroom,
+              states.cover.livingroom1,
+              states.cover.livingroom2,
+              ] %}
+          {{ covers | selectattr('state','eq','open') | list | count }}
+
    
+
    Usage
    
+
    For lights
    
+
    - type: "custom:button-card"
+  template: custom_card_yagrasdemonde_lights_count
+  entity: sensor.lights_on
+
    
+
    For covers
    
+
    - type: "custom:button-card"
+  template: custom_card_yagrasdemonde_lights_count
+  entity: sensor.covers_open
+  variables:
+    ulm_custom_card_yagrasdemonde_lights_count_type: "cover"
+    ulm_custom_card_yagrasdemonde_lights_count_icon_off: "mdi:window-shutter"
+    ulm_custom_card_yagrasdemonde_lights_count_color: "blue"
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredDefaultExplanation
    ulm_custom_card_yagrasdemonde_lights_count_type"cover"No"light"The entity type used for translations
    Values available : cover, light
    ulm_custom_card_yagrasdemonde_lights_count_icon_on"mdi:lightbulb-on-outline"NoSensor IconOverwrites the sensor icon used for on/open state
    ulm_custom_card_yagrasdemonde_lights_count_icon_off"mdi:lightbulb-outline"No"mdi:lightbulb-outline"Icon for state off/closed
    ulm_custom_card_yagrasdemonde_lights_count_color"red"No"yellow"Style the color of icon, name and card (if applicable)
    Values available : blue, green, grey, pink, purple, red, yellow
    ulm_custom_card_yagrasdemonde_lights_count_force_background_colortrueNofalseForce background card color even in light mode
    
+
+
    
+Template Code
+
    custom_card_yagrasdemonde_lights_count.yaml
    ---
+### Custom Card Lights (or covers) Counter ###
+custom_card_yagrasdemonde_lights_count:
+  show_name: true
+  template:
+    - "ulm_custom_card_yagrasdemonde_lights_count_language_variables"
+    - "icon_only"
+    - "ulm_translation_engine"
+  variables:
+    ulm_custom_card_yagrasdemonde_lights_count_icon_on: "[[[ return entity.attributes.icon ]]]"
+    ulm_custom_card_yagrasdemonde_lights_count_icon_off: "mdi:lightbulb-outline"
+    ulm_custom_card_yagrasdemonde_lights_count_color: "yellow"
+    ulm_custom_card_yagrasdemonde_lights_count_force_background_color: false
+  tap_action:
+    action: "none"
+  name: >-
+      [[[
+        var entity_count_O = '';
+        var entity_count_1 = '';
+        var entity_count_many = '';
+        if(variables.ulm_custom_card_yagrasdemonde_lights_count_type == "cover") {
+          entity_count_O = variables.ulm_custom_card_yagrasdemonde_lights_count_cover_0;
+          entity_count_1 = variables.ulm_custom_card_yagrasdemonde_lights_count_cover_1;
+          entity_count_many = variables.ulm_custom_card_yagrasdemonde_lights_count_cover_many;
+        }
+        else {
+          entity_count_O = variables.ulm_custom_card_yagrasdemonde_lights_count_light_0;
+          entity_count_1 = variables.ulm_custom_card_yagrasdemonde_lights_count_light_1;
+          entity_count_many = variables.ulm_custom_card_yagrasdemonde_lights_count_light_many;
+        }
+        if (entity.state != "unavailable") {
+          if (entity.state == 0) {
+            return entity_count_O;
+          } else if (entity.state == 1) {
+            return entity_count_1;
+          } else {
+            return entity.state + " " + entity_count_many;
+          }
+        } else {
+          return variables.ulm_translation_state;
+        }
+      ]]]
+  icon: >
+      [[[
+          if (entity.state == 0) {
+            return variables.ulm_custom_card_yagrasdemonde_lights_count_icon_off;
+          }
+          else {
+            return variables.ulm_custom_card_yagrasdemonde_lights_count_icon_on;
+          }
+      ]]]
+  styles:
+    icon:
+      - color: >
+          [[[
+              if (entity.state == 0) {
+                return 'rgba(var(--color-theme),0.2)';
+              }
+              else {
+                return 'rgba(var(--color-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '),1)';
+              }
+          ]]]
+    name:
+      - align-self: "center"
+      - justify-self: "start"
+      - font-weight: "bold"
+      - font-size: "14px"
+      - margin-left: "12px"
+      - filter: "opacity(100%)"
+    img_cell:
+      - background-color: >
+          [[[
+              if (entity.state == 0) {
+                return 'rgba(var(--color-theme),0.05)';
+              }
+              else {
+                return 'rgba(var(--color-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '),0.2)';
+              }
+          ]]]
+    grid:
+      - grid-template-areas: "'i n'"
+      - grid-template-columns: "min-content min-content"
+      - grid-template-rows: "min-content"
+  state:
+    - value: 1
+      operator: ">="
+      styles:
+        card:
+          - background-color: >-
+              [[[
+                  if (variables.ulm_custom_card_yagrasdemonde_lights_count_force_background_color == true || hass.themes.darkMode){
+                    return 'rgba(var(--color-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '-text),0.1)';
+                  }
+                  else {
+                    return 'rgba(var(--color-background-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '),var(--opacity-bg))';
+                  }
+              ]]]
+        name:
+          - color: "[[[ return 'rgba(var(--color-' + variables.ulm_custom_card_yagrasdemonde_lights_count_color + '-text),1)' ]]]"
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_chip_group_counter/index.html b/usage/custom_cards/custom_chip_group_counter/index.html
new file mode 100644
index 000000000..a50700081
--- /dev/null
+++ b/usage/custom_cards/custom_chip_group_counter/index.html
@@ -0,0 +1,4089 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom Chip Group Counter - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom Card "Group Counter"
    
+
    example-image-light
+example-image-dark
    
+
    Credits
    
+
      
+
    • Author: Albin Médoc - 2023
+    Version: 1.0.0
      • 
+
    
+
    Changelog
    
+
    
+  1.0.0
+  Initial release
+
    
+
+
    Description
    
+
    This cards show a chip with custom text representing how many entities in a group have a specific state. Pressing on the chip will toggle the entity group, eg turn on/off all lights.
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityYesHide chip if no entities are active.
    ulm_custom_chip_group_counter_hide_if_zerofalseNoHide chip if no entities are active.
    ulm_custom_chip_group_counter_typelightNoSpecify the type of entities, used for translation
    ulm_custom_chip_group_counter_count_stateonNoStates that should be counted
    ulm_custom_chip_group_counter_coloryellowYesColor of the icon 
     Can choose between: blue, red, green, yellow, pink, purple 
    ulm_custom_chip_group_counter_icon_zeromdi:lightbulb-outlineNoIcon when no entity's state is satisfied
    ulm_custom_chip_group_counter_icon_onemdi:lightbulb-on-outlineNoIcon when one entity's state is satisfied
    ulm_custom_chip_group_counter_icon_multiplemdi:lightbulb-on-outlineNoIcon when multiple entities state is satisfied
    
+
    Usage
    
+
    Minimal config 1
    
+
    The entities active within the group will only go one level down. If you have a group with a group the subgroup will only be treated as a single entity.
    
+
    - type: 'custom:button-card'
+  template: 'custom_chip_group_counter'
+  entity: 'lights.living_room'
+
    
+
    Minimal config 2
    
+
    This configuration can be used if you have a sensor that should represent the state. This can be good if you have groups within groups and the calculation is happening outside this card. The entity must still be set and should represent all the entities that should be toggled on press.
    
+
    - type: 'custom:button-card'
+  template: 'custom_chip_group_counter'
+  entity: 'light.all'
+  variables:
+      ulm_custom_chip_group_counter_entities_active: 'sensor.lights_on'
+
    
+
    Full config 2
    
+
    - type: 'custom:button-card'
+  template: 'custom_chip_group_counter'
+  entity: 'light.all'
+  variables:
+      ulm_custom_chip_group_counter_hide_if_zero: true
+      ulm_custom_chip_group_counter_type: speaker
+      ulm_custom_chip_group_counter_count_state:
+          - 'playing'
+          - 'buffering'
+      ulm_custom_chip_group_counter_color: green
+      ulm_custom_chip_group_counter_icon_zero: 'mdi:speaker'
+      ulm_custom_chip_group_counter_icon_one: 'mdi:speaker'
+      ulm_custom_chip_group_counter_icon_multiple: 'mdi:speaker-multiple'
+
    
+
    Template code
    
+
    
+Template Code
+
    custom_chip_group_counter.yaml
    ---
+### Custom Chip Group Counter ###
+custom_chip_group_counter:
+  template:
+    - "chips"
+    - "custom_chip_group_counter_language_variables"
+  variables:
+    ulm_custom_chip_group_counter_icon_zero: "mdi:lightbulb-outline"
+    ulm_custom_chip_group_counter_icon_one: "mdi:lightbulb-on-outline"
+    ulm_custom_chip_group_counter_icon_multiple: "mdi:lightbulb-on-outline"
+    ulm_custom_chip_group_counter_color: "yellow"
+    ulm_custom_chip_group_counter_count_state: "on"
+    ulm_custom_chip_group_counter_type: "light"
+    ulm_custom_chip_group_counter_hide_if_zero: false
+  tap_action:
+    action: "toggle"
+  triggers_update: "all"
+  show_icon: true
+  icon: |
+    [[[
+      let entities_active = 0;
+      if(variables.ulm_custom_chip_group_counter_entities_active) {
+        entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;
+      } else {
+        entities_active = states[
+          entity.entity_id
+        ].attributes.entity_id.filter((child_entity_id) => {
+          return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);
+        }).length;
+      }
+
+      if (entities_active == 0) {
+        return variables.ulm_custom_chip_group_counter_icon_zero;
+      } else if (entities_active == 1) {
+        return variables.ulm_custom_chip_group_counter_icon_one;
+      } else {
+        return variables.ulm_custom_chip_group_counter_icon_multiple;
+      }
+    ]]]
+  label: |
+    [[[
+      let entities_active = 0;
+      if(variables.ulm_custom_chip_group_counter_entities_active) {
+        entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;
+      } else {
+        entities_active = states[
+          entity.entity_id
+        ].attributes.entity_id.filter((child_entity_id) => {
+          return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);
+        }).length;
+      }
+
+      const type = variables.ulm_custom_chip_group_counter_type;
+      const plural_typ = entities_active == 0 ? "zero" : entities_active == 1 ? "one" : "multiple";
+      const translation_path = `custom_chip_group_counter_${type}_${plural_typ}`
+      return variables[translation_path].replace('{count}', entities_active);
+    ]]]
+  styles:
+    card:
+      - display: |
+          [[[
+            let entities_active = 0;
+            if(variables.ulm_custom_chip_group_counter_entities_active) {
+              entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;
+            } else {
+              entities_active = states[
+                entity.entity_id
+              ].attributes.entity_id.filter((child_entity_id) => {
+                return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);
+              }).length;
+            }
+
+            if(variables.ulm_custom_chip_group_counter_hide_if_zero && entities_active == 0){
+              return "none";
+            }
+            return "block";
+          ]]]
+    grid:
+      - grid-template-areas: "'i l'"
+    icon:
+      - color: |
+          [[[
+            let entities_active = 0;
+            if(variables.ulm_custom_chip_group_counter_entities_active) {
+              entities_active = states[variables.ulm_custom_chip_group_counter_entities_active].state;
+            } else {
+              entities_active = states[
+                entity.entity_id
+              ].attributes.entity_id.filter((child_entity_id) => {
+                return variables.ulm_custom_chip_group_counter_count_state.includes(states[child_entity_id]?.state);
+              }).length;
+            }
+
+            if (entities_active == 0) {
+              return 'rgba(var(--color-theme),0.2)';
+            }
+            else {
+              return 'rgba(var(--color-' + variables.ulm_custom_chip_group_counter_color + '),1)';
+            }
+          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_chip_myenedis/index.html b/usage/custom_cards/custom_chip_myenedis/index.html
new file mode 100644
index 000000000..2f33f58ce
--- /dev/null
+++ b/usage/custom_cards/custom_chip_myenedis/index.html
@@ -0,0 +1,3909 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        My Enedis Chip Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-chip "My Enedis"
    
+
    The myenedis you can control a input_number entity
    
+
    ALL
    
+
    HP / HC
    
+
    Credits
    
+
    Author: acesyde - 2021
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Why not the default chip_power_consumption
    
+
      
+
    • The my enedis integration doesn't split the cost and the consumption in a specific sensor
      • 
+
    • All values are in the main sensor under the attributes item
      • 
+
    • Split Heures Creuses (HC) and Heures pleines (HP)
      • 
+
    
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_chip_myenedis
+  entity: sensor.myenedis_123456789
+  variables:
+    ulm_chip_separate_hp_hc: true
+
    
+
    Requirements
    
+
    My Enedis integration
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityYour MyEnedis Sensor
    ulm_chip_separate_hp_hcfalseSeparate HC/HC in the chip
    
+
    Template code
    
+
    
+Template Code
+
    custom_chip_myenedis.yaml
    ---
+### Chip Power Consumption ###
+custom_chip_myenedis:
+  template:
+    - "chips"
+  variables:
+    ulm_chip_separate_hp_hc: false
+    ulm_chip_unit_of_measurement: "[[[ return entity.attributes.unit_of_measurement ]]]"
+  triggers_update: "all"
+  label: |
+    [[[
+      var result = "💰 " +  parseFloat(entity.attributes.daily_cost).toFixed(1) + " €";
+
+      if(variables.ulm_chip_separate_hp_hc) {
+        result += " ☀️ " + parseFloat(entity.attributes.yesterday_HP).toFixed(1) + " " +  variables.ulm_chip_unit_of_measurement;
+        result += " 🌑 " + parseFloat(entity.attributes.yesterday_HC).toFixed(1) + " " +  variables.ulm_chip_unit_of_measurement;
+      } else {
+        result += " ⚡ " + parseFloat(entity.attributes.yesterday_HCHP).toFixed(1) + " " +  variables.ulm_chip_unit_of_measurement;
+      }
+
+      return result;
+    ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_chip_tesla_temperature/index.html b/usage/custom_cards/custom_chip_tesla_temperature/index.html
new file mode 100644
index 000000000..9d19b17e8
--- /dev/null
+++ b/usage/custom_cards/custom_chip_tesla_temperature/index.html
@@ -0,0 +1,3871 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom-chip Tesla Temperature - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+                  
    
+                
    
+              
    
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
    Custom-chip Tesla Temperature
    
+
    example-image
    
+
    Information
    
+
    Custom-chip Tesla Temperature is a chip showing the status of set temperature and current inside temperature.
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: "custom:button-card"
+  template: custom_chip_tesla_temperature
+  variables:
+      ulm_chip_hvac: climate.tesla_hvac_climate_system
+
    
+
    Requirements
    
+
    UI Lovelace Minimalist
    
+
    Tesla Custom Integration
    
+
    Variables
    
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
    VariableDefaultRequiredExplanation
    ulm_chip_hvacYesTesla hvac entity
    
+
+
    Template code
    
+
    ---
+custom_chip_tesla_temperature:
+  template:
+    - "chip_icon_label"
+    - "ulm_translation_engine"
+  variables:
+  ulm_card_enable_popup: false
+  triggers_update: "all"
+  label: |
+    [[[
+      function convertTemperature(temp) {
+        if (parseFloat(temp) == temp && Math.floor(temp) != temp) {
+          return parseFloat(temp).toFixed(1);
+        }
+        return temp;
+      }
+      var set_temp = states[variables.ulm_chip_hvac].attributes.temperature;
+      var inside_temp = states[variables.ulm_chip_hvac].attributes.current_temperature;
+      var label = "Set " + convertTemperature(set_temp) + "°" + " / Current " + convertTemperature(inside_temp) + "°";
+      return label;
+    ]]]
+  icon: |
+    [[[
+      var preset = states[variables.ulm_chip_hvac].attributes.preset_mode.toLowerCase();
+      var icon = {
+        "normal": "mdi:thermometer",
+        "defrost": "mdi:snowflake-melt",
+        "keep on": "mdi:heat-wave",
+        "dog mode": "mdi:dog-side",
+        "camp mode": "mdi:campfire",
+        "default": "mdi:thermometer"
+      }
+      return (icon[preset] || icon["default"]);
+    ]]]
+
    
+
+
+
+
+
+
+
+
+
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_chip_update/index.html b/usage/custom_cards/custom_chip_update/index.html
new file mode 100644
index 000000000..f7434027a
--- /dev/null
+++ b/usage/custom_cards/custom_chip_update/index.html
@@ -0,0 +1,3890 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom-chip "Update" - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+              
    
+                
    
+                  
    
+                    
+
+
+                  
    
+                
    
+              
    
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
    Custom-chip "Update"
    
+
    chip_update6
+chip_update3
    
+
    Information
    
+
    Chip that shows you if an update for Home Assistant is available.
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
    - type: custom:button-card
+  template: chip_update
+  entity: group.updates
+  variables:
+    ulm_chip_update_path: '/ui-lovelace-minimalist/system'
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableExampleRequiredExplanation
    entitygroup.updatesyesupdate entity
    ulm_chip_update_path/ui-lovelace-minimalist/systemyespath to navigate
    
+
+
    Template code
    
+
    ---
+### Chip Update ###
+chip_update:
+  template:
+    - "ulm_language_variables"
+    - "chips"
+  tap_action:
+    action: navigate
+    navigation_path: "[[[ return variables.ulm_chip_update_path; ]]]"
+    haptic: light
+  show_icon: true
+  state:
+  - operator: default
+    color: red
+    icon: mdi:shield-alert
+    label: "[[[ return variables.ulm_updates_available  ]]]"
+  - value: 'off'
+    color: green
+    icon: mdi:shield-check
+    label: "[[[ return variables.ulm_no_updates_available  ]]]"
+  styles:
+    grid:
+      - grid-template-areas: "'i l'"
+
    
+
    Requirements
    
+
    If you don't have an update sensor follow that instruction to create one.
    
+
    Credits
    
+
      
+
    • Author: JeffConrad18 - 2022
      • 
+
    • Version: 1.0
      • 
+
    
+
+
+
+
+
+
+
+
+
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_chip_vlape_garage/index.html b/usage/custom_cards/custom_chip_vlape_garage/index.html
new file mode 100644
index 000000000..1f724a4c2
--- /dev/null
+++ b/usage/custom_cards/custom_chip_vlape_garage/index.html
@@ -0,0 +1,3884 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Garage Chip Custom-card - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom-chip Garage
    
+
    Custom-chip Garage is a chip showing the status of a garage door.
    
+
    INSERT IMAGES
    
+
    Credits
    
+
    Author: Vincent Lape - 2023
+Credits: THe basis of this chip was derived from built-in Alarm chip
+Version: 1.0.0
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Usage
    
+
      - type: 'custom:button-card'
+    template: chip_garage
+    entity: cover.garage_door
+
    
+
    Requirements
    
+
    UI Lovelace Minimalist
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entityYesGarage door entity
    
+
    Template code
    
+
    
+Template Code
+
    custom_chip_vlape_garage.yaml
    ---
+### custom_chip_vlape_garage ###
+chip_garage:
+  template:
+    - "chip_icon_label"
+    - "ulm_translation_engine"
+  label: "[[[ return variables.ulm_translation_state ]]]"
+  icon: |
+    [[[
+      var state = entity.state.toLowerCase();
+      var garage_icon = {
+        "default": "mdi:garage",
+        "closed": "mdi:garage",
+        "open": "mdi:garage-open"
+      }
+      return (garage_icon[state] || garage_icon["default"]);
+    ]]]
+  styles:
+    icon:
+      - color: |
+          [[[
+            var state = entity.state.toLowerCase();
+            var garage_color = {
+              "default": "var(--google-green)",
+              "closed": "var(--google-green)",
+              "open": "var(--google-red)"
+            }
+            return (garage_color[state] || garage_color["default"]);
+          ]]]
+
    
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/custom_cards/custom_template_shogun160_battery_info/index.html b/usage/custom_cards/custom_template_shogun160_battery_info/index.html
new file mode 100644
index 000000000..e30c58df7
--- /dev/null
+++ b/usage/custom_cards/custom_template_shogun160_battery_info/index.html
@@ -0,0 +1,3863 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Custom Template Battery Info - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+
+
+
    Custom Template "Battery Info"
    
+
    ui_minimalist_battery_info_example
    
+
    Credits
    
+
      
+
    • Full credit to user basbruss, who created the design and base of it in his person card
      • 
+
    
+
    Changelog
    
+
    
+1.0.0
+Initial release
+
    
+
+
    Description
    
+
    This is an template to add the battery level to every ui minimalist card
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    ulm_battery_entityNoThe entity to represent the battery_level
    
+
    Usage with battery or battery_level attribute from entity
    
+
    - type: 'custom:button-card'
+    template:
+      - card_binary_sensor
+      - battery_info
+    entity: binary_sensor.badezimmer_tuer_contact
+    variables:
+      ulm_show_last_changed: false
+
    
+
    Usage with variable ulm_battery_entity
    
+
    - type: 'custom:button-card'
+    template:
+      - card_binary_sensor
+      - battery_info
+    entity: binary_sensor.badezimmer_tuer_contact
+    variables:
+      ulm_show_last_changed: false
+      ulm_battery_entity: sensor.badezimmer_tuer_battery_level
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/layout/index.html b/usage/layout/index.html
new file mode 100644
index 000000000..8113563b5
--- /dev/null
+++ b/usage/layout/index.html
@@ -0,0 +1,3723 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Layout Formatting - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Layout Formatting
    
+
+
    Aligning cards
    
+
    If you want to alight cards to the center, right. Or only 1 card on the right it can be done using a blank-card.
    
+
+
    
+Center
+
    chip_center
    
+
    # Card in the Center
+- type: horizontal-stack
+  cards:
+    - type: "custom:button-card"
+      color_type: blank-card
+
+    - type: custom:button-card
+      template: chip_icon_label
+      label: Your Card Here
+
+    - type: "custom:button-card"
+      color_type: blank-card
+
    
+
    
+
    
+Right
+
    chip_right
    
+
    # Card on the Right
+- type: horizontal-stack
+  cards:
+    - type: "custom:button-card"
+      color_type: blank-card
+
+    - type: custom:button-card
+      template: chip_icon_label
+      label: Your Card Here
+
    
+
    
+
    
+Left & Right
+
    chip_left_right
    
+
    # Card on the Right and Left
+- type: horizontal-stack
+  cards:
+    - type: custom:button-card
+      template: chip_icon_label
+      label: Your left card here
+
+    - type: "custom:button-card"
+      color_type: blank-card
+
+    - type: custom:button-card
+      template: chip_icon_label
+      label: Your right card here
+
    
+
    
+
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/popups/popup_cover/index.html b/usage/popups/popup_cover/index.html
new file mode 100644
index 000000000..1a6c8be08
--- /dev/null
+++ b/usage/popups/popup_cover/index.html
@@ -0,0 +1,3807 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Cover Popup - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Cover Popup
    
+
+
+
+
    Cover popup
    
+
    Phone
    
+
    Card compatibility
    
+
    This popup is displayed using popup and it is compatible with the following cards/chips :
    
+
      
+
    • card_cover
      • 
+
    
+
    How to use
    
+
    To enable this popup, add the variable ulm_card_cover_enable_popup and set to true.
    
+
    
+
    Warning
    
+
    This is a different approach as the other popup_cards use.
    
+
    
+
    For example :
    
+
    - type: "custom:button-card"
+  template: card_cover
+  entity: cover.garage
+  variables:
+    ulm_card_cover_enable_popup: true
+
    
+
    Credits
    
+
      
+
    • Designed by AndyVRD
      • 
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/popups/popup_light/index.html b/usage/popups/popup_light/index.html
new file mode 100644
index 000000000..f23dfbe38
--- /dev/null
+++ b/usage/popups/popup_light/index.html
@@ -0,0 +1,3884 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Light Popup - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Light Popup
    
+
+
+
+
    Light popup
    
+
    Phone
+Tablet
    
+
    Requirements
    
+
      
+
    • My Cards Bundle aka slider-card (download for HACS)
      • 
+
    • Light Entity Card (download for HACS)
      • 
+
    
+
    Card compatibility
    
+
    This popup is displayed using hold_action and it is compatible with the following cards/chips :
    
+
      
+
    • card_light
      • 
+
    
+
    How to use
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    Variable/EntityDefaultRequiredNotesRequirement
    ulm_card_light_color_paletteAdd select entity to control color palette
    
+
    To enable this popup, add the variable ulm_card_light_enable_popup and set to true.
    
+
    
+
    Warning
    
+
    This is a different approach as the other popup_cards use.
    
+
    
+
    For example :
    
+
    - type: "custom:button-card"
+  template:
+    - card_light
+  entity: light.cuisine
+  variables:
+    ulm_card_light_enable_popup: true
+    ulm_card_light_color_palette: select.wled_color_palette
+
    
+
    Credits
    
+
      
+
    • Designed by schumijo and bavo (special thanks to him for his help on this development)).
      • 
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/popups/popup_media_player/index.html b/usage/popups/popup_media_player/index.html
new file mode 100644
index 000000000..957201156
--- /dev/null
+++ b/usage/popups/popup_media_player/index.html
@@ -0,0 +1,3806 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Media_player Popup - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Media_player Popup
    
+
+
+
+
    Media Player popup
    
+
    Phone
+Tablet
    
+
    Card compatibility
    
+
    This popup is displayed using hold_action and it is compatible with the following cards/chips :
    
+
      
+
    • card_media_player
      • 
+
    
+
    How to use
    
+
    To enable this popup, add the variable ulm_card_media_player_enable_popup and set to true.
    
+
    !!! warning This is a different approach as the other popup_cards use.
    
+
    For example :
    
+
    - type: "custom:button-card"
+  template:
+    - card_media_player
+  entity: media_player.lounge_room
+  variables:
+    ulm_card_media_player_enable_popup: true
+
    
+
    Credits
    
+
      
+
    • Designed by schumijo and bavo (special thanks to him for his help on this development)).
      • 
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/popups/popup_power_outlet/index.html b/usage/popups/popup_power_outlet/index.html
new file mode 100644
index 000000000..c9deb5ecd
--- /dev/null
+++ b/usage/popups/popup_power_outlet/index.html
@@ -0,0 +1,3899 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Power Outlet Popup - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Power Outlet Popup
    
+
+
+
+
    Power outlet popup
    
+
    Phone
+Tablet
    
+
    Requirements
    
+
      
+
    • mini-graph-card (download for HACS)
      • 
+
    
+
    Card compatibility
    
+
    This popup is displayed using custom_actions and it is compatible with the following cards/chips :
    
+
      
+
    • card_generic
      • 
+
    • card_generic_swap
      • 
+
    • card_binary_sensor
      • 
+
    • card_binary_sensor_alert
      • 
+
    • card_power_outlet
      • 
+
    • card_input_boolean
      • 
+
    • card_battery
      • 
+
    
+
    Variables
    
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
    VariableExampleRequiredExplanation
    ulm_popup_power_outlet_sensor1sensor.metered_poweryesSensor entity displayed on top left button
    ulm_popup_power_outlet_sensor2sensor.metered_electric_consumedyesSensor entity displayed on top right button
    ulm_popup_power_outlet_graph_sensorsensor.metered_poweryesSensor entity displayed on graph
    
+
+
    How to use
    
+
    
+
    Breaking Change from version V1.1.2
    
+
    This popup can now be triggered with the custom action "popup".
+The popup template can be deleted and use instead the variable ulm_outlet_power_enable_popup: true to enable the use of the popup.
    
+
    
+
    For example :
    
+
    - type: "custom:button-card"
+  template:
+    - card_power_outlet
+  variables:
+    ulm_card_power_outlet_consumption_sensor: sensor.metered_wall_plug_switch_power_3
+    ulm_popup_power_outlet_sensor1: sensor.metered_wall_plug_switch_power_3
+    ulm_popup_power_outlet_sensor2: sensor.metered_wall_plug_switch_electric_consumed_kwh_2
+    ulm_popup_power_outlet_graph_sensor: sensor.metered_wall_plug_switch_power_3
+    ulm_outlet_power_enable_popup: true
+  entity: switch.metered_wall_plug_switch_2
+
    
+
    Credits
    
+
      
+
    • Designed by schumijo and bavo (special thanks to him for his help on this development)).
      • 
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/popups/popup_thermostat/index.html b/usage/popups/popup_thermostat/index.html
new file mode 100644
index 000000000..c31b5f444
--- /dev/null
+++ b/usage/popups/popup_thermostat/index.html
@@ -0,0 +1,3842 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Thermostat Popup - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Thermostat Popup
    
+
+
+
+
    Thermostat popup
    
+
    Phone
    
+
    Card compatibility
    
+
    This popup is displayed using hold_action and it is compatible with the following cards/chips :
    
+
      
+
    • card_thermostat
      • 
+
    
+
    Variables
    
+
+  
+    
+    
+    
+    
+  
+  
+    
+    
+    
+    
+  
+
    VariableExampleRequiredExplanation
    ulm_card_thermostat_preset_modetruenoSwitch to Preset Mode
    
+
+
    How to use
    
+
    To enable this popup, add the variable ulm_card_thermostat_enable_popup and set to true.
    
+
    
+
    Warning
    
+
    This is a different approach as the other popup_cards use.
    
+
    
+
    For example :
    
+
    - type: "custom:button-card"
+  template: card_thermostat
+  entity: climate.thermostat
+  variables:
+    ulm_card_thermostat_enable_popup: true
+    ulm_card_thermostat_preset_mode: true
+
    
+
    Credits
    
+
      
+
    • Designed by schumijo
      • 
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/popups/popup_vacuum/index.html b/usage/popups/popup_vacuum/index.html
new file mode 100644
index 000000000..f4391324e
--- /dev/null
+++ b/usage/popups/popup_vacuum/index.html
@@ -0,0 +1,3844 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Vacuum Popup - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Vacuum Popup
    
+
+
+
+
    Vacuum popup
    
+
    Phone
+Phone
    
+
    Requirements
    
+
    This popup does not work without the following card from HACS:
    
+
+
    Card compatibility
    
+
    This popup is displayed using popup and it is compatible with the following cards/chips :
    
+
      
+
    • card_vacuum
      • 
+
    
+
    How to use
    
+
    To enable this popup, add the variable ulm_card_vacuum_enable_popup and set to true.
    
+
    
+
    Warning
    
+
    This is a different approach as the other popup_cards use.
    
+
    
+
    For example :
    
+
    - type: "custom:button-card"
+  template: card_vacuum
+  entity: vacuum.garage
+  variables:
+    ulm_card_vacuum_enable_popup: true
+    uml_card_vacuum_camera: camera.vacuum
+
    
+
    Credits
    
+
      
+
    • Designed by Basbruss
      • 
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file
diff --git a/usage/popups/popup_weather/index.html b/usage/popups/popup_weather/index.html
new file mode 100644
index 000000000..35c317ff2
--- /dev/null
+++ b/usage/popups/popup_weather/index.html
@@ -0,0 +1,3857 @@
+
+
+
+  
+    
+      
+      
+      
+      
+      
+        
+      
+      
+        
+      
+      
+        
+      
+      
+      
+      
+    
+    
+      
+        Weather Popup - UI Lovelace Minimalist
+      
+    
+    
+      
+      
+        
+        
+      
+      
+
+
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+    
+      
+
+    
+    
+    
+  
+  
+  
+    
+    
+      
+    
+    
+    
+    
+    
+  
+    
+    
+    
+    
+    
+    
    
+      
+    
    
+    
+    
+      
+
+
    
+  
+  
+
    
+    
+    
    
+      
+      
+        
+          
+            
+
+          
+        
+      
+      
    
+        
    
+          
+            
+              
+                
+              
+              
    
+                
    
+                  
    
+                    
+
+
+  
+
+
+
+                  
    
+                
    
+              
    
+            
+            
+              
+                
+              
+              
+            
+          
+          
+            
    
+              
    
+                
+                  
+
+  
+  
+
+
+  
    Weather Popup
    
+
+
+
+
    Weather popup
    
+
    Phone
+Tablet
    
+
    Requirements
    
+
      
+
    • weather-radar-card (download for HACS)
      • 
+
    
+
    How to use
    
+
    To enable this popup, add the following code to your card:
    
+
      ulm_custom_popup:
+      template: "popup_weather_forecast"
+      entity: weather.xxx
+      popup_variables:
+          ulm_weather_popup_surpress_first_forecast: false
+
    
+
    Variables
    
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
    VariableDefaultRequiredNotes
    entity
    ulm_weather_popup_surpress_first_forecastfalseSuppress first forecast entry
    
+
    Credits
    
+
      
+
    • Designed by schumijo
      • 
+
    
+
+
+
+
+
+
+
+  
+  
+
+
+
+
+  
+
+
+
+                
+              
    
+            
    
+          
+          
+  
+
+
+        
    
+        
+          
+        
+      
    
+      
+        
+
+
+
+      
+    
    
+    
    
+      
    
+    
    
+    
+    
+    
+    
+    
+      
+      
+    
+  
+
\ No newline at end of file

    What is "Ui-Lovelace-Minimalist"