I would like to overlay a graphic on top of an array.

[etsellers]

I have the framework for a front panel control that I would like to use.  The easiest way for me to have a scaleable soloution would be to have a large, 2D boolean control array that I can simply resize for different projects.

Each boolean control needs to have a different label, so that is making it very hard to just use a simple boolean array.  I have come pretty close to a solution, but I just can't get it working due to the front panel ordering.

What I would like to do, ideally, is be able to place a transparant overlay on TOP of the the array, sized so that each element in the boolean array has a text label on top.  When I need to use a different sized array, I can just put a different image in and not have to mess with the underlying code.

I've tried a few things, and everythig ALMOST works.  The overlay looks great on top of the boolean buttons, but the image is on top of the array and blocks the operation of the array control.  If I put the array on top of the transparant graphic, the array hides the graphic.

I really need to be able to either click through the graphic as if it is not there except for decoration, or make the array control transparant.  The boolean buttons already have a transparant overlay on them already.  If I put transparant buttons alone on top of the overlay, it works great, but I can't put the buttons into an array and still have the transparancy working.

Is there some way to make the graphic invisible to the mouse and allow me to click buttons underneath?  I'm getting pretty close to just printing out my transparant graphic onto transparancy paper and taping it on top of the monitor...

[Darin.K]

Have you considered using a cluster instead, or a cluster of clusters for 2-D?  Each button can have its own label and when the time comes for reading the values you can always use Cluster->Array to get back a boolean array.  It is still a pain, but perhaps less so.  

[etsellers]

Thanks for taking the time to offer a suggestion, but I've already tried that method before. 

Using clusters of buttons is what I was using for the first few projects, but I've got a LOT of buttons that need to be configured.  I really need somthing that is a lot easier to modify for different configurations, and it doesn't get much easier than dragging the corner of the array box to add or remove buttons!

It's really painful when you have hundreds of buttons and realize that you want to change the "false" color on them or something like that, but it's no problem at all in an array.

The most frustrating part of the whole situation is that I could just tape a transparancy over the screen to get the effect I'm looking for, but of course, the boss isn't going to go for that...

You would think that there has to be some way to make a graphic invisible to the mouse.

[RavensFan · Accepted solution]

Do you need the label to be on top of the button, or can it be in the space above the button?

You can color the array background to be transparent.   This will allow you to put something behind the array and have it show through.  Here is a quick sample in LV8.6.  One issue I had was how to create space above the button.  An empty but visible label doesn't show so no space is created.  But I created a label for the button with a simple period, then set the font to be as small as possible.  Now the space is created for the other text, but the period for the button's label doesn't show.

In the background is a simple free label.  But for a truly programmatic solution, you could create a string array using transparent backgrounds and borders, and set the size of the elements so that they will line up nicely with your boolean array laying on top.

[RavensFan]

Another possibility that would allow you to put the labels on top of the buttons.  Create 3 layers.  On the bottom layer, create a boolean array of indicators.  Middle layer, create a string array where everything thing is transparent but the text you want for the labels.  Top layer, put a boolean array of controls, but everything is transparent.  Now when you click on a button, you will actually be clicking on the top transparent layer.  Detect the value change and programmatically write the change to the indicator array.  To the user, it will seem like they are clicking on the buttons just fine.

If the user has the ability to change the indicies of the array, you will need to programmatically change the indices of the string array and the bottom indicator array as well.

[Ben]

---

etsellers wrote:

I have the framework for a front panel control that I would like to use.  The easiest way for me to have a scaleable soloution would be to have a large, 2D boolean control array that I can simply resize for different projects.

Each boolean control needs to have a different label, so that is making it very hard to just use a simple boolean array.  I have come pretty close to a solution, but I just can't get it working due to the front panel ordering.

What I would like to do, ideally, is be able to place a transparant overlay on TOP of the the array, sized so that each element in the boolean array has a text label on top.  When I need to use a different sized array, I can just put a different image in and not have to mess with the underlying code.

I've tried a few things, and everythig ALMOST works.  The overlay looks great on top of the boolean buttons, but the image is on top of the array and blocks the operation of the array control.  If I put the array on top of the transparant graphic, the array hides the graphic.

I really need to be able to either click through the graphic as if it is not there except for decoration, or make the array control transparant.  The boolean buttons already have a transparant overlay on them already.  If I put transparant buttons alone on top of the overlay, it works great, but I can't put the buttons into an array and still have the transparancy working.

Is there some way to make the graphic invisible to the mouse and allow me to click buttons underneath?  I'm getting pretty close to just printing out my transparant graphic onto transparancy paper and taping it on top of the monitor...

---

"And now for something completly different...."

You have described a picture control!

Take a look at the code that was part of the CC & Friends project. THe GUI looks like this;

 

In that app we did not know at development time, what the emoticons the end user would include in their collection so a picture control gave us the option to "build the GUI" at run time. When that code loads up, it develops the image the user will see and keeps track of where each emoticon is located in the picture. When a user clicks on an image the coordinates of the click within the picture are used to find which emoticon the user selected.

So maybe you should concider implementing your GUI using a picture control.

Ben

[falkpl]

I like the idea of using the array of clusters.  Here you can make a single cluster with your multiple levele of overlays ie, a boolean with a transparent string over it can even overlay a picture ring for changing the top level overlay graphics as one additional layer.  Make this an indicator, in the event structure handle the "mouse down?" event and get the array ref property node->ArrElement.Buonds and mod this by the mouse coordinate this gives the index of the element clicked on (you could also add the start index to this if you plan on having your array scrollable.  Now simply update this array value (ie invert the boolean and change the text layer as desired.

[falkpl]

See attached example.  Notice that the string is disabled in the cluster so it wont gein focus when clicking (never got why one can click on a string indicator and get a cursor but not be able to type in it?)

[Ben]

---

falkpl wrote:

... why one can click on a string indicator and get a cursor but not be able to type in it...

---

Nor do I but it sure is a life saver when I want to copy an error code out of the FP of a running VI so I can paste it into a bug report.

Ben

[etsellers]

Thanks, Raven Fan had my solution.

I was trying to make the array transparant after populating it, but wasn't able to until I tried it on an empty array.  This works perfectly for my implementation.

There were a lot of good suggestions in the thread, and I'd already considered some of them earlier, but I was looking for a solution that could be adapted to a new product with very minimal configuration.  Using this array configuration, I can adapt the front panel control for a new product and have it working in about five minutes.

Thanks to everyone for the help!