/*
 *
 * ESP32_SLIDER_test3.ino
 *
 * https://wokwi.com/projects/399235041961665537 <<---THIS 
 * https://wokwi.com/projects/399224185136243713
 * https://wokwi.com/projects/399209223651392513
 *
 * ESP32_SLIDER_test2.ino
 * https://wokwi.com/projects/399208052939209729 
 *
 *
 * Example of animated slider
 *
 *   Make sure all the display driver and pin connections are correct by
 * editing the User_Setup.h file in the TFT_eSPI library folder.
 *
 * #########################################################################
 * ###### DON'T FORGET TO UPDATE THE User_Setup.h FILE IN THE LIBRARY ######
 * #########################################################################
 *
 * Requires widget library here:
 * https://github.com/Bodmer/TFT_eWidget
 *
 *
*/


#include "Free_Fonts.h"
#include <TFT_eSPI.h>     // Hardware-specific library
#include <TFT_eWidget.h>  // Widget library



TFT_eSPI tft  = TFT_eSPI();      // Invoke custom library
//
TFT_eSprite knob = TFT_eSprite(&tft); // Sprite for the slide knob
SliderWidget s1 = SliderWidget(&tft, &knob);    // Slider 1 widget
//
TFT_eSprite blank = TFT_eSprite(&tft);


// =============================================================================


void prntCHAR(const char *msg, uint16_t Xpos, uint16_t Ypos) { // ???
  //
  prntSTR(String(msg), Xpos, Ypos);
  //
} // prntCHAR()

void prntSTR(String msg, uint16_t Xpos, uint16_t Ypos) { // OK!!!
  // Author: NdK73 @ Apr 4, 2018 - https://github.com/Bodmer/TFT_eSPI/issues/116
  //
  // this is done ONCE at the
  // very first time this function is called
  static String msgOld;
  msgOld.reserve(19);
  //
  tft.setTextColor(TFT_BLACK);
  tft.setCursor(Xpos, Ypos);
  // 'clear' the OLD message from the screen
  // (we can do this by rewriting it with the same background color
  //  (BLACK) to prevent the text on the screen from flashing/flickering)
  tft.print(msgOld);
  // update with a NEW value to print
  // (will be used the next call)
  msgOld = msg;
  //
  
  //
  // display the NEW value
  tft.setCursor(Xpos, Ypos);
  tft.setTextColor(TFT_WHITE);
  tft.print(msg);
  //
} // prntSTR()

void prntNUM(int val16, uint16_t Xpos, uint16_t Ypos) {
  // Author: NdK73 @ Apr 4, 2018 - https://github.com/Bodmer/TFT_eSPI/issues/116
  /*
  // this is done ONCE at the
  // very first time this function is called
  static int valOld16 = val16;
  //
  tft.setTextColor(TFT_BLACK);
  tft.setCursor(Xpos, Ypos);
  // 'clear' the OLD message from the screen
  // (we can do this by rewriting it with the same background color
  //  (BLACK) to prevent the text on the screen from flashing/flickering)
  //            int value, X   , Y
  tft.drawNumber(valOld16, Xpos, Ypos);
  // update value
  valOld16 = val16;
  */
  // display the NEW value
  blank.setCursor(Xpos, Ypos);
  blank.setTextColor(TFT_WHITE);
  //            int value, X   , Y
  blank.drawNumber(val16, Xpos, Ypos);
  //
  blank.pushSprite(110, 18); // OK
/*
  // display the NEW value
  tft.setCursor(Xpos, Ypos);
  tft.setTextColor(TFT_WHITE);
  //            int value, X   , Y
  tft.drawNumber(val16, Xpos, Ypos);
  //
*/
} // prntNUM()


// =============================================================================


void setup() {
  tft.init();
  tft.setRotation(1);
  Serial.begin(115200); // For debug
  Serial.println("\nStarted...\n");
  //
  // text alignment on the screen
  //tft.setTextDatum(TC_DATUM); // Top centre
  //tft.setTextDatum(MC_DATUM); // Middle Centre
  tft.setTextDatum(BC_DATUM); // Bottom centre
  // set Text Style
  tft.setFreeFont(&FreeSansBold12pt7b);
  //tft.setTextFont(4);
  // Text Font Size
  tft.setTextSize(2);
  //tft.setTextSize(1);
  // Text Color and Background
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  //
  blank.createSprite(94, 40);
  blank.fillSprite(TFT_CYAN);//(TFT_BLACK);
  //
/*
// the following code works good: BUT the 'discrete' is better!
  // Create a parameter set for the slider
  slider_t param;
  // Slider slot parameters
  param.slotWidth = 9;           // Note: ends of slot will be rounded and anti-aliased
  param.slotLength = 300;        // Length includes rounded ends
  param.slotColor = TFT_BLUE;    // Slot colour
  param.slotBgColor = TFT_BLACK; // Slot background colour for anti-aliasing
  param.orientation = H_SLIDER;  // sets it "true" for horizontal
  // Slider control knob parameters (smooth rounded rectangle)
  param.knobWidth = 15;          // Always along x axis
  param.knobHeight = 25;         // Always along y axis
  param.knobRadius = 5;          // Corner radius
  param.knobColor = TFT_WHITE;   // Anti-aliased with slot backgound colour
  param.knobLineColor = TFT_RED; // Colour of marker line (set to same as knobColor for no line)
  // Slider range and movement speed
  param.sliderLT = 0;            // Left side for horizontal, top for vertical slider
  param.sliderRB = 100;          // Right side for horizontal, bottom for vertical slider
  param.startPosition = 50;      // Start position for control knob
  param.sliderDelay = 0;         // Microseconds per pixel movement delay (0 = no delay)
*/
  //
  // ==============================================================
  //                                                              =
  // Alternative discrete functions to create/modify same slider  =
  // - BUT FUNCTION SEQUENCE IS IMPORTANT...                      =
  //                                                              =


  //               W   Len  Stripe   Bkgnd      Horizontal
  //s1.createSlider(9, 300, TFT_BLUE, TFT_BLACK, H_SLIDER);      // = OK
  //              W   H  Rad. Color      Vert.Line
  //s1.createKnob(15, 25, 5,  TFT_WHITE, TFT_RED);                // = OK
  //            Start  End <<--- Range
  //s1.setSliderScale(0, 100);                                   // = OK


  //              W   Len  Stripe   Bkgnd      Horizontal
  s1.createSlider(19, 300, TFT_BLUE, TFT_BLACK, H_SLIDER);     // =
  //            W   H  Rad. Color      Vert.Line
  s1.createKnob(21, 38, 5,  TFT_WHITE, TFT_RED);               // =  
  //            Start  End <<--- Range
  s1.setSliderScale(0, 100);                                   // =
  //                                                              =
  // ==============================================================
  //
  //
  // draw the slider at position: 1-80 (X-Y)
  s1.drawSlider(1, 80);
  // draw a bounding box (1 pixel outside slider working area)
  int16_t x, y;    // x and y can be negative
  uint16_t w, h;   // Width and height
  s1.getBoundingRect(&x, &y, &w, &h);     // Update x,y,w,h with bounding box
  tft.drawRect(x, y, w, h, TFT_DARKGREY); // Draw rectangle outline
  //
  uint8_t curVal8 = 50;
  s1.setSliderPosition(curVal8);
  // print the slider value
  prntNUM(curVal8, 160, 65);
  delay(1000);
  curVal8 = 100;
  s1.setSliderPosition(curVal8);
  // print the slider value
  prntNUM(curVal8, 160, 65);
  delay(700);
} // setup()


void loop() {
  //
  //
  static uint8_t t_x = 4, t_y = 19, Ypos = 0;
  //
  if (t_y > 1) Ypos = t_y / 2;
  s1.setSliderPosition(Ypos);
  //
  // print the slider value
  prntNUM(Ypos, 155, 65);
  //
  t_y += 5;
  if (t_y > 200) t_y = 0;
  //
  delay(150);
  //
} // loop()