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.

by chilipeppr

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 class="panel-heading">
        <div class="btn-toolbar pull-right" role="toolbar" data-style="position:absolute;right:0px;top:0px;padding:10px 15px;">
            <div class="btn-group plannerpause" data-toggle="popover" data-content="This indicator shows that we're being asked to pause our sending of commands to the CNC controller so we don't overfill the buffer.">
                <span disabled="true" class="plannerpauseindicator glyphicon glyphicon glyphicon-time btn btn-sm"></span>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default view-small"><span class="glyphicon glyphicon-font" style="font-size:8px;"></span></button>
                <button type="button" class="btn btn-xs btn-default view-large active"><span class="glyphicon glyphicon-font"></span></button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-xs btn-default hidebody"><span class="glyphicon glyphicon-chevron-up"></span></button>
            </div>

            <div class="btn-group">
                <div class="dropdown">
                <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
    
                </button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    <li><a href="#" class="xyz-showa">Show/Hide A Axis</a></li>
                    <!-- <li class="divider"></li>
                    <li role="presentation" class="dropdown-header fork-name"></li>
                    <li><a href="" target="_blank" id="com-chilipeppr-widget-xyz-tbar-standalone">View Widget Standalone</a></li>
                    <li><a href=""...

CSS

#com-chilipeppr-widget-xyz-body {
    padding:2px;
}
#com-chilipeppr-widget-xyz-body .col {
    padding:0;
}
#com-chilipeppr-widget-xyz-ftr .hilite {
    background-color: #dff0d8;
}
#com-chilipeppr-widget-xyz-ftr .hiliteblue {
    background-color: #d9edf7;
}
.col {
    float:left;
}
.rotate90 {
    display:block;
    -webkit-transform: rotate(-90deg); 
    -webkit-font-smoothing: none;
     -moz-transform: rotate(-90deg); 
      -ms-transform: rotate(-90deg); 
       -o-transform: rotate(-90deg); 
          transform: rotate(-90deg);
}
.btnincrements .btn {
    font-size:9px;
    padding:1px 3px;
}
.com-chilipeppr-xyz-pos {
    padding:0 0 0 0px;
    margin:0;
}
.com-chilipeppr-xyz-label {
    padding:0;
    margin:0;
}
.com-chilipeppr-xyz-label-well h2 {
    text-align: center;
}
#com-chilipeppr-widget-xyz-body .com-chilipeppr-xyz-label-well {
    background-color: white;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0px;
    margin-right: 2px;
}
#com-chilipeppr-widget-xyz-body .com-chilipeppr-xyz-well {
    overflow: hidden;
    /* position: relative; */
    margin-bottom: 0px;
    padding: 3px 16px;
}
#com-chilipeppr-widget-xyz-body .com-chilipeppr-xyz-pos-well {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#com-chilipeppr-widget-xyz-body .com-chilipeppr-xyz-menu {
    /* z-index: 2; */
    position: absolute;
    left: 3px;
    top: 3px;
}
.com-chilipeppr-xyz-menu > .btn {
    border:0;
}
.com-chilipeppr-xyz-dim {
    position: absolute;
    top:0px;
    right:14px;
    font-size:13px;
}
#com-chilipeppr-widget-xyz-ftr {
    overflow-x: hidden;
}
#com-chilipeppr-widget-xyz-ftr:focus {
    background-color: #428bca;
}
#com-chilipeppr-widget-xyz-ftr.panel-primary {
    background-color: #428bca;
}
.xyz-dimmed {
    color:#e9e9e9;
}
.xyz-active {
    color: black;
}

.flatbottom {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0px solid red;
}
.flattop {
   ...

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-xyz"], function (xyz) {
    console.log("test running of " + xyz.id);
    //sp.init("192.168.1.7");
    xyz.init();

    // test out planner resume/pause
    var testPauseResume = function() {
        setTimeout(function() {chilipeppr.publish('/com-chilipeppr-interface-cnccontroller/plannerpause', "");}, 5000);
        setTimeout(function() {chilipeppr.publish('/com-chilipeppr-interface-cnccontroller/plannerresume', "");}, 10000);
        setTimeout(function() {chilipeppr.publish('/com-chilipeppr-interface-cnccontroller/plannerpause', "");}, 15000);
        setTimeout(function() {chilipeppr.publish('/com-chilipeppr-interface-cnccontroller/plannerresume', "");}, 20000);
    }
    
    var testAxesValUpdates = function() {
        setTimeout(function () {
            chilipeppr.publish("/com-chilipeppr-interface-cnccontroller/axes", 
                               {x: 0.005, y: 10.46, z: 0.304, a: 0, type: "machine"});
        }, 1000);
        setTimeout(function () {
            chilipeppr.publish("/com-chilipeppr-interface-cnccontroller/axes", 
                               {x: 192, y: 0.028, z: 0.01, a: 0, type: "work"} );
        }, 2000);
        setTimeout(function () {
            chilipeppr.publish("/com-chilipeppr-interface-cnccontroller/axes", 
                               {x: -3288.73, y: -0, z: 1.12, a: null, type: "machine"} );
        }, 3000);
        
        setTimeout(function () {
            chilipeppr.publish("/com-chilipeppr-interface-cnccontroller/axes", 
                               {x: 940.5744, y: null, z: 1.12, a: null, type: "machine"});
        }, 4000);
        setTimeout(function () {
            chilipeppr.publish("/com-chilipeppr-interface-cnccontroller/axes", 
                               {x: 0.574, y: 32.424, z: -3.424, a: null, type: "machine"});
        }, 5000);
        setTimeout(function () {
        ...