GUIサンプル ツリーと数値入力

βテストにご参加いただきまことにありがとうございます。

次のサンプルは、GUIらしいギミックです。

GUI部品をそのまま多数並べると、見通しが悪くなります。
これを避けるためにGUI部品を目的ごとに分類、ツリー構造にします。

TreeNode()とTreePop()の組み合わせで、1つのツリーになります。
ツリーは親子構造にもできます。TreeNode()の中にTreeNode-TreePopの組み合わせを入れることで親子構造になります。
TreePop()は、ツリーが開いているときに、ツリーの終了をあらわす関数です。
TreeNode()が開くとtrueが帰ります。ifで検出して、開いているときにGUIを表示、最後にTreePop()を記述します。
ツリーが閉じているときは、記述不要です。

このサンプルでは、ツリーのなかに数値入力部品を配置しています。
入力系の部品は、変数に入力値を渡すため、Pythonでは一工夫が必要になります。
本実装では、list型変数を入力関数に渡しています。
InputFloat()、InputInt()は、それぞれ浮動小数点数、整数を入力します。サンプルでは、それぞれの値を受け渡しするためにfNum、nNum変数をlist型で初期化しています。
list型変数の最初の要素に値を入れます。

PushItemWidth()は、GUI部品の表示幅を設定します。設定しない場合、標準の表示幅になります。見た目が微妙になるため、表示幅を制御したほうがよいです。
PushItemWidth()は、PopItemWidth()と必ず組にしてください。

#LAYOUT
import vrmapi

nNum = [0]
fNum = [0.0]

def vrmevent(obj,ev,param):
    if ev == 'init':
        obj.SetEventFrame()
    elif ev == 'broadcast':
        dummy = 1
    elif ev == 'timer':
        dummy = 1
    elif ev == 'time':
        dummy = 1
    elif ev == 'after':
        dummy = 1
    elif ev == 'frame':
        global nNum
        global fNum
        vrmapi.ImGui().Begin("win1","Sample Window")

        if vrmapi.ImGui().TreeNode("tree1", "Tree-A"):
            vrmapi.ImGui().PushItemWidth(160.0)
            vrmapi.ImGui().InputFloat("f1", "浮動小数点数", fNum)
            vrmapi.ImGui().InputInt("n1", "整数", nNum)
            vrmapi.ImGui().PopItemWidth()
            vrmapi.ImGui().TreePop()

        vrmapi.ImGui().End()
    elif ev == 'keydown':
        dummy = 1
実行結果

GUIサンプル ボタン

βテストにご参加いただきまことにありがとうございます。

次はボタンのサンプルです。

ボタンは、クリックするとtrueを返します。ifでボタンが押されたことを検出します。

サンプルでは、ボタンが押されたことを記録するために、整数値を持つbtn変数をグローバル変数として用意しています。
frameイベントの最初にグローバル変数を使うことを宣言するため、global btnを記述します。
(記述しない場合、btnという名前のローカル変数になってしまいます。)

Begin()-End()の間に、Button()を記述します。ボタンは、入力をもつGUI部品のため、この部品だけのタグをつけます。サンプルでは、”b1″としています。

ifでボタンが押されたらbtn変数に1を代入します。

次にボタンが押されたことをあらわすメッセージを表示します。btn変数が1ならば、ボタンが押されたことになりますのでifで検出します。

ifでGUIの状態変化を検出、状態を記録する変数はグローバル変数にすることがポイントです。

#LAYOUT
import vrmapi

btn = 0

def vrmevent(obj,ev,param):
    if ev == 'init':
        obj.SetEventFrame()
    elif ev == 'broadcast':
        dummy = 1
    elif ev == 'timer':
        dummy = 1
    elif ev == 'time':
        dummy = 1
    elif ev == 'after':
        dummy = 1
    elif ev == 'frame':
        global btn

        vrmapi.ImGui().Begin("win1","Sample Window")

        vrmapi.ImGui().Text("ボタンテスト")
        vrmapi.ImGui().Text("btn変数の状態 =>"+str(btn))
        if vrmapi.ImGui().Button("b1", "ボタンその1"):
            btn = 1
        if btn == 1:
            vrmapi.ImGui().Text("ボタンをクリックした")

        vrmapi.ImGui().End()
    elif ev == 'keydown':
        dummy = 1
実行結果

GUIサンプル ウィンドウを開く

βテストにご参加いただきまことにありがとうございます。

ビルド50では、スクリプトからNXシステムに組み込まれているGUI=ImGuiを利用できるようになりました。
ImGuiの基本的な機能を利用できる関数を実装しています。

ImGuiは、イベント駆動で動作するWin32などのGUIと異なり、Direct3D、OpenGLなど3DAPIと親和性の高い、直接駆動が特徴です。

3D APIの描画シーケンスの1つとして、毎フレーム実行します。実行結果は関数の戻り値であらわされます。

ウィンドウを開く

最初のサンプルは、ウィンドウを生成するコードです。非常に簡単です。

Begin()とEnd()を実行するだけで、ウィンドウが生成されます。
Begin()とEnd()の間に、ウィンドウに表示するGUI部品を記述します。

毎フレーム実行するため、レイアウトスクリプトのinitイベントでSetEventFrame()を実行します。

frameイベントには、Begin()-End()とテスト用にウィンドウにテキストを表示するText()を記述します。

ImGuiで重要なことは、ウィンドウ、GUI部品を部品名で識別していることです。同じ名前の部品を使用すると入力できなくなります。
これを避けるため、タグを部品に設定します。タグをすべての部品で一意の名前にすることで、部品名の衝突を避けることができます。
(ImGuiを呼び出す前に内部でラベルとタグから部品名を生成しています。)

#LAYOUT
import vrmapi
def vrmevent(obj,ev,param):
    if ev == 'init':
        obj.SetEventFrame()
    elif ev == 'broadcast':
        dummy = 1
    elif ev == 'timer':
        dummy = 1
    elif ev == 'time':
        dummy = 1
    elif ev == 'after':
        dummy = 1
    elif ev == 'frame':
        vrmapi.ImGui().Begin("tag_w","Sample Window")
        vrmapi.ImGui().Text("テキスト表示サンプル")
        vrmapi.ImGui().End()
    elif ev == 'keydown':
        dummy = 1
実行結果