Jump to content

How to scale UI for Different Monitors


Recommended Posts

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 :oops:

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

Link to comment

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 :oops:

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

Link to comment

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.

Link to comment

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

Link to comment

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 :oops:

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

Link to comment

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.

Link to comment
  • 1 month later...

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.

Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.