Skip to content

Instantly share code, notes, and snippets.

@sebastianha

sebastianha/webui-fabrikator-mini-v2.html

Created January 20, 2019 08:20
Show Gist options
  • Save sebastianha/5bc705d2bb71f627c6656f6415c0f26b to your computer and use it in GitHub Desktop.
Save sebastianha/5bc705d2bb71f627c6656f6415c0f26b to your computer and use it in GitHub Desktop.
Download ZIP
Original / Default webui for Fabrikator Mini V2
Raw
webui-fabrikator-mini-v2.html
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.navigate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://malyansys.com/js/webui160910.css">
</head>
<body>
<div id="mainPage" class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="hero-unit topBar">
<div class="col-xs-12 col-md-4"></div>
<div class="col-xs-12 col-md-4">
<h1 style="text-align: center;">Malyan Desktop 3D Printer</h1>
<div style="text-align: center; max-width: 400px; margin:30px auto;">
<strong>Print Status: <span id="stat">Idle</span></strong>
<div class="progress" style="margin-bottom: 10px; height: 30px;border: 1px solid #b3b3b3;">
<div class="progress-bar progress-bar-striped active" role="progressbar" id="pgs" style="padding-top: 4px; width: 0%;"></div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-success btn-block" type="button" onclick="start_p()"><i class="fa fa-check"></i> Start Print</button>
</div>
<div class="col-md-6">
<button class="btn btn-danger btn-block" type="button" onclick="cancel_p()"><i class="fa fa-ban"></i> Cancel Print</button>
</div>
</div>
<div class="clearfix"></div>
<div id="newDropzone" style="margin-top: 10px;" class=""><div id="dropzone" style="">
<form action="/upload" class="dropzone dz-clickable" id="mydz">
<div class="dz-default dz-message"><span>Upload GCode here</span></div></form></div></div>
</div>
</div>
<div class="col-xs-12 col-md-4" style="text-align: center;"><img src="http://mpselectmini.com/mpselect/webui/estop.png" id="eStop" class=""></div>
<div class="clearfix"></div>
</div>
<div class="row" id="controls" disabled="">
<div class="col-md-6">
<div id="gCodeLog" class=""><br>G90, G1 F2400 Z50<br>G28 Z0<br>G90, G1 F2400 Z10<br>G28 Z0<br>G90, G1 F2400 Z50<br>G90, G1 F100 E10<br>G90, G1 F2400 Y-50<br>G90, G1 F100 E50<br>G90, G1 F100 E10</div>
<div id="rawgCode" class="input-group">
<input class="form-control" type="text" name="gcode" id="gcode" placeholder="Send gCode to printer..."><span class="input-group-btn"><button id="sendRAWgCode" class="btn btn-warning"><i class="fa fa-send" aria-hidden="true"></i> Send</button></span>
</div>
<div class="col-xs-12 controlBox">
<div class="col-xs-12" id="movement">Movement</div>
<div class="col-xs-8">
<div class="col-xs-4 jogitem">
<button class="btn btn-danger homeIt" data-axis="X" data-id="X0"><i class="fa fa-home"></i> X</button>
<br>
<input id="posX" type="text" disabled="" value="0" placeholder="?" class="unkPos" style="width: 48px;">
</div>
<div class="col-xs-4 jogitem" style="left: 2px;">
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="Y" data-id="50"><i class="fa fa-chevron-up"></i>
<br>50</button>
<br>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="Y" data-id="10"><i class="fa fa-chevron-up"></i>
<br>10</button>
<br>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="Y" data-id="01"><i class="fa fa-chevron-up"></i>
<br>1</button>
<br>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="Y" data-id="0.1"><i class="fa fa-chevron-up"></i>
<br>0.1</button>
<br>
</div>
<div class="col-xs-4 jogitem">
<button class="btn btn-success homeIt" data-axis="Y" data-id="Y0"><i class="fa fa-home"></i> Y</button>
<br>
<input id="posY" type="text" disabled="" value="0" placeholder="?" class="unkPos" style="width: 48px;">
</div>
<div class="clearfix"></div>
<div class="col-xs-12 jogitem">
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="X" data-id="-50"><i class="fa fa-chevron-left"></i> 50</button>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="X" data-id="-10"><i class="fa fa-chevron-left"></i> 10</button>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="X" data-id="-01"><i class="fa fa-chevron-left"></i> 1</button>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="X" data-id="-0.1"><i class="fa fa-chevron-left"></i> 0.1</button>
<button class="btn btn-info jogdial homeIt" data-axis="XY" data-id="X0 Y0" style="font-size: 20px;"><i class="fa fa-home"></i></button>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="X" data-id="0.1"><i class="fa fa-chevron-right"></i> 0.1</button>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="X" data-id="01"><i class="fa fa-chevron-right"></i> 1</button>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="X" data-id="10"><i class="fa fa-chevron-right"></i> 10</button>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="X" data-id="50"><i class="fa fa-chevron-right"></i> 50</button>
</div>
<div class="clearfix"></div>
<div class="col-xs-4 jogitem" style="min-height: 108px;">
<button class="btn btn-info homeIt" data-axis="XYZ" data-id="X0 Y0 Z0" style="position: absolute; bottom: 0; left: 40px;"><i class="fa fa-home"></i> All</button>
</div>
<div class="col-xs-4 jogitem" style="left: 2px;">
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="Y" data-id="-0.1"><i class="fa fa-chevron-down"></i>
<br>0.1</button>
<br>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="Y" data-id="-01"><i class="fa fa-chevron-down"></i>
<br>1</button>
<br>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="Y" data-id="-10"><i class="fa fa-chevron-down"></i>
<br>10</button>
<br>
<button class="btn btn-info jogdial moveIt" data-speed="F2400" data-axis="Y" data-id="-50"><i class="fa fa-chevron-down"></i>
<br>50</button>
<br>
</div>
<div class="col-xs-4 jogitem" style="min-height: 108px;">
<button class="btn btn-primary homeIt" data-axis="Z" data-id="Z0" style="position: absolute; bottom: 0; right: 40px;"><i class="fa fa-home"></i> Z</button>
<input id="posZ" type="text" disabled="" value="0" placeholder="?" class="" style="width: 48px; position: absolute; bottom: 42px; right: 40px;">
</div>
<div class="clearfix"></div>
</div>
<div class="col-xs-2 jogitem">
<button class="btn btn-primary jogdial moveIt" data-speed="F2400" data-axis="Z" data-id="50"><i class="fa fa-chevron-up"></i>
<br>50</button>
<br>
<button class="btn btn-primary jogdial moveIt" data-speed="F2400" data-axis="Z" data-id="10"><i class="fa fa-chevron-up"></i>
<br>10</button>
<br>
<button class="btn btn-primary jogdial moveIt" data-speed="F2400" data-axis="Z" data-id="01"><i class="fa fa-chevron-up"></i>
<br>1</button>
<br>
<button class="btn btn-primary jogdial moveIt" data-speed="F2400" data-axis="Z" data-id="0.1"><i class="fa fa-chevron-up"></i>
<br>0.1</button>
<br>
<button class="btn btn-primary jogdial homeIt" data-axis="Z" data-id="Z0" style="font-size: 20px;"><i class="fa fa-home"></i></button>
<br>
<button class="btn btn-primary jogdial moveIt" data-speed="F2400" data-axis="Z" data-id="-0.1"><i class="fa fa-chevron-down"></i>
<br>0.1</button>
<br>
<button class="btn btn-primary jogdial moveIt" data-speed="F2400" data-axis="Z" data-id="-01"><i class="fa fa-chevron-down"></i>
<br>1</button>
<br>
<button class="btn btn-primary jogdial moveIt" data-speed="F2400" data-axis="Z" data-id="-10"><i class="fa fa-chevron-down"></i>
<br>10</button>
<br>
<button class="btn btn-primary jogdial moveIt" data-speed="F2400" data-axis="Z" data-id="-50"><i class="fa fa-chevron-down"></i>
<br>50</button>
<br>
</div>
<div class="col-xs-2 jogitem">
<button class="btn btn-warning jogdial moveIt" data-axis="E" data-speed="F250" data-id="-100"><i class="fa fa-chevron-up"></i>
<br>-100</button>
<br>
<button class="btn btn-warning jogdial moveIt" data-axis="E" data-speed="F250" data-id="-50"><i class="fa fa-chevron-up"></i>
<br>-50</button>
<br>
<button class="btn btn-warning jogdial moveIt" data-axis="E" data-speed="F250" data-id="-10"><i class="fa fa-chevron-up"></i>
<br>-10</button>
<br>
<button class="btn btn-warning jogdial moveIt" data-axis="E" data-speed="F250" data-id="-01"><i class="fa fa-chevron-up"></i>
<br>-1</button>
<br>
<button class="btn btn-warning jogdial" style="font-size: 20px;"><i class="fa fa-times"></i></button>
<br>
<button class="btn btn-warning jogdial moveIt" data-axis="E" data-speed="F100" data-id="01"><i class="fa fa-chevron-down"></i>
<br>1</button>
<br>
<button class="btn btn-warning jogdial moveIt" data-axis="E" data-speed="F100" data-id="10"><i class="fa fa-chevron-down"></i>
<br>10</button>
<br>
<button class="btn btn-warning jogdial moveIt" data-axis="E" data-speed="F100" data-id="50"><i class="fa fa-chevron-down"></i>
<br>50</button>
<br>
<button class="btn btn-warning jogdial moveIt" data-axis="E" data-speed="F100" data-id="100"><i class="fa fa-chevron-down"></i>
<br>100</button>
<br>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-6">
<div class="col-xs-12" style="text-align: center; margin-bottom: 10px;">
<div class="col-xs-4"><strong>Fan Speed: <span id="fanAmount" style="border: 3px solid #b3b3b3; padding: 6px; border-radius: 2px; margin-right: 10px;">Off</span></strong></div>
<div class="col-xs-8"><div id="fanSlider" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 0%;"></span></div></div>
</div>
<div class="clearfix"></div>
<div class="col-xs-12" style="text-align: center; margin-bottom: 10px;">
<strong>Extruder</strong>
Temp: <strong><span id="rde" style="border: 3px solid #b3b3b3; padding: 6px; border-radius: 2px; margin-right: 10px;">26</span></strong>
Target: <strong><span id="rdeTarget" style="border: 3px solid #b3b3b3; padding: 6px; border-radius: 2px; margin-right: 10px;">0</span></strong>
</div>
<div class="clearfix"></div>
<div id="tempChart" style="height: 150px; padding: 0px; position: relative;"><canvas class="flot-base" width="930" height="150" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 930px; height: 150px;"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 134px; left: 16px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 89px; left: 2px; text-align: right;">100</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 45px; left: 2px; text-align: right;">200</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 0px; left: 2px; text-align: right;">300</div></div></div><canvas class="flot-overlay" width="930" height="150" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 930px; height: 150px;"></canvas><div class="btn btn-default" style="display: block; width: 40px; float: right; position: relative; top: 10px; right: 10px;"><i class="fa fa-search-minus"></i></div></div>
<div class="clearfix"></div>
<div class="col-xs-12" style="text-align: center;">
<span class="">
<input class="form-control" type="text" id="wre" placeholder="Set Extruder Temp" style="max-width: 200px; display: inline-block;">
<button class="btn btn-success" id="sete" style="height: 34px;"><i class="fa fa-check"></i></button>
<button class="btn btn-danger" id="clre" style="height: 34px;"><i class="fa fa-ban"></i></button>
</span>
</div>
<div class="clearfix"></div>
<hr>
<div class="col-xs-12" style="text-align: center; margin-bottom: 10px;">
<strong>Build Platform</strong>
Temp: <strong><span id="rdp" style="border: 3px solid #b3b3b3; padding: 6px; border-radius: 2px; margin-right: 10px;">21</span></strong>
Target: <strong><span id="rdpTarget" style="border: 3px solid #b3b3b3; padding: 6px; border-radius: 2px; margin-right: 10px;">0</span></strong>
</div>
<div class="clearfix"></div>
<div id="tempChart2" style="height: 150px; padding: 0px; position: relative;"><canvas class="flot-base" width="930" height="150" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 930px; height: 150px;"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div class="flot-tick-label tickLabel" style="position: absolute; top: 134px; left: 16px; text-align: right;">0</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 78px; left: 9px; text-align: right;">50</div><div class="flot-tick-label tickLabel" style="position: absolute; top: 22px; left: 2px; text-align: right;">100</div></div></div><canvas class="flot-overlay" width="930" height="150" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 930px; height: 150px;"></canvas><div class="btn btn-default" style="display: block; width: 40px; float: right; position: relative; top: 10px; right: 10px;"><i class="fa fa-search-minus"></i></div></div>
<div class="clearfix"></div>
<div class="col-xs-12" style="text-align: center;">
<span class="">
<input class="form-control" type="text" id="wrp" placeholder="Set Platform Temp" style="max-width: 200px; display: inline-block;">
<button class="btn btn-success" id="setp" style="height: 34px;"><i class="fa fa-check"></i></button>
<button class="btn btn-danger" id="clrp" style="height: 34px;"><i class="fa fa-ban"></i></button>
</span>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</div>
<script src="http://malyansys.com/js/webui160910.js"></script>
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;"></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment