131 lines
12 KiB
HTML
131 lines
12 KiB
HTML
|
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Using StrokeCSIM()</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch10.html" title="Chapter 10. Using CSIM (Client side image maps)"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Using StrokeCSIM()</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 10. Using CSIM (Client side image maps)</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Using StrokeCSIM()"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2536011"></a>Using StrokeCSIM()</h2></div></div></div>
|
|||
|
|
|
|||
|
|
<p>The simplest way of creating a creating a CSIM image is with the
|
|||
|
|
<code class="code">StrokeCSIM()</code> method. As mentioned before this method actually
|
|||
|
|
returns a (small) HTML page containing both the image-tag as well as the image map
|
|||
|
|
specification. Hence it is not possible to use a script that ends with this method
|
|||
|
|
in a standard image-tags src property.</p>
|
|||
|
|
<p>There are two ways to create CSIM (or get hold of) the image maps</p>
|
|||
|
|
<div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
|
|||
|
|
<p>Use the CSIM image script as the target in a standard anchor reference,
|
|||
|
|
for example </p>
|
|||
|
|
<p>
|
|||
|
|
</p><pre class="screen"><a href="mycsimscript.html"> </pre><p>
|
|||
|
|
</p>
|
|||
|
|
<p>This has the drawback that the image page will only contain the image and
|
|||
|
|
nothing else.</p>
|
|||
|
|
</li><li class="listitem">
|
|||
|
|
<p>The other way will allow the image script to be included in an arbitrary
|
|||
|
|
HTML page by just including the image script at the wanted place in the HTML
|
|||
|
|
page using any of the standard "include" php statement. For example </p>
|
|||
|
|
<p>
|
|||
|
|
</p><pre class="screen"><h2> This is an CSIM image </h2>
|
|||
|
|
|
|||
|
|
<?php include "mycsimscript.php" ?></pre><p>
|
|||
|
|
</p>
|
|||
|
|
</li></ol></div>
|
|||
|
|
<p>Note: If there are several CSIM images on the same page it is necessary to use
|
|||
|
|
"include_once" in the scripts for the inclusion of
|
|||
|
|
"<code class="filename">jpgraph.php</code>" and the other jpgraph library files since the
|
|||
|
|
files will be included multiple times on the same page and one or more "<span class="italic">Already defined error</span>" will be displayed.</p>
|
|||
|
|
<p>The process to replace <code class="code">Stroke()</code> with <code class="code">StrokeCSIM()</code> is
|
|||
|
|
strait forward. Replace all existing calls to <code class="code">Stroke()</code> with the
|
|||
|
|
equivalent calls to <code class="code">StrokeCSIM()</code>.</p>
|
|||
|
|
<div class="sect2" title="Optional argument to StrokeCSIM()"><div class="titlepage"><div><div><h3 class="title"><a name="id2536113"></a>Optional argument to StrokeCSIM()</h3></div></div></div>
|
|||
|
|
|
|||
|
|
<p>Once difference compared with Stroke() is that if a filename is supplied to
|
|||
|
|
the <code class="code">StrokeCSIM()</code> method it does not specify a file to write an
|
|||
|
|
image to as is the case with Stroke(). The signature for the method is</p>
|
|||
|
|
<p>
|
|||
|
|
</p><pre class="screen">StrokeCSIM($aScriptName='auto', $aCSIMName='', $aBorder=0)</pre><p>
|
|||
|
|
</p>
|
|||
|
|
<p>The first (optional) argument is the name of the actual image script file
|
|||
|
|
including the extension. So for example if the image script is called
|
|||
|
|
"<code class="filename">mycsimscript.php</code>" the call should be </p>
|
|||
|
|
<p>
|
|||
|
|
</p><pre class="screen"> $graph -> StrokeCSIM ( 'mycsimscript.php' ) </pre><p>
|
|||
|
|
</p>
|
|||
|
|
<p>By using the predefined name 'auto'. This will be done automatically.</p>
|
|||
|
|
<p>
|
|||
|
|
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
|
|||
|
|
<p>Why does the script name need to be used as the first parameter? The
|
|||
|
|
reason is that in the creation of the HTML page which is sent back we
|
|||
|
|
need to refer to the script in the image tag. In older versions of PHP
|
|||
|
|
there where no 100% way of getting hold of the actual script name in all
|
|||
|
|
circumstances and it was then necessary to specify it here. In PHP5 (and
|
|||
|
|
newer version of PHP4) this is no longer a problem but this parameter is
|
|||
|
|
still kept for backward compatibility.</p>
|
|||
|
|
</div><p>
|
|||
|
|
</p>
|
|||
|
|
<p>The other arguments to <code class="code">StrokeCSIM()</code> are optional as well. The
|
|||
|
|
second argument specifies the id that connect the map with the corresponding
|
|||
|
|
image. Please note that if several CSIM images are used in the same HTML page it
|
|||
|
|
is necessary to specify the image map name as the second parameter since all
|
|||
|
|
image maps must be unique to properly match each image map against each image.
|
|||
|
|
Please consult the class reference <code class="code">StrokeCSIM()</code> for more
|
|||
|
|
details.</p>
|
|||
|
|
<p>The final argument specifies whether the image should have border or
|
|||
|
|
not.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="sect2" title="How does StrokeCSIM() work?"><div class="titlepage"><div><div><h3 class="title"><a name="id2536192"></a>How does StrokeCSIM() work?</h3></div></div></div>
|
|||
|
|
|
|||
|
|
<p>Knowledge of the exact technical details of the way <code class="code">StrokeCSIM()</code>
|
|||
|
|
works is probably not needed by many people but for completeness we outline
|
|||
|
|
those details in this short section.</p>
|
|||
|
|
<p>The fundamental issue we have to solve is that we must be able to call the
|
|||
|
|
image script in two modes. When the user includes the image script the
|
|||
|
|
<code class="code">StrokeCSIM()</code> method should return the HTML page but when the
|
|||
|
|
image script is later called directly in the image tag it must not return an
|
|||
|
|
HTML page but rather the actual image.</p>
|
|||
|
|
<p>The way this is solved is by using one <code class="code">GET</code> argument which is
|
|||
|
|
passed on automatically when we use the image script name in the
|
|||
|
|
<span class="markup"><img></span>-tag.</p>
|
|||
|
|
<p>A look at the generated HTML from StrokeCSIM() will make this clear. In <a class="xref" href="ch10s04.html#fig.generated-csim-html-code" title="Figure 10.1. Example of generated HTML code for StrokeCSIM()">Figure 10.1. Example of generated HTML code for StrokeCSIM()</a> the resulting HTML code after
|
|||
|
|
running the example script <code class="filename">bar_csimex1.php</code> is shown. The
|
|||
|
|
argument to the src-property of the image tag is not simply the script name but
|
|||
|
|
the script name with a additional argument, <code class="code">?_jpg_csimd=1</code>. This
|
|||
|
|
argument is passed on to the library which then will run the script again but
|
|||
|
|
this time only generate the image and not the HTML. (In the JpGraph internal
|
|||
|
|
code this pre-defined argument is checked for and if it exists the image is send
|
|||
|
|
back and not the HTML page.)</p>
|
|||
|
|
<p>
|
|||
|
|
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
|
|||
|
|
<p>The actual string name of this parameter is defined by a
|
|||
|
|
<code class="code">DEFINE</code> statement in JpGraph,
|
|||
|
|
<code class="code">_CSIM_DISPLAY</code>.</p>
|
|||
|
|
</div><p>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
</p><div class="figure"><a name="fig.generated-csim-html-code"></a><p class="title"><b>Figure 10.1. Example of generated HTML code for StrokeCSIM()</b></p><div class="figure-contents">
|
|||
|
|
|
|||
|
|
<pre class="screen"><map name="__mapname1828__" id="__mapname1828__" >
|
|||
|
|
<area shape="poly" coords="74, 210, 74, 165, 92, 165, 92, 210" href="bar_clsmex1.php#1" title="val=12" alt="val=12" />
|
|||
|
|
<area shape="poly" coords="118, 210, 118, 112, 136, 112, 136, 210" href="bar_clsmex1.php#2" title="val=26" alt="val=26" />
|
|||
|
|
<area shape="poly" coords="162, 210, 162, 176, 180, 176, 180, 210" href="bar_clsmex1.php#3" title="val=9" alt="val=9" />
|
|||
|
|
<area shape="poly" coords="206, 210, 206, 146, 224, 146, 224, 210" href="bar_clsmex1.php#4" title="val=17" alt="val=17" />
|
|||
|
|
<area shape="poly" coords="250, 210, 250, 93, 268, 93, 268, 210" href="bar_clsmex1.php#5" title="val=31" alt="val=31" />
|
|||
|
|
</map>
|
|||
|
|
<img src="bar_csimex1.php?_jpg_csimd=1" ismap="ismap" usemap="#__mapname1828__" border="0" width="310" height="250" alt="" />
|
|||
|
|
</pre>
|
|||
|
|
</div></div><p><br class="figure-break">
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
</p><div class="note" title="Note" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Note</h3>
|
|||
|
|
<p>As the astute reader has come to realize CSIM scripts has a
|
|||
|
|
performance impact in that each script has to be run twice. Once to get
|
|||
|
|
hold of all the coordinates and generate the image and a second time via
|
|||
|
|
the <img> tag in generated HTML. The library is intelligent enough to
|
|||
|
|
minimize the code to run so that it only runs what is absolutely
|
|||
|
|
necessary. This means that roughly 75% has to be run which yields a
|
|||
|
|
total overhead of around 1.75 times when generating a CSIM image.</p>
|
|||
|
|
</div><p>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="sect2" title="Image maps and the cache system"><div class="titlepage"><div><div><h3 class="title"><a name="id2536305"></a>Image maps and the cache system</h3></div></div></div>
|
|||
|
|
|
|||
|
|
<p>For version 1.9 and later the cache system has been extended to include the
|
|||
|
|
CSIM maps as well. For each CSIM graph two files are stored in the cache, the
|
|||
|
|
image file itself as well as the wrapper HTML with the actual image map. </p>
|
|||
|
|
</div>
|
|||
|
|
</div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch10.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>
|