FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Tommy82 am 06 November 2016, 15:51:42

Titel: Plots verändern/verschönern
Beitrag von: Tommy82 am 06 November 2016, 15:51:42
Hi,
ich steh noch am Anfang mit der FTUI, und hab das Problem das meine Plots mir so nicht gefallen.
Vorallem das an der rechten Plot seite dieses halb Transparente weiße Feld mit den Bezeichnungen drüber liegt stört mich.

Kann man das entfernen bzw. anders Positionieren?
Hättet ihr generell einen Tip für mich wie ich die Plots "schöner" gestallten kann? Der Platz ist allerdings begrenzt.

<!-- ========= Plots ========== -->
<!-- ====================================== -->
<li data-row="5" data-col="2" data-sizex="6" data-sizey="2">
       <header class="headerTransparent">Plots</header>
        <div class="left"
                       data-title="Heizung Fenster"
                       data-type="chart"
                       data-height="100"
                       data-width="400"
                       data-logdevice="myDbLog"
                       data-logfile="HISTORY"
                       data-columnspec='["HeizungFenster_Clima:measured-temp","HeizungFenster_Clima:desired-temp","HeizungFenster_Clima:ValvePosition"]'
                       data-style='["ftui l0","ftui l4","ftui l2"]'
                       data-ptype='["lines","points","steps"]'
                       data-uaxis='["secondary","secondary","primary"]'
                       data-legend='["Ist","Soll","Ventil %"]'
                       data-yunit="%"
                       data-ytext="Ventil %"
                       data-minvalue="0"
                       data-maxvalue="100"
                       data-yunit_sec="&deg;C"
                       data-ytext_sec="Temperatur"
                       data-yticks="20"
                       data-minvalue_sec="0"
                       data-maxvalue_sec="35"
                       data-daysago_start="0"
                       data-daysago_end="-1"
                       data-crosshair="true"
                       data-cursorgroup="1"
                       data-scrollgroup="1"
                       data-showlegend="true"
                       data-xticks="auto">
                  </div>
        <div class="left"
                       data-title="Heizung Tür"
                       data-type="chart"
                       data-height="100"
                       data-width="400"
                       data-logdevice="myDbLog"
                       data-logfile="HISTORY"
                       data-columnspec='["Heizung_Tuer_ClimRT_tr:measured-temp","Heizung_Tuer_ClimRT_tr:desired-temp","Heizung_Tuer_ClimRT_tr:ValvePosition"]'
                       data-style='["ftui l0","ftui l4","ftui l2"]'
                       data-ptype='["lines","points","steps"]'
                       data-uaxis='["secondary","secondary","primary"]'
                       data-legend='["Ist","Soll","Ventil %"]'
                       data-yunit="%"
                       data-ytext="Ventil %"
                       data-minvalue="0"
                       data-maxvalue="100"
                       data-yunit_sec="&deg;C"
                       data-ytext_sec="Temperatur"
                       data-yticks="20"
                       data-minvalue_sec="0"
                       data-maxvalue_sec="35"
                       data-daysago_start="0"
                       data-daysago_end="-1"
                       data-crosshair="true"
                       data-cursorgroup="1"
                       data-scrollgroup="1"
                       data-showlegend="true"
                       data-xticks="auto">
                  </div>   
     <div class="left"
                       data-title="Fritz Dect Wohnzimmerschrank"
                       data-type="chart"
                       data-height="100"
                       data-width="400"
                       data-logdevice="myDbLog"
                       data-logfile="HISTORY"
                       data-columnspec='["FritzDect_Wohnzimmerschrank:power"]'
                       data-style='["ftui l0"]'
                       data-ptype='["lines"]'
                       data-uaxis='["primary"]'
                       data-legend='["Power (W)"]'
                       data-yunit="W"
                       data-ytext="Power (W)"
                       data-minvalue="0"
                       data-maxvalue="15"
                       data-crosshair="true"
                       data-cursorgroup="1"
                       data-scrollgroup="1"
                       data-showlegend="true"
                       data-xticks="auto">
                  </div>
     

</li>
Titel: Antw:Plots verändern/verschönern
Beitrag von: eki am 07 November 2016, 09:26:13
Ja, das kann man sowohl weglassen als auch an anderer Stelle platzieren (siehe FTUI Wiki Eintrag zum Chart und dort die Parameter "data-showlegend" und "data-legendpos"). Darüber hinaus schaltet ein Klick auf den Text "Legend" im Header die Legende an/aus. Über die CSS Parameter kann man generell auch alle möglichen Anpassungen am Aussehen machen (siehe die Datei "ftui_chart.css" im "./css" Ordner).

http://www.fhemwiki.de/wiki/FHEM_Tablet_UI#chart (http://www.fhemwiki.de/wiki/FHEM_Tablet_UI#chart)
Titel: Antw:Plots verändern/verschönern
Beitrag von: Tommy82 am 07 November 2016, 21:17:05
Hi,
super vielen Dank für den Tip, das hat geholfen.
Titel: Antw:Plots verändern/verschönern
Beitrag von: Tommy82 am 08 November 2016, 07:18:23
Hi, bin dann leider doch noch nicht ganz durch damit, da ich wie oben im screen zu sehen, relativ wenig Platz auf der Seite habe um die 3 Plots darzustellen, würde ich gerne die Texte "Legende/Curser" nicht anzeigen und auch nicht die runden icons für +/-, sowie rechts/links

Kann man das auch noch konfigurieren ohne die css zu bearbeiten?

Danke
Titel: Antw:Plots verändern/verschönern
Beitrag von: eki am 08 November 2016, 08:13:06
Auch das geht. Bei class="... zusätzlich "nobuttons". Also in Deinem Beispiel class="left nobuttons".
Titel: Antw:Plots verändern/verschönern
Beitrag von: Tommy82 am 11 November 2016, 18:49:51
Hi, Danke schonmal für den Tip, hab es jetzt so gemacht wie untenstehend, die Buttons sind auch weg, allerdings überlappt das Chart jetzt den Plot Title, wie bekomme ich das jetzt noch hin, das man den Titel noch richtig sieht?

<!-- ========= Plots ========== -->
<!-- ====================================== -->
<li data-row="5" data-col="2" data-sizex="4" data-sizey="2">
       <header class="headerTransparent">Plots</header>
        <div class="left nobuttons"
                       data-title="Heizung Küche"
                       data-type="chart"
                       data-height="200"
                       data-width="540"
                       data-logdevice="myDbLog"
                       data-logfile="HISTORY"
                       data-columnspec='["Heizung_Flur_Clima:measured-temp","Heizung_Flur_Clima:desired-temp","Heizung_Flur_Clima:ValvePosition"]'
                       data-style='["ftui l0","ftui l4","ftui l2"]'
                       data-ptype='["lines","points","steps"]'
                       data-uaxis='["secondary","secondary","primary"]'
                       data-legend='["Ist","Soll","Ventil %"]'
                       data-yunit="%"
                       data-ytext="Ventil %"
                       data-minvalue="0"
                       data-maxvalue="100"
                       data-yunit_sec="&deg;C"
                       data-ytext_sec="Temperatur"
                       data-yticks="20"
                       data-minvalue_sec="0"
                       data-maxvalue_sec="35"
                       data-daysago_start="0"
                       data-daysago_end="-1"
                       data-crosshair="true"
                       data-cursorgroup="1"
                       data-scrollgroup="1"
                       data-showlegend="true"
                       data-xticks="auto">
                  </div>
</li>


Titel: Antw:Plots verändern/verschönern
Beitrag von: Tommy82 am 13 November 2016, 20:09:17
Hi, keiner eine idee wie ich das hinbekommen könnte?

Danke
Titel: Antw:Plots verändern/verschönern
Beitrag von: eki am 14 November 2016, 07:52:07
Ich habe noch einen Fehler im widget gefunden, der genau in Deinem Fall zuschlägt (nobuttons mit Titel). Mit der angehängten Version müsste es jetzt klappen.

@setstate: die wäre auch mal wieder was für die "offizielle" ftui Version.
Titel: Antw:Plots verändern/verschönern
Beitrag von: eki am 14 November 2016, 12:56:26
Hab gerade noch einen Fehler entdeckt, bitte diese Version nicht verwenden. Korrektur kommt nach.
Titel: Antw:Plots verändern/verschönern
Beitrag von: eki am 14 November 2016, 13:17:08
So, jetzt klappt es hoffentlich wieder richtig, sorry für die Verwirrung
Titel: Antw:Plots verändern/verschönern
Beitrag von: Tommy82 am 17 November 2016, 22:31:11
Damit klappt es.
Danke eki