1
I am trying to control the brightness of an led using a Raspberry Pi3 and a web interface developed by me. I have a text area with two buttons, one that increases the value and another that decreases the value (the value varies between 0 and 10), what I’m trying to do is whenever I press the increase or decrease button send the value to a php file which in turn passes the value to Raspberry. I also have an image that simulates the light on or off and wanted to make a condition so that if the light is off this value is not sent, and even if the page refresh the status is maintained. Someone knows how to do it, I’m already using Xmlhttprequest to open the php file but I don’t know how to transfer the variable that is in php ($value).
Php code:
<?php
system ( "gpio mode 1 pwm" );
system ( "gpio pwm 1 $valor" );
sleep(5);
system ( "gpio pwm 1 0" );
?>
HTML code
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Framset - Como usar frames em sites HTML">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="Javascript" > <!-- regulação de luminusidade de 0 a 10 -->
function mais1z1 () {
var dec = parseInt(zona1.textgol.value);
if (dec>=10){
zona1.textgol.value=10;
$valor=102,4*10;
}else{
zona1.textgol.value=dec+1;
$valor=102,4*dec+1;
}
}
function menos1z1 () {
var dec = parseInt(zona1.textgol.value);
if (dec<=0){
zona1.textgol.value=0;
}else{
zona1.textgol.value=dec-1;
}
}
</head>
<body>
<article>
<div id="luz">
<h1>Controlo de Luz</h1>
ZONA 1.
<script type="text/javascript">
$(document).ready(function() {
$('#aumentar').click(function(){
var a= new XMLHttpRequest();
a.open("GET", "luz.php"); a.onreadystatechange=function(){
if(a.readyState==4){ if(a.status ==200){
} else alert ("http error"); } }
a.send();
});
});
$(document).ready(function() {
$('#diminuir').click(function(){
var a= new XMLHttpRequest();
a.open("GET", "luz.php"); a.onreadystatechange=function(){
if(a.readyState==4){ if(a.status ==200){
} else alert ("http error"); } }
a.send();
});
});
</script>
<img id="myImage" onclick="changeImage1()" src="pic_bulboff.gif" width="50" height="90">
<center>
<form name="zona1" action="file:///media/tiago/BA1C46441C45FBBF/Users/Tiago/Dropbox/Pesta/Control Center/form.cgi" method="POST"> <!-- passagem de dados para codigo em c -->
<input type="button" id="aumentar" value='+' onclick='mais1z1()'>
<input type="text" size="5" name="textgol" value="0">
<input type="button" id="diminuir" value='-' onclick='menos1z1()'>
</form>
</center>
<script>
function changeImage1() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
<!-- inserir variável para definir estado OFF -->
} else {
image.src = "pic_bulbon.gif";
<!-- inserir variável para definir estado ON -->
}
}
</script>
<a href="javascript:window.history.go(-1)">Voltar</a>
</div>
</body>
</html>
You need to update the variable
$valorin the PHP file every time you call the functionmais1z1 ()? No need to update also when calling the functionmenos1z1 ()?– Laércio Lopes
I need to upgrade both functions, but to test I’m trying first with one.
– Tiago Meireles