User:Eleanorg/1.2/Forbidden Pixels/Browsable image with CSS & jQuery: Difference between revisions

Latest revision as of 12:01, 28 March 2012

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: http://pzwart3.wdka.hro.nl/~egreenhalgh/forbiddenPixels/fullGridWithPopups.html
Works fine in Chrome; jQuery only working in my Firefox when firebug console is open. wtf?
#!/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(){
        //Will break in browser that don't have the console... 
        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>"""