FTUI Neue Version chart_widget

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

Vorheriges Thema - Nächstes Thema

eki

Problem ist gefunden, wird in der nächsten Version korrigiert.

gloob

#31
Hallo,

Ich lasse mir 2 Graphen in einer Anzeige darstellen.

Gibt es eine Möglichkeit ein data-minvalue und data-maxvalue auf "auto" zu stellen und sowohl rechts als auch links die gleiche Einteilung zu erhalten?


<li data-row="4" data-col="2" data-sizex="6" data-sizey="5" class="semitransparent">
<header><font size="+1">Wohnzimmer</font></header>
<div class="normal nobuttons" data-type="chart"
data-logdevice='["FileLog_HM_WZ_Heizung_Clima","FileLog_HM_WZ_Heizung_Clima"]'
data-columnspec='["HM_WZ_Heizung_Clima:desired-temp","HM_WZ_Heizung_Clima:measured-temp"]'
data-style='["ftui l2","ftui l0fill"]'
data-ptype='["histeps","histeps"]'
data-uaxis='["primary","secondary"]'
data-legend='["Soll-Wert","Ist-Wert"]'
data-yunit="°C"
data-ytext=""
data-minvalue="10"
data-maxvalue="35"
data-yunit_sec="°C"
data-ytext_sec=""
data-height="200"
data-yticks="auto"
data-minvalue_sec="10"
        data-maxvalue_sec="35"
data-nofulldays="true"
data-xticks="auto">
</div>
</li>


Aktuell ist die rechts Skala an den ersten Graphen angepasst und die linke Skala an den 2.

Edit:
Kaum hab ich den Post geschrieben, sehe ich, dass man den 2. Graphen nur auch auf data-uaxis='["primary","primary"]' setzen muss, damit es klappt.
Raspberry Pi 3 | miniCUL 433MHz | nanoCUL 868 MHz | nanoCUL 433 MHz | MySensors WLAN Gateway | LaCrosse WLAN Gateway | SignalESP 433 MHz | SignalESP 868 MHz | HM-MOD-UART WLAN Gateway | IR - 360 Grad WLAN Gateway

eki

Das würde nur dann funktionieren, wenn für beide Graphen die maximal und minimal Werte gleich wären (dann würde die automatische Berechnung ja die gleiche Einteilung ergeben).
Warum willst Du denn in dem Fall überhaupt eine sekundäre Achse haben? Setze doch beide Graphen auf Primärachse.

dadoc

Hi Eki,
gibt es eine Möglichkeit (außer im CSS herumzudoktern), um die Schriftgröße der Beschriftungen zu erhöhen? Oder alternativ auch um das ganze Chart vergrößert anzuzeigen? Muss auf dem iPad sonst immer die Lesebrille suchen, um die Werte ablesen zu können ;)
Grüße
Martin
Standort 1: FS20 mit CUL und FHEM auf Raspi. HM-Komponenten (Heizung, Rollladen, Schalter). HM IP über Raspimatic (testweise)
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods

eki

Schriftgrößen im css zu ändern hat nichts mit "herumdoktorn" zu tun und ist genau so vorgesehen (falls Du Bedenken hast dass Dinge durch Update überschrieben werden, mache Deine Änderungen im fhem-tablet-ui-user.css, die werden dann nicht überschrieben).
Falls Du unterschiedliche Größen in unterschiedlichen Charts brauchst kannst Du z.B. folgendes machen
/* Definition of the axes generally*/
.big .text.axes {
fill: #bbb;
font-size: 18px;
}
.small .text.axes {
fill: #bbb;
font-size: 10px;
}
.normal .text.axes {
fill: #bbb;
font-size: 12px;
}

und dann in der Definitionsdatei über die Klasse (<div class="big"...) die jeweilige Größe auswählen (ich kann ja in der nächsten Version so eine Unterscheidung generell in die ftui-chart.css einbauen, ist eigentlich eine gute Idee).

Die Gesamtgröße kannst Du per data-width und data-height Parameter in der HTML Definitionsdatei des Charts einstellen.

dadoc

Danke Eki,
das Überschreiben in der CSS war genau meine Sorge, denn dort hatte ich die Beschriftungen für meine Zwecke angepasst.
Zitatmache Deine Änderungen im fhem-tablet-ui-user.css
Da bin ich nicht draufgekommen, danke.

Ich möchte die Gelegenheit nutzen für ein paar minimale Gestaltungsvorschläge:
1. Wenn man bei der Crosshair-Wertanzeige außer dem Wert nichts anzeigen möchte, so scheint das derzeit nur bedingt möglich zu sein:
data-legend='[""]'
zeigt immer noch einen : und ein Leerzeichen vor dem eigentlichen Wert an, lässt man es ganz weg, erscheint ein "undefined" - oder gibt es da einen Trick?.

2. Ich fände es übersichtlicher, wenn das Datum auf der x-Achse bei der Anzeige einer über mehrere Tage laufenden Grafik (typo)grafisch von den Zeitangaben abgesetzt wäre - z.B. fett oder in einer zweiten Zeile.

3. Persönlich fände ich es schon, wenn man die beiden Punkte "Legende" und "Cursor" optional ausblenden könnte.

All dies verfolgt das Ziel, Charts bei Bedarf minimalistischer gestalten zu können, was in vielen Fällen ausreichen dürfte. M.a.W.: Wenn ich etwa ein Chart "Verlauf Außentemperatur" in einem Popup habe, so brauche ich die o.g. Punkte eigentlich alle nicht.
Grüße
Martin
Standort 1: FS20 mit CUL und FHEM auf Raspi. HM-Komponenten (Heizung, Rollladen, Schalter). HM IP über Raspimatic (testweise)
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods

eki

Zu 1: ist aktuell nicht zu umgehen (kein Trick), werde ich korrigieren.
Zu 2: An den Möglichkeiten zur Bezifferung der x-Achse habe ich schon einiges geändert, da hat man ab der nächsten Version viel mehr Möglichkeiten.
Zu 3: Man kann dem chart die Klasse "nobuttons" (class="normal nobuttons") geben, dann werden die shift und scale Knöpfe und auch die Legende und der Cursor weggelassen. Nur die Punkte "Legende" und "Cursor" wegzulassen und die anderen Knöpfe beizubehalten geht bisher nicht.

dadoc

Standort 1: FS20 mit CUL und FHEM auf Raspi. HM-Komponenten (Heizung, Rollladen, Schalter). HM IP über Raspimatic (testweise)
Standort 2: Homematic (Wired) über CCU2 und PocketHome HD
3 x Raspi3 mit piCorePlayer/Kodi für Multiroom Audio (+ Tablets/iPeng/iPods

fhainz

Zitat von: eki am 07 März 2016, 17:46:53
Nur die Punkte "Legende" und "Cursor" wegzulassen und die anderen Knöpfe beizubehalten geht bisher nicht.

Mit CSS geht fast alles :P

Legende ausblenden:
svg.legend text.caption:nth-child(1) {
display: none;
}


Cursor ausblenden:
svg.legend text.caption:nth-child(2) {
display: none;
}


Beide ausblenden:
svg.legend text.caption {
display: none;
}

eki

Es gibt wieder eine neue Version, siehe erster Eintrag in diesem Thread unter Edit.

knopf_piano

mein console-output
opera (Anzeige geht), die Fehlermeldungen für jquery.min.js hatte ich auch mit der aktuellen svn-version, die werden jetzt zumindest nicht geschmiessen

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
jquery.min.js:3 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details.
jquery.min.js:3 'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details.


firefox (Anzeige fehltunteres drittel)

Synchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe http://xhr.spec.whatwg.org/


in webviewcontrol (tablet) kann ich nix ausgeben...

hoffe, das hilft
zotac nano mit proxmox und ganz viel zeug drauf

eki

Das ist aber ohne Debug (muss im idex File aktiviert werden) oder?

ekur

Hallo eki,

mal nur so als Frage, gibt es das chart widget auch schon in einer angepassten Version für die Tablet UI Version 2.1, also die derzeitige Entwicklungsversion von setstate?

FHEM 5.8 auf Intel NUC, Visualisierung TabletUI auf Lenovo Tab10, Datenlogging MySQL
CUL_HM  HM-CC-RT-DN, HM-RC, HM-LC-BL1-FM, HM-PBI-4-FM, HM-SEC-SD, HM-SEC-SCo
ZWave
OWDevice:DS1420,DS18B20 an Intel NUC

eki

Bin dran, aber noch nicht fertig. Es fehlen noch ein paar Inputs von setstate.

eki

Es gibt wieder neue Versionen des Chart Widgets für die ftui Releases 1.x und 2.2. Siehe erstes Post in diesem Thread.