Close
0%
0%

ESP8266 Useless Throwie

A useless box with a web interface served from a free hotspot

Similar projects worth following
A WeMos D1 Mini ESP8266 development board running MicroPython, configured as an access point with a tiny web server which serves a page displaying a toggle switch, which flips a relay when clicked.

You view the web interface demo here:
https://mcauser.github.io/esp8266-useless-throwie/index.html

The HTML page is built using a grunt workflow (node.js), combining CSS, JavaScript, SVG, PNGs and MP3s into a single file, which is then gzipped to half its size.

To reduce the number of http requests required to serve the page to 1x, the CSS, JavaScript and SVGs are minified and included inline. The PNG favicon and MP3s are base64 encoded and also included inline.

Each asset is minified as much as possible to ensure the resulting HTML will fit on the device.

After gzipping, the result is a single 8kb file, which is served by the MicroPython web server.

All of the graphics aside from the favicon are SVG for responsive scaling on all devices, phones through to 27" desktops.

Button interactivity is powered by JavaScript which uses CSS3 transformations for animating the SVGs. When the button is clicked, JavaScript plays the MP3s and executes http requests to the MicroPython server which triggers the relay.

I am using a WeMos D1 Mini, but any ESP8266 board running the latest MicroPython firmware will do. Simply launch a WebREPL session to upload the files, then reboot to configure the AP and web server.

The captive portal is not working yet. So, clients connecting to the unencrypted access point will have to visit the access point IP to see the HTML. Once I get it working, all DNS traffic will be spoofed and all traffic redirected to the HTML page.

  • 1 × WeMos D1 Mini $4.00 USD on AliExpress
  • 1 × WeMos D1 Mini Relay Shield $2.10 USD on AliExpress

  • 1
    Step 1

    Detailed instructions on the GitHub project page.

    TL;DR version

    Checkout and install node packages.

    $ git clone git@github.com:mcauser/esp8266-useless-throwie.git
    $ npm install -g grunt-cli
    $ npm install

    View web version. Grunt will automatically open your browser after building.

    $ grunt serve
    Run micropython version. Run grunt to build.

    $ grunt

    Open WebREPL, upload these then reboot.

    • dist/web/useless_throwie.min.html.gz
    • dist/micropython/useless_throwie.py

    Open REPL and start the server

    >>> import useless_throwie.py
    Connect browser to http://192.168.4.1:80

    Toggle the switch, watch the relay, be amazed!

View all instructions

Enjoy this project?

Share

Discussions

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates