FTUI Charts falsche Formatierung / css wird nicht gelesen?

[Depechem]

Hi, wie im Bild zu sehen wird bei meinem Charts irgendwie nicht die richtige Formatierung aus den .css Dateien oder wo auch immer her genommen.
Die Schriftart ist falsch und der Hintergrund ist auch nicht transparent.
Die ftui_chart.css nimmt er(wenn ich dort etwas ändere wird dies übernommen)

An was kann dies liegen?

FHEM Version 5.8
Tablet UI Version 2.6.17
FHEM und FTUI ist auf den aktuellen Stand

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="9" data-sizey="2" class="semitransparent">
                  <header class="bold big-6 white">HEIZUNG WOHNZIMMER</header>
                  <div class="fullsize"
                       data-type="chart"
                       data-height="230"
   data-width="1100"
   data-logdevice="FileLog_Heizung_Thermo_Wohnz"
                       data-columnspec='["4:Heizung_Thermo_Wohnz.measured-temp:0:","4:Heizung_Thermo_Wohnz.desired-temp:0:","4:Heizung_Thermo_Wohnz_Climate.humidity:0:","3:Heizung_Aktor_Wohnz:0:"]'
                       data-style='["ftui l0fill","ftui l2","ftui l4dot","ftui l4dot"]'
                       data-ptype='["lines","steps","cubic","steps"]'
                       data-uaxis='["secondary","secondary","primary","primary"]'
                       data-legend='["ist Temperatur","soll Temperatur","Luftfeuchte","Heizung AN"]'
                       data-yunit="%"
                       data-ytext="Luftfeuchte"
                       data-minvalue="0"
                       data-maxvalue="auto"
                       data-yunit_sec="°C"
                       data-ytext_sec="Temperatur"
                       data-yticks="auto"
                       data-minvalue_sec="auto"
                       data-maxvalue_sec="auto"
                       data-daysago_start="2"
                       data-daysago_end="-1"
                       data-crosshair="true"
                       data-cursorgroup="1"
                       data-scrollgroup="1"
                       data-showlegend="true"
                       data-xticks="auto">
                  </div>
</li>

folgende Verknüpfungen sind oben in der index.html

Code Auswählen Erweitern

<link rel="stylesheet" href="./lib/jquery.gridster.min.css" />
        <link rel="stylesheet" href="./css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="./lib/font-awesome.min.css" />
<link rel="stylesheet" href="./lib/openautomation.css" />
<link rel="stylesheet" href="./lib/fhemSVG.css" />
        <link rel="stylesheet" href="./lib/jquery.toast.min.css" />
        <link rel="stylesheet" href="./lib/powerange.min.css" />

<link rel="stylesheet" href="./css/fhem-tablet-ui_eigener.css" />
<link rel="stylesheet" href="./css/fhem-tablet-ui_eigener_Tablet_Wohnzimmer_Thomas.css" />

        <script type="text/javascript" src="./pgm2/jquery.min.js" defer></script>
        <script type="text/javascript" src="./pgm2/jquery-ui.min.js" defer></script>
        <script type="text/javascript" src="./lib/jquery.knob.mod.min.js" defer></script>
        <script type="text/javascript" src="./lib/jquery.toast.min.js" defer></script>
        <script type="text/javascript" src="./lib/jquery.circlemenu.js" defer></script>
        <script type="text/javascript" src="./lib/powerange.min.js" defer></script>
        <script type="text/javascript" src="./lib/jquery.gridster.min.js" defer></script>
        <script type="text/javascript" src="./lib/fa-multi-button.min.js" defer></script>
<script type="text/javascript" src="./js/fhem-tablet-ui.js" defer></script>

Ich hoffe ihr könnnt mir helfen.
Gruß Thomas

[amenomade]

Die ftui_chart.css nimmt er

Obwohl nicht in deinen Headers? 

Sonst ist es vermutlich ein Vorrangsproblem. Die letzte gewinnt.

[Depechem]

Obwohl nicht in deinen Headers? 

Sonst ist es vermutlich ein Vorrangsproblem. Die letzte gewinnt.

ja die nimmt er.
hab grad noch mal geschaut.
die Schriftart des Charts wird von der "svg_style.css" genommen. Da steht als Schriftart folgendes drin

Code Auswählen Erweitern

text       { font-family:Times; font-size:12px; }
wenn ich das "Times" ändere wird die Schriftart passen geändert.
Nur wird bei einem Update dieses css ja dies wieder zurück gesetzt.

Ich habe eine eingene css. im CSS Ordner angelegt. Was muss ich dort einfügen damit diese Schriftart im SVG geändert wird?
Dies einzutragen bringt keine Änderung

Code Auswählen Erweitern

text       { font-family:Times; font-size:12px; }

Oder mache ich grundlegend etwas falsch?
Alle widgets werden auf anhib passend angezeigt mit den normalen Formatierungen nur das chart widget passt nicht

[Depechem]

so hab nochmal etwas probiert.
Wenn ich aus der "ftui_charts.css" folgendes entferne:

Code Auswählen Erweitern

/* import needed for availability of FHEM plot stlyes in the HTML files */
@import "../../pgm2/svg_style.css";

und in mei meiner eigenen Benutzerdefinierten .css folgendes einfüge:

Code Auswählen Erweitern

text       { font-family:robotothin,sans-serif; font-size:12px; }

wird die Schriftart des Chart`s von meiner benutzerdefinierten css genommen.
sobald ich aber das obere aus der "ftui_charts.css" wieder einfüge wird wieder alles aus der "svg_style.css" übernommen.

wie kann man denn sagen das meine "eigene Benutzerdefinierte .css" immer Vorrang hat?
bei Schriftarten von Klassen wie
z.B.: (class="big-3")

Code Auswählen Erweitern

.big-3     { font-size: 140% !important; font-family: robotothin,sans-serif; }
oder anderen Formatierungen geht es doch auch von meiner Benutzerdefinierten .css aus !?

[Depechem]

habe es hinbekommen siehe hier:

Code Auswählen Erweitern

/* Chart Widget Formatierung */
text { font-family:robotothin,sans-serif !important; }

.buttons {
font-family: FontAwesome !important;
}

.chart-background {
fill: rgba(0, 0, 0, 0) !important;
}
/* Chart Widget Formatierung ENDE*/

[eddso]

Hi,
ich habe die Zeile auch raus genommen:

Code Auswählen Erweitern

@import "../../pgm2/svg_style.css";
Habe aktuelle FTUI und FHEM und mein FTUI wird durch den Import total versaut.
Weiß nicht mehr nach welchem Update das Passiert ist.
Man sieht am Anfang alles wird geladen und passend dargestellt. Dann wird irgendwann der oberer Style geladen und alle Schriften und Symbole werden zu groß die Schrift ist Serif, schlimm.
Alle Charts werden auch ohne diesen Style korrekt angezeigt.