Hi guys, I’m working on something to replace the typical animation toolbar.
The old toolbar looked like this:
I have a new thing called the “Playback” widget. It pops up looking like this:
The bottom-left is “Reset” (same as before). On the right is faster/slower, same as before. The large middle button acts as a play/pause toggle, or really a pause/un-pause toggle where “un-pause” puts you back into whatever mode you might have been in before pause (rewind, realtime, etc).
The upper-left button is called “Shuttle ring.” Clicking it results in this:
The shuttle ring is may look familiar to folks who have used video editing systems. It is a ring offering a continuous control of forward and backward speeds. You can slide the “green glow” indicator smoothly around its entire edge, like this:
There is also a button tucked under the top-center of the ring, called the realtime button. It sets the time to “now” (from the computer’s own clock) and animates along at real time. Pausing this mode for a length of time, and then un-pausing via the center button, will cause it to jump forward to catch up with realtime. Using the shuttle ring will pop out of realtime as you expect, and animate forwards or backwards from there.
This functionality is available for testing now on my “playback” branch of Cesium. It’s implemented in SVG and works on mobile (FF & Chrome for Android), although currently you can only tap, not slide the shuttle ring on mobile (touch events not hooked up yet, pending resolution of the camera & pinch-zoom branches, that’s a different story). But once the other branches are worked out you can be sure I’ll be hooking up touch events for this, in the meantime you can still test it as a work-in-progress on mobile and of course more fully test it on a desktop/laptop.
One remaining needed feature is “themeing,” how important is that to everyone? Currently it’s just hard-coded to a dark theme, but I was talking with some of the other Cesium devs about adding a CSS style sheet, reading values from that sheet in JS, and constructing my SVG gradients based on the values read. This would allow simple CSS styling of something that otherwise would require changes to SVG-generating JS code.
Anyway what does everyone think of all this? Does it seem like an improvement over the Dojo toolbar? The new widget chips away a little more Dojo dependency by the way, it uses only plain JS and SVG, not Dojo to implement the widget. We have a separate debate going as to how much effort to put into our own native widgets like this one, vs how much to rely on 3rd party widget sets, but that’s a topic for another thread.