wip: new rgb guide #9
7 changed files with 499 additions and 0 deletions
commit
a785c0051d
SSH key fingerprint:
SHA256:y9T5GFw2A20WVklhetIxG1+kcg/Ce0shnQmbu1LQ37g
0
3d-printables.html
Normal file
0
3d-printables.html
Normal file
|
|
@ -74,4 +74,32 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
assets/img/rgb-guide-esp-labeled.jpeg
Normal file
BIN
assets/img/rgb-guide-esp-labeled.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
assets/img/rgb-guide-soldered-isolated-strip.jpeg
Normal file
BIN
assets/img/rgb-guide-soldered-isolated-strip.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
assets/img/rgb-guide-strip.webp
Normal file
BIN
assets/img/rgb-guide-strip.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 571 KiB |
0
catear-bom.html
Normal file
0
catear-bom.html
Normal file
471
rgb-ears-39c3.html
Executable file
471
rgb-ears-39c3.html
Executable 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 >~<</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 <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 <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 <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 <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! <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 <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 – 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue