Re: Drawing a knob in HTML5

[Stefan Westerfeld <stefan space twc de>]

   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