Tinkering with drawing on 4d Systems 32-wptu

I’ve been playing around with drawing on my 4d systems LCD. The basic gist of it is; touch a colored square to select a color; touch the square with the current color in it to change the background to the current selected color; touch the square outlined in red to erase the screen to the current background color. I thought I’d share my code with the locals and ask for some input.
Issues: The drawn line on the display is not very smooth when drawing at slow speeds. I was trying to use some averaging to smooth it out, but I could be doing it wrong. It’s commented out in the code. I also wondered if anyone had any experience using the gfx_Button that I’ve commented out in the code. I can draw the button in the on or off state, but I’m not sure how to define that it is touched, as the button sizes vary based on the text displayed in it.

The relevant library is here:GitHub - 4dsystems/Picaso-Serial-Arduino-Library: Arduino Library for 4D Systems Serial Environement for Picaso
And the code:

//---------------- Picaso librarys ---------------
#include "Picaso_Serial_4DLib.h"                //
#include "Picaso_const4D.h"                     //
//------------------------------------------------

//-------Various Arduino setups-------------------
//#define DisplaySerial Serial                  // Uncomment if using AR shield or Pins 0, 1 for Serial. And comment out Serial2 line
#define DisplaySerial Serial2                   // Mega 2560 digital pins 16 & 17
// Uncomment the following 2 lines and comment out Serial2 line if using sofware serial and set pins accordingly
//#include <SoftwareSerial.h>                   // 
//SoftwareSerial DisplaySerial(2,3) ;           // pin 2 = TX of display, pin3 = RX
Picaso_Serial_4DLib Display(&DisplaySerial);    //
//------------------------------------------------
int myColor;  //drawing color
int myColor2; //background color
char mdl[20]; //handle for display model

void setup(){

  myColor=BLUE;
  myColor2=WHITE;
  // ------------ Initialize screen --------------
  //     Call these functions in this order..   //
  //     Do not address the screen before or    //
  //     within this group.                     //
  delay(2000); // wait for screen to power up   //
  DisplaySerial.begin(255000); //set baud       //
  Display.TimeLimit4D   = 5000;                 //
  Display.sys_GetModel(mdl);                    //
  //-------------- End initialize ----------------

  //------- clear screen and display model -------
  Display.gfx_ScreenMode(LANDSCAPE);            //
  Display.gfx_Cls();                            //
  Display.gfx_MoveTo(0,0);                      //
  Display.putstr("Model=");                     //
  Display.putstr(mdl);                          //
  delay(1500); //optional pause to display model//
  //----------------------------------------------

  Display.gfx_Set(OBJECT_COLOUR,myColor); // color for lineTo
  Display.gfx_BGcolour(myColor2);         // set background color

  //--------- Enable touch and touch region-------
  Display.touch_Set(TOUCH_ENABLE);             //
  Display.touch_DetectRegion(0,0, 399, 239);   //
  Display.gfx_Cls();                           //
  //----------------------------------------------
  //-------------Draw some buttons-------------------------
  Display.gfx_RectangleFilled(0,0,19,19,RED);           //
  Display.gfx_RectangleFilled(20,0,39,19,ORANGE);       //
  Display.gfx_RectangleFilled(40,0,59,19,YELLOW);       //
  Display.gfx_RectangleFilled(60,0,79,19,GREEN);        //
  Display.gfx_RectangleFilled(80,0,99,19,BLUE);         //
  Display.gfx_RectangleFilled(100,0,119,19,INDIGO);     //
  Display.gfx_RectangleFilled(120,0,139,19,PINK);       //
  Display.gfx_RectangleFilled(140,0,159,19,BROWN);      //
  Display.gfx_RectangleFilled(180,0,199,19,BLACK);      //
  Display.gfx_RectangleFilled(200,0,219,19,WHITE);      //
  Display.gfx_RectangleFilled(220,0,239,19,myColor);    // display area for current color selection
  Display.gfx_Rectangle(260,0,279,19,RED);              //
  //Display.gfx_Button(OFF,290,0,WHITE,RED,1,1,1,"Clear");   // I wish I how to use these buttons
  //-------------------------------------------------------


  //-----Enable clipping and clipping region------
  Display.gfx_Rectangle(20,20,380,219,RED);    // outline clipping region
  Display.gfx_ClipWindow(21,21,379,218);       //
  Display.gfx_Clipping(ON);                    //
  //----------------------------------------------


}

void loop(){
  int state;       
  int x;
  int y;
  int xx;
  int yy;

  state = Display.touch_Get(TOUCH_STATUS);
  //TOUCH_PRESSED   TOUCH_MOVING  TOUCH_RELEASED 

  if (state == TOUCH_PRESSED){ 
    x = Display.touch_Get(TOUCH_GETX);         
    y = Display.touch_Get(TOUCH_GETY);
    // xx = ((x+x+x)/3); //I've tried using these on both pressed and moving
    // x = xx;           //averaging up to 8 times, it doesn't seem to help at all
    // yy = ((y+y+y)/3);
    // y = yy;
    Display.gfx_MoveTo(x,y);
    Display.gfx_Line(x,y,x,y,myColor); 

  }

  if (state == TOUCH_MOVING){
    x = Display.touch_Get(TOUCH_GETX);         
    y = Display.touch_Get(TOUCH_GETY);
    // xx = ((x+x+x)/3);
    // x = xx;
    // yy = ((y+y+y)/3);
    // y = yy;
    Display.gfx_LineTo(x,y); 
  }

  if (state == TOUCH_RELEASED){
    x = Display.touch_Get(TOUCH_GETX);         
    y = Display.touch_Get(TOUCH_GETY);
    //------------------Look for button releases--------------------- 
    if ((x <= 19 && y <= 19) && (x >= 0 && y >= 0)){           //
      myColor=RED;                                             //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //  
    }                                                          //   
    if ((x <= 39 && y <= 19) && (x >= 20 && y >= 0)){          //
      myColor=ORANGE;                                          //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          // 
    if ((x <= 59 && y <= 19) && (x >= 40 && y >= 0)){          //
      myColor=YELLOW;                                          //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 79 && y <= 19) && (x >= 60 && y >= 0)){          //
      myColor=GREEN;                                           //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 99 && y <= 19) && (x >= 80 && y >= 0)){          //
      myColor=BLUE;                                            //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 119 && y <= 19) && (x >= 100 && y >= 0)){        //
      myColor=INDIGO;                                          //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 139 && y <= 19) && (x >= 120 && y >= 0)){        //
      myColor=PINK;                                            //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 159 && y <= 19) && (x >= 140 && y >= 0)){        //
      myColor=BROWN;                                           //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 179 && y <= 19) && (x >= 160 && y >= 0)){        //
      myColor=WHITE;                                           //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 199 && y <= 19) && (x >= 180 && y >= 0)){        //
      myColor=BLACK;                                           //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    //
    Display.gfx_Clipping(OFF);                                 //
    Display.gfx_RectangleFilled(220,0,239,19,myColor);         // display current color selection
    Display.gfx_Clipping(ON);                                  //
    if ((x <= 239 && y <= 19) && (x >= 220 && y >= 0)){        //
      Display.gfx_ChangeColour(myColor2,myColor);              // change the background color by touching current myColor
      myColor2 = myColor;                                      //
    }                                                          //
    if ((x <= 279 && y <= 19) && (x >= 260 && y >= 0)){        //
      Display.gfx_RectangleFilled(21,21,379,218,myColor2);     // erase to the current background color
    }                                                          //
    //---------------------------------------------------------------
  }
}

Got it pretty well sorted out, here is the code if anyone is interested.

//---------------- Picaso librarys ---------------
#include "Picaso_Serial_4DLib.h"                //
#include "Picaso_const4D.h"                     //
//------------------------------------------------

//-------Various Arduino setups-------------------
//#define DisplaySerial Serial                  // Uncomment if using AR shield or Pins 0, 1 for Serial. And comment out Serial2 line
#define DisplaySerial Serial2                   // Mega 2560 digital pins 16 & 17
// Uncomment the following 2 lines and comment out Serial2 line if using sofware serial and set pins accordingly
//#include <SoftwareSerial.h>                   // 
//SoftwareSerial DisplaySerial(2,3) ;           // pin 2 = TX of display, pin3 = RX
Picaso_Serial_4DLib Display(&DisplaySerial);    //
//------------------------------------------------
int myColor;  //drawing color
int myColor2; //background color
char mdl[20]; //handle for display model

void setup(){

  myColor=BLUE;    //initial color for drawing
  myColor2=WHITE;  //initial canvas color
  
  // ------------ Initialize screen --------------
  //     Call these functions in this order..   //
  //     Do not address the screen before or    //
  //     within this group.                     //
  delay(2000); // wait for screen to power up   //
  DisplaySerial.begin(255000); //set baud       //
  Display.TimeLimit4D   = 5000;                 //
  Display.sys_GetModel(mdl);                    //
  //-------------- End initialize ----------------

  //------- clear screen and display model -------
  Display.gfx_ScreenMode(LANDSCAPE);            // set orientation
  Display.gfx_Cls();                            //
  Display.gfx_MoveTo(0,0);                      // 
  Display.putstr("Model=");                     //
  Display.putstr(mdl);                          //
  delay(1500);                                  // optional pause to display model
  //----------------------------------------------

  Display.gfx_Set(OBJECT_COLOUR,myColor); // color for lineTo
  Display.gfx_BGcolour(myColor2);         // set background color

  //--------- Enable touch and touch region-------
  Display.touch_Set(TOUCH_ENABLE);             //
  Display.touch_DetectRegion(0,0, 399, 239);   //
  Display.gfx_Cls();                           //
  //----------------------------------------------
  //-------------Draw some buttons-------------------------
  Display.gfx_RectangleFilled(0,0,19,19,RED);           //
  Display.gfx_RectangleFilled(20,0,39,19,ORANGE);       //
  Display.gfx_RectangleFilled(40,0,59,19,YELLOW);       //
  Display.gfx_RectangleFilled(60,0,79,19,GREEN);        //
  Display.gfx_RectangleFilled(80,0,99,19,BLUE);         //
  Display.gfx_RectangleFilled(100,0,119,19,INDIGO);     //
  Display.gfx_RectangleFilled(120,0,139,19,PINK);       //
  Display.gfx_RectangleFilled(140,0,159,19,BROWN);      //
  Display.gfx_RectangleFilled(180,0,199,19,BLACK);      //
  Display.gfx_RectangleFilled(200,0,219,19,WHITE);      //
  Display.gfx_RectangleFilled(220,0,239,19,myColor);    // display area for current color selection
  Display.gfx_BevelShadow(0);                           // make the bevel for gfx buttons dark
  Display.gfx_Button(ON,260,0,WHITE,RED,1,1,1,"Clear"); // draw a gfx button
  //-------------------------------------------------------


  //-----Enable clipping and clipping region------
  Display.gfx_Rectangle(20,20,380,219,RED);    // outline clipping region
  Display.gfx_ClipWindow(21,21,379,218);       //
  Display.gfx_Clipping(ON);                    //
  //----------------------------------------------

}

void loop(){
  int state;       
  int x;
  int y;
  static int xx;
  static int yy;

  state = Display.touch_Get(TOUCH_STATUS);
  //TOUCH_PRESSED   TOUCH_MOVING   TOUCH_RELEASED   NOTOUCH

  if (state == TOUCH_PRESSED){ 
    x = Display.touch_Get(TOUCH_GETX);         
    y = Display.touch_Get(TOUCH_GETY);
    if ((x <= 312 && y <= 16) && (x >= 260 && y >= 0)){     // if gfx button pressed
      Display.gfx_Clipping(OFF);                              // turn off clipping
      Display.gfx_Button(OFF,260,0,WHITE,RED,1,1,1,"Clear");  // draw gfx button pressed
    }
    xx = x;
    yy = y;
    Display.gfx_MoveTo(x,y); // move the cursor
    Display.gfx_Line(x,y,x,y,myColor); // draw a line

  }

  if (state == TOUCH_MOVING){
    x = Display.touch_Get(TOUCH_GETX);         
    y = Display.touch_Get(TOUCH_GETY);
    Display.gfx_Clipping(ON);
    xx = ((xx+xx+x)/3); // do some averaging to smooth drawing
    yy = ((yy+yy+y)/3);
    Display.gfx_LineTo(xx,yy); // draw a line to current touch point
  }

  if (state == TOUCH_RELEASED){
    x = Display.touch_Get(TOUCH_GETX);         
    y = Display.touch_Get(TOUCH_GETY);
    //------------------Look for button releases--------------------- 
    if ((x <= 312 && y <= 16) && (x >= 260 && y >= 0)){        // if gfx button released
    Display.gfx_Clipping(OFF);                                 // turn off clipping
    Display.gfx_Button(ON,260,0,WHITE,RED,1,1,1,"Clear");      // draw gfx button released
    Display.gfx_RectangleFilled(21,21,379,218,myColor2);       // clear screen to current bg color
    Display.gfx_Clipping(ON);                                  // turn clipping on
    }                                                          //
    if ((x <= 19 && y <= 19) && (x >= 0 && y >= 0)){           //
      myColor=RED;                                             //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //  
    }                                                          //   
    if ((x <= 39 && y <= 19) && (x >= 20 && y >= 0)){          //
      myColor=ORANGE;                                          //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          // 
    if ((x <= 59 && y <= 19) && (x >= 40 && y >= 0)){          //
      myColor=YELLOW;                                          //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 79 && y <= 19) && (x >= 60 && y >= 0)){          //
      myColor=GREEN;                                           //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 99 && y <= 19) && (x >= 80 && y >= 0)){          //
      myColor=BLUE;                                            //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 119 && y <= 19) && (x >= 100 && y >= 0)){        //
      myColor=INDIGO;                                          //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 139 && y <= 19) && (x >= 120 && y >= 0)){        //
      myColor=PINK;                                            //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 159 && y <= 19) && (x >= 140 && y >= 0)){        //
      myColor=BROWN;                                           //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 179 && y <= 19) && (x >= 160 && y >= 0)){        //
      myColor=WHITE;                                           //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    if ((x <= 199 && y <= 19) && (x >= 180 && y >= 0)){        //
      myColor=BLACK;                                           //
      Display.gfx_Set(OBJECT_COLOUR,myColor);                  //
    }                                                          //
    Display.gfx_Clipping(OFF);                                 //
    Display.gfx_RectangleFilled(220,0,239,19,myColor);         // display current color selection
    Display.gfx_Clipping(ON);                                  //
    if ((x <= 239 && y <= 19) && (x >= 220 && y >= 0)){        //
      Display.gfx_ChangeColour(myColor2,myColor);              // change the background color by touching current myColor
      myColor2 = myColor;                                      //
    }                                                          //
    //---------------------------------------------------------------
  }
}