UI Interest Group Documents
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.
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
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.
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.
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!! 
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 1 | Picture 2 | Picture 3 |
| Picture 4 | Picture 5 | Picture 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!
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.
