1
1
/**
2
- * Dashboard Heatmap:
2
+ * Dashboard Heatmap:
3
3
* Shows an heatmap which is draw
4
- * on a canvas
4
+ * on a canvas
5
5
**/
6
6
7
7
define ( [ "heatmap" ] , function ( heatmap )
@@ -18,21 +18,21 @@ define(["heatmap"], function(heatmap)
18
18
self . config = config ;
19
19
self . fps = config . fps ;
20
20
self . radius = ( config . radius ) ? config . radius * 100 : 250 ;
21
-
21
+
22
22
// create heatmap
23
23
self . heatmapInstance = heatmap . create ( {
24
24
container : document . querySelector ( '.heatmap' ) ,
25
25
maxOpacity : 0.5 ,
26
26
minOpacity : 0
27
27
} ) ;
28
-
28
+
29
29
$ ( window ) . resize ( function ( )
30
30
{
31
31
self . resize ( ) ;
32
32
self . draw ( ) ;
33
33
} ) ;
34
-
35
- // Wait 300 ms before executing
34
+
35
+ // Wait 300 ms before executing
36
36
setTimeout ( self . config . callback , 300 ) ;
37
37
} ,
38
38
changeRadius : function ( radius )
@@ -43,7 +43,7 @@ define(["heatmap"], function(heatmap)
43
43
redraw : function ( )
44
44
{
45
45
self = this ;
46
-
46
+
47
47
$ . get ( self . config . url , function ( data )
48
48
{
49
49
$ . get ( self . config . urlSequence , function ( images )
@@ -75,7 +75,7 @@ define(["heatmap"], function(heatmap)
75
75
{
76
76
var canvas = $ ( ".heatmap canvas" ) . get ( 0 ) ;
77
77
var ctx = canvas . getContext ( "2d" ) ;
78
-
78
+
79
79
var x = canvas . width / 2 ;
80
80
var y = canvas . height / 2 ;
81
81
ctx . font = '20px Arial' ;
@@ -110,16 +110,16 @@ define(["heatmap"], function(heatmap)
110
110
context . drawImage ( video , 0 , 0 , canvas . width ( ) , canvas . height ( ) ) ;
111
111
var data = canvas . get ( 0 ) . toDataURL ( ) ;
112
112
canvas . css ( {
113
- "background-image" : "url(" + data + ")" ,
114
- "background-size" : "100% 100%" ,
113
+ "background-image" : "url(" + data + ")" ,
114
+ "background-size" : "100% 100%" ,
115
115
"background-repeat" : "no-repeat" ,
116
116
} ) ;
117
117
118
118
video . pause ( ) ;
119
119
callback ( ) ;
120
120
} ) ;
121
121
}
122
- else
122
+ else if ( this . images . length )
123
123
{
124
124
var image = this . images [ this . images . length - 1 ] ;
125
125
var img = new Image ( ) ;
@@ -130,22 +130,22 @@ define(["heatmap"], function(heatmap)
130
130
self . latestImage . width = this . width ;
131
131
self . latestImage . height = this . height ;
132
132
canvas . css ( {
133
- "background" : "url('" + image . src + "')" ,
134
- "background-size" : "100% 100%" ,
133
+ "background" : "url('" + image . src + "')" ,
134
+ "background-size" : "100% 100%" ,
135
135
"background-repeat" : "no-repeat" ,
136
136
} ) ;
137
137
canvas . attr ( "height" , canvas . width ( ) / 2 ) ;
138
- $ ( ".heatmap" ) . css ( { "height" : canvas . height ( ) } ) ;
138
+ $ ( ".heatmap" ) . css ( { "height" : canvas . height ( ) } ) ;
139
139
callback ( ) ;
140
140
} ;
141
141
}
142
-
142
+
143
143
this . heatmapInstance . _renderer . setDimensions ( canvas . width ( ) , canvas . height ( ) ) ;
144
144
} ,
145
145
setRegions : function ( data )
146
146
{
147
147
this . regions = [ ] ;
148
-
148
+
149
149
for ( var i = 0 ; i < data . length ; i ++ )
150
150
{
151
151
var regionCoordinates = data [ i ] . regionCoordinates . split ( "-" ) ;
@@ -170,11 +170,11 @@ define(["heatmap"], function(heatmap)
170
170
region . end . y = parseInt ( regionCoordinates [ 3 ] ) ;
171
171
region . changes = parseInt ( data [ i ] . numberOfChanges ) ;
172
172
region . average = parseInt ( data [ i ] . numberOfChanges ) / ( ( region . end . x - region . start . x ) * ( region . end . y - region . start . y ) ) ;
173
-
173
+
174
174
this . regions . push ( region ) ;
175
175
}
176
176
}
177
-
177
+
178
178
return data ;
179
179
} ,
180
180
calculate : function ( regions )
@@ -183,18 +183,18 @@ define(["heatmap"], function(heatmap)
183
183
var width = 640 ;
184
184
var height = 360 ;
185
185
var dataPoints = [ ] ;
186
-
186
+
187
187
var originalWidth = this . latestImage . width ;
188
188
var originalHeight = this . latestImage . height ;
189
-
189
+
190
190
var canvas = $ ( ".heatmap canvas" ) ;
191
191
var currentWidth = canvas . width ( ) ;
192
192
var currentHeight = canvas . height ( ) ;
193
-
193
+
194
194
// scale x- and y-coordinates
195
195
var dx = currentWidth / originalWidth ;
196
196
var dy = currentHeight / originalHeight ;
197
-
197
+
198
198
for ( var i = 0 ; i < regions . length ; i ++ )
199
199
{
200
200
max = Math . max ( max , regions [ i ] . average ) ;
@@ -204,24 +204,24 @@ define(["heatmap"], function(heatmap)
204
204
value : regions [ i ] . average ,
205
205
radius : regions [ i ] . average * this . radius ,
206
206
} ;
207
-
207
+
208
208
dataPoints . push ( point ) ;
209
209
}
210
-
211
- var data = {
212
- max : max ,
210
+
211
+ var data = {
212
+ max : max ,
213
213
data : dataPoints
214
214
} ;
215
-
215
+
216
216
return data ;
217
217
} ,
218
218
resize : function ( )
219
219
{
220
220
var canvas = $ ( ".heatmap canvas" ) ;
221
221
canvas . attr ( "width" , $ ( ".heatmap" ) . width ( ) ) ;
222
222
canvas . attr ( "height" , canvas . width ( ) / 2 ) ;
223
- $ ( ".heatmap" ) . css ( { "height" : canvas . width ( ) } ) ;
223
+ $ ( ".heatmap" ) . css ( { "height" : canvas . width ( ) } ) ;
224
224
$ ( ".heatmap" ) . css ( { "height" : canvas . height ( ) } ) ;
225
225
}
226
226
} ;
227
- } ) ;
227
+ } ) ;
0 commit comments