Lokale Webseite für Shelly-Leuchtmittel (und i3)

ThomasHRO

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,

® = 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):

HTML

<!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&auml;teWebseite &ouml;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 = '&#10;Klick f&uuml;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&auml;hliche Ver&auml;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&uuml;r Color- oder WeissModus\" class=\"schalter\" onclick=\"BulbModus(\'" + ip + "\', \'white\');\">&#169;</nobr><nobr class=\"schalter\" onclick=\"EffekteSchalten(\'" + ip + "\');\">" + LichtShow + "&nbsp;</nobr><nobr title=\"Klick f&uuml;r eingestellte Dimmstufen\" class=\"schalter\" onclick=\"BulbDimmen(\'" + ip + "\', \'" + woc + "\');\">" + Dimmer + "&nbsp;</nobr></big>";
    var ColorChange = "<div title=\"Klick f&uuml;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&uuml;r Color- oder WeissModus\" class=\"schalter\" onclick=\"BulbModus(\'" + ip + "\', \'color\');\">&#169;&nbsp;</nobr><nobr title=\"Klick f&uuml;r eingestellte Dimmstufen\" class=\"schalter\" onclick=\"BulbDimmen(\'" + ip + "\', \'" + woc + "\');\">" + Dimmer + "&nbsp;</nobr></big>";
        } else {
        var ColorModus = "<big><nobr title=\"Klick f&uuml;r eingestellte Dimmstufen\" class=\"schalter\" onclick=\"BulbDimmen(\'" + ip + "\', \'" + woc + "\');\">" + Dimmer + "&nbsp;</nobr></big>";
        };
    if(data.lights[relayindex].temp >2699){
    var ColorChange = "<div title=\"Klick f&uuml;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 &#10;&#10; neue Firmware vorhanden: " + FWN + "&#10;Klick f&uuml;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 + ");\">&nbsp;" + data.meters[relayindex].power + "W " + Helligkeit + "%&nbsp;</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\">&#149;</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&uuml;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&uuml;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

pasted-from-clipboard.png

i3 Code:

HTML

<!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&uuml;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&uuml;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&uuml;roRollo'>Rollo Auf";    // SinglePush
let i322 = "<a href='http://192.168.178.78/roller/0?go=to_pos&roller_pos=70' title='B&uuml;roRollo'>Rollo 70% Auf";    // DoublePush
let i323 = "<a href='http://192.168.178.78/roller/0?go=to_pos&roller_pos=50' title='B&uuml;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&uuml;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&auml;t &Ouml;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 &#10;&#10; neue Firmware vorhanden: " + FWN + "&#10;Klick f&uuml;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'>&nbsp;" + Zeit + "</small>";
    }
    if(relayindex === 2){
    Temperatur = "<small style='color:#f0f' title='Chiptemperatur'>&nbsp;" + 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 = "&#149;<br>SinglePush";
        } else if(letztertastendruck === "SS"){lastsequence = "&#149; &#149;<br>DoublePush";
        } else if(letztertastendruck === "SSS"){lastsequence = "&#149; &#149; &#149;<br>TriplePush";
        } else if(letztertastendruck === "SL"){    lastsequence = "&#149; <b style='color:#00ff00;'>|</b><br>Single& LongPush";
        } else if(letztertastendruck === "LS"){    lastsequence = "<b style='color:#00ff00;'>|</b> &#149;<br>Long& SinglePush";
        } else if(letztertastendruck === "L"){lastsequence = "<b style='color:#00ff00;'>|</b><br>LongPush";
        } else if(letztertastendruck === ""){lastsequence = "nichts gedr&uuml;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 = "&#149;<br>SinglePush";
        } else if(letztertastendruck === "SS"){lastsequence = "&#149; &#149;<br>DoublePush";
        } else if(letztertastendruck === "SSS"){lastsequence = "&#149; &#149; &#149;<br>TriplePush";
        } else if(letztertastendruck === "SL"){    lastsequence = "&#149; <b style='color:#00ff00;'>|</b><br>Single& LongPush";
        } else if(letztertastendruck === "LS"){    lastsequence = "<b style='color:#00ff00;'>|</b> &#149;<br>Long& SinglePush";
        } else if(letztertastendruck === "L"){lastsequence = "<b style='color:#00ff00;'>|</b><br>LongPush";
        } else if(letztertastendruck === ""){lastsequence = "nichts gedr&uuml;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&auml;hler: ' + data.inputs[relayindex].event_cnt + '" style="color:#00ff00;">' + data.inputs[relayindex].event + '&nbsp;' +  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&uuml;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

ThomasHRO

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

pasted-from-clipboard.png

Neuere Aktualisierungen des Script-Code künftig nur noch auf der Githubseite:

https://github.com/ThellyHRO/local-Website

ThomasHRO

Der Vollständigkeit halber noch die Roller-Version mit 2.5er-Shelly für eigene lokale Webseite.

pasted-from-clipboard.png

Alles entstanden aus der alten Vorlage von https://github.com/shelly-tools/shelly-cors-examples

HTML

<!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 = "&Ouml;ffnen";
    }
    if(FWN === FWO){
    FWN = "";
    NFW = "";
    } else {
    NFW = "<span style='color:#ff0' title='Ger&auml;t nicht mit Internet verbunden oder &#10;&#10; neue Firmware vorhanden: " + FWN + "&#10;Klick f&uuml;r Update, nur wenn NEUE Version in der Info angezeigt wird'><a href='http://" + ip + "/ota?update=1' target='schalter'>&nbsp;<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&ouml;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&ouml;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\">&#149;</small></b><br><small>" + T1 + "</small>";
        content += "<legend style='text-align:center;'>" + nachOben + "<span title='Klick für n&auml;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&uuml;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">&#149; </big><small style="color:#ffff00">keine LeistungsAbnahme</small> &#149; <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

Lokale Webseite für Shelly-Leuchtmittel (und i3)

Ähnliche Themen

Shelly4ProPM - Status der Relais via Websocket anzeigen

Shelly 4PM - Cloud connected aber in Cloud "Gerät ist offline"

Shelly per URL von ausserhalb starten

IFTTT wird nicht ausgelöst