kopia lustrzana https://github.com/OpenBuilds/OpenBuilds-CONTROL
401 wiersze
19 KiB
HTML
401 wiersze
19 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.css" />
|
|
<link rel="stylesheet" href="css/buttons.css" />
|
|
<link rel="stylesheet" href="css/main.css" />
|
|
<link rel="stylesheet" href="css/mobilejog.css" />
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<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 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> -->
|
|
<!-- <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>
|
|
</ul>
|
|
<div class="content-holder">
|
|
<div class="section" id="section-two">
|
|
<div class="group">
|
|
<div class="form-group">
|
|
|
|
|
|
</div>
|
|
<span class="title">Machine Interface</span>
|
|
</div>
|
|
<div class="group estop">
|
|
<button class="ribbon-icon-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</span>
|
|
</button>
|
|
<button class="ribbon-icon-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</span>
|
|
</button>
|
|
<span class="title">E-Stop</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav> -->
|
|
|
|
|
|
|
|
<form class="inline-form bg-openbuilds p-1">
|
|
<select class="success" data-role="select" data-filter="false" id="portUSB" disabled>
|
|
<option value="">Waiting for USB</option>
|
|
</select>
|
|
<button class="button success" onclick="selectPort()" id="connectBtn" type="button" disabled><i class="fas fa-plug"></i></button>
|
|
<button class="button" style="display:none;" onclick="closePort()" id="disconnectBtn" type="button"><i class="fas fa-plug"></i> Disconnect</button>
|
|
|
|
<div class="estop">
|
|
|
|
<button class="button light ml-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>
|
|
<span class="caption">Unlock</span>
|
|
</button>
|
|
|
|
<button class="button alert" onclick="socket.emit('stop', true)">
|
|
<span class="icon">
|
|
<span class="fa-layers fa-fw">
|
|
<!-- <i class="fas fa-circle fg-white" data-fa-transform="grow-8"></i> -->
|
|
<i class="far fa-hand-paper fg-white" data-fa-transform="grow-8 left-0.5"></i>
|
|
</span>
|
|
</span>
|
|
<span class="caption">Stop</span>
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
<center>
|
|
<table class="drotable mb-2">
|
|
<tr>
|
|
<td>
|
|
<button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 X0')" style="width: 60px;">
|
|
<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 dromobile">
|
|
<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>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 Y0')" style="width: 60px;">
|
|
<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 dromobile">
|
|
<div class="float-left fg-green">
|
|
<span class="fa-layers fa-fw">
|
|
<span class="fa-layers-text fg-green">Y</span>
|
|
<!-- <span class="fa-layers-text fg-green" data-fa-transform="left-20 rotate--90" style="font-family: Arial; font-size: 11px;">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>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 Z0')" style="width: 60px;">
|
|
<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 dromobile">
|
|
<div class="float-left fg-blue">
|
|
<span class="fa-layers fa-fw">
|
|
<span class="fa-layers-text fg-blue">Z</span>
|
|
<!-- <span class="fa-layers-text fg-blue" data-fa-transform="left-20 rotate--90" style="font-family: Arial; font-size: 11px;">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>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<button class="button light jogbtn" onclick="sendGcode( 'G10 P1 L20 X0 Y0 Z0')" style="width: 60px;">
|
|
<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">
|
|
<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>
|
|
</tr>
|
|
</table>
|
|
</center>
|
|
|
|
<nav data-role="ribbonmenu">
|
|
<ul class="tabs-holder">
|
|
<li><a href="#tab-buttons">Jog Buttons</a></li>
|
|
<li><a href="#tab-pad">Touchpad</a></li>
|
|
</ul>
|
|
|
|
<div class="content-holder">
|
|
<div class="section" id="tab-buttons">
|
|
<div id="buttonview">
|
|
<center>
|
|
<table class="jogtable">
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
|
|
<td>
|
|
<button class="button light square large jogbtn" 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>
|
|
</td>
|
|
|
|
|
|
<td>
|
|
<button class="button light square large jogbtn" 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>
|
|
<button class="button light square large jogbtn" 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>
|
|
<button class="button light square large jogbtn" 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>
|
|
<button class="button light square large jogbtn" 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>
|
|
<button class="button light square large jogbtn" 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>
|
|
<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="1000" data-role="input" data-prepend="Jog Feedrate:" data-clear-button="false" value="1000" style="text-align: right;" />
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</center>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="section" id="tab-pad">
|
|
<div class="title_box" id="bill_to">
|
|
<div id="title"><small>Jog Touchpad</small></div>
|
|
<div id="svgview">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="fixed-bottom">
|
|
<div class="row">
|
|
<div class="cell-3 p-1">
|
|
<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 p-1">
|
|
<div>
|
|
<span class="badge inline bg-grayBlue fg-white" id="connectStatus" style="width: 100%;">Not Connected</span>
|
|
</div>
|
|
</div>
|
|
<div class="cell-3 p-1">
|
|
<div>
|
|
<span class="badge inline bg-grayBlue fg-white" id="runStatus" style="width: 100%;">Not Connected</span>
|
|
</div>
|
|
</div>
|
|
<div class="cell-3 p-1">
|
|
<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>
|
|
|
|
|
|
</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/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/mobilejog.js"></script>
|
|
|
|
</html> |