flightpanel-speed.html

<link rel="import" href="../polymer/polymer.html">

<!--
The `flightpanel-speed` element renders an analog Speed indicator.

@element flightpanel-speed
@status alpha
@homepage https://github.com/hb9cwp/flightpanel-speed
-->

<dom-module id="flightpanel-speed">

  <template>
    <link rel="stylesheet" href="flightpanel-speed.css">

    <!-- <p>Air speed is <strong>{{speed}}</strong> kts</p> -->

    <div id="canvasContainer">
      <!-- <canvas id="canvasID" class="canvasClass" width="{{width}}" height="{{height}}"></canvas> -->
      <canvas id="canvas0" width="{{width}}" height="{{height}}"></canvas>
      <canvas id="canvas1" width="{{width}}" height="{{height}}"></canvas>
    </div>

    <content></content>

  </template>

  <script>
    'use strict';
    Polymer({
      is: "flightpanel-speed",
      properties: {
        /**
         * Changes `width` of the indicator from its default (in px).
         *
         * @attribute width
         * @type number
         * @default 300
         */
        width: 300,

        /**
         * Changes `height` of the indicator from its default (in px).
         *
         * @attribute height
         * @type number
         * @default 300
         */
        height: 300,

        /**
         * The hand tracks the `speed` (in kts).
         *
         * @attribute speed
         * @type number
         * @default 0
         */
        speed: {
          type: Number,
          notify: true,
          observer: 'speedChanged',
        },
      },

      min: 0,
      max: 0,
      angles: [],

      created: function() {
        // interpolation etc.
        setup(this);
      },

      ctx1: null,
      hand: null,

      // on ready, not on created, unlike shown in some examples!
      ready: function () {
        var that= this

        // using label ID
        var canvas0 = this.$.canvas0;
        var canvas1 = this.$.canvas1;
        // or using class
        //var canvas= this.shadowRoot.querySelector('.canvasClass')
        var ctx0 = canvas0.getContext('2d')
        that.ctx1 = canvas1.getContext('2d')

        var dial= new Image()
        that.hand= new Image()

        dial.onload = function(){
          ctx0.drawImage(dial,0,0,that.width,that.height);  // scale to canvas size
        }
        //dial.src= "../flightpanel-speed/speedDial.png"
        dial.src= "./speedDial.png"

        that.hand.onload = function() {
          /* Variant A: save/restore */
            // 0. save context, e.g. offset etc.
            that.ctx1.save()
            // 1. Move context to the center point of rotation (defaults to upper left (0,0)).
            that.ctx1.translate(that.width/2, that.height/2)
            // 2. Rotate around center point (axle of hand)
            that.ctx1.rotate(that.angles[that.speed]*(Math.PI/180))
            // 3. draw with negative offsets
            that.ctx1.drawImage(that.hand,-that.width/2,-that.height/2,that.width,that.height); // scale to canvas size
            // 4. restore context for next rotation, as offset is still translated
            that.ctx1.restore()
          /* Variant B: translate forth and back, without save/restore */
            /*
            // 1. Move context to the center point of rotation (defaults to upper left (0,0)).
            that.ctx1.translate(that.width/2, that.height/2)
            // 2. Rotate around center point (axle of hand)
            that.ctx1.rotate(that.angles[that.speed]*(Math.PI/180))
            // 3. translate offset back
            that.ctx1.translate(-that.width/2, -that.height/2)
            // 4. draw at (0,0)
            that.ctx1.drawImage(that.hand,0,0,that.width,that.height) // scale to canvas size
            */
        }
        //that.hand.src= "../flightpanel-speed/speedHand.png"
        that.hand.src= "./speedHand.png"
      },

      speedChanged: function () {
			  var speed = Math.round(this.speed)
    		if (speed < this.min) {
    			speed = this.min
    		} else if (speed > this.max) {
    			speed = this.max
    		}
        this.ctx1.clearRect(0, 0, this.width, this.height);
        /* Variant A: save/restore */
          this.ctx1.save()
          this.ctx1.translate(this.width/2, this.height/2)
          this.ctx1.rotate(this.angles[speed]*(Math.PI/180))
          this.ctx1.drawImage(this.hand,-this.width/2,-this.height/2,this.width,this.height)  // scale to canvas size
          this.ctx1.restore()
        /* Variant B: translate forth and back, without save/restore
          Note: B fails as rotations of canvas cumulate without the restore! */
          /*
          this.ctx1.translate(this.width/2, this.height/2)
          this.ctx1.rotate(this.angles[speed]*(Math.PI/180))
          this.ctx1.translate(-this.width/2, -this.height/2)
          this.ctx1.drawImage(this.hand,0,0,this.width,this.height)  // scale to canvas size
          */
      }


    });

    function setup(that) {
      // from (scale modified for Si2)
      //  https://github.com/dmolin/flightSimPanels/blob/master/src/services/measures/speed/client/speed.js

      //console.log("setup() started...")
      var interp = {
        "0": 0.01,
        "5": 31,
        "7": 50,
        "10": 72,
        "12": 93,
        "15": 116,
        "17": 140,
        "20": 164,
        "22": 186,
        "25": 205,
        "27": 221,
        "30": 237,
        "32": 251,
        "35": 265,
        "37": 278,
        "40": 290,
        "42": 303,
        "45": 317
      },
      zeroAngle = 0,
      angles = [];

      var keys = Object.keys(interp).sort(function(a, b) {
        return parseInt(a, 10) - parseInt(b, 10);
      });

      var min = parseInt(keys[0], 10),
        max = parseInt(keys[keys.length - 1], 10);

      for (var i = min; i <= max; i++) {
        if (interp[i]) {
          angles[i] = interp[i] + zeroAngle;
        }
      }

      for (var i = 0, x = keys.length - 1; i < x; i++) {
        var current_key = parseInt(keys[i], 10);
        var current_val = parseInt(interp[current_key], 10);
        var next_key = parseInt(keys[i + 1], 10);
        var next_val = parseInt(interp[next_key], 10);
        var diff = (next_val - current_val) / (next_key - current_key);

        for (var q = current_key + 1, z = next_key; q < z; q++) {
          angles[q] = angles[q - 1] + diff;
        }
      }
      that.min = min;
      that.max = max;
      that.angles = angles;
      console.log("setup() done!")
    }
  </script>
</dom-module>