loading

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!

<p>I'm pretty new to this field. Just wondering that &quot;Download Involt and unpack it into Node-webkit root folder.&quot; Where is the Node-webkit root folder?</p>
<p>Root folder is the main folder of something.</p>
<p>Did you ever tryed this solution <a href="http://www.eltima.com/rs232-switcher.html" rel="nofollow">http://www.eltima.com/rs232-switcher.html</a> for work with Arduino or it has no sence? </p>
<p>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).</p><p>In Involt (or other software) - maybe combining multiple devices and communicating into single app is doable.</p>
<p>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?</p><p>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?</p>
<p>Thank you, works well. </p>
<p>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? </p>
<p>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.</p><p>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.</p><p>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.</p><p>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.</p><p>...and by the way - maybe the whole idea is not well described on Instructables but there is more to read on <a href="http://involt.github.io/about.html" rel="nofollow">about page</a></p>
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. <br> 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.
<p>Oh, ok :)</p><p>Yes, you are right that wifi communication would be better for this.Have you tried Blynk?</p>
<p>it says the manifest file is missing...</p>
<p>Very informative, thanks for sharing!</p>

About This Instructable

27,205views

92favorites

License:

Bio: I'm interaction designer with multidisciplinary skills in tangible and graphic interfaces. Most of my projects are related to coexistence of virtual and real world ... More »
More by ErnestW:Bluetooth communication between Arduino, HTML and Android Move HTML elements with JQuery via Serial HTML RGB slider for Arduino via Serial 
Add instructable to: