lilly
9de06a2455
All checks were successful
/ build (pull_request) Successful in 58s
This way, the user agent can decide when it wants to load the image. Usually this depends on how close the image is to the viewport.
684 lines
28 KiB
HTML
Executable file
684 lines
28 KiB
HTML
Executable file
<!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: 1.5rem;
|
||
|
||
li {
|
||
margin-top: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
|
||
&::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;
|
||
}
|
||
|
||
img {
|
||
margin-bottom: 3rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
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;
|
||
}
|
||
}
|
||
|
||
/* 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">39C3 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 >~<</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; flex-direction: column; justify-content: center; align-items: center;">
|
||
<img
|
||
class="hero-img detail-hide-short"
|
||
style="aspect-ratio: 16/10;"
|
||
alt="A picture of an assembled set of LED catears"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/22_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/22_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/22_6845.webp 6845w"
|
||
/>
|
||
<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="#kit-content">Kit Content</a></li>
|
||
<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">Finalize the Assembly</a></li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="kit-content" class="detail-hide-short">
|
||
<h2>Kit Content <a href="#kit-content">§</a></h2>
|
||
<p>
|
||
Out kits contain the following content:
|
||
</p>
|
||
<img
|
||
class="hero-img"
|
||
style="aspect-ratio: 16/10;"
|
||
alt="A picture of the kit content layed out on a rat mat. It contains the items listed below"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/1_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/1_1919.webp 1919w,
|
||
assets/img/rgb-ears-39c3/1_6928.webp 6982w"
|
||
/>
|
||
<ul>
|
||
<li>A 3D printed case for the microcontroller, here shown in bright green</li>
|
||
<li>An ESP microcontroller</li>
|
||
<li>An RGB LED strip, shown at the very bottom of the picture</li>
|
||
<li>One pluggable connector with three separate wires connected to each end separated into two pieces and shown at the top of the pictures</li>
|
||
<li>One 10cm long, clear piece of heatshrink</li>
|
||
<li>One 10cm long, small, black piece of heatshrink</li>
|
||
<li>One 10cm long, large, black piece of heatshrink</li>
|
||
<li>One long cable</li>
|
||
</ul>
|
||
</section>
|
||
|
||
|
||
<section id="step-1">
|
||
<h2>Flash the microcontroller <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="https://install.wled.me/" 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 <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.
|
||
</p>
|
||
<p class="detail-hide-short detail-hide-simplified">
|
||
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.
|
||
</p>
|
||
<p class="detail-hide-short">
|
||
Make sure to <u>solder to the <b>input</b> side of the LED strip</u>.
|
||
</p>
|
||
|
||
<figure class="detail-hide-short detail-hide-simplified">
|
||
<img
|
||
class="hero-img"
|
||
style="aspect-ratio: 16/10;"
|
||
width=500
|
||
alt="A picture of the backside of an LED strip exposed. The ou label is visible on the part of it not connected to another strip segment."
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/2_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/2_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/2_3032.webp 3032w"
|
||
/>
|
||
<figcaption>The <u>wrong</u> side of the LED strip demontrated by the <q>ou</q> (out) label being on the outside.</figcaption>
|
||
</figure>
|
||
<figure class="detail-hide-short detail-hide-simplified">
|
||
<img
|
||
class="hero-img"
|
||
style="aspect-ratio: 16/10;"
|
||
width=500
|
||
alt="A picture of the backside of an LED strip exposed. The in label is visible on the part of it not connected to another strip segment."
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/3_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/3_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/3_3273.webp 3273w"
|
||
/>
|
||
<figcaption>The <u>correct</u> side of the LED strip demontrated by the <q>in</q> label being on the outside.</figcaption>
|
||
</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.
|
||
|
||
<p class="detail-hide-simplified">
|
||
Strip about 1cm of insulation from one end of the long cable using your striping pliers.<br>
|
||
The three cores inside should be stripped with something softer and finer. Your fingernails are excellent for this purpose.
|
||
</p>
|
||
<img
|
||
class="hero-img detail-hide-simplified"
|
||
style="aspect-ratio: 16/10;"
|
||
width=500
|
||
alt="A picture of one end of the long wire but the insulation has been stripped off"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/4_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/4_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/4_3336.webp 3336w"
|
||
/>
|
||
</label>
|
||
<input type="checkbox" id="prepare-led-cable">
|
||
</div>
|
||
</li>
|
||
|
||
<li class="detail-hide-short">
|
||
<div>
|
||
<label for="expose-led-contacts">
|
||
<span>Expose the contacts of the LED strip.</span>
|
||
|
||
<p class="detail-hide-simplified">
|
||
Peel back the protective paper from the <q>in</q> end of the LED strip.
|
||
Also peel back the glue covering the protectors but only from the contacts, not from the whole strip segments.
|
||
</p>
|
||
</label>
|
||
<input type="checkbox" id="expose-led-contacts">
|
||
</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-block: 1rem;">
|
||
<dt>Red</dt><dd>+5V</dd>
|
||
<dt>Yellow</dt><dd>Data</dd>
|
||
<dt>Black</dt><dd>Ground</dd>
|
||
</dl>
|
||
<img
|
||
class="hero-img detail-hide-simplified detail-hide-short"
|
||
style="aspect-ratio: 16/10;"
|
||
width=500
|
||
alt="A picture of the long wire soldered to the LED strip"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/5_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/5_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/5_3200.webp 3200w"
|
||
/>
|
||
</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 <u>2cm</u> piece of the <u>large black heatshrink</u> over the soldered connection.
|
||
|
||
<p class="detail-hide-simplified">
|
||
You need to cut the 2cm piece off the included heatshrink yourself.
|
||
To apply it, place it over the soldering point so that all bits of connective material are covered but so that you hide as few LEDs as you can manage.
|
||
In that position, use your heat gun to fix everything into place.
|
||
</p>
|
||
|
||
<img
|
||
class="hero-img detail-hide-simplified"
|
||
style="aspect-ratio: 16/10;"
|
||
width=500
|
||
alt="A picture of the led-to-cable-connection but with a heatshrink over the soldering points"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/12_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/12_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/12_6133.webp 6133w"
|
||
/>
|
||
</label>
|
||
<input type="checkbox" id="solder-heatshrink-to-led-strip">
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
|
||
|
||
<section id="step-3">
|
||
<h2>Solder Cable to pluggable connector <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 unsoldered end of the long cable and grab the <u>male end of the plugs</u><span class="detail-hide-simplified"> (the one with the pins)</span>.
|
||
</label>
|
||
<input type="checkbox" id="prepare-led-cable2">
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<div>
|
||
<label for="prepare-heatshrinks-on-connector">
|
||
<span>
|
||
Put the remainder of the large black heatshrink on the long cable.
|
||
Also put one equally long piece of the small black heatshrink on each of the pluggable connectors cables.
|
||
Do this <u>without applying heat</u>.
|
||
</span>
|
||
|
||
<p class="detail-hide-simplified detail-hide-short">
|
||
The small heatshrinks need to be put in place now because they cannot be applied after soldering.
|
||
</p>
|
||
|
||
<img
|
||
class="hero-img detail-hide-simplified detail-hide-short"
|
||
style="aspect-ratio: 16/10;"
|
||
width=500
|
||
alt="A picture of the heatshrinks prepared as described"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/9_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/9_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/9_5824.webp 5842w"
|
||
/>
|
||
</label>
|
||
<input type="checkbox" id="prepare-heatshrinks-on-connector">
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<div>
|
||
<label for="solder-to-connector">
|
||
Solder all the cable cores together in pairs
|
||
<span class="detail-hide-default detail-show-short"> and apply the prepared heatshrink afterwards.</span>.
|
||
We use these combinations:
|
||
<dl class="key-value" style="margin-top: 1ch;">
|
||
<dt>Red</dt><dd>Red</dd>
|
||
<dt>Black</dt><dd>Black</dd>
|
||
<dt>Yellow</dt><dd>White</dd>
|
||
</dl>
|
||
|
||
<img
|
||
class="hero-img detail-hide-simplified detail-hide-short"
|
||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||
width=500
|
||
alt="A picture of the pluggable connector cables soldered to the cores of the long cable"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/10_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/10_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/10_4960.webp 4960w"
|
||
/>
|
||
</label>
|
||
<input type="checkbox" id="solder-to-connector">
|
||
</div>
|
||
</li>
|
||
|
||
<li class="detail-hide-short">
|
||
<div>
|
||
<label for="heatshrink-to-connector-long-cable-side">
|
||
<span>Apply the prepared heatshrinks.</span>
|
||
<span class="detail-hide-short detail-hide-simplified">
|
||
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.
|
||
</span>
|
||
|
||
<img
|
||
class="hero-img detail-hide-simplified detail-hide-short"
|
||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||
width=500
|
||
alt="A picture of the connection between long cable and plug where each core is protected by an individual heatshrink"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/11_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/11_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/11_5984.webp 5984w"
|
||
/>
|
||
<img
|
||
class="hero-img detail-hide-simplified detail-hide-short"
|
||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||
width=500
|
||
alt="A picture of the connection between long cable and plug where the connection is protected as a whole by one heatshrink"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/13_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/13_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/13_5888.webp 5888w"
|
||
/>
|
||
</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 <a href="#step-4">§</a></h2>
|
||
<p>
|
||
Now you need to solder the other (female) part of the pluggable connector to your microcontroller.
|
||
</p>
|
||
<div style="display: flex; flex-grow: 1; flex-wrap: wrap;">
|
||
<img
|
||
class="detail-hide-short detail-hide-short detail-hide-simplified"
|
||
style="aspect-ratio: 1/1; flex-basis: 300px;"
|
||
width=300
|
||
alt="The front side of the included microcontroller"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/14_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/14_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/14_2641.webp 2641w"
|
||
/>
|
||
<img
|
||
class="detail-hide-short detail-hide-simplified"
|
||
style="aspect-ratio: 1/1; max-width: 300px;"
|
||
width=300
|
||
alt="The backside of the included microcontroller"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/15_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/15_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/15_2757.webp 2757w"
|
||
/>
|
||
</div>
|
||
<ol class="step-by-step-instructions">
|
||
|
||
<li>
|
||
<div>
|
||
<label for="solder-plug-to-esp">
|
||
Solder the female side of the pluggable connector to the microcontroller.
|
||
|
||
<dl class="key-value" style="margin-block: 1rem;">
|
||
<dt>Red</dt><dd>5V</dd>
|
||
<dt>Black</dt><dd>Ground</dd>
|
||
<dt>White</dt><dd>GPIO 2</dd>
|
||
</dl>
|
||
|
||
<img
|
||
class="detail-hide-simplified detail-hide-short"
|
||
style="aspect-ratio: 16/10;"
|
||
width=500
|
||
alt="Picture of the cables of the pluggable connector soldered to the microcontroller"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/16_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/16_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/16_3064.webp 3064w"
|
||
/>
|
||
</label>
|
||
<input type="checkbox" id="solder-plug-to-esp">
|
||
</div>
|
||
</li>
|
||
</ol>
|
||
</section>
|
||
|
||
|
||
<section id="step-5">
|
||
<h2>Finalize the Assembly <a href="#step-6">§</a></h2>
|
||
<ol class="step-by-step-instructions">
|
||
|
||
<li>
|
||
<div>
|
||
<label for="place-esp-in-case">
|
||
<span>Place the microcontroller in the included case.</span>
|
||
|
||
<img
|
||
class="hero-img detail-hide-short"
|
||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||
width=500
|
||
alt="Picture of the microcontroller nested into the open case"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/17_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/17_1920.webp w,
|
||
assets/img/rgb-ears-39c3/17_6477.webp 6477w"
|
||
/>
|
||
</label>
|
||
<input type="checkbox" id="place-esp-in-case">
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<div>
|
||
<label for="prepare-heatshrinks-on-led-strip">
|
||
<span>Cut off <u>two 1cm long pieces of the clear heatshrink</u> and put them on long cable of the LED strip <b>without heating</b>.</span>
|
||
<img
|
||
class="hero-img detail-hide-short detail-hide-simplified"
|
||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||
width=500
|
||
alt="Picture of the microcontroller nested into the open case"
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/19_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/19_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/19_7352.webp 7352w"
|
||
/>
|
||
</label>
|
||
<input type="checkbox" id="prepare-heatshrinks-on-led-strip">
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<div>
|
||
<label for="glue-leds-to-catears">
|
||
<span>Attach the LED strip onto your favourite pair of catears.</span>
|
||
<span class="detail-hide-short">
|
||
The end of the LED strip should align with the outer corner of one of the ears.
|
||
After you have aligned the first part, glue the remaining strip firmly onto the ears.
|
||
</span>
|
||
|
||
<p class="detail-hide-simplified detail-hide-short">
|
||
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.
|
||
</p>
|
||
|
||
<img
|
||
class="hero-img detail-hide-short"
|
||
style="aspect-ratio: 16/10;"
|
||
width=500
|
||
alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/20_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/20_1919.webp 1919w,
|
||
assets/img/rgb-ears-39c3/20_5944.webp 5944w"
|
||
/>
|
||
|
||
</label>
|
||
<input type="checkbox" id="glue-leds-to-catears">
|
||
</div>
|
||
</li>
|
||
|
||
<li>
|
||
<div>
|
||
<label for="heatshrink-fasten-led-strip"
|
||
<span>
|
||
To secure the LED strip, pull the two 1cm pieces of clear heatshrink over the ends and apply them there.
|
||
Additionally, use the larger part of the clear heatshrink to secure the long cable to one of the ear holders.
|
||
</span>
|
||
<p class="detail-hide-short">
|
||
Be careful to not apply too much heat. Otherwise, the plastic of the catears themselves might start to melt.
|
||
</p>
|
||
<img
|
||
class="hero-img detail-hide-short"
|
||
style="aspect-ratio: 16/10; margin-top: 1rem;"
|
||
width=500
|
||
alt="Picture of one cat ear with the LED strip partially applied. The image is focused on the alignment of the LED strip with the catear."
|
||
loading="lazy"
|
||
srcset="assets/img/rgb-ears-39c3/21_1280.webp 1280w,
|
||
assets/img/rgb-ears-39c3/21_1920.webp 1920w,
|
||
assets/img/rgb-ears-39c3/21_7960.webp 7960w"
|
||
/>
|
||
</label>
|
||
<input type="checkbox" id="heatshrink-fasten-led-strip">
|
||
</div>
|
||
</li>
|
||
|
||
</ol>
|
||
|
||
<p>
|
||
Congratulations! You now have a freely customizable pair of RGB catears :3
|
||
</p>
|
||
<p>
|
||
Don't feel pressured to wear cat ears – you're perfectly fine without them.<br>
|
||
And remember: Trans rights are human rights.
|
||
</p>
|
||
</section>
|
||
</main>
|
||
<footer>
|
||
<p>
|
||
Find us in the fediverse at <a href="https://chaos.social/@c3cat">c3cat@chaos.social</a>.
|
||
</p>
|
||
</footer>
|
||
</body>
|
||
</html>
|