Symbolit

Kaikki symbolit voidaan käyttää eri paikoissa visualisoinnissa. Näin on mahdollista määrittää nämä muuttujana tai tekstinä.

Jotta symboli tulostetaan visualisointiin, se määritellään suoraan tekstitagilla [icon:SYMBOLPFAD]. Symbolipolku voidaan kopioida oikealla hiirenpainikkeella tai CTRL+C:n avulla symbolikirjastosta. Jos mahdollista, tulisi valita vain Material Symbols -materiaali, jotta visualisoinnin tyyli pysyy yhtenäisenä.

Symbolikirjasto

Kaikki saatavilla olevat symbolit voidaan avata ja hakea kontekstivalikosta Visualisointi ▸ Symbolit. On myös mahdollista tuoda oma symbolisarja kirjastoon. Menetelmä selitetään tarkemmin alla.

Huomautukset: Symbolilistan näytettävän nimen ja symbolipolun välillä ei ole yhtäläisyyttä. Jos polussa ei määritellä symbolisarjaa, käytetään oletuksena Glyphicons-sarja.

Symbolikirjaston suodatin hakee myös tallennettuja tunnisteita. Jos tätä käyttäytymistä ei haluta, suodatin voi alkaa = -merkillä, jotta haetaan vain nimistä.

Material Symbols -symbolisarja (oletus)

Tämä symbolisarja on täysin dynaaminen, ja symbolien tyyli määritellään automaattisesti visualisoinnin suunnittelun mukaisesti. Lisäksi täytetty symboli käytetään automaattisesti, jos symboli pitää olla aktiivinen. Kaikilla symboleilla ei kuitenkaan ole täytettyä versiota.

Symbolit pyöristetään automaattisesti, jos napin säde on suurempi tai yhtä suuri kuin 16 pikseliä. Jos säde on yhtä suuri kuin 0px, käytetään teräviä symboleja. Editorissa kuitenkin näytetään aina tavalliset symbolit.

Huomautus: Suositellaan "Material Symbols" -symbolisarjan käyttöä, jotta visualisointi on yhtenäinen.

Material Animated -symbolisarja

On valittuja Material Symbols -symboleita, jotka on animoitu esittämään arvoja. Näillä symboleilla on vain yksi animaatio symbolin kanssa rakenteessa. Valintaan liittyy lisämuuttujia.

Philips Hue -symbolisarja

Philips Hue -symboleita voidaan käyttää vapaasti, jos Hue-liittymä on käytössä. Lisäksi on lisäsymbolisarja Home Assistant HASS -yhteisöltä. Lisätietoja löytyy tämän luvun lopusta.

Sää-symbolisarja

Tämä symbolisarja näyttää visualisoinnin sää-symboleita. Nämä tuetaan sujuvasti monista liittymistä. Katso alla oleva luku Sää-ikoneista.

Legacy (vanhentunut) -symbolisarja

Legacy-symbolisarja sisältää kaikki vanhan visualisoinnin symbolit. Uuden pinnan näyttötapa pysyy samana. Symboleita ei tulisi enää käyttää, koska ne eivät ole optimoitu uutta pinnalle.

Monet vanhat symbolit ovat edelleen animoituja:

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

Piilotetut symbolit

On myös piilotettuja symboleita visualisoinnille. Nämä selitetään tarkemmin alla olevissa luvuissa.

Symbolien kutsua varten tarvitaan vain URL-etiikki.

Omat Symbolisarjat

On mahdollista tuoda oma symbolisarja projektiin. Jokainen symbolisarja on valmisteltava ZIP-tiedostona. Joitakin esimerkkidatoja voidaan ladata täältä:

Pro-Tip: Onnistuneen tuonnin jälkeen voit viedä symbolisarjan .antobj-tiedostona helpottamaan tuontia. Klikkaa oikealla hiirenpainikkeella symbolisarjassa ja valitse Vie.

Seuraavat säännöt määrittelevät symbolisarjan rakenteen ja vaatimukset. Lue nämä huolellisesti ja noudata niitä tarkasti.

Säännöt

  • Etiikki
    • Voidaan sisältää vain _, a–z ja 0–9.
    • Isokirjaimet muutetaan automaattisesti pieniksi kirjaimiksi.
    • Varatut nimet kuten sys, src tai doc ovat kelvottomia.
    • Tulisi alkaa kirjaimella (a–z). Vain numerot eivät ole sallittuja.
    • Perässä olevat alaviivat (_) poistetaan.
    • Tulisi olla vähintään 3 merkkiä pitkä.
    • Moninkertaiset alaviivat (__) muutetaan yhdeksi.
  • Symbolin nimet
    • Muutetaan automaattisesti pieniksi kirjaimiksi.
    • Sallitut merkit ovat -, _, a–z ja 0–9.
    • Liian pitkät nimet ja etikit tulisi välttää.
    • Etiikki tulisi olla yksilöllinen ja sitä tulisi käyttää vain kerran.
    • Jos symboli on samanniminen ja samalla etikettillä kuin järjestelmäsymboli, se voi korvata sen.
  • Tiedostorajoitukset
    • Enimmäiskoko puhdistuksen jälkeen: 10 kB. Suuremmat tiedostot hylätään.
    • SVG-tiedostoja on puhdistettava:
      • Rivinvaihtoja poistetaan automaattisesti.
      • Seuraavat elementit poistetaan: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • Seuraavat attribuutit poistetaan: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Ikoneja, joissa on sisäänrakennettuja skriptejä, kuvia, CSS:ää tai ulkoisia resursseja, ei hyväksytä.
      • Jos tyyleissä on värejä tai tyyli-lohkoja, tuonti voi myös hylätä.
  • SVG-koppaan vaatimukset
    • Tulisi sisältää: viewBox, width ja height. Puuttuvat arvot täydennetään, jos mahdollista.
    • Tulisi sisältää nimikkeen: xmlns="http://www.w3.org/2000/svg". Jos se puuttuu tai on virheellinen, se täydennetään automaattisesti.
    • Iconin nimi tulee vastata tarkasti mittoihin, muuten ikooni hylätään.
    • Mittausten tulee olla neliömäisiä (leveys = korkeus). Oletusarvo: 24px.
    • Ristiriitaisia tyylejä tai sopimattomia mittoja tulisi välttää.
  • Yleistä
    • Huonosti luodut ikonit voivat hidastaa näyttämistä huomattavasti tai jopa aiheuttaa virheitä.
    • Kiinnitä huomiota symbolien tekijänoikeuksiin.
    • Kaikki vektorit pyöristetään kolmeen desimaaliin.

Rakenne

  • Tiedosto iconset.ini on pakollinen symbolisarjan tunnistamiseksi.
    • Se voi olla ZIP-tiedoston juurihakemistossa tai alihakemistossa.
    • Tulisi olla pienillä kirjaimilla (iconset.ini).
    • Symbolitiedostojen nimet eivät ole case-sensitiivisiä.
  • Tuonti ei etsi automaattisesti SVG-tiedostoja.
    • Icon-hakemiston on määriteltävä eksplisiittisesti iconset.ini:ssa (iso- ja pienikirjainten huomioiminen).
    • ZIP-tiedoston mallissa on määritelty kansio nimeltä icons/.
  • Alihakemistot
    • Määritellyssä hakemistossa (icons/) olevat alihakemistot toimivat luokkina.
    • Symbolinimet tulee olla yksilöllisiä kaikkien luokkien yli.
    • Nimensääntöjä symbolihakemistossa:
      • Vähimmäismäärä: Vain mitat ja tiedostopääte (esim. 24.svg).
      • Variantit kuten filled24.svg tai round_filled_24.svg ovat kelvollisia.
      • Tiedostonimet, joissa on useita numeroita (esim. 24_48.svg) ovat kelvottomia.
      • Tyyli-variantit tunnistetaan seuraavasti:
        • Täytetty: Tulee sisältää filled tai fill.
        • Pyöreä: Tulee sisältää round.
        • Teriävä: Tulee sisältää sharp.
        • Pyöreä ja teriävä eivät voi yhdistää toisiaan.
      • Jos useat säännöt täyttyvät, käytetään viimeksi tunnistettua tiedostoa (valinta saattaa vaikuttaa satunnaisesti).
  • Lisäsäännöt
    • Ei haeta pesäkkäisiä alahakemistoja (näitä voidaan käyttää varmuuskopioihin tai alkuperäisiin tiedostoihin).
    • .svg-tiedostot jätetään huomiotta.
    • Symbolihakemistossa voi olla tiedosto nimeltä tags.txt lisätunnisteiden lisäämiseksi hakua varten.
      • Tunnisteita voidaan erottaa ,, ; tai Rivinvaihdot.

Erityiset Symbolisarjat

On myös erilaisia erityisiä symbolisarjoja, jotka voidaan tuoda omien symbolisarjojen tavoin, mutta niitä ei tarvitse määrittää yllä olevien ohjeiden mukaan.

Hass Hue Icons

Yksi näistä on GitHub-sivustolta hass-hue-icons. Tämä on Home Assistant HASS -yhteisön lisäsymbolisarja ja sitä saa käyttää vain ei-kaupallisiin projekteihin, koska se on Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International -lisenssin alla. Siksi symbolisarjaa ei toimiteta Antcas Controlin mukana. Symbolit voidaan kuitenkin tuoda milloin tahansa ZIP-tiedostolla hass-hue-icons-main.zip uutena symbolisarjana projektiin. Huomioi projektin lisenssiehdot GitHub-sivustolla.

Lähde: https://github.com/arallsopp/hass-hue-icons.

Pictogrammersin Material Design -symbolit

Toinen on Pictogrammersilta. Tämän toteuttamiseksi tiedosto mdi-###.json on pakattava ZIP-tiedostoksi ja tuottava se. Tiedoston voi löytää ja ladata selaintaulukon kehittäjäkonsolista. Yritetään yhdistää ääriviivat symboleita täytettyihin symboleihin. Kirjasto on lähes sama kuin Material Symbols. On kuitenkin paljon yhteisön laajennuksia. Jos haluat integroida muita symbolisarjoja kirjastoon, voit kysyä meiltä.

Lähde: https://pictogrammers.com/library/mdi/

Alaisivut