// piirikytkentä
// update ideas:
// - klikkaamalla valitaan vastaanottaja
// - lisätään käyttäjävalinta: 1-3 yhteyttä D-E linkin läpi
// - purskeinen liikenne
// 20.3.2015 added delay to connection setup, separate line drawing between d and e
// 12.2.2016 Muutettu: liikuta kutsutaan vain kerran setInterval, eikä kaikille erikseen + siistitty koodia siten että start napille riittää yksi funktio etc. eikä kaikille omia.
// 15.3.2016 Siirretty note ylemmäs ja korjattu liikkumattomuus
// TODO tee yo vielä stop
//var count = [0, 0, 0];
var count = {};
var liikutettavat = [];
var solmutX = [30, 30, 30, 160, 310, 425, 425, 425];
var solmutY = [50, 135, 230, 135, 135, 50, 230, 135];
var noteViive = 5000;
var nopeus = 2000;
var kytkentaViive = 2000;
var clickedA = false;
var clickedB = false;
var clickedC = false;
var stardedA = false;
var stardedB = false;
var stardedC = false;
var myVara;
var myVarb;
var myVarc;
$(document).ready(function() {
setInterval(function() {
liikuta(liikutettavat);
}, nopeus);
$('.start').click(function() {
var luokka = this.id.slice(-1);
//alert(eval("!starded" + luokka.toUpperCase() + ";"));
//alert(eval("!starded" + luokka.toUpperCase() + " && !enemmistoStarted()"));
if (eval("!starded" + luokka.toUpperCase() + " && !enemmistoStarted()")) {
count[luokka] = 0;
switch (luokka) {
case 'a':
stardedA = true;
var vaihtuvasolmu = [0, 5];
var vpos = -5;
var speed = nopeus;
break;
case 'b':
stardedB = true;
var vaihtuvasolmu = [2, 6];
var vpos = +5;
var speed = nopeus;
break;
case 'c':
stardedC = true;
var vaihtuvasolmu = [1, 7];
var vpos = 0;
var speed = 5 * (Math.random() + 1) * nopeus; // c has random traffic generation
break;
}
piirra("myCanvas" + luokka, vaihtuvasolmu, vpos);
$(this).delay(3 * kytkentaViive).queue(function() {
eval("myVar" + luokka + " = startmoving(luokka, " + speed + ");");
$(this).dequeue();
});
} else if (eval("!starded" + luokka.toUpperCase())) {
$('.note').html(luokka + ' ei voi lähettää koska linkin D-E kaikki resurssit (piirit) on käytössä');
$('.note').fadeTo(noteViive, 1, 'linear');
$('.note').fadeTo(noteViive, 0, 'linear');
//eval("clicked" + luokka.toUpperCase() + " = true;");
}
if (eval("!clicked" + luokka.toUpperCase() + ";")) {
liikutettavat.push(luokka)
eval("clicked" + luokka.toUpperCase() + " = true;");
}
});
$('#stop').click(function() {
clearInterval(myVara);
clearInterval(myVarb);
clearInterval(myVarc);
poistaSuorakaide("myCanvasa", 0, 0, 500, 500);
poistaSuorakaide("myCanvasb", 0, 0, 500, 500);
poistaSuorakaide("myCanvasc", 0, 0, 500, 500);
stardedA = false;
stardedB = false;
stardedC = false;
clickedA = false;
clickedB = false;
clickedC = false;
});
$('#stopa').click(function() {
clearInterval(myVara);
$(this).delay(14 * nopeus).queue(function() {
// poistetaan sitten kun viimeinen pala saapuu perille
poistaSuorakaide("myCanvasa", 0, 0, 500, 500);
stardedA = false;
clickedA = false;
});
});
$('#stopb').click(function() {
clearInterval(myVarb);
$(this).delay(14 * nopeus).queue(function() {
// poistetaan sitten kun viimeinen pala saapuu perille
poistaSuorakaide("myCanvasb", 0, 0, 500, 500);
stardedB = false;
clickedB = false;
});
});
$('#stopc').click(function() {
clearInterval(myVarc);
$(this).delay(14 * nopeus).queue(function() {
// poistetaan sitten kun viimeinen pala saapuu perille
poistaSuorakaide("myCanvasc", 0, 0, 500, 500);
stardedC = false;
clickedC = false;
});
});
});
// draw on canvas
function piirraViiva(canvas, x1, y1, x2, y2) {
var c = document.getElementById(canvas);
var ctx = c.getContext("2d");
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function piirra(myCanvas, solmut, vpos) {
piirraViiva(myCanvas, solmutX[solmut[0]], solmutY[solmut[0]], solmutX[3], solmutY[3]);
$(this).delay(kytkentaViive).queue(function() {
piirraViiva(myCanvas, solmutX[3], solmutY[3] + vpos, solmutX[4], solmutY[4] + vpos);
$(this).dequeue();
});
$(this).delay(kytkentaViive).queue(function() {
piirraViiva(myCanvas, solmutX[4], solmutY[4], solmutX[solmut[1]], solmutY[solmut[1]]);
$(this).dequeue();
});
}
function poistaSuorakaide(canvas, x1, y1, x2, y2) {
var c = document.getElementById(canvas);
var ctx = c.getContext("2d");
ctx.clearRect(x1, y1, x2, y2);
ctx.beginPath(); // clear also drawn lines
}
function startmoving(luokka, aika) {
return setInterval(function() {
createDiv(luokka);
}, aika);
}
function stopmoving() {
}
function liikuta(luokat) {
for (var i = 0; i < luokat.length; i++) {
var vasen = 30;
var alas = 0;
var luokka = luokat[i];
$('.' + luokka).each(function() {
var position = $(this).position();
//$(this).text( "left: " + position.left + ", top: " + position.top );
switch (luokka) {
case 'c':
if (position.left > solmutX[6] - 30) {
$(this).fadeToggle(300, function() {
$(this).remove();
});
}
break;
default:
if (position.left >= solmutX[4] - 30) {
alas = 20;
vasen = 30;
if (luokka == 'a') {
alas *= -1;
}
if (position.left > solmutX[6] - 30) {
$(this).fadeToggle(300, function() {
$(this).remove();
});
}
} else if (position.left < solmutX[3] - 30) {
alas = -20;
vasen = 30;
if (luokka == 'a') {
alas *= -1;
}
} else if (position.left > solmutX[3] - 30) {
alas = 0;
vasen = 30;
} else {
alas = 0;
vasen = 30;
}
break;
}
$(this).animate({
left: "+=" + vasen,
top: "+=" + alas
}, nopeus, 'linear');
});
} // for
}
function createDiv(luokka) {
d = document.createElement('div');
count[luokka]++;
$(d).addClass(luokka)
.html(luokka + count[luokka])
.attr('id', luokka + count[luokka])
.appendTo($("body"));
}
function enemmistoStarted() {
return (stardedA && stardedB) || (stardedA && stardedC) || (stardedB && stardedC);
}
<button type="button" id="stop">Stop all</button>
<button type="button" class="start" id="starta">Start a</button>
<button type="button" class="start" id="startb">Start b</button>
<button type="button" class="start" id="startc">Start c</button>
<button type="button" id="stopa">Stop a</button>
<button type="button" id="stopb">Stop b</button>
<button type="button" id="stopc">Stop c</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="note"></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: 250px;
background-color: #F2FFCC;
}
.c {
top: 160px;
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, orange);
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: 240px;
}
#dd {
left: 145px;
}
#ee {
left: 295px;
}
#gg,
#ff,
#hh {
left: 410px;
}
canvas {
border: 1px solid #d3d3d3;
position: absolute;
left: 0px;
top: 40px;
}
.note {
background-color: #9999CC;
border: 1px solid black;
border-radius: 5px;
text-align: center;
font-size: 1em;
position: relative;
top: 200px;
left: 150px;
opacity: 0;
width: 180px;
}