Skip to content

Instantly share code, notes, and snippets.

@sakapon

sakapon/sensor.html

Last active January 26, 2019 03:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sakapon/bd27820c79c487ae43c7b709282cf312 to your computer and use it in GitHub Desktop.
Save sakapon/bd27820c79c487ae43c7b709282cf312 to your computer and use it in GitHub Desktop.
Download ZIP
DeviceSignal/Client
Raw
sensor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>DeviceSync - Sensor</title>
<script type="text/javascript" src="/Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.signalR-2.4.0.min.js"></script>
<script type="text/javascript" src="/signalr/hubs"></script>
</head>
<body>
<script type="text/javascript">
var sensorHub = $.connection.sensorHub;
$.connection.hub.start();
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", function (e) {
sensorHub.server.updateOrientation(e.alpha, e.beta, e.gamma);
});
}
</script>
</body>
</html>
Raw
viewer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>DeviceSync - Viewer</title>
<script type="text/javascript" src="/Scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.signalR-2.4.0.min.js"></script>
<script type="text/javascript" src="/signalr/hubs"></script>
<!-- style の記述を省略 -->
</head>
<body>
<div id="log"></div>
<div class="container">
<div id="cube">
<div class="face front">1</div>
<div class="face back">6</div>
<div class="face right">2</div>
<div class="face left">5</div>
<div class="face top">3</div>
<div class="face bottom">4</div>
</div>
</div>
<img id="image" src="website_news.png" style="margin: 80px;" />
<script type="text/javascript">
var sensorHub = $.connection.sensorHub;
sensorHub.client.notifyOrientation = updateOrientation;
$.connection.hub.start();
var logEl = document.querySelector("#log");
var cubeEl = document.querySelector("#cube");
var imageEl = document.querySelector("#image");
function updateOrientation(alpha, beta, gamma) {
logEl.innerHTML = `alpha: ${alpha}<br />beta: ${beta}<br />gamma: ${gamma}`;
var rotation = `rotateZ(${-alpha}deg) rotateX(${-beta}deg) rotateY(${gamma}deg)`;
cubeEl.style.transform = rotation;
imageEl.style.transform = rotation;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment