FTUI Neue Version chart_widget

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

Vorheriges Thema - Nächstes Thema

ChrisW

Jup bei mir auch dann ist alles super :)
Raspberry PI3 mit allem möglichen.

ChrisW

Noch etwas ich will data-title_class= nutzen habe es angegeben mit
data-title_class="titlewhite"

Die user css habe ich auch erstellt und im EHad eingebunden.
Was muss ich nun in dder css reinschreiben ?
Folgendes klappt nicht auch nicht mit . oder # davor:

caption titlewhite {
    color: #aa6900;
}


titlewhite {
    color: #aa6900;
}
Raspberry PI3 mit allem möglichen.

eki

Du musst im css folgendes setzen

.titlewhite {
    color: #aa6900;
}


dann sollte es eigentlich klappen (bitte noch mal die Version checken, ob Du auch die neueste Chart Widget Version hast.

rcaspar

Hi

Ich versuche bei einem Feuchtigkeitsdiagramm mt 2 Farben zu arbeiten, kriege es aber einfach nicht hin ;(

Im angehängten Screenshot sieht man links ein funktionierendes Chart mit
data-style='["ftui l4fill"]'

rechts das nicht funktionierende mit dem code aus dem Wiki, angepasst auf schnitt bei 60:
data-style='["fill",["0","#0000ff","0.7"],["60","#0000ff","0.7"],["60","#ff0000","0.7"],["100","#ff0000","0.7"]]'

Hat jemand eine Idee, warum die Kurve schwarz bleibt?

René

curt

Das erste Argument bei data-style ist das Set, aus dem sich bedient wird. Das ist entweder "ftui", wenn man die im Wiki-Artikel beschriebenen Graphen haben möchte. Oder es lautet "SVGplot", dann hat man den Namensraum, der einem bei den SVG-Grafiken geboten wird. Dein "full" ist aber keiner der beiden Namensräume.

Dein Konstrukt des zweiten Parameters kann ich nicht bewerten.

Hoffe, trotzdem geholfen zu haben.
RPI 4 - Jeelink HomeMatic Z-Wave

eki

Zitat
Das erste Argument bei data-style ist das Set, aus dem sich bedient wird. Das ist entweder "ftui", wenn man die im Wiki-Artikel beschriebenen Graphen haben möchte. Oder es lautet "SVGplot", dann hat man den Namensraum, der einem bei den SVG-Grafiken geboten wird. Dein "full" ist aber keiner der beiden Namensräume.

Es gibt ein spezielles Format, welches dynamisch generierte Verläufe zulässt (beschrieben im ersten Beitrag dieses Threads und auch im Wiki), das wird hier verwendet. Bei diesem Format ist 'fill' schon richtig. Allerdings fehlt in der Angabe ein umschließendes Array, ist zugegeben verwirrend, ich muss da noch mal schauen ob das auch besser gelöst werden kann bis dahin aber bitte folgende Änderung, dann sollte es hoffentlich klappen:


data-style='[["fill",["0","#0000ff","0.7"],["60","#0000ff","0.7"],["60","#ff0000","0.7"],["100","#ff0000","0.7"]]]'

rcaspar

#411
Hi eki

So geht's - riesen MERCI für deine Hilfe

Nachtrag: funktioniert so auch problemlos mit 3 Farben - bei Feuchtigkeit: dry/comfort/wet

Gruss aus der nassen Schweiz
René

dirk.k

#412
Hallo zusammen,
darf ich hier kurz einhaken?
Hat jemand eine Idee, wie ich eine Kurve mit Schwellwerten farbig gestalten kann (wie gerade eben beschrieben), wenn ich eh schon ein Array habe, da ich mehrere Kurven chart habe (von denen soll nur eine "bunt" werden.
Ich bekomme das mit den Klammern einfach nicht hin, oder geht das gar nicht?
Ich habe diese Frage auch separat gestellt, aber dort scheint sie niemand mit der passenden Idee zu sehen.

übrigens:vielen Dank für das Widget. Es ist einfach Klasse und ich nutze es sehr intensiv.

eki

Das geht auf jeden Fall. Poste mal Deine Definition, dann schau ich es mir an.

dirk.k

Hier meine aktuelle definition:
<div data-type="chart"
data-logdevice="logdb"
data-logfile="HISTORY"
data-device="WeMos_S10"
data-get="temp2"
data-columnspec='["Sonoff_basic_11:Relay:::$val*=3","WeMos_S10:temp1::","WeMos_S10:temp2::","Sonoff_basic_11:Watchdog:::$val*=1"]'
data-style='["ftui l4fill","ftui l2","ftui l0fill","ftui l3fill"]'
data-legend='["Schalter","Draussen","Schacht","Watchdog"]'
data-uaxis='["secondary","primary","primary","secondary"]'
>
</div>


Die 3. kurve (Schacht) sollte hier bei <2°c blau und darüber rot sein.
Egal wo ich eine Klammer setze, das Chart bleibt dann immer komplett leer.

eki

Müsste eigentlich folgendermaßen gehen:


data-style='["ftui l4fill","ftui l2",["fill",["-10","#0000FF","1.0"],["2","#0000FF","1.0"],["2","#FF0000","1.0"],["100","#FF0000","1.0"]],"ftui l3fill"]'


Die Kurve ist dann flächendeckend gefüllt, falls Du das durchscheinend willst, müsstest Du die letzen Parameter von 1.0 jeweils auf einen kleineren Wert setzen. Die Werte "-10" am Anfang und "100" am Ende sind willkürlich und sollten kleiner als der Minimalwert bzw. größer als der Maximalwert sein (also eventuell noch anpassen, falls Dein Wertebereich ein anderer ist).

dirk.k

besten Dank, jetzt geht es.
ich war auch mit einem Versuch schon nah dran.
ich hatte nur die eckigen Klammern in die Anführungszeichen eingeschlossen.

FFHEM

#417
Hallo zusammen,
ich sehe gerade, dass bei meinen mehreren FTUI-Installationen mit dem chart_widget zwar das Jahr 2019, aber keine Daten aus 2018 (mehr) angezeigt werden.
Ich klicke dabei auf die data-timeranges ("Last Year"), aber auch mit der Pfeiltaste <- klappt es nicht, 2018 "bleibt leer".
Die Log-Dateien des Vorjahres sind natürlich noch da (in /opt/fhem/log/...). Und in der Web-UI werden die Graphen sowohl von 2018 als auch 2019 über SVG-Plots richtig angezeigt.

Da ich hier keine Foreneinträge zu dem Thema finde, scheint das Problem nicht allgemein, sondern bei mir zu liegen, ich sehe aber keinen Hinweis darauf.
Das ist meine index.html:


<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 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 TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->

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

    <script src="js/fhem-tablet-ui.js" defer></script>

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

    <script>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>


    <!-- Von imat-uve Friedhelm Küch eingefügt: -->
    <link rel="stylesheet" href="lib/font-awesome.min.css" />

    <!-- für Apple: Fullscreen-Darstellung -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
 
    <title>LogPi imat-uve</title>
    <link rel="shortcut icon" href="/fhem/tablet/favicon.ico" type="image/x-icon">

</head>

<body>


<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">

<header class="bigger">DTH-22 (Sensor TH_1)</header>

<div class="great">
<div data-type="label"
data-device="TH_1"
data-get="temperature_corr"
data-unit="&deg;C"
class="inline"
>
</div>
<div data-type="label"
data-device="TH_1"
data-get="humidity_corr_mavg"
data-unit="%"
class="inline"
>
</div>
</div>

                <div data-type="chart"
                        data-device="TH_1"
                        data-logdevice='["FileLog_TH_1","FileLog_TH_1","FileLog_TH_1","lp","lp"]'
                        data-logfile="-"
                        data-columnspec='["4:temperature_corr\\x3a","4:humidity_corr\\x3a", "4:humidity_corr_mavg\\x3a", "ConstY:21", "ConstY:25"]'
data-legend='["Temperatur","Luftfeuchte","Ø Luftfeuchte","",""]'
data-showlegend='true'
                        data-legendpos='["left","top"]'
data-graphsshown='[true,false,true]'
                        data-ptype='lines'

data-width="30vw"
data-height="30vh"

                        data-style='["ftui l2","ftui l6","ftui l5","ftui l1","ftui l1"]'
data-show_both_axes='true'

                        data-title="Min: $eval(parseInt($data{min1}*10)/10)°C / Max: $eval(parseInt($data{max1}*10)/10)°C ----- Min: $eval(parseInt($data{min2}*10)/10) % / Max: $eval(parseInt($data{max2}*10)/10) %"
                        data-yunit="°C"
                        data-minvalue="18"
data-maxvalue="28"
                        data-minvalue_sec="35"
                        data-maxvalue_sec="65"
                        data-yunit_sec="%"

data-xticks_round="h"
                        data-uaxis='["primary","secondary","secondary", "primary","primary"]'
data-yticks_prio='primary'
                         
data-nofulldays="true"
data-daysago_start="24h"
data-daysago_end="0h"

data-timeranges='[
["Actual Year","0Y","-1Y"],
["Last Year","1Y","0Y"],
["Actual Month","0M","-1M"],
["Last Month","1M","0M"],
["Actual Week","0W","-1W"],
["Last Week","1W","0W"],
["Today","0D","-1D"],
["Yesterday","1D","0D"]
]'
                        data-cursorgroup="1"
                        data-scrollgroup="1">
</div>

</li>

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">

<header class="bigger">(Sensor TH_2) SHT-21 Ausfall?</header>


<div class="great">
<div data-type="label"
data-device="TH_2"
data-get="temperature_corr"
data-unit="&deg;C"
class="inline"
>
</div>
<div data-type="label"
data-device="TH_2"
data-get="humidity_corr_mavg"
data-unit="%"
class="inline"
>
</div>
</div>

                <div data-type="chart"
                        data-device="TH_2"
                        data-logdevice='["FileLog_TH_2","FileLog_TH_2","FileLog_TH_2","lp","lp"]'
                        data-logfile="-"
                        data-columnspec='["4:temperature_corr\\x3a","4:humidity_corr\\x3a", "4:humidity_corr_mavg\\x3a", "ConstY:21", "ConstY:25"]'
data-legend='["Temperatur","Luftfeuchte","Ø Luftfeuchte","",""]'
data-showlegend='true'
                        data-legendpos='["left","top"]'
data-graphsshown='[true,false,true]'
                        data-ptype='lines'

data-width="30vw"
data-height="30vh"

                        data-style='["ftui l2","ftui l6","ftui l5","ftui l1","ftui l1"]'
data-show_both_axes='true'

                        data-title="Min: $eval(parseInt($data{min1}*10)/10)°C / Max: $eval(parseInt($data{max1}*10)/10)°C ----- Min: $eval(parseInt($data{min2}*10)/10) % / Max: $eval(parseInt($data{max2}*10)/10) %"
                        data-yunit="°C"
                        data-minvalue="18"
                        data-maxvalue="28"
                        data-minvalue_sec="35"
                        data-maxvalue_sec="65"

                        data-yunit_sec="%"

data-xticks_round="h"
                        data-uaxis='["primary","secondary","secondary", "primary","primary"]'
data-yticks_prio='primary'
                         
data-nofulldays="true"
data-daysago_start="24h"
data-daysago_end="0h"
data-timeranges='[
["Actual Year","0Y","-1Y"],
["Last Year","1Y","0Y"],
["Actual Month","0M","-1M"],
["Last Month","1M","0M"],
["Actual Week","0W","-1W"],
["Last Week","1W","0W"],
["Today","0D","-1D"],
["Yesterday","1D","0D"]
]'
                        data-cursorgroup="1"
                        data-scrollgroup="1">
</div>
</li>




<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">

<header class="bigger">DTH-22 (Sensor TH_3)</header>

<div class="great">
<div data-type="label"
data-device="TH_3"
data-get="temperature_corr"
data-unit="&deg;C"
class="inline"
>
</div>
<div data-type="label"
data-device="TH_3"
data-get="humidity_corr_mavg"
data-unit="%"
class="inline"
>
</div>
</div>

                 <div data-type="chart"
                        data-device="TH_3"
                        data-logdevice='["FileLog_TH_3","FileLog_TH_3","FileLog_TH_3","lp","lp"]'
                        data-logfile="-"
                        data-columnspec='["4:temperature_corr\\x3a","4:humidity_corr\\x3a", "4:humidity_corr_mavg\\x3a", "ConstY:21", "ConstY:25"]'
data-legend='["Temperatur","Luftfeuchte","Ø Luftfeuchte","",""]'
data-showlegend='true'
                        data-legendpos='["left","top"]'
data-graphsshown='[true,false,true]'
                        data-ptype='lines'

data-width="30vw"
data-height="30vh"

                        data-style='["ftui l2","ftui l6","ftui l5","ftui l1","ftui l1"]'
data-show_both_axes='true'

                        data-title="Min: $eval(parseInt($data{min1}*10)/10)°C / Max: $eval(parseInt($data{max1}*10)/10)°C ----- Min: $eval(parseInt($data{min2}*10)/10) % / Max: $eval(parseInt($data{max2}*10)/10) %"
                        data-yunit="°C"
                        data-minvalue="18"
                        data-maxvalue="28"
                        data-minvalue_sec="35"
                        data-maxvalue_sec="65"

                        data-yunit_sec="%"

data-xticks_round="h"
                        data-uaxis='["primary","secondary","secondary", "primary","primary"]'
data-yticks_prio='primary'
                         
data-nofulldays="true"
data-daysago_start="24h"
data-daysago_end="0h"
data-timeranges='[
["Actual Year","0Y","-1Y"],
["Last Year","1Y","0Y"],
["Actual Month","0M","-1M"],
["Last Month","1M","0M"],
["Actual Week","0W","-1W"],
["Last Week","1W","0W"],
["Today","0D","-1D"],
["Yesterday","1D","0D"]
]'
                        data-cursorgroup="1"
                        data-scrollgroup="1">
</div>
</li>


<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">

<header class="bigger">DTH-22 (Sensor TH_4)</header>

<div class="great">
<div data-type="label"
data-device="TH_4"
data-get="temperature_corr"
data-unit="&deg;C"
class="inline"
>
</div>
<div data-type="label"
data-device="TH_4"
data-get="humidity_corr_mavg"
data-unit="%"
class="inline"
>
</div>
</div>

                <div data-type="chart"
                        data-device="TH_4"
                        data-logdevice='["FileLog_TH_4","FileLog_TH_4","FileLog_TH_4","lp","lp"]'
                        data-logfile="-"
                        data-columnspec='["4:temperature_corr\\x3a","4:humidity_corr\\x3a", "4:humidity_corr_mavg\\x3a", "ConstY:21", "ConstY:25"]'
data-legend='["Temperatur","Luftfeuchte","Ø Luftfeuchte","",""]'
data-showlegend='true'
                        data-legendpos='["left","top"]'
data-graphsshown='[true,false,true]'
                        data-ptype='lines'

data-width="30vw"
data-height="30vh"

                        data-style='["ftui l2","ftui l6","ftui l5","ftui l1","ftui l1"]'
data-show_both_axes='true'

                        data-title="Min: $eval(parseInt($data{min1}*10)/10)°C / Max: $eval(parseInt($data{max1}*10)/10)°C ----- Min: $eval(parseInt($data{min2}*10)/10) % / Max: $eval(parseInt($data{max2}*10)/10) %"
                        data-yunit="°C"
                        data-minvalue="18"
                        data-maxvalue="28"
                        data-minvalue_sec="35"
                        data-maxvalue_sec="65"

                        data-yunit_sec="%"

data-xticks_round="h"
                        data-uaxis='["primary","secondary","secondary", "primary","primary"]'
data-yticks_prio='primary'
                         
data-nofulldays="true"
data-daysago_start="24h"
data-daysago_end="0h"
data-timeranges='[
["Actual Year","0Y","-1Y"],
["Last Year","1Y","0Y"],
["Actual Month","0M","-1M"],
["Last Month","1M","0M"],
["Actual Week","0W","-1W"],
["Last Week","1W","0W"],
["Today","0D","-1D"],
["Yesterday","1D","0D"]
]'
                        data-cursorgroup="1"
                        data-scrollgroup="1">
</div>
</li>

<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">

<header class="bigger">DTH-22 (Sensor TH_5)</header>

<div class="great">
<div data-type="label"
data-device="TH_5"
data-get="temperature_corr"
data-unit="&deg;C"
class="inline"
>
</div>
<div data-type="label"
data-device="TH_5"
data-get="humidity_corr_mavg"
data-unit="%"
class="inline"
>
</div>
</div>

                <div data-type="chart"
                        data-device="TH_5"
                        data-logdevice='["FileLog_TH_5","FileLog_TH_5","FileLog_TH_5","lp","lp"]'
                        data-logfile="-"
                        data-columnspec='["4:temperature_corr\\x3a","4:humidity_corr\\x3a", "4:humidity_corr_mavg\\x3a", "ConstY:21", "ConstY:25"]'
data-legend='["Temperatur","Luftfeuchte","Ø Luftfeuchte","",""]'
data-showlegend='true'
                        data-legendpos='["left","top"]'
                        data-graphsshown='[true,false,true]'

                        data-ptype='lines'

data-width="30vw"
data-height="30vh"

                        data-style='["ftui l2","ftui l6","ftui l5","ftui l1","ftui l1"]'
data-show_both_axes='true'

                        data-title="Min: $eval(parseInt($data{min1}*10)/10)°C / Max: $eval(parseInt($data{max1}*10)/10)°C ----- Min: $eval(parseInt($data{min2}*10)/10) % / Max: $eval(parseInt($data{max2}*10)/10) %"
                        data-yunit="°C"
                        data-minvalue="18"
                        data-maxvalue="28"
                        data-minvalue_sec="35"
                        data-maxvalue_sec="65"

                        data-yunit_sec="%"

data-xticks_round="h"
                        data-uaxis='["primary","secondary","secondary", "primary","primary"]'
data-yticks_prio='primary'
                         
data-nofulldays="true"
data-daysago_start="24h"
data-daysago_end="0h"
data-timeranges='[
["Actual Year","0Y","-1Y"],
["Last Year","1Y","0Y"],
["Actual Month","0M","-1M"],
["Last Month","1M","0M"],
["Actual Week","0W","-1W"],
["Last Week","1W","0W"],
["Today","0D","-1D"],
["Yesterday","1D","0D"]
]'
                        data-cursorgroup="1"
                        data-scrollgroup="1">
</div>
</li>

<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">


<header class="bigger">DTH-22 (Sensor TH_6)</header>


<div class="great">
<div data-type="label"
data-device="TH_6"
data-get="temperature_corr"
data-unit="&deg;C"
class="inline"
>
</div>
<div data-type="label"
data-device="TH_6"
data-get="humidity_corr_mavg"
data-unit="%"
class="inline"
>
</div>
</div>

                <div data-type="chart"
                        data-device="TH_6"
                        data-logdevice='["FileLog_TH_6","FileLog_TH_6","FileLog_TH_6","lp","lp"]'
                        data-logfile="-"
                        data-columnspec='["4:temperature_corr\\x3a","4:humidity_corr\\x3a", "4:humidity_corr_mavg\\x3a", "ConstY:21", "ConstY:25"]'
data-legend='["Temperatur","Luftfeuchte","Ø Luftfeuchte","",""]'
data-showlegend='true'
                        data-legendpos='["left","top"]'
data-graphsshown='[true,false,true]'
                        data-ptype='lines'

data-width="30vw"
data-height="30vh"

                        data-style='["ftui l2","ftui l6","ftui l5","ftui l1","ftui l1"]'
data-show_both_axes='true'

                        data-title="Min: $eval(parseInt($data{min1}*10)/10)°C / Max: $eval(parseInt($data{max1}*10)/10)°C ----- Min: $eval(parseInt($data{min2}*10)/10) % / Max: $eval(parseInt($data{max2}*10)/10) %"
                        data-yunit="°C"
                        data-minvalue="18"
                        data-maxvalue="28"
                        data-minvalue_sec="35"
                        data-maxvalue_sec="65"

                        data-yunit_sec="%"

data-xticks_round="h"
                        data-uaxis='["primary","secondary","secondary", "primary","primary"]'
data-yticks_prio='primary'
                       
data-nofulldays="true"
data-daysago_start="24h"
data-daysago_end="0h"
data-timeranges='[
["Actual Year","0Y","-1Y"],
["Last Year","1Y","0Y"],
["Actual Month","0M","-1M"],
["Last Month","1M","0M"],
["Actual Week","0W","-1W"],
["Last Week","1W","0W"],
["Today","0D","-1D"],
["Yesterday","1D","0D"]
]'
                        data-cursorgroup="1"
                        data-scrollgroup="1">
</div>
</li>





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

</html>


Das Logfile-Device sieht am Beispiel TH_1 so aus:
Internals:
   CFGFN      ./FHEM/devices.cfg
   DEF        ./log/TH_1-%Y.log TH_1
   FD         5
   NAME       FileLog_TH_1
   NOTIFYDEV  TH_1
   NR         39
   NTFY_ORDER 50-FileLog_TH_1
   REGEXP     TH_1
   STATE      active
   TYPE       FileLog
   currentlogfile ./log/TH_1-2019.log
   logfile    ./log/TH_1-%Y.log
   READINGS:
     2019-01-02 11:10:58   linesInTheFile  11256
   pos:
Attributes:
   disable    0
   logtype    text
   room       Logfiles

Raspberry Pi 4B, Homematic, Sonoff, Shelly, Worx, Arduino, ESP8266

eki

#418
Setze mal bei data-logfile statt ,,-,, ,,CURRENT"

FFHEM

Hallo eki,
vielen Dank, das war's!

Müsste bei Gelegenheit mal im Wiki geändert werden, ich hatte da noch "-" als Default für "aktuelle Datei" gelesen.

Gruß
Friedhelm
Raspberry Pi 4B, Homematic, Sonoff, Shelly, Worx, Arduino, ESP8266