{"id":13275,"date":"2021-03-19T09:09:02","date_gmt":"2021-03-19T09:09:02","guid":{"rendered":"https:\/\/www.rjt.org.uk\/home\/?post_type=home_assistant_tip&#038;p=13275"},"modified":"2021-03-19T11:50:39","modified_gmt":"2021-03-19T11:50:39","slug":"creating-a-template-entity-with-dynamic-icon","status":"publish","type":"home_assistant_tip","link":"https:\/\/www.rjt.org.uk\/home\/archives\/home-assistant-tip\/creating-a-template-entity-with-dynamic-icon\/","title":{"rendered":"Creating a template entity with dynamic icon"},"content":{"rendered":"<p>This example is based on the two battery entities provided by the HA App for Android.<br \/>\nThe value is simply set to the battery level and the icon is computed based on if the phone is on charge or discharging and the battery level.<\/p>\n<p>It also sets two attributes.  <\/p>\n<ul>\n<li>icon_color_value: the colour the icon should be<\/li>\n<li>charge_status: the value from the phones battery_state.\n<\/ul>\n<p>[cc lang=&#8221;yaml&#8221;]<br \/>\n&#8211; platform: template<br \/>\nsensors:<br \/>\n      janes_phone_status:<br \/>\n        friendly_name: Jane&#8217;s Phone status<br \/>\n        value_template: ><br \/>\n            {{states(&#8216;sensor.moto_g_6_battery_level&#8217;)}}<br \/>\n        icon_template: ><br \/>\n            {% set battery = states(&#8216;sensor.moto_g_6_battery_level&#8217;) %}<br \/>\n            {% set charging = states(&#8216;sensor.moto_g_6_battery_state&#8217;) %}<br \/>\n            {% set level = battery   | float | multiply(0.1) | round(0,&#8221;floor&#8221;) | multiply(10)| round(0) %}<br \/>\n            {% if charging == &#8216;charging&#8217; or charging == &#8216;full&#8217; %}<br \/>\n            {% set s = &#8220;charging-&#8221; %}<br \/>\n            {% endif %}<br \/>\n            mdi:battery-{{s}}{{level}}<br \/>\n        attribute_templates:<br \/>\n          charge_status: >-<br \/>\n              {{states(&#8216;sensor.moto_g_6_battery_state&#8217;)}}<br \/>\n          icon_color_value: >-<br \/>\n              {% set battery = states(&#8216;sensor.moto_g_6_battery_level&#8217;) | float %}<br \/>\n              {% if battery < 50 %}\n              {% set color = \"orange\" %}\n              {% elif battery < 20 %}\n              {% set color = \"red\" %}\n              {% else %} {% set color = \"green\" %}\n              {% endif %}\n              {{color}}\n[\/cc]\n\n\n\n<h3>Using Card Mod<\/h3>\n<p>With card mod you can colour the icon based on the icon_color_value for example<\/p>\n<p>[cc lang=&#8221;yaml&#8221;]<br \/>\ntype: entity<br \/>\nentity: sensor.janes_phone_status<br \/>\ncard_mod:<br \/>\n  style: |<br \/>\n    ha-card {<br \/>\n      &#8211;state-icon-color: {{state_attr(&#8216;sensor.janes_phone_status&#8217;,&#8217;icon_color_value&#8217;)}}<br \/>\n[\/cc]<\/p>\n<h3>Grid card With all device status<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2021\/03\/2021-03-19_114804.png\" alt=\"\" width=\"470\" height=\"247\" class=\"aligncenter size-full wp-image-13277\" srcset=\"https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2021\/03\/2021-03-19_114804.png 470w, https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2021\/03\/2021-03-19_114804-300x158.png 300w, https:\/\/www.rjt.org.uk\/home\/wp-content\/uploads\/2021\/03\/2021-03-19_114804-150x79.png 150w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><\/p>\n<p>[cc lang=&#8221;yaml&#8221;]<br \/>\ntype: grid<br \/>\ncards:<br \/>\n  &#8211; type: entity<br \/>\n    entity: sensor.janes_phone_status<br \/>\n    name: Janes&#8217;s Phone<br \/>\n    card_mod:<br \/>\n      style: |<br \/>\n        ha-card {<br \/>\n          &#8211;state-icon-color: {{state_attr(&#8216;sensor.janes_phone_status&#8217;,&#8217;icon_color_value&#8217;)}};<br \/>\n          }<br \/>\n  &#8211; type: entity<br \/>\n    entity: sensor.janes_tablet_status<br \/>\n    name: Jane&#8217;s Tablet<br \/>\n    card_mod:<br \/>\n      style: |<br \/>\n        ha-card {<br \/>\n          &#8211;state-icon-color: {{state_attr(&#8216;sensor.janes_tablet_status&#8217;,&#8217;icon_color_value&#8217;)}};<br \/>\n          }<br \/>\n  &#8211; type: entity<br \/>\n    entity: sensor.stephens_phone_status<br \/>\n    name: Stephen&#8217;s Phone<br \/>\n    card_mod:<br \/>\n      style: |<br \/>\n        ha-card {<br \/>\n          &#8211;state-icon-color: {{state_attr(&#8216;sensor.janes_phone_status&#8217;,&#8217;icon_color_value&#8217;)}};<br \/>\n          }<br \/>\ncolumns: 2<br \/>\nsquare: false<\/p>\n<p>[\/cc]<\/p>\n","protected":false},"template":"","class_list":["post-13275","home_assistant_tip","type-home_assistant_tip","status-publish","hentry","comments-off"],"_links":{"self":[{"href":"https:\/\/www.rjt.org.uk\/home\/wp-json\/wp\/v2\/home_assistant_tip\/13275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rjt.org.uk\/home\/wp-json\/wp\/v2\/home_assistant_tip"}],"about":[{"href":"https:\/\/www.rjt.org.uk\/home\/wp-json\/wp\/v2\/types\/home_assistant_tip"}],"wp:attachment":[{"href":"https:\/\/www.rjt.org.uk\/home\/wp-json\/wp\/v2\/media?parent=13275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}