hallå...
hur gör man för att typ göra en sån färgskala som dom har på lunarstorm??
dom har en rgb skala som man kan välja färg i....sen visas hexkoden i ett formulär om jag inte minns fel....
nån som vet...?
/ Mikul
5 svar · 478 visningar · startad av mikul
hallå...
hur gör man för att typ göra en sån färgskala som dom har på lunarstorm??
dom har en rgb skala som man kan välja färg i....sen visas hexkoden i ett formulär om jag inte minns fel....
nån som vet...?
/ Mikul
menar du det här:
<SCRIPT LANGUAGE="JavaScript">
// Color Picker for LunarStorm 4 // 2001 Copyright LunarWorks AB
var iRed,iGreen,iBlue,iHue,iSat,iLum; var onY,onX,offsetY,offsetX var MoveObject;
var MoveOk = false; var sHex = '296b84'; var dX = 566; var dY = 81; function
Normalize(sType) { switch(sType) { case 'hex': RGBfromHEX(); HSVfromRGB();
break; case 'rgb': HEXfromRGB(); HSVfromRGB(); break; case 'hsv': RGBfromHSV();
HEXfromRGB(); break; } SetGUI(); } function SetGUI() { ref =
document.colorpicker; ref.hex.value = sHex.toUpperCase(); ref.fullhex.value =
'#' + ref.hex.value; ref.r.value = Math.round(iRed * 255); ref.g.value =
Math.round(iGreen * 255); ref.b.value = Math.round(iBlue * 255); ref.h.value =
Math.round(iHue); ref.s.value = Math.round(iSat * 100); ref.v.value =
Math.round(iLum * 100); ref = document.all.picker.style; ref.left = dX +
147*(iHue / 360); ref.top = dY + 147*(1 - iSat); ref =
document.all.slider.style; ref.top = dY + 147*(1 - iLum); var sExtra = '';
for(var i=0;i<(6 - sHex.length);i++) sExtra += '0';
document.all.swatch.style.background = '#' + sHex + sExtra; } function
Toggle(sObject) { ref = document.all[sObject].style; if(ref.display == '')
ref.display = 'none'; else ref.display = ''; } function CopyHEX() { var oHex =
document.colorpicker.fullhex.createTextRange(); oHex.execCommand("Copy"); }
function DefinedColors(sVal) { sHex = sVal; Normalize('hex'); } function
StartMove(oMove,bOutside) { MoveOk = true; MoveObject = oMove; if(bOutside) {
offsetY = 4; offsetX = 4; DoMove(); } else { event.cancelBubble = true; offsetY
= window.event.clientY - oMove.style.pixelTop; offsetX = window.event.clientX -
oMove.style.pixelLeft; } } function EndMove() { MoveOk = false; } function
DoMove() { if(MoveOk) { event.returnValue = false; onY =
Math.min(Math.max(window.event.clientY - dY - offsetY, 0), 147); onX =
Math.min(Math.max(window.event.clientX - dX - offsetX, 0), 147);
if(MoveObject.id == 'slider') iLum = 1 - (onY / 147); else { iHue = 360*(onX /
147); iSat = 1 - (onY / 147); } Normalize('hsv'); } } function Compute(oField) {
var NoScale = false; function SetValue() { oField.value = iValue; if(!NoScale)
iValue /= iMax; if(iValue == '') iValue = 0; eval(sVal + '=' + iValue); }
switch(oField.name) { case 'r': sVal = 'iRed'; iMax = 255; sSystem = 'rgb';
break; case 'g': sVal = 'iGreen'; iMax = 255; sSystem = 'rgb'; break; case 'b':
sVal = 'iBlue'; iMax = 255; sSystem = 'rgb'; break; case 'h': sVal = 'iHue';
iMax = 360; NoScale = true; sSystem = 'hsv'; break; case 's': sVal = 'iSat';
iMax = 100; sSystem = 'hsv'; break; case 'v': sVal = 'iLum'; iMax = 100; sSystem
= 'hsv'; break; } if(event.keyCode == 9 | event.keyCode == 16) return; var
iValue = oField.value.replace(/[^0-9]/ig,''); if(iValue.length < 1)
SetValue(); else { iValue = Math.min(iValue,iMax); SetValue();
Normalize(sSystem); } } function ComputeHex() { function SetValue() {
oField.value = sValue; if(sValue == '') sValue = 0; sHex = sValue; }
if(event.keyCode == 9 | event.keyCode == 16) return; var oField =
document.colorpicker.hex; var sValue = oField.value.replace(/[^0-9a-f]/ig,'');
if(sValue.length < 1) SetValue(); else { SetValue(); Normalize('hex'); } }
function HEXfromRGB() { function MakeHex(iDec) { iDec = Math.round(255 * iDec);
iDec = iDec.toString(16); if(iDec.length < 2) iDec = '0' + iDec; return iDec;
} sHex = MakeHex(iRed) + MakeHex(iGreen) + MakeHex(iBlue); } function
RGBfromHEX() { iRed = parseInt(sHex.substr(0, 2), 16) / 255; iGreen =
parseInt(sHex.substr(2, 2), 16) / 255; iBlue = parseInt(sHex.substr(4, 2), 16) /
255; if(isNaN(iRed)) iRed = 0; if(isNaN(iGreen)) iGreen = 0; if(isNaN(iBlue))
iBlue = 0; } function HSVfromRGB() { iMax =
Math.max(Math.max(iRed,iGreen),iBlue); iMin =
Math.min(Math.min(iRed,iGreen),iBlue); iLum = iMax; iSat = (iMax - iMin) / iMax;
if(iSat == 0) iHue = 0; else { Delta = iMax - iMin; switch(iMax) { case iRed:
iHue = (iGreen - iBlue) / Delta; break; case iGreen: iHue = 2 + (iBlue - iRed) /
Delta; break; case iBlue: iHue = 4 + (iRed - iGreen) / Delta; break; } iHue =
iHue * 60; if(iHue < 0) iHue += 360; if(isNaN(iHue)) iHue = 0;
if(isNaN(iSat)) iSat = 0; } } function RGBfromHSV() { if(iSat == 0 &&
iHue == 0) iRed = iGreen = iBlue = iLum; else { var iHueTemp = iHue if(iHueTemp
== 360) iHueTemp = 0; iHueTemp /= 60; var i = Math.floor(iHueTemp); var f =
iHueTemp - i; var p = iLum * (1 - iSat); var q = iLum * (1 - (iSat * f)); var t
= iLum * (1 - (iSat * (1 - f))); switch(i) { case 0: iRed = iLum; iGreen = t;
iBlue = p; break; case 1: iRed = q; iGreen = iLum; iBlue = p; break; case 2:
iRed = p; iGreen = iLum; iBlue = t; break; case 3: iRed = p; iGreen = q; iBlue =
iLum; break; case 4: iRed = t; iGreen = p; iBlue = iLum; break; case 5: iRed =
iLum; iGreen = p; iBlue = q; break; } } }
</script>
det funkar inte...
kan inte nån hjälpa mnig med att fixa till det lite...asså typ lägga radbrytningarna där dom ska vara och så...för jag misstänker att det är det som är felet...
/ Mikul
jag fixade det...
men det händer ju inget...det är helt vitt...
har jag misat nåt?
<SCRIPT LANGUAGE="JavaScript">
// Color Picker for LunarStorm 4 // 2001 Copyright LunarWorks AB var iRed,iGreen,iBlue,iHue,iSat,iLum; var onY,onX,offsetY,offsetX var MoveObject; var MoveOk = false; var sHex = '296b84'; var dX = 566; var dY = 81; function Normalize(sType) { switch(sType) { case 'hex': RGBfromHEX(); HSVfromRGB(); break; case 'rgb': HEXfromRGB(); HSVfromRGB(); break; case 'hsv': RGBfromHSV(); HEXfromRGB(); break; } SetGUI(); } function SetGUI() { ref = document.colorpicker; ref.hex.value = sHex.toUpperCase(); ref.fullhex.value = '#' + ref.hex.value; ref.r.value = Math.round(iRed * 255); ref.g.value = Math.round(iGreen * 255); ref.b.value = Math.round(iBlue * 255); ref.h.value = Math.round(iHue); ref.s.value = Math.round(iSat * 100); ref.v.value = Math.round(iLum * 100); ref = document.all.picker.style; ref.left = dX + 147*(iHue / 360); ref.top = dY + 147*(1 - iSat); ref = document.all.slider.style; ref.top = dY + 147*(1 - iLum); var sExtra = ''; for(var i=0;i<(6 - sHex.length);i++) sExtra += '0'; document.all.swatch.style.background = '#' + sHex + sExtra; } function Toggle(sObject) { ref = document.all[sObject].style; if(ref.display == '') ref.display = 'none'; else ref.display = ''; } function CopyHEX() { var oHex = document.colorpicker.fullhex.createTextRange(); oHex.execCommand("Copy"); } function DefinedColors(sVal) { sHex = sVal; Normalize('hex'); } function StartMove(oMove,bOutside) { MoveOk = true; MoveObject = oMove; if(bOutside) { offsetY = 4; offsetX = 4; DoMove(); } else { event.cancelBubble = true; offsetY = window.event.clientY - oMove.style.pixelTop; offsetX = window.event.clientX - oMove.style.pixelLeft; } } function EndMove() { MoveOk = false; } function DoMove() { if(MoveOk) { event.returnValue = false; onY = Math.min(Math.max(window.event.clientY - dY - offsetY, 0), 147); onX = Math.min(Math.max(window.event.clientX - dX - offsetX, 0), 147); if(MoveObject.id == 'slider') iLum = 1 - (onY / 147); else { iHue = 360*(onX / 147); iSat = 1 - (onY / 147); } Normalize('hsv'); } } function Compute(oField) { var NoScale = false; function SetValue() { oField.value = iValue; if(!NoScale) iValue /= iMax; if(iValue == '') iValue = 0; eval(sVal + '=' + iValue); } switch(oField.name) { case 'r': sVal = 'iRed'; iMax = 255; sSystem = 'rgb'; break; case 'g': sVal = 'iGreen'; iMax = 255; sSystem = 'rgb'; break; case 'b': sVal = 'iBlue'; iMax = 255; sSystem = 'rgb'; break; case 'h': sVal = 'iHue'; iMax = 360; NoScale = true; sSystem = 'hsv'; break; case 's': sVal = 'iSat'; iMax = 100; sSystem = 'hsv'; break; case 'v': sVal = 'iLum'; iMax = 100; sSystem = 'hsv'; break; } if(event.keyCode == 9 | event.keyCode == 16) return; var iValue = oField.value.replace(/[^0-9]/ig,''); if(iValue.length < 1) SetValue(); else { iValue = Math.min(iValue,iMax); SetValue(); Normalize(sSystem); } } function ComputeHex() { function SetValue() { oField.value = sValue; if(sValue == '') sValue = 0; sHex = sValue; } if(event.keyCode == 9 | event.keyCode == 16) return; var oField = document.colorpicker.hex; var sValue = oField.value.replace(/[^0-9a-f]/ig,''); if(sValue.length < 1) SetValue(); else { SetValue(); Normalize('hex'); } } function HEXfromRGB() { function MakeHex(iDec) { iDec = Math.round(255 * iDec); iDec = iDec.toString(16); if(iDec.length < 2) iDec = '0' + iDec; return iDec; } sHex = MakeHex(iRed) + MakeHex(iGreen) + MakeHex(iBlue); } function RGBfromHEX() { iRed = parseInt(sHex.substr(0, 2), 16) / 255; iGreen = parseInt(sHex.substr(2, 2), 16) / 255; iBlue = parseInt(sHex.substr(4, 2), 16) / 255; if(isNaN(iRed)) iRed = 0; if(isNaN(iGreen)) iGreen = 0; if(isNaN(iBlue)) iBlue = 0; } function HSVfromRGB() { iMax = Math.max(Math.max(iRed,iGreen),iBlue); iMin = Math.min(Math.min(iRed,iGreen),iBlue); iLum = iMax; iSat = (iMax - iMin) / iMax; if(iSat == 0) iHue = 0; else { Delta = iMax - iMin; switch(iMax) { case iRed: iHue = (iGreen - iBlue) / Delta; break; case iGreen: iHue = 2 + (iBlue - iRed) / Delta; break; case iBlue: iHue = 4 + (iRed - iGreen) / Delta; break; } iHue = iHue * 60; if(iHue < 0) iHue += 360; if(isNaN(iHue)) iHue = 0; if(isNaN(iSat)) iSat = 0; } } function RGBfromHSV() { if(iSat == 0 && iHue == 0) iRed = iGreen = iBlue = iLum; else { var iHueTemp = iHue if(iHueTemp == 360) iHueTemp = 0; iHueTemp /= 60; var i = Math.floor(iHueTemp); var f = iHueTemp - i; var p = iLum * (1 - iSat); var q = iLum * (1 - (iSat * f)); var t = iLum * (1 - (iSat * (1 - f))); switch(i) { case 0: iRed = iLum; iGreen = t; iBlue = p; break; case 1: iRed = q; iGreen = iLum; iBlue = p; break; case 2: iRed = p; iGreen = iLum; iBlue = t; break; case 3: iRed = p; iGreen = q; iBlue = iLum; break; case 4: iRed = t; iGreen = p; iBlue = iLum; break; case 5: iRed = iLum; iGreen = p; iBlue = q; break; } } }
</script>
/ Mikul
Diskussionen bör gå i Javascriptens tecken. Jag stänger därför denna tråd och hänvisar till tråden i javascriptforumet, http://webforum.aleborg.com/forum/showthread.php?s=&threadid=39380 .
Det är ingen mening att låta diskussionen vara igång här också.
Mvh,
@nders
stf Moderator
ok