FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Nobby1805 am 14 März 2017, 13:52:09

Titel: animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Nobby1805 am 14 März 2017, 13:52:09
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
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Standarduser am 14 März 2017, 14:07:07
Level oder Slider.


<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...
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Nobby1805 am 14 März 2017, 16:12:47
Zitat von: Standarduser am 14 März 2017, 14:07:07
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 ;)
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Standarduser am 14 März 2017, 16:25:11
Mein Beispiel funktioniert - habe ich ja so in Betrieb  ;)
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Nobby1805 am 14 März 2017, 17:09:10
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 ;)

Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Reinerlein am 14 März 2017, 17:26:38
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:

<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
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Nobby1805 am 14 März 2017, 17:32:13
bei mir stoppt er ...
sagen wir mal so, ich habe es etwas anders definiert

<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>   
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Standarduser am 14 März 2017, 17:37:59
Zitat von: Reinerlein am 14 März 2017, 17:26:38
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.
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Standarduser am 14 März 2017, 17:47:31
Zitat von: Nobby1805 am 14 März 2017, 17:09:10
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.
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Reinerlein am 14 März 2017, 18:01:24
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
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Standarduser am 14 März 2017, 18:10:18
Zitat von: Reinerlein am 14 März 2017, 18:01:24
Zu dem Label:
Vielleicht könntest du einfach ...

Ich? Ich bin da nicht der richtige Ansprechpartner ;)
Titel: Antw:animierter Slider ... mir fällt kein besserer Begriff ein
Beitrag von: Nobby1805 am 14 März 2017, 18:12:15
Zitat von: Standarduser am 14 März 2017, 18:10:18
Ich? Ich bin da nicht der richtige Ansprechpartner ;)
ersetze "du" durch "setstate"