Overview

Save Subscribe

Knob Sketching

Build a fun sketch drawing toy using CircuitPython and 3D Printing. Powered by the Feather M4 and 2.4in TFT FeatherWing.

Draw letters and shapes to create your own artwork using knobs!

3D print a snap fit case to house all of the electronics!

 

Pixel Drawing

Use the two knobs to move a cursor up, down, left and right. The toggle switch lets you do a pen up and down so you can turn off drawing to make separate shapes. Use the button to clear the screen.

Easily customize the background and drawing colors using CircuitPython!

Parts

3d_printing_hero-face.jpg

Parts used to build this project.

Top view of a TFT FeatherWing - 2.4" 320x240 Touchscreen For All Feathers. A burgundy polished finger drawing a heart on the touch screen.
A Feather board without ambition is a Feather board without FeatherWings! Spice up your Feather project with a beautiful 2.4" touchscreen display shield with built in microSD card...
Out of Stock
Out of Stock
Angled shot of a Adafruit Feather M4 Express.
It's what you've been waiting for, the Feather M4 Express featuring ATSAMD51. This Feather is fast like a swift, smart like an owl, strong like a ox-bird (it's half ox,...
$22.95
In Stock
Add to Cart
Angled shot of 16mm burgundy panel mount pushbutton.
OK, this item is pretty simple - it's a panel mount pushbutton. It's not that exciting, no LEDs, no bells & whistles. But we really like it anyways – look at that...
Out of Stock
Out of Stock
Mini Panel Mount SPDT Toggle Switch
This or that, one or the other, perhaps or perhaps not! So hard to make decisions these days without feeling like you're just going back and forth constantly. Deciding whether or...
$0.95
In Stock
Add to Cart
Breadboard Friendly Panel Mount 10K potentiometer linear.
This potentiometer is a two-in-one, good in a breadboard or with a panel. It's a fairly standard linear taper 10K ohm potentiometer, with a grippy shaft. It's smooth and easy...
$0.95
In Stock
Add to Cart
Lithium Ion Polymer Battery 3.7v 1200mAh with JST 2-PH connector
Lithium-ion polymer (also known as 'lipo' or 'lipoly') batteries are thin, light, and powerful. The output ranges from 4.2V when completely charged to 3.7V. This...
$9.95
In Stock
Add to Cart
1 x Short Female Headers
12-pin and 16-pin male header set
1 x Right Angled Male Header
Break-away 0.1" 36-pin
1 x Silicon Cover Stranded Wire
30AWG in Various Colors
1 x Black Nylon Hardware Kit
M2.5 Hardware
1 x Slim Metal Pot KNobs
10mm T18

Optional Knobs

Search Knobs in Adafruit Shop

2 x Aluminum Knobs
Matte Black Aluminum Alloy Knobs for Potentiometers
3d_printing_hero-hearts.jpg

CAD Files

CAD Parts List

STL files for 3D printing are oriented to print "as-is" on FDM style machines. Parts are designed to 3D print without any support material. Original design source may be downloaded using the links below:

  • top-cover
  • bottom-cover
  • pcb-mount

CAD Assembly

The TFT FeatherWing is secured to the PCB mount using M3 screws and nuts. The PCB mount is fitted into the top half of the enclosure. The potentiometers, toggle switch and button is panel mounted to the top cover.  The slide switch is press fitted into a built-in holder in the top cover. The bottom half of the enclosure snap fit over the top of the enclosure.

Build Volume

The parts require a 3D printer with a minimum build volume.

  • 110mm (X) x 110mm (Y) x 100mm (Z)

Design Source Files

The project assembly was designed in Fusion 360. This can be downloaded in different formats like STEP, STL and more. Electronic components like Adafruit's board, displays, connectors and more can be downloaded from the Adafruit CAD parts GitHub Repo.

Circuit Diagram

The diagram below provides a visual reference for wiring of the components. This diagram was created using the software package Fritzing.

3d_printing_circuit-diagram.jpg

Adafruit Library for Fritzing

Use Adafruit's Fritzing parts library to create circuit diagrams for your projects. Download the library or just grab individual parts. Get the library and parts from GitHub - Adafruit Fritzing Parts.

Wired Connections

Most of the connections will be wired to the extra header pins on the TFT FeatherWing.

Potentiometer 1 to Feather M4

  • Pin 1 to Pin A0 on Feather M4
  • Pin 2 to GND on Feather M4
  • Pin 3 to 3V on Feather M4

Potentiometer 2 to Feather M4

  • Pin 1 to Pin A1 on Feather M4
  • Pin 2 to GND on Feather M4
  • Pin 3 to 3V on Feather M4

Push Button

  • Pin 1 to Pin D11 on Feather M4
  • Pin 2 to GND on Feather M4

Toggle Switch

  • Pin 1 to D12 on Feather M4
  • Pin 2 to GND on Feather M4

Slide Switch

  • Pin 1 to EN on Feather M4
  • Pin 2 to GND on Feather M4

Powering

The Adafruit board can be powered via USB or JST using a 3.7v lipo battery. In this project, a 1200mAh battery is used. 

CircuitPython on Feather M4 Express

CircuitPython is a derivative of MicroPython designed to simplify experimentation and education on low-cost microcontrollers. It makes it easier than ever to get prototyping by requiring no upfront desktop software downloads. Simply copy and edit files on the CIRCUITPY drive to iterate.

The following instructions will show you how to install CircuitPython. If you've already installed CircuitPython but are looking to update it or reinstall it, the same steps work for that as well!

Set up CircuitPython Quick Start!

Follow this quick step-by-step for super-fast Python power :)

Click the link above and download the latest UF2 file.

Download and save it to your desktop (or wherever is handy).

Plug your Feather M4 into your computer using a known-good USB cable.

A lot of people end up using charge-only USB cables and it is very frustrating! So make sure you have a USB cable you know is good for data sync.

Double-click the Reset button next to the USB connector on your board, and you will see the NeoPixel RGB LED turn green. If it turns red, check the USB cable, try another USB port, etc. Note: The little red LED next to the USB connector will pulse red. That's ok!

If double-clicking doesn't work the first time, try again. Sometimes it can take a few tries to get the rhythm right!

You will see a new disk drive appear called FEATHERBOOT.

 

 

 

Drag the adafruit_circuitpython_etc.uf2 file to FEATHERBOOT.

The LED will flash. Then, the FEATHERBOOT drive will disappear and a new disk drive called CIRCUITPY will appear.

That's it, you're done! :)

Further Information

For more detailed info on installing CircuitPython, check out Installing CircuitPython.

Code

3d_printing_hero-code-mu.jpg

Once you've finished setting up your QT Py RP2040 with CircuitPython, you can access the code and necessary libraries by downloading the Project Bundle.

To do this, click on the Download Project Bundle button in the window below. It will download as a zipped folder.

Download Project Bundle
Copy Code 
# SPDX-FileCopyrightText: 2022 Carter Nelson for Adafruit Industries
#
# SPDX-License-Identifier: MIT

#
# Dual Knob Sketcher
#

import time
import board
import displayio
import digitalio
import analogio
import adafruit_ili9341
from simpleio import map_range

#--| User Config |---------------------------------------------------
SKETCH_SCALE      = 3
DRAW_COLOR        = 0xFFFFFF
BACKGROUND_COLOR  = 0x000000
PEN_UP_COLOR      = 0xFF0000
PEN_DOWN_COLOR    = 0x00FF00
KNOB_READS        = 10
KNOB_DELAY        = 0.001
REVERSE_X         = True
REVERSE_Y         = True
#--| User Config |---------------------------------------------------

# Feather M4 + 2.4" TFT FeatherWing setup
DISPLAY_WIDTH = 320
DISPLAY_HEIGHT = 240
SKETCH_WIDTH = DISPLAY_WIDTH // SKETCH_SCALE
SKETCH_HEIGHT = DISPLAY_HEIGHT // SKETCH_SCALE
PEN_SWITCH = board.D12
CLEAR_BUTTON = board.D11
X_KNOB = board.A0
Y_KNOB = board.A1

# set up knobs
x_knob = analogio.AnalogIn(X_KNOB)
y_knob = analogio.AnalogIn(Y_KNOB)

# set up button
clear_button = digitalio.DigitalInOut(CLEAR_BUTTON)
clear_button.switch_to_input(pull=digitalio.Pull.UP)

# set up pen up/down switch
pen_switch = digitalio.DigitalInOut(PEN_SWITCH)
pen_switch.switch_to_input(pull=digitalio.Pull.UP)

# set up display
displayio.release_displays()

spi = board.SPI()
tft_cs = board.D9
tft_dc = board.D10
tft_rst = board.D6
display_bus = displayio.FourWire(
    spi, command=tft_dc, chip_select=tft_cs, reset=tft_rst
)
display = adafruit_ili9341.ILI9341(display_bus, width=DISPLAY_WIDTH, height=DISPLAY_HEIGHT)

# add base UI element
splash = displayio.Group(scale=SKETCH_SCALE)
display.show(splash)

# add sketch
sketch_bitmap = displayio.Bitmap(SKETCH_WIDTH, SKETCH_HEIGHT, 2)
sketch_palette = displayio.Palette(2)
sketch_palette[0] = BACKGROUND_COLOR
sketch_palette[1] = DRAW_COLOR
sketch = displayio.TileGrid(sketch_bitmap, pixel_shader=sketch_palette, x=0, y=0)
splash.append(sketch)

# add pen cursor
pen_bitmap = displayio.Bitmap(3, 3, 2)
pen_palette = displayio.Palette(2)
pen_palette[0] = BACKGROUND_COLOR
pen_palette[1] = PEN_DOWN_COLOR
CURSOR = (
    1, 1, 1,
    1, 0, 1,
    1, 1, 1,
)
for i, value in enumerate(CURSOR):
    pen_bitmap[i] = value
pen = displayio.TileGrid(pen_bitmap, pixel_shader=pen_palette)
splash.append(pen)

# helper to average analog knob readings
def read_knobs(reads, delay):
    avg_x = avg_y = 0
    for _ in range(reads):
        avg_x += x_knob.value
        avg_y += y_knob.value
        time.sleep(delay)
    avg_x /= reads
    avg_y /= reads
    xx = int(map_range(avg_x, 0, 65535, 0, SKETCH_WIDTH - 1))
    yy = int(map_range(avg_y, 0, 65535, 0, SKETCH_HEIGHT - 1))
    if REVERSE_X:
        xx = SKETCH_WIDTH - xx - 1
    if REVERSE_Y:
        yy = SKETCH_HEIGHT - yy - 1
    return xx, yy

#-------
# MAIN
#-------
while True:
    while clear_button.value:
        x, y = read_knobs(KNOB_READS, KNOB_DELAY)
        pen.x = x - 1
        pen.y = y - 1
        if pen_switch.value:
            # PEN DOWN
            pen_palette[1] = PEN_DOWN_COLOR
            sketch_bitmap[x, y] = 1
        else:
            # PEN UP
            pen_palette[1] = PEN_UP_COLOR
    sketch_bitmap.fill(0)
View on GitHub

Upload the Code and Libraries to the Feather M4

After downloading the Project Bundle, plug your Feather M4 into the computer's USB port. You should see a new flash drive appear in the computer's File Explorer or Finder (depending on your operating system) called CIRCUITPY. Unzip the folder and copy the following items to the Feather M4's CIRCUITPY drive. 

  • lib folder
  • code.py

Your Feather M4 CIRCUITPY drive should look like this after copying the lib folder and the code.py file.

3d_printing_circuitpy-drive.jpg

Customizing

There are several aspects of the code that can be easily customized. To do so, edit these lines of code found near the top of the code listing:

Download File
Copy Code 
#--| User Config |---------------------------------------------------
SKETCH_SCALE      = 3
DRAW_COLOR        = 0xFFFFFF
BACKGROUND_COLOR  = 0x000000
PEN_UP_COLOR      = 0xFF0000
PEN_DOWN_COLOR    = 0x00FF00
KNOB_READS        = 10
KNOB_DELAY        = 0.001
REVERSE_X         = True
REVERSE_Y         = True
#--| User Config |---------------------------------------------------

These parameters are the primary ones for changing the look of the sketch:

  • SKETCH_SCALE - Sets the "chunkiness" of the sketch. The bigger the number, the chunkier. A value of 1 uses the full TFT screen resolution (i.e. no chunky)
  • DRAW_COLOR - Sets the color of the sketch line.
  • BACKGROUND_COLOR - Sets the background color of the sketch.
  • PEN_UP_COLOR - Sets the pen cursor color when pen is "UP" (drawing off).
  • PEN_DOWN_COLOR - Sets the pen cursor color when pen is "DOWN" (drawing on).

NOTE: For colors, use 0xRRGGBB integer format.

These additional parameters can be used to tune and change the knob behavior. The defaults may be fine though.

  • KNOB_READS - The number of analog readings to use for averaging.
  • KNOB_DELAY - The delay, in seconds, between each knob reading.
  • REVERSE_X - Use to change CW/CCW behavior of X knob.
  • REVERSE_Y - Use to change CW/CCW behavior of Y knob.

Wiring

Toggle Switch Wiring

Use two silicon cover wires to connect the toggle switch to the TFT FeatherWing.

Measure and cut two 9cm long wires.

Solder the wires to the the middle and either far left or right pins on the toggle switch.

Wired Toggle Switch

Double check all of the pins have been properly soldered.

Slide Switch Wiring

Use two silicon cover wires to connect the slide switch to the TFT FeatherWing.

Measure and cut two 11cm long wires.

Solder the wires to the the middle and either far left or right pins on the toggle switch.

Wired Slide Switch

Double check all of the pins have been properly soldered.

Button Wiring

Use two silicon cover wires to connect the button to the TFT FeatherWing.

Measure and cut two 9cm long wires.

Solder the wires to the the middle and either far left or right pins on the toggle switch.

Wired Button

Double check all of the pins have been properly soldered.

Potentiometers Wiring

Use a set of three wires for each potentiometer. 

Measure and cut 9cm long wires.

Potentiometer Common Ground

Solder two black colored wires to either the far left or right pin on one of the potentiometers.

Solder a yellow colored wire to the middle pin.

Solder a red wire to the remaining pin.

Soldering Potentiometer

Solder the black wire from the other potentiometer to either the far left or right pin.

Solder a green wire to the middle pin.

Solder a red wire to the remaining pin.

Wired Potentiometers

Double check all of the pins on the potentiometers have been correctly soldered.

Wired Components

Double check all of the pins on the button, slide switch, toggle switch and potentiometers have been properly soldered.

Assembly

Install TFT FeatherWing to Mount

Use four M2.5x10mm long screws and 8x hex nuts to secure the TFT FeatherWing to the PCB mount.

Insert the screws through the TFT mounting holes and secure to PCB using hex nuts.

Place the PCB mount under the TFT FeatherWing with the screws fitting through the mounting holes. Secure with the TFT using hex nuts.

Secured TFT FeatherWing

Double check the orientation of the PCB is matching the photo by referencing the headers and silkscreen labels.

Install Feather to TFT FeatherWing

Place the Feather M4 over the TFT FeatherWing with the headers lined up with the inner set of pins.

The short headers allow the PCBs to have a low profile.

Install Slide Switch

Insert the slide switch into the built-in holder on the case at an angle and firmly press the switch into place.

The actuator is fitted through the opening on the bottom side of the case.

Install Button

Insert the 16mm push button into the center hole on the case.

Thread the button wires through the hex nut and fasten to secure the push button to the case.

Install Toggle Switch

Place the washer onto the threaded shaft of the toggle switch.

Insert the toggle switch through the middle hole and use the hex nut to secure it to the case.

Ensure the toggle switch is oriented so the actuator can be up and down position.

Secured Toggle Switch

Double check the toggle switch is tightly secured to the 3D printed case.

Prep Potentiometers

Remove the tabs on the potentiometers using flush snips. 

Install Potentiometers

Insert the two potentiometers to the left and right holes and secure them to the case using the hex nuts.

Ensure the potentiometer pins are oriented vertically like in the photos.

Install PCB mount to Case

Thread the wiring through the PCB mount and begin to insert it into the case with the mounting holes lined up.

Installed PCB Mount

Press the PCB mount so the corner mounting tabs sit flush with the build-in standoffs in the case.

Install Right-Angled Headers

Create two sets of right-angled headers to connect the components to the TFT FeatherWing.

  • 2x 1x6 Right-Angled Header Pins

Solder Ground Connections

Connect the ground wires from the toggle switch, button and potentiometers to the three available ground pins on the Feather M4.

Solder VCC Connections

Connect the two red wires from the potentiometers to the two available 3V pins on the Feather M4.

Solder Potentiometers

Connect the green and yellow wires from the potentiometers to the A1 and A0 right-angled pins on the Feather M4.

Connect the ground wire from the slide switch to the ground pin on the right-angled header pin.

Solder Button and Switches

Connect the back wire from the slide switch to the En (enabled) right-angled pin on the Feather M4.

Connect the blue wire from the toggle switch to the D12 right-angled pin on the Feather M4.

Connect the white wire from the button to D11 pin on the right-angled pin on the Feather M4.

Wired Connections

Double check all of the wired connections have been properly soldered.

Take a moment to adjust the wiring and tuck them into case.

Connect Battery

Plug in the power cable from the battery to the battery port on the Feather M4.

Place the battery under the wiring over the TFT FeatherWing.

Install Back Cover

Orient the back cover with the USB port on the Feather m4

Press the edges of the back cover into the case to snap fit it closed.

Reset Button

The back cover features a built-in pusher for the on-board reset button on the Feather M4.

Use the reset button to get into the boot loader mode (double press) for upgrading CircuitPython, installing new firmware or just (single press) hard resetting.

Final Build

Use the slide switch to turn Feather M4 on and off.

Use the two potentiometers to draw pixels on display.

Use middle push button to clear the entire display.

Use toggle switch to activate pen up or down.

This guide was first published on Mar 01, 2022. It was last updated on Mar 01, 2022.