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.4k

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

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

                        767

                        Online

                        32.6k

                        Benutzer

                        82.2k

                        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