Symbole

Wszystkie Symbole mogą być używane w różnych miejscach na wizualizacji. Można zdefiniować je jako zmienną lub tekst.

Aby wyświetlić symbol na wizualizacji, należy go zadeklarować bezpośrednio w tekście za pomocą tagu [icon:SYMBOLPFAD]. Ścieżkę symbolu można skopiować z biblioteki symboli przy użyciu prawego przycisku myszy lub klawisza CTRL+C. Powinno się, jeśli to możliwe, wybierać tylko symbole Material Symbols, aby styl wizualizacji pozostał spójny.

Biblioteka symboli

Wszystkie dostępne symbole można wywołać i przeszukiwać pod menu kontekstowym Wizualizacja ▸ Symbole. Można również zaimportować własny zestaw symboli do biblioteki. Procedura jest wyjaśniona dalej.

Uwagi: Nazwa wyświetlana na liście symboli nie jest identyczna ze ścieżką symbolu. Jeśli w ścieżce nie podano zestawu symboli, automatycznie używany jest zestaw Glyphicons.

Filtr w bibliotece symboli szuka również po zarejestrowanych tagach. Jeśli to zachowanie nie jest pożądane, filtr można rozpocząć znakiem =, aby szukać tylko w nazwach.

Zestaw symboli Material Symbols (domyślny)

Ten zestaw symboli jest całkowicie dynamiczny, a styl symboli jest automatycznie konfigurowany zgodnie z projektem wizualizacji. Ponadto automatycznie używany jest wypełniony symbol, gdy symbol ma być aktywny. Nie każdy symbol ma jednak wersję wypełnioną.

Symbole są automatycznie zaokrąglane, gdy promień przycisku jest większy lub równy 16 pikseli. Jeśli promień wynosi 0px, używane są ostre symbole. W edytorze zawsze używane są jednak normalne symbole.

Uwaga: Zaleca się używanie zestawu symboli "Material Symbols", aby wizualizacja była spójna.

Zestaw symboli Material Animated

Niektóre symbole Material Symbols zostały zanimowane, aby przedstawiać wartości. Te symbole mają tylko jedną animację z symbolem Struktury. Przy wyborze zostaną odblokowane dodatkowe zmienne.

Zestaw symboli Philips Hue

Symbole Philips Hue mogą być swobodnie używane, gdy interfejs Hue jest stosowany. Ponadto istnieje dodatkowy zestaw symboli Hue społeczności Home Assistant HASS. Więcej informacji znajdziesz na końcu tego rozdziału.

Zestaw symboli Pogoda

Ten zestaw symboli wyświetla symbole pogody wizualizacji. Są one płynnie wspierane przez różne interfejsy. Patrz rozdział Ikony pogody.

Zestaw symboli Legacy (przestarzały)

Zestaw symboli Legacy zawiera wszystkie symbole starej wizualizacji. Styl wyświetlania nowego interfejsu pozostaje taki sam. Symbole nie powinny być już używane, ponieważ ich przedstawienie nie zostało zoptymalizowane dla nowego interfejsu.

Różne stare symbole są nadal animowane:

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

Ukryte symbole

Istnieją również ukryte symbole dla wizualizacji. Są one dalej wyjaśniane w niższych rozdziałach.

Aby wywołać symbole, wystarczy prefiks URL.

Własne zestawy symboli

Można zaimportować własny zestaw symboli do projektu. Każdy zestaw symboli musi być przygotowany jako plik ZIP. Niektóre przykładowe dane można tutaj pobrać:

Porada dla profesjonalistów: Po pomyślnym zaimportowaniu można eksportować zestaw symboli jako .antobj, aby ułatwić import. Kliknij prawym przyciskiem myszy na zestaw symboli i wybierz Eksport.

Poniższe zasady definiują strukturę i wymagania zestawu symboli. Proszę uważnie przeczytać te zasady i ściśle je przestrzegać.

Zasady

  • Prefiks
    • Może zawierać tylko _, a–z i 0–9.
    • Wielkie litery są automatycznie zamieniane na małe.
    • Zarezerwowane nazwy takie jak sys, src lub doc są nieprawidłowe.
    • Musi zaczynać się od litery (a–z). Tylko cyfry są niedozwolone.
    • Podkreślniki na końcu (_) są usuwane.
    • Musi mieć co najmniej 3 znaki długości.
    • Podwójne podkreślniki (__) są redukowane do pojedynczego.
  • Nazwy symboli
    • Są automatycznie zamieniane na małe litery.
    • Dozwolone znaki to -, _, a–z i 0–9.
    • Należy unikać zbyt długich nazw i prefiksów.
    • Prefiks musi być unikalny i powinien być używany tylko raz.
    • Jeśli symbol ma taką samą nazwę i prefiks jak symbol systemowy, może go zastąpić.
  • Ograniczenia plików
    • Maksymalny rozmiar pliku po oczyszczeniu: 10 kB. Większe pliki są odrzucane.
    • Pliki SVG muszą być oczyszczone:
      • Przerwy wierszowe są automatycznie usuwane.
      • Poniższe elementy są usuwane: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • Poniższe atrybuty są usuwane: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Ikony z osadzonymi skryptami, obrazami, CSS lub zewnętrznymi zasobami są odrzucane.
      • Jeśli style zawierają kolory lub bloki stylów, import może być również odrzucony.
  • Wymagania nagłówka SVG
    • Musi zawierać: viewBox, width i height. Brakujące wartości są, jeśli to możliwe, automatycznie uzupełniane.
    • Musi zawierać przestrzeń nazw: xmlns="http://www.w3.org/2000/svg". Jeśli jest nieobecna lub błędna, jest automatycznie uzupełniana.
    • Nazwa ikony musi dokładnie pasować do wymiarów, w przeciwnym razie ikona zostanie odrzucona.
    • Wymiary muszą być kwadratowe (szerokość = wysokość). Domyślnie: 24px.
    • Należy unikać sprzecznych stylów lub niepasujących wymiarów.
  • Ogólne
    • Słabo wykonane ikony mogą znacznie spowolnić wyświetlanie lub nawet spowodować błędy.
    • Uważaj na prawa autorskie symboli.
    • Wszystkie wektory są zaokrąglane do trzech miejsc po przecinku.

Struktura

  • Plik iconset.ini jest obowiązkowy, aby rozpoznać zestaw symboli.
    • Może znajdować się w katalogu głównym pliku ZIP lub w podkatalogu.
    • Musi być w małych literach (iconset.ini).
    • Nazwy plików z symbolami same w sobie nie są wrażliwe na wielkość liter.
  • Import nie szuka automatycznie plików SVG.
    • Katalog ikon musi być jawnie zdefiniowany w iconset.ini (uwzględnij wielkość liter).
    • W szablonie pliku ZIP został zdefiniowany katalog o nazwie icons/.
  • Podkatalogi
    • Podkatalogi w zdefiniowanym katalogu (icons/) służą jako kategorie.
    • Nazwy symboli muszą być unikalne na wszystkie kategorie.
    • Zasady nazewnictwa w katalogu ikon:
      • Minimum: Tylko wymiar i rozszerzenie pliku (np. 24.svg).
      • Warianty takie jak filled24.svg lub round_filled_24.svg są ważne.
      • Nazwy plików z wieloma cyframi (np. 24_48.svg) są nieprawidłowe.
      • Warianty stylu są rozpoznawane przez:
        • Wypełnione: Musi zawierać filled lub fill.
        • Zaokrąglone: Musi zawierać round.
        • Ostre: Musi zawierać sharp.
        • Zaokrąglone i ostre nie mogą być ze sobą połączone.
      • Jeśli kilka zasad jest spełnionych, używany jest ostatnio rozpoznany plik (wybór może wydawać się losowy).
  • Dodatkowe zasady
    • Nie są przeszukiwane zagnieżdżone podkatalogi (można je używać do kopii zapasowych lub oryginałów).
    • Pliki bez .svg są ignorowane.
    • W katalogu ikon może znajdować się plik o nazwie tags.txt, aby dodać dodatkowe tagi do wyszukiwania.
      • Tagi mogą być oddzielane ,, ; lub przerwy wierszowe.

Specjalne zestawy symboli

Istnieją również różne specjalne zestawy symboli, które można importować jak własne zestawy symboli, ale nie muszą być skonfigurowane zgodnie z powyższymi wymaganiami.

Hass Hue Icons

Jeden z nich to hass-hue-icons ze strony GitHub. Jest to dodatkowy zestaw symboli Hue społeczności Home Assistant HASS i może być używany tylko w projektach niekomercyjnych, ponieważ jest on objęty licencją Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International. Dlatego ten zestaw symboli nie jest dostarczany z Antcas Control. Symbole można jednak zaimportować jako nowy zestaw symboli do projektu w dowolnym momencie przy użyciu pliku ZIP hass-hue-icons-main.zip. Uwzględnij warunki licencji projektu na stronie GitHub.

Źródło: https://github.com/arallsopp/hass-hue-icons.

Material Design Icons od Pictogrammers

Inny to ten od Pictogrammers. W tym celu należy spakować plik mdi-###.json do pliku ZIP i zaimportować go. Plik można znaleźć i pobrać w konsoli developerskiej przeglądarki. Próbujemy połączyć symbole konturowe z wypełnionymi. Biblioteka jest prawie taka sama jak Material Symbols. Istnieje jednak wiele rozszerzeń społecznościowych. Jeśli chcesz integrować inne zestawy symboli do biblioteki, możesz się u nas zapytac.

Źródło: https://pictogrammers.com/library/mdi/

Podrzędne strony