การทำงานโดยรวม จะได้ว่า
เริ่มแรก ตัว javascript และ esp8266 จะทำการเชื่อมต่อตัวเองกับ netpie และเมื่อมีการกดปุ่ม x แล้วตัวไฟล์ javascript จะทำการ chat ไปหา esp8266 โดยผ่าน netpie เมื่อ esp8266 ได้รับข้อมูล จะทำการเปลี่ยนสถานะของ led และส่งสถานะ led กลับมาที่ javascript
switch.js
<script src="http://netpie.io/microgear.js"></script>
<script>
const APPID = "appid";
const KEY = "key";
const SECRET = "secret key";
const ALIAS = "Board1";
const TARGET = "LivingRoom"
var led_status = "off";
var microgear = Microgear.create({
key: KEY,
secret: SECRET,
alias : ALIAS
});
microgear.on('message',function(topic,msg) {
if(msg=="0"){
led_status = "off";
}else if(msg=="1"){
led_status = "on";
}
document.getElementById("data").innerHTML = led_status;
});
microgear.on('connected', function() {
document.getElementById("data").innerHTML = "Now I am connected with NETPIE...";
});
microgear.connect(APPID);
document.onkeydown = function (e) {
var keyCode = e.keyCode;
keycode = e.keycode;
if( keyCode == 88){
if(led_status == "off"){
microgear.chat(ALIAS,'1');
}else if (led_status == "on") {
microgear.chat(ALIAS,'0');
}
}
}
</script>
<body>
<center>
<div id="data">_____</div>
</center>
</body>
<script>
const APPID = "appid";
const KEY = "key";
const SECRET = "secret key";
const ALIAS = "Board1";
const TARGET = "LivingRoom"
var led_status = "off";
var microgear = Microgear.create({
key: KEY,
secret: SECRET,
alias : ALIAS
});
microgear.on('message',function(topic,msg) {
if(msg=="0"){
led_status = "off";
}else if(msg=="1"){
led_status = "on";
}
document.getElementById("data").innerHTML = led_status;
});
microgear.on('connected', function() {
document.getElementById("data").innerHTML = "Now I am connected with NETPIE...";
});
microgear.connect(APPID);
document.onkeydown = function (e) {
var keyCode = e.keyCode;
keycode = e.keycode;
if( keyCode == 88){
if(led_status == "off"){
microgear.chat(ALIAS,'1');
}else if (led_status == "on") {
microgear.chat(ALIAS,'0');
}
}
}
</script>
<body>
<center>
<div id="data">_____</div>
</center>
</body>
1.ภายใน JavaScript file จะมีการสร้าง microgear ซึ่งเป็น object ที่เราจะนำมาใช้ทำในการทำงาน ดังนี้
const KEY = "key";
const SECRET = "secret key";
const ALIAS = "Board1";
var microgear = Microgear.create({
key: KEY,
secret: SECRET,
alias : ALIAS
});
const SECRET = "secret key";
const ALIAS = "Board1";
var microgear = Microgear.create({
key: KEY,
secret: SECRET,
alias : ALIAS
});
2.จากนั้นเราจะเชื่อมต่อตัว microgear กับ app id ของเรา
const APPID = "appid";
microgear.connect(APPID);
microgear.connect(APPID);
3.เราจะมาเริ่มส่งข้อความไปที่ microgear ที่ชื่อ Board1 โดยที่เราจะให้กดปุ่ม x เพื่อที่จะได้ส่ง 1 เมื่อสถานะเป็น off และ 0 เมื่อสถานะเป็น on ไปที่ตัว esp8266 (led_status จะใช้เพื่อแยกการส่งค่าในแต่ละรอบ เมื่อได้รับสถานะไฟจาก esp8266 ว่าเป็น on ตัว javascript จะทำการส่ง off เมื่อมีการสั่งในครั้งถัดไป)
document.onkeydown = function (e) {
var keyCode = e.keyCode;
keycode = e.keycode;
if( keyCode == 88){
if(led_status == "off"){
microgear.chat(ALIAS,'1');
}else if (led_status == "on") {
microgear.chat(ALIAS,'0');
}
}
}
var keyCode = e.keyCode;
keycode = e.keycode;
if( keyCode == 88){
if(led_status == "off"){
microgear.chat(ALIAS,'1');
}else if (led_status == "on") {
microgear.chat(ALIAS,'0');
}
}
}
4.เมื่อส่งข้อมูลได้แล้ว ต่อจากนี้จะเป็นส่วนของการตอบสนองต่อ event ที่เกิดขึ้น ดังนี้
4.1 'connected' event
microgear.on('connected', function() {
document.getElementById("data").innerHTML = "Now I am connected with NETPIE...";
});
microgear.on('connected', function() {
document.getElementById("data").innerHTML = "Now I am connected with NETPIE...";
});
จากโค้ดข้างต้น เมื่อมีการเชื่อมต่อแล้วเราจะให้ใส่คำว่า "Now I am connected with NETPIE..." เพื่อแสดงให้เห็นว่า มีการเชื่อมต่อแล้ว
4.2 'message' event
microgear.on('message',function(topic,msg) {
if(msg=="0"){
led_status = "off";
}else if(msg=="1"){
led_status = "on";
}
document.getElementById("data").innerHTML = led_status;
});
if(msg=="0"){
led_status = "off";
}else if(msg=="1"){
led_status = "on";
}
document.getElementById("data").innerHTML = led_status;
});
จากโค้ดข้างต้น จะเป็นการนำเปลี่ยน Status ของ led โดย เราจะได้รับข้อความมาจาก netpie ที่เป็นตัวกลางระหว่าง Javascript กับ esp8266 ถ้าหากได้รับ 0 มา เราจะให้ led_status เป็น "off" และ หากได้รับ 1 เราจะให้ led_status เป็น "on" จากนั้นก็แสดงสถานะบนหน้า HTML
html2esp8266.ino
#include <ESP8266WiFi.h>
#include <MicroGear8266.h>
const char* ssid = "ssid";
const char* password = "ssid_password";
#define APPID "SmartMirror"
#define KEY "key"
#define SECRET "secret"
#define ALIAS "Board1"
#define TARGET "LivingRoom"
#define LED 16
WiFiClient client;
int 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);
if (*(char *)msg == '1') {
digitalWrite(LED, LOW); // turn on the LED
microgear.chat(TARGET, "1");
} else {
digitalWrite(LED, HIGH); //turn off the LED
microgear.chat(TARGET, "0");
}
}
void onConnected(char *attribute, uint8_t* msg, unsigned int msglen) {
Serial.println("Connected to NETPIE...");
microgear.setName(ALIAS);
}
void setup() {
microgear.on(MESSAGE, onMsghandler);
microgear.on(CONNECTED, onConnected);
Serial.begin(115200);
Serial.println("Starting...");
pinMode(LED, OUTPUT);
digitalWrite(LED, LOW);
if (WiFi.begin(ssid, password)) {
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
}
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
microgear.init(KEY, SECRET, ALIAS);
microgear.connect(APPID);
}
void loop() {
if (microgear.connected()) {
// Serial.println("...");
microgear.loop();
timer = 0;
}
else {
Serial.println("connection lost, reconnect...");
if (timer >= 5000) {
microgear.connect(APPID);
timer = 0;
}
else timer += 100;
}
delay(100);
}
5.ภายในตัว Arduino file ก็มีการสร้างตัวแปรชนิด microgear เพื่อใช้ในการทำงาน ดังนี้
#define KEY "key"
#define SECRET "secret"
#define ALIAS "Board1"
microgear.init(KEY, SECRET, ALIAS);
6.จากนั้นเราก็จะเชื่อมต่อกับตัว app id ของเรา
#define APPID "SmartMirror"
microgear.connect(APPID);
microgear.connect(APPID);
7.เมื่อมีการเชื่อมต่อกับ netpie แล้วเราจะให้พิมพ์คำว่า "Connecting to netpie..."
void onConnected(char *attribute, uint8_t* msg, unsigned int msglen) {
Serial.println("Connected to NETPIE...");
microgear.setName(ALIAS);
}
Serial.println("Connected to NETPIE...");
microgear.setName(ALIAS);
}
และเรียกใช้โดย
microgear.on(CONNECTED, onConnected);
8.เมื่อมีข้อความเข้ามาจะให้สั่ง เปิด/ปิด ตัว led และ ส่งค่าแทนสถานะของ led เป็น 0 และ 1
void onMsghandler(char *topic, uint8_t* msg, unsigned int msglen) {
Serial.print("Incoming message -->");
msg[msglen] = '\0';
Serial.println((char *)msg);
if (*(char *)msg == '1') {
digitalWrite(LED, LOW); // turn on the LED
microgear.chat(TARGET, "1");
} else {
digitalWrite(LED, HIGH); //turn off the LED
microgear.chat(TARGET, "0");
}
}
Serial.print("Incoming message -->");
msg[msglen] = '\0';
Serial.println((char *)msg);
if (*(char *)msg == '1') {
digitalWrite(LED, LOW); // turn on the LED
microgear.chat(TARGET, "1");
} else {
digitalWrite(LED, HIGH); //turn off the LED
microgear.chat(TARGET, "0");
}
}
และเรียกใช้โดย
microgear.on(MESSAGE, onMsghandler);
อ้างอิง : http://docs.netpie.io/th/latest/PieSketch/netpie/event.html: http://docs.netpie.io/th/latest/PieSketch/netpie/microgear.html
: http://tesrteam.blogspot.com/2015/12/netpie-control-led-with-html5-by.html
ไม่มีความคิดเห็น:
แสดงความคิดเห็น