Конструктор картинок CSS

    В ряде случаев, представление объектов в виде картинок делает пользовательский интерфейс более простым и интуитивно понятным. К примеру, карта склада с динамическим обновлением состояния и возможностью выбора стеллажа/ячейки  или рабочее место оператора системы управления АЗС, показанное ниже:

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

   В данной публикации представлен конструктор CSS изображений, упрощающий создание графических элементов с помощью поля HTML:

 
   Использование поля HTML + CSS рисование позволяет реализовать практически любые интерфейсные желания.
Основные плюсы способа:
- возможность использования в основных режимах клиентского приложения (управляемые и обычные формы, web и мобильный клиент) 
- возможность динамически формировать и загружать на форму сложные графические отображения объектов
- возможность реализации всей работы с HTML  на Клиенте, создание и обновление изображения не требует обращения на Сервер
- высокая скорость отрисовки, отсутствие подвисаний, миганий и прочих глюков даже при работе на "слабых" ПК
- кликабельность, возможность выбора любого элемента изображения, его идентификации и программной обработки клика.  

Основные минусы: 
- требуются базовые навыки HTML и CSS, иногда javascript
- формирование требуемых шаблонов HTML требует существенного времени и терпения.

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

Особенности:
- шаблон картинки формируется путем компоновки блоков HTML и придания им требуемой формы и цвета
- возможность редактирования в режиме конструктора более 50 свойств выбранного блока:

- результат отображается в поле HTML и динамически обновляется в процессе редактирования; 
- структура редактируемого шаблона представляется в виде дерева и виде готового текста HTML;
- возможность сохранения редактируемой структуры HTML в файл (как полностью, так и выбранного узла);
- возможность вставки нового блока копированием выбранного блока дерева HTML;
- возможность вставки нового блока из выбранного файла;
- возможность вставки нового блока из палитры основных фигур;
- возможность компоновки блоков в дереве HTML (Drag-and-drop, команды перемещения). 

Пример простого использования для управляемой формы:
- подготовьте в конструкторе CSS требуемый шаблон, установите ID для блоков, по которым необходимо отрабатывать клик;
- на форму 1С добавьте строковый реквизит "ПолеHTML"(к примеру) и соответствующий элемент формы с видом "Поле HTML документа";
- в обработчике "ПриОткрытии" формы установите в значение реквизита "ПолеHTML" сформированный в конструкторе CSS текст HTML;
- заполните обработчик события "ПриНажатии" элемента "ПолеHTML":

&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    СтандартнаяОбработка = Ложь;
    
    //Поиск ИД выбранного блока
    УровеньВложенности = 10;
    Попытка
        ЭлементID = ДанныеСобытия.Element.ID;
        
        Если ЭлементID = "" Тогда
            Сч = 0;
            Родитель = ДанныеСобытия.Element.parentElement;
            Если Родитель<>Неопределено Тогда 
                ЭлементID = Родитель.ID;
                
                Пока ЭлементID = "" Цикл     
                    Родитель = Родитель.parentElement;
                    Если Родитель<>Неопределено Тогда
                        ЭлементID = Родитель.ID;        
                    Иначе
                        Прервать;
                    КонецЕсли;
                    
                    Сч = Сч+1;
                    Если Сч>УровеньВложенности Тогда
                        Прервать;
                    КонецЕсли;
                КонецЦикла;
            КонецЕсли;
        КонецЕсли;
    Исключение
        ЭлементID = "";
    КонецПопытки; 
    
    Если ЭлементID <> "" Тогда 
       //"ID1", "ID2"... - идентификаторы блоков в HTML
        Сообщить("Выбран блок с ИД "+ЭлементID);
        Если ЭлементID = "ID1" Тогда 
            //код обработки
        ИначеЕсли ЭлементID = "ID2" Тогда
            //код обработки
        Иначе    
            //код обработки
        КонецЕсли;
    Иначе    
        //код обработки
    КонецЕсли;
КонецПроцедуры

Подобным образом в конструкторе CSS реализован выбор предопределенных фигур.

Всем успехов и с наступающим Новым годом!

P.S.
Для подбора цвета в конструкторе CSS картинок я использовал диалог выбора цвета из публикации:

//infostart.ru/public/185249/
Автору большое спасибо!