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*/
}
#dial_wheel {
background-color: transparent !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*/
}
</style>
The basic issue was the upper lefthand corner of the PNG file (i.e. transparent space) was larger than the knob container itself (the knob was just 30px but your image was 200px), as a result nothing was visible. So the PNG is now 30 px in size to match the knob container (set in the “dialReady” function) and voilà…
Some additional notes: I did not find the “debug” feature had to be on for the jog dial to work so I commented it out. Ditto the CSS for the “dial_wheel” - commented out as it was not needed (at least in my demo).
Also set the “progress bar” width, linked to the jog dial, to “0” so it is not visible when the Scene opens; but I did group it and set the border of the group to 1 px… the “empty” container effect.
Additionally, the cursor is set to “pointer” for the dial’s CSS.
And the PNG file is now referenced from the Hype Resource folder.
Thats good to know that that has change. When I used it before that was a pain.
I did just test it on my previous example and there still is a css issue without the debugger on but I think that more down to the css being used to make the knob. But not if I use an image.
One thing,
forward slashes are not used as comments marks in css. Doing so breaks the related css below them in the block
