Select Git revision
clusterpi.js
index.html 29.48 KiB
<html>
<head>
<title>Physical Computing Interface</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="./lib/jsoneditor/jsoneditor.css" >
<!-- assembler control css -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/styleAssemblerControl.css" media="screen"/>
<!-- <link href="https://unpkg.com/font-awesome@5.8.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> -->
<!-- <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> -->
<script src="https://kit.fontawesome.com/99c302ff33.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="threejs">
<div id="threejs1">
<div class="header1">
<i> Assembly</i>
<!-- Three.js -->
</div>
<div id="webgl"></div>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="0" value="1" class="slider" id="time">
</div>
</div>
<div id="simulation">
<div id="threejs1">
<div class="header1">
<i> Assembler Control</i>
</div>
<div class="dragbar2"></div>
<!-- <div id="webgl1"></div> -->
<!-- todo put this somewhere elseß -->
<div class=assemblerControl>
<video style="display:none" id="videoInput" width=320 height=240></video>
<div class='row my-3 ml-1'>
<div class='col' style='max-width:350px'>
<h4>DRO</h4>
<div class='input-group mb-1 input-group-xsm'>
<div class="input-group-prepend">
<span class="input-group-text input-group-xsm">Cord. Sys.:</span>
</div>
<select id="cordSystemToolSelect">
<option>Toolhead</option>
<option>Camera</option>
</select>
<div class="input-group-prepend">
<span class="input-group-text input-group-xsm">Rel. To:</span>
</div>
<select id="cordSystemObjectSelect">
<option>Build Plate</option>
<option>Feeder1</option>
<option>Feeder2</option>
</select>
</div>
<div class='input-group mb-1'>
<div class="input-group-prepend">
<span class="input-group-text">X</span>
</div> <input type="text" class="form-control text-muted" id="xPosInput" value="0.00"></input>
<div class="input-group-append">
<span class="input-group-text">mm</span>
</div>
</div>
<div class='input-group mb-1'>
<div class="input-group-prepend">
<span class="input-group-text">Y</span>
</div>
<input type="text" class="form-control text-muted" id="yPosInput" value="0.00"></input>
<div class="input-group-append">
<span class="input-group-text">mm</span>
</div>
</div>
<div class='input-group mb-1'>
<div class="input-group-prepend">
<span class="input-group-text">Z</span>
</div>
<input type="text" class="form-control text-muted" id="zPosInput" value="0.00"></input>
<div class="input-group-append">
<span class="input-group-text">mm</span>
</div>
</div>
<div class='input-group mb-3'>
<div class="input-group-prepend">
<span class="input-group-text">A</span>
</div>
<input type="text" class="form-control text-muted" id="aPosInput" value="0.00"></input>
<div class="input-group-append">
<span class="input-group-text">deg</span>
</div>
</div>
<button class="btn btn-success" id="updatePickupOrigin">Update Pickup Origin</button><br>
<button class="btn btn-success" id="updatePlaceOrigin">Update Place Origin</button><br>
</div>
<div class='col'>
<div class='row'>
<div class='col-6' style="padding-left:25px">
<h4>Jog Controls</h4><br>
<!-- <div class="form-check" style="margin-left:-25px">
<span>homed?</span>
</div> -->
<div class="input-group mb-3">
<!-- <div class="form-check" style="padding-right:10px">
<input type="checkbox" disabled class="btn" id="xhomed">
</div> -->
<div class="input-group-prepend">
<span class="input-group-text">X:</span>
</div>
<div class="input-group-append">
<button id="xleftbutton" class="btn">-</button>
</div>
<div class="input-group-append">
<button id="xrightbutton" class="btn">+</button>
</div>
<div class="input-group-append">
<select id="xStepSelect">
<option>4.5</option>
<option>13</option>
<option>1</option>
<option>0.5</option>
<option>0.25</option>
<option>0.1</option>
</select>
</div> </div>
<div class="input-group mb-3">
<!-- <div class="form-check" style="padding-right:10px">
<input type="checkbox" disabled class="btn" id="yhomed">
</div> -->
<div class="input-group-prepend">
<span class="input-group-text">Y:</span>
</div>
<div class="input-group-append">
<button id="ydownbutton" class="btn">-</button>
</div>
<div class="input-group-append">
<button id="yupbutton" class="btn">+</button>
</div>
<div class="input-group-append">
<select id="yStepSelect">
<option>4.5</option>
<option>8</option>
<option>1</option>
<option>0.5</option>
<option>0.25</option>
<option>0.1</option>
</select>
</div>
</div>
<div class="input-group mb-3">
<!-- <div class="form-check" style="padding-right:10px">
<input type="checkbox" disabled class="btn" id="zhomed">
</div> -->
<div class="input-group-prepend">
<span class="input-group-text">Z:</span>
</div>
<div class="input-group-append">
<button id="zdownbutton" class="btn">-</button>
</div>
<div class="input-group-append">
<button id="zupbutton" class="btn">+</button>
</div>
<div class="input-group-append">
<select id="zStepSelect">
<option>1.0055</option>
<option>2.011</option>
<option>0.5</option>
<option>0.25</option>
<option>0.1</option>
</select>
</div>
</div>
<div class="input-group mb-3">
<!-- <div class="form-check" style="padding-right:10px">
<input type="checkbox" disabled class="btn" id="zhomed">
</div> -->
<div class="input-group-prepend">
<span class="input-group-text">A:</span>
</div>
<div class="input-group-append">
<button id="adownbutton" class="btn">-</button>
</div>
<div class="input-group-append">
<button id="aupbutton" class="btn">+</button>
</div>
<div class="input-group-append">
<select id="aStepSelect">
<option>90</option>
<option>1</option>
<option>0.5</option>
<option>0.25</option> <option>0.1</option>
</select>
</div>
</div>
</div>
<div class='col-5'>
<!-- <div class="button-group" style="padding-top:0px"> -->
<h4>Height</h4><br>
<button class="btn btn-success" id="gotozmaxbtn">Z Max</button><br>
<button class="btn btn-info" id="gotoztraversebtn">Z Traverse</button><br>
<button class="btn btn-warning" id="gotozapproachbtn">Z Approach</button><br>
<button class="btn btn-danger" id="gotozminbtn">Z Min</button><br><br>
<!-- </div> -->
<div class='input-group mb-1'>
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:10pt">layer</span>
</div>
<input type="text" class="form-control text-muted" id="zBuildLayerDisplay" value="0.00" style="font-size:10pt"></input>
<div class="input-group-append">
<button onclick="decrementLayerHeight()" class="btn">-</button>
</div>
<div class="input-group-append">
<button onclick="incrementLayerHeight()" class="btn">+</button>
</div>
</div>
</div>
<!-- <div class="input-group-prepend" style="padding-left:100px">
<span class="input-group-text">Go To:</span>
</div>
<div class="input-group-append">
<select id="zStepSelect">
<option>BuildPlateOrigin</option>
<option>NodePickupOrigin</option>
<option>NodeToolOrigin</option>
</select>
</div>
<div class="input-group-append">
<button class="btn btn-danger" id="gotozminbtn">Go</button>
</div> -->
</div>
</div>
</div>
<div class='row my-3 ml-1'>
<div class='col' style='max-width:500px'>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Port:</span>
</div>
<select id=portSelect></select>
<div class="input-group-append">
<button id="serialListAndConnect" class="btn">List Ports</button>
</div>
</div>
<div class="scroll">
<pre id="serialMonitor" class="form-control scroll"></pre>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" id="serialInput"></input>
<div class="input-group-append">
<button id="sendButton">Send</button>
</div>
</div>
</div>
<div class='col' style='max-width: 275px'>
<h4>Move Queue</h4> <div class="row mb-1">
<div class='col-sm-12'>
<div class="btn-group-sm">
<button type='button' class='btn btn-success' id='start_resume_btn' disabled>Resume</button>
<button type='button' class='btn btn-info' id='get_status_btn' disabled>Status</button>
<button type='button' class='btn btn-warning' id='flush_q_btn' disabled>Flush</button>
<button type='button' class='btn btn-danger' id='stop_btn' disabled>Stop</button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<ul id="moveQList" class="list-group">
<!-- <li class="small-font list-group-item active">G0X0Y0</li>
<li class="small-font list-group-item">G0X50.8</li>
<li class="small-font list-group-item">G0Y45.037</li>
<li class="small-font list-group-item">G0X0</li>
<li class="small-font list-group-item">G0Y0</li>
<li class="small-font list-group-item"> </li>
<li class="small-font list-group-item"> </li> -->
<!-- <li class="small-font list-group-item"> </li> -->
</ul>
</div>
</div>
</div>
<div class='col'>
<h4>Macros</h4>
<div class="row mb-1">
<div class='col-sm-8'>
<div class="btn-group-sm">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text input-group-xsm">Swap Toolhead</span>
</div>
<select id="toolSelect">
<option>Node</option>
<option>Strut</option>
<option>Actuator</option>
<option>None</option>
</select>
<button id="replaceTool">Replace</button>
</div>
<div class="input-group mb-3">
<button id="grip" class='btn btn'onclick="activateGripper()">Push</button>
<button id="ungrip" class='btn btn-info' onclick="deactivateGripper()">Retract</button>
</div>
<div class="input-group mb-3">
<button id="readyGrip" class='btn btn'onclick="readyGripper()">Ready</button>
<button id="unreadyGrip" class='btn btn-info' onclick="unreadyGripper()">Unready</button>
</div>
<div class='input-group mb-1'>
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:10pt;max-width:55px">Node</span>
</div>
<input type="text" class="form-control text-muted" id="nodeCountDisplay" value="0" style="font-size:10pt;max-width:60px"></input>
<div class="input-group-append">
<button onclick="decrementNodeCount()" class="btn">-</button>
</div>
<div class="input-group-append">
<button onclick="incrementNodeCount()" class="btn">+</button>
</div>
</div>
<div class='input-group mb-1'>
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:10pt;max-width:55px">Strut</span>
</div>
<input type="text" class="form-control text-muted" id="strutCountDisplay" value="0" style="font-size:10pt;max-width:60px"></input>
<div class="input-group-append">
<button onclick="decrementStrutCount()" class="btn">-</button>
</div> <div class="input-group-append">
<button onclick="incrementStrutCount()" class="btn">+</button>
</div>
</div>
</div>
</div>
</div>
<h5>Macro List</h5>
<span id="macroList">
<!-- <a href="javascript:void(0);" onclick="putDownPickUpGrid()">putDownPickUpGrid</a> -->
</span>
</div>
</div>
<div class='col mr-3'>
<div class='input-group mb-1'>
<button type='button' class='btn btn-success btn-sm' id='start-stop' disabled>Start Camera</button>
<select id="visionSelect" disabled>
<option>Color</option>
<option>Gray</option>
<option>Thresh</option>
<option>Blur</option>
<option>None</option>
</select>
<div class="button-group">
<button id="dropdown-button" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">Layers</span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" class="small" data-value="crosshair" tabIndex="-1"><input checked type="checkbox"/> Crosshair</a></li>
<li><a href="#" class="small" data-value="contours" tabIndex="-1"><input unchecked type="checkbox"/> Contours</a></li>
</ul>
</div>
<!-- <select id="visionLayers" multiple="multiple">
<option>Crosshair</option>
<option>Fiducial Tracking</option>
</select> -->
</div>
<div class='input-group mb-1'>
<canvas id="canvasFrame" width=320 height=240></canvas>
<!-- <canvas id="mapCanvas" width=320 height=240></canvas> -->
</div>
</div>
<div>
<p class="err" id="errorMessage"></p>
</div>
</div>
</div>
</div>
<div id="graph">
<div class="header2">
<div class="dragbar"></div>
<i> Graph</i>
</div>
<div id=jsondiveditor>
<div id="cy"></div>
</div>
<div class="dragbar"></div>
</div>
<div id="json">
<div class="header2">
<div class="dragbar"></div>
<i> Node</i>
</div>
<div id=jsondiveditor>
<br></br>
<!-- <p>
<button class="button" id="setJSON">Get Info</button>
<button class="button" id="getJSON">Set Info</button>
</p> -->
<div id="jsoneditor"></div>
</div>
<div class="dragbar"></div>
<div class="dragbar1"></div>
</div>
<div class="footer1">
<strong>left-click</strong>: place voxel/orbit, <strong>right-click</strong>: radial menu
</div>
<div class="footer2">
<!-- update change to more instructions/feedback -->
<i>instructions</i>
</div>
</body>
<!-- TODO:
Clean structure to modules?
Add another footer
-->
<!-- libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./lib/cytoscape.min.js"></script>
<script src="./lib/cytoscape-cxtmenu.js"></script>
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
<script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
<script src="./lib/cytoscape-expand-collapse.js"></script>
<script src="./lib/jsoneditor/jsoneditor.js"></script>
<script src="./lib/opencv.js"></script>
<script src="./lib/three.min.js"></script>
<script src="./lib/OrbitControls.js"></script>
<script src="./lib/dat.gui.min.js"></script>
<script src="./lib/TransformControls.js"></script>
<script src="./assembly/InverseKinematic.js"></script><!-- TODO LOCATION -->
<script src="./assembly/voxel.js"></script><!-- TODO CHANGE TO DICE PIECES -->
<!-- simulation stuff -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- <script type="text/javascript" src="https://files.mcneel.com/rhino3dm/js/latest/rhino3dm.js"></script> --><script src="./rhino3dm.js"></script>
<!-- <script async type="text/javascript" src="https://files.mcneel.com/rhino3dm/js/latest/rhino3dm.js"></script>
<script async type="text/javascript" src="https://files.mcneel.com/rhino3dm/js/latest/compute.rhino3d.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
<!-- simulation -->
<!-- <script src="./simulation/lib/stats.js"></script>
<script src="./simulation/lib/SVGRenderer.js"></script>
<script src="./simulation/lib/js-colormaps.js"></script>
<script src="./simulation/lib/LineSegments2.js"></script>
<script src="./simulation/lib/LineSegmentsGeometry.js"></script>
<script src="./simulation/lib/Line2.js"></script>
<script src="./simulation/lib/LineMaterial.js"></script>
<script src="./simulation/lib/LineGeometry.js"></script>
<script src="./simulation/lib/GeometryUtils.js"></script>
<script src="./simulation/fea/beamFea.js"></script>
<script src="./simulation/visualization/geometry.js"></script>
<script src="./simulation/visualization/utils.js"></script>
<script src="./simulation/visualization/main.js"></script> -->
<!-- assembler control -->
<script src="./assembly/assemblerControl/utils.js" type="text/javascript"></script>
<script src="./assembly/assemblerControl/setup.js" type="text/javascript"></script>
<script src="./assembly/assemblerControl/processing.js" type="text/javascript"></script>
<script src="./assembly/assemblerControl/serialMonitor.js" type="text/javascript"></script>
<script type="text/javascript" src="./assembly/assemblerControl/bootstrap-multiselect.js"></script>
<!-- code -->
<script src="./globals.js"></script> <!-- event handling and GLOBALS,UTILS -->
<script src="./threejs/grid.js"></script><!-- threejs visualization -->
<script src="./assembly/assembly.js"></script><!-- robot assembly -->
<script src="./assembly/replay.js"></script><!-- assembly and timestep handling -->
<script src="./graph/graph.js"></script><!-- graph flow visualization-->
<script src="./json/json.js"></script><!-- json -->
<script src="./app.js"></script><!-- threejs visualization -->
<!-- windows control -->
<script>
var i = 0;
$('.dragbar').mousedown(function(e){
e.preventDefault();
$(document).mousemove(function(e){
// $('#position').html(e.pageX +', '+ e.pageY);
$('#threejs').css("width",e.pageX+2);
$('#simulation').css("width",e.pageX+2);
$('#graph').css("left",e.pageX+2);
$('#json').css("left",e.pageX+2);
$('.footer1').css("width",e.pageX+2);
$('.footer2').css("left",e.pageX+2);
})
// onWindowResize();//todo change location
});
$('.dragbar1').mousedown(function(e){
e.preventDefault();
// $('#mousestatus').html("mousedown" + i++);
$(document).mousemove(function(e){
$('#graph').css("height",e.pageY+2);
$('#json').css("top",e.pageY+2);
}) });
$('.dragbar2').mousedown(function(e){
e.preventDefault();
// $('#mousestatus').html("mousedown" + i++);
$(document).mousemove(function(e){
$('#threejs').css("height",e.pageY+2);
$('#simulation').css("top",e.pageY+2);
})
// onWindowResize();//todo change location
});
$(document).mouseup(function(e){
$(document).unbind('mousemove');
});
</script>
</html>