Autor Thema: FTUI Neue Version chart_widget  (Gelesen 41484 mal)

Offline dadoc

  • Sr. Member
  • ****
  • Beiträge: 646
Antw:FTUI Neue Version chart_widget
« Antwort #345 am: 06 August 2018, 11:13:40 »
Hallo Eki,
Auch nach ftui Update bleibt das Problem bestehen.
Zu dem Problem mit den Fehlermeldungen:
Um das nachvollziehen und reparieren zu können, bräuchte ich von Dir das genutzte HTML mit den Pagetabs (das verwende ich selbst nicht und kann es daher bei mir nicht nachstellen), damit ich das bei mir reproduzieren kann. Vorher könntest Du aber noch mal schauen, was passiert, wenn Du auf die neueste Version von widget_chart.js updatest (die, die mit dem ftui update aktuell mitgeliefert wird).
Hier meine index.html:
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
   <meta name="widget_base_width" content="74">
   <meta name="widget_base_height" content="73">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
   <meta name="longpoll_type" content="ajax">
   <meta name="longpoll_filter" content=".*">
   <meta name="longpoll_maxage" content="240">
   <meta name="shortpoll_interval" content="10">
   <meta name="debug" content="1"> <!-- 1=output to console;0=not output -->
   <meta http-equiv="Cache-Control" content="no-store" />
   <meta name="apple-mobile-web-app-status-bar-style" content="default">
   <meta name="mobile-web-app-capable" content="yes">

    <link rel="apple-touch-icon" href="/fhem/tablet/custom-icon.png" />
    <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/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

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


    <title>FHEM-Tablet-UI</title>
</head>
<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" class="semitransparent" data-template="menu.html"></li>
        </ul>
    </div>
</body>
</html>

menu.html:
<html>
<body>

<div data-type="pagetab" data-url="start.html"  data-icon="fa-arrow-up" class="big"></div>
<div data-type="pagetab" data-url="terrassen.html"  data-icon="fa-arrow-right" class="top-narrow big"></div>
<div data-type="pagetab" data-url="unten.html"  data-icon="fa-arrow-down" class="top-narrow big"></div>
        <div data-type="pagetab" data-url="sub2.html"  data-icon="fa-tv" class="top-narrow big"></div>
<div data-type="pagetab" data-url="sub5.html"  data-icon="fa-soundcloud" class="top-narrow big"></div>
<div data-type="pagetab" data-url="music.html"  data-icon="fa-music" class="top-narrow big"></div>
<div data-type="pagetab" data-url="sub_pool.html"  data-icon="fa-life-ring" class="top-narrow big"></div>
<div data-type="pagetab" data-url="settings.html"  data-icon="fa-cogs" class="top-narrow big"></div>
<div data-type="pagetab" data-url="unten_ipad.html"  data-icon="fa-mobile fa-rotate-90 fa-2x" class="top-narrow big"></div>
        <div class="top-space">
<div data-type="clock" data-format="H:i" class="large"></div>
<div data-type="clock" data-format="d.n.Y" class="small"></div>
        </div>
<div data-type="label"
data-device="KS300"
data-part="2"
data-limits='[-73,10,23]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit=" &deg;C"
class="large top-space">
</div>

<div data-type="symbol"
data-device="Regensensor_Regen"
data-states='["rain","dry"]'
data-icons='["oa-weather_rain","oa-weather_sun"]'
data-on-colors='["white","orange"]'
class="">
</div>
<div data-type="symbol"
data-get-on="armed"
data-get-off="disarmed"
data-icon="fa-dot-circle-o"
data-device="alarm_status_d"
data-on-color="red"
data-off-color="black"
class="blink">
</div>

</body>
</html>
Und auf den Seiten sieht das dann z.B. so aus (start.html):
<html>
<title>WOHNZIMMER</title>
<head>
<!--  <meta name="longpoll" content="1">
   <meta name="longpoll_type" content="websocket">
   <meta name="longpoll_filter" content=".*">
   <meta name="longpoll_maxage" content="240">
   <meta name="shortpoll_interval" content="10"> -->
</head>
<body>
<div class="gridster">
<ul>
<li data-row="7" data-col="2" data-sizex="2" data-sizey="3" class="semitransparent">
<header class="semitransparent">WOHNZIMMER</header>
  <div data-type="popup" data-height="600px" data-width="950px" data-draggable="false">

  <div data-type="range" data-device="THERMOSTAT_WZ_Climate"
           data-high="measured-temp" data-width="15"
           data-max="30" data-min="10" data-height="190"
           data-limit-low="16" data-limit-high="22"
           data-color-low="blue" data-color="green" data-color-high="red" class="left top-space left-space-2x"></div>
     
     
  <div class="container left left-space">
<div data-type="label"
data-device="THERMOSTAT_WZ_Climate"
data-get="measured-temp"
data-limits='[-73,19,23]'
data-colors='["#6699FF","#aa6900","#bb6242"]'
data-unit="%B0C%0A"
class="big top-space">
</div>

<div class="top-space-2x">Soll:</div>
<div data-type="label"
data-device="THERMOSTAT_WZ_Climate"
data-get="desired-temp"
data-limits='[-73,19,23]'
data-colors='["#6699FF","#aa6900","#bb6242"]'
data-unit="%B0C%0A"
class="narrow large thin">
</div>
        <div class="top-space">Feuchtigkeit:</div>
<div data-type="label"
data-device="THERMOSTAT_WZ_Climate"
data-get="humidity"
data-limits='[0,40,60]'
data-colors='["#bb6242","#aa6900","#bb6242"]'
data-unit="%"
class="narrow large thin">
</div>

<div data-type="symbol"
data-device="THERMOSTAT_WZ"
data-get="batteryLevel"
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'
data-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'
class="small">
</div>
<div data-type="label"
data-device="THERMOSTAT_WZ_Climate"
data-get="controlMode"
data-limits='[0,40,60]'
data-colors='["#bb6242","#aa6900","#bb6242"]'
data-unit=""
class="large thin narrow">
</div>
</div>
   
   
<div class="dialog">
          <header>TEMPERATUR WOHNZIMMER EINSTELLEN</header>
 <div class="container">
<div data-type="spinner"
                data-device="THERMOSTAT_WZ_Climate"
                data-min="10"
                data-max="24"
                data-unit="°"
data-step="0.5"
data-gradient-color='["blue","red"]'
data-get="desired-temp"
data-set="desired-temp"
data-width="350"
data-height="100"
data-longdelay="1000"
                class="value big left">
            </div>
           
<div class="big left top-space left-space-2x">Ist:
</div>
<div data-type="label"
data-device="THERMOSTAT_WZ_Climate"
data-get="measured-temp"
data-limits='[-73,19,23]'
data-colors='["#6699FF","#aa6900","#bb6242"]'
data-unit="%B0C%0A"
class="cell tall left">
</div>

          <div class="big narrow top-space left">Betriebsart:</div>
          <div data-type="select"
data-device="THERMOSTAT_WZ_Climate"
data-items='["auto","manual","boost","day","night"]'
data-get="controlMode"
data-set="controlMode"
class="cell left">
</div>

</div>

<div class="container inline">
      <div data-type="range" data-device="HT_WZ_LI_Clima"
           data-high="measured-temp" data-width="9"
           data-max="30" data-min="10" data-height="120"
           data-limit-low="16" data-limit-high="22"
           data-color-low="blue" data-color="green" data-color-high="red" class="left-space-2x"></div>

  <div data-type="label"
data-device="HT_WZ_LI_Clima"
data-get="measured-temp"
data-limits='[-73,19,23]'
data-colors='["#6699FF","#aa6900","#bb6242"]'
data-unit="%B0C%0A"
class="top-space large thin">
</div>
<div class="">
<div data-type= "symbol" data-icon="fa-cog" class="small inline"></div>
<div data-type="label"
data-device="HT_WZ_LI_Clima"
data-get="ValvePosition"
data-limits='[0,40,60]'
data-colors='["#bb6242","#aa6900","#bb6242"]'
data-unit="%"
class="inline large thin">
</div>
</div>
  <div data-type="symbol"
data-device="HT_WZ_LI"
data-get="batteryLevel"
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'
data-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'
class="small narrow">
</div>
    <div class="inline large thin">Links</div>
      </div>
<div class="container inline top-space">
      <div data-type="range" data-device="HT_WZ_RE_Clima"
           data-high="measured-temp" data-width="9"
           data-max="30" data-min="10" data-height="120"
           data-limit-low="16" data-limit-high="22"
           data-color-low="blue" data-color="green" data-color-high="red" class="left-space-2x"></div>

  <div data-type="label"
data-device="HT_WZ_RE_Clima"
data-get="measured-temp"
data-limits='[-73,19,23]'
data-colors='["#6699FF","#aa6900","#bb6242"]'
data-unit="%B0C%0A"
class="top-space large thin">
</div>
<div class="">
<div data-type= "symbol" data-icon="fa-cog" class="small inline"></div>
<div data-type="label"
data-device="HT_WZ_RE_Clima"
data-get="ValvePosition"
data-limits='[0,40,60]'
data-colors='["#bb6242","#aa6900","#bb6242"]'
data-unit="%"
class="inline large thin">
</div>
</div>
  <div data-type="symbol"
data-device="HT_WZ_RE"
data-get="batteryLevel"
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'
data-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'
class="small narrow">
</div>
    <div class="inline large thin">Rechts</div>
      </div>

   <div class="big"
data-type="chart"
data-height="280"
        data-device='["THERMOSTAT_WZ_Climate","KS300"]'
         data-logdevice='["FileLog_THERMOSTAT_WZ_Climate","FileLog_KS300"]'
         data-columnspec='["4:measured-temp:","4:T"]'
         data-style='["ftui l0fill","ftui l5fill"]'
         data-ptype='["lines","lines"]'
         data-uaxis='["primary","primary"]'
         data-yunit="°C"
         data-ytext=""
         data-legend='["innen","aussen"]'
         data-minvalue="auto"
         data-maxvalue="auto"
         data-yunit_sec=""
         data-ytext_sec=""
         data-yticks="auto"
         data-minvalue_sec="auto"
         data-maxvalue_sec="auto"
         data-daysago_start="0.5"
         data-daysago_end=""
         data-crosshair="true"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
         data-xticks="360"
>
</div>
  </div>
</div>
</li>
</ul>
</div>
</body>
</html>
Die Charts sind jeweils in Popups.
Der Fehler tritt BTW nicht nur unter iOS auf, sondern auch im Desktop-Chrome.
Danke & Grüße
Martin
Standort 1: FS20 mit CUL und FHEM (immer aktuelle Ver.) auf Raspberry Pi
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods)

Offline dadoc

  • Sr. Member
  • ****
  • Beiträge: 646
Antw:FTUI Neue Version chart_widget
« Antwort #346 am: 06 August 2018, 11:46:45 »
Hallo Eki,
Ich verstehe leider immer noch nicht wirklich was Dein Problem ist. Du hast ja einen Log Auszug gepostet. Dort ist der letzte Wert für Redox am 1.8. um 3:59:05 636 und der nächste Wert, der für Redox auftaucht, ist am 2.8. um 02:00:41 der Wert 436.50. Wenn ich mir den zugehörigen Bereich des Charts anschaue, dann wird genau das dargestellt und zwischen diesen beiden Werten eben eine gerade Linie gezogen.
Was genau soll denn Anderes passieren? Willst Du, dass diese Verbindungslinie weggelassen wird und der Plot erst wieder bei dem ersten Wert für den nächsten Tag weiter gezeichnet wird (woher soll das Programm wissen, welche Teile gezeichnet werden sollen und welche nicht)? Falls es das ist, könntest Du statt Linien Punkte verwenden (data-ptype="points") oder steps (data-type="steps" oder fsteps oder histeps).
Was ich erreichen möchte ist eine Kurve, die ausschließlich Werte zeigt, die in einem bestimmten Zeitraum (im Bsp. 02:00-04:00) gemessen werden und *nicht* "unterbrochen" wird von Werten (bzw. Nicht-Werten) aus dem restlichen Zeitraum (im Bsp. 04:00-02:00). Da es nach Anspringen der Filterpumpe eine Weile dauert, bis der korrekte Redoxwert in der Messzelle sich eingependelt hat, wäre es sogar noch besser, den Zeitraum noch weiter einzugrenzen, im Beispiel etwa auf 03:00-04:00.
Mit diesen Werten hätte ich dann gern einen Plot. Dazu müsste aber die x-Achse wohl nicht stur chronologisch sein.
In Excel würde das mit diesen (manuell vorbereinigten) Daten z.B. wie in der angehängten Grafik aussehen:
2018-07-20_03:00:15 637,31
2018-07-20_03:08:15 636,75
2018-07-20_03:16:15 636,06
2018-07-20_03:24:16 635,75
2018-07-20_03:32:16 635,12
2018-07-20_03:40:16 634,81
2018-07-20_03:48:16 634,81
2018-07-20_03:56:16 634,44
2018-07-21_03:04:21 626,06
2018-07-21_03:12:21 625,69
2018-07-21_03:20:21 623,69
2018-07-21_03:28:21 623,25
2018-07-21_03:36:21 622,25
2018-07-21_03:44:21 621,62
2018-07-21_03:52:21 621,31
2018-07-24_03:00:15 625,06
2018-07-24_03:08:15 624,75
2018-07-24_03:16:15 624,5
2018-07-24_03:24:15 624,62
2018-07-24_03:32:15 624,44
2018-07-24_03:40:15 624,31
2018-07-24_03:48:15 624,12
2018-07-24_03:56:15 624,06
2018-07-25_03:04:20 614,81
2018-07-25_03:12:20 614,06
2018-07-25_03:20:20 613
2018-07-25_03:28:20 612,19
2018-07-25_03:36:20 610,94
2018-07-25_03:44:20 608,69
2018-07-25_03:52:20 607
2018-07-26_03:00:28 628,31
2018-07-26_03:08:26 627,5
2018-07-26_03:16:26 626,81
2018-07-26_03:24:26 625,12
2018-07-26_03:32:26 624,25
2018-07-26_03:40:26 623,38
2018-07-26_03:48:26 622,31
2018-07-26_03:56:26 621,69
2018-07-27_03:11:03 656,75
2018-07-27_03:27:03 659,81
2018-07-27_03:43:03 662,06
2018-07-27_03:59:04 663,56
2018-07-28_03:15:09 670,62
2018-07-28_03:31:09 670,75
2018-07-28_03:47:09 670,56
2018-07-29_03:03:17 642,62
2018-07-29_03:19:17 646,38
2018-07-29_03:35:17 647,56
2018-07-29_03:51:17 648,44
2018-07-30_03:07:24 633,75
2018-07-30_03:23:24 635,62
2018-07-30_03:39:24 634,94
2018-07-30_03:55:24 632,75
2018-07-31_03:11:00 608,94
2018-07-31_03:27:00 606,75
2018-07-31_03:43:00 605,31
2018-07-31_03:59:00 603,44
2018-08-01_03:15:05 640,44
2018-08-01_03:31:05 638,25
2018-08-01_03:47:05 636,81
2018-08-02_03:03:11 652,25
2018-08-02_03:19:11 652,25
2018-08-02_03:35:11 653
2018-08-02_03:51:11 651,31
2018-08-03_03:07:18 660,31
2018-08-03_03:23:18 660,06
2018-08-03_03:39:18 659,31
2018-08-03_03:55:18 659,25
Krieg ich das irgendwie mit dem Chart Widget abgebildet?
Danke & Grüße
Martin
Standort 1: FS20 mit CUL und FHEM (immer aktuelle Ver.) auf Raspberry Pi
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods)

Offline eki

  • Sr. Member
  • ****
  • Beiträge: 706
Antw:FTUI Neue Version chart_widget
« Antwort #347 am: 06 August 2018, 17:16:45 »
OK, jetzt habe ich es hoffentlich auch kapiert (manchmal sitzt man einfach auf dem Schlauch). Ich sehe mehrere Möglichkeiten:

1. Du könntest über ein notify dafür sorgen, dass bei dem Device zusätzliche Readings entstehen, die entsprechend geclipped sind und diese dann zum Plotten nehmen.
Definiere ein notify folgendermaßen (<device> natürlich durch den Namen Deines Devices ersetzen):
define nft_clipReading notify <device> {
  my @readings2Clip = split(/\s+/,AttrVal($NAME,"readings2Clip","0"));
  my $minClip = AttrVal("$NAME","minClip","00:00:00");
  my $maxClip = AttrVal("$NAME","maxClip","23:59:59");
 
  foreach my $reading (@readings2Clip) {
    if ($reading) {
      my $val = ReadingsVal("$NAME",$reading,"");
      my ($ymd,$time) = split(/\s+/,ReadingsTimestamp("$NAME",$reading,"00:00:00"));
      Log3 undef, 5, "Reading ".$reading." at ".$time;
      fhem ("setreading ".$NAME." ".$reading."_clipped ".$val) if (($time ge $minClip) && ($time le $maxClip));
    }
  }
}
Zusätzlich setzt Du z. B. in dem device folgende Attribute:
attr <device> userattr minClip maxClip readings2Clip
attr <device> minClip 02:01:00
attr <device> maxClip 03:55:00
attr <device> readings2Clip Redox Wassertemperatur
Dann werden bei dem Device die Readings Redox_clipped und Wassertemperatur_clipped erzeugt, die nur Werte enthalten, die zwischen minClip und maxClip liegen und die kannst Du dann plotten.

2. LogProxy mit eigener Funktion
Das müsstest Du Dir anhand der Beschreibung zu logProxy selbst zusammen basteln. Für einen Perl Crack sicher kein Problem, ich habe dazu aber aktuell leider zu wenig Zeit (und außerdem ist das Wetter zu schön  ;) ).

3. Einbau eines Clipping in das chart Widget
Sollte nicht so kompliziert sein, wird aber ein wenig dauern, da ich aktuell noch anderweitig (mit dem Karten Widget) beschäftigt bin und auch noch eine andere Baustelle beim Chart habe (und außerdem ist das Wetter zu schön  ;) ).

Offline dadoc

  • Sr. Member
  • ****
  • Beiträge: 646
Antw:FTUI Neue Version chart_widget
« Antwort #348 am: 06 August 2018, 22:39:47 »
Vielen Dank Eki, das werde ich ausprobieren. Zwischenzeitlich hatte ich daran gedacht, ein zweites Log mit einer auf den Timestamp abzielenden RegEx zu nutzen, musste dann aber feststellen, dass die FielLog-RegEx anscheinend nicht auf den Timestamp eines Events anwendbar sind.
Und: Wie schönes Wetter??? Hier in Süddeutschland gehst Du mal eben kurz ins Freie, und schwups: Alles Eiweiss im Gehirn ist geronnen... Da wünscht man sich doch einen schattigen, abgedunkelten Schreibtisch zum Programmieren  8)
Standort 1: FS20 mit CUL und FHEM (immer aktuelle Ver.) auf Raspberry Pi
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods)

Offline dadoc

  • Sr. Member
  • ****
  • Beiträge: 646
Antw:FTUI Neue Version chart_widget
« Antwort #349 am: 07 August 2018, 16:19:52 »
Hallo Eki,
Dann werden bei dem Device die Readings Redox_clipped und Wassertemperatur_clipped erzeugt, die nur Werte enthalten, die zwischen minClip und maxClip liegen und die kannst Du dann plotten.
Ich habe das jetzt mal in alle möglichen Richtungen ausprobiert, bin aber etwas versackt im verminten event-on-change-reading-Gebiet.
Die _clipped-Werte kamen nämlich nichts ins Log, obwohl sie beim Device angezeigt wurden. Nach ein bisschen Recherche scheint es so zu sein, dass mindestens ein event-on-change-reading auf ein normales Reading gesetzt sein muss, damit solche User-generierten Readings (ebenso wie auch UserReadings) ins Log kommen:
es muss mindestens event-on-change-reading gesetz sein damit das event generiert wird. das ist eine readingsProxy besonderheit. und je nach anforderung event-on-update-reading zusätzlich.
Danach ging es jedenfalls. Allerdings wurden dann ausschließlich die Werte gelogged, für die ich das event-on-change-reading gesetzt hatte, alle anderen nicht mehr. Warum ist mir nicht so ganz klar.
EDIT: Nein, es ging nicht. also Redox_clipped und Wassertemperatur_clipped erscheinen nicht im Log, sondern nur Redox und Wassertemperatur.

Grüße
Martin
« Letzte Änderung: 07 August 2018, 17:37:00 von dadoc »
Standort 1: FS20 mit CUL und FHEM (immer aktuelle Ver.) auf Raspberry Pi
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods)

Offline dadoc

  • Sr. Member
  • ****
  • Beiträge: 646
Antw:FTUI Neue Version chart_widget
« Antwort #350 am: 08 August 2018, 12:17:15 »
Ich hab es jetzt mal mit
attr Pool userReadings MyRedox:Redox.* {if (TimeNow() =~ /\s03:/) { ReadingsVal("Pool","Redox",0);}}anscheinend so weit gelöst, dass es funktioniert. Ist aber noch im Probelauf. Außerhalb der gewollten Zeiten schreibt es MyRedox mit Timestamp, aber ohne Wert ins Log, da weiß ich jetzt noch nicht, wie sich das beim Plotten auswirkt...
Eki: Hast Du gesehen, dass ich w.o. die Pagetab-Infos usw. wegen der Fehlermeldung geposted hatte? Eilt nicht, aber da es ja ab morgen eh Winter wird ;)
Grüße
Martin
Standort 1: FS20 mit CUL und FHEM (immer aktuelle Ver.) auf Raspberry Pi
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods)

Offline dadoc

  • Sr. Member
  • ****
  • Beiträge: 646
Antw:FTUI Neue Version chart_widget
« Antwort #351 am: 08 August 2018, 13:43:20 »
Hi Eki,
Vorher könntest Du aber noch mal schauen, was passiert, wenn Du auf die neueste Version von widget_chart.js updatest (die, die mit dem ftui update aktuell mitgeliefert wird).
Kann es sein, dass die neueste Version ein Problem mit der Crosshair-Box unter der x-Achse hat (die mit der Tag-Monat-Uhrzeit-Anzeige)? Die bleibt bei meinen Charts jetzt leer (=schwarz). An der CSS liegt es nicht, es muss die .js sein, denn wenn ich die vorherige reinkopiere, geht es.
In Zeile 1772 hat es da anscheinend eine Änderung gegeben (tarr = widget_chart.getDateTimeNumberString(tx,data.timeformat);), aber ich habe k.A., ob das damit zusammenhängt.
Grüße
Martin
Standort 1: FS20 mit CUL und FHEM (immer aktuelle Ver.) auf Raspberry Pi
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods)

Offline eki

  • Sr. Member
  • ****
  • Beiträge: 706
Antw:FTUI Neue Version chart_widget
« Antwort #352 am: 09 August 2018, 09:26:41 »
Ich habe jetzt mal eine Zwischenversion zum testen gemacht und anghängt, bitte probier mal. Sollte sowohl die beschriebenen Fehlermeldungen nicht mehr zeigen, als auch das Problem mit der Cursor Anzeige der X-Werte gelöst haben. Am Clipping bin ich noch dran, ist, wenns richtig gelöst werden soll, leider ein bisschen knifflig.

Offline dadoc

  • Sr. Member
  • ****
  • Beiträge: 646
Antw:FTUI Neue Version chart_widget
« Antwort #353 am: 09 August 2018, 10:33:57 »
Hallo Eki,
super, beide Probleme sind behoben, vielen Dank. Kosmetisch: Der Inhalt der Crosshair-Box ragt bei mir etwas über den Rahmen hinaus (s. Screenshot), vermutlich, weil ich die Schrift deutlich vergrößert habe. Aber damit kann ich bestens leben.
Was das Log-seitige Clipping per Userreadings betrifft: mit dem Zusatz else undef, auf den mich mumpitzstuff dankenswerterweise aufmerksam gemacht hat, scheint das jetzt zu funktionieren:
MyRedox:Redox.* {if (TimeNow() =~ /\s09:/) { ReadingsVal("Pool","Redox",0);} else {undef}}Eleganter wäre das natürlich, wenn man die Clipping-Option im Chart Widget hätte, aber eilt nicht.
Grüße
Martin
Standort 1: FS20 mit CUL und FHEM (immer aktuelle Ver.) auf Raspberry Pi
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods)

Offline netwalk

  • Full Member
  • ***
  • Beiträge: 115
Antw:FTUI Neue Version chart_widget
« Antwort #354 am: 14 August 2018, 10:10:34 »
Hallo,

mir ist aufgefallen, dass die Darstellung der Charts nicht den Werten aus dem Log-File entspricht. Es ergibt sich ein Versatz (im Beispiel max. 23°C im Log, 22°C im Chart, wobei der max. Wert in der Überschrift korrekt angezeigt wird):

2018-08-13_14:23:36 ths.au.Aussen temperature: 22.5
2018-08-13_14:30:53 ths.au.Aussen humidity: 63.8
2018-08-13_14:30:53 ths.au.Aussen dewpoint: 15.6
2018-08-13_14:32:22 ths.au.Aussen temperature: 23
2018-08-13_14:34:14 ths.au.Aussen humidity: 62.8
2018-08-13_14:34:14 ths.au.Aussen dewpoint: 15.7
2018-08-13_14:42:56 ths.au.Aussen temperature: 22.8
2018-08-13_14:42:56 ths.au.Aussen dewpoint: 15.4
2018-08-13_14:43:05 ths.au.Aussen temperature: 22.7
2018-08-13_14:44:20 ths.au.Aussen humidity: 63
2018-08-13_14:44:20 ths.au.Aussen dewpoint: 15.2
2018-08-13_14:47:28 ths.au.Aussen temperature: 22.4

Ich habe diesen Versatz in allen getesteten Browsern (iOS-Safari, Firefox, Edge).
Ist das Problem bekannt? Ich habe nichts dazu gefunden.

Hier die Definition des Chart-Templates:
<div class="col-30 left-align black " style="padding-left:5px;border-radius: 12px 0px 0px 0px">
<div data-type="popup" data-width="90%" data-height="450" data-mode="fade" data-top="100px" class="shade">
<div class="inline">par01</div>
<div class="dialog" style="font-size:1.2em;;border-radius:12px">
<header style="background-color:par02;color:white;text-shadow:2px 1px 2px black">par01</header>
<div class="fullsize" style="text-color:white; chart-background: white;"
data-type="chart"
data-device="par03"
data-logdevice="FileLog_par03"
data-columnspec='["4:temp.*","4:dew.*","4:hum.*"]'
data-style='["ftui l7 md","ftui l1fill","ftui l6fill"]'
data-legend='["Temperatur","Taupunkt","Feuchte"]'
data-uaxis='["primary","primary","secondary"]'
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-xticks="auto"
data-yticks="2"
data-yticks_sec="auto"
data-yticks_prio="primary"
data-y_margin='["20","20"]'
data-y_margin_sec='["20","20"]'
data-caption="$min°C - $max°C"
data-yunit="°C"
data-yunit_sec="%"
data-showlegend="false"
data-width="100%"
data-height="90%"
chart-background="white"
data-nofulldays="true"
data-daysago_start="0H"
data-daysago_end="-24H"
data-title="Akt: $data{currval1}°C/$data{currval3}% • M: $data{min1}°C/$data{max1}°C • Ø: $eval(parseInt($data{avg1}*10)/10)°C"
data-timeformat="hh:mm\LF\dd.MM.."

>
</div>
</div>
</div>
</div>
live long and prosper
netwalk
_______________________________________________
INTEL NUC7CJYH, Homematic mit 3x HMLGW, JEELINK mit 18x TX29-DTH-IT, DUOFERNSTICK, FB7490 mit FBDECT, RFXtrx433

Offline eki

  • Sr. Member
  • ****
  • Beiträge: 706
Antw:FTUI Neue Version chart_widget
« Antwort #355 am: 14 August 2018, 15:02:29 »
Da hat sich wohl ein Fehler bei dem Parameter data-y_margin/data-y_margin_sec eingeschlichen, muss ich erst noch weiter klären. Bitte nimm mal so lange diese Settings heraus, bis ich das Problem gelöst habe.

Offline eki

  • Sr. Member
  • ****
  • Beiträge: 706
Antw:FTUI Neue Version chart_widget
« Antwort #356 am: 15 August 2018, 16:03:10 »
Kannst Du mal bitte mit folgender Version des Widgets testen, der Fehler sollte damit weg sein.

In dieser Version ist auch das oben gewünschte Feature für das Clipping enthalten. Das Ganze wird über einen neuen Steuerparameter data-cliprange (ein Array mit 2 Werten für die untere und obere Grenze oder ein Array aus diesen Arrays wenn man jeden Graphen getrennt clippen will) kontrolliert. Folgendes ist möglich (jeweils im Beispiel nur als Einzelparameter):
1. Setzen von Stunden und Minuten (data-cliprange='["09:00","12:00"]'. In diesem Fall wird das Clipping jeden Tag gemacht (also jeden Tag nur die Werte zwischen 09:00 und 12:00 aus den Inputs für die Darstellung herausgefiltert)
2. Setzen von Tag Stunden und Minuten (data-cliprange='["01 00:00","08 00:00"]'. In diesem Fall wird das Clipping für jeden Monat wiederholt. Also die Werte zwischen dem 1. des Monats 00:00 und dem 8. des Monats 00:00 gefiltert.
3. Setzen von Monat Tag Stunden und Minuten (data-cliprange='["03-01 00:00","06-01 00:00"]'. Damit wird das Clipping für jedes Jahr wiederholt (also nur die Werte zwischen 1. März 00:00 und 1. Juni 00:00 herausgefiltert).
4. Setzen von Jahr Monat Tag Stunden und Minuten (data-cliprange='["2018-03-01 00:00","2019-03-01 00:00"]'. Damit wird genau der Bereich zwischen den beiden Zeiten ausgeschnitten und nichts wiederholt.
Das Clipping wirkt nur auf vorhandene Werte. Wenn also kein Wert zwischen den beiden angegebenen Zeiten vorliegt, wird auch nichts gezeichnet. Insbesondere wird nicht aus dem Clipbereich heraus extrapoliert oder Ähnliches.

Bitte auch das mal testen.
« Letzte Änderung: 15 August 2018, 16:37:15 von eki »

Offline netwalk

  • Full Member
  • ***
  • Beiträge: 115
Antw:FTUI Neue Version chart_widget
« Antwort #357 am: 16 August 2018, 10:16:43 »
Mit der neuen Version scheint der Versatz eliminiert zu sein.
Vielen Dank.
live long and prosper
netwalk
_______________________________________________
INTEL NUC7CJYH, Homematic mit 3x HMLGW, JEELINK mit 18x TX29-DTH-IT, DUOFERNSTICK, FB7490 mit FBDECT, RFXtrx433

Offline wcraffonara

  • New Member
  • *
  • Beiträge: 13
Antw:FTUI Neue Version chart_widget
« Antwort #358 am: 20 August 2018, 20:55:26 »
Hallo,
  vielen herzlichen Dank für diesen Widget!!! Das ist super gut gelungen! :)

Ich verwende die Option data-legend_horiz="true". Wie kann ich den Abstand zwischen den horizontalen Legendeneinträge vergrößern? Die Einträge picken ziemlich nah nebeneinander.

Vielen Dank!

lG
Walter

Offline dadoc

  • Sr. Member
  • ****
  • Beiträge: 646
Antw:FTUI Neue Version chart_widget
« Antwort #359 am: 22 August 2018, 17:21:38 »
In dieser Version ist auch das oben gewünschte Feature für das Clipping enthalten. Das Ganze wird über einen neuen Steuerparameter data-cliprange (ein Array mit 2 Werten für die untere und obere Grenze oder ein Array aus diesen Arrays wenn man jeden Graphen getrennt clippen will) kontrolliert. Folgendes ist möglich (jeweils im Beispiel nur als Einzelparameter):
1. Setzen von Stunden und Minuten (data-cliprange='["09:00","12:00"]'. In diesem Fall wird das Clipping jeden Tag gemacht (also jeden Tag nur die Werte zwischen 09:00 und 12:00 aus den Inputs für die Darstellung herausgefiltert)
2. Setzen von Tag Stunden und Minuten (data-cliprange='["01 00:00","08 00:00"]'. In diesem Fall wird das Clipping für jeden Monat wiederholt. Also die Werte zwischen dem 1. des Monats 00:00 und dem 8. des Monats 00:00 gefiltert.
3. Setzen von Monat Tag Stunden und Minuten (data-cliprange='["03-01 00:00","06-01 00:00"]'. Damit wird das Clipping für jedes Jahr wiederholt (also nur die Werte zwischen 1. März 00:00 und 1. Juni 00:00 herausgefiltert).
4. Setzen von Jahr Monat Tag Stunden und Minuten (data-cliprange='["2018-03-01 00:00","2019-03-01 00:00"]'. Damit wird genau der Bereich zwischen den beiden Zeiten ausgeschnitten und nichts wiederholt.
Das Clipping wirkt nur auf vorhandene Werte. Wenn also kein Wert zwischen den beiden angegebenen Zeiten vorliegt, wird auch nichts gezeichnet. Insbesondere wird nicht aus dem Clipbereich heraus extrapoliert oder Ähnliches.

Bitte auch das mal testen.
Danke Eki, eben erst gesehen, da ich beim Überfliegen dachte, dass sich das auf den vorherigen Post bezog.
Das werde ich sehr gern testen, voraussichtlich ab kommenden Dienstag.
Derzeit läuft noch ein weitere Ansatz, auf den mich Frank gebracht hat: Das Loggen (bzw. die Logfile) mit attrib disable 0/1 zu den gewünschten Zeiten in Abhängigkeit von anderen Devices (hier: Pumpe) aus- bzw. einschalten. Macht aber nur Sinn, wenn man in der restlichen Zeit tatsächlich garnichts loggen will. Hat in meinem Fall allerdings den Vorteil, dass sich die Log-Zeiten dynamisch an etwa sich ändernde Filterzeiten anpassen (DOIF, das bewirkt, dass das Loggen 3600 s nach dem Einschalten der Filterpumpe startet und nur so lange gelogt wird, wie die Pumpe auch läuft). D.h. da muss ich nichts an der Definition des Chart ändern, wenn sich die Pumpenzeiten ändern.
Könnte man denn data-cliprange auch dynamisch durch einen Dummy setzen lassen?
Grüße
Martin
Standort 1: FS20 mit CUL und FHEM (immer aktuelle Ver.) auf Raspberry Pi
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods)