今回の記事ではEXOR のJMobile Runtime上でJavascriptの使用方法を簡単に説明します。

さ、FAを楽しもう。

Reference Link

JavaScript On EXOR?

JavaScript 関数は、イベントが発生したときに実行されます。例えば、EXORのハードウェアでユーザーは OnMouseClick イベント用のスクリプトを定義することができ、HMI デバイスでボタンが押されると JavaScript スクリプトが実行されます。

注意するのは、プログラムされたイベントが発生したときのみ実行され、周期的に実行されることはありません。それにより、HMI デバイスでロジックを実行するのに必要なオーバーヘッドを最小限に抑えます。

JMobile Studioはクライアントサイドで動作するJavaScriptエンジンが提供され、各プロジェクトページには、追加されたページにローカルなスコープを持つスクリプトを含めることができます。もちろん、スケジューラーイベントやアラームイベントによって実行されるグローバルスクリプトを作成することもできます。

また、スクリプトはクライアント上で実行されていますので、つまり複数のクライアントがHMIデバイスに接続されている場合（HMIクライアントを実行している外部コンピュータの場合）、各クライアントは同じスクリプトを実行し、異なるクライアントに提供される入力が異なる可能性があるため、入力に応じて異なる出力結果を提供します。

例えば、あるスクリプトがスライダーの位置に応じて動作し、この位置が異なるクライアントで異なる場合、スクリプトの結果は各クライアントで異なります。

Implementation

こちらは今回記事で作成した画面で、その上に表示した数字や画像の透明度などをJavscriptを使用し変更します。

Define Local Variables

Configuration>Protocols>VariablesでJMobile Runtimeにローカル変数を定義します。

注意するのはその変数が基本的に電源供給なくなったらリセットされます。

Done!

Javascript Editor

JMobile StudioにはJavscriptのIDEが提供されます。各ページの下にはScript/KeyboardというTabがあります。

そのTabをクリックすると、JavscriptのEditorが表示されます。

Part-1

最初にページが開いたとき、JavascriptでBackgroundタスクを実行する方法を紹介します。

Script

こちらはPart-1のScriptです。

var myCounter=0;var myTimer=page.setInterval(“f_reflesh()”,1000);

function f_reflesh(){

myCounter=myCounter+1;
project.setTag(“Tag1”,myCounter);

}

page.setInterval(“f_reflesh()”,1000);

こちらはこの関数を使用し、1000msごとにf_refleshという関数を実行するようにします。

function f_reflesh()

次はf_refleshを定義しましょう。

project.setTag(“Tag1”,myCounter);

最後はproject.setTag(x,y)の関数を使用し、Tag xにy値を書き込みます。

Part-2

次はボタンをクリックし、他のTagの現在値を取得し、Labelに表示します。

Show more options from widgets

JMOBILEのWidgetsでは赤枠のボタンをクリックし、より多くの設定を調整できます。

下図のように、Configure・Text・Generalという項目が表示されました。

Trigger Javascript via Button

ボタンのクリック動作からJavascript関数を実行するには、Events>OnMouseClickでアクションを追加しましょう。

Widget>Javascriptを追加するだけで、JMOBILE Studioが自動的にJavascript関数を追加してくれます。

Script/Keyboard Tabには以下の関数が追加されます。

function BtnStd1_btn_onMouseClick(me, eventInfo)
{

}

赤ラインはWidgetsの名前に該当し、btn_onMouseClickはトリガーするアクションの種類を示します。

Script

こちらはScriptsです。

project.getTag(“Tag1”)でTag1の現在値を取得し、project.setTag関数で別の変数に書き込みます。

function BtnStd1_btn_onMouseClick(me, eventInfo)
{
var tagValue=project.getTag(“Tag1”);
project.setTag(“Tag2”,tagValue);
}

Part-3

Part3ではWidgetのプロパティを内部Tagとつなげ、その内部Tag値から画像の透明度を可変します。

Script

こちらのScriptで0.03s秒ごとに画像の透明度値を+0.001にし、透明度値が1より大きくなると0.0.にリセットします。

var myTimer3=page.setInterval(“f_reflesh_Pictures2()”,30);var mypictureCounter=0;
function f_reflesh_Pictures2(){ var opvalue=project.getTag(“Tag6”); if (opvalue >=1.0 ){ mypictureCounter=0.0; } mypictureCounter=mypictureCounter+0.001; project.setTag(“Tag6”,mypictureCounter);
}

Part-4

Part4ではWidgetのプロパティをJavascriptから直接変更する方法を紹介します。

Scripts

こちらはScriptです。まずpage.getWidget(“image2”)を使用し、画像Widgetsを取得し、wgt.setPropertyの関数を使用opacityプロパティを変更します。

var myTimer2=page.setInterval(“f_reflesh_Pictures()”,10);

function f_reflesh_Pictures(){

mypictureCounter=mypictureCounter+0.001;

if (mypictureCounter >=1.0){
mypictureCounter=0.0;
}
var wgt = page.getWidget(“image2”);
var r = wgt.setProperty(“opacity”,mypictureCounter);

}

Part-5

最後は画面の一番下にあるWIFI ICONのX位置や回転する方法を紹介します。

Scripts

最後はScriptsですね。slidebard.valueを使用し直接Widgetsの現在値を取得し、wgt.x=Valueを使ってWidgetsのX位置を変更します。

function SldrHrz1_ndl_onDataUpdate(me, eventInfo)
{
var wgt = page.getWidget(“image3”);
var slidebard = page.getWidget(“SldrHrz1”);
var Value=slidebard.value;
wgt.x=Value;
return false;
}
function SldrHrz2_ndl_onDataUpdate(me, eventInfo)
{
var wgt = page.getWidget(“image3”);
var slidebard = page.getWidget(“SldrHrz2”);
var Value=slidebard.value;
wgt.rotation=Value;
return false;
}