Communicating from an Arduino to an HTML/JavaScript Webpage
HTML-код
- Опубликовано: 1 июл 2024
- This is a video walk through of communicating from an Arduino to a HTML/JavaScript webpage. The full process includes an Arduino sending messages to a Node.js server using the NPM package serialport and then communicating to an HTML/JavaScript webpage using Socket.io.
Full Tutorial: codeadam.ca/learning/arduino-...
Code: github.com/codeadamca/arduino...
Node.js: nodejs.org/en/
Socket.io: socket.io/
Arduino: www.arduino.cc/
Tinkercad: Tinkercad: www.tinkercad.com/things/5Sie...
NPM SerialPort: www.npmjs.com/package/serialport
NPM Socket.io: www.npmjs.com/package/socket.io
---
Website: codeadam.ca/
Twitter: / codeadamca
Instagram: / codeadamca
GitHub: github.com/codeadamca
Music: Dreams from Bensound.com
![ian - Fit Check (Feat. VonOff1700) [Official Music Video]](http://i.ytimg.com/vi/sDGWDBg45Dw/mqdefault.jpg)
This is pretty much what I'm looking for; I had no idea how to approach this but you've given me a place to start. Thank you!
Priceless. Thank you for this. Nice and simple but great to build upon. I already know web development and looking into starting learning about micro controllers and stuff. This helps me alot.
Was looking for a way to connect an Arduino sensor to a web page. After stumbling through several other videos, you nailed it! Very straightforward explanation. Thank you.
Great! Glad it helped!
Exactly what I needed for a university project! Clear and simple, nice video!
same :)
this is one of the best tutorials ive seen, very clear, so thank you and keep up the great work!
For sure one of the better videos ive seen! Thanks aot
Thank you @Adam for this video.
It’s very exciting to see that you can control the opacity of the div by turning a real knob!
Nice. Very clearly organized and delivered.
Glad it helped! Thanks!
It's really awesome video!Thank you!
i like your style in your videos. Debugging picture was cool lol!
Hah, thanks! Didn't want to bore anyone while I was debugging, sometimes debugging takes longer than expected.
YOU SAVED MY LIFE, THANK YOU
Gracias por todo, me has enseñado bastante a solucionar errores que presentaban mis códigos. Un abrazo.
Glad I could help!
Thanl you for this video, it helped me a lot
Thanks very much. We would like to see more of such videos
God Bless
Nice project! 👍
Great explanation!
Thanks!
I love it how the code on the right in vscode / arduino IDE is so big and easy to read...
😂 yes
I know, this was one of my first videos. My fonts are larger in newer videos! Sorry!
Excellent!
amazing my friend
You saved my project
greatest tutorial i have ever seen, thank you! one question, how can I affect my sketch instead of the html page?
Good job 👍
Excalty what i was looking for from a month
Just perfect
Thank you very much
Hi, can you please explain the part at 12:22? where do I find the cdn? Thank you!
On chrome 89 (released the 31st of August) it's actually possible to use the serial port right from the browser.
I will have to look into this! Sounds easier.
with node js how can add my own CSS document to be used for different fonts and colours etc?
Great explainer. However a lot of the code elements need to be updated for the latest node js and libraries. no complaints tho. It was a fun challenge
Thank you.
We all are struggling to make arduino projects and there are makers of arduino language and hardware, lol I wonder how easy are arduino projects for the makers of arduino.
Thank you
Hi, You got a subscriber here, I am currently learning to become full stack developer, nice video thank you, I wonder if I can install this node server on my esp8266? I have a setup with 12 max7219 modules in 2 rows, the bottom one it’s made of 8 blue max modules that displays messages and the top one it’s made of 4 green max modules, currently I have a server running on it that I made and I can send data to the esp8266 over WiFi and I can control all the settings I need, but it would be great to make it display the value of analog light sensor also the current data from the esp like temperature and humidity from dth11 or the current date and time from the DS module, good luck and all the best!
what did you do at 6:06? how to get the json file
Did you use a wifi module for this project?
Also, great video
Nope, not with this one. This one just uses a USB cable.
Thanks a lot for your good video, I have a question about sub file like css, js how to implement them ?
You would add a CSS file to this just like a regular HTML file. Just include it in the HEAD section and any CSS rules in your files using #sample will be applied.
Can Arduino IDE read JavaScript? Isn't the js library too big for Arduino?
Hey, can you create a tutorial to do the same for the ESP32 microcontroller using Wifi? I am trying to create a react application that can display real-time values using ESP32 and sensors that can be viewed from anywhere in the world.
Great video. As a "teaching moment", use accurate phraseology for syntax. For example, don't substitute literals like "check to see if different from the last time" for the precise meaning "Not Equal To" when referring to syntax such as: if (a != b) {do something}. Not only is this precise language/syntax but it agrees with language references - none of which have the literal interpretation as a substitute. I don't mean to be critical but to be constructive and improve an already outstanding walk-through video. Thanks.
Thanks for the advice! I'll take it!
Thanks for this series and this video!!! Just a small question. Can I have a node server and a device say my phone which sends data to the node server then the server sends it to the arduino, Wirelessly. Also is it possible to do the reverse, that is the Arduino sending the data to the server and the server to my phone(via an app), also Wirelessly. Here by wirelessly I mean by usinh wifi or something and NOT THE BLUETOOTH. This maybe a really noob Question, but I am a total beginner in this!!! Would really really be helpful if you reply!
I have a video on the opposite, communicating from HTML/JavaScript to the Arduino:
ruclips.net/video/hFBFju_ZSYs/видео.html
And yes, the other setup is possible. There are a few things you would have to change. Quite a challenge for a beginner. :)
1) You would need to switch out all the code that communicates with the Arduino using the SerialPort with code that communicates over wifi.
2) The computer hosting the Node.js website would need to make the Node.js app available to other computers on the same network.
3) Then from your phone (as long as it's on the same network as your computer) can open the webpage using your computer's IP address instead of localhost.
If you want this to work when you are using your phone and you are not on the same network, you would have some additional things to configure.
@@codeadamca Thank you so much man for replying!! I'll definitely try this. Just needed some assurance from a pro that if the set up is possible or not. Thanks again for clearing up. I'll definitely check out your video, and update you, if I am able to make the setup work properly!!
Hoping you can make same very helpful video but using windows. Thank You!
The process should be identical on Windows. The only difference is when defining the SerialPort variable, the port reference in my video is something like "'/dev/tty.wchusbserialfa1410", on a Windows computer is will be something like "COM4". Here are a few links to help find the port reference on a Widows computer:
www.arduino.cc/en/Guide/ArduinoUno
www.mathworks.com/help/supportpkg/arduinoio/ug/find-arduino-port-on-windows-mac-and-linux.html
If you are having a different issue, let me know, and maybe I can help.
thank you for the video ,can i ask you how to put this data in table or dashboard
I'm not quite sure I understand the questions. It sounds like you would just need to place the HTML element displaying the data inside a table and style like you would a static piece of content.
Any one know how to find the seiralport name because It doesn't shows in my ide
is it working on android too?
thank you¡¡¡
How can I control arduino and servo motor from a website
plz plz make a video
i have a question where can i find the cdn url that you copy? btw very nice video
You can get all Socket CDN links from here:
cdnjs.com/libraries/socket.io
Hello. I wanted to ask is it possible to use with Teensy4.0 instead of arduino uno? Thank you
I'm not familiar with Teensy4.0. But if it follows the same protocol as the Arduino, it should work fine.
Ye it's really helpful video but I couldn't move over this error during start node app.js Error: Cannot find module 'serialport'. I am windows user. (we tried that on MacBook it works great.)
Am relatively new to arduino?
Is the node js being hosted in the arduino chip?
If not... Is it possible?
In this video, the Node.js application is being hosted on the laptop. There is a platform called Johnny-Five (johnny-five.io/) that allows you to use JavaScript and Node.js directly with the Arduino.
hello sir, can you help the idea for the multiple sensor reading..
Once you have your second sensor connect to your Arduino (or more), you would just need to pass the data back and forth using JSON. That way you can include as much data as needed.
what if i do not have a potentiometer, and secondly this is a very good video.
Can "Proteus 8 Professional" replace the physical arduino? or not..
I don't see why not. But I don't actually know. Sorry!
What is the use of CDN?
And how to get the URL??
Please explain
A CDN (stands for Content Delivery Network) is when a service hosts common files for you to reference in your code. This way the files stay up to date and you don't have to store a copy locally. If you just do a Google for the library you are looking to use and the term "CDN" you will likely find something.
Even Google hosts a lot fo common libraries:
developers.google.com/speed/libraries
Adam, could you help me in a project? I have some doubts and you explain very clearly. Congratulations!
Possibly.... What did you need help with?
node app.js is running in terminal but in webpage it is showing errors related to GET 404 not found, what should i do
same problem bro :(
getting error as 'SerialPort is not a constructor'
This is all running on a local machine, what about actually sending the data to a linode or similar web server??
This would require that the Arduino be connected to the internet (likely with using a wifi component). I have not yet set this up, would be a fun challenge!
Please i want connect with page (camera+button) with ngrok but wen I do I have just des button only not camera why ? If you have a solution
Sorry, I have not done too much with the Arduino and cameras. I'm just starting to use a few AI cameras and an ESP32 board and the LEGO Spike hub. Maybe I'll have a related video soon!
I didn't paste the serial port link but simply write COM4 is it the write way as i use offline editor..
And sir there is also the readline error..
You can try COM4, if it works go for it! I'm on a Mac, so I need to look up the full port reference using a terminal.
Hello, does anybody know why I am getting a typeerror when using readline
Can you paste the full error into a comment? Is this error coming from the Arduino?
👍
This is what i did in the first part because i always get an error where something is wrong in the readline class and i also added the path inside the arugement object because
i also get an error where path is not defined.
const SerialPort = require("serialport");
const { ReadlineParser } = require("@serialport/parser-readline");
const parsers = SerialPort.parsers;
const parser = new ReadlineParser({ delimeter: "
" });
const port = new SerialPort.SerialPort({
path: "COM9",
baudRate: 9600,
dataBits: 8,
parity: "none",
stopBits: 1,
flowControl: false,
});
port.pipe(parser);
parser.on("data", (data) => {
console.log(data);
});
If you can paste the error here that might help me suggest something.
THANKS!!! i got this error:
TypeError: Cannot read properties of undefined (reading 'Readline')
and that fixed it!
after an hour of debugging you saved me
Thank you this helped me too!
Thx fixed it for me!
How did you fix this error? Can't seem to fix it.
Excellent your vídeo, but the code lines show very small chars, is difficult see
Sorry, I know the text is small. The text in my more recent videos is much larger.
@@codeadamca thanks for response, I download the source code in the Github, so is resolved the issue
how do we find our 'cdn' in the HTML script
If you do a Google for "CDN socket.io" you will find a few options. I believe the CDN provided by socket.io is at:
cdn.socket.io/
Man, what about re-do this beautiful video but zooming on the vs code window? We cant see a flock
I know my fonts are small, sorry! Maybe one day I'll get around to a redo. Could also use more recent versions of socket.io, etc...
how do I find out my port if I'm running linux?
I'm on a Mac. I use this: ls /dev/{tty,cu}.*
It will list all in use ports. If you can't tell which port is your Arduino from that list. Just remove the Arduino, run the command again, and take note of which port is no longer on the list.
Ho to communicate arduino and node js with wifi ?? Please i’m stuff
I have not done too much with the Arduino and Wifi. You'll need to add a wifi component to your Arduino. Then you'll just need to change the code that sends messages from app.js to the Arduino (port and SerialPort). The socket stuff can stay the same.
I'm using PC and i change my SerialPort to 'COM3' and it throw out an error "Error: Cannot find module 'serialport'". Any help? would be much appriciate
nvm, i realise that i havent npm install lol
Glad you got it to work!
@@codeadamca Hey, thanks for the video and the blog, really help me with my University project. Much love
Hey can you help me? Im also using COM3, do i have to put COM3 in there, as i dont get any strange letters at the port, there is only COM3, im getting error cannot 'Readline'
How do you send data to a server hosted on the internet?
This would be a bit harder. The JavaScript and Node.js portion would remain the same. But you would likely need to add a WiFi component to your Arduino and then communicate with the Node.js server using a method other than Serial.
Hey Adam. I just want to ask something. Can I still access all the data sent by Arduino to a Server using the webpage/index.html even if I'm away from my Arduino? Is this possible?
.listen is not a function. Any advice?
Someone else had the same issue, Socket may have changed since I made this video. Try this:
var io = require('socket.io')(app);
wait this doesn't need any wifi module? i need to make it wireless.
This example is not wireless. The Arduino needs to be connected to the device using a USB cable. It could be switched to wireless with a few modifications.
@@codeadamca wow you replied to 2 years old video comment. very cool 👍
can this be updated please
It's on the to do list, but it could be a while. Sorry!
Can I get the code please
Yep! Here it is on GitHub:
github.com/codeadamca/arduino...
For future, there is usually a GiHub link in the video description.
Web sockets is way easier than http..in case you want to build a project with it
It would be much better if you increase the font size of your code
I know, I have in more recent videos. Thanks!
I need your help
More details would help. :)
WhatsApp ?
please zoom it later
Maybe one day I'll get back to fixing some of my older videos, I know the fonts are a small in this one.
the text in js file is too small bro..
anyway, thanks for greet explanation
Yea I know, the text is much larger in more recent videos.
font size is to small bro (((
Yea I know! In more recent videos the fonts are larger.
gente boa
aoba
Thanks!
who can see anything?
I know, I have increased the font size in more recent videos! Sorry about the font size in this one.