Getting Started - Quick start

Involt works like bridge between hardware and software. It's HTML/CSS framework bundled with hardware interactions - just define parameters of what to send where with CSS classes. The hardware part is reduced to minimum where framework handles only the communication and triggering functions. Involt from technical point of view does two things. It transfers variables between Arduino and app so they are accessible from both sides. Secondly, it contains UI kit generated by CSS classes.

The purpose of Involt is fast and easy prototyping - for more details about the project read the about page

What communication methods are supported?

  • Serial - desktop
  • Bluetooth (2.0/classic) - desktop and mobile

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

How to install

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

  1. Download Involt
  2. Download Node-webkit*
  3. Unpack Involt to Node-webkit root folder
  4. After opening the app you should see loader with available devices.

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

Previously Involt was developed as Chrome Packaged App, the project moved to NW due to fact that Google discontinues support for those apps.

Adding UI element

It's as easy as adding HTML element with CSS classes. No need of writing native app or rewriting the existing prototype. Adding CSS classes to exisiting elements is great way to inject hardware interactions.

The most basic syntax looks like this. Every UI element has similar pattern:

ard [element] [pin] [parameters]

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

Read more: HTML UI & CSS syntax.

Basic examples

Best way to learn is to understand how basic elements work. The code must be written from both sides. Usually it's one line of HTML and one line in Arduino sketch. The HTML part should be included in app.html (as homepage) and Arduino code in involt-basic sketch.

Read data from Arduino

To send numeric value from device to app use involtSend(pinIndex, value) in included involt-basic sketch. This value will be updated automatically in app. UseinvoltSendString to send strings.

Add this to arduino sketch loop section:

...

void loop(){

involtReceive();


involtSend(0, analogRead(A0));

delay(2);

}

...

Now add this element to app.html file. After connecting something to A0 (knob or anything else) you should see the value changing. The show element has no other attributes.

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

Send data to Arduino

Sending data requires digitalWrite or analogWrite with involtPin[pinIndex] array value. The values in this array are updated automatically. 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]);

}

...

The 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. This example will send not only numeric values:

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

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

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

analogWrite(5, 255);

}

Summary

As you see, using Involt is easy to understand. 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:

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

Sounds trivial? Maybe. Creating layouts with CSS sounds like something banal but have you ever thought about adding hardware interactions with it directly, without any online controled services or figuring out how to establish connection? With Involt, combining interactions is easy as never before and opens new ways in prototyping and further development. Calling this way of designing "tangible css" is something well describing what actually happens when you use Involt.