User:Eleanorg/1.2/Forbidden Pixels/trying to print html grid with colours
- 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
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
# 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>