Screen Interface Prototype

While I have been rather neg­li­gent with my blog updates I have been kick­ing goals with progress on the Grid-Eye ther­mal sen­sor, BananaPi screens and the user inter­face. Of these it is user inter­face that I am going to blath­er about here.

My pri­ma­ry goal of this project is to improve the microwave user inter­face, shift­ing away from four char­ac­ter sev­en seg­ment dis­plays to a more inter­ac­tive ful­ly fea­tured dis­play.

Every­thing 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­al­ly look like.

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

Then I did a pro­to­type imple­men­ta­tion in HTML to iter­ate the bet­ter ideas. This pro­to­type is below, it is a ful­ly inter­ac­tive web­page — some bits pre­tend to work, oth­er bits are stubbed out.

I would real­ly appre­ci­ate it if peo­ple would play and give feed­back. It is designed for a fixed screen size of 480x800 pix­els, the pri­ma­ry user inter­face will be fin­ger on a touch­screen, there will also be gen­er­al web brows­er access for PCs and portable devices.

View in new tab/window

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

My cur­rent design guide­lines are:
  • Intu­itive to use
    • No instruc­tion man­u­al or help pages
    • No advanced touch inter­faces (slid­ing, mul­ti­touch etc.)
    • Large, obvi­ous, touch tar­gets
    • Acces­si­ble colour scheme and aria sup­port
  • For­giv­ing of mis­takes
  • Not too hideous­ly ugly

Choosing a touchscreen

When select­ing a touch­screen there is actu­al­ly an inter­est­ing choice that I have to make. There are two com­mon touch tech­nolo­gies, resis­tive and capac­i­tive, many peo­ple prob­a­bly know it as old and new touch­screens. (Inter­est­ing aside, capac­i­tive screens actu­al­ly came first in 1965 but weren’t wide­ly adopt­ed, then resis­tive screens became com­mon before capac­i­tive screens resurged with phones and became the “new” style.)

Resistive screens

A resis­tive screen works by let­ting you push one side clos­er to the oth­er and detects this change.


  • Elec­tri­cal­ly sim­ple, 4 wire sup­port built in to BananaPi A20 chip.
  • Cheap­er to man­u­fac­ture.
  • More accu­rate detec­tion than capac­i­tive screens.
  • Will work if wet.
  • Will work if wear­ing gloves, using elbow or poked with a stick.
  • Plas­tic is scratch resis­tant.
  • Can option­al­ly detect pres­sure.


  • Eas­i­er to dam­age screen.
  • Dam­aged screen is use­less, minor dam­age typ­i­cal­ly caus­es com­plete fail­ure.
  • Only sup­ports two simul­ta­ne­ous touch points.

Capacitive screens

A capac­i­tive screen detects pow­er loss to a near­by con­duc­tor such as a fin­ger. The mod­ern stan­dard is a pro­ject­ed capac­i­tive tech­nol­o­gy (PCT) pan­el which means a direct touch isn’t required, this allows a pro­tec­tive glass lay­er to be insert­ed on the top of the screen assem­bly.


  • More famil­iar to peo­ple.
  • Eas­i­er to clean.
  • Sen­si­tive PCT devices can detect fin­gers through insu­lat­ing gloves.
  • Sup­ports com­plex mul­ti­touch pat­terns.


  • Fails if coat­ed in a con­duc­tive mate­r­i­al, such as sweat or food liq­uids.
  • Sen­si­tive to mechan­i­cal design, the met­al chas­sis is a con­duc­tor which can sig­nif­i­cant­ly impact on screen oper­a­tion and sen­si­tiv­i­ty.
  • Con­duc­tiv­i­ty varies on the per­son, the person’s hydra­tion, ambi­ent humid­i­ty etc.

Further pontificating

So for some­thing portable, like a phone, going capac­i­tive is obvi­ous­ly the bet­ter choice.

For a kitchen appli­ance it is far less clear. Wear­ing dish­wash­ing gloves or smear­ing toma­to sauce across the con­trols is going to be more com­mon.

The big fac­tor I keep com­ing back to is the famil­iar­i­ty. Peo­ple expect to have a sol­id capac­i­tive touch screen and attach a high­er qual­i­ty val­ue to it than a resis­tive screen. And that the lim­i­ta­tions of the capac­i­tive screen are well under­stood so peo­ple seem hap­py to work around them.

Basi­cal­ly the engi­neer in me leans towards resis­tive, the mar­ket­ing orphan I recent­ly adopt­ed says capac­i­tive.

So for now I’m get­ting both. I am already famil­iar with capac­i­tive touch pan­els and have one com­ing as part of one of my screens. So I just need to acquire a resis­tive pan­el to play with and under­stand.


Buy­ing a resis­tive pan­el is far hard­er than it should be… most­ly due to lim­i­ta­tions with the won­drous site aliba­ba.

Aliba­ba is fan­tas­tic for inter­act­ing with com­po­nent sup­pli­ers but the search engine is absolute rub­bish, pre-Google Yahoo rub­bish. (As Yahoo used to own a sub­stan­tial chunk of Aliba­ba maybe it is lit­er­al­ly the pre-Google Yahoo rub­bish.) Essen­tial­ly you enter some words, Yahoo search­es for those words in the title of each prod­uct, the prod­uct with the most words in com­mon is the top of the list. Which means that the retail­ers cre­ate new dupli­cate prod­uct entries with dif­fer­ent titles try­ing to hold the bin­go card that match­es your search words. One touch­screen man­u­fac­tur­er had a sin­gle 4 wire resis­tive touch prod­uct, avail­able in about 15 dif­fer­ent sizes. They had rough­ly 1800 bin­go cards/product entries try­ing to attract eye­balls.

(A nice trick with Aliba­ba direct is that they don’t keep these all updat­ed, so you can often get up to 20% off by find­ing a dif­fer­ent­ly priced entry of the same prod­uct from the same man­u­fac­tur­er.)

Once I find a man­u­fac­tur­er 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­ous­ly lying about in their mar­ket­ing, if there are obvi­ous lies I can see then there are prob­a­bly sub­tle lies that I can’t and will bite me lat­er. With resis­tive touch­screens how­ev­er EVERYBODYalmost every­body lies, pos­si­bly this is relat­ed to the above Aliba­ba is crap rant. And it doesn’t look like lies that help them, a 4 wire touch­screen has four ana­log pas­sive resis­tive 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 clear­ly is a 4 wire FPC con­nec­tor, 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­box­es box for inter­face and they feel the need to tick some­thing… Anoth­er odd one is they list a res­o­lu­tion, num­bers vary but all are wrong. It is an ana­log device, any res­o­lu­tion lim­i­ta­tions come from the quan­ti­za­tion per­formed by the con­troller, which they don’t sell. Why pro­vide a fake num­ber and risk it being small­er than some­body else’s fake num­ber when the real answer is infi­nite and there­for bet­ter? *sigh*


I have reached out to three sup­pli­ers for fur­ther infor­ma­tion:

I also found some inter­est­ing capac­i­tive 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 lit­tle more com­plex than buy­ing a mon­i­tor.

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

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

This dis­play uses MIPI DSI for its video sig­nal, specif­i­cal­ly a 4 lane MIPI DSI inter­face (because stan­dards restrict choice too much many stan­dards allow incom­pat­i­bil­i­ty with­in them­selves).

MIPI DSI is an inter­est­ing stan­dard, it is a mobile indus­try stan­dard (Mobile Indus­try Proces­sor Inter­face — pro­nounced low­er­case as mipi, like nbn) which essen­tial­ly spec­i­fies a num­ber of half duplex SERDES links for throw­ing video around. Many mobile phones seem to have adopt­ed the stan­dard as it removes the need for a video con­vert­er — reduc­ing part count/cost, sim­pli­fy­ing cabling and reduc­ing inter­nal EMI. The dis­play and chip man­u­fac­tur­ers have shift­ed with the mar­ket. How­ev­er as it is fair­ly new most­ly 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 overview, detail with pret­ty 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 list­ed as sup­port­ing MIPI DSI, does sup­port rel­a­tive­ly gener­ic LVDS out­put.
    Graph­ics proces­sor is the ARM MALI400 MP2, the new­er ARM MALI cores include a dis­play con­troller but I believe this wasn’t the case for the MALI400. I haven’t been able to find doc­u­men­ta­tion on what dis­play con­troller All­win­ner used in the A20 chipset.
    Some web­sites do claim that BPI has a MIPI DSI out­put, I think they are wrong and are sim­ply assum­ing that the Rasp­ber­ryPi look-alike video head­er is a func­tion-alike video head­er.
  • BananaPi M2
    Uses the All­win­ner A31s (datasheet) chipset which does not sup­port MIPI DSI out­put.
    The All­win­ner A31 does, but it seems they removed it when plu­ral­is­ing chip.
    The SinoVoip web­site lists the out­put as “LVDS/RGB/CPU dis­play inter­face (DSI) for raw LCD pan­els” on the prod­uct page. How­ev­er the DSI gets dropped when get­ting into the detailed LCD con­nec­tion infor­ma­tion.
  • BananaPi M3
    Uses the All­win­ner A83T chipset
    Specif­i­cal­ly states sup­port for MIPI DSI and MIPI CSI inter­faces, with ded­i­cat­ed head­ers.
    How­ev­er this isn’t avail­able yet, when con­tact­ed SinoVoip sug­gest­ed it should be out around the end of this year.
  • Rasp­ber­ry Pi
    The Rasp­ber­ry Pi uses a Broad­com chipset which sup­ports and has a head­er for 2 lane MIPI DSI out­put.
    How­ev­er due to dri­ver issues this out­put isn’t gen­er­al­ly use­able.
    There are com­plex projects made with cus­tom hard­ware to con­vert the HDMI out­put to MIPI DSI.
    The Rasp­ber­ry foun­da­tion pro­duced a screen which uses the MIPI DSI out­put with ker­nel sup­port. Appar­ent­ly they man­aged to do it in such a way that gener­ic boards aren’t sup­port­ed, just theirs.
  • Lemon Pi
    Uses an Actions S500 chipset
    Spec­i­fi­ca­tion states sup­port for MIPI DSI but doesn’t spec­i­fy how many lanes and the S500 doc­u­men­ta­tion doesn’t men­tion DSI.
    Not yet avail­able, indi­ca­tions that things are hap­pen­ing so may ship this year.
    Includes (option­al) built in bootable per­ma­nent stor­age.
  • Oth­er boards
    There are oth­er sys­tems out there which aren’t suit­able for var­i­ous rea­sons.
    For exam­ple the H4 Hum­ming­bird uses the All­win­ner A31 with MIPI DSI out­put but at $70 isn’t com­pet­i­tive.
  • Making choices

    I have ordered the offi­cial SinoVoip 7″ LCD touch­screen. This is a non-IPS 7″ dis­play con­nect­ed to the LCD con­nec­tor via a ded­i­cat­ed adap­tor board. It also includes a touch­screen, no details so am assume it is a capac­i­tive pan­el. The main rea­son for get­ting this screen is that as it is dis­trib­uted by SinoVoip it should be well sup­port­ed, the price is rather high but I haven’t inquired about pro­duc­tion quan­ti­ties.

    I am also nego­ti­at­ing an order of the Top­foi­son 6″ IPS screen with HDMI adap­tor. The adap­tor seems to add about $5–10 USD per unit and I expect a HDMI cable will be a few dol­lars, so the wiring ends up being a sub­stan­tial per­cent­age of the screen costs. Cur­rent­ly using MIPI DSI direct­ly isn’t an option but I will def­i­nite­ly reeval­u­ate down the track once the next gen­er­a­tion of boards comes out.

Return top