Variable from JavaScript to Processing Issue

hubajs · October 2014

Hello, I have one page JavaScript Pus Processing sketch web page. I did simlify my program to show only the issue.

Using: Windows 7 and Chrome 38.0.2125.104 m

The Processing sketch here below shall show "Value A = 5" on the first line when loaded I have succeed only to pass it by buttons, but no success during the onload process.

All I need is to set the "var1" and "var2" in the webpage by JS calculation during the sketch loading. Once they are set, I need to pass them to the processing sketch.

I get an error during web page loading (in the Chrome debug):

Uncaught TypeError: Cannot read property 'setServos' of undefined changeServos (anonymous function)

Once PJS loaded, the function works when using buttons ....

Could someone help me how to make it work?

<script type='text/javascript' src='../../default/processing/processing_1.4.8_Development.js' ></script>

<html>
    <head>
        <title>Hello Web - Controlling Processing from JavaScript</title>
        <script type="application/javascript">
            var val1 = 5;
            var val2 = 6;
            function changeServos(id,_servo, _number) {
                var pjs = Processing.getInstanceById(id);   //we assign our processing sketch to the variable pjs
                pjs.setServos(_servo, _number);             //we call the setServos() in processing and pass the number
            }           
        </script>
    </head>

    <body>
        <script type="application/javascript">
            changeServos('sketch',1,val1);
        </script>

        val1 = 5
        val2 = 6
        <button type="button" onclick="changeServos('sketch',1,val1)">Set 1</button>
        <button type="button" onclick="changeServos('sketch',1,val2)">Set 2</button>

        <script type="text/processing" data-processing-target="sketch">
            int servoA = 1;
            int servoB = 2;

            void setup() {
                size(250, 250);
            }

            void setServos(int _servo, int _number){
                if(_servo == 1 && _number >= 1 && _number <= 6){
                    servoA = _number;
                }
                else if(_servo == 2 && _number >= 1 && _number <= 6){
                    servoB = _number;
                }
            }

            void draw() {
                background(51);
                text("Value A = " + servoA, 10, 20);
                text("Value B = " + servoB, 10, 40);
            }
        </script>
        <canvas id="sketch"></canvas>

    </body>
</html>

hubajs · October 2014

I am the boss! I have found thanks to other discussions it is NECESSARY to realy realy wait the Processing sketch is fully loaded.

I added window.onload into the head sketch just after function changeServos(id,_servo, _number){}

window.onload = function () {
    changeServos('sketch',1,val1);
    changeServos('sketch',2,val2);
}

and removed the body sketch

changeServos('sketch',1,val1);

and it works.

hubajs · October 2014

well, this doesn't works if when I change loading pde file by script to loading the file by canvas...

Does anyone has an idea why?

<body>
    <p>
        <canvas id="sketch" data-processing-sources="control.pde"></canvas>
    </p>
</body>

Howdy, Stranger!

Categories

In this Discussion

Variable from JavaScript to Processing Issue

Best Answer

Answers