Untitled

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    
    <script src="file:///android_asset/app.js"></script>
    <script src="file:///android_asset/Libs/JQuery.js"></script>
    <script src="file:///android_asset/Libs/Flot.js"></script>
</head>

<script>
    var sampleCount = 100;
    var updateInterval = 10;
    var sensorData = null;
    var plot;

    function OnStart() {
        app.SetOrientation("Landscape", DrawPage);
        sns = app.CreateSensor("Accelerometer", "Fast");
        sns.Start();

        var lay = app.CreateLayout("linear", "VCenter,FillXY");
        var btn = app.CreateButton("Connect", 0.4, 0.15);
        btn.SetOnTouch(btn_OnTouch);
        lay.AddChild(btn);
        app.AddLayout(lay);

        var bt = app.CreateBluetoothSerial();
        bt.SetOnConnect(bt_OnConnect);
        bt.SetOnReceive(bt_OnReceive);
        bt.SetSplitMode("End", "\n");
    }

    function DrawPage() {
        var options = {
            grid: { color: "#656565", borderWidth: 1 },
            series: { shadowSize: 0 },
            yaxis: { min: -20, max: 20 },
            xaxis: { max: 0, min: -sampleCount, show: false }
        };

        plot = $.plot("#placeholder", [], options);
        Update();
    }

    function Update() {
        var vals = sns.GetValues();
        var series = GetSeries(sampleCount, [vals[1], vals[2], vals[3]]);
        plot.setData(series);
        plot.draw();
        setTimeout(Update, updateInterval);
    }

    function GetSeries(points, funcs) {
        if (typeof flt_dataStore == "undefined") flt_dataStore = new Array(funcs.length);

        var series = [];
        for (var i = 0; i < funcs.length; i++) {
            if (!flt_dataStore[i]) flt_dataStore[i] = [];

            if (flt_dataStore[i].length > sampleCount)
                flt_dataStore[i] = flt_dataStore[i].slice(1);

            var val = funcs[i];
            flt_dataStore[i].push(val);

            var res = [];
            var len = flt_dataStore[i].length;
            for (var j = 0; j < len; j++)
                res.push([j - len, flt_dataStore[i][j]]);

            series[i] = res;
        }
        return series;
    }

    function btn_OnTouch() {
        bt.Connect("ESP32Test");
    }

    function bt_OnConnect(ok) {
        if (ok) bt.Write("digitalWrite(LED1,1)\n");
        else app.ShowPopup("Failed to connect!");
    }

    function bt_OnReceive(data) {
        // Assuming received data is a single numeric value.
        var receivedValue = parseFloat(data);
        if (!isNaN(receivedValue)) {
            // Update the graph with the received value.
            var series = GetSeries(sampleCount, [receivedValue, 0, 0]);
            plot.setData(series);
            plot.draw();
        }
    }
</script>

<style>
    body {
        font: 1.5em Helvetica, Arial, sans-serif;
        vertical-align: middle;
        background: #383838;
    }

    .plot-container {
        box-sizing: border-box;
        width: 90%;
        height: 90%;
        padding: 1% 1% 1% 1%;
        margin: 2% auto 2% auto;
        border: 1px solid #444444;
        border-radius: 6px;
        background: #101010;
    }

    .plot-placeholder {
        width: 100%;
        height: 100%;
        font-size: 14;
        line-height: 1.2em;
    }

    .flot-tick-label {
        color: #777777;
    }
</style>

<body onload="app.Start()">
    <div id="content">
        <div class="plot-container">
            <div id="placeholder" class="plot-placeholder"></div>
        </div>
    </div>
</body>

</html>
Editor is loading...