Context Navigation

source: Dev/branches/jQueryUI/client/RGraph/libraries/RGraph.led.js @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

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: