Question

我无法搞清楚这一点。我有一个index.html，可以从iPhone中提取加速度计和陀螺仪数据，并在iPhone移动并改变方向时显示屏幕上不断变化的原始数据。我的麻烦在于，我正在试图弄清楚如何在另一个网页上显示这些不断变化的数据，供其他人在我移动iPhone时观察。我很难过，一直在寻找，不知道该怎么做。我正在使用的index.html的代码是：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
    #no {
        display: none;
    }

    @media screen {
        html, body, div, span {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
        }

        body {
            height: auto;
            -webkit-text-size-adjust: none;
            font-family: Helvetica, Arial, Verdana, sans-serif;
            padding: 0px;
            overflow-x: hidden;
        }

        .outer {
            background: rgba(123, 256, 245, 0.9);
            padding: 0px;
            min-height: 48px;
        }

        .box {
            position: relative;
            float: left;
            width: 45%;
            padding: 7px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            background: rgba(178,215,255,0.75);
            min-height: 160px;
        }

        .box2 {
            position: relative;
            float: left;
            width: 45%;
            padding: 7px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            background: rgba(178,215,255,0.75);
        }

        .box span {
            display: block;
        }

        span.head {
            font-weight: bold;
        }
    }
</style>
</head>

<body>
    <div id="yes">
    <div class="box" id="accel">
        <span class="head">Accelerometer</span>
        <span id="xlabel"></span>
        <span id="ylabel"></span>
        <span id="zlabel"></span>
        <span id="ilabel"></span>
        <span id="arAlphaLabel"></span>
        <span id="arBetaLabel"></span>
        <span id="arGammaLabel"></span>
    </div>

    <div class="box" id="gyro">
        <span class="head">Gyroscope</span>
        <span id="alphalabel"></span>
        <span id="betalabel"></span>
        <span id="gammalabel"></span>
    </div>

</div>
<div id="no">
    Your browser does not support Device Orientation and Motion API.
</div>

<script>

        // Position Variables
        var x = 0;
        var y = 0;
        var z = 0;

        // Speed - Velocity
        var vx = 0;
        var vy = 0;
        var vz = 0;

        // Acceleration
        var ax = 0;
        var ay = 0;
        var az = 0;
        var ai = 0;
        var arAlpha = 0;
        var arBeta = 0;
        var arGamma = 0;

        var delay = 100;
        var vMultiplier = 0.01;         var alpha = 0;

        var alpha = 0;
        var beta = 0;
        var gamma = 0;


        if (window.DeviceMotionEvent==undefined) {
            document.getElementById("no").style.display="block";
            document.getElementById("yes").style.display="none";
        }
        else {
            window.ondevicemotion = function(event) {
                ax =      Math.round(Math.abs(event.accelerationIncludingGravity.x * 1));
                ay =      Math.round(Math.abs(event.accelerationIncludingGravity.y * 1));
                az = Math.round(Math.abs(event.accelerationIncludingGravity.z * 1));
                ai = Math.round(event.interval * 100) / 100;
                rR = event.rotationRate;
                if (rR != null) {
                    arAlpha = Math.round(rR.alpha);
                    arBeta = Math.round(rR.beta);
                        arGamma = Math.round(rR.gamma);
                }

/*
                    ax = Math.abs(event.acceleration.x * 1000);
                ay = Math.abs(event.acceleration.y * 1000);
                az = Math.abs(event.acceleration.z * 1000);
*/
            }

            window.ondeviceorientation = function(event) {
                alpha = Math.round(event.alpha);
                beta = Math.round(event.beta);
                gamma = Math.round(event.gamma);
            }

            function d2h(d) {return d.toString(16);}
            function h2d(h) {return parseInt(h,16);}



            setInterval(function() {
                document.getElementById("xlabel").innerHTML = "X: " + ax;
                document.getElementById("ylabel").innerHTML = "Y: " + ay;
                document.getElementById("zlabel").innerHTML = "Z: " + az;
                document.getElementById("ilabel").innerHTML = "I: " + ai;
                document.getElementById("arAlphaLabel").innerHTML = "arA: " + arAlpha;
                document.getElementById("arBetaLabel").innerHTML = "arB: " + arBeta;
                document.getElementById("arGammaLabel").innerHTML = "arG: " + arGamma;
                document.getElementById("alphalabel").innerHTML = "Alpha: " + alpha;
                document.getElementById("betalabel").innerHTML = "Beta: " + beta;
                document.getElementById("gammalabel").innerHTML = "Gamma: " + gamma;



            }, delay);
        }
</script>

将加载到iPhone上的HTML页面模仿到可以加载到桌面Web浏览器上的另一个HTML页面

0 个答案: