graph/graph.html at master · amsik/graph · GitHub

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
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<script src="js/AIRAliases.js"></script>
		<script src="js/jquery.min.js"></script>
		<script src="js/graph.js"></script>


		<link rel="stylesheet" type="text/css" media="all" href="css/index.css" />
		<title>Graph</title>

		<script>
			$(document).ready(function() {
/**
* - Area
* 	- Location
*		- Left: (координата X, координата Y, ширина, высота) - допустимая область (квадрат) для 1 стороны
*		- Right
*
* - Marking
* 	- Left
*		- X
* 			- Min:  минимально значение (не в координатах, а именно значение)
*			- Max:  максимальное значение
*			- Step: шаг 1 позиции (нужно для определения координат)
*
* - Dotes
*	-X: начальное значение громкости (по оси Y)
*	-Y: начальное значение времени (по оси X)
* 	-Area: область, правая или левая
*
*
* ---------   Не обязательные параметры   -------------
*
* - Groups: указать номера точек для группировки
*
* - Event: вызов события, по определенному пространству имен
*
* - Callback: ф-я, которая вызывается при каждом перетаскивании точки, принимает параметры:
*		:time 		- текущее значение времени
*		:volume 	- текущее значение громкости
*		:numDote 	- номер кнопки
*/


				$('#cut').KGraph({

					'area' : {
						'location' : {
							'left'  : [27,  20, 80, 50],
							'right' : [127, 20, 80, 50]
						}
					},

					'marking' : {
						'left' : {
							'x' : { 'min': 0, 'max': 4,   'step': 0.01 },
							'y' : { 'min': 0, 'max': 100, 'step': 1 },
						},
						'right': {
							'x' : { 'min': -4, 'max': 0,  'step': 0.01 },
							'y' : { 'min': 0,  'max': 100,'step': 1 },
						}
					},

					'dotes' : [
						{'x' : 0,  'y' : 0, 'area' : 'left'},
						{'x' : 3.5,  'y' : 60, 'area' : 'left'},
						{'x' : -3.5, 'y' : 99, 'area' : 'right'},
						{'x' : -1, 'y' : 6, 'area' : 'right'},
					],

					'groups' : [1, 2],


					//'event' : 'markiz',
					//'callback' : function(time, volume, numDote, doteValues) {
					//	console.log('Время:', time, '; Громкость: ' + volume, '; Номер кнопки: ', numDote);
					//}

				});

				$('#cut2').KGraph({

					'area' : {
						'location' : {
							'left'  : [27,  20, 80, 50],
							'right' : [127, 20, 80, 50]
						}
					},

					'marking' : {
						'left' : {
							'x' : { 'min': 0, 'max': 4,   'step': 0.01 },
							'y' : { 'min': 0, 'max': 100, 'step': 1 },
						},
						'right': {
							'x' : { 'min': -4, 'max': 0,  'step': 0.01 },
							'y' : { 'min': 0,  'max': 100,'step': 1 },
						}
					},

					'dotes' : [
						{'x' : 1.1,  'y' : 13, 'area' : 'left'},
						{'x' : 3,  'y' : 60, 'area' : 'left'},
						{'x' : -2, 'y' : 20, 'area' : 'right'},
						{'x' : -0.3, 'y' : 97, 'area' : 'right'},
					],

					'groups' : [1, 2],


					//'event' : 'markiz',
					//'callback' : function(time, volume, numDote, doteValues) {
					//	console.log('Время:', time, '; Громкость: ' + volume, '; Номер кнопки: ', numDote);
					//}

				});

				//$('#cut').bind('markiz', function(event, time, volume, numDote, doteValues) {
					//console.log('Время:', time, '; Громкость: ' + volume, '; Номер кнопки: ', numDote)
					//console.log(doteValues);
				//});
			});

		</script>

	</head>
	<body>
		<div id="content">
			<div id="cut" class="k_graphs"></div>

			<div id="cut2" class="k_graphs" style="margin-top: 20px;"></div>
		</div>
	</body>
</html>