yyyy
das ; Semilkolon hinter der 10 erzeugt 4 Stück y, bei mir macht es das nicht ?
yyyy
das ; Semilkolon hinter der 10 erzeugt 4 Stück y, bei mir macht es das nicht ?
Der Vollständigkeit halber noch die Roller-Version mit 2.5er-Shelly für eigene lokale Webseite.
Alles entstanden aus der alten Vorlage von https://github.com/shelly-tools/shelly-cors-examples
<!DOCTYPE html><html><head><title id="Tabs">Rollos verwalten</title><!-- Versions-Monitor: sv 1.13.0.2023.07.31 --><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="pragma" content="no-cache"><style type="text/css" media="all">
*{font-family:Avant Garde, verdana, Magneto, Comic Sans MS, arial,sans-serif,Times New Roman,serif; list-style:none; color:rgb(245,245,245);}
body{margin:0;border:0; scrollbar-width: auto; scrollbar-color: rgb(0,0,0) rgb(245,245,245); color: rgb(245,245,245); background-color: #37474f; display:flex; flex-flow:row wrap; font-size:10pt;}
body::-webkit-scrollbar{width:20px;height:20px;}
body::-webkit-scrollbar-track{background-color:#37474f;}
body::-webkit-scrollbar-thumb{background-color:black; border-radius:10px; border:1px solid #00f0f0;}
.room{background-color:#455a64;padding:5px;border-radius:20px;color:#eee;margin-bottom:1px;}
h4{margin:0;margin-bottom:3px;text-align:center;}
.room > div{display:inline-block;width:88px;height:110px;background-color:#56676f;border-radius:10px;padding:5px;}
.favorit{font-size:2em;cursor:pointer;color:#00FFFF;}
.relay{font-size:3em;cursor:pointer;}
.relay:hover{background-color:#444;}
.relay big {font-size:0.4em;position:absolute;margin-left:-28px;margin-top:30px;opacity:0.7;z-index:0;}
.schalter{cursor:pointer;}
.uhr{font-size:1em;text-align:center;}
table{vertical-align:top;margin:0;height:1%;}
form{display:inline;}
form.cloud{display:none;}
fieldset{padding:3px;border-radius:6px;}
label.schreiben{cursor:hand;cursor:pointer;}
td.liste{border-style:solid;border-width:1px;border-color:#f5f5f5;}
textarea{overflow:auto;}
iframe{background-color:#f5f5f5;}
.on{background-color:lime;color:black;}
.stop{background-color:white;color:red;}
.off{background-color:tomato;color:white;}
.knopf{background-color:black;color:white;}
a:hover{color:white;position:relative;right:1px;top:1px;text-decoration:none;}
a{color:#ffffff;text-decoration:none;}
ol{margin:0;}
legend, ul, ol{white-space:nowrap;}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous" /><script>
let rollopos = 0;
// Liste Favoriten Rollohöhe
let rollosequence = [
'75',
'50',
'25',
'10',
'0',
'10',
'25',
'50',
'75',
'100',
];
function RolloFav(ip, ud) {
rollopos++;
if (rollosequence.length === rollopos) {
rollopos = 0;
};
fetch('http://' + ip + '/roller/0?go=to_pos&roller_pos=' + rollosequence[rollopos])
.then()
.catch(err => alert('RolloFavoritenfahrt fehlgeschlagen'));
};
function RolloPosFahrt(ip, position) {
fetch('http://' + ip + '/roller/0?go=to_pos&roller_pos=' + position)
.then()
.catch(err => alert('Rollofahrt angehalten'));
}
function RolloFahrt(ip, ud) {
fetch('http://' + ip +'/roller/0?go=' + ud)
.then()
.catch(err => alert('Rollofahrt angehalten'));
}
function RollosFahren(ip, richtung) {
fetch('http://' + ip +'/roller/0?go=' + richtung)
.then()
.catch(err => alert('Rollofahrt angehalten'));
}
let Dauer = 1;
function loadData() {
let millis = Dauer * 1000;
setInterval(
function() {
Timer(Dauer);
let T1 = 0;
let L1 = 0;
let L2 = 0;
let richtung = "stop";
let hinweis = "";
$("div[data-ip]").each(function(){
var ip = $(this).data('ip');
var name = $(this).data('name');
var linkname = "<a href='http://" + ip + "/' target='new'>" + $(this).data('name') + "</a>";
var power = $(this).data('consumption');
var shellytype = $(this).data('type');
var temptype = $(this).data('temperatur');
var relayindex = $(this).data('relayindex');
var id = $(this).attr('id');
let content = "";
fetch('http://' + ip +'/status')
.then(response => response.json())
.then(function(data) {
T1 = data.tmp.tC + "°C";
let Spannung = data.voltage;
let RolloPos = data.rollers[0].current_pos;
let LetzteRichtung = data.rollers[0].last_direction;
let FWN = data.update.new_version;
let FWO = data.update.old_version;
let NFW = "";
if(RolloPos < 4){var Favorit = '<i style="color:#00FFFF;" class="favorit relay-off mdi mdi-circle-outline"></i>';
} else if(RolloPos > 3 && RolloPos < 23){var Favorit = '<i class="favorit relay-off mdi mdi-circle-slice-1"></i>';
} else if(RolloPos > 22 && RolloPos < 28){var Favorit = '<i class="favorit relay-off mdi mdi-circle-slice-2"></i>';
} else if(RolloPos > 27 && RolloPos < 48){var Favorit = '<i class="favorit relay-off mdi mdi-circle-slice-3"></i>';
} else if(RolloPos > 47 && RolloPos < 53){var Favorit = '<i class="favorit relay-off mdi mdi-circle-slice-4"></i>';
} else if(RolloPos > 52 && RolloPos < 73){var Favorit = '<i class="favorit relay-off mdi mdi-circle-slice-5"></i>';
} else if(RolloPos > 72 && RolloPos < 78){var Favorit = '<i class="favorit relay-off mdi mdi-circle-slice-6"></i>';
} else if(RolloPos > 77 && RolloPos < 98){var Favorit = '<i class="favorit relay-off mdi mdi-circle-slice-7"></i>';
} else {var Favorit = '<i class="favorit relay-off mdi mdi-circle-slice-8"></i>';}
let nachOben = "<span class=\"schalter\" onclick=\"RolloFahrt(\'" + ip + "\', \'open\');\"><i style='font-size:2em;color:#fff;' class='relay-off mdi mdi-arrow-up-bold'></i></span>";
let nachUnten = "<span class=\"schalter\" onclick=\"RolloFahrt(\'" + ip + "\', \'close\');\"><i style='font-size:2em;color:#fff;' class='relay-off mdi mdi-arrow-down-bold'></i></span>";
let Anhalten = "<span title=\"" + LetzteRichtung + "\" class=\"schalter\" onclick=\"RolloFahrt(\'" + ip + "\', \'stop\');\"><i style='font-size:2em;color:#ff0;' class='relay-off mdi mdi-pause'></i></span>";
if(LetzteRichtung === "open"){
richtung = "close";
hinweis = "Schließen";
}
if(LetzteRichtung === "close"){
richtung = "open";
hinweis = "Öffnen";
}
if(FWN === FWO){
FWN = "";
NFW = "";
} else {
NFW = "<span style='color:#ff0' title='Gerät nicht mit Internet verbunden oder neue Firmware vorhanden: " + FWN + " Klick für Update, nur wenn NEUE Version in der Info angezeigt wird'><a href='http://" + ip + "/ota?update=1' target='schalter'> <i style='color:#FFFF00;' class='relay-off mdi mdi-rotate-3d-variant'></i></a></span>";
}
content += "<div><nobr>" + linkname + NFW + "</nobr></div>";
if(data.rollers[0].state === "stop"){
if(RolloPos >= Dauer){
content += '<div title=" ' + hinweis + ' " style="width:100%; text-align: center;" onclick="RollosFahren(\'' + ip + '\', \'' + richtung + '\');"><i style="color:#fff;" class="relay relay-off mdi mdi-window-shutter-open"><big><b title="% geöffnet">' + RolloPos + '%</b></big></i></div>';
} else {
content += '<div title=" ' + hinweis + ' " style="width:100%; text-align: center;" onclick="RollosFahren(\'' + ip + '\', \'' + richtung + '\');"><i style="color:#000;" class="relay relay-off mdi mdi-window-shutter"><big><b title="% geöffnet">' + RolloPos + '%</b></big></i></div>';
}} else {
nachOben = Anhalten;
nachUnten = Anhalten;
richtung = "stop";
hinweis = "Fahrt anhalten";
content += '<div title=" ' + hinweis + ' " style="width:100%; text-align: center;" onclick="RolloFahrt(\'' + ip + '\', \'stop\');"><i style="color:#f80;" class="relay relay-off mdi mdi-window-shutter-alert"></i></div>';
}
L1 = data.rollers[0].power;
L2 += L1;
L3 = L2.toFixed(2);
L4 = L2.toFixed(0);
content += "<div style=\"text-align: center; padding-top: 1px; \">";
if (data.rollers[0].power > 0)
content += "<small>" + data.rollers[0].power + " Watt<br>" + T1 + "</small>";
else
if (data.meters[0].overpower !== 0)
content += "<b><small style=\"color: #00ffff;\" title=\"kein PowerMetering\">-</small></b><br><small>" + T1 + "</small>";
else
content += "<b><small style=\"color: #00ff00;\" title=\"keine Leistungsabnahme\">•</small></b><br><small>" + T1 + "</small>";
content += "<legend style='text-align:center;'>" + nachOben + "<span title='Klick für nächste Favoritenposition' onclick=\"RolloFav(\'" + ip + "\');\">" + Favorit + "</span>" + nachUnten + "</legend>";
content += "</div>";
$('#' + id ).html(content);
let Voltage = Spannung.toFixed(2);
document.getElementById("Alles").innerHTML = "<b style=\"text-align: center; color: #0f0;\">" + L3 + "</b>";
document.getElementById("Tabs").innerHTML = "meine Rollos: " + L4 + " Watt";
document.getElementById("Spannend").innerHTML = Voltage;
})
});
}, millis
)
}
function Timer(s) {
document.getElementById("wieoft").innerHTML=s;
s--;
if (s > 0) {
window.setTimeout('Timer(' + s + ')', 999);
} else {
s = Dauer;
}
}
</script></head><body scroll="auto">
<table><tr>
<td><div class="room"><h4>Anbau</h4><div id="1" data-consumption="true" data-type="roller" data-temperatur="tmp" data-relayindex="0" data-name="Rollo links" data-ip="192.168.178.X"></div></div></td>
<td><div class="room"><h4>Anbau</h4><div id="2" data-consumption="true" data-type="roller" data-temperatur="tmp" data-relayindex="0" data-name="Rollo rechts" data-ip="192.168.178.XX"></div></div></td>
<td><div class="room"><h4>Büro</h4><div id="3" data-consumption="true" data-type="roller" data-temperatur="tmp" data-relayindex="0" data-name="Rollo" data-ip="192.168.178.XXX"></div></div></td>
</tr><tr>
<td colspan="11"><div class="room"><fieldset><legend>Daten werden nach <span id="wieoft"></span> sek. aktualisiert<iframe src="about:blank" width="0" height="0" name="schalter"></iframe></legend>
<!-- big style="color:#00ff00">• </big><small style="color:#ffff00">keine LeistungsAbnahme</small> • <big style="color:#00ffff">- </big><small style="color:#00ffff">keine LeistungsMessung</small -->
<div style="width:100%; text-align:center;"><table style="width:100%; text-align:center;"><tr><td style="width:50%; text-align:right;"><big id="Alles" style="color:#0f0"></big></td><td style="width:50%; text-align:left;"><b><big style="color:#0f0">Watt</big></b></td>
</tr><tr><td style="width:50%; text-align:right;"><b><big id="Spannend" style="color:#0ff"></big></b></td><td style="width:50%; text-align:left;"><b><big style="color:#0ff">Volt</big></b></td>
</tr --></table></div>
<!-- UrsprungsScript von Herrn Eurich: https://github.com/shelly-tools/shelly-cors-examples -->
</fieldset></div></td></tr></table>
<script>
$( document ).ready(function() {
loadData();
Timer(Dauer);
})
</script></body></html>
Alles anzeigen
Es sollte überall ersichtlich sein, was für die eigene Nutzun angepasst werden muss
Moin
und die Scripte der Webseiten habe ich mal weiter modifiziert, da insbesondere die Menge der Schaltflächen der Color-Lampen nicht mehr hinter den Namen passten.
Im "body" der Seite ist nichts geändert, aber im CSS und Scriptbereich vieles. Was welches Symbol darstellt, wird an jeder Stelle in der Mausinfo angezeigt.
Für die i3-Seite habe ich ein Muster für einen zweiten i3 eingefügt, damit ist das für mich auch fertig
Neuere Aktualisierungen des Script-Code künftig nur noch auf der Githubseite:
Brauche ich dann noch irgendwie ein Relais dazu/dazwischen?
Hallöle
und da ist kein zusätzliches Relais nötig
und Dauerhaft Aus den Befehl irgendwo reinsetzen
sowie zum normale Betrieb wieder Einschalten
Wenn der Dauerlichtschalter ein Taster ist, dann bietet sich das im Plus2PM an, mit Doppel- oder Dreifachklick die Aktion zu schalten.
Hallo und benutze nicht die Shelly 2.5 für diese Bastelei, die werden nicht alt und sind nur bis 300Watt Dauerlast empfohlen.
Der Shelly Pro 3 ist besser dafür geeignet und die 2.5 lass ganz für andere Spielereien.
So etwas könnte dann evtl. direkt auf einem Shelly laufen:
schön wärs, weil dann irgendwo aufgeräumt, aber da gibt es Resource Limits:
We impose limits on the size of source code of a single script -- 15kB. The per-script size limit is enforced by Script.PutCode which will return an error if the limit is reached.
There are some limitations of the resources used in a script. At the moment, these are as follows:
No more than 5 timers used in a script;
No more than 5 subscriptions for events used in a script;
No more than 5 subscriptions for status changes used in a script;
No more than 5 RPC calls used in a script.
No more than 10 MQTT topic subscriptions used in a script.
No more than 5 HTTP registered endpoints used in a script.
Den ersten hat es bei mir auch erwischt
Das geht sehr gut mit diesem Script (Webseite) Shelly4ProPM - Status der Relais via Websocket anzeigen
auch für die anderen Plus- und Pto-Geräte
Hallöle und nun habe ich meine Lampenseite mal auf Vordermann gebracht, dass ich auch den Quelltext veröffentlichen kann.
Auf dem PC oder ähnlichem Gerät ist auch beim Maus über die Elemente halten immer ein Infotext sichtbar.
Ich beschreibe trotzdem kurz die Funktionen, die für eigene Leuchten natürlich angepasst werden muss (IP, Name und ggf. anderes).
Ort des Leuchtmittels in der Überschrift,
Name des Leuchtmittels = mit Link zur eigenen Einstellungsseite,
© = Nur für Farbleuchtmittel = mit Klick zum Umschalten Color- oder Weissmodus (Merkur&Saturn hier im WeissModus),
® = Für alle derzeitigen Leuchtmittel = mit Klick für Dimmstufen 100, 75, 50, 25, 10 und 1%, (ein Dimmersymbol ist mir noch nicht eingefallen, aber irgendwann mal gelegentlich[heute])
Leuchtmittelsymbol mit Anzeige der Farbe, des Farbmodus und ggf. spezielle Symbole für Extraleuchten, hier in unteren Reihe Vintage und eine DUO = Klick für An oder Aus sowie MausInfoText,
Bei Leuchtmittel An = Leistungsaufnahme und Dimmstufe sowie ggf. Timerzeit, wenn die Leuchte mit Zeitvorgabe gestartet wurde.
Weissleuchten haben nur die Standardschriftfarbe, Colorleuchten zeigen die aktuelle Farbe im Hintergrund an, die Textfarbe ist nur invertiert.
Im Colormodus ist bei Klick auf den Text ein zufälliger Farbwechsel möglich (im Script auch als Endlosschleife vorbereitet, wer es findet ^^).
Jupiter zeigt hier noch ein Symbol hinter dem ® (mit MausInfoText). Falls im Infotext eine Nummer von neuer Firmware angezeigt wird, kann mit Klick ein sofortiges FirmwareUpdate angestoßen werden.
Da dieses Symbol auch gezeigt wird, wenn die Leuchte im Moment nicht mit dem Internet verbunden ist, immer erst Infotext lesen, bevor ein Update versucht wird.
Alle Leuchtmittel müssen CORS aktiviert haben!
PS: Nicht für das RGBW-Relais geschrieben.
Nun viel Erfolg und wer es braucht, auch noch eine Seite für den i3 (ohne internen CSS):
<!DOCTYPE html><html><head><title id="Tabs">LED's verwalten</title><!-- Versions-Monitor: sv 1.13.0.2023.07.28 --><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="pragma" content="no-cache"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous" />
<!-- Comments in German -->
<style type="text/css" media="all">
*{font-family:Avant Garde, verdana, Magneto, Comic Sans MS, arial,sans-serif,Times New Roman,serif; list-style:none; color:rgb(245,245,245);}
body{margin:0;border:0; scrollbar-width: auto; scrollbar-color: rgb(0,0,0) rgb(245,245,245); color: rgb(245,245,245); background-color: #37474f; display:flex; flex-flow:row wrap; font-size:10pt;}
body::-webkit-scrollbar{width:20px;height:20px;}
body::-webkit-scrollbar-track{background-color:#37474f;}
body::-webkit-scrollbar-thumb{background-color:black; border-radius:10px; border:1px solid #00f0f0;}
.room{background-color:#455a64;padding:5px;border-radius:20px;color:#eee;margin-bottom:1px;}
.room > div{display:inline-block;width:86px;height:110px;background-color:#56676f;border-radius:10px;padding:5px;}
.relay{font-size:3em;cursor:pointer;position:relative;}
.relay big {font-size:0.4em;position:absolute;margin-left:-28px;margin-top:20px;opacity:0.55;z-index:0;}
.relay:hover{background-color:#444;}
.schalter{cursor:pointer;}
.uhr{font-size:1em;text-align:center;}
h4{margin:0;margin-bottom:3px;}
h3{text-align:center;}
table{vertical-align:top;margin:0;height:1%;}
form{display:inline;}
form.cloud{display:none;}
fieldset{padding:3px;border-radius:6px;}
label.schreiben{cursor:hand;cursor:pointer;}
td.liste{border-style:solid;border-width:1px;border-color:#f5f5f5;}
textarea{overflow:auto;}
iframe{background-color:#f5f5f5;}
.on{background-color:lime;color:black;}
.stop{background-color:white;color:red;}
.off{background-color:tomato;color:white;}
.knopf{background-color:black;color:white;}
a:hover{color:white;position:relative;right:1px;top:1px;text-decoration:none;}
a{color:#ffffff;text-decoration:none;}
ol{margin:0;}
legend, ul, ol{white-space:nowrap;}
</style><script>
let Dauer = 5; // aller wieviel Sekunden soll neu gelesen werden?
let dimpos = 0;
let effpos = 0;
let duopos = 0;
let weisspos = 0;
// Dimmstufen anpassen
let dimsequence = [
'75',
'50',
'25',
'10',
'1', // ggf. 4% Minimum bei vielen DunkelFarben
'10',
'25',
'50',
'75',
'100',
];
let weisstemperatur = [
'5800',
'5100',
'4400',
'3700',
'3000',
'3700',
'4400',
'5100',
'5800',
'6500',
];
let duotemperatur = [
'2700',
'4600',
'6500',
];
let BulbEffekte = [
'0',
'1',
'2',
'3',
];
function BulbDimmen(ip, woc) {
dimpos++;
if (dimsequence.length === dimpos) {
dimpos = 0;
};
fetch('http://' + ip + '/light/0?' + woc + '=' + dimsequence[dimpos])
.then()
.catch(err => alert('Dimmen fehlgeschlagen'));
};
function WeissTemp(ip, ud) {
weisspos++;
if (weisstemperatur.length === weisspos) {
weisspos = 0;
};
fetch('http://' + ip + '/light/0?temp=' + weisstemperatur[weisspos])
.then()
.catch(err => alert('Weisstemperatur stellen fehlgeschlagen'));
};
function DuoTemp(ip, ud) {
duopos++;
if (duotemperatur.length === duopos) {
duopos = 0;
};
fetch('http://' + ip + '/light/0?temp=' + duotemperatur[duopos])
.then()
.catch(err => alert('Weisstemperatur stellen fehlgeschlagen'));
};
function EffekteSchalten(ip, ud) {
effpos++;
if (BulbEffekte.length === effpos) {
effpos = 0;
};
fetch('http://' + ip + '/light/0?effect=' + BulbEffekte[effpos])
.then()
.catch(err => alert('Effekte schalten fehlgeschlagen'));
};
function ToggleShelly(type, id, ip) {
fetch('http://' + ip +'/'+ type +'/' + id + '?turn=toggle')
.then()
.catch(err => alert('Umschalten hat nicht funktioniert'));
}
function Farbwechsel(ip, ud){
// setInterval(function() {
let Bulb = ip;
let Bred = Math.round(Math.random() * 255); // für dunklere Farben etwa 100 als Multiplikator pro Farbe
let Bgreen = Math.round(Math.random() * 255);
let Bblue = Math.round(Math.random() * 255);
let Bbrightness = Math.round(Math.random() * 60); // maximal 100
fetch('http://' + Bulb + '/light/0?red=' + Bred + '&green=' + Bgreen + '&blue=' + Bblue + 'white=0&gain=' + Bbrightness)
.then()
.catch(err => alert('kein ' + Bulb + ' Farbwechsel'));
// }, 6000);
// kein Link für TimerStop verbaut, Seite Neuladen stoppt den Timer, falls aktiviert
}
function BulbModus(ip, ud){
fetch('http://' + ip + '/settings?mode=' + ud)
.then()
.catch(err => alert('FarbModus' + ud + ' nicht gewechselt'));
}
function fuehrendeNull(wert) {
if (wert < 10) return "0" + parseInt(wert);
else return parseInt(wert);
}
function Sekundenumwandeln(Sekundenzahl) {
Sekundenzahl = Math.abs(Sekundenzahl)
if(Sekundenzahl > 86400){
return parseInt(Sekundenzahl/60/60/24)+ "d" + fuehrendeNull((Sekundenzahl/60/60)%24) + ":" + fuehrendeNull((Sekundenzahl/60)%60) + ":" + fuehrendeNull(Sekundenzahl%60);
} else if(Sekundenzahl < 60){
return fuehrendeNull(Sekundenzahl%60) + " sek.";
} else if(Sekundenzahl < 3600){
return fuehrendeNull((Sekundenzahl/60)%60) + ":" + fuehrendeNull(Sekundenzahl%60);
} else {
return fuehrendeNull((Sekundenzahl/60/60)%24) + ":" + fuehrendeNull((Sekundenzahl/60)%60) + ":" + fuehrendeNull(Sekundenzahl%60);
}
}
function loadData() {
let millis = Dauer * 1000;
setInterval(
function() {
Timer(Dauer);
let L1 = 0;
let L2 = 0;
$("div[data-ip]").each(function(){
var ip = $(this).data('ip');
var name = $(this).data('name');
var linkname = "<a href='http://" + ip + "/' title='GeräteWebseite öffnen' target='new'>" + $(this).data('name') + "</a>";
var power = $(this).data('consumption');
var shellytype = $(this).data('type');
var relayindex = $(this).data('relayindex');
var id = $(this).attr('id');
let content = "";
fetch('http://' + ip +'/status')
.then(response => response.json())
.then(function(data) {
var EndColorChange = "</div>";
var Rk = 255-data.lights[relayindex].red;
var Gk = 255-data.lights[relayindex].green;
var Bk = 255-data.lights[relayindex].blue;
if (data.lights[relayindex].mode === 'color'){
var Helligkeit = data.lights[relayindex].gain;
if(Helligkeit < 4){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-outline"></i>';
} else if(Helligkeit > 3 && Helligkeit < 23){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-1"></i>';
} else if(Helligkeit > 22 && Helligkeit < 28){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-2"></i>';
} else if(Helligkeit > 27 && Helligkeit < 48){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-3"></i>';
} else if(Helligkeit > 47 && Helligkeit < 53){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-4"></i>';
} else if(Helligkeit > 52 && Helligkeit < 73){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-5"></i>';
} else if(Helligkeit > 72 && Helligkeit < 78){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-6"></i>';
} else if(Helligkeit > 77 && Helligkeit < 98){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-7"></i>';
} else {var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-8"></i>';}
var woc = "gain";
var Effektwechsel = ' Klick für Effektwechsel';
var Effeckt = data.lights[relayindex].effect;
if(Effeckt === 1){var LichtShow = '<i style="color:#ff0;" title="Meteor Shower - Meteorregen' + Effektwechsel + '" class="relay-off mdi mdi-meteor"></i>';
} else if(Effeckt === 2){var LichtShow = '<i style="color:#f0f;" title="Gradual Change - Allmähliche Veränderung' + Effektwechsel + '" class="relay-off mdi mdi-spray"></i>';
} else if(Effeckt === 3 && data.meters[relayindex].power > 0){var LichtShow = '<i style="color:#f00;" title="Flash - Blinken' + Effektwechsel + '" class="relay-off mdi mdi-alarm-light"></i>';
} else if(Effeckt === 3 && data.meters[relayindex].power < 1){var LichtShow = '<i style="color:#f00;" title="Flash - Blinken' + Effektwechsel + '" class="relay-off mdi mdi-alarm-light-outline"></i>';
} else {var LichtShow = '<i style="color:#888;" title="Effects Off - kein Effekt' + Effektwechsel + '" class="relay-off mdi mdi-alarm-light-off-outline"></i>';}
var onRGBW = "rgb(" + data.lights[relayindex].red + " " + data.lights[relayindex].green + " " + data.lights[relayindex].blue + ")";
var ColorModus = "<big><nobr title=\"Klick für Color- oder WeissModus\" class=\"schalter\" onclick=\"BulbModus(\'" + ip + "\', \'white\');\">©</nobr><nobr class=\"schalter\" onclick=\"EffekteSchalten(\'" + ip + "\');\">" + LichtShow + " </nobr><nobr title=\"Klick für eingestellte Dimmstufen\" class=\"schalter\" onclick=\"BulbDimmen(\'" + ip + "\', \'" + woc + "\');\">" + Dimmer + " </nobr></big>";
var ColorChange = "<div title=\"Klick für Farbwechsel\" class=\"schalter\" onclick=\"Farbwechsel(\'" + ip + "\');\">";
if (data.lights[relayindex].timer_remaining === 0) {
var SEK = "";
} else {
let wirklicheZeit = Sekundenumwandeln(data.lights[relayindex].timer_remaining);
var SEK = "<span title=\"noch bis An oder Aus\">" + wirklicheZeit + "</span>";
};
} else {
var Helligkeit = data.lights[relayindex].brightness;
if(Helligkeit < 4){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-outline"></i>';
} else if(Helligkeit > 3 && Helligkeit < 23){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-1"></i>';
} else if(Helligkeit > 22 && Helligkeit < 28){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-2"></i>';
} else if(Helligkeit > 27 && Helligkeit < 48){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-3"></i>';
} else if(Helligkeit > 47 && Helligkeit < 53){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-4"></i>';
} else if(Helligkeit > 52 && Helligkeit < 73){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-5"></i>';
} else if(Helligkeit > 72 && Helligkeit < 78){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-6"></i>';
} else if(Helligkeit > 77 && Helligkeit < 98){var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-7"></i>';
} else {var Dimmer = '<i style="color:#00FFFF;" class="relay-off mdi mdi-circle-slice-8"></i>';}
var woc = "brightness";
var onRGBW = "mode: " + data.lights[relayindex].mode + ", Temp: " + data.lights[relayindex].temp + "K";
if(typeof data.lights[relayindex].mode !== 'undefined'){
var ColorModus = "<big><nobr title=\"Klick für Color- oder WeissModus\" class=\"schalter\" onclick=\"BulbModus(\'" + ip + "\', \'color\');\">© </nobr><nobr title=\"Klick für eingestellte Dimmstufen\" class=\"schalter\" onclick=\"BulbDimmen(\'" + ip + "\', \'" + woc + "\');\">" + Dimmer + " </nobr></big>";
} else {
var ColorModus = "<big><nobr title=\"Klick für eingestellte Dimmstufen\" class=\"schalter\" onclick=\"BulbDimmen(\'" + ip + "\', \'" + woc + "\');\">" + Dimmer + " </nobr></big>";
};
if(data.lights[relayindex].temp >2699){
var ColorChange = "<div title=\"Klick für WeissTemperatut\" class=\"schalter\" onclick=\"DuoTemp(\'" + ip + "\');\">";
} else {
var ColorChange = "";
}
if (data.lights[relayindex].timer_remaining === 0) {
var SEK = "";
} else {
let wirklicheZeit = Sekundenumwandeln(data.lights[relayindex].timer_remaining);
var SEK = "<span title=\"noch bis An oder Aus\">" + wirklicheZeit + "</span>";
};
}
let FWN = data.update.new_version;
let FWO = data.update.old_version;
let NFW = "";
if(FWN === FWO){
FWN = "";
NFW = "";
} else {
if(data.cloud.connected === false){
NFW = "<big style='color:#ff0' title='" + name + " nicht mit Internet/Cloud verbunden'><nobr><i style='color:#FFFF00;' class='relay-off mdi mdi-cloud-off-outline'></i></a></nobr></big>";
} else {
NFW = "<big style='color:#ff0' title='" + name + " nicht mit FirmwareServer verbunden oder neue Firmware vorhanden: " + FWN + " Klick für Update, nur wenn NEUE Version in der Info angezeigt wird'><nobr><a href='http://" + ip + "/ota?update=1' target='schalter'><i style='color:#FFFF00;' class='relay-off mdi mdi-rotate-3d-variant'></i></a></nobr></big>";
}
}
content += "<div>" + linkname + "</div>";
if(data.lights[relayindex].ison == true)
if(id < 10)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i title="'+ onRGBW + '" style="color:' + onRGBW + ';" class="relay relay-off mdi mdi-lightbulb-on"><big></big></i></div>';
else
if(id > 9 && id <= 19)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i title="Ausschalten" style="color:#FF8F00;" class="relay relay-off mdi mdi-lightbulb-on-outline"><big></big></i></div>';
else
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i title="Ausschalten" style="color:white;" class="relay relay-off mdi mdi-lightbulb-on-outline"><big></big></i></div>'; // mdi-candle
else
if(id == 33)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i title="Anschalten" class="relay relay-off mdi mdi-home-lightbulb-outline"><big></big></i></div>';
else
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i title="Anschalten" style="color:gray;" class="relay relay-off mdi mdi-lightbulb-outline"><big>Aus</big></i></div>';
content += "<div style=\"text-align: center; padding-top: 1px; \">";
if(typeof data.meters[relayindex].power !== 'undefined')
L1 = data.meters[relayindex].power;
L2 += L1;
L3 = L2.toFixed(2);
L4 = L2.toFixed(0);
if (data.meters[relayindex].power > 0)
content += ColorChange + "<nobr style=\"background-color:rgb(" + data.lights[relayindex].red + " " + data.lights[relayindex].green + " " + data.lights[relayindex].blue + "); color:rgb(" + Rk + " " + Gk + " " + Bk + ");\"> " + data.meters[relayindex].power + "W " + Helligkeit + "% </nobr><br>" + SEK + EndColorChange;
else if (data.lights[relayindex].overpower === false)
content += "<big style=\"color: #00ffff;\" title=\"kein PowerMetering\">-</big><br>" + SEK;
else
content += "<span style=\"color: #00ff00;\" title=\"keine Leistungsabnahme\">•</span><br>" + SEK;
content += "<fieldset style='width:88%;'><legend style='text-align:left;'>" + ColorModus + NFW +"</legend></fieldset>";
content += "</div>";
$('#' + id ).html(content);
document.getElementById("Alles").innerHTML = "<b style=\"text-align: center; color: #0f0;\">" + L3 + " </b>";
document.getElementById("Tabs").innerHTML = "alle Lichter: " + L4 + " Watt";
})
});
}, millis
)
}
function Timer(s) {
document.getElementById("wieoft").innerHTML=s;
s--;
if (s > 0) {
window.setTimeout('Timer(' + s + ')', 999);
} else {
s = Dauer;
}
}
</script></head><body scroll="auto">
<table><tr><!-- Ab hier die Leuchtmitteldaten anpassen, hier id bis 9 für RGBW, bis 19 für Vintage und dann DUO's, relaisindex bei Leuchten immer 0, Namen & IP anpassen -->
<td><div class="room"><h4>Bad</h4><div id="1" data-consumption="true" data-type="light" data-relayindex="0" data-name="Rasierer" data-ip="192.168.178.106"></div></div></td>
<td><div class="room"><h4>SZ</h4><div id="2" data-consumption="true" data-type="light" data-relayindex="0" data-name="Merkur" data-ip="192.168.178.107"></div></div></td>
<td><div class="room"><h4>SZ</h4><div id="3" data-consumption="true" data-type="light" data-relayindex="0" data-name="Pluto" data-ip="192.168.178.105"></div></div></td>
<td><div class="room"><h4>Küche</h4><div id="4" data-consumption="true" data-type="light" data-relayindex="0" data-name="Saturn" data-ip="192.168.178.108"></div></div></td>
<td><div class="room"><h4>Küche</h4><div id="5" data-consumption="true" data-type="light" data-relayindex="0" data-name="Titan" data-ip="192.168.178.109"></div></div></td>
</tr><tr>
<td><div class="room"><h4>Bad</h4><div id="6" data-consumption="true" data-type="light" data-relayindex="0" data-name="Neptun" data-ip="192.168.178.101"></div></div></td>
<td><div class="room"><h4>Flur</h4><div id="11" data-consumption="true" data-type="light" data-relayindex="0" data-name="Uranus" data-ip="192.168.178.110"></div></div></td>
<td><div class="room"><h4>WZ</h4><div id="12" data-consumption="true" data-type="light" data-relayindex="0" data-name="Mond" data-ip="192.168.178.68"></div></div></td>
<td><div class="room"><h4>SZ</h4><div id="13" data-consumption="true" data-type="light" data-relayindex="0" data-name="Jupiter" data-ip="192.168.178.69"></div></div></td>
<td><div class="room"><h4>Nachttisch</h4><div id="22" data-consumption="true" data-type="light" data-relayindex="0" data-name="Ceres" data-ip="192.168.178.100"></div></div></td>
</tr><tr>
<!-- td><div class="room"><h4>Treppe</h4><div id="33" data-consumption="true" data-type="light" data-relayindex="0" data-name="Sonne" data-ip="192.168.178.117"></div></div></td>
<td><div class="room"><h4>KiZi</h4><div id="7" data-consumption="true" data-type="light" data-relayindex="0" data-name="Venus" data-ip="192.168.178.121"></div></div></td>
<td><div class="room"><h4>G125</h4><div id="10" data-consumption="true" data-type="light" data-relayindex="0" data-name="Mond" data-ip="192.168.178.119"></div></div></td>
<td><div class="room"><h4>WZ</h4><div id="14" data-consumption="true" data-type="light" data-relayindex="0" data-name="Erde" data-ip="192.168.178.120"></div></div></td>
<td><div class="room"><h4>Nachttisch</h4><div id="23" data-consumption="true" data-type="light" data-relayindex="0" data-name="Mars" data-ip="192.168.178.118"></div></div></td>
</tr><tr -->
<td colspan="8"><div class="room"><fieldset><legend>Daten werden nach <span id="wieoft"></span> Sekunden aktualisiert<iframe src="about:blank" width="0" height="0" name="schalter"></iframe></legend>
<div style="width:100%; text-align:center;"><table style="width:100%; text-align:center;"><tr><td style="width:10%; text-align:center;"></td><td style="width:40%; text-align:right;"><big id="Alles" style="color:#0f0"></big></td><td style="width:50%; text-align:left;"><b><big style="color:#0f0">Watt</big></b> <a target="new" href="https://shelly.cloud/de/">Shelly</a></td></tr></table></div>
</fieldset></div></td></tr></table>
<script>
$( document ).ready(function() {
loadData();
Timer(Dauer);
})
</script></body></html>
Alles anzeigen
i3 Code:
<!DOCTYPE html><html><head><title id="Tabs">Inputs anzeigen</title><!-- Versions-Monitor: sv 1.13.0.2023.07.14 --><base target="schalter"><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="pragma" content="no-cache"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css" media="all">
*{font-family:Avant Garde, verdana, Magneto, Comic Sans MS, arial,sans-serif,Times New Roman,serif; list-style:none; color:rgb(245,245,245);}
body{margin:0;border:0; scrollbar-width: auto; scrollbar-color: rgb(0,0,0) rgb(245,245,245); color: rgb(245,245,245); background-color: #37474f; display:flex; flex-flow:row wrap; font-size:10pt;}
body::-webkit-scrollbar{width:20px;height:20px;}
body::-webkit-scrollbar-track{background-color:#37474f;}
body::-webkit-scrollbar-thumb{background-color:black; border-radius:10px; border:1px solid #00f0f0;}
.room{background-color:#455a64;padding:5px;border-radius:20px;color:#eee;margin-bottom:1px;}
.room > div{display:inline-block;width:86px;height:110px;background-color:#56676f;border-radius:10px;padding:5px;}
.relay{font-size:3em;cursor:pointer;position:relative;}
.relay big {font-size:0.4em;position:absolute;margin-left:-28px;margin-top:20px;opacity:0.55;z-index:0;}
.relay:hover{background-color:#444;}
.schalter{cursor:pointer;}
.uhr{font-size:1em;text-align:center;}
h4{margin:0;margin-bottom:3px;}
h3{text-align:center;}
table{vertical-align:top;margin:0;height:1%;}
form{display:inline;}
form.cloud{display:none;}
fieldset{padding:3px;border-radius:6px;}
label.schreiben{cursor:hand;cursor:pointer;}
td.liste{border-style:solid;border-width:1px;border-color:#f5f5f5;}
textarea{overflow:auto;}
iframe{background-color:#f5f5f5;}
.on{background-color:lime;color:black;}
.stop{background-color:white;color:red;}
.off{background-color:tomato;color:white;}
.knopf{background-color:black;color:white;}
a:hover{color:white;position:relative;right:1px;top:1px;text-decoration:none;}
a{color:#ffffff;text-decoration:none;}
ol{margin:0;}
legend, ul, ol{white-space:nowrap;}
</style><script>
// Textanzeige der 18 Schaltbefehle des ersten i3 zwischen "" einfügen, für weitere i3 diese Liste verlängern.
// Auf den Anzeigetext kann auch ein Link gelegt werden, so kann dieser den Anzeigetext dann auch schalten.
// Input 1
let i31 = "<a href='http://192.168.178.68/light/0?turn=toggle' title='Heilung'>Mond & Amazon Musik"; // SinglePush
let i32 = "<a href='http://192.168.178.52/relay/0?turn=toggle' title='Musik eben'>Lüfter & Amazon Musik"; // DoublePush
let i33 = "<a href='http://192.168.178.69/light/0?turn=toggle'>Vintage An/Aus"; // TriplePusch
let i34 = "nix"; // Single- & LongPush
let i35 = "nix"; // Long- & SinglePush
let i36 = "Lichter Aus"; // LongPush
// Input 2
let i37 = "Flur&Bad An"; // Reihenfolge wie bei Input 1
let i38 = "<a href='http://192.168.178.52/relay/0?turn=toggle'>Lüfter An/Aus";
let i39 = "nix";
let i310 = "nix";
let i311 = "nix";
let i312 = "alle Lichter Aus";
// Input 3
let i313 = "<a href='http://192.168.178.45/relay/0?turn=on'>Treppenlicht An";
let i314 = "<a href='http://192.168.178.110/light/0?turn=on&timer=1800' title='30 min.'>Flur Dauerlicht";
let i315 = "nix";
let i316 = "nix";
let i317 = "nix";
let i318 = "<a href='http://192.168.178.45/relay/0?turn=on&timer=1.5'>Treppe Dauerlicht";
// Input 1.2
let i321 = "<a href='http://192.168.178.78/roller/0?go=open' title='BüroRollo'>Rollo Auf"; // SinglePush
let i322 = "<a href='http://192.168.178.78/roller/0?go=to_pos&roller_pos=70' title='BüroRollo'>Rollo 70% Auf"; // DoublePush
let i323 = "<a href='http://192.168.178.78/roller/0?go=to_pos&roller_pos=50' title='BüroRollo'>Rollo 50% Auf"; // TriplePusch
let i324 = "nix"; // Single- & LongPush
let i325 = "<a href='http://192.168.178.83/relay/0?turn=toggle' title='Sonnenuhr klemmt?'>Sonnenuhr umgestellt"; // Long- & SinglePush
let i326 = "<a href='http://192.168.178.78/roller/0?go=close' title='BüroRollo'>Rollo Zu"; // LongPush
// Input 2.2
let i327 = "<a href='http://192.168.178.78/roller/0?go=stop' title='alle Rollos'>Rollos STOP";
let i328 = "<a href='http://192.168.178.39/relay/0?turn=toggle'>Econelo An/Aus";
let i329 = "<a href='http://192.168.178.79/relay/0?turn=toggle'>Waschmaschine An/Aus";
let i330 = "<a href='http://192.168.178.84/relay/0?turn=off'>Alle Steckdosen Aus";
let i331 = "<a href='http://192.168.178.80/relay/0?turn=toggle'>Kaffeemaschine An/Aus";
let i332 = "<a href='http://192.168.178.84/relay/0?turn=toggle'>USB-Steckdose An/Aus";
// Input 3.2
let i333 = "<a href='http://192.168.178.102/light/0?turn=toggle'>Mond An/Aus";
let i334 = "<a href='http://192.168.178.103/light/0?turn=toggle'>Mars An/Aus";
let i335 = "<a href='http://192.168.178.104/light/0?turn=toggle'>Venus An/Aus";
let i336 = "<a href='http://192.168.178.103/light/0?turn=on&red=255&green=255&blue=255' title='unter diesem Link nur Mars'>Lichter weiss";
let i337 = "<a href='http://192.168.178.104/light/0?turn=on&red=0&green=255&blue=0' title='unter diesem Link nur Venus'>Lichter farbig";
let i338 = "<a href='http://192.168.178.101/light/0?turn=toggle' title='unter diesem Link Sonne An/Aus'>3 Lichter An/Aus";
let Dauer = 9;
function loadData() {
let millis = Dauer * 1000;
setInterval(
function() {
Timer(Dauer);
$("div[data-ip]").each(function(){
var ip = $(this).data('ip');
var name = $(this).data('name');
var linkname = "<a href='http://" + ip + "/' title='Link zum Gerät Öffnen' target='new'>" + $(this).data('name') + "</a>";
var shellytype = $(this).data('type');
var relayindex = $(this).data('relayindex');
var canal = $(this).data('canalname');
var id = $(this).attr('id');
let lastsequence = "";
let content = "";
fetch('http://' + ip + '/status')
.then(response => response.json())
.then(function(data) {
let FWN = data.update.new_version;
let FWO = data.update.old_version;
let NFW = "";
let Uhrzeit = "";
let Temperatur = "";
let Zeit = data.time;
let temp = data.temperature_status;
if(FWN === FWO){
NFW = "";
} else if(relayindex === 0){
NFW = "<span style='color:#ff0' title='" + name + " nicht mit Internet verbunden oder neue Firmware vorhanden: " + FWN + " Klick für Update, nur wenn NEUE Version in der Info angezeigt wird'><a href='http://" + ip + "/ota?update=1' target='schalter'> <i style='color:#FFFF00;' class='relay-off mdi mdi-rotate-3d-variant'> >O<</i></a></span>";
}
if(relayindex === 1){
Uhrzeit = "<small style='color:#0ff' title='aktuelle Uhrzeit'> " + Zeit + "</small>";
}
if(relayindex === 2){
Temperatur = "<small style='color:#f0f' title='Chiptemperatur'> " + temp + "</small>";
}
content += "<div>" + linkname + NFW + Uhrzeit + Temperatur + "</div>";
let letztertastendruck = data.inputs[relayindex].last_sequence;
let schaltbefehl = ""; // bei weiteren i3-Geräten sind diese Listen zu erweitern
if(id >= 1 && id <= 3) {
if(letztertastendruck === "S"){lastsequence = "•<br>SinglePush";
} else if(letztertastendruck === "SS"){lastsequence = "• •<br>DoublePush";
} else if(letztertastendruck === "SSS"){lastsequence = "• • •<br>TriplePush";
} else if(letztertastendruck === "SL"){ lastsequence = "• <b style='color:#00ff00;'>|</b><br>Single& LongPush";
} else if(letztertastendruck === "LS"){ lastsequence = "<b style='color:#00ff00;'>|</b> •<br>Long& SinglePush";
} else if(letztertastendruck === "L"){lastsequence = "<b style='color:#00ff00;'>|</b><br>LongPush";
} else if(letztertastendruck === ""){lastsequence = "nichts gedrückt";
} else {lastsequence = "k.A.";}
if(letztertastendruck === "S" && relayindex === 0){schaltbefehl = "</i><br>" + i31 + "</a>";
} else if(letztertastendruck === "SS" && relayindex === 0){schaltbefehl = "</i><br>" + i32 + "</a>";
} else if(letztertastendruck === "SSS" && relayindex === 0){schaltbefehl = "</i><br>" + i33 + "</a>";
} else if(letztertastendruck === "SL" && relayindex === 0){schaltbefehl = "</i><br>" + i34 + "</a>";
} else if(letztertastendruck === "LS" && relayindex === 0){schaltbefehl = "</i><br>" + i35 + "</a>";
} else if(letztertastendruck === "L" && relayindex === 0){schaltbefehl = "</i><br>" + i36 + "</a>";
} else if(letztertastendruck === "S" && relayindex === 1){schaltbefehl = "</i><br>" + i37 + "</a>";
} else if(letztertastendruck === "SS" && relayindex === 1){schaltbefehl = "</i><br>" + i38 + "</a>";
} else if(letztertastendruck === "SSS" && relayindex === 1){schaltbefehl = "</i><br>" + i39 + "</a>";
} else if(letztertastendruck === "SL" && relayindex === 1){schaltbefehl = "</i><br>" + i310 + "</a>";
} else if(letztertastendruck === "LS" && relayindex === 1){schaltbefehl = "</i><br>" + i311 + "</a>";
} else if(letztertastendruck === "L" && relayindex === 1){schaltbefehl = "</i><br>" + i312 + "</a>";
} else if(letztertastendruck === "S" && relayindex === 2){schaltbefehl = "</i><br>" + i313 + "</a>";
} else if(letztertastendruck === "SS" && relayindex === 2){schaltbefehl = "</i><br>" + i314 + "</a>";
} else if(letztertastendruck === "SSS" && relayindex === 2){schaltbefehl = "</i><br>" + i315 + "</a>";
} else if(letztertastendruck === "SL" && relayindex === 2){schaltbefehl = "</i><br>" + i316 + "</a>";
} else if(letztertastendruck === "LS" && relayindex === 2){schaltbefehl = "</i><br>" + i317 + "</a>";
} else if(letztertastendruck === "L" && relayindex === 2){schaltbefehl = "</i><br>" + i318 + "</a>";
} else {schaltbefehl = "</i><br>n.v.";}
} else if(id >= 4 && id <= 6) {
if(letztertastendruck === "S"){lastsequence = "•<br>SinglePush";
} else if(letztertastendruck === "SS"){lastsequence = "• •<br>DoublePush";
} else if(letztertastendruck === "SSS"){lastsequence = "• • •<br>TriplePush";
} else if(letztertastendruck === "SL"){ lastsequence = "• <b style='color:#00ff00;'>|</b><br>Single& LongPush";
} else if(letztertastendruck === "LS"){ lastsequence = "<b style='color:#00ff00;'>|</b> •<br>Long& SinglePush";
} else if(letztertastendruck === "L"){lastsequence = "<b style='color:#00ff00;'>|</b><br>LongPush";
} else if(letztertastendruck === ""){lastsequence = "nichts gedrückt";
} else {lastsequence = "k.A.";}
if(letztertastendruck === "S" && relayindex === 0){schaltbefehl = "</i><br>" + i321 + "</a>";
} else if(letztertastendruck === "SS" && relayindex === 0){schaltbefehl = "</i><br>" + i322 + "</a>";
} else if(letztertastendruck === "SSS" && relayindex === 0){schaltbefehl = "</i><br>" + i323 + "</a>";
} else if(letztertastendruck === "SL" && relayindex === 0){schaltbefehl = "</i><br>" + i324 + "</a>";
} else if(letztertastendruck === "LS" && relayindex === 0){schaltbefehl = "</i><br>" + i325 + "</a>";
} else if(letztertastendruck === "L" && relayindex === 0){schaltbefehl = "</i><br>" + i326 + "</a>";
} else if(letztertastendruck === "S" && relayindex === 1){schaltbefehl = "</i><br>" + i327 + "</a>";
} else if(letztertastendruck === "SS" && relayindex === 1){schaltbefehl = "</i><br>" + i328 + "</a>";
} else if(letztertastendruck === "SSS" && relayindex === 1){schaltbefehl = "</i><br>" + i329 + "</a>";
} else if(letztertastendruck === "SL" && relayindex === 1){schaltbefehl = "</i><br>" + i330 + "</a>";
} else if(letztertastendruck === "LS" && relayindex === 1){schaltbefehl = "</i><br>" + i331 + "</a>";
} else if(letztertastendruck === "L" && relayindex === 1){schaltbefehl = "</i><br>" + i332 + "</a>";
} else if(letztertastendruck === "S" && relayindex === 2){schaltbefehl = "</i><br>" + i333 + "</a>";
} else if(letztertastendruck === "SS" && relayindex === 2){schaltbefehl = "</i><br>" + i334 + "</a>";
} else if(letztertastendruck === "SSS" && relayindex === 2){schaltbefehl = "</i><br>" + i335 + "</a>";
} else if(letztertastendruck === "SL" && relayindex === 2){schaltbefehl = "</i><br>" + i336 + "</a>";
} else if(letztertastendruck === "LS" && relayindex === 2){schaltbefehl = "</i><br>" + i337 + "</a>";
} else if(letztertastendruck === "L" && relayindex === 2){schaltbefehl = "</i><br>" + i338 + "</a>";
} else {schaltbefehl = "</i><br>n.v.";}
}
if(relayindex >= 0 && relayindex < 3){
content += '<div style="width:100%; text-align: center;"><i title="Zähler: ' + data.inputs[relayindex].event_cnt + '" style="color:#00ff00;">' + data.inputs[relayindex].event + ' ' + lastsequence + schaltbefehl + '</i></div>';
} else {
content += canal;
}
content += "</div>";
$('#' + id ).html(content);
});
});
}, millis
)}
function Timer(s) {
document.getElementById("wieoft").innerHTML=s;
s--;
if (s > 0) {
window.setTimeout('Timer(' + s + ')', 999);
} else {
s = Dauer;
}
}
</script></head><body class="bald" scroll="auto">
<table><tr>
<td><div class="room"><h4>i3 Flur links</h4><div id="1" data-type="input" data-relayindex="0" data-canalname="Flur1" data-name="But'n1" data-ip="192.168.178.54"></div></div></td>
<td><div class="room"><h4>Flur mitte</h4><div id="2" data-type="input" data-relayindex="1" data-canalname="Flur2" data-name="But'n2" data-ip="192.168.178.54"></div></div></td>
<td><div class="room"><h4>Flur rechts</h4><div id="3" data-type="input" data-relayindex="2" data-canalname="Flur3" data-name="But'n3" data-ip="192.168.178.54"></div></div></td>
</tr><tr>
<td><div class="room"><h4><a href="info.htm" target="rechts" title="BedienungInfo">3fach-Taster</a></h4><div id="4" data-type="input" data-relayindex="0" data-canalname="Flur1" data-name="links" data-ip="192.168.178.132"></div></div></td>
<td><div class="room"><h4>Büro</h4><div id="5" data-type="input" data-relayindex="1" data-canalname="Flur2" data-name="mitte" data-ip="192.168.178.132"></div></div></td>
<td><div class="room"><h4>Fenster</h4><div id="6" data-type="input" data-relayindex="2" data-canalname="Flur3" data-name="rechts" data-ip="192.168.178.132"></div></div></td>
</tr><tr>
<td colspan="2"><div class="room"><fieldset><legend>Daten werden nach <span id="wieoft"></span> <br>Sekunden aktualisiert<iframe src="about:blank" width="0" height="0" name="schalter"></iframe></legend>
<div style="width:100%; text-align:center;"><table style="width:100%; text-align:center;"><tr><td style="width:100%; text-align:center;"></td></tr></table></div>
</fieldset></div></td></tr></table>
<script>
$( document ).ready(function() {
loadData();
Timer(Dauer);
})
</script></body></html>
Alles anzeigen
Juni'29, soweit reicht mein Kalender gar nicht
Und nun ist die erste Testseite (im Bild rechts unten) für Gen.2-Geräte entstanden, füllt sich sicher künftig noch
Nun mit Text
Ja das kann ich auch, entstand ja erst, weil Frau mit Wäschekorb den Taster verflucht hat. So ist der Motion fast wie überall nur ein Zusatzschalter und ich habe mehr Ruhe
Mag alles machbar sein, allerdings hat es mich im Flur noch nie gestört. Nach Sonnenaufgang geht der Motion eh aus und eine halbe Stunde vor Sonnenuntergang erst wieder an. Falls es wirklich tagsüber mal so dunkel sein sollte, dürfen die Taster die Leuchte An-/Ausschalten.
Ganz anders im Bad, sobald die Hauptleuchte vom Motion angeschalten wird, schaltet die Shelly-Bulb mit
den Motion Aus, beim Ausschalten der Lampe (Taster ist ja außerhalb des Bades) mit
den Motion wieder An. Falls wer das Ausschalten verpasst oder länger wie 2 Stunden in der Wanne schläft, schaltet die Bulb per Timer aus und somit den Motion wieder An. Mit aus der Wanne winken bringt wieder Licht ins Dunkle
Dein HTML-Code würde mich aber auch interessieren
Hallöle und ich glaube du meinst den rechten Teil des Screenshots. Der Ursprungscode dieser Seite kam auch mal von Seven of Nine und ist hier im Forum zu finden.
Allerdings habe ich den Script mittlerweile etwas erweitert, um mehr Infos auf einem Blick zu haben.
Für die "Relays" setz ich den erweiterten Code hier nochmal rein (enthält jetzt nur nicht die externe CSS-Datei),
die "Lights" muss ich ihn erst öffentlich schick machen und die "Inputs" lohnt es kaum, funkt nur für den i3 (alle anderen behalten den Wert ja nur 5 Sekunden).
Um das für die Gen.2-Geäte so schick zu bekommen, ist langfristig mit Websockets völlig neu zu schreiben.
<html><head><title id="Tabs">meine Shellys verwalten</title><!-- Versions-Monitor: sv 1.13.0.2023.06.10 --><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="pragma" content="no-cache"><link rel="stylesheet" href="mihm.css" type="text/css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous" /><script>
function ToggleShelly(type, id, ip) {
fetch('http://' + ip +'/'+ type +'/' + id + '?turn=toggle')
.then()
.catch(err => alert('Toggle failed'));
}
function loadData() {
let Dauer = 7;
let millis = Dauer * 1000;
setInterval(
function() {
let T1 = 0;
let hoch = "";
let L1 = 0;
let L2 = 0;
$("div[data-ip]").each(function(){
var ip = $(this).data('ip');
var name = $(this).data('name');
var linkname = "<a href='http://" + ip + "/' target='new'>" + $(this).data('name') + "</a>";
var power = $(this).data('consumption');
var shellytype = $(this).data('type');
var temptype = $(this).data('temperatur');
var relayindex = $(this).data('relayindex');
var id = $(this).attr('id');
let content = "";
fetch('http://' + ip +'/status')
.then(response => response.json())
.then(function(data) {
if(temptype === "ext_temperature[0]"){
T1 = data.ext_temperature[0].tC;
hoch = "(²)";
} else if(temptype === "tmp"){
T1 = data.tmp.tC;
hoch = "(³)";
} else {
T1 = "";
hoch = "";
}
let Spannung = data.voltage;
let FWN = data.update.new_version;
let FWO = data.update.old_version;
let NFW = "";
if(FWN === FWO){
FWN = "";
NFW = "";
} else {
NFW = "<span style='color:#ff0' title='Gerät nicht mit Internet verbunden oder neue Firmware vorhanden: " + FWN + "'>>O<</span>";
FWN = FWN + "<br>neue Firmware vorhanden";
}
content += "<div>" + linkname + NFW +"</div>";
if(data.relays[relayindex].ison === true)
if(id == 1)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #00ff00;" class="relay relay-off mdi mdi-power-socket-de"></i></div>';
else
if(id == 2)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #00ff00;" class="relay relay-off mdi mdi-power-socket-de"></i></div>';
else
if(id == 3)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #ffff00;" class="relay relay-off mdi mdi-motion-sensor"></i></div>';
else
if(id == 5)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #000fff;" class="relay relay-off mdi mdi-fan"></i></div>';
else
if(id == 7)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #990000;" class="relay relay-off mdi mdi-coffee-maker"></i></div>';
else
if(id == 9)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #ff0000;" class="relay relay-off mdi mdi-gesture-tap"></i></div>';
else
if(id == 10)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #000fff;" class="relay relay-off mdi mdi-bluetooth"></i></div>';
else
if(id == 11)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #ffff00;" class="relay relay-off mdi mdi-white-balance-sunny"></i></div>';
else
if(id == 12)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #00ffff;" class="relay relay-off mdi mdi-coolant-temperature"></i></div>';
else
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\', '+ relayindex + ' ,\'' + ip + '\');"><i style="color: #ffff00;" class="relay relay-off mdi mdi-lightbulb-on-outline"></i></div>';
else
if(id == 1)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i class="relay relay-off mdi mdi-power-socket-de"></i></div>';
else
if(id == 2)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i class="relay relay-off mdi mdi-power-socket-de"></i></div>';
else
if(id == 3)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i style="color: #aaaaaa;" class="relay relay-off mdi mdi-motion-sensor-off"></i></div>';
else
if(id == 5)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i class="relay relay-off mdi mdi-fan-off"></i></div>';
else
if(id == 7)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i class="relay relay-off mdi mdi-coffee-maker"></i></div>';
else
if(id == 9)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i class="relay relay-off mdi mdi-gesture-tap"></i></div>';
else
if(id == 10)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i class="relay relay-off mdi mdi-bluetooth"></i></div>';
else
if(id == 11)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i style="color: #aaaaaa;" class="relay relay-off mdi mdi-white-balance-sunny"></i></div>';
else
if(id == 12)
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i class="relay relay-off mdi mdi-coolant-temperature"></i></div>';
else
content += '<div style="width:100%; text-align: center;" onclick="ToggleShelly(\'' + shellytype + '\',' + relayindex + ',\'' + ip + '\');"><i class="relay relay-off mdi mdi-lightbulb-outline"></i></div>';
if(typeof data.meters[relayindex].power !== 'undefined')
L1 = data.meters[relayindex].power;
L2 += L1;
L3 = L2.toFixed(2);
L4 = L2.toFixed(0);
if (data.relays[relayindex].timer_remaining === 0) {
var SEK = "";
} else {
var SEK = "<span title=\"in Sekunden An oder Aus\">" + data.relays[relayindex].timer_remaining + " sek.</span>";
};
content += "<div style=\"text-align: center; padding-top: 1px; \">";
if (data.meters[relayindex].power > 0)
content += "<small>" + data.meters[relayindex].power + " Watt<br>" + T1 + " °C " + hoch + "<br>" + SEK + "</small>";
else
if (data.relays[relayindex].overpower !== false)
content += "<b><small style=\"color: #00ffff;\" title=\"kein PowerMetering\">-</small></b><br><small>" + T1 + " °C " + hoch + "<br>" + SEK + "</small>";
else
content += "<b><small style=\"color: #00ff00;\" title=\"keine Leistungsabnahme\">•</small></b><br><small>" + T1 + " °C " + hoch + "</small>";
content += "</div>";
$('#' + id ).html(content);
document.getElementById("Alles").innerHTML = "<b style=\"text-align: center; color: #0f0;\">" + L3 + " </b>";
document.getElementById("Tabs").innerHTML = "meine Shellys: " + L4 + " Watt";
document.getElementById("wieoft").innerHTML = Dauer;
document.getElementById("Spannend").innerHTML = Spannung;
// document.getElementById("ggfFW").innerHTML = FWN;
})
});
}, millis
)
}
</script><script>
'use strict';
(function () {
function uhrzeit() {
var jetzt = new Date(),
h = jetzt.getHours(),
m = jetzt.getMinutes(),
s = jetzt.getSeconds(),
j = jetzt.getFullYear(),
o = jetzt.getMonth()+1,
t = jetzt.getDate(),
d = jetzt.getDay(),
n = jetzt.getMonth();
if(d === 0){d = "Sonntag";
} else if(d === 1){d = "Montag";
} else if(d === 2){d = "Dienstag";
} else if(d === 3){d = "Mittwoch";
} else if(d === 4){d = "Donnerstag";
} else if(d === 5){d = "Freitag";
} else if(d === 6){d = "Samstag";
} else {d = "Sonnabend";}
if(n === 0){n = "Januar";
} else if(n === 1){n = "Februar";
} else if(n === 2){n = "März";
} else if(n === 3){n = "April";
} else if(n === 4){n = "Mai";
} else if(n === 5){n = "Juni";
} else if(n === 6){n = "Juli";
} else if(n === 7){n = "August";
} else if(n === 8){n = "September";
} else if(n === 9){n = "Oktober";
} else if(n === 10){n = "November";
} else if(n === 11){n = "Dezember";
} else {n = "Schaltmonat";}
h = fuehrendeNull(h);
m = fuehrendeNull(m);
s = fuehrendeNull(s);
o = fuehrendeNull(o);
t = fuehrendeNull(t);
document.getElementById('uhr')
.innerHTML = h + ':' + m + ':' + s + '<br><span id="ble" style="text-align:center;color:#00f0ff">• • •</span><br>' + d + '<br>' + t + '.' + o + '.' + j + '<br>' + n;
setTimeout(uhrzeit, 500);
}
function fuehrendeNull(zahl) {
zahl = (zahl < 10 ? '0' : '') + zahl;
return zahl;
}
document.addEventListener('DOMContentLoaded', uhrzeit);
}());
</script></head><body scroll="auto">
<table><tr>
<td><div class="room"><h4>Bad</h4><div id="1" data-consumption="true" data-type="relay" data-temperatur="tmp" data-relayindex="0" data-name="WM" data-ip="192.168.178.24"></div></div></td>
<td><div class="room"><h4>AZ</h4><div id="2" data-consumption="true" data-type="relay" data-temperatur="tmp" data-relayindex="0" data-name="Teststation" data-ip="192.168.178.25"></div></div></td>
<td><div class="room"><h4>Flur</h4><div id="3" data-consumption="true" data-type="relay" data-temperatur="ext_temperature[0]" data-relayindex="0" data-name="Motion" data-ip="192.168.178.55"></div></div></td>
<td><div class="room"><h4>Jetzt</h4><div id="uhr" class="uhr" style="text-align:center;"></div></div></td>
</tr><tr>
<td><div class="room"><h4>SZ</h4><div id="5" data-consumption="true" data-type="relay" data-temperatur="tmp" data-relayindex="0" data-name="Lüfter" data-ip="192.168.178.52"></div></div></td>
<td><div class="room"><h4>SZ</h4><div id="6" data-consumption="true" data-type="relay" data-temperatur="tmp" data-relayindex="1" data-name="Licht" data-ip="192.168.178.52"></div></div></td>
<td><div class="room"><h4>Küche</h4><div id="7" data-consumption="true" data-type="relay" data-temperatur="tmp" data-relayindex="1" data-name="Kaffee" data-ip="192.168.178.53"></div></div></td>
<td><div class="room"><h4>Küche</h4><div id="8" data-consumption="true" data-type="relay" data-temperatur="tmp" data-relayindex="0" data-name="Spüle" data-ip="192.168.178.53"></div></div></td>
</tr><tr>
<td><div class="room"><h4>WZ</h4><div id="9" data-consumption="true" data-type="relay" data-temperatur="tmp" data-relayindex="0" data-name="Router" data-ip="192.168.178.98"></div></div></td>
<td><div class="room"><h4>Flur</h4><div id="10" data-consumption="true" data-type="relay" data-temperatur="tmp" data-relayindex="0" data-name="BTScanner" data-ip="192.168.178.97"></div></div></td>
<td><div class="room"><h4>Sensoren</h4><div id="11" data-consumption="true" data-type="relay" data-temperatur="ext_temperature[0]" data-relayindex="0" data-name="Licht" data-ip="192.168.178.75"></div></div></td>
<td><div class="room"><h4>Sensoren</h4><div id="12" data-consumption="true" data-type="relay" data-temperatur="ext_temperature[0]" data-relayindex="0" data-name="H & T & S" data-ip="192.168.178.66"></div></div></td>
</tr><tr>
<td colspan="4"><div class="room"><fieldset><legend>Daten werden nach <span id="wieoft"></span> Sekunden aktualisiert.</legend>
<big style="color:#00ff00">• </big><small style="color:#ffff00">keine LeistungsAbnahme</small>
<big style="color:#00ffff">- </big><small style="color:#00ffff">keine LeistungsMessung</small><br>
<small>Temperatur <big>² </big> von Addon, <big>³ </big> vom RelaisChip</small><br>
<div style="width:100%; text-align:center;"><table style="width:100%; text-align:center;"><tr><td style="width:50%; text-align:right;"><big id="Alles" style="color:#0f0"></big></td><td style="width:50%; text-align:left;"><b><big style="color:#0f0">Watt</big></b></td>
</tr><tr><td style="width:50%; text-align:right;"><big id="Spannend" style="color:#00f"></big></td><td style="width:50%; text-align:left;"><b><big style="color:#00f">Volt</big></b></td>
<!-- /tr><tr><td style="width:100%; text-align:center;" colspan="2"><small id="ggfFW" style="color:#ff0"></small></td -->
</tr></table></div>
</fieldset></div></td></tr></table>
<script>
$( document ).ready(function() {
loadData();
})
</script></body></html>
Alles anzeigen
Nun der komplette Script:
/**
* Adaptation for spot light colors in the bathroom i4 button button 3 with triple click.
* If you press the button with a triple click, the following happens:
* The other spot(s) adopt the colors and brightness of the main light
*/
// CONFIG
let ip = "192.168.178.100"; // Master-LED Shelly BulbRGBW
let ip1 = "192.168.178.101"; // Anzupassende LEDs
let ip2 = "192.168.178.102";
let ip3 = "192.168.178.103";
let ip4 = "192.168.178.104";
let input = 2;
let btnevent = "triple_push";
// ENDCONFIG
Shelly.addEventHandler(
function (event, user_data) {
//print(JSON.stringify(event));
if (typeof event.info.event !== "undefined") {
if (event.info.id === input && event.info.event === btnevent) {
getCurrentState(ip);
} else {
return true;
}
} else {
return true;
}
},
);
function getCurrentState(ip) {
Shelly.call("HTTP.GET", {url: 'http://' + ip + '/light/0'}, function(result) {
let data = JSON.parse(result.body);
let MLED = [ data.ison, data.timer_duration, data.mode, data.red, data.green, data.blue, data.white, data.gain, data.temp, data.brightness, data.effect, data.transition ];
let MIson = MLED[0]; //alle Shelly-Leuchtmittel
let MTimer = MLED[1]; //alle Shelly-Leuchtmittel
let MBrightness = MLED[9]; //alle Shelly-Leuchtmittel
let MTransition = MLED[11]; //alle Shelly-Leuchtmittel
let MMode = MLED[2]; //nur in Color-Leuchtmittel
let MRed = MLED[3]; //nur in Color-Leuchtmittel
let MGreen = MLED[4]; //nur in Color-Leuchtmittel
let MBlue = MLED[5]; //nur in Color-Leuchtmittel
let MGain = MLED[7]; //nur in Color-Leuchtmittel
let MEffect = MLED[10]; //nur in Color-Leuchtmittel
let MWhite = MLED[6]; //nicht in Vintage
let MTemp = MLED[8]; //nicht in Vintage
let command = "red=" + MRed + "&green=" + MGreen + "&blue=" + MBlue + "&white=" + MWhite + "&gain=" + MGain + "&temp=" + MTemp + "&brightness=" + MBrightness + "&transition=" + MTransition;
// let command = "red=" + MLED[3] + "&green=" + MLED[4] + "&blue=" + MLED[5] + "&white=" + MLED[6] + "&gain=" + MLED[7] + "&temp=" + MLED[8] + "&brightness=" + MLED[9] + "&transition=" + MLED[11];
});
FarbAnpassung(ip1, command);
FarbAnpassung(ip2, command);
FarbAnpassung(ip3, command);
FarbAnpassung(ip4, command);
});
};
function FarbAnpassung(ip1, command){
Shelly.call("http.get", {url: 'http://' + ip1 + '/light/0?' + command});
};
function FarbAnpassung(ip2, command){
Shelly.call("http.get", {url: 'http://' + ip2 + '/light/0?' + command});
};
function FarbAnpassung(ip3, command){
Shelly.call("http.get", {url: 'http://' + ip3 + '/light/0?' + command});
};
function FarbAnpassung(ip4, command){
Shelly.call("http.get", {url: 'http://' + ip4 + '/light/0?' + command});
};
Alles anzeigen
Nun kann ich endlich zum Rasieren rundum mit einem einem Licht beleuchtet werden und muss mir von Alexa nicht mehr erleuchtend sagen lassen, was bei der Rasur passiert, statt zu schalten, was in der Routine steht
Mahlzeit und ich habe es gefunden:,
es klappt nicht mit "ip/status" sondern mit "ip/light/0" werden die Daten eingelesen
Welcher Befehl wird für Gen.1-Bulb benötigt, um die Daten in den Array von einer Master-LED zu bekommen?
Durch einen Dreifachklick im i4 sollen diese Array-Daten dann an andere LED weitergegeben werden können.
Hat wer eine Idee?
Also die Abfrage im i4 und die Weiterleitung an andere LEDs ist mir bekannt, nur nicht der sichere Datenabruf aus der 1.LED.
Beste Grüße ins Wochenende und der Code, an dem ich stecken bleibe:
Shelly.call("HTTP.GET", {url: 'http://MasterBulbIP/status'}, function (result) {
let data = JSON.parse(result.body); // Dies klappt einfach nicht :(
console.log(data);
let MasterLED = [ data.ison, data.timer_duration, data.mode, data.red, data.green, data.blue, data.white, data.gain, data.temp, data.brightness, data.effect, data.transition ];
console.log(MasterLED); // Alles undefiniert :(
});
Hab auch zwischen L und SW schon mal ne Brücke dran gehalten... ohne Erfolg
Ich übersetz dir mal den Detachedmode