Hardware Reference
In-Depth Information
Building a graphical interface to control
the relays
Although it's good to use commands directly inside your browser to test the project, it's not
so convenient to actually use the project for daily use. That's why we are going to build a
dedicated interface so that you can control your relays from your computer, just by clicking
on some buttons.
Since we'll use web technologies to do so, this interface will also be accessible from your
mobile phone or tablet, as long as you are connected to the same Wi-Fi network.
Just as seen in the first chapter of this topic, we are going to use a mix of HTML, CSS,
JavaScript, and PHP to build the interface. Let's first see the important part of the HTML
file. It is basically composed of several blocks, each corresponding to a relay. For each re-
lay, there are two buttons: one to set the relay on and one to set it off. The following is the
code which is responsible for that part:
<div class="relayBlock"><span class="relayTitle">Relay
1</span>
<button class="btn btn-block btn-lg btn-primary"
type="button"id="1" onClick="relayClick(this.id)">On</button>
<button class="btn btn-block btn-lg btn-danger"
type="button"id="2"
onClick="relayClick(this.id)">Off</button>
</div>
To actually make these buttons do something useful, we need to link them to some
JavaScript code. This is done inside the JavaScript file. We basically get the ID of the but-
ton that was clicked to send the correct command to the system. For example, the button
with ID
1
will be linked to the relay connected on pin number 6 and will turn this relay on:
if (clicked_id == "1"){
$.get( "update_relay.php", {
command: "/digital/6/1"} );
}
The same is done for all relays of the system. Of course, depending on the number of relays
you have and your hardware configuration, you will need to modify the code in this file.
