non ideal resolution

[jazzalex]

Hello all and thanks for this great project ! I just implemented it into http://www.soundjack.eu and it works just fine, however, there is a problem with the resolution of the button – it is not as "smooth" as in your demo images and appears pixeled as displayed in the linked image below. Has anyone a suggestion how to fix this ? Thanks in advance !

[andrepxx]

It looks like there is scaling applied to the knob's canvas element (or the container, perhaps even the entire document?), perhaps via CSS transform: scale(...) property or something similar.

Since the element renders into a canvas, and a canvas basically holds a buffer for a raster (not vector) image, you should make sure that there is nothing that applies scaling to the canvas - or the elements that contain it.

This is really hard to tell without checking the actual DOM with the "Inspect element" funtion of Firefox or something similar while the knob element is displayed like this.

[jazzalex]

Thanks for the quick feedback ! I will check this asap and will get back sooner or later.

[jazzalex]

Just realized that the problem is the initial resolution itself: I am creating the knob via var myKnob = pureknob.createKnob(35,35); and if I choose 3535 in your demo index.html file as well I am getting the same problem, too. Now I consider creating it with 350350 pixel resolution and then scaling it down but I wonder how to do it. I tried the following:

var elem = document.getElementById("pan_");
elem.style.height="35px";
elem.style.width="35px";
elem.appendChild(node);

without success - the resolution stayed at 350*350. Do you have any other suggestion ?

Thanks !

[andrepxx]

Height and width of the element are stored internally in the JavaScript (not DOM) object that represents the knob. This is because the knob does not consist of a static DOM object, but of multiple DOM objects (such as DIV, CANVAS and INPUT elements, etc.) that are created and / or modified dynamically. So the knob consists of "more than what you see in the DOM".

Please do not modify the DOM elements (for example style them) later on. Instead, call pureknob.createKnob(...) with the resolution you require. It is not possible to change the resolution after a knob was created. If you need to "change" the resolution of a knob, you have to create a new knob object with the same parameters as the old one, but a different resolution, remove the "old" knob's DOM element from your DOM tree and insert the new one in its place. You can read out the value of the "old" knob to carry it over to the "new" one.

Think of a 301x301 pixel knob as "a different kind of UI element" than a 300x300 knob. You cannot turn one into the other. You have to destroy one, create the other, and then replace one with the other.

Hope this helps.

[jazzalex]

So, I basically need a resolution of 35x35 pixels but creating it via pureknob.createKnob(35,35) leads to the obove mentioned issue of pixeled illustration and it also occurs in your index demo file. Do I have to accept this effect or is there anything you'd recommend in order to get rid of it ?

[andrepxx]

If I change the (300, 300) to (35, 35) in the demo file, the knob just becomes significantly smaller.

This is the demo with the 300x300 size.

This is the demo with the 35x35 size.

Of course, if I now were to "zoom into" that small 35x35 knob element, I would see "pixels". For example, the following is a section of the screenshot scaled 4x with GIMP using bicubic interpolation.

However, that is perfectly normal, since the screenshot is, of course, a raster graphic, and the knob is just displayed by 35x35 pixels on your monitor (and therefore rendered by the browser in exactly that resolution) and with that number of pixels, it can't get more "clear".

I don't know if this is the problem you're experiencing or if I get you wrong.

What is the behaviour you would expect instead?

As for why it looks "bad" in your application, I would have to see the DOM. My guess is that there is something else (say a CSS property globally on the document, or on some container element of the knob, etc.) that applies scaling to the UI element afterwards. Your other UI elements appear to use vector graphics (SVGs), while pure-knob uses the HTML5 Canvas element.

The drawing that pure-knob does is also "vectorized", however, it gets rasterized "when it hits the canvas". Any scaling that is applied afterwards will break the one-to-one pixel mapping between canvas and display. That's what I think is somehow happening here and in order to correct this, you likely have to find out exactly where that happens. The knob code itself won't do it. It has to happen somewhere else.

Regards.

[jazzalex]

The problem is that users change their zoom factor individually. In order to be prepared for stronger zooms-ins I typically create raster images in highest possible resolution and scale them down for lower ones. If I understand you correctly I'd always have to create a new button for a different zoom stage then my upper approach does not work and I might have to pick a vector-based knob. Thanks anyways !

[andrepxx]

Yes, I'd probably have to use SVGs instead of HTML5 Canvas, which would be more or less a complete re-write.

In addition, I don't know if scaling will mess up the coordinates of touch and mouse events, and if it's possible (or how much effort it is) to "correct" for that.

Hope you find something that works better for you.

I ended up creating this element because (at least at that time) I couldn't find something that worked for me either. I used JQuery Knob before, which is also Canvas-based but it's unmaintained for several years and shows a lot of strange behaviour in current browsers.

[jazzalex]

Your solution works best so far except for my individual scaling problem. I will keep it for now and check out alternatives in parallel. I might possibly contribute to your project in case I have further follow-up ideas. I'll keep you up2date ! Thanks for your work and support !

[andrepxx]

I suppose this issue was fixed in PR #15.