top of page

User Interface

The User Interface (UI) is responsible for creating an intuitive and informative bridge between the device and it’s users throughout every stage of operation. Our team felt it important to keep this communication simple in appearance, yet powerful in capability. A discrete touch screen appeared to be the best way to accomplish this, drawing inspiration from today’s powerful smartphones and tablets. This type of interface offers flexibility with message formats and colors and can accommodate a variety of input gestures, eliminating the need for tactile buttons

 

Simple touch screens typically consist of two independent systems working simultaneously: a backlit RGB screen controlled by an integrated LCD driver, and a transparent touch surface that measures single point-of-contact in 2-axises. The data inputs and outputs as well as various control signals are illustrated in the diagram below:

​

We selected a peripheral device that combined these two systems together along with power regulation circuitry on a convenient breakout board, the TI BOOSTXL-K350QVG-S1. This is an expansion pcb designed for TI development kits that is built around a Kentec TFT LCD. This specific model was chosen because of its ideal size, bright backlight, quick response time, and overall low cost. 

 

The diagram above points out the type of data being communicated between this peripheral and our selected MCU. All instructions to control the LCD screen are sent over a 4-wire SPI bus, while backlight control and hardware reset are controlled using simple digital signals (It is worth noting that the brightness of the backlight can be controlled by using a PWM signal instead). The feedback from the resistive touch surface comes in the form of 4 analog voltages (2 axis pos/neg).  A schematic of the peripheral’s PCB with dimensions is shown below to explain the layout of these signals; however, please note that our final MCU pin mapping does not match this identification and the 3V3 signal was left disconnected. A custom cable was designed to connect this LCD to our final PCB; the pin mapping used by our team can be found in the project github.

Graphics

Creating the graphics for our application was made possible by the extensive grlib library, created by Texas Instruments that could be seamlessly introduced into our project. A convenient software example is included in the Tivaware C Series library introduces several of the data structures and functions designed for use with the BOOSTXL peripheral. 

​

In order to prioritize development speed and simplicity, we decided to use a set formula to create the screens for navigation. Each state of operation of the system is matched with a panel that is then populated with either text or interactive widgets, depending on what functionality is needed. An example using checkbox widgets is shown in the photo below, taken at the start of development.

The capabilities of this library allow for a large degree of creativity when developing the UI. Slider confirmations and custom loading graphics were among the features we added; however, much more is possible to tailor this experience even further. We used widgets primarily to either jump to another indexed panel or to send a notification to another RTOS task. A video is included below to illustrate this further.

For more information on software development or hardware troubleshooting please refer to our team's github page or contact us via linkedin or email.

bottom of page