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

    • Wir empfehlen: Node.js 22.x

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker goes Matter ... Matter Adapter in Stable

    Zeigt her eure Vis2

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

      @ullij Prima, Danke. Das geht ja eigentlich ganz einfach.
      Ist noch ziemlich leer, wahrscheinlich das "Grundgerüst". Und man muss die einzelnen Einträge noch seinen Datenpunkten zuweisen (würd ich vermuten). Mal sehen, wie das geht. Als kompletter Anfänger ist man da schon mal ganz schön gefordert...
      Dann steht da noch: CSS für die Lade/Entladeanimation ins Projekt kopieren. Wo muss das genau hin?

      Ich glaub ich bräuchte einen Thread für simple Anfängerfragen - z.B. wie erreiche ich einen einzelnen Wert, der hinter einer Fläche liegt? Gibt es so einen Thread für vis-2?

      U 1 Reply Last reply Reply Quote 0
      • U
        UlliJ @io2345 last edited by

        @io2345
        mach doch einen eigenen Thread auf. Da helfe ich gerne weiter

        P 1 Reply Last reply Reply Quote 0
        • 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 1 Reply 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

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

                          Support us

                          ioBroker
                          Community Adapters
                          Donate

                          864
                          Online

                          32.0k
                          Users

                          80.5k
                          Topics

                          1.3m
                          Posts

                          27
                          66
                          9901
                          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