JINS MEMEでマウスカーソルの操作を行いたい

Question

前提・実現したいこと

JinsMemeSDK(https://github.com/jins-meme/JinsMemeSDK-Samples-NodeJS/tree/master/jinsmeme-mouse)のコードの1部を変更し、視線移動を検知した時にマウスカーソルを移動させ、瞬きをしたときに移動停止させたいと考えています。

発生している問題・エラーメッセージ

初めはWhile文を使ってマウスカーソルの制御を行おうと考えていたのですが、ループ中瞬きなどの処理を検知しなくなったため、現在タイマーイベントを使って制御を行おうと考えています。
視線移動を検知した時にマウスカーソルが動き続け、ループ中も瞬きを検出できるようにはなったのですが、瞬きを検知しても停止せずに動き続けてしまう状態です。

該当のソースコード

現在試作として右を見たときの反応だけコード入力しています。

//リアルタイムモードを処理する部分
const realtimeModeCB_dev1 = data => {

  var mouse = robot.getMousePos();
  let right = false;
  let date_now = Date.now();

  var cmr = function() {
    robot.moveMouse(mouse.x += cm, mouse.y);
    setTimeout(cmr, 250);
  };

  if (data.eyeMoveRight > 1) {
    right = true;
    console.log("Right");
  }

  if (data.blinkStrength > 40) {
    console.log("stop")
    right = false;
  }

  if (right == true) {
    cmr();
  }
～
}

試したこと

clearTimeoutを用いてループを終了させる方法など考えられることは試したのですが移動を停止させることが出来ませんでした。

Comments

[dodox86]

今、ご提示のコードは setTimeoutで250ミリ秒ごとにcmrを定周期で呼び出し続けるようなコードですが、clearTimeoutで停止する部分が見当たりません。そのためにマウスが移動し続けているのでは。
clearTimeoutを用いてループを終了するようにしたけどダメだったとのことですが、その時のコードはどういうものだったのでしょうか。

[erua]

返信遅くなって申し訳ないです。
clearTimeoutを用いたコードは以下の2通りになります。

```
const realtimeModeCB_dev1 = data => {

var mouse = robot.getMousePos();
let right = false;
let cm = 2;
let date_now = Date.now();
var stopcmr;

var cmr = function() {
if (data.eyeMoveRight > 1) {
console.log("right");
robot.moveMouse(mouse.x += cm, mouse.y);
stopcmr = setTimeout(cmr, 250);
}
if (data.blinkStrength > 40) {
console.log("stop")
clearTimeout(stopcmr);
}
}
cmr();
～
}
```

```
const realtimeModeCB_dev1 = data => {

var mouse = robot.getMousePos();
let cm = 2;
let date_now = Date.now();
var stopcmr;

var cmr = function() {
robot.moveMouse(mouse.x += cm, mouse.y);
stopcmr =setTimeout(cmr, 250);
};

var csr = function() {
clearTimeout(stopcmr);
};

if (data.eyeMoveRight > 1) {
cmr();
console.log("Right");
}

if (data.blinkStrength > 40) {
csr();
console.log("stop");
}
～
｝
```

[dodox86]

clearTimeoutを使用しての旧コードのご提示、ありがとうございました。実機で未確認のコードですが、回答に示してみましたのでご覧になってみてください。

Answer 1

視線移動を検知した時にマウスカーソルが動き続け、ループ中も瞬きを検出できるようにはなったのですが、瞬きを検知しても停止せずに動き続けてしまう状態です。

現状のコードですと、瞬きの検知後でもsetTimeoutで登録したタイムアウト時の関数が呼ばれてしまい、マウスは依然として右へ移動してしまうと思います。瞬きを検知したらsetTimeoutで始動したタイマーをキャンセルすれば、ご要望の動きになりませんでしょうか。

修正案としてのコードを以下に示してみます。ただ、私自身はJINS MEMEを試せる環境に無いので、動作確認はできていません。
※JINS MEMEに関しては「外観は普通のメガネで、アプリを造れるウェアラブルデバイスとして面白いのではないか。」と発売当初から興味を抱き、情報をあたっていてはみたものの、実機には触れて居ない状況です。そんな訳で推測での回答すみません。

// リアルタイムモードを処理する部分のスコープ外で宣言
var tid = null;

//リアルタイムモードを処理する部分
const realtimeModeCB_dev1 = data => {

  var mouse = robot.getMousePos();
  let right = false;
  let date_now = Date.now();

  var cmr = function() {
    robot.moveMouse(mouse.x += cm, mouse.y);
    tid = setTimeout(cmr, 250);
  };

  if (data.eyeMoveRight > 1) {
    right = true;
    console.log("Right");
  }

  if (data.blinkStrength > 40) {
    // 瞬きを検知
    console.log("stop")
    right = false;
  }

  if (right == true) {
    // 引き続き右へ移動中
    cmr();
  } else {
    if (tid != null) {
      // 瞬きを検知、かつタイマーセット済みであればキャンセル
      clearTimeout(tid);
      tid = null;
    }
  }

～

}

Comments

[erua]

ご回答いただきありがとうございます。
修正案として頂いたコードを試してみたところ、マウスが1度動いたら止まるという単発処理になっていました。
そこでコードを以下のようにし、コンソールにデータ出力を行ってみました。
```
if (right == true) {
// 引き続き右へ移動中
console.log(right)
cmr();
} else if (tid != null) {
// 瞬きを検知、かつタイマーセット済みであればキャンセル
console.log("clear")
clearTimeout(tid);
tid = null;
}
```
すると
Right
true
clear
と出力され、右への視線検知とともにタイマーキャンセルが行われていることが分かりました。
現在解決法を模索し、試しているのですが、自分の知識が浅いためなかなか解決できない状況です。
重ね重ね申し訳ありませんが、こちらについてもご教示いただけると幸いです。

[dodox86]

やはり、私の修正では足りなかったようです。すみません。質問なのですが、「リアルタイムモード」の部分と言うのは、
setTimeoutによる実行に限らず、何度も何度もずっと呼ばれている部分と思ってよいでしょうか。SDKのオリジナルのコードは読みましたが、いまだ、実際の動きがイメージつかめていないところがあります。

[dodox86]

マウス移動と停止の条件をもう少し洗い出します。
(1) 視線を右に向ける-->マウス移動開始
(2) 視線が右に向いたまま-->マウス移動続行
(3) マウス移動中で、瞬きしたことを検出していない-->マウス移動続行。
(4) マウス移動中で、瞬きしたことを検出した-->マウス移動停止。
この時点で視線が右に向いたままだと、またすぐにマウス移動を開始してしまいますが、それはきっと不本意なものですよね。瞬きによるマウス移動停止後、しばらくは視線を無視するなどが必要な気もします。

[erua]

返信遅くなってしまい申し訳ありません。
ご返信ありがとうございます。
リアルタイムモードの部分はJINSMEMEとPC接続後はずっと処理が行われている部分だと思います。
単発処理で試していた時に不本意な移動等があったのでdodox86様が仰るように、他の処理を受け付けない時間を設ける等追加し、試してみたいと思います。

[dodox86]

そうですね。私の方で実機で試せない以上、私が書いてみたお試しのコードを提示しても混乱させてしまうかと思いますので、控えようと思います。方法として助言できることとしては、「状態」を意識し、管理する、ということです。先のコメントと少し重なりますが、
1: 初期状態(何もしていない)
2: 初期状態で、視線を右向けた瞬間から、「マウス移動」状態へ遷移
3: 「マウス移動」状態から、瞬きを検出するまではずっと「マウス移動」状態をキープ
4: 「マウス移動」状態であるときに瞬きを検出したら、「マウス停止」状態へ遷移。
この状態で、次に視線を右に向けたことを検出するタイミングをいつにするか、が課題だと思います。
具体的にどうコードを書くというよりは、考え方の問題になります。

> 返信遅くなってしまい申し訳ありません。
いえいえ、特に急いで返信を求めているわけではないので、ご自分のタイミングでご対応ください。
ただ、最終的にはなんらかの形で質問を閉じていただけますと良いです。

[erua]

何度もご教示いただきありがとうございます。
ご助言いただいたことを意識して問題解決できるように努めます。
改めましてありがとうございました。

[erua]

修正案として頂いたコードを以下のように少し順序を変えてみた所マウスカーソルが止まるようになりました。
```
var tid = null;
//リアルタイムモードを処理する部分
const realtimeModeCB_dev1 = data => {

var mouse = robot.getMousePos();
let right = false;
let date_now = Date.now();

var cmr = function() {
robot.moveMouse(mouse.x += cm, mouse.y);
tid = setTimeout(cmr, 250);
};

if (data.eyeMoveRight > 1) {
right = true;
console.log("Right");
}

if (right == true) {
// 引き続き右へ移動中
console.log(right)
cmr();
}

if (data.blinkStrength > 40) {
// 瞬きを検知
console.log("stop")
right = false;
if (tid != null) {
// 瞬きを検知、かつタイマーセット済みであればキャンセル
console.log("clear")
clearTimeout(tid);
tid = null;
}
}
～
}
```

[dodox86]

実現できましたか！　おめでとうございます。:-) 　コードをご提示してのご報告も、ありがとうございます。

[erua]

dodox86様のおかげさまでようやく解決することが出来ました。
ありがとうございました。