2018-08-24 19:00:03 +00:00
<!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" >
2018-08-25 16:54:28 +00:00
< 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" / >
< link rel = "manifest" href = "manifest.json" >
< link rel = "shortcut icon" href = "favicon.ico" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "images/icons/favicon-16x16.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "images/icons/favicon-32x32.png" >
< link rel = "icon" href = "./images/icons/apple-touch-icon.png" >
< meta name = "apple-mobile-web-app-capable" content = "yes" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" >
< meta name = "apple-mobile-web-app-title" content = "OpenBuilds Jog" >
< link rel = "apple-touch-startup-image" href = "./images/splash/launch-640x1136.png" media = "(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
< link rel = "apple-touch-startup-image" href = "./images/splash/launch-750x1294.png" media = "(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" >
< link rel = "apple-touch-startup-image" href = "./images/splash/launch-1242x2148.png" media = "(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" >
< link rel = "apple-touch-startup-image" href = "./images/splash/launch-1125x2436.png" media = "(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" >
< link rel = "apple-touch-startup-image" href = "./images/splash/launch-1536x2048.png" media = "(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)" >
< link rel = "apple-touch-startup-image" href = "./images/splash/launch-1668x2224.png" media = "(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)" >
< link rel = "apple-touch-startup-image" href = "./images/splash/launch-2048x2732.png" media = "(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "./images/icons/apple-touch-icon.png" >
< link rel = "mask-icon" href = "./images/icons/safari-pinned-tab.svg" color = "#4a4e51" >
< meta name = "msapplication-TileColor" content = "#4a4e51" >
< meta name = "theme-color" content = "#4a4e51" >
2018-08-24 19:00:03 +00:00
< 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 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 >
< / 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 >
2018-08-25 16:54:28 +00:00
2018-08-24 19:00:03 +00:00
< 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;" >
2018-08-25 16:54:28 +00:00
< 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;" / >
2018-08-24 19:00:03 +00:00
< / 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 >
