System button with image

[graastein]

Is it possible to use a image on a system button?

An example is on the VI Package Manager (see attachment).

The picture moves a bit when I push the button, this is very nice. Is this possible to do in LabVIEW?

[Mads]

The VI Package Manager is off course made in LabVIEW so it is possible...

I could be dead wrong, but my guess is that there are two buttons there - one system style to make its color, highlighting etc. work as it should and then a second button that is just the icon...The latter button has had its entire graphics replaced by graphics with transparent edges. Then there is some event handling to make the system button go down together with the icon button when you press it...and vice versa.

You can edit a system button and put graphics on top of it, however for some stupid reason the graphics will then act as a blind spot for the button - clicking on it will not give you any response.

Mads

Is it possible to use a image on a system button?

An example is on the VI Package Manager (see attachment).

The picture moves a bit when I push the button, this is very nice. Is this possible to do in LabVIEW?

[Dirk J.]

You can just customize the control and paste your images.

Put a system boolean on your FP, then right click, point to 'advanced', then click 'customize'.

Click on the little wrench just below "view' in the control editor's menu, to change to "customize mode" (you start in 'edit mode' by default; the wrench changes to tweazers)

If you right click on the button now, and point to 'picture item', a menu expands with 6 items on it, corresponding to the various button states. Normal LV booleans only have 4 images (true state, false state, both transition states). The system button has two extra for two 'mouse-over' states.

You can select a picture item, copy it to the clipboard and edit it in whatever you use to edit icons, copy it and then paste it back into the image.

[Chris Davis]

You can edit a system button and put graphics on top of it, however for some stupid reason the graphics will then act as a blind spot for the button - clicking on it will not give you any response.

Mads

I think you are wrong here. I too thought that the buttons used in OpenG Commander and OpenG Builder would be useful in other places. So I opened the source code and copied them out to be used in other places. In reality they are just system buttons with graphics, and the graphics do not cause a blind spot on the button for clicking. You might want to check out this blog post? for even more information.

[graastein]

You can just customize the control and paste your images.

Put a system boolean on your FP, then right click, point to 'advanced', then click 'customize'.

Click on the little wrench just below "view' in the control editor's menu, to change to "customize mode" (you start in 'edit mode' by default; the wrench changes to tweazers)

If you right click on the button now, and point to 'picture item', a menu expands with 6 items on it, corresponding to the various button states. Normal LV booleans only have 4 images (true state, false state, both transition states). The system button has two extra for two 'mouse-over' states.

You can select a picture item, copy it to the clipboard and edit it in whatever you use to edit icons, copy it and then paste it back into the image.

Ok great

Does this become an "almost system button", or a true system button?

When I change the images would it not stay like this om mac, linux and the new Vista? They all get the XP system button?

[Dirk J.]

almost system...

Does this become an "almost system button", or a true system button?

When I change the images would it not stay like this om mac, linux and the new Vista? They all get the XP system button?

[graastein]

almost system...

Ok, but in the VI Package Manager, they got it even closer. I would really like to do it that way.

Does anyone know how to do that?

[Chris Davis]

Ok great

Does this become an "almost system button", or a true system button?

When I change the images would it not stay like this om mac, linux and the new Vista? They all get the XP system button?

Commander and Builder are linux, windows and mac compatable, I can't image that they would have built special buttons for each operating system. You could always check it by making (or coping from Commander or Builder) and checking on each platform you have to deal with.

Chris

[Dirk J.]

just one more note: if you edit your button, you can also choose to import a picture from file instead from clipboard.

this allows you to import e.g. PNG files, with transparancy properties.

(doesn't seem to work via photoshop + clipboard)

see attached VI, you'll get the idea.Download File:post-3523-1158942520.vi

[Mads]

Creating custom buttons has never been a problem - as others have described here its just a matter of importing images to replace the different states of the button...however that replaces the whole button image, what we want to accomplish here is to have a system button "background" that will automatically adjust its appearance to the system it is run on....BUT with an icon on it. I cannot see that anyone has described how to do that without using two buttons - one system and one customized. (If you just go into edit mode on a system control and paste the icon it will become a blind spot. ). It would be great if there was a more elegant way to do it.

Mads

I think you are wrong here. I too thought that the buttons used in OpenG Commander and OpenG Builder would be useful in other places. So I opened the source code and copied them out to be used in other places. In reality they are just system buttons with graphics, and the graphics do not cause a blind spot on the button for clicking. You might want to check out this blog post? for even more information.

[Dirk J.]

(If you just go into edit mode on a system control and paste the icon it will become a blind spot. ).

That's because you're just pasting an image into the control's background or, if you're unlucky, the foreground, and not into one of the states.

Just wondering, in the WindowsXP-world, do these kind of buttons actually exist?

So, buttons with an icon, which change style going from Luna to Silver to Classic?

[graastein]

That's because you're just pasting an image into the control's background or, if you're unlucky, the foreground, and not into one of the states.

Just wondering, in the WindowsXP-world, do these kind of buttons actually exist?

So, buttons with an icon, which change style going from Luna to Silver to Classic?

Yes it does exist. Internet Explorer is one example. (Stop button etc.)

[Chris Davis]

That's because you're just pasting an image into the control's background or, if you're unlucky, the foreground, and not into one of the states.

Just wondering, in the WindowsXP-world, do these kind of buttons actually exist?

So, buttons with an icon, which change style going from Luna to Silver to Classic?

I grabbed these buttons from OpenG builder to be used in my own project (imatation is the best form of flattery!) So here are three LabView buttons from the system pallette with icons embedded in the buttons that change with the Windows XP theme. Hopefully this clears up some confusion.

[Mads]

Yes, but how do you paste into one of the states without having to replace that state completely (loosing the system adaptive part of it)?

That's because you're just pasting an image into the control's background or, if you're unlucky, the foreground, and not into one of the states.

Just wondering, in the WindowsXP-world, do these kind of buttons actually exist?

So, buttons with an icon, which change style going from Luna to Silver to Classic?

[Dirk J.]

Yes, all of you are right of course, I was sleeping.

Not only IE, firefox does it too :-)

Ok, one last semi-smart remark: for windows apps you could use ActiveX controls, but for the multi platform implementation I don't know.

I don't have the OpenG builder available, so I can't comment on that. But saving these buttons as *.ctl is probably to easy a thought?

[Mads]

The buttons from OpenG Builder can be used as a template to create different system buttons with icons, however how did they make it in the first place? If you go into customization mode and right click on the icon you see that it is an item on its own with different icons for 4 different states...just like a button (as I first implied, although as separate controls), but it is not -because you cannot have a second control within the control, it's something else. Is this just some special button control from NI that was edited for Open G Builder, or can it be made from "scratch"?

Yes, all of you are right of course, I was sleeping.

Not only IE, firefox does it too :-)

Ok, one last semi-smart remark: for windows apps you could use ActiveX controls, but for the multi platform implementation I don't know.

I don't have the OpenG builder available, so I can't comment on that. But saving these buttons as *.ctl is probably to easy a thought?

[Chris Davis]

The buttons from OpenG Builder can be used as a template to create different system buttons with icons, however how did they make it in the first place? If you go into customization mode and right click on the icon you see that it is an item on its own with different icons for 4 different states...just like a button (as I first implied, although as separate controls), but it is not -because you cannot have a second control within the control, it's something else. Is this just some special button control from NI that was edited for Open G Builder, or can it be made from "scratch"?

The short answer is yes.

You have to import the picture file as a decal. Then go into "tweezers" mode to move the decal to where you want it to show up on the button. Then you will have a system button with a "clickable" picture on it. See attached LV7 control as proof. Pardon the picture quality, I'm a programmer not an artist.

Download File:post-2547-1158960979.ctl

[Michael Aivaliotis]

The short answer is yes.

You have to import the picture file as a decal. Then go into "tweezers" mode to move the decal to where you want it to show up on the button. Then you will have a system button with a "clickable" picture on it. See attached LV7 control as proof. Pardon the picture quality, I'm a programmer not an artist.

Chris, as I'm the guy who created the original "master" button, I think I can help out a little... I'm not going to give away the secret just yet. I find it interesting to see everyone trying to figure it out. You are so very close with the decal concept, however, as you can see, when you click on the image, it doesn't shift down and to the right as in VIPM. Keep trying

[graastein]

Chris, as I'm the guy who created the original "master" button, I think I can help out a little... I'm not going to give away the secret just yet. I find it interesting to see everyone trying to figure it out. You are so very close with the decal concept, however, as you can see, when you click on the image, it doesn't shift down and to the right as in VIPM. Keep trying

I searched for decal in help, and found you could import graphics to true and false state. :

Right-click the Boolean control or indicator, select Import Picture from Clipboard from the shortcut menu, and select among the following items:

False

[B Chavez]

I think the trick is to start with a boolean like the "Pushbutton," it has a 'part' called "light" that has four states (for each of the button states) that can be replaced with an icon or other image.

[Chris Davis]

Chris, as I'm the guy who created the original "master" button, I think I can help out a little... I'm not going to give away the secret just yet. I find it interesting to see everyone trying to figure it out. You are so very close with the decal concept, however, as you can see, when you click on the image, it doesn't shift down and to the right as in VIPM. Keep trying

Well I do like a challenge. At first I didn't care that the image didn't shift. But you threw down the guantlet... As others have mentioned you do start out with a new push button control. Open it in the control editor, then save it. Create another new control editor to put a system button into. Copy each picture item state from the system button to the push button. Then create a picture that you want to serve as part of your button, with a true and a false state. Copy to the clipboard the false state, then import it into the light part of the former push button. Import the true state into the true state of the light part of the push button and vola! you have a system control that also has an icon.

I wonder if you can change the icon part programattically thru scripting? :ninja:

Download File:post-2547-1158981245.ctl

[Michael Aivaliotis]

Congrats, you win!

[graastein]

Well I do like a challenge. At first I didn't care that the image didn't shift. But you threw down the guantlet... As others have mentioned you do start out with a new push button control. Open it in the control editor, then save it. Create another new control editor to put a system button into. Copy each picture item state from the system button to the push button. Then create a picture that you want to serve as part of your button, with a true and a false state. Copy to the clipboard the false state, then import it into the light part of the former push button. Import the true state into the true state of the light part of the push button and vola! you have a system control that also has an icon.

I wonder if you can change the icon part programattically thru scripting? :ninja:

Fantastic stuff

Just what I was looking for. You rock

[Dirk J.]

start out with a new push button control. Open it in the control editor, then save it. Create another new control editor to put a system button into. Copy each picture item state from the system button to the push button.

One thing I don't understand: the system boolean has 6 states (also for hovering over it), but the pushbutton only has four. How do you add these two extra states to the push button?

[Mads]

Great, thanks for the effort!

It is good to see that it required the trick of using a button that already had an extra part to replace...if it had been straightforward it would have been more irritating to have missed it...

M

Well I do like a challenge. At first I didn't care that the image didn't shift. But you threw down the guantlet... As others have mentioned you do start out with a new push button control. Open it in the control editor, then save it. Create another new control editor to put a system button into. Copy each picture item state from the system button to the push button. Then create a picture that you want to serve as part of your button, with a true and a false state. Copy to the clipboard the false state, then import it into the light part of the former push button. Import the true state into the true state of the light part of the push button and vola! you have a system control that also has an icon.

I wonder if you can change the icon part programattically thru scripting? :ninja: