diff --git a/ap.md b/ap.md index d6c0c24..2c098fb 100644 --- a/ap.md +++ b/ap.md @@ -1,10 +1,10 @@ {::options parse_block_html="true" /}
-
+
# Making Tessel An Access Point
-
+
A typical WiFi setup consists of a couple of devices: a modem, which is connected by wire to the internet, and a wireless access point (also called a WAP or router), wired to the modem, which directs requests and responses between every device on the network. @@ -13,37 +13,50 @@ As explained in [wifi tutorial](/wifi.html), Tessel 2 can easily connect to wifi The connection setup looks about like this:
-
+
![router](./images/router.png)
-
+
This is fine and dandy if we want to use Tessel in a place where there's a modem and WAP already set up, but what happens when that's not possible? We can't access the Internet without a modem, but we can create a LAN connection between devices by turning Tessel 2 into a WAP. Devices on the network can all talk to each other, like this:
-
+
![router](./images/Tessel-AP.png)
-
+
This tutorial shows you to turn Tessel into a wireless access point, thus creating your own local network.
-
+
-Now that our server is in place, let's get our access point set up. In the terminal, run the following command: +In the terminal, run the following command: `t2 ap -n MyTessel` -This will make an open, or password-less, wifi network called MyTessel. If you open the wifi setting of your computer or a separate device like a smartphone or tablet, and scan for new devices, you should be able to see and connect to this new network. For info about making a secure network, take a look at [the cli docs](https://tessel.io/docs/cli#usage). +
+ +
+This will make an open, or password-less, wifi network called MyTessel. -
+Open the wifi setting of your computer, or a separate device like a smartphone or tablet, and scan for new devices to see and connect to this new network. +
+
+![access point preview](./images/ap-preview.gif) +
+ +
**Bonus:** Create an network that requires a password. + +For info about making a secure network, take a look at [the cli docs](https://tessel.io/docs/cli#usage). + +**Extra Bonus:** Check out the [webserver tutorial](/webserver.html) to learn about serving a web app from Tessel.
diff --git a/images/ap-preview.gif b/images/ap-preview.gif new file mode 100644 index 0000000..390fcc5 Binary files /dev/null and b/images/ap-preview.gif differ diff --git a/webserver.md b/webserver.md index a12153b..d1110f9 100644 --- a/webserver.md +++ b/webserver.md @@ -1,21 +1,25 @@ {::options parse_block_html="true" /}
-
+ +
# Build Your Own Internet
-
+ +
NEW INTRO NEEDED
-
+ +
By the end of this article, we'll be able to control the Tessel LEDs through a web app served by the Tessel.
+
-
+
In your command line, make a folder for your Tessel code, then initialize a Tessel project in that folder by running each of the following commands in the terminal: @@ -43,7 +47,7 @@ var server = http.createServer(function (request, response) { // Listen on port 8080, IP defaults to 192.168.1.101. Also accessible through [tessel-name].local server.listen(8080); -// Put a friendly message on the terminal +// Put a friendly message in the terminal console.log("Server running at http://192.168.1.101:8080/"); {% endhighlight %} @@ -56,19 +60,25 @@ If you haven't read about creating access points yet, check out the [access poin `t2 run ap.js` +
+
-Once you see "Server running at http://192.168.1.101:8080/" in the terminal, we can connect to that URL (or http://tessel.local:8080/, replacing "tessel" with the name of your Tessel) in a web browser of the device connected to the TesselRouter network. +When "Server running at http://192.168.1.101:8080/" appears in the terminal, connect to that URL (or http://tessel.local:8080/, replacing "tessel" with the name of your Tessel) in a web browser of the device connected to the TesselRouter network.
![web app screenshot](./images/hello-tessel.png)
+
+ Now let's take it up a notch by adding some interactivity between the web page and the Tessel!
-Let's start this next part by building out the web page we want Tessel to send to your web browser. Create a file called `index.html` in your project directory and open it up in your preferred text editor to add the initial html for our web page: +Let's start this next part by building out the web page we want Tessel to send to your web browser. + +Create a file called `index.html` in your project directory and open it up in your preferred text editor to add the initial html: {% highlight html %} @@ -94,144 +104,167 @@ Let's start this next part by building out the web page we want Tessel to send t {% endhighlight %} -
-In that html, we have a heading, a line of instructions for the user, and a list of buttons for controlling a corresponding LED on the Tessel. Below that list of buttons we'll add some JavaScript for communicating with the Tessel:
-
-![web app screenshot](./images/ap-web-app-preview.png) +
+ +Open that file in the browser to see the UI for this web app. +
-We will add the following JavaScript before `` tag: +
+ ![web app screenshot](./images/ap-web-app-preview.png) +
-{% highlight html %} - -{% endhighlight %} + {% highlight html %} + + {% endhighlight %} -// Stays the same -console.log('Server running at http://192.168.1.101:8080/'); -{% endhighlight %} + Now let's check out the server again to finish up the project. -Inside our `createServer` callback function, we've replaced the old plain text response with a basic router that catches requests to '/leds/:index' and defaults all other requests to a separate function. Let's add those functions below the `console.log`: + Replace the code in `ap.js` with the following: {% highlight javascript %} -// Respond to the request with our index.html page -function showIndex (url, request, response) { - response.writeHead(200, {"Content-Type": "text/html"}); - // Use fs to read in index.html - fs.readFile(__dirname + '/index.html', function (err, content) { - if (err) { - throw err; - } + // These two dependencies remain the same + var tessel = require('tessel'); + var http = require('http'); - // Serve the content of index.html read in by fs - response.end(content); - }); -} - -// Toggle the led specified in the url and respond with its state -function toggleLED (url, request, response) { - var indexRegex = /(\d)$/; // Create a regular expression to find the number at the end of the url - var result = indexRegex.exec(url); // Capture the number, returns an array - var index = +result[1]; // Grab the captured result from the array and make sure it's a Number - - var led = tessel.led[index]; // Use the index to refence the correct LED - - // Toggle the state of the led and call the callback after that's done - led.toggle(function (err) { - if (err) { - // Log the error and send back a 500 (internal server error) response to the client - console.log(err); - response.writeHead(500, {"Content-Type": "application/json"}); - response.end(JSON.stringify({error: err})); + // Require two other core Node.js modules + var fs = require('fs'); + var url = require('url'); + + var server = http.createServer(function (request, response) { + // Break up the url into easier-to-use parts + var urlParts = url.parse(request.url, true); + + // Create a regular expression to match requests to toggle LEDs + var ledRegex = /leds/; + + if (urlParts.pathname.match(ledRegex)) { + // If there is a request containing the string 'leds' call a function, toggleLED + toggleLED(urlParts.pathname, request, response); } else { - // The led was successfully toggled, so respond with the state of the toggled led using led.isOn - response.writeHead(200, {"Content-Type": "application/json"}); - response.end(JSON.stringify({on: led.isOn})); + // All other request will call a function, showIndex + showIndex(urlParts.pathname, request, response); } }); -} + + // Stays the same + server.listen(8080); + + // Stays the same + console.log('Server running at http://192.168.1.101:8080/'); + + // Respond to the request with our index.html page + function showIndex (url, request, response) { + // Create a response header telling the browser to expect html + response.writeHead(200, {"Content-Type": "text/html"}); + + // Use fs to read in index.html + fs.readFile(__dirname + '/index.html', function (err, content) { + // If there was an error, throw to stop code execution + if (err) { + throw err; + } + + // Serve the content of index.html read in by fs.readFile + response.end(content); + }); + } + + // Toggle the led specified in the url and respond with its state + function toggleLED (url, request, response) { + // Create a regular expression to find the number at the end of the url + var indexRegex = /(\d)$/; + + // Capture the number, returns an array + var result = indexRegex.exec(url); + + // Grab the captured result from the array + var index = result[1]; + + // Use the index to refence the correct LED + var led = tessel.led[index]; + + // Toggle the state of the led and call the callback after that's done + led.toggle(function (err) { + if (err) { + // Log the error, send back a 500 (internal server error) response to the client + console.log(err); + response.writeHead(500, {"Content-Type": "application/json"}); + response.end(JSON.stringify({error: err})); + } else { + // The led was successfully toggled, respond with the state of the toggled led using led.isOn + response.writeHead(200, {"Content-Type": "application/json"}); + response.end(JSON.stringify({on: led.isOn})); + } + }); + } {% endhighlight %} -One last step is to create a `.tesselinclude` file in the project directory and add any files not required by `ap.js` that we want to deploy with it. For this project, that means adding one line: +In order to make code pushing more efficient, Tessel only pushes the entry point file and its Node dependencies by default. Since index.html is not included in this default push, we'll need to explicitly require it with a .tesselinclude file. + +Create a new file called .tesselinclude and copy and paste the following: -``` +{% highlight javascript %} index.html -``` +{% endhighlight %} Finally, let's fire up our server again by running: `t2 run ap.js` -
-Just like before, once you see the "Server running at http://192.168.1.101:8080/" message in your terminal, you should be able to connect to that url in the web browser of the device connected to the TesselRouter network. After connecting, you should see the index.html view we built earlier and, after clicking/tapping the buttons, see either the blue or green LEDs on the Tessel should be toggled on or off.
-
+
+Once the server is running, connect to the URL in the web browser. + +Click on the buttons to toggle the lights. +
+ +
+Here is a demo video: +
-
+
**Bonus:** Add a way to toggle the red LED as well.