Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. vis-inventwo v3.x.x

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    16
    1
    263

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

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

vis-inventwo v3.x.x

Scheduled Pinned Locked Moved Tester
42 Posts 14 Posters 6.8k Views 20 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • WszeneW Wszene

    Hallo Zusammen
    Ich verwende nun auch diesen Adapter

    Ich nutze unter anderen die Navigationsbutton
    Und dazu habe ich eine frage
    Wie kann ich diese bei aktiv mit CSS stylen

    Ich habe den Buttons eine CSS-Klasse gegeben
    Damit kann ich auch den "normalen" Style anpassen aber wie mache ich es bei Button-Aktiv

    Danke im Voraus
    Gruß
    Marcel

    jkvarelJ Offline
    jkvarelJ Offline
    jkvarel
    Developer
    wrote on last edited by
    #30

    Hallo @wszene
    Was hast du denn genau vor?
    Eigenes CSS brauchst du nicht. Du kannst sehr viel an den Widgets einstellen, damit es so aussieht wie du es willst

    1 Reply Last reply
    0
    • WszeneW Wszene

      Hallo Zusammen
      Ich verwende nun auch diesen Adapter

      Ich nutze unter anderen die Navigationsbutton
      Und dazu habe ich eine frage
      Wie kann ich diese bei aktiv mit CSS stylen

      Ich habe den Buttons eine CSS-Klasse gegeben
      Damit kann ich auch den "normalen" Style anpassen aber wie mache ich es bei Button-Aktiv

      Danke im Voraus
      Gruß
      Marcel

      BananaJoeB Online
      BananaJoeB Online
      BananaJoe
      Most Active
      wrote on last edited by
      #31

      @wszene wenn du das Widget als Typ Navigation definierst kannst du die Styles für "Normal", die View wird gerade nicht dargestellt, und "Aktiv", die Navigation ist gerade sichtbar einstellen.

      Ich habe mir so eine Navigation oben gebaut:
      290bd34c-77af-4043-950b-a33fe011c282-image.png
      Haus ist grün weil die View Haus gerade sichtbar ist.

      Die obere Leiste ist dabei eine eigene View welche ich per `basic - view in widget" eingebunden habe (da gibt es ein paar schöne Youtube-Videos die das schön erklären).
      Das Widget Haus ist dann z.B. so eingestellt:
      1dc7c25e-cdc8-495d-b3f7-87e26e79869a-image.png

      Und "" und "Aktiv" findest du auch an vielen anderen Stellen in dem Widget, da musst man mit nativen CSS nur selten etwas machen

      ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 10 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV APC 750W kaskadiert || Creality CR-10 SE 3D-Drucker

      WszeneW 1 Reply Last reply
      0
      • BananaJoeB BananaJoe

        @wszene wenn du das Widget als Typ Navigation definierst kannst du die Styles für "Normal", die View wird gerade nicht dargestellt, und "Aktiv", die Navigation ist gerade sichtbar einstellen.

        Ich habe mir so eine Navigation oben gebaut:
        290bd34c-77af-4043-950b-a33fe011c282-image.png
        Haus ist grün weil die View Haus gerade sichtbar ist.

        Die obere Leiste ist dabei eine eigene View welche ich per `basic - view in widget" eingebunden habe (da gibt es ein paar schöne Youtube-Videos die das schön erklären).
        Das Widget Haus ist dann z.B. so eingestellt:
        1dc7c25e-cdc8-495d-b3f7-87e26e79869a-image.png

        Und "" und "Aktiv" findest du auch an vielen anderen Stellen in dem Widget, da musst man mit nativen CSS nur selten etwas machen

        WszeneW Offline
        WszeneW Offline
        Wszene
        wrote on last edited by
        #32

        @bananajoe
        Ich mache sehr viel über CSS
        Die Navigation style ich z.B. so

        .ws-navbutton {
          background: #536976;
          background: -webkit-linear-gradient(to bottom, #292E49, #536976);
          background: linear-gradient(to bottom, #292E49, #536976);
          border-radius: 20px;
          box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
          filter: blur(0.2px);
          border-width: 0.1px;
          border-style: solid;
          border-color: rgba(255, 255, 255, .425);
          color: rgb(236, 238, 241);
        }
        

        Ich gebe also dem Widgets nur die Klasse mit
        und wenn ich mal wieder Lust auf eine andere Optik habe muss ich nur das CSS anpassen und muss nicht jedes Widget anfassen

        Meine Hard- & Software:

        • MSI Cubi 5 10M-049DE mit Proxmox
        • CC2652P Zigbee Stick
        • Steckdosen mit Tasmota und Zigbee
        • Lichtschalter mit Tasmota
        • IKEA TRÅDFRI Glühbirnen
        • Aqara Sensoren
        jkvarelJ 1 Reply Last reply
        0
        • WszeneW Wszene

          @bananajoe
          Ich mache sehr viel über CSS
          Die Navigation style ich z.B. so

          .ws-navbutton {
            background: #536976;
            background: -webkit-linear-gradient(to bottom, #292E49, #536976);
            background: linear-gradient(to bottom, #292E49, #536976);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
            filter: blur(0.2px);
            border-width: 0.1px;
            border-style: solid;
            border-color: rgba(255, 255, 255, .425);
            color: rgb(236, 238, 241);
          }
          

          Ich gebe also dem Widgets nur die Klasse mit
          und wenn ich mal wieder Lust auf eine andere Optik habe muss ich nur das CSS anpassen und muss nicht jedes Widget anfassen

          jkvarelJ Offline
          jkvarelJ Offline
          jkvarel
          Developer
          wrote on last edited by
          #33

          @wszene damit du nicht jedes Widget anpassen musst kannst du für jedes Feld Datenpunkte anlegen und per Binding eintragen. So kannst du auch jederzeit die Widgets anpassen. Du kannst dir sogar eine View bauen, um Farben usw. per Klick zu ändern.

          WszeneW 1 Reply Last reply
          1
          • jkvarelJ jkvarel

            @wszene damit du nicht jedes Widget anpassen musst kannst du für jedes Feld Datenpunkte anlegen und per Binding eintragen. So kannst du auch jederzeit die Widgets anpassen. Du kannst dir sogar eine View bauen, um Farben usw. per Klick zu ändern.

            WszeneW Offline
            WszeneW Offline
            Wszene
            wrote on last edited by
            #34

            @jkvarel sagte in vis-inventwo v3.x.x:

            @wszene damit du nicht jedes Widget anpassen musst kannst du für jedes Feld Datenpunkte anlegen und per Binding eintragen. So kannst du auch jederzeit die Widgets anpassen. Du kannst dir sogar eine View bauen, um Farben usw. per Klick zu ändern.

            Danke das ist die Idee
            So werde ich das machen

            Meine Hard- & Software:

            • MSI Cubi 5 10M-049DE mit Proxmox
            • CC2652P Zigbee Stick
            • Steckdosen mit Tasmota und Zigbee
            • Lichtschalter mit Tasmota
            • IKEA TRÅDFRI Glühbirnen
            • Aqara Sensoren
            1 Reply Last reply
            0
            • jkvarelJ Offline
              jkvarelJ Offline
              jkvarel
              Developer
              wrote on last edited by
              #35

              Version 3.3.0 ist online und bietet einen Colorpicker. Unterstützt wird HEX, HEX-8 RGB, HSL, HSV und CIE/XY.

              Bei Fragen gerne fragen und wenn es Probleme gibt bitte ein Issue auf GitHub machen.

              Viel Spaß mit dem Widget ;)

              ad6913c6-acec-43f0-ae54-389d1ca8c10f-image.png

              T P 2 Replies Last reply
              1
              • jkvarelJ jkvarel

                Version 3.3.0 ist online und bietet einen Colorpicker. Unterstützt wird HEX, HEX-8 RGB, HSL, HSV und CIE/XY.

                Bei Fragen gerne fragen und wenn es Probleme gibt bitte ein Issue auf GitHub machen.

                Viel Spaß mit dem Widget ;)

                ad6913c6-acec-43f0-ae54-389d1ca8c10f-image.png

                T Offline
                T Offline
                tritor
                wrote on last edited by
                #36

                Universal & Multi Widget Inhaltstypen

                Ich habe den letzten Adapter (3.3.0) installiert, finde aber das Wideg für Uhrzeit analog und digital nicht finden.
                Wird in Vis nicht angezeigt.

                Gernot

                Host: i9 server Proxmox , Debian 13.2 for ioBroker
                ioBroker: 7.7.22, Node.js: 22.21.1, NPM: 10.9.4, JS-controller: 7.1.0
                Wetterstation: HP1000SEPro V1.9.0 Easeweather V1.7.0
                Grafana 12.3.1 / InfluxDB 2.7.12

                jkvarelJ 1 Reply Last reply
                0
                • T tritor

                  Universal & Multi Widget Inhaltstypen

                  Ich habe den letzten Adapter (3.3.0) installiert, finde aber das Wideg für Uhrzeit analog und digital nicht finden.
                  Wird in Vis nicht angezeigt.

                  jkvarelJ Offline
                  jkvarelJ Offline
                  jkvarel
                  Developer
                  wrote on last edited by jkvarel
                  #37

                  @tritor Die Uhr ist kein extra Widget. Die kann beim Universal- und Multi-Widget bei Inhalts Typ ausgewählt werden. Danach werden die Einstellungen dafür sichtbar
                  f8fb9dbd-c68c-4763-a7c4-45e8b4dfc283-image.png

                  T 1 Reply Last reply
                  0
                  • jkvarelJ jkvarel

                    @tritor Die Uhr ist kein extra Widget. Die kann beim Universal- und Multi-Widget bei Inhalts Typ ausgewählt werden. Danach werden die Einstellungen dafür sichtbar
                    f8fb9dbd-c68c-4763-a7c4-45e8b4dfc283-image.png

                    T Offline
                    T Offline
                    tritor
                    wrote on last edited by
                    #38

                    @jkvarel
                    Danke, ist schon gut versteckt.

                    Gernot

                    Host: i9 server Proxmox , Debian 13.2 for ioBroker
                    ioBroker: 7.7.22, Node.js: 22.21.1, NPM: 10.9.4, JS-controller: 7.1.0
                    Wetterstation: HP1000SEPro V1.9.0 Easeweather V1.7.0
                    Grafana 12.3.1 / InfluxDB 2.7.12

                    1 Reply Last reply
                    0
                    • S Away
                      S Away
                      Shadowhunter23
                      wrote on last edited by Shadowhunter23
                      #39

                      Bei der Sortierung z.B. nach Battery werden die 100% erst weiter unten angezeigt.
                      Sollten die nicht zuerst kommen und dann absteigend die anderen Werte.
                      Kann man das irgendwo einstellen, zuerst alle 100% und dann absteigend?

                      Json Tabelle

                      Bild von oben bzgl der Sortierung:
                      101.png

                      Und weiter unten kommen dann erst die 100%:
                      100.png

                      Proxmox 9 HA-Cluster mit 3x HP prodesk 400 G6 i5
                      Bei einem downvote bitte melden, es könnte sein, dass dieser ungewollt ist!

                      A BananaJoeB 2 Replies Last reply
                      0
                      • S Shadowhunter23

                        Bei der Sortierung z.B. nach Battery werden die 100% erst weiter unten angezeigt.
                        Sollten die nicht zuerst kommen und dann absteigend die anderen Werte.
                        Kann man das irgendwo einstellen, zuerst alle 100% und dann absteigend?

                        Json Tabelle

                        Bild von oben bzgl der Sortierung:
                        101.png

                        Und weiter unten kommen dann erst die 100%:
                        100.png

                        A Offline
                        A Offline
                        Ahnungsbefreit
                        wrote on last edited by Ahnungsbefreit
                        #40

                        @shadowhunter23 Hast Du den Typ der Spalte auf "number" gesetzt? Sieht nach alphabetischer Sortierung aus

                        EDIT: Vergiss es, funktioniert auch nicht (eben probiert). Wenn die Quelle Text ist, funktioniert das halt nicht.

                        Wenn meine Antwort hilfreich war, dürft Ihr das gerne durch einen "Upvote" (der kleine "^" unten rechts) zum Ausdruck bringen.

                        1 Reply Last reply
                        1
                        • S Shadowhunter23

                          Bei der Sortierung z.B. nach Battery werden die 100% erst weiter unten angezeigt.
                          Sollten die nicht zuerst kommen und dann absteigend die anderen Werte.
                          Kann man das irgendwo einstellen, zuerst alle 100% und dann absteigend?

                          Json Tabelle

                          Bild von oben bzgl der Sortierung:
                          101.png

                          Und weiter unten kommen dann erst die 100%:
                          100.png

                          BananaJoeB Online
                          BananaJoeB Online
                          BananaJoe
                          Most Active
                          wrote on last edited by
                          #41

                          @shadowhunter23 wie sieht der Wert denn im JSON selbst aus? Steht der Wert in "" oder direkt als Zahl? Nur wenn er direkt steht (und dann dürfte er kein % haben kann er korrekt sortieren, ansonsten würde er als Text sortieren.

                          Oder man schummelt und schreibt davor das nach dem er sortieren sollen. Ich schreibe das als "<!--A-->" - hier also ein heimliches A davor. <!--070-->würde auch gehen. <!-- und --> kennzeichnen Kommentare in HTLM. Das zeigt er nicht an, berücksichtigt es aber beim sortieren.

                          ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 10 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV APC 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                          1 Reply Last reply
                          0
                          • jkvarelJ jkvarel

                            Version 3.3.0 ist online und bietet einen Colorpicker. Unterstützt wird HEX, HEX-8 RGB, HSL, HSV und CIE/XY.

                            Bei Fragen gerne fragen und wenn es Probleme gibt bitte ein Issue auf GitHub machen.

                            Viel Spaß mit dem Widget ;)

                            ad6913c6-acec-43f0-ae54-389d1ca8c10f-image.png

                            P Offline
                            P Offline
                            Phinix
                            wrote on last edited by
                            #42

                            @jkvarel
                            Ich würde gerne den Colorpicker mit eckigen Slidern verwenden. Wenn ich die Rundungen einstelle, passiert bei den Slidern direkt nichts.
                            Beim Colorslider habe ich die Möglichkeit die Rundungen einzustellen, allerdings wird der komplette Farbverlauf grafisch dargestellt, ich möchte nur die Farbtemperatur darstellen. Beim Simpleslider könnte ich meinen eigenen Farbverlauf darstellen, jedoch kann dieser kein Hex-Code.
                            Wie bekomme ich denn die Ecken eckig?

                            4c1f9e52-6eb2-4659-8570-e0f20facbd22-image.png

                            1 Reply Last reply
                            0
                            Reply
                            • Reply as topic
                            Log in to reply
                            • Oldest to Newest
                            • Newest to Oldest
                            • Most Votes


                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            557

                            Online

                            32.7k

                            Users

                            82.5k

                            Topics

                            1.3m

                            Posts
                            Community
                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                            ioBroker Community 2014-2025
                            logo
                            • Login

                            • Don't have an account? Register

                            • Login or register to search.
                            • First post
                              Last post
                            0
                            • Home
                            • Recent
                            • Tags
                            • Unread 0
                            • Categories
                            • Unreplied
                            • Popular
                            • GitHub
                            • Docu
                            • Hilfe