name: inverse layout: true class: center, middle, inverse --- # Quiz Review & Questions Jennifer Mankoff CSE 340 Winter 2021 --- name: normal layout: true class: --- .left-column[  ] .right-column[ The parent in this image is shown with a dotted red line. Suppose I want to add a new `LineView` going from (10,0) to (0,10) (in parent coordinates). What will the position of the top left corner of that `LineView`'s bounding box be in parent coordinates? ] ??? The position will be (0,0). The line goes from the top right corner to the bottom left corner of the bounding box, but it's leftmost coordinate is 0 and it's topmost coordinate is 0 --- .left-column[  ] .right-column[ Suppose I add a `LineView` instead going from (15, 5) to (5, 15). What will the start and end coordinates of the line be in child coordinates (*i.e.* within `onDraw()` in the `LineView` object itself?). ] ??? The position will be (10, 0) to (0, 10). This is because position should be relative to a bounding box that starts at the leftmost and topmost position of the child --- # More practice with position .quote[Suppose 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?] --- # Open poll <iframe src="https://embed.polleverywhere.com/free_text_polls/mjuQTraoPaOOkrt7QEQHB?controls=none&short_poll=true" width="800" height="600" frameBorder="0"></iframe> ??? --- # More practice with position .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?)] --- # Other questions from the quiz .left-column[  ] .right-column[ The Zoom app has incorporated Animation in the interface as seen on the left What pacing function do you think they are using? ] ??? Pacing functions seen: - Bounce (at the end of the scroll) or Overshoots - Slow in (transition from Meetings to Schedule a meeting screen)/Slow out --- .left-column[  ] .right-column[ Pick an Animation Design Tip and justify whether the interface programmer for this app met or violated that tip. 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. ] ??? 1. Used sparingly and understandingly, animation can enhance the interface … otherwise can distract! - Met: if justified: The animations do not distract from the function of the app - Violated: if justified: some might say the animation is superfluous 2. Need to mimic real world - Met: things bouncing back when they hit a wall with the scrolling 3. Observing motion tells us about size, weight, rigidity - Not obvious 4. No abrupt changes in velocity! - Met: On the Schedule screen the screen rises up from the top with the slow in slow out. 5. Think about accessibility. - Violated: These animations would not likely help a disabled user]] --- .left-column[  ] .right-column[ The Zoom marketing team decides they want to be able to display their new logo in any size, location, and color in the app. As a Zoom Software Engineer, your team assigns you to write a `LogoView` class (a subclass of `DrawView`) that can be used for this purpose. The `LogoView` object will contain the following features drawn on its `Canvas` in the same color. - A rotated square that is 60% the size of the `LogoView`’s bounding box. Text in the default font and in a specified font size that is drawn starting at the mid point of the `Canvas`. - A line halfway down the `LogoView`’s `Canvas` that starts 10% over from the left side of the canvas and goes to the midpoint of the Canvas mark. ] --- .left-column[  ] .right-column[ Other than the context that is passed into any subclass of an `DrawView`, what other parameters might you need to construct the `LogoView`? Justify each parameter by explaining how it would be used either in `onDraw()`, to modify the `brush`, or in `initFromParentCoords()`. ] ??? Possibilities include: - `lineWidth`: the width of the line that the rotated rectangle and line are drawn with. Used to create a brush in the constructor, which is used later in onDraw. - `text`:the text to show in the logo - `fontSize`:the size of the text in the logo, used to modify the brush that is used in `onDraw` - `color`: the color of the logo used to modify the brush used in `onDraw`. ]]
