Embedded webserver HTML5 mobile app approach

Question

I'm planning to realize the following project and would be thankful if somebody could verfy my approach!

I want to establish a fully bidirectional wireless realtime communication between a smartphone (cross platform) and a embedded microcontroller running a webserver.

The webserver should provide data of the connected hardware in realtime e.g. temerature. The smartphone should render these on screen and you should be able to configure the hardware e.g led color with the smartphone and save the config to the embedded webserver.

My first guess was to use HTML5 websockets but they aren't available on all platforms so I got inspired by XBMC, which uses JSON-RPC.

Just imagine a car stero system with bluetooth connected to a µC with webserver and wifi dongle.

My plan is to implement a webapp on the webserver which lets serves the purpose mentioned above. But the tricky part is to get the user to establish a bluetooth connection to the stereosystem because i looked up similar questions which say you can't access stuff like bluetooth on the smartphone with HTML5.

long story short, this is the current idea: hardware -> µC -> webserver -> HTML5 Webapp-> WIFI -> Smartphone communication via JSON RCP.

I would be highly thankful if somesone could give a statement to said idea and planned implementation because I never done this before!

Thanks guys!

Answer 1

I think your first instinct was probably right. Have you looked at socket.io for node? It's essentially a shiv which ensures that you can use websocket functionality in virtually any combination of device and browser (see list of supported transport mechanisms and browsers here).

It should allow you to avoid bluetooth altogether.

Answer 2

We at muzzley, have developed a framework to simplify this process. We provide a way for your browser applications to communicate with smartphones. In the side of the smartphone you have widgets that are already done (gamepad, drawpad, switch, swipe, others) or you can build your own html based widget.

(disclaimer: i work for this project)

Most of the work is already done for what you want to do :)

Quick start here:

• http://www.muzzley.com/documentation/quick-start.html

You can pull from github several examples here:

• https://github.com/muzzley/muzzley-demos/

Lib for browser:

• http://www.muzzley.com/documentation/libraries/javascript.html

I hope it helps.

Best