l'electrique
Posts: 6
Joined: Fri Aug 03, 2018 1:23 am
Location: Saint Paul, MN
Contact: Website

"get" http code example - roadblock

Sun Aug 05, 2018 5:48 pm

Greetings,
I am trying to Frankenstein other people's work and come up with what I need for my website. PiRelay seems to never fail to operate my relays, but the interface is on an Android device. https://pirelay.jasonfindlay.com/ What I want are controls embedded into a web page that will do the same relay control as the android app. If I make two separate pages I can get the relay to toggle off and on with the 1st button (can't reach the author). What doesn't work is on and off from the same page. The off button never seems to work when scripted below the on button.
https://opensource.com/article/17/3/ope ... spberry-pi

In the end I need three pairs of buttons stacked onto one another (not sure how it's done) to control 3 relays for off and on.
relay1 on relay1 off

relay2 on relay2 off

relay3 on relay3 off

Thanks

PingoBags
Posts: 47
Joined: Mon Nov 06, 2017 10:53 pm
Location: NS, Canada

Re: "get" http code example - roadblock

Wed Aug 15, 2018 1:21 am

I've only played with the relay through a webpage once.
All I did was read the current value of the pin and set the opposite value every time I clicked the button.
In my test code, I used gpio pin 18, 23 and 24. Click the button, relay turns on, click it again, it turns off.
My full sample code. My relay is active low.

Code: Select all

 <html>
 <head>
 <meta name="viewport" content="width=device-width" />
 
 </head>
         <body>
         <form method="get" action="pi.php">  
         
         <br><input type="submit" value="GPIO 18" name="Pin18" style="height:18px; width:90px"><br><br><input type="submit" value="GPIO 23" name="Pin23" style="height:18px; width:90px"><br><br>
         <input type="submit" value="GPIO 24" name="Pin24" style="height:18px; width:90px">
                 
         </form>
         
         <?php

         $Pins = array("18", "23", "24");
         foreach ($Pins as &$Pin)
         {
            shell_exec("gpio -g mode " . $Pin . " out");//Set direction
             
            if(isset($_GET["Pin" . $Pin]))
            {
                 $Val = (trim(shell_exec("gpio -g read ". $Pin)) == "1");//Gets current state and stores it as a boolean
                 shell_exec("gpio -g write " . $Pin . ($Val ? " 0" : " 1")); //Sets new state
                 echo "Pin " . $Pin . ($Val ? " On" : " Off");//Print current state
            }
         }
         ?>
         </body>
 </html>

l'electrique
Posts: 6
Joined: Fri Aug 03, 2018 1:23 am
Location: Saint Paul, MN
Contact: Website

Re: "get" http code example - roadblock

Fri Aug 24, 2018 12:10 am

Thanks,
I should really try to get notifications when someone replies. I have been trying to do this on my own and got to the point (can't say why)
every action from my web page buttons triggers GPIO 22 only, but I can directly manipulate GPIO 4 and 17 if I just type the URL into Google search. I obviously don't know what I am doing. In theory it seems straightforward, but in reality I'm close to needing therapy and or a social life.
Any thoughts?

]<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="generator" content="openElement (1.57.9)" />
<title>tie in</title>
<meta name="keywords" content="internet remote control domino topple,raspberry pi computer projects,internet remote camera streaming,internet remote relay control,interactive web interface" />
<link id="openElement" rel="stylesheet" type="text/css" href="WEFiles/Css/v02/openElement.css?v=63629918412" />
<link id="siteFonts" rel="stylesheet" type="text/css" href="Files/Fonts/Fonts.css?v=63647328860" />
<link id="OEBase" rel="stylesheet" type="text/css" href="Copy(1)-Copy-Copy-tie%20in.css?v=50491101600" />
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="WEFiles/Css/ie7.css?v=63614031666" />
<![endif]-->
<script type="text/javascript">
var WEInfoPage = {"PHPVersion":"phpOK","OEVersion":"1-57-9","PagePath":"Copy(1)-Copy-Copy-tie in","Culture":"EN-US","LanguageCode":"EN-US","RelativePath":"","RenderMode":"Export","PageAssociatePath":"Copy(1)-Copy-Copy-tie in","EditorTexts":null};
</script>
<script type="text/javascript" src="WEFiles/Client/jQuery/1.10.2.js?v=63614031666"></script>
<script type="text/javascript" src="WEFiles/Client/jQuery/migrate.js?v=63614031666"></script>
<script type="text/javascript" src="WEFiles/Client/Common/oe.min.js?v=63629918394"></script>
</head>
<body class="" data-gl="{&quot;KeywordsHomeNotInherits&quot;:false}">
<form id="XForm" method="post" action="#"></form>
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1><p style="color:#808080">RELAYS OFF</p></h1>
<button type="button" onclick="loadDoc()">04</button>
</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "http://dominotopple.mywire.org/gpio.php?pin=7&status=0", true);
xhttp.send();
}
</script>

</body>

<body>
<div id="demo">
<h1></h1>
<button type="button" onclick="loadDoc()">17</button>
</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "http://dominotopple.mywire.org/gpio.php?pin=0&status=0", true);
xhttp.send();
}
</script>

</body>
<body>
<div id="demo">
<h1></h1>
<button type="button" onclick="loadDoc()">22</button>
</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "http://dominotopple.mywire.org/gpio.php?pin=3&status=0", true);
xhttp.send();
}
</script>

</body>


</html>
<div id="XBody" class="BaseDiv RWidth OEPageXbody OESK_XBody_Default" style="z-index:0">
<div class="OESZ OESZ_DivContent OESZG_XBody">
<div class="OESZ OESZ_XBodyContent OESZG_XBody OECT OECT_Content OECTAbs"></div>
<div class="OESZ OESZ_XBodyFooter OESZG_XBody OECT OECT_Footer OECTAbs"></div>
</div>
</div>
</body>
</html>
Last edited by l'electrique on Fri Aug 24, 2018 11:14 am, edited 1 time in total.

Heater
Posts: 10010
Joined: Tue Jul 17, 2012 3:02 pm

Re: "get" http code example - roadblock

Fri Aug 24, 2018 3:32 am

You have three functions in your source with the same name: loadDoc()

This will result in only one function existing called loadDoc()

You should just have a single definition of loadDoc() and pass it parameters for the pin number and status.

l'electrique
Posts: 6
Joined: Fri Aug 03, 2018 1:23 am
Location: Saint Paul, MN
Contact: Website

Re: "get" http code example - roadblock

Fri Aug 24, 2018 11:23 am

Thanks,
That makes sense, I will try tonight when I get home and try to (nest) the three functions under one load doc... I am trying to learn this on my own, what is frustrating is that I feel I am close, yet still far away when it doesn't work. You can probably tell I do lots of cutting and pasting. 8-)

l'electrique
Posts: 6
Joined: Fri Aug 03, 2018 1:23 am
Location: Saint Paul, MN
Contact: Website

Re: "get" http code example - roadblock

Fri Aug 24, 2018 11:10 pm

Okay,
I must still be missing something. If I refresh the page all my relays reset. I can't get buttons to do the same.
- Thanks for any and all help passed my way!

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>RELAYS OFF</h1>
<button type="button" onclick="loadDoc()">04</button>
</div>

<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "http://192.168.0.11/gpio.php?pin=7&status=0", true);
xhttp.send();
}
</script>

<div id="emo">
<h1></h1>
<button type="button" onclick="loadDoc()">17</button>
</div>

<script>
{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("emo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "http://192.168.0.11/gpio.php?pin=0&status=0", true);
xhttp.send();
}
</script>

<div id="mo">
<h1> </h1>
<button type="button" onclick="loadDoc()">22</button>
</div>

<script>

{
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("mo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "http://192.168.0.11/gpio.php?pin=3&status=0", true);
xhttp.send();
}

</script>

</body>





</html>

l'electrique
Posts: 6
Joined: Fri Aug 03, 2018 1:23 am
Location: Saint Paul, MN
Contact: Website

Re: "get" http code example - roadblock

Sat Aug 25, 2018 12:06 am

I think I got it !!!! This was a study in trial and error. W :? W unique doc numbers was the ticket and creating separate blocks of code on my page. Finding out openElement https://www.openelement.com/ is a useful vehicle for web design/development.

Heater
Posts: 10010
Joined: Tue Jul 17, 2012 3:02 pm

Re: "get" http code example - roadblock

Sat Aug 25, 2018 4:34 am

Glad you got it working.

You don not need Open Element for this kind of thing. It's not Free and Open Source software and the free version only runs on Windows so not much use really.

I use MS Visual Studio Code when I'm not using vim.

To help with styling I use the bootstrap CSS library https://getbootstrap.com/

To help with organizing the HTML and JS I use react.js https://reactjs.org/

Return to “General programming discussion”