Progress bar on IL9341 2.2 tft without touch

Other Hardware Displays
1

Hi
I have a problem, I can't find a library that will allow me to draw a progress bar in an easy way. I wanted to present the variable numerically as well as graphically. horizontal bar.
Thanks

1 Like
2

Here is example code using rect and filled rect to make a progress bar. Does this help?

#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_ILI9341.h"

// For the Adafruit shield, these are the default.
const byte TFT_RST = 7;
const byte TFT_DC = 9;
const byte TFT_CS  = 10;

byte X = 0;
byte Y = 40;
byte W = 240;
byte H = 50;
byte progress = 0;

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);

void setup()
{
   Serial.begin(9600);
   Serial.println("ILI9341 bargraph Test!");
   tft.begin();
   tft.fillScreen(ILI9341_BLACK);
   tft.setCursor(0, 0);
   tft.setTextColor(ILI9341_WHITE);  tft.setTextSize(2);
   tft.println(" bargraph Test!");
   tft.drawRect(X, Y, W, H, ILI9341_WHITE);
}


void loop(void)
{
   barProgress();
}

void barProgress()
{
   static unsigned long timer = 0;
   unsigned long interval = 1000;
   if (millis() - timer >= interval)
   {
      timer = millis();
      tft.fillRect(X, Y, progress, H, ILI9341_WHITE);
      tft.setCursor(10, 100);
      tft.print("Progress =  ");
      tft.fillRect(130, 100, 100, H, ILI9341_BLACK); // erase old data
      tft.setCursor(140, 100);
      tft.println(progress);
      progress += 10;
      if(progress > 240)
      {
         while (1);  // finished just wait.  Take this out for your use.
         // or reset the numbers for another go
      }
   }
}
1 Like
3

Thanks. I was thinking about a rectangle, but I was hoping that there is a bar function. Thank you very much.
But there is one more problem. I assigned the variable from the analog input and the potentiometer to this. The bar fills up, but when it decreases, it won't go back

4

Go on. A Bar is only a filled rectangle. You need to repaint the background when the Bar gets smaller.

Graphics libraries contain all the necessary lines and shapes. Both as outline and as filled shapes.

You can always write a "helper" function that draws a Bar and background at a specific x, y coordinate.
e.g. with colour, size, maximum length, ...

David.

5

I was thinking more along the lines of a progress bar like for file loading or such one way uses. What you want does sound more like a bar graph.

I did a search for "lcd bar graph arduino tft library" and found, among others:
Adafruit GFX Bar Graph
TFT bar graph.

Both of those use pots to control a bargraph.

6

A progress bar is easy. It starts at 0% and always gets bigger until 100%

A general purpose bar might get bigger or smaller. Or even change colour.

Fairly simple to make your own bar function from the simple GFX primitives.

For more complex graphs, piecharts, ... it is easier to use a well written library.

David.

7

Thanks
IT works :slight_smile:

void barProgress()
{
  int sensorValue = analogRead(A1);
  float voltage = sensorValue * (5.0 / 1023.0);
   static unsigned long timer = 0;
   unsigned long interval = 1000;
   a = sensorValue /10;
   if (a != b){
     // timer = millis();
      tft.fillRect(0, Y, sensorValue / 4, H, ILI9341_WHITE);
      tft.fillRect(sensorValue /4, Y, 240, H, ILI9341_BLACK);
      tft.setCursor(10, 100);
      tft.print("Progress =  ");
      tft.fillRect(130, 100, 50, 16, ILI9341_BLACK); // erase old data
      tft.setCursor(140, 100);
      tft.println(sensorValue /4);
      b = a;
      
   }
}