--- /dev/null
+/*=====================================================================*\
+|| ################################################################### ||
+|| # RGB Converter Widget [#]version[#]
+|| # --------------------------------------------------------------- # ||
+|| # Copyright ©2002-[#]year[#] by Iris Studios, Inc. All Rights Reserved. # ||
+|| # This file may not be reproduced in any way without permission. # ||
+|| # --------------------------------------------------------------- # ||
+|| # User License Agreement at http://www.iris-studios.com/license/ # ||
+|| ################################################################### ||
+\*=====================================================================*/
+
+/* ################################################################### */
+/* Global */
+
+body
+{
+ margin: 0px;
+ font-family: "Lucida Grande";
+ color: #FFFFFF;
+}
+
+a
+{
+ color: #FFFFFF;
+ text-decoration: underline;
+}
+
+/* ################################################################### */
+/* Front */
+
+#redinput
+{
+ position: absolute;
+ top: 64px;
+ left: 35px;
+ width: 50px;
+}
+
+#greeninput
+{
+ position: absolute;
+ top: 64px;
+ left: 104px;
+ width: 50px;
+}
+
+#blueinput
+{
+ position: absolute;
+ top: 64px;
+ left: 173px;
+ width: 50px;
+}
+
+#swatch
+{
+ position: absolute;
+ top: 18px;
+ left: 148px;
+ height: 30px;
+ width: 30px;
+}
+
+#hexinput
+{
+ position: absolute;
+ top: 20px;
+ left: 25px;
+ width: 200px;
+ font-size: 11px;
+}
+
+/* ################################################################### */
+/* Back */
+
+#backtext
+{
+ position: absolute;
+ top: 10px;
+ left: 15px;
+ font-size: 10px;
+}
+
+#backbutton
+{
+ position: absolute;
+ top: 45px;
+ left: 13px;
+ width: 500px;
+}
+
+/* ################################################################### */
+/* Flip insturments */
+
+.flip
+{
+ position: absolute;
+ top: 44px;
+ left: 12px;
+ width: 13px;
+ height: 13px;
+}
+
+#flip
+{
+ opacity: 0;
+ background: url(file:///System/Library/WidgetResources/ibutton/white_i.png) no-repeat top left;
+ z-index: 8000;
+}
+
+#fliprollie
+{
+ display: none;
+ opacity: 0.25;
+ background: url(file:///System/Library/WidgetResources/ibutton/white_rollie.png) no-repeat top left;
+ z-index: 7999;
+}
+
+#front
+{
+ display: block;
+}
+
+#back
+{
+ display: none;
+}
+
+.doneButton
+{
+ position: absolute;
+ bottom: 10px;
+ left: 10px;
+}
+
+/*=====================================================================*\
+|| ###################################################################
+|| # $HeadURL$
+|| # $Id$
+|| ###################################################################
+\*=====================================================================*/
\ No newline at end of file
--- /dev/null
+<!--
+/*=====================================================================*\
+|| ################################################################### ||
+|| # RGB Converter Widget [#]version[#]
+|| # --------------------------------------------------------------- # ||
+|| # Copyright ©2002-[#]year[#] by Iris Studios, Inc. All Rights Reserved. # ||
+|| # This file may not be reproduced in any way without permission. # ||
+|| # --------------------------------------------------------------- # ||
+|| # User License Agreement at http://www.iris-studios.com/license/ # ||
+|| ################################################################### ||
+\*=====================================================================*/
+-->
+
+<!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" xml:lang="en" lang="en">
+<head>
+ <title>RGB Conveter $Revision$</title>
+</head>
+
+<style type="text/css">
+ @import "Widget.css";
+</style>
+
+<script src="Widget.js" type="text/javascript" />
+<script src="file:///System/Library/WidgetResources/button/genericButton.js" type="text/javascript" />
+
+<body onload="setup()">
+ <!-- front -->
+ <div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);">
+ <img src="Default.png" alt="" />
+
+ <div id="hexinput">HEX Code <input type="text" name="hexinput" id="hexinputf" size="6" maxlength="6" onblur="hexwatcher()" value="000000" /></div>
+
+ <div id="swatch"></div>
+
+ <div id="redinput"><input type="text" name="redinput" id="redinputf" style="color: red" size="3" maxlength="3" onblur="rgbwatcher('red')" value="0" /></div>
+ <div id="greeninput"><input type="text" name="greeninput" id="greeninputf" style="color: green" size="3" maxlength="3" onblur="rgbwatcher('green')" value="0" /></div>
+ <div id="blueinput"><input type="text" name="blueinput" id="blueinputf" style="color: blue" size="3" maxlength="3" onblur="rgbwatcher('blue')" value="0" /></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">
+ <strong style="font-size: 12px">RGB Converter</strong>
+ <div>v[#]version[#] ($Revision$)</div>
+ <div>©2002-[#]year[#] <a href="javascript:widget.openURL('http://www.iris-studios.com')">Iris Studios, Inc</a><div>
+ </div>
+
+ <div id="backbutton"></div>
+ </div>
+ <!-- / back -->
+</body>
+</html>
+
+<!--
+/*=====================================================================*\
+|| ###################################################################
+|| # $HeadURL$
+|| # $Id$
+|| ###################################################################
+\*=====================================================================*/
+-->
\ No newline at end of file
--- /dev/null
+/*=====================================================================*\
+|| ################################################################### ||
+|| # RGB Converter Widget [#]version[#]
+|| # --------------------------------------------------------------- # ||
+|| # Copyright ©2002-[#]year[#] by Iris Studios, Inc. All Rights Reserved. # ||
+|| # This file may not be reproduced in any way without permission. # ||
+|| # --------------------------------------------------------------- # ||
+|| # User License Agreement at http://www.iris-studios.com/license/ # ||
+|| ################################################################### ||
+\*=====================================================================*/
+
+var fields = {
+ red : 0,
+ green : 0,
+ blue : 0,
+ hex : ''
+};
+
+// ###################################################################
+// widget init
+function setup()
+{
+ createGenericButton(document.getElementById("backbutton"), "Done", hide_back, 0);
+}
+
+// ###################################################################
+// watches the three RGB fields to make sure they don't go over the limites
+function rgbwatcher(colour)
+{
+ field = document.getElementById(colour + "inputf");
+
+ // 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();
+}
+
+// ###################################################################
+// 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 < 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();
+}
+
+// ###################################################################
+// 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;
+}
+
+// ###################################################################
+// 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("swatch").style.backgroundColor = "rgb(" + fields['red'] + ", " + fields['green'] + ", " + fields['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();
+}
+
+// ###################################################################
+// converts a hexidecimal to a decimal
+function hex2dec(hex)
+{
+ return parseInt(hex, 16);
+}
+
+// ###################################################################
+// ###################################################################
+// ###################################################################
+
+// flip data
+
+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";
+}
+
+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 flipShown = false;
+
+var animation = {
+ 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;
+ }
+}
+
+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;
+ }
+}
+
+
+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;
+}
+
+function limit_3 (a, b, c)
+{
+ return a < b ? b : (a > c ? c : a);
+}
+
+function compute_next_float(from, to, ease)
+{
+ return from + (to - from) * ease;
+}
+
+function enterflip(event)
+{
+ document.getElementById("fliprollie").style.display = "block";
+}
+
+function exitflip(event)
+{
+ document.getElementById("fliprollie").style.display = "none";
+}
+
+/*=====================================================================*\
+|| ###################################################################
+|| # $HeadURL$
+|| # $Id$
+|| ###################################################################
+\*=====================================================================*/
\ No newline at end of file
https://src.bluestatic.org / rgbconverter.git / commitdiff
