-->
Page 1 of 1

A demo fullstack web application for the ESP8266

PostPosted: Fri Jul 31, 2015 4:46 am
by lasse.lukkari
The project is a simple fullstack app hosted on the ESP8266. The idea is that you can control cheap RF switches with an html user interface. The UI is built using AngularJS and Angular Material. All data is saved to the “eeprom” and the wifi setup can be done in the AP mode.

Image

I bought my first ESP8266 boards already half a year ago but really didn’t have time to play around with them until now. This project is not really useful in real life as the 433mhz transmitter range is limited to a few meters but instead I made it just to see what can be done with the chip. The ESP8266 is sometimes a bit unreliable and every now and then it decides to just cut the connection short leaving an empty HTTP response.

I tried to follow the Arduino way of doing things and placed all Arduino code in .ino files. To be honest I’m not sure was this the best approach. Traditional C++ classes could have done a better job.

The source code can be found at github. If you are not interested in getting the build process working you can just install the required libraries and download the content of the dist/server folder and open it in the Arduino IDE and upload the sketch manually. Even if you don’t have the 433mhz transmitter you can still try it out without it.

I'm using a dev board that has ESP8266-03 installed but I see no reason why it wouldn't work on any model. It can also be set up to run on other Arduino boards using the Ethernet library.

Image

I'm realy happy how well the ESP8266 port of Arduino is working. A big thank you!

Your feedback is highly appreciated

Re: A demo fullstack web application for the ESP8266

PostPosted: Fri Jul 31, 2015 6:54 am
by danbicks
This looks amazing. Quite hard to follow, are the web pages stored as pstrings? how easy is it to recreate ones own html pages and convert to this format.

Really nice work well done.

Dans

Re: A demo fullstack web application for the ESP8266

PostPosted: Fri Jul 31, 2015 7:06 am
by lasse.lukkari
danbicks wrote: Quite hard to follow, are the web pages stored as pstrings? how easy is it to recreate ones own html pages and convert to this format.
Dans


That is done in the build process (Gruntfile.js lines 355-364) with a grunt plugin grunt-awot. Before this step the build process has minified and copied the ui files from client dir to dist/public dir and the server sketch dir to dist/server.

Then the content of the dist/public is processed by the plugin and asset router and controller are generated to the dist/server dir. It uses hex instead normal chars because this allows non text based files like images to be icluded too.

The uploading to Arduino is done with grunt-arduino (Gruntfile.js lines 328-354)

I'm only using OSX myself so I have no idea how well the build works in Windows.

New project starters can be generated with generator-angular-arduino. It also works for other Arduino boards with ethernet connection.

Re: A demo fullstack web application for the ESP8266

PostPosted: Sat Nov 21, 2015 11:57 am
by kira
lasse.lukkari wrote:
danbicks wrote: Quite hard to follow, are the web pages stored as pstrings? how easy is it to recreate ones own html pages and convert to this format.
Dans


That is done in the build process (Gruntfile.js lines 355-364) with a grunt plugin grunt-awot. Before this step the build process has minified and copied the ui files from client dir to dist/public dir and the server sketch dir to dist/server.

Then the content of the dist/public is processed by the plugin and asset router and controller are generated to the dist/server dir. It uses hex instead normal chars because this allows non text based files like images to be icluded too.

The uploading to Arduino is done with grunt-arduino (Gruntfile.js lines 328-354)

I'm only using OSX myself so I have no idea how well the build works in Windows.

New project starters can be generated with generator-angular-arduino. It also works for other Arduino boards with ethernet connection.


It is very complex do you have a install video?

http://www.awot.net/projects.html#rc-switch

Where is <aJsonStore.h> lib?

How does it learn rcswitch codes and transmit it?