Forums > MaxMSP

First version of max object for rotating images — photorealistic knobs

February 26, 2012 | 9:08 pm

Attached is my first attempt at creating a max object that can rotate an image and can therefore be used to rotate a knob given a single image. I used the jsui_imagestuff.js example for guidance.

I am not a graphic expert. The knob is a bit wobbly because the photo image I snarfed from Moog’s website was not originally taken directly from above. I assume that this could be fixed with a little photoshop perspective transformation.

The knob can accept a message called scale that both specifies the min/max range of the knob as well as min/max output values to be produced as you turn it. You can also feed numbers into it to make it rotate.

The only thing I don’t know how to do is to make the background transparent so you can place the knob on a panel properly. I’m hoping that someone with opengl chops can tell me how to fix this.

February 26, 2012 | 9:12 pm

Dit you take a look at the [pictctrl] object. This object was made for this purpose I think.

February 26, 2012 | 9:14 pm

That control requires you to create multiple images which is a very time consuming activity. With my object, you can just extract a knob image from a photo and use it. That’s why I created it.

February 26, 2012 | 9:22 pm

Sorry for not being able to answer your question. But maybe you could check this out for bringing down some of the time consuming activity as you named it.

February 26, 2012 | 9:28 pm

I think you’re perhaps not understanding the point.
The dials in that example are not photorealistic.

With this object, you can take a single image of a knob that you can get from a photograph of a synth front panel or guitar pedal, etc, and just start using it….nothing else to do.

Once you’ve extracted the knob from the photo, you can be up and running with this object in about 5 seconds flat!

February 27, 2012 | 12:39 am

I like the idea but have some troubles with this version:

  • I have to vertically mirror the original image. Therefore images with shadows have the shadow on the wrong side.
  • I do not find the correct orientation of the image. Where should I put the zero position of the knob?
  • Can the background be transparent?
    (I’ve never worked with the [jsui] object)
February 27, 2012 | 3:15 am

I’m not sure why you have to mirror the image but in any case the idea is predicated on the notion that it’s possible to extract a clean picture of the item.

The orientation issue was interesting. I just used the rotation mechanism in the example, without changing it. The initial rotation value is zero. So wherever the knob is pointing in the extracted image will be the zero value.

Clockwise rotations are negative. Therefore the minimum value is a positive number and the maximum value will be a negative value. I suppose I should just multiply by -1.0 to reverse these to make it clearer. I’ll do that in the next update.

So you have to set the args to the ‘scale’ message to suit. Note that the second outlet shows the actual rotation value so you can look at the values coming out as you rotate the knob and then figure out by trial and error by how much you need to adjust the first two values to get the desired maximum rotation.

As for the transparent issue, I’m hoping that someone with more graphics experience can show me how to do that.

February 27, 2012 | 7:52 am

I’ll try this out when I get to my computer.

Regarding your issue with [pictctrl] image stitching, did you try Knobman ( yet? You can create knobs using tools or use images, meaning you could have ‘photorealistic’ knobs.

February 27, 2012 | 10:15 am

Also, short of getting really high quality and perfectly level images of Moog knobs, you might be better off just working on your own image. This took me about 5 minutes in Knobman.


  1. moogesque.png


February 27, 2012 | 12:07 pm

like dickmedd, i think that this approach is rarely going to work, sorry

all the shadows and lighting/reflection will get rotated with the image, which will look weird.

knobman is great. I have done some with povray and also photoshop before. I want to learn Blender to do it in the future.

if you still want to have a transparent background, you need to use mgraphics, not opengl. See my scripts here…


February 27, 2012 | 12:39 pm

Knobman looks handy but I am on a Mac and the online Knobman lets me put in 50 steps but makes only 31. Shadow ruins the image. I’ll stick to Photoshop or Fireworks.

Well, I managed to use this JavaScript method. Mirroring the image was nonsense, sorry. I just have to scale 0 -270 0 127 and it works.

It is not usable for knobs with highlights and shadows because they would also turn. And for me it is not usable without transparency. I do not know the [jsui] object and if it’s background can be transparent or not.

February 27, 2012 | 12:58 pm

Hey everyone, this was just the first attempt!

For knobs that have highlights and shadows, it may often be feasible to get rid of those with Photoshop, I’ve certainly had some success with that in the past for other projects and I’m no graphic expert.

I agree completely about the transparency issue. I don’t know how to do that. I would have assumed that this is something that can be handled easily with opengl and I am hoping that someone on this forum with opengl experience will know instantly how to fix that particular issue.

February 27, 2012 | 12:58 pm

@Peter Ostry: If you’re a Mac user, I can recommend Wine Bottler. It runs flawlessly and is pretty handy. I don’t have any of the issues that you’ve described.

February 27, 2012 | 1:00 pm

@oli I did see those controls before but again, I really want to do the photorealistic stuff — there are lots of pictures of synths and guitar pedals online that have been taken "in the lab" with good lighting so they don’t have shadows and highlights, so I think it can be useful if one wants to make a Max based interface that looks like an existing physical box.

February 27, 2012 | 1:14 pm

Ah, I just looked up mgraphics and saw that it’s a Max 6 feature.
Unfortunately, until I’m comfortable that Max 6 is completely stable, I’m still developing client solutions with 5.1.9

February 27, 2012 | 8:40 pm

My partner just took a look at the opengl stuff — as far as we can tell, the problem is that the jsui container itself does not support transparency. So even though we could do things like change the color of the transparent parts of the image, there’s still an underlying rectangle that’s being drawn that we have no control over.


February 28, 2012 | 3:23 am

well i use photoshop and pictcontrol myself, but i was the one who
recently suggested to make a little object or jsui for rotating images
(interpolated) as an alternative to offline rendering.

of course it is true that dhj´s solution wont work for lighting effects
and/or taking photos, but for simple knob pictures it is perfect and
a true alternative somewhere between picturecontrol in dialmode
and using realtime vectorgraphics in jit.lcd.
only the lack of transparency is something which restricts it currently
to having plain backgrounds in your GUI.

February 28, 2012 | 3:27 am

@oli: i never really got into povray. is there an example for knobs somewhere?
(use a surface, put a skin on to it, have somelight, rotate and copy it to my needs?)

February 28, 2012 | 10:05 am
Viewing 19 posts - 1 through 19 (of 19 total)

Forums > MaxMSP