Improving responsiveness of laggy buttons

Android Processing

jimthree

Improving responsiveness of laggy buttons

in Android Processing • 11 months ago

Hi Folks.

I've got an android tablet app that has quite a few buttons on it, (35 to be precise!). The responsiveness of the buttons is a bit laggy, probably 500ms or so. I'm wondering what, if anything, I can do with my code to try and improve the lag.

The co-ordinates and size of each button are stored in array of objects (uiELement) and when a mousePressed() event is fired, I cycle through the array to see if the X,Y of the 'mouse' was within the boundary of any of the buttons.

Just to put in context, the app looks like this:

The full Sketch is pasted below. If anyone knows of any optimisations that I can use to improve the performance, that would be much appreciated!

thanks

Jim

              
               color light = color(0,104,141); color dark = color(0,33,87); color txt = color(255,255,255); int txtsize = 12; int maxlines = 16; ArrayList debugText; uiElement[] uiElements = new uiElement[35]; class uiElement { int x,y,w,h,lx,ly; String label; int active; String group; uiElement(int c_x, int c_y, int c_w, int c_h, int c_lx, int c_ly, String c_label, String c_group) { x = c_x; y = c_y; w = c_w; h = c_h; lx = x+c_lx; ly = y+c_ly; label = c_label; active = 1; group = c_group; } } void setup() { orientation(LANDSCAPE); background(0); addUiElements(); debugText = new ArrayList(); debugText.add("helloo"); debugText.add("this is some text"); //noLoop(); } void draw() { drawUiElements(); int count = debugText.size(); if(count>maxlines) debugText.remove(0); drawTextArea(40, 500, 1050, 250, 10,10); } void addUiElements() { uiElements[0] = new uiElement( 40,50,100,100,5,5,"LED 1","grid"); uiElements[1] = new uiElement(140,50,100,100,5,5,"LED 2","grid"); uiElements[2] = new uiElement(240,50,100,100,5,5,"LED 3","grid"); uiElements[3] = new uiElement(340,50,100,100,5,5,"LED 4","grid"); uiElements[4] = new uiElement(440,50,100,100,5,5,"LED 5","grid"); uiElements[5] = new uiElement(540,50,100,100,5,5,"LED 6","grid"); uiElements[6] = new uiElement( 40,150,100,100,5,5,"LED 7","grid"); uiElements[7] = new uiElement(140,150,100,100,5,5,"LED 8","grid"); uiElements[8] = new uiElement(240,150,100,100,5,5,"LED 9","grid"); uiElements[9] = new uiElement(340,150,100,100,5,5,"LED 10","grid"); uiElements[10] = new uiElement(440,150,100,100,5,5,"LED 11","grid"); uiElements[11] = new uiElement(540,150,100,100,5,5,"LED 12","grid"); uiElements[12] = new uiElement( 40,250,100,100,5,5,"LED 13","grid"); uiElements[13] = new uiElement(140,250,100,100,5,5,"LED 14","grid"); uiElements[14] = new uiElement(240,250,100,100,5,5,"LED 15","grid"); uiElements[15] = new uiElement(340,250,100,100,5,5,"LED 16","grid"); uiElements[16] = new uiElement(440,250,100,100,5,5,"LED 17","grid"); uiElements[17] = new uiElement(540,250,100,100,5,5,"LED 18","grid"); uiElements[18] = new uiElement( 40,350,100,100,5,5,"LED 19","grid"); uiElements[19] = new uiElement(140,350,100,100,5,5,"LED 20","grid"); uiElements[20] = new uiElement(240,350,100,100,5,5,"LED 21","grid"); uiElements[21] = new uiElement(340,350,100,100,5,5,"LED 22","grid"); uiElements[22] = new uiElement(440,350,100,100,5,5,"LED 23","grid"); uiElements[23] = new uiElement(540,350,100,100,5,5,"LED 24","grid"); //drawFunctionButtons(690,50,100,100,4,1,50,0); uiElements[24] = new uiElement(690,50,100,100,5,5,"F1","func"); uiElements[25] = new uiElement(840,50,100,100,5,5,"F2","func"); uiElements[26] = new uiElement(990,50,100,100,5,5,"F3","func"); uiElements[27] = new uiElement(1140,50,100,100,5,5,"F4","func"); //drawSliders(690,200,100,250,4,1,50,0); uiElements[28] = new uiElement(690,200,100,250,5,5,"Slide1","slide"); uiElements[29] = new uiElement(840,200,100,250,5,5,"Slide2","slide"); uiElements[30] = new uiElement(990,200,100,250,5,5,"Slide3","slide"); uiElements[31] = new uiElement(1140,200,100,250,5,5,"Slide4","slide"); //drawAppControl(1140,500,100,50,1,3,0,50); uiElements[32] = new uiElement(1140,500,100,50,5,5,"App1","app"); uiElements[33] = new uiElement(1140,600,100,50,5,5,"App2","app"); uiElements[34] = new uiElement(1140,700,100,50,5,5,"App3","app"); } void drawUiElements() { for (int i = 0; i < uiElements.length; i++) { if (uiElements[i].active>1) { strokeWeight(2); stroke(light); fill(light); rect(uiElements[i].x,uiElements[i].y,uiElements[i].w,uiElements[i].h); fill(txt); textSize(txtsize); textAlign(LEFT, TOP); text(uiElements[i].label,uiElements[i].lx,uiElements[i].ly); uiElements[i].active--; } if (uiElements[i].active==1) { strokeWeight(2); stroke(light); fill(dark); rect(uiElements[i].x,uiElements[i].y,uiElements[i].w,uiElements[i].h); uiElements[i].active--; fill(txt); textSize(txtsize); textAlign(LEFT, TOP); text(uiElements[i].label,uiElements[i].lx,uiElements[i].ly); } } } void drawTextArea(int x, int y, int w, int h, int px, int py) { strokeWeight(2); stroke(light); fill(dark); rect(x,y,w,h); fill(txt); textSize(txtsize); textAlign(LEFT, TOP); int count = debugText.size(); for (int i = 0; i<count; i++) { String debug = (String) debugText.get(i); text(debug, x+px,y+py+((txtsize+2)*i),w-px,h-py); } } void drawFunctionButtons(int x, int y, int bw, int bh, int nw, int nh, int sw, int sh) { strokeWeight(2); stroke(light); fill(dark); for (int w = 0; w < nw; w++) { for (int h = 0; h < nh; h++) { rect(x+((bw+sw)*w),y+((bh+sh)*h),bw,bh); } } } void drawSliders(int x, int y, int bw, int bh, int nw, int nh, int sw, int sh) { strokeWeight(2); stroke(light); fill(dark); for (int w = 0; w < nw; w++) { for (int h = 0; h < nh; h++) { rect(x+((bw+sw)*w),y+((bh+sh)*h),bw,bh); } } } void drawAppControl(int x, int y, int bw, int bh, int nw, int nh, int sw, int sh) { strokeWeight(2); stroke(light); fill(dark); for (int w = 0; w < nw; w++) { for (int h = 0; h < nh; h++) { rect(x+((bw+sw)*w),y+((bh+sh)*h),bw,bh); } } } void mousePressed() { for (int i = 0; i < uiElements.length; i++) { if ((mouseX > uiElements[i].x && mouseX < uiElements[i].x+uiElements[i].w)&&(mouseY > uiElements[i].y && mouseY < uiElements[i].y+uiElements[i].h)) { uiElements[i].active=3; debugText.add(uiElements[i].label+" pressed"); break; } } // String temp ="pressed at x:"+mouseX+" y:"+mouseY; // debugText.add(temp); //println(temp); } public void resume() { } public void pause() { }

Replies(14)

Chrisir

Re: Improving responsiveness of laggy buttons

11 months ago

Checking the buttons
if it was a complete grid like a chess board you could
have two separate for loops (one after another)

the first for loop goes x to the right getting you the column, checking only x, exiting when found
the 2nd for loop going y down getting you the row

That's much faster than going through all cells of a grid as you see often here in the forum.

Drawing the buttons
Is it necessary to paint all the buttons in draw() when they don't change? This is costly...

PhiLho

Re: Improving responsiveness of laggy buttons

11 months ago

In drawUiElements, you call repeatedly functions with always the same values: strokeWeigth, textSize, etc.
Put them before the loop, keep in the loop only the elements that change depending on the button state.
The textSize() call might be critical... Actually, it seems not to change in your whole application, you can even move it to setup()...

GoToLoop

Re: Improving responsiveness of laggy buttons

11 months ago

Hello jimthree !
Tried to use the "private static final" trick everywhere I could, besides removing redundancy and other tweaks.
I have the impression it got faster. Dunno for sure. Check it out:

Newest version (15th):

Corrected a bug of mine where uiElems[i].active would become negative.
Added drawActiveElem() method inside class uiElem
Now button elements are drawn once only until states are re-changed!
Now using enhanced loops for class uiElem
Shorter version, cut off non-used functions!
Removed unused field group !
Backwards loop w/ debugText.size()-1 !!!
Transferred drawTextArea() from draw() to mousePressed()
Added a --nullCounter to turn off draw() when it reaches zero inside drawUiElems()
Started using pmouseX & pmouseY in place of mouseX & mouseY . Does any1 know if these variants are actually faster inside mousePressed() ?
Pre-calcs in drawTextArea() before for backwards loop .
New method uiElem.checkButtonPress() , along new pre-calc variables xw & yh . These might alleviate the bottleneck within mousePressed() 's enhanced loop + if condition !
A more compact addUiElems() version.
Newer methods -> drawInactiveElem() & drawElem()
Due to some possible regression bug in Android/Arduino, back to use mouseX & mouseY. No apparent improvements anywayz.

/*
Buttons on Android (15th Modification)
 http://forum.processing.org/topic/improving-responsiveness-of-laggy-buttons
 by jimthree
 */
private static final color light = #00688D;
private static final color dark  = #002157;
private static final color txt   = #FFFFFF;
private static final color bg    = 0;

private static final byte  txtSize   = 12;
private static final byte  maxLines  = 16;

private static final byte  thickness = 2;
private static final byte  fps = 30;
private static final byte  activeDelay = 2;

private static final ArrayList<String> debugText = new ArrayList();

private static final byte  uiElemNum = 35;
private static final uiElem[] uiElems = new uiElem[uiElemNum];
//
//
private final class uiElem {
    int x, y, w, h;
    int xw, yh, lx, ly;
    byte   active = 1;
    String label;

    uiElem(int c_x, int c_y, int c_w, int c_h, 
    int c_lx, int c_ly, String c_label)
    {    
        x  = c_x;
        y  = c_y;
        w  = c_w;
        h  = c_h;

        xw = x+w;
        yh = y+h;

        lx = x + c_lx;
        ly = y + c_ly;

        label = c_label;
    }

    final void drawElem() {
        rect(x, y, w, h);

        fill(txt);
        text(label, lx, ly);
    }

    final void drawActiveElem() {
        fill(light);
        drawElem();
        active = activeDelay;
    }

    final void drawInactiveElem() {
        fill(dark);
        drawElem();
    }

    final boolean checkButtonPress() {

        return mouseX > x && mouseX < xw
            && mouseY > y && mouseY < yh;
    }
}
//
//
final void setup() {
    //orientation(LANDSCAPE);
    size(1280, 800);
    frameRate(fps);
    background(bg);

    //rectMode(CORNERS);

    strokeWeight(thickness);
    stroke(light);

    textSize(txtSize);
    textAlign(LEFT, TOP);

    addUiElems();
    drawTextArea(40, 500, 1050, 250, 10, 10);
}
//
final void draw() {
    drawUiElems();
}
//
final void mousePressed() {
    for (uiElem ui : uiElems)
        if ( ui.checkButtonPress() ) {

            ui.drawActiveElem();

            debugText.add(ui.label + " pressed");
            if (debugText.size() > maxLines)     debugText.remove(0);
            drawTextArea(40, 500, 1050, 250, 10, 10);

            loop();
            break;
        }
}
//
private final void drawUiElems()
{

    byte nullCounter = uiElemNum;

    for (uiElem ui : uiElems) {
        if (ui.active == 1)   ui.drawInactiveElem();

        if (ui.active > 0)    --ui.active;
        else                  --nullCounter;
    }

    if (nullCounter == 0)     noLoop();
}
//
private final void drawTextArea
(int x, int y, 
int w, int h, 
int px, int py)
{
    fill(dark);
    rect(x, y, w, h);
    fill(txt);

    x += px;
    y += py;
    w -= px;
    h -= py;

    for ( int i = debugText.size()-1; i > -1; i-- )
        text(debugText.get(i), x, y + (txtSize+2)*i, w, h);
}
//
private final void addUiElems() {

    String led = "LED ";

    for (byte row=0, pos=0; row<4; row++)
        for (byte col=0; col<6; col++)
            uiElems[pos++] = new uiElem(40 + col*100, 50 + row*100, 
            100, 100, 5, 5, led+pos);

    uiElems[24] = new uiElem(690, 50, 100, 100, 5, 5, "F1");
    uiElems[25] = new uiElem(840, 50, 100, 100, 5, 5, "F2");
    uiElems[26] = new uiElem(990, 50, 100, 100, 5, 5, "F3");
    uiElems[27] = new uiElem(1140, 50, 100, 100, 5, 5, "F4");

    uiElems[28] = new uiElem(690, 200, 100, 250, 5, 5, "Slide1");
    uiElems[29] = new uiElem(840, 200, 100, 250, 5, 5, "Slide2");
    uiElems[30] = new uiElem(990, 200, 100, 250, 5, 5, "Slide3");
    uiElems[31] = new uiElem(1140, 200, 100, 250, 5, 5, "Slide4");

    uiElems[32] = new uiElem(1140, 500, 100, 50, 5, 5, "App1");
    uiElems[33] = new uiElem(1140, 600, 100, 50, 5, 5, "App2");
    uiElems[34] = new uiElem(1140, 700, 100, 50, 5, 5, "App3");
}

jimthree

Re: Improving responsiveness of laggy buttons

11 months ago

Thanks for the Help guys! Those are some great ideas for optimisation. I'm going to experiment a bit further as even with the combined efforts of the mighty PhiLho and GoToLoop, it's still more laggy than I expected it to be. I was wondering if my fundamental approach to this was correct, i.e. wait for a touch event, then cycle through an array to find out where it was. I suspect the slowness comes from the maths around the if (touch location) is greater than (top left corner) and less than ((top left corner) plus (button size)).

thanks again for your help!

Jim

GoToLoop

Re: Improving responsiveness of laggy buttons

11 months ago

Hey jimthree! So glad you liked those tweaks. A pity it's still an issue w/ Android.

I've made further modifications. Now most of the action occurs only when a button is detected; for draw() is executed for as long as necessary to countdown --ui.active & unhighlight button elements. Once all is accomplished, it's deactivated by noLoop()!

Perhaps you should also tweak variables fps & activeDelay. Who knows, miracles do happen!

jimthree

Re: Improving responsiveness of laggy buttons

11 months ago

Hi GoToLoop.

I've done some more work on it just now, I've changed to rectMode(CORNERS) which means that the UI elements are now constructed with a TL and BR corner co-ordinates. This makes the test for a touch event a little lighter on the maths, which seems to be a very slight performance increase. It might have been bigger, but I suspect that the change in rectMode might just be moving the maths somewhere else. I could try using quads as well, that might be worth trying.

I also removed all the text rendering to check if that was having a significant impact, but again, it's just an small incremental improvement, nothing fantastic.

I had planned to try the same idea you just suggested, with only re-rendering the UI when it is needed, but I hadn't thought about just stopping the Draw loop with noloop() (how do you start it again? is there a loop()?) I was going to move the drawUiElements() behind a conditional.

Jim

GoToLoop

Re: Improving responsiveness of laggy buttons

11 months ago

Another series of tweaks (12th!). I guess this time I've finally run out of tricks!

It's still using the default rectMode(CORNER) though. Changing the drawing method is indeed worth a try. See if you can change this last modification to use rectMode(CORNERS) instead!

... but I hadn't thought about just stopping the draw() loop with noLoop() . How do you start it again? Is there a loop()?

I guess you still haven't spotted the loop() at the end of mousePressed(), just before the break statement?

jimthree

Re: Re: Improving responsiveness of laggy buttons

11 months ago

hahahaha! not only had I not spotted the loop() at the end of the mousePressed(), but I hadn't even noticed that you had updated your original post with the latest revisions!

Kudos to you for taking this on and running with it!

Jim

GoToLoop

Re: Improving responsiveness of laggy buttons

11 months ago

You're welcome!

Ah! I've published your code at sketchpad to test performance when running on JavaScript instead of Java/Android.

Check it out -> http://studio.processingtogether.com/sp/pad/export/ro.9vAkI4JDuLs8s/latest

jimthree

Re: Improving responsiveness of laggy buttons

11 months ago

..and just in case you are interested, the app is a control panel for an Arduino project that I'm working on. Once I've got the UI as good as I can get it is, I'll be plumbing in Serial so that it can talk to this home made shield..

jimthree

Re: Improving responsiveness of laggy buttons

11 months ago

GoToLoop,

Using the pmouseX and pmouseY introduced a bug where the previous button that was pressed was being activated. I've moved it back to using the mouseX and mouseY, but there didn't appear to be any noticeable difference in terms of speed between the two.

On the tablet, the JS versions don't perform very well, I've tried it in chrome, and in DolphinHD with it's new "game mode" plugin that claims to have a really fast JS engine. Still, I get a kick out of seeing how fast we can move processing code between platforms. Too awesome!

Jim

Chrisir

Re: Improving responsiveness of laggy buttons

11 months ago

let's again look at:

final void mousePressed() {
for (uiElem ui : uiElems)
if ( ui.checkButtonPress() ) {

That can be slow.

I noticed that your buttons fall into 3 groups:

upper left, which is a dense field (A),
upper right with 4 small and 4 big buttons (B),
and lower right where there are 3 buttons (C)

(The lower left seems only for output (D))

When we have now 3 groups of buttons, it may be worthwhile to identify first

are we in the upper or lower screen area (only one if with mouseY)?

When we are in the upper area (A or B) check left or right side (only one if with mouseX):

When left side (A), have a 2D grid and 1st check x-values, when found, check y values.
The 2D grid values can be the index for ui.
see http://forum.processing.org/topic/25-life-saving-tips-for-processing-blogpost#25080000001785809
When right side (B) you can use the same principle with another 2D grid.

When we are in the lower area (C) check each of the 3 buttons directly.

Done.

Greetings, Chrisir

GoToLoop

Re: Improving responsiveness of laggy buttons

11 months ago

Hi Chrisir! Nice tips!!!

I've tried to implement some of your methods. Split loop into 2 ranges, plus illegal coordinates checking!
Since it significantly changes how the button element check algorithm works, gonna republish the code again:

/**
 * Buttons on Android (v2.19)
 * by jimthree (2012/Oct/31)
 * tweaked by GoToLoop
 *
 * http://forum.processing.org/topic/improving-responsiveness-of-laggy-buttons
 * http://studio.processingtogether.com/sp/pad/export/ro.9vAkI4JDuLs8s/latest
 * 
 */

final static color light = #00688D;
final static color dark  = #002157;
final static color txt   = #FFFFFF;
final static color bg    = 0;

final static byte  txtSize   = 12;
final static byte  maxLines  = 16;

final static byte  thickness = 2;
final static byte  activeDelay = 2;
final static byte  fps = 15;

final static List<String> debugText = new ArrayList(maxLines);

final static byte  uiElemNum = 35;
final static uiElem[] uiElems = new uiElem[uiElemNum];


final class uiElem {
  int x, y, w, h;
  int xw, yh, lx, ly;

  byte   active = 1;
  String label;

  uiElem(int c_x, int c_y, int c_w, int c_h, 
  int c_lx, int c_ly, String c_label)
  {    
    x  = c_x;
    y  = c_y;
    w  = c_w;
    h  = c_h;

    xw = x+w;
    yh = y+h;

    lx = x + c_lx;
    ly = y + c_ly;

    label = c_label;
  }

  final void drawElem() {
    rect(x, y, w, h);

    fill(txt);
    text(label, lx, ly);
  }

  final void drawActiveElem() {
    fill(light);
    drawElem();
    active = activeDelay;
  }

  final void drawInactiveElem() {
    fill(dark);
    drawElem();
  }

  final void updateTextArea() {
    debugText.add(label + " pressed");
    if (debugText.size() > maxLines)     debugText.remove(0);

    drawTextArea(40, 500, 1050, 250, 10, 10);
  }

  final boolean checkButtonPress() {
    return mouseX>x && mouseX<xw && mouseY>y && mouseY<yh;
  }
}

final void setup() {
  //orientation(LANDSCAPE);
  size(1280, 800);
  frameRate(fps);
  background(bg);

  strokeWeight(thickness);
  stroke(light);

  textSize(txtSize);
  textAlign(LEFT, TOP);

  addUiElems();
  drawTextArea(40, 500, 1050, 250, 10, 10);
}

final void draw() {
  drawUiElems();
}

final void mousePressed() {

  final int mx = mouseX, my = mouseY;
  byte minRange = 24, maxRange = uiElemNum;

  if ( mx<640 && my<450 && mx>40 && my>50 ) {
    maxRange = minRange;
    minRange = 0;
  }
  else if ( mx<1141 && my>449 || mx<41 || my<51 || mx>1239 || my>749 )
    maxRange = minRange = 0;

  for (byte ui=minRange; ui!=maxRange; ++ui)
    if ( uiElems[ui].checkButtonPress() ) {

      uiElems[ui].drawActiveElem();
      uiElems[ui].updateTextArea();

      loop();
      break;
    }
}

final void drawUiElems() {

  byte nullCounter = uiElemNum;

  for (uiElem ui: uiElems) {
    if (ui.active == 1)   ui.drawInactiveElem();

    if (ui.active > 0)    --ui.active;
    else                  --nullCounter;
  }

  if (nullCounter == 0)     noLoop();
}

final void drawTextArea
(int x, int y, 
int w, int h, 
int px, int py)
{
  fill(dark);
  rect(x, y, w, h);
  fill(txt);

  x += px;
  y += py;
  w -= px;
  h -= py;

  for ( int i = debugText.size(); i != 0; )
    text( debugText.get(--i), x, i*(txtSize+2) + y, w, h );
}

final void addUiElems() {

  final String led = "LED ";

  for (byte row=0, pos=0; row!=4; ++row)
    for (byte col=0; col!=6; ++col)
      uiElems[pos++] = new uiElem(40 + col*100, 50 + row*100, 
      100, 100, 5, 5, led+pos);

  uiElems[24] = new uiElem(690, 50, 100, 100, 5, 5, "F1");
  uiElems[25] = new uiElem(840, 50, 100, 100, 5, 5, "F2");
  uiElems[26] = new uiElem(990, 50, 100, 100, 5, 5, "F3");
  uiElems[27] = new uiElem(1140, 50, 100, 100, 5, 5, "F4");

  uiElems[28] = new uiElem(690, 200, 100, 250, 5, 5, "Slide1");
  uiElems[29] = new uiElem(840, 200, 100, 250, 5, 5, "Slide2");
  uiElems[30] = new uiElem(990, 200, 100, 250, 5, 5, "Slide3");
  uiElems[31] = new uiElem(1140, 200, 100, 250, 5, 5, "Slide4");

  uiElems[32] = new uiElem(1140, 500, 100, 50, 5, 5, "App1");
  uiElems[33] = new uiElem(1140, 600, 100, 50, 5, 5, "App2");
  uiElems[34] = new uiElem(1140, 700, 100, 50, 5, 5, "App3");
}

jimthree

Re: Improving responsiveness of laggy buttons

11 months ago

Wow, thanks again to everyone, and welcome to the UI party, Chrisir!

I wonder if we should be thinking now about how these ideas and optimisations could be rolled up in to a all encompassing class, or even a library so that it could be used outside of the context of my original post. While Chrisir's method of testing areas by grouping buttons has specific use considering my UI design, trying to apply some of these ideas to other UI's with arbitrary designs and button groupings could be of huge benefit to the android processing community. It's been in the back of my mind, that four of the buttons on my UI design are actually sliders, and the whole thing should probably be more multi-touch considering it's being run on a tablet.

I invite anyone with enough time and energy to use this thread as a basis for making a lightweight UI library for Android Processing!

Jim

Top Reply