style-light-choice
style-dark-choice 
Avatar
Gary
Vollink.com
19 October 2005
Last update: 12 December 2018

GD Percent Example

CGI On-The-Fly Progress Bar

I recently thought I had an actual reason to use GD.pm, turns out I didn't, but while I was messing with it... I created this app that creates a PNG graphic Progress Bar on the fly.

In it's least interesting form, it creates a 200x20 graphic (within an HTML with JavaScript wrappings) that "onClick" increments. As the HTML wrapping suggests, this was for testing purposes.

/cgi-bin/percent.cgi

More fun is the ability to create almost any size with any percentage by request. For example:

The image from "/cgi-bin/percent.cgi/90x200/33":
example

Of course, JavaScript can change the image...  Go ahead, play.

Width:
Height:
Percent:

Docker Detail

Dockerfile:

FROM		perl:latest
MAINTAINER	Gary Allen Vollink g.perl@vollink.com

RUN apt-get update
RUN apt-get install -y libplack-perl libgd-perl starman

WORKDIR /percent
COPY percent.psgi cgi-bin/percent.psgi

EXPOSE 80
CMD starman --port 80 --max_servers 32 cgi-bin/percent.psgi

run-percent.sh

#!/usr/bin/env bash
FN=`date +"percent-run.%Y%m%d.%H%M%S.log"`
docker run --name percent \
      --interactive --tty \
      --detach \
      -p 8083:80 \
      --restart always \
      gvollink/percent > "/Groups/DockerBackup/${FN}"
if [ 125 -eq $? ]
then
    echo Image not found error: listing all...
    docker images
fi

Nginx Detail

	location /cgi-bin/percent.cgi {
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_pass http://localhost:8083;
	}

Updates:

You can view and download the code: percent.psgi.pl.

Valid CSS!