diff --git a/source/_components/cover.template.markdown b/source/_components/cover.template.markdown index b989a7f526f..6234334c082 100644 --- a/source/_components/cover.template.markdown +++ b/source/_components/cover.template.markdown @@ -251,3 +251,69 @@ automation: position: 25 ``` {% endraw %} + +### {% linkable_title Change The Icon %} + +This example shows how to change the icon based on the cover state. + +{% raw %} +```yaml +cover: + - platform: template + covers: + cover_group: + friendly_name: "Cover Group" + open_cover: + service: script.cover_group + data: + modus: 'open' + close_cover: + service: script.cover_group + data: + modus: 'close' + stop_cover: + service: script.cover_group + data: + modus: 'stop' + value_template: "{{is_state('sensor.cover_group', 'open')}}" + icon_template: >- + {% if is_state('sensor.cover_group', 'open') %} + mdi:window-open + {% else %} + mdi:window-closed + {% endif %} +``` +{% endraw %} + +### {% linkable_title Change The Entity Picture %} + +This example shows how to change the entity picture based on the cover state. + +{% raw %} +```yaml +cover: + - platform: template + covers: + cover_group: + friendly_name: "Cover Group" + open_cover: + service: script.cover_group + data: + modus: 'open' + close_cover: + service: script.cover_group + data: + modus: 'close' + stop_cover: + service: script.cover_group + data: + modus: 'stop' + value_template: "{{is_state('sensor.cover_group', 'open')}}" + icon_template: >- + {% if is_state('sensor.cover_group', 'open') %} + /local/cover-open.png + {% else %} + /local/cover-closed.png + {% endif %} +``` +{% endraw %} diff --git a/source/_components/light.template.markdown b/source/_components/light.template.markdown index 9c34a22cf3b..69f0315c940 100755 --- a/source/_components/light.template.markdown +++ b/source/_components/light.template.markdown @@ -143,3 +143,91 @@ light: {% endif %} ``` {% endraw %} + +### {% linkable_title Change The Icon %} + +This example shows how to change the icon based on the light state. + +{% raw %} +```yaml +light: + - platform: template + lights: + theater_volume: + friendly_name: "Receiver Volume" + value_template: >- + {% if is_state('media_player.receiver', 'on') %} + {% if states.media_player.receiver.attributes.is_volume_muted %} + off + {% else %} + on + {% endif %} + {% else %} + off + {% endif %} + icon_template: >- + {% if is_state('media_player.receiver', 'on') %} + {% if states.media_player.receiver.attributes.is_volume_muted %} + mdi:lightbulb-off + {% else %} + mdi:lightbulb-on + {% endif %} + {% else %} + mdi:lightbulb-off + {% endif %} + turn_on: + service: media_player.volume_mute + data: + entity_id: media_player.receiver + is_volume_muted: false + turn_off: + service: media_player.volume_mute + data: + entity_id: media_player.receiver + is_volume_muted: true +``` +{% endraw %} + +### {% linkable_title Change The Entity Picture %} + +This example shows how to change the entity picture based on the light state. + +{% raw %} +```yaml +light: + - platform: template + lights: + theater_volume: + friendly_name: "Receiver Volume" + value_template: >- + {% if is_state('media_player.receiver', 'on') %} + {% if states.media_player.receiver.attributes.is_volume_muted %} + off + {% else %} + on + {% endif %} + {% else %} + off + {% endif %} + icon_template: >- + {% if is_state('media_player.receiver', 'on') %} + {% if states.media_player.receiver.attributes.is_volume_muted %} + /local/lightbulb-off.png + {% else %} + /local/lightbulb-on.png + {% endif %} + {% else %} + /local/lightbulb-off.png + {% endif %} + turn_on: + service: media_player.volume_mute + data: + entity_id: media_player.receiver + is_volume_muted: false + turn_off: + service: media_player.volume_mute + data: + entity_id: media_player.receiver + is_volume_muted: true +``` +{% endraw %} diff --git a/source/_components/sensor.template.markdown b/source/_components/sensor.template.markdown index 8fd23fc5198..0811978b617 100644 --- a/source/_components/sensor.template.markdown +++ b/source/_components/sensor.template.markdown @@ -61,6 +61,10 @@ sensor: description: Defines a template for the icon of the sensor. required: false type: template + icon_template: + description: Defines a template for the entity picture of the sensor. + required: false + type: template {% endconfiguration %} ## {% linkable_title Considerations %} @@ -215,3 +219,29 @@ sensor: {% endif %} ``` {% endraw %} + +### {% linkable_title Change The Entity Picture %} + +This example shows how to change the entity picture based on the day/night cycle. + +{% raw %} +```yaml +sensor: + - platform: template + sensors: + day_night: + friendly_name: "Day/Night" + value_template: >- + {% if is_state('sun.sun', 'above_horizon') %} + Day + {% else %} + Night + {% endif %} + entity_picture_template: >- + {% if is_state('sun.sun', 'above_horizon') %} + /local/daytime.png + {% else %} + /local/nighttime.png + {% endif %} +``` +{% endraw %} diff --git a/source/_components/switch.template.markdown b/source/_components/switch.template.markdown index 2b34c3d4503..93880fe6f65 100644 --- a/source/_components/switch.template.markdown +++ b/source/_components/switch.template.markdown @@ -186,3 +186,31 @@ switch: {% endif %} ``` {% endraw %} + +### {% linkable_title Change The Entity Picture %} + +This example shows how to change the entity picture based on the day/night cycle. + +{% raw %} +```yaml +switch: + - platform: template + switches: + garage: + value_template: "{{ is_state('cover.garage_door', 'on') }}" + turn_on: + service: cover.open_cover + data: + entity_id: cover.garage_door + turn_off: + service: cover.close_cover + data: + entity_id: cover.garage_door + entity_picture_template: >- + {% if is_state('cover.garage_door', 'open') %} + /local/garage-open.png + {% else %} + /local/garage-closed.png + {% endif %} +``` +{% endraw %}