Recreating a Legacy Application Major Qualifying Project

PMKS+: Recreating a Legacy Application Major Qualifying Project Written By: Praneeth Appikatla (CS) Griffin Cecil (CS) Michael Taylor (CS) Dimitrios Tsiakmakis (CS) Advisors: Professor David C. Brown (CS) Professor Pradeep Radhakrishnan (ME) April 25, 2019 Abstract The goal of this project was to recreate the Planar Mechanism Kinematic Simulator (PMKS), a legacy, open-source web application, on a modern web platform with an enhanced user experience. The conversion included support for multiple browsers and improvements to the graphical user interface. This application was developed using the latest technologies in web development. Through multiple evaluations testing the interface and functions, we were able to create a similar application to PMKS that has an improved user interface experience. 1 Acknowledgements We would like to thank Professor Radhakrishnan and Professor Brown for supporting us through this project. We would also like to thank Dr. Matthew Campbell of Oregon State University for creating the open-source application, PMKS, on which our work is built. Finally, we would like to thank the students of the Mechanical Engineering department of WPI who participated in our user studies and helped us improve the user experience in our application. 2 Table of Contents I. Abstract ..................................................................................................................... 1 II. Acknowledgments..................................................................................................... 2 III. Table of Contents...................................................................................................... 3 IV. Authorship................................................................................................................. 6 1. Introduction........................................................................................................... 7 2. Research Statement & Goals................................................................ 9 3. What is PMKS...................................................................................................... 10 4. Literature Review................................................................................................ 11 4.1. Interface Development.................................................................................... 11 4.2. Interface Evaluation........................................................................................ 15 5. Methodology........................................................................................... 19 5.1. Migration Options........................................................................................... 19 5.2. Web App Justification.................................................................................... 19 5.3. User Interface Evaluation............................................................................... 20 5.4. Interface Design............................................................................................. 21 5.5. Linkage Creation Methods............................................................................. 21 5.6. System Design................................................................................................ 22 5.7. Simulator Class............................................................................................... 25 5.8. Animation....................................................................................................... 25 5.9. Application Testing......................................................................................... 25 5.10. PMKS+ User Evaluations............................................................................... 26 6. Migration Options............................................................................................... 27 6.1. Migration Methods.......................................................................................... 27 6.2. Migration Platforms........................................................................................ 28 6.3. Migration Tools............................................................................................... 29 7. Web App Justification........................................................................................ 32 7.1. Rationale......................................................................................................... 33 7.2. Results............................................................................................................. 36 8. User Interface Evaluation................................................................................. 37 8.1. Evaluation Strategy......................................................................................... 37 8.2. Evaluation Procedure...................................................................................... 40 8.3. Data Analysis.................................................................................................. 41 3 9. Interface Design.................................................................................................. 44 9.1. Preliminary UI Mockups............................................................................... 44 9.2. Iteration 1...................................................................................................... 45 9.3. Iteration 2...................................................................................................... 46 9.4. Iteration 3...................................................................................................... 48 9.5. Iteration 4...................................................................................................... 50 9.6. Iteration 5...................................................................................................... 53 9.7. Iteration 6...................................................................................................... 58 9.8. Iteration 7...................................................................................................... 62 10. Linkage Creation Methods............................................................................. 65 10.1. Linkage Table............................................................................................... 65 10.2. Grid............................................................................................................... 66 10.3. Final Decision............................................................................................... 69 10.4. Context Menu................................................................................................ 70 11. System Design...................................................................................................... 72 11.1. Analysis of Existing Application Design...................................................... 72 11.2. New System Architecture............................................................................. 73 11.3. Grid Component States................................................................................. 75 12. Simulator Class................................................................................................... 79 12.1. Simulation Loop............................................................................................ 79 12.2. Joint Traversal Algorithm............................................................................. 81 12.3. Circle Intersection Solver.............................................................................. 85 13. Animation.............................................................................................................. 87 13.1. CSS Animations............................................................................................ 88 13.2. Custom Typescript Solution.......................................................................... 89 13.3. Animation Controls....................................................................................... 91 14. Application Testing............................................................................................ 94 14.1. Browser Compatibility.................................................................................. 94 14.2. Software Testing............................................................................................ 100 15. PMKS+ User Evaluations................................................................................ 104 15.1. Individual Evaluation.................................................................................... 104 15.1.1. Procedure........................................................................................... 101 15.1.2. Target Users....................................................................................... 101 15.1.3. Evaluations Script.............................................................................. 102 15.2. Final User Evaluations................................................................................... 105 15.3. Differences with PMKS Evaluation.............................................................. 105 15.4. Data Analysis................................................................................................. 106 4 16. Conclusions.......................................................................................................... 111 17. Discussion............................................................................................................

Load more