New FHEM Tablet UI

[holle75]

Merci Chris. Funktioniert!

...

[setstate]

was passiert denn jetzt ?

Sorry, hatte die Schleifenvariable 'i' zweimal vergeben. Ist jetzt wieder okay ...

[Nobby1805]

Ja, wieder OK .. Danke

[arallon]

Hat einer von euch unterschiedliche Tablets etc. im Einsatz? Baut ihr dann mehrere UIs angepasst für die jeweiligen Geräte?

[holle75]

Hallo Arallon, schau mal 6 Antworten http://forum.fhem.de/index.php/topic,34233.msg322218.html#msg322218 obendrüber der Beitrag von Chris. Nicht 100%tig galant, aber funktioniert wunderbar.

Pass aber mit den ganzen Verweisen im Head der html-Dateien auf beim Kopieren (falls du diese auch anpassen möchtest).

So stehts in meiner fhem.cfg für das Tablet und die Mobiles

Code Auswählen Erweitern

define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI
define MOBILEUI HTTPSRV ftuimobile/ ./www/mobile Mobile-UI

[arallon]

Da ist man mal zu faul noch mal die letzten Seiten durchzugehen und dann sowas
Wäre auch so die Richtung gewesen zu der ich tendiert habe. Einzig das update all ist nicht mehr ganz so "stressfrei". Aber wenn man mal was hat muss man ja nicht ständig updaten.

[Brockmann]

Code Auswählen Erweitern

define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI
define MOBILEUI HTTPSRV ftuimobile/ ./www/mobile Mobile-UI

Wo genau liegt der Vorteil darin, mehrere HTTPSRV-Instanzen anzulegen? Ich könntet doch einfach in einer Instanz mit verschiedenen Dateien arbeiten, also
fhem/tablet/tablet-ui.html
fhem/tablet/mobile-ui.html

Und dann am jeweiligen Gerät einfach die passende Datei aufrufen. Die speichert man doch ohnehin als Favorit oder Webapp oder wie auch immer ab.

[Brockmann]

Da ich hier selbst mal die Frage aufgeworfen hatte, wie sich der Umstieg von einem Raspberry Pi 1 B auf einen Raspberry Pi 2 B auf die Performance von TabletUI auswirkt, hier nun die Antwort:

Es gibt im Prinzip einen spürbaren Performance-Anstieg, ABER der wirkt sich nur aus, wenn der Server der limitierende Faktor ist bzw. war. Auf einem PC in Chrome beispielsweise, wo TabletUI vorher auch schon recht flott war, geht es nun sehr zackig. Bei einem Android-Tablet ebenfalls mit Chrome hingegen braucht eine komplexe Seite immer noch mehrere Sekunden für den Aufbau, weil hier wohl wie schon vermutet das Rendern im Browser der Flaschenhals ist.

[chris1284]

Wo genau liegt der Vorteil darin, mehrere HTTPSRV-Instanzen anzulegen? Ich könntet doch einfach in einer Instanz mit verschiedenen Dateien arbeiten, also

ganz einfach es ist für faule wie micht. ich müsste imme rum auf die mobile-seite (oder bei mir ein TUI-Floorplan und eine testinstanz) die gesamte url tippen da der server default nach index.html auflöst. es reicht also fhem/tablet/ oder fhem/test/ oder fhem/tabletfp aufzurufen (favoriten hin oder her)
auf einem apche würdest du in der regel auch für jede seite eine site bauen weil es einfach sauberer ist
des weiteren zerschieße ich mir  nicht alles wenn ich in meiner testinstanz / der floorplaninstanz rum spiele.

[SirUli]

Ich fahre den Ansatz von Nesges, welche die Seitenteile in einzelne PHP Files zerlegt hat. Diese lasse ich von einem Nginx rendern. Für Mobil habe ich mir einen weiteren Port abgelegt und verwende so die Widgets wieder - zeige aber einfach weniger pro Seite an. HTTPSRV Zeug hab ich gar nicht - war nach den ersten Gehversuchen von der dauernden Wiederholung von Seitenteilen in den html-files genervt und bin auf PHP umgestiegen.

[swinni]

Hallo zusammen,

erstmal vielen Dank für die tolle Arbeit an dem UI!
Absolut genial und sehr individuell anpassbar,
läuft bei mir nun seit mehreren Wochen stabil und zuverlässig und gestern habe ich auch m,eine USB-Wandsteckdose nebst Tablet an die Wand montiert,
so kann man es dann nochmal ein Stück mehr geniesen. Und der WAF ist nochmals gestiegen

Ich habe mir für Aussen nun eine Kamera geholt und diese montiert, nun ist das Bild aber um 90° gedreht aufgrund der ungünstigen Kameraausrichtung.

Wäre es denn denkbar, bei IMAGE noch ein HTML Attribut data-rotation mit einzubauen?


Also beispielsweise so:

Code Auswählen Erweitern

<img src="http://IP/web/cgi-bin/snap.png" data-rotate="90"></img src>

Der JavaScript Code hierfür ware dann:

Code Auswählen Erweitern


Sample jQuery:
$('img').each(function() {
    var deg = $(this).data('rotate') || 0;
    var rotate = 'rotate(' + $(this).data('rotate') + 'deg)';
    $(this).css({
        '-webkit-transform': rotate,
        '-moz-transform': rotate,
        '-o-transform': rotate,
        '-ms-transform': rotate,
        'transform': rotate
    });
});

Was meint ihr dazu?

Viele Grüße,
Sven

[setstate]

Hallo zusammen,

erstmal vielen Dank für die tolle Arbeit an dem UI!
Absolut genial und sehr individuell anpassbar,
läuft bei mir nun seit mehreren Wochen stabil und zuverlässig und gestern habe ich auch m,eine USB-Wandsteckdose nebst Tablet an die Wand montiert,
so kann man es dann nochmal ein Stück mehr geniesen. Und der WAF ist nochmals gestiegen

Ich habe mir für Aussen nun eine Kamera geholt und diese montiert, nun ist das Bild aber um 90° gedreht aufgrund der ungünstigen Kameraausrichtung.

Wäre es denn denkbar, bei IMAGE noch ein HTML Attribut data-rotation mit einzubauen?


Also beispielsweise so:

Code Auswählen Erweitern

<img src="http://IP/web/cgi-bin/snap.png" data-rotate="90"></img src>

Der JavaScript Code hierfür ware dann:

Code Auswählen Erweitern


Sample jQuery:
$('img').each(function() {
    var deg = $(this).data('rotate') || 0;
    var rotate = 'rotate(' + $(this).data('rotate') + 'deg)';
    $(this).css({
        '-webkit-transform': rotate,
        '-moz-transform': rotate,
        '-o-transform': rotate,
        '-ms-transform': rotate,
        'transform': rotate
    });
});

Was meint ihr dazu?

Viele Grüße,
Sven

Hallo swinni,

vielen Dank für deinen Kommentar und Beitrag. Hört man immer wieder gern, dass FTUI genutzt wird und der WAF passt

Aus Performancegründen würde ich das Rotieren aber lieber per statischem CSS machen wollen:

Code Auswählen Erweitern


<div data-type="image"
data-url="http://lorempixel.com/400/200/"
class="rotate-90">
</div>


Code Auswählen Erweitern

.rotate-90{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

 
Wäre das auch okay, dann checke ich das so ein?

[swinni]

Hallo setstate,

aber natürlich! SEEEEHR gerne 
Hatte nur die JavaScript Variante als erste entdeckt bei meiner Recherche, direkt über CSS ist natürllich geschickter.

Vielen Dank !!!!

Grüße,
Sven

[dennis_n]

Hi,

bin mir nicht sicher ob ich mit meinem Problem hier richtig bin.
Ich habe gerade tablet_UI installiert.

Jetzt würde ich gerne die index.html mit meinem HTML Editor bearbeiten. Dazu habe ich mit meinem ftp Client eine SFTP Verbindung hergestellt und mich mit dem user pi angemeldet.
Wenn ich die Datei aber jetzt speichern will kommt PERMISSION DENIED.

Die Rechte sehen so aus:

Code Auswählen Erweitern

drwxr-xr-x 7 fhem dialout  4096 Aug 19 23:42 .
drwxrwxrwx 9 fhem root     4096 Aug 19 22:44 ..
drwxr-xr-x 2 fhem dialout  4096 Aug 19 22:44 css
drwxr-xr-x 2 fhem dialout  4096 Aug 19 22:44 fonts
drwxr-xr-x 2 fhem dialout  4096 Aug 19 22:57 images
-rw-r--r-- 1 root root    14709 Aug 19 23:42 index.html
drwxr-xr-x 2 fhem dialout  4096 Aug 19 22:58 js
drwxr-xr-x 3 fhem dialout  4096 Aug 19 22:57 lib

Was muss ich machen um die Datei speichern zu können?

Danke

[setstate]

Nach dem Speichern gehört die index.html aber dem root User. Nutzt der FTP Client wirklich nicht root?
Ansonsten auf der Console per chown den Owner ändern oder per chmod 666 index.html die Rechte ändern.