I’m trying to create a fullscreen web app (on iPad) that is essentially a giant jog wheel.
The green bit slides round and the yellow circle un-fills. I can do this as a timeline animation, but need to overlay something to drag through the timeline that works in a circular motion as a guess, either an invisible wedge or an element on a path the same shape as the green bit.
I though having an element rotate on drag (or sticking to a path) would be pretty simple, but I might be overlooking a simple tick box somewhere?
Can someone let me know if A) this is possible and hopefully B) where I’m overlooking it in the menu
If you can share your document so we can see what you’re doing then we could better suggest possible solution. You can control a timeline on drag but as Michael says you are limited to x or y axis. I suspect you want to control the timeline forwards and backwards in the same motion being a jog wheel. You could probably do this with Javascript. Detecting the direction of the mouse and playing the timeline forward or in reverse.
Did anyone else have any solutions for this? I found a Jquery Knob (https://github.com/aterrien/jQuery-Knob) but I’m not sure how to implement it and if that would be possible?
Here is an example using the jogDail.js and your animations.
First I have set you intro animation on the Main Timeline and moved the rotations onto another timeline. (spin)
The main timeline runs the intro and with a timeline action at the end runs the Jog function which loads the jog dial.
The new spin timeline now runs for 180 seconds.
This means that in the jog function we can detect when the knob is moved and at what rotation angle it is at.
We can then just tell the spin timeline to go to that number in seconds. Because the rotation angle number is linear you will only see linear movement in the animation.
v2
The knob in v1 does not respect the z-index and so is under the tick marks .
v2 puts the knob on top of the r tick marks by dropping the tick mark image down the z-index with some added js.
The knob is always set to 0.4 opacity, so we also set it to 1 in the styles.
We also use some styles to give the knob a gradient colour to match the main elements.
fixed the angle of the yellow segments. they were originally going to 108’ and needed to go to 90’
Also added a percentage text. On mouse down the text will enlarge. mouse up it shrinks back down. This is done with the hypeDocument.setElementProperty() API.
Notes
The Jogdial.js API has a debug mode that just overlays the wheel in green. You should be able to set this to false but in Hype at least this stops the Jogdial.js from working so we HAVE to have it set to true.
In the head I have added a style to set the wheel to transparent which gets rid of this.
You can control the actions/animations/code by points on the spin timeline or within the jog function.
@MarkHunte I think you have saved my project! Thanks so much for having a look at this, I’ll have a good play with it today and let you know how I get on!
@MarkHunte I’ve had a look an its excellent! I was wondering though if the timeline could continue to run from the point on the timeline the user “mouseup”. I’m not very good at code but thought it might work if you added something like:
I assume you want the spin timeline to start just after scene load also then.
So I would add an action to start it on the timeline action that is already on the main timeline just after the intro animations. Put it as a second action to start timeline spin.
Update, just realised that you will need to have the jog knob follow… not sure how to do that yet…
This is a really nice example! How would you adapt this to make it responsive? In the example shared above, I changed the scene size to be 100% (for both width and height) and the Flexible Layout properties for each element. However the “dial” doesn’t seem conform to the responsive flexible layout as shown in the screen grab where its in an incorrect position. (also see hype file). Any help on this would be awesome!
The simplest method would be to put everything in a group and use the ‘zoom contents’ flexible layout option on that group. Unfortunately when I simply put items in a group it stops working; it is unclear why.
Otherwise if each element is using its own flexible layout settings, you would need to adjust the wheelSize and knobSize settings that are used in the JogDial method. There’s not any easy way to get flexible layout scaling information from Hype, so it probably isn’t straight forward to calculate this without your own calculations based on div sizes.
Being more familiar with the JogDial library might yield better ways to integrate the two.
I have not really had time to look at this but if I remember correctly a lot of the dimensions for the jog elements position and diameters are determined by the JogDial.js code.
Just changing the hype elements properties is not enough, the JS for the jogDial would also need to be changed