# Simple control using momentary buttons

**URL:** <https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615>\
**Category:** Ideas and Tips\
**Tags:** tutorial, examples\
**Created:** [November 5, 2022, 1:06am UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615 "2022-11-05T01:06:13Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![misterconnolly](https://forum.electromage.com/user_avatar/forum.electromage.com/misterconnolly/32/2662_2.png) [@misterconnolly](https://forum.electromage.com/u/misterconnolly)\
**Post date:** [November 5, 2022, 1:06am UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/1 "2022-11-05T01:06:14Z")

</div>

Sometimes I want a simple button to perform a specialized function. While the current onboard button is incredibly useful, the functionality that it offers cannot be customized. I had some project ideas that required one or more custom inputs, so I decided to use the available GPIO digital input pins with momentary buttons.

The following examples demonstrate how I’ve been implementing buttons in costumes and other projects lately.

## Example - Basic Button

Here I connected a momentary button to the 3.3v power pin and GPIO pin 26 (1026).

[![](https://img.youtube.com/vi/Sc6yFu0kyzg/maxresdefault.jpg "Pixelblaze with momentary button") ](https://www.youtube.com/watch?v=Sc6yFu0kyzg)

To make use of this, I created the following pattern that reads the state of the pin and behaves conditionally based on `buttonValue`.

```auto
// Example of a momentary button connected to a GPIO pin
//
// Each time the button is pressed, the value of 'buttonValue' 
// should be 1

export var buttonValue // Use export to watch values in the PixelBlaze editor

var BUTTON_PIN = 26

pinMode(BUTTON_PIN, INPUT_PULLDOWN)

export function beforeRender(delta) {
    buttonValue = digitalRead(BUTTON_PIN);
}

export function render(index) {
    hsv(.0, 0, 0)
  
    if (buttonValue == 1) {
        hsv(.97, 1, 1) // Set color if button is pressed
    }
}

```

* * *

## Example - Toggle Button

One step further is to create a button with toggle behavior.

[![](https://img.youtube.com/vi/h_ebCJ5h0C4/maxresdefault.jpg "Pixelblaze toggle with momentary button") ](https://www.youtube.com/watch?v=h_ebCJ5h0C4)

The toggle behavior is achieved by using the value of `buttonToggle`.

```auto
// Example of how to create a logical toggle using a momentary 
// button connected to a GPIO pin.
//
// Each time the button is pressed, the value of 'buttonToggle'
// alternates between 0 and 1.
//
// 0 == OFF
// 1 == ON

export var buttonValue, buttonPressed, buttonToggle // Use export to watch values in the PixelBlaze editor

var BUTTON_PIN = 26
pinMode(BUTTON_PIN, INPUT_PULLDOWN)

var TOGGLE_OFF = 0
var TOGGLE_ON = 1

export function beforeRender(delta) {
    buttonValue = digitalRead(BUTTON_PIN)
    if (buttonValue == 1) {
        if (buttonPressed == 0) {
            buttonPressed = 1
            buttonToggle = (buttonToggle == TOGGLE_OFF) ? TOGGLE_ON : TOGGLE_OFF
        }
    } else {
        buttonPressed = 0
    }
}

export function render(index) {

    hsv(.0, 0, 0)

    if (buttonToggle == TOGGLE_ON) {
        hsv(.97, 1, 1) // Set color if button toggle is on
    }
}

```

* * *

## Example - Multiple Buttons

Either button style can be implemented multiple times to create more inputs.

[![](https://img.youtube.com/vi/NzEHmU0Cv3E/maxresdefault.jpg "Pixelblaze with multiple momentary buttons") ](https://www.youtube.com/watch?v=NzEHmU0Cv3E)

```auto
// Example of multiple momentary buttons connected to GPIO input pins
//

export var buttonOneValue, buttonTwoValue, buttonThreeValue
// Use export to watch values in the PixelBlaze editor

var BUTTON_ONE_PIN = 26
var BUTTON_TWO_PIN = 25
var BUTTON_THREE_PIN = 0

pinMode(BUTTON_ONE_PIN, INPUT_PULLDOWN)
pinMode(BUTTON_TWO_PIN, INPUT_PULLDOWN)
pinMode(BUTTON_THREE_PIN, INPUT_PULLDOWN)

export function beforeRender(delta) {
    buttonOneValue = digitalRead(BUTTON_ONE_PIN)
    buttonTwoValue = digitalRead(BUTTON_TWO_PIN)
    buttonThreeValue = digitalRead(BUTTON_THREE_PIN)
}

export function render(index) {
    hsv(.0, 0, 0)

    if (index == 0) {
        if (buttonOneValue == 1) {
            hsv(.97, 1, 1) // Red'ish
        }
    }
    if (index == 1) {
        if (buttonTwoValue == 1) {
            hsv(.15, 1, 1) // Yellow'ish
        }
    }
    if (index == 2) {
        if (buttonThreeValue == 1) {
            hsv(.3, 1, 1) // Green'ish
        }
    }
}

```

---

<div class="post-metadata">

**Author:** ![Whitespace](https://forum.electromage.com/user_avatar/forum.electromage.com/whitespace/32/2134_2.png) [@Whitespace](https://forum.electromage.com/u/Whitespace)\
**Post date:** [November 7, 2022, 9:02pm UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/2 "2022-11-07T21:02:02Z")

</div>

Yessssss thank you so much for this!

Would love a rotary encoder for brightness/pattern control.

---

<div class="post-metadata">

**Author:** ![sorceror](https://forum.electromage.com/user_avatar/forum.electromage.com/sorceror/32/735_2.png) [@sorceror](https://forum.electromage.com/u/sorceror)\
**Post date:** [November 8, 2022, 10:13am UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/3 "2022-11-08T10:13:06Z")

</div>

I put some 10k potentiometers on pins 1033, 1034, 1035 and analogRead() returns a value between 0 and 1!

Mine are sliders but I’m pretty sure there are rotary potentiometers out there 😃

---

<div class="post-metadata">

**Author:** ![misterconnolly](https://forum.electromage.com/user_avatar/forum.electromage.com/misterconnolly/32/2662_2.png) [@misterconnolly](https://forum.electromage.com/u/misterconnolly)\
**Post date:** [November 12, 2022, 12:06pm UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/4 "2022-11-12T12:06:56Z")

</div>

## Example - Rotary Encoder

Here is a simple rotary encoder.

[![](https://img.youtube.com/vi/tIk9hq_2no8/maxresdefault.jpg "PixelblazeRotaryEncoder") ](https://www.youtube.com/watch?v=tIk9hq_2no8)

I connected the “CLK” pin to GPIO pin 26, and the “DT” pin to GPIO 25.

```auto
var CLK_PIN = 26
var DT_PIN = 25

export var currentA
export var currentB
export var lastA
export var counter

pinMode(CLK_PIN, INPUT) // Input A (CLK)
pinMode(DT_PIN, INPUT) // Input B (DT)

export function beforeRender(delta) {

    currentA = digitalRead(CLK_PIN)
    currentB = digitalRead(DT_PIN)

    if (currentA != lastA) {
        // Moved
        if (currentA != currentB) {
            // Clockwise
            counter++
        } else {
            // CounterClockwise
            counter--
        }

        lastA = currentA
    }
}

export function render(index) {
    hsv(.0, 0, 0)

    if (index < counter) {
        hsv(.7, 1, 1)

    }
}

```

---

<div class="post-metadata">

**Author:** ![Whitespace](https://forum.electromage.com/user_avatar/forum.electromage.com/whitespace/32/2134_2.png) [@Whitespace](https://forum.electromage.com/u/Whitespace)\
**Post date:** [November 13, 2022, 1:56pm UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/5 "2022-11-13T13:56:21Z")

</div>

This is perfect, thanks! I bought some rotary encoders but haven’t had the chance to sit down and debug them. Your code gives me the energy to try!

---

<div class="post-metadata">

**Author:** ![ratkins](https://forum.electromage.com/user_avatar/forum.electromage.com/ratkins/32/3035_2.png) [@ratkins](https://forum.electromage.com/u/ratkins)\
**Post date:** [June 14, 2023, 6:10pm UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/6 "2023-06-14T18:10:21Z")

</div>

Is this a “raw” rotary encoder or something mounted to a board which has denounce logic built in?

---

<div class="post-metadata">

**Author:** ![misterconnolly](https://forum.electromage.com/user_avatar/forum.electromage.com/misterconnolly/32/2662_2.png) [@misterconnolly](https://forum.electromage.com/u/misterconnolly)\
**Post date:** [July 24, 2023, 11:44pm UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/7 "2023-07-24T23:44:54Z")

</div>

The encoder is attached to a [breadboard friendly breakout board](https://www.amazon.com/gp/product/B07F26CT6B/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&psc=1).

---

<div class="post-metadata">

**Author:** ![ratkins](https://forum.electromage.com/user_avatar/forum.electromage.com/ratkins/32/3035_2.png) [@ratkins](https://forum.electromage.com/u/ratkins)\
**Post date:** [July 25, 2023, 7:06am UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/8 "2023-07-25T07:06:46Z")

</div>

Erm, I meant “debounce” logic, obviously 😂. (But thanks for the link!)

---

<div class="post-metadata">

**Author:** ![MrMatty](https://forum.electromage.com/user_avatar/forum.electromage.com/mrmatty/32/3138_2.png) [@MrMatty](https://forum.electromage.com/u/MrMatty)\
**Post date:** [August 30, 2023, 6:55pm UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/9 "2023-08-30T18:55:51Z")

</div>

So, I was browsing around to see how/what people have done with with LED controllers recently, trying to decide if pixelblaze was the way to go for me, and who do I see here? @misterconnolly !

Long time no talk, Brian! Sorry to hijack your thread, but the forum bot won’t let me DM you yet, and the email address I have for you seems to be old.

-MH

---

<div class="post-metadata">

**Author:** ![MrMatty](https://forum.electromage.com/user_avatar/forum.electromage.com/mrmatty/32/3138_2.png) [@MrMatty](https://forum.electromage.com/u/MrMatty)\
**Post date:** [September 8, 2023, 12:39am UTC](https://forum.electromage.com/t/simple-control-using-momentary-buttons/2615/10 "2023-09-08T00:39:28Z")

</div>

I decided to max out all the IO ports. It makes for a fun analog led control board.

[![](https://img.youtube.com/vi/VwYtwVZkjZU/maxresdefault.jpg "Pixelblaze buttons") ](https://www.youtube.com/watch?v=VwYtwVZkjZU)