User:Eleanorg/1.2/Forbidden Pixels/trying to print html grid with colours

From XPUB & Lens-Based wiki
  • update *

Will have to figure out the mysterious ways of os.system some other time, when I have more patience. For now - used os.popen().read() with no trouble at all. d'oh. Here's the new version. Works just beautifully in Firefox, but weirdly the spans don't show up at all in Chrome...

python script 0.2

<!DOCTYPE html>
<html>
  <head>
    <title>Forbidden Pixels: Trial #1</title>
    <style type="text/css">
      #header {
        width: 200px;
        height: 1000px;
        float:left;
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 20px;
        border-right: 1px solid #000;
        background-color: #fff;
        font-family: sans-serif;
        
      }
      .inner {
        width: 1000px;
        margin-top: 20px;
        float:left;
        margin-left: 30px;
        
       
        background-color: #aaa;
      }
      .pixel {
        min-width: 50px;
        min-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">"""
  
# prints out a grid of square spans


# pixel coordinates given as x,y, where 0,0 is top left, 1,0 second along on top row, etc
# convert 4by1PixelsSection1.png -format '%[pixel:p{0,0}]' info:-
# uses os module to run system command, using ImageMagick to extract RGB values for each pixel

image = "4by1PixelsSection1.png"
for x in range(0,4):
    command = "convert " + image + " -format '%[pixel:p{" + str(x) + "," + str(0) + "}]' info:-"
    rgbValue = os.popen(command, 'r').read()
    print """
    <span class="pixel" id="pixel_""" + str(x) + """" style="background-color: """ + rgbValue + """;"></span>"""
    
print """
   
  </div>
</body>
</html>"""



Ok so I don't get how this script is working. It prints a basic html page, with some shizzle in the middle to get some CSS values from a system command. Trouble is, when I try to print the output of the system command, '0' is printed. Same when I try to manipulate it in any way - '0' is all I get. But the (correct) output of the command is printed, even where no print instruction is given, at the very start before the <!DOCTYPE> tag. So what's the deal? Does os.system() not return a string object in the normal way, that can be printed and manipulated? 

#!/usr/bin/python
#-*- coding:utf-8 -*-

import os

print """
<!DOCTYPE html>
<html>
  <head>
    <title>Forbidden Pixels: Trial #1</title>
    <style type="text/css">
      #header {
        width: 200px;
        height: 1000px;
        float:left;
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 20px;
        border-right: 1px solid #000;
        background-color: #fff;
        font-family: sans-serif;
        
      }
      .inner {
        width: 1000px;
        margin-top: 20px;
        float:left;
        margin-left: 30px;
        
       
        background-color: #aaa;
      }
      .pixel {
        min-width: 50px;
        min-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">"""
  
# prints out a grid of square spans

image = "4by1PixelsSection1.png"
# pixel coordinates given as x,y, where 0,0 is top left, 1,0 second along on top row, etc
# convert 4by1PixelsSection1.png -format '%[pixel:p{0,0}]' info:-

# uses os module to run system command, using ImageMagick to extract RGB values for each pixel
for x in range(0,4):
    command = "convert " + image + " -format '%[pixel:p{" + str(x) + "," + str(0) + "}]' info:-"
    rgbValue = os.popen(command, 'r').read()
    print """
    <span class="pixel" id="pixel_""" + str(x) + """" style="background-color: """ + rgbValue + """;">hello world</span>"""
    
print """
   
  </div>
</body>
</html>"""

...only problem now is, though the spans are printed to the html doc fine, they don't actually show up in a browser! Hmmm....

The python script 0.1

#!/usr/bin/python
#-*- coding:utf-8 -*-

import os

print """
<!DOCTYPE html>
<html>
  <head>
    <title>Forbidden Pixels: Trial #1</title>
    <style type="text/css">
      #header {
        width: 200px;
        height: 1000px;
        float:left;
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 20px;
        border-right: 1px solid #000;
        background-color: #fff;
        font-family: sans-serif;
        
      }
      .inner {
        width: 1000px;
        margin-top: 20px;
        float:left;
        margin-left: 30px;
        
       
        background-color: #aaa;
      }
      .pixel {
        min-width: 50px;
        min-height: 50px;
        float: left;
        border: 0px #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">"""
  
# prints out a grid of square spans

image = "4by1PixelsSection1.png"
# pixel coordinates given as x,y, where 0,0 is top left, 1,0 second along on top row, etc
# convert 4by1PixelsSection1.png -format '%[pixel:p{0,0}]' info:-

# uses os module to run system command, using ImageMagick to extract RGB values for each pixel
for x in range(0,4):
    command = "convert " + image + " -format '%[pixel:p{" + str(x) + "," + str(0) + "}]' info:-"
    rgbValue = str(os.system(command)) 
#    print(rgbValue) 		#prints '0' - wtf?
    print """
    <span class="pixel" id="pixel_""" + str(x) + """" style="background-color:" """ + rgbValue + """"></span>"""
    
print """
   
  </div>
</body>
</html>"""


The html output

rgba(150,184,183,1)
rgba(133,167,166,1)
rgba(124,153,151,1)
rgba(121,147,146,1)

<!DOCTYPE html>
<html>
  <head>
    <title>Forbidden Pixels: Trial #1</title>
    <style type="text/css">
      #header {
        width: 200px;
        height: 1000px;
        float:left;
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 20px;
        border-right: 1px solid #000;
        background-color: #fff;
        font-family: sans-serif;
        
      }
      .inner {
        width: 1000px;
        margin-top: 20px;
        float:left;
        margin-left: 30px;
        
       
        background-color: #aaa;
      }
      .pixel {
        min-width: 50px;
        min-height: 50px;
        float: left;
        border: 0px #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">

    <span class="pixel" id="pixel_0" style="background-color:" 0"></span>

    <span class="pixel" id="pixel_1" style="background-color:" 0"></span>

    <span class="pixel" id="pixel_2" style="background-color:" 0"></span>

    <span class="pixel" id="pixel_3" style="background-color:" 0"></span>

   
  </div>
</body>
</html>
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Eleanorg/1.2/Forbidden_Pixels/trying_to_print_html_grid_with_colours&oldid=23324"