This prototype LED device has been created using a compact and cost-effective project, aimed at providing an introduction to the fundamental principles of ESP. Each LED can be independently controlled through WiFi, allowing for remote operation. While the assembly process is straightforward, uploading the code requires a slightly more advanced approach compared to traditional Arduino coding.

With this device, you gain the flexibility to choose any color for your LED and design a personalized LED box that perfectly matches your aesthetic preferences.

Supplies

Prototype :

Wemos lolin d1 mini
3 High Powered LEDs
3 Transistor TIP120
3 Resistors (depend on LED)
Jumper wires
Small Breadboard 4*5cm
Soldering Iron

Box:

Download the .ino file for Arduino here :

https://drive.google.com/file/d/1FIj--x-Z2dekAEFgIrOEqHsVc2UK3cvM/view?usp=drive_link

Step 1: Schematics

Prior to advancing with the prototype, it is highly recommended to begin with a breadboard. This will enable you to test and explore various components, ensuring a well-refined design.

The selection of the suitable resistor for the LED is important. It depends on factors such as the LED's color and wattage. Generally, for brighter LEDs, it is advisable to opt for larger resistors to prevent any overheating concerns. It should be between 20 to 100.

By employing a trial and error approach, you can determine the optimal resistor value that strikes the right balance between the LED's brightness and potential overheating problems. This will help guarantee optimal performance and longevity of the LED.

Step 2: Prototype

To construct your LED circuit, it is advisable to solder wires to both the positive and negative rails of the LED. However, before connecting the positive rails, be sure to solder the chosen resistor securely in place.

When arranging the circuit on the breadboard, aim for a compact layout. You can refer to the accompanying picture as an example. It is crucial to ensure that all LEDs are oriented in the same direction, as they will be positioned similarly inside the box.

Step 3: Arduino Setup

Start your Arduino, if you have never worked with Wemos or Esp 8266 you'll need to install the board to the IDE.

Go to "File" in the menu bar and select "Preferences." A new window will appear. In the "Additional Boards Manager URLs" field, paste the following URL:

http://arduino.esp8266.com/stable/package_esp8266com_index.json

Next, navigate to "Tools" in the menu bar and select "Board" and then click on "Boards Manager". A new window will open. In the Boards Manager window, type "ESP8266" in the search bar. You should see the "esp8266 by ESP8266 Community" option. Click on it and then click the "Install" button.

To select the Wemos D1 mini board for your projects, go to "Tools" in the menu bar, then select "Board" and choose the "Wemos D1 mini (clone)" from the ESP8266 list.

You'll also need to install these two libraries if you don't have them:

WiFiManager
ESP8266WiFi

Go to Sketch -> Include library -> Manage libraries then search for them and install them.

You're ready to upload the code!

Step 4: Code

The Arduino code can be uploaded right away, there is no need for confiuration at this step because we use WifiManager that will handle the Wifi Configuration.

Once uploaded use a phone/ tablet/ computer and open the Wifi List and you should see a Wifi name ConnectedLamp without password.

Connect to it, it should open you the configuration page. (If not, open directly http://192.168.4.1 in a web browser).

Click on "Configure Wifi".

Setup your Wifi Credentials and save them.

In Arduino open the Serial Monitor and see if the connection has been successful you'll be given an localIP address of your house Wifi.

Then, connect to your house wifi and open a web browser and enter the following URL in the address bar: "http://ipaddress/".

Step 5: Testing

Click on the buttons provided on the web page to control the state of your LEDs. Each button corresponds to a specific LED and allows you to turn it on or off with a simple click.

To customize the appearance of the webpage, you have the flexibility to modify the HTML and CSS code. Open the file and navigate from lines 133. These lines contain the code responsible for defining the visual elements and styling of the webpage.

For exemple: background-color: #77878A can be changed with any hexadecimal color code. (eg: #FF0000 is red , #000000 is black...)

Step 6: Making the Box

To create the pattern, you have two options available. The first option involves drawing the pattern on a piece of cardboard and manually cutting it out according to your design.

Alternatively, if you have access to a 3D printer, you can take advantage of the provided STL files. These files are compatible with any 3D printer and enable you to print the pattern in three dimensions, resulting in a more intricate and precise design.

STLs Files - Body and Top
Pattern

Once you have successfully completed your prototype, gently slide it into the designated box. Congratulations, you are now in the final stages! If you are utilizing a power bank, you can now enjoy the freedom of taking your LED device wherever you have WiFi access. It is important to keep in mind that others who are connected to the same WiFi network will also have the ability to access the webpage and control the LEDs.