Webseite zur Simulation der i4-Tastimpulse

ThomasHRO

Auf der Webseite benötigt der Tastendruck kein doppelten, dreifachen oder langen Druck.
Der i4 benötigt die Firmware 1.3.0 und vermutlich auch spätere.
Anzupassen ist nur die feste IP des i4 in der 3.Zeile und ggf. Überschriften in den H4-Tags.

HTML

<!DOCTYPE html><html><head><title>i4 Taster simuieren</title><!-- Versions-Monitor: sv 1.3.0.2024.04.28 --><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous" /><script>
let ip = '192.168.178.222'; // IP des i4
function ToggleShelly(ip, id, event) {
   fetch('http://' + ip + '/rpc/input.trigger?id=' + id + '&event_type=' + event , {mode : 'no-cors'})
   .then()
   .catch(err => alert('Befehl ' + event + ' der Taste ' + id + ' konnte nicht ausgeführt werden'));
if(event === "single_push"){lastsequence = "&#149;<br>SinglePush";
} else if(event === "double_push"){lastsequence =  "&#149; &#149;<br>DoublePush";
} else if(event === "triple_push"){lastsequence = "&#149; &#149; &#149;<br>TriplePush";
} else if(event === "long_push"){lastsequence = "<i><big>&#151;</big></i><br>LongPush";
} else {lastsequence = "";}
document.getElementById(id).innerHTML = lastsequence;
 return;
}
let event1 = "single_push";
let event2 = "double_push";
let event3 = "triple_push";
let event4 = "long_push";
</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: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;}
h4{margin:0;margin-bottom:3px;text-align:center;background-image: linear-gradient(to left, violet, cornflowerblue, lightblue, lime, yellow, orange, red); -webkit-background-clip: text; color: transparent;}
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></head><body scroll="auto">
<fieldset style="width:100%;"><legend class="room"><h4>Schlafzimmer Cu</h4></legend>
<table><tr>
<td style="width:50%; text-align: center;"><div style="width:100%;" class="room"><h4 id="0">Taste 1</h4></div>
<span onclick="ToggleShelly(ip, 0, event1);"><i style="color:#00ffff;" class="relay relay-off mdi mdi-gesture-tap"></i></span><br>
<span onclick="ToggleShelly(ip, 0, event2);"><i style="color:#00ffff;" class="relay relay-off mdi mdi-gesture-double-tap"></i></span><br>
<span onclick="ToggleShelly(ip, 0, event3);"><i style="color:#00ffff;" class="relay relay-off mdi mdi-chevron-triple-down"></i></span><!-- mdi-layers-triple --><br>
<span onclick="ToggleShelly(ip, 0, event4);"><i style="color:#00ffff;" class="relay relay-off mdi mdi-gesture-tap-hold"></i></span>
</td>
<td style="width:50%; text-align: center;"><div style="width:100%;" class="room"><h4 id="1">Taste 2</h4></div>
<span onclick="ToggleShelly(ip, 1, event1);"><i style="color:#0000ff;" class="relay relay-off mdi mdi-gesture-tap"></i></span><br>
<span onclick="ToggleShelly(ip, 1, event2);"><i style="color:#0000ff;" class="relay relay-off mdi mdi-gesture-double-tap"></i></span><br>
<span onclick="ToggleShelly(ip, 1, event3);"><i style="color:#0000ff;" class="relay relay-off mdi mdi-chevron-triple-down"></i></span><!-- mdi-layers-triple --><br>
<span onclick="ToggleShelly(ip, 1, event4);"><i style="color:#0000ff;" class="relay relay-off mdi mdi-gesture-tap-hold"></i></span></div>
</td>
</tr><tr>
<td style="width:50%; text-align: center;"><div style="width:100%;" class="room"><h4 id="2">Taste 3</h4></div>
<span onclick="ToggleShelly(ip, 2, event1);"><i style="color:#ffff00;" class="relay relay-off mdi mdi-gesture-tap"></i></span><br>
<span onclick="ToggleShelly(ip, 2, event2);"><i style="color:#ffff00;" class="relay relay-off mdi mdi-gesture-double-tap"></i></span><br>
<span onclick="ToggleShelly(ip, 2, event3);"><i style="color:#ffff00;" class="relay relay-off mdi mdi-chevron-triple-down"></i></span><!-- mdi-layers-triple --><br>
<span onclick="ToggleShelly(ip, 2, event4);"><i style="color:#ffff00;" class="relay relay-off mdi mdi-gesture-tap-hold"></i></span></div>
</td>
<td style="width:50%; text-align: center;"><div style="width:100%;" class="room"><h4 id="3">Taste 4</h4></div>
<span onclick="ToggleShelly(ip, 3, event1);"><i style="color:#00ff00;" class="relay relay-off mdi mdi-gesture-tap"></i></span><br>
<span onclick="ToggleShelly(ip, 3, event2);"><i style="color:#00ff00;" class="relay relay-off mdi mdi-gesture-double-tap"></i></span><br>
<span onclick="ToggleShelly(ip, 3, event3);"><i style="color:#00ff00;" class="relay relay-off mdi mdi-chevron-triple-down"></i></span><!-- mdi-layers-triple --><br>
<span onclick="ToggleShelly(ip, 3, event4);"><i style="color:#00ff00;" class="relay relay-off mdi mdi-gesture-tap-hold"></i></span></div>
</td>
</tr><tr>
<td colspan="2"><div class="room"><fieldset><legend>Symbole f&uuml;r</legend>
<span title="Device-WebUI" onclick="window.open('http://' + ip);"><i style="color:#ff0000;" class="relay relay-off mdi mdi-gesture-tap"></i></span>einfach-
<span title="Device-Status" onclick="window.open('http://' + ip + '/rpc/Shelly.GetStatus');"><i style="color:#ff0000;" class="relay relay-off mdi mdi-gesture-double-tap"></i></span>doppelt-<br>
<span title="Knowledge-Base" onclick="window.open('https://kb.shelly.cloud/knowledge-base/shelly-plus-i4');"><i style="color:#ff0000;" class="relay relay-off mdi mdi-chevron-triple-down"></i></span>dreifach-
<span title="API-Docs" onclick="window.open('https://shelly-api-docs.shelly.cloud/gen2/Devices/Gen2/ShellyPlusI4');"><i style="color:#ff0000;" class="relay relay-off mdi mdi-gesture-tap-hold"></i></span>lang Tasten
</fieldset></div></td></tr></table></fieldset>
</body></html>

Alles anzeigen

ThomasHRO

Um die etwas abgespeckte Seite im Plus-Gerät aufzuräumen den Script von hier kopieren: https://github.com/ThellyHRO/loca…in/i4-Button.js

Die IP des i4 anpassen, im Gerät speichern und in beliebigen Browser aufrufen::

http://<Device-IP>/script/<Script-ID>/i4trigger

Webseite zur Simulation der i4-Tastimpulse

Ähnliche Themen

Kombinierte Zeit-/Bewegungssteuerung

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

Shellys offline oder doch online??

Shelly Plus Smoke bestellt, bezahlt - aber keine Lieferung!

Webseite zur Konfiguration wird nicht angezeigt

Bräuchte mal Hilfe zur Shelly Cloud Webseite