When designing a new Axiom Application, the very first thing to be aware of is what the screen resolution will be used on the monitor the end user will be viewing the application on.
When creating a new Axiom Application, the default screen size will be automatically set to 1,024 x 768 pixels. You can access and make changes to the screen size by opening the properties menu, which is the bottom menu located to the left of the design area (see screen shot below).
Most modern monitors have a resolution higher than 1,024 x 768; therefore, you will need to make some adjustments to this.
To adjust the resolution, you can enter the correct number of pixels in the width and height fields, or with the cursor, grab and drag any of the three (3) small squares on the screen border (see screen shot below):
Once you have established the proper screen resolution, you can now start designing an Axiom Application by dragging and dropping controls onto the designing area of the screen.
There are some common things to consider when adjusting the height and width of an application that you are beginning to design:
Which Axiom platform will the end user choose to launch the application from?
- Axiom Desktop Application
- Axiom Browser Application
- Will the end user use the browser in full screen mode (selecting F11) or will they leave the URL address bar and browser tab visible?
Once you know the answer to these questions, then you can design the application so it will launch with the correct width and height. Making the applications height fit perfectly on the end user’s monitor screen can be a bit tricky.
To explain how things can be tricky, we tested a new application by designing it to launch on a high-resolution monitor with a pixel dimension of 3,840 x 2,160. The application was designed with one Donut Gauge in the upper left and bottom right corners of the screen. When we launched the new dashboard, using the Axiom Browser Client, it opened with the bottom right Donut Gauge hidden from view, and a vertical scroll bar on the right side of the screen was present (see screen shot below).
Once we launched the chrome browser into full screen mode, only then did the application fit perfectly. The reason for that was the browser tab, URL address bar and Windows task bar were taking up about 185 pixels in screen height. Once in full screen mode (by pressing the F11 shortcut key), those three objects were no longer in the way (see screen shot below).
If we were not planning to use the Axiom Application in a full screen browser, then we would need to create the application to fit onto the screen at a dimension of 3,840 x 1975. The 1,975 pixels in height give the proper room for the browser tab, URL address bar and Windows task bar to fit on the screen without causing the scroll bar to appear.
Now let us come back to point #1, the Axiom Desktop Application. We kept the same pixel resolution for this example too (3,840 x 2,160). When using the Desktop application, we do not have to worry about the browser tab and URL address bar taking up any real estate on our dashboard. Now we only need to account for the pixel height of the Windows task bar. This means I will need to design the application at a pixel height of 2,080 to account for the 80 pixels in height that the task bar is taking up on the screen.
Please keep in mind that you do not have to make designing screens this scientific. A lot of folks will just make sure that the screen resolution for their application has a pixel height that is less pixels in height than the browser client’s pixel height when not in full screen mode. This does result in extra unused screen space when the dashboard is launched on the Axiom Desktop Application, or when the browser client is in full screen mode.