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…