JSFiddle - React, Tailwind, and code Playground

by scytacki

HTML

<script src="http://concord-consortium.github.io/iframe-phone/dist/iframe-phone.js"></script>
<script src="http://concord-consortium.github.io/ArduinoEthernetCom/ArduinoEthernetCom.js"></script>
<iframe id="interactive" width="565px" height="435px" frameborder="no" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="https://lab.concord.org/embeddable.html#interactives/samples/3-100-atoms.json"></iframe>
<div style="font: 12px arial, helvetica, sans-serif">
NOTE: the temperature is scaled so measurable temperatures result in changes in the model.
Actual Temperature: <span id="actual-temp"></span>&#176;C
</div>

JavaScript

var aec = new ArduinoEthernetCom({frequency: 2}),
    phone = new iframePhone.ParentEndpoint(document.getElementById("interactive"));
    tempDisplay = document.getElementById("actual-temp");

aec.addObserver(function(pinValues) {
  var pin0 = pinValues.A0,
      voltage = ((pin0 * 5.0) / 1024.0),
      temperatureC = (voltage - 0.5) * 100; //TMP36

  tempDisplay.innerHTML = temperatureC;
    
  // scale temperature so that 20-30C maps to 0-2000
  var scaledTemp = (temperatureC - 20)*200;
  // make sure the scaledTemp stays in a valid range
  scaledTemp = Math.max(Math.min(scaledTemp, 5000), 0);

  // set the temperature of the heat bath of the model
  phone.post("set", {name:"targetTemperature", value: scaledTemp});
});


// listen for the play event and start the arduino collection
phone.addListener('play.arduino', function (){
  console.log('starting')
  aec.start();    
});
phone.post("listenForDispatchEvent", {eventName: "play.arduino"});

// listen for the stop event and start the arduino collection
phone.addListener('stop.arduino', function (){
  console.log('stoping')
  aec.stop();    
});
phone.post("listenForDispatchEvent", {eventName: "stop.arduino"});