Now that the electrical components are installed and the wiring is complete, follow the steps below to complete the programming of your kit's ESP8266 NodeMCU (Part B) microcontroller and learn how to interact with the webpage that controls it:

1. Begin by connecting the Micro USB Cable (Part F) to the ESP8266 NodeMCU (Part B) and then plug it into your PC or PC's USB hub (Note: Not all USB hubs work correctly with the Arduino IDE, so if you have issues while using a USB hub, connect the cable directly to your PC, if possible).
   
   (Note: Parts other than the ESP8266 NodeMCU (Part B) and Micro USB Cable (Part F) have been removed from the image below for clarity)
   
   When you upload code to the ESP8266 NodeMCU (Part B), the existing program on the board will be erased and overwritten. The ESP8266 NodeMCU (Part B) can be programmed an unlimited number of times, and each upload will overwrite the prior program, so you can always customize or alter the code in the future to fit or change your style.
   
   
   
   
   
   
2. If you have not already downloaded and installed the Arduino IDE version 1.8.X previously for another Arduino related project, you can follow this guide (linked here) for the step-by-step installation process. Once it is installed, you can continue with this step.
   
   Download the Arduino Code file for this project by clicking the link below and accepting the download if prompted. This download will appear where your downloads are typically stored. Your location may be slightly different depending on your PC setup. For example, the downloads folder on our Windows 10 PC was accessed by opening “File Explorer” and clicking on “Downloads” in the options on the left side of the window or by going to the following path “C:\Users\YourUsername\Downloads”. However, your location may be slightly different depending on your PC setup. Be sure to note the folder location, as you will use it in the following steps. (Note: If at any point, you accidentally delete or edit the code in the file and receive error notifications from the Arduino IDE, you can re-download a fresh copy of the file by clicking the link below again.)
   
   

   Tech-BoxIO_WiFi_LED_Matrix.ino

   
   
   
3. Once the file is downloaded, you will need to unzip it and open it in the Arduino IDE. If you open the code file without unzipping the folder first, you may encounter errors in the following steps. To do this on a Windows 10 PC, you will need to locate the zipped folder downloaded under Step 2 and “Right Click” it. A menu of options will appear, and you will need to select “Extract All…” as shown below. (Note: Your options for extraction may vary based on 3rd party programs that are installed to your PC. If you have any issues or questions, feel free to contact Tech-Box Support by email at Support@Tech-Box.io)
   
   
   
   
   
   This will display another window where you can choose a destination for the file to be saved at by clicking “Browse…”, or you can leave it as the default, as shown in the image below. For our PC, the default location saved the extracted file to the “Downloads” folder that the zipped folder was previously saved in. Once you have set the destination, click “Extract” to complete the unzipping process.
   
   
   
   
   
   Once the folder has been unzipped, you can access the Tech-BoxIO_WiFi_LED_Matrix.ino file that is inside of it. To open the code file, you will need to open the Arduino IDE and press “Ctrl+O” on your keyboard to pull up the open file dialog box, this can also be accessed by clicking “File” -> “Open…”. Then navigate to where you previously unzipped the file above, click on the file, and click “Open”, as shown below.
   
   
   
   
   
   
4. In the following steps, you will have to make some edits to the code file to get the ESP8266 NodeMCU (Part B) connected to your WiFi network. Before doing so, you will need to make sure that the "Display line numbers" option in your Arduino IDE is toggled "ON" to make navigating the code a little easier. To turn this option on, select "File" -> "Preferences" on your Arduino IDE to display the preferences window, as shown in the image below. Then, click the box next to "Display line numbers", as highlighted by the blue rectangle below, to toggle that function on. Finally, click “OK” to confirm the change and close the preferences window. Now, each line of code should have its own line number displayed on the left side of the Arduino IDE, beginning with line "1" at the very top of the code file.
   
   
   
   
   
   
5. For the ESP8266 NodeMCU (Part B) to connect to your WiFi network, you will need to input your WiFi network name and password to the code file. With the WiFi LED Matrix Arduino file open, use the line numbers that you displayed during Step 4 to scroll to line 119 and line 120 of the code. On those lines, you should see the following:
   
   

   

   
   

   To successfully edit these lines, first uncomment each line by removing the “//” prior to the word "const". Uncommenting the lines will allow the compiler to include those lines in the machine code that the ESP8266 NodeMCU (Part B) will process. Second, input your WiFi network name between the quotation marks (“”) near the end of line 119. Then input your WiFi network password between the quotation marks (“”) near the end of line 120. (Note: This kit will NOT connect to 5GHz WiFi networks, so if your network has multiple operating frequencies, choose the ~2GHz option. For example, if your network names are "MyHomeWiFi-5G" and "MyHomeWiFi-2G, be sure to choose the "2G" option when filling in the SSID on Line 119, below). As an example, if your WiFi network name is MyHomeWiFi and your password is Pass1234, Lines 119 and 120 of the code should now appear like the lines below:

   
   

   

   
   

   Your network information should now be correctly added to the code. If you have any issues with the device connecting to the network in the following steps, be sure to check and confirm that your network ID (SSID) and network password are entered correctly. (Note: In the following steps you will learn how to access the webpage that the ESP8266 NodeMCU (Part B) hosts. The device you wish to open the WiFi LED Matrix Webpage with MUST be connected to the same WiFi network as the WiFi LED Matrix to be accessible. For example, if you are using an iPhone to access the WiFi LED Matrix Webpage and your WiFi Network name is "MyHomeWiFi", the iPhone will also need to be connected to the "MyHomeWiFi" network to access the hosted webpage.) If you have any issues or questions, feel free to contact Tech-Box Support by email at Support@Tech-Box.io
   

   
   
   
6. The Arduino Software (IDE) is preinstalled with several common microcontroller board types such as the Arduino Uno and Arduino Mega. However, the list of preinstalled boards does not cover all of the microcontroller variants that are available. Some microcontroller variants, such as the ESP8266 NodeMCU (Part B), have additional functionality beyond standard Arduino models. Specifically, the ESP8266 NodeMCU (Part B) used in this kit features WiFi connectivity and the ability to host its own webpage/webserver which a user can interact with. To use these microcontroller variants, the correct board type must be added to the Arduino Software IDE installation. Follow the instructions below for a step-by-step guide on how to install this board type to your Arduino IDE.
   
   Sub-step 6A) With the Tech-BoxIO_WiFi_LED_Matrix.ino file open in your Arduino IDE (the file was opened in Step 3 above), select "File" -> "Preferences" to open the preferences window. Then, paste this highlighted link - https://arduino.esp8266.com/stable/package_esp8266com_index.json - under the Additional Boards Manager URLs field, as highlighted by the blue rectangle below. Once pasted, click "OK" to confirm the changes, as shown in the image below.
   
   
   
   
   
   Sub-step 6B) Open the Arduino "Boards Manager" by selecting "Tools" -> "Board" -> "Boards Manager..." as shown in the image below.
   
   
   
   
   
   Sub-step 6C) With the Arduino "Boards Manager" open, search for "ESP8266" in the search bar to find the ESP8266 NodeMCU board, as shown in the image below. Then, click the drop down menu and select the "2.7.4" board version, as highlighted by the white and blue arrow below. Finally, click "Install" for the "ESP8266 by ESP8266 Community" option to complete the installation of this board type, as highlighted by the smaller red arrow below. The installation of the board package should complete within a few seconds, depending on your internet connection.
   
   
   
   
   
   Sub-step 6D) Once the board package has completed installing, the "Boards Manager" will display a message next to the package author showing which version has been installed. Ensure that this message is showing "version 2.7.4 INSTALLED", as highlighted by the arrow in the image below, or the WiFi LED Matrix may not function correctly. Once the board type is successfully installed, you can close the window and proceed with Step 7.
   
   
   
   
   
   
7. Once the board type is installed and the project file is opened in the Arduino IDE, select the correct board settings in your Arduino IDE to complete the upload. To do this, in your Arduino IDE, select Tools -> Board -> ESP8266 Boards -> Generic ESP8266 Module as shown in the image below.
   
   Once this selection is made, click the “Checkmark” in the upper left-hand corner of the Arduino IDE, as highlighted by the red square in the image below, to verify and compile the code. This selection allows the compiler to prepare the code to be uploaded to the correct microcontroller. After a short time, your compile will complete successfully.
   
   The Arduino code file for this project has been completely commented with each variable, line, and code block's function explained. Feel free to read through the code to learn what each section is doing and check your understanding!
   
   
   
   
   
   

   Troubleshooting for step 7:

   If there are errors when attempting to compile the code in the Arduino IDE, complete the following troubleshooting steps:
   
   1) If the error persists, restart your computer, then open the Arduino IDE and project code and attempt to compile again.
   
   2) If the compile still fails, please open a support ticket with Tech-Box.io Customer Support by sending an email to Support@Tech-Box.io and include the name of your kit and describe or provide the error code you are encountering in the Arduino IDE (The error information will be in the area that appears orange and black at the bottom of your Arduino IDE). Customer support will get back with you as quickly as possible!
   
   
   

   End Troubleshooting For Step 7

   
   
   
8. In order for your PC to communicate with the ESP8266 Node MCU (Part B), it is necessary to install the CP2102 Serial driver. The ESP8266 Node MCU (Part B) uses a small computing chip, the “CP2102”, to translate USB data and serial UART messages between your PC and the microcontroller that is located on the ESP8266 Node MCU (Part B). Follow the instructions below for a step-by-step guide on how to install the CP2102 Serial driver to your Windows PC.
   
   Sub-step 8A) This driver software has been tested and confirmed to work with Windows 10 and Windows 7 PCs. Begin by downloading the Windows ZIP file by clicking the link below. (Note: To successfully install the driver software, you may need to obtain administrative privileges from your IT administrator if your computer is controlled on a domain, such as in a workplace or school system).
   
   
   CP210X_Universal_Windows_Driver.zip -- CP2102 Driver ZIP File
   
   Sub-step 8B) Locate the CP210x_Universal_Windows_Driver.ZIP file that you just downloaded. Typically, the default download location is the "Download" folder which is the same location previous downloads in this guide should have been found. Once you locate the ZIP file, right-click the folder and extract/unzip it using the same procedure as you did in Step 3, above. (Note: Your options for extraction may vary based on 3rd party programs that are installed to your PC. If you have any issues or questions, feel free to contact Tech-Box Support by email at Support@Tech-Box.io)
   
   Sub-step 8C) Once the downloaded folder has been unzipped, you can access the program contents within the folder. Open the newly unzipped folder, and you should see folders and files similar to the ones shown in the image below. Double-click on the CP210xVCPInstaller_x64 application to run the installer, as highlighted in the image below. (Note: The "_x86" variant is for 32-bit systems which are very uncommon in modern computers, you will want to use the "_x64" variant unless you are certain that your PC is running a 32-bit operating system). When prompted by the operating system with, "Do you want to allow this app to make changes to your device?", select "Yes" to provide administrator approval and continue with the installation.
   
   
   
   
   
   Sub-step 8D) The Device Driver Installation Wizard should now be running, as shown in the image below. To begin the driver installation process, click the "Next" button on the installation wizard. This will install the tested CP210X driver. After clicking "Next", proceed to the following Sub-step, below.
   
   
   
   
   
   Sub-step 8E) Once the installation is complete, the Device Driver Installation Wizard will display the "Status" as "Ready to use", as shown in the image of the wizard below. To complete the installation process and close the installation wizard, click the "Finish" button, as shown below. The CP210X Serial Driver should now be installed and ready for use.
   
   
   
   
   
   Sub-step 8F) Verify the driver installation using the Arduino IDE and ESP8266 NodeMCU (Part B) by selecting the "Tools" menu on your Arduino IDE with the ESP8266 NodeMCU (Part B) disconnected from your PC, as shown in the image below. The "Port" selection should be greyed out, as highlighted by the arrow below. Now, deselect the menu by clicking anywhere else on the Arduino IDE.
   
   
   
   
   
   Sub-step 8G) Connect the ESP8266 NodeMCU (Part B) to your PC using the Micro-USB cable (Part F). Then select Tools -> Ports and you should see that a COM "#" port has appeared, as highlighted by the arrow in the image below. The COM "#" ports are labeled by number and the values will vary by PC, but typically range from COM3 to COM9. Our ESP8266 NodeMCU (Part B) appeared as COM9, but your board may appear as any COM "#" value. To download to the ESP8266 NodeMCU (Part B), click and select the new COM "#" port that appeared in this menu. (Note: The COM "#" should not change when unplugging and reconnecting the board.) If you are unsure which COM# port your ESP8266 NodeMCU (Part B) is connected to and multiple COM# ports are appearing, you can unplug your ESP8266 NodeMCU (Part B) and then check the menu again to see which COM port is no longer present. Then, reconnect your ESP8266 NodeMCU (Part B) and select the correct port once it reappears. Once the new COM "#" port is selected, proceed with Step 9 below.
   
   
   
   
   
   

   Troubleshooting for step 8:

   COM Port Does Not Appear in Port Menu
   
   If no COM port appears under the “Port:” option with the ESP8266 NodeMCU (Part B) connected, there may be a component or wire placed incorrectly. In this event, first attempt to connect to different USB ports on your computer and check if a COM port appears under the "Port:" menu. If no ports appear, then remove the ESP8266 NodeMCU (Part B) from the Breadboard (Part D) and attempt to select a COM port again. If the issue persists, disconnect and then reconnect the ESP8266 NodeMCU (Part B) from/to the Micro-USB cable (Part F) to power cycle the ESP8266 NodeMCU (Part B) and attempt the COM port selection again. If the COM port selection now works, check all of your wiring and component placements to make sure that they are in the correct locations. If you have any issues with the selection, please contact Support@Tech-Box.io
   
   COM Port is Not Available
   
   

   If you installed the drivers for the CP2102 Chip and are having issues connecting via the serial terminal or with uploading code using the Arduino IDE, there may be an issue with your user settings or permissions that is preventing your PC from accessing the CP2102.

   Check to make sure that your configuration settings are correct and that the drivers are installed with administrator privileges. If the issue persists, we recommend uninstalling and reinstalling the drivers for your operating system. If you have any issues with the installation, please contact Support@tech-box.io

   
   USB Cable
   
   Some third-party USB cables are meant for power only and may not have data wires included. These cables will not allow for your microcontroller to communicate with your computer. Therefore, we recommend using ONLY the provided USB cables from our guided kits as all Tech-Box.io USB cables are configured with integrated data lines. If you have any issues with the installation, please contact Support@Tech-Box.io
   
   
   

   End Troubleshooting For Step 8

   
   
   
9. Finally, with the proper board type and COM port selected, click the “Arrow” in the upper left-hand corner of the Arduino IDE to upload the code to your ESP8266 Node MCU (Part B), as highlighted by the arrow in the image below. The Arduino IDE will notify you when the file is “Done Uploading” in the lower left-hand area of the Arduino IDE, as highlighted by the red rectangle below. This ESP8266 Node MCU (Part B) microcontroller can be rewritten/re-uploaded to an unlimited number of times, if desired. Feel free to create your own custom images or patterns and re-upload to the ESP8266 Node MCU (Part B) microcontroller as needed! Once the file is "Done Uploading", proceed to Step 10 to learn how to access and interact with the WiFi LED Matrix.
   
   
   
   
   
   

   Troubleshooting for step 9:

   If there are any errors when uploading the code to the ESP8266 NodeMCU (Part B), complete the following troubleshooting steps:
   
   1) Check the wiring and component placements; including the placement of the ESP8266 Node MCU (Part B) itself. If wires or components are in the wrong locations, it may block the code from being uploaded or prevent the ESP8266 Node MCU (Part B) from appearing in the COM port options. Once you have checked everything, attempt the upload again.
   
   2) If the error persists, remove the Micro-USB cable (Part F) from the ESP8266 Node MCU (Part B) and then remove the ESP8266 Node MCU (Part B) from the breadboard (Part D). Then reconnect the Micro-USB cable (Part F) to the ESP8266 Node MCU (Part B) and attempt to upload the code while it is disconnected from the breadboard (Part D). If the upload is successful now, this may mean that some part of the wiring is incorrect. So check the wiring and component placement again, then reinsert the ESP8266 Node MCU (Part B) into the breadboard at the correct pin location shown in the wiring section of this guide.
   
   3) If your program still fails to upload, please open a support ticket with Tech-Box.io Customer Support by sending an email to Support@Tech-Box.io and include the name of your kit and specific issue in the email. Customer Support will get back with you as quickly as possible!
   
   
   

   End Troubleshooting For Step 9

   
   
   
10. ACCESSING THE WIFI LED MATRIX WEBPAGE:
    
    Note: For the webpage to function correctly, the network the WiFi LED Matrix is connected to MUST have internet access. With the ESP8266 Node MCU (Part B) programmed, connected to your PC and all wiring connections made, you should see that the LED Matrix (Part C) displays the welcome message “Tech-Box.io - Visit http://” followed by the IP address which you will use to access the WiFi LED Matrix webpage for customizing the display. (Tip: Laying the black LED Matrix Lens (Part A-8) over the LED Matrix (Part C) will make the text much easier to read).
    
    Once the WiFi LED Matrix is connected to the WiFi network specified in the code, it will startup in demonstration mode and display the welcome message described above, then cycle through each of the built-in functions.
    
    To access the WiFi LED Matrix webpage, open an internet browser on a device connected to the SAME WiFi network as the WiFi LED Matrix. Then, enter the link below, with the "#"s altered to match the IP Address displayed in the initial welcome message on the WiFi LED Matrix:
    
    
    http://#.#.#.#
    
    
    For Example: If the WiFi LED Matrix displays "192.168.1.10" in its welcome message, you would enter this link: http://192.168.1.10 on your internet browser to connect to the WiFi LED Matrix webpage, as shown in the image below. Proceed to Step 11 to learn the format and functionality of this webpage.
    
    
    
    
    
    
    

    Troubleshooting for step 10:

    If the ESP8266 Node MCU (Part B) failed to connect to your WiFi network, a message will display on the LED Matrix (Part C) showing, "Tech-Box.io - WiFi Connection Failed - Check WiFi SSID and Password". If this occurs, please check the SSID and Password you entered under Step 5, above, and ensure they are correct.
    
    If no illumination is present from the LED Matrix (Part C), double check your wiring to ensure all components and wires are placed correctly, and then attempt to program the ESP8266 Node MCU (Part B) again. If your issue persists, please reach out to Support@tech-box.io and our support team will be happy to assist you!
    
    
    

    End Troubleshooting for step 10

    
    
    
11. USING THE WEBPAGE:
    
    After opening the webpage, you can select the desired mode from any of the built-in options, as shown in the image below. After selecting the desired mode on the webpage (and inputting any required messages or values in the displayed fields on the webpage), click "Update" at the bottom of the webpage to update the WiFi LED Matrix display. The new selection will display within a few seconds! (Note: The mode can be changed an unlimited number of times. You only need to make a new selection and press "Update" each time you wish to make a change)
    
    
    
    
    
    All of the available built-in functions included with the WiFi LED Matrix are described below (Note: You must click "Update" near the bottom of the webpage for any of the mode selections to become active):
    
    1) Demo Mode - Rotates through each of the included modes on a timed cycle. This is the default mode that the WiFi LED Matrix starts in.
    
    2) Custom Message - Displays the custom message entered by the user (the message entry box appears after highlighting the "Custom Message" mode, but before pressing "Update"). The message can be any text and/or numerical phrase, such as "Hello World", but cannot exceed 50 characters in length. (Note: User Input Required)
    
    3) Twinkle - Slowly twinkles the LED Matrix with fading white lights like on a starry night
    
    4) Snake - Creates a snake that moves quickly around the LED Matrix (Part C) display, like in the game "Snake"
    
    5) Sprites - Rotates through the listed images (which appear after selecting the "Sprites" mode, but before pressing "Update"). The user must enter the specific number of the image they want to remain displayed, or enter "0" to rotate through all of the included images. Some example images include: "1" - Heart, "12" - Creeper, and "18" - Pikachu (Note: User Input Required)
    
    6) Fire! - Displays a warm and cozy campfire with trailing embers
    
    7) Stripes - Displays stripes of various lengths and colors in alternating patterns
    
    8) Juggle - "Juggles" a set number of LEDs from side to side on the display with varying colors
    
    9) Confetti - Displays randomly colored LEDs like "Confetti" thrown into the air
    
    10) Scanning - One LED moves across and up the display, leaving a fading trail behind it
    
    11) Beats per Minute (BPM) - A pattern that oscillates to the pre-programmed beats-per-minute
    
    12) BPM with Glitter - The BPM pattern with additional randomly displayed glitter (bright white LEDs that fade slowly)
    
    13) Theater Chasing - Every third LED chases the one in front of it, like classic theater lights
    
    14) Rainbow - A rotating rainbow that moves slowly across the display
    
    15) Color Wipe - Slowly wipes a single color across the display, replacing the previous color
    
    16) Constant Color - Displays a singular color on the entire display based on the user input from the "R" (red), "G" (green), and "B" (blue) fields which appear after selecting the "Constant Color" mode, but prior to clicking "Update". As examples, a value of R=255, G=0, B=0 would display a bright red color, while values of R=255, G=255, B=255 would display a bright white color. (Note: User Input Required)
    
    17) Off - Turns the display off
    
    (Note: Power cycling the WiFi LED Matrix will reset it to its default "Demo" mode)
    
    
12. (OPTIONAL) UNDERSTANDING THE WEBPAGE:
    
    A commented version of the webpage hosted by the ESP8266 NodeMCU (Part B) is available for download by clicking the link below. Once downloaded, you can read through the webpage code and explore its functionality! The webpage displays all of the different modes that can be selected for the WiFi LED Matrix and shows the mode inputs which are customizable, like: custom messages, selectable images (sprites), and custom colors. (Note: This example webpage will not control the WiFi LED Matrix -- only the webpage hosted on your microcontroller and accessed by the process and IP Address described under Steps 10 and 11, will control it)
    
    

    Tech-BoxIO_WiFi_LED_Matrix_Webpage.html

    
    A great resource to open and read through the HTML webpage is your internet browser (Tech-Box.io recommends Google Chrome or Mozilla Firefox). To display the code, open the downloaded HTML file with your internet browser and press the F12 button on your Windows PC. With the code displayed, as you hover over certain lines of code with your cursor the elements associated with each line will be highlighted on the webpage. You can explore as desired and proceed to the next section when ready - this step is not required to proceed.
    
    

Congratulations! You have successfully programmed and tested your WiFi LED Matrix and are ready to start assembling the WiFi LED Matrix housing! Continue to the next page and follow the steps in that section to complete the Tech-Box.io WiFi LED Matrix.

Struggle Less. Build More.

Tech-Box.io