From 71f28724065b416016502587741ba62a495e79a8 Mon Sep 17 00:00:00 2001 From: HipsterBrown Date: Tue, 8 Dec 2015 09:19:33 -0500 Subject: [PATCH 01/12] start of ap tutorial --- ap.md | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 ap.md diff --git a/ap.md b/ap.md new file mode 100644 index 0000000..5e170ce --- /dev/null +++ b/ap.md @@ -0,0 +1,49 @@ +{::options parse_block_html="true" /} + +
+
+# Build Your Own Internet + +Along with connecting to an existing Wifi network, Tessel 2 can also act as a portable router and emit a custom Wifi network. We can use this functionality to connect directly with our Tessel through a web browser. 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: + +`mkdir tessel-router` + +`cd tessel-router` + +`t2 init` + +Great! Now you're set up to run code on Tessel. Your "tessel-router" folder now contains a "package.json" with some metadata Node uses for your project, and a file called "index.js". +
+
+ +
+
+ +
+ +"index.js" contains code to make the blue and green LEDs blink. We're going to replace that with our server setup. Let's take a look: + +{% highlight javascript %} +// Import the interface to Tessel hardware +var tessel = require('tessel'); +// Load the http module to create an http server. +var http = require('http'); + +// Configure our HTTP server to respond with "Hello from Tessel!" to all requests. +var server = http.createServer(function (request, response) { + response.writeHead(200, {"Content-Type": "text/plain"}); + response.end("Hello from Tessel!\n"); +}); + +// Listen on port 8080, IP defaults to 192.168.1.101 +server.listen(8080); + +// Put a friendly message on the terminal +console.log("Server running at http://192.168.1.101:8080/"); + +{% endhighlight %} + +
+
From 103ea0d94c0f9dee86b99102ca90f288b1b3bcdd Mon Sep 17 00:00:00 2001 From: HipsterBrown Date: Tue, 8 Dec 2015 23:15:20 -0500 Subject: [PATCH 02/12] finish up part one --- ap.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/ap.md b/ap.md index 5e170ce..6081bb1 100644 --- a/ap.md +++ b/ap.md @@ -23,7 +23,7 @@ Great! Now you're set up to run code on Tessel. Your "tessel-router" folder now
-"index.js" contains code to make the blue and green LEDs blink. We're going to replace that with our server setup. Let's take a look: +"index.js" contains code to make the blue and green LEDs blink. We're going to replace that with our initial server setup. Let's take a look: {% highlight javascript %} // Import the interface to Tessel hardware @@ -45,5 +45,19 @@ console.log("Server running at http://192.168.1.101:8080/"); {% endhighlight %} +Now that our server is in place, let's get our access point set up. In the terminal, run the following command: + +`t2 ap -n TesselRouter` + +This will make an open wifi network called TesselRouter. 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. After connecting to TesselRouter, run the following command in your terminal: + +`t2 run index.js` + +Once you see "Server running at http://192.168.1.101:8080/" in the terminal, go to http://192.168.1.101:8080/ in the web browser of the device connected to the TesselRouter network. You should "Hello from Tessel!" appear on the screen. + +Now let's take it up a notch by adding some interactivity between the web page and the Tessel! + +
+ From 286c2d503f048afd65106720f7ef28e7b1a58ec0 Mon Sep 17 00:00:00 2001 From: Nick Hehr Date: Wed, 9 Dec 2015 16:13:30 -0500 Subject: [PATCH 03/12] complete initial draft of tutorial, updates nav --- _layouts/default.html | 14 +++- ap.html | 9 +++ ap.md | 171 +++++++++++++++++++++++++++++++++++++++++- blinky.md | 2 +- 4 files changed, 188 insertions(+), 8 deletions(-) create mode 100644 ap.html diff --git a/_layouts/default.html b/_layouts/default.html index 8005697..d96d2fc 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -82,6 +82,9 @@

blinky +
  • + access point +
  • modules
  • @@ -113,7 +116,10 @@

    3. blinky
  • - 4. modules + 4. access point +
  • +
  • + 5. modules diff --git a/ap.html b/ap.html new file mode 100644 index 0000000..89b794b --- /dev/null +++ b/ap.html @@ -0,0 +1,9 @@ +--- +layout: default +--- + +{% capture include_install %} +{% include_relative ap.md %} +{% endcapture %} +{{ include_install | markdownify }} + diff --git a/ap.md b/ap.md index 6081bb1..5ea4eab 100644 --- a/ap.md +++ b/ap.md @@ -21,7 +21,7 @@ Great! Now you're set up to run code on Tessel. Your "tessel-router" folder now
    -
    +
    "index.js" contains code to make the blue and green LEDs blink. We're going to replace that with our initial server setup. Let's take a look: @@ -53,11 +53,176 @@ This will make an open wifi network called TesselRouter. If you open the wifi se `t2 run index.js` -Once you see "Server running at http://192.168.1.101:8080/" in the terminal, go to http://192.168.1.101:8080/ in the web browser of the device connected to the TesselRouter network. You should "Hello from Tessel!" appear on the screen. +Once you see "Server running at http://192.168.1.101:8080/" in the terminal, go to http://192.168.1.101:8080/ in the web browser of the device connected to the TesselRouter network. You should "Hello from Tessel!" appear on the screen. You can press "Control+C" while in your terminal to stop this server. 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: + +{% highlight html %} + + + + + Tessel Web App + + +

    Hello from Tessel!

    +

    Press a button to toggle an LED.

    +
      +
    • + + Status: +
    • +
    • + + Status: +
    • +
    + + +{% 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: + +{% highlight html %} + +{% endhighlight %} + +While there are some comments in the previous code snippet, the summary is when a button with the class "led-button" is clicked, we grab the info from its "data-led" attribute and make a request to our Tessel server with that info in the url. After we get a successful response from the server, we update the "Status" field next to the button with the state of the corresponding LED. + +Now let's check out `index.js` again to finish up the project. First, we're going to make a few changes to our server set up: + +{% highlight javascript %} +// These two dependencies remain the same +var tessel = require('tessel'); +var http = require('http'); + +// Require two other core Node.js modules +var fs = require('fs'); +var url = require('url'); + +var server = http.createServer(function (request, response) { + // here is the biggest change + var urlParts = url.parse(request.url, true); // break up the url into easier-to-use parts + var ledRegex = /leds/; // a Regex to catch requests to toggle LEDs + + if (urlParts.pathname.match(ledRegex)) { + // if there is a request containing 'leds' call a function, toggleLED + toggleLED(urlParts.pathname, request, response); + } else { + // 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/'); +{% endhighlight %} + +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`: + +{% 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; + } + + // serves 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)$/; // Regex 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})); + } 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})); + } + }); +} +{% endhighlight %} + +In our `showIndex` function, we grab the content of `index.html` using the Node.js `fs` module and respond to the web browser request with that content. In our toggleLED function, we use a Regex to search the url for the index of the led we want to toggle and pass that index into the `tessel.led` array. Now that we have the led we want, we toggle it and use the callback to respond to the server request with the current state of the led using `isOn` property. + +One last step is to create a `.tesselignore` file in the project directory and add any non-JavaScript files we want to deploy with `index.js`. For this project, that means adding one line: `index.html`. + +Finally, let's fire up our server again by running: + +`t2 run index.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. + +[Show demo video here?] + +
    +
    + +
    + + diff --git a/blinky.md b/blinky.md index 5b09547..f14fc17 100644 --- a/blinky.md +++ b/blinky.md @@ -111,6 +111,6 @@ Learn more `t2` commands by running `t2 -h` or looking at the [T2 CLI docs](http From c95d0eb1851abd0807d6a0b28296a59584367c24 Mon Sep 17 00:00:00 2001 From: HipsterBrown Date: Tue, 15 Dec 2015 08:58:32 -0500 Subject: [PATCH 04/12] updates content, navigation --- _layouts/default.html | 16 ++++++++-------- ap.md | 14 +++++++------- blinky.md | 2 +- gpio.md | 2 +- tweet.md | 4 ++-- 5 files changed, 19 insertions(+), 19 deletions(-) diff --git a/_layouts/default.html b/_layouts/default.html index d96d2fc..fad56a5 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -82,15 +82,15 @@

    blinky

  • -
  • - access point -
  • modules
  • tweet
  • +
  • + access point +
  • gpio
  • @@ -116,10 +116,7 @@

    3. blinky
  • - 4. access point -
  • -
  • - 5. modules + 4. modules