OpenBuilds-CONTROL/app/index.html

1702 wiersze
102 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenBuilds CONTROL</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="metro4:init" content="true">
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="lib/metro4/css/metro-all.min.css" />
<!-- <link rel="stylesheet" href="lib/iconpicker/css/fontawesome-iconpicker.min.css" /> -->
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/buttons.css" />
<link rel="stylesheet" href="css/probev2.css" />
<link rel="stylesheet" href="/lib/furcanIconPicker/iconpicker-1.5.0.css" />
</head>
<body>
<div class="pos-fixed pos-center" id="splash">
<img src="splashicon.png" style="display:block; margin:auto;">
<br>Starting&nbsp;OpenBuilds&nbsp;CONTROL...
</div>
<div class="window" style="height: 100vh; overflow-y: hidden;">
<div id="windowtitlebar" class="window-caption bg-openbuilds" style="-webkit-app-region: drag;">
<!-- <span class="icon mif-cog"></span> -->
<span class="icon"><img src="icon-transparent.png" /></span>
<span class="title" id="windowtitle">OpenBuilds CONTROL</span>
<div class="buttons" style="-webkit-app-region: no-drag">
<span class="btn-min" onclick="socket.emit('minimize')"></span>
<span data-cls-hint="bg-light fg-dark drop-shadow" class="btn-close" onclick="socket.emit('minimisetotray')"></span>
</div>
</div>
<div class="window-content" style="height: 100%; overflow: hidden !important;">
<nav data-role="ribbonmenu" class="mt-1">
<ul class="tabs-holder">
<li><a id="controlTab" href="#section-two" onclick="manualcontrolPanel();"><i class="fas fa-fw fa-play"></i> Control</a></li>
<li id="grblSettings" style="display: none;"><a id="grblTab" href="#section-grbl" onclick="grblPanel();"><i class="fas fa-fw fa-sliders-h"></i> Grbl Settings</a></li>
<li><a href="#section-troubleshooting" id="troubleshootingTab" onclick="troubleshootingPanel();"><i class="fas fa-fw fa-file-medical-alt"></i> Troubleshooting</a></li>
</ul>
<div class="content-holder">
<div class="section" id="section-grbl">
<div class="group">
<button class="ribbon-button disabled" onclick="grblSaveSettings();" id="saveBtn" disabled>
<span class="icon">
<span class="fa-layers fa-fw">
<i id="saveBtnIcon" class="fas fa-save fg-gray" data-fa-transform="grow-8"></i>
<i id="grblSettingsBadge" class="fas fa-exclamation-circle fg-red" data-fa-transform="shrink-4 right-10 up-10" style="display: none;"></i>
</span>
</span>
<span class="caption">Save<br> to Firmware</span>
</button>
<button class="ribbon-button" onclick="backupGrblSettings();">
<span class="icon">
<i class="fas fa-download"></i>
</span>
<span class="caption">Backup<br>Settings</span>
<span class="badge bg-green fg-white">New!</span>
</button>
<span class="title">Grbl Settings</span>
</div>
<div class="group">
<div class="ribbon-group" style="width: 90px;">
<button class="ribbon-icon-button" onclick="sendGcode(String.fromCharCode(0x18))">
<span class="icon">
<span class="mif-loop"></span>
</span>
<span class="caption">Restart</span>
</button>
<button class="ribbon-icon-button" onclick="sendGcode('$X')">
<span class="icon">
<span class="mif-unlock"></span>
</span>
<span class="caption">Unlock</span>
</button>
<button class="ribbon-icon-button" onclick="refreshGrblSettings();">
<span class="icon">
<i class="fas fa-sync-alt"></i>
</span>
<span class="caption">Refresh</span>
</button>
</div>
<span class="title">Grbl</span>
</div>
<div class="group">
<div class="ribbon-group">
<button class="ribbon-icon-button" onclick="clearSettings();">
<span class="icon">
<i class="fas fa-sliders-h"></i>
</span>
<span class="caption">Reset&nbsp;Settings</span>
</button><br>
<button class="ribbon-icon-button" onclick="clearWCO();">
<span class="icon">
<i class="fas fa-layer-group"></i>
</span>
<span class="caption">Reset&nbsp;WCOs</span>
</button><br>
<button class="ribbon-icon-button" onclick="clearEEPROM();">
<span class="icon">
<i class="fas fa-microchip"></i>
</span>
<span class="caption">Reset&nbsp;EEPROM</span>
</button>
</div>
<span class="title">Firmware Reset Defaults</span>
</div>
<div class="group estop">
<button class="ribbon-button" onclick="socket.emit('clearAlarm', 2)">
<span class="icon">
<span class="fa-layers" data-toggle="tooltip" data-placement="bottom" title="Flashes red when machine has entered ALARM state, click Clear Alarm button">
<i id="navbellBtn3" class="fas fa-bell fg-red" style="display: none;"></i>
<i class="far fa-bell"></i>
</span>
</span>
<span class="caption">Unlock<br>Alarm</span>
</button>
<button class="ribbon-button" onclick="socket.emit('stop', { stop: false, jog: false, abort: true})">
<span class="icon">
<span class="fa-layers fa-fw">
<i class="fas fa-circle fg-red" data-fa-transform="grow-8"></i>
<i class="fa-inverse far fa-hand-paper" data-fa-transform="grow-1 left-0.5"></i>
</span>
</span>
<span class="caption">Abort</span>
</button>
<span class="title">E-Stop</span>
</div>
</div>
<div class="section" id="section-two">
<div class="group">
<div class="form-group">
<form class="form">
<select data-prepend="&nbsp;<i class='fab fa-usb'></i>" class="success" data-role="select" data-filter="false" id="portUSB" disabled>
<option value="">Waiting for USB</option>
</select>
<button class="button small success float-right" onclick="selectPort()" id="connectBtn" type="button" style="margin: 5px;" disabled>Connect</button>
<button class="button alert" style="display:none;" onclick="closePort()" id="disconnectBtn" type="button" style="margin: 5px;">Disconnect</button>
<button class="button small secondary disabled" disabled style="display:none;" id="flashBtn" type="button" style="margin: 5px;">please wait...</button>
<div class="ribbon-group" id="grblButtons">
<hr>
<button class="ribbon-icon-button" onclick="sendGcode(String.fromCharCode(0x18))">
<span class="icon">
<span class="mif-loop"></span>
</span>
<span class="caption">Restart Grbl</span>
</button>
</div>
</form>
</div>
<span class="title">Machine Interface</span>
</div>
<div class="group">
<div>
<button id="openGcodeBtn" class="ribbon-button dropdown-toggle" title="Open a GCODE file">
<span class="icon">
<span class="far fa-folder-open fg-amber"></span>
</span>
<span class="caption">Open<br>G-CODE</span>
</button>
<ul class="ribbon-dropdown" data-role="dropdown" data-duration="100">
<li class="btn-file"><a href="#"><input class="btn-file" id="file" type="file" accept=".gcode, .gc, .tap, .nc, .cnc" /><i class="far fa-folder-open fa-fw"></i> Open GCODE from File (*.gcode, *.gc, *.tap, *.nc, *.cnc)</a></li>
<li class=""><a href="#" onclick="socket.emit('opencam', true);"><i class="fas fa-link fa-fw"></i> Open browser to https://cam.openbuilds.com</a></li>
</ul>
</div>
<button id="runBtn" class="ribbon-button" onclick="socket.emit('runJob', {data: editor.getValue(), isJob: true, fileName : loadedFileName});" title="Run a Job">
<span class="icon">
<i class="fas fa-play"></i>
</span>
<span class="caption">Run<br>Job</span>
</button>
<div>
<button id="runToolsBtn" class="ribbon-button dropdown-toggle" title="Run a Job with Toolchanges">
<span class="icon">
<i class="fas fa-play"></i>
</span>
<span class="caption">Run<br>Job</span>
</button>
<ul class="ribbon-dropdown" data-role="dropdown" data-duration="100" id="toolChangesMenu">
<li class=""><a href="#" onclick="socket.emit('opencam', true);"><i class="fas fa-link fa-fw"></i> Open browser to https://cam.openbuilds.com</a></li>
</ul>
</div>
<button id="resumeBtn" class="ribbon-button" onclick="socket.emit('resume', true)">
<span class="icon">
<i class="fas fa-play"></i>
</span>
<span class="caption">Resume<br>Job</span>
</button>
<button id="pauseBtn" class="ribbon-button" onclick="socket.emit('pause', true)">
<span class="icon">
<i class="fas fa-pause"></i>
</span>
<span class="caption">Pause<br>Job</span>
</button>
<button id="stopBtn" class="ribbon-button" onclick="socket.emit('stop', { stop: true, jog: false, abort: false})">
<span class="icon">
<i class="fas fa-stop"></i>
</span>
<span class="caption">Stop<br>Job</span>
</button>
<button id="grblProbeMenu" class="ribbon-button" onclick="openProbeDialog();" disabled>
<span class="icon">
<span class="fa-layers fa-fw">
<i class="fas fa-podcast fa-rotate-180"></i>
</span>
</span>
<span class="caption grblmode">Probe</span>
<span class="badge bg-green fg-white">New!</span>
</button>
<button id="chkSize" class="ribbon-button">
<span class="icon">
<i class="far fa-square"></i>
</span>
<span class="caption">Check<br>Size</span>
</button>
<div>
<button id="toolBtn" class="ribbon-button dropdown-toggle">
<span class="icon">
<span class="fa-layers fa-fw">
<i class="fas fa-bookmark" data-fa-transform="rotate-180"></i>
<i class="fas fa-screwdriver" data-fa-transform="rotate-135 down-3"></i>
<i class="fas fa-check fg-green" data-fa-transform="down-3"></i>
</span>
</span>
<span class="caption">Tool<br>On</span>
</button>
<ul class="ribbon-dropdown grblmode" data-role="dropdown" data-duration="100">
<li><a class="grblmode" href="#" onclick="sendGcode('M3 S'+parseInt(grblParams.$30).toFixed(0))">Router On (M3 S<span class="ToolOnS100">1000</span>)</a></li>
<li>
<a href="#" class="dropdown-toggle">Variable Speed Spindle On (M3 Sxxx)</a>
<ul class="ribbon-dropdown" data-role="dropdown">
<li onclick="sendGcode('M3 S'+(parseInt(grblParams.$30) * 0.05).toFixed(0)+'\n G1F1000')"><a href="#">Spindle On 5% RPM (M3 S<span class="ToolOnS5">50</span>)</a></li>
<li onclick="sendGcode('M3 S'+(parseInt(grblParams.$30) * 0.1).toFixed(0)+'\n G1F1000')"><a href="#">Spindle On 10% RPM (M3 S<span class="ToolOnS10">100</span>)</a></li>
<li onclick="sendGcode('M3 S'+(parseInt(grblParams.$30) * 0.25).toFixed(0)+'\n G1F1000')"><a href="#">Spindle On 25% RPM (M3 S<span class="ToolOnS25">250</span>)</a></li>
<li onclick="sendGcode('M3 S'+(parseInt(grblParams.$30) * 0.5).toFixed(0)+'\n G1F1000')"><a href="#">Spindle On 50% RPM (M3 S<span class="ToolOnS50">500</span>)</a></li>
<li onclick="sendGcode('M3 S'+(parseInt(grblParams.$30) * 0.75).toFixed(0)+'\n G1F1000')"><a href="#">Spindle On 75% RPM (M3 S<span class="ToolOnS75">750</span>)</a></li>
<li onclick="sendGcode('M3 S'+parseInt(grblParams.$30).toFixed(0)+'\n G1F1000')"><a href="#">Spindle On 100% RPM (M3 S<span class="ToolOnS100">1000</span>)</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle">Laser On (M3 Sxxx)</a>
<ul class="ribbon-dropdown" data-role="dropdown">
<li onclick="sendGcode('M3 S50\n G1F1000')"><a href="#">Laser On 5% Power (M3 S<span class="ToolOnS5">50</span>)</a></li>
<li onclick="sendGcode('M3 S100\n G1F1000')"><a href="#">Laser On 10% Power (M3 S<span class="ToolOnS10">100</span>)</a></li>
<li onclick="sendGcode('M3 S250\n G1F1000')"><a href="#">Laser On 25% Power (M3 S<span class="ToolOnS25">250</span>)</a></li>
<li onclick="sendGcode('M3 S500\n G1F1000')"><a href="#">Laser On 50% Power (M3 S<span class="ToolOnS50">500</span>)</a></li>
<li onclick="sendGcode('M3 S750\n G1F1000')"><a href="#">Laser On 75% Power (M3 S<span class="ToolOnS75">750</span>)</a></li>
<li onclick="sendGcode('M3 S1000\n G1F1000')"><a href="#">Laser On 100% Power (M3 S<span class="ToolOnS100">1000</span>)</a></li>
</ul>
</li>
<!-- <li class="divider"></li> -->
<li><a class="grblmode" href="#" onclick="sendGcode('M3 S'+parseInt(grblParams.$30).toFixed(0))">Plasma On (M3 S<span class="ToolOnS100">1000</span>)</a></li>
<li class="divider fg-lightGray"></li>
<li id="menuMisting" style="display: none;"><a class="grblmode" href="#" onclick="sendGcode('M7')">Misting On (M7)</a></li>
<li><a class="grblmode" href="#" onclick="sendGcode('M8')">Coolant On (M8)</a></li>
<!-- <li><a class="grblmode" href="#" onclick="sendGcode('M9 S1000')">Coolant Off (M9)</a></li> -->
</ul>
</div>
<div>
<button id="toolBtn2" class="ribbon-button dropdown-toggle">
<span class="icon">
<span class="fa-layers fa-fw">
<i class="fas fa-bookmark" data-fa-transform="rotate-180"></i>
<i class="fas fa-screwdriver" data-fa-transform="rotate-135 down-3"></i>
<i class="fas fa-times fg-red" data-fa-transform="down-3"></i>
</span>
</span>
<span class="caption">Tool<br>Off</span>
</button>
<ul class="ribbon-dropdown grblmode" data-role="dropdown" data-duration="100">
<li><a class="grblmode" href="#" onclick="sendGcode('M5')">Router / Spindle / Laser / Plasma Off (M5)</a></li>
<li class="divider fg-lightGray"></li>
<li><a class="grblmode" href="#" onclick="sendGcode('M9')">Coolant Off (M9)</a></li>
</ul>
</div>
<button id="homeBtn" class="ribbon-button">
<span class="icon">
<i class="fas fa-home"></i>
</span>
<span class="caption grblmode">Home<br>All</span>
</button>
<div>
<button id="" class="ribbon-button dropdown-toggle">
<span class="icon">
<span class="fa-layers fa-fw">
<i class="fas fa-hat-wizard"></i>
</span>
</span>
<span class="caption">Wizards<br>& Tools</span>
</button>
<ul class="ribbon-dropdown grblmode" data-role="dropdown" data-duration="100">
<li><a href="#" onclick="populateSurfaceToolForm();"><i class="fas fa-exchange-alt"></i> Surfacing / Flattening Wizard</a></li>
<li><a href="#" onclick="jogWidget();"><i class="fas fa-mobile-alt"></i> Mobile Jog Widget</a></li>
<li class="divider fg-lightGray"></li>
<li class="disabled grblCalibrationMenu" onclick="xstepscalibrate();"><a href="#"><i class="fas fa-wrench fa-fw"></i> Calibrate X-Axes Steps/mm</a></li>
<li class="disabled grblCalibrationMenu" onclick="ystepscalibrate();"><a href="#"><i class="fas fa-wrench fa-fw"></i> Calibrate Y-Axes Steps/mm</a></li>
<li class="disabled grblCalibrationMenu" onclick="zstepscalibrate();"><a href="#"><i class="fas fa-wrench fa-fw"></i> Calibrate Z-Axes Steps/mm</a></li>
<li class="disabled grblCalibrationMenu servo-active" onclick="servocalibrate();"><a href="#"><i class="fas fa-wrench fa-fw"></i> Calibrate Servo Pen Up/Down</a></li>
<li class="divider fg-lightGray"></li>
<li onclick="keyboardShortcutsEditor();"><a href="#"><i class="far fa-edit fa-fw"></i> Customize Shortcut Key Assignments</a></li>
<li class="divider fg-lightGray"></li>
<li onclick="populateGrblBuilderToolForm();"><a href="#"><i class="fas fa-microchip fa-fw"></i> Firmware Flashing Tool</a></li>
</ul>
</div>
<span class="title">Control</span>
</div>
<div class="group estop" style="width: 100px;">
<button class="ribbon-button" onclick="socket.emit('clearAlarm', 2)">
<span class="icon">
<span class="fa-layers" data-toggle="tooltip" data-placement="bottom" title="Flashes red when machine has entered ALARM state, click Clear Alarm button">
<i id="navbellBtn2" class="fas fa-bell fg-red" style="display: none;"></i>
<i class="far fa-bell"></i>
</span>
</span>
<span class="caption">Unlock<br>Alarm</span>
</button>
<button class="ribbon-button" onclick="socket.emit('stop', { stop: false, jog: false, abort: true})">
<span class="icon">
<span class="fa-layers fa-fw">
<i class="fas fa-circle fg-red" data-fa-transform="grow-8"></i>
<i class="fa-inverse far fa-hand-paper" data-fa-transform="grow-1 left-0.5"></i>
</span>
</span>
<span class="caption">Abort</span>
</button>
<span class="title">E-Stop</span>
</div>
<div class="group">
<button class="ribbon-button" onclick="socket.emit('openbuilds', true);">
<span class="icon">
<img src="img/openbuilds.svg">
</span>
<span class="caption">OpenBuilds.com</span>
</button>
<span class="title">Visit</span>
</div>
</div>
<div class="section" id="section-troubleshooting">
<div class="group">
<div>
<button id="diagbtn" class="ribbon-button dropdown-toggle">
<span class="icon">
<span class="fa-layers fa-fw">
<i class="fas fa-stethoscope"></i>
</span>
</span>
<span class="caption">Application<br>Diagnostics</span>
</button>
<ul class="ribbon-dropdown grblmode" data-role="dropdown" data-duration="100">
<li onclick="disable3Dviewer = !disable3Dviewer; saveDiagnostics(); location.reload();" id="disable3DviewerTick"><a href="#"><i class="mif-3d-rotation fa-fw"></i> Disable 3D Viewer System (For slower computers)</a></li>
<li class="divider"></li>
<li onclick="disable3Dcontrols = !disable3Dcontrols; saveDiagnostics(); location.reload();" id="disable3DcontrolsTick"><a href="#"><i class="mif-3d-rotation fa-fw"></i> Disable 3D Viewer Interactions</a></li>
<li onclick="disable3Dskybox = !disable3Dskybox; saveDiagnostics(); location.reload();" id="disable3DskyboxTick"><a href="#"><i class="mif-3d-rotation fa-fw"></i> Disable 3D Viewer Skybox/Fog</a></li>
<li onclick="disable3Drealtimepos = !disable3Drealtimepos; saveDiagnostics(); location.reload();" id="disable3DrealtimeposTick"><a href="#"><i class="mif-3d-rotation fa-fw"></i> Disable 3D Viewer Realtime Job Position
Indicator</a></li>
<li onclick="disable3Dgcodepreview = !disable3Dgcodepreview; saveDiagnostics(); location.reload();" id="disable3DgcodepreviewTick"><a href="#"><i class="mif-3d-rotation fa-fw"></i> Disable 3D Viewer GCODE Preview</a></li>
<li class="divider"></li>
<li onclick="disableSerialLog =! disableSerialLog; saveDiagnostics(); location.reload();" id="disableSerialLogTick"><a href="#"><i class="fas fa-fw fa-terminal"></i> Disable Serial Log</a></li>
<li onclick="disableDROupdates = !disableDROupdates; saveDiagnostics(); location.reload();" id="disableDROupdatesTick"><a href="#"><i class="fas fa-fw fa-list-ol"></i> Disable DRO/Status Updates</a></li>
</div>
<span class="title">Settings</span>
</div>
<div class="group" style="width: 100px;">
<button class="ribbon-button" onclick="socket.emit('clearAlarm', 2)">
<span class="icon">
<span class="fa-layers" data-toggle="tooltip" data-placement="bottom" title="Flashes red when machine has entered ALARM state, click Clear Alarm button">
<i id="navbellBtn1" class="fas fa-bell fg-red" style="display: none;"></i>
<i class="far fa-bell"></i>
</span>
</span>
<span class="caption">Unlock<br>Alarm</span>
</button>
<button class="ribbon-button" onclick="socket.emit('stop', { stop: false, jog: false, abort: true})">
<span class="icon">
<span class="fa-layers fa-fw">
<i class="fas fa-circle fg-red" data-fa-transform="grow-8"></i>
<i class="fa-inverse far fa-hand-paper" data-fa-transform="grow-1 left-0.5"></i>
</span>
</span>
<span class="caption">Abort</span>
</button>
<span class="title">E-Stop</span>
</div>
<div class="group">
<button class="ribbon-button" onclick="socket.emit('openforum', true);">
<span class="icon">
<span class="fa-layers fa-fw">
<i class="far fa-comment-alt" data-fa-transform=""></i>
<i class="fas fa-question" data-fa-transform="shrink-8 up-1"></i>
</span>
</span>
<span class="caption">OpenBuilds<br>Forum</span>
</button>
<span class="title">Support</span>
</div>
</div>
</div>
</nav>
<div id="manualControlPanel">
<center>
<div id="jogcontrols" class="mt-2">
<div class="row flex-justify-center flex-align-start" style="width: 100%; height: 100%;">
<div class="cell">
<nav data-role="ribbonmenu" class="mt-2">
<ul class="tabs-holder ml-17">
<li onclick="mmMode();"><a id="mmMode" href="#tab-mm">mm-mode</a></li>
<li onclick="inMode();"><a id="inMode" href="#tab-inch">inch-mode</a></li>
</ul>
</nav>
<table class="drotable mt-2">
<tr>
<td>
<button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 X0')" style="width: 60px;" data-role="ripple" data-ripple-color="#e21b1b">
<span class="fa-layers fa-fw">
<i class="fas fa-crosshairs fg-openbuilds" data-fa-transform="shrink-2 down-8 left-12"></i>
<span class="fa-layers-text fg-red" data-fa-transform="down-9 right-8" style="font-weight:900; font-family: Arial; font-size: 12px;">X</span>
<span class="fa-layers-text fg-openbuilds" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
</span>
</button>
</td>
<td>
<div class="dro" id="xPosDro">
<div class="float-left fg-red" data-fa-transform="right-15">
<span class="fa-layers fa-fw">
<span class="fa-layers-text fg-red" data-fa-transform="right-3">X</span>
<span class="fa-layers-text fg-red" data-fa-transform="left-18 rotate-270" style="font-family: Arial; font-size: 8px;">WORK</span>
<!-- <span class="fa-layers-text fg-red" data-fa-transform="left-20 rotate--90" style="font-family: Arial; font-size: 11px;">work</span> -->
</span>
</div>
<div class="float-right fg-red" id="xPos" data-editable>0.000</div>
<input id="xPosInput" class="m-0 p-0 droInput float-right fg-red" data-editable="true" />
</div>
</td>
<td>
<div class="pos-relative">
<button class="button light jogbtn" style="width: 42px;"><i class="fas fa-caret-down fg-openbuilds"></i></button>
<ul class="d-menu context drop-shadow drop-right" data-role="dropdown">
<li><a href="#" onclick="sendGcode( 'G0 X0')"><span class="fas fa-chart-line fg-red icon"></span>Goto X0 (Work Coord) (G0 X0)</a></li>
<li id="gotoXzeroMpos"><a href="#"><span class="fas fa-chart-line fg-red icon"></span>Goto X<span class="PullOffMPos">0</span> (Machine Coord) (G53 G0 X0)</a></li>
<li class="divider"></li>
<li class="needsXYZProbe"><a href="#" onclick="openProbeXDialog()"><span class="fas fa-podcast fa-rotate-180 fg-red icon"></span>Probe X-Zero Wizard <span class="badge inline bg-red fg-white">New!</span></a></li>
<li class="needsXYZProbe"><a href="#" onclick="openProbeDialog()"><span class="fas fa-podcast fa-rotate-180 fg-red icon"></span>Probe XYZ-Zero Wizard <span class="badge inline bg-red fg-white">New!</span></a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 Y0')" style="width: 60px;" data-role="ripple" data-ripple-color="#5de21b">
<span class="fa-layers fa-fw">
<i class="fas fa-crosshairs fg-openbuilds" data-fa-transform="shrink-2 down-8 left-12"></i>
<span class="fa-layers-text fg-green" data-fa-transform="down-9 right-8" style="font-weight:900; font-family: Arial; font-size: 12px;">Y</span>
<span class="fa-layers-text fg-openbuilds" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
</span>
</button>
</td>
<td>
<div class="dro" id="yPosDro">
<div class="float-left fg-green">
<span class="fa-layers fa-fw">
<span class="fa-layers-text fg-green" data-fa-transform="right-3">Y</span>
<span class="fa-layers-text fg-green" data-fa-transform="left-18 rotate-270" style="font-family: Arial; font-size: 8px;">WORK</span>
</span>
</div>
<div class="float-right fg-green" id="yPos" data-editable>0.000</div>
<input id="yPosInput" class="m-0 p-0 droInput float-right fg-green" data-editable="true" />
</div>
</td>
<td>
<div class="pos-relative">
<button class="button light jogbtn" style="width: 42px;"><i class="fas fa-caret-down fg-openbuilds"></i></button>
<ul class="d-menu context drop-shadow drop-right" data-role="dropdown">
<li><a href="#" onclick="sendGcode( 'G0 Y0')"><span class="fas fa-chart-line fg-green icon"></span>Goto Y0 (Work Coord) (G0 Y0)</a></li>
<li id="gotoYzeroMpos"><a href="#"><span class="fas fa-chart-line fg-green icon"></span>Goto Y<span class="PullOffMPos">0</span> (Machine Coord) (G53 G0 Y0)</a></li>
<li class="divider"></li>
<li class="needsXYZProbe"><a href="#" onclick="openProbeYDialog()"><span class="fas fa-podcast fa-rotate-180 fg-green icon"></span>Probe Y-Zero Wizard <span class="badge inline bg-red fg-white">New!</span></a></li>
<li class="needsXYZProbe"><a href="#" onclick="openProbeDialog()"><span class="fas fa-podcast fa-rotate-180 fg-green icon"></span>Probe XYZ-Zero Wizard <span class="badge inline bg-red fg-white">New!</span></a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 Z0')" style="width: 60px;" data-role="ripple" data-ripple-color="#1ba1e2">
<span class="fa-layers fa-fw">
<i class="fas fa-crosshairs fg-openbuilds" data-fa-transform="shrink-2 down-8 left-12"></i>
<span class="fa-layers-text fg-blue" data-fa-transform="down-9 right-8" style="font-weight:900; font-family: Arial; font-size: 12px;">Z</span>
<span class="fa-layers-text fg-openbuilds" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
</span>
</button>
</td>
<td>
<div class="dro" id="zPosDro">
<div class="float-left fg-blue">
<span class="fa-layers fa-fw">
<span class="fa-layers-text fg-blue" data-fa-transform="right-3">Z</span>
<span class="fa-layers-text fg-blue" data-fa-transform="left-18 rotate-270" style="font-family: Arial; font-size: 8px;">WORK</span>
</span>
</div>
<div class="float-right fg-blue" id="zPos" data-editable>0.000</div>
<input id="zPosInput" class="m-0 p-0 droInput float-right fg-blue" data-editable="true" />
</div>
</td>
<td>
<div class="pos-relative">
<button class="button light jogbtn" style="width: 42px;"><i class="fas fa-caret-down fg-openbuilds"></i></button>
<ul class="d-menu context drop-shadow drop-right" data-role="dropdown">
<li><a href="#" onclick="sendGcode( 'G0 Z0')"><span class="fas fa-chart-line fg-blue icon"></span>Goto Z0 (Work Coord) (G0 Z0)</a></li>
<li id="gotoZzeroMpos"><a href="#"><span class="fas fa-chart-line fg-blue icon"></span>Goto Z<span class="PullOffMPos">0</span> (Machine Coord) (G53 G0 Z0)</a></li>
<li class="divider"></li>
<!-- <li><a href="#" onclick="z0probe()()"><span class="fas fa-podcast fa-rotate-180 fg-blue icon"></span>Probe Z-Zero Wizard</a></li> -->
<li><a href="#" onclick="openProbeZDialog()"><span class="fas fa-podcast fa-rotate-180 fg-blue icon"></span>Probe Z-Zero Wizard <span class="badge inline bg-red fg-white">New!</span></a></li>
<li class="needsXYZProbe"><a href="#" onclick="openProbeDialog()"><span class="fas fa-podcast fa-rotate-180 fg-blue icon"></span>Probe XYZ-Zero Wizard <span class="badge inline bg-red fg-white">New!</span></a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 X0 Y0 Z0')" style="width: 60px;" data-role="ripple">
<span class="fa-layers fa-fw">
<i class="fas fa-crosshairs fg-openbuilds" data-fa-transform="shrink-2 down-8 left-18"></i>
<span class="fa-layers-text fg-red" data-fa-transform="down-9 right-2" style="font-weight:900; font-family: Arial; font-size: 12px;">X</span>
<span class="fa-layers-text fg-green" data-fa-transform="down-9 right-12" style="font-weight:900; font-family: Arial; font-size: 12px;">Y</span>
<span class="fa-layers-text fg-blue" data-fa-transform="down-9 right-22" style="font-weight:900; font-family: Arial; font-size: 12px;">Z</span>
<span class="fa-layers-text fg-openbuilds" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
</span>
</button>
</td>
<td>
<div class="pos-relative">
<button class="button light jogbtn" style="width: 161px;" data-role="ripple">
<span class="fa-layers fa-fw">
<i class="fas fa-chart-line fg-openbuilds" data-fa-transform="shrink-2 down-8 left-12"></i>
<i class="fas fa-caret-down fg-openbuilds" data-fa-transform="shrink-2 right-70"></i>
<span class="fa-layers-text fg-red" data-fa-transform="down-9 right-8" style="font-weight:900; font-family: Arial; font-size: 12px;">X</span>
<span class="fa-layers-text fg-green" data-fa-transform="down-9 right-19" style="font-weight:900; font-family: Arial; font-size: 12px;">Y</span>
<span class="fa-layers-text fg-blue" data-fa-transform="down-9 right-29" style="font-weight:900; font-family: Arial; font-size: 12px;">Z</span>
<span class="fa-layers-text fg-openbuilds" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">gotozero</span>
</span>
</button>
<ul class="d-menu context drop-shadow" data-role="dropdown">
<li id="gotozeroWPos">
<a href="#"><span class="fas fa-chart-line fg-openbuilds icon"></span>GOTOZERO (Work Coord) (G0 Z5, G0 X0 Y0, G0 Z0) (Retract Z to Work Coord Z5)
</a>
</li>
<li id="gotozeroZmPosXYwPos">
<a href="#"><span class="fas fa-chart-line fg-openbuilds icon"></span>GOTOZERO (Z Machine Coord, XY Work Coord) (G53 G0 Z<span class="PullOffMPos">0</span>, G0 X0 Y0, G0 Z0) (Retract Z to
Machine Coord)
</a>
</li>
<li id="gotozeroMPos">
<a href="#"><span class="fas fa-chart-line fg-openbuilds icon"></span>GOTOZERO (Machine Coord) (G53 G0 Z<span class="PullOffMPos">0</span>, G53 G0 X<span class="PullOffMPos">0</span> Y<span class="PullOffMPos">0</span>)
</a>
</li>
</ul>
</div>
</td>
<td>
<div class="pos-relative">
<button class="button light jogbtn" style="width: 42px;"></i>
<span class="fa-layers fa-fw">
<i class="fas fa-layer-group fg-openbuilds" data-fa-transform="shrink-2 up-3"></i>
<i class="fas fa-caret-down fg-openbuilds" data-fa-transform="down-8"></i>
<!-- <span class="fa-layers-text fg-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">gotozero</span> -->
</span>
</button>
<ul class="d-menu context drop-shadow drop-right" data-role="dropdown">
<li><a href="#" onclick="sendGcode('G28')"><span class="fas fa-layer-group fg-grayBlue icon"></span>Go to Pre-Defined Position (G28)</a></li>
<li><a href="#" onclick="sendGcode('G28.1')"><span class="fas fa-tasks fg-grayBlue icon"></span>Set Pre-Defined Position (G28.1)</a></li>
<li class="divider"></li>
<li><a href="#" onclick="sendGcode('G30')"><span class="fas fa-layer-group fg-grayBlue icon"></span>Go to Pre-Defined Position (G30)</a></li>
<li><a href="#" onclick="sendGcode('G30.1')"><span class="fas fa-tasks fg-grayBlue icon"></span>Set Pre-Defined Position (G30.1)</a></li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<div class="cell border-left bd-lightGray ">
<table class="jogtable">
<tr>
<td>
</td>
<td>
<button class="button light square large jogbtn yP" id="yP" data-role="ripple" data-ripple-color="#5de21b">
<span class="fa-layers fa-fw">
<i class="fas fa-arrow-up fg-green" data-fa-transform="shrink-2 down-8.5"></i>
<span class="fa-layers-text fg-green" data-fa-transform="shrink-5 up-8" style="font-weight:600">Y+</span>
</span>
</button>
</td>
<td>
</td>
<td>
<button class="button light square large jogbtn zP" id="zP" data-role="ripple" data-ripple-color="#1ba1e2">
<span class="fa-layers fa-fw">
<i class="fas fa-arrow-up fg-blue" data-fa-transform="shrink-2 down-8.5"></i>
<span class="fa-layers-text fg-blue" data-fa-transform="shrink-5 up-8" style="font-weight:600">Z+</span>
</span>
</button>
</td>
<td class="servo-active" style="display: none;">
<button class="button light square large jogbtn pP" id="pP" data-role="ripple" data-ripple-color="#1ba1e2">
<span class="fa-layers fa-fw">
<i class="fas fa-pen fg-darkBlue" data-fa-transform="shrink-2 down-8.5"></i>
<i class="fas fa-ban fg-red" data-fa-transform="shrink-0.5 down-8.5"></i>
<span class="fa-layers-text fg-darkBlue" data-fa-transform="shrink-10 up-12" style="font-weight:600">PEN</span>
<span class="fa-layers-text fg-darkBlue" data-fa-transform="shrink-10 up-6" style="font-weight:600">UP</span>
</span>
</button>
</td>
</tr>
<tr>
<td>
<button class="button light square large jogbtn xM" id="xM" data-role="ripple" data-ripple-color="#e21b1b">
<span class="fa-layers fa-fw">
<i class="fas fa-arrow-left fg-red" data-fa-transform="shrink-2 down-8.5"></i>
<span class="fa-layers-text fg-red" data-fa-transform="shrink-5 up-8" style="font-weight:600">X-</span>
</span>
</button>
</td>
<td>
<button class="button light square large jogbtn yM" id="yM" data-role="ripple" data-ripple-color="#5de21b">
<span class="fa-layers fa-fw">
<i class="fas fa-arrow-down fg-green" data-fa-transform="shrink-2 down-8.5"></i>
<span class="fa-layers-text fg-green" data-fa-transform="shrink-5 up-8" style="font-weight:600">Y-</span>
</span>
</button>
</td>
<td>
<button class="button light square large jogbtn xP" id="xP" data-role="ripple" data-ripple-color="#e21b1b">
<span class="fa-layers fa-fw">
<i class="fas fa-arrow-right fg-red" data-fa-transform="shrink-2 down-8.5"></i>
<span class="fa-layers-text fg-red" data-fa-transform="shrink-5 up-8" style="font-weight:600">X+</span>
</span>
</button>
</td>
<td>
<button class="button light square large jogbtn zM" id="zM" data-role="ripple" data-ripple-color="#1ba1e2">
<span class="fa-layers fa-fw">
<i class="fas fa-arrow-down fg-blue" data-fa-transform="shrink-2 down-8.5"></i>
<span class="fa-layers-text fg-blue" data-fa-transform="shrink-5 up-8" style="font-weight:600">Z-</span>
</span>
</button>
</td>
<td class="servo-active" style="display: none;">
<button class="button light square large jogbtn pM" id="pM" data-role="ripple" data-ripple-color="#1ba1e2">
<span class="fa-layers fa-fw">
<i class="fas fa-pen fg-darkBlue" data-fa-transform="shrink-2 down-8.5"></i>
<span class="fa-layers-text fg-darkBlue" data-fa-transform="shrink-10 up-12" style="font-weight:600">PEN</span>
<span class="fa-layers-text fg-darkBlue" data-fa-transform="shrink-10 up-6" style="font-weight:600">DOWN</span>
</span>
</button>
</td>
</tr>
<tr>
<td colspan='5'>
<table style="width: 100%;">
<tr>
<td><span class="text-small">Incremental Jog</span>
</td>
<td class="pb-1">
<label class="toggle">
<input type="checkbox" id="jogTypeContinuous" />
<div>app-notifition</div>
</label>
</td>
<td><span class="text-small">Continuous Jog</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<button class="button light jogbtn metricbtn distbtn" id="dist01" style="width: 100%; height: 30px; line-height: 28px;">
<span class=" fa-layers fa-fw">
<span id="dist01label" class="fa-layers-text fg-gray jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">0.1mm</span>
</span>
</button>
</td>
<td>
<button class="button light jogbtn metricbtn distbtn" id="dist1" style="width: 100%; height: 30px; line-height: 28px;">
<span class=" fa-layers fa-fw">
<span id="dist1label" class="fa-layers-text fg-gray jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">1mm</span>
</span>
</button>
</td>
<td>
<button class="button light jogbtn distbtn metricbtn bd-openbuilds" id="dist10" style="width: 100%; height: 30px; line-height: 28px;">
<span class=" fa-layers fa-fw">
<span id="dist10label" class="fa-layers-text fg-openbuilds jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">10mm</span>
</span>
</button>
</td>
<td>
<button class="button light jogbtn distbtn metricbtn" id="dist100" style="width: 100%; height: 30px; line-height: 28px;">
<span class=" fa-layers fa-fw">
<span id="dist100label" class="fa-layers-text fg-gray jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">100mm</span>
</span>
</button>
</td>
</tr>
<tr>
<td colspan='5'>
<div id="jogratemmdiv">
<input id="jograte" type="number" min="100" max="10000" step="500" placeholder="5000" data-role="input" data-prepend="Jog:" data-append="mm/min" data-clear-button="false" value="5000" style="text-align: right;"
data-editable="true" />
</div>
<div id="jograteinchdiv">
<input id="jograteinch" type="number" min="1" max="5000" step="10" placeholder="196" data-role="input" data-prepend="Jog:" data-append="in/min" data-clear-button="false" value="196" style="text-align: right;"
data-editable="true" />
</div>
</td>
</tr>
</table>
</div>
<div class="cell border-left bd-lightGray" id="frocell">
<button class="button light mini mb-1" onclick="feedOverride(100);">reset</button>
<input id="fro" data-on-stop="feedOverride(arguments[0])" data-role="slider" data-accuracy="5" data-vertical="true" data-size="190" data-accuracy="1" data-min="10" data-max="200" data-value="100" data-hint="true"
data-hint-always="true" data-hint-position="bottom" data-hint-mask="Feed: $1%" data-cls-hint="bg-light
fg-dark shadow-1" data-cls-complete="bg-openbuilds">
</div>
<div class="cell border-left bd-lightGray" id="trocell">
<button class="button light mini mb-1" onclick="spindleOverride(100);">reset</button>
<input id="tro" data-on-stop="spindleOverride(arguments[0])" data-role="slider" data-accuracy="5" data-vertical="true" data-size="190" data-accuracy="1" data-min="10" data-max="200" data-value="100" data-hint="true"
data-hint-always="true" data-hint-position="bottom" data-hint-mask="Tool: $1%" data-cls-hint="bg-light
fg-dark shadow-1" data-cls-complete="bg-openbuilds">
</div>
</div>
</div>
<div id="controlLogs" class="mt-0">
<nav data-role="ribbonmenu">
<ul class="tabs-holder">
<li><a href="#tab-three" id="gcodeviewertab" onclick="fixRenderSize();"><i class="mif-3d-rotation fa-fw" id="3dviewicon"></i><span id="3dviewlabel"> 3D View</span></a></li>
<li><a href="#tab-one" id="consoletab"><i class="fas fa-fw fa-terminal"></i> Serial Console</a></li>
<li><a href="#tab-four" id="macrostab"><i class="fas fa-th fa-fw"></i> Macros</a></li>
<li><a href="#tab-two" id="gcodeeditortab"><i class="far fa-fw fa-edit"></i> GCODE Editor</a></li>
</ul>
<div class="content-holder">
<div class="section" id="tab-one">
<div id="console"></div>
<div class="fixed-bottom m-3 mb-9">
<form class="inline-form" id="commandform" autocomplete="off">
<input title="Tip: Press F6 anywhere on the CONTROL window to quickly jump to this input" data-prepend="&nbsp;<i class='fas fa-terminal'></i>" data-role="input" data-clear-button="false" data-role="input" id="command"
type="text" autocomplete="on" class=" dark needs-connection" style="width: calc(100vw - 170px);" data-editable="true" />
<button id="sendCommand" class="button dark needs-connection" type="button" title="Execute command">
<i class="fa fa-play" style="margin-right: 10px;"></i> Send
</button>
<button class="button dark emptylog" type="button" onclick="$('#console').empty();" title="Clear the Log screen">
<i class="fa fa-trash"></i>
</button>
</form>
</div>
</div>
<div class="section" id="tab-two">
<div id="editor"></div>
<div class="fixed-bottom m-3 mb-9">
<!-- <form class="inline-form"> -->
<button title="Update the 3D View with the edited GCODE" class="button success" onclick="parseGcodeInWebWorker(editor.getValue())"><i class="mif-3d-rotation fa-fw"></i> Update 3D View</button>&nbsp;
<button title="Save GCODE to file" class="button primary" onclick="saveGcode();"><i class="fa fa-save icon"></i></button>&nbsp;
<button title="Find and Replace" class="button dark" onclick="editor.execCommand('replace')"><i class="fas fa-search"></i> Find/Replace</button>&nbsp;
<button title="Select All" class="button dark" onclick="editor.execCommand('selectall')"><i class="far fa-check-square"></i> Select All</button>&nbsp;
<button title="Undo" class="button dark" onclick="editor.execCommand('undo')"><i class="fas fa-undo"></i> Undo</button>&nbsp;
<button title="Redo" class="button dark" onclick="editor.execCommand('redo')"><i class="fas fa-redo"></i> Redo</button>&nbsp;
<button title="Go to End" class="button dark" onclick="editor.execCommand('gotoend')"><i class="fas fa-chevron-down"></i></button>&nbsp;
<button title="Go to Start" class="button dark" onclick="editor.execCommand('gotostart')"><i class="fas fa-chevron-up"></i></button>&nbsp;
<button title="Clear Editor" class="button dark" onclick="editor.execCommand('selectall'); editor.execCommand('del'); parseGcodeInWebWorker(editor.getValue()); loadedFileName = ''; setWindowTitle()"><i class="fas fa-eraser"></i>
Clear</button>&nbsp;
<!-- </form> -->
</div>
</div>
<div class="section" id="tab-three">
<div id="renderArea"></div>
<div style="position: absolute; top: 10px; right:10px; z-index: 1; max-width: 100px; max-width: 100px;" id="overlayimg">
<!-- <img src="img/mch/acro55.png" style="max-width:100%; max-height:100%;">
<span style="position: absolute; top: 3px; right:3px; z-index: 1;" class="fas fa-cogs"></span> -->
</div>
<div class="fixed-bottom m-3 mb-9">
<button class="button dark" onclick="simSpeed();"><span class="icon"><span class="fas fa-tachometer-alt"></span></span><span class="caption"><span id="simspeedval">1</span>x</span>
</button>
<button id="runSimBtn" title="Run simulation" class="button dark" onclick="sim(0)"><i class="fas fa-fighter-jet"></i> Simulate</button>&nbsp;
<button id="stopSimBtn" style="display: none;" title="Stop Sim" class="button dark" onclick="simstop()"><i class="fas fa-stop"></i> Stop Sim</button>&nbsp;
<button id="resetViewBtn" title="Resets camera angle and zoom" class="button dark" onclick="resetView(object)"><i class="fas fa-stop"></i> Reset View</button>&nbsp;
</div>
<div id="conetext" style="position:absolute;top:0px;left:0px; padding: 0px; display:none;"></div>
</div>
<div class="section" id="tab-four">
<div id="macros"></div>
</div>
</div>
</nav>
</div>
<!-- End controlLogs -->
</center>
</div>
<div id="grblPanel" style="display: none;">
<div id="grblconfig"></div>
</div>
<div id="updatePanel" style="display: none;">
<div id="updateconsole">Click "Download Updates" above</div>
</div>
<div id="troubleshootingPanel" style="display: none;">
<div class="grid p-0 m-0">
<div class="row p-0 m-0">
<div class="cell p-0 m-0">
<div class="card">
<div class="card-header p-1 m-0">
<i class="fas fa-fw fa-bolt"></i>Inputs / Endstops
</div>
<div class="card-content">
<table class="table striped compact">
<thead>
<tr>
<th style="width: 40%;">PIN</th>
<th style="width: 60%;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>X-Limit</td>
<td><span class="tally alert pinstatus" id="xpin">NOCOMM</span></td>
</tr>
<tr>
<td>Y-Limit</td>
<td><span class="tally alert pinstatus" id="ypin">NOCOMM</span></td>
</tr>
<tr>
<td>Z-Limit</td>
<td><span class="tally alert pinstatus" id="zpin">NOCOMM</span></td>
</tr>
<tr>
<td>Probe</td>
<td><span class="tally alert pinstatus" id="prbpin">NOCOMM</span></td>
</tr>
<tr>
<td>Door Sensor</td>
<td><span class="tally alert pinstatus" id="doorpin">NOCOMM</span></td>
</tr>
<tr>
<td>Buttons</td>
<td>
<span class="tally alert pinstatus" id="startpin">NOCOMM</span>
<span class="tally alert pinstatus" id="holdpin">NOCOMM</span>
<span class="tally alert pinstatus" id="resetpin">NOCOMM</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<div class="card-header p-1 m-0">
<i class="fas fa-fw fa-tty"></i>Communications
</div>
<div class="card-content">
<table class="table striped compact">
<thead>
<tr>
<th style="width: 40%;">Value</th>
<th style="width: 60%;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Installed Version</td>
<td><span class="tally bg-openbuilds fg-white" id="driverver">NOCOMM</span></td>
</tr>
<tr>
<td>Backend Queue Blocked</td>
<td><span class="tally bg-openbuilds fg-white" id="commblocked">NOCOMM</span></td>
</tr>
<tr>
<td>Connection Status</td>
<td><span class="tally bg-openbuilds fg-white" id="commstatus">NOCOMM</span></td>
</tr>
<tr>
<td>Connected To</td>
<td><span class="tally bg-openbuilds fg-white" id="activeportstatus">NOCOMM</span></td>
</tr>
<tr>
<td>Serial Queue</td>
<td><span class="tally bg-openbuilds fg-white" id="drvqueue">NOCOMM</span></td>
</tr>
<tr>
<td>Websocket Status</td>
<td><span class="tally bg-openbuilds fg-white" id="websocketstatus">NOCOMM</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="cell p-0 m-0">
<div class="card">
<div class="card-header p-1 m-0">
<i class="fas fa-fw fa-microchip"></i>Firmware Parameters
</div>
<div class="card-content" style="height: calc(100vh - 680px); overflow-x: auto;">
<table class="table striped compact">
<thead>
<tr>
<th style="width: 80%;">Value</th>
<th style="width: 20%;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Variable Spindle</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enVariableSpindle">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Laser Mode Enabled ($32 Setting)</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enLaser">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Grbl-Servo Installed</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enServo">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Line Numbers Enabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enLineNumbers">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Mist Cooling Enabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enMisting">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">CoreXY Enabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enCoreXY">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Parking Motion Enabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enParking">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Homing Force Origin Enabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enHomingOrigin">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Single Axis Homing</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enSingleAxisHome">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Two Limit Switches on Axis Enabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enTwoLimits">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Allow Feed Override in Probe</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enFeedOVProbe">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Restore EEPROM $-settings Disabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enEepromSettingsDisable">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Restore EEPROM parameter Disabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enEepromParamsDisable">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Build Info Write Disabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enBuildInfoDisabled">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Force Sync on EEPROM write Disabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enForceSyncEeprom">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Force Sync on WCO Disabled</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enForceSyncWco">OFF</span></td>
</tr>
<tr>
<td class="pt-1 mt-0 pb-0 pt-0">Homing Init Lock</td>
<td class="pt-1 mt-0 pb-0 pt-0"><span class="tally alert" id="enHomingInitLock">OFF</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card" id="powerSettingsCard">
<div class="card-header p-1 m-0">
<i class="fas fa-fw fa-power-off"></i>Power Settings
</div>
<div class="card-content">
<table class="table striped compact">
<thead>
<tr>
<th style="width: 70%;">Setting</th>
<th style="width: 30%;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>USB Selective Suspend on AC Power</td>
<td><span class="tally alert powerstatus" id="selectivesuspendAC">NOCOMM</span></td>
</tr>
<tr>
<td>USB Selective Suspend on Battery Power</td>
<td><span class="tally alert powerstatus" id="selectivesuspendDC">NOCOMM</span></td>
</tr>
<tr>
<td colspan="2">We recommend USB Selective Suspend be Disabled to avoid USB issues</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card">
<div class="card-header p-1 m-0">
<i class="fas fa-fw fa-history"></i> Changelog
</div>
<div class="card-content" style="height: calc(100vh - 680px); overflow-x: auto;">
<div id="changelog" class="text-small"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom StatusBar -->
<div class="fixed-bottom">
<div class="row">
<div class="cell-3">
<div>
<span class="badge inline bg-grayBlue fg-white" style="width: 100%;">
<span class="fa-layers" data-toggle="tooltip" data-placement="bottom" title="Flashes red when machine has entered ALARM state, click Clear Alarm button">
<i id="navbell" class="fas fa-bell fg-red" style="display: none;"></i>
<i class="far fa-bell"></i>
</span>
<span id="timeRemaining"></span>
</span>
</div>
</div>
<div class="cell-3">
<div>
<span class="badge inline bg-grayBlue fg-white" id="connectStatus" style="width: 100%;">Not Connected</span>
</div>
</div>
<div class="cell-3">
<div>
<span class="badge inline bg-grayBlue fg-white" id="runStatus" style="width: 100%;">Not Connected</span>
</div>
</div>
<div class="cell-3">
<div>
<span class="badge inline bg-grayBlue fg-white" id="gcodesent" style="width: 100%;">Job Queue: 0</span>
</div>
</div>
</div>
<div class="row">
<div class="cell-12">
<div data-role="progress" id="progressbar" data-value="0"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Simulator Context Menu -->
<ul class="d-menu context" id="editorContextMenu" data-role="dropdown" data-toggle-element="#context_toggle">
<span id="dropdowncontent">
<li onclick="runSimFrom(editor.getSelectionRange().start.row + 1, false);"><a href="#"><i class="fas fa-fighter-jet icon"></i> Simulate from line <span class="linenumber"></span></a>
<li onclick="runSimFrom(editor.getSelectionRange().start.row + 1, true);"><a href="#"><i class="fas fa-fighter-jet icon"></i> Simulate only line <span class="linenumber"></span></a>
</li>
</span>
</ul>
<!-- -->
<div id="hiddendivs" style="display:none;">
<div class="dialog dark" data-role="dialog" id="grblFlashDialog" data-width="60%" data-actions-align="right" data-overlay-click-close="true">
<div class="dialog-title"><i class="fas fa-microchip fa-fw"></i> Firmware Flashing Tool</div>
<div class="dialog-content" style="height: calc(100% - 100px);">
<p class="text-small mb-4">You can use this wizard to flash Firmware onto compatible controllers<br>Only use with care, or when instructed by Support</p>
<div class="row">
<div class="cell-md-4 mb-1">
Controller Type
</div>
<div class="cell-md-8 mb-1">
<select data-prepend="&nbsp;<i class='fas fa-microchip'></i>" data-role="select" data-filter="false" id="flashController" data-editable="true">
<option value="interface">OpenBuilds Interface</option>
<option value="uno" selected>OpenBuilds BlackBox 4X</option>
<option value="xprov4">Spark Concepts xPro v3/4</option>
<option value="uno">Arduino Uno</option>
<option value="nano">Arduino Nano</option>
</select>
</div>
</div>
<div class="row" id="flash-tool-interface-fw-row" style="display: none;">
<div class="cell-md-4 mb-1">
Firmware Version
</div>
<div class="cell-md-8 mb-1">
<select data-prepend="&nbsp;<i class='fas fa-cube'></i>" data-role="select" data-filter="false" id="interfaceFirmwareVer" data-editable="true">
<option value="online">Latest available version</option>
<option value="custom">Custom: firmware binary file</option>
</select>
</div>
</div>
<div class="row" id="flash-tool-machine-row">
<div class="cell-md-4 mb-1">
Machine Style
</div>
<div class="cell-md-8 mb-1">
<select data-prepend="&nbsp;<i class='fas fa-cube'></i>" data-role="select" data-filter="false" id="grblAxesCount" data-editable="true">
<option value="3axes">3 Axes</option>
<option value="2axes">2 Axes</option>
<option value="servo">2 Axes + RC Servo</option>
<option value="custom">Custom: firmware hex file</option>
</select>
</div>
</div>
<div class="row" id="flash-tool-door-row">
<div class="cell-md-4 mb-1">
Door Interlock
</div>
<div class="cell-md-8 mb-1">
<select data-role="select" data-prepend="&nbsp;<i class='fas fa-door-open'></i>" data-role="select" data-filter="false" id="grblDoorEnable" data-editable="true">
<option value="nodoor">Disable Door Interlock</option>
<option value="opendoor">Door Interlock (Normally Open Switch)</option>
<option value="closeddoor">Door Interlock (Normally Closed Switch)</option>
</select>
</div>
</div>
<div class="row">
<div class="cell-md-4 mb-1">
Port
</div>
<div class="cell-md-8 mb-1">
<select data-prepend="&nbsp;<i class='fab fa-usb'></i>" data-role="select" data-filter="false" id="portUSB2" disabled data-editable="true">
<option value="">Waiting for USB</option>
</select>
</div>
</div>
<div class="row" id="flash-tool-custom-row" style="display: none;">
<div class="cell-md-4 mb-1">
Firmware Image
</div>
<div class="cell-md-8 mb-1">
<form id="customFirmwareForm" enctype="multipart/form-data">
<button class="button alert shadow btn-file" action="#"><input class="btn-file" id="firmwareBin" type="file" accept=".bin, .hex" name="firmwareBin" /><i class="far fa-folder-open fa-fw"></i> Use custom firmware image</button>
<br>
<small id="customFirmwareSet"></small>
</form>
</div>
</div>
</div>
<div class="dialog-actions">
<button class="button success js-dialog-close" onclick="flashFirmwarefromWizard()">Flash</button>
<button class="button js-dialog-close">Cancel</button>
</div>
</div>
<div class="dialog dark" data-role="dialog" id="surfacingDialog" data-width="90%" data-actions-align="right" data-overlay-click-close="true">
<div class="dialog-title"><i class="fas fa-exchange-alt"></i> Flattening / Surfacing Tool</div>
<div class="dialog-content" style="max-height: calc(100vh - 100px);overflow-y: auto; overflow-x: hidden;">
<form>
<div class="row mb-2">
<div class="cell-sm-7">
<div class="row mb-2">
<label class="cell-sm-6">Router Bit Diameter</label>
<div class="cell-sm-6">
<input id="surfaceDiameter" type="number" data-role="input" data-append="mm" data-clear-button="false" value="22" data-editable="true">
<small class="text-muted">Diameter of your bit / endmill</small>
</div>
</div>
<div class="row mb-2">
<label class="cell-sm-6">Stepover</label>
<div class="cell-sm-6">
<input id="surfaceStepover" type="number" data-role="input" data-append="%" data-clear-button="false" value="40" data-editable="true">
<small class="text-muted">Stepover between passes </small>
</div>
</div>
<div class="row mb-2 border-bottom bd-lightGray">
<label class="cell-sm-6">Feedrate</label>
<div class="cell-sm-6">
<input id="surfaceFeedrate" type="number" maxlength="5" data-role="input" data-append="mm/min" data-clear-button="false" value="800" data-editable="true"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
<small class="text-muted">Cutting speed</small>
</div>
</div>
<div class="row mb-2">
<label class="cell-sm-6">Width<br> <small class="text-muted">X-Axis</small></label>
<div class="cell-sm-6">
<input id="surfaceX" type="number" data-role="input" data-append="mm" data-clear-button="false" value="200" data-editable="true">
</div>
</div>
<div class="row mb-2 border-bottom bd-lightGray">
<label class="cell-sm-6">Length<br> <small class="text-muted">Y-Axis</small></label>
<div class="cell-sm-6">
<input id="surfaceY" type="number" data-role="input" data-append="mm" data-clear-button="false" value="300" data-editable="true">
<small class="text-muted">Width and Length of the area to machine flat</small>
</div>
</div>
<div class="row mb-2 border-bottom bd-lightGray">
<label class="cell-sm-6">Skim Depth</label>
<div class="cell-sm-6">
<input id="surfaceDepth" type="number" data-role="input" data-append="mm" data-clear-button="false" value="2" data-editable="true">
<small class="text-muted">How much material to remove</small>
</div>
</div>
<div class="row mb-2 border-bottom bd-lightGray">
<label class="cell-sm-6">Spindle RPM</label>
<div class="cell-sm-6">
<input id="surfaceRPM" type="number" data-role="input" data-append="mm" data-clear-button="false" value="1000" data-editable="true">
<small class="text-muted">Spindle RPM for variable spindles</small>
</div>
</div>
</div>
<div class="cell-sm-5">
<small class="text-muted">NB: make sure your spindle is 100% perpendicular (trammed) to your bed, before running a Surfacing operation. Incorrectly trammed spindles will cause uneven machining of the surface, leading to pitting and
uneven surface finish
</small>
<hr>
<small class="text-muted">You can use the Surfacing Tool to
<ul class="text-muted">
<li>Prepare / flatten your spoilboard</li>
<li>Level off stock</li>
</ul></small>
<hr>
<center>
<img src="img/surfacing/wizard1.png" alt="diameter" border="0" style="max-width: calc(100% - 10px); ">
</center>
</div>
</div>
</form>
</div>
<div class="dialog-actions">
<button class="button success js-dialog-close" onclick="createSurfaceGcode()">Proceed</button>
<button class="button js-dialog-close">Cancel</button>
</div>
</div>
<div class="dialog dark" id="downloadUpdate" data-role="dialog" data-overlay-click-close="true" data-to-top="true">
<div class="dialog-title">Update Ready</div>
<div class="dialog-content">
Updated version <code><span id="availVersion">1.0.100</span></code> has finished downloading and is ready to be installed!<br> Note that proceeding will:
<ul>
<li>Stop any running jobs</li>
<li>Shut down this instance of OpenBuilds CONTROL</li>
<li>Launch the installer for the new version</li>
</ul>
<small>You may want to wait until your machine is idle, and it it's a convenient time for you to do this, before continuing</small>
<small id="changelogupdate"></small>
</div>
<div class="dialog-actions">
<button class="button js-dialog-close">Not right now (snooze for 1hr)</button>
<button class="button success js-dialog-close" onclick="socket.emit('applyUpdate', true)">OK, Proceed with Update</button>
</div>
</div>
<div class="dialog dark" data-overlay-click-close="true" data-role="dialog" id="jogWidgetDialog">
<div class="dialog-title"><i class="fas fa-mobile-alt"></i> Jog Widget</div>
<div class="dialog-content" style="max-height: calc(100vh - 200px);overflow-y: auto; overflow-x: hidden;">
<div class="row">
<div class="cell-4">
<img src="img/widget.png" />
</div>
<div class="cell-8">
<div class="row">
<div class="cell">
<center>
<small>You can use your mobile device as an handheld Jog interface. To get started, open a web-browser on your Mobile device and navigate to <br></small><span id="jogip">http://0.0.0.0:3000/jog.html<span><br><small> or scan the QR
Code below</small>
</center>
<hr class='thin bg-lightGray'>
</div>
</div>
<div class="row">
<div class="cell-3"></div>
<div class="cell-4" id="qrcode">
</div>
<div class="cell-5"></div>
</div>
</div>
</div>
</div>
<div class="dialog-actions">
<button class="button js-dialog-close">Close</button>
</div>
</div>
<!-- XYZ Probe -->
<div class="dialog dark" id="xyzProbeWindow" data-role="dialog" data-overlay-click-close="true" data-to-top="true" data-width="800">
<div class="dialog-title">Probing Wizard</div>
<div class="dialog-content" style="max-height: calc(100vh - 100px);overflow-y: auto; overflow-x: hidden;">
<nav data-role="ribbonmenu">
<ul class="tabs-holder">
<li onclick="probeautotab();" class="probetabxyz" id="probeautotab"><a href="#">Automatic</a></li>
<li onclick="probexyztab();" class="probetabxyz" id="probexyztab"><a href="#">XYZ&nbsp;Zero</a></li>
<li onclick="probextab();" class="probetabxyz" id="probextab"><a href="#">X&nbsp;Zero</a></li>
<li onclick="probeytab();" class="probetabxyz" id="probeytab"><a href="#">Y&nbsp;Zero</a></li>
<li onclick="probeztab();" class="probetabxyz" id="probeztab"><a href="#">Z&nbsp;Zero</a></li>
<li onclick="probezplatetab();" class="probetabz" id="probezplatetab" style="display: none;"><a href="#">Z&nbsp;Touch&nbsp;Plate</a></li>
<!-- <li onclick="probeendmilltab();" class="probetabxyz disabled" id="probeendmilltab"><a href="#">Endmill Diameter</a></li> -->
</ul>
</nav>
<table>
<tr>
<td>
<div id="xyzprobeimages">
<img src="./img/xyzprobe/auto.png" alt="probe-auto" height="350" id="img-probe-auto" class="img-probe">
<img src="./img/xyzprobe/xyz.png" alt="probe-xyz" height="350" id="img-probe-xyz" class="img-probe" style="display: none;">
<img src="./img/xyzprobe/x.png" alt="probe-x" height="350" id="img-probe-x" class="img-probe" style="display: none;">
<img src="./img/xyzprobe/y.png" alt="probe-y" height="350" id="img-probe-y" class="img-probe" style="display: none;">
<img src="./img/xyzprobe/z.png" alt="probe-z" height="350" id="img-probe-z" class="img-probe" style="display: none;">
<img src="./img/xyzprobe/zplate.png" alt="probe-zplate" height="350" id="img-probe-zplate" class="img-probe" style="display: none;">
<img src="./img/xyzprobe/endmill.png" alt="probe-endmill" height="350" id="img-probe-endmill" class="img-probe" style="display: none;">
</div>
</td>
<td style="padding: 4px; padding-left: 15px; vertical-align: top;">
<div id="probe-auto" class="probe-tab-content" style="display: none;">
<small>Automatic Probe Routine: This routine is used to find the XYZ origins, as well as automatically
determine endmill diameter. </small>
<hr>
<small>Position the endmill above the hole in the probe plate as shown to the left just above the plate, clip
on the magnetic connecting clip, then click the <span class="fg-cobalt">Confirm Probe Position</span> button to continue...</small>
</div>
<div id="probe-xyz" class="probe-tab-content">
<small>XYZ Probe Routine: This routine is used to find the XYZ origins</small>
<hr>
<small>Position the endmill above the hole in the probe plate as shown to the left just above the plate, clip
on the magnetic connecting clip, then click the <span class="fg-cobalt">Confirm Probe Position</span> button to continue...</small>
</div>
<div id="probe-x" class="probe-tab-content" style="display: none;">
<small>X Probe Routine: This routine is used to find the X origin</small>
<hr>
<small>Position the endmill to the left of the probe plate as shown, clip on the magnetic connecting clip,
then click the <span class="fg-cobalt">Confirm Probe Position</span> button to continue...</small>
</div>
<div id="probe-y" class="probe-tab-content" style="display: none;">
<small>Y Probe Routine: This routine is used to find the Y origin</small>
<hr>
<small>Position the endmill in front of the probe plate as shown, clip on the magnetic connecting clip, then
click the <span class="fg-cobalt">Confirm Probe Position</span> button to continue...</small>
</div>
<div id="probe-z" class="probe-tab-content" style="display: none;">
<small>Z Probe Routine: This routine is used to find the Z origin</small>
<hr>
<small>Position the endmill above the probe plate as shown, clip on the magnetic connecting clip, then click
the <span class="fg-cobalt">Confirm Probe Position</span> button to continue...</small>
</div>
<div id="probe-endmill" class="probe-tab-content" style="display: none;">
<small>Endmill Probe Routine: This routine is used to find the Endmill Diameter</small>
<hr>
<small>Position the endmill above the hole in the probe plate as shown to the left just above the plate, clip
on the magnetic connecting clip, then click the <span class="fg-cobalt">Confirm Probe Position</span> button to continue...</small>
<hr>
<small>
This operation will perform an XYZ probe to establish the plate position, then using the hole in the plate,
it will measure and calculate the Endmill Diameter and display it onscreen. <br>This operation will NOT set
any work-coordinates!
</small>
</div>
<div id="probeJogWindow">
<hr>
<table>
<tr>
<td>
&nbsp;
</td>
<td>
<button class="button success small rounded outline m-1 yP" id="yPprobe" style="width: 40px;" data-role="ripple" data-ripple-color="#5de21b">Y+</button>
</td>
<td>
&nbsp;
</td>
<td>
<button class="button primary small rounded outline m-1 zP" id="zPprobe" style="width: 40px;" data-role="ripple" data-ripple-color="#1ba1e2">Z+</button>
</td>
</tr>
<tr>
<td>
<button class="button alert small rounded outline m-1 xM" id="xMprobe" style="width: 40px;" data-role="ripple" data-ripple-color="#e21b1b">X-</button>
</td>
<td>
<button class="button success small rounded outline m-1 yM" id="yMprobe" style="width: 40px;" data-role="ripple" data-ripple-color="#5de21b">Y-</button>
</td>
<td>
<button class="button alert small rounded outline m-1 xP" id="xPprobe" style="width: 40px;" data-role="ripple" data-ripple-color="#e21b1b">X+</button>
</td>
<td>
<button class="button primary small rounded outline m-1 zM" id="zMprobe" style="width: 40px;" data-role="ripple" data-ripple-color="#1ba1e2">Z-</button>
</td>
</tr>
<tr>
<td colspan="4">
<center>
<span class="text-small">Or use the Keyboard to Jog</span>
</center>
</td>
</tr>
</table>
</div>
<hr>
<div id="endmilldiameterform">
<label>Endmill Diameter</label>
<input id="probediameterxyz" type="number" value="6.35" data-role="input" data-append="mm" data-prepend="<img class='fa-fw' src='https://cam.openbuilds.com/images/endmilldia.svg' width='16px' height='16px'>"
data-clear-button="false">
</div>
<hr>
<button class="button" id="toggle-probe-advanced"><i class="fas fa-fw fa-cogs"></i> Advanced</button>
<div class="pos-relative">
<div data-role="collapse" data-toggle-element="#toggle-probe-advanced" data-collapsed="true" id="toggle-probe-advanced-content">
<div id="zplatesettings" class="probe-tab-content">
<label>Plate Thickness</label>
<input id="z0platethickness" type="number" value="20" data-role="input" data-append="mm" data-prepend="<i class='fas fa-ruler-vertical'></i>" data-clear-button="false">
</div>
<div id="xyzdatum" class="probe-tab-content">
<small>Where is the XY Zero Datum / Origin in your CAM setup, relative to the front-left corner we are
probing? </small>
<br>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180" viewBox="0 0 79.375 47.625">
<style>
</style>
<defs>
<marker id="A" orient="auto" class="J">
<path transform="matrix(.4 0 0 .4 2.96 .4)" d="m-2.5-1c0 2.76-2.24 5-5 5s-5-2.24-5-5 2.24-5 5-5 5 2.24 5 5z" class="D K L" />
</marker>
<marker id="B" orient="auto" class="J">
<path transform="matrix(.4 0 0 .4 2.96 .4)" d="m-2.5-1c0 2.76-2.24 5-5 5s-5-2.24-5-5 2.24-5 5-5 5 2.24 5 5z" class="D K L" />
</marker>
<marker id="C" orient="auto" class="J">
<path transform="matrix(.8 0 0 .8 10 0)" d="M0 0l5-5-17.5 5L5 5z" class="D K L" />
</marker>
<marker id="D" orient="auto" class="J">
<path transform="matrix(.8 0 0 .8 10 0)" d="M0 0l5-5-17.5 5L5 5z" class="D K L" />
</marker>
</defs>
<g fill="#fff" class="D">
<g stroke-width=".132" class="B">
<path d="M7.195 7.363l15.94 28.46L70.758 31.1 47.99 5.015z" fill="#999" />
<path d="M23.133 35.823l-1.257 8.313 47.7-5.284 1.172-7.752z" fill="#ececec" />
<path d="M7.195 7.363l15.94 28.46-1.257 8.313-15.722-29.89z" fill="#ccc" />
</g>
<g stroke-width=".049" class="C N">
<path d="M7.198 7.363l63.74 25.952" />
<path d="M23.322 38.1L47.993 5.093" />
</g>
<g fill="none" stroke-width=".197" class="N">
<path d="M3.942 15.993L19.16 45.07" marker-start="url(#C)" marker-end="url(#A)" />
<path d="M70.118 41.003l-47.624 5.73" marker-start="url(#D)" marker-end="url(#B)" />
</g>
<g transform="matrix(.24595 -.020313 .020313 .24595 108.29 -158.287)">
<rect class="probe-label" id="probe-c" rx="5.925" height="16.422" width="59.717" y="682.21" x="-368.93" stroke-width=".987" class="B" />
<text id="probe-c-text" xml:space="preserve" letter-spacing="0" font-size="2.229" y="694.532" x="-339.852" class="C E F G H">
<tspan y="694.532" x="-330.852" class="I">CENTER</tspan>
</text>
<rect class="probe-label areaactive" id="probe-fl" rx="6.543" height="30.532" width="43.617" y="742.64" x="-423.17" class="B M" />
<text id="probe-fl-text" xml:space="preserve" letter-spacing="0" y="755.631" x="-401.459" class="C E F G H I">
<tspan y="755.631" x="-350">FRONT</tspan>
<tspan y="768.172" x="-350">LEFT</tspan>
</text>
<rect class="probe-label" id="probe-fr" rx="6.543" height="30.532" width="43.617" y="733.68" x="-239.82" class="B M" />
<text id="probe-fr-text" xml:space="preserve" letter-spacing="0" y="746.284" x="-217.439" class="C E F G H I">
<tspan y="746.284" x="-166">FRONT</tspan>
<tspan y="758.824" x="-169">RIGHT</tspan>
</text>
<rect class="probe-label" id="probe-rr" rx="6.543" height="30.532" width="43.617" y="621.52" x="-312.72" class="B M" />
<text id="probe-rr-text" xml:space="preserve" letter-spacing="0" y="633.759" x="-290.442" class="C E F G H I">
<tspan y="633.759" x="-239.442">REAR</tspan>
<tspan y="646.3" x="-242.442">RIGHT</tspan>
</text>
<rect class="probe-label" id="probe-rl" rx="6.543" height="30.532" width="43.617" y="616.07" x="-476.33" class="B M" />
<text id="probe-rl-text" xml:space="preserve" letter-spacing="0" y="628.815" x="-455.49" class="C E F G H I">
<tspan y="628.815" x="-404">REAR</tspan>
<tspan y="641.356" x="-404">LEFT</tspan>
</text></g>
</g>
</svg>
<br>
<small>If the origin is not Front, Left (Default): Then provide stock dimensions to calculate correct
offset of X0, Y0:</small>
<br>
<label>Width</label>
<input id="stockwidth" type="number" value="200" data-role="input" data-append="mm" data-prepend="<i class='fas fa-arrows-alt-h'></i>" data-clear-button="false">
<label>Length</label>
<input id="stocklength" type="number" value="200" data-role="input" data-append="mm" data-prepend="<i class='fas fa-arrows-alt-v'></i>" data-clear-button="false">
</div>
<!-- end xyzdatum-->
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="dialog-actions">
<label>Probe Type: </label>
<a class="button" id="context_toggle"><span id="probetypebtn"><span class="icon"><img src="./img/xyzprobe/xyztouch.png" /></span> OpenBuilds XYZ Probe Plus</a>
<ul class="d-menu context" data-role="dropdown" data-toggle-element="#context_toggle">
<li onclick="probetype('xyz');"><a href="#"><span class="icon"><img src="./img/xyzprobe/xyztouch.png" /></span> OpenBuilds XYZ Probe Plus</a></li>
<li onclick="probetype('z');"><a href="#"><span class="icon"><img src="./img/xyzprobe/ztouch.png" /></span>OpenBuilds Z Touch Plate</a></li>
<li onclick="probetype('custom');"><a href="#"><span class="icon"><img src="./img/xyzprobe/custom.png" /></span> Custom XYZ Probe</a></li>
<li class="divider"></li>
<!-- li onclick="probetype('custom');"><a href="#">Custom</a></li -->
</ul>
<button title="Configure Custom Probe parameters" class="button" onclick="editCustomProbe();" id="editCustomProbeBtn" style="display: none;"><i class="fas fa-cogs"></i></button>
<span style="padding-left: 50px;" id="ProbeButtonBarSpacer"></span>
<button class="button alert js-dialog-close" onclick="resetJogModeAfterProbe(); Metro.dialog.close('#xyzProbeWindow');">Cancel</button>
<button class="button primary" onclick="confirmProbeInPlace();" id="confirmNewProbeBtn">Confirm Probe Position</button>
<button class="button success js-dialog-close disabled" onclick="runProbeNew();" id="runNewProbeBtn">Probe</button>
</div>
</div>
<!-- End XYZ Probe -->
<!-- Edit Custom Probe -->
<div class="dialog dark" data-role="dialog" id="editCustomProbeDialog" data-role="dialog" data-overlay-click-close="true">
<div class="dialog-title"><i class="fas fa-cogs"></i> Edit Custom Probe</div>
<div class="dialog-content">
<input type="text" data-role="input" class="mb-1" data-prepend="X Offset" data-append="mm" id="customProbeXOffset">
<input type="text" data-role="input" class="mb-1" data-prepend="Y Offset" data-append="mm" id="customProbeYOffset">
<input type="text" data-role="input" class="mb-1" data-prepend="Z Offset" data-append="mm" id="customProbeZOffset">
</div>
<div class="dialog-actions">
<button class="button js-dialog-close">Cancel</button>
<button class="button primary js-dialog-close" onclick="saveEditCustomProbe();">Save</button>
</div>
</div>
<!-- End Edit Custom Probe -->
<!-- job completion confirmation -->
<div class="dialog dark" id="completeMsgModal" data-role="dialog" data-overlay-click-close="true">
<div class="dialog-title"><i class='far fa-check-square'></i> Completed</div>
<div class="dialog-content" id="completeMsgDiv">
</div>
<div class="dialog-actions">
<div class="float-right">
<button class="button primary js-dialog-close" id="jobCompleteBtnOk">OK</button>
</div>
</div>
</div>
<!-- end job completion confirmation -->
</div>
</body>
<script type="x-shader/x-vertex" id="vertexShader">
varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).z; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max(
h , 0.0), exponent ), 0.0 ) ), 1.0 ); }
</script>
<script type="text/javascript" src="lib/fontawesome5/js/all.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-ui.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-input-history.min.js"></script>
<script type="text/javascript" src="lib/jquery/jquery-swipe.js"></script>
<script type="text/javascript" src="js/diagnostics.js"></script>
<script type="text/javascript" src="lib/qrcode/qrcode.min.js"></script>
<script type="text/javascript" src="lib/ace/src-noconflict/ace.js"></script>
<script>
METRO_HOTKEYS_FILTER_CONTENT_EDITABLE = false;
METRO_HOTKEYS_FILTER_INPUT_ACCEPTING_ELEMENTS = true;
METRO_HOTKEYS_FILTER_TEXT_INPUTS = true;
</script>
<script type="text/javascript" src="lib/metro4/js/metro.min.js"></script>
<script type="text/javascript" src="/lib/lodash.core.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="/js/macros.js"></script>
<script type="text/javascript" src="lib/threejs/three.min.js"></script>
<script type="text/javascript" src="lib/threejs/GridRect.js"></script>
<script type="text/javascript" src="lib/threejs/OrbitControls.js"></script>
<script type="text/javascript" src="lib/threejs/DragControls.js"></script>
<script type="text/javascript" src="lib/threejs/Projector.js"></script>
<script type="text/javascript" src="lib/threejs/CanvasRenderer.js"></script>
<script type="text/javascript" src="lib/threejs/TransformControls.js"></script>
<script type="text/javascript" src="lib/threejs/TweenMax.min.js"></script>
<script type="text/javascript" src="js/viewer.js"></script>
<script type="text/javascript" src="js/viewer-ruler.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/updates.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/websocket.js"></script>
<script type="text/javascript" src="js/grblsettings.js"></script>
<script type="text/javascript" src="js/metroactions.js"></script>
<script type="text/javascript" src="js/jog.js"></script>
<script type="text/javascript" src="js/servo.js"></script>
<script type="text/javascript" src="js/widget.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
<script type="text/javascript" src="lib/3dview/3dview.js"></script>
<script type="text/javascript" src="js/grbl-defaults.js"></script>
<!-- Wizards -->
<script type="text/javascript" src="wizards/calibration/calibrate.js"></script>
<script type="text/javascript" src="wizards/calibration/calibrate-x.js"></script>
<script type="text/javascript" src="wizards/calibration/calibrate-y.js"></script>
<script type="text/javascript" src="wizards/calibration/calibrate-z.js"></script>
<script type="text/javascript" src="wizards/calibration/calibrate-servo.js"></script>
<script type="text/javascript" src="wizards/probe/probev2.js"></script>
<script type="text/javascript" src="wizards/probe/holefinder.js"></script>
<script type="text/javascript" src="wizards/surfacing/surfacing.js"></script>
<script type="text/javascript" src="wizards/flashingtool/grbl-flashing.js"></script>
<script type="text/javascript" src="js/toolchange.js"></script>
<!-- <script type="text/javascript" src="/lib/iconpicker/js/fontawesome-iconpicker.min.js"></script> -->
<script src="/lib/furcanIconPicker/iconpicker-1.5.0.js"></script>
</html>
<!-- -->