How to make a touch slider

Hi guys
Please please help me
Im using UTFT & URtouch libraries with arduino mega
And ili9341 driver screen
I want to make a setting screen for changing program varibles
Something like the photo attached
How can i make a function that will draw the slider
And in the loop will update the varibles
I need it to be a function so i can make many sliders with only small changes
Can someone give me some support with it ?

If there is a link to a library contain such slider it can help me as well :frowning:

Sit down with a nice cup of tea, paper and pencil.
Drawing any graphic can be broken into individual parts.
Detecting a Touch and reading its location is simple

Drawing a rounded rectangle is a regular method.
Comparing a Touch location is simple.
Do you want to drag a movable slider or press individual fixed UP and DOWN buttons ?

I am sure that someone, somewhere has done everything with UTFT.
Adafruit_GFX_Button class is probably more intuitive.

If you are struggling, buy a packet of biscuits.

David.

David i work on the draw slider and even make it better than it was on the picture
and now the function i made is drawing sliders
but i really need help with the function that update the slider
i want to make a Red nittle or line at the left side of the slider and that it will move
and update global varible every time i touch the slider can you help me with that?
this is the code that draws the slider

#include <UTFT.h>
#include <URTouch.h>


UTFT    myGLCD(ILI9341_16,38,39,40,41);

URTouch  myTouch( 6, 5, 4, 3, 2);

#define BLUE      0x001F
#define TEAL      0x0438
#define GREEN     0x07E0
#define CYAN      0x07FF
#define RED       0xF800
#define MAGENTA   0xF81F
#define YELLOW    0xFFE0
#define ORANGE    0xFC00
#define PINK      0xF81F
#define PURPLE    0x8010
#define GREY      0xC618
#define WHITE     0xFFFF
#define BLACK     0x0000



extern uint8_t BigFont[];
extern uint8_t SmallFont[];
int x, y;
char stCurrent[20]="";
int stCurrentLen=0;
char stLast[20]="";

/*************************
**   Custom functions   **
*************************/


double mapf(double val, double in_min, double in_max, double out_min, double out_max) {
    return (val - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}



void DrawSlider(char *label, int x, int y,int w,int h,int Scale)
{
  int width = x+w;
  int hight = y+h;
  char buf[10];
  double prec = 0; 
  double inc = Scale/5;
  
   myGLCD.setColor(GREY);
   myGLCD.drawRect(x, y, width, hight);
   myGLCD.setColor(WHITE);
   myGLCD.fillRect(x+2, y + 2, width-2, hight -2);
   myGLCD.setFont(BigFont);
   myGLCD.setColor(WHITE);
   myGLCD.print(label, x +2, y -20); // Prints the string on the screen   
    myGLCD.setFont(SmallFont);
    for (double val = 0; val <= Scale; val += inc) {
        double scaled = mapf(val, 0, Scale, 0, h);
         myGLCD.setColor(BLACK);
        myGLCD.drawLine(width-11, hight + 5 - scaled, width-2, hight + 5 - scaled);
        myGLCD.setColor(WHITE);
        myGLCD.printNumF(val, prec, width + 8, hight - scaled - 3); 
    }

     for (double val = 0; val <= Scale; val += Scale/20) {
        double scaled = mapf(val, 0, Scale, 0, h);
         myGLCD.setColor(BLACK);
        myGLCD.drawLine(width-11, hight + 5 - scaled, width-6, hight + 5 - scaled);
    }
}


void setup()
{
// Initial setup
  myGLCD.InitLCD();
  myGLCD.clrScr();

  myTouch.InitTouch();
  myTouch.setPrecision(PREC_MEDIUM);

  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(0, 0, 0);
  
  DrawSlider("A0", 30, 30,30,180,25);
}

 

void loop()
{

}

packet of biscuits are completely over :slight_smile:

i made the 2 functions

  1. create the slider

  2. update slider in the loop

1 problam left :frowning:

i cant understand why when im duplicate the slider

the left slider affecting the right one however the right one is completly independent

what i am missing??? please help me

#include <UTFT.h>
#include <URTouch.h>

int gAnalog1 = 5 ;  
int CurrentPosition ;
int old_position ;


int gAnalog2 = 2 ;  
int CurrentPosition2 ;
int old_position2 ;



UTFT    myGLCD(ILI9341_16,38,39,40,41);
URTouch  myTouch( 6, 5, 4, 3, 2);

#define GREEN     0x07E0
#define RED       0xF800
#define GREY      0xC618
#define WHITE     0xFFFF
#define BLACK     0x0000



extern uint8_t BigFont[];
extern uint8_t SmallFont[];
int x, y;

/*************************
**   Custom functions   **
*************************/


double mapf(double val, double in_min, double in_max, double out_min, double out_max) {
    return (val - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}



void DrawSlider(char *label, int x, int y,int w,int h,double Scale,double value)
{
  int width = x+w;
  int hight = y+h;
  char buf[10];
  double prec = 1; 
  double inc = Scale/4;
  
   myGLCD.setColor(GREY);
   myGLCD.drawRect(x, y, width, hight);
   myGLCD.setColor(WHITE);
   myGLCD.fillRect(x+2, y + 15, width-2, hight -2);
   myGLCD.setFont(SmallFont);
   myGLCD.setColor(WHITE);
   myGLCD.print(label, x -15, y -20); // Prints the string on the screen   
    myGLCD.setFont(SmallFont);  
    myGLCD.setColor(GREEN);
    myGLCD.printNumF(Scale, prec, x+3, y+2); 
     
    for (double val = 0; val <= Scale; val += inc) {
        double scaled = mapf(val, 0, Scale, 0, h);
         myGLCD.setColor(BLACK);
         myGLCD.drawLine(width-11, hight + 5 - scaled, width-2, hight + 5 - scaled);
    }

     for (double val = 0; val <= Scale; val += Scale/20) {
        double scaled = mapf(val, 0, Scale, 0, h);
         myGLCD.setColor(BLACK);
        myGLCD.drawLine(width-11, hight + 5 - scaled, width-6, hight + 5 - scaled);
    }
    
      // Draw the  initialaze marker   
       int Marker = map(value,0,Scale,y+12,hight);
       myGLCD.setColor(GREEN); 
       myGLCD.fillRect (x+2, Marker, x+10, Marker+3);
    
}





void UpdateSlider(int x,int y, int w, int h ,int *value,int Scale, int *old_position, int *CurrentPosition)
{
  int width = x+w;
  int hight = y+h;
  int posx;
  int posy;
  
  if (myTouch.dataAvailable()) {
      myTouch.read();
      posx = myTouch.getX(); // X coordinate where the screen has been pressed
      posy = myTouch.getY(); // Y coordinates where the screen has been pressed
  
  
  if ((posy > y) &&( posy < hight) && (posx > x )&& (posx < width)) {
    
      if (posy < y+15)
          posy = y+15;
          
       if (posy > hight-5)
          posy = hight-5;
          
      // Map slider y value to original value
      int ScaleValue = map(posy, hight, y, 0,Scale);
       *value = ScaleValue;

 
       *old_position = *CurrentPosition; //savelast Position
       *CurrentPosition = posy;

       
       myGLCD.setColor(WHITE); 
       myGLCD.fillRect (x+2, *old_position, x+10, *old_position+3);
       myGLCD.setColor(RED); 
       myGLCD.fillRect (x+2, *CurrentPosition, x+10, *CurrentPosition+3);
         }
       }
    }
 


void setup()
{
// Initial setup

 Serial.begin(9600);
  myGLCD.InitLCD();
  myGLCD.clrScr();

  myTouch.InitTouch();
  myTouch.setPrecision(PREC_MEDIUM);

  myGLCD.setFont(BigFont);
  myGLCD.setBackColor(0, 0, 0);
  
  DrawSlider("Temp", 30, 30,30,180,10,gAnalog1);
  DrawSlider("Curr", 70, 30,30,180,5,gAnalog2);
}

 

void loop()
{

UpdateSlider( 30, 30,30,180, &gAnalog1,10,&old_position,&CurrentPosition);
UpdateSlider( 70, 30,30,180, &gAnalog2,5,&old_position2,&CurrentPosition2);

}

Confession. I had not looked at any of your code.

I calibrated a SSD1289 Touchscreen. Built and ran your program on a Mega2560.

It works fine. i.e. I can move the correct slider and it follows my Touch.

Touching outside of the slider area has no effect.

I then looked at your code. You have obviously thought about it. You could tidy a few issues e.g. choosing parameters.

There is no interaction between sliders. Have you calibrated your Touch Screen?

RinkyDink already have a UTFT_Buttons library. Ok, it does not do sliders but it should show you how to draw buttons, detect them etc.

David.

Hi David and thanks for your answer
Yes i calibrated the touch
And its keep making problems the left slider most of the time affecting the right one
Its not appears constantly but there is alot of times i touch the left one and the right was change position
I dont think it is the screen becuse its not happend with the buttons area
Are you sure there is nothing wrong with the function ?

A Touch Screen is never a perfect device. You will always get some random "touch". Which is why a library or chip does some intelligent processing. e.g. to reject random points. it will take several readings and only call a "touch" valid if it occurs for several milliseconds in the same place.

You can set PREC_MEDIUM, PREC_HIGH etc in the library.
And you can also do some of your own checks for validity.

You are accustomed to a PC keyboard that detects the "correct" key when you type.
Or a Tablet screen that detects your finger. Or even a TouchPad on a laptop.

Believe me, the underlying hardware is often producing "unusual" signals. The operating system or Bios does a pretty good job of making everything appear to work perfectly.

Likewise, a radio signal, disk drive or internet packet will contain errors. These are "corrected" for you. (or did you not realise this?)

David.

Edit. Your Touch accepts clicking anywhere in the Slider range.
Think abouit the GUI scrollbar widget on your PC. You can either pull the slider to position your editor window or you click on the outer areas. The "outer" behaviour works as page-up and page-down. The grab slider works as a movable view.

You have to choose how you want the app to behave.