Node.js how to work with Serial ports and display data on a beautiful frontend using Highcharts API Part 1


Today I like to share something with how to use our embedded systems and web technologies. Our visualizing part is so important because thats how end users see our embedded systems real output. So there is no point if we cannot show our embedded system output to the users in a nice way.

If you are not familiar with Node.js don't worry just do some googling and run a Hello World you will be fine. :-)

http://nodeguide.com/beginner.html

Our final goal is to display our sensor data in a front end like this





Node.js is an Event-driven I/O server-side JavaScript environment based on V8. Includes API documentation, change-log, examples, and announcements. So by using this technology, we can do a lot of things. 

You don't need to worry much about coding because developers have been developed this amazing environment to use in various sides and areas. As an example if you need some coding GUI building it has a library called express, if to you want to do a text to speech application sure node will have a library which can do it.

 So today we are going to work with our serial port data and node server. To do this there is a library called serial port in nodejs.

Here what we are doing is the communication of Arduino and NodeJS using serial ports. Basically what we’re doing is sending some data(zeros and ones) from the arduino to the  NodeJS



Please follow this tutorial and get some idea this would be useful for our goal.

http://danialk.github.io/blog/2014/04/12/arduino-and-nodejs-communication-with-serial-ports/

With the help of serialport library we can easily get connected to the port that Arduino Board is connected and do our readings.

And we use socket.io library http://socket.io/get-started/chat/

because sockets have traditionally been the solution around which most real time chat systems are architected, providing a bi-directional communication channel between a client and a server.

Run those examples provided by the developers and be familiar with the environment which we are using.

So this is the part 1 of my Node.js how to work with Serial ports and display data on a beautiful frontend.

Hope to See you in my next post...


Location: United States

Comments

Post a Comment

Comment

Popular posts from this blog

IOT Greenhouse project part 1

Image
How to build Simple IOT Greenhouse (Part 1) This this project we are going to control a stable environment to the plant inside the greenhouse.  With using mqtt protocols and latest IOT suff. And also we can monitor plant conditions using digital image processing. So let's start this step by step. Part 1 is all about setting up the sensors and hardware part. So what do you need to this project ? Components 1.) Arduino Uno with wifi shield 2.) Raspberry PI 2 Board and wifi adapter. 3.) DHT 21 (AM2301) Temperature and humidity sensor 4.) Soil Moisture Sensor 5.) Light intensity sensor 6.) Water pump 7.) Raspberry PI Camera or web cam for image processing 8.) 16 in to 4 LCD display Don't be scared i'm going to explain bit by bit how to build this system. First of all you have to design the hardware part. plug the sensor to the arduino in correct way. Simple Arduino Code to get sensor data and display here this code is without the arduino w
Read more

How to fix FirebaseApp with name [DEFAULT] doesn't exist issue with flutter

Image
How to fix FirebaseApp with name [DEFAULT] doesn't exist issue with flutter This is a very common issue when we try to google authenticate our app with flutter. Please check the following are done in your app. Updated the android build.gradle file Updated the android\app build.gradle file Added dependency to pubspec.yaml Placed the google-services.json file Check Updated the android build.gradle file Add the following line to the android/build.gradle file please add the following line to that file. classpath 'com.google.gms:google-services:4.3.2' // Google Services plugin Check Updated the android\app build.gradle file Add following line to the following location apply plugin : 'com.google.gms.google-services' Check Added dependency to pubspec.yaml firebase_auth : ^0.14.0+5 google_sign_in : ^4.0.7 Placed the google-services.json file make sure you have added google-services.json from the firebase
Read more

Node.js how to work with Serial ports and display data on a beautiful frontend using Highcharts API Part 2

Image
Now you have some basic idea of the technologies we are using here. So let's get our hands dirty. First, we have to set up the Node js libraries correctly to handle the serial data and open a WebSocket. So simple what we here going to do is getting data from USB and put them into a GUI to visualize our data nicely. So for this tutorial, I'm going to use Arduino as my data source. Piratically this will be your sensor or devices which you are using. Here http://www.highcharts.com/  Highcharts makes it easy for developers to set up interactive charts in their web pages. This has good community support and this is best for our works. 1. First step clone this repository https://github.com/akilawickey/nodejs-serial-frontend/tree/master Here is the Arduino sketch sample.ino which I'm using to emulate data which you can find inside the repository 1: /* 2: * This code will emulate USB data 3: * 4: * 5: */ 6: // the setup function run
Read more