IoTiX Editor Project Overview

Pocketix is a block- and form-based visual programming language and editor currently being developed by Petr John and Jiří Hynek at BUT FIT, primarily aimed at automating smart devices on mobile phones.

The first prototype was created through a collaboration between BUT FIT and Logimic as part of the project Services for Water Management and Monitoring Systems in Retention Basins.

The IoTiX Editor, available in React and Angular (pocketix-react and pocketixng respecively) versions, provides mobile interfaces for designing automation flows. These editors are ideal for non-programmers. Key features include block and form-based editing, configurable conditions and actions, device integration and workflow logic, and compatibility with the IoTiX scripting language.

The visual editor is composed of several integrated components that collectively support both graphical and textual programming. At its core, the Program module manages synchronization between the text and visual editors while maintaining an undo history. The Text Editor enables direct user input and ensures real-time updates to the graphical view, whereas the Visual Editor facilitates intuitive visual programming through recursively nested blocks, commands, and expressions. To enhance adaptability, the system supports Dynamic Language Modification, allowing runtime changes to accommodate diverse device models. Finally, Input Validation ensures correctness through syntactic checks in the text editor and semantic validation in the graphical interface.

IoTiX Editor (React & Angular)

pocketix-react and pocketixng interfaces for designing automation flows. These editors are ideal for non-programmers and built on React and Angular respectively.

Key Features

Block and form-based editing
Configurable conditions and actions
Device integration and workflow logic
Compatible with IoTiX scripting

Quick Start

git clone <repo_url>
cd <repo_dir>
npm run install:all
npm run start:demo

Replace <repo_url> and <repo_dir> with the actual repository info.

Visual Editor Overview

The visual editor, an example of which is shown in the figure below, consists of the following platform components:

Program

The main graphical component that wraps the entire editor, including the graphical components of the text and visual editors. The component expects the program representation, language, and editor settings as input, with their current states maintained in memory. It also manages auxiliary objects, such as synchronization between the graphical and text editors, and a history stack allowing the user to undo actions. The component includes a configurable menu.

Text Editor

Provides text input (program) from the user. If synchronization is active, the parsed program representation is propagated to the Program component, and the visual editor’s content is updated accordingly.

Visual Editor

A graphical component intended for visual programming. Its principle is based on the recursive nesting of the following graphical components:

Block

A graphical component consisting of a sequence of compound or unit commands. It allows dynamic modification of the command list (moving, adding, removing). The list of commands is derived from the visual language definition and the device model.

Command

A generic graphical component representing a command, composed of a header and a body. Inputs are represented by visual and structural properties of the LanguageStatement type. The header and body can be populated with other components using Angular’s Content Projection feature. This is specifically used in:

Compound Command: A graphical component that adds an optional condition represented by an expression to the header, and a block of commands to the body.
Unit Command: A graphical component that extends the command body with a list of parameters represented by expressions.

Expression

A graphical component represented by a field for writing expressions. A dialog for creating more complex expressions composed of variables (parameters) is also implemented. The principle of inserting parameters is demonstrated in the figure below.

A timeout after finishing typing, followed by validation, is handled similarly to the text editor.

Dynamic Language Modification

The editor allows dynamic language modification during application runtime. For this purpose, a simple text editor, shown in the figure below, was created:

This graphical component primarily serves as a tool for testing the editor’s functionality. However, dynamic language modification plays a crucial role in making the editor generic and usable for other types of devices. Adjustments are necessary during the editor startup and language modification according to the device model(s) for which the program will be created. Unit commands and parameters offered during program creation are derived from the model.

Input Validation

The editor must handle the validity of user input. In the text editor, this involves syntactic analysis of the text input, which is parsed into an object representation of the program. Syntax errors are indicated as shown in the figure below:

Since the project's main goal was visual programming, less emphasis was placed on text code validation. On the other hand, the visual editor includes support for semantic validation through static analysis of the program’s object model. An example, such as an incorrectly placed else command that should follow an if command, is shown in the figure below:

These conditions are defined within the structural properties of the commands.

Scalability

The editor is scalable. Individual parts of the editor (text and visual sections, menu, or menu buttons) can be shown or hidden both manually and programmatically. This feature is particularly useful for mobile views, where only limited width is available. An example of the mobile view is shown in the figure below:

Try It Out!

Bellow you are able to try out both editors. Note that it might be better to visit them directly, especially if you are on mobile.

Pocketixng

Visit!

Pocketix React