Widget / Work Coordinate System

This widget lets you swap coordinate systems.

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-wcs" class="xpanel xpanel-default">
    <!-- <div class="panel-heading hidden
    "></div> -->
    <div class="xpanel-body">
        <svg width="75px" height="303px" viewbox="5 0 25 101" id="svgWcs">
            <g
     transform="translate(-8.5625,-951.17643)">
    <g class="wcsLayer wcsLayerTmplt"
       id="g54"
         transform="translate(0,0.1)">
      <path
         inkscape:connector-curvature="0"
         id="rect5199"
         d="m 26.518695,969.48289 c 3.869688,2.23417 7.739375,4.46833 11.609062,6.7025 -3.845529,2.22022 -7.69105,4.44045 -11.536579,6.66067 -3.869688,-2.23416 -7.739375,-4.46832 -11.609062,-6.70249 3.845529,-2.22023 7.69105,-4.44045 11.536579,-6.66068 z"
          />
      <text
         y="896.86426"
         x="919.53479"
         style="font-size:1.43884778px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;"
         xml:space="preserve"
         transform="matrix(0.93352274,0.5389696,-0.92769396,0.53560683,0,0)"><tspan
           style="font-size:5.58356571px;text-align:center;text-anchor:middle;fill:#a0a0a0;fill-opacity:1"
           y="896.86426"
           x="919.53479"
           id="tspan5203"
           sodipodi:role="line" class="layer-id">G54</tspan></text>
      <text
         xml:space="preserve"
         style="font-size:3px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;"
         x="919.82416"
         y="901.02136"
         id="text5205"
         sodipodi:linespacing="125%"
         transform="matrix(0.93352274,0.5389696,-0.92769396,0.53560683,0,0)"><tspan
          ...

CSS

/* html, body {
    background-color: #eeeeee;
} */
#com-chilipeppr-widget-wcs.panel {
    background-color: transparent;
    border: transparent;
}
#com-chilipeppr-widget-wcs .panel-body {
    background-color: transparent;
    /* height:200px; */
}
#com-chilipeppr-widget-wcs #svgWcs, #svgWcs text {
    font-family: sans-serif;
}

#com-chilipeppr-widget-wcs #svgWcs .wcsLayer path, #com-chilipeppr-widget-wcs #svgWcs .wcsLayer text {
    cursor:pointer;
}
#com-chilipeppr-widget-wcs #svgWcs .wcsLayer path {
    fill:#d7d7d7;
    stroke:#000000;
    stroke-width:0.2;
}
#com-chilipeppr-widget-wcs #svgWcs .wcsLayer:hover path {
    fill:#d9edf7;
}
#com-chilipeppr-widget-wcs #svgWcs .wcsLayer:active path {
    fill:#337ab7 !important;
}
#com-chilipeppr-widget-wcs #g53 {
    stroke-dasharray:1, 0.75;
}
#com-chilipeppr-widget-wcs #gAddBtn.wcsLayer path {
    stroke-width:0.3;
    stroke-opacity:0.5;
}
#com-chilipeppr-widget-wcs #svgWcs .wcsLayer.active path {
    fill:#dff0d8;
    stroke-width:0.025;
}
#com-chilipeppr-widget-wcs #svgWcs .wcsLayer.active.active-verified path {
    stroke-width:0.35;
}

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-widget-wcs"], function (wcs) {
    console.log("test running of " + wcs.id);
    wcs.init();
    
    var testCoords = function() {
        setTimeout(function() {
            chilipeppr.publish('/com-chilipeppr-interface-cnccontroller/coords', {coord:"g55", coordNum: 55});
        }, 5000);
    }
    testCoords();
    
} /*end_test*/ );

cpdefine("inline:com-chilipeppr-widget-wcs", ["chilipeppr_ready", "jquerycookie"], function () {
    return {
        id: "com-chilipeppr-widget-wcs",
        url: "http://fiddle.jshell.net/chilipeppr/xz76L1yd/show/light/",
        fiddleurl: "http://jsfiddle.net/chilipeppr/xz76L1yd/",
        name: "Widget / Work Coordinate System",
        desc: "This widget lets you swap coordinate systems.",
        publish: {},
        subscribe: {},
        foreignPublish: {},
        foreignSubscribe: {},
        init: function () {

            // Do UI setup
            this.initBody();
            this.initLayers();
            this.subscribeSetup();
            
            this.forkSetup();


            var that = this;
            console.log(this.name + " done loading.");
        },
        activeLayer: null,
        lyrTemplt: null,
        arrNum: [53, 54, 55, 56, 57, 58, 59, 60],
        arrLyr: ["g53", "g54", "g55", "g56", "g57", "g58", "g59"],
        arrLyrEl: [],
        // layersShowingTo is by default set to 54
        // g53 and g92 are always showing
        // so if layersShowingTo is set to 56 then 54,55,56 show
        layersShowingTo: null, // indicates base setting where g53 is showing (so is g92)
        isG92Active: false,
        layerHt: 11.5,
        pathLtEl: null,
        pathRtEl: null,
        initLayers: function() {
            console.log("initLayers");
            
            // get template
            this.lyrTemplt = $('#com-chilipeppr-widget-wcs #svgWcs #g54').clone();
           ...