<?php
if(!extension_loaded('infusion')) {
function bround($n, $b) {
if($b == 0) {
return false;
}
return $n + $b - $n % $b;
}
function limit($num, $max) {
return $num > $max ? $max : $num;
}
function bound($x, $min, $max) {
if ($x < $min) {
return $min;
} else if ($x > $max) {
return $max;
} else {
return $x;
}
}
}
require 'xcolor.php';
$xc = new xColor;
$c1 = $xc->random();
$c2 = $xc->invert($c1);
$c3 = $xc->random();
$c4 = $xc->random();
$c5 = $xc->random();
$c6 = $xc->combine($c4, $c5);
?>
<!doctype html public "-//w3c//dtd html 3.2 final//en">
<html>
<head>
<title></title>
<style type='text/css'>
.box{
width:200px;
height:200px;
position: absolute;
top: 20px;
border:1px solid black;
text-align:center;
z-index:0;
}
.subBox{
width:40px;
height:120px;
top: 60px;
position: absolute;
z-index:1;
}
#box1{
left:20px;
background-color:#<?php echo $c2; ?>;
}
#box2{
left:240px;
background-color:#<?php echo $c4; ?>;
}
#box3{
left:460px;
background-color:#<?php echo $c6; ?>;
}
#box1a{
left:60px;
background-color:#<?php echo $c1; ?>;
}
#box1b{
left:140px;
background-color:#<?php echo $c2; ?>;
}
#box2a{
left:280px;
background-color:#<?php echo $c3; ?>;
}
#box2b{
left:360px;
background-color:#<?php echo $c4; ?>;
}
#box3a{
left:500px;
background-color:#<?php echo $c5; ?>;
}
#box3b{
left:580px;
background-color:#<?php echo $c6; ?>;
}
</style>
</head>
<body>
<div id='box1' class='box'>Box 1</div>
<div id='box2' class='box'>Box 2</div>
<div id='box3' class='box'>Box 3</div>
<div id='box1a' class='subBox'> </div>
<div id='box1b' class='subBox'> </div>
<div id='box2a' class='subBox'> </div>
<div id='box2b' class='subBox'> </div>
<div id='box3a' class='subBox'> </div>
<div id='box3b' class='subBox'> </div>
<div id='gradBase' style='position:absolute;top:300;left:10px;'> </div>
<div id='gradLine' style='position:absolute;top:325;left:10px;width:2px;height:40px;background-color:black;z-index:3'> </div>
<script language="JavaScript">
// setup the page variables.
<?php
// Generate the javascript to creat a color change gradient. The ouput
// includes all of the colors needed in an array as well as the timer function
// which is called every few ms.
// The result is a slow color transition.
$MaxCount = 255; // number of steps for the gradient change
$TimeSlice = 25; // time delay in ms.
?>
var nMaxCount = <?php echo $MaxCount; ?>;
var nTimeOut = <?php echo $TimeSlice; ?>;
var nCount = 0;
var nDirection = 0;
// get the objects for the 3 div boxes.
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var oBox3 = document.getElementById('box3');
// gradient position line.
var oGradLine = document.getElementById('gradLine');
<?php
echo "// Color array 1
var Colors1 = new Array(";
// Build the array of gradient colors.
for( $i = 0; $i < $MaxCount; $i++ ){
$Color = '#'.$xc->gradientLevel($c1, $c2, $MaxCount, $i);
//$Color = '#'.$xc->gradientLevel('ffffff', '000000', $MaxCount, $i);
if( $i > 0 ){
echo ",'$Color'";
}else{
echo "'$Color'";
}
}
echo ");\n";
echo "
// Color array 2
var Colors2 = new Array(";
// Build the array of gradient colors.
for( $i = 0; $i < $MaxCount; $i++ ){
$Color = '#'.$xc->gradientLevel($c3, $c4, $MaxCount, $i);
if( $i > 0 ){
echo ",'$Color'";
}else{
echo "'$Color'";
}
}
echo ");\n";
echo "
// Color array 3
var Colors3 = new Array(";
// Build the array of gradient colors.
for( $i = 0; $i < $MaxCount; $i++ ){
$Color = '#'.$xc->gradientLevel($c5, $c6, $MaxCount, $i);
if( $i > 0 ){
echo ",'$Color'";
}else{
echo "'$Color'";
}
}
echo ");\n";?>
// Change color function., called every few milli seconds.
function changeColor(){
oBox1.style.backgroundColor=Colors1[nCount];
oBox2.style.backgroundColor=Colors2[nCount];
oBox3.style.backgroundColor=Colors3[nCount];
// Use a bi-directional count to float the Color up and down through the gradient.
if( nDirection == 0 ){
// Move up through the gradient
nCount++;
if( nCount >= nMaxCount ){
nDirection = 1;
}
}else{
// Move down through the gradient.
nCount--;
if( nCount <= 0 ){
nDirection = 0;
}
}
// reposition the gradient line.
var nWidth = Math.floor(1000 / nMaxCount);
var nLeftPos = 10 + ( nWidth * nCount );
oGradLine.style.left = nLeftPos;
// reset the delay for color change
setTimeout('changeColor()', nTimeOut);
}
// Show the gradient colors by creating multiple div boxes.
function showGradientBoxes( nGradNumber ){
// force a limit on the grad number.
if( nGradNumber <1 || nGradNumber > 3){
nGradNumber = 1;
}
var oGradBox = document.getElementById('gradBase');
var nXPos = oGradBox.style.left;
var nHeight = 10;
var nTop = (nGradNumber * 20);
var nWidth = Math.floor(1000 / nMaxCount);
var nColor;
for( i = 0; i < nMaxCount; i++ ){
var newGradeBox = document.createElement('div');
newGradeBox.setAttribute('id','gradBox'+i);
newGradeBox.style.position = 'absolute';
newGradeBox.style.width = nWidth;
newGradeBox.style.height = nHeight;
newGradeBox.style.left = i * nWidth;
newGradeBox.style.top = nTop;
newGradeBox.style.margin = 0;
newGradeBox.style.padding = 0;
if( nGradNumber == 1 ){
nColor = Colors1[i];
}else if( nGradNumber == 2 ){
nColor = Colors2[i];
}else if( nGradNumber == 3 ){
nColor = Colors3[i];
}
newGradeBox.style.backgroundColor = nColor;
newGradeBox.style.zIndex = 2;
oGradBox.appendChild(newGradeBox);
}
}
// Change the update delay time for the color change.
function changeSpeed(){
nTimeOut = document.getElementById('idTimeChange').value;
}
//display the gradient
showGradientBoxes(1);
showGradientBoxes(2);
showGradientBoxes(3);
// Fire the first Color change after page loads.
changeColor();
</script>
<div style="position:absolute;top:240px;left:20px;">
Adjust the color change speed:<br>
<select id='idTimeChange' style='' onChange='changeSpeed()';>
<option value='10' >Fastest 10 ms</option>
<option value='25' selected >Default 25 ms</option>
<option value='50' >50 ms</option>
<option value='100' >100 ms</option>
<option value='250' >250 ms</option>
<option value='500' >500 ms</option>
<option value='1000' >1 second</option>
</select><br><br>
</div>
</body>
</html>
|
Download
