Code cell masks

Working with code cell masks is also discussed in detail in the example Masking code cells of interactive scripts.

Interactive controls are often used for more convenient parameterization and visual representation of code. They can be various data input fields, lists, sliders, etc. In Engee such elements are implemented in script editor using code cell masks.

The Code Cell Mask masks script pool 1 is a tool that turns variables in code cells of Engee scripts into interactive controls. Masking allows you to completely hide the code of the cells while keeping them fully functional.

Creating a code cell mask

To create a code cell mask, hover over a code cell and select Mask masks script pool 1 and Add field in the tools:

masks script pool 2

Adding a field will open an interactive menu. Depending on the field type, the add menu changes its options (the available variable types change and/or additional settings appear). A total of four types are available:

Select (dropdown) is a dropdown list of options with a single option selection. When you click on the dropdown list, you are given the option you want to select.
Drop-down list example
Create an empty code cell and add a drop-down list mask with the following settings:

After saving, the code cell will change its appearance:

The contents of the code cell will fill in the following code:
dropdown_variable = "1" # @param ["1","2","3"] {allow-input:true}
By modifying this code you can change the contents of the mask without accessing the tool Mask .
Input (input) is a window for entering data.
Example of input field
Create an empty code cell and add an input field mask with the following settings:

Here playholder is the text that is displayed inside the input field until any data is entered. It is usually used to give a hint as to what information needs to be entered. For example, for a date field, Enter the date in the format YYYYY-MM-DD would work fine.

We get the following option:

The contents of the code cell will fill the following code:
date_of_birth = "2025-01-16" # @param {type:"date",placeholder:"Введите дату в формате ГГГГ-ММ-ДД"}
Based on the name of the variable, we need the date of birth, not today’s date (set automatically by the system), so let’s change the date to the correct one. You can change the date both in the mask and in the code cell itself, just by setting the correct date instead of the specified "2025-01-16".

By removing the mask date, you can see that the placeholder works correctly and improves the user experience:

Markdown - is a Markdown markup representation for implementing code masks.

masks script pool 5

Example Markdown

Create an empty code cell and add a Markdown mask with the following settings:

masks script pool 12

# Построение синусойды

Для построения простой синусойды используйте следующие блоки:

|Блоки в модели|Описание|
| --------- | -------- |
|[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)|Заглушка выходного порта.|

We get the following variant:

masks script pool 13

The contents of the code cell will fill the following code:

# @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 (slider) is a representation of a slider with selection of values from a specified range. Selection of a value from the range is realised by moving the slider along the scale.
Slider example
Create an empty code cell and add a slider mask with the following settings:

Get the following option:

The contents of the code cell will fill the following code:
уровень_громкости = 0 # @param {type:"slider",min:0,max:100,step:1}

To edit a superimposed mask, move the mouse cursor over it and click the icon masks script pool 15 . Since the code of masked cells is fully working - you can edit not only the mask, but also the cell code.

To add a new field, hide the code or hide the mask again use the context menu of the mask masks script pool 1 :

masks script pool 16

Creating masks without the editor interface

This section describes some features of masked cells syntax that may be useful in your practice. It is recommended to read this section even if you do not plan to create masks manually.

In some cases, it may be more convenient to create a mask without resorting to the mask creation context menu masks script pool 1 , so let’s look at this process in more detail.

To create masks manually, you need to recreate the syntax yourself, consisting of:

The name of the control. Some of the elements have their own parameters to configure the behaviour..;
A # comment and parameters starting with @.

The code cell mask controls are already described above, there are four of them in total. Each element has its own approach for manual creation. Let’s consider examples for each of them:

dropdown is a dropdown list of options with one option selected. When you click on the dropdown list, you are given the option you want to select.

Description of dropdown list types and subtypes

string is a drop-down list type that allows you to select one of the predefined string options. Such an interface element is often used to select a single value from a set of possible values represented as strings. It comes in two subtypes - editable and not_editable:
- string_editable is a subtype of the drop-down list that allows you to enter text to filter existing options.
  
  Example:
  dropdown_string_editable = "test3" # @param ["test1", "test2", "test3"] {allow-input:true}
- string_not_editable is a subtype of dropdown list that doesn’t allow text to be entered or edited.
  
  Example:
  dropdown_string_not_editable = "test2" # @param ["test1", "test2", "test3"]
raw is a type of drop-down list that allows you to use arbitrary and non-standard data as options. Unlike a standard drop-down list, which usually contains only strings, raw can include complex data structures such as numbers, lists, objects, etc.
- raw_editable is a subtype of drop-down list that allows arbitrary and non-standard data to be entered and edited.
  
  Example:
  dropdown_raw_editable = 1 # @param [1, "input_raw", "false", '"string"'] {type:"raw", allow-input:true}
- raw_not_editable is a subtype of dropdown list that doesn’t allow arbitrary and non-standard data to be entered and edited.
  
  Example:
  dropdown_raw_not_editable = 1 # @param [1, "input_raw", "false", '"string"'] {type:"raw"}

input is a window for entering data.

Description of input window types

You can use different types of input fields to collect information, and each type is suitable for a particular kind of data.

boolean is an input type that allows you to choose between two values: True (true) or False (false).

Example:
```
input_boolean = False # @param {type:"boolean"}
```
date is an input type that allows you to select a date from a calendar.

Example:
```
input_date = "2024-07-20" # @param {type:"date"}
```
integer is an input type that allows only integers to be entered. Values entered in the mask will be reflected in the code and vice versa.

Example:
```
input_integer = 123 # @param {type:"integer"}
```
number is an input type that allows numeric values (including fractional numbers) to be entered.

Example:
```
input_number = 10.0 # @param {type:"number"}
```
raw is an input type that allows arbitrary input of any data type (strings, lists, dictionaries and other objects).

Example:
```
input_raw = input_string # @param {type:"raw"}
```
string is an input type that allows you to enter text data.

Example:
```
input_string = "text" # @param {type:"string"}
```

slider is a representation of a slider (slider) with selection of values from a specified range. Selection of value from the range is realised by moving the slider along the scale.

Description of slider types

slider_integer - slider type, which allows selecting only integer values in the specified range.
```
slider_integer = 2 # @param {type:"slider", min:1, max:5, step:1}
```
slider_number is a slider type that allows you to select values, including fractional numbers, within a given range.
```
slider_number = 0.0346734 # @param {type:"slider", min:-1, max:1, step:0.00000001}
```

markdown is a Markdown language markup representation for implementing code masks.

Description of markdown features

The @markdown code mask is used to implement:

Headings

# @markdown # Заголовок первого уровня
# @markdown ## Заголовок второго уровня

markdown mask 1

Tables

# @markdown | Опция | Описание |
# @markdown | ----- | -------- |
# @markdown | текст |   текст  |

markdown mask 2

Lists:

Numbered

# @markdown 1. First item
# @markdown 2. Second item
# @markdown 3. Third item
# @markdown    1. Indented item
# @markdown    2. Indented item
# @markdown 4. Fourth item

markdown mask 3

Labelled

# @markdown + Sub-lists are made by indenting 2 spaces:
# @markdown   - Marker character change forces new list start:
# @markdown     * Ac tristique libero volutpat at
# @markdown     * Facilisis in pretium nisl aliquet
# @markdown     - Nulla volutpat aliquam velit
# @markdown + Very easy!

markdown mask 4

Classic markup

# @markdown > Classic markup: :wink: :cry: :laughing: :yum:

markdown mask 5

Code cell masks

Creating a code cell mask

Creating masks without the editor interface

Useful links