82 lines
2.2 KiB
HTML
82 lines
2.2 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>yoda</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
|
|
<script src="mqtt.min.js"></script>
|
|
</head>
|
|
|
|
<body onload="init()">
|
|
<section id="temperature-page">
|
|
<div class="temperature"><span id="external-temp">--</span>° dehors</div>
|
|
<div class="separateur">&</div>
|
|
<div class="temperature"><span id="internal-temp">--</span>° dedans</div>
|
|
<section>
|
|
|
|
<script>
|
|
function init() {
|
|
var elem = document.getElementById("temperature-page");
|
|
|
|
|
|
const host = 'ws://10.10.10.8:1884'
|
|
const options = {
|
|
keepalive: 60,
|
|
clientId: 'ipad',
|
|
protocolId: 'MQTT',
|
|
protocolVersion: 4,
|
|
clean: true,
|
|
reconnectPeriod: 1000,
|
|
connectTimeout: 30 * 1000,
|
|
will: {
|
|
topic: 'WillMsg',
|
|
payload: 'Connection Closed abnormally..!',
|
|
qos: 0,
|
|
retain: false
|
|
},
|
|
}
|
|
console.log('Connecting mqtt client')
|
|
const client = mqtt.connect(host, options)
|
|
client.on('error', (err) => {
|
|
console.log('Connection error: ', err)
|
|
client.end()
|
|
})
|
|
client.on('reconnect', () => {
|
|
console.log('Reconnecting...')
|
|
})
|
|
|
|
client.on('connect', () => {
|
|
console.log(`Client connected`)
|
|
// Subscribe
|
|
client.subscribe('shellies/shellyht-CAAB02/sensor/temperature', { qos: 0 })
|
|
|
|
client.subscribe('sensors/jardin-des-plantes/temperature', { qos: 0 })
|
|
})
|
|
|
|
client.on('message', (topic, message, packet) => {
|
|
switch (topic) {
|
|
case 'shellies/shellyht-CAAB02/sensor/temperature':
|
|
setInternalTemp(message.toString())
|
|
break;
|
|
case 'sensors/jardin-des-plantes/temperature':
|
|
setExternalTemp(message.toString())
|
|
break;
|
|
default:
|
|
return
|
|
}
|
|
console.log(`Received Message: ${message.toString()} On topic: ${topic}`)
|
|
})
|
|
|
|
}
|
|
|
|
function setInternalTemp(temperature) {
|
|
document.getElementById('internal-temp').innerText = temperature
|
|
}
|
|
|
|
function setExternalTemp(temperature) {
|
|
document.getElementById('external-temp').innerText = temperature
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|