Plotgröße in der .html anpassen

[Johann.S]

Hallo,

ich habe die Größe der Plots mit folgendem .css verkleinert!

/**
 * --- W i d g e t s :   P L O T ----------------------------------------------
 */
.plot {
  height: 100px;
}

.block .ui-fixed .plot,
.block .set-1 .plot {
  min-height: 9.0em;
}
.block .set-2 .plot {
  min-height: 7.0em;
}
.block .set-3 .plot {
  min-height: 5.0em;
}
/* Highcharts */
.highcharts-root:not(.supersized) {
  max-height: 300px;
}
​

Diese css ändert aber die Plot's in allen Pages, ich würde das ganze aber gerne lokal machen!
Im Internet habe ich mir schon einiges angesehen mit <div class='' style=''>
und habe auch einges versucht:

            <div class="plot" style="min-height: 7.0em">
                {{ plot.period('', ['Buero_th.temp.plot', 'Buero_th.humidity.plot'], 'raw', '2d', '', [15,20], [40,90], '', ['Temperatur', 'Luftfeuchte'], ['#a00', '#00a'], ['areaspline', 'spline'], [ '', 'Temperatur in °C', 'Luftfeuchte in %'], '', [ 1, 2], [ 0, 1]) }}
            </div>
​

...

Geht das überhaupt?
Wenn ja, kann mir da vielleicht jemand zeigen wie ich das in meine lokale .html einbinden muss?
Ich versuche da seit mehr als einem Monate was zustande zu bringen und bin am Verzweifeln!
Dr. Google bringt zwar viel aber ich verstehe es nicht.

Danke im voraus.

Gruß
Johann

[wvhn]

Moin Johann,

die base.css zu ändern, ist nicht so eine gute Idee. Das musst Du bei jedem Update wieder nachziehen. Für eigene Änderungen an CSS Stilen ist die visu.css im Ordner Deiner eigenen Seiten da.

Gib den Plots, die Du vergrößern willst, jeweils eine eigene id und verwende diese in den Definitionen. Beispiel:

#plot-id-1.plot {
height: 100px;
}​

Gruß
Wolfram

[Johann.S]

Hallo Wolfram,

danke, hat funktioniert!
Falls jemand die Lösung interessiert oder Verbesserungsvorschläge hat:

Datei homematic_ip.css im Verzeichnis widgets erstellt:

#plot-id-1 .plot {
  height: 100px;
  min-height: 9.0em;
}​

Aufruf des Plots im html

<div id="plot-id-1">
    <div id="plot">
        {{ plot.period(...) }}
    </div>
</div>​

Gruß
Johann

[wvhn]

Moin Johann,

das Verzeichnis ./widgets ist nicht geeignet. Nach der Abarbeitung der ./pages/DeineSeiten/visu.css werden CSS-Dateien der Reihenfolge nach aus folgenden Verzeichnissen importiert: ./dropins/shwidgets, ./dropins/widgtes, ./dropins, ./pages/DeineSeiten/widgets und ./pages/DeineSeiten/css . Die Reihenfolge bedeutet, dass immer die zuletzt eingelesenen Definitionen die vorherigen ergänzen bzw. bei Konflikten überschreiben.

Das "<div id = "plot"> ist überflüssig. Du kannst entweder den Plot in ein <div> setzen:

<div id="plot-id-1">
    {{ plot.period(...) }}
</div>​​

und die CSS-Definition so schreiben, wie Du es oben gemacht hast (mit Leerzeichen vor der Klasse ".plot"), oder Du gibst dem Plotwidget direkt eine id:

{{ plot.period('plot-id-1', ...) }}

dann musst Du den Seitennamen noch in der CSS-Definition verarbeiten und das Leerzeichen vor der Klasse weglassen:

#room_dining-plot-id-1.plot {
    height: 100px;
    min-height: 9.0em;
}​​

Gruß
Wolfram

[Johann.S]

Hallo Wolfram,

habe mich für die <div id="plot-id-1"> Variante entschieden,
da ist der Verwaltungsaufwand geringer!
Die homematic_ip.css habe ich in das Verzeichnis css verschoben, funktioniert genauso!

#Test-plot-id-1.plot {
  height: 100px;
  min-height: 7.0em;
}
#plot-id-1.plot {
  height: 100px;
  min-height: 7.0em;
}

Damit ich auch die zweite Variante testen habe das #Test-plot-id-1.plot... in der css gelassen.
Das Funktioniert bei mir nicht!

{{ plot.period('plot-id-1', ...) }}

Im Firefox Inspector sieht man es

<div id="Test-plot-id-1" data-widget="plot.period" data-mode="raw, raw" ...

aber die Größe wird nicht verändert!

Gruß
Johann

[wvhn]

Moin Johann,

den Code oben hatte ich im Einzelnen getestet, bevor ich ihn gepostet habe. Man muss den Browser-Cache löschen, damit Änderungen in den CSS-Dateien zuverlässig geladen werden. In den Entwicklertools von Firefox kann man im Reiter "Stilbearbeitung" überprüfen, ob die Regeln vollständig und aktuell geladen wurden.

Und wie gesagt ist das Leerzeichen vor der Klasse ".plot" ausschlaggebend. Ohne Leerzeichen muss die Klasse in dem Element stehen, das die id hat. Mit Leerzeichen muss die Klasse in einem der untergeordneten Elemente vorhanden sein. (Ein ">" statt des Leerzeichens bezeichnet das direkte Kinderelement).

Gruß
Wolfram