Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Zeigt her eure Vis2

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    Zeigt her eure Vis2

    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      Peks200 @UlliJ last edited by

      Da ich mit iQontrol langsam an die Grenzen gestoßen bin was das UI angeht habe ich mich mit VIS 2 beschäftigt und mich dort ein bisschen ausgetobt 🙂
      Hier seht ihr das Ergebnis und kann gerne als Inspiration genutzt werden um eine VIS optisch in Richtung "Smartphone App" aufzubauen.

      Wichtig war mir ein durchgängig einheitliches Design und alles in der VIS bedienen zu können.

      screen02.png
      screen01.png

      F I 2 Replies Last reply Reply Quote 4
      • F
        fuerchtischlumpf @Peks200 last edited by

        @peks200 richtig gut geworden, ich möchte meine VIS-2 auch wie eine App aufbauen! Hast du Responive benutzt und welche Widgets hast du für die Diagramme verwendet?

        Gruß Fürchti

        P 1 Reply Last reply Reply Quote 0
        • skvarel
          skvarel Developer last edited by skvarel

          Hier nur ein kleiner Auszug.

          Es sind rund 30 Views mit über 1.500 Widgets ... bis auf die Uhr sind es alles inventwo Widgest und inventwo Icons.

          Die Screenshots sind zu/an unterschiedlichen Zeiten/Tagen entstanden. Daher ist die 'Stromampel' mal rot und mal grün.

          Startseite:
          v000_index.JPG

          KG:
          Keller.JPG

          EG:
          EG.JPG

          OG:
          OG.JPG

          inventwo Büro:
          inventwo.JPG

          Garten:
          Garten.JPG

          Heizung:
          Heizung_1.JPG

          Heizung_2.JPG

          Heizung_3.JPG

          Strom:
          Strom.JPG

          Fenster & Türen:
          Fenster.JPG

          Mähroboter:
          Roberta.JPG

          Katzenklappe:
          Katzen.JPG

          Video-Zentrale:
          Video.JPG

          Garten Temperaturen:
          Garten-Temp.JPG

          Abfallkalender:
          Abfall.JPG

          Netzwerk:
          Netzwerk.JPG

          eCar:
          eCar.JPG

          Customizer um die VIS in der Runtime zu designen:
          Customizer.JPG

          C 1 Reply Last reply Reply Quote 3
          • C
            cbrocker @skvarel last edited by cbrocker

            @skvarel Hey Sven,
            wirklich beeindruckend, was eure Widgets alles hergeben.

            Kann man also tatsächlich alles (von deinen VISs) mit den paar Widgets abbilden?
            750fdd0c-cd2a-41f4-bc60-401c64fd0107-grafik.png

            Grüße Christoph

            skvarel 1 Reply Last reply Reply Quote 1
            • skvarel
              skvarel Developer @cbrocker last edited by skvarel

              @cbrocker .. ja 😉

              99% sind mit dem Universal Widget gemacht. Der Rest sind drei/vier Tabellen und ein paar Schieberegler.

              Das neue Universal Widget ist im Gegensatz zu VIS1 sehr mächtig geworden.

              C 1 Reply Last reply Reply Quote 1
              • P
                Peks200 @fuerchtischlumpf last edited by

                @fuerchtischlumpf said in Zeigt her eure Vis2:

                Responive

                Ja, für die Diagramme habe ich das Material Widget verwendet und mit CSS Code angepasst.
                #wXXXX .echarts-for-react path
                {
                fill-opacity: 1;
                stroke-opacity: 1;
                }
                #wXXXX div[aria-label]
                {
                opacity: 0;
                }

                F 1 Reply Last reply Reply Quote 0
                • C
                  cbrocker @skvarel last edited by

                  @skvarel
                  danke, das ist mal sehr vielversprechend.
                  In der VIS1 habe ich schon paar eurer Vis1-Widgets, die super funktionieren.

                  Dann werde ich mich mal so langsam an die Vis2 ranmachen.

                  Noch ne andere Frage, du hast ja einige ESP32-Cams. Was für eine Software hast
                  du da drauf geflasht?

                  skvarel 1 Reply Last reply Reply Quote 0
                  • skvarel
                    skvarel Developer @cbrocker last edited by

                    @cbrocker .. ich habe auf alles ESP32-Cam die 'Tasmota 15.0.1 (release-webcam)' drauf.

                    4 reolink, 4 ESP32-CAM und eine USB-Cam über go2rtc und dann per iFrame in der VIS

                    2ca347cd-54c5-4858-966b-3cc9f4809987-image.png

                    C 1 Reply Last reply Reply Quote 1
                    • F
                      fuerchtischlumpf @Peks200 last edited by

                      @peks200 said in Zeigt her eure Vis2:

                      #wXXXX .echarts-for-react path
                      {
                      fill-opacity: 1;
                      stroke-opacity: 1;
                      }
                      #wXXXX div[aria-label]
                      {
                      opacity: 0;
                      }

                      Danke für den Hinweis, woher weißt du welche Codes was in den Widgets beeinflussen, das Wissen fehlt mir leider komplett!

                      1 Reply Last reply Reply Quote 0
                      • Q
                        quinti last edited by

                        Hallo,
                        ich habe mal angefangen meine Wetterstation nachzubilden.
                        Screenshot 2025-08-25 201600.png
                        Ziel ist die Funktionen der Wetterstation swoeit als möglich nachzubilden. Klickbar ist bisher nur der Graphbutton.
                        Ist alles noch alpha....
                        Es fehlt auch noch die Kompassrose für die Windrichtung.
                        mehr Infos hier:
                        github

                        1 Reply Last reply Reply Quote 5
                        • C
                          cbrocker @skvarel last edited by

                          @skvarel
                          danke für die Tips und Anregungen.

                          Ich habe bisher eine Vivotek und eine Instar über Synology in der VIS,
                          möchte aber auch noch ein paar ESP32-CAMs einfügen

                          Schöne Woche

                          1 Reply Last reply Reply Quote 1
                          • I
                            io2345 @Peks200 last edited by

                            @peks200 said in Zeigt her eure Vis2:

                            ...kann gerne als Inspiration genutzt werden um eine VIS optisch in Richtung "Smartphone App" aufzubauen.

                            Könntest du bitte beispielhaft einen Export der "Home" Seite bereitstellen? Hatte schon mal per PM gefragt, aber ist wohl untergegangen.
                            Danke!

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post

                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            500
                            Online

                            32.1k
                            Users

                            80.6k
                            Topics

                            1.3m
                            Posts

                            28
                            69
                            11917
                            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