// palette_selfy.js .. for PaintBBS and ShiPainter .. last update : 2004/04/11.
//→使い方 .. 外部JSとして読み込んでから、好きな所で palette_selfy() を呼び出して下さい.
var selfv=new Array(); var selfytag=new Array(); //←消さないで.
//↓設定 ------------------------------------------------------------
// ※selfv[*] は、それぞれの設定を空白にすると、その機能のボタンを表示させなくできます.
// +-する値のとこ
var pnum = 10; // +- のデフォルト値
selfv[0] = 'size=3 style="text-align:right">'; // 数値タグ(type=text)の中身
// パレットリスト.
// ..各要素の中の色は、1つだけなら他の13色はその色を元に↓の2通りから自動取得、
var psx = 0; // 0:彩度+明度を元に. 1:色相を循環で.
// 彩度+明度を元にするときの色. (複数設定する場合は、1つ1つの色を \n で区切る)
var pdefs = new Array(
'#ffffff',
'#ffe6e6','#ffece6','#fff3e6','#fff9e6','#ffffe6',
'#f3ffe6','#e6fff3','#e6f3ff','#ffe6ff','#eeddbb',
''); // ※空白だとその要素はスキップ.
// 色相で循環させるときの色. (複数設定する場合は、1つ1つの色を \n で区切る)
var pdefx = new Array(
'#ffffff',
'#ffe6e6','#ffcccc','#ff9999','#e6cccc','#e69999',
'#cc9999','#cc6666','#996666','#993333','#660000',
''); // ※空白だとその要素はスキップ.
// デフォルトのパレットカラー (一番最初にアプレットにでる色)
var pbase = '#000000\n#FFFFFF\n#B47575\n#888888\n#FA9696\n#C096C0\n#FFB6FF\n#8080FF\n#25C7C9\n#E7E58D\n#E7962D\n#99CB7B\n#FCECE2\n#F9DDCF';
// サンプルカラーの
// 表示するパレットのカラー番号(この中にある番号だけ↓で書き出し)
var sams = new Array(0,2,4,6,8,10,12,1,3,5,7,9,11,13); // 彩度+明度を元にするとき
var samx = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13); // 色相で循環させるとき
selfv[1] = ' '; // フォント
selfv[2] = 'style="font-size:xx-small; background-color:$FONT;"';
// フォントタグの中身(「$FONT」:16進法RGB色が代入、正確に適用される属性は↓の3つ)
// … color, style="color" style="background", style="background-color")
// ※↓これより下は ">"(閉じタグ) も入れてください //
// パレットの選択ボタン(type=radio)タグの中身
selfv[3] = 'style="border-width:0;" title="デフォルトのパレット">'; // デフォルト色
selfv[4] = 'style="border-width:0;" title="ここのパレットを使う。\nチェックしてるときにさらに押すと、チェックが外れ、\n色相循環か、彩度+明度パレットに。(1番の色が基本色)">'; // 選択
// ボタン(type=button)タグの中身
selfv[5] = 'value="H" title="色相パレット (1番の色が基本色)">'; // 色相
selfv[6] = 'value="S" title="彩度パレット (1番の色が基本色)">'; // 彩度
selfv[7] = 'value="B" title="明度パレット (1番の色が基本色)">\n'; // 明度
selfv[8] = 'value="o" title="ここに今のパレットを保存">'; // セーブ
selfv[9] = 'value="x" title="ここのパレットをデフォルトに戻す">
\n'; // デフォルト
selfv[10] = 'value="H+" title="パレット全体の色相を+">'; // 色相+
selfv[11] = 'value="H-" title="パレット全体の色相を−">'; // 色相-
selfv[12] = 'value="S+" title="パレット全体の彩度を+">'; // 彩度+
selfv[13] = 'value="S-" title="パレット全体の彩度を−">'; // 彩度-
selfv[14] = 'value="B+" title="パレット全体の明度を+">\n'; // 明度+
selfv[15] = 'value="B-" title="パレット全体の明度を−">\n'; // 明度-
selfv[16] = 'value="RGB+" title="パレット全体のRGBを+">
\n'; // RGB+
selfv[17] = 'value="RGB-" title="パレット全体のRGBを−">
\n'; // RGB-
// グラデーションのとこ
selfv[18] = 'style="border-width:0;" title="2点を元にグラデーション (1番の色と14番の色)" checked>2'; // 2点
selfv[19] = 'style="border-width:0;" title="3点を元にグラデーション (1番、8番、14番の色)">3'; // 3点
selfv[20] = 'style="border-width:0;" title="4点を元にグラデーション (1、6、10、14番の色)">4
\n'; // 4点
selfv[21] = 'value="RGB" title="RGBでグラデーション">\n'; // RGB?
selfv[22] = 'value="+HSB" title="+HSBでグラデーション (色相+方向)">\n'; // +HSB
selfv[23] = 'value="-HSB" title="-HSBでグラデーション (色相−方向)">
\n'; // -HSB
// 追加・削除
selfv[24] = 'value="+" title="パレットを追加します">'; // 追加
selfv[25] = 'value="-" title="選択中のパレットを削除します">\n'; // 削除
// セーブ・オートセーブ
selfv[26] = 'checked title="ここにチェックをつけておくと、色を変更するとき、\n 自動で保存パレットにパレット情報をセーブします。\n自動保存が適用されるのは、\n チェックしてるパレットから他のパレットに移動したとき、\n チェックしてるパレットのH/S/Bボタンを押したとき、\n の2つのときです。サンプルの色も変わります。\nもちろん、ここにチェックしてなくても、\n 手動でセーブボタンを押せば、パレットに保存されます。">'; // 自動セーブ
selfv[27] = 'value="O" title="今の全体のパレットをクッキーに保存">
\n'; // セーブ
// デフォルトのパレットを 色相360°にするか、彩度++明度-- にするか
selfv[28] = 'style="border-width:0;" title="デフォルトのパレットは、色相で循環させる">Ho'; // H°
selfv[29] = 'style="border-width:0;" title="デフォルトのパレットは、彩度+、明度−でリスト">+S-B'; // +S-B
selfv[30] = 'value="X" title="全体のパレットをデフォルトに戻す">
\n'; // デフォルトに
// UPLOAD / DOWNLOAD
selfv[31] = 'value="" size=8 title="パレットデータ。\n・アップロードするときは、ここに貼り付けてください。\n・ダウンロードするときは、ここにデータが出力されます。\n ローカルのテキストにでも保存してください。\n※パレットデータは、\n pals = new Array(\'#FFFFFF\',\'#B47575\\n#888888\\n...\');\n のように、JSの配列形式で書かれます。">\n'; //
selfv[32] = 'value="↑" title="←からパレットデータをアップロード">'; //
selfv[33] = 'value="↓" title="←←にパレットデータをダウンロード">
\n'; //
// このパレットテーブルを囲んでる、ソースとかタグとか (formタグは消しちゃダメ)
// フォーム始まり
selfytag[0] = '
\n';
//↑設定おわり ------------------------------------------------------
// 初期値 (いたるところで使う値)
var d = document;
var pon,pno; // radioチェック中? / チェックしたパレットNO.
var qon,qno,qmo; // buttonプッシュ中? / プッシュしたパレットNO.
var pals = new Array(); // color-palette
var inp = '=g && r>=b){
max=r;
}else if(g>=b){
max=g;
}else{
max=b;
}
// min
if(r<=g && r<=b){
min=r;
}else if(g<=b){
min=g;
}else{
min=b;
}
// 0,0,0
if(max<=0){ return(new Array(0,0,0)); }
// difference
dif=max-min;
//Hue:
if(max>min){
if(g==max){
h=(b-r)/dif*60+120;
}else if(b==max){
h=(r-g)/dif*60+240;
}else if(b>g){
h=(g-b)/dif*60+360;
}else{
h=(g-b)/dif*60;
}
if(h<0){
h=h+360;
}
}else{ h=0; }
h*=255/360;
//Saturation:
s=(dif/max)*255;
//Value:
v=max;
return(new Array(h,s,v));
}
// RGB16→RGB10 表記. 値は 000000〜ffffff
function to10rgb(str){
var ns = new Array();
str = str.replace(/[^0-9a-fA-F]/g,'');
for(var i=0; i<=2; i++){
ns[i] = str.substr(i*2,2);
if(!ns[i]){ ns[i]='00'; }
ns[i] = Number(parseInt(ns[i],16).toString(10));
}
return(ns);
}
// 10→16進法二桁
function format16(n){
n = Number(n).toString(16);
if(n.length<2){ n='0'+n; }
return(n);
}
// -------------------------------------------------------------------------
// パレットに (※ q=1:アプレットパレットに出力しない. lst=1:最初のとき
function rady(p,q,lst){
var d = document;
var df = d.forms.palepale;
// デフォルトパレット
if(!p&&p!=0){ pon=0; pno=''; d.paintbbs.setColors(pbase); return; }
var ps = pals[p].split('\n');
var n = pnum;
if(!q && df.num.value){ n = Number(df.num.value); }
if(!q && pon==1 && pno!=p){ poncheck(); }
// 揃ってるならすぐ返す
if((pon!=1 || pno!=p) && ps.length==14){
if(!q){ pon=1; pno=p; }
if(q!=1 && pals[p]){ d.paintbbs.setColors(pals[p]); } return;
}
// checkしてるなら
if(pon==1 && pno==p){
var pget = String(d.paintbbs.getColors());
// if(pget==pals[p]){ return; }
var cs = pget.split('\n');
ps[0] = cs[0]; ps[1] = '';
}
// 欠けているなら
var cs = new Array();
var psy=0; // H°/ +S-B
psy = check_h_sb(lst);
if(psy==1){ cs = rh_list(p,n); }// H°リスト
else{ cs = sb_list(p,n); } // +S-B リスト
if(q){ // 初期設定時
pals[p] = String(cs.join('\n'));
}
if(q!=1){ // 一般
if(pon==1 && pno==p){ checkout(); }
else{ pon=1; pno=p; }
// pals[p] = String(cs.join('\n'));
d.paintbbs.setColors(String(cs.join('\n')));
}
}
// H°リスト
function rh_list(p,n){
var ps = pals[p].split('\n');
var rgb = to10rgb(ps[0]); //→RGB
var hsv = RGBtoHSB(rgb[0],rgb[1],rgb[2]); //→HSB
var cs = new Array(ps[0],ps[1]);
if(!cs[0]){ cs[0]='#ffffff'; }
if(hsv[1]!=0 && !cs[13]){ cs[13]='#ffffff'; }
for (var i=1; i<13; i++){
if(ps[i] && (pon!=1 || pno!=p)){ cs[i]=ps[i]; continue; } //ある
var x,y,z;
if(hsv[1]==0){ //白黒
x = hsv[0];
y = 0;
if(i%2==0){ z = 255-i*n; }else{ z = 0+(i-1)*n; }
}else if(i>=12){
x = hsv[0];
y = 0;
z = 255-hsv[1];
}else{
x = hsv[0] + i*255/12;
y = hsv[1];
z = hsv[2];
}
while(x<0){ x+=255; } if(y<0){ y=0; } if(z<0){ z=0; } //↓0
while(x>255){ x-=255; } if(y>255){ y=255; } if(z>255){ z=255; } //↑255
// for (var j=0; j<=2; j++){ hsv[j] = Math.round(hsv[j]); }
rgb = HSBtoRGB(x,y,z);
for (var j=0; j<=2; j++){ rgb[j] = Math.round(rgb[j]); }
cs[i] = '#'+format16(rgb[0])+format16(rgb[1])+format16(rgb[2]);
}
return(cs);
}
// +S-B リスト
function sb_list(p,n){
var ps = pals[p].split('\n');
var rgb = to10rgb(ps[0]); //→RGB
var hsv = RGBtoHSB(rgb[0],rgb[1],rgb[2]); //→HSB
var cs = new Array(ps[0],ps[1]);
if(!cs[0]){ cs[0]='#ffffff'; }
if(hsv[1]==0 && !cs[1]){ cs[1]='#000000'; }
else if(!cs[1]){ cs[1]='#ffffff'; }
for (var i=2; i<14; i++){
if(ps[i] && (pon!=1 || pno!=p)){ cs[i]=ps[i]; continue; } //ある
var y,z;
if(hsv[1]==0){ //白黒
y = 0;
if(i%2==0){ z = 255-i*n; }else{ z = 0+(i-1)*n; }
}else{
if(i%2==0){ //左
y = hsv[1]+i*n;
z = hsv[2];
}else{ //右
y = hsv[1]+(i-1)*n;
z = hsv[2]-(i-1)*n;
}
}
while(z<0){ z+=255; } while(y<0){ y+=255; } //↓0
while(z>255){ z-=255; } while(y>255){ y-=255; } //↑255
// for (var j=0; j<=2; j++){ hsv[j] = Math.round(hsv[j]); }
rgb = HSBtoRGB(hsv[0],y,z);
for (var j=0; j<=2; j++){ rgb[j] = Math.round(rgb[j]); }
cs[i] = '#'+format16(rgb[0])+format16(rgb[1])+format16(rgb[2]);
}
return(cs);
}
// 個別でH/S/Bをリストアップ
function onplus(p,m){
var d = document;
var df = d.forms.palepale;
var n = Number(df.num.value); //+-
if(pon==1 && pno==p){ poncheck(); }
// 連続のとき
if(m>0 && n*(qon+1)>38){ qon=0; }
if(qno==p && qmo==m && qon>=1){ qon++; n*=(qon+1)/2; }
else{ qno=p; qmo=m; qon=1; }
var ps = pals[p].split('\n');
var rgb = to10rgb(ps[0]); //→RGB
var hsv = RGBtoHSB(rgb[0],rgb[1],rgb[2]); //→HSB
var cs = new Array();
if(m==2){ n*=-1; }
for (var i=0; i<14; i++){
var z;
if(m==0){ z = hsv[m]+((i%2)*2-1)*Math.round(Math.floor(i/2)*(n)); }
else{ z = hsv[m]+i*n; }
while(z<0){ z+=255; } //↓0
while(z>255){ z-=255; } //↑255
// for (var j=0; j<=2; j++){ hsv[j] = Math.round(hsv[j]); }
if(m==1){ rgb = HSBtoRGB(hsv[0],z,hsv[2]); } //→HSB
else if(m==2){ rgb = HSBtoRGB(hsv[0],hsv[1],z); }
else{ rgb = HSBtoRGB(z,hsv[1],hsv[2]); } //→HSB
for (var j=0; j<=2; j++){ rgb[j] = Math.round(rgb[j]); }
cs[i] = '#'+format16(rgb[0])+format16(rgb[1])+format16(rgb[2]);
}
checkout(1);
d.paintbbs.setColors(String(cs.join('\n')));
}
// 全体のH/S/Bをプラスマイナス
function alplus(m,n){
var d = document;
var cs = String(d.paintbbs.getColors()).split('\n');
n *= Number(d.forms.palepale.num.value); //+-
poncheck();
for (var i=0; i0 && hsv[2]>=255){
hsv[1] -= n;
if(hsv[1]<0){ hsv[1]=0; }else if(hsv[1]>255){ hsv[1]=255; } //↓0 or ↑255
}
hsv[m] += n;
//↓0 ↑255
if(m==0){
if(hsv[0]<0){ hsv[0]+=255; }else if(hsv[0]>255){ hsv[0]-=255; }
}else{
if(hsv[m]<0){ hsv[m]=0; }else if(hsv[m]>255){ hsv[m]=255; }
}
// for (var j=0; j<=2; j++){ hsv[j] = Math.round(hsv[j]); }
rgb = HSBtoRGB(hsv[0],hsv[1],hsv[2]); //→HSB
for (var j=0; j<=2; j++){ rgb[j] = Math.round(rgb[j]); }
cs[i] = '#'+format16(rgb[0])+format16(rgb[1])+format16(rgb[2]);
}
checkout();
d.paintbbs.setColors(String(cs.join('\n')));
}
// 全体のRGBをプラスマイナス
function alrgb(n){
var d = document;
var cs = String(d.paintbbs.getColors()).split('\n');
n *= Number(d.forms.palepale.num.value); //+-
poncheck();
for (var i=0; i255){ rgb[j]=255; } //↑255
}
cs[i] = '#'+format16(rgb[0])+format16(rgb[1])+format16(rgb[2]);
}
checkout();
d.paintbbs.setColors(String(cs.join('\n')));
}
// グラデーション
function grady(m){
var d = document;
var df = d.forms.palepale;
var n = 2;
if(df.gradc){
for(var j=0; jm*hsvq[j]){ sa = Math.abs(sa) - 255/(q-p); }
hsv[0] = hsvp[0] + m*Math.abs(sa)*(k-p);
if(hsv[0]<0){ hsv[0]+=255; }else if(hsv[0]>255){ hsv[0]-=255; }
}else{ // S,B
hsv[j] = hsvp[j] - sa*(k-p);
if(hsv[j]<0){ hsv[j]=0; }else if(hsv[j]>255){ hsv[j]=255; }
}
}
rgb = HSBtoRGB(hsv[0],hsv[1],hsv[2]); //→HSB
for (var j=0; j<=2; j++){ rgb[j] = Math.round(rgb[j]); }
// RGB
}else{
for (var j=0; j<=2; j++){ // RGB
var sa = (rgbp[j]-rgbq[j])/(q-p);
rgb[j] = Math.round(rgbp[j] - sa*(k-p));
if(rgb[j]<0){ rgb[j]=0; }else if(rgb[j]>255){ rgb[j]=255; } //↑↓
}
}
cs[k] = '#'+format16(rgb[0])+format16(rgb[1])+format16(rgb[2]);
}
}
cs[0]=cs[1]; cs[1]='#ffffff';
checkout();
d.paintbbs.setColors(String(cs.join('\n')));
}
// -------------------------------------------------------------------------
// パレットのサンプルカラー
function csamp(p,pz,lst){
var ss='';
var ps = pz.split('\n');
var slong = sams.length;
var psy = check_h_sb(lst); if(psy==1){ slong = samx.length; }
// color-sample
for (var i=0; i'+selfv[1]+'';
}
return ss;
}
// パレットのリスト
function palette_list(lst){
var d = document;
var ds = '';
for (var p=0; p'+samw+'';
if(selfv[5]) ds+=inp+'onclick="onplus('+p+',0)" '+selfv[5];
if(selfv[6]) ds+=inp+'onclick="onplus('+p+',1)" '+selfv[6];
if(selfv[7]) ds+=inp+'onclick="onplus('+p+',2)" '+selfv[7];
if(selfv[8]) ds+=inp+'onclick="savy('+p+')" '+selfv[8];
if(selfv[9]) ds+=inp+'onclick="defy('+p+')" '+selfv[9];
}
return ds;
}
// チェックをつける、フォントカラーのサンプルを変更
function checkin(p,not){
qno=''; qmo=''; qon=0;
if(!pals[p]){ return; }
var d = document;
// font-color
var ps = pals[p].split('\n');
var slong = sams.length;
var psy = check_h_sb(); if(psy==1){ slong = samx.length; }
// color-sample
for (var i=0; i=plong){
var k=0;
var pds = new Array(); pds = pals;
pals = new Array();
for(var j=0; j0){ n = Math.floor(m/10 + n)*10; }
if(n<0){ n=0; }else if(n<5){ n=5; }else if(n>100){ n=100; }
df.tone.value = n;
tone_sel(n);
}
// トーンセレクト
function tone_sel(t){
var dp=document.paintbbs;
t = Number(t);
if(t==0){ dp.getInfo().m.iTT = 0; }
else{ dp.getInfo().m.iTT = Math.floor(t/10)+1; }
}
// -------------------------------------------------------------------------
// document.write
function palette_selfy(){
var d = document;
var df = document.forms.palepale;
var pzs=palette_selfy.arguments; //パレット指定があったとき
// browzer
if(brwz!=1 && brwz!=2){ return; }
// パレットとパレットクッキー
var plong = pdefs.length;
if(psx==1){ plong = pdefx.length; }
for (var p=0; p=1){ var ok=0; //?
for (var q=0; q +-');
d.write('');
d.write(inp+'value="-" onclick="num_plus(-1)">\n');
}
// パレットリスト
if(pdefs||pdefx) d.write('\n'+palette_list(1)+'
\n');
// 全体の HSB、RGB +-
if(selfytag[1]) d.write(selfytag[1]);
if(selfv[10]) d.write(inp+'onclick="alplus(0,1)" ' +selfv[10]);
if(selfv[12]) d.write(inp+'onclick="alplus(1,1)" ' +selfv[12]);
if(selfv[14]) d.write(inp+'onclick="alplus(2,1)" ' +selfv[14]);
if(selfv[16]) d.write(inp+'onclick="alrgb(1)" ' +selfv[16]);
if(selfv[11]) d.write(inp+'onclick="alplus(0,-1)" '+selfv[11]);
if(selfv[13]) d.write(inp+'onclick="alplus(1,-1)" '+selfv[13]);
if(selfv[15]) d.write(inp+'onclick="alplus(2,-1)" '+selfv[15]);
if(selfv[17]) d.write(inp+'onclick="alrgb(-1)" ' +selfv[17]);
// トーンセレクト
if(selfv[0]){
d.write('Tone ');
d.write(inp+'value="+" onclick="tone_plus(1)">');
d.write(inp+'value="-" onclick="tone_plus(-1)">\n');
}
// GRADATION
if(selfytag[2]) d.write(selfytag[2]);
if(selfv[18]) d.write(inr+'name="gradc" value="2" '+selfv[18]); //18
if(selfv[19]) d.write(inr+'name="gradc" value="3" '+selfv[19]); //19
if(selfv[20]) d.write(inr+'name="gradc" value="4" '+selfv[20]); //20
if(selfv[21]) d.write(inp+'onclick="grady(0)" ' +selfv[21]); //21
if(selfv[22]) d.write(inp+'onclick="grady(1)" ' +selfv[22]); //22
if(selfv[23]) d.write(inp+'onclick="grady(-1)" ' +selfv[23]); //23
// 追加・削除
if(selfytag[3]) d.write(selfytag[3]);
if(selfv[24]) d.write(inp+'onclick="plusy()" ' +selfv[24]); //24
if(selfv[25]) d.write(inp+'onclick="minsy()" ' +selfv[25]); //25
// セーブ・オートセーブ
if(selfytag[4]) d.write(selfytag[4]);
if(selfv[26]) d.write('