TwinCAT HMI

Referências
Application Note TwinCAT HMI

TwinCAT HMI

Uso do TwinCAT HMI.

1
 TwinCAT HMI

CONTEÚDO

1. Objetivos e público alvo............................................................................................................................. 4

2. O que é o TwinCAT HMI. .......................................................................................................................... 5

 Server ............................................................................................................................................................................ 5

 Client ............................................................................................................................................................................. 5

 Engenharia .................................................................................................................................................................... 5

 TwinCAT PLC HMI .......................................................................................................................................................... 5

 TwinCAT PLC HMI Web ................................................................................................................................................. 6

 TwinCAT HMI ................................................................................................................................................................. 7

3. Arquiteturas. .............................................................................................................................................. 8

4. Licenciamento ......................................................................................................................................... 10

5. Instação do HMI Server e da ferramenta de engenharia ........................................................................ 11

 Baixando e instalando a engenharia ........................................................................................................................... 11

 Instalação do TwinCAT HMI Server ............................................................................................................................. 11

6. Componentes básicos ............................................................................................................................. 14

 Iniciando a engenharia ................................................................................................................................................ 15

 Variáveis mapeadas através de ADS/OPC-UA ............................................................................................................. 16

 Variáveis internas do TwinCAT HMI ............................................................................................................................ 17

 Textblock ..................................................................................................................................................................... 18

 Iniciando o Live engineering........................................................................................................................................ 21

 Eventos ........................................................................................................................................................................ 22

 Botões ......................................................................................................................................................................... 23

 Criando um botão com a função TAP .......................................................................................................................... 24

 Criando um botão do tipo Toggle ............................................................................................................................... 25

 Text Box ....................................................................................................................................................................... 25

 Formatando o campo de texto.................................................................................................................................... 27

2
 TwinCAT HMI

 Teclado na tela ............................................................................................................................................................ 28

 Datagrid ....................................................................................................................................................................... 31

 Criando um user control ............................................................................................................................................. 33

 Navegação nas telas .................................................................................................................................................... 37

 Gráficos no TwinCAT HMI ........................................................................................................................................... 41

 Adicionando um gráfico linerar (Line Chart) ............................................................................................................... 41

 Gráfico de dados históricos ......................................................................................................................................... 44

 Gráfico de barras ......................................................................................................................................................... 47

 Eventlogger ................................................................................................................................................................. 49

 Gerando eventos no TwinCAT ..................................................................................................................................... 50

 Controle de usuários ................................................................................................................................................... 54

 Troca de linguagens com o TwinCAT HMI ................................................................................................................... 60

 Considerações sobre o tamanho da tela e dos elementos ......................................................................................... 62

 Grid Control ................................................................................................................................................................. 66

 Scripts .......................................................................................................................................................................... 71

 Temas .......................................................................................................................................................................... 74

 Publicando a aplicação ................................................................................................................................................ 77

 Receitas (DEFINIÇÃO) .................................................................................................................................................. 82

 Receitas (manipulação) ............................................................................................................................................... 87

 IFrame ......................................................................................................................................................................... 91

7. Versão ..................................................................................................................................................... 92

8. Suporte Técnico ...................................................................................................................................... 93

3
 TwinCAT HMI

1. OBJETIVOS E PÚBLICO ALVO.

Este documento tem por objetivo fornecer os primeiros passos para trabalhar com o TwinCAT HMI,
produto lançado oficialmente em abril de 2018.

Este documento se destina a usuários familiarizados com o TwinCAT e com a tecnologia Beckhoff,
conhecimentos prévios do protocolo ADS e programação dos nosso produtos são um pré-requisito.

Não é o escopo deste documento realizar uma descrição detalhada de todos os parâmetros
disponíveis em todos os componentes do TwinCAT HMI, isso tornaria o documento muito longo e seria
meramente uma repetição do que já existe no seguinte endereço.

https://infosys.beckhoff.com/content/1033/te2000_tc3_hmi_engineering/index.html?id=4989414722711
336036

4
 TwinCAT HMI

2. O QUE É O TWINCAT HMI.

Ferramenta de HMI da Beckhoff que pode ser utilizada para desenhar telas de todos os tipos e com
funcionalidades das mais variadas.

O TwinCAT HMI é composto por vários elementos de software, sendo eles:

 SERVER

É o componente que trata de “rodar” a lógica que dá suporte para fazer a IHM funcionar, o Server
deve ser instalado separadamente no PC que irá rodar a aplicação (que não necessariamente é o
mesmo que irá mostrar as telas, mais detalhes a seguir).

O Server pode rodar em qualquer sistema operacional (verificar a disponibilidade).

 CLIENT

O Client é sempre um Browser (navegar de internet, como o Google Chrome, Firefox etc….), o detalhe
é que o Browser deve suportar HTML 5, uma vez que o Server disponibiliza as telas para serem
visualizadas nesse formato. Não é necessário que o client e o Server rodem, necessariamente, no
mesmo PC podendo abrir caminho para arquiteturas muito flexíveis.

 ENGENHARIA

É a parte do sofware onde se desenvolvem as telas propriamente ditas, a engenharia do TwinCAT

HMI é totalmente integrada no Visual Studio e é totalmente independente do TwinCAT, ou seja, não é
necessário instalar o TwinCAT na mesma máquina para se poder instalar a engenharia do TwinCAT
HMI.

Diferenças entre TwinCAT HMI, TwinCAT PLC HMI, e TwinCAT PLC HMI WEB.

Quando se trata de software de IHM a Beckhof disponibiliza 3 pacotes básicos, sendo eles:

 TWINCAT PLC HMI

Pacote mais básico da Beckhoff, ativação da configuração gera um arquivo executável que, uma vez
aberto, inicia uma aplicação que mostra as telas desenvolvidas. É o pacote mais simples que tem, e
possui limitações em suas funcionalidades, por exemplo, esse pacote não possui gráfico.

Requer um licença específica, a TF1800-00PP, onde o “PP” significa o nível de performance do

hardware onde o PLC HMI está rodando.

https://www.beckhoff.com/english/twincat/tf1800.htm?id=2353036919922238

5
 TwinCAT HMI

TwinCAT PLC HMI/ PLC HMI Web

 TWINCAT PLC HMI WEB

Igual ao PLC HMI, porém trata-se de um sistema que roda em um Browser, é possível fazer todas as
telas e descarregá-las em um IPC que irá rodar o Server e visualizá-las em outro PC que possua um
browser compatível com HTML5, isso possibilita visualizar a IHM em um Celular com Android/IOS
etc…

Tanto no PLC HMI quanto no PLC HMI Web deve-se criar as telas na mesma interface de
desenvolvimento onde se desenvolve a aplicação de PLC (no mesmo software onde se desenvolve o
Ladder, ST, etc…)

https://www.beckhoff.com/english/twincat/tf1810.htm?id=2353036919922246

6
 TwinCAT HMI

 TWINCAT HMI

Pacote de software mais poderoso e que detém a maior quantidade de recursos. Roda em um
Browser independente de ser local ou remoto, também oferece a possibilidade de criar telas
responsivas, que tem um formato em um PC e outro formato em Smartphones, Tablets etc…

TwinCAT HMI

https://www.beckhoff.com/english/twincat/twincat-3-hmi.htm?id=1890110977661595

7
 TwinCAT HMI

3. ARQUITETURAS.

Como mencionado acima o TwinCAT HMI roda em um Browser e é composto por um server, um cliente
e um software de programação / configuração, isso possibilta inúmeras arquiteturas dependendo da
necessidade.

É fato que sempre deverá existir um server e um cliente, embora estes não precisem estar,
necessariamente, rodando na mesma máquina.

Computador 1
Browser de mercado (Google
TwinCAT HMI Client
Chrome, firefox, etc…
Comunicação entre o
HMI Server e o Client
Aplicação que faz o TwinCAT HMI
TwinCAT HMI Server
funcionar
Comunicação entre o
PLC e o HMI Server
Lógica que faz com que a
TwinCAT Runtime (PLC)
máquina funcione

Primeira arquitetura, Server e Client rodando a mesma máquina

Essa primeira arquitetura é a mais comum, requer a instalação do HMI Server no PC (computador 1) e
também a instalação de um browser compatível com HTML 5.

Em termos de licença também é muito simples, necessitando apenas de um licença (além das licenças
relativas ao controle da máquina) a TF2000-00PP que já inclui um Server e um client por padrão.

8
 TwinCAT HMI

Segunda arquitetura, Server rodando em um PC e client rodando em diversos elementos distintos

A segunda arquitetura mostrada acima já tem como característica o fato de que os clients estão rodando em
máquinas separadas, sejam estas: computadores, tablets ou smartphones. Esta arquitetura requer um licença a
mais do que a arquitetura 1 sendo necessárias a TF2000-00PP e a TF2010-00PP.

Nota: várias outras arquitetura são

possíveis, algumas requerem licenças
adicionais.

Nota2: As arquiteturas independem do

sistema operacional usado, contudo nem
todos os produtos estão disponíveis para
todos os SOs.

Nota 3: Os Browsers devem ser

necessariamente HTML 5, é sabido que,
por exemplo, sistemas operacionais
WinCE não vem com um browser HMTL 5
por padrão.

9
 TwinCAT HMI

4. LICENCIAMENTO

O TwinCAT HMI requer, para funcionar, algumas licenças dependo da configuração, a licença básica (TF2000-
00PP) deve sempre ser incluida.

Dependendo do projeto outras licenças devem ser incluídas.

TF2000  Licença básica que deve sempre ser incluída, inclui um Server e um Client, já possui a conectividade
ADS por padrão (para comunicar com PLCs Beckhoff), não possui limite de Tags, é licenciada de acordo com a
performance do IPC que está rodando o Server.

TF2010 .. TF2040  Inclusão de um ou mais clients

TF2050 .. TF2090  Adicionar a funcionalidade de conectar com mais de um Runtime de TwinCAT (conexão a
mais de um PLC).

TF2100  TwinCAT ADS para comunicação com o TwinCAT (Lógica do PLC), já está incluso na TF2000.

TF2110  TwinCAT HMI OPC-UA, caso seja necessário comunicar com outro tipo de PLC (Siemens, Rockwell
ou outros) pode-se utilizar o OPC-UA adicionando essa licença, também não tem limite de tags, sendo licenciada
de acordo com a performance do hardware onde está rodando.

TF2200  TC3 HMI Extension SDK : funcionalidade necessária para escrever as suas próprias extensões em C#
ou JavaScript.

TF2210  TC3 HMI Recipe Management: Gerenciamento de receitas, já está incluso na licença básica, não há
cobrança adicional.

TF2300  TC3 HMI Scope : Adiciona a possibilidade de incluir o TwinCAT Scope View dentro do TwinCAT HMI

Nota 1: As licenças devem ser compradas de acordo com a

performance do PC onde irão rodar.

Nota 2: Caso o client rode em um PC outro que não o PC onde

está rodando o Server o PC onde está rodando o client não
precisa ser licenciado.

Nota 3: Caso o Server rode em uma máquina diferente de onde

está rodando o TwinCAT PLC, p/ Ex. rodando o TwinCAT em um
CX e o HMI Server em um PC de terceiros a performance do
TwinCAT HMI será a do PC de terceiros.

Nota 4: ao usar um IPC não-Beckhoff a licença deverá ser feita

com o Dongle.

10
 TwinCAT HMI

5. INSTAÇÃO DO HMI SERVER E DA FERRAMENTA DE ENGENH ARIA

Como visto anteriormente o TwinCAT HMI é composto pela engenharia, o TwinCAT HMI Server e o
client.

O client trata-se de um Browser (Google Chrome, Firefox, etc…), logo basta instalar o browser
desejado. Já a instalação da engenharia e do TwinCAT HMI Server devem ser realizadas pelo usuário.

 BAIXANDO E INSTALANDO A ENGENHARIA

Baixar e instalar a engenharia do TwinCAT HMI

A engenharia do TwinCAT HMI é completamente integrada ao Microsoft Visual Studio, bem como o
TwinCAT já é.

É recomendável que para instalar se clique com o botão direito do Mouse no instalador baixado do site
e rodá-lo como administrador.

 INSTALAÇÃO DO TWINCAT HMI SERVER

O TwinCAT HMI Server também pode ser baixado na área de download do site da Beckhoff.

11
 TwinCAT HMI

Download do TwinCAT HMI Server

O procedimento para instalação do TwinCAT HMI Server será parecido com o do TwinCAT HMI
engenharia (clicar com o botão direito e executar como administrador).

A questão é onde eles serão instalados.

TwinCAT HMI engenharia  Instalar na máquina de desenvolvimento

TwinCAT HMI Server  Instalar na máquina de desenvolvimento e no IPC que irá rodar o Server (que
não necessariamente precisa ser o mesmo onde a aplicação irá rodar).

12
 TwinCAT HMI

Notebook de engenharia irá

descarregar a aplicação no
IPC Beckhoff que irá
funcionar como server

IPC Beckhoff (ou outro) no qual irá rodar o

TwinCAT HMI Server, instalar o TwinCAT HMI
Server

O TwinCAT, por padrão, irá instalar um shell do visual studio 2013,

também é possível utilizar o visual studio 2017 para fazer a
engenharia do TwinCAT HMI.

Abaixo link para download o Visual Studio diretamente do site da

microsoft.

https://visualstudio.microsoft.com/downloads/

13
 TwinCAT HMI

6. COMPONENTES BÁSICOS

Uma vez instalados, conforme mostrado no item 5 podemos começar a criar o primeiro projeto. Para
iniciar o primeiro projeto, devemos iniciar o Visual Studio e criar um novo projeto de TwinCAT HMI.

14
 TwinCAT HMI

Seguir os passos da figura acima irá criar um nova solução do Visual Studio, a solução será como na
figura abaixo:

Uma ver criada a solução, já é possível clicar em Debug  Start Debugging, conforme mostrada na
figura abaixo (ou apertar F5), isso irá automaticamente abrir o seu navegador de internet padrão (ex.
Google Chrome) com a tela padrão do TwinCAT HMI.

Toolbox
Área de design
da IHM

Solution Janela de
Explorer propriedades

Interface do TwinCAT HMI

Iniciar a debugar a aplicação no navegador

Caso seja capaz de iniciar a aplicação corretamente significa que a instalação do TwinCAT HMI ocorreu
corretamente e pode-se iniciar a desenhar as telas conforme necessidade.

 INICIANDO A ENGENHARIA

15
 TwinCAT HMI

Todo software de IHM começa por definir variáveis que serão utilizadas, sejam elas vindas diretamente
do PLC ou variáveis internas do HMI. A seguir temos um guia de como criar os dois tipos de variáveis.

 VARIÁVEIS MAPEADAS ATRAVÉS DE ADS/OPC-UA

A seguir veremos como configurar a conexão ADS entre o TwinCAT HMI e o TwinCAT PLC.

Para tal utilizaremos as configurações padrões, ou seja, fazendo uso do TwinCAT ativado localmente
(TwinCAT PLC rodando na mesma máquina onde roda o TwinCAT HMI).

O primeiro passo é o de configurar o Target. Isso pode ser feito clicando-se sobre a configuração do
server/extensions/ADS.

Indica o Target onde irá

rodar o TwinCAT PLC
(mudar para conectar a
um Target remoto)

Configuração do servidor ADS

Da maneira como está configurado acima o TwinCAT HMI está levando em consideração que o
TwinCAT PLC está rodando no mesmo PC onde está rodando o TwinCAT HMI Server.

No caso da aplicação iremos utilizar as variáveis mostradas na figura abaixo.

Essas variáveis estão criadas no PLC, devemos mapeá-las para o TwinCAT HMI.

Para tal devemos abrir o assistente para mapear as variáveis.

16
 TwinCAT HMI

Variáveis previamente criadas no PLC,

Clicar com o botão direito e depois em

“Map Symbol”

Variáveis mapeadas

Uma vez mapeadas, as variáveis podem ser utilizadas nos campos criados na IHM.

 VARIÁVEIS INTERNAS DO TWINCAT HMI

Também é possível criar variáveis internas para serem utilizadas apenas na IHM. Esse procedimento é
útil para quando desejamos ter variávies que não irão se comunicar com o PLC.

17
 TwinCAT HMI

Definir: tipo de dado, nome do

símbolo e valor padrão (inicial)

Uma vez criadas as variáveis (do PLC ou internas), podemos partir para construção das telas.

 TEXTBLOCK

Elemento mais simples do TwinCAT HMI, o textBlock serve para mostrar um texto simples na tela que
pode ser um texto fixo ou uma variável. Para tal deve-se arrastar o elemento da caixa de ferramentas e
soltar em qualquer lugar da tela.

18
 TwinCAT HMI

Também é possível fazer o link de uma variável mapeada, bastando clicar no botão e depois em “Create
data binding”.

Criar um “Data
Binding”

19
 TwinCAT HMI

O que irá abrir a seguinte janela.

Na qual aparecem todas as variáveis previamente mapeadas.

Caso a variável desejada não esteja presente na lista na aba “Mapped symbols”, é possível escolher a
variável desejada na aba “Server Symbols”.

É importante ter em mente que as variáveis não irão aparecer caso o server não esteja acessível por
qualquer motivo (como falta de conexão entre o PC de engenharia e o PC no qual o TwinCAT PLC está
rodando).

20
 TwinCAT HMI

Mapear variáveis diretamente do TwinCAT PLC

 INICIANDO O LIVE ENGINEERING

O Live engineering trata-se de uma ferramenta capaz de mostrar em tempo real o que está acontecendo
durante o processo de engenharia, adicionar um campo de texto ou um botão na tela de
desenvolvimento irá adicionar automaticamente a mesma na janela criada pelo Live engineering.

O que irá abrir um janela como a seguinte:

21
 TwinCAT HMI

Componentes adicionados à
tela criada

Qualquer elemento adicionado à tela será adicionado automaticamente ao Live engineering, tornando o
ato de construir as telas bem mais dinâmico.

É importante ressaltar que nem todos os componentes que funcionam no Browser funcionam
completamente no Live engineering.

 EVENTOS

No TwinCAT HMI qualquer elemento colocado na tela pode acionar um evento, existem eventos dos
mais variados e o programador pode se valer destes afim de criar a lógica necessária para o
funcionamento de sua aplicação

Para configurar os eventos disponíveis para cada objeto basta que, uma vez adicionado o elemento, se
clique sobre ele e depois, na janela de propriedades, verificar os eventos.

22
 TwinCAT HMI

Eventos disponíveis para

o controle selecionado

Elemento selecionado

Clicar sobre um dos

eventos desejados

Janela aberta após selecionar o

evento.

Aqui se pode arrastar e soltar as

ações que se deseja realizar quando
o evento for acionado.

 BOTÕES

A seguir descrevo o funcionamento básico de alguns botões no TwinCAT HMI.

Existem duas funções básicas na IHM são elas:

A função TAP  quando a variável é acionada ao manter o botão pressionado e volta para o seu estado
normal ao soltar o botão

A função Toggle  faz com que a variável mude de estado quando se toca o botão, se verdadeiro vai
para falso e vice-versa.

23
 TwinCAT HMI

Essas funções podem ser configuradas nos eventos de qualquer dos elementos presentes no TwinCAT
HMI.

 CRIANDO UM BOTÃO COM A FUNÇÃO TAP

Arrastar e soltar o
componente na área
de trabalho da tela
que se está editando

Adicionar um Data
binding normalmente

E selecionar a variável
booleana que se deseja
utilizar

24
 TwinCAT HMI

Após realizar os passos acima será possível verificar o funcionamento do botão TAP.

 CRIANDO UM BOTÃO DO TIPO TOGGLE

Inserir um botão do tipo

Toggle na área de trabalho

Proceder da mesma forma com foi feito com o botão do tipo TAP, utilizando a função propriedade “State
Symbol”.

 TEXT BOX

Diferente do elemento textblock o Textbox permite edição, sendo o elemento usado qdo desejamos
mostrar e editar valores na IHM.

Adição do Text Box,

elemento que pode ser
editado.

25
 TwinCAT HMI

Assim como no TextBlock basta

colocar uma variável na
propriedade “Text”, em
“Common”, para fazer com que
a variáve passe a ser exibida no
campo de texto.

Contudo no textobox desejamos também ser capazes de editar a variável, para tal devemos mudar o
tipo de binding associado à variável vinculado ao campo, vejamos como fazer esse ajuste.

Editar o tipo de binding.

Selecionar

Binding mode  TwoWay

Binding Event  .onUserInteractionFinished

Subscription Mode  Poll

A seleção do binding mode conforme descrito acima irá fazer com que alterações na variável na tela
sejam transferidas para o PLC e vice-versa. Caso o usuário digite um valor incompatível com o tipo de
dado do PLC (ex. digitar um texto onde só cabe um número), este será automaticamente rejeitado.

26
 TwinCAT HMI

 FORMATANDO O CAMPO DE TEXTO

Às vezes é necessário formatar o texto mostrado em um Text Box, (mostrar um texto, uma variável real,
inteiros, colocar unidades ou textos juntamente com uma variável).

Para tal temos a função FormatString(), que ajuda nesse trabalho.

Ao selecionar um campo de texto podemos utilizar a função para limitar o número de casas decimais,
por exemplo.

Para delimitar o número de casas decimais utilizadas em um campo de texto usando uma variável real,
podemos fazer da seguinte forma:

Adicionar um campo de texto.

Ao selecionar a variável que será mostrada devemos utilizar a função “FormatString” com a seguinte
sintaxe:

FormatString('{0|.2f}', <Simbolo>)

Onde:

'{0|.2f}'  Formato que será mostrado (número real com duas casas decimais).

<Simbolo>  Simbolo cujo valor será exibido, nesse caso deve ser uma variável do tipo real.

A função

(FormatString) deverá ser usada no campo “Text” do TextBox.

Para adicionar variáveis seguidas de texto é simples, basta colocar o texto desejado na formatação da
String.

Por exemplo:

FormatString('{0|.2f} RPM', 350)

Irá produzir na tela o valor:

350.00 RPM

27
 TwinCAT HMI

 TECLADO NA TELA

O desenvolvedor pode querer adicionar um teclado na tela de maneira a permitir que o usuário utilize a
tela de toque, também é possível limitar o tipo de teclado pelo campo utilizado.

O teclado deve, entretanto, ser manipulado pelo usuário, que deve controlar os momentos nos quais
este irá aparecer.

Inicialmente devemos proceder adicionando um teclado da Toolbox.

Depois devemos configurá-lo da forma como quisermos, neste exemplo para a edição de campos
essencialmente numéricos devemos configurar o teclado como numpad.

Na janela de propriedades, alterar o

layout para Numpad
Redimensionar o teclado para
encaixar exatamente o tamanho dos
botôes do Numpad

28
 TwinCAT HMI

Após acertar o tamanho do teclado podemos torná-lo invisível, uma vez que o que o fará visível é o foco
no campo de texto que será editado.

Alterar a visibildade padrão

do teclado para “Hidden”.

O estado normal do teclado

será invisível

Também é recomendável
trocar o nome do teclado para
um nome mais amigável e
fácil de lembrar, uma vez que
teremos que manipulá-lo em
quase todo o projeto.
Lembre-se que não são
permitidos caracteres
especiais e espaços.

O próximo passo é selecionar o campo de texto que será editado pelo teclado numérico criado.

No diálogo aberto
devemos adicionar um
comando “Write To
Symbol”.

29
 TwinCAT HMI

Localizar o elemento na caixa da esquerda e ir em

layout.

Arrastar a propriedade “Visibility”

e atribuir o valor “Visible” para ela

Nota: para todas as propriedades e para

a visibilidade é possível atribuir uma
variável que irá manipular essas
propriedades. Para isso basta criar um
Data binding a partir desta janela

Tornando o teclado invisível:

Para tornar o teclado invisível podemos fazer da maneira acima, utilizando isso no evento
“.onUserInteractionFinished”. Desta vez devemos mudar a propriedade “visibility” do teclado para
“Collapsed”.

30
 TwinCAT HMI

 DATAGRID

O Datagrid é um componente útil para mostrar várias informações condensadas em forma de tabela

A melhor maneira de se utilizar um Datagrid é criar um tipo de dado no PLC, fazer dele um vetor, e
mostrar os vários elementos deste vetor através do Datagrid.

Para este exemplo criaremos uma estrutura no PLC que irá conter uma variável de cada tipo, e criaremos
também um vetor deste mesmo tipo:

Aqui temos a definicação do tipo de dados

utilizado, bem como a declaração do
mesmo do mesmo em uma lista de
variáveis globais.

Na declaração temos a colocação de

valores iniciais, o que não é obrigatório.

O próximo passo é adicionar o Datagrid ao projeto de HMI e configurá-lo de maneira a ler as variáveis
provenientes do PLC.

31
 TwinCAT HMI

Configuração das colunas

Link da variável do PLC

32
 TwinCAT HMI

Tem que ser o mesmo nome

declarado no tipo de dado do PLC

Selecionar o tipo de controle que

será utilizado

Selecionar se é possível redimensionar a

coluna ou se é possível editá-la

Adicionar uma nova coluna, é possível

adicionar quantas colunas quiser, não
sendo obrigatório que correspodam
exatamente ao que está no PLC

Formatação das colunas

Selecionar a variável do PLC (que deve ter sido descarregado previamente).

Após realizar esses passos o Datagrid deve passar a funcionar.

 CRIANDO UM USER CONTROL

User control são elementos muito úteis para criar um “padrão” de controle personalizado pelo usuário e
replicá-los quantas vezes forem necessárias.

33
 TwinCAT HMI

Adição de um User Control

Após adicionar o User control teremos o seguinte item adicionado na árvore:

User control (configuração

da nova tela)

Variáveis de entrada e saída

do User Control

34
 TwinCAT HMI

No User Control podem ser utilizados todos os controles normais usados na nas telas normais, logo os
componentes como: TextBox, TextBlock, se aplicam normalmente.

Ao editar as variáveis de entrada e saída temos a seguinte tela:

Colocar o nome dos

parâmetros e o tipo de dado
necessário para a aplicação

Ativar esses Check boxes para

poder selecioná-los
externamente, desmarcar para
usá-los apenas dentro do
UserControl

Após a criação dessas variáveis as mesmas poderão ser selecionadas tanto dentro do User Control
quanto fora dele.

35
 TwinCAT HMI

Parâmetros criados na
tela anterior

Basta adicionar os controles normalmente no User Control e, depois ao fazer o “Data Binding” selecionar
os parâmetros criados.

Após criado o User Control irá aparecer na caixa de ferramentas, conforme figura abaixo:

36
 TwinCAT HMI

Dica: ao utilizar elementos dentro do User control, é interessante que, invés de

dimensionar os elementos por pixels deve-se utilizá-los por percentual.

Ao clicar sobre o elemento, na janela de propriedades é possível selecionar o

Layout e, nesse é possível definir o tamanho do elemento.

Ao selecionar px estará determinando o tamanho dos elementos diretamente em

pixels, o que não é muito interessante para um User Control, já ao determinar o
tamanho do elemento em % ao arrastar e soltar um User Control para dentro de
alguma tela podemos redimensioná-lo livremente que os elementos internos irão
se redimensionar automaticamente.

 NAVEGAÇÃO NAS TELAS

Como qualquer software de IHM o TwinCAT HMI oferece a possibilidade de se navegar por várias telas
feitas previamente pelo usuário.

Para tal a forma mais rápida é criar as diversas telas no solution explorer

37
 TwinCAT HMI

Nas figuras acima temos a sequência para adição de uma nova página.

Uma vez criado o Content podemos começar a adicionar os elementos dentro da mesma.

Ao adicionar os elementos dentro de uma página criada também é

recomendável dimensioná-los por porcentagem, isso possibilita que a
página seja adicionada em várias resoluções de tela posteriormente.
Isso facilita o reuso das páginas criadas.

38
 TwinCAT HMI

Após criada a página e dimensionada corretamente devemos adicionar uma região que irá receber as
páginas criadas

Na caixa de ferramentas selecionar e arrastar a região para a área de trabalho.

É recomendável deixar a região ocupando apenas uma parte da tela de trabalho, permitindo que no
restante das telas se adicione os botôes para realizar a navegação.

39
Botões de navegação Região adicionada
 TwinCAT HMI

Configuração dos botões de navegação:

Parar poder utilizar os botões de navegação para mudar de tela devemos configurá-los para tal, o que
pode ser feito utilizando um evento conforme mostrado abaixo.

Selecionar a página que deseja.

Após fazer isso os botões devem estar navegando pelas páginas.

40
 TwinCAT HMI

 GRÁFICOS NO TWINCAT HMI

O TwinCAT HMI oferece várias formas de mostrar graficamente as informações na tela, são elas:

Gráficos em real de variáveis provenientes do PLC

Graficos de dados históricos, salvos em um banco de dados SQLlite rodando localmente e logados
automaticamente pelo TwinCAT HMI.

Gráfico de barras, que podem mostrar um vetor proveniente do PLC.

 ADICIONANDO UM GRÁFICO LINERAR (LINE CHART)

O tipo iniciar de gráfico é o gráfico no qual há uma pena que é adicionada ao mesmo com o intuito de
se monitorar uma variável proveniente do PLC, também é possível adicionar várias penas para serem
visualizadas através do PLC.

A vantagem desse tipo de gráfico com o TwinCAT HMI é que o mesmo oferece a possibilidade de se
criar um vetor dentro do PLC e utilizar o mesmo vetor para poder visualizar a variável, assim sendo, a
cada ciclo do PLC a variável monitorada é atualizada, o que permite que a IHM tenhamos uma variável
mostrada com a mesma taxa de amostragem que se mostraria em uma ferramenta de comissionamento
de Scope, como o TwinCAT Scope View.

Na figura acima temos o elemento que deve ser adicionado para poder monitorar uma variável do PLC.

Os próximos passos incluem:

Criação da variável no PLC a ser monitorada

41
 TwinCAT HMI

Configuração da variável para ser mostrada no TwinCAT HMI.

para criar uma variável no PLC devemos criar um vetor que será preenchido, colocando um tipo de dado
que irá conter as variáveis x e y, sendo x o tempo e y o valor a ser monitorado.

Tipo de dado criado no PLC

Após a criação desse tipo de dados devemos criamos um vetor de duas dimensões para o mesmo,
conforme na figura a seguir.

Vetor criado para armazenar os dados que serão

mostrados no gráfico, veja que se trata de um vetor
de duas dimensões (array[1..2,1..100]), o que
significa uma matriz de 2x100 pontos. Perceba
também que cada um dos pontos da matriz é
composto por um tipo de dado contendo uma
variável “x” e uma “y”. isso irá fazer com que os
dados sejam mostrados na tela da IHM de maneira
sincrona com a task do PLC

Numerando os pontos do vetor

Preenchendo os pontos do vetor.

Nota: nesse exemplo estamos utilizando um

gráfico com duas variáveis sendo mostradas, por
isso temos um array[1..2, 1..100] of stPoint, caso
tivessemos um array [1..3,1..100] of stPoint
teríamos um gráfico de 3 penas.

Não esquecer de fazer o download após terminar de fazer software do PLC.

42
 TwinCAT HMI

Adicionar novas penas ao gráfico

Apos fazer a parte do PLC, adicionar as penas e

adicionar o elemento de gráfico, podemos criar um Data
binding normal.

Selecionar a variável

O intervalo de leitura das variáveis

do TwinCAT HMI é de 200ms, logo
devemos definir um intervalo
diferente para que o gráfico fique
mais fluído

Copiar a “Symbol Expression” e

clicar em OK.

43
 TwinCAT HMI

Após realizar essa configuração o gráfico deverá funcionar normalmente, mas a escala ainda pode estar
errada.

Ao clicar na opção acima é possível selecionar a escala dos eixos entre outras opções.

 GRÁFICO DE DADOS HISTÓRICOS

Outro tipo muito útil de gráfico é o gráfico de dados históricos.

Esse tipo de gráfico é obtido através de uma variável que é gravada em um banco de dados SQLlite,
que roda localmente, bastando para tal selecionar a variável que se deseja monitorar e colocar o gráfico
para a mesma.

A seguir veremos os passos para configurar essa variável e monitorá-la.

O primeiro passo é criar uma variável no PLC.

Após isso devemos iniciar a configuração do mesmo na subpasta Server/Extensions.

44
 TwinCAT HMI

Selecionar a variável que se deseja monitorar,

selecionar o intervalo (nesse caso 1
segundo), habilitar a gravação e adicionar a
variável.

O elemento que pode visualizar as variáveis que estão sendo historizadas é o TcHmiTrendChart.

45
 TwinCAT HMI

Habilitar a opção “Show Menu Bar” na

janela de opções.

Após isso
selecionar a opção
ao lado

E adicionar uma
pena ao gráfico.

Após isso devemos configurar a pena para mostrar os dados provenientes do histórico.

Para tal devemos selecionar a opção “LineGraphDescriptions” na aba de propriedades.

Selecionar a variável escolhida para ser mostrada

no gráfico, juntamenta com o index previamente
46
selecionado.
 TwinCAT HMI

A variável permanecerá sendo historizada enquanto o server do TwinCAT HMI estiver ativo, ao desativar
o server a variável não será mais armazenada.

Uma vez iniciado o projeto é possível começar a fazer a seleção dos momentos onde se inicia e termina
a plotagem do gráfico na barra de menu.

 GRÁFICO DE BARRAS

O gráfico de barras, também disponível no TwinCAT HMI é muito útil para mostrar uma série de valores,
tais como harmônicas em um espectro.

O funcionamento do mesmo é mais simples que os outros gráficos acima, bastando adicionar o elemento
conforme na figura abaixo:

Também é necessário adicionar um vetor no PLC, que pode ser um vetor simples como o mostrado
abaixo.

47
 TwinCAT HMI

Selecionar o vetor criado no PLC

para que o mesmo seja

adicionado.

Após adicionado é esperado um resultado como na figura abaixo:

48
 TwinCAT HMI

Também é possível adicionar um gráfico de barras com duas variáveis, da mesma forma como foi feito
para plotar duas variáveis no gráfico linear.

 EVENTLOGGER

O Eventlogger trata-se de um componente de software que gerencia todos os eventos que podem
acontecer no TwinCAT, que podem ser alarmes acionados pelo PLC, por módulos C++ ou por outro
elemento capaz de ativar eventos no TwinCAT eventlogger.
Targets adicionados

Adicionar novos Targets, é possível

adicionar qualquer Target com TC3
nele, desde que tenha uma rota
ADS previamente estabelecida.

49
 TwinCAT HMI

Nota: adicionar novos targets precisa de uma licença de targets Pack

por cada novo target adicionado.

O TwinCAT HMI irá ler os alarmes ativos e histórico de alarmes do

Runtime do TwinCAT adicionado, para que isso possa acontecer é
necessário que haja um software TwinCAT Eventlogger rodando no
dispositivo apontado aqui, dispostivos que não possuem o software
de eventlogger compatível não poderão ter os seus alarmes ativos (ex.
dispositivos com TwinCAT 2).

O uso do eventlogger se divide em duas partes, sendo elas  gerar os alarmes no PLC (ou outros
softwares com essa capacidade) ler os alarmes no TwinCAT HMI.

Nota: o Eventlogger como está descrito nesse documento é

funcional a partir da versão 4022.22 do TwinCAT 3, versão mínima
na qual esse tutorial deverá ser seguido.

 GERANDO EVENTOS NO TWINCAT

Os eventos podem ser gerados em vários softwares sendo que o mais comum deles é justamente o
TwinCAT PLC. Gerar esses eventos a criação dos mesmos através do editor de TMC (TwinCAT Module
Class) e a construção do código de PLC para poder acioná-los.

Criando os eventos com o editor de TMC.

Adicionar uma nova classe de eventos

(serão os eventos criados pelo usuário).

50
 TwinCAT HMI

Janela do editor de TMC

Adição de novo evento

Após adicionar os eventos criados

devemos compilar o projeto de
PLC.

A compilação do projeto de PLC irá gerar um tipo de dado automaticamente, coforme mostrado na figura
abaixo, perceba que esse tipo de dado possui uma variável para cada um dos eventos criados no editor
de TMC.

O próximo passo é criar o código de PLC para ativação dos alarmes internamente no PLC.

Os eventos podem ser classificados em cinco categorias, sendo elas: Verbose, Info, Warning, Error e
Critical, dependendo da gravidade do alarme.

51
 TwinCAT HMI

Para tal devemos adicionar a biblioteca Tc3_EventLogger.

Devemos começar um software declarando as

variáveis e adicionando os alarmes que serão
utilizados. Ao lado temos a declaração das
variáveis para disparar 4 alarmes simples,
conforme foram declarados nos exemplos
acima.

52
 TwinCAT HMI

Após declaradas as variáveis conforme acima devemos inicializar os blocos funcionais adicionando as
variáveis criadas automaticamente através da mundança no arquivo .tmc.

Após adicionados os alarmes, devemos adicionar o componente da IHM, que nada mais é do que a
barra de eventos.

A EventGrid também pode ser adicionada com filtros, para que apenas alguns tipos de alarmes sejam
mostrados.

53
 TwinCAT HMI

A janela ao lado mostra

a configuração dos
filtros do TwinCAT HMI.

Existem diversos tipos

de filtros que podem
ser configurados de
acordo com a vontade
do usuário.

Nota: Este manual contém apenas uma explicação superficial do

Eventlogger, que engloba muito mais do que mostrado aqui, como
mostrar os alarmes em aplicações .net, gerar alarmes com
atributos JSON etc… para mais informações contatar o suporte da
Beckhoff Brasil.

 CONTROLE DE USUÁRIOS

A função de controle de usuários no TwinCAT HMI pode ser implementada para várias funcionalidades,
entre elas:

Controle de acesso a determinados campos na tela

Controle de acesso a variáveis específicas

Controle de acesso a arquivos

O controle de usuários é feito com base em grupos, após criar novos grupos é necessário adicionar
usuários que irão pertencer a determinados grupos, Ex

Grupos  Administradores, técnicos, operadores, qualidade.

Usuários  João, Pedro, etc..

Depois temos : João pertence ao grupo Administradores, Pedro pertence do grupo operadores

54
 TwinCAT HMI

Quando os usuários fizerem login no TwinCAT esses estarão limitados de acordo com o grupo ao qual
pertencem.

Nota: o gerenciamento de usuários do TwinCAT HMI funciona com

a configuração ativa, o Live view, apesar de ser uma réplica das
telas não se trata da configuração ativa, logo o gerenciamento de
usuários não funciona no Live View, devendo ser utilizado no
Browser.

A criação de grupos pode ser feita no configurador do TwinCAT HMI, clicando no menu TwinCAT HMI
 Windows  TwinCAT HMI Configuration.

Grupo a ser Acessos do

adicionado Usuários existentes, marcar a
grupo
opção para adicioná-los
automaticamente ao grupo que
será criado

Acima temos o procedimento para adição de grupos.

55
 TwinCAT HMI

A imagem acima mostra a criação de um usuário chamado “Usuario”, a definição da senha de acesso
para o mesmo, juntamente com a definição da linguagem padrão deste usuário, também fica definido
que o usuário criado pertence ao grupo “operador”.

O próximo passo para fazer funcionar é definir os acessos em cada um dos elementos.

Para tal devemos clicar nas propriedades do objeto (Ex. um botão), e editar os acessos desse elemento.

56
 TwinCAT HMI

Clicar sobre a coluna “Allow” para

definir o acesso individual a cada
um dos elementos, basta clicar
sobre o elemento e selecionar a
opção para o mesmo (verde
permite o acesso e vermelho não
permite o acesso para aquele
grupo de usuário).

Na coluna “Inherit” é possível selecionar cada um dos elementos para herdar o acesso do seu container
pai, por exemplo, suponha que um botão seja inserido dentro de um User Control e esse mesmo User
Control tenha acesso negado aos usuários do grupo “Operador”, logo quando um operador estiver
logado este não poderá manipular nenhum dos elementos que fizerem parte daquele user control e que
tiverem a propriedade selecionada como “inherit”.

Também é possível modificar o acesso de um determinado grupo a uma pasta, página, UserControl,
enfim, qualquer arquivo feito no TwinCAT HMI.

57
 TwinCAT HMI

Na opção ao lado vemos que o nível de usuário “Técnico” não tem acesso de escrita ao arquivo
“Pagina2.content”.

Para trocar de usuário é necessário fazer o Logout do Browser. Por padrão deve-se fazer login ao iniciar
o TwinCAT HMI Server, o que obriga o usuário a inserir a senha.

Para fazer Logout existe uma função que pode ser adicionada em algum botão.

Adicionar um botão qualquer e colocar a

opção “Logout”.

58
 TwinCAT HMI

Ao apertar o botão o usuário será levado à página de Login do TwinCAT HMI, onde poderá realizar o
login com outro usuário.

Leitura do usuário ativo:

Ou ponto importante ao se trabalhar com controle de usuários é ter a ciência de qual usuário está logado
no momento.

Isso pode ser alcançado vinculando esta propriedade em algum campo de texto.

Devemos:

Criar um campo de texto qualquer

Criar um binding para a propriedade de texto

Selecionar a propriedade adequada conforme figura abaixo

59
 TwinCAT HMI

 TROCA DE LINGUAGENS COM O TWINCAT HMI

Várias linguagens podem ser utilizadas com o TwinCAT HMI, todos os elementos textuais das telas
podem ser traduzidos. Por padrão o TwinCAT HMI já traz as linguagens inglês e alemão, português do
Brasil pode ser adicionado conforme figura abaixo.

Adicionar uma nova “Localization”.

E selecionar Português do Brasil.

60
 TwinCAT HMI

A partir desse ponto é possível utilizar os arquivos criados para fazer a tradução.

Tradução do mesmo
Nome do símbolo para PT-BR

Após a criação dos símbolos é possível traduzi-los para outros idiomas, bastando para isso clicar nas
outras linguagens disponíveis (ou adicionar outras, conforma mostrado acima) e traduzir. É importante
notar que os símbolos somente ficarão disponíveis nos arquivos das outras linguagens quando o
arquivos no qual o símbolo for criado for salvo, é recomendável criar todos os símbolos em uma
linguagem e, só depois abrir o arquivo da outra linguagem.

Também é possível exportar o arquivo de tradução para o formato excel.

61

Exportação para excel Criação de novo símbolo

 TwinCAT HMI

Para alterar a linguagem

ativa basta utilizar a função
“SetLocale”, em qualquer
botão.

 CONSIDERAÇÕES SOBRE O TAMANHO DA TELA E DOS ELEMENTOS

O TwinCAT HMI oferece várias possibilidades para redimensionar automaticamente a tela, desde utilizar
o tamanho dos views, contents, UserControls baseados em um fator percentual até algumas opções
mais avançadas, algumas delas mostradas abaixo:

Default Viewport Height : Altura

padrão das telas, toda vez que
uma nova tela for cria (Views e
Contents)

Default Viewport Height :

Largura padrão das telas, toda
vez que uma nova tela for
criada (Views e Contents)

Determinar o Viewport padrão

Esse Viewport é a representação padrão na qual as telas criadas no TwinCAT HMI serão exibidas, se
um usuário tiver uma tela da mesma resolução desse Viewport terá uma visualizaçao equivalente à
aquela que ele possui na área de desenho do TwinCAT HMI.

De qualquer forma, é possivel que a resolução da tela seja diferente no Client, em relação ao Viewport
definido pelo usuário no início da aplicação sem prejuízos à legibilidade dos componentes na tela, para
tal existem várias opções usadas para tornar a tela responsiva.

Views:

Ao criar uma nova aplicação já é criado automaticamente o “Desktop.view”, que é o padrão para tela
inicial. Ao selecionar o Desktop.view e clicar na área de trabalho do mesmo, podemos verificar que o
Viewport já vem configurado da maneira colocada na janela de propriedades.

Além disso podemos usar outras propriedades dos Views (que também se extendem a vários outros
objetos), afim de parametrizar o redimensionamento automático destes.

62
 TwinCAT HMI

Para tal precisamos entender dois conceitos:

O conceito de Objeto Pai e, o conceito de objeto filho.

O objeto pai nada mais é do que o objeto no qual o componente com o qual estamos trabalhando está
ou estará contido em determinado momento, do qual este pode ou não herdar propriedades. Por
exemplo, ao abrir um Live View mostrando o Desktop.view a janela do Live view é o pai, uma vez que é
o componente básico no qual estarão contidos os outros componentes.

Já o componente filho é o elemento que é inserido em outro elemento, (seja este a janela do browser,
do Live View) de um conteúdo.

Ao analisar um botão inserido em um content fica muito claro que o content é o pai enquanto que o
botão é o filho, ao chamarmos um content dentro de uma region a region é o pai, ao passo que o content
é o filho.

Pai

Filho

Pai

Filho

63
 TwinCAT HMI

Repare que o browser está exibindo um view (Browser é o pai, enquanto o view é o filho), enquanto o
view contém botão (view é o pai enquanto o botão é o filho). É importante reparar nesse tipo de dinâmica
para entender como os elementos serão redimensionados quando o TwinCAT HMI for executado em
diferentes tipos de dispositivos.

Todo elemento adicionar nas telas (e as telas propriamente ditas) possui em suas propriedades uma
série de elementos referentes ao Layout.

Dimensionamento

Relacionamento

Limites

64
 TwinCAT HMI

Dimensionamento: são parâmetros que determinam o tamanho do elemento selecionado e podem ser
medidos em pixels ou em porcentagem. A relevância de cada um desses parâmetros no tamanho do
elemento selecionado depende dos parâmetros colocados em “Relacionamentos”.

Relacionamentos: determinam como o tamanho do elemento se relaciona com o elemento pai ou com
o que está contido nele. As possíveis configurações para largura a altura são:

Value: os valores contidos na parte de dimensionamento podem ser selecionados para

dimensionar o elemento. Os elementos “Left”, “Top”, “Right”, “Botton”, “Width” e “Height”. Podem
ser usados para se determinar o tamanho do elemento.

Parent: o tamanho do elemento é sempre relativo ao tamanho do elemento pai, nessa

configuração os parâmetros “Left”, ”Right”, ”Top” e ”Botton” devem ser necessariamente usadas.
Por exemplo Left = 10% e Right = 20%  entre a extremidade esquerda do controle haverão
exatamente 10% da tela, não importando o tamanho da mesma, enquanto que teremos 20% da
tela entre a extremidade direita do controle e a borda direita da tela.

Content: Controle será automaticamente dimensionado de acordo com o que existir dentro do
mesmo. Por exemplo, se isso for aplicação a um view, o tamanho do mesmo será exatamente o
tamanho necessário para abrigar os elementos contidos neste. Cuidado, se não houver nada
dentro do controle este não tera tamanho nenhum (tera o tamanho de um ponto e sera dificil de
localizar na tela).

Limites: limite máximo e mínimo para o tamanho do elemento em questão, por exemplo se
determinarmos para a largura Mindidth = 300px e MaxWidth = 450 pixels o controle parametrizado terá
entre 300 e 450 pixels dependendo do tamanho do cliente onde o mesmo for aberto. Essa configuração
é muito útil para abrir o mesmo view tanto em telas pequenas quanto em telas grandes, neste caso ao
abrir em um Smartphone o elemento terá no mínimo 300 pixels, já ao abri-lo em uma tela de computador
este terá no máximo 450 pixels.

Zindex: supondo que os elementos sejam dimensionados de acordo com o tamanho do elemento que
os contém pode acontecer de um elemento se sobrepor ao outro. Este parâmetro serve para determinar
qual elemento será mostrado primeiro caso isso ocorra.

65
 TwinCAT HMI

 GRID CONTROL

O grid control trata-se de um elemento que auxilia na construção de telas responsivas, essa podem ser
utilizadas tanto para que possam se encaixar em qualquer tamanho de tela quanto para mostrar em
dispositivos móveis, sendo possível posicionar o dispositivo tanto na vertical quanto na horizontal e,
ainda assim, manter a visualização dos elementos correta.

O Grid control deve ser usado quando se deseja criar uma tela responsiva, adaptando-se ao tamanho
do client.

A seguir há um exemplo de configuração do Grid control para a tela inicial do TwinCAT HMI, tornando
toda a aplicação responsiva, o que está correto do ponto de vista de funcionalidade: todo o supervisório
deve ser responsivo, até mesmo pensando em compatibilidade com conectividade WEB.

Para começar, podemos criar um novo projeto da mesma forma como feito acima.

O projeto possui uma tela padrão chamada “Desktop.view”.

Essa tela vem, por padrão, com resolução fixa e deve ser adaptada para se ajustar automaticamente ao
tamanho do Browser. Como sabemos o TwinCAT HMI irá rodar em um browser e podemos fazer com
que o tamanho do mesmo siga o tamanho do Browser, para tal podemos ajustar a largura da tela
Desktop.view para percentual, dessa forma a mesma terá sempre um tamanho relativo ao tamanho do
Browser no qual a mesma irá abrir.

Selecionar a tela inicial “Desktop.view” e ajustar o atributo

Width para 100%, isso fará com que a largura a tela inicial se
ajuste automaticamente à largura do browser na qual a mesma
for aberta.

66
 TwinCAT HMI

Arrastar e soltar um Grid

Control para dentro da tela
inicial.

No Grid control podemos modificar os parâmetros conforme figura abaixo.

Devemos ajustar as propriedades do Grid Control conforme colocado

ao lado, o que basicamente significa que teremos: 20 pixels entre a
borda esquerda e o Grid, 100 pixels da borda superior até Grid e 20
pixels da borda direito até o Grid, porém para que essa configuração
funcione perfeitamente devemos fazer mais um ajuste.

No parâmetro “WidthMode” devemos escolher “Parent”, isso fará com

que a largura do Grid se ajuste completamente à largura do
Desktop.view, que por sua vez irá ter sempre 100% do tamanho do
browser no qual for aberto.

67
 TwinCAT HMI

Após isso devemos adicionar a quantidade de colunas necessárias para a nossa aplicação, nesse
exemplo iremos adicionar duas colunas e duas linhas.

Configuração
para que o Grid
tenha duas
colunas. Basta
adicionar mais
uma coluna em

“ColummOptions”.

O próximo passo é fazer o mesmo para as linhas em “RowOptions” adicionar mais uma linha.

Isso irá criar um Grid Control com células quatro células (0,0)(0,1)(1,0)(1,1), nas quais podemos
adicionar elementos que irão acompanhar a movimentação das células, por exemplo, adicionando um
textblock em cada uma das células. Ao fazer isso, podemos também fixar a posição dos elementos
dentro da célula (quer usando pixels ou percentual). Podemos então selecionar “Content” no parâmetro
“heightMode” isso fará com que as células ajustem sua altura automaticamente ao conteúdo que está
inserido nelas.

Também podemos repetir o mesmo ajuste (selecionar “Content” em “HeightMode”) para a tela
Desktop.view.

Agora devemos criar uma maneira de diferenciar as células.

68
 TwinCAT HMI

Devemos inserir 4 células utilizando o menu “CellOptions”, podemos inserir cores diferentes para cada
uma das células e determinar qual índice de coluna e de linha cada célula terá.

Configuração de uma cor

Adição das Células.
individual para cada célula.

Seleção dos índices de

linha e coluna, devemos
identificar os índices da
célula (0,0)(0,1)(1,0)(1,1).

Isso irá criar um grid parecido com a figura abaixo:

69
 TwinCAT HMI

Podemos notar que, ao selecionar a opção para que o grid se ajuste ao conteúdo do mesmo os
TextBlocks adicionados são posicionados na parte inferior do mesmo, ao movimentar o textblock o
tamanho da célula será redimensionado automaticamente, para fixar uma altura mínima nas linhas
podemos acessar a janela de configuração do “Row Options”.

Apos isso devemos alterar o parâmetro “Minimum Height” do “Desktop.view” para 100%.

Uma vez finalizados os preparativos acima podemos iniciar o Live-View e redimensioná-lo, verifique que
o redimensionamento do mesmo irá fazer com que a as células do Grid sejam reposicionadas
acomodando os componentes de acordo com o tamanho do client.

Esse tipo de configuração é ideal para mostrar em aparelhos móveis pois, ao manter o aparelho de pé
vemos os elementos mostrados como uma “linha” e ao colocá-lo deitado o TwinCAT HMI irá se auto-
ajustar ao formato do browser.

70
 TwinCAT HMI

 SCRIPTS

O TwinCAT HMI oferece a possibilidade de realizar vários tipos de Script, desde scripts realizados na
sua linguagem gráfica, passando por outros feitos em JavaScript ou Server Extensions em C#. Aqui
discutiremos as funções básicas em JavaScript, é claro, sem focar na linguagem propriamente dita, mas
em como criar scripts a partir do TwinCAT HMI.

É claro que as funções feitas (seja em JavaScript ou outras linguagens) podem receber e retornar
valores, que podem ser usados como for necessário dentro do TwinCAT HMI.

Nome da função a
ser adicionada.

Após a adição da função.

Para editar a função primeiro devemos definir quais parâmetros ela irá receber ou retornar.

71
 TwinCAT HMI

Na figura acima, temos uma representação da janela de edição dos parâmetros de interface da função,
na qual podemos adicionar parâmetros a serem passados para a mesma.

Exemplos do uso de funções no TwinCAT HMI são: conversão de unidades, colocação de unidades em
campos de texto, etc…

A seguir temos o exemplo de uma função em JavaScript para adicionar a unidade a campos de texto
que irão mostrar valores numéricos, seguidos sua respectiva unidade (ºC, Volts, kgf/cm²), um função
parecida com aquilo que pode ser feito com a função FormatString.

Adicionar uma nova função JS e nomea-la

com o nome adequado (nesse exemplo
está como “addUnidade”).

72
 TwinCAT HMI

Editar as
variáveis de
interface,
adicionando
duas variáveis
para serem
passadas toda
vez que a função
for chamada.

Nesse exemplo chamarei as variáveis de “valor” do tipo “Number” e “unidade” do tipo ”String”.

Na aba “Bindable”, manter a opção “Yes, pass value”.

Isso irá fazer com que a definição da função seja alterada, de acordo com figura abaixo:

O próximo passo é realizar a programação da função de maneira a fazer a concatenação do valor com
a unidade.

programação da função em JavaScript

simples.

73
 TwinCAT HMI

Adicionar um simples Textbox e colocar a função na propriedade “Text”. Colocar a variável que se deseja
mostrar e, em seguida, colocar a unidade que se deseja mostrar, o resultado é mostrado acima.

Nota: o JavaScript é extremamente poderoso para o TwinCAT HMI e

oferece muitas possibilidades para manipular objetos e valores na tela,
contudo, não é intenção desse tutorial prover uma base sólida de
JavaScript, devendo o usuário realizar um treinamento apropriado.

Também é importante ressaltar que o JavaScript não é indispensável

para a criação de telas no TwinCAT HMI, uma vez que é possível o uso
de scripts gráficos.

 TEMAS

O TwinCAT HMI oferece a possibilidade de construir o próprio tema, sendo possível trocar os temas até
mesmo durante a execução da aplicação.

A seguir temos um breve tutorial de como criar um tema próprio, e defini-lo como tema principal, bem
como trocá-lo em tempo real.

O tema padrão que será utilizado para todos os componentes adicionados à visualização é mostrado
nas propriedades do projeto, conforme na figura abaixo.

74
 TwinCAT HMI

nome do tema utilizado para os

elementos do TwinCAT HMI.

Clicar sobre “Themes” e adicionar

um novo item

Uma vez que o novo tema

tenha sido adicionado é
possível editar cada um dos
componentes nele
presentes (os componentes
básicos do TwinCAT HMI).
De maneira a fazer com que
cada um dos componentes
tenha a aparência desejada
pela empresa que está
desenvolvendo o
supervisório. Todas as propriedades dos componentes podem ser alteradas.

75
 TwinCAT HMI

No exemplo ao lado temos a

alteração da propriedade
“Background color” de um botão
comum.

Botão adicionado baseado no tema recêm criado.

É importante ressaltar que o tema criado pode ser trocado com o HMI rodando.

Para tal podemos adicionar um botão para setar o tema ativo para o tema desejado.

É possível alterar o
tema ativo com o
evento “SetTheme”,
que pode ser
adicionado a um
evento de qualquer
botão, conforme visto
anteriormente.

Caso não seja necessário alterar o tema enquanto o TwinCAT HMI está rodando, basta alterar o tema
padrão nas propriedades do projeto como visto anteriormente.

76
 TwinCAT HMI

 PUBLICANDO A APLICAÇÃO

Uma vez que a aplicação esteja validada, ou até mesmo para testar algumas funcionalidades (como
controle de usuários) é necessário publicar diretamente a aplicação do TwinCAT HMI e iniciá-la através
de um browser. Para testar a aplicação (exceto a parte de usuários) podemos utilizar o Live-View, que
oferece uma visão fiel de como será a aparência final das telas desenvolvidas.

Para iniciar a aplicação devemos, inicialmente, iniciar o servidor do TwinCAT HMI, o que pode ser feito
através de um atalho no menu iniciar do PC onde o mesmo foi instalado, ou executando o arquivo
“C:\TwinCAT\Functions\TF2000-HMI-Server\ TcHmiSrv.exe”

Executar o arquivo na pasta

determinada

Ou clicar no atalho contido no menu iniciar.

77
 TwinCAT HMI

Isso irá iniciar o TwinCAT HMI Server no PC desejado (que pode ou não ser o mesmo PC onde se está
rodando a engenharia).

É imprescindível para esse passo que haja uma licença ativa do TwinCAT HMI (mesmo que uma licença
trial de 7 dias).

Verificando as
licenças ativas, basta
clicar no ícone do
TwinCAT e verificar a
opção “About
TwinCAT”. Deverá ter
o item “TF2000” no
mínimo para que se
possa rodar o
TwinCAT HMI. Sem
uma licença ativa o
TwinCAT HMI irá
retornar um erro
quando se tentar
iniciar o servidor.
Caso não haja uma,
você deve colocar
uma licença no
TwinCAT e gerar uma
de 7 dias, ou ativar a
licença final.

Em geral a abertura do server exibirá dois

servers ativos na barra de tarefas,
perceba que na figura ao lado temos a
“port 3002” e a “port 1010”. O port 3002
nada mais é que o servidor necessário
para rodar o TwinCAT HMI em modo de
engenharia, ou seja, para fazê-lo
funcionar enquanto temos o visual studio
aberto, testando as telas que foram
desenvolvidas. Já a porta 1010
representa o TwinCAT Server
propriamente dito, no qual devemos rodar o server e publicar o projeto, uma vez concluído.

78
 TwinCAT HMI

O próximo passo é realizar a configuração do TwinCAT HMI para publicação.

Para tal devemos criar um usuário (ou utilizar o administrador do sistema que vem como padrão em
todas configuração do TwinCAT HMI).

Caso for utilizar o usuário padrão do sistema, é recomendado trocar a senha do mesmo.

Na árvore do projeto
selecionar Extensions,
clicar em
TcHmiUserManagement,
definir e confirmar a nova
senha e clicar em “Change
password”.

Esse usuário e senha serão

úteis para descarregar o
projeto tanto localmente
quanto de maneira remota.

O próximo passo para fazer a publicação é

criar um perfil para tal.

O perfil é importante pois permite publicar

várias vezes sem ter que reconfigurar a
comunicação entre a engenharia e do
TwinCAT HMI Server.

79
 TwinCAT HMI

Após a criação do perfil para publicar o trabalho devemos selecionar qual TwinCAT HMI Server iremos
selecionar para a publicação. Os passos ao lado descrevem como fazer isso. Após selecionar para
publicar de maneira segura (usando o SSL/TLS) devemos importar o certificado do Server.

Digitar a senha e verificar o status da conexão.

E publicar.

80
 TwinCAT HMI

Durante a publicação a janela “output” do TwinCAT irá mostrar o andamento da publicação.

Ao final da publicação provavelmente o navegador padrão irá abrir com a tela de login, na qual é possível
definir o usuário e digitar a senha. A aplicação irá começar automaticamente.

Selecionar o usuário definido na engenharia e digitar a senha

criada.

Caso não abra

automaticamente
é possível acessar
através do icone
na barra de
tarefas.

Ou simplesmente ir até a barra de endereço do navegador e digitar o IP seguido da porta, que pode ser
“1010” (HTTP) ou “1020” (HTTPS).

81
 TwinCAT HMI

Nota: caso a publicação seja realizada para um dispositivo remoto,

lembre-se que as mesmas ressalvas se aplicam, ou seja, o
dispositivo de estar com a licença ativa, o TwinCAT HMI Server deve
estar rodando no dispositivo, ao publicar deve-se selecionar o
dispositivo correto na janela “Discover TwinCAT HMI Server” .

Importante: em alguns casos o Firewall no dispositivo remoto

pode bloquear a publicacao, quando feita remotamente.

Nesses casos é necessário desabilitar o Firewall, ou criar um

excessão para a porta 1010/1020 que possibilte a publicação
remota

https://support.microsoft.com/pt-br/help/4028544/windows-10-
turn-windows-defender-firewall-on-or-off

 RECEITAS (DEFINIÇÃO)

Importante: a parte de gerenciamento de receitas

conforme indicado nesse documento funciona a partir da
versão 1.10.1171.142 do TwinCAT HMI.

82
 TwinCAT HMI

O conceito de receita remonta à idéia de produto, se um determinado produto carece de uma

combinação de parâmetros para ser produzido estes podem ser armazenados em receitas que podem,
por sua vez, ser salvas para serem reutilizadas.

Para um melhor gerenciamento das receitas é importante entender os conceitos de “Tipo de receita” e
“Receita” propriamente ditos.

De maneira simplificada podemos definir o “tipo de receita” como sendo a especificação dos parâmetros
que serão salvos, já a receita é um elemento derivado do tipo definido, por exemplo, digamos que para
realizar a produção de um determinado produto sejam necessários 3 parâmetros, sendo eles:
velocidade, temperatura e pressão. Assim sendo, o tipo fica sendo esse (a velocidade, a temperatura e
a pressão). As receitas, por sua vez, serão derivadas desse tipo.

Tipo 1 (Velocidade, temperatura e pressão).

Receita 1 (Tipo 1)

Velocidade = 100

Temperatura = 150

Pressão = 80

Receita 2 (Tipo 1)

Velocidade = 50

Temperatura = 70

Pressão = 50

É óbvio que se criarmos um outro tipo de receita, com variáveis diferentes (por exemplo PH e tempo), e
criarmos receitas baseadas nesse tipo, ao ativarmos essas receitas (chamar a receita) não haverá
alteração alguma nas variáveis que estão associadas a receitas de outro tipo.

A edição dos tipos de receita e criação de receitas pode ser feita através da ferramenta de engenharia
do TwinCAT HMI, integrada ao visual Studio

83
 TwinCAT HMI

Ao clicar na guia “TwinCAT

HMI” e em Windows/TwinCAT
HMI Configuration abriremos
o assistente de configuração
do TwinCAT HMI, onde é
possível configurar, entre
outras coisas, as receitas.

Uma vez aberta a caixa de diálogo,

podemos clicar sobre o botão “Create
Recipe Type”, em “Recipe Types”
para iniciar a criação de um novo tipo.

Definir um nome para o novo tipo e clicar em

“OK”.

84
 TwinCAT HMI

Ao final desse procedimento o tipo estará criado e poderá ser editado, para tal devemos dar um duplo
clique sobre o mesmo, o que irá abrir a seguinte janela.

Na qual podemos definir quais simbolos fazem parte dessa receita.

Para adicionar os símbolos à receita os mesmos deverão estar previamente mapeados (ver sessão
sobre como mapear os símbolos).

Uma vez mapeados, será possível arrastar e soltar os símbolos da pasta “Mapped Simbols” para a
definiação de receita, conforme figura abaixo.

É possível determinar: valor padrão, mínimo,

máximo e unidade para os variáveis das
receitas.

Arrastar e soltar os símbolos previamente mapeados

para a área de edição do tipo de receita. Após isso é
possível determinar um nome para o mesmo.

85
 TwinCAT HMI

Além de símbolos mapeados do PLC também é possível utilizar símbolos internos do projeto de IHM
nas receitas, para configurá-los basta arrastar e soltar da mesma forma.

Após a criação do tipo e a determinação das variavies que fazem parte deste, podemos criar algumas
receitas derivadas desse tipo ainda no ambiente de engenharia.

Para tal devemos abrir novamente a janela de configuração das receitas do TwinCAT HMI.

Selecionar o tipo de receita que desejamos

usar e clicar em “OK”.

Isso irá abrir a janela de configuração das receitas na engenharia do TwinCAT HMI, conforme mostrado
abaixo.

Basta editar os valores, ao

ativar a receita “Receita1”
as respectivas variáveis
irão assumir os valores
aqui inseridos.

As receitas aqui editadas são armazenadas em formato “JSON” e os valores inseridos, tanto do tipo de
receita quanto das receitas propriamente ditas, podem ser verificados nas extensões de servidor.

86
 TwinCAT HMI

Todas as
informações, seja
de definição do
tipo da receita
quanto dos
membros desta
são salvos em
forma JSON e
podem ser
encontrados na
figura ao lado.

 RECEITAS (MANIPULAÇÃO)

Agora devemos salvar, carregar, excluir e criar novas receitas. Para isso faremos uso de algumas
funções prontas do TwinCAT, bem como algumas funções desenvolvidas em JavaScript que iremos
importar.

 Listar as receitas existentes.

A primeira tarefa que iremos executar ao manipular receitas é de listar as receitas existentes, para tal
iremos importar uma serié de funções feitas em JavaScript (que podem ser fornecidas junto com o
manual, ou baixadas no exemplo).

Funções que devem ser importadas no projeto,

para facilitar o manuseio das receitas.

É recomendável criar uma nova

pasta no projeto e, em seguida, adicionar um novo item
selecionando as funções para importação.

87
 TwinCAT HMI

Para listar as receitas existentes podemos utilizar um combobox.

Dentre as funções importadas está a “ListRecipesAsReferenceArray”, que podemos utilizar para inserir
as receitas existentes em um combobox.

Ao adicionar o combobox podemos editar a sua propriedade “SrcData”, que determina as informações
que serão mostradas nele.

Pode-se copiar o seguinte texto em “SrcData”.

ListRecipesAsReferenceArray(%s%TcHmiRecipeManagement.Config::recipeList%/s%)

Que irá fazer com que as receitas salvas sejam mostradas no Combobox selecionado.

 Salvar uma nova receita.

Para tal temos a função “TeachAsNewRecipe”, que pode ser utilizada para este fim.

Esta função pode ser utilizada em um botão qualquer, basta adicionar um botão comum e realizar o
duplo clique sobre o mesmo, o que irá abrir a edição do evento “.OnPressed”.

88
 TwinCAT HMI

A partir deste momento basta arrastar a função “TeachAsNewRecipe”, que demandará 2 parâmetros,
sendo um deles uma receita do mesmo tipo que a receita a ser criada e o segundo deverá ser o nome
da nova receita.

Para determinar o nome de uma receita do mesmo tipo da que será criada podemos usar o valor
selecionado no combobox utilizado no item anterior em “recipeReference”, já em “newRecipeName”
devemos utilizar uma variável contendo o nome da nova receita a ser criada.

 Ativar a receita salva.

Para ler os dados da receita em arquivo e transferir esses valores para as variáveis do PLC utilizamos
a função de ativar a receita.

É essencial a primeira parte que consiste em mostrar as receitas existentes. No mais o comando de
ativação de receita é bem simples.

Pode-se começar também inserindo um simples botão.

Colocar aqui o conteúdo do

Combobox, selecionando o
nome da receita que se deseja
ativar.

Ao dar um duplo clique sobre o botão podemos adicionar a função para ativar a receita.

89
 TwinCAT HMI

 Excluir e atualizar receitas.

Tanto para excluir quanto para atualizar as receitas os passos são os mesmos que para ativar a
receita, mudando apenas o comando usado.

Comando para atualizar

receita.

Comando para excluir

receita.

90
 TwinCAT HMI

 IFRAME

Elemento bastatante versátil que pode funcionar como um “Mini browser” dentro de qualquer página do
TwinCAT HMI, sendo útil para mostrar páginas web, estejam estas no mesmo PC ou na web
propriamente dita, também pode ser utilizado para mostrar documentos em PDF.

A utilidade que daremos ao mesmo é para mostrar arquivos em pdf na tela.

Para isso devemos primeiramente adicionar um Iframe na área de trabalho.

Para poder utilizar um arquivo em pdf no projeto devemos adicioná-lo a uma das pastas.

Adicionar um item
existente.

Selecionar o arquivo que se

deseja mostrar.

Ao selecionar o
arquivo é possível
verificar o
caminho do
mesmo.

91
 TwinCAT HMI

Basta colocar o caminho copiado na propriedade “Src”, do Iframe.

Como resultado teremos o

arquivo em pdf mostrado na tela
do TwinCAT HMI.

7. VERSÃO

Versão 1.0.2 – 04/01/2018

Autor: Rodrigo de Sousa Soares

92
 TwinCAT HMI

8. SUPORTE TÉCNICO

Para eventuais dúvidas e problemas favor entrar em contato:

 Beckhoff São Paulo (11) 4126-3232

 Beckhoff Filial Joinville (47) 3439-0908

 Beckhoff Filial Novo Hamburgo – (51) 3035-6233

93