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. Skripten / Logik
  4. Dynamische Fortschritt-Bar

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.5k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    991

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.3k

Dynamische Fortschritt-Bar

Geplant Angeheftet Gesperrt Verschoben Skripten / Logik
16 Beiträge 5 Kommentatoren 444 Aufrufe 6 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.
  • ArmilarA Armilar

    @michihorn

    für Vis?

    96641d4a-ea92-4d09-afd2-4a6e7e42bcb6-image.png

    68bec1ba-b94a-41d4-af68-cf517dfbbe77-image.png

    9431ec94-323d-4e3f-a16b-281c41434eb3-image.png

    c15d7250-8971-41b2-8c18-5eb7103d5c20-image.png

    M Online
    M Online
    michihorn
    schrieb am zuletzt editiert von
    #3

    @armilar Leider sind die Bars alle statisch mit definierten Start und Endwert.
    Wie im Script zu sehen, ist die Laufzeit errechnet, also die Laufzeit kann unterschiedlich sein. Das kann ich mit den mir bekannten Bars nicht abbilden
    Michael

    BananaJoeB OliverIOO 2 Antworten Letzte Antwort
    0
    • M michihorn

      @armilar Leider sind die Bars alle statisch mit definierten Start und Endwert.
      Wie im Script zu sehen, ist die Laufzeit errechnet, also die Laufzeit kann unterschiedlich sein. Das kann ich mit den mir bekannten Bars nicht abbilden
      Michael

      BananaJoeB Online
      BananaJoeB Online
      BananaJoe
      Most Active
      schrieb am zuletzt editiert von BananaJoe
      #4

      @michihorn Du meinst das die von 0 bis 100% gedacht sind?
      Dann musst du das halt Prozentual umrechnen.

      Alternativ könnte man ein Diagramm missbrauchen, also z.B. ein EChart, eingestellt auf einen festen Zeitraum und dann deine Werte im History/SQL Adapter setzen.

      ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

      ArmilarA 1 Antwort Letzte Antwort
      0
      • BananaJoeB BananaJoe

        @michihorn Du meinst das die von 0 bis 100% gedacht sind?
        Dann musst du das halt Prozentual umrechnen.

        Alternativ könnte man ein Diagramm missbrauchen, also z.B. ein EChart, eingestellt auf einen festen Zeitraum und dann deine Werte im History/SQL Adapter setzen.

        ArmilarA Offline
        ArmilarA Offline
        Armilar
        Most Active Forum Testing
        schrieb am zuletzt editiert von
        #5

        @bananajoe
        Jo, davon wäre ich ausgegangen, dass da noch ein Dreisatz reinkommt…

        Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
        https://github.com/joBr99/nspanel-lovelace-ui/wiki

        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

        1 Antwort Letzte Antwort
        0
        • BananaJoeB Online
          BananaJoeB Online
          BananaJoe
          Most Active
          schrieb am zuletzt editiert von
          #6

          @michihorn Einen hätte ich noch: Du könntest auch einfach ein HTML-Widget nehmen und einfärben - und dann die Koordinaten steuern mit Bindings die du einfach in die Positions- und Größenfelder einträgst.

          Dann musst du dich aber halt wirklich um alles selber kümmern

          ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

          CodierknechtC 1 Antwort Letzte Antwort
          0
          • BananaJoeB BananaJoe

            @michihorn Einen hätte ich noch: Du könntest auch einfach ein HTML-Widget nehmen und einfärben - und dann die Koordinaten steuern mit Bindings die du einfach in die Positions- und Größenfelder einträgst.

            Dann musst du dich aber halt wirklich um alles selber kümmern

            CodierknechtC Offline
            CodierknechtC Offline
            Codierknecht
            Developer Most Active
            schrieb am zuletzt editiert von
            #7

            @bananajoe sagte in Dynamische Fortschritt-Bar:

            @michihorn Einen hätte ich noch: Du könntest auch einfach ein HTML-Widget nehmen und einfärben - und dann die Koordinaten steuern mit Bindings die du einfach in die Positions- und Größenfelder einträgst.

            Dann musst du dich aber halt wirklich um alles selber kümmern

            Oder halt direkt im HTML-Widget ein Progress-Element befüllen.
            https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress?retiredLocale=de

            "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

            Proxmox 9.1.1 LXC|8 GB|Core i7-6700
            HmIP|ZigBee|Tasmota|Unifi
            Zabbix Certified Specialist
            Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

            ArmilarA 1 Antwort Letzte Antwort
            0
            • BananaJoeB Online
              BananaJoeB Online
              BananaJoe
              Most Active
              schrieb am zuletzt editiert von
              #8

              @codierknecht dann wären wir aber wieder bei einer normalen Progress Bar wie aus den Widgets.

              Eventuell müsste @michihorn mal eine Skizze machen (oder so), was er sich vorstellt

              ioBroker@Ubuntu 24.04 LTS (VMware) für: >260 Geräte, 5 Switche, 7 AP, 9 IP-Cam, 1 NAS 42TB, 1 ESXi 15TB, 4 Proxmox 1TB, 1 Hyper-V 48TB, 14 x Echo, 5x FireTV, 5 x Tablett/Handy VIS || >=160 Tasmota/Shelly || >=95 ZigBee || PV 8.1kW / Akku 14kWh || 2x USV 750W kaskadiert || Creality CR-10 SE 3D-Drucker

              CodierknechtC 1 Antwort Letzte Antwort
              0
              • BananaJoeB BananaJoe

                @codierknecht dann wären wir aber wieder bei einer normalen Progress Bar wie aus den Widgets.

                Eventuell müsste @michihorn mal eine Skizze machen (oder so), was er sich vorstellt

                CodierknechtC Offline
                CodierknechtC Offline
                Codierknecht
                Developer Most Active
                schrieb am zuletzt editiert von
                #9

                @bananajoe sagte in Dynamische Fortschritt-Bar:

                dann wären wir aber wieder bei einer normalen Progress Bar wie aus den Widgets

                Aber man könnte den "max"-Wert dynamisch per Binding setzen ;-)

                "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

                Proxmox 9.1.1 LXC|8 GB|Core i7-6700
                HmIP|ZigBee|Tasmota|Unifi
                Zabbix Certified Specialist
                Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

                1 Antwort Letzte Antwort
                0
                • CodierknechtC Codierknecht

                  @bananajoe sagte in Dynamische Fortschritt-Bar:

                  @michihorn Einen hätte ich noch: Du könntest auch einfach ein HTML-Widget nehmen und einfärben - und dann die Koordinaten steuern mit Bindings die du einfach in die Positions- und Größenfelder einträgst.

                  Dann musst du dich aber halt wirklich um alles selber kümmern

                  Oder halt direkt im HTML-Widget ein Progress-Element befüllen.
                  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress?retiredLocale=de

                  ArmilarA Offline
                  ArmilarA Offline
                  Armilar
                  Most Active Forum Testing
                  schrieb am zuletzt editiert von
                  #10

                  @michihorn
                  Konvertiere beide Timestamps (Wert1 / Wert 2) in eine UnixTimeStamp. Dann setze sie ins Verhältnis. Eine Codezeile mehr und fertig...

                  Hier siehst du was ich meine.
                  console.log(getDateObject(Wert1).getTime());

                  Würde auch gehen, wenn man alles in Sekunden umrechnet

                  Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                  https://github.com/joBr99/nspanel-lovelace-ui/wiki

                  Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                  1 Antwort Letzte Antwort
                  0
                  • M Online
                    M Online
                    michihorn
                    schrieb am zuletzt editiert von
                    #11

                    @codierknecht So ähnlich wie in Deinem Link, sollte die Bar aussehen. Ich werde ein Script entwickeln, dass einen DP nach dem Trigger

                    on({ id: idwert, change: "ne" }, function (obj) {
                    

                    jede Sekunde um 1 hochzählen lässt. Gestoppt wird der Zähler dann nach diesem Trigger

                    on({ id: idmoment, change: "any" }, function (obj) {
                    

                    den Wert des Datenpunktes nutze ich dann um ein Widget in der Eigenschaft "Width" mittels eines Bindings auf den DP zu verändern.

                    CodierknechtC 1 Antwort Letzte Antwort
                    0
                    • M michihorn

                      @codierknecht So ähnlich wie in Deinem Link, sollte die Bar aussehen. Ich werde ein Script entwickeln, dass einen DP nach dem Trigger

                      on({ id: idwert, change: "ne" }, function (obj) {
                      

                      jede Sekunde um 1 hochzählen lässt. Gestoppt wird der Zähler dann nach diesem Trigger

                      on({ id: idmoment, change: "any" }, function (obj) {
                      

                      den Wert des Datenpunktes nutze ich dann um ein Widget in der Eigenschaft "Width" mittels eines Bindings auf den DP zu verändern.

                      CodierknechtC Offline
                      CodierknechtC Offline
                      Codierknecht
                      Developer Most Active
                      schrieb am zuletzt editiert von Codierknecht
                      #12

                      @michihorn
                      Ich brauche aktuell keine ProgressBar.
                      Wenn ich eine bräuchte, würde ich mir ein passendes Widget aussuchen und es so wie @Armilar machen. Das ist eigentlich gebräuchlich.
                      Den Maxwert hast Du ja berechnet. Im Trigger dann auszurechnen, wieviel Prozent der aktuelle Wert ausmacht und dann in einen DP zu schreiben ist ja nun auch keine rocket science.

                      "Any fool can write code that a computer can understand. Good programmers write code that humans can understand." (Martin Fowler, "Refactoring")

                      Proxmox 9.1.1 LXC|8 GB|Core i7-6700
                      HmIP|ZigBee|Tasmota|Unifi
                      Zabbix Certified Specialist
                      Konnte ich Dir helfen? Dann benutze bitte das Voting unten rechts im Beitrag

                      1 Antwort Letzte Antwort
                      0
                      • M michihorn

                        @armilar Leider sind die Bars alle statisch mit definierten Start und Endwert.
                        Wie im Script zu sehen, ist die Laufzeit errechnet, also die Laufzeit kann unterschiedlich sein. Das kann ich mit den mir bekannten Bars nicht abbilden
                        Michael

                        OliverIOO Offline
                        OliverIOO Offline
                        OliverIO
                        schrieb am zuletzt editiert von OliverIO
                        #13

                        @michihorn sagte in Dynamische Fortschritt-Bar:

                        Leider sind die Bars alle statisch mit definierten Start und Endwert.

                        verstehe ich nicht ganz.
                        Mit binding lässt sich doch jeder Wert dynamisch dort einbinden.
                        Ich hab das mal mit dem widget von scrounger probiert

                        Ich habe 3 Datenpunkte, in denen die Ergebnisse der folgenden Operationen drin stehen:
                        0_userdata.0.min: new Date("2022-01-01").getTime()
                        0_userdata.0.max: new Date("2022-12-31").getTime()
                        0_userdata.0.aktuell: new Date("2022-06-01").getTime()

                        im widget trage ich dann mit geschweifte klammern bei
                        min: {0_userdata.0.min}
                        max: {0_userdata.0.max}
                        und als widget object id ohne geschweifte klammern
                        0_userdata.0.aktuell

                        Ergebnis ist dann 41%

                        die 3 Zeitpunkte müssen in diese Zahlen umgewandelt werden, da es sich mit dem Text sonst schlecht rechnen lässt.

                        Meine Adapter und Widgets
                        TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                        Links im Profil

                        ArmilarA 1 Antwort Letzte Antwort
                        0
                        • OliverIOO OliverIO

                          @michihorn sagte in Dynamische Fortschritt-Bar:

                          Leider sind die Bars alle statisch mit definierten Start und Endwert.

                          verstehe ich nicht ganz.
                          Mit binding lässt sich doch jeder Wert dynamisch dort einbinden.
                          Ich hab das mal mit dem widget von scrounger probiert

                          Ich habe 3 Datenpunkte, in denen die Ergebnisse der folgenden Operationen drin stehen:
                          0_userdata.0.min: new Date("2022-01-01").getTime()
                          0_userdata.0.max: new Date("2022-12-31").getTime()
                          0_userdata.0.aktuell: new Date("2022-06-01").getTime()

                          im widget trage ich dann mit geschweifte klammern bei
                          min: {0_userdata.0.min}
                          max: {0_userdata.0.max}
                          und als widget object id ohne geschweifte klammern
                          0_userdata.0.aktuell

                          Ergebnis ist dann 41%

                          die 3 Zeitpunkte müssen in diese Zahlen umgewandelt werden, da es sich mit dem Text sonst schlecht rechnen lässt.

                          ArmilarA Offline
                          ArmilarA Offline
                          Armilar
                          Most Active Forum Testing
                          schrieb am zuletzt editiert von Armilar
                          #14

                          @oliverio

                          Habe das auch gerade zusammengetackert:

                          var utsMoment, utsWert;
                          
                          on({id: 'alexa2.0.Echo-Devices.G0XXXXXXXXXXXXXXXX.Player.mediaProgressStr', change: "ne"}, async function (obj) {
                            utsMoment = (function () {var v = getDateObject(getState("alexa2.0.Echo-Devices.G0XXXXXXXXXXXXXXXXX.Player.mediaProgressStr").val); return v.getHours() * 3600 + v.getMinutes() * 60 + v.getSeconds();})();
                            utsWert = (function () {var v = getDateObject(getState("spotify-premium.0.player.duration").val); return v.getHours() * 3600 + v.getMinutes() * 60 + v.getSeconds();})();
                            console.log((Math.round(parseFloat((parseFloat(utsMoment) * 100)) / utsWert)));
                          });
                          

                          Habe keine Ring's aber für einen Fortschritt geht ja auch Alexa und Spotify. Irgendwie hat Alexa die Gesamtlänge eines Tracks nicht mehr als Zeit, deshalb aus Spotify (duration). Geht doch nur ums Beispiel...

                          Also perfekter Fortschritt zwischen 0 und 100...

                          Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                          https://github.com/joBr99/nspanel-lovelace-ui/wiki

                          Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                          M 1 Antwort Letzte Antwort
                          0
                          • ArmilarA Armilar

                            @oliverio

                            Habe das auch gerade zusammengetackert:

                            var utsMoment, utsWert;
                            
                            on({id: 'alexa2.0.Echo-Devices.G0XXXXXXXXXXXXXXXX.Player.mediaProgressStr', change: "ne"}, async function (obj) {
                              utsMoment = (function () {var v = getDateObject(getState("alexa2.0.Echo-Devices.G0XXXXXXXXXXXXXXXXX.Player.mediaProgressStr").val); return v.getHours() * 3600 + v.getMinutes() * 60 + v.getSeconds();})();
                              utsWert = (function () {var v = getDateObject(getState("spotify-premium.0.player.duration").val); return v.getHours() * 3600 + v.getMinutes() * 60 + v.getSeconds();})();
                              console.log((Math.round(parseFloat((parseFloat(utsMoment) * 100)) / utsWert)));
                            });
                            

                            Habe keine Ring's aber für einen Fortschritt geht ja auch Alexa und Spotify. Irgendwie hat Alexa die Gesamtlänge eines Tracks nicht mehr als Zeit, deshalb aus Spotify (duration). Geht doch nur ums Beispiel...

                            Also perfekter Fortschritt zwischen 0 und 100...

                            M Online
                            M Online
                            michihorn
                            schrieb am zuletzt editiert von
                            #15

                            @armilar super, danke für die Unterstützung an alle.
                            Ich hab es so hinbekommen:

                            const idwert = "ring.0.cocoa_96839166.Livestream.livestream_request"
                            const idmoment = "ring.0.cocoa_96839166.Livestream.moment"
                            const idtest = "0_userdata.0.Testwert"
                            const idLW = "0_userdata.0.Letzterwert"
                            const wert1 = "0_userdata.0.wert1"
                            const wert2 = "0_userdata.0.wert2"
                            var w1, w2, zähler, helfer
                            
                            
                            on({ id: idwert, val: true }, function (obj) {
                                zähler = 0
                                schedule('* * * * * *', function () {
                                    if (getState(idwert).val == true) {
                                        setState(wert1, obj.state.lc);
                                        w1 = obj.state.lc
                                        zähler = zähler + 1
                                        helfer = zähler
                                        setState(idtest, zähler)
                                        log("Zähler: " + zähler)
                                    }
                                })
                                on({ id: idmoment, change: "ne" }, function (obj) {
                                    setState(wert2, obj.state.lc);
                                    setState(idwert, false);
                                    setState(idLW, helfer)
                                });
                            });
                            

                            Es ist eine materialdesign-progressbar geworden:
                            bar1.png
                            bar2.png

                            Es ist noch etwas Feinarbeit notwendig...aber klappt

                            OliverIOO 1 Antwort Letzte Antwort
                            0
                            • M michihorn

                              @armilar super, danke für die Unterstützung an alle.
                              Ich hab es so hinbekommen:

                              const idwert = "ring.0.cocoa_96839166.Livestream.livestream_request"
                              const idmoment = "ring.0.cocoa_96839166.Livestream.moment"
                              const idtest = "0_userdata.0.Testwert"
                              const idLW = "0_userdata.0.Letzterwert"
                              const wert1 = "0_userdata.0.wert1"
                              const wert2 = "0_userdata.0.wert2"
                              var w1, w2, zähler, helfer
                              
                              
                              on({ id: idwert, val: true }, function (obj) {
                                  zähler = 0
                                  schedule('* * * * * *', function () {
                                      if (getState(idwert).val == true) {
                                          setState(wert1, obj.state.lc);
                                          w1 = obj.state.lc
                                          zähler = zähler + 1
                                          helfer = zähler
                                          setState(idtest, zähler)
                                          log("Zähler: " + zähler)
                                      }
                                  })
                                  on({ id: idmoment, change: "ne" }, function (obj) {
                                      setState(wert2, obj.state.lc);
                                      setState(idwert, false);
                                      setState(idLW, helfer)
                                  });
                              });
                              

                              Es ist eine materialdesign-progressbar geworden:
                              bar1.png
                              bar2.png

                              Es ist noch etwas Feinarbeit notwendig...aber klappt

                              OliverIOO Offline
                              OliverIOO Offline
                              OliverIO
                              schrieb am zuletzt editiert von
                              #16

                              @michihorn
                              feuert halt jede Sekunde und erzeugt Grundlast im Server/Netz und Client.
                              Aktuell wahrscheinlich nicht so schlimm, aber mit der Zeit und mehreren solchen Lösungen wird es halt dann relevant

                              Meine Adapter und Widgets
                              TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
                              Links im Profil

                              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

                              704

                              Online

                              32.6k

                              Benutzer

                              82.3k

                              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