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;" >
< div class = "window-caption" style = "-webkit-app-region: drag;" >
< span class = "icon mif-cog" > < / span >
< span class = "title" > OpenBuids Machine Driver< / span >
< div class = "buttons" style = "-webkit-app-region: no-drag" >
< span data-role = "hint" data-hint-position = "bottom" data-hint-text = "Minimize to Tray" data-cls-hint = "bg-light fg-dark drop-shadow" class = "btn-min" onclick = "socket.emit('minimise')" > < / span >
< span data-role = "hint" data-hint-position = "bottom" data-hint-text = "Quit" 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 href = "#section-one" onclick = "connectionPanel();" > Connection< / a > < / li >
< li > < a href = "#section-two" onclick = "manualcontrolPanel();" > Manual Control< / a > < / li >
< li > < a href = "#section-three" onclick = "jobcontrolPanel();" > Job Setup< / a > < / li >
< / ul >
< div class = "content-holder" >
< div class = "section" id = "section-one" >
< div class = "group" >
< div class = "form-group" style = "width: calc(100vw - 200px);" >
< form class = "inline-form" >
< select data-prepend = " <i class='fab fa-usb'></i>" class = "success" data-role = "select" id = "portUSB" >
< option value = "" > Waiting for USB< / option >
< / select >
< button class = "button success" onclick = "selectPort()" id = "connectBtn" type = "button" > Connect< / button >
< button class = "button alert" style = "display:none;" onclick = "closePort()" id = "disconnectBtn" type = "button" > Disconnect< / button >
< / form >
< center > < small class = "text-muted" > Establish connection to the machine< / small > < / center >
< / div >
< span class = "title" > Machine Interface< / span >
< / div >
< div class = "group" style = "width: 140px;" >
< div 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 >
2018-06-20 13:00:05 +00:00
< / button >
< / div >
< / div >
2018-06-21 20:02:40 +00:00
< span class = "title" id = "firmwarename" > < / span >
< / div >
< div class = "group" style = "width: 50px;" >
< 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 >
< / button >
< span class = "title" > E-Stop< / span >
< / div >
< / div >
< div class = "section" id = "section-two" >
< div class = "group" style = "width: calc(100vw - 40px);" >
2018-06-21 21:04:41 +00:00
< label href = "#" class = "ribbon-button btn-file m-2" title = "Open a GCODE file" >
2018-06-21 20:02:40 +00:00
< span class = "icon" >
2018-06-21 21:04:41 +00:00
< i class = "far fa-folder-open fg-amber" > < / i >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-21 21:04:41 +00:00
< input id = "file" type = "file" accept = ".gcode, .gc, .tap, .nc" / >
< span class = "caption" > Open< br > GCODE< / span >
< / label >
<!-- <button class="ribbon - button">
2018-06-21 20:02:40 +00:00
< span class = "icon" >
2018-06-21 21:04:41 +00:00
< i class = "far fa-folder-opene" > < / i >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-21 21:04:41 +00:00
< span class = "caption" > Home< br > All< / span >
< / button > -->
2018-06-21 20:02:40 +00:00
< button class = "ribbon-button" onclick = "sendGcode('$H')" >
< span class = "icon" >
< i class = "fas fa-home" > < / i >
< / span >
< span class = "caption" > Home< br > All< / span >
< / button >
< button class = "ribbon-button" onclick = "sendGcode('G10 P1 L20 X0 Y0 Z0')" >
< span class = "icon" >
< i class = "fas fa-crosshairs" > < / i >
< / span >
< span class = "caption" > Set< br > Zero< / span >
< / button >
2018-06-21 21:04:41 +00:00
< button class = "ribbon-button" onclick = "socket.emit('runJob', gcode)" >
2018-06-21 20:02:40 +00:00
< span class = "icon" >
2018-06-21 21:04:41 +00:00
< i class = "fas fa-play fg-green" > < / i >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-21 21:04:41 +00:00
< span class = "caption fg-green" > Run< br > Job< / span >
2018-06-21 20:02:40 +00:00
< / button >
2018-06-20 13:00:05 +00:00
2018-06-21 21:04:41 +00:00
< button class = "ribbon-button" onclick = "socket.emit('pause', true)" >
2018-06-21 20:02:40 +00:00
< span class = "icon" >
2018-06-21 21:04:41 +00:00
< i class = "fas fa-pause" > < / i >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-21 21:04:41 +00:00
< span class = "caption" > Pause< / span >
2018-06-21 20:02:40 +00:00
< / button >
2018-06-20 13:00:05 +00:00
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" >
2018-06-21 21:04:41 +00:00
< i class = "fas fa-stop fg-red" > < / i >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-21 21:04:41 +00:00
< span class = "caption fg-red" > Abort< br > Job< / span >
2018-06-21 20:02:40 +00:00
< / button >
2018-06-21 21:04:41 +00:00
< button class = "ribbon-button" onclick = "sendGcode('M3 S1000')" >
2018-06-21 20:02:40 +00:00
< span class = "icon" >
2018-06-21 21:04:41 +00:00
< span class = "fa-layers fa-fw" >
< i class = "fas fa-bookmark" data-fa-transform = "rotate-180" > < / i >
< i class = "fas fa-screwdriver fg-green" data-fa-transform = "rotate-135 down-3" > < / i >
< / span >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-21 21:04:41 +00:00
< span class = "caption" > Tool< br > On< / span >
2018-06-21 20:02:40 +00:00
< / button >
2018-06-21 21:04:41 +00:00
< button class = "ribbon-button" onclick = "sendGcode('M5')" >
2018-06-21 20:02:40 +00:00
< span class = "icon" >
2018-06-21 21:04:41 +00:00
< span class = "fa-layers fa-fw" >
< i class = "fas fa-bookmark" data-fa-transform = "rotate-180" > < / i >
< i class = "fas fa-screwdriver fg-green" data-fa-transform = "rotate-135 down-3" > < / i >
< i class = "fas fa-ban fg-red" data-fa-transform = "grow-4" > < / i >
< / span >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-21 21:04:41 +00:00
< span class = "caption" > Tool< br > Off< / 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('clearAlarm', 2)" >
2018-06-21 20:02:40 +00:00
< span class = "icon" >
2018-06-21 21:04:41 +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 " >
< i id = "navbellBtn" class = "fas fa-bell fg-red" style = "display: none;" > < / i >
< i class = "far fa-bell " > < / i >
< / span >
2018-06-21 20:02:40 +00:00
< / span >
2018-06-21 21:04:41 +00:00
< span class = "caption" > Clear< br > Alarm< / span >
2018-06-21 20:02:40 +00:00
< / button >
2018-06-21 21:04:41 +00:00
< span class = "title" > Control< / span >
< / div >
< div class = "group" style = "width: 50px;" >
< 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-21 21:04:41 +00:00
< / button >
< span class = "title" > E-Stop< / span >
< / div >
< / div >
< div class = "section" id = "section-three" >
< div class = "group" style = "width: 300px;" >
<!-- -->
2018-06-21 20:02:40 +00:00
< span class = "title" > Job Control< / span >
< / div >
< div class = "group" style = "width: calc(100vw - 350px);" >
< span class = "title" > Override< / span >
< / div >
< div class = "group" style = "width: 50px;" >
< 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 >
< / button >
< span class = "title" > E-Stop< / span >
< / div >
< / div >
< / div >
< / nav >
2018-06-20 13:00:05 +00:00
2018-06-21 20:02:40 +00:00
< div id = "connectionPanel" >
< div id = "console" > < / div >
< div class = "fixed-bottom m-3 mb-8" >
< form class = "inline-form" style = "width: 100%;" >
< 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 id = "manualControlPanel" style = "display: none;" >
< br >
< center >
< table >
< tr >
< td rowspan = "2" >
< table >
< tr >
< td >
< div class = "glossydro" >
< div class = "float-left fg-red" > X< / div >
< div class = "float-right fg-red" id = "xPos" > 0.000< / div >
< / div >
< / td >
< / tr >
< tr >
< td >
< div class = "glossydro" >
< div class = "float-left fg-green" > Y< / div >
< div class = "float-right fg-green" id = "yPos" > 0.000< / div >
< / div >
< / td >
< / tr >
< tr >
< td >
< div class = "glossydro" >
< div class = "float-left fg-blue" > Z< / div >
< div class = "float-right fg-blue" id = "zPos" > 0.000< / div >
< / div >
< / td >
< / tr >
< / table >
< / td >
< td >
< / td >
< td >
< a href = "#" class = "glossybtn" id = "yP" >
< span class = "fa-layers fa-fw" >
< i class = "fas fa-arrow-up fg-green" data-fa-transform = "grow-4 down-18.5" > < / i >
< span class = "fa-layers-text fg-green" data-fa-transform = "up-14" style = "font-weight:900" > Y+< / span >
< / span >
< / a >
< / td >
< td >
< / td >
< td >
< / td >
< td >
< a href = "#" class = "glossybtn" id = "zP" >
< span class = "fa-layers fa-fw" >
< i class = "fas fa-arrow-up fg-blue" data-fa-transform = "grow-4 down-18.5" > < / i >
< span class = "fa-layers-text fg-blue" data-fa-transform = "up-14" style = "font-weight:900" > Z+< / span >
< / span >
< / a >
< / td >
< / tr >
< tr >
< td >
< a href = "#" class = "glossybtn" id = "xM" >
< span class = "fa-layers fa-fw" >
< i class = "fas fa-arrow-left fg-red" data-fa-transform = "grow-4 up-10.5" > < / i >
< span class = "fa-layers-text fg-red" data-fa-transform = "down-22" style = "font-weight:900" > X-< / span >
< / span >
< / a >
< / td >
< td >
< a href = "#" class = "glossybtn" id = "yM" >
< span class = "fa-layers fa-fw" >
< i class = "fas fa-arrow-down fg-green" data-fa-transform = "grow-4 up-10.5" > < / i >
< span class = "fa-layers-text fg-green" data-fa-transform = "down-22" style = "font-weight:900" > Y-< / span >
< / span >
< / a >
< / td >
< td >
< a href = "#" class = "glossybtn" id = "xP" >
< span class = "fa-layers fa-fw" >
< i class = "fas fa-arrow-right fg-red" data-fa-transform = "grow-4 up-10.5" > < / i >
< span class = "fa-layers-text fg-red" data-fa-transform = "down-22" style = "font-weight:900" > X+< / span >
< / span >
< / a >
< / td >
< td >
< / td >
< td >
< a href = "#" class = "glossybtn" id = "zM" >
< span class = "fa-layers fa-fw" >
< i class = "fas fa-arrow-down fg-blue" data-fa-transform = "grow-4 up-10.5" > < / i >
< span class = "fa-layers-text fg-blue" data-fa-transform = "down-22" style = "font-weight:900" > Z-< / span >
< / span >
< / a >
< / td >
< / tr >
< tr >
< td >
< a href = "#" class = "glossybtn" style = "height: 30px; width: 150px; line-height: 25px;" id = "gotozero" >
< span class = " fa-layers fa-fw " >
<!-- <i class="fas fa - arrow - down fg - blue " data - fa - transform="grow - 4 up - 5.5 "></i> -->
< span class = "fa-layers-text fg-amber" data-fa-transform = "down-1 " style = "font-weight:900" > GOTOZERO< / span >
< / span >
< / a >
< / td >
< td >
< a href = "#" class = "glossybtn" style = "height: 30px; line-height: 25px;" id = "dist01" >
< span class = " fa-layers fa-fw " >
<!-- <i class="fas fa - arrow - down fg - blue " data - fa - transform="grow - 4 up - 5.5 "></i> -->
< span id = "dist01label" class = "fa-layers-text fg-gray jogdist" data-fa-transform = "down-1 " style = "font-weight:900 " > 0.1mm< / span >
< / span >
< / a >
< / td >
< td >
< a href = "#" class = "glossybtn" style = "height: 30px; line-height: 25px;" id = "dist1" >
< span class = " fa-layers fa-fw " >
<!-- <i class="fas fa - arrow - down fg - blue " data - fa - transform="grow - 4 up - 5.5 "></i> -->
< span id = "dist1label" class = "fa-layers-text fg-gray jogdist" data-fa-transform = "down-1 " style = "font-weight:900" > 1mm< / span >
< / span >
< / a >
< / td >
< td >
< a href = "#" class = "glossybtn" style = "height: 30px; line-height: 25px;" id = "dist10" >
< span class = " fa-layers fa-fw " >
<!-- <i class="fas fa - arrow - down fg - blue " data - fa - transform="grow - 4 up - 5.5 "></i> -->
< span id = "dist10label" class = "fa-layers-text fg-dark jogdist" data-fa-transform = "down-1 " style = "font-weight:900" > 10mm< / span >
< / span >
< / a >
< / td >
< td >
< a href = "#" class = "glossybtn" style = "height: 30px; line-height: 25px;" id = "dist100" >
< span class = " fa-layers fa-fw " >
<!-- <i class="fas fa - arrow - down fg - blue " data - fa - transform="grow - 4 up - 5.5 "></i> -->
< span id = "dist100label" class = "fa-layers-text fg-gray jogdist" data-fa-transform = "down-1 " style = "font-weight:900" > 100mm< / span >
< / span >
< / a >
< / td >
< td >
< a href = "#" class = "glossybtn" style = "height: 30px; line-height: 25px;" id = "dist500" >
< span class = " fa-layers fa-fw " >
<!-- <i class="fas fa - arrow - down fg - blue " data - fa - transform="grow - 4 up - 5.5 "></i> -->
< span id = "dist500label" class = "fa-layers-text fg-gray jogdist" data-fa-transform = "down-1 " style = "font-weight:900" > 500mm< / span >
< / span >
< / a >
< / td >
< / tr >
< / table >
< / center >
2018-06-21 21:04:41 +00:00
< / div >
< div id = "jobPanel" style = "display: none;" >
<!-- -->
2018-06-21 20:02:40 +00:00
< / div >
<!-- Bottom StatusBar -->
< div class = "fixed-bottom " >
< div class = "row " >
< div class = "cell-3 " >
< div >
< span class = "badge inline bg-gray 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 " >
2018-06-21 21:04:41 +00:00
< i id = "navbell" class = "fas fa-bell fg-red" style = "display: none;" > < / i >
2018-06-21 20:02:40 +00:00
< i class = "far fa-bell " > < / i >
< / span >
< / span >
< / div >
< / div >
< div class = "cell-3 " >
< div >
2018-06-21 21:04:41 +00:00
< span class = "badge inline bg-gray fg-white " id = "connectStatus" style = "width: 100%; " > Not Connected< / span >
2018-06-21 20:02:40 +00:00
< / div >
< / div >
< div class = "cell-3 " >
< div >
2018-06-21 21:04:41 +00:00
< span class = "badge inline bg-gray fg-white " id = "runStatus" style = "width: 100%; " > Not Connected< / span >
2018-06-21 20:02:40 +00:00
< / div >
< / div >
< div class = "cell-3 " >
< div >
2018-06-21 21:04:41 +00:00
< span class = "badge inline bg-gray 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 >
<!-- <div style="display: none; " id="grblconfig "></div>
< div id = "grbl-placeholder " >
You need to connect to a compatible controller first!
< / div >
< button type = "button " id = "grblSaveBtn " onclick = "grblSaveSettings(); " disabled > Save< / button > -->
< / body >
2018-06-19 08:07:03 +00:00
2018-06-21 20:02:40 +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/metro4/js/metro.min.js " > < / script >
2018-06-19 08:07:03 +00:00
2018-06-21 20:02:40 +00:00
< 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/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-21 20:02:40 +00:00
< / html >
