[Gelöst] FTUI Basis-Layout wird durch das CHART WIDGET zerstört

ulobo60 · 22 Oktober 2018, 13:57:59

Habe mein FTUI mit derzeit 7 Infoseiten erstellt.
Siehe angehängtes Bild '1_ftui_okay.jpg' meiner ersten Infoseite OHNE 'Chart Widget'.

Sobald ich nun eine Infoseite einfüge, die ein Chart Widget enthält, vergrößern sich automatisch alle Darstellungen und die Ansicht ist zerstört.
Siehe angehängtes Bild '2_ftui_verhunzt.jpg' der ersten Infoseite MIT eingebautem 'Chart Widget' auf der dritten Seite.

Die Darstellung des 'Chart Widgets' habe ich als '3_ftui_chart.jpg' angehängt.

Nachfolgend der Anfang meiner index.html:

Code Auswählen


<!DOCTYPE html>
<html>
<head>

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/fhem/tablet_prod/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet_prod/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet_prod/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet_prod/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet_prod/css/fhem-tablet-ui-user.css" />
<!-- <link rel="stylesheet" href="/fhem/tablet_prod/css/ftui_chart.css" /> -->
<link rel="stylesheet" href="/fhem/tablet_prod/css/lobo60.css" />

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

<meta name="longpoll" content="1">
<meta name="gridster_cols" content="15">
<meta name="gridster_rows" content="12">
<meta name="widget_margin" content="1">

<title>FHEM-Tablet_prod</title>

</head>

<body>
<div class="gridster">
	<ul>
		<li data-row="1" data-col="1" data-sizex="1" data-sizey="12">
			<div class="">
				<div data-type="pagebutton" data-url="#lo_content_home.html" data-load="#content_home"
				data-off-background-color="transparent" data-off-color="#606060"
				data-on-background-color="#606060" data-on-color="#222222"
				data-active-pattern="(.*/||.*index.html||.*#lo_content_home.html)"
				data-icon="fa-home fa-lg"
				class="default top-space">
				</div>
				
 				<div data-type="pagebutton" data-url="#lo_content_rain.html" data-load="#content_rain"
				data-off-background-color="transparent" data-off-color="#606060"
				data-on-background-color="#606060" data-on-color="#222222"
				data-active-pattern=".*#lo_content_rain.html"
				data-icon="wi wi-rain fa-lg"
				class="prefetch top-space">
				</div>
				
 				<div data-type="pagebutton" data-url="#lo_content_charts1.html" data-load="#content_charts1"
				data-off-background-color="transparent" data-off-color="#606060"
				data-on-background-color="#606060" data-on-color="#222222"
				data-active-pattern=".*#lo_content_charts1.html"
				data-icon="wi wi-rain-wind fa-lg"
				class="prefetch top-space">
				</div>
                                .....
                                ...
                                ..

Übrigens: egal, ob ich die 'ftui_chart.css' im head-Bereich einbaue oder nicht, die Darstellungen bleiben unverändert vergrößert! Erst das Entfernen des Charts (Deaktivierung von 'content_charts1') erzeugt wieder das gewünschte FTUI-Layout.

Hier noch der html-Text zum Chart:

Code Auswählen


<html>
<title>FHEM</title>
<head>
</head>

<body>
<div class="page" id="content_charts1">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="13" data-sizey="6">

<div
   data-type="chart"
   data-height="180"
   data-logdevice="logdb"
   data-logfile="HISTORY"
   data-columnspec='["netatmo_outdoor60:temperature","netatmo_outdoor60:humidity"]'
   data-style='["ftui l0", "ftui l2"]'
   data-ptype='["lines","lines"]'
   data-uaxis='["primary","secondary"]'
   data-legend='["Temperatur","Luftfeuchte"]'
   data-yunit="&deg;C"
   data-ytext="Grad Celsius"
   data-minvalue="auto"
   data-maxvalue="auto"
   data-yunit_sec="%"
   data-ytext_sec="Luftfeuchte"
   data-yticks="auto"
   data-minvalue_sec="auto"
   data-maxvalue_sec="auto"
   data-daysago_start="0"
   data-daysago_end="-1"
   data-crosshair="false"
   data-cursorgroup="1"
   data-scrollgroup="1"
   data-showlegend="true"
   data-xticks="auto">
</div>

</li>
</ul>
</div>
</div>
</body>
</html>

Könnte mir bitte jemand mit diesem Problem helfen und mich in die Lösungs-Richtung schubsen?
Vielen Dank im Voraus.

ulobo60 · 24 Oktober 2018, 14:40:09

Okay - keine Antwort nach 1 Tag .... ist ja auch kein einfaches Thema...

Ich frage mal anders, CSS-bezogen:
Ist es richtig, dass NACH dem Laden meiner individuellen CSS-Werte (Datei 'lobo60.css') durch die Verwendung des CHART-Widgets weitere CSS-Daten zum Schluss nachgeladen werden?

Habe mir die Datei 'widget_charts.js' mal angeschaut. Ich meine, im oberen Bereich eine Nachladeroutine zu entdecken - bin aber voller js-noob.

Könnte mir das bitte jemand beantworten?
Und falls JA (Nachladung der widget_charts-CSS), wie kann ich meine lobo60.css als WIRKLICH letzte CSS-Datei laden?

Danke Euch nochmals im Voraus

Ingo298 · 24 Oktober 2018, 16:30:33

Ich habe genau das gleich problem und leider auch noch keine Lösung erhalten.

https://forum.fhem.de/index.php/topic,90739.msg842141.html#msg842141

Ingo298 · 24 Oktober 2018, 16:42:50

Habe gerade eine Lösung gefunden

das Thema hatte ich auch, versuch mal aus der ftui_chart.css folgende Zeile rauszuwerfen:
@import "../../pgm2/svg_style.css";

Danach war bei mir alles ok.
Leider muss man diese Anpassung eben nach jedem Update wieder machen...

ulobo60 · 24 Oktober 2018, 17:48:49

KLASSE, Ingo298, DANKE!

Habe die besagte Zeile auskommentiert und das Layout stimmt !

Werde ich mir halt auch nen neuen Zettel an den Monitor kleben für's nächte Update der ftui_chart.css ...

grossmaggul · 30 Dezember 2018, 11:11:16

Hallo,

ich möchte hier nochmal nachhaken.

Ich hatte auch das Problem und konnte es durch auskommentieren der @import Zeile in der ftui_chart.css lösen.

Ich frage mich jetzt allerdings, für irgendwas muß diese Zeile ja gut sein und welche Nebeneffekte hat es diese Zeile auszukommentieren, bzw den Import der Datei svg_style.css zu unterbinden.

Ich habe auch mal testweise diese Zeilen aus der pgm2/svg_style.css rausgenommen, weil ich vermutete, daß es damit was zu tun hat:

Code Auswählen


text       { font-family:Times; font-size:12px; }
text.title { font-size:16px; }
text.legend { cursor:pointer; }

Das brachte aber seltsamerweise gar nichts, auch ein komplettes Leeren der Datei führte weiter zu dem Problem des Vergrößerns der Seite mit dem Chart Widget.

Meine Frage nun, was macht der @import genau und warum kann man ihn einfach entfernen?

grossmaggul · 02 Januar 2019, 10:14:50

Weiß das wirklich keiner?

grossmaggul · 24 Februar 2019, 11:19:44

Gibt es da eigentlich inzwischen eine Lösung?

TheAbalone · 18 März 2019, 21:56:03

Ich bin draufgekommen, dass es am relativen Pfad liegt. Wenn man ihn durch den absoluten Pfad ersetzt, dann ist der Fehler weg.

Aber besser als eure Lösung ist das auch nicht...

grossmaggul · 20 März 2019, 19:07:04

Die Zeile scheint ja irgendwie auch nicht wichtig zu sein, oder doch?
Es ist etwas lästig, das nach jedem Update wieder händisch zu ändern, vom Update ausnehmen möchte ich das aber auch nicht.