diff --git a/slides/l01/doodle.html b/slides/l01/doodle.html new file mode 100644 index 0000000000000000000000000000000000000000..f6897cd621f3f475706e17c1daa9afb168725947 --- /dev/null +++ b/slides/l01/doodle.html @@ -0,0 +1,309 @@ +--- +layout: presentation +title: Introduction to Doodle Assignment +description: Introduction to Doodle Assignment +class: middle, center, inverse +--- +# CSE 340 Lab 1: Doodle (Spring 2020) + +## Introduction to Doodle + +.title-slide-logo[ + +] +--- + +.left-column[ +## **Library** (and Inheritance Hierarchy) +<br> +<br> +<br> +<div class="mermaid"> + graph LR + Activity[Activity] + Activity -->|...| Doodler[Doodler] + Doodler --> Part1[Part1] + Part1 --> Part1Activity[Part1Activity] + Part1 --> Part2Activity[Part2Activity] + + classDef yellow font-size:19px,text-align:center + classDef green font-size:19px,text-align:center + + class Part1,Part1Activity,Part2Activity yellow + class Activity,Doodler green +</div> +] + +.right-column[ +## Android Classes we are using in Doodle and how they relate + +- Doodler (which you don't edit) *extends* [Activity](https://developer.android.com/reference/android/app/Activity) +- Part1 *extends* Doodler. It implements *helper methods* for Part1Activity and +Part2Activity. +- Part1Activity and Part2Activity both extend Part1 +] +--- +layout:none + +.title[Running Sample Code] +.body[ +When you accept the assignment on GitGrade, a repository containing the starter code is generated for you on CSE +GitLab. You **MUST** work within this assignment, as it will be turned in via GitGrade when it is due. + +Please clone and use the repository and commit and push your work regularly. +Not only will doing so protect your code, but it will also allow course staff +to look at your code and it will allow you to easily pull any changes we make +to the assignment source.You can find instructions on setting up and maintaining +a forked repository [here](https://help.github.com/en/articles/working-with-forks). +] +--- +## Cloning Doodle + +.left-column[ +You can find your unique repo by the notification email or by going to [GitLab](https://gitlab.cs.washington.edu) or via +the [GitGrade](https://gitgrade.cs.washington.edu) interface. +] + +.right-column[ + + +] + +--- +.title[Open project in Android Studio] +.body[ +- Run configurations should be automatically imported from Gradle +- If not, `build` should trigger an import +- Run with â–º +- Connect an android device by USB or create a new virtual device +- If by USB, debugging must be enabled on the device +] +--- +.title[Implementing `addImage`] +.body[ +```java +private ImageView addImage(FrameLayout doodleView, String imageName, Float x, Float y, int size); +``` + +### Params: +- `doodleView`: Canvas in which to render the image. +- `imageName`: Filename of image to draw in `res/drawable`. +] +-- +.body[ +- `x`: Horizontal distance from top-left corner of canvas to top-left of image. +- `y`: Veritcal distance from top-left corner of canvas to top-left of image. +- `size`: Width and height of rendered image, in pixels. +] + +--- +.title[Implementing `addImage`] +.body[ +### Returns: +- An `ImageView` which has been added to the canvas. +] + +--- +.title[Implementing `addImage`] +-- +.body[ +Break down into component steps, look up documentation, and implement + +1) Create `ImageView` +] +-- +.body[ +2) Add new view to canvas +] +-- +.body[ +3) Position and set view size +] +-- +.body[ +4) Set view contents +] +--- +.title[Implementing `addImage`] +.body[ +```java +private ImageView addImage(FrameLayout doodleView, String imageName, Float x, Float y, int size) { +// Create ImageView and add it to doodleView. +ImageView image = new ImageView(this); +// Add image to doodleView +// Set image size and position +// Set image contents using filename +return image; +} +``` +] +--- +.title[Implementing `addImage`] +.body[ +```java +private ImageView addImage(FrameLayout doodleView, String imageName, Float x, Float y, int size) { +// Create ImageView and add it to doodleView. +ImageView image = new ImageView(this); +// Add image to doodleView +doodleView.addView(image); + +// Set image size and position + +// Set image contents using filename +return image; +} +``` +] +--- +.title[Implementing `addImage`] +.body[ +```java +private ImageView addImage(FrameLayout doodleView, String imageName, Float x, Float y, int size) { +// Create ImageView and add it to doodleView. +ImageView image = new ImageView(this); +// Add image to doodleView +doodleView.addView(image); + +// Set image size +image.getLayoutParams().height = size; +image.getLayoutParams().width = size; + +// Set image position ? + +// Set image contents using filename +return image; +} +``` +] + +--- +.title[Breakout Room Discussion] +.body[ + +<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/d8jYLjVJq9Lp6MlCMl0XZ?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> + +] + +<!-- +.title[Implementing `addImage`] +.body[ +```java +private ImageView addImage(FrameLayout doodleView, String imageName, Float x, Float y, int size) { +// Create ImageView and add it to doodleView. +ImageView image = new ImageView(this); +doodleView.addView(image); + +image.getLayoutParams().height = size; +image.getLayoutParams().width = size; +image.setX(x); +image.setY(y); + +// Set image contents using filename +return image; +} +``` +] +--> + +--- +.title[Implementing `addImage`] +.body[ +```java +private ImageView addImage(FrameLayout doodleView, String imageName, Float x, Float y, int size) { +// Create ImageView and add it to doodleView. +ImageView image = new ImageView(this); +// Add image to doodleView +doodleView.addView(image); + +// Set image size +image.getLayoutParams().height = size; +image.getLayoutParams().width = size; + +// Set image position ? + +// Set image contents using filename +int resID = getResources().getIdentifier(imageName, "drawable", getPackage()); +image.setImageResource(resID); +return image; +} +``` +] + +--- +.title[Android Debugging Tips] +.body[ + +Resource: [https://developer.android.com/studio/debug](https://developer.android.com/studio/debug) + +] + +<!--- +## `ValueAnimator` + +- Keeps track of the animation's timing (how long its been running and current value of property) + +- Contains a `TimeInterpolator` that defines the type of interpolation for the value over time + +- Contains a `TypeEvaluator` that figures out how to calculate values for the property being animated + +```java +ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f); +animation.setDuration(1000); +// Starts the animation +animation.start(); +// TODO: need to listen for updates to get the returned value +``` +--> +<!-- +.title[How do we use pacing functions for this?] +.body[ + + +- Time normalized with respect to animation interval (0...1) +- Normalized time is transformed by pacing function (0…1) +- Paced value is then fed to curve function to get final value + +] --> +<!-- +.title[XML shown in class] +.body[ +```xml +<?xml version="1.0" encoding="utf-8"?> +<set xmlns:android="http://schemas.android.com/apk/res/android"> + <objectAnimator android:propertyName="x" android:valueTo="100" /> +</set> +``` +] +--> +<!-- +```java +package com.example.myapplication; +//imports... + +public class MainActivity extends AppCompatActivity { +@Override +protected void onCreate(Bundle savedInstanceState) { +super.onCreate(savedInstanceState); +ImageView view = new ImageView(this); +setContentView(view); + +Bitmap bitmap = Bitmap.createBitmap(100,100, Bitmap.Config.ARGB_8888); +view.setImageBitmap(bitmap); +Canvas c = new Canvas(bitmap); +Paint p = new Paint(); +c.drawCircle(10,10,5,p); + +ObjectAnimator anim = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f); +anim.setDuration(2000); +anim.start(); + +Animator anim2 = (Animator) AnimatorInflater.loadAnimator(this, +R.animator.sample); +anim2.setTarget(view); +anim2.setDuration(2000); +anim2.start(); +} +} +``` +--> \ No newline at end of file diff --git a/slides/l01/gitgrade.html b/slides/l01/gitgrade.html new file mode 100644 index 0000000000000000000000000000000000000000..a6c9f64a35133b1599bedcf121e5a557f53b2b55 --- /dev/null +++ b/slides/l01/gitgrade.html @@ -0,0 +1,48 @@ +--- +layout: presentation +title: Lab 1 GitGrade Slides +description: Introduction to GitGrade and accepting the first assignment +class: middle, center, inverse +--- + +# CSE 340 Lab 1: GitGrade (Spring 2020) + +## Introduction to course infastructure + + +--- +## What is GitGrade? + +GitGrade is the software we use to manage and grade programming assignments. + +## Why is it relevant to you? + +Because you will use GitGrade to `accept` the assignment, in order to generate a GitLab repository with starter code. + +You will also `turn-in` the assignment using GitGrade by registering a commit as your submission. + +--- +## What are we doing with it today? + +We're going to `accept` the first assignment (`as1-doodle`) and clone the generated repository. + +Start by navigating to +[https://gitgrade.cs.washington.edu/student/assignment/116](https://gitgrade.cs.washington.edu/student/assignment/116). +This link is available on the course website, on the `Doodle` assignment page. + +You will need to login with your CSE GitLab credentials. +--- +## Accepting the assignment + +Accept the assignment, and navigate to the generated GitLab repository of the name +`cse340-20wi-students/as1-doodle-NETID` + + + +--- +## Turning in the assignment +- Through GitGrade, link on the Doodle page on the course website (accept link + `/turnin`) +- Recommended to visit the turnin page ahead of time to read the **nuances and details** +- Late Day Policy: 3 late days, no partial usage. Applied whenever something is turned in late until you run out. +- If something is late, and you have no late days: `score -= (10% * unexcused days late)` \ No newline at end of file diff --git a/slides/l01/hello.html b/slides/l01/hello.html new file mode 100644 index 0000000000000000000000000000000000000000..46a2d2e3d1c0c31bf37ff6dc7127ebf1a703e268 --- /dev/null +++ b/slides/l01/hello.html @@ -0,0 +1,216 @@ +--- +layout: presentation +title: Lab 1 Slides +description: Lab project--Hello World-- +class: middle, center, inverse +--- + +# CSE 340 Lab 1 (Spring 2020) +## Week 1: Getting Started With Android Development + +.title-slide-logo[ + +] + +--- + +## Course Objectives +- Practical applications for learnings in lecture + + +- Understand design considerations when making mobile apps + + +- Design and implement basic Android applications + + +- Debugging in Java and for Android + +--- + +## Lab 1 Objectives + +- Introduce the building blocks of Android applications + + +<!-- - Obtain the course repository --> + + +- Explore an Android project folder + + +- Getting the first part of the Doodle started + + +- Show some basic Android debugging techniques + +--- +## Android Applications + +__Components__ + +- Activity +- Service +- Broadcast Receiver +- Content Providers + +__Intents__ + +- Launch components (and provide them with data) +- Not limited to components of the same app +- Meaning: your components can be started by intents from other applications + + +--- +## Activity +[`android.app.Activity`](https://developer.android.com/reference/android/app/Activity) + +- Represents a single interface + +- Example: Activities for Gmail App +- Inbox, Message Compose, Spam Folder, etc. + +- Activities can be started by other applications, if desired +- E.g., sharing a photo by email starts Gmail's Message Compose activity + +--- +## Activity + +.center[ + +] + +--- +## Service +[`android.app.Service`](https://developer.android.com/reference/android/app/Service) + + +- Entry point for background processes + + +- Example: Spotify's player activity uses a service to play music +- Could be done by activity alone + +- Use of a service allows music to continue when player activity is no longer in the foreground + +- Services may be killed and restarted as required by the OS +- A persistent service such as music playback may use a persistent notification to prevent this + +--- +## Broadcast Receivers +[`android.content.BroadcastReceiver`](https://developer.android.com/reference/android/content/BroadcastReceiver.html) + + +- Entry point for events outside of regular userflow + + +- Example: Alarms +- Application schedules callback with OS in 10 minutes + +- In the meantime, the application can be killed + +- 10 minutes later, the OS broadcasts the callback event to the app + +- App begins playing sound; vibrating + +--- +## Content Providers +[`android.content.ContentProvider`](https://developer.android.com/reference/android/content/ContentProvider) + + +- Persistent storage of data + + +- Supports multiple backends, depending on app permissions +- Local filesystem, web, SQLite DB, etc. + +- Can permit access to other applications +- Contacts can be read and written to by other apps, depending on permissions + +<!--- +## Obtaining the Course repository + +- After [accepting the assignment](https://courses.cs.washington.edu/courses/cse340/20sp/slides/l01/gitgrade.html#1), go to Gitlab + +- If you do not have SSH set up with Gitlab, just download the zip for now + +- Later: ['Set up an SSH key with +Gitlab'](https://gitlab.cs.washington.edu/help/ssh/README#generating-a-new-ssh-key-pair) + +- Once you have SSH set up, clone the repository -- will show after section --> + +--- +## Android Project Structure + +.center[ + +] + +--- + +## Android Project Structure + +`app/src/main/AndroidManifest.xml` + +- Describes application at a high level for both compilation and running +- Includes app package, components, permissions, and hardware features + + + +`app/src/main/java/com.example.myapp/MainActivity.java` + +- The main activity activated when application launches + + + +`app/build.gradle` + +- Android build tool configuration file +- Includes target and min SDK versions and dependencies + + +`app/src/main/res/layout/activity_main.xml` + +- Declares the views and layout of the main activity + +--- +## Android Project Structure + +`drawable-<density>/` + + - Images at various pixel densities to accommodate various display resolutions + - Keep filenames consistent between folders + + +`layout/` + + - Layout XML description files for application activities + + +`mipmap/` + + - Launcher icons for your application at various sizes and shapes + + +`values/` + + - A good place to store constants + - Density-independent pixel values (sizes) + - Color + - Good for string localization as well + - Storing strings here makes it much easier to add additional languages in the future! + +--- + + ## Resources + + - Vogella Tutorials - + - Android Animation - http://www.vogella.com/tutorials/AndroidAnimation/article.html + + - Android Developer + - View Animation - https://developer.android.com/guide/topics/graphics/view-animation.html + - Property Animation - https://developer.android.com/guide/topics/graphics/prop-animation.html + + - Relevant supplemental material is provided on the course website + - Listed in the schedule + - This week's supplemental material reviews Java, covers Android animation \ No newline at end of file diff --git a/slides/l01/img/accept-screencap.png b/slides/l01/img/accept-screencap.png new file mode 100644 index 0000000000000000000000000000000000000000..d4c9bd30025ebc9f8cde44d3caacb229b3934d7e Binary files /dev/null and b/slides/l01/img/accept-screencap.png differ diff --git a/slides/l01/img/activity_lifecycle.png b/slides/l01/img/activity_lifecycle.png new file mode 100644 index 0000000000000000000000000000000000000000..ab0921a717d184442c96c1b8863018d46920a67c Binary files /dev/null and b/slides/l01/img/activity_lifecycle.png differ diff --git a/slides/l01/img/android-logo.png b/slides/l01/img/android-logo.png new file mode 100755 index 0000000000000000000000000000000000000000..cebec75001ab25dc397065f193797d5ebd0cb38d Binary files /dev/null and b/slides/l01/img/android-logo.png differ diff --git a/slides/l01/img/android-versions-oct2018.png b/slides/l01/img/android-versions-oct2018.png new file mode 100644 index 0000000000000000000000000000000000000000..0317a23481dd904945e70c60790755ac28b2ae69 Binary files /dev/null and b/slides/l01/img/android-versions-oct2018.png differ diff --git a/slides/l01/img/android_project_structure.png b/slides/l01/img/android_project_structure.png new file mode 100644 index 0000000000000000000000000000000000000000..60efcf057b7240f6c29e09b5e09edcad52b64174 Binary files /dev/null and b/slides/l01/img/android_project_structure.png differ diff --git a/slides/l01/img/doodle-clone-1.png b/slides/l01/img/doodle-clone-1.png new file mode 100644 index 0000000000000000000000000000000000000000..ab06ba85fc07a7ff070816ce3d8cdae25163eac5 Binary files /dev/null and b/slides/l01/img/doodle-clone-1.png differ diff --git a/slides/l01/img/doodle-clone-2.png b/slides/l01/img/doodle-clone-2.png new file mode 100644 index 0000000000000000000000000000000000000000..1fc9275e26732ebb178c482500cfb16d21d1eac6 Binary files /dev/null and b/slides/l01/img/doodle-clone-2.png differ diff --git a/slides/l01/img/gitgrade_square.png b/slides/l01/img/gitgrade_square.png new file mode 100644 index 0000000000000000000000000000000000000000..300617b81c276855f685524efb55670492c4ac7a Binary files /dev/null and b/slides/l01/img/gitgrade_square.png differ diff --git a/slides/l01/img/instagram-example.png b/slides/l01/img/instagram-example.png new file mode 100755 index 0000000000000000000000000000000000000000..0094d142321dde64b7a627634d2e619e8cca0e1f Binary files /dev/null and b/slides/l01/img/instagram-example.png differ diff --git a/slides/l01/img/mvp-design-pattern.png b/slides/l01/img/mvp-design-pattern.png new file mode 100755 index 0000000000000000000000000000000000000000..9dd87a7f4c12553e619856dd300b307ae9e7b449 Binary files /dev/null and b/slides/l01/img/mvp-design-pattern.png differ diff --git a/slides/l01/img/pacing.png b/slides/l01/img/pacing.png new file mode 100644 index 0000000000000000000000000000000000000000..3997cf6fd6aeee192b83ddd549982c9fb8c857a2 Binary files /dev/null and b/slides/l01/img/pacing.png differ diff --git a/slides/l01/notes-sp19.txt b/slides/l01/notes-sp19.txt new file mode 100644 index 0000000000000000000000000000000000000000..978318b631574c4e5e832b3e276016df849eb000 --- /dev/null +++ b/slides/l01/notes-sp19.txt @@ -0,0 +1,146 @@ +Introduction - 2 minutes + - Welcome to CSE 340 + - Over the duration of this course, you will be applying your learnings from + lecture in a very practical way + - This means + - not only understanding what to consider when building mobile apps + - but also designing and implementing your own Android apps + - With that goal in mind, we will use our time in lab today to start exploring + Android app development + - I will introduce you to the building blocks of Android applications + - After obtaining the course repository + - we will explore the android project folder + - I will show some basic Android debugging techniques + + + + +Android Application Components - 7 minutes +- Applications are comprised of a variety of components. + - These components are activities, services, broadcast receivers, and content providers + +- Components are activated with objects called intents + - These intents provide the components with data. + - Intents are not limited to components of the same application, + so your components can actually be activated by intents from other applications. + - Personal example: for an internship I was kicking off a workflow + on an Amazon Echo where we would play a series of audio pieces, record them, + and then analyze them. For that, I defined the intent in the Android manifest, + and then supplied the intent over a command line with arguments like which audio + files to play, how long to record for, etc. + +- Activities represent single screens with a user interface + - Gmail has different activities for composing your message, looking at your inbox, + accessing your settings, etc. + - <Walk through example workflow> + - This diagram is a toolkit architecture. + +- Services are components that perform operations in the background that don't provide +a user interface. + - For example, Spotify's player activity is where you select what music to play, + but its player service is what actually places the music. This is why you can + navigate your phone freely when you use Spotify. + - In my project, the Intent kicked off a service that would fetch audio from the cloud, + play it, and calibrate it. There was no user interface because the device was an Amazon Echo. + - Of course, it's the OS's prerogative to impact the life of a service instance. + +- Broadcast Receivers are entry points for events outside of the regular user workflow. + - Registers system or application events using the publish-subscribe model. + - When an interesting event happens, a broadcast is sent. + - Individual apps can register to receive specific broadcasts. + - For example, an alarm app can register a callback with the OS for x time. Then, + when the time comes, the OS sends a broadcast to the alarm app to wake it up, and the + alarm starts ringing. + - Think of it as a messaging system between apps outside of the user workflow. + +- Content Providers are the interfaces for managing persistent data. + - For example you could have a Content Provider manage writing data to the local filesystem + or the cloud. + - You can manage other applications' interactions with your data. + - For example, the messenger app interacts with a content provider to look at your + contacts list on your phone if you give it permission. + + + + + +Obtaining the Course Repository - Give them 5 minutes to obtain and peruse +the repository + +- Make it private + + + + + +Ask two people if they noticed any files that stood out in particular +and why those files stood out - 3 minutes + + + + + + +Move through important files together - 5 minutes + +- The Android Manifest describes the application at a high level. + - Identifies the name of the application package + - Describes all the components of the app. + - Lists any permissions the application would need, as well + as any hardware or software the app depends on to compile and run + - For example, if the app needs permission to write to the disk, + that information would be here + - Notice that the Part1Activity activity is described here as accepting + intent for the Main action with category Launcher. This means that this + activity is the main activity that is activated when launching the app. + +- The MainActivity java file sets the behavior of the main acitivity of the +application. For us, the Main activity is Part1Activity.java + - Here in Doodler we see the OnCreate method, which is run whenever an Activity + is launched. + - Our OnCreate calls other methods, like addText, addLine, and addImage, that you + will implement. + +- The build.gradle file configures the build for the application + - Describes the minimum SDK versions and technical dependencies the project will depend on. + +- The resources folder contains additional files and static content that the code will use. + - Things like images, static data files, and even activity layouts and global + constants can be described here. + - One interesting thing about Android development is that depending on your needs + you can implement functionality either in your code files or in your resources folder. + +- The activity_main.xml file declares the views and the layout of the main activity. + - Layouts in Android are in XML. + - If you've ever done HTML development, this should + be familiar to you. + - Components in your view are structured like a tree, where each + component is described relative its parent. + - In Doodle, we see that right now our outermost container is ConstraintLayout, + and inside that is a FrameLayout whose height and width are set to match the parent. + +- The drawable folders contain the images for the application. + - The different folders are for accomodating various display resolutions. + +- The layout folder holds the XML files describing the layouts of the different +activities in the program. + - In our application, there's only the main activity's xml layout, but additional + layouts can go here as well. + +- The mipmap folders contain the launcher icons for the application for a variety +of screen sizes and shapes. + +- The values folder is a good place to store global static constant values + - e.g. strings + + +- Go over debugging - 5 minutes + - Breakpoints, the android studio debugger + - Logging + + +- 22 minutes - work on Doodle + - Working on Doodle addImage + +Discussion in general: + - Learning a toolkit is hard - need to explore \ No newline at end of file diff --git a/slides/l01/notes-wi20.txt b/slides/l01/notes-wi20.txt new file mode 100644 index 0000000000000000000000000000000000000000..22ebd968d757c5f51f95d5bd51ae5d5ea02304d4 --- /dev/null +++ b/slides/l01/notes-wi20.txt @@ -0,0 +1,45 @@ +TODO: + - update assignment accept link in gitgrade slides + - add assignment accept and turn-in links to assignment page + +Issues: + - not sure how doable the addImage without handholding the entire thing / showing them the code + + total structured time: 37min + total unstructured time: 23min + +Introduction - 10 minutes + - Welcome to CSE 340 + - Introduce ourselves! + - notes on how section works, teachers changing + + - Talk about nametags, hand out nametags + - Plug Java Refresher Lab 5.30 @ CSE1 403 + + - Over the duration of this course, you will be applying your learnings from + lecture in a very practical way + - This means + - not only understanding what to consider when building mobile apps + - but also designing and implementing Android apps + - With that goal in mind, we will use our time in lab today to start exploring + Android app development + - We'll accept the first assignment, Doodle + - Clone the repository to our local devices + - Explore the structure and pieces of an Android project + - Complete the first part of the assignment + +Android apps happen on phones, if you want to get a phone instead here are our recommendations +(Sophie, 7min) + +GitLab Intro (using the GitLab deck) - 10min + +Intro to Doodle + - open the assignment spec and walk through it quickly: 5min + - open the repo in Android Studio and talk through important files: 5min + - activities + - layouts + - talk through the addImage line: 5min + - let students work on Doodle for remaining time + + + diff --git a/slides/l02/animation.html b/slides/l02/animation.html new file mode 100644 index 0000000000000000000000000000000000000000..3141f5ddcce3009b19e38047aba60d1bfb885afb --- /dev/null +++ b/slides/l02/animation.html @@ -0,0 +1,157 @@ +--- +layout: presentation +title: Lab 2 Slides +description: Lab project--Doodle-- +--- + +# CSE 340 Lab 2 (Spring 2020) +## Week 2: Get Help with Doodle + +.title-slide-logo[ +  +] + +--- + +# Doodle Timeline + +- Doodle Due: Thursday, April 9 @ 10:00pm (**Today!**) + +- Lock: Saturday, April 11 @ 10:00pm (If you are using late days) + +- Peer Eval: Sunday, April 12 - Tuesday, April 14 @ 10:00pm + +- Reflection: Wednesday, April 15 @ 10:00pm + +--- + +# Lab 2 Objectives + +- Go through peer evaluation and reflection + + +- How to debug in Android + + +- Android Animation + +--- + +# Lab 2 After Implementation + +- Peer evaluation - fill the survey that we send out + +- The best ones will show off in class + + +- Part 3: Turn in reflection on Gradescope after peer evaluation + +--- +# Peer Evaluation +- Why? + - Chance to externalize your work + - Get user feedback (the user experience is after all the point of HCI) + +- What to expect + - Your grade won't be determined by peer evaluating alone + - You get credit for **doing** the peer evaluation + - Questions about spec requirements -- no room for interpretation + - Questions that prompt about subjective feedback + - Provide constructive feedback + - Anonymous to your peers (but not to the teaching staff) + +- Your feedback on the exercise! (be honest) + +--- + +# Peer Evaluation Practice + +- Download the apk file: https://tinyurl.com/wdgjkcu + +- Google form: https://tinyurl.com/DoodleTestEval (Please use your UW Net ID) + +--- + +# Peer Evaluation Instructions + +.right-column-staff[ +- You will be assigned to peer grade 3 assignments via email +- If you have an Android phone + - Click on the download link to install the app on your phone +- If you don't have a phone + - Download the APK files + - Open the APK file in Android Studio and run the app in the emulator +- Fill out the google form for each APK file +] + +.left-column-staff[ +<img src="./img/wizard.png" alt="screenshot of Android Studio Wizard" width="40%" height="50%"/> +] +--- + +# Android Debugging + +- Select a device to debug your app on +- Set breakpoints in your Java, Kotlin, and C/C++ code +- Examine variables and evaluate expressions at runtime + + +- How to use Debugger: https://developer.android.com/studio/debug#java +- Helpful tool (Logcat): https://developer.android.com/studio/debug/am-logcat#java + + +--- +# Animation on Android + +- _Property Animation_ - preferred method; more flexible + +- _View Animation_ - simple setup; the old way (but you have to deal with xml...) + +- _Drawable Animation_ - load `Drawable` resources and display them one frame after the other (it is like a gif) + + +--- +# Property Animation + +- Define an animate that changes on object's _property_ (a field in an object) over _a length of time_ + +## `ValueAnimator` + +- Keeps track of the animation's timing (how long its been running and current value of property) + +```java +ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f); +animation.setDuration(1000); +// Starts the animation +animation.start(); +// TODO: need to listen for updates to get the returned value +``` + +--- + +# `ObjectAnimator` (the one you need in this assignment) + +- Rather than listening for a value, we can simply directly animate a property on an object + +- **However**: the property that you are animating must have a setter function (in camel case) in the form of set<propertyName>() for this to work (_setDuration()_) + +```java +ObjectAnimator anim = ObjectAnimator.ofFloat(textView, "alpha", 0f, 1f); +anim.setDuration(1000); +anim.start(); +``` + +--- + +# Resources + +- Vogella Tutorials - http://www.vogella.com/tutorials/AndroidAnimation/article.html + +- Android Developer + - View Animation - https://developer.android.com/guide/topics/graphics/view-animation.html + - Property Animation - https://developer.android.com/guide/topics/graphics/prop-animation.html + +- Relevant supplemental material is provided on the course website + - Listed in the Doodle assignment + - Don't stress out :) this isn't required + diff --git a/slides/l02/animationPractice.zip b/slides/l02/animationPractice.zip new file mode 100644 index 0000000000000000000000000000000000000000..f61898caee6a923d2664759343babc271aa24ce7 Binary files /dev/null and b/slides/l02/animationPractice.zip differ diff --git a/slides/l02/img/activity_lifecycle.png b/slides/l02/img/activity_lifecycle.png new file mode 100755 index 0000000000000000000000000000000000000000..879f51f6e8fafe75d267984680ef63f85b118dc5 Binary files /dev/null and b/slides/l02/img/activity_lifecycle.png differ diff --git a/slides/l02/img/android-logo.png b/slides/l02/img/android-logo.png new file mode 100755 index 0000000000000000000000000000000000000000..cebec75001ab25dc397065f193797d5ebd0cb38d Binary files /dev/null and b/slides/l02/img/android-logo.png differ diff --git a/slides/l02/img/animation/android-animate.gif b/slides/l02/img/animation/android-animate.gif new file mode 100755 index 0000000000000000000000000000000000000000..0fb1d08fd616979b31c4390966e7c2e3410b2c4f Binary files /dev/null and b/slides/l02/img/animation/android-animate.gif differ diff --git a/slides/l02/img/animation/animation-linear.png b/slides/l02/img/animation/animation-linear.png new file mode 100755 index 0000000000000000000000000000000000000000..08bd9fc3dc2ce5d151294b1d2b695a490f2e5f00 Binary files /dev/null and b/slides/l02/img/animation/animation-linear.png differ diff --git a/slides/l02/img/animation/valueanimator.png b/slides/l02/img/animation/valueanimator.png new file mode 100755 index 0000000000000000000000000000000000000000..6cc2a13bbfca142b090c3fec00ddf410ca82eeb5 Binary files /dev/null and b/slides/l02/img/animation/valueanimator.png differ diff --git a/slides/l02/img/animationDemo.mov b/slides/l02/img/animationDemo.mov new file mode 100644 index 0000000000000000000000000000000000000000..a6869d9aea9806463e59f8fd6266d3b48a8819f7 Binary files /dev/null and b/slides/l02/img/animationDemo.mov differ diff --git a/slides/l02/img/animationPractice.zip b/slides/l02/img/animationPractice.zip new file mode 100644 index 0000000000000000000000000000000000000000..f61898caee6a923d2664759343babc271aa24ce7 Binary files /dev/null and b/slides/l02/img/animationPractice.zip differ diff --git a/slides/l02/img/anydo-example.png b/slides/l02/img/anydo-example.png new file mode 100755 index 0000000000000000000000000000000000000000..ad9958b541d2a3cce7890b7f8156ebf84bb7cfd0 Binary files /dev/null and b/slides/l02/img/anydo-example.png differ diff --git a/slides/l02/img/first-android-project-structure.png b/slides/l02/img/first-android-project-structure.png new file mode 100755 index 0000000000000000000000000000000000000000..8a63e70e71075cbd6963baa58fc9eb4e52bbe1ea Binary files /dev/null and b/slides/l02/img/first-android-project-structure.png differ diff --git a/slides/l02/img/instagram-example.png b/slides/l02/img/instagram-example.png new file mode 100755 index 0000000000000000000000000000000000000000..0094d142321dde64b7a627634d2e619e8cca0e1f Binary files /dev/null and b/slides/l02/img/instagram-example.png differ diff --git a/slides/l02/img/wizard.png b/slides/l02/img/wizard.png new file mode 100644 index 0000000000000000000000000000000000000000..8ecaad5256c117e6ab7c93b93e5b61818a57950f Binary files /dev/null and b/slides/l02/img/wizard.png differ diff --git a/slides/l03/img/LayoutSpec.png b/slides/l03/img/LayoutSpec.png new file mode 100644 index 0000000000000000000000000000000000000000..d35a62e29abba453847a525fc4eba2956e1d34d2 Binary files /dev/null and b/slides/l03/img/LayoutSpec.png differ diff --git a/slides/l03/img/android-linear.png b/slides/l03/img/android-linear.png new file mode 100644 index 0000000000000000000000000000000000000000..6b252da67203bb2e57a21a65c2b442d1e7e14a9d Binary files /dev/null and b/slides/l03/img/android-linear.png differ diff --git a/slides/l03/img/constraint-editor.png b/slides/l03/img/constraint-editor.png new file mode 100644 index 0000000000000000000000000000000000000000..cb898264dbb375ea8f1fe36aa38180cf76f5ceee Binary files /dev/null and b/slides/l03/img/constraint-editor.png differ diff --git a/slides/l03/img/design-view.png b/slides/l03/img/design-view.png new file mode 100644 index 0000000000000000000000000000000000000000..76f63830d1dbd0e0388c6ce7f57bd2b3d7618db9 Binary files /dev/null and b/slides/l03/img/design-view.png differ diff --git a/slides/l03/img/exam-q-sol.png b/slides/l03/img/exam-q-sol.png new file mode 100644 index 0000000000000000000000000000000000000000..047f349edee6bc6236c21e774ef2d7febef9ff0e Binary files /dev/null and b/slides/l03/img/exam-q-sol.png differ diff --git a/slides/l03/img/interactor-hierarchy.png b/slides/l03/img/interactor-hierarchy.png new file mode 100644 index 0000000000000000000000000000000000000000..bd0a91b5f82c8810b45ea4c661fe9fda6e68e311 Binary files /dev/null and b/slides/l03/img/interactor-hierarchy.png differ diff --git a/slides/l03/img/pinterest-android.png b/slides/l03/img/pinterest-android.png new file mode 100644 index 0000000000000000000000000000000000000000..b07ff8eb6c83c79e5b44007a16da7d1b47c88536 Binary files /dev/null and b/slides/l03/img/pinterest-android.png differ diff --git a/slides/l03/img/watch3.png b/slides/l03/img/watch3.png new file mode 100644 index 0000000000000000000000000000000000000000..ce7134c4b0c57883931335e40fef086a366e7294 Binary files /dev/null and b/slides/l03/img/watch3.png differ diff --git a/slides/l03/img/xmlvsjava.png b/slides/l03/img/xmlvsjava.png new file mode 100644 index 0000000000000000000000000000000000000000..62b80b16d6c1c2cb1779fc42a1928e42e1aa7aaa Binary files /dev/null and b/slides/l03/img/xmlvsjava.png differ diff --git a/slides/l03/layout.html b/slides/l03/layout.html new file mode 100644 index 0000000000000000000000000000000000000000..0b49a4fe99589f60d698eaea59b0257965b83584 --- /dev/null +++ b/slides/l03/layout.html @@ -0,0 +1,278 @@ +--- +layout: presentation +title: Lab 3 Slides +description: Lab project--Layout-- +--- + +# CSE 340 Lab 3 (Spring 2020) +## Week 3: Layout + +.title-slide-logo[ +  +] + +--- + +# Layout Timeline + +- Layout part 1-2 due: Tomorrow @ 10:00pm (No late days allowed) + +- Layout part 3-4 and Reflection due: Next Thursday, April 23 @ 10:00pm + - Lock: Saturday, April 25 @ 10:00pm (If you are using late days) + + +<!-- # Reflection? + +- What did you learn from doing Part4? + +- Was there anything that was surprisingly easy or hard? + +- Include your diagram of the interactor hierarchy and the corresponding interface. --> + +--- + +# Instruction for turning in Layout part 3-4 + +- **(Important!)** You will have to accept the Layout Part 3-4 at Gitgrade before you turn in + +- Track your acceptance/ submission of all assignments: https://gitgrade.cs.washington.edu/student/summary/8723 + +- Work in the same repo as Part 1-2 + +--- +# Section 3 Objectives + +- User Interfaces on Android + - ConstraintLayout + - Interactor Hierarchy + +- `LayoutInflater` + - XML vs. Programmatic (Java) + +- Previous exam problem of Layout + - Worksheet: https://tinyurl.com/cse340lab3 + + +--- +# User Interfaces on Android +.left-column-half[ +- Views + - Base class for __all__ UI elements + - Interactors (e.g buttons, labels, image views, etc) +- ViewGroups + - Encapsulates one or more views (e.g. Android Components, **Layouts**) + - Can define specific **layout** properties +- Layout + - Defines the structure for the user interface (UI) of your app + - View and ViewGroup objects live within Layouts + - We will use the word *Components* to include both layout components and interactors (Views) since you don't generally "interact" with layouts +] + +.right-column-half[ +<div class="mermaid"> +graph TD +W(ViewGroup) --> V[ViewGroup] +W --> V1[View] +W --> V2[View] +V --> V3[View] +V --> V4[View] +V --> V5[View] + +classDef blue font-size:14pt,text-align:center +classDef darkblue font-size:14pt,text-align:center + +class W,V darkblue +class V1,V2,V3,V4,V5 blue +</div>] + +--- +# Layout in Android +Where we left off: "Many layout and other attributes for components. You should explore!" + + + +--- +# Layout Types in Android + +- [FrameLayout](https://developer.android.com/reference/android/component/FrameLayout.html) - good for position views on +top of each other, or encapsulating a bunch of views. Used in [Doodle](/assignments/doodle). + +- [__LinearLayout__](https://developer.android.com/reference/android/component/LinearLayout.html) - places views one after +the other in order according to the orientation (Horizontal or Vertical). Used in [Layout](/assignments/layout). + +- [__RelativeLayout__](https://developer.android.com/reference/android/widget/RelativeLayout) - Positions of the children +are desribed in relation to one another + +- [__TableLayout__](https://developer.android.com/reference/android/component/TableLayout.html) - Rows and columns style +way of declaring a layout + +- [GridLayout](https://developer.android.com/reference/android/component/GridLayout.html) - Uses +an [*adapter*](https://developer.android.com/reference/android/interactor/Adapter.html) that provides items to display in +a grid + +- [ConstraintLayout](https://developer.android.com/reference/android/component/ConstraintLayout.html) Let's you use constraints to specify how things should lay out. Used in [Layout](/assignments/layout). + + +- More on https://developer.android.com/guide/topics/ui/declaring-layout.html + +<!-- + + +# What is LayoutInflater? --> + +--- +# Constraint Layout +.left-column-half[ + + +] +.right-column-half[ +- ConstraintLayout is a ViewGroup that allows you to position widgets in a flexible way +- Useful for building responsive interfaces in Android. +- You can see little lines connecting the `textView` to its container and it's sibling (the `linearLayout`). + - This specifies how it's attached (can change type by clicking on right) + - If you were to change the interface (e.g. a different sized screen), it would stay attached and keep filling the space + - All ends up in XML you can explore too +] + + +--- +# What are Constraints? +.left-column[ +] +.right-column[ + +- Very general +- Can reproduce most other things +- Can operate on multiple axes +- Can enhance other layout options + +] + +--- + +# Worksheet: Interactor Hierarchy + +What would be the Component Tree for the Layout Part 1-2 program? + +.left-column-half[ +  +] + + +-- +.right-column-half[ +<div class="mermaid" style="font-size: small;"> +graph TD +LL(LinearLayout) --> S[StatusBar] +LL --> RL[RelativeLayout] +RL --> SV[ScrollView] +RL --> BN[BottomNav] +SV --> CL[ConstraintLayout] +CL --> V2[ImageView] +CL --> V3[...] +CL --> V4[ImageView] + + +class LL,RL,SV,CL darkblue +class S,SV,BN,V2,V3,V4 blue +</div> +] + +--- + +# LayoutInflater + +- Accepts a valid XML file and converts it into a `View` object or interactor hierarchy. + +- In Part 3 you will code part of it in an XML file and the rest programmatically (Java). + +- Why? (Discuss about pros and cons of constructing layout with XML and programmatically) + +--- + +# XML vs. Programmatic (Java) + +.left-column-half[ +- XML is easier setting up the Layouts + +- XML shows the Layouts directly + +- XML can be inflated many times +] + +.right-column-half[ + +] +--- + +# XML vs. Programmatic (Java) + +- Programmatic is easier adding items to the Layouts + +- Programmatic can use loops + +- Sample solution of adding items into Layout in Part 1 (XML) has 55 lines + +- Sample solution of adding items into Layout in Part 2 (Java) has 17 lines + + +--- + +# How do we use the LayoutInflater? + +1. Setting up the LayoutInflater +```java +// Obtains the LayoutInflater from the given context +LayoutInflater.from(Context context) +``` + +2. Inflate +```java +// Inflate a new view hierarchy from the specified XML resource +inflate(int resource, ViewGroup root) +``` + +--- +# Worksheet: Quick Exercise + +Construct a LayoutInflater and pass in the `part1.xml` file. + +--- + +# Quick Exercise Solution + +```java +public Part1View(Context context, List<String> imageNames, int vMargin) { +// Obtain the inflater from the context +LayoutInflater inflater = LayoutInflater.from(context); + +// Inflate R.layout.part1 +View newView = inflater.inflate(R.layout.part1, null); // newView is at the root of the inflated tree + +// Add it to this view +this.addView(newView); +} +``` + +--- + +# Previous Exam Question + +--- + +# Solution + +**What is the basic idea you have for how to fix it?** + +> Constrain the top of the scroll to the bottom of the text view. + +**Which view would you need to modify (provide the value you would set `android:id` to)?** + +> `@+id/scrollView` + +**What one line of XML would you add? Pseudocode ok here, you don't have to use exact names.** + +> `app:layout_constraintTop_toBottomOf="@id/textView"` diff --git a/slides/l04/accessibility.html b/slides/l04/accessibility.html new file mode 100644 index 0000000000000000000000000000000000000000..9f6f39b0cbf4891b646bcc8ad8bca50d2f2f780d --- /dev/null +++ b/slides/l04/accessibility.html @@ -0,0 +1,110 @@ +--- +layout: presentation +title: Lab 04 Slides +description: Layout and Accessibility +class: middle, center, inverse +--- +# CSE 340 Lab 4 (Spring 2020) + +## Week 4: Accessibility + +.title-slide-logo[ +  +] + +--- + +# Assignment Timeline + +- Layout part 3-4 and Reflection due: ~~Today, April 23~~ Tomorrow, April 24 @ 10:00pm + - Lock: Saturday, April 25 @ 10:00pm (If you are using late days) + +- No peer evaluation for this assignment + +- Accessibility assignment out: Yesterday, April 22 - due: Next Thursday, April 30 + +<!-- + +# Reflection + +- Include a screen shot of the interface you are emulating in your reflection + +- Include a screenshot of the result of your implementation in your reflection + +- Also include your diagram of the interactor hierarchy and the corresponding interface. + +- Tell us: What did you learn from doing Part 4? + +- Tell us: Was there anything that was surprisingly easy or hard? --> + +--- +# Section 4 Objectives + +- Get ready for Accessibity Assignment +- What is Alt Text? +- Accesibity in designing technology +- Discussion: What does inclusion mean to you? + + +--- + +# Get ready for Accessibity Assignment + +- Install Accessibility Scanner on Emulator (through Google Play) + - https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en_US + +--- + +# Alt Text + +- What is alt text, and why is it important? + +- Adding Accessibility Features to Apps for Blind and Visually-Impaired Users: https://youtu.be/1by5J7c5Vz4 +- Introduction to Alternative Text: https://webaim.org/techniques/alttext/#intro + +--- + +.title-slide-logo[ +  +] + +--- + +## Bad alt text: + +- This picture of flowers was taken at the Chihuly Glass Gardens + +## Better alt text: + +- Purple flowers with a fuzzy center surrounded by green leaves + +--- + +# Who can alt text help? + +- Not only visually impaired individuals! + +--- + +# Are the captions we used in the lectures enough? + +- Why? + +--- + +.left-column-half[ +# ASL Gloves + +- Why are technologies like this harmful? + +- You could build bias into technology if you are not careful + +] + +.right-column-half[ + +] + +--- + +# What does inclusion mean to you? diff --git a/slides/l04/agenda.txt b/slides/l04/agenda.txt new file mode 100644 index 0000000000000000000000000000000000000000..76f136a1a969625bd527f42c7144e567dc3b5c16 --- /dev/null +++ b/slides/l04/agenda.txt @@ -0,0 +1,27 @@ +- reminder for layout assignment +- timeline +- layout reflection (10 mins) + +- alt text (10 mins) +- what is alt text, and why is it important? +- who can screen reader help? + +- brain storm: other than alt text, what we can do for other disabilities? for example, deaf (5-10 mins) +-- caption: help non-native speakers +-- captions in this class - not enough. why? +- please do not call us "hearing impaired" (brifly explain my identity. since they call blind "visual impaired") +- disabilities varies (i am deaf, and i dont represent blind people, i dont represent the D community) + +- some mindsets i have noticed in HCI: (10 mins) +-- asl glove (why does it hurt the community?) +-- how to be an "ally" (please, dont say its my job to fight. Fight with me if you consider yourself an ally) + +- what does "inclusion" mean? (10 mins) +-- it mean view us as who we are +- technology shows a mindset. And the mindset is the core. Thus, you are not only learning the technology in this class. We want you to learn the mindset as well. +- you could build bias in technology if you are not careful +- accessibility is always an inherent feature, not a nice addition, it should not be something you implement the last + + +- ask prob questions and encourage students +- divide groups \ No newline at end of file diff --git a/slides/l04/img/asl_gloves.png b/slides/l04/img/asl_gloves.png new file mode 100644 index 0000000000000000000000000000000000000000..15e1c51fe2af35f02817cf2df4afe182189eff1a Binary files /dev/null and b/slides/l04/img/asl_gloves.png differ diff --git a/slides/l04/img/cover.jpg b/slides/l04/img/cover.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0ab996615cbaba6c49d6ee41e20e0c02689a4d67 Binary files /dev/null and b/slides/l04/img/cover.jpg differ diff --git a/slides/l04/img/flower.png b/slides/l04/img/flower.png new file mode 100644 index 0000000000000000000000000000000000000000..acd6bc12862d864b1bedcb114d79627d59de644d Binary files /dev/null and b/slides/l04/img/flower.png differ diff --git a/slides/l05/img/eventDiagram.png b/slides/l05/img/eventDiagram.png new file mode 100644 index 0000000000000000000000000000000000000000..6a73ac5e20901d48a503f43375824925b58cb921 Binary files /dev/null and b/slides/l05/img/eventDiagram.png differ diff --git a/slides/l05/img/layout.png b/slides/l05/img/layout.png new file mode 100644 index 0000000000000000000000000000000000000000..b6ff09630cff8240594e1550a96aa75bbd25f707 Binary files /dev/null and b/slides/l05/img/layout.png differ diff --git a/slides/l05/img/smq.png b/slides/l05/img/smq.png new file mode 100644 index 0000000000000000000000000000000000000000..66c0e1367260f1845bf068fe07aa5f6d5dbd959e Binary files /dev/null and b/slides/l05/img/smq.png differ diff --git a/slides/l05/img/smrecap.png b/slides/l05/img/smrecap.png new file mode 100644 index 0000000000000000000000000000000000000000..9757ee308e1388fb9e687fa08d4c6d0df195c247 Binary files /dev/null and b/slides/l05/img/smrecap.png differ diff --git a/slides/l05/img/statemachine.png b/slides/l05/img/statemachine.png new file mode 100644 index 0000000000000000000000000000000000000000..2d0038d95b01e30c67f13a3f5daf3f7cd9d9239c Binary files /dev/null and b/slides/l05/img/statemachine.png differ diff --git a/slides/l05/state.html b/slides/l05/state.html new file mode 100644 index 0000000000000000000000000000000000000000..41717d5e47c53952a73bc56303f92ebe1a5b5421 --- /dev/null +++ b/slides/l05/state.html @@ -0,0 +1,105 @@ +--- +layout: presentation +title: Lab 5 Slides +description: State Machine +class: middle, center, inverse +--- + +# CSE 340 Lab 5 (Spring 2020) +## Week 5: State Machine + +.title-slide-logo[ +  +] + +--- +# Timeline +- Accessibility assignment due: Today, April 30 @ 10:00pm + - Lock: Saturday, May 2 @ 10:00pm (if you are using late days) + +--- +# Section 5 Objectives + +- Understanding State Machine +- Practice with PPS and State Machine + - Worksheet: https://tinyurl.com/340section5 +- Questions + +--- +# State Machine + +- State Machines are used to respond to incoming events and allows for us to store state between events. +- Start state - indicated with incoming arrow +- End state - indicated with double-layered shape +- Transition States - indicated with single-layered shape +- Event Arrows - indicated with an arrow between states, represent different actions taken up states. + + + +--- +# Propositional Production System (PPS) + +- State machine is just the start, stop and interim states with arrows with nothing on them. +- State machine with: + - ? (Boolean gates) + - action calls + - extra conditions required to fire + on the arrows is called PPS. + +  + +--- +# State Machine Practice +Discussion: What is the behavior of this State Machine/PPS? + + + +--- +# Worksheet: State Machine Practice +- Link: https://tinyurl.com/340section5 + +--- +# Worksheet Solutions + +Problem 1: + +1. updateThumbPosition() +2. updateVolume() +3. INSIDE +4. EssentialGeometry.BAR +5. updateThumbPosition() +6. updateVolume() +7. State.START +8. updateThumbAlpha() + + +Read more: [How to turn the PPS into code](https://courses.cs.washington.edu/courses/cse340/20sp/docs/pps) + + +--- +# Worksheet Solutions +Problem 2: + + +<div class="mermaid" style="font-size: 14pt"> + graph TD + S((.)) --> A((Start)) + A -- "DOWN:insideBar? updateButtonPosition(); + updateButtonAlpha(); invokeScrollAction(); + invalidate();" --> I((PRESSED)) + A -- "DOWN:insideButton? updateButtonAlpha(); + invokeScrollAction(); invalidate();" --> I((PRESSED)) + I -- "UP:updateButtonAlpha(); invalidate();" --> E[End] + I -- "MOVE:updateButtonPosition(); invokeScrollAction(); invalidate();" --> I + + classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; + classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; + classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; + classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + + class S invisible + class A start + class E finish + class I normal + + </div> diff --git a/slides/l06/android-logo.png b/slides/l06/android-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..cebec75001ab25dc397065f193797d5ebd0cb38d Binary files /dev/null and b/slides/l06/android-logo.png differ diff --git a/slides/l06/bundling.html b/slides/l06/bundling.html new file mode 100644 index 0000000000000000000000000000000000000000..02c58fd4310c4c0f0110991b2c6541cd19a927f6 --- /dev/null +++ b/slides/l06/bundling.html @@ -0,0 +1,122 @@ +--- +layout: presentation +title: Lab 6 Slides +description: Bundling +class: middle, center, inverse +--- + +# CSE 340 Lab 6 (Spring 2020) +## Week 6: Bundles? Bundles! + +.title-slide-logo[ +  +] + +--- +# Timeline +- Color Picker and Reflection due: Next Monday, May 11 @ 10:00pm + - Lock: Wednesday, May 13 @ 10:00pm (if you are using late days) + +- Practice quiz for Accessibility and Color Picker will be out: this Friday, May 8 + - Due: Next Wednesday, May 13 @ 10:00pm + +- **Reminder:** Please fill out this [form](https://docs.google.com/forms/d/e/1FAIpQLSdQrpZx-gexgDcKEF1SRp4egObimDP9qqVwLD56w0V2sYJDpw/viewform) by tomorrow night, so we can plan for our next assignment - Menus. +--- +# Section 6 Objectives + +- Solicit some anonymous feedback and questions +- Bundles + - What're they? + - Why they're important + - How we use them (for the assignment and otherwise) +- Questions and work time on Color Picker + +--- + +# Feedback + +Form link: https://forms.gle/A7BBRGQGvF6J1aJ1A +- Any questions you have about assignment/ examlet +- Any feedback you have on section + - What can we do better? What is going well? + - We want this to be a good use of time for you. + +--- + +# Bundles: So you got lots of apps.. + +And they all want to use _tons_ of memory, but they don't **need** that memory all the time. + + - Android: You get no/minimal memory when you're not actively being used. + - Apps: But then how do we remember stuff when we are being used if we can't save it in memory + - Android: Use this `bundle` + +_(In truth the app could write/read its state to disk whenever it is being closed/opened but that is time consuming and would delay the OS launching new things)_ + +--- + +# What is a Bundle? + +- First what happens when the user closes the application? Does it die? + - No! + +- Where does it go then? + - Think about it as **hibernation** + - All of it's memory is cleared, so all of your variables are _GONE_ 😲. + - **But** Android lets you save some variables to a `bundle` right before your memory is cleared, and gives you your `bundle` back when you get the memory space back. + +- What's in the bundle? + - You decide, entirely up to the application developer (you). + +_(Your bundle is destroyed if the user force quits the app through multitasking, or if the phone is turned off. There is also a max size of the bundle and likely not something you will run into)_ + +--- + +# Bundles & Code + +- Bundle management is occuring at the `activity` layer, not to be confused with any individual `view`. + +- When the user closes the app, right before it closes and its memory is cleared, Android invokes `onSaveInstanceState(Bundle outState)` on the activity, providing a reference to the activity for the app to save values into. + +- Then when the user opens the app again, Android invokes `onRestoreInstanceState(Bundle savedInstanceState)` returning the same bundle from earlier. + +- You can think of the `bundle` as a `Map<String, Object>` that only supports certain types of objects (they must be `Serializable` which includes all primitives and `String`) + +_(Read more [here](https://developer.android.com/topic/libraries/architecture/saving-states))_ + +--- + +# Bundles: Code Example + +```java +public abstract class MainActivity extends AppCompatActivity { + + @Override + public void onSaveInstanceState(Bundle outState) { + super.onSaveInstanceState(outState); + + outState.putString("OUR_KEY", "bundles? bundles!!!"); + } + + @Override + protected void onRestoreInstanceState(Bundle savedInstanceState) { + super.onRestoreInstanceState(savedInstanceState); + + String whatWeSaved = savedInstanceState.getString("OUR_KEY"); + // whatWeSaved would contain "bundles? bundles!!!" + } +} +``` +--- +# Discussion: Using Bundles in Color Picker +Not in this assignment but you could store the state of the Color Picker view directly into the bundle instead of storing the state of the application. +- Think about the model of the application +- Think about the model of the color picker view/interactor +- Is it better to store the state of the application or the view? + +--- + +# Work time on Color Picker + +- Color-Angle conversion [hints](https://docs.google.com/document/d/1p97w2eoDe8hhmhDgE9fgkO5emimfKPy-eqGvzyaeUUQ/edit?usp=sharing) + diff --git a/slides/l07/img/callbacks2.png b/slides/l07/img/callbacks2.png new file mode 100644 index 0000000000000000000000000000000000000000..37eeff1f958d4f711faf7ce2af0ceb9736121957 Binary files /dev/null and b/slides/l07/img/callbacks2.png differ diff --git a/slides/l07/img/callbacks3.png b/slides/l07/img/callbacks3.png new file mode 100644 index 0000000000000000000000000000000000000000..c7c5e1de7d5c73ca13b8e95df99735ce5aeec7fa Binary files /dev/null and b/slides/l07/img/callbacks3.png differ diff --git a/slides/l07/img/listener.png b/slides/l07/img/listener.png new file mode 100644 index 0000000000000000000000000000000000000000..30ad3eea628489302baae48acddf0b7c59ecbbab Binary files /dev/null and b/slides/l07/img/listener.png differ diff --git a/slides/l07/img/menus.png b/slides/l07/img/menus.png new file mode 100644 index 0000000000000000000000000000000000000000..ae04e3b7be46c18e69c93a2b1eaa5a584d406f4f Binary files /dev/null and b/slides/l07/img/menus.png differ diff --git a/slides/l07/img/menussm.png b/slides/l07/img/menussm.png new file mode 100644 index 0000000000000000000000000000000000000000..0baadcf1c31e35a4e89954c65ad3b42262832d21 Binary files /dev/null and b/slides/l07/img/menussm.png differ diff --git a/slides/l07/img/smrecap.png b/slides/l07/img/smrecap.png new file mode 100644 index 0000000000000000000000000000000000000000..9757ee308e1388fb9e687fa08d4c6d0df195c247 Binary files /dev/null and b/slides/l07/img/smrecap.png differ diff --git a/slides/l07/img/tips.png b/slides/l07/img/tips.png new file mode 100644 index 0000000000000000000000000000000000000000..6a7406ab1d2f992e5352885127fb7aa5ebe23ee3 Binary files /dev/null and b/slides/l07/img/tips.png differ diff --git a/slides/l07/img/translate.png b/slides/l07/img/translate.png new file mode 100644 index 0000000000000000000000000000000000000000..37fa3326c7b96cefe9e0d17c89c4fb45bf122030 Binary files /dev/null and b/slides/l07/img/translate.png differ diff --git a/slides/l07/menus-lab.html b/slides/l07/menus-lab.html new file mode 100644 index 0000000000000000000000000000000000000000..38438b5de4eafab0484bd7a515f23675c356cf69 --- /dev/null +++ b/slides/l07/menus-lab.html @@ -0,0 +1,166 @@ +--- +layout: presentation +title: Lab 7 Slides +description: Menus +class: middle, center, inverse +--- + +# CSE 340 Lab 7 (Spring 2020) +## Week 7: Getting started with Menus + + + +.title-slide-logo[ +  +] + +--- + +# Menus Timeline + +- Programming part (Part 1-4) due: Next Wednesday, May 20 @ 10:00pm + - Lock: Friday, May 22 @ 10:00pm (if you are using late days) + +- Analysis part (Part 5-6: Report and Reflection) out: Wednesday, May 20 + - Due: Monday, May 25 @ 10:00pm + +- **Examlet 3 is tomorrow!** Friday, May 15 + +--- + +# Section 7 Objectives + +- Thank you for filling out the mid-quarter section feedback form! +- Review key concepts for Menus assignment + - Translate + - Callbacks + - State machine ([Lab 5](https://courses.cs.washington.edu/courses/cse340/20sp/slides/l05/state.html#1)) +- Examlet review with Kahoot +- Work time on Menus assignment +- Questions + +--- + +# Translate + +- Move origin (and everything else) in x and y + + + ```java + translate(float dx, float dy) + ``` +- How do we use _translate_ in Menus? +--- + +# Callbacks + +Callbacks handle application response to events + - Update Application Model + +  + + +--- + +# Callbacks + +Callbacks handle application response to events + - Best implemented using custom listeners: + - Let you execute code when your view's model has changed + - No other way to know that has happened + +  + +--- +# Example in ColorPicker + +We setup the Custom View side for you + +```java + // Currently registered ColorListener instance or null. + // A set of listener in Color picker vs. One listener in Menus + private List<ColorChangeListener> mColorChangeListeners; + + // Class which defines a listener to be called when a new color is selected. + public interface ColorChangeListener { + void onColorSelected(@ColorInt int color); + } + + // Registers a new listener + public final void addColorChangeListener(@NonNull ColorChangeListener colorChangeListener) { + mColorChangeListeners.add(colorChangeListener); + } +``` +--- +# Example in ColorPicker + +You implemented this +.left-column-half[ +`// TODO: Register callback to update {color,label} View when color changed.` + +- What method do we call to register the callback? + - `addColorChangeListener()` + +- What do we usually do in a callback? + - update application (`MainActivity`) model +] +.right-column-half[ + +] + +--- +# Custom Listener in Menus + +You need to do this yourself in Menus + +```java +// TODO: register a new listener with the menu so that the application knows when a selection is made + +// TODO: implement the listener. When the user completes a trial, the menu listener should store +// the results of the trial, and setup for the next trial +``` + + +--- +# Android Studio Tips + +- [Keyboard shortcuts](https://developer.android.com/studio/intro/keyboard-shortcuts) +- Structure tab + + + + + +--- +# Work time on Menus + + + +<div class="mermaid"> + classDiagram + + class MenuExperimentView { + onTouchEvent() + startSelection() + endSelection() + updateModel() + onDraw() + } + + + AbstractMenuExperimentView <|-- MenuExperimentView + + AbstractMainActivity <|-- MainActivity + AbstractMainActivity <|-- TestActivity + MenuExperimentView <|-- PieMenuView + MenuExperimentView <|-- NormalMenuView + MenuExperimentView <|-- CustomMenuView + + + </div> + + diff --git a/slides/l08/.gitkeep b/slides/l08/.gitkeep new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/slides/l08/menus-data.html b/slides/l08/menus-data.html new file mode 100644 index 0000000000000000000000000000000000000000..9fa2d81cd917c4b84a7b7e9d9ea498d77fd6a1dd --- /dev/null +++ b/slides/l08/menus-data.html @@ -0,0 +1,78 @@ +--- +layout: presentation +title: Lab 8 Slides +description: Menus Data Analysis +class: middle, center, inverse +--- + +# CSE 340 Lab 8 (Spring 2020) +## Week 8: Menus Data Analysis + + +.title-slide-logo[ +  +] + +--- + +# Menus Timeline + +- Programming part (Part 1-4) due: ~~yesterday~~ Today, Thursday, May 21 @ 10:00pm + - Lock: Friday, May 22 @ 10:00pm (if you are using late days) + +- Analysis part (Part 5-6: Report and Reflection) due: Monday, May 25 @ 10:00pm + - Lock: Wednesday, May 27 @ 10:00pm (if you are using late days) +--- + +# Section 8 Objectives + +- Data analysis + - In-class demo +- Remote testing +- Menus help & questions + +--- + +# Data Analysis + +In-class demo + +- Getting Menus data from an Android device or Emulator ([instructions here](https://courses.cs.washington.edu/courses/cse340/20sp/docs/android_files/)) + +- Working with data: [sample spreadsheet](https://docs.google.com/spreadsheets/d/1JqfKhHugIF-kebs_bVztCnkUe0CizXN8PU_Ar3kXtK4/edit#gid=1104722579) + + +--- + +# Remote Testing + +1. Still looking for participants? Find your group members [here](https://docs.google.com/document/d/11nsEWs3TubV5Zy0zOIGguqZJohkS34uizIrDv-bgnYs/edit) + - You can ask us/the course staff too 😊 +2. Create an APK: + - In your menu project in Android Studio, select the *Build -> Build Bundle(s)/APK(s) -> Build APK(s)*. + - When the *Build APK(s)* message popup appears in the lower right hand corner, click the *locate* link to find the `app-debug.apk`. +3. Send a copy of the consent form (Word/Google Doc) to the participant +4. Set up your phone call or video meeting + - Briefly explain the study + - Have the participant "sign" [this Google form](https://bit.ly/20sp-Menus-Consent) as written consent + +--- + +# Remote Testing (cont.) +5\. Send your APK - Have the participant test your menus: +- **Highly recommend** to create a shared Google folder/drive with your participant where: + - you upload your APK + - your participant can later upload their .csv data file + +**Notes**: +- Participants please make sure to `Clear Result CSV` prior testing and complete a full session +- Developer please make sure you have 108 data points from each participant + +Read more: [Menus Spec](https://courses.cs.washington.edu/courses/cse340/20sp/assignments/menus#part-5-conduct-and-write-up-user-study) + + +--- + +# Questions + + diff --git a/slides/l08/menus_data.png b/slides/l08/menus_data.png new file mode 100644 index 0000000000000000000000000000000000000000..e94e349ff2398ebc099de80f1ae9072e0fcd6395 Binary files /dev/null and b/slides/l08/menus_data.png differ diff --git a/slides/l09/img/abridged_undo_view_tree.png b/slides/l09/img/abridged_undo_view_tree.png new file mode 100644 index 0000000000000000000000000000000000000000..deafa50f428c05705f4edb5c7ae21fc34edab58b Binary files /dev/null and b/slides/l09/img/abridged_undo_view_tree.png differ diff --git a/slides/l09/img/draw-app.jpg b/slides/l09/img/draw-app.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6cc42303aa32f5f7533bb42a2159ced7a96b27f9 Binary files /dev/null and b/slides/l09/img/draw-app.jpg differ diff --git a/slides/l09/outline.md b/slides/l09/outline.md new file mode 100644 index 0000000000000000000000000000000000000000..cb33e127f340aa299b9a3cb1af3a067cab482d69 --- /dev/null +++ b/slides/l09/outline.md @@ -0,0 +1,13 @@ +### lab outline + +- Intro + - Hi I'm Adam! + - Welcome to color picker + - you got emails for GitLab repos for assignment 3, clone them as we'll be working with them today +- Visually introduce color picker (3min) +- Talk through stub/spec (7min) + - Reminder of api references + - Radian math quick refresh +- Convert unconstrained xy coords to a color (10min) +- Work in small groups over examples of possible interaction flows, ask about potential outputs (2 + 5) +- work on state machine implementation (23min) diff --git a/slides/l09/undo-lab.html b/slides/l09/undo-lab.html new file mode 100644 index 0000000000000000000000000000000000000000..d6cd5e3e832707f52d2d610e5ab07ac79ec5febd --- /dev/null +++ b/slides/l09/undo-lab.html @@ -0,0 +1,250 @@ +--- +layout: presentation +title: Lab 9 Slides +description: Getting Started With Undo +class: middle, center, inverse +--- +# CSE 340 Lab 9 (Spring 2020) +## Week 9: Getting started with Undo + +.title-slide-logo[ +  +] + +--- +# Undo Timeline + +- Programming part due: Next Monday, June 1 @ 10:00pm + - Lock: Wednesday, June 3 @ 10:00pm (if you are using late days) + +- Heuristic Evaluation due: Friday, June 5 @ 10:00pm +- Reflection due: Monday, June 8 @ 10:00pm + +- **Examlet 4 is tomorrow!** Friday, May 29 + +--- +# Section 9 Objectives + +- Understanding Undo assignment +- Examlet review with Kahoot +- Work time/ Questions on Undo assignment + +--- +# The Undo feature + +- Incredibly useful interaction technique + +- Reverts the application to an older state + + - Mistakes can easily be undone + + - *"Ugh...that was definitely not right, but manually erasing all this work is going to take forever"* +--- +# The Redo feature + +- Inverse to the Undo feature +- "Undoes" an undo + + - Work previously undone is reapplied + + - *"Huh, maybe I made the right decision after all..."* +--- +# Codebase: Application +.left-column60[ +- `ReversibleDrawingActivity`, class contains the entire interactor hierarchy + - Floating Action Buttons (FAB), buttons that allow for actions supported by AbstractReversibleDrawingActivity + - References DrawingView in AbstractDrawingActivity + +- `AbstractReversibleDrawingActivity`, abstract class that extends AbstractDrawingActivity + - adds support for undo/redo + - includes buttons for undo/redo + - `doAction()`, `undo()`, `redo()`] + +.right-column30[ +<div class="mermaid"> +classDiagram + +AbstractDrawingActivity <|.. AbstractReversibleDrawingActivity +AbstractReversibleDrawingActivity <|.. ReversibleDrawingActivity +class AbstractDrawingActivity { + DrawingView: "Canvas the user draws on" + addMenu() + addCollapsableMenu() + doAction() +} + +class AbstractReversibleDrawingActivity { + +AbstractStackHistory + +doAction() + +undo() + +redo() +} + +class ReversibleDrawingActivity { + +onAction() + +onColorSelected() + +onThicknessSelected() +} +</div>] + +--- +# Codebase: Application + +.left-column60[ +- `AbstractDrawingActivity` - abstract class for app that supports drawing without history + + - Wrapper around a `DrawingView` + + - `doAction()` + + - Contains methods for adding menus and changing visibility] + + .right-column30[ + <div class="mermaid"> + classDiagram + + AbstractDrawingActivity <|.. AbstractReversibleDrawingActivity + AbstractReversibleDrawingActivity <|.. ReversibleDrawingActivity + class AbstractDrawingActivity { + DrawingView: "Canvas the user draws on" + addMenu() + addCollapsableMenu() + doAction() + } + + class AbstractReversibleDrawingActivity { + +AbstractStackHistory + +doAction() + +undo() + +redo() + } + + class ReversibleDrawingActivity { + +onAction() + +onColorSelected() + +onThicknessSelected() + } + </div>] +--- +# Codebase: DrawingView +.left-column-half[- `AbstractDrawingActivity` is a wrapper around a `DrawingView` + - Sets behavior for how strokes are drawn + +- DrawingView, a drawing canvas that handles strokes + - Strokes are just `StrokeView`'s in the `DrawingView` + - `onTouchEvent()` implements a PPS that describes lifetime of a stroke being created] + +.right-column40[ +<div class="mermaid"> + classDiagram + + class AbstractDrawingActivity { + DrawingView: "Canvas the user draws on" + addMenu() + addCollapsableMenu() + doAction() + } + + class StrokeView { + Path + onDraw() + } + </div> +] +--- + +# Codebase: Actions +.left-column-staff[ +- `AbstractAction` abstract class defines basic behavior any Action should have +- `AbstractReversibleAction` abstract class defines interface for actions that can be undone +- `doAction()` chain: `AbstractReversibleDrawingActivity.doAction()` âž¡`AbstractDrawingActivity.doAction()` âž¡`AbstractAction.doAction()` +- `AbstractReversibleDrawingActivity`'s `undo()` and `redo()` call methods on `AbstractReversibleAction` to undo/redo] + +.right-column55[ +<div class="mermaid"> + classDiagram + + AbstractAction <|.. AbstractReversibleAction + AbstractReversibleAction <|.. ChangeColorAction + AbstractReversibleAction <|.. ChangeThicknessAction + AbstractReversibleAction <|.. AbstractReversibleViewAction + AbstractReversibleViewAction <|.. StrokeAction + + class AbstractAction { + doAction() + } + class AbstractReversibleAction { + +boolean done + +undoAction + } + class AbstractReversibleViewAction { + +invalidate + } + </div> +] + +--- + +# Codebase: Actions +.left-column-staff[ +- Actions: + - `ChangeColorAction` + - `ChangeThicknessAction`, implement for homework + - `StrokeAction` + - And more, create your own action!] + +.right-column55[ +<div class="mermaid"> + classDiagram + + AbstractAction <|.. AbstractReversibleAction + AbstractReversibleAction <|.. ChangeColorAction + AbstractReversibleAction <|.. ChangeThicknessAction + AbstractReversibleAction <|.. AbstractReversibleViewAction + AbstractReversibleViewAction <|.. StrokeAction + + class AbstractAction { + doAction() + } + class AbstractReversibleAction { + +boolean done + +undoAction + } + class AbstractReversibleViewAction { + +invalidate + } + </div> +] + +--- + +# Codebase: History + +.left-column60[The `AbstractReversibleDrawingActivity` uses an StackHistory interface to manage the undo/redo history + - You will implement the concrete `StackHistory` which implements `AbstractStackHistory` + - Think: What data structures are used? Why does this make sense? + - What happens to the redo history if you take a new action after undoing a couple times? + - What happens to the undo history if you redo an action? + - What happens to the redo history if you undo an action?] + +.right-column30[ +<div class="mermaid"> + classDiagram + + AbstractStackHistory <|.. StackHistory + class AbstractStackHistory { + addAction(AbstractReversibleAction action) + undo() + redo() + canUndo() + canRedo() + } + + class StackHistory { + +capacity: "Max stack size" + } + + + </div> +] + diff --git a/slides/l09/undo_exam_question.pdf b/slides/l09/undo_exam_question.pdf new file mode 100644 index 0000000000000000000000000000000000000000..c739bea3b80736a3f299a8fe2818586cea2d853a Binary files /dev/null and b/slides/l09/undo_exam_question.pdf differ diff --git a/slides/l09/undo_lab_notes.txt b/slides/l09/undo_lab_notes.txt new file mode 100644 index 0000000000000000000000000000000000000000..2f0debf2ecaf43158114a00571e79969f9313cc7 --- /dev/null +++ b/slides/l09/undo_lab_notes.txt @@ -0,0 +1,104 @@ +Today we will spend lecture exploring and building an understanding of the +Undo assignment. + +The Undo feature is an incredibly useful interaction technique. It allows the user +to revert the application to an older state, enabling mistakes to be easily undone. + +The Redo feature is also very useful, and is the inverse to the Undo feature. +It "undoes" an undo. Work previously undone is reapplied. + +[DEMO] +Let's begin by looking at the app in action. There are two different +menus - one for changing the thickness of the drawn stroke and the other +for changing the color of the drawn stroke. Changing the thickness, changing +the color, or changing the stroke are the three types of actions the user can +take, and the user can undo or redo any of these actions using buttons that +only appear when they're relevant. Undo only appears when there is an action to +undo, and redo only appears when there is an action to redo. + +[CODEBASE EXPLORATION] + +[ACTIVITY FILES] +Let's dive into the codebase. + +The MainActivity in this app is a concrete implementation of the ReversibleDrawingActivity +and in turn DrawingActivity abstract classes. Important methods include `onColorSelected()` +and `onThicknessSelected()` + +DrawingActivity is an abstract class for an app that supports drawing without support for Undo or Redo. +An important method to read is doAction(). + +The ReversibleDrawingActivity extends DrawingActivity and adds support for undo/redo to it, +including both the undo/redo buttons and the history. Important methods to read +include doAction(), undo(), and redo(). + +The MainActivity class inherits from ReversibleDrawingActivity. It adds support for thickness +and color to the undo/redo support in ReversibleDrawingActivity. It also adds menus to show +the thickness/color options. Important methods to read include onColorSelected() and onThicknessSelected(). + +[DRAWING VIEW] +The DrawingActivity is a wrapper around a DrawingView. The DrawingView sets the +behavior for how strokes are drawn. Strokes are just StrokeView objects drawn against +the DrawingView. The onTouchEvent() should look +familiar. It implements a PPS that describes the lifetime of a stroke being created. + +There's a useful diagram that visualizes the code's structure. You should also look +at the layout files. Chances are you'll want to update them to add new features. + +[ACTIONS] + +We're building a drawing app. Whenever the user interacts with the app, he/she +is taking some sort of Action. The Action abstract class defines the basic behavior +any Action should have. The DrawingActivity's doAction() calls the doAction() implementation + in Action's subclasses. + +There's another abstract class called ReversibleAction that extends Action. This represents an action +that is reversible. The ReversibleAction abstract class extends the Action abstract class +and adds an undoAction() method to undo the particular Action. +All three of the actions we've defined in the app are reversible. If for your extra feature you define a +new action, it may extend ReversibleAction, or it may just extend Action - it's up to you. + +The three actions we've defined are ChangeColorAction, ChangeThicknessAction, and StrokeAction. +The ChangeColorAction, when applied, stores the DrawingView's Paint's old color and sets a new color. +When undone, it sets the color on the DrawingView's paint to its previous color. +The ChangeThicknessAction does something similar, except it alters the thickness of the +DrawingView's paint. The StrokeAction creates a StrokeView that represents the View of the +stroke drawn and adds it to the DrawingView. + +[HISTORY] + +Your first goal with this assignment is to implement StackHistory. StackHistory extends the +AbstractHistory abstract class. It is the fundamental data structure that will allow your +users to undo and/or redo actions on the app, and it is used in the ReversibleDrawingActivity. + +[ADDITIONAL RESPONSIBILITIES] +Your second goal with this assignment is to add a new FAB that adds a thickness 0 stroke. + +Your third goal with this assignment is to add an additional feature to the app. The simplest +thing to do is to add a new FAB to one of the existing menus, like a FAB that allows you to draw +in a new color. If you want to challenge yourself, you could allow users to use your ColorPicker wheel +to select a color or allow a user to change a stroke location. + +That was a lot. I'm actually going to help you out and show you how to add one of the +additional features, but before I get to that - any questions? + +[ADDING COLOR FAB] + +I'm going to show you how to add a Color FAB. This is one of your options for additional +features. It's also very similar to adding the Thickness 0 FAB. + +The first thing I'm going to do is go to color_menu.xml, because I know this +is the layout file that contains all the color FABs. I'm just going to copy +and paste one of the other color FABs. Then I'm going to update it's id, contentDescription, +and backgroundTint attributes. + +To be consistent with the style here, I'm going to define the string for the contentDescription +in the strings.xml file. + +Next I'm going to look at MainActivity because I know that's the class that adds +the color and thickness buttons. I noticed that the other color buttons are stored +in COLOR_MENU_ITEMS array. I add my grey FAB to the array. addCollapsableMenu adds +the button and sets its on click listener automatically, so you don't have to worry +about it showing up correctly on your app or registering a listener. All you have to +do now is go to onColorSelected, which is the listener function for the color buttons. +I add my own case for the grey fab, do a ChangeColorAction, and I'm done. \ No newline at end of file diff --git a/slides/l10/10-heuristic-1.png b/slides/l10/10-heuristic-1.png new file mode 100644 index 0000000000000000000000000000000000000000..fb0ccf3ae0d1ab2153ac19709c2ed58797225d7d Binary files /dev/null and b/slides/l10/10-heuristic-1.png differ diff --git a/slides/l10/10-heuristic-2.png b/slides/l10/10-heuristic-2.png new file mode 100644 index 0000000000000000000000000000000000000000..fe13cfe4b255e278e7089fad3912a3e59a2f41ad Binary files /dev/null and b/slides/l10/10-heuristic-2.png differ diff --git a/slides/l10/10-heuristic.png b/slides/l10/10-heuristic.png new file mode 100644 index 0000000000000000000000000000000000000000..30d63b8b69588d725642697ec7196b52e6befd71 Binary files /dev/null and b/slides/l10/10-heuristic.png differ diff --git a/slides/l10/lab-heuristic.html b/slides/l10/lab-heuristic.html new file mode 100644 index 0000000000000000000000000000000000000000..90f246e614d237015e11a5008e69baee68d55f49 --- /dev/null +++ b/slides/l10/lab-heuristic.html @@ -0,0 +1,73 @@ +--- +layout: presentation +title: Lab 10 Slides +description: Getting started with Heuristic Evaluation +class: middle, center, inverse +--- +# CSE 340 Lab 10 (Spring 2020) +## Week 10: Heuristic Evaluation + +.title-slide-logo[ +  +] +--- + +# Undo Timeline + +- Heuristic Evaluation due: Friday, June 5 @ 10:00pm + +- Report and Reflection due: Monday, June 8 @ 10:00pm + +--- + +# Section 10 Objectives + +- Heuristic Evaluation instruction + +- CSE 340 Farawell Kahoot + +- Questions/Feedback + + +--- + +## Heuristic Evaluation + +- You should have received an email with the [survey link](https://docs.google.com/forms/d/e/1FAIpQLScDe9k5bOKFikyh4ai32ih1e8waMD4SMECAjZK3yRVl1u-eDQ/viewform) and videos + +- We will complete a heuristic evaluation on one submission in section today + - You must complete the remaining 3 evaluations by the due date + +- What should you do? + + - Two passes through the interface: one to inspect flow, another to inspect each screen against heuristics + - For each video, submit 3 things: At least two should be bad issues, one can be good. + - Write a Usability Action Report ([template](https://courses.cs.washington.edu/courses/cse340/20sp/assignments/undo-report) provided) +--- + + + +- **H1. Visibility of system status** -- Are users informed about what is going on in the app? + +- **H2: Match between the system and the real world** -- Does the app use concepts, language, and conventions that would be familiar to users? + +- **H3: User control and freedom** -- Does it allow users to do what they want to? + +- **H4: Consistency and standards** -- Does the app use the same conventions in all its components? Is it consistent with other apps on the same platform? + +- **H5: Error prevention** -- Is the app defensive? Does it have a design that protects users from making mistakes? + +--- + + + + +- **H6: Recognition rather than recall** -- Are the objects/actions/options of the app easily accessible to newcomers, or do they require memory? + +- **H7: Flexibility and efficiency of use** -- Can users customize the app to their needs? + +- **H8: Aesthetic and minimalist design** -- Is the app cluttered? Does it contain only relevant components? + +- **H9: Help users recognize, diagnose, and recover from errors** -- When users run into any problem, will it be easy for them to fix it? + +- **H10: Help and documentation** -- Is help easy to find and navigate? Is the information given even helpful? diff --git a/slides/unused/3dmodeling.html b/slides/unused/3dmodeling.html new file mode 100644 index 0000000000000000000000000000000000000000..0bb6b2e4aa3487f77eedff6336861cd55b3306c1 --- /dev/null +++ b/slides/unused/3dmodeling.html @@ -0,0 +1,149 @@ +--- +layout: presentation +title: Basic Intro to 3D modeling +description: Description of how to create a 3D model in OpenSCAD +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse- +--- +# Physical Computing + +Jennifer Mankoff + +CSE 340 Winter 2020 +--- +layout:false + +[//]: # (Outline Slide) +.title[Today's goals] +.body[ +- Introduce OpenSCAD +- Talk about elements of 3D modeling +] + +--- +.title[OpenSCAD: A language for 3D modeling] +.body[ +[Beginner's +tutorial](http://edutechwiki.unige.ch/en/OpenScad_beginners_tutorial) + +Comments and variables similar to what you are used to + +``` +//Name Tag - Customizable +Name = "Jen Mankoff"; +Length = 90 ; +c = 20; +``` +] +--- +.title[OpenSCAD concepts: solids] +.body[ +Primitive Solids such as `cube([2,3,4]);` make up your designs + +Also `sphere` `cylinder` `polyhedron` +] +--- +.title[OpenSCAD concepts: transformations] +.body[ +Same as 2D transformations + +- `rotate([x,y,z]) [solid]` +- `translate([x,y,z]) [solid]` +- `mirror([x,y,z]) [solid]` +- ... +] +--- +.title[OpenSCAD concepts: CSG modeling] +.body[ +- Union: `union() { [transformations/solids/etc] }` combines children +- Difference: `difference() {}` subtracts everything from first child +- Hull: `hull() {}` combines all the children within a convex hull + +] + +--- +.title[OpenSCAD concepts: 2G geometry + linear extrusion] +.body[ +- `linear_extrude (height=XX)` and then define a polygon to extrude, + e.g., `polygon(points=[[0,0],[100,0],[0,100],[15,15],[65,15],[15,65]], paths=[[0,1,2],[3,4,5]]);` + +makes what? +] +-- +.body[ + + +] +--- +.title[Other things to extrude] +.body[ + +- Can import a DXF file and extrude, just put this after `linear_extrude`: `import (file = "file.dxf");` + +- text: + +``` +content = "Text rocks"; +font = "Liberation Sans"; + +translate ([-30,0,0]) { + linear_extrude(height = 3) { + text(content, font = font, size = 10); + } + } +``` +] +--- +.title[Other features] +.body[ +[Cheat sheet](http://www.openscad.org/cheatsheet/index.html) + +- `%` shows something transparently so you can find out what would + happen +- `$fn` sets resolution (can speed things up by making this low during design) +- Can create functions (`module name() {}` ) +- Can use for loops +- Can use [other peoples' libraries](https://github.com/mtu-most/most-scad-libraries) +] +--- +.title[Let's try it] +.body[ +- Open OpenSCAD +- Before you begin modeling, go to View>>Show Axes. This will make it + easier to see where the parts of your model are being placed. +- Click and drag to change viewing angle +- Right click and drag to move origin + + +] +--- +.title[sample program] +.body[ + +``` +//Name Tag +Name = "Jen Mankoff"; +Length = 90 ; +c = 20; + +linear_extrude(height = 5) +translate([0, 5, 0]) +text(Name); + +difference(){ + hull(){ + cylinder(h=2,d=40); + translate([Length,0,0]) + cylinder(h=2,d=40); + } + translate([Length,0,0]) + cylinder(h=2,d=14); + +} +``` +] +--- +# End of Deck diff --git a/slides/unused/activity-events.html b/slides/unused/activity-events.html new file mode 100644 index 0000000000000000000000000000000000000000..81970bc95a0da05dd108ee195b871a3edbc6a69e --- /dev/null +++ b/slides/unused/activity-events.html @@ -0,0 +1,40 @@ +--- +layout: presentation +title: Background on how Activities Generate Events +description: Activity state changes generate events. Here's how +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +template: inverse + +# Interaction Programming Lab (Spring 2019) +## Activity State Change Event Handling +--- +layout: false +--- + +## Activity.red[*] + +- Application component providing a screen for users to interact + +-- + +- Typically fills whole the screen (though it doesn't have to) + +-- +<br><br> + + + +<br> + +-- + +<br> +.footnote[ + More on Activites: https://developer.android.com/guide/components/activities.html + +] diff --git a/slides/unused/ar.html b/slides/unused/ar.html new file mode 100644 index 0000000000000000000000000000000000000000..fe53f80ac6cfd3916a6d8d2fa0e9009bdd7eac09 --- /dev/null +++ b/slides/unused/ar.html @@ -0,0 +1,214 @@ +--- +layout: presentation +title: Augmented Reality and your Phone +description: Discussion of the future of mobile AR +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Augmented Reality and your Phone + +Jennifer Mankoff + +CSE 340 Spring 2019 +Slides credit: Chauncey Frend, Indiana University +.footnote[[Frend, Chauncey. â€Augmented Reality & the UITS Advanced Visualization Lab." 30 Sep 2016/28 Feb 2017. Digital Arts & Humanities Workshop Series. Scholars' Commons, Wells Library, Indiana University, Bloomington.](http://hdl.handle.net/2022/21293) +] + +--- +layout: false + +.title[What is Augmented Reality?] + +.body[ + +] +.footnote[ +Milgram, Paul, et al. "Augmented reality: A class of displays on the reality-virtuality continuum." Photonics for industrial applications. International Society for Optics and Photonics, 1995. +[Photo +Source](http://smartideasblog.trekk.com/augmented-or-virtual-how-do-you-like-your-reality) +] +--- +.left-column[ +## What is AR? + +A combination of +- a real scene viewed by a user and +- a virtual scene generated by a computer that augments the scene with + additional information. + ] +.right-column[ + + +] +??? +Differences to VR? +Augmented Reality +- System augments the real world scene +- User maintains a sense of presence in real world +- Needs a mechanism to combine virtual and real worlds +- Hard to register real and virtual + +--- +.left-column50[ +## Brief History + +- 1901 Lyman Frank Baum author of “The Master Key†imagines a kind of AR. +- 1968 Ivan Sutherland invents first head-mounted display “Sword-of-Damocles†at University of Utah. +- 1999 ARToolkit was created by Hirokazu Kato at HITLab +- 2010 Vuforia for AR Mobile Apps was released by Qualcomm. +- 2013 Google announces Google Glass. +- 2015 Microsoft announces the HoloLens. +- 2016 Niantic released Pokémon Go. +] +.right-column50[ + +] +--- +.title[AR Coloring Book] +.body[ +![:youtube AR Coloring Book Video, SWzurBQ81CM] +0:00-0:30 +] + +--- +.title[AR Climbing Wall] +.body[ +![:youtube AR Climbing Wall, rjWcE25s7kQ] +0:00-0:33 +] + +--- +.title[AR 3D Assembly] +.body[ +![:youtube AR 3D Assembly, CONY3q3OdPA] + +0:00-0:33 + +[Similar example in medical domain](https://www.youtube.com/watch?v=MS3h9_KPoBY&feature=youtu.be) +] + +--- +.title[AR in Retail] +.body[ + +] + +--- +.title[AR in Tourism] +.body[ + +] + +--- +.title[Human/robot Interaction] +.body[ + +![:youtube HRI, mSCrviBGTeQ] + +Time: 2:15 + +] +--- +.left-column[ +## Building AR experiences] +.right-column[ +ASSETS + +Display + +Interface +] +--- +.left-column[ +## Building AR experiences: ASSETS] +.right-column[ +Sources? + - 3D Scanning + - Photogrammetry + - 3D Authoring + - 3D Repositories + - e.g. Smithsonian X 3D https://3d.si.edu/browser + - e.g. Thingiverse +] +??? +Other media? +--- +.left-column[ +## Building AR experiences: Display Hardware] +.right-column[ + + + + +Requirements? +] +??? +Camera +Display +... + +--- +.left-column[ +## Building AR experiences: Interface] +.right-column[ +![:youtube Pokemon Go, vgfZbgwrbx8] + +- 4:00-7:20 + + +] +.footnote[https://www.geekwire.com/2018/pokemon-go-evolved-remain-popular-initial-craze-cooled/] +??? +Discussion of interface needs +--- +.left-column[ +## Combining real and virtual + +Registering assets with the scene + +Tracking objects +] +.right-column[ + +] +??? +1st picture - real world + +2nd picture - real world with virtual objects and inter-reflections and virtual + shading +--- +.title[Difficult!] +.body[ + +Requires objects to behave in physically plausible manners when manipulated +- Occlusion +- Collision detection +- Shadows + +AR systems sensitive to visual errors - virtual object may not be stationary in the + real scene or it may be in the wrong place. + +Time delays lead to augmented image lagging behind motions in the real scene. + +] +??? +Failures in registration due to: +Noise +Position and pose of camera with respect to the real scene +Image distortions +Time delays +In calculating the camera position + + + +--- +.title[Some tools] +.body[ +- Unity (Basic package) +- [Vuforia (AR + Plugin)](https://medium.com/quick-code/top-tutorials-to-learn-vuforia-to-develop-ar-applications-274eedc2b18f) + +] diff --git a/slides/unused/ar/areg.png b/slides/unused/ar/areg.png new file mode 100644 index 0000000000000000000000000000000000000000..70b9195a640946c8b4ec22aaf79ae5f431f8c933 Binary files /dev/null and b/slides/unused/ar/areg.png differ diff --git a/slides/unused/ar/arhistory.png b/slides/unused/ar/arhistory.png new file mode 100644 index 0000000000000000000000000000000000000000..550d9f858b52ecbf1502d503e69f632d16297950 Binary files /dev/null and b/slides/unused/ar/arhistory.png differ diff --git a/slides/unused/ar/arvr.png b/slides/unused/ar/arvr.png new file mode 100644 index 0000000000000000000000000000000000000000..de518a47a6de4fb5c7f0b03fda00b08e118cc95a Binary files /dev/null and b/slides/unused/ar/arvr.png differ diff --git a/slides/unused/ar/disney.png b/slides/unused/ar/disney.png new file mode 100644 index 0000000000000000000000000000000000000000..5e648a272f580502a65d94ccf9767fbae62a2f3f Binary files /dev/null and b/slides/unused/ar/disney.png differ diff --git a/slides/unused/ar/hololens.png b/slides/unused/ar/hololens.png new file mode 100644 index 0000000000000000000000000000000000000000..bbb80f5d644bf7208c14aeacb047b7a7487dfaf8 Binary files /dev/null and b/slides/unused/ar/hololens.png differ diff --git a/slides/unused/ar/ikea.png b/slides/unused/ar/ikea.png new file mode 100644 index 0000000000000000000000000000000000000000..581b9ca6b395866451e7515eeb86ed0a6d5ce560 Binary files /dev/null and b/slides/unused/ar/ikea.png differ diff --git a/slides/unused/ar/mobile.png b/slides/unused/ar/mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..bde11ccf0af95bc7ea20eb3d16b2a239f7445a77 Binary files /dev/null and b/slides/unused/ar/mobile.png differ diff --git a/slides/unused/ar/objectplace.png b/slides/unused/ar/objectplace.png new file mode 100644 index 0000000000000000000000000000000000000000..4f5dbe56678158c3c657ed14c73a772c1daf4a56 Binary files /dev/null and b/slides/unused/ar/objectplace.png differ diff --git a/slides/unused/cartoon2.png b/slides/unused/cartoon2.png new file mode 100644 index 0000000000000000000000000000000000000000..44d9f443c8702ee6e65fec7b12378c8c9545ce27 Binary files /dev/null and b/slides/unused/cartoon2.png differ diff --git a/slides/unused/dev-demo.html b/slides/unused/dev-demo.html new file mode 100644 index 0000000000000000000000000000000000000000..ff90862930ac559bd82463d2db65cafa80252eb2 --- /dev/null +++ b/slides/unused/dev-demo.html @@ -0,0 +1,121 @@ +--- +layout: presentation +title: Hello World Slides--Week 1, Lab-- +description: Lab project--Hello World-- +class: middle, center, inverse +--- + +# SSUI Mobile Lab (Spring 2020) +## Week 1: Development Environment Setup + +.title-slide-logo[ +  +] + +--- + +# Overview +- ## Android Studio Installation + +- ## Android SDK Installation + +- ## Exercise: Hello World +--- + +layout: false +## Development Environment Setup + +-- + +- Download + Install + + - __Android Studio__: + https://developer.android.com/studio/index.html +-- + + - __Genymotion Android Emulator__ *(Optional)* : https://www.genymotion.com/thank-you-freemium/ +-- + +- Android Set-up +-- + - Open Android Studio + +--- + +template: inverse +## Android Studio Walk-through + +--- + +### Starting Android an Android Project + + +--- + +### Project Configuration + + + +--- + +### Targeting Android Devices + + + +--- + +### Adding an Activity + + +--- + +### Customizing the Activity + + + +--- + +### Viewing your Activity's Code + +  + +--- + +### Running your Application +  + + +--- +### Selecting a Deployment Target +  + +--- +### Configuring a Virtual Device (Install Marshmallow) +  + + +--- +### Let the Installer Run (Grab some Coffee) +  + + +--- +### Configuring a Virtual Device - Select a Phone +  + + +--- +### Configuring a Virtual Device - Naming your Device +  + + +--- + +### Selecting a Deployment Target +  + + +--- +### Start your Application! +  + diff --git a/slides/unused/final-exam-review.html b/slides/unused/final-exam-review.html new file mode 100644 index 0000000000000000000000000000000000000000..c1f6509f21a203f963c7763427d3cf8b3ea77bd0 --- /dev/null +++ b/slides/unused/final-exam-review.html @@ -0,0 +1,113 @@ +--- +# Example long answer question + +##Which is better and which laws explain it? + +| #A | #B | +|--|--| +||.right-column50[]| + +-- +- Fitts Law ( distance and sized; expert errorless behavor) +- Steering Law (distance and size over a path) +- Cognitive modeling (expert behavior) +- Gestalt Psychology (will they see it at all?) +- **Errors (will they be reduced)** + +--- +.left-column-half[ +# Fitts Law + + + +Fitts' law only applies to *error-free, expert* behavior +] +.right-column-half[ +.jax[$$MT = a + b*log_2({Dist \over Size} + 1)$$ +] + +where +- *MT* is movement time +- *ID/MT* is the *Throughput* of a device in bits/second +- *a* and *b* are empirically derived constants +- ID is the *Index of Difficulty* (ID, in bits) of a movement +.jax[$$log_2({Dist \over Size} + 1)$$] + + +] +??? +This is just a line + +Fitts’ law tells us about difficulty for pointing and selection tasks +- Time to move the hand depends only on relative precision required +- MT increases as __distance__ from target increases +- MT decreases as __size__ of target increases +- Diagram this + +Fitts' law only applies to expert behavior + +--- +.title[Design tips derived from motor principals] +.body[ +Design Tip #1: Make small targets larger + +Design Tip #2: Put commonly used things close together + +Design Tip #3: Make use of Edges: They are Infinite + +Design Tip #4: Use pie menus instead of context menus for expert tasks + +Design Tip #5: Use snapping to minimize distance<br> when likely +targets are known + +Design Tip #6: Separate Motor Size from Visible Size + +] +--- +.title[Use of two handed input] +.body[ + +2 Handed input principles +- Non preferred leads +- Sets frame of reference +- Preferred does fine movement +] +-- +.title[Lenses] +.body[ +Use: Display hidden, context-specific interaction + +Implementation +] +--- +.title[Study design] +.body[ +Know your terms (participant, session, trial, condition) + +Know the important information about ethics +- Beneficence --> + - Value of research higher than risks + - Do no harm +- Respect for Persons --> + - Fully informed of intent and purpose + - Informed consent + - May opt out at any time, for any reason +- Justice + - equitable, representative selection of participants +] + +--- +.title[Study Analysis] +.body[ + +Basic statistics: Max, Min, Mean, Mode + +Bar chart: Compares conditions (means) + +Histogram: Shows number of results in each part of a range (distribution) + +Correlation != Causation +] diff --git a/slides/unused/img/Edgewrite2.png b/slides/unused/img/Edgewrite2.png new file mode 100644 index 0000000000000000000000000000000000000000..d667210ad2a378b2158d5ed08c97edb01efec834 Binary files /dev/null and b/slides/unused/img/Edgewrite2.png differ diff --git a/slides/unused/img/Grafitti2.png b/slides/unused/img/Grafitti2.png new file mode 100644 index 0000000000000000000000000000000000000000..af6a460e7db587130d59a195b06160ceadbbef9d Binary files /dev/null and b/slides/unused/img/Grafitti2.png differ diff --git a/slides/unused/img/akkarh.jpg b/slides/unused/img/akkarh.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9ea23e5b7e5f4cc5603d8323973622dceb5b3033 Binary files /dev/null and b/slides/unused/img/akkarh.jpg differ diff --git a/slides/unused/img/amber.png b/slides/unused/img/amber.png new file mode 100644 index 0000000000000000000000000000000000000000..dc1ee2f038baeef5c20a0ccc3d8a1c0f8dd94774 Binary files /dev/null and b/slides/unused/img/amber.png differ diff --git a/slides/unused/img/android-calculator-example.png b/slides/unused/img/android-calculator-example.png new file mode 100755 index 0000000000000000000000000000000000000000..f5921e2da2941d95e3d6eafc39fade76ec14c266 Binary files /dev/null and b/slides/unused/img/android-calculator-example.png differ diff --git a/slides/unused/img/android-contacts-example.png b/slides/unused/img/android-contacts-example.png new file mode 100755 index 0000000000000000000000000000000000000000..86239c1cdfab7abde795a4d01567cede0dd7accd Binary files /dev/null and b/slides/unused/img/android-contacts-example.png differ diff --git a/slides/unused/img/android-logo.png b/slides/unused/img/android-logo.png new file mode 100755 index 0000000000000000000000000000000000000000..cebec75001ab25dc397065f193797d5ebd0cb38d Binary files /dev/null and b/slides/unused/img/android-logo.png differ diff --git a/slides/unused/img/android-search-example.png b/slides/unused/img/android-search-example.png new file mode 100755 index 0000000000000000000000000000000000000000..ba5e27882923910ebee1e758760360e943c670d8 Binary files /dev/null and b/slides/unused/img/android-search-example.png differ diff --git a/slides/unused/img/animation.png b/slides/unused/img/animation.png new file mode 100644 index 0000000000000000000000000000000000000000..ab4004c764f33b6a9e74806206a1262f835a17c2 Binary files /dev/null and b/slides/unused/img/animation.png differ diff --git a/slides/unused/img/area.png b/slides/unused/img/area.png new file mode 100644 index 0000000000000000000000000000000000000000..09a62b05a8402bccfb0d2dd1d6d5e3fae53f00ff Binary files /dev/null and b/slides/unused/img/area.png differ diff --git a/slides/unused/img/ascent.png b/slides/unused/img/ascent.png new file mode 100644 index 0000000000000000000000000000000000000000..bd3570da5f06b32335df6fe44627c6ed7b8b62e8 Binary files /dev/null and b/slides/unused/img/ascent.png differ diff --git a/slides/unused/img/background-paper.png b/slides/unused/img/background-paper.png new file mode 100644 index 0000000000000000000000000000000000000000..fab891a842afc9228f4eaa8098b56252c11a3398 Binary files /dev/null and b/slides/unused/img/background-paper.png differ diff --git a/slides/unused/img/bad-defaults.gif b/slides/unused/img/bad-defaults.gif new file mode 100644 index 0000000000000000000000000000000000000000..e2a3c38c8184eb2a8468f6609171355e7da5dee4 Binary files /dev/null and b/slides/unused/img/bad-defaults.gif differ diff --git a/slides/unused/img/buttons.png b/slides/unused/img/buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..26675f540854d26ee061fb0f9f81a46d9766ca14 Binary files /dev/null and b/slides/unused/img/buttons.png differ diff --git a/slides/unused/img/cartoon.png b/slides/unused/img/cartoon.png new file mode 100644 index 0000000000000000000000000000000000000000..5f76a447e8897a2b5a527df6f715c18dce15ed38 Binary files /dev/null and b/slides/unused/img/cartoon.png differ diff --git a/slides/unused/img/colordodge-both.png b/slides/unused/img/colordodge-both.png new file mode 100644 index 0000000000000000000000000000000000000000..fa80aafc9aa29f8f656020a8aa2bf175de96c88c Binary files /dev/null and b/slides/unused/img/colordodge-both.png differ diff --git a/slides/unused/img/colordodge-diagram.png b/slides/unused/img/colordodge-diagram.png new file mode 100644 index 0000000000000000000000000000000000000000..ec409e17117c3e56ec8aa2826d5bafea6e3c87b7 Binary files /dev/null and b/slides/unused/img/colordodge-diagram.png differ diff --git a/slides/unused/img/colormeter-highlights.png b/slides/unused/img/colormeter-highlights.png new file mode 100644 index 0000000000000000000000000000000000000000..4bf4ad68b9d61b7fcebf9dcc9c675fc456983e75 Binary files /dev/null and b/slides/unused/img/colormeter-highlights.png differ diff --git a/slides/unused/img/combined2.png b/slides/unused/img/combined2.png new file mode 100644 index 0000000000000000000000000000000000000000..c40330a24baefe21cc51e412404416ab7b0d9fe2 Binary files /dev/null and b/slides/unused/img/combined2.png differ diff --git a/slides/unused/img/dest.png b/slides/unused/img/dest.png new file mode 100644 index 0000000000000000000000000000000000000000..89def8fa8bacee63b6568bdd908fafd714555d04 Binary files /dev/null and b/slides/unused/img/dest.png differ diff --git a/slides/unused/img/destatop-diagram.png b/slides/unused/img/destatop-diagram.png new file mode 100644 index 0000000000000000000000000000000000000000..8de5e7f261e925749c8c0870569e32fddc64ae74 Binary files /dev/null and b/slides/unused/img/destatop-diagram.png differ diff --git a/slides/unused/img/destatop.png b/slides/unused/img/destatop.png new file mode 100644 index 0000000000000000000000000000000000000000..a2db0db76f516e56ff70d3a7bf8aa6c60b2884b0 Binary files /dev/null and b/slides/unused/img/destatop.png differ diff --git a/slides/unused/img/diagram.png b/slides/unused/img/diagram.png new file mode 100644 index 0000000000000000000000000000000000000000..5437f18cc73929e005672147a1da65fa821abff5 Binary files /dev/null and b/slides/unused/img/diagram.png differ diff --git a/slides/unused/img/diaz.png b/slides/unused/img/diaz.png new file mode 100644 index 0000000000000000000000000000000000000000..59c95dc4ecde1bc5b966fd09364892eb27a14418 Binary files /dev/null and b/slides/unused/img/diaz.png differ diff --git a/slides/unused/img/download-projects.png b/slides/unused/img/download-projects.png new file mode 100644 index 0000000000000000000000000000000000000000..2c14bd2aafc9317983c230fd4af3ef1279707b0e Binary files /dev/null and b/slides/unused/img/download-projects.png differ diff --git a/slides/unused/img/drawing-interface.png b/slides/unused/img/drawing-interface.png new file mode 100644 index 0000000000000000000000000000000000000000..25ca6afba81ee996baa56de1ef507751b13cf107 Binary files /dev/null and b/slides/unused/img/drawing-interface.png differ diff --git a/slides/unused/img/echeverra.png b/slides/unused/img/echeverra.png new file mode 100644 index 0000000000000000000000000000000000000000..cd9317cfb4c036141df5d4299a7262863ffe7c9e Binary files /dev/null and b/slides/unused/img/echeverra.png differ diff --git a/slides/unused/img/ex1.png b/slides/unused/img/ex1.png new file mode 100644 index 0000000000000000000000000000000000000000..2900bc8d9e002acb4ef7d670c5036468a723fe74 Binary files /dev/null and b/slides/unused/img/ex1.png differ diff --git a/slides/unused/img/ex2.png b/slides/unused/img/ex2.png new file mode 100644 index 0000000000000000000000000000000000000000..2b5f42516128abe09cb980dc36fc55c84fcba7bd Binary files /dev/null and b/slides/unused/img/ex2.png differ diff --git a/slides/unused/img/expanded.png b/slides/unused/img/expanded.png new file mode 100644 index 0000000000000000000000000000000000000000..4907f94f175c3c32c81aabd86688ca1157c5b013 Binary files /dev/null and b/slides/unused/img/expanded.png differ diff --git a/slides/unused/img/georgia-1.png b/slides/unused/img/georgia-1.png new file mode 100644 index 0000000000000000000000000000000000000000..56e7e858a0a813f8a34fd16feab46ba3f4ee072e Binary files /dev/null and b/slides/unused/img/georgia-1.png differ diff --git a/slides/unused/img/georgia-2.png b/slides/unused/img/georgia-2.png new file mode 100644 index 0000000000000000000000000000000000000000..a373894d49636bf80f364e46d11bf32209670719 Binary files /dev/null and b/slides/unused/img/georgia-2.png differ diff --git a/slides/unused/img/gmail-snapping.gif b/slides/unused/img/gmail-snapping.gif new file mode 100644 index 0000000000000000000000000000000000000000..66a17084941a6d03ad02d2dfa7b62446ec755b1d Binary files /dev/null and b/slides/unused/img/gmail-snapping.gif differ diff --git a/slides/unused/img/goodviz.png b/slides/unused/img/goodviz.png new file mode 100644 index 0000000000000000000000000000000000000000..b42f09a9f43ddc6d05dcd1c0e3e287da291c78a3 Binary files /dev/null and b/slides/unused/img/goodviz.png differ diff --git a/slides/unused/img/hello-01.png b/slides/unused/img/hello-01.png new file mode 100644 index 0000000000000000000000000000000000000000..6c057df55e13c28a81228aa2fae3d0edf5cac700 Binary files /dev/null and b/slides/unused/img/hello-01.png differ diff --git a/slides/unused/img/hello-02.png b/slides/unused/img/hello-02.png new file mode 100644 index 0000000000000000000000000000000000000000..b86dea59e9823022af4b81bef09fdfba55b89074 Binary files /dev/null and b/slides/unused/img/hello-02.png differ diff --git a/slides/unused/img/hello-03.png b/slides/unused/img/hello-03.png new file mode 100644 index 0000000000000000000000000000000000000000..abe5ea1efe366c816202d3cefd4b0d6acacdbc2f Binary files /dev/null and b/slides/unused/img/hello-03.png differ diff --git a/slides/unused/img/hello-04.png b/slides/unused/img/hello-04.png new file mode 100644 index 0000000000000000000000000000000000000000..6f97bb0cba2987998e50f8636db525c7079cb9e2 Binary files /dev/null and b/slides/unused/img/hello-04.png differ diff --git a/slides/unused/img/hello-06.png b/slides/unused/img/hello-06.png new file mode 100644 index 0000000000000000000000000000000000000000..170e81c7f423939618e0f2aa03125e3fad7c64c2 Binary files /dev/null and b/slides/unused/img/hello-06.png differ diff --git a/slides/unused/img/hello-07.png b/slides/unused/img/hello-07.png new file mode 100644 index 0000000000000000000000000000000000000000..cb177cec3a40e92916564d2c41aad6be4f458238 Binary files /dev/null and b/slides/unused/img/hello-07.png differ diff --git a/slides/unused/img/hello-08.png b/slides/unused/img/hello-08.png new file mode 100644 index 0000000000000000000000000000000000000000..335d752558aef8183444ccdb34c9f59de9781895 Binary files /dev/null and b/slides/unused/img/hello-08.png differ diff --git a/slides/unused/img/hello-09.png b/slides/unused/img/hello-09.png new file mode 100644 index 0000000000000000000000000000000000000000..9c8722d48a4c63fe23597091479a5b6b441d3614 Binary files /dev/null and b/slides/unused/img/hello-09.png differ diff --git a/slides/unused/img/hello-10.png b/slides/unused/img/hello-10.png new file mode 100644 index 0000000000000000000000000000000000000000..880f6e86a28a16eede427735bc4a3b120a923bcd Binary files /dev/null and b/slides/unused/img/hello-10.png differ diff --git a/slides/unused/img/hello-11.png b/slides/unused/img/hello-11.png new file mode 100644 index 0000000000000000000000000000000000000000..cbb3f57b2bb8a8370f2add7d9bad0930ffb88b44 Binary files /dev/null and b/slides/unused/img/hello-11.png differ diff --git a/slides/unused/img/hello-12.png b/slides/unused/img/hello-12.png new file mode 100644 index 0000000000000000000000000000000000000000..ba1580140041d190f4f459230234b9006f892d26 Binary files /dev/null and b/slides/unused/img/hello-12.png differ diff --git a/slides/unused/img/hello-13.png b/slides/unused/img/hello-13.png new file mode 100644 index 0000000000000000000000000000000000000000..93e377d4922b592f763057a4eb21019884b3016f Binary files /dev/null and b/slides/unused/img/hello-13.png differ diff --git a/slides/unused/img/hello-14.png b/slides/unused/img/hello-14.png new file mode 100644 index 0000000000000000000000000000000000000000..bf0f8d9f48d01391031e8ac57ebcc16ceffdd0e5 Binary files /dev/null and b/slides/unused/img/hello-14.png differ diff --git a/slides/unused/img/history.png b/slides/unused/img/history.png new file mode 100644 index 0000000000000000000000000000000000000000..137e7e1cf9c1d15a26db157570135dcec876de84 Binary files /dev/null and b/slides/unused/img/history.png differ diff --git a/slides/unused/img/input-example.gif b/slides/unused/img/input-example.gif new file mode 100755 index 0000000000000000000000000000000000000000..6aaadb863a3f3f120edd35cd05b6e507dfab7bbb Binary files /dev/null and b/slides/unused/img/input-example.gif differ diff --git a/slides/unused/img/linear.png b/slides/unused/img/linear.png new file mode 100644 index 0000000000000000000000000000000000000000..4b5b1fcd68a6d803cea91564521d2127a1018adf Binary files /dev/null and b/slides/unused/img/linear.png differ diff --git a/slides/unused/img/lorem-content.png b/slides/unused/img/lorem-content.png new file mode 100644 index 0000000000000000000000000000000000000000..6182fca44d5142386b8c5ad8546821e642cc96c4 Binary files /dev/null and b/slides/unused/img/lorem-content.png differ diff --git a/slides/unused/img/meanchart.png b/slides/unused/img/meanchart.png new file mode 100644 index 0000000000000000000000000000000000000000..1a1d40eef2f2772506de97382338e6209ff904e7 Binary files /dev/null and b/slides/unused/img/meanchart.png differ diff --git a/slides/unused/img/menu2.png b/slides/unused/img/menu2.png new file mode 100644 index 0000000000000000000000000000000000000000..355420f9062a0e8a0820a8910d1f563bb2df9703 Binary files /dev/null and b/slides/unused/img/menu2.png differ diff --git a/slides/unused/img/messenger-bubble.gif b/slides/unused/img/messenger-bubble.gif new file mode 100755 index 0000000000000000000000000000000000000000..77defd497891e79a775a6ca3593cf33e02d2c890 Binary files /dev/null and b/slides/unused/img/messenger-bubble.gif differ diff --git a/slides/unused/img/midterm/histogram.png b/slides/unused/img/midterm/histogram.png new file mode 100644 index 0000000000000000000000000000000000000000..fc38781aa5657281643b358b01f25f7839f11df2 Binary files /dev/null and b/slides/unused/img/midterm/histogram.png differ diff --git a/slides/unused/img/midterm/qs.png b/slides/unused/img/midterm/qs.png new file mode 100644 index 0000000000000000000000000000000000000000..90f6c7b5fb6d60cd832473aa12388b79cd0b32c0 Binary files /dev/null and b/slides/unused/img/midterm/qs.png differ diff --git a/slides/unused/img/minimalist-app.png b/slides/unused/img/minimalist-app.png new file mode 100644 index 0000000000000000000000000000000000000000..eb7b7a7cb0f47ff93eedf376ba0b4eb9c61ffe19 Binary files /dev/null and b/slides/unused/img/minimalist-app.png differ diff --git a/slides/unused/img/modeling/extruded-polygon.png b/slides/unused/img/modeling/extruded-polygon.png new file mode 100644 index 0000000000000000000000000000000000000000..4e4502d0aa41d80333e032d005348aa05c7750d4 Binary files /dev/null and b/slides/unused/img/modeling/extruded-polygon.png differ diff --git a/slides/unused/img/mvc.png b/slides/unused/img/mvc.png new file mode 100644 index 0000000000000000000000000000000000000000..15f6beea7a9cb9b94b00200db17b6ef4b9366307 Binary files /dev/null and b/slides/unused/img/mvc.png differ diff --git a/slides/unused/img/p21-rettig.pdf b/slides/unused/img/p21-rettig.pdf new file mode 100644 index 0000000000000000000000000000000000000000..4b519982b782ecb9367304c831de8190db6dc27d Binary files /dev/null and b/slides/unused/img/p21-rettig.pdf differ diff --git a/slides/unused/img/p21-rettig.png b/slides/unused/img/p21-rettig.png new file mode 100644 index 0000000000000000000000000000000000000000..cb5bc0b0c021dd5cd656314a8aa1071cf552511b Binary files /dev/null and b/slides/unused/img/p21-rettig.png differ diff --git a/slides/unused/img/palplates.png b/slides/unused/img/palplates.png new file mode 100644 index 0000000000000000000000000000000000000000..ceb494c18ba7e5fdf03a9408d85c21269a2539e1 Binary files /dev/null and b/slides/unused/img/palplates.png differ diff --git a/slides/unused/img/paper-prototype-example.jpg b/slides/unused/img/paper-prototype-example.jpg new file mode 100755 index 0000000000000000000000000000000000000000..804f888d1cc5f29981d291864c0b72e1df11751d Binary files /dev/null and b/slides/unused/img/paper-prototype-example.jpg differ diff --git a/slides/unused/img/paper.png b/slides/unused/img/paper.png new file mode 100644 index 0000000000000000000000000000000000000000..a9ddd75d2abb12320c8b63a578985f5ddc42e0dc Binary files /dev/null and b/slides/unused/img/paper.png differ diff --git a/slides/unused/img/pie.png b/slides/unused/img/pie.png new file mode 100644 index 0000000000000000000000000000000000000000..19bb3cea94cceca2d283eceafb0f580812c433f4 Binary files /dev/null and b/slides/unused/img/pie.png differ diff --git a/slides/unused/img/q2.png b/slides/unused/img/q2.png new file mode 100644 index 0000000000000000000000000000000000000000..1c7d316f8ea6be349057428ec713c53be8a36987 Binary files /dev/null and b/slides/unused/img/q2.png differ diff --git a/slides/unused/img/red.png b/slides/unused/img/red.png new file mode 100644 index 0000000000000000000000000000000000000000..7dbe46c9c00ca3be4021c908e057dcd2738fdad5 Binary files /dev/null and b/slides/unused/img/red.png differ diff --git a/slides/unused/img/redsat.png b/slides/unused/img/redsat.png new file mode 100644 index 0000000000000000000000000000000000000000..e7d2519666e7434e6cd0558fde9b4ed18ef29bf1 Binary files /dev/null and b/slides/unused/img/redsat.png differ diff --git a/slides/unused/img/redval.png b/slides/unused/img/redval.png new file mode 100644 index 0000000000000000000000000000000000000000..307cac41cdd5c32453b8eb984b193c5fdf42d8c3 Binary files /dev/null and b/slides/unused/img/redval.png differ diff --git a/slides/unused/img/reference.png b/slides/unused/img/reference.png new file mode 100644 index 0000000000000000000000000000000000000000..378521989824e2f5e14c0c0964f88143e1c3e679 Binary files /dev/null and b/slides/unused/img/reference.png differ diff --git a/slides/unused/img/reverse.png b/slides/unused/img/reverse.png new file mode 100644 index 0000000000000000000000000000000000000000..b802283dba1c4ce186b23e2f2e81501dd126bb97 Binary files /dev/null and b/slides/unused/img/reverse.png differ diff --git a/slides/unused/img/scrollbar-p2.png b/slides/unused/img/scrollbar-p2.png new file mode 100644 index 0000000000000000000000000000000000000000..d77624497279e1529dd5b4c9e3440e657592f643 Binary files /dev/null and b/slides/unused/img/scrollbar-p2.png differ diff --git a/slides/unused/img/scrollbar-p3.png b/slides/unused/img/scrollbar-p3.png new file mode 100644 index 0000000000000000000000000000000000000000..aee4764b651e30f17952d8b6fcbe7b131a773dbb Binary files /dev/null and b/slides/unused/img/scrollbar-p3.png differ diff --git a/slides/unused/img/select-colors.png b/slides/unused/img/select-colors.png new file mode 100644 index 0000000000000000000000000000000000000000..fe0aaec670e8e9070320f328b2ce1e343274689b Binary files /dev/null and b/slides/unused/img/select-colors.png differ diff --git a/slides/unused/img/select-shapes.png b/slides/unused/img/select-shapes.png new file mode 100644 index 0000000000000000000000000000000000000000..14c3341a45c65f2962d5995880ccb96e4960a187 Binary files /dev/null and b/slides/unused/img/select-shapes.png differ diff --git a/slides/unused/img/sensing/aware-study.png b/slides/unused/img/sensing/aware-study.png new file mode 100644 index 0000000000000000000000000000000000000000..f2f4fa24d33e4340774d383feeb610bcf9d03655 Binary files /dev/null and b/slides/unused/img/sensing/aware-study.png differ diff --git a/slides/unused/img/sensing/aware_overview1.png b/slides/unused/img/sensing/aware_overview1.png new file mode 100644 index 0000000000000000000000000000000000000000..e8c605485445b1d5d1cd0a38771b71814b976fd9 Binary files /dev/null and b/slides/unused/img/sensing/aware_overview1.png differ diff --git a/slides/unused/img/sketch-styled.png b/slides/unused/img/sketch-styled.png new file mode 100644 index 0000000000000000000000000000000000000000..b7280859cec521e6ae8bc5981904f00f187310d6 Binary files /dev/null and b/slides/unused/img/sketch-styled.png differ diff --git a/slides/unused/img/snapping.gif b/slides/unused/img/snapping.gif new file mode 100644 index 0000000000000000000000000000000000000000..e716fad939bd04ed7868a3376239cb412ceed2eb Binary files /dev/null and b/slides/unused/img/snapping.gif differ diff --git a/slides/unused/img/source.png b/slides/unused/img/source.png new file mode 100644 index 0000000000000000000000000000000000000000..05d2d1e4836a77cfd3b37501f0e364130790b5f9 Binary files /dev/null and b/slides/unused/img/source.png differ diff --git a/slides/unused/img/spectrum.png b/slides/unused/img/spectrum.png new file mode 100644 index 0000000000000000000000000000000000000000..c89c3b4fec26db2544598bf4e552fb843483b816 Binary files /dev/null and b/slides/unused/img/spectrum.png differ diff --git a/slides/unused/img/static-interactive.png b/slides/unused/img/static-interactive.png new file mode 100644 index 0000000000000000000000000000000000000000..8080782000520e0199b0d574ad08ad3dc8d921fc Binary files /dev/null and b/slides/unused/img/static-interactive.png differ diff --git a/slides/unused/img/timeoverid.png b/slides/unused/img/timeoverid.png new file mode 100644 index 0000000000000000000000000000000000000000..a633d97047b1974ec59e5811c2c768ebac148502 Binary files /dev/null and b/slides/unused/img/timeoverid.png differ diff --git a/slides/unused/img/trueblue.png b/slides/unused/img/trueblue.png new file mode 100644 index 0000000000000000000000000000000000000000..b318d002f47f0a680bfb96d6b867f48f6c572dd6 Binary files /dev/null and b/slides/unused/img/trueblue.png differ diff --git a/slides/unused/img/visual-eg.png b/slides/unused/img/visual-eg.png new file mode 100644 index 0000000000000000000000000000000000000000..08029b57adb2d300013caf369af485ca7a3b5480 Binary files /dev/null and b/slides/unused/img/visual-eg.png differ diff --git a/slides/unused/l04-state.html b/slides/unused/l04-state.html new file mode 100644 index 0000000000000000000000000000000000000000..71a506b109bed2994b449d1bd5ff89866aae1b83 --- /dev/null +++ b/slides/unused/l04-state.html @@ -0,0 +1,376 @@ +--- +layout: presentation +title: Lab 04 Saving State in Android --Week 4, Thursday-- +description: Introduction to state management in Android +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +template: inverse + +# Interactivity Lab (Fall 2018) +## Week 3: State + +Instructor: TBD +_{email}_ + +Slides online: xxxTODO url + +--- +layout: false + +# Goals for Today + +--- +layout: false + +# Goals for Today + +- Understanding more about __Activities__ +- Learn about __State and Data Persistence__ +--- +template: inverse + +# Saving State +--- +layout: false + +.left-column[## Activity Lifecycle] +.right-column[] + + +--- + +.left-column[## When to save state? (1/3)] +.right-column[] + + +--- + +.left-column[## When to save state? (2/3)] +.right-column[] + +--- + +.left-column[# When to save state? (3/3)] +.right-column[ +- Activity `A` spawns Activity `B` + - E.g. Typing a Facebook post, then you select 'Add a Location' +] +-- +.right-column[ +- Android kills `A` to reclaim resources while the user is interacting with `B` +] +-- +.right-column[ +- User finishes with `B`, returns to `A` but the post is gone! +] +--- + +# Maintaining Activity State + +- We can fix it by saving the state in a `Bundle` before Android closes the `Activity` + +- We then restore the state when we return to the `Activity` later + +--- + +# Bundle it up + +- `Bundle`: A hash map (dictionary) of String keys to Primitive, Parcelable, Serializable values + +-- + +- Used to: + (1) Save/restore state + (2) Transfer data between different `Activity` in an app + +-- + +- Primitive are `int`, `float`, `boolean`, `double` (the usual suspects) + +-- + +- Custom objects that implement the `Serializable` or `Parcelable` interfaces + - You will need to make any custom classes that you want to save into a `Bundle` implement the `Parcelable` interface + +--- + +# Parcelable vs. Serializable + +- Both are for the same purpose of saving but `Serializable` makes implementations much easier... + +-- + +- **EXCEPT, .red[you should almost always use `Parcelable`]** + + +-- + +- Why? + - `Serializable` uses introspection ==> more memory, and CPU cycles + - `Parcelable` **is optimized for mobile devices** + +--- +## Implementing `Parcelable` (1/3) + +-- You are required to implement the following methods for the `Parcelable` interface: + +```java +public class MyPersonModel implements Parcelable { + private int mAge; + + // Required for the interface + public int describeContents() { + return 0; + } + + // Required for the interface + public void writeToParcel(Parcel out, int flags) { + out.writeInt(mAge); + } + // Continued on next slide... +``` + +--- + +## Implementing `Parcelable` (2/3) + +```java + + // Required for the interface + // CREATOR is an object that can remark + public static final Parcelable.Creator<MyPersonModel> CREATOR + = new Parcelable.Creator<MyPersonModel>() { + public MyPersonModel createFromParcel(Parcel in) { + return new MyPersonModel(in); + } + + public MyPersonModel[] newArray(int size) { + return new MyPersonModel[size]; + } + }; + + // Required for the interface + // Private constructor for Android to use with your CREATOR + private MyPersonModel(Parcel in) { + mAge = in.readInt(); + } +} +``` +--- + +## Implementing `Parcelable` (3/3) +- **Note**: .red[the order of the values when writing and reading them matters!] + + - When you write to the parcel using `write*()` methods in `writeToParcel`, + + - The write order __MUST BE__ the same as when you read them in the private constructor + +- For more details on implementation: + https://developer.android.com/reference/android/os/Parcelable.html + +--- + +# Saving in the Bundle + +- Methods for _saving_ items out of a Bundle + + - Ints: `putInt(String key, int value)` + + - Floats: `putFloat(String key, float value)` + + - Characters: `putChar(String key, char value)` + + - Strings: `putString(String key, String value)` + + - Serializable Objects: `putSerializable(String key, Serializable value)` + + - Parcelable Objects: `putParcelable(String key, Parcelable value)` + + - _Others in the documentation (e.g. Arrays, Bytes, etc).._ + https://developer.android.com/reference/android/os/Bundle.html + +--- +# Retrieving from the Bundle + +- Methods for getting items out of a Bundle + + - Ints: `getInt(String key)` + + - Floats: `getFloat(String key)` + + - Characters: `getChar(String key)` + + - Strings: `getString(String key)` + + - Serializable Objects: `getSerializable(String key)` + + - Parcelable Objects: `getParcelable(String key)` + + - _Others in the documentation_ (e.g. Arrays, Bytes, etc).. + https://developer.android.com/reference/android/os/Bundle.html +--- +## Saving Activity State (1/3) +- Android provides the `onSaveInstanceState(Bundle savedInstanceState)` callback method for you to save the state of an `Activity` + +```java +private static final USERNAME_KEY = "USER_NAME_KEY"; +private static final FIB_SUM_KEY = "FIB_SUM_KEY"; + +private int mFibSumValue; // Set to 10295 by our user +private String mUsername; // Set to "Michael" by our user + +@Override +public void onSaveInstanceState(Bundle outState) { + // Always call super - your super classes could be saving state for you! + super.onSaveInstanceState(outState); + + // Now + outState.putInt(FIB_SUM_KEY, mFibSumValue); + outState.putString(USERNAME_KEY, mUsername); +} +``` +--- + +## Restoring Activity State (1/4) + +- We saved, and now our user goes off to some other app + +-- + +- Android kills our `Activity` + +-- + +- Now how do we get the _saved_ state back? + +--- +## Restoring Activity State (2/4) + +- Two ways: + - `onCreate(Bundle savedInstanceState)` + - `onRestoreInstanceState(Bundle savedInstanceState)` + +--- +## Restoring Activity State (3/4) + +- Using `onCreate(Bundle savedInstanceState)`... + +```java +private static final USERNAME_KEY = "USER_NAME_KEY"; +private static final FIB_SUM_KEY = "FIB_SUM_KEY"; + +private int mFibSumValue = 0; +private String mUsername = null; + +@Override +protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.activity_main); + + mMainTextView = (TextView) findViewById(R.id.text_main_title); + mSumTextView = (TextView) findViewById(R.id.text_sum); + // Check if there was a previously saved state to restore to the user + // A non-null bundle means there was a state that was saved previously + // A bundle is just a Key-Value pairing - its a hash map :) + if (savedInstanceState != null) { + // There was a previous state - time to restore + mFibSumValue = savedInstanceState.getInt(FIB_SUM_KEY); + mUsername = savedInstanceState.getString(USERNAME_KEY); + } + updateMainText(); + updateFibSumText(); +} +``` + +--- + +## Restoring Activity State (4/4) + +- Using `onRestoreInstanceState(Bundle savedInstanceState)` + +```java +private static final USERNAME_KEY = "USER_NAME_KEY"; +private static final FIB_SUM_KEY = "FIB_SUM_KEY"; +private int mFibSumValue = 0; + +@Override +protected void onRestoreInstanceState(Bundle savedInstanceState) { + super.onRestoreInstanceState(savedInstanceState); + // Check if there was a previously saved state to restore to the user + if (savedInstanceState != null) { + // There was a previous state - time to restore + mFibSumValue = savedInstanceState.getInt(FIB_SUM_KEY); + mUsername = savedInstanceState.getString(USERNAME_KEY); + } + updateMainText(); + updateFibSumText(); +} +``` + +--- + +### Restoring in `onCreate` vs. `onRestoreInstanceState` +- `onRestoreInstanceState` + - Guarantees you will never have a non-null `Bundle` when called + - Lets subclasses override the behavior of restoring the state + +- `onCreate` + - Lets you focus on doing all of your initialization in one place + +- You decide what works best for you :) + +- http://stackoverflow.com/questions/36408776/using-oncreate-vs-onrestoreinstancestate + +--- + +## Exercise: Parcelable and Activity State + +- Pair up! + +- Download the base code here: + +- This app lets a user enter a name, age, and favorite food + +- It stores this info in a `PersonModel` + +- When the app is killed, this information needs to remain edited + +- Implement the `Parcelable` interface for the PersonModel + +- Then use the Activity's relevant state change callbacks to `PersonModel` when the phone rotates + +--- +### Some Notes about `onSaveInstanceState()` +- .red[Only use to save and restore session variables and the state of the UI] + +-- + + - Android won't always trigger the method + +-- + + - It is called when the `Activity` is closed and _expected_ to be restored soon + +-- + +- If your app crashes, or is closed, **the values in the bundle will disappear!** + +-- + +- If you use custom views, you can implement their version of `onSaveInstanceState`: + + Android will call `onSaveInstanceState()` every view in the layout + +--- +# Project Work: Add Save State + + +--- +# End of Slides + +--- + diff --git a/slides/unused/lofi.html b/slides/unused/lofi.html new file mode 100644 index 0000000000000000000000000000000000000000..67ae041a22de92c24ff14b2931efc4a1ceba3334 --- /dev/null +++ b/slides/unused/lofi.html @@ -0,0 +1,138 @@ +--- +layout: presentation +title: Layout --Week 2, Monday-- +description: Description of Layout +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Advanced Interaction Design + +Jennifer Mankoff +CSE 340 Spring 2019 +--- +layout:false + +background-image: url(img/paper.png) +[//]: # (Outline Slide) +# Today's goals +- Problems with lo-fi prototypes +- Understand user testing +- Ethical considerations in testing +- Collection and use of evidence +--- +.left-column[## Problems with low-fi prototypes?] +.right-column[ + +] +??? +-“Computer†inherently buggy +-Can’t get accurate time measurement +-Hard to implement some functionality: pulldowns, feedback, drag, viz … +-Won’t look like final product: sometimes hard to recognize components +-End-users can’t use by themselves: not in context of user’s work environment +-Couldn’t measure realistic I/O +-Lack of interactive feedback: e.g. button highlights +-“Computer†has to keep track of a lot of paper +-Users wouldn’t criticize UI +-Doesn’t map well to what will actual fit on the screen +-Couldn’t hold in your hand – different ergonomics from target device +-Some things could not be simulated (highlighting) +-Writing on paper not the same as writing on target device / Hard to draw well (-recognition of elements) +-Appearance unrealistic +-Dynamic components hard to simulate (pop-ups) +-Couldn’t give proper affordance that something wasn’t selectable +-Some items had to be static! +-Dragging hard to simulate +--- +.left-column[## High Fi testing] +.right-column[ +Must test & observe ideas with customers + + - Want to compare and contrast + - Want to get more realistic reactions + +Paper mock-ups don’t go far enough + - How would you show a drag operation? + - Not realistic of how interface will be used + +Approaches + - Can fake it -- good for early + - Can implement it +] +--- +.left-column[## Review: Testing Goals + +] +.right-column[ +Choose your focus + +Task design: +- Appropriate scope +- Predictable outcomes +- Elicits action +] +--- +.left-column[##Kinds of data we can collect?] +??? +Discuss +-- +.right-column[ +Video, Descriptions of behaviors, Notes +Can transcribe and analyze individual users +Can look for patterns across users +] +--- +.left-column[##Goal of data collection?] +??? +Discuss +-- +.right-column[ +What went well? +What went badly? +What matters (severe, common)? +] +--- +.left-column[##Qualitative data collection] +.right-column[ +Identify Critical Incidents (can be good or bad) + +Critical Incidents are Situations that: +- Provoke silence +- Provoke puzzlement +- Provoke user comments + +Capture using Critical Incident reports + +] +--- +.left-column[#Critical Incident Report] +.right-column[ +Name: System doesn’t treat “1†and “one†interchangeably +Severity: High/Medium/Low + Good/Bad +Frequency: (expected within system) +Category: +The user accomplishes a goal, but in a suboptimal way OR +The user expresses some negative affect or says something is a problem. +Evidence: Report FACTS! +What the user (s) said: “My destination is One Market Street†“This is not right, I don't think this is what I want to do.†(on “Multiple Search Results†page). + +What the user (s) did: After receiving the “no exact match†error message, the user hits the Back button to return to the trip planner and enters “1†instead of “One.†+ +What the system did: The system presented the user with a “Multiple Search Results†page, with the error message “We found some locations similar to your destination entry, but no exact match.†After the user returns to the trip planner and enters “1,†the system returns a bus route. +] +--- +.left-column[#Quantitative data] + +--- +layout: false + +.left-column[##Other Menus] +.right-column[ +Kurtenbach: +![:youtube Illustration of advantages of marking menus,dtH9GdFSQaw] +] + +--- diff --git a/slides/unused/menus2.html b/slides/unused/menus2.html new file mode 100644 index 0000000000000000000000000000000000000000..9c519a5bc5029b15097455969c849045d3d3348f --- /dev/null +++ b/slides/unused/menus2.html @@ -0,0 +1,585 @@ +--- +layout: presentation +title: Predicting and Evaluating Interactor Efficacy +description: Discussion of Theory and Collection of User Data for assessing Interactor Efficacy +class: middle, center, inverse +--- +layout:false + +# Why is selection (and testing) important .red[*] +.left-column50[ + + +] +.right-column50[ + +] + +.footnote[.red[*] [Washington Post Article](https://www.washingtonpost.com/news/morning-mix/wp/2018/01/16/that-was-no-wrong-button-in-hawaii-take-a-look/?utm_term=.1848969db923) +] +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Predicting and Evaluating Interaction Efficacy + +Jennifer Mankoff +CSE 340 Spring 2019 +--- +layout: false + +[//]: # (Outline Slide) +# Today's Learning goals +- Introduce key coding concepts for Menus Assignment +- **Using Properties of People To Predict Design Outcomes** +--- +.title[Comments on Feedback] +.body[ +Thanks for the feedback on the class! +- Quizzes show. Assignments are taking a long time. We will try to post information +about expected time, please reach out for help if you go beyond that + +- Start early (some people are starting ColorPicker today), so you can ask us for help with time to spare! + +] +??? +Feedback from Monday +--- +.title[Menus Assignment] +.body[ +Will compare pie menus to linear menus + +Demo +] + +--- +.left-column50[ +## Interface Structure + +<div class="mermaid"> +graph LR +FrameLayout --> ActionBar[ActionBar] +ActionBar --> TextView[TextView:Pie/Menu] +ActionBar --> Hamburger[Hamburger:Next Session/ClearCSV] +FrameLayout --> MainLayout[MainLayout] +MainLayout --> MenuExperimentView[MenuExperimentView] +MainLayout --> InstructionText[InstructionTextView] + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +class FrameLayout,ActionBar,MainLayout,TextView,Hamburger,MenuExperimentView,InstructionText normal +</div> +] + +.right-column50[ +## Inheritance Structure + +<div class="mermaid"> +graph LR +MenuExperimentView[MenuExperimentView] --> PieMenuView[PieMenuView] +MenuExperimentView --> NormalMenuView[NormalMenuView] +</div> + +] + +--- +.title[PPS for assignment] +.body[ +Implemented in MenuExperimentView + +<div class="mermaid"> +graph LR +S((.)) --> A((Start)) +A -- "Press?drawMenu;startTrial;startPoint=p" --> I((Inside)) +I -- "Release:endTrial;reset();onOptionSelected(trial)" --> E[End] +I -- "Drag:currentIndex=menuItem" --> I + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +class S invisible +class A start +class E finish +class I normal +</div> + + +Works in both Menus! +] + +--- +.title[Enums] +.body[ + +Group of named constants + +- Used for PPS in colorPicker (PPS States; Essential Geometry) + +- Used for PPS in Menu assignment *and* for experimental conditions + +- Easy to inspect if you want to (we do this in ExperimentSession) + +[Documentation](https://docs.oracle.com/javase/tutorial/java/javaOO/enum.html) +] + +--- +.title[Custom Listeners] +.body[ +- Used in ColorPicker and Menus. You'll use them lots +- Why create custom listeners? +] +-- +.body[ + - Let you execute code when your view's model has changed + - No other way to know that has happened + +] + +--- +.title[How to implement] +.body[ + +Custom View needs +- To define the custom interface +- To keep track of listeners +] +-- +.body[ +Anything using the view needs +- To implement the interface (specifically, the method that will be called) +- To register itself as a listener +] +--- +.title[Example Custom View -- ColorPicker: We setup the Custom View side for you] +.body[ +```java + /** Currently registered ColorListener instance or null. */ + protected ColorListener mColorListener; + + /** + * Class which defines a listener to be called when a new color is selected. + */ + public interface ColorListener { + void onColorSelected(@ColorInt int color); + } + + /** + * Registers a new listener for the color of this ColorPicker, or replaces + * any existing listener. + * + * @param colorListener New listener or null. + */ + public final void setColorListener(@Nullable ColorListener colorListener) { + mColorListener = colorListener; + } +``` +] +--- +.title[You need to do this yourself in Menus] + +.body[ + +```java + /** + * You need to create a listener interface so the application + * can be notified when a selection is made. This will trigger + * the move to the next trial. + */ + protected MenuExperimentViewSolution.MenuListener menuListener; +``` +] +--- +.title[Example Custom Listener -- ColorPicker: You need to implement +this] + +.body[ +`// TODO: Register callback to update {color,label} View when color changed.` + +What method do we call to register the callback? setColorListener + +What method is called when? + +What do we usually do in a callback? update application state +] +??? + Draw a time based diagram +--- +.title[Listener in Menus] +.body[ +`setMenuListener` needs to be implemented, should + +- record the result of that trial +- Update the experiment to show the next menu (or nothing if the +session is over) +- Update the instructions to the user +] +--- +.title[OnDraw changes to Canvas] +.body[ +Views `MATCH_PARENT` + +Makes drawing tricky + +Translate (like a parent view does for kids) + +] +--- +layout: false + +[//]: # (Outline Slide) +# Today's Learning goals +- Introduce key coding concepts for Menus Assignment +- **Using Properties of People To Predict Design Outcomes** +--- +.title[Fitts Law] +.body[ +Quiz Results to discuss +] + +--- +.title[Other laws we might use to make predictions about what will go better] +.body[ +- Fitts Law (compare distance and size; check for infinite size) +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- Gestalt Psychology (will they see it at all?) +- Errors (will they be reduced) +] + --- +#Which is better and which laws explain it? +.left-column50[ +#A Pie Menu + +] +.right-column50[ +#B Pull down Menu + +] +??? + +What analysis methods can we use to predict? + +- Fitts Law (compare distance and size; check for infinite size) +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- Gestalt Psychology (will they see it at all?) +- Errors (will they be reduced) + +--- +# Which is better and which law explains it? +.left-column50[ +#A Pie Menu + +] +.right-column50[ +#B Marking Menu +![:youtube Video assigned before class, 8c58bN6ajJ4?t=30] +] +??? + +- Fitts Law (compare distance and size; check for infinite size) +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - **Does someone have to 'check' something? More than once?** + - **Do they have to move? More than once** +- Gestalt Psychology (will they see it at all?) +- Errors (will they be reduced) +--- +.title[Which is better and which laws explain it?] + +.body[ +A: Tapping B: Crossing +![:youtube Video of using crossing for selection, kp2Zl4ONuik] +] + +??? + +- **Fitts Law (compare distance and size; check for infinite size)** +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- Gestalt Psychology (will they see it at all?) +- Errors (will they be reduced) + +--- +#Which is better and which laws explain it? +.left-column50[ +#A + +] +.right-column50[ +#B + + +] +??? + +- Fitts Law (compare distance and size; check for infinite size) +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- Gestalt Psychology (will they see it at all?) +- **Errors (will they be reduced)** + +--- +#Which is better and which laws explain it? + +.left-column50[ +#A + +] +.right-column50[ +#B + + +] +??? + +- Fitts Law (compare distance and size; check for infinite size) +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- **Gestalt Psychology (group?)** +- **Errors (will they be reduced)** +--- +# How do we actually **prove** such theories? + +-- +# Collect Data! +--- + +.left-column[##Kinds of data we can collect?] +??? +Discuss +-- +.right-column[ +- Video +- Timing/Errors +- Descriptions of behaviors +- Notes +- Can transcribe and analyze interviews with users +- Can look for patterns across users +] +--- +.left-column[##Qualitative data collection to test theory] +.right-column[ +Identify Critical Incidents (can be good or bad) + +Critical Incidents are Situations that: +- Provoke silence +- Provoke puzzlement +- Provoke user comments + +Capture using Critical Incident reports + +] +--- +.left-column[##Quantitative data collection to test theories] +.right-column[ +Identify Hypothesis + +Hypothesis is +- Relevant +- Testable + +Capture data that proves or disproves hypothesis + +] +--- +# How do we prove our theories? Hypothesis + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis((Hypothesis)) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; + + +class S invisible +class Hypothesis start +</div> + + +--- +# How do we prove our theories? Method + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis((Hypothesis)) +Hypothesis -- "Study Design" --> Method((Method)) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; + + +class S invisible +class Hypothesis start +class Method normal +</div> + + +--- +# How do we prove our theories? Data + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis((Hypothesis)) +Hypothesis -- "Study Design" --> Method((Method)) +Method -- "Run Study" --> Data((Data)) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; + + +class S invisible +class Hypothesis start +class Method,Data normal +</div> +--- +# How do we prove our theories? Analysis + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis((Hypothesis)) +Hypothesis -- "Study Design" --> Method((Method)) +Method -- "Run Study" --> Data((Data)) +Data -- "Clean and Prep" --> Analysis((Analysis)) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; + + +class S invisible +class Hypothesis start +class Method,Data,Analysis normal +</div> + +--- +# How do we prove our theories? Conclusions + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis((Hypothesis)) +Hypothesis -- "Study Design" --> Method((Method)) +Method -- "Run Study" --> Data((Data)) +Data -- "Clean and Prep" --> Analysis((Analysis)) +Analysis --> Conclusions((Conclusions)) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; +linkStyle 4 stroke-width:4px; + + +class S invisible +class Hypothesis,Conclusions start +class Method,Data,Analysis normal +</div> + +.left-column50[ +#A + +] +.right-column50[ +#B + + +] + +??? +Hypothesis: Errors (will they be reduced) +Method:?? +Data:?? +Analysis?? +Conclusions?? + +--- +# How do we prove our theories? Conclusions + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis((Hypothesis)) +Hypothesis -- "Study Design" --> Method((Method)) +Method -- "Run Study" --> Data((Data)) +Data -- "Clean and Prep" --> Analysis((Analysis)) +Analysis --> Conclusions((Conclusions)) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; +linkStyle 4 stroke-width:4px; + + +class S invisible +class Hypothesis,Conclusions start +class Method,Data,Analysis normal +</div> + +.left-column50[ +#A Pie Menu + +] +.right-column50[ +#B Pull down Menu + +] +??? + +Hypothesis: Errors will be reduced; +Hypothesis: Motion will be faster due to low level motor things +Hypothesis: fewer cognitive checks needed +Method:?? +Data:?? +Analysis?? +Conclusions?? diff --git a/slides/unused/midterm.html b/slides/unused/midterm.html new file mode 100644 index 0000000000000000000000000000000000000000..23b1bc0a437338e6db71f3130ed4aeda9394370c --- /dev/null +++ b/slides/unused/midterm.html @@ -0,0 +1,85 @@ +--- +layout: presentation +title: Midterm Recap +description: Discussion of some Midterm Questions +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Midterm Recap + +Jennifer Mankoff + +CSE 340 Spring 2019 +--- +layout: false + +.title[Midterm Histogram] +.body[ + + +] +--- + +.title[Question Breakdown] +.body[ + +<div class="mermaid"> +</div>] +--- + +.title[Sampling of questions] +.body[ +Your boss has read up on Fitts’ law, and wants to put all the controls +at the bottom of the screen so they have infinite width and are easier +to click on. However, your colleague argues that they should be in a +pie menu which should pop up wherever the user presses instead. + +- D and W in each case +- Which is better? +- Time savings for eyes free (HARD!) +] +??? + +--- +.title[Given an interface draw an interactor hierarchy] +.body[ +What defines an interactor hierarchy? + +] + +??? +has a root +only has views in it +is a tree +-- +.body[ +What is damaged? Everything under the damaged region +] +--- +.title[Callbacks] +.body[ + +You have registered your app to listen for OffRoute callbacks (when the driver’s vehicle deviates from the route, onOffRoute() will be called). Correctly label each method call, based on what object (Application or View) calls it, and where you would put the code to implement it. + + | | Called by application or view? | Implemented in application or view? | + |-------------------------|--------------------------------|-------------------------------------| + | onOffRoute() | | | + | setOnOffRouteListiner() | | | + +] + +??? +view -- app +app -- view +--- +.title[Draw a PPS] +.body[ +Let's do it for a button +] +--- + + + diff --git a/slides/unused/paper.html b/slides/unused/paper.html new file mode 100644 index 0000000000000000000000000000000000000000..9a66d11245cfe4ed14ee353afeb9999ec1c6aadb --- /dev/null +++ b/slides/unused/paper.html @@ -0,0 +1,479 @@ +--- +layout: presentation +title: Layout --Week 2, Monday-- +description: Description of Layout +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# XXX need to cut back on these slides significantly to focus on exercise... +--- +layout:false + +# Marc Rettig’s Problems with Hi-Fi Prototypes + +Can you list some? +??? +Hi-Fi prototypes take too long to build and change + +Reviewers and testers tend to comment on detailed, low-level issues rather than big picture + +Developers resist change + +A prototype in software can set expectations that are hard to change + +A single bug in a hi-fi prototype can bring a test to a complete halt + +--- +template:inverse + +# Quiz +--- +# Paper Prototyping + + + +Jennifer Mankoff +CSE 340 Spring 2019 + +--- +# Example of Paper Prototyping + +![:youtube Paper Prototyping of video game,9wQkLthhHKA] + +--- +layout:false + +.left-column[ + +Marc Retting: Prototyping for Tiny Fingers. CACM 1994] + +.right-column[Paper prototyping is potentially a breakthrough idea for +organizations that have never tried it, since it allows you to +.red[demonstrate the behavior of an interface very early] in +development, and .red[test designs with real users]...] +-- +.right-column[ +It is .red[fast], it .red[brings results early] in development (when it is +relatively cheap to make changes), and allows a team to +.red[try far more ideas] than they could with high-fidelity +prototypes. Lo-fi prototyping +helps you apply Fudd's first law of creativity: 'To get a good idea, +get lots of ideas.' +] + +--- +background-image: url(img/background-paper.png) + +.left-column[## What is Paper Prototyping?] +-- + +.right-column[ +Fast and cheap way to create and test user interfaces] + +-- + +.right-column[ +It's equivalent to storyboarding in the film industry +] + +-- + +.right-column[ +Focuses on function, less on form +] +-- + +.right-column[ +All you need: pen, paper (and possibly scissors/tape) +] + +--- +.left-column[Paper Prototypes + + +] +.right-column[ +Show what an interface … +- looks like (sort of) +- flows like (from screen to screen) +- interacts like (for some things) + +Should be… +- Fast to build +- Lo-fi or hi-fi + +Support … +- Iteration +- Ideation +- User testing +] +--- +.left-column[Paper Prototypes + +] +.right-column[ +Can uncover what a user ... +- fill in +<br> +<br> +<br> +Cannot uncover ... +- fill in +] +??? + +can uncover: +- Notices +- Prefers +- Finds Accessible +- Knows +cannot uncover: +Interaction +Load Times +Context aware (hard) +--- +## Today's learning goals + +Why paper prototypes? + +How to make paper prototypes + +Hands-on experience rapidly making a paper prototype + +Understand what paper prototyping is and isn’t good for + +Begin to understand the role of study design in prototyping + +--- +template:inverse + +# More Examples +--- +layout:false + +.left-column[## Example Prototype Dimensions + +There are other spectrums, but <br> these three are <br> very important +] +.middle-column[ +## Faster Slower.red[*] + + +The visual look of your prototype is its most salient dimension. If not properly selected, it can sidetrack prototype reviews. Go hi-fi too soon and users will focus on aesthetics like color and font choice, which is not appropriate in early stages. +] + .small[.red[*]Source: [Smashing Magazine](http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/)] +--- +.left-column[##Visual Dimension + +Prototyping the Nintendo Wii UI .red[*]] + +.right-column[ + + +When a prototype looks like an early design, your users will be more comfortable providing candid—and often more critical—feedback + +] + +.small.red[[Source: Gamustra](http://www.gamasutra.com/view/news/181321/Sometimes_paper_is_your_best_prototyping_tool__even_if_youre_Nintendo.php#.UK95NofAd8G)] + +??? +http://www.gamasutra.com/view/news/181321/Sometimes_paper_is_your_best_prototyping_tool__even_if_youre_Nintendo.php#.UK95NofAd8G + +'Oh, it's made out of cardboard! (laughs)'- Nintendo president Satoru +Iwata marvels atthe simplicity of an early prototype of the Wii U's +tablet controller (pictured above).Nintendo is banking on its +Miiverse -- a sort of mini-Facebook with a layer of console game -- + -- makeup -- to draw players to its new Wii U console. It was +a new concept, running on a new type of game hardware with the +tablet-like GamePad. + +Nintendo contracted fellow Kyoto social media +company Hatena Co. Ltd. to do a lot of the Miiverse design work. The +Wii U's tablet-infused GamePad hadn't been finalized yet, but Hatena +UI designer Kazuyuki Motoyama felt that he needed to know how the +Miiverse would feel in his hands, so the company developed the basic +feel of it with this simple cardboard prototype. + +'We wouldn't know how it felt unless we could actually hold it, but +since we didn't have one, the only thing to do was make one,' Motoyama +explains. 'In the middle of the night, I cut pieces of cardboard and +glued them together.' + +Ithink there's a game development lesson here. You can prototype just +about anything with the tools available to you, on just about any +budget. Whether it's paper or an HTML website or even a free copy of +UDK or Unity, you shouldn't let available technology hold you back +from trying new ideas. + +If paper prototyping is good enough for a feature embedded in millions of Nintendo-made consoles, it's probably good enough for you too. + +--- +.left-column[## Example Prototype Dimensions + +There are other spectrums, but these three are very important +] +.middle-column[ +## Faster Slower.red[*] + + + + + +Does the prototype reveal how the solution will work (static) or does +it appear to be fully functional and respond to user input +(interactive)? + +] + +.small[.red[*][Source: Smashing Magazine](http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/)] + +--- +.left-column[##Functional Dimension + +Prototyping the Nintendo Wii UI .red[*]] + +.right-column[ + + +Here the screen is made of paper. The controller is made of +cardboard. But the design is interactive: The user clicks on a +button and the facilitator updates the resulting paper interface + +] + +.small[.red[*][Source: Gamustra](http://www.gamasutra.com/view/news/181321/Sometimes_paper_is_your_best_prototyping_tool__even_if_youre_Nintendo.php#.UK95NofAd8G)] +--- + + +.left-column[## Example Prototype Dimensions + +There are other spectrums, but these three are very important +] +.middle-column[ +## Faster Slower.red[*] + + + + + + + +Displaying content? Early on, just squiggly lines, then maybe dummy +text (though this can distract—be careful), then actual content.] +] +--- +.left-column[##'Point of need' Computing .red[*]] +.right-column[ + + + +.red[*] +Supporting knowledge workers beyond the desktop with +PALPlates. Mankoff, Jennifer, and Bill Schilit. CHI 1997. +] +--- +# Prototyping Concerns +.left-column[## Choosing your focus] +.right-column[ + +] +--- +# Prototyping Concerns +.left-column[ +### Task Design +- Appropriate scope +- Predictable outcomes +- Elicits action +] +-- +.middle-column[ +### Prototype Design + +Each card represents one sub-screen/task element +- Use a photocopier to make many version +- Use post-its and notecards for different regions of the screen + +Simple is great +] +--- +# Prototyping Concerns +.left-column[## Choosing your focus + +### Task Design +- Appropriate scope +- Predictable outcomes +- Elicits action +] +.middle-column[ +### Prototype Design + +Each card represents one sub-screen/task element +- Use a photocopier to make many version +- Use post-its and notecards for different regions of the screen + +Simple is great +] +.right-column[ +### Roles +- Real users +- An observer or video camera +- A human computer +] + +??? +Computer should be mostly silent + +Accurate + +Wait for users to act + +--- +template:inverse + +#Importance of Testing .red[Multiple] Prototypes + +--- +layout:false +.left-column[##Testing Multiple Prototypes +<br> +<br> +Wiklund Thurrot & Dumas<br> +Human Factors Society 1992 +] +.right-column[ +We have found subjects reluctant to be critical of designs when they are asked to assign a rating to the design. In our usability tests, we see the same phenomenon even when we encourage subjects to be critical. +] +-- +.right-column[ +We speculate that the test subjects feel that giving a low rating to a +product gives the impression that they are “negative†people, that the +ratings reflect negatively on their ability to use computer-based +technology, that some of the blame for a product’s poor performance +falls on them, or that they don’t want to hurt the feelings of the +person conducting the test. +] + +--- +template:inverse + +#What are some strategies to combat this problem? +--- +layout:false + +.left-column[##Eliciting Criticism] +.right-column[ +Test low-fidelity prototypes that look unfinished + +Have independent testers (testers not invested in outcome) + +Show multiple prototypes/products & have them compare +] +--- +template: inverse +# Exercise +--- +layout: false +## Exercise +- Brainstorming - a To Do List app (7 mins) + +-- + +- Paper Prototype the app in groups of 3 (20 mins) + +-- + +- Come up with Task Scenarios (5 min) + +-- + +- User Test with 2 students from another group (15 min) + +-- + +- Discussion (10 min) + +-- + +Things we would add if we had time! +- Refine your Prototype (10 min) + +-- + +- User Test with 1 student (10 min) + +--- + +## Discussion + +-- + +- What can and can't you learn from it? + +-- + +- Why is this hard for mobile applications? + +-- + + - Context-aware Applications? + +-- + +- What other low-fi techniques can we use? +--- +Sources: +Storyboards, Paper Prototypes and Mockups +Scott Klemmer’s HCI MOOC +https://www.youtube.com/watch?v=z4glsttyxw8 + +Paper Prototyping as a Usability Testing Technique +https://usabilitygeek.com/paper-prototyping-as-a-usability-testing-technique/ + + +Also useful: wikipedia.org/wiki/Paper_prototyping +Google image search: ‘paper prototyping’ + + + +Book: Prototyping: A practitioner’s guide +https://www.amazon.com/Prototyping-Practitioners-Todd-Zaki-Warfel/dp/1933820217 + +Book: Paper Prototyping +https://www.amazon.com/Paper-Prototyping-Interfaces-Interactive-Technologies/dp/1558608702 + + +Prototyping for tiny fingers. Rettig, Marc. Communications of the +ACM 37.4 (1994 + +Supporting knowledge workers beyond the desktop with +PALPlates. Mankoff, Jennifer, and Bill Schilit. CHI 1997. + +MoveableMaker: facilitating the design, generation, and assembly of +moveable papercraft. Annett, Michelle, et al., UIST 2015. + + +--- +# Unused + +--- + Example 1: Travellr + +![:youtube Paper Prototyping of travel app,_5FGeSQ7DBU] + +Example 2: Game (also video prototyping...) +![:youtube Paper Prototyping of video game,x48qOA2Z_xQ] + +--- +# Complex has its place too .red[*] + +![:youtube Paper Prototyping of video game,v=0yh-omblujQ] + +[Long video](https://www.youtube.com/watch?v=eujk284JYOE) and [Full talk](https://www.youtube.com/watch?v=NO4Fml1UZA4) + +.red[*] Annett, Michelle, et al. MoveableMaker: facilitating the +design, generation, and assembly of moveable papercraft. Proceedings +of the 28th Annual ACM Symposium on User Interface Software & +Technology. ACM, 2015. diff --git a/slides/unused/sensing-assignment.html b/slides/unused/sensing-assignment.html new file mode 100644 index 0000000000000000000000000000000000000000..f59f0f0e0b7cf5db60adfa1faf77b12fa301b74a --- /dev/null +++ b/slides/unused/sensing-assignment.html @@ -0,0 +1,236 @@ +--- +layout: presentation +title: Sensing Implementation +description: Implementation of phone sensing +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Sensing with your Phone: Implementation + +Jennifer Mankoff + +CSE 340 Spring 2019 +--- +layout: false + +.title[Review: Android Awareness API] +.body[ +Link to overview [Awareness API](https://developers.google.com/awareness/) + +Unfortunately much of the documentation online is not up to date (last +updated in 2017) +] + +??? +--- +.title[Non-programming requirements] +.body[ +Emulator requirements: Play store installed +- Makes it easier to get your app working + +Permission requirements: Correct API installed + +Follow the “[Quick +Guide](https://developers.google.com/places/web-service/get-api-key)†+- Click on 'Get Started' +- Use your class repo name for your app name (something like +cse340-LaughingChipmunks) -- competing with all other google apps for namespace +- You may need a billing account. +- DONT LOSE YOUR API KEY or you'll have to start over. +] +--- +.title[Which APIs to enable?] +.body[ + +Minimum requirements +- Awareness API (should be turned on by default +- [See APis enabled](https://console.developers.google.com/apis/) +] + +--- +.title[Using your API key] +.body[ +When you have your API key, go to your android manifest and paste it +in between the quotation marks labeled API_KEY. + +Once you do that, as +described in the spec, you'll need to accept permissions and update +play when you run your code. + +```xml + + <meta-data + android:name="com.google.android.awareness.API_KEY" + android:value="YOUR_KEY_HERE"/> + <meta-data + android:name="com.google.android.geo.API_KEY" + android:value="YOUR_KEY_HERE"/> +``` + +] +--- +.title[Review: Snapshots] +.body[ +Current info + +Requires a single callback: +`onSnapshot(Response response)` + +Setup the callback in MainActivity (pass in the type of activity) +`setSnapshotListener(Awareness.getSnapshotClient(this).getDetectedActivity(),` +`new ActivitySnapshotListener(mUpdate, mResources));` + +Parse the response and act on it in onSnapshot +] +--- +.title[What are Snapshots useful for?] +.body[ +Debugging + +Anything else? + +] +--- +.title[Review: [Fences](https://developers.google.com/awareness/)] +.body[ +Conditional data + +3 callbacks: during, starting, stopping + +Setup in `MainActivity.java setupFenceListeners()` +```java +mActivityFenceListener = new ActivityFenceListener( + // during + DetectedActivityFence.during(DetectedActivity.WALKING), + // starting + DetectedActivityFence.starting(DetectedActivity.WALKING), + // stopping + DetectedActivityFence.stopping(DetectedActivity.WALKING), + this, this, mUpdate); +``` +] +??? +What might we use for a location fence? +Headphone fence? +... +--- +.title[Setting up a fence in `MainActivity.java`] +.body[ +The rest is pretty boilerplate for everything + +```java +if (((Checkable) v).isChecked() && +* ensureFineLocationAccess()) { + mActivityFenceListener.register(); + } else { + mActivityFenceListener.unregister(); + } +``` +] +.footnote[ +`ensureFineLocationAccess()` needs to be checked before anything +that uses location, e.g. weather] + +--- +.title[Setting up a fence in `MainActivity.java`] +.body[ + +The rest is pretty boilerplate for everything +```java +if (((Checkable) v).isChecked() && + ensureFineLocationAccess()) { + mActivityFenceListener.register(); + } else { + mActivityFenceListener.unregister(); + } +``` +] +.footnote[These are because this is asynchronous] +--- +.title[Using Places] +.body[ +Shows you what is nearby + +```java +//In MainActivity: +setSnapshotListener( + Awareness.getSnapshotClient(this).getPlaces(), + new PlacesSnapshotListener(mUpdate, mResources))); +//In PlacesSnapshotListener + +public void onSnapshot(PlacesResponse response) { + List<PlaceLikelihood> placeLikelihood = response.getPlaceLikelihoods(); + if (placeLikelihood != null && !placeLikelihood.isEmpty()) { + for (PlaceLikelihood likelihood : placeLikelihood) { + addPlace(likelihood.getPlace().getName().toString(), likelihood.getLikelihood()); + } + } + + + mUpdate.prependText(placeLikelihood.toString()); + } +``` +] +--- +.title[Work on adding a snapshot] +.body[ +Make sure to download Oreo 27 for emulation (Nougat 25 won't work) + +When you run your code, you'll need to update Play store & set permissions + +Try to have the base code running by end of class (e.g. everything installed; + api keys correct) +You can get additional help in office hours +] +--- +.title[Context Aware Computing Assignment] +.body[ +Pick one type of context +- attach for later +- automatically execute based on context +- present info based on context +] +--- +.title[System Usability Scale] +.body[ +1) I think that I would like to keep using this app. + +2) I found the system unnecessarily complex. + +3) I thought the system was easy to use. + +4) I found the use of implicit and explicit data in this app to be well integrated. + +5) I thought there was too much inconsistency in this system. + +6) I would imagine that most people would learn to use this system very quickly. + +7) I found the system very cumbersome to use. + +8) I felt very confident using the system. +] +--- +.title[Group Project] +.body[ +Expectations: +- Work together to decide on a focus +- Implement your App +- Make a video +] +--- +.title[More Expectations:] +.body[ +Divide and conquer ok for video, interface implementation, + context-aware implementation + +Should not look at sensing code by others until yours has been + turned in + +Group participation will be assessed +] +??? +Questions? +--- diff --git a/slides/unused/sensing.html b/slides/unused/sensing.html new file mode 100644 index 0000000000000000000000000000000000000000..5a1790e86793cf7d03ab8931cdee540f95f9bbeb --- /dev/null +++ b/slides/unused/sensing.html @@ -0,0 +1,129 @@ +--- +layout: presentation +title: Sensing with your Phone +description: Discussion of practical side of phone sensing +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Sensing with your Phone + +Jennifer Mankoff + +CSE 340 Spring 2019 +--- +layout: false + +# Types of Input + +- Not just touches: clicks, key presses + +-- + +- *Sensors* - GPS, IMU/Accelerometer, humidity, temperature, etc + +??? +Sampled or event based? +-- + - `Managers` (e.g. `LocationManager`) let us create and register a listener + + - Listeners can receive updates at different intervals, etc. + + - Some Sensor-specific settings + [https://source.android.com/devices/sensors/sensor-types.html](https://source.android.com/devices/sensors/sensor-types.html) + +--- +# Other Kinds of Input + +- Microphone + +- Camera + +- Multi-touch + +- Connected Devices? +--- +.title[ +Aware Framework] +.body[ + +[Aware's Many Sensors](https://awareframework.com/sensors/) +] +??? +AWARE is an Android framework dedicated to instrument, infer, log and share mobile context information, for application developers, researchers and smartphone users. AWARE captures hardware-, software-, and human-based data. The data is then analyzed using AWARE plugins. They transform data into information you can understand. +--- +.title[Easy to collect data] +.body[ + +] +--- +.title[We'll implement our own version] +.body[ +Much Simpler + +Android only + +Uses Android's +[Task](https://developer.android.com/reference/com/google/android/play/core/tasks/Task) +API because this may be asynchronous. We do our best to hide this for +you + +Uses Google's [Awareness +API](https://developers.google.com/awareness/) to provide you access +to data +] + +??? +--- +.title[Snapshots] +.body[ +Current info + +Requires a single callback: +`onSnapshot(Response response)` + +Parse the response and act on it! + +`WeatherSnapshotActivity` example +] +--- +.title[Subclass ContextSnapshotActivity] +.body[ + You'll create activities for multiple sensors +] +--- +.title[[Fences](https://developers.google.com/awareness/)] +.body[ +Conditional data + +3 callbacks: during, starting, stopping + +From the android docs: +``` +if (TextUtils.equals(fenceState.getFenceKey(), "headphoneFenceKey")) { + switch(fenceState.getCurrentState()) { + case FenceState.TRUE: + Log.i(TAG, "Headphones are plugged in."); + break; + case FenceState.FALSE: + Log.i(TAG, "Headphones are NOT plugged in."); + break; + case FenceState.UNKNOWN: + Log.i(TAG, "The headphone fence is in an unknown state."); + break; + } + } +``` +] +--- +.title[Subclass FenceActivity] +.body[ +Again you'll create for multiple sensors +] +--- +.title[Simulation Demo] +.body[ +] +--- diff --git a/slides/unused/sensing2.html b/slides/unused/sensing2.html new file mode 100644 index 0000000000000000000000000000000000000000..9a5e82ecfe852f6e8feb84fd1e66e77e9f88f97d --- /dev/null +++ b/slides/unused/sensing2.html @@ -0,0 +1,31 @@ + +<!-- --- +# Types of Input + +- Not just touches, clicks, key presses + +-- + +- *Sensors* - GPS, IMU/Accelerometer, humidity, temperature, etc + +??? +Sampled or event based? +-- + - `Managers` (e.g. `LocationManager`) let us create and register a listener + + - Listeners can receive updates at different intervals, etc. + + - Some Sensor-specific settings + https://source.android.com/devices/sensors/sensor-types.html + +--- +# Other Kinds of Input + +- Microphone + +- Camera + +- Multi-touch + +- Connected Devices? --> +--- diff --git a/slides/unused/state.html b/slides/unused/state.html new file mode 100644 index 0000000000000000000000000000000000000000..aceb78df0dc2fc5451c94352c3a323ad861ea2e8 --- /dev/null +++ b/slides/unused/state.html @@ -0,0 +1,505 @@ +--- +layout: presentation +title: Capturing Behavior through State +description: Description the use of propositional production systems to describe component behavior (interaction techniques) +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +layout: false + +.title[# Hall of Fame/Shame] +.body[ + +] + +--- +class: inverse, center, middle + +.title[# From Events to Behavior] +.body[ +Jennifer Mankoff +CSE 340 Spring 2019 +] +--- + +[//]: # (Outline Slide) +.title[# Today's goals] +.body[ +Review / Quiz + +Introduce interaction techniques + +Discuss use of Propositional Production Systems in implementing them + +Try creating a PPS +] +--- +.title[What is part of an event?] +.body[ + +] +--- +.title[When is focus used?] +.body[ +] +--- +.left-column[ +## Interaction Technique] +.right-column[ +A method for carrying out a specific interactive task + +Example: enter a number in a range + +could use... +] +??? +have the class try to think of examples +-- +.right-column[ +- (simulated) slider +- (simulated) knob +- type in a number (text edit box) + +Each is a different interaction technique +] +--- +.left-column[ +## Example: Specify the end points for a line +] +.right-column[ +Could just specify two endpoints – click, click +- not good: no affordance, <br>no feedback (/ feedforward) + +Better feedback is to use “rubber banding†+- stretch out the line as you drag +- at all times, shows where you would end up <br> if you “let go†+] +??? +Importance of feedback vs application callback +--- +.left-column[ +## Implementing rubber banding] + +.large.right-column[ +``` +Accept the press for endpoint P1; P2 = P1; +Draw line P1-P2; +Repeat + Erase line P1-P2; + P2 = current_position(); Draw line P1-P2; +Until release event; +Act on line input; +``` +] +??? +Discuss! +Not event based +Not in the basic event/redraw loop +Potentially locks up the system +--- +.left-column[ +## Implementing rubber banding] +.right-column[ +Need to get around this loop <br> absolute min of 5 times / sec + +– 10 times better + +– more would be better +] +??? +aside -- why 5-10 times per second? + +--- +.left-column[## Event driven code] +.right-column[ +Needs to respond to events as they arrive + +Needs to maintain state between events + +] + +--- +.left-column[ +# Solution: Propositional Production Systems] +.right-column[ + +<div class="mermaid"> +graph LR +S((.)) --> A((A)) +A -- "Event/Callback()" --> B((B)) +B -- "Event2/Callback2()" --> C[C] + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; + + +class S invisible +class A start +class C finish +class B normal +</div> + +Special circle start state <br> (arrow going into it) + +Special circle for 'final state' <br> (really means 'reset to start') + +Transitions represent actions (callbacks). + +] +??? + +--- +.left-column[ +# PPS Example: Rubber Banding + + +Compare to previous implementation: + +``` +Accept the press for endpoint P1; P2 = P1; +Draw line P1-P2; +Repeat + Erase line P1-P2; + P2 = current_position(); Draw line P1-P2; +Until release event; +Act on line input; +``` +] +.right-column[ + +- Determine the Events (triggers) + +- Determine the States + +- Determine the Actions + +- Determine the Queries +] +--- +.left-column[ +# PPS Example: Rubber Banding + +Compare to previous implementation: + +``` +Accept the press for endpoint P1; P2 = P1; +Draw line P1-P2; +Repeat + Erase line P1-P2; + P2 = current_position(); Draw line P1-P2; +Until release event; +Act on line input; +``` +] +.right-column[ + +<div class="mermaid"> +graph LR +S((.)) --> A((Start)) +A -- "Mouse Down:?inView/Start_Line()" --> B((Drawing)) +B -- "Mouse_Move:?inView/Update()" --> B +B -- "Mouse_Release:?inView/Finish_Line()" --> C[Finished] + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; + +class S invisible +class A start +class C finish +class B normal +</div> + +] + +??? + Means: When you are in Start State, and a Mouse Down event arrives, do + the action ```Start_line()``` and go to Drawing State. Then update + the line end point position every time the mouse moves. Finally, + when it releases (Mouse Release event), finish the line (at this + stage a callback to the application might be appropriate) + +- translates input sequence into action! +- How could we provide a better affordance? +- Does it matter if we are using a mouse or a touch screen? + +--- + +.left-column[##Summary] +.right-column[ +State machines are very good (for this job) but do have limits + +State machines don't handle independent actions very well (state explosion) + +Mostly useful for smaller things + +- Great for individual components +- Not so great for whole dialogs + +Path of least resistance is rigid sequencing + Ask: is this good for what I am doing? + +] +??? +xxx TODO decide whether to keep +xxx TODO decide how to end this deck and/or what other material needs +to be covered +--- +.left-column[## Guards on transitions] +.right-column[ +Sometimes also use “guards†--> **Propositional Production System** + +- predicate (Boolean expr) before event + +- adds extra conditions required to fire + +- typical notation: pred : event / action + +- e.g. button.enabled: press-inside / A + +Note: FSM augmented with guards is Turing complete +] +--- + +.left-column[ +## PPS for Button? + + + +] +.right-column[ +- Determine the Events (triggers) + +- Determine the States + +- Determine the Queries (essential geometry, context) + +- Determine the Actions +] + +??? +What constitutes an “event†varies + +- may be just low level events, or +- higher level (synthesized) events +- e.g. region-enter, press-inside + +What is missing? Query fields + +--- +.left-column[ +## Facebook Button Solution + +] +-- +.right-column[ + +Press:?inside => highlight(), start_animation(), small, active<br> +AnimateStep ==> update(), active<br> +AnimateFinish ==> !small, active<br> +Release:inside,small => unhighlight(), exit()<br> +Release:inside,!small => add_to_chat(), small, unhighlight(), +exit()<br> + +__rest is unknowable from this animation__ + +<div class="mermaid"> + graph LR + S((.)) --> A((Start)) + A -- "Press:?inside/highlight(), start_animation()" --> B((Active)) + B -- "AnimateStep,update()" --> B + B -- "AnimateFinish,!small"--> B + B -- "Release,inside:small, unhighlight" -->D(End) + B -- "Release,inside:!small,add_to_chat(),unhighlight()" --> D + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; +linkStyle 4 stroke-width:4px; +linkStyle 5 stroke-width:4px; + +class S invisible +class A start +class D finish +class B normal +</div> + +] + +--- +.left-column[ +## When to use PPSs +] +.right-column[ + +- You're probably already using them, just not intentionally (and maybe +less well as a result) +- PPSs are a good way to do control flow in event driven systems + +Can do (formal or informal) analysis +- are all possible inputs (e.g. errors) handled from each state +- what are next legal inputs: can use to enable / disable +Can be automated based on higher level specification +] + +--- +.left-column[ +## Implementation of PPS +] + +??? +``` +fsm_transition(state, evt) switch (state) + +..case 0: // case for each state + +...switch(evt.kind) + +...case loc_move: // transition event + +....do all the transition actions +....state = 42 // set the new state + +..case 1: // case for next state switch (evt.kind) ... + +return state; +``` + +--- +layout: false + +.title[Exercise: Build your own color picker] +.body[ +Learning goals: +- Create non-rectangle interactor +- Use a state machine to manage feedback +- Callbacks: React to events +- Should handle error cases appropriately + +Android learning goals: +- Save app state +- Handle touch input properly +- Understand app lifecycle +] +??? + +--- +.title[Color Picker PPS ] + +.body[Work in pairs on this] + +--- +.left-column[] + +.right-column[ +## Another example: Pull-down Menu + +How do we manage the drop-down behavior? + +FSM controller? + +] + +-- +.right-column[ +Behavior: + +- Body pulls down on press (in arrow) + +- Body stays down until release + +- Items highlighted while cursor is over them +] +--- + + +<div class="mermaid"> + graph LR + A((Start)) -- "Dn-inside-Top/Drop()" --> N((NotIn)) + N -- "Enter-Item1/Highlight(1)" --> I((In1)) + I -- "Enter-Item2/Highlight(2)" --> II + N -- "Enter-Item2/Highlight(2)" --> II((In2)) + I -- "Exit-Item1/Highlight(none)" --> N + II -- "Enter-Item1/Highlight(1)" --> I + I -- "Up/Fire-Item(1)" -->E((End)) + II -- "Up/Fire-Item(2)"-->E((End)) + II -- "Exit-Item2/Highlight(none)" --> N + N -- "Up/UnDrop()" --> F((End)) +</div> + +--- +.title[ Summary] +.body[ +- Interaction technique: involves input AND feedback +- Propositional Production Systems let us implement feedback + - event driven + - actions on **transitions** + - guards (conditionals) on **transitions** +] +--- +#End of Slides / Old material below here +--- +.left-column[# Discussion of state explosion] +.right-column[ +Take a button, and a control key (can you draw the state machine for +the control key?) +] +-- +.right-column[Combine them (cross product)] + + +<div class="mermaid" id="simplestate"> + graph TD + A(( )) --> B(( )) + B --> A +</div> + +<div class="mermaid"> + graph LR + A(( )) --> B(( )) + B --> C(( )) + C --> B + C --> D(( )) + B --> End(( )) +</div> + +--- +.left-column[# Cross product of state diagrams] +.right-column[ +Replicate the larger one + +Once for every state in the smaller one! + +At transitions between corresponding states + +Correct semantics + - Eliminate impossible states + - Merge similar ones + + +Now add another independent machine (shift key?) + +] +??? +Totally out of hand -- combinatorical explosion! diff --git a/slides/unused/unused.html b/slides/unused/unused.html new file mode 100644 index 0000000000000000000000000000000000000000..8292316c4988413bc4b116286959ff8736a86b1c --- /dev/null +++ b/slides/unused/unused.html @@ -0,0 +1,965 @@ +--- +layout: presentation +title: Introductory Slides--Week 1, Monday-- +description: Introductory slides for Interaction Programming, CSE 340 +class: middle, center, inverse +--- +# Text quirks + +- Each glyph has a reference point that defines a baseline +- Each glyph has an advance width (distance to next glyph's reference point) + + +--- +# Text quirks + +- Each glyph has a reference point that defines a baseline +- Each glyph has an advance width (distance to next glyph's reference point) +- font has standard ascent and descent + + +--- +.title[Text quirks] +.body[ +- Each glyph has a reference point that defines a baseline +- Each glyph has an advance width (distance to next glyph's reference point) +- Font has standard ascent and descent +- Font has 'leading' (distance between lines) +] +-- +.title[Why am I telling you all this?] +.body[ +- Where is (0,0) of text when you call [drawText()]("https://developer.android.com/reference/android/graphics/Canvas.html#drawText(java.lang.CharSequence,%20int,%20int,%20float,%20float,%20android.graphics.Paint")? +- What should you set up in [Paint](https://developer.android.com/reference/android/graphics/Paint)? +] + +--- +# Other Paint properties + +- Transparency and composition characteristics: Alpha value and `xfermode`([Porter-Duff](https://developer.android.com/reference/android/graphics/PorterDuffXfermode)) +??? +When the alpha channel is 1, the image is fully there, when it is 0, +the image isn’t there at all, and when it is in between, the image is +partially there. In other words, the alpha channel describes the shape +of the image, it does not describe opacity. The way to think of images +with an alpha channel is as irregularly shaped pieces of cardboard, +not as colored glass. + +-- +<br> + + +-- + +- Each type of pixel can be treated differently. + +-- +<br> + + + +??? +Dest blend mode, atop source, limited to pixels in dest, colors blue and orange +Color Dodge blend mode, pixels from both kept, colors pink and blue and orange + +The general formula is an area weighted average: + +Asrcâ‹…[s]+Adestâ‹…[d]+Abothâ‹…B(s,d) + +where [s] and [d] are the source and destination colors respectively +or 0, and B(s,d) can be chosen from a set of formulas + +alpha channel is +Asrcâ‹…[as]+Adestâ‹…[ad]+Abothâ‹…[ab] + +where [ab] is determined by the blend mode. + +--- +# How does Canvas work? + + - Handles __clipping__ of drawing boundaries + +??? +Clipping is super efficient if limited to a rectangle +Implications for GUI design +-- + + - Performs __transformations__ on drawn visual elements + +--- +# Work through clipping example (bell) +.left[ +- For draw +- For redraw +] +.right[ + + +] +--- +# Coordinate Transformations in Android + +```java + Canvas c = new Canvas(); + + // Set the drawing boundary + c.setClippingRect(100, 50, 200, 100); + + // Draw the shape + c.drawRect(0, 0, 50, 50); + + // Move origin to where shape's top-left corner is + c.translate(100, 50); + + // Draw another Rect inside the Rect just drawn + c.drawRect(10,10,10,10); + + // Return state back to before the translation & clipping + c.restore(); +``` +--- +Which of the following must a parent component do before passing a +drawable region to the child? [raise your hands] + +- [a] Translate (child.x, child.y) +- [b] Clip(parent.x, parent.y, parent.w, parent.h) +- [c] Translate (-child.x, -child.y) +- [d] Clip(0,0,child.w,child.h) + +--- +.left-column[ +# Aside: Interactors: Significant Stagnation + +- Basic GUI components invented 1970s +- Windows, Icons, Menus, Pointers (“WIMPâ€) +- “Perfected†by Macintosh in 1984 +- Not much change since then (even with web) +] +.right-column[ +## Most GUIs still use the same 7-10 interaction techniques + + +] +??? +- Work well, uniform +- Good for usability +- GUI is victim of its own success +- Opportunities lost by not customizing interaction techniques to tasks +- Hard for better techniques to get traction +- Only very recently with mobile devices (touch based) have we seen lots of new techniques get a major foothold +--- +.title[In class Exercise: Interface Developer] +.body[ +Let's look at interactors in Android Studio + +] +??? +Menu, Button(types), Slider, Scrollbar, Spinner, List box, Icon, Link, +Text box, Label, +--- +.title[In class Exercise] +.body[ +Quick Tour | tutorial +for [building a ui](https://developer.android.com/training/basics/firstapp/building-ui) + + +] + +--- +# Multiple Simultaneous Animations (`AnimatorSet`) + +```java + // Create animator set + AnimatorSet bouncer = new AnimatorSet(); + + // Add the good stuff + bouncer.play(bounceAnim).before(squashAnim1); + bouncer.play(squashAnim1).with(squashAnim2); + bouncer.play(squashAnim1).with(stretchAnim1); + bouncer.play(squashAnim1).with(stretchAnim2); + bouncer.play(bounceBackAnim).after(stretchAnim2); + + // Animate the alpha value from 1->0 + ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f); + fadeAnim.setDuration(250); + + // Build up a another level of animation sets + AnimatorSet animatorSet = new AnimatorSet(); + animatorSet.play(bouncer).before(fadeAnim); + + // Starts the animations + animatorSet.start() +``` +--- +# Declaring Animations in XML + +``` +/res/animator/object_animator_ex.xml +``` +```xml +<set android:ordering="sequentially"> + <set> + <objectAnimator + android:propertyName="x" + android:valueTo="200"/> + <objectAnimator + android:propertyName="y" + android:valueTo="300"/> + </set> + <objectAnimator + android:propertyName="alpha" + android:valueTo=".5f"/> +</set> +``` + +.footnote[Can do even *more* with ValueAnimator XML (will let you google this)] + +--- +# There's more flexibility... (3/3) + +You can then run the animation by doing the following: + +```java + Animator anim = (Animator) AnimatorInflater.loadAnimator(this, + R.animator.object_animator_ex); + anim.setTarget(myObject); + anim.setDuration(2000); + anim.start(); +``` + +Note that animations xml files should be in the `res/animator/` directory + +--- +# Make sure the animation info is inside of: +```xml +<?xml version="1.0" encoding="utf-8"?> +<set xmlns:android="http://schemas.android.com/apk/res/android"> +<!-- ... --> +</set> +``` + +--- +# An Aside: What is an Inflater? + +You will use these often! They give you access to XML data (part of +the *model* of your application). Just saw an +[AnimatorInflater](https://developer.android.com/reference/android/animation/AnimatorInflater) +in the previous code. + +```java +[Type] [name] = ([Cast to Type]) [Inflator].load...([arguments]) +``` +Will need the *path* to the part of the XML you care about, typically +something like: +``` +R.[dirname].[filename] +``` +Specifics vary from situation to situation (*e.g.,* [LayoutInflater](https://developer.android.com/reference/android/view/LayoutInflater) +works slightly differently), so you'll need to read the documentation. +] + + +--- +.title[Interactor (Component) Model] +.body[ +__Encapsulate interactive components__ (interactors) +- Component library (button, slider, container) +- Interface built as a hierarchy of components + +__Components drawn by underlying graphics library__ +- Input event generation and dispatch +- Historically mouse & keyboard, now touch, ... + +__Bounds management & damage/redraw__ +- Model geometry, redraw updated regions only +] + +--- +template: inverse + +# Saving State +--- +layout: false + +.left-column[## When to save state? (1/3)] +.right-column[ +- Activity `A` spawns Activity `B` + - E.g. Typing a Facebook post, then you select 'Add a Location' +] +-- +.right-column[ +- Android kills `A` to reclaim resources while the user is interacting with `B` +] +-- +.right-column[ +- User finishes with `B`, returns to `A` but the post is gone! +] +--- +.left-column[## Activity Lifecycle] +.right-column[] + +--- + +.left-column[## When to save state? (2/3)] +.right-column[] + +--- + +.left-column[## When to save state? (3/3)] +.right-column[] + +--- +.title[ Maintaining Activity State] +.body[ +- We can fix it by saving the state in a `Bundle` before Android closes the `Activity` + +- We then restore the state when we return to the `Activity` later +] +--- + +.title[# Bundle it up] +.body[ +- `Bundle`: A hash map (dictionary) of String keys to Primitive, Parcelable, Serializable values +] +-- +.body[ +- Used to: + (1) Save/restore state + (2) Transfer data between different `Activity` in an app +] +-- +.body[ +- Primitive are `int`, `float`, `boolean`, `double` (the usual suspects) +] +--- +.left-column[ +## Saving in the Bundle +] +.right-column[ +Methods for _saving_ items out of a Bundle + +- Ints: `putInt(String key, int value)` +- Floats: `putFloat(String key, float value)` +- Characters: `putChar(String key, char value)` +- Strings: `putString(String key, String value)` +- Serializable Objects: `putSerializable(String key, Serializable value)` +- Parcelable Objects: `putParcelable(String key, Parcelable value)` +- _Others in the documentation (e.g. Arrays, Bytes, etc).._ +] +.footnote[[Bundle Documentation]( https://developer.android.com/reference/android/os/Bundle.html +)] +--- +.left-column[ +## Retrieving from the Bundle +] +.right-column[ +Methods for getting items out of a Bundle + +- Ints: `getInt(String key)` +- Floats: `getFloat(String key)` +- Characters: `getChar(String key)` +- Strings: `getString(String key)` +- Serializable Objects: `getSerializable(String key)` +- Parcelable Objects: `getParcelable(String key)` +- _Others in the documentation_ (e.g. Arrays, Bytes, etc).. +] +.footnote[[Bundle Documentation]( https://developer.android.com/reference/android/os/Bundle.html +)] +--- +.left-column[ +## Saving Activity State (1/3)] +.right-column[ +- Android provides the `onSaveInstanceState(Bundle savedInstanceState)` callback method for you to save the state of an `Activity` + +```java +private static final USERNAME_KEY = "USER_NAME_KEY"; +private static final FIB_SUM_KEY = "FIB_SUM_KEY"; + +private int mFibSumValue; // Set to 10295 by our user +private String mUsername; // Set to "Prabha" by our user + +@Override +public void onSaveInstanceState(Bundle outState) { + // Always call super - your super classes could be saving state for you! + super.onSaveInstanceState(outState); + + // Now + outState.putInt(FIB_SUM_KEY, mFibSumValue); + outState.putString(USERNAME_KEY, mUsername); +} +``` +] +--- +.left-column[ +## Restoring Activity State (1/2) +] +.right-column[ +- We saved, and now our user goes off to some other app +] +-- +.right-column[ +- Android kills our `Activity` +] +-- +.right-column[ +- Now how do we get the _saved_ state back? +] +--- +.left-column[ +## Restoring Activity State (2/2)] +.right-column[ +- Two ways: + - `onCreate(Bundle savedInstanceState)` + - `onRestoreInstanceState(Bundle savedInstanceState)` +] +--- +.left-column[ +## Restoring in `onCreate` vs. `onRestoreInstanceState` +] +.right-column[ +- `onRestoreInstanceState` + - Guarantees you will never have a non-null `Bundle` when called + - Lets subclasses override the behavior of restoring the state + +- `onCreate` + - Lets you focus on doing all of your initialization in one place + +- In the assignment we use onCreate +] +.footnote[[Stackoverflow conversation on this](http://stackoverflow.com/questions/36408776/using-oncreate-vs-onrestoreinstancestate) +] +--- +--- +# Saving state: advanced material +--- + +- Custom objects that implement the `Serializable` or `Parcelable` interfaces + - You will need to make any custom classes that you want to save into a `Bundle` implement the `Parcelable` interface + +--- + +# Parcelable vs. Serializable + +- Both are for the same purpose of saving but `Serializable` makes implementations much easier... + +-- + +- **EXCEPT, .red[you should almost always use `Parcelable`]** + +-- + +- Why? + - `Serializable` uses introspection ==> more memory, and CPU cycles + - `Parcelable` **is optimized for mobile devices** + +--- +## Implementing `Parcelable` (1/3) + +-- You are required to implement the following methods for the `Parcelable` interface: + +```java +public class MyPersonModel implements Parcelable { + private int mAge; + + // Required for the interface + public int describeContents() { + return 0; + } + + // Required for the interface + public void writeToParcel(Parcel out, int flags) { + out.writeInt(mAge); + } + // Continued on next slide... +``` + +--- + +## Implementing `Parcelable` (2/3) + +```java + + // Required for the interface + // CREATOR is an object that can remark + public static final Parcelable.Creator<MyPersonModel> CREATOR + = new Parcelable.Creator<MyPersonModel>() { + public MyPersonModel createFromParcel(Parcel in) { + return new MyPersonModel(in); + } + + public MyPersonModel[] newArray(int size) { + return new MyPersonModel[size]; + } + }; + + // Required for the interface + // Private constructor for Android to use with your CREATOR + private MyPersonModel(Parcel in) { + mAge = in.readInt(); + } +} +``` +--- + +## Implementing `Parcelable` (3/3) +- **Note**: .red[the order of the values when writing and reading them matters!] + + - When you write to the parcel using `write*()` methods in `writeToParcel`, + + - The write order __MUST BE__ the same as when you read them in the private constructor + +- For more details on implementation: + https://developer.android.com/reference/android/os/Parcelable.html + +--- +## example code for restoring state + + +```java +private static final USERNAME_KEY = "USER_NAME_KEY"; +private static final FIB_SUM_KEY = "FIB_SUM_KEY"; + +private int mFibSumValue = 0; +private String mUsername = null; + +@Override +protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.activity_main); + + mMainTextView = (TextView) findViewById(R.id.text_main_title); + mSumTextView = (TextView) findViewById(R.id.text_sum); + // Check if there was a previously saved state to restore to the user + // A non-null bundle means there was a state that was saved previously + // A bundle is just a Key-Value pairing - its a hash map :) + if (savedInstanceState != null) { + // There was a previous state - time to restore + mFibSumValue = savedInstanceState.getInt(FIB_SUM_KEY); + mUsername = savedInstanceState.getString(USERNAME_KEY); + } + updateMainText(); + updateFibSumText(); +} +``` +--- +## example code for restoring state + +```java +private static final USERNAME_KEY = "USER_NAME_KEY"; +private static final FIB_SUM_KEY = "FIB_SUM_KEY"; +private int mFibSumValue = 0; + +@Override +protected void onRestoreInstanceState(Bundle savedInstanceState) { + super.onRestoreInstanceState(savedInstanceState); + // Check if there was a previously saved state to restore to the user + if (savedInstanceState != null) { + // There was a previous state - time to restore + mFibSumValue = savedInstanceState.getInt(FIB_SUM_KEY); + mUsername = savedInstanceState.getString(USERNAME_KEY); + } + updateMainText(); + updateFibSumText(); +} +``` +--- +--- +## Exercise: Parcelable and Activity State + +- Pair up! + +- Download the base code here: + +- This app lets a user enter a name, age, and favorite food + +- It stores this info in a `PersonModel` + +- When the app is killed, this information needs to remain edited + +- Implement the `Parcelable` interface for the PersonModel + +- Then use the Activity's relevant state change callbacks to `PersonModel` when the phone rotates + +--- +### Some Notes about `onSaveInstanceState()` +- .red[Only use to save and restore session variables and the state of the UI] + +-- + + - Android won't always trigger the method + +-- + + - It is called when the `Activity` is closed and _expected_ to be restored soon + +-- + +- If your app crashes, or is closed, **the values in the bundle will disappear!** + +-- + +- If you use custom views, you can implement their version of `onSaveInstanceState`: + + Android will call `onSaveInstanceState()` every view in the layout + +--- +.left-column[ +## Essential Behavior Quiz question +PPS Parts? +- Action +- Input modifier +- Input Event +- Query field (Condition) +- State +] +.right-column[ + +] + + +--- +layout: false + +# Affordance + +Opportunities to act +- which are readily apparent to the user ... and appropriate to the + user’s abilities + +Form “affords†certain actions and makes that apparent + +Allows and promotes certain actions + +- Door knobs afford turning +- Handle of hammer affords grasping in a particular way +] + +--- +# Affordance Example: Knurling + +.left-column[ + + +] +.right-column[ +Small ridges typically found on knobs + +Increases friction + +Affords grip +] + +--- +# “Virtual affordances†+ +.left-column[ + +] + +.right-column[ +Don’t typically have much physical form in a GUI + +But, visual appearance can still suggest function +] +-- +.right-column[ +Note that you don’t have to know about knurling for this to afford +“grip†with the mouse +] +--- +# Feedback + +Response by the system to the actins of the user – Cause and effect + +- Essential for forming mental models + +Making “system state†visible + +--- +# Component design guideline #1 + +Explicitly design a conceptual model and use affordance and feedback +(and everything else you have) +to reinforce it + +--- +# Performance properties of people + +(Only a very few here) How long will things take? + +- e.g., physical movements + +How much can people remember? How fast are thing perceived? + +--- +#How long will user actions take + +Strong models for physical movement + +Fitts’ law predicts movements as a function of distance and required accuracy: + +T = A log2(D/S + 0.5) + B D – distance to target + +S – size of target + +A,B proportionality constant and intercept (linear fit) + +– Property of user (motor control group) + +--- +# Speed Differences Explained + +Menu position and design can have a +significant impact on speed of interaction + +Fitts' law is the main +explanation for this. + +--- +# Fitts law – + +helps to capture the difficulty of input with different devices] + +Time = A + B*log2(Dist/Size + 0.5) + +“Index of Difficulty†+ +- Time is linearly proportional to “index of difficulty†(log of what we would intuitively think of as “difficultyâ€) + + - Proportionality constants depend on muscle group and device + + - Difficulty determined by distance and required accuracy (size of +target) +--- +.left-column[##Fitts’ law] +.right-column[ + +Actual numbers from Fitts’ law generally not all that helpful + +- That level of detailed analysis is hard + +- Very hard to know what exact distances are across + +dynamic layout and varied platforms General guideline + +- Keep required movements (accuracy & distance) firmly in mind + - Avoid device swapping + - Avoid disturbing focus of attention +] +--- +.left-column[##Fitts’ law] +.right-column[ +(True) expert performance tends to be closely related to time required for movements + +- not that closely related to learning (or performance) of novices + +- still need to consider “cognitive load†+] +--- +.left-column[##How much can a person remember Short term (working) +memory] +.right-column[ +- Famous 7 +/- 2 “chunks†(Somewhat outdated model) + +- For us just: “very limited†and “decays quickly†– Has become “worse†with constant multitasking + +Long term + +– Essentially unbounded +– But requires effort & may not always work on cue – Can’t explicitly forget! Even though you try! +] +--- +.left-column[##How much can a person remember Novice / expert +differences] +.right-column[ +- Experts have learned items in long term memory to draw on, novices don’t + +- But note that having the ability to operate from recogni2on does not preclude recall + +Implication: + +- Generally better to rely on recognition (seeing it in front of you) +than just recall (having to pull it out of long term memory) +] +--- +.left-column[##How fast are things perceived?] +.right-column[ + +less than ~20ms (1/50 sec) discrete images/flashes merge into con2nuous percep2on + +- Image you are looking at flickers 60 times per second +- Differences in peripheral vision + - Sabertooth tigers +] +-- +.right-column[ +Don’t ever have to be faster than this for user response! + +Get more than 120 million instructions per core (@3Ghz) + +(High end GPU theoretically as high as 26 billion instr.) + - You can do a lot with that + - (First GUIs had ~20K) + - Not enough? Twice as many cores in 2-3yrs... +] +--- +.left-column[##How fast are things perceived?] +.right-column[ + ~100ms seems like “instant response†+ +- Hard to tell response times below this apart + +- Upper range of eye saccades + +Discrete images into steps instead of apparent motion +] +--- +.left-column[##How fast are things perceived?] +.right-column[ + +100ms (1/10 sec) + +Except some animation, most things don’t need to be faster than this + +- Typical target “cycle time†+ +- 600 million+ machine instructions, ... +] +--- +.left-column[##How fast are things perceived?] +.right-column[ + 1-2 seconds typically “good response time†+ +- Similar times in conversa2onal turn taking protocols + +- Longer delays ~5 sec have to say something to keep conversation alive + +(Note: numbers fuzzier as we go out) +] +--- +.left-column[##How fast are things perceived?] +.right-column[ +10-15 sec is typically “bad response time†– STM decay effects +] +--- +.left-column[##A liMle about response times] +.right-column[ +Good vs. bad response time +is very dependent on expecta2on + +- If you can’t meet the goals, manipulate user expectations! + +Consistency of response is very important + +- Can be more important than +time +] +--- +.left-column[##How long do other cognitive activities take?] +.right-column[ +Unfortunate, but... + +– Things known, but overall not as well understood – Much harder to apply what is understood + +– See other HCI courses for some of this +] +--- +.left-column[##We do know essen2ally minimums] +.right-column[ +“Cycle†times for “Human Processor†+(Model Human Processor [Card, Moran, Newell]) + +- Perceptual ~100ms [50-200] + +- Cognitive ~70ms [25-170] + +- Motor ~70ms [30-100] + +Can be used to predict reaction times and highly routine actions + +- E.g., it takes at least ~150ms to +act on something (~250ms more likely) + +Harder to use for complex things and/or with learning + +] +--- +.left-column[##When do these rules break down?] +.right-column[ +- Novices +- Disabled + ] + +--- +XX add some active learning? +XX add something about color perception here or earlier? + + +--- +# Case Study: Text Entry Speed on Mobile Devices + +.left-column[ + +] +.right-column[ +Multi-tap +``` +77 88 444 222 55 0 22 777 666 9 66 0 333 666 99 +q u i c k _ b r o w n _ f o x +``` + +Slow, lot's of overhead +] + +--- +# Case Study: Text Entry Speed on Mobile Devices +.left-column[ + +] +.right-column[ +Multi-tap (~ 20 WPM) +``` +77 88 444 222 55 0 22 777 666 9 66 0 333 666 99 +q u i c k _ b r o w n _ f o x +``` + +T9 - dictionary based disambiguation (~ 20 WPM) +``` +7 8 4 2 5 0 2 7 6 9 6 0 3 6 9 +q u i c k _ b r o w n _ f o x 843 78425 27696 369 58677 6837 843 5299 364 +the quick brown fox jumps over the jazz dog +tie stick crown lumps muds tie lazy fog +vie vie +``` +] +??? +Most common word (top) not always right +--- +# Case Study: Text Entry Speed on Mobile Devices + +.left-column[ + +] +.right-column[ +Method | Speed +----|---- +Multi-tap | ~ 20WPM +T9 - dictionary based disambiguation | ~ 20 WPM +Swype | ~ 55 WPM +Keyboard | ~ 55 WPM +Flesky | Up to 80 WPM ([Guinness World Record!](https://www.cnn.com/2014/05/15/tech/mobile/guiness-record-fastest-text/) ) +Speech | ~ 150 WPM + +Skeptical? Need to know % errors and time cost of error correction to truly evaluate +] + +??? +Flesky is combination of gestures and automatic error correction + diff --git a/slides/wk01/drawing.html b/slides/wk01/drawing.html new file mode 100644 index 0000000000000000000000000000000000000000..ef29741325c58b757b4616b11ea65b820961d186 --- /dev/null +++ b/slides/wk01/drawing.html @@ -0,0 +1,701 @@ +--- +layout: presentation +title: Drawing On the Screen +description: Discussion of basic information about how to draw on the screen +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Introduction to Drawing + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout: false + +[//]: # (Outline Slide) +# Today's goals + +- Administrivia +- Warmups + - Checks for understanding + - Practicing with breakouts, polleverywhere, and Ed +- Quick view of resources +- Abstractions for drawing on the screen +- Drawing in Android +- Clipping and other transformations + +--- +# Administrivia + +- Please remember to take the first day [survey](https://catalyst.uw.edu/webq/survey/bricker/387508) if you have not already +- Ed-iquette + - Please tag your posts with the most appropriate tag, e.g., if you are posting about doodle + please tag it with as1-doodle + - Please search to see if someone has already answered your question before posting! (these tags can help!) +- Lab videos were posted +- Important [Ed Post about a change to Part1.java](https://us.edstem.org/courses/381/discussion/24015) + +--- +# Trying new things! + +1. Breakout rooms + - Today I've randomly assigned you to breakout rooms with one TA each. + - In the future, we will experiment with a system where you can choose your breakout partners + - Goal: Meet other students, answer some questions. + - Please turn your cameras on in the breakouts + - Introduce yourself, and say what color socks your wearing. + - Work together on the question posed.... +2. Warmup 1: pollev.com/docbrick + - answer the question + - try to think of a one unique answer per person in your breakout + - Each person should answer the poll separately + - We'll come back together and see the results. +3. Warmup 2: Ed sway + - We'll go back into the breakout rooms and try to work together to answer questions on Sway + - Each person should submit their answers. + +--- + +Warmup 1 + +<iframe src="https://embed.polleverywhere.com/free_text_polls/gmZBJAx5kjHZQkO16zRve?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> + + +--- +# Quick view of resources + +One commong "Good Programming Practice" is to remove "static" resources from your code and +store them in a resource area to be used by your program. Think of this like the "No Magic Numbers" +principle you learned early in 142). + +- Often used in internationalization or localization +- Often used in A/B testing in software development + +Android resources are stored in `.xml` files in subdirectories of the `app/res` directory may include +- `drawable` - images you might draw on the screen in various formats +- `layout` - layouts of various screens +- `menu` - the menus for your application +- `values` - might contain `colors.xml` and `strings.xml` + +--- +## Developer roles + +.left-column[ + +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + + class t,l,a,w yellow + class ip green +</div> +] + +.right-column[ +From [last class](toolkits.html) we briefly discussed of the roles +a developer can play in app development. + +- Today we're going to focus on being an Interface Developer (adding existing components like +`ImageView` objects to the `doodleView`) +- We might get to touch on being a Component Developer and thinking about how to create that new +`LineView` component +] + + +--- +# Drawing on the Screen + +- Take out your phone. Open an App. What do you see on your screen? +--- +# Drawing on the Screen + +- Take out your phone. Open an App. What do you see on your screen? + +.left-column[ +] + +.right-column[ +(this is what I currently see) + +What is an app made up of? +] +--- +# What is on your screen? + +.left-column[ + +] + +.right-column[ +App is made up of? Interactors + +Last class we discussed the "tree" of components. + +Think about what this hierarchy might look like. +- What is at the "root" ? +- How is this divided up into sections +- In each section, how are things further divided up? + + +] + +--- +# What is on your screen? + +.left-column[ +] + +.right-column[ +<div class="mermaid" style="width: 75%"> +graph LR +W(Window) --> T[Title Bar] +W --> L[Label: My Folders] +W --> F[Folders] +W --> B[Toolbar] +T --> TA[Icon] +T --> TB[Label: Activities] +T --> TC[Button: Search] +T --> TD[Button: Folder] +T --> TE[Button: Add] +F --> F1[Folder 1] +F --> F2[Folder 2] +F --> F3[Folder 3] +F1 --> I[Icon] +F1 --> N[Folder Name] +F1 --> C[Activity Count] +B --> H[Button:Home] +B --> A[Button: Activities] +B --> R[Button: Reports] +B --> P[Button: Profile] + +classDef start font-size:12pt,text-align:center +classDef blue font-size:12pt,text-align:center + +class W start +class T,L,E,F,B,TA,TB,TC,TD,TE,F1,F2,F3,H,A,R,P,I,N,C blue + +</div> +] +--- +# What is on your screen? + +.left-column[ + +] + +.right-column[ +App is made up of? Interactors + +What are Interactors made up of? + +] + +??? +Should push them down to the lowest level on the screen + +App is made up of? Interactors + +Interactors are made up of? lines, circles, text + +Lines, circles and text are made up of? Pixels + +--- +# What is on your screen? + +.left-column[ +] + +.right-column[ +App is made up of? Interactors + +Interactors are made up of? lines, circles, text + +Lines, circles and text are made up of? Pixels (picture elements) +] +--- +# Aside: Displaying a Pixel + +.left-column30[ +Do you know how pixels are lit up in color or greyscale? +- on your computer or TV screen? +- on a projector? +] +-- +.right-column50[ +[Cathode Ray Tube](https://en.wikipedia.org/wiki/Cathode-ray_tube) | [LED Display](https://en.wikipedia.org/wiki/LED_display) +:--: | :--: + |  + +] + +??? +Get them to at least realize that the actual pixels on their +screen are LEDs + + + + +--- +# Drawing on the Screen + +What are we going to control as we build this application? + +-- +- Interactors + +-- + - from the Toolkit + - they know how to draw themselves and possibly react to input + +-- +In Android, we call these Interactors `Views` + +- *Aside: Widgets, Interactors, and `Views` are all variations on the same term* + +-- +What if you were to build an interactor from scratch? + +-- +- You'd need basic drawing capabilities from the toolkit such as drawing lines, circles, and so on + +--- +# Toolkit Support for Basic Drawing + +.left-column[ +] + +.right-column[ +All toolkits have some sort of `Canvas` object or abstraction +- `Canvas` is an object level abstraction for performing drawing operations +- Each `View` has a `Canvas` in Android +- You can access it in the `onDraw(Canvas canvas)` method + +When is `onDraw()` called? + +] + +??? +Connect to DrawingPanel in 143? + +--- +# Toolkit Support for Basic Drawing + +.left-column[ +] + +.right-column[ +All toolkits have some sort of `Canvas` object or abstraction +- `Canvas` is an object level abstraction for performing drawing operations +- Each `View` has a `Canvas` in Android +- You can access it in the `onDraw(Canvas canvas)` method + +When is `onDraw()` called? +- Handled automatically for you by toolkit +- Triggered whenever the pixels are *dirty* (there's been a change to what needs to be viewed) +- You can trigger this with `invalidate()` (we'll use this in the future) + +] + +??? +Lots to discuss here. Mainly focus on introducing the concept +of a library (a bunch of views you can pick from, Canvas and its methods, etc) + +vs an architecture (which controls when and in what order things happen). +We'll learn about both in this class. You need to understand both to use a toolkit. + +--- +# How does Canvas work? + +- Drawing is done by calling methods for different kinds of objects + +-- + +- For example: `drawRect`, `drawOval`, `drawLine`, `drawPath` ... + + [Full List in the API Documentation](https://developer.android.com/reference/android/graphics/Canvas.html) + +--- +# How does Canvas work? + +- Drawing is done by calling methods for different kinds of objects + +- Lots happens under the covers... let's look at an example... + +-- + +"I want to draw a line on the screen" + +-- + +So I would likely call `drawLine` on the `Canvas`. + +-- + +So... how do I tell the computer where the start and end of the line will be? + +--- +# How is location decided? + +- (0,0) is at the top left of the screen +- The screen is drawn pixel by pixel from top left to bottom right in "raster" lines + + + +[Source: Wikipedia](https://en.wikipedia.org/wiki/Analog_television#Displaying_an_image) +--- +# How is a drawing object rendered on screen? + +- An object (like a line) would be converted into one or more **strokes** +- A stroke has properties such as width or color +- The stroke is converted to **pixels** (correspond to dots on your screen) +- These pixels are put in a `Bitmap` (frame buffer) first, then updated on the screen all at once + +??? +top left is from old-style raster graphics, where a beam of light literally moved +down the screen from top left to bottom right, causing chemical excitation when on +and thus lighting the screen + +the last is left over from when both graphics and drawing were slower and more linear +Still most reliable approach + +--- +# How is a stroke converted to pixels? +- Strokes (can be) size independent. Pixels are not +- Strokes are continuous. Pixels are not +- Anti-aliasing + +Essentially converting from **vector** to **raster** graphics ([Bresenham's algorithm](https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm)) + +--- +# Quick understanding test + +What internal data structure (abstraction) represents an entire +picture to display on a color screen? + +-- +pixels in a 2D array + + + +Pixel Calculator (Tanimoto 2010) + +??? + +**A frame buffer (2D array) (picture)** + +The following are wrong, they represent a single pixel (but we haven't studied this yet) + +- A pixel (R,G,B) +- A number from 0 to 255 + +--- +# What is the [Paint](https://developer.android.com/reference/android/graphics/Paint.html) Object? + + +.left-column[ + +] + +.right-column[A Paint object is an abstraction that determines how drawing operations should look +```java +Paint drawPaint = new Paint(); +drawPaint.setColor(Color.BLUE); +drawPaint.setAntiAlias(true); +drawPaint.setStrokeWidth(5); +drawPaint.setStyle(Paint.Style.STROKE); +canvas.drawCircle(500, 500, 400, drawPaint); + +drawPaint.setStrokeJoin(Paint.Join.ROUND); +drawPaint.setStrokeCap(Paint.Cap.ROUND); +drawPaint.setColor(Color.GREEN); +drawPaint.setStrokeWidth(15); +canvas.drawLine(350, 300, 500,600, drawPaint); +```] +--- + +# What is the [Paint](https://developer.android.com/reference/android/graphics/Paint.html) Object? + +- Abstraction that determines how drawing operations should look + - Drawing style: stroked, filled + - Line Characteristics: color, line width, join, cap styles + - Fill Characteristics (color) + + + + +--- + +# Other Paint properties + +- Text Characteristics: font family, style, size, alignment settings, etc. + +-- +- font: shapes for chars (called *glyphs*) plus layout + - family or typeface + + + +--- +# Other Paint properties + +- Text Characteristics: font family, style, size, alignment settings, +etc. +- font: shapes for chars (called *glyphs*) plus layout + - family or typeface + - style: plain, *italic*, **bold**, **_both_**, ~~strikethrough~~, *etc.* +-- + + - points: 72.27 points per inch +??? +because french inches were different (72 per inch) +Really just a guideline these days +It is the *width* of a capital M (no height specified) + +--- +# The Path Object + +- Canvas supports drawing primitive shapes _and_ arbitrary paths: `void drawPath(Path p, Paint paint);` + +-- + +- Declaring a `Path` can be done by combining basic primitive shapes (e.g rectangles, circles, ovals, curves like arc, cubic, etc.) + +-- + +- What drawing model does creating a path in this way correspond to? + - Raster model + - Vector model + +--- +# The Path Object + +- Canvas supports drawing primitive shapes _and_ arbitrary paths: `void drawPath(Path p, Paint paint);` + +- Declaring a `Path` can be done by combining basic primitive shapes (e.g rectangles, circles, ovals, curves like arc, cubic, etc.) + + +- Which is more scalable? + + - Raster model + - Vector model + +??? +XXXX could do in-class [drawing +exercise](https://github.com/mriveralee/ssui-mobile-exercises-2016/tree/master/exercises/lab05/CustomDrawing) +IF time XXXX needs updating + +--- +# Bounding box of an object + +A bounding box (or sometimes [Minimum Bounding Box](https://en.wikipedia.org/wiki/Minimum_bounding_box)) +is a term used in coordinate geometry to describe the smallest rectangular area that contains an object or set of objects. + +Great example to play with: https://www.mathopenref.com/coordbounds.html + +Drawing Demo - things to think about +- What is the bounding box of a line that is drawn diagonally + - from upper left to lower right? + - lower right to the upper left? + - from the upper right to the lower left? + - from the lower s` +- What is bounding box of a vertical line? +- What is the bounding box of a horizontal line? + +--- +# Doodle assignment: practice with drawing + +Inspired by Google's Doodles, and will include animation (to be discussed) + +First we will create holders for things you might draw +- Android already provides an `ImageView` and a `TextView` +- You will create a `LineView` +- You will produce some things we specify +- Then you will have a chance to create any animation you want! + +--- +# [Example from 19sp](img/drawing/doodlevid.mp4) + +.left-column[ +Note that we use a `View` for **each** thing on the screen +] +.right-column[ +![:youtube Animation showing images of food moving in a line down the page around a U finally forming a W, Sx8oiJGjaIM] + +] + +--- +# Why so many separate `Views`? + +.left-column-half[ + +Useful later when we want to do animation + +Also provides **separation of concerns** and good high level control +- Can have a different paint object for each view +- Can easily change z-order (what is on top of what) +- Can store information used to draw that thing (whatever it is) +- Can either make the size of the whole screen or resize around what is drawn + +Views can also be re-used easily +] + +.right-column20[ + +] + +??? +This could be a good place to ask them to think about what that means and demonstrating two things with different z order. + +--- +# Coordinates of the Views + +- The coordinate system for each View has the (0, 0) point in the upper left hand corner (remember why?) +- The width and height of the View is determined it's `ViewGroup.LayoutParams` - + - These will be used by the layout system for positioning. + - We will learn more about these next week. + - +- The `View` also has a position on the screen. + - `View#SetX(int)` and `View.SetY(int)` set the left and top most coordinate of the `View` in its parent. + +--- +# Advanced Canvas: Coordinate Transformations + +.left-column[ +## How does the android toolkit move the various objects on this screen? +] +.right-column[ +![:youtube A phone screen with patterned circles spinning in different directions on it, w7DEWWtIlrs] +] + +??? +Be sure to orally narrate what is happening for low-vision people in the room + +--- +# Linear ("affine") Transformations available + +Translate, Scale, Rotate, Shear (and any combination thereof) + +-- + +- Translate: Move origin (and everything else) in x and y + + +??? +used extensively in GUIS because child objects just draw themselves +at *their* origin, so a component doesn't have to calculate how to draw +itself based on its position + +-- + +- Scale: change size (negative == flip) + + +-- + +- Rotate and Shear + + +--- +# Coordinate Transformations + +- Can modify any shape, including text. +- In practice, complex transformations are done with matrices, and matrices are using `concat(Matrix)` +- But Android helps with this by providing methods in the [Canvas](https://developer.android.com/reference/android/graphics/Canvas) object to transform a canvas such as +```java +translate(float dx, float dy) +rotate(float degrees) // the whole canvas around the canvas origin +rotate (float degrees, float px, float py) // around a particular point +scale(float, float) +scale (float sx, float sy, float px, float py) // around a pivot point +skew(float sx, float sy) // skew by sx and sy +save() // save the current transform +restore() // restore the previous transform +``` + +??? +- important thing to point out here: This is a value proposition for a toolkit again + +– Affine transformations are based on two-dimensional matrices of the +following form: + +P' = T*P where P is 1x3 and T is the transform matrix (3x3) with the +bottom row 0 0 1 + +Thus, x' = ax + cy + t_x and y' = bx + dy + t_y + +*Note* Any sequence of transform, rotate and shear can be represented +in a single matrix of this form (just multiple the matrices together) + + + +--- +# Question: How to rotate about the center of an object + +<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/DfxDLPdpd2zTpLlUJt9h9?controls=none&short_poll=true" width="800" height="500" frameBorder="0"></iframe> + + +??? + +[raise your hands] + +- A: Translate, rotate, translate +- B: Rotate, Translate, Rotate +- C: Scale, Rotate, Scale +- D: Rotate + + +XX define exercise +maybe put this after android stuff? + +I usually draw this out on a piece of paper using the document camera to help + +--- +# Solution: How to rotate about the center of an object +.left-column[ +] +.right-column[ + +```java +int rectHeight = 300; +int rectWidth = 300; +int rectY = 100; +int rectX = 100; +float px = (rectWidth - rectX)/2 + rectX; +float py = (rectHeight - rectY)/2 + rectY; + +canvas.drawRect(rectX, rectY, rectWidth, rectHeight, paint); + +for (int i = 15; i < 360; i += 15) { + int color = (i % 2 == 0) ? Color.GREEN : Color.BLUE; + paint.setColor(color); + + canvas.drawRect(rectX, rectY, rectWidth, rectHeight, paint); + canvas.translate(px, py); + canvas.rotate(i); + canvas.translate(-px, -py); +} +``` + +] + +--- +# Summary & revisiting learning goals for this week + +- What are the layers of the application stack +- What are the roles of developers at each layer +- How to add interactors to the app +- How interactors are drawn +- Pixel & stroke models +- Canvas & Paint & Paths in Android +- Maybe...Rotating around an object diff --git a/slides/wk01/figs.pptx b/slides/wk01/figs.pptx new file mode 100644 index 0000000000000000000000000000000000000000..640314bbc7787224d8cd6a0c4be4c8daf54b0975 Binary files /dev/null and b/slides/wk01/figs.pptx differ diff --git a/slides/wk01/hci-intro.html b/slides/wk01/hci-intro.html new file mode 100644 index 0000000000000000000000000000000000000000..ec15a5fa39ec71cde5c490d9625fc46a02cc66c9 --- /dev/null +++ b/slides/wk01/hci-intro.html @@ -0,0 +1,228 @@ +--- +layout: presentation +title: Introduction to HCI --Week 1, Monday-- +description: High Level Introduction to HCI for Interaction Programming, CSE 340 +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- + +# Introduction to Human Computer Interaction + +CSE 340 {{site.quarter}} + +--- +layout: false + +# Human-Computer Interaction (HCI) + +A science of the artificial +- Human + - Anyone impacted by the existence of the program + - End users +- Computer + - Artificial thing human is interacting with +- Interaction + - How the artificial stuff is actually used +- 48% of app code [Myers & Rosson, CHI'92]; probably more now! + +--- +.left-column-half[ + +] +.right-column-half[ +Robida's vision of a cordless telegraph (1906) +] +--- +.left-column-half[ + +] +.right-column-half[ +Commercial vision of a wireless private video phone (1929) +] +--- +.left-column-half[ + +] + +.right-column-half[ +His article: [As we may think](http://web.mit.edu/STS.035/www/PDFs/think.pdf) + +.quote[The MEMEX 'is a desk that can instantly bring files and material on +any subject to the operators fingertips....' (Bush, 1945, 'As We May +Think', Atlantic Monthly)] +] + +--- +.left-column-half[ + +] +.right-column-half[ +A wrist-watch cellphone prototype (1947), which captured popular imagination as shown in this Dick Tracy stamp +] +--- +.left-column-half[ + +] +.right-column-half[ +Ivan Sutherland. 1964. The sketchpad graphical communication system in action. +.font-small[In Proceedings of the SHARE design automation workshop (DAC '64). ACM, New York, NY, USA, 6.329-6.346.] +] +--- +# Sutherland Inspires Engelbart + +.left-column-half[ + +![:youtube Engelbart's *Mother of all Demos*. His presentation included windows; +hypertext; graphics; video conferencing; the computer mouse; word +processing; dynamic file linking; revision control; collaborative +real-time editing; all new inventions!, B6rKUf9DWRI] +] +.right-column-half[ +Engelbart's *Mother of all Demos* His presentation included many all new inventions: +- windows +- hypertext +- graphics +- video conferencing +- the computer mouse +- word processing +- dynamic file linking +- revision control +- collaborative real-time editing +] +.footnote[ +December 9 1968 at the +Fall Joint Computer Conference. +] +--- +# [1970s](https://www.computerhistory.org/timeline/1970/) starts the computer revolution + +.left-column-half[ + +] +.right-column-half[ +- 1971: Email is invented by Ray Tomlinson. +- 1973: The first commercial graphical user interface is introduced in 1973 on the Xerox Alto. The modern GUI is later popularized by the Xerox Star and Apple Lisa (but Xerox never made money on this) +- 1973: The first capacitive touchscreen is developed at CERN. +] +--- +# [1980s](https://www.computerhistory.org/timeline/1980/): Wave 1 of HCI: Personal Computing (mobile and desktops) + +.left-column-half[ +<br> + + +] +.right-column-half[ + +- 1984: The first commercially available cell phone, the DynaTAC 8000X, is created by Motorola. +- 1985: "The term 'Internet of Things' was first conceptualized, coined, and published by Peter T. Lewis in a speech to the Congressional Black Caucus ([Chetan Sharma](http://www.chetansharma.com/correcting-the-iot-history/))<sup>1</sup> +- Personal computers hit the mass market + - User interface toolkits were invented (Smalltalk 80, invented by Adele Goldberg, is the first) +] +.footnote[<sup>1</sup> This history was erased and instead attributed to a white man until very recently] + + +--- +# [1990s](https://www.computerhistory.org/timeline/1990/): Wave 2: Collaboration & communication + +.left-column-half[ + +<br>.font-small[Hiroshi Ishii and Roz Picard at the MIT Media lab in 1998, from [Ben Shneiderman's archive of HCI Pioneers](https://hcipioneers.wordpress.com/portfolio/ishii-hiroshi/)] +] +.right-column-half[ +- 1990: The World Wide Web is first introduced to the public by English engineer and computer scientist Sir Tim Berners-Lee, echoing the MEMEX proposed in 1945 +- 1993: Mosaic, the first popular web browser is introduced +- 1996: Palm pilot is introduced +- 1998: The first portable MP3 player is released by SaeHan Information Systems. +21st century +- 1998: Ishii pioneers tangible computing +] +.footnote[[HCI/UX timeline](https://miro.medium.com/max/2000/1*_c9Sy7zXyBMlmuGH_orf2Q.png)] +--- +# [2000s](https://www.computerhistory.org/timeline/2000/): Wave 2: Collaboration & communication + +.left-column-half[ + <br> + + +.font-small[(left) Deborah Estrin, who won a MacArthur Genius award for her pioneering work in Mobile Health (right) "The iPhone’s phenomenal popularity creates a new computing platform that brings mobile Web browsing to a large audience. Google’s Android mobile platform soon makes that audience even larger." ([Computer History Museum](https://www.computerhistory.org/timeline/2009/)) +] +] + +.right-column-half[ +- 2007: Apple Inc. launches the iPhone, the first touchscreen smart phone.[411] +- 2009: Mobile apps hit mass market +- 2011: Deborah Estrin pioneers the use of mobile technology for health +] + +--- +# [2010s](https://www.computerhistory.org/timeline/2010/): Wave 3: Self-expression, social change + +.left-column-half[ + +.font-small["Starting in late 2010 and continuing through 2011, protests in North Africa and the Middle East lead to regime change, and in some cases, free elections for the first time in history. Many of these protests were organized or promoted on sites such as Twitter and Facebook, and commentary appearing on popular blogs helped get the news out to the rest of the world while official, government-run media outlets were often silent." ([Computer History Museum](https://www.computerhistory.org/timeline/2011/)) +]] + +.right-column-half[ +- Diversification of focus and impact + - Study of computers in many contexts + - Diversification of apps +- Diversification of input and output + - 2015 first SmartWatch released + - Mobile interaction options proliferate + - Introduction of new mobile interaction techniques, sensors + - Accessibility of mobile devices increases and through the access to navigation, information through the camera and more +- [Rise of HCI](https://blog.prototypr.io/the-rise-of-human-computer-interaction-hci-823dd6286e1d) +] + +--- +.left-column-half[ +## HCI's more shameful moments + +<br>.font-small[2017 [Hawaii missile gaffe](https://theconversation.com/hawaiis-missile-alert-gaffe-why-good-human-machine-design-is-critical-90144) warns incorrectly of incoming nuclear missile +] +] +.right-column-half[ +- 1979-1989 over 1000 people die due to computer-related accidents, many involving HCI interfaces. [1994 report](https://www.cs.uic.edu/~i377/MacKenzie-Computer-related-accidental-death-an-empirical-exploration.pdf). This data still isn't tracked... +- 2015 [Google's image recognition code tags a Black person as a gorilla](https://muse-jhu-edu.offcampus.lib.washington.edu/article/645268/pdf). The fix [as of 2018](https://www.wired.com/story/when-it-comes-to-gorillas-google-photos-remains-blind/) was still a hard coded solution +- 2016 [Did fake news change the outcome of an election?](https://www.npr.org/2018/04/11/601323233/6-facts-we-know-about-fake-news-in-the-2016-election) +- 2019 Discussions increase about the need to address [algorithmic bias in health care](https://www.healthaffairs.org/do/10.1377/hblog20191031.373615/full/). Articles show how [race is baked into health care decision making algorithms](https://www.statnews.com/2020/06/17/racial-bias-skews-algorithms-widely-used-to-guide-patient-care/) while patients do not have the right to know the basis +- 2020 [Algorithm leads to false arrest of Black man](https://www.npr.org/2020/06/24/882683463/the-computer-got-it-wrong-how-facial-recognition-led-to-a-false-arrest-in-michig) +] + +--- +# HCI in the Future + +How do we invent a preferable future? an inclusive future? +- What will the future look like? +- Who needs to help design the future for us to achieve this? +- Who needs to use technology in the future for us to achieve this? + +--- + +# <span class="fa-stack fa-lg"> <i class="fa fa-comment fa-stack-2x"></i> <i class="fa fa-cloud fa-stack-2x"></i> </span> Think Ahead + +Question we will discuss in lecture: How is it changing us as individuals and a society? + +??? +- Social networking has been implicated in revolutions and elections. +- Interfaces designs have impacted health and safety. + + +--- +# Summary (somewhat tongue in cheek) + + +Welcome to the class! + +All of HCI was already invented (sort of!) + +HCI has a huge influence on individuals and society + +HCI is really all of computer science diff --git a/slides/wk01/img/drawing/CRT_display.jpg b/slides/wk01/img/drawing/CRT_display.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6e7315151756a6b0b81795cf9da1e461c26154df Binary files /dev/null and b/slides/wk01/img/drawing/CRT_display.jpg differ diff --git a/slides/wk01/img/drawing/DrawingPanel.png b/slides/wk01/img/drawing/DrawingPanel.png new file mode 100644 index 0000000000000000000000000000000000000000..a80c2e8f320be3df12dcc7248e1824ef267f3ea8 Binary files /dev/null and b/slides/wk01/img/drawing/DrawingPanel.png differ diff --git a/slides/wk01/img/drawing/LED_display.jpg b/slides/wk01/img/drawing/LED_display.jpg new file mode 100644 index 0000000000000000000000000000000000000000..95bd0ad4022000674e359b23a082452d1e895b7b Binary files /dev/null and b/slides/wk01/img/drawing/LED_display.jpg differ diff --git a/slides/wk01/img/drawing/activity_lifecycle.png b/slides/wk01/img/drawing/activity_lifecycle.png new file mode 100644 index 0000000000000000000000000000000000000000..837eea1fc6721683c4e103348a9e704faf527835 Binary files /dev/null and b/slides/wk01/img/drawing/activity_lifecycle.png differ diff --git a/slides/wk01/img/drawing/activity_lifecycle_full.png b/slides/wk01/img/drawing/activity_lifecycle_full.png new file mode 100755 index 0000000000000000000000000000000000000000..879f51f6e8fafe75d267984680ef63f85b118dc5 Binary files /dev/null and b/slides/wk01/img/drawing/activity_lifecycle_full.png differ diff --git a/slides/wk01/img/drawing/analogtv.jpg b/slides/wk01/img/drawing/analogtv.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c74daaf942b864b1bf0fa5a0948761a35f0576ab Binary files /dev/null and b/slides/wk01/img/drawing/analogtv.jpg differ diff --git a/slides/wk01/img/drawing/android-animate.gif b/slides/wk01/img/drawing/android-animate.gif new file mode 100755 index 0000000000000000000000000000000000000000..0fb1d08fd616979b31c4390966e7c2e3410b2c4f Binary files /dev/null and b/slides/wk01/img/drawing/android-animate.gif differ diff --git a/slides/wk01/img/drawing/animation-linear.png b/slides/wk01/img/drawing/animation-linear.png new file mode 100755 index 0000000000000000000000000000000000000000..08bd9fc3dc2ce5d151294b1d2b695a490f2e5f00 Binary files /dev/null and b/slides/wk01/img/drawing/animation-linear.png differ diff --git a/slides/wk01/img/drawing/boundless.gif b/slides/wk01/img/drawing/boundless.gif new file mode 100644 index 0000000000000000000000000000000000000000..b0613367fe237b6755557dd886a4f374380ec574 Binary files /dev/null and b/slides/wk01/img/drawing/boundless.gif differ diff --git a/slides/wk01/img/drawing/circles.png b/slides/wk01/img/drawing/circles.png new file mode 100644 index 0000000000000000000000000000000000000000..81448d0a6c68d6aaa1ecbe4952e90d4345d08006 Binary files /dev/null and b/slides/wk01/img/drawing/circles.png differ diff --git a/slides/wk01/img/drawing/doodlevid.mp4 b/slides/wk01/img/drawing/doodlevid.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..090f7e51963466d13b647eb8fb71fb795925d70c Binary files /dev/null and b/slides/wk01/img/drawing/doodlevid.mp4 differ diff --git a/slides/wk01/img/drawing/dotted.png b/slides/wk01/img/drawing/dotted.png new file mode 100644 index 0000000000000000000000000000000000000000..17a01df4330e0a8eef0d139fbe02ec41ece7910f Binary files /dev/null and b/slides/wk01/img/drawing/dotted.png differ diff --git a/slides/wk01/img/drawing/fastfood.mp4 b/slides/wk01/img/drawing/fastfood.mp4 new file mode 100644 index 0000000000000000000000000000000000000000..8089ac7b2d852079847bf8384d270d2bf5c62591 Binary files /dev/null and b/slides/wk01/img/drawing/fastfood.mp4 differ diff --git a/slides/wk01/img/drawing/filled.png b/slides/wk01/img/drawing/filled.png new file mode 100644 index 0000000000000000000000000000000000000000..eeccdb82550384e358f10b7ac93be3ec419a586a Binary files /dev/null and b/slides/wk01/img/drawing/filled.png differ diff --git a/slides/wk01/img/drawing/fonts.png b/slides/wk01/img/drawing/fonts.png new file mode 100644 index 0000000000000000000000000000000000000000..102d6b0b1adc3a98b0ecc0a220901b4b605195fd Binary files /dev/null and b/slides/wk01/img/drawing/fonts.png differ diff --git a/slides/wk01/img/drawing/interactors.png b/slides/wk01/img/drawing/interactors.png new file mode 100644 index 0000000000000000000000000000000000000000..339747d21e81b21df33a7a971a143991e85ffae4 Binary files /dev/null and b/slides/wk01/img/drawing/interactors.png differ diff --git a/slides/wk01/img/drawing/interpolators.gif b/slides/wk01/img/drawing/interpolators.gif new file mode 100644 index 0000000000000000000000000000000000000000..ad4e46ef00ad0843547fa69de0754dbaf9a7c59b Binary files /dev/null and b/slides/wk01/img/drawing/interpolators.gif differ diff --git a/slides/wk01/img/drawing/messaging.png b/slides/wk01/img/drawing/messaging.png new file mode 100644 index 0000000000000000000000000000000000000000..dbcd315a04f897ddc84b88b144f447f7379ff3b8 Binary files /dev/null and b/slides/wk01/img/drawing/messaging.png differ diff --git a/slides/wk01/img/drawing/messenger-bubble.gif b/slides/wk01/img/drawing/messenger-bubble.gif new file mode 100755 index 0000000000000000000000000000000000000000..77defd497891e79a775a6ca3593cf33e02d2c890 Binary files /dev/null and b/slides/wk01/img/drawing/messenger-bubble.gif differ diff --git a/slides/wk01/img/drawing/pacing.png b/slides/wk01/img/drawing/pacing.png new file mode 100644 index 0000000000000000000000000000000000000000..3997cf6fd6aeee192b83ddd549982c9fb8c857a2 Binary files /dev/null and b/slides/wk01/img/drawing/pacing.png differ diff --git a/slides/wk01/img/drawing/pathanimation.gif b/slides/wk01/img/drawing/pathanimation.gif new file mode 100644 index 0000000000000000000000000000000000000000..f2829498a59210e38138a4a30b31cc26fe948916 Binary files /dev/null and b/slides/wk01/img/drawing/pathanimation.gif differ diff --git a/slides/wk01/img/drawing/pixelcalc.png b/slides/wk01/img/drawing/pixelcalc.png new file mode 100644 index 0000000000000000000000000000000000000000..2a18bcc5ecfea59668643d5654782554323e6631 Binary files /dev/null and b/slides/wk01/img/drawing/pixelcalc.png differ diff --git a/slides/wk01/img/drawing/pollevscreen.jpeg b/slides/wk01/img/drawing/pollevscreen.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..eec7d069978daffee0f466c7388aedf36c734d58 Binary files /dev/null and b/slides/wk01/img/drawing/pollevscreen.jpeg differ diff --git a/slides/wk01/img/drawing/rasterscanning.png b/slides/wk01/img/drawing/rasterscanning.png new file mode 100644 index 0000000000000000000000000000000000000000..95cf22eb58025670e99a1af4b1d3c4d6456e9406 Binary files /dev/null and b/slides/wk01/img/drawing/rasterscanning.png differ diff --git a/slides/wk01/img/drawing/spinners.mov b/slides/wk01/img/drawing/spinners.mov new file mode 100644 index 0000000000000000000000000000000000000000..90bd20b62efaa4fe887a336b371a58025539b6a8 Binary files /dev/null and b/slides/wk01/img/drawing/spinners.mov differ diff --git a/slides/wk01/img/drawing/trans-rotate.png b/slides/wk01/img/drawing/trans-rotate.png new file mode 100644 index 0000000000000000000000000000000000000000..bdc729191278f7a42d4470d4329b243378d1c6a6 Binary files /dev/null and b/slides/wk01/img/drawing/trans-rotate.png differ diff --git a/slides/wk01/img/drawing/unfilled.png b/slides/wk01/img/drawing/unfilled.png new file mode 100644 index 0000000000000000000000000000000000000000..cec58bfe8be1cfd1338377dbadd1f11197ab2af5 Binary files /dev/null and b/slides/wk01/img/drawing/unfilled.png differ diff --git a/slides/wk01/img/drawing/valueanimator.png b/slides/wk01/img/drawing/valueanimator.png new file mode 100755 index 0000000000000000000000000000000000000000..6cc2a13bbfca142b090c3fec00ddf410ca82eeb5 Binary files /dev/null and b/slides/wk01/img/drawing/valueanimator.png differ diff --git a/slides/wk01/img/drawing/views.png b/slides/wk01/img/drawing/views.png new file mode 100644 index 0000000000000000000000000000000000000000..63ed37f80d05ee622489509f2ca0fd9b9aecef78 Binary files /dev/null and b/slides/wk01/img/drawing/views.png differ diff --git a/slides/wk01/img/hci-intro/Lewis.png b/slides/wk01/img/hci-intro/Lewis.png new file mode 100644 index 0000000000000000000000000000000000000000..5c5d43add5041afb5946baa2225de6dc7ce10031 Binary files /dev/null and b/slides/wk01/img/hci-intro/Lewis.png differ diff --git a/slides/wk01/img/hci-intro/alto.jpg b/slides/wk01/img/hci-intro/alto.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b4ca583b8540653a19898578653e4287e6d045b0 Binary files /dev/null and b/slides/wk01/img/hci-intro/alto.jpg differ diff --git a/slides/wk01/img/hci-intro/arab-spring.jpg b/slides/wk01/img/hci-intro/arab-spring.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ac79e327acb07ca70a878c8c84b76b04754097e3 Binary files /dev/null and b/slides/wk01/img/hci-intro/arab-spring.jpg differ diff --git a/slides/wk01/img/hci-intro/community-memory.jpg b/slides/wk01/img/hci-intro/community-memory.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4651c035dae94869fee908b331676b39d4b0c530 Binary files /dev/null and b/slides/wk01/img/hci-intro/community-memory.jpg differ diff --git a/slides/wk01/img/hci-intro/cronkite.png b/slides/wk01/img/hci-intro/cronkite.png new file mode 100644 index 0000000000000000000000000000000000000000..85d3eebdaacbde2c235f083343dc30dd629864d4 Binary files /dev/null and b/slides/wk01/img/hci-intro/cronkite.png differ diff --git a/slides/wk01/img/hci-intro/engelbart.png b/slides/wk01/img/hci-intro/engelbart.png new file mode 100644 index 0000000000000000000000000000000000000000..25df0b9821e1057ce4c3dba78bc2e3633ef39f3f Binary files /dev/null and b/slides/wk01/img/hci-intro/engelbart.png differ diff --git a/slides/wk01/img/hci-intro/estrin.jpg b/slides/wk01/img/hci-intro/estrin.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0ecfe09f6b14e5fb8e502075d67d8fd376a4caab Binary files /dev/null and b/slides/wk01/img/hci-intro/estrin.jpg differ diff --git a/slides/wk01/img/hci-intro/goldberg.jpg b/slides/wk01/img/hci-intro/goldberg.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e391a0edd5e7e70d2638cb5acbc3304f23ac80f2 Binary files /dev/null and b/slides/wk01/img/hci-intro/goldberg.jpg differ diff --git a/slides/wk01/img/hci-intro/google-blooper.jpeg b/slides/wk01/img/hci-intro/google-blooper.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..0fb9f6a15edc02069dddf011c0a7e45644222d49 Binary files /dev/null and b/slides/wk01/img/hci-intro/google-blooper.jpeg differ diff --git a/slides/wk01/img/hci-intro/hawaii.jpg b/slides/wk01/img/hci-intro/hawaii.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2f8abde6ee1c5e18fe62e71c1a68c7149b138988 Binary files /dev/null and b/slides/wk01/img/hci-intro/hawaii.jpg differ diff --git a/slides/wk01/img/hci-intro/ishii.jpg b/slides/wk01/img/hci-intro/ishii.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9179cfeab5f2c5ea8b0153257df2869a2c85f751 Binary files /dev/null and b/slides/wk01/img/hci-intro/ishii.jpg differ diff --git a/slides/wk01/img/hci-intro/memex.png b/slides/wk01/img/hci-intro/memex.png new file mode 100644 index 0000000000000000000000000000000000000000..094de66dc1e71babd0e2159d440b227f757cd87c Binary files /dev/null and b/slides/wk01/img/hci-intro/memex.png differ diff --git a/slides/wk01/img/hci-intro/mobile-apps.jpg b/slides/wk01/img/hci-intro/mobile-apps.jpg new file mode 100644 index 0000000000000000000000000000000000000000..04cbd780353972f0b098c2eaf4626d90d4b64e48 Binary files /dev/null and b/slides/wk01/img/hci-intro/mobile-apps.jpg differ diff --git a/slides/wk01/img/hci-intro/mobile-telegraph.png b/slides/wk01/img/hci-intro/mobile-telegraph.png new file mode 100644 index 0000000000000000000000000000000000000000..80467c73d558996e3bef98d15ab75f7edf4747d7 Binary files /dev/null and b/slides/wk01/img/hci-intro/mobile-telegraph.png differ diff --git a/slides/wk01/img/hci-intro/palm-pilot.jpg b/slides/wk01/img/hci-intro/palm-pilot.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f00d70b065afc837a6f6e7ce3cab95f86809aa1c Binary files /dev/null and b/slides/wk01/img/hci-intro/palm-pilot.jpg differ diff --git a/slides/wk01/img/hci-intro/sketchpad-screens.png b/slides/wk01/img/hci-intro/sketchpad-screens.png new file mode 100644 index 0000000000000000000000000000000000000000..54869734fb21241e285a9da40967771f30565685 Binary files /dev/null and b/slides/wk01/img/hci-intro/sketchpad-screens.png differ diff --git a/slides/wk01/img/hci-intro/smalltalk-interface.png b/slides/wk01/img/hci-intro/smalltalk-interface.png new file mode 100644 index 0000000000000000000000000000000000000000..e5bb5cc43560722e13ce84477f0717a0d04d0502 Binary files /dev/null and b/slides/wk01/img/hci-intro/smalltalk-interface.png differ diff --git a/slides/wk01/img/hci-intro/sutherland.png b/slides/wk01/img/hci-intro/sutherland.png new file mode 100644 index 0000000000000000000000000000000000000000..5f3d71b7c3fa008288e99202f9ccc567257f8544 Binary files /dev/null and b/slides/wk01/img/hci-intro/sutherland.png differ diff --git a/slides/wk01/img/hci-intro/videophones.png b/slides/wk01/img/hci-intro/videophones.png new file mode 100644 index 0000000000000000000000000000000000000000..6cad4552510a46a7c25e7598ad73b6b025f50257 Binary files /dev/null and b/slides/wk01/img/hci-intro/videophones.png differ diff --git a/slides/wk01/img/hci-intro/watches.png b/slides/wk01/img/hci-intro/watches.png new file mode 100644 index 0000000000000000000000000000000000000000..bc3dd12e5b373e6067bfc0699f0fcb61d49628b4 Binary files /dev/null and b/slides/wk01/img/hci-intro/watches.png differ diff --git a/slides/wk01/img/toolkits/activity_lifecycle.png b/slides/wk01/img/toolkits/activity_lifecycle.png new file mode 100644 index 0000000000000000000000000000000000000000..ab0921a717d184442c96c1b8863018d46920a67c Binary files /dev/null and b/slides/wk01/img/toolkits/activity_lifecycle.png differ diff --git a/slides/wk01/img/toolkits/android-components.png b/slides/wk01/img/toolkits/android-components.png new file mode 100644 index 0000000000000000000000000000000000000000..30d90a952ecddebdfddc1ee1cd2586bb42070762 Binary files /dev/null and b/slides/wk01/img/toolkits/android-components.png differ diff --git a/slides/wk01/img/toolkits/android-components2.png b/slides/wk01/img/toolkits/android-components2.png new file mode 100644 index 0000000000000000000000000000000000000000..bb2539c214d6fbaacd876a56443f5533ff5cb5bd Binary files /dev/null and b/slides/wk01/img/toolkits/android-components2.png differ diff --git a/slides/wk01/img/toolkits/android-editor.gif b/slides/wk01/img/toolkits/android-editor.gif new file mode 100644 index 0000000000000000000000000000000000000000..740a8447abe8a2c87ace8be0786161fa86b0c070 Binary files /dev/null and b/slides/wk01/img/toolkits/android-editor.gif differ diff --git a/slides/wk01/img/toolkits/android-swipe.png b/slides/wk01/img/toolkits/android-swipe.png new file mode 100644 index 0000000000000000000000000000000000000000..3f2f55e84b63c7a9e551125f114db550ac804e52 Binary files /dev/null and b/slides/wk01/img/toolkits/android-swipe.png differ diff --git a/slides/wk01/img/toolkits/android-type.jpg b/slides/wk01/img/toolkits/android-type.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ce7404e45aa8b9a8b6f92cfddfd135311694b868 Binary files /dev/null and b/slides/wk01/img/toolkits/android-type.jpg differ diff --git a/slides/wk01/img/toolkits/android-ui.png b/slides/wk01/img/toolkits/android-ui.png new file mode 100644 index 0000000000000000000000000000000000000000..16760d5095a74f896378a3cff9e5b70231161919 Binary files /dev/null and b/slides/wk01/img/toolkits/android-ui.png differ diff --git a/slides/wk01/img/toolkits/animation.gif b/slides/wk01/img/toolkits/animation.gif new file mode 100644 index 0000000000000000000000000000000000000000..31558eec649308ffd33ab15872fb2c10997c6488 Binary files /dev/null and b/slides/wk01/img/toolkits/animation.gif differ diff --git a/slides/wk01/img/toolkits/ape_fwk_hal.png b/slides/wk01/img/toolkits/ape_fwk_hal.png new file mode 100644 index 0000000000000000000000000000000000000000..54927259aed04a9eb299408e941f69a8a615ef03 Binary files /dev/null and b/slides/wk01/img/toolkits/ape_fwk_hal.png differ diff --git a/slides/wk01/img/toolkits/hardware.jpg b/slides/wk01/img/toolkits/hardware.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d92ec906e33b0f37b1f5cc06e2c623e148155fc5 Binary files /dev/null and b/slides/wk01/img/toolkits/hardware.jpg differ diff --git a/slides/wk01/img/toolkits/interactors1.png b/slides/wk01/img/toolkits/interactors1.png new file mode 100644 index 0000000000000000000000000000000000000000..73d003f6a57acf9338a629abb520bc9045e98ebb Binary files /dev/null and b/slides/wk01/img/toolkits/interactors1.png differ diff --git a/slides/wk01/img/toolkits/interface.png b/slides/wk01/img/toolkits/interface.png new file mode 100644 index 0000000000000000000000000000000000000000..efc20af479615d575dd62054d447dabd3ab6f698 Binary files /dev/null and b/slides/wk01/img/toolkits/interface.png differ diff --git a/slides/wk01/img/toolkits/many-uis.png b/slides/wk01/img/toolkits/many-uis.png new file mode 100644 index 0000000000000000000000000000000000000000..1fd7edc75974437e56d41047b159f73339022298 Binary files /dev/null and b/slides/wk01/img/toolkits/many-uis.png differ diff --git a/slides/wk01/img/toolkits/novellibrary.png b/slides/wk01/img/toolkits/novellibrary.png new file mode 100644 index 0000000000000000000000000000000000000000..a6e73b04930f211e0d98219be61682337e99bcc2 Binary files /dev/null and b/slides/wk01/img/toolkits/novellibrary.png differ diff --git a/slides/wk01/img/toolkits/phones.jpeg b/slides/wk01/img/toolkits/phones.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..167440241532cf08b589ef24ad9fb66ec70d7540 Binary files /dev/null and b/slides/wk01/img/toolkits/phones.jpeg differ diff --git a/slides/wk01/img/toolkits/prototype.png b/slides/wk01/img/toolkits/prototype.png new file mode 100644 index 0000000000000000000000000000000000000000..920c6b2ba08cbca1aa6406ff0987b59eda057ce2 Binary files /dev/null and b/slides/wk01/img/toolkits/prototype.png differ diff --git a/slides/wk01/img/toolkits/sandcastle1.png b/slides/wk01/img/toolkits/sandcastle1.png new file mode 100644 index 0000000000000000000000000000000000000000..265a540744d3b32b000231b226bd5df75de1a935 Binary files /dev/null and b/slides/wk01/img/toolkits/sandcastle1.png differ diff --git a/slides/wk01/img/toolkits/sandcastle2.jpg b/slides/wk01/img/toolkits/sandcastle2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..19f5af8ea412f80fbd7e2fb2d1ec0a110b25a755 Binary files /dev/null and b/slides/wk01/img/toolkits/sandcastle2.jpg differ diff --git a/slides/wk01/img/toolkits/sandcastletools.png b/slides/wk01/img/toolkits/sandcastletools.png new file mode 100644 index 0000000000000000000000000000000000000000..befeb3939b90834e9cd3c158e418425e7410ebf2 Binary files /dev/null and b/slides/wk01/img/toolkits/sandcastletools.png differ diff --git a/slides/wk01/img/toolkits/sketch.png b/slides/wk01/img/toolkits/sketch.png new file mode 100644 index 0000000000000000000000000000000000000000..12952eab789096730ba6ea4040107be435804fa6 Binary files /dev/null and b/slides/wk01/img/toolkits/sketch.png differ diff --git a/slides/wk01/img/toolkits/zoom-hall-of-fame.png b/slides/wk01/img/toolkits/zoom-hall-of-fame.png new file mode 100644 index 0000000000000000000000000000000000000000..d11b519efcaff9347aaa4ffe0b0db21b28b2390a Binary files /dev/null and b/slides/wk01/img/toolkits/zoom-hall-of-fame.png differ diff --git a/slides/wk01/img/toolkits/zoom-hall-of-shame.png b/slides/wk01/img/toolkits/zoom-hall-of-shame.png new file mode 100644 index 0000000000000000000000000000000000000000..b11f8a5d8b07fc74eddc9d0468684e13ff39c576 Binary files /dev/null and b/slides/wk01/img/toolkits/zoom-hall-of-shame.png differ diff --git a/slides/wk01/intro.html b/slides/wk01/intro.html index e32c9759e5f8b07a180dedb5ff72450cca6fa9d4..7744053e9278480072292d9dea360ef4a8349892 100644 --- a/slides/wk01/intro.html +++ b/slides/wk01/intro.html @@ -112,11 +112,27 @@ layout: false - HCI: Designing the Future - Learning goals - **Course staff** -- How we will teach this course -- Learning goals -- Assignments & Grading -- Relevance of HCI to all of Computer Science +- Syllabus +--- +.left-column-half[ +# Jennifer Mankoff + +Pronouns: She/her +[Make4All Lab](http://make4all.org) + +I use techonology to improving inclusion in +and accessibility of our digital future. + +- Assistive and health technology +- Fabrication/Physical computing +- Improve inclusion and accessibility +] + +.right-column-half[ + + +] --- @@ -345,56 +361,22 @@ GitGrade Inventor --- # Let's get to know you! -<iframe src="https://embed.polleverywhere.com/free_text_polls/fyXGV5NwPUnzsZ4Bbpso2?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> - ---- -# Aside: Accessibility in this course - -- Our goal is to make this course inclusive and accessible. +Breakout rooms, with questions: -- If you use a screen reader, or just want to see it there is a link to the slide markdown for every slide (demo) +- Where in the world are you? +- What is one thing that helped you most through quarantine? +- What is your favorite food? Make a [wordcloud](https://us.edstem.org/courses/114/sway/host/1156) -- There are live (but automated captions) on every slide deck. - -- The answers to slides can be viewed by pressing P. --- [//]: # (Outline Slide) # Today's goals -- Course staff -- **How we will teach this course** +- HCI: Designing the Future - Learning goals -- Assignments & Grading -- Relevance of HCI to all of Computer Science - ---- -# Class Structure - -Lectures -- Readings before lectures to give you context about what we'll discuss (aiming for 20 minutes) -- Discussion of theory and practice -- Emphasis on active learning including exercises in lectures -- Class attendance is **STRONGLY encouraged**. Recordings won't give you the chance do in-class work - -Labs -- Support for synthesizing the theory and the practice through programming and data analysis - -~~Exams~~ Examlets: Four mini assessments to test your understanding on Weeks 3, 5, 7, 9 -- Practice quizzes (for participation) on Weeks 2, 4, 6, 8, 10 -- No midterm, no final - -Please post (privately) on Ed if you are in a time zone that does not allow you -to partipate during class synchronously. - ---- -# Getting help - -- Questions during class -- Instructor Office Hours -- TA Office Hours -- Ed Message Board +- Course staff +- **Syllabus** --- # Where to find what @@ -412,28 +394,69 @@ either in office hours or through [Ed]({{site.piazza}}) starter code and commit your changes. --- -# Expectations +# Development Environement + +**Background**: Lots of programming expected. Need 143 or equivalent + +Java is our primary language +- Comfortable with Java; basic software engineering; some Data Structures + - Fast-paced introduction to git & Android Studio IDE + - Advanced Java use (e.g. anonymous inner classes) + - Must be comfortable with reading documentation (not just Stack Overflow) + - We will use trees, state machines, etc. + - Math computations (trig) for later assignments + +--- +# Platform: Android + +Most commonly used +interface development platform for Java + +-- + - Open source + - Around 75% market share + - Thousands of supported devices + +-- +- Exposes Android SDK + - Framework for building apps on mobile devices +-- + + - Written in __Java__ and E__X__tensible __M__arkup __L__anguage (__XML__) + +--- +.left-column-half[ +## Android Versioning + + +] +.right-column-half[ +## We're going to target .red[Nougat] :) -- **Background**: Lots of programming expected -- **Sharing**: - - Documentation is required ("Jenny helped me figure out how to do - slow in/slow out animations") - - No direct copying, using your eyes or cut and paste - - Fundementally we want to understand as assess YOUR learning. +That's .red[__19%__] of devices. (Looking into upgrading to Oreo) -See our [Academic Conduct]({{site.baseurl}}/academic-conduct) page for more details +] -??? -talk about this a little deeply. What does direct copying mean? Copy paste? Watching someone else -type it and then typing it into your code (that’s a no no too). Watching a video and typing in that code (also a no no). --- +# Android Versioning -# Expectations and Values +- We encourage you to buy an android phone (no tablets) ~$150 +- ~~Support will have 10 Android phones on loan for 24hrs or less~~ +- Laptop will need sufficient memory/disk space to run <br/> +Android Studio & emulators +- Ask questions on Ed if you need more guidance + +--- +# [Syllabus]({{site.baseurl}}) Scavenger Hunt +--- +# Summary of expectations and values + +- **Sharing**: Yes, but don't copy - **Accessibility**: This course is designed to be accessible - **Inclusivity**: An important value in this class, and in HCI! -- **Academic Integrity**: A course value and requirement -- **Language**: I am Lauren, or Dr. Bricker +- **Academic Integrity**: A course value and requirement See our [Academic Conduct]({{site.baseurl}}/academic-conduct) page for more details +- **Language**: I am Jen, or Dr. Mankoff - **Respect**: This class is a compact between us based on respect - **Healthy Environment**: Your health/mental health are important and we have tried to structure the class to support you (e.g. up to 3 late days without questions asked). @@ -459,7 +482,7 @@ So how's this Distance Learning thing going to work? With shared expections of t - If you do type in the chat, ensure what you are typing is school appropriate and inclusive. - There will be individual and group based activities which you are expected to participate in. (Contact us if you are not able to participate in real time) - +- Please post (privately) on Ed if you are in a time zone that does not allow you to participate during class synchronously so we can accomodate that for exams, etc. --- # Lecture: Instructor Expectations @@ -495,116 +518,6 @@ There will be 3 and sometimes 4 TAs in each section. TAs will A TA who is not actively presenting during a section will act as a moderator. ---- - -# Development Environement - -Java is our primary language -- Need 143 or equivalent -- Comfortable with Java; basic software engineering; some Data Structures - - Fast-paced introduction to git & Android Studio IDE - - Advanced Java use (e.g. anonymous inner classes) - - Must be comfortable with reading documentation (not just Stack Overflow) - - We will use trees, state machines, etc. - - Math computations (trig) for later assignments - ---- -# Platform: Android - -Most commonly used -interface development platform for Java - --- - - Open source - - Around 75% market share - - Thousands of supported devices - --- -- Exposes Android SDK - - Framework for building apps on mobile devices --- - - - Written in __Java__ and E__X__tensible __M__arkup __L__anguage (__XML__) - ---- -.left-column-half[ -## Android Versioning - - -] -.right-column-half[ -## We're going to target .red[Nougat] :) - -That's .red[__19%__] of devices. (Looking into upgrading to Oreo) - -] - ---- -# Android Versioning - -- We encourage you to buy an android phone (no tablets) ~$150 -- ~~Support will have 10 Android phones on loan for 24hrs or less~~ -- Laptop will need sufficient memory/disk space to run <br/> -Android Studio & emulators -- Ask questions on Ed if you need more guidance - ---- - -[//]: # (Outline Slide) -# Today's goals - -- Course staff -- How we will teach this course -- **Learning goals** -- Assignments & Grading -- Relevance of HCI to all of Computer Science - ---- -.left-column[ -# This **week's** learning goals -] -.right-column[ -- What is HCI? Past, present and future -- Get up to speed with Android basics -- Learn about basic abstractions for UI implementation -- Names for common interactors -] ---- -.left-column[ -# Course learning goals: -] -.right-column[ -# Building Interfaces -- Deep understanding of **how to build user interfaces** -- Basic abstractions (layout, event handling, *etc.*) -- Implementing best practices: Undo, Accessibility, Feedback, Errors, -*etc.* -- Exploration of advanced UI concepts: Ubicomp, Sensing, AR, *etc.* -] ---- - -.left-column[ -# Course learning goals: -] -.right-column[ -# Iterative Design - -- Basic understanding of **Iterative Design** -- Why designers are valuable -- Iterative design process -- How designers get data from users -] ---- - -[//]: # (Outline Slide) -# Today's goals - -- Course staff -- How we will teach this course -- Learning goals -- **Assignments & Grading** -- Relevance of HCI to all of Computer Science - --- # Assignment Structure @@ -646,170 +559,3 @@ Projects: Implementation of Interfaces .right-column[ # [Assignments]({{site.baseurl}}/assignments) ] ---- -[//]: # (Outline Slide) -# Today's goals - -- Course staff -- How we will teach this course -- Learning goals -- Assignments & Grading -- **Relevance of HCI to all of Computer Science** - ---- -# Human-Computer Interaction (HCI) - -A science of the artificial -- Human - - Anyone impacted by the existence of the program - - end users -- Computer - - Artificial thing human is interacting with -- Interaction - - How the artificial stuff is actually used -- 48% of app code [Myers & Rosson, CHI'92]; probably more now! - ---- -# Pre-work check - -<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/Cbv53A5TsXjCnG5QCzHJc?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> - ---- - -.left-column-half[ - -] -.right-column-half[ -Robida's vision of a cordless telegraph (1906) -] ---- -.left-column-half[ - -] -.right-column-half[ -Commercial vision of a wireless private video phone (1929) -] ---- -.left-column-half[ - -] -.right-column-half[ -.quote[The MEMEX 'is a desk that can instantly bring files and material on -any subject to the operators fingertips....' (Bush, 1945, 'As We May -Think', Atlantic Monthly)] -] - ---- -.left-column-half[ - -] -.right-column-half[ -A wrist-watch cellphone prototype (1947), which captured popular imagination as shown in this Dick Tracy stamp -] ---- -.left-column-half[ - -] -.right-column-half[ -Ivan Sutherland. 1964. The sketchpad graphical communication system in action. -<small> In Proceedings of the SHARE design automation workshop (DAC '64). ACM, New York, NY, USA, 6.329-6.346.</small> -] ---- -.left-column-half[ - -] -.right-column-half[ -Sketchpad introduced direct manipulation, constraints, and chorded input. -] ---- - - -# Sketchpad Inspires Engelbart - -.left-column-half[ - -![:youtube Engelbart's *Mother of all Demos*. His presentation included windows; -hypertext; graphics; video conferencing; the computer mouse; word -processing; dynamic file linking; revision control; collaborative -real-time editing; all new inventions!, B6rKUf9DWRI] -] -.right-column-half[ -Engelbart's *Mother of all Demos* His presentation included many all new inventions: -- windows -- hypertext -- graphics -- video conferencing -- the computer mouse -- word processing -- dynamic file linking -- revision control -- collaborative real-time editing -] -.footnote[ -December 9 1968 at the -Fall Joint Computer Conference. -] ---- -.left-column-half[ - - -] -.right-column-half[Engelbart inspires many things, including -- the Xerox Star -- the first -graphical personal computer -- Smalltalk 80 the first UI Toolkit -] ---- -# HCI in the Future - -"The Future" is alway relative... - -[](https://www.youtube.com/watch?v=V6DSu3IfRlo) - ---- - -# HCI in the Future - -How do we invent a preferable future? an inclusive future? -- What will the future look like? -- Who needs to help design the future for us to achieve this? -- Who needs to use technology in the future for us to achieve this? - ---- - -# HCI in the Future - -Discussion: How is it changing us as individuals and a society? - -??? -- Social networking has been implicated in revolutions and elections. -- Interfaces designs have impacted health and safety. ---- - -# HCI in the Future - -Watch videos and discuss: -- [Victoria Belotti](https://www.youtube.com/watch?v=IK3rW1dSWoE) -- [Tovi Grossman](https://www.youtube.com/watch?v=DFPnwaoxSQU) -- [Jon Froehlich](https://www.youtube.com/watch?v=qRlIuWWdkHY) (UW) -- [Leysia Palen](https://www.youtube.com/watch?v=jmXjaMs2tUE) -- [Many more](http://www.id-book.com/talkingheads.php) if you want to keep exploring. - ---- -# Summary (somewhat tongue in cheek) - - -Welcome to the class! - -All of HCI was already invented (sort of!) - -HCI has a huge influence on individuals and society - -HCI is really all of computer science diff --git a/slides/wk01/toolkits.html b/slides/wk01/toolkits.html new file mode 100644 index 0000000000000000000000000000000000000000..b3eebd1d97db20302d4bc4518efb1591f379ff80 --- /dev/null +++ b/slides/wk01/toolkits.html @@ -0,0 +1,910 @@ +--- +layout: presentation +title: Basic Toolkit Abstractions +description: Discussion of basic abstractions for user interfaces +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Core Toolkit Abstractions + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +name: normal +layout: true +class: +--- +layout: false + +| Hall of Shame | Hall of Fame| +|---|---| +| |  +--- +| Hall of Shame(?) | Hall of Fame | +|---|---| +| |  +--- + +--- +# Announcements + +- We have Ed ([use us.edstem.org](https://us.edstem.org/dashboard) to log in) +- Reminder: set up your machine before lab tomorrow! + - Android Basics: Follow [this](https://developer.android.com/training/basics/firstapp) tutorial to create an Android Application. + - Continue with the tutorial to also [run your app](https://developer.android.com/training/basics/firstapp/running-app) either on an emulator or on an Android Device. + - Git Setup: [macOS](https://courses.cs.washington.edu/courses/cse154/19au/resources/assets/atomgit/macosx/), [win](https://courses.cs.washington.edu/courses/cse154/19au/resources/assets/atomgit/windows/) (ignore pieces about Atom as we use Android Studio) +Make sure you have git setup on your computer, follow above instructions + - If you have never used git before read through [this](http://cse340-20wi.pages.cs.washington.edu/website/docs/git.html#1) and [this](https://courses.cs.washington.edu/courses/cse331/18au/handouts/tools/versioncontrol.html) (Android Studio ≈ Intellij) + - Ensure that you can clone from CSE GitLab, (we recommend cloning via SSH) +- There are now two new helpful pages + - An [Academic Conduct]({{site.baseurl}}/academic-conduct) page + with Application Content and Collaboration Policies section. (Linked to from home page) + - A [GitGrade]({{site.baseurl}}/docs/gitgrade) tutorial page linked to from + the [docs]({{site.baseurl}}/docs) page. Note: there are still more tutorials we are building up. + +??? +Our learning goals for the first lab are Android project structure, GitGrade and first assignment Doodle. +Please follow the instructions below to be familiar with Android and have your Git ready before this Thursday section: + +--- +# Java refresher course + +The TAs will be hosting a Java refresher that covers most facets of Java we will be using in this +class (and maybe some additional Java 8+ material that is nice to know). Which includes: + +- Inheritance +- Generics +- Anonymous Inner Classes +- Lambdas (and "::" notation) + +If these are not topics you're comfortable with (some are not directly covered in any CS class), come join us! + +Time: 5:30-6:30pm Thursday +Zoom link in Ed + +--- +[//]: # (Outline Slide) +# Today's goals + +- **Toolkits & Toolkit Users** +- Introduce the interactor hierarchy +- How does an interactor draw? + +--- +# What does it take to run an app on a phone? + +![:youtube An android screen with many icons on it; then an app opens and the user can be seen drawing a line. When they finish an undo button appears, 2TJPjyMQGkM] + +??? + +- Give them 60 seconds to think about it and talk with their neighbor. +- What you want to get at is the application stack + +--- +# The Application Stack +.left-column[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class ap,o,w yellow + class hlt,t green + class h darkblue +</div> +] +.right-column[ + +] + +??? +Get the class to brainstorm about what hardware is visible on the screen + +Point out that they all have stacks and the things we are learning are not android specific + +--- +.left-column[ + +] +.right-column[ +## Android Hardware + +] + +??? +Get the class to brainstorm about what hardware is available on android vs their laptop and how that might influence user interfaces + +--- +# The Application Stack +.left-column[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class ap,h,w yellow + class hlt,t green + class o darkblue +</div> +] + +.right-column[ +What services does it provide? + +How does this impact what you might build in an application? +] + +??? +Class brainstorming about what OS does +1) manages shared resources (e.g. memory, processor power) +2) has the power to start and pause and stop applicatinos + +--- +.left-column[ +# Impact of Android OS on apps +] +.right-column[ + +] + +??? +How does the operating system influence what +you can build? How does this differ on an android device from a desktop? + +The Android Activity Lifecycle starts when an activity is launched (by the OS); which leads to +callbacks to the application such as onCreate, onStart and onResume. Once the activity is running, +it may be paused, stopped or destroyed. Things like priority and available memory may +influence this process, as does the user opening the app. + +--- +# The Application Stack +.left-column[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class ap,o,h yellow + class hlt,t green + class w darkblue +</div> +] +.right-column[ + +- Manages window size and visibility across many applications +- May trigger clipping and redraw + - Lots of cases where this arises on a desktop (overlapping windows, minimization, etc) + - Toolkit handles this for you, but can lead to callbacks; redraw events + +Where is this on Android? +] + +??? +--- +# The Application Stack +.left-column[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class ap,w,h,o yellow + class hlt,t green + class t darkblue +</div> +] + +.right-column[ +Services a toolkit supports (in the order we will learn them) +- Graphics +- Animation +- Layout +- Accessibility +- Event Handling +- Interactive Components +- Undo +- Sensing (not covered) +- Data (not covered) + - databases; apis +] + +??? +What are some things you expect every interface to have that I didn't mention here? +Example: Undo (we will learn about this) + +Do all user interface toolkits have all of these? + +--- +# What is an Interface Toolkit + +(Main subject of this course) +- Difference between toolkit and IDE (Integrated Development Environment)? +- Difference between toolkit and API (Application Programming Interface)? + +Structure of a Toolkit +- Library of components +- Architecture + +??? +Connect what they learned in 143 (i.e that they used the SDK for Java which had a bunch of libraries that had pre-defined code). The IDE most people used was JGrasp. + +--- +# Example: Doodle assignment: Makes use of the Android Toolkit + +Inspired by Google's Doodles, and will include drawing animation (to be discussed): <br> +[Example from last year's class](img/drawing/doodlevid.mp4) + +![:youtube Animation showing images of food moving in a line down the page around a U finally forming a W, Sx8oiJGjaIM] + +--- +.left-column40[ +## Doodle Assignment + +Uses of Android Toolkit **Library** (green) + +<div class="mermaid"> + graph TD + Activity[Activity] + Activity -->|...| Doodler[Doodler] + Doodler --> Part1[Part1] + Part1 --> Part1Activity[Part1Activity] + Part1 --> Part2Activity[Part2Activity] + + View[View] + View --> ImageView[ImageView] + View --> TextView[TextView] + View --> LineView[LineView] + + classDef yellow font-size:12pt,text-align:center + classDef green font-size:12pt,text-align:center + classDef blue font-size:12pt,text-align:center + + class Part1,Part1Activity,Part2Activity,LineView yellow + class Activity,View,ImageView,TextView green + class Doodler blue + +</div> +] + +.right-column30[ +## Classes we are using in Doodle + +- Doodler (which you don't edit) *extends* [Activity](https://developer.android.com/reference/android/app/Activity) +- Part1 *extends* Doodler. It implements *helper methods*. +- Part1Activity and Part2Activity both extend Part1 (and use the helper methods) +- LineView *extends* [View](https://developer.android.com/reference/android/view/View) (so does [ImageView](https://developer.android.com/reference/android/widget/ImageView.html) and [TextView](https://developer.android.com/reference/android/widget/TextView.html) + +] + +??? +Green: Android toolkit +Blue: Classes we provide you don't have to modify +Yellow: Classes you implement + +Remind students that they did do inheritance in 142/143 like with Critters. + +--- +.left-column40[ +# Doodle: What you will learn + +- How the Android Activity Lifecycle works (*Architecture*) +- How to use Android Toolkit `View` objects to show things on screen (*Library*) +- How to create a custom `View` to draw lines on screen (*Library*) +- All about Android's `Canvas` object and how to use it to draw on screen (*Library*) +- How the Android Toolkit supports animation (*Architecture & Library*) +] + +.right-column40[ +# Doodle: What you will do + +- Modify Android Activities (`Part1` and `Part1Activity`) +- Implement methods to add images, text and lines +- Create the custom view `LineView` +- Override `onDraw` to draw on the screen in `LineView` +- Use `ObjectAnimator` to animate Text and other things +- Create a custom doodle in `Part2Activity` +] +--- + +# The Application Stack +.left-column[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class w,ap,o,h yellow + class t green + class hlt darkblue +</div> +] +.right-column[ + +] +--- +# Subtle influence of tools + + + +--- +# Subtle influence of tools + + + +--- +# Subtle influence of tools + +Whorfian Effects +- The way in which our tools influence how we think and thus what we do. + +- Origins are linguistic (e.g. the way in which language about color affects what we perceive) + +- Can even affect perception of human emotion! +http://www.radiolab.org/story/91730-new-words-new-world/ + + +--- +# The Application Stack +.left-column[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class w,o,h yellow + class t,hlt green + class ap darkblue +</div> +] +.right-column[ + +] + +??? +Get class to discuss all the things that a UI like this does a little bit. What do you have to think about to build an application? How might a toolkit help with this? +--- + +# Summary: The Application Stack +.left-column[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + + class ap,w,o,h yellow + class hlt,t green + +</div> +] + +.right-column[ +- **Application Program** - An application designed for an end user to perform specific tasks. +- **High Level Tools** - Graphical interfaces that that let you specify parts of your interface (such as layout). Subject to Worfian Effects +- **Toolkit** - A set of libraries and tools you use to develop applications. +- **Window System** - Manages window size and visibility across applications +- **OS** - The operating system that is running on the device, providing system services such as acceess to displays, input devices, file I/O +- **Hardware** - The device that is running software, such as an Android Phone + +High level tools and the the Toolkit are generally packaged as part of a toolkit but really should be thought of as separate things. (You can program the toolkit without the tools. ) +] + +--- + +.left-column[ +## Developer roles + +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class ip,t yellow + class w,l,a green +</div> +] +.right-column[ +## Let's say you want to build an app + +In this class, you will use the Android Toolkit + +Who are we when we build the app? +] + +--- +.left-column[ +## Developer roles +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class t yellow + class w,l,a green + class ip darkblue +</div> +] +.right-column[ +**Interface Programmers** combine library elements according to toolkit rules & following +constraints of architecture; common to all UI toolkits + +In Android +- Construct app out of `Views` +- Assembly happens in an `Activity` in `onCreate()` using `addView(View)` + +In Doodle +- You add views when you implement `addImage`, `addText` and `addLine` in `Part1.java` +- You will need to call `doodleView.addView([view])` (`doodleView` is defined in `Doodler`) +] +--- +# How does the toolkit know what to draw? + + + + +- Discuss +??? +discuss with your neighbor based on the reading what does the +toolkit need to know to draw this +- what to draw; where to draw it +- what are good abstractions for this? +- Hierarchy normally reflects spatial containment relationships + +-- + +- Deconstruct + + - Let's list all the components... and arrange them in a tree + +??? + +- deconstruct this interface into an interactor hierarchy + +--- + + + +<div class="mermaid"> +graph LR +W(Window) --> L(LeftSide:Icon) +W --> M(Middle:Label) +W --> R(Right:Close Button) + +classDef start font-size:14pt,text-align:center +classDef blue font-size:14pt,text-align:center + +class W start +class M,R,L blue + +</div> + +--- +# More complex example + + + +--- +.left-column[ +## More complex example + +] + +.right-column[ +<div class="mermaid"> +graph LR +W(Window) --> T(Controls) +W --> M(Chats) +W --> Q(Text Entry) +T --> A[Button:Messages] +T --> B[Label:288-88] +T --> C[Button:Edit] +M --> G[Button:Call] +M --> H[Button:Add to Contacts] +M --> E[Chat1] +M --> F[Chat2...] +E --> I[Date] +E --> J[Chat Msg] +E --> K[Arrow] + +classDef start font-size:14pt,text-align:center +classDef blue font-size:14pt,text-align:center + + +class W start +class T,M,E,Q,A,B,C,G,H,E,F,I,J,K blue + +</div> +] +--- +# How is the tree used for drawing? + +Interface Programmer: +- Build and interface == build an interactor hierarchy +- Change an interface == change the interactor hierarchy (or its parameters) + + +--- + +.left-column-half[ +## How does Android let you do this +Architecture invokes the work to construct the *interactor hierarchy* +by calling `onCreate()` + +In Doodle +- *Doodler* overrides `onCreate()` (from it's grandparent *Activity* class) +- *Doodler* provides a helper method for this (`doodle()`) which you + override in `Part1Activity` and `Part2Activity`. +] +.right-column-half[ +```java + +abstract class Doodler extends AppCompatActivity { + // ... + @Override + protected void onCreate(@Nullable Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + // ... + doodle(...) + } + + abstract protected void doodle(FrameLayout doodleView); +``` +] + +--- +# How is the tree used for drawing? + +The interface programmer is not really *drawing on a canvas*, they are *adding views* to a *parent view* in `onCreate()` (or later if something changes) + +This is *setup* for the interface being rendered: We are constructing +the interactor (also called component) hierarchy when we call these methods. + +This happens in `Doodle` inside of `Part1.java` in `addImage()` when we say `doodleView.addView(imageView);` + +You have to do it in `addText()` and `addLine()` too. + +--- +# How is the tree used for drawing? +Toolkit Architecture: +- Draw an interface == walk the tree and tell interactors to draw +- Update an interface == walk the tree, only redraw things that are marked as dirty +- Deliver input == walk the tree and deliver events (after midterm) + +--- +# How does an interactor draw? + +Interactors (Views in Android): +- Receive draw (`onDraw()` in Android) +- Show feedback () (Draw onto `Canvas` in Android) +- Respond to input (Future assignment!) + +You will create a custom interactor, a `LineView`, which has to implement `onDraw(Canvas canvas)` + +You can use all the [Canvas](https://developer.android.com/reference/android/graphics/Canvas) methods (we'll talk more about these in the [Drawing](Drawing.html) lecture on Friday) + +??? +HTML is like this too + +<!-- --- --> +<!-- .left-column-half[ --> +<!-- ## Most GUIs still use the same 7-10 interaction techniques --> +<!-- - Basic GUI components invented 1970s --> +<!-- - Windows, Icons, Menus, Pointers (“WIMPâ€) --> +<!-- - “Perfected†by Macintosh in 1984 --> +<!-- - Not much change since then (even with web) --> +<!-- ] --> +<!-- .right-column-half[ --> +<!-- ## Aside: Significant Stagnation --> + + +<!--  --> +<!-- ] --> +<!-- ??? --> +<!-- - Work well, uniform --> +<!-- - Good for usability --> +<!-- - GUI is victim of its own success --> +<!-- - Opportunities lost by not customizing interaction techniques to tasks --> +<!-- - Hard for better techniques to get traction --> +<!-- - Only very recently with mobile devices (touch based) have we seen lots of new techniques get a major foothold --> + +<!-- --- --> +<!-- .left-column[ --> +<!-- ## In class Exercise: Interface Developer, using Android Toolkit --> + +<!-- Quick Tour | tutorial --> +<!-- for [building a ui](https://developer.android.com/training/basics/firstapp/building-ui)] --> + +<!-- .right-column[ --> +<!--  --> +<!-- ] --> + +--- +.left-column[ +## Developer Roles +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class ip,t yellow + class w,l,a green + class w darkblue +</div> +] +.right-column[ +**Components** are small, reusable, well defined pieces of code that allow programmers to +design and develop our UIs in a consistent way ([source](https://blog.bitsrc.io/building-a-consistent-ui-design-system-4481fb37470f)). +- A UI component can create both functional and visual consistency in an application or set of applications. +- Often components support new forms of input/direct manipulation. +- Component development is supported by many toolkits + +**Component Developers** create these new, re-usable components. + +Example: In the Doodle assignment you will be developing the `LineView` interactor, a new component +for drawing lines on the screen at certain locations. + +] +--- +# Component Developer: Developing Novel Interaction Techniques + +.left-column-half[ +- A method for carrying out a specific interactive task +- Example: enter a number in a range + - Swiping to invoke an action + - Gesture based text entry + + +] + +.right-column-half[ + + +] +--- +.left-column[ +## Developer Roles +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class ip,t yellow + class w,a green + class l darkblue +</div> +] +.right-column[ +**Library Extenders** are similar to component developers, but may +create new forms of layout, types of input, etc. + +- Supported by a few toolkits +- Examples: + - The Java JDK can be extended by developers who create a set of components in a `.jar` file +that is included with a software project (example [JFreeChart](http://jfree.org/jfreechart/)) + - JavaScript has been extended by + [many libraries](https://en.wikipedia.org/wiki/List_of_JavaScript_libraries), such as Bootstrap or jQuery. +] +--- +# Library Extender: Toolkit Support for Styling + +.left-column-half[ + +] +.right-column-half[ +subArctic allowed visually rich, dynamically resizable, images to be +provided using primarily conventional drawing tools (and with no +programming or programming-like activities at all). Scott E. Hudson +and Kenichiro Tanaka. (UIST '00) +] +--- +.left-column[ +## Developer Roles +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class ip,t yellow + class w,l,a green + class a darkblue +</div> +] +.right-column[ +**Architecture Extenders** modifies the flow of information within a toolkit to create entirely +new effects (e.g. adding support for command objects) + +Supported by very few toolkits +] +--- +# Architecture Extender: Animation + +.right-column50[ + +] + +Integrated into existing GUI toolkit + +Primary abstraction: transition +- models movement over time +- through arbitrary space of values (e.g., color) +- screen space is most common + + +.footnote[Great post about [types of animation on mobile phones](https://yalantis.com/blog/-seven-types-of-animations-for-mobile-apps/), also +source of the image] + +--- +.left-column[ +## Developer Roles + +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + classDef darkblue font-size:14pt,text-align:center + + class ip,t yellow + class w,l,a green + class t darkblue +</div> +] +.right-column[ +**Toolkit builders** create entirely new toolkits that enable radical new forms of interaction + +e.g. RapID https://make4all.org/portfolio/rapid/ +] +--- +# Toolkit Builder: Physical Interfaces +Creates entirely new toolkits that changes what we can do + + +![:youtube Physical Interface made out of RFID tags,4k15uXpp7-g] + +--- +# Toolkit for Overloading Existing Interfaces +Prefab supports pixel based enhancements: write interpretation logic that can be composed, reused, and shared to manage the multi-faceted nature of pixel-based interpretation; robustly annotate interface elements with metadata needed to enable runtime enhancements. + +![:youtube Prefab Demo,lju6IIteg9Q] + +--- +# Summary: Developer Roles +.left-column[ +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + + class ip,w,l,a,t yellow +</div> +] +.right-column[ +- **Interface Programmer** - Uses high level tools and toolkit to create a user interface. +- **Component Developer** - Creates new, re-usable interators or interaction techniques. +- **Library Extender** - Similar to Component Developer, creates a system of components such as new forms of layout, types of input, etc. +- **Architecture Extender** - Modifies the flow of information within a toolkit to create entirely new effects +- **Toolkit Builder** - Creates entirely new toolkits that enable radical new forms of interaction. +] +--- +# Summary: In this class we look at General Principals + +Particular toolkits tend to be mired in a particular platform + +Along comes the next big thing (e.g., iPhone) and you’ll need to +learn a new one + +We frequently will use Android as an example of these concepts + +If you learn the structures/concepts (and esp. rationale behind them) +that survives change better diff --git a/slides/wk02/graphs/example.mmd b/slides/wk02/graphs/example.mmd new file mode 100644 index 0000000000000000000000000000000000000000..2844fd51b384d36d23313011eef5290ab0919dab --- /dev/null +++ b/slides/wk02/graphs/example.mmd @@ -0,0 +1,2 @@ +graph LR + Start --> Stop \ No newline at end of file diff --git a/slides/wk02/graphs/simple.dot b/slides/wk02/graphs/simple.dot new file mode 100644 index 0000000000000000000000000000000000000000..454fdd5d94344e177a90e2602850802f0718a5c6 --- /dev/null +++ b/slides/wk02/graphs/simple.dot @@ -0,0 +1,5 @@ +digraph simplestate { +A --> B; +B --> A; +} + diff --git a/slides/wk02/img/animation/android-animate.gif b/slides/wk02/img/animation/android-animate.gif new file mode 100755 index 0000000000000000000000000000000000000000..0fb1d08fd616979b31c4390966e7c2e3410b2c4f Binary files /dev/null and b/slides/wk02/img/animation/android-animate.gif differ diff --git a/slides/wk02/img/animation/animation-linear.png b/slides/wk02/img/animation/animation-linear.png new file mode 100755 index 0000000000000000000000000000000000000000..08bd9fc3dc2ce5d151294b1d2b695a490f2e5f00 Binary files /dev/null and b/slides/wk02/img/animation/animation-linear.png differ diff --git a/slides/wk02/img/animation/animation-nonlinear.png b/slides/wk02/img/animation/animation-nonlinear.png new file mode 100644 index 0000000000000000000000000000000000000000..999dddaa39b03e378e97aee307f76efa27605b39 Binary files /dev/null and b/slides/wk02/img/animation/animation-nonlinear.png differ diff --git a/slides/wk02/img/animation/valueanimator.png b/slides/wk02/img/animation/valueanimator.png new file mode 100755 index 0000000000000000000000000000000000000000..6cc2a13bbfca142b090c3fec00ddf410ca82eeb5 Binary files /dev/null and b/slides/wk02/img/animation/valueanimator.png differ diff --git a/slides/wk02/img/layout/1_portrait.png b/slides/wk02/img/layout/1_portrait.png new file mode 100644 index 0000000000000000000000000000000000000000..9bd05c02c72702aa248ba15346a46bf1e9ae0036 Binary files /dev/null and b/slides/wk02/img/layout/1_portrait.png differ diff --git a/slides/wk02/img/layout/android-linear.png b/slides/wk02/img/layout/android-linear.png new file mode 100644 index 0000000000000000000000000000000000000000..6b252da67203bb2e57a21a65c2b442d1e7e14a9d Binary files /dev/null and b/slides/wk02/img/layout/android-linear.png differ diff --git a/slides/wk02/img/layout/colormeter.png b/slides/wk02/img/layout/colormeter.png new file mode 100644 index 0000000000000000000000000000000000000000..0ce396fb04418a818bbabfdc8d4aa75653a62936 Binary files /dev/null and b/slides/wk02/img/layout/colormeter.png differ diff --git a/slides/wk02/img/layout/colormetercircled.png b/slides/wk02/img/layout/colormetercircled.png new file mode 100644 index 0000000000000000000000000000000000000000..7846c8e37ff787c175f38683920c4619ee47ff64 Binary files /dev/null and b/slides/wk02/img/layout/colormetercircled.png differ diff --git a/slides/wk02/img/layout/design-view.png b/slides/wk02/img/layout/design-view.png new file mode 100644 index 0000000000000000000000000000000000000000..76f63830d1dbd0e0388c6ce7f57bd2b3d7618db9 Binary files /dev/null and b/slides/wk02/img/layout/design-view.png differ diff --git a/slides/wk02/img/layout/facebook-bad.png b/slides/wk02/img/layout/facebook-bad.png new file mode 100644 index 0000000000000000000000000000000000000000..3803fe4e0e5e0d8ffb69f4e5b6c4253922a87359 Binary files /dev/null and b/slides/wk02/img/layout/facebook-bad.png differ diff --git a/slides/wk02/img/layout/jackbox-bad.png b/slides/wk02/img/layout/jackbox-bad.png new file mode 100644 index 0000000000000000000000000000000000000000..d1c9feef5ea3e5ea45202ea096aa2f63b3c7b274 Binary files /dev/null and b/slides/wk02/img/layout/jackbox-bad.png differ diff --git a/slides/wk02/img/layout/layout-demo.png b/slides/wk02/img/layout/layout-demo.png new file mode 100644 index 0000000000000000000000000000000000000000..78b3721df71bc0e3bd03ad5271a0b56b103e513f Binary files /dev/null and b/slides/wk02/img/layout/layout-demo.png differ diff --git a/slides/wk02/img/layout/layout-inspector-menu.png b/slides/wk02/img/layout/layout-inspector-menu.png new file mode 100644 index 0000000000000000000000000000000000000000..84f498c204863802f17a63845e60d19ce7226653 Binary files /dev/null and b/slides/wk02/img/layout/layout-inspector-menu.png differ diff --git a/slides/wk02/img/layout/part3-runtime.png b/slides/wk02/img/layout/part3-runtime.png new file mode 100644 index 0000000000000000000000000000000000000000..e4d3a100d8ed6bfe5ead63b5feb07ee0c231337c Binary files /dev/null and b/slides/wk02/img/layout/part3-runtime.png differ diff --git a/slides/wk02/img/layout/pinterest-android.png b/slides/wk02/img/layout/pinterest-android.png new file mode 100644 index 0000000000000000000000000000000000000000..b07ff8eb6c83c79e5b44007a16da7d1b47c88536 Binary files /dev/null and b/slides/wk02/img/layout/pinterest-android.png differ diff --git a/slides/wk02/img/layout/pinterest-replica.png b/slides/wk02/img/layout/pinterest-replica.png new file mode 100644 index 0000000000000000000000000000000000000000..ca0505920df258ef1f2bfb69e98559e25bd59878 Binary files /dev/null and b/slides/wk02/img/layout/pinterest-replica.png differ diff --git a/slides/wk02/img/layout/watch.png b/slides/wk02/img/layout/watch.png new file mode 100644 index 0000000000000000000000000000000000000000..a82e63211658da388620dbd69e66bac095532167 Binary files /dev/null and b/slides/wk02/img/layout/watch.png differ diff --git a/slides/wk02/img/layout/watch2.png b/slides/wk02/img/layout/watch2.png new file mode 100644 index 0000000000000000000000000000000000000000..bdd0e20b7981219a126087817f39a68708d532a3 Binary files /dev/null and b/slides/wk02/img/layout/watch2.png differ diff --git a/slides/wk02/img/layout/windowsLayout.png b/slides/wk02/img/layout/windowsLayout.png new file mode 100644 index 0000000000000000000000000000000000000000..786c745ae438c2eade82a1e2df63e1ceebc34695 Binary files /dev/null and b/slides/wk02/img/layout/windowsLayout.png differ diff --git a/slides/wk02/img/people/777777.png b/slides/wk02/img/people/777777.png new file mode 100644 index 0000000000000000000000000000000000000000..e16d234794a0ad23ae1da057e76a3c945901d621 Binary files /dev/null and b/slides/wk02/img/people/777777.png differ diff --git a/slides/wk02/img/people/777777w.png b/slides/wk02/img/people/777777w.png new file mode 100644 index 0000000000000000000000000000000000000000..bbd487ec276a647eefd22dcfed2882e7b9d8e57f Binary files /dev/null and b/slides/wk02/img/people/777777w.png differ diff --git a/slides/wk02/img/people/adobe.jpg b/slides/wk02/img/people/adobe.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7d830e46a1851ba4bd3aaf119ee8cf219d262975 Binary files /dev/null and b/slides/wk02/img/people/adobe.jpg differ diff --git a/slides/wk02/img/people/amazon.png b/slides/wk02/img/people/amazon.png new file mode 100644 index 0000000000000000000000000000000000000000..a4aab78af76c80ed70a1bc040c7226612ec2a8a0 Binary files /dev/null and b/slides/wk02/img/people/amazon.png differ diff --git a/slides/wk02/img/people/badviz.png b/slides/wk02/img/people/badviz.png new file mode 100644 index 0000000000000000000000000000000000000000..f7dbf5fef601adbdc7c8627c1bd32244ed5de9c2 Binary files /dev/null and b/slides/wk02/img/people/badviz.png differ diff --git a/slides/wk02/img/people/bluelinks.png b/slides/wk02/img/people/bluelinks.png new file mode 100644 index 0000000000000000000000000000000000000000..78cc44cbed982de6cce60284ec1330985dd18451 Binary files /dev/null and b/slides/wk02/img/people/bluelinks.png differ diff --git a/slides/wk02/img/people/blueonblue.png b/slides/wk02/img/people/blueonblue.png new file mode 100644 index 0000000000000000000000000000000000000000..71c8d916afaf06f0f786e1c76b80ee45bfafb9d3 Binary files /dev/null and b/slides/wk02/img/people/blueonblue.png differ diff --git a/slides/wk02/img/people/blues.jpg b/slides/wk02/img/people/blues.jpg new file mode 100644 index 0000000000000000000000000000000000000000..bb231a598f446eb6ca3230c50f5639f548a894be Binary files /dev/null and b/slides/wk02/img/people/blues.jpg differ diff --git a/slides/wk02/img/people/chunking.png b/slides/wk02/img/people/chunking.png new file mode 100644 index 0000000000000000000000000000000000000000..d0b8d8b362865cdf83b73dd45616f09175c40daa Binary files /dev/null and b/slides/wk02/img/people/chunking.png differ diff --git a/slides/wk02/img/people/color-guidelines.png b/slides/wk02/img/people/color-guidelines.png new file mode 100644 index 0000000000000000000000000000000000000000..d81e483ef9a8dacfe3d798eee43784b68c9b5583 Binary files /dev/null and b/slides/wk02/img/people/color-guidelines.png differ diff --git a/slides/wk02/img/people/distinct.png b/slides/wk02/img/people/distinct.png new file mode 100644 index 0000000000000000000000000000000000000000..ddb0ea8f7b50260b768c2a600f2cd93f9cd6970e Binary files /dev/null and b/slides/wk02/img/people/distinct.png differ diff --git a/slides/wk02/img/people/distinct1.png b/slides/wk02/img/people/distinct1.png new file mode 100644 index 0000000000000000000000000000000000000000..ee1470dad6801674f88397baed960c134295f9fe Binary files /dev/null and b/slides/wk02/img/people/distinct1.png differ diff --git a/slides/wk02/img/people/distinct2.png b/slides/wk02/img/people/distinct2.png new file mode 100644 index 0000000000000000000000000000000000000000..07b85fab15355dde58ae94a0109923a341fd676e Binary files /dev/null and b/slides/wk02/img/people/distinct2.png differ diff --git a/slides/wk02/img/people/distinct3.png b/slides/wk02/img/people/distinct3.png new file mode 100644 index 0000000000000000000000000000000000000000..a105e0f1b55b9cfa87af8ccbf38a4b6a97d431cb Binary files /dev/null and b/slides/wk02/img/people/distinct3.png differ diff --git a/slides/wk02/img/people/distinct4.png b/slides/wk02/img/people/distinct4.png new file mode 100644 index 0000000000000000000000000000000000000000..7eabd003d7af201fbe89300a7645d2755c4da1fa Binary files /dev/null and b/slides/wk02/img/people/distinct4.png differ diff --git a/slides/wk02/img/people/distinct5.png b/slides/wk02/img/people/distinct5.png new file mode 100644 index 0000000000000000000000000000000000000000..e7825b09a4caac026e9b71ebd53e117ab7d51832 Binary files /dev/null and b/slides/wk02/img/people/distinct5.png differ diff --git a/slides/wk02/img/people/distinct6.png b/slides/wk02/img/people/distinct6.png new file mode 100644 index 0000000000000000000000000000000000000000..97b10f1439bd4d53b501975896aca04228a3893d Binary files /dev/null and b/slides/wk02/img/people/distinct6.png differ diff --git a/slides/wk02/img/people/distinct7.png b/slides/wk02/img/people/distinct7.png new file mode 100644 index 0000000000000000000000000000000000000000..df1123a90d8d15a3855066417edcff5538318bec Binary files /dev/null and b/slides/wk02/img/people/distinct7.png differ diff --git a/slides/wk02/img/people/drawAll.gif b/slides/wk02/img/people/drawAll.gif new file mode 100644 index 0000000000000000000000000000000000000000..5cb98a396766419682d1138f677c93a1e91f4148 Binary files /dev/null and b/slides/wk02/img/people/drawAll.gif differ diff --git a/slides/wk02/img/people/elevator1.png b/slides/wk02/img/people/elevator1.png new file mode 100644 index 0000000000000000000000000000000000000000..3dd5bd9705a0196e746c40f34c1ffecdfb71f280 Binary files /dev/null and b/slides/wk02/img/people/elevator1.png differ diff --git a/slides/wk02/img/people/elevator2.png b/slides/wk02/img/people/elevator2.png new file mode 100644 index 0000000000000000000000000000000000000000..2f502f44672d483f1b6b7bcdd4ac35bca8f1d37d Binary files /dev/null and b/slides/wk02/img/people/elevator2.png differ diff --git a/slides/wk02/img/people/eye.png b/slides/wk02/img/people/eye.png new file mode 100644 index 0000000000000000000000000000000000000000..18c3959f493de660378f9c7d3d1733b35f2a9f60 Binary files /dev/null and b/slides/wk02/img/people/eye.png differ diff --git a/slides/wk02/img/people/facebook.png b/slides/wk02/img/people/facebook.png new file mode 100644 index 0000000000000000000000000000000000000000..92d3ad836dedbe70081798da7ce6287a9097cbc6 Binary files /dev/null and b/slides/wk02/img/people/facebook.png differ diff --git a/slides/wk02/img/people/goodviz.png b/slides/wk02/img/people/goodviz.png new file mode 100644 index 0000000000000000000000000000000000000000..7cf03c3b75e24e2bc53086b70dc2569aecc275f0 Binary files /dev/null and b/slides/wk02/img/people/goodviz.png differ diff --git a/slides/wk02/img/people/hsv.png b/slides/wk02/img/people/hsv.png new file mode 100644 index 0000000000000000000000000000000000000000..c6bede4dbe1e130f60964dd9d6bc8225a3a8556c Binary files /dev/null and b/slides/wk02/img/people/hsv.png differ diff --git a/slides/wk02/img/people/humanspectrum.png b/slides/wk02/img/people/humanspectrum.png new file mode 100644 index 0000000000000000000000000000000000000000..47a8beee58beea7349195fd6a76f0c0487d19108 Binary files /dev/null and b/slides/wk02/img/people/humanspectrum.png differ diff --git a/slides/wk02/img/people/monalisa.png b/slides/wk02/img/people/monalisa.png new file mode 100644 index 0000000000000000000000000000000000000000..6594f080f477f7a0accc3e02f5ea77475f082886 Binary files /dev/null and b/slides/wk02/img/people/monalisa.png differ diff --git a/slides/wk02/img/people/pixelmonalisa.png b/slides/wk02/img/people/pixelmonalisa.png new file mode 100644 index 0000000000000000000000000000000000000000..f37b3ec30eca0745b8fdd16f1699e371fa11faec Binary files /dev/null and b/slides/wk02/img/people/pixelmonalisa.png differ diff --git a/slides/wk02/img/people/q1.png b/slides/wk02/img/people/q1.png new file mode 100644 index 0000000000000000000000000000000000000000..9090ed23584f5965f01fe97ef1c3c376b3f8f0ac Binary files /dev/null and b/slides/wk02/img/people/q1.png differ diff --git a/slides/wk02/img/people/q3.png b/slides/wk02/img/people/q3.png new file mode 100644 index 0000000000000000000000000000000000000000..2f6b23badf43181ad42231740acd1368a8823aad Binary files /dev/null and b/slides/wk02/img/people/q3.png differ diff --git a/slides/wk02/img/people/recognition.png b/slides/wk02/img/people/recognition.png new file mode 100644 index 0000000000000000000000000000000000000000..75e626b0d15f215a6182a3dbb972de0e18513f87 Binary files /dev/null and b/slides/wk02/img/people/recognition.png differ diff --git a/slides/wk02/img/people/redcomp.png b/slides/wk02/img/people/redcomp.png new file mode 100644 index 0000000000000000000000000000000000000000..81dec38e9e9408f89fddf1c850100ef978395f2a Binary files /dev/null and b/slides/wk02/img/people/redcomp.png differ diff --git a/slides/wk02/img/people/rgb.png b/slides/wk02/img/people/rgb.png new file mode 100644 index 0000000000000000000000000000000000000000..4d5dc962d7325f3b83f25233d6f7667a1cdbbd9c Binary files /dev/null and b/slides/wk02/img/people/rgb.png differ diff --git a/slides/wk02/img/people/rods_cones.png b/slides/wk02/img/people/rods_cones.png new file mode 100644 index 0000000000000000000000000000000000000000..6c4c88eaf3d67d1545818b497d737d5ce0a87626 Binary files /dev/null and b/slides/wk02/img/people/rods_cones.png differ diff --git a/slides/wk02/img/people/saturated.png b/slides/wk02/img/people/saturated.png new file mode 100644 index 0000000000000000000000000000000000000000..afb6f508ce29ca418e9c27880ed232876799c702 Binary files /dev/null and b/slides/wk02/img/people/saturated.png differ diff --git a/slides/wk02/img/people/signs.png b/slides/wk02/img/people/signs.png new file mode 100644 index 0000000000000000000000000000000000000000..43c41773ac4b4b9a5676bd5d3175ce32b303d6b0 Binary files /dev/null and b/slides/wk02/img/people/signs.png differ diff --git a/slides/wk02/img/people/stars.png b/slides/wk02/img/people/stars.png new file mode 100644 index 0000000000000000000000000000000000000000..4b15a6175319606a10be47158b87682af91ae949 Binary files /dev/null and b/slides/wk02/img/people/stars.png differ diff --git a/slides/wk02/img/people/tiger.png b/slides/wk02/img/people/tiger.png new file mode 100644 index 0000000000000000000000000000000000000000..0d881bc771abf977c2e1982eba348b1771a47bc6 Binary files /dev/null and b/slides/wk02/img/people/tiger.png differ diff --git a/slides/wk02/img/people/tufte.png b/slides/wk02/img/people/tufte.png new file mode 100644 index 0000000000000000000000000000000000000000..dc6f6a97a2a71c926e3a2a2dfcd4be3281fc2a81 Binary files /dev/null and b/slides/wk02/img/people/tufte.png differ diff --git a/slides/wk02/img/people/value-sat.png b/slides/wk02/img/people/value-sat.png new file mode 100644 index 0000000000000000000000000000000000000000..b5ffb6814dde40eb19feca12d1c5d404219c0831 Binary files /dev/null and b/slides/wk02/img/people/value-sat.png differ diff --git a/slides/wk02/img/people/visualgrouping.png b/slides/wk02/img/people/visualgrouping.png new file mode 100644 index 0000000000000000000000000000000000000000..ce969612793e2c9977149f83e24a61692ff1e36b Binary files /dev/null and b/slides/wk02/img/people/visualgrouping.png differ diff --git a/slides/wk02/img/people/web1.png b/slides/wk02/img/people/web1.png new file mode 100644 index 0000000000000000000000000000000000000000..61ca27232965dbb3424d46dba693138c05fa85a7 Binary files /dev/null and b/slides/wk02/img/people/web1.png differ diff --git a/slides/wk02/img/people/web2.png b/slides/wk02/img/people/web2.png new file mode 100644 index 0000000000000000000000000000000000000000..f0f96e2b9bda73c4f40f7a970100f0d9095dd817 Binary files /dev/null and b/slides/wk02/img/people/web2.png differ diff --git a/slides/wk02/img/people/web3.png b/slides/wk02/img/people/web3.png new file mode 100644 index 0000000000000000000000000000000000000000..88a1df7b1ee3b4095219efce172c12f7feebbf9b Binary files /dev/null and b/slides/wk02/img/people/web3.png differ diff --git a/slides/wk02/img/people/windowsLayout.png b/slides/wk02/img/people/windowsLayout.png new file mode 100644 index 0000000000000000000000000000000000000000..786c745ae438c2eade82a1e2df63e1ceebc34695 Binary files /dev/null and b/slides/wk02/img/people/windowsLayout.png differ diff --git a/slides/wk02/img/people/windowsLayoutGreyscale.png b/slides/wk02/img/people/windowsLayoutGreyscale.png new file mode 100644 index 0000000000000000000000000000000000000000..5b253f3fe0b9b3243b844f0674614aa93ccc350a Binary files /dev/null and b/slides/wk02/img/people/windowsLayoutGreyscale.png differ diff --git a/slides/wk02/img/people/yellow.png b/slides/wk02/img/people/yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..fa27be165b215ba5c1737359b12610ef7f37f29e Binary files /dev/null and b/slides/wk02/img/people/yellow.png differ diff --git a/slides/wk02/img/toolkit-drawing/accelerate.gif b/slides/wk02/img/toolkit-drawing/accelerate.gif new file mode 100644 index 0000000000000000000000000000000000000000..519648efffb6d5c51fe0b4f1a392de59116a4ce7 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/accelerate.gif differ diff --git a/slides/wk02/img/toolkit-drawing/animation-linear.png b/slides/wk02/img/toolkit-drawing/animation-linear.png new file mode 100644 index 0000000000000000000000000000000000000000..08bd9fc3dc2ce5d151294b1d2b695a490f2e5f00 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/animation-linear.png differ diff --git a/slides/wk02/img/toolkit-drawing/bounce.gif b/slides/wk02/img/toolkit-drawing/bounce.gif new file mode 100644 index 0000000000000000000000000000000000000000..c313049ed5d7841a755f38f3d48aafd6b3715021 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/bounce.gif differ diff --git a/slides/wk02/img/toolkit-drawing/bounding-animation.png b/slides/wk02/img/toolkit-drawing/bounding-animation.png new file mode 100644 index 0000000000000000000000000000000000000000..411566257aaa2a6e8fa0df2697b0e44726f7bc9b Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/bounding-animation.png differ diff --git a/slides/wk02/img/toolkit-drawing/boundless.gif b/slides/wk02/img/toolkit-drawing/boundless.gif new file mode 100644 index 0000000000000000000000000000000000000000..b0613367fe237b6755557dd886a4f374380ec574 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/boundless.gif differ diff --git a/slides/wk02/img/toolkit-drawing/doodle-layout.png b/slides/wk02/img/toolkit-drawing/doodle-layout.png new file mode 100644 index 0000000000000000000000000000000000000000..80b9fd17ebb77684d1000953988f9d9258137bb5 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/doodle-layout.png differ diff --git a/slides/wk02/img/toolkit-drawing/doodle-layout2.png b/slides/wk02/img/toolkit-drawing/doodle-layout2.png new file mode 100644 index 0000000000000000000000000000000000000000..a3d68d2f3fc0e04fe7bd44fabbcf25079fce798c Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/doodle-layout2.png differ diff --git a/slides/wk02/img/toolkit-drawing/doodle-screenshot.png b/slides/wk02/img/toolkit-drawing/doodle-screenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..e2ead8c9139d191ba5182a6a95e12bd1ae0cd51e Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/doodle-screenshot.png differ diff --git a/slides/wk02/img/toolkit-drawing/interactor-hierarchy.png b/slides/wk02/img/toolkit-drawing/interactor-hierarchy.png new file mode 100644 index 0000000000000000000000000000000000000000..bb41dc3d5b987687e7df6970f7df476cea7c6bbd Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/interactor-hierarchy.png differ diff --git a/slides/wk02/img/toolkit-drawing/interpolators.gif b/slides/wk02/img/toolkit-drawing/interpolators.gif new file mode 100644 index 0000000000000000000000000000000000000000..ad4e46ef00ad0843547fa69de0754dbaf9a7c59b Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/interpolators.gif differ diff --git a/slides/wk02/img/toolkit-drawing/linear.gif b/slides/wk02/img/toolkit-drawing/linear.gif new file mode 100644 index 0000000000000000000000000000000000000000..862a9241ff308d3e216ebf75f82e733db6637fe6 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/linear.gif differ diff --git a/slides/wk02/img/toolkit-drawing/linearrotate.gif b/slides/wk02/img/toolkit-drawing/linearrotate.gif new file mode 100644 index 0000000000000000000000000000000000000000..8fc4be4fac5d10a2d5c6fc593e13284ce0339fb3 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/linearrotate.gif differ diff --git a/slides/wk02/img/toolkit-drawing/overshoot.gif b/slides/wk02/img/toolkit-drawing/overshoot.gif new file mode 100644 index 0000000000000000000000000000000000000000..13bda4720e4de0f0584a7eee39c1a7cb65e22c3d Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/overshoot.gif differ diff --git a/slides/wk02/img/toolkit-drawing/pathanimation.gif b/slides/wk02/img/toolkit-drawing/pathanimation.gif new file mode 100644 index 0000000000000000000000000000000000000000..daf37d692c757cca41c53c041f6117921adb074a Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/pathanimation.gif differ diff --git a/slides/wk02/img/toolkit-drawing/rotatedrects-center.png b/slides/wk02/img/toolkit-drawing/rotatedrects-center.png new file mode 100644 index 0000000000000000000000000000000000000000..c84316897dace66263a21265cf31a6d4febaa1d4 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/rotatedrects-center.png differ diff --git a/slides/wk02/img/toolkit-drawing/rotatedrects-original-origin.png b/slides/wk02/img/toolkit-drawing/rotatedrects-original-origin.png new file mode 100644 index 0000000000000000000000000000000000000000..f8534eb40c19fb39bd2e9b8a4fa1763d8fd56e34 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/rotatedrects-original-origin.png differ diff --git a/slides/wk02/img/toolkit-drawing/scale.png b/slides/wk02/img/toolkit-drawing/scale.png new file mode 100644 index 0000000000000000000000000000000000000000..8dbb996d67c33c9469850bac11933aeb5fdb061f Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/scale.png differ diff --git a/slides/wk02/img/toolkit-drawing/screenshot_no_animation.jpeg b/slides/wk02/img/toolkit-drawing/screenshot_no_animation.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..f06bf323fa86e6e9285eebbaae7ce2a4805b890e Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/screenshot_no_animation.jpeg differ diff --git a/slides/wk02/img/toolkit-drawing/shear.png b/slides/wk02/img/toolkit-drawing/shear.png new file mode 100644 index 0000000000000000000000000000000000000000..75ba28462f9ec3df6717dbb306e91391e53cc3f2 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/shear.png differ diff --git a/slides/wk02/img/toolkit-drawing/translate.png b/slides/wk02/img/toolkit-drawing/translate.png new file mode 100644 index 0000000000000000000000000000000000000000..37fa3326c7b96cefe9e0d17c89c4fb45bf122030 Binary files /dev/null and b/slides/wk02/img/toolkit-drawing/translate.png differ diff --git a/slides/wk02/interface-drawing.html b/slides/wk02/interface-drawing.html new file mode 100644 index 0000000000000000000000000000000000000000..dbf8ef56f2efa3ecb8df8fc7bac5a1c15b02b29c --- /dev/null +++ b/slides/wk02/interface-drawing.html @@ -0,0 +1,871 @@ +--- +layout: presentation +title: Drawing Interfaces +description: Discussion of how toolkits draw interfaces +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Introduction to Drawing Interfaces + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout: false + + +[//]: # (Outline Slide) +# Today's goals + +- Reviewing Transformations +- Breakout room test 2 +- Reviewing Rotation +- Role of Interactor Hierarchy in drawing the screen +- How to use Animation to move Interactors +- Summary of what we've learned so far + +--- + +# Administrivia + +Important [Ed Post about two changes to the spec](https://us.edstem.org/courses/381/discussion/24921) +1. You do not need to handle lines that have a "positive slope" +2. We are asking that you turn in a video of your running custom doodle at the same time as your code. (demo) + +--- +# Linear ("affine") Transformations + +Translate, Scale, Rotate, Shear (and any combination thereof) + +-- + +- Translate: Move origin (and everything else) in x and y + + +??? +used extensively in GUIS because child objects just draw themselves +at *their* origin, so a component doesn't have to calculate how to draw +itself based on its position + +-- + +- Scale: change size (negative == flip) + + +-- + +- Rotate and Shear + + +--- +# Coordinate Transformations + +- Can modify any shape, including text. +- In practice, complex transformations are done with matrices, and matrices are using `concat(Matrix)` +- But Android helps with this by providing methods in the +[Canvas](https://developer.android.com/reference/android/graphics/Canvas) object to transform a canvas such as + +```java +translate(float dx, float dy) +rotate(float degrees) // the whole canvas around the canvas origin +rotate (float degrees, float px, float py) // around a particular point +scale(float, float) +scale (float sx, float sy, float px, float py) // around a pivot point +skew(float sx, float sy) // skew by sx and sy +save() // save the current transform +restore() // restore the previous transform +``` + +??? +- important thing to point out here: This is a value proposition for a toolkit again + +– Affine transformations are based on two-dimensional matrices of the +following form: + +P' = T*P where P is 1x3 and T is the transform matrix (3x3) with the +bottom row 0 0 1 + +Thus, x' = ax + cy + t_x and y' = bx + dy + t_y + +*Note* Any sequence of transform, rotate and shear can be represented +in a single matrix of this form (just multiple the matrices together) + +--- +# Breakout question: How can you rotate around the center of an object: + +<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/DfxDLPdpd2zTpLlUJt9h9?controls=none&short_poll=true" width="800" height="500" frameBorder="0"></iframe> + + +??? + +[raise your hands] + +- A: Translate, rotate, translate +- B: Rotate, Translate, Rotate +- C: Scale, Rotate, Scale +- D: Rotate + + +XX define exercise +maybe put this after android stuff? + +I usually draw this out on a piece of paper using the document camera to help + +--- +# Breakout rooms test 2 + +- You've been randomly assigned you to breakout rooms with one TA each. +- In the future, we will experiment with a system where you can choose your breakout partners +- Goal: Meet other students, test out the technology + - Please turn your cameras on in the breakouts + - Introduce yourself, and tell your group what color your favorite shirt is. + - Discuss the poll everywhere question and vote + +We'll do this for 5 minutes, then I will close the breakouts + +--- + +# Explanation + +.left-column[ + +] + +.right-column[ +New view created called `RotatedRectangleView` that has `mEndPoint` and `mBrush` defined in a +similar way to your `LineView`. It also is given the number of degrees (stored in the variable mDegrees) +by which to rotate the rectangle. + +```java +public void onDraw(Canvas canvas) { + + canvas.drawRect(0, 0, mEndPoint.x , mEndPoint.y, mBrush); + + int saveColor = mBrush.getColor(); + mBrush.setColor(Color.GREEN); + canvas.rotate(mDegrees); + canvas.drawRect(0, 0, mEndPoint.x, mEndPoint.y, mBrush); +} +``` +] + +--- +# Moving the canvas + +.left-column[ + +] + +.right-column[ +Move origin of the `canvas` to the center of the object, THEN rotate it, then +move the origin back to it's original location (in this new rotated orientation) + +```java +public void onDraw(Canvas canvas) { + + canvas.drawRect(0, 0, mEndPoint.x , mEndPoint.y, mBrush); + + float px = mEndPoint.x / 2; + float py = mEndPoint.y / 2; + int saveColor = mBrush.getColor(); + mBrush.setColor(Color.GREEN); + canvas.translate(px, py); + canvas.rotate(mDegrees); + canvas.translate(-px, -py); + canvas.drawRect(0, 0, mEndPoint.x, mEndPoint.y, mBrush); +} +``` +] + +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Toolkits +--- +layout: false + +## Review: Developer roles + +.left-column[ + +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + + class t,l,a,w yellow + class ip green +</div> +] + +.right-column[ +Recall the role Interface Programmer a developer can play in app development. +] + +--- + +# Draw the interactor hierarchy + +Think about why we use a `View` for **each** thing on the screen... + +   + + +--- + +# Simpler Example as an Interface Programmer + +.left-column[ + +] +.right-column[ + +```java + LineView line = new LineView(this, startX, startY, endX, endY, width, color); + canvas.addView(line); + TextView text = new TextView(this); + text.setX(x); + text.setY(y); + text.setText("placeholder"); + canvas.addView(text); +``` +] + +--- + +## Review: Developer roles + +.left-column[ + +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + + class t green + class ip,l,a,w yellow + +</div> +] + +.right-column[ +Today we're going to discuss the role Toolkit builder plays in app development +] + + +--- +# What is the toolkit architecture? + +??? +Applies to the flow of information within the toolkit + +Example: How the interface is drawn + +What could you add? Support for animation, machine learning, etc + +Supported by very few toolkits + +--- +# What is the toolkit architecture? + +Applies to the flow of information within the toolkit + +Examples: +- How the interface is drawn +- How the interface is layed out +- How the interface responds to the user + +What could you add? Support for animation, machine learning, etc + +Adding new features at the toolkit level is supported by very few toolkits + +--- + +# How is a View drawn on the screen? + +**Toolkit Architecture Builder** + +- Depth-first tree traversal of the interactor hierarchy +- Each View draws itself in its location +- Siblings drawn in order they appear + +Naive Pseudocode: + +```java +protected void drawAll() { + onDraw(); // Draw yourself. (lower in the Z-order) + foreach child c { // for all of the children in this node + if (child.isVisible()) { // if the child is visible + child.drawAll(); // tell the child to draw itself + } + } +} +``` + +??? +What is missing here? +How can children misbehave? +What are they expecting that we don't do? +Draw out what will happen on paper + +--- +# How is a View drawn on the screen? + +Naive Pseudocode: + +```java +protected void drawAll() { + onDraw(); + foreach child c { + if (child.isVisible()) { + child.drawAll(); + } + } +} +``` + +- How could children misbehave? +- Work arounds could we do? + +??? +Imagine if all the children were the same dimensions. + +--- +# Work arounds? + +Make the **Interface Programmer** fix this + +Could make every view the size of the whole screen; Then just draw items in those views +in the correct position + +Could tell every view where it is so it draws properly + + +--- +# For this, view needs a position, width and height + +.left-column-half[ + +] + +.right-column-half[ +What could go wrong with this approach? + +] +??? +- What if we want to place a different view, automatically, to the right of the text? +- How do we guarrantee that a view doesn't draw over it's neighbor? + +--- +# For this, view needs a position, width and height + +.left-column-half[ + +] + +.right-column-half[ +What could go wrong with this approach? +- What if we want to place a different view, automatically, to the right of the text? +- How do we guarrantee that a view doesn't draw over it's neighbor? + +] +--- +# Specifying View position, width and height? + +.left-column-half[ +<br> + +] + +.right-column-half[ +**Interface Programmer** does this + +```java +View view = new View(); +view.setX(); +view.setY(); +ViewGroup.LayoutParams params = view.getLayoutParams(); +param.width = width; +param.height = height; +view.setLayoutParams(param); +``` +] +??? +We'll go into much more depth on this in your next assignment + +--- +# How does a toolkit use this? +**Toolkit Architecture Builder** + +**Uses coordinate transformations to make each child the center of its universe!** + - Parent (usually) specifies position of child when adding to the interactor hierarchy + - Child counts on parent to set things up so child's internal coordinate system starts at (0,0) + +-- +We just saw this with rotating the canvas! + +--- +# How is a View drawn on the screen +**Toolkit Architecture Builder** + +```java +protected void drawAll() { + onDraw(); + foreach child c { + if (child.isVisible()) { + + + + + child.drawAll(); + + } + } +} +``` +Is this part of the _Toolkit Architecture_ or _Toolkit Library_? + +--- +# How is a View drawn on the screen +**Toolkit Architecture Builder** + +```java +protected void drawAll() { + onDraw(); + foreach child c { + if (child.isVisible()) { +* Rectangle r = child.getLayoutParams(); // Find child coordinates +* canvas.save(); // Capture the current state of canvas +* canvas.translate(r.x, r.y); // Move origin to child's top-left corner +* canvas.clip(0,0,r.width,r.height); // Clip to child + child.drawAll(); // Draw child (and all it's kids) +* canvas.restore(); // Restore + } + } +} +``` +Is this part of the _Toolkit Architecture_ or _Toolkit Library_? +??? +Draw out on paper again +Note that this is has absolute layout! + +--- + +# Why is a bounding box important here? + + + + + + +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Animation +--- +layout: false + +.left-column[ + +] + +.right-column[ +# Animation becoming core pillar of UX design + +Greater awareness of role for communicating UI behavior +Guide, provide context, delight, engage + +.quote[‘Animation is increasingly becoming an important part of the UI +design experience. Google’s material design guidelines are a good +illustration of this. Expect to see even more tools and optimizations +made to improve the production workflow and performance in browsers +and on devices.’ ([Weareathlon](https://www.weareathlon.com/ideas/ten-ux-design-trends-for-2015))] +] + + +--- +# Old implementation approach + +Frame-based +- Redraw scene at regular intervals +- Developer defines redraw function + +What toolkit principals does this violate? + +??? +it's bad because it doesn't provide any useful abstractions + +Fails to provide separation of concerns +-- +- Doesn't provide supportive abstractions + +-- +- Fails to provide separation of concerns + +--- +# Main implementation approach +Transition-based (Hudson & Stasko '93) +- Specify property values of animation transition speed and process + - Uses 'pacing' functions to stylize animation, e.g. slow-in +slow-out (see [easings.net](http://easings.net)) + +- Typically computed via __interpolation__ +```java +step(fraction){x_now = x_start + fraction*(x_end - x_start);} +``` +- Timing and redraw managed by toolkit + + +--- +# Toolkit Architecture for Animation + +.left-column[ +<br> +<br> +<br> +<br> +<br> + +] +.right-column[ + +Steamlined process for animation of each frame +- An update function is called +- `invalidate()` is called +- View is redrawn +] + +--- +# How an animation is set up + +Define an animation that changes on object's property (a field on a object) over a length of time. + + + +.footnote[[image source: Android animation documentation](https://developer.android.com/guide/topics/graphics/prop-animation)] + +--- +# How an animation is set up + +Need the start and end value of the properties to be +modified. Typically use a +[Path](https://developer.android.com/reference/android/graphics/Path) +for this. + +Need a *duration* (total time in ms for the animation) + +Need the *pacing function* for animation using an [Interpolator](https://developer.android.com/reference/android/view/animation/Interpolator) +- Default is [AccelerateDecelerateInterpolator](https://developer.android.com/reference/android/view/animation/AccelerateDecelerateInterpolator) +- Other subclasses include AccelerateInterpolator, AnticipateInterpolator, AnticipateOvershootInterpolator, +BounceInterpolator, CycleInterpolator, DecelerateInterpolator, LinearInterpolator, +OvershootInterpolator, PathInterpolator +- Or make your own! + +--- + +# [ObjectAnimator](https://developer.android.com/reference/android/animation/ObjectAnimator) + +Directly animate a properties on an object + +**However**: the property that you are animating must have a setter +function (in camel case) in the form of `set<propertyName>()` for this +to work + +Can use a string (like `"alpha"`) or a property (like `View.X` in [View](https://developer.android.com/reference/android/view/View)) + +--- +# [ObjectAnimator](https://developer.android.com/reference/android/animation/ObjectAnimator) + +.left-column[ +<br> +<br> + +] + +.right-column[ +Example for color +```java +// takes a target view, a property name, and values +ObjectAnimator anim = ObjectAnimator.ofFloat(boundlessView, "alpha", 0f, 1f); +anim.setDuration(1000); +anim.start(); +``` +] +--- +# [ObjectAnimator](https://developer.android.com/reference/android/animation/ObjectAnimator) + +.left-column[ + +] + +.right-column[ +Example for position (using a +[Path](https://developer.android.com/reference/android/graphics/Path)) +```java +ImageView mouse = addImage(doodleView, "mouse", 500f, 50f, size); +Path path = new Path(); +path.moveTo(400f, 50f); +path.arcTo(200f, 50f, 600f, 450, 270, -180, true); +path.arcTo(200f, 450f, 600f, 850, 270f, 180f, true); + +ObjectAnimator anim = ObjectAnimator.ofFloat(mouse, View.X, View.Y, path); +anim.setDuration(5000); +anim.start(); + + +``` +] + +--- +# [ObjectAnimator](https://developer.android.com/reference/android/animation/ObjectAnimator) + +.left-column[ + +] + +.right-column[ +- The static functions (like ofFloat) in ObjectAnimator are "factories" - the method creates the +ObjectAnimator object for you! +- You can have multiple ObjectAnimators working on a single view at the same time! + +```java +ImageView mouse = addImage(doodleView, "mouse", 500f, 50f, size); +Path path = new Path(); +// code to set up the path.... +ObjectAnimator anim = ObjectAnimator.ofFloat(mouse, View.X, View.Y, path); +anim.setDuration(5000); +anim.start(); + +ObjectAnimator anim = ObjectAnimator.ofFloat(mouse,"rotation", 720); +anim.setDuration(5000); +anim.start(); +``` + +] +--- + +# Other useful properties for animation + +- `translationX` /`translationY` - view location as a delta from its top/left coordinates relative to the parent +- `rotation` / `rotationX`/`rotationY` - control 2D rotation and 3D rotation around a pivot point +- `scaleX` / `scaleY` - 2D scaliong of a `View` around a pivot point +- `pivotX` / `pivotY` - changes location of thej pivot point (default is object's center) +- `x` / `y` - utility property to describe the final location of a `View` in its container as a sum of (left, top) + `translationX`, `translationY`) +- `alpha` + +.footnote[All found in the [View](https://developer.android.com/reference/android/view/View) class] +--- + +# For more more flexibility... +You can specify `Keyframe` objects to control the animation + +```java + // Key for start at 0 + Keyframe kf0 = Keyframe.ofFloat(0f, 0f); + // Key for half way finished animation + Keyframe kf1 = Keyframe.ofFloat(.5f, 360f); + // Key for end state + Keyframe kf2 = Keyframe.ofFloat(1f, 0f); + // ValueName-to-keyframes + PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", + kf0, kf1, kf2); + // Create the animation + ObjectAnimator rotationAnim = ObjectAnimator.ofPropertyValuesHolder(target, + pvhRotation) + rotationAnim.setDuration(5000ms); +``` +--- + +# Taking Animation to the next level + +.quote[ Despite the differences between user interfaces and cartoons +-- cartoons are frivolous, passive entertainment and user interfaces +are serious, interactive tools -- cartoon animation has much to lend +user interfaces to realize both affective and cognitive benefits] +.small[Principals of animation borrowed from Johnston & Thomas ‘81, +Lasseter ‘87] + +--- +# Chang & Ungar, UIST '93 + +What strategies do you see here? + +![:youtube Opening cartoon from who framed roger rabbit showing him trying to keep a baby safe,oQe0OWZvwWo] + +??? +- Squash-and-Stretch +- Staging, Overlapping Action +- Anticipation +- Follow-Through +- Slow In Slow Out + + +--- +## Example pacing functions -- derived from Disney style animation! +.left-column[ + +] +.right-column[ +Slow in slow out (Accelerate/decelerate) +<br> +<br> + +Slow in (Accelerate) +<br> +<br> + +Anticipate (back up slightly, then accelerate) +<br> +<br> + +Anticipate Overshoot (same, then go too far and slow down) +] + +--- +# Why is pacing so important? + +Need to mimic real world +- Observing motion tells us about size, weight, rigidity +- No abrupt changes in velocity! + +Gives a feeling of reality and liveness +- “animation†= “bring to life†+- make inanimate object animate + +With this can come appeal and desirability + +--- +# Example pacing functions + +Watch this and note the pacing you see! + +![:youtube Video showing a mother and child lamp playing with a ball +illustrating a range of techniques,6G3O60o5U7w] + +??? +Normally I show this twice and ask them what they see: +- No teleportation! +- Squash and Stretch (preserve volume; can approximate inertia (ball)) +- Follow through (i.e. cord lags behind lamp) +- Anticipation (small amount of counter movement (lampshade motion)) +- Exaggeration (cord up and down) + +- (not shown) Motion blur (doesn't need to be realistic + + +--- +# How implement pacing in animation? + +How would `t` and `x` change for slow in slow out? + +-- + + +.footnote[[image source: Android animation documentation](https://developer.android.com/guide/topics/graphics/prop-animation)] + +--- +# We implement these with `Interpolators` in Android +.left-column-half[ + + + + +] +.right-column-half[ +The durations are the same for each of these animations +- Left side is _Linear_ +- Second one is _Accelerate_ +- Third one is ?? +- Right side is ?? + + +] + +??? +overshoot +bounce + +--- +# Using an Interpolator +```java +ObjectAnimator anim = ObjectAnimator.ofFloat(mouse, + View.X, View.Y, path); // Create the ObjectAnimator +OvershootInterpolator interpolator = new OvershootInterpolator(); // Create an Interpolator +anim.setInterpolator(interpolator); // Tell the animator to use the interpolator +anim.setDuration(3000); // set the duration +anim.start(); // Tell the animation to start +``` + +--- +# Using Animation Well - Accessbility + +.quote['The impact of animation on people with vestibular disorders can be quite severe. +Triggered reactions include nausea, migraine headaches, and potentially +needing bed rest to recover.' [W3C Accessibility Guidelines](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html)] + +Best option: provide control, be minimalistic +??? + +--- +# Summary: Animation Design Tips + +1. Used sparingly and understandingly, animation can enhance the interface … otherwise can distract! +2. Need to mimic real world +3. Observing motion tells us about size, weight, rigidity +4. No abrupt changes in velocity! +5. Think about accessibility. + +--- +# What to do for Doodle Part2Activity? + +Your chance to make something creative. + +Peers will reviewed your custom doodle to ensure it uses some combination of lines, text, images, and animation. + +Peers will also "evaluate" (give you feedback on how much they liked it). + + +--- +# Summary & revisiting learning goals for this week and last + +.left-column-half[ +- What is HCI? +- What is a toolkit? How do an architecture and library differ? +- How do we draw on the screen? + - What is a pixel? + - What is a raster vs a vector model? + - What abstractions help with drawing? + - How do we use affine transformations? +- What is the interactor hierarchy? + - How is it used for drawing? + - What role do affine transformations play in this? +- What are the key abstractions for animation? + ] +.right-column-half[ +- Android basics +- What is a `View`? +- `onCreate()` and `onDraw()` +- How does `Canvas` work? +- How do we construct the interactor hierarchy? +- Implementing Animation +] diff --git a/slides/wk02/layout.html b/slides/wk02/layout.html new file mode 100644 index 0000000000000000000000000000000000000000..650ec178ce507ce3f152c01f378f68028f5ffddc --- /dev/null +++ b/slides/wk02/layout.html @@ -0,0 +1,634 @@ +--- +layout: presentation +title: Layout +description: Description of Layout Algorithms and Approaches +class: middle, center, inverse +--- +layout: false + + +# Visual Design Tips Employed or Avoided? + +.left-column-half[ +<br> +<br> + +<br> +<br> +<br> +<br> +<br> +<br> +<br> +] + +.right-column-half[ +- #1: Don't rely on blue for small objects +- #2: Don't rely on blue for older users +- #3: Make sure that contrast is high enough +- #4: Minimize saturated colors +- #5: Use redundant cues +- #6: Make things distinct +- #7: Use small multiples +- #8: Manage expectations if you can't change response time +- #9: Replace subtle changes with obvious ones +- #10: Use well-tested visual grouping strategies +- #11: Minimize the number of options +- #12: Rely on recognition rather than recall +] + +.footnote[Shile W, 20sp from a Facebook group page] + +--- +# Visual Design Tips Employed or Avoided? + + +.left-column-half[ +<br> + +<br> +<br> +] + +.right-column-half[ +- #1: Don't rely on blue for small objects +- #2: Don't rely on blue for older users +- #3: Make sure that contrast is high enough +- #4: Minimize saturated colors +- #5: Use redundant cues +- #6: Make things distinct +- #7: Use small multiples +- #8: Manage expectations if you can't change response time +- #9: Replace subtle changes with obvious ones +- #10: Use well-tested visual grouping strategies +- #11: Minimize the number of options +- #12: Rely on recognition rather than recall +] + +.footnote[Lauren Bricker after visiting Jackbox games in 20sp] + +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Introduction to Layout + +{{site.author.name}} + +CSE 340 {{site.quarter}} + +--- +name: normal +layout: true +class: +--- + +[//]: # (Outline Slide) +# Today's goals +- Announcements + - Reminder: Peer review emails will go out Saturday night/Sunday morning + - Layout will be released later today +- Review of tree construction +- Using tree for layout +- Container components + +--- +# Hall of Shame (from [CSE 154](https://courses.cs.washington.edu/courses/cse154/19au/lectures/lec05-css-iii-more-layout/index.html#/)) + + + +Thoughts? + +.footnote[[gatesnfences.com](http://www.gatesnfences.com/)] + +--- + + + + +??? +Key Issues +- where do components get placed? +- how much space should they occupy? + +--- +# Review of tree construction + +Circle all of the interactors in this interface. + +.left-column[] + + +--- +# Review of tree construction + +Circle all of the interactors in this interface. + +.left-column[] + +--- +# What is the interactor hierarchy? + +<br> + +.left-column30[ +] + + +--- +# What is the interactor hierarchy? + +Naive version... + +.left-column30[ +] + +.right-column-half[ +<div class="mermaid"> +graph TD +W(Window) --> M[Icon:Mag Window] +W --> A[Slider:Aperture Size x y w h] +W --> C[Menu:Choice x y w h] +W --> I[Icon:Color x y w h] +W --> T[Text:RGB x y w h] +W --> La[Text:Label x y w h] + +classDef blue font-size:14pt,text-align:center +classDef green font-size:14pt,text-align:center + +class W green +class M,A,C,I,T,La blue +</div> +] + +??? +Start talking here about meta data that maters, they know about x, y, w and h from doodle + +Ask them to think about what else you might want to know to position something? + +--- +# Why do we need layout? +.left-column[ + +<br> + + +] +.right-column[ +How can you center something? + +How can you lock it to an edge? + +How can you design layout that reacts (responds) well to turning your phone? + +Examples for web (from [CSE 154](https://courses.cs.washington.edu/courses/cse154/19au/lectures/lec05-css-iii-more-layout/index.html#/6)) +- c0FFEE shop with [no layout](https://courses.cs.washington.edu/courses/cse154/19au/lectures/lec05-css-iii-more-layout/code/coffee-shop-solution/coffee-shop.html) +- c0FFEE shop with [layout](https://courses.cs.washington.edu/courses/cse154/19au/lectures/lec05-css-iii-more-layout/code/coffee-shop-starter/coffee-shop.html) +] + +--- +# User Interfaces on Android +.left-column-half[ +- Views + - Base class for __all__ UI elements + - Interactors (e.g buttons, labels, image views, etc) +- ViewGroups + - Encapsulates one or more views (e.g. Android Components, **Layouts**) + - Can define specific **layout** properties + + We will use the word *Components* to include both layout components and interactors (Views) since you + don't generally "interact" with layouts +] + +.right-column-half[ +<div class="mermaid"> +graph TD +W(ViewGroup) --> V[ViewGroup] +W --> V1[View] +W --> V2[View] +V --> V3[View] +V --> V4[View] +V --> V5[View] + +classDef blue font-size:14pt,text-align:center +classDef darkblue font-size:14pt,text-align:center + +class W,V darkblue +class V1,V2,V3,V4,V5 blue +</div> + +] + +--- +# Practice: Let's try to recreate this layout using containers and spacers + +.left-column[] + +-- +.right-column-half[ +<div class="mermaid"> +graph TD +W(Window) --> L(LeftSide:DisplayVert) +W --> R(RightSide:DisplayVert) +L --> Z[Space:Fixed] +L --> Y[Space:Stretchy] +R --> D(RGB DisplayHor) +D --> V[Space:Fixed] +D --> U[Space:Flexible] + + +classDef bluegreen font-size:14pt,text-align:center +classDef blue font-size:14pt,text-align:center +classDef green font-size:14pt,text-align:center +classDef yellow font-size:14pt,text-align:center + +class W bluegreen +class L,R,D green +class Z,Y,V,U yellow +class M,A,C,I,T,Q blue +</div> +] + +--- +# Practice: Let's try to recreate this layout using containers and spacers + +.left-column[] + +.right-column-half[ +<div class="mermaid"> +graph TD +W(Window) --> L(LeftSide:DisplayVert) +W --> R(RightSide:DisplayVert) +L --> Z[Space:Fixed] +L --> M[Icon:Mag Window] +L --> A[Slider:Aperture Size] +L --> Y[Space:Stretchy] +R --> C[Menu:Choice] +R --> D(RGB DisplayHor) +D --> V[Space:Fixed] +D --> I[Icon:Color] +D --> T[Text:RGB] +D --> U[Space:Flexible] +R --> Q[Text:Label] + +classDef bluegreen font-size:14pt,text-align:center +classDef blue font-size:14pt,text-align:center +classDef green font-size:14pt,text-align:center +classDef yellow font-size:14pt,text-align:center + +class W bluegreen +class L,R,D green +class Z,Y,V,U yellow +class M,A,C,I,T,Q blue +</div> +] + +--- +# Vertical Container Components + +.left-column[ + + + +Linear (1D) layout of components +- Always layout in the same direction +- Places its direct descendants, in order, in that direction + +] + +.right-column[ +<div class="mermaid"> +graph TD +W(Window) --> L(LeftSide:DisplayVert) +W --> R(RightSide:DisplayVert) +L --> Z[Space:Fixed] +L --> M[Icon:Mag Window] +L --> A[Slider:Aperture Size] +L --> Y[Space:Stretchy] +R --> C[Menu:Choice] +R --> D(RGB DisplayHor) +D --> V[Space:Fixed] +D --> I[Icon:Color] +D --> T[Text:RGB] +D --> U[Space:Flexible] +R --> Q[Text:Label] + +classDef bluegreen font-size:14pt,text-align:center +classDef darkblue font-size:14pt,text-align:center +classDef blue font-size:14pt,text-align:center +classDef green font-size:14pt,text-align:center +classDef yellow font-size:14pt,text-align:center + +class L,R darkblue +class W bluegreen +class D green +class Z,Y,V,U yellow +class M,A,C,I,T,Q blue +</div> + +] + +--- +# Horizontal Container Components + +.left-column[ + + +Same: Linear (1D) layout of components +- Always layout in the same direction +- Places its kids, in order, in that direction +] + +.right-column[ +<div class="mermaid"> +graph TD +W(Window) --> L(LeftSide:DisplayVert) +W --> R(RightSide:DisplayVert) +L --> Z[Space:Fixed] +L --> M[Icon:Mag Window] +L --> A[Slider:Aperture Size] +L --> Y[Space:Stretchy] +R --> C[Menu:Choice] +R --> D(RGB DisplayHor) +D --> V[Space:Fixed] +D --> I[Icon:Color] +D --> T[Text:RGB] +D --> U[Space:Flexible] +R --> Q[Text:Label] + +classDef bluegreen font-size:14pt,text-align:center +classDef darkblue font-size:14pt,text-align:center +classDef blue font-size:14pt,text-align:center +classDef green font-size:14pt,text-align:center +classDef yellow font-size:14pt,text-align:center + +class D darkblue +class W bluegreen +class L,R,D green +class Z,Y,V,U yellow +class M,A,C,I,T,Q blue +</div> + + +] + +--- +# Spacers + +.left-column[ + + +- Work extra well with layout containers +- We can add *Fixed Space* (struts) + - Think of it like a strut in a building + - They hold things a fixed distance apart +- We can also add *Stretchy Space* (springs) + - they push things apart as much as possible +] + +.right-column[ +<div class="mermaid"> +graph TD +W(Window) --> L(LeftSide:DisplayVert) +W --> R(RightSide:DisplayVert) +L --> Z[Space:Fixed] +L --> M[Icon:Mag Window] +L --> A[Slider:Aperture Size] +L --> Y[Space:Stretchy] +L --> C[Menu:Choice] +R --> D(RGB DisplayHor) +D --> V[Space:Fixed] +D --> I[Icon:Color] +D --> T[Text:RGB] +D --> U[Space:Flexible] +R --> Q[Text:Label] + +classDef bluegreen font-size:14pt,text-align:center +classDef darkblue font-size:14pt,text-align:center +classDef blue font-size:14pt,text-align:center +classDef green font-size:14pt,text-align:center +classDef yellow font-size:14pt,text-align:center + +class Y,Z,V,U darkblue +class W bluegreen +class L,R,D green +class Z,Y,V,U yellow +class M,A,C,I,T,Q blue +</div> + +] + + +--- + +.left-column-half[ +# Example (Layout Assignment) + + +] + +.right-column30[ + +] + +??? +This is the kind of stuff we can do thanks to viewgroups + +--- +# Example (Layout Assignment, part 3) + +.left-column-half[ +I've highlighted things that are visible (as opposed to just doing layout work) +<div class="mermaid"> +graph TD +C[ViewGroup:ConstraintLayout] +C --> Column1[ViewGroup:Column1] +C --> Column2[ViewGroup:Column2] +Column1 --> V1[View:Fox] +Column1 --> V2[View:Squirrel] +Column1 --> V3[...] +Column2 --> V4[View:Duckling] +Column2 --> V5[...] + +classDef darkblue font-size:14pt,text-align:center +classDef blue font-size:14pt,text-align:center + +class C,Column1,Column2 blue +class V1,V2,V3,V4,V5 darkblue +</div> + +] +.right-column30[ + +] + +??? +This is the kind of stuff we can do thanks to viewgroups + +--- +# Android's runtime view of the same + +.left-column[ + + +VERY IMPORANT debugging tool +] +.right-column-half[ + +] + +--- +# Layout Assignment + +.left-column[ + + +You can scroll this and the images are all equidistant. +] +.right-column[ +- Part 1 is about basic reactive layout using XML and constraints for a fixed number of images +- Part 2 replicates this in code for a fixed number of images +- Part 3 you create a *Layout Container* that can do a fancier layout, for an arbitrary number of images **Pintrest** style! +- Part 4 you try to recreate a layout of your choice! + +] + +--- +# Brief Diversion: What is XML? +- XML stands for eXtensible Markup Language +- A superset of HTML + - Tag names are surrounded by '<' and '>''s (Alligators or "wakkas") + - Tags are generally in pairs such as `<html>` `</html>` or can be self closing `<ImageView />` + - Tags can have attributes such as + + `<tagname attribute="value" attribute="value"> content </tagname>` + +--- +# Layout in Android +.left-column-half[ + + +] + +.right-column-half[ +This is Android's GUI layout editor + +Where's the interactor hierarchy here? +] + +??? +point out the "space" + +--- +# Layout in Android +.left-column-half[ + + +] + +.right-column-half[ +This is Android's GUI layout editor + +Where's the interactor hierarchy here? +- It's the component tree! +- The XML is a visual way of specifying the hierarchy that exists once the XML is loaded into the application + +What are the leaf nodes? +Do you see anything unusual? +] + +??? +point out the "space" + + +--- +# What is a spacer? +.left-column-half[ + + + +] + +.right-column-half[ + +What is a Space? +- Works extra well with layout containers +- We can add *struts* + - Think of it like a strut in a building + - They hold things a fixed distance apart +- We can also add *springs* + - they push things apart as much as possible + +```xml +<Space + android:layout_width="0dp" + android:layout_height="wrap_content" + android:layout_weight="1" /> +``` +] + +??? +see next slide! + +--- +# Layout in Android +.left-column-half[ + + +] +.right-column-half[ +In this case, they are in a `LinearLayout` +- It always has a direction (horizontal or vertical) +- And it places its kids, in order, in that direction, within its bounds + +Where is the linear layout on the screen? +] + +--- +# Layout in Android +.left-column-half[ + + +] +.right-column-half[ +In this case, they are in a `LinearLayout` +- It always has a direction (horizontal or vertical) +- And it places its kids, in order, in that direction, within its bounds + +Where is the linear layout on the screen? + +It's the box around 'Save and Discard' +- We call this a *Layout Container* +- Note: this is not visible in the actual GUI, it's a hidden interactor tree element +] +--- +# Layout in Android +.left-column-half[ + + +] +.right-column-half[ +A Layout Container can + - automate a lot of the layout tasks + - make it much simpler to ensure reliable results + - use these whenever they do the job + - you will implement one for your assignment +] + + +--- +# Layout in Android +Many layout and other attributes for components. You should explore! + + + +??? +Talk about how there's many layout and other attributes for components that they should explore! + +--- +# End of Deck + +The slides that were here have move to [Layout Part II](../wk03/layout-ii.html) diff --git a/slides/wk02/people-vision.html b/slides/wk02/people-vision.html new file mode 100644 index 0000000000000000000000000000000000000000..e1067dd972909f54a7970e66c8fe2135b5c33f77 --- /dev/null +++ b/slides/wk02/people-vision.html @@ -0,0 +1,1045 @@ +--- +layout: presentation +title: Properties of People-- Visual Capacity +description: Discussion of what we know about people that influences interface design in the vision realm +class: middle, center, inverse + +--- + +# Open poll + +<iframe src="https://embed.polleverywhere.com/free_text_polls/sK4PfNJjme9aKeezruC36?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> + +??? + + +--- +# Critique this ad: + +` method for the toolkit: + +Which of the following must a parent component do to its own Canvas obect before +telling a child component to draw itself? + +- [a] canvas.translate(child.x, child.y) +- [b] canvas.clip(parent.x, parent.y, parent.w, parent.h) +- [c] canvas.translate(-child.x, -child.y) +- [d] canvas.clip(0, 0, child.w, child.h) +] + +-- +.right-column30[ + +] +-- + +What does it need to do after the child draws itself? + +.footnote[See [How a view is drawn on the screen](https://courses.cs.washington.edu/courses/cse340/20sp/slides/wk02/interface-drawing.html#29)] + +??? +Answer: Translate (a), then clip (d) +Answer 2: (c) + + + + +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Properties of People + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +name: normal +layout: true +class: +--- + +[//]: # (Outline Slide) + +# Today's goals + +- Discuss visual properties of people +- Discuss memory + +## Future Goals +- Discuss motor control + +--- +# Administrivia + +- Reminder: [Doodle](https://courses.cs.washington.edu/courses/cse340/20sp/assignments/) code is due Thursday night. + - IMPORTANT: git add/commit/push - then [TURN IN](https://gitgrade.cs.washington.edu/student/assignment/116/turnin) + - Lab will go over this +- Doodle peer reviews will be out late Saturday or early Sunday. Get these done quickly. They do not take long +- Layout will be out on Friday +- Religious accomodations section added to [syllabus](https://courses.cs.washington.edu/courses/cse340/20sp/#Religious-Accommodations) +(Chag sameach Pesach to those who celebrate) + +--- +# Visual Properties of People + +People's visual abilities have a big impact on everything from how we +model color to what makes for good design + +People have a variety of visual capabilities, which you should know +- 4.5% of the world population (mostly men) is color blind<sup>1</sup> +- 17% of the world population live with some vision impairment<sup>2</sup> + +Good design is generally more accessible design + +*Bad psychology is good enough to support good design (I hope! :)* + +.footnote[ +<sup>1</sup>[colourblindawareness.org](www.colourblindawareness.org/colour-blindness/)<br> +<sup>2</sup>[WHO](https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment)<br> +] +??? +talk about my own disability + +--- +layout: false +# What does this image show? (raise hands if you know) + +.body[ + +] +.footnote[ +Example from +http://10qviz.org/home/categories/rainbow-color-map/ +] + +--- +# What does this image show? (raise hands if you know) + +.body[ + + +] +.footnote[ +Example from +http://www.research.ibm.com/people/l/lloydt/color/color.HTM +] + + +??? +So why is the color choice poor? +- No mapping of color (note on right how blues are used for water, and greens for land) +- Color is better if you adjust by saturation (purity) or value (brightness) rather than hue (rough color, ie red, green, blue, orange) for mapping. People can more easily see and compare differences in saturation and value over hue. Also, changes in hue don’t naturally map to a scale, whereas saturation and value do. + +--- +# Visible Spectrum (Human Limits matter!) + + +.footnote[ +http://insight.med.utah.edu/Webvision/index.html] +--- +.left-column-half[ +## Why RGB + +- Match eye's model + - Receptor cells for red, green, blue (cones) +- Receptor cells for grayscale (rods) +] +.right-column-half[ + +] +--- +# Retina covered with light-sensitive receptors + +.right-column[ +Rods +- Primarily for night vision & perceiving movement +- Sense intensity or shades of gray +- Can’t discriminate between colors +- Mostly at edge of retina +- ~75M – 150M rods +] +.left-column[ + +] + +--- +# Retina covered with light-sensitive receptors + +.right-column[ +Rods +- ~75M – 150M rods + +Cones +- Used to sense color +- Mostly in center of retina +- ~4.5M – 7M cones + +Many more rods than cones +] +.left-column[ + +] +--- +# RGB Matches how human vision works + +.right-column[ +In Java, CSS, and other GUI programming, color is 24 bit (+ 8 bits for +alpha transparency) + +So 8 bits for each of red, green, blue + +- Why not more bits? +- Why not 64 bit color? + +Discuss! +] +.left-column[ + +] + +??? +Humans can’t really see much more colors + +--- +# RGB Matches how human vision works + +.right-column[ +However, RGB isn't all that intuitive (technology centric) +- Especially artists and visual designers +- Hard to pick colors in 3d on a 2d screen +- Or actually perceive them at a cognitive level +] +.left-column[ + +] +??? + +--- +# RGB Matches how human vision works + +.right-column[ +However, RGB isn't all that intuitive (technology centric) +- Especially artists and visual designers +- Hard to pick colors in 3d on a 2d screen +- Or actually perceive them at a cognitive level + +HSV is much better for *people* +- Hue: Dominant wavelength of light +- Saturation: Purity (how much white/black mixed in) +- Value: Luminance or amount of light in color = max(R,G,B) +] +.left-column[ +## RGB + +## HSV + + +] + +??? +HSV cylindrical – hue around the outside (angle) on the web value between +0 and 360 (red is 0, green is 120, blue is 240) and it’s in rainbow +order), saturation from center to edge, value is top to bottom + +--- +# Understanding HSV + +.left-column[ + +] + +.right-column[ +- Hue - or color value, is around the circle at the top of the cone. +- Saturation - the colors get more saturated the further out from the center of the cone +- Value - the color gets "brighter" the closer you are to the top of the cone and darker the further you go down. + + +] +--- +# Compare the following colors using HSV +.right-column[ +Which is correct? + +- A: Top color has different *hue* than bottom color +- B: Top color has higher *saturation* than bottom color +- C: Top color has higher *value* than bottom color +] +.left-column[ + +] +??? +B: Saturation + +--- +# Value vs saturation + + +--- +# Question + +You have been asked to create a digital-paper compatible interface. As a result; you need to pick colors that will be easily distinguishable in black and white. Which of 'H' 'S' and 'V' should you vary to support black and white display? + +??? +last year's answers + + + +--- +# Perception of Color is Culturally Defined! + +.footnote[ +<sup>1</sup>[New Scientist: Russian speakers get the blues](https://www.newscientist.com/article/dn11759-russian-speakers-get-the-blues/) +] + +.right-column[ + +Not only are we limited to RGB, but we disagree about how to interpret +it<sup>1</sup> +] +.left-column[ + +] +??? + +The language you speak can affect how you see the world, a new study of colour perception indicates. Native speakers of Russian – which lacks a single word for “blue†– discriminated between light and dark blues differently from their English-speaking counterparts, researchers found. + +--- +# And Relative + +![:youtube Vergeer and Van Lier illusion,Db4PwJ2LDVk] +--- +# Design Tip #1: Don't rely on Blue for Small Objects + +.left-column-half[ + + +] +.right-column-half[ +- Photopigments not distributed evenly + - Mainly reds (64%) & few blues (2-4%) + - Less sensitive to short wavelengths (blue) +] + +--- +# Design Tip #1: Don't rely on Blue for Small Objects + +.left-column-half[ + + +] +.right-column-half[ +- Photopigments not distributed evenly + - Mainly reds (64%) & few blues (2-4%) + - Less sensitive to short wavelengths (blue) +- Few blue cones in fovea + - Harder to see small blue objects you fixate on + - Blue text also slightly harder to read + + +- So: blue hyperlinks as default is worst choice +- Note: strong contrast >> avoiding blue +] + +--- +# Design Tip #2: Don’t Rely on Blue for Older Users + +- As we age, our lens yellows and absorbs <Br> shorter wavelengths +- Sensitivity to blue is even more reduced + + + +--- +# Design Tip #3: Make sure that contrast is high enough + +.left-column-half[ +**Accessibility Issue!** + +WCAG requires *at least 4.5:1* contrast, so you cannot round a +contrast ratio up to 4.5:1. For example, #777777 <br>( ) is a commonly-used +shade of gray with a 4.48:1 contrast ratio. It does not meet the WCAG +contrast threshold.<sup>1</sup> +] +.right-column-half[ +] + +.footnote[ +[WCAG guidelines on contrast](https://webaim.org/articles/contrast/) +] +??? +Test in greyscale + +--- +# Design Tip #3: Make sure that contrast is high enough + +.left-column-half[ +**Accessibility Issue!** + +WCAG requires "at least 4.5:1" contrast, so you cannot round a +contrast ratio up to 4.5:1. For example, #777777 <br>( ) is a commonly-used +shade of gray with a 4.48:1 contrast ratio. It does not meet the WCAG +contrast threshold. +] + +.right-column-half[ + +] + + +??? +Test in greyscale + +Focus on value over hue or saturation + +This will help ensure visibility + +Can use a b/w photocopier to help if you already have a GUI + +Keep luminance / intensity / value the same from grayscale when moving to color + +--- +# Designing Tip #4: Minimize saturated Colors + +.medium.right-column70[ +- Different wavelengths of light focus at different distances behind +eye’s lens + +- If your GUI has lots of reds and blues, will force lots of +refocusing and cause fatigue + +- Design Implication + - Pure (saturated) colors require more focusing than less pure +(desaturated, pastel) + - Avoid saturated colors in UIs unless really need something to stand +out (stop sign) + - Don't follow this advice! [Vibrant Colors in Web Design](https://uxplanet.org/vibrant-colors-in-web-design-20-visually-impactful-websites-to-inspire-you-bc7988da1e95) +] +.left-column[ + + +[mediaelection.com](http://mediaelection.com/) +] +--- +# Where to Find More Color Advice? + +.medium.right-column70[ +- Martin Krzywinski<sup>1</sup> on <br>[Brewer Palettes](http://mkweb.bcgsc.ca/brewer/) +- [Color Brewer](http://colorbrewer2.org/), [Color Scheme +Desginer](http://colorschemedesigner.com), [Color Schemer](http://colorschemer.com) +] +.left-column[] +.footnote[ +<sup>1</sup>Famous information graphics artist, [bio](http://mkweb.bcgsc.ca/bio/martin-krzywinski-bio.pdf)] +--- +# Color Blindness: Ishihara Test +![:youtube Ishihara Colorblindness test showing colored dots inside +colored dots showing numbers,WzAW41DugXQ] + +If you can’t see numbers, don’t worry +- Projectors, LCD screens, CRT, and print all have different dynamic ranges, hard to get them to match +??? + +Trouble discriminating colors + +About 9% of males, 0.5% of females + +Two main types +- Different photopigment response is common + - Reduces capability to discern small color diffs +- Red-green deficiency is best known + - Lack of either green or red photopigment can’t discriminate colors dependent on R & G + - More rare are blue-yellow and total color blindness + +Some women have a fourth type of cone +- Estimates are 12% women +- Some can see more colors than ordinary humans + + +--- +# Design Tip #5: Use Redundant Cues + +.left-column-half[ + +] + + +.right-column-half[ +Don't rely solely on Hue: Use mixtures of colors (red / green issues) + +Also have contrast in intensity + +Consider having other redundant cues too + - What redundant cues used for traffic signs? +] + +??? +Traffic signs have multiple cues: color, word, shape + +another case for using greyscale to test + +--- +# Gestalt Psychology + +A lot of this draws from Gestalt Psychology. + +_Gestalt_ means "an organized whole that is perceived as more than the sum of its parts." + +Read about other [gestalt psychology](https://www.interaction-design.org/literature/article/the-law-of-similarity-gestalt-principles-1) principles +- similarity +- continuation +- closure +- proximity +- figure/ground +- symmetry and order + +--- +# People are easy to trick + +.left-column50[ + +] + +.right-column40[ +From [@NovikProf](https://twitter.com/NovickProf/status/1270005909704638470/photo/1) + +Surprising 4: The foreground colors (hue 230° & 90°) appear similar but the background spheres +(all base color RGB 255 157 194) appear distinctly pink and orange. +Original .png file is at [http://bit.ly/2O74l2I](http://bit.ly/2O74l2I). +] + + +--- +# People are easy to trick + +How do we actually create color? We don't have LEDs of every color +-- + +- Three LCD cells per pixel + +- Keep them small! + +--- +# Why Pixels are enough + +.right-column-half[ +Limits of human perceptual system + +Eye reconstructs +] +.left-column-half[ +  +] +--- +# People are easy to trick + +How do we actually create color? We don't have LEDs of every color + +- Three LCD cells per pixel + +- Keep them small! + +How might we do grayscale? + +??? +make connection to video +--- +# How fast can people see things? + +.left-column[ + +] + +.right-column[ +*< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception* + +Image you are looking at flickers 60 times per second + +Differences in peripheral vision + - Sabertooth tigers +] +--- +# How fast can people see things? +.left-column[ + +] +.right-column[ +*< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception* + +Pretty much never have to be faster than this for user response! +- Get >120 million instructions per core (@3Ghz) +- High end GPU theoretically as high as 26 *billion* instr. +- First GUIs had ~20 *thousand* +] +--- +# Can use this to create greyscale + +How might we do grayscale? + +-- + +- Black 25% of the time, +- 40-60 frames per second (FPS)? +??? +40-60 FPS + +--- +# Can use this for animation +- minimum of 10 FPS +- 24-40 smoother +--- +# How fast can people see things? + +< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception + +*< ~100-200ms seems like “instant responseâ€* +- Hard to tell response times below this apart +- Upper range of eye saccades + +--- +# Let's try an experiment + +--- +# Also useful for Pre-attentive processing + +.left-column[ + +] + +.right-column-half[ +On the next couple of slides you're going to see a picture. + +- Turn on your mics if you'd like to partipate. +- If all of the shapes are the same, you'll call out "same", call out "different" if they are different. +- One of the TAs will time us. + +Need a ~~victim~~ volunteer with a stopwatch + +] + +??? +Grouping looks at how to make things look related + +What if we want to make things look different and stand out? + +Let's try it: Say out loud: + +Same if every object is the same + +Different if at least one object is different +--- +# Pre-attentive processing + + + +??? +this is about shape + +--- +# Pre-attentive processing + + + +??? +this is about color +--- +# Pre-attentive processing + + + +??? +gotcha! + +--- +# Pre-attentive processing + + + +??? +this is about size +--- +# Pre-attentive processing + + + +??? +This one doesn't work well +--- +# Design Tip #6 Make things Distinct + + + +What other variables might be important to making things distinct? +??? +From Kevin Mullet and Darrell Sano, Designing Visual Interfaces + +- Value +- Orientation +- Texture +- Position (2d/3d) +--- +# Design Tip #7: Use [Small Multiples](https://en.wikipedia.org/wiki/Small_multiple) + +.left-column-half[ + + + +] + + + +.footnote["Information consists of differences that make a difference" -- Edward -- +-- Tufte, Envisioning Information] + + +--- +# How fast can people see things? + +.left-column-half[ +< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception + +< ~100-200ms seems like “instant response†+ +.bold.blue[< 1-2 seconds typically “good response timeâ€] +- Similar times in conversational turn taking protocols +- Longer delays ~5 sec have to say something to keep conversation + alive +- Note: numbers fuzzier as we go out +] +--- +# How fast can people see things? +.left-column-half[ +< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception + +< ~100-200ms seems like “instant response†+ +< 1-2 seconds typically “good response time†+ +.bold.blue[More than 10-15 sec is typically “bad response timeâ€] + +- Short Term Memory (STM) g#1 decay effects +- Web has trained us to accept slower response times +- However a difference of 250 ms can switch people to a competitor +] +--- +# How fast can people see things? +.left-column-half[ +< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception + +< ~100-200ms seems like “instant response†+ +< 1-2 seconds typically “good response time†+ +.bold.blue[More than 10-15 sec is typically “bad response timeâ€] +] +.right-column-half[ +.quote["Two hundred fifty msec, either slower or faster, is close to +the magic number now for competitive advantage on the Web"] +] +.footnote[Harry Shum, a computer scientist and speed specialist at Microsoft] + +--- +# Design Tip #8: Manage Expectations + +Long response times are more manageable if you + +- Tell people what to expect, be predictable (follow through) + +- Also good to support interrupts + +--- + +# How fast can people see things? +.left-column-half[ +< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception + +< ~100-200ms seems like “instant response†+ +< 1-2 seconds typically “good response time†+ +.bold.blue[More than 10-15 sec is typically “bad response timeâ€] +] + +.right-column-half[ +Can also manipulate perception: [Chris Harrison's +work](http://chrisharrison.net/index.php/Research/ProgressBars2) + + +![:youtube Harrison progress bar manipulation shows how animation of +progress bars changes perception of response time,CDnN3wLY3OE] +] + +--- +# How fast can people see things? + +.left-column-half[ +< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception + +< ~100-200ms seems like “instant response†+ +< 1-2 seconds typically “good response time†+ +More than 10-15 sec is typically “bad response time†+ +.bold.blue[No response: Change Blindness] +] +.right-column-half[ +![:youtube Video of someone asking for directions while another person +walks by with a door,FWSxSQsspiQ] +] + +??? + +- Subtle changes over time +- Distractors +- Discontinuities (Ex. in movies) + +--- +# How fast can people see things? + +.left-column-half[ +< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception + +< ~100-200ms seems like “instant response†+ +< 1-2 seconds typically “good response time†+ +More than 10-15 sec is typically “bad response time†+ +.bold.blue[No response: Change Blindness] +] +.right-column-half[ +![:youtube Video of basketball players, 0grANlx7y2E] +] +--- +# Design Tip #9: Replace subtle changes with obvious ones + + +--- +# Design Tip #9: Replace subtle changes with obvious ones + + +--- +# Design Tip #9: Replace subtle changes with obvious ones + + +--- + +# What's wrong with these buttons? + + + +??? +No clear association between buttons and labels +--- +# Better grouping strategy + + + +??? +Clear association between buttons and labels + +--- +# Good or bad? + +Review Star Labels | Icon Labels +----|---- + |  + +??? +No clear association between icons and labels + +--- +# Design Tip #10: Use well-tested visual grouping strategies + +.right-column[ +] +--- +# But not too many groups! + +[Hick's law](https://en.wikipedia.org/wiki/Hick%27s_law): Reaction + time (RT) is logarithmically related to the number of options + .jax[$$RT = T * log_2(n+1)$$] + + - in other words people use *binary search* + - Assumes there is a logic to the ordering (worse when random) + + - General case: Information foraging theory (Pirolli & Card) + +--- +# Design Tip #11: Minimize the number of options + +With every additional choice the time it will take + more time for selection + + +--- +# How much can a person remember? + +Short term (working memory) +- Famous 7 +/- 2 “chunks†(Somewhat outdated model) + - 2461827176 + - YBEAMBIMGC + +--- +# How much can a person remember? + +Short term (working memory) +- Famous 7 +/- 2 “chunks†(Somewhat outdated model) + - 2461827176 vs (412) 268-1776 + - YBEAMBIMGC vs EBAY IBM GMC + +--- +# Chunking in practice + + +--- + +# How much can a person remember? + +Short term (working memory) +- Famous 7 +/- 2 “chunks†(Somewhat outdated model) +- Basically: “very limited†and “decays quickly†+- Has become “worse†with constant multitasking + +-- +Long term +- Essentially unbounded +- But requires effort & may not always work on cue +- Can’t explicitly forget! Even though you try! +--- +# How much can a person remember? + +Short term +- 7 +/- 2 "chunks" (or less); decays quickly + +Long term +- Essentially unbounded, but slower + +Novice / expert differences +- Experts have learned items in long term memory to draw on, novices don’t + +--- +# Design Tip #12: Rely on Recognition rather than Recall +.right-column[ +Cannot count on memory to be there, or be fast! + +- Generally better to rely on recognition (seeing it in front of you) +than just recall (having to pull it out of long term memory) + +- But note that having the ability to operate from recognition does +not preclude recall +] +.left-column[ + +] +--- +# Recap of Design Tips for Vision + +- #1: Don't rely on blue for small objects +- #2: Don't rely on blue for older users +- #3: Make sure that contrast is high enough +- #4: Minimize saturated colors +- #5: Use redundant cues +- #6: Make things distinct +- #7: Use small multiples +- #8: Manage expectations if you can't change response time +- #9: Replace subtle changes with obvious ones +- #10: Use well-tested visual grouping strategies +- #11: Minimize the number of options +- #12: Rely on recognition rather than recall + +--- +# Summary + +Human Physiology drives design +- Number of colors +- Pixel size (retina displays) + +Good design is accessible design + +- There is tons to know about good use of color and other visual +design elements. For not, the simplest thing to do is to look for existing color palettes, and just those. That should account for the vast majority of your needs for colors. There is also red-green color blindness too. Simplest thing to do is to turn your screens into greyscale, and see if you can see differences. + +--- +# End of deck (unused slides past here) +--- +# Demonstrate your Understanding of HSV + +You have been asked to create a digital-paper compatible interface. As +a result, you need to pick colors that will be easily distinguishable +in black and white. Which of 'H' 'S' and 'V' should you vary to +support black and white display? + +Which is correct? +- A: Hue +- B: Saturation +- C: Value + +??? +C Value + +--- + +# Aside: Color Gamuts<sup>1</sup> + +![:youtube Explanation of color gamuts,8y9yENEdtG4] + +.footnote[ +<sup>1</sup> +See the [Wikipedia page on color +gamuts](http://en.wikipedia.org/wiki/Gamut) for more information] + +??? +- no time to play video +- Outside is wavelengths (hues) +- Triangle shows primary colors for this gamut +--- diff --git a/slides/wk03/examlet.html b/slides/wk03/examlet.html new file mode 100644 index 0000000000000000000000000000000000000000..5e865cfd2d80d936f639bd9839237df380066821 --- /dev/null +++ b/slides/wk03/examlet.html @@ -0,0 +1,20 @@ +--- +layout: presentation +title: AMA/Examlet +description: Review, then assessment. +--- + +# On Tap for today + +Part 1: Review on anything up to 4/9 (25 minutes) + +Part 2: Our Examlet. (25 minutes) + - The examlet will open at 10:55 - 25 minutes into class. + - The expectation is that everyone that is in our timezone (PDT) or close to PDT would take this before the end of class. I have + spoken to the students I know are not in this time zone separately + - You should start right away as you would in a traditional classroom and not wait around. + - We will be checking to see that everyone has taken it by 11:45am + - You will not need to stay on Zoom to take the assessment. However we will stay in the classroom session in case you have questions about the format etc. + - This should be about 20 minutes, but you will have a buffer to 25 minutes to ensure that everyone can submit on time. + - If you have problems with any of the technology you MUST get in touch with the course staff immediately. + - You may use your notes, the website, take a look at your code, etc, but *you may not collaborate with others on the exam*. diff --git a/slides/wk03/img/layout-algorithm/android-linear.png b/slides/wk03/img/layout-algorithm/android-linear.png new file mode 100644 index 0000000000000000000000000000000000000000..6b252da67203bb2e57a21a65c2b442d1e7e14a9d Binary files /dev/null and b/slides/wk03/img/layout-algorithm/android-linear.png differ diff --git a/slides/wk03/img/layout-algorithm/bad-layout.jpg b/slides/wk03/img/layout-algorithm/bad-layout.jpg new file mode 100644 index 0000000000000000000000000000000000000000..55cf47438eb8cae311aa26180659dbc9d7975f50 Binary files /dev/null and b/slides/wk03/img/layout-algorithm/bad-layout.jpg differ diff --git a/slides/wk03/img/layout-algorithm/badLayout.png b/slides/wk03/img/layout-algorithm/badLayout.png new file mode 100644 index 0000000000000000000000000000000000000000..1272a6dab0bd83e82e70988038b0ca788e522d15 Binary files /dev/null and b/slides/wk03/img/layout-algorithm/badLayout.png differ diff --git a/slides/wk03/img/layout-algorithm/constraints.png b/slides/wk03/img/layout-algorithm/constraints.png new file mode 100644 index 0000000000000000000000000000000000000000..78898ddb4fc866d46c7981a84778ddd14ebdd44b Binary files /dev/null and b/slides/wk03/img/layout-algorithm/constraints.png differ diff --git a/slides/wk03/img/layout-algorithm/goodLayout.png b/slides/wk03/img/layout-algorithm/goodLayout.png new file mode 100644 index 0000000000000000000000000000000000000000..ad8b0eee3f09ef6e9fa90147d74456ad290929de Binary files /dev/null and b/slides/wk03/img/layout-algorithm/goodLayout.png differ diff --git a/slides/wk03/img/layout-algorithm/pinterest-android.jpg b/slides/wk03/img/layout-algorithm/pinterest-android.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3c36582648b9294fa1bfbbaf56f7f0f9fcc8d670 Binary files /dev/null and b/slides/wk03/img/layout-algorithm/pinterest-android.jpg differ diff --git a/slides/wk03/img/layout-algorithm/quiz1.png b/slides/wk03/img/layout-algorithm/quiz1.png new file mode 100644 index 0000000000000000000000000000000000000000..80e63bddd1e58cee348d0f8bff3c241b688745ec Binary files /dev/null and b/slides/wk03/img/layout-algorithm/quiz1.png differ diff --git a/slides/wk03/img/layout-algorithm/quiz2.png b/slides/wk03/img/layout-algorithm/quiz2.png new file mode 100644 index 0000000000000000000000000000000000000000..024ddbdd8c6f8a519caa3ab8ac5908c24fd27166 Binary files /dev/null and b/slides/wk03/img/layout-algorithm/quiz2.png differ diff --git a/slides/wk03/img/layout-algorithm/trylayout.png b/slides/wk03/img/layout-algorithm/trylayout.png new file mode 100644 index 0000000000000000000000000000000000000000..d001b208ec53f2c7ece0a3aaf50adffe8a453125 Binary files /dev/null and b/slides/wk03/img/layout-algorithm/trylayout.png differ diff --git a/slides/wk03/img/layout-algorithm/watch3.png b/slides/wk03/img/layout-algorithm/watch3.png new file mode 100644 index 0000000000000000000000000000000000000000..ce7134c4b0c57883931335e40fef086a366e7294 Binary files /dev/null and b/slides/wk03/img/layout-algorithm/watch3.png differ diff --git a/slides/wk03/img/layout-algorithm/worseLayout.png b/slides/wk03/img/layout-algorithm/worseLayout.png new file mode 100644 index 0000000000000000000000000000000000000000..b94189d6c98f546d08d4aced03c7dfaf972e34a1 Binary files /dev/null and b/slides/wk03/img/layout-algorithm/worseLayout.png differ diff --git a/slides/wk03/img/layout-ii/constraint-editor.png b/slides/wk03/img/layout-ii/constraint-editor.png new file mode 100644 index 0000000000000000000000000000000000000000..cb898264dbb375ea8f1fe36aa38180cf76f5ceee Binary files /dev/null and b/slides/wk03/img/layout-ii/constraint-editor.png differ diff --git a/slides/wk03/img/layout-ii/constraints.png b/slides/wk03/img/layout-ii/constraints.png new file mode 100644 index 0000000000000000000000000000000000000000..78898ddb4fc866d46c7981a84778ddd14ebdd44b Binary files /dev/null and b/slides/wk03/img/layout-ii/constraints.png differ diff --git a/slides/wk03/img/layout-ii/design-view.png b/slides/wk03/img/layout-ii/design-view.png new file mode 100644 index 0000000000000000000000000000000000000000..76f63830d1dbd0e0388c6ce7f57bd2b3d7618db9 Binary files /dev/null and b/slides/wk03/img/layout-ii/design-view.png differ diff --git a/slides/wk03/img/layout-ii/explore-devices.png b/slides/wk03/img/layout-ii/explore-devices.png new file mode 100644 index 0000000000000000000000000000000000000000..f226288d9e058fef8b2b28d1f9836d908661407a Binary files /dev/null and b/slides/wk03/img/layout-ii/explore-devices.png differ diff --git a/slides/wk03/img/layout-ii/fixed.png b/slides/wk03/img/layout-ii/fixed.png new file mode 100644 index 0000000000000000000000000000000000000000..412bad473f486a9178681db203cbae918e767c56 Binary files /dev/null and b/slides/wk03/img/layout-ii/fixed.png differ diff --git a/slides/wk03/img/layout-ii/layoutparams.png b/slides/wk03/img/layout-ii/layoutparams.png new file mode 100644 index 0000000000000000000000000000000000000000..1e80c2fef10e2de5d5b0691481112a8dc323744f Binary files /dev/null and b/slides/wk03/img/layout-ii/layoutparams.png differ diff --git a/slides/wk03/img/layout-ii/layouttoolbar.png b/slides/wk03/img/layout-ii/layouttoolbar.png new file mode 100644 index 0000000000000000000000000000000000000000..be73a95c45ee9ec84379257721b63951c60e7f2f Binary files /dev/null and b/slides/wk03/img/layout-ii/layouttoolbar.png differ diff --git a/slides/wk03/img/layout-ii/linearlayout.png b/slides/wk03/img/layout-ii/linearlayout.png new file mode 100644 index 0000000000000000000000000000000000000000..ab3d68b83b6c5a7cb915ab87c6c75cfb4b952864 Binary files /dev/null and b/slides/wk03/img/layout-ii/linearlayout.png differ diff --git a/slides/wk03/img/layout-ii/match.png b/slides/wk03/img/layout-ii/match.png new file mode 100644 index 0000000000000000000000000000000000000000..96fdca857d70a2ecd6c7f3e4e2b1e2493865cd10 Binary files /dev/null and b/slides/wk03/img/layout-ii/match.png differ diff --git a/slides/wk03/img/layout-ii/modern-yahoo.png b/slides/wk03/img/layout-ii/modern-yahoo.png new file mode 100644 index 0000000000000000000000000000000000000000..0760609a794ec4c1a2797bdbfd5d5190fc9723da Binary files /dev/null and b/slides/wk03/img/layout-ii/modern-yahoo.png differ diff --git a/slides/wk03/img/layout-ii/part1-diagram.png b/slides/wk03/img/layout-ii/part1-diagram.png new file mode 100644 index 0000000000000000000000000000000000000000..d35a62e29abba453847a525fc4eba2956e1d34d2 Binary files /dev/null and b/slides/wk03/img/layout-ii/part1-diagram.png differ diff --git a/slides/wk03/img/layout-ii/spottheheron-prototype.png b/slides/wk03/img/layout-ii/spottheheron-prototype.png new file mode 100644 index 0000000000000000000000000000000000000000..240a67f5cbb7a18f176a778be692c4e09d26ec7f Binary files /dev/null and b/slides/wk03/img/layout-ii/spottheheron-prototype.png differ diff --git a/slides/wk03/img/layout-ii/spottheheron-wireframe.png b/slides/wk03/img/layout-ii/spottheheron-wireframe.png new file mode 100644 index 0000000000000000000000000000000000000000..f54d313eb11c98a26d1dc0d1b855b902bbe1b875 Binary files /dev/null and b/slides/wk03/img/layout-ii/spottheheron-wireframe.png differ diff --git a/slides/wk03/img/layout-ii/text-view.png b/slides/wk03/img/layout-ii/text-view.png new file mode 100644 index 0000000000000000000000000000000000000000..1d49a12ee182cd49abf523f77607b1f62b181c73 Binary files /dev/null and b/slides/wk03/img/layout-ii/text-view.png differ diff --git a/slides/wk03/img/layout-ii/watch.png b/slides/wk03/img/layout-ii/watch.png new file mode 100644 index 0000000000000000000000000000000000000000..44b8d98d37b56d24272f42df63a5ae6cb3d40700 Binary files /dev/null and b/slides/wk03/img/layout-ii/watch.png differ diff --git a/slides/wk03/img/layout-ii/watch3.png b/slides/wk03/img/layout-ii/watch3.png new file mode 100644 index 0000000000000000000000000000000000000000..ce7134c4b0c57883931335e40fef086a366e7294 Binary files /dev/null and b/slides/wk03/img/layout-ii/watch3.png differ diff --git a/slides/wk03/img/layout-ii/wrap.png b/slides/wk03/img/layout-ii/wrap.png new file mode 100644 index 0000000000000000000000000000000000000000..6cc11d6b590c7545445ea02762584ac07f51d6af Binary files /dev/null and b/slides/wk03/img/layout-ii/wrap.png differ diff --git a/slides/wk03/img/layout-ii/xml-files.png b/slides/wk03/img/layout-ii/xml-files.png new file mode 100644 index 0000000000000000000000000000000000000000..97e22458b2bb3db69d909a66b8df2e0b0e32a16a Binary files /dev/null and b/slides/wk03/img/layout-ii/xml-files.png differ diff --git a/slides/wk03/layout-algorithm.html b/slides/wk03/layout-algorithm.html new file mode 100644 index 0000000000000000000000000000000000000000..1861944f3761e789c63e121e82e238474720e642 --- /dev/null +++ b/slides/wk03/layout-algorithm.html @@ -0,0 +1,800 @@ +--- +layout: presentation +title: Layout Algorithms +description: Introduction the implementation of layout +class: middle, center, inverse +--- + +# Hall of Fame or Hall of Shame? + +.left-column-half[ +Think about those Visual Design Tips! + + +] + +.right-column-half[ + +- #1: Don't rely on blue for small objects +- #2: Don't rely on blue for older users +- #3: Make sure that contrast is high enough +- #4: Minimize saturated colors +- #5: Use redundant cues +- #6: Make things distinct +- #7: Use small multiples +- #8: Manage expectations if you can't change response time +- #9: Replace subtle changes with obvious ones +- #10: Use well-tested visual grouping strategies +- #11: Minimize the number of options +- #12: Rely on recognition rather than recall +] + +--- + +# What went wrong? +.left-column50[] +.right-column50[] + +??? +- Changing available space e.g., window resized by user +- Changing sizes, fonts, etc. +- Adding and removing components +- Layout mechanism has to deal with all cases +--- +# What went wrong? + + +??? +- No scroll bar for text boxes that are too narrow +- No way to redistribute space between directory & file list +- Important controls (e.g., Open) get hidden +- Min size is much too small +- No way to send the dialog away (buttons gone) + + +--- +name: inverse +layout: true +class: center, middle, inverse +--- + +# Layout Algorithms + +{{site.author.name}} + +CSE 340 {{site.quarter}} + +--- +name: normal +layout: true +class: + +--- +layout: false + +[//]: # (Outline Slide) +# Goals for today +- __Review__ +- How layout is implemented in the toolkit + +--- +# Review: XML Inflation + + +Inflation in `MainActivity#onCreate(Bundle)`: +```java +// contents is the ScrollView +contents.addView(getLayoutInflater().inflate(R.layout.part1solution, null), PARAMS); +``` + +To break this down, recall that `MainActivity` inherits (indirectly) from `Context` +```java +LayoutInflater inflater = getLayoutInflater(); // ask the Context for the inflater +View newView = inflater.inflate(R.layout.part1, null); // newView is at the root of the inflated tree +contents.addView(newView, PARAMS); // attach the newView to the parent +``` + +In a View (in say `Part3View.java`) get the inflater this way: +```java +LayoutInflater inflater = LayoutInflater.from(context); // Use a static method to get the inflater +// The rest is the similar +``` +??? +Remind that you can inflate once but use many times + +--- +# Review: Adding Programatically + +Adding a view programatically in `MainActivity` broken down in steps +1. The LayoutParams are created +2. The new view is created +3. Use [ViewGroup#addView(View, ViewGroup.LayoutParams)](https://developer.android.com/reference/android/view/ViewGroup#addView%28android.view.View,%20android.view.ViewGroup.LayoutParams%29) +method on the parent to add it to the Interactor Hierarchy (with the params) + +```java +public static final RelativeLayout.LayoutParams PARAMS = new RelativeLayout.LayoutParams( + RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT); +.... +Part2View p2v = new Part2View(this, getImageStrings(), vMargin); +contents.addView(p2v, PARAMS); +``` +--- +# Review: Adding Programatically + +A slightly different way: +1. Create the new view +2. Add it to the parent using [ViewGroup#addView(View)](https://developer.android.com/reference/android/view/ViewGroup#addView%28android.view.View%29) +3. Set up the LayoutParams +4. Add the LayoutParams to the view + +```java +public static final RelativeLayout.LayoutParams PARAMS = new RelativeLayout.LayoutParams( + RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT); +... +Part2View p2v = new new Part2View(this, getImageStrings(), vMargin); +contents.addView(p2v); +// Add more setup for the params if needed. +contents.setLayoutParams(PARAMS); +``` + +--- +# Solutions to [LayoutLab](https://github.com/harshitha-akkaraju/layoutlab) + +Don't peek until you've tried it :) + +- [Inflation](https://github.com/harshitha-akkaraju/layoutlab/blob/complete/app/src/main/res/layout/activity_main.xml) +- [Programatically](https://github.com/harshitha-akkaraju/layoutlab/blob/complete/app/src/main/java/com/harshiakkaraju/layoutlab/ProgrammaticConstraints.java) + +--- +# Aside: changing properties dynamically + +What if you canted to change background color of all of the buttons to red? + + +```java +for (int i = 0; i < layout.getChildCount(); i++) { + view = layout.getChildAt(i); + view.setBackgroundColor(Color.RED); +} +``` + +--- +# Reminder: Layout Types in Android + +- [FrameLayout](https://developer.android.com/reference/android/component/FrameLayout.html) - good for position views on +top of each other, or encapsulating a bunch of views. Used in [Doodle](/assignments/doodle). + +- [__LinearLayout__](https://developer.android.com/reference/android/component/LinearLayout.html) - places views one after +the other in order according to the orientation (Horizontal or Vertical). Used in [Layout](/assignments/layout). + +- [__RelativeLayout__](https://developer.android.com/reference/android/widget/RelativeLayout) - Positions of the children +are desribed in relation to one another + +- [__TableLayout__](https://developer.android.com/reference/android/component/TableLayout.html) - Rows and columns style +way of declaring a layout + +- [GridLayout](https://developer.android.com/reference/android/component/GridLayout.html) - Uses +an [*adapter*](https://developer.android.com/reference/android/interactor/Adapter.html) that provides items to display in +a grid + +- [ConstraintLayout](https://developer.android.com/reference/android/component/ConstraintLayout.html) Let's you use constraints to specify how things should lay out. Used in [Layout](/assignments/layout). + + +- More on https://developer.android.com/guide/topics/ui/declaring-layout.html + +??? + +Talk about different Toolkits may have different layouts. + +--- + +# Layouts in Play + +.left-column-half[ +Which layouts are used in these apps? +] +.right-column-half[ + + +] + +-- +.left-column-half[ +Probably: +- **LinearLayout** +- **ConstraintLayout** + +Thinking about what layouts are in an app is part of your Part 4 of the Layout assignment. +] + +--- +# General & Powerful Approach: Constraints + +General mechanism for establishing and maintaining relationships between things +- Layout is one use +- Several other uses in UI + - Connection of application to UI, e.g. deriving appearance from data + - Multiple views of same data + - Automated semantic feedback + - Automatic arrangement of lines (powerpoint snapping!) + +--- +layout: false + +## ConstraintLayout in Android + +.left-column[ + +] +.right-column[ +- [ConstraintLayout](https://developer.android.com/reference/android/support/constraint/ConstraintLayout) + - Allows you to position widgets in a flexible way + - Useful for building **responsive** interfaces in Android. + +- You will be using ConstraintLayout for the Layout exercise + +- Review Monday's slides for more details +] + +--- +layout: false + +[//]: # (Outline Slide) +# Goals for today +- Review +- **How layout is implemented in the toolkit** + +--- +# Time to talk about position again + +.left-column-half[ +.quote[You have been asked to create a new `CircleView` object that can draw a circle in our +`drawingView` object in Doodle. The user wants to add a circle so that the center point is at +(100,100) on the drawingView and has a radius of (10). In `CircleView#onDraw(Canvas)` you will +need to call `canvas.drawCircle(cx, cy, radius, paint)` (note that drawCircle takes the (x, y) +location of the center of the circle as input). What values should you use for `cx` and `cy` +in this your onDraw code?] +] + +.right-column-half[ + +] + +--- +# Time to talk about position again +.left-column-half[ +.quote[Consider the same CircleView object that contains a circle of radius 10 that we want to +display in the drawingView so the center appears at `100, 100` in the parent view's coordinate system. +How should we set up the bounding box for the `CircleView` so that its canvas will be correctly +clipped? What are `x`, `y`, `width` and `height` for the bounding box (in parent coordinates?)] +] +.right-column-half[ + + +] + +--- +# Time to talk about position again + +.left-column-half[ + +.quote[You have been asked to create a new `SquareView` object that can draw a square. The user + wants to add a square with its top left corner at (150,50) and a width of (20). In `SquareView.onDraw()` + you will need to call `canvas.drawRect(left, top, right, bottom, paint)` What values should + you use for `left` and `top`? +] +] +??? +(0,0) +-- +.right-column-half[ +`(0,0)` +] +--- +# Time to talk about position again +.left-column-half[ +.quote[Consider the same square (at `150,50` with a width of `20` in its parent). How should we set +up the bounding box for the `SquareView` so that its `Canvas` will be correctly clipped? +What are `x`, `y`, `width` and `height` for the bounding box (in parent coordinates?) +] +] +??? +(150,50,20,20) +-- +.right-column-half[ +`(150,50,20,20)` +] +--- +# So: what have we learned? + + +-- +When an interactor draws itself, its drawing area always starts at (0,0) + +The *View* that interactor is in (it's *parent*) determines the location of its bounding box. This is what correctly positions it! + +--- +# How does layout come into this? + +In Doodle you hard-coded the position of everything (or used animation to set it) + +But in most interfaces, we use *layout containers* to accomplish this. +- Layout containers make decisions like "stack these views vertically" or "make them fit into this size area" and set their position and bounding box on this basis +- The *toolkit architecture* then helps to enforce this + +--- +# How is position calculated by the toolkit architecture? +.left-column-half[ +<br> +<br> + +<div class="mermaid"> +graph TD +W(ViewGroup) --> V[ViewGroup] +W --> V1[View] +W --> V2[View] +V --> V3[View] +V --> V4[View] +V --> V5[View] + +classDef blue font-size:14pt,text-align:center +classDef darkblue font-size:14pt,text-align:center + +class W,V darkblue +class V1,V2,V3,V4,V5 blue +</div> +] +.right-column-half[ +- The Component (Interactors + ViewGroups) Hierarchy in just about everything + - Draw and redraw + - Layout +- Toolkit architecture invokes layout +- Containers do the work + - Manage size and position of children + - Enforce component abstraction: Simple loop through child components --> Recursive tree traversal + - Translate child to correct location + - Clip child after drawing is complete + - Know how to handle resizing (reactive) + +] +??? +- Parent knows how to setup for drawing of children, invoke their +drawing code, and add additional output (before and/or after) based on +what the parent is and its internal state + +- Whorfian effects (things not in the library are hard) + +- Nesting not well defined + + +--- +# How do Container Components actually do layout? +.left-column-half[ +<br> +<br> + +<div class="mermaid"> +graph TD +W(ViewGroup) --> V[ViewGroup] +W --> V1[View] +W --> V2[View] +V --> V3[View] +V --> V4[View] +V --> V5[View] + +classDef blue font-size:14pt,text-align:center +classDef darkblue font-size:14pt,text-align:center + +class W,V darkblue +class V1,V2,V3,V4,V5 blue +</div> +] +.right-column-half[ +Key Issues: +- Where do components get placed? +- How much space should they occupy? +- How should components to react to changes? + - number of components + - size of window +- Who should get to decide children's sizes? parents or children? + - Should it be a top down vs bottom up approach + - Depth first tree traversal +] +--- +# Simplest possible layout implementation (similar to what is in Frame layout) + +Depth first tree traversal + +No consideration of child size or position in doing layout + +Simplified from +FrameLayout +[source +code](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/widget/FrameLayout.java), +[View](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java) +and [ViewGroup](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewGroup.java) + +```java +protected void onLayout(boolean changed, int l, int t, int r, int b) { + foreach child c { + if (child.isVisible()) { + Rectangle r = child.getLayoutParams(); + childLeft = padding + r.x; + childTop = padding + r.y; + child.layout(childLeft, childTop, r.w, r.h); + } + } +} +``` +??? +we're ignoring the implementation of gravity here + +remind them what protected means? + +--- +# Generalized implementation of layout +Details of most else, and two-pass process, handled in [View](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java) +and [ViewGroup](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewGroup.java) + +```java +// Second: do the actual updating +public void layout(Rectangle newBounds) { + onMeasure() // measure myself; this is recursive + onLayout() // again; recursive. Makes use of calculated measurements +} +``` + +--- +.left-column[ +# Measuring +] +.right-column[ +`onMeasure()` is a callback* invoked by `View.measure()` +] +.footnote[We'll be talking more about callbacks when we talk about events] + +-- +.right-column[ +Object is given guidance about the size is given from parent view in the form of `MeasureSpec` parameters +] +-- +.right-column[ +`onMeasure` ensures every view has a width and height value set prior to a layout pass +] +-- + +.right-column[ +Note: You must manually take padding into account (subtract padding +from the width/height dimensions) +] + +--- +.left-column[ +# Best toolkits let child specify +] +.right-column[ +Size (based on nature of component (think TextBox vs Button vs LinearLayout) +- preferred size +- minimum size +- maximum size + +Parent gets to ignore all of that, but usually tries not to. Someone has to be in charge; it's the parents (my kids hate that! :) +- Usually tries to give each child as much as possible & divide up the remainder proportionally +- However, child component has to deal if not enough (i.e. truncate text) +] + +--- +# Reference Implementation of onMeasure + +```java +// First: Measure everything +protected void onMeasure(int widthspec, int heightspec) { + // loop through children in order they were added + foreach child { + // get child's preferred layout size + onMeasure() + // story relevant information & do calculations about + // the container size + } + // based on all that, update our dimensions + setMeasuredDimension() +} +``` + +Why does a container need to know about its kids' sizes to measure itself? + +??? + +Example: it might need to be big enough to fit them all (LinearLayout) + +--- +# Aside `ImageView` height: + +- What is it's height before layout is done? Unknown! +- But you need it in Part3 to decide where to put it + - You haven't added it to the interactor hierarchy yet + - How do you get height? + +-- + +Call `image.measure()` (you'll have to think about what the right parameters are) + +Then call `image.getMeasuredHeight()` (why not `image.getHeight()`?) + +-- + +Because it's 0! Since this image isn't laid out. + +--- +# Frame layout -- actual implementation (slightly simplified) + +```java +protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec { + // recursively calculate size of children + foreach child { + // ... calculate max child width and max child height + maxWidth = Math.max(maxWidth, child.getMeasuredWidth() // + margins); + maxHeight = ... + } + // ... add in padding + setMeasuredDimension(... based on what was found) + // now recursively set dimensions for all children + + foreach child { + final View child = getChildAt(i); + child.measure(childWidthMeasureSpec, childHeightMeasureSpec); // recursion through callback + } +} +``` +??? +How would we do this for linearLayout? + +--- +# Generalized implementation of layout +Details of most else, and two-pass process, handled in [View](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java) +and [ViewGroup](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewGroup.java) + +```java +// Second: do the actual updating +public void layout(Rectangle newBounds) { + onMeasure() // measure myself; this is recursive + onLayout() // again; recursive. Makes use of calculated measurements +} +``` + +--- +.left-column[ +# Layout +] +.right-column[ +`onLayout()` is a callback triggered when a view's position is changed +] +-- +.right-column[ +Gives the new position __relative__ to the parent +] +-- +.right-column[ +Causes a layout call on all children (!) +] + +--- +# Reference implementation of onLayout + +```java +// a layout class should override onLayout. +protected void onLayout(boolean changed, int l, int t, int r, int b) { + // recursively calls layout on each child + foreach child { + LayoutParams lp = child.getLayoutParams(); + // calculate the width and height of the kids + int width = calculated width + int height = calculated height + // calculate the position of kids + int childLeft = calculated position + int childTop = calculated position + child.layout(childLeft, childTop, childLeft + width, childTop + height); + } +} +``` +??? + +What might we use for left/top/width/height +- in FrameLayout? +- in LinearLayout? + +--- +# How would LinearLayout calculate these? +This is just setting the bounding box! +What is child *n*'s position? Width? Height? +- need to know we are vertical +- can decide to set our width entirely based on kids +- we get to decide position + +--- +# Generalized implementation of onLayout + +When is this called? + +??? +- Whenever the interface is *damaged* (call `invalidate(true)` to force this) +- Before the recursive `drawAll()` function we talked about last week. **Why?** + + +-- +- Whenever the interface is *damaged* (call `invalidate(true)` to force this) +- Before the recursive `drawAll()` function we talked about last week. **Why?** + + +??? +Because `drawAll()` needs to know where interactors are to properly *translate* and *clip* before calling `onDraw()` on each of them + +-- + + - Because `drawAll()` needs to know where interactors are to properly *translate* and *clip* before calling `onDraw()` on each of them + +--- +# How does this relate to drawing? +.left-column-half[ +<br> +<br> + +<div class="mermaid"> +graph TD +W(ViewGroup) --> V[ViewGroup] +W --> V1[View] +W --> V2[View] +V --> V3[View] +V --> V4[View] +V --> V5[View] + +classDef blue font-size:14pt,text-align:center +classDef darkblue font-size:14pt,text-align:center + + +class W,V darkblue +class V1,V2,V3,V4,V5 blue +</div> +] +.right-column-half[ +*After* measuring & layout: + +__Tree traversal__ may be done on the layout hierarchy. Order depends on the specific layout algorithm (constraints don't require any!) +] + +-- +.right-column-half[ +Each view is responsible for drawing itself +] +-- +.right-column-half[ +Siblings are drawn in the order that they appear +] +--- +.left-column[ +# When to (re)Draw? +] +.right-column[ +Drawing is costly- (e.g. frame rates dropping for scrolling interactions) +] +-- +.right-column[ +Often the screen is static +] +-- +.right-column[ +We should *draw when we need to* +] + +-- +.right-column[ +Re-drawing "damaged" areas: call `invalidate()` +] +--- +.left-column[ +# Summary of the Drawing Process +] +.right-column[ +1) Android calls measure on root node (view) +```java +// View specifies size of self +protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec); +``` +] +--- +.left-column[ +# Summary of the Drawing Process +] +.right-column[ +1) Android calls measure on root node (view) +```java +// View specifies size of self +protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec); +``` +2) Android calls layout on view +```java +// View specifies size and position of children +protected void onLayout(boolean changed, int left, int top, int right, int bottom); +``` +] +--- +.left-column[ +# Summary of the Drawing Process +] +.right-column[ +1) Android calls measure on root node (view) +```java +// View specifies size of self +protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec); +``` +2) Android calls layout on view +```java +// View specifies size and position of children +protected void onLayout(boolean changed, int left, int top, int right, int bottom); +``` +3) Android calls draw on view +```java +// Add the drawing happens +protected void onDraw(Canvas canvas); +``` +] +--- +# What of this do *you* need to do + +- If you are creating an interface, none of it + - Just use the layouts +- If you are creating a new type of layout class + - It depends + - If you can manage layout entirely by specifying + an interactor hierarchy with layout params that do what you want, you are golden (our assignment) +- If you want to do something entirely new (lay out images in a spiral for example) you have to override `onLayout()` or `onMeasure()` or both (not assigned) +--- +# End of deck + +--- +#Conceptual form of UI constraints + +``` java +// this is 5 pixels to the right of that +this.x = that.x + that.w + 5 +// this is centered +this.x = that.x + that.w/2 - this.w/2 +// this is 10 larger than children +this.w = 10 + max_child().x + max_child().w +``` + +--- +# Frame layout -- actual implementation (slightly simplified) + +Simplified from +FrameLayout +[source +code](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/widget/FrameLayout.java), +[View](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java) +and [ViewGroup](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewGroup.java) +```java +// this is implemented in view +public void layout(int l, int t, int r, int b) { + // first make sure everything has a size (recursively) + onMeasure() + // then do layout + onLayout(changed, left, top, right, bottom) +} + +// a layout class should override onLayout. In FrameLayout +protected void onLayout(boolean changed, int l, int t, int r, int b) { + // recursively calls layout on each child + foreach child { + LayoutParams lp = child.getLayoutParams(); + int width = child.getMeasuredWidth(); + int height = child.getMeasuredHeight(); + int childLeft = parentLeft + lp.leftPadding; // add padding + int childTop = parentTop + lp.topPadding; // add padding + child.layout(childLeft, childTop, childLeft + width, childTop + height); // recursion through callback + } +} +``` +??? +Traverses the hierarchy many times over as implemented +Can try to be more efficient or give more control... tradeoffs diff --git a/slides/wk03/layout-ii.html b/slides/wk03/layout-ii.html new file mode 100644 index 0000000000000000000000000000000000000000..1945cd1068cf3855f404cb2951a27b4e1fe1db15 --- /dev/null +++ b/slides/wk03/layout-ii.html @@ -0,0 +1,641 @@ +--- +layout: presentation +title: Layout II - More on Android Layout +description: Layout II - the details +class: middle, center, inverse +--- + +<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/cnO00FYxqbWSpDfHzx2PM?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> + +--- +name: inverse +layout: true +class: center, middle, inverse +--- + +# Layout II - More on Android Layout + +{{site.author.name}} + +CSE 340 {{site.quarter}} + +--- +name: normal +layout: true +class: + +--- + +[//]: # (Outline Slide) +# Today's goals +- Announcements + - Peer reviews technically due Tuesday, please do them early + - Reflection due Wednesday (no late days) + - Layout 1-2 due Friday (no late days) +- Specifying Layout in XML +- Inflation +- Laying out views programatically +- Wednesday we will talk about the theory behind layout. + + +--- +# Why do we need layout? +.left-column60[ +  +] + +.right-column30[ +- Visual appeal +- Organization (think about Properties of People Design tip #10: Use well-tested visual grouping strategies) +] + +--- +# Reminder: User Interfaces on Android +.left-column-half[ +- Views + - Base class for __all__ UI elements + - Interactors (e.g buttons, labels, image views, etc) +- ViewGroups + - Encapsulates one or more views (e.g. Android Components, **Layouts**) + - Can define specific **layout** properties + + We will use the word *Components* to include both layout components and interactors (Views) since you + don't generally "interact" with layouts +] +.right-column-half[ +<div class="mermaid"> +graph TD +W(ViewGroup) --> V[ViewGroup] +W --> V1[View] +W --> V2[View] +V --> V3[View] +V --> V4[View] +V --> V5[View] + +classDef blue font-size:14pt,text-align:center +classDef darkblue font-size:14pt,text-align:center + +class W,V darkblue +class V1,V2,V3,V4,V5 blue +</div> + +] + +--- +# Layout in Android +Where we left off: "Many layout and other attributes for components. You should explore!" + + + +??? +Talk about how there's many layout and other attributes for components that they should explore! + +--- +# Layout Types in Android + +- [FrameLayout](https://developer.android.com/reference/android/component/FrameLayout.html) - good for position views on +top of each other, or encapsulating a bunch of views. Used in [Doodle](/assignments/doodle). + +- [__LinearLayout__](https://developer.android.com/reference/android/component/LinearLayout.html) - places views one after +the other in order according to the orientation (Horizontal or Vertical). Used in [Layout](/assignments/layout). + +- [__RelativeLayout__](https://developer.android.com/reference/android/widget/RelativeLayout) - Positions of the children +are desribed in relation to one another + +- [__TableLayout__](https://developer.android.com/reference/android/component/TableLayout.html) - Rows and columns style +way of declaring a layout + +- [GridLayout](https://developer.android.com/reference/android/component/GridLayout.html) - Uses +an [*adapter*](https://developer.android.com/reference/android/interactor/Adapter.html) that provides items to display in +a grid + +- [ConstraintLayout](https://developer.android.com/reference/android/component/ConstraintLayout.html) Let's you use constraints to specify how things should lay out. Used in [Layout](/assignments/layout). + + +- More on https://developer.android.com/guide/topics/ui/declaring-layout.html + +??? + +We'll talk more about Constraint layouts later + + +--- +.left-column[ +## Example: Linear Layout of Email + +[Linear Layout Tutorial](https://developer.android.com/guide/topics/ui/layout/linear) + + + +] + +.right-column[ + +```xml +<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" + android:layout_width="match_parent" + android:layout_height="match_parent" + android:paddingLeft="16dp" + android:paddingRight="16dp" + android:orientation="vertical" > + <EditText + android:layout_width="match_parent" + android:layout_height="wrap_content" + android:hint="@string/to" /> + <EditText + android:layout_width="match_parent" + android:layout_height="wrap_content" + android:hint="@string/subject" /> + <EditText + android:layout_width="match_parent" + android:layout_height="0dp" + android:layout_weight="1" + android:gravity="top" + android:hint="@string/message" /> + <Button + android:layout_width="100dp" + android:layout_height="wrap_content" + android:layout_gravity="right" + android:text="@string/send" /> +</LinearLayout> +``` + +] + + +??? +Can implement all of the things we discussed earlier using constraints + +note that they can be hard to debug? + +Discussion of specific inheritance hierarchy for constraints + +- Only have to write once when we use classes properly +- can mix and match things + + + +--- +# Layout in Android +- The Layout XML View completely specifies what was in the GUI (and vice versa) +- Get to it by clicking 'Text' (next to 'Design') + +.left-column-half[ + + +] + +.right-column-half[ + +```xml +<?xml version="1.0" encoding="utf-8"?> +<-...-> +<TextView +<-...-> +<LinearLayout + <-...-> + <Button + android:id="@+id/button" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:text="@string/Save" /> + <-...-> +</LinearLayout> +``` + +] + +??? +What examples do we have here? +- Layout container (linearlayout) +- Spacer +- springiness +- struts +- constraints + +--- +# More about XML and Android +.left-column[ + +] +.right-column[ + +Android has XML, where all sorts of static properties can be specified + +Every Android app has a `layout` directory and a `values` directory and several others. We'll use these in this assignment + +In XML you can set variables that we can access later in XML or code +- In XML access a value (such as `vMargin` from our assignment) using `@(file name)/(value name)` +, where the file name is a file somewhere in `res` and the value name is an xml value found in that file. i.e., for `vMargin`, you can use `"@dimen/vMargin"` +- In code, you refer to that value by `R.(file name).(value name)` + +] + +--- +# The importance of ID + +.left-column-half[ +In `MainActivity.java` for Layout +```java +// Set window contents based on selected item. +*switch (item.getItemId()) { +* case R.id.action_part_1: +* setCurrentTabId(R.id.action_part_1); + contents.addView(getLayoutInflater().inflate(R.layout.part1, null), PARAMS); // params here is a set of layout paramaters for this view + return true; +* case R.id.action_part_2: +* setCurrentTabId(R.id.action_part_2); + contents.addView(new Part2View(this, getImageStrings()), PARAMS); + return true; + //... +} +``` +] +.right-column-half[ +- Set the IDs in your layout XML when you create things! +- Use good ID names (like variables in programming) +- Access it programmatically using `[Component].getId()` and `[Component].setID()`. +- Access all Ids using `R.id.[ID]` +- We use this to implement the tab navbar in Layout + + + +] +--- +# Lots to unpack here + +`PARAMS` is a class constant added to `MainActivity` to hold the parameters for the layout: +```java +*public static final RelativeLayout.LayoutParams PARAMS = +* new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, +* RelativeLayout.LayoutParams.MATCH_PARENT); +... +switch (item.getItemId()) { // Set window contents based on selected item. + case R.id.action_part_1: + setCurrentTabId(R.id.action_part_1); +* contents.addView(getLayoutInflater().inflate(R.layout.part1, null), PARAMS); + return true; + case R.id.action_part_2: + setCurrentTabId(R.id.action_part_2); +* contents.addView(new Part2View(this, getImageStrings()), PARAMS); + return true; + //... +} +``` +--- +# PARAMS + +```java +public static final RelativeLayout.LayoutParams PARAMS = + new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, + RelativeLayout.LayoutParams.MATCH_PARENT); +``` +.left-column40[ +- There are a lot of options for layout parameters, study the documentation! [Here](https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams) is the documentation for the `RelativeLayout` `LayoutParams` +- Width and height are often set as either `MATCH_PARENT` or `WRAP_CONTENT` (could be used to wrap the bounding box wrap around the text in your `TextView` in Doodle) +] +.right-column-half[ + + +] +--- +# Two ways to create Interactors + +- Specify elements in WYSIWYG* editor, which will automatically create and initialize the objects via XML. + - You could also hand type the XML the editor would produce. + - Done in `Doodler#onCreate(Bundle)` - the line `setContentView(R.layout.activity_main);` + - Will be done in Part 1, Part 3, and Part 4 for Layout + +```java +* contents.addView(getLayoutInflater().inflate(R.layout.part1, null), PARAMS); +``` + +- Instantiate UI classes at runtime. + - We did this creating new views in Doodle at runtime! + - Will do this in Part 2, Part 3, and Part 4 for Layout + +```java +* contents.addView(new Part2View(this, getImageStrings()), PARAMS); +``` +.footnote[\*WYSIWYG = What You See Is What You Get] +--- +# Where are these views getting added? + +Looking at `MainActivity#onCreate(Bundle)` we see `setContentView(R.layout.activity_main);` + +This statement loads `activity_main.xml`. + +Looking deeper we see that contains a `RelativeLayout` +which contains a `ScrollView` and the `BottomNavigationView`. + +``` +<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" ... > + <ScrollView + android:id="@+id/tab_contents" > + </ScrollView> + + <android.support.design.widget.BottomNavigationView + android:id="@+id/bottom_nav" + ... /> + +</RelativeLayout> +``` + +--- + +# Using that id + +So we find the `contents` (a `ScrollView`) by that unique id + +`ScrollView contents = findViewById(R.id.tab_contents);` + +--- +# Runtime Instantiation *FROM XML* + +In part 1 we instantiate (create) `part1.xml` into the hierarchy of view which will be the children of +the `ScrollView contents` using **Inflation**. + +We use a [LayoutInflater](https://developer.android.com/reference/android/view/LayoutInflater) +pass it in the id of the xml we're interested in (`R.layout.part1`). Once inflated, we add +it to the ScrollView. + +```java +* contents.addView(getLayoutInflater().inflate(R.layout.part1, null), PARAMS); +``` + +To do Inflation in your code you need to `import [package].R;` + +--- +# Programatic creation of the hierarchy + +In part 2, we recreate his hierarchy programatically by instantiating an `Part2View` object and adding +that to the view. + +```java +* contents.addView(new Part2View(this, getImageStrings()), PARAMS); +``` + +Just like with Part 1, we need to create a `ConstraintLayout` then add that to the ScrollView. + +We did that for you... Your job is to add `ImageView` objects to the `ConstraintLayout`. + +Hint: create and use `ConstraintLayout.LayoutParams` for specifying the constraints on the `ImageView` +objects you create. You'll probably want to look at the [documentation](https://developer.android.com/reference/android/support/constraint/ConstraintLayout.LayoutParams) + +--- +# Constraint Layout in Android +.left-column-half[ + + +] +.right-column-half[ +This assignment also uses **Constraints** (the `ConstraintLayout`) + +You can see little lines connecting the `textView` to its container and it's sibling (the `linearLayout`). +- This specifies how it's attached (can change type by clicking on right) +- If you were to change the interface (e.g. a different sized screen), it would stay attached and keep filling the space +- All ends up in XML you can explore too +] + +--- +# Constraint Layout in Android +.left-column-half[ + + +] +.right-column-half[ +You can test this: modify the aspect ratio of your display, and flip it to horizontal to test things +] + +??? +Demonstration: consider demoing this interface live +PRINT THIS LIST +- Show dragging things to create layout +- Show different size and orientation phones +- Show editing attributes +- Show clicking on constraints in box to change type +- Show simple interface hierarchy +- Show simplifying xml +- Show changing button names/ids + +--- +# What are Constraints? +.left-column[ +] +.right-column[ + +- Very general +- Can reproduce most other things +- Can operate on multiple axes +- Can enhance other layout options + +] + +--- + +# What are Constraints? +.left-column[ +] + +.right-column[ + +- What do you think this does? `app:layout_constraintBottom_toTopOf="@+id/linearLayout"` +- And this? `app:layout_constraintEnd_toEndOf="parent"` +- We also use `Start_tStartOf` and 'Top_toTopOf` to create this + +```xml +<TextView + android:id="@+id/textView" + android:layout_width="0dp" + android:layout_height="0dp" + android:text="@string/sample_text" + app:layout_constraintBottom_toTopOf="@+id/linearLayout" + app:layout_constraintEnd_toEndOf="parent" + app:layout_constraintStart_toStartOf="parent" + app:layout_constraintTop_toTopOf="parent" + android:layout_marginStart="8dp" + android:layout_marginTop="8dp" + android:layout_marginEnd="8dp" + android:layout_marginBottom="8dp"/> + +``` +] +--- +.left-column[ +## Constraints in Android + +] + +.right-column[ +[Docs](https://developer.android.com/training/constraint-layout/): limited set of constraints +- 1 Size ratio +- 2 Delete constraint (not a constraint, just removes them) +- 3 Height/width mode (3 main types): + - Wrap constraint  + - Fixed size  + - Match Constraint  +- 4 Margins +- 5 Constraint bias (essentially weights on competing constraints) + +Range of attachment options (e.g. button sides, corners) + +Worth getting to know additional abstractions (groups; guidelines; +barriers; chains) +] +??? + +-bias lets us create something that is 2-3 of the way over rather than +centered + +go back to android to demo again +--- +# Powerful option + +Can do everything we can do with springs, struts, and linear layouts + +Declare relationships (.red[what] should be true) + +System automatically maintains relationships under change (.red[how]) +--- +# Powerful option + +Can do everything we can do with springs, struts, and linear layouts + +Declare relationships (what should be true) + +- This should be centered in that + +- This should be 12 pixels to the right of that + +- Parent should be 5 pixels larger than child + +System automatically maintains relationships under change (how) +--- +# Powerful option +Can do everything we can do with springs, struts, and linear layouts + +Declare relationships (what should be true) + +System automatically maintains relationships under change (how) + +Too good to be true? +- Unsolvable for arbitrary things +- Works really well for a limited set +??? +a good set for ui programming +xx need to make sure I know why it is hard for arbitrary things + +--- +# Note that these are one-way constraints + +You can change the right side, and it will update the left side (not +the reverse) + +Can be very inefficient .jax[$$O(2^n)$$] + +But highly efficient incremental update algorithms exist +??? + +Only have to update things that might change + +Hudson's work on this was seminal + +can have a Directed Acyclic Graph (DAG) but not a cycle (thus, a tree) +hard to guard against cycles + +--- +# Layout Assignment +.left-column[ + +] + +.right-column[ +Part 1 is about basic reactive layout using XML and constraints +- We will use constraints for the left/right/top/bottom of each image +- `scaleType`, `width` and `height` will be provided for you + +There are also things we specify without constraints: margins, for example. +- Android best practice is to use a variable for this +- How do we do that in XML? + +Note: the image on the left is what we are calling a __Layout Wireframe__ +] + +--- +# Layout Assignment +.left-column[ + +] + +.right-column[ +Part 1 is about basic reactive layout using XML and constraints + +Part 2 asks you to reproduce this in code +- Not all that different from creating views in Doodle +- What are the key steps here? +] +??? +instantiate +add to the hierarchy + +Just now we will also add layout containers +--- +# Layout Assignment +.left-column[ + +] + +.right-column[ +Part 1 is about basic reactive layout using XML and constraints + +Part 2 asks you to reproduce this in code +- Not all that different from creating views in Doodle +- What are the key steps here? + - instantiate (create an interactor) + - add to the hierarchy + - just now we will also add layout containers +] + +--- +# Layout Assignment +.left-column[ +  + +] + +.right-column[ +Part 3 is about using both XML and programatic means to create a Pinterest style Layout + +Part 4 is about designing and creating your own mock up of another app layout +- Make sure you do the design first +- Create your Layout Wireframe (see left) +- Create your interactor hierarchy +] + +--- +# Constraints: A General and Powerful Approach + +General mechanism for establishing and maintaining relationships between things +- Layout is one use +- Several other uses in UI + - Connection of application to UI, e.g. deriving appearance from data + - Multiple views of same data + - Automated semantic feedback + - Automatic arrangement of lines (Snapping in drawing programs) + + +--- + +# Practice with the [Layout Lab](https://github.com/harshitha-akkaraju/layoutlab) + +- Clone [https://github.com/harshitha-akkaraju/layoutlab.git](https://github.com/harshitha-akkaraju/layoutlab.git) +- Open it up in Android studio +- Switch between the challenges based in the `AndroidManifest.xml` + +| Create this layout using XML | Create this layout programatically | +| :-- | :-- | +|  | | diff --git a/slides/wk04/340AccessibiltyScanner.pdf b/slides/wk04/340AccessibiltyScanner.pdf new file mode 100644 index 0000000000000000000000000000000000000000..12d1e850100a27121cf1ec26b917e66545bc79fb Binary files /dev/null and b/slides/wk04/340AccessibiltyScanner.pdf differ diff --git a/slides/wk04/340AccessibiltyScanner.pptx b/slides/wk04/340AccessibiltyScanner.pptx new file mode 100644 index 0000000000000000000000000000000000000000..349f162034811496921188fb0e680c38c7f1b6fe Binary files /dev/null and b/slides/wk04/340AccessibiltyScanner.pptx differ diff --git a/slides/wk04/accessibility-and-inclusive-design.pdf b/slides/wk04/accessibility-and-inclusive-design.pdf new file mode 100644 index 0000000000000000000000000000000000000000..743b2c59227b9aaf00d299c8970bf1d362c302a5 Binary files /dev/null and b/slides/wk04/accessibility-and-inclusive-design.pdf differ diff --git a/slides/wk04/accessibility.html b/slides/wk04/accessibility.html new file mode 100644 index 0000000000000000000000000000000000000000..df690dde43c9586011fd0997f35b3573d4883921 --- /dev/null +++ b/slides/wk04/accessibility.html @@ -0,0 +1,113 @@ +--- +layout: presentation +title: Accessibility --Week 4, Monday-- +description: Accessibility +class: middle, center, inverse +--- +[//]: # (Outline Slide) +.left-column[ +# Today's goals +] +.right-column[ + +Reminders + - Layout Part 3-5 due tomorrow at 10pm + - Remember you needed to accept [as2-layout-part-3-4](https://gitgrade.cs.washington.edu/student/assignment/120) first! + - Remember git add/commit/push __then go to [GitGrade to turn in](https://gitgrade.cs.washington.edu/student/assignment/120/turnin)__ + - Accessiblity is now open! + - Remember to [accept]() the assignment through GitGrade + +Accessibility in practice! + +Intro to the Accessibility assignment +] +--- + +# Screen Reader Accessibility on Android + +Venkatesh Potluri & Anne Ross + +CSE 340, {{site.quarter}} + +--- +name: normal +layout: true +class: + +--- +# Venkatesh Research Interests + +Accessible programming tools for blind software developers +- A Multi Modal Approach for Blind and Visually Impaired Developers to Edit Webpage Designs +- CodeTalk (aka.ms/codetalk) + +Improving screen reader interactions +- investigating nonvisual interaction techniques on laptop touchpads +- QBit: an exploratory tangible user interface to support nonlinear nonvisual window switching + +--- +# A Multimodal Approach for Blind and Visually Impaired Developers to Edit Webpage Designs + +<iframe width="560" height="315" src="https://www.youtube.com/embed/NbkiVG9Mi9s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> + +--- +# Today’s focus + +.left-column-half[ +Screen readers. + +What are screen readers? + +Different types of screen readers. +- JAWS for Windows +- NonVisual Desktop Access +- VoiceOver +- TalkBack +- ChromeVox + +] +.right-column-half[ +  + +*Where can you find one?* +Different devices used to interact with screen readers. +] + +--- +# Building for screen readers + +Screen readers get underlying information about controls from operating systems. +- this information is provided by a developer. +- Accessibility APIs provide the information to a screen reader. +- Screen readers provide this information visually, through audio or in Braille to users. + +.left-column-half[ + +] +.right-column-half[ +Illustrative example of how screen readers get information. Source: semantics to screen readers -- a list apart. + +*Do all developers provide this information?* +] + +--- +# App Health Indicators reported by Google's Accessibility Scanner + +| Error | Description | +|----------------------|-------------------------------------------------------------------------------------------------------------------------------| +| Clickable Items | Overlapping clickable items | +| Editable Image Label | TextView has a content description. This might interfere with a screen reader’s ability to read the content of the text field | +| Image Contrast | Low contrast in image or icon | +| Item Descriptions | Items with identical speakable text | +| Item Label | Missing element label | +| Item Type Label | Item label ends with type, e.g., “Play Button.†TalkBack automatically announces item type, so information is redundant | +| Link | URL in link may be invalid | +| Text Contrast | Low text contrast between foreground and background | +| Touch Target | Item is too small| + + +--- +# Demo + +--- +# Accessbility assignment diff --git a/slides/wk04/events.html b/slides/wk04/events.html new file mode 100644 index 0000000000000000000000000000000000000000..5be04a5d53d9461f12bfe56bd78875547a4e476b --- /dev/null +++ b/slides/wk04/events.html @@ -0,0 +1,721 @@ +--- +layout: presentation +title: Event Handling I -- Callbacks, Model View Controller, and Events +description: Describes input devices, abstractions around events, Listeners, Event Delivery +class: center, middle, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Write down three things that you reacted to this week + +What are some examples? + +-- + +This is event-driven interaction + +-- + +We will be studying the theory and practice of event driven interactions in Android + + + +--- +# Event Handling I - Callbacks, Model View Controller, and Events + +{{site.author.name}} + +CSE 340 {{site.quarter}} + + +--- +layout: false + +# Administrivia +- Layout part 3-5 + - Due date TONIGHT at 10pm + - Reflection is due with code. + - Lock date (aka when GitGrade and Gradescope will lock) TOMORROW at 10pm +- Assesssments + - [Post Layout Quiz](https://canvas.uw.edu/courses/1370612/quizzes/1236290) it out due Sunday. + - Will likely change the format for the Layout Examlet. +- Accessiblity is out +- Mid quarter evals are out + + +--- +[//]: # (Outline Slide) +# Today's goals + +- What is a callback? +- What is an event? +- What is a Model View Controller? +- How is this all related? +--- + +# Java 102: `Comparator<E>` + +Recall that if you have an array of items that have a "natural sorting order" +such as: + +```java +String[] names = {"Emma", "Ncuti", "Tina", "Idris", "Awkwafina"}; +``` + +We can sort those things using `Arrays.sort` + +```java +Arrays.sort(names); +System.out.println(Arrays.toString(names)); +``` + +Which will output: + +``` +[Awkwafina, Emma, Idris, Ncuti, Tina] +``` + +--- + +# Java 102: `Comparator<E>` + +What if you want to create a new class: [Person](person.zip) + +```java +public class Person { + + private String mFirstName; + private String mLastName; + private int mAge; + + public Person(String firstName, String lastName, int age) { + mFirstName = firstName; + mLastName = lastName; + mAge = age; + } + + public String toString() { return mFirstName + " " + mLastName + " - age " + mAge; } +``` + + +--- + +# Java 102: `Comparator<E>` + +If we had an array of these `Person` objects + +``` +Person[] people = {new Person("Emma", "Watson", 30), new Person("Ncuti", "Gatwa", 27), ... } +``` + +How would we sort that array using `Arrays.sort`? + +-- + +```java +public class Person implements Comparable<Person> { + + ... + public int compareTo(Person other) { + // what would go in here?!?!?!?!? + } +} +``` + +Should we choose based on the first name? Last name? age? + +--- + +# Java 102: `Comparator<E>` + +There's another way to set up sorting: by creating an object that extends from +[`Comparator<E>`](https://docs.oracle.com/en/java/javase/13/docs/api/java.base/java/util/Comparator.html) + +A subclass of `Comparator<E>` must implement one method: + +```java +public int compare​(E object1, E object2) // Compares its two arguments for order. +``` +`compare` compare returns + +* -1 if object1 is "less than" object2 +* 0 if object1 and object2 are equivalent +* 1 if object1 is "greater than" object 2 + +--- +# Java 102: `Comparator<E>` + +Example: + +``` +// this class is defined in PersonLastNameComparator.java +public class PersonLastNameComparator implements Comparator<Person> { + + @Override + public int compare(Person p1, Person p2) { + return p1.getLastName().compareTo(p2.getLastName()); + } +} +``` + +Then we could do the folowing to sort the array by the last name. + + +```java +Arrays.sort(people, new PersonLastNameComparator()); +``` + +--- +# Callbacks + +The model used for implementing Comparators is consider a **Callback** + +From [Wikipedia](https://en.wikipedia.org/wiki/Callback_(computer_programming)): + +> A callback ... is any executable code that is passed as an argument to other code; +> that other code is expected to call back (execute) the argument at a given time. + +--- +# Classes, Inner classes, and Anonymous classes. + +There are three ways to implement callbacks in Java + +1. Creating a class in a separate file (like `PersonLastNameComparator`) +2. Creating an inner class (like `Person.FirstNameComparator`) +3. Creating an anonymous class (like the following) + +```java +Arrays.sort(people, new Comparator<Person>() { + @Override + public int compare(Person p1, Person p2) { + + return p1.getAge() - p2.getAge(); + } +}); +``` +--- +# Classes, Inner classes, and Anonymous classes. + +There are <del>three</del> four ways to implement callbacks in Java + +1. Creating a class in a separate file (like `PersonLastNameComparator`) +2. Creating an inner class (like `Person.FirstNameComparator`) +3. Creating an anonymous class (like the following) +4. Using a lambda + +```java +Arrays.sort(people, (Person p1, Person p2)->{return p1.getAge() - p2.getAge();}); +``` + +--- +# Callback Exercise + +Note: this is a breakout room exercise + +- Please participate! +- TAs will help moderate the activity. + +--- + +# Callback Exercise + +1. Imagine we're designing a Zoo. Each group is going to design a different zoo enclosure +2. In your rooms + - Agree on and write down the name of your enclosure (what animal you contain) + - Determine the type of animal in this enclosure. + - Decide what sound will emanate from this enclosure when you get a “makeNoise for some number of seconds†request + - Decide who will turn their mic on in the main room to make the sound. + - Decide who will type the name of your enclosure in the chat upon your return +3. When you come back into the main room + - One person type the name of your enclosure in the chat. +4. Wait until the instructor calls your enclosure name, then make the sound for the requested number of seconds. + +--- +# Callback Exercise + +As code, I've asked each enclosure to implement the following interface to define the behavior. (Note: +Listeners are a type of event handling callback in Java/Android) + + ```java + public interface EnclosureListener { + public void makeNoise(int numSeconds); + } + ``` + +For example: + + ```java + public class LionCage implements EnclosureListener { + ... + + public void makeNoise(int numSeconds) { + // make the animal noise for the given number of seconds + } + } + ``` + +--- +# Callback Exercise + +Further, by telling me the name of your enclosure you're registering your listener WITH me, the "zookeeper" + + ```java + public class LionCage implements EnclosureListener { + ... + + public void makeNoise(int numSeconds) { + // make the animal noise for the given number of seconds + } + + public void onCreate(Bundle savedInstanceState) { + ... + zookeeper.addEnclosureListener(this); + } + } + ``` +--- +# Callback Exercise + + ```java + public class Zookeeper { + // The zookeeper keeps a list of all EnclosureListeners that were registered, + private List<EnclosureListeners> mEnclosureListeners; + + public final void addEnclosureListener(EnclosureListener listener) { + if (listener == null) { + throw new IllegalArgumentException("enclosureListener should never be null"); + } + mEnclosureListeners.add(listener); + } + + // And can call on them whenever they need with the right amount of time. + public void cacophony(int seconds) + for (EnclosureListener listener : mEnclosureListeners) { + listener->makeNoise(seconds); + } + } + } + ``` +--- +# Callback Exercise + +- The Zookeeper has NO idea what each enclosure will do until the listener is registered and called. +- Each enclosure separately defines how it will react to a makeNoise event. +- The "contract" between the zookeeper and the enclosures is the defined EnclosureListener interface. + +--- +# Callbacks in Java + +- At the time Java has created the toolkit developers had *no* idea how every app would want to respond to events +- The toolkit has pre-defined interfaces so apps or components can respond to events such as clicks or touches. For example: + - The `View` class defines the following Listeners as inner classes: + - `View.OnClickListener` + - `View.OnLongClickListener` + - `View.OnFocusChangeListener` + - `View.OnKeyListener` + - `View.OnTouchListener` (this is used in ColorPicker and Menu by subclassing AppCompatImageView) + - `View.OnCreateContextMenuListener` + +We will come back to these in our next class. + +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Model View Controller, Input Devices and Events +--- +name: normal +layout: true +class: +--- +# How do you think an app responds to user input? + +.left-column30[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + + class ap,w,o,h,hlt,t yellow +</div> +] +.right-column60[ +What happens at each level of the hardware stack? +] +--- +# How do you think an app responds to user input? + +.left-column30[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + + class ap,w,o,h,hlt,t yellow +</div> +] +.right-column60[ +What happens at each level of the hardware stack? +- Hardware level: electronics to sense circuits closing or movement + - Difference between hardware (Event vs sampled) + - Sensor based input +- OS: "Interrupts" that tell the Window system something happened + - Logical device abstraction and types of devices +- Windows system: Tells which window received the input +- Toolkit: defines how the app developer will use these events + - Events as an abstraction +- High level tools: Defines standard components that react to events in a certain way +- Application Program: Can use standard components OR create new interactions + - May define separate interaction techniques +] +--- +# Responding to Users: Model View Controller (MVC) + +.left-column30[ +<br> +<div class="mermaid"> +graph TD +View(View * ) --1-Input--> Presenter(Controller) +Presenter --5-Output --> View +Presenter --2-Updates-->Model(0,3-Model) +Model --4-State Change-->Presenter + +classDef edgeLabel font-size:14pt +classDef blue font-size:14pt,text-align:center +classDef bluegreen font-size:14pt,text-align:center + +class View,Presenter blue +class User,Model bluegreen +</div> +] + +.right-column60[ +Suppose this is a digital phone app + +<sup>*</sup> User interacts through View (s) (the interactor hierarchy)<br> +<sup>0</sup> Model State: _Current person:_ Lauren; _Lock state:_ closed<br> +<sup>1</sup> Password entry. Trigger _Event Handling_<br> +<sup>2</sup> Change state: App unlocked<br> +<sup>3</sup> Model State: _Current person:_ Lauren; _Lock state:_ open<br> +<sup>4</sup> Change state of View(s)<br> +<sup>5</sup> Trigger _Redraw_ and show + +] +??? +Sketch out key concepts +- Input -- we need to know when people are doing things. This needs to be event driven. +- Output -- we need to show people feedback. This cannot ‘take over’ i.e. it needs to be multi threaded +- Back end -- we need to be able to talk to the application. +- State machine -- we need to keep track of state. +- What don’t we need? We don’t need to know about the rest of the UI, probably, etc etc +- Model View Controller -- this works within components (draw diagram), but also represents the overall structure (ideally) of a whole user interface +- NOTE: Be careful to write any new vocabulary words on the board and define as they come up. + +--- +# Responding to Users: Model View Controller (MVC) + +.left-column30[ +<br> +<div class="mermaid"> +graph TD +View(View * ) --1-Input--> Presenter(Controller) +Presenter --5-Output --> View +Presenter --2-Updates-->Model(0,3-Model) +Model --4-State Change-->Presenter + +classDef edgeLabel font-size:14pt +classDef blue font-size:14pt,text-align:center +classDef bluegreen font-size:14pt,text-align:center + +class View,Presenter blue +class User,Model bluegreen +</div> +] + +.right-column60[ +Suppose this is a fancy speech-recognition based digital door lock instead + + +<sup>*</sup> User interacts through View (s) (the interactor hierarchy)<br> +<sup>0</sup> Model State: _Current person:_ Lauren; _Lock state:_ closed<br> +<sup>1</sup> Password entry. Trigger _Event Handling_<br> +<sup>2</sup> Change person to Lauren; App unlocked<br> +<sup>3</sup> Model State: _Current person:_ Lauren; _Lock state:_ open<br> +<sup>4</sup> Change state of View(s)<br> +<sup>5</sup> Trigger _Redraw_ and show + +] +??? +Sketch out key concepts +- Input -- we need to know when people are doing things. This needs to be event driven. +- Output -- we need to show people feedback. This cannot ‘take over’ i.e. it needs to be multi threaded +- Back end -- we need to be able to talk to the application. +- State machine -- we need to keep track of state. +- What don’t we need? We don’t need to know about the rest of the UI, probably, etc etc +- Model View Controller -- this works within components (draw diagram), but also represents the overall structure (ideally) of a whole user interface +- NOTE: Be careful to write any new vocabulary words on the board and define as they come up. + +--- +# Model View Controller (MVC) + +From [Wikipedia]() + +>MVC is a software design pattern commonly used for +developing user interfaces which divides the related program logic into three interconnected elements. + +- *Model* - a representation of the state of your application +- *View* - a visual representation presented to the user +- *Controller* - communicates between the model and the view + - Handles changing the model based on user input + - Retrieves information from the model to display on the view + +-- +MVC exists within each View as well as for overall interface + +--- +# MVC in Android + +.left-column30[ + +<br> +<div class="mermaid"> +graph TD +View(Passive View) --user events--> Presenter(Presenter: <BR>Supervising Controller) +Presenter --updates view--> View +Presenter --updates model--> Model(Model) +Model --state-change events--> Presenter + +classDef edgeLabel font-size:14pt +classDef blue font-size:14pt,text-align:center +classDef bluegreen font-size:14pt,text-align:center + +class View,Presenter blue +class Model bluegreen +</div> +] +.right-column60[ +Applications typically follow this architecture + +- What did we learn about how to do this? + - What causes the screen to update? + - How are things laid out on screen? +] +??? +- Relationship of MVC to Android software stack +- Measure and layout +- Discuss Whorfian effects + +-- +.right-column60[ +Responding to Users: Event Handling +- When a user interacts with our apps, Android creates **events** +- As app developers, we react "listening" for events and responding +appropriately +] +--- + +|Procedural | Event Driven | +| :--: | :--: | +||<br><br><br><br>| +|Code is executed in sequential order | Code is executed based upon events| + +--- + +# But what is an Event? + +Generally, input is harder than output + +- More diversity, less uniformity + +- More affected by human properties + +--- +# Where does and Event come from? + +Consider the "location" of an event... + +What is different about a joystick, a touch screen, and a mouse? + +??? +- Mouse was originally just a 1:1 mapping in 2 dimensions == absolute +location; bounded +- Joystick is relative (maps movement into rate of change in location); unbounded +- Touch screen is absolute; bounded +- What about today's mouse? Lifting and moving? + +-- + +- Mouse was originally just a 1:1 mapping in 2 dimensions == absolute +location; bounded +- Joystick is relative (maps movement into rate of change in location); unbounded +- Touch screen is absolute; bounded + +-- + +What about the modern mouse? Lifting and moving? + +-- + +How about a wii controller? + +--- +# Is this an input device? + +.left-column-half[] +-- +.right-column-half[No … it’s an interaction technique. Over 50 WPM!] + +??? +Who/what/where/etc +Dimensionality – how many dimensions can a device sense? +Range – is a device bounded or unbounded? +Mapping – is a device absolute or relative? + +-- +.right-column-half[ +Considerations: +- Dimensionality – how many dimensions can a device sense? +- Range – is a device bounded or unbounded? +- Mapping – is a device absolute or relative? +] +--- +# Interaction techniques / Components make input devices effective + +For example, consider text entry: +- 60-80 (keyboards; twiddler) +- ~20 (soft keyboards) +- ~50? Swype – but is it an input device? +--- +# Modern hardware and software starting to muddy the waters around this + + + +??? +Add OLEDs to keys -> reconfigurable label displays + +--- + +# Higher level abstraction + +Logical Device Approach: + +- Valuator (slider) -> returns a scalar value +- Button -> returns integer value +- Locator -> returns position on a logical view surface +- Keyboard -> returns character string +- Stroke -> obtain sequence of points + +??? + +- Can obscure important differences -- hence use inheritance +- Discussion of mouse vs pen -- what are some differences? +- Helps us deal with a diversity of devices +- Make sure everyone understands types of events +- Make sure everyone has a basic concept of how one registers listeners + + +--- +# Not really satisfactory... + +Doesn't capture full device diversity + +| Event based devices | | Sampled devices | +| -- | -- | -- | +| Time of input determined by user | | Time of input determined by program | +| Value changes only when activated | | Value is continuously changing | +| e.g.: button | | e.g.: mouse | + +??? +Capability differences + - Discussion of mouse vs pen + - what are some differences? + +--- +# Contents of Event Record + +Think about your real world event again. What do we need to know? + +**What**: Event Type + +**Where**: Event Target + +**When**: Timestamp + +**Value**: Event-specific variable + +**Context**: What was going on? + +??? +Discuss each with examples + +--- +# Contents of Event Record + +What do we need to know about each UI event? + +**What**: Event Type (mouse moved, key down, etc) + +**Where**: Event Target (the input component) + +**When**: Timestamp (when did event occur) + +**Value**: Mouse coordinates; which key; etc. + +**Context**: Modifiers (Ctrl, Shift, Alt, etc); Number of clicks; etc. + +??? +Discuss each with examples + +--- + +# Input Event Goals + +Device Independence +- Want / need device independence +- Need a uniform and higher level abstraction for input + +Component Independence +- Given a model for representing input, how do we get inputs delivered +to the right component? +??? + + +--- +# Summary +- Callbacks: a programatic way to get or send information from/to our program from the system + +-- +- MVC: Separation of concerns for user interaction +-- + +- Events: logical input device abstraction +-- + +- We model everything as events +- Sampled devices + - Handled as “incremental change†events + - Each measurable change: a new event with new value +- Device differences + - Handled implicitly by only generating events they can generate +- Recognition Based Input? + - Yes, can generate events for this too + + +--- +# End of Deck diff --git a/slides/wk04/img/accessibility/JAWS_logo.png b/slides/wk04/img/accessibility/JAWS_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..653532ed13a71afaa851d5a0c8bd119c70d12748 Binary files /dev/null and b/slides/wk04/img/accessibility/JAWS_logo.png differ diff --git a/slides/wk04/img/accessibility/NVDA_logo.png b/slides/wk04/img/accessibility/NVDA_logo.png new file mode 100644 index 0000000000000000000000000000000000000000..54eb3531832505478b73264830d8ea6dae708877 Binary files /dev/null and b/slides/wk04/img/accessibility/NVDA_logo.png differ diff --git a/slides/wk04/img/accessibility/ScreenReaderIllustration.png b/slides/wk04/img/accessibility/ScreenReaderIllustration.png new file mode 100644 index 0000000000000000000000000000000000000000..e0671e6c54528c9fea483130979260016c61a6e1 Binary files /dev/null and b/slides/wk04/img/accessibility/ScreenReaderIllustration.png differ diff --git a/slides/wk04/img/accessibility/chart.png b/slides/wk04/img/accessibility/chart.png new file mode 100644 index 0000000000000000000000000000000000000000..b2e1f680ee863fca1f6fe23e7b6bf933629b5295 Binary files /dev/null and b/slides/wk04/img/accessibility/chart.png differ diff --git a/slides/wk04/img/accessibility/diverse-people.png b/slides/wk04/img/accessibility/diverse-people.png new file mode 100644 index 0000000000000000000000000000000000000000..1717e18fce88c912b3a346a50b02ef08eebfffc0 Binary files /dev/null and b/slides/wk04/img/accessibility/diverse-people.png differ diff --git a/slides/wk04/img/events/eventdriven.png b/slides/wk04/img/events/eventdriven.png new file mode 100644 index 0000000000000000000000000000000000000000..67b3cebc7c86a8c61e71b16f054e56c26f5ef6c0 Binary files /dev/null and b/slides/wk04/img/events/eventdriven.png differ diff --git a/slides/wk04/img/events/mvp-design-pattern.png b/slides/wk04/img/events/mvp-design-pattern.png new file mode 100755 index 0000000000000000000000000000000000000000..9dd87a7f4c12553e619856dd300b307ae9e7b449 Binary files /dev/null and b/slides/wk04/img/events/mvp-design-pattern.png differ diff --git a/slides/wk04/img/events/oled.png b/slides/wk04/img/events/oled.png new file mode 100644 index 0000000000000000000000000000000000000000..93ff779017d7e530ef25d16b0ea8fbe6886e0e22 Binary files /dev/null and b/slides/wk04/img/events/oled.png differ diff --git a/slides/wk04/img/events/procedural.png b/slides/wk04/img/events/procedural.png new file mode 100644 index 0000000000000000000000000000000000000000..e7c58ac3a6f46f44c0108c3a88838fbe9ec287ed Binary files /dev/null and b/slides/wk04/img/events/procedural.png differ diff --git a/slides/wk04/img/events/quiz-mvc.png b/slides/wk04/img/events/quiz-mvc.png new file mode 100644 index 0000000000000000000000000000000000000000..d8461c69af23ceebca4b045b0b1356db5049e4d2 Binary files /dev/null and b/slides/wk04/img/events/quiz-mvc.png differ diff --git a/slides/wk04/img/events/swipe.png b/slides/wk04/img/events/swipe.png new file mode 100644 index 0000000000000000000000000000000000000000..e34f742fd91da41607df613a4c52c934462db305 Binary files /dev/null and b/slides/wk04/img/events/swipe.png differ diff --git a/slides/wk04/img/events/user.png b/slides/wk04/img/events/user.png new file mode 100644 index 0000000000000000000000000000000000000000..abba33c403bb48060c5eb1027b976a9bc41a95db Binary files /dev/null and b/slides/wk04/img/events/user.png differ diff --git a/slides/wk04/person.zip b/slides/wk04/person.zip new file mode 100644 index 0000000000000000000000000000000000000000..33212540315522bf36fbd37d6326b824ec591e46 Binary files /dev/null and b/slides/wk04/person.zip differ diff --git a/slides/wk04/person/Person.java b/slides/wk04/person/Person.java new file mode 100644 index 0000000000000000000000000000000000000000..da937458e70d3ce038e690ecaf6e21d50b18b412 --- /dev/null +++ b/slides/wk04/person/Person.java @@ -0,0 +1,55 @@ +import java.util.*; + +public class Person { + + /////// Instance (non-static) methods of Person + private String mFirstName; + private String mLastName; + private int mAge; + + + public Person(String firstName, String lastName, int age) { + mFirstName = firstName; + mLastName = lastName; + mAge = age; + } + + @Override + public String toString() { + return mFirstName + " " + mLastName + " - age " + mAge; + } + + public String getFirstName() { + return mFirstName; + } + + public String getLastName() { + return mLastName; + } + + public int getAge() { + return mAge; + } + + + + + /** + * Ooh, fancy, an inner class! + * Inner classes are neat because they can access the private variables of their + * outer class (Person in this case) + * Could we have made this its own public class in its own file, and added getters and + * setters to Person? + * Yes, we certainly could have. I just wanted you to see an inner class. + */ + public static class FirstNameComparator implements Comparator<Person> { + + @Override + public int compare(Person p1, Person p2) { + + // Fill me in using a known comparison method! + return 0; + } + } + +} \ No newline at end of file diff --git a/slides/wk04/person/PersonClient.java b/slides/wk04/person/PersonClient.java new file mode 100644 index 0000000000000000000000000000000000000000..37ea4a315ceb7c3a52244b1c7eb426b2c572f4dd --- /dev/null +++ b/slides/wk04/person/PersonClient.java @@ -0,0 +1,70 @@ +import java.util.*; + +public class PersonClient { + + /** + *Main method prints out various sorts + *@param args commandline input + */ + public static void main(String[] args) { + Person[] people = generatePeople(); + + // Print the original list. + System.out.println("Original list: " + Arrays.toString(people)); + + Arrays.sort(people, new PersonLastNameComparator()); + System.out.println("Sorted by last name: " + Arrays.toString(people)); + + Arrays.sort(people, new Person.FirstNameComparator()); + System.out.println("Sorted by first name: " + Arrays.toString(people)); + + + Arrays.sort(people, new Comparator<Person>() { + @Override + public int compare(Person p1, Person p2) { + + return p1.getAge() - p2.getAge(); + } + }); + System.out.println("Sorted by age (ascending): " + Arrays.toString(people)); + + Arrays.sort(people, + (Person p1, Person p2)->{return p2.getAge() - p1.getAge();}); + System.out.println("Sorted by age (descending): " + Arrays.toString(people)); + + + + + + + + + + } + + /** + *Generates a list of three people for testing purposes + *@return a default list of people + */ + private static Person[] generatePeople() { + + Person[] people = { + new Person("Emma", "Watson", 30), + new Person("Ncuti", "Gatwa", 27), + new Person("Tina", "Fey", 49), + new Person("Idris", "Elba", 47), + new Person("Awkwafina", "", 31), + new Person("Michael", "Mando", 38), + new Person("Judi", "Dench", 85), + new Person("Adam", "Driver", 36), + new Person("Logan", "Browning", 30), + new Person("John", "Hamm", 49), + new Person("Dev", "Patel", 30), + new Person("Manny", "Jacinto", 32), + new Person("Jennifer", "Aniston", 51), + new Person("Morgan", "Freeman", 82), + }; + return people; + } + +} diff --git a/slides/wk04/person/PersonLastNameComparator.java b/slides/wk04/person/PersonLastNameComparator.java new file mode 100644 index 0000000000000000000000000000000000000000..ae4c461538fc47e7ebe58aac91ab459d1bc01ce3 --- /dev/null +++ b/slides/wk04/person/PersonLastNameComparator.java @@ -0,0 +1,10 @@ +import java.util.*; + +public class PersonLastNameComparator implements Comparator<Person> { + + @Override + public int compare(Person p1, Person p2) { + + return p1.getLastName().compareTo(p2.getLastName()); + } +} \ No newline at end of file diff --git a/slides/wk05/Counter.zip b/slides/wk05/Counter.zip new file mode 100644 index 0000000000000000000000000000000000000000..ae4ab8d469d740ce739c5c02539ff36fea6cb14b Binary files /dev/null and b/slides/wk05/Counter.zip differ diff --git a/slides/wk05/event-delivery.html b/slides/wk05/event-delivery.html new file mode 100644 index 0000000000000000000000000000000000000000..7cdc70d1f419860cddd44aebc316bc7febd45774 --- /dev/null +++ b/slides/wk05/event-delivery.html @@ -0,0 +1,948 @@ +--- +layout: presentation +title: Event Handling II -- Event Delivery using the Interactor Hierarchy +description: Describes input devices, abstractions around events, Listeners, Event Delivery +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Event Delivery using the Interactor Hierarchy + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +name: normal +layout: true +class: +--- +# Accessibilty warmup + +Try the problem on the front of the worksheet + +-- + +- TIL: Talkback will "tell" what an item on the screen is if + - it has a content description (`android:contentDescription="..."`) OR + - is focusable (`android:focusable="true"`) OR + - it is clickable (`android:clickable="true"`) OR + - You have attached a `onClickListener` to the interactor. + +--- + + +[//]: # (Outline Slide) +# Today's goals + +Discuss how Input Events are delivered + +- Event hierarchy +- Input dispatch process +- Listeners <- Prework for Wednesday +- ~~Picking, capture and bubble~~ <- Moved to Wednesday + +--- +# Administrivia + +For Friday's examlet, you need to enable your UW GSuite account. + +- During class I will give out a link that will allow you to copy the Layout Examlet. +- The Google Doc will copy to your drive. +- You'll answer the questions in the doc. +- You'll save the doc as a PDF +- You'll upload the PDF to Gradescope. + +See this [page](https://itconnect.uw.edu/connect/email/google-apps/getting-started/) for +information on how ensure your GSuite account is activated. +--- +# Review: Logical Device Approach + +- Valuator → returns a scalar value (like a slider) +- Button → returns integer value +- Locator → returns position on a logical view surface +- Keyboard → returns character string +- Stroke → obtain sequence of points + +--- +# Meta notes + +We are working on grading the Layout Assignment. +- It's mostly going well. +- A common issues we're seeing is not reading the starter code and understanding what it is doing +- Recommedation: + - START EARLY: this gives you time to go to OH, read our discussion board, ask questions, and + get responses. (Remember responses may not be instantaneous, so you may have to work on something + else while you wait. ) + - Skim the spec. Write down a list of questions the spec raises (i.e what don't you know or understand + at a quick glance) + - Accept and open the code. + - Understand the class hierarchy that is given to you. A visual of the hierarchy should be in the spec. + - Understand what is happening in the onCreate of whatever extends from `AppCompatActivity` + - Start implementing Part1 and look for those TODOs. + - REREAD the spec. + - Remember to read the spec one more time before turning in the assignment to make sure you got all the pieces. + + +--- +# Meta notes + + - Remember: this class is about Interaction Programming. Programming Android is the substrate for the discussion. + - We try to explicitly state when are discussing theory vs practice. + - Subgoal of this class: a transition or bridge to 300 level courses. + - Important that you learn how to read less structured specifications + - Important that you learn how to search for __usable__ information + - Is StackOverflow friend or foe? + +--- +.left-column[ +# Review + +<div class="mermaid" > + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef green font-size:14pt,text-align:center + + class ip,t,w,l,a green +</div> +] + +.right-column[ +<p> </p> +<p> </p> + +- Which developer role were you when implementing Layout Part 1, 2, 3? + +- Did you take on any other developer roles for part 4? +] + +--- +# Interacting with the User + +.left-column-half[ +Command line interfaces + +] + +-- +.right-column-half[ +- Think about the from 142/143 or in prior classes did they create that took user interaction + - e.g. Budgeter, Guessing game, Hangman +- How would you write code to do interactivity on a command line or in the console in JGrasp? +- What control flow structure did you use to get input repeatedly from the user? +- Did the system continue to work or did it wait for the user input? +] + + +--- +# Interacting with the User +.left-column-half[ +Command line interfaces + +] +.right-column-half[ +Mac Desktop interface +| +] + +??? + - Event-Driven Interfaces (GUIs) + - Interaction driven by user + - UI constantly waiting for input events + - Pointing & text input, graphical output + +--- +# Review + +.left-column[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + + class ap,o,h,hlt,t yellow + class w green +</div> +] +.right-column[ +The Window System layer has several responsibilities. It + +- provides each view (app) with an independent drawing interface. +- ensures that the display gets updates to reflect changes +- recieves input from the OS and dispatches it to the appropriate widget + + + +] + +--- +# Review + +Device Independence +- We need device independence to handle a variety of ways to get input +- We need a uniform and higher level abstraction for input (events) +--- + +# Contents of Event Record + +Think about one of your real world events from last class again. What do we need to know? + +**What**: Event Type + +**Where**: Event Target + +**When**: Timestamp + +**Value**: Event-specific variable + +**Context**: What was going on? + +??? +Discuss each with examples + +--- +# Contents of Event Record + +Example: The cat meowed: What do we need to know? + +**What**: A cat's meow + +**Where**: My ears (this is the input target) + +**When**: 9:00pm + +**Value**: From the kitchen, near the food bowl + +**Context**: Whining, pacing, and generally being a pest. + +.footnote[It really does happen see [this video](img/event-delivery/jackhungry.mov)] +??? +Jack wants food. +--- +# Contents of Event Record + +Example: The cat meowed: What do we need to know? + +**What**: A cat's meow + +**Where**: My ears (this is the input target) + +**When**: 10:00am + +**Value**: From the hallway or following us around + +**Context**: Purring and rubbing up against us + +??? +Jack wants attention. +--- + + +--- +# Another example: : Contents of Event Record + +Now imagine a user clicks on the previous button in our PetGallery. What would the event button look like? + +What do we need to know about that UI event? + +-- +**What**: Click (Could also think about the mouse down and mouse up separately) + +-- +**Where**: X,Y coordinate of the finger when the click ended + +-- +**When**: The timestamp when the click occured + +-- +**Value**: 1 Finger (or maybe None) + +-- +**Context**: Any possible modifiers (Ctrl, Shift, Alt, etc); Number of clicks; etc. + +--- + +# Your turn + +Imagine you are writing a program to listen for "Hey Siri" on an Android phone. + +Work with your neighbor to fill in the fields of the Event Record for this event on your worksheet. + +**What**: + +**Where**: + +**When**: + +**Value**: + +**Context**: Any possible modifiers + +--- + +# Your turn + +Imagine you are writing a program to ironically listen for "Hey Siri" on an Android phone. + +Work with your neighbor to fill in the fields of the Event Record for this event on your worksheet. + +**What**: Speaking starts (or speaking ends) + +**Where**: Normally position on screen. In this case, ill defined because this event is not dispatched positionally. Can be blank, or may hold the current cursor location. + +**When**: Timestamp of the audio heard + +**Value**: The content of the audio recorded + +**Context**: Any possible modifiers + +--- +# Review + +Device Independence +- We need device independence to handle a variety of ways to get input +- We need a uniform and higher level abstraction for input (events) + +Component Independence +- Given a model for representing input, how do we get inputs delivered +to the right component? + - Valuator → returns a scalar value + - Button → returns integer value + - Locator → returns position on a logical view surface + - Keyboard → returns character string + - Stroke → obtain sequence of points + +--- + +## Android Events + +Each kind of event in Android its own class but they all implement the +[InputEvent](https://developer.android.com/reference/android/view/InputEvent) abstract class. +- A little hard to find all the parts defined in one place +- Harder to deal with uniformly +- But easily extensible for new event types + +.red[Artificial] events are a thing +- Window Events +- Search Event +- others. + +--- +# Android [MotionEvent](https://developer.android.com/reference/android/view/MotionEvent) + +```java +java.lang.Object + ↳ android.view.InputEvent + ↳ android.view.MotionEvent + +public final class MotionEvent extends InputEvent implements Parcelable { + + int getAction() // up, down etc + int getActionIndex() // multi touch support -- which pointer + float getX() // position + float getY() // position + int getButtonState() // pressed or not, for example + long getDownTime() + float getOrientation(int pointerIndex) + float getPressure() + float getSize() // fingers aren't pixel sized + // and many more... +} +``` +--- +# Aside: Multiple Hierarchies discussed so far in class + +Can you think of them? + +-- + +- Inheritance hierarchy for interactors (Viewp) +- Inheritance hierarchy for layout +- Inheritance hierarchy for events +- Component hierarchy (Interactors and View Groups) +-- + - Also remember how the component hierarchy is used in drawing (Z-order) + +--- +# Events can represent abstract concepts... + +Can you think of any? + +-- + +...Think of how the state of the app changes as you use it. + +-- + +- __Create__: Android is done creating the object +-- +- __Active__: in foreground of screen, and receives input +-- +- __Paused__: activity lost focus (is no longer displayed on screen) +-- +- __Stopped__: + - Another activity has focus + - Original activity remains in memory -- perfect place to save data & state + - Often can be *killed* by Android OS if not resumed relatively quickly +-- +- __Inactive__: after an activity has been killed; or before it is launched +-- +- __Timer__: Animation + +--- + +# Activity State Change Events + +.left-column-half[ + +] +.right-columns-half[ +Look familiar? +] + +--- +# Thinking as a Toolkit Developer + +.left-column-half[ +<br> +<div class="mermaid"> + graph LR + ip[Interface Programmer] + w[Component Developer] + l[Library Extender] + a[Architecture Extender] + t[Toolkit Builder] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + + class ip,w,l,a green + class t yellow +</div> +] + +.right-column-half.font-smaller[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + + classDef yellow font-size:14pt,text-align:center + classDef green font-size:14pt,text-align:center + + class ap,o,h,hlt,w green + class t yellow +</div> + +] + +--- +# How does the Toolkit Architecture deliver events? + +Application’s UI Thread (This is the main thread of your program) +```java +while (true) { + // Gets event from the application message queue. + // If the queue is empty, we just wait here. + Event e = GetEventFromMessageQueue(); + + // Dispatches the event to the appropriate application window + // (the destination address is in the event data). + DispatchEventToMessageDestination(e); +} +``` +-- +This code is automatically setup and managed by the UI framework you are using (e.g., .NET, WPF, Android, Swift). +You don’t really need to worry about it (but you should know it’s there and how it functions!) + +--- +# Input __Dispatch__ Process + +Input thread: +- When a user interacts, __events__ are created +- Events go into a queue + +??? + +What do you think of when you hear the word "thread"? How does it relate to CS? + +Remember a queue is a data structure that is first in first out. + +--- +# Input __Dispatch__ Process + +Input thread + +Dispatch thread: +- Front event comes off queue +- How does a toolkit decide where to send events? + +-- + +- Depends: Is it Focus or Positional input? + - Focus list (in order based on interest) + - Positional list (z-order under cursor based on interactor hierarchy) + +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Dispatch Strategies (theory) +- Positional + - Bottom-up + - Top-down + - Bubble out +- Focus-based +] +--- +.left-column-half[ +## Event Dispatch (theory) + + +] +.right-column-half[ +- Bottom up dispatch + - The event is directed to the "lowest", frontmost interactor in the tree that +contains the mouse position + - That interactor might not want the input, so it goes to window at the next level up the tree +] +--- +.left-column-half[ +## Event Dispatch (theory) + + +] +.right-column-half[ +- Bottom up dispatch +- Top down dispatch + - The event is directed to topmost window that contains the mouse location + - That window decides how to dispatch it further (recursively) + - Common in OO toolkits + - Useful in situations where the interactor is "view only" (parent wants to disable input to child) +] + +--- +.left-column-half[ +## Event Dispatch (theory) + + +] +.right-column-half[ +- Bottom up dispatch +- Top down dispatch +- Bubble-out dispatch + - Used when there is no clear nesting of windows and groups of interactive objects + - Tree is traversed as in top down approach, but bounding rectangles are hints, not guarantees + - Objects checked in opposite order from drawing: frontmost items are checked first + - Object that was hit is attached to the event, ancestors know what was selected +] + +--- +.left-column-half[ +## Event Dispatch + + +] +.right-column-half[ +- Bottom up dispatch +- Top down dispatch +- Bubble-out dispatch +- Focus dispatch + - No straighforward location of where the event happened + - Windowing system determines which window/interactor should get the input. + - Common example: where should key press/release events go? +] + + +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Callbacks handle *application* response to events +- Update Application Model + +] + +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Callbacks handle *application* response to events +- Update Application Model +- Best implemented using custom listeners + +] + +--- +template: inverse + +## Event Listeners + +### Putting theory into practice + +??? +- Implementation strategy + +- Basic goal: notify something of a change + +--- +# Basics of Event Listeners (1/3) + +- Interface on the `View` class that acts as a _callback_ method + +-- + + - Recall interfaces specify behavior (but no data) that can be inherited. + +-- + +- Must be attached to a particular `View` + +-- + +- Android framework triggers the method once the `View` is interacted with by the user + +-- + +- A `View` can have listen for different types of interactions +- But: the `View` must implement and registering the appropriate listeners + +??? +What is an interface? + +--- +layout: false + +.left-column[ +## Standard Event Listeners provided by Android + +More listed in the [API Documentation](https://developer.android.com/guide/topics/ui/ui-events.html) +] +.right-column[ +The set of Android's provided interfaces include: + ```java + // User tapped a view + public static interface View.OnClickListener { ... } + + // User long pressed on a View + public static interface View.OnLongClickListener { ... } + + // State of view has changed + // (e.g. user clicked outside a EditText input box) + public static interface View.OnFocusChangeListener { ... } + ``` + ] + +--- +# Implementing clicking + +Create your button + +Register an event listener with the button + +--- +# Registering an Event Listener + +~~Three~~ five ways to register an event listener: + + - Creating a separate class/file or an inner class + - Creating an anonymous inner class + - Implementing an Interface + - Creating an anonymous class as a parameter + - Lambdas + +Code for the following demo is [here](Counter.zip). +This code uses a helper function +```java +/** Method to increment the count field */ +private void incrementCount(View v) { + TextView counter = findViewById(R.id.count); + String textCount = counter.getText().toString(); + int count = Integer.parseInt(textCount); + counter.setText("" + ++count); + + ((TextView)findViewById(R.id.whichButton)).setText(((Button)v).getText()); + +} +``` + +--- + +.left-column[ +## Registering a Listener - Inner class (1/2) + +Create the Listener subclass +] +.right-column[ + ```java + private class MyButtonListener implements View.OnClickListener { + @Override + public void onClick(View v) { + incrementCount(v); + } + } + ``` +] +--- +.left-column[ +## Registering a Listener - Inner class (2/2) + +Create the Listener subclass + +Register it (by instantiating an object of that type) +] +.right-column[ + ```java + // in onCreate... + Button b1 = findViewById(R.id.button_three); + if (b1 != null) { // Should always check for null + b1.setOnClickListener(new MyButtonListener()); + } + ``` +] + + +--- +.left-column[ +## Create an Anonymous Inner Class +] +.right-column[ +```java +public class EventExampleActivity extends AppCompatActivity { + + // An anonymous inner class as a member variable in an Activity + View.OnClickListener mButtonClickListener = new View.OnClickListener() { + @Override + public void onClick(View v) { + // call the private method in EventExampleActivity + incrementCount(v); + } + }; + + protected void onCreate(Bundle savedState) { + Button b1 = findViewById(R.id.button_one); + if (b1 != null) { + b1.setOnClickListener(mButtonClickListener); + } + } +} +``` +] + +??? +incrementCount is a private method +Mention that mXxxx variables are private fields and this is a quick way +to find all private fields when searching variables in code +--- +# Digging deeper: Creating an Anonymous Inner Class + +Let's take some time to parse this... + +```java + private View.OnClickListener mButtonClickListener = new View.OnClickListener() { +``` +- `private` - it's only available inside the class that contains it (i.e. `EventExampleActivity`) +- `View.OnClickListener` is the variable type ([Documentation](https://developer.android.com/reference/android/view/View.OnClickListener.html)) - a nested class in `View` +- `mButtonClickListener` is the variable name which is being set to... +- a `new View.OnClickListener()` which is an anonymous object from an abstract class + - For those of you who have not taken 331, that means that there are methods that have not been implemented in the class. + - The on method that you MUST implement (in order to create a new object) is `OnClick` which overrides the abstract method + +```java + public void OnClick(View v) { /* stuff in here does the work when a click is received! */ } +``` +--- + +.left-column[ +## Registering a Listener - Implement the Interface +] +.right-column[ + ```java +// Start by implementing the interface +public class EventExampleActivity extends AppCompatActivity + implements View.OnClickListener { // Necessary to implement + + protected void onCreate(Bundle savedState) { + Button b3 = findViewById(R.id.button_three); + if (b3 != null) { // Should always check for null + b3.setOnClickListener(this); + } + } + + // Here's where you do the implementation of your listener in your class + @Override + public void onClick(View v) { + incrementCount(v); + } + ``` +] +--- + +.left-column[ +## Registering a Listener - Anonymous class as a parameter + +Create and register the listener all at once +] +.right-column[ + ```java + Button b4 = findViewById(R.id.button_four); + if (b4 != null) { // Should always check for null + b4.setOnClickListener(new View.OnClickListener() { + public void onClick(View v) { + incrementCount(v); + } + }); + } + ``` +] +--- +.left-column[ +## Registering a Listener - lambda + +Create the and register the listener all at once with lamba syntax +] +.right-column[ + ```java + Button b5 = findViewById(R.id.button_five); + if (b5 != null) { // Should always check for null + b5.setOnClickListener((View v) -> incrementCount(v)); + } + ``` +] +.right-column[ +To use Lambdas you have to upgrade to Java 8. See these +[instructions](https://developer.android.com/studio/write/java8-support) to do this. +] + +--- +.left-column[ +## Registering Multiple Listeners +] +.right-column[ +Can register more than one listener + +For example: +```java + View v = new View(); + v.setOnClickListener(...); + v.setOnLongClickListener(...); + ``` +] +--- +.left-column[ +## Many Views, Same Listener (1/3)] + +.right-column[ +Event callbacks are passed the `View` as a parameter +] +-- + +.right-column[ + +We can reuse a listener for views that handle the same action + (e.g. all 5 buttons could use the same class/method for the action) +] +--- + +## Many Views, Same Listener (2/3) + +- And we can handle different actions by checking the `View` or its `id`: + ```java + protected void onCreate(Bundle savedState) { + Button b1 = (Button) findViewById(R.id.button_one); + if (b1 != null) { + b1.setOnClickListener(mButtonClickListener); + } + + Button b2 = (Button) findViewById(R.id.button_two); + if (b2 != null) { + b2.setOnClickListener(mButtonClickListener); + } + } + ``` +--- +## Many Views, Same Listener (3/3) + +You can use the ID of the view to determine where the event originated from + +```java + View.OnClickListener mButtonClickListener = new View.OnClickListener({ + public void onClick(View v) { + if (v == null) { + return; + } + + int viewId = v.getId(); + + switch (viewId) { + case R.id.button_one: // First Button + Log.d("Button Press", "First Button"); + break; + case R.id.button_two: // Second Button + Log.d("Button Press", "Second Button"); + break; + default: // Someone else is using the listener! + Log.d("Button Press", "Invalid Button!"); + } + } + }); +``` +--- +.left-column[ +## Marking an event as handled +] +.right-column[ +This ensures only one view gets it (we talk about the algorithm behind this later) + +Return `boolean` value that indicate the event has been handled (`true`) + + ```java + /** + * onLongClick - triggered when a view is long clicked + * @param v - the view long pressed + * @return - true if the callback consumed the long click, false otherwise. + **/ + boolean onLongClick (View v) { ... }; + ``` +] +.footnote[[API Documentation for Long Click](https://developer.android.com/reference/android/view/View.OnLongClickListener.html) +] + +--- +# End of Deck + +Thing to think about... + +How would you handle input in a circular component? diff --git a/slides/wk05/img/event-delivery/activity_lifecycle.png b/slides/wk05/img/event-delivery/activity_lifecycle.png new file mode 100644 index 0000000000000000000000000000000000000000..ab0921a717d184442c96c1b8863018d46920a67c Binary files /dev/null and b/slides/wk05/img/event-delivery/activity_lifecycle.png differ diff --git a/slides/wk05/img/event-delivery/callbacks.png b/slides/wk05/img/event-delivery/callbacks.png new file mode 100644 index 0000000000000000000000000000000000000000..72147534bc5ba07de7a95ffe479f5505d65814f4 Binary files /dev/null and b/slides/wk05/img/event-delivery/callbacks.png differ diff --git a/slides/wk05/img/event-delivery/callbacks2.png b/slides/wk05/img/event-delivery/callbacks2.png new file mode 100644 index 0000000000000000000000000000000000000000..37eeff1f958d4f711faf7ce2af0ceb9736121957 Binary files /dev/null and b/slides/wk05/img/event-delivery/callbacks2.png differ diff --git a/slides/wk05/img/event-delivery/callbacks3.png b/slides/wk05/img/event-delivery/callbacks3.png new file mode 100644 index 0000000000000000000000000000000000000000..c7c5e1de7d5c73ca13b8e95df99735ce5aeec7fa Binary files /dev/null and b/slides/wk05/img/event-delivery/callbacks3.png differ diff --git a/slides/wk05/img/event-delivery/commandline.png b/slides/wk05/img/event-delivery/commandline.png new file mode 100644 index 0000000000000000000000000000000000000000..773bd5e16472702193d5aa0b8818d4b283f35662 Binary files /dev/null and b/slides/wk05/img/event-delivery/commandline.png differ diff --git a/slides/wk05/img/event-delivery/cookie-monster.gif b/slides/wk05/img/event-delivery/cookie-monster.gif new file mode 100755 index 0000000000000000000000000000000000000000..f484a992a84a146276ed1a80af3f60fd225e4ff6 Binary files /dev/null and b/slides/wk05/img/event-delivery/cookie-monster.gif differ diff --git a/slides/wk05/img/event-delivery/jackhungry.mov b/slides/wk05/img/event-delivery/jackhungry.mov new file mode 100644 index 0000000000000000000000000000000000000000..a41f687b0b33dd94a57a852ab9e8a82c602266fd Binary files /dev/null and b/slides/wk05/img/event-delivery/jackhungry.mov differ diff --git a/slides/wk05/img/event-delivery/windows.png b/slides/wk05/img/event-delivery/windows.png new file mode 100644 index 0000000000000000000000000000000000000000..3fc19c0be90e80ae595ccc58c6a8b58116954300 Binary files /dev/null and b/slides/wk05/img/event-delivery/windows.png differ diff --git a/slides/wk05/img/pps-geom/activity_lifecycle.png b/slides/wk05/img/pps-geom/activity_lifecycle.png new file mode 100755 index 0000000000000000000000000000000000000000..879f51f6e8fafe75d267984680ef63f85b118dc5 Binary files /dev/null and b/slides/wk05/img/pps-geom/activity_lifecycle.png differ diff --git a/slides/wk05/img/pps-geom/android-activity-states-01.png b/slides/wk05/img/pps-geom/android-activity-states-01.png new file mode 100755 index 0000000000000000000000000000000000000000..614cc908ef0e4a693643d2a07d7131feab55fc13 Binary files /dev/null and b/slides/wk05/img/pps-geom/android-activity-states-01.png differ diff --git a/slides/wk05/img/pps-geom/android-activity-states-02.png b/slides/wk05/img/pps-geom/android-activity-states-02.png new file mode 100755 index 0000000000000000000000000000000000000000..e7042ef93ac69f8da5c7353babd93a727284541a Binary files /dev/null and b/slides/wk05/img/pps-geom/android-activity-states-02.png differ diff --git a/slides/wk05/img/pps-geom/callbacks.png b/slides/wk05/img/pps-geom/callbacks.png new file mode 100644 index 0000000000000000000000000000000000000000..72147534bc5ba07de7a95ffe479f5505d65814f4 Binary files /dev/null and b/slides/wk05/img/pps-geom/callbacks.png differ diff --git a/slides/wk05/img/pps-geom/callbacks2.png b/slides/wk05/img/pps-geom/callbacks2.png new file mode 100644 index 0000000000000000000000000000000000000000..37eeff1f958d4f711faf7ce2af0ceb9736121957 Binary files /dev/null and b/slides/wk05/img/pps-geom/callbacks2.png differ diff --git a/slides/wk05/img/pps-geom/callbacks3.png b/slides/wk05/img/pps-geom/callbacks3.png new file mode 100644 index 0000000000000000000000000000000000000000..c7c5e1de7d5c73ca13b8e95df99735ce5aeec7fa Binary files /dev/null and b/slides/wk05/img/pps-geom/callbacks3.png differ diff --git a/slides/wk05/img/pps-geom/focus.png b/slides/wk05/img/pps-geom/focus.png new file mode 100644 index 0000000000000000000000000000000000000000..0e3b191d6a01f296400772022e90781889482d0a Binary files /dev/null and b/slides/wk05/img/pps-geom/focus.png differ diff --git a/slides/wk05/img/pps-geom/messenger-bubble.gif b/slides/wk05/img/pps-geom/messenger-bubble.gif new file mode 100755 index 0000000000000000000000000000000000000000..77defd497891e79a775a6ca3593cf33e02d2c890 Binary files /dev/null and b/slides/wk05/img/pps-geom/messenger-bubble.gif differ diff --git a/slides/wk05/img/pps-geom/noresponse.png b/slides/wk05/img/pps-geom/noresponse.png new file mode 100644 index 0000000000000000000000000000000000000000..cb52157c564bfd05b70e0a9c1c2e4b1d9b5925ad Binary files /dev/null and b/slides/wk05/img/pps-geom/noresponse.png differ diff --git a/slides/wk05/img/pps-geom/notevent.png b/slides/wk05/img/pps-geom/notevent.png new file mode 100644 index 0000000000000000000000000000000000000000..c610bff3b877a36f2d47fce0b250781c540e08ae Binary files /dev/null and b/slides/wk05/img/pps-geom/notevent.png differ diff --git a/slides/wk05/img/pps-geom/picklist.svg b/slides/wk05/img/pps-geom/picklist.svg new file mode 100644 index 0000000000000000000000000000000000000000..b1bb184b9fa2dc7dc9a5a3a659943a137a331c70 --- /dev/null +++ b/slides/wk05/img/pps-geom/picklist.svg @@ -0,0 +1,62 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + viewBox="0 0 184.8 195.3" style="enable-background:new 0 0 184.8 195.3;" xml:space="preserve"> +<style type="text/css"> + .st0{fill:none;stroke:#000000;stroke-miterlimit:10;} + .st1{fill:#2E3192;} + .st2{font-family:'MyriadPro-Regular';} + .st3{font-size:12px;} + .st4{fill:#009444;} + .st5{fill:#D12029;} + .st6{fill:none;stroke:#2E3192;stroke-miterlimit:10;} + .st7{fill:none;stroke:#42B649;stroke-miterlimit:10;} + .st8{fill:none;stroke:#D12029;stroke-miterlimit:10;} + .st9{fill:#160C0B;} + .st10{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;} + .st11{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;stroke-dasharray:9.9093,9.9093;} + .st12{fill:none;stroke:#000000;stroke-width:0.75;stroke-miterlimit:10;stroke-dasharray:10.9093,10.9093;} + .st13{fill:none;stroke:#D12029;stroke-width:0.75;stroke-miterlimit:10;} + .st14{fill:none;stroke:#D12029;stroke-width:0.75;stroke-miterlimit:10;stroke-dasharray:10.9303,10.9303;} + .st15{fill:none;stroke:#D12029;stroke-width:0.75;stroke-miterlimit:10;stroke-dasharray:9.9093,9.9093;} +</style> +<polygon class="st0" points="179.3,190.4 3.3,190.4 3.9,4.3 179.9,4.3 "/> +<text transform="matrix(1 0 0 1 25.2813 65.6343)" class="st1 st2 st3">V1</text> +<text transform="matrix(1 0 0 1 52.2813 71.4978)" class="st4 st2 st3">V3</text> +<text transform="matrix(1 0 0 1 31.2098 104.4477)" class="st5 st2 st3">V2</text> +<text transform="matrix(1 0 0 1 82.7637 37.6707)" class="st1 st2 st3">V4</text> +<text transform="matrix(1 0 0 1 123.6179 130.4509)" class="st2 st3">V5</text> +<text transform="matrix(1 0 0 1 105.8968 80.1523)" class="st5 st2 st3">V6</text> +<rect x="18.3" y="53.6" class="st6" width="73" height="80"/> +<text transform="matrix(1 0 0 1 9.3218 19.4072)" class="st2 st3">V0</text> +<polygon class="st7" points="87.9,84.1 45.9,84.1 46.3,58.5 88.3,58.5 "/> +<rect x="77.5" y="25.4" class="st6" width="92.2" height="155.1"/> +<rect x="25.3" y="91.4" class="st8" width="48.9" height="33.7"/> +<polygon class="st0" points="152.8,136.6 133.5,158.8 110.6,135.9 129.9,113.7 "/> +<ellipse class="st8" cx="110.8" cy="88.1" rx="33.3" ry="20.1"/> +<circle class="st9" cx="82.8" cy="71.5" r="3.5"/> +<g> + <g> + <polyline class="st10" points="152.6,152.6 152.6,158.6 146.6,158.6 "/> + <line class="st11" x1="136.7" y1="158.6" x2="121.8" y2="158.6"/> + <polyline class="st10" points="116.8,158.6 110.8,158.6 110.8,152.6 "/> + <line class="st12" x1="110.8" y1="141.7" x2="110.8" y2="125.3"/> + <polyline class="st10" points="110.8,119.9 110.8,113.9 116.8,113.9 "/> + <line class="st11" x1="126.8" y1="113.9" x2="141.6" y2="113.9"/> + <polyline class="st10" points="146.6,113.9 152.6,113.9 152.6,119.9 "/> + <line class="st12" x1="152.6" y1="130.8" x2="152.6" y2="147.2"/> + </g> +</g> +<g> + <g> + <polyline class="st13" points="144.2,103 144.2,109 138.2,109 "/> + <line class="st14" x1="127.2" y1="109" x2="89" y2="109"/> + <polyline class="st13" points="83.5,109 77.5,109 77.5,103 "/> + <line class="st15" x1="77.5" y1="93.1" x2="77.5" y2="78.2"/> + <polyline class="st13" points="77.5,73.3 77.5,67.3 83.5,67.3 "/> + <line class="st14" x1="94.5" y1="67.3" x2="132.7" y2="67.3"/> + <polyline class="st13" points="138.2,67.3 144.2,67.3 144.2,73.3 "/> + <line class="st15" x1="144.2" y1="83.2" x2="144.2" y2="98"/> + </g> +</g> +</svg> diff --git a/slides/wk05/img/pps-geom/quizqs.png b/slides/wk05/img/pps-geom/quizqs.png new file mode 100644 index 0000000000000000000000000000000000000000..27636e6e935530d985628916bda1cfc7ab67d710 Binary files /dev/null and b/slides/wk05/img/pps-geom/quizqs.png differ diff --git a/slides/wk05/img/pps-geom/window-with-highlighted-menu.png b/slides/wk05/img/pps-geom/window-with-highlighted-menu.png new file mode 100644 index 0000000000000000000000000000000000000000..e283f1c2cc3703e082aa33e292916c1d0dcf4bc3 Binary files /dev/null and b/slides/wk05/img/pps-geom/window-with-highlighted-menu.png differ diff --git a/slides/wk05/img/pps-geom/window-with-menu-highlight.png b/slides/wk05/img/pps-geom/window-with-menu-highlight.png new file mode 100644 index 0000000000000000000000000000000000000000..c98efae6cbebbc0ae06d4bf2cf959a56850b29dc Binary files /dev/null and b/slides/wk05/img/pps-geom/window-with-menu-highlight.png differ diff --git a/slides/wk05/img/pps-geom/window-with-menu-highlight2.png b/slides/wk05/img/pps-geom/window-with-menu-highlight2.png new file mode 100644 index 0000000000000000000000000000000000000000..d18967a3a33292c574743985e1a44882806cc78b Binary files /dev/null and b/slides/wk05/img/pps-geom/window-with-menu-highlight2.png differ diff --git a/slides/wk05/img/pps-geom/window-with-scrollbar.png b/slides/wk05/img/pps-geom/window-with-scrollbar.png new file mode 100644 index 0000000000000000000000000000000000000000..cd6cd1f015f34aed26f079a6e8bdfe0b19031eb6 Binary files /dev/null and b/slides/wk05/img/pps-geom/window-with-scrollbar.png differ diff --git a/slides/wk05/img/pps-geom/window.png b/slides/wk05/img/pps-geom/window.png new file mode 100644 index 0000000000000000000000000000000000000000..e1edc0bca27881e6b8a54fbdf4495b3e493886c8 Binary files /dev/null and b/slides/wk05/img/pps-geom/window.png differ diff --git a/slides/wk05/img/whole/callbacks.png b/slides/wk05/img/whole/callbacks.png new file mode 100644 index 0000000000000000000000000000000000000000..72147534bc5ba07de7a95ffe479f5505d65814f4 Binary files /dev/null and b/slides/wk05/img/whole/callbacks.png differ diff --git a/slides/wk05/img/whole/callbacks2.png b/slides/wk05/img/whole/callbacks2.png new file mode 100644 index 0000000000000000000000000000000000000000..37eeff1f958d4f711faf7ce2af0ceb9736121957 Binary files /dev/null and b/slides/wk05/img/whole/callbacks2.png differ diff --git a/slides/wk05/img/whole/callbacks3.png b/slides/wk05/img/whole/callbacks3.png new file mode 100644 index 0000000000000000000000000000000000000000..c7c5e1de7d5c73ca13b8e95df99735ce5aeec7fa Binary files /dev/null and b/slides/wk05/img/whole/callbacks3.png differ diff --git a/slides/wk05/img/whole/combined.png b/slides/wk05/img/whole/combined.png new file mode 100644 index 0000000000000000000000000000000000000000..8f82cd3caaf966242fa1d127118706586d6793c0 Binary files /dev/null and b/slides/wk05/img/whole/combined.png differ diff --git a/slides/wk05/img/whole/drawing.png b/slides/wk05/img/whole/drawing.png new file mode 100644 index 0000000000000000000000000000000000000000..1ee68b6c60c5e385f381295d075a042752076e49 Binary files /dev/null and b/slides/wk05/img/whole/drawing.png differ diff --git a/slides/wk05/img/whole/full-solution-buffering.png b/slides/wk05/img/whole/full-solution-buffering.png new file mode 100644 index 0000000000000000000000000000000000000000..63871837cf02c6984b3fd18308c9a20dd944c201 Binary files /dev/null and b/slides/wk05/img/whole/full-solution-buffering.png differ diff --git a/slides/wk05/img/whole/interpolators.gif b/slides/wk05/img/whole/interpolators.gif new file mode 100644 index 0000000000000000000000000000000000000000..ad4e46ef00ad0843547fa69de0754dbaf9a7c59b Binary files /dev/null and b/slides/wk05/img/whole/interpolators.gif differ diff --git a/slides/wk05/img/whole/original-new.png b/slides/wk05/img/whole/original-new.png new file mode 100644 index 0000000000000000000000000000000000000000..3c9f19ae8050a037ba29c82249cc7f3fda1a3db9 Binary files /dev/null and b/slides/wk05/img/whole/original-new.png differ diff --git a/slides/wk05/img/whole/redcomp.png b/slides/wk05/img/whole/redcomp.png new file mode 100644 index 0000000000000000000000000000000000000000..81dec38e9e9408f89fddf1c850100ef978395f2a Binary files /dev/null and b/slides/wk05/img/whole/redcomp.png differ diff --git a/slides/wk05/img/whole/value-sat.png b/slides/wk05/img/whole/value-sat.png new file mode 100644 index 0000000000000000000000000000000000000000..b5ffb6814dde40eb19feca12d1c5d404219c0831 Binary files /dev/null and b/slides/wk05/img/whole/value-sat.png differ diff --git a/slides/wk05/img/whole/window-with-menu.png b/slides/wk05/img/whole/window-with-menu.png new file mode 100644 index 0000000000000000000000000000000000000000..ce64e0a977b63efb250de2eac8551ceaebf94f44 Binary files /dev/null and b/slides/wk05/img/whole/window-with-menu.png differ diff --git a/slides/wk05/img/whole/window.png b/slides/wk05/img/whole/window.png new file mode 100644 index 0000000000000000000000000000000000000000..e1edc0bca27881e6b8a54fbdf4495b3e493886c8 Binary files /dev/null and b/slides/wk05/img/whole/window.png differ diff --git a/slides/wk05/pps-geom.html b/slides/wk05/pps-geom.html new file mode 100644 index 0000000000000000000000000000000000000000..ff0500f9ae11a47653368092d742cca3bd3134b1 --- /dev/null +++ b/slides/wk05/pps-geom.html @@ -0,0 +1,1099 @@ +--- +layout: presentation +title: Event Handling III--Essential Geometry and View Updates +description: +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# View Updates and Essential Geometry + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout:false + +[//]: # (Outline Slide) +# Today's goals + +- Quick follow up from Monday - Click Listeners +- Other Android callbacks +- Input dispatching process (toolkit architecture) + - Picking (alternative: Focus) + - Capture + - Bubble +- Propositional Production Systems in implementing interactors +- Essential Geometry + +--- +# Before anyone asks + +- Accessibility is due Thursday night. There is no reflection. +- Examlet is on Friday (starting the last half of class). + - To avoid distraction this will entirely be a "take home" examlet. You may leave "class" + once we begin. (I will stay in class in case people need to come back in for clarifications). + - Instructions will be on Ed. + - You will be given a Google doc link to copy to your drive. You MUST have + [UW's GSuite enabled](https://itconnect.uw.edu/connect/email/google-apps/getting-started/). + - You will complete the quiz in your version of the Google doc + - You will your solution as a PDF (File->Download->PDF) to your machine + - You will then upload the quiz to Gradescope Quiz 5. + - Any issues will be added to an erratta document (link will also be in the ed post.) + - We will give you (some) more time to handle the technology. + +--- + +# Review of Monday + +- Events: logical input device abstraction +- Event driven code: very different from procedural programming +- Listeners are notified about events by the system and toolkit +- Case study: implementing View.OnClickListener + - Creating a separate class/file or an inner class + - Creating an anonymous inner class + - Implementing an Interface + - Creating an anonymous class as a parameter + - Lambdas + +Please open [Ed Sway](https://us.edstem.org/courses/381/sway/) + + +--- + +template: inverse + +# Other Android Callbacks + +--- +layout: false + +# Event listeners Android sets up by default (1/3) + +- `onCreate` + - called when the activity is first created + - we've seen this in our Doodle, Layout, and even EventExampleActivity apps: + +```java +@Override +protected void onCreate(Bundle savedInstanceState) { + // We want to do any view initialization work here + super.onCreate(savedInstanceState); + + // Load the XML representation of our layout into the view + setContentView(R.layout.activity_main); + + // Any other work we need to do like adding views or + // registering click listeners! +} +``` + +--- + +# Event listeners Android sets up by default (2/3) + +- `onStart` + - Called when activity is about to be visible to the user + - Always gets called after `onCreate` or `onRestart` +-- +- `onResume` + - Called when the activity will start interacting with a use + - Always gets called after `onStart` +-- +- `onPause` + - Called when the system is about to start resuming another previous activity + - __Commit changes__ to persistent data, __stop animations & intense operations__, __kill network__ requests + - .red[Fast implementation required!] - the next activity will not resume until this finishes in your activity +-- +- `onStop`: Called when the activity is no longer visible to the user +--- +# Event listeners Android sets up by default (3/3) + +- `onRestart` + - Called when the activity was previously stopped but is coming back to the user + - Followed by a call to `onStart` +-- +- `onDestroy`: the final notice before your activity is .red[__destroyed__] +-- + .center.half-width-img[ +  + ] + + +--- +template: inverse + +## Input Dispatch Process + +--- +layout: false + +# Input __Dispatch__ Process + +Input thread: +- When a user interacts, __events__ are created +- Events go into a queue + +--- +# Input __Dispatch__ Process + +Input Thread + +Dispatch thread: +- Front event comes off queue +- Event gets sent to a listener (callback) attached to a `View` or `Activity`. +- The `View` or `Activity` implements the callback + +--- +.left-column-half[ +## Event Dispatch (Summary) + +] +.right-column-half[ +Theoretical Dispatch Strategies +- Positional + - Bottom-up: The event sent to the "lowest", frontmost interactor in the tree that +contains the mouse position. If it's not wanted there it goes up the tree. + - Top-down: Event is sent to the topmost interactor that contains the mouse location, then passed + down recursively to children. + - Bubble out: Traversal starts top down, bounding rectangles are hints. Event is sent to bottom most item (drawn last), + the event can bubble back (with knowledge of what was hit). +- Focus-based: Windowing system determines which interactor gets the event. +] +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Callbacks handle *application* response to events +- Update Application Model + +] + +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Callbacks handle *application* response to events +- Update Application Model +- Best implemented using custom listeners + +] + +--- +# Another type of event: `onTouchEvent` + +- `onTouchEvent` is a callback that can be implemented on a `View` to react +to a user's touch +- Often used when creating your own new component. + +```java +public class MyView extends View extends View.OnTouchListener { + + @Override + protected void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + ... + // register the touch event + setOnTouchListener(this) + } + ... + @Override + public boolean onTouchEvent(MotionEvent event) { + // Handle the touch event here + } +} + +``` +--- +# Example: Overlapping windows + +.left-column40[ +<div class="mermaid"> +graph TD +V0((V0)) --> V1((V1)) +V0 --> V4((V4)) +V1 --> V2((V2)) +V1 --> V3((V3)) +V4 --> V5((V5)) +V4 --> V6((V6)) + +</div> +] +.right-column50[ + +] +--- +# How does _Android_ decide where to send events? + +.left-column40[ +<div class="mermaid"> +graph TD +V0((V0)) --> V1((V1)) +V0 --> V4((V4)) +V1 --> V2((V2)) +V1 --> V3((V3)) +V4 --> V5((V5)) +V4 --> V6((V6)) + +</div> +] +.right-column50[ +- Android traverses the view hierarchy (starting at root) +- "Picks" `View` obects that respond to an input event +- Loops through the list of `View` objects, checks if they will "capture" the event +- If none capture the event, the event "bubbles" back up the `View` + object list +] + +--- +# Input Process - Picking + +.left-column40[ +<div class="mermaid"> +graph TD +V0((V0)) --> V1((V1)) +V0 --> V4((V4)) +V1 --> V2((V2)) +V1 --> V3((V3)) +V4 --> V5((V5)) +V4 --> V6((V6)) + +</div> +] +.right-column50[ +- In what order does dispatch "pick" the `View` objects? +] +-- +.right-column50[ +- Hint: Post order traversal of the tree +] +-- +.right-column50[ +- Picked Views = {`V2`, `V3`, `V1`, `V5`, `V6`, `V4`, `V0`} +- Order matters! +] +--- +# Input Process - Picking + +.left-column40[ +<div class="mermaid"> +graph TD +V0((V0)) --> V1((V1)) +V0 --> V4((V4)) +V1 --> V2((V2)) +V1 --> V3((V3)) +V4 --> V5((V5)) +V4 --> V6((V6)) +</div> +] + +.right-column50[ +But we can refine this! We can filter! + +What are some reasons to skip views? +] +-- +.right-column50[ +- Not inside the view +- View doesn't care about that type of input + + + +] + +--- +# Input Process - Picking only those interested + +.left-column40[ + +<div class="mermaid"> +graph TD +V0((V0)) --> V1((V1*)) +V0 --> V4((V4*)) +V1 --> V2((V2)) +V1 --> V3((V3*)) +V4 --> V5((V5)) +V4 --> V6((V6*)) + +class V0,V2,V5 blue +class V1,V4,V3,V6 bluegreen +</div> +] + +.footnote[*: denotes the element responds to the event because of position/type] + +--- +# Input Example - Capture + +.left-column40[ +<div class="mermaid"> +graph TD +V0((V0)) --> V1((V1*)) +V0 --> V4((V4*)) +V1 --> V2((V2)) +V1 --> V3((V3*)) +V4 --> V5((V5)) +V4 --> V6((V6*)) + +class V0,V2,V5 blue +class V1,V4,V3,V6 bluegreen +</div> +] +.right-column50[ +Picked Views = {`V3`, `V1`, `V6`, `V4`} + +What happens next? +] +-- +.right-column50[ +- Dispatch starts at the end of the picked `View` object list (`V4`) +- Walking down the list, dispatch asks: will you consume this event? + - If `true`: the event is consumed and the event propagation __stops__ + - If `false`: Move to the next element in the `View` list +] +--- +# Input Example - Capture + +.left-column40[ +<div class="mermaid"> +graph TD +V0((V0)) --> V1((V1*)) +V0 --> V4((V4*)) +V1 --> V2((V2)) +V1 --> V3((V3*)) +V4 --> V5((V5)) +V4 --> V6((V6*)) + +class V0,V2,V5 blue +class V1,V4,V3,V6 bluegreen +</div> +] +.right-column50[ +Picked Views = {`V3`, `V1`, `V6`, `V4`} + +- Dispatch starts at the end of the picked `View` object list (`V4`) +- Android backtracks through the list, asking if they want to consume the event +- Does this correspond to a top-down or bottom-up dispatch strategy? +- What happens when we reach the last `View` in the list and no one has consumed the event? +] +??? +It's top-down + +--- +# Input Example - Bubbling + +.left-column40[ +<div class="mermaid"> +graph TD +V0((V0)) --> V1((V1*)) +V0 --> V4((V4*)) +V1 --> V2((V2)) +V1 --> V3((V3*)) +V4 --> V5((V5)) +V4 --> V6((V6*)) + +class V0,V2,V5 blue +class V1,V4,V3,V6 bluegreen +</div> +] +.right-column50[ +Picked Views = {`V3`, `V1`, `V6`, `V4`} +] + +-- +.right-column50[ +- Android starts at the front of the list `V3`, asking if they want to consume the event +- Does this correspond to a top-down or bottom-up dispatch strategy? + +Note: Bubbling in this case is not the bubble-out in the theoretical case. +] + +??? +bottom-up! +--- +# Input Example - Recap + +.left-column40[ +<div class="mermaid"> +graph TD +V0((V0)) --> V1((V1*)) +V0 --> V4((V4*)) +V1 --> V2((V2)) +V1 --> V3((V3*)) +V4 --> V5((V5)) +V4 --> V6((V6*)) + +class V0,V2,V5 blue +class V1,V4,V3,V6 bluegreen +</div> +] +.right-column50[ +|State |Ordering | +|:---------------|:----------------| +|*Picking* | V3| V1 | V6 | V4| +|*Capture Order* | 4 | 3 | 2 | 1 | +|*Bubbling Order*| 1 | 2 | 3 | 4 | +] + +--- +# Stuff to ponder: How would you handle input in a circular component? +??? +Consumption is based on the bounding box... +-- + +Delivery is based on bounding box + +Return `false` if input is outside circle even if it's in the bounding box + +--- +# Stuff to ponder: How would you handle focus input? + +- Some event types are focus based (e.g. keyboard input) +- Just skip picking: Focus list is globally created, and we walk it the same way + +--- +# Stuff to ponder: Implementing Drag and Drop + +Focus? Or Positional? + +-- +[Android's tutorial is positional](https://developer.android.com/training/gestures/scale#java) + + +--- +# How does *Android* decide where to send events? + +- **Capture** (most things don’t) top to bottom deliver to target + object (bottom) + - example: `onInterceptTouchEvent()` in Android +- **Pick** to identify objects of interest (or just focus()) + - `buildTouchDispatchChildList()` in Android; happens only after capture! +- **Bubble** (bottom to top) + - example: `onTouchEvent()` in Android +- Invoke callback (wait until complete) + - we do this by creating a custom listener in Android + +.footnote[fascinating to look at [implementation in +ViewGroup](https://android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/ViewGroup.java) +-- not very general!] + +--- +# Note about event records + +- Where + - Where is the location of the cursor (x,y position on the screen) + - For focus based events, where is often the target +- Value is anything you might need to know (like whether it's a 1 or 2 finger swipe; or which key was pressed) + +Why is this important? For *picking*: +- When input is positional, *only* interactors whose bounding box includes (x,y) -- where -- are picked +- When input is focus based, *only* interactors in the focus list are picked. Where isn't used in dispatch + + +--- + +# Creating a new type of listener + +Application callbacks can be implemented as custom listeners + + +```java +// Defines a new named inner interface for listening to an interesting event +public interface MyListener { + void onInterestingEvent(); // can include a parameter +} + +// variable to store the listener in once registered. Could also be a list of +// listeners that are all called if the callback is triggered. +protected MyView.MyListener mListener; + +public void setMyListener(MyListener mListener) { + this.mListener = mListener; // could also be stored in a list. +} +... + +// somewhere else in your code, when callback time happens +public void someMethod() { + mListener.onInterestingEvent(); +} + +``` +--- + +name: inverse +layout: true +class: center, middle, inverse +--- +# Using Input to Create Interaction Techniques + +## State Machines, PPS, Essential Geometry + +--- +layout:false + +# Interaction Technique + +A method for carrying out a specific interactive task + +For example: For entering a number in a range you could use... + +??? +have the class try to think of examples +-- +- (simulated) slider +- (simulated) knob +- type in a number (text edit box) + +Each is a different interaction technique +--- +# Example: Specify the end points for a line + +Could just specify two endpoints – click, click +- not good: no affordance + - no feedback (/ feedforward) + +Better feedback is to use “rubber banding†+- stretch out the line as you drag +- at all times, shows where you would end up <br> if you “let go†+??? +Importance of feedback vs application callback +--- +# Implementing rubber banding + +``` +Accept the press for endpoint P1; P2 = P1; +Draw line P1-P2; +Repeat + Erase line P1-P2; + P2 = current_position(); Draw line P1-P2; +Until release event; +Act on line input; +``` + +??? +Discuss! +Not event based +Not in the basic event/redraw loop +Potentially locks up the system +--- +# Implementing rubber banding + +Need to get around this loop <br> absolute min of 5 times / sec + +– 10 times better + +– more would be better but might block system. + +??? +aside -- why 5-10 times per second? + +--- +# Event driven code + +Needs to respond to events as they arrive + +Needs to maintain state between events + +--- +# Solution: State Machine + +- State Machines are used to respond to incoming events and allows for us to store state between events. +- Start state - indicated with incoming arrow +- End state - indicated with double-layered shape (means "reset to start") +- Transition States - indicated with single-layered shape +- Event Arrows - indicated with an arrow between states, represent different actions taken up states. + +.left-column40[ +<div class="mermaid"> +graph LR +S((.)) --> A((A)) +A -- "a" --> B((B)) +B -- "b" --> B +B -- "b" --> C[C] + + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; + + +class S invisible +class A start +class C finish +class B normal +</div> +] +-- +.right-column50[ +Is the folowing "accepted" by the above state machine? + +- ab +- abbbbbb +- aab +- abbbbba +] +--- +# Solution: State Machine + +- State Machines are used to respond to incoming events and allows for us to store state between events. +- Start state - indicated with incoming arrow +- End state - indicated with double-layered shape (means "reset to start") +- Transition States - indicated with single-layered shape +- Event Arrows - indicated with an arrow between states, represent different actions taken up states. + + +<div class="mermaid"> +graph LR +S((.)) --> A((A)) +A -- "Event1/Callback1()" --> B((B)) +B -- "Event2/Callback2()" --> B +B -- "Event3/Callback3()" --> C[C] + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; + +class S invisible +class A start +class C finish +class B normal +</div> + + +--- +# Propositional Production System (PPS) + +- State machine is just the start, stop and interim states with arrows with nothing on them. +- PPS is a state machine with extra conditions required to fire on the arrows. + - ? predicate (Boolean expr) before event, adds extra conditions required to transition + - action calls +- Typical notation + + event : pred ? action + +- Example + + MouseUp:inView?Start_Line() + +- Finite State Machine (FSM) augmented with guards is Turing complete + + +--- +# PPS Example: Rubber Banding + + +.left-column-half[ +Compare to previous implementation: + +``` +Accept the press for endpoint P1; P2 = P1; +Draw line P1-P2; +Repeat + Erase line P1-P2; + P2 = current_position(); Draw line P1-P2; +Until release event; +Act on line input; +``` +] +.right-column-half[ + +- Determine the Events (triggers) + +- Determine the States + +- Determine the Actions + +- Determine the Queries +] +--- +# PPS Example: Rubber Banding +.left-column40[ +Compare to previous implementation: + +``` +Accept the press for endpoint P1; P2 = P1; +Draw line P1-P2; +Repeat + Erase line P1-P2; + P2 = current_position(); Draw line P1-P2; +Until release event; +Act on line input; +``` +] + +.right-column50[ + +<div class="mermaid"> +graph TD +S((.)) --> A((Start)) +A -- "Mouse Down:inView?Start_Line()" --> B((Drawing)) +B -- "Mouse_Move:inView?Update()" --> B +B -- "Mouse_Release:inView?Finish_Line()" --> C[Finished] + + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; + +class S invisible +class A start +class C finish +class B normal +</div> + +] + +--- +# PPS Example: Rubber Banding +.left-column40[ + +Reading a state machine: translates input sequence into action! +- When you are in Start State, and a Mouse Down event arrives, do + the action `Start_line()` and go to Drawing State. +- Update the line end point position every time the mouse moves. +- When it releases (Mouse Release event), finish the line (at this + stage a callback to the application might be appropriate) +] + +.right-column50[ + +<div class="mermaid"> +graph TD +S((.)) --> A((Start)) +A -- "Mouse Down:?inView/Start_Line()" --> B((Drawing)) +B -- "Mouse_Move:?inView/Update()" --> B +B -- "Mouse_Release:?inView/Finish_Line()" --> C[Finished] + + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; + +class S invisible +class A start +class C finish +class B normal +</div> + +] + +??? + +How could we provide a better affordance? + +Does it matter if we are using a mouse or a touch screen? + + +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Using Essential Geometry as the basis for state + +--- +layout:false + +# Using Essential Geometry as the basis for state + +.left-column-half[ + + +] + +.right-column-half[ +- What is the essence (or nature) of this scrollbar? Where can you interact with it? +] + +--- + +# Using Essential Geometry as the basis for state + +.left-column-half[ + + +] + +.right-column-half[ +- What is the essence (or nature) of this scrollbar? Where can you interact with it? + - on the thumb + - inside the scrollbar above the thumb + - inside the scrollbar below the thumb + - inside up arrow + - inside the down arrow +] + +-- +.right-column-half[ +- How do we implement a scroll bar like this? +] + +--- +# Scrollbar State machine with Essential Geometry + +<div class="mermaid"> +graph LR +S((.)) --> START((START)) +START -- "MouseDown:InThumb?StartScroll()" --> SCROLLING((SCROLLING)) +START -- "MouseClick:InsideAboveThumb?Scrollup()" --> DONE((DONE)) +START -- "MouseClick:InsideBelowThumb?Scrolldown()" --> DONE((DONE)) +SCROLLING -- "MouseMove:updateThumbDocument()" --> SCROLLING +SCROLLING -- "MouseUp:KeepLocation()" --> DONE + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; +linkStyle 4 stroke-width:4px; +linkStyle 5 stroke-width:4px; + +class S invisible +class START start +class SCROLLING normal +class DONE finish +</div> + +--- +# Let's try it for a button + +.left-column-half[ +Essential geometry is: +- InsideButton +- OutsideButton + +and methods for +- `indentButton()` (when button is pressed) +- `normalButton()` (when button is not pressed) +- `invokeAction()` (when the user releases in the button) +- `cancelAction()` (when the user releases outside the button) + +] + +--- +# You should have something like this + +.left-column40[ +Essential geometry is: +- Inside +- Outside + +and methods for +- `indentButton()` (when button is pressed) +- `normalButton()` (when button is not pressed) +- `invokeAction()` (when the user releases in the button) +- `cancelAction()` (when the user releases outside the button) + +] +.right-column50[ +<div class="mermaid"> +graph TD +S((.)) --> START((START)) +START -- "DOWN:Inside?indentButton()" --> PRESSED((PRESSED)) +PRESSED -- "MOVE:Outside?normalButton()" --> PRESSED +PRESSED -- "UP:Outside?cancelAction()" --> END[END] +PRESSED -- "UP:Inside?invokeAction()" --> END +PRESSED -- "MOVE:Inside?indentButton()" --> PRESSED + +linkStyle 0 stroke-width:2px; +linkStyle 1 stroke-width:2px; +linkStyle 2 stroke-width:2px; +linkStyle 3 stroke-width:2px; +linkStyle 4 stroke-width:2px; +linkStyle 5 stroke-width:2px; + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF; + +class S invisible +class START start +class PRESSED normal +class END finish +</div> + +] + + +--- +# How do we implement this? +.left-column-half[ +- Implement in `onTouch()` using a switch statement +- Assume there is an +`essentialGeometry(MotionEvent event)` method. It returns a enum that tells you what + part of the geometry you are in for that point. +- Assume implementations of all the methods +- Assume a field, `state` which is the current state of the state machine +- enums `EssentialGeometry` and `State` for comparing against +] +.right-column-half[ + +```java +@Override +public boolean onTouch(MotionEvent e) { + EssentialGeometry geometry = essentialGeometry(event); + switch (state) { + case State.START: + if (geometry == Geometry.INSIDE && e.getAction() == MotionEvent.ACTION_DOWN) { + indentButton(); + state = State.PRESSED; + return true; + } + break; + case PRESSED + if (e.getAction() == MotionEvent.ACTION_MOVE) { + if (geometry == Geometry.INSIDE) { + indentButton(); + } else { + normalButton(); + } + return true; + } + else if (e.getAction() == MotionEvent.ACTION_UP) { + state = State.START; // note we don't actually use the END state + if (geometry == Geometry.INSIDE) { + invokeAction(); + } else { + cancelAction(); + } + return true; + } + break; + default: + break; + } + return false; +} +``` +] + +--- +# Enums + +Enums are a group of named constants + +- Often used for developing interactions for defining PPS States and Essential Geometry +- Will be used in ColorPicker and in Menu assignment for interaction *and* for experimental conditions +- Good code quality: limits choices of what a variable can be. + +[Documentation](https://docs.oracle.com/javase/tutorial/java/javaOO/enum.html) + +--- + +.left-column[ +## Harder Button + + + +] +.right-column[ +- Determine the Events (triggers) + +- Determine the States + +- Determine the Queries (essential geometry, context) + +- Determine the Actions +] + +??? +What constitutes an “event†varies + +- may be just low level events, or +- higher level (synthesized) events +- e.g. region-enter, press-inside + +What is missing? Query fields + +--- +.left-column[ +## Facebook Button Solution + +] +-- +.right-column[ + +Press:inside? => highlight(), start_animation(), small, active<br> +AnimateStep ==> update(), active<br> +AnimateFinish ==> !small, active<br> +Release:inside,small => unhighlight(), exit()<br> +Release:inside,!small => add_to_chat(), small, unhighlight(), +exit()<br> + +__rest is unknowable from this animation__ + +<div class="mermaid"> + graph LR + S((.)) --> A((Start)) + A -- "Press:inside?highlight(),start_animation()" --> B((Active)) + B -- "AnimateStep,update()" --> B + B -- "AnimateFinish,!small"--> B + B -- "Release,inside:small, unhighlight" -->D(End) + B -- "Release,inside:!small,add_to_chat(),unhighlight()" --> D + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:2px; +linkStyle 1 stroke-width:2px; +linkStyle 2 stroke-width:2px; +linkStyle 3 stroke-width:2px; +linkStyle 4 stroke-width:2px; +linkStyle 5 stroke-width:2px; + +class S invisible +class A start +class D finish +class B normal +</div> + +] + +--- +# When to use PPSs + +You're probably already using them, just not intentionally (and maybe +less well as a result) + +PPSs are a good way to do control flow in event driven systems + +Can do (formal or informal) analysis +- are all possible inputs (e.g. errors) handled from each state +- what are next legal inputs: can use to enable / disable + +Can be automated based on higher level specification + +--- + +# Summary + +State machines are very good (for this job) but do have limits + +State machines don't handle independent actions very well (state explosion) + +Mostly useful for smaller things + +- Great for individual components +- Not so great for whole dialogs + +Path of least resistance is rigid sequencing + Ask: is this good for what I am doing? + +??? diff --git a/slides/wk05/review.html b/slides/wk05/review.html new file mode 100644 index 0000000000000000000000000000000000000000..5b3d4aec65b5d57848e6124173f0793014f2e771 --- /dev/null +++ b/slides/wk05/review.html @@ -0,0 +1,222 @@ +--- +layout: presentation +title: The whole toolkit +description: Review of what we know about GUI toolkits +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Review slides to help studying + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout:false + +.left-column[ +## And Introduced Model View Controller +] +.right-column[ +Model +- Model of a single interactor: Typically a field +- Application model + - Separate from view model + - Typically more persistent (*e.g.,* a database) + +View +- `onDraw()` in a single interactor +- Interactor hierarchy in an application + +Controller +- state machine in a single interactor +- callbacks (*e.g.,* custom listeners) in an application +] +??? +Different for Interactor and Application + +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Dispatch Strategies +- Positional (Bottom-first and top-down) +- Focus-based + +State Machine describes *within-view* response to events +] +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Callbacks handle *application* response to events +- Update Application Model + +] + +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Callbacks handle *application* response to events +- Update Application Model +- Best implemented using custom listeners + +] +--- +# Value of component abstraction + +Each component knows how to draw itself + +Based on what it is and its internal state + +Includes some common properties (inherited from a base class for all components), E.g. + +- position (x,y relative to parent) +- size (w,h) +- visible +- Enabled + +Typically includes some specialized properties (declared in +subclass) + +--- +# More Output/Drawing Concepts + +Drawing primitives – populate a pixel array (*Frame Buffer*) + +Coordinate transformations (translate/scale/rotate/shear) & Clipping + +Fonts: Archaic origins, Non standardized +- UI toolkit implications? + +--- +.left-column[ +## Input/Event Concepts +] +.right-column[ +Devices + +- Logical: Valuator, Locator, Button, etc +- Event vs. sampled devices +- Absolute vs. Relative (and clutched) + +Event model to unify event and sampled devices +- What +- When +- Where +- Value +- Context +] +--- +# Review: None-core concepts +--- +layout:false + +# How an animation is set up + +Need the start and end value of the properties to be +modified. Typically use a +[Path](https://developer.android.com/reference/android/graphics/Path) +for this. + +Need a *duration* (total time in ms for the animation) + +Need the *pacing function* for animation. Can explore subclasses of +[Interpolator](https://developer.android.com/reference/android/view/animation/Interpolator) +(or make your own!) for this + +--- +.left-column[ +## Example pacing functions + +] +.right-column[ +<br><br><br><br> +Slow in slow out (Accelerate/decelerate) + +Slow in (Accelerate) + +Anticipate (back up slightly, then accelerate) + +Anticipate Overshoot (same, then go too far and slow down) +] +--- +name: inverse +layout: true +class: center, middle, inverse + +# Understanding People +--- +layout:false + +# HSV + +RGB matches the eye (rods & cones, red green and blue) + +HSV is much better for *people* +- Hue: Dominant wavelength of light +- Saturation: Purity (how much white/black mixed in) +- Value: Luminance or amount of light in color = max(R,G,B) + +--- +.left-column[ +## Example Short Answer Exam Question + + + +] +.right-column[ +# Compare the following colors using HSV +Which is correct? + +- A: Top color has different *hue* than bottom color +- B: Top color has higher *saturation* than bottom color +- C: Top color has higher *value* than bottom color +] +??? +B: Saturation + +--- +# Know your speeds (order of magnitude is key thing here) + +< ~20ms (1/50 sec) discrete images/flashes merge into continuous perception + +smooth animation: 24-40 frames per second + +< ~100-200ms seems like “instant response†+- on web a difference of 250 ms can switch people to a competitor + +< 1-2 seconds typically “good response time†+ +More than 10-15 sec is typically “bad response time†+ +--- +# Recap of design tips + +- Don't rely on blue for small objects +- Don't rely on blue for older users +- Make sure that contrast is high enough +- Minimize saturated colors +- Use redundant cues +- Make things distinct +- Use small multiples +- Manage expectations if you can't change response time +- Replace subtle changes with obvious ones +- Use well-tested visual grouping strategies +- Minimize the number of options +- Rely on recognition rather than recall diff --git a/slides/wk05/unused-maybe.html b/slides/wk05/unused-maybe.html new file mode 100644 index 0000000000000000000000000000000000000000..c18f3c32607cc0f28305f70017f9702f9dcf0663 --- /dev/null +++ b/slides/wk05/unused-maybe.html @@ -0,0 +1,41 @@ + +--- +# Summary +- MVC: Separation of concerns for user interaction +-- + +- Events: logical input device abstraction +-- + +- We model everything as events + - Sampled devices + - Handled as “incremental change†events + - Each measurable change: a new event with new value + - Device differences + - Handled implicitly by only generating events they can generate + - Recognition Based Input? + - Yes, can generate events for this too + + + + + +# End of Deck + + +--- +# Input __Dispatch__ Process + +Input Thread + +Dispatch thread + +Components: +- Components have to listen for events (callbacks) +- How do components respond? + +??? +- remind them that component/view/interactor are interchangeable in + this class +- Update application state if appropriate +- Request repaint if needed diff --git a/slides/wk05/whole-toolkit.html b/slides/wk05/whole-toolkit.html new file mode 100644 index 0000000000000000000000000000000000000000..5d8aab6772e809f3b8cdda521d80b10121f02ac9 --- /dev/null +++ b/slides/wk05/whole-toolkit.html @@ -0,0 +1,459 @@ +--- +layout: presentation +title: The whole toolkit +description: Review of what we know about GUI toolkits +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# The whole toolkit + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout:false + +[//]: # (Outline Slide) +# Today's goals + +- Update from Wednesday +- Last bit about Essential Geometry +- Let's look at colorpicker +- Review and summarize core toolkit architecture + +--- +# Event Dispatch + +- Top-down, Bottom-Up, Bubble-out, Focused-based: these are theoretical Event dispatch. +- Android does it a bit differently. +- Capture is top-down: start on the in the biggest interactor that contains the event, + then narrow in on which window actually will use the event +- Bubbling is bottom-up - start with the window at the front (the last drawn, lowest in the +interactor tree) - see if the event is consumed by that interactor. If not, go up the tree. + +--- +# Other comments + +- layout varies depending on the specific layout container + - ConstraintLayouts don't need multiple passes, it's a top down structure. + - LinearLayout is post order for measure (measure the children, who first measure their children) + - In general, have to look at implementation to know for sure. +- `onDraw` is usually pre-order (Intuitively leaf nodes should be 'on top' of parents) +- *Capture* is rarely used by component developers +- *Bubbling* is far more common +- Interface programmers just need to use callbacks, not worry about this stuff + +--- +# Colorpicker assignment + +--- + +.left-column[ +## Have now seen *almost* all the parts of an interface +] +.right-column[ + +Input + +- Input models (events) +- Event dispatch +- Event handling (state machine) +- Callbacks to application + +Output +- Interactor Hierarchy design & use +- Drawing models (`onDraw()`) +- Layout (`onLayout()` or `XML`) +- Damage and redraw process +] +--- +.left-column-half[ +# Core Toolkit Architecture + +Wait for *Event* + +*Dispatch* may cause change to: +- interactor state +- interactor hierarchy +- application model +] + +??? +What do you need to know though? Mostly only if you are a component developer + +-- +.right-column-half[ +# Component Developer + +Implement event handler (e.g. `onTouch()`) + +Handle *Dispatch* +- Update interactor state & model if needed +- Notify application if application model should change (with a callback) +- Call `invalidate()` +] + +??? +What about if you are an app developer? Basically, just use callbacks + +--- +.left-column-half[ +# Core Toolkit Architecture + +If damage do +- *layout* (may change) + - position + - size +- If damage do *redraw* +] + +-- +.right-column-half[ +# Component Developer + +- May need to implement `onMeasure()` and `onLayout()` (if a container) +- Will always implement `onDraw()` but *never call it* (call `invalidate()` instead) +] + +--- +## View Update: .red[Damage/Redraw] + +How does the toolkit know what to redraw? + +What causes damage? +??? +concrete example on next slide +--- +.left-column[ +## View Update: .red[Damage/Redraw] +] + +.right-column[ +What should be redrawn? + + +] + +--- + +.left-column[ +## View Update: .red[Damage/Redraw] +] + +.right-column[ +What should be redrawn? + + +] +--- + +.left-column[ +## View Update: .red[Damage/Redraw] +] + +.right-column[ +What should be redrawn? + + +] + +--- +## View Update: .red[Damage/Redraw] + +How does the toolkit know what to redraw? + +What causes damage? +??? +Can you think about other things? +- Window hidden and re-exposed +- Resizing +- redrawing + +-- + +<br><br>Naive approach to redraw + +--- + +## View Update: .red[Damage/Redraw] + + + + + +??? +XXX TODO ADD pic like this using divs? + +- Can be slow (redrawing everything unecessary) +- Can cause flickering + - double buffering is better, + - hence the 'Canvas' abstraction or equivalent + - can then switch which FB is displayed (very fast) + +--- +## View Update: .red[Damage/Redraw] + + + + +--- +## View Update: .red[Damage/Redraw] + + + + +**Never** just draw: Why not? + + +??? +- Update *state* +- Report *damage* (by calling 'repaint()) +- Wait for *toolkit to request redraw* + (also works if damage comes from elsewhere) +- How does it generalize to any cause of damage (always need state!!) + +--- +## View Update: .red[Damage/Redraw] + +How does the toolkit know what to redraw? + - Let the component report: Damage/Redraw invoked by `invalidate()` or equivalent + + +--- +## View Update: .red[Damage/Redraw] + +How does the toolkit know what to redraw? +- Let the component report (`invalidate()`) **NOTE** we are *not* calling *onDraw()* directly (important for your assignment) +- Aggregate +- Usually calculate bounding box + + +--- +## View Update: .red[Draw/Redraw] + +Virtual device abstraction provided by windowing system + +Component abstraction provided by toolkit +- Enforced using clipping +- Supported using coordinate system transformations + + +Drawing is recursive +- Makes it possible for parent to *decorate* kids +- Parent responsible for making kids think they are the center of the universe (translate) +- Clipping: intersect parent and child, also handled by parent + +??? + +Allows each program to (mostly) pretend that it has the screen (frame +buffer) to itself + +Allows each component to (mostly) pretend that it has the screen to +itself + + +--- +# Core Toolkit Architecture + +If damage do +- *layout* (may change) + - position + - size +- If damage do *redraw* + - Union of damage (any of those can cause it) used to trigger redraw of anything inside that union + - Drawing + clipping – standard drawing order, but only for things damaged; clipped to damage region + - Clear damage + +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Using Essential Geometry as the basis for state + +--- +layout:false + +# Using Essential Geometry as the basis for state + +.left-column-half[ + + +] + +.right-column-half[ +- What is the essence (or nature) of this scrollbar? Where can you interact with it? +] + +--- + +# Using Essential Geometry as the basis for state + +.left-column-half[ + + +] + +.right-column-half[ +- What is the essence (or nature) of this scrollbar? Where can you interact with it? + - on the thumb + - inside the scrollbar above the thumb + - inside the scrollbar below the thumb + - inside up arrow + - inside the down arrow +] + +-- +.right-column-half[ +- How do we implement a scroll bar like this? +] + +--- +# Scrollbar State machine with Essential Geometry + +<div class="mermaid"> +graph LR +S((.)) --> START((START)) +START -- "MouseDown:InThumb?StartScroll()" --> SCROLLING((SCROLLING)) +START -- "MouseClick:InsideAboveThumb?Scrollup()" --> DONE((DONE)) +START -- "MouseClick:InsideBelowThumb?Scrolldown()" --> DONE((DONE)) +SCROLLING -- "MouseMove:updateThumbDocument()" --> SCROLLING +SCROLLING -- "MouseUp:KeepLocation()" --> DONE + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; +linkStyle 4 stroke-width:4px; +linkStyle 5 stroke-width:4px; + +class S invisible +class START start +class SCROLLING normal +class DONE finish +</div> + +--- +# Let's try it for a button + +.left-column-half[ +Essential geometry is: +- InsideButton +- OutsideButton + +and methods for +- `indentButton()` (when button is pressed) +- `normalButton()` (when button is not pressed) +- `invokeAction()` (when the user releases in the button) +- `cancelAction()` (when the user releases outside the button) + +] + +--- +# You should have something like this + +.left-column40[ +Essential geometry is: +- Inside +- Outside + +and methods for +- `indentButton()` (when button is pressed) +- `normalButton()` (when button is not pressed) +- `invokeAction()` (when the user releases in the button) +- `cancelAction()` (when the user releases outside the button) + +] +.right-column50[ +<div class="mermaid"> +graph TD +S((.)) --> START((START)) +START -- "DOWN:Inside?indentButton()" --> PRESSED((PRESSED)) +PRESSED -- "MOVE:Outside?normalButton()" --> PRESSED +PRESSED -- "UP:Outside?cancelAction()" --> END[END] +PRESSED -- "UP:Inside?invokeAction()" --> END +PRESSED -- "MOVE:Inside?indentButton()" --> PRESSED + +linkStyle 0 stroke-width:2px; +linkStyle 1 stroke-width:2px; +linkStyle 2 stroke-width:2px; +linkStyle 3 stroke-width:2px; +linkStyle 4 stroke-width:2px; +linkStyle 5 stroke-width:2px; + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF; + +class S invisible +class START start +class PRESSED normal +class END finish +</div> + +] + + +--- +# How do we implement this? +.left-column-half[ +- Implement in `onTouch()` using a switch statement +- Assume there is an +`essentialGeometry(MotionEvent event)` method. It returns a enum that tells you what + part of the geometry you are in for that point. +- Assume implementations of all the methods +- Assume a field, `state` which is the current state of the state machine +- enums `EssentialGeometry` and `State` for comparing against +] +.right-column-half[ + +```java +@Override +public boolean onTouch(MotionEvent e) { + EssentialGeometry geometry = essentialGeometry(event); + switch (state) { + case State.START: + if (geometry == Geometry.INSIDE && e.getAction() == MotionEvent.ACTION_DOWN) { + indentButton(); + state = State.PRESSED; + return true; + } + break; + case PRESSED + if (e.getAction() == MotionEvent.ACTION_MOVE) { + if (geometry == Geometry.INSIDE) { + indentButton(); + } else { + normalButton(); + } + return true; + } + else if (e.getAction() == MotionEvent.ACTION_UP) { + state = State.START; // note we don't actually use the END state + if (geometry == Geometry.INSIDE) { + invokeAction(); + } else { + cancelAction(); + } + return true; + } + break; + default: + break; + } + return false; +} +``` +] + + +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# END OF DECK diff --git a/slides/wk06/3dprinting.html b/slides/wk06/3dprinting.html new file mode 100644 index 0000000000000000000000000000000000000000..fca37938858c5569c6bcf5068884ed03be27ccf4 --- /dev/null +++ b/slides/wk06/3dprinting.html @@ -0,0 +1,613 @@ +--- +layout: presentation +title: Intro to 3D printing +description: Description of 3D printing value on mobile phones +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Intro to 3D Printing and Physical Computing + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout:false + +[//]: # (Outline Slide) +.title[Today's goals] +.body[ +- Reminders + - Start on ColorPicker if you have not already + - Practice quiz on Accessibility/ColorPicker out on Friday - due 5/13 + - Examlet on Accessibility/ColorPicker on Friday 5/15 +- IMPORTANT + - We need you to fill out + [this form](https://docs.google.com/forms/d/e/1FAIpQLSdQrpZx-gexgDcKEF1SRp4egObimDP9qqVwLD56w0V2sYJDpw/viewform) so we can plan for our next assignment. +- Discuss different types of 3D models +- Talk about how 3D printing works +- Talk about how 3D models are converted into low level g-code +] + + + +--- +# Story time... + +.left-column40[ + +] + +-- +.right-column50[ +<br><br> +  + +] + +--- +# Traditional Manufacturing + +<div class="mermaid"> +graph LR +A(Materials) --> B(Factory) +B --> D(Shipping) +D --> E(Storage) +E --> F(Shipping) +F --> G(You) + +classDef blue font-size:14pt; +classDef green font-size:14pt; + +class B,D,E,F blue +class A,G green +</div> + +--- +.left-column[ +# Legacy ... literally + +] +.right-column[ + + +] +--- +# It worked! + + + + + + +--- +# The future (is Here) +<br> +<div class="mermaid"> +graph LR +A(3D Modeling, <br> e.g. OpenSCAD) -->|Prepare| B(Geometry <br> e.g. .stl file) +B -->|Slice| D(Printer instructions<br>G-code file) +D -->|Printer| E(Printed Object) + +class A,B,D blue +class E green +</div> + +- __Prepare__ for printing +- __Slice__ the model +- __Printer__ Controller + +--- +# Prepare for Printing + +- Create a model using any one of a number of 3D modeling packages such as Sketchup, Open SCAD, +Rhino 3d, Meshmixer, Blender, OnShape, Minecraft, SolidWorks + - Some packages reprsent 3D objects as solids, others as shells and boundaries. +- Or you can find lots of stuff in repositories, like [Thingiverse](http://www.thingiverse.com/) + + +.left-column50[ +__Solids__ (image from [Wikipedia](https://en.wikipedia.org/wiki/Constructive_solid_geometry )) + + +] + +.right-column50[ +__Shells/Boundaries__ + + + +] + +--- +# .stl File + +Almost every software package can save the files as a `.stl` file (stereolithography) + +.left-column50[ + + + + +] +.right-column50[ +``` +solid OBJECT + facet normal 0 -1 0 + outer loop + vertex 10 -10 0 + vertex 0 -10 10 + vertex 0 -10 0 + endloop + endfacet + facet normal 0 -1 0 + outer loop + vertex 0 -10 10 + vertex 10 -10 20 + vertex 8 -10 20 + endloop + endfacet +``` +] + +--- +# Printer Controller + +The printer controller converts the `.stl` file into GCode, commands read by the printer + + +.left-column50[ +``` +solid OBJECT + facet normal 0 -1 0 + outer loop + vertex 10 -10 0 + vertex 0 -10 10 + vertex 0 -10 0 + endloop + endfacet + facet normal 0 -1 0 + outer loop + vertex 0 -10 10 + vertex 10 -10 20 + vertex 8 -10 20 + endloop + endfacet +``` +] + +-- +.right-column50[ + + + +] +--- +# Printer Controller + +The printer controller converts the `.stl` file into GCode, commands read by the printer + + +.left-column50[ +``` +solid OBJECT + facet normal 0 -1 0 + outer loop + vertex 10 -10 0 + vertex 0 -10 10 + vertex 0 -10 0 + endloop + endfacet + facet normal 0 -1 0 + outer loop + vertex 0 -10 10 + vertex 10 -10 20 + vertex 8 -10 20 + endloop + endfacet +``` +] + +.right-column50[ +``` +G1 X-5.87 Y-12.69 Z0.47 F3360.0 +G1 F1200.0 +G1 E1.0 +G1 F3360.0 +M101 +G1 X-5.87 Y12.69 Z0.47 F381.198 E5.799 +G1 X-2.93 Y12.69 Z0.47 F381.198 E6.354 +G1 X-2.93 Y-12.69 Z0.47 F381.198 E11.152 +G1 X0.0 Y-12.69 Z0.47 F381.198 E11.707 +G1 X0.0 Y12.69 Z0.47 F381.198 E16.506 +G1 X2.93 Y12.69 Z0.47 F381.198 E17.06 +G1 X2.93 Y-12.69 Z0.47 F381.198 E21.859 +G1 X5.87 Y-12.69 Z0.47 F381.198 E22.414 +G1 X5.87 Y12.69 Z0.47 F381.198 E27.213 +G1 X8.8 Y12.69 Z0.47 F381.198 E27.768 + +``` +] + +--- +# Results + + + + +--- +# What do new fabrication technologies provide? + +.left-column50[ +New ways to create +- Faster, easier, sometimes better + +New ways to customize +- Faster iteration +- Mass customization + +New materials + +New shapes +] + +-- +.right-column50[ +Magic arms + +![:youtube Video of child using a 3D printed hand, WoZ2BgPVtA0] + +] + +--- +# What new fabrication technologies are not + +Not the startrek replicator + +Not as fast as the best manufacturing solutions for bulk manufacturing + +Not as fast as your 2d printer + +Often expensive + +Material range is limited + +--- +# Additive Vs Subtractive Printing + +.left-column50[ +- Additive printing puts down material, building up the object layer by layer + - Some are done with extruded plastic or other material + - Others are done with powders that are sealed together (powder printers) +- Subtractive removes materials from around the object +] + +.right-column50[ + + +] + + +--- +# Additive Fused Deposition Modeling (FDM) + +.left-column50[ + + +] +.right-column50[ +<br> +![:youtube Time lapse video explaining 3D printing, m_QhY1aABsE] + +] + +--- +# Powder printing (@0:28) +<br> +![:youtube Time lapse video of powder printing, kBHsfNDsbCs?t=28] + +--- +# Liquid printing (@0:23) +<br> +![:youtube Time lapse video liquid printing, l3TgmvV2ElQ?t=23] + +--- +# Laser Sintering (@0:53) +<br> +![:youtube Time lapse video laser sintering, 9E5MfBAV_tA?t=53] + +--- +# Other Materials + +- [Lisa Harouni Talk](https://www.ted.com/talks/lisa_harouni_a_primer_on_3d_printing#t-120717) (@2:12) +- [Powder printer](https://youtu.be/kBHsfNDsbCs?t=29s) +- [Liquid Based additive printers](https://www.popsci.com/new-liquid-based-3d-printer-takes-minutes-not-hours/) (@1:07) +- [Candy](https://www.youtube.com/watch?time_continue=5&v=rU6RAM0Wrck&feature=emb_logo), +[Chocolate](http://youtu.be/BIFi8but3Vw) other [Confections](https://www.youtube.com/watch?v=U3TmrCzVZ6w) +- [Pancake bot](https://www.youtube.com/watch?v=f3Q8nbtRNT0) +- Cement for houses [old](https://www.youtube.com/watch?v=WzmCnzA7hnE), [new](https://www.youtube.com/watch?v=8zt_3Gs1ksg) +- [MIT’s glass printer](https://gizmodo.com/watching-mits-glass-3d-printer-is-absolutely-mesmerizin-1725433454) +- [Ceramics](https://www.youtube.com/watch?v=1JjaqKUUMMw) (with sound vibrations), [Sample art](https://www.foransuon.com/) + +--- +# More reasons to learn about it! + +.left-column50[ +3d Printed car + +![:youtube Video of car being 3D printed, daioWlkH7ZI] + +] +.right-column50[ +<br> +- [3D Printed Medical Device Saves Baby's Life](https://www.youtube.com/watch?v=zr0HGCZSgE4) +- [Prosthetic hand](http://youtu.be/CHPuMCshkLU?t=42s) (up to ~2:10) +- [Lots of examples quickly](https://www.youtube.com/watch?v=X5AZzOw7FwA) +- [3D printers print ten houses in 24 hours](https://www.youtube.com/watch?v=SObzNdyRTBs) +- [Printed body parts](http://youtu.be/jSjW-EgKOhk?t=1m8s) +- [Printed organs](https://www.youtube.com/watch?v=4nqw1yjyKEs) +- [3D printed pizza](http://youtu.be/dvjqmMfMU7w?t=15s) +- [3D printed fashion](http://youtu.be/63Xozzh_uHM) +- [3D Printing a Garden Sprinkler](https://www.youtube.com/watch?v=y9XRD3P2G-E) +] + + +--- +# Printing: Beyond plastic + +.left-column50[ + + + + +] + +.right-column50[ + + + +[Shorey Designs](https://www.shoreydesigns.com/3d-printing-on-fabric) + +] +--- +# What else to embed? + +.left-column-half[ + + +] +.right-column-half[ +![:youtube Examples of embedded fabric, 9xqze9csLmY] +] +??? +- String or wire (like a tendon) + +--- +# What else to print? + +   + +--- +# What not to print + +- Food handling articles (unless on a special printer) +- Safety critical strong things +- High heat tolerance things +- Things for chemically harsh environments + +--- +# How does printing enhance a mobile phone? + +.left-column-half[ +[Etch a Sketch!](https://www.thingiverse.com/thing:3251892) + +![:youtube Mobile phone case to use the phone like an etch a sketch, dcaErURbyIA] +] + +-- +.right-column-half[ +New ways of interacting! +- Works by combining condutive plastic with custom interactor +- Looks like touch input to the software +- Gears control motion options mechanically +] +--- +# How does printing enhance a mobile phone? +.left-column-half[ +[Phone trigger buttons](https://www.thingiverse.com/thing:2960274) +![:youtube Game playing hardware --trigger buttons--,X_C1Qxjg2WI] +] +.right-column-half[ +New ways of interacting! +- Similar approach, also conductive +] + +--- +# How does printing enhance a mobile phone? +.left-column-half[ +XiaoyiZhang, TracyTran, YuqianSun, IanCulhane, ShobhitJain, JamesFogarty, JenniferMankoff: [Interactiles: 3D Printed Tactile Interfaces to Enhance Mobile Touchscreen Accessibility](https://make4all.org/portfolio/interactiles/). ASSETS 2018 + + +] + +.right-column-half[ +New ways of interacting! +- Silicon & sewn conductive thread +- Nuts and bolts +] +--- +# How does printing enhance a mobile phone? +.left-column-half[ + +Acoustruments +![:youtube Printed objects whose use can be sensed, C2d1pB1qlvA] +] +.right-column-half[ +New ways of interacting! +- Leverages the phone's microphone +- Uses flexible plastic with holes +- Requires machine learning +] +--- +# How does printing enhance a mobile phone? +.left-column-half[ +Tactile map for the blind + + +] +.right-column-half[ +New ways of interacting! + +Phone as embedded computer +- Better solution because reprinting a map is faster than making a whole new portable map for each region +- Similar to new interaction techniques, uses conductive plastic +] + +--- +# Use your phone to control general hardware + +[IOIO](https://learn.sparkfun.com/tutorials/ioio-otg-hookup-guide) / +[IOIO wiki](https://github.com/ytai/ioio/wiki) + + + + +--- +# How does printing enhance a mobile phone? +.left-column-half[ + + +Many similar options -- e.g. [Ph +Meter](https://ieeexplore.ieee.org/abstract/document/6916991); +[Sensing sweat +make-up](https://pubs.rsc.org/en/content/articlehtml/2014/an/c4an01612b); +[Nanosensing by +Nasa](https://www.nasa.gov/centers/ames/news/features/2009/cell_phone_sensors.html) +[more examples](https://www.sciencedirect.com/science/article/pii/S0167779914000572) +] +.right-column-half[ +New ways of interacting + +Phone as embedded computer + +New ways of sensing + +- [Biotoxicity +sensing](https://www.sciencedirect.com/science/article/pii/S0925400515305992) +- Dark box +- Phone case +] + +??? + By clicking the “start†button (b) the application runs and several + tabs can be selected (c). The “Procedure†box (d) provide to the + user the instructions to perform the assay, then the Begin button + allow to proceed to the “Checklist†box (e) where preset timers + guide the user through the correct incubation times before BL image + acquisition. The instructions can be also eluded by selecting “Test + sample†in the home page, which jumps the user directly to the + checklist. At the end of the countdown the smartphone camera is + activated and the user can simply touch the “Acquire†button to + capture the BL image of both the test and control wells. (f) The + acquired images are rapidly analyzed on the smartphone and the + sample toxicity result is displayed as “Cell viability†value and a + warning message (Safe, Harmful, Highly toxic). BL image and results + can be also saved for downstream application (i.e. sending results + to a central laboratory). + +--- +# How does printing enhance a mobile phone? + +.left-column50[ +[Phone for potentiostatic +control](https://ieeexplore.ieee.org/abstract/document/6916991) + + + ] +.right-column50[ +New ways of interacting + +Phone as embedded computer + +New ways of sensing +- exploits ability to play sounds +- serves basic functions of a potentiostat in controlling an applied + potential to oxidise ECL-active molecules +- resultant photonic signal is monitored using the camera in video + mode. +- combined with paper microfluidic sensors + +] +??? + +The audio jack supplies the potential to the paper microfluidic +sensor, while the resultant emission is detected by the camera in +video mode. Both the excitation and detection processes are controlled +by a software application which can also transmit the results via +e-mail. The black plastic sleeve surrounding the top of the phone +holds the sensor adjacent to the camera and blocks ambient light. + +--- +# How does printing enhance a mobile phone? + +.left-column50[ +Printed Analytics +![:youtube Printed objects whose use can be sensed, W1V2AgDbgTQ] +] +.right-column-half[ +New ways of interacting + +Phone as embedded computer + +New ways of sensing +- uses backscatter technology +- works in range of a modified wireless router +] + +--- +# Summary: What does physical computing offer us? + +.left-column-half[ +New ways to interact +- capacitive sensing facilitate by conductive plastic/thread +- microphone + machine learning + +New ways to sense information +- fluid properties +- audio +- backscatter +] +.right-column-half[ +New ways to combine devices (e.g. through bluetooth sensing of physical hardware) + +Benefits: +- modify a device beyond what the manufacturer expected +- apid prototyping of novel solutions +] +-- +# END OF DECK +--- +# Moon House Video + +![:youtube Video of a robot 3d printing a round house, 8zt_3Gs1ksg] + +--- +# Accessible Game Control + +![:youtube Xbox adaptive controller intro, 9fcK19CAjWM] diff --git a/slides/wk06/context.html b/slides/wk06/context.html new file mode 100644 index 0000000000000000000000000000000000000000..c21f4f1a884b76392b763dbd6a281c727954a1bc --- /dev/null +++ b/slides/wk06/context.html @@ -0,0 +1,847 @@ +--- +layout: presentation +title: The Physical Phone --Week 8, Monday-- +description: What we know about the physical use and abilities of a phone +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +background-image: url(img/context/people-background.png) +# The Physical Phone + +Jennifer Mankoff + +CSE 340 {{site.quarter}} +--- +layout: false + +[//]: # (Outline Slide) +.left-column[# Today's goals] +.right-column[ +- Talk about myths about phone use +- Talk about what a phone can sense +] +--- +.title[Interface Structure] +.body[ + +<div class="mermaid"> +graph TD + +I(Input) --Explicit Interaction--> A(Application) +A --> Act(Action) + +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; + +class U,C,A,I,S,E,Act,Act2 normal +</div> +] +--- +.title[Context Aware Computing Interface Structure] +.body[ + +<div class="mermaid"> +graph TD + +I(Input) --Explicit Interaction--> A(Application) +A --> Act(Action) + +U(User) --Implicit Sensing--> C(Context-Aware Application) +S(System) --Implicit Sensing--> C +E(Environment) --Implicit Sensing--> C +C --> Act2(Action) + +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; + +class U,C,A,I,S,E,Act,Act2 normal +</div> +] +--- +# Example: COVID-19 Contact Tracing + +.left-column-half[ + +] +.right-column-half[ +- Install an app on your phone +- Turn on bluetooth +- Keep track of every bluetooth ID you see +] + +--- +.left-column[ + +] +.right-column[ +## Context Awareness is about *Human Activity* +- Useful, and necessary, input to context-aware systems +- Easier and easier to collect information about human activity +] + +.footnote[[Image credit](https://www.techherd.co/iot-mobile-threats/) ] + +??? +Improved software and inferencing + +Improved sensors +--- +.left-column[ +## Computational Behavioral Imaging +] +.right-column[ + +] +--- +.left-column[ +## Computational Behavioral Imaging +] +.right-column[ + + +] +--- +.left-column[ +## Computational Behavioral Imaging +] +.right-column[ +  +] +--- +.left-column[ + +] +.right-column[ +## Phones + +People already carry them + +Capture many aspects of behavior +- Interactions with information: virtual +- Social engagement: social +- Loads of sensors: physical +] + +--- +.left-column[ +## Assumptions +] +.right-column[ +We have made a number of .red.bold[WRONG] assumptions about: +- what smartphones are +- how they are used +] + +--- +.left-column[ +## Assumption #1: We all have smart phones + + +] +.right-column[ +What is a smart phone? +] +??? +What do you think? +--- +.left-column[ +## Assumption #1: We all have smart phones + + +] +.right-column[ +What is a smart phone? +- Runs a complete mobile OS +- Offers computing ability and connectivity +- Includes sensors +] +--- + +# Types of Sensors + +.left-column-half[ + +- Not just touches: clicks, key presses + +| | | | +|--|--|--| +|Accelerometer | Rotation | Screen| +|Applications | Location | Telephony| +|Battery | Magnetometer | Temperature| +|Bluetooth | Network Usage | Traffic| +|Calls | Orientation | WiFi| +|Messaging | Pressure | Processor| +|Gravity | Proximity | Humidity | +|Gyroscope | Light | ... Many More | +] +.right-column-half[ +Other Kinds of Sensors: + +- Microphone + +- Camera + +- Multi-touch + +- Connected Devices? + +] + +??? +Sampled or event based? +--- +# Which Sensors might be useful for contact tracing? Why? +.left-column-half[ + +microphone/camera/multi-touch/IOT PLUS + +| | | | +|--|--|--| +|Accelerometer | Rotation | Screen| +|Applications | Location | Telephony| +|Battery | Magnetometer | Temperature| +|Bluetooth | Network Usage | Traffic| +|Calls | Orientation | WiFi| +|Messaging | Pressure | Processor| +|Gravity | Proximity | Humidity | +|Gyroscope | Light | ... Many More | +] +.right-column-half[ +Type your answers in chat! +] +--- + +# How do you program with sensors? + + - `Managers` (e.g. `LocationManager`) let us create and register a listener + + - Listeners can receive updates at different intervals, etc. + + - Some Sensor-specific settings + [https://source.android.com/devices/sensors/sensor-types.html](https://source.android.com/devices/sensors/sensor-types.html) + +--- +# Implementing Sensing + +Android [Awareness API](https://developers.google.com/awareness/) +.left-column-half[ +## Turn it on + +Must enable it: [Google APIs](https://console.developers.google.com/apis/) + +Recent updates to documentation (from 2017): February 2020! +] + +.right-column-half[ +## Set up callbacks + +Two types of context sensing: Snapshots/ Fences +] +??? + +--- +# Snapshots + +Capture sensor data at a moment in time + +Require a single callback, to avoid hanging while sensor data is fetched: + +`onSnapshot(Response response)` + +Seting up the callback (just like callbacks for other events) + +``` java +setSnapshotListener(Awareness.getSnapshotClient(this).getDetectedActivity(), + new ActivitySnapshotListener(mUpdate, mResources)); +``` + +--- +# Fences + +Notify you *every time* a condition is true + +Conditional data + +3 callbacks: during, starting, stopping + +```java +mActivityFenceListener = new ActivityFenceListener( + // during + DetectedActivityFence.during(DetectedActivity.WALKING), + // starting + DetectedActivityFence.starting(DetectedActivity.WALKING), + // stopping + DetectedActivityFence.stopping(DetectedActivity.WALKING), + this, this, mUpdate); +``` + +??? +What might we use for a location fence? +Headphone fence? +... + +--- +# Snapshots vs Fences for contact tracing + +.left-column40[ +<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/mdDbVMvvYnDCcu3ugYWzh?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> + +] +-- +.right-column30[ +Answer: Fence + +We want to be notified about *every* contact so we can record it +] + +--- +# Using Context-Awareness in Apps +.left-column[ + +] +.right-column[ + +Capture and Access: +- .red[Food diarying] and nutritional awareness via receipt analysis [Ubicomp 2002] +- .bold.red[Audio Accessibility] for deaf people by supporting mobile +sound transcription [Ubicomp 2006, CHI 2007] +- .red[Citizen Science] volunteer data collection in the field [CSCW + 2013, CHI + 2015] +- .red[Air quality assessment] and visualization [CHI 2013] +- .red[Coordinating between patients and doctors] via wearable + sensing of in-home physical therapy [CHI 2014] +] +--- +# What might we do with today's phones? +.left-column[ + +] +.right-column[ + +## Adaptive Services (changing operation or timing) + +- .red[Adaptive Text Prediction] for assistive communication devices + [TOCHI 2005] +- .red[Location prediction] based on prior behavior [Ubicomp 2014] +- .bold.red[Pro-active task access] on lock screen based on predicted user + interest [MobileHCI 2014] +] +--- +# What might we do with today's phones? +.left-column[ + + + +] +.right-column[ +## Novel Interaction + +- .red[Cord Input] for interacting with mobile devices [CHI 2010] +- .red[Smart Watch Intent to Interact] via twist'n'knock gesture [GI + 2016] +- .red[VR Intent to Interact] vi sensing body pose, gaze and gesture + [CHI 2017] +- .red[Around Body interaction] through gestures with the phone + [Mobile HCI 2014] +- .red.bold[Around phone interaction] through gestures combining on and + above phone surface [UIST 2014] + +] +--- +# What might we do with today's phones? +.left-column[ + + + +] +.right-column[ +![:youtube Interweaving touch and in-air gestures using in-air +gestures to segment touch gestures, H5niZW6ZhTk] +] + +--- +# What might we do with today's phones? +.left-column[ + + +] +.right-column[ + +## Behavioral Imaging + +- .red[Detecting and Generating Safe Driving Behavior] by using +inverse reinforcement learning to create human routine models [CHI 2016, +2017] +- .red[Detecting Deviations in Family Routines] such as being late to +pick up kids [CHI 2016] +] +--- +# What might we do with today's phones? + +.left-column[ + + +] +.right-column[ +## General Solutions for Data Collection and Response + +- .red[General solution for studying people in the wild] via mobile +sensing and interaction [CHI 2007] +- .red[Minimizing user burden] for generating adaptive services via + test-time feature ordering [Ubicomp 2016] +] + +--- + +<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/pgjVCzFsgUO4RT0yWQJLF?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> + +--- +# Revisiting Assumption #1: We all have smart phones + +.left-column[ + + +] +.right-column[ +Does this seem like a smart phone? + +No, it just more input devices + +You have to do all the work +] + +-- +.corner-ribbon.brtl[All Marketing] +--- +background-image: url(img/context/phones-background.png) +# Dumb (Feature) Phones + +We live in a time of dumb phones + +Know almost nothing about me + +Explicit preferences + +Contacts + +Running applications + +Hardly knows when I’m mobile/fixed, charging/not charging + +Doesn’t know me or what I’m doing + +-- +.corner-ribbon.purple.tlbr[WHY NOT SMARTER???] +--- +# Research Goal: A real smartphone! +.left-column[ + +] +.right-column[ +Want to build a smart phone that + +Collects and learns a model of human behavior with every interaction + +From the moment the phone is purchased and turned on + +Uses behavior information to improve interaction and the user experience + +Do this opportunistically + +- Your noise is my signal! +- Big Data of 1 +] +??? +How close are we to this? + +- Amazing amounts of computation at hand +- Memory and storage +- Radios and communication +- Sensors +- Software +--- +# Assumption #2: Proximity is standard + +We assume that users have their phones with them and turned on 24-7 + +Which is great for things like health apps and behavior modeling +- Mobile phone is personal and travels with the user +- Proxy for user context +- Proxy for user’s environment context +- Proxy for user’s attention/display device +- Provide always-available service + +--- +# Assumption #2: Proximity is standard + +## How much of the day is your phone on? + +Average user: 78-81% [Dey, 2011] + +- One-fifth of the time, phone is off +- Can’t sense anything +- Can’t show anything to the user + +--- +<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/eB1wjPW8LGqgpi9X1mhQS?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> +--- + +# Where is your phone right now? +.left-column-half[ + + Arms Reach + + Same Room + + Further + +Off +] +.right-column-half[ + +] + +--- +# When your phone is on, where is it? +.left-column[ + + + + + +] +.right-column[ +- Within arm’s reach (53%) +- Within the same room (35%) +- Further away? (12%) + + +] +--- +# Assumption #2: Proximity is standard + +.left-column-half[ +## Challenges for interpreting phone data: + +***Can't use the phone as a proxy for the user*** + +It's off about 20% of the time + +It's not in the same roomabout 12% of the time + +] +-- +.left-column-half[ +***How do we implement contact tracing given this?*** +] + +--- +# Assumption #2: Proximity is standard + +.left-column-half[ +## Challenges for interpreting phone data: + +***Can't use the phone as a proxy for the user*** + +It's off about 20% of the time + +It's not in the same roomabout 12% of the time + +***How do we implement contact tracing given this?*** +] +.right-column-half[ +## May need complementary sensors + +Smart watch + +Fitbit + +Room level sensing + ] +--- +.left-column[ +## Assumption #3: Usage is Notification Driven + +] +.right-column[ +What do we know about how people use their mobile devices? + +- “Always on the phone!†+- “Notifications are ruining my life!†+ +] +--- +# Characterizing Usage: Glance + +.left-column-half[ + +] +.right-column-half[ +![:youtube Glancing at a phone without engaging, 4pXLqDZCFwo] +] + +.footnote[Based on 1 months data from 10 participants] +--- +# Characterizing Usage: Review + +.left-column-half[ + +] +.right-column-half[ +![:youtube Reviewing on a phone, vsPkU8fHp-c] +] + +.footnote[Based on 1 months data from 10 participants] +--- +# Characterizing Usage: Engage + +.left-column-half[ + +] +.right-column-half[ +![:youtube Reviewing on a phone, NCwj3__BFxQ] +] + +.footnote[Based on 1 months data from 10 participants] +--- +# Characterizing Usage + +.left-column-half[ + +] +.right-column-half[ +95% of sessions shorter than 5 minutes; most < 60 secs + +Notifications lead to engagement… only 25% of the time! + +Self-interruption therefore more common than we would think + +Notifications prevent unnecessary engages + +No good support for reviews +] +--- +.left-column[ +## Opportunity: Leverage real knowledge about phone use + +] +.right-column[ +Engage people when appropriate + +Avoid interrupting when not + +Make short interactions more powerful + +] +--- +.left-column[ + +] +.right-column[ +## Example: pro-active tasks + +Provide access to email management, etc right on lock screen + +] +--- +.left-column[ + +] +.right-column[ +## Example: pro-active tasks + +Provide access to email management, etc right on lock screen + +Study of phone use (10 users, 4 weeks) + +95% of sessions shorter than 5 minutes; most < 60 secs + +No good support for quick task completion (just viewing things) +] +--- +.left-column[ +## All users + + +] + +.right-column[ +## Results + +25 participants +- 10 nonusers (4% of lockscreen views with a task or less per week) +- 9 regular users (5-10% of lockscreen views with a task per week) +- 5 power users (40-60% of lockscreen views!) +] +??? +regular users mostly used the tasks when they had some down time, or +when bored or nothing better to do. + +power users who applied actions to email in more than 1/3 of sessions +when tasks were present on their lock screen. + +--- +.left-column[ +## Cleaners + + +] +.right-column[ +## Results + +25 participants +- 10 nonusers (4% of lockscreen views with a task or less per week) +- 9 regular users (5-10% of lockscreen views with a task per week) +- 5 power users (40-60% of lockscreen views!) +- 3 'cleaners' +] +??? +We also found a special kind of power users called cleaners. They rarely had any unread emails in their inbox and used ProactiveTasks to keep their inbox clear of any unwanted emails. + +--- +.left-column[ +## Assumption #4: Need is Necessary + +] +.right-column[ + +.quote[When asked which device or platform they would not be able to +live without, a majority (65%) chose iPhone, while only a few (1%) +[...mentioned] facebook. Nearly 15% ... +] +] +--- +.left-column[ +## Assumption #4: Need is Necessary + +] +.right-column[ + +.quote[When asked which device or platform they would not be able to +live without, a majority (65%) chose iPhone, while only a few (1%) +[...mentioned] facebook. Nearly 40% ... .red[said they'd rather give up their laptop +than go for even a weekend without their iPhone] +] +] + +--- +.left-column[ +## Assumption #4: Need is Necessary + +] +.right-column[ + +] +--- +.left-column[ +## Assumption #4: Need is Necessary + +## Should we combat this? How? + +] +.right-column[ + +[Hinicker](https://www.alexishiniker.com/) (works at UW): +- Can devices teach self-regulation, rather than trying to regulate children? +- Why do people compulsively check their phones? Can they change this? + +[Burke](http://thoughtcrumbs.com/) (works at Facebook): +- [Watching silly cat videos is good for + you](https://www.wsj.com/articles/why-watching-silly-cat-videos-is-good-for-you-1475602097) +- [Online social life good for your + longevity](https://www.nytimes.com/2016/11/01/science/facebook-longer-life.html) + ... but [The Relationship Between Facebook Use and Well-Being + Depends on Communication Type and Tie + Strength](https://academic.oup.com/jcmc/article/21/4/265/4161784) + + + +] +--- +.left-column[ +## Assumptions + +- Assumption #1: Phones are smart +- Assumption #2: Proximity is standard +- Assumption #3: Usage is notification driven +- Assumption #4: Need is necessary +] + +.right-column[ +By removing assumptions, we can recast: + +- the notion of what a smart phone is +- how we can use them to improve people’s lives +- how to leverage make (personalized) meaning from (your) big data +] +??? +--- +# Do you think COVID-19 has challenged the validaty of any of these assumptions? + +.left-column[ +## Assumptions + +- Assumption #1: Phones are smart +- Assumption #2: Proximity is standard +- Assumption #3: Usage is notification driven +- Assumption #4: Need is necessary +] + +.right-column[ +<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/Omnf3hdr8zaHvaGCTpemV?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> +] +??? + +--- +.title[Challenges to this vision] +.body[ + +- Battery +- Raw sensors not behavior data +- Not the sensors we always want +- Computational complexity +- Latency in communication +- Basic software framework to support apps that can adapt to user behavior +- Apps that drive innovation +- How people use phones +] + +--- + +# End of Deck + +--- +--- +# Places + +Shows you what is nearby + +```java +//In MainActivity: +setSnapshotListener(Awareness.getSnapshotClient(this).getPlaces(), + new PlacesSnapshotListener(mUpdate, mResources))); + +//In PlacesSnapshotListener +public void onSnapshot(PlacesResponse response) { + List<PlaceLikelihood> placeLikelihood = response.getPlaceLikelihoods(); + if (placeLikelihood != null && !placeLikelihood.isEmpty()) { + for (PlaceLikelihood likelihood : placeLikelihood) { + addPlace(likelihood.getPlace().getName().toString(), likelihood.getLikelihood()); + } + } + + mUpdate.prependText(placeLikelihood.toString()); + } +``` diff --git a/slides/wk06/img/3dprinting/add-subtract.png b/slides/wk06/img/3dprinting/add-subtract.png new file mode 100644 index 0000000000000000000000000000000000000000..6f5b26318d7eef422a90eb445d73cd709a0ad5d5 Binary files /dev/null and b/slides/wk06/img/3dprinting/add-subtract.png differ diff --git a/slides/wk06/img/3dprinting/additive.png b/slides/wk06/img/3dprinting/additive.png new file mode 100644 index 0000000000000000000000000000000000000000..9c184ca2202e52685fbb1b60c10e089079fa39c4 Binary files /dev/null and b/slides/wk06/img/3dprinting/additive.png differ diff --git a/slides/wk06/img/3dprinting/biotoxicity.jpg b/slides/wk06/img/3dprinting/biotoxicity.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3c6ed987d21d9a11d7697ba9c64348262c1094bb Binary files /dev/null and b/slides/wk06/img/3dprinting/biotoxicity.jpg differ diff --git a/slides/wk06/img/3dprinting/bridge-overhang.png b/slides/wk06/img/3dprinting/bridge-overhang.png new file mode 100644 index 0000000000000000000000000000000000000000..af254bfc6dc3c8f8528a07c3a77b322d8c3807a6 Binary files /dev/null and b/slides/wk06/img/3dprinting/bridge-overhang.png differ diff --git a/slides/wk06/img/3dprinting/bridge.png b/slides/wk06/img/3dprinting/bridge.png new file mode 100644 index 0000000000000000000000000000000000000000..db7f1d3f5cf02b0e74a22955309e0262ca720562 Binary files /dev/null and b/slides/wk06/img/3dprinting/bridge.png differ diff --git a/slides/wk06/img/3dprinting/bust.png b/slides/wk06/img/3dprinting/bust.png new file mode 100644 index 0000000000000000000000000000000000000000..4c4ae6d28f2290d297b2a9f2752f617896bade9a Binary files /dev/null and b/slides/wk06/img/3dprinting/bust.png differ diff --git a/slides/wk06/img/3dprinting/cube-shell.png b/slides/wk06/img/3dprinting/cube-shell.png new file mode 100644 index 0000000000000000000000000000000000000000..6644e896fe81d890f86cd2cdb325379b20ba6138 Binary files /dev/null and b/slides/wk06/img/3dprinting/cube-shell.png differ diff --git a/slides/wk06/img/3dprinting/cube-stl.png b/slides/wk06/img/3dprinting/cube-stl.png new file mode 100644 index 0000000000000000000000000000000000000000..2144fa59e8f9f57b2b1b4c846a5ec1447858bcca Binary files /dev/null and b/slides/wk06/img/3dprinting/cube-stl.png differ diff --git a/slides/wk06/img/3dprinting/embedding.png b/slides/wk06/img/3dprinting/embedding.png new file mode 100644 index 0000000000000000000000000000000000000000..5b94cfe7fb597578bd1d1be2cbd9c8631730cb4e Binary files /dev/null and b/slides/wk06/img/3dprinting/embedding.png differ diff --git a/slides/wk06/img/3dprinting/fabric.png b/slides/wk06/img/3dprinting/fabric.png new file mode 100644 index 0000000000000000000000000000000000000000..7d0bc21fd9085b149aafc40fdb0b3e56ffb55f2d Binary files /dev/null and b/slides/wk06/img/3dprinting/fabric.png differ diff --git a/slides/wk06/img/3dprinting/fabric2.png b/slides/wk06/img/3dprinting/fabric2.png new file mode 100644 index 0000000000000000000000000000000000000000..102da43375884c43e33cb2651171fed9df79badd Binary files /dev/null and b/slides/wk06/img/3dprinting/fabric2.png differ diff --git a/slides/wk06/img/3dprinting/gear.png b/slides/wk06/img/3dprinting/gear.png new file mode 100644 index 0000000000000000000000000000000000000000..0b3b449368c5bb8b837714458a1df964eb8fa16a Binary files /dev/null and b/slides/wk06/img/3dprinting/gear.png differ diff --git a/slides/wk06/img/3dprinting/grey-box.png b/slides/wk06/img/3dprinting/grey-box.png new file mode 100644 index 0000000000000000000000000000000000000000..904cdc8219d7966f0dbeb98bfe340bd8f5b67b99 Binary files /dev/null and b/slides/wk06/img/3dprinting/grey-box.png differ diff --git a/slides/wk06/img/3dprinting/interactiles.png b/slides/wk06/img/3dprinting/interactiles.png new file mode 100644 index 0000000000000000000000000000000000000000..0d19934e984e9c4e61aef0f7c0c9138bd3ea7bd6 Binary files /dev/null and b/slides/wk06/img/3dprinting/interactiles.png differ diff --git a/slides/wk06/img/3dprinting/ioio.jpg b/slides/wk06/img/3dprinting/ioio.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3ff69c8a9937bf6c184222b57a5ec17d80401aff Binary files /dev/null and b/slides/wk06/img/3dprinting/ioio.jpg differ diff --git a/slides/wk06/img/3dprinting/magician.png b/slides/wk06/img/3dprinting/magician.png new file mode 100644 index 0000000000000000000000000000000000000000..6eb9bc0dfe45b89a48c2a2df0ef039b852fad392 Binary files /dev/null and b/slides/wk06/img/3dprinting/magician.png differ diff --git a/slides/wk06/img/3dprinting/metal-embed.jpg b/slides/wk06/img/3dprinting/metal-embed.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4053fc24a6fab246cd3fd731166058b88251c99e Binary files /dev/null and b/slides/wk06/img/3dprinting/metal-embed.jpg differ diff --git a/slides/wk06/img/3dprinting/nutbolt.png b/slides/wk06/img/3dprinting/nutbolt.png new file mode 100644 index 0000000000000000000000000000000000000000..e86bb2b4fe5fb6940eeb7ecf394c254ccf66dc2f Binary files /dev/null and b/slides/wk06/img/3dprinting/nutbolt.png differ diff --git a/slides/wk06/img/3dprinting/overhang.png b/slides/wk06/img/3dprinting/overhang.png new file mode 100644 index 0000000000000000000000000000000000000000..713e58d1c59cb8f4ac1abd5f31d0513d5303ec67 Binary files /dev/null and b/slides/wk06/img/3dprinting/overhang.png differ diff --git a/slides/wk06/img/3dprinting/phone-sensor.gif b/slides/wk06/img/3dprinting/phone-sensor.gif new file mode 100644 index 0000000000000000000000000000000000000000..418dcb2a5ec1de520e81e135b1ed7889faf78c90 Binary files /dev/null and b/slides/wk06/img/3dprinting/phone-sensor.gif differ diff --git a/slides/wk06/img/3dprinting/potentiometric.jpg b/slides/wk06/img/3dprinting/potentiometric.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1544080a61574922edf3d9943c9dd0e9f1dccd94 Binary files /dev/null and b/slides/wk06/img/3dprinting/potentiometric.jpg differ diff --git a/slides/wk06/img/3dprinting/shells.png b/slides/wk06/img/3dprinting/shells.png new file mode 100644 index 0000000000000000000000000000000000000000..3149f9fe2d45b210d9c8e67e62018fb000c25e7a Binary files /dev/null and b/slides/wk06/img/3dprinting/shells.png differ diff --git a/slides/wk06/img/3dprinting/slicing.png b/slides/wk06/img/3dprinting/slicing.png new file mode 100644 index 0000000000000000000000000000000000000000..ef83638decfaa0492b23710aa502209c7a0c7e73 Binary files /dev/null and b/slides/wk06/img/3dprinting/slicing.png differ diff --git a/slides/wk06/img/3dprinting/solid-modeling.png b/slides/wk06/img/3dprinting/solid-modeling.png new file mode 100644 index 0000000000000000000000000000000000000000..cb3326c70a5e4643d7442125062c8d1e6608e300 Binary files /dev/null and b/slides/wk06/img/3dprinting/solid-modeling.png differ diff --git a/slides/wk06/img/3dprinting/stringdrive.png b/slides/wk06/img/3dprinting/stringdrive.png new file mode 100644 index 0000000000000000000000000000000000000000..4cb62f6934901666864e8548e85de906be988561 Binary files /dev/null and b/slides/wk06/img/3dprinting/stringdrive.png differ diff --git a/slides/wk06/img/3dprinting/subaru-legacy-part.png b/slides/wk06/img/3dprinting/subaru-legacy-part.png new file mode 100644 index 0000000000000000000000000000000000000000..29430ffffff174f26865b9dcdf9cc76da7976098 Binary files /dev/null and b/slides/wk06/img/3dprinting/subaru-legacy-part.png differ diff --git a/slides/wk06/img/3dprinting/subaru-light.png b/slides/wk06/img/3dprinting/subaru-light.png new file mode 100644 index 0000000000000000000000000000000000000000..5861e18aa8a062d5d2edd544b695a7608498e583 Binary files /dev/null and b/slides/wk06/img/3dprinting/subaru-light.png differ diff --git a/slides/wk06/img/3dprinting/subaru-switch-iterations.png b/slides/wk06/img/3dprinting/subaru-switch-iterations.png new file mode 100644 index 0000000000000000000000000000000000000000..bc285f6be2d46c56483b927d1e989e7bf33c8599 Binary files /dev/null and b/slides/wk06/img/3dprinting/subaru-switch-iterations.png differ diff --git a/slides/wk06/img/3dprinting/subaru-switch-model.png b/slides/wk06/img/3dprinting/subaru-switch-model.png new file mode 100644 index 0000000000000000000000000000000000000000..5bb1cd88324b8e614af0a7995955fffd33265d97 Binary files /dev/null and b/slides/wk06/img/3dprinting/subaru-switch-model.png differ diff --git a/slides/wk06/img/3dprinting/subaru-switch-replaced-on.png b/slides/wk06/img/3dprinting/subaru-switch-replaced-on.png new file mode 100644 index 0000000000000000000000000000000000000000..dc85bbc0235f95b5ed81539a32713fe2d9f61099 Binary files /dev/null and b/slides/wk06/img/3dprinting/subaru-switch-replaced-on.png differ diff --git a/slides/wk06/img/3dprinting/subaru-switch-replaced.png b/slides/wk06/img/3dprinting/subaru-switch-replaced.png new file mode 100644 index 0000000000000000000000000000000000000000..0f1d0bc40a06617ec631111d6ab1a33c51c03101 Binary files /dev/null and b/slides/wk06/img/3dprinting/subaru-switch-replaced.png differ diff --git a/slides/wk06/img/3dprinting/subaru-switch.png b/slides/wk06/img/3dprinting/subaru-switch.png new file mode 100644 index 0000000000000000000000000000000000000000..08001dc1320648cf57a20ef424d736e6626b780d Binary files /dev/null and b/slides/wk06/img/3dprinting/subaru-switch.png differ diff --git a/slides/wk06/img/3dprinting/subaru.png b/slides/wk06/img/3dprinting/subaru.png new file mode 100644 index 0000000000000000000000000000000000000000..821622a51b2f3b5603559c2433fd0b80ca46a7f6 Binary files /dev/null and b/slides/wk06/img/3dprinting/subaru.png differ diff --git a/slides/wk06/img/3dprinting/tactile-map.png b/slides/wk06/img/3dprinting/tactile-map.png new file mode 100644 index 0000000000000000000000000000000000000000..3b1c229976fb0aaf6988914ff6b66e317d07a836 Binary files /dev/null and b/slides/wk06/img/3dprinting/tactile-map.png differ diff --git a/slides/wk06/img/3dprinting/tendon1.png b/slides/wk06/img/3dprinting/tendon1.png new file mode 100644 index 0000000000000000000000000000000000000000..b3ff5353cc4ca3191ab52d7ecba317e3cb23b993 Binary files /dev/null and b/slides/wk06/img/3dprinting/tendon1.png differ diff --git a/slides/wk06/img/3dprinting/tendon2.png b/slides/wk06/img/3dprinting/tendon2.png new file mode 100644 index 0000000000000000000000000000000000000000..5d9315d5cd919c6de8a08e92c7e7dbb93302cf4b Binary files /dev/null and b/slides/wk06/img/3dprinting/tendon2.png differ diff --git a/slides/wk06/img/3dprinting/wheel.png b/slides/wk06/img/3dprinting/wheel.png new file mode 100644 index 0000000000000000000000000000000000000000..712f582933956ed5e22501621fc913bd121a41fd Binary files /dev/null and b/slides/wk06/img/3dprinting/wheel.png differ diff --git a/slides/wk06/img/buttons64dp.png b/slides/wk06/img/buttons64dp.png new file mode 100644 index 0000000000000000000000000000000000000000..691d9215cdec15742198a3e3c43396c8b62d1d04 Binary files /dev/null and b/slides/wk06/img/buttons64dp.png differ diff --git a/slides/wk06/img/buttons80dp.png b/slides/wk06/img/buttons80dp.png new file mode 100644 index 0000000000000000000000000000000000000000..40471bbe182b078f44b2ae52e8ab64a642a4baea Binary files /dev/null and b/slides/wk06/img/buttons80dp.png differ diff --git a/slides/wk06/img/context/AWAY.png b/slides/wk06/img/context/AWAY.png new file mode 100644 index 0000000000000000000000000000000000000000..a4dae68db4b02fe20d03c152abef4b6db8a1eff9 Binary files /dev/null and b/slides/wk06/img/context/AWAY.png differ diff --git a/slides/wk06/img/context/IoT.png b/slides/wk06/img/context/IoT.png new file mode 100644 index 0000000000000000000000000000000000000000..1c91c492c924bb12030d4722a2bfcd6bbac6fd09 Binary files /dev/null and b/slides/wk06/img/context/IoT.png differ diff --git a/slides/wk06/img/context/airtouch.jpg b/slides/wk06/img/context/airtouch.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9011cfef75f72996ed1b32a7ddeb12851f7cd9d2 Binary files /dev/null and b/slides/wk06/img/context/airtouch.jpg differ diff --git a/slides/wk06/img/context/airtouch2.jpg b/slides/wk06/img/context/airtouch2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1f99e07245b6273cc270a864100675121b7fba37 Binary files /dev/null and b/slides/wk06/img/context/airtouch2.jpg differ diff --git a/slides/wk06/img/context/armsreach.png b/slides/wk06/img/context/armsreach.png new file mode 100644 index 0000000000000000000000000000000000000000..838c66594b92750af97a4e0631bab3826fa0651c Binary files /dev/null and b/slides/wk06/img/context/armsreach.png differ diff --git a/slides/wk06/img/context/cleaneruser.png b/slides/wk06/img/context/cleaneruser.png new file mode 100644 index 0000000000000000000000000000000000000000..cb97629f6d0ea7594f7ee64c71c344c6f1ef9469 Binary files /dev/null and b/slides/wk06/img/context/cleaneruser.png differ diff --git a/slides/wk06/img/context/contact-tracing.jpg b/slides/wk06/img/context/contact-tracing.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b43f2d9bded10709c601fd94ca46b47a2af79fe2 Binary files /dev/null and b/slides/wk06/img/context/contact-tracing.jpg differ diff --git a/slides/wk06/img/context/dinner.png b/slides/wk06/img/context/dinner.png new file mode 100644 index 0000000000000000000000000000000000000000..f930464d08d700d56cf93437611ff001b8d2f189 Binary files /dev/null and b/slides/wk06/img/context/dinner.png differ diff --git a/slides/wk06/img/context/driving.png b/slides/wk06/img/context/driving.png new file mode 100644 index 0000000000000000000000000000000000000000..68c8d71f374bac87964d3252c0255cc38079dcb6 Binary files /dev/null and b/slides/wk06/img/context/driving.png differ diff --git a/slides/wk06/img/context/engage.png b/slides/wk06/img/context/engage.png new file mode 100644 index 0000000000000000000000000000000000000000..60a7e4e95a9ef146d793165352f1fd2c595ed0c6 Binary files /dev/null and b/slides/wk06/img/context/engage.png differ diff --git a/slides/wk06/img/context/glance.png b/slides/wk06/img/context/glance.png new file mode 100644 index 0000000000000000000000000000000000000000..b16ad77a9d65fd46aca99bcdaf87a5d17c1e0860 Binary files /dev/null and b/slides/wk06/img/context/glance.png differ diff --git a/slides/wk06/img/context/imaging.png b/slides/wk06/img/context/imaging.png new file mode 100644 index 0000000000000000000000000000000000000000..fe6a86ae3ac5363d8e65806be07e26dc405ce6bb Binary files /dev/null and b/slides/wk06/img/context/imaging.png differ diff --git a/slides/wk06/img/context/momento.png b/slides/wk06/img/context/momento.png new file mode 100644 index 0000000000000000000000000000000000000000..f67ac277b6c40bb28933a2a4fa0e74c29e8aad07 Binary files /dev/null and b/slides/wk06/img/context/momento.png differ diff --git a/slides/wk06/img/context/nonuser.png b/slides/wk06/img/context/nonuser.png new file mode 100644 index 0000000000000000000000000000000000000000..ec5ae26df2dd00a27a28ddcaa8fd347bb17c8211 Binary files /dev/null and b/slides/wk06/img/context/nonuser.png differ diff --git a/slides/wk06/img/context/people-background.png b/slides/wk06/img/context/people-background.png new file mode 100644 index 0000000000000000000000000000000000000000..d22eb0d03a42b0a8d48ef16e9ff7c2119641adb3 Binary files /dev/null and b/slides/wk06/img/context/people-background.png differ diff --git a/slides/wk06/img/context/phone-compare.png b/slides/wk06/img/context/phone-compare.png new file mode 100644 index 0000000000000000000000000000000000000000..9ebcd8a3ec026d18d7ae24afbc9be33c5f6a3f8f Binary files /dev/null and b/slides/wk06/img/context/phone-compare.png differ diff --git a/slides/wk06/img/context/phone.png b/slides/wk06/img/context/phone.png new file mode 100644 index 0000000000000000000000000000000000000000..70dab7055c585ace1ec90a0810a0e41d85cda1a8 Binary files /dev/null and b/slides/wk06/img/context/phone.png differ diff --git a/slides/wk06/img/context/phonedist.png b/slides/wk06/img/context/phonedist.png new file mode 100644 index 0000000000000000000000000000000000000000..060747e4d1223db055b6a5216e644d236f17a103 Binary files /dev/null and b/slides/wk06/img/context/phonedist.png differ diff --git a/slides/wk06/img/context/phones-background.png b/slides/wk06/img/context/phones-background.png new file mode 100644 index 0000000000000000000000000000000000000000..995ed4e0f82b4042cd5fc4181940d12e8f5694ce Binary files /dev/null and b/slides/wk06/img/context/phones-background.png differ diff --git a/slides/wk06/img/context/phones.png b/slides/wk06/img/context/phones.png new file mode 100644 index 0000000000000000000000000000000000000000..02ebf063e963a10179310823e209c5c21ff160e6 Binary files /dev/null and b/slides/wk06/img/context/phones.png differ diff --git a/slides/wk06/img/context/poweruser.png b/slides/wk06/img/context/poweruser.png new file mode 100644 index 0000000000000000000000000000000000000000..ec5ae26df2dd00a27a28ddcaa8fd347bb17c8211 Binary files /dev/null and b/slides/wk06/img/context/poweruser.png differ diff --git a/slides/wk06/img/context/proactive-results.png b/slides/wk06/img/context/proactive-results.png new file mode 100644 index 0000000000000000000000000000000000000000..f72d4f87c54d6465080c212cff49247d256d9e89 Binary files /dev/null and b/slides/wk06/img/context/proactive-results.png differ diff --git a/slides/wk06/img/context/proactive.png b/slides/wk06/img/context/proactive.png new file mode 100644 index 0000000000000000000000000000000000000000..e029610ac82badc22dd7868951ecce12650638ab Binary files /dev/null and b/slides/wk06/img/context/proactive.png differ diff --git a/slides/wk06/img/context/review.png b/slides/wk06/img/context/review.png new file mode 100644 index 0000000000000000000000000000000000000000..04c0113b13ee587f7023f8dbd9a6806b2342df28 Binary files /dev/null and b/slides/wk06/img/context/review.png differ diff --git a/slides/wk06/img/context/roomsreach.png b/slides/wk06/img/context/roomsreach.png new file mode 100644 index 0000000000000000000000000000000000000000..3f0cd47d1f76d15566870a3461ae185f0366abc5 Binary files /dev/null and b/slides/wk06/img/context/roomsreach.png differ diff --git a/slides/wk06/img/context/scribe4me.jpeg b/slides/wk06/img/context/scribe4me.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..1f206a2e591bc4af4b4c78311694f21031875264 Binary files /dev/null and b/slides/wk06/img/context/scribe4me.jpeg differ diff --git a/slides/wk06/img/context/usage.png b/slides/wk06/img/context/usage.png new file mode 100644 index 0000000000000000000000000000000000000000..17ad608616abedceab02535967a24340703b821f Binary files /dev/null and b/slides/wk06/img/context/usage.png differ diff --git a/slides/wk06/img/context/usage2.png b/slides/wk06/img/context/usage2.png new file mode 100644 index 0000000000000000000000000000000000000000..7d334162cc4668e80cadb3a891b6ba52dacd546b Binary files /dev/null and b/slides/wk06/img/context/usage2.png differ diff --git a/slides/wk06/img/pm/body-fitts.png b/slides/wk06/img/pm/body-fitts.png new file mode 100644 index 0000000000000000000000000000000000000000..d310a619ce4fee899e78aac5dacbb237a89d5128 Binary files /dev/null and b/slides/wk06/img/pm/body-fitts.png differ diff --git a/slides/wk06/img/pm/bubblekeyboard.mov b/slides/wk06/img/pm/bubblekeyboard.mov new file mode 100644 index 0000000000000000000000000000000000000000..f83852db123306ad013c3bc7d7f5da1e2430535a Binary files /dev/null and b/slides/wk06/img/pm/bubblekeyboard.mov differ diff --git a/slides/wk06/img/pm/buttons.png b/slides/wk06/img/pm/buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..26675f540854d26ee061fb0f9f81a46d9766ca14 Binary files /dev/null and b/slides/wk06/img/pm/buttons.png differ diff --git a/slides/wk06/img/pm/check.png b/slides/wk06/img/pm/check.png new file mode 100644 index 0000000000000000000000000000000000000000..2f14733dd108bcfc41f5a0b773e9b0ed6059d90d Binary files /dev/null and b/slides/wk06/img/pm/check.png differ diff --git a/slides/wk06/img/pm/common-snapping-cases.png b/slides/wk06/img/pm/common-snapping-cases.png new file mode 100644 index 0000000000000000000000000000000000000000..e8382284e1a9d00172908384b357434737a1553b Binary files /dev/null and b/slides/wk06/img/pm/common-snapping-cases.png differ diff --git a/slides/wk06/img/pm/cursor.png b/slides/wk06/img/pm/cursor.png new file mode 100644 index 0000000000000000000000000000000000000000..38d621bc442c2d815049bc9bf1ed7aa2048b3464 Binary files /dev/null and b/slides/wk06/img/pm/cursor.png differ diff --git a/slides/wk06/img/pm/debugging.png b/slides/wk06/img/pm/debugging.png new file mode 100644 index 0000000000000000000000000000000000000000..9c4134acf8d70b865591c307d5f8d026665b17d2 Binary files /dev/null and b/slides/wk06/img/pm/debugging.png differ diff --git a/slides/wk06/img/pm/dragpop.png b/slides/wk06/img/pm/dragpop.png new file mode 100644 index 0000000000000000000000000000000000000000..015e0aca032107005f5a2662c1bfc361f13d33aa Binary files /dev/null and b/slides/wk06/img/pm/dragpop.png differ diff --git a/slides/wk06/img/pm/errors.png b/slides/wk06/img/pm/errors.png new file mode 100644 index 0000000000000000000000000000000000000000..80826d598295060fb21eeeeb95f46f79ed472b52 Binary files /dev/null and b/slides/wk06/img/pm/errors.png differ diff --git a/slides/wk06/img/pm/escher.png b/slides/wk06/img/pm/escher.png new file mode 100644 index 0000000000000000000000000000000000000000..0ac5f09e3d238d5d6c1071cd3d6e9e02e4918750 Binary files /dev/null and b/slides/wk06/img/pm/escher.png differ diff --git a/slides/wk06/img/pm/fitts.png b/slides/wk06/img/pm/fitts.png new file mode 100644 index 0000000000000000000000000000000000000000..7b0df624e6613f3dd1f6a38fbf9d6e17e80a5784 Binary files /dev/null and b/slides/wk06/img/pm/fitts.png differ diff --git a/slides/wk06/img/pm/font-selection.png b/slides/wk06/img/pm/font-selection.png new file mode 100644 index 0000000000000000000000000000000000000000..04fa116a613e446c85590d056d154e57b1e05964 Binary files /dev/null and b/slides/wk06/img/pm/font-selection.png differ diff --git a/slides/wk06/img/pm/gmail-snapping.gif b/slides/wk06/img/pm/gmail-snapping.gif new file mode 100644 index 0000000000000000000000000000000000000000..66a17084941a6d03ad02d2dfa7b62446ec755b1d Binary files /dev/null and b/slides/wk06/img/pm/gmail-snapping.gif differ diff --git a/slides/wk06/img/pm/grab-cursor.png b/slides/wk06/img/pm/grab-cursor.png new file mode 100644 index 0000000000000000000000000000000000000000..69ad61bc226d295712e677589bd0bd6e5ae0f8fe Binary files /dev/null and b/slides/wk06/img/pm/grab-cursor.png differ diff --git a/slides/wk06/img/pm/hiddensize.png b/slides/wk06/img/pm/hiddensize.png new file mode 100644 index 0000000000000000000000000000000000000000..32c6dd7c59eaa2f87c1e4c29801bca196abcff74 Binary files /dev/null and b/slides/wk06/img/pm/hiddensize.png differ diff --git a/slides/wk06/img/pm/keyboard-mouse.jpg b/slides/wk06/img/pm/keyboard-mouse.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3b9f366194a1832a35fd8c9621dec9bf3eb2958b Binary files /dev/null and b/slides/wk06/img/pm/keyboard-mouse.jpg differ diff --git a/slides/wk06/img/pm/linear-pie.jpg b/slides/wk06/img/pm/linear-pie.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7b5be577b037ad1996b358bf68265ce8e9171465 Binary files /dev/null and b/slides/wk06/img/pm/linear-pie.jpg differ diff --git a/slides/wk06/img/pm/linear-pie.png b/slides/wk06/img/pm/linear-pie.png new file mode 100644 index 0000000000000000000000000000000000000000..99fa1c9be77105ec9a858423a8bf1bf3f92acba5 Binary files /dev/null and b/slides/wk06/img/pm/linear-pie.png differ diff --git a/slides/wk06/img/pm/mac-expanded.png b/slides/wk06/img/pm/mac-expanded.png new file mode 100644 index 0000000000000000000000000000000000000000..a0e0d83d0be9bb0740e8069923da73b1fd25c8eb Binary files /dev/null and b/slides/wk06/img/pm/mac-expanded.png differ diff --git a/slides/wk06/img/pm/mac-noedge.png b/slides/wk06/img/pm/mac-noedge.png new file mode 100644 index 0000000000000000000000000000000000000000..b1c0e0a346e3081e971fda5e4838930f67018f8f Binary files /dev/null and b/slides/wk06/img/pm/mac-noedge.png differ diff --git a/slides/wk06/img/pm/macvswindows.png b/slides/wk06/img/pm/macvswindows.png new file mode 100644 index 0000000000000000000000000000000000000000..78f6e16b617deec6df270683f2235fa9d37f0ca4 Binary files /dev/null and b/slides/wk06/img/pm/macvswindows.png differ diff --git a/slides/wk06/img/pm/magnification.png b/slides/wk06/img/pm/magnification.png new file mode 100644 index 0000000000000000000000000000000000000000..10228424e733844c88ba076d36f3fc8bdee249bf Binary files /dev/null and b/slides/wk06/img/pm/magnification.png differ diff --git a/slides/wk06/img/pm/new-zoom-leave.png b/slides/wk06/img/pm/new-zoom-leave.png new file mode 100644 index 0000000000000000000000000000000000000000..4c00cd0546155519467a06cac83f1efb5dca05cc Binary files /dev/null and b/slides/wk06/img/pm/new-zoom-leave.png differ diff --git a/slides/wk06/img/pm/old-zoom-leave.png b/slides/wk06/img/pm/old-zoom-leave.png new file mode 100644 index 0000000000000000000000000000000000000000..78c133c0e0d3751be92e497c9d6a1cd06f7a3868 Binary files /dev/null and b/slides/wk06/img/pm/old-zoom-leave.png differ diff --git a/slides/wk06/img/pm/old-zoom-leave2.png b/slides/wk06/img/pm/old-zoom-leave2.png new file mode 100644 index 0000000000000000000000000000000000000000..be1ba7272ba0bdb898694986e66245149aad7334 Binary files /dev/null and b/slides/wk06/img/pm/old-zoom-leave2.png differ diff --git a/slides/wk06/img/pm/pointer-cursor.png b/slides/wk06/img/pm/pointer-cursor.png new file mode 100644 index 0000000000000000000000000000000000000000..78e12c265671daf592eb68cfcbf6903c63d16191 Binary files /dev/null and b/slides/wk06/img/pm/pointer-cursor.png differ diff --git a/slides/wk06/img/pm/powerpoint-toolbar.png b/slides/wk06/img/pm/powerpoint-toolbar.png new file mode 100644 index 0000000000000000000000000000000000000000..ad67beceb109847c530752f3e696a763be9a4436 Binary files /dev/null and b/slides/wk06/img/pm/powerpoint-toolbar.png differ diff --git a/slides/wk06/img/pm/size.png b/slides/wk06/img/pm/size.png new file mode 100644 index 0000000000000000000000000000000000000000..f56056be3e8fc5d3b55e2bf2f4845677d899112c Binary files /dev/null and b/slides/wk06/img/pm/size.png differ diff --git a/slides/wk06/img/pm/size1.png b/slides/wk06/img/pm/size1.png new file mode 100644 index 0000000000000000000000000000000000000000..40da7ad658c54dd0b4a47cd182a7cd089483f9d0 Binary files /dev/null and b/slides/wk06/img/pm/size1.png differ diff --git a/slides/wk06/img/pm/size2.png b/slides/wk06/img/pm/size2.png new file mode 100644 index 0000000000000000000000000000000000000000..6351479cab97a656e0b98d36e141eea51b364358 Binary files /dev/null and b/slides/wk06/img/pm/size2.png differ diff --git a/slides/wk06/img/pm/swype.jpg b/slides/wk06/img/pm/swype.jpg new file mode 100644 index 0000000000000000000000000000000000000000..b9ae2648366e5bd4b59aeec898b4316f9c764862 Binary files /dev/null and b/slides/wk06/img/pm/swype.jpg differ diff --git a/slides/wk06/img/pm/timeoverid.png b/slides/wk06/img/pm/timeoverid.png new file mode 100644 index 0000000000000000000000000000000000000000..a633d97047b1974ec59e5811c2c768ebac148502 Binary files /dev/null and b/slides/wk06/img/pm/timeoverid.png differ diff --git a/slides/wk06/img/pm/windows-comparison.png b/slides/wk06/img/pm/windows-comparison.png new file mode 100644 index 0000000000000000000000000000000000000000..3dc19639799015d50a9d1152e95e020363c30f2a Binary files /dev/null and b/slides/wk06/img/pm/windows-comparison.png differ diff --git a/slides/wk06/img/pm/x.png b/slides/wk06/img/pm/x.png new file mode 100644 index 0000000000000000000000000000000000000000..75e39254205b42ab016a06f3381a9a37a799ad20 Binary files /dev/null and b/slides/wk06/img/pm/x.png differ diff --git a/slides/wk06/people-motor.html b/slides/wk06/people-motor.html new file mode 100644 index 0000000000000000000000000000000000000000..932b22a32c991ae700063e9ce279deb83559b9cb --- /dev/null +++ b/slides/wk06/people-motor.html @@ -0,0 +1,706 @@ +--- +layout: presentation +title: Properties of People II +description: Deriving Design Principles from Physiology of Motor Control +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Properties of People II: Motor Control & Mental Models + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout: false + +# Agenda + +- Administrivia + - Color Picker is due Monday 5/11 (10pm) + - The Accessibility and Color Picker practice quizzes are out. + - - **Reminder:** Please fill out this [form](https://docs.google.com/forms/d/e/1FAIpQLSdQrpZx-gexgDcKEF1SRp4egObimDP9qqVwLD56w0V2sYJDpw/viewform) by tonight, so we can plan for our next assignment - Menus. +- Fitts' Law and implications for interface design + +--- + +# Let's try an experiment +.left-column-half[ +] +.right-column-half[ +- [Fitts' Law Experiment](http://simonwallner.at/ext/fitts/) (simonwallner.at/ext/fitts) Scroll + down to just below 'A word of warning' +- Click the red circles as fast as possible +] +--- + +[//]: # (Outline Slide) +# Today's goals + +Experience Fitts' Law + +Discuss its implications for design + +Introduce Guiard's model of Bi-Manual Control + +Discuss its implications for design +--- +.left-column-half[ +# Throughput + + +] +.right-column-half[ +.jax[$$MT = a + b*log_2({Dist \over Size} + 1)$$ +] + +where +- *MT* is movement time +- ID is the *Index of Difficulty* (ID, in bits) of a movement +.jax[$$log_2({Dist \over Size} + 1)$$] +- *ID/MT* is the *Throughput* of a device in bits/second +- *a* and *b* are empirically derived constants +- Note: We will use D for Dist and W for Width throughout the rest of this lecture +] +??? +This is just a line + +Fitts’ law tells us about difficulty for pointing and selection tasks +- Time to move the hand depends only on relative precision required +- MT increases as __distance__ from target increases +- MT decreases as __size__ of target increases +- Diagram this + +--- +# Original Fitts' experiment + +.left-column-half[ + +.font-small[[Wikpedia](https://en.wikipedia.org/wiki/Fitts%27s_law)] +] +.right-column-half[ +Original experiment from Paul Morris Fitts involved tapping on plates as quickly as possible. +] + +--- + +# Compare Device Performance & Human Performance + +.left-column-half[ + + +] + +.right-column-half[ +.font-small[ +Device/Part | Study | Throughput (bits/s) | Relative to Optimal +-------|-------|------------ | ----------- +Finger | Langolf (1976) | 38 +Wrist | Langolf (1976) | 23 +EyeTracker| Ware & Mikaelian (1987) | 13.7 | +Hand | Fitts (1954) | 10.6 +Arm | Langolf (1976) | 9.5 +Xbox 360 | Zaranek (2014) | 5 | **.47** (arm) +Mouse | Mackenzie (2001) | 4.9 | .46 (hand) +Neck | Pfaff (1985) | 4.2 | +Trackball | Mackenzie (2001)| 3.0 | .28 (hand) +Touchpad | Mackenzie (2001) | 2.9 | .27 (hand) +Head | Hansen (2018) | 2.5 | **.51** (neck) +Gaze | Hansen (2018) | 2.1 | **.15** (eyetracker) +Joystick | Mackenzie (2001)| 1.8 | .17 (hand) +Playstation Move | Zaranek (2014) | 1.5 | .16 (arm) +Kinect | Zaranek (2014) | 1 | .1 (arm) +] +] +.footnote[Card, S. K., Mackinlay, J. D., & Robertson, G. G. (1991). <br> +A morphological analysis of the design space of input devices. <br> ACM +Transactions on Information Systems (TOIS), 9(2), 99-122. +] +??? +Useful to know if you're designing something like VR + +Doesn't have much impact on interface design + +Doesn't capture everything; e.g. error rate is higher for eye tracker + +--- +# Warnings + +Applies to *expert, errorless* use + + + + +.footnote[Error rate was manipulated by faking errors. +Ahmed Sabbir Arif and Wolfgang Stuerzlinger. CHI 2010. Predicting the cost of error correction in character-based text entry technologies. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, April 2010 +] + +??? +Axis: X is faked error rates, Y is the words per minute. + +Shows how WPM did change in the study where error rate is being changed. +If you know you are going to make a lot of errors you slow down your motion +The underlying way we're designed to move is with small motions, to eliminate jerk +We accelerate and decelerate smoothly +Trace of motion for different body parts - after the initial motion, which is a rapid aiming motion, +then corrective motions if you misss the target. +Lots of those corrections, that is where you are goign to see people slow down. +Subtle effects here – like the time to fix errors goes up as the error rate goes up… +Act of correcting an error also takes time. +Not worry about in the assignment, but interesting to know. + +--- +# Example: Arm based input + +Student project using a Kinect from 2012. +Watch the movement of his arm... + +![:youtube Bubble keyboard implemented by Chinmay N in 2012. Users swipe with their full arm to select letters in on a keyboard, mQ-pCDr3RCw] + + +--- +# Discussion: Implications of Fitts' law + +In your breakout groups, +- Discuss: Why are some things harder than others to click on? +- Add your thoughts on the bullet line with your group number in this [Google Doc](https://docs.google.com/document/d/162SuMVyuVguaTiv7hSyZUbrDhvYZUbXHJLglHvENRbM/edit?usp=sharing) +- It's helpful if one of you share your screens. + + + +??? +Constantly relevant + +Intuitively, things that are closer and/or bigger are faster and +easier to hit (and vice versa) + +What is different about the file location in Mac and Windows? + +What is the width at the top of the screen. + +--- +# Design Tip #1: <br>Make small targets larger + +  + +What does this do to Fitts Law Predictions? +-- +- Maximizes Size (W) + +Why should you not maximize all of the targets? + +-- + +- Fitts' law involves a logrithmic calculation -- exponentially bigger gains for small targets, not so +much of a gain for larger targets + +--- +# Design Tip #2:<br> Put commonly used things close together + + + +Is this minimizing Distance (D) or maximizing Size (W)? (zoom poll) +--- + +# Design Tip #2:<br> Put commonly used things close together + +.left-column50[ + +] +.right-column50[ +# ... Or bring them closer to cursor + +Is this minimizing Distance (D) or maximizing Size (W)? (zoom poll) + +] +.footnote[ +Baudisch, P., Cutrell, E., Robbins, D., Czerwinski, M., Tandler, +P. Bederson, B., and Zierlinger, A. Drag-and-Pop and Drag-and-Pick: +Techniques for Accessing Remote Screen Content on Touch- and +Pen-operated Systems. In Proceedings of Interact 2003, Zurich +Switzerland, August 2003, pp. 57-64. +] + + +??? +Reduces Distance (D) + +Not good design to put everything close together + +No space to move all targets (contextual filtering helps) + +Could do with a fancy container... + +--- +# Design Tip #2:<br> Put commonly used things close together + +.left-column50[ + +] + +.right-column50[ + +Minimizes Distance (D) in Fitts Law Predictions + +Why not do this to all targets? +] +-- +.right-column50[ +- Other usability goals matter too -- e.g. grouping related things +- It is not good design to put everything close together +- There is not enough space to move all targets (contextual filtering helps) + +How would you implement this? + +] + + + +--- +# We can make things *Closer* and *Larger* at the same time + + + +--- +# We're beating Beating Fitts' Law! + +How else can we do this? +-- + +Just don't use a mouse! Shortcut buttons; scroll wheel + +Or CHEAT... manipulate the interface +- Minimize D +- Increase W + +--- + +# Do these menus minimize Distance (D) or maximize Size (W)? + +(zoom poll) +Select from a menu bar at top of screen + + +??? +Problems? + +- Can be tiring to reach edges of *very* large screens +- Not all interfaces can do this (e.g. web designers) +--- +# Design Tip #3:<br>Make use of Edges: They are Infinite + +.right-column[ + +] + +??? +- Windows 95 bug: bottom-left corner is offset by a few pixels, can’t click on it +- Windows XP fixes it by making Start button go all the way to the corner +- Windows 8 uses styling to make start menu circular, but still makes entire corner clickable +--- +# Recent Example (Zoom) + +Which of these do you think is a better button for maximizing size using the infinite edge? + +.left-column60[ + +] +.right-column30[ +<br> + +] + +--- +# Recent Example (Zoom) + +Which of these do you think is a better button for maximizing size using the infinite edge? + +.left-column60[ + + + +Although it looks like only the text is clickable, it turns out the whole edge was. Now we only have a "smaller" but brighter button to click. +] +.right-column30[ +<br> + +] + + + +--- +# Does this minimize Distance (D) or maximize Size (W)? + +Right click in place and then select (starting at :19) + +![:youtube Illustration of advantages of marking menus,dtH9GdFSQaw?start=19] + +.footnote[ +Kittenish, G., & Buxton, W. (1994, April). User learning and performance with marking menus. In CHI (Vol. 94, pp. 258-264). +] +??? +Minimizes D +AND +increases W +(only angle matters) + + +--- +# Does this minimize Distance (D) or maximize Size (W)? + +Why is it so rare & unfamiliar? + + + +.footnote[ +Left example: OneNote 2013, Right example: Firefox. Taken from [Fitts +law and user experience](https://www.smashingmagazine.com/2012/12/fittss-law-and-user-experience/) +by +[https://www.smashingmagazine.com/author/anastasios-karafillis/](Anastasios Karafillis) +] + +--- +# Design Tip #4:<br>Use pie menus instead of context menus for expert tasks +-- + +Under some circumstances only... + +- Less than 8 options (Small target areas when too many menu entries are added) +- Expert user (willing to memorize and gain advantage of marking +menus) +- Grouping not important (hard to group radially) + +Pie menus are often not implemented in production code +- Needs to be seen as a high priority feature +- Managers need to be able to assign staff to the project + - Sadly, project constraints define an interface. (**Shouldn't be a thing! Whorfian effects**) + + +--- + +# Does this minimize Distance (D) or maximize Size (W)? + + + +??? +Snapping to a target + +- [A] Minimize D? +- [B] Maximize W? + +minimizes D +--- + +# Design Tip #5:<br>Use snapping to minimize distance<br> when likely targets are known + + + +.font-small[ + +Gmail | Trello | Chrome +----- | ------ | ----- +Drag Handle | No Handle |  No Handle +Grab cursor | Pointer cursor | Default cursor +Drop Shadow | Drop Shadow |  No Drop Shadow +Drop Target | Drop Target |  No Drop Target + No Natural Movement | Natural Movement |  Natural Movement +] + +.footnote[Examples courtesy of [Drag and Drop for Design Systems](https://uxdesign.cc/drag-and-drop-for-design-systems-8d40502eb26d)] + +??? +Also common in drawing programs + +Most sophisticated approach: dynamic semantics: Check legality and +consequences of each result at every move don’t catch errors, prevent them +--- +# Does this minimize Distance (D) or maximize Size (W)? + +Fan Cursor, Area Cursor and Bubble Cursor +![:youtube Video showing a variety of schemes for making the cursor +bigger including fan cursor; area cursor; and bubble +cursor,bq1x5cRqgUc] + +.footnote[Su, X., Au, O. K. C., & Lau, R. W. (2014, April). The +implicit fan cursor: a velocity dependent area cursor. In Proceedings +of the SIGCHI Conference on Human Factors in Computing Systems +(pp. 753-762). ACM.] + +--- +# Design Tip #6:<br>Separate Motor Size from Visible Size + +.left-column[ + +] +.right-column[ +- (a) Visual space appearance of buttons in a dialogue +box. +- (b) Motor space version of button design in (a) with much larger +targets for certain buttons. +- (c) Standard scroll-bar design. +- (d) Visual space appearance of scroll-bar redesigned to occupy smaller +screen space. +- (e) Motor space version of scroll-bar design in (d) with larger targets for active areas. +- (f) Visual space appearance of menu. +- (g) Motor space version of the menu design in (f) with the +distance to more important items reduced by compressing the size of less important items) +] +.footnote[Semantic pointing widget designs from Blanch et al. 2004] +??? +How would you implement this? +- Manipulate picking +- Whorfian effects +--- +# Would you ever make something too small virtually? + +-- + +How about a cancel button? + +--- +# How long will this take? +.right-column-half[ +Select 'Open New Window in Process' +] +.left-column[ + +] +-- +.right-column-half[ +Steering law ... Fitts law integrated over the path you have to follow +] +-- +.right-column-half[ +But it's not predictive at all. Why? +] +-- +.right-column-half[ +It doesn't account for actual user behavior +] +--- +# Actual User Behavior + +.left-column50[ + +] +-- +.right-column50[ + +] + +??? +Overly eager cascading menus, wrong submenu +- Common problem w/ web menus (but not Mac or Win) +- could brainstorm solutions (e.g. snapping? set focus somehow?) +- whorfian effects: this is hard to implement + +--- +# Fitts law has a huge limitation + +It is only predictive of **ERROR-FREE, EXPERT** behavior + +Related to our discussion of [Interaction Design](people-motor.html#28) +--- +# What else might we want to measure? + +-- +- Time on Task -- How long does it take people to +complete basic tasks? (For example, find something to +buy, create a new account, and order the item.) + +-- +- Accuracy -- How many mistakes did people make? (And +were they fatal or recoverable with the right information?) + +-- +- How strenuous (e.g. gaze has lower throughput but is less strenuous +than head pointing Mackenzie 2018) + +-- +- Recall -- How much does the person remember +afterwards or after periods of non-use? + +-- +- Emotional Response -- How does the person feel about +the tasks completed? (Confident? Stressed? Would the +user recommend this system to a friend?) + +Build up a list of good UI design principals from these basics +- Undo +- Predictability +- ... +What is missing? (e.g. fun) + +--- +# Two Handed Interaction + + +??? +Used to be a norm + +Seems we forgotten to include it in our interfaces +--- +# Guiard's model of bimanual control + +Hand | Role and Action +---- | ---- +Non-preferred | Leads the preferred hand (in time) +| Sets the spatial frame of reference for the preferred hand +| Performs coarse movements +Preferred | Follows the non-preferred hand +| Works within established frame of reference set by the non-preferred hand +| Performs fine movement + +Aside: Guiard is assuming right-handed. Tendencies somewhat less clear for left-handers,but we typically assume this still applies +] +.footnote[ +Seminal work +Yves Guiard, “Asymmetric Division of Labor in Human Skilled Bimanual Action: The Kinematic Chain as a Modelâ€, Journal of Motor Behavior, Vol. 19, No. 4, 1987, pp. 486-517.http://cogprints.org/625/ +] +??? +non-preferred hand sets context for preferred +coarser, slower movement +tends to move first +??? +Applications? + +- Mouse+keyboard +- Lenses + +--- +# What does theory say about keyboard layout? + + + +.footnote[From [Evoluent keyboard advertisement](https://turningpointtechnology.com/KB/EV/KB1.asp)] +--- +# Analysis of alternative keyboard layout + +Task | Leading Movement | Trailing/Overlapping Movement +----|----|---- +Delete | Right hand — manipulate pointer with mouse; select by double clicking/dragging | Left hand — press DELETE (probably with little finger) +Select an option in a window (see Figure 15) | Right hand — manipulate pointer with mouse; click option | Left hand — press ENTER (Assumes OK button is default) +Click on a link in a browser | Left hand — navigate to link via PAGE UP and/or PAGE DOWN keys | Right hand — manipulate pointer with mouse; select link by clicking +Open file; open folder; launch program | Right hand — manipulate pointer with mouse; single click on icon | Right hand — press ENTER (avoids error prone double-click operation) + +--- +# Other Examples: Tool Stone for Magic Lenses + +![:youtube By manipulating a mouse and a cube (one in each hand) the user controls a lens and uses it on screen, V32SnUnAe2E] + +Inspired by [1994 CHI paper](https://dl.acm.org/citation.cfm?id=166126) +Published in [UIST 2000](https://lab.rekimoto.org/projects/toolstone/) + +--- +# Magnification + + + +--- +# Font Selection + + + +??? +Fitts' law implications? +--- +# Debugging Lenses + + + +.footnote[ +Hudson, S. E., Rodenstein, R., and Smith, I. 1997. Debugging lenses: a new class of transparent tools for user interface debugging. In Proceedings UIST '97, 179-187. http://doi.acm.org/10.1145/263407.263542 +] +--- +# Advantages of Lenses + +In context interaction +- Little or no shift in focus of attention and/or movement +- Alternate views in context and on demand + +??? +- tool is at/near action point +- can compare in context +- useful for “detail + context†visualization techniques +-- + +Structured well for 2 handed input +- non-dominant hand does course positioning (of the lens) +- dominant hand does fine work + +"Spatial modes" +- Use “where you click through†to establish meaning +- Typically has a clear affordance for the meaning + +--- +# Implementing Lenses + +.small[ +<div class="mermaid"> + graph TD + Root(Root) --> LP(Lens Parent) + LP --> L[Lens] + LP --> I(Interactor 1) + LP --> II(Interactor 2) + LP --> III(Interactor 3) + +</div> +] +.footnote[Edwards, Hudson, et al., “Systematic output modification in a 2D user interface toolkitâ€, UIST ’97. http://doi.acm.org/10.1145/263407.263537 ] +??? +Can be implemented with special "lens parent" container & lens interactors +- Lens may need to change results of picking (only positional is affected) in collusion with lens parent +- Lens parent forwards all damage to all lenses +- Lenses typically change any damage that overlaps them into damage of whole lens area +- Can pass a subclass of Drawable to "ambush and modify" drawing for output effects +--- +# Discussion: Should scrolling be dominant or non-dominant? + +What tasks is scrolling used for? + +Which precedes/follows? + +??? +Task | Characteristics +Scrolling | precedes/overlaps other tasks +| sets the frame of reference +| minimal precision needed (coarse) +Selecting, editing, reading, drawing, etc. | follows/overlaps scrolling +| works within frame of reference set by scrolling +| demands precision (fine) +--- +# Summary Slide + +Design tips for motor + +- Design Tip #1: Make small targets larger +- Design Tip #2: Put commonly used things close together +- Design Tip #3: Use edges. They are infinite in size (W) +- Design Tip #4: Use pie menus for expert tasks (better yet, marking menus) +- Design Tip #5: Use snapping to reduce distance (D) when targets are known +- Design Tip #6: Separate motor and visible size + +Two-Handed input principles +- Non preferred leads +- Sets frame of reference +- Preferred does fine movement diff --git a/slides/wk07/behavior-change.html b/slides/wk07/behavior-change.html new file mode 100644 index 0000000000000000000000000000000000000000..8e7ebc3d1ffb3bf9d6be995782978f39e59890f8 --- /dev/null +++ b/slides/wk07/behavior-change.html @@ -0,0 +1,741 @@ +--- +layout: presentation +title: Using Mobile Phones to Persuade +description: Using Mobile Phones to Persuade--Behavior Change through Mobile Design +--- +layout: normal + +# Do this now + +.left-column-half[ +<br> +<iframe src="https://embed.polleverywhere.com/multiple_choice_polls/3oPAa3YORE0gE6uCKe7mq?controls=none&short_poll=true" width="600" height="400" frameBorder="0"></iframe> + +] + +.right-column-half[ +In chat write down your current "ear worm" + +What song is running through your head +or are you listening to on repeat? + +] + +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# [NOTIFICATIONS](http://sitn.hms.harvard.edu/flash/2018/dopamine-smartphones-battle-time/) + + + + +.footnote[Picture from [itstimetologoff.com](https://www.itstimetologoff.com/2018/03/22/why-switching-off-your-social-media-and-phone-notifications-is-your-own-mini-digital-detox/)] +??? +Multiple kinds of notifications on your phone. +Here's the red dot with the number of messages on it. +What other kinds are there? +- Toast - appears within an app only +- Email? Easy or hard to ignore +What do you prefer? Which are more interruptive? +Urge to clear the red dots on the screen? +They effect your brain the seritonin in your rain (red dots in particular) +--- +# [Dopamine, Smartphones & You: A battle for your time](http://sitn.hms.harvard.edu/flash/2018/dopamine-smartphones-battle-time/) + + + +??? +From a company's perspective, it's trying to get your attention +Not an altruistic service +It's not always the case, but incentives are there. +War between companies to get your attention +Important to think about how you use notifications if you're doing Mobile app development. + +--- +layout: false + +.left-column[ +## Using Mobile Phones to Persuade + +{{site.author.name}} + +CSE 340 {{site.quarter}} +] +.right-column[ + + + + +] + +--- +# Examlet 3 + +- Examlet 3 will be released after lecture +- Same process as Examlet 2: copy a google doc, fill it out, make a PDF and upload to gradescope +- Different: Not as time bound: due by 10pm tonight. + + +--- +# What does it take to persuade you? + + +![:youtube Wildebeest arguing about a log and whether it is a crocodile, JMJXvsCLu6s] + +--- +.left-column[ +## Technology for persuasion + +Coercive: negative connotatons, patronizing, paternalistc, "we know +what’s best for you and you will do it!" +] +.right-column[ + +] + +??? +Persuasion is changing your behavior. + +--- +.left-column[ +## Technology for persuasion + +## Is really about behavior change +] +.right-column[ + +Which do you think is true? + +Persuasive = Coercive + +Persuasive >= Coercive + +Persuasive <= Coercive + +Persuasive != Coercive + +] +??? +Technology that is pursuading you to do some kind of action. + +If you've bought something like a fitbit, you're buying into the idea of something pursuading +you to do something. +--- +# What does it take to persuade you? + +![:youtube People being persuaded to climb stairs, 2lXh2n0aPyw] + +??? +What kind of pursuasion is being applied here. +Is this coercive or not coercive? + +--- +# What does it take to persuade you? + + +.left-column50[ +![:youtube Cialdini, cFdCzN7RYbw] + +:54 6 shortcuts + +] +??? +Tip example - +How are they doing the study? What are the conditions? +What are they measuring? (how much they tip) +How do they sample? +Are they consenting the participants like we have to do the menus study? + +-- +.right-column50[ +How does this list of shortcuts apply to interface design? + +- reciprocity +- scarcity +- authority +- consistency +- liking +- consensus + +] + +??? +Trying to keep people using your app + +--- +# What’s needed to support positive behavior change? +.quote[ +If you cannot measure it, you cannot improve it.] + +Lord Kelvin + +??? +Not using sensor based interfaces, but we'll talk about what can we do with sensor data? +Almost every app that you download collects data about you. Studies have been done +about the libraries that are used in seemingly begnin apps. +Example: Angry birds. Why do they collect location data? (Sales) + +Most of the data they're collecting is through third party libraries. + +--- +# Data Collection Options + + + +--- +# Data Collection Options + +.left-column[ + +Or we could just use one... + +] + +.right-column[ + + +] +??? +We're carrying this around and letting them collect all this data. + +--- +.left-column[ +## Making Data Actionable + +## Data ] +.right-column[ + + + +] + +--- +.left-column[ +## Where is the value? + +## Data + +] +.right-column[ +Most of what we get is Data + + +] + +??? +We have to do more to turn the raw into something useful. +Knowledge instead of just data + + +--- +.left-column[ +## Making Data Actionable + +## Knowledge ] +.right-column[ + + + +] + +--- +.left-column[ +## Making Data Actionable + +## Decision Making ] +.right-column[ + + + +Danger... you have exceded the speed limit of 80kph. <br> +Slow down immediately or face strict disciplinary action + +.footnote[[Meru speed alarms in cabs](https://www.meru.in/about-us/our-philosophy)] + +] +??? + +This will be influencing based on the data + +--- +.left-column[ +## Making Data Actionable + +### Translating data into behavior change + +] +.right-column[ + + +] +.footnote[[personalinformatics.org](http://personalinformatics.org/tools)] + +??? +Website that has a list of all the APIs that they were aware of at the time that supports behavior change. + +--- +.left-column[ +## Making Data Actionable + +### Translating data into behavior change + +] +.right-column[ + + +Developed with 68 survey participants, 11 follow-up interviews + +] +.footnote[Li, Dey, Forlizzi. A Stage-Based Model of Personal +Informatics Systems. CHI 2010.] + +??? +Study done at the iSchool +Beyond notifications to get users to use an app + +Can't assume that everyone is at the action stage. + + +--- + +.left-column[ +## Preparation + + +] +.right-column[ +Alice! +- **Wanted** to become active +- **Decided** to track her physical activity +- **Chose** to track step counts using a pedometer +] + + +.footnote[ +**Preparation**|Collection|Integration|Reflection|Action] + + +--- +.left-column[ +## Collection + +] + +.right-column[ + +| day | steps | day | steps | day | steps | day | steps | day | steps | day | steps | +|-----|-------|-----|-------|-----|-------|-----|-------|-----|-------|-----|-------| +| Mon | 1573 | Mon | 1209 | Mon | 12344 | Mon | ... | Mon | ... | Mon | ... | +| Tue | 4392 | Tue | 1834 | Tue | 1200 | Tue | ... | Tue | ... | Tue | ... | +| Wed | 4537 | Wed | 4341 | Wed | 4311 | Wed | ... | Wed | ... | Wed | ... | +| Thu | 5842 | Thu | 8300 | Thu | 7348 | Thu | ... | Thu | ... | Thu | ... | +| Fri | 10258 | Fri | 10300 | Fri | 9384 | Fri | ... | Fri | ... | Fri | ... | +| Sat | 7528 | Sat | 6347 | Sat | 5123 | Sat | ... | Sat | ... | Sat | ... | +| Sun | 1367 | Sun | 1231 | Sun | 1430 | Sun | ... | Sun | ... | Sun | ... | +| Mon | 1497 | Mon | 1503 | Mon | 1427 | Mon | ... | Mon | ... | Mon | ... | +| Tue | 1837 | Tue | 1717 | Tue | 1643 | Tue | ... | Tue | ... | Tue | ... | +| Wed | 4537 | Wed | 4341 | Wed | 4311 | Wed | ... | Wed | ... | Wed | ... | +| Thu | 5842 | Thu | 8300 | Thu | 7348 | Thu | ... | Thu | ... | Thu | ... | +| Fri | 10258 | Fri | 10300 | Fri | 9384 | Fri | ... | Fri | ... | Fri | ... | +| Sat | 7528 | Sat | 6347 | Sat | 5123 | Sat | ... | Sat | ... | Sat | ... | +| Sun | 1367 | Sun | 1231 | Sun | 1430 | Sun | ... | Sun | ... | Sun | ... | +| ... | ... | ... | ... | ... | ... | | ... | ... | ... | ... | ... | +] +--- + +.left-column[ +## Integration + + +] +.right-column[ + + +] + + +.footnote[ +Preparation|Collection|**Integration**|Reflection|Action] + +??? +bar plot + +--- + +.left-column[ +## Reflection + + +] +.right-column[ + + +] + +.footnote[ +Preparation|Collection|Integration|**Reflection**|Action] + +??? +Days when she's really outside of the mean + +--- + +.left-column[ +## Action + + +] +.right-column[ + +The stage when people choose what they are going to do with their +new-found understanding of themselves. +] + +.footnote[ +Preparation|Collection|Integration|Reflection|**Action**] + + +??? +How can we support this with technology? + +-- +.right-column[ +– Alerts + +– Incentives + +– Suggestions + +] + +??? +Context-aware computing... + +--- + +.left-column50[ + +] +.right-column50[ + +# Why Behavior Change is Difficult + + +### Every stage presents distinct barriers + +Failures in one stage cascade through later stages, must design for +entire tracking process + +### This occurs in a larger context of deciding to track, selecting a tool, and eventual lapsing +] +.footnote[Epstein, Ping, Fogarty, Munson. A Lived Informatics Model of +Personal Informatics. UbiComp 2015.] + +??? +Fitbit users lapse after a time - they don't charge it. +Not incentivised. +Have to account for when they're lapsing + + +--- + +# Process of Change + + + +<!-- +| Precont. | Cont. | Prep. | Action | Maint. | Adoption | +|-----------------------|-----------------------|-----------------------|-----------------------|-----------------------|-----------------------| +| Consciousness-raising | Consciousness-raising | Consciousness-raising | | | Social liberation | Social liberation | Social liberation | Social liberation | | | + | | +| | Self-analysis | Self-analysis | | | | +| | Emotional arousal | Emotional arousal | | | | +| | Positive outlook | Positive outlook | | | | +| | | Commitment | Commitment | Commitment | Commitment | +| | | Behavior analysis | Behavior analysis | | | +| | | Goal setting | Goal setting | Goal setting | | +| | | Self-reevaluation | Self-reevaluation | Self-reevaluation | | +| | | | Countering | Countering | | +| | | | Monitoring | Monitoring | Monitoring | +| | | | Environmental control | Environmental control | Environmental control | +| | | | Helping relationships | Helping relationships | Helping relationships | +| | | | Rewards | Rewards | Rewards | +| | | | | | | +{: .small #small} +--> + + +??? +Using the same plan for every individual who wishes to change a behavior will not work + +Timing is important in the process of willful change + +--- +background-image: url(img/behavior-change/phoneplanet.png) + +# Case Study: <BR> Energy Use +--- +# What is the responsibility of technologists to address climate change? + + +.footnote[[Amazon Refuses to Act on Climate Change. So We Employees Are Speaking Out](https://www.yesmagazine.org/planet/amazon-climate-change-action-jeff-bezos-20190530)] + +--- +# Case Study: UbiGreen - In Class activity + +.right-column30[ + +] + +This will be fun - a design activity! +-- +Honest. +-- +Don't leave... +-- +It does involve breakout rooms. +-- +(If you are the only one in a breakout room come back to the main room and I'll put you in another one.) +-- + + +Each group will work on a page in the [shared google doc](https://docs.google.com/document/d/1SqvaQyhFYs6AsOPoDcBkG4egCRRq3jEaW17HOi0hSkM/edit?usp=sharing) +-- + +Case study is explained on the next slide AND in the doc. +-- + +One person in each breakout room should share the screen with slide, everyone should also +be in the google doc. + +--- +# Case Study: UbiGreen - In Class activity + +.right-column30[ + +] + +Problem: High Carbon Dioxide emissions from U.S. households from personal transportation (single use +vehicles). + +Goal: To create an app that will encourage users to change their behavior with respect to using +their cars. + +-- + +This was last done in 2006-9... the app needs updating... + +.left-column40[ +.footnote[ +based on a [CHI 2009 paper](https://dl.acm.org/doi/10.1145/1518701.1518861) by J. Froehlich, +T. Dillahunt, P. Klasnja, J. Mankoff, S. Consolvo, B. Harrison, J. A. Landay +] +] +--- +# Case Study: UbiGreen - In Class activity + +.right-column30[ + +] + +Your task: +- Design an app that will + - Use sensing data to determine a user's behavior (what type of data would you need?) + - Pursuade (or coerce?) users of your app to change their behavior +- Design a user study that will determine if your app is successful. + - What is your [hypothesis](https://courses.cs.washington.edu/courses/cse340/20sp/slides/wk07/menus.html#36)? + - What is your [method](https://courses.cs.washington.edu/courses/cse340/20sp/slides/wk07/menus.html#40)? What conditions might you have for your experiment? + - What might you [measure](https://courses.cs.washington.edu/courses/cse340/20sp/slides/wk07/menus.html#41)? + - What [data](https://courses.cs.washington.edu/courses/cse340/20sp/slides/wk07/menus.html#43) would you collect? + - How would you [collect the data](https://courses.cs.washington.edu/courses/cse340/20sp/slides/wk07/menus.html#49)? + - How would you prove your theories? + + + + +--- + +# Case Study: UbiGreen - actual research + +Sensed Transportation Behavior + +Ever-present Feedback + +Two formative studies +- Online survey +- In situ experience sampling method (ESM) study + +Three week field deployment + +.footnote[ +based on a [CHI 2009 paper](https://dl.acm.org/doi/10.1145/1518701.1518861) by J. Froehlich, +T. Dillahunt, P. Klasnja, J. Mankoff, S. Consolvo, B. Harrison, J. A. Landay +] + +??? +Smartest phone at the time (2006) + + +--- + + + +--- + + + +--- + + +--- +.left-column[ + + +] + +.right-column[ +## UbiGreen + +2 cities; 14 participants + +Obtain preliminary feedback on prototype +- Engagement +- Potential for social use +- Potential for changing behavior + +] + +--- +.left-column[ + + +] + +.right-column[ +## UbiGreen + + +Engagement +.quote[It's omnipresent] + +Behavior Change: +.quote[ +“It really encourages you to analyze your own performance†+] + +<!-- Social +.quote[ +“Some people at work knew about the polar bear and every day they --> +<!-- asked me about it. ‘Did you get a seal today?’â€] --> + +] +??? +Introspection + +--- +# Personal Informatics + + + +??? +Apply it to ubigreen + +--- +# Aside: Other ways for CS to engage with sustainability +.left-column50[ + +## Impact: Direct ways of reducing carbon emissions + +- Efficiency (new technologies, new patterns of use, better buildings, etc.) +- Carbon capture & storage +- Alternate sources of energy +- Carbon sinks (e.g. reforestation) +- Better energy grid +] + +.right-column50[ + +## Solutions: Indirect ways of reducing carbon emissions + +- Population control +- Economic controls (e.g., taxes) +- Cross-cultural solutions (culturally-relevant technologies) +- Education +- Governmental buy in (Local laws, world treaties, etc) +- Advancing science +] +.footnote[ +[Socolow & +Pacala](http://ngm.nationalgeographic.com/2007/10/carbon-crisis/img/stabilization_wedges.pdf); +A. Gore, Earth in the Balance +] +--- +.right-column[ +## My checklist for mobile ICT impact + +*Measure* waste and impact + - Example: [what happens to phones when you finish with them?](https://dl.acm.org/citation.cfm?doid=1357054.1357110) + +*Monitor, Model & Inform* governments as well as individuals + - Example: [Measuring air pollution using a mobile + device](https://dl.acm.org/citation.cfm?doid=1978942.1979290) +] +--- +.left-column[ + + + +Simulated impact of multiple algorithms on three month data set + +] + +.right-column[ +## My checklist for mobile ICT impact + +*Encourage environmentality* + - example [Automated thermostat setting](https://dl.acm.org/citation.cfm?doid=2493432.2493441) + - automation, efficiency, re-use + - people (lived experience) + - reduce waste +] +.footnote[[some computer science issues in creating a sustainable world](http://www.cs.cmu.edu/~io/publications/ieee08-preprint.pdf)] + +--- +.left-column[ + +] + +.right-column[ +# My checklist for mobile ICT impact + +*Relevance across sectors and cultures* (residential: renters, owners, etc), business, ...) + - Example: [understanding conflicts between landlords and tenants around energy use](https://dl.acm.org/citation.cfm?doid=1864349.1864376) + - Example: [deploying an android energy monitor to help communities & + individuals monitor](https://dl.acm.org/citation.cfm?doid=2531602.2531626) + +Goal: *Scale up* to governments, nations or more +] +.footnote[ +[Some computer science issues in creating a sustainable world](http://www.cs.cmu.edu/~io/publications/ieee08-preprint.pdf) +] +--- + +.title[Why a digression on sustainability in a behavior change lecture?] +.body[ + + +] +??? +That's all there is to fix it, we need the will power at a society level + +Of course there's other applications of behavior change as well :) +Health is a big one! diff --git a/slides/wk07/img/behavior-change/alice.png b/slides/wk07/img/behavior-change/alice.png new file mode 100644 index 0000000000000000000000000000000000000000..afca3ba696619e3701d1c19d79050ece03c69c71 Binary files /dev/null and b/slides/wk07/img/behavior-change/alice.png differ diff --git a/slides/wk07/img/behavior-change/aliceactive.png b/slides/wk07/img/behavior-change/aliceactive.png new file mode 100644 index 0000000000000000000000000000000000000000..31d5c2c28f1aee621909557f9695d2f835484cbe Binary files /dev/null and b/slides/wk07/img/behavior-change/aliceactive.png differ diff --git a/slides/wk07/img/behavior-change/amazon.jpeg b/slides/wk07/img/behavior-change/amazon.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..9d713cef9b12ee01424cdb3fb1c07dded5ee2d33 Binary files /dev/null and b/slides/wk07/img/behavior-change/amazon.jpeg differ diff --git a/slides/wk07/img/behavior-change/android.png b/slides/wk07/img/behavior-change/android.png new file mode 100644 index 0000000000000000000000000000000000000000..c05abc897a6ba254f4bf90cfa088dfb9de0d2569 Binary files /dev/null and b/slides/wk07/img/behavior-change/android.png differ diff --git a/slides/wk07/img/behavior-change/chart-highlights.png b/slides/wk07/img/behavior-change/chart-highlights.png new file mode 100644 index 0000000000000000000000000000000000000000..aa85ec73c9867b35e533f908213fe010872a4a7e Binary files /dev/null and b/slides/wk07/img/behavior-change/chart-highlights.png differ diff --git a/slides/wk07/img/behavior-change/chart.png b/slides/wk07/img/behavior-change/chart.png new file mode 100644 index 0000000000000000000000000000000000000000..48bf2c80d8c82673d08dcd270513bd242f4a94f8 Binary files /dev/null and b/slides/wk07/img/behavior-change/chart.png differ diff --git a/slides/wk07/img/behavior-change/coercion.html b/slides/wk07/img/behavior-change/coercion.html new file mode 100644 index 0000000000000000000000000000000000000000..d04f6b052527ab854bcd2babf3e56c5bc76bc88d --- /dev/null +++ b/slides/wk07/img/behavior-change/coercion.html @@ -0,0 +1,449 @@ +<!DOCTYPE html> +<html lang="en" prefix="og: http://ogp.me/ns#"> +<head> + +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<title>Free photo Chef Man Manager Pressure Suppression Superior - Max Pixel</title> +<meta name="description" content="Chef Man Manager Pressure Suppression Superior photo, resolution 2603×3904 pixel, Image type PNG, free download and free for commercial use."> + + +<meta name="google-site-verification" content="Je-m0JymvkSxpT3DfyirLx1O4vzwjAVMCxgR88P9OYI" /> + +<link rel="apple-touch-icon" sizes="57x57" href="https://www.maxpixel.net/images/apple-touch-icon-57x57.png"> +<link rel="apple-touch-icon" sizes="60x60" href="https://www.maxpixel.net/images/apple-touch-icon-60x60.png"> +<link rel="apple-touch-icon" sizes="72x72" href="https://www.maxpixel.net/images/apple-touch-icon-72x72.png"> +<link rel="apple-touch-icon" sizes="76x76" href="https://www.maxpixel.net/images/apple-touch-icon-76x76.png"> +<link rel="apple-touch-icon" sizes="114x114" href="https://www.maxpixel.net/images/apple-touch-icon-114x114.png"> +<link rel="apple-touch-icon" sizes="120x120" href="https://www.maxpixel.net/images/apple-touch-icon-120x120.png"> +<link rel="apple-touch-icon" sizes="144x144" href="https://www.maxpixel.net/images/apple-touch-icon-144x144.png"> +<link rel="apple-touch-icon" sizes="152x152" href="https://www.maxpixel.net/images/apple-touch-icon-152x152.png"> +<link rel="apple-touch-icon" sizes="180x180" href="https://www.maxpixel.net/images/apple-touch-icon-180x180.png"> + +<link rel="icon" type="image/png" href="https://www.maxpixel.net/images/favicon-32x32.png" sizes="32x32"> +<link rel="icon" type="image/png" href="https://www.maxpixel.net/images/android-chrome-192x192.png" sizes="192x192"> +<link rel="icon" type="image/png" href="https://www.maxpixel.net/images/favicon-96x96.png" sizes="96x96"> +<link rel="icon" type="image/png" href="https://www.maxpixel.net/images/favicon-16x16.png" sizes="16x16"> + + +<meta name="msapplication-TileColor" content="#4ea64e"> +<meta name="msapplication-TileImage" content="https://www.maxpixel.net/images/mstile-144x144.png"> +<meta name="theme-color" content="#4ea64e"> + +<link rel="canonical" href="https://www.maxpixel.net/Chef-Man-Manager-Pressure-Suppression-Superior-3026568"> + + + +<meta property="og:image" content="https://www.maxpixel.net/static/photo/640/Chef-Man-Manager-Pressure-Suppression-Superior-3026568.png"> +<meta property="og:type" content="article"> +<meta property="og:title" content="Free photo Chef Man Manager Pressure Suppression Superior - Max Pixel"> +<meta name="twitter:card" content="photo"> +<meta name="twitter:site" content="@fGreatPicture"> +<meta name="twitter:title" content="Free photo Chef Man Manager Pressure Suppression Superior - Max Pixel"> +<meta name="twitter:image" content="https://www.maxpixel.net/static/photo/640/Chef-Man-Manager-Pressure-Suppression-Superior-3026568.png"> +<meta name="twitter:image:width" content="427"> +<meta name="twitter:image:height" content="640"> + +<link rel="stylesheet" href="https://www.maxpixel.net/css/max-pixel.min.css"> +<link rel="stylesheet" href="https://www.maxpixel.net/css/style.css"> +<!--[if lt IE 9]><script src="https://www.maxpixel.net/js/respond.min.js"></script><![endif]--> +<style> + #header_inner, #footer_inner { max-width: 1620px; } +</style> +<script type="text/javascript"> +var base_url = 'https://www.maxpixel.net/'; +</script> + +</head> +<body> +<div id="wrapper"> + <div id="header"> + <div id="header_inner"> + <div class="pure-menu pure-menu-horizontal pure-menu-open"> + <ul> + <li class="pure-dropdown hide-xs hide-sm hide-md"><a href="https://www.maxpixel.net/Special-Photos" id="special-link">Special Photos</a></li> + <li class="pure-dropdown hide-xs hide-sm hide-md"><a><i class="icon icon_menu_dots"></i></a> + <ul class="pure-menu-children"> + <li class="mm_inc"><a href="http://www.freegreatpicture.com/" target="_blank">FreeGreatPicture.com</a></li> + <li class="mm_inc"><a href="http://www.freegreatdesign.com/">FreeGreatDesign.com</a></li> + </ul> + </li> + <li class="pure-dropdown hide-lg hide-xl"><a><i class="icon icon_menu_bars"></i></a> + <ul id="mobile_menu" class="pure-menu-children"> + <li><a href="https://www.maxpixel.net/Special-Photos">Special Photos</a></li> + </ul> + </li> + </ul> + </div> + <a id="logo" href="https://www.maxpixel.net/" class="hover_opacity"><img src="https://www.maxpixel.net/images/logo.png"></a> + <form class="media_search header_search" action="https://www.maxpixel.net/search" method="get"> + <input type="submit" value=" "> + <div class="dd_box"><span class="image_type" style="margin-right:5px">Search</span><i class="arrow"></i></div> + <div class="pure-form bubble se"> + <table> + + <tr class="image_option"> + <th>Orientation</th> + <td><label> + <input type="checkbox" name="orientation" value="horizontal"> + Horizontal</label> + <label> + <input type="checkbox" name="orientation" value="vertical"> + Vertical</label></td> + </tr> + <tr> + <th style="vertical-align:middle">Category</th> + <td><select name="cat"> + <option value="" selected>All</option> + <option value="animals">Animals</option> + <option value="buildings">Architecture/Buildings</option> + <option value="backgrounds">Backgrounds/Textures</option> + <option value="fashion">Beauty/Fashion</option> + <option value="business">Business/Finance</option> + <option value="computer">Computer/Communication</option> + <option value="education">Education</option> + <option value="feelings">Emotions</option> + <option value="food">Food/Drink</option> + <option value="health">Health/Medical</option> + <option value="industry">Industry/Craft</option> + <option value="music">Music</option> + <option value="nature">Nature/Landscapes</option> + <option value="people">People</option> + <option value="places">Places/Monuments</option> + <option value="religion">Religion</option> + <option value="science">Science/Technology</option> + <option value="sports">Sports</option> + <option value="transportation">Transportation/Traffic</option> + <option value="travel">Travel/Vacation</option> + </select></td> + </tr> + <tr class="image_option"> + <th style="vertical-align:middle">Larger than</th> + <td style="ccolor:#777"><input type="text" name="min_width" value="" placeholder="Width"> + <span class="times">×</span> + <input type="text" name="min_height" value="" placeholder="Height"> + px </td> + </tr> + <tr class="image_option"> + <th>Color</th> + <td> + <label> + <input type="checkbox" name="colors[]" value="transparent"> Transparent + </label> + <input id="cf_grayscale" class="cf_grayscale" type="checkbox" name="colors[]" value="grayscale" style="float:none"> + <label style="display:inline" for="cf_grayscale"> Black and white</label> + <div class="color_filter bg_colors"> + <input id="cf_red" type="checkbox" name="colors[]" value="red"> + <label for="cf_red" class="red"></label> + <input id="cf_orange" type="checkbox" name="colors[]" value="orange"> + <label for="cf_orange" class="orange"></label> + <input id="cf_yellow" type="checkbox" name="colors[]" value="yellow"> + <label for="cf_yellow" class="yellow"></label> + <input id="cf_green" type="checkbox" name="colors[]" value="green"> + <label for="cf_green" class="green"></label> + <input id="cf_turquoise" type="checkbox" name="colors[]" value="turquoise"> + <label for="cf_turquoise" class="turquoise"></label> + <input id="cf_blue" type="checkbox" name="colors[]" value="blue"> + <label for="cf_blue" class="blue"></label> + <input id="cf_lilac" type="checkbox" name="colors[]" value="lilac"> + <label for="cf_lilac" class="lilac"></label> + <input id="cf_pink" type="checkbox" name="colors[]" value="pink"> + <label for="cf_pink" class="pink"></label> + <input id="cf_white" type="checkbox" name="colors[]" value="white"> + <label for="cf_white" class="white"></label> + <input id="cf_gray" type="checkbox" name="colors[]" value="gray"> + <label for="cf_gray" class="gray"></label> + <input id="cf_black" type="checkbox" name="colors[]" value="black"> + <label for="cf_black" class="black"></label> + <input id="cf_brown" type="checkbox" name="colors[]" value="brown"> + <label for="cf_brown" class="brown"></label> + </div></td> + </tr> + <tr> + <th style="font-weight:normal"><a href="#" onclick="$('#search_syntax').slideToggle(200);return false;">more...</a></th> + <td style="min-width:200px;max-width:250px"><div id="search_syntax" style="display:none;white-space:normal"> You can use AND, OR, NOT and () to refine your search results: + <p style="white-space:nowrap"><i>flower AND (red OR blue) NOT rose</i></p> + </div></td> + </tr> + </table> + </div> + <div> + <input type="text" name="q" value="" placeholder="Typing your keyword..." data-autofocus> + <input type="hidden" name="order" value="popular"> + </div> + </form> + </div> + </div> + <div id="content" class="clearfix"> + <div id="media_show" class="photo"> + <div class="left"> + <div class="inside"> + <div style="text-align:center"> + <div id="media_container" class="init" itemscope itemtype="schema.org/ImageObject"> + <meta itemprop="license" content="https://creativecommons.org/licenses/publicdomain/"> + <img itemprop="contentURL" srcset="https://www.maxpixel.net/static/photo/1x/Chef-Man-Manager-Pressure-Suppression-Superior-3026568.png 1x, https://www.maxpixel.net/static/photo/2x/Chef-Man-Manager-Pressure-Suppression-Superior-3026568.png 2x" src="https://www.maxpixel.net/static/photo/1x/Chef-Man-Manager-Pressure-Suppression-Superior-3026568.png" alt="Pressure, Suppression, Superior, Manager, Chef, Man"> + <div class="overlay"><em>×</em> + <table style="height:100%"> + <tr> + <td> + <div id="support_overlay" style="color:#fff;font-size:20px"> + <p class="hide_on_small_img" style="margin:0 0 40px;font-size:34px;text-shadow:0 1px 10px rgba(0,0,0,.7)"><b>Support Max Pixel</b></p> + <p style="margin:0 0 8px">Buy us a cup of coffee</p> + <a href="https://www.maxpixel.net/utility/donate/geralt-9301" target="_blank"><span class="pure-button" style="min-width:120px;font-size:18px"><img src="https://www.maxpixel.net/images/paypal.svg" style="vertical-align:middle;height:24px" alt=""> Coffee</span></a> + </div> + <div id="img_click_overlay"> + <div id="like_buttons_clone"></div> + <div id="download_menu_clone"></div> + </div> + </td> + </tr> + </table> + </div> + <h3> + <a href="https://www.maxpixel.net/tag/Pressure">Pressure</a> + <a href="https://www.maxpixel.net/tag/Suppression">Suppression</a> + <a href="https://www.maxpixel.net/tag/Superior">Superior</a> + <a href="https://www.maxpixel.net/tag/Manager">Manager</a> + <a href="https://www.maxpixel.net/tag/Chef">Chef</a> + <a href="https://www.maxpixel.net/tag/Man">Man</a> + </h3> + </div> + <a style="position:absolute;left:-9999px" rel="license" about="https://www.maxpixel.net/static/photo/1x/Chef-Man-Manager-Pressure-Suppression-Superior-3026568.png" href="https://creativecommons.org/licenses/publicdomain/">Public Domain</a> + </div> + <h1>Chef Man Manager Pressure Suppression Superior</h1> + <div class="mmo mmo-zoom" slot-id="9569266757" slot-name="detail 1"></div> + + <p>You can also exhort them by <a href="https://www.maxpixel.net/utility/donate/geralt-9301" rel="nofollow" target="_blank">inviting our photographers one cup of Coffee</a>. If it is so great, please share with your friends.</p> +<p>License to use <a href="https://creativecommons.org/publicdomain/zero/1.0/deed.en" target="_blank" rel="nofollow">Creative Commons Zero - CC0</a>. You are free to use for many purposes without worrying issues licenses because this picture is TRUE FREE. We just want you to back a referral link to Max Pixel (optional).</p> +<p>It was archived in the category "<a href="https://www.maxpixel.net/people"><strong>People</strong></a>", maximum resolution is <em>2603×3904</em> pixels, you can download it to PNG format. We were tagged: Pressure, Suppression, Superior, Manager, Chef, Man.</p> + + <h4>Our team would like to recommend to you a few pictures in the same category:</h4> + + <p class="related"> + <a href="https://www.maxpixel.net/Yoke-Forced-Burnout-Pressure-Nanny-Dependency-62283" title="Pressure, Burnout, Dependency, Yoke, Forced, Nanny"><img src="https://www.maxpixel.net/static/photo/640/Yoke-Forced-Burnout-Pressure-Nanny-Dependency-62283.png" alt="Pressure, Burnout, Dependency, Yoke, Forced, Nanny"></a> + <span>Pressure, Burnout, Dependency, Yoke, Forced, Nanny</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Pressure-Suppression-Stress-Fear-Professions-65336" title="Pressure, Suppression, Stress, Professions, Fear"><img src="https://www.maxpixel.net/static/photo/640/Pressure-Suppression-Stress-Fear-Professions-65336.png" alt="Pressure, Suppression, Stress, Professions, Fear"></a> + <span>Pressure, Suppression, Stress, Professions, Fear</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Violent-Containing-Distress-Shield-Stop-Coercion-144103" title="Containing, Stop, Shield, Violent, Distress, Coercion"><img src="https://www.maxpixel.net/static/photo/640/Violent-Containing-Distress-Shield-Stop-Coercion-144103.png" alt="Containing, Stop, Shield, Violent, Distress, Coercion"></a> + <span>Containing, Stop, Shield, Violent, Distress, Coercion</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Violent-Containing-Woman-Stop-Move-Tattoo-144106" title="Woman, Move, Tattoo, Containing, Stop, Violent"><img src="https://www.maxpixel.net/static/photo/640/Violent-Containing-Woman-Stop-Move-Tattoo-144106.png" alt="Woman, Move, Tattoo, Containing, Stop, Violent"></a> + <span>Woman, Move, Tattoo, Containing, Stop, Violent</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Abuse-Child-Containing-Person-Torture-Rape-334307" title="Child, Person, Containing, Abuse, Rape, Torture"><img src="https://www.maxpixel.net/static/photo/640/Abuse-Child-Containing-Person-Torture-Rape-334307.png" alt="Child, Person, Containing, Abuse, Rape, Torture"></a> + <span>Child, Person, Containing, Abuse, Rape, Torture</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Torture-Person-Containing-Rape-Child-Abuse-334309" title="Child, Person, Containing, Abuse, Rape, Torture"><img src="https://www.maxpixel.net/static/photo/640/Torture-Person-Containing-Rape-Child-Abuse-334309.png" alt="Child, Person, Containing, Abuse, Rape, Torture"></a> + <span>Child, Person, Containing, Abuse, Rape, Torture</span> + </p> + <div class="mmo mmo-zoom" slot-id="2045999954" slot-name="detail 2"></div> + <br> + <p class="related"> + <a href="https://www.maxpixel.net/Bullying-Bully-Aggression-Tease-Abuse-Attack-655659" title="Bully, Attack, Aggression, Bullying, Abuse, Tease"><img src="https://www.maxpixel.net/static/photo/640/Bullying-Bully-Aggression-Tease-Abuse-Attack-655659.png" alt="Bully, Attack, Aggression, Bullying, Abuse, Tease"></a> + <span>Bully, Attack, Aggression, Bullying, Abuse, Tease</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Tease-Aggression-Attack-Abuse-Bullying-Bully-655660" title="Bully, Attack, Aggression, Bullying, Abuse, Tease"><img src="https://www.maxpixel.net/static/photo/640/Tease-Aggression-Attack-Abuse-Bullying-Bully-655660.png" alt="Bully, Attack, Aggression, Bullying, Abuse, Tease"></a> + <span>Bully, Attack, Aggression, Bullying, Abuse, Tease</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Tool-Screw-Clamp-Person-Terminal-Silhouette-Man-790474" title="Screw Clamp, Terminal, Tool, Silhouette, Man, Person"><img src="https://www.maxpixel.net/static/photo/640/Tool-Screw-Clamp-Person-Terminal-Silhouette-Man-790474.png" alt="Screw Clamp, Terminal, Tool, Silhouette, Man, Person"></a> + <span>Screw Clamp, Terminal, Tool, Silhouette, Man, Person</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Rape-Person-Torture-Abuse-Containing-Child-1223678" title="Child, Person, Containing, Abuse, Rape, Torture"><img src="https://www.maxpixel.net/static/photo/640/Rape-Person-Torture-Abuse-Containing-Child-1223678.png" alt="Child, Person, Containing, Abuse, Rape, Torture"></a> + <span>Child, Person, Containing, Abuse, Rape, Torture</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Torture-Rape-Abuse-Person-Child-Containing-1223680" title="Child, Person, Containing, Abuse, Rape, Torture"><img src="https://www.maxpixel.net/static/photo/640/Torture-Rape-Abuse-Person-Child-Containing-1223680.png" alt="Child, Person, Containing, Abuse, Rape, Torture"></a> + <span>Child, Person, Containing, Abuse, Rape, Torture</span> + </p> + <p class="related"> + <a href="https://www.maxpixel.net/Suppression-Education-Fear-Terror-Violent-Child-1439468" title="Child, Education, Fear, Terror, Violent, Suppression"><img src="https://www.maxpixel.net/static/photo/640/Suppression-Education-Fear-Terror-Violent-Child-1439468.png" alt="Child, Education, Fear, Terror, Violent, Suppression"></a> + <span>Child, Education, Fear, Terror, Violent, Suppression</span> + </p> + + <p class="tags"> + <a href="https://www.maxpixel.net/tag/Pressure">Pressure</a> + <a href="https://www.maxpixel.net/tag/Suppression">Suppression</a> + <a href="https://www.maxpixel.net/tag/Superior">Superior</a> + <a href="https://www.maxpixel.net/tag/Manager">Manager</a> + <a href="https://www.maxpixel.net/tag/Chef">Chef</a> + <a href="https://www.maxpixel.net/tag/Man">Man</a> + <a href="https://www.maxpixel.net/tag/Boss">Boss</a> + <a href="https://www.maxpixel.net/tag/Employer">Employer</a> + <a href="https://www.maxpixel.net/tag/Press">Press</a> + <a href="https://www.maxpixel.net/tag/Keep-It-Small">Keep It Small</a> + <a href="https://www.maxpixel.net/tag/Power">Power</a> + <a href="https://www.maxpixel.net/tag/Authority">Authority</a> + <a href="https://www.maxpixel.net/tag/Employee">Employee</a> + <a href="https://www.maxpixel.net/tag/Subordinate">Subordinate</a> + <a href="https://www.maxpixel.net/tag/The-Exercise-Of-Power">The Exercise Of Power</a> + <a href="https://www.maxpixel.net/tag/Powerful">Powerful</a> + <a href="https://www.maxpixel.net/tag/Violent">Violent</a> + <a href="https://www.maxpixel.net/tag/Silhouette">Silhouette</a> + <a href="https://www.maxpixel.net/tag/Tie">Tie</a> + <a href="https://www.maxpixel.net/">Free Photos</a> + <a href="https://www.maxpixel.net/">Free Images</a> + <a href="https://www.maxpixel.net/">Max Pixel</a> + </p> + </div> + </div> + <div class="right"> + + <div style="padding:15px 20px;background:#f7f8fa"> + <table id="details"> + <tr> + <th>Category</th> + <td><a href="https://www.maxpixel.net/people">People</a></td> + </tr> + <tr> + <th style="white-space:nowrap">Image type</th> + <td>PNG</td> + </tr> + <tr> + <th>Resolution</th> + <td>2603×3904</td> + </tr> + <tr style="display:none"> + <th>Downloads</th> + <td>0</td> + </tr> + </table> + </div> + + <div class="mmo mmo-zoom" slot-id="8092533553" slot-name="sidebar 1" style="margin-top: 20px;"></div> + + <div class="download_menu" data-type="photos"> + <span class="pure-button button-green" style="display:block;max-width:310px;margin:10px 0 0"><i class="icon icon_download"></i> Free Download</span> + <div class="bubble"> + <form action="https://www.maxpixel.net/Chef-Man-Manager-Pressure-Suppression-Superior-3026568" method="post" target="_blank"> + <table> + <tr> + <td><input type="radio" name="download" value="https://cdn.pixabay.com/photo/2017/12/18/17/03/pressure-3026568_640.png"> + 427×640</td> + <td>PNG</td> + <td>45 kB</td> + </tr> + <tr> + <td><input type="radio" name="download" value="pressure-3026568_1280.png"> + 853×1280</td> + <td>PNG</td> + <td>148 kB</td> + </tr> + <tr> + <td><input type="radio" name="download" value="pressure-3026568_1920.png"> + 1280×1920</td> + <td>PNG</td> + <td>315 kB</td> + </tr> + <tr class="no_default"> + <td><input type="radio" name="download" value="pressure-3026568.png"> + 2603×3904</td> + <td>PNG</td> + <td>382 kB</td> + </tr> + </table> + <input type="submit" name="submit_view" value="View" class="view_btn pure-button" data-w="300" style="display:inline-block;width:49%;float:right" /> <input type="submit" name="submit_download" value="Download" class="dl_btn pure-button button-green" data-w="300" style="display:inline-block;width:49%;" /> + </form> + </div> + </div> + + <div class="like_buttons"> + <span data-href="https://www.maxpixel.net/utility/share?photo_id=3026568" class="pure-button button-sm dd_box ajax" data-target=".share_links" title="Share">Share this photo <i class="icon icon_share"></i></span> + <div class="share_links" style="width:260px;padding:15px"></div> + <!-- <div class="fb-follow" data-href="https://www.facebook.com/freegreatpicture/" data-height="28" data-layout="button" data-size="large" data-show-faces="false"></div> --> + <div class="fb-like" data-href="https://www.facebook.com/freegreatpicture/" data-layout="button" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div> + </div> + + <div style="margin:20px 0 10px;padding:15px 20px;background:#f7f8fa;line-height:1.5"> <i class="icon icon_cc0"></i> CC0 Public Domain + <div style="margin-top:4px;font-size:14px"> + Free for commercial use <br> + Link referral required + </div> + </div> + + + + + <h4 style="margin-top:15px; margin-bottom:0px; font-size:13px;padding:5px 15px;background:#f7f8fa;border-bottom: 1px solid #eeeff2">Random special photos</h4> + <div class="flex_grid related_photos_sidebar" style="margin:0px -6px 15px -5px"> + <div class="item" data-w="640" data-h="426"><a href="https://www.maxpixel.net/Choose-Autumn-Large-Cucurbita-Maxima-Fruit-Pumpkin-3678820"> <img title="Pumpkin, Fruit, Autumn, Cucurbita Maxima, Choose, Large" src="https://www.maxpixel.net/images/blank.gif" alt="Choose Autumn Large Cucurbita Maxima Fruit Pumpkin" data-src="https://thumb.maxpixel.net/1314/Choose-Autumn-Large-Cucurbita-Maxima-Fruit-Pumpkin-3678820.jpg"> <em>Pumpkin, Fruit, Autumn, Cucurbita Maxima, Choose, Large</em> </a></div> + <div class="item" data-w="640" data-h="426"><a href="https://www.maxpixel.net/Landscape-Sunset-Desert-Horizon-Sun-Dune-Travel-2774945"> <img title="Desert, Sun, Landscape, Sunset, Dune, Travel, Horizon" src="https://www.maxpixel.net/images/blank.gif" alt="Landscape Sunset Desert Horizon Sun Dune Travel" data-src="https://thumb.maxpixel.net/997/Landscape-Sunset-Desert-Horizon-Sun-Dune-Travel-2774945.jpg"> <em>Desert, Sun, Landscape, Sunset, Dune, Travel, Horizon</em> </a></div> + <div class="item" data-w="640" data-h="427"><a href="https://www.maxpixel.net/Sitting-White-Mammal-Looking-Cat-Animal-Feline-3591348"> <img title="Cat, White, Animal, Mammal, Feline, Sitting, Looking" src="https://www.maxpixel.net/images/blank.gif" alt="Sitting White Mammal Looking Cat Animal Feline" data-src="https://thumb.maxpixel.net/1268/Sitting-White-Mammal-Looking-Cat-Animal-Feline-3591348.jpg"> <em>Cat, White, Animal, Mammal, Feline, Sitting, Looking</em> </a></div> + <div class="item" data-w="426" data-h="640"><a href="https://www.maxpixel.net/Mackerel-Pet-Animal-Domestic-Cat-Cat-Portrait-3523992"> <img title="Cat, Domestic Cat, Mackerel, Pet, Animal, Portrait" src="https://www.maxpixel.net/images/blank.gif" alt="Mackerel Pet Animal Domestic Cat Cat Portrait" data-src="https://thumb.maxpixel.net/1256/Mackerel-Pet-Animal-Domestic-Cat-Cat-Portrait-3523992.jpg"> <em>Cat, Domestic Cat, Mackerel, Pet, Animal, Portrait</em> </a></div> + <div class="item" data-w="640" data-h="254"><a href="https://www.maxpixel.net/Goose-Plumage-Waterfowl-Waterbird-Bird-Animal-3526503"> <img title="Goose, Waterbird, Waterfowl, Bird, Animal, Plumage" src="https://www.maxpixel.net/images/blank.gif" alt="Goose Plumage Waterfowl Waterbird Bird Animal" data-src="https://thumb.maxpixel.net/1256/Goose-Plumage-Waterfowl-Waterbird-Bird-Animal-3526503.jpg"> <em>Goose, Waterbird, Waterfowl, Bird, Animal, Plumage</em> </a></div> + <div class="item" data-w="640" data-h="427"><a href="https://www.maxpixel.net/Herb-Spice-Green-Plant-Basil-Kitchen-Herb-Cook-3532424"> <img title="Basil, Herb, Kitchen Herb, Spice, Cook, Green, Plant" src="https://www.maxpixel.net/images/blank.gif" alt="Herb Spice Green Plant Basil Kitchen Herb Cook" data-src="https://thumb.maxpixel.net/1258/Herb-Spice-Green-Plant-Basil-Kitchen-Herb-Cook-3532424.jpg"> <em>Basil, Herb, Kitchen Herb, Spice, Cook, Green, Plant</em> </a></div> + <div class="item" data-w="640" data-h="426"><a href="https://www.maxpixel.net/About-Time-To-Stumble-Jump-Time-Man-Alarm-Clock-2743994"> <img title="Time, Man, Jump, Alarm Clock, About Time To Stumble" src="https://www.maxpixel.net/images/blank.gif" alt="About Time To Stumble Jump Time Man Alarm Clock" data-src="https://thumb.maxpixel.net/986/About-Time-To-Stumble-Jump-Time-Man-Alarm-Clock-2743994.jpg"> <em>Time, Man, Jump, Alarm Clock, About Time To Stumble</em> </a></div> + <div class="item" data-w="640" data-h="427"><a href="https://www.maxpixel.net/Pumpkin-Vegetables-Orange-Autumn-Food-Hokkaido-3636239"> <img title="Pumpkin, Hokkaido, Orange, Autumn, Vegetables, Food" src="https://www.maxpixel.net/images/blank.gif" alt="Pumpkin Vegetables Orange Autumn Food Hokkaido" data-src="https://thumb.maxpixel.net/1268/Pumpkin-Vegetables-Orange-Autumn-Food-Hokkaido-3636239.jpg"> <em>Pumpkin, Hokkaido, Orange, Autumn, Vegetables, Food</em> </a></div> + <div class="item" data-w="640" data-h="427"><a href="https://www.maxpixel.net/Nature-Flower-Outdoors-Summer-Anemone-Plant-3616880"> <img title="Anemone, Flower, Plant, Nature, Summer, Outdoors" src="https://www.maxpixel.net/images/blank.gif" alt="Nature Flower Outdoors Summer Anemone Plant" data-src="https://thumb.maxpixel.net/1268/Nature-Flower-Outdoors-Summer-Anemone-Plant-3616880.jpg"> <em>Anemone, Flower, Plant, Nature, Summer, Outdoors</em> </a></div> + <div class="item" data-w="640" data-h="426"><a href="https://www.maxpixel.net/Dahlia-Garden-Bud-Dahlia-Dahlias-Bud-Flower-3524115"> <img title="Dahlia, Dahlias Bud, Flower, Bud, Dahlia Garden" src="https://www.maxpixel.net/images/blank.gif" alt="Dahlia Garden Bud Dahlia Dahlias Bud Flower" data-src="https://thumb.maxpixel.net/1255/Dahlia-Garden-Bud-Dahlia-Dahlias-Bud-Flower-3524115.jpg"> <em>Dahlia, Dahlias Bud, Flower, Bud, Dahlia Garden</em> </a></div> + <div class="item" data-w="640" data-h="213"><a href="https://www.maxpixel.net/Air-Dramatic-Sky-Atmosphere-Clouds-Weather-3526558"> <img title="Clouds, Sky, Dramatic, Air, Atmosphere, Weather" src="https://www.maxpixel.net/images/blank.gif" alt="Air Dramatic Sky Atmosphere Clouds Weather" data-src="https://thumb.maxpixel.net/1256/Air-Dramatic-Sky-Atmosphere-Clouds-Weather-3526558.jpg"> <em>Clouds, Sky, Dramatic, Air, Atmosphere, Weather</em> </a></div> + <div class="item" data-w="640" data-h="426"><a href="https://www.maxpixel.net/Pallets-Structure-Texture-Pattern-Background-Wall-3614890"> <img title="Texture, Pattern, Background, Pallets, Wall, Structure" src="https://www.maxpixel.net/images/blank.gif" alt="Pallets Structure Texture Pattern Background Wall" data-src="https://thumb.maxpixel.net/1291/Pallets-Structure-Texture-Pattern-Background-Wall-3614890.jpg"> <em>Texture, Pattern, Background, Pallets, Wall, Structure</em> </a></div> + </div> + + </div> + + </div> + </div> <div id="push"></div> +</div> +<div id="footer"> + <div id="footer_inner"> + <div class="hover_links hide-xs hide-sm" style="float:right;margin:2px 0 0 30px"> <a href="https://www.facebook.com/freegreatpicture/" target="_blank"><i class="icon icon_facebook"></i></a> <a href="https://twitter.com/fGreatPicture" target="_blank"><i class="icon icon_twitter"></i></a> <a href="#" target="_blank" title="Process time: 0.0514 Seconds - Memory: 2.47MB - Sql: 6"><i class="icon icon_google_plus"></i></a> </div> + <span style="margin-right:30px">© 2016 MaxPixel.net</span> + <a style="margin-right:30px" href="https://www.maxpixel.net/">Max Pixel</a> + <a style="margin-right:30px" href="http://www.freegreatpicture.com/about" target="_blank">About</a> + <a style="margin-right:30px" href="http://www.freegreatpicture.com/contact" target="_blank">Contact</a> + <a style="margin-right:30px" href="http://www.freegreatpicture.com/join" target="_blank">Join</a> + <a style="margin-right:30px" href="http://www.freegreatpicture.com/term-of-service" target="_blank">TOS</a> + <a href="https://www.maxpixel.net/rid">RID</a> + </div> +</div> +<div id="fb-root"></div> +<a id="toTop">â–²</a> +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> +<script> + window.jQuery || document.write('<script src="https://www.maxpixel.net/js/jquery.min.js"><\/script>'); + var LANG = 'en', I18N_DELETE = 'Really delete?'; + var show_captcha=0;auth_user=1; + var show_ga = '1' == '1'; +</script> +<script src="https://www.maxpixel.net/js/max-pixel.min.js"></script> +<script src="https://www.maxpixel.net/js/utility.js"></script> +<script> + + $('.header_search').find('input[type="text"], input:checked, select, input[type="hidden"]').each(function(){ + var i = this; + $('.add_search_params').each(function(){ + if (i.value && (!$(this).hasClass('filter') || i.name != 'colors' && i.name != 'min_width' && i.name != 'min_height')) + $(this).append($('<input type="hidden" name="'+i.name+'">').val(i.value)); + }); + }); + + if ($(window).innerWidth() > 767) document.write('<script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=1818229235120698" async defer><\/script>'); + else $('#fb_like_widget').hide(); + + + $('#special-link').unbind( "click" ); +</script> + +<!-- Global site tag (gtag.js) - Google Analytics --> +<script async src="https://www.googletagmanager.com/gtag/js?id=UA-17673201-26"></script> +<script> + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + + gtag('config', 'UA-17673201-26'); +</script> + +</body> +</html> +<!-- 11:07:04 30/05/2019 --> \ No newline at end of file diff --git a/slides/wk07/img/behavior-change/coercion.png b/slides/wk07/img/behavior-change/coercion.png new file mode 100644 index 0000000000000000000000000000000000000000..9329a4a28cae887cf7acdb773a8be917a4268eed Binary files /dev/null and b/slides/wk07/img/behavior-change/coercion.png differ diff --git a/slides/wk07/img/behavior-change/data-collection.png b/slides/wk07/img/behavior-change/data-collection.png new file mode 100644 index 0000000000000000000000000000000000000000..053253dc161cfb1617aebba4b576d627a220541d Binary files /dev/null and b/slides/wk07/img/behavior-change/data-collection.png differ diff --git a/slides/wk07/img/behavior-change/dopamine.jpg b/slides/wk07/img/behavior-change/dopamine.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9f0170b483fbf5145719c0aad3c6ee674ab95bf3 Binary files /dev/null and b/slides/wk07/img/behavior-change/dopamine.jpg differ diff --git a/slides/wk07/img/behavior-change/dopamine2.png b/slides/wk07/img/behavior-change/dopamine2.png new file mode 100644 index 0000000000000000000000000000000000000000..6b2461b22eb13dd1721bbf22b506b009a76a4e24 Binary files /dev/null and b/slides/wk07/img/behavior-change/dopamine2.png differ diff --git a/slides/wk07/img/behavior-change/energycost.png b/slides/wk07/img/behavior-change/energycost.png new file mode 100644 index 0000000000000000000000000000000000000000..ac66819963e3c9d66b0f4a2d63760e465edce127 Binary files /dev/null and b/slides/wk07/img/behavior-change/energycost.png differ diff --git a/slides/wk07/img/behavior-change/focus.png b/slides/wk07/img/behavior-change/focus.png new file mode 100644 index 0000000000000000000000000000000000000000..7241d58e49cb8101cfcd19c8172e9a3b61341f1f Binary files /dev/null and b/slides/wk07/img/behavior-change/focus.png differ diff --git a/slides/wk07/img/behavior-change/full-model.png b/slides/wk07/img/behavior-change/full-model.png new file mode 100644 index 0000000000000000000000000000000000000000..8379c6e681e3829bc3dc6ae6978cad2d42fef176 Binary files /dev/null and b/slides/wk07/img/behavior-change/full-model.png differ diff --git a/slides/wk07/img/behavior-change/house-background.png b/slides/wk07/img/behavior-change/house-background.png new file mode 100644 index 0000000000000000000000000000000000000000..f34aa9bad1b8985effc10bd20a57faa4ebd38284 Binary files /dev/null and b/slides/wk07/img/behavior-change/house-background.png differ diff --git a/slides/wk07/img/behavior-change/mostlydata.png b/slides/wk07/img/behavior-change/mostlydata.png new file mode 100644 index 0000000000000000000000000000000000000000..c25fbbf622a32fad4d8f7d58d8e5c87e0d77f22d Binary files /dev/null and b/slides/wk07/img/behavior-change/mostlydata.png differ diff --git a/slides/wk07/img/behavior-change/personal-informatics-model.png b/slides/wk07/img/behavior-change/personal-informatics-model.png new file mode 100644 index 0000000000000000000000000000000000000000..b7ec7714d914b333ceda3cb2146c805e38cd7107 Binary files /dev/null and b/slides/wk07/img/behavior-change/personal-informatics-model.png differ diff --git a/slides/wk07/img/behavior-change/personalinformatics.png b/slides/wk07/img/behavior-change/personalinformatics.png new file mode 100644 index 0000000000000000000000000000000000000000..f4d2f71c3686a00298b88616e41b5b8c8a4ab215 Binary files /dev/null and b/slides/wk07/img/behavior-change/personalinformatics.png differ diff --git a/slides/wk07/img/behavior-change/phone.png b/slides/wk07/img/behavior-change/phone.png new file mode 100644 index 0000000000000000000000000000000000000000..3d5fe57f8e4f487d780319dcb35e1041143ed733 Binary files /dev/null and b/slides/wk07/img/behavior-change/phone.png differ diff --git a/slides/wk07/img/behavior-change/phoneplanet.png b/slides/wk07/img/behavior-change/phoneplanet.png new file mode 100644 index 0000000000000000000000000000000000000000..a5ee683695016659a255fefce6d78342b0cf781a Binary files /dev/null and b/slides/wk07/img/behavior-change/phoneplanet.png differ diff --git a/slides/wk07/img/behavior-change/scalability.png b/slides/wk07/img/behavior-change/scalability.png new file mode 100644 index 0000000000000000000000000000000000000000..71099b41f5e5d7e06c14098df1d61746b6a05fca Binary files /dev/null and b/slides/wk07/img/behavior-change/scalability.png differ diff --git a/slides/wk07/img/behavior-change/sign.png b/slides/wk07/img/behavior-change/sign.png new file mode 100644 index 0000000000000000000000000000000000000000..297f165ca97205d17d2a3689cd5dc5826b10d5af Binary files /dev/null and b/slides/wk07/img/behavior-change/sign.png differ diff --git a/slides/wk07/img/behavior-change/sob.png b/slides/wk07/img/behavior-change/sob.png new file mode 100644 index 0000000000000000000000000000000000000000..3a26631b30f839f30b4ba441c94d4c9f5c8a036f Binary files /dev/null and b/slides/wk07/img/behavior-change/sob.png differ diff --git a/slides/wk07/img/behavior-change/speedometer.png b/slides/wk07/img/behavior-change/speedometer.png new file mode 100644 index 0000000000000000000000000000000000000000..1372078f6fe156475574d114393aaee8dcc9259e Binary files /dev/null and b/slides/wk07/img/behavior-change/speedometer.png differ diff --git a/slides/wk07/img/behavior-change/stepcounter.png b/slides/wk07/img/behavior-change/stepcounter.png new file mode 100644 index 0000000000000000000000000000000000000000..8ccae1efa533d286827cd8b1685e25d868824a31 Binary files /dev/null and b/slides/wk07/img/behavior-change/stepcounter.png differ diff --git a/slides/wk07/img/behavior-change/therml.png b/slides/wk07/img/behavior-change/therml.png new file mode 100644 index 0000000000000000000000000000000000000000..5a9f21011cb1aa7094d2980336e87a517cccdcb5 Binary files /dev/null and b/slides/wk07/img/behavior-change/therml.png differ diff --git a/slides/wk07/img/behavior-change/ttc.png b/slides/wk07/img/behavior-change/ttc.png new file mode 100644 index 0000000000000000000000000000000000000000..85dbaecb8294e0d57642e8d402a40d88dfa92459 Binary files /dev/null and b/slides/wk07/img/behavior-change/ttc.png differ diff --git a/slides/wk07/img/behavior-change/ubigreen-explained.png b/slides/wk07/img/behavior-change/ubigreen-explained.png new file mode 100644 index 0000000000000000000000000000000000000000..229ce0bfdc89411a311439c0697cbeacec400678 Binary files /dev/null and b/slides/wk07/img/behavior-change/ubigreen-explained.png differ diff --git a/slides/wk07/img/behavior-change/ubigreen-sequence.png b/slides/wk07/img/behavior-change/ubigreen-sequence.png new file mode 100644 index 0000000000000000000000000000000000000000..87ba1b88ba963277fc93fbbf467885dee5ffcf2e Binary files /dev/null and b/slides/wk07/img/behavior-change/ubigreen-sequence.png differ diff --git a/slides/wk07/img/behavior-change/ubigreen-system.png b/slides/wk07/img/behavior-change/ubigreen-system.png new file mode 100644 index 0000000000000000000000000000000000000000..0883880cf4dc9b90d92e49d815c66ce89bf5febd Binary files /dev/null and b/slides/wk07/img/behavior-change/ubigreen-system.png differ diff --git a/slides/wk07/img/behavior-change/ubigreen.png b/slides/wk07/img/behavior-change/ubigreen.png new file mode 100644 index 0000000000000000000000000000000000000000..5aac2bf2d689162115ee8c8d0f3565917733c826 Binary files /dev/null and b/slides/wk07/img/behavior-change/ubigreen.png differ diff --git a/slides/wk07/img/interaction/buttons.png b/slides/wk07/img/interaction/buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..26675f540854d26ee061fb0f9f81a46d9766ca14 Binary files /dev/null and b/slides/wk07/img/interaction/buttons.png differ diff --git a/slides/wk07/img/interaction/chickens.png b/slides/wk07/img/interaction/chickens.png new file mode 100644 index 0000000000000000000000000000000000000000..abe1ac534082651d0413623e7036a5bedd2ca672 Binary files /dev/null and b/slides/wk07/img/interaction/chickens.png differ diff --git a/slides/wk07/img/interaction/cnn-small-x.png b/slides/wk07/img/interaction/cnn-small-x.png new file mode 100644 index 0000000000000000000000000000000000000000..7d5ee37abfc88bf5ed09597d3b5105c4b11a3994 Binary files /dev/null and b/slides/wk07/img/interaction/cnn-small-x.png differ diff --git a/slides/wk07/img/interaction/desktop-new.png b/slides/wk07/img/interaction/desktop-new.png new file mode 100644 index 0000000000000000000000000000000000000000..be7bbd22e62f47e2bca4ed24adaee67f1565ccb8 Binary files /dev/null and b/slides/wk07/img/interaction/desktop-new.png differ diff --git a/slides/wk07/img/interaction/desktop.png b/slides/wk07/img/interaction/desktop.png new file mode 100644 index 0000000000000000000000000000000000000000..dfc1e2e0dc980cf5aa5068ccc2d444bfdea374a6 Binary files /dev/null and b/slides/wk07/img/interaction/desktop.png differ diff --git a/slides/wk07/img/interaction/feedforward.png b/slides/wk07/img/interaction/feedforward.png new file mode 100644 index 0000000000000000000000000000000000000000..20517d5296f0aacc0cd60dfe701fed9cc139ddee Binary files /dev/null and b/slides/wk07/img/interaction/feedforward.png differ diff --git a/slides/wk07/img/interaction/flat-doorknob.png b/slides/wk07/img/interaction/flat-doorknob.png new file mode 100644 index 0000000000000000000000000000000000000000..b7fa0fcc0b4a0daed1e12d9f5fdb49318a4aed07 Binary files /dev/null and b/slides/wk07/img/interaction/flat-doorknob.png differ diff --git a/slides/wk07/img/interaction/freezer-feedback.png b/slides/wk07/img/interaction/freezer-feedback.png new file mode 100644 index 0000000000000000000000000000000000000000..d29834b5265e906ceb85481ad79082036120a25b Binary files /dev/null and b/slides/wk07/img/interaction/freezer-feedback.png differ diff --git a/slides/wk07/img/interaction/fridge-freezer-controls.png b/slides/wk07/img/interaction/fridge-freezer-controls.png new file mode 100644 index 0000000000000000000000000000000000000000..29d878c73d8c7f30e5d4127561505548b96082e5 Binary files /dev/null and b/slides/wk07/img/interaction/fridge-freezer-controls.png differ diff --git a/slides/wk07/img/interaction/fridge-freezer-mental-model.png b/slides/wk07/img/interaction/fridge-freezer-mental-model.png new file mode 100644 index 0000000000000000000000000000000000000000..7eca6c06d956b7980b5281e76c1bbb41a27226a5 Binary files /dev/null and b/slides/wk07/img/interaction/fridge-freezer-mental-model.png differ diff --git a/slides/wk07/img/interaction/fridge-freezer-valve.png b/slides/wk07/img/interaction/fridge-freezer-valve.png new file mode 100644 index 0000000000000000000000000000000000000000..d367548be66857dc1edb0a88f5a0eb5e7307f16b Binary files /dev/null and b/slides/wk07/img/interaction/fridge-freezer-valve.png differ diff --git a/slides/wk07/img/interaction/gmail-snapping.gif b/slides/wk07/img/interaction/gmail-snapping.gif new file mode 100644 index 0000000000000000000000000000000000000000..66a17084941a6d03ad02d2dfa7b62446ec755b1d Binary files /dev/null and b/slides/wk07/img/interaction/gmail-snapping.gif differ diff --git a/slides/wk07/img/interaction/gym-doors.png b/slides/wk07/img/interaction/gym-doors.png new file mode 100644 index 0000000000000000000000000000000000000000..99ffb06c3f14d3adee83426b9a59dc4b1291d8c6 Binary files /dev/null and b/slides/wk07/img/interaction/gym-doors.png differ diff --git a/slides/wk07/img/interaction/knurling.png b/slides/wk07/img/interaction/knurling.png new file mode 100644 index 0000000000000000000000000000000000000000..fa34dcaa22ec90dab6cab130a5170f94c616178c Binary files /dev/null and b/slides/wk07/img/interaction/knurling.png differ diff --git a/slides/wk07/img/interaction/mental1.png b/slides/wk07/img/interaction/mental1.png new file mode 100644 index 0000000000000000000000000000000000000000..a3c23c4e46f70202c6a8117ed0607dc2f8e1f373 Binary files /dev/null and b/slides/wk07/img/interaction/mental1.png differ diff --git a/slides/wk07/img/interaction/mental2.png b/slides/wk07/img/interaction/mental2.png new file mode 100644 index 0000000000000000000000000000000000000000..58c9cc1a547ec69cd2652c456c8cb040b5e6a0bd Binary files /dev/null and b/slides/wk07/img/interaction/mental2.png differ diff --git a/slides/wk07/img/interaction/mental3.png b/slides/wk07/img/interaction/mental3.png new file mode 100644 index 0000000000000000000000000000000000000000..07a7d35cca9dbe1309fe9c5809ce3ac2e2e684d6 Binary files /dev/null and b/slides/wk07/img/interaction/mental3.png differ diff --git a/slides/wk07/img/interaction/mental4.png b/slides/wk07/img/interaction/mental4.png new file mode 100644 index 0000000000000000000000000000000000000000..1e40a86ffb987d0e45c5420bc8d87f34c46e62e0 Binary files /dev/null and b/slides/wk07/img/interaction/mental4.png differ diff --git a/slides/wk07/img/interaction/mental5.png b/slides/wk07/img/interaction/mental5.png new file mode 100644 index 0000000000000000000000000000000000000000..e8b861ac7042b4cc0b3bd2ab312ef120c1225564 Binary files /dev/null and b/slides/wk07/img/interaction/mental5.png differ diff --git a/slides/wk07/img/interaction/mental6.png b/slides/wk07/img/interaction/mental6.png new file mode 100644 index 0000000000000000000000000000000000000000..5baea3ac170bd237ee0c35101160347918f32c04 Binary files /dev/null and b/slides/wk07/img/interaction/mental6.png differ diff --git a/slides/wk07/img/interaction/mental7.png b/slides/wk07/img/interaction/mental7.png new file mode 100644 index 0000000000000000000000000000000000000000..9bb9a6c4bd2bf569e84b6de7d2d7e73f0e9ecc09 Binary files /dev/null and b/slides/wk07/img/interaction/mental7.png differ diff --git a/slides/wk07/img/interaction/messenger-bubble.gif b/slides/wk07/img/interaction/messenger-bubble.gif new file mode 100755 index 0000000000000000000000000000000000000000..77defd497891e79a775a6ca3593cf33e02d2c890 Binary files /dev/null and b/slides/wk07/img/interaction/messenger-bubble.gif differ diff --git a/slides/wk07/img/interaction/norman-d-human-action-cycle.png b/slides/wk07/img/interaction/norman-d-human-action-cycle.png new file mode 100644 index 0000000000000000000000000000000000000000..f5748a294e9e8786e3337bc8404b71364d1db0f9 Binary files /dev/null and b/slides/wk07/img/interaction/norman-d-human-action-cycle.png differ diff --git a/slides/wk07/img/interaction/round-doorknob.png b/slides/wk07/img/interaction/round-doorknob.png new file mode 100644 index 0000000000000000000000000000000000000000..8413e79008f7f0537894d637cd1810b0b460239e Binary files /dev/null and b/slides/wk07/img/interaction/round-doorknob.png differ diff --git a/slides/wk07/img/interaction/search.png b/slides/wk07/img/interaction/search.png new file mode 100644 index 0000000000000000000000000000000000000000..d5a1729071b75a1d9d7a57a6c7941c8ce6d405bb Binary files /dev/null and b/slides/wk07/img/interaction/search.png differ diff --git a/slides/wk07/img/interaction/sensor-explanation.png b/slides/wk07/img/interaction/sensor-explanation.png new file mode 100644 index 0000000000000000000000000000000000000000..54aabcd68aae660cd58fb7f222bccb24dd1ed0e5 Binary files /dev/null and b/slides/wk07/img/interaction/sensor-explanation.png differ diff --git a/slides/wk07/img/interaction/sensor.jpg b/slides/wk07/img/interaction/sensor.jpg new file mode 100644 index 0000000000000000000000000000000000000000..34ae8df13304ec11c0b7739993c0d8f13d27ca90 Binary files /dev/null and b/slides/wk07/img/interaction/sensor.jpg differ diff --git a/slides/wk07/img/interaction/virtual-buttons.png b/slides/wk07/img/interaction/virtual-buttons.png new file mode 100644 index 0000000000000000000000000000000000000000..6e7cbd65b1a64b7e9ceec6e3f49a50868aedb17c Binary files /dev/null and b/slides/wk07/img/interaction/virtual-buttons.png differ diff --git a/slides/wk07/img/interaction/virtual-knurling.png b/slides/wk07/img/interaction/virtual-knurling.png new file mode 100644 index 0000000000000000000000000000000000000000..c5e89ee2d5efdf43386d3fcdc9ba547592ce3ceb Binary files /dev/null and b/slides/wk07/img/interaction/virtual-knurling.png differ diff --git a/slides/wk07/img/interaction/web-button.png b/slides/wk07/img/interaction/web-button.png new file mode 100644 index 0000000000000000000000000000000000000000..1fa271f4371784721ce8b933ea09c800842ae15c Binary files /dev/null and b/slides/wk07/img/interaction/web-button.png differ diff --git a/slides/wk07/img/interaction/webex.png b/slides/wk07/img/interaction/webex.png new file mode 100644 index 0000000000000000000000000000000000000000..2ab83c87aa26dfdafab3eff2e7e440e1eb574a72 Binary files /dev/null and b/slides/wk07/img/interaction/webex.png differ diff --git a/slides/wk07/img/menus/Edgewrite.png b/slides/wk07/img/menus/Edgewrite.png new file mode 100644 index 0000000000000000000000000000000000000000..d667210ad2a378b2158d5ed08c97edb01efec834 Binary files /dev/null and b/slides/wk07/img/menus/Edgewrite.png differ diff --git a/slides/wk07/img/menus/Grafitti.png b/slides/wk07/img/menus/Grafitti.png new file mode 100644 index 0000000000000000000000000000000000000000..af6a460e7db587130d59a195b06160ceadbbef9d Binary files /dev/null and b/slides/wk07/img/menus/Grafitti.png differ diff --git a/slides/wk07/img/menus/alert.jpg b/slides/wk07/img/menus/alert.jpg new file mode 100644 index 0000000000000000000000000000000000000000..4fe4de37301fdc45319402cbaad9136cc8ea14ad Binary files /dev/null and b/slides/wk07/img/menus/alert.jpg differ diff --git a/slides/wk07/img/menus/alert1.jpg b/slides/wk07/img/menus/alert1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f9a48ff3e25c781d6b98b566f1d325cf0084a514 Binary files /dev/null and b/slides/wk07/img/menus/alert1.jpg differ diff --git a/slides/wk07/img/menus/facebook.png b/slides/wk07/img/menus/facebook.png new file mode 100644 index 0000000000000000000000000000000000000000..92d3ad836dedbe70081798da7ce6287a9097cbc6 Binary files /dev/null and b/slides/wk07/img/menus/facebook.png differ diff --git a/slides/wk07/img/menus/facebook2.png b/slides/wk07/img/menus/facebook2.png new file mode 100644 index 0000000000000000000000000000000000000000..f822bd03ce290e60d1f26fac0d3929c049b00958 Binary files /dev/null and b/slides/wk07/img/menus/facebook2.png differ diff --git a/slides/wk07/img/menus/histogram.png b/slides/wk07/img/menus/histogram.png new file mode 100644 index 0000000000000000000000000000000000000000..ddd96c9ea5ad7e74414f5bfd39e07df94914bbfd Binary files /dev/null and b/slides/wk07/img/menus/histogram.png differ diff --git a/slides/wk07/img/menus/menu.png b/slides/wk07/img/menus/menu.png new file mode 100644 index 0000000000000000000000000000000000000000..9116a28ebb90342f5fe20ad2d4f65de129cdd799 Binary files /dev/null and b/slides/wk07/img/menus/menu.png differ diff --git a/slides/wk07/img/menus/menus-data.png b/slides/wk07/img/menus/menus-data.png new file mode 100644 index 0000000000000000000000000000000000000000..f302bbe8693d7b7c6b7bee1b86bac38cceef22ac Binary files /dev/null and b/slides/wk07/img/menus/menus-data.png differ diff --git a/slides/wk07/img/menus/pie.jpg b/slides/wk07/img/menus/pie.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c8cf9639f66f1fda66da123cc15ed99b51689da5 Binary files /dev/null and b/slides/wk07/img/menus/pie.jpg differ diff --git a/slides/wk07/interaction.html b/slides/wk07/interaction.html new file mode 100644 index 0000000000000000000000000000000000000000..62124801a0d5feb3487345e5238559f80085d8a3 --- /dev/null +++ b/slides/wk07/interaction.html @@ -0,0 +1,535 @@ +--- +layout: presentation +title: Interactive Application Design +description: Description of principals for creating an understandable application +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Interactive Application Design + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout: false +# Fitts' Law Revisited + +Example of how Marking Menus are used in practice (Maya) +![:youtube Example of marking menu in Maya, r8PQy8cX9dc] + +--- +# Fitts' Law Revisited + +.left-column-half[ + +] + +.right-column-half[ +- Fitts' Law can be employed to help users be more productive by allowing them to interact with items easier. +- How is the CNN marketing group using Fitts' law in this situation? +] +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Design Principles and Metaphors + +--- +layout: false + +# Hall of Shame/Hall of Fame + +.left-column[ +Is this physical or virtual? Ubicomp! + + +] + +.right-column[ + +] + +??? + +- Realworld example, fails to work effectively. +- Sign found right next to the fountain. Also sign on the fountain. +- Good or bad example of interface design? Do you normally have to read instructions to use a water fountain? +- What about an IR faucet? +- Often, person using the interface feels stupid or that they shouldn't use it +- Who can use your interface and who can't. As designers you have the power to make an interfaace usable. + + +--- +[//]: # (Outline Slide) +# Today's goals + +- Metaphor +- Creating good mental models +- Design Tips for Interaction Design + - Feedback + - Feedforward + +--- +# Metaphor + +.right-column[ +Lakoff & Johnson, Metaphors We Live By + +.quote[“...the way we think, what we experience,and what we do every day +is very much a matter of metaphor.†] +] +--- +# Metaphor + +.left-column[ + +] + +.right-column[ + +Have you ever noticed how many chicken metaphors are in the English language? + +.font-small[ +- “A hen is only an egg's way of making another egg.†- Samuel Butler +- “The key to everything is patience. You get the chicken by hatching the egg, not by smashing it.†- unknown +- "Regard it as just as desirable to build a chicken house as to build a cathedral." - Frank Lloyd Wright +- "A chicken in every pot" - 1928 Republican Party campaign slogan +- "Don't have a pot to put it in" - 1928 Democratic Party response slogan +- Nest egg - to save a little money each week +- Scratching out a living - to earn enough to get by on +- Don't count your chickens before they hatch - don't plan on an outcome before it actually happens. +- Don't put all your eggs in one basket - don't plan on an outcome before it actually happens. +- Feather your nest - saving for the future +- Mother hen - very protective +- Flew the coop - gone +- Walking on eggshells- treading softly where certain people are concerned; trying not to upset someone +- Like a chicken with it's head cut off - running around with no direction +- You're chicken! - being afraid +- Hard-boiled - tough attitude +- Ruffle your feathers - something annoys you +- No spring chicken - you're old. Plain and simple. +- Hatch an idea - put a plan into motion +- Pecking order - finding your place +- Brood over it - to worry; to hover over a problem +- Chicken scratch - poor handwriting +- Stick your neck out - go to bat for someone else +- Stuck in your craw - upset about something and won't verbalize what's going on inside you; carrying a grudge. +- Bad egg - less than honest person; poor moral standards +- In a stew - got yourself in trouble +- Raise your hackle feathers - visibly annoyed +- Nesting behavior- preparing a home (especially pregnant women just before a baby is due) +- Empty nest syndrome - depression and loneliness when children leave home +- Made from scratch - made from raw materials by hand +]] + +--- +# Desktop Metaphor (Magic Cap) +.body[ + + +Critique! + +] +??? +- Is this a good interface or not? +- What are some of the challenges of this? + - Unwieldy, + - Not great use of screen real estate + - Other? +--- +# Are these better? + +.left-column-half[ + +] + +.right-column-half[ + + + +] + +.footnote[[Packard Bell Planet Wiki](http://pbclub.pwcsite.com/wiki/index.php/Packard_Bell_Navigator), +[reddit](https://www.reddit.com/r/nostalgia/comments/6w951x/packard_bell_navigators_kidspace/)] + + +--- +# Is this a better option? + +.right-column-half[ + +Can use metaphors to leverage existing conceptual models + +- Not really an attempt to simulate a real desktop +- Leverages existing knowledge about files, folders, trash +- A way to explain why some windows seem blocked +] + +.left-column-half[ + +] + +--- +# How else can we minimize errors? +??? +Key concept: mental models +--- +.left-column[ +# Every system has at least 3 different models +] + +.right-column[ +<div class="mermaid"> +graph TD + S[System Image: <br>Your Implementation ] --> |System Feedback | U[User Model: How the user thinks <br>the system works] + D[Design Model: How you <br>intend the system to work ]-->S + U -->|User Feedback | S +</div> + +] + +--- +# Relating the Human and the Interaction + + + +.left-column-half[ + + + +] + +-- + +.right-column-half[ + +] + +.footnote[[Don Norman, When Three World Collide: A model of the Tangible Interaction Process, 2009](https://www.researchgate.net/publication/221332102_When_three_worlds_collide_A_model_of_the_tangible_interaction_process)] + +??? +Note to instructors: Need to change image to mermaid + + +--- +# Relating the Human and the Interaction + + +.left-column-half[ +<br> +<br> + +**Gulf of Execution** is the user's belief in functions the system _doesn't have_ + - This is the users 'error' region + +**Gulf of Evaluation** is where the user _doesn't realize the system HAS a functionality_. +] + + +.right-column-half[ + +] + +--- + +# Model of Mental Models + + + +--- +# Model of Mental Models + + + +--- +# Model of Mental Models + + + +--- +# Model of Mental Models + + + + +--- +# Model of Mental Models + + + +--- +# Model of Mental Models + +.left-column50[ + + +] + +.right-column50[ +- Where are the gulf of evaluation and gulf of execution in this + image? +] + +-- +.right-column50[ +- Gulf of execution is the user 'error' region (user requests + function the __system DOESNT HAVE__), gulf of + evaluation is when the user __doesn't realize the system HAS a + functionality__. + +- How does an undo feature help the user bridge them? +] +--- +# Model of Mental Models + +What happens when the user does something they think is core but is really not supported? + + + +-- + +.right-column50[ +- Need to undo! +] + + +--- +# Refridgerator/Freezer Example + +.left-column[ +<div class="mermaid"> + graph LR + F[Freezer<br><br>] + Fr[Fridge <br><br><br><br><br><br><br><br>] + +</div> +] + +.right-column[ +Problem: +- Freezer too cold +- Fridge just right +] + +--- +# Refridgerator/Freezer Goal +.left-column-half[ + +] + +-- + +.right-column-half[ +Goal: +- Want to make the freezer warmer +- Want the refridgerator to stay the same temperature +] + +.footnote[Don Norman, Design of Everyday Things] + +--- + +# Refridgerator/Freezer Mental Model +.left-column-half[ + +] + +-- + +.right-column-half[ +Mental model: +- Fridge control controls fridge temperature +- Freezer control controls freezer temperature +] + +.footnote[Don Norman, Design of Everyday Things] + +--- +# Refridgerator/Freezer System Model +.left-column-half[ + +] + +.right-column-half[ +Valve controls the flow of cold air from one cooling unit. +] + +.footnote[Don Norman, Design of Everyday Things] +--- +# Refridgerator/Freezer Feedback +.left-column-half[ + +] + +.right-column-half[ +24 HOURS?!??! +] + +.footnote[Don Norman, Design of Everyday Things] +--- + +Design Tip #1: Consistency is Critical + +.left-column[ +What mental model error is this likely to create? +] + +.right-column[ + +] + +--- +# Causes of Gulf of Evaluation + +What can cause a user's Gulf of Evaluation? + +-- +- Hard to understand visual feedback +- Poor use of colors +- Bad layout, poor grouping +- Unfamiliar display of information +- Unfamiliar design patterns, or doesn’t follow convention +- Forcing people to remember lots of things +- Lack of feedback in response to inputs +- Might not see visual updates +- Can’t find info on screen +- Might look same as unimportant +- Irrelevant info on screen / important info missing + +??? +Recall: the user _doesn't realize the system HAS a functionality_. + +--- +# Causes of Gulf of Execution + +What can cause a user's Gulf of Execution? + +-- +- Unfamiliar devices and inputs +- Don’t know what is possible +- Unfamiliar GUI components +- Solvable with experience +- Unfamiliar interaction patterns +- Also solvable with experience +- Example patterns: Dialogs, Shopping Carts + +??? +Recall: the user's belief in functions the system _doesn't have_ + +--- +# Affordances + +Good Affordance| Bad Affordance +----|---- + |  + +Well-designed objects have affordances +- Clues to their operation that are readily apparent +- Often visual, but not always (e.g., speech) +- Allows and promotes certain actions + + +??? +Opportunities to act which are readily apparent to the user ... and +appropriate to the user’s abilities + +Form “affords†certain actions and makes that apparent +--- +Design Tip #2: Use *Affordances* to minimize errors + +Action | Physical Affordance | Virtual Affordance | Minimal Design +----|----|----|---- +Gripping |  |  +Pushing |  | | +Search |  ||  + + +??? +Knurling: increases friction/affords gripping + +don't kneed to know the word to get it + +--- +Design Tip #3: Make the Conceptual Model Visible + +Explicitly design a conceptual model + +Use affordance and feedback (and everything else you have) to reinforce it + +--- +# Feedback + +Response by the system to the actions of the user – Cause and effect + +Essential for forming mental models + +Makes “system state†visible + +Messenger Feedback | and | Gmail Feedback +----|----|---- +|| +] + +--- +# Feed Forward + +.right-column[ +What will happen if you execute action +- Ex. Web page mouseover +- Ex. Word processing I-bar +- Ex. Label on a button + +Help people predict what will happen +- Need feedforward at all scales +- GUI widgets will handle basic feedforward +- Don’t forget feedforward for screens +] + +.left-column[ + +] + +--- +# Revisit: What is this an example of? + +.left-column[ +Is this physical or virtual? Ubicomp! + + +] + +.right-column[ + +] +--- +# Application Design Tips + +- Design Tip #1: Consistency is Critical +- Design Tip #2: Use *Affordances* to minimize errors +- Design Tip #3: Make the Conceptual Model Visible diff --git a/slides/wk07/menus.html b/slides/wk07/menus.html new file mode 100644 index 0000000000000000000000000000000000000000..e11bc0995ffa85bfb642245384168fa3a13d4823 --- /dev/null +++ b/slides/wk07/menus.html @@ -0,0 +1,872 @@ +--- +layout: presentation +title: Interaction Technique Design --Week 7, Wednesday-- +description: Description of Interaction Technique Design +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +layout:false + +# Why is selection (and testing) important .red[*] +.left-column50[ + + +] +-- +.right-column50[ + +] + +.footnote[.red[*] [Washington Post Article](https://www.washingtonpost.com/news/morning-mix/wp/2018/01/16/that-was-no-wrong-button-in-hawaii-take-a-look/?utm_term=.1848969db923) +] +--- +class: center, middle, inverse + +# Interaction Technique Design + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout: false + +[//]: # (Outline Slide) +# Today's Agenda +- Administrivia + - ColorPicker due at 10pm + - Practice quizzes (there are 2) due Wednesday 10pm + - Menus to be released tonight + - Examlet Friday +- Introducing key concepts for menus assignment +- Using key properties of people to predict design outcomes + +--- +# Menus Assignment + +Goal: to compare pie menus, linear menus, and a custom menu you make! + +We provide support for running the experiment in MainActivity (and a testing harness in TestActivity) + +You implement a variety of menus + +--- +# Menus Assignment + +<div class="mermaid"> +classDiagram + +class MenuExperimentView { + onTouchEvent() + startSelection() + endSelection() + updateModel() + onDraw() +} + + +AbstractMenuExperimentView <|-- MenuExperimentView + +AbstractMainActivity <|-- MainActivity +AbstractMainActivity <|-- TestActivity +MenuExperimentView <|-- PieMenuView +MenuExperimentView <|-- NormalMenuView +MenuExperimentView <|-- CustomMenuView + + +</div> + +--- + +# What is a Menu in theory? + +??? +- Supports selection of an item from a fixed set of options +- Options are set and determined in advance +- Typically used for “commands†(verbs, things to do) +- Occasionally for selecting a value (e.g., picking a font) + +-- +.left-column-half[ +- Supports selection of an item from a fixed set of options +- Options are set and determined in advance +- Typically used for “commands†(verbs, things to do) +- Occasionally for selecting a value <br> (e.g., picking a font) +] +-- +<div class="mermaid"> +graph TD +S((.)) --> A(Start) +A -- "Press?startSelection()" --> I(Selecting) +I -- "Release:endSelection()" --> E[End] +I -- "Drag:updateModel()" --> I + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +class S invisible +class A start +class E finish +class I normal +</div> + +??? + +Implemented in MenuExperimentView + +Works in all Menus! + +--- + +# What is a Menu in theory? + +.left-column-half[ +- Supports selection of an item from a fixed set of options +- Options are set and determined in advance +- Typically used for “commands†(verbs, things to do) +- Occasionally for selecting a value <br> (e.g., picking a font) + +Implemented in MenuExperimentView + +Works in all Menus! +] + +<div class="mermaid"> +graph TD +S((.)) --> A(Start) +A -- "Press?startSelection()" --> I(Selecting) +I -- "Release:endSelection()" --> E[End] +I -- "Drag:updateModel()" --> I + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +class S invisible +class A start +class E finish +class I normal +</div> + + +--- +# Aside: Enums + +.left-column-half[ +Group of named constants + +- Used for PPS in ColorPicker (PPS States; Essential Geometry) + +- Used for PPS in Menu assignment *and* for experimental conditions + +- Easy to inspect if you want to (can use to determine possible states, number items, etc) + +[Documentation](https://docs.oracle.com/javase/tutorial/java/javaOO/enum.html) +] +.right-column-half[ +<div class="mermaid"> +classDiagram + +class TaskType { + LINEAR + RELATIVE + UNCLASS +} + +class State { + START + SELECTING +} + +class MenuType { + NORMAL + PIE + CUSTOM +} + +</div> + +] + +--- +# How do we draw a menu? + +.left-column30[ +<br> +<div class="mermaid"> +classDiagram + +MenuExperimentView <|.. PieMenuView : onDraw translates and calls drawMenu + +class PieMenuView { + Canvas: 0,0 at first touch point. + Clipping rect: Whole screen + drawMenu() +} + +class MenuExperimentView { + Canvas : 0,0 at top left of screen; + Clipping rect: Whole screen + onDraw() translate +} +</div> +] + +.right-column60[ +- Important! MenuExperimentView set to `MATCH_PARENT` + - Makes drawing tricky! +- Translate (like a parent view does for children) +- `onDraw` in `MenuExperimentView` calls `drawMenu` in child classes. +] + +-- +.right-column60[ + +Do we have to rotate/translate the `Canvas` back? +] + +-- + +.right-column60[ +We don't strictly have to rotate or translate back because this is +an inheritance drawing trick, not an interactor hierarchy drawing implementation +] + +--- +# Aside: Custom Listeners + +- Used in ColorPicker and Menus + +- Why create custom listeners? + +-- + - Lets you execute code when the view's model has changed + - No other way to know that has happened + +--- +# Review: How to implement custom listeners + +The Custom View needs to +- define the custom interface +- keep track of listeners + +-- +Anything *using* the view needs to +- implement the interface (specifically, the method in that interface that will be called) +- register itself as a listener with the view + +--- +# Example Custom View -- ColorPicker + +In ColorPicker, we setup the Custom View side for you + +```java + // Currently registered ColorListener instance or null. + private List<ColorChangeListener> mColorChangeListeners; + + // Class which defines a listener to be called when a new color is selected. + public interface ColorChangeListener { + void onColorSelected(@ColorInt int color); + } + + // Registers a new listener + public final void addColorChangeListener(@NonNull ColorChangeListener colorChangeListener) { + mColorChangeListeners.add(colorChangeListener); + } +``` + +--- +# Example Custom Listener -- ColorPicker: + +You implemented this + +.left-column-half[ +``` +// TODO: Register callback to update {color,label} +// View when color changed.` +``` + +What method do we call to register the callback? <br>`addColorChangeListener()` + +] +.right-column-half[ +<div class="mermaid"> +classDiagram +MainActivity ..> ColorPickerView : addColorChangeListener() +MainActivity --> ColorChangeListener : Contains +class ColorChangeListener { + onColorChanged() +} +class ColorPickerView { + addColorChangeListener() +} +class MainActivity { + ColorPickerView view +} + +</div> +] +--- +# Example Custom Listener -- ColorPicker: + +You implemented this + +.left-column-half[ +``` +// TODO: Register callback to update {color,label} +// View when color changed.` +``` + +What method do we call to register the callback? `addColorChangeListener()` + +What do we usually do in a callback? <br>update application's (`MainActivity`) model +] +.right-column-half[ +<div class="mermaid"> +classDiagram +ColorPickerView ..> ColorChangeListener : onColorChanged() +ColorChangeListener ..> MainActivity : update model + +class ColorChangeListener { + onColorChanged() +} + +class MainActivity { + ColorPickerView view +} +</div> +] + +--- +# You will do this yourself in Menus + +```java +// TODO: register a new listener with the menu so that the application knows when a selection is made + +// TODO: implement the listener. When the user completes a trial, the menu listener should store +// the results of the trial, and setup for the next trial +``` + +--- +class: center, middle, inverse + +# Experimenting with Interfaces + +Important part of building interfaces is experimenting + +Need structured ways to decide what's better + +--- +# Experiments should be tied to *hypotheses* based on *theories* what will go better + +- Fitts Law (compare distance and size; check for infinite size) +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- Gestalt Psychology (will they see it at all?) +- Errors (will they be reduced) + +??? +why theory and not intuition? + +--- +# Which is better and which laws explain it? +.left-column50[ +## A. Pie Menu + +] +.right-column50[ +## B. Pull down Menu + +] +??? + +What analysis methods can we use to predict? + +- Fitts Law (compare distance and size; check for infinite size) +- *Steering Law* (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- Gestalt Psychology (will they see it at all?) +- Errors (will they be reduced) + +--- +# Steering Law (based on Fitts' law) +.left-column50[ +## A. Pie Menu + +] +.right-column50[ +## B. Pull down Menu + +] + +--- +# Which is better and which law explains it? +.left-column50[ +## A. Pie Menu + +] +.right-column50[ +## B. Marking Menu +![:youtube Video assigned before class, 8c58bN6ajJ4?t=30] +] +??? + +- Fitts Law (compare distance and size; check for infinite size) +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - **Does someone have to 'check' something? More than once?** + - **Do they have to move? More than once** +- Gestalt Psychology (will they see it at all?) +- Errors (will they be reduced) +--- +# Cognitive modeling (less double checking) + +.left-column50[ +## A. Pie Menu + +] +.right-column50[ +## B. Marking Menu +![:youtube Video assigned before class, 8c58bN6ajJ4?t=30] +] + +--- +# Which is better and which laws explain it? + +A: Tapping B: Crossing +![:youtube Video of using crossing for selection, kp2Zl4ONuik] + +??? + +- **Fitts Law (compare distance and size; check for infinite size)** +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- Gestalt Psychology (will they see it at all?) +- Errors (will they be reduced) + +--- +# Fitts' Law (infinite width) + +A: Tapping B: Crossing +![:youtube Video of using crossing for selection, kp2Zl4ONuik] + +--- +# Which is better and which laws explain it? +.left-column50[ +## A. + + +] +.right-column50[ +## B. + + + +] +??? + +- Fitts Law (compare distance and size; check for infinite size) +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- Gestalt Psychology (will they see it at all?) +- **Errors (will they be reduced)** +--- +# Errors (better physical feedback during motor task) + +.left-column50[ +## A. + + +] +.right-column50[ +## B. + + + +] + +--- +# Which is better and which laws explain it? + +.left-column50[ +## A. + +] +.right-column50[ +## B. + + +] +??? + +- Fitts Law (compare distance and size; check for infinite size) +- Steering Law (distance and size over a path) +- Cognitive modeling (complex multi-step model of expert behavior) + - Does someone have to 'check' something? More than once? + - Do they have to move? More than once +- **Gestalt Psychology (group?)** +- **Errors (will they be reduced)** +--- +# Gestalt Psychology (better grouping strategies) + +.left-column50[ +## A. + +] +.right-column50[ +## B. + + +] + +--- +# Back to comparing menus + +Kurtenbach: What did they study here? + +![:youtube Illustration of advantages of marking menus,dtH9GdFSQaw] + +--- +# How do we prove our theories? Hypothesis + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis(Hypothesis) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; + + +class S invisible +class Hypothesis start +</div> + +Discuss + +-- + +Marking Menus are better than Pie Menus + +-- +Marking Menus are *faster* than Pie Menus + +-- +Pie Menus are faster than Linear Menus for less than 8 items that have no obvious order + +--- +.left-column-half[ +# What conditions does this experiment have? + + +`MenuType` + +`TaskType` (could be a condition) +] +.right-column-half[ +# What might we measure? (from POP-Motor) +] +-- +.right-column-half[ +- Time on Task +- Accuracy +- How strenuous +- Recall +- Emotional Response + +] + +<!-- --- --> +<!-- # Classes that handle experimentation --> + +<!-- We provide most of the implementation for this --> + +<!-- <div class="mermaid"> --> +<!-- classDiagram --> + +<!-- class MainActivity { --> +<!-- showMenuForTrial() --> +<!-- } --> +<!-- class AbstractMainActivity { --> +<!-- clearCSV() --> +<!-- } --> +<!-- class MainActivity { --> +<!-- showMenuForTrial() --> +<!-- } --> +<!-- class TestActivity { --> +<!-- showMenu() --> +<!-- } --> + +<!-- class TrialListener { --> +<!-- onTrialCompleted() --> +<!-- } --> + +<!-- AbstractMainActivity <|-- MainActivity --> +<!-- AbstractMainActivity <|-- TestActivity --> + +<!-- class ExperimentSession { --> +<!-- createTrials() --> +<!-- getNext() --> +<!-- next() --> +<!-- } --> + +<!-- </div> --> + + +--- +# How do we prove our theories? Method + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis(Hypothesis) +Hypothesis -- "Study Design" --> Method(Method) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; + + +class S invisible +class Hypothesis start +class Method normal +</div> + +Compare specific conditions + +| MenuType | 8 items | 12 items | +|----------|---------|----------| +| Linear | | | +| Pie | | | +| Marking | | | + +What if we wanted to do length AND ordered vs not? + +Want to consider every combination, or run twice (menuType x length and menuType x ordering) + +--- +# How do we prove our theories? Data + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis(Hypothesis) +Hypothesis -- "Study Design" --> Method(Method) +Method -- "Run Study" --> Data(Data) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; + + +class S invisible +class Hypothesis start +class Method,Data normal +</div> + +What might we want to measure? + +-- +- Time on task -- how long to complete basic tasks? (For example, find something to buy, create a new account, and order the item.) + +-- +- Accuracy -- How many mistakes did people make? (And were they fatal or recoverable with the right information?) + +-- +- How strenuous (e.g. gaze has lower throughput but is less strenuous than head pointing (Mackenzie 2018) + +-- +- Recall -- How much does the person remember afterwards or after periods of non-use? + +-- +- Emotional Response -- How does the person feel about the tasks completed? (Confident? Stressed? Would the user recommend this system to a friend?) + +??? +Build up a list of good UI design principals from these basics + +Undo +Predictability +... What is missing? (e.g. fun) +--- +# How to get such data? + +- Video +- Timestamps +- Notes +- Can transcribe and analyze interviews with users +- Can look for patterns across users + +--- +# How do we prove our theories? Analysis + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis(Hypothesis) +Hypothesis -- "Study Design" --> Method(Method) +Method -- "Run Study" --> Data(Data) +Data -- "Clean and Prep" --> Analysis(Analysis) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; + + +class S invisible +class Hypothesis start +class Method,Data,Analysis normal +</div> + + + +--- +# How do we prove our theories? Conclusions + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis(Hypothesis) +Hypothesis -- "Study Design" --> Method(Method) +Method -- "Run Study" --> Data(Data) +Data -- "Clean and Prep" --> Analysis(Analysis) +Analysis --> Conclusions(Conclusions) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; +linkStyle 4 stroke-width:4px; + +class S invisible +class Hypothesis,Conclusions start +class Method,Data,Analysis normal +</div> + + + + + +--- +# Design an experiment + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis(Hypothesis) +Hypothesis -- "Study Design" --> Method(Method) +Method -- "Run Study" --> Data(Data) +Data -- "Clean and Prep" --> Analysis(Analysis) +Analysis --> Conclusions(Conclusions) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; +linkStyle 4 stroke-width:4px; + +class S invisible +class Hypothesis,Conclusions start +class Method,Data,Analysis normal +</div> + +.left-column50[ +## A. + +] +.right-column50[ +## B. + +] + +??? +Hypothesis: Errors (will they be reduced) +Method:?? +Data:?? +Analysis?? +Conclusions?? + +--- +# Design an experiment + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis(Hypothesis) +Hypothesis -- "Study Design" --> Method(Method) +Method -- "Run Study" --> Data(Data) +Data -- "Clean and Prep" --> Analysis(Analysis) +Analysis --> Conclusions(Conclusions) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; +linkStyle 4 stroke-width:4px; + +class S invisible +class Hypothesis,Conclusions start +class Method,Data,Analysis normal +</div> + +.left-column50[ +## A. Pie Menu + +] +.right-column50[ +## B. Pull down Menu + +] + +??? + +Hypothesis: Errors will be reduced; +Hypothesis: Motion will be faster due to low level motor things +Hypothesis: fewer cognitive checks needed +Method:?? +Data:?? +Analysis?? +Conclusions?? diff --git a/slides/wk07/slides22 - persuasive tech copy.pdf b/slides/wk07/slides22 - persuasive tech copy.pdf new file mode 100644 index 0000000000000000000000000000000000000000..6eaf11a25a0f3b1e404c2eb54823c09b195efdb3 Binary files /dev/null and b/slides/wk07/slides22 - persuasive tech copy.pdf differ diff --git a/slides/wk08/img/studies/chart.png b/slides/wk08/img/studies/chart.png new file mode 100644 index 0000000000000000000000000000000000000000..51340bdc387fdb4390c0dc45310c8c853a29ea6a Binary files /dev/null and b/slides/wk08/img/studies/chart.png differ diff --git a/slides/wk08/img/studies/import.png b/slides/wk08/img/studies/import.png new file mode 100644 index 0000000000000000000000000000000000000000..a8e25213ae79c9f00bb100df23d69fa375602803 Binary files /dev/null and b/slides/wk08/img/studies/import.png differ diff --git a/slides/wk08/img/studies/raw.png b/slides/wk08/img/studies/raw.png new file mode 100644 index 0000000000000000000000000000000000000000..369cb3f5dfd935cc8f5c8bd32592cd67627e3001 Binary files /dev/null and b/slides/wk08/img/studies/raw.png differ diff --git a/slides/wk08/img/studies2/cagelation.png b/slides/wk08/img/studies2/cagelation.png new file mode 100644 index 0000000000000000000000000000000000000000..2e41c1d7acd62d868f2df55f859d29fd9fb73bfe Binary files /dev/null and b/slides/wk08/img/studies2/cagelation.png differ diff --git a/slides/wk08/img/studies2/chart.png b/slides/wk08/img/studies2/chart.png new file mode 100644 index 0000000000000000000000000000000000000000..51340bdc387fdb4390c0dc45310c8c853a29ea6a Binary files /dev/null and b/slides/wk08/img/studies2/chart.png differ diff --git a/slides/wk08/img/studies2/correlation-cartoon.png b/slides/wk08/img/studies2/correlation-cartoon.png new file mode 100644 index 0000000000000000000000000000000000000000..1242708b466c0531b9effa97b1a572c70e044d2f Binary files /dev/null and b/slides/wk08/img/studies2/correlation-cartoon.png differ diff --git a/slides/wk08/img/studies2/correlation-demo.png b/slides/wk08/img/studies2/correlation-demo.png new file mode 100644 index 0000000000000000000000000000000000000000..c28ef774a0faf9eb1501765e37934af5674713b1 Binary files /dev/null and b/slides/wk08/img/studies2/correlation-demo.png differ diff --git a/slides/wk08/img/studies2/correlation.png b/slides/wk08/img/studies2/correlation.png new file mode 100644 index 0000000000000000000000000000000000000000..c69cafbf23b3485a7c324f03ea4a19ce20e85e4a Binary files /dev/null and b/slides/wk08/img/studies2/correlation.png differ diff --git a/slides/wk08/img/studies2/histogram.png b/slides/wk08/img/studies2/histogram.png new file mode 100644 index 0000000000000000000000000000000000000000..6f7e8740d3aa89ea7208ad05269baf77df275f25 Binary files /dev/null and b/slides/wk08/img/studies2/histogram.png differ diff --git a/slides/wk08/img/studies2/normal-only.png b/slides/wk08/img/studies2/normal-only.png new file mode 100644 index 0000000000000000000000000000000000000000..a699b9b891468b7eb9e624d6f630908fc60df575 Binary files /dev/null and b/slides/wk08/img/studies2/normal-only.png differ diff --git a/slides/wk08/img/studies2/pie-only.png b/slides/wk08/img/studies2/pie-only.png new file mode 100644 index 0000000000000000000000000000000000000000..b9ec62ba9f84f0178670efd4e34c5b436b7a4488 Binary files /dev/null and b/slides/wk08/img/studies2/pie-only.png differ diff --git a/slides/wk08/img/studies2/pivot1.png b/slides/wk08/img/studies2/pivot1.png new file mode 100644 index 0000000000000000000000000000000000000000..bca708fc3cd0e423730c0035e723a48999a08cd7 Binary files /dev/null and b/slides/wk08/img/studies2/pivot1.png differ diff --git a/slides/wk08/img/studies2/pivot2.png b/slides/wk08/img/studies2/pivot2.png new file mode 100644 index 0000000000000000000000000000000000000000..097489384473e677bf085338864849c35fcc3300 Binary files /dev/null and b/slides/wk08/img/studies2/pivot2.png differ diff --git a/slides/wk08/img/studies2/priors.png b/slides/wk08/img/studies2/priors.png new file mode 100644 index 0000000000000000000000000000000000000000..780996fe4bd6e438d726e9ba3b13f7dcc48ab919 Binary files /dev/null and b/slides/wk08/img/studies2/priors.png differ diff --git a/slides/wk08/img/studies2/samples1.png b/slides/wk08/img/studies2/samples1.png new file mode 100644 index 0000000000000000000000000000000000000000..49501eff4390ef68cf89dcc87031daece7975bea Binary files /dev/null and b/slides/wk08/img/studies2/samples1.png differ diff --git a/slides/wk08/img/studies2/samples2.png b/slides/wk08/img/studies2/samples2.png new file mode 100644 index 0000000000000000000000000000000000000000..7964a305be364fdd74536c64219dfdfbc0e281d7 Binary files /dev/null and b/slides/wk08/img/studies2/samples2.png differ diff --git a/slides/wk08/img/studies2/samples3.png b/slides/wk08/img/studies2/samples3.png new file mode 100644 index 0000000000000000000000000000000000000000..386bfcdd2dc112661ae57d9f1ea603ddbac4211f Binary files /dev/null and b/slides/wk08/img/studies2/samples3.png differ diff --git a/slides/wk08/img/studies2/samples4.png b/slides/wk08/img/studies2/samples4.png new file mode 100644 index 0000000000000000000000000000000000000000..c7964ba49e0f2a6daa9437d6dfb2da9e29ea37e8 Binary files /dev/null and b/slides/wk08/img/studies2/samples4.png differ diff --git a/slides/wk08/img/studies2/samples5.png b/slides/wk08/img/studies2/samples5.png new file mode 100644 index 0000000000000000000000000000000000000000..386bfcdd2dc112661ae57d9f1ea603ddbac4211f Binary files /dev/null and b/slides/wk08/img/studies2/samples5.png differ diff --git a/slides/wk08/img/studies2/samples6.png b/slides/wk08/img/studies2/samples6.png new file mode 100644 index 0000000000000000000000000000000000000000..a0c4949d6f4f5ef9623036312aaf19f4fb6b718a Binary files /dev/null and b/slides/wk08/img/studies2/samples6.png differ diff --git a/slides/wk08/img/studies2/samples7.png b/slides/wk08/img/studies2/samples7.png new file mode 100644 index 0000000000000000000000000000000000000000..c34a788058ea4c3f244c3e7c03684dd6d2b27594 Binary files /dev/null and b/slides/wk08/img/studies2/samples7.png differ diff --git a/slides/wk08/img/undo/callbacks.png b/slides/wk08/img/undo/callbacks.png new file mode 100644 index 0000000000000000000000000000000000000000..72147534bc5ba07de7a95ffe479f5505d65814f4 Binary files /dev/null and b/slides/wk08/img/undo/callbacks.png differ diff --git a/slides/wk08/img/undo/callbacks2.png b/slides/wk08/img/undo/callbacks2.png new file mode 100644 index 0000000000000000000000000000000000000000..37eeff1f958d4f711faf7ce2af0ceb9736121957 Binary files /dev/null and b/slides/wk08/img/undo/callbacks2.png differ diff --git a/slides/wk08/img/undo/callbacks3.png b/slides/wk08/img/undo/callbacks3.png new file mode 100644 index 0000000000000000000000000000000000000000..c7c5e1de7d5c73ca13b8e95df99735ce5aeec7fa Binary files /dev/null and b/slides/wk08/img/undo/callbacks3.png differ diff --git a/slides/wk08/img/undo/flatland-roads.png b/slides/wk08/img/undo/flatland-roads.png new file mode 100644 index 0000000000000000000000000000000000000000..77655503c0c8225654cb4f6422960727363bcfd4 Binary files /dev/null and b/slides/wk08/img/undo/flatland-roads.png differ diff --git a/slides/wk08/img/undo/flatland.png b/slides/wk08/img/undo/flatland.png new file mode 100644 index 0000000000000000000000000000000000000000..60c84737008f5acfa50d6a39be07a439ef2fc372 Binary files /dev/null and b/slides/wk08/img/undo/flatland.png differ diff --git a/slides/wk08/img/undo/gym-doors.png b/slides/wk08/img/undo/gym-doors.png new file mode 100644 index 0000000000000000000000000000000000000000..99ffb06c3f14d3adee83426b9a59dc4b1291d8c6 Binary files /dev/null and b/slides/wk08/img/undo/gym-doors.png differ diff --git a/slides/wk08/img/undo/mental1.png b/slides/wk08/img/undo/mental1.png new file mode 100644 index 0000000000000000000000000000000000000000..a3c23c4e46f70202c6a8117ed0607dc2f8e1f373 Binary files /dev/null and b/slides/wk08/img/undo/mental1.png differ diff --git a/slides/wk08/img/undo/mental2.png b/slides/wk08/img/undo/mental2.png new file mode 100644 index 0000000000000000000000000000000000000000..58c9cc1a547ec69cd2652c456c8cb040b5e6a0bd Binary files /dev/null and b/slides/wk08/img/undo/mental2.png differ diff --git a/slides/wk08/img/undo/mental3.png b/slides/wk08/img/undo/mental3.png new file mode 100644 index 0000000000000000000000000000000000000000..07a7d35cca9dbe1309fe9c5809ce3ac2e2e684d6 Binary files /dev/null and b/slides/wk08/img/undo/mental3.png differ diff --git a/slides/wk08/img/undo/mental4.png b/slides/wk08/img/undo/mental4.png new file mode 100644 index 0000000000000000000000000000000000000000..1e40a86ffb987d0e45c5420bc8d87f34c46e62e0 Binary files /dev/null and b/slides/wk08/img/undo/mental4.png differ diff --git a/slides/wk08/img/undo/mental5.png b/slides/wk08/img/undo/mental5.png new file mode 100644 index 0000000000000000000000000000000000000000..e8b861ac7042b4cc0b3bd2ab312ef120c1225564 Binary files /dev/null and b/slides/wk08/img/undo/mental5.png differ diff --git a/slides/wk08/img/undo/mental6.png b/slides/wk08/img/undo/mental6.png new file mode 100644 index 0000000000000000000000000000000000000000..5baea3ac170bd237ee0c35101160347918f32c04 Binary files /dev/null and b/slides/wk08/img/undo/mental6.png differ diff --git a/slides/wk08/img/undo/mental7.png b/slides/wk08/img/undo/mental7.png new file mode 100644 index 0000000000000000000000000000000000000000..9bb9a6c4bd2bf569e84b6de7d2d7e73f0e9ecc09 Binary files /dev/null and b/slides/wk08/img/undo/mental7.png differ diff --git a/slides/wk08/img/undo/norman-d-human-action-cycle.png b/slides/wk08/img/undo/norman-d-human-action-cycle.png new file mode 100644 index 0000000000000000000000000000000000000000..f5748a294e9e8786e3337bc8404b71364d1db0f9 Binary files /dev/null and b/slides/wk08/img/undo/norman-d-human-action-cycle.png differ diff --git a/slides/wk08/studies.html b/slides/wk08/studies.html new file mode 100644 index 0000000000000000000000000000000000000000..3b60f194ba7e79e0ec6cef2c70956897c731079f --- /dev/null +++ b/slides/wk08/studies.html @@ -0,0 +1,470 @@ +--- +layout: presentation +title: Running a Quantitative Study +description: Description of how to test a hypothesis in a study, all steps +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Running a Quantitative Study + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout: false + +# Today's goals + +- Review our designs from Friday +- Discuss steps of running a study +- Practice onboarding participants +- Practice data analysis +- Go over parts 5 & 6 of Menus + +--- +# Case Study: UbiGreen - In Class activity + +Take 2 minutes to go back into our [shared google doc](https://docs.google.com/document/d/1SqvaQyhFYs6AsOPoDcBkG4egCRRq3jEaW17HOi0hSkM/edit?usp=sharing) + +Find a design by a different group than you were in. Use the google doc comment feature to leave +a short critique. + +Phrases to get you started + +- I like ... +- I wish ... +- What if... + +.footnote[I like I wish critique method from [Stanford Design School](https://www.youtube.com/watch?v=QkWM2--3TQo)] + +--- +# Experiment Design + +<div class="mermaid"> +graph LR +S(.) --> Hypothesis(Hypothesis) +Hypothesis -- "Study Design" --> Method(Method) +Method -- "Run Study" --> Data(Data) +Data -- "Clean and Prep" --> Analysis(Analysis) +Analysis --> Conclusions(Conclusions) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:2.5em; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:3px; +linkStyle 1 stroke-width:3px; +linkStyle 2 stroke-width:3px; +linkStyle 3 stroke-width:3px; +linkStyle 4 stroke-width:3px; + +class S invisible +class Hypothesis,Conclusions start +class Method,Data,Analysis normal +</div> + +‍Think: What is the Hypothesis for the Menus assignment +-- + +‍Pair: We'd chat for a minute in person but I'm not putting you in breakouts for this question... +-- + +‍Share: Type your thoughts in the chat window + +--- +# Method +<div class="mermaid"> +graph LR +S(.) --> Hypothesis(Hypothesis <br>Decreased seek <br>time and errors) +Hypothesis -- "Study Design" --> Method(Method) +Method -- "Run Study" --> Data(Data) +Data -- "Clean and Prep" --> Analysis(Analysis) +Analysis --> Conclusions(Conclusions) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:5em; +classDef startsmall fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:2.5em; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:3px; +linkStyle 1 stroke-width:3px; +linkStyle 2 stroke-width:3px; +linkStyle 3 stroke-width:3px; +linkStyle 4 stroke-width:3px; + +class S invisible +class Hypothesis start +class Conclusions startsmall +class Method,Data,Analysis normal +</div> + +- 3 tasks x 3 menu types = 9 *conditions* +- Each condition will have a total of totalTrials = `ITEM_MAX` x `NUM_REPEATS` + - In each *condition* we test `ITEM_MAX` different menu items + - For each menu item, we repeat `NUM_REPEATS` times + +| | Normal | Pie | Custom | +|--|--|--|--| +| **Linear** | totalTrials | totalTrials | totalTrials | +| **Relational** | totalTrials | totalTrials | totalTrials | +| **Unclassified** | totalTrials | totalTrials | totalTrials | + +--- +# Other Method considerations + +For Menus Part 5-6, an experimental *session* consists of 3 tasks x 3 menu types x +`ITEM_MAX` items x `NUM_REPEATS` repetitions = 108 *trials* + +You have to run at least three participants through a complete session = 108 x 3 or 324 data points. + +-- +In some experimental designs, participants only do some conditions +- Called *between subjects design* + +Our participants do *all* trials +- Our study is a *within subjects design* + +Order of presentation of conditions and items is randomized (why?) + + +??? +Between subjects design: Person A compared to person B doing different tasks + +--- +# Document all of this in your [report]({{site.baseurl}}/assignments/menu-report) + +Introduce study purpose + +`Write two sentences describing the purpose of the experiment. This +can be the same text you use in your consent form` + +--- +# Document all of this in your [report]({{site.baseurl}}/assignments/menu-report) + +Introduce study method - menus + +`Mention that there are three types of menus, Pie, Linear and Custom. +Then describe your custom menu and include an screenshots of your custom menu in both a selected +and unselected state. Describe some of the design choices you made when you were conceiving your +custom menu and how your final product match (or didn’t) your original vision? Be sure to explain +clearly how your custom menu works and how a user interacts with it?` + +Introduce study method - tasks + +`Describe the 9 conditions of the study. Explain how many +items were selected per menu, and how many times each item was +repeated. Describe how many trials each participant completed.` + +--- +# Study Ethics +<div class="mermaid"> +graph LR +S(.) --> Hypothesis(Hypothesis:<br>Decreased seek <br>time and errors) +Hypothesis -- "Study Design" --> Method(3 menus x <br> 3 task conditions ) +Method -- "Run Study" --> Data(Data) +Data -- "Clean and Prep" --> Analysis(Analysis) +Analysis --> Conclusions(Conclusions) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef normalbig fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:4em; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:5em; +classDef startsmall fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:2.5em; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:3px; +linkStyle 1 stroke-width:3px; +linkStyle 2 stroke-width:3px; +linkStyle 3 stroke-width:3px; +linkStyle 4 stroke-width:3px; + +class S invisible +class Hypothesis start +class Conclusions startsmall +class Method normalbig +class Data,Analysis normal +</div> + +Ethical Principles for running participants. Driven by +[Criminal/Racist/Harmful studies](https://www.nytimes.com/2017/05/22/science/social-science-research-institutional-review-boards-common-rule.html) + - Nazi war crimes + - Tuskegee Syphilis study + - Epilepsy studies of institutionalized children + - [16,000 people involuntarily included in radiation + studies](https://www.nytimes.com/1995/08/20/us/count-of-subjects-in-radiation-experiments-is-raised-to-16000.html?module=inline) + - [Milgram's study of electric shocking](https://www.simplypsychology.org/milgram.html) + - [Stanford prison experiment](https://www.simplypsychology.org/zimbardo.html) + + +??? +IRB = Institutional Review Board Protocol (and get it approved.) + +--- +# Study Ethics +<div class="mermaid"> +graph LR +S(.) --> Hypothesis(Hypothesis:<br>Decreased seek <br>time and errors) +Hypothesis -- "Study Design" --> Method(3 menus x <br> 3 task conditions ) +Method -- "Run Study" --> Data(Data) +Data -- "Clean and Prep" --> Analysis(Analysis) +Analysis --> Conclusions(Conclusions) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef normalbig fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:4em; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:5em; +classDef startsmall fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:2.5em; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:3px; +linkStyle 1 stroke-width:3px; +linkStyle 2 stroke-width:3px; +linkStyle 3 stroke-width:3px; +linkStyle 4 stroke-width:3px; + +class S invisible +class Hypothesis start +class Conclusions startsmall +class Method normalbig +class Data,Analysis normal +</div> + + +Basic ethics ([Belmont Report](https://www.hhs.gov/ohrp/regulations-and-policy/belmont-report/read-the-belmont-report/index.html)) +- Beneficence --> + - Value of research higher than risks + - Do no harm +- Respect for Persons --> + - Fully informed of intent and purpose + - Informed consent + - May opt out at any time, for any reason +- Justice --> + - Equitable, representative selection of participants + + +--- +# Consent + +Write your [consent]({{site.baseurl}}/assignments/consent) form + +- Purpose of study (Beneficience) +- Requirements for participation (Respect for Persons) +- Study procedures (Respect for Persons) +- Voluntariness (Respect for Persons) +- Benefits to Society (Beneficience) +- Contact (of IRB typically; Me in this case) + + +??? +- Beneficence --> + - Value of research higher than risks + - Do no harm +- Respect for Persons --> + - Fully informed of intent and purpose + - Informed consent + - May opt out at any time, for any reason +- Justice + - equitable, representative selection of participants + +--- +# Choosing and Consenting Participants + +For 20sp only, we are assigning you in "groups" to help you find testers. +- If you can not safely test your app with someone who is co-present you will need to ask your [groupmates](https://docs.google.com/document/d/11nsEWs3TubV5Zy0zOIGguqZJohkS34uizIrDv-bgnYs/edit) +- Consenting your participants will be very similar whether they are co-present or remote. + - Set up a time when can speak to your participant (in real time) - phone or video call + - For a co-present tester - print out two copies of the consent form for each participant -- one for them and one for you. + - For remote testers - send a copy of the consent form to the participant prior to your phone call +or video meeting. + +--- +# Choosing and Consenting Participants + +During the consent meeting +- Briefly explain what your user study is about, +- Ensure participants understand their participation in the study is voluntary. + - Do not *coerce* anyone into participating in your study. + - Make sure they know they have a choice, and have read the consent form. +- Participants must acknowledge their consent by "signing" via the Google form (linked +at the bottom of the consent form template). + - This form should send you an anonymized copy of their +consent in email, which you can save and turn in with the rest of your report and reflection. + +--- +# Choosing and Consenting Participants + +If you are unable to find 3 partipants from your friends, family, or pre-assigned group +- Please reach out to a TA during Office Hours or to have them be a partipipant. +- You may also reach out to other students in the class via Ed. + + +--- +# Document your participants in your [report]({{site.baseurl}}/assignments/menu-report) + +Method - Participants + +`Describe your participants (without identifying +them). How were they recruited? How many were there? Were +they consented? You can also add +some optional information such as: What was there average age? What +genders were present? How experienced were they with android?` + +--- +# Data Collection + +<div class="mermaid"> + graph LR + S(.) --> Hypothesis(Hypothesis:<br>Decreased seek <br>time and errors) + Hypothesis -- "Study Design" --> Method(3 menus x <br> 3 task conditions ) + Method -- "Run Study" --> Data(Data) + Data -- "Clean and Prep" --> Analysis(Analysis) + Analysis --> Conclusions(Conclusions) + + classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; + classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; + classDef normalbig fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:4em; + classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:5em; + classDef startsmall fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:2.5em; + classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + + linkStyle 0 stroke-width:3px; + linkStyle 1 stroke-width:3px; + linkStyle 2 stroke-width:3px; + linkStyle 3 stroke-width:3px; + linkStyle 4 stroke-width:3px; + + class S invisible + class Hypothesis start + class Conclusions startsmall + class Method normalbig + class Data,Analysis normal +</div> + +If you have co-present users: + +1. **Clear your data** file before you start the **first participant +only** +2. Have participant read and sign the consent form +3. Emphasize key points verbally +4. Be Consistent in how you present the study +5. Download result (you can use a tool window called `Device File Manager`) + +--- +# Data Collection + +<div class="mermaid"> + graph LR + S(.) --> Hypothesis(Hypothesis:<br>Decreased seek <br>time and errors) + Hypothesis -- "Study Design" --> Method(3 menus x <br> 3 task conditions ) + Method -- "Run Study" --> Data(Data) + Data -- "Clean and Prep" --> Analysis(Analysis) + Analysis --> Conclusions(Conclusions) + + classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; + classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; + classDef normalbig fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:4em; + classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:5em; + classDef startsmall fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:2.5em; + classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + + linkStyle 0 stroke-width:3px; + linkStyle 1 stroke-width:3px; + linkStyle 2 stroke-width:3px; + linkStyle 3 stroke-width:3px; + linkStyle 4 stroke-width:3px; + + class S invisible + class Hypothesis start + class Conclusions startsmall + class Method normalbig + class Data,Analysis normal +</div> + +If you have a remote user + +1. Generate your APK +2. Consent your user via phone or video conference. +3. Send your APK to the participant so they can load it onto their own device or into their own + emulator + - You can't email your APK through UW's servers, so upload the APK to your Google Drive or One Drive and send your participant + a link to download it for testing. +4. Have your participant use the hamburger menu to select `Clear Result CSV` before starting + your study +5. Have your participant run one experiment session. +6. When the study is done, your participant will need to download their data +and send it back for analysis. +7. Combine the three participants' data into one common .csv file. + + +--- +layout: true +class: center, middle +--- +# Collecting data file (Demo) +--- +layout: false + +# Document what all of this in your [report]({{site.baseurl}}/assignments/menu-report) + +Method - Setting +`What device was used? Was it an emulator? Where did the experiment take place?` + +Method - Data Collected +`What information was collected (time, errors, etc)` + +--- +# Data Collection +.left-column[ + + +] + +.right-column[ + +Select the 'raw' sheet of your spreadsheet then load your file into the spreadsheet + + + +] +--- +# Data Collection +.left-column[ + + +] +.right-column[ + + +Now click on `Example Chart`. Here you can + +- Analyze and chart data: Simple Statistics + - Min, Max, Mean (Sum/#), Median (Middle #), Mode (Most Common #) + +Demo + +Do this for speed *and* error. + +] + + +--- +# Document what all of this in your [report]({{site.baseurl}}/assignments/menu-report) + +Speed Results + +`Describe your thoughts about overall speed in different +conditions. Use at least one chart to illustrate what you say. Here is +an example chart generated using our data, when you paste your data +into the spreadsheet you’ll see that it updates to reflect your data` + +Error Results + +`Describe what happened in terms of errors -- provide at least one chart showing +what you learned about errors in different conditions` diff --git a/slides/wk08/studies2.html b/slides/wk08/studies2.html new file mode 100644 index 0000000000000000000000000000000000000000..f3c583a7bb22a054e44f4def6eb18ffba8b9c4ca --- /dev/null +++ b/slides/wk08/studies2.html @@ -0,0 +1,468 @@ +--- +layout: presentation +title: Understanding Quantitative Data +description: Description of how to analyze study data and draw conclusions +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Analyzing Quantitative Data + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout:false + +[//]: # (Outline Slide) +# Today's goals + +- How to use the Menus spreadsheet +- Dependent and independent variables +- Discuss how we determine causality +- Practice onboarding participants +- Practice data analysis + + +--- +# Data Collection +.left-column[ + + +] +.right-column[ + + +Now click on `Example Chart`. Here you can + +- Analyze and chart data: Simple Statistics + - Min, Max, Mean (Sum/#), Median (Middle #), Mode (Most Common #) + +Demo + +Do this for speed *and* error. + +] + +--- +# Document what all of this in your [report]({{site.baseurl}}/assignments/menu-report) + +Speed Results + +`Describe your thoughts about overall speed in different +conditions. Use at least one chart to illustrate what you say. Here is +an example chart generated using our data, when you paste your data +into the spreadsheet you’ll see that it updates to reflect your data` + +Error Results + +`Describe what happened in terms of errors -- provide at least one chart showing +what you learned about errors in different conditions` + + +--- +# Use charts to check your assumptions + + + + +--- +# Using the right chart matters + +.left-column40[ + + +] + +.right-column50[ +|Normal | Pie| +|--|--| +||| + +] + + +--- +# Can we determine *causality*? + +We'd like to be able to argue the task/menu type influenced the speed and error results. + +-- +This implies *dependence* between speed/error, task, and menu type + +-- +And it assumes you have measured the right variables! + +--- + +name: inverse +layout: true +class: center, middle, inverse +--- +# Determining Causality + +## thinking theoretically... + + +--- +layout:false + + +# Dependence/independence + +Events that are independent +- Flipping heads and then tails +- Day of week and whether a patient had a heart attack (probably?) + +Events that are dependent +- Vice presidential candidate and presidential nominee +- Diagnostic test being positive and whether patient has a disease + +-- +What are some dependent and indepenent relationships in the Menus study? + +??? +Think about a coin flip: one flip does not depend on another. +What if we collect this kind of data, what might be true about it? + + +--- +# What might we expect to see is true of dependent variables? + +- When one changes, the other changes at the same rate +- When one changes, the other changes at a faster rate +- When one changes, the other does the opposite + +??? +Called a correlation +We can see it in a scatter plot +Go look at data and make one + +--- +# This is called *Correlation* + +We can see it in a *scatterplot* + + + +--- +# Correlation (active) Demo + +[OpenSecrets.org data set on internet privacy resolution](https://www.opensecrets.org/featured-datasets/5) + +Active demo: + +Open it yourself: [tinyurl.com/cse340-ipdata](https://tinyurl.com/cse340-ipdata) + +Make a copy of this sheet to your own drive using File->Make a copy. + +(You must be logged into a Google account to make a copy) +--- +# Correlation demo + +[OpenSecrets.org data set on internet privacy resolution](https://www.opensecrets.org/featured-datasets/5) + +- Select two columns (use command/control click to select 2 columns) +- Use Insert->Chart - Make sure this is a scatterplot + +-- + + +Is there a correllation? + + +--- +# Correlation != Causation + + + +--- +# Correlation != Causation + + + +.footnote[[XKCD](https://xkcd.com/552/)] + +--- +# Grouping for analysis + +Pivot Tablest demo +[tinyurl.com/cse340-ipdata](https://tinyurl.com/cse340-ipdata) + +-- + + +--- +# Grouping and charting helps you check your assumptions + + + +What do you see in the difference between tasks on each of these menus types? + +-- +Charting gives you a place to start, what questions you might want to ask. + +--- +# Grouping and charting helps you check your assumptions + +[20sp Sample data](https://docs.google.com/spreadsheets/d/1JqfKhHugIF-kebs_bVztCnkUe0CizXN8PU_Ar3kXtK4/edit?usp=sharing) + +Not that different in this sample set (just Jen doing it 3 times). + +You likely will get better results with your data + +We will get even better results with ALL of the data merged together + +(Remember to turn your CSV into the Canvas Assignment) + +--- + +# Comparing groups to see if they are different + +Bar charts are not enough to assess difference though. Need to see the *distribution* + +A distribution is looking at how the people we are studying distributed over a specific variable we care about. + +A histogram graphically shows a distribution. + +--- +# Histogram shows you a *distribution* + +Pivot Tablest demo +[tinyurl.com/cse340-ipdata](https://tinyurl.com/cse340-ipdata) + +-- + + + +--- +# But having the right chart matters + + + + +--- +# Normal Vs Pie + +|Normal | Pie| +|--|--| +||| + +The cause of the difference only shows here. + +--- + +# What do we learn from a histogram? + + + +??? +- shows a distribution +- helps us tell if things are INDEPENDENT + +--- +# Histograms + +What do we learn from a histogram? +- shows a distribution +- helps us tell if things are INDEPENDENT + +--- +# Comparing two groups + + + + +--- +# Comparing two groups + + + +--- +# Comparing two groups + + + +--- +# Comparing two groups + + + +--- +# Comparing two groups + + + +--- +# Comparing two groups + + + +--- +# Common Statistical Test for comparison: t-test + +Tests for difference between two samples + +Best used to determine what is ‘worthy of a second look’ + +Limited in its applicability to normal, independent data + +Does not help to document effect size [the actual difference between groups], just effect likelihood + +--- +.left-column[ +## Problems with t-tests + +The more implausible the hypothesis, the greater chance that it is a +‘false alarm’ +] +.right-column[ + + +] +??? +Top row: Prior (what's known to be true before the experiment) +bottom row: Calculated p-value + +Notice the middle column, where something that is a toss-up has higher +plausability than we would expect. This is a "Type 1 error" + +Alternatively, a small sample may cause a Type II error (failure to +detect a true difference) due to random sampling bias + +--- +.left-column[ +## Problems with t-tests +] +.right-column[ +- Doesn’t take prior knowledge into account +- Susceptible to ‘data dredging’ + - The more tests you conduct the more likely you will find a result + even if one is not there + - Adjustments mid experiment +- Gives a yes or no answer: Either the null hypothesis is rejected (the result would be unlikely in a world where the null hypothesis was true) or it cannot be rejected +- Based on assumed ‘average’ sample +] +--- +# Which problems might affect our study? + +??? +Too many comparisons +-- + +18 separate comparisons (3x3 conditions, 2 measures) + +ANOVA (**An**alysis **O**f **Va**riance): Fancy t-test that accounts for the whole group effect before +doing pairwise comparisons + +??? +- Doesn’t take prior knowledge into account +- Susceptible to ‘data dredging’ + - The more tests you conduct the more likely you will find a result + even if one is not there + - Adjustments mid experiment +- Gives a yes or no answer: Either the null hypothesis is rejected (the result would be unlikely in a world where the null hypothesis was true) or it cannot be rejected +- Based on assumed ‘average’ sample + +--- +# Demo of t-tests in our spreadsheet + +[20sp Sample data](https://docs.google.com/spreadsheets/d/1JqfKhHugIF-kebs_bVztCnkUe0CizXN8PU_Ar3kXtK4/edit?usp=sharing) + +--- +.left-column[ +## Document what all of this in your [report]({{site.baseurl}}/assignments/menu-report) +] +.right-column[ + +- Describe your hypothesis +- Illustrate with graphs +- Optional: use Table of results found in `Speed Analysis` and `Error Analysis` to describe Statistical Significance: + +`Pie menus were twice as fast as normal menus (M=.48s vs M=.83s), F(1,43)=295.891, p<.05. Unclassified menu items were harder to find than linear and relative ones (M=.84s, .59s, and .59s respectively), F(2,43)=93.778, p<0.5. We also found an interaction effect between menu and task (as illustrated in the chart above), F(5, 43) = 51.945, p<.001.` + +] + + +--- +# Drawing Conclusions + +<div class="mermaid" style="font-size:.5em"> +graph LR +S(.) --> Hypothesis(Hypothesis:<br>Decreased seek <br>time and errors) +Hypothesis -- "Study Design" --> Method(3 menus x <br> 3 task conditions ) +Method -- "Run Study" --> Data(Data) +Data -- "Clean and Prep" --> Analysis(Analysis) +Analysis --> Conclusions(Conclusions) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:2.5em; +classDef normalbig fill:#e6f3ff,stroke:#333,stroke-width:2px,font-size:.7em,height:4em; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:5em; +classDef startsmall fill:#d1e0e0,stroke:#333,stroke-width:4px,font-size:.7em,height:2.5em; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:3px; +linkStyle 1 stroke-width:3px; +linkStyle 2 stroke-width:3px; +linkStyle 3 stroke-width:3px; +linkStyle 4 stroke-width:3px; + +class S invisible +class Hypothesis start +class Conclusions startsmall +class Method normalbig +class Data,Analysis normal +</div> + +- Describe your hypothesis +- Illustrate with graphs +- Optional: Statistical Significance + +Draw Conclusions +- Were errors less? +- Was time faster? + +`Describe your conclusions. Do you think we should use pie menus more? What can we conclude from your data?` + + +--- +# Limitations of Laboratory Studies + +??? +Simulate real world environments +- Location and equipment may be unfamiliar to participant [Coyne & Nielsen 2001] +- Observation may effect performance - “Hawthorne Effect†[Mayo 1933] +- Participant may become fatigued and not take necessary rest - “Demand Effect†[Orne 1962] +- Tasks frequently artificial and repetitive, which may bore participants and negatively effect performance +Studying real world use removes these limitations + +-- + +Simulate real world environments +- Location and equipment may be unfamiliar to participant [Coyne & Nielsen 2001] +- Observation may effect performance - “Hawthorne Effect†[Mayo 1933] +- Participant may become fatigued and not take necessary rest - “Demand Effect†[Orne 1962] +- Tasks frequently artificial and repetitive, which may bore participants and negatively effect performance +Studying real world use removes these limitations diff --git a/slides/wk08/undoSlides.html b/slides/wk08/undoSlides.html new file mode 100644 index 0000000000000000000000000000000000000000..b70972746a79053d092664fadeed8c7a6bc968f3 --- /dev/null +++ b/slides/wk08/undoSlides.html @@ -0,0 +1,541 @@ +--- +layout: presentation +title: Undo +description: Why Undo/How Undo/What Undo +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Undo reasoning and implementation + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout: false + +[//]: # (Outline Slide) +# Today's goals + +- Introduce need for Undo by reviewing mental models +- Introduce Undo conceptually +- Describe Implementation details for assignment + + +--- +.left-column[ +# Review: Every system has at least 3 different models +] + +.right-column[ +<div class="mermaid"> +graph TD + S[System Image: <br>Your Implementation ] --> |System Feedback | U[User Model: How the user thinks <br>the system works] + D[Design Model: How you <br>intend the system to work ]-->S + U -->|User Feedback | S +</div> + +] + +--- +# Relating the Human and the Interaction + + +.left-column-half[ + + + +] + +-- + +.right-column-half[ + +] + +.footnote[[Don Norman, When Three World Collide: A model of the Tangible Interaction Process, 2009](https://www.researchgate.net/publication/221332102_When_three_worlds_collide_A_model_of_the_tangible_interaction_process)] + +??? +Note to instructors: Need to change image to mermaid + + +--- +# Relating the Human and the Interaction + + +.left-column-half[ +<br> +<br> + +**Gulf of Execution** is the user's believe in the functions the system _doesn't have_ + - This is the users 'error' region + +**Gulf of Evaluation** is where the user _doesn't realize the system HAS a functionality_. +] + + +.right-column-half[ + +] + +--- + +# Model of Mental Models + +.left-column50[ + +] +--- +# Model of Mental Models + +.left-column50[ + +] +--- +# Model of Mental Models + +.left-column50[ + +] +--- +# Model of Mental Models + +.left-column50[ + +] + +--- +# Model of Mental Models + +.left-column50[ + +] + +--- +# Model of Mental Models + +.left-column50[ + +] + +??? +- Where are the gulf of evaluation and gulf of execution in this + image? +- Gulf of execution is the user 'error' region (user requests + function the __system DOESNT HAVE__), gulf of + evaluation is when the user __doesn't realize the system HAS a + functionality__. + +- How does undo help the user bridge them? + +-- +.right-column50[ +<br> +<Br> +**Gulf of Execution** is the user's believe in the functions the system _doesn't have_ + - This is the users 'error' region + +**Gulf of Evaluation** is where the user _doesn't realize the system HAS a functionality_. +] + +--- +# Model of Mental Models + + +.left-column50[ + +] +.right-column50[ +What happens when the user does something they think is core but is really not supported? +] + +??? + +(Undo is needed) +-- +.right-column50[ +Undo helps with this +] + +--- +class: center, middle, inverse + +# How do we support Undo? + +--- +layout:false + +.left-column-half[ +## Remember this? + +] +.right-column-half[ +Dispatch Strategies +- Bottom-first and top-down positional +- Focus-based + +State Machine describes *within-view* response to events +] +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Callbacks handle *application* response to events +- Update Application Model + +] + +--- +.left-column-half[ +## Event Dispatch + +] +.right-column-half[ +Callbacks handle *application* response to events +- Update Application Model +- Best implemented using custom listeners + +] +--- +# What is `ActionPerformed`? +`Higher level` input event (`Command` or `Action` object) + - Puts some separation between UI and translation objects + - Application (or UI) can ‘listen’ for these events: + +Key advantage: interactors don’t need to know who/what got notification + +Same basic flow as simple callbacks +--- +# What should an Action object do? +`doAction()` + +??? +seems like a lot of work when we could just directly do the +action. Major reason for action objects +-- +`undoAction()` + +??? +What additional information do we need to undo an action? + +--- +.left-column[ +## Advantages of an action object +- can be stored on an undo stack +- can create a consistent abstraction for reversing an action +] +.right-column[ +<div class="mermaid"> +classDiagram + +AbstractAction <|.. AbstractReversibleAction +AbstractReversibleAction <|.. ChangeColorAction +AbstractReversibleAction <|.. ChangeThicknessAction +AbstractReversibleAction <|.. AbstractReversibleViewAction +AbstractReversibleViewAction <|.. StrokeAction + +class AbstractAction { + doAction() +} + +class AbstractReversibleAction { + +boolean done + +undoAction +} + +class AbstractReversibleViewAction { + +invalidate +} + + +</div> +] +--- +# Where do we store actions? A stack + +.left-column50[ +<div class="mermaid"> +classDiagram + +AbstractStackHistory <|.. StackHistory +class AbstractStackHistory { + addAction(AbstractReversibleAction action) + undo() + redo() + canUndo() + canRedo() +} + +class StackHistory { + +capacity: "Max stack size" +} + + +</div> +] +.right-column50[ +Why a stack? +] + +??? +Consider having some volunteers be actions and have them act it out? +--- +.left-column[ +## Undo and Redo] +.right-column[ +1) new action object created and `doAction()` called + +2) Undo stack updated + +3) new action object created and `doAction()` called + +4) Undo stack updated + +5) `undo()` invoked + +6) Undo stack reduced and Redo stack increased + +7) `undo()` invoked + +8) Undo stack reduced and Redo stack increased +] +??? +draw sequence +--- +.left-column[ +## Undo and Redo] +.right-column[ +9) `redo()` invoked + +10) Redo stack decreased and Undo stack increased + +11) new action object created and `doAction()` called + +12) Redo stack cleared and Undo stack stack increased +] +--- +.left-column[ +## What if an action can't be undone?] +.right-column[ +Actions that put system into a totally different context + +Clear both `undo` *and* `redo` stacks! Users may hate you] +??? +example? Saving a file +--- +.left-column[ +## Implementing `undo()` +] +.right-column[ + +System pops action off undo stack + +Calls `undoAction()` method on it + +Pushes it on redo stack +] +--- +.left-column[ +## Why is `undoAction()` hard? +] +.right-column[ +Two ways to implement: + +- *Direct Code* (each action object has custom code) + - Need parameters of original action + - Better store in `doAction()` for later + - This is what we will implement +] +--- +.left-column[ +## Why is `undoAction()` hard? +] +.right-column[ +Two ways to implement: + +- *Direct Code* (each action object has custom code) +- *Change Records* (Keep a record of the “old value†for everything +changed by the application, then put all those values back to undo) + - Like some version control systems + - More general + - Takes more space + - `Action` object records `ChangeRecord` (changes which are abstracted into a + common data format) + - Application has to provide code to restore from change records +] +--- + +.left-column[ +## Implementing `redo()` +] +.right-column[ + +System pops action off redo stack + +Calls `doAction()` method + +Pushes it on undo stack +] +--- +.left-column[ +## More sophisticated forms of Undo +] +.right-column[ +Explicit visualization of steps + +Manipulation of action list + +Delete actions from the middle, reorder, etc. +by undoing back to point of change then redoing forward + +But note: doAction() must be able to work in new context +] + +--- +.left-column[ +## Flatland: Semantic Undo + + +] +.right-column[ + +] +.footnote[ +Edwards, W. K. ; Igarashi, T. ; LaMarca, A .; Mynatt, E. D. A temporal model for multi-level undo and redo. UIST 2000, Proceedings of 13th Annual ACM Symposium on User Interface Software and Technology; 2000 November 5-8; San Diego, CA. NY: ACM; 2000; 31-40. +] +--- + +# Discussion of assignment + +Android Goals: +- Be able to understand and modify an existing user interface + - Learn about floating action buttons + - Implement core data structure for Undo + +HCI Goals + - Modify and existing app in a consistent fashion + - Make your modifications accessible + - Make your modifications usable + - Use heuristic evaluation to assess an app + +--- +# Discussion of assignment + +.left-column-half[ +![:youtube Video of assignment, F5FyW3YJ0x4] +] +.right-column-half[ +![:youtube Video of assignment, NhUE7GgH-vc] +] +--- + +# Discussion of assignment + +.left-column[ +First time you are modifying a fully working program + +Lots to explore/understand e.g. FAB buttons) +] +-- +.right-column[ +<div class="mermaid"> +graph TD +M[ReversibleDrawingActivity] --> D[DrawingView] +M --> FUndo[FAB:Undo] +M --> FRedo[FAB:Redo] +M --> FColor[FAB:Color] +M --> FThick[FAB:Thickness] +FColor --> Red[Red] +FColor --> Green[Green] +FColor --> Blue[Blue] +FThick --> Thin[Thin] +FThick --> Med[Med] +FThick --> Thick[Thick] + + +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; + +class M,D,FColor,FThick,Vis start +class Red,Green,Blue,Thin,Med,Thick,Hid normal + +</div> +] + +--- + +# Discussion of assignment + +.left-column[ +DrawingView: Holds strokes + +FABs: +- Green ones are always visible +- Purple ones are only visible when active +] +.right-column[ +<div class="mermaid"> +graph TD +M[ReversibleDrawingActivity] --> D[DrawingView] +M --> FUndo[FAB:Undo] +M --> FRedo[FAB:Redo] +M --> FColor[FAB:Color] +M --> FThick[FAB:Thickness] +FColor --> Red[Red] +FColor --> Green[Green] +FColor --> Blue[Blue] +FThick --> Thin[Thin] +FThick --> Med[Med] +FThick --> Thick[Thick] + + +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; + +class M,D,FColor,FThick,Vis start +class Red,Green,Blue,Thin,Med,Thick,Hid normal + +</div> +] + +--- +# Code deliverables + +There are five parts for the coding part of this assignment: +- Part 1: Implement `ChangeThicknessAction` +- Part 2: Implement history +- Part 3: Add a thickness 0 FAB to the thickness menu +- Part 4: Integrate colorpicker +- Part 5: Add a new feature to your app. Make sure it is accessible + +Later we will learn how to do a Heuristic Evaluation of the application! +--- diff --git a/slides/wk09/cse340-guestlecture-6mar20.pdf b/slides/wk09/cse340-guestlecture-6mar20.pdf new file mode 100644 index 0000000000000000000000000000000000000000..39501853fe68c732f784a87d25cbdac6eb0305de Binary files /dev/null and b/slides/wk09/cse340-guestlecture-6mar20.pdf differ diff --git a/slides/wk09/cse340-guestlecture-june5.pdf b/slides/wk09/cse340-guestlecture-june5.pdf new file mode 100644 index 0000000000000000000000000000000000000000..c9fec37970d9b5a6628e2ac6f1f25f9051d1c6f8 Binary files /dev/null and b/slides/wk09/cse340-guestlecture-june5.pdf differ diff --git a/slides/wk09/cse340-guestlecture-june5.pptx b/slides/wk09/cse340-guestlecture-june5.pptx new file mode 100644 index 0000000000000000000000000000000000000000..5aa95362a0a3a4368955c03c44be87556be67560 Binary files /dev/null and b/slides/wk09/cse340-guestlecture-june5.pptx differ diff --git a/slides/wk09/cse340-guestlecture-mar20.pptx b/slides/wk09/cse340-guestlecture-mar20.pptx new file mode 100644 index 0000000000000000000000000000000000000000..fbc9c5897ac891f951fe38abb89751e8adee3435 Binary files /dev/null and b/slides/wk09/cse340-guestlecture-mar20.pptx differ diff --git a/slides/wk09/img/ml/Carat.jpg b/slides/wk09/img/ml/Carat.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2d065755d3b2be286049076e52bab07548de114c Binary files /dev/null and b/slides/wk09/img/ml/Carat.jpg differ diff --git a/slides/wk09/img/ml/aipoly.jpg b/slides/wk09/img/ml/aipoly.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9dcd75d04cd8002753683644bf253bf79fe62270 Binary files /dev/null and b/slides/wk09/img/ml/aipoly.jpg differ diff --git a/slides/wk09/img/ml/bias.png b/slides/wk09/img/ml/bias.png new file mode 100644 index 0000000000000000000000000000000000000000..531eaaacd795fb9587d2d21e8cc58dfff031dbdd Binary files /dev/null and b/slides/wk09/img/ml/bias.png differ diff --git a/slides/wk09/img/ml/captioning.png b/slides/wk09/img/ml/captioning.png new file mode 100644 index 0000000000000000000000000000000000000000..2397234b76fe9605470d62ff287a2de4eb11d945 Binary files /dev/null and b/slides/wk09/img/ml/captioning.png differ diff --git a/slides/wk09/img/ml/cross-validation.png b/slides/wk09/img/ml/cross-validation.png new file mode 100644 index 0000000000000000000000000000000000000000..8aaa3c2816b91dc8af0605c35eafd004639ea150 Binary files /dev/null and b/slides/wk09/img/ml/cross-validation.png differ diff --git a/slides/wk09/img/ml/decisiontree.png b/slides/wk09/img/ml/decisiontree.png new file mode 100644 index 0000000000000000000000000000000000000000..d70048fd94c67ba4dee4947494266980e412b2d8 Binary files /dev/null and b/slides/wk09/img/ml/decisiontree.png differ diff --git a/slides/wk09/img/ml/gma.png b/slides/wk09/img/ml/gma.png new file mode 100644 index 0000000000000000000000000000000000000000..23af5ef8b20de432e227898a9ab4a1009be9ef7e Binary files /dev/null and b/slides/wk09/img/ml/gma.png differ diff --git a/slides/wk09/img/ml/google.jpg b/slides/wk09/img/ml/google.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9ca6ebdcd0269a225d5f26b29cd3172cab0bc0ec Binary files /dev/null and b/slides/wk09/img/ml/google.jpg differ diff --git a/slides/wk09/img/ml/imprompdo.jpg b/slides/wk09/img/ml/imprompdo.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f13f4a3d85c7c38638cc6dc19db26a873f91b56a Binary files /dev/null and b/slides/wk09/img/ml/imprompdo.jpg differ diff --git a/slides/wk09/img/ml/leafsnap.jpg b/slides/wk09/img/ml/leafsnap.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a2149f1b9c60dd72c85e3444a4a2ede49cadc16e Binary files /dev/null and b/slides/wk09/img/ml/leafsnap.jpg differ diff --git a/slides/wk09/img/ml/mixed-initiative.png b/slides/wk09/img/ml/mixed-initiative.png new file mode 100644 index 0000000000000000000000000000000000000000..10c04f554bac0b6a8878ef0a7542df53f957a7fe Binary files /dev/null and b/slides/wk09/img/ml/mixed-initiative.png differ diff --git a/slides/wk09/img/ml/mixed2.png b/slides/wk09/img/ml/mixed2.png new file mode 100644 index 0000000000000000000000000000000000000000..871799ee6f4b116a68e7c0497555ec085f1d3b0e Binary files /dev/null and b/slides/wk09/img/ml/mixed2.png differ diff --git a/slides/wk09/img/ml/mixed3.png b/slides/wk09/img/ml/mixed3.png new file mode 100644 index 0000000000000000000000000000000000000000..c1eca8c22e65eb1b9dd1ee66dd1a21e958147527 Binary files /dev/null and b/slides/wk09/img/ml/mixed3.png differ diff --git a/slides/wk09/img/ml/overfitting.png b/slides/wk09/img/ml/overfitting.png new file mode 100644 index 0000000000000000000000000000000000000000..f2ea67e6880780c274e3412b7f55502e93addeb8 Binary files /dev/null and b/slides/wk09/img/ml/overfitting.png differ diff --git a/slides/wk09/img/ml/personal.png b/slides/wk09/img/ml/personal.png new file mode 100644 index 0000000000000000000000000000000000000000..82aa0ec0763dd8ad334e7be7ef83f71320a09d7a Binary files /dev/null and b/slides/wk09/img/ml/personal.png differ diff --git a/slides/wk09/img/ml/phone-bed.jpg b/slides/wk09/img/ml/phone-bed.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a423153082a753ab1aa2339bf9a812425e61b313 Binary files /dev/null and b/slides/wk09/img/ml/phone-bed.jpg differ diff --git a/slides/wk09/img/ml/regression.png b/slides/wk09/img/ml/regression.png new file mode 100644 index 0000000000000000000000000000000000000000..0eae144ec64759e55fd8b06746ec19badc0a6e94 Binary files /dev/null and b/slides/wk09/img/ml/regression.png differ diff --git a/slides/wk09/img/ml/sleep.png b/slides/wk09/img/ml/sleep.png new file mode 100644 index 0000000000000000000000000000000000000000..07a49fdb1c7fc4aefcd1ba7b724119b676406a2b Binary files /dev/null and b/slides/wk09/img/ml/sleep.png differ diff --git a/slides/wk09/img/ml/training.png b/slides/wk09/img/ml/training.png new file mode 100644 index 0000000000000000000000000000000000000000..14ec13e5b4f92746066ac21d64dd9b1b7546abec Binary files /dev/null and b/slides/wk09/img/ml/training.png differ diff --git a/slides/wk09/img/ml/wrong.png b/slides/wk09/img/ml/wrong.png new file mode 100644 index 0000000000000000000000000000000000000000..93a3549c8ba3f42058bdb1a81406047116eede35 Binary files /dev/null and b/slides/wk09/img/ml/wrong.png differ diff --git a/slides/wk09/img/web/animated-skeleton.gif b/slides/wk09/img/web/animated-skeleton.gif new file mode 100644 index 0000000000000000000000000000000000000000..366149f29f99f2b3e1d4d54e06c924a311541e9d Binary files /dev/null and b/slides/wk09/img/web/animated-skeleton.gif differ diff --git a/slides/wk09/img/web/bones.png b/slides/wk09/img/web/bones.png new file mode 100644 index 0000000000000000000000000000000000000000..cc36a5c3f74cd446cf3d07c1161312142397b96e Binary files /dev/null and b/slides/wk09/img/web/bones.png differ diff --git a/slides/wk09/img/web/chrome-inspector.png b/slides/wk09/img/web/chrome-inspector.png new file mode 100644 index 0000000000000000000000000000000000000000..3a9aba34636e7d5284d4661e78f990174eaf3e26 Binary files /dev/null and b/slides/wk09/img/web/chrome-inspector.png differ diff --git a/slides/wk09/img/web/dom.png b/slides/wk09/img/web/dom.png new file mode 100644 index 0000000000000000000000000000000000000000..3dacc41a64334e458ac2f0ada02bc389d5a51718 Binary files /dev/null and b/slides/wk09/img/web/dom.png differ diff --git a/slides/wk09/img/web/dressed-skeleton.png b/slides/wk09/img/web/dressed-skeleton.png new file mode 100644 index 0000000000000000000000000000000000000000..2b18695ab67f05bf90ea1c599dc776a8f5efd726 Binary files /dev/null and b/slides/wk09/img/web/dressed-skeleton.png differ diff --git a/slides/wk09/img/web/flexbox.png b/slides/wk09/img/web/flexbox.png new file mode 100644 index 0000000000000000000000000000000000000000..40282210afae036fca7ee7d1fded5d6110b30650 Binary files /dev/null and b/slides/wk09/img/web/flexbox.png differ diff --git a/slides/wk09/img/web/full-skeleton.png b/slides/wk09/img/web/full-skeleton.png new file mode 100644 index 0000000000000000000000000000000000000000..fa79f9691d037b698ac6193350f511b9645b9600 Binary files /dev/null and b/slides/wk09/img/web/full-skeleton.png differ diff --git a/slides/wk09/img/web/spottheheron-android.gif b/slides/wk09/img/web/spottheheron-android.gif new file mode 100644 index 0000000000000000000000000000000000000000..8cd77214db5c25fd769b05592c908e9040d836f4 Binary files /dev/null and b/slides/wk09/img/web/spottheheron-android.gif differ diff --git a/slides/wk09/img/web/spottheheron-web.gif b/slides/wk09/img/web/spottheheron-web.gif new file mode 100644 index 0000000000000000000000000000000000000000..e47b7cc3794bb9c70009e8f46bbb31a43b893330 Binary files /dev/null and b/slides/wk09/img/web/spottheheron-web.gif differ diff --git a/slides/wk09/img/web/spottheheronscreen.png b/slides/wk09/img/web/spottheheronscreen.png new file mode 100644 index 0000000000000000000000000000000000000000..95458745f69650794ec867b65ab98cf1eb0747b9 Binary files /dev/null and b/slides/wk09/img/web/spottheheronscreen.png differ diff --git a/slides/wk09/img/web/viewpagesource.png b/slides/wk09/img/web/viewpagesource.png new file mode 100644 index 0000000000000000000000000000000000000000..bf7a54811f5104150016f0773e6d07c7b2170880 Binary files /dev/null and b/slides/wk09/img/web/viewpagesource.png differ diff --git a/slides/wk09/ml.html b/slides/wk09/ml.html new file mode 100644 index 0000000000000000000000000000000000000000..772a7fbddbb5985f3721fcd2605b3e9d3b196d47 --- /dev/null +++ b/slides/wk09/ml.html @@ -0,0 +1,671 @@ +--- +layout: presentation +title: Using Mobile Phones for Machine Learning +description: Using Mobile Phones for Machine Learning +class: middle, center, inve +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Google maps + +](img/ml/google.jpg) + + +.footnote[Picture from [Machine Learning on your Phone](https://www.appypie.com/top-machine-learning-mobile-apps)] + +??? +fame/shame +neighborhood traffic... +shorter commutes... +--- +# Machine Learning and your Phone + +Jennifer Mankoff + +CSE 340 {{site.quarter}} + +.footnote[Slides credit: Jason Hong, Carnegie Mellon University + [Are my Devices Spying on Me? Living in a World of +Ubiquitous +Computing](https://www.slideshare.net/jas0nh0ng/are-my-devices-spying-on-me-living-in-a-world-of-ubiquitous-computing); +] + +--- +layout: false + +.left-column[ +## Smartphones are Intimate Fun Facts about Millennials + +![:fa thumbs-down] 83% sleep with phones +] +.right-column[ + +] +--- +.left-column[ +## Smartphones are Intimate Fun Facts about Millennials + +![:fa thumbs-down] 83% sleep with phones + +![:fa thumbs-down] 90% check first thing in morning +] +.right-column[ + +] +--- +.left-column[ +## Smartphones are Intimate Fun Facts about Millennials + +![:fa thumbs-down] 83% sleep with phones + +![:fa thumbs-down] 90% check first thing in morning + +![:fa thumbs-down] 1 in 3 use in bathroom + +] +.right-column[ + + +] +--- +# Smartphone Data is Intimate + + + +| Who we know | Sensors | Where we go | +|-----------------------|-----------------------|---------------| +| (contacts + call log) | (accel, sound, light) | (gps, photos) | + +--- +# Some useful applications of this data + + + +.footnote[[LeafSnap](http://leafsnap.com/) uses computer vision to +identify trees by their leaves] + +--- +# Some useful applications of this data + + + +.footnote[[Vision AI](https://www.aipoly.com/) uses computer vision to +identify images for the Blind and Visually Impaired] + +--- +# Some useful applications of this data + + + +.footnote[[Carat: Collaborative Energy +Diagnosis](http://carat.cs.helsinki.fi/) uses machine learning to save +battery life] +--- +# Some useful applications of this data + + + +.footnote[[Imprompdo](http://imprompdo.webflow.io/ +) uses machine learning to recommend activities to do, both fund and todos] +--- +# How do these systems work? + + +Machine Learning is used to make these kinds of predictions +- Machine learning is one area of Artificial Intelligence +- This is the kind that’s been getting lots of press + +The goal of machine learning is to develop systems that can improve +performance with more experience +- Can use "example data" as "experience" +- Uses these examples to discern patterns +- And to make predictions +--- +# Two main approaches + +![:fa eye] *Supervised learning* (we have lots of examples of what should be + predicted) + +![:fa eye-slash] *Unsupervised learning* (e.g. clustering into groups and inferring what +they are about) + +![:fa low-vision] Can combine these (semi-supervised) + +![:fa history] Can learn over time or train up front + +--- +.left-column[ +## In class exercise + +![:fa bed, fa-7x] +] +.right-column[ +How might you recognize sleep? + +- What recognition question +- What sensors +] +??? + +(sleep quality? length?...) + +How to interpret sensors? + +--- +.left-column[ +## In class exercise + +- What recognition question (sleep quality? length?...) +- What sensors +- How to interpret sensors? +] +.right-column[ + +] + +--- +# How do we program this? + +Write down some rules + +Implement them + +--- +# ML is a major shift in thinking + +Old Approach: Create software by hand +- Use libraries (like JQuery) and frameworks +- Create content, do layout, code up functionality +- Deterministic (code does what you tell it to) + +New Approach: Collect data and train algorithms +- Will still do the above, but will also have some functionality based +on ML +- *Collect lots of examples and train a ML algorithm* +- *Statistical way of thinking* + +--- +# How Machine Learning is Typically Used + +Step 1: Gather lots of data (easy on a phone!) +-- + +Step 2: Figure out useful features +- Convert data to information (not knowledge!) +- (typically) Collect labels + +--- +# How Machine Learning is Typically Used + +Step 1: Gather lots of data (easy on a phone!) + +Step 2: Figure out useful features + +Step 3: Select and train the ML algorithm to make a prediction +- Lots of toolkits for this +- Lots of algorithms to choose from +- Mostly treat as a "black box" + +--- +# Example: Decision tree for predicting premature birth + + + + +--- +# Examwple: Deep Learning for Image Captioning + + + +.footnote[[Captioning images. Note the +errors.](http://cs.stanford.edu/people/karpathy/deepimagesent/) Deep +learning now +[available on your phone!](https://www.tensorflow.org/lite)] + +??? +Note differences between these: one label vs many +--- +# Training process + + + +--- +# How Machine Learning is Typically Used + +Step 1: Gather lots of data (easy on a phone!) + +Step 2: Figure out useful features + +Step 3: Select and train the ML algorithm + +Step 4: Evaluate metrics (and iterate) + +??? +See how well algorithm does using several metrics +Error analysis: what went wrong and why +Iterate: get new data, make new features +--- +# Evaluation Concerns + +Accuracy: Might be too error-prone + +--- +.left-column[ +## Assessing Accuracy] +.right-column[ + +Prior probabilities +- Probability before any observations (ie just guessing) +- Ex. ML classifier to guess if a person is male or female based on name + - Just assume all names are female (50% will be right) +- Your trained model needs to do better than prior + +Other baseline approaches +- Cheap and dumb algorithms +- Ex. Names that end in vowel are female +- Your model needs to do better than these too +] + +??? +We did this to study gender's impact on academic authorship; doctors reviews + +--- +.left-column[ +## Assessing Accuracy] + +.right-column[ +Don't just measure accuracy (percent right) + +Sometimes we care about *False positives* vs *False negatives* +] +--- +.left-column[ +## Assessing Accuracy + +## Confusion matrix helps show this] + +.right-column[ + +| | | .red[Prediction] | | +|-------------|--------------|----------------------|----------------------| +| | | **Positive** | **Negative** | +| .red[Label] | **Positive** | True Positive (good) | False Negative (bad) | +| | **Negative** | False Positive (bad) | True Negative (good) | + +Accuracy is (TP + TN) / (TP + FP + TN + FN) + +] +--- +.left-column[ +## Assessing Accuracy + +## Precision +] + +.right-column[ + +| | | .red[Prediction] | | +|-------------|--------------|----------------------------|----------------------| +| | | **Positive** | **Negative** | +| .red[Label] | **Positive** | .red[True Positive (good)] | False Negative (bad) | +| | **Negative** | .ref[False Positive (bad)] | True Negative (good) | + +Precision = TP / (TP+FP) + +Intuition: Of the positive items, how many right? + +] + +--- +.left-column[ +## Assessing Accuracy + +## Recall +] +.right-column[ + +| | | Prediction | | +|--------|--------------|----------------------------|----------------------------| +| Actual | | **Positive** | **Negative** | +| | **Positive** | .red[True Positive (good)] | .red[False Negative (bad)] | +| | **Negative** | False Positive (bad) | True Negative (good) | + +Recall = TP / (TP+FN) + +Intuition: Of all things that should have been positive, how many actually labeled correctly? +] + +--- +# Evaluation Concerns + +Accuracy: Might be too error-prone + +Overfitting: Your ML model is too specific for data you have +- Might not generalize well + + + +--- +# Avoiding Overfitting + + +To avoid overfitting, typically split data into training set and test set + +Train model on training set, and test on test set + +Often do this through cross validation + + + + + + +--- +# How Machine Learning is Typically Used + +Step 1: Gather lots of data (easy on a phone!) + +Step 2: Figure out useful features + +Step 3: Select and train the ML algorithm + +Step 4: Evaluate metrics (and iterate) + +Step 5: Deploy +--- +# What makes this work well? + +Typically more data is better + +Accurate labels important + +Quality of features determines quality of results + +.red[*NOT* as sophisticated as the media makes out] +-- + +.red[*BUT* can infer all sorts of things] +--- +# AI / Machine Learning Not As Sophisticated as in Media + + +A lot of people outside of computer science often ascribe human +behaviors to AI systems +- Especially desires and intentions +- Works well for sci-fi, but not for today or near future + +These systems only do: +- What we program them to do +- What they are trained to do (based on the (possibly biased) data) +--- +# Concerns + +Significant Societal Challenges for Privacy +--- +.left-column[ +## Wide Range of Privacy Risks] +.right-column[ + +| Everyday Risks | Medium Risk | Extreme Risks | +|--------------------|---------------------|-------------------| +| Friends, Family | Employer/Government | Stalkers, Hackers | +| Over-protection | Over-monitoring | Well-being | +| Social obligations | Discrimination | Personal safety | +| Embarrassment | Reputation | Blackmail | +| | Civil Liberties | | + +- It's not just Big Brother +- It-s not just corporations +- Privacy is about our relationships with every other individual and + organization out there + +] +--- +# Five Reasons Why Privacy is Hard + +### 1 Strong Incentives to for Companies to Collect Data +### 2 Low Knowledge, Awareness, Motivation by Devs +### 3 Companies Get Little Pushback on Privacy +### 4 Unclear What the Right Thing To Do Is +### 5 Burden on End-Users is Too High + +??? +- Barriers to collecting data are also really low +- More data means better predictive models +- Many developers don’t realize how much data their app is collecting (Or that it was collecting data at all) + - In one study, over 40% of apps collect data only because of these libraries +- Lack of info means privacy does not influence customer purchases. Less than 0.1% of reviews on Google Play mention privacy concerns +- Individuals also have to make too many decisions +--- +# Concerns + +Significant Societal Challenges for Privacy + +Who should have the initiative? + +--- +# Mixed-initiative interfaces + +Basically, who is in charge? +- Does person initiate things? Or computer? +- How much does computer system do on your behalf? + +Example: Autonomous vehicles +- Some people think Tesla autopilot is full autonomous, leads to risky actions + +Why initiative matters +- Potential major shift: instead of direct manipulation, some smarts (intelligent agent) for automation +--- +.left-column50[ +## Mixed-initiative best practices +- Significant value-added automation +- Considering uncertainty +- Socially appropriate interaction w/ agent +- Consider cost, benefit, uncertainty +- Use dialog to resolve uncertainty +- Support direct invocation and termination +- Remember recent interactions +] +.right-column50[ + + +] +--- +.left-column50[ +## Mixed-initiative best practices +- Significant value-added automation +- Considering uncertainty +- Socially appropriate interaction w/ agent +- Consider cost, benefit, uncertainty +- Use dialog to resolve uncertainty +- Support direct invocation and termination +- Remember recent interactions +] +.right-column50[ + + +] +??? +Can see what agent is suggesting, in terms of scheduling a meeting + +--- +.left-column50[ +## Mixed-initiative best practices +- Significant value-added automation +- Considering uncertainty +- Socially appropriate interaction w/ agent +- Consider cost, benefit, uncertainty +- Use dialog to resolve uncertainty +- Support direct invocation and termination +- Remember recent interactions +] +.right-column50[ + + +] +??? +Uses anthropomorphized aganet +Uses speech for input +Uses mediation to help resolve conflict +--- +.left-column[ +## Mixed-initiative best practices +] + +.right-column[ +Built-in cost-benefit model in system +- If perceived benefit >> cost, then do the action +- Otherwise wait + +Note that this is just one point in design space (1999), and still lots of open questions +- Ex. Should “intelligence†be anthropomorphized? +- Ex. How to learn what system can and can’t do? +- Ex. What kinds of tasks should be automated / not? +- Ex. What are strategies for showing state of system? +- Ex. What are strategies for preventing errors? +] +--- + +# Concerns + +Significant Societal Challenges for Privacy + +Who should have the initiative? + +Bias in Machine Learning +--- +background-image: url(img/ml/gma.png) + + +.quote[Johnson says his jaw dropped when he read one of the reasons American +Express gave for lowering his credit limit: + +![:fa quote-left] Other customers who have used their card at establishments +where you recently shopped have a poor repayment history with American +Express. +] +--- +.right-column[ + + +] +--- + +# Concerns + +Significant Societal Challenges for Privacy + +Who should have the initiative? + +Bias in Machine Learning + +Understanding ML +--- +# Understanding what is going on: Forming Mental Models + +How does a system know I am addressing it? + +How do I know a system is attending to me? + +When I issue a command/action, how does the system know what it relates to? + +How do I know that the system correctly understands my command and correctly executes my intended action? + +.footnote[ +Belloti et al., CHI 2002 ‘Making Sense of Sensing’ +] +--- +# Wrong location-based rec + + + +??? +Why did it not tell me about the Museum? How does it determine my location? +Providing explana7ons to these ques7ons can make Intelligent systems Intelligible + +other examples: caregiving hours by insurance company, etc + +--- +# Types of feedback + +Feedback: crucial to user’s understanding of how a system works and helping guide future action +- What did the system do? +- What if I do W, what will the system do? +- Why did the system do X? +- Why did the system not do Y +- How do I get the system to do Z? +--- +# Summary ML and ethics + +ML is powerful (but not perfect), often better than heuristics + +Basic approach is collect data, train, test, deploy + +Hard to understand what algorithms are doing (transparency) +- ML algorithms just try to optimize, but might end up finding a proxy for race, gender, computer, etc +- But hard to inspect these algorithms +- Still a huge open question + +Privacy +- How much data should be collected about people? +- How to communicate this to people? +- What kinds of inferences are ok? + +--- +# End of deck + +--- +.left-column[ +## Regression + + +] +.right-column[ +Predicting a *continuous value* based on inputs +- Ex. House price based on #rooms, #bathrooms, etc +- Ex. #views based on page content + +Simple example: linear regression +- Same as in statistics +- Seeks to minimize errorin predictions + +Lots of algorithms +- See Wikipedia +] + +--- + +.left-column[ +## Example classification algorithms] +.right-column[ +Naïve Bayes (probabilities) + +Neural Networks / Deep Learning (human brain) + +**Decision Tree (workflow)** + +Support Vector Machine (analogy / similarity) + +] + +--- +.left-column[ +## Classification +] +.right-column[ +Predicting from a *set of categories* +- Ex. {Spam, Ham}? +- Ex. {Chalupa, Taco, Burrito}? + +Lots of variants +- Multi-class (the examples above) +- One-class (identifies all objects in that class) +- Multi-label (it’s both a Chalupa and a Burrito) + +Also lots of algorithms +- See Wikipedia +] + diff --git a/slides/wk09/web.html b/slides/wk09/web.html new file mode 100644 index 0000000000000000000000000000000000000000..f1b9ad651bf758d2e98857cc036b0c847a506743 --- /dev/null +++ b/slides/wk09/web.html @@ -0,0 +1,337 @@ +--- +layout: presentation +title: Web Programming +description: Interaction Programming in Web Development +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Interaction Programming in Web Development + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout: false + +[//]: # (Outline Slide) +# Today's goals + +- Interaction Programming in Web Development + - Crash course on Web Programming + - Spot The Heron: web version + +--- +# Spot The Heron review + +Code for the [Spot The Heron](https://gitlab.cs.washington.edu/cse340-20sp-students/cse340-spottheheron) case study. +- Layout was achieved with high level tool which generated XML +- Images were stored in the "drawable" directory +- When app started the `AppCompatActivity#onCreate(Bundle savedInstanceState)` was called. This method: + - Set the app to use the XML defined layout + - Initialized some variables + - Registered callbacks for the three buttons - previous, slideshow, and next + - Used the `loadImage(int image)` to load the first image (0th index) in the list of file names +- The `loadImage(int image)` method + - Got a handle on the image view interactor using an id `findViewById(R.id.heronView)` + - Set the image view's source to be the new image. + - Set the content description of the image view to be in line with the new image. +- If the previous or next button was pressed, the `switchImage(boolean forward)` method is called. +- If the slideshow button was pressed, a timer would start that changes the image every 1500 ms + +--- +# Spot The Heron Comparison + +|Android Version | Web Version | +| :--: | :--: | +||| + +--- +# Interlude: What is a web page really? + +| Content | Structure | Style | Behavior | +| :--: | :--: | :--: | :--: | +|| +| Words and Images | HTML | CSS | JavaScript | + +--- +# Interlude: What is a web page really? + +| Content | Structure | Style | Behavior | +| :--: | :--: | :--: | :--: | +||| +| Words and Images | HTML | CSS | JavaScript | + +--- +# Interlude: What is a web page really? + +| Content | Structure | Style | Behavior | +| :--: | :--: | :--: | :--: | +|||| +| Words and Images | HTML | CSS | JavaScript | + + +--- +# Interlude: What is a web page really? + +| Content | Structure | Style | Behavior | +| :--: | :--: | :--: | :--: | +||||| +| Words and Images | HTML | CSS | JavaScript | + +--- +# Vocabulary + +- **Internet** - Hardware infrastructure of connected computers and wires +- **World Wide Web (WWW) (http)** - The information on the Internet made up of files and folders stored on computers +- **Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), & JavaScript (JS)** - The languages that we use to program our webpages +- **Web Browser** An application (Chrome, Netscape, Safari) that interprets our web languages and renders it visually + +--- +# Languages + +Java != JavaScript + +| Java | JavaScript | HTML/CSS | +| -- | -- | -- | | +| Compiled | Interpreted | Rendered Data | +| Type safe | Not type safe | N/A | + +--- +# Lifecycle of a browser* loading a page + +1. Fetch the page +2. Parse the page +3. Build up an internal representation of the web page +4. Display the page + +.footnote[*: As seen by Chrome] + +--- +# Fetch the Page + +1. Connect to the **Internet** and ask for the URL +2. As a **DNS** (Domain name service) to find the machine with the appropriate resources +3. Ask the machine with the resources for the web page with a **GET request** +4. Transfer file(s) the internet using the **TCP/IP** protocol back to your machine. + +--- +.left-column[# View Page Source + +[Spot The Heron Solution](webpages/spottheheron-solution.html) +] + +.right-column[ + +] + + +--- +# Parse and Display the Page + +.left-column[ + + +] + +.right-column[ +1. First line: <!DOCTYPE html> + - Ok: need to build an internal representation of the page +2. Line-by-line, go through the HTML + - If one of the tags links to a cascading style sheet (CSS) file, load and parse it + - If one of the tags links to Javascript (JS) for behavior, load and parse it +3. FINALLY display the page… +] + +--- +# Hypertext Markup Language (HTML) + +- A subset of XML +- Keywords that are surrounded by the ‘<‘ and ‘>’ (“alligatorsâ€) are Tags +- Tags label the structure of parts of your web page + - You put the associated content within the tags +- There are two types of tags + - Open and closing pairs + - Ex: <body>This is some text for my body</body> + - Most content tags will be of this type + - Self-closing tags + - `<img />`, `<hr />`, `<br />`, `<link />` +- Every tag must be a pair or self-closing! +- Tags can be nested! + + +--- +# Basic HTML Skeleton + +```html +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title></title> + </head> + <body> + + </body> +</html> +``` + + +--- +# Adding content + +- There are 100s of tags! See [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)! +- Some simple tags include + - Title `<title></title>` (which nests inside your `<head></head>`) + - Headings `<h1></h1>` .. `<h6></h6>` + - Paragraphs `<p>` + - Ordered or unordered lists: `<ol></ol>`, `<ul></ul>`, with list elements `<li></li>` + - Horizontal rules `<hr />` + - Strong `<strong></strong>` which defaults to a bold style and emphasis `<em></em>` which defaults to italicized in most browsers. +- Some tags add semantic context + - `<header></header>`: The header or banner that displays the title of the page + - `<main></main>`: The bulk of the content of the page + - `<footer></footer>`: The footer is optional but you can put contact info and copyright date in there. +- Some tags need additional information, added to a tag with attributes + - Links to other pages `<a href="filename"></a>` + - Links to other pages `<img src="img.jpg" alt="Description!"/>` +- Some tags (comments) are important for documentation `<!-- -->` + + + +--- +# Document Object Model (DOM) + +.left-column[ + + +] + +.right-column[ +- This builds a hierarchy of document elements in what we call the **Document Object Model** +- Looks very much like the Android Interactor Hierarchy + + +] + +--- +# Cascading Style Sheets (CSS) + +- Allows us to change the look and feel of the content on the page +- Style is separated into a .css file + - Makes styling multiple pages easier + - Allows changing multiple pages easier +- Style sheets must be linked to an html page in the <head> for the styles to work + `<link href=“style.css†rel=“stylesheet†/>` +- Great example is [CSS Zen Garden](http://www.csszengarden.com/) + +--- +# CSS + +.left-column[ +- Files consist of one or more rule sets +- Each rule set has a selector which chooses which HTML elements you want to style +- Style properties are set with rules which are property/value pairs +- Syntax is important +- More on [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) + +] + +.right-column[ + + +From [W3Schools](https://code.makery.ch/library/html-css/part3/) +] + +--- +# Layout in CSS + +Layout can be [complicated](https://www.amazon.com/CSS-Awesome-Mug-Programmer-Developer/dp/B06Y13QC8N), +fortunately there is CSS [Flexbox](https://courses.cs.washington.edu/courses/cse154/flexboxducky/) or Grid!! + + + + +--- +# Spot The Heron Conversion +.left-column[ +Mind blowing demo time! +] + +.right-column[ + +] + +--- +# Some Comparisons + +| Android | Web | +| --- | --- | +| Java | HTML/CSS/JS | +| Layouts | CSS Flexbox or Grid | +| Interactor Hierarchy | Document Object Model (DOM) | +| Content Description | alt text | +| Paint objects on a canvas | CSS | +| `onCreate` | `window.addEventListener("load", init);` | +| `View.OnClickListener#onClick` | `domElement.addEventListener("click", callback);` | + +--- +# The Application Stack for Devices - Review +.left-column[.font-smaller[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + +class ap,w,o,h yellow +class hlt,t green + +</div> +]] + +.right-column[ +- **Application Program** - An application designed for an end user to perform specific tasks. +- **High Level Tools** - Graphical interfaces that that let you specify parts of your interface (such as layout). Subject to Worfian Effects +- **Toolkit** - A set of libraries and tools you use to develop applications. +- **Window System** - Manages window size and visibility across applications +- **OS** - The operating system that is running on the device, providing system services such as acceess to displays, input devices, file I/O +- **Hardware** - The device that is running software, such as an Android Phone + +High level tools and the the Toolkit are generally packaged as part of a toolkit but really should be thought of as separate things. (You can program the toolkit without the tools. ) +] +--- +# The Application Stack for Web Programming +.left-column[.font-smaller[ +<div class="mermaid"> + graph LR + ap[Application Program] + hlt[High Level Tools] + t[Toolkit] + w[Window System] + o[OS] + h[Hardware] + +class ap,w,o,h yellow +class hlt,t green + +</div> +]] + +.right-column[ +- **Application Program** - A web page +- **High Level Tools** - Dream Weaver, Adobe XD, Google Web Designer, etc +- **Toolkit** - HTML/CSS/JavaScript, jQuery, React, etc. Browser tools. +- **Window System** - Browser running in a Windowing system. +- **OS** - The web browser itself? Or the browser and the OS combined? +- **Hardware** - The device that is running OS and browser, such as a Mac, PC or Phone. + +You can do web programming with a notepad editor and a browser, nothing more. +] +--- +# End of Deck diff --git a/slides/wk09/webpages/img/after.svg b/slides/wk09/webpages/img/after.svg new file mode 100644 index 0000000000000000000000000000000000000000..ec2fa420965037676613a51722eeb6d321a0c630 --- /dev/null +++ b/slides/wk09/webpages/img/after.svg @@ -0,0 +1,13 @@ +<svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + id="vector"> + <path + id="path" + d="M 10 6 L 8.59 7.41 L 13.17 12 L 8.59 16.59 L 10 18 L 16 12 Z" + fill="#000000"/> + <path + id="path_1" + d="M 0 0 L 24 0 L 24 24 L 0 24 Z" + fill="none"/> +</svg> diff --git a/slides/wk09/webpages/img/before.svg b/slides/wk09/webpages/img/before.svg new file mode 100644 index 0000000000000000000000000000000000000000..fb07fa0cf6f2d3392cdb144a64311b7c87e0e5cc --- /dev/null +++ b/slides/wk09/webpages/img/before.svg @@ -0,0 +1,13 @@ +<svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + id="vector"> + <path + id="path" + d="M 15.41 7.41 L 14 6 L 8 12 L 14 18 L 15.41 16.59 L 10.83 12 Z" + fill="#000000"/> + <path + id="path_1" + d="M 0 0 L 24 0 L 24 24 L 0 24 Z" + fill="none"/> +</svg> diff --git a/slides/wk09/webpages/img/cold.jpg b/slides/wk09/webpages/img/cold.jpg new file mode 100644 index 0000000000000000000000000000000000000000..9b13846a9d5450f4b1cae09f1282440dfcac9b71 Binary files /dev/null and b/slides/wk09/webpages/img/cold.jpg differ diff --git a/slides/wk09/webpages/img/dontcare.jpg b/slides/wk09/webpages/img/dontcare.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7a0cdf895ad662528c4aafe1019e4dfd3659a982 Binary files /dev/null and b/slides/wk09/webpages/img/dontcare.jpg differ diff --git a/slides/wk09/webpages/img/fishing.jpg b/slides/wk09/webpages/img/fishing.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a7dfe9604be5f6275fba6782f1c3b5e8476e9615 Binary files /dev/null and b/slides/wk09/webpages/img/fishing.jpg differ diff --git a/slides/wk09/webpages/img/flying.jpg b/slides/wk09/webpages/img/flying.jpg new file mode 100644 index 0000000000000000000000000000000000000000..e92fe38845efa6affa4ade9b96479488e3fc12c3 Binary files /dev/null and b/slides/wk09/webpages/img/flying.jpg differ diff --git a/slides/wk09/webpages/img/gru.jpg b/slides/wk09/webpages/img/gru.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0d1372fe6cdebfea639355a7d57158372cff3b31 Binary files /dev/null and b/slides/wk09/webpages/img/gru.jpg differ diff --git a/slides/wk09/webpages/img/hidden.jpg b/slides/wk09/webpages/img/hidden.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0fd03f0b2224951780af489ae16e8d25a54895ac Binary files /dev/null and b/slides/wk09/webpages/img/hidden.jpg differ diff --git a/slides/wk09/webpages/img/ic_navigate_next.xml b/slides/wk09/webpages/img/ic_navigate_next.xml new file mode 100644 index 0000000000000000000000000000000000000000..932261b4e108eaa248b3a65ab554e36c3aa640ef --- /dev/null +++ b/slides/wk09/webpages/img/ic_navigate_next.xml @@ -0,0 +1,13 @@ +<vector xmlns:android="http://schemas.android.com/apk/res/android" + xmlns:aapt="http://schemas.android.com/aapt" + android:width="24dp" + android:height="24dp" + android:viewportWidth="24" + android:viewportHeight="24"> + <path + android:fillColor="#000000" + android:pathData="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/> + <path + android:pathData="M0 0h24v24H0z" + /> +</vector> \ No newline at end of file diff --git a/slides/wk09/webpages/img/ic_slideshow.xml b/slides/wk09/webpages/img/ic_slideshow.xml new file mode 100644 index 0000000000000000000000000000000000000000..47e37eb4105558fd5cc0b1226853fd7cd2be44f4 --- /dev/null +++ b/slides/wk09/webpages/img/ic_slideshow.xml @@ -0,0 +1,13 @@ +<vector xmlns:android="http://schemas.android.com/apk/res/android" + xmlns:aapt="http://schemas.android.com/aapt" + android:width="24dp" + android:height="24dp" + android:viewportWidth="24" + android:viewportHeight="24"> + <path + android:fillColor="#000000" + d="M0 0h24v24H0z" /> + <path + android:fillColor="#000000" + android:pathData="M10 8v8l5-4-5-4zm9-5H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/> +</vector> \ No newline at end of file diff --git a/slides/wk09/webpages/img/log.jpg b/slides/wk09/webpages/img/log.jpg new file mode 100644 index 0000000000000000000000000000000000000000..f68258248cd9496190a27722af1b4ec1efae5b8a Binary files /dev/null and b/slides/wk09/webpages/img/log.jpg differ diff --git a/slides/wk09/webpages/img/lonely.jpg b/slides/wk09/webpages/img/lonely.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7b0c82a3d832979bfda248b5563f5bf1eb78d24c Binary files /dev/null and b/slides/wk09/webpages/img/lonely.jpg differ diff --git a/slides/wk09/webpages/img/reeds.jpg b/slides/wk09/webpages/img/reeds.jpg new file mode 100644 index 0000000000000000000000000000000000000000..6b11581e06ddddebda2dcc506bc141bcca2a55e3 Binary files /dev/null and b/slides/wk09/webpages/img/reeds.jpg differ diff --git a/slides/wk09/webpages/img/reflection.jpg b/slides/wk09/webpages/img/reflection.jpg new file mode 100644 index 0000000000000000000000000000000000000000..18ded76e174597bf106d016612373a34e919c9c1 Binary files /dev/null and b/slides/wk09/webpages/img/reflection.jpg differ diff --git a/slides/wk09/webpages/img/slideshow.svg b/slides/wk09/webpages/img/slideshow.svg new file mode 100644 index 0000000000000000000000000000000000000000..d187b03ac8f66c779b8fed1f892f4955ffdd0cab --- /dev/null +++ b/slides/wk09/webpages/img/slideshow.svg @@ -0,0 +1,9 @@ +<svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + id="vector"> + <path + id="path_1" + d="M 10 8 L 10 16 L 15 12 L 10 8 Z M 19 3 L 5 3 C 3.9 3 3 3.9 3 5 L 3 19 C 3 20.1 3.9 21 5 21 L 19 21 C 20.1 21 21 20.1 21 19 L 21 5 C 21 3.9 20.1 3 19 3 Z M 19 19 L 5 19 L 5 5 L 19 5 L 19 19 Z" + fill="#000000"/> +</svg> diff --git a/slides/wk09/webpages/img/sunrise.jpg b/slides/wk09/webpages/img/sunrise.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d1b3e5f482a4e88c9de234695fe7eef91c0f73f6 Binary files /dev/null and b/slides/wk09/webpages/img/sunrise.jpg differ diff --git a/slides/wk09/webpages/img/treebird.jpg b/slides/wk09/webpages/img/treebird.jpg new file mode 100644 index 0000000000000000000000000000000000000000..582e5d677d4da1b9b5846f7d8be2b7b5bc03fa3f Binary files /dev/null and b/slides/wk09/webpages/img/treebird.jpg differ diff --git a/slides/wk09/webpages/img/wading.jpg b/slides/wk09/webpages/img/wading.jpg new file mode 100644 index 0000000000000000000000000000000000000000..38198c303fe104efa44a10059419b43129e7c54a Binary files /dev/null and b/slides/wk09/webpages/img/wading.jpg differ diff --git a/slides/wk09/webpages/spottheheron-solution.html b/slides/wk09/webpages/spottheheron-solution.html new file mode 100644 index 0000000000000000000000000000000000000000..7206ed583167fa1319d332d16419892f665c3e7f --- /dev/null +++ b/slides/wk09/webpages/spottheheron-solution.html @@ -0,0 +1,25 @@ +<!-- + Lauren Bricker + Interaction Programming in Web Programming Lecture + Spot the Heron as a web page +--> +<!DOCTYPE html> +<html> + <head> + <title>Spot the Heron</title> + <link rel="stylesheet" href="spottheheron.css"> + <!-- <script src="spottheheron.js"></script> --> + <script src="spottheheron-solution.js"></script> + </head> + <body> + <section> + <h1>Spot The Heron</h1> + <img id="heron-pic" src="img/cold.jpg" alt="A very cold heron"> + <div> + <button id="prev-btn"><img src="img/before.svg" alt="Go to previous pet"></button> + <button id="play-btn"><img src="img/slideshow.svg" alt="Run slideshow"></button> + <button id="next-btn"><img src="img/after.svg" alt="Go to next pet"></button> + </div> + </section> + </body> +</html> diff --git a/slides/wk09/webpages/spottheheron-solution.js b/slides/wk09/webpages/spottheheron-solution.js new file mode 100644 index 0000000000000000000000000000000000000000..607fab3619e6c456267d3e01155025ae22eb6c41 --- /dev/null +++ b/slides/wk09/webpages/spottheheron-solution.js @@ -0,0 +1,107 @@ +/* + Lauren Bricker + Interaction Programming in Web Programming Lecture + Spot the Heron as a web page + Javascript to add the behavior to the static web page. +*/ + +"use strict"; +(function() { + + /** List of images in the img directory */ + let images = ["cold", "dontcare", "fishing", "flying", + "gru", "hidden", "log", "lonely", "reeds", "reflection", "sunrise", + "treebird", "wading"]; + + /** Index of currently selected Image */ + let whichImage; + + + /** Whether we're in the slideshow or not */ + let inSlideshow = false; + + /** How many seconds between flipping images in the image view */ + const SLIDESHOW_TIME = 1500; + + let timer = null; + + window.addEventListener("load", init); + + // Note: This function is called as soon as the window is loaded (and the browser + // has created the HTML DOM for the page) + function init() { + // Add event listeners for clicking the #prev-btn, #next-btn, and #play-btn. + id("prev-btn").addEventListener("click", function() {switchImage(false);} ); + id("next-btn").addEventListener("click", function() {switchImage(true);} ); + id("play-btn").addEventListener("click", doSlideshow); + inSlideshow = false; + whichImage = 0; + loadImage(whichImage); + } + + // Callback to handle the slideshow button + function doSlideshow () { + if (!inSlideshow) { + //sets image to flip in SLIDESHOW_TIME ms. + timer = setInterval(intervalImage, SLIDESHOW_TIME); + } + else { + //turns off auto flipping + clearInterval(timer); + timer = null; + } + inSlideshow = !inSlideshow; + } + + + // Add the rest of the functions here! + /** Method to load an image from the images array into the heronView ImageView interactor + * + * @param img the number of the image to load, assumes 0 <= img < images.length + */ + function loadImage(img) { + let heronView = id("heron-pic"); + heronView.src = "img/" + images[img] + ".jpg"; + heronView.alt = images[img]; + } + + /** Method to move onto the next or previous image, depending on the flag passed in + * + * @param forward true if you are to go to the next image, false if not. + */ + function switchImage(forward) { + if (forward) { + if (whichImage == images.length - 1) + whichImage = 0; + else + whichImage++; + } + else { + if (whichImage == 0) + whichImage = images.length - 1; + else + whichImage--; + } + loadImage(whichImage); + } + + /** Method to keep flipping the images. + * + */ + function intervalImage() { + // Switches image + switchImage(true); + + } + + /** -------------------------- Helper functions -------------------------- */ + /** + * Returns the element that has the ID attribute with the specified value. + * @param {string} idName - element ID + * @returns {object} DOM object associated with id. + */ + function id(idName) { + return document.getElementById(idName); + } + +})(); diff --git a/slides/wk09/webpages/spottheheron.css b/slides/wk09/webpages/spottheheron.css new file mode 100644 index 0000000000000000000000000000000000000000..5f83d96865f934651ac9933e9283917ddd970148 --- /dev/null +++ b/slides/wk09/webpages/spottheheron.css @@ -0,0 +1,56 @@ +/* + Lauren Bricker + Interaction Programming in Web Programming Lecture + Spot the Heron as a web page + Styles to make the Spot the Heron app look purty. +*/ + +body { + /* simulating the screen size */ + width: 540px; + height: 960px; + border-radius: 10px; + border: 2px solid black; + margin: 1em auto 0 auto; +} + + +section { + margin: 1.5em; + display: flex; + flex-direction: column; + justify-content: flex-start; + height: 95%; +} + +h1 { + background-color: #c0FFEE; + font-size: 2em; + color: #303F9F; + text-align: center; + font-weight: bold; + font-family: roboto, sans-serif; + margin: 0; + padding: .1em; + margin-bottom: .8em; +} + +img { + margin: 0; +} + +div { + display: flex; + justify-content: space-between; + margin-top: auto; + margin-bottom: +} + +button { + height: 100px; + width: 100px; + text-align: center; + vertical-align: center; + border: 0; + padding: 0; +} diff --git a/slides/wk09/webpages/spottheheron.html b/slides/wk09/webpages/spottheheron.html new file mode 100644 index 0000000000000000000000000000000000000000..1dd9ba0d63f24b04eae09ed79b958c4e22b95e33 --- /dev/null +++ b/slides/wk09/webpages/spottheheron.html @@ -0,0 +1,22 @@ +<!-- + Lauren Bricker + Interaction Programming in Web Programming Lecture + Spot the Heron as a web page +--> +<!DOCTYPE html> +<html> + <head> + <title>Spot the Heron</title> + </head> + <body> + <section> + <h1>Spot The Heron</h1> + <img id="heron-pic" src="img/cold.jpg" alt="A very cold heron"> + <div> + <button id="prev-btn"><img src="img/before.svg" alt="Go to previous pet"></button> + <button id="play-btn"><img src="img/slideshow.svg" alt="Run slideshow"></button> + <button id="next-btn"><img src="img/after.svg" alt="Go to next pet"></button> + </div> + </section> + </body> +</html> diff --git a/slides/wk09/webpages/spottheheron.js b/slides/wk09/webpages/spottheheron.js new file mode 100644 index 0000000000000000000000000000000000000000..fe18db8747228e56ce1a333372956dc967e3a968 --- /dev/null +++ b/slides/wk09/webpages/spottheheron.js @@ -0,0 +1,33 @@ +/* + Lauren Bricker + Interaction Programming in Web Programming Lecture + Spot the Heron as a web page + Javascript to add the behavior to the static web page. +*/ + +"use strict"; +(function() { + + window.addEventListener("load", init); + + // Note: This function is called as soon as the window is loaded (and the browser + // has created the HTML DOM for the page) + function init() { + // Add event listeners for clicking the #prev-btn, #next-btn, and $play-btn. + } + + // Add the rest of the functions here! + + + + /** -------------------------- Helper functions -------------------------- */ + /** + * Returns the element that has the ID attribute with the specified value. + * @param {string} idName - element ID + * @returns {object} DOM object associated with id. + */ + function id(idName) { + return document.getElementById(idName); + } + +})(); diff --git a/slides/wk10/final.html b/slides/wk10/final.html new file mode 100644 index 0000000000000000000000000000000000000000..9d263d283d741332158ac48bac06ce280de83920 --- /dev/null +++ b/slides/wk10/final.html @@ -0,0 +1,446 @@ +--- +layout: presentation +title: Final Exam Review +description: Final Exam Review +class: middle, center, inverse +--- +name: inverse +layout: true +class: center, middle, inverse +--- +# Final Exam Review + +Jennifer Mankoff + +CSE 340 Spring 2019 + +--- +layout: false + +.title[Plan for Final (Monday 8:30-10)] +.body[ +Will cover material from whole course + +Emphasis on second half + +Same basic structure, more questions +- Long answer questions +- Short answer questions +- Coding questions +- 'Cheat Sheet' allowed (2 sided, hand written) + +Nothing on sustainability; augmented reality + + +] +--- +.title[Subjective exam question advice] +.body[ +Study by synthesizing and summarizing material + +An adequate answer can get you around 85% +Ex: +Human eyes have cones that can see red green and blue. Yellow is just +a mix of these. + +A complete, deeper answer can get you an A +Ex: +Our eyes can only detect red, green and blue wavelengths of light +(with cones) and greyscale (with rods). They see color as a +combination of these wavelengths. Thus, displaying “true†yellow +pixels won’t make a difference since our eyes will see them as a +combination of red and green anyway. + + +When writing: Aim to stay within 10% of suggested length, make a point +and then provide support for it. A verbose answer may get you back to +B (if redundant or wrong) + + +Show your work extra important +] + +--- +.title[Core concepts from first half] +.body[ + +Input +- Input models (events) +- Event dispatch +- Event handling (PPS) likely coding problem +- Callbacks to application likely coding problem + +Output +- Interactor Hierarchy design & use +- Drawing models (`onDraw()`) likely coding problem +- Layout (`onLayout()` or `XML`) likely coding problem +- Damage and redraw process +] +--- +.title[And Introduced Model View Controller] +.body[ +Model +- Model of a single interactor: Typically a field +- Application model + - Separate from view model +- Typically more persistent (e.g., saved with bundler) + +View +- `onDraw()` in a single interactor +- Interactor hierarchy in an application + +Controller +- PPS in a single interactor +- callbacks (e.g., custom listeners) in an application +] +--- +.left-column50[ +## 2D Drawing -> 3D modeling + +Same core concepts + +Now in OpenSCAD + +Key ideas: +- 3D + - `cube (size)` + - `cylinder (h, r|d, center)` + - `polyhedron (points, triangles, convexity)` + - `sphere (radius | d=diameter)` + ] + +.right-column50[ +## Similar Transformations + +- Transformations + - `translate ([x, y, z])` + - `rotate ([x, y, z])` + - `scale ([x, y, z])` + - `resize ([x, y, z], auto)` +- Boolean operations + - `union()` + - `difference()` (subtract second from first) + - `intersection()` +] + +??? +Limitations of 3D printing? + +cost for large scale manufacturing + + +--- +.title[Studies] + +.body[ + +<div class="mermaid"> +graph LR +S((.)) --> Hypothesis((Hypothesis:<br>Decreased seek <br>time and errors)) +Hypothesis -- "Study Design" --> Method((2 menu x <br> 3 task conditions )) +Method -- "Run Study" --> Data((Consent<br>Consistency)) +Data -- "Clean and Prep" --> Analysis((Clean<br>Compute)) +Analysis --> Conclusions((Conclusions)) + +classDef finish outline-style:double,fill:#d1e0e0,stroke:#333,stroke-width:2px; +classDef normal fill:#e6f3ff,stroke:#333,stroke-width:2px; +classDef start fill:#d1e0e0,stroke:#333,stroke-width:4px; +classDef invisible fill:#FFFFFF,stroke:#FFFFFF,color:#FFFFFF + +linkStyle 0 stroke-width:4px; +linkStyle 1 stroke-width:4px; +linkStyle 2 stroke-width:4px; +linkStyle 3 stroke-width:4px; +linkStyle 4 stroke-width:4px; + + +class S invisible +class Hypothesis,Conclusions start +class Method,Data,Analysis normal +</div> + +method: +conditions | sessions | trials + +ethics: +beneficence | respect for persons | justice + +- Which is violated by a coercive statement in a consent form? +- Which is violated by an inequitable selection of participants? +- Which is violated by risky, pointless research? + +analysis: +How do we determine causality? + - correlation + - intervention +] + +--- +.title[Accessibility] +.body[ +**Disability** is a +mismatched interaction +between someone and +their context +] +--- +.title[Example Q1: Which is true about disability?] +.body[ +A personal attribute +Context dependent +Permanent +] +--- +.title[Example Q2: Is using a phone while holding a dog leash] +.body[ +Temporary impairment +Permanent impairment +Situational impairment? +] +--- +.title[Example Q3: List three examples of Assistive technologies] + +??? +Screen reader +Zooming +Speech input +Sticky keys +Xbox adaptive controller +High contrast interaction + +--- +.title[Accessibility Testing] +.body[ + +| Error | Description | +|----------------------|-------------------------------------------------------------------------------------------------------------------------------| +| Clickable Items | Overlapping clickable items | +| Editable Image Label | TextView has a content description. This might interfere with a screen reader’s ability to read the content of the text field | +| Image Contrast | Low contrast in image or icon | +| Item Descriptions | Items with identical speakable text | +| Item Label | Missing element label | +| Item Type Label | Item label ends with type, e.g., “Play Button.†TalkBack automatically announces item type, so information is redundant | +| Link | URL in link may be invalid | +| Text Contrast | Low text contrast between foreground and background | +| Touch Target | Item is too small| + +] +??? +minimum to fix each problem (legal accessibility) + +true accessibility + +--- +.title[Affordances & Feedback +] +.body[ +Good Affordance| Bad Affordance +----|---- + |  + +Well-designed objects have affordances +- Clues to their operation that are readily apparent +- Often visual, but not always (e.g., speech) +- Allows and promotes certain actions +] +??? +Opportunities to act which are readily apparent to the user ... and +appropriate to the user’s abilities + +relationship of affordence and feedback + +Form “affords†certain actions and makes that apparent + +--- +.title[# Model of Mental Models] +.body[ + +] + +??? +- Where are the gulf of evaluation and gulf of execution in this + image? Gulf of execution is the user 'error' region (user requests + function the __system DOESNT HAVE__), gulf of + evaluation is when the user __doesn't realize the system HAS a + functionality__. + +- How does undo help the user bridge them? + +--- + +.title[Undo Sample Q] +.body[ +Something other than drawing! Let's try text + +What should be the "action"? Characters or words? +] +-- +.body[ + +- type "helo" +- type "world" +- undo +- undo +- type "hello" +- redo +- type "world" +] + +--- +.left-column[ +### Heuristic Evaluation +- H1: Visibility of system status +- H2: Match between system and the real world +- H3: User control and freedom +- H4: Consistency and standards +- H5: Error prevention +- H6: Recognition vs. recall +- H7: Flexibility and efficiency of use +- H8: Aesthetic and minimalist design +- H9: Error recovery +- H10: Help and Documentation +] +.right-column[ +## UAR +- Which heuristic +- Explanation +- Severity + - Frequency + - Impact + - Persistence +- Scale: + - 0 - Not a problem at all + - 1 - Cosmetic problem only + - 2 - Minor usability problem (fix with low priority) + - 3 - Major usability problem (fix with high priority) + - 4 - Usability catastrophe (imperative to fix before release) + +] +.upper_right[] +--- +.title[HE pros and cons?] +--- +.left-column50[ +## Pros + +Discount usability engineering + +Intimidation low + +Don't need to identify tasks, activities + +Can identify some fairly obvious fixes + +Can expose problems user testing doesn’t expose + +Provides a language for justifying usability recommendations +] +.right-column50[ +## Cons + +Un-validated + +Unreliable + +Should use usability experts + +Problems unconnected with tasks + +Heuristics may be hard to apply to new technology + +Coordination costs] +--- +.title[Sensing and context-awareness] +.body[ +What makes an app context-aware? + +] +??? +*use of implicit input* +--- +.title[Sensing and context-awareness] +.body[ +What makes an app context-aware? + + +*use of implicit input* +] +--- +.title[Types of context-aware apps] +-- +.body[ +Capture and Access + +Adaptive Services (changing operation or timing) + +Novel Interaction + +Behavioral Imaging + +General Solutions for Data Collection and Response + +Challenges? +] +??? +- Battery +- Raw sensors not behavior data +- Not the sensors we always want +- Computational complexity +- Latency in communication +- Basic software framework to support apps that can adapt to user behavior +- Apps that drive innovation +- How people use phones + +--- +.title[Fences and snapshots] +.body[ +When to use each?] + +--- +.left-column[ +## Behavior Change + + +] +.right-column[ +- Example Q: What stage does the leader board engage with? +- Example Q: What stage do the icons support +- Example Q: What aspect of this interface supports action? + + + +] +--- +.left-column[ +## Machine Learning + + +] + +.right-column[ + +<div class="mermaid"> +graph TD + T[Time] -- "10pm-8am" --> N[Noise] + T[Time] -- "8am-10pm" --> Aw2[Awake y=35,n=2] + N -- "Low" --> As[Asleep y=20,n=5] + N -- "High" --> Aw3[Awake y=10,n=2] + +</div> + +- Q1: What is this recognizing +- Q2: What features are being used? +- Q3: What are the labels? +- Q4: What will be predicted if there is noise between 10am and noon? +- Q5: What is the accuracy of this decision tree? +] +--- diff --git a/slides/wk10/heuristic.html b/slides/wk10/heuristic.html new file mode 100644 index 0000000000000000000000000000000000000000..e480672b76a9eba90217d235a195d3b0e295dce6 --- /dev/null +++ b/slides/wk10/heuristic.html @@ -0,0 +1,695 @@ +--- +layout: presentation +title: Heuristic Evaluation --Week 7, Friday-- +description: Heuristic Evaluation for Analyzing Interfaces +class: middle, center, inverse +--- + +layout: false + +# Hall of Shame? + +What do you think happened here? +.left-column50[ + +] +.right-column40[ + + + +] + +??? +Thanks to Jeremy Zhang for the find. + + +--- + +name: inverse +layout: true +class: center, middle, inverse + +# Heuristic Evaluation for Analyzing Interfaces + +{{site.author.name}} + +CSE 340 {{site.quarter}} +--- +layout: false + +[//]: # (Outline Slide) +# Today's goals + +- [Combined data from Menus](https://docs.google.com/spreadsheets/d/1neu_22-YTI3TsP5uHKMsiEs4yxxz4xtghk69bYIgoJo/edit?usp=sharing) +- Introduce Heuristic Evaluation +- Describe UARs +- Time at the end to fill out the [course eval](https://uw.iasystem.org/survey/227053) + +--- +.left-column[ +## Introducing Heuristic Evaluation] +.right-column[ +.quote[Discount usability engineering methods] + +-- Jakob Nielsen + +Involves a small team of evaluators to evaluate an interface based on recognized usability principles + +Heuristics–â€rules of thumb†+ +] +??? +"serving to discover or find out," 1821, irregular formation from Gk. heuretikos "inventive," related to heuriskein "to find" (cognate with O.Ir. fuar "I have found"). Heuristics "study of heuristic methods," first recorded 1959. + +--- +.left-column[ +## Introducing Heuristic Evaluation] +.right-column[ + +First introduced in 1990 by Nielsen & Molich + +Quick, inexpensive, popular technique + +~5 experts find 70-80% of problems +n +Based on 10 heuristics + +Does not require working interface +] +--- +<div class="mermaid"> +gantt + title Typical Heuristic Evaluation Process + section Evaluation + dateFormat DD + Designer Provides Setting (Description of Interface and List of Tasks) :list, 22, 5d + 5ish evaluators Try tasks and record problems :evals, after list, 5d + Designer conducts synthesis and analysis :synthesis, 28, 5d + Designer writes report :30, 5d +</div> + +--- +.left-column[ +## So what are the heuristics?] +-- +.right-column[ +- H1: Visibility of system status +- H2: Match between system and the real world +- H3: User control and freedom +- H4: Consistency and standards +- H5: Error prevention +- H6: Recognition vs. recall +- H7: Flexibility and efficiency of use +- H8: Aesthetic and minimalist design +- H9: Error recovery +- H10: Help and documentation +] +??? +These should not be hugely surprising after everything we've talked about... +--- +.left-column[ +## H1: Visibility of System Status + +Keep users informed about what is going on + +] +.right-column[ + +What does this interface tell you? + + + +] +-- +.right-column[ +- What input has been received--Does the interface above say what the search input was? +- What processing it is currently doing--Does it say what it is currently doing? +- What the results of processing are--Does it give the results of processing? + +Feedback allows user to monitor progress towards solution of their +task, allows the closure of tasks and reduces user anxiety (Lavery et +al) +] + +--- +.left-column[ +## H2: Match between system and real world + +Speak the users’ language + +Follow real world conventions +] +.right-column[ + + +- Use concepts, language and real-world conventions that are familiar to the user. +- Developers will need to understand the task from the point of view of users. +- Cultural issues relevant for the design of systems that are expected to be used globally. + +A good match minimizes the extra knowledge required to use the system, +simplying all task action mappings (re-expression of users’ intuitions +into system concepts) +] + + +--- +.left-column[ +## H2: Match between system and real world + +Example of a huge violation of this H2 + +] +.right-column[ + +| | | +|--|--| +|  |Possibly the biggest usability in problem in the Macintosh. Heuristic violation--people want to get their disk out of the machine--not discard it.| + +] +--- +.left-column[ +## H2: Match between system and real world + +Example of a mismatch depends on knowledge about users +] +.right-column[ + +Would an icon with a red flag for new mail be appropriate in all cultures? + + +] +--- +.left-column[ +## H3: User Control and Freedom +“Exits†for mistaken choices, undo, redo + +Don’t force down fixed paths + +] +.right-column[ + + +Users choose actions by mistake + +] + + +--- +.left-column[ +## H4: Consistency and Standards +] + +.right-column[ + + +Same words, situations, actions, should mean the same thing in similar +situations; same things look the same, be located in the same place. + +Different things should be different +] +--- +.left-column[ +## H4: Consistency and Standards +] + +.right-column[ +- Both H2 (Match between system and the real world) and H4 related to user’s prior knowledge. The difference is + - H2 is knowledge of world + - H4 of knowledge others parts of application and other applications on the same platform. +- Consistency within an application and within a platform. Developers need to know platform conventions. +- Consistency with old interface + +Consistency maximizes the user knowledge required to use the systems +by letting users generalize from existing experience of the system to +other systems +] +--- +.left-column[ +## H4: Consistency and Standards +] +.right-column[ + +Evidence: Should include at least +- two inconsistent elements in the same interface, or +- an element that is inconsisten with a platform guideline + +Explanation: What inconsistent element is and what it is inconsistent with + + +] +--- +.left-column[ +## H5: Error Prevention + +Careful design which prevents a problem from occurring in the first place +] + +.right-column[ + + +- Help users select among legal actions (e.g., greying out inappropirate +buttons) rather than letting them select and then telling them that +they have made an error (gotcha!). +- Subset of H1 (Visibility of system status) but so important it gets a separate heuristic. + +Motivation: Errors are a main source of frustration, inefficiency and +ineffectiveness during system usage (Lavery et al) + +Explanation in terms of tasks and system details such as adjacency of +function keys and menu options, discriminability of icons and labels. +] +--- +.left-column[ +## H6: Recognition Rather than Recall + +Make objects, actions and options visible or easily retrievable + +] +.right-column[ + + + +- Classic examples: + - command line interfaces (`rm *`) + - Arrows on keys that people can’t map to functions +- Much easier for people to remember what to do if there are cues in the environment + +Goes into working memory through perceptions +] +--- +.left-column[ +## H7: Flexibility and Efficiency of Use + +Accelerators for experts (e.g., gestures, keyboard shortcuts) + +Allow users to tailor frequent actions (e.g., macros) + +] +.right-column[ + + +- Typing single keys is typically faster than continually switching the +hand between the keyboard and the mouse and point to things on the +screen. +- Skilled users develop plans of action, which they will want +to execute frequently, so tailoring can capture these plans in the +interface. +] +--- +.left-column[ +## H8: Aesthetic and Minimalist design + +Dialogs should not contain irrelevant or rarely needed information + +] +.right-column[ + + + +- Visual search--eyes must search through more. More (irrelevant info) interferes with Long Term Memory (LTM) +retrieval of information that is relevant to task. +- Cluttered displays have the effect of increasing search times for commands or users missing features on the screen (Lavery et al) + +_Chartjunk_ (Tufte): "The interior decoration of graphics generates a lot of ink that does not tell +the viewer anything new." + +] +--- +.left-column[ +## H9: Help users recognize, diagnose, and recover from errors + +] +.right-column[ + + + +- Error messages in language user will understand +- Precisely indicate the problem +- Constructively suggest a solution + +] + +--- +.left-column[ +## H10: Help and Documentation + +Easy to search + +Focused on the user’s task + +List concrete steps to carry out + +Always available +] + +.right-column[ + + +Allow search by gist--people do not remember exact system terms + +] + +??? +If user ever even knew system terms. + + +--- +<div class="mermaid"> +gantt + title Typical Heuristic Evaluation Process + section Evaluation + dateFormat DD + Designer Provides Setting (Description of Interface and List of Tasks) :list, 22, 5d + 5ish evaluators Try tasks and record problems :evals, after list, 5d +</div> + +Why 5 or more people? + +-4 or 5 are recommended by Nielsen (this is a point of contention. I +aim for *saturation*). +- A single person will not be able to find all usability problems +- Different people find different usability problems +- Successful evaluators may find both easy and hard problems + + +??? +You can estimate how many you need (see NM book, pp 32-35). + +4 or 5 are recommended by Nielsen + +--- +<div class="mermaid"> +gantt + title Typical Heuristic Evaluation Process + section Evaluation + dateFormat DD + Designer Provides Setting (Description of Interface and List of Tasks) :list, 22, 5d + 5ish evaluators Try tasks and record problems :evals, after list, 5d +</div> + +How should the Designer "provide a setting"? How should the evaluator evaluate? + +--- +<div class="mermaid"> +gantt + title Typical Heuristic Evaluation Process + section Evaluation + dateFormat DD + Designer Provides Setting (Description of Interface and List of Tasks) :list, 22, 5d + 5ish evaluators Try tasks and record problems :evals, after list, 5d +</div> +.left-column[ +## What does the evaluator do?] +.right-column[ + +Designer: Briefing (HE method, Domain, Scenario) + +Evaluator: +- Two passes through interface (video in our case) +- Inspect flow +- Inspect each screen, one at a time against heuristics +- Fill out a *Usability Action Report* (we'll keep this simple in peer review) +] +??? + +NOT a single-user empirical test that is, do not say “I tried it and +it didn’t work therefore I’ll search for a heuristic this violates†+ +--- +<div class="mermaid"> +gantt + title Typical Heuristic Evaluation Process + section Evaluation + dateFormat DD + Designer Provides Setting (Description of Interface and List of Tasks) :list, 22, 5d + 5ish evaluators Try tasks and record problems :evals, after list, 5d +</div> + +.left-column[ +## Usability Action Report +] +.right-column[ +UAR rather than “Problem report†because you report good aspects as +well as problems -- you want to preserve them in the next iteration of +the system! + +- **UAR Identifier** (Type-Number) Problem or Good Aspect +- *Describe:* Succinct description of the usability aspect +- *Heuristics:* What heuristics are violated +- **Evidence:** support material for the aspect +- **Explanation:** your own interpretation +- *Severity:* your reasoning about importance +- **Solution:** if the aspect is a problem, include a possible solution and potential trade-offs +- **Relationships:** to other usability aspects (if any) +] +??? + +We'll ask you to do the things in italics in peer grading +--- +<div class="mermaid"> +gantt + title Typical Heuristic Evaluation Process + section Evaluation + dateFormat DD + Designer Provides Setting (Description of Interface and List of Tasks) :list, 22, 5d + 5ish evaluators Try tasks and record problems :evals, after list, 5d +</div> +.left-column[ +## Writing a description] +.right-column[ +Should be *A PROBLEM*, not a solution + +Don't be misleading (e.g., “User couldn’t find state in the list†when +the state wasn’t in the list) + +Don't be overly narrow (e.g., “PA not listed†when there is nothing +special about PA and other states are not listed) + +Don't be too broad, not distinctive (e.g., “User can’t find itemâ€) +] +--- +<div class="mermaid"> +gantt + title Typical Heuristic Evaluation Process + section Evaluation + dateFormat DD + Designer Provides Setting (Description of Interface and List of Tasks) :list, 22, 5d + 5ish evaluators Try tasks and record problems :evals, after list, 5d +</div> +.left-column[ +## Picking a Heuristic] +.right-column[ +Ok to list more than one + +This is subjective. Use your best judgement +] +--- +<div class="mermaid"> +gantt + title Typical Heuristic Evaluation Process + section Evaluation + dateFormat DD + Designer Provides Setting (Description of Interface and List of Tasks) :list, 22, 5d + 5ish evaluators Try tasks and record problems :evals, after list, 5d +</div> +.left-column[ +## Deciding on a severity] +.right-column[ +- Make a claim about factors and support it with reasons +- Consider *Frequency* (e.g., All +users would probably experience this problem because…) +- Consider *Impact* Will it be easy or hard to overcome. NOT is the task the user +is doing important (put importance of task in explanation and in +justification of weighting, if relevant). +- Consider *Persistence* Once the problem is known, is it a one-time problem or +will the user be continually bothered? NOT low persistence because the +user abandons goal (that is impact--can’t overcome it. If can’t +detect and can’t overcome, problem persists). + +] +??? +Why? Make claim (All users would PROBABLY experience this problem BECAUSE…) and IMMEDIATELY +--- +<div class="mermaid"> +gantt + title Typical Heuristic Evaluation Process + section Evaluation + dateFormat DD + Designer Provides Setting (Description of Interface and List of Tasks) :list, 22, 5d + 5ish evaluators Try tasks and record problems :evals, after list, 5d +</div> +.left-column[ +## Rating Severity + +5-point scale + +] +.right-column[ + +0 - Not a problem at all (or a good feature) + +1 - Cosmetic problem only + +2 - Minor usability problem (fix with low priority) + +3 - Major usability problem (fix with high priority) + +4 - Usability catastrophe (imperative to fix before release) + +] + +--- +<div class="mermaid"> +gantt + title Heuristic Evaluation Process + section Evaluation + dateFormat MM-DD + Designer Provides Setting (>Description of Interface and List of Tasks) :list, 03-02, 9d + Videos distributed :vids, after list, 1d + Tasks--5 evaluators :evals, after vids, 2d + Section Problems + E1--Problem1... :after vids, 2d + E1--Problem2... :after vids, 2d + E2--Problem3... :after vids, 2d + ... :after vids, 2d + Section Synthesis and Analysis + Group like problems :analysis, 03-14, 2d + Summarize problems :summarize, after analysis, 2d + Write report :after summarize, 1d +</div> + +Group like problems +- Important thing is whether they have similar description +- This is for you to decide +- Similarity may be conceptual (e.g. the same problem may show up in multiple parts of your interface) + +--- +<div class="mermaid"> +gantt + title Heuristic Evaluation Process + section Evaluation + dateFormat MM-DD + Designer Provides Setting (>Description of Interface and List of Tasks) :list, 03-02, 9d + Videos distributed :vids, after list, 1d + Tasks--5 evaluators :evals, after vids, 2d + Section Problems + E1--Problem1... :after vids, 2d + E1--Problem2... :after vids, 2d + E2--Problem3... :after vids, 2d + ... :after vids, 2d + Section Synthesis and Analysis + Group like problems :analysis, 03-14, 2d + Summarize problems :summarize, after analysis, 2d + Write report :after summarize, 1d +</div> + +Summarize problems +- Average severities +- List all relevant heuristics +- List all areas of website affected +- Also prioritize at this point + +--- +<div class="mermaid"> +gantt + title Heuristic Evaluation Process + section Evaluation + dateFormat MM-DD + Designer Provides Setting (>Description of Interface and List of Tasks) :list, 03-02, 9d + Videos distributed :vids, after list, 1d + Tasks--5 evaluators :evals, after vids, 2d + Section Problems + E1--Problem1... :after vids, 2d + E1--Problem2... :after vids, 2d + E2--Problem3... :after vids, 2d + ... :after vids, 2d + Section Synthesis and Analysis + Group like problems :analysis, 03-14, 2d + Summarize problems :summarize, after analysis, 2d + Write report :after summarize, 1d +</div> + +Write report + +We've provided a [template](../../assignments/undo-report) + +--- +.left-column[ +## Advantages of HE] +.right-column[ + +“Discount usability engineering†+ +Intimidation low + +Don’t need to identify tasks, activities + +Can identify some fairly obvious fixes + +Can expose problems user testing doesn’t expose + +Provides a language for justifying usability recommendations + +] +--- +.left-column[ +## Disadvantages of HE] +.right-column[ +Un-validated + +Unreliable + +Should use usability experts + +Problems unconnected with tasks + +Heuristics may be hard to apply to new technology + +Coordination costs +] + +--- +.left-column[ +## Summary] +.right-column[ +Heuristic Evaluation can be used to evaluate & improve user interfaces + +10 heuristics + +Heuristic Evaluation process + +Individual: Flow & screens + +Group: Consensus report, severity + +Usability Aspect Reports + +Structured way to record good & bad +] +--- + +# Hall of Shame? + +Cycling back: What would you say in your HE of this interface? + +![:youtube Video of funimation problems, 1zDMh3NHDjw] + + +--- +# Hall of Shame? + +Cycling back: What would you say in your HE of this interface? + +.left-column50[ + +] +.right-column40[ + + + +] diff --git a/slides/wk10/img/final/android.png b/slides/wk10/img/final/android.png new file mode 100644 index 0000000000000000000000000000000000000000..c05abc897a6ba254f4bf90cfa088dfb9de0d2569 Binary files /dev/null and b/slides/wk10/img/final/android.png differ diff --git a/slides/wk10/img/final/consistency.png b/slides/wk10/img/final/consistency.png new file mode 100644 index 0000000000000000000000000000000000000000..0ff8ff37943bd763d0afc16950d27425276161fd Binary files /dev/null and b/slides/wk10/img/final/consistency.png differ diff --git a/slides/wk10/img/final/decisiontree.png b/slides/wk10/img/final/decisiontree.png new file mode 100644 index 0000000000000000000000000000000000000000..d70048fd94c67ba4dee4947494266980e412b2d8 Binary files /dev/null and b/slides/wk10/img/final/decisiontree.png differ diff --git a/slides/wk10/img/final/flat-doorknob.png b/slides/wk10/img/final/flat-doorknob.png new file mode 100644 index 0000000000000000000000000000000000000000..b7fa0fcc0b4a0daed1e12d9f5fdb49318a4aed07 Binary files /dev/null and b/slides/wk10/img/final/flat-doorknob.png differ diff --git a/slides/wk10/img/final/mental6.png b/slides/wk10/img/final/mental6.png new file mode 100644 index 0000000000000000000000000000000000000000..5baea3ac170bd237ee0c35101160347918f32c04 Binary files /dev/null and b/slides/wk10/img/final/mental6.png differ diff --git a/slides/wk10/img/final/personal-informatics-model.png b/slides/wk10/img/final/personal-informatics-model.png new file mode 100644 index 0000000000000000000000000000000000000000..b7ec7714d914b333ceda3cb2146c805e38cd7107 Binary files /dev/null and b/slides/wk10/img/final/personal-informatics-model.png differ diff --git a/slides/wk10/img/final/round-doorknob.png b/slides/wk10/img/final/round-doorknob.png new file mode 100644 index 0000000000000000000000000000000000000000..8413e79008f7f0537894d637cd1810b0b460239e Binary files /dev/null and b/slides/wk10/img/final/round-doorknob.png differ diff --git a/slides/wk10/img/heuristic/consistency.png b/slides/wk10/img/heuristic/consistency.png new file mode 100644 index 0000000000000000000000000000000000000000..0ff8ff37943bd763d0afc16950d27425276161fd Binary files /dev/null and b/slides/wk10/img/heuristic/consistency.png differ diff --git a/slides/wk10/img/heuristic/control.png b/slides/wk10/img/heuristic/control.png new file mode 100644 index 0000000000000000000000000000000000000000..7f0ffd0ff7430cfeb48ee48dfb8fecb497e97aba Binary files /dev/null and b/slides/wk10/img/heuristic/control.png differ diff --git a/slides/wk10/img/heuristic/error.png b/slides/wk10/img/heuristic/error.png new file mode 100644 index 0000000000000000000000000000000000000000..ad009d6088f7c37219f73da52c210ecb0e76eb0a Binary files /dev/null and b/slides/wk10/img/heuristic/error.png differ diff --git a/slides/wk10/img/heuristic/error2.png b/slides/wk10/img/heuristic/error2.png new file mode 100644 index 0000000000000000000000000000000000000000..5cdddd5a43b172eaa38e99e774110ef02a171278 Binary files /dev/null and b/slides/wk10/img/heuristic/error2.png differ diff --git a/slides/wk10/img/heuristic/flexibility.png b/slides/wk10/img/heuristic/flexibility.png new file mode 100644 index 0000000000000000000000000000000000000000..0c21d4ffc1261db1092157291bbee76d9437bbdc Binary files /dev/null and b/slides/wk10/img/heuristic/flexibility.png differ diff --git a/slides/wk10/img/heuristic/funimation1.png b/slides/wk10/img/heuristic/funimation1.png new file mode 100644 index 0000000000000000000000000000000000000000..046f837cf7661e7f3fb1c6d19fe1284570068981 Binary files /dev/null and b/slides/wk10/img/heuristic/funimation1.png differ diff --git a/slides/wk10/img/heuristic/funimation2.png b/slides/wk10/img/heuristic/funimation2.png new file mode 100644 index 0000000000000000000000000000000000000000..3440a441f71940bb3ca4dc03a433fb734c1a6f1a Binary files /dev/null and b/slides/wk10/img/heuristic/funimation2.png differ diff --git a/slides/wk10/img/heuristic/funimation3.png b/slides/wk10/img/heuristic/funimation3.png new file mode 100644 index 0000000000000000000000000000000000000000..7ace94a18212ae587673e3426735fa04f4c80fde Binary files /dev/null and b/slides/wk10/img/heuristic/funimation3.png differ diff --git a/slides/wk10/img/heuristic/help.png b/slides/wk10/img/heuristic/help.png new file mode 100644 index 0000000000000000000000000000000000000000..26ee35f713c90875590da8eb098cfc590dc9eaae Binary files /dev/null and b/slides/wk10/img/heuristic/help.png differ diff --git a/slides/wk10/img/heuristic/mactrash.png b/slides/wk10/img/heuristic/mactrash.png new file mode 100644 index 0000000000000000000000000000000000000000..c08482003ca9e3c4bf641b7bf5d6918471ab5759 Binary files /dev/null and b/slides/wk10/img/heuristic/mactrash.png differ diff --git a/slides/wk10/img/heuristic/mailbox.png b/slides/wk10/img/heuristic/mailbox.png new file mode 100644 index 0000000000000000000000000000000000000000..0c75a10406b3976cce65d0262d6833905814305b Binary files /dev/null and b/slides/wk10/img/heuristic/mailbox.png differ diff --git a/slides/wk10/img/heuristic/match.png b/slides/wk10/img/heuristic/match.png new file mode 100644 index 0000000000000000000000000000000000000000..6b84fb7c1706daca865c35504c624abd62d9308a Binary files /dev/null and b/slides/wk10/img/heuristic/match.png differ diff --git a/slides/wk10/img/heuristic/minimalist.png b/slides/wk10/img/heuristic/minimalist.png new file mode 100644 index 0000000000000000000000000000000000000000..c32b6646c92c7761fdc83b830cb9e095fa2d0f8b Binary files /dev/null and b/slides/wk10/img/heuristic/minimalist.png differ diff --git a/slides/wk10/img/heuristic/recognition.png b/slides/wk10/img/heuristic/recognition.png new file mode 100644 index 0000000000000000000000000000000000000000..d1fb5cd5ddf8b92fe1acd7f9a0b82c9115bd9213 Binary files /dev/null and b/slides/wk10/img/heuristic/recognition.png differ diff --git a/slides/wk10/img/heuristic/visibility.png b/slides/wk10/img/heuristic/visibility.png new file mode 100644 index 0000000000000000000000000000000000000000..21dae906da003a422d64c43fb8fc1fe538d989d6 Binary files /dev/null and b/slides/wk10/img/heuristic/visibility.png differ diff --git a/slides/wk10/pui2016-slides-23-usable-privacy-and-security.pptx b/slides/wk10/pui2016-slides-23-usable-privacy-and-security.pptx new file mode 100644 index 0000000000000000000000000000000000000000..f3995476ae662f9c8779ae5de169ca642d0bf336 Binary files /dev/null and b/slides/wk10/pui2016-slides-23-usable-privacy-and-security.pptx differ