JUNK Renno

foobar2000のwsh panel mod(JScript)のサンプルコード:Reboot 3 - Button

---

ボタン

---

＊reboot後の想定するファイル構成は以下のような配置になります。

foobar2000のポータブルインストールフォルダ
　┗ samplesフォルダ
　　　┣インポートするJScriptのテキストファイル
　　　┗ imgフォルダ（使用する画像ファイル全般）


＊WSH Panel Modの場合、Helpers.txtの内容が違います。下のリンクで、ダウンロードしたサンプルの中に入っているHelpers.txtと入れ替えてください。

・Helpers.txtのある場所
foobar2000のポータブルインストールフォルダ
　┗ user-compornentsフォルダ
　　　┗ foo_uie_wsh_panel_modフォルダ
　　　　　┗ docsフォルダ


＊今回のサンプル
samples_rb_3.zip

---

ボタンをオブジェクト化すると、複数のボタンをまとめて処理するのが楽になります。
まず、単独のボタンの使いかた。

// ==PREPROCESSOR==
// @name "1 Button object"
// @author "Junya Renno"
// @import "%fb2k_component_path%docs\helpers.txt"
// ==/PREPROCESSOR==

var img_path = fb.ProfilePath+"/samples/img/";
var tooltip = window.CreateTooltip();

var b_img = new button_img(img_path+"button_a.png",img_path+"button_a_h.png");
// ノーマル時の画像パスとホバー時の画像パスを指定して画像パスオブジェクトを作成

var b = new  button(10, 10, 100, 30, b_img, fn_a, "button A") ;
// ボタンオブジェクト作成　 button(x, y, 幅, 高さ, 画像パスオブジェクト, 実行する関数, ツールチップ用テキスト) 

function button_img(normal_path,hover_path){
    this.normal = normal_path;
    this.hover = hover_path;
}

//ボタンで起こすアクション
function fn_a(){
    fb.ShowPreferences();
    // Preferencesウィンドウを出す
}

function on_paint(gr){
    b.paint(gr);
}

function on_mouse_move(x,y){
    if (b.trace(x,y)) {
        b.cs("hover");
    } else {
        b.cs("normal");
    }
}

function on_mouse_lbtn_up(x,y){
     if (b.trace(x,y)) {
        b.lbtn_up(x, y);
    }
}

特に面倒なこともないのですが、気をつけるのは押された後実行する関数を独立して書くことと、
ノーマル時の画像パスとホバー時の画像パスをbutton_img()に突っ込んでひとつにまとめることくらいでしょうか。




次に複数のボタンの扱いですが。



これ位はむしろPSSで書いた方が早い気もしますが、まあサンプルだし。buttons.txtです。

// ==PREPROCESSOR==
// @name "Buttons object"
// @author "Junya Renno"
// @import "%fb2k_component_path%docs\helpers.txt"
// ==/PREPROCESSOR==

//初期設定
var img_path = fb.ProfilePath+"/samples/img/";
var tooltip = window.CreateTooltip();

var b_img_a = new button_img(img_path+"b1.png",img_path+"b1_h.png");
//prev
var b_img_b = new button_img(img_path+"b2.png",img_path+"b2_h.png");
//play
var b_img_b2 = new button_img(img_path+"b2_p.png",img_path+"b2_p_h.png");
//paused、playとトグル
var b_img_c = new button_img(img_path+"b3.png",img_path+"b3_h.png");
//next
// ノーマル時の画像パスとホバー時の画像パスを指定して画像パスオブジェクトを作成

var bs = new buttons();
bs.buttons.buttonA = new button(10, 10, 40, 40, b_img_a, fn_a, "Prev");
bs.buttons.buttonB = new button(60, 10, 40, 40, b_img_b, fn_b, "Play or Pause");
bs.buttons.buttonC = new button(110, 10, 40, 40, b_img_c, fn_c, "Next");
// bs.buttons{}に名前とボタンオブジェクトを追加
// button(x, y, 幅, 高さ, 画像パスオブジェクト, 実行する関数, ツールチップ用テキスト) 

function button_img(normal_path,hover_path){
    this.normal = normal_path;
    this.hover = hover_path;
}

function button_change(btn,imgobj1,imgobj2){
//ポーズ中かどうかでボタンの画像を変える
    if (fb.Ispaused || fb.Isplaying == false){
        btn.img_normal = gdi.Image(imgobj1.normal);
        btn.img_hover = imgobj1.hover ? gdi.Image(imgobj1.hover) : btn.img_normal;
    } else {
        btn.img_normal = gdi.Image(imgobj2.normal);
        btn.img_hover = imgobj2.hover ? gdi.Image(imgobj2.hover) : btn.img_normal;
    }
    btn.img = btn.img_normal;
    window.RepaintRect(btn.x,btn.y,btn.w,btn.h);
}

// 再生中かチェック
button_change(bs.buttons.buttonB,b_img_b,b_img_b2);


//以下関数

//ボタンで起こすアクション
function fn_a(){
    fb.Prev();
}

function fn_b(){
    fb.PlayOrPause();
    button_change(bs.buttons.buttonB,b_img_b,b_img_b2);
}

function fn_c(){
    fb.Next();
}

function on_paint(gr){
    bs.paint(gr);
}

function on_mouse_move(x,y){
    bs.move(x,y);
}

function on_mouse_lbtn_up(x,y){
    bs.lbtn_up(x,y) 
}

function on_playback_new_track(){
    button_change(bs.buttons.buttonB,b_img_b,b_img_b2);
}

おお、なんか楽っぽい。

new buttons()でインスタンス作ってボタンを連想配列に登録、あとはインスタンスのメソッドに丸投げ。




あんまり書くこともないので、終わります。