Skip to content
  • 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
  1. ioBroker Community Home
  2. Deutsch
  3. Praktische Anwendungen (Showcase)
  4. Einfach mal zeigen will….. :-) - Teil 3

NEWS

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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Praktische Anwendungen (Showcase)
visvisualisierungvisualizationvis editor
813 Beiträge 155 Kommentatoren 330.4k Aufrufe 157 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.
  • Horst BöttcherH Offline
    Horst BöttcherH Offline
    Horst Böttcher
    schrieb am zuletzt editiert von
    #362

    @bostil danke

    1 Antwort Letzte Antwort
    0
    • 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);
      }
      
      C Offline
      C Offline
      Coffeelover
      schrieb am zuletzt editiert von Coffeelover
      #363

      @dos1973 Danke für beide Exporte. Funktioniert und wird ziemlich sicher verarbeitet.
      Edit: Wobei ich im CSS noch die Fehlermeldung habe: Unknown property: "backdrop filter". Genau genommen funktioniert das "Blurr" auch nicht. --> was am Ende einfach nur am Firefox liegt: https://css-tricks.com/almanac/properties/b/backdrop-filter/

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

        GlasfaserG D 2 Antworten Letzte Antwort
        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 Online
          GlasfaserG Online
          Glasfaser
          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #367

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

              1 Antwort Letzte Antwort
              0
              • BostilB Offline
                BostilB Offline
                Bostil
                schrieb am zuletzt editiert von
                #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 Antworten Letzte Antwort
                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.
                  schrieb am zuletzt editiert von
                  #369

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

                  Olli_MO 1 Antwort Letzte Antwort
                  1
                  • T Tony H.

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

                    Olli_MO Offline
                    Olli_MO Offline
                    Olli_M
                    schrieb am zuletzt editiert von
                    #370

                    @tony-h

                    also bei mir kommt da unknown property mit dem filter im CSS 😞

                    GlasfaserG 1 Antwort Letzte Antwort
                    0
                    • Olli_MO Olli_M

                      @tony-h

                      also bei mir kommt da unknown property mit dem filter im CSS 😞

                      GlasfaserG Online
                      GlasfaserG Online
                      Glasfaser
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #372

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

                        1 Antwort Letzte Antwort
                        0
                        • BostilB Offline
                          BostilB Offline
                          Bostil
                          schrieb am zuletzt editiert von 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 Antworten Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antworten Letzte Antwort
                            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
                              schrieb am zuletzt editiert von
                              #375

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

                              BostilB E 2 Antworten Letzte Antwort
                              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
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von
                                    #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 Antwort Letzte Antwort
                                    1
                                    • BostilB Offline
                                      BostilB Offline
                                      Bostil
                                      schrieb am zuletzt editiert von
                                      #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 Antwort Letzte Antwort
                                      1
                                      • BostilB Offline
                                        BostilB Offline
                                        Bostil
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        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
                                          schrieb am zuletzt editiert von
                                          #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 Antwort Letzte Antwort
                                          1
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          746

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          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
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe