// 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\n
\n'; // フォームの間_1 (個別のパレット 〜 全体の HSB、RGB +- とか) selfytag[1] = '
\n'; // フォームの間_2 (全体の HSB、RGB +- とか 〜 グラデーション) selfytag[2] = '
\n
\nGradation'; // フォームの間_3 (グラデーション 〜 パレットの追加・削除ボタン) selfytag[3] = '
\n
\nPalette'; // フォームの間_4 (パレットの追加・削除ボタン 〜 セーブボタン) selfytag[4] = '\nSave'; // フォームの間_5 (セーブボタン 〜 Defaultは H++/+S-B どちらか) selfytag[5] = '
\n
\nDefault'; // フォームの間_6 (Defaultは H++/+S-B どちらか 〜 パレットのアップ/ダウンロード) selfytag[6] = '
\n
\nUpdata '; // フォーム終わり selfytag[7] = '
\n
\n
\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('