Stone HMI Display with Arduino Slider and Gauge

STONE Technologies is a professional manufacturer of HMI Intelligent TFT LCD module.
STONE Technologies offers the variety of display type and size to full fill the application requirements.
Based on application type, STONE has Industrial Type Display, Advanced type Display and Civil Type Display. and each type of display is having various size of screen resolution.

This display is the solution for the people/company who wants to deploy there product as soon as possible with great quality of touch screen display. I will recommend STONE display for such demand.

In this article we will cover the tutorial for use of slider bar and gauge. In the last article, I have covered the basics of stone display and interface with Arduino.

Before moving ahead we have to prepare the HMI design layout. For this i have used Microsoft PowerPoint tool which is easy for me to design easily and fast. You can use the open source tools like GIMP.

In this example we are referring to the single variable memory location. So if we change the value of the single variable memory location using multiple inputs like
1. Using UP and DOWN keys
2. Slider Bar
3. ADC
And we can see the reflection of the value on Gauge and slider bar.

Following are the topics we will be covering,
1. Gauge
2. Icon Generation
3.Pot Controlled Gauge
4. Slider-bar (Drag Adjustment)

Gauge

Gauge is the tool which is very useful to indicate the value visually. Gauge can be used for displaying the speed, fuel remained in the tank or to indicate the temperature of the system.

We can configure the gauge in the STONE display very easily. We should have HMI design for gauge and we can then use needle to indicate the value. We will have to create the ICON for needle and then we will use Icon rotate control to rotate the needle. Below is the animation to show use of rotate icon control.

ICON Generation

STONE has given icon generation in the tool itself and we can use the icon for various purpose like icon rotation, icon animation and lot more.
You can refer this video for icon animation tutorial.
In this project we will use icon rotation control to rotate the needle as value at variable memory location gets change.
(I have covered more detailed in the tutorial video).
Here is the animation to show icon generation.

ADC Controlled Gauge

We are interfacing Potentiometer to Arduino and we are sending ADC value to display. So as we change the ADC value, we can see the reflection on display. Needle on the display changes based on the ADC value.

Here is the Arduino code read the potentiometer value and send it to the display.

#include <SoftwareSerial.h>

#define ADC0_DISPLAY_ADDR 0x0108  //memory address for Slider and Guage

#define FRAME_ADDR_INDEX_H    4
#define FRAME_ADDR_INDEX_L    5
#define FRAME_VALUE_INDEX_H   6
#define FRAME_VALUE_INDEX_L   7


SoftwareSerial mySerial(2, 3); // RX, TX

int Slider_Guage_Value;

unsigned char display_frame[8] = {0xA5,0x5A, 0x05, 0x82, 0x00,0x00, 0x00, 0x00};

void setup()
{
  // Open serial communications and wait for port to open:
  Serial.begin(115200);
  while (!Serial) {
    ; // wait for serial port to connect. Needed for Native USB only
  }

  // set the data rate for the SoftwareSerial port
  mySerial.begin(115200);  
}

void send_Value_to_display(int addr,int value)
{
  display_frame[FRAME_ADDR_INDEX_H] = (addr & 0xFF00) >> 8;
  display_frame[FRAME_ADDR_INDEX_L] = (addr & 0x00FF);
  display_frame[FRAME_VALUE_INDEX_H] = (value & 0xFF00) >> 8;
  display_frame[FRAME_VALUE_INDEX_L] = (value & 0x00FF);
  mySerial.write(display_frame,8);
}

void loop() // run over and over
{
   Slider_Guage_Value = analogRead(A0);

   Serial.print("A0 Val : ");
   Serial.println(Slider_Guage_Value);

   send_Value_to_display(ADC0_DISPLAY_ADDR,Slider_Guage_Value);  //Send Value for ADC0

   delay(500);   
}

Slider-Bar ( Drag Adjustment )

In this example, we are using slider bar for input and output purpose. I meant to say I can change the value using slider and if the value gets changed by other method then it gets reflected on slider bar as well.

slider bar scale is designed using Microsoft PowerPoint only. Here also we will be using icon to change the slider bar value.

Following are the Drag adjustment control properties we have to change, that is Variable memory address and End Value.

Detailed Tutorial