Shellys mit Javascript und HTML visualisieren

Andrea

Zitat von Seven of Nine

Exakt, mit ein paar Zeilen Javascript & HTML, völlig ohne serverbasierte Programmiersprachen lässt sich das JSON der Shelly-API abfragen und einbinden..
Damit lassen sich dann sehr einfach Visualisierungen bauen, die hier hab ich z.B. gerade auf meinem Desktop liegen..

Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben, diesen Inhalt zu sehen.
Ich werde die Tage mal ein paar Beispiele erstellen..

Bitte nicht vergessen.
Die Beispiele interessieren mich sehr !

Danke und Gruss

Seven of Nine

Zitat von Andrea

Bitte nicht vergessen.

keine Sorge, habs nicht vergessen.. möchte es aber auch nicht einfach so "hinwerfen" ohne Erläuterungen.. Sinn und Zweck soll sein, dass man es versteht und auch nachbauen kann..

Ich versuche es bis zum Wochenende..

Elliot

Hallo!

Die Beispiele interessieren mich auch sehr.

Die Frage ist für mich:

Wo veröffentlichst du die Beispiele, hier einfach im Threat oder gibt es eine andere Stelle, wo die Veröffentlichung stattfindet.

Mich interessieren erstmal nur die einfachen Grundlagen, den Rest bekommt man dann schon hin!

Bin gespannt.

Viele Grüße

Seven of Nine

Quelltexte veröffentliche ich meist auf Github, gebe aber hier Bescheid wenn ich etwas Sinnvolles fertig hab..

im aktuellen Zustand kann man lediglich das Relay0 eines Shelly (1,1pm, plug, plug-s..) schalten, aber z.b. nicht das zweite Relais eine Shelly 2.5 und auch noch keine Shellys vom Type Lampe (Dimmer, Vintage, Duo, RGBW2..)

wenn euch das trotzdem für einen ersten Blick reichen sollte kann ich es natürlich pushen, aber richtig gefallen tut es mir selbst nicht

Seven of Nine

so, hier habt ihr was zum spielen..

https://github.com/shelly-tools/shelly-cors-examples

einfach alle 3 Dateien in einen Ordner auf der lokalen Platte ablegen, ich hab die Javascript /CSS-Sachen bewusst ausgelagert damit die HTML-Datei möglich einfach und übersichtlich wird..

HTML

<div class="room">
    <h4>Kids Room</h4>
    <div id="4" data-consumption="true" data-type="relay" data-relayindex="0" data-name="ceiling light" data-ip="192.168.178.207"></div>
</div>

Kurze Erläuterung

- der äußere Container legt einen Raum/Etage an: [tt<div class="room"></div>[/tt]
- <h4> sorgt für die Überschrift.

- der innere Div-Container definiert den jeweiligen Shelly..

id= muss einen eindeutigen Wert enhalten (egal ob text oder zahl, aber keinesfalls doppelt belegen)

die Attribute mit data am Anfang:

- consumption true, wenn der Shelly den Stromverbrauch anzeigen soll (sofern er das kann)

- type -> relay oder light

- relayindex -> 0 bei einem Shelly1, 0 oder 1 bei einem Shelly 2.5 ..

- name -> der Name für das Licht / die steckdose..

- ip -> die IP-Adresse

Hoffe das reicht erstmal zum Gucken

Ganz wichtig : im Shelly muss CORS aktiviert sein:

Der Inhalt kann nicht angezeigt werden, da Sie keine Berechtigung haben, diesen Inhalt zu sehen.