Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Aus Vis heraus Grafana Dashboard in Browser öffnen [gelöst]

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    17
    1
    376

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    4.9k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.3k

Aus Vis heraus Grafana Dashboard in Browser öffnen [gelöst]

Geplant Angeheftet Gesperrt Verschoben Visualisierung
13 Beiträge 3 Kommentatoren 404 Aufrufe 5 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • OliverIOO OliverIO

    @duffy

    oder ganz basic mit html in einem html widget

          <form action="https://www.iobroker.net/" method="get" target="_blank">
             <button type="submit">Bitte drücken</button>
          </form>
    

    wenn einem die standardansicht zu langweilig ist, könnte man den button tag auch noch individuell mit css stylen

    DuffyD Offline
    DuffyD Offline
    Duffy
    schrieb am zuletzt editiert von
    #4

    @DJMarc75 @oliverio

    Danke für euren schnellen Tip.
    Mit dem stylen hört sich gut an da ich aber Anfänger bin könnte es sein das ich mich dazu noch mal bei @OliverIO melde :-)

    LG Duffy

    Nix besonderes; iob auf Respberry pi 4 (8GB) mit 32 GB SSD
    Node.js: v22.22.1
    NPM: 10.9.4
    js-controller 7.0.7
    Linux: Trixie

    OliverIOO 1 Antwort Letzte Antwort
    0
    • DuffyD Duffy

      @DJMarc75 @oliverio

      Danke für euren schnellen Tip.
      Mit dem stylen hört sich gut an da ich aber Anfänger bin könnte es sein das ich mich dazu noch mal bei @OliverIO melde :-)

      LG Duffy

      OliverIOO Offline
      OliverIOO Offline
      OliverIO
      schrieb am zuletzt editiert von
      #5

      @duffy

      w3schools hat eine eigene seite dafür
      https://www.w3schools.com/css/css3_buttons.asp
      evtl auch mal zumindest in die grundlagen reinschauen.
      hier gibt es tutorials
      https://wiki.selfhtml.org/wiki/CSS

      um Überaschungen zu vermeiden empfehle ich die css anweisung zu kapseln,
      in dem du anstatt

      .button {
        background-color: #4CAF50;
      }
      

      lieber das folgende schreibst. damit gilt die css anweisung genau nur für das eine widget mit der entsprechenden id

      #w00000 .button {
        background-color: #4CAF50;
      }
      

      ansonsten gilt sie für die komplette seite und das kann an anderen stellen zu unschönen effekte führen.

      Meine Adapter und Widgets
      TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
      Links im Profil

      DuffyD 1 Antwort Letzte Antwort
      0
      • OliverIOO OliverIO

        @duffy

        w3schools hat eine eigene seite dafür
        https://www.w3schools.com/css/css3_buttons.asp
        evtl auch mal zumindest in die grundlagen reinschauen.
        hier gibt es tutorials
        https://wiki.selfhtml.org/wiki/CSS

        um Überaschungen zu vermeiden empfehle ich die css anweisung zu kapseln,
        in dem du anstatt

        .button {
          background-color: #4CAF50;
        }
        

        lieber das folgende schreibst. damit gilt die css anweisung genau nur für das eine widget mit der entsprechenden id

        #w00000 .button {
          background-color: #4CAF50;
        }
        

        ansonsten gilt sie für die komplette seite und das kann an anderen stellen zu unschönen effekte führen.

        DuffyD Offline
        DuffyD Offline
        Duffy
        schrieb am zuletzt editiert von Duffy
        #6

        @oliverio

        Hallo oliverio,

        die Funktion ist jetzt wie gewünscht gegeben :+1: aber des design ist echt Schei.. :-)

        Wie habe ich nun deinen Tip zu verstehen?
        Muß ich in den Einstellungen des Wigets etwas verändern oder war dein Vorschlag eine ganz andere herangehensweise?
        Ich bekomme hier weder ein Image in den "Button" noch eine andere Farbe ausser das rote Eck oben links.

        Kann man das Widget möglicherweise Transparent machen?

        Gruß Duffy

        1.png

        Nix besonderes; iob auf Respberry pi 4 (8GB) mit 32 GB SSD
        Node.js: v22.22.1
        NPM: 10.9.4
        js-controller 7.0.7
        Linux: Trixie

        OliverIOO 1 Antwort Letzte Antwort
        0
        • DuffyD Duffy

          @oliverio

          Hallo oliverio,

          die Funktion ist jetzt wie gewünscht gegeben :+1: aber des design ist echt Schei.. :-)

          Wie habe ich nun deinen Tip zu verstehen?
          Muß ich in den Einstellungen des Wigets etwas verändern oder war dein Vorschlag eine ganz andere herangehensweise?
          Ich bekomme hier weder ein Image in den "Button" noch eine andere Farbe ausser das rote Eck oben links.

          Kann man das Widget möglicherweise Transparent machen?

          Gruß Duffy

          1.png

          OliverIOO Offline
          OliverIOO Offline
          OliverIO
          schrieb am zuletzt editiert von
          #7

          @duffy

          hier mal ein komplett beispiel.

          einfach neues html widget anlegen und den folgenden inhalt
          in die Eigenschaft HTML des widgets eintragen und w00029 mit der widgetid deines html widgets austauschen

          <style>
          #w00029 .button {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 5px 5px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
          }
          </style>
          <form action="https://www.iobroker.net/" method="get" target="_blank">
          <button class="button">Button</button>
          </form>
          

          Meine Adapter und Widgets
          TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
          Links im Profil

          DuffyD 2 Antworten Letzte Antwort
          0
          • OliverIOO OliverIO

            @duffy

            hier mal ein komplett beispiel.

            einfach neues html widget anlegen und den folgenden inhalt
            in die Eigenschaft HTML des widgets eintragen und w00029 mit der widgetid deines html widgets austauschen

            <style>
            #w00029 .button {
              background-color: #4CAF50; /* Green */
              border: none;
              color: white;
              padding: 5px 5px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              font-size: 16px;
            }
            </style>
            <form action="https://www.iobroker.net/" method="get" target="_blank">
            <button class="button">Button</button>
            </form>
            
            DuffyD Offline
            DuffyD Offline
            Duffy
            schrieb am zuletzt editiert von
            #8

            @oliverio

            Ups, das muß ich erst mal setzen lassen bis jetzt verstehe ich nur Bahnhof.

            Aber da gibt es gerade ein anderes Problem, alle Universal Widgets von inventwo haben den selben Link hinterlegt.
            Wenn ich einen Link bei einem Widget ändere übernehmen es die anderen Widgets auch. Universal ist ja gut aber doch nicht so universal.
            2.png

            Zum Bild: Alle widges haben immer den gleichen Link und zwar immer den zuletzt eingefügten. Lässt sich das ändern?

            Gruß Duffy

            Nix besonderes; iob auf Respberry pi 4 (8GB) mit 32 GB SSD
            Node.js: v22.22.1
            NPM: 10.9.4
            js-controller 7.0.7
            Linux: Trixie

            DJMarc75D 1 Antwort Letzte Antwort
            0
            • DuffyD Duffy

              @oliverio

              Ups, das muß ich erst mal setzen lassen bis jetzt verstehe ich nur Bahnhof.

              Aber da gibt es gerade ein anderes Problem, alle Universal Widgets von inventwo haben den selben Link hinterlegt.
              Wenn ich einen Link bei einem Widget ändere übernehmen es die anderen Widgets auch. Universal ist ja gut aber doch nicht so universal.
              2.png

              Zum Bild: Alle widges haben immer den gleichen Link und zwar immer den zuletzt eingefügten. Lässt sich das ändern?

              Gruß Duffy

              DJMarc75D Offline
              DJMarc75D Offline
              DJMarc75
              schrieb am zuletzt editiert von
              #9

              @duffy sagte in Aus Vis heraus Grafana Dashboard in Browser öffnen:

              Universal Widgets von inventwo

              Aber Du weisst schon dass @OliverIO in seinen tollen Beispielen vom HTML-Widget schreibt ?!

              Lehrling seit 1975 !!!
              Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
              https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

              DuffyD 1 Antwort Letzte Antwort
              0
              • DJMarc75D DJMarc75

                @duffy sagte in Aus Vis heraus Grafana Dashboard in Browser öffnen:

                Universal Widgets von inventwo

                Aber Du weisst schon dass @OliverIO in seinen tollen Beispielen vom HTML-Widget schreibt ?!

                DuffyD Offline
                DuffyD Offline
                Duffy
                schrieb am zuletzt editiert von
                #10

                @djmarc75

                Nein, nicht wirklich deshalb habe ich ja geschrieben das ich das erst mal setzten lassen muss.
                Da muß ich mal schauen ob ich da einen Ansatz zum nachvolziehen finde.

                Aber hast du vielleich eine erklärung warum alle widgets immer den gleichen Link übernehmen?

                Nix besonderes; iob auf Respberry pi 4 (8GB) mit 32 GB SSD
                Node.js: v22.22.1
                NPM: 10.9.4
                js-controller 7.0.7
                Linux: Trixie

                DJMarc75D 1 Antwort Letzte Antwort
                0
                • DuffyD Duffy

                  @djmarc75

                  Nein, nicht wirklich deshalb habe ich ja geschrieben das ich das erst mal setzten lassen muss.
                  Da muß ich mal schauen ob ich da einen Ansatz zum nachvolziehen finde.

                  Aber hast du vielleich eine erklärung warum alle widgets immer den gleichen Link übernehmen?

                  DJMarc75D Offline
                  DJMarc75D Offline
                  DJMarc75
                  schrieb am zuletzt editiert von DJMarc75
                  #11

                  @duffy sagte in Aus Vis heraus Grafana Dashboard in Browser öffnen:

                  Aber hast du vielleich eine erklärung warum alle widgets immer den gleichen Link übernehmen?

                  Ja klar, wenn Du kopierst dann musst Du natürlich auch in der Kopie den Link ändern.

                  edit: grad gelesen dass alle Widgets dann den Link ändern... in dem Fall mal einfach den Browsercache leeren und den Browser neu starten.

                  Lehrling seit 1975 !!!
                  Beitrag geholfen ? dann gerne ein upvote rechts unten im Beitrag klicken ;)
                  https://forum.iobroker.net/topic/51555/hinweise-f%C3%BCr-gute-forenbeitr%C3%A4ge

                  DuffyD 1 Antwort Letzte Antwort
                  0
                  • DJMarc75D DJMarc75

                    @duffy sagte in Aus Vis heraus Grafana Dashboard in Browser öffnen:

                    Aber hast du vielleich eine erklärung warum alle widgets immer den gleichen Link übernehmen?

                    Ja klar, wenn Du kopierst dann musst Du natürlich auch in der Kopie den Link ändern.

                    edit: grad gelesen dass alle Widgets dann den Link ändern... in dem Fall mal einfach den Browsercache leeren und den Browser neu starten.

                    DuffyD Offline
                    DuffyD Offline
                    Duffy
                    schrieb am zuletzt editiert von
                    #12

                    @djmarc75

                    Das war die Lösung, Cache gelöscht und schon war eine individuelle Zuordnung möglich.
                    Als nächstes werde ich mich mal dem design widmen.

                    Danke Euch vielmals und wünsche einen schönen Nachmittag.

                    Gruß Duffy

                    Nix besonderes; iob auf Respberry pi 4 (8GB) mit 32 GB SSD
                    Node.js: v22.22.1
                    NPM: 10.9.4
                    js-controller 7.0.7
                    Linux: Trixie

                    1 Antwort Letzte Antwort
                    0
                    • OliverIOO OliverIO

                      @duffy

                      hier mal ein komplett beispiel.

                      einfach neues html widget anlegen und den folgenden inhalt
                      in die Eigenschaft HTML des widgets eintragen und w00029 mit der widgetid deines html widgets austauschen

                      <style>
                      #w00029 .button {
                        background-color: #4CAF50; /* Green */
                        border: none;
                        color: white;
                        padding: 5px 5px;
                        text-align: center;
                        text-decoration: none;
                        display: inline-block;
                        font-size: 16px;
                      }
                      </style>
                      <form action="https://www.iobroker.net/" method="get" target="_blank">
                      <button class="button">Button</button>
                      </form>
                      
                      DuffyD Offline
                      DuffyD Offline
                      Duffy
                      schrieb am zuletzt editiert von
                      #13

                      @oliverio

                      Hallo oliverio,

                      Danke für den Hinweis.
                      Wenn ich das richtig verstehe ist es ein alternativer Weg zu einem Button über HTML. (Hatte es mal mit deinem HTML code getestet)
                      Die von dir angegeben Links scheinen das ja recht gut zu beschreiben und ich werde mir das auch noch einmal ansehen, ist was für die kalte Jahreszeit :-)

                      Jetzt hat die Visu erst mal mit quick and dirty geklappt, aber schön wäre schon auch schön ;-).

                      Viele Grüße Duffy

                      Nix besonderes; iob auf Respberry pi 4 (8GB) mit 32 GB SSD
                      Node.js: v22.22.1
                      NPM: 10.9.4
                      js-controller 7.0.7
                      Linux: Trixie

                      1 Antwort Letzte Antwort
                      0
                      Antworten
                      • In einem neuen Thema antworten
                      Anmelden zum Antworten
                      • Älteste zuerst
                      • Neuste zuerst
                      • Meiste Stimmen


                      Support us

                      ioBroker
                      Community Adapters
                      Donate

                      439

                      Online

                      32.7k

                      Benutzer

                      82.5k

                      Themen

                      1.3m

                      Beiträge
                      Community
                      Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                      ioBroker Community 2014-2025
                      logo
                      • Anmelden

                      • Du hast noch kein Konto? Registrieren

                      • Anmelden oder registrieren, um zu suchen
                      • Erster Beitrag
                        Letzter Beitrag
                      0
                      • Home
                      • Aktuell
                      • Tags
                      • Ungelesen 0
                      • Kategorien
                      • Unreplied
                      • Beliebt
                      • GitHub
                      • Docu
                      • Hilfe