| OLD | NEW |
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 <style> | |
| 4 .highlight { background-color: #eee; } | |
| 5 </style> | |
| 6 <head> | |
| 7 <title>Device Motion/Orientation diagnostic measurements</title> | |
| 8 </head> | |
| 9 <body> | |
| 10 <table> | |
| 11 <tr> | |
| 12 <td colspan="2"> | |
| 13 <hr> | |
| 14 </td> | |
| 15 </tr> | |
| 16 <tr class='highlight'> | |
| 17 <td>'devicemotion' status</td> | |
| 18 <td width="250px" id="motionSupported"></td> | |
| 19 </tr> | |
| 20 <tr> | |
| 21 <td>relevant sensors available:</td> | |
| 22 <td id="motionSensorsAvailable"></td> | |
| 23 </tr> | |
| 24 <tr> | |
| 25 <td>motion acceleration (x, y, z)</td> | |
| 26 <td id="motionAccel"></td> | |
| 27 </tr> | |
| 28 <tr> | |
| 29 <td>motion acceleration incl. gravity (x, y, z)</td> | |
| 30 <td id="motionAccelG"></td> | |
| 31 </tr> | |
| 32 <tr> | |
| 33 <td>motion rotation rate (α, β, γ)</td> | |
| 34 <td id="motionRotation"></td> | |
| 35 </tr> | |
| 36 <tr> | |
| 37 <td>real-time motion frequency (Hz)</td> | |
| 38 <td id="motionFreq"></td> | |
| 39 </tr> | |
| 40 <tr> | |
| 41 <td>motion max frequency (Hz)</td> | |
| 42 <td id="motionMaxFreq"></td> | |
| 43 </tr> | |
| 44 <tr> | |
| 45 <td>motion stated interval</td> | |
| 46 <td id="motionInterval"></td> | |
| 47 </tr> | |
| 48 <tr> | |
| 49 <td colspan="2"> | |
| 50 <hr> | |
| 51 </td> | |
| 52 </tr> | |
| 53 <tr class='highlight'> | |
| 54 <td>'deviceorientation' status</td> | |
| 55 <td id="orientationSupported"></td> | |
| 56 </tr> | |
| 57 <tr> | |
| 58 <td>relevant sensors available:</td> | |
| 59 <td id="orientationSensorsAvailable"></td> | |
| 60 </tr> | |
| 61 <tr> | |
| 62 <td>orientation values (α, β, γ)</td> | |
| 63 <td id="orientationValues"></td> | |
| 64 </tr> | |
| 65 <tr> | |
| 66 <td>orientation absolute</td> | |
| 67 <td id="orientationAbsolute"></td> | |
| 68 </tr> | |
| 69 <tr> | |
| 70 <td>orientation frequency (Hz)</td> | |
| 71 <td id="orientationFreq"></td> | |
| 72 </tr> | |
| 73 <tr> | |
| 74 <td>orientation max frequency (Hz)</td> | |
| 75 <td id="orientationMaxFreq"></td> | |
| 76 </tr> | |
| 77 <tr> | |
| 78 <td colspan="2"> | |
| 79 <hr> | |
| 80 </td> | |
| 81 </tr> | |
| 82 <tr class='highlight'> | |
| 83 <td>'deviceorientationabsolute' status</td> | |
| 84 <td id="orientationAbsoluteSupported"></td> | |
| 85 </tr> | |
| 86 <tr> | |
| 87 <td>relevant sensors available:</td> | |
| 88 <td id="orientationAbsoluteSensorsAvailable"></td> | |
| 89 </tr> | |
| 90 <tr> | |
| 91 <td>orientationabsolute values (α, β, γ)</td> | |
| 92 <td id="orientationAbsoluteValues"></td> | |
| 93 </tr> | |
| 94 <tr> | |
| 95 <td>orientationabsolute absolute</td> | |
| 96 <td id="orientationAbsoluteAbsolute"></td> | |
| 97 </tr> | |
| 98 <tr> | |
| 99 <td>orientationabsolute frequency (Hz)</td> | |
| 100 <td id="orientationAbsoluteFreq"></td> | |
| 101 </tr> | |
| 102 <tr> | |
| 103 <td>orientationabsolute max frequency (Hz)</td> | |
| 104 <td id="orientationAbsoluteMaxFreq"></td> | |
| 105 </tr> | |
| 106 </table> | |
| 107 | |
| 108 <script type="text/javascript"> | |
| 109 var numberMotionEvents = 0; | |
| 110 var numberOrientationEvents = 0; | |
| 111 var numberOrientationAbsoluteEvents = 0; | |
| 112 var motionMaxFreq = 0; | |
| 113 var orientationMaxFreq = 0; | |
| 114 var orientationAbsoluteMaxFreq = 0; | |
| 115 var updateIntervalDelaySec = 2; | |
| 116 | |
| 117 function onMotion(event) { | |
| 118 if (event.acceleration.x==null && event.acceleration.y==null && event.ac
celeration.z==null | |
| 119 && event.accelerationIncludingGravity.x==null && event.accelerationIn
cludingGravity.y==null && event.accelerationIncludingGravity.z==null | |
| 120 && event.rotationRate.alpha==null && event.rotationRate.beta==null &&
event.rotationRate.gamma==null) { | |
| 121 // null-event | |
| 122 document.getElementById("motionSensorsAvailable").innerHTML = "no"; | |
| 123 return; | |
| 124 } | |
| 125 | |
| 126 document.getElementById('motionAccel').innerHTML = | |
| 127 roundToFixedArray([event.acceleration.x, | |
| 128 event.acceleration.y, | |
| 129 event.acceleration.z]); | |
| 130 | |
| 131 document.getElementById("motionAccelG").innerHTML = | |
| 132 roundToFixedArray([event.accelerationIncludingGravity.x, | |
| 133 event.accelerationIncludingGravity.y, | |
| 134 event.accelerationIncludingGravity.z]); | |
| 135 | |
| 136 document.getElementById("motionRotation").innerHTML = | |
| 137 roundToFixedArray([event.rotationRate.alpha, | |
| 138 event.rotationRate.beta, | |
| 139 event.rotationRate.gamma]); | |
| 140 | |
| 141 document.getElementById("motionInterval").innerHTML = event.interval; | |
| 142 document.getElementById("motionSensorsAvailable").innerHTML = "yes"; | |
| 143 ++numberMotionEvents; | |
| 144 } | |
| 145 | |
| 146 function roundToFixed(value) { | |
| 147 return value==null ? value : value.toFixed(4); | |
| 148 } | |
| 149 | |
| 150 function roundToFixedArray(values) { | |
| 151 return '[' + values.map(function(value) { | |
| 152 return roundToFixed(value); | |
| 153 }).join(',') + ']'; | |
| 154 } | |
| 155 | |
| 156 function onOrientation(event) { | |
| 157 if (event.alpha==null && event.beta==null && event.gamma==null) { | |
| 158 // null-event | |
| 159 document.getElementById("orientationSensorsAvailable").innerHTML = "no
"; | |
| 160 return; | |
| 161 } | |
| 162 document.getElementById("orientationValues").innerHTML = | |
| 163 roundToFixedArray([event.alpha, event.beta, event.gamma]); | |
| 164 document.getElementById("orientationAbsolute").innerHTML = event.absolut
e; | |
| 165 document.getElementById("orientationSensorsAvailable").innerHTML = "yes"
; | |
| 166 ++numberOrientationEvents; | |
| 167 } | |
| 168 | |
| 169 function onOrientationAbsolute(event) { | |
| 170 if (event.alpha==null && event.beta==null && event.gamma==null) { | |
| 171 // null-event | |
| 172 document.getElementById("orientationAbsoluteSensorsAvailable").innerHT
ML = "no"; | |
| 173 return; | |
| 174 } | |
| 175 document.getElementById("orientationAbsoluteValues").innerHTML = | |
| 176 roundToFixedArray([event.alpha, event.beta, event.gamma]); | |
| 177 document.getElementById("orientationAbsoluteAbsolute").innerHTML = event
.absolute; | |
| 178 document.getElementById("orientationAbsoluteSensorsAvailable").innerHTML
= "yes"; | |
| 179 ++numberOrientationAbsoluteEvents; | |
| 180 } | |
| 181 | |
| 182 function updateMeasurements() { | |
| 183 var motionFreq = numberMotionEvents/updateIntervalDelaySec; | |
| 184 var orientationFreq = numberOrientationEvents/updateIntervalDelaySec; | |
| 185 var orientationAbsoluteFreq = numberOrientationAbsoluteEvents/updateInte
rvalDelaySec; | |
| 186 motionMaxFreq = Math.max(motionMaxFreq, motionFreq); | |
| 187 orientationMaxFreq = Math.max(orientationMaxFreq, orientationFreq); | |
| 188 orientationAbsoluteMaxFreq = Math.max(orientationAbsoluteMaxFreq, orient
ationAbsoluteFreq); | |
| 189 | |
| 190 document.getElementById("motionFreq").innerHTML = motionFreq; | |
| 191 document.getElementById("motionMaxFreq").innerHTML = motionMaxFreq; | |
| 192 document.getElementById("orientationFreq").innerHTML = orientationFreq; | |
| 193 document.getElementById("orientationMaxFreq").innerHTML = orientationMax
Freq; | |
| 194 document.getElementById("orientationAbsoluteFreq").innerHTML = orientati
onAbsoluteFreq; | |
| 195 document.getElementById("orientationAbsoluteMaxFreq").innerHTML = orient
ationAbsoluteMaxFreq; | |
| 196 | |
| 197 numberMotionEvents = 0; | |
| 198 numberOrientationEvents = 0; | |
| 199 numberOrientationAbsoluteEvents = 0; | |
| 200 } | |
| 201 | |
| 202 var motionSupported="not supported"; | |
| 203 var orientationSupported="not supported"; | |
| 204 var orientationAbsoluteSupported="no supported"; | |
| 205 | |
| 206 if ('ondevicemotion' in window) { | |
| 207 window.addEventListener('devicemotion', onMotion) | |
| 208 motionSupported="supported"; | |
| 209 } | |
| 210 document.getElementById("motionSupported").innerHTML = motionSupported; | |
| 211 | |
| 212 if ('ondeviceorientation' in window) { | |
| 213 window.addEventListener('deviceorientation', onOrientation); | |
| 214 orientationSupported = "supported"; | |
| 215 } | |
| 216 document.getElementById("orientationSupported").innerHTML = orientationSup
ported; | |
| 217 | |
| 218 if ('ondeviceorientationabsolute' in window) { | |
| 219 window.addEventListener('deviceorientationabsolute', onOrientationAbsolu
te); | |
| 220 orientationAbsoluteSupported = "supported"; | |
| 221 } | |
| 222 document.getElementById("orientationAbsoluteSupported").innerHTML = orient
ationAbsoluteSupported; | |
| 223 | |
| 224 setInterval(function(){updateMeasurements()}, updateIntervalDelaySec*1000)
; | |
| 225 </script> | |
| 226 | |
| 227 </body> | |
| 228 </html> | |
| OLD | NEW |