How to scale UI for Different Monitors

[dannyt]

Hi,

Though I have been using LabVIEW for a while now, I have done very little in terms of UI, until recently.

I am currently re-writing an old stand alone application, use the JKI state machine template and I am using custom controls to cluster and group my UI controls together and all sort of new and clever programming techniques (new and clever to me anyway). It has all been going really well and I have been finding it great fun.......... BUT......... I have come across a little problem.

Being an 'older' programmer my eye sight is not what it used to be and so I made the UI screen a size I could easily read and I was comfortable with. I have spent quite a bit of time getting it to look good as I have go about codeing it up. What I did not think about was the fact that in the Lab where it will end up actually being used, the monitors are smaller and lower resolution. So when I first tried it yesterday for real, as a built executable, my lovely UI was bigger than the screen and effectivly usless

So this leads me to two questions.

1) Is there anything I can easly do to scale my application, or do I need to go round all my custom controls making the fonts, buttons etc smaller.

2) What are the general guideline for dealing with this problem at the outset of a project. Should developers code all projects on the worst specification monitor they will have to run their code on, to ensure it work in that situation ? I have now two good sized and spec'ed monitors on my desk I find it increases my productivitly when writing the code, I can have multiple block diagrams open at the same time and easily see them and I would be loathed to give up such an environment.

cheers

Dannyt

[Dan DeFriese]

There is an option "Maintain proportion of window for different monitor resolutions" in the VI Properties dialog. It doesn't always work perfect in that it sometimes to distort the spacing of FP objects.

[Mads]

It is a good idea to decide on a minimal resolution you want to support and design everything to work there and scale upwards. Depending on the GUI you may allow the users to scale the window down from there as well, but at least put in a minimum to ensure that none of the objects that are set to scale get too small to be used. It can be frustrating to work on a small control panel when you have so much screen real estate, but the diagrams can still be as large as you like...although personally I think it is a bad habit to allow those to grow too large as well...

Generally I never scale buttons and numeric controls...most of the dialog controls are typically kept at a fixed size in other applications so I stick to that standard behaviour. The important thing then is to group the objects and place them so that they do not change their separation or location during window scaling. A graph on the other hand e.g. is a typical object to scale with the window. If I need to scale multiple objects properly it can work to group those objects, however a more robust solution is to use window splitters.

Truning on the "Maintain all proportions" or the "Scale all"-option is way to crude.

Mads

QUOTE (dannyt @ Oct 23 2008, 10:07 AM)

Hi,

Though I have been using LabVIEW for a while now, I have done very little in terms of UI, until recently.

I am currently re-writing an old stand alone application, use the JKI state machine template and I am using custom controls to cluster and group my UI controls together and all sort of new and clever programming techniques (new and clever to me anyway). It has all been going really well and I have been finding it great fun.......... BUT......... I have come across a little problem.

Being an 'older' programmer my eye sight is not what it used to be and so I made the UI screen a size I could easily read and I was comfortable with. I have spent quite a bit of time getting it to look good as I have go about codeing it up. What I did not think about was the fact that in the Lab where it will end up actually being used, the monitors are smaller and lower resolution. So when I first tried it yesterday for real, as a built executable, my lovely UI was bigger than the screen and effectivly usless

So this leads me to two questions.

1) Is there anything I can easly do to scale my application, or do I need to go round all my custom controls making the fonts, buttons etc smaller.

2) What are the general guideline for dealing with this problem at the outset of a project. Should developers code all projects on the worst specification monitor they will have to run their code on, to ensure it work in that situation ? I have now two good sized and spec'ed monitors on my desk I find it increases my productivitly when writing the code, I can have multiple block diagrams open at the same time and easily see them and I would be loathed to give up such an environment.

cheers

Dannyt

[Neville D]

In the past where I had a very complicated GUI (20+plots, a few hundred Buttons and indicators) and the application ran on a laptop with a lower resolution monitor, and in the lab with a hi-res display, I actually made up two front panels, with identical code, except for the painfully adjusted layouts for the different resolutions.

At startup, queried the monitor resolution, and called up the appropriate code using VI-Server. For "in-between" values of resolution, I selected the front panel that fit the closest (generally the low-res VI).

But for maintenance its a bit of a pain, since you have to maintain essentially two (or more) top-level VI's.

Neville.

[TobyD]

QUOTE (dannyt @ Oct 23 2008, 01:07 AM)

2) What are the general guideline for dealing with this problem at the outset of a project. Should developers code all projects on the worst specification monitor they will have to run their code on, to ensure it work in that situation ? I have now two good sized and spec'ed monitors on my desk I find it increases my productivitly when writing the code, I can have multiple block diagrams open at the same time and easily see them and I would be loathed to give up such an environment.

We write quite a bit of code that runs on 800x600 touch screens, but I develop on a 24" 1920x1200 monitor. I generally drop a decoration on my front panel that is sized to the smallest resolution my code will run on (if I will be running at 800x600 I drop an 800x600 pixel rectangle on the front panel). I then know that anything I do in the GUI has to fit inside that decoration. Sometimes I may have to change the entire layout from what I had envisioned (adding tab controls for example) to fit everything into the space available without it looking too cramped, but it seems to always turn out pretty good when I put it on the smaller monitor.

-Toby

[crelf]

QUOTE (TobyD @ Oct 23 2008, 12:40 PM)

I generally drop a decoration on my front panel that is sized to the smallest resolution my code will run on (if I will be running at 800x600 I drop an 800x600 pixel rectangle on the front panel). I then know that anything I do in the GUI has to fit inside that decoration.

That's a great idea - and it works really well using "Fit VI Window to Largest Decoration" and "Fit VI Window to Content" from the OpenG Application Control Tools palette (the window resizes to the decoration on run, and then resizes to include everything when it stops - I use that technique on almost all of my VIs that are UIs).

http://lavag.org/old_files/monthly_10_2008/post-181-1224781154.gif' target="_blank">

[Rolf Kalbermatter]

QUOTE (dannyt @ Oct 23 2008, 03:07 AM)

Hi,

Though I have been using LabVIEW for a while now, I have done very little in terms of UI, until recently.

I am currently re-writing an old stand alone application, use the JKI state machine template and I am using custom controls to cluster and group my UI controls together and all sort of new and clever programming techniques (new and clever to me anyway). It has all been going really well and I have been finding it great fun.......... BUT......... I have come across a little problem.

Being an 'older' programmer my eye sight is not what it used to be and so I made the UI screen a size I could easily read and I was comfortable with. I have spent quite a bit of time getting it to look good as I have go about codeing it up. What I did not think about was the fact that in the Lab where it will end up actually being used, the monitors are smaller and lower resolution. So when I first tried it yesterday for real, as a built executable, my lovely UI was bigger than the screen and effectivly usless

So this leads me to two questions.

1) Is there anything I can easly do to scale my application, or do I need to go round all my custom controls making the fonts, buttons etc smaller.

2) What are the general guideline for dealing with this problem at the outset of a project. Should developers code all projects on the worst specification monitor they will have to run their code on, to ensure it work in that situation ? I have now two good sized and spec'ed monitors on my desk I find it increases my productivitly when writing the code, I can have multiple block diagrams open at the same time and easily see them and I would be loathed to give up such an environment.

cheers

Dannyt

Before LabVIEW 8.0/8.2 I sometimes made a specific resize state in my state machine that actually explicitedly moved and resized all relevant controls according to the FP size. Quite cumbersome and not very easy to maintain but a big wow effect for anyone seeing how the controls always resized exactly in proportions to the screen size.

With LabVIEW splitterbars this is actually quite a bit easier and more functional. Michael Aivaliotis gave a very interesting presentation on NI week how to use the splitterbar to actually get a seemless scaling user interface without the need to explicitedly set individual control sizes.

Rolf Kalbermatter

[pallen]

QUOTE (TobyD @ Oct 23 2008, 12:40 PM)

I generally drop a decoration on my front panel that is sized to the smallest resolution my code will run on (if I will be running at 800x600 I drop an 800x600 pixel rectangle on the front panel).

-Toby

This is a great idea, one that really helped with my last two projects.

I still have an "older" laptop that I do a lot of work on. So while my newest projects are usually 1280x1024, little lappy can only do 1024x768. A tab container or a decoration that is exactly the size of my full screen can help keep me from messing things up when I'm working in a different resolution than the final target.

[dannyt]

Thanks for all the various suggestions, I like the idea of dropping a decoration and will have a play around with some of these suggestions

cheers

dannyt

[iwanttofly014]

I used this VI with my project, it is usefull so far.

The secret is to set the minimum panel size of your VI that are UIs,and call this VI.

Download File:post-8478-1228759718.vi

[shoneill]

QUOTE (rolfk @ Oct 25 2008, 08:32 PM)

Before LabVIEW 8.0/8.2 I sometimes made a specific resize state in my state machine that actually explicitedly moved and resized all relevant controls according to the FP size. Quite cumbersome and not very easy to maintain but a big wow effect for anyone seeing how the controls always resized exactly in proportions to the screen size.

With LabVIEW splitterbars this is actually quite a bit easier and more functional. Michael Aivaliotis gave a very interesting presentation on NI week how to use the splitterbar to actually get a seemless scaling user interface without the need to explicitedly set individual control sizes.

Rolf Kalbermatter

Yup, using splitter bars and setting the scaling behaviour of individual frames is probably the easies way to do things.

Did this recently and was amazed how much code it saved....

Shane.