kopia lustrzana https://github.com/OpenBuilds/OpenBuilds-CONTROL
859 wiersze
45 KiB
HTML
859 wiersze
45 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>OpenBuilds Machine Driver</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="css/buttons.css" />
|
|
<link rel="stylesheet" href="css/main.css" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="pos-fixed pos-center" id="splash">
|
|
<img src="splashicon.png" style="display:block; margin:auto;">
|
|
<br>Starting OpenBuilds Machine Driver...
|
|
</div>
|
|
|
|
|
|
<div class="window" style="height: 100vh;">
|
|
<div 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 Machine Driver</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>
|
|
<!-- <span data-cls-hint="bg-light fg-dark drop-shadow" class="btn-close" onclick="confirmQuit()"></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 href="#section-grbl" onclick="grblPanel();"><i class="fas fa-fw fa-sliders-h"></i> Grbl Settings</a></li>
|
|
<li><a href="#section-troubleshooting" 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>
|
|
<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">Reset</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 Settings</span>
|
|
</div>
|
|
<div class="group">
|
|
<div class="ribbon-group">
|
|
<button class="ribbon-icon-button" onclick="sendGcode('$RST=$'); refreshGrblSettings()">
|
|
<span class="icon">
|
|
<i class="fas fa-sliders-h"></i>
|
|
</span>
|
|
<span class="caption">Reset Settings</span>
|
|
</button><br>
|
|
<button class="ribbon-icon-button" onclick="sendGcode('$RST=#'); refreshGrblSettings()">
|
|
<span class="icon">
|
|
<i class="fas fa-layer-group"></i>
|
|
</span>
|
|
<span class="caption">Reset WCOs</span>
|
|
</button><br>
|
|
<button class="ribbon-icon-button" onclick="sendGcode('$RST=*'); refreshGrblSettings()">
|
|
<span class="icon">
|
|
<i class="fas fa-microchip"></i>
|
|
</span>
|
|
<span class="caption">Reset 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', 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">Stop<br>Job</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=" <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 success float-right" onclick="selectPort()" id="connectBtn" type="button" disabled>Connect</button>
|
|
<button class="button alert" style="display:none;" onclick="closePort()" id="disconnectBtn" type="button">Disconnect</button>
|
|
</form>
|
|
|
|
</div>
|
|
<span class="title">Machine Interface</span>
|
|
</div>
|
|
<div class="group" id="grblButtons" style="display: none;">
|
|
<div class="ribbon-group">
|
|
<button class="ribbon-icon-button" onclick="sendGcode(String.fromCharCode(0x18))">
|
|
<span class="icon">
|
|
<span class="mif-loop"></span>
|
|
</span>
|
|
<span class="caption">Reset</span>
|
|
</button>
|
|
<br>
|
|
<button class="ribbon-icon-button" onclick="sendGcode('$$')">
|
|
<span class="icon">
|
|
<span class="mif-cogs"></span>
|
|
</span>
|
|
<span class="caption">Settings</span>
|
|
</button>
|
|
</div>
|
|
<span class="title" id="firmwarename"></span>
|
|
</div>
|
|
<div class="group">
|
|
<div>
|
|
<button id="camBtn" 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" />Open GCODE from File (*.gcode, *.gc, *.tap, *.nc, *.cnc)</a></li>
|
|
<li class=""><a href="#" onclick="socket.emit('opencam', true);">Open browser to https://cam.openbuilds.com</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<button id="runBtn" class="ribbon-button" onclick="socket.emit('runJob', editor.getValue());">
|
|
<span class="icon">
|
|
<i class="fas fa-play"></i>
|
|
</span>
|
|
<span class="caption">Run<br>Job</span>
|
|
</button>
|
|
<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', true)">
|
|
<span class="icon">
|
|
<i class="fas fa-stop"></i>
|
|
</span>
|
|
<span class="caption">Stop<br>Job</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>
|
|
</span>
|
|
</span>
|
|
<span class="caption">Tool<br>Options</span>
|
|
</button>
|
|
<ul class="ribbon-dropdown grblmode" data-role="dropdown" data-duration="100">
|
|
<li><a class="grblmode" href="#" onclick="sendGcode('M3 S1000')">Tool On (M3 S1000)</a></li>
|
|
<li><a class="grblmode" href="#" onclick="sendGcode('M5')">Tool Off (M5)</a></li>
|
|
<li class="divider"></li>
|
|
<li><a class="grblmode" href="#" onclick="sendGcode('M8 S1000')">Coolant On (M8)</a></li>
|
|
<li><a class="grblmode" href="#" onclick="sendGcode('M9 S1000')">Coolant Off (M9)</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<button id="homeBtn" class="ribbon-button" onclick="sendGcode('$H')">
|
|
<span class="icon">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
<span class="caption grblmode">Home<br>All</span>
|
|
</button>
|
|
|
|
<button id="mobileBtn" class="ribbon-button" onclick="jogWidget();">
|
|
<span class="icon">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
</span>
|
|
<span class="caption grblmode">Jog<br>Widget</span>
|
|
</button>
|
|
|
|
<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', 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">Stop<br>Job</span>
|
|
</button>
|
|
<span class="title">E-Stop</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" id="section-troubleshooting">
|
|
<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', 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">Stop<br>Job</span>
|
|
</button>
|
|
<span class="title">E-Stop</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="manualControlPanel">
|
|
<center>
|
|
<div id="jogcontrols" class="mt-1">
|
|
<div class="row flex-justify-center flex-align-center" style="width: 100%;">
|
|
<div class="cell">
|
|
<table class="drotable">
|
|
<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-grayBlue" 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-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
|
|
</span>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<div class="dro">
|
|
<div class="float-left fg-red" data-fa-transform="right-15">
|
|
<span class="fa-layers fa-fw">
|
|
<span class="fa-layers-text fg-red">X</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" />
|
|
</div>
|
|
</td>
|
|
<!-- <td>
|
|
<div class="pos-relative">
|
|
<button class="button light"><i class="fas fa-caret-down fg-grayBlue"></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-grayBlue icon"></span>Goto X Zero (G0 X0)</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-grayBlue" 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-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
|
|
</span>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<div class="dro">
|
|
<div class="float-left fg-green">
|
|
<span class="fa-layers fa-fw">
|
|
<span class="fa-layers-text fg-green">Y</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" />
|
|
</div>
|
|
</td>
|
|
<!-- <td>
|
|
<div class="pos-relative">
|
|
<button class="button light"><i class="fas fa-caret-down fg-grayBlue"></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-grayBlue icon"></span>Goto Y Zero (G0 Y0)</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-grayBlue" data-fa-transform="shrink-2 down-8 left-8"></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-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
|
|
</span>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<div class="dro">
|
|
<div class="float-left fg-blue">
|
|
<span class="fa-layers fa-fw">
|
|
<span class="fa-layers-text fg-blue">Z</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" />
|
|
</div>
|
|
</td>
|
|
<!-- <td>
|
|
<div class="pos-relative">
|
|
<button class="button light"><i class="fas fa-caret-down fg-grayBlue"></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-grayBlue icon"></span>Goto Z Zero (G0 Z0)</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#" onclick="sendGcode('G38.2 F10 Z-20');"><span class="fas fa-podcast fa-rotate-180 fg-grayBlue icon"></span>Probe Z (G38.2 F10 Z-20)</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-grayBlue" 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-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">setzero</span>
|
|
</span>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<button class="button light jogbtn" style="width: 161px;" id="gotozero" data-role="ripple">
|
|
<span class="fa-layers fa-fw">
|
|
<i class="fas fa-chart-line fg-grayBlue" 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-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-grayBlue" data-fa-transform="up-8 " style="font-weight:900; font-family: Arial; font-size: 12px;">gotozero</span>
|
|
</span>
|
|
|
|
</button>
|
|
</td>
|
|
<!-- <td>
|
|
|
|
</td> -->
|
|
</tr>
|
|
|
|
</table>
|
|
</div>
|
|
<div class="cell">
|
|
<table class="jogtable">
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
|
|
<td>
|
|
<button class="button light square large jogbtn" 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" 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>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button class="button light square large jogbtn" 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" 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" 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" 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>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="4" style="height: 10px;"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button class="button light jogbtn" 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" 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" id="dist10" style="width: 100%; height: 30px; line-height: 28px;">
|
|
<span class=" fa-layers fa-fw">
|
|
<span id="dist10label" class="fa-layers-text fg-grayBlue 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" 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="4">
|
|
<div style="margin: 2px;">
|
|
<input id="jograte" type="number" min="100" max="10000" step="500" placeholder="5000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="5000" style="text-align: right;" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="cell" id="frocell">
|
|
<input id="fro" data-on-stop="feedOverride(arguments[0])" data-role="slider" data-vertical="true" data-size="170" data-accuracy="10" data-min="-50" 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-grayBlue">
|
|
</div>
|
|
<div class="cell" id="trocell">
|
|
<input id="tro" data-on-stop="spindleOverride(arguments[0])" data-role="slider" data-vertical="true" data-size="170" data-accuracy="10" data-min="-50" 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-grayBlue">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="controlLogs" class="mt-1">
|
|
|
|
<nav data-role="ribbonmenu">
|
|
<ul class="tabs-holder">
|
|
<li><a href="#tab-one" id="consoletab"><i class="fas fa-fw fa-terminal"></i> Serial Console</a></li>
|
|
<li><a href="#tab-two" id="gcodeeditortab"><i class="far fa-fw fa-edit"></i> GCODE Editor</a></li>
|
|
<li><a href="#tab-three" id="gcodeviewertab" onclick="fixRenderSize();"><i class="mif-3d-rotation fa-fw"></i> 3D View</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 data-prepend=" <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);" />
|
|
<button id="sendCommand" class="button dark needs-connection" type="button" data-role="hint" data-hint-position="top" data-hint-text="Execute Command" data-cls-hint="bg-light fg-dark drop-shadow">
|
|
<i class="fa fa-play" style="margin-right: 10px;"></i> Send
|
|
</button>
|
|
<button class="button dark emptylog" type="button" onclick="$('#console').empty();" data-role="hint" data-hint-position="top" data-hint-text="Empty console log" data-cls-hint="bg-light fg-dark drop-shadow">
|
|
<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="Find and Replace" class="button dark" onclick="editor.execCommand('replace')"><i class="fas fa-search"></i> Find/Replace</button>
|
|
<button title="Select All" class="button dark" onclick="editor.execCommand('selectall')"><i class="far fa-check-square"></i> Select All</button>
|
|
<button title="Undo" class="button dark" onclick="editor.execCommand('undo')"><i class="fas fa-undo"></i> Undo</button>
|
|
<button title="Redo" class="button dark" onclick="editor.execCommand('redo')"><i class="fas fa-redo"></i> Redo</button>
|
|
<button title="Go to End" class="button dark" onclick="editor.execCommand('gotoend')"><i class="fas fa-chevron-down"></i></button>
|
|
<button title="Go to Start" class="button dark" onclick="editor.execCommand('gotostart')"><i class="fas fa-chevron-up"></i></button>
|
|
<button title="Clear Editor" class="button dark" onclick="editor.execCommand('selectall'); editor.execCommand('del');"><i class="fas fa-eraser"></i> Clear</button>
|
|
<!-- </form> -->
|
|
</div>
|
|
</div>
|
|
<div class="section" id="tab-three">
|
|
<div id="renderArea"></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>
|
|
<button id="stopSimBtn" style="display: none;" title="Stop Sim" class="button dark" onclick="simstop()"><i class="fas fa-stop"></i> Stop Sim</button>
|
|
<button id="resetViewBtn" title="Stop Sim" class="button dark" onclick="resetView(object)"><i class="fas fa-stop"></i> Reset View</button>
|
|
</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">
|
|
<i class="fas fa-fw fa-bolt"></i>Endstops
|
|
</div>
|
|
<div class="card-content">
|
|
<table class="table striped compact">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 50%;">PIN</th>
|
|
<th style="width: 50%;">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>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-fw fa-microchip"></i>Firmware
|
|
</div>
|
|
<div class="card-content">
|
|
<table class="table striped compact">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 50%;">Value</th>
|
|
<th style="width: 50%;">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Version</td>
|
|
<td><span class="tally bg-openbuilds fg-white" id="firmwarever">NOCOMM</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Buffer</td>
|
|
<td><span class="tally bg-openbuilds fg-white" id="buffstatus">NOCOMM</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cell p-0 m-0">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fas fa-fw fa-tty"></i>Communications
|
|
</div>
|
|
<div class="card-content">
|
|
<table class="table striped compact">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 50%;">Value</th>
|
|
<th style="width: 50%;">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Driver</td>
|
|
<td><span class="tally bg-openbuilds fg-white" id="driverver">NOCOMM</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Blocked</td>
|
|
<td><span class="tally bg-openbuilds fg-white" id="commblocked">NOCOMM</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Conn 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>Driver 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>
|
|
</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>
|
|
</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%;">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();"><a href="#"><i class="fas fa-fighter-jet icon"></i> Simulate from line <span id="linenumber"></span></a>
|
|
</li>
|
|
</span>
|
|
</ul>
|
|
<!-- -->
|
|
|
|
<div id="hiddendivs" style="display:none;">
|
|
<div class="dialog" 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">
|
|
Version <code><span id="availVersion">1.0.100</span></code> update ready to be installed!<br> Note that proceeding will:
|
|
<ul>
|
|
<li>Stops any running jobs</li>
|
|
<li>Shuts down this instance of the driver</li>
|
|
<li>Launches the installer for the new version</li>
|
|
</ul>
|
|
<small>You may want to wait until your machine is idle before continuing</small>
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button class="button js-dialog-close">Ask me again in 15min</button>
|
|
<button class="button success js-dialog-close" onclick="socket.emit('applyUpdate', true)">OK, Proceed with Update</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Divs -->
|
|
<div style="display: none;">
|
|
|
|
<div class="dialog" data-overlay-click-close="true" data-role="dialog" id="jogWidgetDialog">
|
|
<div class="dialog-title">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>
|
|
</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="lib/qrcode/qrcode.min.js"></script>
|
|
|
|
<script type="text/javascript" src="lib/ace/src-noconflict/ace.js"></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="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/calibrate.js"></script>
|
|
<script type="text/javascript" src="js/widget.js"></script>
|
|
|
|
<script type="text/javascript" src="lib/3dview/3dview.js"></script>
|
|
|
|
<script type="text/javascript" src="js/grbl-defaults.js"></script>
|
|
|
|
</html> |