Работа с графикой в браузере (SimpleWEB). Векторный редактор

20.03.24

Интеграция - WEB-интеграция

В SimpleWEB добавились средства для работы с графикой и отслеживание событий мыши, в онлайн редактор https://seditor.ru:1555/ добавился «Векторный редактор» на этом API. Теперь можно нарисовать схемы складов на ПК, сделать карты (*.sug-файлы) для мобильной платформы SimpleUI, выводить данные из 1С в графическом виде. Таким образом, API для работы с векторными файлами теперь есть и в веб- и в мобильной платформе, а также средства для создания и редактирования векторных файлов есть тоже в обеих платформах.

Скачать исходный код

Наименование Файл Версия Размер
Пример графики в SimpleWEB
.zip 20,47Kb
1
.zip 20,47Kb 1 Скачать

Для чего это нужно?


1)    Рисовать интерактивные схемы складов, территорий, стеллажей, зданий и т.д. для мобильной и веб-платформы в редакторе в браузере. Что это такое, для мобильной платформы можно посмотреть тут //infostart.ru/1c/articles/1736200/

2)    Интерактивные – означает, что это не просто картинка, а то, что с ней можно взаимодействовать из кода и со стороны пользователя – например, подсвечивать ячейки склада в разные цвета. Пользователь может кликнуть на ячейку и получить остатки в ней (Примеры показаны тут http://wms.simpleui.ru/)

3)    Карты складов, неважно, где они нарисованы и в каких единицах измерения – дают информацию в виде матрицы относительных расстояний между ячейками, что позволяет решать оптимизационные задачи вроде «задачи коммивояжера», что делает планирование маршрутов более оптимальным и оптимизирует работу склада в целом.

4)    Наконец, и веб, и мобильное приложение с картами теперь можно использовать в качестве динамической аналитики по складам – отображать тепловые карты загруженности, работать в качестве киоска, получая данные из веб-сокета.

 

Векторный редактор в веб


В веб-конструкторе https://seditor.ru:1555/ теперь есть векторный редактор, который позволяет редактировать sug-файлы, которые понимает мобильная платформа SimpleUI. В мобильной платформе также есть свой векторный редактор, который может все то же самое, но на компьютере работать удобнее, т.к. есть мышь. Единственное отличие – в веб нет «карандаша»

Т.е. на компьютере создаются sug-файлы со схемами, которые потом можно отправить на устройства, встроить в конфигурации для мобильных устройств и использовать на экранах мобильного решения.

В редакторе:

 

 

На мобильной платформе редактор и пример встраивания в экраны:

 

 

Исходники веб-редактора тут: https://github.com/dvdocumentation/web_simple_editor

 

Работа с графикой из кода

 

Инициализация холста

Команда стека InitCanvas должна быть выполнена в начале для инициализации поля (необходимо выполнить в обработчике события onPostStart, это важно, т.к. в onStart элемент еще не создан), на котором происходит вывод графики и отслеживание событий мыши. Без инициализации не будет происходить отслеживание событий мыши.

В качестве параметра передается JSON с ключами,  в котором указана переменная поля типа Поле карты. Т.е. для того чтобы вывести графику на экране надо разместить элемент типа «Поле карты» и задать его переменную. В примере ниже его переменная – “map”

Пример:

hashMap.put("InitCanvas",json.dumps({"map":{"height":500,"width":500}}))

 

Вывод графических примитивов

Вся графика выводится одной командой SetCanvas , которой передается массив элементов, который надо нарисовать. Аналогично команде InitCanvas ключом является переменная элемента Поле карты.
В массиве могут быть следующие типы элементов

1.    Текст

{"type":"text","x":10,"y":50,"text":"Привет мир", "color":"#0a1a45","size":15}

2.    Линия

{"type":"line","x1":5,"y1":5,"x2":150,"y2":.65 "color":"#0a1a45","strock_size":3}

3.    Стрелка

{"type":"arrow","x1":5,"y1":5,"x2":150,"y2":65 "color":"#0a1a45","strock_size":3}

4.    Ячейка. 

{"type":"cell","x1":50,"y1":50,"x2":75,"y2":75, "label":"1-1", "fill_color":"#c6f2f5"}

5.    Прямоугольник.

{"type":"rect","x1":20,"y1":20,"x2":60,"y2":40, "color":"#0a1a45","strock_size":el.strock_size,"fill_color":"#ffffff"}

Массив с этими элементами передается в SetCanvas

Пример

hashMap.put("SetCanvas",json.dumps({"map":{"height":CANVAS_H,"width":CANVAS_W,"draw":draw_array}}))

 

Отслеживание событий мыши

 

Когда холст создан, все события мыши на нем – перемещение, нажатие/отпускание кнопки отслеживаются в событии onInput с listener= canvas_mouse_event

Для уточнения также в переменную поля карты записывается JSON с детальной информацией по событию мыши:

type – тип события мыши:
•    mouseDown – нажатие основной кнопки мыши
•    mouseDownOther – нажатие другой кнопки мыши (например правой для правшей)
•    mouseDoubleClick – двойной клик. Двойной клик не совместим с mouseUp, т.к. два этих события будут неразличимы
•    mouseMove  - перемещение мыши
•    mouseUp – отпускание мыши
x, y – координаты x и y на холсте

Также можно временно отключить и включить отслеживание событий: 
StopCanvasEvent – выключает отслеживание событий
StartCanvasEvent – включает отслеживание событий

 

Пример на веб-платформе

 


Примером использования этого всего на веб-платформе является сам по себе  векторный редактор. Исходники можно посмотреть https://github.com/dvdocumentation/web_simple_editor. Процесс «Векторный редактор». В файле обработчиков current_handlers.py все функции послед комментария #Векторный редактор.

Но также набросал примерчик для веб платформе, где показал, как можно в веб-решении:

1) прицепить готовую sug-схему склада

2) вывести некую тепловую карту

3) вывести некий маршрут

 

Для развертывания примера надо:

1) скачать архив

2) поставить Python например 3.8

3) Выполнить pip install -r requirements.txt

4) запустить python3 app.py

5) открыть браузер http://localhost:1555/

 

Телеграм-канал проекта, в котором масса всего полезного:  https://t.me/devsimpleui

И еще чат: https://t.me/simpledevchat

simple схема склада

См. также

"Штрихкод-информер" - мобильный ТСД и прайс-чекер в смартфоне

Мобильная разработка Сканер штрих-кода Терминал сбора данных Управляемые формы Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

Сбор заказов, инвентаризация, проверка ценников, просмотр полной информации об остатках и ценах со смартфона Онлайн. Отправка данных со смартфона выполняется либо напрямую в открытую форму документа, отсканировав QR-код, либо в общую корзину учетной системы, не подходя к компьютеру. Кассир или оператор сможет просмотреть список присланных данных и загрузить в любую форму, поддерживающую работу с ТСД. Для работы с мобильным приложением требуется опубликовать HTTP-сервис из поставляемого расширения.

2880 руб.

03.12.2018    55796    166    102    

163

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020    16181    14    18    

14

SALE! 25%

Что нам стоит бота построить? Нарисуем - будет жить! Графический конструктор телеграм-ботов/Telegram

Мобильная разработка Мессенджеры и боты Платформа 1С v8.3 Платные (руб)

Теперь создать telegram-бота - элементарно. Достаточно просто нарисовать блок-схему телеграм-бота, и он сразу заработает. Это возможно при использовании Графического конструктора телеграм-ботов. Это единственный конструктор ботов для telegram, чье качество и функционал подтверждены фирмой 1С, есть сертификат 1С:Совместимо. Расширение в интерактивном режиме, с помощью блок-схем, позволяет с минимальными трудозатратами создать телеграм-ботов в любой конфигурации, работающей на платформе «1С:Предприятие 8.3».

13200 9900 руб.

27.12.2021    34477    86    161    

182

Интеграция 1С — Битрикс24. Обмен задачами

Сайты и интернет-магазины Интеграция WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 Управленческий учет Платные (руб)

Интеграция 1С и Битрикс24. Разработка имеет двухстороннюю синхронизацию 1С и Битрикс24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (платформа начиная с 8.3.23). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    18297    10    15    

16

"Мобильный ТСД" - инвентаризация и сбор штрихкодов для iOS и Android

Сканер штрих-кода Терминал сбора данных Мобильная разработка Монитор заказов Оптовая торговля Розничная торговля Ценообразование, анализ цен Платформа 1С v8.3 Мобильная платформа 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Розничная и сетевая торговля (FMCG) Оптовая торговля, дистрибуция, логистика Управленческий учет Платные (руб)

Простой мобильный терминал сбора данных для смартфонов на iOS и Android, не требующий сложных настроек и установки дополнительных программ. Обмен между Вашей 1С и мобильным приложением осуществляется через облачный сервис и расширение конфигурации. Работает с конфигурациями УТ 11, ERP, КА2, Розница 2, Розница 3, УНФ 1.6, УНФ 3.0. Полнофункциональный демо-доступ для своей конфигурации можно запросить в настройках мобильного приложения - все необходимое придет на почту автоматически.

2000 руб.

22.04.2019    93002    532    186    

302

Склад 15 ВЕЩЕВОЙ - автоматизация складов с маркированным товаром

Логистика, склад и ТМЦ Мобильная разработка Платформа 1С v8.3 1С:Управление торговлей 10 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 Россия Платные (руб)

Программное обеспечение для автоматизации складских операций со встроенными функциями работы с маркированной продукцией. Предназначено для автоматизации всех товароучетных операций на складах, обычных и адресного хранения. «Склад 15 ВЕЩЕВОЙ» объединил в себе несколько товарных групп маркированного товара (ОБУВЬ, ОДЕЖДА, ШИНЫ, ПАРФЮМ, БАДы, ЮВЕЛИРНЫЕ ИЗДЕЛИЯ), которые чаще всего встречаются в складской логистике вместе.

33550 руб.

02.06.2023    3131    2    0    

0
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. John_d 5440 22.03.24 09:21 Сейчас в теме
Добрый день, Не очень понятно, как с нуля что-то нарисовать.
https://seditor.ru:1555/
Можете сделать статью с примером рисования простой схемы склада.
Оставьте свое сообщение