{"id":2184,"date":"2022-12-12T00:01:00","date_gmt":"2022-12-11T23:01:00","guid":{"rendered":"https:\/\/smart-home-guide.dk\/?p=2184"},"modified":"2023-01-09T12:44:01","modified_gmt":"2023-01-09T11:44:01","slug":"ha-jule-tip-12-picture-element","status":"publish","type":"post","link":"https:\/\/smart-home-guide.dk\/index.php\/2022\/12\/12\/ha-jule-tip-12-picture-element\/","title":{"rendered":"HA Jule-tip #12: Picture elements"},"content":{"rendered":"

Dagens Jule-tip handler om at bruge Picture elements kortet til at vise data på en baggrund med et billede. Kortet giver næsten ubegrænsede muligheder for at præsentere data på en lækker og overskuelig måde. Og så er det endda et standard kort<\/a>, som ikke kræver installation af yderligere komponenter…<\/p>\n\n\n\n

Jeg bruger selv picture elements<\/a> kortet en del på mine dashboards<\/a>.<\/p>\n\n\n\n

Her er et par eksempler på min brug:<\/p>\n\n\n\n

\"\"
Header på mobil og status på opladning af bil<\/figcaption><\/figure>\n\n\n\n
\"\"
Plantegning med styring af lys mv.<\/figcaption><\/figure>\n\n\n\n
\"\"
Info om og kontrol af robotplæneklipper<\/figcaption><\/figure>\n\n\n\n

Sådan gør du<\/h2>\n\n\n\n

Her får du en kort<\/a> introduktion og nogle tips til, hvordan du kan bruge picture elements kortet på dit dashboard<\/a>.<\/p>\n\n\n\n

Vælg baggrundsbillede<\/h3>\n\n\n\n

Du skal starte med at vælge et billede, som du kan bruge som baggrund. Vælg et billede, der passer ind i stilen på resten af dit dashboard<\/a> og som tydeligt illustrerer hvilke data, kortet viser.<\/p>\n\n\n\n

Sørg også for, at billedet har steder med en ensartet baggrund, hvor du kan placere dine data.<\/p>\n\n\n\n

Vælg og indsæt elementer<\/h3>\n\n\n\n

Picture elements kortet giver mulighed for at indsætte en masse forskellige elementer på det valgte baggrundsbillede.<\/p>\n\n\n\n

Jeg bruger primært en kombination af ikoner (state-icon<\/a>) og tekst (state-label<\/a>) elementer. Men det er også muligt at indsætte billeder<\/a> og faktisk også elementer. Sidstnævnte har jeg brugt til batterivisningen på min bil, hvor der er brugt et custom:bar-card<\/a>.<\/p>\n\n\n\n

Alle elementer skal placeres på baggrundsbilledet ved at angive en position, der typisk angives som afstanden fra henholdsvis toppen og venstre side af billedet.<\/p>\n\n\n\n

Du kan enten angive den relative placering eller en absolut placering. Du kan angive placeringen ved at angive enten antal pixels (px) eller den procentvise andel (%), som element skal indrykkes. Det vil ofte være nødvendigt at prøve sig frem indtil man finder den rigtige placering. Husk også at der kan være forskel på om kortet vises på en mobil, tablet eller PC. Læs evt. mere om positionering på W3 Schools<\/a>.<\/p>\n\n\n\n

Du kan herudover bruge CSS styles<\/a> til at vælge tekststørrelse, farve og meget andet.<\/p>\n\n\n\n

Lav YAML<\/a> kode<\/h3>\n\n\n\n

Picture elements kortet kan desværre ikke redigeres via GUI, så her skal vi bruge YAML kode<\/a>.<\/p>\n\n\n\n

Dette eksempel viser et enkelt element med antallet af dage indtil juleaften:<\/p>\n\n\n\n

\"\"
Picture elements kort<\/a> med visning af antal dage til juleaften<\/figcaption><\/figure>\n\n\n\n

Ovenstående kort<\/a> er lavet med følgende kode og brug af den sensor, som blev oprettet i juletip #2<\/a>:<\/p>\n\n\n\n

type: picture-elements\nelements:\n  - type: state-label\n    entity: sensor.anniversary_juleaften\n    style:\n      top: 7%\n      left: 50%\n      color: white\n      font-size: 20pt\n    prefix: 'Der er '\n    suffix: ' til juleaften'\nimage: >-\n  https:\/\/aktiviteterforborn.dk\/wp-content\/uploads\/2020\/09\/hvor-laenge-er-der-til-juleaften.jpg<\/code><\/pre>\n\n\n\n
For yderligere inspiration til og eksempler på kode,  kan du finde koden til de forskellige picture elements kort<\/a> på mine dashboards her:<\/p>\n\n\n\n