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
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();");
}
}