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
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
Beides :-) Finde sie etwas zu überladen für meinen Geschmack. Und der Wunsch etwas selbst zu basteln ist auch sehr groß. ;-)
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
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?
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
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.
Hi,
Ich schick sie dir sobald ich zuhaus bin, aber nicht erschrecken, die ist etwas unstrukturiert :-)
Gruss Thorsten
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.
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
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
Huhu, wer möchte und kann teste vielleicht folgendes zusätzlich im brightstyle.css:
@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
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.
Ein/Ausklapen: schau die mal den Post zu 'dashboard' an.
Auch kann fhemweb inzwischen mehrspaltige Darstellung.
Gruß Uli
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.
Hallo
gibt es eigentlich irgendwo eine Erklärung wie so eien Css aufgebaut ist. Habe selbst damit rumgespielt, hier und da mal was ausgetauscht und hab den Desktop für mich zumindest etwas aufgehübscht, mir genehme Farben etc., in Verbindung mit dem Dashboard sieht das schon nicht schlecht aus. Für meine Geschmack war da aber zuviel try and error dabei.
ok ich habe nur ganz ganz rudimentäre Programmiererfahrung, einiges verstehe ich mittlerweile wenn ich in den Code reinschaue, aber eine Anleitung wie das Einsteiger PDF wäre schon nicht schlecht.
Habe bei mir einige auskommentiert, also alt - neu mit Hinweistext damit ich ne Woche später noch weiß was ich da gemacht habe. Wenn es aber in den Tiefen des Forums hier schon so etwas gibt wäre das sicher sehr hilfreich.
Hallo kekschen, dein Stylesheet gefällt mir gut. Wäre Klasse wenn du es weiter entwicklen würdest z.B. auch für den Floorplan sowie small und touch.
Grüße
cerberus