Examples For S7WebServer DOC v21 en - En.pt

Exemplos para o
SIMATIC S7-1200 /
S7-1500 Web Server
STEP 7 Basic (TIA Portal), STEP 7 Professional (TIA Portal)

Siemens
Indústria
Conectados
https://support.industry.siemens.com/cs/ww/en/view/68011496 Apoio, suporte
Informação legal
Informação legal
Uso de exemplos de aplicação
Exemplos de aplicação ilustram a solução de tarefas de automação por meio de uma interação de vários componentes na forma de
texto, gráficos e / ou módulos de software. Os exemplos de aplicação são um serviço gratuito da Siemens AG e / ou uma
subsidiária da Siemens AG (“Siemens”). Eles não são vinculativos e não reivindicam integridade ou funcionalidade em relação à
configuração e ao equipamento. Os exemplos de aplicação apenas oferecem ajuda com tarefas típicas; eles não constituem
soluções específicas do cliente. Você mesmo é responsável pelo funcionamento adequado e seguro dos produtos de acordo com
os regulamentos aplicáveis e também deve verificar o funcionamento do respectivo exemplo de aplicação e personalizá-lo para o
seu sistema.
A Siemens concede a você o direito não exclusivo, não sublicenciável e intransferível de ter os exemplos de aplicação usados
por pessoal tecnicamente treinado. Qualquer alteração nos exemplos de aplicação é de sua responsabilidade. Compartilhar os
exemplos de aplicação com terceiros ou copiar os exemplos de aplicação ou excertos deles é permitido apenas em combinação
com seus próprios produtos. Os exemplos de aplicação não precisam passar pelos testes habituais e inspeções de qualidade de
um produto cobrável; eles podem ter defeitos funcionais e de desempenho, bem como erros. É sua responsabilidade usá-los de
forma que qualquer mau funcionamento que possa ocorrer não resulte em danos materiais ou ferimentos às pessoas.
Isenção de responsabilidade
A Siemens não assume qualquer responsabilidade, por qualquer motivo legal, incluindo, sem limitação, responsabilidade pela usabilidade,
disponibilidade, integridade e ausência de defeitos dos exemplos de aplicativos, bem como por informações relacionadas, dados de
configuração e desempenho e quaisquer danos causados por eles . Isso não se aplica em casos de responsabilidade obrigatória, por
exemplo, nos termos da Lei de Responsabilidade do Produto Alemão, ou em casos de intenção, negligência grave ou perda de vida
culposa, lesão corporal ou dano à saúde, não conformidade com uma garantia, não fraudulenta - divulgação de um defeito ou violação
culposa das obrigações contratuais materiais. Reivindicações por danos decorrentes de uma violação das obrigações contratuais materiais
devem, no entanto, ser limitadas aos danos previsíveis típicos do tipo de acordo, a menos que a responsabilidade resulte de intenção ou
negligência grave ou seja baseada na perda de vidas, lesões corporais ou danos à saúde. As disposições anteriores não implicam qualquer
alteração do ónus da prova em seu detrimento. Você deverá indenizar a Siemens contra reclamações existentes ou futuras de terceiros
nesta conexão, exceto quando a Siemens for obrigatoriamente responsável.
Siemens AG 2018 Todos os direitos reservados
Ao usar os exemplos de aplicação, você reconhece que a Siemens não pode ser responsabilizada por quaisquer danos além das disposições
de responsabilidade descritas.
Outra informação
A Siemens reserva-se o direito de fazer alterações nos exemplos de aplicação a qualquer momento, sem aviso prévio. Em
•
caso de discrepância entre as sugestões nos exemplos de aplicação e outras publicações da Siemens como catálogos, o
conteúdo da outra documentação deve ter precedência.
Os termos de uso da Siemens ( https://support.industry.siemens.com ) também se aplicam.
Informação segura
A Siemens fornece produtos e soluções com funções de segurança industrial que apoiam a operação segura de plantas,
sistemas, máquinas e redes.
Para proteger plantas, sistemas, máquinas e redes contra ameaças cibernéticas, é necessário implementar - e manter
continuamente - um conceito de segurança industrial holístico e de última geração. Os produtos e soluções da Siemens
constituem um dos elementos desse conceito.
Os clientes são responsáveis por prevenir o acesso não autorizado às suas fábricas, sistemas, máquinas e redes. Esses sistemas,
máquinas e componentes só devem ser conectados a uma rede corporativa ou à Internet se e na medida em que tal conexão for
necessária e somente quando as medidas de segurança apropriadas (por exemplo, firewalls e / ou segmentação de rede) estiverem
em vigor.
Para obter informações adicionais sobre as medidas de segurança industrial que podem ser implementadas, visite
https://www.siemens.com/industrialsecurity .
Os produtos e soluções da Siemens são continuamente desenvolvidos para torná-los mais seguros. A Siemens recomenda enfaticamente que
as atualizações do produto sejam aplicadas assim que estiverem disponíveis e que as versões mais recentes do produto sejam usadas. O uso
de versões do produto que não são mais suportadas e a não aplicação das atualizações mais recentes podem aumentar a exposição do
cliente a ameaças cibernéticas.
Para se manter informado sobre as atualizações do produto, assine o RSS Feed da Siemens Industrial
Security em: https://www.siemens.com/industrialsecurity .
Exemplos para o servidor web

ID de entrada: 68011496, V2.1, 08/2018 2
Índice
Índice
Informação legal................................................ .................................................. ....... 2
1 Prefácio................................................. .................................................. ............. 5
2 Componentes de hardware e software usados ............................................. ....... 6
3 Noções básicas de páginas da Web padrão ............................................. ........................... 8
4 Noções básicas de páginas da web definidas pelo usuário ........................................... ...................... 9
4,1 Login e instruções de uso ............................................. ................. 9

4,2 Servidor Web - inicializando a função do sistema WWW ............................ 9
4,3 Bibliotecas - Framework jQuery e S7 ............................................ ... 10
5 Leitura e escrita com diferentes tipos de variáveis ..................................... 12
5,1 Tarefa de automação ................................................ .................................. 12

5,2 Mecanismos funcionais e uso .............................................. .......... 13
5.2.1 Estrutura do programa S7 ............................................... ........................... 15
5.2.2 Estrutura da página da web definida pelo usuário (arquivo HTML) .................................... 16
6 Exibindo a data e hora ............................................. ........................... 19

7 Exibindo uma matriz S7 (apenas S7-1500) ........................................ .................. 22

8 ENUM - Valor da variável substituído por texto ........................................... ....... 24

•

9 Redirecionamento de HTTP após um erro (somente S7-1500) ................................... 27

9.2.2 Estrutura da página da web definida pelo usuário (arquivo HTML) ............................ 30
10 Alterar idioma nas páginas definidas pelo usuário ........................................... ........ 31

10.2.2 Estrutura da página da web definida pelo usuário ............................................ ........... 32
10,3 Estendendo o exemplo ............................................... ........................ 37
11 Transferência de dados sem recarregar páginas usando AJAX ........................... 38


ID de entrada: 68011496, V2.1, 08/2018 3
Índice
12 Exibindo dados de um registro de dados como um gráfico .......................................... ............ 47

13 Elementos de exibição usando gráficos vetoriais escaláveis ..................................... 54
13,1 Tarefa de programação ................................................ .............................. 54

13.2.1 Elemento SVG de amostra - movimento rotativo de um motor .............................. 55
14 Diagnóstico S7 e Indicador de Carga ............................................. ............. 58

15 Alterando imagens usando JavaScript .............................................. ............... 64
15,1 Tarefa de programação ................................................ .............................. 64

16 Botão para reiniciar CPU .............................................. ..................................... 66

17 Login em páginas definidas pelo usuário ............................................ ............................ 69

17.2.2 Estrutura da página definida pelo usuário ............................................. .................. 70
18 Comunicação de alto desempenho por meio de uma string ........................................... 73

•

19 Instalação................................................. .................................................. ..... 82
19,1 Instalando o hardware e software ............................................. .... 82

19,2 Instalando o exemplo de aplicativo .............................................. ........ 83
20 Links da Internet ................................................ .................................................. .. 84
21 História................................................. .................................................. ............ 85

ID de entrada: 68011496, V2.1, 08/2018 4
1 Prefácio
1 Prefácio
Objetivo dos exemplos de aplicação
Os exemplos de aplicação neste documento mostram como estender suas próprias páginas da web no servidor da
web S7-1200 / 1500.
Este documento descreve os exemplos fornecidos para download. Recomenda-se executar os exemplos em
um computador e, simultaneamente, analisá-los com o auxílio deste documento.
Conteúdo principal dos exemplos de aplicação
Os exemplos de aplicação cobrem os seguintes pontos-chave:
• Ler e escrever com diferentes tipos de variáveis
• Exibindo o tempo
• Gerando matrizes (somente S7-1500)
• Usando o tipo de dados ENUM
• Redirecionamento de HTTP após um erro (apenas S7-1500)
• Alterar o idioma em páginas definidas pelo usuário
• Transferência de dados sem recarregar páginas
• Exibindo um datalog gerado pelo controlador como um gráfico
• Criação de elementos de exibição

• Exibindo informações de diagnóstico
• Alterar imagens usando JavaScript
• Reiniciando a CPU usando um botão
• Login na página definida pelo usuário
• Transferência de dados de alto desempenho

•
Vantagens
Servidor web integrado no S7-1200 e S7-1500
As páginas da web padrão para fácil exibição de informações de serviço e diagnóstico são ativadas com um único
clique.
Além disso, você pode criar páginas da web personalizadas e definidas pelo usuário, que são referidas a seguir como “páginas
definidas pelo usuário”.
Acesso de qualquer lugar
Um navegador da web permite que você acesse as páginas da web do S7 de qualquer lugar do mundo.
Exemplo de aplicação
Uso universal do exemplo de aplicação para SIMATIC S7-1200 e S7-1500.
Benefícios
Nenhum hardware e software adicionais necessários. O servidor da web pode ser acessado a grandes
distâncias usando dispositivos de comunicação móvel, como tablets, smartphones, etc.
Nota Os exemplos de aplicação em conjunto com o servidor da web não devem e não podem substituir um
sistema HMI.

ID de entrada: 68011496, V2.1, 08/2018 5
2 Componentes de hardware e software usados

Os exemplos de aplicativos foram criados com os seguintes componentes.
Componentes de hardware
Tabela 2-1: Componentes de hardware usados para os exemplos
Componente Não. Nº do pedido Nota
CPU 1511-1 PN 1 6ES7511-1AK01-0AB0 Firmware V2.0.5
CPU 1214C DC / DC / DC 1 6ES7214-1AG40-0XB0 Firmware V4.2
PG / PC 1 - -
com interface Ethernet
IE FC TP 1 6XV1840-2AH10 Cabo de conexão IE,

CABO PADRÃO ordem mínima
quantidade: 20m
Conector RJ45 2 6GK1901-1BB10-2AA0 Pode ser moldado
Nota Para esses exemplos de aplicação, você precisa da versão atual do firmware da CPU. Dependendo do tipo
de CPU, as seguintes entradas fornecem links relacionados para os downloads apropriados:
• S7-1500: https://support.industry.siemens.com/cs/ww/en/view/78301349
• S7-1200: https://support.industry.siemens.com/cs/ww/en/view/107539750
•
Componentes de software
Tabela 2-2: Componentes de software usados para os exemplos
Componente Não. Nº do pedido Nota
SIMATIC STEP 7 1 6ES7822-1AA04-0YE5 V14.0 (atualização 2)

Profissional V14
Ferramenta de software para criar 1 - Páginas da web criadas

arquivos HTML, como com Notepad ++
FrontPage, Notepad ++, ...
Navegador da Web como Internet 1 - Criado e testado

Explorer, Mozilla com IE11 e Firefox
Raposa de fogo 1)
1) Os seguintes navegadores da web foram testados para comunicação com a CPU:
• Internet Explorer (versão 11)
• Mozilla Firefox (versão 50)
Nota Os exemplos de aplicativos são otimizados para Firefox e IE11.

O uso de outros navegadores pode exigir alterações em relação à exibição no navegador.

ID de entrada: 68011496, V2.1, 08/2018 6
Estrutura geral
Os exemplos de aplicativos individuais consistem em um programa S7 executado em um S71200 / 1500 e uma

página da web em execução no servidor da web integrado do S7.
As exceções são os exemplos nos Capítulos 13 e 15 que mostram funções gerais da web sem um
programa S7.
As páginas da web são abertas usando um navegador da web e consistem em um arquivo HTML como base.
Exemplos mais complexos incluem arquivos JavaScript adicionais com a extensão de arquivo “js”.
Figura 2-1: Configuração de hardware para os exemplos de aplicação
PROFINET
Ethernet industrial
Navegador
S7-1500 S7-1200
Arquivos de amostra e projetos
A lista a seguir contém os arquivos necessários para este exemplo, consistindo no projeto S7 e neste
documento PDF.
Tabela 2-3: Exemplos - arquivos de origem

•
Componente Comentários
68011496_examples_for_S7WebServer_CODE_v21.zip O arquivo contém o projeto

STEP 7 com os arquivos HTML
apropriados no diretório \ html.
68011496_examples_for_S7WebServer_en_DOC_v21.pdf Esse documento.

ID de entrada: 68011496, V2.1, 08/2018 7
3 Noções básicas de páginas da web padrão
3 Noções básicas de páginas da web padrão
Requisitos
No STEP 7, as seguintes configurações são necessárias nas propriedades da CPU.
• O servidor web deve estar ativado.
• Se você precisar de acesso seguro às páginas da web, marque a caixa de seleção “Permitir acesso apenas com
HTTPS”.
• A atualização automática de páginas da web está ativada. O intervalo

de atualização padrão é de 10 segundos.
O intervalo pode ser definido na faixa de 1 a 999s.
Acesso via HTTP ou HTTPS
O URL “http: //ww.xx.yy.zz” ou “https: //ww.xx.yy.zz” fornece acesso às páginas da web padrão. “Ww.xx.yy.zz”
corresponde ao endereço IP da CPU.
HTTPS é usado para criptografar e autenticar a comunicação entre o navegador e o servidor da web. Quando
a caixa de seleção “Permitir acesso somente com HTTPS” estiver marcada, as páginas da UCP na web só
poderão ser abertas via HTTPS.
Certificado de CPU
Se o navegador relatar um erro de certificado, proceda conforme descrito nas seguintes perguntas frequentes:
https://support.industry.siemens.com/cs/ww/en/view/63314183
Direitos de acesso para login nas páginas da web no PASSO 7
Por padrão de fábrica, o usuário “Todos” é definido em cada controlador SIMATIC S7-1200 / 1500.
Este usuário tem direitos de acesso limitados e nenhuma senha. (Isso impede o
acesso a páginas definidas pelo usuário.)
Para ter acesso total às páginas definidas pelo usuário, você deve fazer login com um usuário que tenha os direitos de
•
acesso necessários. Você pode parametrizar usuários, senhas e direitos de acesso com STEP 7 nas propriedades do
controlador S7-1200 / 1500.
Os campos de entrada de login estão localizados no canto superior esquerdo de cada página da web padrão do controlador
S7-1200 / 1500.
Figura 3-1: Janela de login na página da web padrão
Páginas da web padrão SIMATIC S7-1200 / S7-1500
Através da página web padrão integrada, o servidor web S7-1200 e S7-1500 já oferece uma grande
quantidade de informações sobre a respectiva CPU.
A estrutura das páginas da web padrão é descrita em detalhes no Manual de funções do servidor Web S7-1500 ;
não é o assunto deste documento.

ID de entrada: 68011496, V2.1, 08/2018 8
4 Noções básicas de páginas da web definidas pelo usuário

Para obter informações básicas sobre as páginas definidas pelo usuário, consulte este exemplo de aplicativo: “Criação e uso de
páginas da web definidas pelo usuário em S7-1200 / S7-1500”
4,1 Login e instruções de uso
No TIA Portal, cada nome de exemplo começa com o número do capítulo:

Exemplo: Capítulo 5 corresponde ao nome do programa “05ReadAndWriteS7 ...”
O conteúdo da web para os exemplos pode ser encontrado no projeto S7 apropriado em seu computador na
pasta “… \ html _...”.
Login das páginas definidas pelo usuário nos exemplos de aplicação
Do utilizador: admin
Senha: s7
4,2 Servidor Web - inicializando a função do sistema WWW
Nos exemplos de aplicação, a função do sistema “WWW” (SFC 99) é chamada pelo OB 1.
Esta chamada de bloco é descrita em todos os exemplos, incluindo a referência a este capítulo.
Não. Função
1 A função do sistema “WWW” (SFC 99) é chamada no OB1. Esta função

inicializa o servidor web da CPU.
•
Chamar ciclicamente a função em OB1 permite a interação entre o servidor da web e o controlador.
O Web DB (DB 333) está conectado à função WWW. O Web DB e o Fragment DB (s) armazenam a
estrutura das páginas definidas pelo usuário.
2 Mais instruções e chamadas de bloco são descritas nos respectivos exemplos de aplicação.
Nota Para obter informações básicas sobre a geração de blocos de dados para páginas definidas pelo usuário, consulte
as “Primeiras etapas” da seguinte entrada:

ID de entrada: 68011496, V2.1, 08/2018 9
4,3 Bibliotecas - jQuery e S7 Framework
As páginas da web dos exemplos de aplicativos consistem em documentos HTML, arquivos JavaScript
e bibliotecas JavaScript.
As estruturas de arquivo podem ser encontradas nos respectivos exemplos de aplicação.
Alguns exemplos de aplicativos usam as bibliotecas “jQuery” e S7 Framework JavaScript. Esses

exemplos estão listados na tabela a seguir.
Tabela 4-1: Bibliotecas usadas nos exemplos de aplicação
Capítulo Nome do capítulo jQuery S7

não. Estrutura
10 Alterar idioma na página definida pelo usuário X -
12 Exibindo dados de um registro de dados como um gráfico

X X
14 Diagnóstico S7 e indicador de carregamento X X
16 Botão para reiniciar CPU X X
17 Login na página definida pelo usuário

X X
18 Comunicação de alto desempenho por meio de uma string

X X
Integre a biblioteca jQuery e os arquivos JavaScript apropriados que acessam ou usam essa biblioteca jQuery
em seu documento base HTML. Por exemplo, o arquivo JavaScript “S7 Framework” usa a biblioteca jQuery; no
código HTML, está portanto abaixo da chamada da biblioteca jQuery.
Figura 4-1: Chamada de bibliotecas JavaScript no documento HTML

•
jquery-2.1.3.min.js (biblioteca jQuery)
O arquivo “jquery-2.1.3.min.js” é uma biblioteca que permite uma programação mais eficiente com JavaScript. A
biblioteca contém funções básicas de DOM, eventos, efeitos e Ajax que não são descritas em detalhes neste
documento. Os métodos da biblioteca são normalmente acessados pelo identificador de objeto prefixado “jQuery”.
Este identificador de objeto é substituído por um sinal “$”, o que reduz o número total de caracteres em um arquivo
JavaScript.
Exemplo:
jQuery. postagem (URL, DATA)
$. postagem (URL, DATA)
Para obter informações gerais sobre jQuery, visite: https://jquery.com/

ID de entrada: 68011496, V2.1, 08/2018 10
S7_framework.js
O arquivo JavaScript contém várias funções para converter e processar dados de um SIMATIC S7-1200 / 1500.
A programação do S7 Framework usa elementos da biblioteca jQuery. Portanto, no código HTML, sempre chame o
S7 Framework após a biblioteca jQuery.
Existem exemplos de aplicação separados para os controladores S7-1200 e S7-1500. Ambos os

controladores acessam os mesmos arquivos da web.
No entanto, dependendo da CPU, o acesso ao servidor web padrão difere em termos de IDs, login e outras
funções. Uma verificação de tipo de controlador é, portanto, implementada nos exemplos.
A tabela a seguir lista as funções do S7 Framework.
Tabela 4-2: Funções do S7 Framework
Não. Descrição do código
1 Atribuição de tipos de variáveis no S7 Framework
2 Funções de PLC (diferentes tarefas como uma biblioteca no framework)

- Funções e variáveis para
- AJAX (transferência de dados)
- JSON (processamento de dados de strings usando analisador)
- Tipo de CPU (acesso ao servidor web S7-1200 / 1500)
- Logon / logoff (referenciado à página da web padrão S7, “Portal.mwsl”)

- Indicador de carregamento (definição e função para ícone de carregamento animado)
- Tratamento de erros no processamento de dados do S7 Framework

•
Nota No código, você encontrará informações sobre as funções.

Uma descrição detalhada das funções não é o assunto deste guia.

ID de entrada: 68011496, V2.1, 08/2018 11
5 Leitura e escrita com diferentes tipos de variáveis
5 Ler e escrever com diferentes tipos de variáveis
5,1 Tarefa de automação
A tarefa é ler e reescrever variáveis de diferentes tipos de dados.
Nota O tipo de dados DTL é compatível apenas com o S7-1500.
Requisitos para a tarefa de automação
Duas páginas HTML devem ser programadas:
• Uma página HTML que permite ler / gravar variáveis de diferentes tipos.
• Uma página HTML que permite a leitura de variáveis especiais.

•

ID de entrada: 68011496, V2.1, 08/2018 12
5,2 Mecanismos funcionais e uso
Estrutura geral
O exemplo de aplicativo consiste em um programa S7 e dois documentos HTML que são exibidos como páginas da
web em um navegador.
Estrutura de página definida pelo usuário
A figura a seguir mostra a página definida pelo usuário para exibir tags PLC simples que são acessados para leitura /
gravação.
As principais “Variáveis Simples” acessam os sinalizadores S7, enquanto as variáveis “Estrutura e Matriz” acessam um
bloco de dados “DB 1”.
Figura 5-1: Página definida pelo usuário para leitura / gravação de variáveis simples
2 3 4
4
3 1 2
•
Tabela 5-1: Página da web para leitura / gravação de variáveis simples
Item Descrição
Este link leva você para a página da web HTML com as variáveis especiais, “Lendo variáveis
1
especiais”.
2 Esta coluna exibe os valores atuais das variáveis. O valor a ser escrito
3 é inserido nesta coluna. Os botões “Write” transferem os valores para
4 a CPU.
Tabela 5-2: Instruções para usar a página definida pelo usuário
Degrau Instrução
1 Na coluna “Novo valor”, insira um valor correspondente ao tipo de dados. Clique no botão
2 “Gravar”.
3 O valor aparece na coluna “Valor atual”.

4 Clique neste link se quiser abrir a página da web “Lendo variáveis especiais”.

ID de entrada: 68011496, V2.1, 08/2018 13
A figura a seguir mostra a estrutura da página definida pelo usuário para leitura de variáveis especiais.
Figura 5-2: Página definida pelo usuário para leitura / gravação de variáveis especiais
2 3
Tabela 5-3: Página da web para leitura / gravação de variáveis especiais

•
Item Descrição
1 Este link leva você para a página da web para leitura / gravação de tags PLC. Esta
2 coluna exibe os nomes das variáveis especiais.
3 Esta coluna exibe as informações (valor) da respectiva variável especial.

ID de entrada: 68011496, V2.1, 08/2018 14
5.2.1 Estrutura do programa S7
A representação esquemática abaixo mostra a estrutura do programa S7. A página da web HTML é
chamada ciclicamente. As seções a seguir descrevem a troca de dados com os blocos.
Figura 5-3: Programa S7 para leitura / escrita de variáveis
servidor web DB 33 OB1

Web DB / a Principal
DB 334
Fragment DB
Páginas definidas pelo usuário
DB1 SFC 99
TestDB WWW
DB2
HTTP_Info
Como funciona OB 1
Não. Função
1 A primeira chamada de bloco em OB 1 é a função WWW (SFC 99).

Para mais informações sobre a função, consulte o Capítulo 4.2.
Conteúdo das tags PLC
A seção superior da primeira página HTML define tags PLC simples (sinalizadores) que podem ser lidos / gravados usando a
•
página da web.
Conteúdo do DB1
O “TestDB” (DB1) define variáveis que podem ser lidas / escritas usando a página web. Exceção: a variável
“WWW_RET_VAL”. Esta variável contém o valor de retorno da função WWW.
Conteúdo do DB2
O “HTTP_Info” do DB2 armazena as variáveis especiais; neste caso: variáveis HEADER_Request.
O usuário só pode ler essas variáveis usando a página da web. Essas variáveis são escritas usando a página da
web por meio do servidor da web.

ID de entrada: 68011496, V2.1, 08/2018 15
5.2.2 Estrutura da página da web definida pelo usuário (arquivo HTML)
Não. Seção de código
1 Para ler / escrever uma tag PLC a partir das tags PLC (tabela de tags) de uma página da web, apenas o “nome da
variável” na sintaxe é relevante.
Geral : = “Nome da variável”:
Exemplo : = “TestBit”:
•

ID de entrada: 68011496, V2.1, 08/2018 16
2 Para ler / escrever uma variável de um banco de dados, o nome do banco de dados e o nome da variável são relevantes.
•

ID de entrada: 68011496, V2.1, 08/2018 17
3 As variáveis especiais (aqui: variáveis de solicitação HTTP) são salvas nas variáveis do banco de dados com comandos
UDP.
Esta variável DB é lida pelo arquivo HTML.
Nota:
Variáveis de solicitação http são variáveis globais dentro do escopo de um script.

•

ID de entrada: 68011496, V2.1, 08/2018 18
6 Exibindo a Data e Hora
6 Exibindo a data e hora
A tarefa é exibir o tempo da CPU em uma página da web.
• Leia a hora no programa STEP 7 usando a função “RD_LOC_T”.
• Programe uma página da web que exiba a hora.
• Atualize a hora com a ajuda de um segundo arquivo HTML (quadro embutido) integrado no arquivo HTML.
Para obter uma descrição do termo 'frame inline', consulte o Capítulo 11 .
O exemplo de aplicativo consiste em um programa S7 e dois documentos HTML que são exibidos como páginas da
web em um navegador.
A data e a hora são exibidas horizontalmente e centralizadas na página definida pelo usuário.
Figura 6-1: Página definida pelo usuário para exibir a data e hora
•
Definir a hora no controlador
O primeiro passo é definir a hora atual na fonte de dados, ou seja, na CPU. Abra o Portal TIA e o
1 exemplo do programa.
2 Na árvore do projeto, clique com o botão direito em seu controlador e selecione “Go online”. Selecione “Online
3- e diagnósticos”.
4- Em Funções, selecione “Definir hora”.
5 Em Propriedades, selecione o fuso horário e, se necessário, hora padrão / horário de verão.

ID de entrada: 68011496, V2.1, 08/2018 19
A representação esquemática abaixo mostra a estrutura do programa S7. A página HTML definida pelo
usuário é chamada ciclicamente. As seções a seguir descrevem a troca de dados com os blocos.
Figura 6-2: Programa S7 para exibir a data e hora

DB 334
Fragment DB
SFC 99
WWW
DB1 SFC 154

Relógio RD_LOC_T
Como funciona OB 1
Não. Função

2 A instrução “RD_LOC_T” (SFC 154) lê o tempo da UCP e o salva no DB “Clock” (DB 1) na variável
“time”.
•
Conteúdo do Clock DB (DB 1)
Este banco de dados armazena a hora no formato “DTL”.
A página definida pelo usuário lê a hora deste banco de dados.

ID de entrada: 68011496, V2.1, 08/2018 20
1 Os comandos UDP inicializam as variáveis.
2 O quadro embutido (arquivo “Update_Page.html”) grava a hora nesta caixa div.
3 O quadro inline deve ser integrado ao arquivo “index.html” para integrá-lo à sequência funcional.
4 O arquivo “Update_Page.html” especifica quais variáveis são atualizadas ciclicamente e onde armazená-las.
(Isso é implementado usando o ID no arquivo JavaScript e no código HTML.)

Referenciado a:
A instrução „if‟ é prefixada para exibir um “0”, por exemplo, 12: 03h.
•
Para obter informações sobre este método de atualização, consulte as seguintes perguntas frequentes:
http://support.automation.siemens.com/WW/view/en/97044123

ID de entrada: 68011496, V2.1, 08/2018 21
7 Exibindo uma matriz S7 (somente S7-1500)
7 Exibindo uma matriz S7 (apenas S7-1500)
A tarefa é ler todos os campos de um array S7 e gerá-los em uma página definida pelo usuário como uma tabela.
• Crie uma matriz em um banco de dados do programa STEP 7.
• Exibir os campos da matriz em uma tabela em uma página definida pelo usuário.
A página definida pelo usuário exibe os valores da matriz estruturados em uma tabela. Os valores na matriz são
atualizados atualizando a página definida pelo usuário usando “F5”.
Figura 7-1: Página definida pelo usuário para exibir matrizes S7

•
1 2
Tabela 7-1: Página definida pelo usuário para exibir matrizes S7
Item Descrição
1 Esta coluna mostra o índice da matriz Esta coluna
2 mostra o valor do campo da matriz

ID de entrada: 68011496, V2.1, 08/2018 22
7 Exibindo uma matriz S7 (somente S7-1500)
A representação esquemática abaixo mostra a estrutura do programa S7. A mudança dos valores da matriz é
controlada usando a visualização online DB1 e a página definida pelo usuário é atualizada conforme descrito
no Capítulo 7.2.
Figura 7-2: Programa S7 para exibir matrizes S7
OB1
servidor web DB 333
a Principal
Web DB /
DB 334
Fragment DB
SFC 99
WWW
DB1
Dados
Como funciona OB 1
Não. Função

Conteúdo do banco de dados de dados (DB 1)

O Data DB1 define a matriz que é lida pela página definida pelo usuário.
A matriz contém as variáveis exibidas na página definida pelo usuário.
Não. Função
•
1 Adapte o comando UDP ao respectivo nome de array (DB).

ID de entrada: 68011496, V2.1, 08/2018 23
8 ENUM - Valor da variável substituído pelo texto
8 ENUM - Valor da variável substituído com texto
A tarefa é alterar o valor inteiro de uma variável usando diferentes botões em uma página definida pelo usuário.
Os valores que são escritos na variável devem ser vinculados a diferentes textos de mensagem.
Uma exibição de texto é para exibir os textos de mensagem apropriados.
• Ler / escrever uma variável definida como ENUM com uma página definida pelo usuário.
• Defina uma variável ENUM.
• Crie uma variável em uma tabela de tags do PLC.
Nota Variáveis ENUM são definidas em um arquivo HTML.

Nas variáveis ENUM, os valores numéricos são substituídos por uma string. O programa S7 usa uma variável
numérica.
•

ID de entrada: 68011496, V2.1, 08/2018 24
Figura 8-1: Página ENUM definida pelo usuário - os valores das variáveis são substituídos por texto
3
1
•
Tabela 8-1 Página ENUM definida pelo usuário - os valores das variáveis são substituídos por texto
Item Descrição
Esses botões permitem que você defina a variável "alarme" para um valor entre 0 e
1
3-
2 Esta tabela mostra a atribuição do texto ao valor numérico. É aqui que o texto
3 apropriado é produzido.
Degrau Instrução
1 Selecione um dos quatro botões possíveis, neste caso: “alarme = 0”.
A mensagem “Sem alarme! Tudo certo." o texto é produzido com base na atribuição numérica, “alarme = 0”.
2

ID de entrada: 68011496, V2.1, 08/2018 25
A representação esquemática abaixo mostra a estrutura do programa S7. O valor da variável “alarme” em DB1 é
definido pela seleção do campo da página definida pelo usuário.
Figura 8-2: Programa ENUM S7 - os valores das variáveis são substituídos por texto
servidor web OB1

DB 333 a Principal
Web DB /
Páginas definidas pelo usuário DB 334
Fragment DB
SFC 99
WWW
DB1
AlarmVariable
Como funciona OB 1
Não. Função

Conteúdo do DB AlarmVariable (DB 1)
Não. Função
1 Este banco de dados armazena a variável “alarme” que pode ser lida / escrita pela página definida pelo usuário.
A variável é modificada pela seleção da página definida pelo usuário (aqui: “alarme =
0”)
•
1 Definição da variável ENUM no arquivo “_enumdefs.htm”
2 Inicialização da variável ENUM
3 O valor da tag PLC é lido e exibido como texto.
4 O texto atribuído é usado ao escrever o tag PLC. O valor associado (dígito) é escrito no tag do PLC.

ID de entrada: 68011496, V2.1, 08/2018 26
9 Redirecionamento de HTTP após um erro (apenas S7-1500)
9 Redirecionamento de HTTP após um erro (somente

S7-1500)
Se uma variável excedeu um determinado valor, uma nova página definida pelo usuário será aberta exibindo uma
mensagem apropriada.
O valor da variável deve ser definido usando um campo de entrada na página definida pelo usuário.
• Programe uma página definida pelo usuário com um campo de entrada para definir um valor de variável.
• A variável ENUM é especificada pelo programa STEP 7.
• Uma variável ENUM serve para controlar o URL (Uniform Resource Locator).
•

ID de entrada: 68011496, V2.1, 08/2018 27
Figura 9-1: Página definida pelo usuário para redirecionamento HTTP após um erro
2 3
1
1 2
Tabela 9-1: Página definida pelo usuário para redirecionamento de HTTP após um erro
Item Descrição
1 Neste campo, insira um novo valor de entrada.
2 O botão “Verificar o valor” envia o valor para a CPU.
Se o valor de entrada for maior que “100”, uma nova página definida pelo usuário é aberta. Neste exemplo, a nova página
3
definida pelo usuário possui texto em vermelho.

•
Degrau Instrução
1 No campo de entrada, primeiro insira um valor menor que “100”.
2 Selecione o botão e repita o passo com “101”.
O novo valor é exibido e a nova página definida pelo usuário abre se o valor de entrada> “100”.
3
Nota Se a variável verificada for influenciada pelo controlador, a página definida pelo usuário deve ser atualizada ciclicamente.
Caso contrário, nenhum redirecionamento de HTTP ocorrerá.
Para ir para a página inicial, defina o valor da variável no TIA Portal para menos de “100” e recarregue a página
definida pelo usuário.

ID de entrada: 68011496, V2.1, 08/2018 28
A representação esquemática abaixo mostra a estrutura do programa S7. Ao comparar os valores em

FC1, o sistema muda para a página definida pelo usuário.
Figura 9-2: Programa S7 para redirecionamento HTTP após um erro
servidor web OB1

DB 333 a Principal
Web DB /
DB 334
Fragment DB SFC 99
WWW
DB1 FC 1
Dados Verifica
Como funciona OB 1
Não. Função

2 A função “Verificar” determina se o limite de “100” foi excedido.

Se for esse o caso, a variável “headerLocation” é definida como “1” e “headerStatus” é definida como “302”. Devido a
isso, o sistema muda para a página definida pelo usuário com a mensagem de erro. Se o valor não foi excedido, ambas
as variáveis são definidas como “0”.

•
Conteúdo do banco de dados de dados (DB 1)
Não. Função
1 DB1 armazena as variáveis para FC 1.

Se o valor da variável “testword”> 100, o sistema muda a página definida pelo usuário.

ID de entrada: 68011496, V2.1, 08/2018 29
1 Para alterar a localização, o URL apropriado deve ser atribuído aos números armazenados na
variável “headerLocation”.
Uma variável ENUM deve ser definida para este propósito.
2 Inicialização das variáveis da CPU e atribuição da variável ENUM.
3 Descrição da variável a ser verificada.

•

ID de entrada: 68011496, V2.1, 08/2018 30
10 Alterar o idioma em páginas definidas pelo usuário
10 Alterar idioma em páginas definidas pelo usuário
A tarefa é implementar uma opção de alteração de idioma (alemão / inglês) com ícones de sinalização nas páginas
definidas pelo usuário e adicionar idiomas personalizados a essa opção.
• Programe uma página definida pelo usuário sem textos.
• Crie um arquivo de texto com todos os textos em alemão e inglês.
• Altere o idioma usando a bandeira do país.
• Traduzir textos selecionados por JavaScript.
• Sincronize a opção de mudança de idioma das páginas definidas pelo usuário com a opção de mudança
de idioma das páginas da web padrão.
• Capacidade de expansão da opção de mudança de idioma.
Na página definida pelo usuário, você pode alternar entre alemão e inglês. Para fazer isso, clique no ícone de
bandeira apropriado.
Figura 10-1: Página definida pelo usuário para alterar o idioma

•

ID de entrada: 68011496, V2.1, 08/2018 31
No programa S7, apenas a função WWW é chamada.
Figura 10-2: Programa S7 para alterar o idioma
OB1
servidor web DB 333
a Principal
Web DB /
DB 334
Páginas definidas pelo usuário Fragment DB
SFC 99
WWW
Como funciona OB 1
Não. Função

10.2.2 Estrutura da página da web definida pelo usuário
A visão geral esquemática abaixo mostra a estrutura básica de arquivos das páginas definidas pelo usuário.
O termo “i18n” que se repete nas seções a seguir representa um processo de desenvolvimento de software para
implementar a opção de alteração de linguagem independentemente do código do programa real. O termo “i18n”
resulta da internacionalização, sendo 18 o número de letras entre “i” e “n”.
Para uma programação eficiente do código de script “Demo10.js” e programação compatível da função das páginas
definidas pelo usuário em navegadores, a biblioteca jQuery para JavaScript é integrada.
•
Figura 10-3: Visão geral esquemática da página da web definida pelo usuário
Arquivo HTML Arquivos JavaScript
Usuário definido Seleção de idioma e texto

Arquivo
Demo10.html Demo10.js i18n.0.0.1.js i18n.txt
biblioteca jQuery
de terceiros
jquery-2.1.3.min.js
fornecedor
função jQuery
de terceiros
jquery.cookie.js
fornecedor

ID de entrada: 68011496, V2.1, 08/2018 32
Demo10.html
O documento HTML define a estrutura da página definida pelo usuário e as chamadas dos arquivos JavaScript usados,
consulte o Capítulo 10.2.2.1 .
Em toda a estrutura do arquivo, a atribuição do idioma é garantida pelos identificadores “de” e “en”.
Demo10.js
Contém as funções interativas usadas para implementar as entradas do usuário, consulte o Capítulo
10.2.2.2 .
Também define o comportamento do cookie usado. A sintaxe do código do arquivo JavaScript é suportada pela
biblioteca jQuery.
i18n.txt
O arquivo de texto “i18n.txt” contém os elementos de texto multilíngue, “Demo10.html” e as funções de script
que são chamadas de “i18n: 0.0.1.js”.
i18n.0.0.1.js
Contém as funções para alterar o idioma e transferir os textos com o idioma específico de “i18n.txt” para o
documento HTML.
Figura 10-4: Elemento de código para alterar o idioma

•
jquery.cookie.js
O arquivo JavaScript fornece funções para definir e gerenciar cookies.
Neste contexto, o arquivo JavaScript “Demo10.js” usa essas funções e cria ou modifica o cookie existente da
página web padrão, consulte o Capítulo 10.2.2.2 . Para obter mais informações sobre o arquivo JavaScript usado
aqui, visite a seguinte página da web:
- https://github.com/carhartl/jquery-cookie
o https://github.com/carhartl/jquery-cookie/blob/d72bb07e29962330db61aae1eda07f6312419840/src/jquery.cookie.js
o https://github.com/js-cookie/js-cookie/tree/master/src
O arquivo de biblioteca jQuery permite uma programação mais eficiente com JavaScript. Para obter mais informações
sobre a biblioteca jQuery, consulte o Capítulo 4,3 .

ID de entrada: 68011496, V2.1, 08/2018 33
10.2.2.1 Demo10.html estrutura
1 Os arquivos JavaScript usados são integrados ao <head> do documento HTML com a sintaxe abaixo:
A propriedade “src” especifica o respectivo caminho do arquivo.
2 O cabeçalho da página da web não está integrado na opção de mudança de idioma.
Consiste em duas classes estruturantes, “demohead” e “demorow”, e os dois elementos de texto abaixo
com uma instrução de formatação apropriada.
Os textos estão diretamente no código HTML e não são traduzidos!

•
3 Alterar o idioma usando os ícones de bandeira é mostrado abaixo. Os ícones de

bandeira estão vinculados à classe “idioma”.
A classe “idioma” com a propriedade (data-lang = “..”) é atribuída aos elementos de mudança de idioma, aqui,
por exemplo, “Alemão”.
A propriedade (data-lang) especifica o idioma para o qual a página deve ser alterada. Observação: para
outras linguagens, a seção de código tem a mesma estrutura.

ID de entrada: 68011496, V2.1, 08/2018 34
4 Da mesma forma que o texto acima dos ícones de bandeira na página definida pelo usuário, os seguintes
elementos de texto HTML são alterados entre “de” e “en”.
A propriedade “data-i18n” refere-se a um nome identificável exclusivamente, por exemplo, “text.header” no arquivo “i18n.txt”.
Referência de Demo10.html a “I18n.txt”

O arquivo “i18n.txt” atribui os textos do respectivo idioma aos nomes de identificação, como
(“text.header”).
Portanto, “campo de texto com HTML ...” é exibido na página definida pelo usuário em vez de “texto.header”.
•

ID de entrada: 68011496, V2.1, 08/2018 35
10.2.2.2 Estrutura Demo10.js
1 O script contém primeiro a declaração da variável para as funções dos elementos de mudança de
linguagem da página HTML.
2 A seção de código a seguir implementa a atribuição dos textos aos botões e ao campo de saída.
Esquerda: elements.button1
Direita: elements.button2
Inferior: elements.output
3 Quando o usuário clica em um elemento com (class = “idioma”), o valor da propriedade (idioma) de
“data-lang” é transferido para a função “I18n.setLanguage” no script “i18n_0.0.1.js”.
Exemplo:
Ao mesmo tempo, a seleção do idioma é salva no

Cookie “siemens_automation_language” e sincronizado com a página da web padrão.
•
Quando a página definida pelo usuário é aberta pela primeira vez, o valor da função
“I18n.setLanguage” é aplicado a partir do cookie.
Se não houver cookie, o idioma é definido como “en” por padrão.
4 Quando clicada, a função exibe o texto no idioma atual com base no nome de identificação.
A propriedade “data-i18n” é definida para o ID atual, “java.output1”, para que o texto seja traduzido na
próxima vez que o idioma for alterado.
5 Nota:
Para mais informações sobre como alterar textos com JavaScript, consulte o código do arquivo
“Demo10.js”.

ID de entrada: 68011496, V2.1, 08/2018 36
10,3 Ampliando o exemplo
Adicione um idioma ao exemplo duplicando e modificando as seções do código. Adicione o identificador do idioma
desejado aos identificadores “de” / “en” - por exemplo, “fr” para francês ou “xx” como um espaço reservado para
qualquer idioma.
Adicionando novos ícones de bandeira
Para o novo idioma, você precisa de um ícone de bandeira apropriado de acordo com o exemplo, neste caso em formato
PNG. Copie o ícone da bandeira “xx.png” para a pasta “… / Imagens /”.
Estendendo Demo10.html
1. Estenda a seção de código conforme mostrado na figura.
2. No caminho “Imagens”, forneça uma referência ao ícone do novo sinalizador (xx.png).
3. Altere a atribuição de texto para “data-i18n”.
Figura 10-5: Extensão no código HTML

1
2 3
Estendendo i18n.txt
Adicione mais idiomas ao arquivo de texto “i18n.txt”. Os elementos de texto para “de” e “en” são atribuídos aos
•
nomes apropriados (por exemplo, “lang.en”). Como exemplo desses nomes, a figura a seguir mostra uma seção
de código que deve ser duplicada se você deseja adicionar um novo idioma. Proceda da mesma forma para
estender os elementos do texto.
1. Duplique a seção de código.
2. Adicione o novo item de idioma à seção de código.
3. Altere o nome para atribuir a nova seção de código, neste caso “lang.xx”.
Figura 10-6: Extensões no arquivo de texto

1

ID de entrada: 68011496, V2.1, 08/2018 37
11 Transferência de dados sem recarregar páginas usando AJAX
11 Transferência de dados sem recarregar páginas usando

AJAX
Quando os dados são trocados entre um servidor da web e um navegador da web, as páginas da web são totalmente recarregadas.
Isso limita o desempenho das atualizações que são executadas rapidamente.
Abaixo, você encontrará uma definição dos dois métodos de transferência de dados usados no exemplo.
AJAX
AJAX (“Asynchronous JavaScript and XML”) fornece um método para trocar dados de forma assíncrona entre
um navegador da web e o servidor da web. Os dados são trocados sem recarregar a própria página da web.
Quadro embutido
Os frames incorporados permitem que as páginas da web sejam divididas em segmentos para separar o conteúdo da
web ao redor.
Os conteúdos separados estão disponíveis como documentos HTML independentes e exibidos pela página principal da
web em uma área definida do navegador com um tamanho definido.
Portanto, o conteúdo do quadro embutido é atualizado simultaneamente com a página ao redor.
A diferença para AJAX fica clara no Firefox, pois a guia exibe um ícone para carregar a página da web e o
painel de status inferior exibe a mensagem “Waiting for192.168.0.1”.
Ao usar AJAX, essas mensagens não são exibidas porque a própria página da web não é recarregada.
Figura 11-1: atualização da página da Web no Firefox (frame embutido)

•

ID de entrada: 68011496, V2.1, 08/2018 38
A tarefa é ler os valores usando dois métodos diferentes: “AJAX” e “frame inline”. Para isso, duas páginas
definidas pelo usuário com a mesma estrutura devem ser programadas e conectadas entre si.
Função básica:
• Leia o valor de entrada para a velocidade de fluxo "Velocidade"
• Exibe o nível como uma barra, dependendo da velocidade do fluxo.
• Carregue ciclicamente um valor com a ajuda de um quadro embutido.
• Escreva um valor com o auxílio de um formulário.
• Carregue ciclicamente um valor com a ajuda de AJAX.
• Escreva um valor com a ajuda de AJAX.
Requisito para comunicação entre o STEP 7 e a página definida pelo usuário usando AJAX
Para que a atualização usando AJAX funcione, integre o formato do arquivo com o conteúdo dinâmico nas configurações da CPU.
Figura 11-2: Requisito - atualizar usando AJAX com "dat" no PASSO 7

. htm; .html ;. dat

•
Tabela 11-1: Instruções para adicionar um formato de arquivo
Degrau Instrução
1 No campo de entrada, adicione a extensão de arquivo “dat” a “.htm; .html;”.

ID de entrada: 68011496, V2.1, 08/2018 39
Na página definida pelo usuário, insira um valor para a velocidade de fluxo “Velocidade”. A barra azul na tela
inferior corresponde ao nível atual. Este nível aumenta dependendo da velocidade do fluxo.
Figura 11-3: Página definida pelo usuário para recarregar páginas usando AJAX / frame inline
3 4
1 1 2 2
Tabela 11-2: Página definida pelo usuário para recarregar páginas usando AJAX / frame inline
Item Descrição
11 É aqui que você insere novos valores para a velocidade do fluxo “Velocidade”. Este botão
22 transfere o valor inserido para o controlador. Dependendo do valor de entrada, a barra é
33 preenchida em azul.
44 Este link alterna a página definida pelo usuário entre quadro embutido e AJAX.
•
Degrau Instrução
1 No campo de entrada, insira um novo valor.
2 Selecione o botão e o valor será transferido para a CPU. Exibe o novo valor.
4 A barra é preenchida com a velocidade dependendo do valor.
O sistema exibe os dois métodos de transferência de valores. Ele acessa as mesmas variáveis do programa S7;
como resultado, a exibição do nível é sincronizada em ambas as páginas definidas pelo usuário.
Figura 11-4: Frame inline (esquerda), páginas definidas pelo usuário AJAX (direita)

ID de entrada: 68011496, V2.1, 08/2018 40
Uma reinicialização redefine as variáveis no DB 1 para seus valores iniciais. Ao executar o OB 1, a página definida pelo
usuário é atualizada pelo SFC 99.
Figura 11-5: programa S7 para recarregar páginas usando AJAX / frame inline
servidor web DB 333 OB1 OB100

Web DB / a Principal Comece
DB 334
Usuário definido Fragment DB
Páginas
SFC 99
WWW
DB 1
Velocidade-
Variáveis
Como funciona OB 100
Não. Função
1 As variáveis “DynValue” e “Velocity” são redefinidas no OB100.

• “DynValue” define o nível da barra. “Velocidade” define a
• velocidade de enchimento da barra.
Como funciona OB 1
Não. Função
•

2 Cada ciclo de OB 1 incrementa a variável “refValue“ ”em“ 1 ”. Quando o valor “2000” é alcançado, a variável
“dynValue” é aumentada em “1”. Esta variável do tipo [Byte] dimensiona a exibição do nível para 255 etapas.
Se o valor for aumentado em 255 + 1, a variável “dynValue” é redefinida para “0”.
Conteúdo do VelocityVariables DB (DB 1)
DB1 contém as variáveis para este exemplo.

ID de entrada: 68011496, V2.1, 08/2018 41
A visão geral esquemática abaixo mostra a estrutura básica de arquivos das páginas definidas pelo usuário.
Esta descrição se concentra nos elementos de código do arquivo JavaScript, o que torna o conhecimento básico de
HTML necessário para este exemplo de aplicação.
Figura 11-6: Visão geral esquemática da página definida pelo usuário
Arquivos HTML
Quadro embutido
Demo11.html update11.html
Folha de estilos
Ligação
demo.css
Script de base Ajax

de terceiros
ajaxbase.js
fornecedor
Demo11_ajax.
html
update.dat
Demo11.html
Define a estrutura da página definida pelo usuário e contém as funções JavaScript para atualizar as variáveis
S7 usando o quadro embutido. O <Head> da página definida pelo usuário contém as funções JavaScript.
•
update11.html (frame embutido para Demo11.html)
O quadro inline chama a função “ForceUpdate” do arquivo “demo11.html” para atualizar continuamente o tag
PLC “dynValue” (nível).
Demo11_ajax.html
Define a estrutura da página definida pelo usuário e contém as funções JavaScript para AJAX na
página definida pelo usuário <Head>.
As tags do PLC são atualizadas usando as funções JavaScript.
update11.dat
Contém as variáveis de referência “” dynValue ”e“ velocity ”que são chamadas do arquivo JavaScript em
Demo11_ajax.html. (Função “DoHttpRequest”).
demo.css
Define a folha de estilo para as páginas definidas pelo usuário para AJAX e quadro embutido.
ajaxbase.js
O arquivo JavaScript contém as funções de comunicação e troca de dados entre diferentes navegadores e
servidores da web.

ID de entrada: 68011496, V2.1, 08/2018 42
11.2.2.1 Demo11.html estrutura (frame inline)
Não. Demo.html
1 A função “Iniciar” é executada após cada atualização da página.
2 Duas funções são chamadas na função “Iniciar”.
• "Forçar atualização"
• A chamada “OnTimer” é atrasada em 1000 milissegundos.
“ForceUpdate” determina o comprimento da barra do documento HTML e o envia. A formatação para

Firefox e IE é feita para a exibição da barra.
•
“OnTimer” atualiza o valor de “DynValue” a cada 200ms. Para fazer isso, um

quadro embutido chama a função “ForceUpdate”.
3 Um formulário que envia valores usando um botão “enviar” é usado para escrever o valor “Velocidade”.

ID de entrada: 68011496, V2.1, 08/2018 43
11.2.2.2 Demo11_ajax.html structure (AJAX)
Não. Demo11_ajax.html
1 A função “Iniciar” é executada após cada atualização da página.
2 Três funções são chamadas na função “Iniciar”.
• “DetermineBrowser” determina o tipo de navegador (Mozilla, IE11, Chrome, etc.).

A função está incluída no arquivo “ajaxbase.js”.
"Forçar atualização"; mesma função que ao usar o quadro embutido para determinar o
comprimento da barra.
(Ver Capítulo 11.2.2.1)
• A chamada “OnTimer” é atrasada em 1000 milissegundos.
“OnTimer” atualiza o valor de DynValue a cada 200ms usando a chamada de função “DoHttpRequest” deste
arquivo: “ajaxbase.js”.
Quatro valores são transferidos para a função.
1. O objeto que chamou a função atual.
2. O URL “update11.dat” com as variáveis a serem atualizadas.
3. A função “UpdateCallback” que processa posteriormente o valor e o código de status.
4- O valor “verdadeiro” indica que a transferência de dados é assíncrona.
Quando todos os valores forem atualizados, a função “UpdateCallback” é chamada.

•

ID de entrada: 68011496, V2.1, 08/2018 44
4 A função “UpdateCallback” processa os valores lidos e o código de status.

A variável “resposta” contém os valores atualizados dos tags PLC. Para processamento em um
arquivo JavaScript, os valores devem ser divididos e reatribuídos.
A variável “status” contém o código de status HTTP atual.
Se o código de status HTTP for inferior a 300, a função “ForceUpdate” é chamada e o comprimento da barra
atualizada é calculado.
•

ID de entrada: 68011496, V2.1, 08/2018 45
5 Selecionar o botão “Enviar via AJAX” chama a função “send_ajax_request”.
A função “send_ajax_request” transfere o valor inserido para a CPU.

•

ID de entrada: 68011496, V2.1, 08/2018 46
12 Exibição de dados de um registro de dados como um gráfico
12 Exibindo dados de um registro de dados como um gráfico
A tarefa é salvar os valores das variáveis em um datalog usando o controlador S7.
Os registros de dados são arquivos CSV que são gravados no cartão de memória ou na memória de carga interna da CPU.
O volume de dados depende da memória disponível.
Os dados do datalog devem ser exibidos em uma página definida pelo usuário como um gráfico. Os dados não são atualizados
antes que o usuário clique em um botão [Carregar novos dados].
Nota Neste exemplo, os valores de seno e cosseno são ciclicamente gravados no SMC ou na memória da CPU.
Com relação aos ciclos de leitura / gravação, consulte esta entrada:
Como alternativa, você pode programar um buffer de anel para os valores que é usado para salvar um número
limitado de valores e exibi-los no gráfico.
• Leia ciclicamente um datalog.
• Classifique cronologicamente os dados lidos.
• Exiba os dados como um gráfico.

•

ID de entrada: 68011496, V2.1, 08/2018 47
A página definida pelo usuário exibe os dados do datalog em um gráfico de linha. O nome do arquivo CSV
do datalog é “SinusUndCosinus.csv”.
Figura 12-1: Página definida pelo usuário para exibir dados de um datalog em um gráfico de linha
2
•
Tabela 12-1: Página definida pelo usuário para exibir dados de um datalog em um gráfico de linha
Item Descrição
11 Registro de dados armazenado no cartão de memória como arquivo “SinusUndCosinus.csv”
22 Gráfico exibido na página definida pelo usuário (arquivo fonte: “SinusUndCosinus.csv”) Botão para atualizar
3 dados [Carregar novos dados]

ID de entrada: 68011496, V2.1, 08/2018 48
Ao executar o OB 1, a página definida pelo usuário é atualizada pelo SFC 99.
Figura 12-2: programa S7 para exibir dados de um datalog em um gráfico de linha
OB1
servidor web DB 333
a Principal
Web DB /
DB 334
Fragment DB
Páginas definidas pelo usuário SFC 99
WWW
DB2 FB 1
ControlCounter Contador
Como funciona OB 1
Não. Função

2 FB 1 calcula os valores de seno e cosseno e cria um datalog. Os parâmetros e o nome do arquivo CSV do datalog são
gravados em variáveis estáticas. Os valores de seno e cosseno são salvos ciclicamente neste registro de dados.
•
O status e o código de erro e o parâmetro de entrada para excluir o conteúdo do datalog são armazenados no DB 2.

ID de entrada: 68011496, V2.1, 08/2018 49
A visão geral esquemática abaixo mostra a estrutura básica do arquivo do exemplo.
Arquivos HTML Arquivo JavaScript
Quadro embutido Usuário definido Biblioteca de

Arquivo Siemens
Demo12.html Demo12.js S7_framework.js
Bibliotecas de
fornecedores terceirizados
jquery-2.1.3.min.js
jquery.flot.min.js
jquery.flot. time.min.js
•

ID de entrada: 68011496, V2.1, 08/2018 50
Demo12.html com (recipiente de gráfico)
Define a estrutura da página definida pelo usuário e inclui um contêiner para exibir o gráfico. Os arquivos
JavaScript são integrados ao documento HTML para exibir o gráfico.
Figura 12-4: Demo12.html com gráfico
Tabela 12-2: Demo12.html com gráfico
Item Descrição
1 Demo12.html
2 Recipiente de gráfico com acesso aos dados do datalog
Demo.js
O arquivo “Demo12.js” chama funções de diferentes bibliotecas para criar um gráfico a partir dos dados de um
datalog (arquivo CSV). Para obter informações sobre o processamento dos dados, consulte o código-fonte.
jquery.flot.min.js e jquery.flot.time.min.js (modelo de gráfico)
Esses arquivos JavaScript calculam o gráfico na exibição do quadro embutido. A programação

usou elementos da biblioteca jQuery.
•
Para mais informações visite: http://www.flotcharts.org/
S7_framework.js
O arquivo JavaScript contém várias funções para conversão e processamento de dados de um SIMATIC S7.
Para obter mais informações sobre o S7 Framework, consulte o Capítulo 4,3 .
S7_framework.css
Define a folha de estilo para as páginas HTML definidas pelo usuário

ID de entrada: 68011496, V2.1, 08/2018 51
Não. Demo12.html seção de código
A propriedade “src” especifica o respectivo caminho do arquivo. As páginas definidas pelo usuário não podem acessar diretamente
um datalog.
2 Os arquivos CSV do datalog são armazenados na página da web padrão que deve ser aberta para acesso.
O gráfico é chamado em um elemento de contêiner.

A tag “graphic-container” “div” é um espaço reservado para o gráfico.

O arquivo JavaScript “Demo12.js” compõe o gráfico no espaço reservado.
•

ID de entrada: 68011496, V2.1, 08/2018 52
1 Determinando o tipo de CPU (S7-1200 ou S7-1500)

No arquivo JavaScript “Demo12.js”, uma função para determinar se um S7-1200 ou S7-1500 é usado é
executada em “$ (document) .ready (function () {}”.
Alternativamente, você pode chamar diretamente as funções de “$ .init” em “$ (document)

.ready (function [] {}”.
Substitua “plcType” por “1200” ou “1500”, incluindo aspas.
O tipo de PLC é transferido para o S7 Framework com a seguinte função.

Como alternativa, escreva “1200” ou “1500” para plcType.

Exemplo: S7Framework.initalize (“1200”, “”);
2 Datalog (ler valores)

•
A função “readDataLog” lê datalogs.
O nome do datalog “SinusUndCosinus” deve ser transferido para a função. O texto como mensagem
de erro é opcional.
O nome da função “decodeCSV” é o destino dos valores lidos.
3 Datalog (valores de processo)
A função “decodeCSV” processa os valores do datalog.
Todos os valores de tempo são convertidos para o formato [Date.UTC] e classificados cronologicamente.
Os dados são preparados para o modelo de gráfico e avaliados no arquivo JavaScript

(jquery.flot.time.min.js).
Esta função também define as propriedades do gráfico. (Por exemplo,
conecte pontos, sem etapas no gráfico.)

ID de entrada: 68011496, V2.1, 08/2018 53
13 Elementos de exibição usando gráficos vetoriais escaláveis
13,1 Tarefa de programação
A tarefa é criar uma seleção de elementos de exibição usando Scalable Vector Graphics (SVG). Os
navegadores compatíveis com HTML5 suportam essa técnica.
• Crie elementos SVG
• Dinamize elementos SVG usando JavaScript
Nota Este exemplo não contém um programa S7 específico. Os elementos de exibição não acessam explicitamente os
dados de um SIMATIC S7.
Você encontrará o arquivo HTML na pasta do projeto em “html_indicatingElements”.
A página definida pelo usuário mostra diferentes elementos de exibição que podem ser modificados e controlados usando um
controle deslizante abaixo dos elementos de exibição. Para conexão a um S7, substitua o controle deslizante pelas variáveis
UDP apropriadas.
Figura 13-1: Página definida pelo usuário com elementos de exibição SVG (Scalable Vector Graphics)
•

ID de entrada: 68011496, V2.1, 08/2018 54
13.2.1 Elemento SVG de amostra - movimento rotativo de um motor
Elementos SVG de programação
Defina a forma dos elementos de exibição SVG pelo código HTML. Programe um arquivo JavaScript para as
funções de movimento. Em geral, use as variáveis de entrada para alterar a posição / rotação de elementos
circulares / retangulares.
As variáveis de entrada são implementadas por controles deslizantes abaixo dos elementos SVG.
A figura a seguir mostra um exemplo de movimento rotativo de um motor e a seção de código associada no
documento HTML. O motor é composto por um total de três elementos circulares.
O movimento rotativo é implementado por uma linha tracejada (branca, vermelha, branca, vermelha) que gira dentro de um
segundo círculo para o limite externo. O círculo interno representa o came do rotor.
Você pode dimensionar o motor alterando os valores entre aspas. Sempre altere o valor da linha tracejada
de forma que a circunferência do círculo corresponda exatamente a 4 traços. O parâmetro específico para
isso é chamado “stroke-dasharray”.
Figura 13-2: Exemplo de elemento de exibição SVG - design do motor

1
•
Tabela 13-1: Elementos de exibição do projeto do motor
Item Descrição
1 Círculos: Defina a posição, tamanho e cores para três elementos circulares. Elemento
2 Slider: gráfico para inserir valores.
3 Função: girar o motor
Nota Para estender seu aplicativo, copie a seção de código do elemento SVG diretamente para o seu documento HTML. Se
necessário, substitua a variável de entrada do elemento deslizante conforme necessário para seu aplicativo.

ID de entrada: 68011496, V2.1, 08/2018 55
Não. Seções de código de (medidor)
1 <svg width = “110” height = “110”>

… </svg>
A tag “svg” define a área gráfica.
A área gráfica começa no canto superior esquerdo e o tamanho dos eixos coordenados corresponde ao
tamanho do gráfico em pixels.
Na tag “svg”, você pode criar os seguintes elementos:
2 <círculo cx = “55” cy = “55” r = “40” />
A tag “círculo” cria um círculo.

A propriedade “cx” especifica a posição do ponto central no eixo X, “cy” define a posição
correspondente no eixo Y. A propriedade “r” especifica o raio.
3 curso = “# ff0033”
A propriedade “traço” especifica a cor da borda / cor da linha dos elementos SVG.
4 largura do traço = “20”
A propriedade “largura do traço” especifica a espessura da borda / espessura da linha dos elementos SVG.
5 stroke-dasharray = “188,25 63,08”

A propriedade “stroke-dasharray” exclui partes da borda ou uma linha de elementos SVG.
•
O primeiro valor especifica o comprimento a ser mostrado. O segundo valor especifica o comprimento a ser excluído.
Os dois comprimentos alternam na borda / linha até que eles circulem em torno da borda / alcancem o final da linha.
Como resultado, você obtém uma borda / linha tracejada.
Nota: para círculos, a borda é a circunferência. É calculado da

seguinte forma: 2 * π * r.
6 preencher = “branco”
A propriedade “fill” especifica a cor de preenchimento ou cor da fonte do elemento SVG.
7 transformar = “girar (135, 55, 55)”

A propriedade “transform rotate” gira os elementos SVG. O primeiro número é o número de graus e
especifica até que ponto o elemento será girado. O segundo e o terceiro número especificam o ponto em
torno do qual o elemento será girado.
8 id = “gauge.pointer”
A propriedade “id” atribui a um elemento SVG um ID a ser acessado usando JavaScript.

ID de entrada: 68011496, V2.1, 08/2018 56
Não. Seção de código de (tanque)
1 <rect x = “10” y = “10” largura = “30” altura = “10” />

A tag “rect” cria um retângulo. A propriedade “x” especifica o ponto superior esquerdo do retângulo no
eixo X, “y” define o ponto correspondente no eixo Y. A propriedade “largura” especifica a largura e
“altura” define a altura do retângulo.
2 <linha x1 = “40” y1 = “10” x2 = “40” y2 = “110” />

A tag “line” cria uma linha. As propriedades “x1” e “y1” especificam o ponto inicial da linha. As propriedades
“x2” e “y2” especificam o ponto final da linha.
3 <pontos do polígono = “50,55 60,55 55,5” />
A tag “polígono” cria um polígono. A propriedade “points” especifica os cantos do polígono.
4 <text x = “40” y = “35” font-size = “10” font-family = “Helvetica, Arial, sans-serif”>

Rapidez
</text>
A tag “text” cria texto.
A propriedade “x” especifica a posição do ponto inferior direito do campo de texto no eixo X, “y”
define o ponto correspondente no eixo Y.
A propriedade “font-size” especifica o tamanho da fonte. A
propriedade “font-family” especifica a fonte. O texto desejado é
escrito nesta tag.
Não. Seção de código (estrutura de um script JavaScript)
1 <script>
•
var newValue
…
document.getElementById (“gauge.pointer”).
setAttribute (“transform”, “rotate (“ + newValue + ”, 55,55)”)
</script>
“Document.getElementById ()”
Especifica o elemento a ser acessado ou modificado.
“SetAttribute”
A função altera a propriedade dos elementos. Os elementos que não representam variáveis
JavaScript são colocados entre aspas. Antes de executar a função, as variáveis JavaScript são
substituídas pelo valor da variável.
Nota Para obter mais informações sobre a criação de elementos SVG, visite:
http://www.w3schools.com/html/html5_svg.asp
http://www.w3schools.com/graphics/svg_intro.asp
http://wiki.selfhtml.org/wiki/SVG

ID de entrada: 68011496, V2.1, 08/2018 57
14 Diagnósticos S7 e Indicador de Carga
14 Diagnóstico S7 e indicador de carregamento
Na página web padrão, o servidor web S7 oferece a opção de leitura do buffer de diagnóstico da UCP.
Na prática, um possível requisito pode ser exibir o buffer de diagnóstico em conjunto com outras informações
em uma página definida pelo usuário.
A tarefa é programar uma página definida pelo usuário que exibe o buffer de diagnóstico do controlador S7. O
carregamento deve ser indicado por um ícone animado como um indicador de carregamento.
• Exibir informações de diagnóstico do controlador S7 em uma página definida pelo usuário
• Integre um indicador de carregamento com o S7 Framework
A página definida pelo usuário exibe as informações de diagnóstico da CPU. Clicar em uma mensagem de
diagnóstico exibe informações detalhadas sobre essa mensagem abaixo da tabela.
Figura 14-1: Página definida pelo usuário com dados de diagnóstico

•

ID de entrada: 68011496, V2.1, 08/2018 58
No programa S7, apenas o SFC 99 é chamado.
Figura 14-2: Programa S7 para a página definida pelo usuário com dados de diagnóstico e indicador de carregamento

DB 334
Fragment DB

WWW
Como funciona OB 1
Não. Função


A visão geral esquemática abaixo mostra a estrutura básica da página definida pelo usuário.

•
Arquivos de
Biblioteca do terceiro-
Siemens
vendedor de festa
Diagnóstico jquery
Demo14.html
_0.0.3.js - 2.1.3.min.js
Usuário definido
Arquivo
Demo14.js S7_framework.js

ID de entrada: 68011496, V2.1, 08/2018 59
Demo14.html
O documento HTML define a estrutura da página definida pelo usuário e as chamadas dos arquivos JavaScript
usados, consulte o Capítulo 14.2.2.1. O documento define que clicar nas mensagens de diagnóstico as exibe em
uma tabela.
Demo14.js
O arquivo JavaScript integra o S7 Framework para iniciar o indicador de carregamento.
diagnostic_0.0.1.js
O arquivo “diagnostic_0.0.1.js” acessa tags com um ID definido. A tela de diagnóstico

é inserida nessas tags.
S7_framework.js
Para obter mais informações sobre o S7 Framework, consulte o Capítulo 4.3.
sobre a biblioteca jQuery, consulte o Capítulo 4.3.
diag.css (folha de estilo)

Folha de estilo para o indicador de carregamento. Esta folha de estilo define a posição e a animação da web para o
arquivo “… \ img \ sprites.png”.
S7_diagnostic.css (folha de estilo)
Folha de estilo para desenhar a mesa com as informações de diagnóstico.
Carga / Sprites (imagens)

•
O indicador de carregamento é um arquivo animado no formato GIF que acessa os elementos gráficos de um arquivo PNG
conforme mostrado abaixo.
Figura 14-4: Projetando a imagem para o indicador de carga
Tabela 14-1: Visão geral esquemática da página definida pelo usuário
Item Descrição
1 Arquivo de origem PNG com 12 imagens individuais, “sprites.png”
2 Arquivo de destino GIF com mudança de tempo das imagens individuais (animação), “load.gif”

ID de entrada: 68011496, V2.1, 08/2018 60
1 As folhas de estilo e os arquivos JavaScript usados são integrados ao <head> do documento

HTML:
Folhas de estilo: <link rel =…>
Arquivos JavaScript: <tipo de script =…>
A propriedade “src” especifica o respectivo caminho do arquivo. O indicador
2 de carregamento é exibido nesta tag “div”.
3 Nesta tag “div”, as informações de diagnóstico são exibidas como uma tabela.
4 Nessa tag “div”, as informações de “Evento” de uma mensagem de diagnóstico são exibidas na tabela quando a
mensagem apropriada é clicada.
•

ID de entrada: 68011496, V2.1, 08/2018 61


2 Esta função transfere o tipo de CPU e o ID da tag “div” onde o indicador de carregamento deve ser
exibido para o S7 Framework.
O S7 Framework detecta quando uma função AJAX é executada e mostra / oculta o indicador de
carregamento de acordo.
Esta função executa o script de diagnostic_0.0.3.js.

Ele insere as informações de diagnóstico nas tags “div” do arquivo HTML.
•
As tags “div” são identificadas pelos IDs apropriados.
O indicador de carregamento é mostrado quando o tag “div” com ID “diagTableDiv” está vazio. A consulta a seguir
está programada para isso.

ID de entrada: 68011496, V2.1, 08/2018 62
14.2.2.3 estrutura diag.css
1 A imagem “sprites.png” para o indicador de carregamento está na pasta “img”. O arquivo “diag.css” faz
referência à imagem sprites.png conforme mostrado abaixo.

•

ID de entrada: 68011496, V2.1, 08/2018 63
15 Alterando Imagens Usando JavaScript
15 Alterar imagens usando JavaScript
15,1 Tarefa de programação
A tarefa é mudar uma imagem dependendo de uma variável JavaScript.
• Exibir imagens dependendo de uma variável JavaScript
Nota Este exemplo não possui programa S7. Você encontrará o arquivo HTML na pasta do projeto em
“html_pictureChange”.
A página definida pelo usuário exibe uma imagem com dois botões abaixo dela.
Figura 15-1: Página definida pelo usuário para alterar imagens usando uma variável JavaScript
•
Degrau Instrução
1 Selecione o botão “Vermelho” e a imagem vermelha será exibida. Selecione o

2 botão “Verde” e a imagem verde será exibida.

ID de entrada: 68011496, V2.1, 08/2018 64
15 Alterando Imagens Usando JavaScript
Criação de elementos SVG
1 Com este elemento HTML, a imagem vermelha é exibida ao iniciar a página definida pelo usuário.
2 Com esses elementos HTML, um botão rotulado como “Vermelho” e um botão rotulado como “Verde” são
exibidos.
Clicar no botão “Verde” aciona a função JavaScript “changePic” e transfere o valor “verde”
para ela. No arquivo JavaScript, o parâmetro (cor) inclui, portanto, o valor (verde).
3 A função “changePic” é definida em uma parte JavaScript do arquivo HTML.

Para alterar uma imagem dependendo de um tag PLC, o tag PLC deve ser lido ciclicamente. A leitura cíclica
é feita pela instrução IF.
Quando o valor “verde” for transferido para a função, o caminho anterior para a imagem vermelha é
alterado para o caminho da imagem verde.
Como resultado, a imagem verde é exibida.

•

ID de entrada: 68011496, V2.1, 08/2018 65
16 Botão para Reiniciar CPU
16 Botão para reiniciar CPU
A tarefa é parar e reiniciar automaticamente a CPU usando um botão.
• Implemente um botão para reiniciar a CPU
Selecionar o botão “Reiniciar PLC” para e então reinicia automaticamente a CPU.
Tecnicamente, esta é uma reinicialização a quente da CPU. A execução do programa é reiniciada e os dados retentivos são
retidos.
Figura 16-1: Página definida pelo usuário com botão para reiniciar CPU
•

ID de entrada: 68011496, V2.1, 08/2018 66
Figura 16-2: Programa S7 para página definida pelo usuário com botão para reiniciar CPU

DB 334
Páginas definidas pelo usuário Fragment DB
SFC 99
WWW
Como funciona OB 1
Não. Função

A visão geral esquemática abaixo mostra a estrutura básica de arquivos da página definida pelo usuário.

Usuário definido Biblioteca de Biblioteca de

Arquivo Siemens fornecedor terceirizado

•
jquery-
2.1.3.min.js
Demo16.html
No arquivo “Demo16.html”, todos os arquivos JavaScript estão integrados e o botão é definido.
Demo16.js
O arquivo JavaScript realiza a reinicialização com o auxílio de “S7_framework.js”.
S7_framework.js

ID de entrada: 68011496, V2.1, 08/2018 67
1 Os arquivos JavaScript usados são integrados ao <head> do documento HTML:
A propriedade “src” especifica o respectivo caminho do arquivo. Crie um
2 botão denominado “PLC Restart”.

•

2 A função “S7Framework.initialize (plcType,“ ”)” transfere o tipo de CPU para o S7 Framework.
Selecionar o botão com o ID “reiniciar” reinicia a CPU usando o

“S7Framework.restartCPU ();” função.

ID de entrada: 68011496, V2.1, 08/2018 68
17 Login em páginas definidas pelo usuário
A tarefa é exibir as páginas definidas pelo usuário em uma janela de login separada.
• Integrar a janela de login
• Edite as propriedades de estilo da janela de login
Na página definida pelo usuário, você faz o login usando os campos de entrada e o botão “Login”. Use as informações de
login listadas no Capítulo 4,1 .
Figura 17-1: Login em páginas definidas pelo usuário

•

ID de entrada: 68011496, V2.1, 08/2018 69
Figura 17-2: Programa S7 para login na página definida pelo usuário

DB 334
Fragment DB
WWW
Como funciona OB 1
Não. Função

17.2.2 Estrutura de página definida pelo usuário

Usuário definido Biblioteca de

Arquivo Siemens Biblioteca de
fornecedor terceirizado
jquery-
•
2.1.3.min.js
Demo17.html
Todos os arquivos JavaScript são integrados ao arquivo “Demo17.html”.
Demo17.js
O arquivo JavaScript permite que o usuário efetue login e logout com o auxílio de
“S7_framework.js”.
S7_framework.js

ID de entrada: 68011496, V2.1, 08/2018 70
2 A caixa “login” “div” define a área de login como um quadro embutido com a fonte “src =…” da
página da web padrão.
Usando o arquivo JavaScript, a janela de login é inserida na caixa “loginBox” “div”.
3 Na tag <style>, os IDs apropriados ou a classe são acessados para alterar as propriedades de estilo dos
campos de entrada e botões.
•

ID de entrada: 68011496, V2.1, 08/2018 71


2 Esta função transfere o tipo de CPU para o S7 Framework.

3 Quando a página é carregada, o sistema verifica se o usuário já está conectado através da página da web
padrão ou uma operação de login anterior.
Se nenhum usuário estiver conectado, uma janela pop-up aparecerá dizendo: “Por
favor, faça o login!”

•

ID de entrada: 68011496, V2.1, 08/2018 72
18 Comunicação de alto desempenho por meio de uma corda
18 Comunicação de alto desempenho por meio de uma string
Quando os dados são trocados entre um servidor web e um navegador web, as variáveis são transferidas
individualmente. Se você deseja implementar uma troca de dados abrangente e de alto desempenho entre o
servidor da web e o controlador, isso é obtido por meio da comunicação de uma string concatenada. Como outra
medida para aumentar o desempenho, use AJAX.
AJAX
AJAX (“Asynchronous JavaScript and XML”) fornece um método para trocar dados de forma assíncrona entre
um navegador da web e o servidor da web. Os dados são trocados sem recarregar a própria página da web.
Transferência de alto desempenho de grandes volumes de dados para o controlador.
• Os valores no controlador são convertidos em uma string ASCII com no máximo 255 caracteres.
• As strings ASCII são lidas ciclicamente usando o S7 Framework (JavaScript) e divididas em variáveis
únicas.
• Os valores são enviados individualmente ao controlador. Os valores são
• enviados de um formulário para o controlador.
Requisito para comunicação entre o STEP 7 e a página definida pelo usuário usando AJAX
A atualização e gravação de tags PLC usando AJAX são implementadas na página definida pelo usuário. Para isso, o formato
de arquivo “json” deve ser adicionado às propriedades da página definidas pelo usuário em “Arquivos com conteúdo
•
dinâmico:”.
Figura 18-1: Requisito - atualização usando AJAX com json no S7
. htm; .html ;. json
Tabela 18-1: Instruções para adicionar um formato de arquivo
Degrau Instrução
1 No campo de entrada, adicione a extensão de arquivo “json” a “.htm; .html;”.

ID de entrada: 68011496, V2.1, 08/2018 73
A página definida pelo usuário simula um pacote (retângulo cinza) que se move da esquerda para a direita na
área de exibição delimitada em preto. O valor inserido em “Velocidade” controla a velocidade do pacote.
Quando a embalagem chega ao sensor (círculo verde), este sensor muda de “verde” para “vermelho”. Uma linha
horizontal preta marca a faixa de detecção do sensor; uma contagem abaixo desta linha mostra os pacotes
detectados.
O botão [enviar] transfere as informações inseridas para nome e idade para o controlador.
Figura 18-2: Página definida pelo usuário para transferência de dados de alto desempenho usando AJAX
2
3
1 5
3
•
4
4
6
Tabela 18-2: Página definida pelo usuário para transferência de dados de alto desempenho usando AJAX
Item Descrição
1 Com o valor “Velocidade”, você influencia a velocidade da embalagem. Estado do
2 sinal do sensor: (verde = livre; vermelho = pacote detectado) Contagem que mostra
3 os pacotes que já passaram. [enviar] transfere o “nome” e “idade” para o controlador.
Degrau Instrução
1 Altere a “Velocidade”.
2 Digite o “nome” e a “idade” do destinatário do pacote. Selecione o
3 botão “enviar”.
4 No Portal TIA, abra o bloco de dados “Plc2Web”. Clique em
5 “Monitorar”.
6 Verifique se o nome e a idade foram recebidos.

ID de entrada: 68011496, V2.1, 08/2018 74
A função WWW do OB 1 é chamada no programa S7.
FB 1 “Contador” é usado para simular a embalagem e o sensor. FC 1 “WebCom” é usado
para converter as variáveis em uma string.
Figura 18-3: Programa S7 para transferência de dados de alto desempenho usando AJAX
servidor web OB1

DB 333 a Principal
Web DB /
DB 334
Usuário definido
Fragment DB SFC 99
Páginas
WWW
DB 1 FB 1
Plc2Web Contador
FC 1
WebCom
•

ID de entrada: 68011496, V2.1, 08/2018 75
Como funciona o programa PLC
Não. Função

2 FB 1 “Contador” - (simulação)
O bloco de funções calcula as seguintes variáveis de saída como valores de simulação para a sequência
exibida na página da web.
posição:
calcula a posição do pacote.
barreira de luz:
verifica se o pacote está abaixo do sensor.
contra-pacotes:
Se o sensor detectar um pacote, uma contagem é incrementada.
•

ID de entrada: 68011496, V2.1, 08/2018 76
Não. Função
3 FC 1 “WebCom” - (comunicação na web)

A função inicialmente converte os valores de simulação de FB 1 em uma variável “webString”. A
variável de string “webserverString” segue esta variável.
Se você deseja transferir valores adicionais, você deve estender a string neste bloco.
A função de sistema “HTA” do TIA Portal converte os seguintes tipos de variáveis em uma string ASCII.
• SINT
• INT
• FIO
• FORÇA
Exemplo:
•
Se você deseja converter variáveis do tipo REAL ou LREAL, certifique-se primeiro de convertê-las em
DWORD ou LWORD. Em seguida, converta essas variáveis em DINT ou LINT.
Um bit é convertido em uma string ASCII usando uma instrução IF.
Geral: Exemplo:
SE bool ENTÃO
char: = „1„;
OUTRO
char: = „0„;
FIM SE;
A função “CONCAT” concatena duas strings ASCII.
Exemplo:

ID de entrada: 68011496, V2.1, 08/2018 77
Não. Função
4 DB 1 “Plc2Web”
DB1 contém todas as variáveis que são enviadas da CPU para a página definida pelo usuário ou lidas.
O bloco de dados também contém a variável de string concatenada, “webserverString”.
Esta descrição se concentra nos elementos de código do arquivo JavaScript, o que torna o conhecimento básico de
HTML necessário para este exemplo de aplicação.

•
Arquivos JavaScript
Arquivo HTML
Usuário definido Biblioteca de

Biblioteca de
Arquivo Siemens
terceiro
fabricante
jquery-
2.1.3.min.js
Arquivos JSON
data.json
Controlador

ID de entrada: 68011496, V2.1, 08/2018 78
Demo18.html
Todos os arquivos JavaScript são integrados ao arquivo “Demo18.html”.
Demo18.js
O arquivo JavaScript “Demo18.js” controla a leitura / gravação de / para o controlador chamando funções da
biblioteca “S7_framework.js”.
S7_framework.js
O arquivo Demo18.js usa funções do S7 Framework para transferir dados por meio de arquivos JSON.
data.json (JSON)
O arquivo é usado para ler / gravar a string concatenada usando as funções do S7 Framework.
•

ID de entrada: 68011496, V2.1, 08/2018 79

•

2 Esta função transfere o tipo de CPU para o S7 Framework.
3 A função “S7Framework.readData” lê as tags PLC especificadas no arquivo json selecionado (data.json).

Quando a função é executada, o manipulador de eventos especificado (updateValues) é executado.
4 A função “updateValues” processa ainda mais os valores lidos. Os valores são transferidos para a
matriz “valores”.
Primeiro valor = valores [0]
Segundo valor = valores [1] ... etc.

ID de entrada: 68011496, V2.1, 08/2018 80
18.2.2.3 estrutura data.json
1 data.json
O arquivo “data.json” contém as informações para a leitura da string, bem como os parâmetros da
string e os comandos UDP dos tags do PLC a serem gravados.
As informações para escrever a string correspondem às informações para ler.
A string a ser lida é definida: A estrutura Plc2Web.webserverString

da string é definida: Comprimento; tipo; outras variáveis de string
DINT (DINT) + BOOL (BOOL) + INT (INT)

“Val” corresponde à string a ser lida.
“Len” descreve o “comprimento” da variável (tipo de variável)

1 = 1 bit => corresponde a: BOOL 2 = 8 bits
=> corresponde a: BYTE
4 = 16 bits => corresponde a: INT / WORD
8 = 32 bits => corresponde a: DINT / DWORD / REAL 16 = 64 bits =>
corresponde a: LINT / LWORD / LREAL
•
“Typ” descreve o tipo de variável (definido no S7 Framework)

0 = BOOL;
1 = UINT;
2 = INT / DINT;
3 = REAL;
4 = LREAL;
5 = STRING;
“Str” é usado para carregar variáveis que não foram convertidas para a string.

ID de entrada: 68011496, V2.1, 08/2018 81
19 Instalação
19 Instalação
19,1 Instalando o hardware e software
Instalando o hardware
A figura a seguir mostra a configuração de hardware para os exemplos.
O PC (navegador da web) é conectado à CPU (servidor da web) via Ethernet Industrial usando a interface PN.
Os controladores SIMATIC S7 foram usados separadamente, pois os exemplos usam apenas um endereço IP para o
controlador S7.
Figura 19-1: Configuração de hardware dos exemplos
PROFINET
Ethernet industrial
Editor HTML SIMATIC STEP

S7-1500 S7-1200
7 V14
Navegador
Nota Siga as orientações de instalação e conexão fornecidas nos manuais e instruções de instalação
apropriados.
•
Instalando o software
Tabela 19-1: Instalando os pacotes de software para os exemplos
Não. Açao
1 Instale o SIMATIC STEP 7 Professional (TIA Portal).
2 Instale uma ferramenta para criar a página definida pelo usuário, por exemplo, MS Expressions, Notepad ++, no
PC que deseja usar para criar a página definida pelo usuário.
3- Instale um navegador da web, por exemplo, Internet Explorer ou Firefox, no PC que deseja usar para acessar as
páginas da CPU na web.

ID de entrada: 68011496, V2.1, 08/2018 82
19 Instalação
19,2 Exemplo de instalação do aplicativo
Tabela 19-2: Procedimento para usar os exemplos
Não. Açao Comente
1 Descompacte o -
“68011496_examples_for_S7WebServer_CODE_v11
. zip ”para o diretório do seu projeto.
2 Inicie o SIMATIC STEP 7 V14. -
3- No SIMATIC STEP 7 V14, abra o projeto. -
4- Selecione o programa desejado. Os programas são numerados -

pelos números dos capítulos na documentação.
5 Vá para a visualização do dispositivo. -
6 Se você quiser usar uma CPU diferente, substitua a CPU no catálogo -

de hardware.
7 Nas propriedades da CPU da interface Ethernet, atribua o -

endereço IP de sua CPU.
8 Selecione a CPU e baixe todo o projeto para a CPU. -
9 Inicie um navegador da web e use o endereço IP para abrir a página da Para maiores informações,
web de sua CPU. consulte o capítulo “Uso” dos
exemplos.
•

ID de entrada: 68011496, V2.1, 08/2018 83
20 links de internet
20 Links de internet
Esta tabela fornece uma seleção de links para informações relacionadas.
Tabela 20-1: Links da Internet
Não. Tema
/1/ Suporte online da Siemens Industry

http://support.automation.siemens.com
/2/ Referência à entrada

/3/ HTML, CSS, JavaScript,

http://www.w3schools.com
/4/ Manual de funções do servidor Web S7-1500
/5/ SVG, w3schools

http://www.w3schools.com/svg/default.asp
/6/ jQuery Flot

http://www.flotcharts.org/
/7/ jQuery
https://jquery.com/
•

ID de entrada: 68011496, V2.1, 08/2018 84
21 História
21 História
Tabela 21-1: Histórico do documento
Versão Encontro Modificações
V1.0 08/2015 Primeira versão
V 2.0 04/2017 Os seguintes exemplos foram revisados:

• Mudar idioma
• Criação de um gráfico
Os seguintes exemplos foram adicionados:
• Criação de elementos de exibição
• Alterar imagens usando JavaScript

• Integrando um botão para reiniciar a CPU
• Integrando a opção de login
• Transferência de dados de alto desempenho usando variáveis convertidas em strings
V 2.1 20/0818 Exemplo 18: adaptações de código

•

ID de entrada: 68011496, V2.1, 08/2018 85

Examples For S7WebServer DOC v21 en - En.pt

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Examples For S7WebServer DOC v21 en - En.pt

Enviado por

Direitos autorais:

Formatos disponíveis

Exemplos para o

STEP 7 Basic (TIA Portal), STEP 7 Professional (TIA Portal)

Os termos de uso da Siemens ( https://support.industry.siemens.com ) também se aplicam.

Exemplos para o servidor web

Informação legal................................................ .................................................. ....... 2

1 Prefácio................................................. .................................................. ............. 5

2 Componentes de hardware e software usados ............................................. ....... 6

3 Noções básicas de páginas da Web padrão ............................................. ........................... 8

4 Noções básicas de páginas da web definidas pelo usuário ........................................... ...................... 9

4,1 Login e instruções de uso ............................................. ................. 9

5 Leitura e escrita com diferentes tipos de variáveis ..................................... 12

5,1 Tarefa de automação ................................................ .................................. 12

6 Exibindo a data e hora ............................................. ........................... 19

6,1 Tarefa de automação ................................................ .................................. 19

7 Exibindo uma matriz S7 (apenas S7-1500) ........................................ .................. 22

7,1 Tarefa de automação ................................................ .................................. 22

8 ENUM - Valor da variável substituído por texto ........................................... ....... 24

8,1 Tarefa de automação ................................................ .................................. 24

9 Redirecionamento de HTTP após um erro (somente S7-1500) ................................... 27

9,1 Tarefa de automação ................................................ .................................. 27

10 Alterar idioma nas páginas definidas pelo usuário ........................................... ........ 31

10,1 Tarefa de automação ................................................ .................................. 31

11 Transferência de dados sem recarregar páginas usando AJAX ........................... 38

11,1 Tarefa de automação ................................................ .................................. 39

Exemplos para o servidor web

12 Exibindo dados de um registro de dados como um gráfico .......................................... ............ 47

12,1 Tarefa de automação ................................................ .................................. 47

13 Elementos de exibição usando gráficos vetoriais escaláveis ..................................... 54

13,1 Tarefa de programação ................................................ .............................. 54

14 Diagnóstico S7 e Indicador de Carga ............................................. ............. 58

14,1 Tarefa de automação ................................................ .................................. 58

15 Alterando imagens usando JavaScript .............................................. ............... 64

15,1 Tarefa de programação ................................................ .............................. 64

16 Botão para reiniciar CPU .............................................. ..................................... 66

16,1 Tarefa de automação ................................................ .................................. 66

17 Login em páginas definidas pelo usuário ............................................ ............................ 69

17,1 Tarefa de automação ................................................ .................................. 69

18 Comunicação de alto desempenho por meio de uma string ........................................... 73

18,1 Tarefa de automação ................................................ .................................. 73

19 Instalação................................................. .................................................. ..... 82

19,1 Instalando o hardware e software ............................................. .... 82

20 Links da Internet ................................................ .................................................. .. 84

21 História................................................. .................................................. ............ 85

Exemplos para o servidor web

Conteúdo principal dos exemplos de aplicação

Os exemplos de aplicação cobrem os seguintes pontos-chave:

• Ler e escrever com diferentes tipos de variáveis

• Gerando matrizes (somente S7-1500)

• Usando o tipo de dados ENUM

• Redirecionamento de HTTP após um erro (apenas S7-1500)

• Alterar o idioma em páginas definidas pelo usuário

• Transferência de dados sem recarregar páginas

• Exibindo um datalog gerado pelo controlador como um gráfico

• Criação de elementos de exibição

• Exibindo informações de diagnóstico

• Alterar imagens usando JavaScript

• Reiniciando a CPU usando um botão

• Login na página definida pelo usuário

• Transferência de dados de alto desempenho

Servidor web integrado no S7-1200 e S7-1500

definidas pelo usuário”.

Acesso de qualquer lugar

Uso universal do exemplo de aplicação para SIMATIC S7-1200 e S7-1500.