Connecting the ESP8266 chip to your network

I’m working on a project to automate our chicken coop (see my article Getting over myself and doing things the easy way for more details on the project). Right now, the lights open and close by themselves: it needed to be done now since the chickens had trouble laying eggs with our short Fall days. The current system uses an Arduino Uno, a real-time clock module with the DS1307 chip and an analog dimmer. You can see the code for this version on GitHub :
https://github.com/CindyPotvin/Chickmatic/tree/master/Phase1-ScheduleTime

I’m working on the second phase: being able to change the schedule directly from our phones and gather weather data from inside and outside the coop. My plan is to use the Arduino I already have to gather data and control the dimmer, and add a ESP8266 chip to connect this system to our home network.

Another server inside the house, probably a Raspberry Pi, will be used to host a small web application in NodeJS that will save the schedule and weather data. This is also in progress on GitHub at :
https://github.com/CindyPotvin/Chickmatic/tree/master/WebServer

To get started, I had to figure out how to connect to the network using the ESP8266. I purchased a cheap, poorly-documented board (the ESP13 by doit.am) that mounts the chip as an Arduino shield so they can be stacked:

esp8266

Here are where the problems started. Because of the form factor, I thought I could make HTTP requests from the Arduino, and the ESP8266 would be a dumb chip that transmitted the request.

That’s far from the truth: the ESP8266 is also a microcontroller and it has to also be programmed. It comes preloaded with some strange chinese firmware that I could use to see if the board works, but not much else. Fortunately, it can also be programmed using the Arduino IDE and there are some nice examples, so I could start from there.

Unfortunately, it’s not that easy to program the chip directly since it doesn’t have its own USB port. There are all kinds of suggestions online on how to bypass the Arduino and use its USB port to program the chip, but it never worked and I would always get the following errors:

warning: espcomm_sync failed
error: espcomm_open failed

TL;DR The only way I found to program the ESP8266 easily was to use a 3.3V FTDI cable I bought on eBay for a few dollars, pull the digital pin 0 to ground (as stated in the documentation for the ESP8266), reboot and then I was good to go. Don’t waste time like it did.

Good to go for a few minutes, that is. After connecting just fine to the network for the first time and congratulating myself on my success, I never could connect a second time using the same code. After much experimentation, I found that the best way to make sure it always worked was to disconnect from the network and then reconnect while the chip is booting. Here is what my setup looks like for the ESP8266:

void setup() {
  Serial.begin(115200);

  // WiFi.disconnect();  // Made things work because memory was corrupted but is not needed, see EDIT below
  WiFi.persistent(false);

  Serial.print("Connecting");
  WiFi.begin(/*username*/,/*password*/); // Username/password not required after the first time, saved to flash
  while (WiFi.status() != WL_CONNECTED) {
    delay(5500);
    Serial.print("status");
    Serial.println(WiFi.status());
    }
  Serial.println(" connected");
  Serial.println(WiFi.localIP());
}

So, I’m finally ready to get started coding now that I’ve proved that I can connect to my network. To be more precise, I want to use the I2C bus to connect the Arduino and the ESP8266 together using the Wire library. The ESP8266 will send all the HTTP requests and parse the responses. This will leave the standard serial ports free so I can debug and program both chips without unplugging everything each time.

Seems logical to me, but the shield doesn’t wire the I2C bus for the Arduino and the ESP8266 together, only the serial port. I can’t just wire them myself since the ESP8266 works with 3.3V logic levels while the Arduino works with 5V. I need to have a logic level shifter, like what they did on the shield with the serial ports (the blue dip switches are used to toggle between programming the chip and linking the chips together). It can work for a little while if I cheat and connect them anyway, but it will eventually fry the ESP8266.

Since I really want to keep the serial ports for debugging and because the shield doesn’t really add much to the project after all, I ordered a new ESP8266 off eBay that’s only the chip mounted on a board with the I2C port exposed, along with an order for a few level shifters. It took a while to find a good board: many of the cheap models only expose the serial ports while I wanted a bit more. I’m still wanting for the new chips to show up in the mail, so stay tuned!


EDIT: following Ken’s comment, I tried to clear the ESP8266 memory using his sketch at https://github.com/kentaylor/EraseEsp8266Flash, and indeed it now works property.

It makes a lot of sense: I tried the disconnect() because I read somewhere that the connection was persistent, so I figured it couldn’t hurt to try disconnecting, but I did not realize I could clear the flash instead. I can’t tell when the memory got corrupted: I tried many examples I found lying around on the Internet before reaching this point.

He also made me realize I won’t need the Arduino anymore. I was stuck with the idea that it would be a hassle to plug the dimmer (controlled by a digital signal) and the real-time clock to the ESP8266, but it shouldn’t be too hard. I’ll need to use the I2C for the clock, but the library handles everything.

Don’t hesitate to tell me if I do something else that’s wrong: I’m an amateur at best when it comes to electronics. I occasionally write about my experiments, but the results are far from production-ready.

Want to learn new programming skills quickly?

Subscribe to my newsletter to receive my 5 Hacks to Learn New Skills email course directly in your inbox.

You’ll also receive updates about what's going on with the blog.

Embrace your weirdness and stop worrying

Once you’ve reached the point where you’re a proficient programmer with a good understanding of a useful tech stack, you’re now faced with the sisyphean task of Keeping Up with New Tech.

Polishing your professional skills becomes trendsspotting, starting with daily Hacker News browsing sessions to find out what’s going to be the new hotness, and then making sure you know everything about it. Or it is really? Frameworks and tools keeps multiplying like rabbits, and anybody claiming they’re up to date is profoundly delusional: something new probably came up as they’re saying it.

I’ve been thinking about how futile it is to feel like you’re missing out on something great in today’s tech landscape. There was an era when you could know everything about a programming language, but this time is long gone. What you really need is to stay sharp and keep exercising that learning muscle so you’re ready when something hard gets thrown at you. Every software has its quirks, and your job is to learn them and be productive, not to be perfect the first time you’re touching it. You’ll never be 100% ready for a new task, so they’re no point in sacrificing all your nights and weekends to this.

Let’s face it: as an interviewer, would you be more interested in a candidate that messes with the insides of old NES games for fun, someone involved in their community with a blog or open source software, or yet another person which only has a bunch of buzzwords to offer? If you try to be close to the trend in the hope you’ll stay relevant for the hiring market, it’ll only make you identical to everything else, and it will lead you to burnout. Good teams include a mix of people with different ideas and interests, and not just an army of clones.

I’m leaning more and more toward the idea that you should embrace your weirdness, run with it and have some fun. I’m prone to being too serious at times myself, but learning a bit more about making game or electronics is not a life-long commitment. It’s merely a good excuse to go out of your comfort zone and learn a new and interesting skill. Besides, you never know what could come out of it…

Figuring out how the CSS of a website works using Firebug – Screencast

The basis of using Cascading Style Sheets (CSS) to apply formatting to an HTML document is deceptively easy to understand, but hard to master. You define selectors that designate HTML elements, which contains formatting rules that apply to those elements and their children. If more than one rule applies to an element, they are applied using a priority order, from the more general to the more specific: that’s where the “cascading” part comes in.

It’s almost impossible to predict how a website will look by looking at the code. If you have to modify the CSS of an application you don’t know “just” to change a color or a font size using only your text editor, you’re out of luck. Figuring out the priority of each selector is complicated if you have many stylesheets that applies to a page, and you can easily miss a more general selector. You can’t just look at an element on the page and immediately deduce which CSS rules are affecting it, especially if there are many contradictory rules.

That’s where tools such as Firebug for Firefox or the Developer Tools in Chrome comes in. Among many other great features, they allow you to see which rules are affecting a particular element on the page, and to modify them on the fly.

Of course, it won’t modify your original CSS since it only changes the local copy in your browser, but you can quickly test what’s the impact on your page and then make the modifications. You can also use those tools to explore your favorite websites and see how they used CSS to format elements: it can be a great learning tool if you’re looking to grow your CSS knowledge.

Here is a screencast on how to use Firebug to figure out where the colors are defined on the Twitter website: