Frontend-Screenshots für FHEM-Homepage/Wiki gesucht

[krikan]

Die Frontend-Screenshots auf https://fhem.de/#Screenshots würde ich gerne aktualisieren und erweitern. Dafür suche ich Screenshots von Frontends, die auf fhem.de bzw. von dort verlinkt auf wiki.fhem.de frei veröffentlicht werden dürfen. Das Thema soll als Sammelthread für die Screenshots dienen.

Gesucht ist:  Alles

Vom ganz einfach gestalteten Standardfrontend bis zur kreativen Eigenentwicklung. Der FHEMWEB-Screenshot von Desktop, Tablet und Mobile mit den verschiedenen von FHEM mitgelieferten Styles genauso wie mit angepassten oder eigenen Styles. Bei selbstentworfenen Styles bzw. Anpassung weist bitte darauf hin. Bei eigenen Styles oder mit dem Attribut stylesheetPrefix eingebundenen Anpassungen wäre es schön, wenn diese mit zur Verfügung gestellt würden.

FLOORPLAN, InfoPanel, RSS, YAF, Charting Frontend, Tablet UI, smartVisu usw. Screenshots sind natürlich genauso erwünscht.

Neben dem angehängten Screenshot(s) macht bitte eine Angabe zum genutzten Frontend und erläutert -soweit vorhanden- eventuelle Besonderheiten.

Danke für eure Mithilfe.

Gruß, Christian

[rudolfkoenig]

Um die Angst zu nehmen, fange ich an mit zwei Screenshots aus fhem.cfg.demo

[hermann258]

Mein TabletUI

[Benni]

Na dann will ich auch mal...

2 Screenshots von meinem InfoPanel

[Benni]

Und noch mein Wetter-RSS, das auch als PNG auf meinen WebServer hochgeladen wird.

[andies]

iPhone

[the ratman]

wenn dus willst, saug (aber wirklich, ich mag nicht den hoster spielen) sie von hier:

http://ratman.at/images/stories/711/lichtfurz/start.png
http://ratman.at/images/stories/711/lichtfurz/media.png
http://ratman.at/images/stories/711/lichtfurz/wetter.png

ist mein "waf-freundlicher" floorplan

[krikan]

Danke! Sehr schöne Beispiele.

Aber ich hätte gerne mehr. Mein Traum(?)ziel ist eine umfangreiche Screenshot-Galerie mit der wir FHEM-Interessierten die unzähligen Möglichkeiten zeigen können. Momentan reicht es nur für eine kleine Erweiterung der Homepage.

Was ist beispielsweise mit smartVisu? Auf der Homepage gibt es nur ein Beispiel und das finde ich zu mager.
YAF, Charting Frontend, Dashboard fehlen komplett.
Auch von bereits im Thread vertretenen Frontends mit Screenshot wären weitere Beispiel toll!

Also traut Euch. 

Gruß, Christian

@the ratman: ist gesaugt

[the ratman]

o.k.
einen hab ich noch - stink normale web-oberfläche
diesmal als anhang

yaf? also den hab ich nie ernsthaft zum laufen gebracht - ich glaub, der is eh nix ...

aja, was ausgefallenes
meine versuche, den rainmeter zu verwenden: https://forum.fhem.de/index.php/topic,48548.msg404761.html#msg404761
gibt halt bei zu viel abfragen schnell mal ne sperre, aber gehen tuts.
so kann man zeigen, dass fhem noch flexibler is, weil man ja quasi alles zum anzeigen und schalten mißbrauchen kann *g*.

[Helmi55]

Hier meine Anzeige der Pool und Gartensteuerung (läuft auf einem LenovoTab)
Tablet hängt in der Garage und wird beim Öffnen des Tores autom. mit AMAD eingeschaltet
Gruß
Helmut

[Gueco315]

Hier meine Anzeige und Steuerung auf dem TV im Büro und ..
dem IPAD 2 im Flur. Das Tablet wird zudem für die Anzeige der 4 Kameras (ohne FHEM) und die Musikwiedergabe (Logitech Media Server)- App genutzt.

[thorschtn]

Smartvisu, einmal hochkant als infodisplay im Flur auf 10 Zoll tab mit fully fullscreen Browser und die Ausschnitte im Querformat einspaltig vom Handy.

[erwe]

Hi, anbei mein aktueller Stand FHEMWEB , LG, erwe

[swsmily]

Von mir einmal Wandtablet mit Smartvisu und einmal FHEMWEB Dashboard

[Ma_Bo]

Eine kleine Auswahl meiner FLOORPLAN´s.

###Edit:
Das ganze wird auf einem 10" Tablet angezeigt, auf dem Fully und AMAD2 läuft.
Das Tablet ist in einem Bilderrahmen untergebracht. (siehe Bild)
Hier hab ich damals mal angefangen, mein Projekt FHEM mal zu beschreiben: https://forum.fhem.de/index.php/topic,33961.0.html

Grüße Marcel

[Monti]

Läuft auf einem Telek.m Tablet.
Habe nicht alle Seiten abgebildet, weil das nur ein Theme ist das auf der leider veralteten WebViewControl Oberfläche läuft.
Vielleicht komme ich mal dazu die anzupassen aber für meine Zwecke gehts noch.

[Thyraz]

Da ich die Idee von mehr aktuellen Screenshots zu FHEM gut finde,
erlaube ich mir den Thread mal wieder zu beleben.

Ich verwende TabletUI, allerdings ohne das normale Gridster-Raster und mit einigen CSS-Farbanpassungen.
Als Grundgerüst zur Platzierung der TabletUI Widgets verwenide ich stattdessen Bootstrap (das CSS-Framework von Twitter).

Den aktuellen Stand findet man hier:
https://forum.fhem.de/index.php/topic,37378.msg678289.html#msg678289

[krikan]

Da ich die Idee von mehr aktuellen Screenshots zu FHEM gut finde,
erlaube ich mir den Thread mal wieder zu beleben.

Danke!
Und ich hoffe weiterhin auf "mehr" für eine Screenshot-Gallery auf fhem.de/wiki.fhem.de! 

[Baerli34]

Moin,

na dann hier ein Floorplan von mir (fullhd), erweitert mit einigem an Javascript um z.b. die mittlere Konsole
zu switchen  (alle 12 Buttons sind mit Infos belegt). Wollte hier keine extra floorpläne die beim laden
lange dauern. Ansonsten werden unten Statistiken im 5sec Takt geswitched etc.

vg, Jörg

[hyper2910]

hier mal zwei Screenshots von mir

[accessburn]

Ich gebe auch mal meinen bescheidenen Senf dazu

[Paul.baumann]

 

[MiKn]

ich häng auch mal ein Beispiel an.

[Alexk30]

Auch von mir ein Beispiel, was ich mit Hilfe des Forums zusammengebastelt habe.

[ComputerZOO]

Sieht sehr ,,clean" und modern aus, gefällt mir sehr gut. Könntest du evtl. die HTML's hier posten?

[Thorsten Pferdekaemper]

Hi,
hier mal zwei Beispiele wie die Konfiguration von Homematic-Wired Geräten aussieht.
Gruß,
   Thorsten

[ak323]

.... tja und alle diese Beispiele zeigen, das hier nur Techniker und keine Designer unterwegs sind ...
Fhem fehlt ein adäquates Frontend !

[marvin78]

.... tja und alle diese Beispiele zeigen, das hier nur Techniker und keine Designer unterwegs sind ...
Fhem fehlt ein adäquates Frontend !

Na dann los. Wenn du selbst kein Designer bist, dann beauftrage doch jemanden, ein Frontend für dich zu bauen.


Was bedeutet eigentlich adäquat in dem Zusammenhang?


Für mich ist das Frontend eher zweit- bis drittrangig. In meiner Automation wird so gut wie gar nichts über das Frontend gemacht. Automation heißt ja, dass vieles von alleine läuft, voneinander abhängt und ich nicht groß eingreifen muss. Für alles andere gibt es Schalter und ein einfaches smartVisu Frontend. Subjektiv ist das perfekt für unseren Haushalt.


Aber statt zu meckern (das ist der zweite Thread in dem ich das von ak323 sehe), ist es immer besser, sich einzubringen und zu helfen die (natürlich rein subjektiven) Missstände zu beheben.

[Thyraz]

.... tja und alle diese Beispiele zeigen, das hier nur Techniker und keine Designer unterwegs sind ...
Fhem fehlt ein adäquates Frontend !

Auch wenn ein "Dann mach mal" sicher auch eine passende Antwort auf diesen Rant wäre:
Das war auch immer mein größtes Manko bei FHEM (und der Grund warum ich erst eine Reihe anderer SmartHome Systeme getestet habe bevor ich dann doch bei FHEM gelandet bin).

An sich haben wir mit TabletUI ja einen sehr flexiblen Unterbau der beliebig erweiterbar ist und der einen einfachen Start liefert um ein webbasiertes Interface zu erstellen.
Die einzelnen Widgets können ja beliebig auf einer Webseite platziert werden. Niemand ist gezwungen die Default Icons oder das Grid System, welches der Entwickler setstate mit an die Hand gibt, zu nutzen.

Auch die Programmierung eigener Widgets ist für jedermann möglich.

Es müssten sich nur ein paar designaffine Personen finden die genug Zeit investieren wollen,
um darauf ein einheitliches und einfach zu konfigurierendes Layout mit Standardpanels für die üblichen Aufgaben zu entwickeln.

Ich hab mir für den eigenen Einsatz mit den TabletUI Widgets ein responsive Design erstellt, welches optisch eher an moderne Webfrontends angelehnt ist:
https://forum.fhem.de/index.php?action=dlattach;topic=72728.0;attach=83835;image 
Habe zusätzlich auch angefangen eigene Icons für Lampen / Rollläden etc. zu designen um einen einheitlichen Look hinzubekommen.

Vor ein paar Jahren hätte ich mir das Projekt noch mit Freude auf die Fahnen geschrieben und nach Mitstreitern gesucht.
Im Moment ist familiär aber einfach nicht so viel Zeit für solche Spielereien drin. :-/
Bin ja froh wenn ich die Sachen bei mir daheim soweit umgesetzt bekomme...

Steckt halt schon einiges dahinter:

- Mockup erstellen um zu wissen wo die Reise hingehen soll.
  Evtl. auch mehrere Designs und abstimmen lassen was dann bei der Meute hier gut ankommt.
- Eigenes CSS Stylesheet für Basisdesign und Anpassungen an vorhandenen Widgets.
- Templates (welche TabletUI ja schon unterstützt) für viele verschiedene Standardaufgaben erstellen.
  Ein Beispiel wäre eine Widgetgruppe aus Icon, Slider, Switch-Button und einem Text für Lampen.
  Denn genau das ist es ja was bisher fehlt: Ein einfacher Weg hübsche Panels für seine Geräte aneinanderzureihen, statt selbst das Rad neu erfinden zu müssen.
- Weitere passende Widget-Designs entwerfen für Dinge die es noch nicht gibt, oder welche sich nicht genug per CSS anpassen lassen.
  Danach muss das dann logischerweise auch noch jemand diesen Designvorschlag ausprogrammieren...
- Konsistentes Icon- / Grafik-Set erstellen. Ein paar Leute finden welche in der Lage sind (und helfen wollen) weitere Icons passend zum Design zu erstellen.
  Userwünsche sind da ja vorprogrammiert.
- Ein Starterguide der erklärt wie man das Ganze dann schnell aufsetzt und Geräte einfügt.
  Zusätzlich noch eine genauere Doku.

Mal sehen, evtl. habe ich ja irgendwann doch die Muse mit so etwas anzufangen...

[Thorsten Pferdekaemper]

Hi,
es stimmt wahrscheinlich, dass hier keine (professionellen) Designer unterwegs sind. Genauso würde ich aber mal behaupten, dass hier nicht alle (professionelle) Softwareentwickler sind. I.e.: So what?
Außerdem: Was wäre denn ein "adäquates" Design? In etwa so wie Apple das macht? Bitte nicht. Meine Freundin hat z.B. ein iPad. Jedesmal wenn mein kleiner sein Traktor-Video sehen will, gebe ich das Ding genervt meiner Freundin, da ich dafür einfach zu blöd bin.
Bei den "guten" Beispielen sieht man auch oft Slider. Auch hier: Bitte nicht. Das ist was für die Werbung, aber in den meisten Fällen nicht brauchbar, insbesondere auf Smartphones und anderen Geräten, bei denen man keine Maus hat. (Auch ich habe früher den Fehler mit den Slidern gemacht.)
Gruß,
   Thorsten

[papa]

hier mal zwei Beispiele wie die Konfiguration von Homematic-Wired Geräten aussieht.

Ich glaube, ich habe das schon mal gefragt ..... Könnte man Deinen Code nicht irgendwie auch geschickt bei "normalen" Homematic-Geräten wiederverwenden ? Das würde vielen Nutzern sicherlich sehr helfen.

[Thorsten Pferdekaemper]

Ich glaube, ich habe das schon mal gefragt ..... Könnte man Deinen Code nicht irgendwie auch geschickt bei "normalen" Homematic-Geräten wiederverwenden ? Das würde vielen Nutzern sicherlich sehr helfen.

Ich würde das sofort unterstützen, aber da muss vor Allem Martin was machen. Vielleicht stellst Du die Frage mal im Homematic-Bereich als eigenen Thread.
Im Prinzip müsste das gehen, aber HM485 hat einen etwas anderen Ansatz: Die Gerätebeschreibungsdateien (XML-Dateien) werden vom FHEM-Modul direkt verwendet, um die ganzen sets, gets und die Konfig-Optionen zusammenzubasteln. Bei CUL_HM ist es glaube ich so, dass alles mehr oder weniger manuell reinprogrammiert ist.
...aber wie gesagt, ich würde dabei helfen, wenn Martin das einbauen will.
Gruß,
    Thorsten 

[the ratman]

vorweg: ich will weder motzen noch jammern! bin immer noch begeistert von den vielen modul-bastlern, die ihre jobs mehr als nur sehr gut machen ...

~~~ snip ~~~
Bei den "guten" Beispielen sieht man auch oft Slider. Auch hier: Bitte nicht. Das ist was für die Werbung, aber in den meisten Fällen nicht brauchbar, insbesondere auf Smartphones und anderen Geräten, bei denen man keine Maus hat. (Auch ich habe früher den Fehler mit den Slidern gemacht.)
~~~ snip ~~~

glaube, das liegt eher daran, dass das meiste als html kommt. die wenigen nicht-html-oberflächen zu rudimentär/technisch sind. ich glaube, dass eine allgemeine oberfläche (z.b. mit java oder was weiß ich, was da grade universell ist) sicher "mehr könnte". die möglichkeiten für anfänger/nicht progger wären dann ja auch irre schön, weil dann ginge ja wirklich mal z.b. drag&drop zum basteln für oberflächen.
sogar mit so dummen spielereien wie dem rainmeter (windoof) kriegst du slider hin, die sowohl mit maus, stift und fettfinger super funzen, selbsständig mit auflösungen umgehen können, blaaa blubb blaaa.

die leute haben schon recht in meinen augen, wenns sagen, dass hier das design fehlt. ich würd eher altbacken zu sagen ... wir haben mit fhem quasi den besten fomel1 wagen mit ner vw-käfer karosserie, zwar super viel ps und bestes getriebe, aber sehr weit weg von von nem guten cw-wert *g*.

[Thorsten Pferdekaemper]

sogar mit so dummen spielereien wie dem rainmeter (windoof) kriegst du slider hin, die sowohl mit maus, stift und fettfinger super funzen, selbsständig mit auflösungen umgehen können,

Wie soll denn das gehen? Wenn ich z.B. eine Temperatureinstellung habe, die von 5°C bis 30°C geht mit einer Auflösung von 0,5K. Das Ding steht auf 20°C und ich will auch 20,5°C stellen. Ich habe noch keinen Slider gesehen, mit dem das einfach ware.
Gruß,
   Thorsten

[Thyraz]

Das ist auch kein Anwendungsfall für einen Slider.
Man bewegt sich meist im selben Range und will kleine, fest abgestufte Schritte.

Das wäre sogar mit einer einfachen Anzeige und zusätzlichen +/- Buttons weit besser gelöst.

Für einen Dimmer ist hingegen der Slider ein ziemlich perfektes Werkzeug.
Ob ich jetzt auf 60 oder 61% dimme ist ziemlich egal, ich will aber problemlos/schnell/direkt von sehr hell zu Schummerlicht wechseln können.

Ich würde also nicht den Slider an sich verteufeln, sondern eher die Idee für jegliches Gerät das selbe UI-Element einzusetzen.
Ganz gleich worum es sich hardwareseitig handelt.
Ein weiterer Fehler ist oft, einen viel zu kleinen Slider darzustellen, da man ja möglichst viel Informationen auf dem Bildschirm anzeigen lassen will
(Eine allgmeine Unart).
Mit einem Sliderknopf den ich gerade mal 10-20px schieben kann, werde ich nie etwas sinnvoll einstellen können.

[SamNitro]

Wir bewegen uns jetzt hier zwar was weg vom eigentlichen Thema Screenshot, aber ich als Laie fände es cool wenn man einen Arbeitsbereich hätte wo man per Drag & Drop Widgets hinziehen kann, wo man dann ihre spezifischen Eigenschaften in Eingabefälder anpassen kann.

Habe damals mir mit Mühe und Not TabletUi eingerichtet wo ich sehr viel Stress mit meiner besseren Hälfte hatte, weil ich nur am pc hing.

Mir graut es jetzt schon davor umzuziehen und vieles ändern zu müssen [emoji51]

Gruß Patrick


Gesendet von iPhone mit Tapatalk

[ak323]

Interessant, was man mit einfachem Posten von persönlichen Meinungen in diesem Forum an Reaktionen auslösen kann ... 

Auch wenn ein "Dann mach mal" sicher auch eine passende Antwort auf diesen Rant wäre:

Siehe weiter unten in Deinem Post, was das Problem ist, es nicht zu machen ...

Es müssten sich nur ein paar designaffine Personen finden die genug Zeit investieren wollen,
um darauf ein einheitliches und einfach zu konfigurierendes Layout mit Standardpanels für die üblichen Aufgaben zu entwickeln.

Genau: Technik und Design zusammenbringen ... ! Das ist der Key ...

Ich hab mir für den eigenen Einsatz mit den TabletUI Widgets ein responsive Design erstellt, welches optisch eher an moderne Webfrontends angelehnt ist:
https://forum.fhem.de/index.php?action=dlattach;topic=72728.0;attach=83835;image 
Habe zusätzlich auch angefangen eigene Icons für Lampen / Rollläden etc. zu designen um einen einheitlichen Look hinzubekommen.

Das geht doch schon mal in die richtige Richtung -- (nach meinem Geschmack ... um nicht wieder die typischen Kommentare anderer zu bekommen)

Vor ein paar Jahren hätte ich mir das Projekt noch mit Freude auf die Fahnen geschrieben und nach Mitstreitern gesucht.
Im Moment ist familiär aber einfach nicht so viel Zeit für solche Spielereien drin. :-/

Genau das ist das Problem ...

Mal schauen, was dieser Thread noch so hervorbringt ... 

VG ak323

[Marlen]

Hier mal mein Floorplan:

[the ratman]

Wie soll denn das gehen? Wenn ich z.B. eine Temperatureinstellung habe, die von 5°C bis 30°C geht mit einer Auflösung von 0,5K. Das Ding steht auf 20°C und ich will auch 20,5°C stellen. Ich habe noch keinen Slider gesehen, mit dem das einfach ware.
Gruß,
   Thorsten

man muß ja ned für alles slider nehmen - z.b. für rollos/licht sinds super - mir doch egal, ob ich jetzt 40% oder 41% helligkeit habe.

aber auch dein wunsch ginge - verwend ich zwar schon lange nimma selber, aber beim rainmeter hatt ichs mal mit slider und 2 knöpfen mit + und - gemacht. +/- fahrt den slider dann in 0.1-schritten oder was du auch immer willst.
oder man macht 2 slider - einen für vor und einen für nach dem komma.
andoid zeigts sowas ganz gut bei z.b. deren uhr-einstellungen - 2 "knobs" (drum gier ich auch so auf das neue doif-ui-zeugs). ein kreis stellt die stunden, einer die minuten. wollte man sekunden, könnte man auch noch nen dritten kreis machen. spart platz und jeder alki mit schwerstem säufertremor kann so n ding einstellen *g*.

schade is ja, dass das alles eh schon ginge, aber wie du halt richtig sagst: mit den verschiedenen browsern verschieden ungenau oder teilweise ein horror, weil da auch gern mal ein slider beim befingern "auskommt".

[ph1959de]

Könnten wir hier bitter wieder zum Thema zurückkommen? Für die Diskussion der letzten Beiträge bitte einen neuen Thread aufmachen.

[FHEMAN]

Hier mein Style. Nur ganz leicht am Standard gefeilt. Die krassen Farben abgeschwächt, die runden Ecken minimiert und ein paar Hover und Selected Effekte sowie Schriftstyles angepasst. Soweit ich mich erinnere.

(die Sourcen habe ich eben unter https://forum.fhem.de/index.php/topic,78631.0.html hochgeladen)

Gruß
Ronny

[Skipman]

Hier mal meine Umsetzung.
Bin noch ziemlich am Anfang der Lernkurve, aber dank alle im Forum hab ich ein schon mal laufendes Tablet-UI.
Das UI läuft auf ein altes Telekom Tablet, aber dafür doch sehr gut.

Ist noch work in Progress - aber schon im Betrieb.
Noch ein paar Baustellen, aber die werde ich bestimmt mit Hilfe auch noch lösen
Noch mal dank für alle die viel Arbeit in FHEM und das Tablet-UI rein gesteckt haben. 
Skipman

[SpeedyRS2]

Hier ein paar Screenshots, wie mein TableUI aussieht.
Ich unterscheide zwischen Tablet und Smartphone: