Puck.js based counter on Web page

Posted on
  • I just had a question about how you'd go about making a Puck that connects to a Web Page, and makes a counter go up by 1 when pressed once, and down by 1 when pressed twice.

    The first step is detecting the difference between 1 and 2 presses. You'd have to upload some code to Puck.js with the Web IDE for this but Puck.js has a timer so it is pretty easy.

    As it happens there's a tutorial at http://www.espruino.com/Single+Button+Co­mbination+Lock which shows you how to count the number of button presses. Halfway through there's this:

    var lastPress = 0;
    // the number of button presses
    var pressCount = 0;
    // the timeout that happens one second after a button press
    var timeout;
    
    function onTimeout() {
     // -----------
     // Here you decide what you want to do with the number of button presses in pressCount
     // -----------
      timeout = undefined;
      pressCount = 0;
      console.log("Timeout!");
    }
    
    function onPress(timeDiff) {
      pressCount++;
      console.log(pressCount);
    
      // if we had a timeout from another button press, remove it
      if (timeout) clearTimeout(timeout);
      // one second after this press, run 'onTimeout'
      timeout = setTimeout(onTimeout, 500);
    }
    
    function buttonWatcher(e) {
      var timeDiff = e.time - lastPress;
      lastPress = e.time;
      if (timeDiff>0.1) onPress(timeDiff);
    }
    
    setWatch(buttonWatcher, BTN, {edge:"falling", repeat:true});
    

    I was also asked if there was a need to pair the Puck with the webpage each time it loads. The normal way of communicating with a webpage would be Web Bluetooth - but this does require pairing each time.

    However since we only want to send data from the Puck, we'll just use Bluetooth HID - this makes the Puck appear like a Bluetooth Keyboard so you pair with the operating system once and you're sorted.

    We'll just send a character for the number of times the button was pressed - so pressing twice would be the same as hitting the 2 key on your keyboard.

    Mashing the code above together with http://www.espruino.com/Puck.js+Keyboard­ you get:

    var kb = require("ble_hid_keyboard");
    NRF.setServices(undefined, { hid : kb.report });
    
    var lastPress = 0;
    // the number of button presses
    var pressCount = 0;
    // the timeout that happens one second after a button press
    var timeout;
    
    function onTimeout() {
      // reset counter
      timeout = undefined;
      var key = kb.KEY[1] + pressCount - 1;
      pressCount = 0;
      digitalPulse(LED3,1,10); // short blue pulse to say we're sending something
      // send key press
      kb.tap(key, 0, function() {
        digitalPulse(LED2,1,10); // short green pulse to say we're ok
      });
    }
    
    function onPress(timeDiff) {
      pressCount++;
      console.log(pressCount);
    
      // if we had a timeout from another button press, remove it
      if (timeout) clearTimeout(timeout);
      // one second after this press, run 'onTimeout'
      timeout = setTimeout(onTimeout, 500);
    }
    
    function buttonWatcher(e) {
      var timeDiff = e.time - lastPress;
      lastPress = e.time;
      if (timeDiff>0.1) onPress(timeDiff);
    }
    
    setWatch(buttonWatcher, BTN, {edge:"falling", repeat:true});
    

    Upload that code, disconnect, reconnect with your device, and you're sorted!

    Then in your webpage all you need is something using a keypress listener: https://developer.mozilla.org/en-US/docs­/Web/Events/keypress#Example

  • Esteemed Mr. Gordon thanks truly a lot from my heart for helping me and using you time for this. I have no word for thank You ...

    BR
    Sincerely

    Carlo

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Puck.js based counter on Web page

Posted by Avatar for Gordon @Gordon

Actions