{"id":3992,"date":"2023-05-18T17:35:10","date_gmt":"2023-05-18T15:35:10","guid":{"rendered":"https:\/\/www.sigalou-domotique.fr\/?p=3992"},"modified":"2026-01-02T17:01:55","modified_gmt":"2026-01-02T15:01:55","slug":"des-cartes-ne-sintegrent-pas-dans-une-carte-picture-elements","status":"publish","type":"post","link":"https:\/\/www.sigalou-domotique.fr\/en\/des-cartes-ne-sintegrent-pas-dans-une-carte-picture-elements","title":{"rendered":"Cards do not fit into a picture-elements card"},"content":{"rendered":"<p>Picture-element maps are particularly useful for locating maps on a dashboard such as a house plan.<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-3993\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements.png\" alt=\"\" width=\"317\" height=\"218\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements.png 1055w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements-600x413.png 600w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements-300x206.png 300w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements-1024x705.png 1024w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements-768x529.png 768w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/p>\r\n<p><a href=\"https:\/\/www.home-assistant.io\/dashboards\/picture-elements\/\" target=\"_blank\" rel=\"noopener\">Documentation<\/a> explains their use.<!--more--><\/p>\r\n<p>I was regularly blocked to add some cards that did not fit into the <strong>elements<\/strong> of the card <strong>picture-elements.<\/strong><\/p>\r\n<h3>Example of a graph<\/h3>\r\n<p>For example, a simple graph:<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone  wp-image-3994\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements2.png\" alt=\"\" width=\"312\" height=\"204\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements2.png 508w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements2-300x196.png 300w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/><\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">type: history-graph title: Temperature outside hours_to _show: 72 show_names: false entities: - entity: sensor.temperature_external _sud _temperature\r\n<\/pre>\r\n<h3>Raw integration in picture-elements<\/h3>\r\n<p>If I include this card, with this code:<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">type: picture-elements image: \/local\/house\/1920x1000\/transparent.png elements: - type: history-graph title: Temperature outside hours_to _show: 72 show_names: false entities: - entity: sensor.temperature _external _sud _temperature style: top: 50% left: 50%<\/pre>\r\n<p>The result is as follows: \ud83d\ude22\ud83d\ude22\ud83d\ude22\ud83d\ude22<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3997\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements3.png\" alt=\"\" width=\"506\" height=\"261\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements3.png 506w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements3-300x155.png 300w\" sizes=\"auto, (max-width: 506px) 100vw, 506px\" \/><\/p>\r\n<h3>Integration via a custom:mod-card<\/h3>\r\n<p>If I integrate the graphic into a custom:mod-card and then into a picture-elements itself, here is the code:<\/p>\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">type: picture-elements image: \/local\/house\/1920x1000\/transparent.png elements: - type: custom:mod-card card: type: history-graph title: Temperature outside hours_to _show: 72 show_names: false entities: - entity: sensor.temperature _external _sud _temperature style: top: 50% left: 50%<\/pre>\r\n<p>Result:<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-3998\" src=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements4.png\" alt=\"\" width=\"416\" height=\"252\" srcset=\"https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements4.png 416w, https:\/\/www.sigalou-domotique.fr\/wp-content\/uploads\/2023\/05\/picture-elements4-300x182.png 300w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/p>\r\n<p>Mission accomplished. \ud83d\udc4d\ud83d\udc4d\ud83d\udc4d\ud83d\udc4d<\/p>\r\n<h3>Other cards?<\/h3>\r\n<p>Other cards should make it possible to do the same thing as mod-card, to be tested.<\/p>\r\n<p>May be with <span class=\"pl-s\">custom:stack-in-card<\/span><\/p>\r\n<p>&nbsp;<\/p>\r\n<p>&nbsp;<\/p>\r\n<ul>\r\n<li>Thanks to <a class=\"\" href=\"https:\/\/forum.hacf.fr\/u\/WarC0zes\" data-user-card=\"WarC0zes\">WarC0zes<\/a> and <a class=\"\" href=\"https:\/\/forum.hacf.fr\/u\/Pulpy-Luke\" data-user-card=\"Pulpy-Luke\">Pulpy-Luke<\/a> for this combination\u00a0<\/li>\r\n<li>A question? ask there on <a href=\"https:\/\/forum.hacf.fr\/t\/une-carte-gauge-dans-une-vue-panneau-avec-une-carte-picture-elements\/23586\/1\" target=\"_blank\" rel=\"noopener\">this discussion<\/a><\/li>\r\n<\/ul>\r\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Picture-elements maps are particularly useful for locating maps on a dashboard such as a house plan. The documentation explains their use.<\/p>","protected":false},"author":1,"featured_media":3997,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,53,166],"tags":[81],"class_list":["post-3992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-domotique","category-home-assistant","category-retex","tag-developpement"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts\/3992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/comments?post=3992"}],"version-history":[{"count":0,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/posts\/3992\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/media\/3997"}],"wp:attachment":[{"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/media?parent=3992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/categories?post=3992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sigalou-domotique.fr\/en\/wp-json\/wp\/v2\/tags?post=3992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}