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
|
$(function () {
status('choose a file');
var timerId;
function setTimer() {
timerId = setInterval(function () {
if ($('#userFileInput').val() !== '') {
clearInterval(timerId);
$('#uploadForm').submit();
}
}, 500);
}
function setProgress(percent) {
$('#percent').html(percent + '%');
$('#bar').css('width', percent + '%');
}
setTimer();
$('#uploadForm').submit(function () {
status('0%');
var formData = new FormData();
var file = document.getElementById('userFileInput').files[0];
formData.append('userFile', file);
var xhr = new XMLHttpRequest();
xhr.overrideMimeType('application/json');
xhr.open('post', '/api/upload', true);
xhr.upload.onprogress = function (e) {
if (e.lengthComputable)
setProgress(Math.round((e.loaded / e.total) * 100));
};
xhr.onerror = function (e) {
status('error while trying to upload');
};
xhr.onload = function () {
$('#userFileInput').val('');
setProgress(0);
var resJson = JSON.parse(xhr.responseText);
status(resJson.file + ' done, choose a file');
setTimer();
if (resJson.image)
window.open('./uploads/' + resJson.savedAs, 'upload', 'status=1, height = 300, width = 300, resizable = 0');
else
console.log('not an image');
};
xhr.send(formData);
return false; // no refresh
});
function status(message) {
$('#status').text(message);
}
function uploadedFilenameList() {
var xhr = new XMLHttpRequest();
xhr.open('get', '/api/filenames', true);
xhr.onload = function () {
var fnames = JSON.parse(xhr.response);
fnames.forEach(function (element) {
$("#filenames").append("<a href=\"./uploads/" + element + "\" style=\"display: block\">" + element + "</a>");
});
}
xhr.send();
}
uploadedFilenameList();
var matrixRain = function() {
var c = document.getElementById("c");
c.height = window.innerHeight;
c.width = window.innerWidth;
var drop_size = 12;
var columns = c.width / drop_size;
var chinese = "ムタ二コク1234567890シモラキリエスハヌトユABCDEF";
chinese = chinese.split("");
var drops = [];
for (var i = 0; i < columns; i++)
drops[i] = 1; //y coordinate - same for everyone at the starting. The index contains the x coordinate
ctx = c.getContext('2d');
function draw() {
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0f0";
ctx.font = drop_size + "px arial";
for (var i = 0; i < drops.length; i++) {
text = chinese[Math.floor(Math.random() * chinese.length)];
ctx.fillText(text, i * drop_size, drops[i] * drop_size);
if (drops[i] * drop_size > c.height && Math.random() > 0.975)
drops[i] = 0;
drops[i]++;
}
}
setInterval(draw, 100);
}
matrixRain();
});
|
