ESP8266 Control, now with SLIDER !
Webserver or Access Point version !
Had to put many hours into this.
My prerequisites: FastLED driven directly with the ESP8266.
The HTML code has also to be on the ESP8266,
no additional SD-Card. As Access Point there is no
connection to another WiFi and it can be used anywhere.
As Webserver it is now a part of your WiFi network and
even if there is an internet outage you still can control
your lamps.
Challenge was to write it with HTML without loading
CSS stylesheets from the web - and maybe the most important
feature: it works with any device (phone, PC, Tablet)
AND with any browser I tested so far - even with bitchy Apple
devices. Support for Apple devices was not intended but a
nice side effect of the back to the basics HTML 1 programming.
The slider is by now just a workaround. For the overall brightness
I divided it in 24 steps from 20 to 250. When I tried just to
filter the value 0…255 from the string it always returned a
“URL not found” page.
This was my very first attempt on HTML and I want to cry out
for help to a HTMLer who is willing to contribute.
Hey, the previous code was downloaded approx 450 times - one of you guys must be better in those things than me!
Next on the wishlist would be sliders for RGB, HSV, and speed
control - and may be even a color picker ??
Awesome work on this… hats off !!
It convinced me to get my hands on a couple of these ESP8266 modules. I understand you used Adafruit’s Huzzah that is currently out-of-stock…
Any other suggestions for a standalone ESP8266 module with plenty of available programming space ?
@JP_Roy
The WeMos D1 Mini is small, breadboard friendly, and has 4M of program space and 3M of SPIFFS (for storing files such as HTML files). Like the NodeMCU board, it also does not require you to press any buttons to ground GPIO 0 to enter programming mode. I got mine on AliExpress with a DHT11 temp/humidity sensor shield for $6.
@Juergen_Bruegl I’m pleased to report that this new code works great on the WeMos D1 Mini in both access point mode and webserver mode. Thank you for making it easy to switch between the modes in the setup(). If I may make a suggestion: I slide the brightness slider, click submit, and it changes brightness. Then I select a new pattern from the drop down menu and click submit. The new pattern loads with brightness set to 51%. Is there a way to retain the brightness value when choosing a different pattern? Perhaps there’s a way to consolidate the two submit buttons into one button?
Installation note: after uploading the webserver code, on the serial monitor I saw it trying to connect to WiFi, and it kept “thinking” (dots appeared … for a few minutes) until I reset the ESP and it then connected very quickly.
Thanks again.
Hi @Juergen_Bruegl , thank you for the suggestions.
I ordered a couple of the ESP8266-01 and a 3.3V USB-FTDI converter module. Won’t be able to tinker with it before about a month but it will give me time to decide what the hell I will do with it.
A quick question…
Will that specific version (-01) be able hold and run the latest version of your code ?
No problem at all - it uses 225K of 434 KBytes (51%) and 37K of 82 KBytes (44%) RAM on the ESP01
On an ESP12 we are at 21% and 44% RAM.
With my elaborate code (123 RGBs, 35 different animations, 1500 lines of code) the ESP01 is at 56% and 50% RAM
That’s what I call headroom
@Juergen_Bruegl
That is one awesome little module !
For my first project with it, I think I will not use it as a standalone but hook it up to my 8X8X8 RGB cube that runs with Teensy 3.1, the OCTOWS2811and FastLED libraries.
I considered building a physical control panel with pots, knobs, switches, oled display etc… for it but will instead write a user interface on that wifi module using your sketch as a template.
By the time I get my parts, you will surely have more sliders, bells and whistles included
I hope to start contributing at that point !
Thanks again !!
Amazing… I had all the right junk on my desk and had this running within 20 minutes. I only needed to rearrange the subroutine order to compile under Arduino 1.6.7 Running on a generic ESP8266-12F module in access point mode.
What would you think about hosting the web app online, and just entering your device’s IP address in a field? It’d make improving/modifying/maintaining the HTML much easier, and reduce the space used by your app, but at the expense of requiring an internet connection. If you’re open to this, I’d be happy to help with the HTML. Here’s an app I made for my Photon-based projects: http://evilgeniuslabs.org/fibonacci
Or, if it’s possible to serve files from the board’s storage, could at least get the HTML out of the C code, and into separate files (html, css, js, images, etc).
@Jason_Coon
Mr. Aditya Tannu has been experimenting with serving files using the ESP’s SPIFFS. The most recent two projects on his website have some useful examples. http://adityatannu.com/
Here’s the reference page for using SPIFFS: http://arduino.esp8266.com/versions/1.6.5-1160-gef26c5f/doc/reference.html#file-system
The file upload tool is not part of the regular ESP8266 Arduino core installation. Once you download and install the upload tool, it’s easy to get files onto the ESP using the Arduino IDE.
@Mark_Kriegsman Oh yes I learned a lot.
The HTML codes are wrapped into a text string and additional \ and " are needed.
What helped was http://www.w3schools.com/html/. Here you can try out the code and see how it looks like before upload. The string formatting is then a real pain but the Arduino IDE helps a bit by greying out wrong formats.
Basically all HTML works except when you call for online libraries in Access Point mode. Haven’t tried it with WebServer mode, but I’m always a fan of stand-alone projects. If there is an internet outage you cannot control your lamp - aweful szenario
This is very cool. I ordered two Huzzahs and am waiting for them to get in. Very excited about the functionality and price point and this demo. I’m looking to do something similar but what I want to do is have the unit handshake with my server online. I assume if this is done the local web server code is not needed? I can have a hosted page accept info and then have the unit poll the server for updates?
I’ve never used HTML but I’m sure that I can work something out…
