This repository was archived by the owner on Feb 12, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathtutorial-36-pump.html
More file actions
232 lines (192 loc) · 14.6 KB
/
Copy pathtutorial-36-pump.html
File metadata and controls
232 lines (192 loc) · 14.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="webduino.io">
<meta name="copyright" content="webduino.io">
<meta itemprop="name" content="webduino.io">
<link rel="icon" href="../img/layout/favicon.ico" type="image/x-icon">
<title>教學範例 36：網頁操控水泵 :::: Webduino = Web × Arduino</title>
<meta name="description" content="泵讀音「ㄅㄥˋ」，是一種用以增加液體或氣體的壓力，使之輸送流動的機械，我們亦可稱之為「幫浦」，透過馬達的加壓，可以做到一個管子抽水，然後從另外一個管子放水的動作，這篇我們將透過「繼電器」來控制水泵的啟動，進一步就可以實現從網頁操控水泵了。">
<meta itemprop="description" content="泵讀音「ㄅㄥˋ」，是一種用以增加液體或氣體的壓力，使之輸送流動的機械，我們亦可稱之為「幫浦」，透過馬達的加壓，可以做到一個管子抽水，然後從另外一個管子放水的動作，這篇我們將透過「繼電器」來控制水泵的啟動，進一步就可以實現從網頁操控水泵了。">
<meta property="og:description" content="泵讀音「ㄅㄥˋ」，是一種用以增加液體或氣體的壓力，使之輸送流動的機械，我們亦可稱之為「幫浦」，透過馬達的加壓，可以做到一個管子抽水，然後從另外一個管子放水的動作，這篇我們將透過「繼電器」來控制水泵的啟動，進一步就可以實現從網頁操控水泵了。">
<link rel="canonical" href="https://tutorials.webduino.io/zh-tw/docs/useful/example/smart-plant-pump.html">
<meta property="og:title" content="教學範例 36：網頁操控水泵" >
<meta property="og:url" content="https://webduino.io/tutorials/tutorial-36-pump.html">
<meta property="og:image" content="https://webduino.io/img/tutorials/tutorial-36-01s.jpg">
<meta itemprop="image" content="https://webduino.io/img/tutorials/tutorial-36-01s.jpg">
<script src="../js/lib/jquery.min.js"></script>
<script src="../js/lib/jquery.lazyload.min.js"></script>
<script src="../js/lib/run_prettify.js"></script>
<script src="../js/layout.js"></script>
<script src="../js/tutorials.js"></script>
<script src="../js/lib/disqus.js"></script>
<link rel="stylesheet" href="../style/css/lib/tomorrow.css">
<link rel="stylesheet" href="../style/css/layout.css">
<link rel="stylesheet" href="../style/css/sub-header.css">
<link rel="stylesheet" href="../style/css/tutorials-content.css">
<link rel="stylesheet" href="../style/css/lib/font-awesome.css">
</head>
<body>
<header class="path-0">
<a class="logo" href="index.html" data-name="layout-header-logo"></a>
<div class="mobile-menu"></div>
<div class="menu">
<a href="index.html" class="index" data-name="layout-mobile-menu">首頁</a>
<a href="tutorials.html" class="tutorials" data-name="layout-mobile-menu">教學範例</a>
<a href="buy.html" class="buy" data-name="layout-mobile-menu">產品總覽</a>
<a href="activity.html" class="activity" data-name="layout-mobile-menu">課程活動</a>
<a href="about.html" class="about" data-name="layout-mobile-men">關於我們</a>
<a href="en/index.html" class="english" data-name="layout-mobile-men">English</a>
</div>
</header>
<header class="path-1">
<a class="logo" href="../index.html"></a>
<div class="mobile-menu"></div>
<div class="menu">
<a href="../index.html" class="index" data-name="layout-menu">首頁</a>
<a href="../tutorials.html" class="tutorials" data-name="layout-menu">教學範例</a>
<a href="../buy.html" class="buy" data-name="layout-menu">產品總覽</a>
<a href="../activity.html" class="activity" data-name="layout-menu">課程活動</a>
<a href="../about.html" class="about" data-name="layout-menu">關於我們</a>
<a href="../en/index.html" class="english" data-name="layout-menu">English</a>
</div>
</header>
<div class="tutorials-content">
<div class="banner">
</div>
<h1>教學範例 36：網頁操控水泵</h1>
<p>泵讀音「ㄅㄥˋ」，是一種用以增加液體或氣體的壓力，使之輸送流動的機械，我們亦可稱之為「幫浦」，透過馬達的加壓，可以做到一個管子抽水，然後從另外一個管子放水的動作，這篇我們將透過「繼電器」來控制水泵的啟動，進一步就可以實現從網頁操控水泵了。</p>
<div class="buy-this">
<span>繼電器相關套件：<a href="https://webduino.io/buy/webduino-expansion-m.html" target="_blank">Webduino 擴充套件 M ( 支援馬克 1 號、Fly )</a></span>
<span>水泵套件：<a href="https://webduino.io/buy/webduino-package-plant.html" target="_blank">Webduino 智慧植栽套件 ( 支援馬克 1 號、Fly )</a></span>
<span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span>
</div>
<h2>接線與實作</h2>
<p>水泵的長相如下圖，水泵本身一定會有兩個開口，一個負責吸水而另外一個就是負責放水。</p>
<p><img src="../img/tutorials/tutorial-36-02.jpg" alt=""></p>
<p>水泵只有兩條電線，一條接 5V 一條接 GND，通電之後就會啟動內部的馬達開始抽水，所以在電路上使用一個繼電器作為開關，透過網頁控制繼電器，就可以啟動水泵或關閉水泵。( 可以參考 <a href="https://webduino.io/tutorials/tutorial-14-relay.html">教學範例 14：繼電器控制風扇旋轉</a> )</p>
<p><img src="../img/tutorials/tutorial-36-03.jpg" alt=""></p>
<p>水泵、繼電器、馬克一號接線示意圖：</p>
<p><img src="../img/tutorials/tutorial-36-04.jpg" alt=""></p>
<p>水泵、繼電器、Fly 接線示意圖：</p>
<p><img src="../img/tutorials/tutorial-36-05.jpg" alt=""></p>
<p>實際接線圖：</p>
<p><img src="../img/tutorials/tutorial-36-06.jpg" alt=""></p>
<p><img src="../img/tutorials/tutorial-36-07.jpg" alt=""></p>
<p><img src="../img/tutorials/tutorial-36-08.jpg" alt=""></p>
<div class="buy-this">
<span>繼電器相關套件：<a href="https://webduino.io/buy/webduino-expansion-m.html" target="_blank">Webduino 擴充套件 M ( 支援馬克 1 號、Fly )</a></span>
<span>水泵套件：<a href="https://webduino.io/buy/webduino-package-plant.html" target="_blank">Webduino 智慧植栽套件 ( 支援馬克 1 號、Fly )</a></span>
<span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span>
</div>
<h2>Webduino Blockly 操作解析</h2>
<p>打開 Webduino Blockly 編輯工具 ( <a href="https://blockly.webduino.io">https://blockly.webduino.io</a> )，把開發板放到編輯畫面裡，填入對應的 Webduino 開發板名稱，然後放入「繼電器」的積木，設定為 10 腳位。</p>
<p><img src="../img/tutorials/tutorial-36-09.jpg" alt=""></p>
<p>打開內嵌的網頁，下拉選單選擇「按鈕行為」，對應到左側選單的「網頁互動」裡的「按鈕行為」積木。</p>
<p><img src="../img/tutorials/tutorial-36-10.jpg" alt=""></p>
<p>設定點選按鈕 1 的時候讓繼電器的狀態為「on」( 水泵通電開始吸水放水 )，點選按鈕 2 的時候繼電器狀態為「off」，水泵關閉。</p>
<p><img src="../img/tutorials/tutorial-36-11.jpg" alt=""></p>
<p>確認開發板上線 ( 點選「<a href="https://webduino.io/device.html">檢查連線狀態</a>」查詢 )，點選右上方紅色按鈕執行，點選按鈕，就可以看到水泵開始吸水了。</p>
<p>( 解答：<a href="http://bin.webduino.io/keleb/edit?html,css,js,output">http://bin.webduino.io/keleb/edit?html,css,js,output</a> )</p>
<p>如果覺得想要把左右旋轉的方向顛倒 ( 原本往右轉變大聲，現在要改成往左轉變大聲 )，我們可以直接修改尺度轉換的數值，把 0 改成 1，把 1 改成 0 就可以，或者由接線著手，把接 3.3V 的位置換成接 GND，把 GND 換成接 3.3V，數值也會顛倒過來</p>
<p><img src="../img/tutorials/tutorial-35-06.jpg" alt=""></p>
<h2>範例解析 ( <a href="https://bin.webduino.io/qazu/edit?html,css,js,output">完整程式碼</a>、<a href="https://webduino.io/device.html">檢查連線狀態</a> )</h2>
<p>HTML 的 header 引入 <code>webduino-all.min.js</code>，目的在讓瀏覽器可以支援 WebComponents 以及 Webduino 所有的元件，如果是用 Blockly 編輯工具產生的程式碼，則要額外引入 <code>webduino-blockly.js</code>。</p>
<pre><code><script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
<script src="https://webduinoio.github.io/webduino-blockly/webduino-blockly.js"></script>
</code></pre><p>HTML 的部分會放入一些按鈕。</p>
<pre><code><button id="demo-area-05-btn1" class="db5">按鈕 1</button>
<button id="demo-area-05-btn2" class="db5">按鈕 2</button>
<button id="demo-area-05-btn3" class="db5">按鈕 3</button>
<button id="demo-area-05-btn4" class="db5">按鈕 4</button>
<button id="demo-area-05-btn5" class="db5">按鈕 5</button>
</code></pre><p>透過 <code>getRelay</code>，然後透過可變電阻的 <code>on</code> 來接收訊號，訊號值回傳在 val 裡頭，我們就透過尺度與四捨五入的公式轉換數值，把數值拋給 Youtube 音量的音量，為了避免音量大於 100 會發生錯誤，在這裏有用一個大於一百的時候就等於一百的判斷式作為保護。 </p>
<pre><code>var relay;
boardReady('', function (board) {
board.systemReset();
board.samplingInterval = 250;
relay = getRelay(board, 10);
document.getElementById("demo-area-05-btn1").addEventListener("click",function(){
relay.on();
});
document.getElementById("demo-area-05-btn2").addEventListener("click",function(){
relay.off();
});
});
</code></pre><p>以上就是透過網頁操水泵的原理。<br>完整程式碼：<a href="http://bin.webduino.io/keleb/edit?html,css,js,output">http://bin.webduino.io/keleb/edit?html,css,js,output</a><br>解答：<a href="http://blockly.webduino.io/#-KZ_bMKQA1W1RZIBf5VH">http://blockly.webduino.io/#-KZ_bMKQA1W1RZIBf5VH</a></p>
<div class="buy-this">
<span>繼電器相關套件：<a href="https://webduino.io/buy/webduino-expansion-m.html" target="_blank">Webduino 擴充套件 M ( 支援馬克 1 號、Fly )</a></span>
<span>水泵套件：<a href="https://webduino.io/buy/webduino-package-plant.html" target="_blank">Webduino 智慧植栽套件 ( 支援馬克 1 號、Fly )</a></span>
<span>Webduino 開發板：<a href="https://webduino.io/buy/component-webduino-v1.html" target="_blank">Webduino 馬克一號</a>、<a href="https://webduino.io/buy/component-webduino-fly.html" target="_blank">Webduino Fly</a>、<a href="https://webduino.io/buy/component-webduino-uno-fly.html" target="_blank">Webduino Fly + Arduino UNO</a></span>
</div>
<a class="arrow arrow-r pre-next-button" data-name="pre-next-arrow"></a>
<a class="arrow arrow-l pre-next-button" data-name="pre-next-arrow"></a>
<div class="pre-next">
<div>
<div class="pre"></div>
<div class="next"></div>
</div>
</div>
<div class="note-chicken"></div>
<div class="others">
<i class="fa fa-times note-close-btn"></i>
<h5>如果您還想了解更多，可以參考：</h5>
<div class="others-link otehrs-read">
1. 完整教學範例：<a href="https://webduino.io/tutorials.html" data-name="noteLink">https://webduino.io/tutorials.html</a>
<br/> 2. Blockly 教學：<a href="https://goo.gl/Y8sRkl" data-name="noteLink">https://goo.gl/Y8sRkl</a>
<br/> 3. 產品總覽：<a href="https://webduino.io/buy.html" target="_blank" data-name="noteLink">https://webduino.io/buy.html <i class="fa fa-share-square-o"></i></a>
<br/> 4. 露天賣場：<a href="http://goo.gl/0Dj9ip" target="_blank" data-name="noteLink">http://goo.gl/0Dj9ip <i class="fa fa-share-square-o"></i></a>
</div>
</div>
<div class="popup">
<div class="whitebox">
<span class="popup-close">X</span>
<img src="https://webduinoio.github.io/tutorials/img/tutorials/boy.png" alt="">
<h3>Webduino 全新教學網站上線囉</h3>
<p>本篇文章已經有更新的版本，趕快前往閱讀吧！</p>
<a href="https://tutorials.webduino.io/" class="popup-new-article new-tutorials go" target="_blank">立即閱讀</a>
</div>
</div>
</div>
<div class="disqus">
<div id="disqus_thread"></div>
</div>
<footer>
<div class="logo">
<a href="index.html" data-name="layout-footer-logo"><i></i></a>
<a href="../index.html" data-name="layout-footer-logo"><i></i></a>
</div>
<h4>Copyright 2017 | All Rights Reserved. Powered by Webduino</h4>
<h4>80661 高雄市前鎮區復興四路 12 號 2 樓之 6 / 886-7-3388511</h4>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-62202920-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '463217813871245'); // Insert your pixel ID here.
fbq('init', '1817385685257238');
fbq('track', 'PageView');
</script>
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1817385685257238&ev=PageView&noscript=1"
/></noscript>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=463217813871245&ev=PageView&noscript=1"
/></noscript>
</body>
</html>