Create a Visual Image Library Using HTML5 Canvas: HTML5 Code and Data Gathering
written by David Catuhe
Last week in our tutorial on How To Create a Visual Library of Images in HTML5 Canvas, we provided you with an overview of an application that will allow us to display a Magic the Gathering cards collection, and discussed the tools we will use. This week we will show you the HTML5 code that is used, and we will delve into data gathering.
The HTML 5 page
Our page will be built around an HTML 5 canvas which will be used to draw the cards:
If we dissect this page, we can note that it is divided into two parts:
- The header part with the title, the logo and the special mentions
- The main part (section) holds the canvas and the tooltips that will display the status of the application. There is also a hidden image (backImage) used as source for not yet loaded cards.
To build the layout of the page, a style sheet (full.css) is applied. Style sheets are a mechanism used to change the tags styles (in HTML, a style defines the entire display options for a tag):
Thus, this sheet is responsible for setting up the following display:
Style sheets are powerful tools that allow an infinite number of displays. However, they are sometimes complicated to setup (for example if a tag is affected by a class, an identifier and its container). To simplify this setup, the development bar of Internet Explorer 9 is particularly useful because we can use it to see styles hierarchy that is applied to a tag.
For example let’s take a look at the waitText tooltip with the development bar. To do this, you must press F12 in Internet Explorer and use the selector to choose the tooltip:
Once the selection is done, we can see the styles hierarchy:
Thus, we can see that our div received its styles from the body tag and the .tooltip entry of the style sheet.
With this tool, it becomes possible to see the effect of each style (which can be disabled). It is also possible to add new style on the fly.
Another important point of this window is the ability to change the rendering mode of Internet Explorer 9. Indeed, we can test how, for example, Internet Explorer 8 will handle the same page. To do this, go to the [Browser mode] menu and select the engine of Internet Explorer 8. This change will especially impact our tooltip as it uses border-radius (rounded edge) and box-shadow that are features of CSS 3:
Internet Explorer 9
Internet Explorer 8
Our page provides a graceful degradation as it still works (with no annoying visual difference) when the browser does not support all the required technologies.
Now that our interface is ready, we will take a look at the data source to retrieve the cards to display.
The server provides the cards list using JSON format on this URL:
It takes one parameter (colorString) to select a specific color (0 = all).
Thus, in our case to connect to the URL of our server and get the cards list, we could go through a XmlHttpRequest and have fun to parse the returned JSON. Or we can use jQuery .
So we will use the getJSON function which will take care of everything for us:
As we can see, our function stores the cards list in the listOfCards variable and calls two jQuery functions:
- text that change the text of a tag
- slideToggle that hides (or shows) a tag by animating its height
The listOfCards list contains objects whose format is:
- ID: unique identifier of the card
- Path: relative path of the card (without the extension)
It should be noted that the URL of the server is called with the “?jsoncallback=?” suffix. Indeed, Ajax calls are constrained in terms of security to connect only to the same address as the calling script. However, there is a solution called JSONP that will allow us to make a concerted call to the server (which of course must be aware of the operation). And fortunately, jQuery can handle it all alone by just adding the right suffix.
Once we have our cards list, we can set up the pictures loading and caching.
This article was reprinted with permission from Microsoft Corporation. The original is available here. This site does business with Microsoft Corporation.