Ch UW Departments Web Server by sanmelody

VIEWS: 4 PAGES: 45

									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 …                        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

                                                        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)
                            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!

                                                        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   K. Sung, P. Shirley, S. Baer




              GUI API Example: MFC
                 Front end: Resource Editor
                       Integrated in Visual Studio IDE




                                                        Chapter 2
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   K. Sung, P. Shirley, S. Baer




              MFC/VS: Implementation Files




                                                        Chapter 2
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
                       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
                                                        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
                             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



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




              Tutorial: 2.1 … .rc file




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




              Tutorial 2.2:
                 Application State:
                       An integer (count)
                 Events:
                       React to click on Add button
                       React to click on Quit button




                                                        Chapter 2
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   K. Sung, P. Shirley, S. Baer




              Tutorial 2.2: backend
                 The CTutorialDlg class




                                                        Chapter 2
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   K. Sung, P. Shirley, S. Baer




              Tutorial 2.3: Slider Bar




                                                        Chapter 2
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   K. Sung, P. Shirley, S. Baer




              Tutorial 2.8: front end




                                                        Chapter 2
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 GUI-
                        elements




                                                        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

								
To top