<html>
    <meta charset="UTF-8">
    <head>
        <title>3DPrinterOS Client</title>
        <link rel="stylesheet" type="text/css" href="/static/styles/style.css">
        <link href="/static/styles/joystick.css" rel="stylesheet" type="text/css">
    </head>
    <body bgcolor=#003333>
    <form action="/" method="get">
        <input type="submit" value="Back" class="middle_button" style="margin: 2px;">
    </form>
        <div class="block1" style="align:left; width: 450px;margin: -131px 0 0 -576px;">
            <div class="block2">
                3DPrinterOS Joystick
            </div>
            <script>
                var printer_id = "!!!PRINTER_ID!!!";
            </script>
            <div style="margin: 0 auto; padding: 15px;width: 420px; " id="joystick_popup" class="popup appspopup">
                    <div class="threejs-nav" style="border-radius: 7px;">
                        <ul>

                            <li id="joystick_jog" class="active-tab tab-show">
                                <a href="javascript:;" class="no-disabled">
                                    <span class="icon"><img src="/static/images/jog.png"></span>
                                    Joystick
                                </a>
                            </li>
                            <li id="joystick_extruders" class="tab-show">
                                <a href="javascript:;" class="no-disabled">
                                    <span class="icon"><img src="/static/images/extruders.png"></span>
                                    Extruders
                                </a>
                            </li>

                        </ul>
                    </div>
                    <div class="tabs">
                        <div>
                            <div class="printer-sensors">
                                <div class="item x-position">
                                    <img src="/static/images/x_icon.png">
                                    <label>X:</label>
                                    <span class="data">0</span>
                                </div>
                                <div class="item z-position">
                                    <img src="/static/images/z_icon.png">
                                    <label>Z:</label>
                                    <span class="data">0</span>
                                </div>
                                <div class="item y-position">
                                    <img src="/static/images/y_icon.png">
                                    <label>Y:</label>
                                    <span class="data">0</span>
                                </div>
                                <div class="item e-position">
                                    <img src="/static/images/e_icon.png">
                                    <label>E:</label>
                                    <span class="data">0</span>
                                </div>
                                <div class="item t-heatbed">
                                    <img src="/static/images/h_icon.png">
                                    <label>Bed:</label>
                                    <span class="data">0</span>
                                </div>
                                <div class="item t-extruder">
                                    <img src="/static/images/r_icon.png">
                                    <label>Ext:</label>
                                    <span class="data">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="joystick_jog popup_tab" style="display: block">

                            <div class="box-extruder">
                                <div class="header">
                                    Movement speed settings
                                </div>
                                <div class="body sendSpeed">
                                    <div class="item">
                                        <img class="no-right-margin" src="/static/images/moves_peed_icon.png">
                                        <label>Speed XY mm/min</label>
                                        <input id="xy-speed" value="2000" />
                                    </div>
                                    <div class="item">
                                        <img class="no-right-margin" src="/static/images/heatbed_speed_icon.png">
                                        <label>Speed Z mm/min </label>
                                        <input id="z-speed" value="300" />
                                    </div>
                                </div>
                            </div>

                            <div class="box-extruder">
                                <div class="body">
                                    <div class="joystick-box">
                                        <div class="z-jog">
                                            <div class="z-controls">
                                                <button onclick="jogZClick('Z100')" class="color-1 radius-top">100</button>
                                                <button onclick="jogZClick('Z10')" class="color-2">10</button>
                                                <button onclick="jogZClick('Z1')" class="color-3">1</button>
                                                <button onclick="jogZClick('Z0.1')" class="color-4 radius-bottom">0.1</button>
                                            </div>
                                            <div class="j-center">
                                                <img class="no-right-margin" src="/static/images/heat_move_icon.png">
                                            </div>
                                            <div class="minus-z-controls">
                                                <button onclick="jogZClick('Z-0.1')" class="color-4 radius-top">-0.1</button>
                                                <button onclick="jogZClick('Z-1')" class="color-3">-1</button>
                                                <button onclick="jogZClick('Z-10')" class="color-2">-10</button>
                                                <button onclick="jogZClick('Z-100')" class="color-1 radius-bottom">-100</button>
                                            </div>
                                        </div>
                                        <div class="home-x">
                                                <span onclick="runCommandSilent('home_x')"  class="h-b h-x">
                                                    <img src="/static/images/home_x_icon.png">
                                                </span>
                                            <label>Home X</label>
                                        </div>
                                        <div class="home-y">
                                                <span onclick="runCommandSilent('home_y')"  class="h-b h-y">
                                                     <img src="/static/images/home_y_icon.png">
                                                </span>
                                            <label>Home Y</label>
                                        </div>
                                        <div class="home-z">
                                            <label>Home Z</label>
                                                <span onclick="runCommandSilent('home_z')" class="h-b h-z">
                                                     <img src="/static/images/home_z_icon.png">
                                                </span>
                                        </div>
                                        <div class="home-all">
                                            <label>Home ALL</label>
                                                <span onclick="runCommandSilent('home')" class="h-b h-all">
                                                     <img src="/static/images/home_all_icon.png">
                                                </span>
                                        </div>
                                        <div class="y-controls">
                                            <button onclick="jogZClick('X100')" class="color-1 radius-top">100</button>
                                            <button onclick="jogZClick('X10')" class="color-2">10</button>
                                            <button onclick="jogZClick('X1')" class="color-3">1</button>
                                            <button onclick="jogZClick('X0.1')" class="color-4 radius-bottom">0.1</button>
                                        </div>
                                        <div class="x-controls">
                                            <button onclick="jogZClick('Y100')" class="color-1 radius-top">100</button>
                                            <button onclick="jogZClick('Y10')" class="color-2">10</button>
                                            <button onclick="jogZClick('Y1')" class="color-3">1</button>
                                            <button onclick="jogZClick('Y0.1')" class="color-4 radius-bottom">0.1</button>
                                        </div>
                                        <div class="j-center">
                                            <img class="no-right-margin" src="/static/images/move_icon.png">
                                        </div>
                                        <div class="minus-x-controls">
                                            <button onclick="jogZClick('Y-0.1')" class="color-4 radius-top">-0.1</button>
                                            <button onclick="jogZClick('Y-1')"  class="color-3">-1</button>
                                            <button onclick="jogZClick('Y-10')" class="color-2">-10</button>
                                            <button onclick="jogZClick('Y-100')" class="color-1 radius-bottom">-100</button>
                                        </div>
                                        <div class="minus-y-controls">
                                            <button onclick="jogZClick('X-100')" class="color-1 radius-top">-100</button>
                                            <button onclick="jogZClick('X-10')" class="color-2">-10</button>
                                            <button onclick="jogZClick('X-1')" class="color-3">-1</button>
                                            <button onclick="jogZClick('X-0.1')" class="color-4 radius-bottom">-0.1</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="joystick_extruders popup_tab"  style="display: none">
                            <div class="box-extruder box-right-extruder">
                                <div class="header">
                                    Extruder
                                    <!--<span class="temperature"><span>0</span> °C</span>-->
                                </div>
                                <div class="body">
                                    <div class="item-vertical">
                                        <img src="/static/images/icon_0004_Layer-2.png">
                                        <button class="green top"  onclick="setExtruderTemperature('extleft',0)">Cooldown</button>
                                        <div class="right">
                                            <label>Temp. °C</label>
                                            <input >
                                            <button class="orange btn-set-right-extruder">Set</button>
                                        </div>
                                    </div>
                                    <div class="item-vertical">
                                        <img src="/static/images/icon_0000_Layer-90-copy.png">
                                        <button class="green top extrude">Extrude</button>
                                        <button class="green top retract">Retract</button>
                                        <div class="right">
                                            <img src="/static/images/icon_0005_Layer-1.png">
                                            <button class="green top" onclick="setFanStatus('enable_fan')">On</button>
                                            <button class="green top" onclick="setFanStatus('disable_fan')">Off</button>
                                        </div>
                                    </div>

                                    <div class="item-vertical">
                                        <div class="item" style="display: block">
                                            <img class="no-right-margin" src="/static/images/icon_0002_Layer-4.png">
                                            <label>Speed mm/min</label>
                                            <input id="extspeed" value="60">
                                        </div>
                                        <div class="item">
                                            <img class="no-right-margin" src="/static/images/icon_0003_Layer-3.png">
                                            <label>Amount mm</label>
                                            <input id="eamount" value="1">
                                            <button class="green eamount-btn top">1</button>
                                            <button class="green eamount-btn top">10</button>
                                            <button class="green eamount-btn top">50</button>
                                            <button class="green eamount-btn top">100</button>
                                        </div>
                                    </div>

                                </div>
                            </div>


                            <div class="box-extruder box-heatbed">
                                <div class="header">
                                    Heatbed
                                    <!--<span class="temperature"><span>0</span> °C</span>-->
                                </div>
                                <div class="body">
                                    <div class="item-vertical">
                                        <img src="/static/images/icon_0001_Layer-6.png">
                                        <button class="green top" onclick="setExtruderTemperature('extbed',0)">Cooldown</button>
                                        <div class="right">
                                            <label>Temp. °C</label>
                                            <input>
                                            <button class="orange btn-set-heatbed">Set</button>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                        <div class="joystick_console popup_tab">
                        </div>
                    </div>



                    <div class="clear"></div>
                </div>
            </div>

            <script src="/static/scripts/jquery.js"></script>
            <script src="/static/scripts/joystick.js"></script>

        <div class="block1" style="height: 98%;background: #E1F1F2;align:left;width: 50%;margin: -245px 0 0 -15px;padding: 5px;">
                <textarea id="log" disabled style="margin: 5px;height: 91%;line-height: 1.0;padding: 10px;width: 98%;resize: none;border: solid;border-width: 1px;border-color: #009999;"></textarea><br>
                <input id="console_input" placeholder="Press Enter to send gcode to printer"  style="padding: 10px;margin: 5px;width: 98%;height: auto;border: solid;border-width: 1px;border-color: #009999;">
        </div>
    </body>
</html>
