Web Server to show sensor values

Hi, I worked on this project using an Arduino MKR 1010 board to read CO2 and CO (among other gases) and show their values via a Serial Port and a 1602 LCD display, but now I want to upload these parameters to visualize them in a dashboard using Arduino IoT Cloud.

I found this tutorial on how to use an Arduino MKR 1000 as a web server. Is there a way to do this by using gauges and indicators to show the values in a prettier way?`

This is the code I have right now.

#include <Arduino_MKRENV.h>
#include <LiquidCrystal.h>
                                                      
#define         MG_PIN                       (A0)     //define which analog input channel you are going to use
#define         DC_GAIN                      (8.7)   //define the DC gain of amplifier

/***********************Software Related Macros************************************/
#define         READ_SAMPLE_INTERVAL         (50)    //define how many samples you are going to take in normal operation
#define         READ_SAMPLE_TIMES            (5)     //define the time interval(in milisecond) between each samples in
                                                     //normal operation

/**********************Application Related Macros**********************************/
//These two values differ from sensor to sensor. user should derermine this value.
#define         ZERO_POINT_VOLTAGE           (0.220) //define the output of the sensor in volts when the concentration of CO2 is 400PPM
#define         REACTION_VOLTGAE             (0.035) //define the voltage drop of the sensor when move the sensor from air into 1000ppm CO2

/*****************************Globals***********************************************/
float           CO2Curve[3]  =  {2.602,ZERO_POINT_VOLTAGE,(REACTION_VOLTGAE/(2.602-3))};
                                                     //two points are taken from the curve.
                                                     //with these two points, a line is formed which is
                                                     //"approximately equivalent" to the original curve.
                                                     //data format:{ x, y, slope}; point1: (lg400, 0.324), point2: (lg4000, 0.280)
                                                     //slope = ( reaction voltage ) / (log400 –log1000)

const int       AOUTpin   =  1  ;                    //the AOUT pin of the CO sensor goes into analog pin A1 of the arduino
//const int       DOUTpin   =  5  ;                    //the DOUT pin of the CO sensor goes into digital pin D5 of the arduino
//const int       ledPin    =  6  ;                    //the anode of the LED connects to digital pin D6 of the arduino

const int rs = 10, en = 8, d4 = 3, d5 = 2, d6 = 1, d7 = 0;    // initialize the library by associating any needed LCD interface pin
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);            // with the arduino pin number it is connected to

bool            boton = false;
int             limit ;                              //limit is the digital threshold coming form digital pin of MQ-7 sensor
int             value ;                              //value will read Analog output of MQ-7 sensor 
String          string_value;
String          string_percentage;

int             percentage;
byte            flecha[8] ={
  B00010,
  B00100,
  B01000,
  B10000,
  B01000,
  B00100,
  B00010
};

void setup()
{
    Serial.begin(9600);                              //UART setup, baudrate = 9600bps
    lcd.begin(16, 2);                                // set up the LCD's number of columns and rows:
    lcd.clear();
    lcd.createChar(1,flecha);
    //pinMode(DOUTpin, INPUT);                         //sets the pin as an input to the arduino
    //pinMode(ledPin, OUTPUT);                         //sets the pin as an output of the arduino

}

void loop()
{                                  
    float volts;
    if (!ENV.begin()) {
        Serial.println("Failed to initialize MKR ENV shield!");
        while (1);
   }
    
    Serial.println("Environmental data demonstrarion: ");
    
    volts = MGRead(MG_PIN);
    Serial.print( "SEN0159:" );
    Serial.print(volts);
    Serial.print( "V           " );

    percentage = MGGetPercentage(volts,CO2Curve);     //stores the CO2 ppm value using MGPercentage function

    lcd.setCursor(0,0);
    lcd.print("CO2: ");
    
    Serial.print("CO2:");
    if (percentage == -1) {
        Serial.print( "<400");
        lcd.write(1);
        lcd.print("400");
    } else {
        Serial.print(percentage);
        lcd.print(percentage);
    }
    lcd.print(" ppm");

    
    Serial.print( "ppm" );
    Serial.print("\n");
    
    value = analogRead(AOUTpin);                    //reads the analaog value from the CO sensor's AOUT pin

    lcd.setCursor(0,1);
    lcd.print("CO: ");
    lcd.print(value);
    lcd.print(" ppm");
    
    Serial.print("CO value: ");
    Serial.print(value);//prints the CO value
    Serial.println(" ppm");//prints the limit reached as either LOW or HIGH (above or underneath)

    if (limit == HIGH){
       digitalWrite(ledPin, HIGH); //if limit has been reached, LED turns on as status indicator
       Serial.println("Alarma CO");
    }
    else{
       digitalWrite(ledPin, LOW);//if threshold not reached, LED remains off
    }
    Serial.print('\n');

}

/*****************************  MGRead *********************************************
Input:   mg_pin - analog channel
Output:  output of SEN-000007
Remarks: This function reads the output of SEN-000007
************************************************************************************/
float MGRead(int mg_pin)
{
    int i;
    float v=0;

    for (i=0;i<READ_SAMPLE_TIMES;i++) {
        v += analogRead(mg_pin);
        delay(READ_SAMPLE_INTERVAL);
    }
    v = (v/READ_SAMPLE_TIMES) *5/1024 ;
    return v;
}

/*****************************  MQGetPercentage **********************************
Input:   volts   - SEN-000007 output measured in volts
         pcurve  - pointer to the curve of the target gas
Output:  ppm of the target gas
Remarks: By using the slope and a point of the line. The x(logarithmic value of ppm)
         of the line could be derived if y(MG-811 output) is provided. As it is a
         logarithmic coordinate, power of 10 is used to convert the result to non-logarithmic
         value.
************************************************************************************/
int  MGGetPercentage(float volts, float *pcurve)
{
   if ((volts/DC_GAIN )>=ZERO_POINT_VOLTAGE) {
      return -1;
   } else {
      return pow(10, ((volts/DC_GAIN)-pcurve[1])/pcurve[2]+pcurve[0]);
   }
}
``````````````````````````````````````````````´

Hey!

Not sure if I understand your use case...

If you just want to visualize your device's data in the IoT Cloud dashboards, you don't need to implement any web server in it. The IoT Cloud library will sync your variables between your device and the cloud.

You just have to create the Thing, variables and use the auto-generated sketch.

You can find more information here: https://docs.arduino.cc/arduino-cloud/getting-started/iot-cloud-getting-started

Hi @dbeamonte_arduino I will follow it, thanks!

1 Like

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.