{"id":14008,"date":"2023-02-27T13:37:06","date_gmt":"2023-02-27T16:37:06","guid":{"rendered":"https:\/\/kb.elipse.com.br\/en\/?p=14008"},"modified":"2023-02-27T13:37:06","modified_gmt":"2023-02-27T16:37:06","slug":"frames-and-screens-settings-for-different-display-aspect-ratios","status":"publish","type":"post","link":"https:\/\/kb.elipse.com.br\/en\/frames-and-screens-settings-for-different-display-aspect-ratios\/","title":{"rendered":"Frames and Screens settings for different display aspect ratios."},"content":{"rendered":"

This article presents the best practices for setting up screens and frames from Elipse E3<\/a> that use different display aspect ratios (screen resolutions and proportions).<\/p>\n

<\/h2>\n

Why this configuration matters<\/span><\/h2>\n

When setting up screens with different display aspect ratios in a SCADA sysem, it’s important that we consider their readability<\/strong> in the system overall.<\/p>\n

Be sure not to mistake readability<\/strong> for clearness<\/strong>, because these two concepts share many similarities. So, we will first present the definitions for both ideas in the sections below.<\/p>\n

 <\/p>\n

Clearness<\/h3>\n

In user interfaces, we say that any piece of information that users can easily communicate or understand is clear<\/strong> information. On the other hand, unclear information is ambiguous, may cause confusion, and is not straightforward to communicate its meaning or function.<\/p>\n

For example, imagine that you want to execute a command to open a valve, and the application presents you the following button:<\/p>\n

\"\"<\/p>\n

Then, you click “Open” and the following window pops up, with new options for operating the valve:<\/p>\n

\"\"<\/p>\n

In this case, the word “Open” was a reference to opening the window itself, and not to commanding the valve. Its original meaning is ambiguous and unclear about the expected result. Therefore, we can say the information in the button was not clear<\/strong> enough.<\/p>\n

One way of expressing the same information, but in a clearer way, is to change the word in the button from “Open” to “Operate”:<\/p>\n

\"\"<\/p>\n

That is, the concept of clearness is related to direct communication, where the intended meaning of the object being represented is unmissable and raises no questions. On its turn, it will depend directly of the text’s or object’s readability.<\/p>\n

 <\/p>\n

Readability<\/h3>\n

The concept of readability<\/strong> pertains to how easily a reader can understand written text. Readable information can be detected with no difficulties by our brains. On the other hand, lack of readability requires\u00a0 more cognitive effort from the user in order to perceive it correctly, which may render direct communication of concepts more difficult, or even impossible.<\/p>\n

Several factors can interfere with an object’s readability. For example, a text may not be very readable if the font color has little contrast with background color:<\/p>\n

\"\"<\/p>\n

Another fact that can compromise a text’s readability is using a too-elaborate font:<\/p>\n

\"\"<\/p>\n

Distorted, disproportional fonts can also be hard to read:<\/p>\n

\"\"<\/p>\n

Small-sized fonts are challenging to some readers:<\/p>\n

\"\"<\/p>\n

Symbols and icons can have readability issues too. For example, a user may not readily notice distorted icons:<\/p>\n

\"\"<\/p>\n

The same thing applies to smaller icons:<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Security<\/h3>\n

The interface’s readability is a major security concern in industrial and critical systems because it ensures users can gauge correctly both the meaning of the symbols and their functions.<\/p>\n

Scenarios that have different display resolutions and aspect ratios are bound to suffer from readability issues. Therefore, it’s important to design an efficient visualization strategy that uses the best types of zoom for each case. The goal here is to virtually eliminate any legibility losses that may occur when adjusting visualization.<\/p>\n

<\/h2>\n

Template with Aspect Ratio and Resolutions\u00a0<\/span><\/h2>\n

It’s essential that you use a template with display aspect ratios and resolutions in order to be able to visualize and adjust the screens for each scenario.<\/p>\n

\"\"
Resolutions template (available at the end of the article)<\/figcaption><\/figure>\n

To do so, set up the figure above as your desktop background at your workstation.<\/p>\n

If the template’s dimension are larger than the resolution supported by the monitor, set up the image to display “Side by side” by Windows. This will ensure the image is displayed with 100% accuracy on the main monitor.<\/p>\n

The idea is to place the Viewer’s window over the template, change its size to the desired result, and then assess the outcome:<\/p>\n

\"\"
Starting the Viewer with this article’s demo application<\/figcaption><\/figure>\n

 <\/p>\n

\"\"
Moving the Viewer screen to coordinate (0,0), as indicated in the template<\/figcaption><\/figure>\n

 <\/p>\n

\"\"
Adjusting the Viewer’s screen dimensions to the desired outcome<\/figcaption><\/figure>\n

 <\/p>\n

One of the upsides of using a template is the opportunity to assess how the application behaves with different aspect ratios and resolutions simultaneously. The template also helps understand how zoom and alignment parameters work with each other.<\/p>\n

<\/h2>\n

Frames and their visualization parameters<\/span><\/h2>\n

 <\/p>\n

Our next step is to configure the frames in the application, their sizes, and the type of zoom to apply to each screen. The distribution below is the same we will use in this article’s demo application:<\/p>\n

\"\"<\/p>\n

Each main splitter’s size will be configured via SplitValue <\/strong>property. You can configure the absolute values either in HIMETRIC or in pixels. This means the size of the frames won’t change when the Viewer window is rescaled.<\/p>\n

We do, however, recommend using relative percentual values, which adjust the splitters as the Viewer window resizes. This will ensure the divisions always have the same proportion.<\/p>\n

To configure the type of zoom, go to the string of the open screen command registered at each splitter’s\u00a0 SplitLink<\/strong> property. This command has the following format:<\/p>\n

Screen?Zoom?ScrollBar?Alignment<\/pre>\n
We use question marks (?) to limit the properties. Possible values for each parameter are:<\/p>\n
\"\"<\/a><\/p>\n
 <\/p>\n
In the following examples, and in the demo application attached to this article, the screens’ usable area (that is, where objects are instantiated and displayed) is indicated by a pattern. On the other hand, the visible space exceeding this area is plain, and has no patterned effect on it:<\/p>\n
\"\"<\/p>\n
The red dot indicates the lower right limit of the usable area in each screen. It also indicates any distortions in the objects’ proportion, or if they’ve gotten bigger or smaller.<\/p>\n
<\/h3>\n
Types of Zoom<\/h3>\n
All screen zoom [1]<\/h4>\n
We recommend this type of zoom when you need a screen that is always visible, and whose objects show no distortion whatsoever.<\/p>\n
Characteristics:<\/p>\n