ESP8266 Useless Throwie

An ESP8266 configured as an access point with a tiny web server which serves a page displaying a toggle switch, which flips a relay when clicked.

Precompiled demo.html can be viewed here - just the button, finger and audio only.

Install:

Install node.js 5.12.0 or later.

Install grunt task runner and dev dependencies listed in package.json

$ npm install -g grunt-cli
$ npm install

Build:

Run grunt to compile each of the platforms into the dist/ folder. This executes the default task defined in Gruntfile.js.

$ grunt

Directories:

• /build - temporary dir used when compiling
• /dist - compiled files dir
• /src - source files dir

Platform specific instructions:

Further instructions for configuring each device.

• MicroPython
• Arduino
• Web

Development Notes:

Arduino:

• web server
• web server with gzip
• captive portal
• is there an ino linter / testing framework?

MicroPython:

• web server
• web server with gzip
• add to main.py
• captive portal
• websockets for bidirectional toggles
• multiple client/station bidirectional toggle support
• pylint
• precompiled firmware

Web:

• css flexbox fallback
• css autoprefixer
• css rotate finger on swipe
• js tests
• js uglify mangle
• js touch support
• js add polyfills for old browsers
• js check if device can play mp3s
• js check if offline and skip XMLHttpRequests
• js cross platform event listeners
• js finger add rage personality
• js finger add preempt personality
• js on resize move finger offscreen
• grunt add imagemin for png
• svg reduce decimal places
• svg on state glow filter does not work in ios chrome
• svg randomise button led colour
• svg randomise skin tone
• svg adjust button shadow using device accelerometers
• svg switch animate rocker instead of duplicate button and shadow groups
• add easter eggs for excessive clickers
• deploy html to paas with MQTT or sockets bridge

Common:

• add photos
• grunt add concurrent
• grunt add open
• grunt add connect, watch, livereload
• MQTT publish
• swap relay for OLED, char LCD, buzzer, LED, WS2818, etc

Links:

• demo
• WeMos D1 Mini
• WeMos D1 Mini Relay Shield
• micropython.org
• node.js
• grunt
• hackaday project

Credits:

• MicroPython socket web server examples based on MicroPython examples.
• Python captive portal code based on Mini Fake DNS server.
• easings.net for the CSS Bezier curves