[FHEM-Tablet-UI] User-Demos

[setstate]

also ich bekomm das nicht hin es bleibt immer noch schwarz...

hier die fhem-tablet-ui-user.css runterladen:

Code Auswählen Erweitern

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

und in dein html einfügen:

Code Auswählen Erweitern

   <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

Dann sollte es bunt werden

[xxsteffenxx]

So ...
habe nun alle Tipps umgesetzt und bekomme mal wieder eine leere Anzeige.

meine Index.html

Code Auswählen Erweitern

<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" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/www/pgm2/jquery-ui.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />



<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
  <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.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>
<script type="text/javascript" src="/www/pgm2/jquery-ui.min.js"></script>

meine Wohnzimmer.html

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="4" data-sizey="1">
    <div class="normal"
data-type="chart"
data-logdevice='["FileLog_WZ_Thermostat","FileLog_WZ_Thermostat","FileLog_WZ_Thermostat"]'
data-logfile='["WZ_Thermostat-2015-11-01.log","WZ_Thermostat-2015-11-01.log","WZ_Thermostat-2015-11-01.log"]'
data-columnspec='["4:WZ_Thermostat.desiredTemperature","4:WZ_Thermostat.temperature","4:WZ_Thermostat.valveposition"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Termperatur Soll", "Temperature Ist", "Ventil"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div></li>

die jquery-ui.min.js liegt in pgm2, die fhem-tablet-ui-user.css liegt in tablet/css

Steffen

[xxsteffenxx]

Fehler gefunden

Irgendwie haben bei mir alle stylesheets und scripts den falschen Pfad gehabt

[eki]

@setstate: anbei nun eine neue Version des chart widgets mit den von Dir vorgeschlagenen Ergänzungen (flexible arrays, Einbinden von jquery-min-ui.js, Einbinden des CSS).
Bei der über js eingebundenen CSS Datei habe ich nicht so ganz verstanden warum wir die ftui_chart_orange.css nennen sollen, ich habe sie jetzt unter dem Namen ftui_chart.css eingebunden.

[setstate]

Hallo eki,

vielen Dank für dein Chart-Widget - ich habe es jetzt ins Repo aufgenommen und hochgeladen.

[l3skon3]

Hallo,

Widget_Chart ist super! Klasse gemacht!

Es klappt bei mir auch super, als einzelnes Widget:

Code Auswählen Erweitern

<header>TEST</header>
    <div class="top-space"
data-type="chart"
data-device="TS_EG_SKUECHE"
data-logdevice='["FileLog_TS_EG_SKUECHE","FileLog_TS_EG_SKUECHE","FileLog_TS_EG_SKUECHE"]'
data-columnspec='["4:desired-temp","4:measured-temp","4:actuator"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Ist", "Soll", "Ventil"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="500px">
    </div>


doch wenn ich versuche den Code in ein Popup zu stecken dann kommt eine Warnung und es scheint nicht zu funktionieren, klappt aber nach ca. 2 Minuten doch und es erscheint Chart im Popupfenster. (siehe Anhang)

Code Auswählen Erweitern

<div data-type="popup" data-width="1200px" data-height="600px">
<div data-type="label" data-device="TS_OG_BAD_Clima" data-get="measured-temp" data-limits='[10,15,23]' data-colors='["#6699FF","#aa6900","#bb6242"]' data-unit="%B0C%0A" class="big"></div>
<div class="dialog top-space">
<header>TEST</header>
<div class="normal"
data-type="chart"
data-device="TS_EG_SKUECHE"
data-logdevice='["FileLog_TS_EG_SKUECHE","FileLog_TS_EG_SKUECHE","FileLog_TS_EG_SKUECHE"]'
data-columnspec='["4:desired-temp","4:measured-temp","4:actuator"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Ist", "Soll", "Ventil"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="500px">
</div>
</div>
</div>

Grüße

Daniel

[blackbluegl]

Geduld, ist schon in Arbeit. blackbluegl hat schon geliefert, jetzt muss ich mir das ansehen ....

Ich bleib dran und werde noch weiter nachliefern, sobald der minimale Stand jetzt durch ist. Sonst bauen wir zu viel hin und her. Ich hoffe ich hab mich weitestgehend an eure Struktur gehalten. 

[eki]

Hallo Daniel,

Das Verhalten kann ich bei mir nachvollziehen, liegt daran, dass das Chart im popup Fall angelegt aber nicht angezeigt wird, dadurch bekomme ich einige Infos nicht richtig. Muss mir mal überlegen wie ich das Umgehe. Ich melde mich.

[eki]

Bezüglich chart widget und popup. Ich hätte eine Lösung, dazu müsste allerdings auch eine kleine Änderung im popup widget erfolgen. Beim fadeIn (Zeile 57) müsste statt

Code Auswählen Erweitern

dialog.fadeIn(500);

Code Auswählen Erweitern

dialog.fadeIn(500,function () {$(this).trigger('fadein');});
stehen, dann würde beim Ende des fadeIn ein event getriggert, auf den ich hören könnte und erst danach das Chart richtig aufbauen.

@setstate: wäre das OK? falls ja würde ich ein update für das chart widget und das popup widget mit den entsprechenden Änderungen liefern, gib kurz Bescheid.

[wkarl]

Hallo h3ll,

hast Du was am Modul-code geändert, damit es mit DbLog funktioniert? Mit einem Wert funktioniert es, mit einem weiteren bleibt der chart leer.

ciao Walter

Hi,

@eki:
Nachdem ich das mit dem Array begriffen habe, hat sich der Umbau erledigt - Beispiel s.u. logdb ist mein DbLog, HISTORY die Tabelle, damit wir alles
einwandfrei aus meinem DbLog gelesen.

... und - Klasse Arbeit!

Code Auswählen Erweitern


<div class="normal"
data-type="chart"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
data-columnspec='["WZ.Sensor:temperature","WZ.Sensor:humidity","Pool.Sensor:temperature"]'
data-style='["ftui l3fill","ftui l4","ftui l1fill"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur", "Luftfeuchtigkeit","Pool"]'
...


Zu den Styles - ich denke, die wir jeder so anpassen, wie es ihm gefällt - als Basisset ok finde ich.

@setstate: +1 für Deine Änderungsvorschläge 


Cheers,

h3ll

[Gerd]

Hallo h3ll,

hast Du was am Modul-code geändert, damit es mit DbLog funktioniert? Mit einem Wert funktioniert es, mit einem weiteren bleibt der chart leer.

ciao Walter

Exakt das selbe Problem habe ich auch.

Wenn ich statt data-logdevice='["logdb","logdb","logdb"]'   nur data-logdevice='["logdb"]' mache bekomme ich natürlich nur einen Chart aber es werden trotzdem alle Werte von den anderen Devices übergeben, eben halt nur nicht angezeigt.
Bei mehr als einem logdevice bleibt das ganze bei "GET /fhem/?cmd=list+logd,logdb,logdb+STATE&XHR=1&_=1446810458029" stehen.  Anwort ist 3 mal connected.

Gruß Gerd

[setstate]

@setstate: wäre das OK? falls ja würde ich ein update für das chart widget und das popup widget mit den entsprechenden Änderungen liefern, gib kurz Bescheid.

@eki: das mit den Triggern geht i. O.

[l3skon3]

Bezüglich chart widget und popup. Ich hätte eine Lösung, dazu müsste allerdings auch eine kleine Änderung im popup widget erfolgen. Beim fadeIn (Zeile 57) müsste statt

Code Auswählen Erweitern

dialog.fadeIn(500);

Code Auswählen Erweitern

dialog.fadeIn(500,function () {$(this).trigger('fadein');});
stehen, dann würde beim Ende des fadeIn ein event getriggert, auf den ich hören könnte und erst danach das Chart richtig aufbauen.

@setstate: wäre das OK? falls ja würde ich ein update für das chart widget und das popup widget mit den entsprechenden Änderungen liefern, gib kurz Bescheid.

@setstate
@eki

danke im vorraus!

Gruß Daniel

[h3llsp4wn]

@Gerd/wkarl:
Ich habe nichts geändert - ich schaue zur Sicherheit noch mal nach, nicht, dass ich da was übersehen habe. Muss nur mal eine Sicherung machen. Ich habe aber noch das data-device ergänzt, da ich die Tage ein Update gemacht habe und es ohne gar nicht
läuft.

Sieht dann so aus:

Code Auswählen Erweitern


<div class="normal"
data-type="chart"
data-device="logdb"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'



So läufts bei mir jetzt. Ich hatte bei meinen ersten versuchen auch nur zwei von drei Sätzen zu Gesicht bekommen, da die Daten
außerhalb der definierten Anzeige lagen.


Cheers,

h3ll

[wkarl]

Halle h3ll,

das war es - 'data-device=MyDbLog' fehlte. Jetzt funktioniert es.

Danke nochmal.

ciao Walter