Skip to content

Commit bc728f1

Browse files
ABagramABagram
committed
fixed formatting
0 parents  commit bc728f1

File tree

5 files changed

+990
-0
lines changed

5 files changed

+990
-0
lines changed

‎accordion.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
var acc = document.getElementsByClassName("accordion");
2+
3+
var i;
4+
5+
for (i=0; i<acc.length; i++){
6+
acc[i].addEventListener("click", function(){
7+
this.classList.toggle("active");
8+
var panel=this.nextElementSibling;
9+
if (panel.style.display ==="block"){
10+
panel.style.display = "none";}
11+
else {
12+
panel.style.display = "block"
13+
}
14+
}
15+
)}

‎index.html

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>How to make a temperature-controlled outlet</title>
7+
<link rel="stylesheet" href="style.css"></rel>
8+
</head>
9+
<body class="line-numbers">
10+
<span class="center">ARDUINO TUTORIAL</span>
11+
<h1>How to make a temperature-controlled outlet</h1>
12+
<table class="difficulty-level">
13+
<tbody>
14+
<tr>
15+
<td>Difficulty Level</td>
16+
<td class="easy"></td>
17+
<td class="intermediate"></td>
18+
<td class="difficult"></td>
19+
</tr>
20+
<tr>Beginner</tr>
21+
</tbody>
22+
</table>
23+
<div><h2>Table of Contents</h2>
24+
<ul>
25+
<li>
26+
<a href="#Materials">Materials and Equipment</a>
27+
<ul>
28+
<li>
29+
Hardware
30+
</li>
31+
<li>
32+
Software</li>
33+
</ul>
34+
</li>
35+
<li>
36+
<a href="#Procedures">Procedures</a>
37+
<ul>
38+
<li><a href="#Board-to-IDE">Connecting the Board to the Development Environment</a></li>
39+
<li>Creating a New Sketch</li>
40+
<li>Connecting the Breadboard to the Arduino</li>
41+
</ul>
42+
</li>
43+
</div>
44+
<div id="Materials"><h2>Materials and Equipment</h2>
45+
<button class="accordion"><h3>Hardware</h3></button>
46+
<div class="panel">
47+
<table class="materials-table">
48+
<thead>
49+
<th>Image</th>
50+
<th>Component</th>
51+
<th>Description</th>
52+
</thead>
53+
<tbody>
54+
55+
<tr>
56+
<td></td>
57+
<td>Arduino Uno Rev3 (R3)<br><span class="subtitle">(or Arduino Nano, Arduino Mega, ESP32, etc.)</span></td>
58+
<td>This is the microcontroller board with the processor</td>
59+
</tr>
60+
<tr>
61+
<td>Temperature and Humidity Sensor Module AM2302<br><span class="subtitle">(or DHT11, DHT22)</span></td>
62+
</tr>
63+
<tr>
64+
<td>4 Mini Pushbutton Switches</td>
65+
<td>This will serve as the control interface, allowing the users to change the desired temperature.</td>
66+
</tr>
67+
<tr>
68+
<td>1-Channel 5V 10A Relay Module with Optocoupler</td>
69+
</tr>
70+
<tr>
71+
<td>Liquid Crystal Display (LCD) - I2C</td>
72+
</tr>
73+
<tr>
74+
<td>Jumper Cables</td>
75+
<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>
76+
</tr>
77+
<tr>
78+
<td>Solderless Breadboard<br><span class="subtitle">Minimum recommended size: 400 tie points </span></td>
79+
</tr>
80+
</tbody>
81+
</table>
82+
</div>
83+
84+
</ul>
85+
<h3>Software</h3>
86+
Arduino IDE
87+
<table>
88+
<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>
89+
</table>
90+
91+
</div>
92+
<div id="Procedures"><h2>Procedures</h2>
93+
94+
<div id="Board-to-IDE"><h3>Connecting the Board to the Development Environment</h3>
95+
<ol>
96+
<li>
97+
Plug the Arduino Uno board to one of the USB ports of the laptop/ computer through the USB Type-A to USB Type-B cable. This should light up the LED marked "ON" on the Arduino Uno to indicate that the board is now being powered.
98+
</li>
99+
<li>
100+
Launch the Arduino IDE.
101+
<div class="alert alert-warning">
102+
<span class="fas">&#xf06a;</span>
103+
<strong>Warning! </strong>Laptops/ computers generally can recognize that there is a USB device connected, but are not able to automatically identify it as an Arduino board.
104+
</div>
105+
<ol>
106+
<li><strong>Tools </strong><i class="fas">&#xf105;</i></span><strong> Board</strong>, then select Arduino Uno.</li>
107+
<li><strong>Tools </strong><i class="fas">&#xf105;</i></span><strong> Port</strong>, then select the communication (COM) port that corresponds to the Arduino.</li>
108+
<div class="alert alert-info">
109+
<span class="material-symbols-outlined">info</span>
110+
<strong>Note. </strong>The port can be identified through the system’s Device Manager, wherein the Arduino Uno appears as an “Unknown device”.
111+
</div>
112+
</ol>
113+
</li>
114+
</ol>
115+
</div>
116+
117+
<div><h3>Creating a New Sketch</h3>
118+
<ol>
119+
<li>Load a new sketch in the Arduino IDE.</li>
120+
<ol>
121+
<li><strong>File <i class="fas">&#xf105;</i></span> New</strong> The sketch should contain the .ino file extension.</li>
122+
<pre><code class="language-arduino">
123+
void setup(){
124+
// put your setup code here, to run once:
125+
126+
}
127+
128+
void loop(){
129+
// put your main code here, to run repeatedly:
130+
131+
}
132+
</code></pre>
133+
</ol>
134+
<li>Download the libraries. There are two (2) methods to this.
135+
<ol class="method-list">
136+
<li class="method-list-item">Open the <strong>Library Manager</strong> within Arduino IDE.</li>
137+
<ol>
138+
<li><strong>Sketch <i class="fas">&#xf105;</i> Include Library <i class="fas">&#xf105;</i> Manage Libraries</strong> or <strong>Tools <i class="fas">&#xf105;</i>Manage Libraries</li></strong>
139+
</ol>
140+
</ol>
141+
</li>
142+
<li>Include libraries</li>
143+
<pre><code class="language-arduino">
144+
#include &lt;LiquidCrystal_I2C&gt;
145+
#include &lt;DHT.h&gt;
146+
void setup(){
147+
}
148+
149+
void loop(){
150+
}
151+
</code></pre>
152+
</ol>
153+
154+
</div>
155+
<div>
156+
<h3>Connecting the Breadboard to the Arduino</h3>
157+
<div>
158+
Some breadboards <strong>do not</strong> have markings that visualize the orientation of the <strong style="color: #eb0a1e">power rail</strong>, which is typically marked by a <strong style="color: #eb0a1e">red line</strong> and a <strong style="color: #eb0a1e">plus (<i class="fa">&#xf067;</i>) sign</strong>, and the <strong>ground rail</strong>, which is typically marked by either a blue or black line and a negative sign. In such case, simply assign the rails. Generally, the left rails are used as the power rails while right rails are used as ground rails. Make sure to keep it consistent to prevent accidental short circuits.
159+
<ol>
160+
<li>To be able to use both power rails as one, establish the connection between the <strong>two power rails</strong> of the breadboard by connecting one hole from each rail with a <strong>M/M jumper wire</strong>.
161+
<div>Tip: Use a red jumper wire to indiicate positive power supply connection for consistency.</div>
162+
<li>Connect one of the holes witin the power rail to the 5V pin of the Arduino Uno using a M/M jumper wire.</li>
163+
<li>To be able to use both ground rails as one, connect</li>
164+
</li>
165+
</ol>
166+
</div>
167+
</div>
168+
</div>
169+
<code class="inline-code">in-line code</code>
170+
</body>
171+
<script src="prism.js"></script>
172+
<script src="accordion.js"></script>
173+
<script src="https://kit.fontawesome.com/9ef70a0feb.js" crossorigin="anonymous"></script>
174+
<link rel="stylesheet" href="prism.css">
175+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
176+
177+
<br>
178+
<img src="https://support.arduino.cc/hc/article_attachments/13367271560476" width="36"> Free Online Tutorial<br>
179+
Authors: Maria Margarita Abasolo, Gabriel Atayde, Rodric Emmanuel Hones<br>
180+
Published: December 13, 2024 <br>
181+
<footer>
182+
<a href="https://github.com/ABagram" class="fa fa-github"></a>
183+
<a href="https://www.linkedin.com/in/maria-margarita-abasolo/" class="fa fa-linkedin"></a><br>
184+
Copyright © Maria Margarita Abasolo 2024. All rights reserved.
185+
</footer>
186+
187+
</html>

0 commit comments

Comments
 (0)