FTUI Neue Version chart_widget

Begonnen von eki, 31 Januar 2016, 00:17:26

Vorheriges Thema - Nächstes Thema

ahollik

:-( .. die Dateien im Anhang. ie wäre mir nicht das Problem, aber es verhält sich leider im WebViewControl auf meinem Android-Tablet auf dem Wohnzimmerwand ähnlich..

Lichti

Kleines Problem:
Es sollen 4 Werte dargestellt werden: Temperatur, Luftdruck, Wind, Regen.
Temperatur und  Luftdruck sollen vertikal mit Zahlenwerten versehen werden (data-yticks_format)
Temperatur, Luftdruck und Wind sollen einen vertikalen Beschreibungstext haben (data-ytext)
Bei Regen weren kleine Regenwolken angezeigt, ohne Regen sind diese nicht sichtbar (stehen dann unterhalb vom Chart).
Funktioniert alles wunderbar.

Jetzt wollte ich, damit bei leichtem Regen die Wolken schneller erscheinen, diesen Wert logarithmisch machen (data-ytype).
Funktioniert auch, die Wolken kommen jetzt schneller hoch.
Allerdings geht jetzt für diesen Wert die Formatierung der Ticks der Y-Achse nicht mehr.
(sollte leer sein, wird jetzt aber immer angezeigt und lässt sich auch nicht anders einstellen)

Kann ich das noch irgendwie beeinflussen ?


  <div data-type="chart"
     class="left-space"
     data-height="175"
     data-width="825"
     data-device="netatmoX"
     data-get="temperature"
     data-logdevice="FileLog_Wetter"
     data-columnspec='["4:rain","4:gust","4:temperature","4:pressure"]'
     data-style='["ftui l1sym",["2",["0","#008800","1"],["25","#0000CC","1"],["50","#AA0000","1"]],"ftui l5dash","ftui l0fill"]'
     data-ptype='["oa-weather_rain_light","lines","lines","lines"]'
     data-uaxis='[["secondary","2"],["secondary","1"],"primary",["secondary","0"]]'
     data-y_margin='["20"]'
     data-showlegend="true"
     data-legend='["Regen &nbsp &nbsp &nbsp","Wind &nbsp &nbsp &nbsp &nbsp","&nbsp;Temperatur","Luftdruck &nbsp"]'
     data-legendpos='["behind","50"]'
     data-ytext="Temperatur &deg;C"
     data-ytext_sec='["<b>Luftdruck</b> NN hPa","<i><b>Wind</b> 0..100 km/h</i>",""]'
     data-minvalue="auto"
     data-maxvalue="auto"
     data-minvalue_sec='["960","0","0.025"]'
     data-maxvalue_sec='["1060","100,","0.25"]'
     data-xticks="auto"
     data-yticks="auto"
     data-yticks_format="##.#"
     data-yticks_format_sec='["&nbsp&nbsp&nbsp; ####"," "," "]'
     data-yticks_prio="primary"
     data-ytype_sec='["","","log"]'
     data-show_both_axes="false"
     data-crosshair="true"
     data-title="Temperatur:  akt $eval(parseInt($data{currval3}*10)/10)&deg; / min $eval(parseInt($data{min3}*10)/10)&deg; / Ø $eval(parseInt($data{avg3}*10)/10)&deg; / max $eval(parseInt($data{max3}*10)/10)&deg;  -  Wind: max $eval(parseInt($data{max2}*10)/10) km/h"
     data-title_class="small thin darker"
     data-margin="2"
     data-timeranges='[["24 Stunden","24h","-2h"],["7 Tage","7D","-1D"],["30 Tage","30D","-1D"],["Heute","0D","-1D"],["Gestern","1D","0D"],["Letzter Monat","1M","0M"]]'
     data-nofulldays="true"
     data-daysago_start="24h"
     data-daysago_end="now"
  ></div>


TimoD

Bekomme irgendwie das <device>:<reading> für data-maxvalue_sec nicht ans laufen.

Definition sieht wie folgt aus:

<div data-type="chart"
data-device="THZAussenTemp"
data-logdevice='["DR_AusnTemp","FileLog_TFA_WIND_22","DRNetatmoAussen"]'
data-columnspec='["4:THZAussenTemp*","4:wind_avg_kmh*","4:rain_day*"]'
data-style='["ftui l4","ftui l2","ftui l5fill"]'
data-ptype="lines"
data-legend='["Temp","Wind","Regen"]'
data-uaxis='["primary","primary","secondary"]'
data-yunit=""
data-ytext=""
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec=""
data-ytext_sec=""
data-minvalue_sec="0"
data-maxvalue_sec="netatmo_M05_00_00_04_0c_e6:YAchse"
data-height="100%"
data-width="100%"
data-yticks="auto"
data-daysago_end="now"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
class="nobuttons fullsize">


Im Device:netatmo_M05_00_00_04_0c_e6 steht im reading YAchse: 8

Leider passiert es aber, dass im Anschluss die erste (und nicht die zweite) Y Achse bis zum Wert in netatmo_M05_00_00_04_0c_e6:YAchse skaliert und die restlichen Parameter nicht mehr ausgelesen werden.

Was mache ich hier falsch? Habe schon unterschiedliche Optionen versucht von einem anderen Device über andere Inhalte etc. aber leider klappt es nicht,....
Grüße Timo

curt

Nimm mal testweise "\\x3a::"


data-columnspec='["4:THZAussenTemp\\x3a::","4:wind_avg_kmh\\x3a::","4:rain_day\\x3a::"]'
RPI 4 - Jeelink HomeMatic Z-Wave

TimoD

Zitat von: curt am 20 Mai 2019, 17:30:42
Nimm mal testweise "\\x3a::"


data-columnspec='["4:THZAussenTemp\\x3a::","4:wind_avg_kmh\\x3a::","4:rain_day\\x3a::"]'


Leider nein, gleiches Problem,...

curt

Der Kollege, der das mit Testsystem perfekt betreut, ist offenbar derzeit nicht anwesend. Also musst Du mit uns vorlieb nehmen:

Zeige bitte die relevanten Stellen im Filelog.
RPI 4 - Jeelink HomeMatic Z-Wave

TimoD

Zitat von: curt am 21 Mai 2019, 23:54:29
Der Kollege, der das mit Testsystem perfekt betreut, ist offenbar derzeit nicht anwesend. Also musst Du mit uns vorlieb nehmen:

Zeige bitte die relevanten Stellen im Filelog.

Sehr gerne, was meinst du denn mit FileLog? Bekomme ich ein Log File aus FTUI? Oder welches FileLog meinst du?
Grüße Timo

eki

Das liegt nicht an der Definition, sondern ist ein Fehler im chart. Kannst Du mal bitte mit der angehängten Version testen.

abc2006

Gude,
ich hab ne Verständnisfrage:

Im Wiki steht

ZitatAktualisierung des Charts
Damit der Refresh des Charts funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von data-get ändert.

<div data-type="chart"
   data-device="WohnzimmerHeizung"
   data-logdevice="FileLog_WohnzimmerHeizung"
   ...>
</div>


Sollte dann in dem Beispiel nicht auch ein "data-get="temperature" enthalten sein?
Falls ja, füge ich das gerne ein. Wollte es aber vorher abklären.

Grüße,
Stephan
FHEM nightly auf Intel Atom (lubuntu) mit VDSL 50000 ;-)
Nutze zur Zeit OneWire und KNX

Masiwo

Hallo zusammen,

leider werden bei mir die Bilder der "Controls" nicht geladen (Siehe Screenshot)... Was könnte das für Gründe haben und wie kann ich das Debuggen ?
Der Code meiner Charts sieht folgendermaßen aus und grundsätzlich funktionieren diese auch..:
<div class="big" data-type="chart"
    data-device="TemperaturSensorDecke"
data-get="Temperature"
data-title="Temperatur und Feuchtigkeit Chart"
data-logdevice='["LogTemperaturSensorDecke"]'
data-columnspec='["TemperaturSensorDecke:Temperature:","TemperaturSensorDecke:Humidity:"]'
data-style='["ftui l2","ftui l0"]'
data-ptype='["quadraticSmooth","quadraticSmooth"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temperatur","Feuchtigkeit"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Feuchtigkeit (%)"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="3h"
data-daysago_end="now"
data-xticks="auto">
</div>                        </div>
                                <div class="cell-750">
<div class="big" data-type="chart"
    data-device="TemperaturSensorDecke"
data-get="Temperature"
data-title="Temperatur  Chart"
data-logdevice='["LogTemperaturSensorDecke"]'
data-columnspec='["TemperaturSensorDecke:Temperature:"]'
data-style='["ftui l2"]'
data-ptype='["quadraticSmooth"]'
data-uaxis='["primary"]'
data-legend='["Temperatur",]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yticks="auto"
data-nofulldays="true"
data-daysago_start="3h"
data-daysago_end="now"
data-xticks="auto">
</div>                        </div> 
</div>         
                </div>


Viele Grüße

Daniel

uwirt

Hallo alle,

kann mir jemand sagen wie ich es angehen muss um die Fonts im chart_widget zu ändern. Ich habe in meinen Grafiken eine Art von Times Roman, möchte aber lieber wie im Rest meines FTUI Helvetica haben.

Besten Dank
FHEM / Ubuntu / fitlet2
HomeMatic: CCU3|HmIP-STHD|HmIP-PCBS|HmIP-PCBS2|HmIP-PCBS-BAT|HM-WDC7000|HM-WDS100-C6-O|HM-WDS40|HM-LC-Sw1-FM|HM-LC-RGBW-WM|HM-ES-PMSw1-Pl|HM-ES-TX-WM
NAS: DS218+|DS209j|DS216+II|DS412+
Devices: Panasonic Webcams|Withings|Gardena Smart

eki

Zitat von: abc2006 am 28 August 2019, 10:02:40
Gude,
ich hab ne Verständnisfrage:

Im Wiki steht

Sollte dann in dem Beispiel nicht auch ein "data-get="temperature" enthalten sein?
Falls ja, füge ich das gerne ein. Wollte es aber vorher abklären.

Grüße,
Stephan

ohne data-get wird das chart nicht automatisch aktualisiert, wenn sich an den Daten etwas ändert. Es wird dann zwar der aktuelle Stand angezeit, aber das Chart bekommt keinen Trigger um automatisch neu zu malen, wenn sich etwas geändert hat.

eki

#462
Zitat von: Masiwo am 31 August 2019, 12:56:17
Hallo zusammen,

leider werden bei mir die Bilder der "Controls" nicht geladen (Siehe Screenshot)... Was könnte das für Gründe haben und wie kann ich das Debuggen ?


Das wurde hier https://forum.fhem.de/index.php?topic=89213.0 mal behandelt, hängt mit font-awesome zusammen. Im Wesentlichen sollte sicher gestellt sein, dass die Versionen der FTUI files zusammen passen (also ftui_chart.css sollte passend sein zu fhem-tablet-ui. In der neuesten FTUI Version wird Font Awesome 5 verwendet daher sollte im ftui_chart.css folgendes stehen:

* Definition of size etc. for the buttons */
.buttons {
font-size: 24px;
fill: #555;
font-weight: 900;
font-family: 'Font Awesome 5 Free';
}

eki

Zitat von: uwirt am 11 Oktober 2019, 11:56:08
Hallo alle,

kann mir jemand sagen wie ich es angehen muss um die Fonts im chart_widget zu ändern. Ich habe in meinen Grafiken eine Art von Times Roman, möchte aber lieber wie im Rest meines FTUI Helvetica haben.

Besten Dank

Änderung der Fonts geht über css Klassen. Du kannst entweder die Klassen selbst im File ftui_chart.css verändern (dazu würde ich aber nicht raten, weil das dann mit jedem Update wieder kaputt geht) oder, besser, die Änderungen im fhem-tablet-ui-user.css machen (sicher stellen, dass das auch in Deine Webseite eingebunden wird (möglichst am Ende des HTML <head>) mit:
<link rel="stylesheet" href="./css/fhem-tablet-ui-user.css" />
.
Beispiel zu den Klassen, die Du anpassen solltest:

/* Definition of the axes generally*/
.text.axes {
    font-family: "Helvetica";
}
/* Definition for crosshair cursor */
.crosshair {
    font-family: "Helvetica";
}
/* Definition for caption texts ('legend' and 'cursor') */
.caption {
    font-family: "Helvetica";
}
/* Definition for legend window */
.legend {
    font-family: "Helvetica";
}


Da kannst Du auch andere Dinge festlegen (z.B. die Größe der Fonts etc.).

uwirt

#464
Zitat von: eki am 11 Oktober 2019, 13:07:12
Änderung der Fonts geht über css Klassen. Du kannst entweder die Klassen selbst im File ftui_chart.css verändern (dazu würde ich aber nicht raten, weil das dann mit jedem Update wieder kaputt geht) oder, besser, die Änderungen im fhem-tablet-ui-user.css machen (sicher stellen, dass das auch in Deine Webseite eingebunden wird (möglichst am Ende des HTML <head>) mit: ...



Ich habe das versucht mit dem stylesheet - leider bisher ohne Erfolg. Die Fonts verändern sich kein bisschen.

Kann das sein weil meine html-Datei in einem Unterverzeichnis ist?


/volume1/@appstore/fhem/opt/www/tablet/iPad/climate.html


Die css-Datei ist hier:

/volume1/@appstore/fhem/opt/www/tablet/css/fhem-tablet-ui-user.css
FHEM / Ubuntu / fitlet2
HomeMatic: CCU3|HmIP-STHD|HmIP-PCBS|HmIP-PCBS2|HmIP-PCBS-BAT|HM-WDC7000|HM-WDS100-C6-O|HM-WDS40|HM-LC-Sw1-FM|HM-LC-RGBW-WM|HM-ES-PMSw1-Pl|HM-ES-TX-WM
NAS: DS218+|DS209j|DS216+II|DS412+
Devices: Panasonic Webcams|Withings|Gardena Smart