Generation d images en temps reel

[beni_]

Bonjour a tous
Je vous explique mon probleme:

Je travaille sur des bases de donnees en temps reel. Je dois developper une appli qui permet de faire du monitoring sur une certaine table.


dans mon code j ai donc quelque chose qui ressemble a ca :

<div id="DisplayCalls" style="height:400px;overflow:auto;">
</div>

que je remplis tout simplement par :

function getCalls()
{
new Ajax.Updater( 'DisplayCalls', 'calls.php',
{
onSuccess: function() { window.setTimeout( getCalls, 500 ); }
} );
}
getCalls();

toutes les demi secondes, je recois biens les resultats de ma requete sans problemes.

Maintenant j'ai rajoute un autre div, dans lequel j'aimerai inserer des images generees a partir de la meme table en utilisant la GDLIB de PHP. Ce nouveau div malheureusement ne renvoit que ca :

�PNG 

Est ce que quelqu'un aurait une solution ?

Merci

[DoubleU]

Ton script php te renvoie quoi exactement?

PS : pense à la balise code, le # dans l'éditeur

[beni_]

Envoyé par DoubleU

Ton script php te renvoie quoi exactement?

PS : pense à la balise code, le # dans l'éditeur

J'ai un script calls.php qui me renvoie un tableau contenant des appels entrants et sortants. Celui-ci renvoit de l'html, donc pas de probs, tout s affiche et se raffraichit comme prevu.

J'ai un deuxieme script qui s'appelle stats.php aui lui va faire certains calculs sur la meme table et generer des graphiques (genre camembert) en png, en utilisant GDGraph-2.1.0 (trouve sur sourceforge) se basant sur la gd lib de php. le script marche. quand je l'appelle seul il me renvoit bien une image. mais quand j'utilise cette fonction AJAX :

Code :

1
2
3
4
5
6
7
8
function getStats()
{
    new Ajax.Updater( 'DisplayStats', 'stats.php', 
                      {
                          onSuccess: function() { window.setTimeout( getStats, 500 ); }
                      } );
}
getStats();

qui est la meme que celle citee precedemment, le div n affiche que le code esoterique que j ai deja cite aussi...

[DoubleU]

Si tu renvoies l'image, c'est normal.

Ajax.Updater récupère le xhr.responseText et le colles dans ta div. Si tu lui renvoies une image, du binaire donc, il va convertir ces bits en string et tu récupères effectivement tes caractères psychédéliques.

Ta solution serait de retourner du html genre: <img src="laSourceDeTonImageGenerée" /> de facon à ce qu'a chaque update, il remplace l'ancienne balise img par la nouvelle.

[beni_]

Ok, ca marche!
J'ai cree un fichier stats2.php qui utilise la balise img avec come src le fichier stats.php.
mais ca a fait apparaitre un autre probleme.
L'image s'affiche bien, mais ne se raffraichit pas, je soupconne le cache d'y etre pour quelque chose...
Ptite solution?

[DoubleU]

Code :

<img src="laSourceDeTonImageGenerée.png?cachebuster=xxxx" />

Avec cachebuster une valeur aléatoire que tu génères pour forcer à re-télécharger l'image.

Ou si ca marche pas, un nom d'image différent, aléatoire à chaque fois.

[beni_]

Merci c'est cool, ca marche. Mais vu la performance du truc en local, j'ose meme pas imaginer a distance ce que ca va donner. Je vais garder cette option sous le coude en dernier ressort, mais je pense qu il va falloir trouver un moyen plus efficace de generer des images a la volee et de les afficher
(SVG ... ?)
Si vous avez des suggestions je suis preneur.
Merci