cs415 human computer...

September 26, 2016 Sam Siewert

CS415Human Computer Interaction

Lecture 5 – HCI Design Methods(GUI Builders Part-2)

GUI Layout/Code-Gen Tools and VHLLs for GUI Building

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

Python VHLL GUI ExamplePython 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

Sam Siewert 3

Python - VHLL

Use the IDLE Editor, CLI, or PyCharm

Yes, this is a Reference to Monty Python

I used with a ASIC ARM SoC Design Group to Create an Interface for our ILA

Sam Siewert 4

PythonCLI

PRClab

PythonIDLE“IDE”

http://www.blu-ray.com/Eric-Idle/68832/

1/6th Monty Python Comedy Grouphttps://en.wikipedia.org/wiki/Monty_Python

Python PyCharm IDEFile.py is a TEXT file– Use any Editor– For IDE, use IDLE or

PyCharm

File.pyc is byte-code compiled Python

CLI, IDLE and PyCharm are installed in “Standard Image” on Campus for 2.x and 3.x

PyCharm GUI Overview

Sam Siewert 5

For 2.x code, use File-Settings-Project-Interpreterand modify (note that we may not have 2.x packages)

3.x

Java Calculator ExampleJava OOP– Main program container class– CalculatorGui class– Public and Private classes and methods

Sam Siewert 6

Java Calculator Walkthrough and Demo

Import of Java Swing GUI Widget setInstantiation of Calculator GUIMain window configuration and realization

Sam Siewert 7

import javax.swing.*; import java.awt.*;import java.awt.event.*;

public class SwingCalculator {

public static void main(String[] args) {CalculatorGui cg = new CalculatorGui();

cg.setSize(250,400);cg.setResizable(false);cg.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);cg.setVisible(true);

}}

Main widget construction

Main widgetconfiguration

Main widgetrealization

Deeper Dive

Sam Siewert 8

import javax.swing.*; import java.awt.*;import java.awt.event.*;

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 constructorpublic 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 handlerClasses for specificActive widgets – 0-9Digits and ArithmeticOperators

Connecting Buttons to Event HandlersInstantiate Handler Classes for Button TypesAdd Action Listener Using SwingImplement Handler Class and Detect Source

Sam Siewert 9

…// layout with specific dimension for each buttonone.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 listenerOperations op = new Operations();ArgumentEnter arg = new ArgumentEnter();

// Add a listener to each button to invoke a handler for arguments enteredone.addActionListener(arg); two.addActionListener(arg);

…nine.addActionListener(arg); zero.addActionListener(arg);

// Add a different listener to each button to invoke a handleradd.addActionListener(op); sub.addActionListener(op);div.addActionListener(op); mul.addActionListener(op); equals.addActionListener(op);

…

GUI LayersGUI 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 10

Prototypes and Mock-upsEarly 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 11

Assignment #3Ex #3 – Designing and Prototyping Interactive WIMP Applications1. Critique of Windows Calculator in Standard,

Basic View2. 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 Design4. Prototype Event Handler Implementation –

Handle Errors Please!5. Portability Demonstration for Extra Credit

Sam Siewert 12

Recall Interactive Design Methods

SE300(State Machines and Activity

Diagrams)

Sam Siewert

13

Next … For Event-Driven and General Behavioral Specification

Activity Diagrams– Concurrency– Objects with Active Threads

(Tasks)

State-Machines– Deterministic Response– Model for a Task (Thread)– Task Awaits and Activating

Event and Transitions to a New Statet

Sam Siewert 14

Recall activity diagrams(express concurrency)

Recall state machines(express states and transitions)

Activity Diagram Example

Sam Siewert 15

Copyright {c} 2014 by the McGraw-Hill Companies, Inc. All rights Reserved.

13-16

State Behavior Modeling

• State dependent behavior is common in software systems.

off

on

on off

engine

reverse

park

neutral

fwd

transmission

released

brake

up down

brake

What is the state dependent behavior of a car?


13-17

Conventional State Transition Matrix


13-18

transformational processes, representingcomputations or information processingactivities

control processes, representing system’s state dependent behavior, which is modeled by aMealy type state machine

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

continuous data flow, which must be processedin real time

Real Time Systems Design


13-19


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 dataflow b is required to begin executing process P

+

These logical connector can be applied to both data flow andcontrol flow and transformation process and control process.


13-20


Z

Z

X

Y

Y

X Z

Z

Two subsets of Z are used by two different successor processes.

All of Z is used by two different successor processes.

Z is composed of Two subsets provided by two different predecessor processes.

All of Z is provided by either one of two predecessor processes.


13-21

Cruise Control Example

CruiseControl

2.2.1

RecordRotation

Rate2.2.2

Increase Speed 2.2.3

MaintainConstant

Speed2.2.4

Return toPrevious

Speed2.2.5

resumebrake

enable/disable

start/stop increase speed

rotation ratetrigger

speed reached

enable/ disable

throttle control

rotation rate

throttleposition

rotation rate set point

rotation rate

throttleposition

throttle control throttle

position

enable/ disable

rotation rate

enable/ disable

throttle control

Sam Siewert 22

Maintain Speed

Increase Speed

Resume Speed

Interrupted

enable[] / trigger RRR; enable MCS

brake[] / disable MCS

stop increasing speed[] / disable IS; trigger RRR; enable MCS

brake[] / disable RPSresume[] / enable RPS

start increase speed[] / disable MCS; enable IS

brake[] / disable IS

speed reached[] / disable RPS; enable MCS

disable[] / disable MCS

Cruise Control State Machine


13-23

State Transition Table

Event stubs list the events.

A single-line separates specialization substates

A double-line separates component substates

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.

State stubs show the states.

Component substate

Specialization substate

TBDS9TBDSA

TBDTBDNAS9S8

S6 [C] / a1; a2TBDTBDS7

TBDTBDTBDS6 (init)

S3

TBDTBDTBDS5

TBDTBDTBDS4 (init)S

2

S1

E3E2E1State & Substate

Table entry: initially all are “TBD.” Eventually, each should be “NA,” or a transition entry.


13-24

Cruise Control State Transition Table


13-25

Conventional State Transition Matrix

Clarifications on State MachinesObject State Modeling –Event-Driven

Collecting and Classifying State Behavior

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)

State Transition TablesUML Notationevent[guard] / act1; act2Cruise Control

Sam Siewert 26

http://en.wikipedia.org/wiki/Specification_and_Description_Language

SDL FYI – Not on Exam(s)

http://en.wikipedia.org/wiki/UML_state_machine

Clarifications on Activity DiagramsActivity Models – Concurrency, Fork, Join for Tasks

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/DFDUML Activity Diagram NotationActivity Table - Analysis Sam Siewert 27

http://www.holub.com/goodies/uml/

cs415 human computer...

Documents