Rotate on path or only rotate on drag?

Hi Folks,

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 :slight_smile:

Thanks a lot guys!

James

An element can be used as a slider to control the timeline. This is accomplished with the “On Drag” “Control Timeline” option…

http://tumult.com/hype/documentation/3.0/#mouse-and-touch-actions

This is not circular though. It’s up/down or left/right movement. So, your project is challenging.

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.

iPad_Control copy.hype.zip (20.5 KB)

Just so you know, the rotate animation starts at 10 seconds. The rotation needs to scrub round like an original iPod wheel.

Thanks,

James

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?

Any help gratefully appreciated.

Thanks,

James :slight_smile:

Did you see this thread.. near the end

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.


v1.
Knob Turn.hype.zip (129.2 KB)

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.

Knob Turn V2.hype.zip (129.5 KB)


v3

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.

Knob Turn V3.hype.zip (127.7 KB)



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.


2 Likes

Update v3 to fix some stuff.

I must say I really like your original animation. Thanks for sharing it.

1 Like

Nice Job Mark!

1 Like

Thanks @JimScott

One thing I have not been able to do is get it working with scaling. Which is a shame but not a show stopper.

…Belay that, rebuilt one from scratch and scaling works

@MarkHunte I think you have saved my project! :heart_eyes: 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! :smiley:

@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:

hypeDocument.playTimelineNamed(angle, ‘spin’);

to this part of the jog()

dial.on(“mouseup”, function(event){
hypeDocument.setElementProperty(numberText, ‘scaleX’, 1, 1, ‘easeinout’);
hypeDocument.setElementProperty(numberText, ‘scaleY’, 1, 1, ‘easeinout’);

	 });

That’s not working though… :confused:

It is pretty easy to do that.

You add the line at the end of the code you mentioned.

hypeDocument.continueTimelineNamed('spin', hypeDocument.kDirectionForward, false);

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…

That’s great, it worked. But yup the knob does not follow, which is not a huge deal breaker.

I’m now struggling to get something else working. Will DM you @MarkHunte as its slightly different topic. :slight_smile:

did you see my update in my last post

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!

Knob Turn V3 Responsive.hype.zip (132.5 KB)

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

1 Like