Simboli

Tutti i simboli possono essere utilizzati in vari punti della visualizzazione. È possibile definirli come variabile o testo.

Per visualizzare un simbolo nella visualizzazione, questo viene dichiarato direttamente nel testo mediante il tag [icon:SYMBOLPFAD]. Il percorso del simbolo può essere copiato dalla libreria dei simboli con il tasto destro del mouse o con CTRL+C. Se possibile, dovrebbe essere scelto solo il set di Material Symbols per mantenere lo stile della visualizzazione coerente.

Libreria Simboli

Tutti i simboli disponibili possono essere richiamati e cercati nel menu contestuale Visualizzazione ▸ Simboli. È anche possibile importare un proprio set di simboli nella libreria. La procedura è spiegata più avanti.

Note: Il nome visualizzato nell'elenco dei simboli non è identico al percorso del simbolo. Se nel percorso non viene specificato un set di simboli, verrà automaticamente utilizzato il set Glyphicons.

Il filtro nella libreria dei simboli cerca anche tra i tag inseriti. Se questo comportamento non è desiderato, il filtro può iniziare con un = per cercare solo nei nomi.

Set di Simboli Material Symbols (Standard)

Questo set di simboli è completamente dinamico e lo stile dei simboli viene configurato automaticamente in base al design della visualizzazione. Inoltre, un simbolo riempito viene utilizzato automaticamente quando il simbolo deve essere attivo. Tuttavia, non tutti i simboli hanno una variante riempita.

I simboli vengono arrotondati automaticamente se il raggio del pulsante è maggiore o uguale a 16 Pixel. Se il raggio è uguale a 0px, vengono utilizzati i simboli netti. Nell'editor, tuttavia, vengono sempre utilizzati i simboli normali.

Nota: Si consiglia di utilizzare il set di simboli "Material Symbols" per progettare la visualizzazione in modo uniforme.

Set di Simboli Material Animated

Alcuni simboli del Material Symbols sono stati animati per rappresentare valori. Questi simboli hanno solo un'animazione con il simbolo della struttura. Quando selezionati, vengono sbloccate ulteriori variabili.

Set di Simboli Philips Hue

I simboli di Philips Hue possono essere utilizzati liberamente se viene utilizzata l'interfaccia Hue. Inoltre, esiste un set di simboli Hue aggiuntivo della community di Home Assistant HASS. Ulteriori informazioni sono disponibili alla fine di questo capitolo.

Set di Simboli Meteorologici

Questo set di simboli visualizza i simboli meteorologici della visualizzazione. Questi sono supportati senza soluzione di continuità da diverse interfacce. Vedere il capitolo sottostante Simboli Meteorologici.

Set di Simboli Legacy (obsoleto)

Il set di simboli Legacy include tutti i simboli della vecchia visualizzazione. Lo stile di visualizzazione della nuova interfaccia rimane invariato. I simboli non dovrebbero più essere utilizzati poiché la rappresentazione non è ottimizzata per la nuova interfaccia.

Alcuni vecchi simboli sono ancora animati:

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

Simboli Nascosti

Esistono anche simboli nascosti per la visualizzazione. Questi vengono ulteriormente spiegati nei capitoli successivi.

Per richiamare i simboli è necessario solo un prefisso URL.

Set di Simboli Personalizzati

È possibile importare un proprio set di simboli nel progetto. Ogni set di simboli deve essere preparato come file ZIP. Alcuni dati di esempio possono essere scaricati qui:

Consiglio Pro: Dopo un importazione riuscita, è possibile esportare il set di simboli come .antobj per semplificare l'importazione. Fare clic con il tasto destro del mouse su un set di simboli e selezionare Esporta.

Le seguenti regole definiscono la struttura e i requisiti di un set di simboli. Leggere attentamente queste regole e seguirle scrupolosamente.

Regole

  • Prefisso
    • Può contenere solo _, a–z e 0–9.
    • Le lettere maiuscole vengono convertite automaticamente in minuscole.
    • I nomi riservati come sys, src o doc non sono validi.
    • Deve iniziare con una lettera (a–z). Solo numeri non sono ammessi.
    • Gli underscore finali (_) vengono rimossi.
    • Deve essere lungo almeno 3 caratteri.
    • Gli underscore multipli (__) vengono ridotti a uno solo.
  • Nomi dei Simboli
    • Vengono convertiti automaticamente in minuscole.
    • I caratteri ammessi sono -, _, a–z e 0–9.
    • I nomi lunghi e i prefissi devono essere evitati.
    • Un prefisso deve essere unico e dovrebbe essere utilizzato solo una volta.
    • Se un simbolo ha lo stesso nome e lo stesso prefisso di un simbolo di sistema, può sostituirlo.
  • Limitazioni dei File
    • Dimensione massima del file dopo la pulizia: 10 kB. I file più grandi vengono rifiutati.
    • I file SVG devono essere puliti:
      • Gli a capo vengono rimossi automaticamente.
      • I seguenti elementi vengono eliminati: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • I seguenti attributi vengono eliminati: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Gli icone con script incorporati, immagini, CSS o risorse esterne vengono rifiutati.
      • Se gli stili contengono colori o blocchi di stile, l'importazione può essere rifiutata.
  • Requisiti dell'Header SVG
    • Deve contenere: viewBox, width e height. I valori mancanti vengono, se possibile, aggiunti automaticamente.
    • Deve contenere lo spazio dei nomi: xmlns="http://www.w3.org/2000/svg". Se è mancante o errato, viene aggiunto automaticamente.
    • Il nome dell'icona deve corrispondere esattamente alle dimensioni, altrimenti l'icona viene rifiutata.
    • Le dimensioni devono essere quadrate (larghezza = altezza). Standard: 24px.
    • Stili contrastanti o dimensioni inappropriate devono essere evitati.
  • Generale
    • Le icone realizzate male possono rallentare notevolmente la visualizzazione o causare errori.
    • Prestare attenzione ai diritti d'autore dei simboli.
    • Tutti i vettori vengono arrotondati a tre decimali.

Struttura

  • Il file iconset.ini è obbligatorio per riconoscere il set di simboli.
    • Può essere nella directory principale del file ZIP o in una sottodirectory.
    • Deve essere in minuscolo (iconset.ini).
    • I nomi dei file dei simboli stessi non sono case-sensitive.
  • L'importazione non cerca automaticamente i file SVG.
    • La cartella delle icone deve essere definita esplicitamente in iconset.ini (attenzione alla maiuscola/minuscola).
    • Nel modello del file ZIP è stata definita una cartella chiamata icons/.
  • Sottocartelle
    • Le sottocartelle nella cartella definita (icons/) servono come categorie.
    • I nomi dei simboli devono essere univoci in tutte le categorie.
    • Regole di denominazione nella cartella dei simboli:
      • Minimo: Solo dimensione e estensione del file (ad esempio 24.svg).
      • Varianti come filled24.svg o round_filled_24.svg sono valide.
      • I nomi dei file con più numeri (ad esempio 24_48.svg) non sono validi.
      • Le varianti di stile vengono riconosciute da:
        • Riempito: Deve contenere filled o fill.
        • Arrotondato: Deve contenere round.
        • Netto: Deve contenere sharp.
        • Arrotondato e netto non possono essere combinati insieme.
      • Se più regole si applicano, viene utilizzato l'ultimo file riconosciuto (la selezione può sembrare casuale).
  • Altre Regole
    • Non vengono cercate sottocartelle annidate (queste possono essere utilizzate per backup o originali).
    • I file senza .svg vengono ignorati.
    • In una cartella di simboli può essere presente un file chiamato tags.txt per aggiungere tag di ricerca aggiuntivi.
      • I tag possono essere separati da ,, ; o A Capo.

Set di Simboli Speciali

Esistono anche vari set di simboli speciali che possono essere importati come i propri set di simboli, ma non devono essere configurati secondo le specifiche sopra riportate.

Hass Hue Icons

Uno di questi è il set di simboli hass-hue-icons della pagina GitHub. Questo è un set di simboli Hue aggiuntivo della community di Home Assistant HASS e può essere utilizzato solo per progetti non commerciali, poiché è sotto la licenza Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International. Pertanto, il set di simboli non viene fornito con Antcas Control. Tuttavia, i simboli possono essere importati in qualsiasi momento nel progetto come nuovo set di simboli con il file ZIP hass-hue-icons-main.zip. Prestare attenzione alle condizioni di licenza del progetto sul sito web di Github.

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

Material Design Icons di Pictogrammers

Un altro è quello di Pictogrammers. Per questo, il file mdi-###.json deve essere compresso in un file ZIP e importato. Il file può essere trovato e scaricato dalla console degli sviluppatori del browser. Si tenta di combinare i simboli outline con quelli riempiti. La libreria è quasi uguale ai Material Symbols. Tuttavia, ci sono molte estensioni della community. Se si desidera integrare altri set di simboli nella libreria, non esitate a contattarci.

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

Pagine subordinate