Worcester Polytechnic Institute Digital WPI Major Qualifying Projects (All Years) Major Qualifying Projects April 2019 PMKS+: Recreating a Legacy Application Dimitrios Tsiakmakis Worcester Polytechnic Institute Griffina D niel Cecil Worcester Polytechnic Institute Michael Teijiro Taylor Worcester Polytechnic Institute Praneeth Appikatla Worcester Polytechnic Institute Follow this and additional works at: https://digitalcommons.wpi.edu/mqp-all Repository Citation Tsiakmakis, D., Cecil, G. D., Taylor, M. T., & Appikatla, P. (2019). PMKS+: Recreating a Legacy Application. Retrieved from https://digitalcommons.wpi.edu/mqp-all/7041 This Unrestricted is brought to you for free and open access by the Major Qualifying Projects at Digital WPI. It has been accepted for inclusion in Major Qualifying Projects (All Years) by an authorized administrator of Digital WPI. For more information, please contact [email protected]. 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...................................................................................