update component from Polymer 0.5 to 1.x

Author: hb9cwp

demo.html

@@ -4,7 +4,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>Si2 Web Components</title>
 
-  <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
+  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="flightpanel-speed.html">
 
 </head>
@@ -14,6 +14,6 @@
   <p>An example of using <code>&lt;flightpanel-speed&gt;</code>:</p>
 
   <flightpanel-speed id="si2speed" width=200 height=200 speed=32></flightpanel-speed>
-  
+
 </body>
 </html>

flightpanel-speed.html

@@ -1,14 +1,14 @@
 <link rel="import" href="../polymer/polymer.html">
 
 <!--
-The `flightpanel-speed` element renders an analog Speed indicator. 
+The `flightpanel-speed` element renders an analog Speed indicator.
 
 @element flightpanel-speed
 @status alpha
 @homepage https://github.com/hb9cwp/flightpanel-speed
 -->
 
-<polymer-element name="flightpanel-speed" attributes="width height speed">
+<dom-module id="flightpanel-speed">
 
   <template>
     <link rel="stylesheet" href="flightpanel-speed.css">
@@ -28,66 +28,69 @@
   <script>
     'use strict';
     Polymer({
-      /**
-       * 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: 0,
+      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: 0,
+      },
 
       min: 0,
       max: 0,
       angles: [],
 
       created: function() {
-        // interpolation etc. 
+        // 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= "./bower_components/flightpanel-speed/speedDial.png"
-        
+        dial.src= "./speedDial.png"
+
         that.hand.onload = function() {
           /* Variant A: save/restore */
             // 0. save context, e.g. offset etc.
@@ -113,9 +116,9 @@
             */
         }
         //that.hand.src= "../flightpanel-speed/speedHand.png"
-        that.hand.src= "./bower_components/flightpanel-speed/speedHand.png"
+        that.hand.src= "./speedHand.png"
       },
-      
+
       speedChanged: function () {
 			  var speed = Math.round(this.speed)
     		if (speed < this.min) {
@@ -139,10 +142,10 @@
           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
@@ -170,11 +173,11 @@
       },
       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);
 
@@ -200,7 +203,5 @@
       that.angles = angles;
       console.log("setup() done!")
     }
-
   </script>
-
-</polymer-element>
+</dom-module>

index.html

@@ -4,7 +4,7 @@
 <head>
   <title>flightpanel-speed Info</title>
 
-  <script src="../webcomponentsjs/webcomponents.js"></script>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
 
   <link rel="import" href="../polymer/polymer.html">
   <link rel="import" href="../core-component-page/core-component-page.html">