New FHEM Tablet UI

SirUli · 04 Januar 2016, 18:51:42

Hi zusammen,

nachdem das Thermostat Widget im Haushalt keinen Anklang fand, muss ich mir nun eine neue Möglichkeit zur Steuerung der Heizungen überlegen. Meine erste Idee war, einen Slider mit drei definierten Stufen zu verwenden (also eco, 20.5 und 21,5 °C), aber der Slider ist laut meinem Verständnis leider relativ Stufenlos ausgelegt, korrekt? Also es gibt nicht drei Positionen in denen er "einrasten" könnte?

Vielen Dank im Voraus!

viegener · 04 Januar 2016, 19:14:58

Zitat von: StefanJoe am 04 Januar 2016, 00:59:34
aber auch nochmal zurück zum Anfangsproblem:

Was ist denn aktuell die Empfehlung wernn man auf einer Seite eine "Übersicht" zeigen möchte und bei Klick auf ein Symbol (egal ob Menü oder sonstwas) Details (z.B. SVG Plots etc) angezeigt bekommen möchte ?

Generell haben wohl viele eine oder mehrere Reihen von Auswahlsymbolen an einem oder mehrerer Ränder.
Bei mir ist das links, dbaie ist ein Teil dieser Knöpfe wieder als Circlemenu ausgelegt.
Bei mir sind alle Knöpfe die die Anzeige wechseln "pagetab" widgets, die alle dasselbe menu (ein template) mitbringen und an der selben Stelle haben.

Du findest einige Beispiele im Thread user demos: http://forum.fhem.de/index.php/topic,37378.msg384304.html#msg384304

Diese können vielleicht als Anregung dienen auch wenn sie nicht unbedingt auf dem neuesten Stand sind.

Ob pagetabs oder andere Varianten, da kann ich keine grundsätzliche Empfehlung geben, ich finde pagetabs schicker und besser um die Inhalte zu strukturieren.

Johannes

kvo1 · 04 Januar 2016, 21:29:12

Hallo Johannes,
danke für die Beschreibung , werde mir DEINE Struktur nochmal ansehen.

Ich bin eigentlich genau wie in Wiki http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ beschrieben vorgegangen.
Wie baue ich ein Menü mit dem Pagetab Widget auf?

Die Index.html beinhaltet nur:
- menu-datetime.html Stellt Zeit / Datum dar
- main-menu.html das eigentliche Menü
- status.html Hier sollen mal globale Statis dargestellt werden

In der main-menu.html sind dann die weiteren SUB´s

hier mal 2 als Bsp.

Dennoch bekomme ich nicht immer die icons in Menü (main-menu.html) angezeigt , manchmal fehlt auch die erste Seite,
teilweise wird nix geladen.

Vielleicht hat noch wer eine Idee oder findet MEINEN Fehler

Gruss
klaus

viegener · 04 Januar 2016, 21:58:48

Zitat von: kvo1 am 04 Januar 2016, 21:29:12

Dennoch bekomme ich nicht immer die icons in Menü (main-menu.html) angezeigt , manchmal fehlt auch die erste Seite,
teilweise wird nix geladen.

Vielleicht hat noch wer eine Idee oder findet MEINEN Fehler

Was sagt denn firebug etc und passiert das nur in einem bestimmten browser/PLattform?

roman1528 · 04 Januar 2016, 22:13:47

Meine Demo is online

http://forum.fhem.de/index.php/topic,37378.msg384862.html#msg384862

viegener · 04 Januar 2016, 22:25:07

Zitat von: kvo1 am 04 Januar 2016, 21:29:12
Vielleicht hat noch wer eine Idee oder findet MEINEN Fehler

Warum hast Du defer an den Javascript-Teilen (insbesondere am jquery selbst)?
Gab es irgendwo einen Hinweis defer zu verwenden?

Bei mir verrusacht das eine ganze Reihe von Fehlermeldungen beim Laden Deiner Seiten.
Nimm das defer heraus und dann schauen wir weiter...

mircoby · 04 Januar 2016, 22:54:29

Zitat von: moelski am 03 Januar 2016, 19:09:29
Moins!

Ich bin gerade dabei Spritpreise als Chart darzustellen.
Mein Chart habe ich so konfiguriert:
Code Auswählen Erweitern
<div class="normal" data-type="chart" data-logdevice="FileLog_TANK_BaWue_Simus" data-columnspec='["4:TANK_Madfeld_Shell.DieselPreis", "4:TANK_Fuerstenberg_Esso.DieselPreis"]' data-style='["ftui l0", "ftui l1"]' data-ptype='["lines", "lines"]' data-uaxis='["primary", "primary"]' data-legend='["Madfeld", "Furstenberg"]' data-yunit="€" data-ytext="Euro / Liter" data-minvalue="0.8" data-maxvalue="1.3" data-height="135" data-width="600" data-nofulldays="true" data-cursorgroup="1" data-scrollgroup="1" data-xticks="auto"> </div>
Das funktioniert auch, aber die min / maxvalue Werte lassen scheinbar nur ganzzahlige Werte zu !? Ist dem so?
Oder muss man dafür was anderes noch konfigurieren? Bei Spritpreisen ist die Skalierung 0 bis 2 ziemlich unglücklich ... Vor allem wenn man eh nur ein 140 Pixel hohes Chart darstellt ..

Und hier hatte jemand geschrieben ... Das ist bei mir auch so. Aber nur beim IE edge. Wird es da noch einen Fix geben?

Grüße

Habe das gleiche vor, kann auch bestätigen dass die Autoskallierung scheinbar nur geradzahlige werte annimmt.

Eine manuelle skalierung mit einem Array für Min und Max wie es im simplechart gibt funktionieren leider nicht.

Bin prinzipiell begeistert von dem tollen Widget, ich hoffe jedoch dass es noch ein wenig fein geschliffen wird und ein Update bzw. Einstellungsstipps für den Anwendungsfall gibt.

Schöne Grüße
Mirko

viegener · 04 Januar 2016, 22:59:20

Weil es an anderer Stelle nochmals erfragt wurde, hier nochmal eine kurze Info wie man den HTTPSRV (oder FTUISRV)-Eintrags für das tablet UI machen kann (auch wenn das nicht der einzige Weg sein mag):

Der HTTPSRV-Eintrag soll es ermöglichen das FTUI unter einem selbstgewählten url wie zum Beispiel

Code Auswählen

http://meinfhem:8083/fhem/ftui
erreichbar zu haben, obwohl die Dateien in

Code Auswählen

<fhem-root>/www/tablet stehen.

Wenn man keine HTTPSRV-Definition anlegt wäre das ftui auch unter

Code Auswählen

http://meinfhem:8083/fhem/tablet/index.html erreichbar, da FHEMWeb die Dateien genau dort liest, wenn amn /fhem/tablet im URL angibt (wird übersetzt zu www/tablet). Ob FTUI dann aber korrekt funktioniert kann ich nicht sagen.

Eine HTTPSRV-Definition erzeugt einen anderen URL für ein Verzeichnis (!) im Dateisystem des FHEM-Servers. Also gibt die Definition den Namen an unter dem das FTUI erreichbar sein soll (nach dem verpflichtenden fhem) --> für das Beispiel oben ist das ftui in der commandref als "infix" bezeichnet. Ausserdem gibt sie den Pfad zum FTUI-Verzeichnis an --> In unserem Fall ist das ./www/tablet also relativ zum fhem-Wurzelverzeichnis.

Damit sollte die Definition für das Beispiel so lauten:

Code Auswählen

define meinftui HTTPSRV ftui ./www/tablet Mein-FTUI

Weder an ftui noch an ./www/tablet muss dabei ein abschliessender "/"

Damit aber das ganze auch wirklich gut funktioniert, sollte in der eigenen index.html noch das folgende Skript enthalten sein:

Code Auswählen


  <script language="javascript">
    if ( document.location.pathname == "/fhem/ftui" ) {
      var href = document.location.protocol + "//" + document.location.host + document.location.pathname + "/" + document.location.hash ;
      document.location.replace( href );
    }
  </script>

Dann funktioniert auch ein Aufruf ohne das abschliessende / korrekt wie unten:

Code Auswählen

http://meinfhem:8083/fhem/ftui

Alternativ kann auch eine Definition mit einem angefügten / erfolgen, auch wenn das so eigentlich in HTTPSRV nicht vorgesehen war:

Code Auswählen

define meinftui HTTPSRV ftui/ ./www/tablet Mein-FTUI

Inzwischen wurde die Behandlung in HTTPSRV so flexibel gemacht auch solche Definitionen zu behandeln.

Lasst mich wissen, wenn ich hier etwas beim Korrekturlesen übersehen habe, passe ich das hier noch an.

roman1528 · 04 Januar 2016, 23:07:09

Zitat von: viegener am 04 Januar 2016, 22:59:20
Weil es an anderer Stelle nochmals erfragt wurde, hier nochmal eine kurze Info wie man den HTTPSRV (oder FTUISRV)-Eintrags für das tablet UI machen kann (auch wenn das nicht der einzige Weg sein mag):

Der HTTPSRV-Eintrag soll es ermöglichen das FTUI unter einem selbstgewählten url wie zum Beispiel
Code Auswählen Erweitern
http://meinfhem:8083/fhem/ftui
erreichbar zu haben, obwohl die Dateien in
Code Auswählen Erweitern
<fhem-root>/www/tablet stehen.

Wenn man keine HTTPSRV-Definition anlegt wäre das ftui auch unter
Code Auswählen Erweitern
http://meinfhem:8083/fhem/tablet/index.html erreichbar, da FHEMWeb die Dateien genau dort liest, wenn amn /fhem/tablet im URL angibt (wird übersetzt zu www/tablet). Ob FTUI dann aber korrekt funktioniert kann ich nicht sagen.

Eine HTTPSRV-Definition erzeugt einen anderen URL für ein Verzeichnis (!) im Dateisystem des FHEM-Servers. Also gibt die Definition den Namen an unter dem das FTUI erreichbar sein soll (nach dem verpflichtenden fhem) --> für das Beispiel oben ist das ftui in der commandref als "infix" bezeichnet. Ausserdem gibt sie den Pfad zum FTUI-Verzeichnis an --> In unserem Fall ist das ./www/tablet also relativ zum fhem-Wurzelverzeichnis.

Damit sollte die Definition für das Beispiel so lauten:

Code Auswählen Erweitern
define meinftui HTTPSRV ftui ./www/tablet Mein-FTUI

Weder an ftui noch an ./www/tablet muss dabei ein abschliessender "/"

Damit aber das ganze auch wirklich gut funktioniert, sollte in der eigenen index.html noch das folgende Skript enthalten sein:

Code Auswählen Erweitern
<script language="javascript"> if ( document.location.pathname == "/fhem/ftui" ) { var href = document.location.protocol + "//" + document.location.host + document.location.pathname + "/" + document.location.hash ; document.location.replace( href ); } </script>

Dann funktioniert auch ein Aufruf ohne das abschliessende / korrekt wie unten:
Code Auswählen Erweitern
http://meinfhem:8083/fhem/ftui

Lasst mich wissen, wenn ich hier etwas beim Korrekturlesen übersehen habe, passe ich das hier noch an.

Ich auch nochmal!!!

IMMER EINEN / (SLASH) AM ENDE!!!

viegener · 04 Januar 2016, 23:08:42

Zitat von: roman1528 am 04 Januar 2016, 23:07:09
Ich auch nochmal!!!

IMMER EINEN / (SLASH) AM ENDE!!!

Sorry kannst Du das irgendwie erklären?
Johannes

justme1968 · 04 Januar 2016, 23:09:53

ich habe eben zusätzlich zu einem 7'' tablet noch ein 10'' in betrieb genommen. beide haben 1280x800 auflösung. wenn ich auf dem 10'' den bildschirm fülle wird auf dem 7'' in beide richtungen eine ganze menge abgeschnitten, wenn ich auf dem 7'' den bildschirm fülle ist auf dem 10'' noch massig platz. hat jemand ein idee warum das trotz gleicher auflösung passiert?

danke
andre

roman1528 · 04 Januar 2016, 23:25:39

Zitat von: viegener am 04 Januar 2016, 23:08:42
Sorry kannst Du das irgendwie erklären?
Johannes

Mit / = absoluter Aufruf
Ohne / = relativer Aufruf

Wenn ich jetzt eine URL ohne / (http://meine.url/ordner) am Ende aufrufe ist der Browser intelligent genug und sucht sich brav die index.html aus dem angegebenen Ordner. Feiner Browser.

Wenn ich aber wie bei FTUI dumme JavaScripts habe deren Ressourcen auch noch in Unterordnern (http://meine.url/ordner/ressourcen) liegen, funktioniert das nicht. Weil nur der letzte Ordner (ordner) bekannt ist. Aber JavaScript möchte (und da bleibt es stur) in seinem Ordner (ressourcen) ausgeführt werden. Wird aber nicht gefunden, weil kennen wir ja nicht. Doch ein doofer Browser. Oder JavaScript?

Rufe ich jetzt aber mit / (http://meine.url/ordner/ auf wechselt unser scheinbar doch nicht so schlauer Browser vollständig in das angegebene Verzeichniss und findet (endlich) auch den Ordner mit den Ressourcen für JavaScript. Und alle freuen sich des lebens... Wir und JavaScript

Grüße^^

P.S. ohne / (Slash) läuft es bei mir einfach nicht. Egal welchen "schlauen" Browser ich nehme. Es wird nur Müll angezeigt.

Sollten mal eine ganze Seite Icons ausfallen kann es am 'data-type="button"' liegen. Widget von nesges und läuft seit einiger Zeit nicht mehr.

Gunther · 04 Januar 2016, 23:36:55

Ich möchte gerne für meine Devices unterschiedliche Tablet UIs aufbauen.
Oder besteht mittlerweile die Möglichkeit das Ganze Full Responsive aufzubauen?

Falls nein, kann ich das wie folgt machen?:
######## Frontends #########
# Tablet UI für 7" Tablets
define TABLETUI07 HTTPSRV ftui/ ./www/tablet07 Tablet-UI

# Tablet UI für 10" Tablets
define TABLETUI10 HTTPSRV ftui/ ./www/tablet10 Tablet-UI

# Tablet UI für IPhone
define TABLETUIIPHONE HTTPSRV ftui/ ./www/tabletIphone Tablet-UI

viegener · 04 Januar 2016, 23:46:54

Zitat von: roman1528 am 04 Januar 2016, 23:25:39
Mit / = absoluter Aufruf
Ohne / = relativer Aufruf

Das gilt für den Anfang eines URLs nicht für das Ende (siehe auch def in wikipedia, der absolute Pfad enthält das Wurzelverzeichnis oder bei unixfilesystemen / am Anfang)

Zitat von: roman1528 am 04 Januar 2016, 23:25:39
Wenn ich jetzt eine URL ohne / (http://meine.url/ordner) am Ende aufrufe ist der Browser intelligent genug und sucht sich brav die index.html aus dem angegebenen Ordner. Feiner Browser.

Leider stimmt das nicht, denn der Browser hat damit nichts zu tun, diese Funktionialität steckt in 02_HTTPSRV Zeile 174:

Code Auswählen

$filename= AttrVal($name,"directoryindex","index.html") unless($filename);

Im Attribute directoryindex kann sogar angegeben werden, dass eine andere Datei gelesen wird.

Zitat von: roman1528 am 04 Januar 2016, 23:25:39

P.S. ohne / (Slash) läuft es bei mir einfach nicht. Egal welchen "schlauen" Browser ich nehme. Es wird nur Müll angezeigt.

Ich denke das lässt sich lösen, allerdings sprichst Du meines Wissens nach Dein tablet ui unter

.../www/tablet/...

an, das entspricht ja genau dem Fall, den ich oben nicht dargestellt habe, denn dafür benötigt man nicht unbedingt eine HTTPSRV definition.

Gunther · 04 Januar 2016, 23:50:54

Zitat von: Gunther am 04 Januar 2016, 23:36:55
Ich möchte gerne für meine Devices unterschiedliche Tablet UIs aufbauen.
Oder besteht mittlerweile die Möglichkeit das Ganze Full Responsive aufzubauen?

Falls nein, kann ich das wie folgt machen?:
######## Frontends #########
# Tablet UI für 7" Tablets
define TABLETUI07 HTTPSRV ftui/ ./www/tablet07 Tablet-UI

# Tablet UI für 10" Tablets
define TABLETUI10 HTTPSRV ftui/ ./www/tablet10 Tablet-UI

# Tablet UI für IPhone
define TABLETUIIPHONE HTTPSRV ftui/ ./www/tabletIphone Tablet-UI

Leider klappt das nicht:
Ich hätte erwartet, dass mir drei Links oben links in FHEM angezeigt werden, sobei mir jetzt auffällt, dass dort FTUI steht und ich das nirgendwo definiert habe.

Geht das überhaupt mit 3 unterschiedlichen FTUIs? Freue mich über Hinweise.