Example sketches for the new Arduino IDE for ESP8266

Moderator: igrr

User avatar
By GengusKahn
#67532 The displaying of real data from local & remote ESP8266 sensors using very simple CSS/JS/HTML, with CORS (Cross Origin Resource Sharing).

The data is being presented via a client.print() but easily adapted for server.streamFile().

The required Justgage files should be downloaded and compressed with GZIP for uploading to the SPIFFS to save space. Only the 3 files declared in the webpages need to uploaded to SPIFFS.
https://github.com/toorshia/justgage

The links in the files are actively presenting data, so the Webpages will work without editing if you have downloaded the files from the Github.....

The Sketch snippet presentation of the JSON Data...(Not using JSON Library as it is too Slow)......
Data here from ESP8266 with DHT22....
Code: Select allif(sPath=="/jsread")   
   {
        timeClient.update();  // Using NTP
  String Dnow=timeClient.getFormattedTime();
     ulJReqcount++;
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: application/json");
  client.println("Connection: close");
 // client.println("Connection: keep-alive");
  client.println("Access-Control-Allow-Origin: *");
  client.println("Access-Control-Allow-Methods: GET");
  client.println("Access-Control-Allow-Headers: Content-Type");
  client.println("Access-Control-Max-Age: 300");
  client.println();
     sResponse  = ("{\r\n\"temperature\": [\r\n");
     sResponse += pfTemp;
     sResponse += ("\r\n],\r\n\"humidity\": [\r\n");
     sResponse += pfHum;
     sResponse += ("\r\n],\r\n\"dewpoint\": [\r\n");
     sResponse += pfDew;
     sResponse += ("\r\n],\r\n\"Systemv\": [\r\n");
     sResponse += pfVcC/1000;
     sResponse += ("\r\n],\r\n\"Low_Hum_Today\": [\r\n");
     sResponse += pfHumLow;
     sResponse += ("\r\n],\r\n\"High_Hum_Today\": [\r\n");
     sResponse += pfHumHigh;
     sResponse += ("\r\n],\r\n\"Low_Temp_Today\": [\r\n");
     sResponse += pfTempLow;
     sResponse += ("\r\n],\r\n\"High_Temp_Today\": [\r\n");
     sResponse += pfTempHigh;
     sResponse += ("\r\n],\n\"Jsreqs\": [\r\n");
     sResponse += ulJReqcount;
     sResponse += ("\r\n],\r\n\"Uptime\": [\r\n\"");
     sResponse += duration1;
     sResponse += ("\"\r\n],\r\n\"TiMestamp\": [\r\n\"");
     sResponse += Dnow;
     sResponse += ("\"\r\n]\r\n}");
    // Send the JSON response to the client
    client.println(sResponse);     

   }


The Webpage for the snippet above presenting DHT22 data.
Code: Select all<!doctype html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Esp8266 with DHT22</title>
    <meta name="viewport" content="width=device-width">
    <style>
    .wrapper {
      position: relative;
      width: 640px;
      height: 480px;
      margin: 50px auto 0 auto;
      padding-bottom: 30px;
      border: 1px solid #ccc;
      border-radius: 3px;
      clear: both;
    }

    .box {
      float: left;
      width: 50%;
      height: 33%;
      box-sizing: border-box;
    }

    .container {
      width: 450px;
      margin: 0 auto;
      text-align: center;
    }

    .gauge {
      width: 320px;
      height: 160px;
    }

    button {
      margin: 30px 5px 0 2px;
      padding: 16px 40px;
      border-radius: 5px;
      font-size: 18px;
      border: none;
      background: #34aadc;
      color: white;
      cursor: pointer;
    }
    </style>
  </head>

  <body>
     <div class="wrapper">
      <div class="box">
       <div id="g1" class="gauge"></div>
      </div>
      <div class="box">
       <div id="g2" class="gauge"></div>
      </div>
      <div class="box">
       <div id="g3" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g4" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g5" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g6" class="gauge"></div>
      </div>
   </div>
    <div class="container">

  </div>
    <script src="/jquery.min.js"></script>
    <script src="/raphael-2.1.4.min.js"></script>
    <script src="/justgage.js"></script>
    <script>
$(document).ready(function(){
 $.getJSON("http://82.5.78.180:81/jsread", function(result){

      var g1 = new JustGage({
        id: 'g1',
        value: result.temperature,
        title: 'Latest Temperature',
        min: 0,
        max: 50,
        symbol: '\260C',
        pointer: true,
        gaugeWidthScale: 0.6,
        customSectors: [{
          color: '#ff0000',
          lo: 25,
          hi: 50
        }, {
          color: "#00ff00",
          lo: 0,
          hi: 25
        }],
        counter: true
      });

      var g2 = new JustGage({
        id: 'g2',
        value: result.humidity,
         title: 'Latest Humidity',
        min: 0,
        max: 100,
        symbol: '%',
        pointer: true,
        pointerOptions: {
          toplength: -15,
          bottomlength: 10,
          bottomwidth: 12,
          color: '#8e8e93',
          stroke: '#ffffff',
          stroke_width: 3,
          stroke_linecap: 'round'
        },
        gaugeWidthScale: 0.6,
        counter: true
      });

      var g3 = new JustGage({
        id: 'g3',
        value: result.High_Temp_Today,
        title: 'High Temperature',
        min: 0,
        max: 50,
        symbol: '\260C',

        pointer: true,
        gaugeWidthScale: 0.4,
        pointerOptions: {
          toplength: 10,
          bottomlength: 10,
          bottomwidth: 8,
          color: '#000'
        },
        customSectors: [{
          color: "#ff0000",
          lo: 25,
          hi: 50
        }, {
          color: "#00ff00",
          lo: 0,
          hi: 25
        }],
        counter: true
      });

      var g4 = new JustGage({
        id: 'g4',
        value: result.High_Hum_Today,
         title: 'High Humidity',
        min: 0,
        max: 100,
        symbol: '%',
        pointer: true,
        pointerOptions: {
          toplength: 8,
          bottomlength: -20,
          bottomwidth: 6,
          color: '#8e8e93'
        },
        gaugeWidthScale: 0.1,
        counter: true
      });
      var g5 = new JustGage({
        id: 'g5',
        value: result.Low_Temp_Today,
         title: 'Low Temperature',
        min: 0,
        max: 50,
        symbol: '\260C',

        pointer: true,
        gaugeWidthScale: 0.4,
        pointerOptions: {
          toplength: -25,
          bottomlength: -25,
          bottomwidth: 8,
          color: '#000'
        },
        customSectors: [{
          color: "#ff0000",
          lo: 25,
          hi: 50
        }, {
          color: "#00ff00",
          lo: 0,
          hi: 25
        }],
        counter: true
      });

      var g6 = new JustGage({
        id: 'g6',
        value: result.Low_Hum_Today,
         title: 'Low Humidity',
        min: 0,
        max: 100,
        symbol: '%',
        pointer: true,
        pointerOptions: {
          toplength: 8,
          bottomlength: -20,
          bottomwidth: 6,
          color: '#8e8e93'
        },
        gaugeWidthScale: 0.1,
        counter: true
      });
    });
  });
    </script>
  </body>

</html>


This Webpage is for a WH1080 Weather-station to be hosted either from SPIFFS or elsewhere........
The Webpage Data is from an ESP8266 relay that is pulling the data from my weather-station.......
Code: Select all<!doctype html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Weather Data</title>
    <meta name="viewport" content="width=device-width">
    <style>
    .wrapper {
      position: relative;
      width: 440px;
      height: 500px;
      margin: 20px auto 0 auto;
      padding-bottom: 30px;
      border: 1px solid #ccc;
      border-radius: 3px;
      clear: both;
    }

    .box {
      float: left;
      width: 50%;
      height: 33%;
      box-sizing: border-box;
    }

    .container {
      width: 430px;
      margin: 0 auto;
      text-align: center;
      color: white;
    }

    .gauge {
      width: 220px;
      height: 160px;
    }

    button {
      margin: 30px 5px 0 2px;
      padding: 16px 40px;
      border-radius: 5px;
      font-size: 18px;
      border: 2px;
      background: #404040;
      color: white;
      cursor: pointer;
    }
    </style>
  </head>

  <body bgcolor="#000">
     <div class="wrapper">
      <div class="container">
        WH1080 PWS Weather Data<BR>
        <div id="title" class="tile1"><h3></h3></div>
      </div>
      <div class="box">
       <div id="g1" class="gauge"></div>
      </div>
      <div class="box">
       <div id="g2" class="gauge"></div>
      </div>
      <div class="box">
       <div id="g5" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g4" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g3" class="gauge"></div>
      </div>
      <div class="box">
        <div id="g6" class="gauge"></div>
      </div>
    </div>
    <div class="container">
      <a href="/gaugeJSON.htm"><button type="button">Refresh Gauges</button></a>
    </div>
    <BR><BR><BR><BR>
    <script src="/jquery.min.js"></script>
    <script src="/raphael-2.1.4.min.js"></script>
    <script src="/justgage.js"></script>
    <script>
  $(document).ready(function(){
    $.getJSON("http://82.5.78.180:5080/realtime", function(result){

      $(title).text("Time Sampled (UTC) : " + result.date);

      var g1 = new JustGage({
        id: 'g1',
        value: result.temp,
        title: 'External Temperature',
        min: 0,
        max: 50,
        symbol: '\260C',
        pointer: true,
        gaugeWidthScale: 0.6,
        pointerOptions: {
        color: '#ffff00'
        },
        customSectors: [{
          color: '#ff0000',
          lo: 25,
          hi: 50
        }, {
          color: "#00ff00",
          lo: 0,
          hi: 25
        }],
        valueFontColor: '#ffffff',
        counter: true
      });

      var g2 = new JustGage({
        id: 'g2',
        value: result.hum,
         title: 'External Humidity',
        min: 0,
        max: 100,
        symbol: '%',
        pointer: true,
        pointerOptions: {
          toplength: -15,
          bottomlength: 10,
          bottomwidth: 12,
          color: '#ffff00',
          stroke: '#ffffff',
          stroke_width: 3,
          stroke_linecap: 'round'
        },
        gaugeWidthScale: 0.6,
        valueFontColor: '#ffffff',
        counter: true
      });

      var g3 = new JustGage({
        id: 'g3',
        value: result.bearing,
        title: 'Wind Direction',
        min: 0,
        max: 360,
        symbol: '\260',
        donut: true,
        pointer: true,
        gaugeWidthScale: 0.4,
        pointerOptions: {
          toplength: 10,
          bottomlength: 10,
          bottomwidth: 8,
          color: '#ffff00'
        },
        valueFontColor: '#ffffff',
        counter: true
      });

      var g4 = new JustGage({
        id: 'g4',
        value: result.rfall,
         title: 'Rainfall Today',
        min: 0,
        max: 100,
        symbol: 'mm',
        pointer: true,
        pointerOptions: {
          toplength: 8,
          bottomlength: -20,
          bottomwidth: 6,
          color: '#ffff00'
        },
        gaugeWidthScale: 0.1,
        valueFontColor: '#ffffff',
        counter: true
      });
      var g5 = new JustGage({
        id: 'g5',
        value: result.press,
         title: 'Barometer',
        min: 980,
        max: 1030,
        symbol: 'mb',

        pointer: true,
        gaugeWidthScale: 0.4,
        pointerOptions: {
          toplength: -25,
          bottomlength: -25,
          bottomwidth: 8,
          color: '#ffff00'
        },
        customSectors: [{
          color: "#ff0000",
          lo: 1010,
          hi: 1030
        }, {
          color: "#00ff00",
          lo: 980,
          hi: 1010
        }],
        valueFontColor: '#ffffff',
        counter: true
      });

      var g6 = new JustGage({
        id: 'g6',
        value: result.wspeed,
         title: 'Latest Windspeed',
        min: 0,
        max: 50,
        symbol: 'MPH',
        pointer: true,
        pointerOptions: {
          toplength: 8,
          bottomlength: -20,
          bottomwidth: 6,
          color: '#ffff00'
        },
        gaugeWidthScale: 0.1,
        valueFontColor: '#ffffff',
        counter: true
      });
    });
  });
    </script>
  </body>

</html>