New FHEM Tablet UI

Gunther · 24 November 2015, 14:43:04

Zitat von: setstate am 24 November 2015, 08:40:13

So kann man auch den Batteriestand anzeigen lassen:

Code Auswählen Erweitern
<div data-type="symbol" data-device="WohnzimmerHeizung" data-get="batteryLevel" data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]' data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]' data-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'> </div>

Mario, kannst Du bitte kurz erläutern, was sich hier im Detail hinter verbirgt? Ich habe nur eine grobe Idee:

Code Auswählen

data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'

Kann ich simulieren, das eine Batterie in einem dieser "Level" unterwegs ist um zu testen, dass es läuft?

setstate · 24 November 2015, 14:50:52

Hallo Gunther,

das sind die Spannungsbereiche in RegEx Schreibweise.

3.0-3.9
2.7,2.8,2.9
2.4,2.5,2.6
usw.

Man kann sich ein Dummy anlegen und dann damit testen:

Code Auswählen

data-device="dummy1" data-get="STATE"

Gunther · 24 November 2015, 15:00:55

Danke!
Und

Code Auswählen

"((2.0)|([01].[0-9]))"
steht für 1,0-2,0 ?

setstate · 24 November 2015, 15:10:43

genau: entweder 2.0 oder 0.0-1.9
| ist das ODER Zeichen
() ist eine Gruppe, wichtig für die ODER Verknüpfung
[] ist eine Auswahl, eines davon muss vorkommen [0-9] ist die Kurzform von [0123456789]

Gunther · 24 November 2015, 15:15:17

Perfekt, jetzt habe ich auch verstanden! Ist das Perl?

setstate · 24 November 2015, 15:23:08

Nein, das sind allgemeine Reguläre Ausdrücke, die gibt es in fast allen Sprachen. FTUI arbeitet auf Clientseite ausschließlich in Javascript.

hier ein Regex Tester Online
https://regex101.com/

Nobby1805 · 24 November 2015, 16:24:33

Zitat von: FunkOdyssey am 24 November 2015, 11:45:20
... und sogar ein Tablet kaufe:

ich benutze es primär NICHT auf meinem tablet sondern auf dem Desktop

xxsteffenxx · 24 November 2015, 18:36:30

Zitat von: xxsteffenxx am 21 November 2015, 14:32:27
Hallo zusammen,
seit heute funktioniert meine farbliche Anzeige für den Modus meines MAX Thermostat nicht mehr.

ich habe folgendes in meiner html
Code Auswählen Erweitern
<div data-type="symbol" data-device="WZ_Thermostat" data-get="mode" data-get-on='["auto","manual","boost"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual","fa-spinner fa-pulse"]' data-on-colors='["#228b22","#ff0000","#0000ff"]' > </div>

Hat mir hier jemand rat?
Bei meinem PRESENCE Modul klappt das farbliche....
siehe Bilder
war bisher immer so das das icon farblich je nach "mode" war.
Heute ändert es aber keine Farbe ist immer nur grau...

jemand ne Idee?

Steffen

setstate · 24 November 2015, 19:19:14

Hallo Steffen,

am Code selbst ist alles okay. Ich vermute wieder, ein anders Element verursacht ein Problem und die Seite wird dadurch nicht vollständig geladen und initialisiert.
Siehe Thema von heute morgen: http://forum.fhem.de/index.php/topic,34233.msg364150.html#msg364150

xxsteffenxx · 24 November 2015, 19:33:07

Hallo,

Danke für den Tipp hab ich gerade versucht; gleiches Ergebnis. aber ich vermute in meiner Index html liegt der Hund begraben,

Hab mir die Index-empty heruntergeladen, der <head> bereich der emtpy und meiner ist ganz verschieden, bzw. mit der empty funktioniert gar nichts.

anbei mal mein <head> teil der Index. Vielleicht siehst du da etwas ungewöhnlich oder falsches.

Code Auswählen

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="widget_base_width" content="120">
    <meta name="widget_base_height" content="150">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
	<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
	<meta name='gridster_disable' content='1'>
	<meta http-equiv="Cache-Control" content="no-cache" />
	
		
	<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.gridster.min.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/lib/font-awesome.min.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/lib/jquery.toast.min.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/lib/powerange.min.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/lib/openautomation.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/lib/fhemSVG.css" />
	<link rel="stylesheet" href="/fhem/www/pgm2/jquery-ui.min.css" />
	<link rel="stylesheet" href="/fhem/www/tablet/css/fhem-tablet-ui-user.css" />
		
	<script type="text/javascript" src="/fhem/www/pgm2/jquery.min.js"></script>
  <script type="text/javascript" src="/fhem/www/tablet/lib/jquery.knob.mod.min.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.toast.min.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.circlemenu.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/lib/powerange.min.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/lib/jquery.gridster.min.js"></script>
  <script type="text/javascript" src="/fhem/www/tablet/lib/fa-multi-button.min.js"></script>
	<script type="text/javascript" src="/fhem/www/tablet/js/fhem-tablet-ui.js"></script>
	<script type="text/javascript" src="/fhem/www/pgm2/jquery-ui.min.js"></script>

Nobby1805 · 24 November 2015, 23:15:59

Zitat von: setstate am 24 November 2015, 08:53:17
Da muss man etwas in der ftui_range.css tricksen

.labelMax{ top:-10px; }

Zitat von: Nobby1805 am 24 November 2015, 09:39:10
ganz exakt: -9.4px ... dann erscheint die Schrift auch nicht mehr etwas dicker als die anderen

Der exakte Wert für die Trickserei scheint auch noch vom Browser abhängig zu sein

wäre es nicht besser, die eine Ausgabe ganz zu unterdrücken wenn die beiden Werte gleich sind ?

uniqueck · 24 November 2015, 23:27:11

Guten Abend,

ist es eigentlich möglich, über einen Dummy ein Widget mit Warn zu steuern und dann auch noch unterschiedlich einzufärben?

Also wie folgt:

dummy hat den Wert Wertstoff_6 --> Werstoff Tonne wird in 6 Tagen abgeholt
nächste Woche hat der selbe Dummy dann den Wert Restmuell_6 dann wird in 6 Tagen die Restmuell Tonne abgeholt.
Da wir nur die beiden Tonne hier kennen, wollte ich etwas Platz auf dem Tablet sparen und dachte mir mach ich es mit einem Symbol mit warn Icon, in welchen die Tage angezeigt werden, wann die Tonne abgeholt wird.

Code Auswählen

<div data-device="dy_Abfall" data-type="symbol" data-get="state" class="bigger warn" data-get-on="[&quot;Restmuell_(\d+)&quot;,&quot;Wertstoff_(\d+)&quot;]" data-on-colors="[&quot;#000&quot;,&quot;#6EB54C&quot;]" data-icon="fa-trash-o"></div>

Wobei ich vermute das das dann beim Auslesen der Werte für das warn Symbol zu Problemen führt, oder?
Hat jemand einen Idee, wie man so etwas sonst lösen könnte.

setstate · 24 November 2015, 23:44:56

Zitat von: Nobby1805 am 24 November 2015, 23:15:59
Der exakte Wert für die Trickserei scheint auch noch vom Browser abhängig zu sein wäre es nicht besser, die eine Ausgabe ganz zu unterdrücken wenn die beiden Werte gleich sind ?

Du hast Recht, das macht auf jeden Fall mehr Sinn. Werde ich noch ändern ...

Hier eine Demo-Page zum Widget: http://knowthelist.github.io/fhem/tablet/demo_range.html

setstate · 24 November 2015, 23:57:49

@uniqueck: vielleicht kannst du die Frage noch genauer erklären. Ich hab deine Absicht noch nicht verstanden ...

Aber, man kann 'warn' auch mit in die data-icons aufnehmen:

Code Auswählen


<div data-type="symbol" data-device="Eingangstuer" 
	 data-states='["open","closed"]' 
	 data-icons='["ftui-door warn","ftui-door"]' 
	 data-colors='["#999","#555"]' >
</div>

uniqueck · 25 November 2015, 00:14:02

Wenn die Dummy Variable den Wert Wertstoff_6 hat, dann soll das Icon eine grüne Tonne sein und das Warn Symbol soll die 6 zeigen.
Wenn die Dummy Variable den Wert Wertstoff_5 hat, dann soll das Icon eine grüne Tonne sein und das Warn Symbol soll die 5 zeigen.
...

Eine Woche später würden die Werte dann jeweils mit Restmuell_xx beginnen, dann soll das Icon eine schwarze Tonne zeigen und in dem warn Symbol dann wieder die Anzahl der Tage (xx).

Würde das über data-part="2" gehen?

Danke schon einmal für die Hilfe.