Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Vorstellung] Meine aktuelle Visualisierung

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    [Vorstellung] Meine aktuelle Visualisierung

    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      dos1973 @mrMuppet last edited by

      @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 Reply Quote 0
      • F
        Förster last edited by

        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 Reply Quote 0
        • D
          dos1973 @Förster last edited by dos1973

          @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 Reply Quote 0
          • F
            Förster last edited by

            Danke, das teste ich mal!

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

            D 1 Reply Last reply Reply Quote 0
            • D
              dos1973 @Förster last edited by

              @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 Reply Quote 0
              • M
                mrMuppet @dos1973 last edited by

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

                D 1 Reply Last reply Reply Quote 0
                • D
                  dos1973 @mrMuppet last edited by

                  @mrMuppet
                  ich kann es leider nur so 😉

                  1 Reply Last reply Reply Quote 0
                  • E
                    eMd last edited by

                    Hallo,

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

                    MfG
                    eMd

                    1 Reply Last reply Reply Quote 0
                    • htrecksler
                      htrecksler Forum Testing last edited by

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

                      E 1 Reply Last reply Reply Quote 0
                      • E
                        eMd @htrecksler last edited by

                        @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 ☺️

                        1 Reply Last reply Reply Quote 0
                        • htrecksler
                          htrecksler Forum Testing last edited by

                          kannst Du die Schriftart nicht einfach reinschreiben?

                          1 Reply Last reply Reply Quote 0
                          • E
                            eMd last edited by

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

                            D 1 Reply Last reply Reply Quote 0
                            • D
                              dmm @eMd last edited by

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

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

                              1 Reply Last reply Reply Quote 0
                              • M
                                mrMuppet last edited by

                                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 1 Reply Last reply Reply Quote 0
                                • M
                                  mrMuppet last edited by

                                  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 1 Reply Last reply Reply Quote 0
                                  • S
                                    SaiBot1981 @mrMuppet last edited by

                                    @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 Reply Quote 0
                                    • T
                                      Tirador @mrMuppet last edited by

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

                                      M 1 Reply Last reply Reply Quote 0
                                      • G
                                        g.polat @dos1973 last edited by

                                        @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 Reply Quote 0
                                        • D
                                          dos1973 @g.polat last edited by

                                          @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 Reply Last reply Reply Quote 1
                                          • G
                                            g.polat @dos1973 last edited by

                                            @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 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            416
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            material ui own project vis
                                            13
                                            35
                                            6522
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo