Last active
August 29, 2015 13:59
-
-
Save tkojitu/10714494 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| #viewport { | |
| border: 1px solid #000000; | |
| } | |
| </style> | |
| <script src="compass.js"></script> | |
| </head> | |
| <body> | |
| <canvas id="viewport"></canvas> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| var gNeedle = new Needle(); | |
| function initialize() { | |
| window.addEventListener("resize", resizeCanvas, false); | |
| window.addEventListener("deviceorientation", function(event){onDeviceOrientation(event);}, false); | |
| resizeCanvas(); | |
| } | |
| function getViewport() { | |
| return document.getElementById("viewport"); | |
| } | |
| function resizeCanvas() { | |
| var viewport = getViewport(); | |
| var size = getWindowMin(); | |
| viewport.width = size; | |
| viewport.height = size; | |
| redraw(0); | |
| } | |
| function getWindowMin() { | |
| return (window.innerWidth < window.innerHeight) ? window.innerWidth : window.innerHeight; | |
| } | |
| function redraw(degree) { | |
| var context = getViewport().getContext("2d"); | |
| clearViewport(context); | |
| gNeedle.draw(context, degree); | |
| } | |
| function clearViewport(context) { | |
| context.clearRect(0, 0, context.canvas.width, context.canvas.height); | |
| } | |
| function degreeToRadian(degree) { | |
| return degree * Math.PI / 180.0; | |
| } | |
| function Needle() { | |
| this.north = new NorthNeedle(); | |
| this.south = new SouthNeedle(); | |
| } | |
| Needle.prototype.draw = function(context, degree) { | |
| this.north.draw(context, degree); | |
| this.south.draw(context, degree); | |
| }; | |
| Needle.prototype.getWidth = function() { | |
| return 10.0; | |
| }; | |
| function NorthNeedle() { | |
| var size = getWindowMin(); | |
| var WIDTH = 10; | |
| this.x = size / 2.0 - WIDTH / 2.0; | |
| this.y = size / 4.0; | |
| this.width = WIDTH; | |
| this.height = size / 4.0; | |
| } | |
| NorthNeedle.prototype.draw = function(context, degree) { | |
| var centerx = this.x + this.width / 2.0; | |
| var centery = this.y + this.height; | |
| context.save(); | |
| context.translate(centerx, centery); | |
| context.rotate(degreeToRadian(degree)); | |
| context.translate(-centerx, -centery); | |
| context.fillStyle = "#ff0000"; | |
| context.fillRect(this.x, this.y, this.width, this.height); | |
| context.restore(); | |
| }; | |
| function SouthNeedle() { | |
| var size = getWindowMin(); | |
| var WIDTH = 10; | |
| this.x = size / 2.0 - WIDTH / 2.0; | |
| this.y = size / 2; | |
| this.width = WIDTH; | |
| this.height = size / 4.0; | |
| } | |
| SouthNeedle.prototype.draw = function(context, degree) { | |
| var centerx = this.x + this.width / 2.0; | |
| var centery = this.y; | |
| context.save(); | |
| context.translate(centerx, centery); | |
| context.rotate(degreeToRadian(degree)); | |
| context.translate(-centerx, -centery); | |
| context.fillStyle = "#0000ff"; | |
| context.fillRect(this.x, this.y, this.width, this.height); | |
| context.restore(); | |
| }; | |
| function onDeviceOrientation(event) { | |
| redraw(event.alpha); | |
| } | |
| window.addEventListener("load", initialize, false); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment