FTUI Neue Version chart_widget

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

Vorheriges Thema - Nächstes Thema

eki

Das mit der aktuellen Datei stimmt schon, mit aktuell ist dabei die Datei gemeint, in die aktuell geloggt wird. Ich werde es aber im Wiki ergänzen (CURRENT bedeutet, dass das File abhängig vom geplotteten Startwert genommen wird)

FFHEM

Prima, vielen Dank!
Gruß, Friedhelm
Raspberry Pi 4B, Homematic, Sonoff, Shelly, Worx, Arduino, ESP8266

Stütti

Zitat von: eki am 17 September 2018, 13:15:07
Problem müsste in der angehängten Version bereinigt sein (bitte sowohl das js File wie auch das css File austauschen), ich habe allerdings noch keine Zeit gehabt, weitere Dinge zu testen, die möglicherweise im Zusammenhang mit 2.7.2 auftreten. Es könnte also noch etwas nachkommen.

Guten Abend,
ich habe schon seit einiger Zeit das Problem, dass Symbole (z.B. fa-circle-o) im Chart als Datenpunkte nicht mehr angezeigt werden - siehe angehängtes Bild.

Als Workaround habe ich das data-ptype-Attribut an den entsprechenden Stellen mit "points" gesetzt, damit die Datenpunkte angezeigt werden.
Jetzt wollte ich es nochmals angehen, habe u.a. eki's css und js ausgetauscht (falls die nicht ohnehin mittlerweile mit dem Update mitkommt) und auch die @import-Zeile testweise mal auskommentiert. Leider scheinen die Font-Awesome-Icons weiterhin nicht korrekt eingebunden zu werden.

Dieselben Icons werden in anderen Widgets problemlos dargestellt.

So ist das Widget definiert:

<div  data-type="chart"
data-logdevice='["FileLog_Aussen.Temp","Vaillant_log","Vaillant_log","Vaillant_log","Vaillant_log","Vaillant_log"]'
data-columnspec='["4:Aussen.Temp.temperature","4:statWWStundenDayLast","4:statHzStundenDayLast","4:statPumpenstundenDayLast","4:WW_IST::","4:Vorlauf_IST::"]'
  data-style='["ftui l2","ftui l6sym","ftui l2sym","ftui l0sym","ftui l6","ftui l1fill"]'
data-ptype='["lines","fa-circle-o","points","points","lines","lines"]'
data-uaxis='["primary","primary","primary","primary","secondary","secondary"]'
  data-legend='["Temperatur Aussen", "● WWStunden", "● HzStunden", "● Pumpenstunden", "Wasser IST", "Vorlauf IST"]'
data-yunit="°C/h"
data-ytext="Temperatur/Stunden"
data-yunit_sec="°C"
data-ytext_sec="Temperatur"
  data-minvalue="-5"
data-minvalue_sec="10"
data-maxvalue="30"
data-maxvalue_sec="80"
data-xticks="1440"
data-yticks="5"
data-yticks_sec="10"
data-daysago_start="6"
data-daysago_end="-1"
data-crosshair="false"
data-scrollgroup="1"
  data-showlegend="true"
class="big fullsize nobuttons top-space">
</div>


Hat jemand eine Idee, woran das liegen könnte?

Danke und Gruß
Stütti
FHEM auf Pi 4 + FTUI auf Pi 3, Eltako 14, SignalESP, JeeLink, EasyESP, ArduCounter, eBus-Koppler, openDTU

eki

Da hat sich wohl noch ein Fehler mit der Einführung der neuen Font Awesome Icons (FTUI Version > 2.7.1 durch setstate im Chart eingeschlichen (siehe auch https://forum.fhem.de/index.php/topic,48450.msg837020.html#msg837020).
In der angehängten Version sollte das repariert sein.

Wird demnächst, wenn ich ein paar anderere Baustellen beseitigt habe, auch in die mit "Update" verteilte Version kommen.

Stütti

Hallo eki,

danke zunächst.
Leider sehen meine Datenpunkte noch so aus wie vorher.
Kann ich noch was testen bzw. benötigst du ggf. noch weitere Infos?

Stütti
FHEM auf Pi 4 + FTUI auf Pi 3, Eltako 14, SignalESP, JeeLink, EasyESP, ArduCounter, eBus-Koppler, openDTU

eki

Hast Du nach dem Austauschen des Files den Browser Cache gelöscht (Strg + Shift + Entf)? Bitte schau noch mal ob Du auch die css Datei aus dem folgenden Post https://forum.fhem.de/index.php/topic,48450.msg837020.html#msg837020verwendest.

Stütti

Ja, den Cache hatte ich geleert. Habe es auch gerade nochmals mobil auf einem Browser getestet, auf dem die Seite noch nie geöffnet wurde.

Die CSS ist auch die aus dem erwähnten Post. Laut Compare-Tool ist das aber die gleiche, die auch im Master-Branch im Git liegt.
FHEM auf Pi 4 + FTUI auf Pi 3, Eltako 14, SignalESP, JeeLink, EasyESP, ArduCounter, eBus-Koppler, openDTU

eki

Hast Du irgendwo (z.B. in der ftui-tablet-ui-user.css) font-weight gesetzt. Hast Du überhaupt FTUI 2.7.2 oder höher. Sind die Font Awesome Fonts richtig installiert

eki

Eventuell kannst Du ja auch mal Dein komplettes HTML hier posten, vielleicht fällt mir ja was auf.

Stütti

FTUI habe ich die Version 2.7.10

Font-weight habe ich gesetzt, aber "nur" für .button und .warn_symbol. Ich kann aber heute Abend nochmals über die DevTools gucken, was ausgewertet wird. Mir ist aufgefallen, dass das Icon selbst mit stroke-width=0px ankommt und der Parent-Container (der gesamte Graph) stroke-width=12px bekommt. Ist das korrekt? Details dazu kann ich ggf. später noch posten.
Meinst du mein HTML oder das, was im Browser ankommt? Der Chart selbst liegt auf einer Pagebutton-Seite.

Was bedeutet "Font Awesome richtig installiert" bzw. woran erkenne ich das? FTUI aktualisiere ich per update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt da bin ich davon ausgegangen, dass da alles mitkommt.
FHEM auf Pi 4 + FTUI auf Pi 3, Eltako 14, SignalESP, JeeLink, EasyESP, ArduCounter, eBus-Koppler, openDTU

eki

stroke width ist absicht, das betriff ja die Liniendicke, sonst werden die Symbole (sind ja SVGs) mit dicken Linien gezeichnet, das würde komisch aussehen.
Wenn Du schon in den DevTools bist, ist bei dem Text element (das mit stroke-width = 0) eine font-family gesetzt? Wenn ja, welche, wenn nein, läuft die falsche Version des widgets (dann noch mal prüfen, ob Du die widget_chart.js von oben wirklich an die richtige Stelle kopiert hast).

Lichti

#431
Interessehalber habe ich die Anzeige mit Symbolen jetzt auch mal probiert.
Sind bei mir auch nicht zu sehen.
FTUI-Version: 2.7.6

Was mir allerdings aufgefallen ist:
Mit der neuen Version blinkt der Hintergrund des Widgets in gewissem Abstand (vermutlich beim Akzualisieren) kurz hell auf.
Allerdings nur am iPad, am PC mit Firefox nicht,

Stütti

#432
Zitat von: eki am 01 Februar 2019, 09:17:28
stroke width ist absicht, das betriff ja die Liniendicke, sonst werden die Symbole (sind ja SVGs) mit dicken Linien gezeichnet, das würde komisch aussehen.
Wenn Du schon in den DevTools bist, ist bei dem Text element (das mit stroke-width = 0) eine font-family gesetzt? Wenn ja, welche, wenn nein, läuft die falsche Version des widgets (dann noch mal prüfen, ob Du die widget_chart.js von oben wirklich an die richtige Stelle kopiert hast).

So, ich habe jetzt mal die fhem-tablet-ui-user.css auskommentiert, um diese auszuschließen.
Ja, dem Element ist eine font-family zugewiesen - Font Awesome 5 Free:

Element {
stroke-width: 0px;
fill: rgb(51, 51, 204);
font-size: 12px;
text-anchor: middle;
font-family: "Font Awesome 5 Free";
}


Die Version von widget_chart.js über den Debugger ausgelesen:
/* FTUI Plugin
* Copyright (c) 2015-2017 Kurt Eckert
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*/
/* Version 2.8.1
/* Compatible FTUI Version >= 2.7.2


Hier noch die index.html
<!DOCTYPE html>
<html>

<head>
  <!--
     /* FHEM tablet ui */
     /*
     * Just another dashboard for FHEM
     *
     * Version: 1.4.4
     * Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <!-- <meta name="widget_base_width" content="48">
    <meta name="widget_base_height" content="57"> -->
  <meta name="gridster-cols" content="22" />
  <meta name="gridster-rows" content="12" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="longpoll" content="1" />
  <meta name="longpoll_type" content="websocket" />
  <meta name="longpoll_filter" content=".*">
  <meta name="debug" content="0" />
  <meta name='gridster_disable' content='1' />
  <meta name='lang' content='de' />

  <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" />

  <!-- define your personal style here, it wont be overwritten  -->
  <!-- <link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" /> -->
  <!-- <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /> -->

  <link rel="stylesheet" href="/fhem/tablet/css/even.css" data-type="theme" data-device="EvenOddDay" data-get-on="even" />
  <link rel="stylesheet" href="/fhem/tablet/css/odd.css" data-type="theme" data-device="EvenOddDay" data-get-on="odd" />

  <script src="/fhem/pgm2/jquery.min.js" defer></script>
  <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
  <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
  <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>

  <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
    <script src="/fhem/pgm2/webviewcontrol.js" defer></script>
     <!-- End for WebViewControl -->

  <title>FHEM-Tablet-UI</title>
</head>

<body>
  <div class="gridster">
    <ul>
      <li data-row="1" data-col="1" data-sizex="4" data-sizey="12">
        <header>MENU</header>
        <div class="sheet">
          <div data-type="pagebutton" data-url="#home.html" data-load="#content1" data-active-pattern="(.*/||.*#home.html)" data-icon="fa-home" data-background-icon="fa-circle-thin" data-on-color="#eeeeee" data-off-color="#eeeeee"
            data-on-background-color="#eeeeee" class="default cell bigger"></div>
          <div data-type="pagebutton" data-url="#klima.html" data-load="#content2" data-active-pattern=".*#klima.html" data-icon="fa-thermometer" data-background-icon="fa-circle-thin" data-on-color="#eeeeee" data-off-color="#eeeeee"
            data-on-background-color="#eeeeee" class="prefetch cell bigger"></div>
          <div data-type="pagebutton" data-url="#heizung.html" data-load="#content3" data-active-pattern=".*#heizung.html" data-icon="fa-area-chart" data-background-icon="fa-circle-thin" data-on-color="#eeeeee" data-off-color="#eeeeee"
            data-on-background-color="#eeeeee" class="prefetch cell bigger"></div>
          <div data-type="pagebutton" data-url="#system.html" data-load="#content4" data-active-pattern=".*#system.html" data-icon="fa-gear" data-background-icon="fa-circle-thin" data-on-color="#eeeeee" data-off-color="#eeeeee"
            data-on-background-color="#eeeeee" class="cell bigger"></div>
          <div class="row">
            <div class="cell bigger"></div>

          </div>
          <div class="row">
            <div class="cell">
              <div data-type="clock" data-format="G:i" class="tall"></div>
              <div data-type="clock" data-format="j. F Y" class=""></div>
            </div>
          </div>
        </div>
      </li>
      <li data-row="1" data-col="5" data-sizex="18" data-sizey="12">
        <div class="page" id="content1"></div>
        <div class="page" id="content2"></div>
        <div class="page" id="content3"></div>
        <div class="page" id="content4"></div>

      </li>
    </ul>
  </div>
</body>

</html>


Und die entsprechende Pagetab-Seite (heizung.html)
<!DOCTYPE HTML>
<html>

<head>
<title>HEIZUNG</title>
</head>

<body>
<div class="page" id="content3">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="16" data-sizey="10">
<header>HEIZUNG</header>
<div  data-type="chart"
data-logdevice='["FileLog_Aussen.Temp","Vaillant_log","Vaillant_log","Vaillant_log","Vaillant_log","Vaillant_log"]'
data-columnspec='["4:Aussen.Temp.temperature","4:statWWStundenDayLast","4:statHzStundenDayLast","4:statPumpenstundenDayLast","4:WW_IST::","4:Vorlauf_IST::"]'
data-logfile='["-","Vaillant_log-2019-01.log","Vaillant_log-2019-01.log","Vaillant_log-2019-01.log","-","-"]'
  data-style='["ftui l2","ftui l6sym","ftui l2sym","ftui l0sym","ftui l6","ftui l1fill"]'
data-ptype='["lines","fa-circle-o","points","points","lines","lines"]'
data-uaxis='["primary","primary","primary","primary","secondary","secondary"]'
  data-legend='["Temperatur Aussen", "● WWStunden", "● HzStunden", "● Pumpenstunden", "Wasser IST", "Vorlauf IST"]'
data-yunit="°C/h"
data-ytext="Temperatur & Stunden"
data-yunit_sec="°C"
data-ytext_sec="Temperatur"
  data-minvalue="-5"
data-minvalue_sec="10"
data-maxvalue="30"
data-maxvalue_sec="80"
data-xticks="1440"
data-yticks="5"
data-yticks_sec="10"
data-daysago_start="6"
data-daysago_end="-1"
data-crosshair="false"
data-scrollgroup="1"
  data-showlegend="true"
class="big fullsize nobuttons top-space">
</div>
</li>
<li data-row="11" data-col="1" data-sizex="16" data-sizey="2">
<header>ZÄHLERSTÄNDE</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div data-type="label" class="bold">GAS</div>
<div data-type="label" data-device="GasCal" data-get="AC_Gas4_Meter" data-unit="m³" class="big"></div>
</div>
<div class="cell">
<div data-type="label" class="bold">STROM</div>
<div data-type="label" data-device="ElectricityCal" data-get="AC_Strom6_CounterCurrent" data-unit="kWh" class="big"></div>
</div>
<div class="cell">
<div data-type="label" class="bold">WASSER</div>
<div data-type="label" data-device="WaterCal" data-get="AC_Wasser5_CounterCurrent" data-unit="m³" class="big"></div>
</div>
</div>
</div>
</li>
<li data-row="1" data-col="17" data-sizex="2" data-sizey="12">
<header>WERTE HEIZUNG</header>
<div data-type="label" class="bold top-space">Au&szlig;en</div>
<div data-type="label" data-device="Aussentemp" data-get="Aussentemp" data-unit="%B0C%0A" class="big"></div>
<div data-type="label" class="bold top-space">Raum IST</div>
<div data-type="label" data-device="RaumTemp_IST" data-get="RaumTemp_IST" data-unit="%B0C%0A" class="big"></div>
<div data-type="label" class="bold top-space">Raum SOLL</div>
<div data-type="label" data-device="RaumTemp_SOLL" data-get="RaumTemp_SOLL" data-unit="%B0C%0A" class="big"></div>
<div data-type="label" class="bold top-space">Vorlauf SOLL</div>
<div data-type="label" data-device="Vorlauf_SOLL" data-get="Vorlauf_SOLL" data-unit="%B0C%0A" class="big"></div>
<div data-type="label" class="bold top-space">Vorlauf IST</div>
<div data-type="label" data-device="Vorlauf_IST" data-get="Vorlauf_IST" data-unit="%B0C%0A" class="big"></div>
<div data-type="label" class="bold top-space">R&uuml;cklauf</div>
<div data-type="label" data-device="Ruecklauf" data-get="Ruecklauf" data-unit="%B0C%0A" class="big"></div>
<div data-type="label" class="bold top-space">Wasser SOLL</div>
<div data-type="label" data-device="WW_SOLL" data-get="WW_SOLL" data-unit="%B0C%0A" class="big"></div>
<div data-type="label" class="bold top-space">Wasser IST</div>
<div data-type="label" data-device="WW_IST" data-get="WW_IST" data-unit="%B0C%0A" class="big"></div>
<div data-type="label" class="bold top-space">Heizkurve</div>
<div data-type="label" data-device="HKurve" data-get="HKurve" data-unit="" class="big"></div>
<div data-type="label" class="bold top-space">HzStunden</div>
<div data-type="label" data-device="HzStunden" data-get="HzStunden" data-unit="h" class="big"></div>
<div data-type="label" class="bold top-space">Pumpenstunden</div>
<div data-type="label" data-device="Pumpenstunden" data-get="Pumpenstunden" data-unit="h" class="big inline"></div>
<div data-type="label" class="bold top-space">Wasserdruck</div>
<div data-type="label" data-device="Wasserdruck" data-get="Wasserdruck" data-unit="bar" class="big"></div>
</li>
</ul>
</div>
</div>
</body>

</html>


Edit: Ausgewertet sieht das für einen Datenpunkt so aus:
<text style="stroke-width: 0px;fill: rgb(51, 51, 204);font-size:12px;text-anchor:middle;font-family:&quot;Font Awesome 5 Free&quot;" min="0" x="369.2662637362637" y="611.89968" transform="translate(369.2662637362637 611.89968) scale(1,1) translate(-369.2662637362637 -611.89968)"></text>
Wenn ich die Symbole in anderen Widgets einbinde,  gibt es immer ein Pseudo-Element ::before. Müsste das hier auch so sein?
FHEM auf Pi 4 + FTUI auf Pi 3, Eltako 14, SignalESP, JeeLink, EasyESP, ArduCounter, eBus-Koppler, openDTU

curt

Hallo @eki,
ich stelle mich mal wieder zu doof an.

Ich will "Strom" grafisch darstellen. In FHEM/SVG funktioniert das auch schön:


# Created by FHEM/98_SVG.pm, 2019-01-31 19:36:15
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<TL>'
set ytics
set y2tics
set grid y2tics
set ylabel ""
set y2label "Watt"
set y2range 0:20

#FileLog_Stecker_01 4:Stecker_01.power\x3a::

plot "<IN>" using 1:2 axes x1y2 title 'Lampe AZ' ls l0 lw 1 with lines


Nun dachte ich, dass dass im Chart-Widget so geht:


<div class="top-space"
      data-type="chart"
      data-device='["Stecker_01","Stecker_02","Stecker_11","Stecker_06"]'
      data-logdevice='["FileLog_Stecker_01","FileLog_Stecker_02","FileLog_Stecker_11",FileLog_Stecker_06]'
      data-logfile="-"
      data-columnspec='["4:Stecker_01.power\\x3a::","4:Stecker_02.power\\x3a::","4:Stecker_11.power\\x3a::","4:Stecker_06.power\\x3a::"]'
      data-style='["ftui l2","ftui l6","ftui l1fill","ftui l1"]'
      data-height="165px"
      data-uaxis='["secondary","secondary","secondary","secondary"]'
      data-legend='["Lampe AZ","Pflanze","Server","PC"]'
      data-ptype='["lines","lines","lines","lines"]'
      data-yunit=""
      data-ytext="Watt"
      data-minvalue="0"
      data-maxvalue="100"
      data-yunit_sec=""
      data-ytext_sec="Watt"
      data-yticks="10"
      data-minvalue_sec="0"
      data-maxvalue_sec="100"
      data-cursorgroup="1"
      data-scrollgroup="1">
</div>


Es ist auch völlig egal, ob ich "4:Stecker_01.power\\x3a::" schreibe oder "4:power\\x3a::"

Eki, was mache ich da denn nun wieder falsch?

BTW: Eine sehr ähnliche Baustelle habe ich bei Feinstaub. Jaja, sage nichts, ich habe mir aus Neugier so einen Feinstaubsensor gekauft, 60 Tacken waren es. Ja, ich weiß, dass man das alles nicht sooo sehr ernst nehmen muss. Ja doch, ich weiß auch, wie das mit Messungen von Laien mit ungeeignetem Messgerät ist. - Das Problem ist eher, dass ich den Unfug nicht visualisiert bekomme.
RPI 4 - Jeelink HomeMatic Z-Wave

eki

Zitat von: Stütti am 01 Februar 2019, 20:57:58
So, ich habe jetzt mal die fhem-tablet-ui-user.css auskommentiert, um diese auszuschließen.
Ja, dem Element ist eine font-family zugewiesen - Font Awesome 5 Free:
...


Jetzt wird es klarer. Mit der neuen Version von Font Awesome (Version 5), die setstate ab 2.7.2 in ftui eingebaut hat, funktioniert das ausfüllen der icons anders. es gibt nicht mehr die extension -o um auszufüllen, man muss eine zweite Klasse anfügen ("fas" für solid und "far" für regualr also nicht ausgefüll, das ist auch der Default). Das muss ich so noch entsprechend einbauen. Bis dahin kannst Du nur entweder alle Graphen eines Charts auf gefüllt oder alle auf regular setzten. Dazu musst Du folgendes machen:

statt "fa-circle-o" nur "fa-circle" setzen und zusätzlich beim ganzen Chart die Klasse "fas" hinzugüfgen, also:
class="big fullsize nobuttons top-space fas"