Generated Background Image Viewer
Sincere thanks to: http://www.imagemagick.org/Usage/backgrounds/
The objective of this page is to allow you to get an idea of how a background would look, also, to learn and have fun.
This page uses two layers to create the patterned gradient background. The first layer is in the body styling, and it is the generated image. The next layer is transparent overlay. This allows any background image to be used, with a gradient. It reduces the size of the files required for the display to a tile and a gradient. This demo also has some gradients built in, those are 8x500, and would normally be only repeated horizontally, and would not need the second layer.
Choose an from the following pulldown. That image will become the background image.
The Random images are regenerated daily.
Code for this page (PHP)
<?php
$aBackgroundFiles=glob('*.png');
$bBadFile=true;
if (isset($_POST['bg']))
{
$sBackground=$_POST['bg'];
/* Ensure the requested file is from this directory and is a .png */
$bBadFile=(!in_array($sBackground,$aBackgroundFiles));
}
/* Discard invalid inputs */
if ($bBadFile)
$sBackground=$aBackgroundFiles[0];
?>
<html>
<head>
<title>ImageMagick Generated Background Viewer</title>
<style type="text/css">
body
{
color:#0069aa;
font-family:verdana, arial, sans-serif;
background:#fff url(<?php echo $sBackground; ?>) repeat;
margin:0;
padding:0;
}
#main
{
background-image:url(gradient.png);
width:100%;
}
#content
{
border:3px solid #0069aa;
background:#fff;
width:800px;
margin:45px;
padding:25px;
overflow:scroll;
}
h1,h2
{
color:#013a5c;
}
label
{
font-weight:bolder;
font-size:0.7em;
padding-right:0.5em;
}
pre
{
color:#777;
overflow:scroll;
background-color:#eee;
border:1px dotted #777;
}
</style>
</head>
<body id="body">
<div id="main">
<div id="content">
<h1>Generated Background Image Viewer</h1>
<p>Sincere thanks to: <a href="http://www.imagemagick.org/Usage/backgrounds/">http://www.imagemagick.org/Usage/backgrounds/</a></p>
<p>The objective of this page is to allow you to get an idea of how a background would look, also, to learn and have fun.</p>
<p>This page uses two layers to create the patterned gradient background. The first layer is in the body styling, and it is the generated image. The next layer is transparent overlay. This allows any background image to be used, with a gradient. It reduces the size of the files required for the display to a tile and a gradient. This demo also has some gradients built in, those are 8x500, and would normally be only repeated horizontally, and would not need the second layer.</p>
<p>Choose an from the following pulldown. That image will become the background image.</p>
<p>The <strong>Random</strong> images are regenerated daily.</p>
<form name="selectForm" id="selectForm" method="post">
<label for="bg">Background image</label><select name="bg" id="bg" onchange="changeBackground(this)">
<?php
foreach ($aBackgroundFiles as $filename) {
echo '<option '.(($filename==$sBackground)?'selected':'').'>'.$filename.'</option>';
}
?>
</select>
</form>
<h2>Code for this page (PHP)</h2>
<pre>
<?php
echo htmlentities(file_get_contents(__FILE__));
?>
</pre>
<h2>bash script for generating the files</h2>
<pre>
<?php
echo htmlentities(file_get_contents('bg.sh'));
?>
</pre>
</div>
</div>
</body>
<script type="text/javascript">
var frm=document.getElementById('selectForm');
function changeBackground(e)
{
frm.submit();
}
</script>
</html>
bash script for generating the files
convert -size 8x768 gradient:black-none -fill "#0069aa" -sigmoidal-contrast 6,50% -colorize 100% pattern:LEFT30 -compose multiply -flatten -transparent black left30.png
convert -size 8x768 gradient:black-none -fill "#0069aa" -sigmoidal-contrast 6,50% -colorize 100% pattern:VERTICAL -compose multiply -flatten -transparent black vertical.png
convert -size 8x768 gradient:black-none -fill "#0069aa" -sigmoidal-contrast 6,50% -colorize 100% pattern:HORIZONTAL -compose multiply -flatten -transparent black horizontal.png
convert -size 8x768 gradient:black-none -fill "#0069aa" -sigmoidal-contrast 6,50% -colorize 100% pattern:CROSSHATCH45 -compose multiply -flatten -transparent black crosshatch45.png
convert -size 32x768 gradient:black-none -fill "#0069aa" -sigmoidal-contrast 6,50% -colorize 100% pattern:GRAY75 -compose multiply -flatten -transparent black gray75.png
convert -size 30x768 gradient:black-none -fill "#0069aa" -sigmoidal-contrast 6,50% -colorize 100% pattern:HEXAGONS -compose multiply -flatten -transparent black hexagons.png
convert -size 8x768 gradient:black-none -fill "#0069aa" -sigmoidal-contrast 6,50% -colorize 100% pattern:HS_DIAGCROSS -compose multiply -flatten -transparent black hsdiagcross.png
convert -size 8x768 gradient:black-none -fill "#0069aa" -sigmoidal-contrast 6,50% -colorize 100% pattern:VERTICALSAW -compose multiply -flatten -transparent black verticalsaw.png
convert -size 8x768 gradient:black-none -fill "#0069aa" -sigmoidal-contrast 6,50% -colorize 100% pattern:HORIZONTALSAW -compose multiply -flatten -transparent black horizontalsaw.png
convert -size 1x768 gradient:none-black -fill "white" -sigmoidal-contrast 6,50% -colorize 100% gradient.png
convert -size 80x80 xc: +noise Gaussian noise.png
convert -size 50x80 xc: +noise Gaussian -write mpr:rand \
-extent 100x80 -page +50-40 mpr:rand \
-page +50+40 mpr:rand -flatten hextile.png
i=0
for t in "-blur 0x5" \
"-blur 0x10" \
"-blur 0x2 -fx intensity" \
"-blur 0x10 -emboss 4 -edge 1" \
"-blur 0x10 -edge 15 -edge 1 -blur 0x1" \
"-blur 0x10 -edge 15 -edge 1 -blur 0x1 -fx G -shade 280x45" \
"-blur 0x10 -write mpr:save -negate -edge 1 -negate -fx G ( mpr:save -edge 1 -fx G ) -shade 280x45 -average" \
"-blur 0x5 -normalize -fx g -sigmoidal-contrast 15x50% -solarize 50%" \
"-paint 10 -shade 120x45" \
"-blur 0x10 ( +clone -negate ) -edge 1 -fx u.G+v.G -shade 280x45"
do
convert hextile.png -virtual-pixel tile $t -normalize -colorspace gray -fill "#0069aa" -tint 100 Random-$i.png
i=$(($i+1))
done