Radial Touch Sensing

Other Hardware Displays
1

Hi,

First post here:)

I am trying to figure out how to make a radial interactive slider. For example the arcs in the photo would be dragged radially from a fixed start angle to a stop angle with your finger to adjust a value like a touch "knob." In this case I want to use it to adjust a voltage. The part I need help with is how to constrain the touch sensing to within the arc and to calculate the angle. I am using an ili9341 320 x 240 tft with an FT6206 cap touch panel.

This is the function I found on here awhile ago to draw the arcs:

// #########################################################################
// Draw a circular or elliptical arc with a defined thickness
// #########################################################################

// x,y == coords of centre of arc
// start_angle = 0 - 359
// seg_count = number of 3 degree segments to draw (120 => 360 degree arc)
// rx = x axis radius
// yx = y axis radius
// w  = width (thickness) of arc in pixels
// colour = 16 bit colour value
// Note if rx and ry are the same then an arc of a circle is drawn

int fillArc2(int x, int y, int start_angle, int seg_count, int rx, int ry, int w, unsigned int colour)
{

  byte seg = 1; // Segments are 3 degrees wide = 120 segments for 360 degrees
  byte inc = 1; // Draw segments every 3 degrees, increase to 6 for segmented ring

    // Calculate first pair of coordinates for segment start
    float sx = cos((start_angle - 90) * DEG2RAD);
    float sy = sin((start_angle - 90) * DEG2RAD);
    uint16_t x0 = sx * (rx - w) + x;
    uint16_t y0 = sy * (ry - w) + y;
    uint16_t x1 = sx * rx + x;
    uint16_t y1 = sy * ry + y;

  // Draw colour blocks every inc degrees
  for (int i = start_angle; i < start_angle + seg * seg_count; i += inc) {

    // Calculate pair of coordinates for segment end
    float sx2 = cos((i + seg - 90) * DEG2RAD);
    float sy2 = sin((i + seg - 90) * DEG2RAD);
    int x2 = sx2 * (rx - w) + x;
    int y2 = sy2 * (ry - w) + y;
    int x3 = sx2 * rx + x;
    int y3 = sy2 * ry + y;

    tft.fillTriangle(x0, y0, x1, y1, x2, y2, colour);
    tft.fillTriangle(x1, y1, x2, y2, x3, y3, colour);

    // Copy segment end to sgement start for next segment
    x0 = x2;
    y0 = y2;
    x1 = x3;
    y1 = y3;
  }
  
}

Thanks for the help!

IMG_6689.jpg
IMG_6689.jpg4032×3024 1.88 MB

2

Spent some more time on it, this is what I have so far. The numbers are the x and y location of a finger.
Need to reduce the flicker. Also I can only get it to work if I compare either x or y to p.x and p.y, but not both...

  while(ctp.touched())
  {
    TS_Point p = ctp.getPoint();
    
    // flip it around to match the screen.
    p.x = map(p.x, 0, 240, 240, 0);
    p.y = map(p.y, 0, 320, 320, 0);
    Serial.println(p.x);Serial.println(" ");Serial.println(p.y);
    for(int i = 0; i <100; i++)
    {
        x = round(r*cos(i*DEG2RAD));
        y = round(r*sin(i*DEG2RAD));
        if(p.x == x)
        {
//          if(p.y == y)
//          {
            //erase previous arc
            if(previous_i != i)
            {
              fillArc2(160, 120, 210, 100, 120, 120, 20, ILI9341_BLACK);
              previous_i = i;
            }
            fillArc2(160, 120, 210, i, 120, 120, 20, ILI9341_WHITE);
            
            break;
//          }
        }
    }
    //show cap touch location
    tft.fillRect(96, 68, 65, 80, ILI9341_BLACK);
    tft.setCursor(100, 95);
    tft.setTextColor(ILI9341_CYAN);  
    tft.print(p.x);
    tft.setCursor(100, 145);
    tft.setTextColor(ILI9341_GREEN);  
    tft.print(p.y);
  }

For reference I am using a maple mini at 128MHz. See video IMG_6690.mpg - Google Drive

3

You read the Touch. Compare the x, y with the arc shape. Interpret accordingly.

Pretty much the same approach as implementing a conventional "dragged slider" except that x, y has to satisfy a rectangular locus instead of curved locus.

David.