Skip to content

Instantly share code, notes, and snippets.

@bellbind

bellbind/index.html

Last active October 26, 2017 04:48
Show Gist options
  • Save bellbind/c885f85a0dd0e4681ee5 to your computer and use it in GitHub Desktop.
Save bellbind/c885f85a0dd0e4681ee5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bellbind revised this gist Apr 10, 2015. 1 changed file with 86 additions and 76 deletions.
    162 changes: 86 additions & 76 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +1,6 @@
    ;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"),
    };

    // vec math
    var add = function (a, b) {
    return {x: a.x + b.x, y: a.y + b.y, z: a.z + b.z};
    @@ -42,20 +21,7 @@
    return Math.sqrt(dot(a, a));
    };

    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
    @@ -68,6 +34,7 @@
    // split horizontal(= orthogonal plane of gravity) part
    var h = sub(acc, v);
    // orthogonal plane elements(y: top-bottom, x: right->left)
    // (as left hand system)
    var ex = cross({x: 0, y: 1, z: 0}, ez);
    var ey = cross(ez, ex);
    var yl = dot(h, ey);
    @@ -78,47 +45,9 @@
    v: v, h: h, ez: ez, vl: vl, ex: ex, ey: ey, xl: xl, yl: yl
    };
    };
    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.25, 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);


    // record data in devicemotion event, not draw
    // Record acceleration data at devicemotion event for views
    // NOTE: not drawing in "devicemotion" event handlers because of delaying
    var lastvh = null;
    var xl = 0.0;
    var yl = 0.0;
    @@ -127,7 +56,6 @@
    var zl2s = new Array(zlsize);
    for (var i = 0; i < zlsize; i++) zl1s[i] = zl2s[i] = 0.0;
    var cur = 0;

    var recordXYZ = function (vh) {
    lastvh = vh;
    xl = 0.9 * xl + 0.1 * vh.xl;
    @@ -136,6 +64,46 @@
    zl1s[cur] = vh.vl;
    zl2s[cur] = 0.9 * zl2s[(zlsize + cur - 1) % zlsize] + 0.1 * vh.vl;
    };

    // view of direct event acceleration values
    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 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);
    };

    // view of vertical/horizontal elements in acceleration
    var vhview = {
    v: document.getElementById("v"),
    vn: document.getElementById("vn"),
    h: document.getElementById("h"),
    hn: document.getElementById("hn"),
    };
    var showVH = function (vh) {
    vhview.v.value = vhview.vn.value = Math.abs(vh.vl);
    vhview.h.value = vhview.hn.value = abs(vh.h);
    };

    // x-y accel view
    var xyview = document.getElementById("xyview");
    @@ -199,7 +167,49 @@
    c2d.strokeStyle = stroke;
    c2d.stroke();
    };


    // Example Application: Simple Walk Counter
    // (state)
    var vl = 0.0; // noise filtered value
    var count = 0;
    var updown = 0;
    var thresholds = {up: 0.25, down: -0.25};
    // (event handler)
    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;
    }
    };
    // (view)
    var counter = document.getElementById("counter");
    var updateWalking = function () {
    counter.textContent = count;
    };
    var reset = document.getElementById("reset");
    reset.addEventListener("click", function () {
    vl = 0.0;
    count = 0;
    updown = 0;
    }, false);


    // Event Handlers
    // see: http://www.w3.org/TR/orientation-event/
    window.addEventListener("devicemotion", function (ev) {
    try {
    @@ -210,8 +220,8 @@
    document.getElementById("log").textContent = ex.toString();
    }
    }, false);

    requestAnimationFrame(function loop() {
    updateWalking();
    if (lastvh) {
    showAccel(v1, lastvh.a);
    showAccel(v2, lastvh.ag);
  2. bellbind revised this gist Apr 10, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -187,14 +187,14 @@
    var dx = zview.width / zlsize;
    var unit = zview.height / 20, center = zview.height / 2;
    c2d.beginPath();
    c2d.moveTo(x, center + data[start] * unit);
    c2d.moveTo(x, center + data[start] * -unit);
    for (var i = (start + 1) % zlsize; i < zlsize; i++) {
    x += dx;
    c2d.lineTo(x, center + data[i] * unit);
    c2d.lineTo(x, center + data[i] * -unit);
    }
    for (var i = 0; i < start; i++) {
    x += dx;
    c2d.lineTo(x, center + data[i] * unit);
    c2d.lineTo(x, center + data[i] * -unit);
    }
    c2d.strokeStyle = stroke;
    c2d.stroke();
  3. bellbind revised this gist Apr 10, 2015. 2 changed files with 144 additions and 11 deletions.
    16 changes: 16 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -83,6 +83,22 @@ <h1>devicemotion event demo</h1>
    <button id="reset" style="padding: 5px 30px; border-radius: 10px;"
    >reset</button>
    </div>
    <div>
    <canvas id="xyview"
    style="width: 200px; height: 200px; background-color: lightgray"
    width="200" height="200"></canvas>
    <canvas id="zview"
    style="width: 600px; height: 200px; background-color: lightgray"
    width="600" height="200"></canvas>
    </div>
    <div>
    <ul>
    <li><span style="color: red">raw value</span></li>
    <li><span style="color: blue">low-pass filtered value</span></li>
    </ul>
    </div>
    <div id="log"></div>
    <div><a href="https://gist.github.com/bellbind/c885f85a0dd0e4681ee5">
    gist source</a></div>
    </body>
    </html>
    139 changes: 128 additions & 11 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -22,8 +22,24 @@
    absn: document.getElementById("abs2n"),
    };

    // vec math
    var add = function (a, b) {
    return {x: a.x + b.x, y: a.y + b.y, z: a.z + b.z};
    };
    var sub = function (a, b) {
    return {x: a.x - b.x, y: a.y - b.y, z: a.z - b.z};
    };
    var dot = function (a, b) {
    return a.x*b.x + a.y*b.y + a.z*b.z;
    };
    var cross = function (a, b) {
    return {x: a.y*b.z-a.z*b.y, y: a.z*b.x-a.x*b.z, z: a.x*b.y-a.y*b.x};
    };
    var mul = function (r, v) {
    return {x: r * v.x, y: r * v.y, z: r *v.z};
    };
    var abs = function (a) {
    return Math.sqrt(a.x*a.x + a.y*a.y + a.z*a.z);
    return Math.sqrt(dot(a, a));
    };

    var showAccel = function (v, accel) {
    @@ -43,15 +59,24 @@
    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 g = sub(accg, acc);
    var gl = abs(g);
    var ev = {x: g.x / gl, y: g.y / gl, z: g.z / gl}; // unit vector
    var ez = mul(1/gl, g); // 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};
    var vl = dot(acc, ez);
    var v = mul(vl, ez);
    // 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 h = sub(acc, v);
    // orthogonal plane elements(y: top-bottom, x: right->left)
    var ex = cross({x: 0, y: 1, z: 0}, ez);
    var ey = cross(ez, ex);
    var yl = dot(h, ey);
    var xl = dot(h, ex);
    return {
    a: {x: acc.x, y: acc.y, z: acc.z},
    ag: {x: accg.x, y: accg.y, z: accg.z},
    v: v, h: h, ez: ez, vl: vl, ex: ex, ey: ey, xl: xl, yl: yl
    };
    };
    var showVH = function (vh) {
    vhview.v.value = vhview.vn.value = Math.abs(vh.vl);
    @@ -63,7 +88,7 @@
    var vl = 0.0; // noise filtered value
    var count = 0;
    var updown = 0;
    var thresholds = {up: 0.5, down: -0.25};
    var thresholds = {up: 0.25, down: -0.25};
    var walking = function (vh) {
    vl = 0.9 * vl + 0.1 * vh.vl; //low-pass filtering
    switch (updown) {
    @@ -91,17 +116,109 @@
    count = 0;
    updown = 0;
    }, false);


    // record data in devicemotion event, not draw
    var lastvh = null;
    var xl = 0.0;
    var yl = 0.0;
    var zlsize = 300;
    var zl1s = new Array(zlsize);
    var zl2s = new Array(zlsize);
    for (var i = 0; i < zlsize; i++) zl1s[i] = zl2s[i] = 0.0;
    var cur = 0;

    var recordXYZ = function (vh) {
    lastvh = vh;
    xl = 0.9 * xl + 0.1 * vh.xl;
    yl = 0.9 * yl + 0.1 * vh.yl;
    cur = (cur + 1) % zlsize;
    zl1s[cur] = vh.vl;
    zl2s[cur] = 0.9 * zl2s[(zlsize + cur - 1) % zlsize] + 0.1 * vh.vl;
    };

    // x-y accel view
    var xyview = document.getElementById("xyview");
    var drawXY = function (vh) {
    var c2d = xyview.getContext("2d");
    var w = xyview.width, h = xyview.height, unit = w / 20;
    c2d.clearRect(0, 0, w, h);
    c2d.save();
    c2d.beginPath();
    c2d.arc(w/2, h/2, unit * 5, 0, 2*Math.PI);
    c2d.strokeStyle = "black";
    c2d.lineWidth = 3;
    c2d.stroke();
    c2d.restore();
    c2d.save();
    c2d.translate(w/2, h/2);
    c2d.beginPath();
    c2d.moveTo(0, 0);
    c2d.lineTo(vh.xl * -unit, vh.yl * unit);
    c2d.strokeStyle = "red";
    c2d.lineWidth = 3;
    c2d.stroke();
    c2d.beginPath();
    c2d.moveTo(0, 0);
    c2d.lineTo(xl * -unit, yl * unit);
    c2d.strokeStyle = "blue";
    c2d.lineWidth = 3;
    c2d.stroke();
    c2d.restore();
    };
    // z accel view
    var zview = document.getElementById("zview");
    var drawZ = function (vh) {
    var c2d = zview.getContext("2d");
    var w = zview.width, h = zview.height;
    c2d.clearRect(0, 0, w, h);
    c2d.lineWidth = 2;
    c2d.beginPath();
    c2d.moveTo(0, h/2);
    c2d.lineTo(w, h/2);
    c2d.strokeStyle = "black";
    c2d.stroke();
    drawChart(c2d, zl1s, "red");
    drawChart(c2d, zl2s, "blue");
    };
    var drawChart = function (c2d, data, stroke) {
    var start = (cur + 1) % zlsize;
    var x = 0;
    var dx = zview.width / zlsize;
    var unit = zview.height / 20, center = zview.height / 2;
    c2d.beginPath();
    c2d.moveTo(x, center + data[start] * unit);
    for (var i = (start + 1) % zlsize; i < zlsize; i++) {
    x += dx;
    c2d.lineTo(x, center + data[i] * unit);
    }
    for (var i = 0; i < start; i++) {
    x += dx;
    c2d.lineTo(x, center + data[i] * unit);
    }
    c2d.strokeStyle = stroke;
    c2d.stroke();
    };

    // 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);
    recordXYZ(vh);
    } catch (ex) {
    document.getElementById("log").textContent = ex.toString();
    }
    }, false);

    requestAnimationFrame(function loop() {
    if (lastvh) {
    showAccel(v1, lastvh.a);
    showAccel(v2, lastvh.ag);
    showVH(lastvh);
    drawXY(lastvh);
    drawZ(lastvh);
    }
    requestAnimationFrame(loop);
    });
    }, false);
  4. bellbind revised this gist Apr 9, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -87,6 +87,7 @@
    };
    var reset = document.getElementById("reset");
    reset.addEventListener("click", function () {
    vl = 0.0;
    count = 0;
    updown = 0;
    }, false);
  5. bellbind revised this gist Apr 9, 2015. 2 changed files with 15 additions and 4 deletions.
    5 changes: 4 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -78,7 +78,10 @@ <h1>devicemotion event demo</h1>
    </ul>
    </div>
    <div>
    Walk counter: <span id="counter">0</span> steps
    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>
    14 changes: 11 additions & 3 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,7 @@
    v.abs.value = v.absn.value = abs(accel);
    };

    // split vertical/horizontal
    // split vertical/horizontal elements of acceleration
    var vhview = {
    v: document.getElementById("v"),
    vn: document.getElementById("vn"),
    @@ -42,11 +42,14 @@
    };
    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};
    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};
    };
    @@ -55,7 +58,7 @@
    vhview.h.value = vhview.hn.value = abs(vh.h);
    };

    // TBD: Walk Counter
    // Simple Walk Counter
    var counter = document.getElementById("counter");
    var vl = 0.0; // noise filtered value
    var count = 0;
    @@ -82,6 +85,11 @@
    }
    counter.textContent = count;
    };
    var reset = document.getElementById("reset");
    reset.addEventListener("click", function () {
    count = 0;
    updown = 0;
    }, false);

    // see: http://www.w3.org/TR/orientation-event/
    window.addEventListener("devicemotion", function (ev) {
  6. bellbind revised this gist Apr 9, 2015. 1 changed file with 9 additions and 8 deletions.
    17 changes: 9 additions & 8 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -57,27 +57,28 @@

    // TBD: Walk Counter
    var counter = document.getElementById("counter");
    var vl = 0.0; // filtered value
    var updown = 0;
    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 0:
    if (vl < 0) updown = -1;
    if (vl >= 0) updown = +1;
    break;
    case -1:
    if (vl > 0.25) {
    if (vl > thresholds.up) {
    updown = +1;
    count += 1;
    }
    break;
    case +1:
    if (vl < -0.25) {
    if (vl < thresholds.down) {
    updown = -1;
    }
    break;
    default:
    if (vl < 0) updown = -1;
    if (vl >= 0) updown = +1;
    break;
    }
    counter.textContent = count;
    };
  7. bellbind revised this gist Apr 9, 2015. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -57,29 +57,29 @@

    // TBD: Walk Counter
    var counter = document.getElementById("counter");
    var vl = 0.0; // filtered value
    var updown = 0;
    var dcount = 0;
    var count = 0;
    var walking = function (vh) {
    var vl = vh.vl;
    vl = 0.9 * vl + 0.1 * vh.vl; //low-pass filtering
    switch (updown) {
    case 0:
    if (vl < 0) updown = -1;
    if (vl >= 0) updown = +1;
    break;
    case -1:
    if (vl > 0.75) {
    if (vl > 0.25) {
    updown = +1;
    dcount += 1;
    count += 1;
    }
    break;
    case +1:
    if (vl < -0.75) {
    if (vl < -0.25) {
    updown = -1;
    dcount += 1;
    }
    break;
    }
    counter.textContent = 0|(dcount / 2);
    counter.textContent = count;
    };

    // see: http://www.w3.org/TR/orientation-event/
  8. bellbind revised this gist Apr 8, 2015. 2 changed files with 47 additions and 8 deletions.
    16 changes: 15 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -63,8 +63,22 @@ <h1>devicemotion event demo</h1>
    </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>
    counter: <span id="counter">0</span>
    Walk counter: <span id="counter">0</span> steps
    </div>
    <div id="log"></div>
    </body>
    39 changes: 32 additions & 7 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -33,24 +33,47 @@
    v.abs.value = v.absn.value = abs(accel);
    };

    // split vertical/horizontal
    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;
    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};
    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};
    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);
    };

    // TBD: Walk Counter
    var counter = document.getElementById("counter");
    var updown = 0;
    var dcount = 0;
    var walking = function (accel) {
    var a = abs(accel);
    var walking = function (vh) {
    var vl = vh.vl;
    switch (updown) {
    case 0:
    if (a < 0.5) updown = -1;
    if (a > 1.0) updown = +1;
    if (vl < 0) updown = -1;
    if (vl >= 0) updown = +1;
    break;
    case -1:
    if (a > 1.0) {
    if (vl > 0.75) {
    updown = +1;
    dcount += 1;
    }
    break;
    case +1:
    if (a < 0.5) {
    if (vl < -0.75) {
    updown = -1;
    dcount += 1;
    }
    @@ -64,7 +87,9 @@
    try {
    showAccel(v1, ev.acceleration);
    showAccel(v2, ev.accelerationIncludingGravity);
    walking(ev.acceleration);
    var vh = splitVH(ev);
    showVH(vh);
    walking(vh);
    } catch (ex) {
    document.getElementById("log").textContent = ex.toString();
    }
  9. bellbind revised this gist Apr 8, 2015. 2 changed files with 35 additions and 2 deletions.
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -63,6 +63,9 @@ <h1>devicemotion event demo</h1>
    </li>
    </ul>
    </div>
    <div>
    counter: <span id="counter">0</span>
    </div>
    <div id="log"></div>
    </body>
    </html>
    34 changes: 32 additions & 2 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -21,20 +21,50 @@
    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 = Math.sqrt(
    accel.x*accel.x + accel.y*accel.y + accel.z*accel.z);
    v.abs.value = v.absn.value = abs(accel);
    };

    var counter = document.getElementById("counter");
    var updown = 0;
    var dcount = 0;
    var walking = function (accel) {
    var a = abs(accel);
    switch (updown) {
    case 0:
    if (a < 0.5) updown = -1;
    if (a > 1.0) updown = +1;
    break;
    case -1:
    if (a > 1.0) {
    updown = +1;
    dcount += 1;
    }
    break;
    case +1:
    if (a < 0.5) {
    updown = -1;
    dcount += 1;
    }
    break;
    }
    counter.textContent = 0|(dcount / 2);
    };

    // see: http://www.w3.org/TR/orientation-event/
    window.addEventListener("devicemotion", function (ev) {
    try {
    showAccel(v1, ev.acceleration);
    showAccel(v2, ev.accelerationIncludingGravity);
    walking(ev.acceleration);
    } catch (ex) {
    document.getElementById("log").textContent = ex.toString();
    }
  10. bellbind revised this gist Apr 8, 2015. 2 changed files with 16 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -32,6 +32,11 @@ <h1>devicemotion event demo</h1>
    <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>
    @@ -51,6 +56,11 @@ <h1>devicemotion event demo</h1>
    <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 id="log"></div>
    6 changes: 6 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,23 +5,29 @@
    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 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 = Math.sqrt(
    accel.x*accel.x + accel.y*accel.y + accel.z*accel.z);
    };

    // see: http://www.w3.org/TR/orientation-event/
  11. bellbind revised this gist Apr 8, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@
    <body>
    <h1>devicemotion event demo</h1>
    <p>
    Unit of value is m/s(g = +9.8).
    Unit of value is m/s^2(g = +9.8).
    The device orientation is not effect axes and values.
    </p>
    <p>
  12. bellbind created this gist Apr 8, 2015.
    58 changes: 58 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <!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(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>
    </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>
    </ul>
    </div>
    <div id="log"></div>
    </body>
    </html>
    36 changes: 36 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    ;window.addEventListener("load", function () {
    "use strict";

    var v1 = {
    x: document.getElementById("x1"),
    y: document.getElementById("y1"),
    z: document.getElementById("z1"),
    xn: document.getElementById("x1n"),
    yn: document.getElementById("y1n"),
    zn: document.getElementById("z1n"),
    };
    var v2 = {
    x: document.getElementById("x2"),
    y: document.getElementById("y2"),
    z: document.getElementById("z2"),
    xn: document.getElementById("x2n"),
    yn: document.getElementById("y2n"),
    zn: document.getElementById("z2n"),
    };

    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;
    };

    // see: http://www.w3.org/TR/orientation-event/
    window.addEventListener("devicemotion", function (ev) {
    try {
    showAccel(v1, ev.acceleration);
    showAccel(v2, ev.accelerationIncludingGravity);
    } catch (ex) {
    document.getElementById("log").textContent = ex.toString();
    }
    }, false);
    }, false);