Day Job Talk: Graphical User Interfaces

1
Day Job Talk Graphical User Interfaces
Allison Ryan Oct 2008
Berkeley
University of California
2
GUIs Why do we care?

• For demos
• Allow visitors to interact with our system
• Present real-time results in easy to understand
  format

3
GUIs Why do we care?

• For demos
• Allow visitors to interact with our system
• Present real-time results in easy to understand
  format
• For our own use
• Monitor onboard software
• Monitor airplane status
• Reconfigure experiments

4

• GUIs in our system
• How GUIs work

5
Our System. Where is the Allison GUI ?
900 MHz
Cloudcap OI
Piccolo GS
Payload GUI (software status)
Health GUI (aircraft status)
Microsoft Visual C Inherets from Cloudcap
ExampleApp
6
900 MHz Comms
900 MHz
900 MHz
Cloudcap OI
Piccolo GS
UAV
Piccolo AP
PC104
Publisher (CSL comms back end)
Piccolo Process
Payload Process
Payload GUI (software status)
Data Hub
Health GUI (aircraft status)
Microsoft Visual C Inherets from Cloudcap
ExampleApp
7
900 MHz Comms- Abstracted
Payload Channel
Piccolo Channel
UAV
Piccolo AP
PC104
Publisher (CSL comms back end)
Piccolo Process
Payload Process
Payload GUI (software status)
Data Hub
Health GUI (aircraft status)
Microsoft Visual C Inherets from Cloudcap
ExampleApp
8
900 MHz Comms without PC104
Payload Channel
Piccolo Channel
UAV
Piccolo AP
Health GUI (aircraft status)
Microsoft Visual C Inherets from Cloudcap
ExampleApp
9
Health GUI Are the UAVs crashing? (basic
infrastructure)
Goal Allow a non-expert user to monitor basic
status of all UAVs on single display
80
60
Track flight time
Altitude tracking
10
Payload GUI Did my process crash?(basic
infrastructure)
11
Part II How GUIs Work
Input handling/ Screen drawing functions
Communication functions
(provided)
Process User Input()
Form/Send Outgoing Packets()
Internal Data Storage
Process Incoming Packets()
Update Display()
12
Rules for GUI Programming

• Dont allow incorrect input from user
• Dont be confusing!
• Design for intended user
• Follow conventions
• Keep it simple

option 1
option 2
2.5
13
GUI Programming Tools MSVC, Borland C
These tools provide 1. Base classes for
inheretence 2. Graphical programming interface
GUI class - Timers - Operating system
interfaces - Windows
Button class Visible Type OnPaint() OnClick()
My GUI
MyButton
My Other Button
MyGUI
My Button OnClick() What I want to happen
14
Which GUI Programming Tool?

• MS Visual C
• This how the Cloudcap Example App comes
• Easy choice for anything that talks to Piccolo
• Some things are really hard that shouldnt be

HBRUSH CCommunicationsSDKDlgOnCtlColor(CDC
pDC, CWnd pWnd, UINT nCtlColor)
switch(nCtlColor) case CTLCOLOR_EDIT
for (int picc_int0 picc_int lt NUM_COLS
picc_int) if(pWnd-gtGetDlgCtrlID()
state_rep_fieldsproc_intpicc_int) return
PickColor(proc_int, picc_int, pDC)
return CDialogOnCtlColor(pDC, pWnd,
nCtlColor)

• Borland C
• Includes Socket objects
• Lots of GUI stuff is easier

15
Under the Hood the code you cant find and what
its doing
Screen Refreshing
OnPaint() (MSVC) For(each GUI object) Repaint
object according to its properties
Initialization
CWindow thegui new CWindow() CButton B1 new
CButton() etc
Where is the main() ??
16
Organization Finite State Machines
Useful tool for complex GUIs. Example Commander
GUI
Enable map click Enable priorities Disable
Num-UAVs Selector
Creating Visit Task
Disable map click Disable priorities Disable
Num-UAVs selector Enable new task dropdown
Enable map click Enable priorities Enable
Num-UAVs Selector
Creating Area Search Task
Not Creating Task
17
How to Make a GUI
GUI
Internal Data Storage
18
Special case Map-based GUIs
Insert bitmap from file
Define transformation between pixel coordinates
(u,v) and GPS based on bitmap metadata
Paint onto bitmap using included methods
Local2Map(x_uav,y_uav, lat_origin,
lon_origin,pt) pCanvas-gtPen-gtColor
clRed pCanvas-gtEllipse(pt.x,pt.y,pt2.x,pt2.y)
19
Special case Cloudcap Example App GUIs

• A Microsoft Visual C GUI application which
  includes
• - the Cloudcap libraries
• - an instance of the Cloudcap CommManager class
• - template functions for AutopilotStream and
  PayloadStream comms
• The parts we care about (provided)

OnInitDialog() OnTimer() LookForAutopilotData()
LookForPayloadData()
UpdateGUI()
20
Conclusions

• GUIs are important for demos and for experiments
  and should be developed just as carefully as
  controllers
• Some GUIs talk to Piccolo- these are easiest to
  do in Visual C
• Some GUIs should talk over 802.11b- these are
  easiest to do in Borland, or non-c (Python?
  Java?)
• Dont name GUIs after people because its
  confusing when they leave!