Demo TimingObject¶

This demonstrates control and rendering of the Timing Object.

Control position, velocity or acceleration by clicking the buttons. P+1 means to increment the position. V=0 is to set the velocity to zero
Position may also be controlled by clicking the progress timeline.

Demo

State

Position:

Velocity:

Acceleration:

Range:

Controls

Position:

Velocity:

Acceleration:

demofile

Code¶

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">
            .ctrl-label {
                display:inline-block;
                width:100px;
            }
            .ctrl-btn button {
                width:50px;
            }
            .progress {
                width: 100%; /* Full-width */
                appearance: none;
                border-radius: 5px;
                height: 5px;
                background: #d3d3d3; /* Grey background */
                outline: none;
            }
        </style>

        <script type="module">
            
            import {
                TimingObject, 
                TimingSampler, 
                TimingProgress
            } from "https://webtiming.github.io/timingsrc/lib/timingsrc-esm-v3.js";

            /*
                Create TimingObject
            */
            const to = new TimingObject({range:[0,10]});

            /*
                Visualize Timing Object Position

                Either use timeupdate event for fixed frequency
                sampling, or create sampler at custom frequency.
            */
            const pos_elem = document.getElementById("position");
            const vel_elem = document.getElementById("velocity");
            const acc_elem = document.getElementById("acceleration");
            const rng_elem = document.getElementById("range");

            // refresh position every 100 ms
            const sampler = new TimingSampler(to, {period:100});
            sampler.on("change", function () {
                let vector = to.query();
                let rng = to.range;
                pos_elem.innerHTML = `${vector.position.toFixed(2)}`;
                vel_elem.innerHTML = `${vector.velocity.toFixed(2)}`;
                acc_elem.innerHTML = `${vector.acceleration.toFixed(2)}`;
                rng_elem.innerText = `[${rng}]`;
            });

            // progress
            const progress_elem = document.getElementById("progress");
            const progress = new TimingProgress(to, 
                                                progress_elem,              {sampler:sampler});

            /*
                Connect buttons        
            */
            document.getElementById("p-").onclick = function () {
                to.update({position:to.pos-1});
            };
            document.getElementById("p").onclick = function () {
                to.update({position:0});
            };
            document.getElementById("p+").onclick = function () {
                to.update({position:to.pos+1});
            };

            document.getElementById("v-").onclick = function () {
                to.update({velocity:to.vel-1});
            };
            document.getElementById("v").onclick = function () {
                to.update({velocity:0});
            };
            document.getElementById("v+").onclick = function () {
                to.update({velocity:to.vel+1});
            };
            document.getElementById("a-").onclick = function () {
                to.update({acceleration:to.acc-1});
            };
            document.getElementById("a").onclick = function () {
                to.update({acceleration:0});
            };
            document.getElementById("a+").onclick = function () {
                to.update({acceleration:to.acc+1});
            };

        </script>
    </head>
    <body>
        <p>
            <div style="font-weight:bold;">State</div>
            <div>
                Position: <span id="position" style="color:red;"></span>
            </div>
            <div>
                Velocity: <span id="velocity"></span>
            </div>
            <div>
                Acceleration: <span id="acceleration"></span>
            </div>
            <div>
                Range: <span id="range"></span>
            </div>
        </p>
        <p>
            <input type="range" min="0" max="100" value="0" id="progress" class="progress">
        </p>
        <p >
            <div style="font-weight:bold;">Controls</div>
            <div class="ctrl-btn">
                <span class="ctrl-label">Position:</span>
                <button id="p-">P-1</button>    
                <button id="p">P=0</button>    
                <button id="p+">P+1</button>
            </div>
            <div class="ctrl-btn">
                <span class="ctrl-label">Velocity:</span>
                <button  id="v-">V-1</button>    
                <button id="v">V=0</button>    
                <button id="v+">V+1</button>
            </div>
            <div class="ctrl-btn">
                <span class="ctrl-label">Acceleration:</span>
                <button id="a-">A-1</button>    
                <button id="a">A=0</button>    
                <button id="a+">A+1</button>
            </div>
        </p>
    </body>
</html>