Bilder dynamisch anzeigen

[instinct]

Angenommen ich habe einen Renderer, der mir ein sehr großes Bild erzeugt. Dieser teilt das Bild in kleine Kacheln auf und verteilt diese dann an einzelne Rechner im Netzwerk.

Mein Problem: Die einzelnen Rechner legen die jeweilige Kachel nach Fertigstellung in einen Ordner auf einem Server. Momentan ist es so, dass ich warte bis alle Kacheln fertig sind. Danach läuft ImageMagick über alle und macht ein Bild daraus, welches ich dann auf einer Webseite anzeige.

Ich hätte allerdings gern, dass die einzelnen Kacheln schon angezeigt werden, wenn noch nicht alle Kacheln da sind und zwar an der richtigen Position im Endbild.

Gibt es mit HTML oder Javascript eine Möglichkeit so etwas zu realisieren?

[DanMan]

Ohne genauere Erklärung kann dir wohl keiner helfen.

[instinct]

Was willste denn noch weiter wissen?

[Mark]

Geb den Kacheln doch einen Dateinamen wie "2-4.jpg", also zweite Reihe, vierte Spalte oder so aehnlich.

Deine Website zeigt dann halt (notfalls in einer Tabelle) alle Kacheln an.

<table>
<tr>
<td><img src="1-1.jpg" alt="Kachel1"></td>
<td><img src="1-2.jpg" alt="Kachel2"></td>
<td><img src="1-3.jpg" alt="Kachel3"></td>
</tr>
<tr>
<td><img src="2-1.jpg" alt="Kachel4"></td>
<td><img src="2-2.jpg" alt="Kachel5"></td>
<td><img src="2-3.jpg" alt="Kachel6"></td>
</tr>
<tr>
<td><img src="3-1.jpg" alt="Kachel7"></td>
<td><img src="3-2.jpg" alt="Kachel8"></td>
<td><img src="3-3.jpg" alt="Kachel9"></td>
</tr>
</table>


(Klar, Tabellenlayout, aber fuer sowas reichts doch)

[Gast]

Ach Jungens:

Du erstellst serverseitig einen Controller, der eine Liste mit den Dateien zurückgibt, die zum Zeitpunkt der Anfrage in dem besagten Verzeichnis liegen.

Clientseitig sammelst du alle Teilbilder, die du bereits hast und führst nun alle 2/1/0.5sec - je nach dem, was du für vertretbar hälst - einen AJAX-Request auf das Server-Script aus. Je nach dem, welche Bilddatei dort neu ist, fügst du entsprechend ein neues <img>-Element mit dem Pfad, den du vom Server zurückgeliefert bekommen hast.

[instinct]

Ach Jungens:

Du erstellst serverseitig einen Controller, der eine Liste mit den Dateien zurückgibt, die zum Zeitpunkt der Anfrage in dem besagten Verzeichnis liegen.

Clientseitig sammelst du alle Teilbilder, die du bereits hast und führst nun alle 2/1/0.5sec - je nach dem, was du für vertretbar hälst - einen AJAX-Request auf das Server-Script aus. Je nach dem, welche Bilddatei dort neu ist, fügst du entsprechend ein neues <img>-Element mit dem Pfad, den du vom Server zurückgeliefert bekommen hast.

Das wäre genau das, was ich will. Ich muss allerdings sagen, ich kenne mich mit AJAX und Javscript nun nicht so gut aus. Das fällt eigentlich nicht in meinen Aufgabenbereich. Könntest du mir daher ein paar nähere Indos geben, wie ich zum Beispiel diesen Controller auf dem Server erzeuge bzw. wie ich ihn dann clientseitig anspreche?
Das wär echt super.

[DanMan]

Es geht also nur ums JS. Ok, Beispiel:

Du gibst der Tabelle von Mark noch eine ID, und dann führst du z.B. das hier aus, nachdem du die JS-Library (http://www.domassistant.com/) installiert hast:

var imgReq = setInterval(function(){
DOMAssistant.AJAX.get("'URI/zur/test-adresse'", function(){
if(DOMAssistant.AJAX.getStatus() ==200){
$$("id_der_tabelle").parentNode.load(htmlGenerierendesScript.php);
clearInterval(imgReq);
}
elseif(DOMAssistant.AJAX.getStatus() !=202){
clearInterval(imgReq);
}
}, 1000);
(is Javascript - steht nur wg. dem Highlighter PHP da)
Das sollte alle 1000ms eine Anfrage an die URL schicken, auf die du testen willst. Wenn der Server fertig ist (200), dann wird das Bild geladen, und alles im Elternelement der Tabelle wird mit dem fertigen Bild (als HTML Schnipsel) ersetzt. Wenn ein anderer Status als 202 (Accepted) zurückkommt, dann brichts ab. Dafür musst du selbst sorgen, denn normaler Weise wird ein 404 zurückgegeben (Not found).

/me wartet auf den ersten, der jQuery oder so vorschlägt

[Marscel]

Also serverseitig könnte es zum Beispiel so aussehen, ist nicht getestet, mit Rails:
if complete?
render :json => {:status => "done"}
else
render :json => {:status => "loading", :files => Dir.glob("*")}
end

oder PHP:
if($complete) {
print json_encode(array("status" => "done"));
} else {
print json_encode(array("status" => "loading", "files" => $array_of_scandir));
}
($array_of_scandir ist ein Array von scandir(), aus dem die rel. Pfade und Ordner rausgefiltert sind)

Das ganze setzt natürlich voraus, das der Server weiß, wann er alle Bilder hat, und deswegen guckt, ob es complete ist oder nicht. Die Antwort ist ein JSON-String.

Frameworks wie jQuery/ExtJS und sicherlich andere haben einen JSON-Decoder, bei jQuery z.B. so
$.ajax({
url: "list_files.php", // whatever...
dataType: 'json',
data: {}, // Parameter
success: function(json) {
// - wenn json.status == "done", kille den Timer, fertig
// - wenn json.status == "loading", werte json.files aus und
// setze die Bilder zusammen
}
});


Das packst du in einen Timer. Anders als mein Vorposter würde ich direkt hier das Dokument verändern und nicht erst wieder den Server das HTML generieren lassen.

[instinct]

Super! Danke für eure Hilfe. Ich werde mich mal daran
versuchen und ggf auf euch zurückkommen, falls ich auf
Probleme stoße :)