/*=====================================================================*\
|| ###################################################################
|| # RGB Converter
-|| # Copyright ©2002-2007 Blue Static
+|| # Copyright (c)2002-2010 Blue Static
|| #
|| # This program is free software; you can redistribute it and/or modify
|| # it under the terms of the GNU General Public License as published by
<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>
</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()">
+ <canvas id="wheel" width="180" height="180"></canvas>
<!-- front -->
<div id="front" onmousemove="mousemove(event);" onmouseout="mouseexit(event);">
/*=====================================================================*\
|| ###################################################################
|| # RGB Converter
-|| # Copyright ©2002-2007 Blue Static
+|| # Copyright (c)2002-2010 Blue Static
|| #
|| # This program is free software; you can redistribute it and/or modify
|| # it under the terms of the GNU General Public License as published by
|| ###################################################################
\*=====================================================================*/
-var fields = {
- red : 60,
- green : 60,
- blue : 60,
- hex : '3C3C3C'
+var colors_ = {
+ red : 60,
+ green : 60,
+ blue : 60,
+ hex : '3C3C3C'
};
// ###################################################################
// widget init
function setup()
{
+ Draw();
createGenericButton(document.getElementById("backbutton"), "Done", hide_back, 0);
document.getElementById("revision").innerHTML = "(r" + document.getElementById("revision").innerHTML.replace(/[^0-9]/g, "") + ")";
}
update_swatch();
}
+// ###################################################################
+function Draw()
+{
+ var canvas = document.getElementById('wheel');
+ var context = canvas.getContext('2d');
+ var radius = canvas.width / 2 - 3;
+ var center = [canvas.width / 2, canvas.height / 2];
+ context.strokeStyle = 'black';
+
+ // Draw the individual components. Start with red.
+ context.beginPath();
+ context.moveTo(center[0], center[1]);
+ context.arc(canvas.width / 2,
+ canvas.height / 2,
+ radius,
+ Math.PI * 4/3,
+ Math.PI * 6/3,
+ false);
+ context.lineTo(center[0], center[1]);
+ context.fillStyle = _GetComponentColorString('red');
+ context.fill();
+ context.stroke();
+
+ // Green component.
+ context.beginPath();
+ context.moveTo(center[0], center[1]);
+ context.arc(canvas.width / 2,
+ canvas.height / 2,
+ radius,
+ Math.PI * 0,
+ Math.PI * 2/3,
+ false);
+ context.lineTo(center[0], center[1]);
+ context.fillStyle = _GetComponentColorString('green');
+ context.fill();
+ context.stroke();
+
+ // Blue component.
+ context.beginPath();
+ context.moveTo(center[0], center[1]);
+ context.arc(canvas.width / 2,
+ canvas.height / 2,
+ radius,
+ Math.PI * 2/3,
+ Math.PI * 4/3,
+ false);
+ context.lineTo(center[0], center[1]);
+ context.fillStyle = _GetComponentColorString('blue');
+ context.fill();
+ context.stroke();
+
+ // Draw the sheen gradient.
+ context.beginPath();
+ context.arc(center[0], center[1], radius, 0, Math.PI * 2, true);
+ var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
+ gradient.addColorStop(0, 'rgba(255,255,255,.5)');
+ gradient.addColorStop(1, 'rgba(0,0,0,0)');
+ context.fillStyle = gradient;
+ context.fill();
+ context.closePath();
+
+ // Draw the inner wheel.
+ context.beginPath();
+ context.arc(center[0], center[1], canvas.width / 4.5, 0, Math.PI * 2, true);
+ context.fillStyle = _GetRGBColorString();
+ context.fill();
+ context.strokeStyle = 'black';
+ context.stroke();
+ context.closePath();
+}
+
+// ###################################################################
+// Returns the rgb(,,,) color string.
+
+function _GetRGBColorString()
+{
+ return 'rgb(' + colors_.red + ',' + colors_.green + ',' + colors_.blue + ')';
+}
+
+// ###################################################################
+// Returns an individual color component's color string.
+
+function _GetComponentColorString(color)
+{
+ if (color == 'red') {
+ return 'rgb(' + colors_.red + ',0,0)';
+ } else if (color == 'green') {
+ return 'rgb(0,' + colors_.green + ',0)';
+ } else if (color == 'blue') {
+ return 'rgb(0,0,' + colors_.blue + ')';
+ }
+ alert('Invalid color ' + color);
+}
+
// ###################################################################
// watches the hex field for updates
function hexwatcher()
https://src.bluestatic.org / rgbconverter.git / commitdiff