NI Week 2013: LabVIEW GUI Design - Moving Beyond the Palettes

[jon_mcbee]

Attached is a zip file holding my NI Week 2013 presentation on GUI design.  I get requests once every week or two for the source code and usually reply that I plan to clean it up prior to releasing it, well 5 months later I have not touched it.  The attached code is in LV 2013 and I am posting it as is.  I don't gaurantee that it will work in any version prior to LV 2013, but encourage you roll it back and give it a try if you are interested.  The majority of the code was written over two weekends and because of this there are many unfinished trains of thought.  Feel free to ask questions and I will do my best to answer them.

One thing I will mention is that the material covered by the presentation was meant to be demoed in paralell during the presentation using GIMP.  Becaue of this, the actual tips and tricks for GUI design are not detailed in the slides.  However, I am working with NI on publishing a series of articles that distills the tips and tricks covered in this presentation, the first one came out this week (see link below), the others will be coming out over the next couple of months.

Tutorial: Creating Alpha Masks

Tutorial: Creating Drop Shadows

Good Luck,

Jon

[QFang]

Keep it up Jon!

[DavidZ.]

Jon your presentation at NIWeek was amazing. Thank you for posting this and especially also the Creating Alpha Masks Tutorial!

I wondered whether you removed some items from your demo project on purpose or didn't notice it: Battery.ctl, Big Battery.ctl, Wait ms with Dataflow.vi

[jon_mcbee]

Hi DavidZ, thanks for the kind words.  I did not intend to leave those files out of the directory I posted.  I have just uploaded a new rev, you should be able to find the Battery.ctl and Big Battery.ctl control files at Moving Beyond the Palettes\Graphics.  The Wait ms with Dataflow.vi is a VI that we use in our internal reuse library.  Its just a Wait ms wrapped up in a subvi with error in and out added for dataflow purposes.  I have replaced it in the project to remove the dependency.  I have uploaded a new version of the zip file, pull it down and let me know if you still have missing files.

Thanks,

Jon

[jon_mcbee]

I have gotten some honest and fair feedback about the difficulty people are encountering when trying to get my presentation to run.  I apologize for any headaches.  First thing to note is that there are a lot of files in that project that are either sandboxed ideas or orphaned code, as I mentioned in the original post the majority of this project was stream of conscious type work done over the space of two weekends.  One weekend dedicated to creating the universe, one weekend dedicated to creating the Windows 8 demo.  This post is aimed at showing how to get the presentation up and running.  You are free to explore the other files, but any missing files or broken VIs are outside the scope of my intention of posting this presentation.

1. Open the "Moving Beyond the Palettes" folder
   
2. Open the "Presentation" folder
   
3. Open the project file "LabVIEW GUI - Moving Beyond the Palettes.lvproj"
   1. I downloaded the attached zipped directory and was able to open the project without missing dependencies so you should be good to go
4. From within the project, open Splash Screen.vi
   1. Splash Screen.vi will launch everything you need.  Another way of saying it, if Splash Screen.vi doesnt launch it, then it wasn't intended to work.
5. Run Splash Screen.vi
   1. Wait as the universe is constructed and traversed.  This can take a few minutes, be patient. 
6. Once the Splash Screen goes away, hit the right arrow key on your keboard.
   1. The presentation is now running.  Go through the slides. 
7. You will eventually get to a slide that is the Windows 8 logo. 
   1. Click on the windows 8 logo to launch the windows 8 demo.
8. Enjoy

I hope that this helps.  As a note, I am leaving it up to the reader to open the code and understand how it works.  It is complex, and there are some cool things in there, but I dont have time to document or explain it.

I will mention that I built a cool rectangle packing class into the demo for the data dashboard interface.  Go to Moving Beyond the Palettes>>Demo>>Application>>Packer Class>>Tester.vi.  There are a bunch of subpanels on the front panel, run the VI and they will be packed "efficiently" (in quotes becase the algorithm could be improved). 

There are a bunch of other cool features built into this...

Enjoy,

Jon

[DavidZ.]

Hi Jon, now with your additional explanation I managed to make it work and have to say it's really a very impressive and inspiring Labview (non-PowerPoint) presentation, amazing!

Before you gave more explanations I was just not patient enough to wait untill all is loaded at point "5. Run Splash Screen.vi...". Additionally I have to say that I have LV2013 installed on a VM with not so many resources, so loading all took quite some time and made me think it's not working. This time I was patient enough, and it's definitely watching it! Good to know also, that keyboard arrow Right is stepping the presentation slides forward... 🙂

I would recommend to guys trying it out and not having too much time to go at least until the Windows 8 demo slide and check there the menu items on the left out: "Dashboard" with the clickable Windows 8 style menu overview, "System" with the option to change the background image and especially "Cells" with those very cool looking Batteries. Going until the end of the presentation shows a lot of other UI inspirations, but also takes some time with the fading transitions.

5 stars for me, regarding the short time you implemented it. All very nice looking, great contemporary UI flat style.

[jon_mcbee]

HI DavidZ, I am glad you got it running.  One last thing to note, I wasn't trying to be funny when I said, "Wait as the universe is constructed and traversed.  This can take a few minutes, be patient." in step 5.1 above.  The code is literally creating a 3D space, populating it with a bunch of 3D palette objects, then populating it with a bunch of slide objects, then creating an observer object, then moving the observer object through the 3D space visiting each slide object, then moving the observer object to a starting location, all before the slide show is ready to rock and roll.

I'm abusing the 3D picture control pretty heartily in this code.

[BTC_Admin]

I'm responding to this old thread but with relevant information. BatchTest Corporation (NI Alliance Partner in Silicon Valley) will soon introduce a LabVIEW add-on toolkit that adds many types of new controls & indicators for Front Panel design. This toolkit also allows a user to use his/her own vector graphics (.SVG or Adobe Illustrator .AI formats) directly from LabVIEW without having to go through any other tool! Essentially if you design a vector graphic using InkScape or Illustrator, you can directly create a scalable control or indicator with it using "Pebbles UI" toolkit for LabVIEW. (A user simply specifies his/her graphics file path using property node on the block-diagram.) Furthermore, Pebbles UI toolkit also adds configurable animations to your graphics, all through property nodes (user does not need any graphical expertise). More information is at http://www.batchtest.com/pebbles-ui-for-labview/.