[Spring Boot Java] Inviare immagine dopo la sua creazione su richiesta dell' utente.

[jabjoint]

Buongiorno a tutti, sto tentando di inviare un' immagine dopo la sua creazione su richiesta dell' utente, tramite form.

Questo è l'HomeController.java:

package org.drawweb.demo.controller;

 import org.drawweb.demo.model.InfoDraw;

 import org.drawweb.demo.service.InfoDrawService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.PostMapping;
  @Controller

 publicclass HomeController {

  @Autowired
 private InfoDrawService infoDrawService;
 
 
 @GetMapping("/draw")
 public String getDrawWeb() {     
 return"DrawWeb"; //Pagina Web che contiene il grafico
//con l'immagine vuota e gli inpute per le coordinate X,Y,Z inserite dall'utente.

     }

 @PostMapping("/save")

 public String postDrawWeb(@ModelAttribute InfoDraw infoDraw) {

 
         System.out.println(infoDraw.getX()+","+infoDraw.getY()+","+infoDraw.getZ());

 
 infoDrawService.setInfoDraw(infoDraw);

 
 return"DrawWebEdit"; //Pagina Web che contiene il grafico 
//modificato su richiesta dal form in DrawWeb.

     }
 }

Invece questo è l'infoDrawServices.java (Che si occupa di lanciare l'APP Draw che disegna in background e successivamente salvarla in un file ricghiamato dopo dal form DrawWebEdit)

  package org.drawweb.demo.service;
  import java.io.File;
  import java.io.IOException;
   import org.drawweb.demo.model.InfoDraw;
 importorg.springframework.stereotype.Service;
  import draw3d.*;
   @Service
 publicclass InfoDrawService {
 
 
     String getPathImage(){
 
         String filename = "ass-isometrica.png";
 
 filename =  System.getProperty("user.dir")+File.separator+filename;
 
 returnfilename;
 
     } 
 
 
     String getPathImageSave(){
 
         String filename = "ass-isometrica-saved.png";
 
         String sub_folder = "src/main/resources/static/img/";
 
 filename =  System.getProperty("user.dir")+File.separator+sub_folder+filename;
 
 returnfilename;
 
     } 
 
  publicvoid setInfoDraw(InfoDraw infoDraw) {
 
 
             Immagine img = new Immagine(getPathImage());
 
 new Draw(infoDraw, img);  
 
 try {
 
 img.saveImage(getPathImageSave());
 
             } catch (IOException ioex) { 
 
                 System.out.println("Errore nel salvataggio dell' immagine elaborata");
 
             };
 
     }
 
 
  }

Il problema è nella sincronizzazione dei processi?
Viene visualizza l'immagine elaborata precedentemente e non quella attuale!
L'immagine viene creata...ma successivamente non viene in "tempo" visualizzata.

[andbin]

Il problema è nella sincronizzazione dei processi?
Viene visualizza l'immagine elaborata precedentemente e non quella attuale!
L'immagine viene creata...ma successivamente non viene in "tempo" visualizzata.

Premesso che dal codice che hai postato non è che si possa capire molto. Non è nemmeno scritto bene (probabilmente copia-incollato male ... mi auguro nel tuo progetto non sia scritto così mal indentato e mal spaziato). Non sappiamo nemmeno cosa fanno le classi Immagine e Draw.

Comunque, c'è un'altra questione. Nella pagina web come è visualizzata la immagine? Suppongo con il classico tag <img>. E l'url della immagine quale è? È fisso ... oppure cambia?

[jabjoint]

Premesso che dal codice che hai postato non è che si possa capire molto. Non è nemmeno scritto bene (probabilmente copia-incollato male ... mi auguro nel tuo progetto non sia scritto così mal indentato e mal spaziato). Non sappiamo nemmeno cosa fanno le classi Immagine e Draw.

Comunque, c'è un'altra questione. Nella pagina web come è visualizzata la immagine? Suppongo con il classico tag <img>. E l'url della immagine quale è? È fisso ... oppure cambia?

Nel progetto è OK il codice. Nel copiare la formattazione si sfalda.
Il src è fisso si. Questo perché il programma salva sempre nella stessa posizione il file png e viene riletto da li.

Ti posto i due html in resource/templates/:


DrawWeb:

  <!DOCTYPE html>
  <html xmlns:th="http://www.thymeleaf.org" lang="en">
 <head>
 <meta charset="utf-8">
 <title>Disegno </title>
 </head>
 <body>
  <h1>Disegno</h1>
  <table class="app-draw">
     
     <img src="/img/ass-isometrica.png" />
     
     <div>
         <form action="save" method="post">
             <label for="X_0">X(x,y)=</label><br>
             <input type="text" name="X" placeholder="(1.75-1.25+1.25*cos(x))*cos(y)" value="sin(x)"/><br>
             <label for="Y_0">Y(x,y)=</label><br>
             <input type="text" name="Y" placeholder="(1.75-1.25+1.25*cos(x))*sin(y)" value="cos(x)"/><br>
             <label for="Z_0">Z(x,y)=</label><br>
             <input type="text" name="Z" placeholder="1.25*sin(y)" value="sin(x)"/><br>
             <input type="submit" value="Draw" />
         </form>
     </div>
   
 </table>
  </body>
 </html>

DrawWebEdit.html:

  <!DOCTYPE html>

  <html xmlns:th="http://www.thymeleaf.org" lang="en">
 <head>
 <meta charset="utf-8">

 <title>Disegno</title>
 </head>
 <body>
  <h1>Disegno Visualizzato:</h1>
  <table class="app-draw">
     
     <img src="/img/ass-isometrica-saved.png" />
     
     <!--

     <div>
         <form action="draw" method="get">
             <input type="submit" value=" <-- Draw " />        

         </form>
     </div>
     -->
   
 </table>
  </body>

 </html>

 

Il programma Draw avvia tramite un thread incluso in un metodo il codice che crea l'immagine.
La classe immagine lavora con Draw e si occupa di gestire, la creazione, il salvataggio ecc...

[jabjoint]

Immagine(elimino dei dati perché di troppo):

   public class Immagine {             
  
       //private...
 
  
 public Immagine(String filename){                    
 
 
 try...
 
 this.firstImage = ImageIO.read(new File(filename));
 this.image = firstImage;

 
 
        }    
 
 void initPolygon(){
 
 A = new Point[4];
 
 A[0] = new Point(222,250);
 A[1] = new Point(272,274);
 A[2] = new Point(222,300);
 A[3] = new Point(172,275);    
 
 P = new Point[4];
 
        }
 

  
        Image getImage(){
 
 returnimage;
 
        }



 
        BufferedImage getFirstImage(){
 
 returnfirstImage;           
        }
 
 
 void setImage(BufferedImage image) {
 
 this.image = image;
 
        }
 
 void flush(){
 
 image.flush();
 
        }



 
 public Polygon getPolygon() {
 
 return p;
 
        }           



 
 publicvoid setPolygonXYZ(doubleX, doubleY, doubleZ) {
 
 
 P[0] = new Point((int)(A[0].x-LX*X+Y*LX), (int)(A[0].y+X*LY/2+LY/2*Y-Z*LZ));
 P[1] = new Point((int)(A[1].x-LX*X+Y*LX), (int)(A[1].y+X*LY/2+LY/2*Y-Z*LZ));
 P[2] = new Point((int)(A[2].x-LX*X+Y*LX), (int)(A[2].y+X*LY/2+LY/2*Y-Z*LZ));
 P[3] = new Point((int)(A[3].x-LX*X+Y*LX), (int)(A[3].y+X*LY/2+LY/2*Y-Z*LZ));
 
 p = new Polygon();
 
 p.addPoint(P[0].x,P[0].y);   
 p.addPoint(P[1].x,P[1].y); 
 p.addPoint(P[2].x,P[2].y); 
 p.addPoint(P[3].x,P[3].y);
 
 
        } 
 
 void disegna(Color colore){    
 
 g = image.getGraphics();           
 g.setColor(colore);          
 g.fillPolygon(p);
 
        }      

 
 public void saveImage(String filename) throws IOException {

            ImageIO.write(image, "png", new File(filename));           
 
        }     
 
 }   

[andbin]

Questo perché il programma salva sempre nella stessa posizione il file png

Questo di per sé non è un buon approccio. Che succede se ci sono più utenti?

DrawWebEdit.html:

<img src="/img/ass-isometrica-saved.png" />

L'url è fisso, quindi il browser fa il caching della immagine e non la richiede più.
In tal caso basterebbe applicare il cache busting (info es. https://www.keycdn.com/support/what-is-cache-busting)

Ah, e il cache-busting è solo una parte del problema. Infatti parli di "thread". A parte il fatto che nelle webapp non andrebbero creati thread così a caso/al volo. Andrebbero fatte scelte più appropriate. Ma resta anche il fatto che se il thread ci mette un po' e tu invece nel frattempo hai già inviato la pagina in response e il browser fa già subito la request della immagine (anche supponendo con il cache busting), se il thread non avesse ancora finito ... sei da capo.

No, non vanno fatti questi ragionamenti così ....

[jabjoint]

Questo di per sé non è un buon approccio. Che succede se ci sono più utenti?


L'url è fisso, quindi il browser fa il caching della immagine e non la richiede più.
In tal caso basterebbe applicare il cache busting (info es. https://www.keycdn.com/support/what-is-cache-busting)

Ah, e il cache-busting è solo una parte del problema. Infatti parli di "thread". A parte il fatto che nelle webapp non andrebbero creati thread così a caso/al volo. Andrebbero fatte scelte più appropriate. Ma resta anche il fatto che se il thread ci mette un po' e tu invece nel frattempo hai già inviato la pagina in response e il browser fa già subito la request della immagine (anche supponendo con il cache busting), se il thread non avesse ancora finito ... sei da capo.

No, non vanno fatti questi ragionamenti così ....

Si, hai perfettamente inquadrato i problemi infatti(anche del Thred), di cui mi rendo conto quindi.

Infatti se salvo dentro il thread dopo che ha finito, bene l'immagine viene salvata(almeno), altrimenti se provo a salvare fuori dallo stesso thread l'immagine viene salvata come da impostazioni iniziali, senza la grafica 3D, solo l'immagine di default(gli assi),

Quindi qui ho risolto(ma male per il salvataggio(in parte)) salvando all'interno del thread, che forse mi conviene togliere?

E' che il thread lo creai precedentemente per vedere la costruzione dell'immagine nella JLabel.

Io penso che il thread per fare le cose bene vada gestito in modo pulito.

Per il cache busting devo ancora leggerlo!

Io poi pensavo di creare un nome del file dipendente dal tempo, di modo che non potranno essercene più di uno ed associarli agli utenti(eventualmente, se non resta un progetto di prova).

Ma per il momento mi basta che funzioni per un solo utente, è una prova che sto facendo...

[jabjoint]

Di fatto si, il file che mi fa vedere(immagine .png) è quella che carica nella Cache al primo accesso dell'APP.

[jabjoint]

@andbin:
ma sapersti indicarmi se il thymeleaf è corretto qui:

<img th:src="@{${'/img/ass-isometrica-saved-'+infoSave.N+'.png'}}"/>


<div th:text="${'Immagine numero:'+infoSave.N}"></div>

Perché provando a creare più immagini numerate progressivamente(le crea su disco) non mi vede le immagini...

[jabjoint]

Penso che sia da disattivare la cache?
� molto strano che legge le immagini che non esistono pi� su disco...?

[andbin]

ma sapersti indicarmi se il thymeleaf è corretto qui:

<img th:src="@{${'/img/ass-isometrica-saved-'+infoSave.N+'.png'}}"/>

<div th:text="${'Immagine numero:'+infoSave.N}"></div>

Dovrei andare a leggere la documentazione di Thymeleaf, per sicurezza.

Comunque un approccio molto migliore è questo. Quando invii il form con i dati per generare la immagine, generi dinamicamente la nuova pagina ma NON la immagine. Nella pagina avrai solo un nuovo url composto del tipo:

<img src="/blabla/immagine.png?parametro1=xxxxx&.........&v=1673511873670">

Metti tutti i parametri in query string che ti possono servire per generare la immagine. Più un parametro di "versione" per il cache busting che potrebbe essere un incrementale ma anche più banalmente un timestamp (nell'esempio i millisecondi dalla epoch).

Quel /blabla/immagine.png NON è e non deve essere un file fisico presente nella webapp (non è una buona cosa infatti). Questo url è da gestire con un controller, cioè ci sarà un metodo di controller che risponde su GET /blabla/immagine.png. All'interno di questa request generi la immagine come ti pare. Puoi anche sfruttare eventualmente file "temporanei" se necessario (non c'è nulla di vietato in questo senso, purché univoci, c'è il modo per farlo) e poi, attenzione, fai lo streaming dei byte della immagine nella response.

Questo ti risolve TUTTI i problemi, pure l'utilizzo "concorrente" o da parte di più utenti.

Appena riesco nei prossimi giorni scrivo un demo di generazione immagini con Spring Boot 3.