diff --git a/assets/css/style.css b/assets/css/style.css index e2ea1c4..e5974a7 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -74,4 +74,28 @@ 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; + } + } } diff --git a/assets/img/rgb-guide-esp-labeled.jpeg b/assets/img/rgb-guide-esp-labeled.jpeg new file mode 100644 index 0000000..b6dc08a Binary files /dev/null and b/assets/img/rgb-guide-esp-labeled.jpeg differ diff --git a/assets/img/rgb-guide-soldered-isolated-strip.jpeg b/assets/img/rgb-guide-soldered-isolated-strip.jpeg new file mode 100644 index 0000000..dee4243 Binary files /dev/null and b/assets/img/rgb-guide-soldered-isolated-strip.jpeg differ diff --git a/assets/img/rgb-guide-strip.webp b/assets/img/rgb-guide-strip.webp new file mode 100644 index 0000000..5e1dd4d Binary files /dev/null and b/assets/img/rgb-guide-strip.webp differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..800f98d Binary files /dev/null and b/favicon.ico differ diff --git a/rgb-ears-39c3.html b/rgb-ears-39c3.html new file mode 100755 index 0000000..a33de05 --- /dev/null +++ b/rgb-ears-39c3.html @@ -0,0 +1,693 @@ + + + + + + + c3cat + + + + +
+

RGB Catear Build Instructions

+ + + + + C3CAT with a cat ear headband around the 'A' + + + +
+
+ Choose the grade of details you want this guide to appear in + + + + + + + + +
+ +

+ This guide aims to explain in simple terms how to assemble the c3cat catear build kit. + To follow it, you need soldering equipment, a heatgun, a pair of striping pliers as well as one of our build kits.
+ If you did not get a hold of one of those kits, take a look at our BOM. +

+

+ The general project assembly looks like this where each of the components must be connected via soldering points. +

+
+ 
+┌─────┐                          ╭───╮
+│ ESP ├┄┄╼ ╾┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄│   │
+└─────┘
+         ╱ ╲         ╱ ╲          ╱ ╲
+     pluggable      long         catear
+     connector      cable        & leds
+
+
+ +

+ Inside this guide, you will find the following content +

+ +
+ + +
+

Flash the microcontroller §

+

+ We recommend to use WLED 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. +

+
    +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
  3. +
    + + +
    +
    4. + +
  4. +
    + + +
    +
    5. +
+
+ + +
+

Solder cables to LED strip §

+

+ One of the most important steps is to electircally connect the microcontroller to the LED strip. + We will start with the LED side. + + +

+ +
+ TODO: Make the images appear horizontally on large screens + Picture of the backside of an LED strip with its contacts exposed. Three labeled arrows explain which connector carries what + TODO: Actually take a picture of the cables too + Picture of a three-core wire with its insulation stripped off. The three cores are labeled similarly to the picture of the LED strip +
+
    + +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
  3. +
    + + +
    +
    4. +
+
+ + +
+

Solder Cable to pluggable connector §

+

+ The other side of the long cable now needs to be connected to the pluggable connector. +

+
    + +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
  3. +
    + + +
    +
    4. + +
+
+ + +
+

Solder Pluggable Connector to Microcontroller §

+

+ Now you need to solder the other part of the pluggable connector to your microcontroller. +

+

+ TODO: Replace picture with actual ESP +

+ Picture of the microcontroller with labeled arrows pointing to the relevant contacts + +
    + +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
  3. +
    + + +
    +
    4. + +
+
+ + +
+

Test It! §

+

+ 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. +

+
    +
  1. +
    + + +
    +
    2. +
+
+ + +
+

Finalize the Assembly §

+
    + +
  1. +
    + + +
    +
    2. + +
  2. +
    + + +
    +
    3. + +
+
+ + + + + + +
+ + +