Merge pull request #1 from hb9cwp/updatePolymer1.x

Update polymer1.x

Author: Rolf Sommerhalder

Readme.md

@@ -1,10 +1,10 @@
 #flightpanel-speed
 
-Re-usable Speed indicator Web Component refactored from 
+Re-usable Speed indicator Web Component refactored from
 [flightSimPanels](https://github.com/dmolin/flightSimPanels)
 as Custom Element in Polymer.
 
-`<flightpanel-speed width=200 height=200 speed=25></flightpanel-speed>`
+`<flightpanel-speed id="si2speed" width=200 height=200 speed=25></flightpanel-speed>`
 
 <p align="center">
   <img src="speedIndicator.png?raw=true" alt="Speed Indicator 200 x 200 px"/>
@@ -17,9 +17,9 @@ The Custom Element accepts attributes `width`, `height` (in px), and `speed` (in
 It watches `speed`, and adjusts the hand as it changes.
 See example in [demo.html](demo.html) .
 
-This Custom Element is derived from Polymer's 
+This Custom Element is derived from Polymer's
 [seed-element](https://github.com/PolymerLabs/seed-element)
-according to 
-["Creating reusable elements:
- How to publish and deploy reusable Polymer elements on GitHub"]
-(http://www.polymer-project.org/docs/start/reusableelements.html) .
+according to
+["Create a reusable element:
+ Publish reusable Polymer elements on GitHub"]
+https://www.polymer-project.org/1.0/docs/start/reusableelements.html .

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "flightpanel-speed",
-  "version": "0.1",
+  "version": "1.0",
   "authors": [
     "Rolf Sommerhalder <[email protected]>"
   ],
@@ -22,7 +22,7 @@
     "/tests/"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^0.5.4"
+    "polymer": "Polymer/polymer#^1.2.0"
   },
   "devDependencies": {
     "web-component-tester": "*"

demo.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>

flightpanel-speed.html

@@ -1,16 +1,19 @@
-<!DOCTYPE html>
-
+<!doctype html>
 <html>
 <head>
-  <title>flightpanel-speed Info</title>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>Si2 Web Components: flightpanel-speed</title>
 
-  <script src="../webcomponentsjs/webcomponents.js"></script>
+  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+  <link rel="import" href="flightpanel-speed.html">
 
-  <link rel="import" href="../polymer/polymer.html">
-  <link rel="import" href="../core-component-page/core-component-page.html">
 </head>
 
 <body unresolved>
-  <core-component-page></core-component-page>
+
+  <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>