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:
<!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:
<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="°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.
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
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
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...
KLASSE, Ingo298, DANKE!
Habe die besagte Zeile auskommentiert und das Layout stimmt ! ;D
Werde ich mir halt auch nen neuen Zettel an den Monitor kleben für's nächte Update der ftui_chart.css ... ;)
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:
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?
Weiß das wirklich keiner?
Gibt es da eigentlich inzwischen eine Lösung?
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...
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.