d72ac078
 Guillaume
Ajout graphe V1.1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
<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>
|