Widget / XYZ Axes

This widget shows your XYZ position. It can also show your A position. You have jog controls and axis zeroing and homing.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://www.chilipeppr.com/js/require.js"></script>
<div id="com-chilipeppr-widget-xyz" class="panel panel-default">
    <div id="com-chilipeppr-widgetholder-wcs" style="position: absolute;left:-80px;top:10px;"></div>
    <div class="panel-heading">
       
            
  
    <div id="com-chilipeppr-widget-xyz-ftr" tabindex="1" class="panel-footer" style="padding:2px;padding-bottom:0px;">
        <div class="com-chilipeppr-widget-xyz-buttonarray hiddenx" style="border:0px solid green;">
            <table style="border:0px solid red;">
                <tr valign="top">
                   
                    
                            
                         
                    <td class="col xcol-xs-2" style="border:0px yellow solid;">
                        <button class="btn btn-default jogxneg dbltall">X
                            <br/><span class="glyphicon glyphicon-circle-arrow-left"></span>

                        </button>
                    </td>
                    <td>
                        <div class="btn-group-vertical" style="margin-right:-0px;">
                            <button class="btn btn-default jogy">Y <span class="glyphicon glyphicon-circle-arrow-up"></span>
                            </button>
                            <button class="btn btn-default jogyneg ">Y <span class="glyphicon glyphicon-circle-arrow-down"></span>
                            </button>
                        </div>
                    </td>
                    <td>
                        <button class="btn btn-default jogx dbltall">X
                            <br/><span class="glyphicon glyphicon-circle-arrow-right"></span> 
                        </button>
                    </td>
                    <td>
                        <div class="btn-group-vertical">
                            <button class="btn btn-default jogz ">Z <span...

CSS

.xyz-active {
    color: black;
}
.flatbottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0px solid red;
}
.flattop {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.flatleft {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.flatright {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
.btn-nobg {
    background:none;
    border:none;
}
.btn-nobg:hover {
    background:none;
    border:none;
}
#com-chilipeppr-widget-xyz .btnIconWarning {
    color: #f0ad4e;
}
#com-chilipeppr-widget-xyz .dbltall {
    height:68px;
}
#com-chilipeppr-widget-xyz .moveby {
    position:absolute;
    top:0;
    left:0;
    border:0px red solid;
}
#com-chilipeppr-widget-xyz .jogincrements-small {
    display:none;
}
/* View Small Mode */
 #com-chilipeppr-widget-xyz.size-small .com-chilipeppr-xyz-label, #com-chilipeppr-widget-xyz.size-small .com-chilipeppr-xyz-pos {
    font-size:16px;
}
#com-chilipeppr-widget-xyz.size-small #com-chilipeppr-widget-xyz-ftr, #com-chilipeppr-widget-xyz.size-small #com-chilipeppr-widget-xyz-ftr .btn {
    font-size:9px;
}
#com-chilipeppr-widget-xyz.size-small .dbltall {
    height:51px;
}
#com-chilipeppr-widget-xyz.size-small .jogincrements-normal {
    display:none;
}
#com-chilipeppr-widget-xyz.size-small .jogincrements-small {
    display:initial;
}
#com-chilipeppr-widget-xyz.size-small .moveby {
    left:8px;
}
#com-chilipeppr-widget-xyz .touchpad-overlay {
    padding:0;
    margin:0;
    /* position:absolute; */
    top: 1px;
    left: 1px;
    bottom: 1px;
    height: 200px;
    right: 1px;
    background-color: #f5f5f5;
    border: 2px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    /* z-index:2; */
    display: flex;
    align-items: center;
    justify-content: center;
}
#com-chilipeppr-widget-xyz .btnShowTouchJog {
    font-size:10px;
   ...