UI Interest Group Documents

cancel
Showing results for 
Search instead for 
Did you mean: 

Custom Button Control

In the spirit of sharing, I thought I'd upload this sample Boolean control I created.

It's drawn in Microsoft Powerpoint 2007, and includes a number of different styles to represent normal, highlight and depressed.

BooleanButton.png

I hope this might prove inspirational to someone.

Update: The images were requested as a LabVIEW control (.ctl) file. I had to remove the shadows to get this to work with the alpha mask, see new attachments.

(The vi is simply a blank vi with the control on the front panel, and the vi is saved in Run Mode. Hover the mouse over the control to see the highlight state, then click to see the depressed state)

Edit: A LabVIEW 8.0 version of the control is now included

Thoric

Thoric (CLA, CLED, CTD and LabVIEW Champion)


Comments
jkurtw
NI Employee

Very nice!

Do you have a .ctl file already created that you could post?

Active Participant Thoric Active Participant
Active Participant

Hi Kurt,

Thanks!

Unfortunately this is just a powerpoint image at present. I'm attempting to import the three states into a boolean button, but I'm struggling with the alpha channel at the minute. I could relatively easily create this as a control that would work on white backgrounds, but I'd much prefer to have the shadowing effect around the button in the alpha channel so that it works well on any background. Corel PhotoPaint is giving me jip!

Update: If I take the shadows off I can do this, but perhaps they're not as professional looking now. Document update.

Thoric (CLA, CLED, CTD and LabVIEW Champion)


Member joshuatree
Member

Can you post an 8.5 version please?

Active Participant Thoric Active Participant
Active Participant

I've created an 8.0 version, see above

Thoric (CLA, CLED, CTD and LabVIEW Champion)


Member joshuatree
Member

WooHoo!  Thank you.

I downloaded and was playing with this a few weeks ago with 8.6, but had to uninstall and revert back to 8.5 b/c of a nasty report toolkit incompatability.

Your usage of the action buttons in ppt was very slick!  i never would have thought to go there....   good work!

Active Participant Thoric Active Participant
Active Participant

Your welcome Joshu,

Also note that as of LV8.0, System style buttons adopt the full 6 visible states of Windows buttons rather than just the 4 of a standard LabVIEW action button.

The standard 6 visible images can be defined as:

  • Normal (no mouse), Mouse Enter, Mouse Down

for each of

  • Un-depressed and Depressed

Currently my custom control has only three images, and I've duplicated some of them for the different states, but with some imagination you can create a very interesting button with all sorts of graphical changes occuring when the mouse hovers over it/clicks it etc.

Thoric (CLA, CLED, CTD and LabVIEW Champion)


Active Participant ColeTrain
Active Participant

Thoric,

Big kudos for making something that looks sharp.  I would love to play around with this a bit myself, but I am missing some intermediate step on how to take the image of the different states from powerpoint to put them into a control.  Anything you could point me to or point out that could help?  Thanks.

ColeR
Field Engineer
Active Participant Thoric Active Participant
Active Participant

Hi ColeTrain,

There are a number of guides around for creating custom controls. Here a rough guide on how I did mine:

1. Creating useful images in PowerPoint

My example Powerpoint file above contains three images for three different states of our cusotm button control - normal (un-depressed), hover (mouse over), depressed (mouse down).

1. Load the file, and notice the subtly different internal shadow between the normal and depressed images to represent a prominent and depressed button.
2. Convert these to bitmaps (SaveAs->OtherFormats->png)
3. Open the image in a picture editor (I use Corel Photo-Paint)
4. Chop the three images out and save them as individual pictures (such as normal.png, hover.png and depressed.png) - Ensure they're all the same size otherwise they won't scale the same in LabVIEW.

2. Creating a Custom Action (boolean) Button Control
There are two styles of action button in LabVIEW - 4 state and 6 state.

The 4-state button has the following states:
a. Normal
b. Mouse Hover
c. Mouse Hover + Depressed (mouse click)
d. Depressed

The 6-state button mimicks the Windows style can be defined as follows:
a. Normal (no mouse), mouse enter (hover), mouse down
for each of
b. Un-depressed and Depressed

1. For a 4-state button, place a standard LabVIEW OK button in an empty new control (File > New... > Custom Control).

OR

1. For a 6-state button use the LabVIEW System Controls OK button in an empty new control (File > New... > Custom Control).

2. Use CTRL+M to change to Customise mode

3. Don't worry about the "OK" text, we don't need it and can hide it by right-clicking the control and de-selecting Visible Items > Boolen text. Do the same for the label.

4. You'll be left with an empty button. Select the button and then select Resize > Select Width and Height from the icons. Enter the width and height of your png images into the width and height fields and select apply.

5. Now we need to import our images, so select Edit > Import Picture to Clipboard. Select our normal.png.

6. Right click the button and select Import Picture from Clipboard

7. This is one of our six images modified. Switch to the third image by right-clicking the button and selecting Picture Item > (Select the third image)

8. Again, use Import Picture from Clipboard.

9. In a similar way, set the second, forth and sixth picture items to the depressed.png image.

10. Lastly, set the fifth picture item to the hover.png image.

11. Use CTRL+M again to return to Edit mode.

12. Use File > Save to save the custom control.

Voila! You are done!

Note: As the buttons are rectangular, and the images have rounded corners, the white background of the image remains in the button and can look a little odd on the LabVIEW default grey background. To get around this, either:

1. Change the Powerpoint background to match your front panel background colour so they don't contrast.
OR, better yet,
2. Work out how to insert a propert Alpha Mask into the png images with your graphics package. An alpha mask will allow you to exclude the four corners of the image so that LabVIEW doesn't draw those white bits. These can be a bit of a pain to create however. I have constant trouble, and can never remember how to do it propertly in Corel Photo-Paint! The attached control above (Startctl.ctl) has a proper alpha mask so the rounded corners look more professional, but I honestly cannot remember how I did it!

There are better guides on LAVA I believe, but I worked this out myself a long while and ago and there's probably a much better way to do it (perhaps?) If anyone else has any  tips on how to make custom controls, please add them as comments to this document!

Happy custom control creation!!

Thoric (CLA, CLED, CTD and LabVIEW Champion)


Active Participant ColeTrain
Active Participant

Thank you so much! This is wonderful.

ColeR
Field Engineer
Active Participant jon_mcbee Active Participant
Active Participant

This is just what I was hoping for!  Gracias amigo.

CLA, CLED, CTD,CPI, LabVIEW Champion
President at Composed Systems
Using LV 2016, 2015, 2014


Don't forget Kudos for Good Answers, and Mark a solution if your problem is solved.
Active Participant Thoric Active Participant
Active Participant

Addendum:To clarify which of the six picture images represents what,  use this table:

Picture items ordered as shown in right-click menu of custom control:

Picture 1Picture 2Picture 3
Picture 4Picture 5Picture 6

Definitions:

Picture 1 = Normal (Undepressed)

Picture 2 = Depressed

Picture 3 = Mouse Down event (Transitioning from Depressed to Undepressed)

Picture 4 = Mouse Down event (Transitioning from Undepressed to Depressed)

Picture 5 = Mouse Hover (whilst Undepressed)

Picture 6 = Mouse Hover (whilst Depressed)

So for a typical user interaction of selecting a button the button will use five icons:

a) The button will be in it's normal undepressed state (Picture 1)

b) The user will move the mouse over the button, it will switch to Mouse Hover (Picture 5)

c) The user will select the left mouse button, which is a Mouse Down Event (Picture 4)

d) The user will release the left mouse button, so the mouse is now just hovering over a depressed button (Picture 6)

e) The user will move the mouse away from the button, leaving the button in a Depressed state (Picture 2)

If this is a switch, and not a latch type button, then the button will remain in a depressed state until the user re-selects it to undepress it. The process for deselecting is very similar to the five stages above:

a) The button starts in a depressed state (Picture 2)

b) The user will move the mouse over the button, it will switch to Mouse Hover (Picture 6)

c) The user will select the left mouse button, which is a Mouse Down Event (Picture 3)

d) The user will release the left mouse button, so the mouse is now just hovering over an Undepressed button (Picture 5)

e) The user will move the mouse away from the button, leaving the button in a Undepressed state (Picture 1)

As you can see, a lot of these images can be replicated, as I've done for the custom control in this document. But with a bit of imagination one can create some very interesting buttons!

Thoric (CLA, CLED, CTD and LabVIEW Champion)


Member tstahl
Member

"Work out how to insert a propert Alpha Mask into the png images with your graphics package."

This is where GIMP (Graphics Image Manipulation Pacakage) is my friend.  That and having the ability to create a layer for "Save" and another layer for the "As" portion is handy.

Active Participant Thoric Active Participant
Active Participant

See here for an excellent demonstration on the use of Powerpoint to create custom controls!

Thoric (CLA, CLED, CTD and LabVIEW Champion)


Member YogeshaYS
Member

Thanx Thoric. Its truley amazing. I personelly liked it much...... unfortunately KHUDOS cant be given here....

Member Raghu123
Member

Thoric, can we change the name from start to some other name like stop directly editing the .ctl file.

Active Participant Thoric Active Participant
Active Participant

Raghu123: The text is part of the image,in Powerpoint. Therefore to change the text you'll need to edit the Powerpoint content and build yourself a new control.

Thoric (CLA, CLED, CTD and LabVIEW Champion)


Member keptat
Member

May I suggest Inkscape? It easily exports to bitmaps with transparencies, plus, vector graphics are scalable without any loss of quality.

Member Sito_1
Member

This is really nice, thanks! just what I was looking for

-Sito

Member CatLi
Member

That's so nice. Thank you very much!

Cat Li
Member swelter
Member

This is excellent. Thank you for the tutorial and the useful information.

Contributors