Transcript Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P.

Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Chapter 2: GUI API
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
GUI API


Software Library
Support Event Driven Programming



Front end – for users and
Back end – for us programmers
Via GUI Elements
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
GUI Application – Front end

Building the front end: GUI Element Layout
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
GUI Element

Elements for interacting with users


E.g., A Window: for containing buttons
and mouse
E.g., Buttons for user to click-on
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
GUI Elements: User Perspective

Virtual IO devices


For users to express their wishes (to our
applications)
Relate to past experiences

Visually pleasing: icons that looks like a real
button


3D looking, shows depressed (or change color)
Semantically meaningful: A button that behaves
like a real button:

clicked and something will happen
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
GUI Application – Back end

“responding” to the front-end GUI Elements
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
GUI Elements: Programmer perspective

Unique ID:


To identify the element (in programming code)
Behavior:


Default: e.g., check-box shows a check-mark
Customizable:


e.g., check-box disappears after checked
Semantic State Information:



E.g., check box: checked (true) or not checked (false)
E.g., slider bar: has a current value
We must worry about how to access this
information
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
GUI Elements: Programmer perspective …

Abstraction representation:

our program interacts with data type


E.g., CButton, CSliderBar
Event Service Registration

How to register for events and services


continue
E.g., when clicked on checked box, call this function
Control Variables:

Variables in our program representing the frontend GUI elements
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Relation to previous lecture:

Previously: Event driven programming


Application State (persistent variables)
Design Workflow (events)


With Workflows



User intuitive actions to change the application state
Design event service routines (to update the application
state)
Register event services
Complete solution!


But … how to implement this solution?
GUI API!
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
GUI API: must support …


Front end design: GUI builder
Backend:



Control variables
Mechanism for linking GUI element to
control variables
Event Service Registrations


Call back functions
Inheritance override
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
GUI API Example: MFC

Front end: Resource Editor

Integrated in Visual Studio IDE
Chapter 2
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
MFC: Back end GUI Elements
GUI Element Type
Control Variable data type
Application Window
CWnd/CDialog
Text label (Static text) CWnd/CString
Button
CButton/BOOL
Check box
CButton/BOOL
Slider bar
CSliderBar/Int
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
MFC/VS: Implementation Files
Chapter 2
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
MFC/VS: files


TutorialApp: This is the application
TutorialDlg: The main dialog window


.rc: For GUI Builder (Resource editor)





This is a GUI element! (One instance of this object
defined in TutorialApp)
Text file, can open with text editor
.vcproj, .sln: VS IDE files
.sui, .ncb: VS IDE scratch files
.ico and rc2: icons for the app
DEBUIG/Release: build results
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.1:


CTutorialApp: is the application
dlg – the application window

A instance of CTutorialDlg defined in



Is the control variable for our application window
CTutorialDlg::OnInitDialog()

SystemInitialization() – for



Creating application state
Registration of event handlers
CTutorialDlg::OnPaint()


CTutorialApp::InitInstance()
When redraw is necessary
BEGIN_MESAGE_MAP

For overriding event services
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
Tutorial: 2.1 … .rc file
Chapter 2
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
Tutorial 2.2:

Application State:


An integer (count)
Events:


React to click on Add button
React to click on Quit button
Chapter 2
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.2: Implementation
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
Tutorial 2.2: backend

The CTutorialDlg class
Chapter 2
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.2: CTutorialDlg.cpp

System initialization

Control Variable/GUI element assocation

DDX_Text links



GUI element (IDC_ECHO_AREA)
control variable (m_EchoText)
Button event registration:
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.2: button event service

UpdateData()



Ture: stream GUI element state to control variable
False: push control variable value to GUI element
In this case:

push m_EchoText to IDD_ECHO_AREA
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
Tutorial 2.3: Slider Bar
Chapter 2
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.3: warning …

MFC Resource editor slider bar workflow


DO NOT double click on the slider bar icon
to activate event service!
Do enable: OnHScroll() and OnVScroll()
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.3: CTutorialDlg class



A1: Control variables for echo
B1: Control variables for slider bars
C1: Slider bar service routines
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.3: CTutorialDlg
implementation (1)


System Initialization
Control variables/GUI element association
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.3: CTutorialDlg
implementation (2)


Slider Event Function Registration
Slider event service routine (H-Scroll)
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.4: Timer and Mouse


Timer: alarm clock for ourselves
Mouse:

Buttons: Left/Middle/Right




Down event
Up event
Move
NO explicit front end GUI elements!
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.4: implementation (1)




A1: to count timer
B1: mouse and timer echo
C1: Timer/alarm service routine
D1: Mouse service routines
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.4: implementation (2)

System Initialization

Control variable/GUI element association

Event service registrations
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.4: implementation (3)

Event Service routines
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.5: Input/Output GUI Elements



Sliders: control by application if checked
Check Box: uncheck by application
when sliders reach the end’
New implementation support (from 2.4)
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.5: Implementation(1)

System initialization (addition to 2.4):

Control variables/GUI element association:

Check box event service registration:
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.5: Implementation(2)

Event service routines:
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.5: events

Single threaded application!

Timer event: once every second



When timer fires, our application will be servicing the
timer
User _cannot_ trigger event during timer service!
Check box:


Front end: a check box/mark
Back end: bool (no need for special service)
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.6: Slider with Echo

MFC Slider bar shortcomings:



No text echo
Integer only support
Our class: CSliderCtrlWithEcho


Default behavior: always text echo
Support floating point
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Slider with Echo


Subclass from MFC: CSliderBar class
To use this class:
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.6: using slider with echo
void CTutorialDlg::OnTimer(UINT nIDEvent)
{
m_Seconds++;
if (m_TimerCtrlSliders)
{
// Get ready to decrease the sliders ...
float hvalue = m_HSliderBar.GetSliderValue();
if (hvalue > 0)
m_HSliderBar.SetSliderValue(hvalue-1);
float vvalue = m_VSliderBar.GetSliderValue();
if (vvalue > 0)
m_VSliderBar.SetSliderValue(vvalue-1);
...
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Notes on: Slider with Echo

No need special update



Updates the text field by default
Poll/Set only when needed
Floating point:

100K unique values defined between
min/max
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.7: Software Library


Compile into a .lib file
IDE





Search path must be set
Include file location (in stdafx.h)
Dependency
Compile vs. Link
Debug vs. Release
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.8: Sub window

Window as container of GUI-elements
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
Tutorial 2.8: front end
Chapter 2
K. Sung, P. Shirley, S. Baer
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.8: backend

ReplaceDialogControl()


Place a CDialog onto a “placeholder”
Sub window

As a logical container for related GUIelements
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.8: GUI data type …
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Tutorial 2.8: using the data type

A RadiusControl GUI in main window


Implementation: an instance of
CCircleRadiusControls in CTutorialDlg
CCircleRadiusControls



our own GUI data type
No icon representation
Will not show unless we force it!
Chapter 2
Essentials of Interactive Computer Graphics: Concepts and Implementation
K. Sung, P. Shirley, S. Baer
Showing CircleRadiusControls

Placing the CCircleRadiusControls into
our application window:

At application initialization …
Chapter 2