Chapters:

Introduction

Quick start
HTML/CSS interactions
Pins & Arduino sketch

Javascript

Triggering functions
JS & JQuery

Additional features

Bluetooth
Mobile

FAQ

FAQ & known issues

Getting Started - Quick start

The purpose of Involt is fast and easy prototyping. It's possible to quickly inject hardware interactions into HTML layout while framework take care of communication. Read more about this idea on about page.

If you are familiar with HTML/CSS and Arduino this quick introduction shouldn't take more than 15 minutes.

How to install

The project works on Windows, OS X (On Linux serial should work). For mobile installation on Android go to Mobile page.

  1. Download Involt
  2. Download Node-webkit*
  3. Unpack Involt to Node-webkit main folder
  4. After opening the app you should see loader with available devices.
  5. Use app.html as your homepage (you can add subpages) and involt-basic.ino for arduino code.
    6.

*The SDK version of NW is recommended as it contains Chrome Dev Tools and HTML inspector. (Mac version is in NW download section)

What communication methods are supported?

  • Serial - desktop
  • Bluetooth 2.0 - desktop and mobile (Android)
    •

Even if it's HTML based, currently Involt has no IoT online support.

Basic usage

It's as simple as adding HTML element where desired interactions and their parameters are set by CSS classes. Involt will take care of communication with your device but you need to write single line of code inside Arduino sketch for each element.

ard [element] [pin] [parameters]

<div class="ard [element] [pin] [parameters]"></div>

Read value from Arduino

Send any numeric value to your app with involtSend(pinIndex, value) in your sketch loop.

Always use involt-basic.ino sketch as starting point.

...

void loop(){

involtReceive();


involtSend(0, analogRead(A0));

delay(2);

}

...

Now add this HTML element to app.html file. After connecting something to pin A0 (knob or anything else) you should see changes in its value. The show element has no other parameters.

<div class="ard show A0"></div>
show value from knob

Send data to Arduino

To blink LED we use digitalWrite or analogWrite to change brightness. Numeric values received from App are stored in involtPin[pinIndex].

Sending and receiving can be related to any variable you want - not only pin states. You can use this array to store values for sketch functions.

...

void loop(){

involtReceive();


analogWrite(5, involtPin[5]);

}

...

This button will send PWM value 123 to pin 5 and turn on connected LED.

<button class="ard button P5 value-123">Click me</button>
button that sends value

Similarly you can use HTML inputs (and forms) to work with hardware. The example below uses text strings. Note that pin letter has changed from P to S.

<input type="text" class="ard involt-input S0" placeholder="test">

Add the code below to void loop section. When you type "involt" the LED will turn on.

if (involtString[0] == "involt"){

analogWrite(5, 255);

}

Summary

There is more you can do with Involt and it's widely explained in next chapters. Playing with examples is good idea to practice. More things Involt has to offer:

  • Trigger functions in app or device.
  • Sending strings (with pin S instead of P)
  • Use inputs to create HTML form which passes the values to device.
  • Add Bluetooth communication for wireless project.
  • Pack everything into Phonegap and use same project on Android (with Bluetooth).