Skip navigation

Community

1 2 Previous Next

UI Interest Group

16 Posts tagged with the gui tag
2

LabVIEW GUI Gallery

Posted by cacalderon Dec 22, 2013

I present them my gallery of snapshots of applications developed in LabVIEW.

I thank to some members of LabVIEW-user groups, for their contributions with regard to the design of GUIs.

 

GUI Gallery Link:

https://www.facebook.com/media/set/?set=a.598057340260619.1073741827.13145440358 7584&type=1&l=3e64def6f2

 

1Diapositiva SCADApump.png

 

2Diapositiva SCADAthermic.png

 

3Diapositiva SCADAhormy.png

 

4Diapositiva Invernadero.png

 

5Diapositiva SpeedControl.png

 

6Diapositiva CoolingLab.png

 

7Diapositiva V-beltsLab.png

14

Hi guys,

 

When I installed Visual Studio 2012 Express I noticed their nice loading animation in the bottom. See image below (found on web):

image1.PNG

After a couple of hours, I'm sort of satisfied.

MyScreenShot.png

Just run the file called Loader Example.vi in the attached folder.

 

If you want to resize the cluster that contains all the moving objects, that should work just fine. And if you want to add more objects than 5 that should also work fine as long as you tweak the "slow speed area" (see code) setting. I imagine if you spend some more time, you can even make nice patterns in the y-direction.

 

Have fun and please post your improvements,

Pelle

2

Hi Everyone,

ver.1.1

 

I have finished my tookit, for LabVIEW and I would like to share it with LabVIEW community. I think, the quality UI become as important part of a LV code as a functionality itself nowdays. Customizing the LV Controls & Indicators can be done many ways, but what about the LV RTM? (Run Time Menu). Maybe the color of RTM can be chage (I'm not sure) but I clearly know there is no way to insert images into menuitems, that could improve the presence of our FP.

 

So, I've started to develop a control that may replace the "old-timer" LV RTM. Before saying some words about the toolkit please take a look at the attached pictures.

 

dotnettoolstrip-slide-1.pngVertical Bar - Example.png

 

The pictures above show the ToolStrip can be used as Horizontal and Vertical dock.

The following docy types are supported:

  • Left / Top / Bottom
  • Right: (Not suggested - DropDownDirection)

The following ToolStripItems are supported already:

 

 

ToolStripItem    Functionality
ToolStripButtonSimple Button
ToolStripLabelSimple Text filed
ToolStripSeparatorSeparator Item
ToolStripMenuItemNestable Item (dropdown)

 

and the following items are under development:

  • ToolStripProgressBar
  • ToolStripTextBox
  • many more...

 

How to use:

 

The picture shows and example. (This VI is also available in the package with many more example.)


BD.jpg

Requirements:
  • LabVIEW 2009 or later
  • .Net Framework 2.0 or later
Development
  1. Before use this toolkit, please visit: www.mvtech.eu for more information about usage.
  2. Detalied documentation of VIs is also available here
  3. Toolkit Download Link - the zipped file contains an exe. It is not neccessary to run the exe but makes your life easier if you dont want to copy the toolkit files into user.lib\ manually.

 

Constraints
  1. ToolStripButton and ToolStripLabel can be inserted dierctly to the ToolStripControl; can not be nested. (TS - AddItem.vi - ParentTag must be empty.)
  2. Parent Tag must refer only ToolStripMenuItem.ItemTag or empty string.

 

 

Event Handling:

I think, this is most interesting part of it

 

User Level: I want to simplify the event handlig as much as possible, so the user doesn't have to take care .Net Events and more. .Net ClickedEvent is registered for UserEvent and used in the top-level vi. The Event returns the ItemTag of the selected ToolStripItem. This ItemTag is used as a parameter of the following methods:

 

Method Name
TS - RemoveItem.vi

TS - GetItemCheck.vi

TS - SetItemCheck.vi
TS - GetDisableItem.vi
TS - SetDisableItem.vi

 

For more info can be found on the website.

 

EventHandling.png

The picture above shows the event handling part of the code. The ItemTag <string> is an individual identifier of each ToolStripItem.

 

Checked Property:

Checked States.png

There are two types of checked-state. If a ToolStripMenuItem has any icon, the checked state dispalys as the "New" menuitem. Under the New menuitem, Open item has the same icon but its state is unchecked.

And if the menuitem doesn't have any icon, the standard pipe appears as its state is checked.

 

Version Overview

 

v1.3.

 

Feature Request:

 

  1. MenuEvents can be handled by Queue.  Please check Example II. The Process Queue is responsible for ToolStrip Event handling. The Queue - Dequeue element returns the ToolStripItem ItemTag.
  2. Password protection removed from subVIs. - Feel free to update or modify the source code.

 

 


Licence:

### BSD License (http://www.opensource.org/licenses/bsd-license.php) ###

 

Copyright (c) 2012, mvTech <info@mvtech.eu> | All rights reserved.

 

 

This Full Version tookit is free to use for everyone.

Please place the ToolStrip logo to your application about window.

 


Source Code:

The complete source code added (without password protection), full of with OO programming tools. ( Recursive algorithm, DVR objects, and so on...)

 

 

 

No Limitation | Full Source Code added

 

Feel free to use and ask if you have any question!



23

Hi All,

 

I created this tool for manipulating Front Panel objects (Controls/Indicators). If you work with UIs a lot then this tool is great for you! The main idea is that usually when you need to control UI object properties you will first put those references to for example cluster (because you cant use Array) and then reuse that cluster/references later on with your code. But that is not really good way to do it. Mainly because it is a mess and it always requires some work. Lots of references with different reference types etc. Lots of wires going all over etc.

 

So developers usually start with collecting those references like here:

UIRef1.png

But I don't like that method. Why not just do it like this:

UIRef2.png

That VI will automatically get all references to really fast memory place which you can use later on where ever you want (subVIs etc) with this another tool:

UIRef3.png

So you can use Label names to get the right reference to that control or indicator Is that cool or what? And it's pretty fast too. So which Control&Indicator types are supported? Well here is the list:

UIRef4.png

You may also use that function with any VI that is in LV memory by calling it with VI name when you initialize that function (if you leave it empty it will use caller VI):

UIRef5.png

 

I also included an example program that you can use...

 

 

Enjoy!

 

Br,

 

Samuli

 

EDIT v4: Added updated files. Also for LV 8.6

11

Sliding Containers in LabVIEW

Posted by SimonH Nov 30, 2011

I was answering an email from one of our systems engineers this week and dug up this old demo to show him how you could quite easily implement sliding panels in LabVIEW.  While I've shown a similar technique before I realized I've never shared this particular demo.

 

What's cool about this demo is that you can have multiple panels sliding at the same time and the animations can be interupted mid-animation.  Here's a video of it in action:

 

 

You can download the attached to code to see how I did it (LabVIEW 8.6 source IIRC).  I haven't documented the code much and it's been a while since I last looked at it so please excuse any less-than-perfect coding style you see in there.  If you have any questions, leave them in the comments and I'll try and answer them.

5

iPhone Toggle Switch

Posted by YoungZaphod Apr 14, 2011

iPhone_Switch.pngHere is a nice little custom control to make LabVIEW more like your iPhone.

5

First of all, excuse me if someone else already done this, but I can't find a similar example.

The attached example shows how to implement the "fluid-like" way of scrolling through a list of apps (i.e. controls) just like you see in smart phones. You left-click the mouse to grab onto the list and when you move the mouse the list will follow. As you release the mouse the velocity is calculated and the scrolling attenuates gradually.

 

I have used a cluster to group the controls to get a cleaner code, but I guess you could scroll the panel just as well, or a listbox or....whatever. The thing you need to do is to dynamically change the objects position. In this example I have only implemented a vertical scroll.

The code is developed without any subvis and without any elaborate design. I have only tried to quickly create an example for you to build from.

So please try to optimize this before you implement it in a real program. The scrolling is eating lots of CPU, that's because mouse move events are triggered all the time. Probably a producer-consumer design pattern would be more efficient.

 

Untitled.png

To get nice icons I have just used the boolean system controls found here: http://decibel.ni.com/content/docs/DOC-9921

 

/Pelle

1

Windmill UI Example

Posted by SimonH Sep 13, 2010

Windmill Preview.png

 

At NIWeek 2009 we demoed the LabVIEW Web UI Builder with a very slick looking windmill blade monitoring application:

 

 

While this demo was obviously made using the in-development LabVIEW Web UI Builder the same visual effect can be created in your desktop LabVIEW applications today. 

 

The attached VI shows the same UI implemented using some of my favourite techniques (namely recoloring graphs, panel backgrounds, using PowerPoint to create decorations, and using transparent images in a picture ring). 

 

Other tips:

 

  • The key to getting the rotating animation is to rotate the image in PowerPoint and save each rotation as a new image.  Place each image in a picture ring and use the picture ring value to flip through the frames of your animation.  The speed at which you update the value determines the speed of the animation.  This is a very simplistic way of doing things and can bog down the CPU if you are updating the front panel too quickly (the human eye can only see ~10-20 frames per second, there is no need to update faster than that) -- a more advanced technique would involve only updating the image every 100 ms or so and calculating how which frame to skip to in order to simulate the "speed" of the rotation.
  • The Blade Failure!/Blades OK indicator is simply a button using the check mark and the warning icons as the true and false images respectively.
  • The velocity "meter" at the top is really a gauge.  I have edited the scale to only use 180 degrees of the dial and made the frame transparent.  I then made the ramp visible and colored it accordingly.
  • The graphs come from my ni.com inspired control suite

 

As always, I've attached the VI (LabVIEW 2010 format -- sorry, I have a small HDD and only keep the latest version installed) along with a zip file of all the source images (all images except for field.jpg were saved as images from the included .pptx file).  I also saved the windmill as it's own .ctl file if you care to reuse it (I'm not sure how many people work with windmills so this may be of marginal benefit to most of you).

9

For a good looking GUI, it might be nessecary to have multiple window icons in one applicatino, for this purpose I have created a tool-vi that uses the windows API with the WM_SetIcon message and the LoadImage method to change the icon of a single VI front panel window:

SetWindowIcon.png

With this VI you can change the icon of a single front panel window, here's alittle video showing this feature

 

Hope you enjoy this little tool, if you have the possibility to test/alter the VI for Windows 64-bit, Mac or Linux, please post your updates!

 

EDIT: There was a small bug in the program that caused it to work for only one VI at a time, now it works for multiple VIs, you can set and reset at any moment you want, the tool should remember what the original icon should be. It is not advised to multiple times use a set and then use a reset.

 

To use this tool you'll need to have the OpenG Application Control toolkit installed.

20

I had the chance to make a presentation for NIWeek and our Developer Education Days sessions this year and I decided to focus on highlighting some little known LabVIEW features and techniques that enable you to create very usable and attractive user interfaces.

 

Just in case you weren't able to make it out to the event in your area, here is all the juicy content:

 

Slides/Notes

 

Windows Application Example

 

Touch Panel Example

 

Informative Kiosk Example

 

In addition to the source code above I recorded videos of all the "how-to" demos, enjoy:

 

Add Decals to Buttons:

 

Using Tooltips:

 

Hide the LabVIEW Toolbar:

 

Customize the Run-Time Menu:

 

Recoloring Graphs:

 

Use the busy cursor:

 

Using panes:

 

Spawn dialogs:

 

Panel backgrounds:

 

Create decorations in PowerPoint:

 

Transparent indicators:

 

Transparent PNGs in a picture ring:

10

Hi Everyone,

 

I've been using Windows 7 for a while now and I must say I like the improvements to the Taskbar. One feature that stood out to me, and which could be practical in a LabVIEW applications doing post processing for example, was the integrated progressbar in the Taskbar buttons.

 

Normal Progress.pngPaused Progress.pngError Progress.png

 

Seeing it's the last day be for Christmas I thought lest try and see if we can control this from LabVIEW. On the MSDN library I quickly found that there are two functions available on the ITaskbarList3 Interfaceto control the Progress bar behavior. Namely SetProgressState for controlling the State of the progressbar (Normal, Paused, Error, Indeterminate and NoProgress) and SetProgressValue for updating the progress. The only problem was that this is a static COM Interface implemented by Microsoft and I was unable to create this with the LabVIEW ActiveX interface API.

 

If I can't access an arbitrary feature with LabVIEW I typically tend to try and see if it can trough .Net. Because .Net is much more defined it's much easier to use in LabVIEW then a Win32 DLL or ActiveX COM object. In this case the nice developers from Microsoft already made a Interop Libraries for the Windows 7 Taskbar. This is basically a big example that you can add to your own .Net Application to access the Features of the Windows 7 Taskbar without having to program all the interoperability your self.

 

I just wanted to access the Progress Bar so I browsed trough the examples and build a Assembly that only exposes the two functions I needed (SetProgressState and SetProgressValue). Both functions require the Window Handle indorer to know which taskbar button needed to be updated. I already had VI that used the Win32 FindWindow function to retrieve the Window Handle of any Window based on it's exact Title. (This includes VI Front Panels ). I slightly altered this VI so it would return a IntPtr .Net Object instead of a the plain U32 so it can be used with the .Net InterOp functions. All that was left was wrapping the SetProgressState and SetProgressValue in a SubVI and the fun can begin.

 

Attached you can find a simple LabVIEW 2009 API and Example that uses the .Net Assembly to call in to the Windows 7 Taskbar. I also Included the C# source code of the assembly for those who are interested.

 

Have fun and let me know what you think.

 

Enjoy the Holidays

 

Karsten

 

UPDATE: LabVIEW Tools Network Release

 

The code from this blog post has recently been updated and released to the LabVIEW Tools Network as the LabVIEW Taskbar Progress bar API

 

This release requires LabVIEW 2010 or later. LabVIEW 2009 users can still use the original code attached to this blog post.

 

Karsten

27

Initially I dismissed the idea of recreating the "Office Fluent Interface" (more commonly referred to as the "ribbon") in LabVIEW as being more trouble than it was worth.  Typically the types of applications that we create with LabVIEW aren't the option heavy editor type applications that the ribbon was designed to help simplify and the only thing worse than an ugly user interface is one that is needlessly fancy (and consequently less usable).  Now the question keeps coming up every once in a while so I decided to take another look at it. 

 

Besides hiding behind ideology I admit that it sounded pretty difficult at first.  I have used Microsoft's .NET ribbon when I was playing around with WPF and, coming from the LabVIEW world, it wasn't what you would call intuitive to set up (you need to interact at the XAML-source or programming API level - it isn't all drag-and-drop, even in Visual Studio, and I'm still very new to XAML).  Add to that the complications of trying to communicate custom UI events efficiently between LabVIEW and .NET and it became apparent that re-using the .NET component would indeed be problematic.  If anyone has gone down this route please do let us know how well you faired in the comments.

 

Instead I decided to create most of the ribbon's look and feel using native LabVIEW controls and a few custom graphics created in my favourite UI mockup tool (aka PowerPoint).  Here's a screenshot of what I managed to come up with:

 

LabVIEW Ribbon.png

While I didn't implement every feature of the ribbon it still feels pretty authentic.  Moving the mouse over the tab controls and buttons gives the familiar yellow glow, groups highlight slightly when the mouse enters, clicking on the current tab will minimize the ribbon and move all the content up, clicking on a tab again will bring it back, etc.  Best part about it is it is all one small VI - no XControls, .NET controls or subpanels required.  I have attached a zip file containing the VI and all the source graphics as usual (LabVIEW 2009 format - sorry for those of you with older versions, I only keep the latest version installed since my laptop has a small HDD and developing without quickdrop and diagram cleanup is just frustrating having used it for a while now).

 

It's getting late so I won't go into all the implementation details but here are the basics for those trying to figure out what I did:

  • The main part of the ribbon is a transparent tab control with the tabs hidden
  • The "tabs" that you see are actually customized system buttons (to get the mouseover effect and the custom behavior)
  • The groups are also transparent tab controls with only one page (this gives me a nice container to trigger mouse enter and leave events from)
  • The ribbon occupies the top pane of my VI (with the splitter shrunk to 1-pixel and made a nice shade of blue to blend in) - repositioning the splitter let's me "minimize" the ribbon.

 

Hopefully this gives you some ideas for you own projects.

 

Happy wiring,

 

Simon

1

Easy Pop-up Windows

Posted by YoungZaphod Sep 2, 2009

FancyPopUp2.png

You can make pop-up windows quickly and easily by using tab controls.

 

By using tab controls, you can create the same visual effect and the same functionality as a pop-up window, but you don’t need to create a sub-VI. Since you never leave the VI, you don’t need to worry about passing information into and out of the dialog, simplifiying the code.

 

While this technique may not be appropriate for every situation, it is a nice trick to have when you need a quick pop-up window.

 

Example VI attached.

 

See also:

http://www.seneca5.com/blog/2009/09/easy-pop-up-windows/

8

Improved Listbox Icons

Posted by YoungZaphod Aug 24, 2009

ListBoxIcons2.0.pngThe standard LabVIEW listbox control has very archaic icons. So I made some improvements. You can use this control as a direct replacement for the standard control, but it looks a lot better.


This takes advantage of the properties for the listbox to load your own custom graphics.

 

Download from Seneca5

8

Todd knows how to push my buttons so to speak and so he sent me the following challenge late last night:

 

 

Email.png

 

Always being up for a challenge I looked at the original article (available at cars.com) and set about creating the same UI in LabVIEW.

 

About an hour later I had this:

Car UI.png

A fully functional implementation of the same UI in LabVIEW without using any tricks such as importing .NET controls or using picture controls.  I used the original images with a few tweaks here and there so I can't take credit for designing the UI but it's nice to know that it's relatively easy to import fantastic looking graphics into LabVIEW and have them be more than just decorations.

 

If you'd like to play around with the VI I've attached it below.

 

So to answer Todd's question.  Yes, I can, and so can you!

1 2 Previous Next