RGB_Converter.wdgt/Widget.js

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