Eigenes WebFront mit JS, CSS, PHP, HTML, MySql

Hallo zusammen,

bisher habe ich mit IPS nur einzelne „Bausteine“ gebaut und diese dann in Mediola als Webelement eingefügt.

Nun würde ich gerne komplett auf IPS umsteigen.

Ungerne möchte ich das IPS WebFront nutzen. Da Kenntnisse im Webdesign (PHP, MySql, HTML, CSS, Javascript, Photoshop usw.) vorhanden sind, möchte ich mir ein WebFront über den IPS-Webserver komplett selber bauen.

Grundsätzlich sollte das bauen kein Thema sein, da ich aber noch nicht so mega fit in Sachen IPS bin, bräuchte ich eure Hilfe bei dem Grundgerüst bzw. Grundfunktionen.

Wie ich zB mit PHP und der IPS-API Variablen auslesen, schreiben und ändern oder auch IPS-Scripte ausführen kann weiß ich.

Nun frage ich mich, wie ich am besten anstelle kann, das Livedaten angezeigt werden, also wenn ich zB einen Homematic Lichtschalter betätige soll sich der Wert/Status im Webfront umgehen aktualisieren, und dass ohne Seitenreload!

Genau so frage ich mich, wie ich an elegantesten irgendetwas „in Bewegung setzte“ wenn ich einen Button geklickt habe, auch hier ohne Seitenreload oder ein Formular abzuschicken.

Für ein paar Tipps würde ich mich sehr freuen

Viele Grüße

Markus

Wenn Du so was wie NEO gewohnt bist dann schaue Dir doch mal IPSStudio an da kannst Du genauso Oberfächen basteln und übernimmst auch die eingebunden Elemente und Grafiken. Im Endeffekt kannst Du Dir eine Oberfläche bauen die genau so aussieht wie Deine jetzige Remoteoberfäche.

Hi Fonzo,

danke für die Info !! Sieht gut aus, aber ich würde es lieber komplett selbst designen/programieren und über den IPS-Webserver laufen lassen.

Für viele vielleicht unverständlich, aber die Bastelei ist für mich fast genau so wichtig wie
dass die Steuerung funktioniert :slight_smile:

Daten und Status aktualisieren hab ich gerade mit Ajax und JQuery hinbekommen.

Jetzt muss ich nur noch schauen, wie ich Befehle am besten sende. Wichtig ist, dass es ohne Reload läuft,
dass finde ich echt unschön auf dem Wandtablet.

Viele Grüße

Markus

Nur eine Idee, wäre es nicht einfach einen neuen CSS-Skin zu erstellen und diesen zu verwenden - dann könntest du dich ganz auf das Designen konzentrieren und IPS kümmert sich weiterhin um die Technik ;).

IPS ist CSS Skin fähig.

Und nebenbei, würden sich bestimmt auch andere über einen anderen schicken CSS Skin freuen ;).

Hallo pleibling,

Grundsätzlich eine Gute Idee… ich muss es mir mal genauer anschauen, damit habe ich mich noch nie beschäftigt.
Ich weiß überhaupt nicht was geht, was nicht und vor allem, nicht es geht.

Aber ich schau es mir mal in Ruhe an, vielleicht ist es ja wirklich eine Möglichkeit.

Viele Grüße
Markus

Guten Morgen zusammen,

ich habe es gestern geschafft, alles so zu bauen wie ich es mir vorstelle. Es funktioniert, Ziel erreicht,
aber nicht für Alltagstauglich erklärt… Es ist einfach zu viel Quellcode, zu viel rumgebastel und ich glaube die Last beim ewigen refreshen ist auch nicht so ideal.

Ich werde mich dann wohl doch für die Professional Lizenz von IP-Symcon entscheiden.

Gibt es ein Art Handbuch wie man CSS-Skin erstellt?

Irgendwie finde ich nicht wirklich was über die Forensuche

Vielen Dank und viele Grüße

Markus

Eine Anleitung zum Bau eines eigenen CSS-Skins gibt es so nicht. Allerdings ist es auch nicht so komplex, da es sich im Prinzip nur um eine Datei handelt, die angepasst werden muss. Welche CSS Klassen du ändern musst, bleibt allerdings deiner Entdeckungslust überlassen, denn diese sind nirgends dokumentiert. Aber die Browser haben ja ausreichend eingebaute Entwicklertools um HTML/CSS zu sniffen.

IPS hat diese Hilfe dazu: https://www.symcon.de/service/dokumentation/entwicklerbereich/sdk-tools/sdk-skins/

Eigene Skins liegen in der IP Symcon Installation unter \symcon\webfront\user\skins<meinSkin>; darin sind dann die Dateien skin.json, webfront.css und evtl. icons.css interessant.

Ich habe mal in Sept.2016 einen Material Design Skin gebaut -> https://www.symcon.de/forum/threads/32343-Material-Design-Skin-f%C3%BCr-IPS-V4-0. Inklusive Optionsmodul, damit man verschiedene Farbkombinationen wählen kann. Bin auch gerade dabei, ihn leicht anzupassen - u,a, so, dass man in den Optionen der IPS Instanzen einen Einfluss auf die Darstellung via CSS nehmen kann (z.B. die Width von Labeln fest einstellen damit Slider unabhängig vom Labeltext gleiche Länge bekommen).

Am responsive design (also der automatischen Anpassung an verschiedene Darstellungsbreiten) bin ich aber gescheitert, da der IPS WebFront mit einem fix design arbeitet. Du musst dann eben verschiedene für Phone / Tablet erstellen.

Ich wünsche dir viel Erfolg.

Hallo Uhula,

Dank für die Tipps !!

Die CSS-Klassen rauszufinden ist kein Thema !!

Insgesamt heißt es aber, man kann nur ändern kann, was als CSS änderbar ist.

Man kann zum Beispiel keine eigenen html-Codes für Buttons, On/Off Schalter oä. ein- bzw umbauen?

Man könnte „speziele schalter“ als HTML-Box bauen.

Muss ich mich noch ein bisschen mit beschäftigen.

@Uhula: Hey - das sieht sehr schick aus, wie konnte mir das nur entgehen?!?

Denn muss ich mir die Tage mal genauer ansehen - von mir ein dickes Respekt :).

Ich habe gerade auf Professionel geupdated.
Bevor ich mich gleich in die Arbeit stürze…

IPS läuft auf einen Raspberry Pi 3.

Da ich noch einen zweiten 3er Pi habe würde ich gerne das neu System ganz neu aufbauen und die Umbauten werden ja auch sicherlich einiges an Zeit kosten.

Kann man zwei IPS Systeme parallel laufen lassen.

Wenn das neue System steht würde ich das alte dann einfach abschalten.

Gibt es bei dem vorgehen irgendwelche Probleme?

Viele Grüße
Markus

Generell können mehrere IPS Server parallel laufen. Im Detail kommt es aber darauf an, welche Module/Geräte du verwendest und ob diese es erlauben mehrere „Rückkanal-“ Empfänger (die IPSse) anzumelden.

Witzig wird auch, wenn sich die beiden IPSse um ein Gerät streiten und dieses in guter Absicht permanent EIN/AUS schalten, weil sie eine andere Reaktion erwarten. :rolleyes:

Mein IPS Produktivsystem läuft ebenfalls auf einem Pi3, problemlos. Zur PHP-Entwicklung nutze ich aber IPS direkt auf meinem SBook - es kommt bei der Entwicklung leider dabei immer wieder vor, dass ich IPS neu starten muss, wenn mein PHP Code nicht ganz sauber ist. Auch kann ich direkt in den PHP/JSON Dateien ändern, geht so schneller als mit Putty/FTP.