› ›

Processing.js with arduino YUN bidirectional

camperoscamperos
edited August 2014 in Share Your Work

based on Pomax guide. simple example inline system, Fist part save to html, any changes are appreciated

<!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"; 
  request = new XMLHttpRequest();
  request.onreadystatechange = reloadVal;
  request.open("GET", server, true);
  request.send(null);
}
function reloadVal() {
  if ((request.readyState == 4) && (request.status == 200))
  {
    //alert ("ciao");
    datiYunA = request.responseText; 
    pippo = datiYunA.split(","); 
    valPin0 = pippo[0];
    valPin1 = pippo[1]; 
    var pjs = Processing.getInstanceById('sketch');
    var ciao = valPin0;
    if (ciao) {  
      pjs.changeInProcessing(ciao);
    }
    var ciaoo = valPin1;
    if (ciaoo ) {  
      pjs.changeInProcessingg(ciaoo);
    }
  }
} 
function yunOnOffLed(numPin, val)
{  
  server = "/arduino/digital/" + numPin + "/" + val + "";
  request = new XMLHttpRequest();
  request.onreadystatechange = reloadSpia;
  request.open("GET", server, true);
  request.send(null);
} 
function reloadSpia()
{
  if ((request.readyState == 4) && (request.status == 200))
  {
    datiYun = request.responseText; 
    splitta = datiYun.split(","); 
    numeroPin = splitta[0];
    PinStato = splitta[1];  
    var pjs = Processing.getInstanceById('sketch');
    pjs.changeColoreSpia1(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 send1 (pin, stato)
{
  yunOnOffLed(pin, stato);
} 
function send2 (pin, stata) 
{
  yunOnOffLed(pin, stata);
}
 </script>
<body>
<!-----------------------start sketch Processing ------------------------->
<!-----------------------start sketch Processing ------------------------->
<!-----------------------start 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 changeb = 0;
int changea = 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 (changeb==1)
  {
    fill (255, 0, 0);
    ellipse (-321, 100, 120, 70);
  }
  else 
  {
    fill (100);
    ellipse (-321, 100, 120, 70);
  }
  noFill();
  if (changea==1)
  {
    fill (255, 0, 0);
    ellipse (212, 100, 120, 70);
  }
  else 
  {
    fill (100);
    ellipse (212, 100, 120, 70);
  }
  noFill();
}
void changeInProcessing(int newval)
{
  valPinA0 = newval;
} 
void changeInProcessingg(int newvale) 
{
  valPinA1 = newvale;
} 
void changeColoreSpia1(int newStato1, numSpia)
{ 
  if (numSpia ==  13)
  {
    changeb = newStato1;
  }
  if (numSpia ==  12)
  {
    changea = newStato1;
  }
} 
void mouseReleased()
{
  if (mouseX > 10 && mouseX < 150 && mouseY > 200 && mouseY < 300 && stato == 0)
  {
    stato =1;
    if (javascript!=null) 
    { 
      javascript.send1 (13, stato);
    }
  }
  else if (mouseX > 10 && mouseX < 150 && mouseY > 200 && mouseY < 300 && stato == 1)
  {
    stato = 0;
    if (javascript!=null) 
    { 
      javascript.send1 (13, stato);
    }
  }
  if (mouseX > 540 && mouseX < 710 && mouseY > 200 && mouseY < 300 && stata == 0)
  {
    stata =1;
    if (javascript!=null) 
    { 
      javascript.send2 (12, stata);
    }
  }
  else if (mouseX > 540 && mouseX < 710 && mouseY > 200 && mouseY < 300 && stata == 1)
  {
    stata = 0;

    if (javascript!=null) 
    { 
      javascript.send2 (12, stata);
    }
  }
}

  </script> 
<!----------------------  stop sketch Processing ----------------------->
<!----------------------  stop sketch Processing ----------------------->
<canvas id='sketch' style="border: 1px solid black;"></canvas>
</td>
</body>
</html>

:)

Comments

  • camperoscamperos

    step two Arduino YUN code.when processing is in operation sends / stato /., arduino meets two values ​​one from analogRead A0 ​​and one random. when you click the first button is sent in processing / digital /., the LED 13 arduino turns on, clicking the second button pin 12 goes high. arduino responds by changing color of the buttons in processing

    #include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h>
YunServer server;
int val_Analog1;
int val_Analog2;
int pin;
int val;
String fromProc;
void setup() {
  pinMode(13, OUTPUT);
  pinMode(12, OUTPUT);
  Bridge.begin();
  server.noListenOnLocalhost();
  server.begin();
}
void loop() {
  YunClient client = server.accept();
  if (client) {
    process(client);
    client.stop();
  }
  delay(64);
}
void process(YunClient client) {
  fromProc = client.readStringUntil('/');
  if (fromProc == "stato") {
    trimmer(client);
  }
  if (fromProc == "digital") {
    Led(client);
  }
}
void Led(YunClient client) {
  pin = client.parseInt();
  if (client.read() == '/') {
    val = client.parseInt();
    digitalWrite(pin, val);
  }
  client.print(pin);
  client.print(F(","));
  client.println(val);
 // Serial.print (pin);
 // Serial.print (" ");
 // Serial.print (val); 
}
void trimmer(YunClient client) {
  val_Analog1 = analogRead(A0);
  // val_Analog2 = analogRead(A1);
  val_Analog2 = random(0, 1000);
  client.print(val_Analog1);
  client.print(F(","));
  client.print(val_Analog2);
}

    step three

  • camperoscamperos

    step three, over wifi and router, charge the arduino code over wifi

    insert a new SD card in arduino and create two empty folders in sequence: / arduino / www /: http: // arduino.cc / en / Reference / YunFileIOConstructor still create a new folder and put the html code name at will "proc" and the source of processing (Processing.js). example: /arduino/www/yunInOut/(proc.html and Processing.js) .. to help you use WinSCP.,

    to display the values ​​in the web page is similar to: http://192.168.0.4/sd/yunInOut/proc.html. finished internal web page.. experimental to control external websites and see I will open a new thread.

Sign In or Register to comment.