2018-06-19 08:07:03 +00:00
<!DOCTYPE html>
< html lang = "en" >
2018-06-20 13:00:05 +00:00
2018-06-21 20:02:40 +00:00
< 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.css" / >
< link rel = "stylesheet" href = "css/buttons.css" / >
< link rel = "stylesheet" href = "css/main.css" / >
< / head >
< body >
2018-06-20 13:00:05 +00:00
2018-06-21 20:02:40 +00:00
< div class = "window" style = "height: 100vh;" >
2018-08-01 19:04:27 +00:00
< div class = "window-caption bg-openbuilds" style = "-webkit-app-region: drag;" >
2018-06-21 20:02:40 +00:00
< span class = "icon mif-cog" > < / span >
2018-06-26 10:33:13 +00:00
< span class = "title" id = "windowtitle" > OpenBuids Machine Driver< / span >
2018-06-21 20:02:40 +00:00
< div class = "buttons" style = "-webkit-app-region: no-drag" >
2018-06-25 17:25:19 +00:00
< span class = "btn-min" onclick = "socket.emit('minimise')" > < / span >
< span data-cls-hint = "bg-light fg-dark drop-shadow" class = "btn-close" onclick = "confirmQuit()" > < / span >
2018-06-21 20:02:40 +00:00
< / div >
< / div >
< div class = "window-content" style = "height: 100%; overflow: hidden !important;" >
< nav data-role = "ribbonmenu" class = "mt-1" >
< ul class = "tabs-holder" >
2018-07-24 18:11:56 +00:00
< li > < a id = "controlTab" href = "#section-two" onclick = "manualcontrolPanel();" > Control< / a > < / li >
2018-08-01 19:04:27 +00:00
< li id = "grblSettings" style = "display: none;" > < a href = "#section-grbl" onclick = "grblPanel();" > Grbl Settings< / a > < / li >
2018-07-12 13:06:53 +00:00
< li > < a href = "#section-update" onclick = "updatePanel();" > Update< / a > < / li >
2018-06-21 20:02:40 +00:00
< / ul >
< div class = "content-holder" >
2018-06-25 20:13:58 +00:00
< div class = "section" id = "section-grbl" >
2018-08-01 19:04:27 +00:00
< div class = "group" >
2018-06-29 13:01:16 +00:00
< button class = "ribbon-button disabled" onclick = "grblSaveSettings();" id = "saveBtn" disabled >
2018-06-25 20:13:58 +00:00
< span class = "icon" >
2018-06-27 19:23:34 +00:00
< span class = "fa-layers fa-fw" >
2018-06-29 13:01:16 +00:00
< i id = "saveBtnIcon" class = "fas fa-save fg-gray" data-fa-transform = "grow-8" > < / i >
2018-06-27 19:23:34 +00:00
< i id = "grblSettingsBadge" class = "fas fa-exclamation-circle fg-red" data-fa-transform = "shrink-4 right-10 up-10" style = "display: none;" > < / i >
2018-06-25 20:13:58 +00:00
< / span >
< / span >
< span class = "caption" > Save< br > to Firmware< / span >
< / button >
2018-06-29 13:01:16 +00:00
< 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" >
2018-06-25 20:13:58 +00:00
< i class = "fas fa-sync-alt" > < / i >
< / span >
2018-06-29 13:01:16 +00:00
< span class = "caption" > Refresh< / span >
< / button >
< / div >
2018-06-25 20:13:58 +00:00
< span class = "title" > Grbl Settings< / span >
< / div >
2018-08-01 19:04:27 +00:00
< div class = "group" >
2018-06-25 20:13:58 +00:00
< 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 >
2018-06-21 20:02:40 +00:00
< 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 >
2018-06-22 19:49:51 +00:00
< span class = "caption" > Stop< br > Job< / span >
2018-06-21 20:02:40 +00:00
< / button >
< span class = "title" > E-Stop< / span >
< / div >
< / div >
< div class = "section" id = "section-two" >
2018-08-01 19:04:27 +00:00
< div class = "group" >
< div class = "form-group" >
< form class = "inline-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" 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" >
2018-07-26 20:22:07 +00:00
< 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 >
2018-06-27 19:23:34 +00:00
< 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" >
2018-06-22 19:49:51 +00:00
< i class = "fas fa-play" > < / i >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-21 20:02:40 +00:00
< / button >
2018-06-22 19:49:51 +00:00
< div >
2018-06-27 19:23:34 +00:00
< button id = "toolBtn" class = "ribbon-button dropdown-toggle" >
2018-06-22 19:49:51 +00:00
< 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 >
2018-06-27 19:23:34 +00:00
< li class = "divider" > < / li >
2018-06-22 19:49:51 +00:00
< 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 >
2018-06-27 19:23:34 +00:00
2018-06-22 19:49:51 +00:00
< / ul >
< / div >
2018-06-20 13:00:05 +00:00
2018-06-27 19:23:34 +00:00
< button id = "homeBtn" class = "ribbon-button" onclick = "sendGcode('$H')" >
2018-06-21 20:02:40 +00:00
< span class = "icon" >
2018-06-22 19:49:51 +00:00
< i class = "fas fa-home" > < / i >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-22 19:49:51 +00:00
< span class = "caption grblmode" > Home< br > All< / span >
2018-06-21 20:02:40 +00:00
< / button >
2018-06-25 20:13:58 +00:00
< span class = "title" > Control< / span >
< / div >
< div class = "group" style = "width: 100px;" >
2018-06-21 21:04:41 +00:00
< button class = "ribbon-button" onclick = "socket.emit('clearAlarm', 2)" >
2018-06-21 20:02:40 +00:00
< span class = "icon" >
2018-06-22 19:49:51 +00:00
< span class = "fa-layers" data-toggle = "tooltip" data-placement = "bottom" title = "Flashes red when machine has entered ALARM state, click Clear Alarm button" >
2018-06-25 20:13:58 +00:00
< i id = "navbellBtn2" class = "fas fa-bell fg-red" style = "display: none;" > < / i >
2018-06-22 19:49:51 +00:00
< i class = "far fa-bell" > < / i >
2018-06-21 21:04:41 +00:00
< / span >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-25 20:13:58 +00:00
< span class = "caption" > Unlock< br > Alarm< / span >
2018-06-21 20:02:40 +00:00
< / button >
2018-06-21 21:04:41 +00:00
< button class = "ribbon-button" onclick = "socket.emit('stop', true)" >
2018-06-21 20:02:40 +00:00
< span class = "icon" >
< span class = "fa-layers fa-fw" >
2018-06-21 21:04:41 +00:00
< 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 >
2018-06-21 20:02:40 +00:00
< / span >
< / span >
2018-06-22 19:49:51 +00:00
< span class = "caption" > Stop< br > Job< / span >
2018-06-21 20:02:40 +00:00
< / button >
< span class = "title" > E-Stop< / span >
< / div >
< / div >
2018-07-12 13:06:53 +00:00
< div class = "section" id = "section-update" >
< div class = "group" style = "width: calc(100vw - 90px);" >
2018-07-16 11:16:49 +00:00
< button id = "checkforupdatesbtn" class = "ribbon-button" onclick = "$('#updateconsole').empty(); socket.emit('checkUpdates', true)" >
2018-07-12 13:06:53 +00:00
< span class = "icon" >
< span class = "fa-layers fa-fw" >
< i class = "fas fa-sync-alt fg-green" data-fa-transform = "grow-8" > < / i >
< i class = "fas fa-download" data-fa-transform = "grow-1 left-0.5" > < / i >
< div id = "downloadprogress" style = "display: none; color: #fff ; background-color: rgba(0, 0, 0, 0.6); font-weight:900; font-family: Arial; font-size: 12px; border: 1px solid ##607d8b; border-radius: 2px;" > 99%< / div >
< / span >
< / span >
< span class = "caption" > Check for< br > Updates< / span >
< / button >
< button id = "applyupdatesbtn" class = "ribbon-button" onclick = "socket.emit('applyUpdate', true)" disabled >
< span class = "icon" >
< span class = "fa-layers fa-fw" >
< i class = "fas fa-cog fg-red" data-fa-transform = "grow-8" > < / i >
< i class = "fas fa-download" data-fa-transform = "grow-1 left-0.5" > < / i >
< i class = "fa-inverse far fa-check-square" data-fa-transform = "shrink-8 down-5" > < / i >
< / span >
< / span >
< span class = "caption" > Install< br > Update< / span >
< / button >
< span class = "title" > Online Updates< / span >
< / div >
< / div >
2018-06-21 20:02:40 +00:00
< / div >
< / nav >
2018-06-20 13:00:05 +00:00
2018-08-01 19:04:27 +00:00
< div id = "manualControlPanel" >
2018-06-21 20:02:40 +00:00
< center >
2018-06-22 19:49:51 +00:00
< div id = "jogcontrols" >
2018-06-25 17:25:19 +00:00
< div class = "row flex-justify-center flex-align-center" style = "width: 100%;" >
< div class = "cell" >
2018-06-29 13:01:16 +00:00
< table class = "drotable" >
2018-06-25 17:25:19 +00:00
< tr >
< td >
2018-06-29 13:01:16 +00:00
< 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" >
2018-07-03 13:49:30 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< div class = "float-right fg-red" id = "xPos" data-editable > 0.000< / div >
2018-06-29 13:01:16 +00:00
< input id = "xPosInput" class = "m-0 p-0 droInput float-right fg-red" / >
2018-06-25 17:25:19 +00:00
< / div >
< / td >
< / tr >
< tr >
< td >
2018-06-29 13:01:16 +00:00
< 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" >
2018-07-03 13:49:30 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< div class = "float-right fg-green" id = "yPos" data-editable > 0.000< / div >
2018-06-29 13:01:16 +00:00
< input id = "yPosInput" class = "m-0 p-0 droInput float-right fg-green" / >
2018-06-25 17:25:19 +00:00
< / div >
< / td >
< / tr >
< tr >
< td >
2018-06-29 13:01:16 +00:00
< 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" >
2018-07-03 13:49:30 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< div class = "float-right fg-blue" id = "zPos" data-editable > 0.000< / div >
2018-06-29 13:01:16 +00:00
< input id = "zPosInput" class = "m-0 p-0 droInput float-right fg-blue" / >
2018-06-25 17:25:19 +00:00
< / div >
< / td >
< / tr >
2018-06-29 13:01:16 +00:00
< 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-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: 141px;" 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 >
<!-- <table>
2018-06-25 17:25:19 +00:00
< tr >
2018-06-27 19:23:34 +00:00
< td style = "padding-top: 2px;" >
< button class = "button light jogbtn" onclick = "sendGcode( 'G10 P1 L20 X0 Y0')" style = "width: 69px;" >
< 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-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-grayBlue" data-fa-transform = "up-8 " style = "font-weight:900; font-family: Arial; font-size: 12px;" > setzero< / span >
< / span >
< / button >
< button class = "button light jogbtn" onclick = "sendGcode( 'G10 P1 L20 Z0')" style = "width: 68px;" >
2018-06-25 17:25:19 +00:00
< span class = "fa-layers fa-fw" >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / span >
2018-06-27 19:23:34 +00:00
< / button >
2018-06-25 17:25:19 +00:00
< / td >
< / tr >
< tr >
2018-06-27 19:23:34 +00:00
< td style = "padding-top: 3px;" >
2018-06-29 13:01:16 +00:00
< button class = "button light jogbtn" style = "width: 141px;" id = "gotozero" >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / span >
2018-06-27 19:23:34 +00:00
< / button >
2018-06-25 17:25:19 +00:00
< / td >
< / tr >
2018-06-29 13:01:16 +00:00
< / table > -->
2018-06-25 17:25:19 +00:00
< / div >
< div class = "cell" >
2018-06-27 19:23:34 +00:00
< table class = "jogtable" >
2018-06-25 17:25:19 +00:00
< tr >
< td >
< / td >
2018-06-21 20:02:40 +00:00
2018-06-25 17:25:19 +00:00
< td >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / td >
2018-06-21 20:02:40 +00:00
2018-06-25 17:25:19 +00:00
< td >
< / td >
2018-06-21 20:02:40 +00:00
2018-06-25 17:25:19 +00:00
< td >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / td >
< / tr >
< tr >
< td >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / td >
2018-06-21 20:02:40 +00:00
2018-06-25 17:25:19 +00:00
< td >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / td >
2018-06-21 20:02:40 +00:00
2018-06-25 17:25:19 +00:00
< td >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / td >
< td >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / td >
< / tr >
< tr >
< td >
2018-06-29 13:01:16 +00:00
< button class = "button light jogbtn" id = "dist01" style = "width: 100%; height: 30px; line-height: 28px;" >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / td >
< td >
2018-06-29 13:01:16 +00:00
< button class = "button light jogbtn" id = "dist1" style = "width: 100%; height: 30px; line-height: 28px;" >
2018-06-25 17:25:19 +00:00
< span class = " fa-layers fa-fw" >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / span >
2018-06-27 19:23:34 +00:00
< / button >
2018-06-25 17:25:19 +00:00
< / td >
< td >
2018-06-29 13:01:16 +00:00
< button class = "button light jogbtn" id = "dist10" style = "width: 100%; height: 30px; line-height: 28px;" >
2018-06-25 17:25:19 +00:00
< span class = " fa-layers fa-fw" >
2018-06-29 13:01:16 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / span >
2018-06-27 19:23:34 +00:00
< / button >
2018-06-25 17:25:19 +00:00
< / td >
< td >
2018-06-29 13:01:16 +00:00
< button class = "button light jogbtn" id = "dist100" style = "width: 100%; height: 30px; line-height: 28px;" >
2018-06-25 17:25:19 +00:00
< span class = " fa-layers fa-fw" >
2018-06-27 19:23:34 +00:00
< 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 >
2018-06-25 17:25:19 +00:00
< / span >
2018-06-27 19:23:34 +00:00
< / button >
2018-06-25 17:25:19 +00:00
< / 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 = "Feedrate:" data-clear-button = "false" value = "1000" style = "text-align: right;" / >
< / div >
< / td >
< / tr >
< / table >
< / div >
< div class = "cell" id = "frocell" >
2018-06-29 19:48:34 +00:00
< 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%"
2018-06-25 17:25:19 +00:00
data-cls-hint="bg-light
fg-dark shadow-1" data-cls-complete="bg-grayBlue">
< / div >
< div class = "cell" id = "trocell" >
2018-06-29 19:48:34 +00:00
< 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"
2018-06-25 17:25:19 +00:00
data-hint-mask="Tool: $1%" data-cls-hint="bg-light
fg-dark shadow-1" data-cls-complete="bg-grayBlue">
< / div >
< / div >
2018-06-22 19:49:51 +00:00
< / div >
2018-08-01 19:04:27 +00:00
< div id = "controlLogs" >
< ul class = "tabs-expand-sm" data-role = "tabs" >
2018-08-01 19:25:26 +00:00
< li > < a href = "#_target_1" > < i class = "far fa-fw fa-edit" > < / i > GCODE Editor< / a > < / li >
< li > < a href = "#_target_2" > < i class = "fas fa-fw fa-terminal" > < / i > Serial Console< / a > < / li >
2018-08-01 19:04:27 +00:00
< / ul >
< div id = "_target_1" >
< div id = "editor" > < / div >
< div class = "fixed-bottom m-3 mb-8" >
< button data-toggle = "tooltip" data-placement = "bottom" title = "Find and Replace" class = "button dark" onclick = "editor.execCommand('replace')" > < i class = "fas fa-search" > < / i > < / button >
< button data-toggle = "tooltip" data-placement = "bottom" title = "Select All" class = "button dark" onclick = "editor.execCommand('selectall')" > < i class = "far fa-check-square" > < / i > < / button >
< button data-toggle = "tooltip" data-placement = "bottom" title = "Undo" class = "button dark" onclick = "editor.execCommand('undo')" > < i class = "fas fa-undo" > < / i > < / button >
< button data-toggle = "tooltip" data-placement = "bottom" title = "Redo" class = "button dark" onclick = "editor.execCommand('redo')" > < i class = "fas fa-redo" > < / i > < / button >
< button data-toggle = "tooltip" data-placement = "bottom" title = "Go to End" class = "button dark" onclick = "editor.execCommand('gotoend')" > < i class = "fas fa-chevron-down" > < / i > < / button >
< button data-toggle = "tooltip" data-placement = "bottom" title = "Go to Start" class = "button dark" onclick = "editor.execCommand('gotostart')" > < i class = "fas fa-chevron-up" > < / i > < / button >
< button data-toggle = "tooltip" data-placement = "bottom" title = "Clear Editor" class = "button dark" onclick = "editor.execCommand('selectall'); editor.execCommand('del');" > < i class = "fas fa-eraser" > < / i > < / button >
<!-- <button data - toggle="tooltip" data - placement="bottom" title="Editor Settings" class="btn btn - xs btn - success btn - file" onclick="editor.execCommand('showSettingsMenu')"><i class="fa fa - cogs fa - fw"></i></span></button> -->
< / div >
< / div >
< div id = "_target_2" >
< div id = "console" > < / div >
< div class = "fixed-bottom m-3 mb-8" >
< form class = "inline-form" >
< 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 = "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 >
<!-- End controlLogs -->
2018-06-21 20:02:40 +00:00
< / center >
2018-06-21 21:04:41 +00:00
< / div >
2018-06-27 19:23:34 +00:00
< div id = "grblPanel" style = "display: none;" >
2018-06-25 20:13:58 +00:00
< div id = "grblconfig" > < / div >
< / div >
2018-07-24 12:58:26 +00:00
< div id = "updatePanel" style = "display: none;" >
2018-07-12 13:06:53 +00:00
< div id = "updateconsole" > Click "Check for Updates" above< / div >
< / div >
2018-06-22 19:49:51 +00:00
2018-06-21 20:02:40 +00:00
<!-- Bottom StatusBar -->
2018-06-22 19:49:51 +00:00
< div class = "fixed-bottom" >
< div class = "row" >
< div class = "cell-3" >
2018-06-21 20:02:40 +00:00
< div >
2018-06-29 13:01:16 +00:00
< span class = "badge inline bg-grayBlue fg-white" style = "width: 100%;" >
2018-06-22 19:49:51 +00:00
< span class = "fa-layers" data-toggle = "tooltip" data-placement = "bottom" title = "Flashes red when machine has entered ALARM state, click Clear Alarm button" >
2018-06-21 21:04:41 +00:00
< i id = "navbell" class = "fas fa-bell fg-red" style = "display: none;" > < / i >
2018-06-22 19:49:51 +00:00
< i class = "far fa-bell" > < / i >
2018-06-21 20:02:40 +00:00
< / span >
< / span >
< / div >
< / div >
2018-06-22 19:49:51 +00:00
< div class = "cell-3" >
2018-06-21 20:02:40 +00:00
< div >
2018-06-29 13:01:16 +00:00
< span class = "badge inline bg-grayBlue fg-white" id = "connectStatus" style = "width: 100%;" > Not Connected< / span >
2018-06-21 20:02:40 +00:00
< / div >
< / div >
2018-06-22 19:49:51 +00:00
< div class = "cell-3" >
2018-06-21 20:02:40 +00:00
< div >
2018-06-29 13:01:16 +00:00
< span class = "badge inline bg-grayBlue fg-white" id = "runStatus" style = "width: 100%;" > Not Connected< / span >
2018-06-21 20:02:40 +00:00
< / div >
< / div >
2018-06-22 19:49:51 +00:00
< div class = "cell-3" >
2018-06-21 20:02:40 +00:00
< div >
2018-06-29 13:01:16 +00:00
< span class = "badge inline bg-grayBlue fg-white" id = "gcodesent" style = "width: 100%;" > Queue: 0< / span >
2018-06-21 20:02:40 +00:00
< / div >
< / div >
2018-06-19 08:07:03 +00:00
< / div >
< / div >
< / div >
2018-06-21 20:02:40 +00:00
< / div >
2018-06-22 19:49:51 +00:00
<!-- <div style="display: none;" id="grblconfig"></div>
< div id = "grbl-placeholder" >
2018-06-21 20:02:40 +00:00
You need to connect to a compatible controller first!
< / div >
2018-06-22 19:49:51 +00:00
< button type = "button" id = "grblSaveBtn" onclick = "grblSaveSettings();" disabled > Save< / button > -->
2018-06-21 20:02:40 +00:00
< / body >
2018-06-19 08:07:03 +00:00
2018-06-22 19:49:51 +00:00
< script type = "text/javascript" src = "lib/fontawesome5/svg-with-js/js/fontawesome-all.min.js" > < / script >
< script type = "text/javascript" src = "lib/jquery/jquery.min.js" > < / script >
< script type = "text/javascript" src = "lib/ace/src-noconflict/ace.js" > < / script >
2018-06-25 17:25:19 +00:00
< script type = "text/javascript" src = "lib/metro4/js/metro.min.js" > < / script >
2018-06-19 08:07:03 +00:00
2018-06-22 19:49:51 +00:00
< script type = "text/javascript" src = "/lib/lodash.core.js" > < / script >
< script type = "text/javascript" src = "/socket.io/socket.io.js" > < / script >
2018-07-24 12:58:26 +00:00
2018-06-22 19:49:51 +00:00
< script type = "text/javascript" src = "js/main.js" > < / script >
2018-06-27 19:23:34 +00:00
< script type = "text/javascript" src = "js/ui.js" > < / script >
2018-06-22 19:49:51 +00:00
< 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 >
2018-06-20 13:00:05 +00:00
2018-06-25 17:25:19 +00:00
2018-06-21 20:02:40 +00:00
< / html >
