source: Dev/trunk/RGraph/libraries/RGraph.led.js @ 244

Last change on this file since 244 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 9.2 KB
RevLine 
[77]1    /**
2    * o------------------------------------------------------------------------------o
3    * | This file is part of the RGraph package - you can learn more at:             |
4    * |                                                                              |
5    * |                          http://www.rgraph.net                               |
6    * |                                                                              |
7    * | This package is licensed under the RGraph license. For all kinds of business |
8    * | purposes there is a small one-time licensing fee to pay and for non          |
9    * | commercial  purposes it is free to use. You can read the full license here:  |
10    * |                                                                              |
11    * |                      http://www.rgraph.net/LICENSE.txt                       |
12    * o------------------------------------------------------------------------------o
13    */
14   
15    if (typeof(RGraph) == 'undefined') RGraph = {};
16
17    /**
18    * The LED lights constructor
19    *
20    * @param object canvas The canvas object
21    * @param array  data   The chart data
22    */
23    RGraph.LED = function (id, text)
24    {
25        // Get the canvas and context objects
26        this.id                = id;
27        this.canvas            = document.getElementById(id);
28        this.context           = this.canvas.getContext ? this.canvas.getContext("2d") : null;
29        this.canvas.__object__ = this;
30        this.type              = 'led';
31        this.isRGraph          = true;
32
33
34        /**
35        * Compatibility with older browsers
36        */
37        RGraph.OldBrowserCompat(this.context);
38
39
40        /**
41        * Set the string that is to be displayed
42        */
43        this.text = text;
44       
45        /**
46        * The letters and numbers
47        */
48        this.lights = {
49            'a': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]],
50            'b': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0]],
51            'c': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,1],[0,1,1,0]],
52            'd': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,0]],
53            'e': [[1,1,1,1],[1,0,0,0],[1,0,0,0],[1,1,1,0],[1,0,0,0],[1,0,0,0],[1,1,1,1]],
54            'f': [[1,1,1,1],[1,0,0,0],[1,0,0,0],[1,1,1,0],[1,0,0,0],[1,0,0,0],[1,0,0,0]],
55            'g': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[1,0,1,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
56            'h': [[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]],
57            'i': [[0,1,1,1],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,1,1,1]],
58            'j': [[0,1,1,1],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,1,0,0]],
59            'k': [[1,0,0,1],[1,0,0,1],[1,0,1,0],[1,1,0,0],[1,0,1,0],[1,0,0,1],[1,0,0,1]],
60            'l': [[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[1,1,1,1]],
61            'm': [[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]],
62            'n': [[1,0,0,1],[1,1,0,1],[1,0,1,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1]],
63            'o': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
64            'p': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0],[1,0,0,0],[1,0,0,0],[1,0,0,0]],
65            'q': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,1,1],[0,1,1,1]],
66            'r': [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,1,1,0],[1,0,1,0],[1,0,0,1],[1,0,0,1]],
67            's': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[0,1,1,0],[0,0,0,1],[1,0,0,1],[0,1,1,0]],
68            't': [[1,1,1,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]],
69            'u': [[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
70            'v': [[1,0,1],[1,0,1],[1,0,1],[1,0,1],[1,0,1],[0,1,0],[0,1,0]],
71            'w': [[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,1],[0,1,1,0]],
72            'x': [[0,1,0,1],[0,1,0,1],[0,1,0,1],[0,0,1,0],[0,1,0,1],[0,1,0,1],[0,1,0,1]],
73            'y': [[0,1,0,1],[0,1,0,1],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0]],
74            'z': [[1,1,1,1],[0,0,0,1],[0,0,1,0],[0,0,1,0],[0,1,0,0],[1,0,0,0],[1,1,1,1]],
75            ' ': [[],[],[],[],[], [], []],
76            '0': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
77            '1': [[0,0,1,0],[0,1,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,1,1,1]],
78            '2': [[0,1,1,0],[1,0,0,1],[0,0,0,1],[0,0,1,0],[0,1,,0],[1,0,0,0],[1,1,1,1]],
79            '3': [[0,1,1,0],[1,0,0,1],[0,0,0,1],[0,1,1,0],[0,0,0,1],[1,0,0,1],[0,1,1,0]],
80            '4': [[1,0,0,0],[1,0,0,0],[1,0,1,0],[1,0,1,0],[1,1,1,1],[0,0,1,0],[0,0,1,0]],
81            '5': [[1,1,1,1],[1,0,0,0],[1,0,0,0],[1,1,1,0],[0,0,0,1],[1,0,0,1],[0,1,1,0]],
82            '6': [[0,1,1,0],[1,0,0,1],[1,0,0,0],[1,1,1,0],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
83            '7': [[1,1,1,1],[0,0,0,1],[0,0,0,1],[0,0,1,0],[0,1,0,0],[0,1,0,0],[0,1,0,0]],
84            '8': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[0,1,1,0],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
85            '9': [[0,1,1,1],[1,0,0,1],[1,0,0,1],[0,1,1,1],[0,0,0,1],[0,0,0,1],[0,0,0,1]]
86        }
87
88        // Various config type stuff
89        this.properties = {
90            'chart.background':    'white',
91            'chart.dark':          '#eee',
92            'chart.light':         '#f66',
93            'chart.zoom.factor':   1.5,
94            'chart.zoom.fade.in':  true,
95            'chart.zoom.fade.out': true,
96            'chart.zoom.hdir':     'right',
97            'chart.zoom.vdir':     'down',
98            'chart.zoom.frames':   10,
99            'chart.zoom.delay':    50,
100            'chart.zoom.shadow':   true,
101            'chart.zoom.background': true,
102            'chart.zoom.action':     'zoom',
103            'chart.resizable':              false,
104            'chart.resize.handle.adjust':   [0,0],
105            'chart.resize.handle.background': null,
106            'chart.width':                    null,
107            'chart.height':                   null
108        }
109
110        // Check for support
111        if (!this.canvas) {
112            alert('[LED] No canvas support');
113            return;
114        }
115    }
116
117
118    /**
119    * A setter
120    *
121    * @param name  string The name of the property to set
122    * @param value mixed  The value of the property
123    */
124    RGraph.LED.prototype.Set = function (name, value)
125    {
126        this.properties[name.toLowerCase()] = value;
127    }
128
129
130    /**
131    * A getter
132    *
133    * @param name  string The name of the property to get
134    */
135    RGraph.LED.prototype.Get = function (name)
136    {
137        return this.properties[name.toLowerCase()];
138    }
139
140
141    /**
142    * This draws the LEDs
143    */
144    RGraph.LED.prototype.Draw = function ()
145    {
146        /**
147        * Fire the onbeforedraw event
148        */
149        RGraph.FireCustomEvent(this, 'onbeforedraw');
150
151
152        // First clear the canvas, using the background colour
153        RGraph.Clear(this.canvas, this.Get('chart.background'));
154       
155        for (var l=0; l<this.text.length; l++) {
156            this.DrawLetter(this.text.charAt(l), l);
157        }
158       
159        /**
160        * Set the title attribute on the canvas
161        */
162        this.canvas.title = RGraph.rtrim(this.text);
163
164        /**
165        * Setup the context menu if required
166        */
167        if (this.Get('chart.contextmenu')) {
168            RGraph.ShowContext(this);
169        }
170       
171        /**
172        * This bit shows the mini zoom window if requested
173        */
174        if (this.Get('chart.zoom.mode') == 'thumbnail' || this.Get('chart.zoom.mode') == 'area') {
175            RGraph.ShowZoomWindow(this);
176        }
177
178       
179        /**
180        * This function enables resizing
181        */
182        if (this.Get('chart.resizable')) {
183            RGraph.AllowResizing(this);
184        }
185       
186        /**
187        * Fire the RGraph ondraw event
188        */
189        RGraph.FireCustomEvent(this, 'ondraw');
190    }
191
192
193    /**
194    * Draws a single letter
195    *
196    * @param string lights The lights to draw to draw
197    * @param int    index  The position of the letter
198    */
199    RGraph.LED.prototype.DrawLetter = function (letter, index)
200    {
201        var light    = this.Get('chart.light');
202        var dark     = this.Get('chart.dark');
203        var lights   = (this.lights[letter] ? this.lights[letter] : [[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0]]);
204        var lwidth   = RGraph.GetWidth(this) / this.text.length;
205        var diameter = lwidth / 5;
206        var radius   = diameter / 2;
207
208        var lheight = diameter * 7;
209        if (lheight > RGraph.GetHeight(this)) {
210            lheight  = RGraph.GetHeight(this);
211            diameter = (lheight / 7);
212            radius   = (diameter / 2);
213            lwidth   = diameter * 5;
214        }
215
216        for (var i=0; i<7; i++) {
217            for (var j=0; j<5; j++) {
218
219                var x = (j * diameter) + (index * lwidth) + radius;
220                var y = ((i * diameter)) + radius;
221
222                // Draw a circle
223                this.context.fillStyle   = (lights[i][j] ? light : dark);
224                this.context.strokeStyle = (lights[i][j] ? '#ccc' : 'rgba(0,0,0,0)');
225                this.context.beginPath();
226                this.context.arc(x, y, radius, 0, 6.28, 0);
227
228                this.context.stroke();
229                this.context.fill();
230            }
231        }
232    }
Note: See TracBrowser for help on using the repository browser.