Monatsrückblick Januar/Februar 2026 ist online!

[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