From 5645b117add057d2cd5e3306e4b8d0916c39016a Mon Sep 17 00:00:00 2001 From: basbruss Date: Wed, 22 Jun 2022 13:04:40 +0000 Subject: [PATCH] Update docs --- .../custom_cards/custom_card_afvalophaling.md | 172 +------ .../custom_cards/custom_card_apexcharts.md | 202 ++------ .../custom_cards/custom_card_bar_card.md | 11 +- .../custom_cards/custom_card_chromecast.md | 177 +------ .../custom_card_damix48_power_details.md | 93 +--- .../custom_card_eraycetinay_elapsed_time.md | 45 +- .../custom_card_eraycetinay_lock.md | 3 +- .../custom_cards/custom_card_esh_room.md | 124 +---- .../custom_cards/custom_card_esh_welcome.md | 85 ++-- .../custom_cards/custom_card_heat_pump.md | 324 +----------- .../custom_card_homeassistant_updates.md | 60 +-- .../custom_card_httpedo13_thermostat.md | 464 +----------------- .../custom_card_irmajavi_entities.md | 155 +----- .../custom_card_irmajavi_speedtest.md | 244 +-------- .../custom_card_irmajavi_weather.md | 169 +------ .../custom_card_media_player_sonos.md | 177 +------ .../custom_cards/custom_card_mpse_gauge.md | 77 +-- .../custom_cards/custom_card_mpse_printer.md | 230 +-------- .../custom_card_mpse_thermostat.md | 133 +---- .../custom_card_mpse_wifisignal.md | 33 +- docs/usage/custom_cards/custom_card_nas.md | 13 +- .../custom_cards/custom_card_nik_door.md | 113 +---- .../usage/custom_cards/custom_card_nik_nas.md | 284 +---------- .../custom_card_paddy_dwd_pollen.md | 59 +-- .../custom_card_paddy_waste_collection.md | 83 +--- .../custom_cards/custom_card_paddy_welcome.md | 217 +------- .../custom_cards/custom_card_person_info.md | 177 +------ .../custom_cards/custom_card_playstation.md | 73 +-- docs/usage/custom_cards/custom_card_qubino.md | 11 +- .../custom_cards/custom_card_schumijo_car.md | 169 +------ .../custom_card_schumijo_flower.md | 110 +---- .../custom_card_tpx01_aircondition.md | 200 +------- .../custom_card_vncntdev_device_tracer.md | 47 +- .../custom_cards/custom_card_water_heater.md | 11 +- .../custom_card_yagrasdemonde_lights_count.md | 152 +----- .../custom_cards/custom_chip_myenedis.md | 31 +- 36 files changed, 363 insertions(+), 4365 deletions(-) diff --git a/docs/usage/custom_cards/custom_card_afvalophaling.md b/docs/usage/custom_cards/custom_card_afvalophaling.md index 5e4f5bca7..0542027fd 100644 --- a/docs/usage/custom_cards/custom_card_afvalophaling.md +++ b/docs/usage/custom_cards/custom_card_afvalophaling.md @@ -3,6 +3,7 @@ title: Afvalophaling Custom-card hide: - toc --- + # Custom-card "Afvalophaling" @@ -29,16 +30,16 @@ Initial release ## Usage ```yaml - - 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" +- 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 @@ -92,151 +93,8 @@ Integration from HACS: "Home-Assistant-Sensor-Afvalbeheer" from pippyn -## Template code +??? note "Template Code" -```yaml ---- -card_afvalophaling: - template: - - "ulm_language_variables" - - "icon_info_afvalophaling" - - "custom_colors" - triggers_update: "all" - icon: "mdi:delete" - name: > - [[[ - if(states[variables.ulm_card_ophaling_vandaag].state !=='Geen' || states[variables.ulm_card_ophaling_morgen].state !=='Geen'){ - return variables.ulm_ophaling - } else { - return variables.ulm_volgende_ophaling - } - ]]] - label: | - [[[ - var glas = '' - if(variables.ulm_card_datum_glas){ - var glas = "Glas " + ' • ' + states[variables.ulm_card_datum_glas].state + '
' - } - var pmd = '' - if(variables.ulm_card_datum_pmd){ - var pmd = "PMD " + ' • ' + states[variables.ulm_card_datum_pmd].state + '
' - } - var gft = '' - if(variables.ulm_card_datum_gft){ - var gft = "GFT " + ' • ' + states[variables.ulm_card_datum_gft].state + '
' - } - var rest = '' - if(variables.ulm_card_datum_rest){ - var rest = "Restafval " + ' • ' + states[variables.ulm_card_datum_rest].state + '
' - } - var papier = '' - if(variables.ulm_card_datum_papier){ - var papier = "Papier " + ' • ' + states[variables.ulm_card_datum_papier].state + '
' - } - if(states[variables.ulm_card_ophaling_vandaag].state !=='Geen'){ - return states[variables.ulm_card_ophaling_vandaag].state - } - if(states[variables.ulm_card_ophaling_morgen].state !=='Geen'){ - return states[variables.ulm_card_ophaling_morgen].state - } else { - return rest + papier + pmd + gft + glas - } - ]]] -custom_colors: - state: - - styles: - icon: - - color: "rgba(var(--color-green),1)" - img_cell: - - background-color: "rgba(var(--color-green), 0.2)" - value: > - [[[ - return states[variables.ulm_card_ophaling_vandaag].state !== "Geen" || 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 states[variables.ulm_card_ophaling_vandaag].state === "glas" || 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 (states[variables.ulm_card_ophaling_vandaag].state =='unavailable' || states[variables.ulm_card_ophaling_morgen].state =='unavailable'){ - return `` - } - ]]] - size: "20px" -``` + ```yaml title="card_afvalophaling.yaml" + --8<-- "custom_cards/custom_card_afvalophaling/card_afvalophaling.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_apexcharts.md b/docs/usage/custom_cards/custom_card_apexcharts.md index 2ed8c2896..a759cd4ea 100644 --- a/docs/usage/custom_cards/custom_card_apexcharts.md +++ b/docs/usage/custom_cards/custom_card_apexcharts.md @@ -3,6 +3,7 @@ title: Apexcharts Custom-card hide: - toc --- + # Custom-card "Apexcharts" @@ -27,29 +28,29 @@ Initial release ## Usage ```yaml - - 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 +- 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 @@ -109,155 +110,8 @@ Integration from HACS: "custom:apexcharts-card" from RomRider -## Template code +??? note "Template Code" -```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 ]]]" - icon: "[[[ return variables.entity_1.icon ]]]" - name: "[[[ return variables.entity_1.name ]]]" - template: - - "card_generic_swap" - 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)`;]]]" - 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 ]]]" - icon: "[[[ return variables.entity_2.icon ]]]" - name: "[[[ return variables.entity_2.name ]]]" - template: - - "card_generic_swap" - 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)`;]]]" - 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 ]]]" - icon: "[[[ return variables.entity_3.icon ]]]" - name: "[[[ return variables.entity_3.name ]]]" - template: - - "card_generic_swap" - 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)`;]]]" - 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 ]]]" -``` + ```yaml title="apexcharts.yaml" + --8<-- "custom_cards/custom_card_apexcharts/apexcharts.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_bar_card.md b/docs/usage/custom_cards/custom_card_bar_card.md index fa8bc2c3a..efc9bf1aa 100644 --- a/docs/usage/custom_cards/custom_card_bar_card.md +++ b/docs/usage/custom_cards/custom_card_bar_card.md @@ -3,6 +3,7 @@ title: Bar Card Custom-card hide: - toc --- + # Custom-card "Bar Card" @@ -32,7 +33,7 @@ This card needs the following to function correctly: ## Usage ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: custom_card_bar_card variables: ulm_custom_card_bar_card_entity: sensor.memory_use_percent @@ -108,9 +109,15 @@ This card needs the following to function correctly: ## Example ```yaml -- type: 'custom:button-card' +- 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 ``` + +??? note "Template Code" + + ```yaml title="custom_card_bar_card.yaml" + --8<-- "custom_cards/custom_card_bar_card/custom_card_bar_card.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_chromecast.md b/docs/usage/custom_cards/custom_card_chromecast.md index 2ae95c24d..214e7e087 100644 --- a/docs/usage/custom_cards/custom_card_chromecast.md +++ b/docs/usage/custom_cards/custom_card_chromecast.md @@ -3,6 +3,7 @@ title: Mediaplayer Chromecast Custom-card hide: - toc --- + # Media player: sonos @@ -18,7 +19,7 @@ hide: ## Example ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: card_media_player_chromecast_with_controls variables: ulm_card_media_player_with_controls_name: "Chromecast" @@ -49,174 +50,8 @@ hide:
-
-Template code - -```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_language_variables" - label: | - [[[ - if (entity.state == 'idle'){ - return variables.ulm_off; - } - if (entity.state == 'paused'){ - return variables.ulm_paused; - } - if (entity.state == 'unavailable'){ - return variables.ulm_unavailable; - } else { - return (entity.attributes.source) + ' • ' + ( 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: - - "ulm_language_variables" - - "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: "call-service" - service: "media_player.volume_down" - service_data: - 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: "call-service" - service: "media_player.media_play_pause" - service_data: - 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: "call-service" - service: "media_player.volume_up" - service_data: - 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" +??? note "Template Code" -green_playing: - state: - - styles: - icon: - - color: "rgba(var(--color-green),1)" - img_cell: - - background-color: "rgba(var(--color-green), 0.2)" - value: "playing" -``` - -
+ ```yaml title="custom_card_chromecast.yaml" + --8<-- "custom_cards/custom_card_chromecast/custom_card_chromecast.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_damix48_power_details.md b/docs/usage/custom_cards/custom_card_damix48_power_details.md index a13f897e8..81ac8cfcc 100644 --- a/docs/usage/custom_cards/custom_card_damix48_power_details.md +++ b/docs/usage/custom_cards/custom_card_damix48_power_details.md @@ -3,6 +3,7 @@ title: Power Details Custom-card hide: - toc --- + # Custom-card "Power details" @@ -102,92 +103,8 @@ Need [mini-graph-card](https://github.com/kalkih/mini-graph-card) -## Template code +??? note "Template Code" -```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 - 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" - styles: - card: - - box-shadow: "none" - - border-radius: "var(--border-radius) var(--border-radius) 0px 0px" - - padding: "12px" - entity: "[[[ return variables.ulm_card_power_details_entity ]]]" - name: | - [[[ - 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; - } - ]]] - label: "[[[ return variables.ulm_card_power_details_name ]]]" - 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) - } -``` + ```yaml title="custom_card_damix48_power_details.yaml" + --8<-- "custom_cards/custom_card_damix48_power_details/custom_card_damix48_power_details.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_eraycetinay_elapsed_time.md b/docs/usage/custom_cards/custom_card_eraycetinay_elapsed_time.md index 1ddef3a45..58d52801e 100644 --- a/docs/usage/custom_cards/custom_card_eraycetinay_elapsed_time.md +++ b/docs/usage/custom_cards/custom_card_eraycetinay_elapsed_time.md @@ -3,6 +3,7 @@ title: Elapsed Time Custom-card hide: - toc --- + # Custom-card "Elapsed Time" @@ -37,44 +38,8 @@ Version: 0.0.1 name: "Cat Litter" ``` -## Template code - -```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); - } +??? note "Template Code" - 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.custom_card_eraycetinay_elapsed_time_days : variables.custom_card_eraycetinay_elapsed_time_day) +' ' : ''; - } - if(entity.attributes.has_time) { - text += hours > 0 ? hours + ' ' + (hours > 1 ? variables.custom_card_eraycetinay_elapsed_time_hours : variables.custom_card_eraycetinay_elapsed_time_hour) +' ' : ''; - } - if(entity.attributes.has_time && !entity.attributes.has_date) { - text += minutes > 0 ? minutes + ' ' + (minutes > 1 ? variables.custom_card_eraycetinay_elapsed_time_minutes : variables.custom_card_eraycetinay_elapsed_time_minute) +' ' : ''; - } - - text = text.length ? text += variables.custom_card_eraycetinay_elapsed_time_ago : variables.custom_card_eraycetinay_elapsed_time_justnow; - return text; - ]]] -``` + ```yaml title="custom_card_eraycetinay_elapsed_time.yaml" + --8<-- "custom_cards/custom_card_eraycetinay_elapsed_time/custom_card_eraycetinay_elapsed_time.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_eraycetinay_lock.md b/docs/usage/custom_cards/custom_card_eraycetinay_lock.md index a67c01d11..ae2bd1b15 100644 --- a/docs/usage/custom_cards/custom_card_eraycetinay_lock.md +++ b/docs/usage/custom_cards/custom_card_eraycetinay_lock.md @@ -3,6 +3,7 @@ title: Lock Card Custom-card hide: - toc --- + # Custom-card "Lock" @@ -108,8 +109,6 @@ Version: 0.0.3 -## Template code - ??? note "Template Code" ```yaml title="custom_card_eraycetinay_lock.yaml" diff --git a/docs/usage/custom_cards/custom_card_esh_room.md b/docs/usage/custom_cards/custom_card_esh_room.md index fdf9f13a3..1cac8624b 100644 --- a/docs/usage/custom_cards/custom_card_esh_room.md +++ b/docs/usage/custom_cards/custom_card_esh_room.md @@ -3,6 +3,7 @@ title: Custom Card Room hide: - toc --- + # Custom Card "Room" @@ -30,28 +31,28 @@ This is an alternative room card to the standard one that is more rectangular th ## Variables -| Variable | Default | Required | Notes | -|----------|---------|------------------|-------------------| -| entity | | Yes | The light entity to control | -| Name | | Yes | Name of the room to display | -| icon | | Yes | The icon to show | -| tap_action | | Yes | The action to perform when tapping | -| label | | Yes | The label to display information, this can be a template that returns a temperature or static text | +| Variable | Default | Required | Notes | +| ---------- | ------- | -------- | -------------------------------------------------------------------------------------------------- | +| entity | | Yes | The light entity to control | +| Name | | Yes | Name of the room to display | +| icon | | Yes | The icon to show | +| tap_action | | Yes | The action to perform when tapping | +| label | | Yes | The label to display information, this can be a template that returns a temperature or static text | ## Usage ```yaml - - 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' - label: '[[[ return states["sensor.room_temperature"].state + "°C" ]]]' +- 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" + label: '[[[ return states["sensor.room_temperature"].state + "°C" ]]]' ``` ## Customizations @@ -70,85 +71,8 @@ You can also replace 🌡️ and 💧 with any desired Emoji, and sensor.room_te ## Template code -```yaml ---- -card_esh_room: - tap_action: - action: "more-info" - color: "var(--google-grey-500)" - show_icon: true - show_name: true - show_label: true - size: "20px" - label: >- - [[[ - if (entity.state !="unavailable"){ - if (entity.state =="off"){ - var bri = Math.round(entity.attributes.brightness / 2.55); - return "Off"; - }else{ - var bri = Math.round(entity.attributes.brightness / 2.55); - return (bri ? bri : "0") + "%"; - } - }else{ - return "Unavailable"; - } - ]]] - styles: - card: - - border-radius: "20px" - - box-shadow: "var(--box-shadow)" - - padding: "12px" - grid: - - grid-template-areas: "'i toggle' 'n n' 'l l'" - - grid-template-columns: "1fr 1fr" - - grid-template-rows: "min-content" - 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" - name: - - align-self: "end" - - justify-self: "start" - - font-weight: "bold" - - font-size: "14px" - - margin-left: "12px" - - margin-top: "12px" - label: - - justify-self: "start" - - align-self: "start" - - font-weight: "bolder" - - font-size: "12px" - - filter: "opacity(40%)" - - margin-left: "12px" - state: - - justify-self: "start" - - align-self: "start" - - font-weight: "bolder" - - font-size: "12px" - - filter: "opacity(40%)" - - margin-left: "12px" - custom_fields: - toggle: - card: - entity: "[[[ return entity.entity_id ]]]" - name: "[[[ return name ]]]" - state: - - value: "on" - icon: "mdi:lightbulb" - styles: - icon: - - color: "rgba(var(--color-yellow),1)" - img_cell: - - background-color: "rgba(var(--color-yellow), 0.2)" - - value: "off" - icon: "mdi:lightbulb-off" - tap_action: - action: "toggle" - type: "custom:button-card" - template: "widget_icon" -``` +??? note "Template Code" + + ```yaml title="custom_card_esh_room.yaml" + --8<-- "custom_cards/custom_card_esh_room/custom_card_esh_room.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_esh_welcome.md b/docs/usage/custom_cards/custom_card_esh_welcome.md index 857f9c0de..677b0e46e 100644 --- a/docs/usage/custom_cards/custom_card_esh_welcome.md +++ b/docs/usage/custom_cards/custom_card_esh_welcome.md @@ -3,6 +3,7 @@ title: Custom Card Welcome Navigation hide: - toc --- + # Custom Card "Welcome Navigation" @@ -40,59 +41,59 @@ This is a welcome card based on the [welcome scenes card](https://ui-lovelace-mi ## Variables -| 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 | +| 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 | ## Collapse !!! note - This feature is fully optional. It requires some more manual configuration! +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](https://www.home-assistant.io/integrations/input_boolean/). 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. +Do not use `triggers_update: "all"`! This will lead to unwanted behavior with the random colors generator. ## Usage ```yaml - - 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" +- 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 diff --git a/docs/usage/custom_cards/custom_card_heat_pump.md b/docs/usage/custom_cards/custom_card_heat_pump.md index 3ad33159e..ad2b5543a 100644 --- a/docs/usage/custom_cards/custom_card_heat_pump.md +++ b/docs/usage/custom_cards/custom_card_heat_pump.md @@ -3,11 +3,12 @@ title: Heat Pump Custom-card hide: - toc --- + # 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](https://github.com/nervetattoo/simple-thermostat). +The `custom_card_heat_pump` allows you to control your HVAC system and all its modes. This card is inspired by [Simple Thermostat Card](https://github.com/nervetattoo/simple-thermostat). ## Credits @@ -109,321 +110,8 @@ item3: ... ``` -## Code template +??? note "Template Code" -```yaml ---- -custom_card_heat_pump: - show_name: false - show_icon: false - template: - - "icon_info_bg" - - "ulm_language_variables" - - "custom_card_heat_pump_language_variables" - 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_language_variables" - tap_action: - action: "more-info" - entity: "[[[ return entity.entity_id ]]]" - name: "[[[ return entity.name ]]]" - label: >- - [[[ - var label = variables.ulm_off ; - if (entity.state =='off'){ - label = variables.ulm_off ; - } else if (entity.state =='dry') { - return variables.custom_card_heat_pump_dry; - } else if (entity.state =='heat') { - return variables.custom_card_heat_pump_heat; - } else if (entity.state =='heat_cool') { - return variables.custom_card_heat_pump_heat_cool; - } else if (entity.state =='cool') { - return variables.custom_card_heat_pump_cool; - } else if (entity.state =='fan_only') { - return variables.custom_card_heat_pump_fan_only; - } - if(entity.attributes.temperature){ - return (entity.attributes.current_temperature ) + '°' + ' • ' + label + ' (' + entity.attributes.hvac_action + ')'; - } - return label; - ]]] - 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: "call-service" - service: "climate.set_temperature" - service_data: - entity_id: "[[[ return entity.entity_id ]]]" - 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: "call-service" - service: "climate.set_temperature" - service_data: - entity_id: "[[[ return entity.entity_id ]]]" - 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: "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" - 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: "call-service" - service: "climate.set_hvac_mode" - service_data: - entity_id: "[[[ return entity.entity_id ]]]" - 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: "call-service" - service: "climate.set_hvac_mode" - service_data: - entity_id: "[[[ return entity.entity_id ]]]" - 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: "call-service" - service: "climate.set_hvac_mode" - service_data: - entity_id: "[[[ return entity.entity_id ]]]" - 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: "call-service" - service: "climate.set_hvac_mode" - service_data: - entity_id: "[[[ return entity.entity_id ]]]" - 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" -``` + ```yaml title="custom_card_heat_pump.yaml" + --8<-- "custom_cards/custom_card_heat_pump/custom_card_heat_pump.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_homeassistant_updates.md b/docs/usage/custom_cards/custom_card_homeassistant_updates.md index 6240f62d5..6f94b53ca 100644 --- a/docs/usage/custom_cards/custom_card_homeassistant_updates.md +++ b/docs/usage/custom_cards/custom_card_homeassistant_updates.md @@ -3,6 +3,7 @@ title: Homeassistant Updates Custom-card hide: - toc --- + # Custom-card "Homeassistant updates" @@ -37,13 +38,13 @@ Updated sensors and binary_sensors + Removed group.updaters ## Usage ```yaml - - 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" +- 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 @@ -80,6 +81,8 @@ This card needs additional template sensors and binary_sensor updaters to work, +<<<<<<< Updated upstream + ## Template code ```yaml @@ -312,41 +315,10 @@ binary_sensor: attribute_templates: installed_version: "{{ state_attr('sensor.core_updates', 'installed_version') }}" latest_version: "{{ state_attr('sensor.core_updates', 'latest_version') }}" +======= +??? note "Template Code" +>>>>>>> Stashed changes - updater_supervisor: - friendly_name: Supervisor - device_class: problem - value_template: "{{ states('sensor.supervisor_updates') }}" - attribute_templates: - installed_version: "{{ state_attr('sensor.supervisor_updates', 'installed_version') }}" - latest_version: "{{ state_attr('sensor.supervisor_updates', 'latest_version') }}" - - updater_os: - friendly_name: OS - device_class: problem - value_template: "{{ states('sensor.os_updates') }}" - attribute_templates: - installed_version: "{{ state_attr('sensor.os_updates', 'installed_version') }}" - latest_version: "{{ state_attr('sensor.os_updates', 'latest_version') }}" - - updater_addons: - friendly_name: Supervisor Add-ons - device_class: problem - value_template: "{{ states('sensor.addons_updates')|int(0) != 0 }}" - attribute_templates: - addons: "{{ state_attr('sensor.addons_updates', 'addons') }}" - - updater_hacs: - friendly_name: HACS Integrations - device_class: problem - value_template: "{{ states('sensor.hacs')|int(0) != 0 }}" - attribute_templates: - repositories: "{{ state_attr('sensor.hacs', 'repositories') }}" - - - platform: group - name: "Updates" - entities: - - binary_sensor.updater_core - - binary_sensor.updater_supervisor - - binary_sensor.updater_os -``` + ```yaml title="custom_card_homeassistant_updates.yaml" + --8<-- "custom_cards/custom_card_homeassistant_updates/custom_card_homeassistant_updates.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_httpedo13_thermostat.md b/docs/usage/custom_cards/custom_card_httpedo13_thermostat.md index 9b74b5ecd..42e58d9f9 100644 --- a/docs/usage/custom_cards/custom_card_httpedo13_thermostat.md +++ b/docs/usage/custom_cards/custom_card_httpedo13_thermostat.md @@ -3,6 +3,7 @@ title: Thermostat Custom-card hide: - toc --- + # Custom-card "Thermostat" @@ -43,8 +44,8 @@ With buttons: - type: custom:button-card template: custom_card_httpedo13_thermostat_with_buttons variables: - entity: climate.ground_floor - name: Heater Ground Floor + entity: climate.ground_floor + name: Heater Ground Floor ``` With collapse button: @@ -53,8 +54,8 @@ With collapse button: - type: custom:button-card template: custom_card_httpedo13_thermostat_with_buttons_collapse variables: - entity: climate.ground_floor - name: Heater Ground Floor + entity: climate.ground_floor + name: Heater Ground Floor ``` ## Requirements @@ -84,455 +85,8 @@ Entity climate with only heat mode -## Template code - -```yaml ---- -custom_card_httpedo13_thermostat: - template: - - "ulm_language_variables" - - "custom_card_httpedo13_thermostat_language_variables" - tap_action: - action: "toggle" - icon: | - [[[ - if (entity.attributes.hvac_action == 'heating') { - return "mdi:radiator"; - } - return "mdi:radiator-off"; - ]]] - label: >- - [[[ - if (entity.state =='off') { - return variables.custom_card_httpedo13_thermostat_off; - } else if (entity.state =='heat') { - return variables.custom_card_httpedo13_thermostat_on; - } else if (entity.attributes.hvac_action == 'heating') { - return variables.custom_card_httpedo13_thermostat_heating; - } - return entity.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: "call-service" - service: "climate.set_hvac_mode" - service_data: - entity_id: "[[[ return variables.entity ]]]" - 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: "call-service" - service: "climate.set_hvac_mode" - service_data: - entity_id: "[[[ return variables.entity ]]]" - 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: "call-service" - service: "climate.set_temperature" - service_data: - temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) - 0.5) ]]]" - entity_id: "[[[ return variables.entity ]]]" - 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: "call-service" - service: "climate.set_temperature" - service_data: - temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) + 0.5) ]]]" - entity_id: "[[[ return variables.entity ]]]" - icon: "mdi:plus" - +??? note "Template Code" -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: "call-service" - service: "climate.set_hvac_mode" - service_data: - entity_id: "[[[ return variables.entity ]]]" - 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: "call-service" - service: "climate.set_hvac_mode" - service_data: - entity_id: "[[[ return variables.entity ]]]" - 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: "call-service" - service: "climate.set_temperature" - service_data: - temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) - 0.5) ]]]" - entity_id: "[[[ return variables.entity ]]]" - 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: "call-service" - service: "climate.set_temperature" - service_data: - temperature: "[[[ return (parseFloat(states[variables.entity].attributes.temperature) + 0.5) ]]]" - entity_id: "[[[ return variables.entity ]]]" - 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" -``` + ```yaml title="custom_card_httpedo13_thermostat.yaml" + --8<-- "custom_cards/custom_card_httpedo13_thermostat/custom_card_httpedo13_thermostat.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_irmajavi_entities.md b/docs/usage/custom_cards/custom_card_irmajavi_entities.md index 00d840c9b..574667371 100644 --- a/docs/usage/custom_cards/custom_card_irmajavi_entities.md +++ b/docs/usage/custom_cards/custom_card_irmajavi_entities.md @@ -3,6 +3,7 @@ title: Entities Custom-card hide: - toc --- + ## Custom-card "Entities" @@ -122,154 +123,8 @@ variables: ## Template Code -```yaml ---- -custom_card_irmajavi_entities: - template: - - ulm_language_variables - 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 - ]]] +??? note "Template Code" - -custom_widget_irmajavi: - show_label: true - show_icon: false - label: | - [[[ - var unit = entity.attributes.unit_of_measurement != null ? ' ' + entity.attributes.unit_of_measurement : '' - if (entity.state == 'on') { - return variables.ulm_on; - } else if (entity.state == 'off') { - return variables.ulm_off; - } else if (entity.state == 'unavailable') { - return variables.ulm_unavailable; - } else if (entity.state == 'idle') { - return variables.ulm_idle; - } else if (entity.state == 'open') { - return variables.ulm_open; - } else if (entity.state == 'closed') { - return variables.ulm_closed; - } else { - 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 -``` + ```yaml title="custom_card_irmajavi_entities.yaml" + --8<-- "custom_cards/custom_card_irmajavi_entities/custom_card_irmajavi_entities.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_irmajavi_speedtest.md b/docs/usage/custom_cards/custom_card_irmajavi_speedtest.md index 6525660ce..2ca00445f 100644 --- a/docs/usage/custom_cards/custom_card_irmajavi_speedtest.md +++ b/docs/usage/custom_cards/custom_card_irmajavi_speedtest.md @@ -3,6 +3,7 @@ title: Speedtest Custom-card hide: - toc --- + # Custom-card "Speedtest" @@ -25,7 +26,7 @@ Initial release ## Requirements - Home Assistant Speedtest.net integration +Home Assistant Speedtest.net integration ## Usage @@ -87,239 +88,8 @@ variables: ## Template Code -```yaml ---- -custom_card_irmajavi_speedtest: - triggers_update: "all" - show_name: false - show_label: false - 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: "call-service" - service: "speedtestdotnet.speedtest" - color: "var(--google-grey)" - show_icon: true - show_label: false - show_name: true - styles: - custom_fields: - item1: - - justify-self: "end" - 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" - 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: "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" - tap_action: - action: "more-info" - color: "var(--google-blue)" - show_label: true - show_icon: false - name: "Download Speed" - 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: "Upload Speed" - 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" -``` +??? note "Template Code" + + ```yaml title="custom_card_irmajavi_speedtest.yaml" + --8<-- "custom_cards/custom_card_irmajavi_speedtest/custom_card_irmajavi_speedtest.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_irmajavi_weather.md b/docs/usage/custom_cards/custom_card_irmajavi_weather.md index 136fd5f06..1282c78fe 100644 --- a/docs/usage/custom_cards/custom_card_irmajavi_weather.md +++ b/docs/usage/custom_cards/custom_card_irmajavi_weather.md @@ -3,6 +3,7 @@ title: Weather Custom-card hide: - toc --- + ## Custom-card "Weather" @@ -28,14 +29,14 @@ Initial release In your `configuration.yaml` you need to create a new sensor in order to use the custom date format the card uses. ```yaml - - 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()] }} +- 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 @@ -140,150 +141,8 @@ variables: ## Template Code -```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" -``` +??? note "Template Code" + + ```yaml title="custom_card_irmajavi_weather.yaml" + --8<-- "custom_cards/custom_card_irmajavi_weather/custom_card_irmajavi_weather.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_media_player_sonos.md b/docs/usage/custom_cards/custom_card_media_player_sonos.md index cb0b8ba16..65192ed4d 100644 --- a/docs/usage/custom_cards/custom_card_media_player_sonos.md +++ b/docs/usage/custom_cards/custom_card_media_player_sonos.md @@ -3,6 +3,7 @@ title: Mediaplayer Sonos Custom-card hide: - toc --- + ### Media player: sonos @@ -18,7 +19,7 @@ hide: #### Example ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: card_media_player_sonos_with_controls variables: ulm_card_media_player_with_controls_name: "Slaapkamer" @@ -49,174 +50,8 @@ hide:
-
-Template code - -```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_language_variables" - label: | - [[[ - if (entity.state == 'idle'){ - return variables.ulm_off; - } - if (entity.state == 'paused'){ - return variables.ulm_paused; - } - if (entity.state == 'unavailable'){ - return variables.ulm_unavailable; - } else { - return (entity.attributes.source) + ' • ' + ( 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: - - "ulm_language_variables" - - "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: "call-service" - service: "media_player.volume_down" - service_data: - 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: "call-service" - service: "media_player.media_play_pause" - service_data: - 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: "call-service" - service: "media_player.volume_up" - service_data: - 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" +??? note "Template Code" -green_playing: - state: - - styles: - icon: - - color: "rgba(var(--color-green),1)" - img_cell: - - background-color: "rgba(var(--color-green), 0.2)" - value: "playing" -``` - -
+ ```yaml title="custom_card_media_player_sonos.yaml" + --8<-- "custom_cards/custom_card_media_player_sonos/custom_card_media_player_sonos.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_mpse_gauge.md b/docs/usage/custom_cards/custom_card_mpse_gauge.md index 86e334edf..9f23a9cc5 100644 --- a/docs/usage/custom_cards/custom_card_mpse_gauge.md +++ b/docs/usage/custom_cards/custom_card_mpse_gauge.md @@ -3,6 +3,7 @@ title: Gauge Card Custom-card hide: - toc --- + # Custom-card "Gauge" @@ -25,7 +26,7 @@ Initial release. ## Usage ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: custom_card_mpse_gauge entity: sensor.temp_office_temperature variables: @@ -62,72 +63,8 @@ Uses this card: which can be i ## Template code -```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); - } -``` +??? note "Template Code" + + ```yaml title="custom_card_mpse_gauge.yaml" + --8<-- "custom_cards/custom_card_mpse_gauge/custom_card_mpse_gauge.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_mpse_printer.md b/docs/usage/custom_cards/custom_card_mpse_printer.md index b384d05ea..4064b881f 100644 --- a/docs/usage/custom_cards/custom_card_mpse_printer.md +++ b/docs/usage/custom_cards/custom_card_mpse_printer.md @@ -3,6 +3,7 @@ title: Printer Card Custom-card hide: - toc --- + # Custom-card "Printer" @@ -37,7 +38,7 @@ Initial release adapted from a post on home assistant forum by user clemalex. ## Usage ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: custom_card_mpse_printer entity: sensor.hp_color_laser_mfp_178nw variables: @@ -98,225 +99,8 @@ On my printer i cannot get any state update, it always reports idle. I wanted to ## Template code -```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 ]]]" - 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 ]]]" - 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 ]]]" - 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 ]]]" - 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 - ]]] -``` +??? note "Template Code" + + ```yaml title="custom_card_mpse_printer.yaml" + --8<-- "custom_cards/custom_card_mpse_printer/custom_card_mpse_printer.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_mpse_thermostat.md b/docs/usage/custom_cards/custom_card_mpse_thermostat.md index d0b4b0a16..d34749e7a 100644 --- a/docs/usage/custom_cards/custom_card_mpse_thermostat.md +++ b/docs/usage/custom_cards/custom_card_mpse_thermostat.md @@ -3,6 +3,7 @@ title: Thermostat mpse Custom-card hide: - toc --- + # Custom-card "Thermostat" @@ -28,7 +29,7 @@ Initial release inspired from various posts on home assistant forum. ## Usage ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: custom_card_mpse_thermostat entity: climate.fermentation_climate_controller ``` @@ -55,128 +56,8 @@ Initial release inspired from various posts on home assistant forum. ## Template code -```yaml ---- -custom_card_mpse_thermostat: - show_name: false - show_icon: false - template: - - "icon_info_bg" - - "ulm_language_variables" - 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_language_variables" - tap_action: - action: more-info - entity: "[[[ return entity.entity_id ]]]" - name: "[[[ return entity.name ]]]" - label: >- - [[[ - var label = variables.ulm_off ; - if (entity.state =='off'){ - label = variables.ulm_off ; - }else if (entity.state == 'heat'){ - label = variables.ulm_heat ; - }else if (entity.state == 'cool'){ - label = variables.ulm_cool ; - }else{ - label = variables.ulm_idle; - } - if(entity.attributes.temperature){ - return (entity.attributes.current_temperature ) + '°' + ' • ' + label + ' (' + entity.attributes.hvac_action + ')'; - } - return label; - ]]] - 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: "call-service" - service: "climate.set_temperature" - service_data: - entity_id: "[[[ return entity.entity_id ]]]" - 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: "call-service" - service: "climate.set_temperature" - service_data: - entity_id: "[[[ return entity.entity_id ]]]" - temperature: "[[[ return entity.attributes.temperature + entity.attributes.target_temp_step ]]]" -``` +??? note "Template Code" + + ```yaml title="custom_card_mpse_thermostat.yaml" + --8<-- "custom_cards/custom_card_mpse_thermostat/custom_card_mpse_thermostat.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_mpse_wifisignal.md b/docs/usage/custom_cards/custom_card_mpse_wifisignal.md index 523b549a7..d8d1be282 100644 --- a/docs/usage/custom_cards/custom_card_mpse_wifisignal.md +++ b/docs/usage/custom_cards/custom_card_mpse_wifisignal.md @@ -3,6 +3,7 @@ title: Wifi Signal Custom-card hide: - toc --- + # Custom-card "WiFi Signal" @@ -30,7 +31,7 @@ Initial release. ## Usage ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: custom_card_mpse_wifisignal entity: sensor.wifi_julgran ``` @@ -58,28 +59,8 @@ No special cards needed. ## Template code -```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"; - ]]] -``` +??? note "Template Code" + + ```yaml title="custom_card_mpse_wifisignal.yaml" + --8<-- "custom_cards/custom_card_mpse_wifisignal/custom_card_mpse_wifisignal.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_nas.md b/docs/usage/custom_cards/custom_card_nas.md index 7ae6a88c3..153999e5c 100644 --- a/docs/usage/custom_cards/custom_card_nas.md +++ b/docs/usage/custom_cards/custom_card_nas.md @@ -3,6 +3,7 @@ title: NAS Custom-card hide: - toc --- + # Custom-card "NAS" @@ -30,7 +31,7 @@ Fix card & add Screenshot ## Usage ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: - custom_card_nas variables: @@ -74,6 +75,8 @@ n/a ## Template code +<<<<<<< Updated upstream + ```yaml --- custom_card_nas: @@ -127,3 +130,11 @@ custom_card_nas: - box-shadow: "var(--box-shadow)" - padding: "12px" ``` + +======= +??? note "Template Code" + + ```yaml title="custom_card_nas.yaml" + --8<-- "custom_cards/custom_card_nas/custom_card_nas.yaml" + ``` +>>>>>>> Stashed changes diff --git a/docs/usage/custom_cards/custom_card_nik_door.md b/docs/usage/custom_cards/custom_card_nik_door.md index 8b58c2395..259889601 100644 --- a/docs/usage/custom_cards/custom_card_nik_door.md +++ b/docs/usage/custom_cards/custom_card_nik_door.md @@ -3,6 +3,7 @@ title: Minimal Door Lock Card hide: - toc --- + # Custom-card "Minimal Door Lock" @@ -29,7 +30,8 @@ To have the Minimalist cards and custom cards installed ## Usage ```yaml -- type: 'custom:button-card' + +- type: "custom:button-card" template: custom_card_nik_door entity: sensor.nuki_blindato_door_security_state variables: @@ -72,107 +74,8 @@ To have the Minimalist cards and custom cards installed ## Template Code -```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]]]" - show_icon: false - show_name: false - show_label: false - 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" - 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 - ]]] - 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: "call-service" - service: "lock.open" - service_data: - 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: "call-service" - service: "lock.lock" - service_data: - 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)" -``` +??? note "Template Code" + + ```yaml title="custom_card_nik_door.yaml" + --8<-- "custom_cards/custom_card_nik_door/custom_card_nik_door.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_nik_nas.md b/docs/usage/custom_cards/custom_card_nik_nas.md index 2ef2922d3..412fb640f 100644 --- a/docs/usage/custom_cards/custom_card_nik_nas.md +++ b/docs/usage/custom_cards/custom_card_nik_nas.md @@ -3,6 +3,7 @@ title: Nas Summary Card hide: - toc --- + # Custom-card "Nas Summary Card" @@ -127,283 +128,8 @@ To have the Minimalist cards and custom cards installed ## Template Code -```yaml ---- -custom_card_nik_nas: - 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 ]]]" - icon: "[[[ return variables.entity_1.icon ]]]" - name: "[[[ return variables.entity_1.name ]]]" - template: "card_generic_swap" - 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)`;]]]" - 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 ]]]" - icon: "[[[ return variables.entity_2.icon ]]]" - name: "[[[ return variables.entity_2.name ]]]" - template: "card_generic_swap" - 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)`;]]]" - 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 ]]]" - icon: "[[[ return variables.entity_3.icon ]]]" - name: "[[[ return variables.entity_3.name ]]]" - template: "card_generic_swap" - 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)`;]]]" - 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]]]" - icon: "mdi:nas" - name: "[[[ return variables.ulm_translation_status ]]]" - styles: - card: - - background-color: "transparent" - - box-shadow: "none" - - border: "2px solid var(--google-grey)" - tap_action: - action: "more-info" +??? note "Template Code" - - type: "custom:button-card" - template: "card_generic_swap" - entity: "[[[ return variables.entity_4.entity_id ]]]" - icon: "[[[ return variables.entity_4.icon ]]]" - name: "[[[ return variables.entity_4.name ]]]" - styles: - card: - - background-color: "transparent" - - box-shadow: "none" - - border: "2px solid var(--google-grey)" - 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)`;]]]" - tap_action: - action: "none" - item5: - card: - type: "custom:button-card" - template: "card_input_boolean" - entity: "[[[ return entity.entity_id]]]" - icon: "mdi:nas" - name: "[[[ return variables.ulm_translation_status ]]]" - 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 ]]]" -``` + ```yaml title="custom_card_nik_nas.yaml" + --8<-- "custom_cards/custom_card_nik_nas/custom_card_nik_nas.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_paddy_dwd_pollen.md b/docs/usage/custom_cards/custom_card_paddy_dwd_pollen.md index 115d666f1..26e672c61 100644 --- a/docs/usage/custom_cards/custom_card_paddy_dwd_pollen.md +++ b/docs/usage/custom_cards/custom_card_paddy_dwd_pollen.md @@ -3,6 +3,7 @@ title: DWD Pollen Custom-card hide: - toc --- + # Custom-card "DWD Pollen" @@ -26,7 +27,7 @@ Initial release ```yaml - type: custom:button-card template: - - custom_card_paddy_dwd_pollen + - custom_card_paddy_dwd_pollen entity: sensor.dwd_pollenbelastung_birke ``` @@ -36,59 +37,11 @@ n/a ## Template code -```yaml -custom_card_paddy_dwd_pollen: - template: - - card_generic_swap - - custom_card_paddy_dwd_pollen_language_variables - label: > - [[[ - if (entity.state == "6"){ - return variables.custom_card_paddy_dwd_pollen_6; - } else if (entity.state == "5"){ - return variables.custom_card_paddy_dwd_pollen_5; - } else if (entity.state == "4"){ - return variables.custom_card_paddy_dwd_pollen_4; - } else if (entity.state == "3"){ - return variables.custom_card_paddy_dwd_pollen_3; - } else if (entity.state == "2"){ - return variables.custom_card_paddy_dwd_pollen_2; - } else if (entity.state == "1"){ - return variables.custom_card_paddy_dwd_pollen_1; - } - return variables.custom_card_paddy_dwd_pollen_none; - ]]] - 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)' +??? note "Template Code" -``` + ```yaml title="custom_card_paddy_dwd_pollen.yaml" + --8<-- "custom_cards/custom_card_paddy_dwd_pollen/custom_card_paddy_dwd_pollen.yaml" + ``` ## HomeAssistant diff --git a/docs/usage/custom_cards/custom_card_paddy_waste_collection.md b/docs/usage/custom_cards/custom_card_paddy_waste_collection.md index 745560c91..5371924a7 100644 --- a/docs/usage/custom_cards/custom_card_paddy_waste_collection.md +++ b/docs/usage/custom_cards/custom_card_paddy_waste_collection.md @@ -3,6 +3,7 @@ title: Waste Collection Custom-card hide: - toc --- + # Custom-card "Waste collection" @@ -33,6 +34,7 @@ Initial release ## Requirements This card needs the following to function correctly: + @@ -65,80 +67,11 @@ This card needs the following to function correctly: ## Template code -```yaml -custom_card_paddy_waste_collection: - template: - - card_generic_swap - 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)' - 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 "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)' - 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 "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 - - background-color: > - [[[ - return "rgba(var(--color-red),1)"; - ]]] - custom_fields: - notification: > - [[[ - if (entity.state == 'unavailable' || states[entity.entity_id].attributes.daysTo == 0 || states[entity.entity_id].attributes.daysTo == 1){ - return `` - } - ]]] -``` +??? note "Template Code" + + ```yaml title="custom_card_paddy_waste_collection.yaml" + --8<-- "custom_cards/custom_card_paddy_waste_collection/custom_card_paddy_waste_collection.yaml" + ``` ## HomeAssistant @@ -156,7 +89,7 @@ sensor: name: waste_collection_paper details_format: upcoming add_days_to: true # this line is important - value_template: >- + value_template: >- {% if value.daysTo == 0 %} HEUTE {% elif value.daysTo == 1 %} diff --git a/docs/usage/custom_cards/custom_card_paddy_welcome.md b/docs/usage/custom_cards/custom_card_paddy_welcome.md index df32051fc..f9905d672 100644 --- a/docs/usage/custom_cards/custom_card_paddy_welcome.md +++ b/docs/usage/custom_cards/custom_card_paddy_welcome.md @@ -3,17 +3,18 @@ title: Welcome Custom-card hide: - toc --- + # 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] +- 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!* +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 @@ -30,6 +31,7 @@ Initial release ## Requirements This card needs the following to function correctly: +
Component / card
@@ -111,7 +113,7 @@ This card needs the following to function correctly:
Component / card
-> #### Note _welcome_with_news +> #### Note \_welcome_with_news > This card is based on [home-feed-card](https://github.com/gadgetchnnel/lovelace-home-feed-card) and needs a little different configuration in the variables. > To allow almost all entites 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: @@ -162,208 +164,11 @@ This card needs the following to function correctly: ## Template code -```yaml -custom_card_paddy_welcome: - template: - - ulm_custom_card_paddy_welcome_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 = variables.ulm_custom_card_paddy_welcome_time; - let welcome = ''; - - if (time > '18:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_evening; - } else if (time > '12:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_afternoon; - } else if (time > '05:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_morning; - } else { - welcome = variables.ulm_custom_card_paddy_welcome_hello; - } - - return welcome + ',
' + 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_custom_card_paddy_welcome_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 = variables.ulm_custom_card_paddy_welcome_time; - let welcome = ''; +??? note "Template Code" - if (time > '18:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_evening; - } else if (time > '12:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_afternoon; - } else if (time > '05:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_morning; - } else { - welcome = variables.ulm_custom_card_paddy_welcome_hello; - } - - return welcome + ',
' + 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_custom_card_paddy_welcome_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 = variables.ulm_custom_card_paddy_welcome_time; - let welcome = ''; - - if (time > '18:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_evening; - } else if (time > '12:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_afternoon; - } else if (time > '05:00'){ - welcome = variables.ulm_custom_card_paddy_welcome_morning; - } else { - welcome = variables.ulm_custom_card_paddy_welcome_hello; - } - - return welcome + ',
' + 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; - } -``` + ```yaml title="custom_card_paddy_welcome.yaml" + --8<-- "custom_cards/custom_card_paddy_welcome/custom_card_paddy_welcome.yaml" + ``` ## Custom configuration Example diff --git a/docs/usage/custom_cards/custom_card_person_info.md b/docs/usage/custom_cards/custom_card_person_info.md index 38fd13e1b..f5354019d 100644 --- a/docs/usage/custom_cards/custom_card_person_info.md +++ b/docs/usage/custom_cards/custom_card_person_info.md @@ -52,177 +52,8 @@ The `custom_card_person_info` is an extension of `card_person`. It can also show ## Template Code -```yaml ---- -card_person_info: - template: - - "icon_info_bg" - - "ulm_language_variables" - variables: - ulm_card_person_use_entity_picture: false - ulm_card_person_zone1: "" - ulm_card_person_zone2: "" - ulm_address: "" - 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: false - 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 (states[variables.ulm_card_person_driving_entity].state === "on") { - let state = states[variables.ulm_card_person_entity].state; - return `Driving - ${variables["ulm_person_state_" + state] ? variables["ulm_person_state_" + state] : state}`; - } else { - let state = states[variables.ulm_card_person_entity].state; - return variables["ulm_person_state_" + state] ? variables["ulm_person_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" +??? note "Template Code" - custom_fields: - notification: > - [[[ - if (states[variables.ulm_card_person_driving_entity].state === "on") { - var icon = 'mdi:car' - return ''; - } 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 ''; - } 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 ''; - } else { - return ''; - } - } else { - return ''; - } - ]]] - - 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 === "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 ` - - ${battery}% - `; - } - ]]] - 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 ` - - ${commute} min - `; - } - ]]] -``` + ```yaml title="custom_card_person_info.yaml" + --8<-- "custom_cards/custom_card_person_info/custom_card_person_info.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_playstation.md b/docs/usage/custom_cards/custom_card_playstation.md index fd87374b8..366ad75f3 100644 --- a/docs/usage/custom_cards/custom_card_playstation.md +++ b/docs/usage/custom_cards/custom_card_playstation.md @@ -3,6 +3,7 @@ title: PS4 Custom-card hide: - toc --- + ### Playstation @@ -16,7 +17,7 @@ hide: #### Example ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: card_ps4 entity: media_player.example ``` @@ -40,70 +41,8 @@ hide:
-
-Template code - -```yaml -card_ps4: - template: - - icon_info_bg - label: >- - [[[ if (entity.state =='unknown'){ - return "Off"; - }else if (entity.state =='standby'){ - return "En veille"; - }else{ - return "On"; - } - ]]] - 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)'; - ]]] -``` +??? note "Template Code" -
+ ```yaml title="custom_card_playstation.yaml" + --8<-- "custom_cards/custom_card_playstation/custom_card_playstation.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_qubino.md b/docs/usage/custom_cards/custom_card_qubino.md index d03faba37..30a590a14 100644 --- a/docs/usage/custom_cards/custom_card_qubino.md +++ b/docs/usage/custom_cards/custom_card_qubino.md @@ -3,6 +3,7 @@ title: Qubino Custom-card hide: - toc --- + # Custom-card "Qubino" @@ -25,11 +26,13 @@ Initial release ## Usage ```yaml + ``` ## Requirements This card needs the following to function correctly: + @@ -61,8 +64,11 @@ This card needs the following to function correctly: ## Template code -```yaml -``` +??? note "Template Code" + + ```yaml title="custom_card_qubino.yaml" + --8<-- "custom_cards/custom_card_qubino/custom_card_qubino.yaml" + ``` ## HomeAssistant @@ -73,6 +79,7 @@ This card needs the following to function correctly: ... ```yaml + ``` ## Note diff --git a/docs/usage/custom_cards/custom_card_schumijo_car.md b/docs/usage/custom_cards/custom_card_schumijo_car.md index 039fa0a0b..499963f60 100644 --- a/docs/usage/custom_cards/custom_card_schumijo_car.md +++ b/docs/usage/custom_cards/custom_card_schumijo_car.md @@ -3,6 +3,7 @@ title: Car Custom-card hide: - toc --- + # Custom-card "Car" @@ -81,168 +82,8 @@ Initial release ## Template code -```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 ''; - } else { - return ''; - } - ]]] - lock: > - [[[ - if (states[variables.ulm_card_schumijo_car_lock].state != 'locked'){ - return ''; - } else { - return ''; - } - ]]] - -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" - 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\ - \ ]]]" +??? note "Template Code" - - -``` + ```yaml title="custom_card_schumijo_car.yaml" + --8<-- "custom_cards/custom_card_schumijo_car/custom_card_schumijo_car.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_schumijo_flower.md b/docs/usage/custom_cards/custom_card_schumijo_flower.md index 826e59d4d..994a3c851 100644 --- a/docs/usage/custom_cards/custom_card_schumijo_flower.md +++ b/docs/usage/custom_cards/custom_card_schumijo_flower.md @@ -3,6 +3,7 @@ title: Flower Custom-card hide: - toc --- + # Custom-card "Flower" @@ -31,7 +32,7 @@ Updated README ## Usage ```yaml -- type: 'custom:button-card' +- type: "custom:button-card" template: card_flower variables: ulm_card_flower_entity: plant.bonsai_ficus @@ -74,105 +75,8 @@ Need [lovelace-flower-card](https://github.com/thomasloven/lovelace-flower-card) ## Template code -```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 ]]]" - 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; - } -``` +??? note "Template Code" + + ```yaml title="custom_card_schumijo_flower.yaml" + --8<-- "custom_cards/custom_card_schumijo_flower/custom_card_schumijo_flower.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_tpx01_aircondition.md b/docs/usage/custom_cards/custom_card_tpx01_aircondition.md index ac5928b4f..0439cecca 100644 --- a/docs/usage/custom_cards/custom_card_tpx01_aircondition.md +++ b/docs/usage/custom_cards/custom_card_tpx01_aircondition.md @@ -3,6 +3,7 @@ title: AirCondition Custom-card hide: - toc --- + # Custom-card "AirCondition" @@ -27,8 +28,8 @@ Initial release - type: custom:button-card template: custom_card_tpx01_aircondition_with_buttons variables: - entity: climate.livingroom - name: A/C Livingroom + entity: climate.livingroom + name: A/C Livingroom ``` ## Requirements @@ -60,193 +61,8 @@ n/a ## Template code -```yaml -custom_card_tpx01_aircondition: - template: - - ulm_language_variables - - 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: >- - [[[ - if (entity.state =='off') { - return variables.ulm_off; - } else if (entity.state =='dry') { - return variables.custom_card_tpx01_aircondition_dry; - } else if (entity.state =='heat') { - return variables.custom_card_tpx01_aircondition_heat; - } else if (entity.state =='heat_cool') { - return variables.custom_card_tpx01_aircondition_heat_cool; - } else if (entity.state =='cool') { - return variables.custom_card_tpx01_aircondition_cool; - } else if (entity.state =='fan_only') { - return variables.custom_card_tpx01_aircondition_fan_only; - } - return entity.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: null - 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: call-service - service: climate.set_hvac_mode - service_data: - entity_id: '[[[ return variables.entity ]]]' - 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: call-service - service: climate.set_hvac_mode - service_data: - entity_id: '[[[ return variables.entity ]]]' - 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: call-service - service: script.decrease_climate_temperature - service_data: - 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: call-service - service: script.increment_climate_temperature - service_data: - 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 -``` +??? note "Template Code" + + ```yaml title="custom_card_tpx01_aircondition.yaml" + --8<-- "custom_cards/custom_card_tpx01_aircondition/custom_card_tpx01_aircondition.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_card_vncntdev_device_tracer.md b/docs/usage/custom_cards/custom_card_vncntdev_device_tracer.md index 4aab0fbd0..31bd56764 100644 --- a/docs/usage/custom_cards/custom_card_vncntdev_device_tracer.md +++ b/docs/usage/custom_cards/custom_card_vncntdev_device_tracer.md @@ -3,6 +3,7 @@ title: Device Tracker Custom-card hide: - toc --- + # Custom-card "Device Tracker (Online or Offline ?)" @@ -108,46 +109,10 @@ default: "var(--google-red)" ## Template code -```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)" - tap_action: - action: "more-info" - icon: "[[[return variables.custom_card_vncntdev_device_tracker_icon]]]" - 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"; - } - ]]] - 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"; - } - ]]] - 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; - ]]] -``` +??? note "Template Code" + + ```yaml title="vncntdev_card_device_tracer.yaml" + --8<-- "custom_cards/custom_card_vncntdev_device_tracer/vncntdev_card_device_tracer.yaml" + ``` ## Note diff --git a/docs/usage/custom_cards/custom_card_water_heater.md b/docs/usage/custom_cards/custom_card_water_heater.md index 797a5dd87..68ac965a3 100644 --- a/docs/usage/custom_cards/custom_card_water_heater.md +++ b/docs/usage/custom_cards/custom_card_water_heater.md @@ -3,6 +3,7 @@ title: Water Heater Custom-card hide: - toc --- + # Custom-card "Water heater" @@ -25,11 +26,13 @@ Initial release ## Usage ```yaml + ``` ## Requirements This card needs the following to function correctly: +
Component / card
@@ -61,8 +64,11 @@ This card needs the following to function correctly: ## Template code -```yaml -``` +??? note "Template Code" + + ```yaml title="custom_card_water_heater.yaml" + --8<-- "custom_cards/custom_card_water_heater/custom_card_water_heater.yaml" + ``` ## HomeAssistant @@ -73,6 +79,7 @@ This card needs the following to function correctly: ... ```yaml + ``` ## Note diff --git a/docs/usage/custom_cards/custom_card_yagrasdemonde_lights_count.md b/docs/usage/custom_cards/custom_card_yagrasdemonde_lights_count.md index f206d0a0c..7a8116f1d 100644 --- a/docs/usage/custom_cards/custom_card_yagrasdemonde_lights_count.md +++ b/docs/usage/custom_cards/custom_card_yagrasdemonde_lights_count.md @@ -1,8 +1,9 @@ --- title: Counter Lights/Covers Card Custom-card hide: -- toc + - toc --- + # Custom-card "Counter Lights/Cover Card" @@ -32,27 +33,27 @@ This card needs sensor counting lights/covers you want: ```yaml 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 }} + - 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 @@ -124,107 +125,8 @@ For covers
Component / card
-
-Template code +??? note "Template Code" -```yaml -custom_card_yagrasdemonde_lights_count: - show_name: true - template: - - "ulm_custom_card_yagrasdemonde_lights_count_language_variables" - - "icon_only" - - "ulm_language_variables" - 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_unavailable; - } - ]]] - 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)' ]]]" -``` - -
+ ```yaml title="custom_card_yagrasdemonde_lights_count.yaml" + --8<-- "custom_cards/custom_card_yagrasdemonde_lights_count/custom_card_yagrasdemonde_lights_count.yaml" + ``` diff --git a/docs/usage/custom_cards/custom_chip_myenedis.md b/docs/usage/custom_cards/custom_chip_myenedis.md index 30a45951e..83858a23d 100644 --- a/docs/usage/custom_cards/custom_chip_myenedis.md +++ b/docs/usage/custom_cards/custom_chip_myenedis.md @@ -55,29 +55,8 @@ Initial release ## Template code -```yaml ---- ---- -### Chip My Enedis ### -custom_chip_myenedis: - template: - - "chips" - - "ulm_language_variables" - 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_HC).toFixed(1) + " " + variables.ulm_chip_unit_of_measurement; - result += " 🌑 " + parseFloat(entity.attributes.yesterday_HP).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; - ]]] -``` +??? note "Template Code" + + ```yaml title="custom_chip_myenedis.yaml" + --8<-- "custom_cards/custom_chip_myenedis/custom_chip_myenedis.yaml" + ```