JSFiddle - React, Tailwind, and code Playground

by tiwang1102

HTML

<!DOCTYPE html>
<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
	<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
	<script src="keyboard copy copy 2.js"></script>
    <!-- <script src="visualization.js"></script> -->

	
	</head>
	<body>
      <div class="display">
	  
		
	  <div class="camera">
		<img src="http://128.122.151.25/mjpg/video.mjpg" alt="Live view of the ITP floor" width="800" height="600">
      </div>
      <div id="visualize">
	   <!-- <div id="circle1" onclick="button_click();"></div> -->
	   <div id="circle1"></div>
	   <div id="circle2"></div>
	   <div id="circle3"></div>
	   <div id="circle4"></div>
	   <div id="circle5"></div>
	   <div id="circle6"></div>
	   <div id="circle7"></div>
	  </div>
	  
     </div>

      <div class="controlPanal">
		 
		<div class="controlPanalLeft">

		 <div class="buttonControl">
			<button id="Off">all light off!</button><br />
			<br />
			<button id="Sit">Please sit!</button><br />
			<div id="resultDiv"></div><br />
		 </div>

		 <div class="mlControl">
			<div id="videoContainer"></div>
			<h6><span id="modelStatus">Loading base model...</span> | <span id="videoStatus">Loading video...</span></h6>
			<p>
			  <input type="range" name="slider" id="slider" min="0.01" max="1.0" step="0.01" value="0.5"                              />
			</p>
			<br />
			<p>
			  <button id="addSample">Add Sample</button>
			  </p><p><span id="amountOfSamples">0</span> Sample Images</p>
			<br />
			<p><button id="train">Train</button><span id="loss"></span></p>
			<br />
			<p>
			  <button id="buttonPredict">Start predicting!</button><br />
			</p>
			<br />
			<p>
				<button id="save">Save Model</button> |
				<label for="avatar">Load Model:</label>
				<input type="file" id="load" multiple          />
			  </p>
		 </div>

		</div>
		
...

CSS

<style>
        * {
            padding: 0 0 0 0;
            margin:0 0 0 0;
            box-sizing: border-box;
        }
        
        body{
            font-family: Arial, Helvetica, sans-serif;
			font-size:15px;
            font-weight:normal;
            line-height:15px;
            color:#BB86FC;
        }
        
        .display{
           height:60vh;
		   padding:1rem 1.8rem 2rem 1.5rem;
           display: flex;
           flex-direction: row;
		   align-items: flex-end;
		   background-color:#121212;
        }
		.camera{
			/* height:40vh; */
            /* padding:1rem 1.8rem 2rem 1.5rem; */
            width:60%;
            height:100%;
            background-color:#121212;
		}
        #visualize{
            width:40%;
            height: 100%;
            background-color:#121212;
			display: flex;
            justify-content: center;
            align-items: center;
        }

		/* .mlPanal{
			height:25vh;
            background-color: #121212;
			display: flex;
            flex-direction: row;
		    align-items: flex-end;
		} */
		
		.controlPanal{
			height:40vh;
            display: flex;
            flex-direction: row;
			align-items: flex-end;
		}
        
		.controlPanalLeft{
			width:30%;
            height:100%;
			background-color:#121212;
			display: flex;
            flex-direction: column;
			align-items: flex-end;
		}
        .buttonControl{
			padding:2rem 1.8rem 2rem 1.5rem;
			width:100%;
            height:35%;
			background-color:#121212;
		}
		.mlControl{
            padding:1rem 1.8rem 1rem 1.5rem;
			width:100%;
            height:65%;
			background-color:#121212;
		}

		.ml_camera{
			padding:2rem 1.8rem 2rem 1.5rem;
			width:25%;
            height:100%;
			background-color:#121212;
		}

		.keyControl{
			padding:2rem 1.8rem 2rem 1.5rem;
			width:45%;
            height:100%;
			background-color:#121212;
		}

        .panal__text{
            font-size:15px;
            font-weight:normal;
           ...

JavaScript

var url = '128.122.151.15';           // the hub IP address
var username = 'yourUserName';    // fill in your Hub-given username var resultDiv;
var dimmer10h;
var dimmer10b;
var button10;
var dimmer18h;
var button18;
var dimmer16c;
var dimmer16b;
var button16;
var dimmer22c;
var dimmer22b;
var button22;
var buttonOff;
var lightNumber;
var hour;
var minute;
var timeValue;
var hueValue;
var turnOn10 =false;
var turnOn18 =false;
var turnOn16 =false;
var turnOn22 =false;
var initial=0;
var speed=20;
var addBrightness=1;
var hueSwitch=2000;
var ctSwitch=10;
var changeValue=false;
var brightnessIndex=[];

var featureExtractor;
var regressor;
var video;
var loss;
var sliderML;
var samples = 0;
var positionX = 140;
var facePosition;
var changeWithFace=false;
var lightIndex=[3,10,16,17,18,21,22];
var lightName;
var individualNumber;
var marginX;
var shouldIblink=false;
var circleToChange;
var changeWithSit=false;
var shouldIrandom=false;

// 3:None toplight SL,   0
// 10:Hue lightstrip cable rack,   1
// 15:Hue lightstrip kitchen       2
// 16:frontlight SR                3
// 17: None frontlight SL                4
// 18:toplight SR                  5
// 21: None backlight SR                 6
// 22:backlight SL                 7

function setup() {
  
  var parentElt = select('.ml_camera');
  var myCanvas=createCanvas(parentElt.width, parentElt.height);
  myCanvas.parent(parentElt);
  // myCanvas.position=(parentElt.width/2, parentElt.height/2);

  video = createCapture(VIDEO);
  // Append it to the videoContainer DOM element
  video.hide();
  // Extract the features from MobileNet
  featureExtractor = ml5.featureExtractor('MobileNet', modelReady);
  // Create a new regressor using those features and give the video we want to use
  regressor = featureExtractor.regression(video, videoReady);
  // Create the UI buttons
  setupButtons();

  frameRate(1);
  // resultDiv = createDiv('Hub response');  // a div for the Hue hub's responses
  // resultDiv.position(10, 340);     ...