Salve, sto facendo un piccolo progetto di domotica con il raspberry pi che gestisce un piccolo server apache, da un client collegato alla stessa rete del raspberry, digito nel browser l'indirizzo del raspberry ed esce una pagina html per il controllo di led (per ora) collegati alla gpio. Per ora riesco a far accendere e spegnere un solo led, potreste dirmi come posso fare per far accendere e spegnere altri led? non sono molto ferrato con javascript.
la pagina web è stata scritta in html, bootstrap e css.
poi ci sono due file php per accendere e spegnere il led
e del codice javascript incorporato nella pagina html
grazie in anticipo, perdonatemi se la sezione non è giusta.
codice HTML:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>DOMO House</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Slab:100,300,400|Roboto:100" rel="stylesheet"> <!--link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript"> $(document).ready(function(){ $('#accendi').click(function(){ var a= new XMLHttpRequest(); a.open("GET","accendi.php"); a.onreadystatechange=function() { if(a.readyState==4){ if(a.status==200){ } else alert ("HTTP ERROR"); } } a.send(); }); $('#spegni').click(function(){ var a= new XMLHttpRequest(); a.open("GET","spegni.php"); a.onreadystatechange=function() { if(a.readyState==4){ if(a.status==200){ } else alert ("HTTP ERROR"); } } a.send(); }); }); </script></head>
<body> <nav class="navbar navbar-inverse"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">DOMO House</a> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Piano Terra<span class="sr-only">(current)</span></a></li> <li><a href="#">Primo Piano</a></li> <li><a href="#">Secondo Piano</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stanza<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Taverna</a></li> <li role="separator" class="divider"></li> <li><a href="#">Bagno</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav>
<div class="container"> <div class="row"> <div class="col-xs-12 col-md-6"> <h1>Luci</h1> <button type="button" class="btn btn-success bottone spazio" id="accendi" name="CameraON">Accendi</button> <button type="button" class="btn btn-danger bottone" id="spegni" name="CameraOFF">Spegni</button> </div> <div class="col-xs-12 col-md-6"> <h1>Luci</h1> <a class="btn btn-success bottone spazio" href="#" role="button">Accendi</a> <a class="btn btn-danger bottone" href="#" role="button">Spegni</a> </div> <div class="col-xs-12 col-md-6"> <h1>Luci</h1> <a class="btn btn-success bottone spazio" href="#" role="button">Accendi</a> <a class="btn btn-danger bottone" href="#" role="button">Spegni</a> </div> <div class="col-xs-12 col-md-6"> <h1>Luci</h1> <a class="btn btn-success bottone spazio" href="#" role="button">Accendi</a> <a class="btn btn-danger bottone" href="#" role="button">Spegni</a> </div> <div class="col-xs-12 col-md-6"> <h1>Luci</h1> <a class="btn btn-success bottone spazio" href="#" role="button">Accendi</a> <a class="btn btn-danger bottone" href="#" role="button">Spegni</a> </div> <div class="col-xs-12 col-md-6"> <h1>Luci</h1> <a class="btn btn-success bottone spazio" href="#" role="button">Accendi</a> <a class="btn btn-danger bottone" href="#" role="button">Spegni</a> </div> </div> </div>
<footer> <p class="text-center">© - DOMO House di Cosmo Ferrigno 2017</p> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></body></html>
Codice PHP:
<?php system("gpio -g mode 17 out"); system("gpio -g write 17 1");?>
Codice PHP:
<?php system("gpio -g mode 17 out"); system("gpio -g write 17 0");?>