Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Chapter 2: GUI API

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 GUI API Software Library Support Event Driven Programming Front end – for users and Back end – for us programmers Via GUI Elements

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 GUI Application – Front end Building the front end: GUI Element Layout

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 GUI Element Elements for interacting with users E.g., A Window: for containing buttons and mouse E.g., Buttons for user to click-on

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 GUI Application – Back end “responding” to the front-end GUI Elements

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 GUI Elements: Programmer perspective … continue Abstraction representation: our program interacts with data type E.g., CButton, CSliderBar Event Service Registration How to register for events and services E.g., when clicked on checked box, call this function Control Variables: Variables in our program representing the front- end GUI elements

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Relation to previous lecture: Previously: Event driven programming Application State (persistent variables) Design Workflow (events) User intuitive actions to change the application state With Workflows Design event service routines (to update the application state) Register event services Complete solution! But … how to implement this solution? GUI API!

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 GUI API Example: MFC Front end: Resource Editor Integrated in Visual Studio IDE

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 MFC: Back end GUI Elements GUI Element TypeControl Variable data type Application WindowCWnd/CDialog Text label (Static text)CWnd/CString ButtonCButton/BOOL Check boxCButton/BOOL Slider barCSliderBar/Int

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 MFC/VS: Implementation Files

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 MFC/VS: files TutorialApp: This is the application TutorialDlg: The main dialog window This is a GUI element! (One instance of this object defined in TutorialApp).rc: For GUI Builder (Resource editor) 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.1: CTutorialApp: is the application dlg – the application window A instance of CTutorialDlg defined in CTutorialApp::InitInstance() Is the control variable for our application window CTutorialDlg::OnInitDialog() SystemInitialization() – for Creating application state Registration of event handlers CTutorialDlg::OnPaint() When redraw is necessary BEGIN_MESAGE_MAP For overriding event services

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial: 2.1 ….rc file

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.2: Application State: An integer (count) Events: React to click on Add button React to click on Quit button

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.2: Implementation

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.2: backend The CTutorialDlg class

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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:

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.3: Slider Bar

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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()

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.3: CTutorialDlg class A1: Control variables for echo B1: Control variables for slider bars C1: Slider bar service routines

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.3: CTutorialDlg implementation (1) Control variables/GUI element association System Initialization

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.3: CTutorialDlg implementation (2) Slider event service routine (H-Scroll) Slider Event Function Registration

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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!

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.4: implementation (1) A1: to count timer B1: mouse and timer echo C1: Timer/alarm service routine D1: Mouse service routines

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.4: implementation (2) System Initialization Control variable/GUI element association Event service registrations

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.4: implementation (3) Event Service routines

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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)

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.5: Implementation(1) System initialization (addition to 2.4): Control variables/GUI element association: Check box event service registration:

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.5: Implementation(2) Event service routines:

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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)

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Slider with Echo Subclass from MFC: CSliderBar class To use this class:

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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);...

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.8: Sub window Window as container of GUI-elements

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.8: front end

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.8: backend ReplaceDialogControl() Place a CDialog onto a “placeholder” Sub window As a logical container for related GUI- elements

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Tutorial 2.8: GUI data type …

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 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!

Essentials of Interactive Computer Graphics: Concepts and Implementation K. Sung, P. Shirley, S. Baer Chapter 2 Showing CircleRadiusControls Placing the CCircleRadiusControls into our application window: At application initialization …