LabVIEW

cancel
Showing results for 
Search instead for 
Did you mean: 

Custom Button Nugget

Custom Control Design: Boolean Buttons

 

I was giving help to someone to help them make their buttons look better when I was asked to discuss how to make nice custom controls in a more formal way that everyone could benefit from (special request from Jeff Bohrer) in this thread.

 

http://forums.ni.com/t5/LabVIEW/Decal-Custom-Control/m-p/1544212

 

First let me show some of my controls and then we can talk about how they are made. We will also discuss the dos and don’ts of making nice buttons.

 

Insert False 3.pngAdd False.pngDelete False 2.pngEdit False.pngInsert False 3.png

 

File DIalog Select False.pngFile DIalog Select False 1.pngStart False 1.pngStart False.pngSave False 2.png

 

To do something like this you will need to have an artistic flair or access to someone that does. It takes a long time to design and develop the icons that you see. There are many parts and like writing code there are many little pieces that are required to make these things look good. So I am going to have to assume that you have access to custom icons that you want to use for this process.

First thing that you want to do is create a button on the front panel of the program that you are working on. Right click on the button and you will see and option for advanced and customize.

 

Advanced Customize.png

 

This will open a new window which is a custom control window.

 

Custom Control Window.png 

 

From Here if you click on the wrench button in the menu bar it will allow you to edit the button.

 

Custom Control Window Highlight Wrench.png

 

You will see tweezers after you click this button. This is where the magic happens. If you click on the Window option in the menu bar you will see an option for show parts window. This window will show all of the parts that make up this control. There are three parts for a Boolean button. We are only worried about the button part. You can also click on the button part to edit what you need. If you right click on the button you will see these options.

 

Show Parts Window.png

 

We need to talk about some of these options and what they mean when you are importing your custom icons.

 

Result of option:

import from the clipboard - this will distort the picture and it will look fuzzy.

import from the clipboard at same size - this will distort the picture and it will look fuzzy. It will be worse if the button is bigger than the picture that you are importing.

Import from file – This is the best option as it will make nice pictures as long as the picture that you are importing is the same size as the button that you are importing to. The way to make your buttons look the best is to edit them in a picture editing program prior to importing them so that they are the same size.

Import from File at Same Size – This can distort the picture if it is a different size than the button that you are importing to. This can make your pictures look fuzzy.

 

So when I make a custom icon I make sure that it is the same size as the button that I am using so I get the best picture quality that I can. You need to also remember that if you resize the button on the front panel that it will distort the picture ion on your new custom button. If you need to make a different button size you need to make a different size icon to go with it. It can get very time consuming to do this correctly.

Tim
GHSP
Message 1 of 10
(17,131 Views)

So let’s try making a custom control.

First right click on the button and select the Import from File option (because you have made the new button the correct size for what you want.

 

Browse for Icon.png

 

When you do this it will replace the false condition of the button. Now we need to replace the true condition for this button. You can do this simply by right clicking the button again and selecting the next view of the button.

 

Imported Custom Icon.png

 

Now we can repeat the steps above and import a picture from file and we get the true condition for this button.

 

Button True Condition..png 

 

If you click on the tweezers then you can play with the button and see if it does what you want. Depending on what mechanical action you want for your button you may need to edit the other two views of your button if you right click.

 

 

You can test the button in this window to get the exact feel that you want. You can also save this button as a type def or strict type def.

 

*Note: If you do choose to make these into a type def or strict type def you will not be able to alter the size on the front panel. You will have to open the type def to change the size.

 

Now if you choose the file option and apply changes you will see your new button on the front panel. You will need to save this control if you want to edit it later. This is not necessary as you can right click and customize the control after you have placed it on the front panel even if you never save the control.

Tim
GHSP
Message 2 of 10
(17,129 Views)

Here is the actual control

Tim
GHSP
Message 3 of 10
(17,128 Views)

Thanks for the nugget. I was doing some new button designs today, so I add my newest findings right here.

 

At first: resizing is a bit critical. Get your design as a vector graphic (svg using inkscape), then use it on a LV button of the same size. A good start for design is tango, because it's all public domain (be aware of licensing issues when using icons from the net, most stuff on wiki-commons is CC-SA='share alike' which might force you to open your code!) and svg.

 

In this case, I use the IEC5010 On/Off Symbol (found here). Using inkscape, I did export a 16x16 png (attached). Now let's get it into LV:

Place a 'Modern->Boolean->Round LED' on a FP and go to Advanced->Customize. Little trick from the micro-nuggets-thread: use the win explorer to drag-drop the png file on the control FP. Now Select and Cut/Ctrl+X. Right-Click the Round LED and select 'Import Picture' -> Decal. (Do NOT switch to edit mode for this). Wow, the frame is now around both the on and off led. Below my result for 64x64 px size.

Boolean 5010.PNG

 

Get different sizes by: 1. export the png from Inkscape in the appropiate size and 1. Resize the round LED befor copying it from the clipcoard.

As mentioned in the original post, the image does not scale with the button resizing as usual.

 

I have some more tricks. Hope the weekend gives me the time to post them.

 

Felix

Message 4 of 10
(17,073 Views)

Sorry for getting to this nugget so late..

 

Excellent explanation.  Well done.  Thanks!

0 Kudos
Message 5 of 10
(15,889 Views)

Thank you.

Tim
GHSP
0 Kudos
Message 6 of 10
(15,800 Views)

I found this site when I was making some buttons with text.  You can also adjust the text to leave room to add other graphics on the button.

 

http://cooltext.com

0 Kudos
Message 7 of 10
(15,766 Views)

Here is what you can do with this knowledge.

 

Profile Page.fw.png

 

New Touch Screen Main.fw.png

 

The Latest.fw.png

Tim
GHSP
Message 8 of 10
(14,900 Views)

Dear All,

 

Thanks for the guidane in creating a custom controls with images.

 

But the image in the custom button (Type def NOT Strict Type Def) is not getting resized (along with the button) when I tried to change the Front panel window size.  Kindly let me know is there any way to make the 'image in the custom button also get resized' along with the button when I tried to change the window size.

 

Note: Enabled "Scale all objects on front panel as the window resizes" in VI properties -> Window Size

 

Best Regards,

Sathish kumar D

0 Kudos
Message 9 of 10
(12,916 Views)

The image you are importing is not a vector image.  When it scales there are a couple options but all make the control ugly.  As far as I know the only vector based image you can import into LabVIEW is a WMF file.  The Image Navigator which is part of the DSC toolkit, allows you to copy and import these vecotor images and things scale nicely.  For your situation I'd suggest scaling the image to the size you need in a graphics editor like Gimp, then import them.  Buttons generally shouldn't be resized with a UI anyway so pick a size and stick with it.

Message 10 of 10
(12,880 Views)