{"id":13091,"date":"2022-08-30T14:32:15","date_gmt":"2022-08-30T17:32:15","guid":{"rendered":"http:\/\/kb.elipse.com.br\/?p=13091"},"modified":"2022-08-30T15:07:29","modified_gmt":"2022-08-30T18:07:29","slug":"configurando-quadros-e-telas-para-diferentes-resolucoes-e-proporcoes-de-monitores","status":"publish","type":"post","link":"https:\/\/kb.elipse.com.br\/en\/configurando-quadros-e-telas-para-diferentes-resolucoes-e-proporcoes-de-monitores\/","title":{"rendered":"Configurando Quadros e Telas para diferentes resolu\u00e7\u00f5es e propor\u00e7\u00f5es de monitores."},"content":{"rendered":"

Este artigo descreve boas pr\u00e1ticas para a configura\u00e7\u00e3o do ajuste de telas e quadros do Elipse E3<\/a> em cen\u00e1rios que usam diferentes propor\u00e7\u00f5es de tela e resolu\u00e7\u00f5es de visualiza\u00e7\u00e3o.<\/p>\n

<\/h2>\n

Por que esta configura\u00e7\u00e3o \u00e9 importante<\/span><\/h2>\n

Para configurar o ajuste de telas para diferentes resolu\u00e7\u00f5es em um sistema SCADA, \u00e9 preciso considerar a sua legibilidade<\/strong>.<\/p>\n

\u00c9 importante n\u00e3o confundir legibilidade<\/strong> com clareza<\/strong>. Para isso, vamos definir os dois conceitos no item abaixo.<\/p>\n

Clareza<\/h3>\n

Em interfaces de usu\u00e1rio, a clareza<\/strong> \u00e9 qualidade de toda informa\u00e7\u00e3o que \u00e9 facilmente comunicada e compreendida, sem ambiguidade. Por outro lado, uma informa\u00e7\u00e3o que peca pela falta de clareza \u00e9 aquela que gera d\u00favidas, que n\u00e3o consegue comunicar corretamente sua ideia ou fun\u00e7\u00e3o.<\/p>\n

Por exemplo, imagine que voc\u00ea deseja executar um comando de abertura de v\u00e1lvula, e a aplica\u00e7\u00e3o apresenta o seguinte bot\u00e3o:<\/p>\n

\"\"<\/p>\n

Logo ap\u00f3s, voc\u00ea clica em “Abrir” e a seguinte janela \u00e9 aberta, com diversas op\u00e7\u00f5es para a opera\u00e7\u00e3o da v\u00e1lvula:<\/p>\n

\"\"<\/p>\n

Neste caso, o termo “Abrir” se refere \u00e0 abertura da janela, e n\u00e3o ao comando da v\u00e1lvula. Seu significado original \u00e9 amb\u00edguo, e ele n\u00e3o comunica com clareza qual sua fun\u00e7\u00e3o. Portanto, podemos dizer que a informa\u00e7\u00e3o deste bot\u00e3o n\u00e3o \u00e9 clara<\/strong> o suficiente.<\/p>\n

Uma forma de de expressar esta informa\u00e7\u00e3o com mais clareza \u00e9 trocar o termo \u201cAbrir\u201d por \u201cOperar\u201d:<\/p>\n

\"\"<\/p>\n

Ou seja, o conceito de clareza est\u00e1 ligado \u00e0 comunica\u00e7\u00e3o direta e que n\u00e3o gera d\u00favidas sobra a interpreta\u00e7\u00e3o da ideia que o objeto representa; por sua vez, ela depende diretamente da legibilidade do texto ou objeto.<\/p>\n

Legibilidade<\/h3>\n

Legibilidade<\/strong> \u00e9 a qualidade que determina a facilidade de leitura de alguma coisa. Uma informa\u00e7\u00e3o leg\u00edvel<\/strong> \u00e9 facilmente detect\u00e1vel pelo nosso c\u00e9rebro. J\u00e1 a falta de legibilidade requer do usu\u00e1rio um esfor\u00e7o cognitivo maior para perceb\u00ea-la corretamente, o que faz com que a comunica\u00e7\u00e3o direta da ideia seja mais dif\u00edcil, ou mesmo imposs\u00edvel.<\/p>\n

Diversos fatores podem prejudicar a legibilidade de um objeto. Por exemplo, um texto pode ser pouco leg\u00edvel se a cor da fonte tiver um contraste insuficiente com a cor de fundo:<\/p>\n

\"Contraste<\/p>\n

Outro fator que pode comprometer a legibilidade de um texto \u00e9 o uso de uma fonte muito rebuscada:<\/p>\n

\"\"<\/p>\n

Um texto com a fonte distorcida (desproporcional) tamb\u00e9m causa dificuldade na leitura:<\/p>\n

\"\"<\/p>\n

Fontes em tamanhos muito pequenos tamb\u00e9m podem ser pouco leg\u00edveis:<\/p>\n

\"\"<\/p>\n

S\u00edmbolos e \u00edcones tamb\u00e9m podem apresentar problemas de legibilidade. Por exemplo, \u00edcones distorcidos n\u00e3o s\u00e3o imediatamente identificados:<\/p>\n

\"\"<\/p>\n

O mesmo se d\u00e1 com \u00edcones em tamanho diminuto:<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Seguran\u00e7a<\/h3>\n

No caso de sistemas industriais e sistemas cr\u00edticos, a legibilidade de uma interface \u00e9 um importante fator de seguran\u00e7a, pois garante que o usu\u00e1rio sempre tenha a percep\u00e7\u00e3o correta do significado e fun\u00e7\u00e3o dos s\u00edmbolos.<\/p>\n

Cen\u00e1rios que possuem v\u00e1rias configura\u00e7\u00f5es de resolu\u00e7\u00e3o e propor\u00e7\u00f5es de telas s\u00e3o prop\u00edcios a apresentarem problemas de legibilidade. Por isso, \u00e9 importante tra\u00e7ar uma estrat\u00e9gia eficiente de visualiza\u00e7\u00e3o, escolhendo tipos de zoom adequados a cada caso. O objetivo \u00e9 minimizar ao m\u00e1ximo a perda de legibilidade que pode ocorrer nos ajustes de visualiza\u00e7\u00e3o.<\/p>\n

<\/h2>\n

Gabarito de Propor\u00e7\u00f5es e Resolu\u00e7\u00f5es<\/span><\/h2>\n

\u00c9 fundamental utilizar um gabarito de resolu\u00e7\u00f5es e propor\u00e7\u00f5es de tela para visualizar e ajustar estas telas em cada cen\u00e1rio.<\/p>\n

\"\"
Gabarito de resolu\u00e7\u00f5es (dispon\u00edvel ao final deste artigo)<\/figcaption><\/figure>\n

Para isso, defina a imagem do gabarito deste artigo como tela de fundo da \u00e1rea de trabalho de sua esta\u00e7\u00e3o.<\/p>\n

Caso as dimens\u00f5es da imagem do gabarito sejam maiores que a resolu\u00e7\u00e3o suportada pelo monitor, configure a imagem para ser exibida \u201cLado a lado\u201d no Windows. Isto garantir\u00e1 sua exibi\u00e7\u00e3o com tamanho correto de 100% no monitor principal.<\/p>\n

A ideia aqui \u00e9 posicionar a janela do Viewer sobre o gabarito, alterar seu tamanho para o resultado desejado, e ent\u00e3o avaliar o resultado obtido:<\/p>\n

\"\"
Iniciando o Viewer com a aplica\u00e7\u00e3o demo deste artigo<\/figcaption><\/figure>\n

 <\/p>\n

\"\"
Movendo a tela do Viewer para a coordenada (0,0) indicada no gabarito<\/figcaption><\/figure>\n

 <\/p>\n

\"\"
Ajustando as dimens\u00f5es da janela do Viewer para o perfil desejado<\/figcaption><\/figure>\n

 <\/p>\n

Uma das vantagens de se utilizar um gabarito \u00e9 a possibilidade de avaliar como a aplica\u00e7\u00e3o se comporta com diferentes propor\u00e7\u00f5es de tela e resolu\u00e7\u00f5es simultaneamente. O gabarito tamb\u00e9m ajuda a compreender como os par\u00e2metros de zoom e alinhamento trabalham em conjunto.<\/p>\n

<\/h2>\n

Quadros e Par\u00e2metros de Visualiza\u00e7\u00e3o<\/span><\/h2>\n

O pr\u00f3ximo passo \u00e9 configurar os quadros da aplica\u00e7\u00e3o, seus tamanhos, e o tipo de zoom que ser\u00e1 aplicado em cada tela. A distribui\u00e7\u00e3o abaixo \u00e9 a mesma que usaremos na aplica\u00e7\u00e3o demo deste artigo:<\/p>\n

\"\"<\/p>\n

Cada divisor principal deve ter seu tamanho configurado atrav\u00e9s da propriedade SplitValue<\/strong>. \u00c9 poss\u00edvel configurar valores absolutos tanto em himetric como em pixels, ou seja, o tamanho dos quadros n\u00e3o muda quando a janela do Viewer \u00e9 redimensionada.<\/p>\n

Recomendamos, no entanto, usar valores percentuais relativos, que ajustam as divis\u00f5es conforme a janela do Viewer muda de dimens\u00e3o. Isto garante que as divis\u00f5es tenham sempre a mesma propor\u00e7\u00e3o.<\/p>\n

J\u00e1 o tipo de zoom \u00e9 configurado na string do comando de abertura de tela cadastrada na propriedade SplitLink<\/strong> de cada divisor. O comando tem o seguinte formato:<\/p>\n

Screen?Zoom?ScrollBar?Alignment<\/pre>\n
O sinal do ponto de interroga\u00e7\u00e3o (?) \u00e9 usado para delimitar as propriedades. Valores poss\u00edveis para cada par\u00e2metro s\u00e3o:<\/p>\n
\"\"<\/p>\n
Nos exemplos a seguir, e na aplica\u00e7\u00e3o demo que acompanha este artigo, a \u00e1rea \u00fatil das telas (ou seja, aquela onde os objetos s\u00e3o instanciados e exibidos) \u00e9 indicada por uma \u00e1rea hachurada. J\u00e1 o espa\u00e7o vis\u00edvel que excede esta \u00e1rea \u00e9 indicado sem o efeito de hachura:<\/p>\n
\"\"<\/p>\n
O c\u00edrculo vermelho indica o canto inferior direito da \u00e1rea \u00fatil de cada tela. Tamb\u00e9m serve para indicar distor\u00e7\u00e3o na propor\u00e7\u00e3o dos objetos, al\u00e9m da amplia\u00e7\u00e3o ou redu\u00e7\u00e3o de seu tamanho.<\/p>\n
<\/h3>\n
Tipos de Zoom<\/h3>\n
Zoom Toda a tela [1]<\/h4>\n
Este tipo de zoom \u00e9 recomendado nos casos em que a tela deve ficar sempre vis\u00edvel, e seus objetos devem ser exibidos sem distor\u00e7\u00e3o.<\/p>\n
Caracter\u00edsticas:<\/p>\n