• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

239
Views
Why p5js skethch integrated with Vaadin won't start?

I'm trying to integrate a p5js with the Vaadin. The goal is to plug p5js library and my p5js Sketch as well into the Vaadin's view component. So I would be able to launch and render my a p5js Sketch on client side and refer to some logic on the server side.

As I am figuring out once p5js library loaded it would start automaticaly (The p5js library is a script file with a main function inside round brakets) and catch my "setup()" and "draw()" functions from sketch. And this is exactly how it works if I make an empty html page and plug scripts there with tags.

In Vaadin I used @JavaScript annotation for both scripts and start localhost but hothing happens. Sketch won't start. There is test "console.log()" inside "setup()" function it won't works off too.

Also somehow I can't reach the sketch's functions from browser's console (Neither just "setup()", nor "window.setup()", nor "p5.setup() fit) but with tiny code modification I can. If I place my sketch code inside "window.ns={// my code}" I can refer to it via "window.ns..." in the console. So I'm pretty sure sketches are loaded with page.

What am I missing?

Here is Vaadin's view class I've made (Java):

@Route(value = "/MyView")
@JavaScript("p5.js")
@JavaScript("sketch.js")
public class MyView extends VerticalLayout {
    public MyView() {
    }
}

Here is the Sketch's code (JavaScript):

 function setup () {
    console.log(`test message`);
    createCanvas(400, 400);
}
 function draw () {
    background(220);
}

There is no any error message relevant to the issue. The console is silent.

Update:

Also it might be useful if someone experienced look at the high-levevel library code to figure out how it starts: high-levevel library code

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

The content of the JavaScript is not automatically executed. You need to add JavaScript call in your view, something like.

@Route(value = "/MyView")
@JavaScript("./p5.js")
@JavaScript("./sketch.js")
public class MyView extends VerticalLayout {
    public MyView() {
        getElement().executeJs("setup();draw();");
    }
}
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error