666 lines
28 KiB
HTML
Executable file
666 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"
|
||
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"
|
||
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."
|
||
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."
|
||
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"
|
||
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"
|
||
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"
|
||
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"
|
||
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"
|
||
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"
|
||
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"
|
||
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"
|
||
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"
|
||
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"
|
||
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"
|
||
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"
|
||
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."
|
||
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."
|
||
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>
|