JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AI SDK test</title>
  <script>
  </script>
</head>
<body onload="createTimeline()">
<canvas id="canvas"></canvas>
blu valence, red arousal, green positivity
<canvas id="chart" width="1000" height="250"></canvas>
<canvas id="chart2" width="1000" height="250"></canvas>
<div>
  <button id="toggle">Pause</button>
</div>
<script src="https://ai-sdk.morphcast.com/v1.16/ai-sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.34.0/smoothie.min.js"></script>
<script>
  let ts_attention = new TimeSeries();
  let ts_arousal = new TimeSeries();
  let ts_valence = new TimeSeries();

  function createTimeline() {
    let chart_a = new SmoothieChart({maxValue:1,minValue:0});
    let chart_b = new SmoothieChart({maxValue:1,minValue:-1});

    chart_a.addTimeSeries(ts_attention, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 2 });
    chart_b.addTimeSeries(ts_arousal, { strokeStyle: 'rgba(255, 0, 0, 0.5)', fillStyle: 'rgba(255, 0, 0, 0.2)', lineWidth: 1 });
    chart_b.addTimeSeries(ts_valence, { strokeStyle: 'rgba(0, 0, 255, 0.5)', fillStyle: 'rgba(0, 0, 255, 0.2)', lineWidth: 1 });

    chart_a.streamTo(document.getElementById("chart"), 50);
    chart_b.streamTo(document.getElementById("chart2"), 50);
  }
</script>
<script>
  const toggle = document.querySelector('#toggle');

  function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[\[\]]/g, '\\$&');
    const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
    if (!results || !results[2]) return undefined;
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  }

  const gain = getParameterByName('gain');
  const finalGain = getParameterByName('finalgain');
  const angle = getParameterByName('angle');

  console.log('input params' + JSON.stringify({gain, finalGain, angle}));

  CY.loader()
   ...