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. Zeigt her eure Vis2

NEWS

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    24
    1
    1.7k

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

Zeigt her eure Vis2

Geplant Angeheftet Gesperrt Verschoben Visualisierung
70 Beiträge 29 Kommentatoren 14.9k Aufrufe 47 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.
  • U UlliJ

    @nashra
    bitte sehr

    energieMain.txt
    card_Leistung.txt
    cardBatterie.txt
    cardEnergieAktuell.txt
    cardEnergiefluss.txt
    cardEnergieInfo.txt
    cardPrognose.txt
    cardPV.txt
    DialogPVInfo.txt
    DialogCharts.txt

    Die PV Seite braucht noch den Slider von Inventwo.
    CSS für die Lade/Entladeanimation ins Projekt kopieren.

    .charge
    {
       background: linear-gradient(0deg, #4CAF50, #FFEB3B, #4CAF50, #FFEB3B);
       background-size: 100% 300%;
       animation: gradient-bgcharge 2s ease-in-out infinite;
       animation-direction: normal;
       height: 100vh;
    }
    .discharge
    {
       background: linear-gradient(180deg, #4CAF50, #FFEB3B, #4CAF50, #FFEB3B);
       background-size: 100% 300%;
       animation: gradient-bgcharge 2s ease-in-out infinite;
       animation-direction: reverse;
       height: 100vh;
    }
    

    Da fehlen jetzt noch scripte und wahrscheinlich noch mehr CSS für die Animationen der Svg's. Ausserdem nutze ich auch noch MDCss von Uhula, da werden Formatierungen fehlen. Probier einfach mal.

    I Offline
    I Offline
    io2345
    schrieb am zuletzt editiert von
    #54

    @ullij Wo bzw. wie werden die txt Dateien eingefügt?

    U 1 Antwort Letzte Antwort
    0
    • I io2345

      @ullij Wo bzw. wie werden die txt Dateien eingefügt?

      U Offline
      U Offline
      UlliJ
      schrieb am zuletzt editiert von
      #55

      @io2345
      im Editor "Seite importieren"

      • den Inhalt der Textdateien ins Eingabefenster kopieren

      • Namen festlegen (wie Textdatei)
        ...fertig.

      wie bereits oben geschrieben, da könnte CSS für die Animation der SVG's fehlen. Manchmal habe ich es im Widget mit drin, manchmal nicht.

      Proxmox auf iNuc, lxc für IoB, InfluxDB2, Grafana, u.a. *** Homematic & Homematic IP, Shellies, Zigbee etc

      I 1 Antwort Letzte Antwort
      0
      • U UlliJ

        @io2345
        im Editor "Seite importieren"

        • den Inhalt der Textdateien ins Eingabefenster kopieren

        • Namen festlegen (wie Textdatei)
          ...fertig.

        wie bereits oben geschrieben, da könnte CSS für die Animation der SVG's fehlen. Manchmal habe ich es im Widget mit drin, manchmal nicht.

        I Offline
        I Offline
        io2345
        schrieb am zuletzt editiert von io2345
        #56

        @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 Antwort Letzte Antwort
        0
        • I 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 Offline
          U Offline
          UlliJ
          schrieb am zuletzt editiert von
          #57

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

          Proxmox auf iNuc, lxc für IoB, InfluxDB2, Grafana, u.a. *** Homematic & Homematic IP, Shellies, Zigbee etc

          P 1 Antwort Letzte Antwort
          0
          • U UlliJ

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

            P Offline
            P Offline
            Peks200
            schrieb am zuletzt editiert von
            #58

            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 D 3 Antworten Letzte Antwort
            5
            • P Peks200

              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 Offline
              F Offline
              fuerchtischlumpf
              schrieb am zuletzt editiert von
              #59

              @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 Antwort Letzte Antwort
              0
              • skvarelS Online
                skvarelS Online
                skvarel
                Developer
                schrieb am zuletzt editiert von skvarel
                #60

                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

                #TeamInventwo
                • Autodarts by inventwo
                • vis-inventwo & vis-2-widgets-inventwo
                • vis-icontwo & vis-2-widgets-icontwo

                C 1 Antwort Letzte Antwort
                3
                • skvarelS 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 Offline
                  C Offline
                  cbrocker
                  schrieb am zuletzt editiert von cbrocker
                  #61

                  @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

                  Proxmox Cluster mit ioBroker, Wireguard, HomeAssistant (Testsystem), paperlessNGX, MariaDB, PiHole, Grafana, InfluxDB, 1 x BKW 600 Wp, 2 x BKW 400 Wp, 2 x SolarFlow 800 Pro mit 11,52 kWh Akku und 3,48 kWp, OpenDTU, AhoyDTU, HmIP, Shellys, AVM LAN/WLAN

                  skvarelS 1 Antwort Letzte Antwort
                  1
                  • C 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

                    skvarelS Online
                    skvarelS Online
                    skvarel
                    Developer
                    schrieb am zuletzt editiert von skvarel
                    #62

                    @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.

                    #TeamInventwo
                    • Autodarts by inventwo
                    • vis-inventwo & vis-2-widgets-inventwo
                    • vis-icontwo & vis-2-widgets-icontwo

                    C 1 Antwort Letzte Antwort
                    1
                    • F fuerchtischlumpf

                      @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 Offline
                      P Offline
                      Peks200
                      schrieb am zuletzt editiert von
                      #63

                      @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 Antwort Letzte Antwort
                      0
                      • skvarelS 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 Offline
                        C Offline
                        cbrocker
                        schrieb am zuletzt editiert von
                        #64

                        @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?

                        Proxmox Cluster mit ioBroker, Wireguard, HomeAssistant (Testsystem), paperlessNGX, MariaDB, PiHole, Grafana, InfluxDB, 1 x BKW 600 Wp, 2 x BKW 400 Wp, 2 x SolarFlow 800 Pro mit 11,52 kWh Akku und 3,48 kWp, OpenDTU, AhoyDTU, HmIP, Shellys, AVM LAN/WLAN

                        skvarelS 1 Antwort Letzte Antwort
                        0
                        • C cbrocker

                          @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?

                          skvarelS Online
                          skvarelS Online
                          skvarel
                          Developer
                          schrieb am zuletzt editiert von
                          #65

                          @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

                          #TeamInventwo
                          • Autodarts by inventwo
                          • vis-inventwo & vis-2-widgets-inventwo
                          • vis-icontwo & vis-2-widgets-icontwo

                          C 1 Antwort Letzte Antwort
                          1
                          • P Peks200

                            @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 Offline
                            F Offline
                            fuerchtischlumpf
                            schrieb am zuletzt editiert von
                            #66

                            @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 Antwort Letzte Antwort
                            0
                            • Q Offline
                              Q Offline
                              quinti
                              schrieb am zuletzt editiert von
                              #67

                              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 Antwort Letzte Antwort
                              5
                              • skvarelS skvarel

                                @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 Offline
                                C Offline
                                cbrocker
                                schrieb am zuletzt editiert von
                                #68

                                @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

                                Proxmox Cluster mit ioBroker, Wireguard, HomeAssistant (Testsystem), paperlessNGX, MariaDB, PiHole, Grafana, InfluxDB, 1 x BKW 600 Wp, 2 x BKW 400 Wp, 2 x SolarFlow 800 Pro mit 11,52 kWh Akku und 3,48 kWp, OpenDTU, AhoyDTU, HmIP, Shellys, AVM LAN/WLAN

                                1 Antwort Letzte Antwort
                                1
                                • P Peks200

                                  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

                                  I Offline
                                  I Offline
                                  io2345
                                  schrieb am zuletzt editiert von
                                  #69

                                  @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 Antwort Letzte Antwort
                                  0
                                  • P Peks200

                                    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

                                    D Offline
                                    D Offline
                                    Dk
                                    schrieb am zuletzt editiert von
                                    #70

                                    @Peks200 Das sieht ja einfach mal mega gut aus. Würdest du einen Export der Vis, bzw von einer Seite davon, als Starthilfe teilen? :=)

                                    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

                                    742

                                    Online

                                    32.5k

                                    Benutzer

                                    81.8k

                                    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