slides computação e programação memec+lean · 14/12/2015 1 d.e.m. – Área científica de...

14/12/2015

1

D.E.M. – Área Científica de Controlo Automação e Informática Industrial

Computação e ProgramaçãoMEMec, LEAN - 1º Semestre 2015-2016

Aula Teórica 25

• Interfaces Gráficas do Utilizador (GUIs)• Programação event-driven• GUIs no MATLAB

• Componentes e handles

• Estrutura do código no m-file

• Controlos e funções de callback

• Exemplo: Simple GUI

Alinhamento da AT 25

• Interfaces Gráficas do Utilizador (GUIs)

• Programação event-driven

• GUIs no MATLAB• Componentes e handles




Computação e Programação 2015 / 2016 2

14/12/2015

2

• Tipo de interface com o utilizador que permite ainteração com dispositivos digitais através deelementos gráficos, como ícones e outros indicadoresvisuais

• A interação é feita geralmente através de um rato,um teclado, ou um ecrã tactil, com os quais outilizador é capaz de selecionar símbolos e de osmanipular de forma a obter algum resultado prático.

Interface Gráfica do Utilizador (GUI)


Exemplos de interfaces gráficas

• GNOME (Ubuntu ver. 9.04)

• iOS 5.0

• Android 4.0

• Windows 7


14/12/2015

3

Exemplos de interfaces de linha de comando

• MS-DOS (Windows XP)• GNOME Terminal 3

• Mac OS X Terminal


• No sistema WIMP (Windows, Icons, Menus andPointing device) os componentes que constituemuma GUI típica incluem:

• Sistema de janelas,

• Ícones e elementos gráficos,

• Menus/grupos de funções,

• Dispositivo de ponteiro (e.g.: o rato)

Elementos da GUI


14/12/2015

4

• “Effective interfaces are visually apparent andforgiving, instilling in their users a sense of control.Users quickly see the breadth of their options, grasphow to achieve their goals, and do their work.”

• “Efficient interfaces do not concern the user withthe inner workings of the system.”

• “Effective applications and services perform amaximum of work, while requiring a minimum ofinformation from users.”

Qualidade de uma GUI

http://www.asktog.com/basics/firstPrinciples.html










14/12/2015

5

• Os eventos incluem acções do utilizador, acções devidas aoutros elementos de código, ou acções externas (geradas pelo

SO, como por exemplo a criação de um ficheiro ou a ligação de hardware

periférico)

• O controlo do programa não depende de um fluxo deexecução programado no código, mas sim da sequência deelementos de código (callbacks) disparada por reacção aoseventos

• O controlo do fluxo de execução do programa constitui aprincipal diferença entre a programação dirigida poreventos e a programação de execução sequencial.

Programação event-driven


• Programa de execução sequencial



14/12/2015

6


• Programa dirigido por eventos

As funções que respondem aos eventos

chamam-se funções de callback










14/12/2015

7

• Uma GUI no MATLAB é uma aplicação gráfica com uma oumais janelas que contém componentes e controlos (controlossão também componentes, mas disparam elementos decódigo por reacção a eventos), e que permitem a interacçãoentre o utilizador e o programa.

• As GUIs no MATLAB permitem:

• realizar operações de computação,

• ler / escrever para ficheiros,

• comunicar com outras GUIs,

• apresentar dados em tabelas e gráficos.

GUIs no MATLAB


Estrutura de uma GUI no MATLAB

Figure: simple_gui.fig M-file: simple_gui.m+


14/12/2015

8

• O funcionamento da generalidade das GUIs no MATLABbaseia-se na reacção a acções ou eventos (event-driven)

• A GUI está normalmente num dado estado, que apenas éalterado quando o utilizador, ou outros elementos de código,desencadeiam uma determinada acção ou evento

• Os controlos da GUI têm associados elementos de códigodenominados por callbacks. Uma callback contém o códigoque o MATLAB executa como reacção ao eventodesencadeado

Execução da GUI no MATLAB


• Os eventos do utilizador que desencadeiam callbacks

no MATLAB incluem por exemplo:

• carregar em botões da GUI

• carregar num botão do rato

• seleccionar um elemento do menu

• escrever uma cadeia de caracteres ou valor numérico

• passar com o rato em cima de uma componente

Execução da GUI no MATLAB


14/12/2015

9

Processo de Desenvolvimento

Fase I

Fase III

Fase II










14/12/2015

10

• As componentes das GUIs incluem, entre outros:

• figures,• menus, • toolbars, • push buttons, • radio buttons, • list boxes, • static text• sliders• axes• etc

Componentes e controlos da GUI


• Disponível na pasta do MATLAB, subdirectoria "..\help\techdoc\creating_guis\examples"

• Abrir pela linha de comandos utilizando: guide

controlsuite

Exemplo: GUI controlsuite


14/12/2015

11

Conceitos básicos

• Uma handle é uma variável através da qual se podemodificar, ou aceder às propriedades (estado) docomponente que lhe está associado


Conceitos básicos

• Todos os componentes de uma GUI, incluindo a figura,possuem a sua própria handle

• As handles de todos os componentes da GUI são guardadasnos campos de uma estrutura chamada handles, criadaautomaticamente pelo GUIDE

handles =

figure1: 162.0011

listbox: 5.0017

slider: 4.0020

pushbutton: 163.0011

output: 162.0011


14/12/2015

12

Conceitos básicos

Descrição: As funções get e set permitem conhecer emodificar o valor das propriedades de um componente atravésda sua handle

Sintaxe: valor = get(handle, propriedade)

set(handle, propriedade, valor)

% Exemplos escritos dentro de uma função de callback

num_real = get(handles.slider, 'Value');

set(handles.listbox, 'BackgroundColor', [1 1 0]);


Conceitos básicos

• A estrutura handles, é um dos três argumentos deentrada que o GUIDE gera automaticamente em todas asfunções de callback

• Isso implica que todos os componentes, e respectivaspropriedades, estão acessíveis dentro de todas as funçõesde callback

• Quaisquer dados, ou estruturas de dados, que devam estaracessíveis durante a execução da GUI, devem seradicionados como novos campos da estrutura handles


14/12/2015

13









Estrutura padrão da m-file de uma GUI


14/12/2015

14

• Comments



• Initialization



14/12/2015

15

• Opening Function



• Output Function



14/12/2015

16

• Component and figure callbacks (sample)











14/12/2015

17

• figures,• menus,• toolbars, • push buttons,• radio buttons, • list boxes, • static text• sliders• axes• etc

• Controlos são componentes que geram eventos em resposta a uma acção do utilizador. Estão normalmente associados a uma função de callback que executa a acção pretendida.

Componentes e controlos da GUI


Cabeçalho de uma função de callback

Declaração da função de callback para a componente (pushbutton1) que disparou a

chamada. O nome é gerado pelo GUIDE a partir do

identificador (Tag) do componente.

Argumentos de entrada. A sequência indicada é fixa e gerada

pelo GUIDE.


14/12/2015

18

• OBJECT HANDLE (hObject): handle do própriocomponente que disparou a função de callback (tambémdisponível na estrutura handles)

• EVENT DATA (eventdata): variável reservada parafuturos desenvolvimentos

• HANDLES STRUCTURE (handles): estrutura que agrupanos seus campos as handles de todas as componentesexistentes na GUI, bem como todos os dados adicionais daaplicação

Argumentos de uma função de callback




14/12/2015

19

• Push Button

• Toggle Button

.











14/12/2015

20

Simple GUI


Simple GUI


14/12/2015

21

Simple GUI


Simple GUI


14/12/2015

22

Simple GUI


Simple GUI


14/12/2015

23

Simple GUI


Simple GUI


14/12/2015

24

Simple GUI

Editor de opções do popup


Simple GUI


14/12/2015

25

As aulas teóricas contêm contribuições dos profs. José Borges e Miguel Silva


Referências

• Secção 14.3 de Matlab: A Practical Introduction to

Programming and Problem Solving, Stormy Attaway (2012) Elsevier.

• Wikipédia:• http://en.wikipedia.org/wiki/Graphical_user_interface

• http://pt.wikipedia.org/wiki/Interface_gráfica_do_utilizador

• Mathworks:

• “Creating Graphical User Interfaces” (buildgui.pdf)http://www.mathworks.com/access/helpdesk/help/pdf_doc/matlab/buildgui.pdf

• Capítulo 13 de Essential MATLAB for Engineers and Scientists

3rd Edition, Brian Hahn e Dan Valentine (2007) Elsevier.

• http://www.mathworks.com/demos/matlab/creating-a-graphical-user-interface-matlab-video-tutorial.html?product=ML

• http://www.mathworks.com/products/demos/shipping/matlab/uitabledemo.html?product=ML

• http://www.mathworks.com/products/demos/shipping/matlab/WhatsNewR2007b_GraphicsAndGUIBuilding.html?product=ML

• http://www.mathworks.com/products/demos/shipping/matlab/WhatsNewR2008a_GraphicsAndGUIBuilding.html?product=ML

• http://www.mathworks.com/products/demos/shipping/matlab/WhatsNew_6GUIs_viewlet_swf.html?product=ML

Demos da Mathworks


slides computação e programação memec+lean · 14/12/2015 1 d.e.m. – Área científica de...

Documents