Timeline example

by Johan Nyman

HTML

<script src="https://cdn.jsdelivr.net/gh/SuperFlyTV/timeline-visualizer@dist/dist/js/timeline-visualizer.min.js"></script>
<canvas width="500" height=300 id="timeline"></canvas>
<div id="message"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}

JavaScript

try {
  var v = new TimelineVisualizer.TimelineVisualizer('timeline', {})
  v.setViewPort({
    zoom: 20,
  })
  v.updateTimeline([{
      id: 'myGroup',
      layer: 'L0',
      enable: {
        start: 10,
        duration: 10,
        repeating: 20 // Repeat every 20 seconds, so will start at 10, 30, 50 etc...
      },
      content: {},
      isGroup: true,
      children: [{
        id: 'child0',
        layer: 'L1',
        enable: {
          start: 2, // will repeat with parent, so will start at 12, 32, 52 etc...
          duration: null // Duration not set, but will be capped in parent, so will end at 20, 40, 60 etc...
        },
        content: {},
      }]

    }

  ], {time:0, limitCount: 10 })
} catch (e) {
  document.querySelector("#message").innerHTML = e
}