Create a rotatable radio button

1

Hi, I’d like to have a rotatable knob like a volume knob but could not find a solution to this. Any help is welcome.

2

not builtin.
create custom or for example rely on tweenMax

3

This uses a nice little library called JogDial, you can tell my creativeness by the dial style! But, I have created it so you can see how it works :smile:

dialTest.hype.zip (94.2 KB)

2 Likes
4

Great. Thank you very much for your suggestions.

5

Thank you so much, I’ve been trying to use the library and it works very well.
My only need and a bit of a problem is attaching a png image as the dial. I can’t seem to control the styling. Any help would be greatly appreciated.

In the head html:
#dial_knob {

background-image: url(“https://d1ih3jzbl9wgdj.cloudfront.net/hosted/314/public_uploads/265cd6fd-28ad-4496-9e2c-21d78890bc63.png”);

background-color: black !important; /* the jogdail.js is set in debug mode which makes the wheel have a green overlay
You should be able to turn the debug off but in hype this breaks the JS. so we simply change it here*/

}
6

Hi Blake!

I've replied to your post here...

7

So helpful thank you so much

1 Like
8

dial-test-dub.hype.zip (863.5 KB)

So, I ended up using css code to under the dial. But, now I can’t get the angle to start
at -120deges, basically trying to match the track, where the start is to the far left.

9

Hi Blake!

My mind will soon be in the Magic Kingdom :zzz::zzz:

I will look at this later today, or maybe someone else - such as @MarkHunte - will have an insight or two to offer.

10

I have done this on a http://ourmusicradio.com/ site but would need to look at the code I used as although it should be simple it was with the mix of Hype and Jogdail

Cannot off hand remember what I did but will look when I get back

Ok I manage to look at it. My main trick was just for the intro and volume slider animation.
I wanted the knob to slowly rotate. I had to dummy it doing so.

But min starts on the side of 0+ degs not - 0 degs

I think there is a math issue in the JogDial.js that does not deal with (-) signed integers.
Using them seems to go in reverse with a jump.. more digging needed

11

Thanks so much, so close on this one, I’m testing the integer trick. So close.
Yes, I at the same behavior as you. Where the dial jumps to the end of rotation when initiated.

12

dragCircleControlTimeline.hype.zip (777.1 KB)
hope it’ll work :slight_smile:

4 Likes
13

Wow, thanks millions. I have some work to do here.

14

Brilliant stuff - Extension maybe with options?

1 Like
15

Beautiful! Honking%20Horn%20right