involt / involt Goto Github PK
View Code? Open in Web Editor NEWInject hardware interactions directly into HTML layout. Best for rapid prototyping.
Home Page: http://involt.github.io/
License: MIT License
Inject hardware interactions directly into HTML layout. Best for rapid prototyping.
Home Page: http://involt.github.io/
License: MIT License
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.
Example: Control robot position with mouse.
Create bar with mapped value (currently it's based on pixel width).
Add possibility to send string with chromeSend or arduinoSend.
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).
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
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
Currently Involt works offline, this should be done after the bluetooth support
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.
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
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).
Port names on mac os are to long to fit in loader buttons
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.
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()
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?
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),
I hope it is from now...
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)
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.
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.
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.
#proto
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
Add feature that allows single button to change states of multiple Pins.
At this moment it is possible with custom JQuery.
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.
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.
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)
Add something that verify the connected port (add Chrome API Serial elements).
Best ways to convince user to use this project is to add real world case studies.
Ideas:
I'm not looking for too complex projects. Just simple examples.
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.
Some apps may require use of checkboxes so it is good idea to include them in involt
Currently it works fine with only a few objects. If it will not change it will be depreciated from 1.0.3
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.
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
It could be used with:
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?
There are ugly bold borders in windows 10 chrome apps - anyone knows how to fix this?
Currently you can't add new framework elements to DOM because functions aren't triggered after launching the app. (Data binding)
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.
Changed knob change
and release
function to check if value is the same.
There was also a problem with sending values between specified steps.
There is a bug with defining connection ID which blocks connection to device.
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>
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.
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.
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()
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.
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.
How about if we use web components with data binding, instead of baking in all functionality to involt.js?
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;
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.