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 Mac or Mac'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.
   
   Use Safari for ALL downloads in this guide. Download the Arduino Code file for this project by clicking the link below and accepting the download if prompted. This download should appear in your Downloads folder which can be accessed by opening the Finder application. If your Mac configuration places downloaded in a different location, you will need to note that location for use 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 open it in the Arduino IDE. If you used the Safari browser to download the file in Step 2 above, the code file should already be unzipped in your Downloads folder. 
   
   To open the code file, open the Arduino IDE from Launchpad (or wherever you have stored the Arduino application) and press "Command+O" on your keyboard to pull up the open file dialog box, this can also be accessed by clicking "File" -> "Open..." at the top of your screen. Then navigate to the download location for the Tech-BoxIO_WiFi_LED_Matrix.ino file, click on the Arduino file, and click "Open", as shown in the image below. If the Arduino IDE requests access to the folder where the file is stored, allow it. If you have any issues or questions, feel free to contact Tech-Box Support by email at Support@Tech-Box.io
   
   
   
   
   
   
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 "Arduino" -> "Preferences" at the top of your screen in 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 red 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 "Arduino" -> "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 red 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 green rectangle below. Finally, click "Install" for the "ESP8266 by ESP8266 Community" option to complete the installation of this board type, as highlighted by the red rectangle 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 red rectangle in the image below, or the WiFi LED Matrix may not function correctly. 
   
   
   
   
   
   Sub-step 6E) Download the "esptool.zip" and "pyserial.zip" files by clicking the links below, again using the Safari browser. These downloads should appear in your Downloads folder (or the normal location you use for downloads if your Mac is not in its default configuration). After downloading the files, launch the Finder application from your Dock and navigate to the Downloads folder to view these files, as shown in the image below.
   
   
   esptool.zip
   
   pyserial.zip
   
   
   
   
   Sub-step 6F) Open a new Finder tab by pressing "Command+T" with the Finder application selected. Your Finder window should now look similar to the image shown below.
   
   
   
   
   
   
   Sub-step 6G) With the new tab selected (the Documents folder is shown in the new tab in the image above), press "Command+Shift+G" on your keyboard to bring up the "Go to Folder..." function. Then, copy this highlighted path - ~/Library/Arduino15/packages/esp8266/hardware/esp8266/2.7.4/tools/ - and paste it into the search bar, as shown in the image below. Then hit "Return" on your keyboard to finish opening the target folder (clicking should not be necessary).
   
   
   
   
   
   
   Sub-step 6H) Return to the Downloads tab that is open in Finder (or where your downloads are located). Then highlight BOTH the "esptool" and "pyserial" folders by holding Command and clicking on both folders. Then, click-and-drag them onto the "tools" folder tab that you just opened in the last step, as shown in the image below. If a message displays stating that, "An item named “pyserial” (or "esptool") already exists in this location. Do you want to replace it with the one you’re moving?", select "Replace" to complete the move operation for BOTH folders.
   
   
   
   
   
   
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. Connect the ESP8266 NodeMCU (Part B) to your Mac using the Micro-USB cable (Part F) if it is not already connected. Then select Tools -> Ports and you should see that a COM port has appeared, as highlighted in blue in the image below. The COM ports are labeled by number and the values will vary by Mac, but appear at the end of the "/dev/cu.usbserial-####" port name. Our ESP8266 NodeMCU (Part B) appeared as "/dev/cu.usbserial-0001", but your board may appear as any "-#" value. To download to the ESP8266 NodeMCU (Part B), click and select the new COM port that appeared in this menu. (Note: The COM port "-#" 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

    

   
   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 red square 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 yellow 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 Mac 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

    
    To display the code on your Mac, open the TextEdit application from Launchpad and select File -> Open to bring up the open file dialog window. Then navigate to and select the downloaded HTML file (typically in your Downloads folder). Before clicking "Open", select the "Options" button and check the box next to "Ignore rich text commands", then click "Open" to display the HTML code. 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