Google maps-like Indicator

[ErikTheRed]

I am trying to create a custom indicator (currently a boolean) that approximates the blue ring with central dot that exists in Google maps (particularly the mobile version, see image below) to show uncertainty. Is there a way to create the indicator so that I can change the size of the outer ring, while keeping the dot in the middle the same size?

The google maps circle:

The desired indicator:

Other ways to approximate this behavior that I've thought of are to have two different sized rings for the true and false cases on the boolean indicator that i'm moving around... if there are ways to do more than two cases for an indicator, I could use this instead.

Additionally, I thought of drawing the "blur" around the indicator on a background image, but this seems like it'd be too slow (as this is happening in real time). Or of potentially having two separate indicators that I move around (though this would also be slower).

In a related problem, if I'm working with these indicators over an image, is there a way to cut off any piece of the indicator that goes outside of the image?

i.e.

Erik

[mje]

You can use the image functions and associated indicator if you're willing to create all the drawing logic. Beware though that images in LabVIEW can get awfully slow if they're more than icon sized and you try to manipulate them quickly (tracking mouse movements, and animations, or anything similar) . Not sure if you could do any blurring or anti-aliasing without a lot of effort though.

[PJM_labview]

Like mje says, you can use a transparent picture control and just draw the circles in it. For such simple thing the performance will be fine. Now, if you want to implement the "blur" (aka anti-alias) this will definitively requires a lot of effort (and result in performance penalty but it should still be fast enough).

Note: If you thing NI should have the anti-alias native in the picture control, go vote for this idea: Add Antialias support in picture control

[jdunham]

If you want to draw with good performance, the LabVIEW 3D Picture control uses OpenGL which should be using your machine's GPU. The learning curve looks a bit intimidating, but I think once you get going it won't be too bad.

[ErikTheRed]

Like mje says, you can use a transparent picture control and just draw the circles in it. For such simple thing the performance will be fine. Now, if you want to implement the "blur" (aka anti-alias) this will definitively requires a lot of effort (and result in performance penalty but it should still be fast enough).

Note: If you thing NI should have the anti-alias native in the picture control, go vote for this idea: Add Antialias support in picture control

I'm not exactly sure where the transparency can be set in the picture control, but I'll check it out. That might be my best option, though everything I add keeps slowing it down!

If you want to draw with good performance, the LabVIEW 3D Picture control uses OpenGL which should be using your machine's GPU. The learning curve looks a bit intimidating, but I think once you get going it won't be too bad.

I took a short look and was intimidated! Do you have any favorite/recommended tutorials to get me started?

Thanks for the advice!

Edited July 18, 2011 by ErikTheRed

[jdunham]

I took a short look and was intimidated! Do you have any favorite/recommended tutorials to get me started?

Nothing that you can't Google as well as I can. This one does look useful: https://decibel.ni.com/content/docs/DOC-15025. You'll want search the dark side forums as well.

Like you, I'm much more familiar with the 2D picture control, but this really blows it out of the water, which I think is one of the reasons the 2D control doesn't seem to get a lot of love from NI in terms of new features.

[ErikTheRed]

Nothing that you can't Google as well as I can. This one does look useful: https://decibel.ni.c.../docs/DOC-15025. You'll want search the dark side forums as well.

Like you, I'm much more familiar with the 2D picture control, but this really blows it out of the water, which I think is one of the reasons the 2D control doesn't seem to get a lot of love from NI in terms of new features.

Thanks much, I'll take a look and see if I can post an update touting my success .

[PJM_labview]

I'm not exactly sure where the transparency can be set in the picture control, but I'll check it out. That might be my best option, though everything I add keeps slowing it down!

Just use the "set color" tool and "paint" it transparent.

About performance, I am pretty positive that if you have no anti-alias that you should not notice any performance issues. Just make sure the you are redrawing only what needs to and only when need to. Additionally, defer panel update could be used if needed.

PJM

[ErikTheRed]

Just use the "set color" tool and "paint" it transparent.

About performance, I am pretty positive that if you have no anti-alias that you should not notice any performance issues. Just make sure the you are redrawing only what needs to and only when need to. Additionally, defer panel update could be used if needed.

PJM

Thanks, I had no idea what that 'T' was. I'm utilizing the panel updates, but there's a fair amount of image transformation and updating to reflect mouse pressing and other updates to the system. I'll try it out and see what the performance is like .

[PJM_labview]

Thanks, I had no idea what that 'T' was. I'm utilizing the panel updates, but there's a fair amount of image transformation and updating to reflect mouse pressing and other updates to the system. I'll try it out and see what the performance is like .

Use another "floating" picture control just to do that "Google map like indicator" and move the transparent floating picture control on top of your other control as needed.

PJM

[Francois Normandin]

You can also take a look at BitMan by vugie. It is downloadable with VIPM directly from the LabVIEW Tools Network.

[ErikTheRed]

Use another "floating" picture control just to do that "Google map like indicator" and move the transparent floating picture control on top of your other control as needed.

PJM

I would like to make the image below the transparent floating picture control still clickable... Will the overlapping of controls preclude an event from being generated when I click on the image? Or can I make picture control effectively invisible and non-interact-able with a property node?

I will potentially be using more than one "accuracy circle", so my thought was to overlay an equally sized transparent picture control on top of the current picture control and update that as needed with a multitude of circles... however, a few floating picture controls might be more efficient.

Erik

[Tim_S]

I would like to make the image below the transparent floating picture control still clickable... Will the overlapping of controls preclude an event from being generated when I click on the image? Or can I make picture control effectively invisible and non-interact-able with a property node?

The control on top should receive the click event and not the one underneath.

Tim

[ErikTheRed]

The control on top should receive the click event and not the one underneath.

Tim

Okay, so really I will have to have a singular transparent picture indicator that i can transfer my current mouse gestures onto. However, I don't know how to get the behavior of 'Graphics & Sound\Picture Functions\Draw Grayed Out Rect.vi' (i.e. the partial transparency) for a circle...

I'm looking for documentation for the opcodes... 15 appears to be 'greyed out rectangle'...

Thanks,

Erik

[PJM_labview]

Okay, so really I will have to have a singular transparent picture indicator that i can transfer my current mouse gestures onto. However, I don't know how to get the behavior of 'Graphics & Sound\Picture Functions\Draw Grayed Out Rect.vi' (i.e. the partial transparency) for a circle...

I'm looking for documentation for the opcodes... 15 appears to be 'greyed out rectangle'...

Thanks,

Erik

Ah, I did not notice that the circle was filled with alpha (partially transparent) pixels. This is going to be significantly harder to do. As far as I know, except for "draw grayed out rectangle", you can not have alpha pixel in a picture control. You can simulate this behavior though by:

1. preserving alpha information in your image once loaded into LV (LV tend to strip this).
2. inspect the pixel behind the alpha pixels and blend them with the alpha one yourself.

Doing the alpha yourself will works fine, but you will need to invest some time to get it going.

Based on all I (now) know of your requirements, I will recommend another approach. Have a set of different sized circle (use png images to have alpha pixel) and load each png image in a pic ring (your alpha pixel will be preserved). You can then select the right size and move the pic ring as needed. This would be the quickest and most efficient approach. What you loose in flexibility (only a few sized circle available) you gain in performance and coding time.

PJM

[daal]

Please vote for this idea to add support to Alpha channel in picture control

http://forums.ni.com...ol/idi-p/917415

Dany

[MikaelH]

Hi Guys

I think you have forgotten something...anything can be done in LabVIEW.

AlphaCircleInSydney.vi

BTW, right now I'm developing with my colleges (in OO training purpose) an on-line Multi Player battle game using LabVIEW and the awesome Picture Control.

We're thinking of releasing the source code here on LAVA when we're done.

Cheers,

Mike

[ErikTheRed]

Ah, I did not notice that the circle was filled with alpha (partially transparent) pixels. This is going to be significantly harder to do. As far as I know, except for "draw grayed out rectangle", you can not have alpha pixel in a picture control. You can simulate this behavior though by:

1. preserving alpha information in your image once loaded into LV (LV tend to strip this).
2. inspect the pixel behind the alpha pixels and blend them with the alpha one yourself.

Doing the alpha yourself will works fine, but you will need to invest some time to get it going.

Based on all I (now) know of your requirements, I will recommend another approach. Have a set of different sized circle (use png images to have alpha pixel) and load each png image in a pic ring (your alpha pixel will be preserved). You can then select the right size and move the pic ring as needed. This would be the quickest and most efficient approach. What you loose in flexibility (only a few sized circle available) you gain in performance and coding time.

PJM

Thanks so much for the advice. This seems like a (near) perfect fit for what I want to do. I'm sorry that it took so long to detail all of the requirements, but thanks for sticking with me!

Please vote for this idea to add support to Alpha channel in picture control

http://forums.ni.com...ol/idi-p/917415

Dany

Done.

[PJM_labview]

Hi Guys

I think you have forgotten something...anything can be done in LabVIEW.

AlphaCircleInSydney.vi

BTW, right now I'm developing with my colleges (in OO training purpose) an on-line Multi Player battle game using LabVIEW and the awesome Picture Control.

We're thinking of releasing the source code here on LAVA when we're done.

Cheers,

Mike

Mike,

Nope I did not forgot anything this time

This is essentially the manual alpha blending method I mention earlier. I have some VIs that do something similar (generic alpha blending). My method is somewhat different. I add the alpha data in the image [ ] in the form AlphaRGB and then I have a modified "Draw flatten pixmap (with alpha).vi" that know how to handle the transparency (using the same trick that you have of inspecting the image behind the alpha pixels).

I do agree that the picture control is awesome and that everything can be done using it. Now, if NI would ever add hardware acceleration support in rendering image in the 2d picture control, this would make the picture control even more awesome.

Cheers.

[MikaelH]

er. I have some VIs that do something similar (generic alpha blending). My method is somewhat different. I add the alpha data in the image [ ] in the form AlphaRGB and then I have a modified "Draw flatten pixmap (with alpha).vi" that know how to handle the transparency (using the same trick that you have of inspecting the image behind the alpha pixels).

And I guess you've packed this in a nice lvclass :-)

For my UML modeller, I created a dedicated Graphics class, like you find in Java to handle all my drawing, but I didn't add the Alpha channel since I didn't need it then.

Cheers

[ErikTheRed]

Does anyone have a solution for the above behavior given that i'm using the ring picture control?

(Besides playing with the order and placing some sort of background image that stencils the picture control out of the front panel?)

Thanks for the continued help

Erik

[PJM_labview]

And I guess you've packed this in a nice lvclass :-)

Actually, I don't. This is one of my pet peeve about using class in this instance because the class "pkg" become completely incompatible with existing native NI image manipulation VIs. Case in point: the icon editor has some interesting code (it use its own set of classes), Vugie also has a great image manipulation tool (but this is using its own class). Now because of this it is impossible to go a grab one reuse tool from one toolkit to extend another. You have to get all or nothing (or you have to be willing to reconvert all the stuff that you want out of the classes [and this can require substantial amount of work]).

Does anyone have a solution for the above behavior given that i'm using the ring picture control?

(Besides playing with the order and placing some sort of background image that stencils the picture control out of the front panel?)

Thanks for the continued help

Erik

I am afraid that I am not following. What is the problem exactly? Is it an issue with the circle having different center?

PJM