Product Vision:

The vision behind our project is to create a user-friendly, interactive web app that educates on and makes correct conversions of Euler Angles to quaternions. The goal is to provide information to users who want to better understand Euler angles and the use of quaternions in 3D rotation, as well as information about the conversion methods, specifically when the conversion of a quaternion to Euler angles is unable to return the expected values.

Euler angles are three angles that describe the rotation of an object with respect to a fixed coordinate system. Because the three angles can be applied in different orders, resulting in different rotations, Euler angles are represented by twelve rotation sequences. While Euler Angles are incredibly useful for understanding the orientation of an object, there are limitations to using them based on a phenomenon known as Gimbal Lock, which is where quaternions become very useful. The quaternion number system is a 4D extension of the complex number system, consisting of a scalar and a vector component. Though difficult to fully understand how it works, the quaternion number system has become a great tool when describing orientation in 3d space. Therefore it is useful for Euler Angles to be converted to quaternions using one of twelve methods based on the rotation sequence of the angles.

Unfortunately, there are some issues with the conversion methods from quaternions to Euler angles in addition to a lack of information on the internet regarding all twelve of the conversion methods. Since the methods use trigonometric functions, specifically arcsin, arctan, and arccos, there is a limited range of values that can be returned from these methods, meaning that when Euler angles are converted into a quaternion, it may not be possible to get these same angles back out from the conversion of quaternion to Euler angles. Therefore, this web application will seek not only to make the correct conversions for users but also to provide information regarding the range of values that each method is able to return and show how the methods work at a deeper level.

Some other goals for this project include giving information concerning the mathematics behind Euler angles, rotation matrices, and quaternions, providing an interactive graph showing various rotations of an object and the corresponding quaternions, and recommending additional resources to users for more information.

Hardware:

• Computer

Software:

• Code: Python, Mathematica, LaTeX, HTML, CSS
• Microframeworks: Flask (Python Web Framework), JupyterHub
• Server Provider: AWS
• Team Communication: Discord, GroupMe
• Code Editor: Visual Studio Code

Product Backlog:

This is a list of our user stories and their corresponding acceptance criteria, with many divided between what we consider to be novice or an expert users. We gave a rating for the estimated effort for each task on a scale from 1 to 10, with 10 taking the most effort. A novice user has just entered the world of Euler to quaternion angles and is looking for a deeper understanding, while an expert user is well versed in conversions, possibly in a corporate setting.

• As a general user, I want to be able to input an Euler angle and see the output of the corresponding quaternion, and vice versa.
  • Given I need to perform a transformation and I input the appropriate values, I will receive the proper and accurate result.
  • Estimated time: 30 hours
  • Estimated effort: 10
• As a novice user, I want to receive an explanation of the various rotations of the Euler angles to gain understanding.
  • Given I do not understand a type of rotation, I will be able to click a button and receive an explanation.
  • Estimated time: 3 hours
  • Estimated effort: 3
• As a novice user, I want the output to update as the various inputs change so I can see incremental differences.
  • Given I want to change the coordinate or rotation of an angle, and I input a new value, I will receive a new result instantly.
  • Estimated time: 5 hours
  • Estimated effort: 4
• As a novice user, I want to see a diagram to fully visualize the conversion.
  • Given that I want to convert an angle from Euler to quaternion and input correct values, an image representing the converted angle will be available for me to view.
  • Estimated time: 10 hours
  • Estimated effort: 7
• As a novice user, I want to know when conversion back to Euler may produce a different result so I will not be confused.
  • Given I input an Euler angle whose domain causes an issue with the trigonometric functions, I will receive a warning indicating that the resulting quaternion angle will possibly correspond to a different Euler angle upon conversion.
  • Estimated time: 10 hours
  • Estimated effort: 7
• As a novice user, I want guidance so I do not get stuck on issues in interpretation.
  • Given I am confused, and I click on a link to help documentation, I will be directed to a page that describes the processes in an easy-to-understand way.
  • Estimated time: 5 hours
  • Estimated effort: 3
• As an expert user, I want a clean interface for conversions that is not bloated with unnecessary, extra information.
  • Given I want to convert an Euler or quaternion angle and visit this web application, I will be able to quickly and smoothly make these conversions.
  • Estimated time: 3 hours
  • Estimated effort: 1
• As a novice user, I want to be able to interact with a graph and move it around to better understand the values I have input.
  • Given I want to interact with a graph, I will be able to input my values and then move the graph around using my cursor.
  • Estimated time: 10 hours
  • Estimated effort: 7
• As a general user, I want to learn more about quaternions and 3D rotations easily without spending hours researching them.
  • Given I want to learn more about quaternions and 3D rotations easily, I will be able to click a button that directs me to a learning center with little write-ups about these topics.
  • Estimated time: 12 hours
  • Estimated effort: 6
• As a novice user, I want to access additional resources about quaternions and 3D rotations without having to search for them on the internet.
  • Given I want to access additional resources, I will be able to click a button that directs me to a page where all additional resources are displayed, and a search bar allows me to narrow them down.
  • Estimated time: 8 hours
  • Estimated effort: 5

Sprint 2 Goals:

• Get the web app running through AWS
• Design user interface
  • Create a clean landing page
  • Get the graph and conversions running on this page
• Integrate Jupyter notebook in our web app
  • Create a basic design for the graph
• Pull together the formulas we have for converting from Euler to Quaternion
  • Get the python code for these formulas running on our web app
  • Look into getting the transformation matrices included along with the conversions

Sprint 2 Backlog:

• As an expert user, I want a clean interface for conversions that is not bloated with unnecessary, extra information.
  • Design a clean interface for users to make their conversions
• As a general user, I want to be able to input an Euler angle and see the output of the corresponding quaternion, and vice versa.
  • Create page for input of Euler angles and output of corresponding quaternion
• As a novice user, I want to see a diagram to fully visualize the conversion.
  • Create a graph to visualize 3D rotation
• As a novice user, I want to access additional resources about quaternions and 3D rotations without having to search for them on the internet.
  • Create a page for users to access additional resources
• As a general user, I want to learn more about quaternions and 3D rotations easily without spending hours researching them.
  • Create a page with more information about 3D rotation for users to learn from

General Assignments and Priorities:

Our goal for this sprint was to create a basic, yet visually appealing user interface with the ability to make the correct conversions from Euler angles to a quaternion. Since there are a few mathematical complications with the conversion back to Euler angles from a quaternion, we decided that for our minimum viable product, it would be best to focus our attention primarily on getting the Euler to quaternion conversions working correctly along with a basic graph showing the 3D rotations. These two things require the integration of different types of software and code, so much of this sprint has been centered around integrating. In addition, we wanted to have a welcome page and a help page with the additional information about topics within 3D rotation, so we focused on including that within this sprint as well.

Garron and Sammy worked on bringing a graph into our conversion page through Jupyter Notebook and integrating the python code to make the conversions. Adam and Yao focused on the design of the user interface and the html for our website. Issa worked on getting the website running through AWS and Keely worked on writing up the content to be displayed in the help page.

Individual Tasks:

Keely: During this sprint, I focused on what information would be important to share in the help page and creating the text and equations under each tab. I watched videos and read articles to make sure that each of the topics would be well explained and accurate. In addition, I spent time studying the mathematics that go into the conversion methods for Euler angles to quaternions so that in the future, we can start to implement the conversion methods back to Euler angles accurately. I also organized our GitHub repo and worked on creating our Sprint 2 review.

Adam: In this sprint, I devoted my time to developing the front end of the website. I started with skeleton code to generally align the page, and then worked to add some color and formatting, building upon some work of Yao with the taskbar interface. With the approval of my teammates, I decided the color palette for our website. I added the info that Keely collected to our help section, adding appropriate LaTeX representations. I made sure to work with the backend team to provide form elements that could be used during the calculations. I also designed a logo for our website. This sprint was very code heavy for me, working mostly in HTML and CSS.

Sammy: This sprint I dealt mainly with coding different python scripts. Firstly I experimented with the methods in SciPy to turn x,y, and z angles and a rotation order into an Euler angle that could further be converted to a quaternion. I also used matplot to make a plane that could be rotated given the rotation that was selected. Most of the time was spent on the matplot script since the Euler Angle Rotation Matrix needed to be converted to a 4x4 NumPy array and translation and rotation operations were needed to produce the rotated plane. The Euler to Quaternion script and the matplot script were both implemented into the website through Garron's work.

Yao: In this sprint, I used the Flask framework to make HTML and CSS work in python. I made some changes to the HTML and CSS code written by Adam to work with Flask. And I designed a CSS navigation bar style that changes color when the mouse rests on the corresponding button. I also worked on how to communicate the data in HTML with the back-end Python code. to implement calculation and conversion functions.

Issa: In this sprint, I started by constricting base Flask files that we are building our python, HTML, and CSS on. I made sure it's working locally so the rest of the team can test it and we can plan what's the next step according to it. Next, I made an AWS account with an EC2 instance and configured the instance from security to install all the packages required to run the framework. Next, I installed Nginx and Gunicorn3 to handle each web request separately. I also made sure Putty and WinSCP are working by fixing a port and SSH issue to transfer files to the server. Finally, I made a research on how to obtain an SSL certificate using the AWS sub-domain. Finally, I worked with Yao to merge and organize two Flask codes in preparation to merge the work of the rest of the team.

Garron: In this sprint, I was tasked to integrate the code that converts Euler angles to quaternions located in the flask app with the html front end. I also added functionality to Adam's html forms and created code to send these values to the flask app to get processed. Additionally, I worked with Sammy to incorporate the graph output into the converter tab, as well as integrating Adam's html scripts into the flask app.

Burndown Chart