I have a very simple p5 sketch that is running in my desktop computer pretty well. But when I hosted that with github pages just to see if it works on mobile devices I found it not working properly. I had just a single input box created in my sketch.
This is the sketch.js : -
var inputBox;
function setup() {
noCanvas();
inputBox = createInput();
inputBox.size(200,50);
}
What about other input events? For example : createSelect() which creates < select > tag elements or buttons? If I put them over the canvas will they all work?
This issue needs to be solved in the later versions of p5 js.
and the DOM.position() over canvas was a independent but not related information
you could test in under 30 sec by using //
but it does get essential for the fullscreen canvas users.
just stay more close to examples
a mayor reason to use the online editor OR the PDE / p5.js Mode.
instead try it with manual coding of HTML / sketch.js
from what environment?
above i told you that the position should be unrelated to your problem.
did you test my complete sketch code under your environment?
var inputBox;
function setup() {
createCanvas(400, 400);
inputBox = createInput();
inputBox.size(200, 20);
//inputBox.position(10,10); //__ put it over canvas
inputBox.input(myInputEvent);
}
function myInputEvent() {
console.log('log: ', this.value());
}
function draw() {
background(200,200,0);
}
I launched and hosted another webpage through github following your suggestion. I wrote your code (Except for the console log statement. Because I don’t know how it could help a mobile phone user). I still could not focus on the input box.
Is it a problem of github pages?
How did you run the sketch on mobile phone? What I do for that is to host my page with github page
i give you that link already, and expected that you tested that on your device
( and report if it works for you or not )
but you just ask back about ? other input events?
so i could assume it worked.
you can work in every environment you want,
but if you have p5.js questions here at the forum
i recommend you make a account at the online editor
and link to your code in question here, so we see code / result / can play with it…
Okay, now you are talking about some p5 js editor link!
When I am going to host my webpage I surely won’t want to share a editor link!
You should test hosting it by github pages and after testing that I found it did not work.
So as I have intentions to host a page you should tell me a solution for doing so
-c- yes, understand that the final code will / has to / run on your webserver
( if that can be github.io i don’t know )
but for YOU i tested it ( latest code version ) here on my node server
for understand the environment:
++ a raspberry pi 3B+ board / Raspbian / node express app installation
++ a sketch3.js with the content from my online editor link
var inputBox;
var mytext="";
function setup() {
createCanvas(400, 100);
inputBox = createInput();
inputBox.size(200, 20);
//inputBox.position(2,height-28); //__ put it over canvas
inputBox.input(myInputEvent);
}
function myInputEvent() {
//console.log('log: ', this.value());
mytext = this.value();
}
function draw() {
background(200,200,0);
textSize(30);
text(mytext,10,height/2);
}
++ a local “example3.html” file from the test environment
