Pages: [1]   Go Down
Author Topic: Communicating with Arduino via web app without using Firmata?  (Read 1366 times)
0 Members and 1 Guest are viewing this topic.
0
Offline Offline
Sr. Member
****
Karma: 2
Posts: 260
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

I have a board that runs the Leonardo bootloader with an Arduino sketch, and I'd like to communicate with it via serial to reconfigure some of its settings (internal variables that I am storing in EEPROM). I've been able to successfully connect to the board using Processing, but soon realized that making a nice GUI in Processing is not nearly as fun as it could be. I'd like to instead use my web dev skills to create a browser-based GUI and communicate with the board via a serial connection somehow.

I've looked into NodeJS and some of it's derivatives (Johnny Five, duino, etc.), but I see that they all require uploading a new sketch to my board (usually Firmata). Is there a way I can set up a serial connection to my board using Javascript (or some other web technology, maybe HTML5 websockets)?
Logged

Grad student, creative technologist, OSHW engineer
http://jason-webb.info

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 644
Posts: 50524
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
I'd like to instead use my web dev skills to create a browser-based GUI and communicate with the board via a serial connection somehow.
The Arduino will have to wear an Ethernet shield and be a server, then.

Quote
I've looked into NodeJS and some of it's derivatives (Johnny Five, duino, etc.), but I see that they all require uploading a new sketch to my board (usually Firmata).
No, they don't. They simply expect that the Arduino will respond in a certain way to certain input. Learn what that input is, and the expected response, and generate the correct response in reply to a given input.
Logged

0
Offline Offline
Sr. Member
****
Karma: 2
Posts: 260
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
The Arduino will have to wear an Ethernet shield and be a server, then.

My board doesn't allow for shields. What I was trying to say is I want to make a browser-based (not web-based) GUI using HTML and Javascript that communicates to my board using a Serial connection. The board won't care about Ethernet or anything, just the serial connection it has to the user's computer.

NodeJS doesn't look like it can be distributed easily, and I need something that I can give to non-tech-savvy people without having to force them to install extra programs and modules. Looking into using Python to make a websocket connection to a local web page, then communicate via serial to the board, but not sure how hard it is yet.
Logged

Grad student, creative technologist, OSHW engineer
http://jason-webb.info

Seattle, WA USA
Offline Offline
Brattain Member
*****
Karma: 644
Posts: 50524
Seattle, WA USA
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Quote
What I was trying to say is I want to make a browser-based (not web-based) GUI using HTML and Javascript that communicates to my board using a Serial connection.
Where do you suppose that the page (regardless of what is on it) is going to come from, when the browser requests it? Yep, the web server. You can't get around web based unless you ditch the browser.

Now, that doesn't mean that the Arduino necessarily needs to wear an ethernet shield. You could, instead, connect the Arduino to the server using the USB cable. Then, the server can tell the Arduino what to do, via the serial port.

And, no, the server can not tell your computer to tell the Arduino what to do.

There are plenty of options for building GUIs that do not require a browser to do the rendering.
Logged

0
Offline Offline
Sr. Member
****
Karma: 2
Posts: 260
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

Your responses confused me more than helped me, as it didn't seem like you were trying to really help so much as tell me my approach was wrong.

I cloned a relevant repo on Github that accomplishes exactly what I'm trying to do, and learned a few things from it. I'm now using Python to communicate with a local web app through Bottle, as well as communicate with my board via pySerial.

I've looked into every non-web-based GUI that I felt capable of using and felt like they all were pretty severely lacking aesthetically, and wouldn't be something I'd be happy with distributing with a product. I tried several options in Processing (ControlP5, G4P, Guide) and openFrameworks (ofxUI), then checked out the more 'standard' options like Qt and GTK. The latter options were obviously super robust, but way more complicated and hard to work with than web interfaces. Web frameworks like Bootstrap and jQuery are so much easier to work with and better designed (and easier to animate and alter) that I knew I really wanted to find a way to work with them.
Logged

Grad student, creative technologist, OSHW engineer
http://jason-webb.info

Brooklyn, NY
Offline Offline
Newbie
*
Karma: 0
Posts: 13
View Profile
WWW
 Bigger Bigger  Smaller Smaller  Reset Reset

Use BreakoutJS to prototype what you want to do: http://breakoutjs.com (or https://github.com/soundanalogous/Breakout). You don't need an ethernet shield, just a Arduino and a USB cable. You'll run Breakout Server, which is a simple GUI application that bridges serial data to/from the Arduino board to a websocket stream. You then use the Breakout client side library in your web application. Doesn't get any easier than this for what you're trying to accomplish. You'll need to install a dedicated sketch (StandardFirmata, AdvancedFirmata, etc) on your Arduino for this to work. If the purpose of what you're building is to create a web application, then it shouldn't matter and you can simply focus on the web site/app rather than worrying about the details of the arduino sketch. If the purpose however is to learn more about programming an Arduino, then you may want to look more into the Ethernet solution and setting up a REST API on the Arduino.
Logged

Offline Offline
Newbie
*
Karma: 3
Posts: 28
View Profile
 Bigger Bigger  Smaller Smaller  Reset Reset

Ciao

I'm working on for my complete system dedicated to arduino and not only (online database creator, logging , control, alarm and chart via the web) and soon will be available on the webstore chrome extension to control arduino via serial

If you are interested you could help me out by giving me an opinion and test the operation before the release of the initial version
I am attaching the screen printed

 
www.dataino.it


* cromeserial-01.png (51.71 KB, 1024x557 - viewed 44 times.)
Logged

Pages: [1]   Go Up
Jump to: