Recommendations? Create Circular/Radial "progress bar" to emulate Magic Eye Tuner like vintage radio

48 views
Skip to first unread message

bob murphy

unread,
Mar 2, 2017, 8:59:07 PM3/2/17
to pi3d
I'm trying to emulate a 1940's-style radio tuning dial for a project. I'm a total noob at graphical/3D programming, although I've done some coding in python. I did manage to cobble together a demo of the basic dial using pi3d as a proof of concept. Here's a very brief video on that

I'd also like to create a "Magic Eye" radio tuner image with pi3d,  layered over or embedded on the dial. The Magic Eye (or "cat's eye") would have two bi-lateral circular bars growing towards each other to indicate radio signal strength, as a visual tuning aid. 

Here are examples of two patterns for the Magic Eye, taken from the Radio Museum web site:



Here's an example of the real thing. The green circle at the top of the black dial shows a properly tuned station.



I've spent several hours doing google searches and I'm still stuck on how to start. I'm looking for suggestions on how to achieve this. I am NOT looking for someone to "code the solution" for me! I was just hoping someone might point me at example code that may give me some ideas that might work with modification, or a word description of an approach. 

Many thanks in advance for any help you can offer....

Shando

unread,
Mar 2, 2017, 11:59:39 PM3/2/17
to pi3d
Hi Bob,

A Python example of drawing a piece of a pie chart can be found here (it uses the PIL and AGGDRAW Modules):


You could then redraw the circle, the piece of pie and the centre image every time the size of the size of the piece of pie changes

Another option would be to create multiple sprites and change the sprite as required (like how cartoons work):


Personally, assuming you do NOT want a 3D image, the latter option would be the easiest (though you would need to create extra sprites to make it look like a smooth transition).

Hope this helps

Shando

Paddy

unread,
Mar 3, 2017, 4:46:45 AM3/3/17
to pi3d
Bob, as Shando points out, the 'pure' way would be to redraw the pie slice each time the signal changed using PIL, you could even blur it a little to give a valve glow effect. However if you want to animate the magic eye (flickering a bit say) then the time to regenerate the image might be significant and stop other parts of your display running smoothly, in which case the multiple sprite system would be better.

Another alternative that might work reasonably, depending on the range of angles you want your eye to cover, would be to have a sprite with the dark section in front of a light circle and scale it in the x direction so that it occluded a smaller and smaller amount. The disadvantage would be that the slice would become more elliptical as it shrank and light would start to show at the bottom.

Finally, the best solution if you can stick to the first design of magic eye with only one dark section, you could have two layers that rotated in opposite directions for each side of your eye, as below. The advantage of this is that the python processing load would be very small with the majority of calculations being done by the GPU.



PS I'm not sure about the aggdraw module used in the pipermail example. I think the standard PIL method to use now would be along the lines of

from PIL import Image, ImageDraw, ImageFilter
im
= Image.new('RGBA', (100,100))
draw
= ImageDraw.Draw(im) #this seem a convoluted structure to me
draw
.pieslice([10, 10, 90, 90], 120, 60, (200, 255, 160))
im
= im.filter(ImageFilter.BLUR) #if you want to blur it! (why not in place like draw?)

and in pi3d you can pass im directly to the Texture constructor (or to ImageSprite, I think)

bob murphy

unread,
Mar 3, 2017, 2:48:30 PM3/3/17
to pi3d

Shando/Paddy-

These are excellent suggestions, just the guidance I was looking for. 

Thank you!

Reply all
Reply to author
Forward
0 new messages