Символи

Всі символи можуть використовуватися в різних місцях візуалізації. Таким чином, їх можна визначити як змінну або текст.

Щоб вивести символ на візуалізації, він оголошується безпосередньо в тексті за допомогою тегу [icon:SYMBOLPFAD]. Шлях до символу можна скопіювати з бібліотеки символів, використовуючи правий кнопкою миші або CTRL+C. Якщо це можливо, слід вибирати лише матеріали Symbols, щоб стиль візуалізації залишався однаковим.

Бібліотека символів

Всі доступні символи можна відкрити та пошукати в контекстному меню Візуалізація ▸ Символи. Також можна імпортувати власний набір символів до бібліотеки. Процедура описується нижче.

Примітки: Назва, яка відображається в списку символів, не є точною, як шлях до символу. Якщо в шляху не вказано набір символів, автоматично використовується набір Glyphicons.

Фільтр у бібліотеці символів також шукає за допомогою позначок. Якщо це поведінка не бажана, фільтр можна починати з =, щоб шукати лише в назвах.

Набір символів Material Symbols (стандартний)

Цей набір символів повністю динамічний, і стиль символів автоматично налаштовується відповідно до дизайну візуалізації. Крім того, автоматично використовується заповнений символ, якщо символ повинен бути активним. Однак не всі символи мають заповнену версію.

Символи автоматично заокруглюються, якщо радіус кнопки більший або рівний 16 пікселів. Якщо радіус дорівнює 0px, використовуються гострі символи. У редакторі, однак, завжди використовуються звичайні символи.

Примітка: Рекомендується використовувати набір символів "Material Symbols", щоб візуалізація була єдиною.

Набір символів Material Animated

Є вибрані символи Material Symbols, які були анімовані для відображення значень. Ці символи мають лише одну анімацію з символом структури. При виборі додатково активуються інші змінні.

Набір символів Philips Hue

Символи Philips Hue можна вільно використовувати, якщо використовується інтерфейс Hue. Крім того, існує додатковий набір символів Hue спільноти Home Assistant HASS. Додаткову інформацію можна знайти в кінці цього розділу.

Набір символів Погода

Цей набір символів відображає символи погоди візуалізації. Вони плавно підтримуються різними інтерфейсами. Дивіться наступний розділ Погодні іконки.

Набір символів Legacy (застарілий)

Набір символів Legacy містить всі символи старої візуалізації. Стиль відображення нового інтерфейсу залишається однаковим. Символи не слід більше використовувати, оскільки їх представлення не оптимізовано для нового інтерфейсу.

Різні старі символи продовжують анімуватися:

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

Приховані символи

Також існують приховані символи для візуалізації. Вони подробніше описані в наступних розділах.

Для виклику символів потрібен лише префікс URL.

Власні набори символів

Можливо імпортувати власний набір символів до проекту. Кожен набір символів повинен бути підготовлений як ZIP-файл. Деякі приклади даних можна завантажити тут:

Професійний порад: Після успішного імпорту ви можете експортувати набір символів як .antobj, щоб спростити імпорт. Для цього натисніть правим кнопкою миші на набір символів і виберіть Експорт.

Наступні правила визначають структуру та вимоги до набору символів. Будь ласка, прочитайте їх уважно і дотримуйтеся.

Правила

  • Префікс
    • Може містити лише _, a–z та 0–9.
    • Великі літери автоматично перетворюються на маленькі.
    • Резервовані назви, такі як sys, src або doc, недійсні.
    • Повинен починатися з літери (a–z). Чисельні значення заборонені.
    • Додаткові нижні риски (_) видаляються.
    • Повинен бути принаймні 3 символи довжиною.
    • Множинні нижні риски (__) зводяться до одного.
  • Назви символів
    • Автоматично перетворюються на маленькі літери.
    • Дозволені символи: -, _, a–z та 0–9.
    • Слід уникати надто довгих назв і префіксів.
    • Префікс повинен бути унікальним і використовуватися лише один раз.
    • Якщо символ має таку ж назву й префікс, як системний символ, він може його замінити.
  • Омеження файлів
    • Максимальний розмір файлу після очищення: 10 кБ. Більші файли відхиляються.
    • SVG-файли повинні бути очищені:
      • Переноси рядків автоматично видаляються.
      • Наступні елементи видаляються: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • Наступні атрибути видаляються: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Іконки з вбудованими скриптами, зображеннями, CSS або зовнішніми ресурсами відхиляються.
      • Якщо стилі містять кольори або блоки стилів, імпорт також може бути відхилений.
  • Вимоги до заголовка SVG
    • Повинен містити: viewBox, width та height. Відсутні значення, якщо це можливо, автоматично доповнюються.
    • Повинен містити простір імен: xmlns="http://www.w3.org/2000/svg". Якщо його немає або він неправильний, він автоматично доповнюється.
    • Назва іконки повинна точно відповідати розмірам, інакше іконка відхиляється.
    • Розміри повинні бути квадратними (ширина = висота). Стандарт: 24px.
    • Слід уникати суперечливих стилів або непідходящих розмірів.
  • Загальні
    • Погано створені іконки можуть сильно сповільнити відображення або навіть зробити його помилковим.
    • Зверніть особливу увагу на авторські права символів.
    • Всі вектори округлюються до трьох знаків після коми.

Структура

  • Файл iconset.ini обов'язковий для виявлення набору символів.
    • Він може знаходитися в кореневому каталозі ZIP-файлу або в підкаталозі.
    • Повинен бути у нижньому регістрі (iconset.ini).
    • Назви файлів символів само по собі не чутливі до регістру.
  • Імпорт автоматично не шукає SVG-файли.
    • Каталог іконок повинен бути явно визначений в iconset.ini (з урахуванням регістру).
    • У шаблоні ZIP-файлу був визначений каталог під назвою icons/.
  • Підкаталоги
    • Підкаталоги в визначеному каталозі (icons/) служать категоріями.
    • Назви символів повинні бути унікальними для всіх категорій.
    • Правила назв у каталозі символів:
      • Мінімум: лише розмір і розширення файлу (наприклад, 24.svg).
      • Варіанти, такі як filled24.svg або round_filled_24.svg, дійсні.
      • Назви файлів з кількома числами (наприклад, 24_48.svg) недійсні.
      • Варіанти стилю визначаються за допомогою:
        • Заповнений: повинен містити filled або fill.
        • Круглий: повинен містити round.
        • Гострий: повинен містити sharp.
        • Круглий і гострий не можна комбінувати.
      • Якщо застосовується кілька правил, використовується останній виявлений файл (вибір може здатися випадковим).
  • Додаткові правила
    • Не шукаються вкладені підпідкаталоги (їх можна використовувати для резервних копій або оригіналів).
    • Ігноруються файли без .svg.
    • У каталозі символів може бути файл під назвою tags.txt, щоб додати додаткові теги для пошуку.
      • Теги можна розділяти ,, ; або переносами рядків.

Спеціальні набори символів

Також існують різні спеціальні набори символів, які можна імпортувати як власні набори символів, однак вони не повинні бути налаштовані відповідно до вищезгаданих вимог.

Hass Hue Icons

Одним з них є hass-hue-icons зі сторінки Gibhub. Це додатковий набір символів Hue спільноти Home Assistant HASS і може використовуватися лише для некомерційних проектів, оскільки він підпадає під ліцензію Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International. Тому цей набір символів не поставляється разом з Antcas Control. Однак символи можна імпортувати до проекту як новий набір символів за допомогою ZIP-файлу hass-hue-icons-main.zip. Зверніть увагу на умови ліцензії проекту на веб-сайті Github.

Джерело: https://github.com/arallsopp/hass-hue-icons.

Material Design Icons від Pictogrammers

Іншим є той, що належить Pictogrammers. Для цього файл mdi-###.json повинен бути упакований у ZIP-файл і імпортований. Файл можна знайти та завантажити в консолі розробника браузера. Спробується об'єднати контурні символи з заповненими. Бібліотека майже така ж, як Material Symbols. Однак є багато розширень спільноти. Якщо ви хочете інтегрувати інші набори символів до бібліотеки, ви можете звернутися до нас.

Джерело: https://pictogrammers.com/library/mdi/

Підпорядковані сторінки