GUI inspired by Ubuntu Netbook remix

[Tushar_Jambhekar]

I have seen this post long back. but what i am striving for would be much more sophasticated (and complicated to program). I am looking docking windows as in "Eclipse IDE"

[DFGray]

Unfortunately, I do not have any examples for you, since I have not actually done exactly what you want.  I would take the following approach:

1. For every window area you want on the main GUI, place a subpanel with either a picture control or array of booleans above it.  The subpanel will host the VI when it is docked.  The picture control or boolean array is used for the "tabs" of the window.  This will require some control customization to look right if you use booleans, or drawing code for the picture control.
2. Create an "undocked" VI template (so you can create multiple instances of it) which contains a subpanel and a similar array of booleans/picture control.  It should also include such things as the OK and Cancel buttons.  You can make the front panel itself transparent (in VI Properties»Window Appearance) and hide the borders and title for a neat, floating window effect.
3. Signal dock and undock using the drag events from the boolean array or picture control.  You will need to coordinate these between the two VIs containing the subpanels so that the child VI is properly hosted in the correct subpanel.  I would use data value references for the flags and values needed for this.  You should probably create a LabVIEW object, which will be contained in a data value reference, to help coordinate things.

This is a significant piece of code, so don't be dismayed if it takes awhile to get right.  Good luck.

[Kyle.Kyle]

I really want to learn how to do my UIs like this example, where do I start?  I have studied the code a bit and am pretty sure I understand how it works but how do you get the pictures, custom icons and transparency into the .vi?  I have only used the 'off the shelf' controls and indicators in the past but I have been drooling over this UI for an hour now and have to learn how to do it.  Can anyone steer me in the right direction?

Thanks.

Kyle

[JackDunaway]

1. On the right-click Context Menu of any control/indicator, choose "Advanced > Customize..."
2. On the toolbar of the Control, click the wrench button that says "Change to Customize Mode". This divides the control into all it's components and decals, allowing you to apply your own images you have created.
3. Always use PNG files (LabVIEW supports alpha channel transparency for PNG's). Never use GIF, JPG, TIF... always PNG.
4.  Search the forums for "Customize Controls" or "Custom Controls". There are lots of examples and tutorials.

[Tushar_Jambhekar]

I will try to create illustrative video or blog to explain the process. Actually there is nothing complex only one needs to have good images little bit of imagination and following some simple steps to put things together

The steps are already given by jack

[JackDunaway]

Tushar - Here's an example of dragging around FP objects - potentially useful for docking child windows or dockable toolbars - perhaps you could do something clever with the concept: Transparent Ruler

***EDIT: Actually, here's a better link to Transparent Ruler where the discussion continues and an improved example is posted. ***

[Kyle.Kyle]

Tushar and Jack,

I was able to make excellent progress on my GUI yesterday and now have a soft, modern interface to my LabView control software.  Your time may be wasted in making an instructional video, although I would watch it!, since I am a fairly novice user and was able to get great results in a fairly short period of time.  I am still struggling with transparency but I'll figure it out.  I also downloaded the Tango Desktop Project icons but was unable to use them since the 32x32 icons would pixelate as I enlarged them.  I made my own in paint and they worked great, they just took a long time.  I plan to make a 'standard' set as I work through my current project and will make them available when they are complete.  I have attached on such icon as a reference.  Be warned, I am NOT a graphical designer!

Thanks again for your help.