First impressions count! Therefore, a professional and interesting looking user interface can make all the difference in transforming a lead into a paying customer. Showing a potential customer an amazing looking mock-up UI, that only took a few hours to create, leaves a good impression and plays into the strength of LabVIEW being able to swiftly create front panel layouts.
Modern user interfaces on smart phones and tablets increasingly use well designed icons to navigate the user through their software. Using some clever control customization and some amazing icon resources on the web, we can leverage this new trend to our benefit.
First, let’s consider some of the icon resources I personally use:
Large selection, free, strange but of good quality
Although some are not free, I highly recommend considering them, because they will easily pay for themselves.
In this example, we will create a configuration button using a gear icon. We will use this icon in blue and yellow to create a configuration button with hover over highlighting. To begin, we will search one of the linked sites above for a gear and once found, save it disk.
With the introduction of Windows Vista and later versions, buttons gained a hover over highlighting functionality. Meaning that when the user hovers the mouse pointer over the button, the button changes color and highlights it. We will use this hover over feature by selecting and customizing the System OK Button (this will not work with the modern version). Customize it by placing a System OK Button on the front panel, right click it and then select Advanced -> Customize… From there, change from Edit Mode to Customize Mode. You will now be able to easily replace each picture item with an icon of your choice.
(Picture 1: Modern OK Button has only 4 picture items, no hover over functionality)
(Picture 2: System OK Button with hover over functionality)
We will start by replacing all default Picture Items with our gear icons that we previously saved to disk. Right click the Picture Item you want to replace and selecting Import From File. After selecting the correct image, you will repeat this process for all other Picture Items as seen in Picture 3. Save the control and now you are ready to use your customized icon button for your project.
(Picture 3. Picture Items for System OK Button with hover over highlighting.)