<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/xml.xsl"?>
<document xml:lang="en">
	<header>
		<title>triangle-color-selector</title>
		<description>三角形の色選択のヤツ</description>
		<script src="tcs-ie/triangle-color-selector.js"/>
	</header>
	<body>
		<section>
			<h>Triangle Color Selector</h>
			<section>
				<h>Sample</h>
				<div id="tcs">
				</div>

				<p>
					<input type="button" onclick="alert(tcs.toHex());" value="alert(tcs.toHex());"/>
					<input type="button" onclick="tcs.setColor(120 * Math.PI / 180, 1, 0.5);" value="tcs.setColor(120 * Math.PI / 180, 1, 0.5);"/>
				</p>
				<p>
					<select size="1" onchange="var hsv = eval(this.value); tcs.setColor(hsv[0] * Math.PI / 180, hsv[1] / 100, hsv[2] / 100)">
						<option value="[0, 100, 100]" style="background: #ff0000;">h : 0, s : 100%, v : 100%</option>
						<option value="[60, 100, 100]" style="background: #ffff00;">h : 60, s : 100%, v : 100%</option>
						<option value="[120, 100, 100]" style="background: #00ff00;">h : 120, s : 100%, v : 100%</option>
						<option value="[180, 100, 100]" style="background: #00ffff;">h : 180, s : 100%, v : 100%</option>
						<option value="[240, 100, 100]" style="background: #0000ff;">h : 240, s : 100%, v : 100%</option>
						<option value="[300, 100, 100]" style="background: #ff00ff;">h : 300, s : 100%, v : 100%</option>
					</select>
				</p>

				<pre class="ECMAScript"><![CDATA[// 渡した要素に appendChild される。
var tcs = new TriangleColorSelector(document.getElementById("tcs"));

// 色が変わったら呼び出される。
tcs.addEventListener("change", function (e) {
    window.status = e.hex;
});]]></pre>
				
				<p><a href="/2005/colors2">NULL::colors</a> : これを使ったカラージェネレータ</p>
			</section>
		</section>
		<section>
			<h>Description</h>
			<p>Painter 風カラーピッカーですよ。コード自体は GIMP の modules/colorsel_triangle.c からパクりました。そんなわけでライセンスが強制 GNU/GPL なのかしら。しらね。某 <abbr>IRC</abbr> チャンネルのそれがしさんに感謝。</p>
			<p>Gecko だと クリック→ドラッグ が上手くできない。現状では Opera が完璧。<del datetime="2005-03-13T04:29:59+09:00"><abbr>IE</abbr> では動かないです。透過 PNG を DirectX フィルタさせて、addEventListener 系をやってやればいけそうな気がしますが、なんか <code class="ECMAScript">Math.atan</code> とかが動いてない気がして微妙です。</del></p>
			<ol title="確認ブラウザ">
				<li>Mozilla Firefox 1.0 (開発環境)</li>
				<li>Opera 7.6 preview3</li>
			</ol>
			<section>
				<h>Code</h>
				<del datetime="2005-03-13T04:04:35+09:00">
					<ol>
						<li><a href="triangle-color-selector.js">triangle-color-selector.js</a></li>
						<li><a href="triangle.png">triangle.png</a></li>
						<li><a href="pointer.png">pointer.png</a></li>
						<li><a href="tpointer.png">tpointer.png</a></li>
					</ol>
				</del>
				<ins datetime="2005-03-13T04:04:35+09:00">
					<p>Arthur @ Knettergek Media さんが <abbr>IE</abbr> コンパチなバージョンを作ってメールしてくれたので転載。</p>
					<ol>
						<li><a href="tcs-ie/triangle-color-selector.js">triangle-color-selector.js</a></li>
						<li><a href="triangle.png">triangle.png</a></li>
						<li><a href="tcs-ie/pointer.gif">pointer.gif</a></li>
						<li><a href="tcs-ie/tpointer.gif">tpointer.gif</a></li>
						<li><a href="tcs-ie/triangleEmpty.gif">triangleEmpty.gif</a></li>
					</ol>
				</ins>
			</section>
			<section>
				<h>Usage</h>
				<dl title="public methods">
					<dt><code>addEventListener(situation, callback_func)</code></dt>
					<dd>イベントコールバック関数を設定する。
						<dl>
							<dt>situation</dt>
							<dd>起動するタイミング。現在は <code>change</code> のみ</dd>
							<dt>callback_func</dt>
							<dd>
								起動するときに呼び出す関数。<code>rgb</code>, <code>hsv</code>, <code>hex</code> プロパティを持つ引数を一つ渡す。
								<pre class="ECMAScript"><![CDATA[tcs.addEventListener("change", function (e) {
    e.hex; //=> #ff0000
    e.rgb; //=> {r: 255, g : 0, b : 0}
    e.hsv; //=> {h: 0, s : 100, v : 100}
    /*
     * [e.rgb.r, e.rgb.g, e.rgb.b].join(", ");
     */
});]]></pre>
							</dd>
						</dl>
					</dd>

					<dt><code>setColor(h, s, v)</code></dt>
					<dd>指定した色にポイントする。h はラジアン。その他は 0 以上 1 以下の値。イベントコールバックの <code>hsv</code> とは単位が違うので注意。</dd>

					<dt><code>toHex()</code></dt>
					<dd>現在の色を十六進表記で返す。 ex. #ff0000</dd>
				</dl>
			</section>
		</section>
	</body>
</document>
