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.

CuPID Touchscreen I : Touchscreen in a box

What are we doing?

We’re taking a CuPID and adding one of the new touchscreen displays offered on Adafruit.com. They’re reasonably priced, have functional resolution (320×240), and can give some basic HMI functionality to a CuPID controller project. The downside is that they occupy both SPI outputs and two GPIO, so you sacrifice a bit of controller functionality. This is obviously not compatible with our SPI board. If you’re doing your IO on only a few GPIO, or using other interfaces like UART, I2C, or 1Wire, this doesn’t present a problem. The only other downside to this display is that it compromises the element-resistance of the case, but if you were concerned you could easily seal this up with some silicone.

Preparing the enclosure

This is the lion’s share of the work. If you don’t have a mill, it’s simply going to be tedious dremel and file work, which we used to do. It never ends up perfect and takes loads of time. As we have mentioned previously, we like the WC line of cases from Polycase. They’re NEMA and IP-rated, until we put holes in them, a clear top so we can see all the goodies, and they’re pretty easy to mill. They are also reasonably priced and can be custom-machined and printed at small quantities without breaking the bank. They also have flanges for mounting, internal panel mounts, and they sell panels for mounting components (although these are pricy).

To mill our outline in the clear top of the case, we CAD up an outline on top of the outline of the case top and print it out at full size. The case, stencil, and screen are all shown here. I’ll get up a download of this at some point so you can try at home.

Our stencil, enclosure, and touchscreen, ready for construction.
Our stencil, enclosure, and touchscreen, ready for construction.

We mount the stencil to the top of the case, and go over our screen outline with a razor. Absolute location is not critical here; the most important thing is that the holes and cutout be accurate relative to one another, so the stencil needs to be flat.

Scoring our outline on the stencil. First, we tape on the stencil to ensure it is flat, then cut out the screen outline using a razor blade. We also use the point to mark the hole locations. Once we've completed this, we can remove the stencil.
Scoring our outline on the stencil. First, we tape on the stencil to ensure it is flat, then cut out the screen outline using a razor blade. We also use the point to mark the hole locations. Once we’ve completed this, we can remove the stencil.

Next, we get to milling. We mount up the board in the vise and get to work. The polycarbonate on the top is pleasantly hard and easy to mill with a nice finish without any work. It doesn’t heat up and melt at all, which can be a problem with plastics. We run over it once with a 3/8″ bit to remove material and then with a 1/32″ to clean up and square the corners. We test the screen and enlarge the cutout slightly to make the fit a bit easier. We’ll need to go back and update our stencil to account for this. We then drill though-holes for the M2.5mm screws. Checking our drill and tap chart, we see that we want a 7/64″, but 1/8″ will be fine. We give her a good soap and dry and prepare for mounting.

Milling out the cutout and mounting holes. First we remove material with a 3/8" bit, and then come back with a 1/32" to clean up the corners and give nice edges.
Milling out the cutout and mounting holes. First we remove material with a 3/8″ bit, and then come back with a 1/32″ to clean up the corners and give nice edges.

Here is the completed top. Pictures are a bit weird since we’re doing clear on white background, but you can see the screen fits nicely. At this stage, the screen is only attached by ribbon cable, so we are careful to support it whenever we’re moving it around.

Completed top and fit with screen.
Completed top and fit with screen. Don’t mind the chips on the screen. It’s just plastic around the shop from milling out the base.

Solder the board

This part is pretty straightforward, and described on Adafruit’s tutorial.  See the part on soldering the male header, but note that the boards seem to be shipping with a shrouded header. Being careful to support the board, solder your headers. The one important point I will mention here is that you need to populate the correct header on the included board. If you are going to mount this directly on your Pi (or CuPID), you don’t need to solder a male header. (you’ll solder the stacking headers provided) If you plan to use a cable, as we are here, make sure to only populate the header on the short side of the board. THIS MATTERS. These are reversed, so if you mount the box header to the wrong pins and connect your ribbon cable, you’re gonna have a bad time. Taking a look at the RPi IO, you’ll notice that connecting it backward will put all sorts of incorrect voltage level logic into play and will do all sorts of very bad things. We mention this because, being lazy and apt to not read directions, we mounted our box header in the incorrect position at first, and when we went to double-check our connections discovered we were all kinds of reversed. Luckily we’re paranoid and did this prior to powering up the unit, so no harm and no foul. We’ve got all sorts of headers laying around, so we just did up some plain double-row headers and moved on.

If you're going to use a ribbon cable, make sure you use the header on the short side. If you don't, you'll be sorry. They're reversed!
If you’re going to use a ribbon cable, make sure you use the header on the short side. If you don’t, you’ll be sorry. They’re reversed!

Mount the Screen

Alright, so now we just need to put it together. Our goal was to get the screen almost flush, but just barely recessed, by a mm or so. This took some futzing with hardware, and we ended up with the following approach. It’s obviously specific to this case panel thickness. We use steel screws and nylon spacers and nuts. The nylon gives us a bit of compression when we tighten, and we know the nylon will give before anything we care about. In other words, if we get too aggressive with the tightening, the nylon threads will strip before we crack a board or the case. We have a steel 8mm M2.5 screw, washers on either side of the case, and a nut between the case and the touchscreen board. Any nut will do on the other side of the PCB; we’ve got a nylon nut.

Case top with hardware on front and back. Steel M2.5 8mm screws, washers on either side, with a nut on the underside.
Case top with hardware on front and back. Steel M2.5 8mm screws, nylon washers on either side, with nylon nuts on the underside to give the correct height for the enclosure top.

Next we mount the touchscreen. Before we do so, we attach some more cushy double-sided tape to the board underneath the screen, on both sides of the ribbon cable to give it full support.

Touchscreen board with tape on either side of the ribbon cable for attachment and support.
Touchscreen board with tape on either side of the ribbon cable for attachment and support.

Now we line up the screen board on the screws and put nuts on the underside. After it’s in the opening, we need to attach it to the board, as it is still only connected by the ribbon cable. As such, it’s important to keep it supported to not stress the cable connection.

Attaching the screen. First, pull back and then take adhesive off of tape. Using the backing on the larger side to keep it from sticking, first attach to area behind ribbon, and then pull out from underneath the remainder. Result: attached and aligned touchscreen.
Attaching the screen. First, pull back and then take adhesive off of tape. Using the backing on the larger side to keep it from sticking, first attach to area behind ribbon, and then pull out from underneath the remainder. Result: attached and aligned touchscreen.

The end result is a nicely aligned and slightly recessed screen.

The end result: a slightly recessed screen, firmly attached.
The end result: a slightly recessed screen, firmly attached.

The last step: hook it up and put it in a box.

Hook it up

The last step is to hook it up. Here we show connections to a CuPID base unit using the ribbon cable connector. Ignore the box header you see in the photos that we connected to the header designed to stack directly on the Pi, and watch the connection to the side header.

Attaching the screen to the CuPID. Side header, ribbon cable, pretty basic.
Attaching the screen to the CuPID. Side header, ribbon cable, pretty basic. If you’re paranoid, take a look at the traces on the touchscreen board to make sure you have the proper orientation relative to the Pi connections.

Screw in the case, and we’re all done. We’ll fire up some software and show you what this can do in a bit.

Touch screen CuPID. All done.
Touch screen CuPID. All done.

Making of a CuPID : Raspberry Pi, better.

What are we doing?

We’re making a CuPID control unit. A networked monitor, controller, and otherwise omnipotent member of our new IoT. You can read a blog post about it here or here, check out the details here, and some of the software and other hardware.

The parts

Here’s what we need to make our CuPID, numbered in the picture as below. Not pictured are power supply filter capacitor(s), which are typically installed as here.

All the parts necessary for a CuPID board
All the parts necessary for a CuPID board
  1. CuPID control board PCB
  2. Shielded RJ45 jack (3)
  3. DS2483 i2C 1Wire chip
  4. Surface mount fuse and fuse holder
  5. Through-hole PCB Mount Female USB A (2)
  6. SMT USB Micro
  7. 2-pin 3.5mm pitch male/female pair (2)
  8. Extrashort male USB A connector (2)
  9. Extra-extralong Raspberry Pi 2×13 stacking header
  10. WiFi dongle
  11. Short SD Card holder
  12. For SPI indicator board option : box header

The board

Let’s put this guy together. First, we put on the surface mount components and do a short reflow. The DS2483 and USB micro ports are pretty small.

Board with SMD parts. They are, well, not too big. We could probably hand-solder, but it wouldn't be fun.
Board with SMD parts. They are, well, not too big. We could probably hand-solder, but it wouldn’t be fun.

We could probably get away with doing them by hand, but we put on some paste and let another Pi run a reflow on them, as we did previously. These SMD USB micros are a pain to get right, but fortunately we didn’t connect the data lines on the board, so you can add on plenty of paste and not worry about having to go one-to-one, as long as we get our high and low power terminals. Before placing them, you’ll want to flip them over and take a quick blade to the short plastic posts on the underside. When we make a board again, we’ll create recesses for these. On the other hand, we may go with USB mini since we can get a through-hole version and it’s a bit more robust. Although USB micro is the ‘standard of the future’ on the roadmap, USB mini is just as easy to find and is rated for more connections.

Next, place the DS2483 on the board, taking care to orient the chip as shown in the figure, using the plus to indicate the proper direction. After placing,  we run a short reflow and go.

We test afterward with our voltmeter to make sure we got it right.

Next, we put on the surface-mount replaceable fuse. We’ve found these get a bit melty if we’re not super-careful on the reflow profile, so we do them by hand. It’s pretty easy with the large pads as long as we tin both sides.

Mounting of the replaceable fuse. Tin the pads, heat the pad to attach the fuse, and spot reflow if you're picky like me or it's not sitting quite right. I find the back of my tweezers helpful here.
Mounting of the replaceable fuse. Tin the pads, heat the pad to attach the fuse, and spot reflow if you’re picky like me or it’s not sitting quite right. I find the back of my tweezers helpful here.

Next we put in all of our through-hole components. I prefer to mount all of them and do some marathon soldering rather than doing them one by one. The shield/mount posts on the USB connectors need to be flattened prior to insertion:

The pins on these ports need straightening before insertion.
The pins on these USB ports need straightening before insertion.

We place our parts and do our soldering:

Through-hole component soldering. First, we mount them, shown top and bottom here. We do a mess of soldering, and we're ready to go.
Through-hole component soldering. First, we mount them, shown top and bottom here. We do a mess of soldering, and we’re ready to go.

Now that the board is done, it’s time to mount it to a Pi.

Marrying the Pi

Now that we’ve prepared our board, let’s get it ready for mounting on the Pi. We need to connect the USB ports and connect the header. First, we take our super-short USB connectors and solder a couple paired wires. We crimp female pins and mount into connectors:

We use these short USB connectors to pull data to the CuPID USB ports, so we can power them directly from our power supply. It also allows one port to be inside the enclosure and one outside.
We use these short USB connectors to pull data to the CuPID USB ports, so we can power them directly from our power supply. It also allows one port to be inside the enclosure and one outside.

Now we mount our superlong header. This is similar to the ones that Adafruit sell … except it’s much longer. In addition to allowing us to mount a board on top of the Pi, it extends far enough to allow us to attach a ribbon connector on top of that! This is great for anything you want to put on top, like a touch-screen. You can see how much bigger it is here:

Our extra-extralong headers, next to those from Adafruit. They're so long, we can mount the CuPID and still have room on top for.. more stuff.
Our extra-extralong headers, next to those from Adafruit. They’re so long, we can mount the CuPID and still have room on top for.. more stuff.

Before we mount it, we throw a couple pieces of thick double-sided tape to the ethernet and to the audio jack to give the board a bit of stick and cushion. We mount the CuPID board, solder our headers, and plug in our USB connectors:

Mounting the board to the Pi. A couple of pieces of thick double-sided tape give some stick and cushion to the combination. We solder the headers and connect our USB cable, and we're done.
Mounting the board to the Pi. A couple of pieces of thick double-sided tape give some stick and cushion to the combination. We solder the headers and connect our USB cable, and we’re done.

Put it in a box

Now that we’ve got the business end of our CuPID complete, let’s put it in a box to protect it. We really like the line of WC cases from Polycase. They’re water-tight (until we put holes in them), durable, and reasonably priced. They have flanges, panel mounts, and optional back panels. They’re fairly easy to mill, and when your design is complete you can have them CNC machine and label them for you, at pretty decent prices even at rather small quantities. Once we absolutely nail down our openings, we’ll definitely go this route. For the moment, we mill them by hand. For prototyping, we CAD up our openings as best we can estimate them, print them in real size, and compare them with the boards, components, and previously iterated enclosures. When we find one we like, we tape it to the enclosure, run a razor blade over the lines to score the plastic, remove the stencil, and then mill out the openings. We take a first pass with a 1/4″ or 3/8″ bit to remove material, and then go back with something small like a 1/32″ mill to reduce the radius on the corners. We sometimes go back with a file to sharpen them up.

Milling out the enclosure cutouts. For prototypes, patterns are transferred from a stencil using a razor blade, and milled out in two steps: material removal and finishing.
Milling out the enclosure cutouts. For prototypes, patterns are transferred from a stencil using a razor blade, and milled out in two steps: material removal and finishing.

After the cutouts are complete, we install standoffs on both the bottom of the board and also on the bottom of the enclosure. On the bottom of the board, we use male/female 2.5mm threaded 6mm long standoffs, which keep the board at a consistent height and solid footing. These are not in the parts list above, as we recently added them. Their installation with a couple nylon nuts are shown below.

Installation of standoffs on the board to keep the board level.
Installation of standoffs on the board to keep the board level.

To keep the boards in position, in particular to reinforce it against pushes on the inputs when cables and/or power is connected, we put some 2.5mm thread, 8mm length standoffs in the bottom of the enclosure. From the backside, we insert a couple brass 2.5mm screws. We countersink them to keep the bottom flush, and if needed, thin layer of silicone will keep this waterproof.

Installation of standoffs in enclosure to hold board in place.
Installation of standoffs in enclosure to hold board in place.

Once we clean out the enclosure, insert our SD Card in our low-profile connector, and plug in our WiFi, we slip it into the cutouts. Almost done.

Mounting of board into enclosure with standoffs.
Mounting of board into enclosure with standoffs.

Let it be seen!

At this point, we have a couple options for indicators. We can go with an indicator board we made specifically to fit in this enclosure, as we reflowed and demonstrated previously. It mounts to the internal panel mounts with standoffs and connects with an 6-conductor IDC and box connector, and has 4RGBs and 4 single-color (R,G,B,Y) LEDs. Best of all, it uses only one SPI port, employing a couple shift registers.

CuPID with indicator panel, including 4RGB and 4 single-color (R,G,B,Y) programmable indicator LEDs, all on a single SPI output.
CuPID with indicator panel, including 4RGB and 4 single-color (R,G,B,Y) programmable indicator LEDs, all on a single SPI output.

Alternatively, we can throw a nice little touchscreen on top. We’re working on that write-up currently, but the result is here:

CuPID with touchscreen. Runs on SPI outputs and two GPIO.
CuPID with touchscreen. Runs on SPI outputs and two GPIO.

Moteino + II = CuPID Remote

We at II have been poking around for some time looking for the best remote IO solution. Well, solutions. There are a lot of different wireless applications. The one we’ll address here is one with the following criteria:

  • Low-power : battery-powered for up to a year, depending on sampling frequency
  • Small form factor
  • Low cost
  • Flexibility and capability in IO
  • Preferably open-source

While we don’t want to conclude that our search is over, we’ve for the moment chosen to look at the Moteino line of wireless products. They’re sub-1Ghz, offering a good mix of range/penetration while staying out of the crowded 2.4Ghz range. They offer an on-board ATMega328p, something we’d planned on coupling with the modules from, for example, XBee or Ciseco. While the API isn’t quite as built as XBee in the context of traffic management, their community is active and full of Arduino enthusiasts. The code is open-source, so it’s sure to continually develop. The onboard AVR is Arduino IDE compatible, and best of all, it’s a nicely built board with with what we want without having to do our own board design and SMD soldering. As a bonus, it’s open-source. It’s also competitively priced at about $20 per transceiver/uC combo. And, yeah, the developer cares about his product and gives excellent customer service.

So let’s get on with it. What we want to demonstrate here is a tiny IO unit with an onboard battery or externally with room for a few basic sensors.

We start with our components. A moteino R4 with RFM69W. We also elected to use a perma-proto min tin breadboard. We love these things. Well-made plated breadboards in a tiny package. It will leave us some space to wire sensors and whatnot to the ATMega IO and give us a good physical mount for the RF unit. We can even mount a through-hole mini USB if we want to power it externally. Standard headers, when soldered long side through the protoboard, will still leave enough room to attach female jumpers, which we will use to power it from the battery here.

Moteino and protoplate
Moteino and protoplate

For the enclosure, we use a little weather-proof enclosure by Polycase, the WC20F. This thing is IP65 rated, which means that it’s dust-tight and immune to, you know, waterjets. It’s also attractively priced at about $7 and has flange mounts.

Polycase WC-20F IP65 rated enclosure.
Polycase WC-20F IP65 rated enclosure.

The base of the enclosure will be reserved for the battery, and potentially sensors that we want to slide in there. Because the lid is fairly tall and about the right size (and because we want our RF module at the top), we can mount it inside the lid.

It doesn't quite fit. Pretty close.
It doesn’t quite fit. Pretty close.

We do a tiny bit of dremel work and get it to nicely wedge into the top of the enclosure. The fit result is no fasteners required.

Board fit from top side - no fasteners required.
Board fit from top side – no fasteners required.

After we make it fit, we do the rest of the soldering with our headers and wireless unit. We attach the antenna, and the internal rails nicely line up with our ground and 3.3V lines. You either get the pretty board size up or color-labeled rails on the underside. We chose ugly side up here.

Board after soldering from bottom.
Board after soldering from bottom.
Board after soldering from top.
Board after soldering from top.
Board all done. Super.
Board all done, view from the top, nothing holding it in. Super.

We do a bit of splicing on a 9V battery to put female end and jam it into the bottom of the enclosure. If you’re trying this at home, we did mill off the panel mounts to allow the battery a bit more room.

All ready to close. Long wires, plenty of room.
All ready to close. Long wires, plenty of room.
All done! It's just that easy.
All done! It’s just that easy.

And there you have it. A tiny little enclosure with an RF module for remote monitoring. If you want an external PS or sensor, just throw in some cord grips. We’ll show you this in another post, along with how to jam some sensors in this box and read it.

See here for our install, configuration, and communication of our remote 1Wire temperature sensor.

Reference

The above makes use of the open source libraries available on github here:

Explanation and installation here: