da salvare in html
e copiare nella cartella www di yun come foto
ma nel web
aprire da web,
nel mio caso:
192.168.0.12/sd/pippo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Arduino Yun With Processing js</title>
<script src=" processing.js" type="text/javascript"></script>
</head>
<script>
window.onload=Pin0Yun;
function Pin0Yun() {
pinYun();
}
function pinYun() {
setTimeout(pinYun, 3000);
server = "/arduino/stato/99";
richiesta = new XMLHttpRequest();
richiesta.onreadystatechange = aggiornaValori;
richiesta.open("GET", server, true);
richiesta.send(null);
}
function aggiornaValori() {
if ((richiesta.readyState == 4) && (richiesta.status == 200))
{
datiYunA = richiesta.responseText;
pippo = datiYunA.split(",");
valorePin0 = pippo[0];
valorePin1 = pippo[1];
var pjs = Processing.getInstanceById('sketch');
var ciao = valorePin0;
if (ciao >1) {
pjs.variaInProcessing(ciao);
}
var ciaoo = valorePin1;
if (ciaoo >1) {
pjs.variaInProcessingg(ciaoo);
}
}
}
function yunOnOffLed(numPin, valore)
{
server = "/arduino/digital/" + numPin + "/" + valore + "";
richiesta = new XMLHttpRequest();
richiesta.onreadystatechange = aggiornaSpia;
richiesta.open("GET", server, true);
richiesta.send(null);
}
function aggiornaSpia()
{
if ((richiesta.readyState == 4) && (richiesta.status == 200))
{
datiYun = richiesta.responseText;
splitta = datiYun.split(",");
numeroPin = splitta[0];
PinStato = splitta[1];
var pjs = Processing.getInstanceById('sketch');
pjs.cambiaColoreSpia1(PinStato, numeroPin);
}
}
var bound = false;
function bindJavascript()
{
var pjs = Processing.getInstanceById('sketch');
if (pjs!=null)
{
pjs.bindJavascript(this);
bound = true;
}
if (!bound) setTimeout(bindJavascript, 250);
}
bindJavascript();
function invia (pin, stato)
{
yunOnOffLed(pin, stato);
}
function invia2 (pin, stata)
{
yunOnOffLed(pin, stata);
}
</script>
<body>
<!-----------------------inizio sketch Processing ------------------------->
<!-----------------------inizio sketch Processing ------------------------->
<!-----------------------inizio sketch Processing ------------------------->
<script type="text/processing">
interface JavaScript
{
void invia (stato);
}
void bindJavascript(JavaScript js)
{
javascript = js;
}
JavaScript javascript;
float valPinA00;
int stato = 0;
int stata = 0;
int valPinA0;
int valPinA1;
int cambia = 0;
int cambiaa = 0;
int luce;
float r;
float theta;
void setup() {
size (720, 360);
r = height * 0.35;
theta = 0.0;
}
void draw() {
background (50, 50, 150);
translate (360, 200);
strokeWeight (1);
stroke(255, 0, 0);
fill(30);
ellipse (0, 0, 300, 300);
textSize (19);
fill(255);
for (int i = 0;i <11; i++) {
float x = r * cos((theta+0.58*i)-11.06 );
float y = r * sin((theta+0.58*i)-11.06 );
text (93*i, x-16, y + 7 );
}
noStroke();
fill (245, 120, 2);
rect (-28, 61, 50, 20);
rect (34, -15, 30, 15);
fill (255);
text (valPinA0, -22, 78);
textSize (10);
text (valPinA1, 39, -3);
strokeWeight (1);
stroke(255, 0, 0);
pushMatrix();
valPinA00 = map (valPinA0, 0, 1023, -90, 270);
rotate (radians(valPinA00));
line (0, 0, -140, 0); //lancetta lunga
ellipse (0, 0, 10, 10);
popMatrix();
translate (50, -50);
pushMatrix();
for (int i =0; i<18;i++) {
rotate (radians (20 )); //divisioni piccolo
line (26, 0, 22, 0);
}
popMatrix();
pushMatrix();
rotate (radians(valPinA1));
line (0, 0, -23, 0); //lancetta corta
ellipse (0, 0, 5, 5);
popMatrix();
noStroke ();
if (cambia==1)
{
fill (255, 0, 0);
ellipse (-321, 100, 120, 70);
}
else
{
fill (100);
ellipse (-321, 100, 120, 70);
}
noFill();
if (cambiaa==1)
{
fill (255, 0, 0);
ellipse (212, 100, 120, 70);
}
else
{
fill (100);
ellipse (212, 100, 120, 70);
}
noFill();
}
void variaInProcessing(int newValore)
{
valPinA0 = newValore;
}
void variaInProcessingg(int newValoree)
{
valPinA1 = newValoree;
}
void cambiaColoreSpia1(int newStato1, numSpia)
{
if (numSpia == 13)
{
cambia = newStato1;
}
if (numSpia == 12)
{
cambiaa = newStato1;
}
}
void mouseReleased()
{
if (mouseX > 10 && mouseX < 150 && mouseY > 200 && mouseY < 300 && stato == 0)
{
stato =1;
if (javascript!=null)
{
javascript.invia (13, stato);
}
}
else if (mouseX > 10 && mouseX < 150 && mouseY > 200 && mouseY < 300 && stato == 1)
{
stato = 0;
if (javascript!=null)
{
javascript.invia (13, stato);
}
}
if (mouseX > 540 && mouseX < 710 && mouseY > 200 && mouseY < 300 && stata == 0)
{
stata =1;
if (javascript!=null)
{
javascript.invia2 (12, stata);
}
}
else if (mouseX > 540 && mouseX < 710 && mouseY > 200 && mouseY < 300 && stata == 1)
{
stata = 0;
if (javascript!=null)
{
javascript.invia2 (12, stata);
}
}
}
</script>
<!---------------------- fine sketch Processing ----------------------->
<!---------------------- fine sketch Processing ----------------------->
<canvas id='sketch' style="border: 1px solid black;"></canvas>
</td>
</body>
</html>