User Tools

Site Tools


sample_webui

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

sample_webui [2017/08/01 14:57] (current)
Matthew Upp created
Line 1: Line 1:
 +~~NOTOC~~
 +
 +====== Web UI ======
 +
 +----
 +
 +===== Access Web UI =====
 +**To access the printers Web UI enter** \\ ''​%%http://​PRINTERS_IP_ADDRESS%%''​
 +
 +<​code>​
 +http://​192.168.20.164
 +</​code>​
 +
 +
 +
 +===== Upload Custom Web UI =====
 +  - Enter ''​%%http://​PRINTERS_IP_ADDRESS/​up%%''​ into a web browsers address bar.
 +  - Upload html file using the 3rd upload box.
 +  - Enter ''​%%http://​PRINTERS_IP_ADDRESS%%''​
 +  - Custom Web UI should appear
 +
 +
 +===== Default Web UI =====
 +  - Enter ''​%%http://​PRINTERS_IP_ADDRESS/​up%%''​ into a web browsers address bar.
 +  - Upload a empty file using the 3rd upload box.
 +  - Enter ''​%%http://​PRINTERS_IP_ADDRESS%%''​
 +  - Default Web UI will appear
 +
 +----
 +
 +
 +===== Sample Code for Web UI =====
 +[[communications#​sample_code_for_web_ui|Sample Code for Web Interface]]
 +
 +
 +----
 +
 +
 +===== 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.
 +
 +
 +<file html 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>​
 +
 +</​file>​
  
sample_webui.txt · Last modified: 2017/08/01 14:57 by Matthew Upp