User:Eleanorg/1.2/Forbidden Pixels/assigning each td a meaningful id

Here, each td representing a pixel is assigned a meaningful 6-digit id corresponding to its position in the image.
#!/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>
    <style type="text/css">
      body {
        background-color: #333;
        color: #eee;
      }
     
      .pixel {
        width: 50px;
        height: 50px;
        float: left;
        border: 1px #000 solid;
        padding: none;
        margin: none;
      }
    </style>
  </head>
  
<body>
  <div id="header">
    <h1>Forbidden Pixels</h1>
    <p>A 20 x 10 pixel section of a censored photograph</p>
  </div>
  
  <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="pixel" id=" """ + str('%03d' % row) + "." + str('%03d' % column) + """ "><p>Pixel position:"""+ str('%03d' % row) + "." + str('%03d' % column) + """; Color:""" + pixels[row][column] + """</p></td>"""
    print "</tr>"
print "</table>"

##--------- print closing html tags ------------#
print """
  </div>
</body>
</html>"""