User:Eleanorg/1.2/Forbidden Pixels/jQuery reveal: Difference between revisions

Latest revision as of 12:33, 23 February 2012

python script with rudimentary jQuery script to reveal the pixel's info on click.
#!/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()
    
##--------- 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: #aaa;
        color: #eee;
      }
      
      .inner {
        margin:auto;
      }
      table {
        border-spacing: 0px;
      }
      
      .pixel {
        width: 50px;
        height: 50px;
        float: left;
        border: 1px #000 solid;
        padding: none;
        margin: none;
        font-size: 10px;
        color: #eee;
        background-color: #333;
      }
      
      .hide p {
        display: none;
      }
    </style>
    
    <script src="jquery-1.5.2.min.js"></script>
    
  </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

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 jQuery to reveal colour string on click -------------#

print """
  <script>
    (function() {
      var td = $('td');
      $(td).click(function(){
        console.log('hello');
        $(this).removeClass('hide');          
      });
    })();
  </script>
  """

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