Create a Human-Machine Interface (HMI) with Arduino

Arduino GIGA R1 WiFi

Arduino IDE

Arduino® GIGA Display Shield

Arduino Opta WiFi

<html><body>Get hands-on with making your own Human-Machine Interface (HMI) using the powerful Arduino GIGA R1 WiFi , its interactive touchscreen display, and the Arduino Opta . HMIs bridge the gap between you and your project, giving you intuitive control, real-time data visualization, and efficient operation. Imagine designing custom interfaces that respond instantly to your touch, displaying clear visuals and data to help you make informed decisions. The GIGA's processing power ensures smooth performance, while the Opta automates tasks based on your input or sensor readings. Ready to dive in? Let's explore the key features of theArduino components: <ol><li>Arduino GIGAR1 WiFi: This powerhouse microcontroller handles complex calculations and graphics with ease. Connect diverse sensors and devices with its numerous ports, and enjoy ample memory for your project needs. </li><li>Arduino GIGA DisplayShield: Design user-friendly interfaces with a vibrant touchscreen and built-in libraries. Swipe, tap, and interact with your project effortlessly. </li><li>Arduino Opta: Program automation logic easily with ladder logic, even if you're new to it. The PLC reliably controls your project based on user input or sensor data. </li></ol> By combining these components, you'll create an HMI that empowers you to interact with your project like never before. <figure><iframe src="https://www.youtube.com/watch?v=4-CBS1hLXn8&amp;embeds_referring_euri=https%3A%2F%2Fwww.hackster.io%2F&amp;source_ve_path=MjM4NTE&amp;feature=emb_title"></iframe></figure> <h3>Getting Started with Your Own Interface!</h3> With the LVGL library, programming the Arduino GIGA Display Shield is easy. Decide how many buttons you want, and whether you want a bar to display data like temperature or humidity, the possibilities are endless! Step by step: Next, we will guide you through the steps to create your interface: <blockquote>In this example, two buttons are used to operate two relays by sending a signal to the Arduino Opta. Two LED indicators are also added, and they will illuminate when two external buttons are pressed. </blockquote><blockquote>Additionally, a temperature-indicating bar was set up, utilizing an LM35 sensor to provide the data. </blockquote><blockquote>The Arduino H7 Video library, which manages the display, is part of the GIGA Board Package. </blockquote>We will be using three different libraries: <ol><li><a href="https://github.com/arduino/ArduinoCore-mbed/tree/main/libraries/Arduino_H7_Video">Arduino_H7_Video </a>, this one is bundled with the Board Package, so make sure you have the latest version of the <a href="https://github.com/arduino/ArduinoCore-mbed">GIGA Board Package </a>installed. </li><li><a href="https://www.arduino.cc/reference/en/libraries/arduino_gigadisplaytouch/">Arduino_GigaDisplayTouch </a></li><li><a href="https://github.com/lvgl/lvgl">lvgl </a></li></ol>To install them, open the library manager and install the latest version by searching for " Arduino_GigaDisplayTouch " and " lvgl ". In the sketch include the libraries like this: <pre>#include "Arduino_H7_Video.h" </pre><pre>#include "lvgl.h" </pre><pre>#include "Arduino_GigaDisplayTouch.h" </pre>The first thing we need to do is to define the display we are using, by creating an object using the Arduino_H7_Video class, specifying the height, width, and type of display. <pre>Arduino_H7_Video Display(800, 480, GigaDisplayShield); //Display type and dimensions </pre>Also, to be able to use the touch capability of the screen we need to create an object using the Arduino_GigaDisplayTouch class <pre>Arduino_GigaDisplayTouch TouchDetector; </pre>In the setup(), we begin by initializing the display and the touch detector. <pre>void setup(){ </pre><pre>Display.begin(); </pre><pre>TouchDetector.begin(); </pre><pre>} </pre>With these things set up, we can go on to configure the LVGL elements. <h3>Creating a Grid Layout</h3>Creating a grid that you can then fill with elements will consist of a defined column and row. <ol><li>This will create two columns with 370 px width and 350 px. </li></ol><blockquote>col_dsc[] = {370, 350, LV_GRID_TEMPLATE_LAST}; </blockquote><ol><li>Every row will have 440 pixels. </li></ol><blockquote>row_dsc[] = {440, LV_GRID_TEMPLATE_LAST}; </blockquote>Then we need to create a pointer for the screen space. Here it will be called the grid. <pre>lv_obj_t * grid = lv_obj_create(lv_scr_act()); </pre>To set the grid description that we defined before use: <pre>lv_obj_set_grid_dsc_array(grid, col_dsc, row_dsc); </pre>Now that the columns and rows have been defined the overall screen needs to be taken into account. This is achieved by using lv_obj_set_size(grid, Display.width(), Display.height()) to make it easy we will allow the grid to use the entire screen. <pre>lv_obj_set_size(grid, Display.width(), Display.height()); </pre>Then, just to test it out, let's add an object to the grid: first declare the obj pointer and add it to the grid, then we set the grid cell via the lv_obj_set_grid_cell() method. <pre>lv_obj_t* obj; </pre><pre>obj = lv_obj_create(grid); </pre><pre>lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1, //column </pre><pre>LV_GRID_ALIGN_STRETCH, 0, 1); //row </pre>The l v_obj_set_grid_cell()) has a set of parameters related to how the object is positioned and aligned. In this case, we have created a 2x1 grid, where the 0 (column) and 0 (row) indicate where on the grid it should go. <pre>#include "Arduino_H7_Video.h" </pre><pre>#include "lvgl.h" </pre><pre>#include "Arduino_GigaDisplayTouch.h" </pre><pre>Arduino_H7_Video Display(800, 480, GigaDisplayShield); </pre><pre>Arduino_GigaDisplayTouch TouchDetector; </pre><pre>void setup() { </pre><pre>Display.begin(); </pre><pre>TouchDetector.begin(); </pre><pre>//Display &amp; Grid Setup </pre><pre>lv_obj_t* screen = lv_obj_create(lv_scr_act()); </pre><pre>lv_obj_set_size(screen, Display.width(), Display.height()); </pre><pre>static lv_coord_t col_dsc[] = { 370, 350, LV_GRID_TEMPLATE_LAST }; </pre><pre>static lv_coord_t row_dsc[] = { 440, LV_GRID_TEMPLATE_LAST }; </pre><pre>lv_obj_t* grid = lv_obj_create(lv_scr_act()); </pre><pre>lv_obj_set_grid_dsc_array(grid, col_dsc, row_dsc); </pre><pre>lv_obj_set_size(grid, Display.width(), Display.height()); </pre><pre>//left </pre><pre>lv_obj_t* obj; </pre><pre>obj = lv_obj_create(grid); </pre><pre>lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 0, 1, //column </pre><pre>LV_GRID_ALIGN_STRETCH, 0, 1); //row </pre><pre>//right </pre><pre>obj = lv_obj_create(grid); </pre><pre>lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, 1, 1, //column </pre><pre>LV_GRID_ALIGN_STRETCH, 0, 1); //row </pre><pre>} </pre><pre>void loop() { </pre><pre>lv_timer_handler(); </pre><pre>} </pre> Now that we have the grid we can start adding objects that we want. To display an image on the screen we first need to define it. Take the desired image, convert it into the correct format, and place the image in the same folder as the sketch. Now use LV_IMG_DECLARE(filename); For example, the image we use will be named img_arduinologo. <pre>LV_IMG_DECLARE(img_arduinologo); </pre>obj is a pointer that will be used to hold the information about the screen space information for the image. The img1 is used for the elements of the image itself. <pre>lv_obj_t * obj; </pre><pre>lv_obj_t * img1; </pre>With lv_obj_set_size we can define the resolution of the image <pre>LV_IMG_DECLARE(img_arduinologo); </pre><pre>img1 = lv_img_create(obj_cb); </pre><pre>lv_img_set_src(img1, &amp;img_arduinologo); </pre><pre>lv_obj_set_size(img1, 200, 150); </pre>Now that we have the image, it is time to add buttons and LED indicators to the side we want on our screen. To create the buttons object use lv_btn_create(obj) and assign it to a suitable variable, here we use the button pointer. Next set the text that will appear next to the button by using lv_label_set_text(label_LR1, "Led/Relay1"); , here Led/Relay1 will be printed in the button. We can also set the resolution, in pixels. <pre>cb_LR1 = lv_btn_create(obj_cb); // Create the button and store its object: button </pre><pre>lv_obj_set_size(cb_LR1, 100, 40); </pre><pre>label_LR1 = lv_label_create(cb_LR1); </pre><pre>lv_label_set_text(label_LR1, "Led/Relay1"); </pre>To create the LED indicator is very similar to the button, lv_led_create(obj_cb) The status of the LED can be defined with the lv_led_off or lv_led_on function. <pre>obj_led1 = lv_led_create(obj_cb); </pre><pre>lv_led_off(obj_led1); </pre>The last element to add to the screen in this example would be a bar. The bar can be created with: <pre>slider = lv_bar_create(obj_slide); </pre>Set the desired size of the bar with lv_obj_set_size . <pre>slider = lv_bar_create(obj_slide); </pre><pre>lv_obj_set_size(slider, 310, 20); // Set the width </pre><pre>lv_obj_align(slider, LV_ALIGN_CENTER, 0, 0); </pre> <blockquote>With lv_obj_align, we can align the object wherever we want, in this example was aligned to coordinates 0, 0, so it would be in the center of the second grid. </blockquote>Thanks to an LM35 connected to the Arduino Opta, we can obtain the ambient temperature and display it in the bar. <figure><img src="https://hackster.imgix.net/uploads/attachments/1684213/imagen_cSZGweAfKV.png?auto=compress%2Cformat&amp;w=1280&amp;h=960&amp;fit=max"/><figcaption>Temperature Sensor</figcaption></figure>Now that we have all the elements to display on our screen, it is time to connect the Arduino Opta. We will use WiFi Modbus TCP to Send Data from an Arduino Opta to the Arduino GIGA. First, we need to set up a WiFi Modbus TCP server on an Arduino Opta, allowing it to send data (LED and input status) to the Arduino GIGA. This communication happens wirelessly through your local network. <blockquote>(Please see the code in the files attached to this project, Opta_Server) </blockquote><ol><li>Download and install the <a href="https://www.arduino.cc/reference/en/libraries/arduinomodbus/">ArduinoModbuslibrary </a>in your Arduino IDE. </li><li>Create a new file named arduino_secrets.h in your project folder. This file will store your WiFi credentials (SSID and password) securely. This code uses the provided SSID and password to establish a stable internet connection. </li></ol>The code acts as a translator between the physical world (sensors, LEDs, relays) and the Modbus TCP network protocol. It receives commands from the Arduino GIGA, controls the connected hardware accordingly, and sends back information about the inputs and analog readings. The updateOuts function reads coil values from the Modbus client and uses them to turn on/off the connected LEDs and relays. The updateWInputs function reads the states of digital input pins and writes their values to specific Modbus coils, sending this information to the GIGA. The updateWInputs function also reads the voltage from the analog input pin, converts it to a digital value, and writes it to a Modbus register, allowing the GIGA to access this data. Once we have the Opta code, it is time to make the Arduino GIGA able to send and receive information to the Opta through Modbus TCP. <blockquote>(Please see the files attached to this project to see the code. HMI_Client) </blockquote>Establish a connection to the Modbus TCP server running on the Arduino Opta (IP address specified in Opta_server). In the main loop, we need to ensure that the Modbus TCP client is connected. <pre>// client not connected </pre><pre>if (!modbusTCPClient.connected()) { </pre><pre>//Serial.println("Modbus TCP Client failed to connect! Restart HMI"); </pre><pre>} </pre><pre>else { </pre><pre>// client connected </pre><pre>InWidgets(); </pre><pre>//OutButtons(); </pre><pre>} </pre>If connected, we will read coil values from the Arduino Opta, turn on/off corresponding LEDs, read the analog input register value from the Opta, convert it to temperature, update the slider position, and display the value on the GIGA display. Also, when a button is pressed/released, it sends a coil write command to the Opta to turn on/off the corresponding LED/relay. <pre>void InWidgets (){ </pre><pre>int voltFOpta; </pre><pre>float TempScreen; </pre><pre>char voltageStr[20]; </pre><pre>/* Reading coils to update the LEDs on HMI */ </pre><pre>if (modbusTCPClient.coilRead(0x02)){ </pre><pre>lv_led_on(obj_led1); </pre><pre>} </pre><pre>else </pre><pre>{ </pre><pre>lv_led_off(obj_led1); </pre><pre>} </pre><pre>if (modbusTCPClient.coilRead(0x03)){ </pre><pre>lv_led_on(obj_led2); </pre><pre>} </pre><pre>else </pre><pre>{ </pre><pre>lv_led_off(obj_led2); </pre><pre>} </pre><pre>/* Reading the input register to update the Temperature, analog in */ </pre><pre>voltFOpta = modbusTCPClient.inputRegisterRead(0x04); </pre><pre>TempScreen = voltFOpta * (100.0/4095); //Analog input 0 - 10 volts; 12 bit resolution, 0 - 4095; 10mV/°C. </pre><pre>lv_bar_set_value(slider, TempScreen, LV_ANIM_OFF); </pre><pre>sprintf(voltageStr, "%.0f", TempScreen, "°C"); </pre><pre>lv_label_set_text(label1, voltageStr); </pre><pre>} </pre> <h3>Unlock the Power of Intuitive Control with your Custom HMI</h3>Congratulations on building your own Human-Machine Interface using the powerful Arduino GIGA, the Arduino GIGA Display Shield interactive touchscreen, and the Arduino Opta! Through this project, you've gained valuable experience in combining hardware, software, and design to create a tool that empowers you to interact with your project like never before. Remember, your HMI is not just a collection of buttons and displays; it's a gateway to seamless control and a deeper understanding of your project. With the flexibility of the Arduino GIGA and the LVGL library, you have the potential to: <ol><li>Continuously refine your interface: Add more complex elements, incorporate feedback mechanisms, and tailor the design to your specific needs. </li><li>Expand your project's capabilities: Integrate new sensors and actuators, enabling your HMI to control a wider range of functions. </li><li>Share your creation: Showcase your unique HMI design and inspire others to explore the possibilities of interactive projects. </li></ol>As you continue your journey in the world of HMIs, remember that the possibilities are truly endless. Embrace the power of customization, unleash your creativity, and unlock the full potential of your project with your one-of-a-kind Human-Machine Interface! </body></html>

Create a Human-Machine Interface (HMI) with Arduino

Learn how to build a complete HMI with Arduino that will allow you to interact with your projects in an intuitive and visual way.