// SMTP var text = ""; var protokollaTila = -1; var hosts = { "h1": "SMTP_Asiakas", "h2": "SMTP_Palvelin" }; var synArray = new Array("Avataanko yhteys? (TCP SYN)", "Avataan yhteys, ok? (TCP SYNACK)", "OK! (TCP ACK)"); var smtpArray = new Array("220 ITKP104 Postipalvelin", "HELO mie here!", "250 ITKP104 Postipalvelin HELO", "MAIL FROM: mie", "250 2.1.0 Sender... mie you are ok", "RCPT TO: sie", "250 2.1.5 Recipient... sie is ok!", "DATA", "354 Enter mail, end with [piste omalla rivillä]", "lalalalala [piste omalla rivillä]", "250 2.0.0 sähköposti lähti!", "QUIT", "221 2.0.0 ITKP104 Postipalvelin sulkeepi yhteyden..."); var finArray = new Array("Suljetaanpa yhteys (TCP FIN)", "Suljetaan yhteys (TCP FIN)", "Okei! (TCP ACK)", "Ookoo! (TCP ACK)"); $(document).ready(function() { alusta(); piirra(); $('a').click(function(event) { var tila = this.id; switch (tila) { case "smtp": switch (protokollaTila) { case -1: $('#smtp').fadeOut(500); $('#smtp').fadeIn(500, function() { $('#smtp').html('Seuraava viesti'); }); protokollaTila += 1; break; case 0: case 2: piirra_nuoli("h1", "h2", synArray[protokollaTila]); protokollaTila += 1; break; case 1: piirra_nuoli("h2", "h1", synArray[protokollaTila]); protokollaTila += 1; break; case 3: case 5: case 7: case 9: case 11: case 13: case 15: piirra_nuoli("h2", "h1", smtpArray[protokollaTila - 3]); protokollaTila += 1; break; case 4: case 6: case 8: case 10: case 12: case 14: piirra_nuoli("h1", "h2", smtpArray[protokollaTila - 3]); protokollaTila += 1; break; case 16: case 18: piirra_nuoli("h1", "h2", finArray[protokollaTila - 16]); protokollaTila += 1; break; case 17: case 19: piirra_nuoli("h2", "h1", finArray[protokollaTila - 16]); protokollaTila += 1; break; case 20: text = text.concat("\nNote right of " + hosts["h1"] + ": Kommunikaatio päättyi"); protokollaTila = -1; break; } break; case "aa": alusta(); break; default: break; } // switch piirra(); }); }); function piirra_nuoli(h1, h2, viesti) { text = text.concat("\n" + hosts[h1] + "->" + hosts[h2] + ": "); text = text.concat(viesti); } function alusta() { text = "title: SMTP Protokolla"; protokollaTila = -1; kuvia = 0; $('#smtp').fadeIn(500, function() { $('#smtp').html('SMTP protokolla'); }); } function piirra() { $('#diagram').html(''); var diagram = Diagram.parse(text); diagram.drawSVG("diagram", { //theme: 'hand' //theme: 'simple' theme: $('.theme').val() }); }
<a id="smtp" href="javascript:void(0);">SMTP kommunikaatio</a> <a id="aa" href="javascript:void(0);">Aloita alusta</a> Theme: <select class="theme" style="margin-left:0.1cm;"> <option value="simple" selected>Simple</option> <option value="hand">Hand drawn</option> </select> <div id="diagram"></div>
a { background-color: #FFFFCC; width: 100px; font-size: 1em; border: 2px solid black; border-radius: 5px; float: top; margin-left: 0.1cm; }