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 id="tspan7035" sodipodi:role="line" x="919.82416" y="901.02136"...

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;
}


/* #com-chilipeppr-widget-wcs #svgWcs .wcsLayer.active .wcs-minusbtn {
    fill:#999999 !important;
} */

#com-chilipeppr-widget-wcs #svgWcs .wcsLayer .wcs-minusbtn path {
  fill: #dddddd !important;
}

#com-chilipeppr-widget-wcs #svgWcs .wcsLayer .wcs-minusbtn:hover path {
  fill: #bbbbbb !important;
}

#com-chilipeppr-widget-wcs #svgWcs .wcsLayer .wcs-minusbtn:active path {
  fill: #666666 !important;
}

#com-chilipeppr-widget-wcs #svgWcs #g53 .wcs-minusbtn {
  display: none;
}

#com-chilipeppr-widget-wcs #svgWcs #g54 .wcs-minusbtn {
  display: none;
}

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://jsfiddle.net/Danal/4ete4691/show/light/",
    fiddleurl: "http://jsfiddle.net/Danal/4ete4691/",
    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();
      console.log("lyrTemplt:", this.lyrTemplt);
      this.pathLtEl = $('#com-chilipeppr-widget-wcs #svgWcs #pathLeft');
      this.pathRtEl = $('#com-chilipeppr-widget-wcs #svgWcs #pathRight');

      // attach to add button
  ...