Skip to content

Commit 85a8478

Browse files
codeadamcacodeadamca
authored
Update README.md
1 parent c9c818e commit 85a8478

File tree

1 file changed

+115
-50
lines changed

1 file changed

+115
-50
lines changed

‎README.md

Lines changed: 115 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,115 @@
11
# arduino-from-nodejs
22

3-
A basic example of communication between a browser interface and an Arduino.
4-
53
This tutorial will walkthrough the process of creating a web interface to control an Arduino. The web interface will include an on and off button that will turn a light on and off on a USB connected Arduino.
64

5+
## HTML and JavaScript
6+
7+
Create an HTML file called `index.html`. Add the following code:
8+
9+
```javascript
10+
<!doctype html>
11+
<html>
12+
<head>
13+
14+
<title>Communicating from Node.js to an Arduino</title>
15+
<script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js'></script>
16+
17+
</head>
18+
<body>
19+
20+
<h1>Communicating from Node.js to an Arduino</h1>
21+
22+
<button id="lightOn">Turn Light On</button>
23+
<button id="lightOff">Turn Light Off</button>
24+
25+
<script>
26+
27+
var socket = io();
28+
29+
document.getElementById('lightOn').onclick = function() {
30+
socket.emit('lights', { "status":"1" });
31+
};
32+
33+
document.getElementById('lightOff').onclick = function(){
34+
socket.emit('lights', { "status":"0" });
35+
};
36+
37+
</script>
38+
39+
</body>
40+
</html>
41+
```
42+
43+
The above code creates a webpage with two buttons. When the buttons are clicked they use JavaScript and Socket.io to send a one or zero message to the Node.js server.
44+
45+
## Node.js Server
46+
47+
Before we setup the Node.js server we need to know the name of the serialport your Arduino is attached to. You can find the name of your serialport, it will look something like `/dev/tty.wchusbserialfa1410`. On a Mac using the Terminal and entering the following command:
48+
49+
```
50+
ls /dev/{tty,cu}.*
51+
```
52+
53+
On a PC you can use the command line and the following command:
54+
55+
```
56+
57+
```
58+
59+
Or you can find the name in [Arduino Create](https://create.arduino.cc/editor) in the drop down menu used to select your Arduino.
60+
61+
Create a file called `app.js` and add the following code:
62+
63+
```javascript
64+
var http = require('http');
65+
var fs = require('fs');
66+
var index = fs.readFileSync( 'index.html');
67+
68+
var SerialPort = require('serialport');
69+
const parsers = SerialPort.parsers;
70+
71+
const parser = new parsers.Readline({
72+
delimiter: '\r\n'
73+
});
74+
75+
var port = new SerialPort('/dev/tty.wchusbserialfa1410',{
76+
baudRate: 9600,
77+
dataBits: 8,
78+
parity: 'none',
79+
stopBits: 1,
80+
flowControl: false
81+
});
82+
83+
port.pipe(parser);
84+
85+
var app = http.createServer(function(req, res) {
86+
res.writeHead(200, {'Content-Type': 'text/html'});
87+
res.end(index);
88+
});
89+
90+
var io = require('socket.io').listen(app);
91+
92+
io.on('connection', function(socket) {
93+
94+
socket.on('lights',function(data){
95+
96+
console.log( data );
97+
port.write( data.status );
98+
99+
});
100+
101+
});
102+
103+
app.listen(3000);
104+
```
105+
106+
The above code uses Socket.io to listen for a message from the HTML/JavaScript webpage and then simply passes on the message to the connected Arduino.
107+
108+
> Note: Make sure to change the name of the serialport.
109+
7110
## The Arduino
8111

9-
Using [Arduino Create](https://create.arduino.cc/editor) create the collowing sketch and upload it to your Arduino.
112+
Using [Arduino Create](https://create.arduino.cc/editor) create the following sketch and upload it to your Arduino.
10113

11114
```csharp
12115
// Define the port for the LED
@@ -48,66 +151,28 @@ void loop() {
48151
}
49152
```
50153

51-
The previous code will listen to the serial port for an incoming message. Once a message is received, if the message is a one the light will turn on, if the message is a zero the light will turn off.
154+
The previous code will listen to the serialport for an incoming message. Once a message is received, if the message is a one the light will turn on, if the message is a zero the light will turn off.
52155

53-
You will need to set up the following circuit using your Arduino:
156+
You will need to setup the following circuit using your Arduino:
54157

55158
![Tinkercad Circuit](https://raw.githubusercontent.com/codeadamca/arduino-from-nodejs/master/tinkercad-from-nodejs.png)
56159

57160
[View the Circuit on Tinkercad](https://www.tinkercad.com/things/h0C03Xahv9R )
58161

59-
## Steps
60-
61-
1. Open up a new file and name it variables.php.
62-
2. Add the following code to the new PHP file:
63-
64-
```php
65-
<!doctype html>
66-
<html>
67-
<head>
68-
<title>Links and Variables</title>
69-
</head>
70-
<body>
71-
72-
<h1>Links and Variables</h1>
73-
74-
<p>Use PHP echo and variables to output the following link information:</p>
75-
76-
<hr>
77-
78-
<?php
79-
80-
$linkName = 'Codecademy';
81-
$linkURL = 'https://www.codecademy.com/';
82-
$linkImage = 'https://production.cdmycdn.com/webpack/44e01805165bfde4e6e4322c540abf81.svg';
83-
$linkDescription = 'Learn to code interactively, for free.';
84-
85-
?>
86-
87-
</body>
88-
</html>
89-
```
90-
91-
3. After the variables are defined use a series of `echo` statements to display the content. For example outputting the `$linkname` might look like this:
92-
93-
```php
94-
<?php
95-
96-
echo '<h1>'.$linkName.'</h1>';
97-
98-
?>
99-
```
100-
101-
> Hint: Add each value from the array one at a time. Test your PHP after each new line of PHP.
162+
## Launch Application
102163

103-
> [More information on PHP variables](https://www.php.net/manual/en/language.variables.variable.php)
164+
1. Using the Terminal start your Node.js app using `node app.js`.
165+
2. Opem up a browser and enter the URL `http://localhost:3000/`.
166+
3. Using [Arduino Create](https://create.arduino.cc/editor) upload the skecth to your Arduino.
167+
4. Using your browser push the on and off buttons and watch your Arduino for a changing light.
104168

105169
## Tutorial Requirements:
106170

107171
* [Visual Studio Code](https://code.visualstudio.com/) or [Brackets](http://brackets.io/) (or any code editor)
108172
* [Filezilla](https://filezilla-project.org/) (or any FTP program)
173+
* [Arduino Create](https://create.arduino.cc/editor)
109174

110-
Full tutorial URL: https://codeadam.ca/learning/php-variables.html
175+
Full tutorial URL: https://codeadam.ca/learning/arduino-from-nodejs.html
111176

112177
<a href="https://codeadam.ca">
113178
<img src="https://codeadam.ca/images/code-block.png" width="100">

0 commit comments

Comments
 (0)