Simple Progress Bar for Arduino and LCD

Introduction: Simple Progress Bar for Arduino and LCD

About: Kitchen fitter by trade, project builder and lifelong learner by choice.

This instructible is to show you how to implement a simple progress bar into your code to graphically show the progress of a process.

There is very little needed in the way of code and supplies. The bare bones code I have supplied can be used as a starting point for your project, or you can transfer the appropiate code into your own established project.

UPDATE: Under the code section, there are 2 ardunio files. The 'Progress_bar' file is the original. This is streamlined code that only work in a linear count.

The 'Progress_bar_MK2' file has added code in the function that allows a bar display even with random numbers. I have included a small random number routine to show how it works. Use this version if you are using random or unpredictable values.

Supplies

To run this, all you need is an Arduino and an LCD.

(My LCD is I2C, but as long as your display supports the appropriate print() and write() commands, it should also work)

Step 1: The Code

The code supplied is heavily commented, but just for clarification, here are the main points to get this running:

The following lines set up the I2C for the liquid crystal display. If your code is not exactly the same, it may still work if it uses the same commands.

#include <Wire.h>

#include <LiquidCrystal_I2C.h>

This line sets up the LCD with the correct address and sets the size. Depending on your module, the address and size may be different.

LiquidCrystal_I2C lcd(0x27, 16, 2);

There are 6 byte arrays. In each array, there are 7 bytes and each byte has 5 bits (the 3 leading zeros dont count). These are what is used to display the sections of the progress bar.

byte zero[] = {<br>  B00000,
  B00000,
  B00000,
  B00000,
  B00000,
  B00000,
  B00000,
  B00000
};
byte one[] = {
  B10000,
  B10000,
  B10000,
  B10000,
  B10000,
  B10000,
  B10000,
  B10000
};
byte two[] = {
  B11000,
  B11000,
  B11000,
  B11000,
  B11000,
  B11000,
  B11000,
  B11000
};
byte three[] = {
  B11100,
  B11100,
  B11100,
  B11100,
  B11100,
  B11100,
  B11100,
  B11100
};
byte four[] = {
  B11110,
  B11110,
  B11110,
  B11110,
  B11110,
  B11110,
  B11110,
  B11110
};
byte five[] = {
  B11111,
  B11111,
  B11111,
  B11111,
  B11111,
  B11111,
  B11111,
  B11111
};

Moving onto the setup() section, we initialise the LCD and then allocate each byte array to a number

lcd.begin();
lcd.createChar(0, zero);
lcd.createChar(1, one);
lcd.createChar(2, two);
lcd.createChar(3, three);
lcd.createChar(4, four);
lcd.createChar(5, five);

Once all the above is done, we only need 1 call from our code to display the current progress of the bar. The 3 argumens required are the current number, the total count and the line you want to print to in the LCD.

updateProgressBar(i, 100, 1);

This calls the following method (version 1 code).

void updateProgressBar(unsigned long count, unsigned long totalCount, int lineToPrintOn)<br> {
    double factor = totalCount/80.0;          
    int percent = (count+1)/factor;
    int number = percent/5;
    int remainder = percent%5;
    if(number > 0)
    {
       lcd.setCursor(number-1,lineToPrintOn);
       lcd.write(5);
    }
   
       lcd.setCursor(number,lineToPrintOn);
       lcd.write(remainder);   
 }

Or this (version 2 code):

void updateProgressBar(unsigned long count, unsigned long totalCount, int lineToPrintOn)<br> {
    double factor = totalCount/80.0;          
    int percent = (count+1)/factor;
    int number = percent/5;
    int remainder = percent%5;
    if(number > 0)
    {
      for(int j = 0; j < number; j++)
      {
        lcd.setCursor(j,lineToPrintOn);
       lcd.write(5);
      }
    }
       lcd.setCursor(number,lineToPrintOn);
       lcd.write(remainder); 
     if(number < 16)	//If using a 20 character display, this should be 20!
    {
      for(int j = number+1; j <= 16; j++)  //If using a 20 character display, this should be 20!
      {
        lcd.setCursor(j,lineToPrintOn);
       lcd.write(0);
      }
    }  
 }

I have heavily commented the code and give a greater description in the video, but essentially it works out the full and part columns that need to be displayed, from the arguments given and uses those to print the appropriate bar onto the screen, starting from the left hand side and on the line given in the argument. The full width of the screen is used.

Step 2: Possible Changes to Play With

The code supplied just displays simple bars accross the screen, but you could alter the byte arrays to print something different. You could shorten the height (by making the top and bottom bytes all zeros. You could try and make arrows instead?

Also, if you wanted to reduce the widch on the screen, it is also possible.Just reduce the 80.0 given in the code to represent the number of columns. If you want to use 1/2 the screen, this would become 40.0 instead.

If you want the bar the start in column 2 instead of column zero, place an offset into the setCursor commands, so:

lcd.setCursor(number-1,lineToPrintOn)

Would become:

lcd.setCursor((number+2)-1,lineToPrintOn)

And:

lcd.setCursor(number,lineToPrintOn);

Would become:

lcd.setCursor((number+2),lineToPrintOn);

I hope it helps in your project.

1 Person Made This Project!

Recommendations

  • Puzzles Challenge

    Puzzles Challenge
  • Rice & Grains Challenge

    Rice & Grains Challenge
  • Lamps Challenge

    Lamps Challenge

8 Comments

0
pa0o
pa0o

11 months ago on Step 2

lcd.write(0);
generates error
call of overloaded 'write(int)' is ambiguous
could not yet produce a running progress bar using the code

0
mike.panchaud
mike.panchaud

Reply 5 months ago

Hi,
OK, 6 months late but, DuckDuckgo.com supplied this fix which does prevent this error:

Change,

lcd.write(0);
to
lcd.write((byte)0);

Mike

0
phenoxyethanol
phenoxyethanol

Reply 5 months ago

I'm surprised this was ever an error, as it wasn't for me, but I will be curious to know if it works for pa0o. Thanks for taking the time to reply on this.

0
phenoxyethanol
phenoxyethanol

Reply 5 months ago

I'm surprised you are getting this error, as the lcd.createChar setup maps 0 to Byte Zero.
I would be intersted to know if Mike's solution works for you.

0
Harry H.A
Harry H.A

Question 10 months ago

good project,
I changed the code a bit for the colom start:
int offset = 4; // the colom where to start
These lines must be changed also:
lcd.setCursor((number + offset) - 1, lineToPrintOn);
and
lcd.setCursor(number + offset, lineToPrintOn);

greetings Harry

0
phenoxyethanol
phenoxyethanol

Answer 10 months ago

Hi Harry
Glad you have been able to adapt it for your needs.
Regards
Bob

0
pa0o
pa0o

11 months ago on Step 2

thanks
had to remove <br> in source text 3x

0
phenoxyethanol
phenoxyethanol

Reply 10 months ago

Glad you managed to sort it.