Build user interfaces with Motorcortex-GRID


Motorcortex Grid is a web-based application that is used to create a custom User Interface (UI) for your application.

⚠ Using MotorCortex-grid all parameters of the running control system are accessible and may be modified. Changing parameters may cause unpredictable or unstable machine behavior and may cause danger to personnel or cause damage to the machine or its surroundings. The tool should only be used by system experts that have detailed knowledge of the system and that know what the impact of parameter changes is.

Quick Video - creating a UI in under 2 minutes

Creating a new GRID file

Inside you Project on you first need to create a GRID package. The package contains one or more .grid files and all supporting files that need to be deployed with your UI; for instance images, 3D models or configuration files.

In you project main folder, click on “grid” in the “create package” menu (1). Then choose a name for your user interface (2), a version string (3) and click on “save” (4).

image not found

Then open the just created GRID package by clicking on its name.

Next you create a .grid file. Click on “grid file” in the “create” menu (5). Enter a suitable name for your user interface (6) and press “save” (7). In general you create a user interface (grid-file) for every user role; e.g. one for the operator, one for the maintenance crew, one for the manager.

image not found

Once the .grid file is created, click on it to open it in the GRID editor.

Screen Layout

The Motorcortex-GRID editor screen contains the following main elements:

  • Widget Library: In the Widget Library you can select the components (Widgets) you would like to add to your Screens.
  • Top Menu Bar In the Navigation bar you can open the library, preview your UI and check your connection.
  • Properties Panel In the Properties Panel you set the properties of your Widgets and Screens.
  • Screens Area A user interface may have multiple screens. Each screen may contain Widgets.
image not found

Top Menu Bar

A explanation of how to work with Motorcortex Grid

Properties Panel

A explanation of how to work with Motorcortex Grid


Create highly interactive user interfaces.

Widget Library

A explanation of how to work with Motorcortex Grid


Adding a 3D Model (Digital Twin) to GRID

Mapping values to text or images

Mapping numeric values to text or images

GUI Example

A example for creating a Motorcortex GUI

Last modified April 8, 2022: updated docs (ad5eed1)