Apostila de Treinamento

.2 Introduo ao Desenvolvimento Grfico________________________

Captulo .2
Introduo ao Desenvolvimento Grfico

Copyright 2002, Intellution, Inc.

Fundamentos do iFIX

.2. Introduo ao Desenvolvimento Grfico_______________________

Objetivos do Captulo
Este captulo traz uma introduo sobre o desenvolvimento da interface grfica do iFIX. Sero
vistos os objetos grficos nativos do iFIX e como trabalhar com a rea de desenvolvimento grfico
do iFIX, o Intellution WorkSpace. O WorkSpace consiste de uma rea de projeto que contm textos,
animaes e ferramentas que permitem criar telas de fcil entendimento para o operador. Tambm
oferece comandos e modos de interao com a tela atravs de aes de operador como
reconhecimento de alarmes ou mudana de setpoints do processo.
O captulo est organizado nos seguintes tpicos:

Introduo ao WorkSpace da Intellution

Objetos grficos e suas propriedades

Construo de telas

Copyright 2002, Intellution, Inc.

Apostila de Treinamento

.2.1. WorkSpace______________________________________________

File
New
Open
Close
Save
Save As
Save All
Print
Exit
Edit
Undo
Cut
Copy
Copy as Bitmap
Paste
Paste Special
Delete
Duplicate
Select All
Find and Replace
Animations
Picture
WorkSpace
Switch to Run
System Tree
Status Bar
Visual Basic Editor
User Preferences
Toolbars
Full Screen

Object
Fill Style
Edge Style
Background Style

Format
Bring to Front
Send to Back
Group / Ungroup
Align
Flip
Space Evenly
Make Same Size
Snap to Grid
Grid Settings
Snap Objects to Grid

View
Zoom
Default View
Full View
Fit Picture to Window
Fit Window to Picture
Update Window Location
Refresh
Window
Color Selections
Cascade
Property Window
Tile Horizontal
Screen Regions
Tile Vertical
Close All
Insert
OLE Object
Help
Rectangle
WorkSpace Help
Rounded Rectangle
iFIX Picture Server Help
Oval
Line
Polyline
Polygon
Arc
Chord
Pie
Text
Chart
Bitmap
Datalink
Current Time
Current Date
Alarm Summary
Push Button

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

Copyright 2002, Intellution, Inc.

Fundamentos do iFIX

.2.1.. WorkSpace______________________________________________
A. WorkSpace

O aplicativo WorkSpace consiste da rea de desenvolvimento de uma

aplicao iFIX

Une os aplicatoivos da Intellution

Todas as configuraes do projeto so feitas no WorkSpace

Modos de trabalho do WorkSpace:

-

Modo de Configurao (Configure Mode)

Modo de Execuo (Run Mode)

Os componentes do WorkSpace so:

-

rvore do sistema (System Tree)

rea de desenvolvimento das telas

Barra de menu

Barras de ferramentas

B. rvore do Sistema

Mostra os arquivos associados ao projeto

Mostra os objetos associados a cada arquivo

Oferece acesso a algumas aplicaes

Pode ser redimensionada, movimentada ou simplesmente no mostrada

As guias so caminhos configurados no System Configuration Utility

-

isto ser visto mais tarde neste curso

C. rea de desenvolvimento das telas

Contm o documento ativo

-

um documento uma aplicao baseada em Windows envolta por um

browser

oferece um mtodo de acesso das funcionalidades das aplicaes a partir da

interface do browser

Os documentos so editados no modo de configurao

Os documentos so mostrados no modo de execuo

D. Barra de Menu

Copyright 2002, Intellution, Inc.

Apostila de Treinamento

Varia de acordo com o tipo de documento ativo

Copyright 2002, Intellution, Inc.

Fundamentos do iFIX

.2.1.. WorkSpace______________________________________________

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

Copyright 2002, Intellution, Inc.

Apostila de Treinamento

.2.2. Telas ___________________________________________________

A. Telas

File)

As telas do iFIX so documentos com extenso *.GRF (Graphics Resource

Suas propriedades podems er alteradas a partir de uma caixa de dilogo Edit

Picture que acessada selecionando Picture no menu Edit
-

veja a Figura .2-3

B. Objetos da Tela

Os objetos das telas devem possuir nomes exclusivos (no repetidos)

Os nomes dos objetos devem comear com uma letra e podem conter no mximo 40
caracteres, incluindo letras, nmeros e sub-traos (_)

Cada objeto pode conter cdigos de programa (scripts) associados a ele.

Os objetos podem ser animados de acordo com valores de variveis ou

informaes vindas do hardware do processo atravs de um driver de comunicao

Para inserir um objeto na tela:

-

Selecione o objeto a partir do menu Insert ou atravs da caixa de ferramenta

Tollbox e desenhe os cantos da figura (siga as instrues da Figura 2-4).

Figura .2-3: Caixa de Dilogo para Configurao da Tela

Copyright 2002, Intellution, Inc.

Fundamentos do iFIX

.2.2.. Telas ___________________________________________________

Tipo de Objeto

Ferramenta

Para criar...

Rectangle

Clique uma vez e arraste.

Solte o mouse quando estiver com o tamanho desejado.

Rounded
Rectangle

Clique uma vez e arraste.

Solte o mouse quando estiver com o tamanho desejado.

Oval

Clique uma vez e arraste.

Solte o mouse quando estiver com o tamanho desejado.

Line

Clique uma vez e arraste.

Pare no tamanho desejado e solte o mouse.

Polyline

Clique uma vez para cada ponto.

D um duplo clique para terminar.

Polygon

Clique uma vez para cada ponto e d um duplo clique

para terminar. Ele fecha sozinho, sem necessidade de
unir o incio com o final do objeto.

Arc

Clique uma vez para cada ponto e clique uma terceira

vez para criar a curvatura do arco.

Chord

Clique uma vez para cada ponto e clique uma terceira

vez para criar a curvatura do semicrculo.

Pie

Clique uma vez para cada canto do objeto. O primeiro e

o ltimo ponto so conectados para formar o lado
curvado.
Figura .2-4: Objetos Grficos

Copyright 2002, Intellution, Inc.

Apostila de Treinamento

.2.2.. Telas ___________________________________________________

C. Configurao das Cores

A caixa de cores uma ferramenta para manipular as propriedades de cor dos

objetos.

Contm as ferramentas necessrias 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.

Veja a Figura .2-5.

Existem duas caixas de cores:

Uma acessada a partir do boto 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 configurao de cores de diferentes

objetos da tela

Cores Personalizadas
-

Pode-se personalizar at 16 milhes de opes de cores, combinando-se as

cores primrias vermelho, verde e azul, alm de variar as propriedades de
saturao, matiz e luminosidade.

Veja a Figura .2-6.

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

As cores so modificadas a partir da caixa de dilogo de seleo de cores

Uma vez selecionado o objeto, os estilos so alterados a partir do menu

Object

Copyright 2002, Intellution, Inc.

Fundamentos do iFIX

.2.2.. Telas ___________________________________________________

Selecione aqui
cor de frente, de
fundo ou de
contorno

Selecione aqui o
conjunto de cores
(default, shades
of gray, etc.)

Selecione aqui
para criar cores
personalizadas

Figura .2-5: Caixa de Dilogo de Seleo de Cores

Figura .2-6: Caixa de Dilogo de Cores Personalizadas

Copyright 2002, Intellution, Inc.

10

Apostila de Treinamento

.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 padres de impresso

Print Setup (configurao da impressora configurada do sistema operacional)

e Print (imprimir arquivo ativo).
Ferramentas padres de edio do Windows

Cut (recortar um ou vrios objetos selecionados), Copy (copiar um ou vrios

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 trs dos outros objetos na tela).

Align (alinhar os objetos selecionados), Flip (inverter o objeto), Space

Evenly (distribuir os objetos com o mesmo espaamento na tela), Make Same Size
(tornar as dimenses dos objetos idnticas).

Snap to Grid (alinhar conforme a grade) e Grid Settings (configuraes da

grade).
G. Alterando Objetos Grficos

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.

11

Fundamentos do iFIX

.2.2.. Telas ___________________________________________________

Figura .2-7: Exemplo de Tela

Copyright 2002, Intellution, Inc.

12

Apostila de Treinamento

.2.3. Processo Utilizado nos Exerccios___________________________

A. Descrio de um Processo de Fabricao 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 converso total do amido
em acares simples
Tina de Filtrao (Lauter Tun)

Onde o lquido vindo do Mash Mixer misturado com gua quente e filtrado
para a remoo de gros. O lquido resultante, claro e adocicado, chamado
de mosto e os gros midos so aproveitados para rao animal.
Cozimento do Mosto (Brew Kettle)

O mosto fervido por aproximadamente uma hora e nesta etapa adicionado

lpulo durante os ltimos 15 minutos da operao.
Filtrao (Whirlpool Filter)

O mosto fervido com o lpulo enviado para um filtro onde o lpulo e outros
slidos so removidos.
Fermentao (Fermentation Tank)

Levedura adicionada ao mosto e permanece no tanque de fermentao de 5

a 20 dias, com temperatura entre 5C e 10C. A levedura consome o acar,
produzindo lcool e dixido de carbono. Durante este processo, o mosto
transformado em cerveja.
Maturao (Aging Tank)

A cerveja gradualmente maturada em tanques de armazenagem por 2 a 24

semanas. As protenas so retiradas da cerveja, ou seja, so digeridas
atravs de ao enzimtica. O resduo da reao que ocorre durante a
fermentao extrado e retornado para a caldeira durante o engarrafamento.

Copyright 2002, Intellution, Inc.

13

Fundamentos do iFIX

.2.3.. Processo Utilizado nos Exerccios___________________________

Figura .2-8: Fluxograma de um Processo de Fabricao de Cerveja

Copyright 2002, Intellution, Inc.

14

Apostila de Treinamento

.2.4. ______________________________________________Exerccio .2

Conceitos Bsicos do WorkSpace

Exerccio .2

Copyright 2002, Intellution, Inc.

15

Fundamentos do iFIX

___________________________________________________Exerccio .2
Objetivos:
Aps a realizao deste exerccio, o aluno estar apto para:
1. Criar uma nova tela no WorkSpace.
2. Adicionar objetos bsicos tela.
Introduo:
A finalidade deste exerccio apresentar o WorkSpace da Intellution. O WorkSpace o
aplicativo que pode ser usado para acessar todos os outros aplicativos do iFIX. Este exerccio
ir ajud-lo a se familiarizar com o Workspace, abordando os mtodos bsicos para a criao de
uma tela.
Informaes sobre o exerccio:
Ao longo do curso, iremos criar uma aplicao para monitorao e controle da fabricao de
cerveja. O primeiro passo do processo adicionar malte um misturador (Mash Mixer). O
malte misturado com gua para dissolver os gros slidos e aquecido lentamente. Este
processo transforma os gros em acares atravs de ao enzimtica. O lquido permanece no
misturador por uma ou duas horas.

Copyright 2002, Intellution, Inc.

16

Apostila de Treinamento

___________________________________________________Exerccio .2

Neste exerccio, iremos monitorar o misturador. O misturador possui uma alimentao de gua,
outra de malte e uma sada da mistura. Isto ser mostrado atravs de um tanque com duas
tubulaes de entradas e uma tubulao de sada. Ao final deste exerccio, sua tela dever se
parecer com figura abaixo. Use esta figura como um guia para a disposio dos objetos em sua
tela.

Quando terminar este exerccio, v para a seo seguinte e responda as questes de reviso.

Copyright 2002, Intellution, Inc.

17

Fundamentos do iFIX

___________________________________________________Exerccio .2
A. Crie uma nova tela.
Crie uma nova tela e inicie o desenvolvimento grfico.
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 padro.
5. Selecione o ttulo 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 caixa de dilogo de configurao de fonte aparece:

7. Configure as seguintes opes com os valores listados a direta:

Font:
Font Style:
Font Size:

Arial
Bold
16

8. Selecione OK quando terminar.

Copyright 2002, Intellution, Inc.

18

Apostila de Treinamento

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

5. Selecione o retngulo e o semicrculo ao mesmo tempo.

Os objetos so limitados por guias.
6. A partir do menu Object, selecione Color Foreground.
A caixa de dilogo de cores aparece.
7. Selecione um cinza claro (Gray75) e selecione OK.

Copyright 2002, Intellution, Inc.

19

Fundamentos do iFIX

___________________________________________________Exerccio .2
C. Adicione Tubulaes tela.
Utilize retngulos para adicionar tubulaes ao misturador.
1. A partir do menu Insert, selecione Rectangle.
O cursor muda para o formato de uma cruz.
2. Desenhe um retngulo fino e comprido para representar uma tubulao alimentando o
misturador.
3. A partir do menu Format, selecione Send to Back.
4. Adicione duas tubulaes adicionais tela.
A tela deve-se parecer agora com:

5. Usando a caixa de dilogo de cores, altere a cor das tubulaes para cinza escuro
(Gray50).

Copyright 2002, Intellution, Inc.

20

Apostila de Treinamento

___________________________________________________Exerccio .2
D. Adicione vlvulas tela.
Use polgonos para adicionar vlvulas ao misturador.
1. A partir do menu Insert, selecione Polygon.
O cursor muda para o formato de uma cruz.
2. Usando a figura abaixo como referncia, crie um polgono para representar uma vlvula.
3. Crie duas vlvulas adicionais usando a mesma tcnica.
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.

21

Fundamentos do iFIX

___________________________________________________Exerccio .2
E. Adicione um agitador ao tanque.
Use um polgono 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 abaixo.
3. Use a caixa de dilogo 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.

22

Apostila de Treinamento

___________________________________________________Exerccio .2
F. Salve a tela.
1. A partir do menu File, selecione Save.
A seguinte caixa de dilogo aparece:

2. Digite o seguinte nome no campo File Name:

MashMixer
Na barra de ttulo da tela aparece agora o nome do novo arquivo.

Fim do Exerccio

Copyright 2002, Intellution, Inc.

23

Fundamentos do iFIX

.2.5. Questes de Reviso______________________________________

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 opes de estilo de fundo (Background Style) existem para um objeto na tela?

5. Descreva como o Exerccio 2 se encaixa na aplicao de Fabricao de Cerveja.

Copyright 2002, Intellution, Inc.

24

Apostila de Treinamento

.2.6. Questes de Reviso_____________________________________

pgina em branco

Copyright 2002, Intellution, Inc.

25