Skip to content

Instantly share code, notes, and snippets.

@bellbind

bellbind/index.html

Last active October 26, 2017 04:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bellbind/c885f85a0dd0e4681ee5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bellbind/c885f85a0dd0e4681ee5 to your computer and use it in GitHub Desktop.
Download ZIP
[html5][devicemotion]live demo of devicemoton event
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>devicemotion event</title>
<script src="script.js"></script>
</head>
<body>
<h1>devicemotion event demo</h1>
<p>
Unit of value is m/s^2(g = +9.8).
The device orientation is not effect axes and values.
</p>
<p>
Axes of portrait device, x: right(-) to left(+), y: top(-) to bottom(+),
z: front(-) to rear(+)
</p>
<div><h2>Acceleration (w/o Gravity)</h2>
<ul>
<li>x: <input id="x1" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="x1n" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
<li>y: <input id="y1" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="y1n" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
<li>z: <input id="z1" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="z1n" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
<li>abs: <input id="abs1" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="abs1n" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
</ul>
</div>
<div><h2>Acceleration (w/ Gravity)</h2>
<ul>
<li>x: <input id="x2" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="x2n" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
<li>y: <input id="y2" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="y2n" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
<li>z: <input id="z2" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="z2n" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
<li>abs: <input id="abs2" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="abs2n" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
</ul>
</div>
<div><h2>Acceleration (vertical/horizontal)</h2>
<ul>
<li>v: <input id="v" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="vn" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
<li>h: <input id="h" type="range" max="20.0" min="-20.0"
readonly="readonly"/>
<input id="hn" type="number" max="20.0" min="-20.0"
readonly="readonly"/>
</li>
</ul>
</div>
<div>
Walk counter: <span id="counter">0</span>
steps
<button id="reset" style="padding: 5px 30px; border-radius: 10px;"
>reset</button>
</div>
<div id="log"></div>
</body>
</html>
Raw
script.js
;window.addEventListener("load", function () {
"use strict";
var v1 = {
x: document.getElementById("x1"),
y: document.getElementById("y1"),
z: document.getElementById("z1"),
abs: document.getElementById("abs1"),
xn: document.getElementById("x1n"),
yn: document.getElementById("y1n"),
zn: document.getElementById("z1n"),
absn: document.getElementById("abs1n"),
};
var v2 = {
x: document.getElementById("x2"),
y: document.getElementById("y2"),
z: document.getElementById("z2"),
abs: document.getElementById("abs2"),
xn: document.getElementById("x2n"),
yn: document.getElementById("y2n"),
zn: document.getElementById("z2n"),
absn: document.getElementById("abs2n"),
};
var abs = function (a) {
return Math.sqrt(a.x*a.x + a.y*a.y + a.z*a.z);
};
var showAccel = function (v, accel) {
v.x.value = v.xn.value = accel.x;
v.y.value = v.yn.value = accel.y;
v.z.value = v.zn.value = accel.z;
v.abs.value = v.absn.value = abs(accel);
};
// split vertical/horizontal elements of acceleration
var vhview = {
v: document.getElementById("v"),
vn: document.getElementById("vn"),
h: document.getElementById("h"),
hn: document.getElementById("hn"),
};
var splitVH = function (ev) {
var acc = ev.acceleration, accg = ev.accelerationIncludingGravity;
// calc gravity element
var g = {x: accg.x - acc.x, y: accg.y - acc.y, z: accg.z - acc.z};
var gl = abs(g);
var ev = {x: g.x / gl, y: g.y / gl, z: g.z / gl}; // unit vector
// calc vertical(= gravity direction) part
var vl = acc.x * ev.x + acc.y * ev.y + acc.z * ev.z;
var v = {x: ev.x * vl, y: ev.y * vl, z: ev.z * vl};
// split horizontal(= orthogonal plane of gravity) part
var h = {x: acc.x - v.x, y: acc.y - v.y, z: acc.z - v.z};
return {v: v, h: h, ev: ev, vl: vl};
};
var showVH = function (vh) {
vhview.v.value = vhview.vn.value = Math.abs(vh.vl);
vhview.h.value = vhview.hn.value = abs(vh.h);
};
// Simple Walk Counter
var counter = document.getElementById("counter");
var vl = 0.0; // noise filtered value
var count = 0;
var updown = 0;
var thresholds = {up: 0.5, down: -0.25};
var walking = function (vh) {
vl = 0.9 * vl + 0.1 * vh.vl; //low-pass filtering
switch (updown) {
case -1:
if (vl > thresholds.up) {
updown = +1;
count += 1;
}
break;
case +1:
if (vl < thresholds.down) {
updown = -1;
}
break;
default:
if (vl < 0) updown = -1;
if (vl >= 0) updown = +1;
break;
}
counter.textContent = count;
};
var reset = document.getElementById("reset");
reset.addEventListener("click", function () {
vl = 0.0;
count = 0;
updown = 0;
}, false);
// see: http://www.w3.org/TR/orientation-event/
window.addEventListener("devicemotion", function (ev) {
try {
showAccel(v1, ev.acceleration);
showAccel(v2, ev.accelerationIncludingGravity);
var vh = splitVH(ev);
showVH(vh);
walking(vh);
} catch (ex) {
document.getElementById("log").textContent = ex.toString();
}
}, false);
}, false);
@bellbind
Copy link
Author

bellbind commented Apr 8, 2015

demo: https://rawgit.com/bellbind/c885f85a0dd0e4681ee5/raw/index.html

(walk counter is almost fake)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment