Screen Interface Prototype

While I have been rather neg­li­gent with my blog updates I have been kick­ing goals with pro­gress on the Grid-Eye thermal sensor, BananaPi screens and the user inter­face. Of these it is user inter­face that I am going to blather about here.

My primary goal of this pro­ject is to improve the microwave user inter­face, shift­ing away from four char­ac­ter seven seg­ment dis­plays to a more inter­act­ive fully fea­tured display.

Everything else, most of the work, is to sup­port and imple­ment this improve­ment. As I am now up to play­ing with the screens, select­ing screen sizes and touch inter­faces it seemed worth­while to spend a bit of time con­sid­er­ing what the GUI will actu­ally look like.

I did a few pages of pen­cil sketches, use­ful to work through a wide vari­ety of ideas.

Then I did a pro­to­type imple­ment­a­tion in HTML to iter­ate the bet­ter ideas. This pro­to­type is below, it is a fully inter­act­ive webpage — some bits pre­tend to work, other bits are stubbed out.

I would really appre­ci­ate it if people would play and give feed­back. It is designed for a fixed screen size of 480×800 pixels, the primary user inter­face will be fin­ger on a touch­screen, there will also be gen­eral web browser access for PCs and port­able devices.

View in new tab/window

The source code is avail­able on git­hub, it is pro­to­type code so there are more than few short­cuts and lots of poor practices.

My cur­rent design guidelines are:

  • Intu­it­ive to use
    • No instruc­tion manual or help pages
    • No advanced touch inter­faces (slid­ing, mul­ti­t­ouch etc.)
    • Large, obvi­ous, touch targets
    • Access­ible col­our scheme and aria support
  • For­giv­ing of mistakes
  • Not too hideously ugly

Choosing a touchscreen

When select­ing a touch­screen there is actu­ally an inter­est­ing choice that I have to make. There are two com­mon touch tech­no­lo­gies, res­ist­ive and capa­cit­ive, many people prob­ably know it as old and new touch­screens. (Inter­est­ing aside, capa­cit­ive screens actu­ally came first in 1965 but weren’t widely adop­ted, then res­ist­ive screens became com­mon before capa­cit­ive screens resur­ged with phones and became the “new” style.)

Res­ist­ive screens

A res­ist­ive screen works by let­ting you push one side closer to the other and detects this change.


  • Elec­tric­ally simple, 4 wire sup­port built in to BananaPi A20 chip.
  • Cheaper to manufacture.
  • More accur­ate detec­tion than capa­cit­ive screens.
  • Will work if wet.
  • Will work if wear­ing gloves, using elbow or poked with a stick.
  • Plastic is scratch resistant.
  • Can option­ally detect pressure.


  • Easier to dam­age screen.
  • Dam­aged screen is use­less, minor dam­age typ­ic­ally causes com­plete failure.
  • Only sup­ports two sim­ul­tan­eous touch points.

Capa­cit­ive screens

A capa­cit­ive screen detects power loss to a nearby con­ductor such as a fin­ger. The mod­ern stand­ard is a pro­jec­ted capa­cit­ive tech­no­logy (PCT) panel which means a dir­ect touch isn’t required, this allows a pro­tect­ive glass layer to be inser­ted on the top of the screen assembly.


  • More famil­iar to people.
  • Easier to clean.
  • Sens­it­ive PCT devices can detect fin­gers through insu­lat­ing gloves.
  • Sup­ports com­plex mul­ti­t­ouch patterns.


  • Fails if coated in a con­duct­ive mater­ial, such as sweat or food liquids.
  • Sens­it­ive to mech­an­ical design, the metal chassis is a con­ductor which can sig­ni­fic­antly impact on screen oper­a­tion and sensitivity.
  • Con­duct­iv­ity var­ies on the per­son, the person’s hydra­tion, ambi­ent humid­ity etc.

Fur­ther pontificating

So for some­thing port­able, like a phone, going capa­cit­ive is obvi­ously the bet­ter choice.

For a kit­chen appli­ance it is far less clear. Wear­ing dish­wash­ing gloves or smear­ing tomato sauce across the con­trols is going to be more common.

The big factor I keep com­ing back to is the famili­ar­ity. People expect to have a solid capa­cit­ive touch screen and attach a higher qual­ity value to it than a res­ist­ive screen. And that the lim­it­a­tions of the capa­cit­ive screen are well under­stood so people seem happy to work around them.

Basic­ally the engin­eer in me leans towards res­ist­ive, the mar­ket­ing orphan I recently adop­ted says capacitive.

So for now I’m get­ting both. I am already famil­iar with capa­cit­ive touch pan­els and have one com­ing as part of one of my screens. So I just need to acquire a res­ist­ive panel to play with and understand.


Buy­ing a res­ist­ive panel is far harder than it should be… mostly due to lim­it­a­tions with the won­drous site alibaba.

Alibaba is fant­astic for inter­act­ing with com­pon­ent sup­pli­ers but the search engine is abso­lute rub­bish, pre-Google Yahoo rub­bish. (As Yahoo used to own a sub­stan­tial chunk of Alibaba maybe it is lit­er­ally the pre-Google Yahoo rub­bish.) Essen­tially you enter some words, Yahoo searches for those words in the title of each product, the product with the most words in com­mon is the top of the list. Which means that the retail­ers cre­ate new duplic­ate product entries with dif­fer­ent titles try­ing to hold the bingo card that matches your search words. One touch­screen man­u­fac­turer had a single 4 wire res­ist­ive touch product, avail­able in about 15 dif­fer­ent sizes. They had roughly 1800 bingo cards/product entries try­ing to attract eyeballs.

(A nice trick with Alibaba dir­ect is that they don’t keep these all updated, so you can often get up to 20% off by find­ing a dif­fer­ently priced entry of the same product from the same manufacturer.)

Once I find a man­u­fac­turer I try to fig­ure out if I can trust them. A warn­ing trig­ger for me is any­thing that they are obvi­ously lying about in their mar­ket­ing, if there are obvi­ous lies I can see then there are prob­ably subtle lies that I can’t and will bite me later. With res­ist­ive touch­screens how­ever EVERYBODYalmost every­body lies, pos­sibly this is related to the above Alibaba is crap rant. And it doesn’t look like lies that help them, a 4 wire touch­screen has four ana­log pass­ive res­ist­ive wires, they state this, then in the inter­face sec­tion they state “RS232 or USB inter­face”… which I don’t under­stand. It clearly is a 4 wire FPC con­nector, there is no RS232 or USB plug in the pic­ture, no men­tion in the descrip­tion. I sus­pect there is a series of check­boxes box for inter­face and they feel the need to tick some­thing… Another odd one is they list a res­ol­u­tion, num­bers vary but all are wrong. It is an ana­log device, any res­ol­u­tion lim­it­a­tions come from the quant­iz­a­tion per­formed by the con­trol­ler, which they don’t sell. Why provide a fake num­ber and risk it being smal­ler than some­body else’s fake num­ber when the real answer is infin­ite and there­for bet­ter? *sigh*


I have reached out to three sup­pli­ers for fur­ther information:

I also found some inter­est­ing capa­cit­ive touch man­u­fac­tur­ers in case I go that route:

State of displays

Tee­ing up a dis­play for an embed­ded sys­tem is a little more com­plex than buy­ing a monitor.

At the core of it is one of my favor­ite say­ings, “The won­der­ful thing about stand­ards is that there are so many to choose from.”

Start­ing from the screen end of things, I want a screen that is roughly 150x90mm in size. Because I want it view­able from the side and ideally all angles, I have a strong pref­er­ence for an IPS dis­play. I found a screen that is really nice,Topfoison’s 6″ IPS dis­play.

This dis­play uses MIPI DSI for its video sig­nal, spe­cific­ally a 4 lane MIPI DSI inter­face (because stand­ards restrict choice too much many stand­ards allow incom­pat­ib­il­ity within themselves).

MIPI DSI is an inter­est­ing stand­ard, it is a mobile industry stand­ard (Mobile Industry Pro­cessor Inter­face — pro­nounced lower­case as mipi, like nbn) which essen­tially spe­cifies a num­ber of half duplex SERDES links for throw­ing video around. Many mobile phones seem to have adop­ted the stand­ard as it removes the need for a video con­verter — redu­cing part count/cost, sim­pli­fy­ing cabling and redu­cing internal EMI. The dis­play and chip man­u­fac­tur­ers have shif­ted with the mar­ket. How­ever as it is fairly new mostly it is new/expensive hard­ware with sup­port.
If you are meant to be doing some­thing else here is some fur­ther read­ing, nice over­view, detail with pretty scope pic­tures.

So, look­ing at hard­ware to plug in to this we have:

  • BananaPi M1, the board I have been plan­ning on using.
    Is not lis­ted as sup­port­ing MIPI DSI, does sup­port rel­at­ively gen­eric LVDS out­put.
    Graph­ics pro­cessor is the ARM MALI400 MP2, the newer ARM MALI cores include a dis­play con­trol­ler but I believe this wasn’t the case for the MALI400. I haven’t been able to find doc­u­ment­a­tion on what dis­play con­trol­ler All­win­ner used in the A20 chip­set.
    Some web­sites do claim that BPI has a MIPI DSI out­put, I think they are wrong and are simply assum­ing that the Rasp­berryPi look-alike video header is a function-alike video header.
  • BananaPi M2
    Uses the All­win­ner A31s (data­sheet) chip­set which does not sup­port MIPI DSI out­put.
    The All­win­ner A31 does, but it seems they removed it when plur­al­ising chip.
    The Sino­Voip web­site lists the out­put as “LVDS/RGB/CPU dis­play inter­face (DSI) for raw LCD pan­els” on the product page. How­ever the DSI gets dropped when get­ting into the detailed LCD con­nec­tion inform­a­tion.
  • BananaPi M3
    Uses the All­win­ner A83T chip­set
    Spe­cific­ally states sup­port for MIPI DSI and MIPI CSI inter­faces, with ded­ic­ated head­ers.
    How­ever this isn’t avail­able yet, when con­tac­ted Sino­Voip sug­ges­ted it should be out around the end of this year.
  • Rasp­berry Pi
    The Rasp­berry Pi uses a Broad­com chip­set which sup­ports and has a header for 2 lane MIPI DSI out­put.
    How­ever due to driver issues this out­put isn’t gen­er­ally useable.
    There are com­plex pro­jects made with cus­tom hard­ware to con­vert the HDMI out­put to MIPI DSI.
    The Rasp­berry found­a­tion pro­duced a screen which uses the MIPI DSI out­put with ker­nel sup­port. Appar­ently they man­aged to do it in such a way that gen­eric boards aren’t sup­por­ted, just theirs.
  • Lemon Pi
    Uses an Actions S500 chip­set
    Spe­cific­a­tion states sup­port for MIPI DSI but doesn’t spe­cify how many lanes and the S500 doc­u­ment­a­tion doesn’t men­tion DSI.
    Not yet avail­able, indic­a­tions that things are hap­pen­ing so may ship this year.
    Includes (optional) built in boot­able per­man­ent storage.
  • Other boards
    There are other sys­tems out there which aren’t suit­able for vari­ous reas­ons.
    For example the H4 Hum­ming­bird uses the All­win­ner A31 with MIPI DSI out­put but at $70 isn’t competitive.
  • Mak­ing choices

    I have ordered the offi­cial Sino­Voip 7″ LCD touch­screen. This is a non-IPS 7″ dis­play con­nec­ted to the LCD con­nector via a ded­ic­ated adaptor board. It also includes a touch­screen, no details so am assume it is a capa­cit­ive panel. The main reason for get­ting this screen is that as it is dis­trib­uted by Sino­Voip it should be well sup­por­ted, the price is rather high but I haven’t inquired about pro­duc­tion quantities.

    I am also nego­ti­at­ing an order of the Top­foison 6″ IPS screen with HDMI adaptor. The adaptor seems to add about $5 – 10 USD per unit and I expect a HDMI cable will be a few dol­lars, so the wir­ing ends up being a sub­stan­tial per­cent­age of the screen costs. Cur­rently using MIPI DSI dir­ectly isn’t an option but I will def­in­itely ree­valu­ate down the track once the next gen­er­a­tion of boards comes out.

Return top