Masking code cells of interactive scripts
This example demonstrates the possibility of adding masks to the code cells of interactive scripts.
Masking makes it easier to parameterize code in scripts by creating visual graphical interfaces. Users who will work with such scripts will not have to deal with the contents of code cells; instead, they will be able to adjust the values of variables in the code using familiar controls.
An example of a graphical interface created by masking a code cell is shown in the screenshot.:
Masks of code cells - functionality of the Engee script editor. In order to get acquainted with masking in interactive mode, we recommend opening this example in the script editor (and not in the documentation or the Engee community, since masks of code cells are not displayed in them).
Basics of usage
The mask is the customized user interface of the code cell.
The code cell is masked if at least one special comment is added to it. # @param or # @markdown.
Comments # @param designed to add interactive parameters to the code cell:
- Text fields (input);
- Flag buttons (checkbox);
- Dropdown lists (dropdown);
- Sliders (slider).
Interactive parameters are associated with a variable, at the end of the line with the definition of which a special comment has been added.
Two-way communication is organized between the code editor and the mask elements:
- When you change the value of a variable in the GUI, the value in the code cell will automatically change.;
- Conversely, when you change the value of a variable in a code cell, the value in the GUI will change.
Comments # @markdown They are designed to add markup in the Markdown language to the code cell (this is the language used in the text cells of the Engee script editor). Using the simple and intuitive Markdown syntax immediately after the special comment, you can make the mask even more visual.
By default, the code editor and the graphical interface are displayed simultaneously. In order to hide the code display, double-click on the mask. To display the code again, you can click on the "Show code" button or double-click on the cell.
Interactive parameters
To add a text field for entering a string variable, use a special comment. # @param {type:"string"}:
input_string = "Hello, world!" # @param {type:"string"}
To add a text field for entering an arbitrary number, you must use a special comment. # @param {type:"number"}:
input_number = -0.123456789 # @param {type:"number"}
The text field for entering an integer variable can be added using a special comment. # @param {type:"integer"}:
input_integer = 42 # @param {type:"integer"}
To add a text input field in a free format (the most flexible option, since the data type of a variable is not limited), you must use a special comment. # @param {type:"raw"}:
input_raw = input_string # @param {type:"raw"}
To add a flag button, use a special comment. # @param {type:"boolean"}:
input_boolean = false # @param {type:"boolean"}
A calendar with a choice of date (it will be written to a string variable in the format YYYY-MM-DD) can be added using a special comment # @param {type:"date"}:
input_date = "2024-09-03" # @param {type:"date"}
To add a drop-down list for selecting a string variable, use a special comment. # @param [""] by listing all possible options inside the array:
dropdown_string = "Первый" # @param ["Первый", "Второй", "Третий"]
If you need to combine the drop-down list for selecting a string variable with the input option, you can use a special comment. # @param [""] {allow-input:true}
dropdown_string_editable = "Нулевой" # @param ["Первый", "Второй", "Третий"] {allow-input:true}
To add a drop-down list for selecting a variable in a free format, use a special comment. # @param [""] {type:"raw"} by listing all possible options inside the array:
dropdown_raw = "Engee" # @param [""Engee"", "input_raw", "false", "42"] {type:"raw"}
If you need to combine the drop-down list of variable selection in a free format with the possibility of input, you can use a special comment. # @param [""] {type:"raw", allow-input:true}
dropdown_raw_editable = true # @param [""Engee"", "input_raw", "false", "42"] {type:"raw", allow-input:true}
To add a slider, use a special comment. # @param {type:"slider", min:x, max:y, step:z}, substituting instead of:
x- minimum value;y- maximum value;z- step:
slider_number = 0.5 # @param {type:"slider", min:-1, max:1, step:0.01}
slider_integer = 50 # @param {type:"slider", min:1, max:100, step:1}
Markdown Markup Language
Headlines:
# @markdown # Заголовок 1
# @markdown ## Заголовок 2
# @markdown ### Заголовок 3
# @markdown #### Заголовок 4
# @markdown ##### Заголовок 5
# @markdown ###### Заголовок 6
Paragraphs and line breaks:
# @markdown Чтобы создать новый параграф, вставьте пустую строку между двумя строками текста.
# @markdown
# @markdown Для переноса строки внутри одного параграфа
# @markdown используйте два пробела в конце строки.
Text selection:
# @markdown *курсив*
# @markdown _italic_
# @markdown
# @markdown **жирный**
# @markdown __bold__
# @markdown
# @markdown ***жирный курсив***
# @markdown ___bold italic___
# @markdown
# @markdown ~~зачёркнутый strikethrough~~
The numbered list:
# @markdown 1. Первый пункт
# @markdown 2. Второй пункт
# @markdown 3. Третий пункт
Bulleted list:
# @markdown - Первый пункт
# @markdown - Второй пункт
# @markdown - Третий пункт
Nested list:
# @markdown 1. Первый пункт
# @markdown - Первый подпункт
# @markdown - Второй подпункт
# @markdown 2. Второй пункт
Link:
# @markdown [Telegram-канал Engee](https://t.me/engee_com)
Image:
# @markdown 
A line of code:
# @markdown `using Plots`
Code block:
# @markdown ```Julia
# @markdown x = range(0, 10, length=100)
# @markdown y = sin.(x)
# @markdown plot(x, y)
# @markdown ```
Quote:
# @markdown > Первый уровень
# @markdown >> Второй уровень
# @markdown >>> Третий уровень
Horizontal line:
# @markdown ---
Table:
# @markdown | Заголовок 1 | Заголовок 2 |
# @markdown | ----------- | ----------- |
# @markdown | Ячейка 1 | Ячейка 2 |
# @markdown | Ячейка 3 | Ячейка 4 |
Emoji:
# @markdown :smile:
# @markdown :laughing:
# @markdown :blush:
HTML tags:
# @markdown <kbd>CTRL</kbd> + <kbd>V</kbd>
Conclusions
This example demonstrates the possibility of masking code cells. This is a simple and at the same time functional way to make interactive scripts even more responsive and accessible!