Home¶
In this project we will be making a webapp for storing all the chocolate treats that you eat. To set this up, follow this tutorial first by Mr. Coxall, here.
The guide assumes that you have prior coding experience, hopefully in Python. It is designed to use just introductory concepts. No Object Oriented Programming (OOP) are used so that students in particular that have completed their first course in coding and know just variables, if statements, loops and functions will be able to follow along.
Install CircuitPython¶
Clearing the PyBadge and loading the CircuitPython UF2 file
Before doing anything else, you should delete everything already on your PyBadge and install the latest version of CircuitPython onto it. This ensures you have a clean build with all the latest updates and no leftover files floating around. Adafruit has an excellent quick start guide here to step you through the process of getting the latest build of CircuitPython onto your PyBadge. Adafruit also has a more detailed comprehensive version of all the steps with complete explanations here you can use, if this is your first time loading CircuitPython onto your PyBadge.
Just a reminder, if you are having any problems loading CircuitPython onto your PyBadge, ensure that you are using a USB cable that not only provides power, but also provides a data link. Many USB cables you buy are only for charging, not transfering data as well. Once the CircuitPython is all loaded, come on back to continue the tutorial.
Your IDE¶
One of the great things about CircuitPython hardware is that it just automatically shows up as a USB drive when you attach it to your computer. This means that you can access and save your code using any text editor. This is particularly helpful in schools, where computers are likely to be locked down so students can not load anything. Also students might be using Chromebooks, where only “authorized” Chrome extensions can be loaded.
If you are working on a Chromebook, the easiest way to start coding is to just use the built in Text app. As soon as you open or save a file with a *.py extension, it will know it is Python code and automatically start syntax highlighting.
Chromebook Text app
If you are using a non-Chromebook computer, your best beat for an IDE is Mu. You can get it for Windows, Mac, Raspberry Pi and Linux. It works seamlessly with CircuitPython and the serial console will give you much needed debugging information. You can download Mu here.
Mu IDE
Since with CircuitPython devices you are just writing Python files to a USB drive, you are more than welcome to use any IDE that you are familiar using.
Hello, World!¶
Yes, you know that first program you should always run when starting a new coding adventure, just to ensure everything is running correctly! Once you have access to your IDE and you have CircuitPython loaded, you should make sure everything is working before you move on. To do this we will do the traditional “Hello, World!” program. By default CircuitPython looks for a file called code.py in the root directory of the PyBadge to start up. You will place the following code in the code.py file:
1 | print("Hello, World!")
|
As soon as you save the file onto the PyBadge, the screen should flash and you should see something like:
Hello, World! program on PyBadge
Although this code does work just as is, it is always nice to ensure we are following proper coding conventions, including style and comments. Here is a better version of Hello, World! You will notice that I have a call to a main() function. This is common in Python code but not normally seen in CircuitPython. I am including it because by breaking the code into different functions to match different scenes, eventually will be really helpful.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #!/usr/bin/env python3
# Created by : Mr. Coxall
# Created on : January 2020
# This program prints out Hello, World! onto the PyBadge
def main():
# this function prints out Hello, World! onto the PyBadge
print("Hello, World!")
if __name__ == "__main__":
main()
|
Congratulations, we are ready to start.
Images¶
Before we can start coding, we need to have the artwork and other assets. These are merely for prettiness.
I’ve chosen some preset colours and font so I can always go back to it. This font is shoould be available by default on Windows and Mac
Main Colour: #7d3f3b Font: Times Bold Secondary Colour: #400707
I’ll be using these pictures of chocolate I found online and a poorly drawn set of logos.
Background:
Logo:
Go to my github repository at the bottom for more variations.
Download the following images from my repository. These all link to the same repository.
Background: cinnamon chocolate <https://github.com/matsuru-hoshi/chzklkt-assets/blob/master/website-images/cinamon-chocolate.jpg> chocolate and cocoa powder <https://github.com/matsuru-hoshi/chzklkt-assets/blob/master/website-images/many-chocolates.jpg> chocolate with cocoa powder <https://github.com/matsuru-hoshi/chzklkt-assets/blob/master/website-images/powder-chocolate.png> red chocolate <https://github.com/matsuru-hoshi/chzklkt-assets/blob/master/website-images/red-chocolate.jpg>
Logo: https://github.com/matsuru-hoshi/chzklkt-assets/tree/master/logo