Tiny Museum Tour Device

by John Park

published October 19, 2018, last updated October 19, 2018

posted in

Save Download

Beginner

Project guide

Overview

This embedded content is from a site (www.youtube.com, flickr.com, etc) that does not comply with the Do Not Track (DNT) setting now enabled on your browser.

Clicking through to the embedded content will allow you to be tracked by the embed provider.

Learn more about Adafruit's privacy policy here.

Use a HalloWing with its built-in TFT screen, and a small speaker to display artwork, and play audio descriptions. Coded in CircuitPython, you can use the capacitive touch pads to advance to the next image.

You'll also build a beautiful canvas and wood frame to display your Tiny Museum Tour Device!

Parts

1 x Adafruit HalloWing M0 Express

Skull-shaped ATSAMD21 board w 1.44" 128x128 TFT display

Add to Cart

1 x Lithium Ion Polymer Battery

Ideal for Feathers - 3.7V 400mAh

Out of Stock

1 x Copper Foil Tape

with Conductive Adhesive 6mm x 15 meter roll

Add to Cart

1 x Silicone Cover Stranded-Core Wire

2m 26AWG White

Add to Cart

1 x USB Cable

A/MicroB

Add to Cart

Materials and Tools

In addition to the parts above, you'll also need:

Painting canvas pre-stretched on a 4"x4" minimum frame
Lengths of basswood in various dimensions, such as 1/4" x 3/8" x 24", 3/16" x 3/8" x 24",
Cardstock
Woodglue and/or white glue
Hobby knife
Mitre box and saw
Spray paint
Foam tape or blue tack

Text editor powered by tinymce.

Build the Display Canvas and Frame

There are many ways you can create a mat and frame for your HalloWing to turn it into the Tiny Museum Tour device. Here we'll show one method that uses a small stretched canvas and basswood strips from the hobby store. So long as your frame and mat are large enough to hold the HalloWing, speaker, and battery, the dimensions and style are not critical, so feel free to personalized yours!

Screen Hole

The screen on the HalloWing is about 30mm wide by 35mm high. Cut a hole in the center of your canvas that is just this size or even a tiny bit smaller to fit the screen through while hiding the main board.

Find the center of your canvas by drawing two diagonal, intersecting marks with a straight edge from corner to corner.

Use a try square to measure 15mm out from center to either side, and 17.5mm from center toward the top and bottom of the frame (the speed square shown here is in imperial units, but I used that small black Adafruit PCB ruler to find the metric measurements before marking lines).

With a hobby knife and straight edge, cut out the screen hole.

Cable Port

I marked a spot for the USB cable to enter the top of the frame and then used a saw and chisel to remove some of the wood as shown here.

Supports

To hold the HalloWing in place I used both hot glue and small basswood strips cut to size and glued into the frame.

Extra Depth

This step is optional if you don't plan to hang the frame on the wall, or if your canvas frame is already deeper than the HalloWing and battery will require to lay flat.

To add extra depth I cut four lengths of 3/16" x 1/2" basswood at 45° angles with a mitre box and saw, and then glued them and clamped them to the back of the canvas frame.

Battery and Speaker

Time to plug in the speaker to the white speaker port on the left side of the board, and the battery into the battery port at the upper right of the board.

You can use some blue tack (poster putty) or double stick foam tape to secure them in place.

Build a Decorative Frame from Scratch

Here's a fun technique for making your own frame stock from scratch! You can take different sizes of basswood strip and lay them out on a piece of card stock to find an interesting geometry. Glue them down to the card stock and when it dries you can cut your custom material on a mitre box!

First, try out some arrangements to see what pattern you like. This allows you to adjust the scale of the frame to fit your screen and canvas as well.

Next, glue the strips down on card card stock using wood glue or white glue. Apply pressure to keep the strips tight to each other and flat while they dry, then cut the card stock with a hobby knife.

Cut to Length

Measure the top of the canvas and transfer that measurement to the top of your frame stock. Then, cut this first strip out on your mitre box with a saw.

Cut out the remaining frame sides this way.

Dry fit the pieces to make sure you get right angles! You can use sandpaper to remove material carefully from one end to adjust fit.

Then, lay the pieces out and glue them onto another piece of card stock.

Hold the frame tight in place for a minute to let it start to dry -- proper clamping can be a challenge at this small scale!

Once it is dry, cut the frame from the card stock with a hobby knife.

Fix the Gaps

You may have some gaps in the frame -- these can be filled in with wood paste.

Collect some sawdust from your mitre box and mix it 1:1 with wood glue.

Use a small putty knife or other flat tool to fill in the gaps.

Wipe off any excess from the frame.

Sanding

Use some medium and fine grit sandpaper to clean up the surface. You can also add some chamfers and bevels to the frame strips if you like!

Painting

I decided to hit the frame with a few coats of gold spray paint, to give it that fancy art gallery feel! Basswood is very absorbent, so it will take a few coats, or you may want to use a sealer on the wood first.

Affix Frame to Canvas

Once your paint is dry, use some white glue to affix the frame to the canvas. Use a couple of heavy objects to hold it in place while it dries.

Capacitive Touch Strips

We want to be able to advance or reverse the images on our Tiny Museum Tour Device by tapping the sides of the frame. To do this, we'll run wire and copper tape from the outer "teeth" of the HalloWing.

First, solder two strips of wire to the teeth as shown (if you want to avoid soldering you could use alligator clip leads instead), then create copper strip pads for the wires to each touch on either side.

Next, we'll program the Tiny Museum Tour Device with Circuit Python and add media to the HalloWing.

Text editor powered by tinymce.

Code with CircuitPython

CircuitPython Setup

This project requires CircuitPython version 4.0 or higher.

Follow the instructions on the HalloWing CircuitPython Guide to ensure you have the correct version (4.0 or higher).

Adafruit really likes using the Mu editor to edit the CircuitPython code. See this guide on loading and using Mu.

Libraries

You'll also need to add a special library for this project. Follow this guide on adding libraries. The only one you'll need is the adafruit_slideshow.mpy file from the Circuit Python bundle in the lib folder, so just drag it from your downloaded, unzipped lib folder onto the HalloWing's lib folder.

Code

Here is the code we'll use. Copy it and then paste in Mu. Save it to your HalloWing as code.py

Download Project Bundle

Copy Code

# SPDX-FileCopyrightText: 2018 John Edgar Park for Adafruit Industries
#
# SPDX-License-Identifier: MIT

import board
from adafruit_slideshow import SlideShow, PlayBackDirection
import audioio
import audiocore
import digitalio
import touchio

# Create the slideshow object that plays through once alphabetically.
slideshow = SlideShow(board.DISPLAY)

# Set the touch objects to the first and last teeth
back_pin = board.TOUCH1
forward_pin = board.TOUCH4

# Perform a couple extra steps for the HalloWing M4
try:
    if getattr(board, "CAP_PIN"):
        # Create digitalio objects and pull low for HalloWing M4
        cap_pin = digitalio.DigitalInOut(board.CAP_PIN)
        cap_pin.direction = digitalio.Direction.OUTPUT
        cap_pin.value = False
    if getattr(board, "SPEAKER_ENABLE"):
        # Enable the Speaker
        speaker_enable = digitalio.DigitalInOut(board.SPEAKER_ENABLE)
        speaker_enable.direction = digitalio.Direction.OUTPUT
        speaker_enable.value = True
except AttributeError:
    pass

# Create the touchio objects for HalloWing M0
back_button = touchio.TouchIn(back_pin)
forward_button = touchio.TouchIn(forward_pin)

# Setup the speaker output
a = audioio.AudioOut(board.SPEAKER)

# Helper function that takes in the file name string, splits it at the period, and keeps only the
# beginning of the string. i.e. kitten.bmp becomes kitten.
def basename(file_name):
    return file_name.rsplit('.', 1)[0]


# Helper function to handle wav file playback
def play_file(wav_file_name):
    try:
        data = open(wav_file_name, "rb")
        wav = audiocore.WaveFile(data)
        a.play(wav)
        print("Playing: " + wav_file_name)
        while a.playing:
            pass
        a.stop()
    except OSError:  # Error thrown if it finds a .bmp file with no corresponding .wav file
        # Print the name of the .bmp file with no corresponding .wav file
        print("No corresponding wav file:", slideshow.current_image_name)


# Uses the basename() helper function to strip the .bmp from the file name and add .wav
wav_file = basename(slideshow.current_image_name) + ".wav"
# Uses the play_file() helper function to play the .wav name now saved to wav_file
play_file(wav_file)

while True:
    # Touch the tooth on the right:
    if forward_button.value:
        # Sets the slideshow playback direction to forward
        slideshow.direction = PlayBackDirection.FORWARD
        # Advance the slideshow to the next image
        slideshow.advance()
        # Sets wav_file to the new corresponding .wav file
        wav_file = basename(slideshow.current_image_name) + ".wav"
        # Plays back the new file with the new image
        play_file(wav_file)
    # Touch the tooth on the left:
    if back_button.value:
        # Sets the slideshow playback direction to backward
        slideshow.direction = PlayBackDirection.BACKWARD
        # Advance to the previous image
        slideshow.advance()
        wav_file = basename(slideshow.current_image_name) + ".wav"
        play_file(wav_file)

# SPDX-FileCopyrightText: 2018 John Edgar Park for Adafruit Industries
#
# SPDX-License-Identifier: MIT

import board
from adafruit_slideshow import SlideShow, PlayBackDirection
import audioio
import audiocore
import digitalio
import touchio

# Create the slideshow object that plays through once alphabetically.
slideshow = SlideShow(board.DISPLAY)

# Set the touch objects to the first and last teeth
back_pin = board.TOUCH1
forward_pin = board.TOUCH4

# Perform a couple extra steps for the HalloWing M4
try:
    if getattr(board, "CAP_PIN"):
        # Create digitalio objects and pull low for HalloWing M4
        cap_pin = digitalio.DigitalInOut(board.CAP_PIN)
        cap_pin.direction = digitalio.Direction.OUTPUT
        cap_pin.value = False
    if getattr(board, "SPEAKER_ENABLE"):
        # Enable the Speaker
        speaker_enable = digitalio.DigitalInOut(board.SPEAKER_ENABLE)
        speaker_enable.direction = digitalio.Direction.OUTPUT
        speaker_enable.value = True
except AttributeError:
    pass

# Create the touchio objects for HalloWing M0
back_button = touchio.TouchIn(back_pin)
forward_button = touchio.TouchIn(forward_pin)

# Setup the speaker output
a = audioio.AudioOut(board.SPEAKER)

# Helper function that takes in the file name string, splits it at the period, and keeps only the
# beginning of the string. i.e. kitten.bmp becomes kitten.
def basename(file_name):
    return file_name.rsplit('.', 1)[0]


# Helper function to handle wav file playback
def play_file(wav_file_name):
    try:
        data = open(wav_file_name, "rb")
        wav = audiocore.WaveFile(data)
        a.play(wav)
        print("Playing: " + wav_file_name)
        while a.playing:
            pass
        a.stop()
    except OSError:  # Error thrown if it finds a .bmp file with no corresponding .wav file
        # Print the name of the .bmp file with no corresponding .wav file
        print("No corresponding wav file:", slideshow.current_image_name)


# Uses the basename() helper function to strip the .bmp from the file name and add .wav
wav_file = basename(slideshow.current_image_name) + ".wav"
# Uses the play_file() helper function to play the .wav name now saved to wav_file
play_file(wav_file)

while True:
    # Touch the tooth on the right:
    if forward_button.value:
        # Sets the slideshow playback direction to forward
        slideshow.direction = PlayBackDirection.FORWARD
        # Advance the slideshow to the next image
        slideshow.advance()
        # Sets wav_file to the new corresponding .wav file
        wav_file = basename(slideshow.current_image_name) + ".wav"
        # Plays back the new file with the new image
        play_file(wav_file)
    # Touch the tooth on the left:
    if back_button.value:
        # Sets the slideshow playback direction to backward
        slideshow.direction = PlayBackDirection.BACKWARD
        # Advance to the previous image
        slideshow.advance()
        wav_file = basename(slideshow.current_image_name) + ".wav"
        play_file(wav_file)

The code looks for .bmp files to play -- when it finds one it then parses that filename and looks for a .wav file with the same name. For example, renoir.bmp would cause the code to look for a renoir.wav file to play.

The capacitive touch pads are used to advance to the next image or the previous image.

Media

This is a media bundle you can use to try out your Tiny Museum Tour Device. Download the .zip file, and then uncompress it. Drag the .bmp and .wav files onto your HalloWing. They must be at the top level of your HalloWing, not inside a folder.

TinyMuseumTourMedia.zip

Try it out! You'll see the image fade up and the audio play. Touch either capacitive touch pad strip to switch images.

Now, let's learn how to create our own images and sound to play!

Text editor powered by tinymce.

Prepare Visuals and Audio

Here are the specifications for the media used on your Tiny Museum Tour Device:

Images must be 128 x 128 pixel 24-bit color .bmp files
Audio must be mono, 16bit, 22KHz .wav files

We have a great guide on converting sound files to these specifications. You can record your own tour audio using the microphone built into your computer as the source in Audacity, and even layer music under it like a real museum tour recording!

To give it a bit of a machine-generated feel, I decided to use text-to-speech software for narration. On mac os, you can use the say command in a terminal to do this.

Using 'say'

The say command work in the terminal on the mac os. Open a terminal and try it out by typing this and pressing enter:

say "Welcome to the Tiny Museum Tour Device."

If you want to capture the speech as an audio file, you can add the -o flag followed by a filename:

say "Welcome to the Tiny Museum Tour Device." -o welcome.aiff

This will save the welcome.aiff file to the directory you're currently in in the terminal. The 'say' command cannot save .wav files directly, so you'll want to open them in Audacity and then convert them as per the guide linked above.

No mac? Do you have a Raspberry Pi?

We have another tutorial to do speech synthesis on Raspberry Pi.

Windows

We suggest looking for a web to speech site. Here is one but you need to register to download the sound files.

Image Conversion

You can use any image file you like as your source files -- the ones I used were downloaded from the National Gallery of Art's Images collection.

In order to use them on the HalloWing, scale your images to 128 x 128. Unless your source image is already square to begin with, this will lead to distortion. So, you'll want to scale the image proportionally so that it's longest dimension is 128 pixels, and then use black letterbox or pillarbox rectangles to fill the other dimension to 128 pixels without distortion.

There are many simple tools you can use for image file conversion, such as Preview on mac os and MS Paint on Windows. More sophisticated tools such as Photoshop and GIMP work great as well, but have steeper learning curves.

You can also search online for tools that can be used in the browser for image conversion.

Take a Tour

Now, you can proudly display your Tiny Museum Tour Device on a small stand, bookshelf, or wall! Press the copper pads to change images, and don't forget you can recharge the battery at any time by plugging the HalloWing into USB power!