› › ›

A Little further progress. But now getting [object] [Object]

chrisjmearschrisjmears
edited March 2014 in JavaScript Mode

Well, After a lot of playing around I am starting to get my head a little around passing JSON from Javascript to processing.js

So what I am doing here is grabbing the JSON object with javascript and passing it to the DisplayData function of the processing.js sketch. Heres the problem. The DisplayData function is expecting String as a parameter but of course when I pass it the JSON object and run the sketch, it displays [object] [Object] as in fact I am passing it a JSON object.

I have tried json.field1 and that doesnt work. Any idea what I need to do in my processing sketch argument or in my javascript to get access to the individual fields in the JSON file.

i.e field1, field2 etc etc?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <script src="processing.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>


    function getText(id)
    {
        var pjs = Processing.getInstanceById(id);
        var json = $.getJSON('https://api.thingspeak.com/channels/5384/feed/last.json');

        pjs.DisplayData(json);
    }

    </script>
</head>
<body>
    <span onclick="getText('circleSketch')">Print Text</span>
    <canvas id="circleSketch" data-processing-sources="CircleColor.pde"></canvas>
</body>
</html>

PROCESSING FILE


void setup()
{
        size(640,320);
}

void draw()
{
        DisplayData();
}

void DisplayData(String field1)
{
        textSize(14);
        fill(0);
        text(field1,10,10);  
}

Answers

  • akierskyakiersky

    Maybe try to simplify your js down to bare bones to ensure your linkage is working, then slowly start adding back in functionality:

    var sketch = Processing.getInstanceById( 'JSONTest' );
sketch.DiplayData("show data in my sketch");

    Right now, you may be having issues getting your JSON file which would prevent the function from calling. It looks like your double quotes may be messing up in that call, maybe try converting them to single quotes.

    Also, I have found it works best when you grab your processing canvas inside the functions. So maybe try moving line 9 inside your if(data), right before you use it.

    I see you don't set a width and height of your canvas object either, maybe try adding: width="640" height="320" to ensure it is the right size to contain your sketch. Could also add a background color to your draw function to make sure your sketch is actually showing up in your html file.

    I don't have a lot of experience with this myself, but was able to get it working in a small example.

    hope this helps! ak

  • GoToLoopGoToLoop
    edited March 2014

    Here's my experiments w/ Cross PDE/JS tabs, using ideas from http://processingjs.org/articles/PomaxGuide.html: (*)

    • PDE tab auto calls draw(), while JS tab keeps calling begin() w/ setTimeout().
    • Both cross-invoke functions located in both tab files. Like fromPDE() & fromJS().
    • PDE tab can directly access all resources from JS tab.
    • JS tab needs a reference to access PDE tab, which is a Processing instance.
    • It keeps calling Processing.getInstanceById(getProcessingSketchId()) w/ setTimeout() until a non-null is got.


    "CrossPDE_JS.pde":

    /**
 * CrossPDE/JS (v1.01)
 * by GoToLoop (2014/Mar)
 *
 * forum.processing.org/two/discussion/3963/
 * any-idea-on-getting-this-code-to-work
 */

void setup() {
  size(300, 200);
  frameRate(1.5);
  smooth(4);
  rectMode(CENTER);
  strokeWeight(4);
  stroke(0);
}

void draw() {
  fill((int) random(ALL_COLORS) | ALL_COLORS);
  rect(width>>1, height>>1, width>>1, height>>1);

  fromPDE("setup");
  fromJS("setup");
}

void fromPDE(String word) {
  println("fromPDE: " + word + "!");
}


    "Native.js":

    (function waitPJS() {
  var pjs = Processing.getInstanceById(getProcessingSketchId());

  if (pjs)  begin(pjs);
  else      setTimeout(waitPJS, 1000);

  console.log(pjs);
}
)();

function begin(p) {
  p.fromPDE("begin");
  fromJS("begin");

  p.background(p.random(ALL_COLORS) | 0);
  setTimeout(begin, 2500, p);

  p.println(p.frameCount + "\t" + p.online + "\n\n");
}

function fromJS(word) {
  console.log("fromJS: " + word + "!");
}

ALL_COLORS = 0xff000000;
Sign In or Register to comment.