├── LICENSE
├── README.md
├── bower.json
├── demo
    ├── adxl345.html
    ├── angularjs
    │   ├── js
    │   │   └── ledController.js
    │   └── led.html
    ├── barcode.html
    ├── buzzer.html
    ├── dht.html
    ├── g3.html
    ├── hx711.html
    ├── irled.html
    ├── irrecv.html
    ├── jigglypuff
    │   ├── jigglypuff.html
    │   ├── jigglypuff.mp3
    │   ├── sing.gif
    │   └── stand.jpg
    ├── joystick.html
    ├── led.html
    ├── max7219.html
    ├── mq2.html
    ├── oled.html
    ├── photocell.html
    ├── pir.html
    ├── pot.html
    ├── push.html
    ├── relay.html
    ├── rfid.html
    ├── rgbled.html
    ├── servo.html
    ├── shock.html
    ├── soil.html
    ├── sound.html
    ├── stepper.html
    ├── tilt.html
    └── ultrasonic.html
├── img
    └── stepper.jpg
├── js
    ├── wa.event.js
    └── wa.js
├── wa-adxl345.html
├── wa-barcode.html
├── wa-button.html
├── wa-buzzer.html
├── wa-dht.html
├── wa-g3.html
├── wa-hx711.html
├── wa-irled.html
├── wa-irrecv.html
├── wa-joystick.html
├── wa-led.html
├── wa-max7219.html
├── wa-mq2.html
├── wa-photocell.html
├── wa-pir.html
├── wa-pot.html
├── wa-relay.html
├── wa-rfid.html
├── wa-rgbled.html
├── wa-servo.html
├── wa-shock.html
├── wa-soil.html
├── wa-sound.html
├── wa-ssd1306.html
├── wa-stepper.html
├── wa-tilt.html
├── wa-ultrasonic.html
└── web-arduino.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 webduino.io. All rights reserved.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # webduino
 2 | 
 3 | Web components for Webduino
 4 | 
 5 | ## Installation
 6 | 
 7 | ```Shell
 8 | $ bower install webduino
 9 | ```
10 | 
11 | ## Usage
12 | 
13 | Insert webduino web-components and polyfill:
14 | 
15 | ```html
16 | <script src='bower_components/webcomponentsjs/webcomponents.js'></script>
17 | <link rel='import' href='bower_components/webduino/web-arduino.html'></link>
18 | <link rel='import' href='bower_components/webduino/wa-led.html'></link>
19 | ```
20 | 
21 | Use it in your html:
22 | 
23 | ```html
24 | <web-arduino id='board' device='device_id'>
25 |   <wa-led id='led' pin='10'></wa-led>
26 | </web-arduino>
27 | ```
28 | 
29 | Control it with javascript:
30 | 
31 | ```javascript
32 | window.addEventListener('WebComponentsReady', function() {
33 |   var board = document.getElementById('board'),
34 |     led = document.getElementById('led');
35 | 
36 |   board.on('ready', function () {
37 |     led.on();
38 |   });
39 | });
40 | ```
41 | 
42 | ## API
43 | 
44 | _(coming soon...)_
45 | 
46 | ## See Also
47 | 
48 | [webduino-js](https://github.com/webduinoio/webduino-js) (The javascript core that powers webduino)
49 | 
50 | ## License
51 | 
52 | This project is licensed under MIT, please see [LICENSE](LICENSE) for more information.
53 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webduino",
 3 |   "description": "Web components for Webduino",
 4 |   "repository": "https://github.com/webduinoio/webduino.git",
 5 |   "homepage": "http://webduino.io",
 6 |   "keywords": ["arduino", "webduino", "web-components"],
 7 |   "license": "MIT",
 8 |   "dependencies": {
 9 |     "webcomponentsjs": "0.x",
10 |     "webduino-js": "dist"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/demo/adxl345.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>三軸(adxl345)</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-led.html'></link>
 11 |   <link rel='import' href='../wa-adxl345.html'></link>
 12 |   <style>
 13 |   * {
 14 |     font-size: 20px;
 15 |   }
 16 | 
 17 |   #msg.default::after {
 18 |     content: "訊息";
 19 |   }
 20 |   
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   
 29 |   #msg.setting::after {
 30 |     content: "設定中...";
 31 |   }
 32 |   
 33 |   #msg.set::after {
 34 |     content: "設定完成";
 35 |   }
 36 |   
 37 |   input {
 38 |     width: 100px;
 39 |     margin: 5px 0;
 40 |   }
 41 |   
 42 |   button {
 43 |     margin: 5px 0;
 44 |   }
 45 |   
 46 |   #light img {
 47 |     width: 25%;
 48 |     display: none;
 49 |   }
 50 |   
 51 |   #light.off img:first-child {
 52 |     display: inline-block;
 53 |   }
 54 |   
 55 |   #light.on img:last-child {
 56 |     display: inline-block;
 57 |   }
 58 |   
 59 |   #msgRecv {
 60 |     word-break: break-all;
 61 |     height: 300px;
 62 |     width: 100%;
 63 |     overflow: auto;
 64 |   }
 65 |   
 66 |   #msgRecv::before {
 67 |     content: 'message:';
 68 |   }
 69 |   </style>
 70 | 
 71 |   <style>
 72 |     .camera{
 73 |       margin:20% auto;
 74 |       width:200px;
 75 |       height:200px;
 76 |       perspective-origin:50% 50%;
 77 |       -moz-perspective-origin:50% 50%;
 78 |       -webkit-perspective-origin:50% 50%;
 79 |       perspective:500px;
 80 |       -moz-perspective:500px;
 81 |       -webkit-perspective:500px;
 82 |     }
 83 |     .space{
 84 |       position:relative;
 85 |       width:100%;
 86 |       height:100%;
 87 |       transform-style:preserve-3d;
 88 |       -moz-transform-style:preserve-3d;
 89 |       -webkit-transform-style:preserve-3d;
 90 |       transform-origin:center center -50px;
 91 |       -moz-transform-origin:center center -50px;
 92 |       -webkit-transform-origin:center center -50px;
 93 |     }
 94 |     .space div{
 95 |       position:absolute;
 96 |       width:100px;
 97 |       height:100px;
 98 |       font-size:50px;
 99 |       text-align:center;
100 |       line-height:100px;
101 |     }
102 |     .box1{
103 |       background:rgba(255,0,0,.2);
104 |       transform:translateX(50px) translateY(50px);
105 |       -moz-transform:translateX(50px) translateY(50px);
106 |       -webkit-transform:translateX(50px) translateY(50px);
107 |     }
108 |     .box2{
109 |       background:rgba(255,255,0,.2);
110 |       transform-origin:left top;
111 |       -moz-transform-origin:left top;
112 |       -webkit-transform-origin:left top;
113 |       transform:translateX(150px) translateY(50px) rotateY(90deg);
114 |       -moz-transform:translateX(150px) translateY(50px) rotateY(90deg);
115 |       -webkit-transform:translateX(150px) translateY(50px) rotateY(90deg);
116 |     }
117 |     .box3{
118 |       background:rgba(0,255,0,.2);
119 |       transform:translateX(50px) translateY(50px) translateZ(-100px) rotateY(180deg);
120 |       -moz-transform:translateX(50px) translateY(50px) translateZ(-100px) rotateY(180deg);
121 |       -webkit-transform:translateX(50px) translateY(50px) translateZ(-100px) rotateY(180deg);
122 |     }
123 |     .box4{
124 |       background:rgba(255,0,255,.2);
125 |       transform-origin:right top;
126 |       -moz-transform-origin:right top;
127 |       -webkit-transform-origin:right top;
128 |       transform:translateX(-50px) translateY(50px) rotateY(-90deg);
129 |       -moz-transform:translateX(-50px) translateY(50px) rotateY(-90deg);
130 |       -webkit-transform:translateX(-50px) translateY(50px) rotateY(-90deg);
131 |     }
132 |     .box5{
133 |       background:rgba(0,0,255,.2);
134 |       transform-origin:center bottom;
135 |       -moz-transform-origin:center bottom;
136 |       -webkit-transform-origin:center bottom;
137 |       transform:translateX(50px) translateY(-50px) rotateX(90deg);
138 |       -moz-transform:translateX(50px) translateY(-50px) rotateX(90deg);
139 |       -webkit-transform:translateX(50px) translateY(-50px) rotateX(90deg);
140 |     }
141 |     .box6{
142 |       background:rgba(0,255,255,.2);
143 |       transform-origin:center top;
144 |       -moz-transform-origin:center top;
145 |       -webkit-transform-origin:center top;
146 |       transform:translateX(50px) translateY(150px) rotateX(-90deg);
147 |       -moz-transform:translateX(50px) translateY(150px) rotateX(-90deg);
148 |       -webkit-transform:translateX(50px) translateY(150px) rotateX(-90deg);
149 |     }
150 |   </style>
151 | </head>
152 | 
153 | <body>
154 |   <web-arduino id="board">
155 |     <wa-led id='led' pin='10'></wa-led>
156 |     <wa-adxl345 id='adxl' sensitive="0" baseaxis="z"></wa-adxl345>
157 |   </web-arduino>
158 |   <div id="msg" class="waiting"></div>
159 |   <form>
160 |     <label>device : </label>
161 |     <input type="text" id="device">
162 |     <button class="setting" id="set">設定</button>
163 |   </form>
164 |   <p>led pin : 10</p>
165 |   <p>adxl - gnd, vcc, sda pin: A4, scl pin: A5</p>
166 |   <p>說明：
167 |     <br>1. roll(繞 x 轉動), pitch(繞 y 轉動)，感應器目標軸(x or y)箭頭朝前，目標軸的逆時針轉動會得到正值
168 |     <br>2. -180 < roll < 180, -90 < pitch < 90
169 |     <br>2. 屬性(baseaxis)，決定修正的向量以那個為準，可輸入值為 x,y,z，預設為 z，表示將 adxl345 平放，正面朝上，此時 z 軸會得到接近 1g(m/s^2)，x, y 為 0g。
170 |     <br>3. 屬性(sensitive)，敏感度。當感測器偵測到的數值，變化要超過敏感度，才會拋出資料。
171 |   </p>
172 | 
173 |   <div style="position: relative">
174 |     <p>點擊燈炮，啟動三軸加速度計</p>
175 |     <div id='light' class="off">
176 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
177 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
178 |     </div>
179 |     <div style="position: absolute; top: 0; right: 0; width: 60%;">
180 |       <button id='clearMsg'>clear message</button>
181 |       <br>
182 |       <div id='msgRecv'></div>
183 |     </div>
184 |   </div>
185 |   
186 |   <div class="camera">
187 |     <div class="space">
188 |       <div class="box1">^</div>
189 |       <div class="box2"></div>
190 |       <div class="box3"></div>
191 |       <div class="box4"></div>
192 |       <div class="box5"></div>
193 |       <div class="box6"></div>
194 |     </div>
195 |   </div>
196 | 
197 |   <script>
198 |   window.addEventListener('WebComponentsReady', function() {
199 |     var board = document.getElementById('board');
200 |     var device = document.getElementById('device');
201 |     var light = document.getElementById('light');
202 |     var clearMsg = document.getElementById('clearMsg');
203 |     var msgRecv = document.getElementById('msgRecv');
204 |     var msg = document.getElementById('msg');
205 |     var setBtn = document.getElementById('set');
206 | 
207 |     device.setAttribute('value', localStorage.device || "");
208 | 
209 |     msg.className = "ready";
210 | 
211 |     setBtn.addEventListener('click', function(e) {
212 |       msg.className = "setting";
213 |       light.className = 'off';
214 |       msgRecv.innerHTML = '';
215 |       board.device = device.value;
216 |       localStorage.device = device.value;
217 |       board.on('ready', ready);
218 |       board.init();
219 |       e.stopPropagation();
220 |       e.preventDefault();
221 |       return false;
222 |     }, false);
223 | 
224 |     clearMsg.addEventListener('click', function() {
225 |       msgRecv.innerHTML = '';
226 |     });
227 | 
228 |     function ready() {
229 |       var led = document.getElementById('led');
230 |       var adxl = document.getElementById('adxl');
231 | 
232 |       light.addEventListener('click', function() {
233 |         if (light.className == 'on') {
234 |           light.className = 'off';
235 |           led.off();
236 |           adxl.off();
237 |         } else {
238 |           light.className = 'on';
239 |           led.on();
240 |           adxl.on(callback);
241 |         }
242 |       }, false);
243 | 
244 |       msg.className = "set";
245 |     }
246 | 
247 |     function callback(x, y, z, roll, pitch) {
248 |       var msgRecv = document.getElementById('msgRecv');
249 |       var space = document.querySelectorAll('.space');
250 |       var ss = document.createElement('span');
251 |       ss.innerHTML += '<br>';
252 |       ss.innerHTML += '<span '+ (x < 0 ? 'style="color:red;" ' : '') +'>x: ' + x + '</span>';
253 |       ss.innerHTML += '<span '+ (y < 0 ? 'style="color:red;" ' : '') +'>, y: ' + y + '</span>';
254 |       ss.innerHTML += '<span '+ (z < 0 ? 'style="color:red;" ' : '') +'>, z: ' + z + '</span>';
255 |       ss.innerHTML += '<span>, roll: '+ roll + '</span>';
256 |       ss.innerHTML += '<span>, pitch: '+ pitch + '</span>';
257 |       ss.innerHTML += '<span>, ' + new Date().toLocaleTimeString() + '</span>';
258 |       msgRecv.insertBefore(ss, msgRecv.childNodes[0]);
259 | 
260 |       space[0].style.transform = 'rotateX(' + (roll) + 'deg) rotateY(' + (0-pitch) + 'deg) rotateZ(0deg)';
261 |     }
262 |   });
263 |   </script>
264 | </body>
265 | 
266 | </html>
267 | 


--------------------------------------------------------------------------------
/demo/angularjs/js/ledController.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module('ledExample', [])
 4 |   .controller('ledController', ['$scope', function ($scope) {
 5 | 
 6 |     $scope.stateModel = [{
 7 |       label: 'on',
 8 |       value: 'on'
 9 |     }, {
10 |       label: 'off',
11 |       value: 'off'
12 |     }];
13 | 
14 |     $scope.state = $scope.stateModel[1];
15 | 
16 |     $scope.toggle = function () {
17 |       var state = $scope.state;
18 |       if (state.value !== 'on') {
19 |         $scope.state = $scope.stateModel[0];
20 |       } else {
21 |         $scope.state = $scope.stateModel[1];
22 |       }
23 |     };
24 |   }]);
25 | 


--------------------------------------------------------------------------------
/demo/angularjs/led.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html >
 2 | <html ng-app='ledExample'>
 3 | 
 4 | <head>
 5 |   <script src="../../../webcomponentsjs/webcomponents.js"></script>
 6 |   <link rel='import' href='../../web-arduino.html'></link>
 7 |   <link rel='import' href='../../wa-led.html'></link>
 8 |   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
 9 |   <script src="js/ledController.js"></script>
10 |   <style>
11 |   select {
12 |     width: 10%;
13 |     height: 30px;
14 |   }
15 |   button {
16 |     margin-top: 10px;
17 |     width: 10%;
18 |     height: 50px;
19 |   }
20 |   </style>
21 | </head>
22 | 
23 | <body ng-controller="ledController">
24 |   <web-arduino id='board' device='Mnw4'>
25 |     <wa-led id='led' pin='11' state="{{state.value}}"></wa-led>
26 |   </web-arduino>
27 | 
28 |   <div>
29 |     <label>LED State:</label>
30 |     <select ng-model="state" ng-options="m.label for m in stateModel"></select>
31 |     <br>
32 |     <button ng-click="toggle();">toggle</button>
33 |     <hr>
34 |     <h1>LED:
35 |       <span ng-bind="state.value || 'none'"></span>
36 |     </h1>
37 |   </div>
38 | 
39 | </body>
40 | 
41 | </html>
42 | 


--------------------------------------------------------------------------------
/demo/barcode.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>Barcode Scanner</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-barcode.html'></link>
 11 |   <style>
 12 |   * {
 13 |     font-size: 20px;
 14 |   }
 15 | 
 16 |   #msg.default::after {
 17 |     content: "訊息";
 18 |   }
 19 |   
 20 |   #msg.waiting::after {
 21 |     content: "Loading...";
 22 |   }
 23 |   
 24 |   #msg.ready::after {
 25 |     content: "Ready!";
 26 |   }
 27 |   
 28 |   #msg.setting::after {
 29 |     content: "設定中...";
 30 |   }
 31 |   
 32 |   #msg.set::after {
 33 |     content: "設定完成";
 34 |   }
 35 |   
 36 |   input {
 37 |     width: 100px;
 38 |     margin: 5px 0;
 39 |   }
 40 |   
 41 |   button {
 42 |     margin: 5px 0;
 43 |   }
 44 |   
 45 |   #light img {
 46 |     width: 25%;
 47 |     display: none;
 48 |   }
 49 |   
 50 |   #light.off img:first-child {
 51 |     display: inline-block;
 52 |   }
 53 |   
 54 |   #light.on img:last-child {
 55 |     display: inline-block;
 56 |   }
 57 |   
 58 |   #msgRecv {
 59 |     word-break: break-all;
 60 |     height: 300px;
 61 |     width: 100%;
 62 |     overflow: auto;
 63 |   }
 64 |   
 65 |   #msgRecv::before {
 66 |     content: 'message:';
 67 |   }
 68 |   </style>
 69 | </head>
 70 | 
 71 | <body>
 72 |   <web-arduino id="board">
 73 |     <wa-barcode id='barcode' rx='2' tx='3'></wa-barcode>
 74 |   </web-arduino>
 75 |   <div id="msg" class="waiting"></div>
 76 |   <form>
 77 |     <label>device : </label>
 78 |     <input type="text" id="device">
 79 |     <button class="setting" id="set">設定</button>
 80 |   </form>
 81 |   <p>說明：</p>
 82 |   <div style="position: relative">
 83 |     <p>點擊燈炮，啟動接收Barcode資料</p>
 84 |     <div id='light' class="off">
 85 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
 86 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
 87 |     </div>
 88 |     <div style="position: absolute; top: 0; right: 0; width: 60%;">
 89 |       <button id='clearMsg'>clear message</button>
 90 |       <br>
 91 |       <div id='msgRecv'></div>
 92 |     </div>
 93 |   </div>
 94 | 
 95 |   <script>
 96 |   window.addEventListener('WebComponentsReady', function() {
 97 |     var board = document.getElementById('board');
 98 |     var device = document.getElementById('device');
 99 |     var light = document.getElementById('light');
100 |     var clearMsg = document.getElementById('clearMsg');
101 |     var msgRecv = document.getElementById('msgRecv');
102 |     var msg = document.getElementById('msg');
103 |     var setBtn = document.getElementById('set');
104 | 
105 |     device.setAttribute('value', localStorage.device || "");
106 | 
107 |     msg.className = "ready";
108 | 
109 |     setBtn.addEventListener('click', function(e) {
110 |       msg.className = "setting";
111 |       light.className = 'off';
112 |       msgRecv.innerHTML = '';
113 |       board.device = device.value;
114 |       localStorage.device = device.value;
115 |       board.on('ready', ready);
116 |       board.init();
117 |       e.stopPropagation();
118 |       e.preventDefault();
119 |       return false;
120 |     }, false);
121 | 
122 |     clearMsg.addEventListener('click', function() {
123 |       msgRecv.innerHTML = '';
124 |     });
125 | 
126 |     function ready() {
127 |       var barcode = document.getElementById('barcode');
128 | 
129 |       light.addEventListener('click', function() {
130 |         if (light.className == 'on') {
131 |           light.className = 'off';
132 |           barcode.off();
133 |         } else {
134 |           light.className = 'on';
135 |           barcode.on(callback);
136 |         }
137 |       }, false);
138 | 
139 |       msg.className = "set";
140 |     }
141 | 
142 |     function callback(scanData) {
143 |       console.log('callback',scanData);
144 |       var msgRecv = document.getElementById('msgRecv');
145 |       msgRecv.innerHTML = scanData+'<br>'+msgRecv.innerHTML;
146 |     }
147 |   });
148 |   </script>
149 | </body>
150 | 
151 | </html>
152 | 


--------------------------------------------------------------------------------
/demo/buzzer.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 6 |   <link rel='import' href='../web-arduino.html'></link>
 7 |   <link rel='import' href='../wa-buzzer.html'></link>
 8 | </head>
 9 | 
10 | <body>
11 |   <web-arduino id='board' device='wahaha'>
12 |     <wa-buzzer id='buzzer' pin='11' notes='E5,E5,REST,E5,REST,C5,E5,REST,G5' tempos='8,8,8,8,8,8,8,8,8' autoplay></wa-buzzer>
13 |   </web-arduino>
14 | </body>
15 | 
16 | </html>
17 | 


--------------------------------------------------------------------------------
/demo/dht.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7 |   <title>Detect humidity and temperature</title>
 8 | 
 9 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
10 |   <link rel='import' href='../web-arduino.html'></link>
11 |   <link rel='import' href='../wa-dht.html'></link>
12 | 
13 |   <style>
14 |   * {
15 |     font-size: 20px;
16 |   }
17 | 
18 |   #msg.default::after {
19 |     content: "訊息";
20 |   }
21 |   #msg.waiting::after {
22 |     content: "Loading...";
23 |   }
24 |   #msg.ready::after {
25 |     content: "Ready!";
26 |   }
27 |   #msg.setting::after {
28 |     content: "設定中...";
29 |   }
30 |   #msg.set::after {
31 |     content: "設定完成";
32 |   }
33 |   </style>
34 | </head>
35 | 
36 | <body>
37 |   <web-arduino id='board'>
38 |     <wa-dht id='dht' pin='10'></wa-dht>
39 |   </web-arduino>
40 | 
41 |   <div id="msg" class="waiting"></div>
42 | 
43 |   <form>
44 |     <label>device : </label><input type="text" id="device">
45 |     <button class="setting" id="set">設定</button>
46 |   </form>
47 | 
48 |   <p>需接地及5V電源, DHT pin : 10</p>
49 |   <p>使用溫溼度感應，偵測現場溫溼度。</p>
50 |   <p id='data'>none</p>
51 |   
52 | 
53 |   <script>
54 |   window.addEventListener('WebComponentsReady', function() {
55 |     var board = document.getElementById('board'),
56 |       msg = document.getElementById('msg'),
57 |       device = document.getElementById('device'),
58 |       dht = document.getElementById('dht'),
59 |       setBtn = document.getElementById('set'),
60 |       data = document.getElementById('data');
61 | 
62 |     device.setAttribute('value', localStorage.device || "");
63 | 
64 |     msg.className = "ready";
65 | 
66 |     setBtn.addEventListener('click', function(e) {
67 |       msg.className = "setting";
68 |       board.device = device.value;
69 |       localStorage.device = device.value;
70 |       board.on('ready', ready);
71 |       board.init();
72 |       e.stopPropagation();
73 |       e.preventDefault();
74 |       return false;
75 |     }, false);
76 | 
77 |     function ready() {
78 |       // 示意 board ready
79 |       msg.className = "set";
80 |       run();
81 |     }
82 | 
83 |     function run(times) {
84 |       dht.read(function(evt) {
85 |         data.innerHTML = Date() + "<br>溫度:" + evt.temperature + ", 溼度:" + evt.humidity;
86 |       }, 3000);
87 |     }
88 |   });
89 |   </script>
90 | </body>
91 | 
92 | </html>
93 | 


--------------------------------------------------------------------------------
/demo/g3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7 |   <title>Detect humidity and temperature</title>
 8 | 
 9 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
10 |   <link rel='import' href='../web-arduino.html'></link>
11 |   <link rel='import' href='../wa-g3.html'></link>
12 | 
13 |   <style>
14 |   * {
15 |     font-size: 20px;
16 |   }
17 | 
18 |   #msg.default::after {
19 |     content: "訊息";
20 |   }
21 |   #msg.waiting::after {
22 |     content: "Loading...";
23 |   }
24 |   #msg.ready::after {
25 |     content: "Ready!";
26 |   }
27 |   #msg.setting::after {
28 |     content: "設定中...";
29 |   }
30 |   #msg.set::after {
31 |     content: "設定完成";
32 |   }
33 |   </style>
34 | </head>
35 | 
36 | <body>
37 |   <web-arduino id='board'>
38 |     <wa-g3 id='g3' rx='2' tx='3'></wa-g3>
39 |   </web-arduino>
40 | 
41 |   <div id="msg" class="waiting"></div>
42 | 
43 |   <form>
44 |     <label>device : </label><input type="text" id="device">
45 |     <button class="setting" id="set">設定</button>
46 |   </form>
47 | 
48 |   <p>需接地及5V電源, G3 rx: 2 , tx: 3</p>
49 |   <p>使用G3傳感器，偵測現場PM25 , PM10</p>
50 |   <p id='data'>none</p>
51 |   
52 | 
53 |   <script>
54 |   window.addEventListener('WebComponentsReady', function() {
55 |     var board = document.getElementById('board'),
56 |       msg = document.getElementById('msg'),
57 |       device = document.getElementById('device'),
58 |       g3 = document.getElementById('g3'),
59 |       setBtn = document.getElementById('set'),
60 |       data = document.getElementById('data');
61 | 
62 |     device.setAttribute('value', localStorage.device || "");
63 | 
64 |     msg.className = "ready";
65 | 
66 |     setBtn.addEventListener('click', function(e) {
67 |       msg.className = "setting";
68 |       board.device = device.value;
69 |       localStorage.device = device.value;
70 |       board.on('ready', ready);
71 |       board.init();
72 |       e.stopPropagation();
73 |       e.preventDefault();
74 |       return false;
75 |     }, false);
76 | 
77 |     function ready() {
78 |       // 示意 board ready
79 |       msg.className = "set";
80 |       run();
81 |     }
82 | 
83 |     function run(times) {
84 |       g3.read(function(evt) {
85 |         data.innerHTML = Date() + "<br>PM25:" + evt.pm25 + ", PM10:" + evt.pm10;
86 |       }, 3000);
87 |     }
88 |   });
89 |   </script>
90 | </body>
91 | 
92 | </html>
93 | 


--------------------------------------------------------------------------------
/demo/hx711.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>電子秤(hx711)</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-hx711.html'></link>
 11 |   <style>
 12 |   * {
 13 |     font-size: 20px;
 14 |   }
 15 | 
 16 |   #msg.default::after {
 17 |     content: "訊息";
 18 |   }
 19 |   
 20 |   #msg.waiting::after {
 21 |     content: "Loading...";
 22 |   }
 23 |   
 24 |   #msg.ready::after {
 25 |     content: "Ready!";
 26 |   }
 27 |   
 28 |   #msg.setting::after {
 29 |     content: "設定中...";
 30 |   }
 31 |   
 32 |   #msg.set::after {
 33 |     content: "設定完成";
 34 |   }
 35 |   
 36 |   input {
 37 |     width: 100px;
 38 |     margin: 5px 0;
 39 |   }
 40 |   
 41 |   button {
 42 |     margin: 5px 0;
 43 |   }
 44 |   
 45 |   #light img {
 46 |     width: 25%;
 47 |     display: none;
 48 |   }
 49 |   
 50 |   #light.off img:first-child {
 51 |     display: inline-block;
 52 |   }
 53 |   
 54 |   #light.on img:last-child {
 55 |     display: inline-block;
 56 |   }
 57 |   
 58 |   #msgRecv {
 59 |     word-break: break-all;
 60 |     height: 300px;
 61 |     width: 100%;
 62 |     overflow: auto;
 63 |   }
 64 |   
 65 |   #msgRecv::before {
 66 |     content: 'message:';
 67 |   }
 68 |   </style>
 69 | </head>
 70 | 
 71 | <body>
 72 |   <web-arduino id="board">
 73 |     <wa-hx711 id='hx711' sck='6' dt='7'></wa-hx711>
 74 |   </web-arduino>
 75 |   <div id="msg" class="waiting"></div>
 76 |   <form>
 77 |     <label>device : </label>
 78 |     <input type="text" id="device">
 79 |     <button class="setting" id="set">設定</button>
 80 |   </form>
 81 |   <p>說明：
 82 |     <br>等顯示0g後，季可開始測量物體重量
 83 |   </p>
 84 | 
 85 |   <div style="position: relative">
 86 |     <p>點擊燈炮，啟動電子秤</p>
 87 |     <div id='light' class="off">
 88 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
 89 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
 90 |     </div>
 91 |     <div style="position: absolute; top: 0; right: 0; width: 60%;">
 92 |       <button id='clearMsg'>clear message</button>
 93 |       <br>
 94 |       <div id='msgRecv'></div>
 95 |     </div>
 96 |   </div>
 97 | 
 98 |   <script>
 99 |   window.addEventListener('WebComponentsReady', function() {
100 |     var board = document.getElementById('board');
101 |     var device = document.getElementById('device');
102 |     var light = document.getElementById('light');
103 |     var clearMsg = document.getElementById('clearMsg');
104 |     var msgRecv = document.getElementById('msgRecv');
105 |     var msg = document.getElementById('msg');
106 |     var setBtn = document.getElementById('set');
107 | 
108 |     device.setAttribute('value', localStorage.device || "");
109 | 
110 |     msg.className = "ready";
111 | 
112 |     setBtn.addEventListener('click', function(e) {
113 |       msg.className = "setting";
114 |       light.className = 'off';
115 |       msgRecv.innerHTML = '';
116 |       board.device = device.value;
117 |       localStorage.device = device.value;
118 |       board.on('ready', ready);
119 |       board.init();
120 |       e.stopPropagation();
121 |       e.preventDefault();
122 |       return false;
123 |     }, false);
124 | 
125 |     clearMsg.addEventListener('click', function() {
126 |       msgRecv.innerHTML = '';
127 |     });
128 | 
129 |     function ready() {
130 |       var hx711 = document.getElementById('hx711');
131 | 
132 |       light.addEventListener('click', function() {
133 |         if (light.className == 'on') {
134 |           light.className = 'off';
135 |           hx711.off();
136 |         } else {
137 |           light.className = 'on';
138 |           hx711.on(callback);
139 |         }
140 |       }, false);
141 | 
142 |       msg.className = "set";
143 |     }
144 | 
145 |     function callback(weight) {
146 |       console.log('callback',weight);
147 |       var msgRecv = document.getElementById('msgRecv');
148 |       msgRecv.innerHTML = weight+' g<br>'+msgRecv.innerHTML;
149 |     }
150 |   });
151 |   </script>
152 | </body>
153 | 
154 | </html>
155 | 


--------------------------------------------------------------------------------
/demo/irled.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>紅外線發射(irled)</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-led.html'></link>
 11 |   <link rel='import' href='../wa-irled.html'></link>
 12 | 
 13 |   <style>
 14 |   html, body {
 15 |     width: 100%;
 16 |     height: 100%;
 17 |   }
 18 | 
 19 |   * {
 20 |     font-size: 20px;
 21 |   }
 22 | 
 23 |   #msg.default::after {
 24 |     content: "訊息";
 25 |   }
 26 |   
 27 |   #msg.waiting::after {
 28 |     content: "Loading...";
 29 |   }
 30 |   
 31 |   #msg.ready::after {
 32 |     content: "Ready!";
 33 |   }
 34 |   
 35 |   #msg.setting::after {
 36 |     content: "設定中...";
 37 |   }
 38 |   
 39 |   #msg.set::after {
 40 |     content: "設定完成";
 41 |   }
 42 | 
 43 |   #light {
 44 |     width: 50%;
 45 |     height: 50%;
 46 |   }
 47 |   
 48 |   img {
 49 |     width: 100%;
 50 |     height: 100%;
 51 |   }
 52 |   
 53 |   .off img:last-child,
 54 |   .on img:first-child {
 55 |     display: none;
 56 |   }
 57 |   </style>
 58 |   
 59 | </head>
 60 | 
 61 | <body>
 62 |   <web-arduino id='board'>
 63 |     <wa-led id='led' pin='10' state="off"></wa-led>
 64 |     <wa-irled id='irled' initsend="false" encode='20df10ef'></wa-irled>
 65 |   </web-arduino>
 66 |   <div id="msg" class="waiting"></div>
 67 |   <form>
 68 |     <label>device : </label>
 69 |     <input type="text" id="device">
 70 |     <button class="setting" id="set">設定</button>
 71 |   </form>
 72 |   <p>led pin : 10</p>
 73 |   <p>irled pin : 9 (固定)</p>
 74 |   <p>電視開關訊號 : 20df10ef</p>
 75 |   <p>點擊圖示，燈泡亮起時，發出紅外線訊號</p>
 76 |   <div id='light' class="off">
 77 |     <img src='http://i.imgur.com/i0CHoAt.jpg'></img>
 78 |     <img src='http://i.imgur.com/rhEBE6x.jpg'></img>
 79 |   </div>
 80 | 
 81 |   <script>
 82 |   window.addEventListener('WebComponentsReady', function() {
 83 |     var board = document.getElementById('board');
 84 |     var device = document.getElementById('device');
 85 |     var msg = document.getElementById('msg');
 86 |     var setBtn = document.getElementById('set');
 87 | 
 88 |     device.setAttribute('value', localStorage.device || "");
 89 | 
 90 |     msg.className = "ready";
 91 | 
 92 |     setBtn.addEventListener('click', function(e) {
 93 |       this.setAttribute('disabled', true);
 94 |       msg.className = "setting";
 95 |       board.device = device.value;
 96 |       localStorage.device = device.value;
 97 |       board.on('ready', ready);
 98 |       board.init();
 99 |       e.stopPropagation();
100 |       e.preventDefault();
101 |       return false;
102 |     }, false);
103 | 
104 |     function ready() {
105 |       var light = document.getElementById('light');
106 |       msg.className = "set";
107 |       light.className = 'off';
108 |       light.addEventListener('click', lightClickHandler);
109 |     }
110 | 
111 |     function lightClickHandler() {
112 |       var led = document.getElementById('led');
113 |       var irled = document.getElementById('irled');
114 |       if (led.state == 'on') {
115 |         this.className = 'off';
116 |         led.off();
117 |       } else {
118 |         this.className = 'on';
119 |         led.on();
120 |         irled.send();
121 |       }
122 |     }
123 | 
124 |   }, false);
125 |   </script>
126 | </body>
127 | 
128 | </html>
129 | 


--------------------------------------------------------------------------------
/demo/irrecv.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>紅外線接收(irrecv)</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-led.html'></link>
 11 |   <link rel='import' href='../wa-irrecv.html'></link>
 12 |   <style>
 13 |   * {
 14 |     font-size: 20px;
 15 |   }
 16 | 
 17 |   #msg.default::after {
 18 |     content: "訊息";
 19 |   }
 20 |   
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   
 29 |   #msg.setting::after {
 30 |     content: "設定中...";
 31 |   }
 32 |   
 33 |   #msg.set::after {
 34 |     content: "設定完成";
 35 |   }
 36 |   
 37 |   input {
 38 |     width: 100px;
 39 |     margin: 5px 0;
 40 |   }
 41 |   
 42 |   button {
 43 |     margin: 5px 0;
 44 |   }
 45 |   
 46 |   #light img {
 47 |     width: 25%;
 48 |     display: none;
 49 |   }
 50 |   
 51 |   #light.off img:first-child {
 52 |     display: inline-block;
 53 |   }
 54 |   
 55 |   #light.on img:last-child {
 56 |     display: inline-block;
 57 |   }
 58 |   
 59 |   #msgRecv {
 60 |     word-break: break-all;
 61 |   }
 62 |   
 63 |   #msgRecv::before {
 64 |     content: 'message:';
 65 |   }
 66 |   </style>
 67 | </head>
 68 | 
 69 | <body>
 70 |   <web-arduino id="board">
 71 |     <wa-led id='led' pin='9'></wa-led>
 72 |     <wa-irrecv id='irrecv' pin='10'></wa-irrecv>
 73 |   </web-arduino>
 74 |   <div id="msg" class="waiting"></div>
 75 |   <form>
 76 |     <label>device : </label>
 77 |     <input type="text" id="device">
 78 |     <button class="setting" id="set">設定</button>
 79 |   </form>
 80 |   <p>led pin : 9</p>
 81 |   <p>irrecv pin : 10</p>
 82 |   <p>說明：
 83 |     <br>紅外線接收器面向自已，由左自右腳位依序為 Vout(讀取紅外線訊號)，GND，VCC。
 84 |   </p>
 85 |   <p>點擊燈炮，啟動紅外線接收</p>
 86 |   <div id='light' class="off">
 87 |     <img src='http://i.imgur.com/T5H4MHE.png'></img>
 88 |     <img src='http://i.imgur.com/8qFj2Ou.png'></img>
 89 |   </div>
 90 |   <button id='clearMsg'>clear message</button>
 91 |   <br>
 92 |   <div id='msgRecv'></div>
 93 | 
 94 | 
 95 |   <script>
 96 |   window.addEventListener('WebComponentsReady', function() {
 97 |     var board = document.getElementById('board');
 98 |     var device = document.getElementById('device');
 99 |     var light = document.getElementById('light');
100 |     var clearMsg = document.getElementById('clearMsg');
101 |     var msgRecv = document.getElementById('msgRecv');
102 |     var msg = document.getElementById('msg');
103 |     var setBtn = document.getElementById('set');
104 | 
105 |     // 遙控器的編碼
106 |     var dataMap = {
107 |       '00ff6897': '1',
108 |       '00ff9867': '2',
109 |       '00ffb04f': '3',
110 |       '00ff30cf': '4',
111 |       '00ff18e7': '5',
112 |       '00ff7a85': '6',
113 |       '00ff10ef': '7',
114 |       '00ff38c7': '8',
115 |       '00ff5aa5': '9',
116 |       '00ff4ab5': '0',
117 |       '00ff42bd': '*',
118 |       '00ff52ad': '#',
119 |       '00ffa857': 'down',
120 |       '00ff22dd': 'left',
121 |       '00ffc23d': 'right',
122 |       '00ff629d': 'up',
123 |       '00ff02fd': 'ok'
124 |     };
125 | 
126 |     dataMap['20df10ef'] = '電視開關';
127 | 
128 |     device.setAttribute('value', localStorage.device || "");
129 | 
130 |     msg.className = "ready";
131 | 
132 |     setBtn.addEventListener('click', function(e) {
133 |       msg.className = "setting";
134 |       light.className = 'off';
135 |       msgRecv.innerHTML = '';
136 |       board.device = device.value;
137 |       localStorage.device = device.value;
138 |       board.on('ready', ready);
139 |       board.init();
140 |       e.stopPropagation();
141 |       e.preventDefault();
142 |       return false;
143 |     }, false);
144 | 
145 |     clearMsg.addEventListener('click', function() {
146 |       msgRecv.innerHTML = '';
147 |     });
148 | 
149 |     function ready() {
150 |       var led = document.getElementById('led');
151 |       var irrecv = document.getElementById('irrecv');
152 | 
153 |       light.addEventListener('click', function() {
154 |         if (light.className == 'on') {
155 |           light.className = 'off';
156 |           led.off();
157 |           irrecv.off();
158 |         } else {
159 |           light.className = 'on';
160 |           led.on();
161 |           irrecv.on(success, errorHandler);
162 |         }
163 |       }, false);
164 | 
165 |       msg.className = "set";
166 |     }
167 | 
168 |     function success(val) {
169 |       var msgRecv = document.getElementById('msgRecv');
170 |       var ss = document.createElement('span');
171 |       ss.textContent = (dataMap[val] || val) + ',';
172 |       msgRecv.appendChild(ss);
173 |     }
174 | 
175 |     function errorHandler(val, originalMsg) {
176 |       var msgRecv = document.getElementById('msgRecv');
177 |       var ss = document.createElement('span');
178 |       ss.textContent = val + ',';
179 |       msgRecv.appendChild(ss);
180 |       console.log('error:', originalMsg);
181 |     }
182 |   });
183 |   </script>
184 | </body>
185 | 
186 | </html>
187 | 


--------------------------------------------------------------------------------
/demo/jigglypuff/jigglypuff.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <title>Jigglypuff</title>
  7 | 
  8 |   <style>
  9 |   img {
 10 |     display: none;
 11 |     width: 100%;
 12 |     max-width: 300px;
 13 |   }
 14 |   #jigglypuff.ready img.stand {
 15 |     display: block;
 16 |   }
 17 |   #jigglypuff.action img.sing {
 18 |     display: block;
 19 |   }
 20 |   #control {
 21 |     width: 100%;
 22 |     max-width: 300px;
 23 |     margin: 10px 0 10px 0;
 24 |   }
 25 |   #control button {
 26 |     display: inline-block;
 27 |     width: 40%;
 28 |     height: 50px;
 29 |   }
 30 |   #control.start .msg::after {
 31 |     content: "超音波啟動中...";
 32 |   }
 33 |   #control.starting .msg::after {
 34 |     content: "超音波已啟動";
 35 |   }
 36 |   form {
 37 |     width: 100%;
 38 |     max-width: 300px;
 39 |   }
 40 |   form>* {
 41 |     margin-top: 2px;
 42 |   }
 43 |   form>input {
 44 |     width: 40%;
 45 |     height: 20px;
 46 |   }
 47 |   form>button {
 48 |     width: 50%;
 49 |     height: 50px;
 50 |   }
 51 |   button.setting::after {
 52 |     content: "設定";
 53 |   }
 54 |   button.finish::after {
 55 |     content: "設定完成";
 56 |   }
 57 |   </style>
 58 | 
 59 |   <script src="../../../webcomponentsjs/webcomponents.js"></script>
 60 |   <link rel='import' href='../../web-arduino.html'></link>
 61 |   <link rel='import' href='../../wa-ultrasonic.html'></link>
 62 |   <link rel='import' href='../../wa-led.html'></link>
 63 | </head>
 64 | 
 65 | <body>
 66 |   <web-arduino id='board'>
 67 |     <wa-ultrasonic id='ultrasonic'></wa-ultrasonic>
 68 |     <wa-led id='led'></wa-led>
 69 |   </web-arduino>
 70 | 
 71 |   <audio id='player'>
 72 |     <source src="jigglypuff.mp3" type="audio/mpeg">
 73 |   </audio>
 74 | 
 75 |   <form>
 76 |     <label>arduino: device</label>
 77 |     <br>
 78 |     <input type="text" id="device" value="rm63">
 79 |     <br>
 80 | 
 81 |     <label>超音波: trig / echo</label>
 82 |     <br>
 83 |     <input type="text" id="trig" value="11">/
 84 |     <input type="text" id="echo" value="10">
 85 |     <br>
 86 | 
 87 |     <label>LED: pin / gnd</label>
 88 |     <br>
 89 |     <input type="text" id="pin" value="6">/
 90 |     <input type="text" id="gnd" value="8">
 91 |     <br>
 92 |     <button class="setting" id="set"></button>
 93 |   </form>
 94 | 
 95 |   <div id="control">
 96 |     <button id="start">啟動超音波</button>
 97 |     <button id="stop">關閉</button>
 98 |     <div class="msg"></div>
 99 |   </div>
100 | 
101 |   <div id="jigglypuff" class='ready'>
102 |     <img class="stand" src="stand.jpg">
103 |     <img class="sing" src="sing.gif">
104 |   </div>
105 | 
106 |   <script type="text/javascript">
107 |   window.addEventListener('WebComponentsReady', function() {
108 |     var board = document.getElementById('board'),
109 |       ultrasonic = document.getElementById('ultrasonic'),
110 |       led = document.getElementById('led'),
111 |       device = document.getElementById('device'),
112 |       trig = document.getElementById('trig'),
113 |       echo = document.getElementById('echo'),
114 |       pin = document.getElementById('pin'),
115 |       gnd = document.getElementById('gnd'),
116 |       setBtn = document.getElementById('set');
117 | 
118 |     setBtn.addEventListener('click', function(e) {
119 |       board.device = device.value;
120 |       ultrasonic.trig = trig.value;
121 |       ultrasonic.echo = echo.value;
122 |       led.pin = pin.value;
123 |       led.gnd = gnd.value;
124 |       board.on('ready', ready);
125 |       board.init();
126 |       e.preventDefault();
127 |       e.stopPropagation();
128 |       return false;
129 |     }, false);
130 | 
131 |     function ready() {
132 |       var state,
133 |         control = document.getElementById('control'),
134 |         start = document.getElementById('start'),
135 |         stop = document.getElementById('stop'),
136 |         ultrasonic = document.getElementById('ultrasonic'),
137 |         jigglypuff = document.getElementById('jigglypuff'),
138 |         led = document.getElementById('led'),
139 |         player = document.getElementById('player');
140 | 
141 |       // 示意 board ready
142 |       led.on();
143 |       setTimeout(function() {
144 |         led.off();
145 |       }, 1000);
146 | 
147 |       stop.addEventListener('click', function() {
148 |         var ultrasonic = document.getElementById('ultrasonic');
149 |         control.className = "";
150 |         jigglypuff.className = "ready";
151 |         led.off();
152 |         ultrasonic.stopPing();
153 |         player.load();
154 |         state = "";
155 |         console.log('stop ping');
156 |       });
157 | 
158 |       start.addEventListener('click', function() {
159 |         var ratio;
160 | 
161 |         control.className = "start";
162 |         state = "start";
163 | 
164 |         ultrasonic.ping(function(cm) {
165 |           // console.log(cm);
166 |           // 一公尺內唱歌、亮燈
167 |           if (state !== "start") {
168 |             return false;
169 |           } 
170 | 
171 |           if (control.className !== "starting") {
172 |             control.className = "starting";
173 |           }
174 | 
175 |           console.log('ping...', cm);
176 |           if (cm < 100) {
177 |             led.on();
178 |             player.play();
179 |             jigglypuff.className = "action";
180 | 
181 |             // 調整音量、亮度
182 |             ratio = getRatio(cm / 100, 0.25);
183 |             player.volume = ratio;
184 |             led.intensity = ratio;
185 |           } else {
186 |             led.off();
187 |             player.load();
188 |             jigglypuff.className = "ready";
189 |           }
190 |         }, 500);
191 | 
192 |       }, false);
193 |     }
194 | 
195 |     function getRatio(val, step) {
196 |       var ro;
197 | 
198 |       val = val < 0.05 ? 1 : (1 - val);
199 |       ro = Math.floor(val / step);
200 |       ro = ro * step;
201 |       return ro > 1 ? 1 : ro;
202 |     }
203 | 
204 |   }, false);
205 |   </script>
206 | </body>
207 | 
208 | </html>
209 | 


--------------------------------------------------------------------------------
/demo/jigglypuff/jigglypuff.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webduinoio/webduino/82ed174cddd8887238f2a056e084c3262ff3a92e/demo/jigglypuff/jigglypuff.mp3


--------------------------------------------------------------------------------
/demo/jigglypuff/sing.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webduinoio/webduino/82ed174cddd8887238f2a056e084c3262ff3a92e/demo/jigglypuff/sing.gif


--------------------------------------------------------------------------------
/demo/jigglypuff/stand.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webduinoio/webduino/82ed174cddd8887238f2a056e084c3262ff3a92e/demo/jigglypuff/stand.jpg


--------------------------------------------------------------------------------
/demo/joystick.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>搖捍(Joystick)</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-led.html'></link>
 11 |   <link rel='import' href='../wa-joystick.html'></link>
 12 |   <style>
 13 |   * {
 14 |     font-size: 20px;
 15 |   }
 16 | 
 17 |   #msg.default::after {
 18 |     content: "訊息";
 19 |   }
 20 |   
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   
 29 |   #msg.setting::after {
 30 |     content: "設定中...";
 31 |   }
 32 |   
 33 |   #msg.set::after {
 34 |     content: "設定完成";
 35 |   }
 36 |   
 37 |   input {
 38 |     width: 100px;
 39 |     margin: 5px 0;
 40 |   }
 41 |   
 42 |   button {
 43 |     margin: 5px 0;
 44 |   }
 45 | 
 46 |   .container {
 47 |     position: relative;
 48 |   }
 49 | 
 50 |   .msgContainer {
 51 |     position: absolute; 
 52 |     top: 0; 
 53 |     right: 0; 
 54 |     width: 60%;
 55 |   }
 56 |   
 57 |   #light img {
 58 |     width: 25%;
 59 |     display: none;
 60 |   }
 61 |   
 62 |   #light.off img:first-child {
 63 |     display: inline-block;
 64 |   }
 65 |   
 66 |   #light.on img:last-child {
 67 |     display: inline-block;
 68 |   }
 69 |   
 70 |   #msgRecv {
 71 |     word-break: break-all;
 72 |     height: 300px;
 73 |     width: 100%;
 74 |     overflow: auto;
 75 |   }
 76 |   
 77 |   #msgRecv::before {
 78 |     content: 'message:';
 79 |   }
 80 |   </style>
 81 | </head>
 82 | 
 83 | <body>
 84 |   <web-arduino id="board">
 85 |     <wa-led id='led' pin='9'></wa-led>
 86 |     <wa-joystick id='joystick' x='4' y='5' z='10'></wa-joystick>
 87 |   </web-arduino>
 88 |   <div id="msg" class="waiting"></div>
 89 |   <form>
 90 |     <label>device : </label>
 91 |     <input type="text" id="device">
 92 |     <button class="setting" id="set">設定</button>
 93 |   </form>
 94 |   <p>led pin : 9</p>
 95 |   <p>joystick, gnd, vcc, vrx analog pin : 4, vry analog pin : 5, sw pin : 10</p>
 96 |   <p>說明：
 97 |     <br>x, y 軸的值介於 0 ~ 1 之間，初始值約 0.5 上下。
 98 |     <br>z 為按鈕，值為 0, 1，按下時值為 1。
 99 |   </p>
100 | 
101 |   <div class="container">
102 |     <p>點擊燈炮，開始接收搖捍發出的訊息</p>
103 |     <div id='light' class="off">
104 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
105 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
106 |     </div>
107 |     <div class="msgContainer">
108 |       <button id='clearMsg'>clear message</button>
109 |       <br>
110 |       <div id='msgRecv'></div>
111 |     </div>
112 |   </div>
113 | 
114 |   <script>
115 |   window.addEventListener('WebComponentsReady', function() {
116 |     var board = document.getElementById('board');
117 |     var device = document.getElementById('device');
118 |     var light = document.getElementById('light');
119 |     var clearMsg = document.getElementById('clearMsg');
120 |     var msgRecv = document.getElementById('msgRecv');
121 |     var msg = document.getElementById('msg');
122 |     var setBtn = document.getElementById('set');
123 | 
124 |     device.setAttribute('value', localStorage.device || "");
125 | 
126 |     msg.className = "ready";
127 | 
128 |     setBtn.addEventListener('click', function(e) {
129 |       msg.className = "setting";
130 |       light.className = 'off';
131 |       msgRecv.innerHTML = '';
132 |       board.device = device.value;
133 |       localStorage.device = device.value;
134 |       board.on('ready', ready);
135 |       board.init();
136 |       e.stopPropagation();
137 |       e.preventDefault();
138 |       return false;
139 |     }, false);
140 | 
141 |     clearMsg.addEventListener('click', function() {
142 |       msgRecv.innerHTML = '';
143 |     });
144 | 
145 |     function ready() {
146 |       var led = document.getElementById('led');
147 |       var joystick = document.getElementById('joystick');
148 | 
149 |       light.addEventListener('click', function() {
150 |         if (light.className == 'on') {
151 |           light.className = 'off';
152 |           led.off();
153 |           joystick.off('message', read);
154 |         } else {
155 |           light.className = 'on';
156 |           led.on();
157 |           joystick.on('message', read);
158 |         }
159 |       }, false);
160 | 
161 |       msg.className = "set";
162 |     }
163 | 
164 |     function read(x, y, z) {
165 |       var msgRecv = document.getElementById('msgRecv');
166 |       var ss = document.createElement('span');
167 |       ss.innerHTML += '<br>';
168 |       ss.innerHTML += '<saan>, x: '+ x +'</span>';
169 |       ss.innerHTML += '<saan>, y: '+ y +'</span>';
170 |       ss.innerHTML += '<saan>, z: '+ z +'</span>';
171 |       ss.innerHTML += '<span>, ' + new Date().toLocaleTimeString() + '</span>';
172 |       msgRecv.insertBefore(ss, msgRecv.childNodes[0]);
173 |     }
174 |   });
175 |   </script>
176 | </body>
177 | 
178 | </html>
179 | 


--------------------------------------------------------------------------------
/demo/led.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>LED</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-led.html'></link>
 11 |   <style>
 12 |   * {
 13 |     font-size: 20px;
 14 |   }
 15 |   
 16 |   input, button {
 17 |     width: 100px;
 18 |     margin: 5px 0;
 19 |   }
 20 |   
 21 |   #msg.default::after {
 22 |     content: "訊息";
 23 |   }
 24 |   
 25 |   #msg.waiting::after {
 26 |     content: "Loading...";
 27 |   }
 28 |   
 29 |   #msg.ready::after {
 30 |     content: "Ready!";
 31 |   }
 32 |   
 33 |   #msg.setting::after {
 34 |     content: "設定中...";
 35 |   }
 36 |   
 37 |   #msg.set::after {
 38 |     content: "設定完成";
 39 |   }
 40 |   
 41 |   .btns {
 42 |     padding: 5px;
 43 |     font-size: 16px;
 44 |     width: 85px;
 45 |     color: #00AEFF;
 46 |   }
 47 |   
 48 |   .container {
 49 |     background-color: #f7f7f7;
 50 |     padding: 0 10px 20px 10px;
 51 |     border: 1px dotted #CCC;
 52 |     width: 270px;
 53 |     margin-top: 20px;
 54 |   }
 55 |   </style>
 56 | </head>
 57 | 
 58 | <body>
 59 |   <web-arduino id='board'>
 60 |     <wa-led id='led' pin='10'></wa-led>
 61 |   </web-arduino>
 62 |   <div id="msg" class="waiting"></div>
 63 |   <form>
 64 |     <label>device : </label>
 65 |     <input type="text" id="device">
 66 |     <button class="setting" id="set">設定</button>
 67 |   </form>
 68 |   <div class="container">
 69 |     <p>Use the buttons below to switch the LED to on or off.</p>
 70 |     <button id='on' class="btns" type="button">ON</button>
 71 |     <button id='off' class="btns" type="button">OFF</button>
 72 |     <button id='toggle' class="btns" type="button">TOGGLE</button>
 73 |   </div>
 74 |   <div class="container">
 75 |     <p>Set blink interval and click button to start blinking.</p>
 76 |     <label>Blink interval(ms): </label><input id="blink-interval" type="number" value="1000">
 77 |     <button id="blink" class="btns" type="button">BLINK</button>
 78 |   </div>
 79 |   <div class="container">
 80 |     <p>Change led state to on/off/blink (1000 as blink interval).</p>
 81 |     <label>Current State: </label><input id="ledstate">
 82 |     <button id="set-state" class="btns" type="button">SET</button>
 83 |   </div>
 84 |   <p>led pin : 10</p>
 85 |   <p>控制 LED</p>
 86 |   <p id='ledstatus'>none</p>
 87 |   <script>
 88 |   window.addEventListener('WebComponentsReady', function() {
 89 |     var board = document.getElementById('board'),
 90 |       msg = document.getElementById('msg'),
 91 |       device = document.getElementById('device'),
 92 |       led = document.getElementById('led'),
 93 |       setBtn = document.getElementById('set'),
 94 |       onBtn = document.getElementById('on'),
 95 |       offBtn = document.getElementById('off'),
 96 |       toggleBtn = document.getElementById('toggle'),
 97 |       ledstatus = document.getElementById('ledstatus'),
 98 |       blinkInterval = document.getElementById('blink-interval'),
 99 |       blinkBtn = document.getElementById('blink'),
100 |       ledstate = document.getElementById('ledstate'),
101 |       setStateBtn = document.getElementById('set-state');
102 | 
103 |     device.setAttribute('value', localStorage.device || "");
104 | 
105 |     msg.className = "ready";
106 | 
107 |     setBtn.addEventListener('click', function(e) {
108 |       msg.className = "setting";
109 |       board.device = device.value;
110 |       localStorage.device = device.value;
111 |       board.on('ready', ready);
112 |       board.init();
113 |       e.stopPropagation();
114 |       e.preventDefault();
115 |       return false;
116 |     }, false);
117 | 
118 |     function ready() {
119 |       // 示意 board ready
120 |       msg.className = "set";
121 |       run();
122 |     }
123 | 
124 |     function run() {
125 | 
126 |       var statecb = function() {
127 |         ledstate.value = led.state;
128 |         if(led.state === 'blink') {
129 |           ledstatus.innerHTML = (this._pin.value) ? "led blinks!(on)" : "led blinks!(off)";
130 |         }
131 |       };
132 |       statecb();
133 | 
134 |       onBtn.addEventListener('click', function(e) {
135 |         led.on(statecb);
136 |         ledstatus.innerHTML = "led on!";
137 |         e.stopPropagation();
138 |         e.preventDefault();
139 |         return false;
140 |       }, false);
141 | 
142 |       offBtn.addEventListener('click', function(e) {
143 |         led.off(statecb);
144 |         ledstatus.innerHTML = "led off!";
145 |         e.stopPropagation();
146 |         e.preventDefault();
147 |         return false;
148 |       }, false);
149 | 
150 |       toggleBtn.addEventListener('click', function(e) {
151 |         led.toggle(statecb);
152 |         ledstatus.innerHTML = "led toggle!";
153 |         e.stopPropagation();
154 |         e.preventDefault();
155 |         return false;
156 |       }, false);
157 | 
158 |       blinkBtn.addEventListener('click', function(e) {
159 |         led.blink(blinkInterval.value, statecb);
160 |         ledstatus.innerHTML = "led blinks!";
161 |         e.stopPropagation();
162 |         e.preventDefault();
163 |         return false;
164 |       }, false);
165 | 
166 |       setStateBtn.addEventListener('click', function(e) {
167 |         led.state = ledstate.value;
168 |         e.stopPropagation();
169 |         e.preventDefault();
170 |         return false;
171 |       }, false);
172 |     }
173 |   });
174 |   </script>
175 | </body>
176 | 
177 | </html>
178 | 


--------------------------------------------------------------------------------
/demo/max7219.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6 |   <title>點矩陣(max7219)</title>
  7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
  8 |   <link rel='import' href='../web-arduino.html'></link>
  9 |   <link rel='import' href='../wa-led.html'></link>
 10 |   <link rel='import' href='../wa-max7219.html'></link>
 11 |   <style>
 12 |   * {
 13 |     font-size: 20px;
 14 |   }
 15 | 
 16 |   #msg.default::after {
 17 |     content: "訊息";
 18 |   }
 19 |   
 20 |   #msg.waiting::after {
 21 |     content: "Loading...";
 22 |   }
 23 |   
 24 |   #msg.ready::after {
 25 |     content: "Ready!";
 26 |   }
 27 |   
 28 |   #msg.setting::after {
 29 |     content: "設定中...";
 30 |   }
 31 |   
 32 |   #msg.set::after {
 33 |     content: "設定完成";
 34 |   }
 35 |   
 36 |   input {
 37 |     width: 100px;
 38 |     margin: 5px 0;
 39 |   }
 40 |   
 41 |   button {
 42 |     margin: 5px 0;
 43 |   }
 44 | 
 45 |   #exec {
 46 |     display: block;
 47 |   }
 48 | 
 49 |   textarea {
 50 |     width: 20%;
 51 |     height: 20%;
 52 |     min-width: 200px;
 53 |     min-height: 200px;
 54 |   }
 55 |   
 56 |   </style>
 57 | </head>
 58 | 
 59 | <body>
 60 |   <web-arduino id='board'>
 61 |     <wa-led id='led' pin='11'></wa-led>
 62 |     <wa-max7219 id='max' din='11' cs='10' clk='9' state="on" data="006cd682c66c38c"></wa-max7219>
 63 |   </web-arduino>
 64 |   <div id="msg" class="waiting"></div>
 65 |   <form>
 66 |     <label>device : </label>
 67 |     <input type="text" id="device">
 68 |     <button class="setting" id="set">設定</button>
 69 |   </form>
 70 |   <p>led pin : 11</p>
 71 |   <p>max7219 din : 9, cs : 10, clk : 12</p>
 72 |   <a href='http://marty5499.github.io/webduino/max7219/genLED2.html' target="_blank">匯製代碼</a>
 73 |   <button id='exec' disabled>執行</button>
 74 |   <textarea id="dataInput">
 75 |     182424183c081c14,
 76 |     182424183c081c22,
 77 |     182424183c0a3c40,
 78 |     304848303c4a3c20,
 79 |     304848303c483c04  
 80 |   </textarea>
 81 |   <script>
 82 |   window.addEventListener('WebComponentsReady', function() {
 83 |     var board = document.getElementById('board');
 84 |     var device = document.getElementById('device');
 85 |     var led = document.getElementById('led');
 86 |     var max = document.getElementById('max');
 87 |     var msg = document.getElementById('msg');
 88 |     var setBtn = document.getElementById('set');
 89 |     var exec = document.getElementById('exec');
 90 |     var dataInput = document.getElementById('dataInput');
 91 | 
 92 |     device.setAttribute('value', localStorage.device || "");
 93 |     msg.className = "ready";
 94 | 
 95 |     setBtn.addEventListener('click', function(e) {
 96 |       setBtn.setAttribute('disabled', true);
 97 |       msg.className = "setting";
 98 |       board.device = device.value;
 99 |       localStorage.device = device.value;
100 |       board.on('ready', ready);
101 |       board.init();
102 |       e.stopPropagation();
103 |       e.preventDefault();
104 |       return false;
105 |     }, false);
106 | 
107 |     exec.addEventListener('click', function() {
108 |       if (!dataInput.value) {
109 |         return false;
110 |       } 
111 | 
112 |       var data = dataInput.value.replace(/\s/g, '').split(',');
113 |       max.animate(data, 200, 5000, function() {
114 |         console.log('結束');
115 |       });
116 |     }, false);
117 | 
118 |     function ready() {
119 |       msg.className = "set";
120 |       exec.removeAttribute('disabled');
121 |       led.on();
122 |     }
123 | 
124 |   });
125 |   </script>
126 | </body>
127 | 
128 | </html>
129 | 


--------------------------------------------------------------------------------
/demo/mq2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>氣體傳感器(mq2)</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-led.html'></link>
 11 |   <link rel='import' href='../wa-mq2.html'></link>
 12 |   <style>
 13 |   * {
 14 |     font-size: 20px;
 15 |   }
 16 | 
 17 |   #msg.default::after {
 18 |     content: "訊息";
 19 |   }
 20 |   
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   
 29 |   #msg.setting::after {
 30 |     content: "設定中...";
 31 |   }
 32 |   
 33 |   #msg.set::after {
 34 |     content: "設定完成";
 35 |   }
 36 |   
 37 |   input {
 38 |     width: 100px;
 39 |     margin: 5px 0;
 40 |   }
 41 |   
 42 |   button {
 43 |     margin: 5px 0;
 44 |   }
 45 | 
 46 |   .container {
 47 |     position: relative;
 48 |   }
 49 | 
 50 |   .msgContainer {
 51 |     position: absolute; 
 52 |     top: 0; 
 53 |     right: 0; 
 54 |     width: 60%;
 55 |   }
 56 |   
 57 |   #light img {
 58 |     width: 25%;
 59 |     display: none;
 60 |   }
 61 |   
 62 |   #light.off img:first-child {
 63 |     display: inline-block;
 64 |   }
 65 |   
 66 |   #light.on img:last-child {
 67 |     display: inline-block;
 68 |   }
 69 |   
 70 |   #msgRecv {
 71 |     word-break: break-all;
 72 |     height: 300px;
 73 |     width: 100%;
 74 |     overflow: auto;
 75 |   }
 76 |   
 77 |   #msgRecv::before {
 78 |     content: 'message:';
 79 |   }
 80 |   </style>
 81 | </head>
 82 | 
 83 | <body>
 84 |   <web-arduino id="board">
 85 |     <wa-led id="led" pin="9"></wa-led>
 86 |     <wa-mq2 id="mq2" analogpin="5"></wa-mq2>
 87 |   </web-arduino>
 88 |   <div id="msg" class="waiting"></div>
 89 |   <form>
 90 |     <label>device : </label>
 91 |     <input type="text" id="device">
 92 |     <button class="setting" id="set">設定</button>
 93 |   </form>
 94 |   <p>led pin : 9</p>
 95 |   <p>mq2 analog pin : 5</p>
 96 |   <p>說明：
 97 |     <br>值介於 0 ~ 1 之間，偵測瓦斯/煙霧的量愈多，數字愈大。
 98 |     <br>這裡的範例，使用類比腳來偵測，也可以使用數位腳的方式。
 99 |     <br>也就是 DO 接上數位腳後，採用下方被註解的程式碼。
100 |     <br>盡量不同時使用二者，有機會掛掉。
101 |   </p>
102 | 
103 |   <div class="container">
104 |     <p>點擊燈炮，啟動光敏電阻</p>
105 |     <div id='light' class="off">
106 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
107 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
108 |     </div>
109 |     <div class="msgContainer">
110 |       <button id='clearMsg'>clear message</button>
111 |       <br>
112 |       <div id='msgRecv'></div>
113 |     </div>
114 |   </div>
115 | 
116 |   <script>
117 |   window.addEventListener('WebComponentsReady', function() {
118 |     var board = document.getElementById('board');
119 |     var device = document.getElementById('device');
120 |     var light = document.getElementById('light');
121 |     var clearMsg = document.getElementById('clearMsg');
122 |     var msgRecv = document.getElementById('msgRecv');
123 |     var msg = document.getElementById('msg');
124 |     var setBtn = document.getElementById('set');
125 | 
126 |     device.setAttribute('value', localStorage.device || "");
127 | 
128 |     msg.className = "ready";
129 | 
130 |     setBtn.addEventListener('click', function(e) {
131 |       msg.className = "setting";
132 |       light.className = 'off';
133 |       msgRecv.innerHTML = '';
134 |       board.device = device.value;
135 |       localStorage.device = device.value;
136 |       board.on('ready', ready);
137 |       board.init();
138 |       e.stopPropagation();
139 |       e.preventDefault();
140 |       return false;
141 |     }, false);
142 | 
143 |     clearMsg.addEventListener('click', function() {
144 |       msgRecv.innerHTML = '';
145 |     });
146 | 
147 |     function ready() {
148 |       var led = document.getElementById('led');
149 |       var mq2 = document.getElementById('mq2');
150 | 
151 |       light.addEventListener('click', function() {
152 |         if (light.className == 'on') {
153 |           light.className = 'off';
154 |           led.off();
155 |           mq2.off();
156 |           // mq2.off('detected', detected);
157 |         } else {
158 |           light.className = 'on';
159 |           led.on();
160 |           mq2.on(success);
161 |           // mq2.on('detected', detected);
162 |         }
163 |       }, false);
164 | 
165 |       msg.className = "set";
166 |     }
167 | 
168 |     function success(val) {
169 |       var msgRecv = document.getElementById('msgRecv');
170 |       var ss = document.createElement('span');
171 |       ss.innerHTML += '<br>';
172 |       ss.innerHTML += val;
173 |       ss.innerHTML += '<span>, ' + new Date().toLocaleTimeString() + '</span>';
174 |       msgRecv.insertBefore(ss, msgRecv.childNodes[0]);
175 |     }
176 | 
177 |     // function detected() {
178 |     //   var msgRecv = document.getElementById('msgRecv');
179 |     //   var ss = document.createElement('span');
180 |     //   ss.innerHTML += '<br>';
181 |     //   ss.innerHTML += 'detected...';
182 |     //   msgRecv.insertBefore(ss, msgRecv.childNodes[0]);
183 |     // }
184 |   });
185 |   </script>
186 | </body>
187 | 
188 | </html>
189 | 


--------------------------------------------------------------------------------
/demo/oled.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6 |   <title>OLED(SSD1306)</title>
 7 |   <script src="../../webcomponentsjs/webcomponents.min.js"></script>
 8 |   <link rel='import' href='../web-arduino.html'></link>
 9 |   <link rel='import' href='../wa-ssd1306.html'></link>
10 | </head>
11 | 
12 | <body>
13 |   <web-arduino id='board' device="10X417v3">
14 |     <wa-ssd1306 id='display' x='0' y='0' textSize='2' text="OLED Test">
15 |     </wa-ssd1306>
16 |   </web-arduino>
17 |   <script>
18 |   window.addEventListener('WebComponentsReady', function() {
19 |     var board = document.getElementById('board');
20 |     board.on('ready', function() {
21 |       console.log("board ready...");
22 |       display.textSize = 4;
23 |       display.print(40, 30, "OK");
24 |     });
25 |   });
26 |   </script>
27 | </body>
28 | 
29 | </html>


--------------------------------------------------------------------------------
/demo/photocell.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>光敏電阻(photocell)</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-led.html'></link>
 11 |   <link rel='import' href='../wa-photocell.html'></link>
 12 |   <style>
 13 |   * {
 14 |     font-size: 20px;
 15 |   }
 16 | 
 17 |   #msg.default::after {
 18 |     content: "訊息";
 19 |   }
 20 |   
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   
 29 |   #msg.setting::after {
 30 |     content: "設定中...";
 31 |   }
 32 |   
 33 |   #msg.set::after {
 34 |     content: "設定完成";
 35 |   }
 36 |   
 37 |   input {
 38 |     width: 100px;
 39 |     margin: 5px 0;
 40 |   }
 41 |   
 42 |   button {
 43 |     margin: 5px 0;
 44 |   }
 45 | 
 46 |   .container {
 47 |     position: relative;
 48 |   }
 49 | 
 50 |   .msgContainer {
 51 |     position: absolute; 
 52 |     top: 0; 
 53 |     right: 0; 
 54 |     width: 60%;
 55 |   }
 56 |   
 57 |   #light img {
 58 |     width: 25%;
 59 |     display: none;
 60 |   }
 61 |   
 62 |   #light.off img:first-child {
 63 |     display: inline-block;
 64 |   }
 65 |   
 66 |   #light.on img:last-child {
 67 |     display: inline-block;
 68 |   }
 69 |   
 70 |   #msgRecv {
 71 |     word-break: break-all;
 72 |     height: 300px;
 73 |     width: 100%;
 74 |     overflow: auto;
 75 |   }
 76 |   
 77 |   #msgRecv::before {
 78 |     content: 'message:';
 79 |   }
 80 |   </style>
 81 | </head>
 82 | 
 83 | <body>
 84 |   <web-arduino id="board">
 85 |     <wa-led id='led' pin='9'></wa-led>
 86 |     <wa-photocell id='photocell' analogpin='5'></wa-photocell>
 87 |   </web-arduino>
 88 |   <div id="msg" class="waiting"></div>
 89 |   <form>
 90 |     <label>device : </label>
 91 |     <input type="text" id="device">
 92 |     <button class="setting" id="set">設定</button>
 93 |   </form>
 94 |   <p>led pin : 9</p>
 95 |   <p>photocell analog pin : 5</p>
 96 |   <p>說明：
 97 |     <br>值介於 0 ~ 1 之間，偵測的環境愈亮，數字愈大。
 98 |   </p>
 99 | 
100 |   <div class="container">
101 |     <p>點擊燈炮，啟動光敏電阻</p>
102 |     <div id='light' class="off">
103 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
104 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
105 |     </div>
106 |     <div class="msgContainer">
107 |       <button id='clearMsg'>clear message</button>
108 |       <br>
109 |       <div id='msgRecv'></div>
110 |     </div>
111 |   </div>
112 | 
113 |   <script>
114 |   window.addEventListener('WebComponentsReady', function() {
115 |     var board = document.getElementById('board');
116 |     var device = document.getElementById('device');
117 |     var light = document.getElementById('light');
118 |     var clearMsg = document.getElementById('clearMsg');
119 |     var msgRecv = document.getElementById('msgRecv');
120 |     var msg = document.getElementById('msg');
121 |     var setBtn = document.getElementById('set');
122 | 
123 |     device.setAttribute('value', localStorage.device || "");
124 | 
125 |     msg.className = "ready";
126 | 
127 |     setBtn.addEventListener('click', function(e) {
128 |       msg.className = "setting";
129 |       light.className = 'off';
130 |       msgRecv.innerHTML = '';
131 |       board.device = device.value;
132 |       localStorage.device = device.value;
133 |       board.on('ready', ready);
134 |       board.init();
135 |       e.stopPropagation();
136 |       e.preventDefault();
137 |       return false;
138 |     }, false);
139 | 
140 |     clearMsg.addEventListener('click', function() {
141 |       msgRecv.innerHTML = '';
142 |     });
143 | 
144 |     function ready() {
145 |       var led = document.getElementById('led');
146 |       var photocell = document.getElementById('photocell');
147 | 
148 |       light.addEventListener('click', function() {
149 |         if (light.className == 'on') {
150 |           light.className = 'off';
151 |           led.off();
152 |           photocell.off();
153 |         } else {
154 |           light.className = 'on';
155 |           led.on();
156 |           photocell.on(success);
157 |         }
158 |       }, false);
159 | 
160 |       msg.className = "set";
161 |     }
162 | 
163 |     function success(val) {
164 |       var msgRecv = document.getElementById('msgRecv');
165 |       var ss = document.createElement('span');
166 |       ss.innerHTML += '<br>';
167 |       ss.innerHTML += val;
168 |       ss.innerHTML += '<span>, ' + new Date().toLocaleTimeString() + '</span>';
169 |       msgRecv.insertBefore(ss, msgRecv.childNodes[0]);
170 |     }
171 |   });
172 |   </script>
173 | </body>
174 | 
175 | </html>
176 | 


--------------------------------------------------------------------------------
/demo/pir.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>pir</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-pir.html'></link>
 11 |   <link rel='import' href='../wa-led.html'></link>
 12 |   <style>
 13 |   * {
 14 |     font-size: 20px;
 15 |   }
 16 |   
 17 |   #msg.default::after {
 18 |     content: "訊息";
 19 |   }
 20 |   
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   
 29 |   #msg.setting::after {
 30 |     content: "設定中...";
 31 |   }
 32 |   
 33 |   #msg.set::after {
 34 |     content: "設定完成";
 35 |   }
 36 |   </style>
 37 | </head>
 38 | 
 39 | <body>
 40 |   <web-arduino id='board'>
 41 |     <wa-pir id='pir' pin='9'></wa-pir>
 42 |     <wa-led id='led' pin='6'></wa-led>
 43 |   </web-arduino>
 44 |   <div id="msg" class="waiting"></div>
 45 |   <form>
 46 |     <label>device : </label>
 47 |     <input type="text" id="device">
 48 |     <button class="setting" id="set">設定</button>
 49 |   </form>
 50 |   <p>Led pin : 6</p>
 51 |   <p>Pir pin : 9</p>
 52 |   <p>利用人體紅外線感應，讓 Led 亮起來。</p>
 53 |   <p id='ledstatus'>none</p>
 54 |   <script>
 55 |   window.addEventListener('WebComponentsReady', function() {
 56 |     var board = document.getElementById('board'),
 57 |       msg = document.getElementById('msg'),
 58 |       device = document.getElementById('device'),
 59 |       pir = document.getElementById('pir'),
 60 |       led = document.getElementById('led'),
 61 |       setBtn = document.getElementById('set'),
 62 |       ledstatus = document.getElementById('ledstatus'),
 63 |       times = 0;
 64 | 
 65 |     device.setAttribute('value', localStorage.device || "");
 66 |     msg.className = "ready";
 67 | 
 68 |     setBtn.addEventListener('click', function(e) {
 69 |       msg.className = "setting";
 70 |       board.device = device.value;
 71 |       localStorage.device = device.value;
 72 |       board.on('ready', ready);
 73 |       board.init();
 74 |       e.stopPropagation();
 75 |       e.preventDefault();
 76 |       return false;
 77 |     }, false);
 78 | 
 79 |     function ready() {
 80 |       // 示意 board ready
 81 |       msg.className = "set";
 82 |       run();
 83 |     }
 84 | 
 85 |     function run(times) {
 86 |       pir.on('detected', function() {
 87 |         led.on();
 88 |         ledstatus.innerHTML = "LED on!" + ++times;
 89 |       });
 90 |       pir.on('ended', function() {
 91 |         led.off();
 92 |         ledstatus.innerHTML = "LED off!" + ++times;
 93 |       });
 94 |     }
 95 |   });
 96 |   </script>
 97 | </body>
 98 | 
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/demo/pot.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>可變電組(pot: potentiometer)</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-led.html'></link>
 11 |   <link rel='import' href='../wa-pot.html'></link>
 12 |   <style>
 13 |   * {
 14 |     font-size: 20px;
 15 |   }
 16 | 
 17 |   #msg.default::after {
 18 |     content: "訊息";
 19 |   }
 20 |   
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   
 29 |   #msg.setting::after {
 30 |     content: "設定中...";
 31 |   }
 32 |   
 33 |   #msg.set::after {
 34 |     content: "設定完成";
 35 |   }
 36 |   
 37 |   input {
 38 |     width: 100px;
 39 |     margin: 5px 0;
 40 |   }
 41 |   
 42 |   button {
 43 |     margin: 5px 0;
 44 |   }
 45 | 
 46 |   .container {
 47 |     position: relative;
 48 |   }
 49 | 
 50 |   .msgContainer {
 51 |     position: absolute; 
 52 |     top: 0; 
 53 |     right: 0; 
 54 |     width: 60%;
 55 |   }
 56 |   
 57 |   #light img {
 58 |     width: 25%;
 59 |     display: none;
 60 |   }
 61 |   
 62 |   #light.off img:first-child {
 63 |     display: inline-block;
 64 |   }
 65 |   
 66 |   #light.on img:last-child {
 67 |     display: inline-block;
 68 |   }
 69 |   
 70 |   #msgRecv {
 71 |     word-break: break-all;
 72 |     height: 300px;
 73 |     width: 100%;
 74 |     overflow: auto;
 75 |   }
 76 |   
 77 |   #msgRecv::before {
 78 |     content: 'message:';
 79 |   }
 80 |   </style>
 81 | </head>
 82 | 
 83 | <body>
 84 |   <web-arduino id="board">
 85 |     <wa-led id='led' pin='9'></wa-led>
 86 |     <wa-pot id='pot' analogpin='5'></wa-pot>
 87 |   </web-arduino>
 88 |   <div id="msg" class="waiting"></div>
 89 |   <form>
 90 |     <label>device : </label>
 91 |     <input type="text" id="device">
 92 |     <button class="setting" id="set">設定</button>
 93 |   </form>
 94 |   <p>led pin : 9</p>
 95 |   <p>pot analog pin : 5</p>
 96 |   <p>說明：
 97 |     <br>值介於 0 ~ 1 之間。
 98 |   </p>
 99 | 
100 |   <div class="container">
101 |     <p>點擊燈炮，啟動可變電阻</p>
102 |     <div id='light' class="off">
103 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
104 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
105 |     </div>
106 |     <div class="msgContainer">
107 |       <button id='clearMsg'>clear message</button>
108 |       <br>
109 |       <div id='msgRecv'></div>
110 |     </div>
111 |   </div>
112 | 
113 |   <script>
114 |   window.addEventListener('WebComponentsReady', function() {
115 |     var board = document.getElementById('board');
116 |     var device = document.getElementById('device');
117 |     var light = document.getElementById('light');
118 |     var clearMsg = document.getElementById('clearMsg');
119 |     var msgRecv = document.getElementById('msgRecv');
120 |     var msg = document.getElementById('msg');
121 |     var setBtn = document.getElementById('set');
122 | 
123 |     device.setAttribute('value', localStorage.device || "");
124 | 
125 |     msg.className = "ready";
126 | 
127 |     setBtn.addEventListener('click', function(e) {
128 |       msg.className = "setting";
129 |       light.className = 'off';
130 |       msgRecv.innerHTML = '';
131 |       board.device = device.value;
132 |       localStorage.device = device.value;
133 |       board.on('ready', ready);
134 |       board.init();
135 |       e.stopPropagation();
136 |       e.preventDefault();
137 |       return false;
138 |     }, false);
139 | 
140 |     clearMsg.addEventListener('click', function() {
141 |       msgRecv.innerHTML = '';
142 |     });
143 | 
144 |     function ready() {
145 |       var led = document.getElementById('led');
146 |       var pot = document.getElementById('pot');
147 | 
148 |       light.addEventListener('click', function() {
149 |         if (light.className == 'on') {
150 |           light.className = 'off';
151 |           led.off();
152 |           pot.off();
153 |         } else {
154 |           light.className = 'on';
155 |           led.on();
156 |           pot.on(success);
157 |         }
158 |       }, false);
159 | 
160 |       msg.className = "set";
161 |     }
162 | 
163 |     function success(val) {
164 |       var msgRecv = document.getElementById('msgRecv');
165 |       var ss = document.createElement('span');
166 |       ss.innerHTML += '<br>';
167 |       ss.innerHTML += val;
168 |       ss.innerHTML += '<span>, ' + new Date().toLocaleTimeString() + '</span>';
169 |       msgRecv.insertBefore(ss, msgRecv.childNodes[0]);
170 |     }
171 |   });
172 |   </script>
173 | </body>
174 | 
175 | </html>
176 | 


--------------------------------------------------------------------------------
/demo/push.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 6 |   <link rel='import' href='../web-arduino.html'></link>
 7 |   <link rel='import' href='../wa-button.html'></link>
 8 |   <link rel='import' href='../wa-led.html'></link>
 9 | </head>
10 | 
11 | <body>
12 |   <web-arduino id='board'>
13 |     <wa-button id='button' pin='11'></wa-button>
14 |     <wa-led id='led' pin='10'></wa-led>
15 |   </web-arduino>
16 | 
17 |   <h1 id='msg'></h1>
18 |   <button id='btn'>Click Me</button>
19 | 
20 |   <script>
21 |   window.addEventListener('WebComponentsReady', function() {
22 |     var board = document.getElementById('board');
23 | 
24 |     board.on('ready', function() {
25 |       var button = document.getElementById('button'),
26 |         led = document.getElementById('led'),
27 |         btn = document.getElementById('btn');
28 | 
29 |       button.on('pressed', function() {
30 |         led.toggle();
31 |       });
32 | 
33 |       btn.addEventListener('click', function() {
34 |         led.toggle();
35 |       }, false);
36 |     });
37 |   }, false);
38 |   </script>
39 | </body>
40 | 
41 | </html>
42 | 


--------------------------------------------------------------------------------
/demo/relay.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>relay</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-relay.html'></link>
 11 |   <style>
 12 |   * {
 13 |     font-size: 20px;
 14 |   }
 15 |   
 16 |   #msg.default::after {
 17 |     content: "訊息";
 18 |   }
 19 |   
 20 |   #msg.waiting::after {
 21 |     content: "Loading...";
 22 |   }
 23 |   
 24 |   #msg.ready::after {
 25 |     content: "Ready!";
 26 |   }
 27 |   
 28 |   #msg.setting::after {
 29 |     content: "設定中...";
 30 |   }
 31 |   
 32 |   #msg.set::after {
 33 |     content: "設定完成";
 34 |   }
 35 |   
 36 |   .btns {
 37 |     padding: 5px;
 38 |     font-size: 16px;
 39 |     width: 85px;
 40 |     color: #00AEFF;
 41 |   }
 42 |   
 43 |   .container {
 44 |     background-color: #f7f7f7;
 45 |     padding: 0 10px 20px 10px;
 46 |     border: 1px dotted #CCC;
 47 |     width: 270px;
 48 |     margin-top: 20px;
 49 |   }
 50 |   </style>
 51 | </head>
 52 | 
 53 | <body>
 54 |   <web-arduino id='board'>
 55 |     <wa-relay id='relay' pin='10'></wa-relay>
 56 |   </web-arduino>
 57 |   <div id="msg" class="waiting"></div>
 58 |   <form>
 59 |     <label>device : </label>
 60 |     <input type="text" id="device">
 61 |     <button class="setting" id="set">設定</button>
 62 |   </form>
 63 |   <div class="container">
 64 |     <p>Use the buttons below to switch the Relay to on or off.</p>
 65 |     <button id='on' class="btns" type="button">ON</button>
 66 |     <button id='off' class="btns" type="button">OFF</button>
 67 |     <button id='toggle' class="btns" type="button">TOGGLE</button>
 68 |   </div>
 69 |   <p>relay pin : 10</p>
 70 |   <p>利用繼電器，控制電燈。</p>
 71 |   <p id='ledstatus'>none</p>
 72 |   <script>
 73 |   window.addEventListener('WebComponentsReady', function() {
 74 |     var board = document.getElementById('board'),
 75 |       msg = document.getElementById('msg'),
 76 |       device = document.getElementById('device'),
 77 |       relay = document.getElementById('relay'),
 78 |       setBtn = document.getElementById('set'),
 79 |       onBtn = document.getElementById('on'),
 80 |       offBtn = document.getElementById('off'),
 81 |       toggleBtn = document.getElementById('toggle'),
 82 |       ledstatus = document.getElementById('ledstatus');
 83 | 
 84 |     device.setAttribute('value', localStorage.device || "");
 85 | 
 86 |     msg.className = "ready";
 87 | 
 88 |     setBtn.addEventListener('click', function(e) {
 89 |       msg.className = "setting";
 90 |       board.device = device.value;
 91 |       localStorage.device = device.value;
 92 |       board.on('ready', ready);
 93 |       board.init();
 94 |       e.stopPropagation();
 95 |       e.preventDefault();
 96 |       return false;
 97 |     }, false);
 98 | 
 99 |     function ready() {
100 |       // 示意 board ready
101 |       msg.className = "set";
102 |       run();
103 |     }
104 | 
105 |     function run() {
106 |       onBtn.addEventListener('click', function(e) {
107 |         relay.on();
108 |         ledstatus.innerHTML = "Relay on!";
109 |         e.stopPropagation();
110 |         e.preventDefault();
111 |         return false;
112 |       }, false);
113 | 
114 |       offBtn.addEventListener('click', function(e) {
115 |         relay.off();
116 |         ledstatus.innerHTML = "Relay off!";
117 |         e.stopPropagation();
118 |         e.preventDefault();
119 |         return false;
120 |       }, false);
121 | 
122 |       toggleBtn.addEventListener('click', function(e) {
123 |         relay.toggle();
124 |         ledstatus.innerHTML = "Relay toggle!";
125 |         e.stopPropagation();
126 |         e.preventDefault();
127 |         return false;
128 |       }, false);
129 |     }
130 |   });
131 |   </script>
132 | </body>
133 | 
134 | </html>
135 | 


--------------------------------------------------------------------------------
/demo/rfid.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>RFID(RC522)</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-rfid.html'></link>
 11 |   <style>
 12 |   * {
 13 |     font-size: 20px;
 14 |   }
 15 | 
 16 |   #msg.default::after {
 17 |     content: "訊息";
 18 |   }
 19 |   
 20 |   #msg.waiting::after {
 21 |     content: "Loading...";
 22 |   }
 23 |   
 24 |   #msg.ready::after {
 25 |     content: "Ready!";
 26 |   }
 27 |   
 28 |   #msg.setting::after {
 29 |     content: "設定中...";
 30 |   }
 31 |   
 32 |   #msg.set::after {
 33 |     content: "設定完成";
 34 |   }
 35 |   
 36 |   input {
 37 |     width: 100px;
 38 |     margin: 5px 0;
 39 |   }
 40 |   
 41 |   button {
 42 |     margin: 5px 0;
 43 |   }
 44 | 
 45 |   .container {
 46 |     position: relative;
 47 |   }
 48 | 
 49 |   .msgContainer {
 50 |     position: absolute; 
 51 |     top: 0; 
 52 |     right: 0; 
 53 |     width: 60%;
 54 |   }
 55 |   
 56 |   #light img {
 57 |     width: 25%;
 58 |     display: none;
 59 |   }
 60 |   
 61 |   #light.off img:first-child {
 62 |     display: inline-block;
 63 |   }
 64 |   
 65 |   #light.on img:last-child {
 66 |     display: inline-block;
 67 |   }
 68 |   
 69 |   #msgRecv {
 70 |     word-break: break-all;
 71 |     height: 300px;
 72 |     width: 100%;
 73 |     overflow: auto;
 74 |   }
 75 |   
 76 |   #msgRecv::before {
 77 |     content: 'message:';
 78 |   }
 79 |   </style>
 80 | </head>
 81 | 
 82 | <body>
 83 |   <web-arduino id="board">
 84 |     <wa-rfid id='rfid'></wa-rfid>
 85 |   </web-arduino>
 86 |   <div id="msg" class="waiting"></div>
 87 |   <form>
 88 |     <label>device : </label>
 89 |     <input type="text" id="device">
 90 |     <button class="setting" id="set">設定</button>
 91 |   </form>
 92 |   <p>接線：3.3v 和 gnd 及 SDA(10), MOSI(11), MISO(12), SCK(13)</p>
 93 |   <p>說明：
 94 |     <br>接收到訊號時，會拋出字串，訊號源離開時，會收到空字串。
 95 |   </p>
 96 | 
 97 |   <div class="container">
 98 |     <p>點擊燈炮亮起，啟動 RFID，熄燈則關閉 RFID</p>
 99 |     <div id='light' class="off">
100 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
101 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
102 |     </div>
103 |     <div class="msgContainer">
104 |       <button id='clearMsg'>clear message</button>
105 |       <br>
106 |       <div id='msgRecv'></div>
107 |     </div>
108 |   </div>
109 | 
110 |   <script>
111 |   window.addEventListener('WebComponentsReady', function() {
112 |     var board = document.getElementById('board');
113 |     var device = document.getElementById('device');
114 |     var light = document.getElementById('light');
115 |     var clearMsg = document.getElementById('clearMsg');
116 |     var msgRecv = document.getElementById('msgRecv');
117 |     var msg = document.getElementById('msg');
118 |     var setBtn = document.getElementById('set');
119 | 
120 |     // 使用 localStorage 記錄 device id
121 |     device.setAttribute('value', localStorage.device || "");
122 | 
123 |     msg.className = "ready";
124 | 
125 |     setBtn.addEventListener('click', function(e) {
126 |       msg.className = "setting";
127 |       light.className = 'off';
128 |       msgRecv.innerHTML = '';
129 |       board.device = device.value;
130 |       localStorage.device = device.value;
131 |       board.on('ready', ready);
132 |       board.init();
133 |       e.stopPropagation();
134 |       e.preventDefault();
135 |       return false;
136 |     }, false);
137 | 
138 |     // 清除訊息
139 |     clearMsg.addEventListener('click', function() {
140 |       msgRecv.innerHTML = '';
141 |     });
142 | 
143 |     function ready() {
144 |       var rfid = document.getElementById('rfid');
145 | 
146 |       light.addEventListener('click', function() {
147 |         if (light.className == 'on') {
148 |           light.className = 'off';
149 |           rfid.stopListen();
150 |         } else {
151 |           light.className = 'on';
152 |           rfid.listen(success, success);
153 |         }
154 |       }, false);
155 | 
156 |       msg.className = "set";
157 |     }
158 | 
159 |     function success(val) {
160 |       var msgRecv = document.getElementById('msgRecv');
161 |       var ss = document.createElement('span');
162 |       ss.innerHTML += '<br>';
163 |       ss.innerHTML += val;
164 |       ss.innerHTML += '<span>, ' + new Date().toLocaleTimeString() + '</span>';
165 |       msgRecv.insertBefore(ss, msgRecv.childNodes[0]);
166 |     }
167 |   });
168 |   </script>
169 | </body>
170 | 
171 | </html>
172 | 


--------------------------------------------------------------------------------
/demo/rgbled.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 6 |   <link rel='import' href='../web-arduino.html'></link>
 7 |   <link rel='import' href='../wa-rgbled.html'></link>
 8 | </head>
 9 | 
10 | <body>
11 |   <web-arduino id='board'>
12 |     <wa-rgbled id='rgb' red='6' green='8' blue='7'></wa-rgbled>
13 |   </web-arduino>
14 | 
15 |   <button id='redBtn'>red</button>
16 |   <button id='greenBtn'>green</button>
17 |   <button id='blueBtn'>blue</button>
18 | 
19 |   <script>
20 |   window.addEventListener('WebComponentsReady', function() {
21 |     var board = document.getElementById('board');
22 |     
23 |     board.on('ready', function() {
24 |       var redBtn = document.getElementById('redBtn'),
25 |         greenBtn = document.getElementById('greenBtn'),
26 |         blueBtn = document.getElementById('blueBtn'),
27 |         rgb = document.getElementById('rgb');
28 | 
29 |       redBtn.addEventListener('click', function() {
30 |         rgb.setColor(255, 0, 0); // red , green , blue
31 |       }, false);
32 | 
33 |       greenBtn.addEventListener('click', function() {
34 |         rgb.setColor(0, 255, 0); // red , green , blue
35 |       }, false);
36 | 
37 |       blueBtn.addEventListener('click', function() {
38 |         rgb.setColor(0, 0, 255); // red , green , blue
39 |       }, false);
40 |     });
41 |   }, false);
42 |   </script>
43 | </body>
44 | 
45 | </html>
46 | 


--------------------------------------------------------------------------------
/demo/servo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>servo</title>
  8 | 
  9 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 10 |   <link rel='import' href='../web-arduino.html'></link>
 11 |   <link rel='import' href='../wa-servo.html'></link>
 12 | 
 13 |   <style>
 14 |   * {
 15 |     font-size: 20px;
 16 |   }
 17 | 
 18 |   #msg.default::after {
 19 |     content: "訊息";
 20 |   }
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   #msg.ready::after {
 25 |     content: "Ready!";
 26 |   }
 27 |   #msg.setting::after {
 28 |     content: "設定中...";
 29 |   }
 30 |   #msg.set::after {
 31 |     content: "設定完成";
 32 |   }
 33 |   </style>
 34 | </head>
 35 | 
 36 | <body>
 37 |   <web-arduino id='board'>
 38 |     <wa-servo id='servo' pin='9'></wa-servo>
 39 |   </web-arduino>
 40 | 
 41 |   <div id="msg" class="waiting"></div>
 42 | 
 43 |   <form>
 44 |     <label>device : </label><input type="text" id="device" value="Mnw4">
 45 |     <button class="setting" id="set">設定</button>
 46 |     <button class="setting" id="run">繼續</button>
 47 |   </form>
 48 | 
 49 |   <script>
 50 |   window.addEventListener('WebComponentsReady', function() {
 51 |     var board = document.getElementById('board'),
 52 |       msg = document.getElementById('msg'),
 53 |       device = document.getElementById('device'),
 54 |       servo = document.getElementById('servo'),
 55 |       setBtn = document.getElementById('set'),
 56 |       runBtn = document.getElementById('run');
 57 | 
 58 |     msg.className = "ready";
 59 | 
 60 |     setBtn.addEventListener('click', function(e) {
 61 |       msg.className = "setting";
 62 |       board.device = device.value;
 63 |       board.on('ready', ready);
 64 |       board.init();
 65 |       e.stopPropagation();
 66 |       e.preventDefault();
 67 |       return false;
 68 |     }, false);
 69 | 
 70 |     runBtn.addEventListener('click', function(e) {
 71 |       run(20);
 72 |       e.stopPropagation();
 73 |       e.preventDefault();
 74 |       return false;
 75 |     });
 76 | 
 77 |     function ready() {
 78 |       // 示意 board ready
 79 |       msg.className = "set";
 80 |       run(20);
 81 |     }
 82 | 
 83 |     function run(times) {
 84 |       var DIST = 90,
 85 |         TIMES = 1000,
 86 |         count = 0,
 87 |         dist = DIST;
 88 | 
 89 |       setTimeout(function rd() {
 90 |         var angle = parseInt(servo.angle);
 91 | 
 92 |         count++;
 93 | 
 94 |         if (angle === 0 || angle === 180) {
 95 |           dist = dist > 0 ? -DIST : DIST;
 96 |         } 
 97 | 
 98 |         angle += dist;
 99 |         servo.angle = angle;
100 | 
101 |         if (count < times ) {
102 |           setTimeout(rd, TIMES);
103 |         }
104 |       }, TIMES);
105 |     }
106 |   });
107 |   </script>
108 | </body>
109 | 
110 | </html>
111 | 


--------------------------------------------------------------------------------
/demo/shock.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>Shock</title>
  8 | 
  9 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 10 |   <link rel='import' href='../web-arduino.html'></link>
 11 |   <link rel='import' href='../wa-shock.html'></link>
 12 |   <link rel='import' href='../wa-led.html'></link>
 13 | 
 14 |   <style>
 15 |   * {
 16 |     font-size: 20px;
 17 |   }
 18 | 
 19 |   #msg.default::after {
 20 |     content: "訊息";
 21 |   }
 22 |   #msg.waiting::after {
 23 |     content: "Loading...";
 24 |   }
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   #msg.setting::after {
 29 |     content: "設定中...";
 30 |   }
 31 |   #msg.set::after {
 32 |     content: "設定完成";
 33 |   }
 34 |   </style>
 35 | </head>
 36 | 
 37 | <body>
 38 |   <web-arduino id='board'>
 39 |     <wa-shock id='shock' pin='10'></wa-shock>
 40 |     <wa-led id='led' pin='6'></wa-led>
 41 |   </web-arduino>
 42 | 
 43 |   <div id="msg" class="waiting"></div>
 44 | 
 45 |   <form>
 46 |     <label>device : </label><input type="text" id="device">
 47 |     <button class="setting" id="set">設定</button>
 48 |   </form>
 49 | 
 50 |   <p>Led pin : 6</p>
 51 |   <p>Shock pin : 10</p>
 52 |   <p>透過震動開關發出的事件，讓 Led 亮起來。</p>
 53 |   <p id='ledstatus'>none</p>
 54 |   
 55 | 
 56 |   <script>
 57 |   window.addEventListener('WebComponentsReady', function() {
 58 |     var board = document.getElementById('board'),
 59 |       msg = document.getElementById('msg'),
 60 |       device = document.getElementById('device'),
 61 |       shock = document.getElementById('shock'),
 62 |       led = document.getElementById('led'),
 63 |       setBtn = document.getElementById('set'),
 64 |       ledstatus = document.getElementById('ledstatus');
 65 | 
 66 |     device.setAttribute('value', localStorage.device || "");
 67 |     msg.className = "ready";
 68 | 
 69 |     setBtn.addEventListener('click', function(e) {
 70 |       msg.className = "setting";
 71 |       board.device = device.value;
 72 |       localStorage.device = device.value;
 73 |       board.on('ready', ready);
 74 |       board.init();
 75 |       e.stopPropagation();
 76 |       e.preventDefault();
 77 |       return false;
 78 |     }, false);
 79 | 
 80 |     function ready() {
 81 |       // 示意 board ready
 82 |       msg.className = "set";
 83 |       run();
 84 |     }
 85 | 
 86 |     function run(times) {
 87 |       shock.on('high', function () {
 88 |         ledstatus.innerHTML = "LED on!";
 89 |         led.on();
 90 |       });
 91 |       shock.on('low', function() {
 92 |         ledstatus.innerHTML = "LED off!";
 93 |         led.off();
 94 |       });
 95 |     }
 96 |   });
 97 |   </script>
 98 | </body>
 99 | 
100 | </html>
101 | 


--------------------------------------------------------------------------------
/demo/soil.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>土壤溼度</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-soil.html'></link>
 11 |   <link rel='import' href='../wa-photocell.html'></link>
 12 |   <style>
 13 |   * {
 14 |     font-size: 20px;
 15 |   }
 16 | 
 17 |   #msg.default::after {
 18 |     content: "訊息";
 19 |   }
 20 |   
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   
 29 |   #msg.setting::after {
 30 |     content: "設定中...";
 31 |   }
 32 |   
 33 |   #msg.set::after {
 34 |     content: "設定完成";
 35 |   }
 36 |   
 37 |   input {
 38 |     width: 100px;
 39 |     margin: 5px 0;
 40 |   }
 41 |   
 42 |   button {
 43 |     margin: 5px 0;
 44 |   }
 45 | 
 46 |   .container {
 47 |     position: relative;
 48 |   }
 49 | 
 50 |   .msgContainer {
 51 |     position: absolute; 
 52 |     top: 0; 
 53 |     right: 0; 
 54 |     width: 60%;
 55 |   }
 56 |   
 57 |   #light img {
 58 |     width: 25%;
 59 |     display: none;
 60 |   }
 61 |   
 62 |   #light.off img:first-child {
 63 |     display: inline-block;
 64 |   }
 65 |   
 66 |   #light.on img:last-child {
 67 |     display: inline-block;
 68 |   }
 69 |   
 70 |   #msgRecv {
 71 |     word-break: break-all;
 72 |     height: 300px;
 73 |     width: 100%;
 74 |     overflow: auto;
 75 |   }
 76 |   
 77 |   #msgRecv::before {
 78 |     content: 'message:';
 79 |   }
 80 |   </style>
 81 | </head>
 82 | 
 83 | <body>
 84 |   <web-arduino id="board">
 85 |     <wa-soil id='soil' analogpin='5'></wa-soil>
 86 |   </web-arduino>
 87 |   <div id="msg" class="waiting"></div>
 88 |   <form>
 89 |     <label>device : </label>
 90 |     <input type="text" id="device">
 91 |     <button class="setting" id="set">設定</button>
 92 |   </form>
 93 |   <p>soil analog pin : 5 (A3)</p>
 94 |   <p>說明：
 95 |     <br>值介於 0 ~ 100% 之間，數字愈大，溼度愈高。
 96 |   </p>
 97 | 
 98 |   <div class="container">
 99 |     <p>點擊燈炮，啟動土壤溼度感測器</p>
100 |     <div id='light' class="off">
101 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
102 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
103 |     </div>
104 |     <div class="msgContainer">
105 |       <button id='clearMsg'>clear message</button>
106 |       <br>
107 |       <div id='msgRecv'></div>
108 |     </div>
109 |   </div>
110 | 
111 |   <script>
112 |   window.addEventListener('WebComponentsReady', function() {
113 |     var board = document.getElementById('board');
114 |     var device = document.getElementById('device');
115 |     var light = document.getElementById('light');
116 |     var clearMsg = document.getElementById('clearMsg');
117 |     var msgRecv = document.getElementById('msgRecv');
118 |     var msg = document.getElementById('msg');
119 |     var setBtn = document.getElementById('set');
120 | 
121 |     device.setAttribute('value', localStorage.device || "");
122 | 
123 |     msg.className = "ready";
124 | 
125 |     setBtn.addEventListener('click', function(e) {
126 |       msg.className = "setting";
127 |       light.className = 'off';
128 |       msgRecv.innerHTML = '';
129 |       board.device = device.value;
130 |       localStorage.device = device.value;
131 |       board.on('ready', ready);
132 |       board.init();
133 |       e.stopPropagation();
134 |       e.preventDefault();
135 |       return false;
136 |     }, false);
137 | 
138 |     clearMsg.addEventListener('click', function() {
139 |       msgRecv.innerHTML = '';
140 |     });
141 | 
142 |     function ready() {
143 |       var soil = document.getElementById('soil');
144 | 
145 |       light.addEventListener('click', function() {
146 |         if (light.className == 'on') {
147 |           light.className = 'off';
148 |           soil.off();
149 |         } else {
150 |           light.className = 'on';
151 |           soil.on(success);
152 |         }
153 |       }, false);
154 | 
155 |       msg.className = "set";
156 |     }
157 | 
158 |     function success(val) {
159 |       var msgRecv = document.getElementById('msgRecv');
160 |       var ss = document.createElement('span');
161 |       ss.innerHTML += '<br>';
162 |       ss.innerHTML += val;
163 |       ss.innerHTML += '<span>, ' + new Date().toLocaleTimeString() + '</span>';
164 |       msgRecv.insertBefore(ss, msgRecv.childNodes[0]);
165 |     }
166 |   });
167 |   </script>
168 | </body>
169 | 
170 | </html>
171 | 


--------------------------------------------------------------------------------
/demo/sound.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>sound</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-sound.html'></link>
 11 |   <link rel='import' href='../wa-led.html'></link>
 12 |   <style>
 13 |   * {
 14 |     font-size: 20px;
 15 |   }
 16 |   
 17 |   #msg.default::after {
 18 |     content: "訊息";
 19 |   }
 20 |   
 21 |   #msg.waiting::after {
 22 |     content: "Loading...";
 23 |   }
 24 |   
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   
 29 |   #msg.setting::after {
 30 |     content: "設定中...";
 31 |   }
 32 |   
 33 |   #msg.set::after {
 34 |     content: "設定完成";
 35 |   }
 36 |   </style>
 37 | </head>
 38 | 
 39 | <body>
 40 |   <web-arduino id='board'>
 41 |     <wa-sound id='sound' pin='10'></wa-sound>
 42 |     <wa-led id='led' pin='6'></wa-led>
 43 |   </web-arduino>
 44 |   <div id="msg" class="waiting"></div>
 45 |   <form>
 46 |     <label>device : </label>
 47 |     <input type="text" id="device">
 48 |     <button class="setting" id="set">設定</button>
 49 |   </form>
 50 |   <p>Led pin : 6</p>
 51 |   <p>sound pin : 10</p>
 52 |   <p>利用聲音感應，讓 Led 亮起來。</p>
 53 |   <p id='ledstatus'>none</p>
 54 |   <script>
 55 |   window.addEventListener('WebComponentsReady', function() {
 56 |     var board = document.getElementById('board'),
 57 |       msg = document.getElementById('msg'),
 58 |       device = document.getElementById('device'),
 59 |       sound = document.getElementById('sound'),
 60 |       led = document.getElementById('led'),
 61 |       setBtn = document.getElementById('set'),
 62 |       ledstatus = document.getElementById('ledstatus');
 63 | 
 64 |     device.setAttribute('value', localStorage.device || "");
 65 | 
 66 |     msg.className = "ready";
 67 | 
 68 |     setBtn.addEventListener('click', function(e) {
 69 |       msg.className = "setting";
 70 |       board.device = device.value;
 71 |       localStorage.device = device.value;
 72 |       board.on('ready', ready);
 73 |       board.init();
 74 |       e.stopPropagation();
 75 |       e.preventDefault();
 76 |       return false;
 77 |     }, false);
 78 | 
 79 |     function ready() {
 80 |       // 示意 board ready
 81 |       msg.className = "set";
 82 |       run();
 83 |     }
 84 | 
 85 |     function run() {
 86 |       sound.on('detected', function() {
 87 |         led.on();
 88 |         ledstatus.innerHTML = "LED on!";
 89 |       });
 90 |       sound.on('ended', function() {
 91 |         led.off();
 92 |         ledstatus.innerHTML = "LED off!";
 93 |       });
 94 |     }
 95 |   });
 96 |   </script>
 97 | </body>
 98 | 
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/demo/stepper.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>步進馬達</title>
  8 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
  9 |   <link rel='import' href='../web-arduino.html'></link>
 10 |   <link rel='import' href='../wa-stepper.html'></link>
 11 |   <style>
 12 |   * {
 13 |     font-size: 20px;
 14 |   }
 15 | 
 16 |   #msg.default::after {
 17 |     content: "訊息";
 18 |   }
 19 |   
 20 |   #msg.waiting::after {
 21 |     content: "Loading...";
 22 |   }
 23 |   
 24 |   #msg.ready::after {
 25 |     content: "Ready!";
 26 |   }
 27 |   
 28 |   #msg.setting::after {
 29 |     content: "設定中...";
 30 |   }
 31 |   
 32 |   #msg.set::after {
 33 |     content: "設定完成";
 34 |   }
 35 |   
 36 |   input {
 37 |     width: 100px;
 38 |     margin: 5px 0;
 39 |   }
 40 |   
 41 |   button {
 42 |     margin: 5px 0;
 43 |   }
 44 | 
 45 |   .container {
 46 |     position: relative;
 47 |   }
 48 | 
 49 |   .msgContainer {
 50 |     position: absolute; 
 51 |     top: 0; 
 52 |     right: 0; 
 53 |     width: 60%;
 54 |   }
 55 |   
 56 |   #light img {
 57 |     width: 25%;
 58 |     display: none;
 59 |   }
 60 |   
 61 |   #light.off img:first-child {
 62 |     display: inline-block;
 63 |   }
 64 |   
 65 |   #light.on img:last-child {
 66 |     display: inline-block;
 67 |   }
 68 |   
 69 |   #msgRecv {
 70 |     word-break: break-all;
 71 |     height: 300px;
 72 |     width: 100%;
 73 |     overflow: auto;
 74 |   }
 75 |   
 76 |   #msgRecv::before {
 77 |     content: 'message:';
 78 |   }
 79 |   </style>
 80 | </head>
 81 | 
 82 | <body>
 83 |   <web-arduino id="board">
 84 |     <wa-stepper id='stepper' stepperNumber="2" interface="4" stepsPerRevolution="2048" pin1='8' pin2='9' pin3='10' pin4='11'></wa-stepper>
 85 |   </web-arduino>
 86 |   <div id="msg" class="waiting"></div>
 87 |   <form>
 88 |     <label>device : </label>
 89 |     <input type="text" id="device">
 90 |     <button class="setting" id="set">設定</button>
 91 |   </form>
 92 |   <p> ULN2003 達林頓晶片驅動步進馬達驅動板上的 IN1, IN2, IN3, IN4 分別接上四個數位腳位 8, 9, 10, 11<br>
 93 |       stepperNumber：設定馬達的編號 0~5<br>
 94 |       interface：馬達的相數<br>
 95 |       stepsPerRevolution：馬達轉一圈的步數
 96 |   </p>
 97 | 
 98 |   <p> 控制命令<br>
 99 |       direction：0, 1 (CW clockwise 順時針, CCW counterclockwise 逆時針)<br>
100 |       stepNumber：轉動步數<br>
101 |       speed：步進馬達(型號28BYJ-48, 5V DC)，建議 10~160 單位(0.01 rad/sec)
102 |   </p>
103 | 
104 |   <div class="container">
105 |     <p>點擊燈炮，步進馬達會執行指令</p>
106 |     <div id='light' class="off">
107 |       <img src='http://i.imgur.com/T5H4MHE.png'></img>
108 |       <img src='http://i.imgur.com/8qFj2Ou.png'></img>
109 |     </div>
110 |     <div class="msgContainer">
111 |       <img src="../img/stepper.jpg" width="100%" alt="">
112 |       <button id='clearMsg'>clear message</button>
113 |       <br>
114 |       <div id='msgRecv'></div>
115 |     </div>
116 |   </div>
117 | 
118 |   <script>
119 |   window.addEventListener('WebComponentsReady', function() {
120 |     var board = document.getElementById('board');
121 |     var device = document.getElementById('device');
122 |     var light = document.getElementById('light');
123 |     var clearMsg = document.getElementById('clearMsg');
124 |     var msgRecv = document.getElementById('msgRecv');
125 |     var msg = document.getElementById('msg');
126 |     var setBtn = document.getElementById('set');
127 | 
128 |     device.setAttribute('value', localStorage.device || "");
129 | 
130 |     msg.className = "ready";
131 | 
132 |     setBtn.addEventListener('click', function(e) {
133 |       msg.className = "setting";
134 |       light.className = 'off';
135 |       msgRecv.innerHTML = '';
136 |       board.device = device.value;
137 |       localStorage.device = device.value;
138 |       board.on('ready', ready);
139 |       board.init();
140 |       e.stopPropagation();
141 |       e.preventDefault();
142 |       return false;
143 |     }, false);
144 | 
145 |     clearMsg.addEventListener('click', function() {
146 |       msgRecv.innerHTML = '';
147 |     });
148 | 
149 |     function ready() {
150 |       var stepper = document.getElementById('stepper');
151 | 
152 |       light.addEventListener('click', function() {
153 |         if (light.className == 'on') {
154 |           light.className = 'off';
155 |         } else {
156 |           light.className = 'on';
157 |           stepper.on({
158 |             "stepperNumber": stepper.getAttribute('stepperNumber'),
159 |             "direction": 0,
160 |             "stepNumber": 2048,
161 |             "speed": 160
162 |           }, success);
163 |         }
164 |       }, false);
165 | 
166 |       msg.className = "set";
167 |     }
168 | 
169 |     function success(val) {
170 |       var msgRecv = document.getElementById('msgRecv');
171 |       var ss = document.createElement('span');
172 |       ss.innerHTML += '<br>';
173 |       ss.innerHTML += 'stepperNumber: ' + val.stepperNumber;
174 |       ss.innerHTML += '<span>, ' + new Date().toLocaleTimeString() + '</span>';
175 |       msgRecv.insertBefore(ss, msgRecv.childNodes[0]);
176 |     }
177 |   });
178 |   </script>
179 | </body>
180 | 
181 | </html>
182 | 


--------------------------------------------------------------------------------
/demo/tilt.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  7 |   <title>Tilt</title>
  8 | 
  9 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 10 |   <link rel='import' href='../web-arduino.html'></link>
 11 |   <link rel='import' href='../wa-tilt.html'></link>
 12 |   <link rel='import' href='../wa-led.html'></link>
 13 | 
 14 |   <style>
 15 |   * {
 16 |     font-size: 20px;
 17 |   }
 18 | 
 19 |   #msg.default::after {
 20 |     content: "訊息";
 21 |   }
 22 |   #msg.waiting::after {
 23 |     content: "Loading...";
 24 |   }
 25 |   #msg.ready::after {
 26 |     content: "Ready!";
 27 |   }
 28 |   #msg.setting::after {
 29 |     content: "設定中...";
 30 |   }
 31 |   #msg.set::after {
 32 |     content: "設定完成";
 33 |   }
 34 |   </style>
 35 | </head>
 36 | 
 37 | <body>
 38 |   <web-arduino id='board'>
 39 |     <wa-tilt id='tilt' pin='10'></wa-tilt>
 40 |     <wa-led id='led' pin='6'></wa-led>
 41 |   </web-arduino>
 42 | 
 43 |   <div id="msg" class="waiting"></div>
 44 | 
 45 |   <form>
 46 |     <label>device : </label><input type="text" id="device">
 47 |     <button class="setting" id="set">設定</button>
 48 |   </form>
 49 | 
 50 |   <p>Led pin : 6</p>
 51 |   <p>Tilt pin : 10</p>
 52 |   <p>透過水銀開關發出的事件，讓 Led 亮起來。</p>
 53 |   <p id='ledstatus'>none</p>
 54 |   
 55 | 
 56 |   <script>
 57 |   window.addEventListener('WebComponentsReady', function() {
 58 |     var board = document.getElementById('board'),
 59 |       msg = document.getElementById('msg'),
 60 |       device = document.getElementById('device'),
 61 |       tilt = document.getElementById('tilt'),
 62 |       led = document.getElementById('led'),
 63 |       setBtn = document.getElementById('set'),
 64 |       ledstatus = document.getElementById('ledstatus');
 65 | 
 66 |     device.setAttribute('value', localStorage.device || "");
 67 |     msg.className = "ready";
 68 | 
 69 |     setBtn.addEventListener('click', function(e) {
 70 |       msg.className = "setting";
 71 |       board.device = device.value;
 72 |       localStorage.device = device.value;
 73 |       board.on('ready', ready);
 74 |       board.init();
 75 |       e.stopPropagation();
 76 |       e.preventDefault();
 77 |       return false;
 78 |     }, false);
 79 | 
 80 |     function ready() {
 81 |       // 示意 board ready
 82 |       msg.className = "set";
 83 |       run();
 84 |     }
 85 | 
 86 |     function run(times) {
 87 |       tilt.on('high', function () {
 88 |         ledstatus.innerHTML = "LED on!";
 89 |         led.on();
 90 |       });
 91 |       tilt.on('low', function() {
 92 |         ledstatus.innerHTML = "LED off!";
 93 |         led.off();
 94 |       });
 95 |     }
 96 |   });
 97 |   </script>
 98 | </body>
 99 | 
100 | </html>
101 | 


--------------------------------------------------------------------------------
/demo/ultrasonic.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <script src="../../webcomponentsjs/webcomponents.js"></script>
 6 |   <link rel='import' href='../web-arduino.html'></link>
 7 |   <link rel='import' href='../wa-ultrasonic.html'></link>
 8 |   <style>
 9 |   #img {
10 |     width: 200px;
11 |   }
12 |   </style>
13 | </head>
14 | 
15 | <body>
16 |   <web-arduino id='board' device='Mj29'>
17 |     <wa-ultrasonic id='ultrasonic' trig='11' echo='10'></wa-ultrasonic>
18 |   </web-arduino>
19 |   <img id='img' src='http://www.hua.com/flower_picture/meiguihua/images/r17.jpg'></img>
20 |   <script>
21 |   window.addEventListener('WebComponentsReady', function() {
22 | 
23 |     var board = document.getElementById('board');
24 | 
25 |     board.on('ready', function() {
26 |       var ultrasonic = document.getElementById('ultrasonic'),
27 |         img = document.getElementById('img');
28 | 
29 |       ultrasonic.ping(function(cm) {
30 |         if (cm < 400) {
31 |           img.style.width = cm * 10 + 'px';
32 |           img.style.height = cm * 10 + 'px';
33 |         }
34 |       }, 1000);
35 |     });
36 |     
37 |   }, false);
38 |   </script>
39 | </body>
40 | 
41 | </html>
42 | 


--------------------------------------------------------------------------------
/img/stepper.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webduinoio/webduino/82ed174cddd8887238f2a056e084c3262ff3a92e/img/stepper.jpg


--------------------------------------------------------------------------------
/js/wa.event.js:
--------------------------------------------------------------------------------
 1 | +(function (scope) {
 2 |   'use strict';
 3 | 
 4 |   function Events() {
 5 |     this.eventListeners = {};
 6 |   };
 7 | 
 8 |   Events.prototype.on = function (eventType, handler) {
 9 |     var listeners = this.eventListeners;
10 | 
11 |     if (!listeners.hasOwnProperty(eventType)) {
12 |       listeners[eventType] = [];
13 |     }
14 |     listeners[eventType].push(handler);
15 |   };
16 | 
17 |   Events.prototype.off = function (eventType, handler) {
18 |     var idx, listenersAry;
19 |     
20 |     if (eventType && handler) {
21 |       listenersAry = this.eventListeners[eventType];
22 |       idx = listenersAry.indexOf(handler);
23 |       while(idx !== -1) {
24 |         listenersAry.splice(idx, 1);
25 |         idx = listenersAry.indexOf(handler);
26 |       }
27 |     } else if (eventType) {
28 |       this.eventListeners[eventType] = [];
29 |     } else {
30 |       this.eventListeners = {};
31 |     }
32 |   };
33 | 
34 |   Events.prototype.emit = function (eventType, args, self) {
35 |     var listeners = this.eventListeners;
36 |     self = self || null;
37 | 
38 |     if (listeners.hasOwnProperty(eventType)) {
39 |       for (var i = 0, len = listeners[eventType].length; i < len; ++i) {
40 |         try {
41 |           args instanceof Array || (args = [args]);
42 |           listeners[eventType][i].apply(self, args);
43 |         } catch (e) {
44 |           if (console && console.error) {
45 |             console.error(e);
46 |           }
47 |         }
48 |       }
49 |     }
50 |   };
51 | 
52 |   scope.webduino && (scope.webduino.Events = Events);
53 | 
54 | })(this);
55 | 


--------------------------------------------------------------------------------
/js/wa.js:
--------------------------------------------------------------------------------
1 | +(function (scope) {
2 |     !scope.webduino && (scope.webduino = {});
3 | })(this);


--------------------------------------------------------------------------------
/wa-adxl345.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/ADXL345.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       sensitive: {
12 |         get: function() {
13 |           return this.getAttribute('sensitive');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('sensitive', val);
17 |         }
18 |       },
19 |       baseaxis: {
20 |         get: function() {
21 |           return this.getAttribute('baseaxis');
22 |         },
23 |         set: function(val) {
24 |           this.setAttribute('baseaxis', val);
25 |         }
26 |       }
27 |     });
28 | 
29 |     proto.init_ = function(board) {
30 |       var ADXL345 = webduino.module.ADXL345;
31 |       this.adxl345 = new ADXL345(board);
32 |       if (this.sensitive) {
33 |         this.setSensitivity(this.sensitive);
34 |       }
35 |       if (this.baseaxis) {
36 |         this.setBaseAxis(this.baseaxis);
37 |       }
38 |     };
39 | 
40 |     proto.on = function(callback) {
41 |       if (typeof callback === 'function') {
42 |         this.adxl345.on(callback);
43 |         this._state = 'on';
44 |       }
45 |     };
46 | 
47 |     proto.off = function() {
48 |       this.adxl345.off();
49 |       this._state = 'off';
50 |     };
51 | 
52 |     proto.setSensitivity = function(val) {
53 |       // 1g = 256;
54 |       if (this.adxl345) {
55 |         val = parseInt(val);
56 |         this.adxl345.setSensitivity(val);
57 |       }
58 |     };
59 | 
60 |     proto.setBaseAxis = function(val) {
61 |       var re = /^[x|y|z]$/i;
62 | 
63 |       if (this.adxl345 && re.test(val)) {
64 |         this.adxl345.setBaseAxis(val.toLowerCase());
65 |         this.adxl345.refresh();
66 |       }
67 |     };
68 | 
69 |     proto.detachedCallback = function() {
70 |       this.off();
71 |     };
72 | 
73 |     proto.attributeChangedCallback = function(attrName, oldVal, newVal) {
74 |       if (this.adxl345) {
75 |         switch (attrName) {
76 |           case 'sensitive':
77 |             this.setSensitivity(newVal);
78 |             break;
79 |           case 'baseaxis':
80 |             this.setBaseAxis(newVal);
81 |             break;
82 |         }
83 |       }
84 |     };
85 | 
86 |     document.registerElement('wa-adxl345', {
87 |       prototype: proto
88 |     });
89 | 
90 |   })();
91 |   </script>
92 | </body>
93 | 
94 | </html>


--------------------------------------------------------------------------------
/wa-barcode.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <script type="text/javascript" src="../webduino-js/src/module/Barcode.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <script>
 9 |     (function() {
10 |         var proto = Object.create(HTMLElement.prototype, {
11 |             rx: {
12 |                 get: function() {
13 |                     return this.getAttribute('rx');
14 |                 },
15 |                 set: function(val) {
16 |                     this.setAttribute('rx', val);
17 |                 }
18 |             },
19 |             tx: {
20 |                 get: function() {
21 |                     return this.getAttribute('tx');
22 |                 },
23 |                 set: function(val) {
24 |                     this.setAttribute('tx', val);
25 |                 }
26 |             },
27 |             state: {
28 |                 get: function() {
29 |                     return this.getAttribute('state');
30 |                 },
31 |                 set: function(val) {
32 |                     this.setAttribute('state', val);
33 |                 }
34 |             }
35 |         });
36 | 
37 |         proto.init_ = function(board) {
38 |             var Barcode = webduino.module.Barcode;
39 |             this.barcode = new Barcode(board, board.getDigitalPin(this.rx), board.getDigitalPin(this.tx));
40 |         };
41 | 
42 |         proto.on = function(callback) {
43 |             if (typeof callback === 'function') {
44 |                 this.barcode.on(callback);
45 |                 this._state = 'on';
46 |             }
47 |         };
48 | 
49 |         proto.off = function() {
50 |             this.barcode.off();
51 |             this._state = 'off';
52 |         };
53 | 
54 |         proto.detachedCallback = function() {
55 |             this.off();
56 |         };
57 | 
58 |         document.registerElement('wa-barcode', {
59 |             prototype: proto
60 |         });
61 | 
62 |     })();
63 |     </script>
64 | </body>
65 | 
66 | </html>


--------------------------------------------------------------------------------
/wa-button.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Button.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         }
15 |       }
16 |     });
17 | 
18 |     proto.init_ = function(board) {
19 |       var events, button,
20 |         self = this,
21 |         Button = webduino.module.Button,
22 |         ButtonEvent = webduino.module.ButtonEvent;
23 | 
24 |       events = new webduino.Events();
25 |       button = new Button(board, board.getDigitalPin(self.pin), Button.PULL_DOWN);
26 | 
27 |       self.events_ = events;
28 |       self.button = button;
29 | 
30 |       button.on(ButtonEvent.PRESS, function(event) {
31 |         events.emit('pressed');
32 |       });
33 | 
34 |       button.on(ButtonEvent.RELEASE, function(event) {
35 |         events.emit('released');
36 |       });
37 | 
38 |       button.on(ButtonEvent.SUSTAINED_PRESS, function(event) {
39 |         events.emit('sustainedPress');
40 |       });
41 | 
42 |       button.on(ButtonEvent.LONG_PRESS, function(event) {
43 |         events.emit('longPress');
44 |       });
45 |     };
46 | 
47 |     proto.on = function(eventType, handler) {
48 |       this.events_.on(eventType, handler);
49 |     };
50 | 
51 |     proto.off = function(eventType, handler) {
52 |       this.events_.off(eventType, handler);
53 |     };
54 | 
55 |     document.registerElement('wa-button', {
56 |       prototype: proto
57 |     });
58 | 
59 |   })();
60 |   </script>
61 | </body>
62 | 
63 | </html>
64 | 


--------------------------------------------------------------------------------
/wa-buzzer.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Buzzer.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('pin', val);
17 |         }
18 |       },
19 |       notes: {
20 |         get: function() {
21 |           return this.getAttribute('notes');
22 |         },
23 |         set: function(val) {
24 |           this.setAttribute('notes', val);
25 |         }
26 |       },
27 |       tempos: {
28 |         get: function() {
29 |           return this.getAttribute('tempos');
30 |         },
31 |         set: function(val) {
32 |           this.setAttribute('tempos', val);
33 |         }
34 |       },
35 |       frequency: {
36 |         get: function() {
37 |           return this.getAttribute('frequency');
38 |         },
39 |         set: function(val) {
40 |           this.setAttribute('frequency', val);
41 |         }
42 |       },
43 |       duration: {
44 |         get: function() {
45 |           return this.getAttribute('duration');
46 |         },
47 |         set: function(val) {
48 |           this.setAttribute('duration', val);
49 |         }
50 |       },
51 |       autoplay: {
52 |         get: function() {
53 |           return this.getAttribute('autoplay');
54 |         },
55 |         set: function(val) {
56 |           this.setAttribute('autoplay', val);
57 |         }
58 |       }
59 |     });
60 | 
61 |     proto.init_ = function(board) {
62 |       var Buzzer = webduino.module.Buzzer;
63 |       this.buzzer = new Buzzer(board, board.getDigitalPin(this.pin));
64 | 
65 |       if (this.autoplay !== null) {
66 |         this.play();
67 |       }
68 |     };
69 | 
70 |     proto.play = function() {
71 |       if (this.notes) {
72 |         this.buzzer.play(this.notes.split(','), this.tempos.split(','));
73 |       } else if (this.frequency) {
74 |         this.buzzer.tone(parseInt(this.frequency), parseInt(this.duration));
75 |       }
76 |     };
77 | 
78 |     proto.attributeChangedCallback = function(attrName, oldVal, newVal) {
79 |       if (this.buzzer && this.autoplay !== null) {
80 |         this.play();
81 |       }
82 |     };
83 | 
84 |     document.registerElement('wa-buzzer', {
85 |       prototype: proto
86 |     });
87 | 
88 |   })();
89 |   </script>
90 | </body>
91 | 
92 | </html>
93 | 


--------------------------------------------------------------------------------
/wa-dht.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Dht.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('pin', val);
17 |         }
18 |       }
19 |     });
20 | 
21 |     proto.init_ = function(board) {
22 |       var Dht = webduino.module.Dht;
23 |       this.dht = new Dht(board, board.getDigitalPin(this.pin));
24 |     };
25 | 
26 |     proto.read = function(callback, interval) {
27 |       this.dht.read(callback, interval);
28 |     }
29 | 
30 |     proto.stopRead = function() {
31 |       this.dht.stopRead();
32 |     }
33 | 
34 |     document.registerElement('wa-dht', {
35 |       prototype: proto
36 |     });
37 | 
38 |   })();
39 |   </script>
40 | </body>
41 | 
42 | </html>
43 | 


--------------------------------------------------------------------------------
/wa-g3.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <script type="text/javascript" src="../webduino-js/src/module/G3.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <script>
 9 |     (function() {
10 |         var proto = Object.create(HTMLElement.prototype, {
11 |             rx: {
12 |                 get: function() {
13 |                     return this.getAttribute('rx');
14 |                 },
15 |                 set: function(val) {
16 |                     this.setAttribute('rx', val);
17 |                 }
18 |             },
19 |             tx: {
20 |                 get: function() {
21 |                     return this.getAttribute('tx');
22 |                 },
23 |                 set: function(val) {
24 |                     this.setAttribute('tx', val);
25 |                 }
26 |             }
27 |         });
28 | 
29 |         proto.init_ = function(board) {
30 |             var G3 = webduino.module.G3;
31 |             this.g3 = new G3(board,
32 |                 board.getDigitalPin(this.rx),
33 |                 board.getDigitalPin(this.tx));
34 |         };
35 | 
36 |         proto.read = function(callback, interval) {
37 |             this.g3.read(callback, interval);
38 |         }
39 | 
40 |         proto.stopRead = function() {
41 |             this.g3.stopRead();
42 |         }
43 | 
44 |         document.registerElement('wa-g3', {
45 |             prototype: proto
46 |         });
47 | 
48 |     })();
49 |     </script>
50 | </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------
/wa-hx711.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |     <script type="text/javascript" src="../webduino-js/src/module/HX711.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |     <script>
 9 |     (function() {
10 |         var proto = Object.create(HTMLElement.prototype, {
11 |             sck: {
12 |                 get: function() {
13 |                     return this.getAttribute('sck');
14 |                 },
15 |                 set: function(val) {
16 |                     this.setAttribute('sck', val);
17 |                 }
18 |             },
19 |             dt: {
20 |                 get: function() {
21 |                     return this.getAttribute('dt');
22 |                 },
23 |                 set: function(val) {
24 |                     this.setAttribute('dt', val);
25 |                 }
26 |             },
27 |             state: {
28 |                 get: function() {
29 |                     return this.getAttribute('state');
30 |                 },
31 |                 set: function(val) {
32 |                     this.setAttribute('state', val);
33 |                 }
34 |             }
35 |         });
36 | 
37 |         proto.init_ = function(board) {
38 |             var HX711 = webduino.module.HX711;
39 |             this.hx711 = new HX711(board, board.getDigitalPin(this.sck), board.getDigitalPin(this.dt));
40 |         };
41 | 
42 |         proto.on = function(callback) {
43 |             if (typeof callback === 'function') {
44 |                 this.hx711.on(callback);
45 |                 this._state = 'on';
46 |             }
47 |         };
48 | 
49 |         proto.off = function() {
50 |             this.hx711.off();
51 |             this._state = 'off';
52 |         };
53 | 
54 |         proto.detachedCallback = function() {
55 |             this.off();
56 |         };
57 | 
58 |         document.registerElement('wa-hx711', {
59 |             prototype: proto
60 |         });
61 | 
62 |     })();
63 |     </script>
64 | </body>
65 | 
66 | </html>


--------------------------------------------------------------------------------
/wa-irled.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/IRLed.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       encode: {
12 |         get: function() {
13 |           return this.getAttribute('encode');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('encode', val);
17 |         }
18 |       },
19 |       initsend: {
20 |         get: function() {
21 |           return this.getAttribute('initsend');
22 |         },
23 |         set: function(val) {
24 |           this.setAttribute('initsend', val);
25 |         }
26 |       }
27 |     });
28 | 
29 |     proto.init_ = function(board) {
30 |       var observer, config, IRLed = webduino.module.IRLed;
31 |       this.irled = new IRLed(board, this.encode);
32 |       
33 |       if (this.initsend === 'true') {
34 |         this.send();
35 |       }
36 |     };
37 | 
38 |     proto.send = function(code) {
39 |       code = code || this.encode;
40 |       this.irled.send(code);
41 |     };
42 | 
43 |     proto.attributeChangedCallback = function(attrName, oldVal, newVal) {
44 |       if (this.irled) {
45 |         switch (attrName) {
46 |           case 'encode':
47 |             this.irled.updateEncode(newVal);
48 |             break;
49 |         }
50 |       }
51 |     };
52 | 
53 |     document.registerElement('wa-irled', {
54 |       prototype: proto
55 |     });
56 | 
57 |   })();
58 |   </script>
59 | </body>
60 | 
61 | </html>


--------------------------------------------------------------------------------
/wa-irrecv.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/IRRecv.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('pin', val);
17 |         }
18 |       }
19 |     });
20 | 
21 |     proto.init_ = function(board) {
22 |       var IRRecv = webduino.module.IRRecv;
23 |       this.irrecv = new IRRecv(board, board.getDigitalPin(this.pin));
24 |     };
25 | 
26 |     proto.on = function(callback, errorCallback) {
27 |       this.irrecv.on(callback, errorCallback);
28 |       this._state = 'on';
29 |     };
30 | 
31 |     proto.off = function() {
32 |       this.irrecv.off();
33 |       this._state = 'off';
34 |     };
35 | 
36 |     proto.detachedCallback = function() {
37 |       this.off();
38 |     };
39 | 
40 |     document.registerElement('wa-irrecv', {
41 |       prototype: proto
42 |     });
43 | 
44 |   })();
45 |   </script>
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/wa-joystick.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Button.js"></script>
 5 |   <script type="text/javascript" src="../webduino-js/src/module/Joystick.js"></script>
 6 | </head>
 7 | 
 8 | <body>
 9 |   <script>
10 |   (function() {
11 |     var proto = Object.create(HTMLElement.prototype, {
12 |       x: {
13 |         get: function() {
14 |           return this.getAttribute('x');
15 |         }
16 |       },
17 |       y: {
18 |         get: function() {
19 |           return this.getAttribute('y');
20 |         }
21 |       },
22 |       z: {
23 |         get: function() {
24 |           return this.getAttribute('z');
25 |         }
26 |       }
27 |     });
28 | 
29 |     proto.init_ = function(board) {
30 |       var Joystick = webduino.module.Joystick;
31 |       var JoystickEvent = webduino.module.JoystickEvent;
32 |       var events = new webduino.Events();
33 |       var joystick = new Joystick(board, this.x, this.y, board.getDigitalPin(this.z));
34 | 
35 |       this.events_ = events;
36 |       this.joystick = joystick;
37 | 
38 |       joystick.on(JoystickEvent.MESSAGE, function(x, y, z) {
39 |         events.emit('message', Array.prototype.slice.apply(arguments));
40 |       });
41 |     };
42 | 
43 |     proto.on = function(eventType, handler) {
44 |       this.events_.on(eventType, handler);
45 |     };
46 | 
47 |     proto.off = function(eventType, handler) {
48 |       this.events_.off(eventType, handler);
49 |     };
50 | 
51 |     document.registerElement('wa-joystick', {
52 |       prototype: proto
53 |     });
54 | 
55 |   })();
56 |   </script>
57 | </body>
58 | 
59 | </html>
60 | 


--------------------------------------------------------------------------------
/wa-led.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 | <head>
  4 |   <script type="text/javascript" src="../webduino-js/src/module/Led.js"></script>
  5 | </head>
  6 | 
  7 | <body>
  8 |   <script>
  9 |   (function() {
 10 |     var proto = Object.create(HTMLElement.prototype, {
 11 |       pin: {
 12 |         get: function() {
 13 |           return this.getAttribute('pin');
 14 |         },
 15 |         set: function(val) {
 16 |           this.setAttribute('pin', val);
 17 |         }
 18 |       },
 19 |       intensity: {
 20 |         get: function() {
 21 |           return this.getAttribute('intensity');
 22 |         },
 23 |         set: function(val) {
 24 |           this.setAttribute('intensity', val);
 25 |         }
 26 |       },
 27 |       gnd: {
 28 |         get: function() {
 29 |           return this.getAttribute('gnd');
 30 |         },
 31 |         set: function(val) {
 32 |           this.setAttribute('gnd', val);
 33 |         }
 34 |       },
 35 |       state: {
 36 |         get: function() {
 37 |           return this.getAttribute('state');
 38 |         },
 39 |         set: function(val) {
 40 |           this.setAttribute('state', val);
 41 |         }
 42 |       }
 43 |     });
 44 | 
 45 |     proto.init_ = function(board) {
 46 |       var observer, config,
 47 |         Led = webduino.module.Led;
 48 | 
 49 |       this.led = new Led(board, board.getDigitalPin(this.pin));
 50 | 
 51 |       this._statecb = null;
 52 |       this._blinkInterval = null;
 53 | 
 54 |       // Initial led state according to wa-led state
 55 |       this.attributeChangedCallback('state', null, this.state);
 56 |     };
 57 | 
 58 |     proto.createGnd_ = function() {
 59 |       var gndLed;
 60 | 
 61 |       if (this.gnd) {
 62 |         if (this.gndLed) {
 63 |           this.gndLed.parentNode.removeChild(this.gndLed);
 64 |         }
 65 |         gndLed = document.createElement('wa-led');
 66 |         gndLed.setAttribute('pin', this.gnd);
 67 |         this.parentNode.appendChild(gndLed);
 68 |         this.gndLed = gndLed;
 69 |       }
 70 |     };
 71 | 
 72 |     /**
 73 |      * Set led state to on.
 74 |      * @param {Function} [callback] - Led state changed callback.
 75 |      */
 76 |     proto.on = function(callback) {
 77 |       this._statecb = callback;
 78 |       this.state = 'on';
 79 |     };
 80 |     proto._on = function() {
 81 |       this.led.on(this._statecb);
 82 |     };
 83 | 
 84 |     /**
 85 |      * Set led state to off.
 86 |      * @param {Function} [callback] - Led state changed callback.
 87 |      */
 88 |     proto.off = function(callback) {
 89 |       this._statecb = callback;
 90 |       this.state = 'off';
 91 |     };
 92 |     proto._off = function() {
 93 |       this.led.off(this._statecb);
 94 |     };
 95 | 
 96 |     /**
 97 |      * Toggle led state between on/off according to current state.
 98 |      * @param {Function} [callback] - Led state changed callback.
 99 |      */
100 |     proto.toggle = function(callback) {
101 |       this._statecb = callback;
102 |       this.state = this.state === 'blink' || this.state === 'on' ? 'off' : 'on';
103 |     };
104 | 
105 |     /**
106 |      * Set led state to blink. Both msec and callback are optional
107 |      * and can be passed as the only one parameter.
108 |      * @param {number} [msec] - Led blinking interval.
109 |      * @param {Function} [callback] - Led state changed callback.
110 |      */
111 |     proto.blink = function(msec, callback) {
112 |       if (arguments.length === 1 && typeof arguments[0] === 'function') {
113 |         callback = arguments[0];
114 |       }
115 |       this.state = null;
116 |       this._blinkInterval = msec;
117 |       this._statecb = callback;
118 |       this.state = 'blink';
119 |     };
120 |     proto._blink = function() {
121 |       this.led.blink(this._blinkInterval, this._statecb);
122 |     };
123 | 
124 |     proto.attributeChangedCallback = function(attrName, oldVal, newVal) {
125 |       if (this.led) {
126 |         switch (attrName) {
127 |           case 'state':
128 |             if (newVal === 'on') {
129 |               this._on();
130 |             } else if (newVal === 'off') {
131 |               this._off();
132 |             } else if (newVal === 'blink') {
133 |               this._blink();
134 |               this._blinkInterval = null;
135 |             }
136 |             this._statecb = null;
137 |             break;
138 |           case 'gnd':
139 |             this.createGnd_();
140 |             break;
141 |           case 'intensity':
142 |             this.led.intensity = newVal;
143 |             break;
144 |         }
145 |       }
146 |     };
147 | 
148 |     proto.createdCallback = function() {
149 |       this.createGnd_();
150 |     };
151 | 
152 |     proto.detachedCallback = function() {
153 |       if (this.gndLed) {
154 |         this.gndLed.parentNode.removeChild(this.gndLed);
155 |       }
156 |     };
157 | 
158 |     document.registerElement('wa-led', {
159 |       prototype: proto
160 |     });
161 | 
162 |   })();
163 |   </script>
164 | </body>
165 | 
166 | </html>
167 | 


--------------------------------------------------------------------------------
/wa-max7219.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 | <head>
  4 |   <script type="text/javascript" src="../webduino-js/src/module/Max7219.js"></script>
  5 | </head>
  6 | 
  7 | <body>
  8 |   <script>
  9 |   (function() {
 10 |     var proto = Object.create(HTMLElement.prototype, {
 11 |       din: {
 12 |         get: function() {
 13 |           return this.getAttribute('din');
 14 |         },
 15 |         set: function(val) {
 16 |           this.setAttribute('din', val);
 17 |         }
 18 |       },
 19 |       cs: {
 20 |         get: function() {
 21 |           return this.getAttribute('cs');
 22 |         },
 23 |         set: function(val) {
 24 |           this.setAttribute('cs', val);
 25 |         }
 26 |       },
 27 |       clk: {
 28 |         get: function() {
 29 |           return this.getAttribute('clk');
 30 |         },
 31 |         set: function(val) {
 32 |           this.setAttribute('clk', val);
 33 |         }
 34 |       },
 35 |       state: {
 36 |         get: function() {
 37 |           return this.getAttribute('state');
 38 |         },
 39 |         set: function(val) {
 40 |           this.setAttribute('state', val);
 41 |         }
 42 |       },
 43 |       intensity: {
 44 |         get: function() {
 45 |           return this.getAttribute('intensity');
 46 |         },
 47 |         set: function(val) {
 48 |           this.setAttribute('intensity', val);
 49 |         }
 50 |       },
 51 |       data: {
 52 |         get: function() {
 53 |           return this.getAttribute('data');
 54 |         },
 55 |         set: function(val) {
 56 |           this.setAttribute('data', val);
 57 |         }
 58 |       }
 59 |     });
 60 | 
 61 |     proto.init_ = function(board) {
 62 |       var observer, config,
 63 |         Max7219 = webduino.module.Max7219;
 64 | 
 65 |       this.max7219 = new Max7219(board, board.getDigitalPin(this.din), board.getDigitalPin(this.cs), board.getDigitalPin(this.clk));
 66 |       this.off();
 67 | 
 68 |       if (this.state === 'on' && this.data) {
 69 |         this.on(this.data);
 70 |       }
 71 | 
 72 |       if (this.intensity) {
 73 |         this.max7219.intensity = this.intensity;
 74 |       }
 75 |     };
 76 | 
 77 |     proto.on = function(data) {
 78 |       if (data) {
 79 |         this.max7219.on(data);
 80 |       } else {
 81 |         this.max7219.on();
 82 |       }
 83 |     };
 84 | 
 85 |     proto.off = function() {
 86 |       this.animateStop();
 87 |       this.max7219.off();
 88 |     };
 89 | 
 90 |     proto.animate = function(data, times, duration, callback) {
 91 |       this.max7219.animate(data, times, duration, callback);
 92 |     };
 93 | 
 94 |     proto.animateStop = function() {
 95 |       this.max7219.animateStop();
 96 |     };
 97 | 
 98 |     proto.attributeChangedCallback = function(attrName, oldVal, newVal) {
 99 |       if (this.max7219) {
100 |         switch (attrName) {
101 |           case 'state':
102 |             newVal === "on" ? this.on() : this.off();
103 |             break;
104 |           case 'intensity':
105 |             this.max7219.intensity = newVal;
106 |             break;
107 |         }
108 |       }
109 |     };
110 | 
111 |     document.registerElement('wa-max7219', {
112 |       prototype: proto
113 |     });
114 | 
115 |   })();
116 |   </script>
117 | </body>
118 | 
119 | </html>


--------------------------------------------------------------------------------
/wa-mq2.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/MQ2.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       analogpin: {
12 |         get: function() {
13 |           return this.getAttribute('analogpin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('analogpin', val);
17 |         }
18 |       },
19 |       pin: {
20 |         get: function() {
21 |           return this.getAttribute('pin');
22 |         },
23 |         set: function(val) {
24 |           this.setAttribute('pin', val);
25 |         }
26 |       }
27 |     });
28 | 
29 |     proto.init_ = function(board) {
30 |       var MQ2 = webduino.module.MQ2;
31 |       var pin = this.pin ? board.getDigitalPin(this.pin) : null;
32 |       var analogPin = this.analogpin || null;
33 |       this.mq2 = new MQ2(board, analogPin, pin);
34 |     };
35 | 
36 |     proto.on = function(type, handler) {
37 |       var callback;
38 | 
39 |       if (typeof type === 'function') {
40 |         callback = type;
41 |         if (typeof callback === 'function') {
42 |           this.mq2.on(function(val) {
43 |             val = val.toFixed(5);
44 |             callback(val);
45 |           });
46 |         }
47 |       }
48 | 
49 |       if (typeof type === 'string' && typeof handler === 'function') {
50 |         this.mq2.onEvent(type, handler);
51 |       }
52 |     };
53 | 
54 |     proto.off = function(type, handler) {
55 |       if (arguments.length) {
56 |         this.mq2.offEvent(type, handler);
57 |       } else {
58 |         this.mq2.off();
59 |       }
60 |     };
61 | 
62 |     proto.detachedCallback = function() {
63 |       this.off();
64 |     };
65 | 
66 |     document.registerElement('wa-mq2', {
67 |       prototype: proto
68 |     });
69 | 
70 |   })();
71 |   </script>
72 | </body>
73 | 
74 | </html>


--------------------------------------------------------------------------------
/wa-photocell.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Photocell.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       analogpin: {
12 |         get: function() {
13 |           return this.getAttribute('analogpin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('analogpin', val);
17 |         }
18 |       }
19 |     });
20 | 
21 |     proto.init_ = function(board) {
22 |       var Photocell = webduino.module.Photocell;
23 |       this.photocell = new Photocell(board, this.analogpin);
24 |     };
25 | 
26 |     proto.on = function(callback) {
27 |       if (typeof callback === 'function') {
28 |         this.photocell.on(function(val) {
29 |           val = val.toFixed(5);
30 |           callback(val);
31 |         });
32 |       }
33 |     };
34 | 
35 |     proto.off = function() {
36 |       this.photocell.off();
37 |     };
38 | 
39 |     proto.detachedCallback = function() {
40 |       this.off();
41 |     };
42 | 
43 |     document.registerElement('wa-photocell', {
44 |       prototype: proto
45 |     });
46 | 
47 |   })();
48 |   </script>
49 | </body>
50 | 
51 | </html>


--------------------------------------------------------------------------------
/wa-pir.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Pir.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('pin', val);
17 |         }
18 |       }
19 |     });
20 | 
21 |     proto.init_ = function(board) {
22 |       var events, pir,
23 |         self = this,
24 |         Pir = webduino.module.Pir,
25 |         PirEvent = webduino.module.PirEvent;
26 | 
27 |       events = new webduino.Events();
28 |       pir = new Pir(board, board.getDigitalPin(self.pin));
29 | 
30 |       self.events_ = events;
31 |       self.pir = pir;
32 | 
33 |       pir.on(PirEvent.DETECTED, function() {
34 |         events.emit('detected');
35 |       });
36 | 
37 |       pir.on(PirEvent.ENDED, function() {
38 |         events.emit('ended');
39 |       });
40 |     };
41 | 
42 |     proto.on = function(eventType, handler) {
43 |       this.events_.on(eventType, handler);
44 |     };
45 | 
46 |     proto.off = function(eventType, handler) {
47 |       this.events_.off(eventType, handler);
48 |     };
49 | 
50 |     document.registerElement('wa-pir', {
51 |       prototype: proto
52 |     });
53 | 
54 |   })();
55 |   </script>
56 | </body>
57 | 
58 | </html>
59 | 


--------------------------------------------------------------------------------
/wa-pot.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Pot.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       analogpin: {
12 |         get: function() {
13 |           return this.getAttribute('analogpin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('analogpin', val);
17 |         }
18 |       }
19 |     });
20 | 
21 |     proto.init_ = function(board) {
22 |       var Pot = webduino.module.Pot;
23 |       this.pot = new Pot(board, this.analogpin);
24 |     };
25 | 
26 |     proto.on = function(callback) {
27 |       if (typeof callback === 'function') {
28 |         this.pot.on(function(val) {
29 |           val = val.toFixed(5);
30 |           callback(val);
31 |         });
32 |       }
33 |     };
34 | 
35 |     proto.off = function() {
36 |       this.pot.off();
37 |     };
38 | 
39 |     proto.detachedCallback = function() {
40 |       this.off();
41 |     };
42 | 
43 |     document.registerElement('wa-pot', {
44 |       prototype: proto
45 |     });
46 | 
47 |   })();
48 |   </script>
49 | </body>
50 | 
51 | </html>


--------------------------------------------------------------------------------
/wa-relay.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Relay.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('pin', val);
17 |         }
18 |       },
19 |       state: {
20 |         get: function() {
21 |           return this.getAttribute('state');
22 |         },
23 |         set: function(val) {
24 |           this.setAttribute('state', val);
25 |         }
26 |       }
27 |     });
28 | 
29 |     proto.init_ = function(board) {
30 |       var observer, config,
31 |         Relay = webduino.module.Relay;
32 | 
33 |       this.relay = new Relay(board, board.getDigitalPin(this.pin));
34 | 
35 |       if (this.state === 'on') {
36 |         this.on();
37 |       }
38 |     };
39 | 
40 |     proto.on = function(callback) {
41 |       this.relay.on(callback);
42 |     };
43 | 
44 |     proto.off = function(callback) {
45 |       this.relay.off(callback);
46 |     };
47 | 
48 |     proto.toggle = function(callback) {
49 |       this.relay.toggle(callback);
50 |     };
51 | 
52 |     proto.attributeChangedCallback = function(attrName, oldVal, newVal) {
53 |       if (this.relay) {
54 |         switch (attrName) {
55 |           case 'state':
56 |             newVal === "on" ? this.on() : this.off();
57 |             break;
58 |         }
59 |       }
60 |     };
61 | 
62 |     document.registerElement('wa-relay', {
63 |       prototype: proto
64 |     });
65 | 
66 |   })();
67 |   </script>
68 | </body>
69 | 
70 | </html>
71 | 


--------------------------------------------------------------------------------
/wa-rfid.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/RFID.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       isReading: {
12 |         get: function() {
13 |           return !!(this.rfid && this.rfid.isReading);
14 |         }
15 |       }
16 |     });
17 | 
18 |     proto.init_ = function(board) {
19 |       var RFID = webduino.module.RFID;
20 |       this.rfid = new RFID(board);
21 |     };
22 | 
23 |     proto.read = function(enterHandler, leaveHandler) {
24 |       this.rfid.read(enterHandler, leaveHandler);
25 |     };
26 | 
27 |     proto.stopRead = function() {
28 |       this.rfid.stopRead();
29 |     };
30 | 
31 |     proto.on = function(evtType, handler) {
32 |       this.rfid.on(evtType, handler);
33 |     };
34 | 
35 |     proto.off = function(evtType, handler) {
36 |       this.rfid.off(evtType, handler);
37 |     };
38 | 
39 |     proto.detachedCallback = function() {
40 |       this.rfid.destroy();
41 |     };
42 | 
43 |     document.registerElement('wa-rfid', {
44 |       prototype: proto
45 |     });
46 | 
47 |   })();
48 |   </script>
49 | </body>
50 | 
51 | </html>


--------------------------------------------------------------------------------
/wa-rgbled.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Led.js"></script>
 5 |   <script type="text/javascript" src="../webduino-js/src/module/RGBLed.js"></script>
 6 | </head>
 7 | 
 8 | <body>
 9 |   <script>
10 |   (function() {
11 |     var proto = Object.create(HTMLElement.prototype, {
12 |       red: {
13 |         get: function() {
14 |           return this.getAttribute('red');
15 |         },
16 |         set: function(val) {
17 |           this.setAttribute('red', val);
18 |         }
19 |       },
20 |       green: {
21 |         get: function() {
22 |           return this.getAttribute('green');
23 |         },
24 |         set: function(val) {
25 |           this.setAttribute('green', val);
26 |         }
27 |       },
28 |       blue: {
29 |         get: function() {
30 |           return this.getAttribute('blue');
31 |         },
32 |         set: function(val) {
33 |           this.setAttribute('blue', val);
34 |         }
35 |       }
36 |     });
37 | 
38 |     proto.init_ = function(board) {
39 |       var RGBLed = webduino.module.RGBLed;
40 | 
41 |       this.rgbled = new RGBLed(
42 |         board,
43 |         board.getDigitalPin(this.red),
44 |         board.getDigitalPin(this.green),
45 |         board.getDigitalPin(this.blue),
46 |         RGBLed.COMMON_ANODE);
47 |     };
48 | 
49 |     proto.setColor = function(r, g, b, callback) {
50 |       this.rgbled.setColor(r, g, b, callback);
51 |     }
52 | 
53 |     document.registerElement('wa-rgbled', {
54 |       prototype: proto
55 |     });
56 | 
57 |   })();
58 |   </script>
59 | </body>
60 | 
61 | </html>
62 | 


--------------------------------------------------------------------------------
/wa-servo.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Servo.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('pin', val);
17 |         }
18 |       },
19 |       angle: {
20 |         get: function() {
21 |           return this.getAttribute('angle');
22 |         },
23 |         set: function(val) {
24 |           this.setAttribute('angle', val);
25 |         }
26 |       }
27 |     });
28 | 
29 |     proto.init_ = function(board) {
30 |       var Servo = webduino.module.Servo;
31 |       this.servo = new Servo(board, board.getDigitalPin(this.pin));
32 | 
33 |       if (this.angle !== null) {
34 |         this.servo.angle = this.angle
35 |       } else {
36 |         this.angle = 90;
37 |       }
38 |     };
39 | 
40 |     proto.attributeChangedCallback = function(attrName, oldVal, newVal) {
41 |       if (this.servo) {
42 |         switch (attrName) {
43 |           case 'angle':
44 |             this.servo.angle = newVal;
45 |             break;
46 |         }
47 |       }
48 |     };
49 | 
50 |     document.registerElement('wa-servo', {
51 |       prototype: proto
52 |     });
53 | 
54 |   })();
55 |   </script>
56 | </body>
57 | 
58 | </html>
59 | 


--------------------------------------------------------------------------------
/wa-shock.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Shock.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('pin', val);
17 |         }
18 |       }
19 |     });
20 | 
21 |     proto.init_ = function(board) {
22 |       var events, shock,
23 |         self = this,
24 |         Shock = webduino.module.Shock,
25 |         ShockEvent = webduino.module.ShockEvent;
26 | 
27 |       events = new webduino.Events();
28 |       shock = new Shock(board, board.getDigitalPin(self.pin));
29 | 
30 |       self.events_ = events;
31 |       self.shock = shock;
32 | 
33 |       shock.on(ShockEvent.HIGH, function() {
34 |         events.emit('high');
35 |       });
36 | 
37 |       shock.on(ShockEvent.LOW, function() {
38 |         events.emit('low');
39 |       });
40 |     };
41 | 
42 |     proto.on = function(eventType, handler) {
43 |       this.events_.on(eventType, handler);
44 |     };
45 | 
46 |     proto.off = function(eventType, handler) {
47 |       this.events_.off(eventType, handler);
48 |     };
49 | 
50 |     document.registerElement('wa-shock', {
51 |       prototype: proto
52 |     });
53 | 
54 |   })();
55 |   </script>
56 | </body>
57 | 
58 | </html>
59 | 


--------------------------------------------------------------------------------
/wa-soil.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Soil.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       analogpin: {
12 |         get: function() {
13 |           return this.getAttribute('analogpin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('analogpin', val);
17 |         }
18 |       }
19 |     });
20 | 
21 |     proto.init_ = function(board) {
22 |       var Soil = webduino.module.Soil;
23 |       this.soil = new Soil(board, this.analogpin);
24 |     };
25 | 
26 |     proto.on = function(callback) {
27 |       if (typeof callback === 'function') {
28 |         this.soil.on(function(val) {
29 |           callback(val);
30 |         });
31 |       }
32 |     };
33 | 
34 |     proto.off = function() {
35 |       this.soil.off();
36 |     };
37 | 
38 |     proto.detachedCallback = function() {
39 |       this.off();
40 |     };
41 | 
42 |     document.registerElement('wa-soil', {
43 |       prototype: proto
44 |     });
45 | 
46 |   })();
47 |   </script>
48 | </body>
49 | 
50 | </html>


--------------------------------------------------------------------------------
/wa-sound.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Sound.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('pin', val);
17 |         }
18 |       }
19 |     });
20 | 
21 |     proto.init_ = function(board) {
22 |       var events, sound,
23 |         self = this,
24 |         Sound = webduino.module.Sound,
25 |         SoundEvent = webduino.module.SoundEvent;
26 | 
27 |       events = new webduino.Events();
28 |       sound = new Sound(board, board.getDigitalPin(self.pin));
29 | 
30 |       self.events_ = events;
31 |       self.sound = sound;
32 | 
33 |       sound.on(SoundEvent.DETECTED, function() {
34 |         events.emit('detected');
35 |       });
36 | 
37 |       sound.on(SoundEvent.ENDED, function() {
38 |         events.emit('ended');
39 |       });
40 |     };
41 | 
42 |     proto.on = function(eventType, handler) {
43 |       this.events_.on(eventType, handler);
44 |     };
45 | 
46 |     proto.off = function(eventType, handler) {
47 |       this.events_.off(eventType, handler);
48 |     };
49 | 
50 |     document.registerElement('wa-sound', {
51 |       prototype: proto
52 |     });
53 | 
54 |   })();
55 |   </script>
56 | </body>
57 | 
58 | </html>
59 | 


--------------------------------------------------------------------------------
/wa-ssd1306.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/SSD1306.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       textSize: {
12 |         get: function() {
13 |           return this.getAttribute('textSize');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('textSize', val);
17 |         }
18 |       },
19 |       x: {
20 |         get: function() {
21 |           return this.getAttribute('x');
22 |         },
23 |         set: function(val) {
24 |           this.setAttribute('x', val);
25 |         }
26 |       },
27 |       y: {
28 |         get: function() {
29 |           return this.getAttribute('y');
30 |         },
31 |         set: function(val) {
32 |           this.setAttribute('y', val);
33 |         }
34 |       },
35 |       text: {
36 |         get: function() {
37 |           return this.getAttribute('text');
38 |         },
39 |         set: function(val) {
40 |           this.setAttribute('text', val);
41 |         }
42 |       }
43 |     });
44 | 
45 |     proto.init_ = function(board) {
46 |       this.display = new webduino.module.SSD1306(board);
47 |       this.display.clear();
48 |       this.display.textSize = this.textSize;
49 |       this.display.print(this.x, this.y, this.text);
50 |     };
51 | 
52 |     proto.print = function(x, y, text) {
53 |       this.display.textSize = this.textSize;
54 |       this.display.print(x, y, text);
55 |     };
56 | 
57 |     proto.clear = function() {
58 |       this.display.clear();
59 |     };
60 | 
61 |     proto.detachedCallback = function() {
62 |       //this.off();
63 |     };
64 | 
65 |     document.registerElement('wa-ssd1306', {
66 |       prototype: proto
67 |     });
68 | 
69 |   })();
70 |   </script>
71 | </body>
72 | 
73 | </html>


--------------------------------------------------------------------------------
/wa-stepper.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 | <head>
  4 |   <script type="text/javascript" src="../webduino-js/src/module/Stepper.js"></script>
  5 | </head>
  6 | 
  7 | <body>
  8 |   <script>
  9 |   (function() {
 10 |     var proto = Object.create(HTMLElement.prototype, {
 11 |       stepperNumber: {
 12 |         get: function() {
 13 |           return this.getAttribute('stepperNumber');
 14 |         },
 15 |         set: function(val) {
 16 |           this.setAttribute('stepperNumber', val);
 17 |         }
 18 |       },
 19 |       interface: {
 20 |         get: function() {
 21 |           return this.getAttribute('interface');
 22 |         },
 23 |         set: function(val) {
 24 |           this.setAttribute('interface', val);
 25 |         }
 26 |       },
 27 |       stepsPerRevolution: {
 28 |         get: function() {
 29 |           return this.getAttribute('stepsPerRevolution');
 30 |         },
 31 |         set: function(val) {
 32 |           this.setAttribute('stepsPerRevolution', val);
 33 |         }
 34 |       },
 35 |       pin1: {
 36 |         get: function() {
 37 |           return this.getAttribute('pin1');
 38 |         },
 39 |         set: function(val) {
 40 |           this.setAttribute('pin1', val);
 41 |         }
 42 |       },
 43 |       pin2: {
 44 |         get: function() {
 45 |           return this.getAttribute('pin2');
 46 |         },
 47 |         set: function(val) {
 48 |           this.setAttribute('pin2', val);
 49 |         }
 50 |       },
 51 |       pin3: {
 52 |         get: function() {
 53 |           return this.getAttribute('pin3');
 54 |         },
 55 |         set: function(val) {
 56 |           this.setAttribute('pin3', val);
 57 |         }
 58 |       },
 59 |       pin4: {
 60 |         get: function() {
 61 |           return this.getAttribute('pin4');
 62 |         },
 63 |         set: function(val) {
 64 |           this.setAttribute('pin4', val);
 65 |         }
 66 |       }
 67 |     });
 68 | 
 69 |     proto.init_ = function(board) {
 70 |       var Stepper = webduino.module.Stepper;
 71 |       var infoObj = {
 72 |         "stepperNumber": this.stepperNumber,
 73 |         "interface": this.interface,
 74 |         "stepsPerRevolution": this.stepsPerRevolution,
 75 |         "pin1": this.pin1,
 76 |         "pin2": this.pin2,
 77 |         "pin3": this.pin3,
 78 |         "pin4": this.pin4
 79 |       };
 80 |       this.stepper = new Stepper(board, infoObj);
 81 |     };
 82 | 
 83 |     proto.on = function(command, callback) {
 84 |       if (typeof callback === 'function') {
 85 |         this.stepper.on(command, function(val) {
 86 |           callback(val);
 87 |         });
 88 |       }
 89 |     };
 90 | 
 91 |     proto.detachedCallback = function() {
 92 |       this.stepper.off();
 93 |     };
 94 | 
 95 |     document.registerElement('wa-stepper', {
 96 |       prototype: proto
 97 |     });
 98 | 
 99 |   })();
100 |   </script>
101 | </body>
102 | 
103 | </html>


--------------------------------------------------------------------------------
/wa-tilt.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Tilt.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       pin: {
12 |         get: function() {
13 |           return this.getAttribute('pin');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('pin', val);
17 |         }
18 |       }
19 |     });
20 | 
21 |     proto.init_ = function(board) {
22 |       var events, tilt,
23 |         self = this,
24 |         Tilt = webduino.module.Tilt,
25 |         TiltEvent = webduino.module.TiltEvent;
26 | 
27 |       events = new webduino.Events();
28 |       tilt = new Tilt(board, board.getDigitalPin(self.pin));
29 | 
30 |       self.events_ = events;
31 |       self.tilt = tilt;
32 | 
33 |       tilt.on(TiltEvent.HIGH, function() {
34 |         events.emit('high');
35 |       });
36 | 
37 |       tilt.on(TiltEvent.LOW, function() {
38 |         events.emit('low');
39 |       });
40 |     };
41 | 
42 |     proto.on = function(eventType, handler) {
43 |       this.events_.on(eventType, handler);
44 |     };
45 | 
46 |     proto.off = function(eventType, handler) {
47 |       this.events_.off(eventType, handler);
48 |     };
49 | 
50 |     document.registerElement('wa-tilt', {
51 |       prototype: proto
52 |     });
53 | 
54 |   })();
55 |   </script>
56 | </body>
57 | 
58 | </html>
59 | 


--------------------------------------------------------------------------------
/wa-ultrasonic.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 | <head>
 4 |   <script type="text/javascript" src="../webduino-js/src/module/Ultrasonic.js"></script>
 5 | </head>
 6 | 
 7 | <body>
 8 |   <script>
 9 |   (function() {
10 |     var proto = Object.create(HTMLElement.prototype, {
11 |       trig: {
12 |         get: function() {
13 |           return this.getAttribute('trig');
14 |         },
15 |         set: function(val) {
16 |           this.setAttribute('trig', val);
17 |         }
18 |       },
19 |       echo: {
20 |         get: function() {
21 |           return this.getAttribute('echo');
22 |         },
23 |         set: function(val) {
24 |           this.setAttribute('echo', val);
25 |         }
26 |       }
27 |     });
28 | 
29 |     proto.init_ = function(board) {
30 |       var Ultrasonic = webduino.module.Ultrasonic;
31 |       this.ultrasonic = new Ultrasonic(board, board.getDigitalPin(this.trig), board.getDigitalPin(this.echo));
32 |     };
33 | 
34 |     proto.ping = function(callback, interval) {
35 |       this.ultrasonic.ping(callback, interval);
36 |     }
37 | 
38 |     proto.stopPing = function() {
39 |       this.ultrasonic.stopPing();
40 |     }
41 | 
42 |     document.registerElement('wa-ultrasonic', {
43 |       prototype: proto
44 |     });
45 | 
46 |   })();
47 |   </script>
48 | </body>
49 | 
50 | </html>
51 | 


--------------------------------------------------------------------------------
/web-arduino.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 | <head>
  4 |   <script type="text/javascript" src="js/wa.js"></script>
  5 |   <script type="text/javascript" src="js/wa.event.js"></script>
  6 |   <script type="text/javascript" src="../webduino-js/dist/webduino-base.min.js"></script>
  7 | </head>
  8 | 
  9 | <body>
 10 |   <script>
 11 |   (function() {
 12 |     var count_ = 0;
 13 | 
 14 |     var proto = Object.create(HTMLElement.prototype, {
 15 |       device: {
 16 |         get: function() {
 17 |           return this.getAttribute('device');
 18 |         },
 19 |         set: function(val) {
 20 |           this.setAttribute('device', val);
 21 |         }
 22 |       },
 23 |       server: {
 24 |         get: function() {
 25 |           return this.getAttribute('server');
 26 |         },
 27 |         set: function(val) {
 28 |           this.setAttribute('server', val);
 29 |         }
 30 |       },
 31 |       multi: {
 32 |         get: function() {
 33 |           return this.getAttribute('multi');
 34 |         },
 35 |         set: function(val) {
 36 |           this.setAttribute('multi', val);
 37 |         }
 38 |       },
 39 |       autoReconnect: {
 40 |         get: function() {
 41 |           return this.getAttribute('autoReconnect');
 42 |         },
 43 |         set: function(val) {
 44 |           this.setAttribute('autoReconnect', val);
 45 |         }
 46 |       },
 47 |       path: {
 48 |         get: function() {
 49 |           return this.getAttribute('path');
 50 |         },
 51 |         set: function(val) {
 52 |           this.setAttribute('path', val);
 53 |         }
 54 |       },
 55 |       baudRate: {
 56 |         get: function() {
 57 |           return this.getAttribute('baudRate');
 58 |         },
 59 |         set: function(val) {
 60 |           this.setAttribute('baudRate', val);
 61 |         }
 62 |       },
 63 |       address: {
 64 |         get: function() {
 65 |           return this.getAttribute('address');
 66 |         },
 67 |         set: function(val) {
 68 |           this.setAttribute('address', val);
 69 |         }
 70 |       },
 71 |       ws: {
 72 |         get: function() {
 73 |           return this.getAttribute('ws');
 74 |         },
 75 |         set: function(val) {
 76 |           this.setAttribute('ws', val);
 77 |         }
 78 |       }
 79 |     });
 80 | 
 81 |     proto.init = function() {
 82 |       var board, ev,
 83 |         self = this,
 84 |         WebArduino = webduino.WebArduino,
 85 |         Arduino = webduino.Arduino,
 86 |         BoardEvent = webduino.BoardEvent,
 87 |         util = webduino.util,
 88 |         events = self.events_,
 89 |         device = self.device,
 90 |         server = self.server,
 91 |         multi = self.multi,
 92 |         autoReconnect = self.autoReconnect,
 93 |         path = self.path,
 94 |         baudRate = self.baudRate,
 95 |         address = self.address,
 96 |         ws = self.ws;
 97 | 
 98 |       if (device || path || address || ws) {
 99 |         if (device) {
100 |           self.board = board = new WebArduino(util.extend({
101 |             device: device
102 |           }, {
103 |             server: server || undefined,
104 |             multi: multi || undefined,
105 |             autoReconnect: autoReconnect || undefined
106 |           }));
107 |         } else if (path) {
108 |           self.board = board = new Arduino(util.extend({
109 |             transport: 'serial',
110 |             path: path
111 |           }, {
112 |             baudRate: baudRate || undefined
113 |           }));
114 |         } else if (address){
115 |           self.board = board = new Arduino({
116 |             transport: 'bluetooth',
117 |             address: address
118 |           });
119 |         } else {
120 |           self.board = board = new Arduino({
121 |             transport: 'websocket',
122 |             url: ws
123 |           })
124 |         }
125 | 
126 |         board.on(BoardEvent.READY, function(event) {
127 |           var children = self.children;
128 |           for (var i = 0, len = children.length; i < len; i++) {
129 |             children[i].init_ && children[i].init_(board);
130 |           }
131 |           events.emit('ready', [event], self);
132 | 
133 |           // boardsReady
134 |           --count_;
135 |           try {
136 |             if (count_ === 0) {
137 |               ev = new Event("boardsReady", {
138 |                 "bubbles": true,
139 |                 "cancelable": false
140 |               });
141 |               document.dispatchEvent(ev);
142 |             }
143 |           } catch (e) {
144 |             // nothing
145 |           }
146 |         });
147 | 
148 |         board.on(BoardEvent.STRING_MESSAGE, function(event) {
149 |           events.emit('message', [event], self);
150 |         });
151 |       }
152 |     };
153 | 
154 |     proto.on = function(eventType, handler) {
155 |       this.events_.on(eventType, handler);
156 |     };
157 | 
158 |     proto.off = function(eventType, handler) {
159 |       this.events_.off(eventType, handler);
160 |     };
161 | 
162 |     proto.sendString = function(message) {
163 |       this.board.sendString(message);
164 |     };
165 | 
166 |     proto.systemReset = function(message) {
167 |       this.board.systemReset();
168 |       this.board.startup();
169 |     };
170 | 
171 |     proto.createdCallback = function() {
172 |       ++count_;
173 |     };
174 | 
175 |     proto.attachedCallback = function() {
176 |       this.events_ = new webduino.Events();
177 |       this.init();
178 |     };
179 | 
180 |     document.registerElement('web-arduino', {
181 |       prototype: proto
182 |     });
183 | 
184 |   })();
185 |   </script>
186 | </body>
187 | 
188 | </html>
189 | 


--------------------------------------------------------------------------------