Location: PHPKode > scripts > True Color Picker 2 > index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>True Color Picker: Demonstration</title>
    <?
    /*********************************************
	/* 1. Include ezyColorPicker.js in your script
	*********************************************/
	?>
    <script src="TrueColorPicker_2/ezyColorPicker.js" language="javascript" type="text/javascript"></script>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper" align="center">
	
<div id="innerWrapper">
<?php
    /*********************************
	/* 2. Create EzyColorPicker object
	**********************************/
	include ('class.EzyColorPicker.php');
	include ('TrueColorPicker_2/class.ColorElement.php');
	$cp = new EzyColorPicker('colorPicker');
	$cp->setPosition(270,320);
	$cp2 = new EzyColorPicker('colorPicker2');
	$cp2->setPosition(300,320);
    /************************
	/* 3. Apply Some Settings
	*************************/
	$cp->setButtonContent('images/btnDarkBlue.gif');
	$cp->setButtonIsImage(1);
	$cp->setPath ('TrueColorPicker_2/');
	$cp->setIsReadOnly(1);
	
	$cp2->setButtonContent('Pop Color Picker');
	$cp2->setPath ('TrueColorPicker_2/');
    /*******************************************************************
	/* 4. Call textBox() and button() (OR) html() where you want to deploy
	********************************************************************/	
	?>
    <div id="header">
	    <img src="images/logo.gif">

    </div>
    <div id="body">
    <div id="about">
    	<p>True Color Picker is a Photoshop-like color picker runs on the web. It can present 64 * 64 * 255 colors by the use of GD library.
        Server side written in PHP and client side in Javascript. Ajax calls involved.</p>
        <br /><div class="titleText">What's new in version 2</div>
        <br />
        <div class="subtitleText">Apperance</div><br  />
        <ul>
        	<li>The circle showing the current selected color in the tone box (the big box to the left).</li>
            <li>Two little arrows pointing the current selected base color on the hue box (the thin vertical bar in the middle).</li>
            <li>&quot;Mouse&quot; color box showing the mouse-hovered color.</li>
        </ul>
       <br />
        <div class="subtitleText">Futional</div><br  />
        <ul>
        	<li>Able to memorizethe last positions of the circle, two arrows, selected base color and selected color and to recall them on each click. (But you'll need to work yourself to retain them on page reloads.)</li>
            <li>Multiple pickers can be deployed on one page.</li>
        </ul>
       <br />
        <div class="subtitleText">Usage</div><br  />
        <ul>
        	<li>Another class EzyColorPicker bundled for easy deployment.</li>
            <li>Multiple pickers can be deployed on one page.</li>
        </ul>                
		  <br /><div class="titleText">What's not in version</div>
			<p>No Need to include hash (#) when passing color code to ColorElement object constructor, second argument.</p>
			<p>You cannont set DF (Detail Factor) by yourself anymore. It is set to 64 by default in version 2 which I think the most optimized for both utility and performance.</p><p>
<strong>Note:</strong> Square of detail factor determines the number of different colors in a tone box for a particular base color when 255 of them available.</p>
		  <br /><div class="titleText">What's my vision for version 3</div>
         	<p>To use a &lt;div&gt; to pop the picker instead of using new window.</p>
            <p>To apply something like &lt;canvas&gt; tag or &lt;svg&gt; tag (scalable vector graphics) that can generate non-web colors on the client side making color generation much faster so I can set DF back to 256, the full resolution.</p>
            <p>Rather than storing last base color, last arrow position and blah blah in HTML hidden inputs, I want TCP to auto-locate all of them with only the preload color passed.
            This can happen only in full resolution.</p>
    </div><!-- about -->
    <div id="demo">
    <h4>Live Demonstration</h4>
    <form method='post'>
   	<table id="form" cellspacing="0" border="0">
    	<tr>
        	<td>Color 1: #</td>
	        <td>
				<? echo $cp->textbox();?>
	    	</td>
            <td id="imgButton">
			    <? echo $cp->button();?>
	    	</td>
		</tr>
        <tr>
       		<td>Color 2: #</td>
		        <td colspan="2" id="colorPicker"><? echo $cp2->html(); ?>
	    	</td>
        </tr>
    </table><br />
    <input id="submitButton" type="submit" value="Submit Form">
    </form>
    <div id="colorElements">
    	<? if(sizeof($_POST > 0)){
			extract($_POST);
			if(!empty($colorPicker)){
				echo "Color 1 was: #{$colorPicker}<br /><br />";
				$ce1 = new ColorElement('',$colorPicker,50,50);
				$ce1->setPath('TrueColorPicker_2/');
				$ce1->draw();echo '<br /><br />';
			}
			if(!empty($colorPicker2)){
				echo "Color 2 was: #{$colorPicker2}<br /><br />";
				$ce2 = new ColorElement('',$colorPicker2,50,25);
				$ce2->setPath('TrueColorPicker_2/');
				$ce2->draw();
			}
		} ?>
    </div>
    </div><!-- Demo -->

    
    <div id="award">
    	<img src="images/award-logo.gif" />
    	<div id="awardText"><a href="http://sweetsawm.users.phpclasses.org/browse/package/3982.html">True Color Picker version 1</a> was awarded number 6 <a href="http://sweetsawm.users.phpclasses.org/award/innovation/">innovation award</a> from<br />
 <a href="http://sweetsawm.users.phpclasses.org">PHP Classes.org</a> for July 2007.</div>
    </div><!-- Award -->
    
    <div id="download">
    <!--<div id="count">Total downloads: 123</div>-->
        <div id="buttons">
            <img src="images/btnEyeDrop.gif">
            <img src="images/btnDarkBlue.gif">
            <img src="images/btnOrange.gif">
            <img src="images/btnCyan.gif"> 20 x 21 px (GIF)
        </div>
        
       
        <div id="bigButton">
		    <a href="http://sweetsawm.users.phpclasses.org/browse/package/4863.html"><img id="download"  src="images/download.gif" /></a>
        </div>
       <!-- <div id="gtalk">
        	<iframe src="http://talkgadget.google.com/talkgadget/client" scrolling="no" frameborder="0" style="overflow:hidden;width:300px;height:446px">
        </div>-->
    </div><!-- Downloads --->
    <div id="author">
    	<div class="titleText">About the Author</div>
        <img src="images/me.gif" />
        <p><span class="label">Name:</span> Moe Sweet</p>
        <p><span class="label">Born:</span> 1984</p>
        <p><span class="label">Education:</span> B.C.Tech (University of Computer Studies, Yangon) and B.Sc (Computing Information Systems) London Metropolitan University</p>
        <p><span class="label">Occupation:</span> Programmer</p>
        <p><span class="label">Nature of Job:</span> Web Apps, e-commerce</p>
        <p><span class="label">Skills:</span> System analysis and design with UML/SSADM, PHP, MySQL, Javascript, AJAX, CSS, HTML, DOM</p>
        <p><span class="label">Want to know more about:</span> Desktop Apps, Extendable Development Architecture (like Firefox Add-ons), API Development, Formal Testing</p>
        <p><span class="label">Music I like:</span> Korn, Deftones, Cold, Slipknot, Aerosmith, G'N'R, Marilyn Manson, A7X, Bullet For my Valentine, Blink 182, Linkin Park, Limp Bizkit, Children of Bodom and Savage Garden :P and Antibiotic (Local Band)</p>
    </div>
    </div><!-- Body -->
   	<div id="footer">
        	Copyright &copy; 2007 - Moe Sweet, coldiac _at_ gmail _dot_ com<br />special thanks to: ilidio.martins _at_ gmail _dot_ com, cithukyaw _at_ gmail _dot_ com, pyonekaykhine _at_ gmail _dot_ com
    </div>
    </div><!-- body -->
</div><!-- Inner Wrapper -->
</div><!-- Wrapper -->
</body>
</html>
Return current item: True Color Picker 2