Context Navigation

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

Last change on this file since 201 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 9.2 KB

Line
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.

Download in other formats: