<!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 rel="stylesheet" href="/css/style-65bac558bc179957a82c8c78f8b5e5c3cebad0c8682e4dd5d9fc57aa5022ed37.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 style="display:none" class="pure-menu-heading"><a href="#gcode" class="pure-menu-link">Gcode</a></li>
            <li class="pure-menu-heading"><a href="#admin" class="pure-menu-link">Admin</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</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>
    <div id="templates">
      <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)" @click="jog(0, 100)" title="Jog +100 {{axes[0]}}" class="button"></use>
              <use xlink:href="#pie-1" v-if="enabled[0]" transform="translate(115 121) rotate(135)" @click="jog(0, -100)" title="Jog -100 {{axes[0]}}" class="button"></use>
              <g @click="jog(1, 100)" title="Jog +100 {{axes[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(20 125 125)">100</text>
                <text x="125" y="24" transform="rotate(-20 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)" @click="jog(1, -100)" title="Jog -100 {{axes[1]}}" class="button"></use>
            </g>
            <!-- 10 ring-->
            <g fill="#c5c5c5" filter="url(#shadow)" class="ring">
              <use xlink:href="#pie-2" v-if="enabled[0]" transform="translate(134 121) rotate(-45)" @click="jog(0, 10)" title="Jog +10 {{axes[0]}}" class="button"></use>
              <use xlink:href="#pie-2" v-if="enabled[0]" transform="translate(115 121) rotate(135)" @click="jog(0, -10)" title="Jog -10 {{axes[0]}}" class="button"></use>
              <g @click="jog(1, 10)" title="Jog +10 {{axes[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="50">10</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)" @click="jog(1, -10)" title="Jog -10 {{axes[1]}}" class="button"></use>
            </g>
            <!-- 1 ring-->
            <g fill="#e2e2e2" filter="url(#shadow)" class="ring">
              <use xlink:href="#pie-3" v-if="enabled[0]" transform="translate(134 121) rotate(-45)" @click="jog(0, 1)" title="Jog +1 {{axes[0]}}" class="button"></use>
              <use xlink:href="#pie-3" v-if="enabled[0]" transform="translate(115 121) rotate(135)" @click="jog(0, -1)" title="Jog -1 {{axes[0]}}" class="button"></use>
              <g @click="jog(1, 1)" title="Jog +1 {{axes[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="75">1</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)" @click="jog(1, -1)" title="Jog -1 {{axes[1]}}" class="button"></use>
            </g>
            <!-- 0.1 ring-->
            <g fill="#f7f7f7" filter="url(#shadow)" class="ring">
              <use xlink:href="#pie-4" v-if="enabled[0]" transform="translate(134 121) rotate(-45)" @click="jog(0, 0.1)" title="Jog +0.1 {{axes[0]}}" class="button"></use>
              <use xlink:href="#pie-4" v-if="enabled[0]" transform="translate(115 121) rotate(135)" @click="jog(0, -0.1)" title="Jog -0.1 {{axes[0]}}" class="button"></use>
              <g @click="jog(1, 0.1)" title="Jog +0.1 {{axes[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">0.1</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)" @click="jog(1, -0.1)" title="Jog -0.1 {{axes[1]}}" class="button"></use>
            </g>
            <!-- +A-->
            <g @click="jog(0, 100)" title="Jog +100 {{axes[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 @click="jog(0, -100)" title="Jog -100 {{axes[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 @click="jog(1, 100)" title="Jog +100 {{axes[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 @click="jog(1, -100)" title="Jog -100 {{axes[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="control-view-template" type="text/x-template">
        <div id="control">
          <table class="axes">
            <tr>
              <th class="name">Axis</th>
              <th class="position">Position</th>
              <th class="absolute">Absolute</th>
              <th class="offset">Offset</th>
              <th class="actions">Actions</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="state.x != 'READY'" title="Set {{'x' | upper}} axis position." @click="show_set_position('x')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="state.x != 'READY'" title="Zero {{'x' | upper}} axis offset." @click="zero_axis('x')" class="pure-button">&empty;</button>
                <button :disabled="state.x != '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="state.x != 'READY'" title="Set {{'y' | upper}} axis position." @click="show_set_position('y')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="state.x != 'READY'" title="Zero {{'y' | upper}} axis offset." @click="zero_axis('y')" class="pure-button">&empty;</button>
                <button :disabled="state.x != '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="state.x != 'READY'" title="Set {{'z' | upper}} axis position." @click="show_set_position('z')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="state.x != 'READY'" title="Zero {{'z' | upper}} axis offset." @click="zero_axis('z')" class="pure-button">&empty;</button>
                <button :disabled="state.x != '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="state.x != 'READY'" title="Set {{'a' | upper}} axis position." @click="show_set_position('a')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="state.x != 'READY'" title="Zero {{'a' | upper}} axis offset." @click="zero_axis('a')" class="pure-button">&empty;</button>
                <button :disabled="state.x != '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="state.x != 'READY'" title="Set {{'b' | upper}} axis position." @click="show_set_position('b')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="state.x != 'READY'" title="Zero {{'b' | upper}} axis offset." @click="zero_axis('b')" class="pure-button">&empty;</button>
                <button :disabled="state.x != '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="state.x != 'READY'" title="Set {{'c' | upper}} axis position." @click="show_set_position('c')" class="pure-button">
                  <div class="fa fa-cog"></div>
                </button>
                <button :disabled="state.x != 'READY'" title="Zero {{'c' | upper}} axis offset." @click="zero_axis('c')" class="pure-button">&empty;</button>
                <button :disabled="state.x != '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()}">{{get_state()}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Message</th>
              <td :class="{attention: highlight_reason()}" class="reason">{{get_reason()}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Feed</th>
              <td>{{state.f || 0 | fixed 0}}</td>
              <td>mm/min</td>
            </tr>
            <tr>
              <th>Speed</th>
              <td>{{state.s || 0 | fixed 0}}</td>
              <td>RPM</td>
            </tr>
            <tr>
              <th>Direction</th>
              <td>{{state.ss || 'Off'}}</td>
              <td></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.ln ? state.ln : '-'}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Tool</th>
              <td>{{state.t || 0}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Mist</th>
              <td>{{state.mist || 'Off'}}</td>
              <td></td>
            </tr>
            <tr>
              <th>Coolant</th>
              <td>{{state.coolant || '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="toolbar">
            <button title="Home the machine." @click="home()" :disabled="state.x != 'READY'" class="pure-button">
              <div class="fa fa-home"></div>
            </button>
            <button title="{{state.x == 'RUNNING' ? 'Pause' : 'Start'}} program." @click="start_pause" :disabled="!file" class="pure-button">
              <div :class="state.x == 'RUNNING' ? 'fa-pause' : 'fa-play'" class="fa"></div>
            </button>
            <button title="Stop program." @click="stop" :disabled="state.x == 'READY'" class="pure-button">
              <div class="fa fa-stop"></div>
            </button>
            <button title="Pause program at next optional stop (M1)." @click="optional_pause" class="pure-button">
              <div class="fa fa-stop-circle-o"></div>
            </button>
            <button title="Execute one program step." @click="step" :disabled="(state.x != 'READY' &amp;&amp; state.x != 'HOLDING') || !file" class="pure-button">
              <div class="fa fa-step-forward"></div>
            </button>
          </div>
          <div class="tabs">
            <input id="tab1" type="radio" name="tabs" checked>
            <label for="tab1">Auto</label>
            <input id="tab2" type="radio" name="tabs">
            <label for="tab2">MDI</label>
            <input id="tab3" type="radio" name="tabs">
            <label for="tab3">Jog</label>
            <input id="tab4" type="radio" name="tabs">
            <label for="tab4">Console</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="Upload a new GCode program." @click="open" :disabled="state.x == 'RUNNING' || state.x == '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="!file" 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="file" @change="load" :disabled="state.x == 'RUNNING' || state.x == 'STOPPING'">
                  <option v-for="file in files" :value="file">{{file}}</option>
                </select>
              </div>
              <div :class="{placeholder: !gcode}" class="gcode"><span v-if="!gcode.length">GCode displays here.</span>
                <ul>
                  <li v-for="item in gcode" id="gcode-line-{{$index}}" track-by="$index"><span>{{$index + 1}}</span>{{item}}</li>
                </ul>
              </div>
            </section>
            <section id="content2" class="tab-content">
              <div class="mdi pure-form">
                <fieldset>
                  <button title="Manually execute instructions." @click="submit_mdi" class="pure-button pure-button-primary">MDI</button>
                  <input v-model="mdi" @keyup.enter="submit_mdi">
                </fieldset>
              </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>
            </section>
            <section id="content4" class="tab-content">
              <div class="toolbar">
                <button title="Clear console." @click="clear_console" class="pure-button">
                  <div class="fa fa-trash"></div>
                </button>
              </div>
              <table class="console">
                <tr>
                  <th>Level</th>
                  <th>Location</th>
                  <th>Code</th>
                  <th>Repeat</th>
                  <th>Message</th>
                </tr>
                <tr v-for="msg in console" :class="msg.level || 'info'">
                  <td>{{msg.level || 'info'}}</td>
                  <td>{{msg.where || ''}}</td>
                  <td>{{msg.code  || '0'}}</td>
                  <td>{{msg.repeat}}</td>
                  <td>{{msg.msg}}</td>
                </tr>
              </table>
            </section>
            <section id="content5" class="tab-content">
              <component is="indicators" :state="state"></component>
            </section>
            <section id="content6" class="tab-content">
              <div class="video"><img :src="video_url" class="mjpeg"></div>
            </section>
          </div>
        </div>
      </script>
      <script id="motor-view-template" type="text/x-template">
        <div id="motor">
          <h1>Motor {{index}} Configuration</h1>
          <form class="pure-form pure-form-aligned">
            <fieldset v-for="category in template.motors" :class="$key">
              <h2>{{$key}}</h2>
              <templated-input v-for="templ in category" :name="$key" :model.sync="motor[$key]" :template="templ"></templated-input>
            </fieldset>
          </form>
        </div>
      </script>
      <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="gcode[$key]" :template="templ"></templated-input>
            </fieldset>
          </form>
        </div>
      </script>
      <script id="admin-view-template" type="text/x-template">
        <div id="admin">
          <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>
          <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>
          <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>Firmware</h2>
          <button @click="check" class="pure-button pure-button-primary">Check</button>
          <button @click="upgrade" class="pure-button pure-button-primary">Upgrade</button>
          <p></p>
          <table class="pure-table">
            <tr>
              <th>Current version</th>
              <td>{{config.version}}</td>
            </tr>
            <tr v-if="latest">
              <th>Latest version</th>
              <td>{{latest}}</td>
            </tr>
          </table>
          <message :show.sync="firmwareUpgrading">
            <h3 slot="header">Firmware upgrading</h3>
            <p slot="body">Please wait. . .</p>
          </message>
          <message :show.sync="hostnameSet">
            <h3 slot="header">Hostname Set</h3>
            <p slot="body">
              Hostname was successfuly set to {{hostname}}.
              Poweroff and restart the controller for this change to take effect.
            </p>
          </message>
          <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>
        </div>
      </script>
      <script id="templated-input-template" type="text/x-template">
        <div :class="name" class="pure-control-group">
          <label :for="name">{{name}}</label>
          <select v-if="template.type == 'enum' || template.values" v-model="model" :id="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" :id="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" :id="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" :id="name" @change="change">
          <input v-if="template.type == 'string'" v-model="model" type="text" :id="name" @change="change">
          <textarea v-if="template.type == 'text'" v-model="model" :id="name" @change="change"></textarea><span v-if="template.type == 'percent'" class="range">
            <input type="range" v-model="model" :id="name" number min="0" max="100" step="1" @change="change">{{model}}</span>
          <label class="units">{{template.unit}}</label>
        </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="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="outputs[$key]" :template="templ"></templated-input>
            </fieldset>
          </form>
        </div>
      </script>
      <script id="tool-view-template" type="text/x-template">
        <div id="tool">
          <h1>Spindle Configuration</h1>
          <form class="pure-form pure-form-aligned">
            <fieldset>
              <templated-input v-for="templ in template.tool" :name="$key" :model.sync="tool[$key]" :template="templ"></templated-input>
            </fieldset>
          </form>
        </div>
      </script>
      <script id="indicators-template" type="text/x-template">
        <div class="indicators">
          <table class="inputs">
            <tr>
              <th colspan="6">Switch Inputs</th>
            </tr>
            <tr>
              <th></th>
              <th>Pin</th>
              <th>Name</th>
              <th></th>
              <th>Pin</th>
              <th>Name</th>
            </tr>
            <tr v-if="is_motor_enabled(0)">
              <td>
                <div :class="get_class('0lw')" class="fa"></div>
              </td>
              <th>{{get_min_pin(0)}}</th>
              <th>0 Min</th>
              <td>
                <div :class="get_class('0xw')" class="fa"></div>
              </td>
              <th>{{get_max_pin(0)}}</th>
              <th>0 Max</th>
            </tr>
            <tr v-if="is_motor_enabled(1)">
              <td>
                <div :class="get_class('1lw')" class="fa"></div>
              </td>
              <th>{{get_min_pin(1)}}</th>
              <th>1 Min</th>
              <td>
                <div :class="get_class('1xw')" class="fa"></div>
              </td>
              <th>{{get_max_pin(1)}}</th>
              <th>1 Max</th>
            </tr>
            <tr v-if="is_motor_enabled(2)">
              <td>
                <div :class="get_class('2lw')" class="fa"></div>
              </td>
              <th>{{get_min_pin(2)}}</th>
              <th>2 Min</th>
              <td>
                <div :class="get_class('2xw')" class="fa"></div>
              </td>
              <th>{{get_max_pin(2)}}</th>
              <th>2 Max</th>
            </tr>
            <tr v-if="is_motor_enabled(3)">
              <td>
                <div :class="get_class('3lw')" class="fa"></div>
              </td>
              <th>{{get_min_pin(3)}}</th>
              <th>3 Min</th>
              <td>
                <div :class="get_class('3xw')" class="fa"></div>
              </td>
              <th>{{get_max_pin(3)}}</th>
              <th>3 Max</th>
            </tr>
            <tr v-if="is_motor_enabled(4)">
              <td>
                <div :class="get_class('4lw')" class="fa"></div>
              </td>
              <th>{{get_min_pin(4)}}</th>
              <th>4 Min</th>
              <td>
                <div :class="get_class('4xw')" class="fa"></div>
              </td>
              <th>{{get_max_pin(4)}}</th>
              <th>4 Max</th>
            </tr>
            <tr>
              <td>
                <div :class="get_class('ew')" class="fa"></div>
              </td>
              <th>23</th>
              <th>EStop</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="6">Outputs</th>
            </tr>
            <tr>
              <th></th>
              <th>Pin</th>
              <th>Name</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>
              <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>
              <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>
              <td>
                <div :class="get_class('fos')" class="fa"></div>
              </td>
              <th>21</th>
              <th>Fault</th>
            </tr>
          </table>
          <table class="measurements">
            <tr>
              <th colspan="4">Measurements</th>
            </tr>
            <tr>
              <td>{{state['vin'] | fixed 1}} V</td>
              <th>Input</th>
              <td>{{state['vout'] | fixed 1}} V</td>
              <th>Output</th>
            </tr>
            <tr>
              <td>{{state['motor'] | fixed 2}} A</td>
              <th>Motor</th>
              <td>{{state['temp'] | fixed 0}} ℃</td>
              <th>Temp</th>
            </tr>
            <tr>
              <td>{{state['load1'] | fixed 2}} A</td>
              <th>Load 1</th>
              <td>{{state['load2'] | fixed 2}} A</td>
              <th>Load 2</th>
            </tr>
          </table>
          <table class="rs485">
            <tr>
              <th colspan="4">RS485 Spindle</th>
            </tr>
            <tr>
              <th colspan="4">{{state['he'] ? "" : "Not "}}Connected</th>
            </tr>
            <tr>
              <td>{{state['hz']}} Hz</td>
              <th>Frequency</th>
              <td>{{state['hc']}} A</td>
              <th>Current</th>
            </tr>
            <tr>
              <td>{{state['hr']}} RPM</td>
              <th>Speed</th>
              <td>{{state['ht']}} ℃</td>
              <th>Temp</th>
            </tr>
          </table>
          <table class="legend">
            <tr>
              <th colspan="10">Legend</th>
            </tr>
            <tr>
              <td>
                <div class="fa fa-circle logic-hi"></div>
              </td>
              <th>Logic Hi</th>
            </tr>
            <tr>
              <td>
                <div class="fa fa-circle logic-lo"></div>
              </td>
              <th>Logic Lo</th>
            </tr>
            <tr>
              <td>
                <div class="fa fa-circle-o logic-tri"></div>
              </td>
              <th>Tristated / Disabled</th>
            </tr>
          </table>
          <h2>DB25-M2 breakout</h2>
          <center><img width="400" src="/images/DB25-M2_breakout.png"></center>
        </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>
    </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/assets-56a8b47adba51b84ce245495f734d1ac477f5568140686253d2975d2398b8970.js"></script>
    <script src="js/ui.js"></script>
  </body>
</html>