cables.gl のパッチにinputタグを使って「値」を送る２つの方法
ナカジ(@cp_nakajun)です。
けっこう覚書的な内容になってしまいますが残します。
cables作品で動かしたいパラメーターがある場合
インターフェース用のオペレーターと言えばいいのか「Ops.Sidebar」を使うのが通常だと思います。
このオペレーターを使えばcables制作時のパッチングだけで設定項目のインターフェースを作ることができるので便利ではあるんですが
サイドバーを畳んでも描画領域内に展開用のボタンが表示されるので作品として見せる時に「ちょっとなぁ」って思ったことが今回の記事のきっかけです。
そこでHTMLタグであるinputタグを使う方法を試してみました。
inputタグから値を受け取る方法
あまり分かりやすいとは言えませんが、とりあえずデモ的なものを作ってみました。
この方法はエクスポートすることが前提になり出力されたHTMLファイルにinputタグを追記します。
cablesで値を受け取る２つの方法は
- カスタムオペレーターで[getElementById]
- オペレーター[VarGetNumber]か[VarGetString]を使う
記述したinputタグ
デモに記述したinputタグは以下です。
#toCables01：<input type="range" id="input_num" max="100" step="1" value="50" ><br> Custom OP：<input type="range" id="toCables" max="100" step="1" value="50" ><br> #toCablesStr01：<input type="text" id="input_str" value="Cables" size="20" maxlength="20"><br>
カスタムオペレーターを使う
cablesでカスタムオペレーター(Ops.Cables.CustomOp)配置します。
カスタムオペレーターのパラメータースペースで「edit」ボタンを押してedit画面を開きます。
中身は以下のように「getElementById」で値を取得する感じにします。
const inButton = op.inTriggerButton("Press me");
const output = op.outNumber("out");
inButton.onTriggered = update;
function update(){
let htmlIn = document.getElementById("toCables").value;
output.set(htmlIn);
}
これでカスタムオペレーターのアウトプットから取得した数字が出力されます。
VarGetNumber / VarGetString を使う
まずcablesのほうは下記画像のようにパッチングします。
手順ですが
- Op[VarSetNumber]や[VarSetString]を配置
- パラメーターの「Create New Variable」で変数名を設定
- Op[VarGetNumber]や[VarGetString]を配置
- パラメーター「Variable」で変数名を選択
先に「Set」で変数名を設定する必要がありますので注意してください。
次にHTMLファイルに記述する内容ですがcables公式のドキュメントページ「dev embed vars」を参考に以下のように記述しました。
<script>
function BrowserIn(){
CABLES.patch.setVariable("toCables01",document.getElementById("input_num").value); //cablesに渡す("ID名",値)
CABLES.patch.setVariable("toCablesStr01",document.getElementById("input_str").value);
}
setInterval('BrowserIn()',500);
</script>
これは先にcablesパッチで設定した変数に対して「getElementById」で取得した値を「setInterval」で強制的に送るという、やってみると結果的に腕力な方法な気がしてます。
ということで「cables.gl のパッチにinputタグから「値」を受け取る２つの方法」でした。
デモを見て頂くと感じると思いますが、カスタムオペレーターを使う方がスムーズに動くように思います。
まぁ、こんな方法が必要な時があるかもしれないということで
