How to add web buttons to reconbot

[Bfzgwg4]

Im making a project using a remote controlled spotlight that I will mount on top of my truck with camera. When Im finished I will be able to control said light from inside truck using my smartphone with added ability of turning on spotlight and see where Im shining the light. Im trying to use the reconbot code to do this. I need to know how to add a on/off button on the web control panel that will turn light on and off via grove relay board I added.
Im not looking for a direct answer. Just point me in the direction. I want to learn how this web stuff works lol

[HipsterBrown]

Hello!

If you're referring to this Reconbot project with SparkFun, definitely check out the GitHub repo. A very relevant part for what you're trying to do is located in the app/index.html file, where it demonstrates how to add a click handler to a button on the web app.

[rwaldron]

As @HipsterBrown said, most of what you're looking for is already in the code base, just needs to be refactored...

const spotlight = document.getElementById("spotlight-toggle");
spotlight.addEventListener("click", function(event) {
  spotlight.dataset.state = spotlight.dataset.state === "on" ? "off" : "on"; 
  socket.emit("remote-control", { spotlight: spotlight.dataset.state });
});

Then in index.js, change this: https://github.com/bocoup/j5ik-reconbot-tessel-edition/blob/master/index.js#L60-L62 to this:

const relay = new five.Relay("A7");
connection.on("remote-control", data => {
  if (data.axis) {
    rover.update(data.axis);
  } 

  if (data.spotlight) {
    if (data.spotlight === "on") {
      relay.close();
    } else {
      relay.open();
    }
  }
});