compilerexe/DHT22_WITH_NETPIE.ino

## DHT22_WITH_NETPIE.ino
#include <ESP8266WiFi.h>
#include <MicroGear.h>
#include "DHT.h"
#include <ArduinoJson.h>

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <ESP_Adafruit_SSD1306.h>

#define OLED_RESET 4
Adafruit_SSD1306 display(OLED_RESET);

#define NUMFLAKES 10
#define XPOS 0
#define YPOS 1
#define DELTAY 2

#define DHTPIN 12
#define DHTTYPE DHT22

const char* ssid     = "MAXNET";
const char* password = "ThisIsC@mpilerExe";

#define APPID   "WebApp"
#define KEY     "l4F2fssVOpteaaH"
#define SECRET  "UHj6HSeDpKNTxINr0BouzsLdo"
#define ALIAS   "Chiang Mai"

WiFiClient client;
DHT dht(DHTPIN, DHTTYPE);

int state_connected = 0, timer = 0;
MicroGear microgear(client);

void onMsghandler(char *topic, uint8_t* msg, unsigned int msglen) {
    Serial.print("Incoming message --> ");
    msg[msglen] = '\0';
    Serial.println((char *)msg);
}

void onFoundgear(char *attribute, uint8_t* msg, unsigned int msglen) {
    Serial.print("Found new member --> ");
    for (int i=0; i<msglen; i++)
        Serial.print((char)msg[i]);
    Serial.println();
}

void onLostgear(char *attribute, uint8_t* msg, unsigned int msglen) {
    Serial.print("Lost member --> ");
    for (int i=0; i<msglen; i++)
        Serial.print((char)msg[i]);
    Serial.println();
}

void onConnected(char *attribute, uint8_t* msg, unsigned int msglen) {
    Serial.println("Connected to NETPIE...");
    microgear.setAlias(ALIAS);
}

void setup() {
    microgear.on(MESSAGE,onMsghandler);
    microgear.on(PRESENT,onFoundgear);
    microgear.on(ABSENT,onLostgear);
    microgear.on(CONNECTED,onConnected);
    Serial.begin(115200);
    dht.begin();
    display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
    display.clearDisplay();
    display.setTextSize(1);
    display.setTextColor(WHITE);
    display.setCursor(0,0);
    display.println("WiFi Connecting ...");
    display.display();
    Serial.println("Starting...");
    if (WiFi.begin(ssid, password)) {
        while (WiFi.status() != WL_CONNECTED) {
            delay(500);
            Serial.print(".");
        }
    }
    Serial.println();
    Serial.println("WiFi connected");
    Serial.print("IP address : ");
    Serial.println(WiFi.localIP());
    display.clearDisplay();
    display.println("NETPIE Connecting ...");
    display.display();
    microgear.init(KEY,SECRET,ALIAS);
    microgear.connect(APPID);
}

void loop() {
    if (microgear.connected()) {
        if (state_connected == 0) {
            Serial.println("connected");
            state_connected = 1;
        }
        microgear.loop();
        if (timer >= 1000) {
            float t = dht.readTemperature();
            float h = dht.readHumidity();

            String json = "{";
            json += "\"temp\":";
            json += String(t);
            json += ",\"humid\":";
            json += String(h);
            json += "}";

            display.clearDisplay();
            display.setTextSize(1);
            display.setTextColor(WHITE);
            display.setCursor(30,0);
            display.println("Battery 100 %");
            display.setTextSize(2);
            display.setCursor(28,16);
            display.print(t);
            display.println(" C");
            display.setCursor(28,40);
            display.print(h);
            display.println(" %");
            display.display();

            Serial.print("Publish : ");
            Serial.println(json);
            microgear.chat(ALIAS, json);
            timer = 0;
        }
        else timer += 100;
    }
    else {
        Serial.println("connection lost, reconnect...");
        if (timer >= 5000) {
            display.clearDisplay();
            display.setTextSize(2);
            display.setCursor(0,0);
            display.setTextColor(WHITE);
            display.println("Reconnecting ...");
            display.display();
            microgear.connect(APPID);
            timer = 0;
            state_connected = 0;
        }
        else timer += 100;
    }
    delay(100);
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Chiang Mai</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- <link rel="stylesheet" href="assets/css/sweetalert.css"> -->
    <!-- <script src="assets/js/jquery-3.1.1.min.js"></script> -->
    <script src="assets/js/tether.min.js"></script>
    <!-- <script src="assets/js/bootstrap.min.js"></script> -->
    <!-- <script src="assets/js/sweetalert.min.js"></script> -->
    <script src="microgear.js"></script>
    <script>
    	const APPID = "WebApp";
    	const KEY = "Ubm3H0JNX1i5ncL";
    	const SECRET = "rcieA6WIY7zlo0gHB7FNoiRBA";

    	const ALIAS = "Chiang Mai";

    	var microgear = Microgear.create({
    		key: KEY,
    		secret: SECRET,
    		alias : ALIAS
    	});

    	microgear.on('message',function(topic,msg) {
        var obj = JSON.parse(msg);
        var time = new Date();
        var day, month;
        switch (time.getDay()) {
          case 1: day = "01"; break;
          case 2: day = "02"; break;
          case 3: day = "03"; break;
          case 4: day = "04"; break;
          case 5: day = "05"; break;
          case 6: day = "06"; break;
          case 7: day = "07"; break;
          case 8: day = "08"; break;
          case 9: day = "09"; break;
        }
        switch (time.getMonth()) {
          case 1: month = "01"; break;
          case 2: month = "02"; break;
          case 3: month = "03"; break;
          case 4: month = "04"; break;
          case 5: month = "05"; break;
          case 6: month = "06"; break;
          case 7: month = "07"; break;
          case 8: month = "08"; break;
          case 9: month = "09"; break;
        }
    		document.getElementById("temp").innerHTML = obj.temp;
        document.getElementById("humid").innerHTML = obj.humid;
        document.getElementById("1_updated_at").innerHTML = day + "/" + month + "/" + (time.getFullYear() + 543) + "<br>" + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
        document.getElementById("temp_2").innerHTML = obj.temp - 4;
        document.getElementById("humid_2").innerHTML = obj.humid - 4;
        document.getElementById("2_updated_at").innerHTML = day + "/" + month + "/" + (time.getFullYear() + 543) + "<br>" + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
        document.getElementById("temp_3").innerHTML = obj.temp - 2;
        document.getElementById("humid_3").innerHTML = obj.humid - 2;
        document.getElementById("3_updated_at").innerHTML = day + "/" + month + "/" + (time.getFullYear() + 543) + "<br>" + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
    	});

    	microgear.on('connected', function() {
    		microgear.setAlias(ALIAS);
    		//document.getElementById("data").innerHTML = "Now I am connected with netpie...";
    		// setInterval(function() {
    		// 	microgear.chat("htmlgear","Hello from myself at "+Date.now());
    		// },5000);
    	});

    	microgear.on('present', function(event) {
    		console.log(event);
    	});

    	microgear.on('absent', function(event) {
    		console.log(event);
    	});

    	microgear.resettoken(function(err) {
    		microgear.connect(APPID);
    	});
    </script>
    <style>
    @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; src: local('Kanit'), local('Kanit-Regular'), url("assets/font/Kanit.woff2") format('woff2'); unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC; } body { font-family: 'Kanit', sans-serif; }
    body {
      background: url(assets/images/bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    tr th {
      text-align: center;
      font-size: 20px;
    }
    tr td {
      text-align: center;
      font-size: 20px;
      vertical-align: middle !important;
    }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="card" style="border-radius: 0px;">
            <div class="card-block">
              <div class="form-group text-center">
                <span style="font-size: 50px; color: green">สภาพอากาศ จังหวัดเชียงใหม่</span>
              </div>
              <table class="table table-bordered">
                <thead class="thead-inverse">
                  <tr>
                    <!-- <th>ลำดับที่</th> -->
                    <th>ชื่อสถานที่</th>
                    <th>อุณหภูมิ</th>
                    <th>หน่วยวัด</th>
                    <th>ความชื้นสัมพัทธ์</th>
                    <th>หน่วยวัด</th>
                    <th>รับข้อมูลล่าสุดเมื่อ</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <!-- <td>1</td> -->
                    <td>มหาวิทยาลัยราชภัฏเชียงใหม่</td>
                    <td><span id="temp"></span></td>
                    <td><span>องศาเซลเซียส</span></td>
                    <td><span id="humid"></span></td>
                    <td><span>เปอร์เซ็นต์</span></td>
                    <td><span id="1_updated_at"></span></td>
                  </tr>
                  <tr>
                    <!-- <td>2</td> -->
                    <td>มหาวิทยาลัยเชียงใหม่</td>
                    <td><span id="temp_2"></span></td>
                    <td><span>องศาเซลเซียส</span></td>
                    <td><span id="humid_2"></span></td>
                    <td><span>เปอร์เซ็นต์</span></td>
                    <td><span id="2_updated_at"></span></td>
                  </tr>
                  <tr>
                    <!-- <td>3</td> -->
                    <td>มหาวิทยาลัยราชมงคลล้านนาเชียงใหม่</td>
                    <td><span id="temp_3"></span></td>
                    <td><span>องศาเซลเซียส</span></td>
                    <td><span id="humid_3"></span></td>
                    <td><span>เปอร์เซ็นต์</span></td>
                    <td><span id="3_updated_at"></span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="row" style="margin-top: 15px;">
        <div class="col-md-12">
          <div class="form-group text-center">
            <span>Copyright &copy; 2017 Create by Prawared</span>
          </div>
        </div>
      </div>

    </div>
  </body>
</html>
	#include <ESP8266WiFi.h>
	#include <MicroGear.h>
	#include "DHT.h"
	#include <ArduinoJson.h>

	#include <Wire.h>
	#include <Adafruit_GFX.h>
	#include <ESP_Adafruit_SSD1306.h>

	#define OLED_RESET 4
	Adafruit_SSD1306 display(OLED_RESET);

	#define NUMFLAKES 10
	#define XPOS 0
	#define YPOS 1
	#define DELTAY 2

	#define DHTPIN 12
	#define DHTTYPE DHT22

	const char* ssid = "MAXNET";
	const char* password = "ThisIsC@mpilerExe";

	#define APPID "WebApp"
	#define KEY "l4F2fssVOpteaaH"
	#define SECRET "UHj6HSeDpKNTxINr0BouzsLdo"
	#define ALIAS "Chiang Mai"

	WiFiClient client;
	DHT dht(DHTPIN, DHTTYPE);

	int state_connected = 0, timer = 0;
	MicroGear microgear(client);

	void onMsghandler(char topic, uint8_t msg, unsigned int msglen) {
	Serial.print("Incoming message --> ");
	msg[msglen] = '\0';
	Serial.println((char *)msg);
	}

	void onFoundgear(char attribute, uint8_t msg, unsigned int msglen) {
	Serial.print("Found new member --> ");
	for (int i=0; i<msglen; i++)
	Serial.print((char)msg[i]);
	Serial.println();
	}

	void onLostgear(char attribute, uint8_t msg, unsigned int msglen) {
	Serial.print("Lost member --> ");
	for (int i=0; i<msglen; i++)
	Serial.print((char)msg[i]);
	Serial.println();
	}

	void onConnected(char attribute, uint8_t msg, unsigned int msglen) {
	Serial.println("Connected to NETPIE...");
	microgear.setAlias(ALIAS);
	}

	void setup() {
	microgear.on(MESSAGE,onMsghandler);
	microgear.on(PRESENT,onFoundgear);
	microgear.on(ABSENT,onLostgear);
	microgear.on(CONNECTED,onConnected);
	Serial.begin(115200);
	dht.begin();
	display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
	display.clearDisplay();
	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(0,0);
	display.println("WiFi Connecting ...");
	display.display();
	Serial.println("Starting...");
	if (WiFi.begin(ssid, password)) {
	while (WiFi.status() != WL_CONNECTED) {
	delay(500);
	Serial.print(".");
	}
	}
	Serial.println();
	Serial.println("WiFi connected");
	Serial.print("IP address : ");
	Serial.println(WiFi.localIP());
	display.clearDisplay();
	display.println("NETPIE Connecting ...");
	display.display();
	microgear.init(KEY,SECRET,ALIAS);
	microgear.connect(APPID);
	}

	void loop() {
	if (microgear.connected()) {
	if (state_connected == 0) {
	Serial.println("connected");
	state_connected = 1;
	}
	microgear.loop();
	if (timer >= 1000) {
	float t = dht.readTemperature();
	float h = dht.readHumidity();

	String json = "{";
	json += "\"temp\":";
	json += String(t);
	json += ",\"humid\":";
	json += String(h);
	json += "}";

	display.clearDisplay();
	display.setTextSize(1);
	display.setTextColor(WHITE);
	display.setCursor(30,0);
	display.println("Battery 100 %");
	display.setTextSize(2);
	display.setCursor(28,16);
	display.print(t);
	display.println(" C");
	display.setCursor(28,40);
	display.print(h);
	display.println(" %");
	display.display();

	Serial.print("Publish : ");
	Serial.println(json);
	microgear.chat(ALIAS, json);
	timer = 0;
	}
	else timer += 100;
	}
	else {
	Serial.println("connection lost, reconnect...");
	if (timer >= 5000) {
	display.clearDisplay();
	display.setTextSize(2);
	display.setCursor(0,0);
	display.setTextColor(WHITE);
	display.println("Reconnecting ...");
	display.display();
	microgear.connect(APPID);
	timer = 0;
	state_connected = 0;
	}
	else timer += 100;
	}
	delay(100);
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>Chiang Mai</title>
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/font-awesome-4.7.0/css/font-awesome.min.css">
	<!-- <link rel="stylesheet" href="assets/css/sweetalert.css"> -->
	<!-- <script src="assets/js/jquery-3.1.1.min.js"></script> -->
	<script src="assets/js/tether.min.js"></script>
	<!-- <script src="assets/js/bootstrap.min.js"></script> -->
	<!-- <script src="assets/js/sweetalert.min.js"></script> -->
	<script src="microgear.js"></script>
	<script>
	const APPID = "WebApp";
	const KEY = "Ubm3H0JNX1i5ncL";
	const SECRET = "rcieA6WIY7zlo0gHB7FNoiRBA";

	const ALIAS = "Chiang Mai";

	var microgear = Microgear.create({
	key: KEY,
	secret: SECRET,
	alias : ALIAS
	});

	microgear.on('message',function(topic,msg) {
	var obj = JSON.parse(msg);
	var time = new Date();
	var day, month;
	switch (time.getDay()) {
	case 1: day = "01"; break;
	case 2: day = "02"; break;
	case 3: day = "03"; break;
	case 4: day = "04"; break;
	case 5: day = "05"; break;
	case 6: day = "06"; break;
	case 7: day = "07"; break;
	case 8: day = "08"; break;
	case 9: day = "09"; break;
	}
	switch (time.getMonth()) {
	case 1: month = "01"; break;
	case 2: month = "02"; break;
	case 3: month = "03"; break;
	case 4: month = "04"; break;
	case 5: month = "05"; break;
	case 6: month = "06"; break;
	case 7: month = "07"; break;
	case 8: month = "08"; break;
	case 9: month = "09"; break;
	}
	document.getElementById("temp").innerHTML = obj.temp;
	document.getElementById("humid").innerHTML = obj.humid;
	document.getElementById("1_updated_at").innerHTML = day + "/" + month + "/" + (time.getFullYear() + 543) + "<br>" + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
	document.getElementById("temp_2").innerHTML = obj.temp - 4;
	document.getElementById("humid_2").innerHTML = obj.humid - 4;
	document.getElementById("2_updated_at").innerHTML = day + "/" + month + "/" + (time.getFullYear() + 543) + "<br>" + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
	document.getElementById("temp_3").innerHTML = obj.temp - 2;
	document.getElementById("humid_3").innerHTML = obj.humid - 2;
	document.getElementById("3_updated_at").innerHTML = day + "/" + month + "/" + (time.getFullYear() + 543) + "<br>" + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
	});

	microgear.on('connected', function() {
	microgear.setAlias(ALIAS);
	//document.getElementById("data").innerHTML = "Now I am connected with netpie...";
	// setInterval(function() {
	// microgear.chat("htmlgear","Hello from myself at "+Date.now());
	// },5000);
	});

	microgear.on('present', function(event) {
	console.log(event);
	});

	microgear.on('absent', function(event) {
	console.log(event);
	});

	microgear.resettoken(function(err) {
	microgear.connect(APPID);
	});
	</script>
	<style>
	@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; src: local('Kanit'), local('Kanit-Regular'), url("assets/font/Kanit.woff2") format('woff2'); unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC; } body { font-family: 'Kanit', sans-serif; }
	body {
	background: url(assets/images/bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
	tr th {
	text-align: center;
	font-size: 20px;
	}
	tr td {
	text-align: center;
	font-size: 20px;
	vertical-align: middle !important;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-md-12">
	<div class="card" style="border-radius: 0px;">
	<div class="card-block">
	<div class="form-group text-center">
	<span style="font-size: 50px; color: green">สภาพอากาศ จังหวัดเชียงใหม่</span>
	</div>
	<table class="table table-bordered">
	<thead class="thead-inverse">
	<tr>
	<!-- <th>ลำดับที่</th> -->
	<th>ชื่อสถานที่</th>
	<th>อุณหภูมิ</th>
	<th>หน่วยวัด</th>
	<th>ความชื้นสัมพัทธ์</th>
	<th>หน่วยวัด</th>
	<th>รับข้อมูลล่าสุดเมื่อ</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<!-- <td>1</td> -->
	<td>มหาวิทยาลัยราชภัฏเชียงใหม่</td>
	<td><span id="temp"></span></td>
	<td><span>องศาเซลเซียส</span></td>
	<td><span id="humid"></span></td>
	<td><span>เปอร์เซ็นต์</span></td>
	<td><span id="1_updated_at"></span></td>
	</tr>
	<tr>
	<!-- <td>2</td> -->
	<td>มหาวิทยาลัยเชียงใหม่</td>
	<td><span id="temp_2"></span></td>
	<td><span>องศาเซลเซียส</span></td>
	<td><span id="humid_2"></span></td>
	<td><span>เปอร์เซ็นต์</span></td>
	<td><span id="2_updated_at"></span></td>
	</tr>
	<tr>
	<!-- <td>3</td> -->
	<td>มหาวิทยาลัยราชมงคลล้านนาเชียงใหม่</td>
	<td><span id="temp_3"></span></td>
	<td><span>องศาเซลเซียส</span></td>
	<td><span id="humid_3"></span></td>
	<td><span>เปอร์เซ็นต์</span></td>
	<td><span id="3_updated_at"></span></td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>

	<div class="row" style="margin-top: 15px;">
	<div class="col-md-12">
	<div class="form-group text-center">
	<span>Copyright © 2017 Create by Prawared</span>
	</div>
	</div>
	</div>

	</div>
	</body>
	</html>