Using arduino to change webpage

Question

I'm trying to make a video on a webpage change by clicking on a physical button. The button is connected to an Arduino and I can get information from it with Johnny Five, yet I'm not able to make that button press switch between 2 video's on the webpage to automatically display and play. I want to make this happen with either Java, Johnny-Five or in the Arduino IDE. Can anyone help me with this?

The code I used to blink a led with a button press, through Johnny-Five:

var five = require('johnny-five');
var board = new five.Board();
board.on('ready', function() {
  var btn = new five.Button(2); // pin 5
  board.repl.inject({
    button: btn
  });
  btn.on("down", function() {
    console.log("pressed button");
  });
});

Answer 1

You should be able to use something like Johnny-Five or straight up node serialport on the server side, but also make your node script a web socket server using something like node websockets or socket.io.

If it's easier you can try p5.js and it's p5.serialport library. It already includes a pre-built executable you can just run and point to your Arduino serial port and example html pages listening for messages.

Remember that you can only have a single connection to your serial port so close Serial Monitor when you plan to access the Arduino from JS.

Answer 2

you would need some sort of communication btw your arduino and the page. There are several way to do so depending on the setup of your installation

Are you running the server that serve them as well ? is it local / remote ?

The easy route would be to do all in one node app, serving the page and the serial code on the same app.

this directory contain some minimal code to setup a websocket server to j5 and communicate with it: https://github.com/catsAndSolenoids/yldWorkshop/tree/master/socketIoExample

you'll need to modify it so it works the other way around (in this one you control the "bot" via a webpage)