ESP8266 Community Forum

- Mon Dec 28, 2015 7:37 am #37309

All the simple answer is, all things to all people, knowledge is like air and it should be breathed freely....

http://freeboard.io/connect/


For anyone wishing to "Interact" via a protected NAT.....click the link above and research Thingspeak and Dweet.io, the snippet below will allow the fast response of the request for a json frame but this process as you can see from the link above will stream....without the need to present directly to the internet....the snippet would require port mapping

Code: Select all    else if(sPath=="/jsread")
  {
     ulJReqcount++;
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: application/json");
  client.println("Connection: close");
  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\"temperature1\": [\r\n");
     sResponse += pfTemp1;
     sResponse += ("\r\n],\r\n\"humidity1\": [\r\n");
     sResponse += pfHum1;
     sResponse += ("\r\n],\r\n\"dewpoint1\": [\r\n");
     sResponse += pfDew1;
     sResponse += ("\r\n],\r\n\"dstemperature1\": [\r\n");
     sResponse += pT;
     sResponse += ("\r\n],\r\n\"dstemperature2\": [\r\n");
     sResponse += pT1;
     sResponse += ("\r\n],\r\n\"dstemperature3\": [\r\n");
     sResponse += pT2;
     sResponse += ("\r\n],\r\n\"dstemperature4\": [\r\n");
     sResponse += pT3; 
     sResponse += ("\r\n],\r\n\"dstemperature5\": [\r\n");
     sResponse += pT4;     
     sResponse += ("\r\n],\r\n\"Systemv\": [\r\n");
     sResponse += pfVcC/1000, 3;
     sResponse += ("\r\n],\r\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 += TMnow;
     sResponse += ("\"\r\n]\r\n}");
    // Send the JSON response to the client
    client.println(sResponse);
    sResponse = "";
  }


An example of the frame from 2 DHT22's and a few DS18B20's....
for visualisation use the Freeboard link or the Diags page....

http://82.5.78.180:94/diag
https://freeboard.io/board/PLCLH6
http://82.5.78.180:94/jsread

The road to contentment starts with the act of giving............

- Mon Dec 28, 2015 8:41 am #37318 You can set up most routers to forward incoming packets to a certain device(ip) on your local network. I think it's called a DMZ zone? It allows public access to a certain device on your local network. I had a camera in my home I wanted to access from the outside world and thats how I did it. Go into the setup on your cable or DSL modem to set up. Set up the modem / router with a DMZ zone pointing to your ESP8266 ip address ( best to have static address on esp8266 so it won't change).

This is the diffcult part...
To acces from outside you will have to know your outside ip address ( google "whats my ip address" that will give you your outside IP address of your router). Since your probably on a dynamic IP it will only work until your service (comcast or ATT) changes your IP which can happen if you reboot or have a power outage. Static IP's are expensive and mostly reserved for business use. So if your modem reboots mid day, you won't know your new ip address. Thats where you want to play around with a service that will convert your dynamic ip to DNS. I used to use DYNDNS but I think they charge now, you can look around and find one just google "free dynamic dns service".

Im sure there are many other ways to do this, just my suggestion....

- Tue Dec 29, 2015 5:52 am #37368 2 ways to remotely access your network device over the internet is 1, thru Forwarding rules in your router, and 2, via an online server or a cloud service as others call it nowadays.

Forwarding Rules:
GengusKhan have used Forwarding rules in his router that is why his esp wifi is publicly accessible at: 82.5.78.180, on ports 80, 81, 82, 83, and others.
the code he posted is an arduino code running on his ESP8266 which will be executed when anyone access it at: http://82.5.78.180:94/jsread.
Forwarding rules differ from one router brand to another as mentioned here. but their difference is not really that much.

Online servers / Cloud service:
In this approach, your wifi module will need to connect to an online server, no Forwarding required, send HTTP POST to upload data and HTTP GET, to request data.
HTTP POST is commonly used when you want to "remotely monitor" your wifi module. data is uploaded to a server that offers front end application like the normally usage for Thingspeak IOT, Freeboard.io, data.sparkfun, etc.
Front end apps are those graphs, gauges, and maps from these servers. These are used for monitoring.
HTTP GET on the other hand, is used when you to get data from a server. this data can be used to trigger an io of an ESP8266.
ie. when you get a data of "1", you turn you servo motor 90deg left. when you get a data of "0", you turn your servo motor 90deg right. thus, providing a way of "remote control".
Note: GET and POST on some servers works the same.

Remote monitoring apps like thingspeak iot and freeboard.io are very common now.
The front end apps for remote control is the one we dont normally get from these server.

So let us make a working example.

Tools needed:
Hosting site. a free one: https://www.000webhost.com
so anyone who wish to make wiil need not to spend an amount.
HTML, PHP, maybe Ajax, programming skill.
very basic will do.
helpful links:
http://www.w3schools.com/tags/att_button_formaction.asp
http://html.net/tutorials/php/lesson16.php
http://www.w3schools.com/ajax/tryit.asp ... ajax_first

1. Create a hosting account: https://members.000webhost.com
once you have an account, create a domain account, and go thru the Control Panel (CPanel) so you can make files for the
server.

domain account created: villtech.comlu.com

CPanel opened. scroll down to File Manager

Inside File Manager. go to public_html folder. that is where we need to create files.


Files to be created:
index.html - HTML page
0.php - script to write "0" to data.json file
1.php - script to write "1" to data.json file
data.json - holds our data. will be accessed by ESP8266

HTML: index.html

Code: Select all<!DOCTYPE html>
<html>
<body>
<center>
<h3>Local Server<h3>
<button type="button" onclick="On()" >On</button>
<button type="button" onclick="Off()">Off</button>
</center>

<script>
function On() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "/1.php", true);
  xhttp.send();
}

function Off() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "/0.php", true);
  xhttp.send();
}
</script>

</body>
</html>


it contains a little Ajax script. Ajax is used so that the whole page need not to refresh when a button is clicked

PHP script: 0.php - will write "0" to data.json

Code: Select all<?php
$myfile = fopen("data.json", "w") or die("Unable to open file!");
fwrite($myfile, "{0}");
fclose($myfile);
?>


PHP script: 1.php - will write "1" to data.json

Code: Select all<?php
$myfile = fopen("data.json", "w") or die("Unable to open file!");
fwrite($myfile, "{1}");
fclose($myfile);
?>


json: data.json
will be automatically created once we run our html.

Note: All files must be located in one location. For this example, in public_html

Once all is set, you can access the webpage now using the domain you created.

you can access mine at: http://villtech.comlu.com

When button "On" is clicked, "1" is written to data.json
When button "Off" is clicked, "0" is written to data.json

On ESP8266, you can read the content of data.json file using the sample Arduin Sketch "WiFiClient"
with this GET command:

Code: Select all  client.print(String("GET ") + "/data.json" + " HTTP/1.1\r\n" +
               "Host: " + host + "\r\n" +
               "Connection: close\r\n\r\n");


where host = "your domain"

Once your esp get a "1" or "0", you should be able to control its io.


Using dweet.io for remote control application.
dweet.io provided url to:
write - http://dweet.io/dweet/for/my-thing-name?hello=world
read - http://dweet.io/get/latest/dweet/for/my-thing-name
files on its server.
where: "my-thing-name" = file name
"hello=world" = data.
anything that follows "?" is your data to be written

here is an link to write "0" and "1" to file "esp8266" on dweet.io server: http://villtech.comlu.com/dweet.html

dweet.html code

Code: Select all<!DOCTYPE html>
<html>
<body>
<center>
<h3>dweet.io Server<h3>
<button type="button" onclick="On()" >On</button>
<button type="button" onclick="Off()">Off</button>
</center>

<script>
function On() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "http://dweet.io/dweet/for/esp8266?1", true);
  xhttp.send();
}

function Off() {
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "http://dweet.io/dweet/for/esp8266?0", true);
  xhttp.send();
}
</script>

</body>
</html>


on your esp, here is the GET command to read the content of "esp8266" from dweet.io:

Code: Select all  client.print(String("GET ") + "/get/latest/dweet/for/esp8266" + " HTTP/1.1\r\n" +
               "Host: " + host + "\r\n" +
               "Connection: close\r\n\r\n");


where host = 52.0.196.251. dweet.io IP.

Reply of dweet to esp8266's request when "On" button from the sample is pressed


Reply of dweet to esp8266's request when "Off" button from the sample is pressed

- Fri Jan 01, 2016 4:11 pm #37646 Superb explanation, some more examples are in the HTML just view source or better still inspect element and explore the scripts.......

The root of the ESP8266-201...Just the same url with a name....
http://j.mp/ESP8266LCD

The HTML....Both Port Mapped and Cloud Sourced Data......

Code: Select all
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>ESP8266-Environment-Monitor</title>
 </head>
<font color="#000000"><body bgcolor="#a0dFfe"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
   <h2>Environmental Sensor Readings</h2>
   <h2>Using 5 ESP8266's with Various Sensors<BR><BR> ♂♀♪♫☼►</h2>
<BR><BR><a href="http://esp8266.com/">Find out how this is done Visit ESP8266.COM Support Forum</a><BR><BR><BR>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<div style="float:left;">
<div id="ESPS001" style="float:left;"><a href="http://82.5.78.180:83/diag">Device Information Page</a><BR><a href="https://freeboard.io/board/dRP7R6">Freeboard IO Dashboard</a><BR><a href="http://82.5.78.180:83/jsread">GET JSON Frame</a><BR>Sensors from<BR>ESP8266 Number 1 </div>
<div id="ESPS002" style="float:left;"><a href="http://82.5.78.180:92/diag">Device Information Page</a><BR><a href="https://freeboard.io/board/ISfNF7">Freeboard IO Dashboard</a><BR><a href="http://82.5.78.180:92/jsread">GET JSON Frame</a><BR>Sensors from<BR>ESP8266 Number 2 </div>
<div id="ESPS003" style="float:left;"><a href="http://82.5.78.180:93/diag">Device Information Page</a><BR><a href="https://freeboard.io/board/QojxS6">Freeboard IO Dashboard</a><BR><a href="http://82.5.78.180:93/jsread">GET JSON Frame</a><BR>Sensors from<BR>ESP8266 Number 3 </div>
<div id="ESPS004" style="float:left;"><a href="http://82.5.78.180:81/diag">Device Information Page</a><BR><a href="https://freeboard.io/board/6GyRV6">Freeboard IO Dashboard</a><BR><a href="http://82.5.78.180:81/jsread">GET JSON Frame</a><BR>Sensors from<BR>ESP8266 Number 4 </div>
<div id="ESPS005" style="float:left;"><a href="http://82.5.78.180/diag">Device Information Page</a><BR><a href="https://freeboard.io/board/qTP6R6">Freeboard IO Dashboard</a><BR><a href="http://82.5.78.180/jsread">GET JSON Frame</a><BR>Sensors from<BR>ESP8266 Number 5 </div>
    <div id="container">
  <style type="text/css">
  #container { height: 10%; width: 10%; display: table; }
  #gauge_div { width: 100px; margin: 0 auto; }
ESPS001, th , td {
    border: 1px solid purple;
    border-collapse: collapse;
    padding: 5px;
}
</style>
      <div id="inner">
        <div id="gauge_div"></div>
      </div>
    </div>
</div>
 <script>
$.ajax({
    type: "GET",
    url: "http://82.5.78.180:83/jsread",
    async: false,
    beforeSend: function(x) {
     if(x && x.overrideMimeType) {
      x.overrideMimeType("application/j-son;charset=UTF-8");
     }
 },
 dataType: "json",
 success: function(data){
     var items = [];

     $.each(data, function(key, val) {
       items.push("<tr><td> "+ key +" </td><td> " + val + " </td></tr> ");
     });
   
     $('.my-new-list').remove();   


     $('<ul/>', {
       'class': 'my-new-list',
       html: items.join('')
     }).appendTo('#ESPS001');
 }
});

   </script>
<script>
$.ajax({
    type: "GET",
    url: "http://82.5.78.180:93/jsread",
    async: false,
    beforeSend: function(x) {
     if(x && x.overrideMimeType) {
      x.overrideMimeType("application/j-son;charset=UTF-8");
     }
 },
 dataType: "json",
 success: function(data){
     var items = [];

     $.each(data, function(key, val) {
       items.push("<tr><td> "+ key +" </td><td> " + val + " </td></tr> ");
     });
   
    // $('.my-new-list').remove();   


     $('<ul/>', {
       'class': 'my-new-list',
       html: items.join('')
     }).appendTo('#ESPS002');
 }
});
   </script>
<script>
$.ajax({
    type: "GET",
    url: "http://82.5.78.180:92/jsread",
    async: false,
    beforeSend: function(x) {
     if(x && x.overrideMimeType) {
      x.overrideMimeType("application/j-son;charset=UTF-8");
     }
 },
 dataType: "json",
 success: function(data){
     var items = [];

     $.each(data, function(key, val) {
       items.push("<tr><td> "+ key +" </td><td> " + val + " </td></tr> ");
     });
   
    // $('.my-new-list').remove();   


     $('<ul/>', {
       'class': 'my-new-list',
       html: items.join('')
     }).appendTo('#ESPS003');
 }
});
   </script>
<script>
$.ajax({
    type: "GET",
    url: "http://82.5.78.180:81/jsread",
    async: false,
    beforeSend: function(x) {
     if(x && x.overrideMimeType) {
      x.overrideMimeType("application/j-son;charset=UTF-8");
     }
 },
 dataType: "json",
 success: function(data){
     var items = [];

     $.each(data, function(key, val) {
       items.push("<tr><td> "+ key +" </td><td> " + val + " </td></tr> ");
     });
   
    // $('.my-new-list').remove();   


     $('<ul/>', {
       'class': 'my-new-list',
       html: items.join('')
     }).appendTo('#ESPS004');
 }
});
   </script>
<script>
$.ajax({
    type: "GET",
    url: "http://82.5.78.180/jsread",
    async: false,
    beforeSend: function(x) {
     if(x && x.overrideMimeType) {
      x.overrideMimeType("application/j-son;charset=UTF-8");
     }
 },
 dataType: "json",
 success: function(data){
     var items = [];

     $.each(data, function(key, val) {
       items.push("<tr><td> "+ key +" </td><td> " + val + " </td></tr> ");
     });
   
    // $('.my-new-list').remove();   


     $('<ul/>', {
       'class': 'my-new-list',
       html: items.join('')
     }).appendTo('#ESPS005');
 }
});
   </script>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>

  // set your channel id here
  var channel_id = 75183;
  // set your channel's read api key here if necessary
  var api_key = '';
  // maximum value for the gauge
  var max_gauge_value = 50;
  // name of the gauge
  var gauge_name = 'Int-Temp';

  // global variables
  var chart, charts, data;

  // load the google gauge visualization
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(initChart);

  // display the data
  function displayData(point) {
    data.setValue(0, 0, gauge_name);
    data.setValue(0, 1, point);
    chart.draw(data, options);
  }

  // load the data
  function loadData() {
    // variable for the data point
    var p;

    // get the data from thingspeak
    $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {

      // get the data point
      p = data.field1;

      // if there is a data point display it
      if (p) {
       // p = Math.round((p / max_gauge_value) * 100);
        displayData(p);
      }

    });
  }

  // initialize the chart
  function initChart() {

    data = new google.visualization.DataTable();
    data.addColumn('string', 'Label');
    data.addColumn('number', 'Value');
    data.addRows(1);

    chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
    options = {width: 300, height: 300, min: 0, max: 50, redFrom: 32, redTo: 50, yellowFrom:0, yellowTo: 17, minorTicks: 10};

    loadData();

    // load new data every 15 seconds
    setInterval('loadData()', 15000);
  }

</script>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
// This is the Visualisation from Matlab from the data posted
<div style="float:none;"><iframe width="450" height="375" style="border: 1px solid #cccccc;" src="http://api.thingspeak.com/apps/matlab_visualizations/41029" ></iframe>
<IMG SRC="https://raw.githubusercontent.com/genguskahn/ESP8266-For-DUMMIES/master/SoC/DimmerDocs/organicw.gif" WIDTH="450" HEIGHT="375" BORDER="1">
<BR>environmental.monitor.log@gmail.com<BR><FONT SIZE=-2>ESP8266 With Various Sensors<BR><FONT SIZE=-2>Compiled Using ver. 2.0.0-rc2, built December, 2015<BR></div>
</body>
</html> 


The Next ISSUE is CORS and this is easily addressed by the Header provided with the JSON Frame.....

Code: Select allif(sPath=="/jsread")   
   {
     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, POST, OPTIONS");
  client.println("Access-Control-Allow-Headers: Content-Type");
  client.println("Access-Control-Max-Age: 86400");
  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],\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 += TMnow;
     sResponse += ("\"\r\n]\r\n}");
    // Send the JSON response to the client
    client.println(sResponse);     

   }