IAT 167 Lecture Notes - Lecture 13: Graphical User Interface, User Interface, Sliders

96 views5 pages

For unlimited access to Class Notes, a Class+ subscription is required.

Final Exam Review
Creation of GUI and Scrolling Background
Graphical User Interface (GUI)
User interface that allows user to interact with programs with graphical icons
and visual indicators (widgets)
Actions performed through manipulation of widgets
1. Window: a small screen within the computer screen
2. Menu: a list of alternative offered to user
3. Button: an icon that can be pressed
4. Label: display of descriptive caption
5. Text field/ area: text box for input and output
6. Slider/Knob/toggle: value manipulators
7. CheckBox/ Radio: a list of selectable items
Event-Driven Programing
program waits for events to occur and responds
Flow is determined by events (user actions, sensor inputs, timer ticks)
1. Event firing: objects/ interactions generate events
2. Event detection: listens check for events
3. Event handling: functions respond to events (e.g. callbacks)
ControlP5
GUI and controller library used in application and applet mode
Bundled with processing with default (version 2.2.5)
1. Install globally: import library ControlP5
2. Add locally: Sketch --> Add File --> library --> add controlP4.jar to 'code'
folder
Show all controllers on GUI: controlP5.show()
Hide all controllers on GUI: controlP5.hide()
Show an individual controller: controlP5.getController("name").show()
Hide an individual controller: controlP5.getController("name").hide()
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in
E.g. Create multiple controllers for object, color, array, & squares
import controlP5.*; //import library
ControlP5 controlP5; //declare varibale of ControlP5
color[] colors = new color[4]; //array of colors that can be changed by
controllers
void setup() {
controlP5 = new ControlP5 (this); //Constructor Signature: ControlP5
(PApplet p)
//Add Sliders: ("name", minimum, maximum)
controlP5.addSlider ("slider1", 0, 255, 128, 10, 10, 10, 100);
controlP5.addSlider ("slider2", 0, 255, 128, 70, 10, 100, 10);
//Add a Knob: ("name", minimum, maximum)
controlP5.addKnob ("knob1", 0, 360, 0, 70, 60, 50);
//Add a toggle that have two state: true or false
//"name", default value (boolean), x, y, width, height
controlP5.addToggle ("toggle1", false, 150, 80, 20, 20);
//set play button attributes
play = controlP5.addButton ("Replay", 0, width/2-60, height-200, 150, 50);
play.getCaptionLabel().setFont(pfont);
Unlock document

This preview shows pages 1-2 of the document.
Unlock all 5 pages and 3 million more documents.

Already have an account? Log in

Get access

Grade+
$10 USD/m
Billed $120 USD annually
Homework Help
Class Notes
Textbook Notes
40 Verified Answers
Study Guides
1 Booster Class
Class+
$8 USD/m
Billed $96 USD annually
Homework Help
Class Notes
Textbook Notes
30 Verified Answers
Study Guides
1 Booster Class