Programming of Interactive Week 7 : b. Exam preparation Systems - PowerPoint PPT Presentation

Programming of Interactive Week 7 : 
 b. Exam preparation Systems Anastasia.Bezerianos@lri.fr Anastasia.Bezerianos@lri.fr (part of this class is based on previous classes from Anastasia, and of T. Tsandilas, S. Huot, M. Beaudouin-Lafon, N.Roussel, O.Chapuis) 1 2 General info widgets, 
 event-based programming, 
 Duration: 2 hours 
 state machines, 
 Authorized material: any document in paper form and MVC Time: Tue @ 9:00 3 4 week7b-ExamPrep - 24 October 2018

Example (widgets + events) What about the events and their handlers? Identify the components (widgets), their events Example: and their listeners/handlers Think about how to handle selection events within the list (tabular form) of the files Describe: Widget Event Listener/Observer Related widgets and their interconnection A You don’t necessarily have to follow the naming and precise structure of JavaFX 5 6 Example (MVC) Can you create the hierarchy of the containers and components of this UI? Figure — In this example a user is approaching a digital table A with their mobile. A halo appears at the edge of the mobile. The user can flick the image towards the halo. When the image slides off the edge of the mobile it disappears, and reappears on the table. What layout manager(s) would you use and how? 7 8 week7b-ExamPrep - 24 October 2018

Example (MVC) Example (MVC) Where is the application? In the mobile device or Where is the application? In the mobile device or in the tabletop? in the tabletop? How could this application be implemented? 9 10 Example (MVC) Example (MVC) Where is the application? In the mobile device or in the tabletop? How could this application be implemented? Create a diagram that shows the interaction between the View, the Controller, and the Model for the mobile and the tabletop apps 11 12 week7b-ExamPrep - 24 October 2018

MVC : interactions between components MVC : interactions between components But this is not the only possible flow of messages. For example, when the user moves the picture from the mobile phone to the halo, the controller of the tabletop application could detect the change, with no notification from the view or controller. Create an MVC structure that works for you. Model internal operations Model internal operations - application functionality - application functionality - data access and management - data access and management request state request state notification notification of state change of state change notification notification of changes of changes select a View select a View View Controller View Controller - presentation of data and - manage user input - presentation of data and - manage user input functionality to the user - update application behavior functionality to the user - update application behavior notification notification of input of input user input user input refresh refresh 13 14 Example (State Machines) Finite Automata 
 Assume you have this state machine, State = interaction state what does it do? Transition = input events EnterOn Target / Highlight Target State Machine Boolean expressions of events & conditions On Start associated to transitions (guard) Target Actions associated to transitions LeaveOn Target / Remove Highlight of Target transition MousePressOn Target / Launch Target Action; & guard Remove Highlight of Target / action state 15 16 week7b-ExamPrep - 24 October 2018

You have access to: Create the interaction for Bubble cursor: List = IntersectTargets (mousePos, WIDTH) closest target always selected on click Target = ClosestTarget (mousePos, List) TimeOut (programmable) event to start after n sec with Arm(n), a fuction Disarm() cancels the Arm call if TimeOut has not started 17 18 Create the interaction for Bubble cursor: Dynaspot: closest target always selected on click area cursor of MAXWIDTH active when speed > MAXSPEED when speed drops an animation starts that takes REDUCETIME during which the area of the cursor becomes Mouse Move smaller until 0 and the cursor becomes a regular cursor Mouse Move / MousePos during REDUCETIME we can accelerate, and go to area cursor Start BC t = ClosestTarget (MousePos, List) // List of all objects RemoveHighlightFromAllTargets() again Highlight(t) WIDTH = distance (MousePos, t) // Change cursor size to enclose target MousePress / MousePos t = ClosestTarget (MousePos, List) LaunchTargetClickedAction(t) ! Highlight(t) 19 20 week7b-ExamPrep - 24 October 2018

Dynaspot: SM cursor (*1) (*1) cursor Hint, use the previous SM TimeOut (*2) / // forced to leave state Disarm (*2) WIDTH = maxWidth Start (cursor + area cursor) SM Reduce area cursor Size Area (*2) Cursor (*1) (*2) (*1) / Arm (Reducetime) // starts changing WIDTH Mouse Move & (MousePos – Prev MousePos) /Time < MAXSPEED (*1) Mouse Move & (MousePos – Prev MousePos) /Time > MAXSPEED (*2) 21 22 Example (Interaction) Example (Interaction) Imagine you are asked to program the following - We will need a Window with a layout to draw ellipses in. behavior: - We’ll need a mouse listener attached on the main Pane. - At mouse click if an ellipse is selected (under cursor position), and while dragging: When I drag a circle over another, the second circle starts - we store the mouse position (prevx, prevy) moving to the opposite direction so that they do not overlap (it is pushed) - we if ellipse1 touches ellipse2, ellipse1.intersects(ellipse2). - If it does not intersect, then I move ellipse1 normally How would you program this (what events would you listen for, - If it does intersect, I still move ellipse1 as before, but I also move what tests would you do, how would you move/change the ellipse2. The new position for ellipse2 will be the previous position position of the second object, etc)? + dx, dy (where dx = mousex-prevx, and dy – mousey-prevy) Assume you know your mouse position, you are dragging the first circle from its center, you know the radius of your circles (r1,r2), and you can calculate the intersections of objects. 23 24 week7b-ExamPrep - 24 October 2018