Skip navigation

Community

1 2 Previous Next

UI Interest Group

29 Posts
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

0

After seeing this idea exchange post I decided to investigate a couple of ways of implementing that functionality in LabVIEW today.

 

In this video (and the attached code) I demonstrate two reusable ways of adding an "Explore" option to file paths. The first is creating a new XControl that adds the Explore option but otherwise behaves and looks like the File Path control. The advantage of this technique is that the Explore option is available at edit time. Downsides include having to replace any existing file paths with the XControl and incompatibility with arrays and the like.

 

The second technique uses the concept of a "BRAT VI" (a child that controls the parent). You drop my VI on your diagram and it adds the Explore option at runtime to any path control or indicator on the front panel of that VI. It does this by getting a reference to it's caller, and registering to recieve events for any path control whenever the shortcut menu is activated or a menu item is selected.

 

6

Someone recently asked me if there was a way to standardize LabVIEW font sizes relative to other Windows applications as altenbach describes in his idea exchange post

Screen Shot 2013-06-07 at 3.57.12 PM.png

I did some digging and was able to write a VI to convert a point size into the equivalent LabVIEW size.

 

Screen Shot 2013-06-07 at 4.02.26 PM.png

 

I'm posting here just in case anyone else is in need of this functionality. (Note that I haven't tested the backsaved LabVIEW 8.0 VI)

3

infotainment system home page.jpg

4

I make .exe, using Properties I hidden menu bar.

Menu bar is only hidden when exe is running.

But when we stop the exe then again Menu bar is come.

Problem: I never want to show menu bar.....when exe is not run means ideal mode.

I trying by run timemenu bar and file-> property option.

still propelm is remain.

plz help me.

10

Hello all!

 

So is it really possible to add any new UI objects to your user interface during run-time and even link data to those new objects? Yeah it is! If you use some nice tricks I made this demo for Northern Europe NIDays last year and I just wanted to share it with our UI Community. The code is pretty simple and I made it for demo purpose only. So it's not ready application with proper error handling etc but you will find some cool functions there that you can reuse with your projects. I tried to keep the code as clean as possible so it should be pretty easy to understand how it works.

 

With this demo you can add new LabVIEW UI objects to the Front Panel and move those objects around with your right mouse click (works best with LabVIEW 2011 btw. There is some feature in 2012 that will popup the right click menu to the objects even though it is disabled. You can hide the menu by clicking the Esc button during the movement if you use 2012.). you can also link data to these new objects (just watch the video how to do it).

 

Here is simple video that will show you how it works:

http://screencast.com/t/bRfa1iQfHx

 

 

If you have any questions please comment and I will try to answer those. Enjoy!

 

Best regards,

 

Samuli

 

Updated: Added also 2011 verision and fixed one linking problem.

0

Hi all, this is LabView 2010 version of subVI with a vertical cluster of fallen oil drops.

Regards, Roberto

3

Hi all!

As soon as I work for Oil & Gas industry, this code is an alternative to the code developed by Pelle Steen.

Regards,

Roberto

 

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

In my previous post, "Resizable UI’s in LabVIEW", I went through the basics of creating a flexible and professional user interface that scales to any screen resolution. If you’re new to creating resizable user interfaces in LabVIEW, I recommend you start with that post.

 

Introduction

 

Equipped with an understanding of splitter bars, panes, and fitting controls/indicators it’s easy to imagine how we can create nice looking UIs. So off I go, creating a UI for a new configuration utility. I drop a multicolumn listbox down in my largest pane, fit it to the pane, and set up my columns exactly as I want them.

 

1.png


Looks good so far – I’ve followed all of the rules about making my UI resize, so let’s maximize this window and watch the resizing glory.

 

2.png

 

Not quite what I had in mind. I only need 3 columns, now I have 10. Your natural LabVIEW instinct will tell you start wading through the various property node options but unfortunately you won’t find a quick fix here. This requires code.

 

When creating complex applications, you will quickly find that the items you want to scale easily, rarely cooperate. In my previous post, I mentioned a few items that require a little more effort and some code to make them work.

 

Some of these items include:

  • Multicolumn Listboxes
  • XControls
  • Subpanels

 

In this post, I will only be focusing on Multicolumn listboxes but will be covering XControls and Subpanels in the future.

 

Multicolumn Listbox Resizing

 

Multicolumn listboxes tend to resize best vertically. The problem (as demonstrated) is when we expand horizontally we end up with extra columns or fewer columns. The extra columns make the UI appear cluttered and difficult to read. They tend to make your UI look like you’re working in Excel, and the higher the screen resolution – the worse it gets. Now the question is what behavior do I want my multicolumn listbox to take? Here are a few of the most commonly used options:

 

  1. I want the columns to grow proportionally and distribute across the screen.
  2. I want the columns to hold their width, but have my final column extend to infinity to reduce the amount of clutter.


To capture a screen resize event, we can use the event structure and the event for “Panel Resize”. The three properties we can make use of in this event are; VIRef, OldBnds and NewBnds corresponding to the VI reference, the previous screen size, and the new screen size respectively. To complete the process, we need to create a code module to do some multicolumn listbox resizing.

 

3.png

 

Proportional Distribution

 

This is the most commonly used type of multicolumn listbox resizing. We can determine the percentage of the listbox that each column consumes and maintain the proportions as the screen grows or shrinks. This is illustrated below:

 

4.png

 

The downside to this method is that data becomes sparse on a large screen resolution. For multicolumn listboxes, which do not occupy the entire screen, proportional distribution is the ideal method. For large listboxes that occupy the entire screen, we may be better off using last column only growth to maintain the look and feel of the application.

 

Last Column Only

 

This is another common method for resizing, where only the final column grows. This allows you to maintain the defined column layout, while reducing the clutter introduced by the extra columns typically generated by growing the window.

 

5.png

 

This method is nice for listboxes which occupy the entire screen. It maintains your layout and does not space data out or alter the appearance of the application.This is all great, but how is it done? Let’s take a look.

 

The Code

 

In order to make this function reusable for many listboxes, we will create a generic subVI. This subVI will be dropped into our event structure for screen resize events.

 

6.png

 

The code accepts a VI reference in order to Defer Panel updates; a listbox reference; the old panel size; the new panel size; and a resizing mode.

 

7.png

 

For the proportional method on the block diagram, we perform the following steps:

 

  1. Determine how many pixels the screen has grown by.
  2. Determine if the new bounds are different from the old bounds, if not don’t do anything.
  3. Defer Panel Updates so that the columns resizing happens faster.
  4. Count the number of columns and filter blanks.
  5. Determine the width of each column.
  6. Find the original proportion of the column in relation to the previous screen size.
  7. Adjust each column width proportion multiplied by the new screen size.
  8. Turn off Defer Panel Updates.

 

8.png

 

For the last only method on the block diagram, we perform the following steps:

 

  1. Determine how many pixels the screen has grown by.
  2. Determine if the new bounds are different from the old bounds, if not don’t do anything.
  3. Defer Panel Updates so that the columns resizing happens faster.
  4. Count the number of columns and filter blanks.
  5. Determine the width of the last column.
  6. Find the original proportion of the last column in relation to the previous screen size.
  7. Adjust the last column width proportion multiplied by the new screen size.
  8. Turn off Defer Panel Updates.


Conclusions and Next Steps


These are two simple methods for resizing multicolumn listboxes. You could always adapt your own methods for more complex resizing, such as making specific columns grow and others remain fixed. Using my last post "Resizable UI’s in LabVIEW" and the code presented in this post, more complex resizable user interfaces are now possible. In the future, I will give instructions on creating resizable subpanels and XControls which takes resizing all the way to complex architectures and reusable plugins.


Graham Beauregard

Prolucid Logo.gif

http://www.prolucid.ca

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!



11

Resizable UI’s in LabVIEW

Posted by GrahamB Jul 4, 2012

Introduction

Often as I open new software and the user interface pops up, I make a few typical clicks around, and I can almost immediately recognize it as a LabVIEW application. It’s funny how as a LabVIEW developer, I can recognize just from a user interface alone and some minor interaction that it has been written in LabVIEW. In the past, I found this true with other development platforms; although this is no longer as obvious. So, what is one of the things that made me suspicious of it being written in LabVIEW besides my familiarity with the common controls/indicators?

 

The screen would not resize.

 

It seems that generally speaking there is an opinion that in LabVIEW it just isn’t easy or worthwhile to design a nicely laid out, resizable UI. There aren’t very many good examples or documentation available, but it is really quite simple to accomplish. Resizable UI’s give a great feel to clients and give your software added professionalism at very little cost to developers. There is one caveat to this though, it should be considered up front at design time. Completing software without this in mind and trying to convert a UI to become resizable is typically a nightmare and should be avoided when possible. This is most especially true with complex UIs.

 

So, how is it done?

 

(After reading this please check out my follow up blog: Advanced Resizable UIs: Multicolumn Listboxes)

Planning

The most important step in making a UI resizable is some up front planning. Typically, we do some mock ups of how we anticipate the user interface to look and feel. This is a good time to plan which aspects you want to resize, and which you do not.

Elements to Scale

Elements you wish to resize or not resize should be grouped into sections.

 

In a LabVIEW application, the following elements typically should resize:

 

  • Graphs/Charts
  • Multicolumn Listboxes (extra code often required)
  • Image Acquisition
  • Tab Controls
  • Subpanels (extra code often required)

 

The following elements generally should not resize:

 

  • Text, Numeric, Boolean controls/indicators
  • Buttons
  • Static images
  • Enums, Ring control/indicators

 

Keep in mind these are just general recommendations, not rules. See the image below for my sample layout. Notice I have grouped elements such as text inputs, Boolean indicators, and buttons which I do not want to change size.

 

In this example, the only element I want to scale as the UI resizes is the graph.

 

1.png

Splitters

Now it’s time to add one of the more underutilized elements on the front panel palette – splitters. These can be found under the “Containers” palette in both Modern and System sections. Adding a splitter to your VI will create a hierarchy of “Panes” on your front panel. Each pane can be considered a section of your front panel that can have separate resizing settings from the rest of the UI.

 

2.png

There are horizontal and vertical splitters, and which you choose first is more important than you might think. It depends on your intended layout, but using my example it is obvious we want all of my text inputs to stay on the left as well I may want to leave some room below for future additions. As well, I want to keep my digital indicators in line with the left side of the graph. In order to keep the entire left side usable and clean, we should start with a vertical splitter.

 

Drag a splitter onto the front panel and section off the left text boxes from the graph as shown below. At this point, it’s going to look a little sloppy with scroll bars everywhere. Simply right click on the splitter bar, drill down to the pane you are concerned with and turn off each scrollbar to clean things up.

 

3.png

 

Repeat the same process for a horizontal splitter to section off the bottom digital inputs and buttons. Your screen should look as shown below when you are done:

 

4.png

 

Looks better now, but the splitters are a bit thick by default. It’s a little tricky to do, but you can shrink down the splitters to be about 1 pixel wide and almost invisible by grabbing the resize terminals in the middle of the splitter when you hover the mouse over it.

 

The next step that was not obvious before is relating to the buttons. We really would like the buttons to stay on the right side of the screen as it resizes, and keep the digital indicators on the left side of the screen in line with the graph. That will keep things looking clean as it resizes. How can we accomplish this? Add another splitter. Drop a vertical splitter just to the left of the buttons.

 

Next we need to define which way each pane sticks, grows, and shrinks. This is all configurable from the right click menus on each splitter. By default, each pane will stick to the top left corner and will not resize when dragged. These default settings are good for our left pane, and our digital indicator pane. For the buttons, we want slightly different behaviour to keep the buttons on the right side of the screen.

 

Configure all the splitters as listed below:

 

  • Right click on the left splitter and select Splitter Sizing -> Splitter Sticks Left
  • Right click on the bottom horizontal splitter and select Splitter Sizing -> Splitter Sticks Bottom
  • Right click on the bottom vertical splitter and select Splitter Sizing -> Splitter Sticks Right

 

5.png

 

If you resize the screen now you’ll see the desired behaviour. There is one last step, which allows the graph to resize. In order to do this, simply right click on the graph and select “Fit Control to Pane”.

 

That’s it. Now resize the screen all you want, it will always lay out nicely. To add more controls and indicators with their own behaviour, just keep adding splitters as necessary.

 

Your screen should now look like this:

 

6.png

 

Minimum Screen Size

Once you have set up your UI, it’s generally a good idea to compress it down until it’s as small as possible while still being usable and set a minimum screen size. This will ensure users don’t make the window smaller than you ever intended (which can introduce some odd bugs in the LabVIEW layout).

 

Accomplish this with the following steps:

 

  • Shrink the window down as small as reasonably possible without covering up any controls/indicators/labels
  • Go into VI Properties -> Window Size and click “Set to Current Panel Size” and click OK.

 

7.png

 

8.png

Conclusions and Next Steps

This was a simple demonstration for creating a simple, professional looking and scalable user interface. These concepts can be extended into much more complex interfaces involving tab controls, subpanels, XControls, etc. These more advanced topics are covered in my next blog: Advanced Resizable UIs: Multicolumn Listboxes.

 

 

Graham Beauregard

Prolucid Logo.gif

http://www.prolucid.ca

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

Coolest cDAQ demo ever?

Posted by ~Samuli Dec 27, 2011

Hi all,

 

I have been building this cool UI demo for cDAQ systems. It's not 100% ready but I think I can release the source code and the idea for you guys. I always like to share my code...

 

What is it?

Just a cool cDAQ User Interface demo. With this demo you can configure your measurements with cool UI. The configuration part can detect current system even if you add/remove modules during runtime. The UI will change according to current system. Which is pretty cool (specially with real HW). Also the measurement part has a cool UI (iPAD look and “touch screen like” scrolling effect).

 

Why I made this demo?

With LabVIEW it’s pretty easy to build something like this. So this is just an example how to create cool UI with LabVIEW.

 

How to demo?

There are multiple ways to demo this SW but I like to do it this way.

 

1.) Open MAX

 

Make sure you don’t have cDAQ devices or any other device on MAX under Devices and Interfaces:

pic1.png

 

2.) Launch “cDAQ - UI - Main.vi”

 

It should launch and you will see this screen:

 
pic2.png
 

 

3.) Create simulated NI 9178 Chassis with MAX


Goto MAX (resize and move it to next to the LV screen) and create new simulated NI 9178 chassis:

 

 

 

First select “Create New…”:

pic3.png

 

 

Then select “Simulated NI-DAQmx Device or Modular Instrument”:

pic4.png

 

And Select “NI cDAQ-9178”:

 

pic5.png

 

 

Now the LabVIEW UI will detect the Chassis:

 

pic6.png

 

4.) Add modules to the Chassis:

 

Right click the Chassis in MAX and select “Configure Simulated cDAQ Chassis…”:

 

pic7.png

 

Add these modules:

  pic8.png
 

 

The SW should now discover those modules (you can delete/add modules and it should discover those automatically):

 

pic9.png

 

Mouse Over those modules and you will see a description of the module:

 

pic10.png

 

Then select “Testpanel Mode”:

 

pic11.png

 

Now click one of those modules and it will open the Test Panel Close the Test Panel…


 

 

Uncheck the Testpanel Mode and click the module and it will then open the configuration window. Use the defaults and just select OK (do it for all of those 4 modules):

pic12.png

 

After you have done all four configurations Click the “Ready” button:

 

pic13.png

 

And it will then launch the iPAD screen with measurement VIs running (Scroll Left or Right by using your Right mouse button):

 

pic14.png 
 

 

If you now remove for example the first module (or whole system) from the MAX then this will show up:

 

pic15.png

 

Put the module back and hit the “Start Again” button and the code should continue measurements.

If you use this SW in a tradeshow etc then you can use the hidden feature to automatically change the measurement screen within 5 seconds. Try to find the small hidden “Radio button” from the upper right corner (just click with your left mouse button all over there):

 

pic16.png

 

When you find it and click it on it should look like this:

 

pic17.png 
 

 

Can I use it with Real HW too?

Yeah you can use this code with real HW too But please use with these HW only:

Chassis types: NI cDAQ-9171, NI cDAQ-9172, NI cDAQ-9174 or NI cDAQ-9178

Module types: NI 9211, NI 9215, NI 9219, NI 9234, NI 9263 and NI 9472.

You may add more modules if you create new settings and measurement VIs here: …\Dynamic “Loading\Settings and …”\Dynamic Loading\MeasUIs

Enjoy!

 

Questions? Please let me know

 

TODO:

  • Support for NI cDAQ-9181 and NI cDAQ-9188 
  • Support more Modules
  • Better recovery from Error

 

Br,

 

Samuli

 

UPDATE: Added support for NI cDAQ-9171 chassis ;-)

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.

1 2 Previous Next