From 95dfe14528663923ca2a88ec928f1d8d9df2402b Mon Sep 17 00:00:00 2001 From: bai Date: Fri, 29 Mar 2019 02:14:43 +0000 Subject: Init --- static/js/palette_selfy.js | 972 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 972 insertions(+) create mode 100755 static/js/palette_selfy.js (limited to 'static/js/palette_selfy.js') diff --git a/static/js/palette_selfy.js b/static/js/palette_selfy.js new file mode 100755 index 0000000..b17134f --- /dev/null +++ b/static/js/palette_selfy.js @@ -0,0 +1,972 @@ +// 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
Palette-Selfy
\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('