Re: Drawing a knob in HTML5

Here's the latest version, supporting mouse events, volume knob and balance knob
behaviour. Google-chrome shows a one-time popup about hiding the mouse
cursor for knob adjustments, but FF *always* displays it, making
requestPointerLock somewhat unusable.

It might make sense to file bug against FF for this...

On 09.02.2017 23:06, Stefan Westerfeld wrote:

On Wed, Feb 08, 2017 at 04:07:22PM +0100, Tim Janik wrote:
On 08.02.2017 00:12, Stefan Westerfeld wrote:
Here's my first attempt at *drawing* one, so it's not too hard to get something
onto the screen. However, I think I'll start over, draw from scratch without an
SVG and can then include a level display in the circumference.

That was quick. Maybe for the sake of completeness, mouse event handling should
be implemented for the prototype, too.

Yeah, I'm learning the necessary steps along the way.
I've moved away from SVG in the latest version and tested a discrete level
display. See the attached knob-discrete.png.

Right - these look a lot better. Seems the circumference improves overall look
and feel.

Although I like the look of the discrete style, it comes at the cost that you
cannot draw small changes in the underlying value if you are in the "dark" area
of between the discrete steps. So I'd recommend to stick to the original
("Bitwig") style of having a continuous colored circumference (like also in the
Logic Pro screenshot).

Also, it'll need
two different implementations, one for balance displays, one for level (volume)

You mean the rectangular volume widget Bitwig has? Yes, we need that, too.

I was talking about rendering the knob with the center being the 0 position.
For balance adjustments. See the attached lp-balance.png, en example from Logic

Ah yes. We need definitely need that to. Should not be too hard to support
both, as the look-and-feel difference between the two is small.

   Cu... Stefan

Yours sincerely,
Tim Janik
Free software author.

<<< text/html; name="uj-knob.html": Unrecognized >>>

[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]