LCD Bar Graph Demo [BS2]

History

I recently started working for Parallax and lately I have been getting a lot of requests for code for displaying various things on our 2×16 Serial LCD Display. Everything from temperature / degree displays to clocks and bar graphs. Well the temperature and clock stuff has been covered in the Binary / Digital Clock project. Now it’s time for the bar graph code.

In my programs in the past I have used bar graphs to show the percentage of progress of data files loading, scanning of data or even for settings, such as bass, treble and volume on my amplifier systems. I have developed several demo programs which adequately demonstrate how to create simple and advanced bar graphs on our 2×16 Serial LCD Display, set a 19,200 bps (both DIP switches ON).

Simple VS Advanced

A simple bar graph uses a single character, usually a block, to generate the bar graph one character at a time. The bar graph is made up of these discrete blocks. Since this display doesn’t have a suitable block character to use, we’ll define one as a custom character.

An advanced bar graph uses several custom characters to create a more fluid display that increments one pixel at a time, rather than one character at a time. There is even a random version of each demo which shows how the data looks when it’s not linear going from 0-100%.

Bar_Graph_(Simple).bs2

This example counts from 0 – 255 as an example of a loading or progress indicator. You don’t have to count to 255, you could use 123 or any value > 0 for this example, but the point is that the subroutine that generates the bar graph converts the value to a percentage of the highVal, then creates a proportional graph using one block for every 10%.

Since this is a demo, the first line is showing the current index value as a fraction of the highVal followed by the percentage (perCent). This information is being displayed on line 1 of the LCD, but wouldn’t normally be used in a bar graph application. As a demo, it is here to compare to the resulting bar graph.

Line two shows the actual bar graph as calculated, with a leading 0% legend and a following 100% legend. Again, these aren’t needed, they’re just here for aesthetic reasons. It just happens that these legends use 6 spaces, leaving exactly 10 spaces for the bar graph, which works out well to get one block for every 10%. With a larger display you could increase the resolution of the graph.

Bar_Graph_(Random).bs2

The random version of the bar graph demo serves to show how the bar graph looks when displaying index values that are changing up / down and not just steadily increasing. This example uses the simple graph, which uses an entire character per block. The range of values is 0-255.

Bar_Graph_(Advanced).bs2

This example counts from 0 – 255 as an example of a loading or progress indicator. You don’t have to count to 255, you could use 67 or any value > 0 for this example, but the point is that the subroutine that generates the bar graph converts the index value to a percentage of the highVal, then creates a proportional graph using one pixel block for every 2%, giving higher resolution for both the bar graph and the value.

Bar_Graph_(Random_Advanced).bs2

The random version of the advanced bar graph demo serves to show how the bar graph looks when displaying values that are changing up / down and not just steadily increasing. This example uses the advanced graph, which uses one pixel per block. The range of values is 0-255.

Bar_Graph_(Hi-Res_Simple).bs2

This example counts from 0 – 60000 as an example of a loading or progress indicator. You don’t have to count to 60000, you could use 12345 or any value > 0 up to 65535 for this example, but the point is that the subroutine that generates the bar graph converts the index value to a percentage of the highVal, then creates a proportional graph using one block for every 10%.

One caveat in this Hi-Res example is that, to speed up the demo the code is stepping the index value by 100. If you use a highVal that is not a multiple of 100, the code won’t STEP properly. This isn’t a problem for the demo the way it is written and does not affect the subroutine that generates the bar graph isn’t affected by this. Just be aware of it and its purpose in this demo.

Bar_Graph_(Hi-Res_Advanced).bs2

This example counts from 0 – 60000 as an example of a loading or progress indicator. You don’t have to count to 60000, you could use 34567 or any value > 0 up to 65535 for this example, but the point is that the subroutine that generates the bar graph converts the index value to a percentage of the highVal, then creates a proportional graph using one pixel block for every 2%, giving higher resolution for both the bar graph and the value.

One caveat in this Hi-Res example is that, to speed up the demo the code is stepping the index value by 100. If you use a highVal that is not a multiple of 100, the code won’t STEP properly. This isn’t a problem for the demo the way it is written and does not affect the subroutine that generates the bar graph isn’t affected by this. Just be aware of it and its purpose in this demo.

Bar_Graph_(Hi-Res_Random).bs2

The random version of the bar graph demo serves to show how the bar graph looks when displaying index values that are changing up / down and not just steadily increasing. This example uses the simple graph, which uses an entire character per block. The range of values is 0-65535.

Bar_Graph_(Hi-Res_Random_Advanced).bs2

The random version of the advanced bar graph demo serves to show how the bar graph looks when displaying values that are changing up / down and not just steadily increasing. This example uses the advanced graph, which uses one pixel per block. The range of values is 0-65535.

Final Thoughts

These demos were written for the BASIC Stamp 2 (BS2) for use with the Parallax 2×16 Serial LCD Display, though it could easily be adapted to other serial displays, including different numbers of rows / columns.

In these examples, the Disp_Graph Subroutine is the focal point.

' -----[ Subroutines ]-----------------------------------------------------

Disp_Graph:
  perCent = ((index * 100) / highVal)
  SEROUT LCD, Baud, [LcdLine1, DEC3 index, " / ", DEC3 highVal, " = ", DEC perCent, "%"]
  SEROUT LCD, Baud, [LcdLine2, "0%", REP 0\(perCent / 10), REP 32\(10 - (perCent / 10)), "100%"]
  RETURN

As mentioned earlier, the first SEROUT is just displaying reference values and could easily be removed. The second SEROUT line could be modified the display only the bar graph and not the legends (0% / 100%).

I hope this demo helps in your future projects that require displaying a bar graph on a serial LCD display.

Resources

Discuss this tutorial on Savage///Chats