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

wip: new rgb guide #9

Draft
lilly wants to merge 7 commits from new-rgb-guide into main
pull from: new-rgb-guide
merge into: c3cat:main
Conversation 2 Commits 7 Files changed 10 +651 -85
10 changed files with 651 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

0
3d-printables.html Normal file
View file

155
assets/css/style.css
View file

@ -1,62 +1,105 @@
:root {
/* Use a shade of the c3cat logos pink, which works nicely as a link color. */
--accent-color-light: #DC049B;
/* A modified version of accent-color-light, which works nicely as a link color
* and with the dark theme */
--accent-color-dark: #dc49b0;
}
@layer base, per-site;
body {
font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
@layer base {
:root {
/* Use a shade of the c3cat logos pink, which works nicely as a link color. */
--accent-color-light: #DC049B;
/* A modified version of accent-color-light, which works nicely as a link color
* and with the dark theme */
--accent-color-dark: #dc49b0;
}
text-align: left;
body {
font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
/* 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;
text-align: left;
line-height: 1.4;
@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;
/* Use dark grey instead of black to be lighter on the eyes. But also a grey
* which still works with the link color nicely. */
--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 */
--bg-color: #1b1b1b;
--fg-color: #ebebeb;
--accent-color: var(--accent-color-dark);
}
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 0 5px;
}
footer {
margin-top: 4rem;
}
img {
width: 100%;
}
a:link, a:visited {
color: var(--accent-color);
padding-inline: 0.1ch;
&:hover:not(:has(img)) {
background-color: var(--accent-color);
color: white;
text-decoration: none;
}
}
u {
text-decoration-color: var(--accent-color);
}
.title {
text-align: center;
}
.hero-img {
max-width: 500px;
display: block;
margin: 0 auto;
}
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;
}
}
pre {
overflow-x: scroll;
}
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 0 5px;
}
footer {
margin-top: 4rem;
}
img {
width: 100%;
}
a:link, a:visited {
color: var(--accent-color-light);
@media (prefers-color-scheme: dark) {
color: var(--accent-color-dark);
}
}
.title {
text-align: center;
}
.hero-img {
max-width: 500px;
display: block;
margin: 0 auto;
}
p.bigger {
font-size: 1.2rem;
}

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

0
catear-bom.html Normal file
View file

BIN
favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

56
index.html
View file

@ -6,6 +6,44 @@
<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: flex;
justify-content: center;
align-items: center;
flex-basis: 45%;
flex-grow: 1;
max-width: 85vw;
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 +54,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 Build Instructions</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.

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

@ -0,0 +1,471 @@
<!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 {
h1>a, h2>a, h3>a, h4>a, h5>a, h6>a {
text-decoration: unset;
padding: 0 0.2ch;
&:hover {
text-decoration: underline;
}
}
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 class="title">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>How much details do you need?</legend>
<input type="radio" id="detail-picker-all" name="detail-grade-picker" value="all" checked>
<label for="detail-picker-all">Hold my hand please &gt~&lt</label>
<input type="radio" id="detail-picker-simplified" name="detail-grade-picker" value="simplified">
<label for="detail-picker-simplified">I soldered before :3</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 <u>soldering equipment</u>, a <u>heatgun</u>, a pair of <u>striping pliers</u>, <u>catears</u> as well as <u>one of our build kits</u>.<br>
If you did not get a hold of one of those kits, take a look at <a href="./catear-bom.html">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>
<div class="detail-hide-short">
<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>
</div>
</section>
<section id="step-1">
<h2>Flash the microcontroller&nbsp<a href="#step-1">§</a></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&nbsp<a href="#step-2">§</a></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&nbsp<a href="#step-3">§</a></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&nbsp<a href="#step-4">§</a></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 detail-hide-short"/>
<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!&nbsp<a href="#step-5">§</a></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&nbsp<a href="#step-6">§</a></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>
</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>

54
rgb-ears.html
View file

@ -10,15 +10,17 @@
<main>
<h1>Addressable LED Catears</h1>
<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 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>.
Over the year some us wanted to build addressable ligth-up catears, with different functions.
We decided to provide one guide for a more basic version and below some modifications to improve it.
We decided to provide one guide for a more basic version and below some modifications to improve it.
<h2>Base version</h2>
@ -37,36 +39,36 @@ You will need a chromium based browser for the flashing process (Firefox will no
<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>
<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.
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/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
@ -92,7 +94,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke
<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>
@ -127,7 +129,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke
<li>connectors</li>
<li>small bolts and nuts (I used m2)</li>
</ul>
<h4>Buildsteps</h4>
<h5>Electronics and Case</h5>
@ -136,7 +138,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke
</picture>
<p>
Connect the Microphone to the ESP.
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
@ -147,14 +149,14 @@ 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"/>
@ -167,7 +169,7 @@ I2S MCLK: N/A</pre>
<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>
@ -175,7 +177,7 @@ I2S MCLK: N/A</pre>
<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>
@ -213,31 +215,31 @@ Most importantly: experiment! Find out what looks you like. Try out what effects
<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>
</p>
</main>
<footer>
<p>