New FHEM Tablet UI

[bjoernbo]

ich habe alle ersetzt aus die die Index! Denn wenn ich die Index ersetze sind ja meine Werte weg, oder meinst du das ernst???

... und ich muss sagen, wiedermal genial! Das mit dem runden "data-fix" funktioniert!!!! (siehe SONSTIGES, Verbrauch)

(//)

[setstate]

Noch eine Anmerkung bzw. ein Verbesserungsvorschlag. Ich lasse mir den aktuellen sowie den Tagesverbrauch ausgeben. Die Werte sind allerdings zu lang. Kann ich diese "runden" lassen? (also ich weiß das man sowas mit JS machen kann, aber ich kann eben kein JS ) 

Hallo bjoernbo,

dafür gibt es ab sofort (v1.2.1) das data-fix Attribute für Label Widgets

Code Auswählen Erweitern

<div type="label" device="THSensorWZ" data-get="humidity" data-fix="0" data-unit="%" class="cell big"></div>

Die Zahl bei data-fix legt die Anzahl der Nachkommastellen fest.

[setstate]

Könntest Du mal kurz erklären, wie Du den Homestatus-Selektor einsetzt?
Ich habe einfach mal einen Dummy als Device eingetragen und dessen state wird auch entsprechend gesetzt, aber die Anzeige springt nach einigen Sekunden immer wieder auf "Home" zurück.

Sorry, das war ein Bug, der jetzt (v1.2.1) gefixed ist.
Ich steuere darüber auch ein Dummy, der per PRESENCE Modul verwaltet wird.

Viele Grüße
Mario

[setstate]

Kann ich einem switch-Widget - das einen dummy bedient, der die Werte 1 und 0 annehmen kann - sagen, dass "1" statt "on" und "0" statt "off" senden soll? Bzw. kann das Attribut "webCmd" ausgewertet werden?

Hallo nesges,

ja, mit den neuen Attributen: data-on="1" data-off="0"

Viele Grüße
Mario

[bjoernbo]

  @setstate ... das habe ich doch mit Post #60 zum Ausdruck gebracht. Funzt alles wunderbar! bereits umgesetzt!

So und nun .... GN8 :-D

[nesges]

ja, mit den neuen Attributen: data-on="1" data-off="0"

Danke! data-on funktioniert, für data-off wird nach wie vor "off" gesetzt. Ich nehme an, weil "0" irgendwo als false interpretiert wird. Setze ich data-off="hurz" funktioniert's wunderbar.

Edit: fhem-tablet-ui.js 174f

Code Auswählen Erweitern

$(this).data('on', String($(this).data('on')) || 'on');
$(this).data('off', String($(this).data('off')) || 'off');

Damit geht's bei mir. Ich hab allerdings kaum Ahnung von Javascript, kann also vollkommen falsch sein

Edit2: Unabhängig vom setzen der Werte funktioniert das Lesen nur noch wenn data-on/off explizit gesetzt sind. D.h. auch switches die on/off als state verwenden werden erst korrekt angezeigt, wenn data-on="on" data-off="off" gesetzt ist

[setstate]

Hallo nesges,

danke für die Info und den Lösungsansatz. Du lagst genau richtig, die '0' wird von der $.data() Funktion ungünstig interpretiert.

Hiermit geht es:

Code Auswählen Erweitern


$(this).data('on', $(this).attr('data-on') || 'on');
$(this).data('off', $(this).attr('data-off') || 'off');


Hab es geändert und update bei Github gemacht.

[Brockmann]

Wow, das geht ja richtig flott voran hier!

Und das Beste: Wenn man sich Featurewünsche verkneift, um nicht unverschämt zu erscheinen, werden sie über Nacht trotzdem umgesetzt (data-on & data-off)!   

Zwei Sache sind mir beim Testen gerade aufgefallen:

In der aktuellen Version scheint sich layoutmäßig etwas verändert zu haben, denn mit dem folgenden Code:

Code Auswählen Erweitern


<li data-row="4" data-col="1" data-sizex="2" data-sizey="1">
<header>BADEZIMMER - Lüftung</header>
<div class="left">
<div type="label" device="BZ_TC" data-get="humidity" data-unit="%" class="cell big"></div>
</div>
<div class="left">
<div type="switch" device="BZ_Luefter" data-icon="fa-spinner" data-on="on-for-timer 300" class="cell big"></div>
</div>
        <div class="right">
<div type="label" device="FO_TH" data-get="humidity" data-unit="%" class="cell big"></div>
</div>
</li>

passten gestern noch drei Elemente sauber nebeneinander in ein 2x1-Feld. Heute rutscht das dritte Element nach unten ab und ist nicht mehr ganz zu sehen. Wobei das aber rein platzmäßig auch kaum passen kann? Ist der Font eventuell größer geworden?

Beim longpoll ist mir aufgefallen, dass der längst nicht so zügig reagiert wie bei der FHEM-Web-GUI, wo die Änderungen ja praktisch sofort sichtbar werden. Nach ein paar Tests ist es bei mir so, dass die Werte real zweimal pro Minute aktualisiert werden (also exakt alle 30 Sekunden). Ist das so vorgesehen oder läuft da bei mir etwas schief?

Und doch mal zwei Feature-Wünsche (wirklich nur Anregungen/Wünsche, bitte nicht als Forderung missverstehen!):

Mehr Layout-Möglichkeiten:
Beispielsweise eine dritte Schriftgröße, etwa "cell small" wird die jetzige Standardschrift, "cell" wird eine Zwischengröße und "cell big" bleibt.
Neben class left und right noch middle (wenn das überhaupt Sinn macht, so ganz habe ich das Layout-Prinzip noch nicht verstanden, bislang mache ich das per trial-and-error  )
Eigene Farbangaben für Schriften (im Sinne für einzelne Elemente eine abweichende Farbe angeben).

Status-Selektor:
Ich weiß, das ist vermutlich aufwändiger als es scheint, aber es wäre toll, wenn der Status-Selektor konfigurierbar wäre, so dass man Icons und Beschriftung und eventuell auch set-Werte individuell anpassen kann. Man kann das zwar alles in der fhem-tablet-ui.js anpassen, aber das wird ja bei jeder neuen Version überschrieben. Deshalb wären Konfigurationsmöglichkeiten besser und dadurch würde dieses schöne Element auch universeller nutzbar.

[Brockmann]

Und noch eine Frage:
Sollte das Verändern des Grid per Drag& Drop eigentlich funktionieren? Bei mir klappt das weder in Firefox noch in Chrome.

[bjoernbo]

@Brockmann, dass ist mir auch aufgefallen. Unter Safari geht das auch nicht. Wenn ich allerdings die Seite http://gridster.net aufrufe und in den Demo Dialog wechsel ist das verschieben via Drag&Drop möglich.

[Brockmann]

Ich weiß nicht, ob ich mit dieser Gridster-Geschichte einfach nicht klar komme, oder ob da was nicht funktioniert (abgesehen von Drag & Drop, aber vielleicht hat das damit auch zu tun?).
Ganz einfaches Beispiel:

Code Auswählen Erweitern


<html>
<title>FHEM</title>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
* Version: 1.1.0
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="100">
<meta name="widget_base_height" content="135">

<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery.knob.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>

<!-- Enable this lines for usage with WebViewControl --><!--
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
--><!-- End for WebViewControl -->
</head>
<body>

<div class="gridster">
<ul>

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Element 1</header>
</li>

<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<header>Element 2</header>
</li>

<li data-row="3" data-col="3" data-sizex="1" data-sizey="1">
<header>Element 3</header>
</li>

</ul>
</div>
</body>
</html>


Drei Elemente, die jeweils um eins in X- und Y-Achse versetzt sein sollen.
Bei mir werden die aber einfach in der obersten Reihe nebeneinander angezeigt, also 1-1,1-2,1-3 statt 1-1,2-2,3-3?

[Mitch]

Ich kämpfe auch gerade damit und glaube einfach, ich verstehe das noch nicht ganz:

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Element 1</header>
</li>

data-row="1" heißt für mich Reihe 1
data-col="1" heißt Spalte 1
data-sizex="1" heißt Breite 1 (wie in <meta name="widget_base_width" content="100"><meta name="widget_base_height" content="135"> definiert)
data-sizey="1" heißt Höhe 1 (wie in <meta name="widget_base_width" content="100"><meta name="widget_base_height" content="135"> definiert)

Wenn ich jetzt folgendes definiere

Code Auswählen Erweitern

<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
<header>Element 1</header>
</li>
<li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
<header>Element 1</header>
</li>
<li data-row="2" data-col="1" data-sizex="2" data-sizey="2">
<header>Element 1</header>
</li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="2">
<header>Element 1</header>
</li>
<li data-row="3" data-col="1" data-sizex="4" data-sizey="2">
<header>Element 1</header>
</li>


Sollte ich ja ein Quadrat aus 4 Blöcken bekommen und einen Block drunter, mit gleicher Breite?

[Brockmann]

Sollte ich ja ein Quadrat aus 4 Blöcken bekommen und einen Block drunter, mit gleicher Breite?

Wobei Größe und Positionierung Deiner Elementen so nicht zusammenpassen (aber vielleicht nur ein Flüchtigkeitsfehler), denn Deine "kleinen" Elemente sind jeweils 2x2 groß, aber die Positionierung geht von 1x1 aus.
Also kann beispielsweise das zweite Element gar nicht bei 1-2 beginnen, weil das erste Element 1-1,1-2,2-1 und 2-2 abdeckt (denn es beginnt bei 1-1 und ist 2x2 groß).

[bjoernbo]

es gibt doch sicherlich ein WYSIWYG Tool in welchem man die index.html einladen kann und darüber bearbeiten kann, oder nicht??? Vielleicht bringt das ja Licht ins dunkle.

[setstate]

Und noch eine Frage:
Sollte das Verändern des Grid per Drag& Drop eigentlich funktionieren? Bei mir klappt das weder in Firefox noch in Chrome.

Leider bin ich kein Gridster.js Experte, ich fand das nur die ideale Basis für ein Dashboard.
Drag&Drop habe ich nur für Header enabled. Also einfach auf den Header "Wohnzimmer" klicken, dann bewegt sich was. Ansonsten würde bei jedem Klick das Element zappeln.
Aber ich denke, Drag & Drop  braucht man das nichtunbedingt für das Dashboard, oder was habt ihr damit vor?

Warum sich die einzelnen Elemente des Gridster nicht an die X und Y Vorgaben halten, weiß ich leider nicht. Ich denke, das ist eher ein Feature, das immer die optimale Verteilung aller Elemente berechnet. Ich habe dazu auch nix im Netz gefunden, nur eine Version von 2013, die sich genau an die Vorgaben hielt (1,1 + 2,2 + 3,3), aber andere Probleme macht. https://github.com/dustmoo/gridster.js