Hausautomatisierung mit HTML

[hardy63]

Moin,
vor einiger Zeit habe ich angefangen, meine Wohnung etwas zu automatisieren, sprich: zentral Licht aus, Fensterüberwachung usw.
Nun möchte ich einiges über einen Webserver ( welcher in meiner Steuerung integriert ist ) von "außen" erledigen bzw. abfragen.
Anfangen will ich mit dem Schalten von Licht. Also hab ich mir dazu einen Code gesucht, der erstmal den Slider darstellt und auch schon per Klick schaltet.( siehe https://proto.io/freebies/onoff/ )

Aufrufen kann ich den Slider mit:

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
    </label>
    </div>

welcher dann über eine css diesen darstellt.
So weit ist mit alles klar. Aber nun kommt ja der eigentliche Sinn des Schalters ins Spiel.
Aus der Steuerung kann ich einen Var.wert anzeigen lassen ( swich_value:="<Name>" )  bzw. schreiben (<!-- AWP_In_Variable Name ='"<Switch_Change>"' --> ) Dazu aktualisiert sich die Seite in angemessenen Intervallen.
Nun muss ich den Switch entsprechend des gelesenen Wertes positionieren und wenn ich diesen betätiges, muss ein entsprechender Wert an die Steuerung gesendet werden - kann mir da jemand auf die Sprünge helfen?

Vielen Dank.
Gruß
Hardy

[hotti]

hi,

Nun muss ich den Switch entsprechend des gelesenen Wertes positionieren und wenn ich diesen betätiges, muss ein entsprechender Wert an die Steuerung gesendet werden - kann mir da jemand auf die Sprünge helfen?

Für Bastler: FHEM

(Chaotischer Perl-Code aber gute Idee)

MfG

[ralphi]

Hi Hardy,

vor einiger Zeit habe ich angefangen, meine Wohnung etwas zu automatisieren, sprich: zentral Licht aus, Fensterüberwachung usw.

endlich jemand, der auch was in der Richtung macht – bzw. darüber schreibt :-)

Ich weiß jetzt nur nicht, was du wissen willst.

• Was für ein Hardware-Konzept am besten ist?
• Wie du das mit DB, (Web-)App, Serverroutinen lösen willst?
• Ob du nur eine JS- Frage bezüglich checkboxen hast?
• Ob du nicht weißt, wie du den Wert an PHP übergibst?

Raspi, Banana, 1wire, RFM12b und Co. sind bei der Hausautomatisierung, momentan der Renner ;-)

Viele Grüße aus LA

[hardy63]

Hi Ralphi,

da ich aus der Automatisierungs-Ecke komme, mach ich das alles mit einer S7-1200.
In dem Teil ist ein Webserver integriert und man baut auf bewährtem auf :-)

Also - meine Frage bezieht sich auf den eigentlichen Code in html bzw. css.
Ich will die Oberfläche meines Servers etwas aufpeppen und möchte Slider-Switches ala iOS verwenden. Dabei bin ich auf einen Standalone-Code gestoßen, da die SPS begrenzten Speicher hat und keine großen online-scripte laden will.
Die eigentliche Frage ist, wie sich der Slider entsprechend einer eingelesenen Variable schaltet (auslesen der aktuellen Schaltzustände ) und bei Betätigung des Sliders dies in die S7-1200 zurückgeschrieben werden kann.
Ich hoffe, dass ich mich verständlich genug ausdrücke?!
Schön wäre natürlich ein Beispiel-Code.

Gruß
Hardy

[ralphi]

Hi Hardy,

Die eigentliche Frage ist, wie sich der Slider entsprechend einer eingelesenen Variable schaltet (auslesen der aktuellen Schaltzustände ) und bei Betätigung des Sliders dies in die S7-1200 zurückgeschrieben werden kann.

ich nutze gerne  JQuery :-)
mit
$('#myonoffswitch').prop('checked', false); // false = aus
kannste den Slider schalten.

Beispiel:

<script src="js/jquery-1.11.1.min.js"></script>  
<script>  
$(function(){  
    // status check  
    $("#button1").click(function(){  
        if ( $('#myonoffswitch').is(':checked') == true) {  
            alert ("ist ON");  
        }else{  
            alert ("ist OFF");  
        }  
    });  
  
    // anschalten  
    $("#button2").click(function(){  
        $('#myonoffswitch').prop('checked', true);  
        //alert ("jetzt ist er ON");  
    });  
    // und aus  
    $("#button3").click(function(){  
        $('#myonoffswitch').prop('checked', false);  
        //alert ("jetzt ist er AUS");  
    });  
  
  
});  
</script>

<body>  
<div class="onoffswitch">  
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>  
    <label class="onoffswitch-label" for="myonoffswitch">  
        <span class="onoffswitch-inner"></span>  
        <span class="onoffswitch-switch"></span>  
    </label>  
</div>  
<button id="button1">kucken</button>  
<button id="button2">anschalten</button>  
<button id="button3">ausschalten</button>  
  
</body>

SPS ist schon lange her. Gibt's da mittlerweile günstige (Klein)Systeme für kleines Geld zum üben für zuhause?

Viele Grüße aus LA