Tengo un archivo python que genera un archivo .png en un directorio local una vez por segundo, y este archivo Javascript p5.js se aloja desde este directorio en un servidor. Mi problema es tratar de usar la función loadImage() para cargar este .png local; si lo hago, solo se referirá al valor inicial del mismo, y no a su nuevo valor modificado. Incluso cuando se usa una función de devolución de llamada dentro de draw(), tiene muchos errores y no cambia. Aquí está el archivo:
let splot; //... //irrelevant classes //... function draw() { background(245); solOnePane.display(); s1plot = loadImage("plot.png", imageLoaded); } function imageLoaded() { console.log("Debug"); image(s1plot,200,200); }El resultado es un archivo de imagen súper defectuoso e inalterable que solo refleja el archivo de imagen en el estado de carga del sitio. Tras una actualización, el archivo se actualiza. Entonces, ¿cómo puedo escribir código con loadImage() para cargar una imagen en el momento actual?
Muchas gracias.
Si la imagen se guarda en un conjunto interno externo, digamos cada segundo, podría usar setInterval() cada 1100 ms, por ejemplo, para recargar la imagen:
var s1plot; function setup(){ //...init your things here //reload the image every 1.1s setInterval(loadImage, 1100, "plot.png", imageLoaded, imageLoadFailed); } function imageLoaded(loadedImage) { s1plot = loadedImage; console.log("image loaded", s1plot); } function imageLoadFailed(event){ console.warn("image load failed", event); } function draw() { background(245); if(s1plot){// try to display the image only when it's available image(s1plot, 200, 200); } } También puede usar draw() y cambiar frameRate() para que se represente un nuevo cuadro cada segundo más o menos. Aquí hay una versión modificada de lo anterior usando frameRate() :
var s1plot; function setup(){ //...init your things here //set frameRate to 1 frame every 1.1s frameRate(1000 / 1100); } function imageLoaded(loadedImage) { s1plot = loadedImage; console.log("image loaded", s1plot); } function imageLoadFailed(event){ console.warn("image load failed", event); } function draw() { background(245); if(s1plot){// try to display the image only when it's available image(s1plot, 200, 200); } // reload the image loadImage("plot.png", imageLoaded, imageLoadFailed); } Esto puede ser más simple (a veces, el alcance de setInterval puede volverse peludo), pero también significa que está limitado a actualizaciones de procesamiento lentas. Es posible que desee esto si el boceto p5 simplemente muestra una imagen, pero no si, por ejemplo, también desea manejar la interacción reactiva del usuario.
El código anterior no está probado, pero con suerte ilustra la idea. Vale la pena verificar dos veces la referencia de loadImage() en caso de duda.
Por ejemplo, estos detalles son importantes:
Es posible que la imagen no esté disponible inmediatamente para renderizar. Si quiere asegurarse de que la imagen esté lista antes de hacer algo con ella, coloque la llamada loadImage() en preload(). También puede proporcionar una función de devolución de llamada para manejar la imagen cuando esté lista.
En su caso, se aplica la segunda opción (proporcionar una función de devolución de llamada), sin embargo, olvidó agregar el argumento de la imagen a la devolución de llamada de carga de la imagen.
Esto supone que no hay problemas para escribir plot.png en el disco sin errores y que el tiempo es un poco complicado.
En un mundo ideal, el primer sistema que escriba plot.png enviaría un mensaje a p5 cuando la imagen se haya escrito con éxito y esté lista para cargarse. (Si plot.png es, por ejemplo, generado por un script de python usando matplotlib o algo similar, puede usar un evento enviado por el servidor o una biblioteca websocket a la que p5 puede conectarse y escuchar el mensaje para cargar la imagen)