-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
291 lines (262 loc) · 15.1 KB
/
index.html
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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to make a temperature-controlled outlet</title>
<link rel="stylesheet" href="style.css">
</rel>
</head>
<body class="line-numbers">
<div id="progress-bar"></div>
<span class="center">ARDUINO TUTORIAL</span>
<h1>How to make a temperature-controlled outlet</h1>
<div>
<span class="subtitle">Project Difficulty: Beginner</span><span class="subtitle">Last Updated: 23 December 2024</span>
<p>By the end of this project, the maker would be able to:</p>
<h2>Table of Contents</h2>
<ul class="table-of-contents">
<li>
<a href="#Materials">Materials and Equipment</a>
<ul>
<li>
Hardware
</li>
<li>
Software</li>
</ul>
</li>
<li>
<a href="#Procedures">Procedures</a>
<ul>
<li><a href="#Board-to-IDE">Connecting the Board to the Development Environment</a></li>
<li>Creating a New Sketch</li>
<li>Connecting the Breadboard to the Arduino</li>
</ul>
</li>
</ul>
</div>
<div id="Materials">
<h2>Materials and Equipment</h2>
<h3>Hardware</h3>
<table class="materials-table">
<thead>
<th>Image</th>
<th>Component</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td></td>
<td>Arduino Uno Rev3 (R3)<br><span class="subtitle">(or Arduino Nano, Arduino Mega, ESP32,
etc.)</span></td>
<td>This is the microcontroller board with the processor</td>
</tr>
<tr>
<td>Temperature and Humidity Sensor Module AM2302<br><span class="subtitle">(or DHT11, DHT22)</span>
</td>
</tr>
<tr>
<td>4 Mini Pushbutton Switches</td>
<td>This will serve as the control interface, allowing the users to change the desired temperature.
</td>
</tr>
<tr>
<td>1-Channel 5V 10A Relay Module with Optocoupler</td>
</tr>
<tr>
<td>Liquid Crystal Display (LCD) - I2C</td>
</tr>
<tr>
<td>Jumper Cables</td>
<td>This will be used as a connector. Male-to-Female (M/F) will be used to connect the terminals of
the sensor module to the breadboard. Male-to-Male (M/M)</td>
</tr>
<tr>
<td>Solderless Breadboard<br><span class="subtitle">Minimum recommended size: 400 tie points </span>
</td>
</tr>
</tbody>
</table>
</ul>
<h3>Software</h3>
Arduino IDE
<table>
<a href="https://commons.wikimedia.org/wiki/File:Arduino_IDE_logo.svg"><img width="36" display="flex"
alt="Arduino IDE logo"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Arduino_IDE_logo.svg/512px-Arduino_IDE_logo.svg.png?20230510165732"></a>
</table>
</div>
<div id="Procedures">
<h2>Procedures</h2>
<div id="Board-to-IDE" class="header">
<h3>Connecting the Board to the Development Environment</h3>
<ol>
<li>
<span class="aligned-bullet">Plug the <span class="material">Arduino Uno board</span> to one of the
USB ports of the <span class="material">laptop/
computer</span> through the <span class="material">USB Type-A to USB Type-B cable</span>.
This should light up the LED marked "ON" on
the Arduino Uno to indicate that the board is now being powered.
</span>
</li>
<li>
Launch the <span class="material">Arduino IDE</span>.
<ol>
<li><strong>Tools </strong><i class="fas"></i></span><strong> Board</strong>, then
select Arduino Uno.
<div class="alert alert-warning">
<span class="fas alert-warning-text"></span>
<strong class="alert-warning-text">Warning!</strong><br>Laptops/ computers generally can
recognize that there is a USB device connected, but are not able to automatically
identify it as
an Arduino board.
</div>
</li>
<li><strong>Tools </strong><i class="fas"></i></span><strong> Port</strong>, then select
the communication (COM) port that corresponds to the Arduino.
<div class="alert alert-info">
<span class="alert-info-header"></span><br>The port can be identified through the
system’s Device Manager, wherein the Arduino Uno appears as an “Unknown device”.
</div>
</li>
</ol>
</li>
</ol>
</div>
<div>
<h3>Creating a New Sketch</h3>
<ol>
<li>Load a new sketch in the <span class="material">Arduino IDE</span>.</li>
<ol>
<li><strong>File <i class="fas"></i></span> New.</strong> The sketch should contain the .ino
file extension.</li>
<pre><code class="language-arduino">
void setup(){
// put your setup code here, to run once:
}
void loop(){
// put your main code here, to run repeatedly:
}
</code></pre>
<div class="alert alert-code"><span class="alert-code-header"></span><br><code class="inline-code">void</code> is the keyword used in declaring functions.<hr>In this code snippet, the functions are named <code class="inline-code">setup</code>, which will be used to initialize variables, configure pins, initialize serial communication, and initialize external devices connected to the Arduino (e.g. sensors, displays) and <code class="inline-code">loop</code>, which is a function that executes repeatedly throughout the program's lifetime and will be used in reading sensor data, processing information, making decisions, and controlling ouputs (e.g. relay).</div>
</ol>
<li>Download the libraries. There are two (2) methods to this.
<ol class="method-list">
<li class="method-list-item">Open the <strong>Library Manager</strong> within Arduino IDE.</li>
<ol>
<li><strong>Sketch <i class="fas"></i> Include Library <i class="fas"></i>
Manage Libraries</strong> or <strong>Tools <i class="fas"></i>Manage
Libraries</li></strong>
<li>Filter searches by typing</li>
<li>Test</li>
</ol>
<li class="method-list-item">Download the compressed (.zip) file from the following links:</li>
<li><strong>Sketch <i class="fas"></i> Include Library <i class="fas"></i> Add .ZIP Library</strong>, then navigate and select the .zip file or folder containing the library. By selecting “Open”, the Arduino IDE will extract the library files to the correct location.
</li>
</ol>
</li>
<li>Include libraries</li>
<pre><code class="language-arduino">
#include <LiquidCrystal_I2C>
#include <DHT.h>
void setup(){
}
void loop(){
}
</code></pre>
<div class="alert alert-info"><span class="alert-info-header"></span><br>
Libraries are pre-written functions that handle specific tasks, allowing one to focus on the core functionality of the project and engage in rapid prototyping. As such, there are general-purpose libraries as well as component-specific libraries. The latter may not be available yet for proprietary, niche, or newly released components.
</div>
</ol>
</div>
<div>
<h3>Connecting the Breadboard to the Arduino</h3>
<div class="alert alert-info"><span class="alert-info-header"></span><br>
Some breadboards <strong>do not</strong> have markings that indicate which power rails (strips) are
<span class="alert-info-text tooltip">positive<span class="tooltiptext">typically marked by a <strong
class="vcc">red line</strong> and a plus <strong class="vcc"><i
class="fa"></i></strong> sign</span></span>, or <span
class="alert-info-text tooltip">negative<span class="tooltiptext">typically marked by either a
<strong style="color: #2980B9;">blue</strong>
or <strong>black line</strong> and a negative <i class="fa"></i> sign</span></span>. In such case, simply
assign the rails. Make sure to keep it consistent to prevent accidental short circuits.
<hr>
Learn more. <a
href="https://learn.sparkfun.com/tutorials/how-to-use-a-breadboard/anatomy-of-a-breadboard"
target="_blank">How to Use a Breadboard <i class="fas fa-external-link"></i></a>
</div>
<ol>
<li>To use both <span class="vcc tooltip">positive rails<span class="tooltiptext">used to
provide the positive voltage to power electronic components in the circuit & connect to the
positive terminal of the power source</span></span> of the <span
class="material">breadboard</span> interchangeably, connect them with
an <span class="material">M/M jumper wire</span>. Plug one end into a hole on one rail and the other
end into a hole on the other rail.
<div class="alert alert-tip"><i class='fas alert-tip-text'></i><strong
class="alert-tip-text" style="padding: 7px;">Tip.</strong><br>Use a <span class="vcc">red
jumper wire</span> to
indicate positive power supply connection for consistency.</div>
<li>Connect one of the holes within the power rail to the 5V pin of the Arduino Uno using an <span
class="material">M/M jumper
wire</span>.</li>
<li>To use both <span class="tooltip">negative rails<span class="tooltiptext">used to provide the ground
reference <img src="https://img.icons8.com/?size=20&id=123003&format=png&color=ffffff"> for
the circuit & connect components that require a ground
connection</span></span> of the <span class="material">breadboard</span> interchangeably, connect them with an <span class="material">M/M
jumper wire</span>. Plug one end
into a hole on one rail and the other end into a hole on the other rail.</li>
</li>
<li>Connect one of the holes within the ground rail to the GND pin of Arduino Uno.
</li>
</ol>
</div>
</div>
<code>in-line code</code>
<div>
<h3>Interfacing I2C LCD with Arduino</h3>
<ol>
<li>Connect the four (4) pins of the I2C LCD display to the Arduino Uno.
<div class="alert alert-info"><span class="alert-info-header"></span><br>The A4 and A5 pins of the Arduino Uno board have internal circuitry that are specifically configured for I2C communication. The A4 pin is designed for serial data (SDA) line while the A5 is designed for serial clock (SCL) line of I2C communication. Thus, the connection has to be configured correctly.
</div>
</li>
<li>Initialize the I2C LCD.
<pre><code class="language-arduino">
#include <LiquidCrystal_I2C.h>
#include <DHT.h>
LiquidCrystal_I2C lcd(0x26, 16, 2);
void setup(){
lcd.init();
lcd.clear();
lcd.backlight();
}
void loop(){
}
</code></pre>
LiquidCrystal_I2C lcd(0x26, 16, 2)
</li>
</ol>
</div>
</body>
<script src="prism.js"></script>
<script src="progress-bar.js"></script>
<script src="viewed-bullet.js"></script>
<script src="accordion.js"></script>
<script src="https://kit.fontawesome.com/9ef70a0feb.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="prism.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<br>
<img src="https://support.arduino.cc/hc/article_attachments/13367271560476" width="36"> Free Online Tutorial<br>
<p><strong>Credits</strong></p>
Writer & Researcher: Maria Margarita Abasolo
Makers: Maria Margarita Abasolo, Gabriel Atayde, Rodric Emmanuel Hones
Published: December 13, 2024
<footer>
<a href="https://github.com/ABagram" class="fa fa-github"></a>
<a href="https://www.linkedin.com/in/maria-margarita-abasolo/" class="fa fa-linkedin"></a><br>
<span class="subtitle">© 2024 Maria Margarita Abasolo. All rights reserved.</span>
</footer>
</html>