Serial Communication Between Arduino and HTML




About: I'm interaction designer and lecturer with multidisciplinary skills in tangible and graphic interfaces. Most of my projects are related to coexistence of virtual and real world, thinking how they shape our m...

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.

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

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

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.


  1. Download Node-webkit* from

  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
  involtSend(0, analogRead(A0));

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


void setup(){
  pinMode(3, OUTPUT); //required for digitalWrite to work correctly

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

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


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

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

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:


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


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.

Thank you!

Be the First to Share


    • Made with Math Contest

      Made with Math Contest
    • Multi-Discipline Contest

      Multi-Discipline Contest
    • Robotics Contest

      Robotics Contest

    19 Discussions


    1 year 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


    1 year 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 but, when starting the app (clicking on the icon), it always load the nw.js hello world...


    4 replies

    Reply 1 year ago

    nevermind, found solution in official documentation : . @Rajyedke, have a look, may help you too :)


    Reply 1 year ago

    So it's 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.


    Reply 1 year ago


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


    Reply 1 year 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



    1 year ago

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


    2 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?

    1 reply

    Reply 2 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.


    3 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?


    3 years ago

    Thank you, works well.


    3 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?

    3 replies

    Reply 3 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


    Reply 3 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.


    Reply 3 years ago

    Oh, ok :)

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