Symboler

Alle Symboler kan brukes på ulike steder i visualiseringen. Det er mulig å definere disse som variabler eller tekst.

For å vise et symbol i visualiseringen, deklareres dette ved hjelp av taggen [icon:SYMBOLPFAD] direkte i teksten. Symbolbanen kan kopieres fra symbolbiblioteket med høyreklikk eller CTRL+C. Hvis mulig, bør bare Material Symbols velges for å opprettholde visualiseringsstilen.

Symbolbibliotek

Alle tilgjengelige symboler kan hentes og søkes under kontekstmenyen Visualisering ▸ Symboler. Det er også mulig å importere en egen symbolsett i biblioteket. Prosedyren forklares senere.

Notater: Navnet som vises på symboletten er ikke identisk med symbolbanen. Hvis ingen symbolsett angis i banen, brukes Glyphicons automatisk.

Filteret i symbolbiblioteket søker også etter de lagrede taggene. Hvis dette oppførselen ikke ønskes, kan filteret begynne med et = for å bare søke i navnene.

Symbolsett Material Symbols (Standard)

Dette symbolsettet er helt dynamisk, og symbolenes stil konfigureres automatisk i henhold til visualiseringsdesignet. I tillegg brukes et fylt symbol automatisk når symbolet skal være aktivt. Ikke alle symboler har imidlertid en fylt variant.

Symbolene avrundes automatisk hvis knapperadius er større eller lik 16 piksler. Hvis radius er lik 0px, brukes skarpe symboler. I editoren vises imidlertid alltid de normale symbolene.

Notat: Det anbefales å bruke symbolsettet "Material Symbols" for å gjøre visualiseringen enhetlig.

Symbolsett Material Animated

Det finnes utvalgte symboler fra Material Symbols som er animert for å representere verdier. Disse symbolene har bare en animasjon med symbolet i strukturen. Ved valg frigjøres flere variabler.

Symbolsett Philips Hue

Symbolene fra Philips Hue kan brukes fritt hvis Hue-grensesnittet brukes. I tillegg finnes det et ekstra Hue-symbolsett fra Home Assistant HASS-communityen. Mer informasjon finner du i slutten av dette kapitlet.

Symbolsett Vær

Dette symbolsettet viser vær-symbolene i visualiseringen. Disse støttes jevnt av ulike grensesnitt. Se det underliggende kapitlet Vær-Ikoner.

Symbolsett Legacy (foreldet)

Det Legacy-symbolsettet inneholder alle symbolene fra den gamle visualiseringen. Visningsstilen for det nye grensesnittet forblir lik. Symbolene bør ikke lenger brukes, da de ikke er optimalisert for det nye grensesnittet.

Diverse gamle symboler er fortsatt animert:

  • legacy/door
  • legacy/door_2
  • legacy/lock
  • legacy/shutter
  • legacy/shutter_blinds
  • legacy/window
  • legacy/window_tilt

Skjulte Symboler

Det finnes også skjulte symboler for visualiseringen. Disse forklares nærmere i de følgende kapitlene.

For å hente symbolene er bare et URL-prefiks nødvendig.

Egne Symbolsett

Det er mulig å importere et eget symbolsett i prosjektet. Hvert symbolsett må forberedes som en ZIP-fil. Noen eksempeldata kan lastes ned her:

Pro-Tipp: Etter vellykket import kan du eksportere symbolsettet som .antobj for å forenkle importen. Klikk med høyre museknapp på et symbolsett og velg Eksporter.

De følgende reglene definerer oppbygningen og kravene til et symbolsett. Vennligst les disse nøye gjennom og følg dem presist.

Regler

  • Prefiks
    • Kan bare inneholde _, a–z og 0–9.
    • Store bokstaver konverteres automatisk til små bokstaver.
    • Reserverte navn som sys, src eller doc er ugyldige.
    • Må begynne med en bokstav (a–z). Bare tall er ikke tillatt.
    • Etterfølgende understreker (_) fjernes.
    • Må være minst 3 tegn langt.
    • Flere understreker (__) reduseres til en enkelt.
  • Symbolnavn
    • Konverteres automatisk til små bokstaver.
    • Tillatte tegn er -, _, a–z og 0–9.
    • For lange navn og prefikser bør unngås.
    • Et prefiks må være entydig og bør bare brukes én gang.
    • Hvis et symbol har samme navn og prefiks som et systemsymbol, kan det erstatte dette.
  • Filbegrensninger
    • Maksimal filstørrelse etter rengjøring: 10 kB. Større filer avvises.
    • SVG-filer må være rengjort:
      • Linjeskift fjernes automatisk.
      • Følgende elementer slettes: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • Følgende attributter slettes: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Ikoner med innbakte skript, bilder, CSS eller eksterne ressurser avvises.
      • Hvis stiler inneholder farger eller stilblokker, kan importen også avvises.
  • SVG-header-krav
    • Må inneholde: viewBox, width og height. Manglende verdier suppleres automatisk hvis mulig.
    • Må inneholde namespace: xmlns="http://www.w3.org/2000/svg". Hvis den mangler eller er feilaktig, suppleres den automatisk.
    • Ikonnavnet må passe nøyaktig med dimensjonene, ellers avvises ikonet.
    • Dimensjonene må være kvadratiske (Bredde = Høyde). Standard: 24px.
    • Motstridende stiler eller upassende dimensjoner bør unngås.
  • Generelt
    • Dårlig konstruerte ikoner kan sterkt senke ytelsen eller gjøre den feilaktig.
    • Vær sikker på å ta hensyn til opphavsrettighetene til symbolene.
    • Alle vektorer avrundes til tre desimaler.

Struktur

  • Fil iconset.ini er obligatorisk for å oppdage symbolsettet.
    • Den kan ligge i rotkatalogen til ZIP-filen eller i en underkatalog.
    • Må være i små bokstaver (iconset.ini).
    • Symbolfilnavn er ikke case-sensitive.
  • Importen søker ikke automatisk etter SVG-filer.
    • Ikonkatalogen må defineres eksplisitt i iconset.ini (stor-/små bokstaver).
    • I ZIP-filmalen er en katalog kalt icons/ definert.
  • Underkataloger
    • Underkataloger i den definerte katalogen (icons/) brukes som kategorier.
    • Symbolnavn må være unike over alle kategorier.
    • Navneregler i ikonkatalogen:
      • Minimum: Bare dimensjon og filendelse (f.eks. 24.svg).
      • Varianter som filled24.svg eller round_filled_24.svg er gyldige.
      • Filnavn med flere tall (f.eks. 24_48.svg) er ugyldige.
      • Style-varianter oppdages ved:
        • Fylt: Må inneholde filled eller fill.
        • Rund: Må inneholde round.
        • Skarpt: Må inneholde sharp.
        • Rund og skarpt kan ikke kombineres.
      • Hvis flere regler gjelder, brukes den siste oppdagede filen (valget kan virke tilfeldig).
  • Ytterligere regler
    • Ingen nøstede under-underkataloger søkes gjennom (disse kan brukes for backup eller originaler).
    • Filer uten .svg ignoreres.
    • I en ikonkatalog kan det ligge en fil kalt tags.txt for å legge til ekstra tagger for søk.
      • Tagger kan separeres med ,, ; eller Linjeskift.

Spesielle Symbolsett

Det finnes også ulike spesielle symbolsett som kan importeres på samme måte som egne symbolsett, men som ikke trenger å konfigureres etter de ovennevnte kravene.

Hass Hue Icons

En av dem er fra Gibhub-siden hass-hue-icons. Dette er et ekstra Hue-symbolsett fra Home Assistant HASS-communityen og kan bare brukes for ikke-kommersielle prosjekter, da det står under Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International-lisensen. Derfor leveres ikke symbolsettet med Antcas Control. Symbolene kan imidlertid importeres som et nytt symbolsett i prosjektet når som helst med ZIP-filen hass-hue-icons-main.zip. Vær oppmerksom på lisensvilkårene for prosjektet på Github-nettstedet.

Kilde: https://github.com/arallsopp/hass-hue-icons.

Material Design Icons fra Pictogrammers

En annen er fra Pictogrammers. For dette må filen mdi-###.json pakkes inn i en ZIP-fil og importeres. Filen kan lokaliseres og lastes ned i nettleserens utviklerkonsoll. Det forsøkes å kombinere outline-symbolene med de fylte. Biblioteket er nesten likt Material Symbols. Imidlertid finnes det mange community-utvidelser. Hvis du ønsker å integrere andre symbolsett i biblioteket, kan du gjerne spørre oss.

Kilde: https://pictogrammers.com/library/mdi/

Underordnede sider