Differenze

Queste sono le differenze tra la revisione selezionata e la versione attuale della pagina.

--- raspberry:relay [2017/10/05 22:40]
stefano creata
+++ raspberry:relay [2023/04/17 14:25] (versione attuale)
@@ Linea 63: / Linea 63: @@
 per un totale con tutte e 8 le bobine eccitate di 2,8 watt\\
 ed un assorbimento minimo di 27 milliampere e un massimo di circa 220 milliampere\\
+==== Esperienza con gpio ====
+su raspbian versione 9\\
+Abilitazione degli strumenti gpio e del python\\
+poi installazione di apache2 e del php5\\
+attenzione di default viene installato il php7 e per mezza giornata non ha funzionato nulla fino a che ho installato anche il php5\\
+creare su /var/www/html il seguente file index.html \\
+<file html index.html>
+<!--
+Bootstrap  -   http://getbootstrap.com/
+Switch buttons  -  http://www.bootstrap-switch.org/
+Jquery  -  http://jquery.com/
+-->
+<html>
+<head>
+<meta charset="UTF-8" />
+<!-- for mobile version -->
+<meta name="viewport" content="width=400px, initial-scale=1">
+<link href="bootstrap.css" rel="stylesheet">
+<link href="bootstrap-switch.css" rel="stylesheet">
+<script src="jquery.js"></script>
+<script src="bootstrap-switch.js"></script>
+</head>
+<body>
+<h3>4 Array relay Web App</h3>^M
+^M
+<div>^M
+<span>4 Array relay</span></br>^M
+<!-- creating table -->^M
+<table>^M
+  <tr>^M
+    <td><label for="relay1">Light 1</label></td>^M
+    <!-- creating button for the relay -->^M
+    <td><input type="checkbox" name="relay1" id="relay1"checked></td>^M
+  </tr>^M
+    <tr>^M
+    <td><label for="relay2">Light 2</label></td>^M
+    <td><input type="checkbox" name="relay2" id="relay2"checked></td>^M
+  </tr>^M
+    <tr>^M
+    <td><label for="relay3">Light 3</label></td>^M
+    <td><input type="checkbox" name="relay3" id="relay3"checked></td>^M
+  </tr>^M
+    <tr>^M
+    <td><label for="relay4">Light 4</label></td>^M
+    <td><input type="checkbox" name="relay4" id="relay4"checked></td>^M
+  </tr>^M
+  ^M
+^M
+</table>^M
+^M
+<!-- feedback paragraphs -->^M
+^M
+<p>Relay 1 is  <span id="feedback1"></span> </p>^M
+^M
+<p>Relay 2 is <span id="feedback2"></span> </p>^M
+^M
+<p>Relay 3 is <span id="feedback3"></span> </p>^M
+^M
+<p>Relay 4 is <span id="feedback4"></span> </p>^M
+</div>^M
+^M
+<script type="text/javascript">^M
+^M
+^M
+//setting all buttons off state to be red color^M
+$.fn.bootstrapSwitch.defaults.offColor="danger";
+//inicalizing the switch buttons
+$("[name='relay1']").bootstrapSwitch();
+$("[name='relay2']").bootstrapSwitch();
+$("[name='relay3']").bootstrapSwitch();
+$("[name='relay4']").bootstrapSwitch();
+//this will be execute when the html is ready
+$(document).ready(function(){
+  //ajax request with post method (better to be GET)
+  $.ajax({
+    method: "POST",
+    url: "firstCheck.php",
+    data: {}
+  };
+  .done(function( msg ) {
+    // we need to parse the responce 2 times
+    msg = JSON.parse(msg);
+    msg = JSON.parse(msg);
+    //for loop that is implemented for the feedback divs and buttons state
+    for(var i = 0 ; i < 4; i++){
+      // setting the feedback divs
+      if(msg[i] == true){
+        $("#feedback"+(i+1)).html("Turned On");
+      }else{
+        $("#feedback"+(i+1)).html("Turned Off");
+      }
+      //setting the current button state
+      $("[name='relay"+(i+1)+"']").bootstrapSwitch('state',msg[i]);
+    }
+});
+});
+// making onclick event listener for the buttons ^M
+$('input[name="relay1"],'+^M
+  'input[name="relay2"],'+^M
+  'input[name="relay3"],'+^M
+  'input[name="relay4"]').on('switchChange.bootstrapSwitch', function(event, state) {
+// checking whitch button is clicked
+var relayID = event.target.id.substring(event.target.id.length - 1);
+//ajax POST request
+$.ajax({
+  method: "POST",
+  url: "changeState.php",
+  data: { clicked :state , relayId:relayID}
+})
+  .done(function( msg ) {
+  // changing the feedback paragraphs
+  if(msg == "true"){
+    $("#feedback"+(relayID)).html("Turned On");
+  }else{
+    $("#feedback"+(relayID)).html("Turned Off");
+  }
+  });
+});
+</script>
+</body>
+</html>
+</file>
+Di default

StefanoStrozzi.it

Strumenti Utente

Strumenti Sito

Differenze

Strumenti Pagina