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: 50,
  })
  v.updateTimeline([
  	{

      id: 'sun',
      layer: 'sun',
      enable: {
        start: 20,
        end: 100
      },
      content: {},
    },
    {

      id: 'moon',
      layer: 'moon',
      enable: {
        start: 10,
        end: 80
      },
      content: {},
    },
    {

      id: 'jupiter',
      layer: 'jupiter',
      enable: {
        start: 50,
        end: 60
      },
      content: {},
    },
    {
      id: 'myObject',
      layer: 'L1',
      enable: {
        while: '#sun & #moon & !#jupiter',
      },
      content: {},
    }

  ])
} catch (e) {
  document.querySelector("#message").innerHTML = e
}