Intro
My previous effort showed how to superimpose just a crosshairs on an image. That I was able to do within CSS. When it came time to add tick marks to those crosshairs I felt that CSS was getting too complicated. I had only a short time and I honestly couldn’t figure it out.
So I decided on an alternate appraoch of superimposing two images, one of which has transparency. Then it would come down to creating a suitable image that has the crosshairs and tick marks.
The details
I felt this was doable in python and it was, but I needed to add the Python Imaging Library (PIL). On CentOS I simply did a
$ sudo yum install python-imaging
The python program
Here is my python program.
# from http://stackoverflow.com/questions/8376359/how-to-create-a-transparent-gif-or-png-with-pil-python-imaging # drJ 3/2016 # install PIL: yum install python-imaging # from PIL import Image, ImageDraw width = 640 height = 480 halfwidth=width/2 halfheight=height/2 ticklength=10 starttickx=halfwidth - ticklength/2 endtickx=halfwidth + ticklength/2 startticky=halfheight - ticklength/2 endticky=halfheight + ticklength/2 img = Image.new('RGBA',(width, height)) draw = ImageDraw.Draw(img) # crosshairs draw.line((halfwidth, 0, halfwidth, height), fill=252, width=2) draw.line((0, halfheight, width, halfheight), fill=252, width=2) # tick marks def my_range(start, end, step): while start <= end: yield start start += step # top to bottom ticks for y in my_range(0, 480, 30): draw.line((starttickx, y, endtickx, y), fill=252, width=2) # left to right ticks for x in my_range(20, 640, 30): draw.line((x, startticky, x, endticky), fill=252, width=2) img.save('crosshairs.gif', 'GIF', transparency=0) |
The web page
We actually have two iamges side-by-side becuase we have two cameras.
<html> <head> <style type="text/css"> <!-- DrJ 1/2016 Note that Firefox's implementation of linear-gradient is broken and requires us to use repeat linear gradient Some fairly lousy documentation on repeat linear gradient is here: https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient --> #jpg1 { position:absolute; top:0; left:0; z-index:1; } #gif2 { position:absolute; top:10; left:11; /* set top and left here */ z-index:1; } #gif3 { position:absolute; top:10; left:655; /* set top and left here */ z-index:1; } </style></head> <body> <table><tr><td> <div> <img id="jpg1" src="http://dcs-931l-ball/mjpeg.cgi" width="640" height="480" /> <img id="gif2" src="crosshairs.gif" /> </div> <td> <img src="http://dcs-931l-target/mjpeg.cgi" width="640" height="480" /> <img id="gif3" src="crosshairs.gif" /> </tr></table> </body></html> |
To be continued…