"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
- <title>RGB Conveter $Revision$</title>
- <style type="text/css">
- @import "Widget.css";
- </style>
- <script src="Widget.js" type="text/javascript"></script>
- <script src="file:///System/Library/WidgetResources/button/genericButton.js" type="text/javascript"></script>
+ <title>RGB Conveter $Revision$</title>
+ <style type="text/css">
+ @import "Widget.css";
+ </style>
+ <script src="Widget.js" type="text/javascript"></script>
+ <script src="file:///System/Library/WidgetResources/button/genericButton.js" type="text/javascript"></script>
</head>
<body onload="setup()">
- <canvas id="wheel" width="180" height="180"></canvas>
- <!-- front -->
- <div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);">
+ <!-- front -->
+ <div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);">
+ <canvas id="wheel" width="180" height="180"></canvas>
+
+ <input type="text" name="hexinput" id="hexinput" size="6" onblur="hexwatcher()" value="3C3C3C" /></div>
+
+ <input type="text" name="redinput" id="redinput" size="3" onblur="rgbwatcher('red')" value="60" /></div>
+ <input type="text" name="greeninput" id="greeninput" size="3" onblur="rgbwatcher('green')" value="60" /></div>
+ <input type="text" name="blueinput" id="blueinput" size="3" onblur="rgbwatcher('blue')" value="60" /></div>
+
+ <div class="flip" id="fliprollie"></div>
+ <div class="flip" id="flip" onclick="show_back(event);" onmouseover="enterflip(event);" onmouseout="exitflip(event)";></div>
+ </div>
+ <!-- / front -->
+
+ <!-- back -->
+ <div id="back">
+ <img src="Alternate.png" alt="" />
+
+ <div id="backtext">
+ <div><strong style="font-size: 12px">RGB Converter</strong>, 2.2 <span id="revision">($Revision$)</span></div>
+ <div>©2002-2007 <a href="javascript:widget.openURL('http://www.bluestatic.org')">Blue Static</a><div>
+ </div>
- <div id="hexinput">HEX Code <input type="text" name="hexinput" id="hexinputf" size="6" onblur="hexwatcher()" value="3C3C3C" /></div>
-
- <div id="redinput">Red <input type="text" name="redinput" id="redinputf" size="3" onblur="rgbwatcher('red')" value="60" /></div>
- <div id="greeninput">Green <input type="text" name="greeninput" id="greeninputf" size="3" onblur="rgbwatcher('green')" value="60" /></div>
- <div id="blueinput">Blue <input type="text" name="blueinput" id="blueinputf" size="3" onblur="rgbwatcher('blue')" value="60" /></div>
-
- <div id="swatch"></div>
- <div id="swatch-red"></div>
- <div id="swatch-green"></div>
- <div id="swatch-blue"></div>
-
- <div class="flip" id="fliprollie"></div>
- <div class="flip" id="flip" onclick="show_back(event);" onmouseover="enterflip(event);" onmouseout="exitflip(event)";></div>
-
- <div id="frontimage"><img src="Default.png" alt="" style="" /></div>
- <img src="Alternate.png" alt="" />
- </div>
- <!-- / front -->
-
- <!-- back -->
- <div id="back">
- <img src="Alternate.png" alt="" />
-
- <div id="backtext">
- <div><strong style="font-size: 12px">RGB Converter</strong>, 2.2 <span id="revision">($Revision$)</span></div>
- <div>©2002-2007 <a href="javascript:widget.openURL('http://www.bluestatic.org')">Blue Static</a><div>
- </div>
-
- <div id="backbutton"></div>
- </div>
- <!-- / back -->
+ <div id="backbutton"></div>
+ </div>
+ <!-- / back -->
</body>
</html>
function setup()
{
Draw();
- createGenericButton(document.getElementById("backbutton"), "Done", hide_back, 0);
- document.getElementById("revision").innerHTML = "(r" + document.getElementById("revision").innerHTML.replace(/[^0-9]/g, "") + ")";
+ createGenericButton(document.getElementById("backbutton"), "Done", hide_back, 0);
+ document.getElementById("revision").innerHTML = "(r" + document.getElementById("revision").innerHTML.replace(/[^0-9]/g, "") + ")";
}
// ###################################################################
// watches the three RGB fields to make sure they don't go over the limites
-function rgbwatcher(colour)
+function rgbwatcher(color)
{
- field = document.getElementById(colour + "inputf");
-
- // handle RGB triads
- if (triad = field.value.match(/(rgb)?\(?([0-9]{1,3}),\s?([0-9]{1,3}),\s?([0-9]{1,3})\)?/))
- {
- document.getElementById("redinputf").value = triad[2];
- document.getElementById("greeninputf").value = triad[3];
- document.getElementById("blueinputf").value = triad[4];
-
- rgbwatcher("red");
- rgbwatcher("green");
- rgbwatcher("blue");
- return;
- }
-
- // sanitize the number
- var newval = field.value.replace(/[^0-9\-\.]*/g, "");
- newval = Math.floor(newval);
-
- // make sure we don't go over 255
- if (newval > 255)
- {
- newval = 255;
- }
- else if (newval < 0)
- {
- newval = 0;
- }
-
- // update the text field
- field.value = newval;
-
- // set fields[]
- fields[colour] = newval;
-
- // set hex
- update_hex();
-
- // redraw the swatch
- update_swatch();
+ field = document.getElementById(color + "input");
+
+ // handle RGB triads
+ if (triad = field.value.match(/(rgb)?\(?([0-9]{1,3}),\s?([0-9]{1,3}),\s?([0-9]{1,3})\)?/))
+ {
+ document.getElementById("redinput").value = triad[2];
+ document.getElementById("greeninput").value = triad[3];
+ document.getElementById("blueinput").value = triad[4];
+
+ rgbwatcher("red");
+ rgbwatcher("green");
+ rgbwatcher("blue");
+ return;
+ }
+
+ // sanitize the number
+ var newval = field.value.replace(/[^0-9\-\.]*/g, "");
+ newval = Math.floor(newval);
+
+ // make sure we don't go over 255
+ if (newval > 255)
+ {
+ newval = 255;
+ }
+ else if (newval < 0)
+ {
+ newval = 0;
+ }
+
+ // update the text field
+ field.value = newval;
+
+ // set fields[]
+ colors_[color] = newval;
+
+ // set hex
+ update_hex();
+
+ // redraw the swatch
+ Draw();
}
// ###################################################################
// Draw the inner wheel.
context.beginPath();
- context.arc(center[0], center[1], canvas.width / 4.5, 0, Math.PI * 2, true);
+ context.arc(center[0], center[1], canvas.width / 4.75, 0, Math.PI * 2, true);
context.fillStyle = _GetRGBColorString();
context.fill();
context.strokeStyle = 'black';
// watches the hex field for updates
function hexwatcher()
{
- field = document.getElementById("hexinputf");
-
- // sanitize the hex
- var newval = field.value.replace(/[^0-9a-f]*/gi, "");
-
- // get the length
- var length = newval.length;
-
- // make sure we're always 6
- if (length > 6)
- {
- newval = newval.substr(0, 6);
- }
- else if (length == 3)
- {
- newval = newval.substr(0, 1) + newval.substr(0, 1) + newval.substr(1, 1) + newval.substr(1, 1) + newval.substr(2, 1) + newval.substr(2, 1);
- }
- else if (length < 6)
- {
- for (var i = length; i <= 6; i++)
- {
- newval = "" + newval + "0";
- }
- }
-
- // update the field
- field.value = newval;
-
- // update fields[]
- fields['hex'] = newval;
-
- // set RGB
- update_rgb();
-
- // redraw the swatch
- update_swatch();
+ field = document.getElementById("hexinput");
+
+ // sanitize the hex
+ var newval = field.value.replace(/[^0-9a-f]*/gi, "");
+
+ // get the length
+ var length = newval.length;
+
+ // make sure we're always 6
+ if (length > 6)
+ {
+ newval = newval.substr(0, 6);
+ }
+ else if (length == 3)
+ {
+ newval = newval.substr(0, 1) + newval.substr(0, 1) + newval.substr(1, 1) + newval.substr(1, 1) + newval.substr(2, 1) + newval.substr(2, 1);
+ }
+ else if (length < 6)
+ {
+ for (var i = length; i <= 6; i++)
+ {
+ newval = "" + newval + "0";
+ }
+ }
+
+ // update the field
+ field.value = newval;
+
+ // update fields[]
+ colors_.hex = newval;
+
+ // set RGB
+ update_rgb();
+
+ // redraw the swatch
+ Draw();
}
// ###################################################################
// update the hex value
function update_hex()
{
- var hexstr = dec2hex(fields['red']) + dec2hex(fields['green']) + dec2hex(fields['blue']);
- fields['hex'] = hexstr;
- document.getElementById("hexinputf").value = hexstr;
+ var hexstr = dec2hex(colors_.red) + dec2hex(colors_.green) + dec2hex(colors_.blue);
+ colors_.hex = hexstr;
+ document.getElementById("hexinput").value = hexstr;
}
// ###################################################################
// update the RGB values
function update_rgb()
{
- // regex match the bits
- var bits = fields['hex'].match(/(..)(..)(..)/);
-
- fields['red'] = hex2dec(bits[1]);
- fields['green'] = hex2dec(bits[2]);
- fields['blue'] = hex2dec(bits[3]);
-
- // construct the hex values
- document.getElementById("redinputf").value = fields['red'];
- document.getElementById("greeninputf").value = fields['green'];
- document.getElementById("blueinputf").value = fields['blue'];
-}
-
-// ###################################################################
-// update the colour swatch
-function update_swatch()
-{
- document.getElementById("hexinputf").value = document.getElementById("hexinputf").value.toUpperCase();
- document.getElementById("swatch").style.backgroundColor = "rgb(" + fields['red'] + ", " + fields['green'] + ", " + fields['blue'] + ")";
- document.getElementById("swatch-red").style.backgroundColor = "rgb(" + fields['red'] + ", 0, 0)";
- document.getElementById("swatch-green").style.backgroundColor = "rgb(0, " + fields['green'] + ", 0)";
- document.getElementById("swatch-blue").style.backgroundColor = "rgb(0, 0, " + fields['blue'] + ")";
+ // regex match the bits
+ var bits = colors_.hex.match(/(..)(..)(..)/);
+
+ colors_.red = hex2dec(bits[1]);
+ colors_.green = hex2dec(bits[2]);
+ colors_.blue = hex2dec(bits[3]);
+
+ // construct the hex values
+ document.getElementById("redinput").value = colors_.red;
+ document.getElementById("greeninput").value = colors_.green;
+ document.getElementById("blueinput").value = colors_.blue;
}
// ###################################################################
// convert a decimal to a hexidecimal
function dec2hex(dec)
{
- var hexstr = "0123456789ABCDEF";
- var low = dec % 16;
- var high = (dec - low) / 16;
- hex = "" + hexstr.charAt(high) + hexstr.charAt(low);
-
- return hex.toString();
+ var hexstr = "0123456789ABCDEF";
+ var low = dec % 16;
+ var high = (dec - low) / 16;
+ hex = "" + hexstr.charAt(high) + hexstr.charAt(low);
+
+ return hex.toString();
}
// ###################################################################
// converts a hexidecimal to a decimal
function hex2dec(hex)
{
- return parseInt(hex, 16);
+ return parseInt(hex, 16);
}
// ###################################################################
function show_back()
{
- var front = document.getElementById("front");
- var back = document.getElementById("back");
-
- if (window.widget)
- {
- widget.prepareForTransition("ToBack");
- }
-
- front.style.display = "none";
- back.style.display = "block";
-
- if (window.widget)
- {
- setTimeout("widget.performTransition();", 0);
- }
-
- document.getElementById("fliprollie").style.display = "none";
+ var front = document.getElementById("front");
+ var back = document.getElementById("back");
+
+ if (window.widget)
+ {
+ widget.prepareForTransition("ToBack");
+ }
+
+ front.style.display = "none";
+ back.style.display = "block";
+
+ if (window.widget)
+ {
+ setTimeout("widget.performTransition();", 0);
+ }
+
+ document.getElementById("fliprollie").style.display = "none";
}
function hide_back()
{
- var front = document.getElementById("front");
- var back = document.getElementById("back");
-
- if (window.widget)
- {
- widget.prepareForTransition("ToFront");
- }
-
- back.style.display = "none";
- front.style.display = "block";
-
- if (window.widget)
- {
- setTimeout("widget.performTransition();", 0);
- }
+ var front = document.getElementById("front");
+ var back = document.getElementById("back");
+
+ if (window.widget)
+ {
+ widget.prepareForTransition("ToFront");
+ }
+
+ back.style.display = "none";
+ front.style.display = "block";
+
+ if (window.widget)
+ {
+ setTimeout("widget.performTransition();", 0);
+ }
}
var flipShown = false;
var animation = {
- duration : 0,
- starttime : 0,
- to : 1.0,
- now : 0.0,
- from : 0.0,
- firstElement : null,
- timer : null
+ duration : 0,
+ starttime : 0,
+ to : 1.0,
+ now : 0.0,
+ from : 0.0,
+ firstElement : null,
+ timer : null
};
function mousemove(event)
{
- if (!flipShown)
- {
- if (animation.timer != null)
- {
- clearInterval(animation.timer);
- animation.timer = null;
- }
-
- var starttime = (new Date).getTime() - 13;
-
- animation.duration = 500;
- animation.starttime = starttime;
- animation.firstElement = document.getElementById("flip");
- animation.timer = setInterval("animate();", 13);
- animation.from = animation.now;
- animation.to = 1.0;
- animate();
- flipShown = true;
- }
+ if (!flipShown)
+ {
+ if (animation.timer != null)
+ {
+ clearInterval(animation.timer);
+ animation.timer = null;
+ }
+
+ var starttime = (new Date).getTime() - 13;
+
+ animation.duration = 500;
+ animation.starttime = starttime;
+ animation.firstElement = document.getElementById("flip");
+ animation.timer = setInterval("animate();", 13);
+ animation.from = animation.now;
+ animation.to = 1.0;
+ animate();
+ flipShown = true;
+ }
}
function mouseexit(event)
{
- if (flipShown)
- {
- // fade in the flip widget
- if (animation.timer != null)
- {
- clearInterval (animation.timer);
- animation.timer = null;
- }
-
- var starttime = (new Date).getTime() - 13;
-
- animation.duration = 500;
- animation.starttime = starttime;
- animation.firstElement = document.getElementById("flip");
- animation.timer = setInterval("animate();", 13);
- animation.from = animation.now;
- animation.to = 0.0;
- animate();
- flipShown = false;
- }
+ if (flipShown)
+ {
+ // fade in the flip widget
+ if (animation.timer != null)
+ {
+ clearInterval (animation.timer);
+ animation.timer = null;
+ }
+
+ var starttime = (new Date).getTime() - 13;
+
+ animation.duration = 500;
+ animation.starttime = starttime;
+ animation.firstElement = document.getElementById("flip");
+ animation.timer = setInterval("animate();", 13);
+ animation.from = animation.now;
+ animation.to = 0.0;
+ animate();
+ flipShown = false;
+ }
}
function animate()
{
- var T;
- var ease;
- var time = (new Date).getTime();
-
- T = limit_3(time - animation.starttime, 0, animation.duration);
-
- if (T >= animation.duration)
- {
- clearInterval(animation.timer);
- animation.timer = null;
- animation.now = animation.to;
- }
- else
- {
- ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
- animation.now = compute_next_float(animation.from, animation.to, ease);
- }
-
- animation.firstElement.style.opacity = animation.now;
+ var T;
+ var ease;
+ var time = (new Date).getTime();
+
+ T = limit_3(time - animation.starttime, 0, animation.duration);
+
+ if (T >= animation.duration)
+ {
+ clearInterval(animation.timer);
+ animation.timer = null;
+ animation.now = animation.to;
+ }
+ else
+ {
+ ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
+ animation.now = compute_next_float(animation.from, animation.to, ease);
+ }
+
+ animation.firstElement.style.opacity = animation.now;
}
function limit_3 (a, b, c)
function enterflip(event)
{
- document.getElementById("fliprollie").style.display = "block";
+ document.getElementById("fliprollie").style.display = "block";
}
function exitflip(event)
{
- document.getElementById("fliprollie").style.display = "none";
+ document.getElementById("fliprollie").style.display = "none";
}
/*=====================================================================*\
https://src.bluestatic.org / rgbconverter.git / commitdiff