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. Tester
  4. vis-inventwo v3.x.x

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.8k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.2k

vis-inventwo v3.x.x

Geplant Angeheftet Gesperrt Verschoben Tester
42 Beiträge 14 Kommentatoren 6.2k Aufrufe 20 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.
  • 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 Offline
    BananaJoeB Offline
    BananaJoe
    Most Active
    schrieb am zuletzt editiert von
    #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, 9 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 750W kaskadiert || Creality CR-10 SE 3D-Drucker

    WszeneW 1 Antwort Letzte Antwort
    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
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          0
          • jkvarelJ Offline
            jkvarelJ Offline
            jkvarel
            Developer
            schrieb am zuletzt editiert von
            #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 Antworten Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 12.0 for ioBroker
              ioBroker: 7.7.19, Node.js: 22.21.1, NPM: 10.9.3, JS-controller: 7.0.7
              Wetterstation: HP1000SEPro V1.9.0 Easeweather V1.7.0
              Grafana 12.0.2 / InfluxDB 2.7.11

              jkvarelJ 1 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #38

                  @jkvarel
                  Danke, ist schon gut versteckt.

                  Gernot

                  Host: i9 server Proxmox , Debian 12.0 for ioBroker
                  ioBroker: 7.7.19, Node.js: 22.21.1, NPM: 10.9.3, JS-controller: 7.0.7
                  Wetterstation: HP1000SEPro V1.9.0 Easeweather V1.7.0
                  Grafana 12.0.2 / InfluxDB 2.7.11

                  1 Antwort Letzte Antwort
                  0
                  • S Abwesend
                    S Abwesend
                    Shadowhunter23
                    schrieb am zuletzt editiert von 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 Antworten Letzte Antwort
                    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 Online
                      A Online
                      Ahnungsbefreit
                      schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                      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 Offline
                        BananaJoeB Offline
                        BananaJoe
                        Most Active
                        schrieb am zuletzt editiert von
                        #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, 9 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 750W kaskadiert || Creality CR-10 SE 3D-Drucker

                        1 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 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

                          726

                          Online

                          32.4k

                          Benutzer

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