HITIPanel

Video tutorials

WELCOME TO our TUTORIALS

See how to create a user interface for your Arduino project.
See how to acquire and plot data from your Arduino.

For these tutorials, we used an Arduino Uno connected to the following devices (schematic) :

Pin 3, 5, 6, 8, 13 : Switch, Red LED, Blue LED, Servo, Built-in LED
Pin A0 : Photoresistor

INSTALLATION

1. INSTALLATION

See how to install HITIPanel. The required Arduino libraries are automatically installed and updated by the software itself at each start.

USER INTERFACE FOR ARDUINO

2. Connecting your Arduino to HITIPanel

See how to connect your Arduino to HITIPanel, by uploading a Reference sketch to your board.

Sketch

#include <HITIComm.h>

// sketch ID
// (used to identify the sketch running on your Arduino)
const char code_name[]    PROGMEM = "My sketch";
const char code_version[] PROGMEM = "1.0.0";

// button click counter
unsigned long clickCounter = 0;


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

    // set sketch ID
    HC_codeName(code_name);
    HC_codeVersion(code_version);

    // set pin 3 as Digital Input (with internal pull-up)
    pinMode(3, INPUT_PULLUP);

    // set pin 5 and 6 as PWM Outputs
    HC_outputType(5, PWM);
    HC_outputType(6, PWM);
    pinMode(5, OUTPUT);
    pinMode(6, OUTPUT);

    // set pin 8 as Servo Output (initial position is 12.8°)
    HC_attachServo(8, 12800);

    // set pin 13 as Digital Output
    pinMode(LED_BUILTIN, OUTPUT);
}


void loop()
{
    // communicate with HITIPanel or HITIBrain
    HC_communicate();


    // read photoresistor on Analog Input 0, and convert value in %
    float rawSensorValue = analogRead(0);
    float sensorValueInPercent = HCS_map(rawSensorValue, 0, 1023, 0, 100);


    // use Analog Data 0 as a Metric in HITIPanel
    // => to display the sensor value in %
    HC_analogDataWrite(0, sensorValueInPercent);


    // use Analog Data 1 as a Setpoint in HITIPanel
    // => to set a threshold value for the sensor
    // => and to constrain this value between 0 and 100
    float threshold = HC_analogDataRead_setpoint(1, 0, 100);


    // use Digital Data 0 as an Indicator in HITIPanel
    // => which turns on if the sensor value exceeds the threshold value
    bool indicatorValue = (sensorValueInPercent > threshold);
    HC_digitalDataWrite(0, indicatorValue);


    // use Digital Data 1 as a Switch in HITIPanel
    // => to toggle the servo between 2 positions
    if (HC_digitalDataRead(1))
        // if Switch is activated, move Servo to position 169.3°
        HC_servoWrite(8, 169300);
    else
        // if Switch is deactivated, move Servo back to position 12.8°
        HC_servoWrite(8, 12800);


    // use Digital Data 2 as a Button in HITIPanel
    // => to increment a counter
    if (HC_digitalDataRead_click(2))
        // when Button is clicked, increment counter
        clickCounter++;

    // use Analog Data 2 as a Metric in HITIPanel
    // => to display the counter value
    HC_analogDataWrite(2, clickCounter);
}

3. Getting a GUI for your I/O

See how to control and monitor your Arduino inputs and outputs from a customizable user interface (the I/O Control Panels).

4. Getting a GUI for your Arduino Project

See how to create a user interface for your Arduino project by using the Data Control Panels (Indicators, Virtual Switches, Virtual Buttons, Gauges, Sliders, Spinners).

ADVANCED SERIAL PLOTTER

5. Using the Chart Panel

See how to plot and log data from your Arduino by using the Chart Panel. See also how to export your data to Excel and Text files, and how to import data from multiple Text files created by other loggers.

Sketch

#include <HITIComm.h>

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


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

6. Filtering AND smoothing sensor data

See how to apply average and median filters on your sensor data (temperature sensor on pin A1) directly in your Arduino code 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); 
}

DELAY()

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 serial communication 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
}
*/

EEPROM PANEL

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);
    }
}