In this lab, you will:
- Explore the Badger 2040 W and learn how to use it.
- Setup Thonny: the IDE you'll use to communicate and code your digital badge.
- Learn to update the badge content to display your information.
What is a Badger 2040 W?
The Badger 2040 W is a programmable badge with an E Ink® display and wireless connectivity, powered by Raspberry Pi Pico W, made by Pimoroni. Below you see the badge set up to be used by Okta's Developer Advocate Jess Temporal following this same guide.
If you want to know more about the badge, check out Pimoroni's video on it.
What is Thonny?
Thonny is a Python IDE meant for learning programming. Its coolest feature is being capable of communicating with micropython-enabled devices, such as the badge.
You'll use Thonny to update the badge contents and program it.
Lab Setup
Required hardware and software
To complete this lab, you need a computer running macOS, Windows, or Linux.
You'll also need a Badger 2040 W full kit.
If your computer only has USB-C ports, you'll also need a USB-A to USB-C adapter.
Clone the repository
We prepared the code you are going to use ahead of time for you. Go ahead and click the button below to go to the repository:
You'll use the files in the project to update your badge later.
Install Thonny
To install Thonny you need to download the indicated version for your OS.
To do this go to the Thonny website, hover over the correct operating system, and click to download the version corresponding to your OS.
After installing it, you can open Thonny. Once opened click on View and make sure to select "Files" in the menu options, this will allow you to see your local files and your badge files.
Open the Badger 2040 W box
Now is a good time to open the box if you haven't already.
Inside you should see the following:
- A badge
- A cable
- A lanyard
- A battery pack
- A velcro sticker
Explore Your Badge
Start on the back of your badge, there you'll see the reset button (arrow) and the connector for the batteries (circled).
Keep the reset button in mind since you are going to use it soon.
Plugging in the batteries
To turn on your badge you need to provide power to it. One way to do so is by plugging in the batteries into the battery connector. The connector snugly fits the battery cable.
Once plugged in, make sure to turn the switch on the batteries to "ON", and press the reset button on the top right corner the see the badge light up.
Explore the main menu and run the badge application
Turn the front of the badge and you should be able to navigate through the badge's built-in applications.
You can use the navigation arrows to see all the applications available. All applications are Python scripts and clicking the buttons under each application will load it and update the display
After you've taken a look around and seen the available applications, navigate until you find the application named "Badge" and click the button below it. The default badge should appear on the display. The information and format of the badge displayed by this application are what we are going to change in the next steps of this lab.
If you unplug the batteries the badge will continue to display the last information on the display. You can go ahead and unplug or turn off the batteries now.
Connecting the badge to the computer
Another way to power your badge is by connecting it to your computer. The USB cord that came with the kit, once connected to your computer will provide enough energy to power the badge.
Connect the USB-A side of the cable to your computer (here you might need the adapter for USB-C) and the MicroUSB to badge on the connector you can see circled in the image above.
Once plugged into your computer, the badge should continue to work as when it had the batteries plugged in.
Explore Thonny
Understanding the interface
Thonny can be divided into 4 panes:
- Files: At the top you have your local computer files and at the bottom the files on your badge;
- Editor: Where you'll see the file's content and will be able to edit it;
- Shell: A Python shell where you can run your code, usually used for debugging;
- Interpreter selector: Where you can choose which Python flavor to run your code against.
You'll also notice that above all panes you can see a collection of buttons you can use to run scripts, save changes, and more.
Navigating to the correct folder
Now that you are familiar with the interface is a good time for you to navigate to where you have the cloned/downloaded repository.
On the top section within the Files pane, you can double-click on the directory containing the repository until you get to the badger2040wifi/ folder. You should see something similar to the image below:
Personalizing Your Badge
For simplicity's sake, you are going to replace the current contents of the badge. This will allow you to personalize your badge.
Choose your character
We made special characters you can use as the "profile" photo on the badge. Now you should pick your favorite, here are your options:
Copy the path corresponding to your preferred character from the box below:
/badges/capy.jpg
Now input the path information below. This field will update a part of this lab corresponding to your badge information in the next section automatically.
Updating the badge information
Fill in the two fields below with your information. This information will be displayed on your badge once you are finished updating your files according to the steps in this lab.
Start by adding your name. The badge will automatically adjust font size so you can display your full name.
Add your handle from social network. Remember to add the @ in the beginning.
Update the upload_these/badges/badge.txt by replacing its current contents with the text from the following text box, you'll notice that the text was personalized with the values you input in the fields above. 😉
Auth0 by OktaNAMEDevday@OktaneSOCIAL-HANDLEIMAGE-PATH
Once you edited the file upload_these/badges/badge.txt to your satisfaction, save it.
Replacing the contents of the badge
Let's make sure that you can see the files on the badge inside Thonny. To do that, ensure the badge is plugged in to your computer, that MicroPython (Raspberry Pi Pico) is selected on the interpreter (the pane on the bottom), and click the "STOP" button on the top part of Thonny. Use the image below as a reference.
You are going to select all the files inside the upload_these/ folder. To make this step easier, double-click on the upload_these/ folder to open it.
Now click on the badges/ folder, press and hold the shift key on your keyboard, and click on the WIFI_CONFIG.py file. Release the shift key.
Right-click on the selected files and on the menu that shows up, click on the option Upload to / like shown below:
By clicking the Upload to /, you will replace the current files on the badge. This will allow you to see your information on the display. Make sure to confirm the replacement.
Reset your badge
This final step!
Click the reset button this will update the badge and should show your information on the display.
Recap
In this lab, you learned the following:
- How to set up your badge to show your personalized information.
- How to operate the Badger 2040 W.
- How to use Thonny to update the badge files.
- Bringing your own Identity to the real world can be fun.
Troubleshooting
Device busy
If you get a "Device is busy..." note it means that you are running a script.
Click "OK" and then click the "STOP" button on Thonny and then you should be able to perform the action you were trying to do before.
SyntaxError
If you try to run the badge.txt file, you'll get a SyntaxError: Invalid syntax on your shell. In this particular case, that error means that you tried to run a non-script file. Make sure to always run .py files to avoid this problem.
Using your own photo on the badge
In case you want to display your own photo on the badge you'll need an image with the following dimensions:
- width: 104px
- height: 128px
Here's a Canva template you can use, it already has the correct dimensions.
Just remember to:
- Make a copy of the template to your Canva account;
- Add an image of your own (pro-tip: maybe you want to have a QR Code).
Share Your Badge
Why not show off your badge? Post your brand-new badge on your preferred social network, use the #DevDay23 hashtag, and make sure to tag us. 😉
Build Something New For Your Badge
Your badge is a wifi-enabled device, so why not build something with the knowledge you acquired today? Here's a tiny list of ideas to get you started.
- Make a protected API request;
- Grab your profile photo from an application (pro-tip: build a protected API that will send back the photo to be displayed);
- Grab your information to display from a WebApp.
We'd love to see you stretch your coding muscles, make sure to post and tag us when you share what you build.