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

17
node_app/server.js
View File

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