This guide explores some of the User Interface (UI) elements available through The CircuitPython displayio library by creating a basic calculator. CircuitPython will handle the actual calculations and the program concentrates on the input, output, and logic. This is split into two different files. One file will be the calculator class that handles all of the backend input and calculations and the other file will handle more of the front-end UI.

For the calculator UI elements, we'll be using buttons, the label, and rectangle to create the calculator. To get the value of the button, we'll simply be reading the text that is displayed on the button. The label will normally left-align, but since most calculators are right aligned, we'll be creating a special function to shift the x-position of the label over whenever the text is updated. Since the label is basically just the text, we'll also be using a rectangle UI element to create a bounding box for the display.

The PyPortal is the perfect device for setting up as a calculator with the touchscreen and large display. If you haven't had a chance to take a look, be sure to check out our Adafruit PyPortal - IoT for CircuitPython guide.

Adafruit PyPortal - CircuitPython Powered Internet Display

PRODUCT ID: 4116
PyPortal, our easy-to-use IoT device that allows you to create all the things for the “Internet of Things” in minutes. Make custom touch screen interface...
$54.95
IN STOCK

The PyPortal has a convenient acrylic enclosure available that makes it perfect for displaying on your desk.

Adafruit PyPortal Desktop Stand Enclosure Kit

PRODUCT ID: 4146
PyPortal is our easy-to-use IoT device that allows you to create all the things for the “Internet of Things” in minutes. Create little pocket...
$9.95
IN STOCK

You will need a Micro USB cable if you don't have one.

Pink and Purple Braided USB A to Micro B Cable - 2 meter long

PRODUCT ID: 4148
This cable is super-fashionable with a woven pink and purple Blinka-like pattern!First let's talk about the cover and over-molding. We got these in custom colors,...
$3.95
IN STOCK

Fully Reversible Pink/Purple USB A to micro B Cable - 1m long

PRODUCT ID: 4111
This cable is not only super-fashionable, with a woven pink and purple Blinka-like pattern, it's also fully reversible! That's right, you will save seconds a day by...
$3.95
IN STOCK

Alternatively, if you would like to make it portable and battery-powered, be sure to check out our Portable PyPortal guide.

This guide was first published on Jul 13, 2019. It was last updated on Jul 13, 2019. This page (Overview) was last updated on Oct 04, 2019.