name: inverse layout: true class: center, middle, inverse --- # Introduction to Drawing Interfaces Jennifer Mankoff CSE 340 Winter 2020 --- layout: false # Let's make an interactor hierarchy .left-column-half[  ] .right-column-half[ Note that we use a `View` for **each** thing on the screen ] --- # Why so many separate `Views`? 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) Views can also be re-used easily ??? This could be a good place to ask them to think about what that means and demonstrating two things with different z order. --- [//]: # (Outline Slide) # Today's goals .left-column-half[ <iframe src="https://embed.polleverywhere.com/free_text_polls/sK4PfNJjme9aKeezruC36?controls=none&short_poll=true" width="650" height="600" frameBorder="0"></iframe> ] .right-column-half[ Doodle Spec Update - Do change LineView - Progressive Handin: Code; Peer Eval; Reflection Outline - Role of Interactor Hierarchy in drawing the screen - How to use Animation to move Interactors - Summary of what we've learned so far ] --- # Simpler Example **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: Roles <div class="mermaid"> graph LR ip[Interface Programmer] w[Component Developer] l[Library Extender] a[Architecture Extender] t[Toolkit Builder] class t green class w,l,a green class ip green </div> --- # What is a toolkit builder anyway? Example: Physical Interfaces Creates entirely new toolkits that changes what we can do ![:youtube Physical Interface made out of RFID tags,4k15uXpp7-g] ??? But there was once a time when ui toolkits didn't exist. How are THEY built? --- # What is a toolkit builder anyway? Or could be the person who made your user interface toolkit with its Library and Architecture --- # What is the toolkit library? ??? Example: All the different types of Views you can play with What could you add to a toolkit library? May create new forms of layout, types of input, etc. Supported by a few toolkits --- # What is the toolkit library? Example: All the different types of Views you can play with What could you add to a toolkit library? May create new forms of layout, types of input, etc. Supported by a few toolkits --- # 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) ] ??? This is in android now, views can be specified with 9 separate pieces for scalable styling --- # 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 Example: How the interface is drawn What could you add? Support for animation, machine learning, etc Supported by very few toolkits ... back to our regularly scheduled program --- # 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() { foreach child c { if (child.isVisible()) { child.drawAll(); } onDraw(); } } ``` ??? What is missing here? How can children misbehave? What are they expecting that we don't do? Draw out what will happen on paper --- # Work arounds? ??? Have them brainstorm --- # Work arounds? Make the **Interface Programmer** fix this Could make every view the size of the whole screen; Then just draw in the right 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? ] --- # How do we specify View position, width and height? **Interface Programmer** can do this .left-column-half[  ] .right-column-half[ ```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) --- # How is a View drawn on the screen **Toolkit Architecture Builder** ```java protected void drawAll() { foreach child c { if (child.isVisible()) { child.drawAll(); } onDraw(); } } ``` 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() { 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 } onDraw(); } } ``` Is this part of the _Toolkit Architecture_ or _Toolkit Library_? ??? Draw out on paper again Note that this is has absolute layout! --- [//]: # (Outline Slide) .left-column[# Today's goals] .right-column[ - Role of Interactor Hierarchy in drawing the screen - How to use Animation to move Interactors - Summary of what we've learned so far ] --- # [ObjectAnimator](https://developer.android.com/reference/android/animation/ObjectAnimator) .left-column[  ] .right-column[ Example animation of position (using a [Path](https://developer.android.com/reference/android/graphics/Path)) ```java // takes a target view, a property name, and values ObjectAnimator anim = ObjectAnimator.ofFloat(foo, View.X, View.Y, path); anim.setDuration(1000); ImageView mouse = addImage(mainCanvas, "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(10000); anim.start(); ``` ] --- # Why is the bounding box important here?  --- # [ObjectAnimator](https://developer.android.com/reference/android/animation/ObjectAnimator) Can also 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)) --- # 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] --- # [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(foo, "alpha", 0f, 1f); anim.setDuration(1000); anim.start(); ``` ] --- # 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 ![:youtube Opening cartoon from who framed roger rabbit showing him trying to keep a baby safe,oQe0OWZvwWo] What strategies do you see here? ??? - 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) ] --- # Do you see them here? ![:youtube Opening cartoon from who framed roger rabbit showing him trying to keep a baby safe,oQe0OWZvwWo] What strategies do you see here? ??? - Squash-and-Stretch - Staging, Overlapping Action - Anticipation - Follow-Through - Slow In Slow Out --- # 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 --- # How do we use these for 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[ Left side is _Linear_ Middle is ?? Right side is ?? Durations are the same ```java ObjectAnimator anim = ObjectAnimator.ofFloat(mouse, View.X, View.Y, path); * OvershootInterpolator interpolator = * new OvershootInterpolator(); * anim.setInterpolator(interpolator); anim.setDuration(3000); anim.start(); ``` ] ??? overshoot --- # Summary & revisiting learning goals for this week and last <iframe src="https://embed.polleverywhere.com/free_text_polls/sK4PfNJjme9aKeezruC36?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> ??? --- # 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 ]
