Blink from a webpage

-

In the previous tutorial we set up a simple web server and responded to incoming HTTP requests with a static web page, this time we're going to have some interaction between the web page and the device. We'll set up a simple web page with a button and when you click that button we'll toggle the LED on the ESP8266.

In the setup function we're going to add some additional handlers for incoming URIs.

Instead of serving up a simple 'Hello World' text response, this time we're pointing the root URI towards the servePage function, in which we'll create a more detailed HTML response.

We've added a second handler for the /args URI and pointed it towards the handleArgs function, this will be used to process the incoming data.

Finally we've added an onNotFound handler, this should respond to all other URIs and direct the browser back towards the root homepage.

The servePage function still only creates a simple response for the client, but this time is is written in HTML. The sample creates a button and wraps it with a link to change the location of the browser when the user clicks the button. The new URI contains some arguments that tell the ESP8266 what is required. In this case we would like the LED to be toggled. This additional data will be sent from the browser to the web server on our device and the web server can interpret it accordingly.

The handleArgs function looks a bit more involved but the actual core is still pretty simple. The first four lines are just included to aid debugging, they create a string of data that lists all of the incoming arguments to the web server and they send that string to the serial port. This makes it very easy to see what was actually sent by the browser.

The middle of the function contains a for loop which iterates through all of the incoming arguments. There may be multiple arguments coming from the browser and they could be in any order so we loop through them all comparing the argument name against the value we're looking for, in this case 'led'. Once we have identified the argument we look at the value of the argument to decide what to do with it, in our case the value is 'toggle' but it could easily be 'on' or 'off'. If both the argument and it's value match then we toggle the state of the built in LED (don't forget to set up the LED pin as an output at the beginning of the program).

Upload the code and connect to the wifi network created by the device, point the browser towards http://192.168.4.1/ and you should see a simple page with a single button load. When you click that button the LED on the ESP8266 should toggle between the on and off state.


Popular posts from this blog

Wiring the Ruida Controller

-
Image
The RDC6442G controller from Ruida This is going to be quite an image heavy post describing the rewiring needed to convert between the Leetro controller and the Ruida controller. It is also pretty straight forward on the old Just Add Sharks laser cutters because all of the wires are clearly labelled. The controller was prepared in the previous step in order to make this conversion process as smooth as possible. The Leetro (Pad03) panel on the left and the Ruida panel on the right The view from inside the laser looking up at the control panel The control panel is an easy place to start, both panels have just a single cable that runs down to the controller, both panels are a very similar size, with the Ruida panel being slightly smaller underneath so it will fit in the hole left behind easily. The Pad03 panel clips into place so you'll need to reach up inside the machine to work the clips loose. The cable runs down the inside of the laser and is cable tied onto mounti
Read more

Rainbow Puzzle Box

-
Image
This is a binary sequence puzzle box built from 3mm birch plywood, it uses a Gray code pattern to ultimately align all the dials into a rainbow pattern before the lid can be removed. It's actually a redesign of a puzzle inside Loki's box of Tricks  because I thought it would make a cool stand alone puzzle box. The files are available for sale in my Etsy store . ( svg here ) The puzzle consists of five interlocking disks that can only rotate when the disks either side of it are in the correct position to allow it. The large wheel in the middle and the disks on the underside of the lid further restrict the rotation of the disks. The large wheel must be pointed to the disk that is being rotated and the large wheel is in turn restricted from pointing to the smaller disks depending on alignment. Once all the disks are aligned into the full rainbow the large wheel is completely free to rotate and can be turned to the edge of the box and allows the lid to be removed. There is a very
Read more

Laser Cut Cryptex

-
Image
This is my laser cut cryptex. It features 28 different characters and 9 rings, giving a total possible 10.5 Trillion different combinations. I took a bit of time developing the design so that I could add some nice features. This cryptex file is laid out so that you can have any number of rings in your own design. The best feature is that the codeword is changeable, each locking ring has an outer letter ring that can be placed in any one of the 28 different positions. Once the rings are back in place the ring locking bars can added and they prevent the rings from being modified until the box is open again. It's a bit hard to explain so I made a video showing how it all work ( svg here ) It took a long time to assemble this so I lived with my initial design choices but if I were to remake it I would adjust the file to make the ring locking bars out of 6mm ply and maybe put some blind holes onto the code rings to prevent the code being brute forced.
Read more