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

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.3k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.4k

Dynamische Fortschritt-Bar

Geplant Angeheftet Gesperrt Verschoben Skripten / Logik
16 Beiträge 5 Kommentatoren 441 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 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 Online
    CodierknechtC Online
    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 Offline
      BananaJoeB Offline
      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 Online
        CodierknechtC Online
        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 Offline
            M Offline
            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 Online
              CodierknechtC Online
              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 Offline
                    M Offline
                    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

                      389

                      Online

                      32.5k

                      Benutzer

                      81.6k

                      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