Векторная графика в Simple UI. Октябрь 2022

04.10.22

Разработка - Мобильная разработка

В симпл добавлена возможность использовать в экранах векторные графические объекты, нарисованные в векторном редакторе или сгенерированные из кода, управлять ими из обработчиков (онлайн и оффлайн) и многое другое, с этим связанное. Дополнение к основной статье https://infostart.ru/public/1153616/

Введение

Общая идея – возможность размещения в контейнерах экранов графического поля (поля карты), в котором есть некий рисунок(схема), состоящая из объектов, к которым можно обратиться из кода по тегам (теги устанавливаются в редакторе), которые взаимодействуют с пользователем (пользователь может, например, нажимать) – т.е. объекты не только отображаются, но и генерируют события, которые можно обработать в обработчике. Для чего нужно? Графика воспринимается лучше текста, поэтому мы, например, используем карты, навигацию, схемы, диаграммы и т.д. Это ускоряет время принятия решений и в частности, из карт, например, складов можно извлечь много пользы помимо чисто визуалки.

В общем случае работа с графикой начинается с векторного редактора, где создается sug-файл (по сути JSON с объектами, размещенными на схеме). Потом этот файл прицепляется через Медиафайлы в редакторе, размещается в контейнере и далее с ним можно работать из обработчиков. Но такой вариант  необязательный – файла может не быть. Схема склада, например может быть сгенерирована из кода. Еще есть так называемый «режим холста» уже  непосредственно в «экранах», где можно работать с хостом в пользовательском режиме - делать заметки на фотографиях или отчетах, печатных формах.

Представленные в этом релизе возможности - это пока самая база, чтобы обозначить направления, архитектуру, формат. С чего-то надо было начинать. Проект будет развиваться параллельно, будут добавляться графические примитивы, возможности редактирования и т.д.

 

Работа с картами (складов, стеллажей и т.д.)

 

 

Можно нарисовать карту склада (вид сверху), каких то отдельных стеллажей (вид во фронт) или еще какие то схемы, связанные с ячейками, адресами и т.д.

Ячейки имеют адреса, по которым можно обращаться из кода – например, можно покрасить каким то цветом, с помощью команды map_highlight_cells 

Можно перехватить событие от пользователя нажатия а ячейку (причем два – нажатие и отпускание) и обработать в обработчике (например, также покрасить). На картинке ниже крашу в зеленый:

 


 

Можно строить прямые ходы из ячейки в ячейку напрямую с помощью команды map_add_move. Причем переходов может быть сколько угодно

Например:

hashMap.put("map_add_move",json.dumps([{"from":"1-2","to":"2-2"},{"from":"2-2","to":"3-5"},{"from":"3-5","to":"7-2"},{"from":"7-2","to":"9-5"},{"from":"9-5","to":"13-4"}]))

Есть также режим навигации (прокладка маршрута) между входами ячеек. Этот режим пока нуждается в  переосмыслении и доработке. Для этого в редакторе указываются "входы" ячеек и далее алгоритм простраивает по свободному пространству наикратчайший путь.

 

 

Можно сгенерировать карту из кода – т.е. взять пустой холст, указать некие условные размеры командой map_set_size и добавить ряды с ячейками командой map_add_rows. Это на случай, если есть в распоряжении координаты ячеек. Ну или нужно сгенерировать что-то условное.

Например вот 2 цикла - карта генерируется из кода:

rowslist=[]
  cellsize = 75
  shifty = 0
  n=0
  for i in range(3):
    shiftx=0
    for j in range(5):
      n+=1
      rowslist.append({"x":20+shiftx,"y":30+shifty,"row_count":5,"column_count":1,"cell_size":cellsize,"tags":[[str(n)+"-1",str(n)+"-2",str(n)+"-3",str(n)+"-4",str(n)+"-5"]]})
      shiftx+=1*cellsize+90
    shifty+=5*cellsize+100  
  
  hashMap.put("map_clear_rows","")
  hashMap.put("map_add_rows",json.dumps(rowslist)) 
  hashMap.put("map_add_move",json.dumps([{"from":"1-2","to":"2-2"},{"from":"2-2","to":"3-5"},{"from":"3-5","to":"7-2"},{"from":"7-2","to":"9-5"},{"from":"9-5","to":"13-4"}]))

 

И вот результат:

 

 

Какие применения есть у конкретно карт?

 



•    Показ маршрутов
•    Показ места на полках
•    Пользовательский ввод ячеек нажатием
•    Тепловые карты (оборачиваемость по ячейкам, заполненность ячеек и т.д.)
•    Обсчет, оценка оптимальности маршрутов для алгоритмов подбора маршрутов

 

Прочие векторные объекты, doodle интерфейс

 

 

Помимо рядов с ячейками есть также возможность назначить теги любым другим видам объектов, причем одинаковые теги можно назначать нескольким разным объектам, чтобы управляться с ними разом. Теги можно назначать даже для почеркушек карандашом

Сейчас видов графических примитивов немного, но планируется развивать проект параллельно с симплом.

Надписи на форме можно задавать в виде симпловских переменных (через @) , можно организовать поле ввода там же (через &).

Можно использовать awesome- иконки также как в обычном симпле через #

Что можно делать с этими объектами:

1.    Получать события нажатия и отпускания (в случае текстового ввода еще событие ввода текста)

2.    Раскрашивать в любой цвет

3.    Делать видимым / невидимым

 


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

 

Режим холста


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

Тут есть пара применений:

1. Фоткать и сразу что-то помечать на фото (например, дефекты). 

 


 

2.И есть еще такая возможность, как почеркаться на любой печатной форме  (они в симле - html, подробнее в статье тут //infostart.ru/1c/articles/1716745/) Это могут быть банальные росписи подписантов документа или, например, какие-то заметки в анкете. Это делать удобнее на планшете и стилусом, но за неимением можно в режиме скретча/зума  и на маленьком экране. Вот например:

 

 

Примеры лежат в комплекте разработчика в основной статье //infostart.ru/public/1153616/

Также подписывайтесь на мой телеграмм канал, чтобы быть в курсе событий https://t.me/devsimpleui

Вот видео с описанием возможностей и "как работать":

 

 

 

Android SimpleUI карта векторная графика

См. также

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

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

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

2880 руб.

03.12.2018    54927    139    102    

162

SALE! 25%

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

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

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

13200 9900 руб.

27.12.2021    33684    82    159    

177

"Мобильный ТСД" - инвентаризация и сбор штрихкодов для 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    92226    519    186    

296

Магазин 15 - приемка товара по штрихкодам или инвентаризация в торговом зале

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

Специализированное программное обеспечение для мобильных устройств со встроенным сканером штрихкодов. Позволяет быстро автоматизировать, оптимизировать рабочие места и бизнес процессы по учету товара в магазине. Например, приемку товара по штрихкодам или инвентаризацию прямо в торговом зале.

12950 руб.

30.05.2023    3441    2    0    

4

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

Мобильная разработка WEB-интеграция Мобильная платформа Абонемент ($m)

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

1 стартмани

20.03.2024    1577    0    informa1555    1    

40

Зачем нам 1С:Элемент

Мобильная разработка Языки и среды Бесплатно (free)

Flutter может быть использован с 1С:Предприятием для разработки кроссплатформенных мобильных приложений, обеспечивая единый интерфейс и функциональность на устройствах под управлением iOS и Android. Это позволяет создавать приложения с высокой производительностью благодаря использованию собственного движка рендеринга Flutter. Интеграция Flutter с 1С:Предприятием позволяет создавать мобильные приложения любого уровня сложности, интегрировать их в корпоративные информационные системы, а также реализовывать бизнес-логику

19.03.2024    8704    ROk_dev    67    

40

JavaScript в Simple

Мобильная разработка Бесплатно (free)

В SimpleUI и SimpleWEB, наряду с обработчиками на python и онлайн (1С и т.д.) добавляется интерпретатор JavaScript. В андроид платформе он скорее играет на поле python, т.к. является оффлайновым решением для самостоятельной обработки и расширяет аудиторию разработчиков для разработки самостоятельных решений. Дополнение к основной статье https://infostart.ru/1c/tools/1153616/

12.02.2024    1678    informa1555    0    

25
Комментарии
Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. bavkyz 3 04.10.22 08:34 Сейчас в теме
Добрый, с чего начать использовать Вашу разработку, у меня 1с Альфа-Авто 5.1. и 6?
2. informa1555 2648 04.10.22 08:58 Сейчас в теме
(1) Добрый день! Симпл - большая платформа по которой много материалов и примеров, но с простыми базовыми принципами. Начать лучше с "онлайн-режима" - обработчики с мобильного устройства будут обрабатываться на веб сервисе 1С. Конфигуратор лучше использовать "новый" - в комплекте разработчика в виде отдельного исполняемого файла. Хотя до марта 2022 конфигуратор был на 1С и в нем множество примеров -ее тоже можно посмотреть. В комплекте разработчика есть пример расширения который ставится на 1С для выполнения обработчиков онлайн, соотвественно в 1С вы все и прописываете. Например команды в этой статье также их 1С можно помещать в Переменные и они будут исполняться на устройстве, из него же вы будете получать события. Быстрый старт по работе с "новым" конфигуратором есть тут https://uitxt.readthedocs.io/ru/latest/gettingstarted.html
8. giaprog 05.10.22 08:43 Сейчас в теме
(2) ... может не в тему поста, но для ознакомления (разработки) работы SimpleUI в связке Конструктор+1с-обработчики можно использовать переписанное (вернее с добавлением функционала) расширение Split. Сделал на скорую руку, проверял на 8.3.21.1302. Расширение ставится на любую конфигурацию. Код обработчика вынесен в справочник, есть подсветка синтаксиса, конструктор запроса, конструктор форматной строки (Исходники брал тут https://github.com/salexdv/bsl_console - Благодарность разработчикам!!!).
Качайте, используйте https://disk.yandex.ru/d/Ng1cv_mTJrAJUg. Благодарю!
Прикрепленные файлы:
informa1555; +1 Ответить
3. user1466751 17 04.10.22 09:15 Сейчас в теме
(1)
По опыту лучше вообще не привязываться к 1С)
1С сама по себе, приложение мобильное на ТСД/телефоне само по себе. Пишите сразу на питоне (местная ORM вполне понятна) и юзайте локальную базу данных на устройстве.
При использовании в связке с 1С и исполнении обработчиков на 1С столкнетесь с плохим сигналом вифи на складе и все, пользовательский опыт будет отвратительным, не "продадите" идею бизнесу.
4. informa1555 2648 04.10.22 09:25 Сейчас в теме
(3) Ну не везде же плохой вайфай. Где то покрытие принципиально хорошее. Например в большой логистике(операторы) вообще нет смысла в оффлайне и локальном хранении - логика волновой сборки не будет работать, только онлайн строго. Более того где то даже через телефон работает (не склады) А так да, если писать на питоне то можно получить и оффлайн и онлайн и псевдоонлайн в одном флаконе.
5. bavkyz 3 04.10.22 09:32 Сейчас в теме
(2) (3) Спасибо за ответ, но не нашел никаких ссылок для скачивания по вашей ссылке выше ...
6. informa1555 2648 04.10.22 09:49 Сейчас в теме
(5) упс. Поправил ссылку.
7. giaprog 05.10.22 08:13 Сейчас в теме
Добрый день. Будем разбираться. Так и 3D ближе!!! Благодарю.
informa1555; +1 Ответить
9. kivals 5 06.10.22 12:40 Сейчас в теме
День добрый.
Пробую разбираться с SimpleUI - падаю на шаге документации:
...и перезапустите приложение (либо нажать в главном меню Обновить приложение). На устройстве должно появиться меню конфигурации – развертывание прошло успешно.

У меня ничего не появляется, в то время как адрес (скорректированный из QR кода) браузером на мобильном открывается нормально - загружает конфигурацию редактора
Куда копать? Что смотреть? Есть ли где-то логи?
Прикрепленные файлы:
video_2022-10-06_12-39-52.mp4
10. informa1555 2648 06.10.22 13:27 Сейчас в теме
(9) Добрый день! Хмм... Очень странно. Никогда такого не встречал. Попробуйте ui-файл закинуть на устройство и открыть симплом?
11. kivals 5 06.10.22 14:20 Сейчас в теме
(10) А вот тоже не нашел где выбрать файл )
Подскажите, что пропустил: в главном меню не вижу такого пункта, в настройках - тоже.
12. kivals 5 06.10.22 14:41 Сейчас в теме
(11) А, провтыкал слово "открыть". Да, так заработало - буду двигаться дальше, спасибо
13. informa1555 2648 06.10.22 14:50 Сейчас в теме
(12) Это не есть конечно решение, т.к. через файл подходит для распространения конечным клиентам, но неудобно для разработки (когда коммитить изменения надо мгновенно). Поэтому лучше конечно разобраться с сервисом... Может там vpn или что то такое. Попробуйте на другом может дейвасе?
14. al_zzz 309 29.11.22 14:17 Сейчас в теме
Здравствуйте, Дмитрий! А можно пользоваться векторной графикой в онлайн режиме?
- Хотелось бы формировать онлайн схему склада и раскрашивать ячейки в зависимости от наполнения.
Но непонятно, как сделать такой контейнер("поле карты") в конструкторе 1С и как указать в нём путь к файлу sig.
15. informa1555 2648 29.11.22 15:05 Сейчас в теме
(14) Здравствуйте! 100% можно. В конструкторе 1С я уже больше полугода ничего не делаю, все новые релизы на новом конструкторе. Вы пишете конфу на нем, обработчики в 1С (сплит режим). Там все через команды-переменные поэтому в 1С все будет.
Оставьте свое сообщение