Thursday, December 5, 2024
HomeNews

Create a Visual Image Library Using HTML5 Canvas: HTML5 Code and Data Gathering

By HTMLGoodies Staff

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:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset=”utf-8″ />
  5.     <title>Bolas Lenses</title>
  6.     <link href=”Content/full.css” rel=”stylesheet” type=”text/css” />
  7.     <link href=”Content/mobile.css” rel=”stylesheet” type=”text/css” media=”screen and (max-width: 480px)” />
  8.     <link href=”Content/mobile.css” rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” />
  9.     <script src=”Scripts/jquery-1.5.1.min.js” type=”text/javascript”></script>
  10. </head>
  11. <body>
  12.     <header>
  13.         <div id=”legal”>
  14.             Cards scanned by <a href=”http://www.slightlymagic.net/”>MWSHQ Team</a><br />
  15.             Magic the Gathering official site : <a href=”http://www.wizards.com/Magic/TCG/Article.aspx?x=mtg/tcg/products/allproducts”>
  16.                 http://www.wizards.com/Magic</a>
  17.             <div id=”cardsCount”>
  18.             </div>
  19.         </div>
  20.         <div id=”leftHeader”>
  21.             <img id=”pictureCell” src=”/Content/MTG Black.png” alt=”Bolas logo” id=”bolasLogo” />
  22.             <div id=”title”>
  23.                 Bolas Lenses
  24.             </div>
  25.         </div>
  26.     </header>
  27.     <section>
  28.         <img src=”Content/Back.jpg” style=”display: none” id=”backImage” alt=”backImage”
  29.             width=”128″ height=”128″ />
  30.         <canvas id=”mainCanvas”>
  31.                     Your browser does not support HTML5 canvas.
  32.         </canvas>
  33.         <div id=”stats” class=”tooltip”>
  34.         </div>
  35.         <div id=”waitText” class=”tooltip”>
  36.             Loading data…
  37.         </div>
  38.     </section>
  39.     <!–Scripts–>
  40.     <script src=”Bolas/bolasLenses.animations.js” type=”text/javascript”></script>
  41.     <script src=”Bolas/bolasLenses.mouse.js” type=”text/javascript”></script>
  42.     <script src=”Bolas/bolasLenses.cache.js” type=”text/javascript”></script>
  43.     <script src=”Bolas/bolasLenses.js” type=”text/javascript”></script>
  44. </body>
  45. </html>

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):

  1. html, body
  2. {
  3.     height: 100%;
  4. }
  5.  
  6. body
  7. {
  8.     background-color: #888888;
  9.     font-size: .85em;
  10.     font-family: “Segoe UI, Trebuchet MS” , Verdana, Helvetica, Sans-Serif;
  11.     margin: 0;
  12.     padding: 0;
  13.     color: #696969;
  14. }
  15.  
  16. a:link
  17. {
  18.     color: #034af3;
  19.     text-decoration: underline;
  20. }
  21.  
  22. a:visited
  23. {
  24.     color: #505abc;
  25. }
  26.  
  27. a:hover
  28. {
  29.     color: #1d60ff;
  30.     text-decoration: none;
  31. }
  32.  
  33. a:active
  34. {
  35.     color: #12eb87;
  36. }
  37.  
  38. header, footer, nav, section
  39. {
  40.     display: block;
  41. }
  42.  
  43. table
  44. {
  45.     width: 100%;
  46. }
  47.  
  48. header, #header
  49. {
  50.     position: relative;
  51.     margin-bottom: 0px;
  52.     color: #000;
  53.     padding: 0;
  54. }
  55.  
  56. #title
  57. {
  58.     font-weight: bold;
  59.     color: #fff;
  60.     border: none;
  61.     font-size: 60px !important;
  62.     vertical-align: middle;
  63.     margin-left: 70px
  64. }
  65.  
  66. #legal
  67. {
  68.     text-align: right;
  69.     color: white;
  70.     font-size: 14px;
  71.     width: 50%;
  72.     position: absolute;
  73.     top: 15px;
  74.     right: 10px
  75. }
  76.  
  77. #leftHeader
  78. {
  79.     width: 50%;
  80.     vertical-align: middle;
  81. }
  82.  
  83. section
  84. {
  85.     margin: 20px 20px 20px 20px;
  86. }
  87.  
  88.     #mainCanvas{
  89.     border: 4px solid #000000;
  90. }
  91.  
  92. #cardsCount
  93. {
  94.     font-weight: bolder;
  95.     font-size: 1.1em;
  96. }
  97.  
  98. .tooltip
  99. {
  100.     position: absolute;
  101.     bottom: 5px;
  102.     color: black;
  103.     background-color: white;
  104.     margin-right: auto;
  105.     margin-left: auto;
  106.     left: 35%;
  107.     right: 35%;
  108.     padding: 5px;
  109.     width: 30%;
  110.     text-align: center;
  111.     border-radius: 10px;
  112.     -webkit-border-radius: 10px;
  113.     -moz-border-radius: 10px;
  114.     box-shadow: 2px 2px 2px #333333;
  115. }
  116.  
  117. #bolasLogo
  118. {
  119.     width: 64px;
  120.     height: 64px;
  121. }
  122.  
  123. #pictureCell
  124. {
  125.     float: left;
  126.     width: 64px;
  127.     margin: 5px 5px 5px 5px;
  128.     vertical-align: middle;
  129. }

Thus, this sheet is responsible for setting up the following display:

untitled

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:

image

Once the selection is done, we can see the styles hierarchy:

image

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:

image image

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.

Data gathering

The server provides the cards list using JSON format on this URL:

Sourire.

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.

Previous article
SyCara Announces Release of SEO Health Reports Package
Next article
Learn CSS3 A-Z: How To Use CSS3’s Text Styling Properties
HTMLGoodies Staff
HTMLGoodies Staff

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Advertisers

Advertise with TechnologyAdvice on HTMLGoodies and our other developer-focused platforms.

Advertise with Us

Menu

Our Brands

Property of TechnologyAdvice.
© 2024 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.