Работа с иконками меню и элементов

Визуальное оформление элементов графического интерфейса программного комплекса Топоматик Робур осуществляется с помощью файлов растровой графики в формате PNG (Portable Network Graphics). Привязка иконок к элементам интерфейса определяется в plugin-файлах с помощью параметра «icon».

Путь к файлам

Файлы пользовательских иконок располагаются в папке:

«C:\Program Files\Topomatic Robur <Type> 16.0\Icons»

Если директория Icons отсутствует по указанному пути, создайте её вручную.

Правила именования файлов иконок

Имя файла иконки должно соответствовать следующему шаблону:

<IconId>_<Size>dp_<Scale>x.png

Элемент Описание
<IconId> Имя иконки. Оно используется в качестве значения параметра «icon» при описании элементов графического интерфейса в plugin-файлах
<Size> Исходный размер иконки. Допускается указывать значения: «16» или «32». Программа ищет файл иконки соответствующего размера в зависимости от значения параметра «size» элемента графического интерфейса. Если для параметра «size» установлены значения «small» или «middle», программа ищет файл с исходным размером 16dp. Для значения «large», ищется размер 32dp.
<Scale> Масштаб указывающий, во сколько раз увеличен размер исходного изображения в этом файле.
Допустимые значения: «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 16×16
my_custom_icon_16dp_1.5x.png 24×24
my_custom_icon_16dp_2x.png 32×32
my_custom_icon_16dp_2.5x.png 40×40
my_custom_icon_16dp_3x.png 48×48
my_custom_icon_32dp_1x.png 32×32
my_custom_icon_32dp_1.5x.png 48×48
my_custom_icon_32dp_2x.png 64×64
my_custom_icon_32dp_2.5x.png 80×80
my_custom_icon_32dp_3x.png 96×96

Элементы графического интерфейса использующие иконки

Элемент Описание
Кнопка объект содержащий параметр «button» или объект секции "action"
Список элементов объект с массивом элементов «items»
Элементы структуры проекта объект секции "cores"
Панель объект секции "panels"

Пример plugin-файла

Ниже приведён пример plugin-файла, содержащий примеры привязки иконок к элементам интерфейса:

icon_binding.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":[
        // Раскрывающийся список элементов
        {
          // В соответствии с шаблоном "<IconId>_<Size>dp_<Scale>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\""
    }
  }
}
developers/references/icons.txt · Последние изменения: 2023/01/25 10:38 — proxor