More Related Content Similar to Web + Arduino 實在有夠潮 ( 課程簡報 ) (20) Web + Arduino 實在有夠潮 ( 課程簡報 ) 15. 小威 = 專用電路板 + Arduino Pro Mini + esp8266
專用電路板Arduino Pro Miniesp 8266 小威
84. STEP 1 STEP 2
將按鈕扳動至下圖的位置 ( 左側 )
就可以開始進行初始化設定。
小威接電源啟動
85. STEP 3 STEP 4
使用電腦或行動裝置
wifi 搜尋小威名稱
連線指定裝置
( 需輸入卡片上的裝置密碼 )
打開 Chrome鍵入 http://192.168.4.1
進入小威上網設定頁面
( 此處的 SSID 為 AP 的,不是小威的,別混淆喔 )
ssid:MPTC-MeetingL / pwd:0423692699
86. STEP 5 STEP 6
輸入 AP 的 SSID 以及密碼
按下 submit 後出現 Save OK
表示小威設定成功
此時就可以移除電源,將按鈕扳到右側
重新接上電源
小威的紅色 LED 燈熄滅,表示連線成功
90. 將 LED 的長腳接在 10 的位置,
短腳接在 GND 的位置,
接完 LED 之後接上電源。
37
91. HTML<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LED</title>
<script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel='import' href='http://webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='http://webduino.io/components/webduino/wa-led.html' />
</head>
<body>
<div id='light' class="off">
<img src='http://i.imgur.com/T5H4MHE.png'></img>
<img src='http://i.imgur.com/8qFj2Ou.png'></img>
</div>
<web-arduino id="board" device='你的 device 名稱'>
<wa-led id='led' pin='10'></wa-led>
</web-arduino>
</body>
</html>
93. Javascript
window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board'),
light = document.getElementById('light');
board.on('ready',function ready() {
var led = document.getElementById('led');
light.addEventListener('click', function() {
if(light.className == 'on'){
led.off();
light.className = 'off';
}else{
led.on();
light.className = 'on';
}
}, false);
});
}, false);
97. 將 LED 的接在 10 和 11,
短腳共用 GND 的位置,
接完 LED 之後接上電源。
98. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LED</title>
<script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel='import' href='http://webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='http://webduino.io/components/webduino/wa-led.html' />
</head>
<body>
<div id='light-red' class="off">
<img src='http://i.imgur.com/T5H4MHE.png'></img>
<img src='http://i.imgur.com/8qFj2Ou.png'></img>
</div>
<div id='light-green' class="off">
<img src='http://i.imgur.com/T5H4MHE.png'></img>
<img src='http://i.imgur.com/8qFj2Ou.png'></img>
</div>
<web-arduino id="board" device='你的 device 名稱'>
<wa-led id='led-red' pin='10'></wa-led>
<wa-led id='led-green' pin='11'></wa-led>
</web-arduino>
</body>
</html>
99. CSS
#light-red img, #light-green img{
width:50%;
display:none;
}
#light-red.off img:first-child, #light-green.off img:first-child{
display:inline-block;
}
#light-red.on img:last-child, #light-green.on img:last-child{
display:inline-block;
}
100. Javascript
lightRed.addEventListener('click', function() {
if(lightRed.className == 'on'){
red.off();
lightRed.className = 'off';
}else{
red.on();
lightRed.className = 'on';
}
}, false);
window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board'),
lightRed = document.getElementById('light-red'),
lightGreen = document.getElementById('light-green');
board.on('ready',function ready() {
var red = document.getElementById('led-red');
var green = document.getElementById('led-green');
lightRed.addEventListener('click', function() {
if(lightRed.className == 'on'){
red.off();
lightRed.className = 'off';
}else{
red.on();
lightRed.className = 'on';
}
}, false);
lightGreen.addEventListener('click', function() {
if(lightGreen.className == 'on'){
green.off();
lightGreen.className = 'off';
}else{
green.on();
lightGreen.className = 'on';
}
}, false);
});
}, false);
107. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三色 LED</title>
<script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel='import' href='http://webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='http://webduino.io/components/webduino/wa-rgbled.html'/>
</head>
<body>
<button id='redBtn'>red</button>
<button id='greenBtn'>green</button>
<button id='blueBtn'>blue</button>
<button id='cleanBtn'>clean</button>
<web-arduino id='board' device='你的 device 名稱'>
<wa-rgbled id='rgb' red='6' blue='7' green='8'></wa-rgbled>
</web-arduino>
</body>
</html>
108. 其他顏色
redBtn.addEventListener('click', function () {
rgb.setColor(255, 0, 0); //紅光
}, false);
greenBtn.addEventListener('click', function () {
rgb.setColor(0, 255, 0); //綠光
}, false);
blueBtn.addEventListener('click', function () {
rgb.setColor(0, 0, 255); //藍光
}, false);
redBtn.addEventListener('click', function () {
rgb.setColor(255, 255, 0); //黃光
}, false);
greenBtn.addEventListener('click', function () {
rgb.setColor(255, 0, 255); //紫光
}, false);
blueBtn.addEventListener('click', function () {
rgb.setColor(0, 255, 255); //青光
}, false);
109. Javascript
window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board');
board.on('ready',function() {
var redBtn = document.getElementById('redBtn'),
greenBtn = document.getElementById('greenBtn'),
blueBtn = document.getElementById('blueBtn'),
cleanBtn = document.getElementById('cleanBtn'),
rgb = document.getElementById('rgb');
redBtn.addEventListener('click', function () {
rgb.setColor(255, 0, 0); //亮紅光
}, false);
greenBtn.addEventListener('click', function () {
rgb.setColor(0, 255, 0); //亮綠光
}, false);
blueBtn.addEventListener('click', function () {
rgb.setColor(0, 0, 255); //亮藍光
}, false);
cleanBtn.addEventListener('click', function () {
rgb.setColor(0, 0, 0); //全部燈光熄滅
}, false);
});
}, false);
113. V : VCC
R : 腳位 6
B : 腳位 9
G : 腳位 10
PWM
Pulse Width Modulation
114. HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三色 LED 調色盤</title>
<script src="http://webduino.io/components/webcomponentsjs/webcomponents.js"
></script>
<link rel='import' href='http://webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='http://webduino.io/components/webduino/wa-rgbled.html'/>
</head>
<body>
<div>
<label>red:</label>
<input id='redBtn' type='range' min='0' max='255' step='5' value='0'>
</div>
<div>
<label>green: </label>
<input id='greenBtn' type='range' min='0' max='255' step='5' value='0'>
</div>
<div>
<label>blue: </label>
<input id='blueBtn' type='range' min='0' max='255' step='5' value='0'>
</div>
<div id="show"></div>
<web-arduino id='board' device="你的 device 名稱">
<wa-rgbled id='rgb' red='6' blue='9' green='10'></wa-rgbled>
</web-arduino>
</body>
</html>
116. Javascript
var redBtn = document.getElementById('redBtn'),
greenBtn = document.getElementById('greenBtn'),
blueBtn = document.getElementById('blueBtn'),
rgb = document.getElementById('rgb'),
show = document.getElementById('show'),
r = 0,
g = 0,
b = 0;
window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board');
board.on('ready',function() {
var redBtn = document.getElementById('redBtn'),
greenBtn = document.getElementById('greenBtn'),
blueBtn = document.getElementById('blueBtn'),
rgb = document.getElementById('rgb'),
show = document.getElementById('show'),
r = 0,
g = 0,
b = 0;
var handler = function(evt) {
var target = evt.target,
id = target.id;
switch (id) {
case 'redBtn':
r = target.value;
break;
case 'greenBtn':
g = target.value;
break;
case 'blueBtn':
b = target.value;
break;
}
show.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + '255)';
rgb.setColor(r, g, b);
};
redBtn.addEventListener('change', handler, false);
greenBtn.addEventListener('change', handler, false);
blueBtn.addEventListener('change', handler, false);
});
}, false);
117. var handler = function(evt) {
var target = evt.target,
id = target.id;
switch (id) {
case 'redBtn':
r = target.value;
break;
case 'greenBtn':
g = target.value;
break;
case 'blueBtn':
b = target.value;
break;
}
show.style.backgroundColor = 'rgba(' + r + ',' + g + ','
+ b + ',' + '255)';
rgb.setColor(r, g, b);
};
window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board');
board.on('ready',function() {
var redBtn = document.getElementById('redBtn'),
greenBtn = document.getElementById('greenBtn'),
blueBtn = document.getElementById('blueBtn'),
rgb = document.getElementById('rgb'),
show = document.getElementById('show'),
r = 0,
g = 0,
b = 0;
var handler = function(evt) {
var target = evt.target,
id = target.id;
switch (id) {
case 'redBtn':
r = target.value;
break;
case 'greenBtn':
g = target.value;
break;
case 'blueBtn':
b = target.value;
break;
}
show.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + '255)';
rgb.setColor(r, g, b);
};
redBtn.addEventListener('change', handler, false);
greenBtn.addEventListener('change', handler, false);
blueBtn.addEventListener('change', handler, false);
});
}, false);
118. redBtn.addEventListener('change', handler, false);
greenBtn.addEventListener('change', handler, false);
blueBtn.addEventListener('change', handler, false);
window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board');
board.on('ready',function() {
var redBtn = document.getElementById('redBtn'),
greenBtn = document.getElementById('greenBtn'),
blueBtn = document.getElementById('blueBtn'),
rgb = document.getElementById('rgb'),
show = document.getElementById('show'),
r = 0,
g = 0,
b = 0;
var handler = function(evt) {
var target = evt.target,
id = target.id;
switch (id) {
case 'redBtn':
r = target.value;
break;
case 'greenBtn':
g = target.value;
break;
case 'blueBtn':
b = target.value;
break;
}
show.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ',' + '255)';
rgb.setColor(r, g, b);
};
redBtn.addEventListener('change', handler, false);
greenBtn.addEventListener('change', handler, false);
blueBtn.addEventListener('change', handler, false);
});
}, false);
122. VCC : 3.3V Trig : 腳位 11
Echo : 腳位 10 GND : GND
123. HTML<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超音波傳感器</title>
<script src="//webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel='import' href='//webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='//webduino.io/components/webduino/wa-ultrasonic.html' />
</head>
<body>
<p id='show'></p>
<web-arduino id='board' device="你的 device 名稱">
<wa-ultrasonic id='ultrasonic' trig='11' echo='10'></wa-ultrasonic>
</web-arduino>
</body>
</html>
128. HTML<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>超音波傳感器控制圖片大小 </title
<script src="//webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel='import' href='//webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='//webduino.io/components/webduino/wa-ultrasonic.html' />
</head>
<body>
<img id='img' src='//www.hua.com/flower_picture/meiguihua/images/r17.jpg'></img>
<web-arduino id='board' device="你的 device 名稱">
<wa-ultrasonic id='ultrasonic' trig='11' echo='10'></wa-ultrasonic>
</web-arduino>
</body>
</html>
129. Javascript
window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board');
board.on('ready',function() {
var ultrasonic = document.getElementById('ultrasonic'),
img = document.getElementById('img');
ultrasonic.ping(function(cm) {
img.style.width = cm*20 + 'px';
img.style.height = cm*20 + 'px';
}, 1000);
});
}, false);
133. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超音波傳感器 改變音量</title>
<script src="//webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel='import' href='//webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='//webduino.io/components/webduino/wa-ultrasonic.html' />
<link rel='import' href='//webduino.io/components/webduino/wa-rgbled.html' />
</head>
<body>
<web-arduino id='board' device="你的 device 名稱">
<wa-ultrasonic id='ultrasonic' trig='11' echo='10'></wa-ultrasonic>
</web-arduino>
<div id="show">0</div>
<div id="bar"></div>
<audio id='player' loop="loop" value="1">
<source src="https://webduinoio.github.io/event20150408/demo/minions/music.mp3" type="audio/mpeg">
<source src="https://webduinoio.github.io/event20150408/demo/minions/music.ogg" type="audio/ogg">
</audio>
</body>
</html>
HTML
134. window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board');
board.on('ready',function() {
var ultrasonic = document.getElementById('ultrasonic'),
show = document.getElementById('show'),
player = document.getElementById('player'),
bar = document.getElementById('bar'),
a,
b;
player.play();
ultrasonic.ping(function (cm) {
show.innerHTML = cm;
a = cm/100;
b = cm;
if(a>=1){
a=1;
}
player.volume = a;
if(b>255){
b=255;
}
bar.style.background = 'rgba('+b+','+(255-b)+',0,1 )';
bar.style.width = (10+b)+'px';
}, 300);
});
}, false);
Javascript
ultrasonic.ping(function (cm) {
show.innerHTML = cm;
a = cm/100;
b = cm;
if(a>=1){
a=1;
}
player.volume = a;
if(b>255){
b=255;
}
bar.style.background = 'rgba('+b+','+(255-b)+',0,1 )';
bar.style.width = (10+b)+'px';
}, 300);
});
139. 超音波
VCC : 3.3V Trig : 腳位 11
Echo : 腳位 10 GND : GND
三色 LED
V : VCC R:6
G:7 B:8
149. window.addEventListener('WebComponentsReady', function() {
var board = document.getElementById('board');
board.on('ready', function() {
boardsReady();
});
}, false);
function boardsReady() {
var button = document.getElementById('button'),
show = document.getElementById('show'),
a=0;
button.on('pressed',function(){
a=a+1;
show.innerHTML = a;
});
}
Javascript
button.on('pressed',function(){
a=a+1;
show.innerHTML = a;
});
163. HTML<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-
scalable=no">
<title>servo</title>
<script src="//webduino.io/components/webcomponentsjs/webcomponents.js"></script>
<link rel='import' href='//webduino.io/components/webduino/web-arduino.html' />
<link rel='import' href='//webduino.io/components/webduino/wa-servo.html' />
</head>
<body>
<div id="show"></div>
<input id="r" type="range" min='-80' max='80' step='10' value='0'></input>
<web-arduino id="board" device='你的 device 名稱'>
<wa-servo id='servo' pin='9'></wa-servo>
</web-arduino>
</body>
</html>
164. Javascript
window.addEventListener('WebComponentsReady', function () {
var board = document.getElementById('board'),
r = document.getElementById('r'),
show = document.getElementById('show');
show.innerText = 0;
board.on('ready',function ready() {
var servo = document.getElementById('servo'),
a = 0;
servo.angle= -a + 90;
show.innerText = a;
r.addEventListener('change',function(e){
var t = e.target;
a = t.value;
servo.angle= -a + 90;
show.innerText = a;
});
},false);
}, false);