Discussion :

[chris28200]

Bonjour,

J'essaye d'adapter un script que j'ai trouvé sur le net pour prévisualiser l'image de la partition musicale générée par un serveur lilypond.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Abraham Joffe :: http://www.abrahamjoffe.com.au/ */
 
  // width to resize large images to
var maxWidth=600;
  // height to resize large images to
var maxHeight=500;
  // the id of the preview image tag
var outImage="previewField";
 
 
 
function preview(){
  var source='http://www.lilyserv.net/bashserver.php?code='+lilycode.getCode()+'&format=png' ;
 
  globalPic=new Image();
  globalPic.src=source;
  setTimeout("applyChanges()",200);
 
}
 
var globalPic;
function applyChanges(){
  var field=document.getElementById(outImage);
  var x=parseInt(globalPic.width);
  var y=parseInt(globalPic.height);
  if (x>maxWidth) {
    y*=maxWidth/x;
    x=maxWidth;
  }
  if (y>maxHeight) {
    x*=maxHeight/y;
    y=maxHeight;
  }
  field.style.display=(x<1 || y<1)?"none":"";
  field.src=globalPic.src;
  field.width=x;
  field.height=y;
}

Du coté de l'éditeur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
 <a id="bouton" href="javascript:preview()">Prévisualiser</a>
<div><label><span>Prévisualisation : </span> 
 <br />
<div id='preview'>
<img alt="Graphic will preview here" id="previewField" src="spacer.gif">
<br />
</div>

Lorsque je clique une première fois sur le bouton "Prévisualiser" aucune image n'apparait mais on voit bien dans la barre du navigateur "En attente de www.lilyserv.net". Si je clique une deuxième fois l'image générée apparait bien.

La création de l'image par le serveur lilypond est assez longue (plus de 10 secondes) et j'ai essayé de modifier la durée du setTimeout mais cela ne résout pas mon problème.

Pourquoi cela ne fonctionne qu'après avoir cliqué deux fois sur prévisualiser ?

Merci

[SpaceFrog]

c'est peut être sur le src qu'il faut mettre le setTimeout non ?

[chris28200]

c'est peut être sur le src qu'il faut mettre le setTimeout non ?

J'ai essayé mais cela n'a rien changé.

Par contre en simplifiant le script l'image apparait bien la première fois :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function preview(){
  var source='http://www.lilyserv.net/bashserver.php?code='+lilycode.getCode()+'&format=png' ;
  globalPic=new Image();
  globalPic.src=source;
  setTimeout("applyChanges()",200);
}
 
var globalPic;
function applyChanges(){
  var field=document.getElementById(outImage);
 
  field.src=globalPic.src;
 
}

Par contre si l'image générée est trop grande il n'y a plus le système pour la redimenssionner. Avez-vous une idée pourquoi le code de redimenssion empêche l'image de s'afficher ?

[SpaceFrog]

c'est bien là que l'image mets du temps à se générer non :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var source='http://www.lilyserv.net/bashserver.php?code='+lilycode.getCode()+'&format=png' ;

donc je tenterais un complete sur le src ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(monimage.complete)