How Do I Calculate Logrithmic Labels For A Vu Meter Scale?

I writing a meter widget using canvas and need to calculate the label values for the scale. No problem except when I'm trying to re-create the scale for a VU meter. I understand it

Solution 1:

I suppose you have a value-to pixel function. What you need to write is the inverse function of that.

When you have the inverse function, you just divide the screen area to N equal parts (in the picture you have 6 regions). One region will be X pixels in width. Now you can use your inverse function to get the value for that pixel-position.

This will not be an integer, it will be something like 3.434 or 11.34 - you need a prettyfier function which will generate the closest "pretty" number (let's say just chop off the parts after the decimal).

Now you take the pretty value and calculate the pixel position for it with your original function.

Some code:

functionvalue2px(value, valueMin, valueMax, pxMin, pxMax) {
    var valueWidth = sigLog(valueMax) - sigLog(valueMin);
    var pixelWidth = pxMax - pxMin;
    var ratio = pixelWidth / valueWidth;

    return ratio * (sigLog(value) - sigLog(valueMin)) + pxMin;
}

functionpx2value(px, valueMin, valueMax, pxMin, pxMax) {
    var valueWidth = sigLog(valueMax) - sigLog(valueMin);
    var pixelWidth = pxMax - pxMin;
    var ratio = pixelWidth / valueWidth;

    returnsigExp((px - pxMin) / ratio + sigLog(valueMin));
}

and the demo: http://jsfiddle.net/ambcwoLg/1/