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

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

                          358

                          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