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

                            695

                            Online

                            32.4k

                            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