Author Archives: Elias Santistevan

Enginursday: ESP32 Relay Web Server, Part One

via SparkFun: Commerce Blog

Hello dear customers and Happy Holidays! I have a short post for you today, and an update to my ongoing tutorial that I've been working on. This is officially the third post that refers to this project, the other two can be found here and here.

This image shows a picture of SparkFun's ESP32 thing Plus and Quad Relay connected together with a Qwiic connector, each being powered through a wall wart.

This project-turned-tutorial demonstrates how to start with an ESP32 Thing Plus and load the appropriate files, libraries and tools to turn the ESP32 into a web server that controls relays.

The tutorial does not just show you how to piece the hardware and software together, it explains how each individual component works. For example, the latest installment focuses on HTML, Cascading Style Sheets (CSS), Javacript (JS), and the Bootstrap toolkit. Within the tutorial are explanations of how these markup and programming languages interact to make a website and what Bootstrap provides as a toolkit.

Additionally, with regards to the ESP32, it also explains which pre-built Bootstrap CSS and JS files represent the smallest memory impact option. There is only 16MB of Flash Memory (eye roll) to store all the necessary files for an entire web server on an ESP32 after all!

As a final note this project is ongoing, which means it's not complete. I used my best judgment when deciding which topics were too distracting from the project, but if you feel an urge to leave a comment about what you'd like to see, then capitalize on that impulse, dear reader! Lastly, I've included a timeline under the section title What next? that outlines what needs to be added and what has been added. Here's the outline as it stands right now.

To Do

1. Add section on Bootstrap fies: bootstrap.min.CSS and bootstrap.min.JS. What are they and what do they do?
2. Add section on the ESP32 File Structure and where files live.
3. Add section on JSON files and Arduino JSON to store data related to WiFi settings and the state of each individual relay.
4. Add section on AJAX requests and Websockets in place of straight GET requests.
5. Add relay control function to our requests.
6. Add Hardware Section for ESP32 and Relay.
7. Add troubleshooting section to tutorial.
8. Update tutorial with the Infrared tripwires Arduino Sketch and fill in details on the hardware hookup.

As I've already mentioned if there is something you'd like to see that isn't already covered in the tutorial and isn't on this list, please leave a comment down below. Ah, and of course, a link for the tutorial:

comments | comment feed

Enginursday: ESP32 Thing Plus Web Server

via SparkFun: Commerce Blog


This is now the second post of many in an on-going project to "make smart" the lights in my house. I've broken up the project into a number of parts; the first blog post dealt with the process of building IR tripwires to keep track of the number of people entering and exiting the garden level in my house. The IR tripwire project was a journey into the timing of microcontrollers to create modulated IR signals, which signal the microcontroller to count up or down depending on the order of the tripwires being tripped. As deep as that journey went into hardware, this part of the project will conversely be wide, rather than deep, as we sweep the land of web page development.

As the project grows, I'll be creating a tutorial to keep better track of the actual project. It will take some time to complete the tutorial, as the project is large. If you follow along it'd be great to hear what things tripped you up in any one particular section; it will undoubtedly help someone out there with similar questions. One last thing - I picked this project because it looked super fun, but more importantly because I wanted to be baptized in the world of WiFi on microcontrollers. I say that because not every decision is well informed; sometimes you plow blindly ahead so as to look back upon your decisions and grow wiser in doing so.

The Why, What and How (WWH)

Let's begin by discussing the decision that led to using an ESP32 Thing Plus, SPIFFS, and ESPAsync Web Server. After reading on Hackaday about a person's four-year journey into building an IoT garage door opener, I was inspired to finish the relayed-controlled lights. Much like his project, I wanted a Web Server on an ESP-based board that had an attractive interface, and could reliably but simply complete the task of flipping one of four relays.

This image shows the current layout of the webpage.
This is a Web Server on an ESP32, with VIM Solarized theme!

It also had to display the status of each individual light on the web page in real time (no page refresh). Prior to beginning the project I had experience in what HTML looked like, and some experience using bootstrap in our hookup guides - not really understanding that it was a toolkit for Cascading Style Sheets (CSS), HTML and Javascript (JS). I had completely zero idea on how they all interacted to create web pages and what each individual component did, so it was with great relief that someone had left some bread crumbs to help me piece together the big chunks while leaving a lot of the details to me. Fear not, the tutorial will be those bread crumbs. Now how do we accomplish this seemingly simple task of creating a web page on an ESP32? Let's start with the FSBrowser Example in the ESP8266 Example Code.

The WWH - File System Browser and SPI Flash File System (FSBroswer and SPIFFS)

Why are we talking about the ESP8266, when the ESP32 Thing Plus is clearly in the title? I started with the ESP8266 in the first part of this series because I was under the assumption that support for the ESP8266 still out-paced the ESP32, and also because the ESP32 Thing Plus was not out yet. Coincidentally, the aforementioned blog post also used an ESP8266 - nice.

We'll talk about switching microcontrollers in a bit, but first, what is the FSBroswer example all about? FSBrowser is short for "File System Browser". What the example does is provide code that allows you to navigate files on the ESP like it was a hard drive of flash memory. This is used in conjunction with the SPI Flash File System Library, or SPIFFS Library, that organizes the files for serial upload via USB for your ESP board. Specifying which files is as easy as putting them in a folder named "data" sharing the same folder as your Arduino sketch. In addition, there is a tool built for the Arduino IDE that handles the transfer of these files onto your ESP. You have to download and add either the EPS8266 File Upload tool or the ESP32 File Upload tool (depending on your microcontroller) to the Arduino IDE. There'll be more details or are more details in the tutorial (depends on when you're reading this).

The ESP32 Thing Plus = 16MB of memory

A web page, similar to an Arduino sketch, has a number of interlinking files: the style sheets, javascript files and/or jquery files. All of these take up space on our small microcontroller, and since we're using it as a hard drive of sorts then space matters. The ESP8266 doesn't have much space when compared to the ESP32 Thing Plus, and the EPS32 has GOBS of it - 16MB of flash memory. Also at this point, while the ESP8266 has proven reliable throughout the years, it feels like starting a project with Python 2.7 when Python 3 is the latest and greatest (RIP Python 2.7 Support BTW).

FSBrowser or ESPAsync FSBrowser Example?

Again, the amount of space the files take up is important for obvious reasons - it's a file system on a microcontroller. When I first started the project, I downloaded Node.js as an easy package installation manager. I used it to naively download everything suggested on the Bootstrap page - Bootstrap, Popper.js and jquery - because I didn't know what was necessary and what wasn't. "Best to start with everything," was my refrain.

Power MAX30101 Side Power MAX32664 Side

After some experimentation and time getting familiar with the project, I was able to greatly reduce the file size to 350 KB. I loaded up the FSBrowser example and uploaded my files to the ESP32, but was dismayed to find that my snappy color theme was not being loaded.

Image of a broken web page

Looking at the developer console in Chrome, I found that the dependent files were not being accessed due to the following error.

This image shows the files that were NOT being retrieved for the web page.
Well why NOT?!

I spent hours searching for clues and repeatedly came across the ESPAsync Library. It touted many benefits in the README, and since I wasn't getting anywhere in my search I was inclined to try it – it worked immediately. Huzzah! I can't really report on the benefits of the library because I never got the chance to run into the limitations of the previous example code, since I couldn't get it to host my web server correctly. The new library touts being asynchronus, which translates into my server being able to handle multiple connections. If you have any ideas on the other benefits of this library, I'd be happy to hear them.

What's next?

The web page should be able to dynamically be updated. If multiple people are connected, then the web page needs to be able to alert anyone on the page that a light has been switched on. I would also like to save the state of the relays and the WiFi info (network name and password) locally in a JSON file. Keep an eye out on this tutorial for updates as I get along in the project. It will have detailed instructions on how to do all the above, including the whosit whatsits of the first blog post, and of course, what's to come. If you'd like to follow the project as I work on it, then take a look at my Github Repo for all the updates. I'd love to hear any trip ups you've had making a web server, or the things you wish you had known before starting. Do you have any advice for me? I'd like to hear that too!

Shout Out!

Shout out to me-no-dev for your excellent work on the ESPAsync library, and to Ludzinc for your excellent blog post on the garage door opener, which inspired all the fun I'm having with this project.

Links from the Post

comments | comment feed

DIY Capacitive Touch Night Light

via SparkFun: Commerce Blog

In April this year, my wife gave birth to our first child. It’s been an amazing experience to get to know a human that is brand new to this world. He’s surprisingly funny for a sack of flesh...

This picture shows a baby resting on his mother's lap.
I'm not one of those baby picture spammers.

...and being a Dad is an awesome responsibility. On the flip side, it's also limited my free time in the evenings, leaving less time to make cool things. Luckily, my wife had a simple request: could I make a nightlight so that we can see in the middle of the night when we’re woken by the baby? Seems easy enough.

The Electronics

My wife sent me links of orbs that turned on when touched. It was an easy thing to recreate from parts I had sitting on my desk: the SparkFun LumiDrive, 2-Inch Lumini Ring, and the Capacitive Touch Breakout Board.

SparkFun LumiDrive LED Driver

SparkFun LumiDrive LED Driver

SparkFun Capacitive Touch Breakout - AT42QT1011

SparkFun Capacitive Touch Breakout - AT42QT1011

SparkFun LuMini LED Ring - 2 Inch (40 x APA102-2020)

SparkFun LuMini LED Ring - 2 Inch (40 x APA102-2020)


I prefer the SparkFun LumiDrive for LED projects because its USB-C connector can pull larger amounts of current than its Micro USB cousin, and the Poke-home connectors make it easy to connect LEDs. The Capacitive Touch Breakout Board is sensitive enough to be activated through acrylic, which adds a sophisticated feel to any project. However, I would have exchanged the LuMini ring for the cheaper round Lumenati LED board because I don’t need the 60 LEDs packed onto that board – I just need it to glow, Chernobyl style.

The Design

In an ideal world I’d be able to make a frosted acrylic globe, but instead I went about building a 3-inch tall cylinder that is flat on one side, by stacking layers of quarter-inch opaque white acrylic. Inside the base acrylic layer, I set about designing a cutout that fit the LumiDrive. The 2-inch LuMini Ring will sit on top of the base layer, illuminating up. The cylinder will be hollowed out with a quarter-inch wall to diffuse the glow. Inside and along the flat side of the cylinder, I will affix the Capacitive Touch Breakout Board facing outward. It would have looked something like this:

This pictures shows a model of a cylinder with one flat edge.
Good ol' Sketch Up

I was trying very hard to avoid making a box because it’s creatively uninteresting, but as I thought about it more and more, the quantity of acrylic required to stack layers for my initial design is much higher. Also, how would the light diffuse through the edge of the cut acrylic?

To do this quickly, I designed the layers directly in Eagle 9 using the board files for the electronics for the project. This is an easy way to get the exact dimensions of the electronics, and Eagle can export files to the dxf format used in all drawing and CAD programs. The process is rather simple: first grab everything in the schematic and delete it. You should be left with nothing but a black screen. Now when we look at the board file, type display all in the command line. It'll show all the things left over that were not deleted with the schematic. We'll use the Lumini Ring as an example:

This is a picture of the command line in Eagle 9 with the text: "diplay all."
Display all

This is a picture of the LuMini Ring Board File with various layers turned on, looking very cluttered.
The last remnants of the board file

I want to keep the outline of the board, so typing display all -20 will display everything but the dimension layer, which is the outline of the board. If you group select everything, delete it, and then type display all one more time, all you should see is the outline. You could alternatively just turned off the other layers, but then you'll run into a layer you don't want overlapping a layer you do want.

This is a picture of the command line in Eagle 9 with the text: "diplay all -20."

This is another picture of the LuMini Ring but with a clear outline of the product only.
Just the Lumini Ring

This is another picture of a board file, but now with the outline of the Lumini Ring and the LumiDrive side by side.
Collecting the outlines of the other electronics

After you combine all of them on one page, you can build out the design around the products.

This is a picture of the Eagle Board File but with all the Electronics in the project, and with a 2-D representation of a the box design.

To export as DXF, keep in mind that it'll export whatever layer is active. I put my electronics on a separate layer than the box that would house them; you can see that by the different colors of the outlines in the image above. Make sure to only have the layers you want to export as your active layers. One other note, these lines need to be .001-inch width or less to get cut by a laser cutter. You can group select all of these lines and change their width at once. Now go to File->Export->DXF. You can keep all of the check boxes checked and in your board file folder a DXF file will appear.


Below I’ve provided code written in Python and Arduino. It’s nothing fancy. I need the Capacitive Breakout Board to turn on and off the LEDs, dim when I hold down down the onboard button D6, and that’s it! I found that it's not possible to modify the brightness with the DoTStar Library for Circuit Python, so that was omitted.


I had two options: glue or long screws. I decided on glue so that I could have a sleek looking outer layer. After assembling the acrylic box, attaching the electronics and uploading the code, it looks good - radioactive even.

This is a picture of the underside of the nightlight cube, with the LumiDrive sitting in the cutout made specifically for it and a USB-C cable plugged into it.
The underside. I wanted to see the LumiDrive and get to the D6 button.

This is the image of the backside of the nighlight cube with electronics inside.
LumiDrive facing down, LuMini Ring on top, Capacitive Touch Button ready to rest against the backside

This Gif shows someone pressing the acrylic on the backside, turning the nightlight on and off again.
Nice warm glow

If you want the design files, both Eagle and the DXF, you can download them from the link below.


I wish the Capacitive Touch Slider had been out when I was making this project; it would have given me access to dimming up and down, as well as three different buttons for different color options. That would have meant that I would have to use a different microcontroller, because I didn’t design a Qwiic connector into the LumiDrive for some reason. It would make sense, since I’m not taking advantage of the USB-C on the LumiDrive, but if I wanted to put in a disco mode, well then I’d be sorely missing that USB-C connector. Also, why didn’t I design a lid?! GUH!

I know someone out there is wondering why spend the extra cash to make something that you could easily get online. I don’t think it’s a good habit to reduce any creative or intellectual pursuit to dollars – I love walking around a house full of things I've made and it's something I want my son to experience.

Happy pre-Father’s Day to all the fathers out there! Hope you enjoyed the write up, and if anyone has created an enclosure stacking layers of acrylic, I’d very much like to hear how that light diffuses through the edges!

comments | comment feed

Automatic Light Switch on the Internet of Things

via SparkFun: Commerce Blog


I just moved into my first new home and found the lighting situation in my garden-level office to be absolutely horrendous fluorescent tubes. For the time being I'm using two very large lamps, but I'm bad at remembering to turn them off when I leave, and getting across the room in the dark when I arrive is a dangerous affair. I decided to put my things on the Internet of Things by designing an automatic light switch using the SparkFun ESP8266 Thing Dev, SparkFun Quad Relay, and an infrared LED/receiver pair as a tripwire to turn the lights on and off. You can find all the parts I used for this project below.

Resistor Kit - 1/4W (500 total)

Resistor Kit - 1/4W (500 total)

SparkFun Qwiic Quad Relay

SparkFun Qwiic Quad Relay

SparkFun ESP8266 Thing - Dev Board

SparkFun ESP8266 Thing - Dev Board

Jumper Wires - Connected 6" (M/M, 20 pack)

Jumper Wires - Connected 6" (M/M, 20 pack)

IR Receiver Diode - TSOP38238

IR Receiver Diode - TSOP38238

Transistor - NPN, 50V 800mA (BC337)

Transistor - NPN, 50V 800mA (BC337)

LED - Infrared 950nm

LED - Infrared 950nm

Note!If you're interested in a hardware-focused tutorial on how to set up a 38kHz IR signal using a 555 timer, check out the Boss Alarm Tutorial.


The largest hurdle to this project was creating a 38kHz infrared signal that would act as an invisible tripwire to activate the lamps. The next hurdle was creating a second tripwire to act in conjunction with the first to accurately track people entering and exiting the room. Before we dive into the coding aspect of this project, first you must understand a smidge about infrared. Infrared is EVERYWHERE! Just outside of the visible spectrum, infrared is given off by our body in the form of heat, the sun blasts IR from space all the time and, not to be outdone, other stars share their IR with us as well. Because of this, the infrared tripwire must be modulated to be recognized by the IR receiver.

To create this signal I wanted to start from the ground up to get a better understanding of microcontroller timings. Generating a 38kHz signal from a SparkFun ESP8266 Thing operating at 32MHz will require some delays, but for how long? What will be the duty cycle of this signal, if any? To start I did some simple math:

Frequency of the SparkFun ESP8266 thing: 32MHz
Frequency of the IR signal: 38kHz
Number of cycles in one period of the IR signal (32MHz/38kHz): ~824.105
Period of one clock cycle for the ESP8266 Thing (time = 1/frequency): 31.25ns (wowzers)
Multiply the number of clock cycles to delay, by the length of the clock cycle: ~26.3us.
Final Result: ~26.3us

Logic Analyzer

Alright that's good enough for a starting point. If I did not have a logic analyzer at this point then I wouldn't be able to fine tune the signal to discover some other unknown time hang ups. I took the final result and wrote the IR LED high for half the calculated delay time using the delayMicroseconds() function (13us) and low for the other half (another 13us). Analyzing the signal showed that the signal was too slow, but why? After some investigation I found that writing the pin high takes some time to complete, which is not really something I've had to take into consideration before. I mean of course it does, but this is exactly the kind of stuff that is so great to come across when doing a project, because this is how I learn something new.

The time to write a pin high on an ESP8266 is approximately ~1.5us. Reducing the delay to about 23us gave just enough delay to generate a 37.89MHz wave which is enough for my purposes. Implementing the signal wasn't as successful. Looking at the datasheet for the IR receiver I discovered that blasting it with a IR signal continuously only forces the receiver to turn off signal capture for a time.

I searched our website for some help and came across Nate's tutorial on rebuilding the Lumitune, which really brought the whole thing together. If you look at the tutorial, he provides code for this large project that revolves around blocking an IR signal to play a piano key. In his code he simply pulsed the IR LED for a short burst and immediately read thereafter to see if it had been read. He delays for one millisecond between these bursts to keep from overloading the IR receiver. Of course! Sometimes you go down the rabbit hole and have a hard time getting perspective on your project. This is exactly what I needed to find. I set up the first and second IR transmitter/receiver pair and had two working tripwires. I futzed with the duty cycle to see how it affected the receiver, but found that 50 percent was sufficient.

This is screen shot of the logica analyzer display a 38kHz wave.
A screenshot from the logic analyzer of both the IR signal and just above, the IR receiver going low.

The Code

To have this work correctly I mentioned that my goal was to have two IR tripwires working together to determine whether a person was entering the room. With two I can determine whether a person is coming or going from the room, because it informs me of the direction they're walking.

Direction is vital because I can keep track of the number of people entering or exiting a room. By keeping track of the number of people in the room, I can prevent the lights from turning off whenever any one person departs the room and instead only when the room is empty. That's an important distinction and a common use case for my automatic light switch. Of course this is not a perfect system; I can imagine an instance where two separate people, one leaving and one entering, trigger both IR tripwires simultaneously. I can imagine a line of Redcoats walking down my hallway shoulder to shoulder, and my setup only senses one person when there are actually three in a line.

For all the edge use cases I'm simply going to put a button near the entrance to turn off the lights, and because we're on the internet, I'll be able to turn the lights on and off with my phone as well. To implement this well, I want the second IR tripwire to trigger after the first in a specific window of time so that I can accurately determine direction. Is there something else I should be considering? Let me know below.

The code for setting up two SparkFun EP8266's was not difficult. Our hookup guide shows how to set up a simple server and the client example code provided by Espresif was all I needed to get communication between the two working. Looking toward, the future I want the web page to have a better indicator for the lights. If you're interested in the code for your own project or are feeling curious, I've linked all the code below.

Infrared Circuit

Belolw is the circuit for the infrared tripwires. One thing to note is that the IR LED can use up to 50mA of current, which is more than the pin on the ESP8266 can provide. I use a NPN transistors with 68 Ohm resistors to provide the proper current. I actually breadboarded the circuit on two seperate breadboards so I could separate them as much as possible. However, the IR LEDs still managed to trigger the wrong receivers so I used aluminum foil to create a cone around each LED.

alt text

The ESP8266 controlling the SparkFun Qwiic Quad Relay was hooked up to the I2C pins. Check out the hookup guide for the Quad Relay if you want to know more. That's all, folks! In the GIF below I show a single lamp being turned with the specific order using the "direction" logic talked about in the code above, followed by the lights turning off by going in the opposite "direction."

This gif shows the IR leds getting covered in a particular order to turn on the lamp and then in the opposite order to turn off the lamp.
Notice the Aluminum cones?

The Physical Housing

The design for the physical housing of the project will have to occur sometime after this post. As of right now it's just a hodge podge of wires. My plan is to place the IR LED and receiver pairs some distance apart in the hallway. I'll probably laser cut small boxes to house the hardware with a small hole to direct the LED and alternatively, a small hole to house the receiver.

Looking to the future

As I was working on the write up for this project it occurred to me that if two people were walking close together that the logic of the code would not work. The first tripwire will be off until the first person either triggers the second or the window of time to trip the second ends. If two people are close together then a person could slip in without being sensed! I think instead it would be smarter to create a "stack" of entrances and exits, where each tripped tripwire has an associated time stamp. I can then compare tripped tripwires and their timestamps and make decisions based on the time between them. Let me know if you guys have any suggestions in the comments below!

comments | comment feed

Desk of an Engineer: the Elias Edition

via SparkFun: Commerce Blog

We’re back with more desk details! This is the latest in our series where we barge in on people while they’re working and kick them out so we can document their desks in all their chaotic glory. And because we know that just isn’t enough information, we ransom their workspaces back to them in exchange for some details on what they have on their desks and why. We do this for you!

Clicking the image will enlarge it, so you can experience the full resolution of each person’s home away from home.

Today we’ve inconvenienced Elias! Let’s get into it.

alt text

Welcome to my office, er, delineated work space! You see that rug marks my wandering boundaries, and it also marks me for various office jokes about “making myself at home.” I’ll give you that one.

alt text

Here is the working area where I spend 90 percent of my time. I know what you’re thinking, “What smooth criminal left those fingerless gloves so tactfully on your desk?” They’re actually mine, so I guess that makes me the smooth criminal (guilty as charged), and below them I’m hiding products going live this week. On my dual monitor setup I have a character from one of my favorite cartoons of all time (20 space dubloons for whoever gets his name first in the comments). Dangling off of the monitors I have what any VIM user might have: sticky notes to some new VIM shortcut that you just learned. You’ll notice my keyboard is bite-sized, or shall I say, “VIM-sized,” since I basically never want or need to leave my keyboard to do anything on my computer. I figuratively never leave my desk.

There are my headphones, which helps immeasurably with noise in an open area office, plugged into my headphone amp that keeps the beats crisp. At the foot of the most common organizational office relics are two stones: apatite and tiger’s eye, given to me by my wife to clear mental blocks and keep me motivated. Are you giggling? Don’t hate on ancient magic! We time our computers using quartz crystals; who’s to say that tiger’s eye isn’t keeping me from wandering onto YouTube?! The EYE is always watching in this office. Did you think that was a Lord of the Rings joke? Nerds.

alt text

Nothing too surprising here: a disco ball for soldering party time, typical soldering necessities and a breadboard that an unknown coworker was giving away. My favorite items on this desk are, in order: disco ball, mansion-sized bread board, silicon mat and my duck-billed PCB clamp with the giant metal base. I honestly don’t know how I soldered anything without it.

alt text

Last but not least, we have the infamous metal shelves (infamous to a population of one: me). Infamous because they’re supposed to organize my ever-expanding catalog of engineering parts and accessories, but this has proven to be impossible to plan for and a constant struggle to contain, and so they fail their primary function. At the same time they’re just really good shelves and look at them hold these bins! Fantastic! I know this has been asked before, but there must be something better than those shelves with a million small plastic drawers that feel cheap and can’t stand up on their own. I’ll leave it at that, thank you everyone for having a look-see at all my doo-dads. It’s been a pleasure to banter at you all!

comments | comment feed