Ｐ　Processing (7)　　〜GUI-P5ライブラリ（2）

ｂｙ　ｆｊｋ

　P5ライブラリでButtonの他、よく使われる次のコントロールを使った例を紹介する。

１．テキスト入力		３．ボタン・スイッチ
・Textfield	1行テキスト入力	・CheckBox	複数の同時選択が可能
・Textarea	複数行のメモエリア	・RadioButton	いくつかの候補から１つ選択
・Textlabel	１行テキスト表示	・Toggle	ON/OFFの値を持つ
２．スライダー・2D		４．リスト
・Slider	マウスで位置(数値)を指示	・ListBox	複数の一覧表から選択
・Slider2D	２次元のスライダー	・DropdownList	プルダウン付きリスト

�@ テキスト入力とスライダーの使用例

スケッチを実行すると、サイズ変更可能なテキストエリア、縦・横のスライダー、消去ボタン、テキスト入力フィールドを表示。 スクロールでテキストエリアサイズを変更できる INPUTに文字を入力すると、テキストエリアに追加表示される。 クリアボタンを押すとテキストエリアを消去。 TABボタンを押すと、次メッセッージを表示。 BSボタンを押すと、前メッセージを表示。 スペースキーを押しながらマススを操作すると、行間が変わる。 行が表示エリアサイズを超えると、上下スクロールバーが表示され、上下にスクロールできる SliderでTicksを使うと目盛りを振ることも出来る setSliderMode()はFIXED又はFLEXIBLEが使用可 SliderCaptionを非表示するには、getController().でオブジェクトを呼出しsetVisible(false)とする textFieldでCaptionの位置を変更するも同様に textFieldでは漢字入力が出来ないが、 JAVA swingライブラリを使うと実現できそう(以下参照)。 日本語Textfieldの使い方

sketch_230207a.pde(zip) import controlP5.*; ControlP5 cp5; Textarea txA; PFont font; String msg1 = "・スライダーを動かすとサイズが変わる\n" + "・TABキーを押すと次メッセージを表示\n" + "・INPUTに文字を入力するとここに追加\n" + "　（ただし、漢字入力はできない）\n"; String msg2 = "・CLRボタンを押すと画面消去\n" + "・BSキーを押すと元メッセージを表示\n"; void setup() { size(640,400); cp5 = new ControlP5(this); font = createFont("MS-Gothic-48",14); txA = cp5.addTextarea("txt") .setPosition(80,60) // 表示位置 .setSize(200,200) // 表示サイズ .setFont(font) // 使用フォント .setLineHeight(18) // 行高さ .setColor(color(255)) // 文字色 .setColorBackground(color(0,0)) .setColorForeground(color(255,255)) .setText(msg1) // 初期表示文字列 ; cp5.addSlider("sWidth") .setRange(100,360) // 数値範囲 .setValue(300) // 初期値 .setPosition(100,20) // 表示位置 .setSize(200,25) // 表示サイズ .setSliderMode(Slider.FLEXIBLE) ; cp5.getController("sWidth") .getCaptionLabel() .setVisible(false) // Captionを非表示 ; cp5.addSlider("sHeight") .setRange(320,100) // 数値範囲（逆順） .setValue(250) // 初期値 .setPosition(30,80) // 表示位置 .setSize(20,200) // 表示サイズ .setSliderMode(Slider.FLEXIBLE) ; cp5.getController("sHeight") .getCaptionLabel() .setVisible(false) // Captionを非表示 ; cp5.addTextfield("input") .setPosition(400,20) // 入力枠位置 .setSize(200,30) // 入力枠サイズ .setFont(font) // 入力枠フォント .setFocus(true) // フォーカスがある時 .setColor(color(255,255,0)) // 文字フォント色 ; cp5.getController("input") // inputの .getCaptionLabel() // Captio.Lableの .align(ControlP5.LEFT_OUTSIDE,ControlP5.CENTER) .setPaddingX(0) // 表示場所変更 ; cp5.addButton("cBtn") .setPosition(30,20) // 表示位置 .setSize(30,30) // 表示サイズ .setCaptionLabel("clr") // Captionの変更 .setColorBackground(color(255,0,0)) ; } void keyPressed() { if(key == BACKSPACE) myTextarea.setText(msg1); else if(key == TAB) myTextarea.setText(msg2); } void draw() { background(96); if(keyPressed && key==' ') txA.setLineHeight(mouseY); } // 行高さ変更 void sWidth(int theValue) { myTextarea.setWidth(theValue); // 幅変更 } void sHeight(int theValue) { myTextarea.setHeight(theValue); // 高さ変更 } public void input(String theText) { txA.append(theText+"\n"); // textAreaに文字追加 } public void cBtn(int theValue){ txA.clear(); // textAreaの文字消去 }

スケッチの実行画面 行間隔を「スペース＋マウス」で変更

�A ボタン・リストを使った例

スケッチを実行すると、リスト、チェックボタン、ラジオボタンと黒い円を表示 RED、GREEN、BLUEのチェックボタンをチェックすると、円の色が組み合わせた色に変わる。 リストボックスで円か四角かを選択できる ラジオボタンで、図形のサイズを変更できる スペースキーを押すと図形色を消去 '1'〜'3'キーを押すとチェックボックをON/OFF 各コントロールはaddメソッドで追加し、同時にサイズなどの初期パラメータも設定 controleEvent()関数で、theEventオブジェクト取得し、さらに、どのコントロ−ルからのイベントかをisFrom()関数で調べ、各イベントに対応する処理を行っている チェックボックスで、各RGB色を加算しcol変数に入力したが、各色を全て0xff（255）にすると正しい色にならないことがあり0xfc（252）にした チェックボックスのRGB色を加算するループで、何故か「配列要素数がオーバー」とエラー終了することがあった（要検討、同じ原因か？）

sketch_230210d.pde(zip) import controlP5.*; ControlP5 cp5; CheckBox ckx; ListBox lbx; RadioButton rbt; int col = 0; int shp = 0; float rad = 100; void setup() { size(800, 400); smooth(); cp5 = new ControlP5(this); ckx = cp5.addCheckBox("checkBox") .setPosition(600, 200) .setSize(40, 40) .setItemsPerRow(1) .setSpacingColumn(30) .setSpacingRow(20) .addItem("red", #fc0000) .addItem("green", #00fc00) .addItem("blue", #0000fc) ; ckx.getItem(0).setColorActive(color(255,0,0)); ckx.getItem(1).setColorActive(color(0,255,0)); lbx = cp5.addListBox("shapeList") .setPosition(600,50) .setSize(120,120) .setItemHeight(30) .setBarHeight(30) .addItem("elipse",1) .addItem("rect",2) ; rbt = cp5.addRadioButton("radio") .setPosition(100,350) .setSize(30,20) .setItemsPerRow(4) .setSpacingColumn(50) .addItem("50",50) .addItem("100",100) .addItem("150",150) .addItem("200",200) ; rbt.activate(1); } void keyPressed() { if (key==' ') ckx.deactivateAll(); else { for (int i=0;i<3;i++) { if (keyCode==(49 + i)) ckx.toggle(i); } } } void draw() { background(128); pushMatrix(); translate(width/4 + 0, height/2); stroke(255); strokeWeight(2); rectMode(CENTER); fill(col); switch(shp){ case 0: ellipse(0,0,rad,rad); break; case 1: rect(0,0,rad,rad); break; } popMatrix(); } void controlEvent(ControlEvent theEvent) { if (theEvent.isFrom(ckx)) { col = 0; println("got an event from "+ckx.getName(); for (int i=0;i < ckx.getArrayValue().length;i++) { int n = (int)ckx.getArrayValue()[i]; if(n==1) { col += ckx.getItem(i).internalValue(); } } } if (theEvent.isFrom(lbx)) { println("got an event from "+lbx.getName()); shp = (int)theEvent.getValue(); } if (theEvent.isFrom(rbt)) { println("got an event from "+theEvent.getName()); rad = theEvent.getValue(); } }

スケッチの実行画面

※ ListBox の代わりに ScrollableList も同じように使えるが、その場合 java.utilもインポートする必要がある。
　　import java.util.*;

---

※ 本レポートの参考・利用は、あくまでも自己責任でお願いします。

---

Excel-改行書式 Inkscape （Pr-7)GUI-P5（2）

---