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

bad file

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

354
chata/index.html
View file

@ -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>