.. SimpleUI documentation master file, created by sphinx-quickstart on Sat May 16 14:23:51 2020. You can adapt this file completely to your liking, but it should at least contain the root `toctree` directive. Векторная графика ======================== .. image:: _static/vector.PNG :scale: 35% :align: center Начиная с версии 10.00 добавлена возможность использовать в экранах векторные графические объекты, нарисованные в векторном редакторе или сгенерированные из кода, управлять ими из обработчиков (онлайн и оффлайн), получать события. Общая идея – возможность размещения в контейнерах графичесикх полей, в которых есть некий рисунок(схема), состоящая из объектов к которым можно обратиться из кода по тегам (теги устанавливаются в редакторе), которые взаимодействуют с пользователем (пользователь может например нажимать) – т.е. объекты не только отображаются но и генерируют события, которые можно обработать в обработчике. В общем случае работа с графикой начинается с векторного редактора, всторенного в приложение, где создается sug-файл (по сути JSON с объектами, размещенными на схеме). Потом этот файл можно прикрепить к конфигурации через Медиафайлы в конструкторе,ссылка на схему размещается в контейнере и далее с ним можно работать из обработчиков. Но такой вариант необязательный – файла может не быть. Схема склада, например может быть сгенерирована автоматически. Еще есть так называемый «режим редактирования» уже непосредственно в «экранах», где можно работать с хостом в пользовательском режиме. С общими принципами работы можно ознакомиться в видео: `Векторная графика в Simple UI `_ А также рекомендуется посмотреть примеры в конфигурации `Примеры `_ И статью с обзором режима: `Инфостарт: Векторная графика в Simple UI `_ Далее приведена справочная информация по используемым командам в различных режимах Важные принципы по работе с векторной графикой: * Элемент контейнера называется «Поле карты» * Экран должен быть **обязательно с отключенной прокруткой корневого контейнера**, либо жестко определять размеры карты. Нельзя вписать данный элемент Поле карты если он не имеет ширины или высоты. * Карты векторный редактор сохраняет в папку «Загрузки» (возможно изменится в других релизах) * Можно указывать имя карты в явном виде (по ключу медиафайла), можно через переменную Работа с ячейками и схемами хранения -------------------------------------- **map_highlight_cells** – установка цвета ячеек по адресам, параметр - JSON массив цветов и ячеек, например ``[{"color":"#f56042","cells":["1-1","1-2"]},{"color":"#2a60b8","cells":["2-4"]}]`` **map_add_move** – задание маршрута (шага) из ячейки в ячейку. Пример ``[{"from":"1-2","to":"2-2"},{"from":"2-2","to":"3-5]`` **map_nav_mode** - включает режим навигации с помощью алгоритмов **map_set_size** - задает относительные размеры холста. Пример параметра ``{"width":1000,"height":2000}`` **map_add_rows** – добавляет новый ряд ячеек с параметрами x,y – верхний левый угол, количество рядов и строк а также размер ячейки. Также задаются сразу адреса ячеек. Все переменные обязательны. Пример параметра команды: ``[{"x":20,"y":30,"row_count":5,"column_count":1,"cell_size":50,"tags":[["1-1","1-2","1-3","1-4","1-5"]]}]`` **map_clear_rows** - очистка списка рядов .. note:: Данную комманду имеет смысл использовать совместно с командой **map_set_size**, так как размеры и координаты указываемые для ячеек должны быть пропорциональны размерам виртуального холста Работа с событиями и тегами ----------------------------- При работе с объектами, подписанными тегами возникают следующие события c event = MapAction: * map_action_down – нажатие на объект * map_action_up - отпускание объекта * map_text_input – ввод текста в объект Взаимодействие с объектами, кроме рядов ячеек ------------------------------------------------ **map_set_color** – установить цвет элемента. Пример ``[{"tag":"arr1","color":"#000000"},{"tag":"btn1","color":"#000000"}]`` **map_map_set_visibility** – включить/выключить видимость элемента. Пример ``[{"tag":"arr2","visible":1},{"tag":"btn2","visible":1}]`` Работа с картой --------------------- **map_edit_mode** – включение режима пользовательского редактирования. С пустым параметром **map_background_picture** – установка фона – картинки. Принципы работы такие же как с картинками в Simple UI **map_background_html** – установка в качестве картинки html на экране, по сути скриншот содержимого html. Важно! Данный метод можно вызывать только на экране, где есть html поле, т.е. до экрана в котором присутствует поле карты. Таким образом если нужно передать на редактирование печатную форму/отчет html, то должно быть 2 экрана – сначала html, потом экран редактирования **map_save** – сохранение того, что нарисовал пользователь вместе с фоном. В случае с включенным режимом mm_local возвращается переменная **map_saved_file** с именем файла, куда это записалось, если не включен этот режим то возвращается в **map_saved_base64** **map_zoom** – увеличение карты. Пример «1.5» - увеличение в 1,5 раза **map_move_x** и **map_move_y** – сдвиги по осям. Имеет смысл использовать совместно с **map_zoom**. Можно указывать положительные (вправо, вниз) и отрицательные (влево, вверх) значения **map_edit_mode** – включение режима пользовательского редактирования. С пустым параметром Запуск редактора карты в пользовательском режиме -------------------------------------------------- **RunVectorEditor**, <путь к файлу карты *.sug> - открывает векторный редактор в режиме редактирования заданного файла, без возможности смены (если файла нет-создает). Доступна только кнопка сохранения. В случае успешного сохранения будет сгенерировано событие "vector_editor"