1

Estou a tentar controlar o brilho de um led usando um raspberry pi3 e uma interface web desenvolvida por mim. Tenho uma área de texto com dois botões, um que aumenta o valor e outro que diminui o valor (o valor varia entre 0 e 10), o que estou a tentar fazer é sempre que carrego no botão de aumentar ou diminuir enviar o valor para um ficherio php que por sua vez passa o valor para o raspberry. Tenho também uma imagem que simula a luz ligada ou desligada e queria fazer uma condição para que caso a luz esteja desligada esse valor não seja enviado, e mesmo que seja feito refresh da página o estado se mantenha. Alguém sabe como fazer, já estou a usar XMLHttpRequest para abrir o ficheiro php mas não sei como transferir a variável que está no php ($valor).

Página web:

Código php:

<?php
 system ( "gpio mode 1 pwm" );
 system ( "gpio pwm 1 $valor" );
 sleep(5);
 system ( "gpio pwm 1 0" );

?>

Código HTML

<!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>

2
  • Você precisa atualizar a variável $valor no arquivo PHP todas as vezes que chamar a função mais1z1 ()? Não precisa atualizar também quando chamar a função menos1z1 ()? Commented 20/11/2017 às 20:25
  • Preciso de fazer a actualização nas duas funções, mas para testar estou a tentar primeiro so com uma. Commented 22/11/2017 às 11:02

2 Respostas 2

1

Você pode enviar dados para o script em php, mais ou menos assim:

$('#aumentar').click(function(){

    var a= new XMLHttpRequest();

    //dados a serem enviados (input com name textgol)
    var dados =  '?textgol='+ $("input[name='textgol']").val();
    a.open("GET", "luz.php" + dados); 

    a.onreadystatechange=function(){

      if(a.readyState==4){ if(a.status ==200){
      } else alert ("http error"); } }

      a.send();
    });

  });

Supondo que você esteja incluindo o jquery (já que você está usando $). No caso acima os dados são enviados através do metodo get do http. Esses dados podem ser recebidos no servidor assim:

<?php
//para poder persistir informações entre requisições diferentes
session_start();

//alterar o valor (escala 0 a 10)
if(isset($_GET['textgol'])){
    $_SESSION['textgol'] = $_GET['textgol'];
    //faça alguma coisa .... extra
}

//condição para verificar se é um refresh de pagina
//e retornar um valor previamente armazenado em $_SESSION
if(isset($_GET['refresh'])){
    if(isset($_SESSION['textgol'])){
        echo $_SESSION['textgol'];
    }
}
3
  • Para poder imprimir o valor no php usando por exemplo o comando system() qual é a variável que tem o valor guardado que foi recebido do html? É $textgol, ficando system ("gpio pwm 1 $textgoal") imprimindo assim no pino 1 do gpio o valor de textgol? Commented 22/11/2017 às 12:01
  • Sim, seria $_SESSION['textgol']
    – Juven_v
    Commented 22/11/2017 às 22:03
  • Quando carrego no botão (+) ou no botão (-) da página html recebo a menssagem ( http error). Tenho o ficheiro php configurado como sugeriu e dentro do primeiro iftenho o comando system("gpio pwm 1 $_SESSION['textgol']") para poder imprimir o valor que esta no campo de texto da página html no pino 1, mas obtenho o erro que mencionei e na acontece, se substituir $_SESSION['textgol'] por um número, por exemplo 500, não obtenho erro nenhum e o led que esta ligado ao pino 1 acende. Não existe outra forma de passar o valor para o comando system sem ser com $_SESSION['textgol']? Commented 27/11/2017 às 12:17
1

Estoua usar o seguinte código php para tentar imprimir o valor recebido numa função, e sempre que na função system ( "gpio pwm 1 $_SESSION['textgol1']" ); altero o valor para a variávél $_SESSION['textgol1'] a página html responde com http error, se colocar um número, por exemplo 500, funciona correctamente, alguém sabe qual o problema?

Código html:

<!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.textgol1.value);
              if (dec>=10){
                   zona1.textgol1.value=10;
              }else{
                   zona1.textgol1.value=dec+1;
              }
        }
        function menos1z1 () {
              var dec = parseInt(zona1.textgol1.value);
              if (dec<=0){
                   zona1.textgol1.value=0;
              }else{
                   zona1.textgol1.value=dec-1;
              }
        }        
        </script>       
		<script language="Javascript">  <!-- regulação de luminusidade de 0 a 10 -->
        function mais1z2 () {
							 var dec = parseInt(zona2.textgol.value);
              if (dec>=10){
				   zona2.textgol.value=10;
              }else{
				   zona2.textgol.value=dec+1;
              }
        }
        function menos1z2 () {
			  var dec = parseInt(zona2.textgol.value);
              if (dec<=0){
				   zona2.textgol.value=0;
              }else{
				   zona2.textgol.value=dec-1;
              }
        }        
        </script>      
		<script language="Javascript">  <!-- regulação de luminusidade de 0 a 10 -->
        function mais1z3 () {
							 var dec = parseInt(zona3.textgol.value);
              if (dec>=10){
				   zona3.textgol.value=10;
              }else{
				   zona3.textgol.value=dec+1;
              }
        }
        function menos1z3 () {
			  var dec = parseInt(zona3.textgol.value);
              if (dec<=0){
				   zona3.textgol.value=0;
              }else{
				   zona3.textgol.value=dec-1;
              }
        }        
        </script>   
		<script language="Javascript">  <!-- regulação de luminusidade de 0 a 10 -->
        function mais1z4 () {
							 var dec = parseInt(zona4.textgol.value);
              if (dec>=10){
				   zona4.textgol.value=10;
              }else{
				   zona4.textgol.value=dec+1;
              }
        }
        function menos1z4 () {
			  var dec = parseInt(zona4.textgol.value);
              if (dec<=0){
				   zona4.textgol.value=0;
              }else{
				   zona4.textgol.value=dec-1;
              }
        }        
        </script>     		
		
	</head>
	<body>

  
		

		<article>  
		<div id="luz">
			<h1>Controlo de Luz</h1>
  
  <p>ZONA 1.</p>
  
  
  
  
 
  
		<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="botaomais" value='+' onclick='mais1z1()'>
			<input type="text" size="5" name="textgol1"  value="0">
			<input type="button" id="botaomenos" 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>
		
		
		 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">// <![CDATA[

$(document).ready(function() {

$('#botaomais').click(function(){

var a= new XMLHttpRequest();
var dados= '?textgol1='+ $("input[name='textgol1']").val();

a.open("GET", "luz.php" + dados); 

a.onreadystatechange=function(){

if(a.readyState==4){ if(a.status ==200){

 } else alert ("http error"); } }

a.send();

});

});


$(document).ready(function() {

$('#botaomenos').click(function(){

var a= new XMLHttpRequest();
var dados =  '?textgol='+ $("input[name='textgol']").val();

a.open("GET", "luz.php" + dados); 

a.onreadystatechange=function(){

if(a.readyState==4){ if(a.status ==200){

 } else alert ("http error"); } }

a.send();

});

});

</script>

		<p> ZONA 2.</p>
		<img id="myImage2" onclick="changeImage2()" src="pic_bulboff.gif" width="50" height="90">
		<center>  
		<form name="zona2">
        <input type="button" name="botaomais" value='+' onclick='mais1z2()'>
        <input type="text" size="5" name="textgol" value="0">
		<input type="button" name="botaomenos" value='-' onclick='menos1z2()'>
        </form>
		</center>

		

<script>
function changeImage2() {
    var image = document.getElementById('myImage2');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff2.gif";
    } else {
        image.src = "pic_bulbon2.gif";
    }
}
</script>
<p>ZONA 3.</p>
<img id="myImage3" onclick="changeImage3()" src="pic_bulboff.gif" width="50" height="90">
<center>  
		<form name="zona3">
        <input type="button" name="botaomais" value='+' onclick='mais1z3()'>
        <input type="text" size="5" name="textgol" value="0">
		<input type="button" name="botaomenos" value='-' onclick='menos1z3()'>
        </form>
</center>


<script>
function changeImage3() {
    var image = document.getElementById('myImage3');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff2.gif";
    } else {
        image.src = "pic_bulbon2.gif";
    }
}
</script>
  
  <p>ZONA 4.</p>
  <img id="myImage4" onclick="changeImage4()" src="pic_bulboff.gif" width="50" height="90">
 <center>  
		<form name="zona4">
        <input type="button" name="botaomais" value='+' onclick='mais1z4()'>
        <input type="text" size="5" name="textgol" value="0">
		<input type="button" name="botaomenos" value='-' onclick='menos1z4()'>
        </form>
</center> 


<script>
function changeImage4() {
    var image = document.getElementById('myImage4');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff2.gif";
    } else {
        image.src = "pic_bulbon2.gif";
    }
}
</script>
 
		<a href="javascript:window.history.go(-1)">Voltar</a>
		
		

</div>

	</body>
</html>

Código php:

 <?php

session_start();



if(isset($_GET['textgol1'])){
    $_SESSION['textgol1'] = $_GET['textgol1']*102.4;
   
    system ( "gpio mode 1 pwm" );
     system ( "gpio pwm 1 $_SESSION['textgol1']" );
     
}


if(isset($_GET['refresh'])){
    if(isset($_SESSION['textgol1'])){
        echo $_SESSION['textgol1'];
    }
}

     
?>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .