Puck.js based counter on Web page

[gfwilliams]

Posted at 2018-10-03 by @gfwilliams

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+Combination+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

[espruino-discuss]

Posted at 2018-10-03 by ElanII

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