This is the sequel to Bike Computer help- using smooth arc.
I didn't even know where to get started. All of my web searches on the matter were fruitless. My hardware is an ESP32-S3 with an integral 240 x 240 round LCD and touchscreen. You can see it here:
I honestly didn't even know how to start until I found this webpage:
https://www.bitsanddroids.com/post/how-to-program-a-touchscreen-on-an-esp32
I entered the code from there on lines 31, 34-44 and 66 of my previous sketch. It's a work in progress so there are some commented lines that will be deleted at some point.
Anyway, on that site, the author implied that tft.getTouch was enough to register a touch on the screen. In my case, that's all I want to do. Ideally, I would like to swipe the screen right to go right and left to go left, but the bottom of the screen would just circle around. I haven't seen ANYTHING on swiping, so a touch on the screen would be fine. I don't need a button. The whole screen can be used. I was happy that it did compile and load without puking, but it also didn't work. Thought I would turn the whole screen red just to let me know it worked.
I could use some help understanding the touchscreen. Let me know if you have any questions. Here's what the screen looks like and the area where it says TOTAL MILES should switch between the various modes (TRIP MILES, AVG. SPEED, etc.).
// 11-29-24 Bike computer interface with smooth arc instead of sprite with no erase.
#include "outer_ring_test_gradiant_pink_blue_glow3.h"
#include <TFT_eSPI.h>
//#include <Adafruit_GFX.h>
#include <lvgl.h>
//#include <Fonts/FreeSansBold9pt7b.h>
//lv_disp_t * display1 = lv_disp_create(240, 240)
uint16_t x = 120; // Position of centre of arc, round screen is 240 x 240 with corners chopped off.
uint16_t y = 120;
uint16_t fg_color = TFT_CYAN; // Foreground and background colour used for smoothing (anti-aliasing)
uint16_t bg_color = TFT_BLACK;
uint8_t radius = 100; // Outer arc radius
uint8_t thickness = 15; // Thickness or arc
uint8_t inner_radius = radius - thickness; // Calculate inner radius (can be 0 for circle segment)
const unsigned long refresh_rate = 1000; //interval to update speed/screen (millis)
unsigned long previousTime = 0; //longs are needed because millis can get big fast
float speed;
static int16_t old_end_angle = 60; //start old_end_angle for program.
TFT_eSPI tft = TFT_eSPI(); // Create object "tft"
#include "NotoSansBold72.h"
#include "Dune_Rise_24.h"
#define AA_FONT_LARGE NotoSansBold72
#define AA_FONT_SMALL Dune_Rise_24
uint16_t t_x = 0, t_y = 0;
long a;
void checkTouched() //Copied this function from somewhere to try out. Needs the t_x and t_y defined
//and then call the checkTouched() function in the loop.
{
//Remember this function returns false if the touch is invalid
//C++ asserts something as true if it's not 0. So with a valid press
//This statement will assert to true
if(tft.getTouch(&t_x, &t_y))
{
tft.fillScreen(TFT_RED);
}
}
//SETUP *********************************************************************************************************
void setup(void)
{
Serial.begin(115200);
tft.init();
tft.setRotation(0); //Rotate display to appropriate angle. 0 degrees is at 6 o'clock position
tft.fillScreen(TFT_BLACK);
tft.pushImage(0, 0, 240, 240, outer_ring_test_gradiant_pink_blue_glow3);
tft.setTextDatum(MC_DATUM);
tft.drawString("MPH", x, y + 35, 2);
tft.drawString("TOTAL MILES", x, y + 90, 2);
// Create a sprite for the mileage display
#define MILE_TEXT_WIDTH 240
#define MILE_TEXT_HEIGHT 50
}
//MAIN LOOP********************************************************************************************************
void loop()
{
checkTouched();
unsigned long currentTime = millis();
if (currentTime - previousTime >= refresh_rate)
{
a = random(60, 301);
speed = 27.7;
uint16_t start_angle = 60; // Start angle must be in range 0 to 360. Arcs are drawn clockwise from start_angle to end_angle
uint16_t end_angle = a; // End angle must be in range 0 to 360
while (end_angle != old_end_angle)
{
tft.drawArc(x, y, radius, inner_radius, start_angle, end_angle, fg_color, bg_color);
if (end_angle < old_end_angle)
{
tft.drawArc(x, y, radius, inner_radius, end_angle, old_end_angle, TFT_BLACK, bg_color);
}
float distance = 1000.3;
tft.setTextColor(TFT_WHITE);
tft.loadFont(AA_FONT_LARGE);
tft.drawFloat(speed, 1, x, y); //x and y are the upper left corner of the speed text, apparently
tft.loadFont(AA_FONT_SMALL);
//tft.setTextColor(TFT_WHITE);
tft.drawFloat(distance, 1, MILE_TEXT_WIDTH / 2, y + 90 - MILE_TEXT_HEIGHT / 2);
//delay(250);
//tft.setTextColor(TFT_BLACK);
//tft.drawFloat(distance, 1, MILE_TEXT_WIDTH / 2, y + 90 - MILE_TEXT_HEIGHT / 2);
old_end_angle = end_angle;
}
previousTime = currentTime;
}
}
