625 lines
15 KiB
JavaScript
625 lines
15 KiB
JavaScript
var startTime = (24*1 + 9)*60;
|
|
var minTime = (24*0 + 15)*60;
|
|
var maxTime = (24*3 + 24)*60;
|
|
|
|
|
|
var currentTime = startTime;
|
|
var clients = [];
|
|
var context;
|
|
var width = 950;
|
|
var height = 475;
|
|
var gridSize = 3;
|
|
var nearFieldRadius = 30;
|
|
|
|
var timeStep = 1000/1500; //(250, 500, 1000)
|
|
var decay = Math.pow(0.8, 5);
|
|
var stepSize = 100*timeStep;
|
|
var frameDuration = 40;
|
|
var radius = 1.4;
|
|
var jump = false;
|
|
var maxStepGridRadius = 10;
|
|
var stepGridRadius = maxStepGridRadius;
|
|
var nearFieldGridRadius = Math.ceil(nearFieldRadius/gridSize);
|
|
|
|
var interval;
|
|
var time2index = [];
|
|
var random = [];
|
|
var stepGrid = [];
|
|
var nearFieldGrid = [];
|
|
var grid = [];
|
|
|
|
for (var x = -nearFieldGridRadius; x < width/gridSize+nearFieldGridRadius; x++) grid[x] = [];
|
|
|
|
$(function () {
|
|
init();
|
|
setSpeed(2);
|
|
startPlay();
|
|
})
|
|
|
|
function setSpeed(speed) {
|
|
timeStep = Math.pow(2, speed)*125/1500;
|
|
stepSize = 100*timeStep;
|
|
stepGridRadius = Math.min(Math.ceil(stepSize/gridSize), maxStepGridRadius);
|
|
nearFieldGridRadius = Math.ceil(nearFieldRadius/gridSize);
|
|
|
|
$('.speed').removeClass('active');
|
|
$('#speed'+speed).addClass('active');
|
|
}
|
|
|
|
var mouseDrag = false;
|
|
var sliderDrag = false;
|
|
var mapDrag = false;
|
|
var mouseDragX0;
|
|
var mouseDragY0;
|
|
var mouseDragX;
|
|
var mouseDragY;
|
|
var sliderDragStartTime;
|
|
var selectedCount = 0;
|
|
|
|
function sliderDragStart(x) {
|
|
mouseDrag = true;
|
|
sliderDrag = true;
|
|
sliderDragStartTime = currentTime;
|
|
mouseDragX = x;
|
|
mouseDragX0 = x;
|
|
}
|
|
|
|
function mapDragStart(x, y) {
|
|
mouseDrag = true;
|
|
mapDrag = true;
|
|
mouseDragX = x;
|
|
mouseDragY = y;
|
|
mouseDragX0 = x;
|
|
mouseDragY0 = y;
|
|
|
|
selectedCount = 0;
|
|
activeCount = 0;
|
|
activeSelectedCount = 0;
|
|
|
|
clients.forEach(function (c) { c.selected = false; });
|
|
|
|
renderCanvas();
|
|
renderInfos();
|
|
}
|
|
|
|
function mouseDragMove(x, y) {
|
|
if (mouseDrag) {
|
|
if (sliderDrag) {
|
|
currentTime = sliderDragStartTime + (mouseDragX0 - x);
|
|
|
|
updateFrame();
|
|
}
|
|
if (mapDrag) {
|
|
mouseDragX = x;
|
|
mouseDragY = y;
|
|
var p = $('#container').offset();
|
|
var x0 = Math.min(mouseDragX0, mouseDragX) - p.left;
|
|
var x1 = Math.max(mouseDragX0, mouseDragX) - p.left;
|
|
var y0 = Math.min(mouseDragY0, mouseDragY) - p.top;
|
|
var y1 = Math.max(mouseDragY0, mouseDragY) - p.top;
|
|
selectedCount = 0;
|
|
activeCount = 0;
|
|
activeSelectedCount = 0;
|
|
clients.forEach(function (c) {
|
|
if ((c.x >= x0) && (c.x <= x1) && (c.y >= y0) && (c.y <= y1)) {
|
|
c.selected = true;
|
|
selectedCount++;
|
|
} else {
|
|
c.selected = false;
|
|
}
|
|
if (c.point !== undefined) {
|
|
activeCount++;
|
|
if (c.selected) activeSelectedCount++;
|
|
}
|
|
});
|
|
|
|
renderCanvas();
|
|
renderInfos();
|
|
}
|
|
|
|
event.preventDefault();
|
|
return false;
|
|
} else {
|
|
mouseDragX0 = x;
|
|
mouseDragY0 = y;
|
|
}
|
|
}
|
|
|
|
function mouseDragStop() {
|
|
mouseDrag = false;
|
|
sliderDrag = false;
|
|
mapDrag = false;
|
|
|
|
renderCanvas();
|
|
}
|
|
|
|
function init() {
|
|
context = $('#canvas')[0].getContext('2d');
|
|
clients = [];
|
|
var v = 0.2;
|
|
|
|
data.matrix.forEach(function (times, index) {
|
|
clients[index] = { point:undefined, x:0, y:0, r:0, x0:0, y0:0, r0:0, index:index, lastEvent:0, selected:false };
|
|
var v = (1.1+Math.sin(index))*1e6;
|
|
random[index] = v - Math.floor(v);
|
|
});
|
|
|
|
$('#play' ).click(togglePlay);
|
|
$('#speed1').click(function () { setSpeed(1); });
|
|
$('#speed2').click(function () { setSpeed(2); });
|
|
$('#speed3').click(function () { setSpeed(3); });
|
|
|
|
$('#sliderWrapper').mousedown(function (e) {
|
|
sliderDragStart(e.pageX);
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
$('#sliderWrapper').get(0).addEventListener('touchstart', function (e) {
|
|
sliderDragStart(e.touches[0].pageX);
|
|
e.preventDefault();
|
|
return false;
|
|
}, false);
|
|
|
|
$('#container').mousedown(function (e) {
|
|
mapDragStart(e.pageX, e.pageY);
|
|
e.preventDefault();
|
|
return false;
|
|
});
|
|
$('#container').get(0).addEventListener('touchstart', function (e) {
|
|
mapDragStart(e.touches[0].pageX, e.touches[0].pageY);
|
|
e.preventDefault();
|
|
return false;
|
|
}, false);
|
|
|
|
|
|
$(document).mousemove(function (e) {
|
|
mouseDragMove(e.pageX, e.pageY);
|
|
});
|
|
$(document).get(0).addEventListener('touchmove', function (e) {
|
|
mouseDragMove(e.touches[0].pageX, e.touches[0].pageY);
|
|
}, false);
|
|
|
|
|
|
$(document).mouseup(function () {
|
|
mouseDragStop();
|
|
});
|
|
$(document).get(0).addEventListener('touchend', function () {
|
|
mouseDragStop();
|
|
}, false);
|
|
|
|
var index = -1;
|
|
for (var time = -60; time <= (4*24+1)*60; time++) {
|
|
while (data.times[index+1] <= time) index++;
|
|
time2index[time] = index;
|
|
}
|
|
|
|
for (var x = -stepGridRadius; x <= stepGridRadius; x++) {
|
|
for (var y = -stepGridRadius; y <= stepGridRadius; y++) {
|
|
var r = Math.round(Math.sqrt(x*x + y*y)*100)/100;
|
|
if (r <= stepGridRadius+1) {
|
|
stepGrid.push({x:x, y:y, r:r});
|
|
}
|
|
}
|
|
}
|
|
stepGrid = stepGrid.sort( function (a,b) { return (a.r - b.r); } );
|
|
|
|
for (var x = -nearFieldGridRadius; x <= nearFieldGridRadius; x++) {
|
|
for (var y = -nearFieldGridRadius; y <= nearFieldGridRadius; y++) {
|
|
var r = Math.round(Math.sqrt(x*x + y*y)*100)/100;
|
|
var a = Math.atan2(y,x);
|
|
if (r <= nearFieldGridRadius) {
|
|
nearFieldGrid.push({x:x, y:y, r:r, a:a});
|
|
}
|
|
}
|
|
}
|
|
nearFieldGrid = nearFieldGrid.sort( function (a,b) { return (a.r == b.r) ? (a.a - b.a) : (a.r - b.r);} );
|
|
|
|
sessions.forEach(function (session) {
|
|
session.startTime = session.startInt + (parseInt(session.date.substr(8,2),10)-5)*(24*60);
|
|
session.endTime = session.startTime + session.duration;
|
|
session.stage = (session.room.substr(0,5) == 'stage') ? parseInt(session.room.substr(6,1), 10) : undefined;
|
|
})
|
|
}
|
|
|
|
function startPlay() {
|
|
if (!interval) {
|
|
interval = setInterval(update, frameDuration);
|
|
$('#play').removeClass('pause');
|
|
}
|
|
}
|
|
|
|
function stopPlay() {
|
|
if (interval) {
|
|
clearInterval(interval);
|
|
interval = false;
|
|
$('#play').addClass('pause');
|
|
}
|
|
}
|
|
|
|
function togglePlay() {
|
|
if (interval) stopPlay(); else startPlay();
|
|
}
|
|
|
|
function update() {
|
|
if (mouseDrag) return;
|
|
|
|
currentTime += timeStep;
|
|
|
|
updateFrame();
|
|
}
|
|
|
|
var activeCount, activeSelectedCount;
|
|
|
|
function updateFrame() {
|
|
if (currentTime > maxTime) {
|
|
currentTime = maxTime;
|
|
stopPlay();
|
|
}
|
|
|
|
if (currentTime < minTime) currentTime = minTime;
|
|
|
|
updateData();
|
|
updatePosition();
|
|
renderInfos();
|
|
renderCanvas();
|
|
}
|
|
|
|
function updateData() {
|
|
activeCount = 0;
|
|
activeSelectedCount = 0;
|
|
|
|
data.matrix.forEach(function (times, index) {
|
|
var timeId = time2index[Math.floor(currentTime)];
|
|
|
|
var point = undefined;
|
|
var pointBefore = undefined;
|
|
|
|
var t0 = data.times[timeId]; if (isNaN(t0)) t0 = 0;
|
|
var t1 = data.times[timeId+1]; if (isNaN(t1)) t1 = 1e10;
|
|
|
|
var offset = (currentTime-t0)/(t1-t0);
|
|
|
|
if (offset < random[index]) {
|
|
pointBefore = times[timeId-2];
|
|
point = times[timeId-1];
|
|
} else {
|
|
pointBefore = times[timeId-1];
|
|
point = times[timeId];
|
|
}
|
|
|
|
if (!valid(pointBefore)) pointBefore = undefined;
|
|
if (!valid(point)) point = undefined;
|
|
|
|
var client = clients[index];
|
|
if (client.point != point) {
|
|
if (point !== undefined) {
|
|
client.x0 = data.points[point].x*width;
|
|
client.y0 = data.points[point].y*height;
|
|
client.r0 = 1;
|
|
if (client.point === undefined) client.x = undefined;
|
|
} else {
|
|
client.r0 = 0;
|
|
}
|
|
client.point = point;
|
|
client.lastEvent = currentTime;
|
|
client.settled = false;
|
|
}
|
|
|
|
if (mouseDrag) {
|
|
client.x = undefined;
|
|
client.settled = false;
|
|
}
|
|
|
|
if (client.point !== undefined) {
|
|
activeCount++;
|
|
if (client.selected) activeSelectedCount++;
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderInfos() {
|
|
var d = Math.floor(currentTime/1440);
|
|
var h = Math.floor(currentTime/60) % 24;
|
|
var m = Math.floor(currentTime) % 60;
|
|
h = (h+100+'').substr(1);
|
|
m = (m+100+'').substr(1);
|
|
$('#timer').html('Tag '+d+' - '+h+':'+m);
|
|
|
|
var text = 'Aktive MAC-Adressen: '+activeCount;
|
|
if (selectedCount > 0) text += '<br><span style="color:#ee5000">Ausgewählte MAC-Adressen: '+activeSelectedCount+'</span>';
|
|
$('#statistics').html(text);
|
|
|
|
$('#sliderInner').css('left', -(currentTime-441));
|
|
|
|
var stages = ['', '', '', '', '', '', '', ''];
|
|
sessions.forEach(function (session) {
|
|
if ((session.startTime <= currentTime) && (currentTime < session.endTime)) {
|
|
if (session.stage !== undefined) {
|
|
stages[session.stage] = 'Stage '+session.stage+': '+session.title;
|
|
}
|
|
}
|
|
});
|
|
for (var i = 1; i <= 7; i++) (function () {
|
|
var node = $('#stage'+i);
|
|
var oldText = node.attr('oldText');
|
|
var newText = stages[i];
|
|
node.attr('oldText', newText);
|
|
|
|
if (oldText != newText) {
|
|
if (mouseDrag) {
|
|
node.html(newText);
|
|
} else {
|
|
node.stop(true);
|
|
node.fadeOut(100, function () { node.html(newText); });
|
|
node.fadeIn(100);
|
|
}
|
|
}
|
|
})();
|
|
}
|
|
|
|
function updatePosition() {
|
|
for (var x = -nearFieldGridRadius; x < width/gridSize + nearFieldGridRadius; x++) {
|
|
for (var y = -nearFieldGridRadius; y < height/gridSize + nearFieldGridRadius; y++) {
|
|
grid[x][y] = ((x >= 0) && (x < width/gridSize) && (y >= 0) && (y < height/gridSize));
|
|
}
|
|
}
|
|
|
|
clients.forEach(function (client) {
|
|
//client.r += (client.r0 - client.r)*decay;
|
|
client.r = client.r0;
|
|
|
|
client.valid = valid(client.point) || (client.r > 1e-2);
|
|
|
|
if (client.settled) {
|
|
var x = Math.round(client.x/gridSize);
|
|
var y = Math.round(client.y/gridSize);
|
|
if (grid[x][y]) {
|
|
grid[x][y] = false;
|
|
client.x = x*gridSize;
|
|
client.y = y*gridSize;
|
|
} else {
|
|
client.settled = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
clients.forEach(function (client) {
|
|
if (!client.valid) return;
|
|
|
|
client.xo = client.x;
|
|
client.yo = client.y;
|
|
|
|
var gridx0 = Math.round(client.x0/gridSize);
|
|
var gridy0 = Math.round(client.y0/gridSize);
|
|
|
|
if (client.x === undefined) {
|
|
// Punkt ist neu, also finde einen neuen Ort zum settlen
|
|
for (var i = 0; i < nearFieldGrid.length; i++) {
|
|
var p = nearFieldGrid[i];
|
|
if (grid[gridx0+p.x][gridy0+p.y]) {
|
|
grid[gridx0+p.x][gridy0+p.y] = false;
|
|
client.x = (gridx0+p.x)*gridSize;
|
|
client.y = (gridy0+p.y)*gridSize;
|
|
client.settled = true;
|
|
break;
|
|
}
|
|
}
|
|
} else {
|
|
if (!client.settled) {
|
|
// Kommt gerade von wo anders her
|
|
|
|
// Mach mal einen Sprung nach vorn
|
|
var xn, yn;
|
|
var dx = (client.x0 - client.x);
|
|
var dy = (client.y0 - client.y);
|
|
var r = Math.sqrt(dx*dx + dy*dy);
|
|
if (r > 1e-2) {
|
|
var rn = Math.max(r-stepSize, 0);
|
|
var f = 1-rn/r;
|
|
|
|
client.x = client.x + (client.x0 - client.x)*f;
|
|
client.y = client.y + (client.y0 - client.y)*f;
|
|
} else {
|
|
client.x = client.x0;
|
|
client.y = client.y0;
|
|
}
|
|
|
|
// Bin ich schon da?
|
|
var dx = (client.x0 - client.x);
|
|
var dy = (client.y0 - client.y);
|
|
var r = Math.sqrt(dx*dx + dy*dy);
|
|
if (r < nearFieldRadius) {
|
|
xn = Math.round(client.x/gridSize);
|
|
yn = Math.round(client.y/gridSize);
|
|
|
|
// Ist der neue Platz noch frei?
|
|
if (grid[xn][yn]) {
|
|
grid[xn][yn] = false;
|
|
client.x = xn*gridSize;
|
|
client.y = yn*gridSize;
|
|
} else {
|
|
var rMin = 1e10;
|
|
var pMin = false;
|
|
var gridx = Math.round(client.xo/gridSize);
|
|
var gridy = Math.round(client.yo/gridSize);
|
|
for (var i = 0; i < stepGrid.length; i++) {
|
|
var p = stepGrid[i];
|
|
if (grid[gridx+p.x][gridy+p.y]) {
|
|
var dxn = client.x0 - (gridx + p.x)*gridSize;
|
|
var dyn = client.y0 - (gridy + p.y)*gridSize;
|
|
var rn = Math.sqrt(dxn*dxn + dyn*dyn);
|
|
if (rn < rMin) {
|
|
rMin = rn;
|
|
pMin = p;
|
|
}
|
|
}
|
|
}
|
|
if (pMin) {
|
|
grid[gridx+pMin.x][gridy+pMin.y] = false;
|
|
client.x = (gridx + pMin.x)*gridSize;
|
|
client.y = (gridy + pMin.y)*gridSize;
|
|
client.settled = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
clients.forEach(function (client) {
|
|
if (!client.valid) return;
|
|
|
|
if (client.settled) {
|
|
var gridx0 = Math.round(client.x0/gridSize);
|
|
var gridy0 = Math.round(client.y0/gridSize);
|
|
var gridx = Math.round(client.x /gridSize);
|
|
var gridy = Math.round(client.y /gridSize);
|
|
|
|
grid[gridx][gridy] = true;
|
|
|
|
do {
|
|
var dx = (gridx-gridx0);
|
|
var dy = (gridy-gridy0);
|
|
var rMin = dx*dx + dy*dy - 1e-5;
|
|
var dxmin = 0;
|
|
var dymin = 0;
|
|
var foundBetter = false
|
|
for (var dxg = -1; dxg <= 1; dxg++) {
|
|
for (var dyg = -1; dyg <= 1; dyg++) {
|
|
if (grid[gridx+dxg][gridy+dyg] && ((dxg != 0) || (dyg != 0))) {
|
|
var dx = (gridx+dxg-gridx0);
|
|
var dy = (gridy+dyg-gridy0);
|
|
var r = dx*dx + dy*dy;
|
|
if (r < rMin) {
|
|
rMin = r;
|
|
dxmin = dxg;
|
|
dymin = dyg;
|
|
foundBetter = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (foundBetter) {
|
|
gridx += dxmin;
|
|
gridy += dymin;
|
|
}
|
|
} while (foundBetter);
|
|
grid[gridx][gridy] = false;
|
|
client.x = gridx*gridSize;
|
|
client.y = gridy*gridSize;
|
|
//nachrücken
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderCanvas() {
|
|
context.clearRect(0, 0, width, height);
|
|
|
|
var drawLists = [[],[],[],[]];
|
|
clients.forEach(function (client) {
|
|
if (client.valid) {
|
|
var dx = client.x - client.xo;
|
|
var dy = client.y - client.yo;
|
|
var r = Math.sqrt(dx*dx + dy*dy);
|
|
|
|
var f = (selectedCount > 0) ? (client.selected ? 1.3 : 0.4) : 1;
|
|
|
|
if ((r > 1) && (!client.settled)) {
|
|
if (client.selected) {
|
|
drawLists[0].push(client);
|
|
} else {
|
|
drawLists[1].push(client);
|
|
}
|
|
} else {
|
|
if (client.selected) {
|
|
drawLists[2].push(client);
|
|
} else {
|
|
drawLists[3].push(client);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
context.strokeStyle = 'rgba(238,80,0,0.3)';
|
|
context.lineWidth = 2*radius;
|
|
context.beginPath();
|
|
drawLists[0].forEach(function (client) {
|
|
context.moveTo(client.xo, client.yo);
|
|
context.lineTo(client.x, client.y );
|
|
})
|
|
context.stroke();
|
|
|
|
var a = (selectedCount > 0) ? 0.15 : 0.15;
|
|
context.strokeStyle = 'rgba(0,0,0,'+a+')';
|
|
context.lineWidth = 2*radius*((selectedCount > 0) ? 0.4 : 1);
|
|
context.beginPath();
|
|
drawLists[1].forEach(function (client) {
|
|
context.moveTo(client.xo, client.yo);
|
|
context.lineTo(client.x, client.y );
|
|
})
|
|
context.stroke();
|
|
|
|
context.fillStyle = 'rgb(238,80,0)';
|
|
drawLists[2].forEach(function (client) {
|
|
context.beginPath();
|
|
context.arc(client.x, client.y, radius*1.3, 0, 2*Math.PI, false);
|
|
context.fill();
|
|
});
|
|
|
|
var r = (selectedCount > 0) ? 0.4 : 1;
|
|
context.fillStyle = 'rgb(0,0,0)';
|
|
drawLists[3].forEach(function (client) {
|
|
context.beginPath();
|
|
context.arc(client.x, client.y, radius*r, 0, 2*Math.PI, false);
|
|
context.fill();
|
|
})
|
|
|
|
if (mapDrag) {
|
|
var x = Math.min(mouseDragX0, mouseDragX);
|
|
var y = Math.min(mouseDragY0, mouseDragY);
|
|
var w = Math.max(mouseDragX0, mouseDragX) - x;
|
|
var h = Math.max(mouseDragY0, mouseDragY) - y;
|
|
var p = $('#container').offset();
|
|
x -= 0.5 + p.left;
|
|
y -= 0.5 + p.top;
|
|
|
|
context.fillStyle = 'rgba(238,0,0,0.1)';
|
|
context.strokeStyle = 'rgba(238,0,0,0.5)';
|
|
context.lineWidth = 1;
|
|
context.beginPath();
|
|
context.rect(x, y, w, h);
|
|
context.fill();
|
|
context.stroke();
|
|
}
|
|
|
|
/*
|
|
context.fillStyle = 'rgba(255,0,0,0.5)';
|
|
for (var x = 0; x < width/gridSize; x++) {
|
|
for (var y = 0; y < height/gridSize; y++) {
|
|
if (!grid[x][y]) {
|
|
context.beginPath();
|
|
context.arc(x*gridSize, y*gridSize, 1, 0, 2*Math.PI, false);
|
|
context.fill();
|
|
}
|
|
}
|
|
}
|
|
|
|
debugList.forEach(function (p) {
|
|
context.beginPath();
|
|
context.fillStyle = '#aaf';
|
|
context.arc(p.xo, p.yo, 2, 0, 2*Math.PI, false);
|
|
context.fill();
|
|
|
|
context.beginPath();
|
|
context.fillStyle = '#0f0';
|
|
context.arc(p.x, p.y, 2, 0, 2*Math.PI, false);
|
|
context.fill();
|
|
});
|
|
*/
|
|
}
|
|
|
|
function valid(point) {
|
|
return (point != null) && (point !== undefined);
|
|
}
|
|
|