involt / involt

Inject hardware interactions directly into HTML layout. Best for rapid prototyping.

HTML and Arduino prototyping framework for designers.

Why Involt?

Developing interactive product is multidisciplinary task. It's related to industrial design, programming, user experience and sometimes graphic design skills. Arduino is easy hardware prototyping platform but things get complicated when software is involved in project - even if there are many great tools and frameworks for app prototyping. It's a huge obstacle that blocks many concepts from making it to the real world. Involt is a framework to help you on early stages without advanced programming.

The key to Involt is to "make it simple" to prototype, iterate and quickly show results to users. It simplifies the injection of hardware interactions into HTML based prototypes. It makes it as simple as adding CSS class to element. Involt can be a huge boost in your design process, especially during RITE method (Rapid Iterative Testing and Evaluation).

The main feature of this framework is easy and quick workflow. The syntax was inspired by popular responsive design frameworks. You can create your app with basic knowledge about HTML, CSS and Arduino. You can also create more advanced interactions with use of JavaScript and JQuery.

Main features:

• Fast results with easy to learn CSS syntax.
• Works "out of the box" including basic UI elements.
• Same app can work on both desktop and mobile (with Bluetooth 2.0);
• JS/JQuery based.
• Minimum Arduino code required.

http://involt.github.io/

How does it work?

Involt translates CSS classes into functions. You need to specify UI element, target pin and variables like desired values or their range. Here is simple button example (Send to pin 5 value 255):

<div class=“ard button P5 value-255”> Click me </div> 

HTML attributes also works:

<div class="ard button" pin="P5" value="255"> Click me </div>

It's possible to do the same with JQuery:

$(this).pinDefine("P5").sendValue(255); 

Getting started: http://involt.github.io/getting-started.html

Reference: http://involt.github.io/reference.html

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.

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

Due to discontinuation of supporting Chrome Packaged Apps by Google, Involt moves to Node-webkit permanently (it shares same API).

Project works on Win, OSX and Chrome OS (Serial, Bluetooth 2.0). For mobile currently Android and Bluetooth 2.0 is supported.

For mobile support and installation check http://involt.github.io/getting-started/mobile.html

Basic blink example

http://involt.github.io/examples/blink.html

Other examples can be found on http://involt.github.io/examples.html

For development check wiki and issues on github.

involt's Issues

mouseX, mouseY (Similarly as Processing)

Example: Control robot position with mouse.

Send to arduino beginning pin values on App launch without declaring them in sketch.

If we want to set default value of (for example) increase or decrease - we need to include digital/analog write in void setup(). What if Involt could send this right after the connection is established?

This will remove the need of adding additional lines of code to sketch in direct mode. In non-direct mode user only need to write the digital/analog write in void loop() instead of adding this in void setup and loop.

This is not included because not every element require beginning value to work. Declaring multiple pin-colliding start value in advanced project can cause unexpected results so it's safer to include them in sketch setup.

PS. Everything should be sent inside IDENTIFY INVOLT OBJECTS AND DEFINE THEIR PARAMETERS

Support for float variable transmission

I can do easier support for float variables communication. I've never checked this and it's important in my opinion.

Currently involtSendString can do this but user need to manually convert the string to float inside javascript.

Sending float from UI element can be hard to include and I don't think that all elements require this.

String data send/receive (inside framework)

Add possibility to send string with chromeSend or arduinoSend.

Append on generated elements...

Append now works with involt elements but not with dynamic elements. Need to fix this with placing some functions in core.js functions (defineElement) not in framework.js

Error in response to serial.connect: ReferenceError: _this is not defined

I really like this project, and i think it has a lot of potential, you are doing a great Job 👍 .

I just have one issue, when I hit the port where my arduino is at, I keep receiving this error in the Developer Tool Console and i am not sure how to fix it.

The problem got solved when I changed line 72 on involt.js
from:

to:

but I still cant make a connection.

This the error that appear when I try the Blink Sample (everytime I press the button)

Add function to quickly change target pin of object.

This function can make creating custom script easier. Example:

Change button target pin from P5 to P6:

pinChange(P6) or $(".targetobject").pinChange(P6);

is equal to:

$(this).data("pinNumber") = 6;

Add bluetooth or any other wireless communication (in future)

It will be cool feature to add communication not only via serial. For example you can choose in involt.js something like "bluetoothOn" and change communication from serial to bluetooth (Chrome API or include additional Arduino sketch). Also make sure that transmitters and receivers work.

Use external plugin to JQuery .append support for Involt elements

With this plugin and changing from JQuery .click to .on it will be possible to use append and define object setting without adding custom script to define data.

https://github.com/naugtur/insertionQuery

Win 8 connection error

On Windows 7 it's possible to work without arduino connected (good for testing). However on win 8 it's not possible.

Possible solution: Add to loader additional button with "offline" mode

ID fix

There is a bug with defining connection ID which blocks connection to device.

Remove ugly border from windows 10

There are ugly bold borders in windows 10 chrome apps - anyone knows how to fix this?

JQuery objects rather than static variables

At this moment Involt use function to change one variable with css classes to use in JQuery function. The improvement will store the classes in objects and they will be easy to acces with .data()

Make framework more friendly for prototyping

After gathering opinions about Involt I see that framework has a huge potential to become good prototyping tool. Currently the limits of Chrome Packaged App doesn't matter for low and high fidelity prototype.

I think that additional prototyping support is the key to convince people for using Involt as the best choice for product/UX designers. Actually I don't see other easy solutions to do this - of course there are tools like cylon.js or node.js and many more non-js solutions but they are not as simple as Involt to use. On the other hand these frameworks are better for creating robotics but this is not the goal of Involt - developing robots is not the same as product/interactive design.

Also good idea is to create involt for phonegap or chrome mobile apps in future.

What can be done to improve prototyping with involt:

• Additional UI styleguide for low/high fidelity prototyping - for example with id #proto
• Tablet and mobile devices mockups activated on adding class or ID to div (then the mockup will be included as background image). Then user can add their app to limited div on screen size 768x1024 or 320x480.
• The mockup screen needs pagination similar to JQuery mobile? Currently hyperlinks are not allowed in Chrome Apps. Maybe this can be easy to do with JQuery.
• Added some survey/usability testing features - for example the simplest thing is to add task descriptions and some JQuery methods to finish them?
• JQuery mobile (as UI framework) support? in future when Involt will work on mobile this will be good idea.

Improve send to multiple pins

Currently it works fine with only a few objects. If it will not change it will be depreciated from 1.0.3

HTML form submit button

Currently input-write and custom-write send values on change (when it's not active). In most cases better is to add submit button of the form.

Allow Involt to send single value when sending other data asynchronously.

When preparing tutorial for manipulating the DOM which includes three knobs data and single button which sends single string problems occured.

The too large delay is blocking the data stream but the real problem are small glitches when receiving data (the Arduino serial works fine) for example instead of A0V123E it gets A0V1 23E there are no letter error, just new line between them.

Of course the framework automatically skips the corrupted data but it's good when you send value of pin every 10 miliseconds. For single event when the error occurs - Involt will not respond.

Currently i fixed this by appending each small part of string and then pass the data to other functions instead of just removing bad data and will upload soon the new version

Smooth value transition as additional syntax element.

Feature similar to Hover in issue#8. Make a smooth transition in [value]. "For" statement should be helpful.

Example:
ard button P5 smooth-255-0
ard button P5 255-0
ard button P5 255->0
ard button P5 255>>0

or define transition speed:
slow > normal >> fast >>>
or something similar allowed to use in CSS

255 - beginning value
0 - value to fade out

Example Usage: Smoothly blink LED or move servo.

This should be acceptable for elements like hover, button, increase-decrease, radio, checkbox and toggle.

Web Components

How about if we use web components with data binding, instead of baking in all functionality to involt.js?

Fix the error notification in console

Add something that verify the connected port (add Chrome API Serial elements).

Make it easy to call a function from Involt to Arduino

Triggering custom function in Arduino sketch requires editing the code - adding custom string and reading the parameters. This should be more automated from both sides.

In App it should be possible to define when to send additional string to trigger function in sketch (in chromeReceive).

Add support for cordova with bluetooth/ bt LE (mobile chrome apps, phonegap?)

I am intrested in including the possibility to use involt with future bluetooth on mobile chrome apps https://github.com/MobileChromeApps/mobile-chrome-apps

At this moment bluetooth api is in medium term of developement.

knob-write

Is it possible? At this moment using many knobs cause high CPU usage. At beta stage I had problem with creating knob-write element. Maybe change knobs to pure CSS?

Find better plugin for slider

HTML range input is not the best to use inside app as raw input. JQuery UI is too heavy to add only for one feature. I found simple-slider plugin which is easy to use.

Find a way to fix connection error when quickly reopening App on win 8

When quickly relaunching the App sometimes the connection is inaccessible - this is probably caused by not disconnected previous connection. The chrome.serial disconnect on close is not solving the problem at all (or I'm using this function incorrectly).

Each new reopened App generates +1 to connection ID and this may cause the problems when the previous ID is not closed.

Relaunching chrome helps.

Make code easier to maintain with more object usage and JavaScript object.prototype

When using serial only it's easy to edit the Involt functions - but with bluetooth support it will be harder to divide them between BT and Serial. Also I want to include in framework Involt object with core functions and settings (and use prototype for object functions).

Make the framework UI elements work with JQuery .append() function

Currently you can't add new framework elements to DOM because functions aren't triggered after launching the app. (Data binding)

1.0.3 Testing connection (and eventually fix it in 1.0.4)

I've uploaded the new website and documentation. Now v1.0.3 is merged to master (I had some issues with git and merging. Now everything is ok),

We need to test the serial Connection to make sure it's 100% stable before adding new things

I hope it is from now...

Add non-framework send/receive function (not sure if possible; in future)

It could be used with:

• LCD display
• Opening audio track name
• streaming audio from microphone?
• receive file from sd card?

"bar" redesign

Create bar with mapped value (currently it's based on pixel width).

Send string with letters instead of numbers with new [pin] parameter - S instead of P or D

Everything sent or received from Involt is a converted string.

The custom string can be sent with custom-button, input-write, custom-write but sketch by default translate this to intiger.

Currently there is a tutorial(included with upcoming 1.0.3 website update) that explains how to send custom string to arduino and use it inside sketch but how about making this a default feature?

It's possible to create inside sketch additional String array and add elements with S parameter. For example: ard button S0 Hello_World. There can't be spaces between because it will be another css class. Maybe it's good idea to use attribute string="Hello World" and thread this as Value when the S letter is in pin:

<div class="ard button S1" string="Hello World">Click Me</div>

The reason why it's not default is limited sense of use only to button, toggle and maybe checkbox, radio.

Arduino sketch with chars and arraybuffer instead of strings

Many people complains about strings, maybe it's time to do additional sketch for those people.

Involt sketch by default is string based because it's easier for entry level users to write scripts.

Pagination similar to jquery mobile

Because of Chrome apps limits in hyperlinks, the app should have single view layout - I want to add mobile version for phonegap where it's also recommended. I want to make for user easy to do pagination in single html file - similarly to jquery mobile.

Buffer overload when using rs232/pl2303hx (converter+atmega or pro mini) win 8.1

Every time data is read and send over pl2303hx converter there are single chars received instead of full package. Need some research what causes this problem.

Last time problem occurred on slow bitrate. Changing to 115200 fixed this problem.

Screens from 2 knobs 1 app example:

Screens are from different delays.

Add beginning value to slider?

Currenty beginning value is 0, sometimes (for example servo position) user want to start from different value - require additional class in syntax [beginningvalue]. User also need to define the value in void Setup()

Mobile events (JQuery mobile?) for Involt mobile

JQuery mobile has additional touch-based events so it's usable on mobile devices. Maybe I should add JQuery mobile to 100% support for Involt or find custom plugins. From the other hand JQuery mobile UI kit can be edited to fit the needs of involt and maybe it should be based on it for mobile phonegap version?

If I add only the plugin for such events the ui kit can remain same as before but adding JQuery mobile support would be nice.

Default settings for dynamic HTML elements

When we forget to add parameters for HTML elements (range, begining value, step) the framework will not work. I think it's good idea to add default settings when something is not added but required:

Default values:
Step: 1
Range: 0-100/0-255?
begining value: 0

Make the connection persistent (in background - without reconnecting each time)

Each time app is launched it requires to disconnect from previous session to avoid connection blockade (this is included in upcoming 1.0.6 version to prevent connection errors - this happens not on all computers).

... but reconnection resets arduino and non-saved data is lost from device.

It's better to let users decide if they want to keep the connection from previous session or reset the arduino each time they use Involt.

This requires major changes in the way how framework connects to device. Maybe this should be included with phonegap support (on mobile this feature is more important than in desktop version)

Fix the unexpected results on arduino sketch

I found Issue when using the variables from chromeDigital array - when undeclared they are not working correctly.

I've quickly fixed this Issue because the framework was unstable.

Change sendCssSplit function in involt.js

Change sendCssSplit function to trigger only once on startup (the main problem is the value which is hard to edit with custom JQuery because it updates to beginning state each time). It will make the framework more flexible for JQuery. I had some issues on changing this.

Example: User can't change button send value with other button using custom JQuery script.

Control the project online. Web support.

Currently Involt works offline, this should be done after the bluetooth support

problem with using Involt framework

Hi,
I have problem with using Involt framework.
I have read getting start page and followed this example http://involt.github.io/examples/ex1.html

But when I run the app, my LED can't blink at all.
I download the source code from github, here is the things I have did:
add this line to index.html: <div class="ard toggle D5 0">D5</div>
in involt.js, I change defaultSerialPort from COM7 to COM3(my localside comport number)
and in involt.ino, I just modified this part like this:

...
void setup() {
  Serial.begin(115200);
  pinMode(5, OUTPUT);
}

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

  digitalWrite(5, chromeDigital[5]);

  //send data to your app
  chromeSend();
}
...

when I launch my app, I can see comport selection page and choose COM3 to connect.
But no matter how I click the button, my LED can't blink at all.
There are no error message and I don't know where to see console message or serial message.
(I try to push F12 to open console but no message there)

my chrome browser's version is 40.0.2214.115 m
and I use Arduino UNO R3
Can you give me some suggestions? Thanks very much.

Fix knob-send duplicated values on send

Changed knob change and release function to check if value is the same.

There was also a problem with sending values between specified steps.

Add Inputs: radio and checkbox

Some apps may require use of checkboxes so it is good idea to include them in involt

HC-05 Bluetooth data overload (problem effects are fixed but not the cause).

Why is the data sent correctly from Arduino but Chrome receive in one package 3 strings (or even more) at once or two times half of strings - this probably causes a lot of memory overload and increases CPU usage. Serial from arduino doesn't cause problem (readings in serial monitor are fine). The problem should be solved in involt.receive function for BT or involt.onReceiveParse or involt.receiveConvertString. Or maybe I need to change AT settings of device?

Make the .hover element usable for every object?

Hover is separate object. I think it should be possible to add "hover" to every object as syntax element.

Examples:

ard button P5 123 hover-50
ard button P5 123|50
ard button P5 123-50
ard button P5 123h50

... or with attribute:
<div class="ard button P5 0" hover="50">Click Me</div>

The onLeave value should be 0 by default. To add different value it could look like this:
<div class="ard button P5 0" hover="50" leave="10">Click Me</div>

Multiple pins (in future)

Add feature that allows single button to change states of multiple Pins.

At this moment it is possible with custom JQuery.

Involt as JQuery plugin

• Involt related JQuery methods to define pin, change them and send their values
• Performance improvements and simplified involt.js file

Change loader buttons to fit port names on mac

Port names on mac os are to long to fit in loader buttons

Add case studies

Best ways to convince user to use this project is to add real world case studies.

Ideas:

• hc-sr04 sensor + interactive infographic
• hc-sr04 sensor + interactive bus timetable on bus stop
• Create interactive object (or find something which exists and remake it in Involt) and interface with it.
• GPS + google maps?
• LED sequencer
• humidity/temperature sensor
• water temperature ?
  other ideas?

I'm not looking for too complex projects. Just simple examples.