User:Eleanorg/1.2/Forbidden Pixels/Browsable image with CSS & jQuery
This script does all the shizzle with tha image, turning it into a dark html table. You can 'browse' through each cell to reveal each colour.
#!/usr/bin/python
#-*- coding:utf-8 -*-
import os, re
# stores rgb values and pixel co-ordinates in nested lists, thus:
# pixels[ [row1column1, row1column2, row1column3....] [row2column1, row2column2, row2column3...] [row3column1...] ]
#--------- determine image dimensions----------------------------------------#
image = "20by10PixelsSection1.png"
sizeQuery = "identify -format '%w %h' " + image # system command gets image dimensions with ImageMagick
size = os.popen(sizeQuery, 'r').read() # captures output of system call
(width, height) = size.split() # splits ImageMagick output into separate column & row no's
columns = int(width)
rows = int(height)
#print columns
#print rows
#--------- assign pixel details to lists ------------------#
pixels = [] # create empty list 'pixels'
def getcolors ():
for row in range (0, rows): # for each row in the image...
pixels.append([]) # ...append a new sub-list within list 'pixels'
for column in range (0, columns): # for each column in the row...
colorQuery = "convert " + image + " -format '%[pixel:p{" + str(column) + "," + str(row) + "}]' info:-"
colorResult = os.popen(colorQuery, 'r').read() # makes & captures output of system call
color = re.sub("\n", "", colorResult) # strips newline character from end of sys call result
pixels[row].append(color) # append color as a value to the 'row' sublist within 'pixels' - its is same as current column number
getcolors()
# test that colours & coordinates are assigned correctly:
#print pixels [1][1]
##--------- reproduce pixels as an html table ------------------#
##--------- print html page opener ------------#
print """
<!DOCTYPE html>
<html>
<head>
<title>Forbidden Pixels: Trial #1</title>
<script src="jquery-1.5.2.min.js"></script>
<style type="text/css">
body {
background-color: #aaa;
}
table {
background-color: #333;
margin:auto;
margin-top:20px;
}
td {
display:table-cell;
padding:0px;
text-align:inherit;
vertical-align:inherit;
width:50px;
height: 50px;
border: 1px solid #ddd;
}
/* class 'hidden' is removed on hover to show pixel's bg colour */
.hidden {
opacity: 0.2; /* ideally would use backround-color: transparent but jQuery cannot override tag-level styles (each td has colour defined inside it) */
}
/* .popup span is hidden by default; appears when its parent td is hovered on */
.popup {
display: none;
}
td:hover span.popup {
position: absolute;
display:block;
z-index:100;
margin-top:40px;
margin-left:30px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
opacity:1;
padding:10px;
background:#F0F0F0 none repeat scroll 0 0;
font-family:serif;
font-size:14px;
}
</style>
</head>
<body>
<div class="inner">"""
##--------- print table with a loop, using list values ------------#
# '%03f' % row converts row number into 3 digits. This id is printed here both as the <td> id, and also as a string in the paragraph for the user to read.
print "<table>"
for row in range (0, rows):
print "<tr>"
for column in range (0, columns):
print """<td class="hidden" id=" """ + str('%03d' % row) + "." + str('%03d' % column) + """ " style="background-color:""" + pixels[row][column] + """">\n <span class="popup">Pixel: """+ str('%03d' % row) + "." + str('%03d' % column) + """;<br />Color: """ + pixels[row][column] + """</span></td>"""
print "</tr>"
print "</table>"
###---------- print jQuery to reveal colour on hover---------------#
print """
<script>
(function() {
var td = $('td');
$(td).mouseover(function(){
console.log('hello');
$(this).removeClass('hidden');
});
})();
(function() {
var td = $('td');
$(td).mouseout(function(){
console.log('goodbye');
$(this).addClass('hidden');
});
})();
</script>"""
###--------- print closing html tags ------------#
print """
</div>
</body>
</html>"""