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. Praktische Anwendungen (Showcase)
  4. Einfach mal zeigen will….. :-) - Teil 3

NEWS

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

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

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

Einfach mal zeigen will….. :-) - Teil 3

Scheduled Pinned Locked Moved Praktische Anwendungen (Showcase)
visvisualisierungvisualizationvis editor
813 Posts 155 Posters 351.0k Views 157 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.
  • D dos1973

    @Bostil
    @bostil sagte in Einfach mal zeigen will….. :-) - Teil 3:

    der CSS-Schnipsel wäre natürlich genial - Danke schonmal!

    hier dass css für den "blurr" Effekt
    kannst die RGBA Farben und die Intensität der opacity nach eigenen Wünschen einstellen.

    .glass_weiss {
        background: linear-gradient(20deg, rgba(255,255, 255, 0.9), rgba(255, 255, 255, 0.2));
            backdrop-filter: blur(15px);
        -webkit-backdrop-filer: blur(15px);
    }
    
    Horst BöttcherH Offline
    Horst BöttcherH Offline
    Horst Böttcher
    wrote on last edited by
    #364

    @dos1973 sagte in Einfach mal zeigen will….. :-) - Teil 3:

    .glass_weiss {
        background: linear-gradient(20deg, rgba(255,255, 255, 0.9), rgba(255, 255, 255, 0.2));
            backdrop-filter: blur(15px);
        -webkit-backdrop-filer: blur(15px);
    }
    

    wo kommt das rein ???

    ioBroker auf Proxmox (Debian) auf LENOVO PC Thinkcentre als Produktivsystem

    GlasfaserG D 2 Replies Last reply
    0
    • Horst BöttcherH Horst Böttcher

      @dos1973 sagte in Einfach mal zeigen will….. :-) - Teil 3:

      .glass_weiss {
          background: linear-gradient(20deg, rgba(255,255, 255, 0.9), rgba(255, 255, 255, 0.2));
              backdrop-filter: blur(15px);
          -webkit-backdrop-filer: blur(15px);
      }
      

      wo kommt das rein ???

      GlasfaserG Offline
      GlasfaserG Offline
      Glasfaser
      wrote on last edited by Glasfaser
      #365

      @horst-böttcher

      hier in CSS Project einfügen :

      Beispielbild:

      1.JPG

      dann beim Widget :

      2.JPG

      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

      1 Reply Last reply
      0
      • Horst BöttcherH Horst Böttcher

        @dos1973 sagte in Einfach mal zeigen will….. :-) - Teil 3:

        .glass_weiss {
            background: linear-gradient(20deg, rgba(255,255, 255, 0.9), rgba(255, 255, 255, 0.2));
                backdrop-filter: blur(15px);
            -webkit-backdrop-filer: blur(15px);
        }
        

        wo kommt das rein ???

        D Offline
        D Offline
        dos1973
        wrote on last edited by
        #366

        @horst-böttcher
        @Coffeelover
        @Bostil

        ich habe eben festgestellt dass ich einen copy/paste Fehler habe.

        das FILTER ist falsch geschrieben, das T fehlt.

        richtig

        -webkit-backdrop-filter
        

        ich habe festgestellt dass im Safari auf dem Mac der Blurr Filter nicht angewendet wurde, mit Korrektur gehts.

        C 1 Reply Last reply
        0
        • D dos1973

          @horst-böttcher
          @Coffeelover
          @Bostil

          ich habe eben festgestellt dass ich einen copy/paste Fehler habe.

          das FILTER ist falsch geschrieben, das T fehlt.

          richtig

          -webkit-backdrop-filter
          

          ich habe festgestellt dass im Safari auf dem Mac der Blurr Filter nicht angewendet wurde, mit Korrektur gehts.

          C Offline
          C Offline
          Coffeelover
          wrote on last edited by
          #367

          @dos1973 Danke für den Hinweis. Mit Chrome hat es trotz Tippfehler funktioniert, mit Firefox funktioniert es auch nach Korretur nicht.

          1 Reply Last reply
          0
          • BostilB Offline
            BostilB Offline
            Bostil
            wrote on last edited by
            #368

            @dos1973 Arbeite immer noch weiter mit deiner Inspiration und hatte nun die Idee die Navigation & Anzeige sonstiger Informationen etwas umzubauen. Siehe rechter Bereich im Gif unterhalb.

            Animation.gif

            T C 2 Replies Last reply
            2
            • BostilB Bostil

              @dos1973 Arbeite immer noch weiter mit deiner Inspiration und hatte nun die Idee die Navigation & Anzeige sonstiger Informationen etwas umzubauen. Siehe rechter Bereich im Gif unterhalb.

              Animation.gif

              T Offline
              T Offline
              Tony H.
              wrote on last edited by
              #369

              @bostil eine super Arbeit!!! Ab wann kann man klauen bzw zu seinen Gunsten nutzen?

              ? 1 Reply Last reply
              1
              • T Tony H.

                @bostil eine super Arbeit!!! Ab wann kann man klauen bzw zu seinen Gunsten nutzen?

                ? Offline
                ? Offline
                A Former User
                wrote on last edited by
                #370

                @tony-h

                also bei mir kommt da unknown property mit dem filter im CSS :-(

                GlasfaserG 1 Reply Last reply
                0
                • ? A Former User

                  @tony-h

                  also bei mir kommt da unknown property mit dem filter im CSS :-(

                  GlasfaserG Offline
                  GlasfaserG Offline
                  Glasfaser
                  wrote on last edited by
                  #371

                  @olli_m

                  https://forum.iobroker.net/topic/23917/einfach-mal-zeigen-will-teil-3/363?_=1634738268290&lang=de

                  Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                  1 Reply Last reply
                  0
                  • BostilB Bostil

                    @dos1973 Arbeite immer noch weiter mit deiner Inspiration und hatte nun die Idee die Navigation & Anzeige sonstiger Informationen etwas umzubauen. Siehe rechter Bereich im Gif unterhalb.

                    Animation.gif

                    C Offline
                    C Offline
                    Coffeelover
                    wrote on last edited by
                    #372

                    @bostil Cool. Wie hast du die wechselnde Steuerung umgesetzt? Ist das scrollbar oder über einen Schalter?

                    1 Reply Last reply
                    0
                    • BostilB Offline
                      BostilB Offline
                      Bostil
                      wrote on last edited by Bostil
                      #373

                      Na klar, kann ich das hier teilen. Credits gehen an @dos1973

                      Bitte beachten ...

                      • noch work in progress
                      • verwendete Schriftart: Akrobat
                      • für den "Blur"-Effekt bitte @dos1973 CSS-Code unter CSS Global eintragen
                      • nicht "pixel perfect"
                      • sehr customized, aber nehmt euch ruhig das Grundgerüst
                      • keine Ahnung, wie es bei euch nach einem Import ausschaut
                      • Navigation im unteren Bereich: der Rolladenbereich wird über eine separate View per "View in Widget" eingebunden und hier ist eine horizontale Scrollbar dafür verantwortlich, dass man in der View von links nach rechts scrollen kann; weiter rechts ist dann das größere Fenster. Hier schaltet man per Button versch. "View in Widgets" ein / aus. Gescrollt wird hier nur vertikal.
                      • die Hauptbildschirme werden durch Anklicken der einzelnen Buttons (Kalender, Energie ...) angewählt und per Sichtbarkeit und Datenobjekt wird dann auch wieder per "View in Widgets" der jeweilige View zentriert eingeblendet

                      Externer Download: https://ufile.io/uoayl7l9

                      2.PNG

                      1.PNG

                      LG

                      sigi234S Horst BöttcherH C R Palm_ManiacP 5 Replies Last reply
                      4
                      • BostilB Bostil

                        Na klar, kann ich das hier teilen. Credits gehen an @dos1973

                        Bitte beachten ...

                        • noch work in progress
                        • verwendete Schriftart: Akrobat
                        • für den "Blur"-Effekt bitte @dos1973 CSS-Code unter CSS Global eintragen
                        • nicht "pixel perfect"
                        • sehr customized, aber nehmt euch ruhig das Grundgerüst
                        • keine Ahnung, wie es bei euch nach einem Import ausschaut
                        • Navigation im unteren Bereich: der Rolladenbereich wird über eine separate View per "View in Widget" eingebunden und hier ist eine horizontale Scrollbar dafür verantwortlich, dass man in der View von links nach rechts scrollen kann; weiter rechts ist dann das größere Fenster. Hier schaltet man per Button versch. "View in Widgets" ein / aus. Gescrollt wird hier nur vertikal.
                        • die Hauptbildschirme werden durch Anklicken der einzelnen Buttons (Kalender, Energie ...) angewählt und per Sichtbarkeit und Datenobjekt wird dann auch wieder per "View in Widgets" der jeweilige View zentriert eingeblendet

                        Externer Download: https://ufile.io/uoayl7l9

                        2.PNG

                        1.PNG

                        LG

                        sigi234S Online
                        sigi234S Online
                        sigi234
                        Forum Testing Most Active
                        wrote on last edited by
                        #374

                        @bostil
                        Super, aber bitte das Zip File nicht Extern hochladen, sondern via File upload.

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

                        GlasfaserG Walter.O.W 2 Replies Last reply
                        0
                        • BostilB Bostil

                          Na klar, kann ich das hier teilen. Credits gehen an @dos1973

                          Bitte beachten ...

                          • noch work in progress
                          • verwendete Schriftart: Akrobat
                          • für den "Blur"-Effekt bitte @dos1973 CSS-Code unter CSS Global eintragen
                          • nicht "pixel perfect"
                          • sehr customized, aber nehmt euch ruhig das Grundgerüst
                          • keine Ahnung, wie es bei euch nach einem Import ausschaut
                          • Navigation im unteren Bereich: der Rolladenbereich wird über eine separate View per "View in Widget" eingebunden und hier ist eine horizontale Scrollbar dafür verantwortlich, dass man in der View von links nach rechts scrollen kann; weiter rechts ist dann das größere Fenster. Hier schaltet man per Button versch. "View in Widgets" ein / aus. Gescrollt wird hier nur vertikal.
                          • die Hauptbildschirme werden durch Anklicken der einzelnen Buttons (Kalender, Energie ...) angewählt und per Sichtbarkeit und Datenobjekt wird dann auch wieder per "View in Widgets" der jeweilige View zentriert eingeblendet

                          Externer Download: https://ufile.io/uoayl7l9

                          2.PNG

                          1.PNG

                          LG

                          Horst BöttcherH Offline
                          Horst BöttcherH Offline
                          Horst Böttcher
                          wrote on last edited by
                          #375

                          @bostil Also bei mir sieht es komisch aus
                          alles übereinander gelagert e5dd79d359bb6e03508679da079f65cc.png 448c6f6fb08c565ba4367cd6c968fd3a.png

                          ioBroker auf Proxmox (Debian) auf LENOVO PC Thinkcentre als Produktivsystem

                          BostilB E 2 Replies Last reply
                          0
                          • Horst BöttcherH Horst Böttcher

                            @bostil Also bei mir sieht es komisch aus
                            alles übereinander gelagert e5dd79d359bb6e03508679da079f65cc.png 448c6f6fb08c565ba4367cd6c968fd3a.png

                            BostilB Offline
                            BostilB Offline
                            Bostil
                            wrote on last edited by
                            #376

                            @horst-böttcher Ja, die Views werden ja hier auf dem Hauptscreen eingeblendet, sobald der dazugehörige Datenpunkt mit "1" aktiviert wird oder eben mit "0" deaktiviert wird.

                            • der größere Button unten in der Navileiste bewirkt, dass ein entsprechender Datenpunkt (z. B. Homescreen_Steuerung Kalender) mit 1 beschrieben wird

                            f70b8507-8848-40d3-9c20-cdf774a31e94-image.png

                            • das dazu gehörige View in Widget mit Verweis auf die View "Kalender" wird über die Sichtbarkeitseigenschaft dann genau darüber gesteuert (ein-/ausgeblendet)
                            • Und dann ist es ja noch so: Wenn du nun "Energie" aktivierst, sollen ja alle anderen Datenpunkte auf 0 gesetzt werden, damit nur das angewählte View auch eingeblendet wird - hierfür hilft mir ein Blockly aus:

                            Blockly.txt

                            wendy2702W 1 Reply Last reply
                            0
                            • BostilB Bostil

                              Na klar, kann ich das hier teilen. Credits gehen an @dos1973

                              Bitte beachten ...

                              • noch work in progress
                              • verwendete Schriftart: Akrobat
                              • für den "Blur"-Effekt bitte @dos1973 CSS-Code unter CSS Global eintragen
                              • nicht "pixel perfect"
                              • sehr customized, aber nehmt euch ruhig das Grundgerüst
                              • keine Ahnung, wie es bei euch nach einem Import ausschaut
                              • Navigation im unteren Bereich: der Rolladenbereich wird über eine separate View per "View in Widget" eingebunden und hier ist eine horizontale Scrollbar dafür verantwortlich, dass man in der View von links nach rechts scrollen kann; weiter rechts ist dann das größere Fenster. Hier schaltet man per Button versch. "View in Widgets" ein / aus. Gescrollt wird hier nur vertikal.
                              • die Hauptbildschirme werden durch Anklicken der einzelnen Buttons (Kalender, Energie ...) angewählt und per Sichtbarkeit und Datenobjekt wird dann auch wieder per "View in Widgets" der jeweilige View zentriert eingeblendet

                              Externer Download: https://ufile.io/uoayl7l9

                              2.PNG

                              1.PNG

                              LG

                              C Offline
                              C Offline
                              Coffeelover
                              wrote on last edited by
                              #377

                              @bostil Vielen Dank. Mit HIlfe des Exports habe ich die geniale Idee für die scrollende Navigation verstanden. Echt clever.

                              Warum nutzt du eigentlich so viele "View ins Widget"?
                              Aus meiner Sicht - aber vielleicht habe ich einen Grund auch nicht verstanden: Du könntest mit der View in Widget 8 die Views auch über nummerische Zahlen ansteuern. Der Vorteil: Du musst deine ganze Logik nicht in jedem Widget anpassen, wenn noch ein weiterer Schalter dazu kommt. Der DP ist dann nicht nur 0 oder 1 sondern zählt nummerisch hoch.

                              D 1 Reply Last reply
                              1
                              • C Coffeelover

                                @bostil Vielen Dank. Mit HIlfe des Exports habe ich die geniale Idee für die scrollende Navigation verstanden. Echt clever.

                                Warum nutzt du eigentlich so viele "View ins Widget"?
                                Aus meiner Sicht - aber vielleicht habe ich einen Grund auch nicht verstanden: Du könntest mit der View in Widget 8 die Views auch über nummerische Zahlen ansteuern. Der Vorteil: Du musst deine ganze Logik nicht in jedem Widget anpassen, wenn noch ein weiterer Schalter dazu kommt. Der DP ist dann nicht nur 0 oder 1 sondern zählt nummerisch hoch.

                                D Offline
                                D Offline
                                dos1973
                                wrote on last edited by
                                #378

                                @coffeelover
                                genau das habe ich mich auch gefragt. ich nutze auch den view in widget 8 und steuere über den DP x-verschiedene Views, dafür braucht es auch kein blockly.

                                1 Reply Last reply
                                1
                                • BostilB Offline
                                  BostilB Offline
                                  Bostil
                                  wrote on last edited by
                                  #379

                                  Danke euch Beiden @Coffeelover & @dos1973 ! Fand es auch immer total umständlich, aber da ich nur 10% von den Möglichkeiten in der VIS kenne, ist es mir einfach durchgegangen, dass es was viel Smarteres gibt!

                                  1 Reply Last reply
                                  1
                                  • BostilB Offline
                                    BostilB Offline
                                    Bostil
                                    wrote on last edited by
                                    #380

                                    @dos1973 wie hast du eigentlich diese Schaltflächen rechts belegt? Also man kann es sich ja denken, aber wie setzt du z. B. Reload der Webseite um oder die Kontrasteinstellung? DANKE. :-)

                                    1683ce77-cdcf-468b-9e49-c72dcbf39bd5-image.png

                                    D 1 Reply Last reply
                                    0
                                    • BostilB Bostil

                                      @dos1973 wie hast du eigentlich diese Schaltflächen rechts belegt? Also man kann es sich ja denken, aber wie setzt du z. B. Reload der Webseite um oder die Kontrasteinstellung? DANKE. :-)

                                      1683ce77-cdcf-468b-9e49-c72dcbf39bd5-image.png

                                      D Offline
                                      D Offline
                                      dos1973
                                      wrote on last edited by
                                      #381

                                      @bostil
                                      ich habe einen NUC/ W10 mit externem 15" Touch Display als Anzeige, also kein Tablet. Das ist auch der Grund warum ich mein altes Vis von ursprünglich 10" Auflösung umbaue

                                      auf dem NUC ist CCU-Remote PC installiert, dort kann ich mittels Shortcuts (cmd/ bat) Aktionen auf dem PC ausführen... bow, kann das Tool vom VIS aus via HTTP ansprechen.

                                      1 Reply Last reply
                                      1
                                      • padrinoP padrino

                                        @Nashra sagte in Einfach mal zeigen will….. :-) - Teil 3:

                                        Danke für den Link :+1: schade, leider keine blaue und grüne Tonne dabei.

                                        Taddaa! ;)

                                        Vielleicht nicht ganz perfekt, aber ich denke, man kann damit arbeiten. =)

                                        tonne_blau.png

                                        tonne_grün.png

                                        B Offline
                                        B Offline
                                        buchner51
                                        wrote on last edited by
                                        #382

                                        @padrino

                                        Sehen super aus, hast du auch andere Farben :-)

                                        1 Reply Last reply
                                        0
                                        • Horst BöttcherH Horst Böttcher

                                          @bostil Also bei mir sieht es komisch aus
                                          alles übereinander gelagert e5dd79d359bb6e03508679da079f65cc.png 448c6f6fb08c565ba4367cd6c968fd3a.png

                                          E Offline
                                          E Offline
                                          easyhoo
                                          wrote on last edited by
                                          #383

                                          @horst-böttcher

                                          neben den Objekten scheint hier aber auch noch css zu fehlen.
                                          Oder liegt das mit den sichtbaren Scrollbalken am Browser?

                                          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

                                          551

                                          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