Primo progetto Arduino Yun

myblink-screenoff myblink-screenonHo creato una pagina html con due pulsanti per accendere e spegnere un led giallo e uno verde. All’apertura della pagina leggo i dati di Arduino (/data/get) e stabilisco lo stato iniziale dei pulsanti (acceso o spento). Poi con un semplice click decido se accenderlo o spegnerlo. Nel caso il led sia acceso, il pulsante assume la colorazione del led. Lo sketch è molto intuitivo. E’ necessario salvare la pagina html in una cartella “www”, creata nello stesso folder del file.ino. Per accedervi dal browser http://ilNomeDelloYun.local/sd/ilNomedelloSketch.

index.html

[code language=”html” padlinenumbers=”true” htmlscriptxml=”true”]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SECONDINO</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
body{width: 100%; text-align: center;}
.button{width:200px; margin: auto; margin-bottom:24px;}
label[for="pin2"].ui-state-active {background: green none repeat scroll 0 0; color: white;} /* cambio il css del pulsante, quando è attivo, si colora */
label[for="pin3"].ui-state-active {background: yellow none repeat scroll 0 0;} /* cambio il css del pulsante, quando è attivo, si colora */
</style>
<script>
$(document).ready(function() {
loadActualData(); // leggo i file scritti nel json per avere un aggiornamento dello stato dei led//
$(‘#pin2’).click(function(){ if (this.checked) {$.ajax({url : "/arduino/high2\\"}); } else {$.ajax({url : "/arduino/low2\\"}); }}); //invio i dati ad Arduino
$(‘#pin3’).click(function(){ if (this.checked) {$.ajax({url : "/arduino/high3\\"}); } else {$.ajax({url : "/arduino/low3\\"}); }}); //invio i dati ad Arduino

});

$(function() {
$( "#dpin2" ).buttonset(); //utilizzo il buttonset per utilizzare le proprietà delle checkbox
$( "#dpin3" ).buttonset();
});
</script>
</head>
<body>
<form>
<div class="button" id="dpin2"><input type="checkbox" id="pin2"><label id="labelpin2" for="pin2">Led Green</label></div>
<div class="button" id="dpin3"><input type="checkbox" id="pin3"><label id="labelpin3" for="pin3">Led Yellow</label></div>
</form>
<script>
function loadActualData(){
$.getJSON("/data/get/",function(data){ //path dove vengono salvati i dati dallo scketch ti Arduino
//alert (JSON.stringify(data));
//per cambiare lo stato del pulsante e la colorazione devo modificare le proprietà del pulsante, l’attributo aria-pressed e le classi della label
if((data.value.LED2)==="1"){$(‘#pin2’).prop(‘checked’, true);$(‘#labelpin2’).attr(‘aria-pressed’, true).addClass(‘ui-state-active’);}else{$(‘#pin2’).attr(‘checked’, false);$(‘#labelpin2’).attr(‘aria-pressed’, false).removeClass(‘ui-state-active’)};
if((data.value.LED3)==="1"){$(‘#pin3’).prop(‘checked’, true);$(‘#labelpin3’).attr(‘aria-pressed’, true).addClass(‘ui-state-active’); }else{$(‘#pin3’).attr(‘checked’, false);$(‘#labelpin3’).attr(‘aria-pressed’, false).removeClass(‘ui-state-active’);};
});
setTimeout("loadActualData()",3000); //richiedo un aggiornamento ogni 20secondi
}

</script>
</body>
</html>
[/code]

Sketch & Schema

collegamento


#include 
#include 
#include 
int LEDPIN3 = 3; // your LED PIN
int LEDPIN2 = 2; // your LED PIN
YunServer server;

void setup() {
  // Start our connection
  Serial.begin(9600);
  pinMode(LEDPIN2,OUTPUT);
  pinMode(LEDPIN3,OUTPUT);
  Bridge.begin();  
  server.begin();
}

void loop() {
  // Listen for clients
  YunClient client = server.accept();
  
  // Client exists?
  if (client) {
    // Lets process the request!
    process(client);
    client.stop();
  }
  delay(50);
}

void process(YunClient client) {
  // Collect user commands
  String command = client.readStringUntil('\\'); // load whole string
  // Turn on, Turn off
  if (command == "high3") {digitalWrite(3,HIGH);myput();}
  if (command == "low3") {digitalWrite(3,LOW);myput();}
  if (command == "high2") {digitalWrite(2,HIGH);myput();}
  if (command == "low2") {digitalWrite(2,LOW);myput();}
}


void myput(){
  Bridge.put("LED2",""+String(digitalRead(LEDPIN2))+"");
  Bridge.put("LED3",""+String(digitalRead(LEDPIN3))+"");
  }

Arduino Nessun commento