diff --git a/assets/css/style.css b/assets/css/style.css index 1a91953..a12b283 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,62 +1,95 @@ -: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); + } + + 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; + } } } - -.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; -} 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/index.html b/index.html index 69686ac..e059002 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,41 @@ c3cat + +
@@ -16,9 +51,21 @@

Resources

-

The "original" cat ear model we used was borrowed from Printables. - Since then, some people started to develop an improved and parametrized version with OpenSCAD.

-

See the CCCHH wiki for the latest information on signs, 3D models, etc.

+ + +

Archive

+

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

+

History

A few people from Hamburg started to 3D-print and wear cat ear headbands at EH20 which lead to some "can I get one, too" reactions. diff --git a/rgb-ears-39c3.html b/rgb-ears-39c3.html new file mode 100755 index 0000000..f70561f --- /dev/null +++ b/rgb-ears-39c3.html @@ -0,0 +1,685 @@ + + + + + + + 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. + +
+
+ + + + + + +
+ + + diff --git a/rgb-ears.html b/rgb-ears.html index ea9f6b0..0cb9718 100755 --- a/rgb-ears.html +++ b/rgb-ears.html @@ -10,15 +10,17 @@

Addressable LED Catears

- - - C3CAT with a cat ear headband around the 'A' - + + + + C3CAT with a cat ear headband around the '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 over here. 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.

Base version

@@ -37,36 +39,36 @@ You will need a chromium based browser for the flashing process (Firefox will no Picture of soldered cable
Picture of shrinked tubed cables
Fully shrinked tubed cable
- -

Step 2: Prepare the LED strip

+ +

Step 2: Prepare the LED strip

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): Backside of LED strip
Fully assambled LED strip
- 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.

Step 3: Attach cable to the ESP

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: - Picture with Pins
+ Picture with Pins
Soldered cables (back)
Soldered cables (front)

Step 4: Prepare the case

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. - + heat set insert - +

Step 6: Assemble the case

Now pack the ESP into the case, place the button and fix the cables with hot glue if necessary. - + finished case - +

Step 7: Glue the LED strip to the 3D-Printed catears

Now we are finished the hardware @@ -92,7 +94,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke 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. - +

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.

@@ -127,7 +129,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke
  • connectors
  • small bolts and nuts (I used m2)
    • - +

    Buildsteps

    Electronics and Case
    @@ -136,7 +138,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke

    - Connect the Microphone to the ESP. + Connect the Microphone to the ESP. See here for the pinout. For my INMP441 I've used the following pins : 

    I2S SD: 3
@@ -147,14 +149,14 @@ I2S MCLK: N/A

    But you can pick any supported microphone and are quite flexible in choosing those pins.

    - +

    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.
    My board has another ws2812 LED on `GPIO 21` connected. I use this one as status LED. It's visible evenfrom outside the case.
    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.
    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.

    - +
    Ears
    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. @@ -167,7 +169,7 @@ I2S MCLK: N/A

    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.

    - + @@ -175,7 +177,7 @@ I2S MCLK: N/A

    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.

    - + @@ -213,31 +215,31 @@ Most importantly: experiment! Find out what looks you like. Try out what effects

    Use a different connector as I did

    - +
    No USB power delivery support

    The USB C breakout I used doesn't support USB PD. Use a different module or USB A -> C cables.

    - +
    Too much bass (lol)

    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.

    - +
    More Documentation

    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.

    - +
    Hardware Controlls and Buttons

    Looking at a phone screen is annoying. I'd love a button to cycle presets.

    - +
    Sync

    WLED has the option to sync multiple devices via wifi... I've some plans. -

    +