Permalink
Browse files

Removed code which I don't need anymore since I'm using a simulator f…

…or testing.
  • Loading branch information...
1 parent 6541ebf commit 8ad51ee5ca16ef5cd384ab3a6f8fd321a158b3a6 @cantrell committed Nov 18, 2011
Showing with 52 additions and 77 deletions.
  1. +1 −1 compass.manifest
  2. +35 −0 dead_code.html
  3. +16 −76 index.html
View
@@ -1,6 +1,6 @@
CACHE MANIFEST
-# Version: 1.05
+# Version: 1.06
CACHE:
index.html
View
@@ -51,6 +51,41 @@
window.removeEventListener('orientationchange', onResize);
document.onmousemove = null;
}
+
+function start()
+{
+ window.addEventListener('deviceorientation', onDeviceOrientationChange);
+
+ if (hasCompass)
+ {
+ if (navigator.userAgent.toLowerCase().indexOf('android') != -1) // Android
+ {
+ // On Android, we have to listen for resize events. That's how you get
+ // the correct innerWidth and innerHeight.
+ window.addEventListener('resize', onResize);
+
+ // Use a rendering loop to smooth out the erratic gyroscope values.
+ renderingInterval = setInterval(animateNeedle, NEEDLE_ANIMATION_UPDATE_INTERVAL);
+ }
+ else // iOS
+ {
+ // On iOS, we can't use resize events because they fire every time innerHTML
+ // is set. Instead, we'll use 'orientationchange' events.
+ window.addEventListener('orientationchange', onResize);
+ }
+ }
+ else
+ {
+ setupDesktop();
+ }
+}
+
+function setupDesktop()
+{
+ window.orientation = 0;
+ window.addEventListener('resize', onResize);
+}
+
</script>
</head>
View
@@ -66,16 +66,23 @@
</style>
+</head>
+
+<body>
+ <canvas id="faceCanvas"></canvas>
+ <canvas id="needleCanvas"></canvas>
+ <div id="degrees" class="label">---</div>
+ <div id="direction" class="label">--</div>
+</body>
+
<script type="text/javascript">
var w, h, faceRadius, faceDiameter;
var needleAngle, needleWidth, needleLength, crossLength, faceShapeLength, faceShapeLengthShort, faceShapeWidth, ringWidth;
var renderingInterval = -1;
-var simulationInterval = -1;
var currentHeading;
var hasCompass;
var faceFontSize, faceFontSizeSmall, dataFontSize;
-var mouseX, mouseY;
var NEEDLE_ANIMATION_UPDATE_INTERVAL = 100;
var SIMULATION_INTERVAL = 50;
@@ -102,12 +109,10 @@
checkForUpdate();
currentHeading = 0;
needleAngle = 0;
- measure();
+ if (!measure()) return;
drawFace();
drawNeedle();
drawLabels();
- mouseX = w / 2;
- mouseY = 0;
testForCompass();
}
@@ -431,29 +436,13 @@
function start()
{
- window.addEventListener('deviceorientation', onDeviceOrientationChange);
+ window.addEventListener('deviceorientation', onDeviceOrientationChange); // Gyroscope
+ window.addEventListener('orientationchange', onResize); // Orientation
- if (hasCompass)
+ if (navigator.userAgent.toLowerCase().indexOf('android') != -1)
{
- if (navigator.userAgent.toLowerCase().indexOf('android') != -1) // Android
- {
- // On Android, we have to listen for resize events. That's how you get
- // the correct innerWidth and innerHeight.
- window.addEventListener('resize', onResize);
-
- // Use a rendering loop to smooth out the erratic gyroscope values.
- renderingInterval = setInterval(animateNeedle, NEEDLE_ANIMATION_UPDATE_INTERVAL);
- }
- else // iOS
- {
- // On iOS, we can't use resize events because they fire every time innerHTML
- // is set. Instead, we'll use 'orientationchange' events.
- window.addEventListener('orientationchange', onResize);
- }
- }
- else
- {
- setupDesktop();
+ // Use a rendering loop to smooth out the erratic gyroscope values.
+ renderingInterval = setInterval(animateNeedle, NEEDLE_ANIMATION_UPDATE_INTERVAL);
}
}
@@ -498,31 +487,11 @@
start();
}
-function setupDesktop()
-{
- window.orientation = 0;
- window.addEventListener('resize', onResize);
- document.onmousemove = function(e) {mouseX = e.clientX; mouseY = e.clientY};
- simulationInterval = setInterval(simulateGyroscope, SIMULATION_INTERVAL);
-}
-
-function simulateGyroscope()
-{
- var event = document.createEvent('Event');
- event.initEvent('deviceorientation', true, true);
- var mouseAngle = getMouseAngle(mouseX, mouseY);
- event.webkitCompassHeading = (360 - mouseAngle);
- window.dispatchEvent(event);
-}
-
function stop()
{
if (renderingInterval) clearInterval(renderingInterval);
- if (simulationInterval) clearInterval(simulationInterval);
window.removeEventListener('deviceorientation', onDeviceOrientationChange);
- window.removeEventListener('resize', onResize);
window.removeEventListener('orientationchange', onResize);
- document.onmousemove = null;
}
function animateNeedle()
@@ -542,7 +511,7 @@
}
}
- delta /= 5; // Add a little additional easing (for devices only).
+ delta /= 5;
needleAngle = needleAngle + delta;
// Rotate _to_ the number indicated, not _by_ the number indicated
var finalNeedleAngle = needleAngle - window.orientation;
@@ -602,26 +571,6 @@
}
}
-function getMouseAngle(x, y)
-{
- var A = [faceRadius, faceRadius];
- var B = [x - ((w /2) - faceRadius), y - ((h/2) - faceRadius)];
- var C = [faceRadius, 0];
-
- var a = Math.sqrt( Math.pow((B[0] - C[0]), 2) + Math.pow((B[1] - C[1]), 2) );
- var b = Math.sqrt( Math.pow((A[0] - C[0]), 2) + Math.pow((A[1] - C[1]), 2) );
- var c = Math.sqrt( Math.pow((B[0] - A[0]), 2) + Math.pow((B[1] - A[1]), 2) );
-
- var cosA = (Math.pow(b, 2) + Math.pow(c, 2) - Math.pow(a, 2)) / (2*b*c);
- var angle = radToDeg(Math.acos(cosA));
-
- if (B[0] < A[0])
- {
- angle = 180 + (180 - angle);
- }
- return angle;
-}
-
function onDeviceOrientationChange(event)
{
if (event.webkitCompassHeading != undefined)
@@ -660,13 +609,4 @@
</script>
-</head>
-
-<body>
- <canvas id="faceCanvas"></canvas>
- <canvas id="needleCanvas"></canvas>
- <div id="degrees" class="label">---</div>
- <div id="direction" class="label">--</div>
-</body>
-
</html>

0 comments on commit 8ad51ee

Please sign in to comment.