Involt - prototyping framework

HTML/CSS based prototyping framework with build-in hardware interactions for desktop and mobile.

Similar projects worth following
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. For designers or people who are not the best in programming, but with head full of creative ideas like you... it's a huge obstacle that blocks many concepts from making it to the real world. Why shouldn't we have good prototyping tool for interactive products when there are so many app prototyping tools and now they are successfully used everywhere?

Project moved from Chrome packaged apps to node webkit

Involt website:

Involt translates CSS classes into functions. You only need to specify UI element, target pin and variables like desired values or their range.

An example of simple button that turns on LED on pin 5.

<div class="ard button P5 value-255"> Click me </div>
and in arduino sketch void loop:
analogWrite(5, involtPin[5]);

Sounds trivial? Maybe. Creating layouts with CSS sounds like something banal but have you ever thought about adding hardware interactions with it, without any online controled services? 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.

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 and manipulated by JQuery.

It's important that code must be written from both lines - usually one line of HTML per one line of Arduino code. Why? I think it's easier for entry level users to operate with basics of arduino instead of for example - working with pure javascript and sending results to pins with firmata... also, it's easier to maintain almost empty sketch from beginning. The target group for this project are not people with significant hardware/software developing skills but students, designers or entry level arduino users.

Example of showing the readings from pin A0:

<div class="ard show A0"></div>
involtSend(0, analogRead(A0));

The same code will work on all ways of communication ( BT, Serial, BT LE for desktop or mobile). It's a huge boost in prototyping process.

The button can be defined with custom jquery like this:


More details and how to install guide is on getting started page.

Why I think it's something worth attention?

Quick research on the web shows that there are many great but not simple solutions, especially if you are not a programmer but for example - interaction/UX designer.

Involt took a step forward toward simplicity of prototyping. It's easier to use CSS than scripting interactions from scratch beacuse you are probably more familiar with it (HTML/CSS) and it's more flexible when developing the layout for end-user. Practically you are a few steps forward. Involt automatically handles all of the communication and connection so you have basic setup right after installation. Another powerful feature is the fact that for Bluetooth 2.0 the same app will work fine on both desktop and mobile.

Probably you ask yourself - why such a trivial idea didn't exist? I think there are two answers to that question. In my opinion, in most cases, for hardware/software developers it's more common and obvious to start with native code and working on final result after some certain steps where others do the design and ideation process... It's constantly changing and these changes can be seen in many startup companies. I think many of Hackaday users know how to build Android apps pretty well but I think it's good to know different approaches. The second answer is the fact that such combination couldn't find proper context and usage (because of first answer).

Why and where the idea started?

The idea started during my studies at School of Form as Interaction designer. I didn't have any significant experience in programming. I knew only basics of Arduino and HTML/CSS/JQUERY for web/ux design purpose. Me and some of my friends saw a huge gap between prototyping hardware and software where it's hard to mix them in easy way to build interactive prototypes of our concepts. I started to look for most suitable solution and I couldn't find anything... I decided to learn something and start developing results in simplest way possible. The first release was far from perfect but it introduced something...

Read more »

  • Moving from Chrome Apps to Node webkit (1.1.0)

    Ernest Warzocha01/19/2017 at 12:38 0 comments

    The directions of development has changed:

    Link to changelog

    • Google discontinues support for chrome packaged apps and the framework is moved from chrome packaged apps to node-webkit. It uses the same API so porting even before 1.1.0 was just copying and pasting the files into NW folder. With this milestone the communication is held in completely different way. Now the app is inside iframe where UI is and main window contains the bridge between app and device. Best benefit in this case is normal pagination system which earlier was one of most annoying thing in framework. I tried to work with window.postMessage but it doesn't work well with cordova and slows down the communication. Now it uses javascript scopes behaviour to manage the data.
    • Bluetooth low energy support now is not efficient and causes many errors. The main problem is the fact that there are too many workarounds and it was successfully tested only on one device (using cordova and developing only on mobile may cause headaches for people who are not familiar with it). Other problem is the fact that still I can't include desktop support. The Bluetooth LE should be included when there is web bluetooth API completed. Before that, existing early beta will be depreciated. The main thing in LE is low power consumption, small size of (sometimes multiple at once) devices and IOS support. I think that for prototyping with Arduino and derivatives you will probably not use these features because most Arduino devices actually works like Serial communication packed into characteristics making them no different than BT 2.0 SPP which works better with Involt and is cheaper at all.
    • The consistency between desktop and mobile is one of most important thing.
    • Involt is changing its directions in technical development. Instead of pushing the BT LE support, the online support will fit all of needs in making it outside of Chrome and consistent on desktop and mobile (and it's easier to maintain). With online support this will be true prototyping like websites without any barriers. I think I will start with UNO WIFI and Adafruit Feather M0 WiFi w/ATWINC1500 or Arduino Yun and its Bridge Library (and later - ESP, mkr1000 etc.). ESP8266 is in my opinion not an option on start because it requires from user (ux/interaction designers) to learn additional language and will likely deters them from using the framework. This is the project main milestone for now.
    • After adding web support, I will try to actively promote the project or even gain some partnerships.
    • With online support some changes in setup and structure might be required.
    • The layout features will be depreciated and reduced only to basic pagination (for chrome apps that requires single page layouts). This may return in future releases.
    • If online version will be a success, there is possibility to make Involt extended version as SaaS and add hardware (online) interactions in existing layout (or build a new one) in browser (or standalone app). Now this is the only long term goal. Personally making a UI for Involt is great case for my portfolio so the concept might be designed earlier than development.
    • Again, some changes in CSS may occur - cordova doesn't handle shadows well and the UI kit must be simplified. Maybe some responsive styles are great idea.

  • What currently is supported?

    Ernest Warzocha05/08/2016 at 23:52 0 comments

    1. Serial communication on Desktop
    2. Classic (2.0) Bluetooth support on both desktop and mobile (tested with HC-05)
    3. Bluetooth LE basic support for mobile with Adafruit Bluefruit (depreciated in 1.1.0)

    Desktop version works on Win,Mac, Chrome OS as Chrome Packaged App

    Mobile is Phonegap based and Android is supported. Technically it's possible to run on IOS but I can't test it. For my tests I'm using Samsung Galaxy S5 with Android 5.1.1.

    Low energy is in beta.

    The 1.0.9 release where BT LE was introduced is from 8.05.2016. The whole framework started about 2 years ago but with long breaks.

    The changelog on github

    Issues on Github

View all 2 project logs

Enjoy this project?



ryiuy12 wrote 09/09/2021 at 09:03 point

This is impressive idea I am also working on a new project you can see here on apkrevolution and this post will help me to explore new ideas.

  Are you sure? yes | no

Shahalamphysio wrote 01/27/2021 at 04:12 point

Thanks for sharing this prototype Frame work. I am student in computer science and I have a project related building a prototype through HTML and CSS mainly needed for website design- you could visit for more details on how to build a professional website! 

 in online, then we can help your business with digital marketing every pros and cons to get more revenue from your business

  Are you sure? yes | no

Ember Leona wrote 03/31/2017 at 23:15 point

hi I think I want to know more I have a ton of seeds of Invention and decided to give them to the public domain because I think they will go undeveloped in my brain. openinvent. Are you making something web related I wanted to scrape DARPAs web and have a torrentWeb of precompiled zipSites. SpiderSites will make hacking more difficult and allow for knowledge to be passed on easier. itn doing so php would be clientside or pdfs/screenshots with clickable links/linkmaps would replace on the fly html. also it would be nice to get the whole webpage in a zip hash or tar-ball to save on data usage. PS I LIKE THE BOLT LOGO

  Are you sure? yes | no

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates