htmldriver.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE>HTML driver</TITLE>
  5. <META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
  6. <link rel="stylesheet" href="grassdocs.css" type="text/css">
  7. </HEAD>
  8. <BODY bgColor=white>
  9. <img src="grass_logo.png" alt="GRASS logo"><hr align=center size=6 noshade>
  10. <h2>NAME</h2>
  11. <em><b>HTML driver</b></em> - display driver to create HTML image maps.
  12. <h2>DESCRIPTION</h2>
  13. The HTML driver allows the generation of HTML image maps for area
  14. vector data. HTML image maps are used in conjunction with images to
  15. provide unique URL targets for different portions of an image. The
  16. HTML driver can create both client-side image maps embedded into HTML
  17. files, or server-side image maps used by web server software.
  18. <p>
  19. Polygons can at most have 100 vertices (this limit imposed by HTML
  20. image map formats, see <b>GRASS_HTMLMAXPOINTS</b> below.) The driver
  21. will attempt to trim polygons that have more that 100 vertices by
  22. removing vertices with the least amount of angle to the next
  23. vertice. Also, any polygon that is entirely bounded by another polygon
  24. will be discarded.
  25. <p>
  26. Text written to the driver before polygons are used as the HREF tag
  27. for all subsequent polygons written. All polygons that exist in a
  28. vector map will have the same HREF tag.
  29. <p>
  30. The only GRASS display commands that should be used with this driver
  31. are:
  32. <ul>
  33. <li><em><a href="d.text.html">d.text</a></em> - pass href
  34. information for resulting image maps.</li>
  35. <li><em><a href="d.vect.html">d.vect</a></em> - draw polygons from a
  36. vector map.</li>
  37. </ul>
  38. <h2>USAGE</h2>
  39. <h3>Environment variables</h3>
  40. The HTML driver can be enabled by
  41. setting <b>GRASS_RENDER_IMMEDIATE</b> variable, eg.
  42. <div class="code"><pre>
  43. export GRASS_RENDER_IMMEDIATE=html
  44. </pre></div>
  45. Several environment variables effect the operation of the HTML driver:
  46. <ul>
  47. <li><b>GRASS_WIDTH=xxx</b><br>
  48. the width of the image map (default is 640).
  49. </li>
  50. <li><b>GRASS_HEIGHT=yyy</b><br>
  51. the height of the image map (default is 480).
  52. </li>
  53. <li><b>GRASS_HTMLTYPE=type</b><br> type of image mape to create
  54. (default is CLIENT):
  55. <dl>
  56. <dd><tt><b>CLIENT</b></tt> &nbsp;&nbsp; Netscape/IE client-side
  57. image map (NAME="map").</dd>
  58. <dd><tt><b>APACHE</b></tt> &nbsp;&nbsp; Apache/NCSA server-side image
  59. map.</dd>
  60. <dd><tt><b>RAW</b></tt>
  61. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Raw url and polygon
  62. vertices (<i>url&nbsp; x1&nbsp; y1&nbsp; x2&nbsp; y2&nbsp;
  63. .....</i>), suitable for conversion to CERN server format, or
  64. any other format with user supplied conversion program.</dd>
  65. </dl>
  66. </li>
  67. <li><b>GRASS_HTMLFILE=filename</b><br>
  68. specifies the resulting file to store the html image map, default
  69. is <tt>htmlmap</tt>. Files without absolute path names are written
  70. in the current directory where the driver was started.
  71. <br>
  72. <em>Any existing file of the same name is overwritten without
  73. warning.</em>
  74. </li>
  75. <li><b>GRASS_HTMLMINDIST=n</b><br>
  76. specifies the minimum distance in pixels that a point must change
  77. from the previous point to keep in the list of vertices for a
  78. polygon. The default is <tt>2</tt>, which means that a point's x
  79. and y difference from the previous point must change by a number
  80. of pixels greater than this value. This parameter helps to
  81. eliminate closely spaced points.
  82. </li>
  83. <li><b>GRASS_HTMLMINBBOX=n</b><br>
  84. specifies the minimum bounding box dimensions to record a polygon
  85. as a clickable area. The default is <tt>2</tt>, which means that a
  86. polygon with a bounding box of less than this value is not
  87. included. This parameter helps to eliminate polygons than are a
  88. point or line.
  89. </li>
  90. <li><b>GRASS_HTMLMAXPOINTS=n</b><br>
  91. specifies the maximum number of vertices included in a polygon's
  92. clickable area. The default is <tt>99</tt>. Some browsers can only
  93. accommodate polygons of 100 vertices or less. The HTMLMAP driver
  94. automatically ensures that a polygon is closed by making the last
  95. point the same as the first point.</li>
  96. </ul>
  97. <h3>Example</h3>
  98. Start up the driver
  99. <div class="code"><pre>
  100. d.mon start=html
  101. </pre></div>
  102. Display text strings (HREF's) and polygons
  103. <div class="code"><pre>
  104. echo "http://www.no-such-place.net/area51/" | d.text
  105. d.vect map=area51
  106. echo "http://www.roswell-nm.net/little/green/men.html" | d.text
  107. d.vect map=roswell
  108. </pre></div>
  109. Stop the driver when all polygon have been displayed. This will cause
  110. a file named 'htmlmap' to be created in your current directory.
  111. <div class="code"><pre>
  112. d.mon stop=html
  113. </pre></div>
  114. You will also want to create an image for your image map. Use the PNG
  115. driver and other utilities to create .gif or .jpg files.
  116. <i>The following example is somewhat out of date and refers to options
  117. available in GRASS 5.</i>
  118. <div class="code"><pre>
  119. # using previous GRASS_WIDTH &amp; GRASS_HEIGHT
  120. d.mon start=png
  121. d.rast map=terrain
  122. d.vect map=area51 fillcolor=white linecolor=blue
  123. d.vect map=roswell fillcolor=yellow linecolor=blue
  124. d.vect map=states color=green
  125. d.vect map=roads color=black
  126. d.mon stop=png
  127. <!-- ???? FIXME -->
  128. # make the region the same as the newly created cell for ppm export
  129. g.region save=saved.reg
  130. g.region raster=D_cell
  131. r.out.ppm -q input=D_cell output=alien.ppm
  132. # use the netpbm utilities to create a gif (quantize if needed)
  133. ppmquant 128 &lt;alien.ppm | ppmtogif &gt;alien.gif
  134. # assemble some html with the image and the image map
  135. echo '&lt;html&gt;&lt;body&gt;&lt;img src="alien.gif" usemap="#map"&gt;' &gt;alien.html
  136. cat htmlmap &gt;&gt;alien.html
  137. echo '&lt;/body&gt;&lt;/html&gt;' &gt;&gt;alien.html
  138. # don't forget to reset your region
  139. g.region region=saved.reg
  140. # take a look and test it out
  141. netscape file:`pwd`/alien.html &amp;
  142. </pre></div>
  143. <h2>NOTES</h2>
  144. HTML was adapted from the CELL driver in GRASS 4.3.
  145. Point-in-polygon test code was lifted from Randolph Franklin's web
  146. page, see
  147. <ul>
  148. <li><a href="http://www.ecse.rpi.edu/Homepages/wrf/">http://www.ecse.rpi.edu/Homepages/wrf/</a>
  149. </li>
  150. <li><a href="http://www.ecse.rpi.edu/Homepages/wrf/research/geom/pnpoly.html">http://www.ecse.rpi.edu/Homepages/wrf/research/geom/pnpoly.html</a>
  151. </li>
  152. </ul>
  153. <p>
  154. If you create an HTML file with two or more images and image maps, you
  155. will need to edit the map names. The HTML driver creates its map
  156. with the name
  157. <tt>map</tt>. A small sed script can easily change the map name:
  158. <pre>
  159. sed -e 's/NAME="map"/NAME="foomap"/' &lt; htmlmap &gt; foomap.html
  160. </pre>
  161. <h2>SEE ALSO</h2>
  162. <em>
  163. <a href="cairodriver.html">Cairo driver</a>,
  164. <a href="pngdriver.html">PNG driver</a>,
  165. <a href="htmldriver.html">HTML driver</a>,
  166. <a href="variables.html">variables</a>
  167. <br><br>
  168. <a href="d.rast.html">d.rast</a>,
  169. <a href="d.vect.html">d.vect</a>,
  170. <a href="d.mon.html">d.mon</a>,
  171. <a href="d.erase.html">d.erase</a>,
  172. <a href="d.redraw.html">d.redraw</a>
  173. </em>
  174. <p>
  175. <i>Last changed: $Date$</i>