Create a GUI

In this section we will create a Motorcortex Graphical User Interface

3 minute read

After controlling our application we can start to create a GUI for our application. The following steps will show you how to create your own Motorcortex GUI.

  1. Go to your project folder in Motorcortex.io.

  2. Go into your User Interface directory.

  3. Create a new Grid file by pressing the grid file button in the right tab and give it a name.

  4. Double Click the .grid file you made to open Motorcortex Grid.

  5. In Grid press the Connect button on the right upperhand side.

  6. Fill in the controller IP (Per default this is 192.168.2.100)

  7. Check the secure connection checkbox.

  8. Hit the connect button to connect to your controller.

  9. On the top left you will find the library button. Hit this button to expand the Library.

  10. For our Example we will add a switch to connect to our lamp and a light to connect to our push button.

  11. Drag the elements to your desired location in the grid.

  12. Select the switch element. The right tab will now show the element properties of this switch.

  13. Under PATHclick the path input box. This will open the Parameter Tree on the left tab.

  14. In the Parameter tree browse to Ethercat/yourdomain/yourdevice and click the Output that has the lamp connected to it. this will add the path to your element.

  15. Select the light element. The right tab will now show the element properties of this light.

  16. Under PATHclick the path input box. This will open the Parameter Tree on the left tab.

  17. In the Parameter tree browse to Ethercat/yourdomain/yourdevice and click the Input that has the switch connected to it. This will add the path to your element.

  18. Press the preview button on the upper right hand side to test our GUI.

  19. A new tab will open with our Previeuw GUI. Here we can test if our switch and light works. If everything works, we can deploy the new GUI to your controller

  20. Go back to your project folder and User Interface directory.

  21. On the right tab press the deploy button.

  22. fill in your IP adress and deploy your GUI.

  23. Congratulations you have now created a GUI for your application.

This was the last step of the Getting started. you now have all the basics you need to create a Motorcortex Application. The next step is to create automated programs. For realtime applications you need to take a look at Developing Control Applications

If your program does nog have to be realtime and you prefer other programming languages make sure to take a look at Developing Client Applications

More information about the Motorcortex grid tool can be found under Motorcortex Grid

Last modified October 15, 2021: Update Setup developement environment (8d05529)