Адаптивный рабочий стол из SVG с вкладками и анимацией от kuzkov.info

Публикация № 1402414

Разработка - Работа с интерфейсом

рабочий стол дизайн интерфейс SVG морда js css kuzkov.info Кузьков адаптивность

Пример подхода построения произвольной морды рабочего стола из SVG с адаптивностью, обработкой щелчков, перестроением при отразмерке и простой анимацией при наведении. Без каркасов типа Vue, React и прочего усложнения из веб-мира. Только базовые SVG примитивы + несколько строк JS кода для проброса событий + несколько строк CSS стилей для анимации при наведении.

Цель

Опробовать подход построения морды рабочего места на чистом 1С коде с наименьшими применением js и css технологий. В качестве движка для зрительного отображения возьмем ПолеHTMLДокумента и базовые SVG примитивы.
Также к требованиям добавим работу в 8.3.10 (ie) и 8.3.15 (webkit). Проверять все будем в тонком клиенте, как в самом применяемом режиме работы.

Отступление

Случайно увидел на одном ютуб-канале видео выпуск, в котором обсуждалось построение одной медицинской 1С конфигурации с применением SVG картинок. Если правильно помню, это "МедАнгел". Да, я их запомнил потому, что докладчик назвал вещи своими именами и назвал вражеский язык вражеским. Так вот, в ходе просмотра доклада я подумал, а зачем такие сложности при работе с svg графикой ? Все ведь можно делать гораздо проще с применением простых подручных инструментов. Зачем размазывать сборку SVG по портянкам кода, зачем отображать в картинках и еще много всяких "Зачем".
В данной публикации я хочу показать свое возможное решение данной задачи. Сразу оговорюсь, что основная цель это просто показать саму возможность и кратко описать принципы, потому времени на настройку идеального внешнего вида и чистого 1С кода не выделял.

Подготовка

Хоть мы и стремимся использовать только родные технологии, нам нужны будут дополнительные знания.

А именно следующее:
 

Формат SVG картинок Для построения зрительной основы.
Описания основных фигур https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial/Basic_Shapes
более чем достаточно для пуска.
2 часа изучения
Шаблонщик //infostart.gubaidullin.ru/public/549791/
Время на прочитать, скачать и изучить.
0.5 часа
Базовые css перемещения Для анимации. Необязательно для начала работы https://habr.com/ru/post/135816/ 1 час
Данная публикация Как исходная точка изучения. Время на прочитать, скачать и изучить. 0.5 часа
     
     
    Итого: 3-4 часа


Итак, цели будем достигать следующими шагами:
*) Нарисуем svg картинки желаемого рабочего места;
*) Обернем в шаблонщик и получим готовые шаблоны;
*) Создадим html обертку с js кодом для взаимодействия;
*) Встроим полученные шаблоны и обертку в общие макеты;
*) Создадим общую форму для рабочего места и пропишем ее открытие при пуске 1С конфигурации;
*) Пропишем алгоритмы в общей форме;
*) Проверим в 8.3.10 и 8.3.15;

Нарисуем svg картинки желаемого рабочего места

Вообще нет разницы, как вы эту картинку сделаете. Руками в правщике notepad++ или для простейшего наброска svg можно воспользоваться веб-сервисами, коих сейчас достаточно много.

Нам главное получить основу, которую дальше будем оборачивать в шаблонщик.

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

Я за полчаса нарисовал их в Графите. Как я ранее писал, Графит уже умеет работать с svg форматом.

 


[Экроснимок Графита с вкладкой Документы. 1.1.png]

Обернем в шаблонщик и получим готовые шаблоны

Предвижу вопрос: Что такое шаблонщик и для чего в него оборачивать ?
Отвечаю.
Шаблонщик это программа, которая позволяет описывать желаемый результат в более явном виде => мы описываем нужный результат в шаблоне, а шаблонщик его собирает по параметрам.
Шаблонщик, шаблон и параметры можно понимать как объект Запрос и ТекстЗапроса и ПараметрыЗапроса соответственно.

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

Подход 1 (императивный)

*) Создаем массив для хранения полученных документов;
*) Берем первый документ и сравниваем дату с вчерашней;
Если Истина
*) Сравниваем пометку удаления;
Если Истина
*) Добавляем документ в массив документов;
*) Запускаем цикл заново по следующему документу;

Подход 2 (декларативный)
       
*) Создаем объект "Запрос";
*) Пишем текст запроса = "Выбрать первые 10 Документ.Ссылка ИЗ Документ ГДЕ Дата Между &ВчераНачало и &ВчераКонец И ПометкаУдаления = Истина";
*) Устанавливаем параметры и запускаем выполнение;

Дальше запрос на sql сервере сам выполнится по алгоритму, описанному в Подход 1. Результат тот же, а наших действий меньше (вкалывать должен робот, а не человек).

Так вот, шаблонщик работает точно по такому же принципу. Мы описываем шаблон с параметрами и получаем готовый результат, а не склеиваем нужный текст из кусочков простынями 1С кода.
Ага, надеюсь вводная информация понятна и двигаемся дальше.

У нас есть статичная svg картинка, а нам нужно сделать из нее адаптивку.
Поясню, что имеется в виду. Нам надо перестраивать svg картинку каждый раз при изменении размеров поля отображения, чтобы зрительно выглядело без горизонтальной крутки и занимало все полезное пространство.
Соответственно, надо каждый раз отлавливать событие отразмерки, перестраивать svg картинку под текущие размеры и устанавливать svg картинку опять в поле отображения.
Таким образом у зрителя будет складываться ощущение, что он работает с адаптивной веб-страничкой. Нам именно это и нужно :)

Дальше нам надо определиться с параметрами, которые мы будем передавать в шаблон. Вероятнее всего это будет только "Ширина" и "Высота". Все остальные расчеты будут производные от этих параметров.
Возьмем svg файл вкладки "Документы" и добавим в текст следующий код

 


[Экроснимок кода шаблонщика для расчета параметров. 1.2.png]

Сам svg текст изменим следующим образом, заменив конкретные значения на рассчитанные параметры для рамки и положения плитки.

 


[Экроснимок svg текста вкладки Документы с параметрами. 1.3.png]

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

Вот тут и проявляется большой плюс svg в том, что мы можем управлять положением всех элементов межобозревательно и с точностью до пикселя. Нам нет нужности изучать блочную модель css, flexbox, статику, относительность и абсолюты для положения. Мы просто их не используем, а делаем все на svg формате.

Создадим html обертку с js кодом для взаимодействия

Для html обертки возьмем следующий код, в котором:
*) Прописаны метатеги для отключения режима обратной совместимости для ie обозревателя;
*) Прописано управление полосами крутки и отключены отступы с полями;
*) Добавлен div блок с идентификатором для вставки svg картинки;
*) Добавлена кнопка, которую мы будем виртуально нажимать для события "ПриНажатии" при отразмерке;
*) Добавлено два блока js кода, которые нужны для установки картинки и для вызова события отразмерки с пробуксовкой;

 


[Экроснимок html обертки с пояснениями. 2.png]

Пропишем алгоритмы в общей форме

Установка заглушки при открытии нужна для того, чтобы вызвать событие "ПолеРабочегоСтолаДокументСформирован", в котором данные Ширина и Высота уже определены в ПолеHTMLДокумента и их можно получить для построения шаблона.

 

[Экроснимок установки макета при открытии. 7.png]

Если пробовать сразу загрузить шаблон, то он будет перерисовываться два раза: первый раз он будет кривой (еще нет данных по размерам) и только во второй раз svg картинка  будет правильно сформирована.


[Гифка двойной перестройки svg картинки при пуске. 3.gif]

С описанным выше подходом все сразу строится правильно при открытии.

 


[Гифка сразу правильного открытия svg картинки при пуске. 4.gif]

Остальные моменты в 1С коде вполне очевидны и нет смысла их дополнительно описывать.

Проверим в 8.3.10 и 8.3.15

Как было описано выше, данный подход должен работать и в 8.3.10 (ie обозреватель) и в 8.3.15 (webkit движок). Это вполне получилось с некоторыми оговорками.
Например, в ie обозревателе сходу не завелась некоторая анимация для увеличения при наведении. Для данной публикации это не критично, потому оставил только в webkit.


[Гифка 8.3.10. 5.gif]

 


[Гифка 8.3.15. 6.gif]


Выводы

Время подводить некоторые итоги и делать выводы по результатам.

Низкий порог входа

Для начала построения своей морды в 1С достаточно освоить только SVG формат за несколько часов. При этом сохраняются все возможности для дальнейшего обучения и развития функционала (css, js и прочее) на этой базе при нужности решения более сложных задач купцов.

Универсальность решения

В 1С платформе ПолеHTMLДокумента существует с начала восьмой версии, потому это должно работать почти на всех конфигурациях в любом режиме запуска (толстый, тонкий, веб-клиент) в файловой и серверной базе.
Допускаю, что это должно работать и в мобильном клиенте также.

Большие возможности оформления

Внешний вид создаваемой морды рабочего стола, рабочего места или витрины данных на стене определяется только вашей фантазией и целями.

Применение родных управляторов для взаимодействия

Предложенный выше подход на svg подразумевает минимальное взаимодействие (переход по вкладкам, нажатие на кнопки и т.п.). Формат svg это больше картинка, чем функционал. Потому в svg отсутствуют родные управляторы, типа "Флажок", "Поле ввода", "Список выбора" и прочее. Для этого уже надо подключать html разметку и располагать родные управляторы с абсолютным положением. Но могу вас заверить, что html это тоже простейший язык разметки, который осваивается за несколько часов.
Вполне возможно, что одну из следующих публикаций посвящу именно этой теме, в которой построим рабочее место на svg + html управляторы.

Скорость работы

Я вел разработку в файловой версии, потому замеченные задержки на время построения шаблона были вполне малы и считаю их допустимыми. Если у вас серверная версия, то предполагаю, что задержки могут быть чуть больше. Тут дело в том, что предложенный шаблонщик построен на таблице значений и Выполнить(), значит должен работать только на сервере. А это подразумевает обмен данными между клиентом и сервером для каждого обновления svg картинки.

Подключение внешних обозревателей

Если подключить выдачу SVG шаблона через http-сервисы, то созданную SVG морду можно отображать во внешнем обозревателе. Да, она должна будет отображаться ровно в таком же виде, как и в 1С.
Только нужно будет продумать, где хранить временные данные между запросами, ведь 1С сервер построен по технологии "забывающий", а это значит, что данные забываются между http запросами. Как вариант, использовать куки. Но это уже тема другой публикации.

Скачать файлы

Наименование Файл Версия Размер
Конфигурация для потыкать

.cf 60,38Kb
4
.cf 60,38Kb 4 Скачать
Файл SVG вкладки Справочники

.svg 59,43Kb
1
.svg 59,43Kb 1 Скачать
Файл SVG вкладки Документы

.svg 79,64Kb
2
.svg 79,64Kb 2 Скачать

Специальные предложения

Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. skyboy13 9 15.03.21 10:01 Сейчас в теме
для медицины svg очень подходит, интерактивная отрисовка зубов, частей тела, расписания работы и т.д.
2. serg33rus 01.04.21 16:44 Сейчас в теме
Красиво. Реально красиво. В плане технологии. Надо будет взять на вооружение.
3. pvlunegov 167 21.04.21 14:55 Сейчас в теме
У вас упоминается "Графит" что это такое, просьба указать ссылку.
Оставьте свое сообщение

См. также

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

Работа с интерфейсом v8 ERP2 УТ11 Россия Абонемент ($m)

Предлагаю альтернативный вариант добавления динамически создаваемых элементов и реквизитов на форму.

1 стартмани

09.09.2019    14431    28    bmk74    6    

Интерактивная справка по объектам 1С (подключаемое расширение)

Практика программирования Работа с интерфейсом v8 ERP2 Абонемент ($m)

База знаний, подключаемая к объектам основной базы. Пополняется интерактивно, формируется в виде статей прямо в 1С (текст, картинки, таблицы, ссылки). Есть возможность прикрепления файлов, привязки к объектам 1С, возможности рейтинга и комментирования пользователями.

3 стартмани

29.09.2020    10553    65    sapervodichka    43    

Визуальный html WYSIWYG редактор без сторонних библиотек на управляемых формах

Прочие инструменты разработчика Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

Простой и удобный html редактор без сторонних библиотек.

1 стартмани

31.08.2020    5904    10    ivanov660    12    

Делаем из СКД Excel (ну, почти)

Работа с интерфейсом v8 Абонемент ($m)

Несложный в использовании способ внедрить в обычный отчет СКД возможность редактировать значения ресурсов отчета (а-ля Excel) и получать отредактированные значения для дальнейшей обработки.

1 стартмани

26.01.2020    12087    20    herfis    16    

Расширенная настройка динамического списка УФ Промо

Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

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

1 стартмани

31.05.2017    35853    160    tormozit    25    

Индикация прогресса выполнения фонового задания на управляемой форме внешней обработки

БСП (Библиотека стандартных подсистем) Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

Внешняя обработка с фоновым выполнением и индикацией процесса для любой конфигурации на основе БСП >= 2.3 без изменения конфигурации и встраивания обработки в "Дополнительные отчеты и обработки".

1 стартмани

27.12.2019    14806    26    1sig    14    

Декомпиляция условного оформления

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Обработка автоматически генерирует полный код создания условного оформления формы любой сложности. Достаточно настроить для формы в конфигураторе условное оформление, а затем выбрать данную форму в обработке. В результате будет сгенерирован программный код создания условного оформления.

2 стартмани

23.12.2019    9605    44    XilDen    7    

Многоуровневые списки выбора с оформлением элементов

Практика программирования Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

Данная статья - попытка решить один маленький кусочек большой проблемы платформы 1С, а именно - бедные и невыразительные пользовательские интерфейсы. Поскольку 1С в режиме управляемого приложения позволяет задействовать веб-клиент, то хочется реализовывать интерфейсы как у взрослых веб-приложений - красивые, дружелюбные для пользователя и, желательно, с положительным UX. Возможно, кто-то со мной не согласится и скажет, что учетные системы должны быть строгие и линейные. Но мы все знаем, что 1С - это уже не только про бухгалтерию. Небольшое отступление для разработчиков, работающих с типовыми конфигурациями. Я не знаю, использует ли фирма 1С что-то похожее в своих разработках. Если да, то данная статья навряд ли будет вам полезна.

1 стартмани

17.12.2019    10600    2    azhilichev    5    

Удобный выбор из таблицы/дерева в УФ

Практика программирования Работа с интерфейсом Разработка v8 v8::УФ 1cv8.cf Абонемент ($m)

Выбор из таблицы значений или дерева значений в выпадающем списке рядом с полем ввода - УФ, быстро и просто!

1 стартмани

12.08.2019    15896    8    Yashazz    18    

[Механизм интерфейса] Свой флажок (чекбокс)

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

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

1 стартмани

09.08.2019    18940    20    rpgshnik    43    

Отбор на управляемой форме из списка значений

Практика программирования Работа с интерфейсом Разработка v8 v8::УФ 1cv8.cf Абонемент ($m)

Пример простого удобного отбора любых данных ссылочного типа на управляемой форме. Работа обработки проверена на релизе: 1С:Предприятие 8.3.13.1513.

1 стартмани

09.08.2019    25102    26    nagaitseff    6    

Открывашка ячеек таблиц Промо

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Глобальное сочетание клавиш для открытия объекта по ссылке из текущей ячейки любой таблицы в большинстве управляемых форм

1 стартмани

27.10.2018    19684    12    tormozit    31    

Обработка-редактор HTML

Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

Редактор HTML для управляемого интерфейса 8.3.

1 стартмани

10.06.2019    10705    81    ValeriVP    11    

Виртуальная (экранная) клавиатура для управляемых форм

Инструментарий разработчика Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

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

1 стартмани

14.12.2018    13960    67    asdfgcom    16    

Рисуем и распознаем нарисованное при помощи нейросети

Практика программирования Работа с интерфейсом v8 v8::УФ 1cv8.cf Абонемент ($m)

Используем нейронную сеть для распознавания нарисованных объектов.

1 стартмани

03.10.2018    16517    44    DO_WHILE_LOOP    28    

Лучший подарок для бухгалтера - счёты 8.2 (со звуком) Промо

Работа с интерфейсом v8 1cv8.cf Россия Абонемент ($m)

(Толстый клиент) Подарите бухгалтеру счеты, и он(а) Вас никогда не забудет.

1 стартмани

13.05.2011    42690    922    Tatitutu    45    

Рисуем диаграммы в metadata.js

Инструментарий разработчика Работа с интерфейсом v8 v8::СКД 1cv8.cf Абонемент ($m)

Не одной же литературой заниматься?

1 стартмани

20.09.2018    19469    4    1c-intelligence    77    

Визуализация событий на временной шкале средствами "Поле HTML документа"

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Интересный способ наглядно отобразить события на временной шкале. Например, может быть применен для красивого вывода документов по клиенту. Тестировалось на платформе 8.3.12.1469

1 стартмани

31.07.2018    26453    142    Plotks2017    27    

Продвинутое рисование в табличном документе (стрелок и не только)

Практика программирования Работа с интерфейсом v8 Абонемент ($m)

Вспоминаем геометрию и основы компьютерной графики. Матрицы и аффинные преобразования на плоскости.

1 стартмани

24.07.2018    18224    20    WalterMort    30    

Работа с данными выбора

Практика программирования Работа с интерфейсом v8 Россия Абонемент ($m)

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

1 стартмани

17.07.2018    57868    22    kalyaka    16    

Иерархическая диаграмма

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Концепция диаграммы по иерархической структуре данных, например по номенклатуре (продажи или остатки на складах).

2 стартмани

17.06.2018    16427    19    DrAku1a    6    

Рисуем стрелки в табличном документе

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Рисуем стрелки средствами 1С .

1 стартмани

01.06.2018    17435    9    pm74    9    

Интерактивный интерфейс Промо

Рабочее место Работа с интерфейсом v8 1cv8.cf Россия Абонемент ($m)

Обработка (отдельная панель меню), позволяющая настраивать интерфейс пользователя интерактивно (права не настраивает). Мне очень пригодилось, так как приходится прописывать индивидуальный интерфейс, каждому пользователю (а их уже сотни). Выложил 2 версии одна в виде таблицы, вторая в виде выпадающего меню

1 стартмани

29.10.2011    20044    65    Vin_Tik    9    

Программная работа с графическими схемами. Готовое решение

Инструментарий разработчика Универсальные обработки Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Работоспособное, проверенное на практике, простое и удобное программное управление графическими схемами.

1 стартмани

18.02.2018    21144    22    Yashazz    13    

Тестирование интерфейса в обычном приложении 8.2 при помощи SikuliX

Инструментарий разработчика Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Как же не хватает клиента тестирования на платформе 8.2. Не кликнешь на кнопку, не выберешь из списка, не проверишь видит ли надпись пользователь. Воспользуемся внешним инструментом SikuliX, который позволит нам протестировать функционал форм. Данный инструмент легко встраивается в линию сборки и может "дружить" с уже известным многим Open-source продуктами.

1 стартмани

03.01.2018    32714    5    kraynev-navi    41    

Программное формирование форматированной строки в стиле html+inline CSS

Работа с интерфейсом Инструментарий разработчика v8 1cv8.cf Абонемент ($m)

Если вам приходилось работать с форматированными строками программно, то вы знаете, какая это боль. Данное решение облегчает программное формирование таких строк.

1 стартмани

18.11.2017    37327    43    bonv    11    

Программное создание элементов графической схемы (через XSLT)

Практика программирования Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

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

1 стартмани

20.07.2017    23407    65    lazarenko    19    

Простой редактор плана помещения JavaScript

Практика программирования Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

На ресурсе сейчас очень много решений, которые позволяют редактировать карты, используя географические схемы. Так же много решений, которые позволяют редактировать объекты онлайн веб-карт. Мне же нужно было простое решение, для того чтобы расставить квадратные объекты на плане, показать их пользователю. Ну и распечатать, опять же. Я решил написать простенький редактор на JavaScript с использованием библиотеки Raphael.

1 стартмани

23.11.2016    24083    99    igel9780    22    

Настройка начальной страницы (Рабочего стола)

Работа с интерфейсом Рабочее место Универсальные обработки v8 1cv8.cf Абонемент ($m)

Альтернатива стандартной настройке начальной страницы. В типовой доступны лишь те формы, что явно "разрешены" разработчиком в режиме конфигуратора. Эта обработка позволяет собрать "Рабочий стол" из любых подходящих форм в пользовательском режиме. Без программирования. БСП не используется. Не расширение. Универсальна, т.е. подойдет для любой конфигурации (в т.ч. самописной).

2 стартмани

19.10.2016    41386    237    Erne100    30    

Цветовые схемы для конфигуратора 1С (Популярные цветовые схемы для C# - теперь и для 1С) (Теперь 8.2 - 8.3) Промо

Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Тёмные цветовые схемы кода. То, что было доступно всем передовым средствам разработки, теперь доступно и на 1С. 13.12.17 UPD: Теперь работает с платформой 8.3

3 стартмани

07.10.2013    40595    176    Chernov_Dmitriy    82    

NativeDraw: Компонента рисования для 1С [V2.6.2] Промо

Разработка внешних компонент Работа с интерфейсом v8 1cv8.cf Абонемент ($m)

Рисуйте в формах 1С, также предлагается небольшое количество нерисовальных функций

1 стартмани

13.07.2015    50444    466    ПерваяСистема    147