Author: ezradharris

Neopixel Frustrations to Custom RGBW LED Modules
After having issues with the Neopixel LED modules on the two newer drones (a blog post about that headache is coming soon…), I decided to try a different design by Techventures Sean for an LED module based on the use case of Skybrush drones.

Heads up, this post is part of a more extensive series about building drones for a small drone show. This post is part six of the series, and previously, I covered 3D designing mounts for the LED modules from Adafruit.

I mentioned two separate LED module designs in the first paragraph. But what are these two options?

The option we have currently implemented is the 4W LEDs from Adafruit. These are cheap and offer a plug-and-play way to light up the sky. They also work under the NeoPixel branding, so documentation is extensive. I covered that setup in this post:

NeoPixel With ArduCopter

The second option is what I’ll be covering in this post. Sean, the creator of this design, recommended it to me on the Skybrush Discord when I expressed frustration with some problems with the Neopixel LEDs.

“That module is the equivalent to 8-10 of those Adafruit modules.”

-Sean (Mwd-Sean)

The design for the light module comprises four main controlling components, BGRW (as shown in the animation below. Each part is individually controlled via 4 PWM signals from the flight controller addressing each light color:

Sean’s RGBW LED Module https://oshwlab.com/sean1/skybrush-rgbw-led

After reviewing most diagrams and parts and looking at what tools I need for assembly, I ordered all the necessary parts from JLCPCB (which manufactures PCBs), LCSC Parts (which manufactures the elements, like resistors and capacitors), and the LED chips themselves from Amazon. Shipping took about a week to arrive.

img: Sean (TechVentures)

I began attempting to solder the first parts onto the PCB when it became more apparent how unprepared I was. One obstacle was the solder itself. I installed my TS101 soldering iron with a small tip, but the solder wasn’t flowing well, and flux made a mess of it.

I ordered a similar but thinner version of the solder I’d been using called Solder Paste. Solder paste comprises primarily micro solder beads, which, mixed with a flux-like liquid, lowers the melting temperature to about 180c instead of the 250c I had been accustomed to. ¹

img: Solder paste on PCB, with a closeup taken under the microscope.

With the soldering down and the assistance of a microscope, I could nail down the assembly: placing the components and eventually soldering them into place. Although the first attempt did come with its problems, more minor mistakes mostly – not being patient and forgiving when I misplaced a component. Remember how much solder paste needs to be pre-applied.

Also, realizing I made a small ordering mistake in the number of specific components I needed to place on the PCB, I am currently waiting for that order to complete the assembly.
1. Unfortunately, the PCB is designed with heat dissipation in mind. It is made almost entirely of aluminum, making it more challenging to get the solder to the required melting temperature. ↩︎
December 10, 2024
React State | Front-end Web Development
A new concept I’m starting to learn in my Coursera course on React Basics (view post series here) is React “States.” States in React is an interesting way of storing the “state” or current information about a variable or function.

ⓘ As a new topic, I’m still learning how React works. For an actual professional, please refer to a better explanation.

The first example of utilizing state is the “React.useState” hook. To use useState, you assign it to two array values that usually consist of one variable storing the value and another variable to set the value of the state. For example:
```
import { useState } from 'react';

function exampleApp() {
    const [user, setUser] = useState("ezra");
    
}
```
First, we import the state hook. Then, in the function, we assign two variables to the useState hook. Inside of the state, it has “Ezra,” which, in this case, sets the default value. If we wanted to add a function to update the state to a value, we could do so as follows:
```
    
    function updateUser(e) {
        setUser(e.target.value);
    }
```
Coursera outlines that you generally want to utilize separate functions to handle events. In this case, we have a function that, when called in combination with an input field, will grab the input’s value (e.target.value). We use the setUser that we already declared earlier.

The complete component example they taught me was:
```
import { useState } from 'react';

function ExampleApp() {
    const [user, setUser] = useState("ezra");

    function updateUser(e) {
        setUser(e.target.value);
    }
    return (
        <div>
            <h1>{user}</h1>
            <input onInput={updateUser}></input>
        </div>
    )
}
export default ExampleApp;
```
This creates a page with an H1 element and an Input field. By default, H1 says “Ezra,” but when you type into the input field, it actively changes to what you type.

It is an excellent and useful concept that will probably be used frequently in future React programming. Coursera also outlined a general guideline for creating components, specifically when and when not to use states.

As the name implies, you have Stateless and Stateful components, one without any state declarations and others with state declarations. It goes to the basics of how you want things formatted and makes it much easier to later grab the state of an object by passing it down from a parent to a child component rather than having to reinstate that state in each element.

credit: Coursera.org

States in react go a lot deeper and a lot more complex, but I’m excited to learn more about it.
September 27, 2024
Designing LED Mounts
One of the more recent tasks of my custom drone show drones is the LED light mounts. Getting started, I had only one real option material-wise, based on looking at Stan Humphries’s video covering his complete build, which is 3D printing the attachment.

The concept: An easily detachable clip-on assembly to the legs of the drone. Has mounting for up to LED modules shining in all directions. A diffuser is mounted on the bottom to enclose the whole assembly. With some inspiration from Stan Humphries’s design, I was able to get started designing in Fusion.

Full Assembly

Bottom Bowl

(Stan Humphries design)

The first task was getting the CAD files for the frame assembly. This was more diffuse than expected; a quick search on GrabCad yielded nothing useful. But with some Googling, I found that HolyBro (the frame manufacturer) had uploaded the full CAD reference files onto Wikifactory. With that, I could roughly assemble the frame parts in Fusion 360.

The first concept was testing the fit of a clip and how much pressure could be held before it could come off. And rather basic screw mounting for the Adafruit LEDs:

After printing this initial prototype, I realized two important things:
- The clip style of starting from the middle and moving outward on either side makes it challenging to mount from the bottom quickly
- The LED mounting was not bidirectional. There would be no proper light distribution.
The second design fixed both of those issues. Stan fixed the first problem by doing an opposing hook style on both ends. Mounting could be done by rotating it when aligned to the middle of the frame.

Old Version

New Version

Another feature in the new version is adding a second component: Light Base. The light base has 4 LEDs mounted in all directions at angles to disperse the light as much as possible.

Both components can be mounted together with standard M3 screws threading directly into the plastic. (Adding heat inserts only adds to the complexity, significantly scaling the number of drones)

My next version will include more quality-of-life updates, textured hooks to snap attachments more easily off, a mount for the future diffuser, and more holes in hook attachment for routing LED wiring.
September 20, 2024
Meta Front-End Developer Course | 2 Months in

I’m about two months into my Front End Web Development course, and it’s about time I update.

As of this writing, I’ve completed four out of nine of the certificate program’s courses. Since my last post, I’ve finished “Programming with Javascript,” “Version Control,” and “HTML and CSS in Depth.” I’m currently in the middle of “React Basics.”

Programming with Javascript

So far, this is one of my favorite courses in the program. This is mainly because it’s the only language I never really understood the basics of. It covers the basics from logging into the console to editing and integrating with HTML, how to use event handlers, and editing basic HTML with the console in inspect element.

One of the more significant concepts introduced was OOP or Object-Oriented Programming. OOP is a recommended programming model for developing applications, where some parts of a website are thought of as modules that can be removed, duplicated, and quickly edited for reusability.

For example, instead of writing new code every time you want to show the latest blog post, you can create a reusable template that knows how to do this. Then, whenever you need it, you can use that template to automatically grab and display the newest blog post on any page without having to write the code again. A big part of that is being demonstrated in my current course I’m taking on React Basics.

There’s a much better explanation of how it works and more in-depth here.

Version Control

Version control covers the basics of GitHub. As with Javascript, this course was also informative. I’ve used GitHub occasionally for small projects and downloaded many open-source apps, but I never really understood how to use it and how it works. This course covered creating repositories, forking, branching, and basic terminal commands.

One of the neat things I learned about GitHub that I previously did not know about is the branching system for repositories. In a barebones repository, you have the Main branch, which has the (usually) fully fleshed-out main releases for a project. For example, I’m developing docs for the Drone Project (https://ezraharris.com/category/tech/drone/ series I’m doing on building drones for a drone show). With that, I chose a free template for creating docs called “Read-the-Docs.” Read the Docs has a template with GitHub, which makes it super easy to create a copy from the template page and host it for free using their deployment system. The branching is part of the automatic deployment system; I have two branches in GitHub: a Testing branch and a Main branch. I can make changes to the testing branch that may break the formatting, but that’s not on the main page and won’t affect the primary traffic of users. I can preview edits before pushing the testing branch into the main branch.

GitHub has much better documentation on using branching and managing pull requests here.

HTML and CSS in Depth

This also introduced many new concepts I had no idea were natively possible, like animations, using keyframes for more than just linear animations, and creating super smooth effects with only a couple of lines of code.

At the end of this course, I had to create a basic homepage using the concepts covered in the course. I was given a choice of four clients. I ended up choosing Lucky Shrub. I was provided a basic description with info about the client, logos, and a couple of preparation videos outlining the site’s basic framework I would create.

What made this assignment different from the other courses was the peer-reviewed grading. This is where I had some issues with Coursera. The downside is that they only support uploading HTML and CSS files, for the final project, making it challenging to review my peers’ websites because the links between files and folder structures were strange or because they used images outside of what Coursera provided. In the end, it made for a more complicated grading system than what it needed to be.

I ended up uploading the whole site to a GitHub repository and hosted it on Pages.dev. Cloudflare provides free basic web hosting and testing applications. (You can view my finished site for the project here)

I think it’d be a much easier process if Coursera worked with Pages.dev and/or Github to host the sites for previews instead of the mangled way of downloading and hosting it locally they have now.

Overall, I enjoyed all of the courses, but Javascript and React are quickly becoming the most interesting.

Certificates I’ve earned so far for completing mini-courses

September 19, 2024