Motorcortex-GRID

Build the browser interface of your machine in the Grid editor: its screen areas, how you start a grid file and what the file stores.

  3 minute read  

Grid is the editor in which you build the user interface of your machine. You open it in your browser from motorcortex.io, drag widgets onto screens and link each widget to a parameter of your application. Your work is saved as a .grid file inside a GRID packageA package in your motorcortex.io project that holds one or more .grid files and the images, 3D models and map files they use. You deploy it to the controller, which serves the interface to your browser. . You deploy that package to the controller, and anyone on the network opens the interface in a browser. What the package holds and how the controller serves it is described in GRID package.

The video builds a small interface in under two minutes:

The editor at a glance

The editor has four areas. Click an area to read about it:

Widget library Widget library drag widgets onto a screen Top menu bar Top menu bar library, parameters, deploy, preview, Connection Screens area Screens area screens bar, canvas and error handler screen 1 screen 2 12:00 PM idle Properties panel Properties panel grid settings, or the selected widget Client connection settings Client connection settings Errors Errors States States Logs Logs Screen Screen Raster Raster
  • Widget library: the buttons, outputs, plots, 3D views and other widgets you place on a screen.
  • Top menu bar: show the library and the parameter tree, undo and redo, deploy, preview and connect to a controller.
  • Screens area: the screen you are editing, with the screens bar that the finished interface shows too.
  • Properties panel: the settings of the whole interface, or the properties of the widget you selected.

Start a grid file

A .grid file can only live in a GRID package, so you create the package first.

  1. Open your project on motorcortex.io.
  2. In the project’s actions menu, choose New ▸ Package ▸ grid. Give the package a name.
  3. Open the new package and choose New ▸ Item ▸ grid file. Give the file a name.
  4. Click the file and choose Open in Grid. The Grid editor opens with the file loaded.

A new file starts with one screen, screen 1, and the standard settings listed on the Properties panel page. One package can hold several .grid files. A common setup is one interface per role, for example one for the operator and one for the maintenance crew.

What a grid file stores

A .grid file is a JSON file. You do not edit it by hand, but knowing what it holds helps when you look at one:

Part of the file What it holds Where you set it
artboards The screens, in their order, with the widgets on each one, the start screen, and the size and colours of all screens Screens area, and Screen in the properties panel
raster The raster that helps you place widgets Raster in the properties panel
motorcortex The address, ports and login used to reach the controller Client connection settings in the properties panel
settings The parameters and files for the state indicator, the error handler and the logs States, Errors and Logs in the properties panel

Each widget stores the parameter it shows or sets as a path, with the element of an array as its channel (slot in the file) and an optional prefix that goes in front of the path. How a widget can show a name instead of a number is described in Mapping values to text or images, and how the 3D widget moves a model in 3D models.