CS415 Human Computer Interaction Lecture 3 WIMP HCI (GUI Builders Part-2) September 7, 2018 Sam Siewert
Recall - GUI Layout & Code-Gen or VHLLs for GUI Build Method #1 Compiled Programming Language (e.g. C/C++) and Widget Libraries (e.g. X-windows Gnome, KDE, etc. or Windows) Advantages Compiled for Efficiency, Security, Proprietary IP Protection (Stripped Binaries) Disadvantages Less Interactive Development: Layout, Generate code, Compile, Test, Repeat Method #2 Interpreted Very High Level Language (e.g. Java, Python, C# (both with Common Language Infrastructure)) Advantages Interpreted for Quick Test as you Code (Agile), Rapid Prototyping, Portability Disadvantages Security Risks in Runtime (Java Virtual Machine, CLI) Sam Siewert 2
Installed on SE Workstation (use instructions) GUI Builder Run with qtcreator (/usr/bin/qtcreator) Qt Creator View tutorials on QtCreator QtCreator for C++ [Part-1, Part-2, Part-3, Part-4, Part-5, Part-6, Part-7, Part-8] Sam Siewert 3
Python VHLL GUI Example Python has Two Major Versions 2.x and 3.x Language re-design with 3.x for better OOP Older 2.x is Somewhat OOP and Still Popular Download Python Interpreter for Windows, Mac OS-X, Linux, etc. Bound to Tk from Ancient TCL/Tk Environment for Building GUIs for Test Automation and Verification (ASIC Simulation) and Graphics/Computer-Vision Nice Rapid Prototyping Environment Examples (GeeksforGeeks calculator, TechInfected, TeamPython) Python tutorials - Python using Tk [Part-1, Part-2] Sam Siewert 4
Python - VHLL Use the IDLE Editor, CLI, or PyCharm Yes, this is a Reference to Monty Python Python CLI PRClab I used with a ASIC ARM SoC Design Group to Create an Interface for our ILA Python IDLE IDE http://www.blu-ray.com/eric-idle/68832/ 1/6 th Monty Python Comedy Group https://en.wikipedia.org/wiki/monty_python Sam Siewert 5
Python PyCharm IDE File.py is a TEXT file Use any Editor For IDE, use IDLE or PyCharm File.pyc is byte-code compiled Python 3.x For 2.x code, use File-Settings-Project-Interpreter and modify (note that we may not have 2.x packages) CLI, IDLE and PyCharm are installed in Standard Image on Campus for 2.x and 3.x PyCharm GUI Overview Sam Siewert 6
Java OOP Java Calculator Example Main program container class CalculatorGui class Public and Private classes and methods Sam Siewert 7
Java Calculator Walkthrough and Demo Import of Java Swing GUI Widget set Instantiation of Calculator GUI Main window configuration and realization import javax.swing.*; import java.awt.*; import java.awt.event.*; Main widget construction public class SwingCalculator { public static void main(string[] args) { CalculatorGui cg = new CalculatorGui(); Main widget configuration } } cg.setsize(250,400); cg.setresizable(false); cg.setdefaultcloseoperation(jframe.exit_on_close); cg.setvisible(true); Main widget realization Sam Siewert 8
import javax.swing.*; import java.awt.*; import java.awt.event.*; Deeper Dive public class CalcTemplateGui extends JFrame { JFrame frame = new JFrame("My Simple Calculator"); JTextField answerfield; JButton add, sub, div, mul, equals; JButton one, two, three, four, five, six, seven, eight, nine, zero; JPanel contentpanel; String stemp1=""; // CalculatorGui default constructor - super long constructor public CalcTemplateGui() { super("my Simple Calculator"); } private class Operations implements ActionListener { public void actionperformed(actionevent event) { JButton src = (JButton) event.getsource(); } } private class ArgumentEnter implements ActionListener { public void actionperformed(actionevent event) { JButton src = (JButton) event.getsource(); Event handler Classes for specific Active widgets 0-9 Digits and Arithmetic Operators } } } Sam Siewert 9
Connecting Buttons to Event Handlers Instantiate Handler Classes for Button Types Add Action Listener Using Swing Implement Handler Class and Detect Source // layout with specific dimension for each button one.setpreferredsize(dim); two.setpreferredsize(dim); div.setpreferredsize(dim); mul.setpreferredsize(dim); equals.setpreferredsize(dim); // create a private class to handle events detected by an action listener Operations op = new Operations(); ArgumentEnter arg = new ArgumentEnter(); // Add a listener to each button to invoke a handler for arguments entered one.addactionlistener(arg); two.addactionlistener(arg); nine.addactionlistener(arg); zero.addactionlistener(arg); // Add a different listener to each button to invoke a handler add.addactionlistener(op); sub.addactionlistener(op); div.addactionlistener(op); mul.addactionlistener(op); equals.addactionlistener(op); Sam Siewert 10
GUI Layers GUI Application Build on API or CLI Simply Generates CLI Commands or API Calls Updates Displays with Return Codes or Screen Scraped Messaging Not Always the Best Idea (but Often Done) Sam Siewert 11
Prototypes and Mock-ups Early Feedback on Look and Feel Usability Engineering Time to Complete Common Tasks Success Rate for Test Tasks by Different Users Cognitive Load for Tasks using an HCI or GUI Focus Groups for Usability Sam Siewert 12
Assignment #2 Ex #2 Designing and Prototyping Interactive WIMP Applications 1. Critique of Windows Calculator in Standard, Basic View 2. Choose and OOP and IDE for Development and Test Method #1 GUI Code Generation QtCreator for C++ Visual Studio C# with WinForm Method #2 VHLL Interactive with Libraries Python with Tk Java with Swing 3. State Machine / State-Transition Table Design 4. Prototype Event Handler Implementation Handle Errors Please! 5. Portability Demonstration for Extra Credit Sam Siewert 13
Recall Interactive Design Methods SE300 (State Machines and Activity Diagrams) Sam Siewert 14
Event-Driven and Behavioral Specification Activity Diagrams Concurrency Objects with Active Threads (Tasks) Recall activity diagrams (express concurrency) State-Machines Deterministic Response Model for a Task (Thread) Task Awaits and Activating Event and Transitions to a New Statet Recall state machines (express states and transitions) Sam Siewert 15
Activity Diagram Example Sam Siewert 16
Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved. State Behavior Modeling State dependent behavior is common in software systems. off park fwd brake on off up down on reverse neutral released engine transmission brake What is the state dependent behavior of a car? 13-17
Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved. Conventional State Transition Matrix 13-18
Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved. Real Time Systems Design transformational processes, representing computations or information processing activities control processes, representing system s state dependent behavior, which is modeled by a Mealy type state machine continuous data flow, which must be processed in real time ordinary or discrete data flow event flow or control flow that triggers a transition of the state machine of a control process, or a command from a control process to a transformational process 13-19
Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved. Real Time Systems Design a b P indicates that both data flow a and data flow b are required to begin executing process P a + b P indicates that either data flow a or data flow b is required to begin executing process P These logical connector can be applied to both data flow and control flow and transformation process and control process. 13-20
Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved. Z Z X Y Real Time Systems Design Two subsets of Z are used by two different successor processes. All of Z is used by two different successor processes. X Y Z Z is composed of Two subsets provided by two different predecessor processes. Z All of Z is provided by either one of two predecessor processes. 13-21
Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved. Cruise Control Example enable/disable rotation rate throttle control start/stop increase speed Increase Speed 2.2.3 throttle position brake enable/ disable throttle control Cruise Control 2.2.1 resume trigger enable/ disable enable/ disable Maintain Constant Speed 2.2.4 rotation rate speed reached throttle position Record Rotation Rate 2.2.2 Return to Previous Speed 2.2.5 rotation rate set point rotation rate throttle control rotation rate throttle position 13-22
Cruise Control State Machine enable[] / trigger RRR; enable MCS disable[] / disable MCS Maintain Speed brake[] / disable MCS start increase speed[] / disable MCS; enable IS stop increasing speed[] / disable IS; trigger RRR; enable MCS Increase Speed brake[] / disable IS Interrupted resume[] / enable RPS brake[] / disable RPS speed reached[] / disable RPS; enable MCS Resume Speed Sam Siewert 23
Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved. State Transition Table State stubs show the states. Component substate State & Substate S 1 S 2 S 3 S4 (init) S5 S6 (init) E1 E2 E3 Event stubs list the events. A single-line separates specialization substates A double-line separates component substates Specialization substate S8 S7 S9 SA NA S9 S6 [C] / a1; a2 Transition entry, which means: if object is in S7 and E3 occurs and condition C is true, then actions a1 and a2 are executed and object enters S6. Table entry: initially all are. Eventually, each should be NA, or a transition entry. 13-24
Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved. Cruise Control State Transition Table 13-25
Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved. Conventional State Transition Matrix 13-26
Clarifications on State Machines Object State Modeling Event-Driven Collecting and Classifying State Behavior http://en.wikipedia.org/wiki/uml_state_machine Extensions to Domain Models [Class Diagram and OIM] to add Domain State Machine Model For Event-Driven Architectures or Architectures with Event- Driven Aspects and Subsystems, EFSMs are High-Level (Domain) http://en.wikipedia.org/wiki/specification_and_description_language SDL FYI Not on Exam(s) State Transition Tables UML Notation event[guard] / act1; act2 Cruise Control Sam Siewert 27
Clarifications on Activity Diagrams Activity Models Concurrency, Fork, Join for Tasks http://www.holub.com/goodies/uml/ Task Could Be Implemented as Linux Process, POSIX Thread, VxWorks Task, Unix/Windows Service, etc. Petri-Net Formalism, Can Be Simulated and Used for Cleanroom CFD/DFD UML Activity Diagram Notation Activity Table - Analysis Sam Siewert 28