Маски кодовых ячеек
Работа с масками кодовых ячеек также подробно рассмотрена в примере Маскирование кодовых ячеек интерактивных скриптов |
Для более удобной параметризации и наглядного представления кода зачастую используются интерактивные элементы управления. Ими могут выступать различные поля ввода данных, списки, слайдеры и т.д. В Engee такие элементы реализуются в редакторе скриптов с помощью масок кодовых ячеек.
Маска кодовых ячеек — это инструмент, который превращает переменные в кодовых ячейках скриптов Engee в интерактивные элементы управления. Наложение маски позволяет полностью скрыть код ячеек, при этом сохранив их полную работоспособность.
Создание маски кодовой ячейки
Для создания маски кодовой ячейки наведите курсор на кодовую ячейку и в инструментах выберите Маска и Добавить поле:
Добавление поля откроет интерактивное меню. В зависимости от типа поля, меню добавления меняет свои опции (меняются доступные типы переменной и/или появляются дополнительные настройки). Всего доступно четыре типа:
-
Выпадающий список (dropdown) — это выпадающий список опций с выбором одного варианта. При нажатии на выпадающий список дается выбрать нужный вариант.
Пример выпадающего списка
Создадим пустую кодовую ячейку и добавим маску выпадающего списка со следующими настройками:
После сохранения кодовая ячейка сменит свой вид:
При этом содержимое кодовой ячейки заполнит следующий код:
dropdown_variable = "1" # @param ["1","2","3"] {allow-input:true}
Изменяя этот код можно менять содержимое маски без обращения к инструменту Маска
.
-
Поле ввода (input) — это окно для ввода данных.
Пример поля ввода
Создадим пустую кодовую ячейку и добавим маску поля ввода со следующими настройками:
Здесь плейсхолдер — это текст, который отображается внутри поля ввода, пока не будут введены какие-либо данные. Обычно используется, чтобы дать подсказку о том, какую информацию нужно ввести. Например, для поля даты отлично подойдет вариант
Введите дату в формате ГГГГ-ММ-ДД
.Получим следующий вариант:
При этом содержимое кодовой ячейки заполнит следующий код:
date_of_birth = "2025-01-16" # @param {type:"date",placeholder:"Введите дату в формате ГГГГ-ММ-ДД"}
Исходя из названия переменной нам нужно дату рождения, а не сегодняшнюю дату (проставленную системой автоматически), поэтому поменяем дату на нужную. Поменять дату можно как в маске, так и в самой кодовой ячейке, просто выставив корректную дату вместо указанных
"2025-01-16"
.При удалении даты маски можно увидеть, что плейсхолдер работает корректно и улучшает пользовательский опыт:
-
Markdown — это представление разметки на языке Markdown для реализации кодовых масок.
Пример Markdown
Создадим пустую кодовую ячейку и добавим маску Markdown со следующими настройками:
# Построение синусойды Для построения простой синусойды используйте следующие блоки: |Блоки в модели|Описание| | --------- | -------- | |[Sine wave](https://engee.com/helpcenter/stable/ru/base-lib-sources/sine-wave.html)|Генератор синусоидального сигнала.| |[Terminator](https://engee.com/helpcenter/stable/ru/base-lib-sinks/terminator.html)|Заглушка выходного порта.|
Получим следующий вариант:
При этом содержимое кодовой ячейки заполнит следующий код:
# @markdown # Построение синусойды # @markdown # @markdown Для построения простой синуосойды используйте следующие блоки: # @markdown # @markdown |Блоки в модели|Описание| # @markdown | --------- | -------- | # @markdown |[Sine wave](https://engee.com/helpcenter/stable/ru/base-lib-sources/sine-wave.html)|Генератор синусоидального сигнала.| # @markdown |[Terminator](https://engee.com/helpcenter/stable/ru/base-lib-sinks/terminator.html)|Заглушка выходного порта.|
-
Слайдер (slider) — это представление ползунка (слайдера) с выбором значений из заданного диапазона. Выбор значения из диапазона реализован перемещением ползунка по шкале.
Пример слайдера
Создадим пустую кодовую ячейку и добавим маску слайдера со следующими настройками:
Получим следующий вариант:
При этом содержимое кодовой ячейки заполнит следующий код:
уровень_громкости = 0 # @param {type:"slider",min:0,max:100,step:1}
Для редактирования наложенной маски наведите на нее курсор мыши и нажмите иконку . Поскольку код маскированных ячеек является полностью рабочим — можно редактировать не только маску, но и код ячейки.
Для добавления нового поля, скрытия кода или скрытия маски повторно воспользуйтесь контекстным меню маски :
Создание масок без интерфейса редактора
В разделе описаны некоторые особенности синтаксиса маскированных ячеек, которые могут быть полезны в вашей практике. Рекомендуем ознакомиться с разделом даже в том случае, если вы не планируете создавать маски вручную. |
В некоторых случаях может быть удобнее создавать маску не прибегая к контекстному меню создания маски , поэтому рассмотрим этот процесс подробнее.
Для создания масок вручную нужно самостоятельно воссоздать синтаксис, состоящий из:
-
Имени элемента управления. Некоторые из элементов имеют свои параметры для настройки поведения.;
-
Комментария
#
и параметра, начинающегося с@
.
Элементы управления масок кодовых ячеек уже описаны выше, их всего четыре. Для ручного создания каждого элемента свой собственный подход. Рассмотрим примеры для каждого из них:
Описание типов и подтипов выпадающего списка
|
Описание типов окна вводаМожно использовать различные типы полей ввода для сбора информации, и каждый тип подходит для определенного рода данных.
|
Описание типов слайдера
|
Описание возможностей markdownС помощью кодовой маски
|