Create a GUI

In this section we will create a Motorcortex Graphical User Interface

  3 minute read  

Motorcortex grid is a 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.

image not found

Access the Motorcortex Grid

  1. Login to your motorcortex.io account. If you don’t have a account yet make sure to to register for an account.

    image not found

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

    image not found

  3. In your Project view Navigate to the grid package.

    image not found

  4. Create a new gui by pressing the grid file button in the right tab under CREATE

    image not found

  5. Give your new .grid file a name and save.

  6. Double Click the .grid file you created to open the Motorcortex Grid tool.

Connect Motorcortex Grid

In Motorcortex Grid you can create your own Graphical User Interface. The next will show you how create a basic GUI.

  1. In Grid press the Connect button on the right int the top bar.

    image not found

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

  3. Check the secure connection checkbox.

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

Add Motorcortex Grid Components

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

    image not found

  2. Add for Example a switch to connect a lamp.

  3. Add for Example a light to connect to a push button.

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

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

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

    image not found

  3. 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.

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

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

  6. 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.

Test GUI

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

    image not found

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

Deploy GUI to Motorcortex Controller

  1. In Motorcortex.io go to your project folder and User Interface directory.

  2. On the right tab press the deploy button.

    image not found

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

  4. 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