This tutorial is outdated and depreciated because of many changes in framework and switching to node-webkit.

Hello again!

I decided to write more tutorials about my HTML/CSS & Arduino project named Involt. For more details what is it check the project website.

In this instructable I will show the easiest and uncommon way to control RGB LED with simple HTML app. At the end of tutorial I will add simple block to display the received color with JQuery but this in not required to understand how does it work. In my opinion Involt is simplified solution to fill the lack of prototyping-oriented method for hardware and software communication.

For this project we will use serial communication. Usually for writing app people use solutions like python, java or develop native applications. Eventually there are hybrid solutions like Cordova or Node.js libraries (and Chrome Apps API - Involt is build on top of it). All of them offer great possibilities but what if I don’t need all of their features? What if I’m not good at programming? What if I’m only a interaction designer and I need to create quick series of prototypes for idea to test on users or for student project?

Actually the last question is true about me because I work as designer from graphic to UX/web/interaction design area of interests. While studying I saw lack of out of the box solution and with other - many things were impossible for me or my friends from group. I had Physical Computing and Creative Coding course with Processing, but creating user interface with it and many problems were the reason to do separate mockups for one of my project (and not only mine during this time).

The attached file will work for this tutorial but keep in mind that new version have many changes how framework work.

Step 1: Circuit and Installation

The hardware required is only Arduino and RGB led with 220 ohm resistors. Just connect the pins as on the diagram.

From software point of view you need to download Involt and install it as Chrome Packaged App (so you need Google Chrome browser):

Download Involt (github link)
Open Chrome > Settings > Extensions and toggle the developer mode.
Click “load unpacked extension...” and select the www folder.
Now you can open the App from list, use Chrome App Launcher or create shortcut on desktop.

After launching the app you should be able to see the loader. Opening index.html from project folder will not work in browser.

Step 2: Arduino Sketch

Because this tutorial is meant to be easiest way, the only thing to do in Arduino sketch (from Involt/Arduino folder) is to change directMode to true. This mode will directly send the values from app to pin. For such a simple interactions it’s ok to use it. Just keep in mind that when working on specific hardware you shouldn’t use this.

...
//Change only this to true inside sketch
boolean directMode = true;
...

Without this mode just write the analogWrite(involtDigital[index]) where index is the target pin number. The values are updated automatically.

THIS METHOD IS NOW DEPRECIATED.

Direct mode is not supported and with new version the involtDigital has changed to involtPin

involt directmode sketch.rar
Download

Step 3: Involt HTML Rangesliders

Now it’s time for the HTML part which is as simple as previous step. Involt translates CSS classes for each UI element to make them communicate with hardware. You need to define what UI element communicates with which pin (or which variable to send) and basic parameters like value or their range. For RGB slider we need to add three rangesliders in index.html which CSS classes will look like this:

<p><div class="ard rangeslider P9"></div></p><p><div class="ard rangeslider P10"></div></p><p><div class="ard rangeslider P11"></div></p>

The P9, P10, P11 numbers represent the target pwm pin. The rangeslider have default start value 0 and range 0-255 so you don't have to include additional parameters in this example. To set custom properties you just add them as another CSS class.

<p><div class="ard rangeslider P9 value-50 range-0-100"></div></p>

To understand how Involt works check the getting started page.

Now open the app, select your arduino port and check the results. You should see something same to the attached pictures. For basic usage this is the end of this tutorial. Next step is about adding JQuery based color display which is not required to work.

Step 4: Displaying the Color

I want my app to show the selected color, because… why not? :) To do this I added html div with class “display-color”.

<p><div class="display-color"></div></p>

Add basic CSS properties to core/framework.css file or add your own file to index.html head section.

<p>.display-color{<br>	background: rgb(0,0,0);
	width: 100px;
	height: 100px;
}</p>

The values for involt which goes to Arduino on user interface events are in involtPin[] array (and involtString for strings not numeric values). Same values are in involtPin[] array in Arduino sketch. For JQuery I will use only the .css() method for background color when value of rangeslider has changed. You need to add this script to your own file and include this in html head section.

<p>$(document).ready(function() {</p><p>	$(".slider").on({
		slide: function(){
	    	//This is the tricky way to update the rgb value of background
	    	var background = involtPin[11]+","+involtPin[10]+","+involtPin[9];
	    	$(".display-color").css('background', 'rgb('+background+')');
   		}
	});</p><p>});</p>

Open the app again and see the results. I did small visual changes to layout. The final project files are in the last step.

Step 5: The End

As you can see this tutorial can be done in 10 minutes without any knowledge for the part without JQuery.

The knowledge about JQuery is required only when you want to create custom interactions outside of Involt UI kit. Framework is JS/JQuery based so it's flexible as creating the interface with CSS and DOM manipulation.

Thank you for reading my tutorial. I hope you like my project. Check my other tutorials or go to Involt website for further informations.

Feel free to ask me anything @ ernestwarzocha@gmail.com