animierter Slider ... mir fällt kein besserer Begriff ein

[Nobby1805]

Ich dachte, ich hätte so etwas schon mal irgendwo hier gefunden ... entweder war das ein Traum, oder ich finde es einfach nicht

Also so etwas wie Slider, aber mit der Möglichkeit, dass in Abhängigkeit einer Staus-Variablen die Position des Sliders sekündlich um ein Delta erhöht wird

Anwendung: Progress-Anzeige beim Abspielen eines Liedes

Viele Grüße
Nobby

[Standarduser]

Level oder Slider.

Code Auswählen Erweitern


<div data-type="level"
     data-device="DG.ku.MM.Squeezebox"
     data-get="currentTrackPosition"
     data-color="#E9A444"
     data-max="duration"
     data-width="400"
     data-timer-state="DG.ku.MM.Squeezebox:STATE"
     data-timer-state-on="play"
     data-timer-state-off="!on"
     data-timer-step="1"
     data-timer-interval="1000"
     data-margin="15px"
     class="horizontal centered">
</div>


Das Wiki müsste mal entsprechend angepasst werden...

[Nobby1805]

Das Wiki müsste mal entsprechend angepasst werden...

du meinst, weil im Wiki nix mit data-timer-... auftaucht? Ich habe das jetzt noch nicht getestet, melde mich falls es wie gewünscht funktioniert

[Standarduser]

Mein Beispiel funktioniert - habe ich ja so in Betrieb 

[Nobby1805]

fast perfekt ...
zur Perfektion fehlt jetzt nur noch ein integriertes Label das den langsam steigenden Wert vor oder hinter dem slider ausgibt

Beispiel im Anhang

Die Erweiterung im Wiki mache ich spätestens morgen

[Reinerlein]

Hallo,

schön
Zusätzlich zur Aktualisierung eines anhängenden Labels habe ich eine andere Sache:
Der Timer Stoppt bei mir nicht:
Wenn ich die Seite aufrufe, und der Player nicht läuft, ist alles gut. Kein Weiterwandern der Anzeige.
Dann starte ich die Wiedergabe. Der Balken fängt an zu wandern. Auch Super.
Dann pausiere oder stoppe ich die Wiedergabe, und der Balken wandert immer noch weiter.
Meine Konfiguration ist die folgende:

Code Auswählen Erweitern


<div data-type="slider"
data-device="Device"
data-set="CurrentTrackPosition"
data-get="currentTrackPositionSec"
data-max="currentTrackDurationSec" data-min="0"
data-step="1"
data-handle-diameter="5"
data-timer-state="Device:transportState"
data-timer-state-on="PLAYING"
data-timer-state-off="!PLAYING"
data-timer-step="1"
data-timer-interval="1000"
data-width="250"
class="horizontal tap inline">


Habe ich den -off Wert falsch beschrieben?

Danke schon mal...

Grüße
Reiner

[Nobby1805]

bei mir stoppt er ...
sagen wir mal so, ich habe es etwas anders definiert

Code Auswählen Erweitern

<div data-type="slider"
data-device="par01"
data-set="CurrentTrackPosition"
data-get="currentTrackPositionSec"
data-max="currentTrackDurationSec" data-min="0"
data-step="1"
data-handle-diameter="3"
data-width="120"
        data-timer-state="par01:transportState"
        data-timer-state-on="PLAYING"
        data-timer-state-off="!on"
        data-timer-step="1"
        data-timer-interval="1000"
class="horizontal inline">
</div>   


[Standarduser]

Habe ich den -off Wert falsch beschrieben?

Jain. Im Prinzip müsste das eigentlich gehen, was Du geschrieben hast, aber eigentlich wird das anders gelebt.
Wenn data-...-off immer dann aktiv sein soll, wenn data-...-on nicht zutrifft (eigentlich meistens), dann heißt der Ausdruck "!on". Das on steht also nicht für einen String, sondern für das data-...-on-Attribut.

[Standarduser]

zur Perfektion fehlt jetzt nur noch ein integriertes Label das den langsam steigenden Wert vor oder hinter dem slider ausgibt

Hätte ich auch gerne. Habe dafür aber noch keine Lösung.

[Reinerlein]

Hi Standarduser,

danke für die Info. Dann weiß ich das auch mal . Wenn ich das aber so einstelle (also mit "!on") dann geht der Balken nicht los...

Aber er endet Ist ja schon mal was...

Zu dem Label:
Vielleicht könntest du einfach einen zusätzlichen Parameter einbauen, in dem wir einfach Javascript-Code reinschreiben können, der bei jedem Tick zusätzlich aufgerufen wird.
Wenn wir dann noch sauber auf die Daten zugreifen können, brauchen wir doch nur noch den internen Sekundenwert des Slider in einen Std:Minuten:Sekunden-String umstellen lassen, und dem Label-Objekt zuweisen.
Das sollte doch per jQuery kein Riesenthema sein, oder?

Auf diese Weise brauchst du dir keine allgemeingültigen Gedanken machen, und der Anwender kann einfach programmieren, was passieren soll. Dieser Zeit-Label-Schnipsel kann ja dann einfach im Wiki erwähnt werden, dann kann sich das jeder noch erweitern, wenn er mag...

Grüße
Reiner

[Standarduser]

Zu dem Label:
Vielleicht könntest du einfach ...

Ich? Ich bin da nicht der richtige Ansprechpartner

[Nobby1805]

Ich? Ich bin da nicht der richtige Ansprechpartner

ersetze "du" durch "setstate"