HTML-Übersicht für Sonoffs

  • WOW - Das wird immer BESSER - TOLL !! Jetzt wünsch ich mir noch ein KOMPLETT-TUTORIAL für Anfänger - für einen neuen Sonoff BASIC vom Flashen welche Software bis zur fertigen Installation auf nem WIN 10 Rechner und Tablet - Das wäre Grande !! :thumbup::thumbup::thumbup::thumbup:

    *lach .... ja das wäre toll.


    hexhex !!


    Wie Athen2004 sagt da muss man sich schon ein wenig einarbeiten. Die Anleitungen gibt's maßenhaft im Netz.


    bsp. Flashen in deutsch:

    https://www.heise.de/make/arti…8266-flashen-3042776.html


    Und dann bissl HTML/CCS:

    https://wiki.selfhtml.org/

    Tasmota 6.5.0 - Arduino-IDE - 1.8.7

    Sonoff-Basic / Sonoff-RF / Sonoff-Touch / PowStro / HomeMagic / Sonoff-RF-Bridge mit diversen 433MHz RF Sender/Empfänger

    Sensoren: BME280/BMP280/HC-SR501

    mosquitto/bash/html/cgi auf RPI 2B+/Sprachsteuerung via IFTTT/2xGoogle-Home-Mini

  • So, neue Version ist fertig.


    die Buttons sind jetzt unter dem iFrame und die Buttons und die Überschrift sind jetzt mit im Rahmen für ein "runderes" Erscheinungsbild.



    Geräteübersicht 1.8.txt


    Bitte Feedback und weitere Wünsche.

    FritzBox 6490, 4 Echo-Dots (2.Gen), 1 Raspi 3B, 1 Fire-TV-Stick, 3 Comet-DECT-Thermostate, 3 AVM Funktsteckdosen, 6 Sonoff S20, 3 Sonoff 4ch, 1 Sonoff Dual, 3 Sonoff Basic, 2 Amazon Dash-Buttons, 2 Aqara Wandtaster

  • Ich überlege, die ganzen Styles in 2 extra Datein auszulagern...

    eine für die normalen Einstellungen fürs Aussehen (Farben, Rahmen, Abstände...)

    und eine extra für die Anpassungen für die verwendeten Geräte (Größe der iFrames)


    dann bräuchte man die bei Aktualisierungen nicht immer wieder neu eintragen.


    Nachteil, es wäre dann nicht mehr nur eine einfache Datei sondern 3, also man hätte dann einen Ordner wo alles drin ist.


    Bisher hab ich mich noch davor gescheut, weil eine einzelne Datei so einfach zu handhaben ist...


    Was haltet ihr vor der Idee?

    FritzBox 6490, 4 Echo-Dots (2.Gen), 1 Raspi 3B, 1 Fire-TV-Stick, 3 Comet-DECT-Thermostate, 3 AVM Funktsteckdosen, 6 Sonoff S20, 3 Sonoff 4ch, 1 Sonoff Dual, 3 Sonoff Basic, 2 Amazon Dash-Buttons, 2 Aqara Wandtaster

  • einzelne Datei hat den Vorteil, das man diese sich schnell irgendwo (Desktop) ablegen kann und sich bei Änderungen etwas intensiver mit dem Projekt auseinander setzt. Variante 3 Dateien ist halt schneller abzuändern. Am besten beide anbieten :)

  • Ich bin für die Aufteilung in 3 Dateien ...


    Wäre vermutlich Übersichtlicher als alles in einer Datei zu packen. Gerade bei Änderungen


    Und mir einer guten Dokumentation was in welcher geändert wird, ist das durchaus zumutbar.


    z.b.

    CSS Style in einer für das aussehen, und den HTML Teil für die Links und den Seitenaufbau in die andere.

    Zumindest die CSS Definitionen würde ich auslagern.

    Tasmota 6.5.0 - Arduino-IDE - 1.8.7

    Sonoff-Basic / Sonoff-RF / Sonoff-Touch / PowStro / HomeMagic / Sonoff-RF-Bridge mit diversen 433MHz RF Sender/Empfänger

    Sensoren: BME280/BMP280/HC-SR501

    mosquitto/bash/html/cgi auf RPI 2B+/Sprachsteuerung via IFTTT/2xGoogle-Home-Mini

  • Habs jetzt testweise mal auseinander genommen....


    Ist wesentlich übersichtlicher und auch für mich isses so auch leichter zu bearbeiten.


    (auch das Hochladen als zip-Datei ist einfacher :) )


    Geräteübersicht 1.8.zip

    FritzBox 6490, 4 Echo-Dots (2.Gen), 1 Raspi 3B, 1 Fire-TV-Stick, 3 Comet-DECT-Thermostate, 3 AVM Funktsteckdosen, 6 Sonoff S20, 3 Sonoff 4ch, 1 Sonoff Dual, 3 Sonoff Basic, 2 Amazon Dash-Buttons, 2 Aqara Wandtaster

  • Hallo Supermicha

    Hatte etwas Zeit zum Testen, läuft alle super und tendiere

    auch zur Variante,die Quelltextdaten auf mehrere Dateien

    aufzuteilen. Ich habe für Leute, die ShellyGeräte mit einbinden

    wollen den Quelltext dfür etwas angepasst zum testen.

    siehe hier und im Anhang(Datei 5.txt in 5.html umbenennen).


    <!-- Hier mal als Beispiel der Quellcode für Shellygeräte ,beim anklicken auf

    den unteren Text öffnet sich ein neues Browserfenster -->


    <div><a class="button" href="http://192.168.178.81" target="_blank">192.168.xxx.xx</a><br>

    <iframe src="http://192.168.178.81" scrolling="no" class="Basic"></iframe>

    <p class="action">

    <a class= "button"href="http://192.168.178.81"target="_blank">Shelly1 Text deiner Wahl </a>

    </p></div>


    klasse gemacht Supermicha :thumbup:

  • Supermicha Tolles Skript! Super Leistung! Gefällt mir sehr gut! :thumbup::thumbup::thumbup: Aufteilung auf mehrere Dateien ist genau richtig! Vorschlag: Vielleicht noch einen fixen Button für den Rücksprung auf die Home-Seite eines jeden Gerätes einbauen. Das geht sonst nur über den Zurück-Button des Browsers.

  • hallo Supermicha

    Habe schnell für Shelly1 ein Device erstellt.

    wer will einfach in devices.css mit einfügen.

    Beim Shelly scrolling auf yes stellen in der Html Datei um alle Menü zu erreichen.


    .Shelly1

    {

    width:370px;

    height:403px;

    padding-left:15px;

    padding-right:15px;

    padding-bottom:0px;

    }


    coole Sache hell/dunkel Modus besonders beim Handy oder Tablet