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. Visualisierung
  4. [Vorstellung] Meine aktuelle Visualisierung

NEWS

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    11
    1
    340

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.6k

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

[Vorstellung] Meine aktuelle Visualisierung

Geplant Angeheftet Gesperrt Verschoben Visualisierung
material uiown projectvis
35 Beiträge 13 Kommentatoren 8.0k Aufrufe 16 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.
  • 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
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    0
    • F Offline
      F Offline
      Förster
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
        0
        • F Offline
          F Offline
          Förster
          schrieb am zuletzt editiert von
          #14

          Danke, das teste ich mal!

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

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

                @mrMuppet
                ich kann es leider nur so ;-)

                1 Antwort Letzte Antwort
                0
                • E Offline
                  E Offline
                  eMd
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  0
                  • htreckslerH Offline
                    htreckslerH Offline
                    htrecksler
                    Forum Testing
                    schrieb am zuletzt editiert von
                    #19

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

                    Gruss Hermann

                    ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

                    E 1 Antwort Letzte Antwort
                    0
                    • htreckslerH htrecksler

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

                      E Offline
                      E Offline
                      eMd
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      0
                      • htreckslerH Offline
                        htreckslerH Offline
                        htrecksler
                        Forum Testing
                        schrieb am zuletzt editiert von
                        #21

                        kannst Du die Schriftart nicht einfach reinschreiben?

                        Gruss Hermann

                        ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

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

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

                            D Offline
                            D Offline
                            dmm
                            schrieb am zuletzt editiert von
                            #23

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

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

                            1 Antwort Letzte Antwort
                            0
                            • M Offline
                              M Offline
                              mrMuppet
                              schrieb am zuletzt editiert von
                              #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. :cry:
                              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 Antwort Letzte Antwort
                              0
                              • M Offline
                                M Offline
                                mrMuppet
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  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. :cry:
                                    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
                                    schrieb am zuletzt editiert von
                                    #27

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

                                    M 1 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von
                                      #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 Antwort Letzte Antwort
                                      0
                                      • G g.polat

                                        @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 Offline
                                        D Offline
                                        dos1973
                                        schrieb am zuletzt editiert von
                                        #29

                                        @g-polat

                                        hi,

                                        anbei die views, das Hintergrundbild habe ich nicht mehr.
                                        importiere alle 3 views mit genau den Namen die ich verwende.

                                        00_vis5_start
                                        100_sidebar
                                        100_scroll_status

                                        wie gesagt, habe es nicht mehr in Nutzung... d.h es fehlt ,eider das eine oder andere icon.

                                        G 1 Antwort Letzte Antwort
                                        1
                                        • D dos1973

                                          @g-polat

                                          hi,

                                          anbei die views, das Hintergrundbild habe ich nicht mehr.
                                          importiere alle 3 views mit genau den Namen die ich verwende.

                                          00_vis5_start
                                          100_sidebar
                                          100_scroll_status

                                          wie gesagt, habe es nicht mehr in Nutzung... d.h es fehlt ,eider das eine oder andere icon.

                                          G Offline
                                          G Offline
                                          g.polat
                                          schrieb am zuletzt editiert von
                                          #30

                                          @dos1973 sagte in [Vorstellung] Meine aktuelle Visualisierung:

                                          @g-polat

                                          hi,

                                          anbei die views, das Hintergrundbild habe ich nicht mehr.
                                          importiere alle 3 views mit genau den Namen die ich verwende.

                                          00_vis5_start
                                          100_sidebar
                                          100_scroll_status

                                          wie gesagt, habe es nicht mehr in Nutzung... d.h es fehlt ,eider das eine oder andere icon.

                                          Perfekt, vielen Dank.

                                          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

                                          725

                                          Online

                                          32.5k

                                          Benutzer

                                          81.7k

                                          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