Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Off Topic
    4. Grafana
    5. Hintergrund von Grafana Dashboard in VIS entfernen

    NEWS

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    Hintergrund von Grafana Dashboard in VIS entfernen

    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      kaese2002 @foxriver76 last edited by

      @foxriver76 Danke für diese Info...war zwar ein krampf, bis ich die mal überschreiben durfte, aber jetzt gehts...man muss den Server stoppen, wenn man den Eintrag hinzufügt
      Bildschirmfoto 2022-03-22 um 21.46.44.png

      1 Reply Last reply Reply Quote 0
      • E
        Eggi @foxriver76 last edited by

        @foxriver76 ....kann ich bestätigen - funktioniert perfekt! Danke für den Tipp

        1 Reply Last reply Reply Quote 0
        • C
          christian_l @foxriver76 last edited by

          @foxriver76

          Guten Abend!

          Bei mir gibt es den Ordner /usr/share/grafana/views nicht

          Es existiert aber ein /usr/share/grafana/public/views

          mit den Dateien:
          error.html error-template.html index.html index-template.html swagger.html

          Die index-template .html sieht sehr ähnlich aus. Die index Datei komplett anders.

          Eingefügt habe ich

          body.dashboard-solo { background: none; }
          

          an der Stelle unter <Style>

          
              <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" />
            </head>
          
            <body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]">
              <style>
          
                  body.dashboard-solo { background: none; }
          
                .preloader {
                  height: 100%;
          
          

          Leider funktioniert das bei mir nicht. Hat jemand einen Tip? Danke!

          1 Reply Last reply Reply Quote 0
          • T
            THELOH @RkcCorian last edited by

            @rkccorian Moin!
            ich habe genau die gleichen Probleme wie du gehabt hast.
            Keinen nano zum editieren im grafana container. kein sudo, kein apt, etc.
            Nun gibts ja die Möglichkeit das Verzeichnis in dem die indiex.html liegt nach außen zu mappen.
            magst du den Inhalt der docker-compose.yml einmal zeigen?

            volumes:
            - ./grafana_data:/var/lib/grafana

            - ./grafana_public:/usr/share/grafana

            ich verzweifel bei dem Eintrag für die index.html 😉

            OliverIO 1 Reply Last reply Reply Quote 0
            • OliverIO
              OliverIO @THELOH last edited by OliverIO

              @theloh sagte in Hintergrund von Grafana Dashboard in VIS entfernen:

              @rkccorian Moin!
              ich habe genau die gleichen Probleme wie du gehabt hast.
              Keinen nano zum editieren im grafana container. kein sudo, kein apt, etc.
              Nun gibts ja die Möglichkeit das Verzeichnis in dem die indiex.html liegt nach außen zu mappen.
              magst du den Inhalt der docker-compose.yml einmal zeigen?

              volumes:
              - ./grafana_data:/var/lib/grafana

              - ./grafana_public:/usr/share/grafana

              ich verzweifel bei dem Eintrag für die index.html 😉

              Wenn sudo und apt bei grafana nicht funktioniert
              Vermute ich mal du hast es als docker Container installiert
              Weiter vermute ich das du die alpine Distro genommen hast
              In alpine heißt der packetmamager
              apk
              Wenn du noch kein Root bist müsste man mit
              su
              Root Rechte bekommen
              Falls du immer noch sudo brauchst dann
              apk add sudo
              So kannst dir dann auch Nano installieren

              Aber die Methode mit dem volume ist die bessere, da alle Änderungen an Dateien, die nicht in volumes liegen, sind nach dem Neustart des Containers wieder verloren

              Leider kann ich dir meine composer yml nicht zeigen, da ich erst nächste Woche wiede nach Hause komme und solange nicht schauen kann.

              T 1 Reply Last reply Reply Quote 0
              • T
                THELOH @foxriver76 last edited by

                @foxriver76 Könntest du die genaue Stelle in der Index.html einmal zeigen?

                foxriver76 1 Reply Last reply Reply Quote 0
                • foxriver76
                  foxriver76 Developer @THELOH last edited by

                  @theloh Ja, ich nehme zwar an, dass ich dir eben an anderer Stelle geantwortet habe, der Vollständigkeit halber gerne die Info auch hier.

                  <!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="X-........
                         height: 100%;
                         flex-direction: column;
                         display: flex;
                         justify-content: center;
                         align-items: center;
                       }
                  
                       body.dashboard-solo { background: none; }
                  
                       .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;
                       }
                  
                  ......
                  
                  T 1 Reply Last reply Reply Quote 0
                  • T
                    THELOH @foxriver76 last edited by THELOH

                    @foxriver76 Ich danke dir! Eingetragen und kunktioniert trotzdem nicht 😞
                    docker-compose bringt mich immer wieder zur Verzweifelung als normali.
                    Edit: Funktioniert doch, wenn ich im Panel auf Transparent schalte.
                    Ich bin Glücklich :)))))

                    R 1 Reply Last reply Reply Quote 0
                    • T
                      THELOH @OliverIO last edited by

                      @oliverio
                      Das hat mir sehr geholfen und ich habe das Ganze inzwischen hinbekommen.
                      Danke für die Info!

                      1 Reply Last reply Reply Quote 0
                      • R
                        RkcCorian @THELOH last edited by

                        @theloh Mit welcher Grafana-Version klappt das? Ich habe es mit v9.1.0 probiert, es hat aber nicht geklappt. Bei allen Panels habe ich Transparenz konfiguriert. Nutze die als iFrame.

                        T 1 Reply Last reply Reply Quote 0
                        • B
                          bloop last edited by

                          Guten Abend,
                          Ich habe Grafana auf 9.3. aktualisiert, da die Oberfläche nun auch auf Deutsch verfügbar ist. Seither ist es nicht mehr möglich das Boom Theme Addon für hintergrundfreie Einbettung in die VIS zu verwenden. Ein Umweg ist es mir über die index.html gelungen. Die Hintergründe einzelner Panel bekomme ich nun transparent. Allerdings funktioniert dies nur mit dem UI Design Hell diese passt jedoch vom Design nicht mehr zu meiner VIS...
                          Hat jemand eventuell ein ähnliches Problem oder sogar eine Lösung?
                          Herzlichen Dank!

                          T S B 3 Replies Last reply Reply Quote 0
                          • T
                            THELOH @RkcCorian last edited by

                            @rkccorian ich nutze die 9.2.2

                            1 Reply Last reply Reply Quote 0
                            • T
                              THELOH @bloop last edited by

                              @bloop Hallo,
                              bei mir funktioniert es wie oben beschrieben über die index.html problemlos. Ich bette das als Iframe ein. Das Design schalte ich in meiner Vis um.

                              c09ed98f-7709-410f-b519-7caa37949860-grafik.png

                              239d75a0-261a-4cd7-b65f-fe5d3f4b9825-grafik.png

                              B 1 Reply Last reply Reply Quote 0
                              • S
                                SpacerX @bloop last edited by

                                @bloop genauso ist es.

                                Ich nutze die die Variante mit dem Laden einer mygrafana.css. Das hat bis vor kurzem auch super Funktioniert, nur beim dark.scheme klappt das eben nicht.

                                Meine Lösung ist es in der mygrafana.css folgendes ganz oben hinzu zu fügen.

                                :root {
                                	color-scheme: none !important;
                                }
                                
                                B 1 Reply Last reply Reply Quote 0
                                • B
                                  bloop @THELOH last edited by

                                  @theloh Hallo,
                                  Hmmm, genau so hab ich´s auch gemacht. Funktioniert allerdings nur über die Light UI.
                                  Welche Grafana Version nutzt du denn?

                                  1 Reply Last reply Reply Quote 0
                                  • B
                                    bloop @SpacerX last edited by

                                    @spacerx Danke!
                                    Ich versuche mich bereits eine ganze weile daran, mein Hintergrund wird aber immer grün...
                                    Würdest du mir vielleicht deine mygrafana.css zeigen?

                                    1 Reply Last reply Reply Quote 0
                                    • B
                                      bloop @bloop last edited by

                                      @bloop Lösung:
                                      mygrafana.css Variante

                                      @charset "UTF-8";
                                       
                                       :root {
                                      	color-scheme: none !important;
                                      }
                                      .panel-container {
                                          background-color: transparent !important; 
                                      
                                      }
                                      

                                      index.html:

                                      <link rel="stylesheet" href="http://192.168.0.110/vis.0/mygrafana.css" type="text/css">
                                      </head>
                                      <body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]"><style>
                                      
                                      body.dashboard-solo { background: none !important; }
                                      

                                      Lediglich die einzelnen Container werden Transparent. Somit kann Grafana auch noch in der eigenen Oberfläche angenehm verwendet werden.

                                      Achtung:
                                      Beim upload mit der vis Edit Oberfläche musste ich jedes mal die mygrafana.css weiterführen (mygrafana1.css...) löschen funktioniert nicht. Entsprechend muss dann auch die index.html angepasst werden.

                                      Danke für die Hilfe!

                                      S 1 Reply Last reply Reply Quote 0
                                      • S
                                        SpacerX @bloop last edited by

                                        @bloop der Vollständigkeit halber meine mygrafana.css.

                                        @charset "UTF-8";
                                         
                                        :root {
                                        	color-scheme: none !important;
                                        }
                                        
                                        body.dashboard-solo, .panel-container, .panel-solo, .main-view {
                                           background-color: transparent !important;
                                        }
                                        
                                        .css-1ns0gep-LegendLabel-LegendClickabel{
                                           font-size: 1.5em !important;
                                        }
                                        
                                        .css-1pnglql-LegendLabel{
                                           font-size: 1.5em !important;	
                                        }
                                        
                                        .pointer{
                                           width: 25px !important;
                                           height: 15px !important;
                                        }
                                         
                                        .graph-legend-table th{
                                           color: white;
                                        }
                                        
                                        1 Reply Last reply Reply Quote 0
                                        • R
                                          RkcCorian last edited by RkcCorian

                                          @SpacerX : Moin!
                                          Ich hatte bislang bereits transparente Hintergründe in meinen Grafana v9.1.0 iFrames, über mygrafana.css, nebst Anpassung index.html. Im Wesentlichen, wie auch bereits beschrieben.
                                          Nun möchte ich auch ein Update auf v9.4.3 machen und habe mir diesen Chat-Verlauf angeschaut. Leider klappt es bei mir nicht. Pfad zur mygrafana.css stimmt und hat auch vorher bereits geklappt.

                                          Kannst Du bitte einen Blick drauf werfen?
                                          index.html mygrafana.css

                                          Vielen Dank im Voraus!

                                          Gewünschtes Ergebnis (ist auch so mit v9.1.0)
                                          ee037f04-f4b9-450e-b327-55d6c3a40187-image.png

                                          Ergebnis mit v9.4.3 (passend zu den angehängten Configs)
                                          177ffe0b-dbce-4dec-8d6a-901f5dce081b-image.png

                                          S 1 Reply Last reply Reply Quote 1
                                          • S
                                            SpacerX @RkcCorian last edited by

                                            @rkccorian Probier mal den kompletten body Teil aus meiner css. Ich nutze in meiner Vis nur Panels.

                                            R 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            782
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            32
                                            147
                                            23357
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo