adb/esp-smarthome_server
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

dynamic html

Browse Source
This commit is contained in:
adb 2020-10-06 12:37:47 +02:00
parent 17c6683790
commit 769d6e0bc1
3 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
node_app/public/index.html
View File

@ -12,9 +12,10 @@
<link rel="stylesheet" type="text/css" href="/sym/dark.css"/>
<script>
const wsurl = 'ws://127.0.0.1:8081'
const wsurl = 'ws://10.8.0.2:8081'
const socket = new WebSocket(wsurl)
let devices;
let devices = [];
function element(id){ return document.getElementById(id)}
socket.onopen = () => {
socket.send('new session')
@ -30,16 +31,17 @@
else if (msg[0] === 'device') {
if (!devices.includes(msg[1])){
devices.push(msg[1])
e.data
let new_device = element('template_led').innerHTML.replace(`{{id}}`, msg[1])
element('devices').innerHTML += element('template_led').innerHTML.replaceAll(`{{id}}`, msg[1])
}
if (msg[2] === 'online') document.getElementById(msg[1]).style.display = "block"
else if (msg[2] === 'offline') document.getElementById(msg[1]).style.display = "none"
else document.getElementById('led1_title').innerText = `LED 1 (currently ${msg[1]}):`
if (msg[2] === 'online') element(msg[1]).style.backgroundColor = "#546E7A"
else if (msg[2] === 'offline') element(msg[1]).style.backgroundColor = "#BA3D3D"
else element(`${msg[1]}_title`).innerText = `${msg[1]} (currently ${msg[2]}):`
}
}
function show_error(msg) {
let error_style = document.getElementById('error-box').style
document.getElementById('error-message').innerText = msg
let error_style = element('error-box').style
element('error-message').innerText = msg
error_style.display = "block"
error_style.animation = "slide-from-left alternate 0.2s"
setTimeout(to => {error_style.animation = ""}, 200)
@ -48,20 +50,22 @@
</head>
<body>
<div class="title">ESP-IoT</div>
<div class="devices">
<div id="led1" class="device_box">
<div class="title2" id="led1_title">LED 1:</div>
<button class="btn-green"
style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
onclick="socket.send('device;led1;on')">
<div class="btn-text">on</div>
</button>
<button class="btn-red"
style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
onclick="socket.send('device;led1;off')">
<div class="btn-text">off</div>
</button>
</div>
<div id="devices" class="devices">
<template id="template_led">
<div id="{{id}}" class="device_box">
<div class="title2">{{id}}</div>
<button class="btn-green"
style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
onclick="socket.send('device;{{id}};on')">
<div class="btn-text">on</div>
</button>
<button class="btn-red"
style="width: 10rem; position:relative; margin-top: 1rem; margin-left: calc(50% - 5rem);"
onclick="socket.send('device;{{id}};off')">
<div class="btn-text">off</div>
</button>
</div>
</template>
</div>
<div id="error-box" class="error">
<div onclick="this.parentNode.style.display = 'none'" style="position: absolute; top:5px; right: 5px;" class="sym_btn-invisible">

9
node_app/public/sym/dark.css
View File

@ -100,22 +100,25 @@ input[id="longurl-input"]::-webkit-input-placeholder {
cursor: pointer;
height: 2.5rem;
background-color: #00BCD4;
box-shadow: 3px 3px 10px #333;
box-shadow: 3px 3px 10px #3336;
border-radius: 1.25rem;
border: 0;
}
.btn-green{
cursor: pointer;
height: 2.5rem;
background-color: #009688;
box-shadow: 3px 3px 10px #333;
box-shadow: 3px 3px 10px #3336;
border-radius: 1.25rem;
border: 0;
}
.btn-red{
cursor: pointer;
height: 2.5rem;
background-color: #E53935;
box-shadow: 3px 3px 10px #333;
box-shadow: 3px 3px 10px #3336;
border-radius: 1.25rem;
border: 0;
}
.btn-text {
position: absolute;

17
node_app/server.js
View File

@ -96,13 +96,13 @@ let check_devices = setInterval(to => {
})}
})
}, 5000)
///*
//WS handler
wss.on('connection', ws => {
wss.on('connection', (ws, req) => {
ws.on('message', message => {
console.log(`Received message => ${message}`)
console.log(`${req.socket.remoteAddress} => ${message}`)
let msg = message.split(";", 3)
if (msg[0] === 'device') {
if (msg[0] === "device") {
redis_cli.hget(`device;${msg[1]}`, "ip", function(err, ip) {
if(err) console.log(err)
if(ip){
@ -114,7 +114,7 @@ wss.on('connection', ws => {
})
}
}
xhr.open('GET', `http://[${ip}/${msg[1]}`, true);
xhr.open('GET', `http://[${ip}]/${msg[2]}`, true);
xhr.send();
setTimeout(to => {if (xhr.readyState !== 4){
ws.send(`error;device "${msg[1]}" took too long to reach`)
@ -123,9 +123,10 @@ wss.on('connection', ws => {
}}, 1500)
}
})
}else ws.send('error;try again')
}
})
ws.send('websocket connected')
ws.send(`connected as ${req.socket.remoteAddress}`)
console.log(`${req.socket.remoteAddress} connected`)
//on new connection
redis_cli.keys("device;*", function(err, keys) {
if (err) console.log(err)
@ -136,4 +137,4 @@ wss.on('connection', ws => {
})
})}
})
})
})//*/