New FHEM Tablet UI

[bjoernbo]

Hallo, das Chart sieht doch schon ganz gut aus. Da ich momentan unterwegs bin kann ich das noch nicht testen.
Frage: Wenn in einem Wetterlogfile z.B. Temperatur, Luftfeuchtigkeit und Niederschlag enthalten sind, kann ich alle drei Werte in einem Chart abbilden?
und: Wird mir die X-Achse in Stundenformat angezeigt? (00:00 , 02:00, 04:00 ...... )

[Nobby1805]

Hm ... funktioniert ... aber nicht so richtig

1. nach dem update der letzten Änderungen sind m.E. die Abstände zwischen den Zeilen deutlich größer geworden (da müsste ich ggf. auf die alte Version zurückgehen um das nachzuweisen)
2. die Kurve und auch die horizontalen Linien sind mit dem groben Pinsel gemalt
3. der Text der jetzt oberhalb der Grafik steht sollte laut Source darunter stehen

Code Auswählen Erweitern

<li data-row="3" data-col="1" data-sizex="2" data-sizey="4">
        <header>Draussen</header>
            <div class="label" class="cell">&nbsp;</div>
            <div data-type="label" data-device="Aussen" data-get="battery" data-part="2" data-limits='["ok"]' data-colors='["#00FF00"]'  class="cell"></div>
            <div data-type="label" data-device="Aussen" data-part="2" data-limits='[-73,10,23]' data-colors='["#6699FF","#AA6900","#FF0000"]' data-unit=" %B0C%0A" class="cell bigger thin top-space-2x inline"></div>       
            <div data-type="klimatrend" data-device="Aussen" data-get="statTemperatureTendency" data-refperiod="2" class="big inline"></div>
            <div data-type="klimatrend" data-device="Aussen" data-get="statTemperatureTendency" class="big inline"></div>
            <div class="label" class="cell">&nbsp;</div>
            <div data-type="label" data-device="Aussen" data-get="humidity" data-part="2" data-limits='[0,20,50]' data-colors='["#FF0000","#25833e","#0000FF"]' data-unit=" %" class="cell bigger thin  inline"></div>
            <div data-type="klimatrend" data-device="Aussen" data-get="statHumidityTendency" data-refperiod="2" class="big inline"></div>
            <div data-type="klimatrend" data-device="Aussen" data-get="statHumidityTendency" class="big inline"></div>
            <div class="label" class="cell">&nbsp;</div>
           <div data-type="simplechart"
              data-logdevice="FileLog_Aussen"
              data-logfile="Aussen-2015.log"
              data-columnspec="4:Aussen.temperature:1:int"
              data-minvalue="10"
              data-maxvalue="30"
              data-xticks="4"
              data-daysago="0"
              data-caption="Aussen"> 
          <div data-type="label" data-device="HMLAN1"
              data-get="uptime" class="small"">
</li>


[setstate]

Frage: Wenn in einem Wetterlogfile z.B. Temperatur, Luftfeuchtigkeit und Niederschlag enthalten sind, kann ich alle drei Werte in einem Chart abbilden?
und: Wird mir die X-Achse in Stundenformat angezeigt? (00:00 , 02:00, 04:00 ...... )

Grundsätzlich ginge das, aber zur Zeit ist es nur für einen Wert. Das müsste man entsprechend erweitern. Die Beschriftung für die X-Achse könnte ich noch flexibler machen. Jetzt wird nur der min und der max Tag als  dd-mm angezeigt.

[setstate]

Hm ... funktioniert ... aber nicht so richtig

1. nach dem update der letzten Änderungen sind m.E. die Abstände zwischen den Zeilen deutlich größer geworden (da müsste ich ggf. auf die alte Version zurückgehen um das nachzuweisen)
2. die Kurve und auch die horizontalen Linien sind mit dem groben Pinsel gemalt
3. der Text der jetzt oberhalb der Grafik steht sollte laut Source darunter stehen

Punkt 1. sollte jetzt wieder passen
Punkt 2. sollte mit dem SVG Attribut vector-effect="non-scaling-stroke" eigentlich vermieden werden, aber der IE unterstützt das nicht. Benutzt du IE?
Punkt 3. Die beiden letzten DIVs sind nicht geschlossen. Es fehlen die </div>

Bei der Größe habe ich noch etwas gedreht. Man kann jetzt die Größe auch festlegen (in % oder px)

Code Auswählen Erweitern

                   
data-width="90%"
data-height="120px"


[Nobby1805]

Hallo setstate

1) yep, ist jetzt wieder OK
2) ja, IE ... auf dem iPad ist es OK .. gibt es auch eine Lösung (Workaround) für den IE ?
3) Asche auf mein Haupt ... Danke 

aber jetzt habe ich noch 4 und 5 

4) sollte data-xticks nicht eher data-yticks heißen ?
5) wenn der Y-Bereich von 10 bis 30 geht und "x"ticks 4 ist ... dann werden die Linien bei 12, 16, 20, 24 und 28 gezeichnet ... üblich ist dort aber doch eher 10, 14, 18, 22, 26 und 30

Danke für die schnellen Änderungen,
Gruß Nobby

[Nobby1805]

und 6) wo ist bei mir eigentlich die Beschriftung der X-Achse und der Caption-Text ... liegt das auch am IE ?
und 7) kann es sein, dass die Werte auf ganze Zahlen gerundet werden ?

[setstate]

4) sollte data-xticks nicht eher data-yticks heißen ?
5) wenn der Y-Bereich von 10 bis 30 geht und "x"ticks 4 ist ... dann werden die Linien bei 12, 16, 20, 24 und 28 gezeichnet ... üblich ist dort aber doch eher 10, 14, 18, 22, 26 und 30

und 6) wo ist bei mir eigentlich die Beschriftung der X-Achse und der Caption-Text ... liegt das auch am IE ?
und 7) kann es sein, dass die Werte auf ganze Zahlen gerundet werden ?

4. ja, ganz blöd, habe ich verwechselt. Bitte ab sofot data-yticks verwenden
5. hier hast du auch Recht. War auch falsch, ist jetzt auch korrigiert
6. probiere mal eine fixen Wert: data-height="120px"
7. ja, aber jetzt passiert das nicht mehr

[Nobby1805]

6. probiere mal eine fixen Wert: data-height="120px"
7. ja, aber jetzt passiert das nicht mehr

zu 6) auch bei verschiedenen Werten für data-height kommt bei mir weder mit IE noch Safari eine Beschriftung
zu 7) doch passiert weiterhin, s. Screenshot vom iPad

und darf ich noch mal fragen, ob du einen Workaround für den IE siehst ?

Update: Ich habe bei einer Suche im Netz nur den Workaround gefunden, auf das Attribut "non-scaling-stroke" zu verzichten  und das scaling durch eigene Berechnung der stroke-width zu kompensieren ... ich schaue mal bei Windows 10 wie der neue MS-Browser sich dort verhält

Update2: Project Spartan in der Version 0.11.10074.0 verhält sich leider genauso wie der IE

[bjoernbo]

södele.... jetzt bin ich auch mal zum testen gekommen. Leider noch nicht von Erfolg gekrönt.

Ich habe mir das widget-simplechart neu geladen und die hem-tablet-ui.css aktualisiert! (Muss die ...ui.css eigentlich dafür auch auf dem neustem Stand sein, weil wir man meinem Ausschnitt entnehmen kann, sind die Abstände zu den Buttons aufeinmal anders)

Das Widget liefert allerdings keine Ergebnisse. Es wird mir auch noch nicht mal die "Caption" angezeigt, obwohl ich denke das ich alles richtig hinterlegt habe.

<li data-row="1" data-col="2" data-sizex="8" data-sizey="3">
   <div data-type="simplechart"
        data-logdevice="FileLog_LaCrosse_2A"
        data-logfile="LaCrosse_2A-2015.log"
        data-columnspec="4:meas.*:1:int"
        data-minvalue="0"
        data-maxvalue="10"
        data-yticks="1"
        data-daysago="0"
        data-caption="Kühlschrank"
        >
</li>

Frage: Das Log-File für meinen Energieverbrauch logge ich monatlich. Es ist ja sicherlich nicht im Sinne des Erfinders, dass ich jeden Monat im Code meinen Namen im Bezug auf das LogFile ändern soll. :-D :-D :-D

[Nobby1805]

Die veränderten Abstände hatte ich auch ...  hat setstate wohl heute morgen korrigiert ... bei mir jetzt OK
Bist du sicher, dass deine columnspec-Angabe korrekt ist ? kommen denn die y-ticks ?

[bjoernbo]

es kommt leider gar nichts!
Aber da sagst Du was, ich habe mir heute morgen mal die comref angeschaut im Bezug auf die columspec-Angaben. Ganz ehrlich? Ich habe das nicht verstanden 

denn in Spalte 4 steht doch die Temperatur 

2015-06-11_14:42:21 LaCrosse_2A battery: ok
2015-06-11_14:43:08 LaCrosse_2A T: 6.6
2015-06-11_14:43:13 LaCrosse_2A T: 6.7
2015-06-11_14:45:31 LaCrosse_2A T: 6.6
2015-06-11_14:50:08 LaCrosse_2A T: 6.5
2015-06-11_14:57:21 LaCrosse_2A temperature: 6.5
2015-06-11_14:58:09 LaCrosse_2A T: 6.4
2015-06-11_14:58:13 LaCrosse_2A T: 6.5
2015-06-11_14:58:17 LaCrosse_2A T: 6.4
2015-06-11_14:58:35 LaCrosse_2A T: 6.5
2015-06-11_14:59:09 LaCrosse_2A T: 6.4
2015-06-11_15:07:14 LaCrosse_2A T: 6.5
2015-06-11_15:07:18 LaCrosse_2A T: 6.4
2015-06-11_15:07:36 LaCrosse_2A T: 6.5
2015-06-11_15:16:06 LaCrosse_2A T: 6.6
2015-06-11_15:21:35 LaCrosse_2A T: 6.7
2015-06-11_15:22:23 LaCrosse_2A T: 6.6
2015-06-11_15:23:23 LaCrosse_2A T: 6.7
2015-06-11_15:27:26 LaCrosse_2A temperature: 6.7
2015-06-11_15:29:10 LaCrosse_2A T: 6.6
2015-06-11_15:33:16 LaCrosse_2A T: 6.5
2015-06-11_15:35:18 LaCrosse_2A T: 6.4
2015-06-11_15:35:22 LaCrosse_2A T: 6.5

[setstate]

Probiere mal das:

data-columnspec="4:temperature.*:1:int"

Die zweite Angabe ist der Zeilenfilter.

Zum Thema rolling Logfile, probiere als zweites Mal dies:
data-logfile="-"

Aber erstmal nur mit der ersten Änderung probieren, ob Daten kommen.

[bjoernbo]

bei beiden Methoden kommen keine Daten!!! Was ich ebenso wundert, dass die "caption" nicht ausgegeben wird und mir die Achsen gleich zweimal gezeichnet werden.

Ich habe es nebenbei auch mal eben im Firefox ausprobiert, nicht das Safari an dieser Stelle rumzickt!
Muss ich im übrigen die aktuelle ...ui.css haben? Diese hatte ich wieder durch meine alte ausgetauscht.

[Nobby1805]

Welcher der Werte im Log ist denn der richtige (ich kenne LaCrosse nicht) ... T oder temperature ? M.E. ist das ".*" falsch ...

Wie gesagt, die "caption" kommt bei mir auch nicht (IE11)

Update: du braucht die neue css ...

[bjoernbo]

  neue ui.css wieder geladen. (Effekt, dass die Buttons nicht mehr passen besteht weiterhin), egal
Anderes Device und Logfile ausgewählt => negativ

Wie gesagt, die "caption" kommt bei mir auch nicht (IE11)

Ok.