Graphical User Interface Programming Principles at UMBC Spring 2024

Basic GUI Design Principles Lecture 2 - Graphical User Interface Programming CMSC 437 University of Maryland, Baltimore County Spring 2024

Overview Common Terminology Interactivity Polling Event handling Animation Accessibility

Terminology Widgets or Controls Windows and Panels Buttons Check Buttons Radio Buttons Menus Pop-up menus Labels Input Types Combo Box Spinner Text Box

Interactivity Widgets can be interacted with by the user in various ways Clicked on Text selected Dragged Etc. The interactions supported depend on the widget type It doesn t make sense (in general) to allow changing the text on a button, so buttons usually do not support a text changed interaction

Polling Polling is where code is written to manually check on the state of objects and for user interactions Periodically functions are run to check where is the mouse or what keys have been pressed and to update the interface as needed Simple to understand, in concept

Polling void MainLoop() { if(button1.clicked()) { // code to handle button 1 click } else if(comboBox1.selectionChanged()) { // code to handle selection changed } if(cursor.moved()) { // code to update cursor position } // and so on DrawUpdatedGUI(); }

Polling Polling is very simple to understand, in concept Each frame of running time, check every object and update them accordingly Polling is very resource intensive and inefficient Every object in the GUI must be checked each frame even though it is extremely unlikely that all have been interacted with each frame Polling might make sense in small realtime applications, however in a modern desktop GUI system it rarely has a place Might make more sense in a game or something to that effect where the entire screen is refreshed at a constant rate

Event-based Programming Rather than polling, most modern GUI systems support an event-based programming model Widgets have events associated with the interactions that the user can perform on the widget Each event can generate a call to a pre-defined function to handle the event All of the examples we ve gone over in class (so far) have used event-based programming

Event-based Programming Takes the responsibility of dealing with low-level interactions out of the hand of the programmer and gives it to the GUI toolkit or OS being used Conceptually, polling versus event-based programming is much like the difference between procedural and object-oriented programming Much simpler to implement in practice than a polling-based model

Animation Animations are made up of individual still frames Changing still images on a screen at an appropriate rate will create the illusion of smooth animation from one point to the next The human eye can process approximately 12 images per second Moving objects near this speed (within a small multiplicative factor of ~2-5x) will create the illusion of smooth animation Moving objects too fast will cause the brain to see them as choppy Moving objects too slow will cause the brain to process them as individual still frames and ruin the illusion of animation

Animation In modern video games, for instance, the frame rate tends to be around 30 or 60 frames per second Traditionally, 25 and 50 FPS were common in some other parts of the world Live-action movies are often filmed at 24 frames per second even today Which makes conversion to run at 60 FPS on a normal TV an interesting process in itself (which is way outside of the scope of this class) Keeping a constant frame rate ensures that motion appears smooth and not choppy Largely, the choice of 30 or 60 FPS doesn t make a huge difference to most users No, you really cannot perceive the difference between two frames at 200Hz. Which isn t to say that higher animation rates don t make a difference just that you won t perceive the entire image at that rate

Animation There is a delicate balance between animation quality and the complexity of producing the animations in general This is especially true in a 2D game, for instance In a 3D environment, models can be updated mathematically to meet the animation speed required for the application at hand

Accessibility Modern GUI systems have many features to make computers more accessible to users that may have specific needs Screen readers High-contrast mode Magnification Braille displays

Accessibility Just because a GUI toolkit or OS supports accessibility options doesn t mean that your program gets support for these things automatically in many cases For instance, a screen reader can t easily describe images you display on the screen unless you provide captions for them Certain GUI design philosophies can make accessibility that much more difficult Such as designing GUIs to look like real-world objects Accessibility is something that should be baked into all of your GUIs that you design to ensure that all people can access your programs successfully