Criação de páginas da web do usuário

Nossos sistemas SlimLine e Netsyst possuem um servidor web integrado, é possível transferir páginas do usuário visíveis do navegador para o sistema. As páginas devem ser criadas com editor HTML próprio e transferidas para o sistema de arquivos do sistema. Em sistemas ARM 7 eles podem ser transferidos para pastas Storage ed SDCard, nos sistemas CortexM7 eles podem ser transferidos para a pasta C:/Web criando suas próprias subpastas. As páginas carregadas poderão ser acessadas diretamente do navegador, bastando digitar o IP do dispositivo e o caminho da página. Para aplicações web mais complexas, o FB está disponível HTTPServer que permite executar o programa PLC para compilar o conteúdo para retornar ao navegador. Está previsto para baixar um programa, nas pastas do programa encontradas.

• LogicLab, Programa de gerenciamento de páginas a ser transferido para o sistema SlimLine.
• Web, Pasta WPages com páginas da web para transferir para a pasta C:/Web no sistema SlimLine.

Ao digitar o endereço IP do sistema a partir do navegador seguido do caminho para a página de índice (Exemplo http://xxx.xxx.xxx.xxx/WPages/Index.html) você pode navegar entre os vários exemplos. Todos os exemplos são editáveis ​​usando um editor de texto simples (Exemplo Notepad++).

Simplesmente página

No exemplo ao lado da página SPage.html, uma página simples que exibe uma mensagem de apresentação. Para quem não tem conhecimento de HTML recomendo testar editando o arquivo com um editor de texto ou editor de HTML SPage.html. Ao salvar o arquivo modificado e atualizar a página no navegador veremos as alterações feitas. Será então possível inserir os vários elementos HTML e ver como funcionam.

Gerenciamento de páginas dinâmicas, TAGs e ARGs

No exemplo ao lado da página DPage.htm exibe o valor da variável PLC VView do tipo UINT alocado no endereço DB100.10 e permite definir o valor da variável do PLC VSet do tipo REAL alocado para o endereço DB100.12. O exemplo destaca o recurso mais importante do servidor web, a capacidade de gerenciar páginas cujo conteúdo é modificado pelo servidor. O exemplo demonstra como é possível gerenciar uma interatividade com o usuário que, através dos TAGs inseridos na página, pode exibir variáveis ​​do PLC e pode modificar seu valor com ARGs. TAGs ed ARGs referem-se a variáveis ​​alocadas no DB100 do CP e deve ser inserido em páginas com extensão htm.

TAGs: Para visualizar o valor das variáveis ​​do PLC na página web você pode inserir TAGs que indicam o formato de exibição, o tipo e o endereço da variável a exibir (Exemplo <!–[‘%d’, UINT, 10]->, exibir variável UINT Alocado a DB100.10) Os TAGs serão substituídos pelo servidor pelo valor da variável ao enviar o conteúdo da página ao navegador.

ARGs: Para permitir a configuração das variáveis ​​do PLC a partir da página web, é possível enviar ao servidor em POST de ARGs indicando o tipo e endereço da variável seguido do valor a ser definido (Exemplo UINT 12=100, defina o valor 100 na variável UINT Alocado a DB100.12) Várias definições podem ser anexadas usando o símbolo & (Exemplo UINT 12=100&REAL 14=1.3) Para definir as variáveis ​​PLC da página da web, o método mais simples é usar módulos, todos os objetos contidos entre <form> e </form>quando o formulário é enviado, eles são automaticamente enfileirados e enviados ao sistema que atualiza as variáveis.

<!--["%d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di cifre intere variabili in base al valore.
<!--["%04d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di 4 cifre.
<!--["%3.0f", REAL, 32]--> Visualizza variabile REAL allocata a DB 100.32 con numero di 3 cifre intere senza decimali.
<!--["%4.2f", REAL, 50]--> Visualizza variabile REAL allocata a DB 100.50 con numero di 1 cifra intera ed 2 decimali.
<!--["%s", STRING, 128]--> Visualizza variabile STRING allocata a DB 100.128.

UINT 12=10 Imposta variabile UINT allocata a DB 100.12 al valore 10.
REAL 128=185.5 Imposta variabile REAL allocata a DB 100.128 al valore 185.5.
STRING 1000 16="Hello!" Imposta variabile STRING allocata a DB 100.1000 con "Hello!". Lunghezza testo limitata a 16 caratteri.

Atualizando páginas com AJAX

AJAX, sigla para Asynchronous JavaScript and XML, é uma técnica de desenvolvimento para a criação de aplicações web interativas. O desenvolvimento de aplicações HTML com AJAX é baseado em uma troca de dados em background entre navegador web e servidor, que permite a atualização dinâmica de uma página web sem recarregamento explícito pelo usuário. Esta técnica permite uma atualização automática dos dados em uma página web sem a necessidade de recarregar a página, permitindo que as variáveis ​​do PLC sejam exibidas automaticamente. As solicitações AJAX são processadas usando le API fetch.

No exemplo ao lado da página DPAjax.html que exibe o valor da variável IValue do tipo UDINT DB100.20 ao qual o valor da variável é adicionado a cada segundo IFactor do tipo USINT DB100.24. Todos os valores são atualizados automaticamente em AJAX a cada segundo. O exemplo de inserção de uma variável de string alocada também é mostrado DB100.52. As funções de gerenciamento da API de busca estão no arquivo Scripts.js Existe uma função de atualização de campo na página:

• GetPage(Page, RFlag), Executa o API Fetch relembrando em GET a página indicada em Page (No exemplo DPAjax.htm) e no retorno dos dados executa a função SetupValues que atualiza os campos na página.
• SubmitData(Page), Executa o API Fetch enviando em POST na página indicada em Page (No exemplo DPAjax.htm) o conjunto de variáveis ​​de dados e no retorno dos dados executa a função SetupValues que atualiza os campos na página.
• LoadPage(Page), Executado quando a página é carregada executa a função GetPage para atualizar imediatamente todos os campos da página e então ativar a execução cronometrada da função GetPage para atualizar os campos automaticamente.
• SetupValues(RData,RFlag), Avalia os objetos na página com os valores recebidos em RData. RFlag se ativo, permite a atualização dos objetos no atributo. Desta forma é possível desativá-lo permitindo escrever o valor do navegador sem ser reescrito pela atualização automática em AJAX.

Quando a página é carregada a função é executada <body onLoad=”LoadPage(‘DPAjax.htm’)”> apontando para a página DPAjax.htm, esta página contém os TAGs que, ao serem carregados, serão substituídos pelo valor da variável relativa. A página é escrita de forma a retornar uma string JSON com a indicação do id do objeto e o valor para o qual deve ser definido.

{
    "IValue":<!--['%d', UDINT, 20]-->,
    "IFactor":<!--['%d', USINT, 24]-->,
    "VStr":"<!--['%s', STRING, 52]-->"
}

Assim na função SetupValues bastará analisar o retorno para poder realçar os objetos. Observe que ao carregar a página RFlag está ativo, desta forma o campo de entrada também será avaliado IFactor. Durante a execução no intervalo RFlag não está ativo bloqueando a atualização.

Uso de objetos HTML

No exemplo ao lado da página WObjects.html exibe uma série de objetos disponibilizados pela linguagem HTML com os quais você pode criar páginas com um agradável impacto gráfico. O gerenciamento de objetos é realizado em Ajax usando as funções discutidas anteriormente.

Para criar páginas da web com gráficos, medidores, histogramas e muito mais, você pode inserir objetos do Google Chart (Veja a galeria). Em Neste artigo medidores foram usados ​​para exibir os valores de temperatura, umidade e pressão em um dispositivo Amazon Echo Show.

• Check box: Ao executar o tick uma variável BOOL é ativada, o status dos primeiros 2s também é transferido para as saídas lógicas do módulo da CPU.
• Radio button (A): Esses botões de rádio informam o status das entradas do módulo da CPU. Como você pode ver, eles têm atributos de nome diferentes, dessa forma eles são objetos únicos e não relacionados. Como eles são apenas para exibição, eles foram desativados para não serem editáveis ​​em uma página da web.
• Radio button (B): Esses botões de opção possuem o mesmo atributo de nome, portanto, atuar em um desativa o outro. Eles atuam em uma variável USINT, que é avaliada de acordo com a seleção.
• Input field: Definindo o valor, uma variável UINT com o valor definido é avaliada.
• Progress bar: Uma barra de progresso é exibida com o valor definido no campo de entrada.
• Select: Ao escolher uma das opções, uma variável USINT é avaliada.

Páginas responsivas

Hoje é essencial que as páginas web sejam acessíveis a partir de uma grande variedade de terminais, não só o PC mas também tablets e smartphones, pelo que é necessário desenvolver páginas responsivas para que se possam adaptar automaticamente aos vários dispositivos.

a aplicação eDoorkeeper com seu código fonte (Download) ilustra como utilizando adequadamente estilos CSS é possível desenvolver páginas responsivas simples para gerenciamento de controle de acesso com identificação via RFiD TAG.

A página home.htm exibe o status de operação, E/S digitais, o valor do TAG adquirido e eventuais erros, a página é atualizada em AJAX. Página tags.htm permite definir até 16 TAGs com o código relevante e o usuário associado a ele.