Intro

There are such a lot of ways to improve some frontend to display data from XDK. For this project we need to determine where is our XDK located in space which is pretty important for create and algorithm or PID or some control stuff for get correct orientation for our (Cansat, drone, or rocket).

For this the first step is to get the virtual sensor data from XDK, this virtual sensor provide us from the BMI160 accel and gyro data that is already converted for us to quaternions or euler angles, this kind of data type that we received is really useful because we don't need a lot to display it. we just need a good renderer 3D in your language preference and the most of this 3D software provides us with options to render quaternions or euler angles, even rotation matrix. so It is pretty simple to make some object rotation from XDK data.

In my investigation I just realize that there is not a lot of information about this kind of rotation with quaternions specially from IMU's or sensors. so I just decide to put here the different ways to use quaternions for rotate objects.

something important to keep in mind is that if you choose use Euler angles, you are going to have some related problems to this kind of values called "Gimbal Lock", at first I was sceptic about it but when I just try to use this values there was the gimbal lock avoiding the 3D object to can rotate more than 90º degrees in pitch.

A lot of people is going to suggest you to convert quaternions (That actually is the solution to gimbal lock because is compounded from 4 vector (w,x,y,z) ) to euler angles but If you do that expecting that there is not going to be a gimbal lock because you got this euler angles from quaternions, you are wrong. Gimbal lock is going to be there always if you use Euler angles doesn't matter if you convert it from another kind of values.

So, in order to avoid gimbal lock what you need to do is to use a good selection in your preference language, and of course the tools that you need to use.

JS

-THREE.js

Three.js is a cross-browser JavaScript library and Application Programming Interface (API) used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL. The source code is hosted in a repository on GitHub.

THREE.js allow you to use Quaternions or rotation Matrix for rotate an object.

Matlab

There is a lot of plugins for matlab in order to render 3D objects and visualize rotations.

Python

-Blender

The software. Blender is the free and open source 3D creation suite. It supports the entirety of the 3D pipeline—modeling, rigging, animation, simulation, rendering, compositing and motion tracking, even video editing and game creation.

Unity

Unity is a cross-platform game engine developed by Unity Technologies. and used to develop video games for PC, consoles, mobile devices and websites. First announced only for OS X, at Apple's Worldwide Developers Conference in 2005, it has since been extended to target more than fifteen platforms.

Unity also allow you to use rotation matrix or Quaternions for rotate an object.

After this selection what I decided to use is JS, using THREE.js facilitates the way that I can see the rotation in an object in a easy way, but I will make another tutorial for use XDK data with Unity and Python.