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 are the new versions:


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

#!/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=23265"