1 / 39

The Smooth Motion Application

The Smooth Motion Application. The Smooth Motion application is a coordination test Note names of components Heading Grid Keys Controls Instructions. How the Smooth Motion Application Should Work. Stack of blocks moving from right to left

coral
Download Presentation

The Smooth Motion Application

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Smooth Motion Application The Smooth Motion application is a coordination test Note names of components Heading Grid Keys Controls Instructions

  2. How the Smooth Motion Application Should Work Stack of blocks moving from right to left Random stack generation until user places cursor over one of the brown keys Brown keys control stack height (1-7) Goal is to move mouse across brown keys as smoothly as possible to create a perfect staircase rising to the right

  3. Planning Smooth Motion Apply the Decomposition Principle Divide a large task into smaller subtasks that can be solved separately and then combine their solutions to produce the overall solution Principle can be applied again to each subtask, if necessary List the Tasks

  4. Planning Smooth Motion (cont'd)

  5. Planning Smooth Motion (cont'd) Decide on a Problem-Solving Strategy Strategy on how to solve each part Order in which we'll solve parts Build a Basic Web Page First Don't spend time embellishing page until other tasks are done

  6. Planning Smooth Motion (cont'd) Solve Independent Tasks Before Dependent Tasks Some tasks rely on other tasks Independent tasks should be done first, tasks that depend on the independent tasks next, and so on PERT Chart (Program Evaluation and Review Technique) Task dependency graph

  7. Build the Basic Web Page GUI Full GUI has table with heading, grid, keys, controls, instructions Basic structural page: Table Heading Instructions Background color, font style and color Centering of application on page

  8. The Structural Page Five-row, one-column table Text for the Smooth Motion heading and Instructions in first and last rows The Structural Page Heading <h1> heading for heading, paragraph tag for instructions (set font color for instructions text) Build the Basic Web Page GUI (cont’d)

  9. Animate the Grid First Analysis Recall three basic steps of animation: Define and place initial image Prefetch frames for updating image Set timer and build timer event handler to update image

  10. Animate the Grid (cont'd) Frames for the Columns of Blocks Design and organize the column frames Indexing Columns from Left to Right On each time step, given column is replaced by column to its right If columns are indexed left to right, index in column i of grid at a given step is replaced on next time step by image in column i + 1 The last column needs to have a new image assigned

  11. Animate the Grid (cont'd)

  12. Animate the Grid (cont'd) Second Analysis Define and organize the eight columnar frames Define and fetch the initial images (0-19) Prefetch the eight frames for uploading the image Set a timer with an event handler that shifts the images in columns 1 through 19 to columns 0 through 18, and assign new frame into column 19

  13. Animate the Grid (cont'd) Subtask: Define and Organize the Frames Guidelines for creating frame images Ensure all images overwriting one another have the same dimensions in pixels Ensure all frames are saved in .gif or .jpeg format, and that they are used consistently (only overwrite .gifs with .gifs)

  14. Animate the Grid (cont'd) Subtask: Define and Place Initial Images Use<img src="gifpix/Stack0.gif" />tag to place an image on page Use a loop to complete image initialization of 20 images

  15. Subtask: Prefetch the Frame Images Declare the Array into which the images will be fetched Initialize the array elements to be Image objects Assign the names of the files to the src fields of the Image objects, causing browser to record the names and get the files Animate the Grid (cont'd)

  16. Subtask: Set Timer and Build Timer Event Handler Event handler animate() has three operations: To move all images but the first, one position to the left To assign a new (random) frame to image 19 To schedule itself for sometime in the future Animate the Grid (cont'd)

  17. The Best Laid Plans… We find it cumbersome not to be able to start and stop animation on demand Build Controls task is scheduled for later Makes more sense to solve it now, to simplify our work

  18. Build Controls What should happen when the control is clicked? Go button click-event Start animation with setTimeout(), keeping track of the handle Stop button click-event End animation by clearing the timer using the handle Radio button click-event Set the timer interval by assigning to duration Place this code in the fourth row of the structural page table

  19. Sense the Keys Ability to recognize when mouse hovers over a given key We need to learn about mouse motion detection Browser with help of the OS keeps track of where mouse is at any given time MouseOver and MouseOut events recognized in JavaScript

  20. Sense the Keys (cont'd) Subtask: Define and Organize the Frames Subtask: Place the Initial Images Placing the images creates the keys Place seven images in center of third row of the structural table using a loop

  21. Sense the Keys (cont'd) Subtask: Prefetch the Frames Analogous to earlier animations Since there are only two frames to prefetch BrownBox.gif and OrangeBox.gif), it's not worth writing a loop

  22. Subtask: Build the Event Handlers here() for MouseOver gone() for MouseOut What should happen when mouse moves over a key Key must change color to give user feedback Must tell Grid Animation event handler which new Stack image to draw in the last position in the grid Sense the Keys (cont'd)

  23. Combine the Subtasks Add the event handler specifications to the <img src="…" /> tags Sense the Keys (cont'd)

  24. Staircase Detection Subtask: Recognizing the Staircase How do we recognize the seven consecutive frame values? Keep predicting the next frame value

  25. Staircase Detection (cont'd) Subtask: Recognizing Continuity Modify the animate() function at the point where it is about to set the timer for the next tick If the staircase is found, there should be no next tick

  26. Assemble Overall Design Build Controls task was performed out of order Parts of Assemble Overall Design task performed ahead of time There is not much left to complete the programming Change how image 19 is assigned Clean up animate() – relegate work to functions Make sure the whole application runs as planned

  27. Primp the Design Make structural page more attractive Cell padding try these in the table element properties padding : 5% padding : 15px Sense key color upgrade Create new images YellowBox.gif, OrangeBox.gif Use for mouse over and base case in the GUI

  28. Assessment and Retrospective Three primary topics from earlier chapters used in this design: Loops Prefetching images and placing grid images Parameterizing functions for reuse here( pos ) and gone( pos ) Managing complexity with functions shiftGrid() and checkStairAndContinue()

  29. Summary The Decomposition Principle allows creation of programs that are too complex to produce directly: Define the tasks and strategize about the order in which to solve them; dependencies among the tasks will necessitate a feasible plan Use a dependency diagram to show which tasks depend on others; plan an order consistent with the diagram (no task is scheduled ahead of the tasks it depends on); produce a workable plan Consider other features, such as ease of testing, and adjust the schedule to address these aspects.

  30. Summary In developing the Smooth Motion application, we decomposed each task into subtasks. There was similarity among the subtasks; for example, the timer-driven animation and the key-driven animation used a similar set of subtasks The tasks were solved out of plan-order, to give us the ability to start and stop the animation. Convenience motivated us to depart from the original schedule, but originally it was not possible to predict the benefits of the alternative plan.

  31. Summary We learned about mouse events. This was not hard to grasp, but it illustrated a common feature of any large task: it is often necessary to learn new information to solve a complex problem Used our programming tools (loops, functions, parameters, conditionals, etc.) to instruct both the computer and humans looking at the program. We learned powerful, general problem-solving techniques; decomposition will apply in many other problem solving situations (not just programming).

More Related