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.

Front view of a Adafruit PyPortal - CircuitPython Powered Internet Display with a pyportal logo image on the display.
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...
In Stock

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

Assembled PyPortal in acrylic enclosure
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...
In Stock

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

Fully Reversible Pink/Purple USB A to micro B Cable
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...
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 Oct 04, 2023.

This page (Overview) was last updated on Mar 31, 2019.

Text editor powered by tinymce.