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 pathindex.html
executable file
·103 lines (92 loc) · 7.37 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
<!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="main">
<div class="header">
<h1>MHacks: Hacker Boards</h1>
<h2>Your guide to using the MHacks X Hacker Boards</h2>
</div>
<div class="content">
<h2 class="content-subhead">What am I holding?</h2>
<img class="pure-img-responsive img-padding" src="img/board_picture.png" alt="boards" align="right" style="width:304px">
<p>You're probably holding one of the MHacks X Hacker Boards given out at the hardware workshop! You can confirm by checking the picture to make sure that's really it.</p>
<p>Now that you've confirmed you've got one - or even if you don't - you're probably a) itching to find out what it is, and b) to get started hacking with it!</p>
<h2 class="content-subhead">What sort of things can I build?"</h2>
Here are some sweet hacks people have made with the WiFi + microprocessor on the MHacks X Hacker Board, the ESP8266:
<ul>
<li><a href="http://mhacksv.devpost.com/submissions/31765-gleame">Gleame, a crazy-cheap lightbulb</a>, at MHacks V</li>
<li><a href="http://devpost.com/software/baymaxbuddies">Baymax Buddies, pairable teddy bears that react to hugs with haptic feedback</a> (which became <a href="http://parihug.com">Parihug<a/>), at MHacks 6</li>
<li><a href="http://devpost.com/software/sensorpush">Sensor Push, sensor readings via text message</a>, at MHacks: Refactor
<li><a href="https://devpost.com/software/ocupado">Occupado, bathroom stall availability</a>, at MHacks 8</li>
<li><a href="http://hackaday.com/2016/09/16/smartphone-tv-remote-courtesy-of-homekit-and-esp8266/">TV remote controllable over WiFi and iOS's HomeKit</a>.</li>
</ul>
<h2 class="content-subhead">What next?</h2>
We've put up two different tutorials for working with the Hacker Boards. First, there's a basic app that covers everything that's required for an Arduino app that can run on the Hacker Boards, using the onboard RGB LEDs. Then, there's a tutorial covering the basics of using WiFi on the ESP8266 board that is on the Hacker Boards. Then, we have a bunch of resources for ways to use the ESP8266, including a link to a resource for using it as a web server!
<h2 class="content-subhead">What about the Hacker Boards from previous MHacks?</h2>
The MHacks: Refactor, MHacks 8, and MHacks 9 Hacker Boards are the same as the MHacks X Hacker Boards, except that the Refactor boards are purple, and the MHacks 8, 9, and X boards are black. The color is determined by a layer on the board called the "soldermask", which helps machines place and solder components on the board, and can be one of a variety of colors. All of this documentation will apply to them too!
<h2 class="content-subhead">How did this happen?</h2>
This project has been over a year in the making, having survived many different changes in fundamental goals, people on the team, and budget cuts. Originally inspired by the awesome <a href="https://github.com/BoilerMake/BoilerMakeBadge_I">BoilerMake 2014 Badges</a>, we've brought a similar idea to <a href="http://mhacks.org">MHacks</a>: a beginner-friendly, interesting piece of hardware available to everyone attending the event. It was first at MHacks: Refactor, and we bring them back every MHacks.</p>
<!-- <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>