Close

User interface and display library

A project log for bleXmang

BLE MITM Group. It's pronounced the same as "blanc mange", the dessert, but it's nothing like that.

wjcarpenterWJCarpenter 05/01/2022 at 18:361 Comment

As a world-class procrastinator, I have so far spent all of my time on the Bluetooth project fiddling with details of the user interface and none of my time figuring out the Bluetooth part. (That's not completely true, but it's kind of close.) And, also as a world-class procrastinator, I can rationalize this by saying that the refining the UI is part of the road to refining the project requirements, and blah blah blah. Anyhow, here we are.

I'll eventually provide a bleXmang User Manual, but here I want to talk about how I arrived at the decisions I made. In this project log, I'll talk about selecting a display library. In the next project log, I'll talk about some of the UI gizmos I implemented.

Knowing that I would need at least some UI for device pairing led me to select the TTGO T-Display board for the project. There's a lot that you can do with that 135x240 fairly crisp full color TFT display. While thinking about things I might want to do, I evaluated a few options for a library to interact with the display. The controller is ST7789V, which is widely used, so finding support for it in candidate packages it is not much of a problem.

Here are some things I thought about:

Based on what I plan to use, I only grafted a subset of the selected library into my project. I'm not planning to use any JPEGs or PNGs. I'll only have text and a few simple shapes. As a result, I have only used the two source code files for fonts and the two source code files for the ST7789 interface. I am using those files unchanged (except as described in some detail in a later project log). I'm also only using three of the several fonts provided as samples. More about that in the next project log.

There is a kind of universal problem of getting your bearings when working with a display library. What is width, what is height, what do the "directions" mean in function calls, and so on. There are at least three parties that need to come to an agreement: the library author, the display driver chip maker, and Little Ol' Me. A device like the TTGO T-Display provides an additional element of mystery because the physical display is smaller than the ST7789's nominal resolution. Maybe if I were a graphical display expert, I would know about some convention which would make all of that obvious. Instead, I worked it all out by experimenting. What I settled on is slightly non-intuitive. If I had worked harder at it, maybe I would have come up with some things that would be more sensible. I decided to stick with something that I knew would work and isolate the non-intuitive parts in code.

Here are the configuration selections I made specifically for that library:

The pin numbers come right from the TTGO T-Display pinout diagram. The dimensions are obviously a setup for a portrait mode orientation, but even my rough plans for a UI assume landscape mode. I tried swapping the width and height (and X and Y) values, but that just led to horrible confusion in my little brain. I decided to stick with the portrait mode configuration values and deal with the difference in application code.

Here's the note I left for myself in that application code:

/*
 * The coordinates can be a little confusing. It's possible that I just didn't decode
 * what the library author was thinking. For the TTGO T-Display horizontal with
 * the buttons and USB on the right side,
 *
 * CONFIG_WIDTH  135
 * CONFIG_HEIGHT 240
 * X Offset       52
 * Y Offset       40
 *
 * Point (0,0)     is lower left corner.
 * Point (134,239) is upper right corner.
 * Horizontal text is direction 1.
 *
 * That all seems kind of normal, except that X and Y axes are swapped.
 * So, CONFIG_WIDTH is the height along the X axis. Got it?
 */

I also wrote a little function that draws some colored lines between known points, which I left behind in my code in case I ever need to work it out again. I've implemented most of the UI code already, and things have worked out pretty well. I do have to occasionally re-read that note to myself. 

Discussions

Lilith Mod wrote 09/01/2023 at 13:36 point

I liked your work on the user interface, and I think that your display library for Blexmang is truly impressive. It reveals the power of technology to strengthen user experiences. It's incredible how digital tools like this can create user-friendly interfaces. While talking about the creating spaces, I recently came across an article https://www.bookishelf.com/the-impact-of-libraries-creating-spaces-for-exploration-and-discovery/ that explaines the impact of libraries as spaces for exploration and discovery. Your project is about creating a digital space for interaction, physical libraries offer spaces where individuals can explore and discover knowledge.

  Are you sure? yes | no