[FHEM-Tablet-UI] User-Demos

[setstate]

Das hast du doch nicht wirklich mit FHEM-Tablet-UI gebaut? Und noch nicht mit HTML beschäftigt? Bist du ein Design und Layout Genie?
Mal ehrlich, wo findet man das Bild im Original bei Google? 

HTML Code her, sonst glaubt dir das keiner!
Ich bin baff!   

[tomster]

Uff, da bin ich jetzt auch baff.
Kaum schaut man ein paar Tage nicht in's Forum, haun da 2 Leute solche Design-Sahneschnitten raus...
Ich kann's kaum erwarten die Icon-Font von Thyraz und den HTML-Code von rhrawr zu sehen.

[coolice]

Möchte auch mal meine ersten Gehversuche mit dem FTUI zeigen und natürlich gleichzeitig einen riesen Dank an Setstate (aber auch den Rest der Community) loswerden.

Nach unzähligen Versuchen und Spielereien mit Formen, Farben und was weiß ich nicht, habe ich mich nun glaub ich auf ein "Design" eingeschossen. Ich habe mir natürlich viele der Demos hier im Forum angeschaut und neigte beim Experimentieren immer wieder dazu, möglichst viele Widgets auf den Seiten unterzubringen. Ich war auch schon kurz davor zu sagen: "Das ist es!" Habe dann aber doch alles wieder über den Haufen geworfen. Denn ich glaube ein Problem eint uns alle: Frau muss das Ding auch toll finden! 

Daher habe ich nun folgenden Plan. Zwei UI's für jeweils 7" Tablets (Galaxy Tabs) in Wohnzimmer und Flur, relativ simpel und nur mit den wichtigsten Funktionen und Ausgaben versehen. Dazu ein UI für mein 10" Tablet, welches dann etwas umfangreicher ist. Das UI für das Smartphone soll ebenfalls relativ simpel aufgebaut, aber über entsprechende Menü's mehr Funktionen bieten, als die einfachen 7" UI's.

So sieht aktuell der "Homescreen" für die 7-Zoller aus (siehe Anhang), natürlich in Szene gesetzt. Bei den Temps sind mehrere Räume via Swiper hinterlegt. Das jeweilige Statusicon lässt sich anklicken, dahinter verbergen sich Popups mit der Statusauswahl. Dazu noch ein Switch um zwischen meinem Auto- und Eco-Modus schnell zu wechseln. Ganz unten findet sich dann noch ein kleines Menü, wohinter sich noch weitere Räume befinden. Die sind aber noch nicht ganz fertig (gibt es dann bald per Edit nachgeliefert).

Ist sicherlich jetzt nix "dolles", aber aller Anfang ist schwer und bis vor ein paar Tagen habe ich mich mit html noch überhaupt nicht beschäftigt. Raubt mir teilweise echt den letzten nerv, wenn man wieder was nicht klappt. 

Gruß
Dennis

da würde mich die Farbe interessieren. Welches grün ist das ?
Code Schnipsel könnte ich auch gebrauchen.

Gesendet von meinem iPhone mit Tapatalk

[Thyraz]

Sieht sehr cool aus rhawr 

Hast du dann komplett auf Gridster verzichtet?
An sich eine gute Idee, versuche mich glaub auch mal noch an einem etwas freieren Layout.

[rhrawr]

Erst einmal freut mich, dass es euch gefällt und danke für die netten Worte. Den Code hau ich die Tage mal raus, wenn ich mit dem kompletten UI fertig bin. Dann gibt es auch noch mehr Bilder dazu. Erwartet aber nicht zu viel. Es ist mehr Schein als Sein. Bin wie gesagt, html-Neuling und wenn ihr den Code seht, packt ihr euch wahrscheinlich an den Kopf. Mein Glück ist nur, dass ich ein ganz gutes Auge für Farben und eine halbwegs kreative Ader habe.

@coolice
Das Bild im Anhang sollte deine Frage nach dem Grün beantworten.

@Thyraz
Ich habe nicht auf Gridster verzichtet, dafür reichen meine html-Kenntnisse bei weitem nicht aus. Aber danke, dass du mir das zugetraut hast. 

Gruß
Dennis

[kvo1]

rhrawr, sehr cool und steigert der WAF enorm 

[HoTi]

Hallo zusammen,

anbei meine Demo. Heizung und Licht baue ich gerade um - da wird es dann spannend. Hat eigentlich jemand schon eine Steuerung für die km200 von Buderus über das TabletUI
realisiert?

@RettungsTim - ich denke Du bist jetzt schon fertig mit Deiner eigenen Lösung - sorry.

Ich versuche mich gerade deine Version Teilweise bei mir umzusetzen. Leider bekomme ich das mit dem Yahoowetter nicht hin.
Oben gehts es. Aber auf der Wetterseite geht nichts. Hattest du das schon mal und kann mir helfen?

*edit*

habe den fehler gefunden. Irgenwie hat er obwohl ich die datein geändert habe immer den selben fehler drin. Irgendie im cache auch nach Leerung...

[Mike081]

Hallo zusammen

ich habe die Probleme mit Chat Widget - versuche mal die Werte von Homematic Thermostat und FS20 Messsteckdose zu zeigen. leider kriege ich kein Ergebnis im IE oder Chrome.... so sieht das Code aus:

<header>CHART</header>
    <div class="normal"
         data-type="chart"
         data-device="CUL_EM_6"
         data-logdevice='["FileLog_CUL_EM_6","FileLog_CUL_EM_6","FileLog_CUL_EM_6"]'
         data-columnspec='["8:5MIN:","10:TOP:","6:CUM:"]'
         data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
         data-ptype='["lines","lines","lines"]'
         data-uaxis='["primary","primary","secondary"]'
         data-legend='["Measured", "Desired", "Valve"]'
         data-yunit="°C"
         data-ytext="Temperature"
         data-minvalue="auto"
         data-maxvalue="auto"
         data-yunit_sec="%"
         data-ytext_sec="Percentage"
         data-yticks="auto"
         data-minvalue_sec="0"
         data-maxvalue_sec="100"
         data-daysago_start="0"
         data-daysago_end="-1"
         data-crosshair="true"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
         data-xticks="auto">
    </div>


FS20: und hier der Inhalt der Datei CUL_EM_5-2016.log:

2016-01-24_23:10:47 CUL_EM_6 CNT: 119 CUM: 2.475  5MIN: 0.070  TOP: 0.100
2016-01-24_23:15:45 CUL_EM_6 CNT: 120 CUM: 2.482  5MIN: 0.080  TOP: 0.100
2016-01-24_23:20:45 CUL_EM_6 CNT: 121 CUM: 2.489  5MIN: 0.080  TOP: 0.090

[stoxx]

Super Design-Vorschläge hier - einfach klasse!! Ich bin auch ein totaler Fan von Tablet UI geworden..
@rhrawr: Schaut super aus - gerade die Fußzeile mit den Icons würde mich interessieren - bei mir ist das (standardmäßig) links. Deine Anordnung gefällt mir viel besser..
Meine aktuelle Optik, siehe Anhang.
@rhrawr: Bitte melden, wenn ich das aus copyright-Gründen löschen soll 
viele Grüße
stoxx

[setstate]

Blöde Frage: wieso ist das bei beiden Fotos das gleiche Tablet/Phone, der gleiche Tisch und der gleiche Winkel? Gibt es dafür ein App, die diesen Rahmen erzeugt? So wie bei den Fakes, wo man persönlich auf Plakatwänden erscheint?

[stoxx]

Das ist Photoshop...

[oggy]

Ich muss mal kurz ein fettes Danke an die Entwickler und die Design-Vorschläge geben. Tablet-Ui macht richtig Bock ... und in Verbindung mit webViewControl ein kompletter App-Ersatz.


ich bin jetzt nur noch am Suchen, wie ich auf einen externen Tastendruck (zB Klingel) eine bestimmte Seite angezeigt bekomme (zB den Video-Feed einer Überwachungskamera). Die newUrl-Option von webViewControl scheint nicht weiterentwickelt worden zu sein und fehlt wieder.

[Mario67]

Hallo,

@oggy: soetwas habe ich bei uns mit einem Popup gelöst. Dieses Fenster wird durch das Setzen eines dummy-Devices (VisitorAtFrontDoor) geöffnet.

Dazu habe ich eine Hilfsroutine in meine 99_myUtils.pm eingefügt:

Code Auswählen Erweitern

sub UpdateUpCam1()
{
    fhem("get UpCam1 image");         # IPCAM
    fhem("set InfoPanel screen on");  # AMAD
    fhem("set VisitorAtFrontDoor 1");

    fhem("defmod CloseVisitorAtFrontDoorPopupAt at +00:01:00 set VisitorAtFrontDoor 0");

    Log3 "UpdateUpCam1", 1, "Taking snapshots.";
    return;
}

Ein at setzt den dummy wieder zurück. Das Fenster schßießt sich dadurch nach 1 min oder nach click / touch. Die PERL-Routine löst ebenfalls das Erstellen des Fotos (über IPCAM) aus.

Das Popup habe ich zusammen mit anderen (Telefonanruf, Alarm, ..) in ein eigenes Template ausgelagert. Es kann damit auf jeder Seite erscheinen.

Code Auswählen Erweitern

<!-- CAMERA-POPUP -->
<div class="top-space">
    <div data-type="popup" data-device="VisitorAtFrontDoor" data-get-on="[1]\d*" data-get-off="[0]\d*" data-height="600px" data-width="1000px">
        <div></div>
        <div class="dialog">
            <header>Besucher an der Haust&uuml;r</header>
            <div data-type="image"
                 data-size="95%"
                 data-url="./snapshots/UpCam1/UpCam1_snapshot.jpg"
                 class="nocache"
                 data-refresh="1"
                 onclick="$('.dialog-close').trigger('click');">
            </div>
        </div>
    </div>
</div>

Nun noch der Button zum direkten Aufruf der Routine. Das soll  natürlich auch die Klingelanlage triggern.

Code Auswählen Erweitern

     
<!--  IPCAM -->
<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
    <header>CAMERA</header>
    <div data-type="push"
         data-icon="oa-it_camera"
         onclick="setFhemStatus('{UpdateUpCam1()}')"                     
         class="cell">
    </div>
</li>

Anbei noch ein Ausschnitt meiner unfertigen UI.

Gruß,
Mario

[bjoernbo]

coole Sache. Ich wollte ja mal vor langer Zeit eine abgespeckt Version fürs iPhone erstellen, womit man schnell ein paar Lampen einschalten kann und die Heimkinoanlage. Jetzt wo ich die Bilder sehe (zwar SAM ...UNG) sollte ich mal wieder aufs Pferd aufspringen 

[rhrawr]

Super Design-Vorschläge hier - einfach klasse!! Ich bin auch ein totaler Fan von Tablet UI geworden..
@rhrawr: Schaut super aus - gerade die Fußzeile mit den Icons würde mich interessieren - bei mir ist das (standardmäßig) links. Deine Anordnung gefällt mir viel besser..
Meine aktuelle Optik, siehe Anhang.
@rhrawr: Bitte melden, wenn ich das aus copyright-Gründen löschen soll 
viele Grüße
stoxx

Alles gut und danke für die Blumen. Dein Screen gefällt mir aber auch. Trotz der vielen Infos wirkt es sehr aufgeräumt. Weiter so.


Habe bis gerade an der UI für mein Smartphone gebastelt. Das Design soll sich natürlich größtenteils wiederfinden, dennoch habe ich ein paar Kleinigkeiten angepasst. Zur besseren Verständlichkeit, was welche Funktionen aufweißt, habe ich Erklärungen im zweiten Bild hinzugefügt. Auch das ist erstmal der Rohentwurf. Wird sich bestimmt noch ein wenig ändern und die weiteren Pages müssen noch fertiggestellt werden, befinden sich noch im absoluten Rohbau.

Gruß
Dennis