Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here is a full example of a live gallery, based on REST services.</p> <p><strong>REST services (Jersey)</strong></p> <p>This service gives the content (filenames) of the image server directory (here <code>C:\Temp\hotfolder</code>).</p> <pre><code> // array of supported extensions static final String[] EXTENSIONS = new String[] { "jpg", "jpeg", "gif", "png", "bmp" }; // filter to identify images based on their extensions static final FilenameFilter IMAGE_FILTER = new FilenameFilter() { @Override public boolean accept(final File dir, final String name) { for (final String ext : EXTENSIONS) { if (name.endsWith("." + ext)) { return (true); } } return (false); } }; @GET @Path("folderImages") @Produces("text/json") public Response getFolderImages(@QueryParam("lastknown") String lastknown) { //Gets the contents of the folder (reverse order : more recent first) //see http://stackoverflow.com/questions/11300847/load-and-display-all-the-images-from-a-folder File dir = new File("C:\\Temp\\hotfolder"); File [] files = dir.listFiles(IMAGE_FILTER); Arrays.sort( files, new Comparator&lt;File&gt;() { public int compare(File f1, File f2) { if (f1.lastModified() &gt; f2.lastModified()) { return -1; } else if (f1.lastModified() &lt; f2.lastModified()) { return +1; } else { return 0; } } }); //Fills a list (from the more recent one, until the last known file) ArrayList&lt;String&gt; newfiles = new ArrayList&lt;String&gt;(); for (File f : files) { if (lastknown!=null &amp;&amp; f.getName().equals(lastknown)) break; newfiles.add(f.getName()); } //Answers the list as a JSON array (using google-gson, but could be done manually here) return Response.status(Status.OK).entity(new Gson().toJson(newfiles)).type("text/json").build(); } </code></pre> <p>Also this is the image service, needed for rendering each image individually.</p> <pre><code> @GET @Path("/images/{image}") @Produces("image/*") public Response getImage(@PathParam("image") String image) { File f = new File("C:\\Temp\\hotfolder\\" + image); if (!f.exists()) { throw new WebApplicationException(404); } String mt = new MimetypesFileTypeMap().getContentType(f); return Response.ok(f, mt).build(); } </code></pre> <p><strong>gallery.html</strong></p> <p>Html, with a little help of JQuery. This HTML polls every 5 seconds, asking for service if there is new files (more recent) than the last file known. Et voilà!</p> <p>You can notice we are using the jquery <code>.prepend</code> method to insert images dynamically at the beginning of the gallery div.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Folder demo&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Live gallery&lt;/h1&gt; &lt;div id="gallery1" style="border:1px solid black;padding:10px;"&gt;&lt;/div&gt; &lt;div id="info1"&gt;&lt;/div&gt; &lt;script&gt; var counter = 0; var lastknown = ""; function doPoll(){ $.get('rest/folderImages?lastknown='+lastknown, function(data) { counter++; $("#info1").html("&lt;pre&gt;Counter: " + counter + "&lt;br&gt;New files: " + data + "&lt;/pre&gt;"); for (var i=data.length-1; i&gt;=0; i--) { $("#gallery1").prepend("&lt;img src=\"rest/images/" + data[i] + "\" style=\"width:200px;height:200px\" /&gt;"); lastknown = data[i]; } setTimeout(doPoll,5000); }); } $(document).ready( doPoll ); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload