<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buildbotics Controller - Web interface</title>
    <link rel="stylesheet" href="/css/pure-min.css">
    <!--if lte IE 8link(rel="stylesheet", href="css/side-menu-old-ie.css")
    -->
    <!-- [if gt IE 8] <!-->
    <link rel="stylesheet" href="css/side-menu.css">
    <!-- <![endif]-->
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="css/Audiowide.css" rel="stylesheet" type="text/css">
    <link href="css/clusterize.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/css/style-e5281a97214c84d1650c4fc10828751ccd8e137e7f7546435f1784990219424b.css">
  </head>
  <body v-cloak>
    <div id="overlay" v-if="status != 'connected'"><span>{{status}}</span></div>
    <div id="layout"><a id="menuLink" href="#menu" class="menu-link"><span></span></a>
      <div id="menu">
        <button :disabled="!modified" @click="save" class="save pure-button button-success">Save</button>
        <div class="pure-menu">
          <ul class="pure-menu-list">
            <li class="pure-menu-heading"><a href="#control" class="pure-menu-link">Control</a></li>
            <li class="pure-menu-heading"><a href="#motor:0" class="pure-menu-link">Motors</a></li>
            <li v-for="motor in config.motors" class="pure-menu-item"><a :href="'#motor:' + $index" class="pure-menu-link">Motor {{$index}}</a></li>
            <li class="pure-menu-heading"><a href="#tool" class="pure-menu-link">Tool</a></li>
            <li class="pure-menu-heading"><a href="#io" class="pure-menu-link">I/O</a></li>
            <li class="pure-menu-heading"><a href="#gcode" class="pure-menu-link">Gcode</a></li>
            <li class="pure-menu-heading"><a href="#admin-general" class="pure-menu-link">Admin</a></li>
            <li class="pure-menu-item"><a href="#admin-general" class="pure-menu-link">General</a></li>
            <li class="pure-menu-item"><a href="#admin-network" class="pure-menu-link">Network</a></li>
            <li class="pure-menu-heading"><a href="#cheat-sheet" class="pure-menu-link">Cheat Sheet</a></li>
            <li class="pure-menu-heading"><a href="#help" class="pure-menu-link">Help</a></li>
          </ul>
        </div>
      </div>
      <div id="main">
        <div class="header">
          <div class="header-content">
            <div :class="{active: state.es}" class="estop">
              <estop @click="estop"></estop>
            </div>
            <div class="banner"><img src="/images/buildbotics_logo.png">
              <div class="title"><span class="left">Build</span><span class="right">botics</span></div>
              <div class="subtitle">Machine Controller v{{config.version}}<a v-if="show_upgrade()" href="#admin" class="upgrade-version">Upgrade to v{{latestVersion}}</a>
                <div v-if="!show_upgrade() &amp;&amp; latestVersion" title="Firmware up to date" class="fa fa-check"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="content {{currentView}}-view">
          <component :is="currentView + '-view'" :index="index" :config="config" :template="template" :state="state" keep-alive></component>
        </div>
      </div>
    </div>
    <message :show.sync="errorShow" class="error-message">
      <div slot="header">
        <div :class="{active: state.es}" class="estop">
          <estop @click="estop"></estop>
        </div>
        <h3>ERROR: {{errorMessage}}</h3>
      </div>
      <div slot="body">
        <console></console>
        <button @click="block_error_dialog" class="pure-button">
          <div class="fa fa-ban"></div>&nbsp;Stop
        </button>
        <label>showing errors for</label>
        <input style="width: 50px" v-model="errorTimeout" number>
        <label>seconds.</label>
      </div>
      <div slot="footer">
        <button @click="errorShow = false" class="pure-button pure-button-primary">Ok</button>
      </div>
    </message>
    <message :show.sync="confirmUpgrade">
      <h3 slot="header">Upgrade Firmware?</h3>
      <div slot="body">
        <p>
          Are you sure you want to upgrade the firmware to version
          {{latestVersion}}?
        </p>
        <p class="pure-control-group">
          <label for="pass">Password</label>
          <input name="pass" v-model="password" type="password" @keyup.enter="upgrade_confirmed">
        </p>
      </div>
      <div slot="footer">
        <button @click="confirmUpgrade=false" class="pure-button">Cancel</button>
        <button @click="upgrade_confirmed" class="pure-button pure-button-primary">Upgrade</button>
      </div>
    </message>
    <message :show.sync="confirmUpload">
      <h3 slot="header">Upload Firmware?</h3>
      <div slot="body">
        <p>Are you sure you want to upload firmware <em>{{firmwareName}}</em>?</p>
        <p class="pure-control-group">
          <label for="pass">Password</label>
          <input name="pass" v-model="password" type="password" @keyup.enter="upload_confirmed">
        </p>
      </div>
      <div slot="footer">
        <button @click="confirmUpload=false" class="pure-button">Cancel</button>
        <button @click="upload_confirmed" class="pure-button pure-button-primary">Upload</button>
      </div>
    </message>
    <message :show.sync="firmwareUpgrading">
      <h3 slot="header">Firmware upgrading</h3>
      <div slot="body">
        <h3>Please wait...</h3>
        <p>Loss of power during an upgrade may damage the controller.</p>
      </div>
      <div slot="footer"></div>
    </message>
    <message :show.sync="showMessages">
      <h3 slot="header">GCode message</h3>
      <div slot="body">
        <ul>
          <li v-for="msg in messages" track-by="$index">{{msg}}</li>
        </ul>
      </div>
      <div slot="footer">
        <button v-if="state.xx != 'HOLDING'" @click="close_messages('ok')" class="pure-button button-success">OK</button>
        <div v-if="state.xx == 'HOLDING'">
          <button @click="close_messages('stop')" class="pure-button">Stop
            <div class="fa fa-stop"></div>
          </button>
          <button @click="close_messages('continue')" class="pure-button">Continue
            <div class="fa fa-play"></div>
          </button>
        </div>
      </div>
    </message>
    <div id="templates">
      <script id="gcode-view-template" type="text/x-template">
        <div id="gcode">
          <h1>GCode Configuration</h1>
          <form class="pure-form pure-form-aligned">
            <fieldset>
              <templated-input v-for="templ in template.gcode" :name="$key" :model.sync="config.gcode[$key]" :template="templ"></templated-input>
            </fieldset>
          </form>
        </div>
      </script>
      <script id="admin-network-view-template" type="text/x-template">
        <div id="admin-network">
          <h2>Hostname</h2>
          <div class="pure-form pure-form-aligned">
            <div class="pure-control-group">
              <label for="hostname">Hostname</label>
              <input name="hostname" v-model="hostname" @keyup.enter="set_hostname">
              <button @click="set_hostname" class="pure-button pure-button-primary">Set</button>
            </div>
          </div>
          <message :show.sync="hostnameSet">
            <h3 slot="header">Hostname Set</h3>
            <div slot="body">
              <p>Hostname was successfuly set to <strong>{{hostname}}</strong>.</p>
              <p>Rebooting to apply changes.</p>
              <p>Redirecting to new hostname in {{redirectTimeout}} seconds.</p>
            </div>
            <div slot="footer"></div>
          </message>
          <h2>Remote SSH User</h2>
          <div class="pure-form pure-form-aligned">
            <div class="pure-control-group">
              <label for="username">Username</label>
              <input name="username" v-model="username" @keyup.enter="set_username">
              <button @click="set_username" class="pure-button pure-button-primary">Set</button>
            </div>
          </div>
          <div class="pure-form pure-form-aligned">
            <div class="pure-control-group">
              <label for="current">Current Password</label>
              <input name="current" v-model="current" type="password">
            </div>
            <div class="pure-control-group">
              <label for="pass1">New Password</label>
              <input name="pass1" v-model="password" type="password">
            </div>
            <div class="pure-control-group">
              <label for="pass2">New Password</label>
              <input name="pass2" v-model="password2" type="password">
              <button @click="set_password" class="pure-button pure-button-primary">Set</button>
            </div>
          </div>
          <message :show.sync="passwordSet">
            <h3 slot="header">Password Set</h3>
            <p slot="body"></p>
          </message>
          <message :show.sync="usernameSet">
            <h3 slot="header">Username Set</h3>
            <p slot="body"></p>
          </message>
          <h2>Wifi Setup</h2>
          <div class="pure-form pure-form-aligned">
            <div class="pure-control-group">
              <label for="wifi_mode">Mode</label>
              <select name="wifi_mode" v-model="wifi_mode" title="Select client or access point mode">
                <option value="disabled">Disabled</option>
                <option value="client">Client</option>
                <option value="ap">Access Point</option>
              </select>
              <button @click="wifiConfirm = true" v-if="wifi_mode == 'disabled'" class="pure-button pure-button-primary">Set</button>
            </div>
            <div v-if="wifi_mode == 'ap'" class="pure-control-group">
              <label for="wifi_ch">Channel</label>
              <select name="wifi_ch" v-model="wifi_ch">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
              </select>
            </div>
            <div v-if="wifi_mode != 'disabled'" class="pure-control-group">
              <label for="ssid">Network (SSID)</label>
              <input name="ssid" v-model="wifi_ssid">
            </div>
            <div v-if="wifi_mode != 'disabled'" class="pure-control-group">
              <label for="wifi_pass">Password</label>
              <input name="wifi_pass" v-model="wifi_pass" type="password">
              <button @click="wifiConfirm = true" class="pure-button pure-button-primary">Set</button>
            </div>
          </div>
          <message :show.sync="wifiConfirm" class="wifi-confirm">
            <h3 slot="header">Configure Wifi and reboot?</h3>
            <div slot="body">
              <p>
                After configuring the Wifi settings the controller will
                automatically reboot.
              </p>
              <table>
                <tr>
                  <th>Mode</th>
                  <td>&nbsp;{{wifi_mode}}</td>
                </tr>
                <tr v-if="wifi_mode == 'ap'">
                  <th>Channel</th>
                  <td>&nbsp;{{wifi_ch}}</td>
                </tr>
                <tr v-if="wifi_mode != 'disabled'">
                  <th>SSID</th>
                  <td>&nbsp;{{wifi_ssid}}</td>
                </tr>
                <tr v-if="wifi_mode != 'disabled'">
                  <th>Auth</th>
                  <td>&nbsp;{{wifi_pass ? 'WPA2' : 'Open'}}</td>
                </tr>
              </table>
            </div>
            <div slot="footer">
              <button @click="wifiConfirm = false" class="pure-button">Cancel</button>
              <button @click="config_wifi" class="pure-button button-success">OK</button>
            </div>
          </message>
          <message :show.sync="rebooting">
            <h3 slot="header">Rebooting</h3>
            <p slot="body">Please wait...</p>
            <div slot="footer"></div>
          </message>
        </div>
      </script>
      <script id="message-template" type="text/x-template">
        <div v-show="show" transition="modal" class="modal-mask">
          <div class="modal-wrapper">
            <div class="modal-container">
              <div class="modal-header">
                <slot name="header">default header</slot>
              </div>
              <div class="modal-body">
                <slot name="body">default body</slot>
              </div>
              <div class="modal-footer">
                <slot name="footer">
                  <button @click="show = false" class="pure-button button-success">OK</button>
                </slot>
              </div>
            </div>
          </div>
        </div>
      </script>
      <script id="axis-control-template" type="text/x-template">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
          <defs>
            <lineargradient id="red">
              <stop offset="0" stop-color="#d26969"></stop>
              <stop offset="1" stop-color="#ff7f7f"></stop>
            </lineargradient>
            <lineargradient id="green">
              <stop offset="0" stop-color="#69d269"></stop>
              <stop offset="1" stop-color="#7fff7f"></stop>
            </lineargradient>
            <lineargradient id="blue">
              <stop offset="0" stop-color="#6969d2"></stop>
              <stop offset="1" stop-color="#7f7fff"></stop>
            </lineargradient>
            <lineargradient id="orange">
              <stop offset="0" stop-color="#d29d69"></stop>
              <stop offset="1" stop-color="#ffbf7f"></stop>
            </lineargradient>
            <lineargradient id="cyan">
              <stop offset="0" stop-color="#69d2d2"></stop>
              <stop offset="1" stop-color="#7fffff"></stop>
            </lineargradient>
            <lineargradient id="purple">
              <stop offset="0" stop-color="#d269d2"></stop>
              <stop offset="1" stop-color="#ff7fff"></stop>
            </lineargradient>
            <lineargradient xlink:href="#red" id="red-1" gradientunits="userSpaceOnUse" gradienttransform="rotate(180 7 5)" x1="0" y1="0" x2="15" y2="10"></lineargradient>
            <lineargradient xlink:href="#red" id="red-2" gradientunits="userSpaceOnUse" x1="10" y1="10" x2="40" y2="40"></lineargradient>
            <lineargradient xlink:href="#green" id="green-1" gradientunits="userSpaceOnUse" gradienttransform="rotate(180 7 5)" x1="0" y1="0" x2="15" y2="10"></lineargradient>
            <lineargradient xlink:href="#green" id="green-2" gradientunits="userSpaceOnUse" x1="10" y1="10" x2="40" y2="40"></lineargradient>
            <lineargradient xlink:href="#blue" id="blue-1" gradientunits="userSpaceOnUse" gradienttransform="rotate(180 7 5)" x1="0" y1="0" x2="15" y2="10"></lineargradient>
            <lineargradient xlink:href="#blue" id="blue-2" gradientunits="userSpaceOnUse" x1="10" y1="10" x2="40" y2="40"></lineargradient>
            <lineargradient xlink:href="#orange" id="orange-1" gradientunits="userSpaceOnUse" gradienttransform="rotate(180 7 5)" x1="0" y1="0" x2="15" y2="10"></lineargradient>
            <lineargradient xlink:href="#orange" id="orange-2" gradientunits="userSpaceOnUse" x1="10" y1="10" x2="40" y2="40"></lineargradient>
            <lineargradient xlink:href="#cyan" id="cyan-1" gradientunits="userSpaceOnUse" gradienttransform="rotate(180 7 5)" x1="0" y1="0" x2="15" y2="10"></lineargradient>
            <lineargradient xlink:href="#cyan" id="cyan-2" gradientunits="userSpaceOnUse" x1="10" y1="10" x2="40" y2="40"></lineargradient>
            <lineargradient xlink:href="#purple" id="purple-1" gradientunits="userSpaceOnUse" gradienttransform="rotate(180 7 5)" x1="0" y1="0" x2="15" y2="10"></lineargradient>
            <lineargradient xlink:href="#purple" id="purple-2" gradientunits="userSpaceOnUse" x1="10" y1="10" x2="40" y2="40"></lineargradient>
            <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
              <feOffset in="SourceAlpha" dx="3" dy="3"></feOffset>
              <feComponentTransfer>
                <feFuncR type="discrete" tableValues="0.05"></feFuncR>
                <feFuncG type="discrete" tableValues="0.05"></feFuncG>
                <feFuncB type="discrete" tableValues="0.05"></feFuncB>
              </feComponentTransfer>
              <feGaussianBlur result="shadow" stdDeviation="5"></feGaussianBlur>
              <feBlend in="SourceGraphic" in2="shadow" mode="normal"></feBlend>
            </filter>
            <path id="pie-1" d="M107,0 83,0 0,83 0,107A107,107 0 0 0 107,0Z"></path>
            <path id="pie-2" d="M83,0 59,0 0,59 0,83A83,83 0 0 0 83,0Z"></path>
            <path id="pie-3" d="M59,0 35,0 0,35 0,59A59,59 0 0 0 59,0Z"></path>
            <path id="pie-4" d="M35,0 0,0 0,35A35,35 0 0 0 35,0Z"></path>
            <path id="arrow" d="M-16,9 0,9 0,17 17,0 0,-17 0,-9 -16,-9 -16,9Z"></path>
          </defs>
          <g transform="scale(0.8, 0.8)">
            <!-- 100% ring-->
            <g fill="#9f9f9f" filter="url(#shadow)" class="ring">
              <use xlink:href="#pie-1" v-if="enabled[0]" transform="translate(134 121) rotate(-45)" @mousedown="jog(0, 1)" @mouseup="release(0)" class="button"></use>
              <use xlink:href="#pie-1" v-if="enabled[0]" transform="translate(115 121) rotate(135)" @mousedown="jog(0, -1)" @mouseup="release(0)" class="button"></use>
              <g @mousedown="jog(1, 1)" @mouseup="release(1)" v-if="enabled[1]" class="button">
                <use xlink:href="#pie-1" transform="translate(124 111) rotate(-135)" class="button"></use>
                <text x="125" y="24" transform="rotate(22 125 125)">100%</text>
                <text x="125" y="24" transform="rotate(-22 125 125)">100%</text>
                <use xlink:href="#pie-1" fill="transparent" transform="translate(124 111) rotate(-135)" class="button"></use>
              </g>
              <use xlink:href="#pie-1" v-if="enabled[1]" transform="translate(124 130) rotate(45)" @mousedown="jog(1, -1)" @mouseup="release(1)" class="button"></use>
            </g>
            <!-- 50% ring-->
            <g fill="#c5c5c5" filter="url(#shadow)" class="ring">
              <use xlink:href="#pie-2" v-if="enabled[0]" transform="translate(134 121) rotate(-45)" @mousedown="jog(0, 0.5)" @mouseup="release(0)" class="button"></use>
              <use xlink:href="#pie-2" v-if="enabled[0]" transform="translate(115 121) rotate(135)" @mousedown="jog(0, -0.5)" @mouseup="release(0)" class="button"></use>
              <g @mousedown="jog(1, 0.5)" @mouseup="release(1)" v-if="enabled[1]" class="button">
                <use xlink:href="#pie-2" transform="translate(124 111) rotate(-135)" class="button"></use>
                <text x="125" y="48">50%</text>
                <use xlink:href="#pie-2" fill="transparent" transform="translate(124 111) rotate(-135)" class="button"></use>
              </g>
              <use xlink:href="#pie-2" v-if="enabled[1]" transform="translate(124 130) rotate(45)" @mousedown="jog(1, -0.5)" @mouseup="release(1)" class="button"></use>
            </g>
            <!-- 25% ring-->
            <g fill="#e2e2e2" filter="url(#shadow)" class="ring">
              <use xlink:href="#pie-3" v-if="enabled[0]" transform="translate(134 121) rotate(-45)" @mousedown="jog(0, 0.25)" @mouseup="release(0)" class="button"></use>
              <use xlink:href="#pie-3" v-if="enabled[0]" transform="translate(115 121) rotate(135)" @mousedown="jog(0, -0.25)" @mouseup="release(0)" class="button"></use>
              <g @mousedown="jog(1, 0.25)" @mouseup="release(1)" v-if="enabled[1]" class="button">
                <use xlink:href="#pie-3" transform="translate(124 111) rotate(-135)" class="button"></use>
                <text x="125" y="73">25%</text>
                <use xlink:href="#pie-3" fill="transparent" transform="translate(124 111) rotate(-135)" class="button"></use>
              </g>
              <use xlink:href="#pie-3" v-if="enabled[1]" transform="translate(124 130) rotate(45)" @mousedown="jog(1, -0.25)" @mouseup="release(1)" class="button"></use>
            </g>
            <!-- 10% ring-->
            <g fill="#f7f7f7" filter="url(#shadow)" class="ring">
              <use xlink:href="#pie-4" v-if="enabled[0]" transform="translate(134 121) rotate(-45)" @mousedown="jog(0, 0.1)" @mouseup="release(0)" class="button"></use>
              <use xlink:href="#pie-4" v-if="enabled[0]" transform="translate(115 121) rotate(135)" @mousedown="jog(0, -0.1)" @mouseup="release(0)" class="button"></use>
              <g @mousedown="jog(1, 0.1)" @mouseup="release(1)" v-if="enabled[1]" class="button">
                <use xlink:href="#pie-4" transform="translate(124 111) rotate(-135)" class="button"></use>
                <text x="125" y="95">10%</text>
                <use xlink:href="#pie-4" fill="transparent" transform="translate(124 111) rotate(-135)" class="button"></use>
              </g>
              <use xlink:href="#pie-4" v-if="enabled[1]" transform="translate(124 130) rotate(45)" @mousedown="jog(1, -0.1)" @mouseup="release(1)" class="button"></use>
            </g>
            <!-- +A-->
            <g @mousedown="jog(0, 1)" @mouseup="release(0)" transform="translate(230 120)" v-if="enabled[0]" class="button arrow">
              <use xlink:href="#arrow" fill="url(#{{colors[0]}}-1)"></use>
              <text x="-12" y="5" font-size="14" textLength="21">+{{axes[0]}}</text>
            </g>
            <!-- -A-->
            <g @mousedown="jog(0, -1)" @mouseup="release(0)" transform="translate(20 120)" v-if="enabled[0]" class="button arrow">
              <use xlink:href="#arrow" fill="url(#{{colors[0]}}-1)" transform="rotate(180)"></use>
              <text x="-8" y="5" font-size="14" textLength="16">-{{axes[0]}}</text>
            </g>
            <!-- +B-->
            <g @mousedown="jog(1, 1)" @mouseup="release(1)" transform="translate(125, 18)" v-if="enabled[1]" class="button arrow">
              <use xlink:href="#arrow" fill="url(#{{colors[1]}}-1)" transform="rotate(-90)"></use>
              <text x="-8" y="5" font-size="12" textLength="16">+{{axes[1]}}</text>
            </g>
            <!-- -B-->
            <g @mousedown="jog(1, -1)" @mouseup="release(1)" transform="translate(125, 225)" v-if="enabled[1]" class="button arrow">
              <use xlink:href="#arrow" fill="url(#{{colors[1]}}-1)" transform="rotate(90)"></use>
              <text x="-7" y="5" font-size="12" textLength="14">-{{axes[1]}}</text>
            </g>
          </g>
        </svg>
      </script>
      <script id="cheat-sheet-view-template" type="text/x-template">
        <!-- Modified from http://linuxcnc.org/docs/html/gcode.html-->
        <div class="cheat-sheet">
          <h2>GCode Cheat Sheet</h2>
          <table>
            <tr>
              <th>Code</th>
              <th>Parameters</th>
              <th>Description</th>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Motion</th>
            </tr>
            <tr>
              <td><a href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g0">G0</a></td>
              <td></td>
              <td>Rapid Move</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g1">G1</a></td>
              <td></td>
              <td>Linear Move</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g2-g3">G2, G3</a></td>
              <td>I J K or R, P</td>
              <td>Arc Move</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g4">G4</a></td>
              <td>P</td>
              <td>Dwell</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g5">G5</a></td>
              <td>I J P Q</td>
              <td>Cubic Spline</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g5.1">G5.1</a></td>
              <td>I J</td>
              <td>Quadratic Spline</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g5.2-g5.3">G5.2</a></td>
              <td>P L</td>
              <td>NURBS</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g38">G38.2 - G38.5</a></td>
              <td></td>
              <td>Straight Probe</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g33.1">G33.1</a></td>
              <td>K</td>
              <td>Rigid Tapping</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Tool Control</th>
            </tr>
            <tr>
              <td><a href="http://linuxcnc.org/docs/html/gcode/other-code.html#sec:select-tool">T</a></td>
              <td></td>
              <td>Select Tool</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m6">M6</a></td>
              <td>T</td>
              <td>Tool Change</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m61">M61</a></td>
              <td>Q</td>
              <td>Set Current Tool</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g10-l1">G10 L1</a></td>
              <td>P Q R</td>
              <td>Set Tool Table</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g10-l10">G10 L10</a></td>
              <td>P</td>
              <td>Set Tool Table</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g10-l11">G10 L11</a></td>
              <td>P</td>
              <td>Set Tool Table</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g43">G43</a></td>
              <td> H</td>
              <td>Tool Length Offset</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g43.1">G43.1</a></td>
              <td></td>
              <td>Dynamic Tool Length Offset</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g43.2">G43.2</a></td>
              <td> H</td>
              <td>Apply additional Tool Length Offset</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g49">G49</a></td>
              <td></td>
              <td>Cancel Tool Length Compensation</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Feed Control</th>
            </tr>
            <tr>
              <td><a href="http://linuxcnc.org/docs/html/gcode/other-code.html#sec:set-feed-rate">F</a></td>
              <td></td>
              <td>Set Feed Rate</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g93-g94-g95">G93, G94, G95</a></td>
              <td></td>
              <td>Feed Rate Mode</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m52">M52</a></td>
              <td>P0 (off) or P1 (on)</td>
              <td>Adaptive Feed Control</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m53">M53</a></td>
              <td>P0 (off) or P1 (on)</td>
              <td>Feed Stop Control</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Spindle Control</th>
            </tr>
            <tr>
              <td><a href="http://linuxcnc.org/docs/html/gcode/other-code.html#sec:set-spindle-speed">S</a></td>
              <td></td>
              <td>Set Spindle Speed</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m3-m4-m5">M3, M4, M5</a></td>
              <td>S</td>
              <td>Spindle Control</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m19">M19</a></td>
              <td></td>
              <td>Orient Spindle</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g96-g97">G96, G97</a></td>
              <td> S D</td>
              <td>Spindle Control Mode</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g33">G33</a></td>
              <td>K</td>
              <td>Spindle Synchronized Motion</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Coolant</th>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m7-m8-m9">M7, M8, M9</a></td>
              <td></td>
              <td>Coolant Control</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Stopping</th>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m0-m1">M0, M1</a></td>
              <td></td>
              <td>Program Pause</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m2-m30">M2, M30</a></td>
              <td></td>
              <td>Program End</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m60">M60</a></td>
              <td></td>
              <td>Pallet Change Pause</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Units</th>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g20-g21">G20, G21</a></td>
              <td></td>
              <td>Units (inch, mm)</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Distance Mode</th>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g90-g91">G90, G91</a></td>
              <td></td>
              <td>Distance Mode</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g90.1-g91.1">G90.1, G91.1</a></td>
              <td></td>
              <td>Arc Distance Mode</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g7">G7</a></td>
              <td></td>
              <td>Lathe Diameter Mode</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g8">G8</a></td>
              <td></td>
              <td>Lathe Radius Mode</td>
            </tr>
            <tr v-if="showUnimplemented" class="spacer-row unimplemented">
              <th></th>
            </tr>
            <tr v-if="showUnimplemented" class="header-row unimplemented">
              <th colspan="3">Cutter Radius Compensation</th>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g40">G40</a></td>
              <td></td>
              <td>Compensation Off</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g41-g42">G41,G42</a></td>
              <td>D</td>
              <td>Cutter Compensation</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g41.1-g42.1">G41.1, G42.1</a></td>
              <td>D L</td>
              <td>Dynamic Cutter Compensation</td>
            </tr>
            <tr v-if="showUnimplemented" class="spacer-row unimplemented">
              <th></th>
            </tr>
            <tr v-if="showUnimplemented" class="header-row unimplemented">
              <th colspan="3">Path Control Mode</th>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g61-g61.1">G61 G61.1</a></td>
              <td></td>
              <td>Exact Path Mode</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g64">G64</a></td>
              <td>P Q</td>
              <td>Path Blending</td>
            </tr>
            <tr v-if="showUnimplemented" class="spacer-row unimplemented">
              <th></th>
            </tr>
            <tr v-if="showUnimplemented" class="header-row unimplemented">
              <th colspan="3">Overrides</th>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m48-m49">M48, M49</a></td>
              <td></td>
              <td>Speed and Feed Override Control</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m50">M50</a></td>
              <td>P0 (off) or P1 (on)</td>
              <td>Feed Override Control</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m51">M51</a></td>
              <td>P0 (off) or P1 (on)</td>
              <td>Spindle Speed Override Control</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Coordinate Systems, Offsets & Planes</th>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g54-g59.3">G54-G59.3</a></td>
              <td></td>
              <td>Select Coordinate System</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g10-l2">G10 L2</a></td>
              <td>P R</td>
              <td>Set Coordinate System</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g10-l20">G10 L20</a></td>
              <td>P</td>
              <td>Set Coordinate System</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g53">G53</a></td>
              <td></td>
              <td>Move in Machine Coordinates</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g92">G92</a></td>
              <td></td>
              <td>Coordinate System Offset</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g92.1-g92.2">G92.1, G92.2</a></td>
              <td></td>
              <td>Reset G92 Offsets</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g92.3">G92.3</a></td>
              <td></td>
              <td>Restore G92 Offsets</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g28-g28.1">G28, G28.1</a></td>
              <td></td>
              <td>Go/Set Predefined Position</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g30-g30.1">G30, G30.1</a></td>
              <td></td>
              <td>Go/Set Predefined Position</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g17-g19.1">G17 - G19.1</a></td>
              <td>(affects G2, G3, G81…G89, G40…G42)</td>
              <td>Plane Select</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Flow-control Codes</th>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/o-code.html#ocode:subroutines">o sub/endsub/call</a></td>
              <td></td>
              <td>Subroutines, sub/endsub call</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/o-code.html#ocode:looping">o while</a></td>
              <td></td>
              <td>Looping, while/endwhile do/while</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/o-code.html#ocode:conditional">o if</a></td>
              <td></td>
              <td>Conditional, if/else/endif</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/o-code.html#ocode:repeat">o repeat</a></td>
              <td></td>
              <td>Repeat a loop of code</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/o-code.html#ocode:indirection">[]</a></td>
              <td></td>
              <td>Indirection</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/o-code.html#ocode:calling-files">o call</a></td>
              <td></td>
              <td>Call named or numbered file</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Modal State</th>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m70">M70</a></td>
              <td></td>
              <td>Save modal state</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m71">M71</a></td>
              <td></td>
              <td>Invalidate stored state</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m72">M72</a></td>
              <td></td>
              <td>Restore modal state</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m73">M73</a></td>
              <td></td>
              <td>Save and Auto-restore modal state</td>
            </tr>
            <tr v-if="showUnimplemented" class="spacer-row unimplemented">
              <th></th>
            </tr>
            <tr v-if="showUnimplemented" class="header-row unimplemented">
              <th colspan="3">Input/Output</th>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m62-m65">M62 - M65</a></td>
              <td>P</td>
              <td>Digital Output Control</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m66">M66</a></td>
              <td>P E L Q</td>
              <td>Wait on Input</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m67">M67</a></td>
              <td>T</td>
              <td>Analog Output,Synchronized</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m68">M68</a></td>
              <td>T</td>
              <td>Analog Output, Immediate</td>
            </tr>
            <tr v-if="showUnimplemented" class="spacer-row unimplemented">
              <th></th>
            </tr>
            <tr v-if="showUnimplemented" class="header-row unimplemented">
              <th colspan="3">User Defined Commands</th>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/m-code.html#mcode:m100-m199">M101 - M199</a></td>
              <td>P Q</td>
              <td>User Defined Commands</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Canned cycles</th>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g80">G80</a></td>
              <td></td>
              <td>Cancel Canned Cycle</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g81">G81</a></td>
              <td>R L (P)</td>
              <td>Drilling Cycle</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g82">G82</a></td>
              <td>R L (P)</td>
              <td>Drilling Cycle, Dwell</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g83">G83</a></td>
              <td>R L Q</td>
              <td>Drilling Cycle, Peck</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g73">G73</a></td>
              <td>R L Q</td>
              <td>Drilling Cycle, Chip Breaking</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g85">G85</a></td>
              <td>R L (P)</td>
              <td>Boring Cycle, Feed Out</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g89">G89</a></td>
              <td>R L (P)</td>
              <td>Boring Cycle, Dwell, Feed Out</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g76">G76</a></td>
              <td>P Z I J R K Q H L E</td>
              <td>Threading Cycle</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/g-code.html#gcode:g98-g99">G98, G99</a></td>
              <td></td>
              <td>Canned Cycle Return Level</td>
            </tr>
            <tr class="spacer-row">
              <th></th>
            </tr>
            <tr class="header-row">
              <th colspan="3">Comments & Messages</th>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/overview.html#gcode:comments">; (…)</a></td>
              <td></td>
              <td>Comments</td>
            </tr>
            <tr>
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/overview.html#gcode:messages">(MSG,…)</a></td>
              <td></td>
              <td>Messages</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/overview.html#gcode:debug">(DEBUG,…)</a></td>
              <td></td>
              <td>Debug Messages</td>
            </tr>
            <tr v-if="showUnimplemented" class="unimplemented">
              <td><a target="_blank" href="http://linuxcnc.org/docs/html/gcode/overview.html#gcode:print">(PRINT,…)</a></td>
              <td></td>
              <td>Print Messages</td>
            </tr>
          </table>
          <div>
            <input type="checkbox" v-model="showUnimplemented">
            <label>Show unsupported codes</label>
          </div>
          <h2>Further GCode Programming Documentation</h2>
          <p>
            The Buildbotics controller implements a subset of LinuxCNC GCode.
            Supported commands are listed above.  You can find further help with
            <a href="http://wikipedia.com/wiki/G-code" target="_blank">GCode</a>
            programming on the LinuxCNC website:
          </p>
          <ul>
            <li><a href="http://linuxcnc.org/docs/html/gcode/overview.html" target="_blank">G Code overview</a></li>
            <li><a href="http://linuxcnc.org/docs/html/gcode/g-code.html" target="_blank">G Code reference</a></li>
            <li><a href="http://linuxcnc.org/docs/html/gcode/m-code.html" target="_blank">M Code reference</a></li>
          </ul>
        </div>
      </script>
      <script id="control-view-template" type="text/x-template">
        <div id="control">
          <table class="axes">
            <tr :class="{'homed': is_homed()}">
              <th class="name">Axis</th>
              <th class="position">Position</th>
              <th class="absolute">Absolute</th>
              <th class="offset">Offset</th>
              <th class="actions">
                <button :disabled="!is_ready" title="Zero all axis offsets." @click="zero()" class="pure-button">&empty;</button>
                <button title="Home all axes." @click="home()" :disabled="!is_ready" class="pure-button">
                  <div class="fa fa-home"></div>
                </button>
              </th>
            </tr>
            <tr :class="{'homed': is_homed('x'), 'axis-x': true}" v-if="enabled('x')" class="axis">
              <th class="name">x</th>
              <td class="position">{{(state.xp + get_offset('x')) || 0 | fixed 3}}</td>
              <td class="absolute">{{state.xp || 0 | fixed 3}}</td>
              <td class="offset">{{get_offset('x') | fixed 3}}</td>
              <th class="actions">
                <button :disabled="!is_ready" title="Set {{'x' | upper}} axis position." @click="show_set_position('x')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="!is_ready" title="Zero {{'x' | upper}} axis offset." @click="zero('x')" class="pure-button">&empty;</button>
                <button :disabled="!is_ready" title="Home {{'x' | upper}} axis." @click="home('x')" class="pure-button">
                  <div class="fa fa-home"></div>
                </button>
                <message :show.sync="position_msg['x']">
                  <h3 slot="header">Set {{'x' | upper}} axis position</h3>
                  <div slot="body">
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Position</label>
                        <input v-model="axis_position" @keyup.enter="set_position('x', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="position_msg['x'] = false" class="pure-button">Cancel</button>
                    <button @click="set_position('x', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
                <message :show.sync="manual_home['x']">
                  <h3 slot="header">Manually home {{'x' | upper}} axis</h3>
                  <div slot="body">
                    <p>Set axis absolute position.</p>
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Absolute</label>
                        <input v-model="axis_position" @keyup.enter="set_home('x', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="manual_home['x'] = false" class="pure-button">Cancel</button>
                    <button title="Home {{'x' | upper}} axis." @click="set_home('x', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
              </th>
            </tr>
            <tr :class="{'homed': is_homed('y'), 'axis-y': true}" v-if="enabled('y')" class="axis">
              <th class="name">y</th>
              <td class="position">{{(state.yp + get_offset('y')) || 0 | fixed 3}}</td>
              <td class="absolute">{{state.yp || 0 | fixed 3}}</td>
              <td class="offset">{{get_offset('y') | fixed 3}}</td>
              <th class="actions">
                <button :disabled="!is_ready" title="Set {{'y' | upper}} axis position." @click="show_set_position('y')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="!is_ready" title="Zero {{'y' | upper}} axis offset." @click="zero('y')" class="pure-button">&empty;</button>
                <button :disabled="!is_ready" title="Home {{'y' | upper}} axis." @click="home('y')" class="pure-button">
                  <div class="fa fa-home"></div>
                </button>
                <message :show.sync="position_msg['y']">
                  <h3 slot="header">Set {{'y' | upper}} axis position</h3>
                  <div slot="body">
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Position</label>
                        <input v-model="axis_position" @keyup.enter="set_position('y', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="position_msg['y'] = false" class="pure-button">Cancel</button>
                    <button @click="set_position('y', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
                <message :show.sync="manual_home['y']">
                  <h3 slot="header">Manually home {{'y' | upper}} axis</h3>
                  <div slot="body">
                    <p>Set axis absolute position.</p>
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Absolute</label>
                        <input v-model="axis_position" @keyup.enter="set_home('y', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="manual_home['y'] = false" class="pure-button">Cancel</button>
                    <button title="Home {{'y' | upper}} axis." @click="set_home('y', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
              </th>
            </tr>
            <tr :class="{'homed': is_homed('z'), 'axis-z': true}" v-if="enabled('z')" class="axis">
              <th class="name">z</th>
              <td class="position">{{(state.zp + get_offset('z')) || 0 | fixed 3}}</td>
              <td class="absolute">{{state.zp || 0 | fixed 3}}</td>
              <td class="offset">{{get_offset('z') | fixed 3}}</td>
              <th class="actions">
                <button :disabled="!is_ready" title="Set {{'z' | upper}} axis position." @click="show_set_position('z')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="!is_ready" title="Zero {{'z' | upper}} axis offset." @click="zero('z')" class="pure-button">&empty;</button>
                <button :disabled="!is_ready" title="Home {{'z' | upper}} axis." @click="home('z')" class="pure-button">
                  <div class="fa fa-home"></div>
                </button>
                <message :show.sync="position_msg['z']">
                  <h3 slot="header">Set {{'z' | upper}} axis position</h3>
                  <div slot="body">
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Position</label>
                        <input v-model="axis_position" @keyup.enter="set_position('z', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="position_msg['z'] = false" class="pure-button">Cancel</button>
                    <button @click="set_position('z', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
                <message :show.sync="manual_home['z']">
                  <h3 slot="header">Manually home {{'z' | upper}} axis</h3>
                  <div slot="body">
                    <p>Set axis absolute position.</p>
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Absolute</label>
                        <input v-model="axis_position" @keyup.enter="set_home('z', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="manual_home['z'] = false" class="pure-button">Cancel</button>
                    <button title="Home {{'z' | upper}} axis." @click="set_home('z', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
              </th>
            </tr>
            <tr :class="{'homed': is_homed('a'), 'axis-a': true}" v-if="enabled('a')" class="axis">
              <th class="name">a</th>
              <td class="position">{{(state.ap + get_offset('a')) || 0 | fixed 3}}</td>
              <td class="absolute">{{state.ap || 0 | fixed 3}}</td>
              <td class="offset">{{get_offset('a') | fixed 3}}</td>
              <th class="actions">
                <button :disabled="!is_ready" title="Set {{'a' | upper}} axis position." @click="show_set_position('a')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="!is_ready" title="Zero {{'a' | upper}} axis offset." @click="zero('a')" class="pure-button">&empty;</button>
                <button :disabled="!is_ready" title="Home {{'a' | upper}} axis." @click="home('a')" class="pure-button">
                  <div class="fa fa-home"></div>
                </button>
                <message :show.sync="position_msg['a']">
                  <h3 slot="header">Set {{'a' | upper}} axis position</h3>
                  <div slot="body">
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Position</label>
                        <input v-model="axis_position" @keyup.enter="set_position('a', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="position_msg['a'] = false" class="pure-button">Cancel</button>
                    <button @click="set_position('a', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
                <message :show.sync="manual_home['a']">
                  <h3 slot="header">Manually home {{'a' | upper}} axis</h3>
                  <div slot="body">
                    <p>Set axis absolute position.</p>
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Absolute</label>
                        <input v-model="axis_position" @keyup.enter="set_home('a', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="manual_home['a'] = false" class="pure-button">Cancel</button>
                    <button title="Home {{'a' | upper}} axis." @click="set_home('a', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
              </th>
            </tr>
            <tr :class="{'homed': is_homed('b'), 'axis-b': true}" v-if="enabled('b')" class="axis">
              <th class="name">b</th>
              <td class="position">{{(state.bp + get_offset('b')) || 0 | fixed 3}}</td>
              <td class="absolute">{{state.bp || 0 | fixed 3}}</td>
              <td class="offset">{{get_offset('b') | fixed 3}}</td>
              <th class="actions">
                <button :disabled="!is_ready" title="Set {{'b' | upper}} axis position." @click="show_set_position('b')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="!is_ready" title="Zero {{'b' | upper}} axis offset." @click="zero('b')" class="pure-button">&empty;</button>
                <button :disabled="!is_ready" title="Home {{'b' | upper}} axis." @click="home('b')" class="pure-button">
                  <div class="fa fa-home"></div>
                </button>
                <message :show.sync="position_msg['b']">
                  <h3 slot="header">Set {{'b' | upper}} axis position</h3>
                  <div slot="body">
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Position</label>
                        <input v-model="axis_position" @keyup.enter="set_position('b', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="position_msg['b'] = false" class="pure-button">Cancel</button>
                    <button @click="set_position('b', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
                <message :show.sync="manual_home['b']">
                  <h3 slot="header">Manually home {{'b' | upper}} axis</h3>
                  <div slot="body">
                    <p>Set axis absolute position.</p>
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Absolute</label>
                        <input v-model="axis_position" @keyup.enter="set_home('b', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="manual_home['b'] = false" class="pure-button">Cancel</button>
                    <button title="Home {{'b' | upper}} axis." @click="set_home('b', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
              </th>
            </tr>
            <tr :class="{'homed': is_homed('c'), 'axis-c': true}" v-if="enabled('c')" class="axis">
              <th class="name">c</th>
              <td class="position">{{(state.cp + get_offset('c')) || 0 | fixed 3}}</td>
              <td class="absolute">{{state.cp || 0 | fixed 3}}</td>
              <td class="offset">{{get_offset('c') | fixed 3}}</td>
              <th class="actions">
                <button :disabled="!is_ready" title="Set {{'c' | upper}} axis position." @click="show_set_position('c')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="!is_ready" title="Zero {{'c' | upper}} axis offset." @click="zero('c')" class="pure-button">&empty;</button>
                <button :disabled="!is_ready" title="Home {{'c' | upper}} axis." @click="home('c')" class="pure-button">
                  <div class="fa fa-home"></div>
                </button>
                <message :show.sync="position_msg['c']">
                  <h3 slot="header">Set {{'c' | upper}} axis position</h3>
                  <div slot="body">
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Position</label>
                        <input v-model="axis_position" @keyup.enter="set_position('c', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="position_msg['c'] = false" class="pure-button">Cancel</button>
                    <button @click="set_position('c', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
                <message :show.sync="manual_home['c']">
                  <h3 slot="header">Manually home {{'c' | upper}} axis</h3>
                  <div slot="body">
                    <p>Set axis absolute position.</p>
                    <div class="pure-form">
                      <div class="pure-control-group">
                        <label>Absolute</label>
                        <input v-model="axis_position" @keyup.enter="set_home('c', axis_position)">
                      </div>
                    </div>
                    <p></p>
                  </div>
                  <div slot="footer">
                    <button @click="manual_home['c'] = false" class="pure-button">Cancel</button>
                    <button title="Home {{'c' | upper}} axis." @click="set_home('c', axis_position)" class="pure-button button-success">Set</button>
                  </div>
                </message>
              </th>
            </tr>
          </table>
          <table class="info">
            <tr>
              <th>State</th>
              <td :class="{attention: highlight_reason}">{{mach_state}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Message</th>
              <td :class="{attention: highlight_reason}" class="reason">{{reason}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Units</th>
              <td>{{state.imperial ? 'IMPERIAL' : 'METRIC'}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Feed</th>
              <td>{{state.feed || 0 | fixed 0}}</td>
              <td>mm/min</td>
            </tr>
            <tr>
              <th>Speed</th>
              <td>{{state.speed || 0 | fixed 0}}</td>
              <td>RPM</td>
            </tr>
          </table>
          <table class="info">
            <tr>
              <th>Velocity</th>
              <td>{{state.v || 0 | fixed 2}}</td>
              <td>m/min</td>
            </tr>
            <tr>
              <th>Line</th>
              <td>{{0 <= state.line ? state.line : '-'}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Tool</th>
              <td>{{state.tool || 0}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Load 1</th>
              <td :class="state['1oa'] ? 'load-on' : ''">{{state['1oa'] ? 'On' : 'Off'}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Load 2</th>
              <td :class="state['2oa'] ? 'load-on' : ''">{{state['2oa'] ? 'On' : 'Off'}}</td>
              <td></td>
            </tr>
          </table>
          <div title="Feed rate override." class="override">
            <label>Feed</label>
            <input type="range" min="0" max="2" step="0.01" v-model="feed_override" @change="override_feed"><span class="percent">{{feed_override | percent 0}}</span>
          </div>
          <div title="Spindle speed override." class="override">
            <label>Speed</label>
            <input type="range" min="0" max="2" step="0.01" v-model="speed_override" @change="override_speed"><span class="percent">{{speed_override | percent 0}}</span>
          </div>
          <div class="tabs">
            <input id="tab1" type="radio" name="tabs" checked>
            <label for="tab1" title="Run GCode programs">Auto</label>
            <input id="tab2" type="radio" name="tabs">
            <label for="tab2" title="Manual GCode entry">MDI</label>
            <input id="tab3" type="radio" name="tabs">
            <label for="tab3" Jog the axes manually>Jog</label>
            <input id="tab4" type="radio" name="tabs">
            <label for="tab4">Messages</label>
            <input id="tab5" type="radio" name="tabs">
            <label for="tab5">Indicators</label>
            <input id="tab6" type="radio" name="tabs" @click="load_video">
            <label for="tab6">Video</label>
            <section id="content1" class="tab-content">
              <div class="toolbar">
                <button title="{{is_running ? 'Pause' : 'Start'}} program." @click="start_pause" :disabled="!state.selected" class="pure-button">
                  <div :class="is_running ? 'fa-pause' : 'fa-play'" class="fa"></div>
                </button>
                <button title="Stop program." @click="stop" class="pure-button">
                  <div class="fa fa-stop"></div>
                </button>
                <button title="Pause program at next optional stop (M1)." @click="optional_pause" v-if="false" class="pure-button">
                  <div class="fa fa-stop-circle-o"></div>
                </button>
                <button title="Execute one program step." @click="step" :disabled="(!is_ready &amp;&amp; !is_holding) || !state.selected" v-if="false" class="pure-button">
                  <div class="fa fa-step-forward"></div>
                </button>
                <button title="Upload a new GCode program." @click="open" :disabled="is_running || is_stopping" class="pure-button">
                  <div class="fa fa-folder-open"></div>
                </button>
                <input type="file" @change="upload" style="display:none" accept=".nc,.gcode,.gc,.ngc" class="gcode-file-input">
                <button title="Delete current GCode program." @click="deleteGCode = true" :disabled="!state.selected || is_running || is_stopping" class="pure-button">
                  <div class="fa fa-trash"></div>
                </button>
                <message :show.sync="deleteGCode">
                  <h3 slot="header">Delete GCode?</h3>
                  <p slot="body"></p>
                  <div slot="footer">
                    <button @click="deleteGCode = false" class="pure-button">Cancel</button>
                    <button @click="deleteAll" class="pure-button button-error">
                      <div class="fa fa-trash"></div>&nbsp;all
                    </button>
                    <button @click="deleteCurrent" class="pure-button button-success">
                      <div class="fa fa-trash"></div>&nbsp;selected
                    </button>
                  </div>
                </message>
                <select title="Select previously uploaded GCode programs." v-model="state.selected" @change="load" :disabled="is_running || is_stopping">
                  <option v-for="file in files" :value="file">{{file}}</option>
                </select>
              </div>
              <gcode-viewer></gcode-viewer>
            </section>
            <section id="content2" class="tab-content">
              <div title="Manual GCode entry." class="mdi pure-form">
                <button :disabled="!can_mdi" title="{{is_running ? 'Pause' : 'Start'}} command." @click="mdi_start_pause" class="pure-button">
                  <div :class="is_running ? 'fa-pause' : 'fa-play'" class="fa"></div>
                </button>
                <button title="Stop command." @click="stop" class="pure-button">
                  <div class="fa fa-stop"></div>
                </button>
                <input v-model="mdi" :disabled="!can_mdi" @keyup.enter="submit_mdi">
              </div>
              <div :class="{placeholder: !history}" class="history"><span v-if="!history.length">MDI history displays here.</span>
                <ul>
                  <li v-for="item in history" @click="load_history($index)" track-by="$index">{{item}}</li>
                </ul>
              </div>
            </section>
            <section id="content3" class="tab-content">
              <div class="jog">
                <axis-control axes="XY" :colors="['red', 'green']" :enabled="[enabled('x'), enabled('y')]" v-if="enabled('x') || enabled('y')"></axis-control>
                <axis-control axes="AZ" :colors="['orange', 'blue']" :enabled="[enabled('a'), enabled('z')]" v-if="enabled('a') || enabled('z')"></axis-control>
                <axis-control axes="BC" :colors="['cyan', 'purple']" :enabled="[enabled('b'), enabled('c')]" v-if="enabled('b') || enabled('c')"></axis-control>
              </div>
              <center>
                Left click the axes above holding down the mouse button to jog the
                machine.
              </center>
              <center>Jogging speed is set by the ring that is clicked.</center>
            </section>
            <section id="content4" class="tab-content">
              <console></console>
            </section>
            <section id="content5" class="tab-content">
              <indicators :state="state"></indicators>
            </section>
            <section id="content6" class="tab-content">
              <div class="video"><img src="/images/reload.png" @click="reload_video" title="Reload video" class="reload"><img :src="video_url" alt="Video camera not found." class="mjpeg"></div>
              <p style="padding:0 1em">
                Plug in a USB video camera to monitor your machine remotely.
                If it's not working, try clicking the reload button or unplugging
                and replugging the the camera.
                <a href="https://elinux.org/RPi_USB_Webcams" target="_blank">Here
                is a list</a> of USB cameras that should work.
              </p>
            </section>
          </div>
        </div>
      </script>
      <script id="motor-view-template" type="text/x-template">
        <div :class="{slave: is_slave}" class="motor">
          <h1>Motor {{index}} Configuration</h1>
          <form class="pure-form pure-form-aligned">
            <fieldset v-for="category in template.motors.template" :class="$key">
              <h2>{{$key}}</h2>
              <templated-input v-for="templ in category" :name="$key" :model.sync="motor[$key]" :template="templ">
                <label v-if="$key == 'max-velocity'" slot="extra" title="Revolutions Per Minute" class="extra">({{rpm | fixed 0}} RPM)</label>
                <label v-if="$key == 'max-accel'" slot="extra" title="G-force" class="extra">({{gForce | fixed 3}} g)</label>
                <label v-if="$key == 'max-jerk'" slot="extra" title="G-force per minute" class="extra">({{gForcePerMin | fixed 2}} g/min)</label>
                <label v-if="$key == 'step-angle'" slot="extra" title="Steps per revolution" class="extra">({{stepsPerRev | fixed 0}} steps/rev)</label>
                <label v-if="$key == 'travel-per-rev'" slot="extra" title="Micrometers per step" class="extra">({{umPerStep | fixed 1}} µm/step)</label>
              </templated-input>
            </fieldset>
          </form>
        </div>
      </script>
      <script id="admin-general-view-template" type="text/x-template">
        <div id="admin-general">
          <h2>Firmware</h2>
          <button @click="check" class="pure-button pure-button-primary">Check</button>
          <button @click="upgrade" class="pure-button pure-button-primary">Upgrade</button>
          <label class="pure-button pure-button-primary file-upload">
            <input type="file" accept=".tar.bz2" @change="upload">Upload
          </label>
          <p>
            <input type="checkbox" v-model="autoCheckUpgrade" @change="change_auto_check_upgrade">
            <label for="auto-check-upgrade">&nbsp; Automatically check for upgrades</label>
          </p>
          <h2>Configuration</h2>
          <button @click="backup" class="pure-button pure-button-primary">Backup</button>
          <label class="pure-button pure-button-primary file-upload">
            <input type="file" accept=".json" @change="restore">Restore
          </label>
          <message :show.sync="configRestored">
            <h3 slot="header">Success</h3>
            <p slot="body">Configuration restored.</p>
          </message>
          <button @click="confirmReset = true" class="pure-button pure-button-primary">Reset</button>
          <message :show.sync="confirmReset">
            <h3 slot="header">Reset to default configuration?</h3>
            <p slot="body">All configuration changes will be lost.</p>
            <div slot="footer">
              <button @click="confirmReset = false" class="pure-button">Cancel</button>
              <button @click="reset" class="pure-button button-success">OK</button>
            </div>
          </message>
          <message :show.sync="configReset">
            <h3 slot="header">Success</h3>
            <p slot="body">Configuration reset.</p>
          </message>
          <h2>Debugging</h2><a href="/api/log" target="_blank">
            <button class="pure-button pure-button-primary">View Log</button></a>
        </div>
      </script>
      <script id="gcode-viewer-template" type="text/x-template">
        <div class="gcode">
          <div class="clusterize">
            <div class="clusterize-scroll">
              <ul class="clusterize-content">
                <li class="clusterize-no-data placeholder">GCode displays here.</li>
              </ul>
            </div>
          </div>
        </div>
      </script>
      <script id="console-template" type="text/x-template">
        <div class="console">
          <div class="toolbar">
            <button title="Clear console." @click="clear" class="pure-button">
              <div class="fa fa-trash"></div>&nbsp;Clear
            </button>
          </div>
          <div class="console-wrapper">
            <table>
              <tr>
                <th>Level</th>
                <th>Source</th>
                <th>Location</th>
                <th>Repeat</th>
                <th>Message</th>
              </tr>
              <tr v-for="msg in messages" class="log-{{msg.level || 'info'}}">
                <td>{{msg.level  || 'info'}}</td>
                <td>{{msg.source || ''}}</td>
                <td>{{msg.where  || ''}}</td>
                <td>{{msg.repeat}}</td>
                <td class="message">{{msg.msg}}</td>
              </tr>
            </table>
          </div>
        </div>
      </script>
      <script id="templated-input-template" type="text/x-template">
        <div title="Default {{template.default}} {{template.unit || ''}}" class="pure-control-group tmpl-input-{{name}}">
          <label :for="name">{{name}}</label>
          <select v-if="template.type == 'enum' || template.values" v-model="model" :name="name" @change="change">
            <option v-for="opt in template.values" :value="opt">{{opt}}</option>
          </select>
          <input v-if="template.type == 'bool'" type="checkbox" v-model="model" :name="name" @change="change">
          <input v-if="template.type == 'float'" v-model="model" number :min="template.min" :max="template.max" :step="template.step || 'any'" type="number" :name="name" @change="change">
          <input v-if="template.type == 'int' &amp;&amp; !template.values" v-model="model" number :min="template.min" :max="template.max" type="number" :name="name" @change="change">
          <input v-if="template.type == 'string'" v-model="model" type="text" :name="name" @change="change">
          <textarea v-if="template.type == 'text'" v-model="model" :name="name" @change="change"></textarea><span v-if="template.type == 'percent'" class="range">
            <input type="range" v-model="model" :name="name" number min="0" max="100" step="1" @change="change">{{model}}</span>
          <label class="units">{{template.unit}}</label>
          <slot name="extra"></slot>
        </div>
      </script>
      <script id="io-view-template" type="text/x-template">
        <div id="io">
          <h1>I/O Configuration</h1>
          <h2>Switches</h2>
          <form class="pure-form pure-form-aligned">
            <fieldset>
              <templated-input v-for="templ in template.switches" :name="$key" :model.sync="config.switches[$key]" :template="templ"></templated-input>
            </fieldset>
          </form>
          <h2>Outputs</h2>
          <form class="pure-form pure-form-aligned">
            <fieldset>
              <templated-input v-for="templ in template.outputs" :name="$key" :model.sync="config.outputs[$key]" :template="templ"></templated-input>
            </fieldset>
          </form>
        </div>
      </script>
      <script id="tool-view-template" type="text/x-template">
        <div id="tool">
          <h1>Tool Configuration</h1>
          <form class="pure-form pure-form-aligned">
            <fieldset>
              <templated-input v-for="templ in template.tool" :name="$key" :model.sync="config.tool[$key]" :template="templ" v-if="tool_type != 'DISABLED' || $key == 'tool-type'"></templated-input>
            </fieldset>
          </form>
          <div v-if="tool_type == 'PWM SPINDLE'">
            <h2>PWM Spindle</h2>
            <form class="pure-form pure-form-aligned">
              <fieldset>
                <templated-input v-for="templ in template['pwm-spindle']" :name="$key" :model.sync="config['pwm-spindle'][$key]" :template="templ"></templated-input>
              </fieldset>
            </form>
          </div>
          <div v-if="is_modbus">
            <h2>Modbus Configuration</h2>
            <form class="pure-form pure-form-aligned">
              <fieldset>
                <templated-input v-for="templ in template['modbus-spindle']" :name="$key" :model.sync="config['modbus-spindle'][$key]" :template="templ" v-if="$key != 'regs'"></templated-input>
              </fieldset>
            </form>
          </div>
          <div v-if="tool_type == 'VFD TEST'">
            <h2>Modbus Test</h2>
            <form class="pure-form">
              <table class="modbus-regs">
                <tr>
                  <th>Address</th>
                  <th>Value</th>
                  <th>Action</th>
                  <th>Status</th>
                </tr>
                <tr>
                  <td>
                    <input name="address" type="text" v-model="address" number>
                  </td>
                  <td>
                    <input name="value" type="text" v-model="value" number>
                  </td>
                  <td>
                    <button @click="read" class="pure-button">Read</button>
                    <button @click="write" class="pure-button">Write</button>
                  </td>
                  <td class="modbus-status">{{modbus_status}}</td>
                </tr>
              </table>
            </form>
          </div>
          <div v-if="is_modbus &amp;&amp; this.tool_type != 'HUANYANG VFD'" class="modbus-program">
            <h2>Active Modbus Program</h2>
            <form class="pure-form">
              <table class="modbus-regs fixed-regs">
                <tr>
                  <th>Index</th>
                  <th>Command</th>
                  <th>Address</th>
                  <th>Value</th>
                </tr>
                <tr v-for="(index, reg) in regs_tmpl.index" v-if="state[reg + 'vt']">
                  <td class="reg-index">{{index}}</td>
                  <td class="reg-type">{{get_reg_type(reg)}}</td>
                  <td class="reg-addr">{{get_reg_addr(reg)}}</td>
                  <td class="reg-value">{{get_reg_value(reg)}}</td>
                </tr>
              </table>
            </form>
            <button @click="customize" class="pure-button-secondary">Customize</button>
            <button @click="clear" class="pure-button-secondary">Clear</button>
          </div>
          <div v-if="tool_type == 'CUSTOM MODBUS VFD'">
            <h2>Edit Modbus Program</h2>
            <form class="pure-form">
              <table class="modbus-regs">
                <tr>
                  <th>Index</th>
                  <th>Command</th>
                  <th>Address</th>
                  <th>Value</th>
                </tr>
                <tr v-for="(index, reg) in config['modbus-spindle'].regs" is="modbus-reg" :index="index" :model.sync="reg" :template="template['modbus-spindle'].regs.template" v-if="!index || reg['reg-type'] != 'disabled' || config['modbus-spindle'].regs[index - 1]['reg-type'] != 'disabled'"></tr>
              </table>
            </form>
          </div>
        </div>
      </script>
      <script id="help-view-template" type="text/x-template">
        <div id="help">
          <h2>User Manual</h2>
          <p>
            You can find a detailed user manual at <a
            href="http://docs.buildbotics.com" target="_blank"
            >docs.buildbotics.com</a>.
          </p>
          <h2>Discussion Forum</h2>
          <p>
            If you're having trouble or just want to chat with other Buildbotics
            CNC controller owners, head over to the Buildbotics forum at
            <a href="http://forum.buildbotics.com" target="_blank"
            >forum.buildbotics.com</a>.  Register on the site and post a message.
            We'll be happy to help.
          </p>
          <h2>CAD/CAM Software</h2>
          <p>
            <a href="http://wikipedia.com/wiki/Computer-aided_manufacturing"
            target="_blank">CAM</a> software can be used to create GCode
            automatically from
            <a href="http://wikipedia.com/wiki/Computer-aided_design"
            target="_blank">CAD</a> models.  Here are a few CAD/CAM resources:
          </p>
          <ul>
            <li><a href="http://camotics.org/" target="_blank">CAMotics - Open-Source CNC Simulator</a></li>
            <li><a href="http://librecad.org/" target="_blank">LibreCAD - Open-Source 2D CAD</a></li>
            <li><a href="https://www.freecadweb.org/" target="_blank">FreeCAD - Open-Source 3D CAD</a></li>
            <li><a href="http://www.openscad.org/" target="_blank">OpenSCAD - Open-Source 3D CAD for programmers</a></li>
            <li><a href="http://wiki.linuxcnc.org/cgi-bin/wiki.pl?Cam" target="_blank">LinuxCNC CAM resources</a></li>
          </ul>
        </div>
      </script>
      <script id="indicators-template" type="text/x-template">
        <div class="indicators">
          <table class="inputs">
            <tr>
              <th colspan="7" class="header">Inputs</th>
            </tr>
            <tr>
              <th></th>
              <th>Pin</th>
              <th>Name</th>
              <th class="separator"></th>
              <th></th>
              <th>Pin</th>
              <th>Name</th>
            </tr>
            <tr>
              <td>
                <div :class="get_class('0lw')" class="fa"></div>
              </td>
              <th>{{get_min_pin(0)}}</th>
              <th>Motor 0 Min</th>
              <th class="separator"></th>
              <td>
                <div :class="get_class('0xw')" class="fa"></div>
              </td>
              <th>{{get_max_pin(0)}}</th>
              <th>Motor 0 Max</th>
            </tr>
            <tr>
              <td>
                <div :class="get_class('1lw')" class="fa"></div>
              </td>
              <th>{{get_min_pin(1)}}</th>
              <th>Motor 1 Min</th>
              <th class="separator"></th>
              <td>
                <div :class="get_class('1xw')" class="fa"></div>
              </td>
              <th>{{get_max_pin(1)}}</th>
              <th>Motor 1 Max</th>
            </tr>
            <tr>
              <td>
                <div :class="get_class('2lw')" class="fa"></div>
              </td>
              <th>{{get_min_pin(2)}}</th>
              <th>Motor 2 Min</th>
              <th class="separator"></th>
              <td>
                <div :class="get_class('2xw')" class="fa"></div>
              </td>
              <th>{{get_max_pin(2)}}</th>
              <th>Motor 2 Max</th>
            </tr>
            <tr>
              <td>
                <div :class="get_class('3lw')" class="fa"></div>
              </td>
              <th>{{get_min_pin(3)}}</th>
              <th>Motor 3 Min</th>
              <th class="separator"></th>
              <td>
                <div :class="get_class('3xw')" class="fa"></div>
              </td>
              <th>{{get_max_pin(3)}}</th>
              <th>Motor 3 Max</th>
            </tr>
            <tr>
              <td>
                <div :class="get_class('ew')" class="fa"></div>
              </td>
              <th>23</th>
              <th>EStop</th>
              <th class="separator"></th>
              <td>
                <div :class="get_class('pw')" class="fa"></div>
              </td>
              <th>22</th>
              <th>Probe</th>
            </tr>
          </table>
          <table class="outputs">
            <tr>
              <th colspan="7" class="header">Outputs</th>
            </tr>
            <tr>
              <th></th>
              <th>Pin</th>
              <th>Name</th>
              <th class="separator"></th>
              <th></th>
              <th>Pin</th>
              <th>Name</th>
            </tr>
            <tr>
              <td>
                <div :class="get_class('eos')" class="fa"></div>
              </td>
              <th>15</th>
              <th>Tool Enable</th>
              <th class="separator"></th>
              <td>
                <div :class="get_class('1os')" class="fa"></div>
              </td>
              <th>2</th>
              <th>Load 1</th>
            </tr>
            <tr>
              <td>
                <div :class="get_class('dos')" class="fa"></div>
              </td>
              <th>16</th>
              <th>Tool Direction</th>
              <th class="separator"></th>
              <td>
                <div :class="get_class('2os')" class="fa"></div>
              </td>
              <th>1</th>
              <th>Load 2</th>
            </tr>
            <tr>
              <td>{{state['pd'] | percent 0}}</td>
              <th>17</th>
              <th>Tool PWM</th>
              <th class="separator"></th>
              <td>
                <div :class="get_class('fos')" class="fa"></div>
              </td>
              <th>21</th>
              <th>Fault</th>
            </tr>
          </table>
          <table class="pwr_fault">
            <tr>
              <th colspan="5" class="header">Power Faults</th>
            </tr>
            <tr>
              <th>Under voltage</th>
              <td>{{state['under_voltage'] ? 'True' : 'False'}}</td>
              <th class="separator"></th>
              <th>Over voltage</th>
              <td>{{state['over_voltage'] ? 'True' : 'False'}}</td>
            </tr>
            <tr>
              <th>Over current</th>
              <td>{{state['over_current'] ? 'True' : 'False'}}</td>
              <th class="separator"></th>
              <th>Sense error</th>
              <td>{{state['sense_error'] ? 'True' : 'False'}}</td>
            </tr>
            <tr>
              <th>Shunt overload</th>
              <td>{{state['shunt_overload'] ? 'True' : 'False'}}</td>
              <th class="separator"></th>
              <th>Motor overload</th>
              <td>{{state['motor_overload'] ? 'True' : 'False'}}</td>
            </tr>
            <tr>
              <th>Load 1 shutdown</th>
              <td>{{state['load1_shutdown'] ? 'True' : 'False'}}</td>
              <th class="separator"></th>
              <th>Load 2 shutdown</th>
              <td>{{state['load2_shutdown'] ? 'True' : 'False'}}</td>
            </tr>
          </table>
          <table class="measurements">
            <tr>
              <th colspan="5" class="header">Measurements</th>
            </tr>
            <tr>
              <td>{{state['vin'] | fixed 1}} V</td>
              <th>Input</th>
              <th class="separator"></th>
              <td>{{state['vout'] | fixed 1}} V</td>
              <th>Output</th>
            </tr>
            <tr>
              <td>{{state['motor'] | fixed 2}} A</td>
              <th>Motor</th>
              <th class="separator"></th>
              <td>{{state['temp'] | fixed 0}} ℃</td>
              <th>Temp</th>
            </tr>
            <tr>
              <td>{{state['load1'] | fixed 2}} A</td>
              <th>Load 1</th>
              <th class="separator"></th>
              <td>{{state['load2'] | fixed 2}} A</td>
              <th>Load 2</th>
            </tr>
            <tr>
              <td>{{state['1ai'] | percent 0}} A</td>
              <th>Analog 1</th>
              <th class="separator"></th>
              <td>{{state['2ai'] | percent 0}} A</td>
              <th>Analog 2</th>
            </tr>
          </table>
          <table class="modbus">
            <tr>
              <th colspan="5" class="header">Modbus VFD</th>
            </tr>
            <tr>
              <th colspan="5">{{modbus_status}}</th>
            </tr>
            <tr>
              <td>{{state['hz']}} Hz</td>
              <th>Frequency</th>
              <th class="separator"></th>
              <td>{{state['hc']}} A</td>
              <th>Current</th>
            </tr>
            <tr>
              <td>{{state['s']}} RPM</td>
              <th>Speed</th>
              <th class="separator"></th>
              <td></td>
              <th></th>
            </tr>
          </table>
          <table class="legend">
            <tr>
              <th colspan="10" class="header">Legend</th>
            </tr>
            <tr>
              <td>
                <div class="fa fa-circle logic-hi"></div>
              </td>
              <th>Logic Hi</th>
              <td>
                <div class="fa fa-circle logic-lo"></div>
              </td>
              <th>Logic Lo</th>
              <td>
                <div class="fa fa-circle-o logic-tri"></div>
              </td>
              <th>Tristated / Disabled</th>
            </tr>
          </table>
          <h2>DB25 breakout box</h2><img width="700" src="/images/DB25_breakout_box.png">
          <h2>DB25-M2 breakout</h2><img width="400" src="/images/DB25-M2_breakout.png">
        </div>
      </script>
      <script id="estop-template" type="text/x-template">
        <svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="130" height="130">
          <defs>
            <path id="text-path-1" style="fill:none;stroke:none" d="m 73.735867,673.1299 c 0,55.10749 44.673453,99.78094 99.780973,99.78094 55.10748,0 99.78093,-44.67345 99.78093,-99.78094 0,-55.10749 -44.67345,-99.78094 -99.78093,-99.78094 -55.10752,0 -99.780973,44.67345 -99.780973,99.78094 z"></path>
            <path id="text-path-2" style="fill:none;stroke:none" d="m 258.7149,673.1299 c 0,47.0536 -38.14448,85.19809 -85.19809,85.19809 -47.0536,0 -85.198083,-38.14449 -85.198083,-85.19809 0,-47.05361 38.144483,-85.19809 85.198083,-85.19809 47.05361,0 85.19809,38.14448 85.19809,85.19809 z"></path>
            <filter id="filter5134" style="color-interpolation-filters:sRGB">
              <feflood flood-opacity="0.431373" flood-color="rgb(0,0,0)"></feflood>
              <fecomposite in2="SourceGraphic" operator="in"></fecomposite>
              <fegaussianblur stddeviation="4" result="blur"></fegaussianblur>
              <feoffset dx="4" dy="4" result="offset"></feoffset>
              <fecomposite in="SourceGraphic" in2="offset" operator="over" result="fbSourceGraphic"></fecomposite>
              <fecolormatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"></fecolormatrix>
              <feflood flood-opacity="0.431373" flood-color="rgb(0,0,0)" in="fbSourceGraphic"></feflood>
              <fecomposite in2="fbSourceGraphic" operator="out"></fecomposite>
              <fegaussianblur stddeviation="4" result="blur"></fegaussianblur>
              <feoffset dx="-4" dy="-4" result="offset"></feoffset>
              <fecomposite in2="fbSourceGraphic" in="offset" operator="atop" result="fbSourceGraphic"></fecomposite>
              <fecolormatrix result="fbSourceGraphicAlpha" in="fbSourceGraphic" values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"></fecolormatrix>
              <feflood flood-opacity="0.431373" flood-color="rgb(0,0,0)" in="fbSourceGraphic"></feflood>
              <fecomposite in2="fbSourceGraphic" operator="in"></fecomposite>
              <fegaussianblur stddeviation="4" result="blur"></fegaussianblur>
              <feoffset dx="4" dy="4" result="offset"></feoffset>
              <fecomposite in2="offset" in="fbSourceGraphic" operator="over"></fecomposite>
            </filter>
            <filter id="filter5158" style="color-interpolation-filters:sRGB">
              <feflood flood-opacity="0.431373" flood-color="rgb(0,0,0)"></feflood>
              <fecomposite in2="SourceGraphic" operator="out"></fecomposite>
              <fegaussianblur stddeviation="7" result="blur"></fegaussianblur>
              <feoffset dx="4" dy="4"></feoffset>
              <fecomposite in2="SourceGraphic" operator="atop"></fecomposite>
            </filter>
            <filter id="filter5266" style="color-interpolation-filters:sRGB">
              <feflood flood-opacity="0.372549" flood-color="rgb(0,0,0)"></feflood>
              <fecomposite in2="SourceGraphic" operator="in"></fecomposite>
              <fegaussianblur stddeviation="2" result="blur"></fegaussianblur>
              <feoffset dx="1" dy="1" result="offset"></feoffset>
              <fecomposite in="SourceGraphic" in2="offset" operator="over"></fecomposite>
            </filter>
            <filter id="filter5278" style="color-interpolation-filters:sRGB">
              <feflood flood-opacity="0.372549" flood-color="rgb(0,0,0)"></feflood>
              <fecomposite in2="SourceGraphic" operator="out"></fecomposite>
              <fegaussianblur stddeviation="2" result="blur"></fegaussianblur>
              <feoffset dx="2" dy="2" result="offset"></feoffset>
              <fecomposite in="offset" in2="SourceGraphic" operator="atop"></fecomposite>
            </filter>
          </defs>
          <g transform="scale(0.6, 0.6),translate(-65, -526)">
            <!-- Yellow ring-->
            <circle style="fill:#f5e138;filter:url(#filter5266)" cx="173" cy="633" r="100" class="ring"></circle>
            <!-- Text-->
            <text style="font-weight:bold;font-size:20px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none" transform="matrix(-0.73361478,-0.67956556,0.67956556,-0.73361478,-156.72624,1250.7027)" x="-1350.5394" y="-1579.3965">
              <textpath xlink:href="#text-path-2">EMERGENCY</textpath>
            </text>
            <text style="font-weight:bold;font-size:20px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none" transform="matrix(0.27634044,-0.96105981,0.96105981,0.27634044,-523.81801,609.02637)" x="-754.20117" y="157.03941">
              <textpath xlink:href="#text-path-1">STOP</textpath>
            </text>
            <g class="button">
              <circle style="fill:#b72424;filter:url(#filter5134)" cx="173" cy="633" r="74"></circle>
              <!-- Inner circle-->
              <circle style="fill:#b72424;filter:url(#filter5158)" cx="173" cy="633" r="37"></circle>
              <!-- Arrows-->
              <g transform="matrix(0.32737901,0,0,0.32737901,50.806169,478.96619)" style="stroke:#fff;stroke-width:26;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;filter:url(#filter5278);fill:none">
                <g>
                  <path transform="matrix(1.9461546,0,0,1.9461546,-359.98722,-383.37383)" style="stroke-width:13" d="m 411.6967,521.14701 c -10.57464,4.47269 -22.20085,6.94599 -34.40474,6.94599 -12.20389,0 -23.8301,-2.4733 -34.40474,-6.94599 -10.57463,-4.4727 -20.09769,-10.94478 -28.09526,-18.94236 -7.99757,-7.99757 -12.91355,-13.50409 -17.38625,-24.07872"></path>
                  <path d="m 221.80189,582.65761 -2.99162,-35.52447 28.48213,14.16667 z"></path>
                </g>
                <g transform="matrix(-0.5,-0.8660254,0.8660254,-0.5,149.81163,1033.4478)">
                  <path transform="matrix(1.9461546,0,0,1.9461546,-359.98722,-383.37383)" style="stroke-width:13" d="m 411.6967,521.14701 c -10.57464,4.47269 -22.20085,6.94599 -34.40474,6.94599 -12.20389,0 -23.8301,-2.4733 -34.40474,-6.94599 -10.57463,-4.4727 -20.09769,-10.94478 -28.09526,-18.94236 -7.99757,-7.99757 -11.52544,-14.20559 -17.38625,-24.07872"></path>
                  <path d="m 221.80189,582.65761 -2.99162,-35.52447 28.48213,14.16667 z"></path>
                </g>
                <g transform="matrix(-0.5,0.8660254,-0.8660254,-0.5,971.43059,383.18517)">
                  <path transform="matrix(1.9461546,0,0,1.9461546,-359.98722,-383.37383)" style="stroke-width:13" d="m 411.6967,521.14701 c -10.57464,4.47269 -22.20085,6.94599 -34.40474,6.94599 -12.20389,0 -23.8301,-2.4733 -34.40474,-6.94599 -10.57463,-4.4727 -20.09769,-10.94478 -28.09526,-18.94236 -7.99757,-7.99757 -9.56206,-8.6246 -14.03476,-19.19923"></path>
                  <path d="m 221.80189,582.65761 -2.99162,-35.52447 28.48213,14.16667 z"></path>
                </g>
              </g>
            </g>
          </g>
        </svg>
      </script>
      <script id="modbus-reg-view-template" type="text/x-template">
        <tr class="modbus-reg">
          <td class="reg-index">{{index}}</td>
          <td class="reg-type">
            <select v-model="model['reg-type']" @change="change">
              <option v-for="opt in template['reg-type']['values']" :value="opt">{{opt}}</option>
            </select>
          </td>
          <td class="reg-addr">
            <input v-model="model['reg-addr']" @change="change" type="text" :min="template['reg-addr'].min" :max="template['reg-addr'].max" pattern="[0-9]*" :disabled="model['reg-type'] == 'disabled'" number>
          </td>
          <td class="reg-value">
            <input v-model="model['reg-value']" @change="change" type="text" :min="template['reg-value'].min" :max="template['reg-value'].max" pattern="[0-9]*" :disabled="!has_user_value" number>
          </td>
        </tr>
      </script>
    </div>
    <iframe id="download-target" style="display:none"></iframe>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/sockjs.min.js"></script>
    <script src="js/clusterize.min.js"></script>
    <script src="/js/assets-644a1c8b41d60dcf252a485f89d34bf516dcfad8ef31e5a54b46ca6a07d62218.js"></script>
    <script src="js/ui.js"></script>
  </body>
</html>