Символы

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

Чтобы вывести символ на визуализацию, он объявляется непосредственно в тексте с помощью тега [icon:SYMBOLPFAD]. Путь к символу можно скопировать из библиотеки символов с помощью правой кнопки мыши или с CTRL+C. Если возможно, следует выбирать только Material 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/

Подчиненные страницы