obnizのフォーラムは新しいシステムに移行しております。

新しいフォーラムはこちらになります

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(); //ボタンが離されたら止める
    })
    }



  • @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();
    })



  • @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にしているのですね。
    提示いただいたサンプル方式で、期待の動作できました、ありがとうございました。



SUGGESTED TOPICS