new rgb guide & small homepage restructure #9
77 changed files with 933 additions and 84 deletions
65
3d-printables.html
Normal file
65
3d-printables.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!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" />
|
||||
<link rel="me" href="https://chaos.social/@c3cat" />
|
||||
<title>c3cat</title>
|
||||
|
||||
<style>
|
||||
@layer per-site {
|
||||
.resources-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 1rem;
|
||||
|
||||
&>li {
|
||||
display: block;
|
||||
&>a {
|
||||
display: inline flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
row-gap: 4px;
|
||||
&>img {
|
||||
aspect-ratio: 1/1;
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="container">
|
||||
<main>
|
||||
<h1 class="title">3D Printables</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>
|
||||
|
||||
<ul class="resources-container">
|
||||
<li>
|
||||
<a href="https://www.printables.com/de/model/35076-cat-ears" rel="external">
|
||||
<img alt="A picture of a catear 3D model" src="assets/img/3d-printables/catears-printables.webp">
|
||||
<span>The original catear model from <i>printables.com</i></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</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>
|
||||
|
|
@ -1,62 +1,111 @@
|
|||
: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);
|
||||
padding-inline: 0.1ch;
|
||||
&:hover:not(:has(img)) {
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
u {
|
||||
text-decoration-color: var(--accent-color);
|
||||
}
|
||||
|
||||
ul li::marker {
|
||||
color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
BIN
assets/img/3d-printables/catears-printables.webp
Normal file
BIN
assets/img/3d-printables/catears-printables.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
assets/img/rgb-ears-39c3/10_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/10_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
BIN
assets/img/rgb-ears-39c3/10_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/10_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 546 KiB |
BIN
assets/img/rgb-ears-39c3/10_4960.webp
Normal file
BIN
assets/img/rgb-ears-39c3/10_4960.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
BIN
assets/img/rgb-ears-39c3/11_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/11_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
assets/img/rgb-ears-39c3/11_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/11_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
BIN
assets/img/rgb-ears-39c3/11_5984.webp
Normal file
BIN
assets/img/rgb-ears-39c3/11_5984.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 MiB |
BIN
assets/img/rgb-ears-39c3/12_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/12_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
assets/img/rgb-ears-39c3/12_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/12_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 KiB |
BIN
assets/img/rgb-ears-39c3/12_6133.webp
Normal file
BIN
assets/img/rgb-ears-39c3/12_6133.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
BIN
assets/img/rgb-ears-39c3/13_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/13_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
assets/img/rgb-ears-39c3/13_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/13_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
BIN
assets/img/rgb-ears-39c3/13_5888.webp
Normal file
BIN
assets/img/rgb-ears-39c3/13_5888.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
BIN
assets/img/rgb-ears-39c3/14_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/14_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
BIN
assets/img/rgb-ears-39c3/14_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/14_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 796 KiB |
BIN
assets/img/rgb-ears-39c3/14_2641.webp
Normal file
BIN
assets/img/rgb-ears-39c3/14_2641.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
assets/img/rgb-ears-39c3/15_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/15_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
BIN
assets/img/rgb-ears-39c3/15_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/15_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 KiB |
BIN
assets/img/rgb-ears-39c3/15_2757.webp
Normal file
BIN
assets/img/rgb-ears-39c3/15_2757.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
assets/img/rgb-ears-39c3/16_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/16_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
BIN
assets/img/rgb-ears-39c3/16_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/16_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 413 KiB |
BIN
assets/img/rgb-ears-39c3/16_3064.webp
Normal file
BIN
assets/img/rgb-ears-39c3/16_3064.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
BIN
assets/img/rgb-ears-39c3/17_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/17_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
assets/img/rgb-ears-39c3/17_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/17_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 453 KiB |
BIN
assets/img/rgb-ears-39c3/17_6477.webp
Normal file
BIN
assets/img/rgb-ears-39c3/17_6477.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9 MiB |
BIN
assets/img/rgb-ears-39c3/18_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/18_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
BIN
assets/img/rgb-ears-39c3/18_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/18_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 556 KiB |
BIN
assets/img/rgb-ears-39c3/18_7560.webp
Normal file
BIN
assets/img/rgb-ears-39c3/18_7560.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
BIN
assets/img/rgb-ears-39c3/19_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/19_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
assets/img/rgb-ears-39c3/19_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/19_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
BIN
assets/img/rgb-ears-39c3/19_7352.webp
Normal file
BIN
assets/img/rgb-ears-39c3/19_7352.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
BIN
assets/img/rgb-ears-39c3/1_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/1_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
assets/img/rgb-ears-39c3/1_1919.webp
Normal file
BIN
assets/img/rgb-ears-39c3/1_1919.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
assets/img/rgb-ears-39c3/1_6928.webp
Normal file
BIN
assets/img/rgb-ears-39c3/1_6928.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
BIN
assets/img/rgb-ears-39c3/20_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/20_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
assets/img/rgb-ears-39c3/20_1919.webp
Normal file
BIN
assets/img/rgb-ears-39c3/20_1919.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
BIN
assets/img/rgb-ears-39c3/20_5944.webp
Normal file
BIN
assets/img/rgb-ears-39c3/20_5944.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
BIN
assets/img/rgb-ears-39c3/21_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/21_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
BIN
assets/img/rgb-ears-39c3/21_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/21_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 263 KiB |
BIN
assets/img/rgb-ears-39c3/21_7960.webp
Normal file
BIN
assets/img/rgb-ears-39c3/21_7960.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 MiB |
BIN
assets/img/rgb-ears-39c3/22_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/22_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
assets/img/rgb-ears-39c3/22_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/22_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
BIN
assets/img/rgb-ears-39c3/22_6845.webp
Normal file
BIN
assets/img/rgb-ears-39c3/22_6845.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 MiB |
BIN
assets/img/rgb-ears-39c3/2_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/2_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
assets/img/rgb-ears-39c3/2_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/2_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
BIN
assets/img/rgb-ears-39c3/2_3032.webp
Normal file
BIN
assets/img/rgb-ears-39c3/2_3032.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 914 KiB |
BIN
assets/img/rgb-ears-39c3/3_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/3_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
assets/img/rgb-ears-39c3/3_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/3_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
BIN
assets/img/rgb-ears-39c3/3_3273.webp
Normal file
BIN
assets/img/rgb-ears-39c3/3_3273.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 864 KiB |
BIN
assets/img/rgb-ears-39c3/4_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/4_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
BIN
assets/img/rgb-ears-39c3/4_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/4_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 794 KiB |
BIN
assets/img/rgb-ears-39c3/4_3336.webp
Normal file
BIN
assets/img/rgb-ears-39c3/4_3336.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
assets/img/rgb-ears-39c3/5_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/5_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
BIN
assets/img/rgb-ears-39c3/5_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/5_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 536 KiB |
BIN
assets/img/rgb-ears-39c3/5_3200.webp
Normal file
BIN
assets/img/rgb-ears-39c3/5_3200.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
assets/img/rgb-ears-39c3/6_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/6_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
assets/img/rgb-ears-39c3/6_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/6_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 437 KiB |
BIN
assets/img/rgb-ears-39c3/6_6480.webp
Normal file
BIN
assets/img/rgb-ears-39c3/6_6480.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 MiB |
BIN
assets/img/rgb-ears-39c3/7_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/7_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 187 KiB |
BIN
assets/img/rgb-ears-39c3/7_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/7_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 478 KiB |
BIN
assets/img/rgb-ears-39c3/7_5976.webp
Normal file
BIN
assets/img/rgb-ears-39c3/7_5976.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 MiB |
BIN
assets/img/rgb-ears-39c3/8_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/8_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
BIN
assets/img/rgb-ears-39c3/8_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/8_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 503 KiB |
BIN
assets/img/rgb-ears-39c3/8_5904.webp
Normal file
BIN
assets/img/rgb-ears-39c3/8_5904.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 MiB |
BIN
assets/img/rgb-ears-39c3/9_1280.webp
Normal file
BIN
assets/img/rgb-ears-39c3/9_1280.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
BIN
assets/img/rgb-ears-39c3/9_1920.webp
Normal file
BIN
assets/img/rgb-ears-39c3/9_1920.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 479 KiB |
BIN
assets/img/rgb-ears-39c3/9_5824.webp
Normal file
BIN
assets/img/rgb-ears-39c3/9_5824.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 MiB |
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
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
55
index.html
55
index.html
|
|
@ -6,6 +6,44 @@
|
|||
<link rel="stylesheet" href="assets/css/style.css" />
|
||||
<link rel="me" href="https://chaos.social/@c3cat" />
|
||||
<title>c3cat</title>
|
||||
|
||||
<style>
|
||||
/* site-specific styles */
|
||||
|
||||
@layer per-site {
|
||||
.resources-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1ch;
|
||||
row-gap: 1rem;
|
||||
justify-content: space-around;
|
||||
align-items: stretch;
|
||||
padding-left: 0;
|
||||
|
||||
&>a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-basis: 45%;
|
||||
flex-grow: 1;
|
||||
max-width: 85vw;
|
||||
border: 1px solid var(--accent-color);
|
||||
padding: 8px;
|
||||
text-decoration: unset;
|
||||
color: var(--fg-color);
|
||||
background-color: color-mix(in hsl, var(--bg-color) 90%, var(--fg-color) 10%);
|
||||
min-height: 2rem;
|
||||
text-align: center;
|
||||
font-size: larger;
|
||||
|
||||
&:hover {
|
||||
background-color: color-mix(in hsl, var(--bg-color) 80%, var(--fg-color) 20%);
|
||||
box-shadow: 4px 4px 6px var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="container">
|
||||
<main>
|
||||
|
|
@ -16,9 +54,20 @@
|
|||
</picture>
|
||||
|
||||
<h2>Resources</h2>
|
||||
<p class="bigger">The "original" cat ear model we used was borrowed from <a href="https://www.printables.com/de/model/35076-cat-ears">Printables</a>.
|
||||
Since then, some people started to develop an <a href="https://git.hamburg.ccc.de/c3cat/scad">improved and parametrized version</a> with OpenSCAD.</p>
|
||||
<p class="bigger">See the <a href="https://wiki.hamburg.ccc.de/club:c3cat:start">CCCHH wiki</a> for the latest information on signs, 3D models, etc.</p>
|
||||
<ul class="resources-container">
|
||||
<a href="./rgb-ears-39c3.html">39C3 RGB Catear Build Instructions</a>
|
||||
<!-- <a href="./catear-bom.html">LED Catear BOM</a> -->
|
||||
<a href="./3d-printables.html">3D Printing Files</a>
|
||||
</ul>
|
||||
|
||||
<h3>Archive</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="./rgb-ears.html">EH22 Catear Guide</a></li>
|
||||
<li><a href="https://wiki.hamburg.ccc.de/club:c3cat:start">CCCHH Wiki page</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>History</h2>
|
||||
<p>A few people from Hamburg started to 3D-print and wear cat ear headbands at <a href="https://eh20.easterhegg.eu">EH20</a> which lead to some "can I get one, too" reactions.
|
||||
|
|
|
|||
684
rgb-ears-39c3.html
Executable file
684
rgb-ears-39c3.html
Executable file
|
|
@ -0,0 +1,684 @@
|
|||
<!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>
|
||||
|
|
@ -10,15 +10,17 @@
|
|||
<main>
|
||||
<h1>Addressable LED Catears</h1>
|
||||
|
||||
<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 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>
|
||||
|
||||
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 <a href="https://wiki.hamburg.ccc.de/club:c3cat:start">over here</a>.
|
||||
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.
|
||||
|
||||
<h2>Base version</h2>
|
||||
|
||||
|
|
@ -37,36 +39,36 @@ You will need a chromium based browser for the flashing process (Firefox will no
|
|||
<img src="assets/img/b1.jpeg" alt="Picture of soldered cable" class="hero-img"/> </br>
|
||||
<img src="assets/img/b2.jpeg" alt="Picture of shrinked tubed cables " class="hero-img"/> </br>
|
||||
<img src="assets/img/b3.jpeg" alt="Fully shrinked tubed cable" class="hero-img"/> </br>
|
||||
|
||||
|
||||
<h3>Step 2: Prepare the LED strip</h3>
|
||||
|
||||
<h3>Step 2: Prepare the LED strip</h3>
|
||||
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):
|
||||
|
||||
<img src="assets/img/b4.jpeg" alt="Backside of LED strip" class="hero-img"/> </br>
|
||||
<img src="assets/img/b5.jpeg" alt="Fully assambled LED strip" class="hero-img"/> </br>
|
||||
|
||||
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.
|
||||
|
||||
<h3>Step 3: Attach cable to the ESP</h3>
|
||||
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:
|
||||
|
||||
<img src="assets/img/b6.jpeg" alt="Picture with Pins" class="hero-img"/> </br>
|
||||
<img src="assets/img/b6.jpeg" alt="Picture with Pins" class="hero-img"/> </br>
|
||||
<img src="assets/img/b7.jpeg" alt="Soldered cables (back)" class="hero-img"/> </br>
|
||||
<img src="assets/img/b8.jpeg" alt="Soldered cables (front)" class="hero-img"/> </br>
|
||||
|
||||
<h3>Step 4: Prepare the case</h3>
|
||||
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.
|
||||
|
||||
|
||||
<img src="assets/img/b9.jpeg" alt="heat set insert" class="hero-img"/>
|
||||
|
||||
|
||||
<h3>Step 6: Assemble the case</h3>
|
||||
Now pack the ESP into the case, place the button and fix the cables with hot glue if necessary.
|
||||
|
||||
|
||||
|
||||
<img src="assets/img/b10.jpeg" alt="finished case" class="hero-img"/>
|
||||
|
||||
|
||||
<h3>Step 7: Glue the LED strip to the 3D-Printed catears</h3>
|
||||
Now we are finished the hardware
|
||||
|
||||
|
|
@ -92,7 +94,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke
|
|||
<picture>
|
||||
<img src="assets/img/party-2.webp" alt="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." class="blog-img"/>
|
||||
</picture>
|
||||
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
|
@ -127,7 +129,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke
|
|||
<li>connectors</li>
|
||||
<li>small bolts and nuts (I used m2)</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Buildsteps</h4>
|
||||
|
||||
<h5>Electronics and Case</h5>
|
||||
|
|
@ -136,7 +138,7 @@ you can configure a AP-Password to secure your catears against those Eggdy Hacke
|
|||
</picture>
|
||||
|
||||
<p>
|
||||
Connect the Microphone to the ESP.
|
||||
Connect the Microphone to the ESP.
|
||||
See <a href="https://mm.kno.wled.ge/WLEDSR/Digital-Microphone-Hookup/">here</a> for the pinout. For my INMP441 I've used the following pins :
|
||||
</p>
|
||||
<pre>I2S SD: 3
|
||||
|
|
@ -147,14 +149,14 @@ I2S MCLK: N/A</pre>
|
|||
<p>
|
||||
But you can pick any supported microphone and are quite flexible in choosing those pins.
|
||||
</p>
|
||||
|
||||
|
||||
<p>
|
||||
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.<br>
|
||||
My board has another ws2812 LED on `GPIO 21` connected. I use this one as status LED. It's visible evenfrom outside the case.<br>
|
||||
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.<br>
|
||||
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.
|
||||
</p>
|
||||
|
||||
|
||||
<h5>Ears</h5>
|
||||
<picture>
|
||||
<img src="assets/img/party-5.webp" alt="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." class="blog-img"/>
|
||||
|
|
@ -167,7 +169,7 @@ I2S MCLK: N/A</pre>
|
|||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
|
||||
<picture>
|
||||
<img src="assets/img/party-6.webp" alt="" class="blog-img"/>
|
||||
</picture>
|
||||
|
|
@ -175,7 +177,7 @@ I2S MCLK: N/A</pre>
|
|||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
|
||||
<picture>
|
||||
<img src="assets/img/party-7.webp" alt="" class="blog-img"/>
|
||||
</picture>
|
||||
|
|
@ -213,31 +215,31 @@ Most importantly: experiment! Find out what looks you like. Try out what effects
|
|||
<p>
|
||||
Use a different connector as I did
|
||||
</p>
|
||||
|
||||
|
||||
<h5>No USB power delivery support</h5>
|
||||
<p>
|
||||
The USB C breakout I used doesn't support USB PD. Use a different module or USB A -> C cables.
|
||||
</p>
|
||||
|
||||
|
||||
<h5>Too much bass (lol)</h5>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
|
||||
<h5>More Documentation</h5>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
|
||||
<h5>Hardware Controlls and Buttons</h5>
|
||||
<p>
|
||||
Looking at a phone screen is annoying. I'd love a button to cycle presets.
|
||||
</p>
|
||||
|
||||
|
||||
<h5>Sync</h5>
|
||||
<p>
|
||||
WLED has the option to sync multiple devices via wifi... I've some plans.
|
||||
</p>
|
||||
</p>
|
||||
</main>
|
||||
<footer>
|
||||
<p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue