HITIPanel

Video tutorials

WELCOME TO our TUTORIALS

You will see how to create a user interface to control and monitor your Arduino and how to plot and export data from your Arduino.

We will use an Arduino Uno connected to the following devices (schematic) :

Pin 3, 6, 8 : Switch, LED, Servo
Pin A0, A1, A2 : Potentiometer, Temperature sensor, Photoresistor

INSTALLATION

1. INSTALLATION

Install HITIPanel and our Arduino libraries (HITIComm and HITICommSupport).

BASICS

2. Control and monitoring (I/O)

Get your Arduino project ready for control and monitoring. Use the I/O Control Panels to monitor the state of a switch (on pin 3), and to control the on-board LED (on pin 13).

Sketch

#include <HITIComm.h>

// pins assignment
const int pin_Switch = 3;
const int pin_LED = LED_BUILTIN;

void setup()
{
    // initialize HITIComm library
    HC_begin(); 

    // pins mode
    pinMode(pin_Switch, INPUT);  // pin 3  -> INPUT
    pinMode(pin_LED, OUTPUT);    // pin 13 -> OUTPUT

    // switch the on-board LED ON
    digitalWrite(pin_LED, HIGH);
}

void loop()
{
    // communicate with HITIPanel
    HC_communicate(); 
}

3. Data acquisition and plotting

Use the Chart to acquire, plot, analyze, and export your data to Excel or Text files.

4. CONTROL AND MONITORING (AI, PWM, Servo)

Use the I/O Control Panels to monitor an analog input (potentiometer on pin A0), and to control a PWM output (LED on pin 6) and a Servo (on pin 8).

Sketch

// include HITIComm library
#include <HITIComm.h>

// pins assignment
const int pin_Switch  = 3;
const int pin_BlueLED = 6;
const int pin_Servo   = 8;
const int pin_LED     = LED_BUILTIN;

void setup()
{
    // initialize HITIComm library
    HC_begin();

    // pins mode
    pinMode(pin_Switch, INPUT);     // pin 3  -> INPUT
    pinMode(pin_BlueLED, OUTPUT);   // pin 6  -> OUTPUT
    pinMode(pin_LED, OUTPUT);       // pin 13 -> OUTPUT

    // pwm
    HC_outputType(pin_BlueLED, PWM);  // pin 6  -> PWM

    // servo
    HC_attachServo(pin_Servo);        // pin 8  -> SERVO OUTPUT

    // initialize output values
    analogWrite(pin_BlueLED, 127);
    HC_servoWrite(pin_Servo, 120500); // 120.5°
    digitalWrite(pin_LED, HIGH);
}

void loop()
{
    // communicate with HITIPanel
    HC_communicate();
}

5. CONTROL AND MONITORING (VALUES)

Use the Data Control Panels to control and monitor any value in your Arduino program. Use Indicators, Virtual Switches, Virtual Buttons, Metrics, and Setpoints.

Sketch

// include HITIComm library
#include <HITIComm.h>

// pins assignment
const int pin_Switch  = 3;
const int pin_BlueLED = 6;
const int pin_Servo   = 8;
const int pin_LED     = LED_BUILTIN;
const int pin_Potentiometer     = A0;
const int pin_TemperatureSensor = A1;

// digital data assignment
const int dd_VirtualSwitch  = 0;
const int dd_BooleanWatcher = 1;

// analog data assignment
const int ad_ControlValue          = 0;
const int ad_Temperature_voltage   = 1;
const int ad_Temperature_celsius   = 2;

void setup()
{
    // initialize HITIComm library
    HC_begin();

    // pins mode
    pinMode(pin_Switch, INPUT);     // pin 3  -> INPUT
    pinMode(pin_BlueLED, OUTPUT);   // pin 6  -> OUTPUT
    pinMode(pin_LED, OUTPUT);       // pin 13 -> OUTPUT

    // pwm
    HC_outputType(pin_BlueLED, PWM);  // pin 6  -> PWM

    // servo
    HC_attachServo(pin_Servo);        // pin 8  -> SERVO OUTPUT

    // initialize output values
    analogWrite(pin_BlueLED, 127);
    HC_servoWrite(pin_Servo, 120500); // 120.5°
    digitalWrite(pin_LED, HIGH);
}

void loop()
{
    // communicate with HITIPanel
    // => to place at the beginning of the loop()
    HC_communicate();

    // read threshold value from HITIPanel
    float threshold = HC_analogDataRead(ad_ControlValue);

    // check if potentiometer value has reached threshold value
    bool reached = (analogRead(pin_Potentiometer) > threshold);

    // send boolean value to HITIPanel
    HC_digitalDataWrite(dd_BooleanWatcher, reached);

    // read temperature sensor raw values
    int rawTemp = analogRead(pin_TemperatureSensor);

    // convert to voltage V (using 5V power supply)
    float voltage = ((float)rawTemp / 1024) * 5.0;

    // convert to degrees °C
    // (TMP36 sensor => +/-10mV/°C, 750mV at 25°C)
    float celsius = (voltage - 0.5) * 100;

    // send analog values to HITIPanel
    HC_analogDataWrite(ad_Temperature_voltage, voltage);
    HC_analogDataWrite(ad_Temperature_celsius, celsius);
}

ADVANCED

6. Filtering AND smoothing sensor data

Apply average and median filters on your sensor data (temperature sensor on pin A1) to remove noise and improve sensor resolution.

Sketch

// include HITIComm library
#include <HITIComm.h>
#include <HC_SignalFilter.h>

// pins assignment
const int pin_Switch  = 3;
const int pin_BlueLED = 6;
const int pin_Servo   = 8;
const int pin_LED     = LED_BUILTIN;
const int pin_Potentiometer     = A0;
const int pin_TemperatureSensor = A1;

// digital data assignment
const int dd_VirtualSwitch  = 0;
const int dd_BooleanWatcher = 1;

// analog data assignment
const int ad_ControlValue          = 0;
const int ad_Temperature_voltage   = 1;
const int ad_Temperature_celsius   = 2;
const int ad_Temperature_celsius_f = 3;

// signal filter
HC_SignalFilter filter_average;
HC_SignalFilter filter_median;

void setup()
{
    // initialize HITIComm library
    HC_begin();

    // pins mode
    pinMode(pin_Switch, INPUT);     // pin 3  -> INPUT
    pinMode(pin_BlueLED, OUTPUT);   // pin 6  -> OUTPUT
    pinMode(pin_LED, OUTPUT);       // pin 13 -> OUTPUT

    // pwm
    HC_outputType(pin_BlueLED, PWM);  // pin 6  -> PWM

    // servo
    HC_attachServo(pin_Servo);        // pin 8  -> SERVO OUTPUT

    // initialize output values
    analogWrite(pin_BlueLED, 127);
    HC_servoWrite(pin_Servo, 120500); // 120.5°
    digitalWrite(pin_LED, HIGH);

    // increase the buffer size to improve filtering
    // (default: 10, max: 255)
    filter_average.setBufferSize(50);
    filter_median.setBufferSize(5);
}

void loop()
{
    // communicate with HITIPanel
    // => to place at the beginning of the loop()
    HC_communicate();

    // read threshold value from HITIPanel
    float threshold = HC_analogDataRead(ad_ControlValue);

    // check if potentiometer value has reached threshold value
    bool reached = (analogRead(pin_Potentiometer) > threshold);

    // send boolean value to HITIPanel
    HC_digitalDataWrite(dd_BooleanWatcher, reached);

    // read temperature sensor raw values
    int rawTemp = analogRead(pin_TemperatureSensor);

    // convert to voltage V (using 5V power supply)
    float voltage = ((float)rawTemp / 1024) * 5.0;

    // convert to degrees °C
    // (TMP36 sensor => +/-10mV/°C, 750mV at 25°C)
    float celsius = (voltage - 0.5) * 100;

    // apply average + median filter on °C values
    float celsius_f = filter_average.average(filter_median.median(celsius));

    // send analog values to HITIPanel
    HC_analogDataWrite(ad_Temperature_voltage, voltage);
    HC_analogDataWrite(ad_Temperature_celsius, celsius);
    HC_analogDataWrite(ad_Temperature_celsius_f, celsius_f); 
}

7. Replacing delay() in your Arduino program

delay() is a blocking function which blocks execution of an Arduino program during a specified duration. It namely disturbs parallel running of tasks inside the loop(), such as control and monitoring with HITIPanel. Instead, use our non-blocking Timing library as a replacement for delay().

Sketch

// include HITIComm library
#include <HITIComm.h>
#include <HC_SignalFilter.h>
//#include <HC_MultiTimer.h>

// pins assignment
const int pin_Switch  = 3;
const int pin_BlueLED = 6;
const int pin_Servo   = 8;
const int pin_LED     = LED_BUILTIN;
const int pin_Potentiometer     = A0;
const int pin_TemperatureSensor = A1;

// digital data assignment
const int dd_VirtualSwitch  = 0;
const int dd_BooleanWatcher = 1;

// analog data assignment
const int ad_ControlValue          = 0;
const int ad_Temperature_voltage   = 1;
const int ad_Temperature_celsius   = 2;
const int ad_Temperature_celsius_f = 3;

// signal filter
HC_SignalFilter filter_average;
HC_SignalFilter filter_median;

// timer
HC_Timer timer;
//HC_MultiTimer timers(4);  // include 4 Timers

// variable
bool led_state = false;

void setup()
{
    // initialize HITIComm library
    HC_begin();

    // pins mode
    pinMode(pin_Switch, INPUT);     // pin 3  -> INPUT
    pinMode(pin_BlueLED, OUTPUT);   // pin 6  -> OUTPUT
    pinMode(pin_LED, OUTPUT);       // pin 13 -> OUTPUT

    // pwm
    HC_outputType(pin_BlueLED, PWM);  // pin 6  -> PWM

    // servo
    HC_attachServo(pin_Servo);        // pin 8  -> SERVO OUTPUT

    // initialize output values
    analogWrite(pin_BlueLED, 127);
    HC_servoWrite(pin_Servo, 120500); // 120.5°
    digitalWrite(pin_LED, HIGH);

    // increase the buffer size to improve filtering
    // (default: 10, max: 255)
    filter_average.setBufferSize(50);
    filter_median.setBufferSize(5);

    // timer must be reset manually
    //timer.manualReset();
}

void loop()
{
    // communicate with HITIPanel
    // => to place at the beginning of the loop()
    HC_communicate();

    // read threshold value from HITIPanel
    float threshold = HC_analogDataRead(ad_ControlValue);

    // check if potentiometer value has reached threshold value
    bool reached = (analogRead(pin_Potentiometer) > threshold);

    // send boolean value to HITIPanel
    HC_digitalDataWrite(dd_BooleanWatcher, reached);

    // read temperature sensor raw values
    int rawTemp = analogRead(pin_TemperatureSensor);

    // convert to voltage V (using 5V power supply)
    float voltage = ((float)rawTemp / 1024) * 5.0;

    // convert to degrees °C
    // (TMP36 sensor => +/-10mV/°C, 750mV at 25°C)
    float celsius = (voltage - 0.5) * 100;

    // apply average + median filter on °C values
    float celsius_f = filter_average.average(filter_median.median(celsius));

    // send analog values to HITIPanel
    HC_analogDataWrite(ad_Temperature_voltage, voltage);
    HC_analogDataWrite(ad_Temperature_celsius, celsius);
    HC_analogDataWrite(ad_Temperature_celsius_f, celsius_f); 

    delayed_task_1();
    //delayed_task_2();
}

void delayed_task_1()
{
    // every 500ms, when timer ends
    if(timer.delay(500))
    {
        // toggle on-board LED state
        digitalWrite(pin_LED, led_state);
        led_state = ! led_state;
    }
}

/*
void delayed_task_1()
{
    // when timer starts
    if(timer.isStarting())
        digitalWrite(pin_LED, HIGH);

    // every 2s, when timer ends
    if(timer.delay(2000))
        digitalWrite(pin_LED, LOW);

    // when virtual switch is actuated from HITIPanel
    if(HC_digitalDataRead(dd_VirtualSwitch))
    {
        // deactivate switch
        HC_digitalDataWrite(dd_VirtualSwitch, LOW);

        // reset and restart timer
        timer.reset();
    }
}
*/

/*
void delayed_task_2()
{
    // when multitimer starts
    if(timers.isStarting())
        analogWrite(pin_BlueLED, 100);

    // after 500ms
    if(timers.delay(0, 500))
        analogWrite(pin_BlueLED, 30);

    // after 250ms
    if(timers.delay(1, 250))
        analogWrite(pin_BlueLED, 250);

    // after 1000ms
    if(timers.delay(2, 1000))
        analogWrite(pin_BlueLED, 0);

    // after 1500ms
    timers.delay(3, 1500);
        // do nothing
}
*/

8. Storing data in the eeprom

Use the Eeprom Panel to easily store and manage data in the Arduino Eeprom, such as settings and parameters related to your Arduino projects. As an example, we create a 2 thresholds light detector (photoresistor on pin A2) whose threshold values are saved in the Eeprom.

Sketch

// include HITIComm library
#include <HITIComm.h>

// pins assignment
const int pin_LED = LED_BUILTIN;
const int pin_Photoresistor = A2;

// digital data assignment
const int dd_SaveSettings = 0;

// analog data assignment
const int ad_threshold_Low  = 0;
const int ad_threshold_High = 1;

// hysteresis detector settings
int threshold_Low;
int threshold_High;

void setup()
{
    // initialize HITIComm library
    HC_begin();

    // pins mode
    pinMode(pin_LED, OUTPUT); // pin 13 -> OUTPUT

    // 1) load settings from Eeprom (Integers 0 and 1)
    // 2) initialize Analog Data with settings
    HC_analogDataWrite(ad_threshold_Low,  HC_eeprom.readInteger(0));
    HC_analogDataWrite(ad_threshold_High, HC_eeprom.readInteger(1));
}

void loop()
{
    // communicate with HITIPanel
    // => to place at the beginning of the loop()
    HC_communicate();

    // read querried settings from HITIPanel
    threshold_Low  = (int) HC_analogDataRead(ad_threshold_Low);
    threshold_High = (int) HC_analogDataRead(ad_threshold_High);

    // restrict values between 0 and 1023
    threshold_Low  = constrain(threshold_Low,  0, 1023);
    threshold_High = constrain(threshold_High, 0, 1023);

    // High threshold must be higher or equal to Low threshold
    if(threshold_Low => threshold_High)
        threshold_Low = threshold_High;

    // send actual settings to HITIPanel
    HC_analogDataWrite(ad_threshold_Low,  threshold_Low);
    HC_analogDataWrite(ad_threshold_High, threshold_High);

    // if light is detected
    if(analogRead(pin_Photoresistor) => threshold_High)
        digitalWrite(pin_LED, HIGH); // turn LED on

    // if dark is detected
    else if(analogRead(pin_Photoresistor) < threshold_Low)
        digitalWrite(pin_LED, LOW);  // turn LED off

    // when virtual switch is actuated from HITIPanel
    if(HC_digitalDataRead(dd_SaveSettings))
    {
        // deactivate switch
        HC_digitalDataWrite(dd_SaveSettings, LOW);

        // save settings to Eeprom (Integers 0 and 1)
        HC_eeprom.writeInteger(0, threshold_Low);
        HC_eeprom.writeInteger(1, threshold_High);
    }
}

9. Identifying your devices

Identify the running program with a Code ID (name + version). A Code ID enables you to identify a program loaded on an Arduino with a name and a version number. The name can be used to distinguish a product from others (ID, serial number, location, customer).

Sketch

// include HITIComm library
#include <HITIComm.h>

// pins assignment
const int pin_LED = LED_BUILTIN;
const int pin_Photoresistor = A2;

// digital data assignment
const int dd_SaveSettings = 0;

// analog data assignment
const int ad_threshold_Low  = 0;
const int ad_threshold_High = 1;

// hysteresis detector settings
int threshold_Low;
int threshold_High;

// code ID
const char code_name[]    PROGMEM = "Light Detector - Room 7";
const char code_version[] PROGMEM = "1.0.5";

void setup()
{
    // initialize HITIComm library
    HC_begin();

    // pins mode
    pinMode(pin_LED, OUTPUT); // pin 13 -> OUTPUT

    // 1) load settings from Eeprom (Integers 0 and 1)
    // 2) initialize Analog Data with settings
    HC_analogDataWrite(ad_threshold_Low,  HC_eeprom.readInteger(0));
    HC_analogDataWrite(ad_threshold_High, HC_eeprom.readInteger(1));
		
		// set code ID
    HC_codeName(code_name);
    HC_codeVersion(code_version);
}

void loop()
{
    // communicate with HITIPanel
    // => to place at the beginning of the loop()
    HC_communicate();

    // read querried settings from HITIPanel
    threshold_Low  = (int) HC_analogDataRead(ad_threshold_Low);
    threshold_High = (int) HC_analogDataRead(ad_threshold_High);

    // restrict values between 0 and 1023
    threshold_Low  = constrain(threshold_Low,  0, 1023);
    threshold_High = constrain(threshold_High, 0, 1023);

    // High threshold must be higher or equal to Low threshold
    if(threshold_Low => threshold_High)
        threshold_Low = threshold_High;

    // send actual settings to HITIPanel
    HC_analogDataWrite(ad_threshold_Low,  threshold_Low);
    HC_analogDataWrite(ad_threshold_High, threshold_High);

    // if light is detected
    if(analogRead(pin_Photoresistor) => threshold_High)
        digitalWrite(pin_LED, HIGH); // turn LED on

    // if dark is detected
    else if(analogRead(pin_Photoresistor) < threshold_Low)
        digitalWrite(pin_LED, LOW);  // turn LED off

    // when virtual switch is actuated from HITIPanel
    if(HC_digitalDataRead(dd_SaveSettings))
    {
        // deactivate switch
        HC_digitalDataWrite(dd_SaveSettings, LOW);

        // save settings to Eeprom (Integers 0 and 1)
        HC_eeprom.writeInteger(0, threshold_Low);
        HC_eeprom.writeInteger(1, threshold_High);
    }
}