[FUIP][FTUI 2] Cusor wird in HTML Charts nicht mehr angezeigt

Rewe2000 · 20 März 2022, 12:02:21

Hallo,

irgendwie wird bei mir in den Charts (FUIP - HTML Fenster) der Cursor überhaupt nicht mehr angezeigt, der Button ist noch vorhanden, beim klicken erscheint jedoch keinerlei Cursor mehr.
Das ist aber nicht nur im HTML-Fenster so, auch wenn ich den FUIP Chart (SVG Plot) direkt verwende bleibt der Cursor bei mir verschwunden. Das Ergebnis ist gleich mit unterschiedlichen Browsern (unter Firefox und Edge getestet).
Ist das nur bei mir so?

Ich habe mir einen minimal-Chart erstellt, welcher unter FUIP in einem HTML-Fenster läuft:

Code Auswählen

<div data-type="chart"
        data-device="Aussentemperatur"
        data-get="state"
	data-logdevice="DBLogging"
	data-logfile="HISTORY"
	data-columnspec="Aussentemperatur:state"
        data-style="ftui l2"
        data-legend="Aussentemperatur">
</div>

Habt ihr da irgendeine Idee wo der Fehler bei mir liegen könnte?

In der Vergangenheit wurde der Cursor sporadisch nicht angezeigt, eine Anzeige konnte jedoch meistens durch drücken der plus und minus Tasten im Chart erzwungen werden.

Gruß Reinhard

Thorsten Pferdekaemper · 21 März 2022, 21:43:06

Hi,
ich kann das zumindest mal reproduzieren. In einer älteren Installation sehe ich den Cursor, aber in einer nagelneuen nicht. Ich gehe dem mal nach.
Gruß,
Thorsten

Thorsten Pferdekaemper · 02 April 2022, 21:08:36

Hi,
das ist mir alles nicht ganz so klar...
Ich habe zwei Installationen. Bei einer wird der Cursor angezeigt, aber ohne die Werte. D.h. man sieht die Linie und die Zeit unten. Die Werte (also den y-Wert) sieht man nicht. Bei der anderen Installation sieht man gar nichts vom Cursor.
Wenn ich das ganze per Entwicklertools betrachte, dann kann ich sehen, dass die entsprechenden Elemente da sind, wo sie sein sollen, aber sie sind nicht wirklich sichtbar. Es wirkt so, als ob der Krams von irgendwas verdeckt wird. Dummerweise ist das SVG und kein normales HTML. Deshalb kann man nicht einfach mit dem z-index spielen. (Auch wenn das Coding irgendwas mit dem z-index versucht ist das meiner Meinung nach sinnlos.)
Ansonsten weiß ich nicht, was der Unterschied zwischen den beiden Installationen sein könnte, der so etwas bewirkt.

Vielleicht hat ja sonst jemand noch eine Idee.

Gruß,
Thorsten

Thorsten Pferdekaemper · 02 April 2022, 23:17:16

Hi,

ich hab's wohl jetzt doch gefunden und gerade eine neue Version hochgeladen. Damit sollte es wieder gehen.
Allerdings ist die Farbe der Linie und der Werte (also der Texte, die auf den Graphen erscheinen) nicht vom Hintergrund abhängig. Dadurch kann es je nach verwendetem Layout (bzw. der Farben) vorkommen, dass das ganze kaum zu erkennen ist. Vielleicht fällt mir dazu auch noch was ein.

Was mir prinzipiell auch nicht so ganz gefällt: Man muss mit der Maus ziemlich genau auf die Linie des jeweiligen Graphen treffen. Das ist meiner Meinung nach unnötig schwierig. Vielleicht kann ich da auch noch was machen.

Gruß,
Thorsten

Rewe2000 · 03 April 2022, 10:24:05

Hallo Thorsten,

vielen Dank für deine Mühe, nach dem Update sehe ich auch den Cursor bei mir wieder.
Ich kann das von dir geschilderte Verhalten (genaue platzieren des Cursors auf den Linien) nicht nachvollziehen, eventuell tritt dies bei bei meiner Art der Charts nicht auf.

Ich würde es auch begrüßen, wenn du mit dem Hintergrund, speziell bei der Zeitdarstellung (X-Achse) und dem Wert noch etwas machen könntest. Speziell bei manchen Farben sind die kleinen Werte sehr schwer bis überhaupt nicht lesbar (siehe Anhang). Ich behelfe mir da aktuell mit der Zoomfunktion, dies klappt dann bei einem dunklen Hintergrund halbwegs.
Das war aber auch in der Vergangenheit nicht anders, es hat mich da auch schon gestört als der Chart noch funktioniert hat.
Habe ich da aktuell die Möglichkeit mit HTML Bordmitteln oder CSS etwas zu machen um zumindest den Hintergrund der Cursoranzeige zu ändern?

Gruß Reinhard

eki · 04 April 2022, 09:06:45

Ich bin jetzt leider kein Experte was FUIP betrifft und weiß nicht so genau wie das Chart Widget (das ich verbrochen habe) da eingebunden ist. Deshalb hier erst mal das, was man bei Direkter Einbindung eines Charts in FTUI (ohne FUIP) machen kann:

Es gibt im CSS Ordner ein File ftui_chart.css. Dort wird das Meiste bezüglich des Aussehens festgelegt (leider habe sich inzwischen auch ein paar Dinge in den Code eingeschlichen, weil das mit SVG manchmal echt schwierig ins CSS zu legen ist).
Wenn Du in dem CSS File nach

Code Auswählen

Definition for crosshair cursor suchst, kommen dort einige Definitionen, die Du anpassen kannst (zumindest die Größe und Farbe des Textes). Bei der Farbe solltest Du die Einträge für stroke und fill beide entsprechend ändern. In der aktuellen Version des Charts (Files habe ich mal angehängt, ohne zu wissen, ob Thorsten da noch was in FUIP einbinden muss) sieht das bei mir dann aus wie im anghängen Bild.
Die Hintergrund Farbe der Textfelder ist leider nicht so einfach zu ändern, weil ich da eine fest programmierte SVG Filterfunktion verwende. Falls da was gewünscht ist, müsste ich noch mal nachdenken

Thorsten Pferdekaemper · 10 April 2022, 21:01:29

Hi,
danke, eki, dass Du da auch noch einmal draufgeschaut hast. Dadurch bin ich jetzt darauf gekommen, was eigentlich das Problem ist.
Für FUIP verwende ich eine eigene widget_chart.js und ftui_chart.css. (FUIP ist an manchen Stellen nicht mehr 100% mit FTUI kompatibel). Außerdem bindet FUIP automatisch die svg_defs.svg ein (bzw. die zum Stylesheet gehörende Version davon). Das ist deshalb wichtig, da bei FUIP die SVG-Definitionen der FHEM-Charts automatisch konvertiert werden. Dummerweise ist dann aber schon ein "defs" Tag da. D.h. folgendes klappt nicht mehr:

Code Auswählen


if (!$(document).find('body').children('svg.basicdefs').children('defs').length)

(Zeile 4355 in der widget_chart.js, die Du an Deinen Beitrag gehängt hast.)
...und die Filter werden nicht eingebunden. Anscheinend ignoriert der SVG-Prozessor (oder wie auch immer das Teil des Browsers heißt) den Filter dann nicht einfach, sondern er stellt dann das zugehörige Element einfach gar nicht mehr dar.

Das Problem hatte ich jetzt dadurch "gelöst", dass ich die Filter-Verwendung einfach rausgeworfen habe. Da ich es jetzt aber ein bisschen besser verstehe, werde ich es jetzt mal versuchen so zu ändern, dass der Hintergrund in der für das FUIP-Device festgelegten Hintergrundfarbe angezeigt wird. Da die Werte bereits in der FUIP-Vordergrundfarbe angezeigt werden, müsste das genügend Kontrast ergeben, dass man es immer lesen kann.

Gruß,
Thorsten

Thorsten Pferdekaemper · 14 August 2022, 22:00:26

Hi,
ich habe das jetzt endlich eingecheckt. Es sollte jetzt ein bisschen besser funktionieren. D.h. mit richtiger Hintergrundfarbe und man muss nicht mehr so genau zielen.
Gruß,
Thorsten

Rewe2000 · 16 August 2022, 17:35:04

Hallo Thorsten,

bin ich da noch zu ungedulig um die Änderung zu testen?

Zum Update (Update check) wird aktuell nichts angeboten.

Code Auswählen

Downloading https://fhem.de/fhemupdate/controls_fhem.txt

fhem
nothing to do...
Downloading https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

fhemtabletui
nothing to do...
Downloading https://raw.githubusercontent.com/ThorstenPferdekaemper/FHEM-FUIP/master/controls_fuip.txt

fuip
nothing to do...

Gruß Reinhard

Thorsten Pferdekaemper · 17 August 2022, 08:13:40

Hi,
wenn man halt das "git push" vergisst...
Probier's jetzt nochmal.
Gruß,
Thorsten

Rewe2000 · 17 August 2022, 17:52:00

Hallo Thorsten,

danke, jetzt wird das Update geladen.
Die dargestellten Werte sind jetzt sehr gut lesbar, auch bei sehr ungünstigen Untergründen, Danke für deine Mühe.

Eine Kleinigkeit besteht aber noch nach wie vor, entweder nur bei mir oder die anderen User haben es noch nicht bemerkt (besteht aber schon immer, nicht erst seit dem Update).
Wenn ich den Button (überwiegend bei meinen Balkengrafiken) drücke, so bleibt der Cursor verschwunden, egal wo ich die Maus hinbewege. Erst wenn ich den Plus und dann dem Minus Button betätige wird der Cursor sichtbar. Liegt das an meinen Charts oder ist das ein bekanntes Problem?

Ich hänge mal ein List eines Charts an, bei welchem die Probleme bestehen,
ich verwende ein Template (HTML-Code) und versoge es mit den Variablen (siehe Daten Balkengrafik.jpg):

Code Auswählen

<div data-type="chart"
	data-device="<fuip-field
		fuip-name="data_device"
		fuip-type="device"
		></fuip-field>"
	data-get="<fuip-field
		fuip-name='data_get'
		fuip-type="reading"
		fuip-refdevice="data_device"
		></fuip-field>"
	data-logdevice="lp"
	data-columnspec='["DbLog:DBLogging,<fuip-field fuip-name='logproxy_parameter' ></fuip-field>:<fuip-field
		fuip-name='data_device'
		></fuip-field>:<fuip-field fuip-name='data_get' ></fuip-field>"]'
	data-title="<fuip-field
		fuip-name='data_legend'
		></fuip-field> min: $eval(parseInt($data{min1}*100)/100)<fuip-field
		fuip-name='data_yunit'
		fuip-type="text"
		></fuip-field> - max: $eval(parseInt($data{max1}*100)/100)<fuip-field
		fuip-name='data_yunit'
		fuip-type="text"
		></fuip-field>"
	data-style="<fuip-field
		fuip-name='data_style'
		></fuip-field>"
	data-ptype="bars"
	data-uaxis='["primary","secondary"]'
	data-legend="<fuip-field
		fuip-name='data_legend'
		></fuip-field>"
	data-yunit="<fuip-field
		fuip-name='data_yunit'
		fuip-type="text"
		></fuip-field>"
	data-ytext="<fuip-field
		fuip-name='data_ytext'
		></fuip-field>"
	data-minvalue="0"
	data-maxvalue="auto"
	data-yticks="<fuip-field
		fuip-name='data_yticks'
		></fuip-field>"
	data-yticks_format="<fuip-field
		fuip-name='data_yticks_format'
		></fuip-field>"
	data-timeformat="<fuip-field
		fuip-name='data_timeformat'
		fuip-type="text"
		></fuip-field>"
	data-yunit_sec="<fuip-field
		fuip-name='data_yunit'
		fuip-type="text"
		></fuip-field>"
	data-ytext_sec="<fuip-field
		fuip-name='data_ytext'
		></fuip-field>"
	data-minvalue_sec="0"
	data-maxvalue_sec="auto"
	data-yticks_sec="<fuip-field
		fuip-name='data_yticks'
		></fuip-field>"
	data-yticks_format_sec="<fuip-field
		fuip-name='data_yticks_format'
		></fuip-field>"
	data-daysago_start="<fuip-field
		fuip-name='data_daysago_start'
		></fuip-field>"
	data-daysago_end="<fuip-field
		fuip-name='data_daysago_end'
		></fuip-field>"
	data-timeranges='[
	["1 Stunde","1h","now"],
	["3 Stunden","3h","now"],
	["6 Stunden","6h","now"],
	["12 Stunden","12h","now"],
	["24 Stunden","24h","now"],
	["Heute","0D","-1D"],
	["Gestern","1D","0D"],
	["Aktuelle Woche","0W","-1W"],
	["Letzte Woche","1W","0W"],
	["Aktueller Monat","0M","-1M"],
	["Letzter Monat","1M","0M"],
	["Aktuelles Jahr","0Y","-1Y"],
	["Letztes Jahr","1Y","0Y"]
	]'
	data-width="1100"
	data-height="550"
	data-cursorgroup="1"
	data-scrollgroup="1"
	data-xticks="<fuip-field
		fuip-name='data_xticks'
		></fuip-field>"
	data-title_class="legend">
</div>

Die Daten liegen bei mir in der MySQL Datenbank, pro Tag ein einziger Eintrag jeweils um 00:00:20 Uhr für den vorhergehenden Tag.

Sollte die Problemlösung einen größeren Aufwand bedeuten, so kann ich auch damit leben, es gibt ja einen Workaround welcher zu 100% funktioniert.

Gruß Reinhard

Thorsten Pferdekaemper · 22 August 2022, 20:30:51

Hi,
ich arbeite nicht mit Balkengrafiken, also habe ich das Problem wohl nicht. Es ist für mich auch nicht wirklich einfach, das nachzubauen.
Hast Du das mal außerhalb von FUIP versucht, also mit dem Original-Chart von FTUI? Theoretisch dürfte das auch nicht funktionieren, aber wenn doch, dann hätte ich wenigstens einen Ansatz, wo ich suchen muss.
Gruß,
Thorsten