<!doctype html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width,initial-scale=1,maximum-scale=1,minimal-ui,shrink-to-fit=no" / >
< meta name = "Title" content = "Marlin WebUI" / >
< meta name = "Description" content = "Marlin WebUI based on E4d@box WebUI" / >
< meta name = "Generator" content = "E4d@box" / >
< meta name = "Owner" content = "E4d@box" / >
< meta name = "Author" content = "MandrakeDesign" / >
< meta name = "google" content = "notranslate" / >
< meta http-equiv = "Content-Language" content = "en_GB" / >
< title > Marlin WebUI< / title >
< link rel = "shortcut icon" href = "#" / >
< link rel = "stylesheet" type = "text/css" href = "bootstrap.min.css" / >
< link rel = "stylesheet" type = "text/css" href = "webmarlin-font.css" >
< link rel = "stylesheet" type = "text/css" href = "webmarlin.css" / >
< script >
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){ top.location.replace('index-ie.html'); }
function hideAddressBar() { if(!window.location.hash) { if(document.height < window.outerHeight ) { document . body . style . height = (window.outerHeight + 50 ) + ' px ' ; }
setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
}}
window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );
< / script >
< script src = "moment.min.js" > < / script >
< script src = "webmarlin-class.js" > < / script >
< / head >
< body >
<!-- Javascript sources ========================================================================================== -->
< script type = "text/javascript" src = "jquery-3.5.1.slim.min.js" > < / script >
< script type = "text/javascript" src = "jquery.browser.min.js" > < / script >
< script type = "text/javascript" src = "bootstrap.min.js" > < / script >
< script type = "text/javascript" src = "bootstrap4-toggle.min.js" > < / script >
< script async = "" src = "filesaver.min.js" > < / script >
< script type = "text/javascript" src = "chart.min.js" > < / script >
< script type = "text/javascript" src = "webmarlin.js" > < / script >
<!-- Accordion =================================================================================================== -->
< div id = "main-panel" class = "h-100 bg-secondary m-0 p-0" >
< div class = "container-fluid h-100 p-0" >
< div class = "accordion accordion-always-open h-100 d-flex flex-column bg-light" id = "accordion-panels" >
<!-- PANEL: Fixed Title ==================================================================================== -->
< div class = "bg-dark text-light text-left p-2" >
< span class = "h4" > Marlin WebUI < / span > by atbox.tech
< button type = "button" class = "btn btn-sm btn-success float-right ml-1" data-toggle = "modal" data-target = "#modal-info" style = "width:35px; height:33px" > < i class = "icon icon-info" > < / i > < / button >
< a href = "http://marlinfw.org/" target = "_blank" class = "float-right" > < img src = "marlin-logo-dark.png" alt = "MarlinLogo" width = "100" height = "33" / > < / a >
< / div >
<!-- PANEL: Fixed connection status bar ==================================================================== -->
< div id = "div-conn-statusbar" class = "bg-danger text-light text-left p-1" >
< div class = "float-left font-italic h5 my-0 pl-1" >
< span id = "div-conn-statusico" class = "badge badge-light mr-2" style = "width:30px;" > < i class = "icon icon-plug" > < / i > < / span > < span id = "div-conn-statusmsg" > Disconnected< / span >
< / div >
< div class = "btn-toolbar float-right mr-1" role = "toolbar" >
< div class = "btn-group mr-1" role = "group" >
< button type = "button" id = "btn-wsconnect" class = "btn btn-sm btn-dark" style = "width:35px; height:30px" > < span id = "btn-connect-status" > < i class = "icon icon-bolt" > < / i > < / span > < / button >
< / div >
< div class = "btn-group" role = "group" >
< button type = "button" id = "btn-settings" class = "btn btn-sm btn-dark" style = "width:35px; height:30px" data-toggle = "modal" data-target = "#modal-settings" > < i class = "icon icon-sliders" > < / i > < / button >
< / div >
< / div >
< / div >
<!-- PANEL: Printer status ================================================================================= -->
< div class = "card-header flex-shrink-1 p-0 bg-dark text-light" id = "accordion-panel-status-head" >
< button class = "btn btn-sm btn-dark btn-block text-left" type = "button" data-toggle = "collapse" data-target = "#accordion-panel-status-body" aria-expanded = "true" aria-controls = "accordion-panel-status-body" >
< span class = "h5" > < span class = "badge badge-success" style = "width:30px;" > < i class = "icon icon-info-circled" > < / i > < / span > < span class = "ml-2" > Status< / span > < / span >
< div class = "badge badge-secondary float-right" > < span class = "h5 icon icon-chevron-down" > < / span > < / div >
< / button >
< / div >
< div id = "accordion-panel-status-body" class = "collapse flex-grow-1 collapse-panel" aria-labelledby = "accordion-panel-status-head" data-parent = "#accordion-panels" >
< div class = "card-body h-100 border-bottom p-1 text-left" >
< div class = "card mb-1 border-0" >
< div class = "card-header card-header-title text-light bg-secondary m-0 p-1" > < i class = "icon icon-info mr-1 ml-1" > < / i > Printer status< / div >
< div class = "card-body px-0 py-1 bg-light badge-description" >
< div class = "border-bottom pb-1" >
Printing status < div id = "div-pstatus-sdprint" class = "badge badge-danger badge-description float-right pb-1" > Idle< / div >
< / div >
< div id = "div-pstatus-timer" class = "border-bottom py-1 collapse" >
Printing timer
< div class = "float-right ml-1" > Remain: < span id = "div-pstatus-timer-remain" class = "badge badge-info badge-description pb-1" > 0:45:12< / span > < / div >
< div class = "float-right ml-1" > Estimated: < span id = "div-pstatus-timer-estimated" class = "badge badge-info badge-description pb-1" > 1:12:34< / span > < / div >
< div class = "float-right" > Elapsed: < span id = "div-pstatus-timer-elapsed" class = "badge badge-info badge-description pb-1" > 0:00:00< / span > < / div >
< / div >
< div id = "div-pstatus-progress" class = "pt-1 collapse" >
Printing progress:
< div id = "div-pstatus-progress-percent" class = "badge badge-info badge-description float-right pb-1" > 10%< / div >
< div id = "div-pstatus-progress-bytes" class = "badge badge-info badge-description float-right pb-1 mr-1" > 1 of 123456< / div >
< div class = "progress mt-1" style = "height: 10px;" > < div class = "progress-bar bg-success" role = "progressbar" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100" > < / div > < / div >
< / div >
< / div >
< / div >
< div class = "card mb-1 border-0" >
< div class = "card-header card-header-title text-light bg-secondary m-0 p-1" > < i class = "icon icon-thermometer mr-1 ml-1" > < / i > Temperatures< / div >
< div class = "card-body px-0 py-1 bg-light" >
< div >
Auto temperature detection
< div class = "float-right form-inline" >
< select id = "auto-temp-interval" class = "form-control form-control-sm mr-1" style = "width:80px;" disabled >
< option value = "1" > 1 sec< / option >
< option value = "5" > 5 sec< / option >
< option value = "10" > 10 sec< / option >
< option value = "30" > 30 sec< / option >
< option value = "60" > 60 sec< / option >
< / select >
< input type = "checkbox" id = "set-auto-temp" data-input-type = "togglebtn" data-size = "sm" data-width = "80" data-toggle = "toggle" data-onstyle = "success" data-offstyle = "outline-dark" data-on = "ON" data-off = "OFF" disabled >
< / div >
< / div >
< canvas id = "chart-temps" height = "150" > < / canvas >
< table class = "w-100" cellpadding = "0" cellspacing = "0" >
< tr >
< td width = "40%" >
< div class = "card mr-1" >
< div class = "card-header py-0 px-1 bg-info text-light card-header-description" > Sensor< / div >
< div class = "card-body py-0 px-1 card-header-description" >
< table class = "w-100" >
< tr > < td class = "border-bottom" style = "height:28px;" > Hotend (extruder) sensor< / td > < / tr >
< tr > < td style = "height:28px;" > Bed sensor< / td > < / tr >
< / table >
< / div >
< / div >
< / td >
< td width = "15%" >
< div class = "card mr-1" >
< div class = "card-header py-0 px-1 bg-info text-light card-header-description" > Detected< / div >
< div class = "card-body py-0 px-1 card-header-description text-right" >
< table class = "w-100" >
< tr > < td class = "border-bottom" style = "height:28px;" > < div id = "div-temp-extruder-detect" > -< / div > < / td > < / tr >
< tr > < td style = "height:28px;" > < div id = "div-temp-bed-detect" > -< / div > < / td > < / tr >
< / table >
< / div >
< / div >
< / td >
< td width = "15%" >
< div class = "card mr-1" >
< div class = "card-header py-0 px-1 bg-info text-light card-header-description" > Set< / div >
< div class = "card-body py-0 px-1 card-header-description text-right" >
< table class = "w-100" >
< tr > < td class = "border-bottom" style = "height:28px;" > < div id = "div-temp-extruder-set" > -< / div > < / td > < / tr >
< tr > < td style = "height:28px;" > < div id = "div-temp-bed-set" > -< / div > < / td > < / tr >
< / table >
< / div >
< / div >
< / td >
< td width = "15%" >
< div class = "card mr-1" >
< div class = "card-header py-0 px-1 bg-info text-light card-header-description" > Unit< / div >
< div class = "card-body py-0 px-1 card-header-description text-center" >
< table class = "w-100" >
< tr > < td class = "border-bottom" style = "height:28px;" > < div id = "div-temp-extruder-unit" > -< / div > < / td > < / tr >
< tr > < td style = "height:28px;" > < div id = "div-temp-bed-unit" > -< / div > < / td > < / tr >
< / table >
< / div >
< / div >
< / td >
< td width = "20%" >
< div class = "card" >
< div class = "card-header py-0 px-1 bg-info text-light card-header-description" > Chart display< / div >
< div class = "card-body py-0 px-1 card-header-description text-center" >
< table class = "w-100" >
< tr >
< td class = "border-bottom" style = "height:28px;" >
< div class = "custom-control custom-switch" >
< input type = "checkbox" class = "custom-control-input" id = "chart-show-extruder" checked disabled >
< label id = "chart-show-extruder-label" class = "custom-control-label" for = "chart-show-extruder" > Show< / label >
< / div >
< / td >
< / tr >
< tr >
< td style = "height:28px;" >
< div class = "custom-control custom-switch" >
< input type = "checkbox" class = "custom-control-input" id = "chart-show-bed" checked disabled >
< label id = "chart-show-bed-label" class = "custom-control-label" for = "chart-show-bed" > Show< / label >
< / div >
< / td >
< / tr >
< / table >
< / div >
< / div >
< / td >
< / tr >
< / table >
< / div >
< div class = "card mb-1 border-0" >
< div class = "card-header card-header-title text-light bg-secondary m-0 p-1" > < i class = "icon icon-refresh mr-1 ml-1" > < / i > Hotend fan speed< / div >
< div class = "card-body px-0 py-1 bg-light" >
< table width = "100%" cellspacing = "0" cellpadding = "0" border = "0" >
< tr >
< td width = "70%" valign = "top" class = "pr-2" >
< table class = "w-100" cellspacing = "0" cellpadding = "0" border = "0" >
< tr style = "height:20px;" >
< td class = "border-bottom card-header-description" > Current fan speed< / td >
< td class = "border-bottom card-header-description text-right" > < div id = "div-fan-speed-current" > -< / div > < / td >
< / tr >
< tr style = "height:20px;" >
< td class = "border-bottom card-header-description" > Set fan speed< / td >
< td class = "border-bottom card-header-description text-right" > < div id = "div-fan-speed-set" > -< / div > < / td >
< / tr >
< tr >
< td colspan = "2" class = "card-header-description" >
< table class = "w-100" >
< tr >
< td width = "9%" class = "text-left" > OFF< / td >
< td width = "9%" class = "text-center" > 10%< / td >
< td width = "9%" class = "text-center" > 20%< / td >
< td width = "9%" class = "text-center" > 30%< / td >
< td width = "9%" class = "text-center" > 40%< / td >
< td width = "10%" class = "text-center" > 50%< / td >
< td width = "9%" class = "text-center" > 60%< / td >
< td width = "9%" class = "text-center" > 70%< / td >
< td width = "9%" class = "text-center" > 80%< / td >
< td width = "9%" class = "text-center" > 90%< / td >
< td width = "9%" class = "text-right" > FULL< / td >
< / tr >
< / table >
< / td >
< / tr >
< tr > < td colspan = "2" > < input type = "range" class = "custom-range" min = "0" max = "100" step = "1" value = "0" id = "fan-speed-range" disabled > < / td > < / tr >
< / table >
< / td >
< td width = "30%" > < canvas id = "chart-fanspeed" height = "70" width = "100" > < / canvas > < / td >
< / tr >
< / table >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- PANEL: Printer controls =============================================================================== -->
< div class = "card-header flex-shrink-1 p-0 bg-dark text-light" id = "accordion-panel-controls-head" >
< button class = "btn btn-sm btn-dark btn-block text-left" type = "button" data-toggle = "collapse" data-target = "#accordion-panel-controls-body" aria-expanded = "true" aria-controls = "accordion-panel-controls-body" >
< span class = "h5" > < span class = "badge badge-success" style = "width:30px;" > < i class = "icon icon-tasks" > < / i > < / span > < span class = "ml-2" > Controls< / span > < / span >
< div class = "badge badge-secondary float-right" > < span class = "h5 icon icon-chevron-down" > < / span > < / div >
< / button >
< / div >
< div id = "accordion-panel-controls-body" class = "collapse flex-grow-1 collapse-panel" aria-labelledby = "accordion-panel-controls-head" data-parent = "#accordion-panels" >
< div class = "card-body h-100 border-bottom p-1 text-left" >
< div class = "card mb-1 border-0" >
< div class = "card-header card-header-title text-light bg-secondary m-0 p-1" > < i class = "icon icon-home mr-1 ml-1" > < / i > Home positioning< / div >
< div class = "card-body px-0 py-1 bg-light badge-description" >
< table class = "w-100" cellpadding = "0" cellspacing = "0" >
< tr >
< td class = "text-center text-light bg-info rounded-top" > All axis< / td >
< td style = "width:2px" > < / td >
< td class = "text-center text-light bg-info rounded-top" > X axis< / td >
< td style = "width:2px" > < / td >
< td class = "text-center text-light bg-info rounded-top" > Y axis< / td >
< td style = "width:2px" > < / td >
< td class = "text-center text-light bg-info rounded-top" > Z axis< / td >
< / tr >
< tr >
< td class = "text-center" > < button id = "btn-move-home-all" type = "button" class = "btn btn-block btn-dark" style = "border-radius:0px 0px 5px 5px;" disabled > < i class = "icon icon-home mr-1" > < / i > < i class = "icon icon-arrows" > < / i > < / button > < / td >
< td style = "width:2px" > < / td >
< td class = "text-center" > < button id = "btn-move-home-x" type = "button" class = "btn btn-block btn-dark" style = "border-radius:0px 0px 5px 5px;" disabled > < i class = "icon icon-home mr-1" > < / i > < i class = "icon icon-arrows-h" > < / i > < / button > < / td >
< td style = "width:2px" > < / td >
< td class = "text-center" > < button id = "btn-move-home-y" type = "button" class = "btn btn-block btn-dark" style = "border-radius:0px 0px 5px 5px;" disabled > < i class = "icon icon-home mr-1" > < / i > < i class = "icon icon-arrows-v" > < / i > < / button > < / td >
< td style = "width:2px" > < / td >
< td class = "text-center" > < button id = "btn-move-home-z" type = "button" class = "btn btn-block btn-dark" style = "border-radius:0px 0px 5px 5px;" disabled > < i class = "icon icon-home mr-1" > < / i > < i class = "icon icon-angle-double-down" > < / i > < / button > < / td >
< / tr >
< / table >
< / div >
< / div >
< div class = "card mb-1 border-0" >
< div class = "card-header card-header-title text-light bg-secondary m-0 p-1" > < i class = "icon icon-arrows-alt mr-1 ml-1" > < / i > Movements< / div >
< div class = "card-body px-0 py-1 bg-light badge-description" >
< div class = "list-group list-group-flush" >
< div class = "list-group-item bg-light px-0 py-1" >
< label for = "txt-move-steps" class = "" > Steps movements size (mm)< / label >
< div class = "form-group" >
< input type = "text" id = "txt-move-steps" class = "form-control form-control-sm float-right" value = "10" style = "width:80px" / >
< input type = "range" class = "form-control-range" min = "0" max = "50" step = "1" id = "customRange3" value = "10" >
< / div >
< / div >
< div class = "list-group-item bg-light px-0 py-1" >
Move on X axis
< button type = "button" id = "btn-move-xr" class = "btn btn-sm btn-dark float-right" style = "width:80px;" > < i class = "icon icon-long-arrow-right" > < / i > < / button >
< button type = "button" id = "btn-move-xl" class = "btn btn-sm btn-dark float-right mr-1" style = "width:80px;" > < i class = "icon icon-long-arrow-left" > < / i > < / button >
< / div >
< div class = "list-group-item bg-light px-0 py-1" >
Move on Y axis
< button type = "button" id = "btn-move-yb" class = "btn btn-sm btn-dark float-right" style = "width:80px;" > < i class = "icon icon-long-arrow-down" > < / i > < / button >
< button type = "button" id = "btn-move-yf" class = "btn btn-sm btn-dark float-right mr-1" style = "width:80px;" > < i class = "icon icon-long-arrow-up" > < / i > < / button >
< / div >
< div class = "list-group-item bg-light px-0 py-1" >
Move on Z axis
< button type = "button" id = "btn-move-zd" class = "btn btn-sm btn-dark float-right" style = "width:80px;" > < i class = "icon icon-angle-double-down" > < / i > < / button >
< button type = "button" id = "btn-move-zu" class = "btn btn-sm btn-dark float-right mr-1" style = "width:80px;" > < i class = "icon icon-angle-double-up" > < / i > < / button >
< / div >
< / div >
< / div >
< / div >
< div class = "card mb-1 border-0" >
< div class = "card-header card-header-title text-light bg-secondary m-0 p-1" > < i class = "icon icon-cog mr-1 ml-1" > < / i > Steppers locking< / div >
< div class = "card-body px-0 py-1 bg-light badge-description" >
< table class = "w-100" cellpadding = "0" cellspacing = "0" >
< tr >
< td colspan = "6" class = "pb-1" >
Lock/Unlock all steppers (X, Y, Z, E)
< / td >
< td class = "pb-1" >
< input type = "checkbox" class = "float-right" id = "set-stepper-all" data-input-type = "togglebtn" data-size = "sm" data-width = "100%" data-toggle = "toggle" data-onstyle = "success" data-offstyle = "outline-dark" data-on = "Lock" data-off = "Unlock" disabled >
< / td >
< / tr >
< tr >
< td class = "text-center text-light bg-info rounded-top" > X stepper< / td >
< td style = "width:2px" > < / td >
< td class = "text-center text-light bg-info rounded-top" > Y stepper< / td >
< td style = "width:2px" > < / td >
< td class = "text-center text-light bg-info rounded-top" > Z stepper< / td >
< td style = "width:2px" > < / td >
< td class = "text-center text-light bg-info rounded-top" > E stepper< / td >
< / tr >
< tr >
< td class = "text-center pt-1" > < input type = "checkbox" id = "set-stepper-x" data-input-type = "togglebtn" data-size = "sm" data-width = "100%" data-toggle = "toggle" data-onstyle = "success" data-offstyle = "outline-dark" data-on = "Locked" data-off = "Unlocked" disabled > < / td >
< td style = "width:2px" > < / td >
< td class = "text-center pt-1" > < input type = "checkbox" id = "set-stepper-y" data-input-type = "togglebtn" data-size = "sm" data-width = "100%" data-toggle = "toggle" data-onstyle = "success" data-offstyle = "outline-dark" data-on = "Locked" data-off = "Unlocked" disabled > < / td >
< td style = "width:2px" > < / td >
< td class = "text-center pt-1" > < input type = "checkbox" id = "set-stepper-z" data-input-type = "togglebtn" data-size = "sm" data-width = "100%" data-toggle = "toggle" data-onstyle = "success" data-offstyle = "outline-dark" data-on = "Locked" data-off = "Unlocked" disabled > < / td >
< td style = "width:2px" > < / td >
< td class = "text-center pt-1" > < input type = "checkbox" id = "set-stepper-e" data-input-type = "togglebtn" data-size = "sm" data-width = "100%" data-toggle = "toggle" data-onstyle = "success" data-offstyle = "outline-dark" data-on = "Locked" data-off = "Unlocked" disabled > < / td >
< / tr >
< / table >
< div class = "row mb-1" >
< div class = "col" >
< / div >
< / div >
< / div >
< / div >
< div class = "card mb-1 border-0" >
< div class = "card-header card-header-title text-light bg-secondary m-0 p-1" > < i class = "icon icon-tencent-weibo mr-1 ml-1" > < / i > Filament< / div >
< div class = "card-body px-0 py-1 bg-light badge-description" >
< / div >
< / div >
< / div >
< / div >
<!-- PANEL: File management ================================================================================ -->
< div class = "card-header flex-shrink-1 p-0 bg-dark text-light" id = "accordion-panel-file-head" >
< button class = "btn btn-sm btn-dark btn-block text-left" type = "button" data-toggle = "collapse" data-target = "#accordion-panel-file-body" aria-expanded = "true" aria-controls = "accordion-panel-file-body" >
< span class = "h5" > < span class = "badge badge-success" style = "width:30px;" > < i class = "icon icon-file" > < / i > < / span > < span class = "ml-2" > File management< / span > < / span >
< div class = "badge badge-secondary float-right" > < span class = "h5 icon icon-chevron-down" > < / span > < / div >
< / button >
< / div >
< div id = "accordion-panel-file-body" class = "collapse flex-grow-1 collapse-panel" aria-labelledby = "accordion-panel-file-head" data-parent = "#accordion-panels" >
< div class = "card-body h-100 p-1 text-left" >
< div class = "card mb-1 border-0" >
< div class = "card-header card-header-title text-light bg-secondary m-0 p-1" > < i class = "icon icon-upload mr-1 ml-1" > < / i > Upload...< / div >
< div class = "card-body px-0 py-1 bg-light" >
< div class = "input-group input-group-sm mb-1" >
< div class = "custom-file" >
< input type = "file" class = "custom-file-input" id = "file-upload" accept = ".g,.gco,.gcode" aria-describedby = "btn-file-upload" disabled >
< label id = "file-upload-label" class = "custom-file-label" for = "file-upload" data-browse = 'Pick' > Choose file< / label >
< / div >
< div class = "input-group-append" >
< button id = "btn-file-upload" class = "btn btn-sm btn-success" type = "button" disabled > Upload< i class = "icon icon-upload ml-1" > < / i > < / button >
< / div >
< / div >
< div id = "upload-process-collapse" class = "collapse mt-1" >
< table class = "w-100 mb-1" cellspacing = "0" cellpadding = "0" >
< tr >
< td width = "34%" >
< div class = "card mr-1" >
< div class = "card-header py-0 px-1 bg-info text-light card-header-description" > Filename (DOS8 Format)< / div >
< div id = "div-upload-fname" class = "card-body py-0 px-1 card-header-description text-center" > -< / div >
< / div >
< / td >
< td width = "33%" >
< div class = "card" >
< div class = "card-header py-0 px-1 bg-info text-light card-header-description" > File size< / div >
< div id = "div-upload-fsize" class = "card-body py-0 px-1 card-header-description text-center" > -< / div >
< / div >
< / td >
< td width = "33%" >
< div class = "card ml-1" >
< div class = "card-header py-0 px-1 bg-info text-light card-header-description" > GCode Lines< / div >
< div id = "div-upload-fproc" class = "card-body py-0 px-1 card-header-description text-center" > -< / div >
< / div >
< / td >
< / tr >
< / table >
< div class = "card" >
< div class = "card-header py-0 px-1 bg-info text-light card-header-description" > File processing< / div >
< table class = "w-100" cellspacing = "0" cellpadding = "0" >
< tr >
< td width = "60%" class = "p-1" >
< div id = "upload-progress-text" class = "card-header-description" > < / div >
< div class = "progress" >
< div id = "upload-progressbar" class = "progress-bar progress-bar-striped progress-bar-animated bg-info" role = "progressbar" aria-valuenow = "0" aria-valuemin = "0" aria-valuemax = "100" style = "width: 0%;" > < / div >
< / div >
< / td >
< td width = "40%" class = "p-1 text-right" >
< button id = "btn-file-proc-cancel" class = "btn btn-sm btn-danger" type = "button" disabled > Cancel< i class = "icon icon-ban ml-1" > < / i > < / button >
< button id = "btn-file-proc" class = "btn btn-sm btn-info" type = "button" disabled > Process< i class = "icon icon-cog ml-1" > < / i > < / button >
< / td >
< / tr >
< / table >
< / div >
< / div >
< / div >
< / div >
< div class = "card mb-0 border-0" >
< div class = "card-header card-header-title text-white bg-secondary m-0 p-1" > < i class = "icon icon-file ml-1 mr-1" > < / i > SD Content management< / div >
< div class = "card-body px-0 py-1 bg-light" >
< div >
< button id = "btn-get-sdcontent" class = "btn btn-sm btn-success" disabled > < i class = "icon icon-angle-double-down mr-1" > < / i > Get content< / button >
< div class = "btn-group float-right" role = "group" >
< button id = "btn-set-sdinit" class = "btn btn-sm btn-outline-success" style = "width:120px" disabled > < i class = "icon icon-long-arrow-down mr-1" > < / i > SD Init< / button >
< button id = "btn-set-sdrelease" class = "btn btn-sm btn-outline-success" style = "width:120px" disabled > < i class = "icon icon-long-arrow-up mr-1" > < / i > SD Release< / button >
< / div >
< / div >
< div id = "div-sd-selected-file" class = "collapse mt-1 show" >
< div class = "input-group input-group-sm" >
< div class = "input-group-prepend" > < span class = "input-group-text" id = "lbl-sdfile-selected" > Selected file:< / span > < / div >
< input type = "text" id = "txt-sdfile-selected" class = "form-control" aria-describedby = "lbl-sdfile-selected" value = "" readonly / >
< div class = "input-group-append" >
< button id = "btn-set-sdprint" class = "btn btn-sm btn-success" data-toggle = "modal" data-target = "#modal-sdfile-print" onclick = "WmButtons.PrintSdConfirm();" disabled > < i class = "icon icon-print" > < / i > < / button >
< button id = "btn-set-sddelete" class = "btn btn-sm btn-danger" data-toggle = "modal" data-target = "#modal-sdfile-delete" onclick = "WmButtons.DeleteSdConfirm();" disabled > < i class = "icon icon-trash" > < / i > < / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "card mb-0 border-0" >
< div class = "card-header card-header-title text-white bg-secondary m-0 p-1" >
< div class = "float-right" > Files: < div id = "div-sdlist-file-count" class = "badge badge-light" > 0< / div > < / div >
< div class = "float-right mr-1" > Folders: < div id = "div-sdlist-folder-count" class = "badge badge-light" > 0< / div > < / div >
< i class = "icon icon-file ml-1 mr-1" > < / i > SD File list
< / div >
< div class = "card-body px-0 py-1 bg-light" > < div id = "list-sd-content" class = "list-group list-group-flush" > < / div > < / div >
< / div >
< / div >
< / div >
<!-- PANEL: Console ======================================================================================== -->
< div class = "card-header flex-shrink-1 p-0 bg-dark text-light" id = "accordion-panel-console-head" >
< button class = "btn btn-sm btn-dark btn-block text-left" type = "button" data-toggle = "collapse" data-target = "#accordion-panel-console-body" aria-expanded = "true" aria-controls = "accordion-panel-console-body" >
< span class = "h5" > < span class = "badge badge-success" style = "width:30px;" > < i class = "icon icon-terminal" > < / i > < / span > < span class = "ml-2" > Console< / span > < / span >
< div class = "badge badge-secondary float-right" > < span class = "h5 icon icon-chevron-down" > < / span > < / div >
< div id = "div-counter-badge" class = "badge badge-secondary float-right mr-1" > < span id = "log-counter-badge" class = "h5" > 0< / span > < / div >
< / button >
< / div >
< div id = "accordion-panel-console-body" class = "collapse flex-grow-1 collapse-panel" aria-labelledby = "accordion-panel-console-head" data-parent = "#accordion-panels" >
< div class = "card-body h-100 p-1 text-left" >
< label for = "text-gcommand" class = "mb-0 field-labels" > G-Code command:< / label >
< div class = "input-group" >
< div class = "input-group-prepend" >
< a class = "btn btn-sm btn-dark" target = "_blank" href = "https://marlinfw.org/meta/gcode/" > < i class = "icon icon-info" > < / i > < / a >
< button class = "btn btn-sm btn-outline-dark" type = "button" id = "btn-gcommand-preset" data-toggle = "modal" data-target = "#modal-presets" > < i class = "icon icon-tasks" > < / i > < / button >
< / div >
< input type = "text" id = "text-gcommand" class = "form-control form-control-sm border-dark text-uppercase" value = "" required >
< div class = "input-group-append" >
< button class = "btn btn-sm btn-outline-dark" type = "button" id = "btn-gcommand-checksum" data-toggle = "button" aria-pressed = "false" onclick = "WmButtons.ToggleChecksumDiv();" > < i class = "icon icon-check-square" > < / i > < / button >
< button class = "btn btn-sm btn-dark mr-1" type = "button" id = "btn-gcommand" > Send < i class = "icon icon-chevron-right" > < / i > < / button >
< / div >
< / div >
< div id = "checksum-gcommand-div" class = "collapse m-0 pr-1 text-right" >
< span class = "field-description mr-1" > GCode checksum value:< / span >
< span class = "h5" > < span class = "badge badge-secondary" id = "checksum-gcommand-value" style = "width:100px;" > < / span > < / span >
< / div >
< div id = "checksum-gcommand-div" class = "input-group input-group-sm collapse my-1" >
< input type = "text" class = "form-control" aria-describedby = "checksum-gcommand-value" placeholder = "GCode checksum value" readonly / >
< div class = "input-group-append text-center" > < span class = "input-group-text" id = "checksum-gcommand-value" style = "width:100px;" > < / span > < / div >
< / div >
< label for = "btn-gcommand" class = "mb-0 field-labels" > Console output:< / label >
< div class = "border rounded p-0 mb-1 console-listbox text-left" >
< ul class = "list-group list-group-flush" id = "gcommand-console-list" > < / ul >
< / div >
< div class = "row" >
< div class = "col" > < button class = "btn btn-sm btn-secondary btn-block" type = "button" id = "btn-clear-console" > < i class = "icon icon-ban mr-1" > < / i > Clear list< / button > < / div >
< div class = "col" > < button class = "btn btn-sm btn-success btn-block" type = "button" id = "btn-export-console" > < i class = "icon icon-angle-double-down mr-1" > < / i > Save..< / button > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- MODAL: About window ========================================================================================= -->
< div class = "modal fade" id = "modal-info" tabindex = "-1" role = "dialog" aria-hidden = "true" >
< div class = "modal-dialog modal-popup" role = "document" >
< div class = "modal-content" >
< div class = "modal-header bg-secondary text-light m-0 px-2 py-1" >
< span class = "h5 font-italic mt-1" > < i class = "icon icon-info mr-2" > < / i > Info...< / span >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< / div >
< div class = "modal-body p-2 text-left" >
< span class = "h3" > Marlin WebUI< / span >
< p > Release date: January, 1 2020< / p >
< p >
< i class = "icon icon-github" > < / i > Github project: < a href = "https://github.com/exilaus/E4d-box-project" target = "_blank" > E4d-box-project< / a > < br / >
< i class = "icon icon-facebook-square" > < / i > Facebook: < a href = "https://www.facebook.com/groups/372792116726814/about/" target = "_blank" > E4d@box< / a >
< / p >
< p > Open source dependencies:< / p >
< ul >
< li > < a href = "https://marlinfw.org/" target = "_blank" > Marlin firmware< / a > < / li >
< li > < a href = "https://jquery.com/" target = "_blank" > JQuery 3.5.1 (slim version)< / a > < / li >
< li > < a href = "https://getbootstrap.com/" target = "_blank" > Bootstrap v4.5.0< / a > < / li >
< li > < a href = "https://gitbrent.github.io/bootstrap4-toggle/" target = "_blank" > Bootstrap4 toggle switch v3.6.1< / a > < / li >
< li > < a href = "http://fontastic.me/" > Fontastic< / a >
< li > < a href = "https://www.chartjs.org/" target = "_blank" > Chart.js< / a > < / li >
< li > < a href = "https://github.com/eligrey/FileSaver.js" target = "_blank" > FileSaver.js< / a > < / li >
< / ul >
< / div >
< div class = "modal-footer bg-secondary m-0 p-1" > < button type = "button" class = "btn btn-dark btn-block" data-dismiss = "modal" > Close< / button > < / div >
< / div >
< / div >
< / div >
<!-- MODAL: Settings ============================================================================================= -->
< div class = "modal fade" id = "modal-settings" data-backdrop = "static" tabindex = "-1" role = "dialog" aria-hidden = "true" >
< div class = "modal-dialog modal-popup" role = "document" >
< div class = "modal-content" >
< div class = "modal-header bg-secondary text-light m-0 px-2 py-1" >
< span class = "h5 font-italic mt-1" > < i class = "icon icon-sliders mr-2" > < / i > Settings..< / span >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< / div >
< div class = "modal-body p-1 text-left" >
< ul class = "list-group list-group-flush" >
< li class = "list-group-item p-1" >
< div class = "row" >
< div class = "col-5 m-0" > Auto connect:< / div >
< div class = "col-7 m-0" > < input type = "checkbox" id = "set-auto-connect" data-size = "sm" data-width = "100" data-toggle = "toggle" data-onstyle = "success" data-offstyle = "outline-dark" data-on = "ON" data-off = "OFF" > < / div >
< / div >
< small class = "form-text text-muted font-italic mt-0" > If ON the application will try to connect automatically on start< / small >
< / li >
< li class = "list-group-item p-1" >
< div class = "row" >
< div class = "col-5 m-0" > Temp interval:< / div >
< div class = "col-7 m-0" >
< select class = "form-control form-control-sm mb-1" id = "set-default-autotemp" >
< option value = "1" > 1 sec< / option >
< option value = "5" > 5 sec< / option >
< option value = "10" > 10 sec< / option >
< option value = "30" > 30 sec< / option >
< option value = "60" > 60 sec< / option >
< / select >
< / div >
< / div >
< small class = "form-text text-muted font-italic mt-0" > Set the default temperature detection interval (secs)< / small >
< / li >
< li class = "list-group-item p-1" >
< div class = "row" >
< div class = "col-5 m-0" > Temp unit:< / div >
< div class = "col-7 m-0" >
< select class = "form-control form-control-sm mb-1" id = "set-default-tempunit" >
< option value = "0" > Celsius (default)< / option >
< option value = "1" > Fahrenheit< / option >
< option value = "2" > Kelvin< / option >
< / select >
< / div >
< / div >
< small class = "form-text text-muted font-italic mt-0" > Set the default temperature unit< / small >
< / li >
< li class = "list-group-item p-1" >
< div class = "row mb-0" >
< div class = "col-5 m-0" > Default panel:< / div >
< div class = "col-7 m-0" >
< select class = "form-control form-control-sm mb-1" id = "set-default-panel" >
< option value = "4" > Console< / option >
< option value = "1" > Controls< / option >
< option value = "0" > Status (default)< / option >
< option value = "2" > Temperature< / option >
< option value = "3" > Upload< / option >
< / select >
< / div >
< / div >
< small class = "form-text text-muted font-italic mt-0" > Set the default shown panel on start< / small >
< / li >
< li class = "list-group-item p-1" >
< div class = "row" >
< div class = "col-5 m-0" > Trace direction:< / div >
< div class = "col-7 m-0" >
< div class = "btn-group btn-group-toggle" data-toggle = "buttons" >
< label class = "btn btn-sm btn-secondary" > < input type = "radio" name = "set-trace-mode" id = "set-trace-mode-append" > < i class = "icon icon-angle-double-down mr-1" > < / i > Append< / label >
< label class = "btn btn-sm btn-secondary" > < input type = "radio" name = "set-trace-mode" id = "set-trace-mode-prepend" > < i class = "icon icon-angle-double-up mr-1" > < / i > Prepend< / label >
< / div >
< / div >
< / div >
< small class = "form-text text-muted font-italic mt-0" > Set the console trace direction< / small >
< / li >
< li class = "list-group-item p-1" >
< div class = "row" >
< div class = "col-5 m-0" > Trace symbol< / div >
< div class = "col-7 m-0" >
< select class = "form-control form-control-sm mb-1" id = "set-log-symbol" >
< option value = "icon" > Icon< / option >
< option value = "letter" > Letter< / option >
< / select >
< div id = "div-log-symbol-icon" class = "collapse form-check-inline mb-0 h4" >
< select class = "form-control form-control-sm mb-0 mr-1" id = "set-log-symbol-icon" >
< option value = "0" > Chevron: U/D< / option >
< option value = "2" > Chevron: L/R< / option >
< option value = "1" > Arrow: U/D< / option >
< option value = "3" > Arrow: L/R< / option >
< / select >
< div id = "div-log-symbol-icon-sample-s" class = "badge badge-success mr-1" > < / div >
< div id = "div-log-symbol-icon-sample-r" class = "badge badge-danger" > < / div >
< / div >
< / div >
< / div >
< small class = "form-text text-muted font-italic mt-0" > Set the console message direction symbol< / small >
< / li >
< li class = "list-group-item p-1" >
< div class = "row" >
< div class = "col-5 m-0" > Logging level< / div >
< div class = "col-7 m-0" >
< select class = "form-control form-control-sm mb-1" id = "set-log-level" >
< option value = "0" > Info (default)< / option >
< option value = "1" > Warning< / option >
< option value = "2" > Error< / option >
< option value = "3" > Debug< / option >
< option value = "4" > Verbose< / option >
< / select >
< / div >
< / div >
< small class = "form-text text-muted font-italic mt-0" > Set the JavaScript logging level< / small >
< / li >
< / ul >
< div class = "collapse mt-2" id = "div-save-setting-rs" > < div class = "card card-body border-success p-1 text-success text-center" > Settings saved successfully< / div > < / div >
< / div >
< div class = "modal-footer bg-secondary m-0 p-1" >
< div class = "row w-100" >
< div class = "col" > < button type = "button" class = "btn btn-dark btn-block" id = "btn-close-settings" data-dismiss = "modal" > Close< / button > < / div >
< div class = "col" > < button type = "button" class = "btn btn-success btn-block" id = "btn-save-settings" > Save< / button > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- MODAL: Presets command ====================================================================================== -->
< div class = "modal fade" id = "modal-presets" tabindex = "-1" role = "dialog" aria-labelledby = "modal-presets-label" aria-hidden = "true" >
< div class = "modal-dialog modal-popup" role = "document" >
< div class = "modal-content" >
< div class = "modal-header bg-secondary text-light m-0 px-2 py-1" >
< span class = "h5 font-italic mt-1" > < i class = "icon icon-sliders mr-2" > < / i > GCommand presets< / span >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< / div >
< div class = "modal-body p-1 text-left" >
< div id = "list-presets" class = "list-group list-group-flush" >
< li class = "list-group-item p-1 bg-light field-labels" > Replace {N} chars with the specific parameter that you need if present (ie: G1 X{0} => G1 X10)< / li >
< / div >
< / div >
< div class = "modal-footer bg-secondary m-0 p-1" > < button type = "button" class = "btn btn-dark btn-block" data-dismiss = "modal" > Close< / button > < / div >
< / div >
< / div >
< / div >
<!-- MODAL: Connect ============================================================================================== -->
< div class = "modal fade" id = "modal-connect" data-backdrop = "static" tabindex = "-1" role = "dialog" aria-hidden = "true" >
< div class = "modal-dialog modal-popup" role = "document" >
< div class = "modal-content" >
< div class = "modal-header bg-warning text-dark m-0 px-2 py-1" >
< span class = "h5 font-italic mt-1" > < i class = "icon icon-exchange mr-2" > < / i > Connect...< / span >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< / div >
< div class = "modal-body p-2 text-center my-4" >
< i class = "icon icon-exclamation-triangle" > < / i > < br > Ooopsss!< br / > Marlin firmware Web Socket is not connected.< br / > Would you like connect it now?
< / div >
< div class = "modal-footer bg-secondary m-0 p-1" >
< div class = "row w-100" >
< div class = "col" > < button type = "button" class = "btn btn-sm btn-dark btn-block" data-dismiss = "modal" > Cancel< / button > < / div >
< div class = "col" > < button id = "btn-wsconnect-modal" type = "button" class = "btn btn-sm btn-warning btn-block" data-dismiss = "modal" > < i class = "icon icon-bolt mr-1" > < / i > Connect now< / button > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- MODAL: SD file deletion confirmation ======================================================================= -->
< div class = "modal fade" id = "modal-sdfile-delete" data-backdrop = "static" role = "dialog" tabindex = "-1" aria-labelledby = "modal-sdfile-label" aria-hidden = "true" >
< div class = "modal-dialog modal-popup" >
< div class = "modal-content" >
< div class = "modal-header bg-secondary text-light m-0 px-2 py-1" >
< span class = "h5 font-italic mt-1" > < i class = "icon icon-exclamation-triangle mr-2" > < / i > Deletion confirmation< / span >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< / div >
< div class = "modal-body p-1 text-center mt-4 mb-1" >
< span class = "h5" > < i class = "icon icon-exclamation-triangle" > < / i > < br > Are you sure to delete< br > < div id = "div-sdfile-delete-badge" class = "badge badge-danger" > < / div > < br > SD card file?< br >
This operation cannot be undone.< / span >
< div id = "div-sdfile-delete-rs" class = "collapse mt-2" > < div class = "card card-body border-success p-1 text-success text-center" > File deleted successfully< / div > < / div >
< / div >
< div class = "modal-footer bg-secondary m-0 p-1" >
< div class = "row w-100" >
< div class = "col" > < button type = "button" class = "btn btn-sm btn-dark btn-block" data-dismiss = "modal" > No< / button > < / div >
< div class = "col" > < button id = "btn-sdfile-delete-modal" type = "button" class = "btn btn-sm btn-success btn-block" > < i class = "icon icon-trash mr-1" > < / i > Yes< / button > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- MODAL: SD file print confirmation ======================================================================= -->
< div class = "modal fade" id = "modal-sdfile-print" data-backdrop = "static" role = "dialog" tabindex = "-1" aria-labelledby = "modal-sdfile-print" aria-hidden = "true" >
< div class = "modal-dialog modal-popup" >
< div class = "modal-content" >
< div class = "modal-header bg-secondary text-light m-0 px-2 py-1" >
< span class = "h5 font-italic mt-1" > < i class = "icon icon-print mr-2" > < / i > Print confirmation< / span >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< / div >
< div class = "modal-body p-1 text-center my-4" >
< span class = "h5" > < i class = "icon icon-print" > < / i > < br > Are you sure to start printing of< br > < div id = "div-sdfile-print-badge" class = "badge badge-success" > < / div > < / span >
< / div >
< div id = "div-sdfile-print-rs" class = "collapse mt-2" > < div class = "card card-body border-success p-1 m-2 text-success text-center" > Printing started successfully< / div > < / div >
< div class = "modal-footer bg-secondary m-0 p-1" >
< div class = "row w-100" >
< div class = "col" > < button type = "button" class = "btn btn-sm btn-dark btn-block" data-dismiss = "modal" > No< / button > < / div >
< div class = "col" > < button id = "btn-sdfile-print-modal" type = "button" class = "btn btn-sm btn-success btn-block" > < i class = "icon icon-print mr-1" > < / i > Yes< / button > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- MODAL: Alert message ======================================================================= -->
< div class = "modal fade" id = "modal-alert" data-backdrop = "static" role = "dialog" tabindex = "-1" aria-labelledby = "modal-alert" aria-hidden = "true" >
< div class = "modal-dialog modal-popup" >
< div class = "modal-content" >
< div class = "modal-header bg-secondary text-light m-0 px-2 py-1" >
< span class = "h5 font-italic mt-1" > < i class = "icon icon-info-circled mr-2" > < / i > Message< / span >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
< / div >
< div class = "modal-body p-1 text-center my-4" >
< span class = "h5" > < i class = "icon icon-info-circled" > < / i > < br > < div id = "div-alert-message" > < / div > < / span >
< / div >
< div class = "modal-footer bg-secondary m-0 p-1" >
< div class = "row w-100" >
< div class = "col" > < button type = "button" class = "btn btn-sm btn-success btn-block" data-dismiss = "modal" > OK< / button > < / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< / html >
