| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Device Motion/Orientation diagnostic measurements</title> |
| </head> |
| <body> |
| <table> |
| <tr> |
| <td colspan="2"> |
| <hr> |
| </td> |
| </tr> |
| <tr> |
| <td>Motion Supported</td> |
| <td width="250px" id="motionSupported"></td> |
| </tr> |
| <tr> |
| <td>motion acceleration (x, y, z)</td> |
| <td id="motionAccel"></td> |
| </tr> |
| <tr> |
| <td>motion acceleration incl. gravity (x, y, z)</td> |
| <td id="motionAccelG"></td> |
| </tr> |
| <tr> |
| <td>motion rotation rate (α, β, γ)</td> |
| <td id="motionRotation"></td> |
| </tr> |
| <tr> |
| <td>real-time motion frequency (Hz)</td> |
| <td id="motionFreq"></td> |
| </tr> |
| <tr> |
| <td>motion max frequency (Hz)</td> |
| <td id="motionMaxFreq"></td> |
| </tr> |
| <tr> |
| <td>motion stated interval</td> |
| <td id="motionInterval"></td> |
| </tr> |
| <tr> |
| <td colspan="2"> |
| <hr> |
| </td> |
| </tr> |
| <tr> |
| <td>Orientation Supported</td> |
| <td id="orientationSupported"></td> |
| </tr> |
| <tr> |
| <td>orientation values (α, β, γ)</td> |
| <td id="orientationValues"></td> |
| </tr> |
| <tr> |
| <td>orientation frequency (Hz)</td> |
| <td id="orientationFreq"></td> |
| </tr> |
| <tr> |
| <td>orientation max frequency (Hz)</td> |
| <td id="orientationMaxFreq"></td> |
| </tr> |
| </table> |
| |
| <script type="text/javascript"> |
| var numberMotionEvents = 0; |
| var numberOrientationEvents = 0; |
| var motionMaxFreq = 0; |
| var orientationMaxFreq = 0; |
| var updateIntervalDelaySec = 2; |
| |
| function onMotion(event) { |
| document.getElementById('motionAccel').innerHTML = |
| roundToFixedArray([event.acceleration.x, |
| event.acceleration.y, |
| event.acceleration.z]); |
| |
| document.getElementById("motionAccelG").innerHTML = |
| roundToFixedArray([event.accelerationIncludingGravity.x, |
| event.accelerationIncludingGravity.y, |
| event.accelerationIncludingGravity.z]); |
| |
| document.getElementById("motionRotation").innerHTML = |
| roundToFixedArray([event.rotationRate.alpha, |
| event.rotationRate.beta, |
| event.rotationRate.gamma]); |
| |
| document.getElementById("motionInterval").innerHTML = event.interval; |
| ++numberMotionEvents; |
| } |
| |
| function roundToFixed(value) { |
| return value==null ? value : value.toFixed(4); |
| } |
| |
| function roundToFixedArray(values) { |
| return '[' + values.map(function(value) { |
| return roundToFixed(value); |
| }).join(',') + ']'; |
| } |
| |
| function onOrientation(event) { |
| document.getElementById("orientationValues").innerHTML = |
| roundToFixedArray([event.alpha, event.beta, event.gamma]); |
| ++numberOrientationEvents; |
| } |
| |
| function updateMeasurements() { |
| var motionFreq = numberMotionEvents/updateIntervalDelaySec; |
| var orientationFreq = numberOrientationEvents/updateIntervalDelaySec; |
| motionMaxFreq = Math.max(motionMaxFreq, motionFreq); |
| orientationMaxFreq = Math.max(orientationMaxFreq, orientationFreq); |
| |
| document.getElementById("motionFreq").innerHTML = motionFreq; |
| document.getElementById("motionMaxFreq").innerHTML = motionMaxFreq; |
| document.getElementById("orientationFreq").innerHTML = orientationFreq; |
| document.getElementById("orientationMaxFreq").innerHTML = orientationMaxFreq; |
| |
| numberMotionEvents = 0; |
| numberOrientationEvents = 0; |
| } |
| |
| var motionSupported="not supported"; |
| var orientationSupported="not supported"; |
| |
| if (window.DeviceMotionEvent) { |
| window.addEventListener('devicemotion', onMotion) |
| motionSupported="supported"; |
| } |
| document.getElementById("motionSupported").innerHTML = motionSupported; |
| |
| if (window.DeviceOrientationEvent) { |
| window.addEventListener('deviceorientation', onOrientation); |
| orientationSupported = "supported"; |
| } |
| document.getElementById("orientationSupported").innerHTML = orientationSupported; |
| |
| setInterval(function(){updateMeasurements()}, updateIntervalDelaySec*1000); |
| |
| </script> |
| |
| </body> |
| </html> |
