JSFiddle - React, Tailwind, and code Playground

by frankkha

HTML

<div id="square_1"></div>

<div id="adc_1"></div>
LED Control:<br/>
<br/>R: <input id="r" type="range" min="0" max="255" step="1" oninput="sendRGB();" />
<br/>G: <input id="g" type="range" min="0" max="255" step="1" oninput="sendRGB();" />
<br/>B: <input id="b" type="range" min="0" max="255" step="1" oninput="sendRGB();" />
<br/>DAC: <input id="dac" type="range" min="0" max="4095" step="10" style="vertical" oninput="sendDAC();" />
<br/> ADC0 = <input id="adc" type="text" name="adc" size="6" disabled />
<br/>
<table style="border: 1px solid black;">
  <tr>
    <td>
      <p>Weigh</p>
      <p id="weigh"></p>
      <p id="loops"></p>
    </td>
    <td>
      <canvas id="fspectrum" width=400 height=200 style="border:1px solid #0000FF;"></canvas>
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      time 1 2 3 4 5 6 7 8 9 10 11 12 13 13 14 15 16 17 18
    </td>
  </tr>
</table>

CSS

html,
body

JavaScript

function sendDAC() {
  var dac = parseInt(document.getElementById('dac').value).toString(10);
  document.getElementById('adc').value = dac;
}

function sendRGB() {
  var r = parseInt(document.getElementById('r').value).toString(16);
  var g = parseInt(document.getElementById('g').value).toString(16);
  var b = parseInt(document.getElementById('b').value).toString(16);
  if (r.length < 2) {
    r = '0' + r;
  }
  if (g.length < 2) {
    g = '0' + g;
  }
  if (b.length < 2) {
    b = '0' + b;
  }
  var rgb = '#' + r + g + b;
  document.getElementById('adc').value = rgb;
}

function draw_square() {
  var draw = SVG('square_1');
  draw.size(120, 120);
  square = draw.rect(100, 100);
  square.attr({
    fill: '#f06'
  });
}

function draw_text() {
  var drawtxt = SVG('adc_1').size(150, 50);
  drawtext = drawtxt.text('Frank');
}

var draw = SVG('square_1').size(300, 130)

var line = draw.line(0, 100, 100, 0).move(20, 20)
line.stroke({
  color: '#f06',
  width: 10,
  linecap: 'round'
})


var c = document.getElementById('fspectrum').getContext('2d');
var i = 1;
var r;
var line = c.line(0, 0, 100, 150).stroke({
  width: 1
})

var ii = 0;
var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  document.getElementById("weigh").innerHTML = d.toLocaleTimeString();
  document.getElementById("loops").innerHTML = ii.toString(10) + ' \/s';
  ii = 0;
}
var sc = setInterval(scop, 5);
var ory = 0;
var rr = 100;

function scop() {
  c.beginPath();
  c.strokeStyle = "#FFFFFF";
  c.moveTo(i, 0);
  c.lineTo(i, 200);
  c.stroke();
  r = Math.floor(Math.random() * 200);
  if (r > 100) {
    rr++;
    if (rr > 200) {
      rr = 100;
    }
  } else {
    rr--;
    if (rr < 0) {
      rr = 100;
    }
  }
  c.beginPath();
  c.strokeStyle = "#000000";
  c.moveTo(i, 100);
  if (rr > 100) {
    c.lineTo(i, rr);
  } else {
    c.lineTo(i, rr);
  }
  c.stroke();
  ii++;
  if (i++ > 400) {
    i = 1;
  }

}