24 Channel Smart Switch

In this project, I'll show you how to make a 24 channel smart switch.

You will find three slightly different versions of this device in this instructable. Two of them will give you the same result in the end. The only difference between them is that the device built with ULN2003 ICs turns a relay on whenever there's a logical 1 on the input. And the device built with relay modules turns a relay on whenever there's a logical 0 in the input. A third device requires no Wi-Fi to function.
List of components for the device with pre-built relay modules (easy-to-build)

1) ESP8266 x1
2) 8-bit shift register (SN74ALS164A) x1
3) 8-bit registers (SN74HC373N) x3
4) Relay modules x6
5) 0.1 µF capacitors x4
6) 10 µF capacitors x4
7) 470 µF capacitor x1
8) 5V power supply x1
9) A lot of wires

List of components for the device with ULN2003 ICs (This one is a bit harder to build)

1) ESP8266 x1
2) 8-bit shift register (SN74ALS164A) x1
3) 8-bit registers (SN74HC373N) x3
4) LEDs x24
5) 470-ohm resistors x24
6) ULN2003 x4
7) Relays x24
8) 0.1 µF capacitors x4
9) 10 µF capacitors x4
10) 470 µF capacitor x1
11) 5V power supply x1
12) Power supply for relays (usually 9 or 12 volts) x1
13) A lot of wires

List of components for the manual mode *optional
1) 74148 x1
2) 1k resistors x2
3) Buttons x3

In steps 3-8, I will be explaining to you how I was developing this device. The complete schematic diagram will be in step 10.

After I've spent a couple of hours on repl.it, I came up with this web interface. To avoid making the interface "infinitely long" and save your scroller. I've decided to separate the ribbon into three parts. If there's enough space on a screen, ribbons will evenly distribute across the entire screen area.
The firmware with this interface is called _24_channel_smart_switch_vanilla_web_int.

Just in case you'd prefer something else, I've added another interface with a different color scheme. The firmware with this interface is called _24_channel_smart_switch_blueberry_web_int.

I wanted to use 74148 for this, but since I don't have it. I've used its Russian analog - K155IV1.

It will work as follows:
1) If no button pressed, there's a high level on both outputs;
2) If the button attached to the I6 is pressed, there's a high level on A1 and a low level on A0;
3) If the button attached to the I7 is pressed, there's a low level on A1 and a high level on A0;
4) If the button attached to the I8 is pressed, there's a low level on both A0 and A1.

Since ESP8266 only has nine digital ports. And four of them are already used by the buttons and display. There are only five ports left. To expand those five ports to twenty-four outputs. It will be rational to use one 8-bit shift register and three 8-bit registers.

The whole thing is made of D-type bistables. That means that if you don't have some components, you can make them yourself. An 8-bit shift register can be built from eight flip-flops. An 8-bit register can be built either from eight latches or from eight flip-flops.

There's an array that has all possible combinations. To output a combination, the number of an array's element should be passed to the "shiftOut" function. After the function has done its job it's time to send "1" to the latch of the first register and write whatever was on the outputs of the shift register into the first register. Then send "0" to the latch of the first register, send another value to the function "shiftOut" and write the value that was given to the shift register by the "shiftOut" function into the second register by sending "1" to its latch (latchPin1), etc.

When the button is pressed, a certain value is assigned to the variable (0,1,2,4,8,16, etc). Later on, the sum of the values of eight variables is matched with a corresponding element in the array. This element is feed to the "shiftOut" function.

You can find the code here https://github.com/Northstrix/24_Channel_Smart_Swi...

Don't forget to modify these two strings to match your network credentials.

const char* ssid = "Mobile Hotspot 1290"; // Your SSID (Network's name)

const char* password = "seasidehills24ch"; // Password from your network

Don't forget to put a 0.1µF and 10µF capacitors in parallel to every digital IC and a 470µF capacitor in parallel to 5V power supply.

Put together the components of the device from the first three pictures. ESP8266, 8-bit shift register, three 8-bit registers, 24 LEDs to be exact.

Connect:
display's GND to ESP's GND
display's VCC to ESP's 3V
display's SCL to ESP's D1
display's SDA to ESP's D2

WARNING!

High voltage is dangerous. Improper wiring on that step may lead to an injury, including potentially fatal injuries or even death. If you're not sure that you can wire the relays correctly, don't supply a high voltage to the circuit.

If It's taking so long, try to reboot ESP. If the device still can't connect to your network, check if the credentials are correct.

Just do it.

Right after you've entered the IP address from the display in a browser, you'll see an inscription "Wi-Fi mode activated" on display. You will also see one of those web pages in your browser.

In case you don't have Wi-Fi, you can still use this device. To do this, build this extension. You now will be able to use this device without Wi-Fi.

This process is so straightforward that it doesn't need an explanation. Just look at the picture above, and you will probably be able to understand it.
The firmware is called _24_channel_smart_switch_0_is_a_high_level_blueberry_web_int

Thank you for reading this instructable! I hope it was useful for you.
By the way, don't forget to press "I made it!"

P.S. You might've noticed that there are only 16 LEDs instead of promised 24. The reason behind it is quite simple: I don't have enough components to build the whole circuit. I even had to make two registers from latches.