This repository has been archived by the owner on May 6, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathbasics.html
131 lines (117 loc) · 13.7 KB
/
basics.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The homepage of MHacks' open-sourced technical projects.">
<title>MHacks – Hacker Boards</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/layouts/side-menu-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="css/layouts/side-menu.css">
<!--<![endif]-->
</head>
<body>
<div id="layout">
<!-- Menu toggle -->
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<div id="menu">
<div class="pure-menu">
<a class="pure-menu-heading" href="index.html">MHacks Hacker<br>Boards</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="workshop.html" class="pure-menu-link">Workshop</a></li>
<li class="pure-menu-item"><a href="basics.html" class="pure-menu-link">Basics</a></li>
<li class="pure-menu-item"><a href="workshop.html" class="pure-menu-link">Networking</a></li>
<!--<li classs="pure-menu-item"><a href="pastbasics.html" class="pure-menu-link">All Together</a></li>-->
<li class="pure-menu-item"><a href="resources.html" class="pure-menu-link">More Resources</a></li>
</li>
</ul>
</div>
</div>
<div id="">
<div class="header">
<h1>Basics</h1>
<h2>Let's get the Hacker Boards up and running in Arduino!</h2>
</div>
<div class="content">
<h2 class="content-subhead">Hacker Boards hardware</h2>
The Hacker Boards are a simple development platform for WiFi-connected hackathon hardware projects. Here's a list of what's on the board:
<ol>
<li><b>ESP8266 WiFi module</b> - This module is the main "brains" of this board. When we're writing code and say we're "programming" the board, we're actually programming this module. This contains the microprocessor that runs the code, a WiFi radio hardware, and has various pins - physical connections - that one can attach various pieces of hardware to (i.e. LEDs or buttons) via the through-holes. There is a small blue light on the module that shows when the ESP8266 is being programmed.</li>
<li><b>Through-holes</b> - These are holes that are connected to the various pins of the ESP8266. Using header pins, these through-holes allow the ESP8266 to be easily breadboardable.</li>
<li><b>Header pins</b> - By soldering these into the through-holes, an ESP8266 can be easily plugged into a breadboard.</li>
<li><b>Blue <big><tt>POWER</tt></big> LED</b> - If this blue LED is on (or whichever LED has <big><tt>POWER</tt></big> written next to it - the colors may be flipped with the next LED), then the board is receiving power. When you plug this board in, this LED should turn on and stay on.</li>
<li><b>Yellow <big><tt>GPIO 0</tt></big> LED</b> - GPIO is one of the two types of pins on the ESP8266, and stands for General Purpose Input-Output. Essentially, it can output a logical high voltage (3.3 volts), or a logical low voltage (0 volts, or ground). This LED shows which state <big><tt>GPIO 0</tt></big> is in. When the ESP8266 boots, this LED should blink momentarily.</li>
<li><b><big><tt>RESET</tt> button</big></b> - Pressing this button resets, or essentially restarts, the microcontroller. Very useful if you want to restart your program quickly!</li>
<li><b><big><tt>GPIO 0</tt> button</big></b> - </li> Pressing this button makes <big><tt>GPIO 0</tt></big> become a logical high, at 3.3 volts. Don't press the button while trying to turn the LED on
<li><b>White LEDs - WS2812B</b> These are addressable LEDs that can be programmed to show a variety of colors. Use the Adafruit NeoPixel library to talk to them on GPIO pin 15 </li>
<li><b>CP2104 chip</b> This chip lets your ESP8266 module communicate to your laptop through USB. Use the Serial object on your Arduino to send messages to/from your laptop. </li>
<li><b>microUSB port</b> This is where you plug in your USB cable so that it can connect to your laptop. You can also power your board through this with a portable battery. </li>
<li><b>Optional potentiometer</b> This is a dial you can solder onto your board. If you use analogRead(0) in your program, it will tell you how far the dial is turned (0-1023) </li>
<li><b>Breadboard</b> If you solder header pins onto your board, you can set it on a breadboard. This will allow you to connect other things to it, like sensors, LEDs, and more! </li>
</ol>
Alright - try plugging in your ESP8266! You should see the yellow <big><tt>GPIO 0</tt></big> LED flicker, and the blue <big><tt>POWER</tt></big> LED turn on and stay on.
<h2 class="content-subhead">Let's go download drivers!</h2>
<p>You're going to want to download and install three things. First, there is the Arduino IDE (which we'll use for writing code and programming the boards). Secondly, a USB driver for the CP2104 - which is a chip on the board that converts USB into serial, which the ESP8266 can understand. Thirdly, a "board package" for the Arduino IDE, which contains all the files the Arduino IDE requires that has support for the ESP8266.</p>
<ul>
<li>You can download the latest copy of the Arduino IDE from the top of the <a href="https://www.arduino.cc/en/Main/Software">official Arduino download page</a> - choose the right one for your operating system (I used 1.6.7 for this tutorial, but it should work with any Arduino version after 1.6.4, which added support for board packages).</li>
<li>You can find the CP2104 USB drivers from the chip's manufacturer, Silicon Labs, on <a href="https://www.silabs.com/products/mcu/Pages/USBtoUARTBridgeVCPDrivers.aspx">this page</a> - once again, choose the right one for your operating system.</li>
<li>Lastly, there's the ESP8266 Board Package for Arduino. We'll be downloading and setting that up in the next section, as part of Arduino.</li>
</ul>
<figure><img class="pure-img-responsive" src="img/pref-urls.png" alt="Arduino Preferences menu on OS X" align="right" width="70%"></figure>
<p>Go ahead and install the Arduino IDE and the CP2104 drivers, and come back when you're set!</p>
<h2 class="content-subhead">Setting up the ESP8266 Board Package for Arduino</h2>
<p>Open up the Arduino IDE. Once open, go to the Preferences window (on OS X: <i>Arduino -> Preferences</i>) and add the text <tt>http://arduino.esp8266.com/stable/package_esp8266com_index.json</tt>
<figure><img class="pure-img-responsive" src="img/boards-manager.png" alt="Boards Manager on OS X" align="right" width="70%"></figure>
into the "Additional Board Manager URLs" field (which is near the bottom).</p>
<p>Next, open up the Board Manager (on all platforms: <i>Tools -> Board: "Arduino Uno" -> Boards Manager...</i>), and scroll down to the bottom of the list of installed boards. At the bottom, there will be an entry with the title "<b>esp8266</b> by <b>ESP8266 Community</b>". Click anywhere in that box, select the latest version (2.0.0), and press the 'Install' button. Once the bottom bar says <i>Installation completed!</i>, close the Boards Manager.
<h2 class = "content-subhead">Libraries for Examples</h2>
<p>There are a few libraries you'll need to get started. The first set are the WiFi libraries. These conveniently come with the Board Package you should have already installed! You can find them in <i>Sketch->Add Library->ESP8266...</i> The one we use for our examples is <i>ESP8266WiFi</i>.
<p>The next library you need is the Adafruit NeoPixel library. You use this library to interact with the addressable LEDs. Download the library from <a href = "http://tinyurl.com/mhacks-neopixels"> this link </a> as a .ZIP file. To add it to the Arduino IDE, go to <i>Sketch->Include Library->Add .ZIP Library</i>. If you're on a Mac, you'll have to re-zip the folder by right-clicking and clicking on <i>Compress</i> "...".
<p>After that, you should install an Arduino library for parsing JSON. We use it for one of our demos. You can find it at <a href = "http://tinyurl.com/mhacks-json">this link</a>. Install it the same way you installed the NeoPixel library.
<h2 class="content-subhead">The 'Hello World' of Hardware</h2>
Just as a program that outputs "Hello World" is typically the first program that a person writes when learning programming for the first time, a program that blinks an LED is typically the first program written for hardware. To run a program that blinks the small LED next to the Power LED on the Hacker Boards, in Arduino, download the code <a href = "https://github.com/mhacks/hacker-boards-refactor/blob/master/software/Hello_World/Hello_World.ino"> here </a>. It's a modified version of the standard Arduino Blink example, which lives in <i>File->Examples->Examples->01.Basics->Blink</i>. Just change line 20 from <tt>pinMode(13, OUTPUT);</tt> to <tt>pinMode(0, OUTPUT);</tt>, since the small LED on the board is on pin 0.
<p>Make sure to set the "reset method" in the Tools menu (<i>Tools -> Reset:Method</i>) to <tt>nodemcu</tt> instead of <tt>cu</tt>.
<h2 class = "content-subhead">Addressable LEDs</h2>
<p>Addressable LEDs are special LEDs that you can chain together and program individually. You can tell them what color to be, and how bright to be! These boards have two chained together, and are both controlled with GPIO 15.
<p>To add them to your project, go to <i>Sketch->Include Library->Adafruit NeoPixel</i>. This will add the correct header file to your project. You will then need to create an instance of the object that will interact with the leds with the line <tt>Adafruit_NeoPixel name = Adafruit_NeoPixel(NUM LEDS, IO PIN, NEO_GRB + NEO_KHZ800);</tt> "name" is what you want to name your object (usually "leds" is good), NUM_LEDS is the number of addressable LEDs you have chained (always 2 for this board), IO pin is the control pin for the LEDs (always 15 for this board), and the last line configures the LEDs (that's always the option you want for this board).
<p>To change the color of your pixels, use <tt>leds.setPixelColor(#,r,g,b);</tt>. "#" is the index of your LED (always 0 or 1 for this board), and r/g/b are the color values for each LED. 255/255/255 is bright white, 0/0/0 is off. You also have the ability to configure the brightness of all of the LEDs with <tt>leds.setBrightness(#);</tt>. "#" is a value 0-255, where 0 is off and 255 is blindingly bright.
<p>After you configure your LEDs, you need to add <tt>leds.show();</tt>. This tells the microcontroller to update the LEDs all at once.
<p>There's an demo project at <a href= "http://tinyurl.com/mhacks-leds"> this link </a>. It makes your LEDs blink random colors!
<!-- <h2 class="content-subhead">How to use this layout</h2>
<p>
To use this layout, you can just copy paste the HTML, along with the CSS in <a href="/css/layouts/side-menu.css" alt="Side Menu CSS">side-menu.css</a>, and the JavaScript in <a href="/js/ui.js">ui.js</a>. The JS file uses vanilla JavaScript to simply toggle an <code>active</code> class that makes the menu responsive.
</p>
<h2 class="content-subhead">Now Let's Speak Some Latin</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="pure-g">
<div class="pure-u-1-4">
<img class="pure-img-responsive" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake">
</div>
<div class="pure-u-1-4">
<img class="pure-img-responsive" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
</div>
<div class="pure-u-1-4">
<img class="pure-img-responsive" src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store">
</div>
<div class="pure-u-1-4">
<img class="pure-img-responsive" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
</div>
</div>
<h2 class="content-subhead">Try Resizing your Browser</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>-->
</div>
</div>
</div>
<script src="js/ui.js"></script>
</body>
</html>