Treinamento

Indusoft Web Studio

8.0

Ronnan de Brito Cardoso

Criando um novo projeto

▰ Ao criar um novo projeto, o IWS cria um diretório com o nome

especificado no projeto, onde são armazenadas as diferentes
planilhas, telas, e configurações que serão criadas no ambiente de
desenvolvimento do IWS.
▰ O novo projeto é criado sem nenhuma tag, tela ou qualquer outra
configuração (padrão), permitindo ao usuário fazer a edição do
projeto conforme seja necessário.
▰ Durante a criação do projeto, é necessário informar o nome do
projeto, local onde será salvo, tipo de licença e resolução.
2
Criando um novo projeto

▰ Clique no botão Arquivo no canto superior esquerdo (ícone do IWS)

e selecione a opção Novo.

3
Criando um novo projeto

▰ A janela Assistente de Projeto será exibida.

4
Especificações de projeto

▰ O Aplicativo supervisório deverá controlar a produção, desde a

seleção da receita do produto a ser produzido, até a estocagem do
produto final;
▰ O Supervisório deverá armazenar os dados de nível, temperatura,
vazão e pressão dos tanques (3 tanques de mistura e 1 de
estocagem);
▰ Deverá gerar relatórios e gráficos de processo OnLine e Histórico;

5
Especificações de projeto

▰ Deverá informar alarmes de processo (ALTO e BAIXO) OnLine e

Histórico. (para Temperatura e Nível de cada tanque);
▰ As variáveis de campo veem de um PLC que se comunica através
do protocolo MODBUS TCP. (O Supervisório deverá ter um modo de
simulação das variáveis que possa ser ligado quando não
conectado ao CLP)

6
Grupo de telas e telas principais

▰ Nesse treinamento, iremos criar um menu superior, um menu

inferior e 9 telas de navegação entre os menus. Para as telas de
navegação, iremos criar uma tela modelo que servirá de base para
as outras 8.

7
Grupo de telas e telas principais

▰ Tela superior
▰ No Explorador de Projeto, clique com o botão direito em telas e
selecione a opção Inserir.

8
Grupo de telas e telas principais

▰ A janela Atributos de Tela será aberta.

9
Grupo de telas e telas principais

▰ Será exibida a tela criada no Editor de Tela/Planilha.

▰ Para salvar a tela, clique em Arquivo (ícone IWS) e selecione Salvar
Como.
▰ Salve com o nome de SUPERIOR.

10
Grupo de telas e telas principais

▰ Tela inferior
▰ No Explorador de Projeto, clique com o botão direito em telas e
selecione a opção Inserir.

11
Grupo de telas e telas principais

▰ A janela Atributos de Tela será aberta.

12
Grupo de telas e telas principais

▰ Será exibida a tela criada no Editor de Tela/Planilha.

▰ Para salvar a tela, clique em Arquivo (ícone IWS) e selecione Salvar
Como.
▰ Salve com o nome de INFERIOR.

13
Grupo de telas e telas principais

▰ Tela modelo
▰ No Explorador de Projeto, clique com o botão direito em telas e
selecione a opção Inserir.
▰ A janela Atributos de Tela será aberta.
▰ Em Descrição, escreva TELA MODELO.
▰ Em Tamanho, configure as dimensões de Largura: 1024 e Altura:
530.
▰ Em Localização, configure as posições Topo: 140 Esquerda: 0.

14
Grupo de telas e telas principais

▰ Será exibida a tela criada no Editor de Tela/Planilha.

▰ Para salvar a tela, clique em Arquivo (ícone IWS) e selecione Salvar
Como.
▰ Salve com o nome de MODELO.

15
Grupo de telas e telas principais

▰ Telas de navegação
▰ Para as telas de navegação, vamos utilizar como base a tela
modelo, assim não precisamos configurar novamente as opções de
Tamanho e Localização.
▰ Abrir a tela MODELO criada anteriormente.
▰ Clique em Arquivo (ícone do IWS), e selecione Salvar Como.
▰ Salve a tela com o nome de SINOTICO.
▰ Repita essas etapas, renomeando a tela para: ALARME, EVENTO,
TREND, RECEITA, RELATORIO, BANCO_DADOS e DRIVER.
16
Grupo de telas e telas principais

▰ Ao final do processo, teremos as

seguintes telas na pasta Tela do
Explorador de Projetos:

17
Grupo de telas e telas principais

▰ Grupo de telas
▰ No Explorador de Projeto, clique com o botão direito em grupo de
telas e selecione a opção Inserir Grupo de Telas.

18
Grupo de telas e telas principais

▰ A janela Inserir Grupo de Telas

será exibida.
▰ Em Nome digite o nome do Grupo
de Telas. Para esse treinamento,
escreva INICIAL.
▰ Em Lista de Telas, selecione as
telas SUPERIOR, INFERIOR e
MODELO.

19
Grupo de telas e telas principais

▰ Tela inicial
▰ Para definir uma tela ou grupo de
telas como a Tela Inicial da
aplicação, clique com o direito na
tela, ou na pasta do grupo de telas
e selecione a opção Definir Como
Inicial.

20
Grupo de telas e telas principais

▰ Cor de fundo
▰ Abra a tela SUPERIOR.
▰ Na aba Gráficos, do menu Ribbon,
selecione a opção Cor de Fundo, ou
clique com o botão direito sobre a tela
aberta e selecione a opção Cor de
Fundo.

21
Grupo de telas e telas principais

▰ A janela Preenchimento de Fundo será exibida.

▰ Selecione a cor Verde.

▰ Repita essa etapa para a tela INFERIOR. 22

Objetos ativos

▰ Os Objetos Ativos permitem criar objetos interativos na tela,

podendo adicionar um botão, mostrar textos, fazer uma seleção e
diversas opções de configuração.
▰ O IWS possui 9 Objetos Ativos, são eles:
▻ Texto: Cria objetos de texto para criar um caminho para
entrada e/ou saída de texto em uma única linha.
▻ Caixa de Texto: É uma caixa de entrada/saída de texto que
pode ser configurado para mostrar várias linhas.

23
Objetos ativos

▻ Botão: Cria botões de tamanho personalizado.

▻ Botão de Ação: Cria um objeto botão com a animação de
comando com um objeto ou botões pré-configurados.
(Momentâneo, Mantido, Travado).
▻ Caixa de Seleção: Cria interfaces de onde os usuários podem
ativar/desativar uma opção na tela.
▻ Botão de Opção: Cria interfaces de onde os usuários podem
escolher uma opção entre várias opções na tela.
24
Objetos ativos

▻ Caixa de Combinação: Seleciona um único rótulo de uma lista

de combo-box de etiquetas.
▻ Caixa de Lista: Exibe uma lista de mensagens ou itens de
menu para o usuário escolher. Quando o usuário seleciona
uma mensagem, seu valor numérico correspondente é gravado
em um tag projeto.
▻ Mensagem Inteligente: Exibe mensagens e imagens que
podem ser alterados durante a execução, atualizando o valor
do tag projeto associado. Estão disponíveis (Visualizador de
Mensagem, Indicador de Multiestado, Botão de Ação de 25
Multiestado).
Objetos ativos

▰ Texto
▰ Abra a tela SUPERIOR.
▰ Na aba Gráficos, do menu Ribbon, clique sobre a opção Texto no
agrupamento Objetos Ativos.

26
Objetos ativos

▰ Clique em um ponto da tela para começar a escrever.

▰ Digite Controle de Tanque.
▰ Duplo clique sobre o texto para abrir a janela Propriedades do
Objeto.
▰ Clique no botão Fontes.
▰ A janela Fontes será exibida.

27
Objetos ativos

▰ Aplique a configurações indicadas.

28
Objetos ativos

▰ Posicione o texto para que ele fique no centro/superior da tela

SUPERIOR.

29
Objetos ativos

▰ Botões
▰ Abra a tela INFERIOR.
▰ Na aba Gráficos, do menu Ribbon, clique sobre a opção Botão no
agrupamento Objetos Ativos.

30
Objetos ativos

▰ Clique e arraste na tela INFERIOR para dar forma ao botão.

▰ Duplo clique sobre o botão para abrir a janela Propriedades do
Objeto.
▰ Em Legenda, digite SINÓTICO.
▰ Em Estilo, Selecione Padrão.

31
Objetos ativos

▰ Adicione mais 9 botões, alterando a Legenda para: ALARME,

TREND, EVENTO, RECEITA, RELATÓRIO, BANCO DE DADOS, DRIVER,
SAIR – BUILTIN, SAIR - VBSCRIPT.
▰ Você pode inserir novos botões, repetindo as etapas anteriores,
utilizar a opção de Ctrl+C e Ctrl+V, ou selecionar o primeiro botão,
apertar e segurar a tecla Ctrl e arrastar o botão, copiando-o

32
Objetos ativos

▰ Ao final do processo, teremos os seguintes botões na tela

INFERIOR.

▰ Salve as alterações feitas e feche a tela INFERIOR.

33
Formas

▰ As Formas permitem ao usuário criar polígonos, retângulos, linhas

e outros objetos para a sua tela, personalizando-a.
▰ O IWS possui 6 tipos de Formas, são elas:
▻ Linha: para desenhar uma linha ortogonal.
▻ Polígono Aberto: para desenhar um polígono aberto com uma
borda na cor especificada.
▻ Polígono Fechado: para desenhar um polígono fechado, com
borda e preenchimento.
34
Formas

▻ Retângulo: para criar retângulos e dependendo das

configurações, para criar quadrados.
▻ Retângulo Arredondado: para desenhar retângulos
arredondados (vazio ou cheio).
▻ Elipse: para desenhar elipses, cordas, arcos e anéis.

35
Formas

▰ Retângulo
▰ Abra a tela SUPERIOR.
▰ Na aba Gráficos, do menu Ribbon, clique sobre a opção Retângulo
no agrupamento Formas.

36
Formas

▰ Clique e arraste na tela SUPERIOR para dar forma ao objeto.

▰ Duplo clique sobre o retângulo para abrir a janela Propriedades do
Objeto.
▰ Em Cor, na seção da Borda, selecione a cor Branco.
▰ Em Cor, na seção Segundo Plano, selecione um tom de Azul.
▰ Clique no botão Legenda.
▰ Digite: HORA: {Time} e DATA: {Date}.

37
Formas

▰ Ajuste a fonte para Arial; estilo da fonte Negrito; em tamanho 12; e

cor branca.
▰ Posicione o retângulo para que fique no lado direito/centro da tela
SUPERIOR.

38