Create a GUI

Motorcortex Grid builds a dashboard for your application: switches, buttons, lights and plots, each linked to a parameter in the parameter tree. On this page you make a small one: a switch that sets the gripper parameter you used in Desk, and a light that shows its value. You test it live, then deploy it to the controller.

A dashboard is a grid fileA grid file (.grid) describes one dashboard: its screens, the components on them, and the parameter path each component is linked to. It lives in a grid package in your motorcortex.io project. in a grid package of your motorcortex.io project. You edit it in the Grid editor, and deploy the package to the controller like the packages in Deploy an application.

Create a grid package and a grid file

A package of its own keeps your dashboard apart from the one that came with the application.

1. Log in to motorcortex.io, click Projects in the menu on the left, and open the project you deployed.
2. Open the actions menu, the … button at the top of the page, and choose New. Under Package, choose grid.
3. Give the package a Name and click Create.
4. Open the new package. In its actions menu, choose New, then grid file.
5. Give the file a Name and click Create. motorcortex.io adds the .grid extension.
6. Click the file name to open it in the Grid editor. The new dashboard has one empty screenA screen is one page of a dashboard, with its own components. A dashboard can have several screens; a new grid file starts with one, called screen 1. , screen 1.

Connect the editor to the controller

The editor reads the parameter tree from the controller, so you can pick parameters from it and see live values while you build.

1. In the top bar of the editor, click Connection.

2. In machine IP, type controller_ip_addressThe IP address of your controller. In most cases 192.168.2.100., or the address of your cloud machine.

3. Keep Secure ticked.

4. Click connect.

   

Add a switch and a light

1. Click library at the top left. The Library opens on the left with every component you can add.

   

2. Drag a switch onto the screen.

3. Drag a light onto the screen, next to it.

Link each component to a parameter

A component does nothing until it has a parameter pathA parameter path is the full name of a parameter: the folders from root down to the parameter, separated by /. For example root/Logic/state. . The switch writes to its parameter; the light shows the value of its parameter.

1. Click the switch on the screen. Its Properties open on the right.

2. Under PATH, click the path field. The Parameters panel opens on the left with the parameter tree of the controller.

3. Open root, UserParameters and IO, and click gripper. Its path, root/UserParameters/IO/gripper, fills in the path field.

   

4. Under VALUE, leave value on at 1 and value off at 0. These are the values the switch writes.

5. Click the light, and link its path to gripper in the same way.

Test it in the preview

The preview runs your dashboard against the live controller, so you can try it before you deploy.

1. Click preview in the top bar. The dashboard opens in preview mode.

   

2. Flip the switch. The light turns on and off with it, because both are linked to gripper.

3. If Desk is still open, the gripper plot there steps along.

Deploy the dashboard

Until you deploy it, the dashboard exists only in motorcortex.io. Deploying copies the grid package to the controller. Each grid package gets its own folder there, so the application’s own dashboard stays as it is.

1. Go back to motorcortex.io and open your grid package.
2. Click Deploy at the top of the page.
3. In Controller IP address or domain, type controller_ip_addressThe IP address of your controller. In most cases 192.168.2.100., or the address of your cloud machine.
4. Keep Also upgrade the controller’s grid runtime if it is out of date ticked, so the controller can run a dashboard made with the current editor.
5. Click Deploy.

The transfer runs in the background, straight from your browser to the controller, so you can keep working. It needs the browser certificate from Install a browser certificate, like Desk does.

You have now used your application from Desk and from a dashboard of your own. More components, screens and settings are in the Motorcortex Grid guide.