diff --git a/content/posts/desk-automation-big-arcade-buttons.md b/content/posts/desk-automation-big-arcade-buttons.md index 1777f51..8f31e29 100644 --- a/content/posts/desk-automation-big-arcade-buttons.md +++ b/content/posts/desk-automation-big-arcade-buttons.md @@ -1,9 +1,9 @@ --- title: "Big shiny arcade buttons" date: 2019-11-05T08:20:43+01:00 -draft: true +draft: false summary: Adding buttons to my "smart desk" -images: [/static/img/buttons-aus.jpg, /static/img/buttons-switches.jpg] +images: [/static/img/buttons-aus.jpg, /static/img/buttons-switches-marked.jpg] --- Last [post]({{< ref "/posts/desk-automation.md" >}}) i teased the next upgrade of my smart desk project which are some big arcade buttons to control the light even when my network is down. Well... @@ -12,9 +12,77 @@ I finished that part over the last few days: {{< figure src="/img/buttons-aus.jpg">}} The buttons i did choose for the desk are thous big arcade buttons[^1] as they produce this satisfying click when pressed. They come with an integrated LED and resistor, but -as they are not supposed to be driven by a 3.3 volt microcontroller- they need 12 volt supplied to be fully lit up. For the controller i use a normal USB power supply so i tried to power the LEDs with 5 volts. That made them bright enough so i went with that... -To up the 3.3V logic level from the GPIOs of the controller to 5V i just used a normal 2N2222 NPN-Transistor[^2]. Soldered together the switches + transistor + some cables the "thing" looks something like this: -{{< figure src="/img/buttons-switches.jpg">}} +The button comes in 2 parts which have to be assembled together. The first part is the thing you actually press (which also lets the light pass) and the second part is the Switch+LED combo. To make a neat package i modified the second part. By modified i mean i soldered a transistor to the pins to up the 3.3V logic level from the GPIOs of the controller to 5V needed for the LED. For that i just used a normal 2N2222 NPN-Transistor[^2]. + +Soldered together the switches + transistor + some cables the "thing" looks something like this: +{{< figure src="/img/buttons-switches-marked.jpg">}} + +The transistor is marked red, as the photo is to potato-quality to make it out otherwise :D + +| pin | connected to +| -----------|------ +| 1 | GPIO (Switch) +| 2 | 3.3V +| 3 | 5V +| 4 | GPIO (LED) +| 5 | GND + +after hooking it up the the controller i had to change and add some parts of the configuration yaml of the esphome-firmware: +```yaml +light: + - platform: monochromatic + name: "Rote Led" + output: led_rot + id: rotled + +output: + - platform: ledc + id: led_rot + pin: 14 + +binary_sensor: + - platform: gpio + pin: + number: 12 + inverted: True + mode: INPUT_PULLUP + name: "ButtonRot" + filters: + - delayed_on: 20ms + on_click: + min_length: 5ms + max_length: 500ms + then: + - switch.toggle: relay1 + +switch: + - platform: gpio + pin: + number: 33 + inverted: True + name: "Schreibtischlampe" + id: relay1 + on_turn_on: + then: + - light.turn_on: + id: rotled + transition_length: 200ms + on_turn_off: + then: + - light.turn_off: + id: rotled + transition_length: 500ms +``` + +The added parts in the on\_turn\_{on,off} sections of the switch turn the LED {on,off}. +By hooking them up to the switch activation and not the button press the leds also turn on when the relay gets activated via the webserver. +The "transition_length: ...ms" parameter makes the LED fade in and out smoothly (only works on an PWM GPIO). + +After that there only was a case to design and 3D print. I settled for the classic highly complex[^3] box shape design as you can see in the image above. + +As you can see in the image i have another blue button next the the red one... not realy sure what to do with it right now, if i come up with something i'll probably do another post about it here ;) [^1]: You can find them easily when you search ebay or any other site that sells electronics from china -[^2]: [Sparkfun](https://learn.sparkfun.com/tutorials/transistors/applications-i-switches) describes the basic circuit quite good \ No newline at end of file +[^2]: [Sparkfun](https://learn.sparkfun.com/tutorials/transistors/applications-i-switches) describes the basic circuit quite good +[^3]: "super complex" \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 7403126..ef648d7 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -30,7 +30,7 @@ #background { position: fixed; z-index: -1; - background-color: rgb(63, 18, 18);/*rgb(153, 34, 13);*/ + background-color: rgb(47, 41, 41);/*rgb(153, 34, 13);*/ width: 100%; height: 100%; } @@ -176,6 +176,20 @@ article { text-align: justify; } +table { + margin: auto; + width: 90%; + background: #221d1d; +} + +table, th, td { + padding: 15px; + text-align: left; + border-color: #4c4c4c; + border-collapse: collapse; + border: 1px solid black; + +} article img, article video { max-width: 100%; diff --git a/static/img/buttons-an.jpg b/static/img/buttons-an.jpg new file mode 100644 index 0000000..7e44540 Binary files /dev/null and b/static/img/buttons-an.jpg differ diff --git a/static/img/buttons-anim.gif b/static/img/buttons-anim.gif new file mode 100644 index 0000000..0055cf9 Binary files /dev/null and b/static/img/buttons-anim.gif differ diff --git a/static/img/buttons-aus.jpg b/static/img/buttons-aus.jpg new file mode 100644 index 0000000..94e7de7 Binary files /dev/null and b/static/img/buttons-aus.jpg differ diff --git a/static/img/buttons-switches-marked.jpg b/static/img/buttons-switches-marked.jpg new file mode 100644 index 0000000..e287633 Binary files /dev/null and b/static/img/buttons-switches-marked.jpg differ diff --git a/static/img/buttons-switches.jpg b/static/img/buttons-switches.jpg new file mode 100644 index 0000000..d50bda2 Binary files /dev/null and b/static/img/buttons-switches.jpg differ