Thursday, December 30, 2010

Re: HTML5 - GWT pre-fetching binary files.

re. 1 - Best way to transfer
IMHO - Base64 encoded data in either JSON or XML, with standard gzip compression applied. Optionally (but recommended), rename the files to <MD5>.cache.xml or something similar, and set strong http cache headers.

If these files are only going to be used by a GWT application and you have the files at compile time, you can should consider using TextResource.

Base64 is the preferred format because you can directly render the string on a canvas using data:uri. You should also read Google Instant Previews Under the Hood - it explains how google transfers images using base64 encoding to the browser.

re. 2 Best way to store client side
Since you are targeting HTML5 capable browsers, localStorage seems the best solution. It has decent browser support, but the only caveat  is that localStorage can only store strings, not objects. This is another reason to use base64 encoded strings - they can easily be stashed into localStorage and consumed without much ado. 


--Sri


On 31 December 2010 06:05, ams <alan.snyder@gmail.com> wrote:
I'm working with medical images 500 slices typically 512x512 gray
scale that I would like to pre-fetch and display/manipulate in an
HTML5 canvas element. The files will typically be local, but since
this is GWT it will (as fas a I know) needs to be sent from the
server.

Since I'm using HTML5 this will target Chrome first, but I'd like to
support Safari and Firefox. IE (even version 9) can go take a hike.

I'm looking for opinions here an three questions.

#1) What is the best way to transfer down (pre-fetch 500) binary files
(array of integers).  Sending down an text array with int values seems
in efficient. This article about sending the file down encoded in XML
seems the best option I've found, but want to know if others here have
a different opinion.

Transfer binary data in an XML document
http://javaworld.com/javatips/jw-javatip117.html


#2)  The second question is how to store this data on the client side.
It likely will be the HTML5 Web Storage API as implements currently on
Chrome, but I'd like to here others thoughts on this.

#3) Also, I'm going to need to scroll through this images rather
quick, so was was thinking about have a bunch of canvas tags with
images preloaded, but only one visible at a time. An alternative it
have only one canvas take and draw on that anytime someone wants to
scroll though them. Which would be faster?

Thanks.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.


--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

No comments:

Post a Comment