<- previous index next ->
We will cover information on User Interface
The user interface includes visual and sound output.
There may be physical output when using a game controller.
The user interface includes keyboard, mouse, touch, multi-touch
and game controller input. Voice recognition may be available.
The desired output responce time from the time of an input
varies widely with application.
As various applications are covered, the differences in
Style, conventions and standards will be presented.
Application of User Interface
1) desktop, labtop, tablet computers
both application and web interface
Windows, Mac OSX, Unix, Linux differences
(Some demonstrations)
Notice how the user interfaces have changed with time.
Many Mac conventions have been adopted by Windows
and some Linux distributions.
Touch screens are becoming available and the
user interfaces are changing, some adopting
user interface similar to smart phones.
2) game consoles
WII, Playstation 3, XBox 360 (Playstation 4, Xbox One)
game controllers (some samples shown)
3) cell phones
touch methods, size, speed, resolution
One finger moving in place of scroll bar.
Two finger roatation in place of mouse motion for rotation.
Take into account "fat fingering" in addition to obvious
finger size and resolution.
4) Automotive, aircraft "glass cockpit"
replacing traditional instruments with a display
I am doing contract software in this area.
My part was the primary flight display that gets input
from the inertial measurement unit and Global Positioning
System, GPS. (Sample demo later when we cover motion)
5) RPV, remotely piloted vehicle
flying over Afghanistan from Colorado
This requires the aircraft "glass cockpit" plus
mapping and threat displays. Reaction time to
get aircraft information back to the displays
becomes a critical factor.
6) Internationalization
marketing around the world
Basically, do not put any text into graphics.
All text is pulled from a file or files so that translations
to other languages can be changed in the files rather
than changing many places in the application.
7) real 3D displays
cameras, games, TV, graphics
Real 3D is here both with and without glasses.
Processing and developing real 3D applications
is covered in several lectures.
This course will provide the student both
knowledge and a basic Graphical User Interface, GUI, program
that the student has written and can be expanded into
various applications the student wants to develop.
This is very broad and includes cell phone apps,
desktop, laptop, tablet applications, games for
either computer or game console, etc.
Building GUI programs is non-trivial yet rewarding.
The student needs to understand the operating system,
the windowing system and "tool kits."
There are many potential employment opportunities for
graduates with computer graphics skills. The film
industry and advertising industry have many types of
positions available. The gaming industry, with some
firms local to the Baltimore area, have various
positions available. Check out Firaxis, Breakaway,
Day 1 Studios, Big Huge Games and others.
Automotive and aircraft companies are using
GUI increasingly to add new capability and
replace old instrument displays.
Course motto: If it works, use it.
If not, find another way.
You will be dealing with windowing systems and graphical
libraries that are much larger and more complex than
operating systems. I guarantee they will have bugs.
Your grade depends of finding a way around any bugs.
Your program must work in spite of system/library bugs.
The basic prerequisite for this course is to be able to
write working code in some reasonable programming language.
You will probably be writing 1,000 to 10,000 lines of code
in this course. Do not panic. A lot of code is repetitive.
You are expected to know the software development cycle:
Edit <-----------+
Compile |
Run |
Curse ---+
As an acknowledged expert, Edsger Dijkstra, has stated:
"Top down design and programming is right every time
except the first time." For your rapid learning you
do not want to use the "waterfall model" or even
Barry Boehms "spiral model", but rather use
"rapid prototyping".
Do not worry about the details, for a while, yet look over
the organization and structure of the same GUI application
written for X Windows Motif, OpenGL, Java and Python.
Remember, putty is useless for graphics. Your desk top or
lap top should have Linux as dual boot in order to use
ssh -Y username@linux.gl.umbc.edu
You will need to make a choice of "platform" for doing
the programming for this course. My lectures will cover:
Microsoft Windows - Java, JavaScript (same code every where)
- Python, HTML5 etc (probably same code every where)
- OpenGL in C, C++ (same code for Linux and Mac OSX)
Linux, Unix - Java, JavaScript (same code every where)
- Python, HTML5 etc (probably same code every where)
- X Windows Motif (same code for Mac OSX)
- OpenGL in C, C++ (same code MS Windows and Mac OSX)
Mac OSX - Java, JavaScript (same code every where)
- Python, HTML5 etc (probably same code every where)
- X Windows Motif (same code for Linux, Unix)
- xcode, cocoa (Mac specific)
- OpenGL in C, C++ (same code for MS Windows and Linux)
etc - The adventurous student may use raw wx or Qt or Tk,
PyQt4, or other language and graphics tool kit.
Microsoft's C# and game software may be used.
HTML5 with JavaScript may be used.
3D graphics may be used.
Cell Phone - You may choose to do an app for your project
Game Console - You may choose to do a game for your project
On Microsoft Windows you need compilers and possibly
some graphics tool kit, or Java SDK, Python with graphics,
editor and browser using HTML5, either
Microsoft Visual Studio or Cygwin to do 3D.
On Linux, Unix you may need Motif (called Lesstif or OpenMotif) installed.
UMBC linux.gl.umbc.edu has all software installed. Java, Python,
editors and compilers and browsers for JavaScript and 3D.
The Firefox browser has HTML5 and JavaScript on all OS.
On Mac the underlying operating system is Unix. Thus you can
have Java, Python, compilers,
it is not already installed. You may also use the Mac IDE.
Java has two execution models. "Frame" makes standard applications
that run in a standard window on all platforms. "App" or applet is
much more restrictive and must run in a WEB browser or appletviewer.
Then you have a choice of using just AWT or additionally Swing
or Swing2 and optionally Java3D. Explore "java.sun.com".
"etc" becomes the students responsibility to set up the
environment and do the homework and project. Just running a
demo project is not acceptable. You must make significant
additions and changes.
HTML5, JavaScript, 3D and more are available in latest
web browsers. Be sure your system is up to date.
GUI Human factors: Make sure it is obvious to the user of your
application how to quit, exit, kill or stop.
Just a quick look at some sample code.
See which will run on your development system
w1.c basic X windows
w1.jpg - screen
w1gl.c - w1.c in OpenGL
w1gl.jpg - screen
W1frame.java - w1.c in Java
W1frame_java.png - screen
W1frame.jpg - screen
W1app.java - W1frame as an applet
hw1s.py - contributed Python2 wx Windows
w1tk.py - simple Python2 tk on GL
w1qt.py - simple Python2 pyqt on GL
w1wx.py - simple Python Windows wx
w1tk.py3 - simple Python3
shape_def.py3 source code
shape_def3d.py3 source code
shape_def3d_py3.out vertex,faces
w1.html - HTML5 using javascript
Many w1, w2, w3, w4 files with various languages
download file you want as filename on linux.gl.umbc.edu with
cp /afs/umbc.edu/users/s/q/squire/pub/download/filename
cp /afs/umbc.edu/users/s/q/squire/pub/www/filename .html files
app1qt4.py - contributed Python Qt
hw5qt4s.py - contributed Python qt clock
hw2wxs.py - contributed Python wx
3D HyprCube.java
run 3D HyprCube.html
http://www.cs.umbc.edu/~squire/myapplets/HyprCube.html
Note that:
w1.c, the basic X Windows GUI application can be compiled
and executed on all Unix based operating systems,
including MacOS X
w1gl.c, the OpenGL GUI application can be compiled
and executed on almost all operating systems
that provide windowing (All forms of Unix,
MacOS and Microsoft Windows, etc.)
W1frame.java, the Java GUI application can be compiled
and run on any system that has Java
J2SE 1.6, JDK 6 or later available.
W1app.java, the Java GUI application can be compiled
on any system that has Java J2SE 1.6 or
later available. Then run in almost any
WEB browser. But, the user may not have
Java applets enabled. There are also some
severe restrictions on applets. Also, JavaScript
and Flash may not work well for this course.
Other demonstrations of sample applications may include:
split_cube - visualization, color, movement, inside
f to slow, O to close, c no color, C color helps visualize, R/L click
Actually running split_cube6 x for demonstration
teapots - lighting, move light with arrow keys, beware background
planets - lighting and glowing sun
sky_fly - terrain
pilot - do your own flight simulator, y,z underground?
springgl - education, teach something for project
spring2gl - build on previous applications
alpha_fade - scene transitions using fading
earth - texture map pictures onto objects
gears4 - modeling and simulation
tenseg2gl - modeling user controls viewing
light_dat - skull.dat , more modeling
draw - default object oriented graphics (digital logic and circuit symbols added)
pairs2 - card game
hull_draw - modeling boat hull
mover - independent window control
fractal.c - create scenes (art vs composition)
fractalgl.c - create scenes (art vs composition)
Fractal.java - create scenes (art vs composition)
Now, you need to set up your system for GUI programming.
linux.gl.umbc.edu has everything for Linux X Windows,
OpenGL and java. You may have to download software or
set up links or change directory names on your Linux
or Unix system.
Microsoft Windows needs to have Microsoft Visual Studio
or Cygwin or possibly some free compilers. There are many
versions of Microsoft Visual Studio and thus they are
not covered in this course. The essential component is
"cl.exe" the C and C++ compiler that can be used from
a standard command prompt. If you use Visual Studio
be sure you turn off preference "precompiled header files".
Mac OSX, use either the Mac IDE or download the X environment.
More information is in getting started
That said, here are the Linux/Unix/Mac "Makefile" and the
Microsoft Windows "make.bat" files that compile and execute
the source code shown above.
Makefile1.linux
Makefile_mac_w1
make1.bat make1.bat.txt
In my personal directory, I have some Makefiles and
some make.bat files that includes all commands to make
most programs in that directory.
A start of my Makefile and make.bat is shown above.
An option to make.bat is to use nmake on Microsoft Windows.
(This is an optional exercise for the student.)
Or, use an IDE such as Visual Studio, Eclipse, etc. etc.
Now, a quick look forward to your project.
Start trying various OS, languages, and toolkits.
Do homework 1 fall
If you have been on WOW, World of Warcraft or angry birds or
other virtual worlds, you might note how they handle the human interface.
opensimulator.org is a
virtual environment builder that may be of interest.
This course in interested in the user interface. Both to
develop applications and to use applications.
Human factors, intuitiveness, speed of learning, levels of
expertise are of interest.
Add music or voice to make your interaction more interesting (uses flash):
words and music
copy any of my files that may interest you, on linux.gl.umbc.edu
cp /afs/umbc.edu/users/s/q/squire/pub/download/fileyouwant .
cp /afs/umbc.edu/users/s/q/squire/pub/www/w1.html .
Homework 1 is assigned hw1
A few sample programs in Python 3
w1tk.py3 source code
w2tk.py3 source code
w3tk.py3 source code
w4tk.py3 source code
w5tk.py3 source code
rubber_box.py3 source code
colorw.py3 source code
<- previous index next ->
Many web sites on Java GUI, AWT, Swing, etc.
Many web sites on Python wx, tk, qt, etc.