Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Praktische Anwendungen (Showcase)
    4. Einfach mal zeigen will….. :-) - Teil 3

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • Basti97
      Basti97 Most Active @Glasfaser last edited by

      @glasfaser Danke da habe ich was zutun. 😅

      1 Reply Last reply Reply Quote 0
      • Enrico Fischer
        Enrico Fischer last edited by

        Hier ist der CSS Code für den Hintergrund

        .vis-view {
        background-image: linear-gradient( 76.3deg,  rgba(44,62,78,1) 12.6%, rgba(69,103,131,1) 82.8% );
            color: #ebeae5;
        

        Das Wetter kommt vom "daswetter" Adapter.

        1 Reply Last reply Reply Quote 0
        • Enrico Fischer
          Enrico Fischer @Basti97 last edited by

          @basti97

          Ich mache das mit einem Java.

          var date = new Date(); 
          var hour = date.getHours(); 
          setTimeout("document.location.reload();",600000);
          if((hour >= 21) || (hour <= 6)) {
              $("#vis_container").addClass("nightmode");
          }
          

          in der Zeile if((hour >= 21) || (hour <= 6)) { kannst du die Uhrzeit setzen.

          Der schaltet dann nur die CSS Klasse.

          .vis-view {
              color: #000000;
              background: #ffffff;
          }
          
          .nightmode .vis-view {
              color: #fffffff;
              background: #000000;
          }
          
          Basti97 1 Reply Last reply Reply Quote 0
          • Basti97
            Basti97 Most Active @Enrico Fischer last edited by

            @enrico-fischer Also am Tag Heller Hindergrund und Nachts dann dunkler Hindergrund. Probiere ich mal aus.

            Und die Wetter Symbole kommen auch vom Wetter.com
            Welches Widget hast du benutzt um das die Ecken so rund sind?

            Enrico Fischer 1 Reply Last reply Reply Quote 0
            • Enrico Fischer
              Enrico Fischer @Basti97 last edited by

              @basti97 said in Einfach mal zeigen will….. 🙂 - Teil 3:

              @enrico-fischer Also am Tag Heller Hindergrund und Nachts dann dunkler Hindergrund. Probiere ich mal aus.

              Und die Wetter Symbole kommen auch vom Wetter.com
              Welches Widget hast du benutzt um das die Ecken so rund sind?

              Ist auch CSS.Kannst eigendlich bei fast allen anwenden.Nur dürfen die Werte die im CSS stehen nicht im Widget mit anderen Werten stehen.Sonst wird die CSS vom Widget überschrieben.

              Noch einen Tip an alle,da ich das jetzt schon öfter gesehen habe.Wenn Widgets erstellt werden bei der Größe die werte immer so eingeben das sie durch 2 teilbar sind.Dann ist es einfacher wenn zwei drei widgets übernander liegen.Dadurch wird es einfacher mit dem zentrieren.

              .glass-panel {
                  color: #fff;
                  background-color: rgba(255, 255, 255, 0.06);
                  border: 1px solid rgba(255, 255, 255, 0.1);
                  border-radius: 22px;
                  backdrop-filter: blur(10px);
              }
              
              Basti97 1 Reply Last reply Reply Quote 0
              • Basti97
                Basti97 Most Active @Enrico Fischer last edited by

                @enrico-fischer Das muss ich mir morgen mal ansehen und zusammen basteln. Und wie ich das ganze einfügen muss.

                Enrico Fischer 1 Reply Last reply Reply Quote 0
                • Enrico Fischer
                  Enrico Fischer @Basti97 last edited by

                  @basti97 said in Einfach mal zeigen will….. 🙂 - Teil 3:

                  @enrico-fischer Das muss ich mir morgen mal ansehen und zusammen basteln. Und wie ich das ganze einfügen muss.

                  Kein Stress. Was du machen musst ist es auch in verschieden Browsern zu testen.Da kann eine VIS ganz schnell anders aussehen.Auf dem Bild zum beispiel der Unterschied von Opera zu Firefox.

                  unterschied_Browser.png

                  Basti97 1 Reply Last reply Reply Quote 0
                  • Basti97
                    Basti97 Most Active @Enrico Fischer last edited by

                    @enrico-fischer Genau das habe ich schon bei meiner mobilen vis auf dem handy gesehen. Selbst bei den Diagrammen von Grafana ist teilweise das ganze verschoben. Nun bin ich dabei eine größere, ausführliche vis für mein Wandtab zu machen.

                    Einen schönen Abend dir.

                    1 Reply Last reply Reply Quote 0
                    • W
                      Webformator @Jey Cee last edited by Webformator

                      @jey-cee

                      Dafür das ich keine Ahnung habe was ich hier eigentlich tue, bin ich schon ganz schön weit gekommen. Finde ich 😉 1650965064542-f62d4b26-a1b4-4ac9-b808-820e983fe1c0-image.png

                      Hier gibt es auch ein Video dazu:

                      https://youtu.be/BrDG1YIEkb4

                      Viel Spass

                      Peter

                      mkshb 1 Reply Last reply Reply Quote 0
                      • mkshb
                        mkshb @Webformator last edited by

                        @webformator Moin Peter,
                        sieht doch schon ganz gut aus.
                        Du solltest nur die Rufnummern aus der Anruferliste unkenntlich machen, sonst ruft noch jemand bei Steve an 😉

                        W D 2 Replies Last reply Reply Quote 0
                        • W
                          Webformator @mkshb last edited by

                          @mkshb
                          Danke!

                          hehe^^
                          Mir doch egal...🕶

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

                            @mkshb sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                            @webformator Moin Peter,
                            sieht doch schon ganz gut aus.
                            Du solltest nur die Rufnummern aus der Anruferliste unkenntlich machen, sonst ruft noch jemand bei Steve an 😉

                            🙂
                            habe ich mir auch gedacht, mal bei Steve anzurufen

                            W 1 Reply Last reply Reply Quote 0
                            • W
                              Webformator @dos1973 last edited by

                              @dos1973
                              Grüß schön 🙂

                              mkshb 1 Reply Last reply Reply Quote 0
                              • mkshb
                                mkshb @Webformator last edited by

                                @webformator sagte in Einfach mal zeigen will….. 🙂 - Teil 3:

                                @dos1973
                                Grüß schön 🙂

                                Jetzt hast Du die Nummer rausgenommen, dabei wollte ich gerade bei Steve anrufen. 😸

                                1 Reply Last reply Reply Quote 0
                                • Bostil
                                  Bostil last edited by

                                  Werde mich mal mittelfristig an diese Vorlage hier ranwagen: (Link, Details hier)

                                  e68bf866-c56b-4eca-a04a-e181116a9797-image.png

                                  Basiert auf Home-Assistant, dennoch sollte es Möglichkeiten dies ähnlich in iobroker nachzubauen. Es beinhaltet aber auch spezielle Animationseffekte auf Javascript basis, wo ich noch nicht weiß, wie und ob man diese einbauen kann.

                                  Visualisierung im Iobroker (oder generell) empfinde ich noch als Krampf und man muss super viel Herzblut reinstecken, damit etwas einigermaßen passables herauskommt. Was Animationen und einen modernen Look angeht, ist man aber hier anscheinend sehr limitiert 😞

                                  Enrico Fischer 1 Reply Last reply Reply Quote 0
                                  • Enrico Fischer
                                    Enrico Fischer @Bostil last edited by Enrico Fischer

                                    @bostil sieht sehr gut aus.Ich denk ich werde mich da auch mal ran machen.

                                    1.Update

                                    Unbenannt.png

                                    D Bostil 2 Replies Last reply Reply Quote 1
                                    • D
                                      dos1973 @Enrico Fischer last edited by

                                      @Bostil
                                      Habe das auch auf dem Schirm, das in die Richtung abzukupfern…

                                      Ja Homeassitant scheint etwas modernere Möglichkeiten zu haben,

                                      @enrico-fischer
                                      Start sieht bereits sehr vielversprechend aus.

                                      Bostil 1 Reply Last reply Reply Quote 1
                                      • Bostil
                                        Bostil @dos1973 last edited by Bostil

                                        @dos1973 @Enrico-Fischer Schön, euch als Mitstreiter begrüßen zu dürfen! 🙂 insbesondere dos ist mir hier schon als design-experte positiv aufgefallen: 😉

                                        Habe auch schon einen ersten Anfang gemacht. Nur ein paar Minuten investiert und noch absoluter Mist. Geht mir eher links um den Balken, der schon Inhalte zeigt. Schriftart heißt übrigens "Akrobat".

                                        Meine spontanen Gedanken in der Umsetzung:

                                        • Einblendung weiterer Inhalte / Popups für weitere Details (zB Steuerung einzelner Rolläden) - wenn ich das bei Enrico richtig sehe, verlagert er die Navigationsleiste nach links ?!
                                          Alternative: Rechts die "Cards" öffnen durch einen Klick ein popup-widget (Widget 8), das den hauptbereich überlagert. Bin aber gespannt, wie ihr es lösen würdet.

                                        • ein Tastendruck auf die cards könnte auch dafür sorgen, dass sich die Karte mit einem anderen Inhalt umdreht (zB Vorderseite Temperatur und Rückseite Liniendiagramm zum Temperaturverlauf)

                                        • Thema "Media" aus der Vorlage finde ich schick, weil es den Screen etwas auflockert, habe aber noch keine Idee dazu, was hier stattfinden soll (Diashow, Spotify-Steuerung...)

                                        • Anwesenheit: wäre doch cool, wenn hier der User ein schickes Foto nett visualisiert dargestellt bekommt, falls er anwesend ist - hier hätte ich eine Idee

                                        • Animationen: ???

                                        • Look: glass_weiss als CSS element wurde hier empfohlen und verleiht den Cards zB einen schönen Weichzeichner - kann ich empfehlen, ebenso "drop shadow"

                                        .drop-shadow {
                                            -webkit-filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
                                            filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
                                        
                                        .glass_weiss {
                                            background: linear-gradient(15deg, rgba(255,255, 255, 0.1), rgba(255, 255, 255, 0.1));
                                                backdrop-filter: blur(5px);
                                            -webkit-backdrop-filter: blur(5px);
                                        }
                                        

                                        00ebfb82-24e0-4a93-a17a-dfe6a821915f-image.png

                                        1 Reply Last reply Reply Quote 1
                                        • Bostil
                                          Bostil @Enrico Fischer last edited by

                                          @enrico-fischer Super Anfang !!!

                                          X Enrico Fischer 2 Replies Last reply Reply Quote 1
                                          • X
                                            Xanon @Bostil last edited by Xanon

                                            Hallo zusammen, da ich nun auch schon einige Zeit dabei bin und schon diverse Visualisierungen gebaut habe und mir auch hier immer mal wieder Inspirationen eingeholt habe, möchte auch ich jetzt mal meine VISU (die ich jetzt sogar schon einige Zeit benutze) präsentieren.
                                            Natürlich bin ich noch nicht fertig (ist man glaube ich nie) aber Sie ist für meine Frau alltagstauglich😂
                                            Die Visu läuft auf einem iPad, welches an der Wand hängt.
                                            Was haltet Ihr davon ?

                                            Nun aber meine Visualisierung:
                                            Und hier noch ein kurzes Video 🙂

                                            IMG_0051 2.PNG

                                            IMG_0052.PNG

                                            IMG_0053.PNG

                                            IMG_0054.PNG

                                            IMG_0055.PNG

                                            IMG_0056.PNG

                                            IMG_0057.PNG

                                            IMG_0058.PNG

                                            IMG_0059.PNG

                                            IMG_0060.PNG

                                            IMG_0061.PNG

                                            IMG_0062.PNG

                                            IMG_0063.PNG

                                            IMG_0064.PNG

                                            IMG_0065.PNG

                                            IMG_0066.PNG

                                            IMG_0067.PNG

                                            IMG_0068.PNG

                                            IMG_0069.PNG

                                            IMG_0070.PNG

                                            IMG_0071.PNG

                                            IMG_0072.PNG

                                            IMG_0073-2.png

                                            D3ltoroxp T 2 Replies Last reply Reply Quote 10
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            1.1k
                                            Online

                                            31.7k
                                            Users

                                            79.7k
                                            Topics

                                            1.3m
                                            Posts

                                            vis vis editor visualisierung visualization
                                            155
                                            813
                                            267354
                                            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