// 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; }