Using Jacdac to pause / play video on P5JS

I’m trying to use Jacdac buttons to pause and play video on P5JS.

At first, I used just one button to pause and play the video, here’s the code:

let vid;
function setup() {
  noCanvas();
  vid = createVideo('mountain.mp4');
  vid.size(windowWidth, windowHeight);
  jacdac.events.button.down(() => vid.loop());
  jacdac.events.button.up(() => vid.pause());
}

Here is the link to the video that shows the process:

However, when I was trying to use one button to play the video and add another button to pause the video, I realized that I didn’t really know how to code with multiple Jacdac buttons on P5JS.

Luckily, I received help from Rudi, the Professor at my University and also my project mentor, who went to ask Peli about how to code with multiple buttons. The answer is that we will need to know the ids of the buttons we will be using, like:

jacdac.events.button.down((ev) => {
                          if (ev.service.device.shortId == "AB12")
                    vid.loop()
             });

So how can we find the id for one specific button? The answer is that we can go to the website https://microsoft.github.io/jacdac-docs/, we can see that there will be a “connect” bar that appears on the top right of the page (see the picture below)

Then what we need to do is to connect our Jacdac with our computer by using a web USB, and then click on the “connect” bar, you will see that your Jacdac device will be connected. Then we click on the “Device Dashboard” bar (also on the top right of the page), where you will be led to another page.

As the picture above shows, you can see the id of your Jacdac buttons. For me, because I connected two buttons, I will have two ids. With these ids, you will be able to code freely with multiple buttons on P5JS.

Here’s my example:

And here’s the code:

let vid;

function setup() {
  noCanvas();
  vid = createVideo('mountain.mp4');
  vid.size(windowWidth, windowHeight);
  jacdac.events.button.down((ev) => { 
    if (ev.service.device.shortId == "JU10" )
      vid.loop()});
  jacdac.events.button.up((ev) => { 
    if (ev.service.device.shortId == "SE83" )
      vid.pause()});
  }
1 Like

I’m glad that this got you unstucked and than you for publishing the guide… but obviously it’s not the greatest way to go about because it will break as soon as you swap buttons. Needs more thinking.

1 Like