Skip to content
  • 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
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Vorstellung] Meine aktuelle Visualisierung

NEWS

  • Wartung am 15.11. – Forum ab 22:00 Uhr nicht erreichbar
    BluefoxB
    Bluefox
    11
    2
    228

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

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

[Vorstellung] Meine aktuelle Visualisierung

[Vorstellung] Meine aktuelle Visualisierung

Scheduled Pinned Locked Moved Visualisierung
material uiown projectvis
35 Posts 13 Posters 7.7k Views 16 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 Offline
    D Offline
    dos1973
    wrote on last edited by dos1973
    #9

    ich glaube ohne jemanden der code/ programmieren kann wird das nichts 😉 also zumindest von meiner Seite.

    ungeachtet dessen hat mich dein oben gezeigtes Beispiel inspiriert und ich habe bei Dir abgeschaut und es nachgebaut 😉 Danke für die tolle Idee!

    fully-screenshot-4.png

    die Texte ändern sich entsprechend des Stats

    M G 2 Replies Last reply
    2
    • D dos1973

      ich glaube ohne jemanden der code/ programmieren kann wird das nichts 😉 also zumindest von meiner Seite.

      ungeachtet dessen hat mich dein oben gezeigtes Beispiel inspiriert und ich habe bei Dir abgeschaut und es nachgebaut 😉 Danke für die tolle Idee!

      fully-screenshot-4.png

      die Texte ändern sich entsprechend des Stats

      M Offline
      M Offline
      mrMuppet
      wrote on last edited by mrMuppet
      #10

      @dos1973 Sehr gut gelungen! Auch mal vom Design her sehr gelungen und in der Beziehung besser als 95% aller Views die ich bisher hier gesehen habe. Glückwunsch! Vermutlich werde ich auch erstmal mit einzeiligen Feldern arbeiten die dann durchgetauscht werden.
      Wie verknüpfst du die wechselnden Funktionen mit dem Text?

      ioBroker auf NUC (Celeron mit Ubuntu-Server)

      Homematic, HMIP, Hue, Unifi, Plex, Nest, Roborock, Google Assistant

      D 1 Reply Last reply
      0
      • M mrMuppet

        @dos1973 Sehr gut gelungen! Auch mal vom Design her sehr gelungen und in der Beziehung besser als 95% aller Views die ich bisher hier gesehen habe. Glückwunsch! Vermutlich werde ich auch erstmal mit einzeiligen Feldern arbeiten die dann durchgetauscht werden.
        Wie verknüpfst du die wechselnden Funktionen mit dem Text?

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

        @mrMuppet
        Aktuell nur über die Sichtbarkeit... bei bestimmten Werten.
        Ich zähle die Lampen, Fenster etc, bei 0 Text A, ansonsten Text B mit der gezählten Zahl.

        1 Reply Last reply
        0
        • F Offline
          F Offline
          Förster
          wrote on last edited by
          #12

          Sag mal @dos1973 wie hast du das mit dem transparenten Bild bzw. Rahmen auf dem Hintergrundbild gemacht ? Das sieht super aus und würde ich gern bei mir übernehmen.

          Grüße
          Christian

          D 1 Reply Last reply
          0
          • F Förster

            Sag mal @dos1973 wie hast du das mit dem transparenten Bild bzw. Rahmen auf dem Hintergrundbild gemacht ? Das sieht super aus und würde ich gern bei mir übernehmen.

            Grüße
            Christian

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

            @Förster
            Einfach den hintergrund weiss einfärben und mit „opacity“ spielen. Bei mir 0.2 (punkt, kein komma)

            css

            .transparent_box{
                opacity:0.2;
                background-color:#ffffff;
                padding-left:0px;
                padding-top:0px;
                border:#acacac solid 1px;
                border-radius:8px;
                box-shadow:6px 0px 12px 0 #161616;
                z-index:1;
            }
            
            1 Reply Last reply
            0
            • F Offline
              F Offline
              Förster
              wrote on last edited by
              #14

              Danke, das teste ich mal!

              Eine Frage noch: das Hintergrundbild, ist das ein Nordlicht? Oder Sonnenuntergang?

              D 1 Reply Last reply
              0
              • F Förster

                Danke, das teste ich mal!

                Eine Frage noch: das Hintergrundbild, ist das ein Nordlicht? Oder Sonnenuntergang?

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

                @Förster
                ?? 😉
                keine Ahnung, irgendein Bild aus dem Internet, ich lege gerne den Blur Filter drauf...

                .blur{
                      /* Add the blur effect */
                     filter: blur(4px);
                    -webkit-filter: blur(20px);
                }
                

                @mrMuppet : sorry, wenn dein Thread hier gekapert/ missbraucht wird

                M 1 Reply Last reply
                0
                • D dos1973

                  @Förster
                  ?? 😉
                  keine Ahnung, irgendein Bild aus dem Internet, ich lege gerne den Blur Filter drauf...

                  .blur{
                        /* Add the blur effect */
                       filter: blur(4px);
                      -webkit-filter: blur(20px);
                  }
                  

                  @mrMuppet : sorry, wenn dein Thread hier gekapert/ missbraucht wird

                  M Offline
                  M Offline
                  mrMuppet
                  wrote on last edited by
                  #16

                  @dos1973 gibt's irgend nen Grund das Live im Browser und nicht vorher im Photoshop zu machen?

                  ioBroker auf NUC (Celeron mit Ubuntu-Server)

                  Homematic, HMIP, Hue, Unifi, Plex, Nest, Roborock, Google Assistant

                  D 1 Reply Last reply
                  0
                  • M mrMuppet

                    @dos1973 gibt's irgend nen Grund das Live im Browser und nicht vorher im Photoshop zu machen?

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

                    @mrMuppet
                    ich kann es leider nur so 😉

                    1 Reply Last reply
                    0
                    • E Offline
                      E Offline
                      eMd
                      wrote on last edited by
                      #18

                      Hallo,

                      wie kann ich eine Schriftart einbinden? Habe sie hochgeladen auf den iobroker, kann aber die Schriftart nirgends auswählen...

                      MfG
                      eMd

                      Master: Intel NUC 16GB/500GB
                      Slave: Raspberry Pi 3 + Homematicmodul
                      Shelly, Google Home, Zigbee Aqara, Sonoff

                      Meine VIS: https://youtu.be/JMYr2KYlpME

                      1 Reply Last reply
                      0
                      • htreckslerH Offline
                        htreckslerH Offline
                        htrecksler
                        Forum Testing
                        wrote on last edited by
                        #19

                        der Client /Tablet/PC/Handy muss die Schriftart können/kennen

                        Gruss Hermann

                        ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

                        E 1 Reply Last reply
                        0
                        • htreckslerH htrecksler

                          der Client /Tablet/PC/Handy muss die Schriftart können/kennen

                          E Offline
                          E Offline
                          eMd
                          wrote on last edited by
                          #20

                          @htrecksler
                          Ja das ist klar, aber wie kann ich die Schriftart in der VIS auswählen? Sie wird mir unter fonts nicht angezeigt bei CSS Font... Das ist mein eigentliches Problem ☺️

                          Master: Intel NUC 16GB/500GB
                          Slave: Raspberry Pi 3 + Homematicmodul
                          Shelly, Google Home, Zigbee Aqara, Sonoff

                          Meine VIS: https://youtu.be/JMYr2KYlpME

                          1 Reply Last reply
                          0
                          • htreckslerH Offline
                            htreckslerH Offline
                            htrecksler
                            Forum Testing
                            wrote on last edited by
                            #21

                            kannst Du die Schriftart nicht einfach reinschreiben?

                            Gruss Hermann

                            ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

                            1 Reply Last reply
                            0
                            • E Offline
                              E Offline
                              eMd
                              wrote on last edited by
                              #22

                              Nein, das funktioniert nicht. Nichjt mit dem Namen und auch nicht mit dem Pfad zur Datei...

                              Master: Intel NUC 16GB/500GB
                              Slave: Raspberry Pi 3 + Homematicmodul
                              Shelly, Google Home, Zigbee Aqara, Sonoff

                              Meine VIS: https://youtu.be/JMYr2KYlpME

                              D 1 Reply Last reply
                              0
                              • E eMd

                                Nein, das funktioniert nicht. Nichjt mit dem Namen und auch nicht mit dem Pfad zur Datei...

                                D Offline
                                D Offline
                                dmm
                                wrote on last edited by
                                #23

                                @eMd https://forum.iobroker.net/topic/938/schriftarten/2

                                ... hatte auch das Problem, so geht’s ganz leicht.

                                1 Reply Last reply
                                0
                                • M Offline
                                  M Offline
                                  mrMuppet
                                  wrote on last edited by
                                  #24

                                  Hab meinen Look jetzt etwas von der Nest-Oberfläche entfernt. Aber inhaltlich soll es immer noch so variabel bleiben: Also die Rolladen-Tasten nur morgens wenn sie noch unten sind oder abends, die Markise nur bei Sonnenschein am Nachmittag bis abend, das Licht erst ab Dämmerung etc....

                                  Hatte ich eigentlich auch ganz schön gemacht: ein Button für die Hauptfunktion und eine Taste um alle Einstellmöglichkeiten zu dem Gewerk zu erreichen. Damit ich bei der Belegung des Buttons flexibel bin, habe ich jeweil eine kleinen View gebaut der dann über "View in Widget" eingebunden wird. Aber leider ist das auch das Problem. Zum einen funktioniert die Darstellung des Widgets bei mir nicht zuverlässig (im Browser schon, in der Vis-app nicht) - zum anderen können leider nur 8 Views verwendet werden. 😢
                                  Leider kenne ich mich mit CSS nicht aus... wie kann ich das ganze doch realisieren? Also mit Views die an wechselnden Positionen angezeigt werden?

                                  9aa17f0f-8884-4db7-8648-7ef61254b88c-image.png

                                  ioBroker auf NUC (Celeron mit Ubuntu-Server)

                                  Homematic, HMIP, Hue, Unifi, Plex, Nest, Roborock, Google Assistant

                                  T 1 Reply Last reply
                                  0
                                  • M Offline
                                    M Offline
                                    mrMuppet
                                    wrote on last edited by
                                    #25

                                    Wegen der o.g. Probleme meine Anzeigen variabel genug zu gestalten, habe ich mich für ein neues Konzept entschieden: es werden nur die vier Hauptbereiche "Licht", "Beschattung", "Staubsauger" und "Heizung" mit jeweils einer Preset-funktion in der Hauptansicht dargestellt. Ist halt wirklich schade, dass die Vis-App mit dem Material-design-widget nicht klarkommt. Aber zur Not wird es halt als Hintergrundbild (dann leider ohne Animation) verwirklicht.

                                    0f2cfb1f-5238-4b99-8a0e-04c69dd9e4fc-image.png

                                    ioBroker auf NUC (Celeron mit Ubuntu-Server)

                                    Homematic, HMIP, Hue, Unifi, Plex, Nest, Roborock, Google Assistant

                                    S 1 Reply Last reply
                                    0
                                    • M mrMuppet

                                      Wegen der o.g. Probleme meine Anzeigen variabel genug zu gestalten, habe ich mich für ein neues Konzept entschieden: es werden nur die vier Hauptbereiche "Licht", "Beschattung", "Staubsauger" und "Heizung" mit jeweils einer Preset-funktion in der Hauptansicht dargestellt. Ist halt wirklich schade, dass die Vis-App mit dem Material-design-widget nicht klarkommt. Aber zur Not wird es halt als Hintergrundbild (dann leider ohne Animation) verwirklicht.

                                      0f2cfb1f-5238-4b99-8a0e-04c69dd9e4fc-image.png

                                      S Offline
                                      S Offline
                                      SaiBot1981
                                      wrote on last edited by
                                      #26

                                      @mrMuppet said in [Vorstellung] Meine aktuelle Visualisierung:

                                      Wegen der o.g. Probleme meine Anzeigen variabel genug zu gestalten, habe ich mich für ein neues Konzept entschieden: es werden nur die vier Hauptbereiche "Licht", "Beschattung", "Staubsauger" und "Heizung" mit jeweils einer Preset-funktion in der Hauptansicht dargestellt. Ist halt wirklich schade, dass die Vis-App mit dem Material-design-widget nicht klarkommt. Aber zur Not wird es halt als Hintergrundbild (dann leider ohne Animation) verwirklicht.

                                      0f2cfb1f-5238-4b99-8a0e-04c69dd9e4fc-image.png

                                      Also das sieht echt mega aus. das übersteigt aber meine Künste.....

                                      1 Reply Last reply
                                      0
                                      • M mrMuppet

                                        Hab meinen Look jetzt etwas von der Nest-Oberfläche entfernt. Aber inhaltlich soll es immer noch so variabel bleiben: Also die Rolladen-Tasten nur morgens wenn sie noch unten sind oder abends, die Markise nur bei Sonnenschein am Nachmittag bis abend, das Licht erst ab Dämmerung etc....

                                        Hatte ich eigentlich auch ganz schön gemacht: ein Button für die Hauptfunktion und eine Taste um alle Einstellmöglichkeiten zu dem Gewerk zu erreichen. Damit ich bei der Belegung des Buttons flexibel bin, habe ich jeweil eine kleinen View gebaut der dann über "View in Widget" eingebunden wird. Aber leider ist das auch das Problem. Zum einen funktioniert die Darstellung des Widgets bei mir nicht zuverlässig (im Browser schon, in der Vis-app nicht) - zum anderen können leider nur 8 Views verwendet werden. 😢
                                        Leider kenne ich mich mit CSS nicht aus... wie kann ich das ganze doch realisieren? Also mit Views die an wechselnden Positionen angezeigt werden?

                                        9aa17f0f-8884-4db7-8648-7ef61254b88c-image.png

                                        T Offline
                                        T Offline
                                        Tirador
                                        wrote on last edited by
                                        #27

                                        @mrMuppet Finde dein Design sehr gelungen. Würdest Du einen Export des Projekts veröffentlichen? 🙂

                                        M 1 Reply Last reply
                                        0
                                        • D dos1973

                                          ich glaube ohne jemanden der code/ programmieren kann wird das nichts 😉 also zumindest von meiner Seite.

                                          ungeachtet dessen hat mich dein oben gezeigtes Beispiel inspiriert und ich habe bei Dir abgeschaut und es nachgebaut 😉 Danke für die tolle Idee!

                                          fully-screenshot-4.png

                                          die Texte ändern sich entsprechend des Stats

                                          G Offline
                                          G Offline
                                          g.polat
                                          wrote on last edited by
                                          #28

                                          @dos1973 sagte in [Vorstellung] Meine aktuelle Visualisierung:

                                          ich glaube ohne jemanden der code/ programmieren kann wird das nichts 😉 also zumindest von meiner Seite.

                                          ungeachtet dessen hat mich dein oben gezeigtes Beispiel inspiriert und ich habe bei Dir abgeschaut und es nachgebaut 😉 Danke für die tolle Idee!

                                          fully-screenshot-4.png

                                          die Texte ändern sich entsprechend des Stats

                                          Wenn du das Projekt noch irgendwo hast, hätte ich auch Interesse

                                          D 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

                                          55

                                          Online

                                          32.4k

                                          Users

                                          81.3k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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