-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathreplicate_study.html
More file actions
208 lines (176 loc) · 9.2 KB
/
replicate_study.html
File metadata and controls
208 lines (176 loc) · 9.2 KB
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!--
Copyright 2021 Raiza Hanada, Damien Masson, Géry Casiez, Mathieu Nancel, Sylvain Malacria
(Université de Lille, CNRS, Centrale Lille, UMR 9189 CRIStAL, University of Waterloo)
See LICENSE.md
-->
<html lang="en">
<head>
<title>Gain function recommender</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="https://kit.fontawesome.com/0e6f12c56c.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/tf_utils.js"></script>
<meta charset="utf-8">
</head>
<body>
<a href="https://github.com/LokiResearch/TransferFunctionTools" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div class="container">
<div class="row justify-content-center">
<h1>Replicate the pointing transfer function from an experiment</h1>
</div>
<p class="text_center">
This tool is designed to create an hardware-independent transfer function to replicate a pointing transfer function from previous work and use it in libpointing.
There is no need to use the same hardware as the original experiment.
</p>
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="small">STEP 1: fill the information below (from previous work)</p>
<div class="card mt-2">
<div class="card-body">
<h5 class="card-title">Experimental settings you want to replicate</h5>
<div class="form-group row">
<label for="initCPI" class="col-sm-7 col-form-label"><i class="fas fa-mouse"></i> Mouse resolution (CPI or DPI)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="initCPI" placeholder="e.g. 1200">
</div>
</div>
<div class="form-group row">
<label for="initFreq" class="col-sm-7 col-form-label"><i class="fas fa-wave-square"></i> Mouse input frequency (Hz)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="initFreq" placeholder="e.g. 125">
</div>
</div>
<div class="form-group row">
<label for="initDPI" class="col-sm-7 col-form-label"><i class="fas fa-desktop"></i> Display pixel density (DPI)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="initDPI" placeholder="e.g. 87">
</div>
</div>
<div class="form-group row">
<label for="initOS" class="col-sm-7 col-form-label">Operating System</label>
<div class="col-sm-4">
<select id='initOS' class="form-control">
<option value="Windows">Windows 10</option>
<option value="macOS">macOS</option>
</select>
</div>
</div>
<p class="card-text small">
Adjust the slider and checkbox below to replicate the settings used in the experiment
</p>
<div style="margin: auto; position: relative;" class="row">
<img id="initConfigImg" src="img/windows_slider_no_epp.png" class="windows_config_img">
<input type="range" id="initSlider" min="1" max="11" value="1" class="windows_config_slider">
<input type="checkbox" id="initEnhanced" value="" class="windows_config_epp" checked>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<p class="small">STEP 2: fill the mouse resolution and pixel density of the display used to replicate the transfer function</p>
<div class="card mt-2">
<div class="card-body">
<h5 class="card-title">Hardware characteristics for your experiment</h5>
<div class="form-group row">
<label for="finalCPI" class="col-sm-7 col-form-label"><i class="fas fa-mouse"></i> Mouse resolution (CPI or DPI)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="finalCPI" placeholder="e.g. 1200">
</div>
</div>
<div class="form-group row">
<label for="finalFreq" class="col-sm-7 col-form-label"><i class="fas fa-wave-square"></i> Mouse input frequency (Hz)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="finalFreq" placeholder="e.g. 125">
</div>
</div>
<div class="form-group row">
<label for="finalDPI" class="col-sm-7 col-form-label"><i class="fas fa-desktop"></i> Display pixel density (DPI)</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="finalDPI" placeholder="e.g. 87">
</div>
</div>
</div>
</div>
<p class="small mt-3">STEP 3: download the transfer function to use in libpointing</p>
<a href="javascript:downloadTf();">
<div style="text-align: center; background-color: #EEEEEE;" class="card form-group mt-2" id="downloadBox">
<div class="card-body">
<h5>Click to download the transfer function</h5>
</div>
</div>
</a>
<p class="small mt-3">STEP 4: follow these instructions to use the function in libpointing</p>
<a href="https://github.com/INRIA/libpointing/wiki/Custom-Functions">https://github.com/INRIA/libpointing/wiki/Custom-Functions</a>
</div>
</div>
</div>
<script type="text/javascript">
function downloadTf() {
if (isFormComplete()) {
compute("transformed");
}
}
// Returns true if all the required fields are completed
function isFormComplete() {
return $('#initDPI').val() != "" &&
$('#initCPI').val() != "" &&
$('#initFreq').val() != "" &&
$('#finalCPI').val() != "" &&
$('#finalFreq').val() != "" &&
$('#finalDPI').val() != "";
}
$('#initOS').on('input', function(event) {
// Change the slider accordingly
var os = ($('#initOS').val() == "Windows") ? "windows" : "macos";
document.getElementById("initConfigImg").className = os + "_config_img";
document.getElementById("initConfigImg").src = "img/" + os + "_slider" + (os=="windows"? "_no_epp" : "") + ".png";
document.getElementById("initSlider").className = os + "_config_slider";
document.getElementById("initSlider").max = os == "windows" ? 11 : 10;
document.getElementById("initEnhanced").className = os + "_config_epp";
});
function compute(ope) {
var initCPI = $('#initCPI').val();
var initFreq = $('#initFreq').val();
var initDPI = $('#initDPI').val();
var initOS = $('#initOS').val()
var initGF = $('#initSlider').val();
var initEpp = document.getElementById('initEnhanced').checked;
var finalCPI = $('#finalCPI').val()
var finalFreq = $('#finalFreq').val()
var finalDPI = $('#finalDPI').val()
var srcTf = tf.getTfFilePath(initGF, initOS, initEpp);
tf.whenAvailable(function() {
var srcCounts = tf.getTfCounts(srcTf);
var initMs = tf.getMotorSpeed(srcCounts, initCPI, initFreq, false);
var initVs = tf.getVisualSpeed(srcCounts, initDPI, initFreq);
var content = "";
var curve = {x: [], y:[]};
for (var i = 0; i < initMs.length; ++i) {
var count = ((initMs[i]/finalFreq)*finalCPI);
var pixels = ((initVs[i]/finalFreq)/0.0254)*finalDPI;
curve.x.push(count);
curve.y.push(pixels)
}
var resampledCurve = tf.resampleAtGivenPos(curve, Array.from(Array(128).keys()));
var content = "";
for (var i = 0; i < 128; ++i) {
content += i.toString() + ": " + resampledCurve.y[Math.min(i, resampledCurve.y.length-1)] + "\n";
}
download("transformedGF.dat", content)
});
}
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
</script>
</body>
</html>