Champaign-Urbana Community Fab Lab
Champaign-Urbana Community Fab Lab

Author Archive

Michael Rechenberg

Michael Rechenberg

Senior studying CS at UIUC. After I graduate in Spring 2019, I'll be working as a SWE at Microsoft in Seattle, WA.

Final Project: Smart Trash Picker

Where’s The Report? (It’s In an Attached PDF)

My final project was on a “Smart Trash Picker,” and I have a short slide-deck explaining what that is, and you can view it here

Fully built Smart Trash Picker

 

I wrote up my final report within a Google Doc, and aligning the images in that Google Doc was difficult.  If I copy-pasted that material into WordPress, the formatting would all go wrong.  So instead (with instructor permission) I’ve included my final report as a PDF.  You can view that report here: Final Project Written Reflection

Continue Reading

Iteration Assignment: Nametag 2.0

Initial Design and Planning

I wanted to redo my nametag for the iteration assignment ever since I found out I actually lasered the wrong side of the acrylic (which is why it was hard to see the raster design :/).  My initial nametag (the build process of which is given here) had the theme of a computer monitor and different parts of the nametag (my name, job titles, etc.) were delimited by pseudo-Linux shell commands.  For my iteration, I wanted to keep the computer theme of the nametag but augment it with an actual computer, namely a Pi Zero W, that other people could interact with from their laptops or phones.  The Pi would be powered by a spare micro-USB phone battery bank I had lying around.

So my iterative design was to use the same text of my first nametag to keep the computer theme going, but make a bigger nametag box that contained a Pi Zero W.  That Pi Zero W would run a web server that other people could access via a web browser (e.g. Edge, Chrome) to interact with the nametag.  Bolting on a large screen to the nametag is a bit overkill and would be distracting, so instead I planned to have LEDs next to the psuedo-Linux commands that, when someone typed in the corresponding command on the Pi’s web page, would turn that command’s LED.

Original Nametag

Sketch of Nametag 2.0.  Interaction between nametag and other user shown (e.g. HTTP requests through a web browser)

Build Process

Pi Zero W and LED circuitry

All of the code I wrote for the Pi Zero W are on Github and you can view it here.  There are 2 main Python libraries I used:

  • Flask to run the webserver.  You can install Flask from any Python package manager worth its salt and you can view its source code on Github here
  • RPi.GPIO to control the LEDs via GPIO pins.  You can find the library on PyPi here

Each LED is a simple series circuit with a GPIO pin as the input voltage, followed by a 330 Ohm resistor, and then leading to ground.  To make the wiring of multiple LEDs easier, I combined some of the wiring onto a mini breadboard.  This especially helped with wiring to ground since there are a finite number of GPIO pins on the Pi dedicated to ground.

One LED circuit.  The top right of the breadboard is the common row used for ground

I recorded a short video while I was testing the LED Python control code, which you can view here

 

All 3 LEDs Attached to Breadboard and Pi.  Each LED has its own GPIO output pin, but all LEDs are lead to the same ground GPIO pin through a common row on the breadboard

I wrote a test script to test multiple LEDs wired up together and to make sure that I wasn’t turning on multiple LEDs at the same time.  You can see the video here.

 

Pi Zero W and Flask Webserver

The Flask webserver runs out of port 8080 has two primary endpoints for other devices to interact with it.  The first is “/home”, which returns an HTML page.  Users that want to interact with the nametag will navigate their web browser to this endpoint.  They will see a webpage like the below picture

Picture of the /home webpage on my laptop’s web browser

The user has to type in the same commands that are on the nametag (“whoami”, “ls -l /home/mike/work”, or “sudo rm -rf /bad/vibes”) and dictate how long to turn on the LED.  When they click “Send Command” after typing in their command, the webpage makes an HTTP request to the second main endpoint, /activateLED.  If the command was typed correctly on the webpage, then the LED corresponding to that command will be illuminated for however many seconds the user specified.

Small Tangent About IP Addresses

One problem I didn’t anticipate right away is how to determine what the IP address of the Pi will be, like 172.157.0.46.  In order for two computers to communicate in a network, the sender needs to know the IP address of the destination computer so that the data is correctly routed through the network.

Typically when you browse the Internet, you never have to think about IP addresses because the Internet infrastructure has something called Domain Name System (DNS).  With DNS, you just have to remember a simple string like “google.com” or “cucfablab.org” and DNS will take care of figuring out the IP address of the correct webserver.  But with my project, I don’t have DNS at my disposal.  So for another computer to connect to the Pi Zero W in the nametag, the user has to explicitly know the IP address of the Pi on the network the Pi is currently connected to.  This is slightly complicated further because in typical home networks, devices that connect to the WiFi router are assigned private IP addresses via a system called Dynamic Host Control Protocol (DHCP) and the private IP address a device is assigned may be different on different days when the device joins the network again.  You can statically assign IP addresses within the private network, but every time you do this a sysadmin cries.

The bottom line is that before I could interact with the Pi wirelessly, I had to hook it up to a monitor to view its network configurations and assigned IP address.  For example, I used a monitor in the Fab Lab to connect the Pi to its Wifi (IllinoisNet_Guest instead of IllinoisNet because IllinoisNet is configured to not allow computers running unusual operating systems, like Raspbian on the Pi, from connecting to that network) and to view its assigned private IP address.  I did this by plugging into a Pi, opening up a terminal and typing ifconfig

The output was is shown above and the parts we care about are highlighted in red.  ifconfig spits out all the network configuration information for all network interfaces of a computer (e.g. Ethernet, WiFi, loopback).  For our purposes, we only care about the IP address for the WiFi interface, which is denoted in the wlan0 section.  Inside that section we care most about the inet line, which contains the IP address of our Pi (172.16.192.29).

Now that we know the IP address of the Pi, a computer connected to the same network as the Pi (IllinoisNet_Guest) can access its home page by opening up a web browser and going to the URL “172.16.192.29:8080/home”…which is the private IP address of the Pi (172.16.192.29), followed by a colon and then the port we want to connect (8080, since that’s the port Flask is running out of), followed he endpoint we want to use (“/home”)

Also, to actually start the webserver I have to input the command to start the webserver on the Pi itself.  Now that I know the IP address of the Pi, I can login to the Pi remotely via SSH and start the webserver with the command

nohup python app.py &

python app.py starts the webserver, the & says to run the command in the background, and nohup allows the command to still keep running after I logout of the SSH session.  This way to start the nametag I just have to SSH into the Pi for a few minutes to start the server, then I can disconnect from the Pi and the webserver will keep running until I power off the Pi.

Making the Nametag Box Pieces

To make the nametag box I measured the size of the whole circuit (Pi + battery+ wiring + breadboard) and found I needed a box at least the size (8 x 4 x 4.5) inches to contain the whole package and have a 16:9 “screen resolution” for the front of the box.

The front of the nametag would be a larger version of my v1 nametag, and the rest of the box would be cut out of plywood.  I designed the front of the nametag by copy-pasting the text element from my v1 nametag’s SVG file and resizing it to fit the larger 8 x 4 inch dimensions. 

The rest of the box was made by making simple rectangles in Inkscape and resizing them to the correct dimensions.

Some of the cut box pieces

I wanted to make the box be a press-fit box, so I manually added tabs and notches to each of the pieces so that they would press into place.  However, after I cut everything out I realized that I misplaced some of the notches and I had to cut more into the notch so all the pieces would fit.  Unfortunately it wasn’t until after I had cut out everything that someone told me about Box Designer, an online application that will generate press fit boxes designs for you.

Final Assembly

Now I could go on to make the final nametag.  First, I drilled out holes on the left side panel to align with the commands on the front of the nametag (the blue lines I drew on the following picture) for the LEDs to sit in. I drilled the holes large enough to fit the LED legs through but small enough that the LED itself would not go through the hole.

Then I assembled the bottom, back, and side panels together.  I used duct-tape to hold the pieces in place while I glued the edges where the pieces connected (since my press-fit design failed).

Then I placed the Pi, battery, and LED circuity inside the box and powered up the Pi with the battery.

Finally, I added on the top and front portions of the box.  I didn’t glue these pieces in place because I wanted some pieces free to be taken off when I had to power off the Pi.

Demo

You can see the nametag in action using my home WiFi in this video.

 

Final Reflection and v3.0?

I’m happy with how the Pi Zero and electronics worked out, but the nametag box could be better.  As mentioned previously in this blog, I could have used the Box Designer to make a press-fit box to save myself a lot of time and actually make a true press-fit box.  But compared to v1.0, the actual nametag is much easier to read than v1.0: the font is larger and I remembered to raster the right side of the acrylic 😛

I was surprised with how much physical space the whole Pi package took up (Pi Zero + battery + USB cable + LED circuitry.  In my head, the nametag box was supposed to be smaller than the (8 x 4 x 4.5) inches the final result turned out to be.

Making the webserver was easy because I’ve used the Flask library many times for various CS classes.  It’s a great library for writing quick HTTP webservers and simple to use.

If I was to iterate on this iteration, I would use Box Designer to make a cleaner box and I would pretty up the /home webpage to make it feel more like an actual computer terminal (something like this).

Continue Reading

Pom Pom Bot Assignment

Initial Pom Pom Design

After considering how different animals move, I initially decided to have my pom pom bot crawl along the ground–with 2 servos with popsicle sticks attached that would act as “arms” that dug into the ground and pulled the bot forward.  The bot would have regular cycles of the arms starting in front of the body, rotating under the body and pulling the body forward, and then the arms quickly rotating the opposite direction to reset the arms back in front of the body and to start the cycle again. Before I started building the circuit or writing code, I drew a quick sketch of how the bot would move (the “Locomotion” section”)  and what the final bot would look like (the “Aesthetics” section).

 

 

Initial Prototype Sketch During Lab Section

A green caterpillar, the image that comes to my mind when I think “caterpillar”

Since the bot would be crawling along the ground, I wanted the appearance of the bot to resemble an animal that crawled along the ground.  Caterpillars and snakes were the first animals that came to mind, but after I saw the pipe cleaners in the lab, that reminded me of the ribbing around caterpillars and that finalized my decision to make my pom pom bot look like a caterpillar; the main body would be a felt cylinder and the ribbing of the body would be made out of pipe-cleaners that ran across the diameter of the felt cylinder to mimic the cylindrical torso of a caterpillar.  The skeleton of the body would be made with popsicle sticks to provide a rigid platform to attach the servos to.  Finally, the eyes would be made with googly eyes or layered cotton balls, whichever one looked sillier 😛

 

Initial Prototype Construction

My initial prototype was a disaster.  Writing the code was easy, but I didn’t realize the servos’ 180 degree rotation restriction would be an issue.  My initial design had both servos resting on top of the popsicle stick skeleton, with one servo motor on the left and right side of the bot, and each servo would sweep under the body at the same time.  However, because the servos could only turn 180 degrees, there was no way to orient the servos such that they rested on top of the skeleton and both rotated under the skeleton.

If you look in the below picture, both servos rest on top of the body (Popsicle sticks).  But because the servos only rotate 180 degrees, the left servo is only able to sweep from in front of the body to under the body (which i want), but the right servo can only sweep from in front of the body to above the body (which is not what I wanted).

The result was that the bot just flailed around instead of making any progress since servos could not sweep the same direction at the same time. See this Google Drive video or this video to see how the 180 degree degree rotation restriction resulted in a flailing bot.

So going forward I had to reconsider how the servos would be placed on the skeleton of the bot.

 

Updated Designs

v2

My next design was a small fix to just place the right servo on the bottom of the skeleton rather than on top–that way the right servo’s 180 degrees of motion would sweep under the body just like the left servo.  As you can see in the below picture, the left servo is above the skeleton (red rubber bands) and the right servo is below the skeleton (left rubber bands), and now both servos could rotate the same direction (in the direction of the blue arrows, under the skeleton)

v3

That small modification for v2 allowed the servos to sweep together under the main body, but after running this design I realized that the popsicle stick arms were not generating enough friction with the table to pull the body forward.  At this point, I had not even added the felt body to the pom pom bot, so the weight that the arms were going to have to pull was only going to get larger and a re-design was required.  After seeing the servos run for a bit, I shifted gears from the popsicle sticks pulling the bot forward as arms, to instead having the popsicle sticks pushing the bot forward as legs since this would require less friction from the servos’ attached popsicle sticks to work effectively.  So the shift from v2 to v3 was adding the felt body and running the servos so that they pushed the bot forward.

However, in v3 the max angle that the servos would sweep to was too extreme and the servos swept too fast (servos swept to a maximum of 140 degrees with minimal delay), so the pom pom bot would erratically jump around rather than moving forward in a consistent manner (as you can see in this Google Drive Video).

v3.5

v3.5 had the same physical construction of v3, but the maximum angle that the servos would sweep to was reduced to 65 degrees in the code.  This stopped the bot from jumping around erratically like v3 did, but now the bot just moved up and down rather than making any forward progress (as you can see in this Google Drive Video)

 

Final Prototype

For the final prototype I made a few mechanical adjustments from v3.5 to make the pom pom bot effectively move forward

  • Changed the maximum sweep angle to 120 degrees so the legs would go underneath the body far enough to be able to push the body forward, but not sweep so far that the bot would jump around when the legs were retracted
  • Added a small 250ms delay between cycles to allow the bot to settle down before rotating the legs again
  • Added a popsicle stick “tongue” to the front of the the body.  Before, the front of the felt body was the only other point of contact between the pom pom bot and the ground when the legs were fully rotated.  But the friction between the felt and the table was too high so the bot had trouble moving forward.  The addition of the popsicle stick tongue lowered the friction between the front of the pom pom bot and the ground (since popsicle sticks have lower friction than felt), so the legs had an easier time pushing the bot forward

This allowed the bot to move forward in a consistent manner.  See this Google Drive Video to see the final bot in action.

And now that the pom pom bot was moving correctly, I added the rest of the aesthetic materials to the bot (pipe cleaners for ribbing and tail, and cotton balls for eyes and nose) to make it look like a caterpillar.  Here are some pictures of the final bot.

 

Reflections on Final Prototype

My final prototype was similar in spirit to my initial design, but physical restrictions (servos only able to rotate 180 degrees, friction with the table) required me to update the mechanics design.  The main change was having the servos push the bot forward rather than pull the bot forward, while the aesthetics of the bot remained the same.

I was surprised how much I enjoyed making the face of the bot.  Maybe it was the relief of not dealing with the servos anymore, but I had some solid giggles when putting on the eyes and the nose of the bot…perhaps the elongated tongue and slightly off-kilter eyeballs gave the bot a derpy charm.

Most importantly, I named my pom pom bot Harrington.

 

 

 

Continue Reading

Sewing & Embroidery Assignment (Textiles)

In-Class Deliverables

Drawstring Pouch

I made the drawstring pouch during the first lab section of the Textiles block of the class, following along with the instructions given by Sara (lab instructor).  I wanted to have a pouch with reserved colors, so I picked the outer fabric to be a darker fabric with low-saturation patterns.  However, my choice for the inner fabric was an impulse one as that fabric’s design just jumped out at me.

To get the drawstring string within the “tunnels” of at the top of the pouch, I taped one end of the string to a chopstick and used the chopstick to feed it through the tunnel.  To finish the pouch off, I used a lighter to singe the ends of the drawstring to stop the ends from fraying.  My final pouch is shown below.

The Finished Drawstring Pouch

The drawstring pouch opened slightly to see the inside fabric

Multicolor Patch

For the multicolor patch embroidery, I followed the instructions that Sara gave during lab section the week before Spring Break.  I initially wanted to make a patch of the Microsoft logo (since I will be working at Microsoft), but unfortunately the logos I found online were more difficult to separate by color in Inkscape than was expected.  After fiddling with the Microsoft logo for 10 minutes and realizing that the lab was going to move forward anyway, I chose the next tech company that had a multicolor logo: the Apple logo from the 1970’s.  That logo had more than 3 colors and the colors were vibrant compared to the current tech-company standard of bland colors and prevalence of blue everywhere.

The 70’s Apple Logo

That Apple logo was much easier to break apart into different segments using Inkscape’s Trace Bitmap feature (multiple passes using the Color option set to 6).  After saving the broken-apart-by-color-logo as an SVG, I imported it into PE Design.  I had to remove the line-stitches that PE Design initially gave for the edges of the patch since I didn’t want to have a distinct outline sewn along the border of the logo.  I didn’t realize until afterwards that the colors that PE design designated for each layer of the apple was different from my interpretation of the colors; as a result, I flipped the orange and yellow and the two shades of red because I changed the thread according to what embroidery machine displayed as the next color.  Going forward, I will either use the shape of the next section to be embroidered or the ordering of embroidery in PE Design to make sure I select the right color thread for each consecutive section.

The final patch is shown below.

The final patch

Out of Class Deliverable: Box Pouch

Background

I had no sewing experience coming into this project so this assignment was more challenging for me than previous ones and I was very frustrated at times.  But with it all said and done, I’m happy that I got to work on something outside my comfort zone and made something I’ll use on a regular basis.

I knew going into this assignment that I wanted my out-of-class deliverable to be something pragmatic, so I gravitated to the pre-approved designs for bags and pouches and settled on the box pouch design.  My goal was to make a pouch for my Ergodox EZ mechanical keyboard since I love the keyboard but carrying it around is a pain.  It is a split keyboard (see below) so transporting it means you’re transporting multiple pieces along with some cables.  Before I made my pouch, my solutions for transporting the keyboard was either putting in the box the keyboard was shipped in (but this wastes space) or putting it in my backpack (but this could potentially damage the keyboard).  So a pouch dedicated to just the keyboard and cables would be a better way to transport my favorite keyboard.

The 2 halves of my Ergodox EZ keyboard.  The 3 legs surrounding each half are for the tent kit, allowing you to rest the keyboard at a more comfortable angle

Since the pouch was going to be primarily used to hold just my keyboard, I decided that my embroidery should denote this and also that this pouch was mine.  The particular Ergodox EZ model I have (Glow) has RGB LEDs within most of the keys, so the keys can light up to different colors in response to specific key presses and also play color animations.

The RGB LEDs changing colors in an animation on the Ergodox EZ keyboard

So I decided that my embroidery design would be my name “MIKE” spelled out in illuminated black keycaps like the ones on my keyboard.  For those not familiar with mechanical keyboards, keycaps are the pieces of plastic that rest on top of the keyboard switches.  When you type on a mechanical keyboard, your fingers press down on the keycaps and then the force goes through to the switches.  Typically, keycaps are curved on top so your fingers can easily rest within them and allow you to type faster.  Below is a picture of some keycaps for reference.  

Example Keycaps

Design

Modifying Original Pouch Dimensions To Fit My Keyboard

Unfortunately, the dimensions of the pouch in the original design (4 x 4 x 8 inches) are too small to fit my Ergodox EZ.  In order to fit both keyboard halves and cables, I measured that I needed at least (8 x 10 x 4 inches).  So I had to reverse engineer the original design to figure out which parts of the original design I had to lengthen to get the dimensions I wanted.  I decided that my pouch should have dimensions (9 x 4 x 12 inches) to fit my keyboard with some extra wiggle room just in case.

This reverse engineering was more difficult than I originally anticipated.  The scaling from (4 x 4 x 8 inches) to (9 x 4 x 12 inches) is not uniform, so I had to figure out which dimensions to lengthen and by what factor on a dimension-by-dimension basis.  Duncan helped me out with this in 2 great ways

  • Suggested I cut out the original design in paper and mock the pouch construction process to better understand each dimension and what parts need to be lengthened.  A side benefit of this is that I better understood how the final fabric would be constructed and the geometry of everything once I got to the sewing machine
  • Explained what “cut on fold” meant.  I didn’t understand that this meant fold the fabric and then cut the design, so I didn’t realize that the length of some pieces would be doubled after cutting it from the pattern contained in the PDF

My modified designs for each piece of fabric is given below.  The handle goes along the 9″ dimension and the zipper goes along the 12″ dimension.

Modified Dimensions For Bag Pouch

 

Fabric Choices

The design called for 3 main pieces of material: the outer fabric, the inner fabric, and heavy interfacing, all of which I bought from JO-ANN over Spring Break.  Similar to the drawstring pouch, I wanted the outer fabric to be generally darker with a simple repeating pattern.  The inner fabric should be a similar warmth to the outer fabric, so I went with a darker blue.  The heavy interfacing just had to be iron-on and the color doesn’t matter because its interfacing.

However, because the outer fabric was going to be dark and the keycaps on the embroidery were going to be mostly black, embroidering the keycaps on the outer fabric would mean there wouldn’t be a lot of contrast and thus the embroidery would be harder to see.  So I decided that I would embroider the keycaps onto a lighter fabric, and then sew the lighter fabric onto the outer fabric; this way there would be enough contrast to make the embroidery pop out.  The embroidery fabric should ideally be related to the outer fabric to keep the aesthetic of the bag cohesive (I did this by choosing a light gray fabric that roughly matched the color of the gray flower patterns on the outer fabric.

My fabric choices are given below. Going left to right: outer fabric, inner fabric, light fabric for embroidery, and heavy interfacing

Fabrics Chosen

Embroidery Design

My pattern for the embroidery didn’t change, but my method of creating it changed a couple of times.  I wanted to have the keycaps for “M” “I” “K” and “E” laid out so that they spelled “Mike”.  For the purposes of discussion, here is the final embroidery SVG I imported into PE Design.  The keycaps are all in black and each keycap’s letter and edges are colored differently.

I am not the best artist, so I didn’t want to draw out the keycaps by hand or digitally without any reference. My first attempt was to model the keycaps in Fusion 360, render the keycaps into an image, then import that image into Inkscape to separate the different sections by color, then import that into PE Design.  Modelling the keycaps was pretty easy, but the Fusion 360 render took into account realistic lighting and created shadows and bright spots on the keycaps; this made it difficult to separate colors via Trace Bitmap in Inkscape because the shadows created multiple shades of black on the body of keycaps so the main bodies of the keycaps were composed of multiple groups of varying colors and annoying extra paths instead of one cohesive group of just one color.

Keycaps I Modeled in Fusion 360

So I scrapped the Fusion 360 route.  I already had my Ergodox EZ keyboard in front of me, so I figured why not just take off the keycaps I needed and take a picture of those, then import that into Inkscape to get the silhouette of the keycaps and then add the letters and edge coloring in Inkscape?  The Ergodox EZ is highly customizable, so you’re encouraged to replace keycaps and switches anyway (the company even gives you a special tool to make removing keycaps easier) and thus I didn’t have to worry about breaking my keyboard in the process.  This strategy turned out much better and is what I used for my final embroidery design.

My keyboard after I took out the “M” “I’ “K” and “E” keycaps

 

The picture of my actual Ergodox EZ keycaps arranged to spell “MIKE”

 

I imported the picture of my keycaps into Inkscape and used the “Brightness Cutoff” option for a single pass to just generate a path for the black portions of the picture (the outline of the keycaps and the letters).  I then removed the path nodes for the letters so that just the keycap silhouette remained.  Since the silhouette was a flat black color and there was no longer any lighting cues, it was hard to see the contours of the keycaps.  To make the geometry of the keycaps more pronounced, I used the Bezier Pen Tool in Inkscape to draw the contours of each keycap directly with Bezier curves, then make the paths wide enough and colored.  The geometry of the keycaps is pretty simple, so I was able to just draw some trapezoids with the Bezier Pen Tool and curve some of the edges to match the contours of the actual keycaps.

The final touch was to re-add letters on the keycaps.  The original letters on the keycaps were too small for embroidery, so I used the Text tool in Inkscape to create the letters and rotate/skew them to match their orientation on the keycaps and color them accordingly.

Going from photo of keycaps to outline of keycaps in Inkscape

 

Pouch Construction

To embroider the keycaps onto the light gray fabric, I imported my keycaps SVG into PE Design, removed the extra line-stitches that PE-design generated, and changed the stitches for the edges of the keycaps from line stitches to zig-zag stitches.  The first time I tried to embroider the keycap design the edges for the keycaps were line-stitches, and that turned out poorly because the line stitch wasn’t prominent enough to outline the geometry of the keycaps…but the zig-zag stitch gave the edges enough width to effectively outline the contours of the keycaps.

To sew the light gray fabric + embroidery combo onto the outer fabric of my pouch, I measured out where the center of one of the 12 x 4 inch faces of the pouch would be (the midpoint of one of the 17 x 13 inch halves) and placed the center of the embroidery + gray fabric there and pinned it in place.  Then I sewed the light gray fabric onto the outer fabric in 2 passes and cut off the excess gray fabric hanging off the stitch.

Keycaps Embroidery on Light Gray Fabric Pinned to Outer Fabric

From then on I mostly followed the instructions given in the original pouch design PDF to sew the pouch together, with only minor changes to the lengths of some parts to account for the fact I was making a larger pouch.  Sewing the zipper was the most frustrating part, since I had trouble figuring out how to sew the second side of the zipper without sewing through the wrong fabric as well.  I got help from someone else also making the pouch and was able to sew it together.

Final Pouch and Reflections

After sewing everything together, here is how the final pouch turned out

The pouch zipped up

My embroidery sewn onto the outer fabric of my bag

The pouch holding the two halves of my Ergodox EZ keyboard and associated cables

 

I’m happy that I now have a pouch to carry around my favorite keyboard and I have a lot more respect for costume designers after doing this project.  Dealing with folding the material different directions to sew different parts and making the pouch inside-out and right-side-out multiple times used more spatial reasoning than I anticipated, especially for a non-STEM environment.  It helped convince me that sewing projects could be a could avenue for STEAM learning as discussed in previous articles for INFO 490.

Continue Reading

3D Printing Assignment

Some Background (Trash is Bad)

For the 3D printing assignment, I am printing a component I designed from scratch. Its function (allow a Pi Zero to be mounted a rod) may not be immediately apparent, but its part of a larger side-project I want to work on this semester.

My overall goal is to make a “smart trash picker,” with the goal of using location data to incentivize and analyze garbage collection within a community. A complete product would be able to detect when someone picks up a piece of rubbish using the trash picker and records the user’s current location (if they consent). At a later time, this location data could be uploaded to some cloud database for further analysis.

The trash pickers I want to use. The blue oval is where I plan to mount the Pi Zero W to the trash picker (discussed later in the blog)

Why bother augmenting garbage collection with location data? Here are some use cases that could benefit a community:

  • “Gamification” of trash collection to incentivize citizens to pick up trash off of their streets. Say for every piece of trash you pick up, you get k points. The citizen with the most points at the end of the month could be recognized with their name in the paper, on a plaque, or some other form of praise. A public leaderboard could tickle people’s competitive side (“I want to get more points than Johnny this week”), encouraging them to go out and clean up their streets.
  • Townships could use the location data to determine which areas of their territory were accumulating the most trash. Councils could use this information to determine where to place more trash cans, or to investigate if a nearby agent was the source of the surplus trash (thanks Jeff Ginger for this suggestion)
  • Greek societies could document community service hours for members by associating trash collection data with a member ID

Through this project, I am attempting to synthesize information from two classes I am taking this semester, INFO 490 (Intro to Makerspace) and CS 498 (Internet of Things), into this project that’s been sitting on my back-burner for a while.

Smart Trash Picker Design v1

To actually build this “smart trash picker,” I figured I’d need to create a few components

  • A sensor to detect when someone has picked up trash. My plan for this is to use an IR break-beam sensor embedded within the handle of the trash picker so when someone closes the handle enough, the IR beam is broken and we detect the trash collection
  • A method to record the user’s current location. My plan for this is to write an Android app that uses the GPS on the user’s phone to grab their current location, then records that location.
  • Some method to notify the app that it needs to record the user’s location when they pick up a piece of trash with the trash picker. My plan for this is to use a Raspberry Pi Zero W physically attached to the trash picker. When the IR beam is broken, a wire to the GPIO pins of the Pi Zero would notify code running on the Pi Zero to send a Bluetooth message to the Android app, requesting that the app record the current user’s location.
  • [Optional] A cloud database that the Android app can upload location data to at the end of the day, when the user has access to a WiFi network. My plan for this is to use some Azure offering (e.g. Cosmos DB). Disclaimer, I am starting as a SWE at Microsoft after I graduate.
A Pi Zero W, with a quarter for scale

The third bullet point requires that the Pi Zero W and an external power supply be attached to the trash picker. So for this 3D printing assignment, I wanted to print a mounting so that the Pi Zero could be attached to the trash picker’s rod. For prototyping, I can’t just duct-tape the Pi Zero W to the rod because the Pi Zero W has exposed computer parts that can’t tolerate rough bindings like tape or rubber bands: I need some sort of mounting to screw the Pi Zero W into, then secure that mounting to the trash picker in a more aggressive manner.

This is my first time working with CAD software and 3D printing in, so for this assignment I’m restricting my printing to just be something that the Pi Zero W can screw onto and attach to the rod of the trash picker with a rubber band/strap/hose clamp; I am consciously not printing a mount for the power supply, a full case for the Pi Zero W, or a handle to embed the IR sensors within for this assignment. Hopefully as I get more comfortable with 3D printing, I could design and print parts for those as well…but walk before you run.

Build Process For Pi Zero W Mount

Initial Measurements and Design

Before I hit the FlashForge printers, I had to take some measurements so I could design the mounting with the correct sizes. I borrowed a roommate’s calipers and measured aspects of the trash picker and some of the power supplies I might use to power the Pi Zero W. I found a schematic for the Pi Zero W as a PDF online.

Some measurements I recorded for various power supplies and the trash picker itself. The main measurement I needed was the outer diameter of the trash picker rod.

I’m studying Computer Science, so I’m not an expert in mechanical designs. Luckily, one of my roommates is studying Mechanical engineering, so I asked him how to best mount something to a cylinder (since the trash picker rod is a cylinder). He quick doodled some designs for me

Some of the rough designs drawn by my Mech E roommate.

My main takeaway was that I was going to have some mounting that was attached to the trash picker using some sort of band (hose clamp or strap), that mounting should have some circular indentation for the rod to sit in, and the Pi Zero W would be attached to that mounting using screws leftover from a fan mounting I happen to have for a Raspberry Pi 3 (both Pi models have the same sized screw holes, M2.5).

CAD in Fusion 360

I created my design in Fusion 360 partly because I wanted to try out a “more advanced” CAD design program, but also because my dad has a CNC router and I’ve read that knowing your way around Fusion 360 can help you with cutting out 3D models in wood using that CNC router.

My STL files and Fusion 360 project files can be found on a Thingiverse Thing I created–you can find it on Thingiverse here

I used “Sketches” in Fusion 360 to make a 2D drawing of the Pi Zero schematic and the main “box” of my mounting. My first sketch uses the dimensions given in the Pi Zero schematic to place the M2.5 screw holes in the right places, and then I added 3mm holes centered at the Pi’s screw holes for a reason i’ll explain later.

In the second picture, the innermost sketch (outlined by pink lines and shown in the first picture) has the dimensions of the Pi Zero W and the M2.5 screw holes positioned where they are on the Pi Zero W board. The outermost sketch has the length and width of the whole bracket itself, which are wider and longer than the Pi Zero W so to provide space for the band to wrap around each end, as well as 3mm diameter holes centered where the Pi Zero W holes are. I extruded from these two sketches to make the bracket have a 2.5mm hole throughout the whole bracket, but a 3mm cylindrical cavity for only some of the bracket; this 2.5mm diameter to 3mm diameter transition allows the screw heads to sit within the bracket without falling through the bracket. The top-down view illustrates this the best.

Then I used a 0.475 diameter cylinder to cut a circular cavity in the mounting that the trash picker rod would sit in.

I made two “final” versions of the bracket that were ready to print: v5 which added fillets on the top edges to make it easier for the band to wrap around the bracket, and v6 that did not have fillets on the top edges. I figured v5’s fillets were a better physical design, but I thought the slight overhang the fillets created would make it unsuitable to print. I decided to print v5 first and only print v6 if v5’s print failed. To my delight, v5 printed with no issues.

Printing My Model and Assembly

I saved my v5 model (a single body in Fusion 360) as an STL file and imported it to the FlashForge program for one of the Fab Lab 3D Printers. I used 15% hexagon fill and oriented the body within the printer program so the below picture was a top-down view of the print. The print took 1 hour and 12 minutes to finish.

Top-down view of the part as it was oriented in the 3D printing program

The print came out almost perfect, but I overestimated the accuracy of how the screw holes would be printed…I had to file away a small amount of the 2.5mm and 3mm openings so my screws would fit within the holes.

After the filing and a giving the screws a bit of “motivation,” the screws correctly sat within the mounting. I screwed together the rest of the screw kit to the Pi Zero W, and then screwed my printed bracket to the Pi Zero W. It was very satisfying when the screws poking out of the bracket perfectly lined up with the holes on the Pi Zero W.

Now came the best part: finishing the build. I used two (9/16″ to 1 1/16″) hose clamps to secure my printed bracket to the trash picker. With those clamps tightened, the Pi Zero W was fully secured to the trash picker and my build was complete.

Going Forward

With the Pi Zero now able to be securely fastened to the trash picker, I can move forward with other parts of the physical parts of the prototype (i.e. embed the IR sensor in the handle). I can quick duct-tape a battery to the rod to test that the system is at least functional (when I partially close the handle, the IR sensor notifies the Pi Zero W and the Pi Zero W sends a Bluetooth message or lights up an LED, and the whole system is portable). After making sure things work within the constrained environment of indoors, I can move on to making a case for the Pi Zero W, battery, and IR sensors so the whole system is durable enough to work outdoors…but that’s work for the future.

Continue Reading

Assignment 3: Copper Tape Circuits

Motivation & Design

I was not planning to make a Star Wars pop-up card when I started this assignment. I initially planned to design a card around the slogan of the Washington Post, “Democracy Dies in Darkness,” and use LEDs to illuminate the slogan when someone pressed the switch…trying to play on the “Darkness” part of the slogan.

So I played around with the LEDs and tried to figure out a way that the slogan could only be seen when the LEDs were turned on. I tried obscuring the slogan in random colored pencil marks so that the slogan (in dark ink) would be easier to see when the LED was turned on. Eventually, I tried making a closed box of paper and placed the LED inside of it to test out my plan…it failed (I couldn’t see the slogan). But the illuminated box now sitting on the table reminded me of something else: Star Wars light-sabers.

To make the light sabers, I wrapped regular printer paper around a colored pencil, then taped the edges together to make a paper cylinder.
To actually light up the light saber, I put a ball of paper at the top of of the cylinder and wrapped and taped the LED to the bottom of the light saber.

I thought these paper light sabers looked cool, so I re-designed the card around the light sabers. I had a red and blue LED, so I figured I would have two light sabers battling each other, Jedi vs. Sith style. The required switch component of my card would manifest in the user choosing to illuminate the Jedi light saber or the Sith light saber; and the Jedi and Sith needed someone to wield the paper light sabers, so Luke Skywalker and Darth Vader were the obvious choices.

Circuit Diagram

With my overall card design determined, I created a circuit diagram for my card. I wanted to encourage users to pick Jedi, so I added an extra LED to the Jedi side of the circuit.

My circuit had 2 switches so the user could choose either Jedi (so the blue LED of the Jedi light saber and extra white LED would light up) OR Sith (so the red LED of the Sith light saber would light up).

My design didn’t use any resistors (but V = IR was always in reserve if I needed it).

Circuit Diagram (the semi-circles with rays coming out of them are the LEDs). The two top-most LEDs would be placed within their respective light sabers

Build Process

Printing Luke and Vader Using Silhouette

To give the light sabers some people to wield them, I found a silhouette of Luke Skywalker and Darth Vader online and imported that PNG into Silhouette Studio. From that program, I printed off the silhouettes into gray cardstock paper.

The silhouette PNG I used to print off Luke and Vader

After I printed off the silhouettes, I cut off the silhouette light sabers and taped the paper-LED light sabers I made to the silhouette cut-outs. Now Luke and Vader had *proper* light sabers.

Wiring Up The Circuit of the Card

After this project, I never want to use copper tape ever again. I’ve only been dabbling in hobby electronics recently, but working with breadboards and jumper wires is much easier for me than laying out copper tape and connecting copper tape to LEDs.

Connecting the copper tape on the base of the card when all the “wires” were flat was easy. But connecting the copper tape to the LED light sabers was more difficult given the fact that the light sabers moved around as the silhouettes moved around as they “popped-up.” I ended up adding scotch tape to the connections between the copper table and the LED legs in order to prevent the copper tape from disconnecting, but even after this the tape still disconnected if I opened the card too violently.

After the wiring was done, I hid the wiring with a piece of cardstock with circles denoting where the user should press to make their choice (and where the switches were in my circuit).

Final Result & Reflection

Here’s what the final card looked like:

I like how the final card turned out once it’s open, but I lament that the wiring of the light sabers is finicky and that I have to open the card slowly to ensure that the wiring doesn’t disconnect. If I were to build this card again, I would try to be more careful with copper tape; or more likely just use jumper cables instead since they are more flexible and less prone to tearing.

Continue Reading

Assignment 2: Silhouette Stickers

Motivation & Initial Design

For the griffin design, I wanted to combine my favorite animal (bear) with something else but I couldn’t think of another animal that would combine well with a bear. So I decided to shift my thinking from what would combine well with a bear to what would a bear wear that would be funny/interesting. My mind shot to “jet pack”, but jet packs don’t have a strong silhouette, so I used a rocket as a second-order approximation of a jet pack.

For the logo design, I wanted to use logos from my favorite podcast right now, Hello Internet. Logos and flag design just so happen to be a recurring theme on the podcast, so I wanted to combine the “HI” and “nail and gear” logos from the Hello Internet brand portfolio. One fan’s Hello internet flag design (shown below) inspired me to think of the nail and gear as separate components; and “nail and gear” sounds quite similar to the “hammer and sickle” of the USSR’s flag. I figured if I chose sticker colors that matched the USSR flag’s colors, then the Hello Internet to USSR link would be more easily established.

The main Hello Internet logo

The Hello Internet flag designed by a fan that most influenced my logo sticker

For the multi-layered design, I wanted to have something that was linked to UIUC. Last semester I started going out to some of the bars on campus more frequently, so I decided to combine the logos of different UIUC bars that actually have interesting logos (so no Legends or KAMS). The Red Lion’s lion was the most prominent logo I could think of, so I decided to use that lion as the core of the sticker. The rest of the bars would be represented by items that were worn by the lion as necklaces, hats, or shirts.


I drew my initial design for the multi-layered sticker on a post-it note so I could decide where I wanted to lay out all the different peripherals for the lion. I originally was going to have the lion wear a KAMS shirt, but later I nixed that idea since just some block letters saying “KAMS” is boring

Build Process

Inkscape

I made the griffin design during my INFO 490 lab section by taking two silhouettes of a bear and a rocket and combining their paths with the union operation in Inkscape…not much work for that.

For the logo design, I took the fan’s Hello Internet flag and used the Color Trace method to break apart the flag into 3 components: the black background, the silver gear, and the white nail. Then I rotated the gear and duplicated/skewed the nail until I had a figure that looked like the USSR hammer and sickle, grouped the components together, and combined their paths with the union operation. Then all I had to do was Color Trace to extract the “HI” logo and rearrange the HI and hammer-and-sickle to fit within a 4×4 inch area.

Logo Sticker Design in Inkscape

For the multi-layer design, I took images I found online for the logos of the bars Red Lion, Murphy’s and Firehaus (gone but not forgotten), along with an image of a fireman’s helmet, and used the Color Trace method to extract the shapes that I wanted. The lion of Red Lion is very complex and the Inkscape object for that lion initially had hundreds of nodes, so I had to spend around 10 minutes deleting certain nodes to simplify the figure that would eventually be sent to the Silhouette printer.

The top row contains the original source images I used. The rows below that contain the objects I extracted using the Color Trace method, and then either deleted some nodes or rescaled the objects to fit my needs.
Inkscape design for multi-layer sticker

Printing Out The Final Stickers & Reflection

The griffin sticker and logo sticker were straightforward to print out and compose using the transfer tape. But the multi-layered sticker was a different story…

Final Griffin Sticker
Final Logo Sticker
Final Multi-Layer Sticker

The Silhouette printer cut out the intricate designs of the lion and the small letters of “Murphy’s Pub” on the vinyl stickers just fine. But after the vinyl was cut, the excess vinyl had to be removed…and the small size of the cuts (the lion itself was a little less that 4×4 inches) meant that it was difficult to remove the excess vinyl around and inside the lion and the shamrock. Tweezers helped a little bit, but I could not remove the vinyl for the “Murphy’s Pub” text without destroying the shamrock or remove the vinyl for some of the interior of the Red Lion lion without horribly managing the rest of the figure. So I decided to abandon the “Murphy’s Pub” text and the small holes on the inside of the lion and instead just keep the silhouette of the shamrock and the outermost figure of the lion for my final sticker.

Even with that last-minute switch to using simpler shapes, I believe my design is still successful in fulfilling its goal of combining UIUC bars together. Yesterday when I showed my friend my final sticker yesterday, he immediately recognized the lion as Red Lion, the clover as Murphy’s, and the fireman’s logo as Firehaus. But I learned the hard way that even if a design can be displayed on a computer screen well, the design has to be tempered down so that it is feasible to produce in the physical world.

All and all, I’m happy with how my stickers turned out. I think I’ll put the logo sticker on the back of my laptop and put the multi-layered sticker in my friend’s apartment 😛

Continue Reading

Storyboard Lecture Assignment

Our group chose the “Fork in the Road” Exploration Map App. We had an interesting discussion about how much the app would have an active or passive place in planning the trip. I favored a much more active approach, with the app generating a trip from start to finish, peppering in interesting activities along the way…the app generates the route, not the user. You can see the amount of control the app has in my storyboard:

My Storyboard. A group of 5 adults want to go on a road trip from Chicago to Seattle.

Apologies for some of the arrows: the Sharpie had a much wider tip than I anticipated…hence the clarifications on what some words were, using arrows to point out the mistake.

The users could change the itinerary if they wanted (like when the party agrees to replace the stop at Rt 66 Diner), but the app has the final say on what the replacement stop is. I chose this behavior because I figured the exploration app should push destinations to the user, rather than the user pull destinations from the app, to make the user try places they have never heard of during their road trip.

Another person in my group disagreed: she preferred that the app would provide ambient information about where the user currently was, but the user would choose their own stops (or wander aimlessly until they bumped into something interesting and the app notified them the interesting thing was nearby). I liked how her approach was radically different than mine: if I can find her storyboard I’ll add it to this blog post (with her permission).

Continue Reading

Assignment 1: Laser Name Tag

Motivation & Initial Design

My first assignment for INFO 490 was to create a name tag in Inkscape and to print it using the Universal laser. With my name tag, I wanted to convey my affinity for computers and show the previous positions I’ve held (CS major at UIUC, going to be a SWE at Microsoft after I graduate).

I figured that the best way to incorporate this was to have my name tag contain a command-line shell within a name tag that was in the shape of a computer monitor…the idea being that someone was learning more about me (which is one of the functions of a name tag) by entering commands at a computer terminal.

My initial paper design. Before I settled on my computer-focused design, I thought about making a water tower with a basketball on top, in reference to the water tower from my home town: https://en.wikipedia.org/wiki/Hebron,_Illinois

The different Linux shell commands are used to delimit different sections of the name tag and the commands used are all valid Linux shell commands. They also add the benefit of being a sort of Easter Egg for people who know what those commands mean.

  • whoami displays the current user’s username in Linux, so that command marks the section of my name tag that displays my actual name
  • ls lists files in a specified directory in Linux, so that command marks the section of my name tag showing my titles as student and future SWE (the file path provided to ls, /home/mike/work/, was chosen to note that this section of the name tag contains my work titles). The structure of the text in this section (multiple columns) is also similar to the structure of the output of the actual ls command in Linux.
  • sudo rm -rf removes all the files within a given directory in Linux (with raised privileges thanks to sudo) This command is meant to end the name tag on a light-hearted note since the /etc/bad/vibes directory doesn’t really exist…but the command means that I’m trying to remove bad vibes from my life

Build Process

Inkscape

I’ve worked with Inkscape before when helping my father create designs for his CNC wood router, so I created my name tag design on my personal laptop. I took a silhouette of a computer monitor I found online and used its outline to create the vector path to cut out my nametag, and then I used an Illini logo to add a raster image to my name tag.

For the actual command-prompt text, I made a text box and used the monospace font because that font most resembled the font used in older Linux shells. However, my actual name was in a different font at a larger size to add contrast between the command text and my name…your name is the main part of a name tag so I wanted to make sure my actual name stood out.

I used various layers in my Inkscape project to organize my project and make it easier to align and modify different parts of my project. By locking or hiding layers, I could focus on changing just one aspect of my design without worrying about accidentally modifying other parts.

My final design in Inkscape, along with the layers I made within my project for organization.

Layers also helped me when aligning different elements with each other (to horizontally center the Illini logo, I could hide the other layers to de-clutter the screen, use Shift-clicks to select the Illini logo and then the red monitor cutout, then use Ctrl + Shift + A to bring up the Align & Distribute menu, select “Biggest Object”, and then click the center-horizontally button to have the Illini logo be centered horizontally with respect to the red monitor cutout.

Universal Laser

Once I was happy with my design, I saved the .svg and .pdf files of my design to Google Drive, and pulled them down from the cloud to the computers in the Fab Lab. A lab assistant helped my orient the laser and pick out an acrylic piece to cut my name tag out of. After 4 minutes of cutting time, my name tag was printed.

Final Result And Reflection

My name tag turned out pretty much just like I wanted. My only issues are that the acrylic had noticeable scratch marks and the contrast between the raster parts of my design and the untouched acrylic could be stronger.

Final Name Tag Result

Throughout the process, I felt most comfortable when designing the name tag in Inkscape since I’ve worked in Inkscape a bunch before. Working with the Universal was interesting since I had never worked with a laser cutter before, but my familiarity with CNC machines when working with my father helped me understand the basics of how the Universal worked.

All in all, I’m happy with the result!

Continue Reading

Mike Can Use WordPress

Wow, he’s so cool that he can make a new blog post for INFO 490. What a guy.

Mike is from Hebron, IL…home of the 1952 IHSA Basketball State Champs (that’s all Hebron is really known for, besides a nice ice-cream shop called the Dari…the Hebron water tower was painted as a basketball to commemorate the event).

The Hebron Water Tower

Now it’s time to make a sweet laser name-tag.

Continue Reading