2024-07-05 17:41:59 +02:00
|
|
|
<!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>
|
2024-07-05 20:27:33 +02:00
|
|
|
<td><div><label for="pass">Password : </label><input type="password" id="pass" name="password" minlength="8" required /></div>
|
2024-07-05 17:41:59 +02:00
|
|
|
</td><td><button class="button" id="ConnButton" onClick="Connection();">Connect</button></td>
|
2024-07-05 20:27:33 +02:00
|
|
|
</tr><tr>
|
2024-07-05 17:41:59 +02:00
|
|
|
<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>
|
2024-07-05 20:27:33 +02:00
|
|
|
</tr><tr>
|
2024-07-05 17:41:59 +02:00
|
|
|
<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');
|
2024-07-05 19:16:42 +02:00
|
|
|
if (pass) document.getElementById('pass').value = pass;
|
2024-07-05 17:41:59 +02:00
|
|
|
};
|
2024-07-05 19:16:42 +02:00
|
|
|
function SetPwd () {
|
|
|
|
|
const pass = localStorage.getItem('mqtt_password');
|
|
|
|
|
if (!pass || pass.length === 0) {
|
|
|
|
|
localStorage.setItem('mqtt_password', document.getElementById('pass').value);
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-07-05 17:37:41 +02:00
|
|
|
|
2024-07-05 17:41:59 +02:00
|
|
|
ManagePwd ();
|
|
|
|
|
function Connection() {
|
|
|
|
|
if (!mqtt) {
|
2024-07-05 19:16:42 +02:00
|
|
|
TextOut.value = 'MQTT not supported !!!\n'; return;
|
2024-07-05 17:41:59 +02:00
|
|
|
}
|
|
|
|
|
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;
|
2024-07-05 19:16:42 +02:00
|
|
|
TextOut.value = "Disconnected\n";
|
2024-07-05 17:41:59 +02:00
|
|
|
} else {
|
2024-07-05 19:16:42 +02:00
|
|
|
client = mqtt.connect(url, options);
|
2024-07-05 17:41:59 +02:00
|
|
|
client.on('connect', function () {
|
|
|
|
|
Connected = true;
|
|
|
|
|
TextOut.value += 'Connected to ' + url + '\n';
|
|
|
|
|
ConnBtn.innerHTML = 'Disconnect';
|
|
|
|
|
Main.btn.disabled = false;
|
|
|
|
|
Refr.btn.disabled = false;
|
2024-07-05 19:16:42 +02:00
|
|
|
SetPwd ();
|
2024-07-05 17:41:59 +02:00
|
|
|
// Subscribe to a topic
|
|
|
|
|
client.subscribe(InpTops + '#', function (err) {
|
|
|
|
|
if (!err) {
|
|
|
|
|
// Publish a message to a topic
|
|
|
|
|
client.publish(OutTops, '???');
|
2024-07-05 17:37:41 +02:00
|
|
|
}
|
2024-07-05 17:41:59 +02:00
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
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();
|
|
|
|
|
// 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>
|
2024-07-05 20:27:33 +02:00
|
|
|
</body>
|
2024-07-05 17:37:41 +02:00
|
|
|
</html>
|
2024-07-05 17:41:59 +02:00
|
|
|
|
