Go Down

Topic: Involt - Simple HTML and Arduino framework based on Chrome, JS and JQuery (Read 302 times) previous topic - next topic

ErnestW

Hello,

I've been working for some time on framework for prototyping and creating apps that communicate with Arduino. I've decided to share with community on this forum about my progress.

Website of the project.
http://involt.github.io/

Based on my observations I noticed a gap that blocks user experience, product or conceptual designers from creating what they want. Sometimes it's hard to create a prototype to introduce new ideas. For such people, even software to hardware communication is a huge obstacle. This requires more time or more people, for example professional programmer for which this is not a problem. In my opinion this gap is a barrier for many good ideas which remained at a standstill and then abandoned.

The main goal of Involt (framework name) is to simplify as much as possible development of Apps that communicate with Arduino. The framework can also be used to prototype and iterate at early stages of more advanced projects. Involt can be a good starting point for beginners because it doesn't require knowledge about JavaScript for basic interactions.

By using Chrome Packaged Apps (it requires Chrome and installing framework as app) it's possible to quickly develop project by using only HTML, CSS and basics of Arduino. What is more, by using Involt you can easily design good-looking user interface. The UI kit is built into the framework. To create more advanced projects you can use JavaScript, JQuery and Chrome API.

How does it work?
Involt turns CSS classes of UI element into function with target pin and value to send (or receive) and parameters. It's easy to understand and requires only one line of code per element in app (and sometimes one in Arduino sketch file).

Here is example of button that sends to pin 5 value 200:
Code: [Select]
<div class="ard button P5 200"> Click Me </div>

Everything is explained at the Getting Started page ...and Examples

Involt is still under construction - At the beginning it was supposed to be a bridge for my personal project. Now the project grows and everyone can check the issues list on github  to see possible development paths. At this moment the communication is serial-only but I want to add bluetooth (and maybe mobile support with upcoming Mobile Chrome Apps or Cordova/Phonegap ) and online communication (Internet of Things).

I would like to hear the opinions and advice on the project.
Thanks for reading.

Robin2

Interesting idea.

I have had a quick look at your Getting Started and at your Blink example.

What I don't understand is whether the user needs to write an Arduino program as well as CSS code in Chrome. Or does all the code go into Chrome and the Arduino part gets uploaded in the background without the user being aware of that.

It may make things clearer if your example included one (or two) complete files for download.

And how is Chrome communicating with the Arduino?

...R

/dev

Quote from: Robin2
Interesting idea.
+1.

But you're using String in your app?  Ewww.  Gack.  Urk.  Memory fragmentation may eventually get you. 

Personally, I'm looking at having a lot of smarts in the Arduino, with exposed "controls", not just HW pins.  This is more like Firmata, I think.  I could extend the app to implement my own controls, but... blocking in readStringUntil would be a problem for any one that has other things to do.

Quote
And how is Chrome communicating with the Arduino?
I think it's via serial, here.  Still checking out the JS, though...

Cheers,
/dev

ErnestW

Thanks for the answers.

Interesting idea.

I have had a quick look at your Getting Started and at your Blink example.

What I don't understand is whether the user needs to write an Arduino program as well as CSS code in Chrome. Or does all the code go into Chrome and the Arduino part gets uploaded in the background without the user being aware of that.

It may make things clearer if your example included one (or two) complete files for download.

And how is Chrome communicating with the Arduino?

...R

You have to write the HTML/CSS part and add few lines to arduino sketch. By using direct mode you can reduce to almost zero the required code. This framework works like serial bridge between software and hardware.

The advantage of this solution is that you can do whatever you want with your sketch and in my opinion it reduces the limitations (limited usage of GUI elements) of framework because you have "free-from-additional-libraries" sketch.

Including example files is good idea - I will create new repo on Github with examples.

Quote
But you're using String in your app?  Ewww.  Gack.  Urk.  Memory fragmentation may eventually get you.

Personally, I'm looking at having a lot of smarts in the Arduino, with exposed "controls", not just HW pins.  This is more like Firmata, I think.  I could extend the app to implement my own controls, but... blocking in readStringUntil would be a problem for any one that has other things to do.
hmm... I wasn't thinking about memory fragmentation when I started this project...

Strings are used because of Chrome API and it uses string to transfer data.

The data can be something more than raw pin states - I'm still working on that. Btw you can check this tutorial.




Btw The diagram from getting started page explains how the app works:


Go Up