c3cat/c3cat-landingpage
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Activity Actions

[wip] new rgb guide
All checks were successful
/ build (pull_request) Successful in 26s
Details

Browse source
This commit is contained in:
lilly 2025-12-12 12:25:48 +01:00
commit 26c8e989b0
Signed by: lilly
SSH key fingerprint: SHA256:y9T5GFw2A20WVklhetIxG1+kcg/Ce0shnQmbu1LQ37g
7 changed files with 852 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

51
assets/css/style.css
View file

@ -1,3 +1,6 @@
@layer base, per-site;
@layer base {
:root {
/* Use a shade of the c3cat logos pink, which works nicely as a link color. */
--accent-color-light: #DC049B;
@ -10,17 +13,22 @@ body {
font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
text-align: left;
line-height: 1.4;
/* Use dark grey instead of black to be lighter on the eyes. But also a grey
* which still works with the link color nicely. */
background-color: #ffffff;
color: #2B2B2B;
--bg-color: #ffffff;
--fg-color: #2b2b2b;
--accent-color: var(--accent-color-light);
background-color: var(--bg-color);
color: var(--fg-color);
@media (prefers-color-scheme: dark) {
/* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
/* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
background-color: #1b1b1b;
color: #ebebeb;
--bg-color: #1b1b1b;
--fg-color: #ebebeb;
--accent-color: var(--accent-color-dark);
}
}
@ -38,14 +46,13 @@ img {
width: 100%;
}
a:link, a:visited {
color: var(--accent-color-light);
@media (prefers-color-scheme: dark) {
color: var(--accent-color-dark);
}
color: var(--accent-color);
}
u {
text-decoration-color: var(--accent-color);
}
.title {
text-align: center;
@ -60,3 +67,29 @@ a:link, a:visited {
p.bigger {
font-size: 1.2rem;
}
section {
margin-top: 3rem;
}
details {
border: 1px solid var(--accent-color);
border-radius: 8px;
background-color: color-mix(in hsl, var(--accent-color) 20%, var(--bg-color) 80%);
& > * {
padding: 0.5rem 1ch;
}
& > summary {
cursor: pointer;
user-select: none;
}
&[open] > summary {
border-bottom: 1px solid var(--accent-color);
margin-left: 0;
margin-right: 0;
}
}
}

BIN
assets/img/rgb-guide-esp-labeled.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
assets/img/rgb-guide-soldered-isolated-strip.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
assets/img/rgb-guide-strip.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 571 KiB

53
index.html
View file

@ -6,6 +6,41 @@
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="me" href="https://chaos.social/@c3cat" />
<title>c3cat</title>
<style>
/* site-specific styles */
@layer per-site {
.resources-container {
display: flex;
flex-wrap: wrap;
column-gap: 1ch;
row-gap: 1rem;
justify-content: space-around;
align-items: stretch;
padding-left: 0;
&>a {
display: block;
width: fit-content;
flex-basis: 45%;
border: 1px solid var(--accent-color);
padding: 8px;
text-decoration: unset;
color: var(--fg-color);
background-color: color-mix(in hsl, var(--bg-color) 90%, var(--fg-color) 10%);
min-height: 2rem;
text-align: center;
font-size: larger;
&:hover {
background-color: color-mix(in hsl, var(--bg-color) 80%, var(--fg-color) 20%);
box-shadow: 4px 4px 6px var(--accent-color);
}
}
}
}
</style>
</head>
<body class="container">
<main>
@ -16,9 +51,21 @@
</picture>
<h2>Resources</h2>
<p class="bigger">The "original" cat ear model we used was borrowed from <a href="https://www.printables.com/de/model/35076-cat-ears">Printables</a>.
Since then, some people started to develop an <a href="https://git.hamburg.ccc.de/c3cat/scad">improved and parametrized version</a> with OpenSCAD.</p>
<p class="bigger">See the <a href="https://wiki.hamburg.ccc.de/club:c3cat:start">CCCHH wiki</a> for the latest information on signs, 3D models, etc.</p>
<ul class="resources-container">
<a href="./rgb-ears-39c3.html">39C3 LED Catear Guide</a>
<a href="./catear-bom.html">LED Catear BOM</a>
<a href="./3d-printables.html">3D Printing Files</a>
</ul>
<h3>Archive</h3>
<p>
These are not necessarily the most up-to-date version but we maintain them here in case you have our link saved or found an old kit from us.
</p>
<ul>
<li><a href="./rgb-ears.html">EH22 Catear Guide</a></li>
<li><a href="https://wiki.hamburg.ccc.de/club:c3cat:start">CCCHH Wiki page</a></li>
<li><a href="https://www.printables.com/de/model/35076-cat-ears" rel="external">Original Catear model from <i>Printables</i></a></li>
</ul>
<h2>History</h2>
<p>A few people from Hamburg started to 3D-print and wear cat ear headbands at <a href="https://eh20.easterhegg.eu">EH20</a> which lead to some "can I get one, too" reactions.

685
rgb-ears-39c3.html Executable file
View file

@ -0,0 +1,685 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css" />
<title>c3cat</title>
<style>
@layer per-site {
ol.step-by-step-instructions {
margin-top: 1rem;
li {
margin-top: 0.5rem;
margin-bottom: 1rem;
&::marker {
color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
font-size: larger;
}
&>div {
display: flex;
flex-direction: row;
gap: 1ch;
justify-content: space-between;
}
input[type="checkbox"] {
margin: 4px;
width: 2rem;
height: 2rem;
flex-shrink: 0;
flex-grow: 0;
}
}
}
dl.key-value {
display: grid;
grid-template-columns: 2ch [keys] fit-content(30ch) [values] auto;
column-gap: 2ch;
row-gap: 0.2rem;
&>dt {
text-decoration-line: underline;
text-decoration-color: var(--accent-color);
grid-column-start: keys;
text-align: end;
}
&>dd {
margin-left: 0;
grid-column-start: values;
&::before {
content: "➡";
margin-right: 2ch;
color: color-mix(in hsl, var(--bg-color) 30%, var(--fg-color) 70%);
}
}
}
fieldset#detail-grade-picker {
border-color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
display: flex;
align-items: baseline;
label {
flex-grow: 1;
margin-left: 0.5ch;
}
input,label {
cursor: pointer;
}
/* input[type="radio"]:checked+label {
text-decoration-line: underline;
text-decoration-color: var(--accent-color);
} */
}
/* hide items with .detail-default-hide if the corresponding .detail-show-(all|simplified|short) is not currently active */
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked)) .detail-default-hide.detail-show-all {
display: none;
}
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked)) .detail-default-hide.detail-show-simplified {
display: none;
}
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked)) .detail-default-hide.detail-show-short {
display: none;
}
/* hide items with .detail-hide-(all|simplified|short) if the corresponding radio button is active */
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked) .detail-hide-all {
display: none;
}
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked) .detail-hide-simplified {
display: none;
}
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked) .detail-hide-short {
display: none;
}
}
</style>
</head>
<body class="container">
<main>
<h1>RGB Catear Build Instructions</h1>
<a href="/">
<picture>
<source srcset="assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp" media="(prefers-color-scheme: dark)"/>
<img src="assets/img/c3cat-c3sign-cccamp23-transparent.webp" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img"/>
</picture>
</a>
<section id="introduction">
<fieldset id="detail-grade-picker">
<legend>Choose the grade of details you want this guide to appear in</legend>
<input type="radio" id="detail-picker-all" name="detail-grade-picker" value="all" checked>
<label for="detail-picker-all">Show everything</label>
<input type="radio" id="detail-picker-simplified" name="detail-grade-picker" value="simplified">
<label for="detail-picker-simplified">Simplified</label>
<input type="radio" id="detail-picker-short" name="detail-grade-picker" value="short">
<label for="detail-picker-short">Short</label>
</fieldset>
<p>
This guide aims to explain in simple terms how to assemble the c3cat catear build kit.
To follow it, you need <em>soldering equipment</em>, a <em>heatgun</em>, a pair of <em>striping pliers</em> as well as <em>one of our build kits</em>.<br>
If you did not get a hold of one of those kits, take a look at <a href="#">our BOM</a>.
</p>
<p>
The general project assembly looks like this where each of the components must be connected via soldering points.
</p>
<div style="display: flex; justify-content: center;">
<pre role="presentation" aria-description="ASCII drawing of the project assembly containing the parts included in the kit.">
┌─────┐ ╭───╮
│ ESP ├┄┄╼ ╾┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄│ │
└─────┘
╱ ╲ ╱ ╲ ╱ ╲
pluggable long catear
connector cable & leds
</pre>
</div>
<p>
Inside this guide, you will find the following content
</p>
<nav>
<ol class="toc">
<li><a href="#step-1">Flash the microcontroller</a></li>
<li><a href="#step-2">Solder cables to LED strip</a></li>
<li><a href="#step-3">Solder cables to pluggable connector</a></li>
<li><a href="#step-4">Solder cables to Microcontroller</a></li>
<li><a href="#step-5">Test It!</a></li>
<li><a href="#step-6">Finalize the Assembly</a></li>
</ol>
</nav>
</section>
<section id="step-1">
<h2>Flash the microcontroller</h2>
<p>
We recommend to use <a href="https://kno.wled.ge/" rel="external">WLED</a> as a firmware on all our catears.
It offers a wide range of features for display and animation and can be controlled comfortably from your smartphone.
</p>
<ol class="step-by-step-instructions">
<li class="detail-hide-short">
<div>
<label for="connect-esp">
Take the microcontroller out of its packaging and connect it to your computer.
<span class="detail-hide-simplified"><br>
Depending on your choice of linux distribution, you may need to ensure that you have appropriate permissions to interact with the serial device.
Check your distros documentation if you are unsure or things are not working as expected.
</span>
</label>
<input type="checkbox" id="connect-esp">
</div>
</li>
<li class="detail-hide-short">
<div>
<label for="go-to-wled-install">
Go to <a href="http://wled-install.github.io" rel="external">WLED-Install</a> and follow the instructions there.
<span class="detail-hide-simplified"><br>
If your browser supports the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API" rel="external">Web Serial API</a> (i.e. is Chromium based), you can flash the microcontroller directly from it by pressing the <q>Install</q> button.
</span>
</label>
<input type="checkbox" id="go-to-wled-install">
</div>
</li>
<li class="detail-hide-short">
<div>
<label for="connect-to-wled">
After flashing, you will be prompted to choose a WiFi connection.
You can skip this step in which case the controller will open its own hotspot to connect to later.
</label>
<input type="checkbox" id="connect-to-wled">
</div>
</li>
<li class="detail-default-hide detail-show-short">
<div>
<label for="flash-wled">
Flash WLED using the <a href="http://wled-install.github.io" rel="external">web installer</a>.
</label>
<input type="checkbox" id="flash-wled">
</div>
</li>
</ol>
</section>
<section id="step-2">
<h2>Solder cables to LED strip</h2>
<p>
One of the most important steps is to electircally connect the microcontroller to the LED strip.
We will start with the LED side.
<label class="detail-hide-short"><br>
Basically, the LED strip has three connections. One for data, one for ground and one for voltage.
Each of these three functions requires a separately soldered connection.
</label>
</p>
<figure class="detail-hide-simplified detail-hide-short">
<span>TODO: Make the images appear horizontally on large screens</span>
<img src="assets/img/rgb-guide-strip.webp" alt="Picture of the backside of an LED strip with its contacts exposed. Three labeled arrows explain which connector carries what" class="hero-img"/>
<span>TODO: Actually take a picture of the cables too</span>
<img src="assets/img/rgb-guide-strip.webp" alt="Picture of a three-core wire with its insulation stripped off. The three cores are labeled similarly to the picture of the LED strip" class="hero-img" />
</figure>
<ol class="step-by-step-instructions">
<li class="detail-hide-short">
<div>
<label for="prepare-led-cable">
Prepare the long cable for soldering by removing its insulation.
<span class="detail-hide-simplified"><br>
Strip about 1cm of insulation from one end of the long cable using your striping pliers.
There are three cores inside it which are individually insulated. Use something less hard (e.g. your fingernails) to carefully remove the indivudal insulation as well and expose the blank connectors.
</span>
<details style="margin-top: 1rem;">
<summary>Picture</summary>
<img src="assets/img/:invalid" alt="Picture of a three-core wire with its insulation stripped off. The three cores are labeled similarly to the picture of the LED strip" class="hero-img" />
</details>
</label>
<input type="checkbox" id="prepare-led-cable">
</div>
</li>
<li>
<div>
<label for="solder-to-led-strip">
Solder the three cable cores to their corresponding connectors on the LED strip.
We use these combinations:
<dl class="key-value" style="margin-top: 1ch;">
<dt>Red</dt><dd>+5V</dd>
<dt>Green</dt><dd>Data</dd>
<dt>Black</dt><dd>Ground</dd>
</dl>
</label>
<input type="checkbox" id="solder-to-led-strip">
</div>
</li>
<li class="detail-hide-short">
<div>
<label for="solder-heatshrink-to-led-strip">
Put a heatshrink over the connectors. TODO: Specify which heatshrink
<span class="detail-hide-simplified"><br>
Cut a TODO cm long part off the heatshrink and pull it over the soldered connections.
Once it is centered, apply heat with your heatgun to hold everything in place.
<details style="margin-top: 1rem;">
<summary>Picture</summary>
<img src="assets/img/rgb-guide-soldered-isolated-strip.jpeg" alt="Picture of one end of the LED strip with a cable connected and heatshrink applied to the connection" class="hero-img"/>
</details>
</span>
</label>
<input type="checkbox" id="solder-heatshrink-to-led-strip">
</div>
</li>
</ol>
</section>
<section id="step-3">
<h2>Solder Cable to pluggable connector</h2>
<p>
The other side of the long cable now needs to be connected to the pluggable connector.
</p>
<ol class="step-by-step-instructions">
<li class="detail-hide-short">
<div>
<label for="prepare-led-cable2">
Remove the insulation from the free side of the long cable as well as one of the connector cables.
</label>
<input type="checkbox" id="prepare-led-cable2">
</div>
</li>
<li>
<div>
<label for="solder-to-connector">
Solder all the cable cores together in pairs.
We use these combinations:
<dl class="key-value" style="margin-top: 1ch;">
<dt>Red (long cable)</dt><dd>TODO (connector)</dd>
<dt>Green (long cable)</dt><dd>TODO (connector)</dd>
<dt>Black (long cable)</dt><dd>TODO (connector)</dd>
</dl>
</label>
<input type="checkbox" id="solder-to-connector">
</div>
</li>
<li>
<div>
<label for="heatshrink-to-connector-long-cable-side">
TODO: how long of which heatshrink<br>
Put a heatshrink over the connection.<br>
Make sure that you wrap each cable core in heatshrink individually <b>and then</b> put an additional heatshrink over the whole connection as a whole.
</label>
<input type="checkbox" id="heatshrink-to-connector-long-cable-side">
</div>
</li>
</ol>
</section>
<section id="step-4">
<h2>Solder Pluggable Connector to Microcontroller</h2>
<p>
Now you need to solder the other part of the pluggable connector to your microcontroller.
</p>
<p>
TODO: Replace picture with actual ESP
</p>
<img src="assets/img/rgb-guide-esp-labeled.jpeg" alt="Picture of the microcontroller with labeled arrows pointing to the relevant contacts" class="hero-img"/>
<ol class="step-by-step-instructions">
<li>
<div>
<label for="solder-ground-to-esp">
Solder <u>ground (black core)</u> to the microcontrollers <u>ground rail</u>.
</label>
<input type="checkbox" id="solder-ground-to-esp">
</div>
</li>
<li>
<div>
<label for="solder-power-to-esp">
Solder <u>charge (red core)</u> to the microcontrollers <u>+5V rail</u>.
</label>
<input type="checkbox" id="solder-power-to-esp">
</div>
</li>
<li>
<div>
<label for="solder-data-to-esp">
Solder <u>data (green core)</u> to the microcontrollers <u>GPIO 2</u> connector.<br>
<span class="detail-hide-simplified detail-hide-short">You can actually use any GPIO port but number two is the default configuration from WLED so for an easier setup experience, we recommend just sticking with it.</span>
</label>
<input type="checkbox" id="solder-data-to-esp">
</div>
</li>
</ol>
</section>
<section id="step-5">
<h2>Test It!</h2>
<p>
Test the whole assembly by connecting the microcontroller to USB-C power.
The LEDs strip should turn on and glow in a warm orange tone.
</p>
<ol class="step-by-step-instructions">
<li>
<div>
<label for="test-assembly">
Test that LEDs turn on when power is connected to the microcontroller.
</label>
<input type="checkbox" id="test-assembly">
</div>
</li>
</ol>
</section>
<section id="step-6">
<h2>Finalize the Assembly</h2>
<ol class="step-by-step-instructions">
<li>
<div>
<label for="place-esp-in-case">
Place the microcontroller in the included case.
<details class="detail-hide-short" style="margin-top: 1rem;">
<summary>Picture</summary>
<img src="" alt="A picture of the microcontroller and how it is placed in its case." class="hero-image">
</details>
</label>
<input type="checkbox" id="place-esp-in-case">
</div>
</li>
<li>
<div>
<label for="glue-leds-to-catears">
Attach the LED strip onto your favourite pair of catears.
<span class="detail-hide-short">
The end of the LED strip should align with the outer corner of one of the ears.
</span>
<span class="detail-hide-simplified detail-hide-short"><br>
The strip contains its own glue strip on the bottom.
To use it, peel off the protective cover (without also removing the glue coating) and start attaching it to your catears.
</span>
<details class="detail-hide-short" style="margin-top: 1rem;">
<summary>Picture</summary>
<img src="todo://" alt="Front and central picture of the LED strip glued to catears. The alignment of the strip is highlighted." class="hero-image">
</details>
</label>
<input type="checkbox" id="glue-leds-to-catears">
</div>
</li>
</ol>
</section>
<!--
<hr style="margin-top: 128px;">
<h2>Base version</h2>
<h3>Step 1: Flashing the microcontroller</h3>
In order to make those fancy catears light up we need to falsh some firmware first.
Go to http://wled-install.github.io and choose the "Standard Version" - "ESP32-C3 (4MB Flash)".
Now take the ESP32 out of its package, connect it via USB-C to your computer and click the install button. You will be promted to choose a port. The flashing process will take a while. Please do not disconnect the ESP32 - this may brick the device. After flashing finished you will be prompted to choose a wifi, you can skip this step.
You will need a chromium based browser for the flashing process (Firefox will not work).
<h3>Step 2: Prepare long cable</h3>
Strip about 1 cm of insulation from one end of the cable and about 2 cm from the other end.
Pull a 1 cm piece of 4 mm heat-shrink tubing over the three cables of the female LED connector. Pull a 3 cm piece of 7 mm heat-shrink tubing over the long cable. Now solder the cables of the connector to the 2cm end of the long cable and then pull the pieces of heat-shrink tubing over the soldered joints. Heat the heat shrink until it is firmly attached. Then pull the 7mm heat shrink over the area and shrink again.
<img src="assets/img/b1.jpeg" alt="Picture of soldered cable" class="hero-img"/> </br>
<img src="assets/img/b2.jpeg" alt="Picture of shrinked tubed cables " class="hero-img"/> </br>
<img src="assets/img/b3.jpeg" alt="Fully shrinked tubed cable" class="hero-img"/> </br>
<h3>Step 2: Prepare the LED strip</h3>
Pull a 1cm piece of the 7mm heat shrink over the long cable.
We now solder the 1cm end to the LED strip. To do this, we first need to find the correct end of the strip. Our strip had the following labeling on the back - we need the end with an INPUT pin (marked IN here):
<img src="assets/img/b4.jpeg" alt="Backside of LED strip" class="hero-img"/> </br>
<img src="assets/img/b5.jpeg" alt="Fully assambled LED strip" class="hero-img"/> </br>
Now solder the cable to the LED strip according to the inputs (we have chosen red=5V, black=GND and yellow/green=data). Then protect the soldered joint with the piece of shrink tubing that we put on the cable.
<h3>Step 3: Attach cable to the ESP</h3>
We now solder the other connector to the ESP. The red cable to the 5V pin, the black cable to GND and we have chosen pin 3 for the green data cable:
<img src="assets/img/b6.jpeg" alt="Picture with Pins" class="hero-img"/> </br>
<img src="assets/img/b7.jpeg" alt="Soldered cables (back)" class="hero-img"/> </br>
<img src="assets/img/b8.jpeg" alt="Soldered cables (front)" class="hero-img"/> </br>
<h3>Step 4: Prepare the case</h3>
As we want to close the case with a screw, we use a heat insert with an M3 thread. Of course, a modified version of the case can also be used, in which the screw is held directly in the 3D print - this is not suitable for frequent opening, as the plastic thread wears out quickly.
So: If applicable, heat it according to the instructions of the heat inserts and place it in the 3D print.
<img src="assets/img/b9.jpeg" alt="heat set insert" class="hero-img"/>
<h3>Step 6: Assemble the case</h3>
Now pack the ESP into the case, place the button and fix the cables with hot glue if necessary.
<img src="assets/img/b10.jpeg" alt="finished case" class="hero-img"/>
<h3>Step 7: Glue the LED strip to the 3D-Printed catears</h3>
Now we are finished the hardware
<h3>Step 8: Software Settings</h3>
Now connect your catears to your Smartphone or Laptop. When powered up there will be an Access Point you can connect to. Its named "WLED-AP".
In the settings (To the controls -> Config (top right corner)) go to LED Preferences you will need to configure the amount of LEDs the strip has unter "Hardware setup" -> "LED outputs" -> Lenght. Its around 40. Chose 3 for DATA GPIO!
Back in the config Menue you can configure your WLED-AP under "WiFi Setup". Unter "Access Point"
you can configure a AP-Password to secure your catears against those Eggdy Hackers.
</br> </br>
<h2>Advanced Catears</h2>
<h3>nd's party ears</h3>
<picture>
<img src="assets/img/party-1.webp" alt="A person wearing colorful lit-up catears. All faces in the image are blured." class="blog-img"/>
</picture>
<p>
Well, I wanted something blinking and useable for dancing and it should react to the beat.<br>
So of course I built just that.
</p>
<picture>
<img src="assets/img/party-2.webp" alt="Lit-up catears balanced on a glass bottle as a stand. In front of the bottle there is a white plastic box, connected to the catears and a black powerbank next to it." class="blog-img"/>
</picture>
<p>
I wore them for the first time at gpn22 and tested them during the party there. Worked well, looked great and quite some people asked me how to built them. So here are instructions on how to build your own.
</p>
<picture>
<img src="assets/img/party-3.webp" alt="A white plastic box with a black label saying: 'BLINKnd Ears build by nd' and below that: 'dc8aac'. A cable with a plug comes out of the box, but isn#t attached to anything else." class="blog-img"/>
</picture>
<p>
I opted to use prefabricated modules instead of creating my own PCB to get faster results and lower the entry barrier for clones. Using a custom PCB would probably result in a smaller size.
</p>
<h4>How Does it Work?</h4>
<p>
I carry an ESP32 running the <a href="https://mm.kno.wled.ge/">WLED MoonModules Project</a> fork of <a href="https://kno.wled.ge/">WLED]</a>. Connected to it is an I2S module. The sound input is used to run a <a href="https://en.wikipedia.org/wiki/Fast_Fourier_transform">FFT</a> and beat detection on the ESP. Those are then used in light effects. As lights I use a ws2812 stripe glued to 3d printed cat ears. A cable is running from the ears behind my back under my shirt to the bum bag. All together is powered via an USB power bank.
<h4>Partlist</h4>
<ul>
<li>ESP32[-S3] (I used an <a href="https://www.waveshare.com/esp32-s3-zero.htm">ESP32-S3 Mini</a>. There are cheaper alternatives on Aliexpress. Do not use the single core variantes. Size matters)</li>
<li>I2S microphone (I used an INMP441 module)</li>
<li>A Case (You could 3d print this, I used some <a href="https://www.obi.de/p/1820240/abzweigdose-ip54-75-mm-x-37-mm-x-40-mm-10-stueck">cheap junction box from obi</a>)</li>
<li>USBC socket (for example <a href="https://www.amazon.de/dp/B0CPLS1X29">this one</a>)</li>
<li>WS2812 COB LED Strip (200 LEDs /m in my case, resulting in 60 LEDs on a 31cm stripe)</li>
<li>Capacitors. ~1000µf in total. Used to stabilize the power supply.</li>
<li>USB Power bank</li>
<li>3d printed cat ears (I used [this model provided by c3cat](https://wiki.hamburg.ccc.de/club:c3cat:start)). I'd recommend not to use PLA because of it's melting point. </li>
<li>transparent glue</li>
<li>black paint</li>
<li>transparent plastic string</li>
<li>some cables</li>
<li>shrink tubing</li>
<li>connectors</li>
<li>small bolts and nuts (I used m2)</li>
</ul>
<h4>Buildsteps</h4>
<h5>Electronics and Case</h5>
<picture>
<img src="assets/img/party-4.webp" alt="" class="blog-img"/>
</picture>
<p>
Connect the Microphone to the ESP.
See <a href="https://mm.kno.wled.ge/WLEDSR/Digital-Microphone-Hookup/">here</a> for the pinout. For my INMP441 I've used the following pins :
</p>
<pre>I2S SD: 3
I2S WS: 2
I2S SCK: 1
I2S MCLK: N/A</pre>
<p>
But you can pick any supported microphone and are quite flexible in choosing those pins.
</p>
<p>
The ws2812 data pin from the stripe on the ears is connected to `GPIO 4`. See [here](https://mm.kno.wled.ge/basics/getting-started/#quick-start-guide) on general info on howto connect those LEDs. I've picked a 100 Ohm resistor and skipped the level shifter.<br>
My board has another ws2812 LED on `GPIO 21` connected. I use this one as status LED. It's visible evenfrom outside the case.<br>
For power I've connected an USB C socket. It's secured with a cable tie. I picked this option over using the port on the devboard because the traces do not like the \~3A peak current I'd like to draw. It's recommended to add some random amount of capacitors as well. Considering I plan to support a 15W LED strob mode as it's probably not a bad idea. WLED recommends 1000µF.<br>
I've used m2 screws to connect board and case. To protect against stress I'd recommend to secure all external cables and sockets to the case and not only to the PCB.
</p>
<h5>Ears</h5>
<picture>
<img src="assets/img/party-5.webp" alt="Catears with a powered off led strip glued to it. At the end of the cable coming from the catears is a plug with three exposed pins." class="blog-img"/>
</picture>
<p>
Get 3d printed cat ears. You should be able to find them in most hackspaces and chaos events. Or print your own with this [model from c3cat](https://wiki.hamburg.ccc.de/club:c3cat:start). I'd recommend HIPS or ABS as printing material since the LEDs get hot enought to bend PLA. Don't worry if you only have PLA ones, you just might have to heat and bend them back sometimes. I painted them black to keep moisture out permanently and have a smooth surface.
</p>
<p>
You need a thin LED stripe for this build. I picked up a 4mm wide one from Aliexpress which came in a silicone tube. I'd recommend a high pixel density, like 200/m, for maximum blink. For the linked 3d model this results in the need for 31cm or 60 LEDs of 200 LEDs/m stripe. I'd recommend to power on the stripe, turn on 60 LEDs, mark them, turn the stripe off and then cut it to length.
</p>
<picture>
<img src="assets/img/party-6.webp" alt="" class="blog-img"/>
</picture>
<p>
At areas of high stress (narrow bends) I've reinforced the stripe with transparent string and glue. This keeps the stripe and ears from seperating.
</p>
<picture>
<img src="assets/img/party-7.webp" alt="" class="blog-img"/>
</picture>
<p>
On the lower half the string was painted black so it's not as visible.<br>
Use shrink tubing to fix the cable to the ears. You can substitute it for tape, but you have to build some kind of stress relive if you want your ears to last. Solder the cable to the backside of the stripe.<br>
<b>WARNING</b>: using the wrong polarity will result in a fried ESP. You should use a reverse secure connector unlike me. Ask me how I know...<br>
<b>WARNING 2</b>: I learned not all cables are skin-friendly. Random ones from Aliexpress especially might not be... maybe add a silicone tube or use less shitty cables.
<h4>Software and Configuration</h4>
<p>
See <a href="https://mm.kno.wled.ge/basics/install-binary/">here</a> how to flash the wled fork. The web installer didn't work for me so I went a different way:
</p>
<ul>
<li>flash tasmota via the <a href="https://tasmota.github.io/install/">web installer</a>)
<li>connect to the wifi and go to the tasmota web terminal -> console -> <a href="https://tasmota.github.io/docs/Commands/#setoption78">SetOption78 on</a>
<li>install wled via the tasmota ota update function
</ul>
<p>
It's probably easier to flash via CLI directly but I only had a phone with me at that moment. Yes we are in a future where you can flash a microcontroller via your phones browser. I love it!
Now you should be able to connect to the WLED AP via wifi and it's standard password (<code>wled1234</code>).
Configure your GPIOs via the webinterface. To get nicer effects, configure segments for parts like the ears and sides separately. Setup presets for effects and colors.
Most importantly: experiment! Find out what looks you like. Try out what effects to use to what kind of music. <a href="https://mm.kno.wled.ge/moonmodules/arti-fx/">Script your own effects</a>. The documentation of WLED is quite a good help with that.
<h4>Observed Problems and Ideas</h4>
<h5>PLA melts</h5>
<p>
Yes realy. \~3A at 5V is generates enough heat to soften PLA. My next version is made using [HIPS](https://en.wikipedia.org/wiki/Graft_polymer#High_impact_polystyrene). ABS would work as well.
</p>
<h5>Connector reversing kills the ESP</h5>
<p>
Use a different connector as I did
</p>
<h5>No USB power delivery support</h5>
<p>
The USB C breakout I used doesn't support USB PD. Use a different module or USB A -> C cables.
</p>
<h5>Too much bass (lol)</h5>
<p>
If it gets too loud the microphone clips out even on minimal gain settings. Either use a line in or add sound isolation. A different microphone could help as well. Or ignore the problem, it still blinks good enough.
</p>
<h5>More Documentation</h5>
<p>
I took way too few pictures of the ears in action. I'd realy love to have more pictures of them and some other wearables I plan to build. Hopefully fixable on the next event.
</p>
<h5>Hardware Controlls and Buttons</h5>
<p>
Looking at a phone screen is annoying. I'd love a button to cycle presets.
</p>
<h5>Sync</h5>
<p>
WLED has the option to sync multiple devices via wifi... I've some plans.
</p>
-->
</main>
<footer>
<p>
Don't feel pressured to wear cat ears &ndash; you're perfectly fine without them.<br>
And remember: Trans rights are human rights.
</p>
<p>
Find us in the fediverse at <a href="https://chaos.social/@c3cat">c3cat@chaos.social</a>.
</p>
</footer>
</body>
</html>

2
rgb-ears.html
View file

@ -10,10 +10,12 @@
<main>
<h1>Addressable LED Catears</h1>
<a href="/">
<picture>
<source srcset="assets/img/c3cat-c3sign-cccamp23-transparent-for-dark.webp" media="(prefers-color-scheme: dark)"/>
<img src="assets/img/c3cat-c3sign-cccamp23-transparent.webp" alt="C3CAT with a cat ear headband around the 'A'" class="hero-img"/>
</picture>
</a>
We started distributing 3D printed cat ears on a large scale a while ago.
At the 37C3 we started adding LEDs to some of them in static colors - you can find the needed parts for that <a href="https://wiki.hamburg.ccc.de/club:c3cat:start">over here</a>.