This project is written in CircuitPython. The following will walk you through getting your PyPortal CIRCUITPY drive setup to run the code and give an overview of what's going on in the code.
Before continuing, ensure that you have at least the files neopixel.mpy, adafruit_pyportal.mpy, adafruit_touchscreen.mpy and adafruit_button.mpy, and the folders adafruit_bitmap_font, adafruit_bus_device, adafruit_esp32spi, adafruit_display_shapes and adafruit_display_text on your CIRCUITPY drive in the /lib folder. Once those are copied, you're all set to continue!
The PyPortal has the ability to connect to your WiFi. Even though no network access is needed for this project, the PyPortal library still expects there to be a secrets.py file on your device. However, you do not need to include any credentials in the file for this project to work. The following is an example of a secrets.py file that will work with this project. Add the following file to your CIRCUITPY drive before continuing.
# SPDX-FileCopyrightText: 2019 Kattni Rembor for Adafruit Industries # # SPDX-License-Identifier: MIT # This file is where you keep secret settings, passwords, and tokens! # If you put them in the code you risk committing that info or sharing it secrets = { }
The Code
Click the Download Project Bundle button and download all the files you need to your computer.
# SPDX-FileCopyrightText: 2019 Kattni Rembor for Adafruit Industries # # SPDX-License-Identifier: MIT import time import board from adafruit_pyportal import PyPortal from adafruit_button import Button import neopixel import analogio # Set the background color BACKGROUND_COLOR = 0x443355 # Set the NeoPixel brightness BRIGHTNESS = 0.3 light_sensor = analogio.AnalogIn(board.LIGHT) strip_1 = neopixel.NeoPixel(board.D4, 30, brightness=BRIGHTNESS) strip_2 = neopixel.NeoPixel(board.D3, 30, brightness=BRIGHTNESS) # Turn off NeoPixels to start strip_1.fill(0) strip_2.fill(0) # Setup PyPortal without networking pyportal = PyPortal(default_bg=BACKGROUND_COLOR) # Button colors RED = (255, 0, 0) ORANGE = (255, 34, 0) YELLOW = (255, 170, 0) GREEN = (0, 255, 0) CYAN = (0, 255, 255) BLUE = (0, 0, 255) VIOLET = (153, 0, 255) MAGENTA = (255, 0, 51) PINK = (255, 51, 119) AQUA = (85, 125, 255) WHITE = (255, 255, 255) OFF = (0, 0, 0) spots = [ {'label': "1", 'pos': (10, 10), 'size': (60, 60), 'color': RED}, {'label': "2", 'pos': (90, 10), 'size': (60, 60), 'color': ORANGE}, {'label': "3", 'pos': (170, 10), 'size': (60, 60), 'color': YELLOW}, {'label': "4", 'pos': (250, 10), 'size': (60, 60), 'color': GREEN}, {'label': "5", 'pos': (10, 90), 'size': (60, 60), 'color': CYAN}, {'label': "6", 'pos': (90, 90), 'size': (60, 60), 'color': BLUE}, {'label': "7", 'pos': (170, 90), 'size': (60, 60), 'color': VIOLET}, {'label': "8", 'pos': (250, 90), 'size': (60, 60), 'color': MAGENTA}, {'label': "9", 'pos': (10, 170), 'size': (60, 60), 'color': PINK}, {'label': "10", 'pos': (90, 170), 'size': (60, 60), 'color': AQUA}, {'label': "11", 'pos': (170, 170), 'size': (60, 60), 'color': WHITE}, {'label': "12", 'pos': (250, 170), 'size': (60, 60), 'color': OFF} ] buttons = [] for spot in spots: button = Button(x=spot['pos'][0], y=spot['pos'][1], width=spot['size'][0], height=spot['size'][1], style=Button.SHADOWROUNDRECT, fill_color=spot['color'], outline_color=0x222222, name=spot['label']) pyportal.splash.append(button) buttons.append(button) mode = 0 mode_change = None # Calibrate light sensor on start to deal with different lighting situations # If the mode change isn't responding properly, reset your PyPortal to recalibrate initial_light_value = light_sensor.value while True: if light_sensor.value < (initial_light_value * 0.3) and mode_change is None: mode_change = "mode_change" if light_sensor.value > (initial_light_value * 0.5) and mode_change == "mode_change": mode += 1 mode_change = None if mode > 2: mode = 0 print(mode) touch = pyportal.touchscreen.touch_point if touch: for button in buttons: if button.contains(touch): print("Touched", button.name) if mode == 0: strip_1.fill(button.fill_color) elif mode == 1: strip_2.fill(button.fill_color) elif mode == 2: strip_1.fill(button.fill_color) strip_2.fill(button.fill_color) break time.sleep(0.05)
Connect your PyPortal to your computer with a known good power+data USB cable. Copy the files from the zip file to your PyPortal CIRCUITPY drive in the directories listed below.

Setup
This code sets a background color on your display, and then renders 12 colored buttons in a 4x3 grid. The color of the button is the color that you will set the NeoPIxels, e.g. the red button turns the NeoPixels on red. The light sensor is used as a toggle to switch between controlling the first strip, the second strip or both at the same time. Let's take a look!
Next there are a couple of variables you can set. Set BACKGROUND_COLOR
to whatever you'd like for the background color using a hex color value. It defaults to a grey. Set BRIGHTNESS
to the brightness you'd like for your NeoPixels, using a number 0
- 1
where the number represents a percentage brightness, e.g. 1
is 100%. It defaults to 0.3
or 30%.
# Set the background color BACKGROUND_COLOR = 0x443355 # Set the NeoPixel brightness BRIGHTNESS = 0.3
Then you setup the light sensor and the NeoPixel strips for use, and turn the NeoPixels off in the event that they were on.
Then you setup the PyPortal for use without networking. This is where the background color is set.
light_sensor = analogio.AnalogIn(board.LIGHT) strip_1 = neopixel.NeoPixel(board.D4, 30, brightness=BRIGHTNESS) strip_2 = neopixel.NeoPixel(board.D3, 30, brightness=BRIGHTNESS) # Turn off NeoPixels to start strip_1.fill(0) strip_2.fill(0) # Setup PyPortal without networking pyportal = PyPortal(default_bg=BACKGROUND_COLOR)
Next is a series of variables that set the button colors using an RGB tuple, e.g. (red, green, blue)
. In this case, red
, green
and blue
are a whole number between 0
and 255
, where 0
is off and 255
is maximum. You can choose any colors you want. If you decide to change the variable names, you'll need to update them in the next section.
# Button colors RED = (255, 0, 0) ORANGE = (255, 34, 0) YELLOW = (255, 170, 0) GREEN = (0, 255, 0) CYAN = (0, 255, 255) BLUE = (0, 0, 255) VIOLET = (153, 0, 255) MAGENTA = (255, 0, 51) PINK = (255, 51, 119) AQUA = (85, 125, 255) WHITE = (255, 255, 255) OFF = (0, 0, 0)
The next section is a list that provides the information needed to create the buttons. Each line contains the following information for each button:
- The button label. In this case, they are numbered 1-12.
- The position of the button, using (x, y) coordinates.
- The size of the button, using (x, y) coordinates. Each button is 60 x 60 pixels.
- The color to set the button, using the color variables from above.
spots = [ {'label': "1", 'pos': (10, 10), 'size': (60, 60), 'color': RED}, {'label': "2", 'pos': (90, 10), 'size': (60, 60), 'color': ORANGE}, {'label': "3", 'pos': (170, 10), 'size': (60, 60), 'color': YELLOW}, {'label': "4", 'pos': (250, 10), 'size': (60, 60), 'color': GREEN}, {'label': "5", 'pos': (10, 90), 'size': (60, 60), 'color': CYAN}, {'label': "6", 'pos': (90, 90), 'size': (60, 60), 'color': BLUE}, {'label': "7", 'pos': (170, 90), 'size': (60, 60), 'color': VIOLET}, {'label': "8", 'pos': (250, 90), 'size': (60, 60), 'color': MAGENTA}, {'label': "9", 'pos': (10, 170), 'size': (60, 60), 'color': PINK}, {'label': "10", 'pos': (90, 170), 'size': (60, 60), 'color': AQUA}, {'label': "11", 'pos': (170, 170), 'size': (60, 60), 'color': WHITE}, {'label': "12", 'pos': (250, 170), 'size': (60, 60), 'color': OFF} ]
This information is then used to create the buttons by creating one button at a time and appending that button to the buttons
list for later use.
buttons = [] for spot in spots: button = Button(x=spot['pos'][0], y=spot['pos'][1], width=spot['size'][0], height=spot['size'][1], style=Button.SHADOWROUNDRECT, fill_color=spot['color'], outline_color=0x222222, name=spot['label']) pyportal.splash.append(button.group) buttons.append(button)
Next, set the mode
to 0
and set mode_change = None
. This will be used in the toggle code.
Finally, you obtain the initial_light_value
from the light sensor. This ambient light value is used to "calibrate" the light sensor to use as a toggle.
mode = 0 mode_change = None initial_light_value = light_sensor.value
This "calibration" is necessary because initial testing found that a hard-coded value for the threshold of the toggle code meant that in different lighting situations, waving a hand over the sensor did not trigger the mode change properly. If it was too bright, then it never dropped below the hard-coded threshold even if the sensor was covered. If it was too dim, then it was constantly below the threshold and did not have the opportunity to trigger. Instead, the code "calibrates" on startup by obtaining an initial value, and then uses a percentage of that initial value as the thresholds. If you find that waving your hand over your PyPortal or covering the sensor is not triggering the mode change, you can recalibrate anytime by restarting your PyPortal.
Main Loop
The first part of the main loop is the toggle code. There are three modes: mode 0 which is controlling strip 1, mode 1 which is controlling strip 2, and mode 2 controlling both strips together. This code toggles through these modes in that order.
The amount of light reaching the sensor decreases as your hand begins to cover it until your hand is centered over it, and then it begins to increase again as your hand moves away from the sensor. The code uses this to create a toggle that only triggers once for each time your hand waves over the sensor.
The current light value is compared to 30% of the initial light value, and when it drops below that threshold, the mode change sequence is started by setting mode_change = "mode_change"
. As the current light value increases to greater than 50% of the initial light value, the mode
is increased by 1, and mode_change
is set back to None
. If the mode
reaches greater than 2, it is set to 0
, to begin the cycle again. The mode
is printed to the serial console as it changes.
if light_sensor.value < (initial_light_value * 0.3) and mode_change is None: mode_change = "mode_change" if light_sensor.value > (initial_light_value * 0.5) and mode_change == "mode_change": mode += 1 mode_change = None if mode > 2: mode = 0 print(mode)
The final section sets up touch on the display, and then checks to see if you've touched within the bounds of a button. If a particular button "contains" the point you've touched on the display, it prints Touched
and the name of the button (its number, 1
-12
) to the serial console. It checks to see which mode is currently active, and if it's 0
, it sets strip 1 to the button color, if it's 1
, it sets strip 2 to the button color, and if it's 3
, it sets both strips to the button color.
touch = pyportal.touchscreen.touch_point if touch: for button in buttons: if button.contains(touch): print("Touched", button.name) if mode == 0: strip_1.fill(button.fill_color) elif mode == 1: strip_2.fill(button.fill_color) elif mode == 2: strip_1.fill(button.fill_color) strip_2.fill(button.fill_color) break time.sleep(0.05)
That's what goes into creating a NeoPixel color picker with PyPortal and CircuitPython!
Try changing the colors and setting the strips to different combinations to fit the effect you're looking for. Have fun!
Page last edited January 21, 2025
Text editor powered by tinymce.