Xin Wen

How to Make (almost) Anything

Week 12: Interface and Application Programming


1. Attempt with TkInter
2. Processing

This week's assignment is to make an interface for an input device we made. So I am kind of behind on my final project so I wanted to make sure to tie this week's assignment into my final project. For my final project, I wanted to make a physical Mood Meter so people can understand the nuinance of their emotions. The interface will be a visualization of the emotion the user identify. I borrowed the UI from the Mood Meter app and recreated it in Processing. I wanted to have the user identify one of the four main category of emotions through touch input (I made a step response TxRx board last week, which I am going to modify it into a pressure sensing board) and then display different emotions in the category in Processing. I was away for the entire Thanksgiving vacation so I haven't gotten around to finish the pressure sensing board, so as of now, the Processing sketch works on its own but it's not interfacing with any board yet.


1. Attempt with TkInter

I've used Processing before so I wanted to try something new at first. I started with TkInter, Python's de-facto standard GUI. I wanted to have each of the emotions be a colored button so user can click on them to record their feelings. However, I couldn't get the buttons to change their background colors. After googling, it seems like it's a mac issue that you cannot change the color of a button. You could change the hightlighted color of a button, which basically creates a colored frame around the button, but I thought it looked super ugly. Since color is going to be an important feature in my application, I decided to switch back to Processing.

2. Processing

The structure of my Processing sketch is fairly straightforward. There's a main page which asks user to select one of the four categories. As of right now, there are buttons to click but once I finish the board, I will get rid of those buttons and have touch inputs to select which emotion page to display. Here is the code.

Figure 1. Main page of the application.
Figure 2. The page for anger/fear related emotions.