Implementasi IOT Mengontrol LED berbasis WEB
Package.json
{
"name": "webserver",
"version": "1.0.0",
"description": "the webserver",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" &&
exit 1"
},
"keywords": [
"iotwebserver"
],
"author": "Samuel Siburian",
"license": "ISC",
"dependencies": {
"nodejs-websocket": "^1.7.1"
}
}
Server.js
var socket = require('nodejs-websocket');
var http = require('http');
var fs = require('fs');
var espNode = {};
http.createServer(function(req, res) {
if (req.url == '/') {
res.writeHead(200, { 'Content-Type':
'text/html' });
res.end(fs.readFileSync('./public/index.html'));
}
if (req.url == '/style.css') {
res.writeHead(200, { 'Content-Type': 'text/css'
});
res.end(fs.readFileSync('./public/style.css'));
}
if (req.url == '/script.js') {
res.writeHead(200, { 'Content-Type':
'text/javascript' });
res.end(fs.readFileSync('./public/script.js'));
}
if (req.url == '/socket.js') {
Universitas Sumatera Utara
res.writeHead(200, { 'Content-Type':
'text/javascript' });
res.end(fs.readFileSync('./public/socket.js'));
}
}).listen(8080, function() {
console.log("server running in port 8080");
});
var server = socket.createServer(function(conn) {
if (conn.path !== '/') {
var id = conn.path.substring(1, 6);
console.log('new connection coming from esp: '
+ id);
espNode[id] = conn;
} else
console.log('new connection from client');
conn.on("text", function(res) {
var data = JSON.parse(res);
console.log(data);
checkID(data.led, function(connection) {
if (connection !== false) {
var value = data.value;
connection.sendText(value.toString());
// data.status = "Okay!";
// conn.sendText(JSON.stringify(data));
} else {
data.value = "connection was not
establish";
conn.sendText(JSON.stringify(data));
}
});
})
conn.on('close', function(code, reason) {
console.log('connection close');
})
conn.on('error', function(err) {
console.log(err);
})
}).listen(8888, function() {
console.log("socket running in port 8888");
});
var checkID = function(id, done) {
var conn = espNode[id];
if (conn !== undefined) {
console.log("id established");
done(conn);
Universitas Sumatera Utara
} else {
console.log("no id");
done(false);
}
Index.html
Dashboard
LED CONTROL PANEL
LED BLINKING
Submit
Return:
LED DIMMER
50
0
100
Return:
RGB LED
R: 32
G: 32
B: 32
Return:
Script.js
var blinkInput = document.getElementById("blinkIn"),
blinkSubmit = document.getElementById("blinkSub"),
blinkReturn = document.getElementById("blinkRet");
blinkSubmit.addEventListener('click', function() {
var data = {
Universitas Sumatera Utara
led: "blink",
value: blinkInput.value
}
conn.send(JSON.stringify(data)); // send through
socket using json
});
var dimValue = document.getElementById("dimVal"),
dimRange = document.getElementById("dimRan"),
dimReturn = document.getElementById("dimRet"),
switchStat = true;
dimRange.addEventListener('input', function() {
var value = convertBit(this.value, 100);
dimValue.innerHTML = this.value;
var data = {
led: "dim",
value: value
};
conn.send(JSON.stringify(data));
});
var rgbRed = document.getElementById("rgbR"),
rgbGreen = document.getElementById("rgbG"),
rgbBlue = document.getElementById("rgbB"),
rgbRanRed = document.getElementById("rgbRanR"),
rgbRanGreen = document.getElementById("rgbRanG"),
rgbRanBlue = document.getElementById("rgbRanB"),
rgbColor = document.getElementById("rgbCol"),
rgbReturn = document.getElementById("rgbRet");
rgbRanRed.addEventListener('input', function() {
var value = convertBit(this.value, 255);
console.log(this.value);
convert(this.value, function(val) {
rgbRed.innerHTML = val;
colInput();
sendRGB(1, value);
});
});
rgbRanGreen.addEventListener('input', function() {
var value = convertBit(this.value, 255);
convert(this.value, function(val) {
rgbGreen.innerHTML = val;
colInput();
sendRGB(2, value);
});
});
Universitas Sumatera Utara
rgbRanBlue.addEventListener('input', function() {
var value = convertBit(this.value, 255);
convert(this.value, function(val) {
rgbBlue.innerHTML = val;
colInput();
sendRGB(3, value);
});
});
var convert = function(val, done) {
var v = parseInt(val);
var value = v.toString(16);
if (v < 16)
value = "0" + value;
done(value);
}
var colInput = function() {
var red = rgbRed.innerHTML;
var green = rgbGreen.innerHTML;
var blue = rgbBlue.innerHTML;
var color = "#" + red + green + blue;
rgbColor.value = color;
}
var sendRGB = function(col, val) {
var value = col + ":" + val;
var data = {
led: "rgb",
value: value
};
conn.send(JSON.stringify(data));
}
var convertBit = function(value, divider) {
return parseInt((parseInt(value) * 1023) /
divider);
}
Socket.js
var ip = "192.168.43.82";
var conn = new WebSocket('ws://' + ip + ':8888');
conn.onmessage = function(result) {
console.log(result);
Universitas Sumatera Utara
var data = JSON.parse(result);
if (data.led == 'blink') {
blinkReturn.innerHTML = data.value;
} else if (data.led == 'dim') {
dimReturn.innerHTML = data.value;
} else if (data.led == 'rgb') {
rgbReturn.innerHTML = data.value;
}
}
Style.css
body {
background-color: rgba(129, 169, 187, 0.3);
}
.card {
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: rgba(129, 169, 187, 0.50);
transition: 0.3s;
width: 33.33%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 10px 16px;
}
@media only screen and (max-device-width: 550px) {
body {
background-color: rgba(129, 169, 187, 0.3);
}
.card {
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: rgba(129, 169, 187, 0.50);
transition: 0.3s;
width: 100%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 10px 16px;
Universitas Sumatera Utara
}
}
dimClient.ino
#include
#include
const char*
const char*
char path[]
char host[]
ssid
= "bles";
password = "chelseafc231";
= "/dim";
= "192.168.43.82";
WebSocketClient webSocketClient;
#define ledPin 0
WiFiClient client;
void setup() {
Serial.begin(115200);
delay(10);
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
delay(5000);
// Connect to the websocket server
if (client.connect(host, 8888)) {
Serial.println("Connected");
} else {
Serial.println("Connection failed.");
while(1) {
Universitas Sumatera Utara
// Hang on failure
}
}
// Handshake with the server
webSocketClient.path = path;
webSocketClient.host = host;
if (webSocketClient.handshake(client)) {
Serial.println("Handshake successful");
} else {
Serial.println("Handshake failed.");
while(1) {
// Hang on failure
}
}
analogWrite(ledPin, 512);
}
void loop() {
String data;
if (client.connected()) {
webSocketClient.getData(data);
if (data.length() > 0) {
Serial.print("Received data: ");
Serial.println(data);
int pwm = data.toInt();
analogWrite(ledPin, pwm);
}
} else {
Serial.println("Client disconnected.");
while (1) {
// Hang on disconnect.
}
}
}
blinkClient.ino
#include
#include
const char* ssid
= "bles";
const char* password = "chelseafc231";
char path[] = "/blink";
Universitas Sumatera Utara
char host[] = "192.168.43.82";
WebSocketClient webSocketClient;
#define ledPin 0
int interval = 500;
int oldMillis = 0;
int ledState = LOW;
// Use WiFiClient class to create TCP connections
WiFiClient client;
void setup() {
Serial.begin(115200);
delay(10);
// We start by connecting to a WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
delay(5000);
pinMode(ledPin, OUTPUT);
// Connect to the websocket server
if (client.connect(host, 8888)) {
Serial.println("Connected");
} else {
Serial.println("Connection failed.");
while(1) {
// Hang on failure
}
}
// Handshake with the server
webSocketClient.path = path;
Universitas Sumatera Utara
webSocketClient.host = host;
if (webSocketClient.handshake(client)) {
Serial.println("Handshake successful");
} else {
Serial.println("Handshake failed.");
digitalWrite(ledPin, HIGH);
while(1) {
// Hang on failure
}
}
}
void loop() {
String data;
unsigned long nowMillis = millis();
if(nowMillis - oldMillis >= interval){
oldMillis = nowMillis;
if(ledState == LOW)
ledState = HIGH;
else
ledState = LOW;
digitalWrite(ledPin, ledState);
}
if (client.connected()) {
webSocketClient.getData(data);
if (data.length() > 0) {
Serial.print("Received data: ");
Serial.println(data);
interval = data.toInt();
}
} else {
Serial.println("Client disconnected.");
while (1) {
// Hang on disconnect.
}
}
}
rgbClient.ino
#include
#include
Universitas Sumatera Utara
const char*
const char*
char path[]
char host[]
ssid
= "bles";
password = "chelseafc231";
= "/rgb";
= "192.168.43.82";
WebSocketClient webSocketClient;
// Use WiFiClient class to create TCP connections
WiFiClient client;
#define redPin 1
#define greenPin 0
#define bluePin 2
void setup() {
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
}
delay(5000);
pinMode(redPin, OUTPUT);
pinMode(greenPin, OUTPUT);
pinMode(bluePin, OUTPUT);
delay(100);
analogWrite(redPin, 0);
analogWrite(greenPin, 0);
analogWrite(bluePin, 1023);
// Connect to the websocket server
if (client.connect(host, 8888)) {
//
Serial.println("Connected");
} else {
//
Serial.println("Connection failed.");
while (1) {
// Hang on failure
}
}
// Handshake with the server
webSocketClient.path = path;
webSocketClient.host = host;
if (webSocketClient.handshake(client)) {
//
Serial.println("Handshake successful");
analogWrite(bluePin, 0);
analogWrite(greenPin, 1023);
Universitas Sumatera Utara
} else {
//
Serial.println("Handshake failed.");
while (1) {
analogWrite(bluePin, 0);
analogWrite(redPin,1023);
// Hang on failure
}
}
delay(1000);
analogWrite(redPin, 0);
analogWrite(greenPin, 0);
analogWrite(bluePin, 0);
}
void loop() {
String data;
if (client.connected()) {
webSocketClient.getData(data);
if (data.length() > 0) {
changeColor(data);
}
} else {
//
Serial.println("Client disconnected.");
while (1) {
// Hang on disconnect.
}
}
}
void changeColor(String getColor) {
char temp[6];
getColor.toCharArray(temp,7);
char* separator = strchr(temp, ':');
int col = atoi(temp);
int colorVal = atoi(++separator);
// Serial.print(col); Serial.print(" ");
Serial.println(colorVal);
if (col == 1)
// 1 for red
analogWrite(redPin, colorVal);
else if (col == 2)
// 2 for green
analogWrite(greenPin, colorVal);
else if (col == 3)
// 3 for blue
analogWrite(bluePin, colorVal);
}
Universitas Sumatera Utara
Universitas Sumatera Utara
Universitas Sumatera Utara
{
"name": "webserver",
"version": "1.0.0",
"description": "the webserver",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" &&
exit 1"
},
"keywords": [
"iotwebserver"
],
"author": "Samuel Siburian",
"license": "ISC",
"dependencies": {
"nodejs-websocket": "^1.7.1"
}
}
Server.js
var socket = require('nodejs-websocket');
var http = require('http');
var fs = require('fs');
var espNode = {};
http.createServer(function(req, res) {
if (req.url == '/') {
res.writeHead(200, { 'Content-Type':
'text/html' });
res.end(fs.readFileSync('./public/index.html'));
}
if (req.url == '/style.css') {
res.writeHead(200, { 'Content-Type': 'text/css'
});
res.end(fs.readFileSync('./public/style.css'));
}
if (req.url == '/script.js') {
res.writeHead(200, { 'Content-Type':
'text/javascript' });
res.end(fs.readFileSync('./public/script.js'));
}
if (req.url == '/socket.js') {
Universitas Sumatera Utara
res.writeHead(200, { 'Content-Type':
'text/javascript' });
res.end(fs.readFileSync('./public/socket.js'));
}
}).listen(8080, function() {
console.log("server running in port 8080");
});
var server = socket.createServer(function(conn) {
if (conn.path !== '/') {
var id = conn.path.substring(1, 6);
console.log('new connection coming from esp: '
+ id);
espNode[id] = conn;
} else
console.log('new connection from client');
conn.on("text", function(res) {
var data = JSON.parse(res);
console.log(data);
checkID(data.led, function(connection) {
if (connection !== false) {
var value = data.value;
connection.sendText(value.toString());
// data.status = "Okay!";
// conn.sendText(JSON.stringify(data));
} else {
data.value = "connection was not
establish";
conn.sendText(JSON.stringify(data));
}
});
})
conn.on('close', function(code, reason) {
console.log('connection close');
})
conn.on('error', function(err) {
console.log(err);
})
}).listen(8888, function() {
console.log("socket running in port 8888");
});
var checkID = function(id, done) {
var conn = espNode[id];
if (conn !== undefined) {
console.log("id established");
done(conn);
Universitas Sumatera Utara
} else {
console.log("no id");
done(false);
}
Index.html
Dashboard
LED CONTROL PANEL
LED BLINKING
Submit
Return:
LED DIMMER
50
0
100
Return:
RGB LED
R: 32
G: 32
B: 32
Return:
Script.js
var blinkInput = document.getElementById("blinkIn"),
blinkSubmit = document.getElementById("blinkSub"),
blinkReturn = document.getElementById("blinkRet");
blinkSubmit.addEventListener('click', function() {
var data = {
Universitas Sumatera Utara
led: "blink",
value: blinkInput.value
}
conn.send(JSON.stringify(data)); // send through
socket using json
});
var dimValue = document.getElementById("dimVal"),
dimRange = document.getElementById("dimRan"),
dimReturn = document.getElementById("dimRet"),
switchStat = true;
dimRange.addEventListener('input', function() {
var value = convertBit(this.value, 100);
dimValue.innerHTML = this.value;
var data = {
led: "dim",
value: value
};
conn.send(JSON.stringify(data));
});
var rgbRed = document.getElementById("rgbR"),
rgbGreen = document.getElementById("rgbG"),
rgbBlue = document.getElementById("rgbB"),
rgbRanRed = document.getElementById("rgbRanR"),
rgbRanGreen = document.getElementById("rgbRanG"),
rgbRanBlue = document.getElementById("rgbRanB"),
rgbColor = document.getElementById("rgbCol"),
rgbReturn = document.getElementById("rgbRet");
rgbRanRed.addEventListener('input', function() {
var value = convertBit(this.value, 255);
console.log(this.value);
convert(this.value, function(val) {
rgbRed.innerHTML = val;
colInput();
sendRGB(1, value);
});
});
rgbRanGreen.addEventListener('input', function() {
var value = convertBit(this.value, 255);
convert(this.value, function(val) {
rgbGreen.innerHTML = val;
colInput();
sendRGB(2, value);
});
});
Universitas Sumatera Utara
rgbRanBlue.addEventListener('input', function() {
var value = convertBit(this.value, 255);
convert(this.value, function(val) {
rgbBlue.innerHTML = val;
colInput();
sendRGB(3, value);
});
});
var convert = function(val, done) {
var v = parseInt(val);
var value = v.toString(16);
if (v < 16)
value = "0" + value;
done(value);
}
var colInput = function() {
var red = rgbRed.innerHTML;
var green = rgbGreen.innerHTML;
var blue = rgbBlue.innerHTML;
var color = "#" + red + green + blue;
rgbColor.value = color;
}
var sendRGB = function(col, val) {
var value = col + ":" + val;
var data = {
led: "rgb",
value: value
};
conn.send(JSON.stringify(data));
}
var convertBit = function(value, divider) {
return parseInt((parseInt(value) * 1023) /
divider);
}
Socket.js
var ip = "192.168.43.82";
var conn = new WebSocket('ws://' + ip + ':8888');
conn.onmessage = function(result) {
console.log(result);
Universitas Sumatera Utara
var data = JSON.parse(result);
if (data.led == 'blink') {
blinkReturn.innerHTML = data.value;
} else if (data.led == 'dim') {
dimReturn.innerHTML = data.value;
} else if (data.led == 'rgb') {
rgbReturn.innerHTML = data.value;
}
}
Style.css
body {
background-color: rgba(129, 169, 187, 0.3);
}
.card {
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: rgba(129, 169, 187, 0.50);
transition: 0.3s;
width: 33.33%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 10px 16px;
}
@media only screen and (max-device-width: 550px) {
body {
background-color: rgba(129, 169, 187, 0.3);
}
.card {
float: left;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
background-color: rgba(129, 169, 187, 0.50);
transition: 0.3s;
width: 100%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 10px 16px;
Universitas Sumatera Utara
}
}
dimClient.ino
#include
#include
const char*
const char*
char path[]
char host[]
ssid
= "bles";
password = "chelseafc231";
= "/dim";
= "192.168.43.82";
WebSocketClient webSocketClient;
#define ledPin 0
WiFiClient client;
void setup() {
Serial.begin(115200);
delay(10);
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
delay(5000);
// Connect to the websocket server
if (client.connect(host, 8888)) {
Serial.println("Connected");
} else {
Serial.println("Connection failed.");
while(1) {
Universitas Sumatera Utara
// Hang on failure
}
}
// Handshake with the server
webSocketClient.path = path;
webSocketClient.host = host;
if (webSocketClient.handshake(client)) {
Serial.println("Handshake successful");
} else {
Serial.println("Handshake failed.");
while(1) {
// Hang on failure
}
}
analogWrite(ledPin, 512);
}
void loop() {
String data;
if (client.connected()) {
webSocketClient.getData(data);
if (data.length() > 0) {
Serial.print("Received data: ");
Serial.println(data);
int pwm = data.toInt();
analogWrite(ledPin, pwm);
}
} else {
Serial.println("Client disconnected.");
while (1) {
// Hang on disconnect.
}
}
}
blinkClient.ino
#include
#include
const char* ssid
= "bles";
const char* password = "chelseafc231";
char path[] = "/blink";
Universitas Sumatera Utara
char host[] = "192.168.43.82";
WebSocketClient webSocketClient;
#define ledPin 0
int interval = 500;
int oldMillis = 0;
int ledState = LOW;
// Use WiFiClient class to create TCP connections
WiFiClient client;
void setup() {
Serial.begin(115200);
delay(10);
// We start by connecting to a WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
delay(5000);
pinMode(ledPin, OUTPUT);
// Connect to the websocket server
if (client.connect(host, 8888)) {
Serial.println("Connected");
} else {
Serial.println("Connection failed.");
while(1) {
// Hang on failure
}
}
// Handshake with the server
webSocketClient.path = path;
Universitas Sumatera Utara
webSocketClient.host = host;
if (webSocketClient.handshake(client)) {
Serial.println("Handshake successful");
} else {
Serial.println("Handshake failed.");
digitalWrite(ledPin, HIGH);
while(1) {
// Hang on failure
}
}
}
void loop() {
String data;
unsigned long nowMillis = millis();
if(nowMillis - oldMillis >= interval){
oldMillis = nowMillis;
if(ledState == LOW)
ledState = HIGH;
else
ledState = LOW;
digitalWrite(ledPin, ledState);
}
if (client.connected()) {
webSocketClient.getData(data);
if (data.length() > 0) {
Serial.print("Received data: ");
Serial.println(data);
interval = data.toInt();
}
} else {
Serial.println("Client disconnected.");
while (1) {
// Hang on disconnect.
}
}
}
rgbClient.ino
#include
#include
Universitas Sumatera Utara
const char*
const char*
char path[]
char host[]
ssid
= "bles";
password = "chelseafc231";
= "/rgb";
= "192.168.43.82";
WebSocketClient webSocketClient;
// Use WiFiClient class to create TCP connections
WiFiClient client;
#define redPin 1
#define greenPin 0
#define bluePin 2
void setup() {
delay(10);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
}
delay(5000);
pinMode(redPin, OUTPUT);
pinMode(greenPin, OUTPUT);
pinMode(bluePin, OUTPUT);
delay(100);
analogWrite(redPin, 0);
analogWrite(greenPin, 0);
analogWrite(bluePin, 1023);
// Connect to the websocket server
if (client.connect(host, 8888)) {
//
Serial.println("Connected");
} else {
//
Serial.println("Connection failed.");
while (1) {
// Hang on failure
}
}
// Handshake with the server
webSocketClient.path = path;
webSocketClient.host = host;
if (webSocketClient.handshake(client)) {
//
Serial.println("Handshake successful");
analogWrite(bluePin, 0);
analogWrite(greenPin, 1023);
Universitas Sumatera Utara
} else {
//
Serial.println("Handshake failed.");
while (1) {
analogWrite(bluePin, 0);
analogWrite(redPin,1023);
// Hang on failure
}
}
delay(1000);
analogWrite(redPin, 0);
analogWrite(greenPin, 0);
analogWrite(bluePin, 0);
}
void loop() {
String data;
if (client.connected()) {
webSocketClient.getData(data);
if (data.length() > 0) {
changeColor(data);
}
} else {
//
Serial.println("Client disconnected.");
while (1) {
// Hang on disconnect.
}
}
}
void changeColor(String getColor) {
char temp[6];
getColor.toCharArray(temp,7);
char* separator = strchr(temp, ':');
int col = atoi(temp);
int colorVal = atoi(++separator);
// Serial.print(col); Serial.print(" ");
Serial.println(colorVal);
if (col == 1)
// 1 for red
analogWrite(redPin, colorVal);
else if (col == 2)
// 2 for green
analogWrite(greenPin, colorVal);
else if (col == 3)
// 3 for blue
analogWrite(bluePin, colorVal);
}
Universitas Sumatera Utara
Universitas Sumatera Utara
Universitas Sumatera Utara