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

add chata

Browse source
This commit is contained in:
Kizarm 2024-06-22 17:00:01 +02:00
parent 04beac1d13
commit a2b6d72e87
2 changed files with 116 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
chata/index.html Normal file
View file

@ -0,0 +1,116 @@
<!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; }
</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><button class="button" id="ConnButton" onClick="Connection();">Connect</button></td>
<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=3><textarea class="emscripten" id="output" rows="10" spellcheck="false"></textarea></td>
</tr>
</table>
<script>
const onColor = '#00ff00';
const ofColor = '#ff0000';
const ConnBtn = document.getElementById('ConnButton');
const TextOut = document.getElementById('output');
const url = 'ws://broker.emqx.io:8083/mqtt'
// Create an MQTT client instance
const options = {
// Clean session
clean: true,
connectTimeout: 4000,
// Authentication
clientId: 'js-client-www',
username: 'Kizarm',
password: 'N9ZjCF3hYI8r',
}
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 Connection() {
if (Connected) {
Connected = false;
client.end()
ConnBtn.innerHTML = 'Connect';
Main.btn.disabled = true;
Refr.btn.disabled = true;
TextOut.value = "Disconnected\n"
} else {
if (!mqtt) {
TextOut.value = 'Sorry, MQTT not supported !';
return;
}
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('chata/status/#', function (err) {
if (!err) {
// Publish a message to a topic
client.publish('chata/command', '???');
}
})
})
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>

BIN
zadost.pdf
View file

Binary file not shown.