Animate object using android accelerometer data

Question

I am using an Android app to stream accelerometer data to a python script on my PC, which is then written to a text file. I am then attempting to use Javascript and jQuery to animate a 3d CSS cuboid (in the shape of a device) to mimic how the device moved when streaming the data.

At first I tried this using the gyroscope data, which is outputted in radians/s. I converted this to degrees/s by multiplying the value by 57 (one radian in degs) or so, but when I tried to rotateX: 100deg for instance this resulted in erratic behaviour when using these values to animate.

I would like to know how I can animate a 3d CSS object using data gathered from my android device's accelerometer, or whether this is possible at all?

Answer 1

Consider using WebGL, you will find much of what you need in its API(for 3D transformation and rendering of the phone object in browser).
Also, as user1561358 suggests cut the middle man, why are you using a python script to relay data when you can open a websocket from the js to your android app. This will also save you from constantly polling the file.

I would like a full explanation to my problem.

1. Android application creates a socket on launchtime, informs the user of its ip and port.
2. webgl app asks for the ip:port information, upon submit opens the websocket.
3. if the handshake is successful asks user to stabilize the phone and sync both ends(presses a button so that phone will inform the WebGL that it is perfectly horizontal.)
4. from sync on, phone will relay any changes in 3 axes to the WebGL app thru the socket.
5. WebGL transforms the phone object according to received changes of phone orientation.