-
Autor
Es ist ja schon bekannt, dass man auf einem Gen2/3 Shelly kleinere HTML/Javascript/CSS Seiten zur Verfügung stellen kann.
Das ist bisher nur statisch umgesetzt worden, das heißt, eine Website stellt eine Ansicht zur Verfügung, muss aber durch einen Reload der Seite aktualisiert werden.
Ich habe jetzt mal beispielhaft an einer Uhr dargestellt, wie man das so gestalten kann, dass Werte ohne Reload (dynamisch) aktualisiert werden.
Das Skript selbst hat jetzt keinen großen Nutzen, zeigt aber, wie man so etwas für eigene Skript-Projekte nutzen kann.
Das Prinzip ist einfach. Der Shelly stellt erst einmal eine Website zur Verfügung. Das ist das statische Grundgerüst.
In diesem Grundgerüst ist Javascript Code hinterlegt, der den Browser veranlasst, den dynamischen Teil sekündlich neu zu laden.
Im Hintergrund, also durch das Shelly-Skript, wird dieser dynamische Inhalt manipuliert.
Eine Uhr ist ja per se dynamisch. 
Hier im Beispiel halt eine Uhr. Es können aber natürlich auch Messwerte, Zustände o.Ä. sein.
Dieses Beispiel verdeutlicht nur das Prinzip. Wie ihr das nutzt, bleibt eurer Fantasie überlassen.
//Get time in hh:mm:ss
function full_time() {
date_now = new Date(Shelly.getComponentStatus('sys').unixtime * 1000);
hour = '0' + date_now.getHours();
min = '0' + date_now.getMinutes();
sec = '0' + date_now.getSeconds();
return time = hour.substr(-2) + ':' + min.substr(-2) + ':' + sec.substr(-2);
}
//Manipulate dynamic data
function set_time() {
html_data = html_data_raw.replace('--:--:--',full_time());
}
//Responde to http_requets
function send_response(response, body) {
response.code = 200;
response.body = body;
response.send();
}
//React on http
function main_http(request,response) {
query = String(request.query);
if(request.query === '') {
send_response(response, html_main);
}
if(request.query === 'data') {
send_response(response, html_data);
}
}
//Do some user friendly printout
script_id = Shelly.getCurrentScriptId();
print('Your possible urls are:');
let uri = 'http://' + Shelly.getComponentConfig("wifi").sta.ip + '/script/' + script_id + '/womo';
print(uri);
//The main html page
let html_main = '<html><head><title>Test</title>' +
'<meta http-equiv="Content-Type" content="text/html; charset=utf-8" content="dark" /></head>' +
'<body>' +
'<style>body{background-color:#000000;color:#999999;width:100%;hight:100%}</style>' +
'<div id="dataDiv">waiting for data...</div>' +
'<script>' +
'function updateDiv() {' +
'fetch("' + uri + '?data")' +
'.then(function(response) {return response.text();})' +
'.then(function(data) {document.getElementById("dataDiv").innerHTML = data;});' +
'}' +
'setInterval(updateDiv, 1000);' +
'</script></body></html>';
//The dynamic html part
let html_data_raw = '<style>div1{color:#999999;font-size:69px;}';
html_data_raw += 'div2{color:#000099;font-size:69px;}';
html_data_raw += '</style>';
html_data_raw += '<div2>Uhrzeit: --:--:--</div2>';
//Some pre config
let html_data = html_data_raw;
let t1 = Timer.set(1000,true,set_time);
HTTPServer.registerEndpoint('womo',main_http);
