// Pakettikytkentä (viiveen havainnollistus)
// 24.3.2015 Made info -divs more visible, modifying fadeTo happen faster and added delay between faseTo's. Also added info at start when delay affects first packet
// TODO: remove start delay, fix delay variation: now delay value affects movement after pervious delay has passed, should have an effect immidiately (to all packets)
count = [];
solmutX = [30, 30, 30, 160, 310, 425, 425, 425];
solmutY = [50, 135, 230, 135, 135, 50, 230, 135];
jonossa = [];
poisJonosta = [];
lahettajat = [];
nopeus = 5000;
clickedA = false;
clickedB = false;
clickedC = false;
stardedA = false;
stardedB = false;
stardedC = false;
startedmove = false;
$(document).ready(function() {
count.push(0);
count.push(0);
count.push(0);
var myVar1;
var myVar2;
var myVar3;
var liikutaan;
var p = document.getElementById("speed"),
res = document.getElementById("result");
p.addEventListener("input", function() {
res.innerHTML = "Nopeus [s]: " + p.value;
nopeus = p.value * 1000;
clearInterval(liikutaan);
stopAll(myVar1, myVar2, myVar3);
startedmove = false;
if (!startedmove) {
liikutaan = startliikuta();
}
}, false);
function alkuTeksti(kuka) {
if (kuka == 'A') $('#i1').html(kuka + ' kasaa paketteja...');
if (kuka == 'B') $('#i1').html(kuka + ' keräilee dataa paketteihin...');
if (kuka == 'C') $('#i1').html(kuka + ' paketoi datansa huolella...');
$('#i1').fadeTo(nopeus / 8, 1, 'linear', function() {
$(this).delay(0.75 * nopeus).fadeTo(nopeus / 8, 0, 'linear');
});
}
$('#start1').click(function() {
alkuTeksti('A');
if (!stardedA) {
myVar1 = makePackets('a', 0, nopeus);
stardedA = true;
}
if (!clickedA) {
lahettajat.push('a');
clickedA = true;
}
if (!startedmove) {
liikutaan = startliikuta();
}
});
$('#start2').click(function() {
alkuTeksti('B');
if (!stardedB) {
myVar2 = makePackets('b', 1, nopeus);
}
stardedB = true;
if (!clickedB) {
lahettajat.push('b');
clickedB = true;
}
if (!startedmove) {
liikutaan = startliikuta();
}
});
$('#start3').click(function() {
alkuTeksti('C');
if (!stardedC) {
var newmyVar3 = makePackets('c', 2, nopeus);
stardedC = true;
setInterval(function() {
clearInterval(newmyVar3);
stardedC = false;
}, nopeus);
}
if (!startedmove) {
liikutaan = startliikuta();
}
if (!clickedC) {
lahettajat.push('c');
clickedC = true;
}
});
$('#stop').click(function() {
stopAll(myVar1, myVar2, myVar3);
});
$('#stop1').click(function() {
clearInterval(myVar1);
stardedA = false;
});
$('#stop2').click(function() {
clearInterval(myVar2);
stardedB = false;
});
$('#stop3').click(function() {});
});
function stopAll(myVar1, myVar2, myVar3) {
clearInterval(myVar1);
clearInterval(myVar2);
clearInterval(myVar3);
stardedA = false;
stardedB = false;
stardedC = false;
}
function startliikuta() {
startedmove = true;
return setInterval(function() {
// liikutetaan ensin sitä luokkaa jonka paketti on jonon ensimmäisenä
ekaLuokka = $('#' + jonossa[0]).attr('class');
liikuta(ekaLuokka);
for (var i = 0; i < lahettajat.length; i++) {
if (lahettajat[i] != ekaLuokka) {
liikuta(lahettajat[i]);
}
}
}, nopeus);
}
function makePackets(luokka, ind, aika) {
return setInterval(function() {
createDiv(luokka, luokka, ind);
}, aika);
}
function liikuta(luokka) {
var vasen = 30;
var alas = 0;
$('.' + luokka).each(function() {
var position = $(this).position();
switch (luokka) {
case 'c':
if (position.left > solmutX[6] - 30) {
$(this).fadeToggle(300, function() {
$(this).remove();
});
} else if (position.left == solmutX[0]) {
$('#i1').html('Lähetysviive solmussa C (eli se aika mikä kuluu koko paketin lähettämiseen linkille)');
$('#i1').fadeTo(nopeus / 8, 1, 'linear', function() {
$(this).delay(0.75 * nopeus).fadeTo(nopeus / 8, 0, 'linear');
});
} else if (position.left >= solmutX[0] && position.left < solmutX[0] + 40) {
$('#i3').html('Etenemisviive solmujen C ja D välillä');
$('#i3').fadeTo(3 * nopeus / 8, 1, 'linear', function() {
$(this).delay(3 * 0.75 * nopeus).fadeTo(3 * nopeus / 8, 0, 'linear');
});
} else if (position.left >= 145 && position.left < 155 && poisJonosta.indexOf(this.id) == -1) {
// jos koordinaatin mukaan jonotuspaikassa
if (jonossa.indexOf(this.id) > -1) {
if (position.top > 155) {
alas = -20;
vasen = 0;
} else {
$('#i2').html('Lähetysviive solmussa D (eli tiedonsiirtonopeus bit/s)');
$('#i2').fadeTo(nopeus / 8, 1, 'linear', function() {
$(this).delay(0.75 * nopeus).fadeTo(nopeus / 8, 0, 'linear');
});
vasen = 30;
alas = 0;
poisJonosta.push(this.id);
jonossa.shift();
}
} else { // laitetaan jonoon
$('#i1').html('Prosessointiviive solmussa D (virheentarkistus, kapselointi, ohjaus oikealle linkille');
$('#i1').fadeTo(nopeus / 8, 1, 'linear', function() {
$(this).delay(0.75 * nopeus).fadeTo(nopeus / 8, 0, 'linear');
});
jonossa.push(this.id);
paikka = jonossa.indexOf(this.id);
if (paikka !== 0) {
$('#i4').html('Jonotusviive solmussa D');
$('#i4').fadeTo(nopeus, 0, 'linear'); // this is just delay to move packet to end of queue before we start showing the packet
$('#i4').fadeTo((paikka) * nopeus / 8, 1, 'linear', function() {
$(this).delay((paikka) * 0.75 * nopeus).fadeTo((paikka) * nopeus / 8, 0, 'linear');
});
}
vasen = 0;
alas = 20 * paikka;
}
} else if (position.left >= 155 && position.left < 185) {
$('#i3').html('Etenemisviive solmujen D ja E välillä. Todellisuudessa etenee n. 2/3 valonnopeudesta, viive maapallon ympäri olisi n. 200 ms');
$('#i3').fadeTo(4 * nopeus / 8, 1, 'linear', function() {
$(this).delay(4 * 0.75 * nopeus).fadeTo(4 * nopeus / 8, 0, 'linear');
});
} else {
alas = 0;
vasen = 30;
}
break;
default:
if (position.left >= solmutX[4] - 30) {
vasen = 30;
alas = 20;
if (luokka == 'a') {
alas *= -1;
}
if (position.left > solmutX[6] - 30) {
$(this).fadeToggle(300, function() {
$(this).remove();
});
}
} else if (position.left < solmutX[3] - 30) {
vasen = 30;
alas = -20;
if (luokka == 'a') {
alas *= -1;
}
} else if (position.left >= 145 && position.left < 155 && poisJonosta.indexOf(this.id) == -1) {
if (jonossa.indexOf(this.id) > -1) {
if (position.top > 155) {
alas = -20;
vasen = 0;
} else {
vasen = 30;
alas = 0;
poisJonosta.push(this.id);
jonossa.shift();
}
} else {
jonossa.push(this.id);
paikka = jonossa.indexOf(this.id);
vasen = 0;
alas = 20 * paikka;
}
} else {
alas = 0;
vasen = 30;
}
break;
}
$(this).animate({
left: "+=" + vasen,
top: "+=" + alas
}, nopeus, 'linear');
});
}
function createDiv(text, luokka, ind) {
d = document.createElement('div');
count[ind]++;
$(d).addClass(luokka)
.html(text + count[ind])
.attr('id', text + count[ind])
.appendTo($("body"));
}
<button type="button" id="stop">Stop sending</button>
<button type="button" id="start1">Start a</button>
<button type="button" id="start2">Start b</button>
<button type="button" id="start3">Send c</button>
<button type="button" id="stop1">Stop a</button>
<button type="button" id="stop2">Stop b</button>
<!--<button type="button" id="stop3">Move again</button>-->
<canvas id="myCanvasa" width="500" height="500">Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvasb" width="500" height="500"></canvas>
<canvas id="myCanvasc" width="500" height="500"></canvas>
<div class="circle" id='aa'>A</div>
<div class="circle" id='bb'>C</div>
<div class="circle" id='cc'>B</div>
<div class="circle" id='dd'>D</div>
<div class="circle" id='ee'>E</div>
<div class="circle" id='ff'>F</div>
<div class="circle" id='gg'>G</div>
<div class="circle" id='hh'>H</div>
<div class="info" id="i1">info</div>
<div class="info" id="i2">info</div>
<div class="info" id="i3">info</div>
<div class="info" id="i4">info</div>
<div class="slider" style="margin-top: 1em">1
<input id="speed" type="range" min="1" max="10" value="" />10</div>
<div class="res">
<p id="result">Visualisoinnin viive [s]:</p>
</div>
div {
background-color: #9999CC;
border: 1px solid black;
border-radius: 5px;
text-align: center;
font-size: 1em;
position: absolute;
top: 70px;
left: 30px;
width: 30px;
}
.b {
top: 230px;
background-color: #F2FFCC;
}
.c {
top: 150px;
background-color: #FF6666;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, red);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}
#aa,
#bb,
#cc,
#ff {
left: 15px;
top: 60px;
}
#bb,
#dd,
#ee,
#gg {
top: 145px;
}
#cc,
#hh {
top: 230px;
}
#dd {
left: 145px;
}
#ee {
left: 295px;
}
#gg,
#ff,
#hh {
left: 410px;
}
canvas {
border: 1px solid #d3d3d3;
position: absolute;
left: 0px;
top: 40px;
}
.info {
opacity: 0;
position: absolute;
left: 200px;
top: 50px;
width: 150px;
}
#i2 {
top: 50px;
}
#i3 {
left: 200px;
top: 200px;
}
#i4 {
left: 200px;
top: 300px;
}
.slider {
left: 200px;
top: 350px;
width: 250px;
height: 30px;
}
.res {
left: 200px;
top: 400px;
width: 250px;
height: 40px;
}