Eigenes Frontend bauen

johannes1984 · 30 Juni 2013, 13:46:41

Hallo,

ich bin ganz neu hier - erster Beitrag - und experementiere derzeit mit einem Raspberry Pi in Kombination mit FS20 Zwischensteckern.

Ich würde mir gerne ein ganz einfaches Frontend auf basteln. PHP Kenntnisse und Basiskenntnisse JS sind vorhanden. Ich habe schon mal im Wiki gesucht, aber bin bisher noch nicht fündig geworden, wie bzw. ob ich die Komponenten über den FHEM Server irgendwie über PHP ansprechen kann. Also Klick auf einen Link, Licht an, wieder Klick -> aus.

Würde mich sehr über einen Denkanstoß, Code-Schnippsel oder Unterstützung freuen.

LG Johannes

Puschel74 · 30 Juni 2013, 14:05:44

Hallo,

ZitatAlso Klick auf einen Link, Licht an, wieder Klick -> aus.

Das bietet dir doch auch die FHEM-Oberfläche.

Gefällt sie dir nicht oder wilslt du nur mal versuchen was selbst zu programmieren?

Grüße

johannes1984 · 30 Juni 2013, 14:06:53

Beides :-) Finde sie etwas zu überladen für meinen Geschmack. Und der Wunsch etwas selbst zu basteln ist auch sehr groß. ;-)

Puschel74 · 30 Juni 2013, 14:15:59

Hallo,

ZitatFinde sie etwas zu überladen für meinen Geschmack.

Geschmackssache - ich finde sie genau richtig.

ZitatUnd der Wunsch etwas selbst zu basteln ist auch sehr groß. ;-)

Das ist natürlich unschlagbar ;-)

Grüße

kekschen · 01 Juli 2013, 23:04:28

Hi,

Du kannst per ajax die events aus inform an einen php interpreter übergeben - dafür braucht's kein Wiki ;) Am einfachsten war es für mich, alle events aus inform einmalig in eine DB zu loggen und anschliessend die Logik zu extrahieren und zu filtern. Das ist Brute force, aber für mich am praktischsten.
Spannender ist da schon ein lexer/parser für inform, at usw. weil ich das per drag&drop haben will...

Man kann fhem schon mit css Bordmitteln anhübschen:

(siehe Anhang / see attachement)

Ich finde die bisherige Entwicklung was das visuelle angeht grossartig, ich bin bspw. begeistert, dass das icon Thema aufgegriffen wurde - vielleicht können auch die Basislayouts angepasst werden?

UliM · 02 Juli 2013, 09:40:48

Zitat von: kekschen schrieb am Mo, 01 Juli 2013 23:04Man kann fhem schon mit css Bordmitteln anhübschen:

Hi,
magst Du mir die css mal per PN schicken - gefällt mir sehr gut.
Danke+Gruß, Uli

rudolfkoenig · 02 Juli 2013, 10:44:33

Bitte einchecken :)

Mit der Einfuehrung von Styles in FHEMWEB vor paar Jahren habe ich gehofft, dass viele Alternativ-Designs entstehen, stattdessen meckern nur viele rum, dass FHEM haesslich ist.

Einige fangen an, einen neuen (mAn vergleichbar huebschen :) Frontend zu bauen: FHEMWEB styles haben wir 2, Alternativ-Frontends 10+. Offensichtlich spricht fhem die meisten Designer nicht an, und fuer einen Entwickler ist ein neues Design wohl weniger befriedigend, als ein neues Frontend.

Apropos Schnittstelle: da gibt es viele (plain,xml,json jeweils ueber Socket/HTML/HTTPS), am besten sollte man folgendes anschauen:
- im telnet inform timer eintippen und warten.
- in FHEMWEB Event Monitor anklicken
- www/pgm2/console.js und danach fhemweb.js/FW_doUpdate() anschauen.

kekschen · 02 Juli 2013, 10:54:26

Hi,

Ich schick sie dir sobald ich zuhaus bin, aber nicht erschrecken, die ist etwas unstrukturiert :-)

Gruss Thorsten

kekschen · 02 Juli 2013, 11:40:25

Zitat von: rudolfkoenig schrieb am Di, 02 Juli 2013 10:44Bitte einchecken :)

Mit der Einfuehrung von Styles in FHEMWEB vor paar Jahren habe ich gehofft, dass viele Alternativ-Designs entstehen, stattdessen meckern nur viele rum, dass FHEM haesslich ist.

Einige fangen an, einen neuen (mAn vergleichbar huebschen :) Frontend zu bauen: FHEMWEB styles haben wir 2, Alternativ-Frontends 10+. Offensichtlich spricht fhem die meisten Designer nicht an, und fuer einen Entwickler ist ein neues Design wohl weniger befriedigend, als ein neues Frontend.

Apropos Schnittstelle: da gibt es viele (plain,xml,json jeweils ueber Socket/HTML/HTTPS), am besten sollte man folgendes anschauen:
- im telnet inform timer eintippen und warten.
- in FHEMWEB Event Monitor anklicken
- www/pgm2/console.js und danach fhemweb.js/FW_doUpdate() anschauen.

Schonmal sorry für den langen quote... Sitze am tablet.

Ja, fhem ist nicht schön anzusehen. Du hast aber so viel Vorarbeit in das html Gerüst gesteckt dass man zügig auf einen guten Status Quo kommt. Das CSS entstand in weniger als 30 minuten inklusive trial&error Phase.

Ich hau später einen beautifier über das css und du kannst einchecken.

Das Logo oben links ist sicher Geschmacksache, auch dazu freue ich mich auf Anregungen. Der Text neben dem Logo ist über den pseudo Selector :before eingefügt, also anpassbar.

kekschen · 02 Juli 2013, 20:28:40

Hi,

css und icon als svg und pdf anbei.

Bin für Restrukturierung dankbar, ich bin der Coder für den der Begriff Scrum erfunden wurde :S Dafür ist mein Studium aber auch 16 Jahre her :)

vG Thorsten

UliM · 03 Juli 2013, 21:33:56

Zitat von: kekschen schrieb am Di, 02 Juli 2013 20:28Hi,
css und icon als svg und pdf anbei.

Hi Thorsten,
vielen Dank!
Hab's eingecheckt als brightstyle.css . Dazu passend ein neues Verzeichnis www/images/bright , in dem nun auch Dein icon liegt.
Falls Du noch updates hast - immer her damit :)

Gruß, Uli

kekschen · 05 Juli 2013, 11:57:14

Huhu, wer möchte und kann teste vielleicht folgendes zusätzlich im brightstyle.css:

Code Auswählen


@media only screen and (max-device-width: 480px) {
* { font-size:1em }
input.maininput { margin-top:1.5em; height:4em; font-size 2em; }
div#menu table { font-size:1.2em }
div#logo { height:6em; width:6em; background:url(/fhem/icons/fhem.png) no-repeat; background-size:100% 100%; }
#hdr { position: fixed; z-index: 1000; float: left; clear: both; height:8em; width:100%; }
div#hdr:before { margin: 1em 1em 0em 4em; font-size:2em;text-shadow: 0em 1em gray; }
#menu { zoom:250%; float:left; width:100%; position:relative; padding: 0px 20px 80px; }
#content { zoom:250%; float:left; width:100%; position:relative; margin:0px 0px; padding:0px 20px; }
div#content > table {width:100%;}
}

auf mobilen browsern. Wenn das geht ggfs einchecken. Bin wieder am tablet, sorry wegen rechtschreibung und co...

GZ thorsten

P.s. @uli hab noch andere updates zum einchecken

strauch · 16 Januar 2014, 14:27:08

Ich finde den Brightsytsle gut, hab darauf ein paar Modifikationen gemacht. Wobei es noch viel gebastel ist, aber auch ein passendes css für die svg Grafiken da die "gelben" da nicht wirklich gut zu passen. Gibt es da interesse?

Ich bin zwar Mediengestalter und hätte auch Lust am Design zu werkeln, allerdings gehen mir die neuesten Dinge noch nicht so leicht von der Hand, dann verbringe ich ne halbe Stunde um zu schauen wie ich mit float was umfließen lassen muss. Leider ist eine Zusammenarbeit mit jemandem der besser HTML/CSS beherscht schwierig zu finden.

Momentan schaue ich ob ich das ganze nicht auch Responsive hinbekomme. Schön wäre es wenn die Räume wie hier das Menü ein und auszuklappen sind: http://demo.koken.me/#regale . Aber ich vermute mit dem ganzen Tabellen wird das schwierig.

UliM · 16 Januar 2014, 16:41:01

Ein/Ausklapen: schau die mal den Post zu 'dashboard' an.
Auch kann fhemweb inzwischen mehrspaltige Darstellung.
Gruß Uli

strauch · 16 Januar 2014, 17:44:43

Hallo Uli,

da hab ich mich missverständlich ausgedrückt, mit Menü ein und ausklappen meine ich das was Google unter dem navigation Drawer versteht, den ich im Smartphone von Links reinschieben kann: http://developer.android.com/design/patterns/navigation-drawer.html

Schau dir noch mal meinen Link von oben an und stelle auf Smartphone oder mach einfach das Browserfenster ganz schmal, dann verschwindet oben rechts das Menü und oben links kommt ein Icon mit dem ich das Menü ein und ausklappen kann. "Klassisches" Responsive Design.....

. Ich muss mal schauen ob ich die SVG Plots auch dynamisch in der Breite anpassen kann.