# HalloWing Badge Image Viewer ## HalloWing Badge Image Viewer ![](https://cdn-learn.adafruit.com/assets/assets/000/061/993/medium800/adabox_lanyard_IMG_1079_b.jpg?1537208613) ![](https://cdn-learn.adafruit.com/assets/assets/000/061/982/medium800/adabox_IMG_1056.jpg?1537159881) This mini guide will show you how to display graphics on the HalloWing's TFT screen using CircuitPython. This can be a lot of fun when paired with the lanyard if you'd like to make your own personalized conference badge or "HELLO MY NAME IS:" sign! Or, use the HalloWing as a little photo wallet to show off pictures of your kids/pets/cosplay! ## Player Prep   Plug a small LiPoly battery into the battery JST port on the HalloWing. You can use a small bit of double-stick foam tape to secure the battery to the HalloWing. Attach a lanyard to two of the mounting holes on the HalloWing. ![adabox_lanyard_IMG_1070.jpg](https://cdn-learn.adafruit.com/assets/assets/000/061/994/medium640/adabox_lanyard_IMG_1070.jpg?1537208796) ![adabox_lanyard_IMG_1073.jpg](https://cdn-learn.adafruit.com/assets/assets/000/061/995/medium640/adabox_lanyard_IMG_1073.jpg?1537208805) ![adabox_lanyard_IMG_1072.jpg](https://cdn-learn.adafruit.com/assets/assets/000/061/997/medium640/adabox_lanyard_IMG_1072.jpg?1537208829) ![](https://cdn-learn.adafruit.com/assets/assets/000/061/988/medium800/adabox_IMG_1052.jpg?1537165062) If you want some fun Halloween-themed Adafruit characters to use, download this .zip file, uncompress it, and then drag the .bmp files to your HalloWing! [Adafruit_Halloween_BMPs.zip](https://cdn-learn.adafruit.com/assets/assets/000/062/114/original/Adafruit_Halloween_BMPs.zip?1537378522) Info: ## Image Player CircuitPython Firmware Download the latest version of CircuitPython for the HalloWing specifically for displaying graphics files easily by clicking the green button below. Adafruit recommends the version 4.0 or higher. To load CircuitPython onto the HalloWing, plug in the HalloWing over USB to your computer and then double-click the reset button on the HalloWing. This will put it into bootloader mode, allowing you to change the firmware. You'll see a USB drive appear called **HALLOWBOOT.** Drag the .uf2 file you downloaded onto the **HALLOWBOOT** drive. Once it copies over, HallowWing will automatically restart and appear as a flash drive named **CIRCUITPY** , and will be ready for you to load a CircuitPython program that can take advantage of the display capabilities. [Download the latest version of CircuitPython for this board via CircuitPython.org](https://circuitpython.org/board/hallowing_m0_express/) ## File Format To prepare your graphics for the HalloWing, you'll need to size them to 128 x 128 pixels. You can do this in nearly any graphics program, such as Photoshop, GIMP, Preview on osx, ImageMagik, MS Paint, you name it! Save your file as a 16-bit .bmp file. Here you can see some example graphics. ![](https://cdn-learn.adafruit.com/assets/assets/000/061/983/medium800/adabox_IMG_1055.jpg?1537160031) ## Image File Storage Simply plug in your HalloWing over USB to your computer, and it will show up as a drive named **CIRCUITPY.** Drag your .bmp image files onto the **CIRCUITPY** drive. ![](https://cdn-learn.adafruit.com/assets/assets/000/062/255/medium800/feather_Adafruit_Halloween_BMPs_and_JEPiMac27_and_badge.jpg?1537505281) This is what the contents of your HalloWing's **CIRCUITPY** drive will look like once the images have been copied over. ![](https://cdn-learn.adafruit.com/assets/assets/000/062/256/medium800/feather_CIRCUITPY2.jpg?1537505293) ## Image Player Code This program lets you use the HalloWing as a simple image viewer. It will open the first image it finds on the flash storage, fading up its brightness. Adafruit really likes using the Mu editor to edit the CircuitPython code. [See this guide on loading and using Mu](https://learn.adafruit.com/welcome-to-circuitpython/installing-mu-editor). You can then advance to the next image or go back to the previous image by pressing the outer two "teeth" of the HalloWing. These are capacitive touch pads TOUCH4 and TOUCH1. You can also adjust the brightness down and up respectively with TOUCH3 and TOUCH2. Copy the code from below and paste it into Mu. Then, save it at **code.py** to your HalloWing. Warning: ``` import board import displayio import time import pulseio import touchio import os forward_button = touchio.TouchIn(board.TOUCH4) back_button = touchio.TouchIn(board.TOUCH1) brightness_up = touchio.TouchIn(board.TOUCH3) brightness_down = touchio.TouchIn(board.TOUCH2) #backlight = pulseio.PWMOut(board.TFT_BACKLIGHT) splash = displayio.Group() board.DISPLAY.show(splash) max_brightness = 2 ** 15 images = list(filter(lambda x: x.endswith("bmp"), os.listdir("/"))) i = 0 while True: forward = False backward = False with open(images[i], "rb") as f: try: odb = displayio.OnDiskBitmap(f) except ValueError: print("Image unsupported {}".format(images[i])) del images[i] continue face = displayio.TileGrid(odb, pixel_shader=displayio.ColorConverter(), x=0, y=0) splash.append(face) # Wait for the image to load. board.DISPLAY.wait_for_frame() # Fade up the backlight for b in range(100): #backlight.duty_cycle = b * max_brightness // 100 time.sleep(0.01) # Wait forever while not forward and not backward: forward = forward_button.value backward = back_button.value if brightness_up.value: max_brightness += 16 elif brightness_down.value: max_brightness -= 16 if max_brightness < 0: max_brightness = 0 elif max_brightness >= 2 ** 16: max_brightness = 2 ** 16 - 1 #backlight.duty_cycle = max_brightness # Fade down the backlight for b in range(50, -1, -1): #backlight.duty_cycle = b * max_brightness // 100 time.sleep(0.005) splash.pop() if forward: i += 1 elif backward: i -= 1 i %= len(images) ``` ![](https://cdn-learn.adafruit.com/assets/assets/000/061/998/medium800/adabox_lanyard_IMG_1076.jpg?1537208856) Now, you can try your hand at adjusting the code to do other things! How about a random image player for use with the lanyard as a badge? What about four images each assigned to a different touch button? You can do all sorts of nifty things with the HalloWing display! Info: ## Featured Products ### Adafruit HalloWing M0 Express [Adafruit HalloWing M0 Express](https://www.adafruit.com/product/3900) [This is Hallowing..this is Hallowing... Hallowing! Hallowing! ](https://www.youtube.com/watch?v=kGiYxCUAhks&t=39s) Are you the kind of person who doesn't like taking down the skeletons and spiders until after January? Well, we've got the development board for... In Stock [Buy Now](https://www.adafruit.com/product/3900) [Related Guides to the Product](https://learn.adafruit.com/products/3900/guides) ### AdaBox009 - HalloWing [AdaBox009 - HalloWing](https://www.adafruit.com/product/3956) Are you the kind of person who doesn't like taking down the skeletons and spiders until after January? Well, we've got the ADABOX for you. This is electronics at its _most spooky!_ ADABOX 009 is Halloween themed, for all of us who love scares, costumes, and (of... No Longer Stocked [Buy Now](https://www.adafruit.com/product/3956) [Related Guides to the Product](https://learn.adafruit.com/products/3956/guides) ### Lithium Ion Polymer Battery - 3.7V 350mAh [Lithium Ion Polymer Battery - 3.7V 350mAh](https://www.adafruit.com/product/2750) 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 battery has a capacity of 350mAh for a total of about 1.3 Wh. If you need a larger (or smaller!) battery, Out of Stock [Buy Now](https://www.adafruit.com/product/2750) [Related Guides to the Product](https://learn.adafruit.com/products/2750/guides) ### Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh [Lithium Ion Polymer Battery Ideal For Feathers - 3.7V 400mAh](https://www.adafruit.com/product/3898) 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 battery has a capacity of **400mAh** for a total of about 1.9 Wh. If you need a larger (or smaller!)... Out of Stock [Buy Now](https://www.adafruit.com/product/3898) [Related Guides to the Product](https://learn.adafruit.com/products/3898/guides) ## Related Guides - [Adafruit Hallowing M0](https://learn.adafruit.com/adafruit-hallowing.md) - [Hocus Pocus Book - Hallowing Eye](https://learn.adafruit.com/hocus-pocus-book-eye.md) - [Introducing Adafruit Feather](https://learn.adafruit.com/adafruit-feather.md) - [HalloWing Macintosh](https://learn.adafruit.com/hallowing-mac.md) - [HalloWing Googly Eye](https://learn.adafruit.com/hallowing-googly-eye.md) - [Reindeer Mask with Animated Eyes](https://learn.adafruit.com/reindeer-mask-with-animated-eyes.md) - [Synchronized Eyes with Two HalloWings](https://learn.adafruit.com/synchronized-eyes-with-two-hallowings.md) - [HalloWing Jump Scare Trap](https://learn.adafruit.com/hallowing-jump-scare-trap.md) - [Terminator Eyeball Upgrade](https://learn.adafruit.com/terminator-eyeball-upgrade.md) - [HalloWing Magic 9 Ball](https://learn.adafruit.com/hallowing-magic-9-ball.md) - [Creating Custom Symbol Fonts for Adafruit GFX Library](https://learn.adafruit.com/creating-custom-symbol-font-for-adafruit-gfx-library.md) - [Hallowing M0 Spirit Board](https://learn.adafruit.com/hallowing-spirit-board.md) - [HalloWing All-Seeing Skull](https://learn.adafruit.com/hallowing-all-seeing-skull.md) - [3D Printed Starro Face Mask](https://learn.adafruit.com/3d-printed-starro-face-mask.md) - [The Great Seal Mask](https://learn.adafruit.com/the-great-seal-mask.md) - [Getting Started with HalloWing for Hackaday Supercon Attendees](https://learn.adafruit.com/getting-started-with-hallowing-for-hackaday-supercon-attendees.md)