HA Jule-tip #12: Picture elements

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, som ikke kræver installation af yderligere komponenter…

Jeg bruger selv picture elements kortet en del på mine dashboards.

Her er et par eksempler på min brug:

Sådan gør du

Her får du en kort introduktion og nogle tips til, hvordan du kan bruge picture elements kortet på dit dashboard.

Vælg baggrundsbillede

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 og som tydeligt illustrerer hvilke data, kortet viser.

Sørg også for, at billedet har steder med en ensartet baggrund, hvor du kan placere dine data.

Vælg og indsæt elementer

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

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

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

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.

Du kan herudover bruge CSS styles til at vælge tekststørrelse, farve og meget andet.

Lav YAML kode

Picture elements kortet kan desværre ikke redigeres via GUI, så her skal vi bruge YAML kode.

Dette eksempel viser et enkelt element med antallet af dage indtil juleaften:

Ovenstående kort er lavet med følgende kode og brug af den sensor, som blev oprettet i juletip #2:

type: picture-elements
elements:
  - type: state-label
    entity: sensor.anniversary_juleaften
    style:
      top: 7%
      left: 50%
      color: white
      font-size: 20pt
    prefix: 'Der er '
    suffix: ' til juleaften'
image: >-
  https://aktiviteterforborn.dk/wp-content/uploads/2020/09/hvor-laenge-er-der-til-juleaften.jpg

For yderligere inspiration til og eksempler på kode, kan du finde koden til de forskellige picture elements kort på mine dashboards her:

• Menulinje på mobil
• Status for opladning af bil
• Plantegning med ikoner
• Robot plæneklipper

Du skal være opmærksom på, at kortene er optimeret til visning på mine enheder (enten mobil eller tablets) og derfor kan se anderledes ud på en anden type af skærm eller skærmopløsning.

TIP
Du kan bruge developer tools (F12) i din browser til at efterligne skærmstørrelsen på din telefon eller tablet, så du ikke behøver at sidde og teste med dem i nærheden.

Hvis du ikke kender skærmopløsningen på din mobil eller tablet, kan du på din enhed gå ind på siden http://whatismyscreenresolution.net og notere skærmopløsningen. Herefter kan du i developer tools i en browser på din PC oprette et nyt device, som passer med skærmopløsningen på din mobil eller tablet og teste udseendet på dit dashboard.