From 623892012b01743a8b2f2e554caefec3770efc57 Mon Sep 17 00:00:00 2001 From: rsesek Date: Sat, 11 Dec 2010 18:18:14 +0000 Subject: [PATCH] The color watchers now work again. git-svn-id: svn://depot/macosx/RGBConverter/trunk@633 ad1dcce9-c9fe-0310-b82b-83ea1733dbb0 --- RGB Converter.wdgt/Widget.css | 180 ++++++--------- RGB Converter.wdgt/Widget.html | 72 +++--- RGB Converter.wdgt/Widget.js | 411 ++++++++++++++++----------------- 3 files changed, 299 insertions(+), 364 deletions(-) diff --git a/RGB Converter.wdgt/Widget.css b/RGB Converter.wdgt/Widget.css index 3e978c1..c889ba5 100644 --- a/RGB Converter.wdgt/Widget.css +++ b/RGB Converter.wdgt/Widget.css @@ -23,16 +23,16 @@ body { - margin: 0px; - font-family: "Lucida Grande"; - font-weight: bold; - color: #FFFFFF; + margin: 0px; + font-family: "Lucida Grande"; + font-weight: bold; + color: #FFFFFF; } a { - color: #FFFFFF; - text-decoration: underline; + color: #FFFFFF; + text-decoration: underline; } /* ################################################################### */ @@ -40,107 +40,61 @@ a #frontimage { - z-index: 500; - position: absolute; + z-index: 500; + position: absolute; } #redinput { - z-index: 1000; - font-size: 11px; - - position: absolute; - top: 30px; - left: 245px; - width: 70px; + z-index: 1000; + font-size: 11px; + + border: 1px solid red; + text-align: center; + + position: absolute; + top: 25px; + left: 100px; } #greeninput { - z-index: 1000; - font-size: 11px; - - position: absolute; - top: 30px; - left: 340px; - width: 75px; -} + z-index: 1000; + font-size: 11px; -#blueinput -{ - z-index: 1000; - font-size: 11px; - - position: absolute; - top: 30px; - left: 447px; - width: 70px; + border: 1px solid green; + text-align: center; + + position: absolute; + top: 130px; + left: 100px; } -#hexinput +#blueinput { - z-index: 1000; - font-size: 11px; - font-weight: bold; - - position: absolute; - top: 30px; - left: 100px; - width: 200px; -} + z-index: 1000; + font-size: 11px; -/* ################################################################### */ + border: 1px solid blue; + text-align: center; -#swatch -{ - z-index: 100; - - position: absolute; - top: 25px; - left: 25px; - height: 35px; - width: 65px; - - background-color: rgb(60, 60, 60); + position: absolute; + top: 80px; + left: 7px; } -#swatch-red +#hexinput { - z-index: 100; - - position: absolute; - top: 25px; - left: 225px; - height: 35px; - width: 100px; - - background-color: rgb(60, 0, 0); -} + z-index: 1000; + font-size: 11px; + font-weight: bold; -#swatch-green -{ - z-index: 100; - - position: absolute; - top: 25px; - left: 325px; - height: 35px; - width: 100px; - - background-color: rgb(0, 60, 0); -} + border: 1px solid black; + text-align: center; -#swatch-blue -{ - z-index: 100; - - position: absolute; - top: 25px; - left: 425px; - height: 35px; - width: 100px; - - background-color: rgb(0, 0, 60); + position: absolute; + top: 80px; + left: 62px; } /* ################################################################### */ @@ -148,18 +102,18 @@ a #backtext { - position: absolute; - top: 29px; - left: 30px; - font-size: 10px; + position: absolute; + top: 29px; + left: 30px; + font-size: 10px; } #backbutton { - position: absolute; - top: 2px; - left: 440px; - width: 500px; + position: absolute; + top: 2px; + left: 440px; + width: 500px; } /* ################################################################### */ @@ -167,43 +121,43 @@ a .flip { - position: absolute; - top: 45px; - left: 510px; - width: 13px; - height: 13px; + position: absolute; + top: 45px; + left: 510px; + width: 13px; + height: 13px; } #flip { - opacity: 0; - background: url(file:///System/Library/WidgetResources/ibutton/white_i.png) no-repeat top left; - z-index: 8000; + 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; + display: none; + opacity: 0.25; + background: url(file:///System/Library/WidgetResources/ibutton/white_rollie.png) no-repeat top left; + z-index: 7999; } #front { - display: none; + display: block; } #back { - display: none; + display: none; } .doneButton { - position: absolute; - bottom: 10px; - left: 10px; + position: absolute; + bottom: 10px; + left: 10px; } /*=====================================================================*\ diff --git a/RGB Converter.wdgt/Widget.html b/RGB Converter.wdgt/Widget.html index 9f01b36..203c325 100644 --- a/RGB Converter.wdgt/Widget.html +++ b/RGB Converter.wdgt/Widget.html @@ -24,50 +24,42 @@ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - RGB Conveter $Revision$ - - - + RGB Conveter $Revision$ + + + - - -
+ +
+ + +
+ +
+ + + +
+
+ + + + +
+ + +
+
RGB Converter, 2.2 ($Revision$)
+
©2002-2007 Blue Static
+
-
HEX Code
- -
Red
-
Green
-
Blue
- -
-
-
-
- -
-
- -
- -
- - - -
- - -
-
RGB Converter, 2.2 ($Revision$)
-
©2002-2007 Blue Static
-
- -
-
- +
+
+ diff --git a/RGB Converter.wdgt/Widget.js b/RGB Converter.wdgt/Widget.js index cd10c3a..3697027 100644 --- a/RGB Converter.wdgt/Widget.js +++ b/RGB Converter.wdgt/Widget.js @@ -30,54 +30,54 @@ var colors_ = { 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(); } // ################################################################### @@ -143,7 +143,7 @@ function 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'; @@ -178,98 +178,87 @@ function _GetComponentColorString(color) // 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); } // ################################################################### @@ -280,125 +269,125 @@ function hex2dec(hex) 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) @@ -413,12 +402,12 @@ function compute_next_float(from, to, ease) 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"; } /*=====================================================================*\ -- 2.43.5