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 concerning 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, JavaScript, LaTeX, HTML, CSS
• Microframeworks: Flask (Python Web Framework), JupyterHub, Bootstrap
• 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 a novice or an expert user. 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 3D rotation 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 graph that is aligned with my input to fully visualize the conversion.
  • Given that I want to convert a set of Euler angles to a quaternion and that I input correct values, an image on a graph representing the converted angle will be available for me to view.
  • Estimated time: 10 hours
  • Estimated effort: 6
• As a novice user, I want to know when conversion back to Euler may produce a different result than expected 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 will possibly correspond to a different set of Euler angles upon conversion.
  • Estimated time: 10 hours
  • Estimated effort: 6
• 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, modern 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 make these conversions quickly on a user-friendly, clean interface.
  • Estimated time: 20 hours
  • Estimated effort: 8
• As a novice user, I want to be able to interact with a graph and move it around to better understand the values I 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: 30 hours
  • Estimated effort: 10
• 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
• As a novice user, I would like to learn more about linear algebra and the concepts that make these conversions possible at a more fundamental level so that when I read about 3D rotation, I can better understand it.
  • Given, I would like to learn more about linear algebra and the fundamental concepts behind these conversions, I will be able to easily access lessons that dive into linear algebra topics.
  • Estimated time: 15 hours
  • Estimated effort: 7
• As a general user, I would like to know how Convert+ can be used in a practical way and why the converter is important with its various types of conversions.
  • Given, I would like to know how Convert+ can be used in a practical way and why the converter is important, I will be able to read about its uses and practicality in specific industries and fields of study on the home page.
  • Estimated time: 3 hours
  • Estimated effort: 3

Sprint 4 Goals:

• Improve upon the user interface
  • Integrate Bootstrap and use a template to modernize the UI
  • Create a drop-down menu for the lessons
• Outline expansion of tutorials sections
  • Begin working on new lessons for Linear Algebra
• Review feedback from the open house and make necessary changes to user stories
• Work on expanding the converter
  • Add in conversions to rotation matrices
  • Test various conversion methods of quaternions to Euler angles for ranges
• Research and decide on either Pygame or JavaScript for the implementation of our graph

Sprint 4 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 a page for the input of Euler angles and output of the corresponding quaternion
• As a novice user, I want to be able to interact with a graph and move it around to better understand the values I input.
  • Find a better library or language to use for the graph so that the users can interact with it more and visualize the output better.
• As a novice user, I want to know when conversion back to Euler angles may produce a different result so I will not be confused.
  • Include information on the conversion page that shows a user the range of values that can be returned from the method being used
• 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
• As a novice user, I would like to learn more about linear algebra and the concepts that make these conversions possible at a more fundamental level so that when I read about 3D rotation, I can better understand it.
  • Outline and add linear algebra lessons that build towards the concepts behind the conversions and the 3D rotation

General Assignments and Priorities:

For this sprint, we prioritized updating our user interface and finding a template through Bootstrap that would work well for our website moving forward. Our front-end group worked heavily on the integration of Bootstrap with what we already had from last semester, and on changing specific design features like adding the collapsable menu on the right and the drop-down menu for the lessons. The main goal with this was to modernize the look of our website and make sure to meet the requirements of having a clean interface for our user stories.

Another part of strengthening our user interface is making sure that the graph for the 3D rotations can be easily understood and changed depending on the inputs that the users give it, so the second priority we had for this sprint was to decide on a new library or language that would work better for graphing and to begin integrating it. Our backend team made the decision to switch over to JavaScript from Python and has made progress on integrating the new code with the HTML.

Lastly, we have designed a new plan for the lessons and the content they will include so that we can bring in important concepts from linear algebra. We have a couple of the beginner linear algebra lessons completed and are working to build towards the ideas that surround the 3D rotations and conversions.

Individual Tasks:

Keely: For this sprint, I worked on looking deeper into the mathematics behind the conversion methods from a quaternion to a set of Euler angles and began implementing some methods I found through my research to test their results. In the future, we plan to give information on our website about the limited ranges that can be returned from these websites. In addition, I outlined a plan for the linear algebra lessons we will include in our tutorials section and wrote up a couple of the beginner lessons based on some sources I found for matrices and vectors.

Adam: In this sprint, I completely redid the design for the website, creating templates for each of the web pages, in order to give it a modern look. I experimented with various new color schemes that are more pleasing to the eye. I integrated helpful elements that draw the website visitor's eye. I did research on Bootstrap to streamline this process, thoroughly reading through the documentation. I shared these templates in order for Yao and Issa to help me with this task.

Sammy: During this sprint, I continued to work on the backend development. The biggest task was learning and implementing the packages from Three.js as we transitioned from Python to Javascript as our rotation renderer. Garron and I were able to create a rotation animation that is embedded in the new website design. This animation rotates each axis independently in a loop and is textured by an image of our logo that I created and applied to the cube mesh.

Yao: In this sprint, I first explored the possibility of rearranging the UI. And study the most perfect UI layout solution. Then I found that my group members had different preferences for different colors of UI, so I planned to add a settings page or a button to change the theme. But this Task is not developed for now, in the last week of this Sprint I mainly managed Github such as creating new folders, managing HTML, JavaScript files, and designing a version of Diablo theme.

Issa: In this sprint, I worked alongside Adam to discover how we can use bootstrap to create a more dynamic feeling to the site with united templet and I built a page. I looked into Bootstrap studio to build the components in an easier way, then copy their HTML code. I also looked into the possibility of using Bootstrap studio to help host the site and provide Cloud flare services as a result, after looking I found that we can not since it requires building everything using Bootstrap. So I looked into how to configure our AWS instance from last semester.

Garron: In this sprint, I worked primarily with Sammy to develop a model used for Euler rotations built using the libraries of Three.js. We also worked with Adam's existing Bootstrap HTML templates to place the renderer in the appropriate place. Additionally, I placed three axes on the renderer to better visualize the rotations and isolated each of the x, y, and z rotations. Luckily, the documentation for this software was quite plentiful and we plan to use it for the remainder of the project.

Burndown Chart:

Open House Feedback Review:

In the survey that we took during the open house, we received some feedback that was both encouraging and also challenging. We asked people to rate the design of the help page, of which 71% gave the design either a 4 or 5 out of 5 so that it was helpful to know that most of our users liked the layout of this page. While we are changing the way that our tutorials can be accessed by having a drop-down menu, we are still keeping the same general structure of having individual links to each of the lessons and having the additional resources be easily accessible on the side. We hope that for the people that didn't quite like the design of the help page, condensing the lessons into the drop-down menu will accommodate their expectations.

The next part of the survey asked our users to rate how informative they found the Home page to be and our results showed that 71% rated it with either a 4 or 5 out of 5. Since we are changing our user interface, there may be some adjustments to the information we display on our home page; however, this is an encouragement that the information we had there may be helpful to keep even as we change the user interface. In addition, we had great feedback on our tutorials section as 100% of our users either gave a 4 or 5 out of 5 on if they would find it helpful. Even so, we will be continuing to add to this section with the linear algebra lessons and have added to our user stories to account for this.

We had less positive feedback on the usability of the converter on Convert+, and 42% rated the usability as a 3 or 2 out of 5. One of our biggest goals is that this website would be easy to use and navigate, specifically with the converter, so one of our main focuses this semester will be to create a cleaner converter on the user interface with more helpful information and have a graph that is easier to understand as well.

Lastly, we had a few comments that were informative and gave us feedback on some specific changes we can make. One comment suggested making the output of the converter easier to copy. While we aren't entirely sure if this refers to the graph output or the calculated quaternion, we think that with the changes we are planning to make to the user interface, copying should be easier in general. Another comment said that the home page should include information about the equations and what they are used for in the first couple of sentences, so that definitely gives us the challenge to include some information about the importance and use of the converter right in the home page for people to see when they first visit Convert+. One of our new user stories is to mention the practical uses of 3D rotation and the conversions between various representations of a rotation on the home page.

SWOT Analysis:

Strengths:	Weaknesses:
Convert+ provides a specialized converter that focuses on very specific mathematical concepts and on providing the greatest possible accuracy and information surrounding 3D rotation.	Our team’s lack of experience in website building makes it difficult for us to know what tools and platforms are best to use to strengthen the design of Convert+.
Convert+ supplies accompanying information alongside its conversions and explanations of the mathematics that may not otherwise be provided converters and calculators of a larger scale.	As the majority of our focus is on the development of the necessary code and the integration of the different platforms we are using, we have placed less priority on working through the mathematics that will make the converter of greater value to our users.
The lessons and information provided on Convert+ surround important concepts for many growing industries that use 3D modeling, creating a learning platform for the vast numbers of students hoping to go into them.	While the use of JavaScript will be better for the visual representation of the rotations, it may prove to be more difficult to use for making the conversions.

Opportunities:	Threats:
Increasingly better libraries and integration platforms allow our website to expand the visual representation of the rotations through the 3D graph.	The growth of information provided on 3D rotation within well-known learning centers like GeeksForGeeks who can also tie in other lessons they provide may detract from using Convert+ which lacks other types of lessons.
Convert+ can expand its graphing functions to include any types of complex equations that students may want to visualize and in doing so reach more users.	The specialization of our website and the specificity of the topics covered by our learning center make our initial audience relatively small and can keep us from growing quickly.
Growth in industries like aerospace, game development, and animation, means an even greater attention towards 3D rotation and its importance, and a surge of people hoping to learn more about it as well.	For programmers, it is easy to use the libraries provided by various languages to make these conversions which means that it may be difficult to reach many in the field of software engineering.