HTMLのButtonが押されている間だけ動かしたい



  • HTMLのButtonが押されている間だけ動かしたくて下記サンプルをまねたのですが、'touchstart mousedown'の部分が'click'と同じ動作しかしません。何かおまじないが足りないのでしょうか?

    obniz.onconnect = async function () {
    var motorA = obniz.wired("DCMotor", {forward:0, back:1});
    motorA.power(40);

    $("#buttonA").on('touchstart mousedown', function(){
    motorA.move(true); //ボタンが押されたら動かす
    })
    $("#buttonA").on('touchend mouseup', function(){
    motorA.stop(); //ボタンが離されたら止める
    })
    }


  • administrators

    @Google-Homer さん

    この部分だけを見ると、プログラムとしてはあっているように見えます。
    clickと同じ動作というのは、一瞬だけモーターが動くということでしょうか。

    もしよろしければ、使用したブラウザと、プログラム全体を教えていただけないでしょうか。
    公開したくないプログラムの場合、 info@obniz.io に送ってもらっても大丈夫です。



  • 下記でlfのButtonを押している間POWER_LEDは正しく光り続けるのですが、text表示やServo部分はclick相当の動作しかしません。何か制約があるのですかね?

    $("#lf").on('touchstart mousedown', async ()=>{
    _ai.say('押してる');
    $("#Angle").text('Angle:'+ANGLE);
    POWER_LED.on();
    ANGLE = ANGLE-1;if ( ANGLE < 0 ) ANGLE = 0;
    $("#Angle").text('Angle:'+ANGLE);
    $("#Freq").text('Freq:');
    $("#Name").text('Name:');
    VC_Servo.angle(ANGLE);
    await obniz.wait(500);
    })
    $("#lf").on('touchend mouseup',async ()=>{
    POWER_LED.off();
    })


  • administrators

    @Google-Homer さん

    clickと同じ動作をする、の意味が理解できました。

    $("#lf").on('touchstart mousedown', async ()=>{ 
    ...
    }
    

    このように書いた時、ボタンが押された時に動作をします。
    あくまでこれは1回で、ボタンが離された状態から押された状態になるときに1回だけ動作します。

    $("#lf").on('touchend mouseup', async ()=>{ 
    ...
    }
    

    こちらのtouchend mouseupの場合は逆に、ボタンが押された状態から話された状態になるときに1回だけ動作します。

    どちらも1回ずつの動作になります。
    押されてる間、その部分を何度も実行する関数では無いです。

    LEDの点灯はあくまでつける/消す動作なので、この1回ずつの動作で問題ないんですが、@Google-Homer さんがやりたいのは押してる間angleを変え続けるだと思うので、そのままだとうまくいかないと思います。

    何度も繰り返し実行したい場合は、少々工夫が必要です。
    例えば、下記のようにやればできると思います。

      var isPressed = false;
      $("#lf").on('touchstart mousedown', async ()=>{ 
      
        isPressed = true;
        while(isPressed){  // isPressedがtrueの間繰り返します
          ANGLE = ANGLE-1;if ( ANGLE < 0 ) ANGLE = 0;
          $("#Angle").text('Angle:'+ANGLE);
          await obniz.wait(100);   //100msごとにループします(必須:消すとブラウザが固まります)
        }
      });
    
      $("#lf").on('touchend mouseup', async ()=>{ 
        isPressed = false; // isPressedをfalseにすることで、上のwhileループから抜け出します
      });
    

    await obniz.wait(100);の100は繰り返したい間隔によって設定していただければと思いますが、数字が0だとしても入れる必要があります。
    この行を消してしまうと、ブラウザが固まりますのでご注意ください。



  • キッズプロジェクトのラジコンの例を見てButtonを押している間、連続でイベントが発生し連続でONしているものと勘違いしていました。正しくは、イベントはButtonが押し込まれた時に1回発生し、LEDをONにしているのですね。そしてLEDはイベントが終了しても自力でONし続け、押し込んだままのButtonが離された時に新しいイベントが1回発生しLEDをOFFにしているのですね。
    提示いただいたサンプル方式で、期待の動作できました、ありがとうございました。


 

Recent Projects

  • @nak435 かしこまりました。よろしくお願いします。

    read more
  • @Yuki-Sato さん、

    外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    今週末に確認しますので、お待ちください。

    read more
  • @nak435 時間がかかってすいません、

    なんとか3.3vをgndにつないでFlick Largeを動かしたかったのですが、うまく動かすことができなかったです。
    3.3vをgndを繋がずに接続するというのはライブラリで推奨して伝えることは難しいと思ってます。

    Flick LargeでなくFlick Hatの方で、外部の3.3vを使うとはいえ普通にvccやgndを供給して問題なくうごくのであれば、弊社での動作確認後Flick Hatのライブラリとして公開できればと思っているのですがいかがでしょう。

    よろしくお願い致します。

    read more
  • @nak435 ありがとうございます。
    接続は3.3vのgnd以外同じでした。
    エラーはそのせいかもしれませんが、しかし電気的にはgndを繋がない場合3.3vとしてうまく供給できないはずなのでそこが不思議です。

    教えていただいたプログラムの部分を修正して試してみたいと思います。
    また少し時間がかかりそうなのですが、早めに試したいと思います。

    引き続きよろしくお願い致します。

    read more