Ankündigung

**jonofe** · 13.12.2022, 13:10

Zitat von vbernd Beitrag anzeigen

voila:
Das Ergebnis sieht in meiner Testchart dann so aus - das TEST ist ein Universalelement im Hintergrund, das bei nicht-transparentem Hintergrund nicht sichtbar wäre:

vbernd : Super Sache!!! Vielen Dank für's Teilen.

Du solltest noch ergänzen, dass Grafana nach den Änderungen an der index.html neu gestartet werden muss.
Das hat mich ne Stunde gekostet, bis ich es in den Eingangslinks aus deinem Post gefunden habe 😉

**jonofe** · 13.12.2022, 13:11

Zitat von stonie2oo4 Beitrag anzeigen

Aber gibt es vielleicht auch eine Möglichkeit ohne iobroker?

Du kannst die CSS auch einfach nach /usr/local/edomi/www kopieren.
Habe ich bei mir auch so gemacht. Musst dann den Link im index.html einfach auf http://<EDOMI-IP>/mygrafana.css ändern.

**vbernd** · 13.12.2022, 14:10

Zitat von jonofe Beitrag anzeigen

Du kannst die CSS auch einfach nach /usr/local/edomi/www kopieren.
Habe ich bei mir auch so gemacht. Musst dann den Link im index.html einfach auf http://<EDOMI-IP>/mygrafana.css ändern.

Zitat von jonofe Beitrag anzeigen

vbernd : Super Sache!!! Vielen Dank für's Teilen.

Du solltest noch ergänzen, dass Grafana nach den Änderungen an der index.html neu gestartet werden muss.
Das hat mich ne Stunde gekostet, bis ich es in den Eingangslinks aus deinem Post gefunden habe 😉

Danke für die Inputs, habs eingearbeitet!

**stonie2oo4** · 13.12.2022, 20:59

Geile Sache, vielen dank euch beiden.

Habs gleich ausprobiert, aber irgendwie scheints bei mir nicht so ganz zu klappen.
Wenn ich "http://10.10.45.7/mygrafana.css" im Browser eingebe öffnet sich die zuvor abgelegt Datei in Edomi. Das sollte passen.
Die erste Zeile hab ich folgendermaßen angepasst:

Code:

<!doctype html><html lang="en"><link rel="stylesheet" href="http://10.10.45.7/mygrafana.css" type="text/css"><head><meta charset="utf-8"/><meta http-equiv=.....

und die Zeile weiter unten so:

Code:

      }</style><div class="preloader"><div class="preloader__enter">body.dashboard-solo { background: rgba(0,0,0,0); }<div class="preloader__bounce"><div class=......

Ist das so korrekt?

**jonofe** · 13.12.2022, 21:17

Nicht vor <head> sondern vor </head>, also innerhalb der head Tags.

**stonie2oo4** · 13.12.2022, 21:33

Upsi😅.
Also so dann:

Code:

browserconfig.xml"/><link rel="stylesheet" href="http://10.10.45.7/mygrafana.css" type="text/css"></head><body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]"><style>.preloader {

Funktioniert nämlich leider immer noch nicht.

**vbernd** · 13.12.2022, 21:38

nein, das „body.dashboard-solo“ muss nicht zwischen die <div>s, sondern in den css-teil (ab Zeile 2),
dort wo
.preloader__enter {
…
}
steht

**stonie2oo4** · 13.12.2022, 21:52

Mhh sorry wenn ich nerv, ich bekomms irgendwie nicht gebacken. Erste Zeile mit Link wie oben und das „body.dashboard-solo“ so:

Code:

      .preloader__enter {
        opacity: 0;
        animation-name: preloader-fade-in;
        animation-iteration-count: 1;
        animation-duration: 0.9s;
        animation-delay: 1.35s;
        animation-fill-mode: forwards;
      }

      body.dashboard-solo {
       background: rgba(0,0,0,0);
      }

      .preloader__bounce {
        text-align: center;
        animation-name: preloader-bounce;
        animation-duration: 0.9s;
        animation-iteration-count: infinite;
      }

Aber irgendwas schein ich immer noch falsch zu machen.

**vbernd** · 13.12.2022, 22:00

grafana-neustart?
in grafana beim panel-editieren den hintergrund ausgeblendet?
image.png

**stonie2oo4** · 13.12.2022, 22:13

Ja, grafana immer neu gestartet.
Ich kann in Grafana nur Transparent backround ein und aus schalten, hat aber beides kein Effekt. Hintergrund ausblenden find ich nirgends.
Ich hab jetzt beim anzeigen des Graphen in Edomi oben links ein Rautezeichen. Ich vermute das irgendwas immer noch nicht passt.
EDIT: Ach ich depp, hab als erstes zeichen in der index.html ausversehen ein # Zeichen eingegeben. Aber geht nach dem korrigieren trotzdem nicht 😅.

**stonie2oo4** · 13.12.2022, 22:18

Ja den Schalter seh ich, muss dieser so wie bei dir im Bild nicht aktiviert sein?

**stonie2oo4** · 13.12.2022, 22:30

Ok es geht. Ich glaub ich hab einfach nicht richtig hingeguckt, da der Dunkle Theme von Grafana und mein Visuhintergrund recht ählnich sind. Bin wohl noch ein bisschen Corona Geschädigt 😅.
Vielen vielen herzlichen Dank für die Geduld und die Hilfe.
Echt der Hammer, so siehts echt klasse aus 😁.

**znaeb** · 16.12.2022, 09:37

Vielen Dank für das Teilen der Infos. Ich habs eben versucht, aber klappt nicht. Vermutlich habe ich noch irgendwo ein Typo drin. Ich werds weiter versuchen.

Die letzten Tage hatte ich den Graph als "Light" eingebunden. Da klappt der transparente Hintergrund auch ohne den Hack von vbernd. Allerdings ist dunkle Schrift auf dunklem Grund nicht so geil.

Habe ich das aus den letzten Beiträgen richtig gedeutet: Ohne weiteres lassen sich Hintergrund, Schrift, Schriftfarbe, Farbpalette, etc. von Grafana Charts beim Einbinden nicht anpassen? Ich meine richtig Hammer wäre ja, wenn man in Grafana einen globalen Style (Dark, Light, MyStyle) definieren könnte.

**stonie2oo4** · 16.12.2022, 14:49

Zitat von znaeb Beitrag anzeigen

Ich meine richtig Hammer wäre ja, wenn man in Grafana einen globalen Style (Dark, Light, MyStyle) definieren könnte.

Hab auch erst in die Richtung gedacht und als für am einfachsten Empfunden. Aber da man hier drüber nicht so wirklich viel liest ist so eine Lösung vermutlich eben doch nicht so simpel 😅. Und der von vbernd erstellte Workaround funktioniert, wenn man alles richtig macht auch super 😁.

Vielleicht kann ich dir ja mit der Super-Anleitung (Danke übrigens nochmal) von vbernd helfen, hatte ja hier auch so meine eine oder andere Startschwierigkeit.
Also als erstes musste ja die mygrafana.css erstellen, und hier kann man dann mit einem Browser testen ob der Link funktioniert und ob diese Datei dann im Browser auch angezeigt wird.
Bei mir ist dieser Link: http://10.10.45.7/mygrafana.css
IP-Adresse musst du natürlich auf die deines Edomi anpassen.
Und so sollte dann die Ausgabe im Browser aussehen:
mygrafana.jpg

Als nächstes kommt die Bearbeitung der "index.html", diese hat mir wie du lesen konntest so einige Schwierigkeiten bereitet 😅.
Ich hab jetzt einfach mal die komplette erste Zeile aus dieser rauskopiert und den zu ändernden Teil rot markiert damit man es einfach erkennt wo dieser einzufügen ist. Hier ist mein erster Fehler passiert, da ich die Änderung an einer falschen Stelle eingefügt habe:

<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width"/><meta name="theme-color" content="#000"/><title>[[.AppTitle]]</title><base href="[[.AppSubUrl]]/"/><link rel="preload" href="[[.ContentDeliveryURL]]public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2" as="font" crossorigin/><link rel="icon" type="image/png" href="[[.FavIcon]]"/><link rel="apple-touch-icon" sizes="180x180" href="[[.AppleTouchIcon]]"/><link rel="mask-icon" href="[[.ContentDeliveryURL]]public/img/grafana_mask_icon.svg" color="#F05A28"/>[[ if eq .Theme "light" ]]<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/grafana.light.58c1084dc3a81cc4e10d.css"/>[[ else ]]<link rel="stylesheet" href="[[.ContentDeliveryURL]]public/build/grafana.dark.3486e83352eeac079b82.css"/>[[ end ]]<script nonce="[[.Nonce]]">performance.mark('frontend_boot_css_time_sec onds ');</script><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><meta name="msapplication-TileColor" content="#2b5797"/><meta name="msapplication-config" content="public/img/browserconfig.xml"/><link rel="stylesheet" href="http://10.10.45.7/mygrafana.css" type="text/css"></head><body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]"><style>.preloader {

Und mein nächste Fehler ist mir dann direkt bei der 2ten Anpassung der "index.html" passiert.
Auch hier einfach mal der Block aus meiner Datei rauskopiert und wieder die Änderung in Rot markiert.

.preloader__enter {
opacity: 0;
animation-name: preloader-fade-in;
animation-iteration-count: 1;
animation-duration: 0.9s;
animation-delay: 1.35s;
animation-fill-mode: forwards;
}

body.dashboard-solo {
background: rgba(0,0,0,0);
}

.preloader__bounce {
text-align: center;
animation-name: preloader-bounce;
animation-duration: 0.9s;
animation-iteration-count: infinite;
}

Hoffe ich konnte dir damit ein bisschen weiterhelfen 😉

**vbernd** · 18.12.2022, 13:42

Übrigens:
Ein Grafana-Update zerstört den Workaround, die index.html muss man neu anpassen!
(ist mir gerade passiert

)

Ankündigung

Darstellung Grafana Chart

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar