RGB Converter.wdgt/Widget.js

   1 /*=====================================================================*\
   2 || ###################################################################
   3 || # RGB Converter [#]version[#]
   4 || # Copyright ©2002-[#]year[#] Blue Static
   5 || #
   6 || # This program is free software; you can redistribute it and/or modify
   7 || # it under the terms of the GNU General Public License as published by
   8 || # the Free Software Foundation; version [#]gpl[#] of the License.
   9 || #
  10 || # This program is distributed in the hope that it will be useful, but
  11 || # WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  12 || # or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  13 || # more details.
  14 || #
  15 || # You should have received a copy of the GNU General Public License along
  16 || # with this program; if not, write to the Free Software Foundation, Inc.,
  17 || # 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
  18 || ###################################################################
  19 \*=====================================================================*/
  20
  21 var fields = {
  22         red : 0,
  23         green : 0,
  24         blue : 0,
  25         hex : ''
  26 };
  27
  28 // ###################################################################
  29 // widget init
  30 function setup()
  31 {
  32         createGenericButton(document.getElementById("backbutton"), "Done", hide_back, 0);
  33 }
  34
  35 // ###################################################################
  36 // watches the three RGB fields to make sure they don't go over the limites
  37 function rgbwatcher(colour)
  38 {
  39         field = document.getElementById(colour + "inputf");
  40
  41         // sanitize the number
  42         var newval = field.value.replace(/[^0-9\-\.]*/g, "");
  43         newval = Math.floor(newval);
  44
  45         // make sure we don't go over 255
  46         if (newval > 255)
  47         {
  48                 newval = 255;
  49         }
  50         else if (newval < 0)
  51         {
  52                 newval = 0;
  53         }
  54
  55         // update the text field
  56         field.value = newval;
  57
  58         // set fields[]
  59         fields[colour] = newval;
  60
  61         // set hex
  62         update_hex();
  63
  64         // redraw the swatch
  65         update_swatch();
  66 }
  67
  68 // ###################################################################
  69 // watches the hex field for updates
  70 function hexwatcher()
  71 {
  72         field = document.getElementById("hexinputf");
  73
  74         // sanitize the hex
  75         var newval = field.value.replace(/[^0-9a-f]*/gi, "");
  76
  77         // get the length
  78         var length = newval.length;
  79
  80         // make sure we're always 6
  81         if (length > 6)
  82         {
  83                 newval = newval.substr(0, 6);
  84         }
  85         else if (length < 6)
  86         {
  87                 for (var i = length; i <= 6; i++)
  88                 {
  89                         newval = "" + newval + "0";
  90                 }
  91         }
  92
  93         // update the field
  94         field.value = newval;
  95
  96         // update fields[]
  97         fields['hex'] = newval;
  98
  99         // set RGB
 100         update_rgb();
 101
 102         // redraw the swatch
 103         update_swatch();
 104 }
 105
 106 // ###################################################################
 107 // update the hex value
 108 function update_hex()
 109 {
 110         var hexstr = dec2hex(fields['red']) + dec2hex(fields['green']) + dec2hex(fields['blue']);
 111         fields['hex'] = hexstr;
 112         document.getElementById("hexinputf").value = hexstr;
 113 }
 114
 115 // ###################################################################
 116 // update the RGB values
 117 function update_rgb()
 118 {
 119         // regex match the bits
 120         var bits = fields['hex'].match(/(..)(..)(..)/);
 121
 122         fields['red'] = hex2dec(bits[1]);
 123         fields['green'] = hex2dec(bits[2]);
 124         fields['blue'] = hex2dec(bits[3]);
 125
 126         // construct the hex values
 127         document.getElementById("redinputf").value = fields['red'];
 128         document.getElementById("greeninputf").value = fields['green'];
 129         document.getElementById("blueinputf").value = fields['blue'];
 130 }
 131
 132 // ###################################################################
 133 // update the colour swatch
 134 function update_swatch()
 135 {
 136         document.getElementById("swatch").style.backgroundColor = "rgb(" + fields['red'] + ", " + fields['green'] + ", " + fields['blue'] + ")";
 137         document.getElementById("swatch-red").style.backgroundColor = "rgb(" + fields['red'] + ", 0, 0)";
 138         document.getElementById("swatch-green").style.backgroundColor = "rgb(0, " + fields['green'] + ", 0)";
 139         document.getElementById("swatch-blue").style.backgroundColor = "rgb(0, 0, " + fields['blue'] + ")";
 140 }
 141
 142 // ###################################################################
 143 // convert a decimal to a hexidecimal
 144 function dec2hex(dec)
 145 {
 146         var hexstr = "0123456789ABCDEF";
 147         var low = dec % 16;
 148         var high = (dec - low) / 16;
 149         hex = "" + hexstr.charAt(high) + hexstr.charAt(low);
 150
 151         return hex.toString();
 152 }
 153
 154 // ###################################################################
 155 // converts a hexidecimal to a decimal
 156 function hex2dec(hex)
 157 {
 158         return parseInt(hex, 16);
 159 }
 160
 161 // ###################################################################
 162 // ###################################################################
 163 // ###################################################################
 164
 165 // flip data
 166
 167 function show_back()
 168 {
 169         var front = document.getElementById("front");
 170         var back = document.getElementById("back");
 171
 172         if (window.widget)
 173         {
 174                 widget.prepareForTransition("ToBack");
 175         }
 176
 177         front.style.display = "none";
 178         back.style.display = "block";
 179
 180         if (window.widget)
 181         {
 182                 setTimeout("widget.performTransition();", 0);
 183         }
 184
 185         document.getElementById("fliprollie").style.display = "none";
 186 }
 187
 188 function hide_back()
 189 {
 190         var front = document.getElementById("front");
 191         var back = document.getElementById("back");
 192
 193         if (window.widget)
 194         {
 195                 widget.prepareForTransition("ToFront");
 196         }
 197
 198         back.style.display = "none";
 199         front.style.display = "block";
 200
 201         if (window.widget)
 202         {
 203                 setTimeout("widget.performTransition();", 0);
 204         }
 205 }
 206
 207 var flipShown = false;
 208
 209 var animation = {
 210         duration : 0,
 211         starttime : 0,
 212         to : 1.0,
 213         now : 0.0,
 214         from : 0.0,
 215         firstElement : null,
 216         timer : null
 217 };
 218
 219 function mousemove(event)
 220 {
 221         if (!flipShown)
 222         {
 223                 if (animation.timer != null)
 224                 {
 225                         clearInterval(animation.timer);
 226                         animation.timer  = null;
 227                 }
 228
 229                 var starttime = (new Date).getTime() - 13;
 230
 231                 animation.duration = 500;
 232                 animation.starttime = starttime;
 233                 animation.firstElement = document.getElementById("flip");
 234                 animation.timer = setInterval("animate();", 13);
 235                 animation.from = animation.now;
 236                 animation.to = 1.0;
 237                 animate();
 238                 flipShown = true;
 239         }
 240 }
 241
 242 function mouseexit(event)
 243 {
 244         if (flipShown)
 245         {
 246                 // fade in the flip widget
 247                 if (animation.timer != null)
 248                 {
 249                         clearInterval (animation.timer);
 250                         animation.timer  = null;
 251                 }
 252
 253                 var starttime = (new Date).getTime() - 13;
 254
 255                 animation.duration = 500;
 256                 animation.starttime = starttime;
 257                 animation.firstElement = document.getElementById("flip");
 258                 animation.timer = setInterval("animate();", 13);
 259                 animation.from = animation.now;
 260                 animation.to = 0.0;
 261                 animate();
 262                 flipShown = false;
 263         }
 264 }
 265
 266
 267 function animate()
 268 {
 269         var T;
 270         var ease;
 271         var time = (new Date).getTime();
 272
 273         T = limit_3(time - animation.starttime, 0, animation.duration);
 274
 275         if (T >= animation.duration)
 276         {
 277                 clearInterval(animation.timer);
 278                 animation.timer = null;
 279                 animation.now = animation.to;
 280         }
 281         else
 282         {
 283                 ease = 0.5 - (0.5 * Math.cos(Math.PI * T / animation.duration));
 284                 animation.now = compute_next_float(animation.from, animation.to, ease);
 285         }
 286
 287         animation.firstElement.style.opacity = animation.now;
 288 }
 289
 290 function limit_3 (a, b, c)
 291 {
 292     return a < b ? b : (a > c ? c : a);
 293 }
 294
 295 function compute_next_float(from, to, ease)
 296 {
 297     return from + (to - from) * ease;
 298 }
 299
 300 function enterflip(event)
 301 {
 302         document.getElementById("fliprollie").style.display = "block";
 303 }
 304
 305 function exitflip(event)
 306 {
 307         document.getElementById("fliprollie").style.display = "none";
 308 }
 309
 310 /*=====================================================================*\
 311 || ###################################################################
 312 || # $HeadURL$
 313 || # $Id$
 314 || ###################################################################
 315 \*=====================================================================*/