Série Nexto - Criando uma visualização WEB com o NX3005 ou XP340 – O básico [Parte 1]

Nessa série de tutoriais você irá aprender a criar uma visualização web, função disponível nas CPUs NX3005 e XP340 da linha Nexto (WebServer).

Componentes 

Software:  MasterTool IEC XE v3.30

CLP:  XP340 e NX3005

ARQUITETURA

Na arquitetura desta série de tutoriais, conectou-se a porta Ethernet da XP340 na porta Ethernet do computador através do cabo NX9202.

DESENVOLVIMENTO

Na parte 1 iremos aprender a criar um projeto utilizando o MasterTool IEC XE e adicionar as visualizações, assim como objetos básicos como Labels, Retângulos e Elipses, além de como editá-los para deixar da forma e cor que desejar.

Caso você queira saber mais sobre as diferenças entre Web Server embarcado em CLP, Terminais de Operação (IHM) e software SCADA, assista o Webinar abaixo: 

Criando o projeto

Para começar, iremos criar um projeto para o NX3005 no MasterTool IEC XE (disponível para download gratuitamente aqui). Ao abir o software, segure as teclas "Ctrl" e "N" ao mesmo tempo ou clique no ícone de uma folha de papel no canto superior esquerdo da tela, uma nova tela irá se abrir. Nessa tela, selecione "Projeto MasterTool Padrão", caso queira alterar o nome e o diretório em que o projeto será salvo, você pode fazer isso nessa tela também. Após isso, clique OK.

Na próxima tela selecione NX3005 como CPU e selecione o Rack que você está utilizando.

Selecione "Próximo" nas outras telas. Quando chegar no projeto, à esquerda da tela haverá a árvore de dispositivos, clique em "Application" com o botão direito e vá em "Add Object->Visualization Manager...".

Clique na caixa ao lado "VisuSymbols, 3.x.x.x (System)" e clique em "Add".

Serão adicionados dois novos objetos à árvore: o "VisualizationManager" e o "WebVisualization". No Visualization Manager você pode selecionar, por exemplo, qual o tema dos objetos do CodeSys que serão usados no projeto. No nosso caso, utilizaremos o "Flat Style" pois é moderno e elegante.

No Web Visualization, você pode configurar opções relacionadas à visualização web em si como o tamanho das telas, a tela inicial, o nome do arquivo .htm, etc. 

Vamos criar agora a primeira visualização para o projeto. Clique com o botão direito em "Application" e vá em "Add Object->Visualization...".

Selecione o nome que você quer para a visualização. Nesse exemplo chamaremos de "main", pois ela será a tela principal.

Agora volte para o Web Visualization e clique no botão "..." ao lado de "Start Visualization" e selecione a visualização main que acabamos de criar. A partir de agora a visualização "main" será a primeira visualização ao abrir a WebView.

Conhecendo o ambiente

Abra na visualização "main" a partir da árvore de objetos, ela estará da seguinte forma:

Esse campo em branco no lado esquerdo é a visualização em si, onde você irá acrescentar os objetos, que estão na Caixa de Ferramentas no lado direito, divididos em "Basic", que são as formas geométricas e outros objetos básicos, "Common Controls", botões, campos de texto, tabelas, etc., "Measurement Controls", que são os objetos para indicar valores de medidas, "Lamps/Switches/Bitmaps", onde há outros tipos mais específicos de botões e indicadores, e "Special Controls", objetos mais avançados.

Caso queira alterar a resolução, clique na visualização com o botão direito e vá em "Properties".

Vá na aba "Visualization", clique em "Use specified visualization size" e altere a resolução.

Ao adicionar um objeto, um retângulo ou um círculo, por exemplo, a aba de propriedades do objeto de abrirá. Nessa aba você pode configurar propriedades como cor, tamanho e interações. Na seção "Colors" você pode alterar a cor da parte interna da forma e da moldura da mesma. 

Em "Normal state" você irá alterar as cores do objeto quando o mesmo está em estado normal, ou seja, quando não estiver em estado de alarme. "Frame Color" altera a cor da moldura e "Fill Color" altera a cor interna.

Na parte "Position" você consegue configurar o tamanho e a posição de um objeto na visualização.

Em "Element look" você pode alterar o estilo do objeto.

E em "Text properties" você pode alterar o estilo do texto que você pode adicionar no objeto.

Caso você queira alterar a cor de fundo da visualização basta clicar com o botão direito do mouse em qualquer lugar vazio da visualização e ir em "Background".

Dentro de "Background" você pode ativar e escolher a cor de fundo de sua preferência. 

Colocando em prática

Agora que você sabe como criar uma visualização e conhece os elementos básicos de manipulação de objetos na mesma, tente criar uma tela por conta própria. Você pode utilizar a tela abaixo como referência.

Caso deseja rodar o programa você pode acessar a visualização digitando o endereço IP do seu CP + :8080/webvisu.htm. Ex: 192.168.100.22:8080/webvisu.htm.

No próximo tutorial iremos aprender a importar imagens para dentro do nosso projeto.