New FHEM Tablet UI

setstate · 05 November 2015, 23:00:50

Neues Widget Checkbox

Dieses Control ist nutzbar wie ein Switch, aber rein optisch eher für Setting-Einstellungen nützlich.

Code Auswählen


<div data-type="checkbox" data-device='myAT'
        data-get-on="!off"    data-get-off="inactive"
        data-set-on="active" data-set-off="inactive"
        class="green">
</div>

Nachtrag: gestern habe ich es noch hinbekommen, das Control per "Slide to Change" ändern zu können. Das ist auf Touchdisplays intuitiver zu bedienen.

P.A.Trick · 05 November 2015, 23:15:54

Cool Danke!

Gunther · 07 November 2015, 17:14:22

Ich habe die "Müll-Logik" zur Anzeige eines Ausrufe-Icons auf meiner Index-Seite eingebaut.
Leider wird mittlerweile das Icon auf der Index-Seite nicht mehr angezeigt. Auf der Müllseite selber klappt das wunderbar. Der Link klappt auch.

Habe ich da einen Bock drin den ich nicht finde? Freu mich über Hilfe.

Das ist mein Code in der index.html dazu:

Code Auswählen

<!-- ============= Müll  ================== -->
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1">
        <header>Muell</header>
	<div style="font-size:30px; color:rgb(96, 0, 0);" 
	data-type="button"
	data-device="Muellalert"
	data-color="#aa6900" 
	data-get-on='["on","off"]'
	data-url="muell.html" 
    data-icons='["fa-trash warn blink","fa-trash"]'
	class="cell"></div>
    

        <div data-type="label" class="narrow darker">Muell</div>
</li>

setstate · 07 November 2015, 20:45:04

@Gunther: Der Code selbst ist okay. Der Fehler muss wo anders liegen ...

setstate · 07 November 2015, 20:47:02

Neu: Circlemenu kann jetzt auch vertikal oder horizontal ausgeklappt werden.

Code Auswählen


data-direction="horizontal"
data-circle-radius="60"

setstate · 08 November 2015, 11:05:19

News: Highchart Widget von blackbluegl ist per update verfügbar

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

- Beispiele sind im examples Ordner verfügbar.

Achtung: die Highchart-Widgets holen Files (Google->Font, meteogram-Data) direkt aus dem Internet vom Client (Tablet) aus. Wer das nicht möchte, sollte diese highchart Widgets (widget_meteogram, widget_highchart, widget_highchart3d) nicht benutzen!

l3skon3 · 08 November 2015, 11:09:13

Danke für die vielen Neuerungen

ich weiss gar nicht wo ich anfangen soll.

skuggy · 08 November 2015, 13:42:23

Hi @uniqueck,

vielleicht kannst du mit dieser Meldung was anfangen:

Code Auswählen

SyntaxError: expected expression, got '<'
	

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht

widget_calview.js (Zeile 1)
Plugin dir: /fhem/tablet/js
fhem-tablet-ui.js (Zeile 114)
Filename: test.html
fhem-tablet-ui.js (Zeile 118)
Collecting required readings
fhem-tablet-ui.js (Zeile 211)
GET http://192.168.178.35:8083/fhem/tablet/js/widget_calview.js?_=1446986176002
	
200 OK
		0ms	
jquery.min.js (Zeile 4)
Loaded plugin: widget_calview
fhem-tablet-ui.js (Zeile 39)
calview
jquery.... > eval (Zeile 5)
device: GeburtstageView
jquery.... > eval (Zeile 10)
get: all
jquery.... > eval (Zeile 11)
max: 10
jquery.... > eval (Zeile 12)
all: 1
jquery.... > eval (Zeile 48)
all: 2
jquery.... > eval (Zeile 48)
all: 3
jquery.... > eval (Zeile 48)
all: 4
jquery.... > eval (Zeile 48)
all: 5
jquery.... > eval (Zeile 48)
all: 6
jquery.... > eval (Zeile 48)
all: 7
jquery.... > eval (Zeile 48)
all: 8
jquery.... > eval (Zeile 48)
all: 9
jquery.... > eval (Zeile 48)
all: 10
jquery.... > eval (Zeile 48)
max: #FFF200 #6EB54C
jquery.... > eval (Zeile 119)
Ist heute : false
jquery.... > eval (Zeile 131)
Ist in den nächsten 7 Tagen : true
jquery.... > eval (Zeile 132)
Ist heute : false
jquery.... > eval (Zeile 131)
Ist in den nächsten 7 Tagen : true
jquery.... > eval (Zeile 132)
Ist heute : false
jquery.... > eval (Zeile 131)
Ist in den nächsten 7 Tagen : true
jquery.... > eval (Zeile 132)
Ist heute : false
jquery.... > eval (Zeile 131)
Ist in den nächsten 7 Tagen : true
jquery.... > eval (Zeile 132)
Ist heute : false
jquery.... > eval (Zeile 131)
Ist in den nächsten 7 Tagen : true
jquery.... > eval (Zeile 132)
Ist heute : false
jquery.... > eval (Zeile 131)
Ist in den nächsten 7 Tagen : false
jquery.... > eval (Zeile 132)
TypeError: dateCheck is null
	

var c = dateCheck.split(".");

	
jquery.... > eval (Zeile 158, Spalte 6)
GET http://192.168.178.35:8083/fhem/?cmd=list+GeburtstageView+STATE&XHR=1&_=1446986176003
	
200 OK
		47ms	
jquery.min.js (Zeile 4)
ParameterHeaderAntwort

GeburtstageView      t: 6 td: 0 tm: 1

GET http://192.168.178.35:8083/fhem/?cmd=list+GeburtstageView+all&XHR=1&_=1446986176004
	
200 OK
		75ms	
jquery.min.js (Zeile 4)
ParameterHeaderAntwort

GET http://192.168.178.35:8083/fhem/?cmd=list+GeburtstageView+t_001_summary&XHR=1&_=1446986176005
	
200 OK
		75ms	
jquery.min.js (Zeile 4)
ParameterHeaderAntwort

GeburtstageView      2015-11-08 09:04:42 Mustermann

PatrickR · 08 November 2015, 18:34:56

Mahlzeit!

Erst einmal vom Spätwechsler ein großes Lob: Sehr schönes UI. Bin aktuell bei der Migration eines Dashboards

Habe ein Thermostat wie folgt definiert:

Code Auswählen


				<li data-row="1" data-col="2" data-sizex="1" data-sizey="2">
					<header>Klima</header>
					<div data-type="thermostat" data-device="OG.AZ.Thermostat_Climate" class="cell" data-valve=""></div>
					<div data-type="label" class="cell">Arbeitszimmer</div>
				</li>

Das Ergebnis ist allerdings nicht ein Widget sondern zwei (siehe Anhang) und die Labels sind verschoben.

Danke vorab.

Patrick

uniqueck · 08 November 2015, 22:01:44

Hi @skuggy,

versuchs mal mit der hier angehangenen widget_calview.js.
Habe mal noch einen null check eingebaut.

Gruß

Zitat von: skuggy am 08 November 2015, 13:42:23
Hi @uniqueck,

vielleicht kannst du mit dieser Meldung was anfangen:

Code Auswählen Erweitern
SyntaxError: expected expression, got '<' <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht widget_calview.js (Zeile 1) Plugin dir: /fhem/tablet/js fhem-tablet-ui.js (Zeile 114) Filename: test.html fhem-tablet-ui.js (Zeile 118) Collecting required readings fhem-tablet-ui.js (Zeile 211) GET http://192.168.178.35:8083/fhem/tablet/js/widget_calview.js?_=1446986176002 200 OK 0ms jquery.min.js (Zeile 4) Loaded plugin: widget_calview fhem-tablet-ui.js (Zeile 39) calview jquery.... > eval (Zeile 5) device: GeburtstageView jquery.... > eval (Zeile 10) get: all jquery.... > eval (Zeile 11) max: 10 jquery.... > eval (Zeile 12) all: 1 jquery.... > eval (Zeile 48) all: 2 jquery.... > eval (Zeile 48) all: 3 jquery.... > eval (Zeile 48) all: 4 jquery.... > eval (Zeile 48) all: 5 jquery.... > eval (Zeile 48) all: 6 jquery.... > eval (Zeile 48) all: 7 jquery.... > eval (Zeile 48) all: 8 jquery.... > eval (Zeile 48) all: 9 jquery.... > eval (Zeile 48) all: 10 jquery.... > eval (Zeile 48) max: #FFF200 #6EB54C jquery.... > eval (Zeile 119) Ist heute : false jquery.... > eval (Zeile 131) Ist in den nächsten 7 Tagen : true jquery.... > eval (Zeile 132) Ist heute : false jquery.... > eval (Zeile 131) Ist in den nächsten 7 Tagen : true jquery.... > eval (Zeile 132) Ist heute : false jquery.... > eval (Zeile 131) Ist in den nächsten 7 Tagen : true jquery.... > eval (Zeile 132) Ist heute : false jquery.... > eval (Zeile 131) Ist in den nächsten 7 Tagen : true jquery.... > eval (Zeile 132) Ist heute : false jquery.... > eval (Zeile 131) Ist in den nächsten 7 Tagen : true jquery.... > eval (Zeile 132) Ist heute : false jquery.... > eval (Zeile 131) Ist in den nächsten 7 Tagen : false jquery.... > eval (Zeile 132) TypeError: dateCheck is null var c = dateCheck.split("."); jquery.... > eval (Zeile 158, Spalte 6) GET http://192.168.178.35:8083/fhem/?cmd=list+GeburtstageView+STATE&XHR=1&_=1446986176003 200 OK 47ms jquery.min.js (Zeile 4) ParameterHeaderAntwort GeburtstageView t: 6 td: 0 tm: 1 GET http://192.168.178.35:8083/fhem/?cmd=list+GeburtstageView+all&XHR=1&_=1446986176004 200 OK 75ms jquery.min.js (Zeile 4) ParameterHeaderAntwort GET http://192.168.178.35:8083/fhem/?cmd=list+GeburtstageView+t_001_summary&XHR=1&_=1446986176005 200 OK 75ms jquery.min.js (Zeile 4) ParameterHeaderAntwort GeburtstageView 2015-11-08 09:04:42 Mustermann

Gunther · 08 November 2015, 22:20:48

Zitat von: setstate am 07 November 2015, 20:45:04
@Gunther: Der Code selbst ist okay. Der Fehler muss wo anders liegen ...

Hmm, wo liegen die fa-Files? Werden die Online gezogen?
Muss ich in meiner fhem.cfg nach dem Fehler suchen.

skuggy · 09 November 2015, 09:21:51

Zitat von: uniqueck am 08 November 2015, 22:01:44
Hi @skuggy,

versuchs mal mit der hier angehangenen widget_calview.js.
Habe mal noch einen null check eingebaut.

Gruß

Hi @uniqueck

Super, es funktioniert, zumindest teilweise. Heutige Termine werden nicht angezeit, siehe Anlage.

Und wie bekomm ich die Schrift kleiner? Ich habe class small genommen, aber das ist mir noch zu groß.

Danke

setstate · 09 November 2015, 09:40:24

Guten Morgen

wo ist den das widget_calview gehostet?
Soll/darf ich es mit in das FTUI Repo aufnehmen, damit es auch per Update verteilt wird?

ciao

gibacht · 09 November 2015, 12:14:35

Hallo,

sitze hier schon seit Stunden ...
Ich versuche meinen auf meinem Server liegenden Owncloudkalender per iframe ins UI einzubinden.
Links auf der Seite "Kalender" habe ich ein Menü.

Sofern ich http://xxx.xxx.xxx.xxx:8083/fhem/tablet/#calendar.html am PC per IE oder FF aufrufe ist alles OK.
Wenn ich mir das aber an dem Android-Tablet (mit "Browser") ansehe, wird der Kalender an der linken Seite um die Breite des Menüs abgechnitten.

Der Iframe kümmert sich also nicht um die

Code Auswählen

<li data-row="5" data-col="5" data-size="2" data-sizey="1">, und scheint sich an dem linken Rand des gesamten Anzeigebereichs zu orientieren.

Komischerweise ist das nur mit Owncloud so. Andere Seiten werden richtig dargestellt.

Was kann das sein?

Grüße
Dirk

boke · 09 November 2015, 16:29:07

Hallo, ich habe dieses Bild in diesem Beitrag gesehen.
Gibt es eine Anleitung, wo ich das Hintergrundbild ändern kann, oder kann mir jemand sagen in Welcher Datei? CSS oder der Index?
Und wie man die Transparenz einstellen kann?
Finde Das echt toll!
Viele Grüße!