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. [gelöst]Wasserhahn Widget??

NEWS

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

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

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

[gelöst]Wasserhahn Widget??

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
36 Beiträge 3 Kommentatoren 1.7k 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.
  • MartinK.M MartinK.

    Hallo Kollegen :-) Ich suche für meine VIS noch ein Wasserhahn Widget , am liebsten etwas mit "Signalbild" wo man sieht das der Wasserhahn "läuft" und wenn er geschlossen ist.. Gibt es schon so etwas ? oder muss ich das selber basteln ?? :grinning: ?

    liv-in-skyL Offline
    liv-in-skyL Offline
    liv-in-sky
    schrieb am zuletzt editiert von
    #2

    @MartinK

    was hälst du von sowas - rot aus - grün ein-drehend

    drehen2.gif

    image ist von mfg-svg - übereinander gelegt und mit sichtbarkeit gearbeitet

    nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

    MartinK.M 2 Antworten Letzte Antwort
    0
    • liv-in-skyL liv-in-sky

      @MartinK

      was hälst du von sowas - rot aus - grün ein-drehend

      drehen2.gif

      image ist von mfg-svg - übereinander gelegt und mit sichtbarkeit gearbeitet

      MartinK.M Offline
      MartinK.M Offline
      MartinK.
      schrieb am zuletzt editiert von
      #3

      @liv-in-sky Ja, das wäre schon nicht schlecht :-)

      ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

      1 Antwort Letzte Antwort
      0
      • liv-in-skyL liv-in-sky

        @MartinK

        was hälst du von sowas - rot aus - grün ein-drehend

        drehen2.gif

        image ist von mfg-svg - übereinander gelegt und mit sichtbarkeit gearbeitet

        MartinK.M Offline
        MartinK.M Offline
        MartinK.
        schrieb am zuletzt editiert von
        #4

        @liv-in-sky Ich versuche mal ob ich das auch hinbekomme ;-)

        ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

        liv-in-skyL 1 Antwort Letzte Antwort
        0
        • MartinK.M MartinK.

          @liv-in-sky Ich versuche mal ob ich das auch hinbekomme ;-)

          liv-in-skyL Offline
          liv-in-skyL Offline
          liv-in-sky
          schrieb am zuletzt editiert von
          #5

          @MartinK wenn hilfe benötigt - einfach melden

          für das drehen brauchs du ein einen css eintrag

          .anime { animation: turner 4s infinite linear !important}
          
          @keyframes turner{
              from{  transform: rotateY(0deg)   }
              to  {  transform: rotateY(360deg) }
          }
          

          die widgets als adapter installieren :

          mfd icons as svg

          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

          MartinK.M 1 Antwort Letzte Antwort
          0
          • liv-in-skyL liv-in-sky

            @MartinK wenn hilfe benötigt - einfach melden

            für das drehen brauchs du ein einen css eintrag

            .anime { animation: turner 4s infinite linear !important}
            
            @keyframes turner{
                from{  transform: rotateY(0deg)   }
                to  {  transform: rotateY(360deg) }
            }
            

            die widgets als adapter installieren :

            mfd icons as svg

            MartinK.M Offline
            MartinK.M Offline
            MartinK.
            schrieb am zuletzt editiert von MartinK.
            #6

            @liv-in-sky Also als Adapter habe ich das jetzt installiert

            ws.PNG

            aber in der VIS-Widget Liste finde ich diese Symbole noch nicht ??
            Irgendwas mache ich noch falsch ?? :unamused:

            ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

            liv-in-skyL 1 Antwort Letzte Antwort
            0
            • MartinK.M MartinK.

              @liv-in-sky Also als Adapter habe ich das jetzt installiert

              ws.PNG

              aber in der VIS-Widget Liste finde ich diese Symbole noch nicht ??
              Irgendwas mache ich noch falsch ?? :unamused:

              liv-in-skyL Offline
              liv-in-skyL Offline
              liv-in-sky
              schrieb am zuletzt editiert von
              #7

              @MartinK

              wenn du das bild auswählst kopiere das mal in den "pfad"

              /icons-mfd-svg/
              

              Image 2.png

              nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

              1 Antwort Letzte Antwort
              0
              • liv-in-skyL Offline
                liv-in-skyL Offline
                liv-in-sky
                schrieb am zuletzt editiert von liv-in-sky
                #8

                @MartinK

                kannst auch das testen

                drehen3.gif

                wh-rot.png wh-gruen.png

                wh-gruen-links.png wh-rot-links.png

                nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                MartinK.M 1 Antwort Letzte Antwort
                0
                • sigi234S Online
                  sigi234S Online
                  sigi234
                  Forum Testing Most Active
                  schrieb am zuletzt editiert von sigi234
                  #9

                  Vielleicht kannst du es gebrauchen........

                  Wasser.gif

                  Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                  Immer Daten sichern!

                  1 Antwort Letzte Antwort
                  0
                  • liv-in-skyL liv-in-sky

                    @MartinK

                    kannst auch das testen

                    drehen3.gif

                    wh-rot.png wh-gruen.png

                    wh-gruen-links.png wh-rot-links.png

                    MartinK.M Offline
                    MartinK.M Offline
                    MartinK.
                    schrieb am zuletzt editiert von
                    #10

                    @liv-in-sky Ja, vielen Dank.... Ich stehe als Newbee in Sachen ioBroker jetzt gerade vor der Frage, wie - oder als was ich dieses Icon einfügen muss ?

                    Als Signalbild für den Button ? Dort wo das X - ist soll das Icon hin ...
                    qw.png

                    ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                    MartinK.M 1 Antwort Letzte Antwort
                    0
                    • MartinK.M MartinK.

                      @liv-in-sky Ja, vielen Dank.... Ich stehe als Newbee in Sachen ioBroker jetzt gerade vor der Frage, wie - oder als was ich dieses Icon einfügen muss ?

                      Als Signalbild für den Button ? Dort wo das X - ist soll das Icon hin ...
                      qw.png

                      MartinK.M Offline
                      MartinK.M Offline
                      MartinK.
                      schrieb am zuletzt editiert von
                      #11

                      @MartinK Die Buttons sind alle bereits mit dem Shelly verknüpft... nur das Bild eben nicht ;-)

                      ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                      liv-in-skyL 1 Antwort Letzte Antwort
                      0
                      • MartinK.M MartinK.

                        @MartinK Die Buttons sind alle bereits mit dem Shelly verknüpft... nur das Bild eben nicht ;-)

                        liv-in-skyL Offline
                        liv-in-skyL Offline
                        liv-in-sky
                        schrieb am zuletzt editiert von
                        #12

                        @MartinK du brauchst das image widget - zweimal übereinander - einmal das rote - einmal das grüne definieren- nimm erstmal die icons, die ich oben eingefügt hatte

                        Image 4.png

                        blau: hier definierst du, wann das bild angezeigt wird - die objectid vom shelly
                        lila: hier wählst du das bild aus - downloade die icons vom forum auf deinen rechner -

                        in diesem datei manager kannst du dann mit dem grünen pfeil die beiden bilder in die vis hochladen (von deinem computer - es geht ein popup auf und du musst dann die beiden bilder reinziehen
                        Image 5.png

                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                        MartinK.M 1 Antwort Letzte Antwort
                        0
                        • liv-in-skyL liv-in-sky

                          @MartinK du brauchst das image widget - zweimal übereinander - einmal das rote - einmal das grüne definieren- nimm erstmal die icons, die ich oben eingefügt hatte

                          Image 4.png

                          blau: hier definierst du, wann das bild angezeigt wird - die objectid vom shelly
                          lila: hier wählst du das bild aus - downloade die icons vom forum auf deinen rechner -

                          in diesem datei manager kannst du dann mit dem grünen pfeil die beiden bilder in die vis hochladen (von deinem computer - es geht ein popup auf und du musst dann die beiden bilder reinziehen
                          Image 5.png

                          MartinK.M Offline
                          MartinK.M Offline
                          MartinK.
                          schrieb am zuletzt editiert von
                          #13

                          @liv-in-sky SUPER!! ... Vielen Dank ! :-) Das hat schon mal geklappt:+1:
                          jetzt muss ich nur noch das drehen mit dem CSS Eintrag hinbekommen...
                          wenn ich den code einfach so in den CSS einfüge klappt das noch nicht so ganz ...

                          ad.PNG

                          bekomme dann immer eine Fehlermeldung... Ich habe da sicher noch irgendwo einen
                          Fehler drin...:grimacing:

                          ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                          liv-in-skyL 1 Antwort Letzte Antwort
                          0
                          • MartinK.M MartinK.

                            @liv-in-sky SUPER!! ... Vielen Dank ! :-) Das hat schon mal geklappt:+1:
                            jetzt muss ich nur noch das drehen mit dem CSS Eintrag hinbekommen...
                            wenn ich den code einfach so in den CSS einfüge klappt das noch nicht so ganz ...

                            ad.PNG

                            bekomme dann immer eine Fehlermeldung... Ich habe da sicher noch irgendwo einen
                            Fehler drin...:grimacing:

                            liv-in-skyL Offline
                            liv-in-skyL Offline
                            liv-in-sky
                            schrieb am zuletzt editiert von liv-in-sky
                            #14

                            @MartinK

                            zusätzlich:

                            css im widget angeben - css ist für alle widget da

                            Image 6.png

                            wenn du den fehler mit dem ausrufezeichen im css meinst - ist normal - habe ich auch

                            nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                            1 Antwort Letzte Antwort
                            0
                            • liv-in-skyL Offline
                              liv-in-skyL Offline
                              liv-in-sky
                              schrieb am zuletzt editiert von liv-in-sky
                              #15

                              es gibt auch einen trick mit nur einem bild zu arbeiten - das nennt sich binding:

                              Image 8.png

                              dazu musst du "quasi" ein kleines script in die punkte eintragen

                              css:

                              {val:controll-own.0.mount.CPULuefter; val=="true" ? "anime": val=="false" ? "": ""}
                              

                              quelle :

                              {val:controll-own.0.mount.CPULuefter; val=="true" ? "/vis.0/armin/img/wh-gruen.png": val=="false" ? "/vis.0/armin/img/wh-rot.png": ""}
                              

                              dasbedeutet if/wenn

                              wenn der val/wert von datenpunkt "controll-own.0.mount.CPULuefter" wahr ist nutze ..... wenn falsch nutze ... sonst "" (hier gibt es kein sonst!)

                              das kann in vielen dieser vis-settings genutzt werden z.b farbe des textes oder beim rahmen, ...

                              kann sein, dass das bild im vis-editor nicht mehr angezeigt wird - aber im browser sieht man es !

                              nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                              MartinK.M 1 Antwort Letzte Antwort
                              0
                              • liv-in-skyL liv-in-sky

                                es gibt auch einen trick mit nur einem bild zu arbeiten - das nennt sich binding:

                                Image 8.png

                                dazu musst du "quasi" ein kleines script in die punkte eintragen

                                css:

                                {val:controll-own.0.mount.CPULuefter; val=="true" ? "anime": val=="false" ? "": ""}
                                

                                quelle :

                                {val:controll-own.0.mount.CPULuefter; val=="true" ? "/vis.0/armin/img/wh-gruen.png": val=="false" ? "/vis.0/armin/img/wh-rot.png": ""}
                                

                                dasbedeutet if/wenn

                                wenn der val/wert von datenpunkt "controll-own.0.mount.CPULuefter" wahr ist nutze ..... wenn falsch nutze ... sonst "" (hier gibt es kein sonst!)

                                das kann in vielen dieser vis-settings genutzt werden z.b farbe des textes oder beim rahmen, ...

                                kann sein, dass das bild im vis-editor nicht mehr angezeigt wird - aber im browser sieht man es !

                                MartinK.M Offline
                                MartinK.M Offline
                                MartinK.
                                schrieb am zuletzt editiert von
                                #16

                                @liv-in-sky Vielen Dank für Eure hilfe... !!! :+1: :+1: Ich habe es auch geschafft das "Es" sich dreht, aber es dreht sich jetzt der Ganze Tab in der VIS... und nicht das Wasserhahn Icon :fearful: ....
                                Woran kann das denn liegen ??? :relieved:

                                ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                                liv-in-skyL 1 Antwort Letzte Antwort
                                0
                                • MartinK.M MartinK.

                                  @liv-in-sky Vielen Dank für Eure hilfe... !!! :+1: :+1: Ich habe es auch geschafft das "Es" sich dreht, aber es dreht sich jetzt der Ganze Tab in der VIS... und nicht das Wasserhahn Icon :fearful: ....
                                  Woran kann das denn liegen ??? :relieved:

                                  liv-in-skyL Offline
                                  liv-in-skyL Offline
                                  liv-in-sky
                                  schrieb am zuletzt editiert von liv-in-sky
                                  #17

                                  @MartinK

                                  bei welcher version? ich meine mit der erst-erklärten vorgehensweise oder der zweiten mit dem binding

                                  hab ich noch nie gesehen - evtl kannst du das css mal unter project einfühgen und bei global löschen

                                  das hatte ich noch nie ?

                                  nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                  MartinK.M 1 Antwort Letzte Antwort
                                  0
                                  • liv-in-skyL liv-in-sky

                                    @MartinK

                                    bei welcher version? ich meine mit der erst-erklärten vorgehensweise oder der zweiten mit dem binding

                                    hab ich noch nie gesehen - evtl kannst du das css mal unter project einfühgen und bei global löschen

                                    das hatte ich noch nie ?

                                    MartinK.M Offline
                                    MartinK.M Offline
                                    MartinK.
                                    schrieb am zuletzt editiert von
                                    #18

                                    @liv-in-sky Mit der erste Version.. Auch unter project dreht sich der ganze Tab ?

                                    ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                                    liv-in-skyL 2 Antworten Letzte Antwort
                                    0
                                    • MartinK.M MartinK.

                                      @liv-in-sky Mit der erste Version.. Auch unter project dreht sich der ganze Tab ?

                                      liv-in-skyL Offline
                                      liv-in-skyL Offline
                                      liv-in-sky
                                      schrieb am zuletzt editiert von
                                      #19

                                      @MartinK

                                      du könntest mal den name des css eintrages ändern - im css das anime mal nach anime1 unbenennen

                                      und auch in den anderen feldern, wo du es benutzt

                                      welche version der vis hast du ? siehe adapter tab - hinten in der zeile !

                                      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                      MartinK.M 1 Antwort Letzte Antwort
                                      0
                                      • MartinK.M MartinK.

                                        @liv-in-sky Mit der erste Version.. Auch unter project dreht sich der ganze Tab ?

                                        liv-in-skyL Offline
                                        liv-in-skyL Offline
                                        liv-in-sky
                                        schrieb am zuletzt editiert von
                                        #20

                                        @MartinK du kannst auch mal das !important im css löschen - aber bei funktioniert es dann nicht mehr

                                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                        1 Antwort Letzte Antwort
                                        0
                                        • liv-in-skyL liv-in-sky

                                          @MartinK

                                          du könntest mal den name des css eintrages ändern - im css das anime mal nach anime1 unbenennen

                                          und auch in den anderen feldern, wo du es benutzt

                                          welche version der vis hast du ? siehe adapter tab - hinten in der zeile !

                                          MartinK.M Offline
                                          MartinK.M Offline
                                          MartinK.
                                          schrieb am zuletzt editiert von
                                          #21

                                          @liv-in-sky Ich habe es gerade nochmals in einem anderen Tab ausprobiert mit einem "Jalousie" icon... da klappt es... Ich wollt dieses Icon gerne auf dem Start tab einsetzen.
                                          Hat das etwas damit zu tun ? Normalerweise sollte es doch in jedem tab klappen oder?

                                          ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                                          liv-in-skyL 2 Antworten Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          346

                                          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