Plots verändern/verschönern

[Tommy82]

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.

Code Auswählen Erweitern

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

[eki]

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

[Tommy82]

Hi,
super vielen Dank für den Tip, das hat geholfen.

[Tommy82]

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

[eki]

Auch das geht. Bei class="... zusätzlich "nobuttons". Also in Deinem Beispiel class="left nobuttons".

[Tommy82]

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?

Code Auswählen Erweitern

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

[Tommy82]

Hi, keiner eine idee wie ich das hinbekommen könnte?

Danke

[eki]

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.

[eki]

Hab gerade noch einen Fehler entdeckt, bitte diese Version nicht verwenden. Korrektur kommt nach.

[eki]

So, jetzt klappt es hoffentlich wieder richtig, sorry für die Verwirrung

[Tommy82]

Damit klappt es.
Danke eki