TSII_collage

CuPID Touchscreen II : Make it work, and make it usable

Ok, so we got a CuPID built and a touchscreen installed in Part I. The next step is installing the software to run it, and making some adjustments to make the small screen size usable for human fingers and eyes.

Adafruit’s tutorial is a good place to start. Let’s go to there. We download the five files as instructed, and follow the directions (we do that sometimes, honestly). When we’re done, including adding export FRAMEBUFFER=/dev/fb1 to our ~/.profile configuration file, we can run startx to get our desktop on the touchscreen.

What this gives us is a desktop that, well, works, but isn’t optimized for this tiny little display. Take a look: the background doesn’t fit, the text isn’t suitably sized, and the icons are pretty much a mess.

Startx with no modification. Needs some work.
Startx with no modification. Needs some work.

So we start futzing with the lxde environment. On the Pi, pcmanfm is used to control the desktop, and the configuration for this can be found at ~/.config/pcmanfm/LXDE/pcmanfm.conf. The ~ here means your home directory, which by default (and here) is /home/pi
. Taking a look at the file, we can see all sorts of options, at least a couple of which we want to change. First, we change the desktop image to one that’s the correct size, and also within our git repo at /var/www so we can update it when we like, with, say, version information. This is the wallpaper parameter, and we simply set the path:

wallpaper=/var/www/images/splash.png

We’ve got an image there that’s 320×240, but we can set copy any image we want to the path (say, by a shell or python script) if we change resolution.

We go ahead and scale down the font a bit as well:

desktop_font=Sans 8

This helps a lot:

Resized wallpaper and desktop icons font.
Resized wallpaper and desktop icons font.

The icons are still everywhere (and huge). Let’s reorganize them. We’ll do it manually here, but there are other ways. This method also allows us to do it programmatically if we wish. Now, if we poke around in .config/pcmanfm/LXDE/ , we find a file that defines our desktop icons’ positions. We can see the icons present in ~/Desktop (which is how we created our desktop icons. more on that later). So looking at the file, we see a list of icons, a few of which look like this:

[updatecupidweblibs.desktop]
x=20
y=10

[updateiicontrollibs.desktop]
x=20
y=60

[lxterminal.desktop]
x=20
y=110

[wpa_gui.desktop]
x=20
y=160

We can change their coordinates, and move them around as we see fit. With a little tweaking, we get this:

Lined up icons with text. Only the icons we want.
Lined up icons with text. Only the icons we want.

Not too bad. We could probably just do without the icon text. So we set the icon text size to 0. And, realistically, we probably won’t be using the terminal from the touchscreen, and if we decide we need it we’ll have a mouse and keyboard plugged in, so let’s just move it off the window. We can do that by moving the icons we don’t want out of the range of the visible window. This is nice, too, as we can make the icons visible on a larger screen (when we have a keyboard and mouse present). Or we can copy a particular screen configuration file into place. Here are the final icon settings:

[updatecupidweblibs.desktop]
x=-20
y=0

[updateiicontrollibs.desktop]
x=-20
y=70

[lxterminal.desktop]
x=-200
y=140

[wpa_gui.desktop]
x=-20
y=140

And the result:

Finished screen with text-less icons.
Finished screen with text-less icons.

Now we’ve got a nice, clear screen with clickable update icons. Next, we want to design an interface for what we’re controlling. We’ll drop that down here in juuuust a minute. It will look a little bit like this.

Leave a Reply

Your email address will not be published. Required fields are marked *