How do you make a progress bar and put it on an image?

Question

I am trying to put a progress bar onto an image.

I have a discord bot with a level system like this:

Now what I want to do is have the level as a progress bar out of 20. Once they reach 20 the new goal will be 40.

I have tried looking for tutorials and reading websites but I can't find anything about putting a progress bar onto an image..

My end goal is something like this (I got this from MEE6):

Is there a way to do this using Python and pillow or some other module?

Answer 1

You can draw your own progress by:

from PIL import Image, ImageFont, ImageDraw, ImageEnhance

def drawProgressBar(d, x, y, w, h, progress, bg="black", fg="red"):
    # draw background
    d.ellipse((x+w, y, x+h+w, y+h), fill=bg)
    d.ellipse((x, y, x+h, y+h), fill=bg)
    d.rectangle((x+(h/2), y, x+w+(h/2), y+h), fill=bg)

    # draw progress bar
    w *= progress
    d.ellipse((x+w, y, x+h+w, y+h),fill=fg)
    d.ellipse((x, y, x+h, y+h),fill=fg)
    d.rectangle((x+(h/2), y, x+w+(h/2), y+h),fill=fg)

    return d

# create image or load your existing image with out=Image.open(path)
out = Image.new("RGB", (150, 100), (255, 255, 255))
d = ImageDraw.Draw(out)

# draw the progress bar to given location, width, progress and color
d = drawProgressBar(d, 10, 10, 100, 25, 0.5)
out.save("output.jpg")

This will create something like this:

For more details about the drawing take a look to the documentation where you can find some examples, e.g. add text and so on...

Answer 2

Using the example from @Bastian , I tweaked it a little bit to be a little more accurate with small numbers near 0:

## if progress < .5 (half)
#   put the "progress" in the background with 2 objects (begin ellipse and rectangle)
#   put the "unfinished" part in the foreground with 3 objects (begin ellipse, rectangle, end ellipse)
#     make the unfinished begin ellipse get flatter and flatter as it approaches 50%
## if progress >= .5 (half)
#   put the "progress" in the foreground with 3 objects (begin ellipse, rectangle, end ellipse)
#   put the "unfinished" part in the background with 2 objects (rectangle, end ellipse)
#     make the progress end ellipse start flat and get rounder as it approaches 100%

if progress < 0.5:
    # draw progress bar
    d.ellipse((x, y, x+h, y+h),fill=fg)
    d.rectangle((x+(h/2), y, x+w+(h/2), y+h),fill=fg)
    # d.ellipse((x+w, y, x+h+w, y+h),fill=fg)

    # draw background (unfinished portion)
    d.ellipse((x+w, y, x+w+(h*(1-(2*progress))), y+h), fill=bg)
    d.rectangle((x+w+(h/2)-(h*progress), y, e+(h/2), y+h), fill=bg)
    d.ellipse((e, y, e+h, y+h), fill=bg)

if progress >= 0.5:
    # draw background (unfinished portion)
    # d.ellipse((x, y, x+h, y+h), fill=bg)
    d.rectangle((x+w, y, e+(h/2), y+h), fill=bg)
    d.ellipse((e, y, e+h, y+h), fill=bg)

    # draw progress bar
    d.ellipse((x, y, x+h, y+h),fill=fg)
    d.rectangle((x+(h/2), y, x+w+(h*(progress-0.5)), y+h),fill=fg)
    d.ellipse((x+w, y, x+w+h*2*(progress-0.5), y+h),fill=fg)