Control RS485 Relays from a web browser

 
 

This project pulls together a number of different projects on this site to enable control of relays from a web browser via a raspberry pi and RS485 network.


For this project you will need the following


                1.    A Raspberry pi with Raspbian installed

                2.    An Isolated RS485/422 adapter

                3.    A number of RS485 relay boards in this project I use 2


The Hardware


Connect the Isolated RS485 adapter up to the raspberry pi and follow the instructions on that page to enable the onboard uart now connect the RS485 slaves to the isolated RS485 board via two wires and terminate the network at the furthest node.


The Software


Next we need to download and install Webiopi instructions can be found here


As the first step we need to change is the config file located at /etc/webiopi/config


sudo nano /etc/webiopi/config


Firstly we need to configure the serial port to 19.2 KBaud by changing it to this line


[DEVICES]

serial0 = Serial device:ttyAMA0 baudrate:19200


Copy and paste the file below into an editor and save it as  Index.html and put this at the root location for webiopi. Or configure the line in the config file to point to the location.


Now  reboot your raspberry pi for the changes to take effect and start webiopi by the command:

$ sudo /etc/init.d/webiopi start

Now open a browser and go to http://localhost:8000/ on the raspberry pi you should be asked for a username and password these are


username: webiopi

password: raspberry


You should see a web page like this

that enables you to control the relays.


To log in on another browser on your

network at http://raspberrypi:8000/


Replace raspberrypi with your IP address



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" /> 

        <title>RS485 Relay Control</title>

        <script type="text/javascript" src="/webiopi.js"></script>

        <script type="text/javascript">

        webiopi().ready(function() {



                                $("#R1ON").mousedown(function(event){

                                        webiopi().Serial("serial0").write("$24ON1");

                                        return false;

                                });


                                $("#R1OFF").mousedown(function(event){

                                        webiopi().Serial("serial0").write("$24OF1");

                                        return false;

                                });


                                $("#R2ON").mousedown(function(event){

                                        webiopi().Serial("serial0").write("$16ON1");

                                        return false;

                                });


                                $("#R2OFF").mousedown(function(event){

                                        webiopi().Serial("serial0").write("$16OF1");

                                        return false;

                                });


                $("#inputText").keyup(function(event){

                    if(event.keyCode == 13){

                        sendData();

                    }

                });

                $.get("/devices/*", function(data) {

                        var devices = $("#devices");

                        var added = false;

                        for (i in data) {

                                if (data[i].type=="Serial") {

                                        added = true;

                                        devices.append($("<option>" + data[i].name + "</option>"))

                                }

                        }

                        if (added) {

                                readData();

                        }

                });

        });

        

        function readData() {

                webiopi().Serial($("#devices").val()).read(function(data) {

                        if (data.length > 0) {

                                var d = $("#output").text() + data;

                                $("#output").text(d);

                        }

                });

                setTimeout(readData, 500);

        }

        

        function sendData() {

                var data = $("#inputText").val();

                webiopi().Serial($("#devices").val()).write(data);

                $("#inputText").val("");

        }

        

        function deviceChanged() {

                $("#output").text("");

        }

        

        </script>

        <style type="text/css">

                #inputText {

                        width: 550px;

                }

        </style>

</head>

<body>

<h1>RS485 control</h1>

<p>

</p>

</p>

</p>

<p>

<span> Relay 1</span>   <input id="R1ON" bgcolor ="red" type="button" value="ON"/><input id="R1OFF" type="button" value="OFF"/>

</p>

<p>

<span> Relay 2</span>   <input id="R2ON" type="button" value="ON"/><input id="R2OFF" type="button" value="OFF"/>

</p>

</body>

</html>


         

Control relays via the web via a raspberry pi and Webiopi