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;" class="hidden"></div>
    
    
    <div class="panel-heading">
        
        <div class="btn-group pull-left" style="margin-left:-6px;padding-right:6px;">
            <button type="button" class="btn btn-xs btn-default btnToggleShowWcs"  data-delay="500" data-animation="true" data-placement="auto" data-container="body" data-trigger="hover" data-title="Show Work Coordinate System" data-content="Open up the WCS widget to be able to switch work coordinate systems easily or see which layer you're on.">
                <svg
                width="18px"
                height="18px"
                viewbox="0 0 16 16"
                style="margin-bottom:-5px;"
                id="svg7248">
                    <g
     id="layer1">
    <path
       d="m 8.062054,9.1535644 c 1.941557,1.1209616 3.883115,2.2419176 5.824672,3.3628786 -1.929436,1.113962 -3.858868,2.227928 -5.7883047,3.341891 C 6.1568636,14.737378 4.2153064,13.616421 2.2737492,12.49546 4.2031855,11.381494 6.1326177,10.267531 8.062054,9.1535644 z"
       id="rect5199"
       style="fill:#7d7d7d;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.0389093;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
    <path
       d="M 7.9617522,6.2482783 C 9.0250831,6.862191 10.088408,7.4761039 11.151734,8.0900117 10.095045,8.7000964 9.0383569,9.3101809 7.9816736,9.9202555 6.9183482,9.3063476 5.8550218,8.6924349 4.791692,8.0785221 5.8483748,7.4684424 6.9050638,6.8583578 7.9617522,6.2482783 z"
       id="rect4468"
      ...

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: visible;
    overflow-y: visible;
}
#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...

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.initAs3dPrinting();
    xyz.init();
    
    // load the WCS widget to left
    //$('body').css('margin-left', '80px');
    var wrapDiv = $('<div class="testdiv" style="margin-left:80px;position:relative;">');
    $('#com-chilipeppr-widget-xyz').wrap(wrapDiv);
    

    // 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);
    ...