====== Работа с иконками меню и элементов ====== Визуальное оформление элементов графического интерфейса программного комплекса [[https://new.topomatic.ru/|Топоматик Робур]] осуществляется с помощью файлов растровой графики в формате [[https://ru.wikipedia.org/wiki/PNG|PNG (Portable Network Graphics)]]. Привязка иконок к элементам интерфейса определяется в **[[developers:references:core.plugin|plugin-файлах]]** с помощью параметра **"icon"**.\\ ===== Путь к файлам ===== Файлы пользовательских иконок располагаются в папке: ;#; ''**"C:\Program Files\Topomatic Robur 16.0\Icons"**'' ;#; Если директория **Icons** отсутствует по указанному пути, создайте её вручную. ===== Правила именования файлов иконок ===== Имя файла иконки должно соответствовать следующему шаблону: ;#; ''**_dp_x.png**'' ;#; ^ Элемент ^ Описание ^ | | Имя иконки. Оно используется в качестве значения параметра **"icon"** при описании элементов графического интерфейса в **plugin-файлах** | | | Исходный размер иконки. Допускается указывать значения: **"16"** или **"32"**. Программа ищет файл иконки соответствующего размера в зависимости от значения параметра **"size"** элемента графического интерфейса. Если для параметра **"size"** установлены значения **"small"** или **"middle"**, программа ищет файл с исходным размером 16dp. Для значения **"large"**, ищется размер 32dp. | | | Масштаб указывающий, во сколько раз увеличен размер исходного изображения в этом файле.\\ Допустимые значения: **"1","1.5","2","2.5","3"**. Файлы следует масштабировать для корректного отображения иконок при различных значениях плотности точек на дюйм (**DPI**) в настройках операционной системы. Программа автоматически определяет, какой масштаб необходимо использовать. Если программе не удалось найти файл иконки необходимого ей масштаба, то будет использован файл с масштабом равным "1". | ===== Пример имени файла иконки ===== Рассмотрим пример имени пользовательской иконки: ;#; ''**my_custom_icon_32dp_1.5x.png**'' ;#; В данном примере: имя иконки - **my_custom_icon**, размер исходного файла - **32**, масштаб преобразования **1.5**.\\ Размер изображения в файле должен соответствовать размеру исходного файла умноженному на масштаб. Значит изображение иконки в этом файле должно быть **32 * 1.5 = 48** пикселей по высоте и ширине. ===== Рекомендуемый набор иконок ===== Для каждой пользовательской иконки рекомендуется создавать файл на каждое возможное сочетание размера и масштаба. Полный набор для одной иконки содержит следующие файлы: ^ Имя файла ^ Размер изображения ^ Изображение ^ | my_custom_icon_16dp_1x.png | 16x16 | {{ :developers:tutorial:icons:my_custom_icon_16dp_1x.png?nolink |}} | | my_custom_icon_16dp_1.5x.png | 24x24 | {{ :developers:tutorial:icons:my_custom_icon_16dp_1.5x.png?nolink |}} | | my_custom_icon_16dp_2x.png | 32x32 | {{ :developers:tutorial:icons:my_custom_icon_16dp_2x.png?nolink |}} | | my_custom_icon_16dp_2.5x.png | 40x40 | {{ :developers:tutorial:icons:my_custom_icon_16dp_2.5x.png?nolink |}} | | my_custom_icon_16dp_3x.png | 48x48 | {{ :developers:tutorial:icons:my_custom_icon_16dp_3x.png?nolink |}} | | my_custom_icon_32dp_1x.png | 32x32 | {{ :developers:tutorial:icons:my_custom_icon_32dp_1x.png?nolink |}} | | my_custom_icon_32dp_1.5x.png | 48x48 | {{ :developers:tutorial:icons:my_custom_icon_32dp_1.5x.png?nolink |}} | | my_custom_icon_32dp_2x.png | 64x64 | {{ :developers:tutorial:icons:my_custom_icon_32dp_2x.png?nolink |}} | | my_custom_icon_32dp_2.5x.png | 80x80 | {{ :developers:tutorial:icons:my_custom_icon_32dp_2.5x.png?nolink |}} | | my_custom_icon_32dp_3x.png | 96x96 | {{ :developers:tutorial:icons:my_custom_icon_32dp_3x.png?nolink |}} | ===== Элементы графического интерфейса использующие иконки ===== ^ Элемент ^ Описание ^ | Кнопка | объект содержащий параметр "button" или объект секции [[developers:references:core.plugin:actions|"action"]] | | Список элементов | объект с массивом элементов "items" | | Элементы структуры проекта | объект секции [[developers:references:core.plugin:cores|"cores"]] | | Панель | объект секции [[developers:references:core.plugin:panels|"panels"]] | ===== Пример plugin-файла ===== Ниже приведён пример plugin-файла, содержащий примеры привязки иконок к элементам интерфейса: { "actions":{ "my_action_id_1": { "cmd": "my_command_1", "title": "Пользовательская команда 1", "description": "Вызов пользовательской комманды 1", "icon": "my_custom_icon_1" // имя иконки }, "my_action_id_2": { "cmd": "my_command_2", "title": "Пользовательская команда 2", "description": "Вызов пользовательской комманды 2", "icon": "my_custom_icon_2" // имя иконки } }, // Секция ленточного интерфейса // (взято в качестве примера, как элемент, который содержит вложенные элементы) "ribbon": { "rbproj.my_custom_tab_common.my_custom_subgroup_1":{ "items":[ // Раскрывающийся список элементов { // В соответствии с шаблоном "_dp_x.png" // Для данного элемента интерфейса программа будет искать // файл иконки с именем "my_custom_icon_0_32dp_1x.png" // (в зависимости от настроек операционной системы значение масштаба "1x" может быть другим) "title": "Мои сгруппированые элементы", "icon": "my_custom_icon_0", // имя иконки родительского элемента "size": "large", // размер иконки родительского и вложенных элементов "items": [ "my_action_id_1", // имя иконки action'ов определяются из описания самих action'ов, "my_action_id_2" // а размер иконки определяется параметром "size" родительского элемента ] }, // Кнопка с вложенными элементами { // имя иконки для кнопки будет назначено соответсвующим action'ом // размер иконки определяется параметром "size" "button": "my_action_id_1", "size": "large", "items": [ "my_action_id_2" ] } ] } }, // Панели "panels": { // Для панелей программа ищет иконки с размером 32dp в имени файла "my_custom_panel": { "title": "Пользовательская панель", "description": "Панель инструментов", "cmd": "create_my_custom_panel", "icon": "my_custom_icon_0" // имя иконки } }, // Элементы структуры проекта "cores": { // Для элементов структуры проекта программа ищет иконки с размером 16dp в имени файла "custom_model": { "title": "$(referencename,%0)", "description": "Пользовательская модель %0", "icon": "my_custom_icon_0", // имя иконки "menu": "custom.context \"%0\"" } } }