Bar graph?

ESPHome
#1

Any thoughts of a way to create a bar graph?

One of the sensors I read from HA is a % done amount of 0-100%. On my esphome display, I’d like to create a bar graph under the number I’m showing to depict the % done graphically.

I’m thinking it should be some sort of loop of 0 to the percentage, then display a vertical bar of width 1, increment the x position, repeat until you get to the finished percentage.

But I’m not sure how I can make that happen.

Thanks!

#2

My first thought was to draw a filled rectangle.

     // Draw the same rectangle, but this time filled.
      it.filled_rectangle(50, 60, 30, 42);

Get width/height could come in handy.

display:
  - platform: ...
    # ...
    lambda: |-
      // Draw a circle in the middle of the display
      it.filled_circle(it.get_width() / 2, it.get_height() / 2, 20);

Could also help if you sketch up what you’re thinking it might look like.

#3

I think I was staring at the issue for too long lol. Super simple. Appreciate it!

The screen is 320px wide… so 3*print progress will be 0 to 300.

          it.rectangle(20, 120, 300, 15);
          it.filled_rectangle(20, 120, 3*id(print_progress).state, 15, green);
1 Like