Timingsrc

https://github.com/webtiming/timingsrc
Admin
Timingsrc is a library providing timing objects and sequencing tools for synchronized, timed...
Tokens:89,250
Snippets:536
Trust Score:4.7
License:LGPL-3.0
Update:8 months ago
Show doc for...
Tokens:
Raw
### Initialize and Configure Timingsrc Components

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/sequencing/bug.html

Initializes TimingObject instances, a SkewConverter, a Dataset, and a Sequencer. It sets up a loop converter for the timing object and defines a function to load cues into the dataset. This forms the core setup for the timing and sequencing logic.

```javascript
var app = MCorp.app("6103795620225218883");

import * as TIMINGSRC from '../../index.js';

// set up local timing objects and sequencer
let base_to = new TIMINGSRC.TimingObject();
let loop_to;
let to = new TIMINGSRC.TimingObject();
let prefetch_to = new TIMINGSRC.SkewConverter(to, 1.1);

// set up dataset and sequencer
let ds = new TIMINGSRC.Dataset();
let seq = new TIMINGSRC.Sequencer(ds, to, prefetch_to);

// load cues
let num_cues = 0;
function load_cues() {
  let i;
  for (i=0; i<10; i++) {
    ds.addCue("q" + i, [i, i+1], {"item": i});
  }
  num_cues = i;
}

// Add some test data into the dataset
let load = function() {
  console.log("LOAD CUES")
  load_cues();
  // switch to to loop
  loop_to = new TIMINGSRC.LoopConverter(base_to, [0, num_cues-1]);
  console.log("SWITCH TO LOOP")
  to.timingsrc = loop_to;
}

// delayed load
setTimeout(load, 1000);
```

--------------------------------

### Initialize Timing Object with Provider (JavaScript)

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/online_timingobject.md

Initializes a Timing Object and connects it to an online timing provider, enabling multi-device synchronization. This requires a 'timingProvider' argument.

```javascript
var run = function (timingProvider) {
    // timing object
    var to = new TIMINGSRC.TimingObject({provider:timingProvider});
    ...
};
```

--------------------------------

### Load and Add Timed Data to Sequencer

Source: https://github.com/webtiming/timingsrc/blob/master/docs/examples/windowsequencer.html

This code defines a dataset of timed events and then iterates through it to add each event to the Sequencer. Each event is defined with a start and end time, and the Sequencer uses these intervals to track active data.

```javascript
// Timed Data var data = { a: {data: 'A', start: 0, end: 1 }, b: {data: 'B', start: 2, end: 3 }, c: {data: 'C', start: 4, end: 5 }, d: {data: 'D', start: 6, end: 7 }, e: {data: 'E', start: 8, end: 9 }, f: {data: 'F', start: 10, end: 11 }, g: {data: 'G', start: 12, end: 13 }, h: {data: 'H', start: 14, end: 15 }, i: {data: 'I', start: 16, end: 17 }, j: {data: 'J', start: 18, end: 19 }, k: {data: 'K', start: 20, end: 21 }, l: {data: 'L', start: 22, end: 23 }, m: {data: 'M', start: 24, end: 25 }, n: {data: 'N', start: 26, end: 27 }, o: {data: 'O', start: 28, end: 29 }, p: {data: 'P', start: 30, end: 31 }, q: {data: 'Q', start: 32, end: 33 }, r: {data: 'R', start: 34, end: 35 }, s: {data: 'S', start: 36, end: 37 }, t: {data: 'T', start: 38, end: 39 }, u: {data: 'U', start: 40, end: 41 }, v: {data: 'V', start: 42, end: 43 }, w: {data: 'W', start: 44, end: 45 }, x: {data: 'X', start: 46, end: 47 }, y: {data: 'Y', start: 48, end: 49 }, z: {data: 'Z', start: 50, end: 51 } }; // load timed data into sequencer Object.keys(data).forEach(function (key) { s.addCue(key, new Interval(data[key].start, data[key].end)); });
```

--------------------------------

### Initialize Timing Object (JavaScript)

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/online_timingobject.md

Initializes a basic Timing Object with a specified range. This is the foundational step before integrating with a provider.

```javascript
var run = function () {
    // timing object
    var to = new TIMINGSRC.TimingObject({range:[0,100]});
    ...
};
```

--------------------------------

### Initialize and Control Sequencer with TIMINGSRC.js

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/online_sequencer.md

Initializes a TIMINGSRC.TimingObject and a TIMINGSRC.Sequencer. It loads cue data with intervals and registers event handlers for 'change' and 'remove' events to update element styling.

```javascript
var to = new TIMINGSRC.TimingObject({provider:timingProvider});

var s = new TIMINGSRC.Sequencer(to);

var r = s.request();
Object.keys(data).forEach(function (key) {
	r.addCue(key, new TIMINGSRC.Interval(data[key].start, data[key].end));
});
r.submit();

s.on("change", function (e) {
  var el =  document.getElementById(e.key);
  el.classList.add("active");
});
s.on("remove", function (e) {
  var el = document.getElementById(e.key);
  el.classList.remove("active");
});
```

--------------------------------

### Initialize and Sync Video Players (JavaScript)

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/online_mediasync.md

This JavaScript code initializes a TIMINGSRC TimingObject and then uses MCorp.mediaSync to synchronize two video elements. The timing provider is shared globally, allowing for multi-device synchronization.

```javascript
// timing object
var to = new TIMINGSRC.TimingObject({provider:timingProvider});

// set up video sync
var sync1 = MCorp.mediaSync(document.getElementById('player1'), to);

// set up video sync
var sync2 = MCorp.mediaSync(document.getElementById('player2'), to);
```

--------------------------------

### Setup TimingObject and Event Listeners (JavaScript)

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/timingobject/test_converter_loop.html

Initializes a TimingObject, sets up event listeners for 'change' and 'timeupdate', and binds UI element interactions to control playback (play, pause, reset, back) and range updates. It also sets up a LoopConverter.

```javascript
import * as timingsrc from '../../index.js';
var to, c;

function setup_timingobject(key, name, to) {
  // timing object
  to._name = name;
  to.on("change", function(vector, eInfo) {
    const to = eInfo.src;
    console.log(`onchange ${to._name}`, vector);
  });

  const pos_elem = document.getElementById(`pos_${key}`);
  to.on("timeupdate", function () {
    pos_elem.innerHTML = to.query().position.toFixed(2);
  });

  document.getElementById(`play_${key}`).onclick = function () {
    to.update({velocity:1.0});
  };
  document.getElementById(`pause_${key}`).onclick = function () {
    to.update({velocity:0.0});
  };
  document.getElementById(`reset_${key}`).onclick = function () {
    to.update({position: 0.0, velocity:0.0});
  };
  document.getElementById(`back_${key}`).onclick = function () {
    to.update({velocity:-1.0});
  };

  // range
  document.getElementById(`range_a_${key}`).onclick = function () {
    to.update({range:[0,10]});
  };
  document.getElementById(`range_b_${key}`).onclick = function () {
    to.update({range:[5,15]});
  };

  const range_elem = document.getElementById(`range_${key}`);
  to.on("rangechange", function(range) {
    let [low, high] = range;
    range_elem.innerHTML = `[${low},${high}]`;
  });
};

function run() {
  to = new timingsrc.TimingObject({range:[-10,10]});
  setup_timingobject(0, "source", to);
  c = new timingsrc.LoopConverter(to, [2,5]);
  setup_timingobject(1, "converter", c);
};

run();
```

--------------------------------

### Initialize and Run Timingsrc Sequencer

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/sequencing/test_sequencer_pointmode_update.html

Initializes the Dataset, TimingObject, and Sequencer from the timingsrc library. It then sets up event listeners for various UI elements to control and update the timing object and dataset, finally running the main application logic.

```javascript
import * as timingsrc from '../../index.js';
const Interval = timingsrc.Interval;

function make_random_floats (size, options) {
  options = options || {};
  let scale = options['scale'] || 1;
  let offset = options['offset'] || 0;
  return Array.from({length: size}, () => Math.random() * scale + offset);
};

function update(ds, N, position) {
  // update dataset with N random cues relevant for position
  console.log(N);
  let width = 10;
  let spread = 5;
  let starts = make_random_floats(N, {offset: position - width, scale:spread});
  let ends = make_random_floats(N, {offset: position + width, scale:spread});
  let cues = [];
  for (let i=0; i<N; i++) {
    cues.push({ key: `${i}-${position}`, interval: new Interval(starts[i], ends[i]), data: `data-${i}` });
  }
  ds.update(cues);
};

function run() {
  // position controls
  document.getElementById('a').onclick = function () {
    to.update({position: -1.0});
  };
  document.getElementById('b').onclick = function () {
    to.update({position: 0});
  };
  document.getElementById('c').onclick = function () {
    to.update({position: 1.0});
  };
  document.getElementById('d').onclick = function () {
    let pos = to.query().position;
    to.update({position: pos + 1.0});
  };
  document.getElementById('e').onclick = function () {
    let pos = to.query().position;
    to.update({position: pos - 1.0});
  };

  // velocity controls
  document.getElementById('f').onclick = function () {
    to.update({velocity: -1.0});
  };
  document.getElementById('g').onclick = function () {
    to.update({velocity: 0});
  };
  document.getElementById('h').onclick = function () {
    to.update({velocity: 1.0});
  };
  document.getElementById('i').onclick = function () {
    let vel = to.query().velocity;
    to.update({velocity: vel + 1.0});
  };
  document.getElementById('j').onclick = function () {
    let vel = to.query().velocity;
    to.update({velocity: vel - 1.0});
  };

  // acceleration controls
  document.getElementById('k').onclick = function () {
    to.update({acceleration: -1.0});
  };
  document.getElementById('l').onclick = function () {
    to.update({acceleration: 0.0});
  };
  document.getElementById('m').onclick = function () {
    to.update({acceleration: 1.0});
  };
  document.getElementById('n').onclick = function () {
    let acc = to.query().acceleration;
    to.update({acceleration: acc + 1.0});
  };
  document.getElementById('o').onclick = function () {
    let acc = to.query().acceleration;
    to.update({acceleration: acc - 1.0});
  };

  // update
  document.getElementById('p').onclick = function () {
    update(ds, 1, 0);
  };
  document.getElementById('q').onclick = function () {
    update(ds, 10, 0);
  };
  document.getElementById('r').onclick = function () {
    update(ds, 100, 0);
  };
  document.getElementById('s').onclick = function () {
    update(ds, 1000, 0);
  };
  document.getElementById('t').onclick = function () {
    update(ds, 10000, 0);
  };
  document.getElementById('u').onclick = function () {
    update(ds, 100000, 0);
  };

  document.getElementById('p1').onclick = function () {
    update(ds, 1, 100);
  };
  document.getElementById('q1').onclick = function () {
    update(ds, 10, 100);
  };
  document.getElementById('r1').onclick = function () {
    update(ds, 100, 100);
  };
  document.getElementById('s1').onclick = function () {
    update(ds, 1000, 100);
  };
  document.getElementById('t1').onclick = function () {
    update(ds, 10000, 100);
  };
  document.getElementById('u1').onclick = function () {
    update(ds, 100000, 100);
  };

  let value = document.getElementById("value");
  to.on("timeupdate", function () {
    let v = to.query();
    let pos = v.position.toFixed(2)
    let vel = v.velocity.toFixed(2)
    let acc = v.acceleration.toFixed(2)
    value.innerHTML = `P:${pos} V:${vel} A:${acc}`;
  });

  // add change handler
  s.on("batch", function(events) {
    console.log("sequencer change", events.length);
  });
};

// initialise
const ds = new timingsrc.Dataset();
const to = new timingsrc.TimingObject({range:[0,15]});
const s = new timingsrc.Sequencer(ds, to);

// run
run();
```

--------------------------------

### Integrate with Application Ready State

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/sequencing/bug.html

Waits for the application to be ready and then updates the base timing object's position and velocity. This demonstrates integrating Timingsrc with an external application's lifecycle.

```javascript
// app
app.ready.then(() => {
  console.log("SWITCH TO EPOCH");
  //base_to.timingsrc = app.motions.epoc
  base_to.update({position:6, velocity:0.04});
});
```

--------------------------------

### Initialize and Control TimingObject with UI Events (JavaScript)

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/timingobject/test_positioncallback.html

Initializes a TimingObject and attaches event listeners to UI buttons (play, pause, reset, back) to control its playback and state. It also updates a text element with the current position.

```javascript
import {TimingObject} from '../../index.js';
import PositionCallback from '../../timingobject/positioncallback.js';

// timing object
const to = new TimingObject({range:[0,20]});

// Hook up buttons UI
document.getElementById('play').onclick = function () {
  to.update({velocity:1.0});
};
document.getElementById('pause').onclick = function () {
  to.update({velocity:0.0});
};
document.getElementById('reset').onclick = function () {
  to.update({position: 0.0, velocity:0.0});
};
document.getElementById('back').onclick = function () {
  to.update({velocity:-1.0});
};

// Hook up text UI
var value = document.getElementById('value');
to.on("timeupdate", function () {
  value.innerHTML = to.pos.toFixed(2);
});
```

--------------------------------

### Initialize MediaSync for Video Players

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/exp_mediasync.md

This JavaScript code initializes the MediaSync library for two video elements. It creates a TIMINGSRC.TimingObject to manage the timing and then applies MediaSync to each video player, linking them to the timing object for synchronized playback.

```javascript
// timing object
var to = new TIMINGSRC.TimingObject({range:[0,100]});

// set up video sync
var sync1 = MCorp.mediaSync(document.getElementById('player1'), to);

// set up video sync
var sync2 = MCorp.mediaSync(document.getElementById('player2'), to);
```

--------------------------------

### Initialize and Control Timingsrc with JavaScript

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/timingobject/test_timingsrc_undefined.html

This snippet initializes a TimingObject and connects it to a motion object. It sets up event listeners for UI controls to play, pause, reset, and seek media. It also logs the current position and handles connecting/disconnecting the timingsrc.

```javascript
let app, motion, to;
import {TimingObject} from "https://webtiming.github.io/timingsrc/lib/timingsrc-esm-v3.js";

function run() {
    console.log("document ready");
    // Hook up buttons
    document.getElementById('srcplay').onclick = function () {
        to.update({velocity: 1.0});
    };
    document.getElementById('srcpause').onclick = function () {
        to.update({velocity: 0.0});
    };
    document.getElementById('srcreset').onclick = function () {
        to.update({position: 0.0, velocity: 0.0});
    };
    document.getElementById('srcback').onclick = function () {
        to.update({velocity: -1.0});
    };

    // Hook up text UI
    let srcvalue = document.getElementById('srcvalue');
    to.on("timeupdate", function () {
        srcvalue.innerHTML = to.query().position.toFixed(2);
    });

    // connect - disconnect - to test undefined as assignment
    document.getElementById('connect').onclick = function () {
        to.timingsrc = motion;
    }
    document.getElementById('disconnect').onclick = function () {
        to.timingsrc = undefined;
    }
    window.to = to;
};

// app
app = MCorp.app("8456579076771837888", {anon: true});
app.ready.then(function () {
    console.log("motion ready");
    motion = app.motions.shared;
    to.timingsrc = motion;
});

to = new TimingObject(); // timing object
to.on("change", function (eArg, eInfo) {
    console.log("onchange", eArg);
});
to.ready.then(function () {
    console.log("to ready");
});

run();
```

--------------------------------

### Initialize and Run Sequencer with Dataset

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/sequencing/test_sequencer_subset.html

This snippet demonstrates the initialization of a Dataset, a Subset with a key filter, and a Sequencer. It then updates the dataset with cues and runs the sequencer. Dependencies include the 'timingsrc' library. It takes cue data as input and outputs sequenced timing objects.

```javascript
const ds = new timingsrc.Dataset();
let options = {
  key_filter: function keep_odd_keys(key) {
    return key%2 == 1;
  }
}
const dv = new Subset(ds, options);
ds.update(get_cues());
const to = new timingsrc.TimingObject({range:[0,15]});
const s = new timingsrc.Sequencer(dv, to);

run();
```

--------------------------------

### Install Terser and Rollup-Plugin-Terser Manually

Source: https://github.com/webtiming/timingsrc/blob/master/README.md

Installs the Terser script minifier and the Rollup-Terser plugin manually. This is an alternative to installing all dependencies from `package.json`.

```bash
sudo npm install --global rollup
npm install terser
npm install rollup-plugin-terser
```

--------------------------------

### Initialize and Update Dataset in JavaScript

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/sequencing/debug_windowsequencer.html

Demonstrates how to create a Dataset instance and populate it with cue data. The `get_cues` function generates sample cue objects, each with a key, interval, and data. The `Dataset.update` method is used to add these cues to the dataset.

```javascript
import * as timingsrc from "https://webtiming.github.io/timingsrc/lib/timingsrc-esm-v3.js";

function get_cues() {
  let cues = [];
  for (let i = 0; i < 100; i += 2) {
    let key = `key-${i}`;
    let itv = [i, i + 1, true, false];
    let data = "data";
    cues.push({ key, interval: itv, data });
  }
  return cues;
}

const ds = new timingsrc.Dataset();
ds.update(get_cues());
```

--------------------------------

### Install Node.js 14.x and NPM on Ubuntu

Source: https://github.com/webtiming/timingsrc/blob/master/README.md

Installs Node.js version 14.x and its package manager, NPM, on an Ubuntu system using the NodeSource repository. It also includes instructions for installing development tools and the Yarn package manager.

```bash
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
# script output
# Run `sudo apt-get install -y nodejs` to install Node.js 14.x and npm
# You may also need development tools to build native addons:
#     sudo apt-get install gcc g++ make
# To install the Yarn package manager, run:
#     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
#     echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
#     sudo apt-get update && sudo apt-get install yarn


# install both node and npm
sudo apt-get install -y nodejs
```

--------------------------------

### Initialize and Run Webtiming Application (JavaScript)

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/sequencing/test_schedule.html

Initializes the Webtiming Dataset and Schedule, populates it with cue data, and sets up event listeners for UI interactions and time updates. This function configures the timing object, schedule, and hooks up button clicks and text updates.

```javascript
function run(){
  const ds = new timingsrc.Dataset();
  // fill ds with some cues
  let cues = [];
  for (let i=0; i<100; i++) {
    let j0 = i;
    let j1 = i + 1;
    cues.push({key: i, interval: new Interval(j0, j1)});
  }
  for (let i=0; i<100; i++) {
    let j0 = i + 0.5;
    let j1 = j0 + 1;
    cues.push({key: 1000 + i, interval: new Interval(j0, j1)});
  }
  ds.update(cues);
  to = new timingsrc.TimingObject();
  s = new Schedule(ds, to);
  s.add_callback(function(now, endpointEvents) {
    print_endpoints(now, endpointEvents);
  });
  to.on("change", function() {
    s.setVector(to.vector);
  });
  // Hook up buttons
  UI document.getElementById('play').onclick = function () {
    to.update({velocity:1.0});
  };
  document.getElementById('pause').onclick = function () {
    to.update({velocity:0.0});
  };
  document.getElementById('reset').onclick = function () {
    to.update({position: 0.0, velocity: 0.0});
  };
  document.getElementById('back').onclick = function () {
    to.update({velocity: -1.0});
  };
  // Hook up text UI
  var value = document.getElementById('value');
  to.on("timeupdate", function () {
    value.innerHTML = to.query().position.toFixed(2);
  });
}

if (document.readyState === "complete") run();
else window.onload = run;
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/webtiming/timingsrc/blob/master/README.md

Installs all project dependencies defined in the `package.json` file. This command should be run from the root directory of the project.

```bash
cd ~/timingsrc
npm install
```

--------------------------------

### Initialize and Control Timing Objects with TIMINGSRC

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/online_windowsequencer.md

Initializes a TimingObject, creates skewed versions using SkewConverter, and sets up a Sequencer to manage intervals. It also handles 'change' and 'remove' events to update the UI, indicating active or inactive timed elements.

```javascript
// Timing Object
var to = new TIMINGSRC.TimingObject({provider:timingProvider});
var toA = new TIMINGSRC.SkewConverter(to, -5.0);
var toB = new TIMINGSRC.SkewConverter(to, 4.0);

// Sequencer
var s = new TIMINGSRC.Sequencer(toA, toB);

// Load Data
var r = s.request();
Object.keys(data).forEach(function (key) {
	r.addCue(key, new TIMINGSRC.Interval(data[key].start, data[key].end));
});
r.submit();

// Register Handlers
s.on("change", function (e) {
  var el =  document.getElementById(e.key);
  el.classList.add("active");
});
s.on("remove", function (e) {
  var el = document.getElementById(e.key);
  el.classList.remove("active");
});

```

--------------------------------

### Event Handling with Initial Events

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/background_eventing.md

Demonstrates how initial events simplify event handling by merging the initial state retrieval and subscription into a single step. The event source guarantees that newly registered handlers receive an event for the initial state, if applicable.

```javascript
object.on("change", function () {
	var state = object.get_state();
	do_something_with_state(state);
});
```

--------------------------------

### Install Rollup Globally

Source: https://github.com/webtiming/timingsrc/blob/master/README.md

Installs the Rollup module bundler globally on the system. This makes the `rollup` command available system-wide, which is often required for build scripts.

```bash
npm install --global rollup
```

--------------------------------

### Update Ubuntu System Packages

Source: https://github.com/webtiming/timingsrc/blob/master/README.md

Updates the package list and installed packages on an Ubuntu system. This is a prerequisite for installing new software or ensuring existing software is up-to-date.

```bash
sudo apt update
sudo apt-get update
```

--------------------------------

### Build Timingsrc from Source (Bash)

Source: https://context7.com/webtiming/timingsrc/llms.txt

Provides instructions for building the Timingsrc project from its source code. This involves installing Node.js dependencies, installing Rollup globally, and executing a Python script to compile the project. The output files are placed in the 'docs/lib/' directory.

```bash
# Install dependencies
npm install

# Install rollup globally (required for build script)
npm install --global rollup

# Build v3
python3 compile.py v3

# Output files are placed in docs/lib/
# - timingsrc-v3.js (full source)
# - timingsrc-min-v3.js (minified)
# - timingsrc-esm-v3.js (ES module)
```

--------------------------------

### Standard Event Handling Pattern

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/background_eventing.md

Illustrates the common two-step pattern for handling stateful event sources: first, retrieve the current state, and second, subscribe to future state changes. This pattern is often required when initial events are not supported.

```javascript
var state = object.get_state();
do_something_with_state(state);
object.on("change", function () {
	var state = object.get_state();
	do_something_with_state(state);
});
```

--------------------------------

### Initialize and Update Timingsrc Dataset

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/sequencing/test_sequencer_pointmode.html

Demonstrates the initialization of a Timingsrc Dataset and updating it with cue data. It shows how to create a Dataset instance and populate it using a function that retrieves cue information.

```javascript
const ds = new timingsrc.Dataset();
ds.update(get_cues());
```

--------------------------------

### Get All Active Cues

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_sequencer.md

Retrieves a list of all SequencerCues that are currently active.

```javascript
s.getActiveCues().forEach(function(cue){});
```

--------------------------------

### Get All Cues

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_sequencer.md

Retrieves a list of all SequencerCues currently managed by the Sequencer.

```javascript
s.getCues().forEach(function (cue) {});
```

--------------------------------

### Check Sequencer Readiness with Promise in JavaScript

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_sequencer.md

Illustrates how to use the Sequencer's ready promise in JavaScript to execute code once the sequencer is initialized and operational. Event handlers and cues can be added before readiness.

```javascript
s.ready.then(function(){
    // now the sequencer is ready
})
```

--------------------------------

### Get Active Cue Keys

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_sequencer.md

Returns a list of keys corresponding to all currently active SequencerCues.

```javascript
s.getActiveKeys().forEach(function(key){});
```

--------------------------------

### Get All Cue Keys

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_sequencer.md

Retrieves a list of all unique keys associated with the SequencerCues currently managed by the Sequencer.

```javascript
s.keys().forEach(function (key) {});
```

--------------------------------

### Create and Configure Timing Objects and Sequencer in JavaScript

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/sequencing/debug_windowsequencer.html

Illustrates the creation of `TimingObject` and `SkewConverter` instances, and the setup of a `Sequencer`. The `Sequencer` is configured with custom ordering logic for cues and is initialized with the dataset and timing objects. Event listeners are attached to log changes.

```javascript
// timing objects
const toA = new timingsrc.TimingObject();
const toB = new timingsrc.SkewConverter(toA, 4);

// sequencer
const options = {
  order: function (cue_a, cue_b) {
    return cue_a.key - cue_b.key;
  }
};
const s = new timingsrc.Sequencer(ds, toA, toB, options);

// render timing object
let value = document.getElementById("value");
toA.on("timeupdate", function () {
  let v = toA.query();
  let pos = v.position.toFixed(2);
  let vel = v.velocity.toFixed(2);
  let acc = v.acceleration.toFixed(2);
  value.innerHTML = `P:${pos} V:${vel} A:${acc}`;
});
toA.on("change", () => {
  console.log("TOA change", toA.pos);
});
toB.on("change", () => {
  console.log("TOB change", toB.pos);
});
s.on("batch", (eArgList) => {
  let active = [toA.pos, toB.pos];
  console.log("batch", active.map((e) => e.toFixed(2)));
  for (let eArg of eArgList) {
    if (eArg.new != undefined) {
      let cue = eArg.new;
      // check integrity
      // all changed cues must overlap active
      if (cue.interval.high < active[0]) {
        console.log(`sequencer bug! - change ${cue.key} ${cue.interval.toString()}`);
      } else if (cue.interval.low > active[1]) {
        console.log(`sequencer bug! - change ${cue.key} ${cue.interval.toString()}`);
      } else {
        console.log(`change ${cue.key} ${cue.interval.toString()}`);
      }
    } else if (eArg.old != undefined) {
      console.log(`remove ${eArg.key} ${eArg.old.interval.toString()}`);
    }
  }
});
```

--------------------------------

### Get Specific Cue by Key

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_sequencer.md

Retrieves a specific SequencerCue identified by its key. Returns null if no cue is found for the given key.

```javascript
var cue = s.getCue("key1");
```

--------------------------------

### Initialize and Control Timing Object and Sequencer (JavaScript)

Source: https://github.com/webtiming/timingsrc/blob/master/docs/examples/sequencer.html

Initializes a TIMINGSRC.TimingObject and a TIMINGSRC.Sequencer. It loads timed data into the sequencer and sets up event listeners for playback controls (play, pause, reset, backwards) and for reporting the timing object's position. It also visualizes the timed data and updates elements based on sequencer events.

```javascript
// Timing Object var to = new TIMINGSRC.TimingObject({range:[0,52]}); // Sequencer var Interval = TIMINGSRC.Interval; // shortcut var s = new TIMINGSRC.Sequencer(to); // Timed Data var data = { a: {data: 'A', start: 0, end: 1 }, b: {data: 'B', start: 2, end: 3 }, c: {data: 'C', start: 4, end: 5 }, d: {data: 'D', start: 6, end: 7 }, e: {data: 'E', start: 8, end: 9 }, f: {data: 'F', start: 10, end: 11 }, g: {data: 'G', start: 12, end: 13 }, h: {data: 'H', start: 14, end: 15 }, i: {data: 'I', start: 16, end: 17 }, j: {data: 'J', start: 18, end: 19 }, k: {data: 'K', start: 20, end: 21 }, l: {data: 'L', start: 22, end: 23 }, m: {data: 'M', start: 24, end: 25 }, n: {data: 'N', start: 26, end: 27 }, o: {data: 'O', start: 28, end: 29 }, p: {data: 'P', start: 30, end: 31 }, q: {data: 'Q', start: 32, end: 33 }, r: {data: 'R', start: 34, end: 35 }, s: {data: 'S', start: 36, end: 37 }, t: {data: 'T', start: 38, end: 39 }, u: {data: 'U', start: 40, end: 41 }, v: {data: 'V', start: 42, end: 43 }, w: {data: 'W', start: 44, end: 45 }, x: {data: 'X', start: 46, end: 47 }, y: {data: 'Y', start: 48, end: 49 }, z: {data: 'Z', start: 50, end: 51 } }; // load timed data into sequencer Object.keys(data).forEach(function (key) { s.addCue(key, new Interval(data[key].start, data[key].end)); }); var run = function () { // Set up controls for timing object document.getElementById("pause").onclick = function () {to.update({velocity: 0.0});}; document.getElementById("reset").onclick = function () {to.update({position:0.0, velocity: 0.0});}; document.getElementById("play").onclick = function () {to.update({velocity:1.0});}; document.getElementById("backwards").onclick = function () {to.update({velocity: -1.0});}; // Report position of timing objects var pos = document.getElementById("pos"); to.on("timeupdate", function () { pos.innerHTML = to.query().position.toFixed(2); }); // Visualize timed data var html = ""; Object.keys(data).forEach(function (key) { html += "<div id='"+ key +"'>" + JSON.stringify(data[key]) + "</div>"; }); document.getElementById("data").innerHTML = html; s.on("change", function (e) { var el = document.getElementById(e.key); el.classList.add("active"); }); s.on("remove", function (e) { var el = document.getElementById(e.key); el.classList.remove("active"); }); }; // kick off if (document.readyState === "complete") run(); else window.onload = run;
```

--------------------------------

### Handling Readiness and State Changes

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/background_eventing.md

Shows the increased complexity when dealing with objects that require readiness checks before executing logic and handling state changes. This involves separate checks for readiness and then applying the standard event handling pattern.

```javascript
// original complexity in run method
var run = function () {
	var state = object.get_state();
	do_something_with_state(state);
	object.on("change", function () {
		var state = object.get_state();
		do_something_with_state(state);
	});
};
// added complexity related to readiness
if (object.is_ready()) {
	run();
} else {
	object.on("ready", run);	
}
```

--------------------------------

### Get Cues by Point

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_sequencer.md

Returns a list of all SequencerCues whose Intervals cover a given point. This operation has a linear time complexity O(N).

```javascript
s.getCuesByPoint(4.0).forEach(function(cue){});
```

--------------------------------

### Access Timing Source

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_mediasync.md

Provides a way to get or set the timing object that MediaSync synchronizes against. This allows changing the reference timing source during runtime.

```javascript
sync.timingsrc(newTimingObject);
```

--------------------------------

### Initialize and Configure Sequencer with Timing Objects

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/exp_windowsequencer.md

This JavaScript code initializes a TIMINGSRC.TimingObject and then creates two skewed timing objects (toA and toB) using TIMINGSRC.SkewConverter. These skewed objects are then used to instantiate a TIMINGSRC.Sequencer. The code also loads data cues into the sequencer and registers event handlers for 'change' and 'remove' events to visually indicate active cues.

```javascript
// Timing Object
var to = new TIMINGSRC.TimingObject({range:[0,52]});
var toA = new TIMINGSRC.SkewConverter(to, -5.0);
var toB = new TIMINGSRC.SkewConverter(to, 4.0);
      
// Sequencer
var s = new TIMINGSRC.Sequencer(toA, toB);    

// Load Data
Object.keys(data).forEach(function (key) {
  s.addCue(key, new TIMINGSRC.Interval(data[key].start, data[key].end));
});

// Register Handlers
s.on("change", function (e) {
  var el =  document.getElementById(e.key);
  el.classList.add("active");
});
s.on("remove", function (e) {
  var el = document.getElementById(e.key);
  el.classList.remove("active");
});
```

--------------------------------

### Include MediaSync Library

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/exp_mediasync.md

This snippet shows how to include the MediaSync JavaScript library from a CDN. This is a prerequisite for using MediaSync functionalities in your HTML page.

```html
<script text="javascript" src="https://mcorp.no/lib/mediasync.js"></script>
```

--------------------------------

### Set Up Playback Controls and Event Listeners

Source: https://github.com/webtiming/timingsrc/blob/master/docs/examples/windowsequencer.html

This function sets up HTML button controls for playback (Play, Pause, Reset, Backwards) that interact with the root timing object. It also configures event listeners to report the positions of the skewed timing objects and to visually update elements when timed data intervals become active or inactive.

```javascript
var run = function () { // Set up controls for timing object document.getElementById("pause").onclick = function () {to.update({velocity: 0.0});}; document.getElementById("reset").onclick = function () {to.update({position:0.0, velocity: 0.0});}; document.getElementById("play").onclick = function () {to.update({velocity:1.0});}; document.getElementById("backwards").onclick = function () {to.update({velocity: -1.0});}; // Report position of timing objects var posBefore = document.getElementById("posBefore"); to.on("timeupdate", function () { posBefore.innerHTML = toA.query().position.toFixed(2); }); var posAfter = document.getElementById("posAfter"); to.on("timeupdate", function () { posAfter.innerHTML = toB.query().position.toFixed(2); }); // Visualize timed data var html = ""; Object.keys(data).forEach(function (key) { html += "<div id='"+ key +"'>" + JSON.stringify(data[key]) + "</div>"; }); document.getElementById("data").innerHTML = html; s.on("change", function (e) { var el = document.getElementById(e.key); el.classList.add("active"); }); s.on("remove", function (e) { var el = document.getElementById(e.key); el.classList.remove("active"); }); }; // kick off if (document.readyState === "complete") run(); else window.onload = run;
```

--------------------------------

### Get Timing Provider Ready State in JavaScript

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_timingprovider.md

Retrieves the current ready state of the timing provider. The returned value is an enum of type TimingProviderState.

```javascript
var state = timingProvider.readyState;
```

--------------------------------

### WebTiming Interval Testing Suite

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/util/test_interval.html

This function, `run`, serves as the main entry point for executing various test functions within the WebTiming project. It calls individual test suites for inside, compare, sort, union, and intersect operations, concluding with a 'done' message.

```javascript
var run = function () {
  test_inside();
  test_compare();
  test_sort();
  test_union();
  test_intersect();
  console.log("done");
};
run();
```

--------------------------------

### Get Cues by Interval Overlap

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_sequencer.md

Returns a list of all SequencerCues whose Intervals overlap with a given search Interval. This operation has a logarithmic time complexity O(logN).

```javascript
s.getCuesByInterval(new Interval(4.0, 8.0)).forEach(function(cue){});
```

--------------------------------

### Update or Get Skew

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_mediasync.md

Allows updating or retrieving the current skew value for synchronization. The skew represents an offset in seconds. This functionality can also be achieved using a SkewConverter.

```javascript
// Set skew
sync.setSkew(0.4);

// Get skew
var currentSkew = sync.getSkew();
```

--------------------------------

### Get Timing Provider Vector in JavaScript

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_timingprovider.md

Retrieves the current state vector from the timing provider. This vector contains information about position, velocity, acceleration, and timestamp.

```javascript
var vector = timingProvider.vector;
```

--------------------------------

### Initialize and Control Timing with TimingObject and LoopConverter (JavaScript)

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/timingobject/test_bug_loop.html

This snippet initializes a TimingObject and a LoopConverter to manage timing values. It sets up an event listener for changes in the loop and integrates with an MCorp application to define the timing source. The current positions are logged every second.

```javascript
import * as TIMINGSRC from '../../index.js';

var to = new TIMINGSRC.TimingObject();
var to_loop = new TIMINGSRC.LoopConverter(to, [0, 30]);

to_loop.on("change", (eArg, eInfo) => {
  console.log("to loop onchange", to_loop.vector);
});

var app = MCorp.app("2898346883410567352", {anon:true});

app.ready.then(() => {
  to.timingsrc = app.motions.shared;
});

setInterval(function() {
  console.log(`${to.pos} -> ${to_loop.pos}`);
}, 1000);

window.to = to;
window.to_loop = to_loop;
```

--------------------------------

### Get Cues Covered by Interval

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_sequencer.md

Returns a list of all SequencerCues whose Intervals are completely covered by a given search Interval. This operation has a logarithmic time complexity O(logN).

```javascript
s.getCuesCoveredByInterval(new Interval(4.0, 8.0)).forEach(function(cue){});
```

--------------------------------

### Run Initialization Function

Source: https://github.com/webtiming/timingsrc/blob/master/docs/_includes/head.html

Executes the main initialization function 'run()'. This logic is used when no specific MCorp app ID is provided. It ensures 'run()' is called either when the document is fully loaded or when the window's load event fires.

```javascript
if (document.readyState === "complete") run();
else window.onload = function () {run();};
```

--------------------------------

### Get Version - JavaScript

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_timingobject.md

Retrieves the version of the Timing Object implementation. This getter provides information about the specific version of the timing object being used. No external dependencies are required.

```javascript
var version = timingObject.version;
```

--------------------------------

### Get Timing Object Range

Source: https://github.com/webtiming/timingsrc/blob/master/docs/doc/api_timingobject.md

Demonstrates how to access the configured range of the timing object using its 'range' getter. The range specifies restrictions on the object's timeline.

```javascript
var range = timingObject.range;
```

--------------------------------

### Setup and Event Handling for TimingObject in JavaScript

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/timingobject/test_converter_range.html

Sets up a TimingObject, attaches event listeners for 'change' and 'timeupdate', and configures UI elements for playback controls (play, pause, reset, back) and range selection. It also handles 'rangechange' events to update the displayed range.

```javascript
import * as timingsrc from '../../index.js';

var to, c;

function setup_timingobject(key, name, to) {
  // timing object
  to._name = name;
  to.on("change", function(vector, eInfo) {
    const to = eInfo.src;
    console.log(`onchange ${to._name}`, vector);
  });

  const pos_elem = document.getElementById(`pos_${key}`);
  to.on("timeupdate", function () {
    pos_elem.innerHTML = to.query().position.toFixed(2);
  });

  document.getElementById(`play_${key}`).onclick = function () {
    to.update({velocity:1.0});
  };
  document.getElementById(`pause_${key}`).onclick = function () {
    to.update({velocity:0.0});
  };
  document.getElementById(`reset_${key}`).onclick = function () {
    to.update({position: 0.0, velocity:0.0});
  };
  document.getElementById(`back_${key}`).onclick = function () {
    to.update({velocity:-1.0});
  };

  // range
  document.getElementById(`range_a_${key}`).onclick = function () {
    to.update({range:[2,8]});
  };
  document.getElementById(`range_b_${key}`).onclick = function () {
    to.update({range:[3,7]});
  };

  const range_elem = document.getElementById(`range_${key}`);
  to.on("rangechange", function(range) {
    let [low, high] = range;
    range_elem.innerHTML = `[${low},${high}]`;
  });
};

function run() {
  to = new timingsrc.TimingObject({range:[0,10]});
  setup_timingobject(0, "source", to);

  c = new timingsrc.RangeConverter(to, [2,8]);
  setup_timingobject(1, "converter", c);
};

run();
```

--------------------------------

### Initialize and Run Event Handling Logic

Source: https://github.com/webtiming/timingsrc/blob/master/v3/test/util/test_eventify.html

Initializes event objects and instances, sets up UI element event listeners for triggering events, unsubscribing, and handling promises. This function orchestrates the overall event flow.

```javascript
const ev = new eventify.EventBoolean();
const es = new EventSource();
const sink = new EventSink();

function run() {
  document.getElementById('trigger1').onclick = function () {
    console.log("trigger change");
    es.eventifyTrigger("change", "earg change");
  };
  document.getElementById('trigger2').onclick = function () {
    console.log("trigger other");
    es.eventifyTrigger("other", "earg other");
  };
  document.getElementById('unsub').onclick = function () {
    console.log("unsubscribe sub1");
    es.off(sink.sub1);
  };
  document.getElementById('toggle').onclick = function () {
    ev.value = !ev.value;
  };
  document.getElementById('promise').onclick = function () {
    console.log("promise start");
    eventify.makePromise(ev).then(function () {
      console.log("promise done");
    });
  };
  console.log("ready");
};

run();
```
Tokens:
Raw