Serial Communication Between Arduino and HTML

by ErnestW

64K9520

Intro: Serial Communication Between Arduino and HTML

Working with Arduino is easy, but creating project which involves software requires more programming skills. Unlike other solutions my project is the way to create HTML offline app.

It's easy to create user interface with HTML and CSS. This solution is simple and it allows user to create App similarly to creating website with frameworks like bootstrap etc. It's also a good solution for quickly prototyping more complex project.

In this instructable I would like to show how to communicate with Arduino via HTML and Involt which is my experimental framework.

http://involt.github.io/

Before you start you need to have:

  • Arduino UNO (or any other)
  • Something to read data (10k Potentiometer or anything else).
  • LED with 220ohm resistor
  • Node-webkit

STEP 1: What Is Involt and How to Install It.

With latest release involt moved from Chrome apps to node webkit. The installation changed and how framework works. What is Involt?

Involt is ready to app template with built-in serial and Bluetooth communication, editable user interface elements and JQuery methods for advanced users. You can control your Arduino writing only a few lines of code. If the built-in UI kit doesn't fit your needs the framework includes JQuery support and can be used like other JQuery plugins.

Of course there are other ways to work with Javascript and Arduino but the key to Involt is to make is as simple as it's possible.

Install

  1. Download Node-webkit* from http://nwjs.io/

  2. Download Involt and unpack it into Node-webkit root folder.

  3. Open the NW app.

STEP 2: Circuit

This is basic example so you need only something to read/send the data.

  1. Connect potentiometer to pin A0.
  2. Connect LED with 220-ohm resistor to pin 3

STEP 3: Arduino Sketch

There are two workflows for Involt - it depends on project when to start with sketch or HTML code, for this example the first step is editing the Arduino sketch.

Involt works like bridge between software and hardware so the communication with device is managed automatically but it requires to write code from both sides. This is not disadvantage because it simplifies many things. To communicate with Arduino you need to upload Involt sketch from arduino folder. To fully understand how does it work read the getting started page.

To read value from sensor (A0) and send it to Involt you need to add this function to void loop:

void loop() {  
 //receive data from your app
  involtReceive();
  
  involtSend(0, analogRead(A0));
}

The values received from App are stored in involtPin array. To toggle values on pin 3 add this:

...


void setup(){
  Serial.begin(57600);
  pinMode(3, OUTPUT); //required for digitalWrite to work correctly
}


void loop() { 
//receive data from your app
  involtReceive();

  digitalWrite(3, involtPin[3]);
  involtSend(0, analogRead(A0));
  delay(2);
}

...

STEP 4: HTML and User Interface.

User interface

As I mentioned before - creating App with Involt is smiliar to working with other HTML frameworks. The parameters of each UI element is defined with CSS classes. To customize the interface you can add or edit CSS file.

Add two lines of code to your body section in index.html. The first line is responsible for displaying pin A0 value and the second line is button that switch digital pin value between 0/1 (the 0 is the beginning value on App launch).

Involt basic syntax:

ard [function] [pin] [value] [yourclass]

To see what you can do with Involt check the reference page

<body>
	<div class="ard show A0"></div>
	<div class="ard toggle P3 value-0"></div>
</body>
More features

You can also send PWM value. Change the toggle button to two buttons with PWM values (or toggle-pwm button ). Here is example of button that sends value 255 to pin 3:

<div class="ard button P3 value-255">Click me</div>

To create custom interface or more advanced interactions you can use JQuery. For example - sending value 123 to pin 5 looks like this:

$(this).pinDefine("P5").sendValue(123);

Because this is basic tutorial I used only basic features. Just keep in mind that there are many ways to do same thing.

Test

To check the results open the App, choose your device port and you should see something similar to the attached picture.

For files and more examples check other tutorials on Involt page.

STEP 5: The End.

Congratulations! Now you know basics of Involt framework.

If you want to help in the development of Involt check Github page - any help will be appreciated. There are many features coming soon - read the issues and wiki on github for more details.

https://github.com/Involt/Involt Thank you!

19 Comments

Kike_GL 6 years ago

Hi ErnestW, on line 9 of index.html you call "cordoba.js" but that file is not in the www folder. What is the error?

On the other hand, the transfer of the Arduino sketch does not work for me, but if I transfer it from the official IDE, Involt works for me. This has to be done like this?

Regards, Kike_GL

lorenzob26 6 years ago

hello, at which exact level should i put involt.js ?

i tried to put in in root (on level up of the git repo folder) and also inside nwjs.app but, when starting the app (clicking on the icon), it always load the nw.js hello world...

thanks

lorenzob26 6 years ago

nevermind, found solution in official documentation : http://docs.nwjs.io/en/latest/For%20Users/Getting%20Started/#getting-started-with-nwjs . @Rajyedke, have a look, may help you too :)

ErnestW 6 years ago

So it's thenwjs.app/Contents/MacOS/nwjs folder as I remember,am I right? You just copied the files there? Somehow I didn't put it in Involt documentation as I left only the windows instructions. Since last few months I don't have Mac to test it :( However I receive mails from users with OS X so I assume that it works correctly. I should put this info on website with next update.

lorenzob26 6 years ago

ps.

seems like you've done a great job : thank you :)

lorenzob26 6 years ago

Hello Ernest,

yes, you are right :) anyway, it is not necessary to put involt in the same root of nwjs, you just need to know the nwjs root folder to refer to from involt app folder (at the moment i'm not packing the app, just launching from bash) as in step three of nwjs getting started

Cheers

Rajyedke 6 years ago

hello @ ErnestW . please help me out with how to "Download Involt and unpack it into Node-webkit root folder."

rationalfantast 7 years ago

I'm pretty new to this field. Just wondering that "Download Involt and unpack it into Node-webkit root folder." Where is the Node-webkit root folder?

ErnestW 7 years ago

Root folder is the main folder of something.

ErnestW 7 years ago

Well, honestly I've never seen that. However, personally... I don't see how could I use this with my projects (in past and future).

In Involt (or other software) - maybe combining multiple devices and communicating into single app is doable.

jbc1 7 years ago

Are you able to make something like a menu a Kiosk would use? Making a nice GUI made out of any pictures or graphics you want?

I am looking to make a small vending machine where users would make their selection and the GUI menu would give the arduino its instructions?

BerkayY1 7 years ago

Thank you, works well.

seonhan1. 8 years ago

I don't understand the benefit of this project. I just got this working. As far as I can tell, webpage is reading a serial data. Arduino is connected to my computer via hard wire, and the webpage is hosted on the same computer. The webpage asks for the com number, so I don't see how it can run from a different computer. Isn't running a webserver on arduino better so that I can view this from anywhere?

ErnestW 8 years ago

There are a few things to consider while using Involt. There are advantages and disadvantages of using this project. It depends on where or when do you use it.

The main purpose of Involt is rapid prototyping and boosting the design process in terms of interaction design and UX design methodologies. I didn't want to make another IoT solution or library for hardware developers because there are plenty of them and I have no problem if you think they are more suitable for you.

When I (me and most designers I know) do prototypes for web/app design I have a wide range of tools. I can use things like Axure, UX Pin (etc.) or do html wireframe without them. The problem is that it's not easy to do such prototype and test how is the interaction between end-user, app and device working before going further in development without spending much time on programming (for example for bluetooth device and mobile native app to handle it). What is more, with Involt it's easy to work on both layout and device interactions so it's easier to iterate the concept. I received a lot of feedback and it's true that there is lack of such solution.

Going back to your question... I saw a lot of Bluetooth and online enabled devices and their prototypes... even if their target is IOT in most cases there is no need of implementing online activities in their early prototypes. However, online support is a long term goal for Involt but it's not main focus for scenarios where it's best to use it.

...and by the way - maybe the whole idea is not well described on Instructables but there is more to read on about page

seonhan1. 8 years ago

Wow. Thank you for the reply. I agree that it is a cool idea. I don't know any html/javascript/css/jquery and I can see that Involt could just be the answer to my prayer.
What I wanted to do eventually to have a web server running on a raspberry pie who is communicating wirelessly (on the same wifi network) with several arduino boards or ESP8266 that are hooked up to various stuff in the house like lights, humidity sensor, soil moisture sensor or sprinkler system. I wish I can press a button on the webpage, and it will telnet to an Arduino and read what Arduino says and display on the webpage. I tried bluetooth and the connection with windows PC or Macbook tends to be a bit unstable. I think wifi connection is the way to go. Keep up the good work. Thanks again.

ErnestW 7 years ago

Oh, ok :)

Yes, you are right that wifi communication would be better for this.Have you tried Blynk?

makeosaurus 8 years ago

it says the manifest file is missing...