Kizarm/Calculator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

set permissions

Browse source
This commit is contained in:
Kizarm 2024-07-05 17:37:41 +02:00
parent f261dfe6f0
commit df5f113c92
1 changed files with 228 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

341
chata/index.html
View file

@ -1,116 +1,231 @@
<!DOCTYPE html> <html>
<html lang="en"> <head>
<head> <meta charset="utf-8">
<meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MQTT</title> <title>WiFi test</title>
<style> <style>
body {background:rgb(255,255,196);} button:disabled {
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } background: #ccc;
textarea.emscripten { font-family: monospace; font-size: 18px; width: 100%; overflow-x: scroll; }
white-space: pre; background: black; color: rgb(0,255,0);} input:disabled {
.button { background: #ccc;
background-color: #04AA6D; border: none; color: white; padding: 15px 32px; text-align: center; }
text-decoration: none; display: inline-block; font-size: 48px; } .slidecontainer {
</style> width: 100%; /* Width of the outside container */
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script> }
</head> .slider {
<body> -webkit-appearance: none;
<h1>Dálkové ovládání chaty.</h1> width: 100%;
<table> height: 50px;
<tr> border-radius: 5px;
<td><button class="button" id="ConnButton" onClick="Connection();">Connect</button></td> background: #00FF00;
<td><button class="button" id="MainButton" onClick="chPower(Main);" disabled>Hlavní vypínač</button></td> outline: none;
<td><button class="button" id="RefrButton" onClick="chPower(Refr);" disabled>Lednice</button></td> opacity: 0.7;
</tr> -webkit-transition: .2s;
<tr> transition: opacity .2s;
<td colspan=3><textarea class="emscripten" id="output" rows="10" spellcheck="false"></textarea></td> }
</tr> .slider::-webkit-slider-thumb {
</table> -webkit-appearance: none;
<script> appearance: none;
const onColor = '#00ff00'; width: 25px;
const ofColor = '#ff0000'; height: 50px;
const ConnBtn = document.getElementById('ConnButton'); background: #A000A0;
const TextOut = document.getElementById('output'); cursor: pointer;
const url = 'wss://broker.emqx.io:8084/mqtt' }
// Create an MQTT client instance .slider::-moz-range-thumb {
const options = { width: 25px;
// Clean session height: 50px;
clean: true, background: #A000A0;
connectTimeout: 4000, cursor: pointer;
// Authentication }
clientId: 'js-client-www', .button {
username: 'Kizarm', background-color: #00F0F0;
password: 'N9ZjCF3hYI8r', border: none;
} color: black;
var Connected = false; padding: 15px 32px;
var Main = {status:false, btn:document.getElementById('MainButton'), tstr:'mainpw'}; text-align: center;
var Refr = {status:false, btn:document.getElementById('RefrButton'), tstr:'refrig'}; text-decoration: none;
var client; 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;
}
function Connection() { #potBar {
if (Connected) { width: 100%;
Connected = false; height: 30px;
client.end() background-color: #FF0000;
ConnBtn.innerHTML = 'Connect'; text-align: center;
Main.btn.disabled = true; line-height: 30px;
Refr.btn.disabled = true; color: white;
TextOut.value = "Disconnected\n" }
} else { </style>
if (!mqtt) { </head>
TextOut.value = 'Sorry, MQTT not supported !'; <body>
return; <h1>WebSocket pwm - adc</h1>
} <p>
client = mqtt.connect(url, options) Host: <input id="webSocketHost" type="text" value="localhost:1234"/>
client.on('connect', function () { </p>
Connected = true; <p>
TextOut.value += 'Connected to ' + url + '\n'; <button class="button" id="connectButton" onClick="initWebSocket();">Connect</button>
ConnBtn.innerHTML = 'Disconnect'; <button class="button" id="disconnectButton" onClick="stopWebSocket();" disabled>Disconnect</button>
Main.btn.disabled = false; <button class="button" onClick="checkSocket();">State</button>
Refr.btn.disabled = false; </p>
// Subscribe to a topic <p id="debugText">DEBUG LINE</p>
client.subscribe('chata/status/#', function (err) { <p>
if (!err) { <div id="potProgress">
// Publish a message to a topic <div id="potBar">100%</div>
client.publish('chata/command', '???'); </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 ChangeStatus (relay, tmsg) {
if (tmsg === '0') {
relay.status = false;
relay.btn.style.background = ofColor;
} else {
relay.status = true;
relay.btn.style.background = onColor;
}
}
// Receive messages
client.on('message', function (topic, message) {
const tstr = topic.toString();
const tmsg = message.toString();
const tsta = 'chata/status/';
// message is Buffer
TextOut.value += tstr + ' : ' + tmsg + '\n';
if (tstr === tsta + Main.tstr) {
ChangeStatus (Main, tmsg);
} else if (tstr === tsta + Refr.tstr) {
ChangeStatus (Refr, tmsg);
}
})
}
}
function chPower (relay) {
if (relay.status) {
relay.status = false;
client.publish('chata/command/' + relay.tstr, '0');
TextOut.value += relay.tstr + ' off\n';
} else {
relay.status = true;
client.publish('chata/command/' + relay.tstr, '1');
TextOut.value += relay.tstr + ' on\n';
}
}
</script>
</body
</html>
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>
</html>