There are many parts that are common in a good user interface, and the PyPortal is powerful enough to do some cool stuff. So let's go over a few things that you may want to think about doing with your UI.

Orientation

Chances are that your UI layout will be greatly affected by what orientation your PyPortal display is. If you have looked around at most of the guides for the PyPortal you may have noticed that most of them are using the default horizontal orientation with the USB plug on the right side. Well, that is not a limitation and this guide will show you how to easily use your display in any orientation.

Windows and Layers

The PyPortal can do quite a lot and at some point you may want to take full advantage of what it can do, and have multiple display windows to show more information and options. Using the CircuitPython Displayio library will allow you to use groups like layers that can be updated, hidden, and shown on the fly.

Backgrounds and icons

Who wants a simple colored background when you can use a full color image that can be changed at any time. Why not mix in some icons that can be switched out using code. This guide will show you an easy way to set up image placeholders that will make it easy.

Dynamic Text updates

If you are connected to an API or MQTT, chances are that you are sending text-based information to be displayed on the PyPortal. We will talk about a few ways to format that text so that the words wrap into a text box.

All the Buttons

Navigation buttons are a key part to a good UI. You will learn how to use them not only for display navigation, but also as elements on a particular layers. We will also go over how to make buttons that simulate toggle groups, momentary, and latching switches.

Beeps and Boops

Sure, you can see that a button was pressed on the screen. You may also add a satisfying sound to button presses as well. It is super easy to do, and takes your UI to the next level.