<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>esp-iot</title> <!-- PWA support --> <link rel="manifest" href="/manifest.json"/> <meta name="theme-color" content="#2F3BA2"/> <meta name="description" content="short your url"/> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/> <link rel="stylesheet" type="text/css" href="/sym/dark.css"/> <script> const wsurl = 'ws://127.0.0.1:8081' const socket = new WebSocket(wsurl) let devices; socket.onopen = () => { socket.send('new session') } socket.onerror = (error) => { console.log(`WebSocket error: ${error}`) } socket.onclose = error => show_error('session timed out (refresh)') socket.onmessage = (e) => { console.log(e.data) let msg = e.data.split(";", 3) if (msg[0] === 'error') show_error(msg[1]) else if (msg[0] === 'device') { if (!devices.includes(msg[1])){ devices.push(msg[1]) e.data } 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]}):` } } function show_error(msg) { let error_style = document.getElementById('error-box').style document.getElementById('error-message').innerText = msg error_style.display = "block" error_style.animation = "slide-from-left alternate 0.2s" setTimeout(to => {error_style.animation = ""}, 200) } </script> </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> <div id="error-box" class="error"> <div onclick="this.parentNode.style.display = 'none'" style="position: absolute; top:5px; right: 5px;" class="sym_btn-invisible"> <img class="icon" src="sym/ic_close_white_24px.svg"> </div> <div id="error-message" class="btn-text"> </div> </div> </body> </html>