Groovy Splash Screen

[swatts]

For a splash screen to get the title GROOVY it needs to have a strange shape, exhibit the right kind of transparency, fade in and have some nice custom progress stuff going on.

I laugh in the face of rectangles!!

So to cure the world of SQUARE software here's how to do it, code will be posted somewhere. Download SplashScreen2013.zip

Tools

You will need Paint.NET

And LibreOffice

And LabVIEW 2013

The LabVIEW bit

You will need to dynamically load the splash screen and then some time after the main program. For a nice fast start up we want to load the main program in the background and then show the front panel.

Startup VI

	1st Dynamically load and run the splash screen
	Then start loading the main program
	After a bit of a wait bring up the main screen
	and tidy up the splash screen

Splash Screen

This is the pretty bit, first lets get the graphics. Cut and paste the image into Paint.net and use the magic wand tool.

This selects a block of colour that you can delete (make transparent), Delete any thing else that you are going to replace. In this case I deleted the progress, version and link to the website.

Next we load this into our splashscreen VI by Edit>>Import Picture to Clipboard... like this

The progress indicator is simply a ring control made from a rotated metafile created in LibreOffice.

Green Screen Transparency

Now the clever bit is that we do not use the property FP.Transparency for this as this is mostly for fading in and out, we're after a green-screen affect where the background colour is masked.

For this we need to use some Windows functions (I've no idea what the Linux and Mac methods are..sorry).

We need User32.dll>>FindWindowA - gets the window handle

User32.dll>>GetWindowLongA - Retrieves information about the specified window. The function also retrieves the 32-bit (DWORD) value at the specified offset into the extra window memory. We're after extended windows styles..

User32.dll>>SetWindowLongA - Changes an attribute of the specified window. The function also sets the 32-bit (long) value at the specified offset into the extra window memory. The window is a layered window

User32.dll>>SetLayeredWindowAttributes - Sets the opacity and transparency color key of a layered window.

I don't know where I got this from, it certainly wasn't down to my own hard work.

This can be quite easily grabbed and moved about (bit of mouse down event jiggery-pokery, click on button 2 and drag it about).

So now you have no excuse for dull rectangle LabVIEW, we like Wonky

Hugs and Kisses

Steve

[swatts]

Ooops, I forgot to thank Fab for stealing her presentation graphics

[Thoric]

I couldn't agree more about creating splash screens, ones that background launch your sizeable applications and provide useful feedback during load times. Unfortunately mine are still conventionally rectangular. Another great article Steve, keep it up mate! 😄

[swatts]

You got no excuse now Rich, codes all there for you

[ohiofudu]

Thanks Steve for another good stuff.

Munch Love

[swatts]

Thanks Is,

Always appreciated...

[GregPayne]

Thanks Steve,

Great post as usual

[FabiolaDelaCueva]

Steve,

I am finally catching up with your blog, sorry it took me so long. When I did those drawings I never expect them to become "graphics for my presentation" let alone a Groovy splash screen, this definitely makes me smile.

For people that get ot this post looking for splash screen, I would add that the first part of the code could be replaced with the Start Assynchronous Call VI.

Thanks again for a great post and for taking those little designs to the next level

Fab

[Mark.Ridgley]

Steve,

This is a good example that could certainly provide the basis for making unique splash screens in LabVIEW. You may also want to take a look at a splash screen example that I've posted called Splash Screen Effect in LabVIEW which implements full transparency, fade in / fade out transitions and features 5 fully-functional examples that cover the most common splash screen usage scenarios.

Good work! Thanks for contributing to the LabVIEW Community!

Mark Ridgley

[swatts]

Thanks for the link Mark, nice work

[AristosQueue (NI)]

Mark/Steve:

In LV 2012 and later, if you instantiate the Actor Framework template project, that has a splash screen in it. That implements all the behind-the-scenes code needed to make a splash screen work, but I didn't put any particular UI polish on it, figuring anything fancy I did would be torn apart by whoever was writing their own splash screen with their own needs. Do you think it would be worth my time to enhance that template with any of the techniques mentioned here?

[FabiolaDelaCueva]

Hi Aristos,

I know you did not ask me, but since the graphs came from my NI Week presentation... I am deciding it is OK for me to answer . I would say yes.

If I remember correctly the Evaporative Cooler is the one that has the splash screen. At the very minimum the splash screen for that project should not show the window title. It would be nice if it would fade in/out.

Now I will let Mark/Steve make suggestions about what else they would like to see implemented.

Thanks,

Fab

[swatts]

It depends on how multi-platform you want to make it, these are Windows tricks, I have no idea how to do it in other operating systems.

That said I alway strive to make an application look as polished as possible (within the cost constraints of the project) and seldom regret the effort, it's kind of an easy win.

See you soon

Steve

[AristosQueue (NI)]

Steve wrote:

> That said I alway strive to make an application look as polished as possible

I agree with that... my question is about how much polish to apply to the skeleton template used to make those applications.

You make a good point about multi-platform. These are definitely supposed to be multi-platform templates, and I don't want to tie them to a target -- even if they are being instantiated on Windows, that's no guarantee that the end application will be deployed there. Tossing aside LV's platform independence should be a user choice, not part of the template.

Fabiola wrote:

> for that project should not show the window title

I will try to slip that tweak into LV 2014.

[Mark.Ridgley]

I agree that the template should be multi-platform and the splash screen in the template could use a little polish; however, I would like to propose taking LabVIEW splash screens in general in a different direction. I've always said that a LabVIEW splash screen should meet two primary criteria:

1. It has to be easy for LabVIEW users of all skill levels to implement.
2. It has to work whether the code is executed as a VI or built into an executable.

To that end, I would propose that splash screens be incorporated as a configuration in the VI Properties dialog. This would change the process of adding a splash screen to your LabVIEW code from a coding task to a configuration task. Of course, the behind-the-scenes tasks required for multi-platform support would still have to be worked out...

Below is a mockup of what this could possibly look like followed by an explanation of the configuration settings that might be included. Please take a look and share your thoughts with the group.

Thanks!

Mark

Enable Splash Screen

- Check to use a splash screen with this VI

Image Paths

- Array of paths to splash images

Display Mode

- Static (Display a single, static splash image)

- Rotate (Display a different splash image each time the VI is started)

- Animate (Animate the images in the image paths array. the animation rate is set by the Rate (ms) input)

Timing

- Close on timer or user input. If timer, the amount of time is set by the Delay (ms) input. If user input, then close on the user actions specified by the User Input control group.

User Input

- Enable User Input

- Text Field (Display a text entry field to capture user input)

- OK Button (Display an OK button. The splash screen will remain open until this control is clicked)

Fade Effects

- Splash Screen (Sets the splash screen fade mode. Choices are none, fade in only, fade out only and both)

- Main Screen (Sets the main screen fade mode. Choices are none, fade in only, fade out only and both)

Transparency

- Enable Transparency

- Color (When transparency is enabled, specifies the transparent color)

Panel Scaling

- Enable Scaling

- Scaling Mode (Settings are scale all objects and scale single object)

[swatts]

Apart from a tiny corner of my mind saying "no no keep it programmable" I really like the idea, it certainly answers the cross-platform issue nicely, it's something people will need etc etc, I'd like version numbering and links to websites too.

[Thoric]

I've always been a fan of splash screens, and I think there's a lot of potential in that idea Mark, I like it.

However, like Steve I also recognise that I would probably want a little extra each time, something that couldn't be accommodated by the configuration pane (a scroll box of updating status text, multiple links to support sites, whatever it might be). Therefore, I'd suggest a Wizard which would create splash screen code for you from a blank VI. Thus a beginner to LabVIEW can create a splash screen easily enough and an advanced user can take the splash screen code and tweak it to suit their custom requirements.

This is something that can already be created now with scripting if someone wanted to be so adventurous. Hint hint

[swatts]

It would make a nice NIDays presentation for scripting (I need to justify the work somehow), I have about 10 articles in the pipeline too so it may be a while. I'd need some Mac/Linux help too. It's a thought tho', you coming to Geneva matey?

[Thoric]

NIDays is a way off yet, so you've plenty of time. If you need a code-buddy, shout me out! I'd be interested in helping if you want it.

I'm on the European CLA Summit committee this year, so I'll definitely be at Geneva! 

[AristosQueue (NI)]

Mark:

I put this into the project templates because I have tried to build a single VI that could do all that with configuration. I didn't think the configuration model was particularly good. Splash screens often want to pull from resource files to display text or images while the user waits for launch (Tips is a favorite thing to display) and may want to show some status of which step it is on for loading, which means communication with the main program that is loading. Certainly it wants to know from the main program when to stop displaying -- you wouldn't want to set your splash screen to cover your slowest machine when your fastest machine is done loading in half the time. All that means that it needs connection into your app.

Now, having said that, I could see adding the options that you list on your VI Properties screenshot into the template instantiation questionaire. I'm unlikely to undertake that project myself anytime soon, but it would make sense. I still don't think I would go very far in polishing the graphics -- I haven't seen the work of any UX designer that makes other UX designers happy. 🙂

[Thoric]

A an example of front panel transparency used on a non-rectangular LabVIEW window:

Dots and Boxes Game

[swatts]

That is some particularly nice work,

You are officially the LabVIEW UI Doctor

[Mark.Ridgley]

Nice job, Thoric!

[GregPayne]

I've been making progress indicators this morning and came across this online image editor which works quite well with transparency backgrounds. Might help someone if they are not able to install specific image software. http://www.online-image-editor.com/

[swatts]

Very useful Greg, thanks for sharing.

I have to admit I like Paint.net an awful lot, I've not delved into the world of on-line editors at all

[GregPayne]

I prefer offline programs too, but sometimes online does have its place.

Have you given Inkscape a go? I've been using it for a while now and really powerful.