{"id":562,"date":"2022-06-19T21:18:06","date_gmt":"2022-06-19T21:18:06","guid":{"rendered":"https:\/\/carson.fenimorefamily.com\/?p=562"},"modified":"2022-06-19T21:42:55","modified_gmt":"2022-06-19T21:42:55","slug":"home-assistant-dynamic-entity-lists-with-entity-dependent-style","status":"publish","type":"post","link":"https:\/\/carson.fenimorefamily.com\/?p=562","title":{"rendered":"Home Assistant Dynamic Entity Lists with Entity-Dependent Style"},"content":{"rendered":"\n<p>Home assistant is very powerful &#8211; possessing a great deal of flexibility both in terms of what can be monitored and how the monitored state is displayed.  Much of the display flexibility comes through a combination of the Jinja templating engine and custom components.  <\/p>\n\n\n\n<p>Here is one example of this flexibility in action:  display a dynamic list of sensors, coloring the status LED differently depending on the sensor state.  Or more specifically: the ping status for a set of devices &#8211; in this case the ping status of all my raspberry pi cameras.<\/p>\n\n\n\n<p>To display a dynamic list of sensors I first helped myself by giving my devices a consistent name prefix &#8211; e.g. &#8220;pi-cam-X&#8221; where X is the instance.  I then installed the wonderful <a href=\"https:\/\/github.com\/thomasloven\/lovelace-auto-entities\" data-type=\"URL\" data-id=\"https:\/\/github.com\/thomasloven\/lovelace-auto-entities\">auto-entities<\/a> plugin and specified an inclusion filter of &#8220;\/pi-cam\/&#8221;<\/p>\n\n\n\n<p>Next to perform the styling I download the <a href=\"https:\/\/github.com\/thomasloven\/lovelace-template-entity-row\">template-entity-row<\/a> plugin &#8211; which allows applying a template to each entity row.  The card yaml is actually fairly compact and readable:<\/p>\n\n\n<pre class=\"brush: yaml; highlight: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]; title: ; notranslate\" title=\"\">\ntype: custom:auto-entities\ncard:\n  type: entities\nfilter:\n  include:\n    - name: \/pi-cam\/\n      options:\n        style: |\n          :host {\n            --card-mod-icon-color: {{ 'rgb(221,54,58)' if is_state('this.entity_id','off')  else 'rgb(67,212,58)' }};\n          }\n        type: custom:template-entity-row\n        icon: mdi:circle\n        state: &gt;-\n          {% if is_state('this.entity_id','off') %} Down {% else  %} Up {% endif %}\n\n<\/pre>\n\n\n<p>To be honest it took way longer to accept that this kind of flexibility was not available out of the box &#8211; it is too bad some of these add-ons are not just core to HA as they seem like core functionality.<\/p>\n\n\n\n<p>The &#8220;out of the box&#8221; display is on the left.  The ostensibly-improved status is on the right.  Note that in truth i dont see a huge need for displaying textually what the red\/green LED shows, however I much prefer &#8220;Up\/Down&#8221; to &#8220;Connected\/Disconnected&#8221;..<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.26.50-PM-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"921\" height=\"1024\" data-id=\"567\" src=\"https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.26.50-PM-1-921x1024.png\" alt=\"\" class=\"wp-image-567\" srcset=\"https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.26.50-PM-1-921x1024.png 921w, https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.26.50-PM-1-270x300.png 270w, https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.26.50-PM-1-768x854.png 768w, https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.26.50-PM-1.png 1024w\" sizes=\"auto, (max-width: 921px) 100vw, 921px\" \/><\/a><figcaption>Ping Status Without Customization<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.36.51-PM-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"925\" height=\"1024\" data-id=\"568\" src=\"https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.36.51-PM-1-925x1024.png\" alt=\"\" class=\"wp-image-568\" srcset=\"https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.36.51-PM-1-925x1024.png 925w, https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.36.51-PM-1-271x300.png 271w, https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.36.51-PM-1-768x850.png 768w, https:\/\/carson.fenimorefamily.com\/wp-content\/uploads\/2022\/06\/Screen-Shot-2022-06-19-at-3.36.51-PM-1.png 1006w\" sizes=\"auto, (max-width: 925px) 100vw, 925px\" \/><\/a><figcaption>Much Improved!<\/figcaption><\/figure>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Home assistant is very powerful &#8211; possessing a great deal of flexibility both in terms of what can be monitored and how the monitored state is displayed. Much of the display flexibility comes through a combination of the Jinja templating engine and custom components. Here is one example of this flexibility in action: display a &hellip; <a href=\"https:\/\/carson.fenimorefamily.com\/?p=562\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Home Assistant Dynamic Entity Lists with Entity-Dependent Style<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-562","post","type-post","status-publish","format-standard","hentry","category-homeassistant"],"_links":{"self":[{"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=\/wp\/v2\/posts\/562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=562"}],"version-history":[{"count":3,"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=\/wp\/v2\/posts\/562\/revisions"}],"predecessor-version":[{"id":570,"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=\/wp\/v2\/posts\/562\/revisions\/570"}],"wp:attachment":[{"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carson.fenimorefamily.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}