Published May 18, 2020

ESP32 Touch Slider

Capacitive touch slider using ESP32 touch pins. Increase or decrease value based on swipe. Control volume, brightness, color, and much more.

BeginnerWork in progress30 minutes4,572

Things used in this project

Hardware components

Espressif ESP32S

aluminium foil

Software apps and online services

Arduino IDE

Story

Imagine having a slider control or an analog-type input without additional knobs/switches or hardware. This project makes use of the ESPs touchRead() function to make a software slider input.

Touch Surface

The capacitive slider surface can be of any shape and size you want. In this project I am simply using a strip of aluminium foil.

The main principle this works on is -

Capacitance changes with increase/decrease in thickness of dielectric between the two electrodes.

To leverage this I am creating a gradient of insulator on top of the aluminium foil to get this change in the capacitance from one end of the strip to another.

The choice of dielectric is clear plastic tape (sellotape), that is applied multiple layers. The tape is cut shorter by a few mm each time for the new layer applied on the aluminium foil. This will create a gradual increase in the thickness of the insulation over the strip. The change is still in terms of discreet steps, resolution of which should be decided based on the application and use case.

I could not take any good pictures to show the layering on my strip, so here's a 3D render of what it will look like -

The layers of tape gets shorter as visible, to change the dielectric thickness

Each translucent square is one sensitivity zone, so this strip has a resolution of 6.

The Code

The logic is to read the touch inputs repeatedly and check if the value has increased or decrease as compared to the previous reading. Each time such increase or decrease happens ideally your finger has moved from a point on the strip of one thickness to another point of different thickness.

By having a count of such increase/decrease, we can get an analog value reading as well as direction of swipe. And this can be achieved from one GPIO pin of ESP32.

Note: The code provided in this project is more of an proof of concept than a finished library. A lot has to be refined and polished before turning this into a general purpose library that can be used along with others in a typical project.

My touch slider

The resolution of the aluminium strip slider I made is very low (4 to be precise). And as a result of that the analog reading is not very accurate.

My initial idea was to change the color of the moon in a smooth manor according to the sliding on the strip. But the values read are not repeatable for the multiple slides of same manor. Hence I have repurposed it as a direction of swipe indicator.

I am increasing a Hue of the LED by a fixed value each time there is a swipe in one direction and decreasing by the same value for swipe in opposite direction.

Using the touch slider to change color in my project

Touch Slider

#include <Arduino.h>
#include "RGBLED.h"


//prototype declaration
int level_inc_or_dec(int val);

int H =0;
RGBLED L1(25, 33, 32, COMMON_CATHODE);

void setup()
{
  Serial.begin(115200);
  delay(1000); // give me time to bring up serial monitor
  Serial.println("ESP32 Touch Swipe Test");
  
  L1.writeHSV(H, 1, 1);
}

int prev_val;
  
void loop()
{
  int val = touchRead(T5);
  int latest_val;
  if ( val < 70 && (val > prev_val+5 || val < prev_val-5) )
  {
    delay(10);
    latest_val = touchRead(T5);
    if ( latest_val < val+5 && latest_val > val-5)
    {
      prev_val = latest_val;
      Serial.println(latest_val);
      int inc_dec = level_inc_or_dec(latest_val);
      Serial.println(inc_dec);
      inc_dec > 0 ? H+=30 : (inc_dec ==0 ? 0:H -=30);
      H < 0 ? H=0:H;
      H > 360 ? H=360: H; 
      L1.writeHSV(H, 1, 1);
    }
  }
  delay(100);
}

int level_inc_or_dec(int val)
{
  int prev_val=val;
  int count = 0;
  while(val < 70)
  {
    delay(100);
    val = touchRead(T5);
    if ( val < 70 && (val > prev_val+5 || val < prev_val-5) )
    {
      val < prev_val ? count-- : count++;
      prev_val = val;
    }
  }
  return count;
}

Credits

rakshith bk

2 projects • 4 followers

Engineer in making; Tinkerer; Hobby photographer;

Contact

Comments

Please log in or sign up to comment.

Embed the widget on your own site

ESP32 Touch Slider

ESP32 Touch Slider

Things used in this project

Hardware components

Software apps and online services

Story

Touch Surface

The Code

My touch slider

Code

Touch Slider

Credits

rakshith bk

Comments

Related channels and tags