From 49768a78497bb4e1e17f0451b04a22212d5ebcfd Mon Sep 17 00:00:00 2001 From: Kizarm <mrazik@volny.cz> Date: Fri, 5 Jul 2024 17:41:59 +0200 Subject: [PATCH] bad file --- chata/index.html | 354 +++++++++++++++++------------------------------ 1 file changed, 126 insertions(+), 228 deletions(-) diff --git a/chata/index.html b/chata/index.html index 197321f..2b4e947 100644 --- a/chata/index.html +++ b/chata/index.html @@ -1,231 +1,129 @@ -<html> - <head> - <meta charset="utf-8"> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <title>WiFi test</title> - <style> - button:disabled { - background: #ccc; - } - input:disabled { - background: #ccc; - } - .slidecontainer { - width: 100%; /* Width of the outside container */ - } - .slider { - -webkit-appearance: none; - width: 100%; - height: 50px; - border-radius: 5px; - background: #00FF00; - outline: none; - opacity: 0.7; - -webkit-transition: .2s; - transition: opacity .2s; - } - .slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 25px; - height: 50px; - background: #A000A0; - cursor: pointer; - } - .slider::-moz-range-thumb { - width: 25px; - height: 50px; - background: #A000A0; - cursor: pointer; - } - .button { - background-color: #00F0F0; - border: none; - color: black; - padding: 15px 32px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 32px; - border: 2px solid #4CAF50; - } - .row { - display : flex; - align-items : center; - margin-bottom: 15px; - } - .color-box { - width: 200px; - height:100px; - background-color: #F0F0F0; - } - #potProgress { - width: 100%; - background-color: #F0F0F0; - } +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>MQTT</title> + <style> + body {background:rgb(255,255,196);} + .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } + textarea.emscripten { font-family: monospace; font-size: 18px; width: 100%; overflow-x: scroll; + white-space: pre; background: black; color: rgb(0,255,0);} + .button { + background-color: #04AA6D; border: none; color: white; padding: 15px 32px; text-align: center; + text-decoration: none; display: inline-block; font-size: 48px; width: 100%; } + </style> + <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> +</head> + <body> + <h1>Dálkové ovládání chaty.</h1> + <table> + <tr> + <td><div><label for="pass">Password : </label><input type="password" id="pass" name="password" minlength="8" required /><div> + </td><td><button class="button" id="ConnButton" onClick="Connection();">Connect</button></td> + <tr> + <tr> + <td><button class="button" id="MainButton" onClick="chPower(Main);" disabled>Hlavní vypínač</button></td> + <td><button class="button" id="RefrButton" onClick="chPower(Refr);" disabled>Lednice</button></td> + </tr> + <tr> + <td colspan=2><textarea class="emscripten" id="output" rows="10" spellcheck="false"></textarea></td> + </tr> + </table> + <script> + const onColor = '#00ff00'; + const ofColor = '#ff0000'; + const TopElem = 'chata/'; + const InpTops = TopElem + 'status/'; + const OutTops = TopElem + 'command/'; + const ConnBtn = document.getElementById('ConnButton'); + const TextOut = document.getElementById('output'); + const url = 'wss://8d84362aa39a41c38a465a2edd8bcae4.s1.eu.hivemq.cloud:8884/mqtt' + // Create an MQTT client instance + const options = { + // Clean session + clean: true, + connectTimeout: 4000, + // Authentication + clientId: 'js-' + Date.now().toString(16) + '-client', + username: 'Kizarm', + password: '********', + } + var Connected = false; + var Main = {status:false, btn:document.getElementById('MainButton'), tstr:'mainpw'}; + var Refr = {status:false, btn:document.getElementById('RefrButton'), tstr:'refrig'}; + var client; + function ManagePwd () { + const pass = localStorage.getItem('mqtt_password'); + if (!pass) localStorage.setItem('mqtt_password', document.getElementById('pass').value); + else document.getElementById('pass').value = pass; + }; - #potBar { - width: 100%; - height: 30px; - background-color: #FF0000; - text-align: center; - line-height: 30px; - color: white; + ManagePwd (); + function Connection() { + if (!mqtt) { + TextOut.value = 'MQTT not supported !!!\n'; + return; + } + options.password = document.getElementById('pass').value; + // console.log (options); + if (Connected) { + Connected = false; + client.end() + ConnBtn.innerHTML = 'Connect'; + Main.btn.disabled = true; + Refr.btn.disabled = true; + TextOut.value = "Disconnected\n" + } else { + client = mqtt.connect(url, options) + client.on('connect', function () { + Connected = true; + TextOut.value += 'Connected to ' + url + '\n'; + ConnBtn.innerHTML = 'Disconnect'; + Main.btn.disabled = false; + Refr.btn.disabled = false; + // Subscribe to a topic + client.subscribe(InpTops + '#', function (err) { + if (!err) { + // Publish a message to a topic + client.publish(OutTops, '???'); + } + }) + }) + function ChangeStatus (relay, tmsg) { + if (tmsg === '0') { + relay.status = false; + relay.btn.style.background = ofColor; + } else { + relay.status = true; + relay.btn.style.background = onColor; } - </style> - </head> - <body> - <h1>WebSocket pwm - adc</h1> - <p> - Host: <input id="webSocketHost" type="text" value="localhost:1234"/> - </p> - <p> - <button class="button" id="connectButton" onClick="initWebSocket();">Connect</button> - <button class="button" id="disconnectButton" onClick="stopWebSocket();" disabled>Disconnect</button> - <button class="button" onClick="checkSocket();">State</button> - </p> - <p id="debugText">DEBUG LINE</p> - <p> - <div id="potProgress"> - <div id="potBar">100%</div> - </div> - <div class="slidecontainer"> - <input type="range" min="1" max="100" value="0" class="slider" id="led1Range" oninput="sendMessage(0);" disabled> - <input type="range" min="1" max="100" value="0" class="slider" id="led2Range" oninput="sendMessage(1);" disabled> - </div> - - <div class="row"> - <div class="color-box" id="in0">0</div> - <div class="color-box" id="in1">1</div> - </div> - </p> - - <script type="text/javascript"> - function js_get_id () { - var host; - const locate = window.location; - if (locate.protocol == 'file:') host = 'ws://unknown'; - else if (locate.port) host = 'ws://' + locate.hostname + ':' + (parseInt(locate.port, 10) + 1); - else host = 'ws://' + locate.hostname + '/ws'; - console.log ('host is: ' + host); - return host; - } - const server_id = document.getElementById ('webSocketHost'); - server_id.value = js_get_id (); - var debugText = document.getElementById("debugText"); - function debug (message) { - debugText.innerHTML = message - } - - function sendMessage (n) { - var nval = 0; - switch (n) { - case 0: nval = document.getElementById("led1Range").value; break; - case 1: nval = document.getElementById("led2Range").value; break; - default: return; - } - if ( websocket != null ) { - var strToSend = n + '/' + nval; - websocket.send (strToSend); - } - } - function setPotValue (val) { - potenciometer = document.getElementById ('potBar'); - const percent = val + '%'; - potenciometer.style.width = percent; - potenciometer.innerHTML = percent; - } - function setButValue (id, val) { - const mbut = document.getElementById(id); - if (val) mbut.style.backgroundColor = '#00FF00'; - else mbut.style.backgroundColor = '#F0F0F0'; - } - function setSldValue (id, val) { - const msld = document.getElementById(id); - msld.value = val; - } - var websocket = null; - - function initWebSocket() { - try { - if (typeof MozWebSocket == 'function') - WebSocket = MozWebSocket; - if ( websocket && websocket.readyState == 1 ) - websocket.close(); - var wsUri = server_id.value; - websocket = new WebSocket( wsUri ); - websocket.onopen = function (evt) { - debug("CONNECTED"); - document.getElementById("connectButton").disabled = true; - document.getElementById("disconnectButton").disabled = false; - document.getElementById("led1Range").disabled = false; - document.getElementById("led2Range").disabled = false; - }; - websocket.onclose = function (evt) { - debug("DISCONNECTED"); - document.getElementById("connectButton").disabled = false; - document.getElementById("disconnectButton").disabled = true; - document.getElementById("led1Range").disabled = true; - document.getElementById("led2Range").disabled = true; - }; - websocket.onmessage = function (evt) { - // console.log (evt.data); - var list = evt.data.split ('/'); - if (list.length != 2) return; - var cmd = parseInt (list[0], 10); - var val = parseInt (list[1], 10); - switch (cmd) { - case 0: setPotValue (val); break; - case 1: setButValue ('in0', val); break; - case 3: setButValue ('in1', val); break; - case 4: setSldValue ('led1Range', val); break; - case 5: setSldValue ('led2Range', val); break; - default: break; - } - }; - websocket.onerror = function (evt) { - debug('ERROR: ' + evt.data); - }; - } catch (exception) { - debug('ERROR: ' + exception); - } - } - - function stopWebSocket() { - if (websocket) - websocket.close(); - } - - function checkSocket() { - if (websocket != null) { - var stateStr; - switch (websocket.readyState) { - case 0: { - stateStr = "CONNECTING"; - break; - } - case 1: { - stateStr = "OPEN"; - break; - } - case 2: { - stateStr = "CLOSING"; - break; - } - case 3: { - stateStr = "CLOSED"; - break; - } - default: { - stateStr = "UNKNOW"; - break; - } - } - debug("WebSocket state = " + websocket.readyState + " ( " + stateStr + " )"); - } else { - debug("WebSocket is null"); - } - } - </script> - </body> + } + // Receive messages + client.on('message', function (topic, message) { + const tstr = topic.toString(); + const tmsg = message.toString(); + // message is Buffer + TextOut.value += tstr + ' : ' + tmsg + '\n'; + if (tstr === InpTops + Main.tstr) { + ChangeStatus (Main, tmsg); + } else if (tstr === InpTops + Refr.tstr) { + ChangeStatus (Refr, tmsg); + } + }) + } + } + function chPower (relay) { + if (relay.status) { + relay.status = false; + client.publish(OutTops + relay.tstr, '0'); + TextOut.value += relay.tstr + ' off\n'; + } else { + relay.status = true; + client.publish(OutTops + relay.tstr, '1'); + TextOut.value += relay.tstr + ' on\n'; + } + } + </script> + </body </html> +