mouse functions

ondsinet_

I've noticed that using mouseReleased(), mousePressed and similar variables in this mode will cause the sketch to simply stop, or gives no results; is it because of some difference in the names or something? I can't manage to get em to work, is there a way?

GoToLoop

JS doesn't separate variables/properties from functions/methods as Java.
Therefore we can't have variables & functions sharing the same name in JS!

If you wanna check the renamed mousePressed variable in PJS, go and paste your code here:
http://ProcessingJS.org/tools/processing-helper.html

ondsinet_

nice I just had to rename some variables ok cool;Thank you!

ondsinet_

but now, the mouse position seems weird; in the normal sketch I have programmed a simple button class, that checks for the mouseX and Y position, and it works great in java mode, but in javascript mode instead the position is wrong...is it related to the sketch position inside of the browser page?I'm using the normal mouseX variable, do they have different names?

GoToLoop

mouseX & mouseY are relative to the canvas. No matter which Processing flavor!

ondsinet_

why then on the web version the coordinates are different than the ones on normal java?

GoToLoop

@ondsinet_, if mouseX & mouseY in PJS aren't behaving as the other Processing flavors, then you've just found a bug. However, you haven't shown us any proof of it b/c you haven't shown any code so far!

ondsinet_

here is the web version sacchidisale.altervista.org/guiStart/index.html

and here is the code

ondsinet_

gui.pde

ArrayList<plugButton> plugs = new ArrayList<plugButton>();

void setup() {
  size(900, 600 ,JAVA2D);
  for (int j=0; j<10; j++) {
    plugs.add(new plugButton(10, j*70, 200, 70-5, j, "jhon"));
    plugs.get(j).tag[0]="#luci";
  }
}

void draw() {
  fill(255);
  background(100);
  for (int j = 0; j < plugs.size(); j++) {
    button  part = plugs.get(j);
    part.update();
  }   
  vMouseClicked=false; 
  vMouseReleased=false;
}

class button {
  int bX, bY, bWd, bHg, bId, bSX, bSY;
  boolean state, olState, hover, pressed, released, clicked;
  color bStroke, bStrokeT, bStrokeF, bFill, bFillT, bFillF, bFillP;
  int bStrokeW, bR;
  String name;
  String[] tag={"h"};
  button(int x, int y, int w, int h, int i, String n) {
    bX=x;
    bY=y;
    bWd=w;
    bHg=h;
    bId=i;
    name=n;
    bStrokeW=2;
    bR=0;
    bStrokeT=color(255);
    bStrokeF=color(0);
    bFillT=color(0, 255, 0);
    bFillF=color(255, 0, 0);
    bFillP=color(220, 240, 50);
    olState=state;
  }

  void update() {
    if (bX+bSX<width && bY+bSY<height) {
      check();
      display();
    }
  }

  void check() {
    if ((mouseX>bX+bSX && mouseX<bX+bSX+bWd) && (mouseY>bY+bSY && mouseY<bY+bSY+bHg)) {
      hover=true;
    } else {
      hover=false;
    }
    pressed=mousePressed&&hover?true:false;
    released=vMouseReleased&&hover?true:false;
    clicked=vMouseClicked&&hover?true:false;

    if (clicked ||released) {
      state=!state;
    }

    if (state!=olState) {
      olState=state;
      activated();
    }
  }
  void display() {
    bStroke=hover?bStrokeT:bStrokeF;
    stroke(bStroke);
    bFill=pressed?bFillP:state?bFillT:bFillF;
    fill(bFill);
    strokeWeight(bStrokeW);
    rect(bX+bSX, bY+bSY, bWd, bHg, bR);
    fill(250);
    String txt=bId+" "+name+"\n";
    for (int i=0; i<tag.length; i++) {
      txt=txt+" "+tag[i];
    }
    textSize(15);
    text(txt, bX+bSX+(bStrokeW*5), bY+bSY+(bStrokeW*2), bWd-(bStrokeW*5), bHg-(bStrokeW*2) );
  }

  public  void activated() {
    println("hi");
  }
}

class plugButton extends button {
  color bFillD=(100);
  plugButton(int x, int y, int w, int h, int i, String n) {
    super( x, y, w, h, i, n);
  }
  void display() {
    bStroke=hover?bStrokeT:bStrokeF;
    stroke(bStroke);
    fill(bFillD);
    rect(bX+bSX, bY+bSY, bWd, bHg, bR);
    bFill=pressed?bFillP:state?bFillT:bFillF;
    fill(bFill);
    strokeWeight(bStrokeW);
    rect(bWd-bHg+(bX+bSX), bY+bSY, bHg+bStrokeW, bHg, bR);
    fill(250);
    String txt=bId+" "+name+"\n";
    for (int i=0; i<tag.length; i++) {
      txt=txt+" "+tag[i];
    }
    textSize(15);
    text(txt, bX+bSX+(bStrokeW*5), bY+bSY+(bStrokeW*2), bWd-(bStrokeW*5)-(bHg+bStrokeW), bHg-(bStrokeW*2) );
  }
}

boolean vMouseClicked;
boolean vMouseReleased;
void mouseClicked() {
  vMouseClicked=true;
}
void mouseReleased() {
  vMouseReleased=true;
}
void mouseDragged() {
}


boolean arraySearch(String[] a, String b) {
  for (int i=0; i<a.length; i++) {
    String pa=a[i].toLowerCase();
    b=b.toLowerCase();
    println(pa);
    println(b);
    if (pa.equals(b)) {
      return(true);
    } else if (pa.indexOf(b)!=1) {
      return(true);
    }
  }
  return(false);
}

ondsinet_

interface.js

window.onload = function () {
  tryFindSketch();
}

function tryFindSketch () {
  var sketch = Processing.getInstanceById(getProcessingSketchId());
  if ( sketch == undefined ) return setTimeout(tryFindSketch, 200);

  var controller = new Controller(sketch, "form-form");
  sketch.setController(controller);
}

GoToLoop

https://forum.Processing.org/two/discussion/8045/how-to-format-code-and-text

ondsinet_

done

GoToLoop

Just pasted your code here & it works: :-@
http://www.OpenProcessing.org/sketch/create

ondsinet_

it works ok normally, but if I click the button to move the script on the screen it shows the same problem; I belive it has to do with the position of the sketch in the page: the problem on my site may be caused by some graphical interface on the page,provided by the domaind that I can't really modify. On your site instead, when scrolling the page while keeping the mouse still(and the sketch floating in the middle of the page) the position of the mouse seen by processing changes (as soon as you update the sketch by moving the mouse a bit). So the mouse position is also related to the whole web page, and not just the sketch?

GoToLoop

If the canvas changes its location within the web page while mouse stays in place, of course mouseX & mouseY changes along.

As I mentioned before: "mouseX & mouseY are relative to the canvas."

It's the same if we could move Processing Java Mode's window while keeping our mouse still.
The mouse pointer is gonna point to another mouxeX & mouseY coordinates within the canvas.

ondsinet_

oh, but in my web page the canvas doesn't move at all but there is the same problem

GoToLoop

Not HTML specialist here by a long shot. Perhaps your site interferes w/ coordinates somehow.

ondsinet_

maybe someone else will solve this mistery...

GoToLoop

You can also hit F12 in your site and look for bugs in the console too.
For example I've got this: "Uncaught ReferenceError: Controller is not defined"
var controller = new Controller(sketch, "form-form");

You might also consider embed the PJS script within an <iframe> tag? :-/

ondsinet_

I removed the command that asked for the default webpage css, rmoving the upper toolbar and other elements that caused the problem,solving the problem;