146 lines
18 KiB
HTML
146 lines
18 KiB
HTML
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Chapter 17. Additional graph types</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="pt04.html" title="Part IV. Creating linear and non-linear graphs"></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">Chapter 17. Additional graph types</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Part IV. Creating linear and non-linear graphs</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="chapter" title="Chapter 17. Additional graph types"><div class="titlepage"><div><div><h2 class="title"><a name="id2577228"></a>Chapter 17. Additional graph types</h2></div></div></div><div class="toc"><p><b>Table of Contents</b></p><dl><dt><span class="sect1"><a href="ch17.html#sec.led-graph-type">17.1. LED bill boards</a></span></dt><dd><dl><dt><span class="sect2"><a href="ch17.html#id2578235">17.1.1. Cyrillic character support</a></span></dt></dl></dd><dt><span class="sect1"><a href="ch17s02.html">17.2. Captcha generation</a></span></dt><dd><dl><dt><span class="sect2"><a href="ch17s02.html#id2578426">17.2.1. Generating Captchas</a></span></dt></dl></dd><dt><span class="sect1"><a href="ch17s03.html">17.3. Canvas graphs</a></span></dt><dd><dl><dt><span class="sect2"><a href="ch17s03.html#id2578744">17.3.1. Creating a simple canvas</a></span></dt><dt><span class="sect2"><a href="ch17s03.html#id2578750">17.3.2. Adding lines and rectangles to a canvas</a></span></dt><dt><span class="sect2"><a href="ch17s03.html#id2578860">17.3.3. Using a canvas scale together with the shape class</a></span></dt></dl></dd></dl></div>
|
||
|
||
<p>These chapter describes the types of graphs supported by the library that is not a
|
||
standard graph type used to display data series. </p>
|
||
<div class="sect1" title="LED bill boards"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="sec.led-graph-type"></a>LED bill boards</h2></div></div></div>
|
||
|
||
<p>This feature allows the creation of displayed letters (some) and digits which have the
|
||
look of a 4x7 LED display. </p>
|
||
<p>In order to use this feature the module "<code class="filename">jpgraph_led.php</code>" must be
|
||
included.</p>
|
||
<p>
|
||
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
|
||
<p>In order to use the LED module the PHP installation must have multi-byte
|
||
strings enabled so that the function <code class="code">mb_strlen()</code> is available. This
|
||
is normally enabled at compile time for PHP by specifying the options
|
||
<code class="code">--enable-mbstring --enable-mbregex</code> when configuring the compile
|
||
options.</p>
|
||
</div><p>
|
||
</p>
|
||
<p>The figures below shows some samples of the characters supported and the available
|
||
colors</p>
|
||
<p>
|
||
</p><div class="informaltable">
|
||
<table border="0"><colgroup><col class="c1"></colgroup><tbody><tr><td>
|
||
<div class="figure"><a name="fig.ledex1"></a><p class="title"><b>Figure 17.1. LEDC_GREEN <code class="uri"><a class="uri" href="example_src/ledex1.html" target="_top">(<code class="filename">ledex1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex1.png" alt="LEDC_GREEN (ledex1.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex2"></a><p class="title"><b>Figure 17.2. LEDC_RED <code class="uri"><a class="uri" href="example_src/ledex2.html" target="_top">(<code class="filename">ledex2.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex2.png" alt="LEDC_RED (ledex2.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex3"></a><p class="title"><b>Figure 17.3. LEDC_YELLOW <code class="uri"><a class="uri" href="example_src/ledex3.html" target="_top">(<code class="filename">ledex3.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex3.png" alt="LEDC_YELLOW (ledex3.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex5"></a><p class="title"><b>Figure 17.4. LEDC_BLUE <code class="uri"><a class="uri" href="example_src/ledex5.html" target="_top">(<code class="filename">ledex5.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex5.png" alt="LEDC_BLUE (ledex5.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex6"></a><p class="title"><b>Figure 17.5. LEDC_GRAY <code class="uri"><a class="uri" href="example_src/ledex6.html" target="_top">(<code class="filename">ledex6.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex6.png" alt="LEDC_GRAY (ledex6.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex17"></a><p class="title"><b>Figure 17.6. LEDC_INVERTGRAY <code class="uri"><a class="uri" href="example_src/ledex17.html" target="_top">(<code class="filename">ledex17.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex17.png" alt="LEDC_INVERTGRAY (ledex17.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex7"></a><p class="title"><b>Figure 17.7. LEDC_CHOCOLATE <code class="uri"><a class="uri" href="example_src/ledex7.html" target="_top">(<code class="filename">ledex7.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex7.png" alt="LEDC_CHOCOLATE (ledex7.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex8"></a><p class="title"><b>Figure 17.8. LEDC_PERU <code class="uri"><a class="uri" href="example_src/ledex8.html" target="_top">(<code class="filename">ledex8.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex8.png" alt="LEDC_PERU (ledex8.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex9"></a><p class="title"><b>Figure 17.9. LEDC_GOLDENROD <code class="uri"><a class="uri" href="example_src/ledex9.html" target="_top">(<code class="filename">ledex9.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex9.png" alt="LEDC_GOLDENROD (ledex9.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex10"></a><p class="title"><b>Figure 17.10. LEDC_KHAKI <code class="uri"><a class="uri" href="example_src/ledex10.html" target="_top">(<code class="filename">ledex10.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex10.png" alt="LEDC_KHAKI (ledex10.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex11"></a><p class="title"><b>Figure 17.11. LEDC_OLIVE <code class="uri"><a class="uri" href="example_src/ledex11.html" target="_top">(<code class="filename">ledex11.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex11.png" alt="LEDC_OLIVE (ledex11.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex12"></a><p class="title"><b>Figure 17.12. LEDC_LIMEGREEN <code class="uri"><a class="uri" href="example_src/ledex12.html" target="_top">(<code class="filename">ledex12.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex12.png" alt="LEDC_LIMEGREEN (ledex12.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex13"></a><p class="title"><b>Figure 17.13. LEDC_FORESTGREEN <code class="uri"><a class="uri" href="example_src/ledex13.html" target="_top">(<code class="filename">ledex13.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex13.png" alt="LEDC_FORESTGREEN (ledex13.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex14"></a><p class="title"><b>Figure 17.14. LEDC_TEAL <code class="uri"><a class="uri" href="example_src/ledex14.html" target="_top">(<code class="filename">ledex14.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex14.png" alt="LEDC_TEAL (ledex14.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex15"></a><p class="title"><b>Figure 17.15. LEDC_STEELBLUE <code class="uri"><a class="uri" href="example_src/ledex15.html" target="_top">(<code class="filename">ledex15.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex15.png" alt="LEDC_STEELBLUE (ledex15.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr><tr><td>
|
||
<div class="figure"><a name="fig.ledex16"></a><p class="title"><b>Figure 17.16. LEDC_NAVY <code class="uri"><a class="uri" href="example_src/ledex16.html" target="_top">(<code class="filename">ledex16.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex16.png" alt="LEDC_NAVY (ledex16.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr></tbody></table>
|
||
</div><p>
|
||
</p>
|
||
<p>A LED display is constructed by creating an instance of class DigitalLED47</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">DigitalLED47::__construct($aRadius = 2, $aMargin= 0.6)</code></p>
|
||
<p>The first argument specifies the radius of each "led-light" and the second
|
||
argument the margin around each character. Adjusting the radius is the only
|
||
way to adjust the size of the LED characters. </p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>In order to generate the billboard the method </p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">DigitalLED47::Stroke($aValStr, $aColor , $aFileName =
|
||
'')</code></p>
|
||
<p><code class="code">$aValStr</code>, The string to be displayed</p>
|
||
<p><code class="code">$aColor</code>, one of the available colors as shown in the figures
|
||
above</p>
|
||
<p><code class="code">$aFileName</code>, An optional file name which specifies a file that
|
||
the image will be written to. No image will be streamed back to the browser
|
||
in this case.</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>is called with the string to be displayed as the first argument. The following code
|
||
snippet shows how to create a green LED bill board</p>
|
||
<p>
|
||
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
|
||
2
|
||
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$led = new DigitalLED74();
|
||
$led->Stroke('0123456789. ABCDEFGHIJKL',LEDC_GREEN);</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>In order to improve visual quality of the LED display it uses super sampling
|
||
internally to achieve the anti-alias smoothing effect. The number of oversampling is
|
||
specified with</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">DigitalLED47::SetSupersampling($aSuperSampling)</code></p>
|
||
<p>By default a 2:times super-sampling is used. Using any value higher than 4
|
||
does not give any visual improvements</p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>In the three figures below different levels of super sampling is used, in the left
|
||
most image no super sampling is used (super sampling=1), in the middle figure super
|
||
sampling=2 (the default) and in the rightmost figure super sampling is set to 4</p>
|
||
<p>
|
||
</p><div class="informaltable">
|
||
<table border="0"><colgroup><col class="c1"><col class="c2"><col class="c3"></colgroup><tbody><tr><td>
|
||
<div class="figure"><a name="fig.ledex4"></a><p class="title"><b>Figure 17.17. Supersampling=1 <code class="uri"><a class="uri" href="example_src/ledex4.html" target="_top">(<code class="filename">ledex4.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex4.png" alt="Supersampling=1 (ledex4.php)"></span> </div></div><br class="figure-break">
|
||
</td><td>
|
||
<div class="figure"><a name="fig.ledex4.1"></a><p class="title"><b>Figure 17.18. Supersampling=2 (default) <code class="uri"><a class="uri" href="example_src/ledex4.1.html" target="_top">(<code class="filename">ledex4.1.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex4.1.png" alt="Supersampling=2 (default) (ledex4.1.php)"></span> </div></div><br class="figure-break">
|
||
</td><td>
|
||
<div class="figure"><a name="fig.ledex4.2"></a><p class="title"><b>Figure 17.19. Supersampling=4 <code class="uri"><a class="uri" href="example_src/ledex4.2.html" target="_top">(<code class="filename">ledex4.2.php</code>)</a></code> </b></p><div class="figure-contents"> <span class="inlinemediaobject"><img src="images/ledex4.2.png" alt="Supersampling=4 (ledex4.2.php)"></span> </div></div><br class="figure-break">
|
||
</td></tr></tbody></table>
|
||
</div><p>
|
||
</p>
|
||
<div class="sect2" title="Cyrillic character support"><div class="titlepage"><div><div><h3 class="title"><a name="id2578235"></a>Cyrillic character support</h3></div></div></div>
|
||
|
||
<p>In addition to most of the basic latin characters the library also have some
|
||
support for Cyrillic characters. Due to the limed resolution (4x7) some more complex
|
||
cyrillic characters are not rendered very faithfully. The available rendering for
|
||
the cyrillic alphabet is shown in <a class="xref" href="ch17.html#fig.cyrillic-led" title="Figure 17.20. LED 4x7 Cyrillic alphabet support">Figure 17.20. LED 4x7 Cyrillic alphabet support</a></p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.cyrillic-led"></a><p class="title"><b>Figure 17.20. LED 4x7 Cyrillic alphabet support</b></p><div class="figure-contents">
|
||
|
||
<div class="informaltable">
|
||
<table border="0"><colgroup><col class="c1"></colgroup><tbody><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/led_cyrillic1.png" alt="LED 4x7 Cyrillic alphabet support"></span></p>
|
||
</td></tr><tr><td>
|
||
<p><span class="inlinemediaobject"><img src="images/led_cyrillic2.png" alt="LED 4x7 Cyrillic alphabet support"></span></p>
|
||
</td></tr></tbody></table>
|
||
</div>
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
<p>
|
||
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
|
||
<p>Since the library internally uses utf8 character encoding it means that
|
||
the string passed on to the library must also be encoded in utf8. In case
|
||
the characters have another encoding, say cp1251, they must first be
|
||
converted to utf8. This could for example be done by the PHP function
|
||
<code class="code">iconv()</code>..</p>
|
||
</div><p>
|
||
</p>
|
||
<p>(This is the only place in the library that is truly multi-byte text safe.)</p>
|
||
</div>
|
||
</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="pt04.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>
|