PHP Classes

File: adcanced-example.php

Recommend this page to a friend!
  Classes of Robert Eisele   xColor   adcanced-example.php   Download  
File: adcanced-example.php
Role: Example script
Content type: text/plain
Description: Advanced Example
Class: xColor
Manipulate color values
Author: By
Last change:
Date: 14 years ago
Size: 6,604 bytes
 

Contents

Class file image Download
<?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>