OpenBuilds-CONTROL/app/jog/index.html

447 wiersze
26 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="openbuilds.com">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="HandheldFriendly" content="true" />
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" sizes="180x180" href="/jog/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/jog/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/jog/favicon-16x16.png">
<link rel="manifest" href="/jog/manifest.json">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<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.css" />
<link rel="stylesheet" href="../css/buttons.css" />
<link rel="stylesheet" href="../css/main.css" />
</head>
<body>
<div class="window" style="height: 100vh;">
<div class="window-caption bg-openbuilds" style="-webkit-app-region: drag;">
<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">
</div>
</div>
<div class="window-content" style="height: 100%; overflow: hidden !important;">
<div class="toolbar" data-role="buttongroup">
<div class="form-group inline-form mr-1">
<select class="success" data-role="select" data-filter="false" id="portUSB" disabled>
<option value="">Waiting for USB</option>
</select>
<button class="button success mb-2 " onclick="selectPort()" id="connectBtn" type="button" disabled><i class="fas fa-plug"></i></button>
<button class="button alert mb-2" style="display:none;" onclick="closePort()" id="disconnectBtn" type="button"><i class="fas fa-plug"></i> Disconnect</button>
</div>
<button class="button mr-1" 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>
Unlock
</button>
<button class="button mr-1" onclick="socket.emit('stop', false)">
<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>
Abort
</button>
</div>
<div style="overflow-y: auto; height: calc(100vh - 100px);">
<center>
<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 class="p-2">
<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 class="p-2">
<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" 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" />
</div>
</td>
<td class="p-2">
<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-left" 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="#" onclick="sendGcode( 'G53 G0 X0')"><span class="fas fa-chart-line fg-red icon"></span>Goto X0 (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</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</a></li> -->
</ul>
</div>
</td>
</tr>
<tr>
<td class="p-2">
<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 class="p-2">
<div class="dro">
<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" />
</div>
</td>
<td class="p-2">
<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-left" 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="#" onclick="sendGcode( 'G53 G0 Y0')"><span class="fas fa-chart-line fg-green icon"></span>Goto Y0 (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</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</a></li> -->
</ul>
</div>
</td>
</tr>
<tr>
<td class="p-2">
<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 class="p-2">
<div class="dro">
<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" />
</div>
</td>
<td class="p-2">
<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-left" 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="#" onclick="sendGcode( 'G53 G0 Z0')"><span class="fas fa-chart-line fg-blue icon"></span>Goto Z0 (Machine Coord) (G53 G0 Z0)</a></li>
<li class="divider"></li>
<!-- <li><a href="#" onclick="openProbeZDialog()"><span class="fas fa-podcast fa-rotate-180 fg-blue icon"></span>Probe Z-Zero Wizard with XYZ-Touchplate</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</a></li> -->
</ul>
</div>
</td>
</tr>
<tr>
<td class="p-2">
<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 class="p-2">
<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>GOTO X0Y0Z0 (Work Coord) (G0 Z5, G0 X0 Y0, G0 Z0) (Retract Z to Work Coord Z5)</a></li>
<li id="gotozeroMPos"><a href="#"><span class="fas fa-chart-line fg-openbuilds icon"></span>GOTO X0Y0Z0 (Machine Coord) (G53 G0 Z0, G0 X0 Y0, G0 Z0) (Retract Z to Machine Coord Z0)</a></li>
</ul>
</div>
</td>
<td class="p-2">
<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-left" 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>
</center>
<hr class="border-bottom bd-lightGray ml-4 mr-4" />
<div id="buttonview">
<center>
<table class="jogtable">
<tr>
<td class="p-2">
</td>
<td class="p-2">
<button class="button light square large jogbtn yP" id="yP">
<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 class="p-2">
</td>
<td class="p-2">
<button class="button light square large jogbtn zP" id="zP">
<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 class="p-2">
<button class="button light square large jogbtn xM" id="xM">
<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 class="p-2">
<button class="button light square large jogbtn yM" id="yM">
<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 class="p-2">
<button class="button light square large jogbtn xP" id="xP">
<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 class="p-2">
<button class="button light square large jogbtn zM" id="zM">
<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" class="p-2">
<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 class="p-2">
<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 class="p-2">
<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 class="p-2">
<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-openbuilds jogdist" data-fa-transform="" style="font-weight:900; font-family: Arial; font-size: 12px;">10mm</span>
</span>
</button>
</td>
<td class="p-2">
<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" class="p-2">
<div style="margin: 2px;">
<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;" />
</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;" />
</div>
</div>
</td>
</tr>
</table>
</center>
</div>
</div>
<div class="fixed-bottom">
<div class="row">
<div class="cell-3 pl-1 pr-1">
<div>
<span class="badge inline bg-openbuilds fg-white" style="width: 100%; font-size: 0.5em;">
<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 pl-1 pr-1">
<div>
<span class="badge inline bg-openbuilds fg-white" id="connectStatus" style="width: 100%; font-size: 0.5em;">Not Connected</span>
</div>
</div>
<div class="cell-3 pl-1 pr-1">
<div>
<span class="badge inline bg-openbuilds fg-white" id="runStatus" style="width: 100%; font-size: 0.5em;">Not Connected</span>
</div>
</div>
<div class="cell-3 pl-1 pr-1">
<div>
<span class="badge inline bg-openbuilds fg-white" id="gcodesent" style="width: 100%; font-size: 0.5em;">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>
<div style="display: none;">
<!-- Hidden stuff -->
</div>
</body>
<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/svgjs/svg.min.js"></script>
<script type="text/javascript" src="../lib/jquery/jquery-swipe.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="../js/diagnostics.js"></script>
<script type="text/javascript" src="../js/toolchange.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/probe.js"></script>
<script type="text/javascript" src="../js/probev2.js"></script> -->
<!-- <script type="text/javascript" src="js/calibrate.js"></script> -->
<script type="text/javascript" src="../js/mobilejog.js"></script>
</html>