PdDoridParty で SVG 使って GUI

というわけで、PdDroidParty のお話のつづき。

Pure Data で作ったパッチを Android で動作させるためのアプリ(?)、PdDroidParty。
英語ばかりの公式サイトで、一段と目を引く GUI が書き換えられている画像。
どんなものか試してみたので、分かったことなどを書いておく。

で、前に、こちら で触れたけど 、ラジオボタンは対応してません。
あと、「bang」も対応してませんが、代わりに「wordbutton」 というのアブストラクションが用意されてます。
ラジオボタンも「taplist」で代替が利きそうです。
詳しくは、公式サイトの「Abstractions」を見ていただくとして、簡単な説明。

■wordbuton : bang 的なものだけど、ボックスの中にテキストが入る。
ex. [ wordbutton 80 30 rock ]
= ワードボタン指定 横幅 縦幅 テキスト
※「rock」がボックスの中に入るテキスト。だけどテキストサイズは縦幅にアジャストするので、文字数が多くて、横幅が足りないとはみ出します。
[追記]
wordbutton からの bang を受信する場合、[r wordbutton-テキスト]と言う形で受信する。
wordbutton- がプリフィックス的な?

■numberbox : ナンバーボックスと同様だけど、指定した大きさの四角の中に数字が入る。
ex. [numberbox 64 32 numreceive numsend 0 10 5]
= ナンバーボックス指定 横幅 縦幅 レシーブ センド名 最小値 最大値 初期値

■taplist : タップするたびに指定した内容に切り替わる。内容は数値とテキスト。
ex.[taplist 96 32 send receive hello goat egg wubble]
= タップリスト指定 横幅 縦幅 センド名 レシーブ名 要素1 2 3・・・]
※要素1が初期値、タップするたびに1→2→3・・・と切り替わり最後まで行くと要素1に戻る。

■touch :画面をスクラッチするとxy数値を返してくれる。(公式サイトにはコルグのカオスパッド的って書いてあるけど、gridのAndroid版? )
ex.[touch 200 200 xy]
= タッチ指定 横幅 縦幅 センド名
※センド名(センダー)からxy値がパックして送られてくる。

■menubang : Android(PdDroidParty) のメニュー画面に bang の機能を持たせたメニューを追加できる。アイコンは72×72の .png 形式で、ファイル名のプリフィックスは、menubang-。
ex.[menubang hello]
= メニューバン指定 センド名(実際は「menubang-hello」になる。)

■loadsave : Android の 「ファイルを開く」「保存」のインターフェイスを呼び出す。
ex.[loadsave store]
= ロードセーブ指定 センド・レシーブ名
※実際には、load、send の bang などのボタンを用意して、センド名 store に save savedir sav 、load savedir sav など、動作やディレクトリなどをメッセージで送るようです。

■droidnetreceive : PdDroidparty 上で動作しているパッチ同士でタイミングや状態を共有できる、とかなんとか。

まぁ、公式サイトから droidparty-tests.zip と、droidparty-abstractions.zip をダウンロードして中身を見ればなんとなく分かるかと。

というわけで、テストで組んでみたパッチに、ラジオボタンとバンを使っていたワタクシ、トグルとタップリストに置き換えてみたんでした。
上記一覧の機能は、PC上の Pure Data では動作しない(というか、エラーの認識)ので、 実際に端末に送って動かしてみるまで正しく動作してるかは分からないです。
まぁ、例のごとく、組んでは端末送り→不具合→修正・・・を繰り返し、なんとか思ったとおりの動作をするように改造。

で、やっと本題、GUI に画像データを使うぞー。おー。

公式サイトの「SVG Widgets」を読んでみる。

何やら、inkscape を使えとか書いてある模様。
ここに来て、また新たなソフトを習得せねばならぬのか。

実はMacOSXを64bitに切り替えたときに、それまで使っていた画像編集ソフトが使えなくなって、無料のソフトで良いものはないと密かにインストールしてみたものの、それまで使っていたソフトとの UI の違いについていけず、挫折したソフトではないか。ぐぬぬ。
というわけで、インストールはしてたんです。でも、日本語入力できないんすよね、コレ。

GUI で一番困ってたのは、ボタン名が日本語で表記できないところだったので、うーむ、どうしたもんか。
悩んだら検索すれば良いのだ。
おっと、テキストファイルで日本語入力して、コピペすれば大丈夫との情報が。

とりあえずボタンとして四角を書いて、日本語のボタン名をコピペしてセーブ。
端末に送る。日本語が表示されない。
そしてさらに、表示位置が大幅にずれる。

公式サイトを読む。
「ま、droidparty-tests の svg-widgets に入ってる .svg を改造して使うのが無難じゃね?」とか書いてある。

ので、droidparty の svg-widgets にある Toggle.svg を開いて、日本語テキストをコピペしてセーブ。
端末に送る。位置がずれるのは直ったけど、日本語は表示されない。
以降の流れはいつものことなので端折る。

結論から言うと、テキストのパス化をしてなかったんです。
で、位置ズレは「ファイル」メニュー→ドキュメントの設定→カスタムサイズ で大きさを描画サイズに合わせてなかったから。
(「ページサイズをコンテンツにあわせて変更」でもダメだったんだけど、なんででしょうかね?)

同じく、矩形ツールや円ツールで書いたものも、「パス」メニュー→オブジェクトをパスへ、でパス化しないと表示されません。
パス化しなくても、カラー指定は効いているみたいで、トグルなどは四角く指定色になるもんだから、余計原因が分からなかったんでした。

ま、良く読むと、「The renderer only really works on plain paths, so make sure you convert any objects like rectangles or circles to plain SVG paths.」と、パスしかレンダリングしないよ、矩形とか円のオブジェクトでもパス化しろよって書いてあるんですけどね。
相変わらずの粗忽者っぷり。

画像サイズは、Pure Data で、オブジェクトのプロパティで設定したサイズにアジャストしてくれます。

で、ファイル名。
トグルボタンだったら、Toggle.svg とすると、トグルボタンを置き換えてくれます。
ボタンそれぞれに別の画像を使いたいときは、ボタンにセンド名かラベルをつけて、その名前を Toggle- の後ろにつけて、Toggle-xxx.svg とするとそのボタンに割り当たります。

スライダー は特殊で、スライダーの枠と可動するつまみ(?)部分を別ファイルにします。
横向きのスライダーの場合、それぞれ、Slider-horizontal.svg、Slider-widget-horizontal で、スライダーごとに別のデザインにする場合は、トグルと同じくセンド名かラベルを指定して、Slider-xxx-horizontal.svg、Slider-xxx-widget-horizontal.svg とします。(xxx 部分がラベル、センド名)
縦向きの場合は、Slider-vertical.svg、Slider-widget-vertical、Slider-xxx-vertical.svg、Slider-xxx-widget-vertical.svg とします。

あと、グラデーションは表示できないようですね。
doriparty-tests の svg-background-3 にある background.svg に、グラデを使ってるパスがありますが、表示されていないようですし。

あ、background.svg は読んで分かるように、背景画像です。

というわけで、色々 .svg ファイルを作ってみたら動いたよー。


[追記]
公式サイトにある「Sharing your patches」、パッチや .svg があるフォルダを zip 圧縮して、拡張子を .dpz に書き換えて~とありますが、コイツを端末に送って PdDroidParty を起動すれば PdDroidParty が解凍して起動してくれるのかと思ったら違った。
端末に送った .dpz ファイルを起動(=自動解凍)すると、PdDroidParty が(インストールされてれば)起動するんだった。
次回、パッチを起動したいときは、PdDroidParty に登録されているので、PdDroidParty を起動すれば、メニューから選択できるようになっています。

スポンサーサイト

コメント

非公開コメント