Drawing a knob in HTML5

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Drawing a knob in HTML5

Tim Janik-6
Hi Stefan,

talking about UIs the other day, you suggested giving a simple knob
implementation a shot.

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. Also, it'll need
two different implementations, one for balance displays, one for level (volume)
displays.


--
Yours sincerely,
Tim Janik

https://testbit.eu/timj/
Free software author.

_______________________________________________
beast mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/beast

simple-knob.html (4K) Download Attachment
simple-knob.svg (5K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Drawing a knob in HTML5

Stefan Westerfeld
   Hi!

On Tue, Feb 07, 2017 at 04:04:57PM +0100, Tim Janik wrote:
> talking about UIs the other day, you suggested giving a simple knob
> implementation a shot.
>
> 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.

While your code basically does the job, I should also mention that it looks not
as good as the Bitwig knob. The Bitwig knob has a slightly wider position line
with somewhat greyish border. Probably the orange level indicator also makes
the Bitwig version look better. In any case I volunteer for reviewing every
piece of the new UI for visual quality, details matter a lot when it comes to
producing a pleasant DAW UI.

Btw, implementing this could be done PyQt5 just as easily. Here is code for a
custom widget:

#!/usr/bin/python

import sys

from PyQt5 import QtGui, QtCore, QtWidgets

class ReferenceScale(QtWidgets.QWidget):
  def __init__(self):
    super(ReferenceScale, self).__init__()

  def paintEvent(self, event):
    qp = QtGui.QPainter()
    qp.begin(self)
    texts = [ "Excellent", "Good", "Fair", "Poor", "Bad" ]

    for i in range (len (texts)):
      y0 = self.height() / float (len (texts)) * i
      y1 = self.height() / float (len (texts)) * (i + 1)
      qp.setPen(QtGui.QColor(168, 34, 3))
      qp.setFont(QtGui.QFont('Decorative', 16))
      qp.drawText(0, y0, self.width(), y1 - y0, QtCore.Qt.AlignCenter, texts[i])

    DELTA = 10
    TEXT_WIDTH = 30
    for i in range (len (texts) + 1):
      y = (self.height() - 2 * DELTA) / float (len (texts)) * i + DELTA
      qp.drawLine(0, y, self.width() / 2 - TEXT_WIDTH, y)
      qp.drawLine(self.width() / 2 + TEXT_WIDTH, y, self.width(), y)
      qp.drawText (0, y-DELTA, self.width(), 2 * DELTA, QtCore.Qt.AlignCenter, "%d" % (100 - i * 20))

    qp.end()

app = QtWidgets.QApplication (sys.argv)
ex = ReferenceScale ()
ex.show()
sys.exit(app.exec_())

which I used for the SpectMorph listening test software. As you can see, there
is more or less a 1:1 correspondence between your paint_level() function to the
PyQt5 paintEvent method, so you could do your drawing there with just as little
code.

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

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

   Cu... Stefan
--
Stefan Westerfeld, http://space.twc.de/~stefan
_______________________________________________
beast mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/beast
Reply | Threaded
Open this post in threaded view
|

Re: Drawing a knob in HTML5

Tim Janik-6


On 08.02.2017 00:12, Stefan Westerfeld wrote:

>    Hi!
>
> On Tue, Feb 07, 2017 at 04:04:57PM +0100, Tim Janik wrote:
>> talking about UIs the other day, you suggested giving a simple knob
>> implementation a shot.
>>
>> 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.

>> Also, it'll need
>> two different implementations, one for balance displays, one for level (volume)
>> displays.
>
> 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
Pro.

>    Cu... Stefan

--
Yours sincerely,
Tim Janik

https://testbit.eu/timj/
Free software author.

_______________________________________________
beast mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/beast

lp-balance.png (6K) Download Attachment
knob-discrete.png (6K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Drawing a knob in HTML5

Stefan Westerfeld
   HI

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)
> >> displays.
> >
> > 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
> Pro.

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
--
Stefan Westerfeld, http://space.twc.de/~stefan
_______________________________________________
beast mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/beast
Reply | Threaded
Open this post in threaded view
|

Re: Drawing a knob in HTML5

Tim Janik-6
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:

>    HI
>
> 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)
>>>> displays.
>>>
>>> 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
>> Pro.
>
> 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

https://testbit.eu/timj/
Free software author.

_______________________________________________
beast mailing list
[hidden email]
https://mail.gnome.org/mailman/listinfo/beast

uj-knob.html (8K) Download Attachment