user interface from picture

[bimbim]

Hello,

I'd like to know how to load a picture in my front panel (from a file) and use it as a user interface where we could click and recognize the area pressed using the coordinates of the pixel. This way I could affect to areas of this picture different actions.

Is it better to do it this way or to load a picture and buttons separatly?

As I'd like to build and change the user interface by mean of a simple text file, I think the use of just a picture representing the user interface should be easier.

Thank you in advance for your help.

Bim

[tst]

You're on to it - using pictures is currently the most versatile way to get a dynamic user interface.

LV has picture VIs as standard (look in the Graphics & Sound palette), which allow you to load the picture from a file into the front panel and to manipulate it (add\remove controls). You can then use an event structure with a Mouse Down event for the picture indicator to detect clicks and the coordinates of those clicks. The main problem is with the logic for deciding what to do with each click, not having controls hiding each other and so on.

You can start by looking here for some more about this. I'm sure Ben will jump in with a few good tips of his own.

[Ben]

" I'm sure Ben will jump in with a few good tips of his own"

Stay with rectangular objects as your dynamics. Backgrounds can be anything you want.

Hide the labels and captions if you are grabbing images. These will complicate your "sweet spot" math and force you to deal with tranparency.

If you have questions, whip up an example that show what you have and note what you need.

We will advise as required.

Ben

[bimbim]

Thank you for these tips, but I'd like to be able to load an UI from a text file (and to be able to change it), This text file contains the picture to load and the areas corresponding to keys. Every area, defined like this in the picture : x,y,w,h (upper left corner position, width, height), will be sensitive to a click and generate an action.
Is it possible by knowing the click position (pixel touched) relative to the picture position on the screen and act if it's in a specific area?

[bimbim]

Thank you for these tips, but I'd like to be able to load an UI from a text file (and to be able to change it), This text file contains the picture to load and the areas corresponding to keys. Every area, defined like this in the picture : x,y,w,h (upper left corner position, width, height), will be sensitive to a click and generate an action.
Is it possible by knowing the click position (pixel touched) relative to the picture position on the screen and act if it's in a specific area?

[tst]

Like I said, you can use an event structure with a Mouse Down event. It will return the coords of your click, and the code will only execute when you click. You should look for event structure tutorials on this site.
BTW, what do you mean "This text file contains the picture"? Are you flattening a picture to a string?
You may wish to save the picture as a standard graphics format - LV can read BMP, PNG and JPG. Of these, you probably want one of the first two.
You don't need to calculate the position of the picture relative to the FP, but if you want to, you can use the Position and Bounds properties and add or substract as needed.

[Ben]

Yes,

Start by looking at all of the links that are included in the link tst gave you.

The example that was posted under the "Obfuse code" challenge tracks the area associated with the object as it moves.

As tst mentioned there is a "mouse down" event for the picture control tath will tell you where the user clicked. A little math lets you compare the click location with the object "sweet spot" to determine what has been clicked.

Ben

[bimbim]

First of all thank you for your advices.
I've seen the "Obfuse" example, it seems to be interesting but I'd not enought time to find what I wanted within.
In fact, I'd like a very very basic example. If someone could provide me an example using the picture I attached, which could load the picture in the front panel and return the coordinate of the pixel clicked (between 0;0 and 220;225 =size of picture) in order to (considering I know that the yellow area is defined like this 118;127 (x;y) 57;95 (w;h)and so on for the other color areas)know which color I've clicked.

This basic example could help me to configure my user interface by providing the path of the picture to use and the areas definition corresponding to keys in a simple text file.

I hope you will help me, even if you've already done. I'd be grateful to have this basic example to start building my application.

I'm really looking forward to your quick answering.
Thank you in advance.

Bim

[tst]

Have a look at the attached.
It loads a JPEG file into an indicator and then detects the click.
Placing the event structure in a while loop will allow you to detect all clicks (you may want to read about events).
Contrary to what I said before, the event structure returns the coords as VI coords, so to get the right ones, you do need to subtract. I used a property node to find the top left corner of the picture control. Note that this is affected by all visual elements (label, caption, border) which is why I removed the label. The indicator shows where you clicked in the picture (horizontal). You can do the same for the vertical, load the numbers from the text file and compare the result to the file to see if you clicked right.

[bimbim]

Thank you tst!
It is exactly what I wanted. It's limited to jpeg pics and not scalable with the picture size but it's the perfect element to build my interface(s)from jpeg pics!

Thank you again.
Best regards.

Bim