chapters/Background_DOM.tex

   1 The Document Object Model (DOM) represents a document as a tree like data structure with the document as a root node. The elements of the document are represented as children of either this root node or of a parent element. In addition, elements may have attributes which contain information about that particular element.
   2
   3 The World Wide Web Consortium (W3C) is an organisation devoted to the development of standards for structuring and rendering web pages based on industry needs. The DOM is used in and described by several W3C recommendations including XML\cite{xml2008-1.0}, HTML\cite{html2014-draft} and SVG\cite{svg2011-1.1}. XML is a general language which is intended for representing any tree-like structure using the DOM, whilst HTML and SVG are specifically intended for representing visual information to humans. These languages make use of Cascading Style Sheets (CSS)\cite{css2011-level2} for specifying the appearance of elements.
   4
   5 Version 5 of the Hypertext Markup Language (HTML5) is currently a candidate recommendation which aims to standardise the state of the art in technologies relating to web based documents. In HTML5 it is possible to achieve almost any level of control over both the structure and rendering of a document desirable. In particular, the language Javascript (based upon ECMAScript \cite{ecma-262}) can be used to dynamically alter a HTML5 document in response to user input or other events, including communication with HTTP servers.
   6
   7 The Scalable Vector Graphics (SVG) recommendation defines a language for representing vector images using the DOM. This is intended not only for stand alone images, but also for inclusion within HTML documents. In the SVG standard, each graphics primitive is an element in the DOM, whilst attributes of the element give information about how the primitive is to be drawn, such as path coordinates, line thickness, mitre styles and fill colours. Figure \ref{SVG} shows an example of an SVG image as rendered (left) and represented as text. The textual representation is syntactically a subset of XML and is similar to HTML.\footnote{The details of distinctions between these languages are beyond the scope of this report.} Here we have used \verb/<rect>/ elements to position rectangles and \verb/<path>/ elements to define a straight line and a filled region bounded by a cubic bezier spline; note that the points and type of curves are defined as a data attribute.
   8
   9
  10 \subsubsection{Javascript and the DOM}
  11
  12 Using Javascript, an element in the DOM can be selected by its type, class, name, or unique identifier, each of which may be specified as an attribute in the original DOM. Once an element is selected Javascript can be used to modify its attributes, add children below it in the DOM, or remove it from the DOM entirely.
  13
  14 For example, the following Javascript acting on the DOM described in Figure \ref{SVG} will change the fill colour of the curved region.
  15 \begin{minted}{javascript}
  16 var node = document.getElementById("curvedshape"); // Find the node by its unique id
  17 node.style.fill = "#000000"; // Change the ``style'' attribute and set the CSS fill colour
  18 \end{minted}
  19
  20 To illustrate the power of this technique we have produced an example to generate an SVG interactively using HTML. The example generates successive iterations of a particular type of fractal curve first described by Koch\cite{koch1904surune} in 1904 and a popular example in modern literature \cite{goldman_thefractal}. Unfortunately as it is currently possible to directly include W3C HTML in a PDF, we are only able to provide some examples of the output as static images in Figure \ref{koch}. The W3C has produced a primer describing the use of HTML5 and Javascript to produce interactive SVG's\cite{w3c2010svghtmlprimer}, and the HTML5 and SVG standards themselves include several examples.
  21
  22 In HTML5, Javascript is not restricted to merely manipulating the DOM to alter the appearance of a document. The \verb/<canvas>/ tag and associated API provide a means to directly set the values of pixels on a display. This sort of low level API is inteded for performance intensive graphical applications such as web based games\footnote{For an example by the author including both the canvas2d and experimental WebGL APIs see \url{http://rabbitgame.net}}. As Hayes points out, there is some similarity between the \verb/<canvas>/ API and the PostScript interpreted approach to drawing\cite{hayes2012pixelsor}.
  23
  24 \begin{figure}[H]
  25 \begin{minipage}[t]{0.65\textwidth}
  26 \begin{minted}{xml}
  27 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  28 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  29         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  30 <!-- These lines are comments to assist human readability -->
  31 <svg id="svg_example"
  32         xmlns="http://www.w3.org/2000/svg"
  33         version="1.1"
  34         width="104"
  35         height="186"
  36         transform="translate(1,0)">
  37
  38 <!-- The straight line -->
  39 <path id="straightline" d = "m 0, 0 104, 186"
  40         style="stroke:#000000;"/>
  41 <!-- The first (bottom) rectangle -->
  42 <rect id="rect1"
  43         x = "30" y = "20" width = "30" height = "150"
  44         style = "fill:#0000ff; fill-opacity:0.5;
  45                 stroke:#000000;"/>
  46 <!-- The curved region -->
  47 <path id="curvedshape"
  48         d = "m 57,185 c 0,0 57,-13 32,-43 -25,-30 -53,2 -25,
  49                 -30 28,-32 52,17 28,-32 -24,-50 -16,44 -35,12
  50                 -19,-32 13,-64 13,-64 0,0 40,-50 -0,-14 -40,36
  51                 -94,68 -59,109 35,41 45,62 45,62 z"
  52         style = "fill:#ff0000; fill-opacity:0.75;
  53                 stroke:#000000;"/>
  54 <!-- The second (top) rectangle -->
  55 <rect id="rect2"
  56         x = "12" y = "130" width = "60" height = "20"
  57         style = "fill:#00ff00; fill-opacity:0.5;
  58                 stroke:#000000;"/>
  59 </svg>
  60 \end{minted}
  61 \end{minipage}
  62 \begin{minipage}[t]{0.3\textwidth}
  63         \begin{figure}[H]
  64         \centering
  65         \includegraphics[width=1\textwidth]{figures/shape.pdf}
  66         \end{figure}
  67 \end{minipage}
  68         \caption{Vector image and a possible SVG representation}\label{SVG}
  69 \end{figure}
  70
  71 \begin{figure}[H]
  72 \begin{minipage}[t]{0.33\textwidth}
  73         \begin{figure}[H]
  74         \centering
  75         \includegraphics[width=0.8\textwidth]{figures/koch1.pdf}
  76         \end{figure}
  77 \end{minipage}
  78 \begin{minipage}[t]{0.33\textwidth}
  79         \begin{figure}[H]
  80         \centering
  81         \includegraphics[width=1\textwidth]{figures/koch2.pdf}
  82         \end{figure}
  83 \end{minipage}
  84 \begin{minipage}[t]{0.33\textwidth}
  85         \begin{figure}[H]
  86         \centering
  87         \includegraphics[width=0.9\textwidth]{figures/koch3.pdf}
  88         \end{figure}
  89 \end{minipage}
  90         \caption{Koch ``snowflakes'' generated using Javascript to modify an SVG DOM. The interactive HTML5 document can be found at \url{http://szmoore.net/ipdf/sam/figures/koch.html}}\label{koch}
  91 \end{figure}
  92
  93