Monatsrückblick Januar/Februar 2026 ist online!

[Duffy]

Hallo zusammen,

ich versuche gerade mir eine Visualisierung anzulegen bei der ich über verschiedene "Buttons" auf verschieden Grafan Dashborad zugreifen kann.

Das Dashboard soll nicht in einem Popup Fenster erscheinen, sondern direkt in einem eigenen Browserfenster geöffnet werden.
Ich habe hier schon verschieden HTML Widges ausprobiert aber bei denen erscheint dann der Inhalt des Links immer auch in dem Widget oder es steht nur der Link in dem Widgetfenster.
Wie gesagt, über ein popup möchte ich es, wenn irgend möglich nicht lösen.

Um noch etwas konkreter zu werden, ich möchte Dashboard x in einem Browser öffnen und mit der Browse zurück Taste wieder zurück zu Vis kommen, dort dann Dashboard y anklicken usw.
Einfach für eine schnelle Übersicht der einzelnen Dashboards hintereinander, nicht mehrere Dashboards gemeinsam auf einer Seite.

Gibt es da einen Weg oder ein spezielles Widget? Bisher bin ich nicht fündig geworden.

Gruß Duffy

[DJMarc75]

@duffy Den Adapter "inventwo Design Widgets" installieren:

In Vis dann das Widget "Universal Switch" verwenden

Haufenweisse Möglichkeiten:

[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

[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

[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.

[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

[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>

[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.

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

Gruß Duffy

[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 ?!

[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?

[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.

[Duffy]

@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

[Duffy]

@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