kenchris/gist:7458923d0cbe0bd28a542c26c7cd1a71

## gistfile1.txt
<!DOCTYPE html>
<html>
  <head>
    <title>RGB LED</title>
    <script src="../serial.js"></script>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
  </head>

  <dom-module id="main-app">
  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment">
      :host {
        display: block;
      }
      span {
        @apply(--paper-font-body1);
      }
    </style>

    <p>
      <paper-button id="connect" on-tap="onButtonTap" raised>{{ buttonTitle }}</paper-button>
      <span id="status"></span>
    </p>

    <div class="horizontal layout center">
      <paper-input id="lcd-text" class="flex"></paper-input>
      <paper-button id="send" on-tap="sendText" raised>Send</paper-button>
    </div>
  </template>

  <script>
    (function() {
      'use strict';

      function ab2str(buf) {
        return String.fromCharCode.apply(null, new Uint8Array(buf));
      }

      function str2ab(str) {
       var buf = new ArrayBuffer(str.length);
       var bufView = new Uint8Array(buf);
       for (let i = 0; i< str.length; i++) {
         bufView[i] = str.charCodeAt(i);
       }
       return buf;
      }

      Polymer({
        is: 'main-app',
        properties: {
          port: {
            type: Object,
            notify: true
          },
          buttonTitle: {
            type: String,
            computed: 'computeButtonTitle(port)'
          }
        },
        computeButtonTitle: function(port) {
          return this.port ? "Disconnect" : "Connect";
        },
        connect: function() {
          this.port.connect().then(() => {
            this.$.status.textContent = '';

            this.port.onReceive = data => {
              console.log(ab2str(data.buffer));
            }

            this.port.onReceiveError = error => {
              console.error(error);
            };
          }, error => {
            this.$.status.textContent = error;
         });
        },
        sendText: function() {
          this.port.send(str2ab(this.$['lcd-text'].value));
        },
        onButtonTap: function() {
          if (this.port) {
            this.port.disconnect();
            this.port = undefined;
          } else {
            serial.requestPort().then(selectedPort => {
              this.port = selectedPort;
              this.connect();
            }).catch(error => {
              this.$.status.textContent = error;
            });
          }
        },
        ready: function() {
          serial.getPorts().then(ports => {
            if (ports.length == 0) {
              this.$.status.textContent = 'No device found.';
            } else {
              this.$.status.textContent = 'Connecting...';
              this.port = ports[0];
              this.connect();
            }
          });
        }
      });
    })();
  </script>
</dom-module>

  <body unresolved>
    <main-app></main-app>

    <!--script>
    connectButton.addEventListener('tap', function() {
      if (app.port) {
        port.disconnect();
        connectButton.textContent = 'Connect';
        statusDisplay.textContent = '';
      } else {
        serial.requestPort().then(selectedPort => {
          app.port = selectedPort;
          connect();
        }).catch(error => {
          statusDisplay.textContent = error;
        });
      }
    });
 -->
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>RGB LED</title>
	<script src="../serial.js"></script>
	<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
	<link rel="import" href="bower_components/polymer/polymer.html">
	<link rel="import" href="bower_components/paper-button/paper-button.html">
	<link rel="import" href="bower_components/paper-input/paper-input.html">
	<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
	</head>

	<dom-module id="main-app">
	<template>
	<style is="custom-style" include="iron-flex iron-flex-alignment">
	:host {
	display: block;
	}
	span {
	@apply(--paper-font-body1);
	}
	</style>

	<p>
	<paper-button id="connect" on-tap="onButtonTap" raised>{{ buttonTitle }}</paper-button>
	<span id="status"></span>
	</p>

	<div class="horizontal layout center">
	<paper-input id="lcd-text" class="flex"></paper-input>
	<paper-button id="send" on-tap="sendText" raised>Send</paper-button>
	</div>
	</template>

	<script>
	(function() {
	'use strict';

	function ab2str(buf) {
	return String.fromCharCode.apply(null, new Uint8Array(buf));
	}

	function str2ab(str) {
	var buf = new ArrayBuffer(str.length);
	var bufView = new Uint8Array(buf);
	for (let i = 0; i< str.length; i++) {
	bufView[i] = str.charCodeAt(i);
	}
	return buf;
	}

	Polymer({
	is: 'main-app',
	properties: {
	port: {
	type: Object,
	notify: true
	},
	buttonTitle: {
	type: String,
	computed: 'computeButtonTitle(port)'
	}
	},
	computeButtonTitle: function(port) {
	return this.port ? "Disconnect" : "Connect";
	},
	connect: function() {
	this.port.connect().then(() => {
	this.$.status.textContent = '';

	this.port.onReceive = data => {
	console.log(ab2str(data.buffer));
	}

	this.port.onReceiveError = error => {
	console.error(error);
	};
	}, error => {
	this.$.status.textContent = error;
	});
	},
	sendText: function() {
	this.port.send(str2ab(this.$['lcd-text'].value));
	},
	onButtonTap: function() {
	if (this.port) {
	this.port.disconnect();
	this.port = undefined;
	} else {
	serial.requestPort().then(selectedPort => {
	this.port = selectedPort;
	this.connect();
	}).catch(error => {
	this.$.status.textContent = error;
	});
	}
	},
	ready: function() {
	serial.getPorts().then(ports => {
	if (ports.length == 0) {
	this.$.status.textContent = 'No device found.';
	} else {
	this.$.status.textContent = 'Connecting...';
	this.port = ports[0];
	this.connect();
	}
	});
	}
	});
	})();
	</script>
	</dom-module>

	<body unresolved>
	<main-app></main-app>

	<!--script>
	connectButton.addEventListener('tap', function() {
	if (app.port) {
	port.disconnect();
	connectButton.textContent = 'Connect';
	statusDisplay.textContent = '';
	} else {
	serial.requestPort().then(selectedPort => {
	app.port = selectedPort;
	connect();
	}).catch(error => {
	statusDisplay.textContent = error;
	});
	}
	});
	-->
	</body>
	</html>