-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathScrollPlotter.html
143 lines (128 loc) · 3.9 KB
/
ScrollPlotter.html
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
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<style>
div, button {
margin: 5px;
}
body {
height: 100%;
width: 100%;
background: radial-gradient(rgba(2,0,36,1) 0%, rgba(11,233,159,1) 45%, rgba(0,212,255,1) 100%);
background-size:50px 50px,50px 50px;
background-position:0 0, 0 25px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script>
let x_axis_time = [];
let y_axis_offsets = [];
let record = 0;
let first_scroll_event_done = 0;
let first_event_time = 0;
let prev_raf_offset = 0;
let rAFCount = 0;
let record_start_offset = 0;
function collectSamples() {
if(!record)
return;
if(prev_raf_offset == document.scrollingElement.scrollTop) {
window.requestAnimationFrame(collectSamples);
return;
}
rAFCount++;
// This is necessary to weed out duplicate values. For eg: After you stop
// recording, rAF will still keep firing and will end up recording a bunch
// of duplicate values (i.e the offset at which the animation ends).
prev_raf_offset = document.scrollingElement.scrollTop;
if(!first_scroll_event_done) {
x_axis_time = [];
x_axis_time.push(0);
y_axis_offsets = [];
y_axis_offsets.push(0);
first_scroll_event_done = 1;
first_event_time = (new Date()).getTime();
}
y_axis_offsets.push(Math.abs(record_start_offset - document.scrollingElement.scrollTop));
x_axis_time.push((new Date()).getTime() - first_event_time);
window.requestAnimationFrame(collectSamples);
}
function recordstart() {
reset();
record = 1;
prev_raf_offset = document.scrollingElement.scrollTop;
record_start_offset = document.scrollingElement.scrollTop;
window.requestAnimationFrame(collectSamples);
}
function recordstop() {
record = 0;
first_scroll_event_done = 0;
first_event_time = 0;
draw();
record_start_offset = 0;
}
function reset() {
x_axis_time = ['N/A', 'N/A'];
y_axis_offsets = [0, 0];
record = 0;
first_scroll_event_done = 0;
first_event_time = 0;
rAFCount = 0;
document.getElementById('scrollDiv').innerHTML = 0;
document.getElementById('rAFDiv').innerHTML = 0;
}
function draw() {
if(record) {
alert("Stop recording to plot graph.");
return;
}
const delta = record_start_offset - document.scrollingElement.scrollTop;
document.getElementById('scrollDiv').innerHTML = Math.abs(Math.round(delta));
document.getElementById('rAFDiv').innerHTML = rAFCount;
// Insufficient data. Just draw a flatline.
if(x_axis_time.length < 3) reset();
var ctx = document.getElementById('graph_visual').getContext('2d');
var graph_visual = new Chart(ctx, {
type: 'line',
data: {
labels: x_axis_time,
datasets: [{
label: 'Graph (based on last known dataset).',
data: y_axis_offsets,
backgroundColor: "rgba(153,255,51,0.6)"
}]
}
});
}
function toggleRecordState() {
if(record) {
recordstop();
document.getElementById('toggleButton').innerHTML = "Start";
} else {
recordstart();
document.getElementById('toggleButton').innerHTML = "Stop";
}
}
</script>
</head>
<body>
<div style="position: fixed;">
<div style="background-color:#fff">
<ul>Usage directions:
<li>Click "Start".</li>
<li>Do the scroll (mousewheel, fling, arrow click etc).</li>
<li>Click "Stop".</li>
</ul>
<button id="toggleButton" onclick="toggleRecordState()">Start</button>
<div>
Scroll delta: <span id="scrollDiv">0</span><br />
rAF(s) that see the offset change: <span id="rAFDiv">0</span>
</div>
<div class="container" style="width: 70vw; height: 60vh;">
<div><canvas id="graph_visual"></canvas></div>
</div>
</div>
</div>
<div style="height: 50000px; width: 500vw;"></div>
</body>
</html>