Good day,
So I'm working on a drone powered by arduino and I was thinking about creating and attitude indicator in my android app to show the datas of the arduino gyros.
An attitude indicator is an aircraft instrument that shows the angle of the aircraft with respect to the ground. The attitude indicator is a 3 dimensional ball that can rotate in 3 rotations, pitch, roll, and yaw. What I need is a 3 dimensional ball that can rotate 3 dimension axis. Thanks
Thanks for your reply. I dont need an accelerometer since the data will come from the arduino. What I need is the visuals, how will I make a sphere that can rotate on 3 axis.
Sorry, didn't see that! What you wanted was to render in a 3D object, labeled with the 3 axes, right?
Yes. Like a sphere that can rotate in XYZ axis.
Hmm, that sounds like an interesting challenge. You might be able to solve it using a Canvas and handle the transformations from 3D to 2D in the blocks. Alternatively, you could use a WebViewer with a page that uses WebGL to render the 3D object in HTML/JavaScript.
I guess this might help
Not a globe but a possible way to display what you want (pitch, roll, yaw) using a Canvas and sprites; you might make something like this:
for the angle and use a long, thin bar image using the ability of the Sprite to rotate.
This will give you an attitude indicator; unfortunately not a globe.
Thanks for all your replies.
Wow it is really a challenge. So I need to render a 3d object coded in html then use a web viewer to see it, how then can I use incoming data to angle the sphere like pitch, roll, yaw?
If it seems quite impossible to do I might go with @SteveJG's idea.
IMHO, the 3D image of drone will be better, then 3D ball
May be the simplest variant is a square with sides, distorted according to pitch, roll and yaw
I have not had time to do the maths required, but you could do this with a canvas with the following blocks:
It would require circle maths to calculate 12 different values (six for each of the two arcs), then of course the conversion from the arduino values to the arc values
I modified an existing Project example to see what is possible for displaying roll, yaw and pitch. Here it is for you and others to experiment with. I think significant improvements are possible.
AttitudeIndicadtorPitchRollYaw.aia (21.0 KB)
Maybe this work in progress will be useful for someone.
I' m not very good with graphics so it should be interesting to see if anyone can make this 'pretty'.
The sliders are there to experiment with testing. The numbers used to change the Sprite orientation are values that make the Sprites compatible with a 200x200 pixel Canvas.
If you write an improvement, please post it and share with the community. 
This works on a Android 8.1 tablet.
Had a further attempt with drawing arcs. unfortunately it does not seem to be possible to draw a "tilted" arc/ellipse, therefore I can only get/show movement in 2D - up / down, left / right.
I think it may work if an ellipse drawn with coloured balls or small circles were used, would mean some calculations to divine the placement of each ball....
attitudometer2D.aia (4.3 KB)
Figured it out!! Used an extension by @MohamedTamer that has a rotate function. Used a couple of clocks to simulate the movement.
attitudometer3D.aia (25.2 KB)
Credits and thanks due to @MohamedTamer for his component tool extension
Thanks for your effort guys. The ball looks beautiful also its animation. Can I like add a design to the ball to add like the angles and labels?
Also for the yaw axis can I add a limit to it so it does not rotate 360 when I yaw the drone?
Yes, you can add design, lines and labels. These will all need to be redrawn everyone new data is presented, and realigned if the canvas is rotated. You can set a limit for the rotation. You can see how I did this for the two other dimensions.
