Apostila de Treinamento

2. Introdução ao Desenvolvimento Gráfico________________________

Capítulo 2.

Introdução ao Desenvolvimento Gráfico

Copyright © 2002, Intellution, Inc. 1

 Fundamentos do iFIX

2.. Introdução ao Desenvolvimento Gráfico______________________

Objetivos do Capítulo

Este capítulo aborda o desenvolvimento gráfico do iFIX, onde serão vistos os objetos gráficos
disponíveis no iFIX e como trabalhar com a área de desenvolvimento gráfico do iFIX
(WorkSpace). O WorkSpace consiste de uma área de projeto que contém textos, animações e
ferramentas que permitem criar telas de fácil entendimento para o operador. Também oferece
comandos e modos de interação com a tela através de ações de operador como reconhecimento
de alarmes ou mudança de set points do processo.

O capítulo está organizado da seguinte forma:

 Introdução ao Intellution WorkSpace

 Objetos gráficos e suas propriedades
 Construção de telas

Copyright © 2002, Intellution, Inc. 2

 Apostila de Treinamento

2.1. WorkSpace______________________________________________

File Object Format

New Fill Style Bring to Front
Open Edge Style Send to Back
Close Background Style Group / Ungroup
Save Align
Save As View Flip
Save All Zoom Space Evenly
Print Default View Make Same Size
Exit Full View Snap to Grid
Fit Picture to Window Grid Settings
Edit Fit Window to Picture Snap Objects to Grid
Undo Update Window Location
Cut Refresh Window
Copy Color Selections Cascade
Copy as Bitmap Property Window Tile Horizontal
Paste Screen Regions Tile Vertical
Paste Special Close All
Delete Insert
Duplicate OLE Object Help
Select All Rectangle WorkSpace Help
Find and Replace Rounded Rectangle iFIX Picture Server Help
Animations Oval
Picture Line
Polyline
WorkSpace Polygon
Switch to Run Arc
System Tree Chord
Status Bar Pie
Visual Basic Editor Text
User Preferences Chart
Toolbars Bitmap
Full Screen Datalink
Current Time
Current Date
Alarm Summary
Push Button

Figura 2.-1: Menu de Comandos do WorkSpace (em Configure Mode)

Copyright © 2002, Intellution, Inc. 3

 Fundamentos do iFIX

2.1.. WorkSpace______________________________________________

A. WorkSpace
 O WorkSpace é o aplicativo do iFIX onde se faz o desenvolvimento de um
projeto.
 O WorkSpace possui dois modos de operação:
- Configuração (Configure Mode)
- Execução (Run Mode)
 Os componentes que compões o WorkSpace são:
- Árvore do sistema (System Tree)
- Área de desenvolvimento das telas
- Barra de menus
- Barras de ferramentas
 O WorkSpace pode ser apresentado somente com a área de
desenvolvimento, sem os outros componentes. Para isso: selecione menu
WorkSpace  Full Screen. Para apresentar o WoskSpace com todos os
componentes novamente, selecione o botão Close Full Screen.

B. Árvore do Sistema (System Tree)

 Ferramenta de navegação para localizar arquivos e apresenta as pastas e
objetos de forma hierárquica.
 Oferece acesso a determinados aplicativos do iFIX (Alarm History, Login,
etc).
 Pode ser redimensionada, movida ou simplesmente retirada da área de
visualização. Para retirar a árvore do sistema da tela, selecione menu WorkSpace
 System Tree.
 O diretório padrão das pastas são configurados no aplicativo SCU (isto
será visto posteriormente neste curso).

C. Área de Desenvolvimento das Telas

 Área que contém telas do iFIX e documentos ActiveX.
 Sempre que um documento é aberto, o WorkSpace automaticamente ativa
as barras de ferramentas necessárias para modificá-la.
 Os documentos são editados em Configure Mode e executados em Run
Mode.

D. Barra de Menus
 A opção de menus variam de acordo com o tipo de documento ativo.

Copyright © 2002, Intellution, Inc. 4

 Apostila de Treinamento

2.1.. WorkSpace______________________________________________

Figura 2.-2: Workspace do iFIX (Configure Mode)

Copyright © 2002, Intellution, Inc. 5

 Fundamentos do iFIX

2.2. Telas ___________________________________________________

A. Introdução
 As telas do iFIX são documentos com extensão *.GRF (Graphics
Resource File).
 Suas propriedades podem ser alteradas na janela do Edit Picture,
acessada a partir do menu Edit  Picture (Figura 2.-3).

B. Objetos de uma Tela

 Os objetos de uma tela devem ter nomes exclusivos (não repetidos).
 Os nomes de objetos devem começar com letra e podem conter no máximo 40
caracteres, incluindo letras, números e sub-traços ( _ ).
 Cada objeto pode conter comandos (scripts) associados a ele.
 Os objetos podem ser animados de acordo com valores de variáveis ou
informações do hardware do processo através de um driver de comunicação.
 Para inserir um objeto na tela:
- Selecione o tipo do objeto no menu Insert ou na caixa de ferramentas
Toolbox e desenhe os cantos da figura na tela (siga as instruções da Figura
2.-4).

Figura 2.-3: Janela de Diálogo de Configuração da Tela

Copyright © 2002, Intellution, Inc. 6

 Apostila de Treinamento

2.2.. Telas ___________________________________________________

Tipo de Objeto Ferramenta Para criar...

Selecione o retângulo na Toolbox, clique uma vez o

Rectangle
local desejado da tela e arraste o mouse para formar o
objeto e solte então o mouse.
Rounded Selecione o retângulo com bordas arredondadas na
Rectangle Toolbox, clique uma vez sobre o local desejado da tela e
arraste o mouse para formar o objeto e solte então o
mouse.
Selecione o oval na Toolbox, clique uma vez sobre o
Oval
local desejado da tela e arraste o mouse para formar o
objeto e solte então o mouse.
Selecione a linha na Toolbox, clique uma vez sobre o
Line
local desejado da tela e arraste o mouse até obter o
tamanho desejado da linha e solte o mouse.
Selecione a poli linha na Toolbox, clique uma vez para
Polyline
formar cada ponto e clique duas vezes para terminar.
Selecione o polígono na Toolbox, clique uma vez para
Polygon
cada ponto e dê um duplo clique para terminar. Ele
fecha sozinho, sem necessidade de unir o início com o
final do objeto.
Selecione o arco na Toolbox, clique uma vez para cada
Arc
ponto e clique uma terceira vez para criar a curvatura do
arco.
Selecione o semi-círculo na Toolbox, clique uma vez
Chord
para cada ponto e clique uma terceira vez para criar a
curvatura do semicírculo.
Selecione o seguimento de círculo na Toolbox, clique
Pie
uma vez para cada canto do objeto. O primeiro e o
último ponto são conectados para formar o lado
curvado.

Figura 2.-4: Objetos Gráficos

Copyright © 2002, Intellution, Inc. 7

 Fundamentos do iFIX

2.2.. Telas ___________________________________________________

C. Configuração das Cores

 A caixa de cores é uma ferramenta para manipular as propriedades de cor
dos objetos.
 Contém as ferramentas necessárias para colorir objetos e criar conjuntos
personalizados de cores.
 A caixa de cores pode ser acessada a partir de qualquer parte da área de
trabalho (Figura 2.-5).
 Existem duas caixas de cores:
- Uma acessada a partir do botão direito do mouse ao selecionar um objeto.
Com esta caixa pode-se configurar as cores do objeto selecionado
- Outra acessada a partir de Color Selections do menu View. Esta caixa
permite a configuração de cores de diferentes objetos da tela
 Cores Personalizadas
- Pode-se personalizar até 16 milhões de opções de cores, combinando-se as
cores primárias vermelho, verde e azul, além de variar as propriedades de
saturação, matiz e luminosidade (Figura 2.-6).

D. Estilo de Preenchimento (Fill), Contorno (Edge) e Fundo (Background)

 As cores são modificadas a partir da janela de diálogo de seleção de cores.
 Uma vez selecionado o objeto, os estilos são alterados a partir do menu
Object.

Copyright © 2002, Intellution, Inc. 8

 Apostila de Treinamento

2.2.. Telas ___________________________________________________

Selecione aqui
cor de frente, de Selecione aqui o
fundo ou de conjunto de cores
contorno (default, shades
of gray, etc.)

Selecione aqui
para criar cores
personalizadas

Figura 2.-5: Janela de Diálogo de Seleção de Cores

Figura 2.-6: Janela de Diálogo de Cores Personalizadas

Copyright © 2002, Intellution, Inc. 9

 Fundamentos do iFIX

2.2.. Telas ___________________________________________________

E. Barra de Menu
 Gerenciamento de arquivos
- Open (abrir um arquivo), Close (fechar um arquivo), Save (salvar um
arquivo), Save As (salvar um arquivo com outro nome) e Save All (salvar
todos os arquivos abertos).
 Ferramentas padrões de impressão
- Print Setup (configuração da impressora configurada do sistema
operacional) e Print (imprimir arquivo ativo).
 Ferramentas padrões de edição do Windows
- Cut (recortar um ou vários objetos selecionados), Copy (copiar um ou
vários objetos selecionados), Paste (colar os objetos copiados ou
recortados) e Paste Especial (colar os objetos de forma especial).
- Delete (apagar um ou mais objetos selecionados), Duplicate (duplicar um
ou mais objetos selecionados) e Select All (selecionar todos os objetos da
tela ativa).

F. Ferramentas Adicionais da Barra de Menu

 Copy as Bitmap (copiar um ou mais objetos selecionados como um
objeto do tipo bitmap).
 Bring to Front (trazer o objeto selecionado para frente dos outros objetos
na tela), Send to Back (enviar o objeto selecionado para trás dos outros objetos
na tela).
 Align (alinhar os objetos selecionados), Flip (inverter o objeto), Space
Evenly (distribuir os objetos com o mesmo espaçamento na tela), Make Same
Size (tornar as dimensões dos objetos idênticas).
 Snap to Grid (alinhar conforme a grade) e Grid Settings (configurações
da grade).

G. Alterando Objetos Gráficos

 Uma vez adicionados à tela, a maioria dos objetos pode ser re-editado
utilizando os seguintes comandos: Reshape (redesenhar o objeto), Resize
(redimensionar o tamanho do objeto) e Rotate (rotacionar o objeto na tela).

Copyright © 2002, Intellution, Inc. 10

 Apostila de Treinamento

2.2.. Telas ___________________________________________________

Figura 2.-7: Exemplo de Tela

Copyright © 2002, Intellution, Inc. 11

 Fundamentos do iFIX

2.3. Processo Utilizado nos Exercícios___________________________

A. Descrição de um Processo de Fabricação de Cerveja

 Cozimento do Malte (Mash Mixer)
- O tanque Mash Mixer realiza a mistura de água com malte triturado. A
mistura é realizada à uma temperatura ótima para conversão total do
amido em açúcares simples
 Tina de Filtração (Lauter Tun)
- Onde o líquido vindo do Mash Mixer é misturado com água quente e
filtrado para a remoção de grãos. O líquido resultante, claro e adocicado, é
chamado de mosto e os grãos úmidos são aproveitados para ração animal.
 Cozimento do Mosto (Brew Kettle)
- O mosto é fervido por aproximadamente uma hora e nesta etapa é
adicionado lúpulo durante os últimos 15 minutos da operação.
 Filtração (Whirlpool Filter)
- O mosto fervido com o lúpulo é enviado para um filtro onde o lúpulo e
outros sólidos são removidos.
 Fermentação (Fermentation Tank)
- Levedura é adicionada ao mosto e permanece no tanque de fermentação de
5 a 20 dias, com temperatura entre 5C e 10C. A levedura consome o
açúcar, produzindo álcool e dióxido de carbono. Durante este processo, o
mosto é transformado em cerveja.
 Maturação (Aging Tank)
- A cerveja é gradualmente maturada em tanques de armazenagem por 2 a
24 semanas. As proteínas são retiradas da cerveja, ou seja, são “digeridas”
através de ação enzimática. O resíduo da reação que ocorre durante a
fermentação é extraído e retornado para a caldeira durante o
engarrafamento.

Copyright © 2002, Intellution, Inc. 12

 Apostila de Treinamento

2.3.. Processo Utilizado nos Exercícios___________________________

Figura 2.-8: Fluxograma de um Processo de Fabricação de Cerveja

Copyright © 2002, Intellution, Inc. 13

 Fundamentos do iFIX

2.4. ______________________________________________Exercício 2.

Conceitos Básicos do WorkSpace

Exercício 2.

Copyright © 2002, Intellution, Inc. 14

 Apostila de Treinamento

___________________________________________________Exercício 2.

Objetivos

Após a realização deste exercício, o aluno estará apto para:

1. Criar uma nova tela no WorkSpace.

2. Adicionar objetos básicos à tela.

Introdução

A finalidade deste exercício é apresentar o WorkSpace da Intellution. O WorkSpace é o

aplicativo que pode ser usado para acessar todos os outros aplicativos do iFIX. Este exercício
irá ajudá-lo a se familiarizar com o Workspace, abordando os métodos básicos para a criação
de uma tela.

Informações sobre o exercício

Ao longo do curso, iremos criar uma aplicação para monitoração e controle da fabricação de
cerveja. O primeiro passo do processo é adicionar malte à um misturador (Mash Mixer). O
malte é misturado com água para dissolver os grãos sólidos e aquecido lentamente. Este
processo transforma os grãos em açúcares através de ação enzimática. O líquido permanece
no misturador por uma ou duas horas.

Copyright © 2002, Intellution, Inc. 15

 Fundamentos do iFIX

___________________________________________________Exercício 2.

Neste exercício, iremos monitorar o misturador. O misturador possui uma alimentação de

água, outra de malte e uma saída da mistura. Isto será mostrado através de um tanque com
duas tubulações de entradas e uma tubulação de saída. Ao final deste exercício, sua tela
deverá se parecer com figura abaixo. Use esta figura como um guia para a disposição dos
objetos em sua tela.

Quando terminar este exercício, vá para a seção seguinte e responda as questões de revisão.

Copyright © 2002, Intellution, Inc. 16

 Apostila de Treinamento

___________________________________________________Exercício 2.

A. Crie uma nova tela.

Crie uma nova tela e inicie o desenvolvimento gráfico.
1. A partir do menu File, selecione New –Picture.
Uma nova tela sem nome aparecerá.
2. A partir do menu Insert, selecione Text.
O cursor muda para o formato de uma barra I.
3. Selecione com o cursor no topo da tela e digite o seguinte texto:
Mash Mixer
4. Selecione qualquer área em branco da tela.
O cursor retorna para a seta padrão.
5. Selecione o título que você acabou de criar.
Um guia aparece ao redor do objeto indicando que ele é o objeto ativo.
6. A partir do menu Object, selecione Font.
A janela de diálogo de configuração de fonte aparece:

7. Configure as seguintes opções com os valores listados a direta:

Font: Arial
Font Style: Bold
Size: 16
8. Selecione OK quando terminar.

Copyright © 2002, Intellution, Inc. 17

 Fundamentos do iFIX

___________________________________________________Exercício 2.

B. Crie o Misturador.
Use um retângulo e um semicírculo para criar o tanque.
1. A partir do menu Insert, selecione Rectangle.
O cursor muda para o formato de uma cruz.
2. Desenhe um retângulo baixo e achatado.
3. A partir do menu Insert, selecione Chord.
O cursor muda para o formato de uma cruz.
4. Desenhe um semicírculo no topo do retângulo.
A tela deve-se parecer agora com:

5. Selecione o retângulo e o semicírculo ao mesmo tempo.

Os objetos são limitados por guias.
6. A partir do menu Object, selecione Color – Foreground.
A janela de diálogo de cores aparece.
7. Selecione um cinza claro (Gray75) e selecione OK.

Copyright © 2002, Intellution, Inc. 18

 Apostila de Treinamento

___________________________________________________Exercício 2.

C. Adicione Tubulações à tela.

Utilize retângulos para adicionar tubulações ao misturador.
1. A partir do menu Insert, selecione Rectangle.
O cursor muda para o formato de uma cruz.
2. Desenhe um retângulo fino e comprido para representar uma tubulação alimentando o
misturador.
3. A partir do menu Format, selecione Send to Back.
4. Adicione duas tubulações adicionais à tela.
A tela deve-se parecer agora com:

5. Usando a janela de diálogo de cores, altere a cor das tubulações para cinza escuro
(Gray50).

Copyright © 2002, Intellution, Inc. 19

 Fundamentos do iFIX

___________________________________________________Exercício 2.

D. Adicione válvulas à tela.

Use polígonos para adicionar válvulas ao misturador.
1. A partir do menu Insert, selecione Polygon.
O cursor muda para o formato de uma cruz.
2. Usando a figura ao lado como referência, crie um
polígono para representar uma válvula.
3. Crie duas válvulas adicionais usando a mesma técnica.
4. A partir do menu Insert, selecione Text.
5. Adicione os objetos de texto mostrados ns figura abaixo.
A tela deve-se parecer agora com:

Copyright © 2002, Intellution, Inc. 20

 Apostila de Treinamento

___________________________________________________Exercício 2.

E. Adicione um agitador ao tanque.

Use um polígono para adicionar um agitador ao tanque.
1. A partir do menu Insert, selecione Polygon.
O cursor muda para o formato de uma cruz.
2. Desenhe uma “pá de agitador” como mostrado na
figura ao lado.
3. Use a janela de diálogo para alterar a cor do
misturados para cinza escuro (Gray50).
4. A partir do menu Insert, selecione Line.
O cursor muda para o formato de uma cruz.
5. Desenhe uma linha para unir a pá do agitador ao topo do tanque.
A tela deve-se parecer agora com:

Copyright © 2002, Intellution, Inc. 21

 Fundamentos do iFIX

___________________________________________________Exercício 2.

F. Salve a tela.

1. A partir do menu File, selecione Save.

A seguinte janela de diálogo aparece:

2. Digite o seguinte nome no campo File Name:

MashMixer
Na barra de título da tela aparece agora o nome do novo arquivo.

Fim do Exercício

Copyright © 2002, Intellution, Inc. 22

 Apostila de Treinamento

2.5. Questões de Revisão______________________________________

1. Para que serve a árvore do sistema (System Tree) no Workspace?

2. Como se criam cores personalizadas?

3. Para que serve a grade (Grid) no WorkSpace?

4. Que opções de estilo de fundo (Background Style) existem para um objeto?

5. Descreva como o Exercício 2 se encaixa na aplicação de Fabricação de Cerveja.

Copyright © 2002, Intellution, Inc. 23

 Fundamentos do iFIX

2.5.. Questões de Revisão______________________________________

página em branco

Copyright © 2002, Intellution, Inc. 24