User Tools

Site Tools


sample_webui

Web UI


Access Web UI

To access the printers Web UI enter
http://PRINTERS_IP_ADDRESS

http://192.168.20.164

Upload Custom Web UI

NOTE: You'll need to be using at least UI Controller firmware version 42 to enable this feature.

  1. Enter http://PRINTERS_IP_ADDRESS/up into a web browsers address bar
  2. Upload html file using the 3rd “Choose File” button
  3. Click the “Upload web” button
  4. Enter http://PRINTERS_IP_ADDRESS
  5. Custom Web UI should appear

Default Web UI

  1. Enter http://PRINTERS_IP_ADDRESS/up into a web browsers address bar
  2. Click the “Upload web” button (don't bother with the “Choose File” button
  3. Enter http://PRINTERS_IP_ADDRESS
  4. Default Web UI will appear

Sample Code for Web UI

Sample Web UI

Note: This version includes the css and js files.
This may help or could take longer to load due to the increase file size.
The code is not minified to make it easier to read by humans. The downside is file size is increased and the web browser takes longer to read.

webui-test-page_with_css_js-2017-02-02.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" />
</head>
 
<body>
    <div id="dropzone" style="display:none;">
        <form action="/upload" class="dropzone" id="mydz" />
    </div>
 
    <style>
        .disabledbutton {
            pointer-events: none;
            opacity: 0.4;
        }
 
        #rawgCode {
            margin-bottom: 10px;
        }
 
        #eStop {
            display: block;
            margin: 30px auto;
            -webkit-filter: grayscale(70%);
            /* Chrome, Safari, Opera */
            filter: grayscale(70%);
        }
 
        #eStop:hover {
            cursor: pointer;
            -webkit-filter: grayscale(0%);
            /* Chrome, Safari, Opera */
            filter: grayscale(0%);
        }
 
        .topBar {
            background: rgb(255, 255, 255);
            /* Old browsers */
            background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(226, 226, 226, 1) 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(226, 226, 226, 1) 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(226, 226, 226, 1) 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2', GradientType=1);
            /* IE6-9 */
            border: 1px solid #c5c5c5;
            margin-bottom: 10px;
        }
 
        #controls {
            /*
   -webkit-filter: grayscale(100%);
   filter: grayscale(100%);
   pointer-events:none;
*/
        }
 
        .homeIt {
            margin-bottom: 4px;
        }
 
        .jogdial {
            min-width: 30px;
            min-height: 26px;
            padding: 0px;
            border-radius: 0px !important;
            margin-bottom: 1px;
            font-size: 10px;
        }
 
        .jogitem {
            text-align: center;
        }
 
        .controlBox {
            border: 2px solid #b3b3b3;
            padding: 0px 0px 10px 0px;
            margin-bottom: 10px;
        }
 
        #movement {
            background: #d9edf7;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 10px;
            border-bottom: 2px solid #b3b3b3;
        }
 
        #mainPage {
            margin-top: 10px;
        }
 
        .unkPos {
            color: #ff0000;
        }
 
        .dropzone {
            min-height: 40px;
            padding: 0px;
            background: #e6f9ff;
            border-radius: 10px;
        }
 
        .dropzone .dz-message {
            margin: 1em;
        }
 
        #gCodeLog {
            min-height: 104px;
            max-height: 104px;
            border: 1px solid #b3b3b3;
            margin-bottom: 2px;
            background: #e6f9ff;
            padding: 2px 10px;
            overflow: auto;
            color: #000000;
            font-size: 10px;
        }
 
        span.ui-slider-handle.ui-corner-all.ui-state-default {
            background: #337ab7;
        }
 
        #fanSlider {
            background: #e6f9ff;
        }
    </style>
 
    <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">N/A</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;"></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;"></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=""></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="unkPos" 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"></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;">N/A</span></strong> Target: <strong><span id="rdeTarget" style="border: 3px solid #b3b3b3; padding: 6px; border-radius: 2px; margin-right: 10px;">N/A</span></strong>
                        </div>
                        <div class="clearfix"></div>
                        <div id="tempChart" style="height: 150px;"></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;">N/A</span></strong> Target: <strong><span id="rdpTarget" style="border: 3px solid #b3b3b3; padding: 6px; border-radius: 2px; margin-right: 10px;">N/A</span></strong>
                        </div>
                        <div class="clearfix"></div>
                        <div id="tempChart2" style="height: 150px;"></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>
        $tooQuick = false;
        $extruderTemp = '0';
        $bedTemp = '0';
 
        function pad(num, size) {
            var s = "000" + num;
            return s.substr(s.length - size);
        }
        $(document).ready(function() {
            var gCodeLog = document.getElementById("gCodeLog");
            $("#newDropzone").addClass('disabledbutton');
            $(".controlBox").addClass('disabledbutton');
            $("#rawgCode").addClass('disabledbutton');
 
            setInterval(function() {
                $.get("inquiry", function(data, status) {
                    console.log(data);
                    //                $('#gCodeLog').append('<br>'+data);
                    $("#rde").text(data.match(/\d+/g)[0]);
                    //$("#rdeTarget").text(data.match(/\d+/g)[1]);
                    var exTgt = data.match(/\d+/g)[1];
                    if (exTgt > 30 || exTgt == 0) $("#rdeTarget").text(exTgt);
                    $("#rdp").text(data.match(/\d+/g)[2]);
                    $("#rdpTarget").text(data.match(/\d+/g)[3]);
                    $extruderTemp = data.match(/\d+/g)[0];
                    $extruderTarget = data.match(/\d+/g)[1];
                    $bedTemp = data.match(/\d+/g)[2];
                    $bedTarget = data.match(/\d+/g)[3];
                    var c = data.charAt(data.length - 1);
                    if (c == 'I') {
                        $("#stat").text("Idle");
                        $("#pgs").css("width", "0%");
                        $("#newDropzone").removeClass('disabledbutton');
                        $(".controlBox").removeClass('disabledbutton');
                        $("#rawgCode").removeClass('disabledbutton');
                    } else if (c == 'P') {
                        $("#newDropzone").addClass('disabledbutton');
                        $(".controlBox").addClass('disabledbutton');
                        $("#rawgCode").addClass('disabledbutton');
                        $("#stat").text("Printing");
                        $("#pgs").css("width", data.match(/\d+/g)[4] + "%");
                        $("#pgs").html(data.match(/\d+/g)[4] + "%");
                    } else $("#stat").text(" ");
                });
            }, 5000);
            $("#sete").click(function() {
                var value = pad($("#wre").val(), 3);
                $.ajax({
                    url: 'set?cmd={C:T0' + value + '}',
                    cache: false
                }).done(function(html) {});
            });
            $("#clre").click(function() {
                $.ajax({
                    url: "set?cmd={C:T0000}",
                    cache: false
                }).done(function(html) {});
            });
            $("#setp").click(function() {
                var value = pad($("#wrp").val(), 3);
                $.ajax({
                    url: 'set?cmd={C:P' + value + '}',
                    cache: false
                }).done(function(html) {});
            });
            $("#clrp").click(function() {
                $.ajax({
                    url: "set?cmd={C:P000}",
                    cache: false
                }).done(function(html) {});
            });
        });
        String.prototype.contains = function(it) {
            return this.indexOf(it) != -1;
        };
 
        Dropzone.options.mydz = {
            dictDefaultMessage: "Upload GCode here",
            accept: function(file, done) {
                if (file.name.contains(".g")) done();
                else done("Not a valid GCode file.");
            },
            init: function() {
                this.on('error', function(file, response) {
                    var errorMessage = response.errorMessage;
                    $(file.previewElement).find('.dz-error-message').text(errorMessage);
                });
                this.on("addedfile", function() {
                    if (this.files[1] != null) {
                        this.removeFile(this.files[0]);
                    }
                });
            }
        };
 
        function start_p() {
            $.ajax({
                url: "set?code=M565",
                cache: false
            }).done(function(html) {});
        }
 
        function cancel_p() {
            $.ajax({
                url: "set?cmd={P:X}",
                cache: false
            }).done(function(html) {});
        }
 
        $('#sendRAWgCode').click(function() {
            var gCode2Send = $('#gcode').val();
            if (gCode2Send == '') {
                alert("You didn't enter anything!");
                return;
            }
            $.ajax({
                url: "set?code=" + gCode2Send,
                cache: false
            }).done(function(html) {
                $('#gcode').val('');
                $('#gCodeLog').append("<br>" + gCode2Send);
                gCodeLog.scrollTop = gCodeLog.scrollHeight;
                //            alert('sent!');
            });
        });
 
        $('#eStop').click(function() {
            $.ajax({
                url: "set?code=M112\nM999",
                cache: false
            }).done(function(html) {
                $('#gCodeLog').append("<br>M112; Emergency Stop!");
                gCodeLog.scrollTop = gCodeLog.scrollHeight;
                alert('Emergency Stop Sent! You will have to cycle power on the printer to get communications back up.');
            });
 
        });
 
        function setFan($fSpeed) {
            $.ajax({
                url: "set?code=M106 S" + $fSpeed,
                cache: false
            }).done(function(html) {
                $('#gCodeLog').append("<br>M106 S" + $fSpeed);
                gCodeLog.scrollTop = gCodeLog.scrollHeight;
            });
 
        }
 
        $('.homeIt').click(function() {
            var doWhat = $(this).data('id');
            var whatAxis = $(this).data('axis');
            $.ajax({
                url: "set?code=G28 " + doWhat,
                cache: false
            }).done(function(html) {
                $('#gCodeLog').append("<br>G28 " + doWhat);
                gCodeLog.scrollTop = gCodeLog.scrollHeight;
                if (whatAxis == 'XYZ') {
                    $('#posX, #posY, #posZ').val('0');
                    $('#posX, #posY, #posZ').removeClass('unkPos');
                    $axisX = '0';
                    $axisY = '0';
                    $axisZ = '0';
                } else if (whatAxis == 'XY') {
                    $('#posX, #posY').val('0');
                    $('#posX, #posY').removeClass('unkPos');
                    $axisX = '0';
                    $axisY = '0';
                } else {
                    $('#pos' + whatAxis).val('0');
                    $('#pos' + whatAxis).removeClass('unkPos');
                    switch (whatAxis) {
                        case 'X':
                            $axisX = '0';
                            break;
                        case 'Y':
                            $axisY = '0';
                            break;
                        case 'Z':
                            $axisZ = '0';
                            break;
                    }
                }
            });
        });
 
        $axisX = '0';
        $axisY = '0';
        $axisZ = '0';
 
        function atMax() {
            $('#movement').html('<span style="color: #ff0000;">MAX Movement!</span>');
            setTimeout(function() {
                $('#movement').html('Movement');
            }, 500);
        }
 
        $('.moveIt').click(function() {
            if ($tooQuick == true) {
                $('#movement').html('<span style="color: #ff0000;">SLOW DOWN!</span>');
                setTimeout(function() {
                    $('#movement').html('Movement');
                }, 100);
                return;
            }
            var doSpeed = $(this).data('speed');
            var doWhat = $(this).data('id');
            var doWhere = $(this).data('axis');
            var axisVal = $('#pos' + doWhere).val()
            axisVal = +doWhat + +axisVal;
 
            switch (doWhere) {
                case 'X':
                    $axisX = +$axisX + +doWhat;
                    if ($axisX >= '125') {
                        atMax();
                        $axisX = +$axisX - +doWhat;
                        return;
                    }
                    break;
                case 'Y':
                    $axisY = +$axisY + +doWhat;
                    if ($axisY >= '125') {
                        atMax();
                        $axisY = +$axisY - +doWhat;
                        return;
                    }
                    break;
                case 'Z':
                    $axisZ = +$axisZ + +doWhat;
                    if ($axisZ >= '125') {
                        atMax();
                        $axisZ = +$axisZ - +doWhat;
                        return;
                    }
                    break;
                default:
            }
 
            $tooQuick = true;
            $.ajax({
                url: "set?code=G91",
                cache: false
            }).done(function(html) {});
            $.ajax({
                url: "set?code=G1 " + doSpeed + ' ' + doWhere + doWhat,
                cache: false
            }).done(function(html) {
                $('#pos' + doWhere).val(axisVal);
                $tooQuick = false;
                $('#gCodeLog').append("<br>G90, G1 " + doSpeed + ' ' + doWhere + doWhat);
                gCodeLog.scrollTop = gCodeLog.scrollHeight;
            });
        });
        $(document).ready(function() {
            $("#dropzone").appendTo("#newDropzone").show();
            $("#tempChart").appendTo("#newTempChart").show();
        });
 
        $(document).ready(function() {
            $(function() {
                var data = [];
                var data2 = [];
                var totalPoints = 300;
 
                function getData() {
                    data = data.slice(1);
                    while (data.length < totalPoints) {
                        var x = new Date($.now());
                        var y = $extruderTemp;
                        data.push(y);
                    }
                    var res = [];
                    for (var i = 0; i < data.length; ++i) {
                        res.push([i, data[i]]);
                    }
                    return res;
                }
 
                function getData2() {
                    data2 = data2.slice(1);
                    while (data2.length < totalPoints) {
                        var x = new Date($.now());
                        var y = $bedTemp;
                        data2.push(y);
                    }
                    var res2 = [];
                    for (var i = 0; i < data2.length; ++i) {
                        res2.push([i, data2[i]]);
                    }
                    return res2;
                }
 
                // Set up the control widget
                var updateInterval = 500;
                var plot = $.plot("#tempChart", [getData()], {
                    series: {
                        shadowSize: 0 // Drawing is faster without shadows
                    },
                    colors: ['#ff0000'],
                    yaxis: {
                        min: 0,
                        max: 300,
                        zoomRange: [0.5, 310],
                        panRange: [0, 300]
                    },
                    xaxis: {
                        show: false,
                        zoomRange: [0.5, 310],
                        panRange: [0, 300]
                    },
                    zoom: {
                        interactive: true
                    },
                    pan: {
                        interactive: true
                    }
                });
 
                var plot2 = $.plot("#tempChart2", [getData2()], {
                    series: {
                        shadowSize: 0 // Drawing is faster without shadows
                    },
                    colors: ['#0037ff'],
                    yaxis: {
                        min: 0,
                        max: 120,
                        zoomRange: [0.5, 310],
                        panRange: [0, 300]
                    },
                    xaxis: {
                        show: false,
                        zoomRange: [0.5, 310],
                        panRange: [0, 300]
                    },
                    zoom: {
                        interactive: true
                    },
                    pan: {
                        interactive: true
                    }
 
                });
 
                var tempChart = $("#tempChart");
                var tempChart2 = $("#tempChart2");
 
                // add zoom out button 
                $("<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>").appendTo(tempChart).click(function(event) {
                    event.preventDefault();
                    plot.zoomOut();
                });
                $("<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>").appendTo(tempChart2).click(function(event) {
                    event.preventDefault();
                    plot2.zoomOut();
                });
 
                function update() {
                    plot.setData([getData()]);
                    plot2.setData([getData2()]);
                    // Since the axes don't change, we don't need to call plot.setupGrid()
                    plot.draw();
                    plot2.draw();
                    setTimeout(update, updateInterval);
                }
 
                update();
            });
 
        });
 
        $(function() {
            $("#fanSlider").slider({
                value: 0,
                min: 0,
                max: 255,
                step: 25.5,
                slide: function(event, ui) {
                    var fanPercent = ui.value;
                    setFan(ui.value);
                    var fanMax = 255;
                    fanPercent = (fanPercent / fanMax) * 100;
                    if (fanPercent == '0') {
                        fanPercent = "Off";
                    } else {
                        fanPercent = fanPercent + "%";
                    }
                    $("#fanAmount").html(fanPercent);
                }
            });
        });
    </script>
</body>
 
</html>
sample_webui.txt · Last modified: 2017/10/08 12:51 by Matthew Upp