Total Kontrol/TKT/Стандарт именования изображений: различия между версиями

Текущая версия на 20:44, 14 августа 2020

Для удобства разработки, редактирования и переноса веб-интерфейсов и их фрагментов все файлы изображений должны иметь имена в соответствии с данным стандартом. Имя файла должно состоять из ряда человеко-понятных идентификаторов, разделённых точками. Идентификаторы должны быть, с одной стороны, короткими (чтобы не перегружать XML), с другой - имеющими однозначный смысл. Поскольку большинство видимых элементов является кнопками, для них должно присутствовать как минимум 2 изображения: нажатое и отжатое состояние, соответственно, последний идентификатор должен указывать на состояние, представленное данным изображением. Стандартных состояний три:

prs - нажато;
rls - отжато;
un - недоступно.

Таким образом, имя изображения для некоей нажатой кнопки должно выглядеть как btn.prs.png. Не запрещается использование любых других имён файлов, но вследствие их большого количества даже в сравнительно простом веб-интерфейсе их бессистемное именование может вызвать путаницу. Кроме того, рекомендуется хранить изображения в интуитивно-понятной иерархии папок.

Рекомендуется следующее дерево папок в папке /img:

back - фоновые изображения;
bt - кнопки:
- kbd - кнопки цифровой клавиатуры;
- mode - кнопки выбора режима работы конференц-системы;
- popup - кнопки для всплывающих окон;
- pwr - кнопки управления питанием;
- setup - кнопки, специфические для страницы настроек;
icn - пиктограммы, отличаются тем что имеют только одно видимое состояние;
obs - основная тёмная тема "Obsidian", набор пиктограмм в трёх состояниях:
- arr - стрелки навигации;
- fad - изображения для фейдеров;
- surf - пиктограммы, "стоящие" на зеркальной поверхности;
- wht - белые пиктограммы;
pan - панели, заголовки и т. п.;
text - текстовые надписи в виде изображений.

Чтобы не множить количество папок, допускается внутри одной папки группировать изображения первым идентификатором. Например, в стандартном наборе /img/bt/pwr имена файлов кнопок, управляющие освещением, начинаются на "lt": lt.hall.prs.png - нажатое состояние для кнопки, включающей освещение зала.

@@ Строка 1: / Строка 1: @@
-Для удобства разработки, редактирования и переноса веб-интерфейсов и их фрагментов все файлы изображений должны иметь имена в соответствии с данным стандартом. Не запрещается использование любых других имён файлов, но вследствие их большого количества даже в сравнительно простом веб-интерфейсе их бессистемное именование может вызвать путаницу.
+Для удобства разработки, редактирования и переноса веб-интерфейсов и их фрагментов все файлы изображений должны иметь имена в соответствии с данным стандартом. Имя файла должно состоять из ряда человеко-понятных идентификаторов, разделённых точками. Идентификаторы должны быть, с одной стороны, короткими (чтобы не перегружать XML), с другой - имеющими однозначный смысл. Поскольку большинство видимых элементов является кнопками, для них должно присутствовать как минимум 2 изображения: нажатое и отжатое состояние, соответственно, последний идентификатор должен указывать на состояние, представленное данным изображением. Стандартных состояний три:
+*prs - нажато;
+*rls - отжато;
+*un - недоступно.
-Имя файла должно состоять из ряда человеко-понятных идентификаторов, разделённых точками. Идентификаторы должны быть, с одной стороны, короткими (чтобы не перегружать XML), с другой - имеющими однозначный смысл. Стандарт определяет наиболее распространённые идентификаторы.
+Таким образом, имя изображения для некоей нажатой кнопки должно выглядеть как btn.prs.png. Не запрещается использование любых других имён файлов, но вследствие их большого количества даже в сравнительно простом веб-интерфейсе их бессистемное именование может вызвать путаницу. Кроме того, рекомендуется хранить изображения в интуитивно-понятной иерархии папок.
-Первый идентификатор - группа видимых элементов, например:
+Рекомендуется следующее дерево папок в папке /img:
-*bt - кнопки (button)
+*back - фоновые изображения;
-*sl – слайдеры (slider)
+*bt - кнопки:
-*ic – пассивные значки, иконки (icon)
+**kbd - кнопки цифровой клавиатуры;
-*pn – панели, рамки и т. п. (panel)
+**mode - кнопки выбора режима работы конференц-системы;
-*txt - текстовые надписи
+**popup - кнопки для всплывающих окон;
+**pwr - кнопки управления питанием;
+**setup - кнопки, специфические для страницы настроек;
+*icn - пиктограммы, отличаются тем что имеют только одно видимое состояние;
+*obs - основная тёмная тема "Obsidian", набор пиктограмм в трёх состояниях:
+**arr - стрелки навигации;
+**fad - изображения для фейдеров;
+**surf - пиктограммы, "стоящие" на зеркальной поверхности;
+**wht - белые пиктограммы;
+*pan - панели, заголовки и т. п.;
+*text - текстовые надписи в виде изображений.
-Второй идентификатор - функциональное назначение изображения, например:
+Чтобы не множить количество папок, допускается внутри одной папки группировать изображения первым идентификатором. Например, в стандартном наборе /img/bt/pwr имена файлов кнопок, управляющие освещением, начинаются на "lt": lt.hall.prs.png - нажатое состояние для кнопки, включающей освещение зала.
-*dig – цифры (кнопки или иконки)
-*mix – иконки для обозначения каналов микшера
-*lt - управление светом (light)
-*cam - управление камерой
-Опциональные третий и далее идентификаторы уточняют группировку и функционал изображения (например 0 для кнопки с цифрой 0).
-Последний идентификатор определяет видимое состояние элемента:
-*prs - кнопка нажата (pressed)
-*rls - кнопка не нажата (released)
-*un - кнопка недоступна (unavailable)
-*bk - кнопка мигает (blink)
-и т. д., для элементов с одним видимым состоянием (надписи, логотипы и т. п.) не указывается.
-Пример имени файла изображения недоступного состояния маленькой кнопки с цифрой 6 (подразумевается, что существует как минимум 2 набора цифровых кнопок - большие и маленькие): '''bt.dig.small.6.un.png'''
-Пример имени файла изображения спрайта вертикального слайдера: '''sl.vert.spr.png'''