aresnick/.gitignore

## .gitignore
node_modules/

## README.md

      
    Raw
  

              README.md
            
          
    README


Make sure you've successfully 💯 followed the directions here to set up your Arduino.
cd into the directory 📁 holding the files in this repository and run npm install, this looks at the package.json file here and ⬇ installs express and johnny-five, two libraries we use in this example.
Connect your sensor to pin A0 on the Arduino.
Run node arduino.js to load the arduino.js file onto the Arduino.
Open input-to-background-color.html and see if the background color changes as you expect!
🎈🎈🎈


## arduino.js
// Load johnny-five, the library that lets us speak JavaScript to our Arduino.  You can read more about Johnny Five at http://johnny-five.io/
var five = require("johnny-five");

// Create a new variable to hold a reference to our board (in this case, an Arduino)
var board = new five.Board();

board.on("ready", function() { // When we successfully connect to the board and it's ready to run

    var pin = new five.Pin("A0"); // Load the analog pin by default

    // Load the express web framework which lets us set up a web server easily; you can read more about it at https://expressjs.com/
    var express = require('express');

    // Create a new server object and configure it to allow requests from anywhere
    var app = express();
    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();
    });

    // Configure the server so that when it receives a request for /pin/whatever
    app.get('/pin/:number', function(request, response) {
        // It connects to the pin `whatever` (stored in `params.number`—you can read more about express's ability to capture named parameters at http://expressjs.com/en/guide/routing.html#route-parameters)
        pin.pin = request.params.number;

        // Ask that pin its state
        pin.query(function(state) {
            // And when we get it, send back its value as a string (otherwise it's interpreted as a response status, which you can read more about at https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)
            var reading = String(state.value);
            response.send(reading);
        });

        delete pin;
    });

    // Now that we have our server configured, lets start it up on port 3000
    app.listen(3000, function() {
        console.log("Arduino listening on port 3000; navigate to http://localhost:3000/pin/A0 to see A0's reading!");
    });

});

## generateInput.js
var generateInput = function() {
    // Define our port
    var port = '3000';

    // And the Arduino URL it would correspond to
    var arduinoURL = 'http://localhost' + ':' + port + '/pin/A0';
    // Go get that URL
    fetch(arduinoURL).then(function(reading) {
        // Convert the response we get to text
        return reading.text();
    }).then(function(readingText) {
        // And now re-define `input` (which is defined globally in our HTML file) to that text
        var number = Math.abs(parseFloat(readingText));
        input = (number - 430)/120;
    });
};

## input-to-background-color.html
<!DOCTYPE html>
<html>

<head>
    <title>Input > Background Color</title>
    <style>
    body {
        transition: 1s;
        background-color: pink;
    }
    </style>
</head>

<body>
    <script src='generateInput.js'>
    // This is the only new line we added to our sketch; it simply redefines `generateInput`, we have to comment out our `generateInput` though…
    </script>
    <script>
    // This global variable will make the current value of "input" accessible ANYWHERE in your program.
    var input;

    // This is the function that will actually change the background color.
    function changeBackgroundColor() {

        // First it uses the current input value to choose a (grayscale) background color for the page using the CSS rgb() color setting, which expects a number between 0 and 255 for each of a red, green, and blu values.
        document.body.style.backgroundColor = "rgb(" + Math.floor(input * 255) + "," + Math.floor(input * 255) + "," + Math.floor(input * 255) + ")";

        generateInput();
        console.log(input);
    }

    // Finally, the background is changed every 1 seconds (or 1000 milliseconds).
    setInterval(changeBackgroundColor, 1000);
    </script>
</body>

</html>

## package.json
{
  "name": "arduino-sensor-demo",
  "version": "0.0.1",
  "description": "A small example of polling a sensor value from an Arduino and changing something on a web page with it",
  "main": "arduino.js",
  "dependencies": {
    "express": "^4.14.0",
    "johnny-five": "^0.9.60"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}
	// Load johnny-five, the library that lets us speak JavaScript to our Arduino. You can read more about Johnny Five at http://johnny-five.io/
	var five = require("johnny-five");

	// Create a new variable to hold a reference to our board (in this case, an Arduino)
	var board = new five.Board();

	board.on("ready", function() { // When we successfully connect to the board and it's ready to run

	var pin = new five.Pin("A0"); // Load the analog pin by default

	// Load the express web framework which lets us set up a web server easily; you can read more about it at https://expressjs.com/
	var express = require('express');

	// Create a new server object and configure it to allow requests from anywhere
	var app = express();
	app.use(function(req, res, next) {
	res.header("Access-Control-Allow-Origin", "*");
	res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
	next();
	});

	// Configure the server so that when it receives a request for /pin/whatever
	app.get('/pin/:number', function(request, response) {
	// It connects to the pin `whatever` (stored in `params.number`—you can read more about express's ability to capture named parameters at http://expressjs.com/en/guide/routing.html#route-parameters)
	pin.pin = request.params.number;

	// Ask that pin its state
	pin.query(function(state) {
	// And when we get it, send back its value as a string (otherwise it's interpreted as a response status, which you can read more about at https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)
	var reading = String(state.value);
	response.send(reading);
	});

	delete pin;
	});

	// Now that we have our server configured, lets start it up on port 3000
	app.listen(3000, function() {
	console.log("Arduino listening on port 3000; navigate to http://localhost:3000/pin/A0 to see A0's reading!");
	});

	});
	var generateInput = function() {
	// Define our port
	var port = '3000';

	// And the Arduino URL it would correspond to
	var arduinoURL = 'http://localhost' + ':' + port + '/pin/A0';
	// Go get that URL
	fetch(arduinoURL).then(function(reading) {
	// Convert the response we get to text
	return reading.text();
	}).then(function(readingText) {
	// And now re-define `input` (which is defined globally in our HTML file) to that text
	var number = Math.abs(parseFloat(readingText));
	input = (number - 430)/120;
	});
	};
	<!DOCTYPE html>
	<html>

	<head>
	<title>Input > Background Color</title>
	<style>
	body {
	transition: 1s;
	background-color: pink;
	}
	</style>
	</head>

	<body>
	<script src='generateInput.js'>
	// This is the only new line we added to our sketch; it simply redefines `generateInput`, we have to comment out our `generateInput` though…
	</script>
	<script>
	// This global variable will make the current value of "input" accessible ANYWHERE in your program.
	var input;

	// This is the function that will actually change the background color.
	function changeBackgroundColor() {

	// First it uses the current input value to choose a (grayscale) background color for the page using the CSS rgb() color setting, which expects a number between 0 and 255 for each of a red, green, and blu values.
	document.body.style.backgroundColor = "rgb(" + Math.floor(input * 255) + "," + Math.floor(input * 255) + "," + Math.floor(input * 255) + ")";

	generateInput();
	console.log(input);
	}

	// Finally, the background is changed every 1 seconds (or 1000 milliseconds).
	setInterval(changeBackgroundColor, 1000);
	</script>
	</body>

	</html>
	{
	"name": "arduino-sensor-demo",
	"version": "0.0.1",
	"description": "A small example of polling a sensor value from an Arduino and changing something on a web page with it",
	"main": "arduino.js",
	"dependencies": {
	"express": "^4.14.0",
	"johnny-five": "^0.9.60"
	},
	"devDependencies": {},
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "MIT"
	}