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')); }
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) {
} else {
console.log("no id"); done(false);
}
Index.html
<!DOCTYPE html> <html lang="en">
<head>
<title>Dashboard</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"> <script src="socket.js"></script>
</head>
<body> <p>
<h1 align="center">LED CONTROL PANEL</h1> </p>
<div class="card">
<div class="container"> <div align="center">
<span><h3>LED BLINKING</h3></span> </br>
<input id="blinkIn" type="number" min="100" max="10000" style="padding: 2% 2%;
line-height: 10%; font-size: 200%; width:30%; margin-right: 5%;"> <button id="blinkSub" style="padding: 5% 2%; line-height: 10%; font-size: 150%;
width:30%;">Submit</button> </br>
</br> </div>
Return: <span id="blinkRet"></span> </div>
</div>
<div class="card">
<div class="container">
<h3 align="center">LED DIMMER</h3> <b id="dimVal">50</b>
<div align="center">
value="50" min="0" max="100" style="width:80%;"> <span>100</span>
<!--<button type="button"
id="dimSw">Hidupkan!</button> <span style="padding-right: 10%">100</span>-->
</br> </br> </div>
Return: <span id="dimRet"></span> </div>
</div>
<div class="card">
<div class="container">
<h3 align="center">RGB LED</h3> <div style="margin-left: 10%;">
R: <input id="rgbRanR" type="range" name="points" id="slideA" value="50" min="0" max="248" style="width:50%; margin-right: 3%;"> <b
id="rgbR">32</b></br>
G: <input id="rgbRanG" type="range" name="points" id="slideA" value="50" min="0" max="255" style="width:50%; margin-right: 3%;"> <b id="rgbG" style="margin-right: 6%;">32</b> <input id="rgbCol" value="#323232" type="color" style="width:20%;"></br> B: <input id="rgbRanB" type="range" name="points" id="slideA" value="50" min="0" max="255" style="width:50%; margin-right: 3%;"> <b
id="rgbB">32</b> </div> </br>
Return: <span id="rgbRet"></span> </div>
</div>
</body>
<script src="script.js"></script>
</html>
Script.js
var blinkInput = document.getElementById("blinkIn"), blinkSubmit = document.getElementById("blinkSub"), blinkReturn = document.getElementById("blinkRet");
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); });
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');
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 {
} }
dimClient.ino
#include <ESP8266WiFi.h> #include <WebSocketClient.h>
const char* ssid = "bles";
const char* password = "chelseafc231"; char path[] = "/dim";
char host[] = "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 {
// 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 <ESP8266WiFi.h> #include <WebSocketClient.h>
const char* ssid = "bles";
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 }
}
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
const char* ssid = "bles";
const char* password = "chelseafc231"; char path[] = "/rgb";
char host[] = "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);
} 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);
