low memory issues with a multicock variant

Here is the result of my investigations.

1) the drawCompass() function was taking 98,99ms. But sometimes I was seeing this go to 130ms.
Then when the buttons become unresponsive I was seeing it take 1300ms. It is as if 100ms is just too much of a chunk of processing and stuff that the firmware does starts to back up.

This is really interesting. Here are the different timings for different methods to draw the compass arrow:

1) Original method tha rotated an image for the arrow - 98ms.

    // takes ~95-100ms, have seen it take 1200ms though which will cause tasks to back up
    function drawCompass(hd) {
      var t1 = getTime();
      buf1.setColor(1);
      buf1.fillCircle(80,80,79,79);
      buf1.setColor(0);
      buf1.fillCircle(80,80,69,69);
      buf1.setColor(1);
      buf1.drawImage(img, 80, 80, {scale:3,  rotate:radians(hd)} );
      flip1(40, 30);
      var t = Math.round((getTime() - t1)*1000);
      LED1.write((t > 130));
    }

2) TEST_7: An experiment using a modified version of the arrow() function in the route App.
Takes 9ms BUT you have to call it twice once to draw the arrow and the next time to remove the old one. So 18ms total.

    function arrow(angle,col) {
      var t1 = getTime();
      angle=angle*Math.PI/180;
      var p = [0, 1.1071, Math.PI/4, 2.8198, 3.4633, 7*Math.PI/4 , 5.1760];
      g.setColor(col);

      var poly = [
        120+60*Math.sin(angle+p[0]),       120-60*Math.cos(angle+p[0]),
        120+44.7214*Math.sin(angle+p[1]),  120-44.7214*Math.cos(angle+p[1]),
        120+28.2843*Math.sin(angle+p[2]),  120-28.2843*Math.cos(angle+p[2]),
        120+63.2455*Math.sin(angle+p[3]),  120-63.2455*Math.cos(angle+p[3]),
        120+63.2455*Math.sin(angle+p[4]),  120-63.2455*Math.cos(angle+p[4]),
        120+28.2843*Math.sin(angle+p[5]),  120-28.2843*Math.cos(angle+p[5]),
        120+44.7214*Math.sin(angle+p[6]),  120-44.7214*Math.cos(angle+p[6])
      ];
      
      //console.log(poly);
      g.fillPoly(poly);
      console.log("arrow: " + Math.round((getTime() - t1)*1000) );
    }

TEST_8: The arrow shape I require: Takes twice as long, called twice tatal = 32ms.

function arrow(angle,col) {
      var t1 = getTime();
      angle=angle*Math.PI/180;
      var p = [0, 1.1071, Math.PI/4, 2.8198, 3.4633, 7*Math.PI/4 , 5.1760];
      g.setColor(col);

      poly = [
        120+60*Math.sin(angle+p[0]),       120-60*Math.cos(angle+p[0]),
        120+44.7214*Math.sin(angle+p[1]),  120-44.7214*Math.cos(angle+p[1]),
        120+28.2843*Math.sin(angle+p[2]),  120-28.2843*Math.cos(angle+p[2]),
        120+63.2455*Math.sin(angle+p[3]),  120-63.2455*Math.cos(angle+p[3]),
        120+63.2455*Math.sin(angle+p[4]),  120-63.2455*Math.cos(angle+p[4]),
        120+28.2843*Math.sin(angle+p[5]),  120-28.2843*Math.cos(angle+p[5]),
        120+44.7214*Math.sin(angle+p[6]),  120-44.7214*Math.cos(angle+p[6])
      ];
      g.fillPoly(poly);

      var t = Math.round((getTime() - t1)*1000);
      LED1.write((t > 30));
      //console.log("T8: " + t);
      return t;
    }

TEST_10: The required Arrow shape, with a circle round it and using an arrayBuffer. 62ms.
BUT i have seen this go to 200ms on occassion, so there is obviously a risk that this can cause issues and become unresponsive.

// takes 62 ms
    function drawCompass(hd) {
      if (hd === oldHeading) return;
      var t1 = getTime();

      buf1.setColor(1);
      buf1.fillCircle(80,80,79,79);
      buf1.setColor(0);
      buf1.fillCircle(80,80,69,69);
      buf1.setColor(1);
      
      hd=hd*Math.PI/180;
      var p = [0, 1.1071, Math.PI/4, 2.8198, 3.4633, 7*Math.PI/4 , 5.1760];

      var poly = [
        80+60*Math.sin(hd+p[0]),       80-60*Math.cos(hd+p[0]),
        80+44.7214*Math.sin(hd+p[1]),  80-44.7214*Math.cos(hd+p[1]),
        80+28.2843*Math.sin(hd+p[2]),  80-28.2843*Math.cos(hd+p[2]),
        80+63.2455*Math.sin(hd+p[3]),  80-63.2455*Math.cos(hd+p[3]),
        80+63.2455*Math.sin(hd+p[4]),  80-63.2455*Math.cos(hd+p[4]),
        80+28.2843*Math.sin(hd+p[5]),  80-28.2843*Math.cos(hd+p[5]),
        80+44.7214*Math.sin(hd+p[6]),  80-44.7214*Math.cos(hd+p[6])
      ];
      
      buf1.fillPoly(poly);
      flip1(40, 30);
      var t = Math.round((getTime() - t1)*1000);
      LED1.write((t > 100));
      //console.log("T10: " + t);
      return t;
    }