-
Notifications
You must be signed in to change notification settings - Fork 5
/
util.js
248 lines (202 loc) · 9.23 KB
/
util.js
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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
function conditionallyLoadInterface(){ //based on whether the Simhash has been generated
//console.log("Looking for "+metadata.simhashCacheURI+".json");
$.ajax({
url: metadata.simhashCacheURI+".json",
}).done(function(data,textStatus,xhr){
console.log('A Simhash cache file exists! Loading the interface');
$('#dataState').html('');
returnedJSON = data; //replace original JSON without URIs with post-simhash
displayVisualization();
}).fail(function(data,textStatus,xhr){
//console.log(textStatus);
console.log('No Simhash cache file exists! Waiting for generation to finish.');
$('#dataState').html($('#dataState').html()+".");
//console.log("TODO: here we would update the status message instead of simply adding another dot.");
window.setTimeout(conditionallyLoadInterface,500);
});
}
function pollThenReplaceImage(img){
img.onerror=null;
img.onError=null;
$('#' + img.id).error(function(){});
img.onerror = '';
console.log('pollThenReplaceImage() ' + img.src);
checkAgainIfImageExists(img);
img.src=`${localAssetServer}_images/spinnerStatic.png`;
}
function displayVisualization(){
console.log(returnedJSON);
if(!returnedJSON){
console.log('returnedJSON is null in displayVisualization');
}
//var str = "<table>";
var cfstr = '<div id="coverflow">';
for (var i = 0; i < returnedJSON.length; i++) {
if(returnedJSON[i].screenshotURI == null){continue;} //don't show the low hamming distance images in coverflow, previously also considered i==0
cfstr +=
`<div class="image-block" data-hammingDistance="${returnedJSON[i].hammingDistance}">
<img width="200" height="200" onError="pollThenReplaceImage(this);" src='${localAssetServer}_images/spinnerStatic.png' id='${returnedJSON[i].screenshotURI.slice(0,-4)}_200' title='${localAssetServer}screenshots/${returnedJSON[i].screenshotURI.replace(".png","_200.png")}' />
<div class="caption">
<h2>${returnedJSON[i].datetime}</h2>
<h2><a target="_blank" href="${returnedJSON[i].uri}">${returnedJSON[i].uri}</a></h2>
<h2 class="simhashValue">SimHash: ${returnedJSON[i].simhash}</h2>
<h2 class="hammingDistanceValue">Hamming Distance: ${(returnedJSON[i].hammingDistance ? returnedJSON[i].hammingDistance: "N/A")}</h2>
</div><!-- End caption, ideally this should use figure and figcaption tags -->
<div class="reflection">
<img width="200" height="200" onError="pollThenReplaceImage(this);" src="${localAssetServer}_images/spinnerStatic.png" id="${returnedJSON[i].screenshotURI.slice(0,-4)}_reflection" title="${localAssetServer}screenshots/${returnedJSON[i].screenshotURI.replace(".png","_200.png")}" />
<div class="overlay"></div>
</div><!-- End reflection -->
</div>`;
}
console.log('Done building DOM for coverflow');
cfstr += '</div>';
$('body').append(cfstr);
$('#showJSON').click(function(){
if($('#json').length){$('#json').remove(); $(this).html('Show JSON'); return;}
$('body').append('<textarea id="json">' + JSON.stringify(returnedJSON, undefined, 2) + '</textarea>');
$(this).html('Hide JSON');
});
var beforeCount = $('div.image-block').length;//UNUSED?
var afterCount = $('div.image-block').length;//UNUSED?
$('#coverflow').coverflow({'active':Math.floor($('#coverflow').children().length / 2),//{'overlap': 0.7, 'duration': 300}
'beforeSelect':function(e,i){
alert(e);
}
});
// Get the subset of images that are ready, delay loading the rest while the server reprocesses
$('img').each(function(){
var title = $(this).attr('title');
$(this).fadeOut(400, function(){;
$(this).attr('src', $(this).attr('title'));
}).fadeIn(400);
});
var viewSwitcherHTML =
`<ul id="viewSwitcher">
<li class="active" id="switcher_coverFlow_li"><a id="switcher_coverFlow">CoverFlow</a></li>
<li id="switcher_gridView_li"><a id="switcher_gridView">Grid View</a></li>
<li id="switcher_timeline_li"><a id="switcher_timeline">Timeline</a></li>
<!--<li><a id="switcher_anotherView">Another View</a></li>-->
</ul>`;
$('body').append(viewSwitcherHTML);
$('#viewSwitcher li a').click(function(){ //activate view
if($(this).parent().hasClass('active')){return;} //do nothing if the current view button is clicked
$('.active').removeClass('active');
$(this).parent().addClass('active');
if($(this).attr('id') == 'switcher_gridView' && $('#gv').length == 0){
var cf = $('#coverflow');
var gv = cf.clone();
gv.attr('id', 'gv');
gv.removeClass();
gv.css('width', '100%').fadeOut();
gv.children().removeAttr('class').removeAttr('style').css('float', 'left').css('display', 'block');
$('#coverflow').after(gv);
$('#gv .reflection').remove(); //can't use the selector until it's attached to the DOM
$('#gv div').css('border','1px solid black');
$('#gv div img').css('background-color','white');
$('#gv div').addClass('f1_container');
$('#gv > div').each(function(){
var figureHTML =
`<figure class="shadow f1_card" style="width: 200px;">
<div class="font face">${$(this).html()}</div>
<figcaption class="back face center">${$($(this).find(".caption")[0]).html()}</figcaption>
</figure>`;
$(this).append(figureHTML);
$(this).find('.caption').remove();
$(this).children('img').remove();
});
$('#gv').append('<br style="clear: both;" />');
$('.f1_container').click(function() {
$(this).toggleClass('active');
});
$('#coverflow').fadeOut();
$('#timeline').fadeOut();
$('#gv').fadeIn();
}else if($(this).attr('id') == 'switcher_coverFlow'){
$('#gv').fadeOut();
$('#timeline').fadeOut();
$('#coverflow').fadeIn();
}else if($(this).attr('id') == 'switcher_gridView'){
$('#coverflow').fadeOut();
$('#timeline').fadeOut();
$('#gv').fadeIn();
}else if($(this).attr('id') == 'switcher_timeline'){
$('#coverflow').fadeOut();
$('#gv').fadeOut();
$('#timeline').fadeIn();
}
});
var data = [];
for(var i=0; i<returnedJSON.length; i++){
var memento = {
id: i,
type: 'point',
start: new Date(returnedJSON[i].datetime),
stack: false,
zoomMax: 94670778000,
zoomMin: 10000
};
var inSummarization = []; var notInSummarization = [];
// This check really ought to not occur every time and this function should
// be functionalized
if( (strategy == 'alSummarization' && !returnedJSON[i].hammingDistance || (returnedJSON[i].hammingDistance < 4 && i!=0) ||
strategy != 'alSummarization' && !returnedJSON[i].screenshotURI
)){
console.log('Draw white dot, not included, for ' + returnedJSON[i].datetime);
memento.className = 'notInSummarization';
memento.content = '';//returnedJSON[i].datetime;
//memento.content = returnedJSON[i].datetime;
notInSummarization.push(memento);
}else {
console.log('Draw black dot, included, for ' + returnedJSON[i].datetime);
var imgUri = returnedJSON[i].screenshotURI.replace('.png', '_200.png');
memento.className = 'inSummarization';
memento.content =
`<img src="${localAssetServer}_images/spinnerStatic.png"
title="${localAssetServer}screenshots/${returnedJSON[i].screenshotURI.replace('.png', '_200.png')}"
id="${returnedJSON[i].screenshotURI.slice(0,-4)}_timeline"
width="25" height="25" alt="foooo"
onError="pollThenReplaceImage(this);" /> ${returnedJSON[i].datetime}`;
inSummarization.push(memento);
}
data.push(memento);
memento = null;
}
var options = {height: '300px'};//{stack: false,};
$("body").append('<div id="timeline"></div>');
var container = document.getElementById('timeline');
var timeline = new vis.Timeline(container, new vis.DataSet(data), options);
}
function checkAgainIfImageExists(imgIn){
console.log('running checkAgainIfImageExists() for ' + imgIn.title);
setTimeout(replaceImageIfAvailable, 3000, $(imgIn));
}
function replaceImageIfAvailable(img){
var src = $(img).attr('title');
console.log('Running replaceImageIfAvailable for ' + src);
$.ajax({
url: src
}).success(function(){
$('#' + $(img).attr('id')).attr('src', src);
$('#' + $(img).attr('id') + '_reflection').attr('src',src);
$('#' + $(img).attr('id') + '_timeline').attr('src',src);
}).fail(function(xhr, status, err){ //if the image has not been generated yet, this 404 will cause a CORS problem, disregard it.
console.log('Failed. The image might not be generated yet. Trying again in 3.');
console.log(err);
setTimeout(replaceImageIfAvailable, 3000, $(img));
});
}
function buildQuerystringAndGo(){
var strategy = $("#form_strategy option:selected").attr("value");
//var access = $("#form_access option:selected").attr("value");
var urir = $("#form_urir").attr("value");
//var queryString = "?strategy=" + strategy + "&access=" + access + "&URI-R=" + urir;
var queryString = "?strategy=" + strategy + "&URI-R=" + urir;
window.location.href = thumbnailServer + queryString;
}
/** Change the dropdown UI to reflect parameters passed in */
function setStrategyAndAccessInUI(){
var strategy = $($("body")[0]).data("strategy");
var access = $($("body")[0]).data("access");
$('#form_strategy').val(strategy);
$('#form_access').val(access);
}