// Esimerkki protokollasta: HTTP, ei näytä TCP yhteyteen liittyviä paketteja var text = ""; var kuvia = 0; var protokollaTila = 0; var hosts = { "h1": "HTTP_Asiakas", "h2": "HTTP_Palvelin" }; var getArray = new Array("GET / HTTP/1.1[EoL]Host: www.example.com[EoL][EoL]", "HTTP/1.1 200 OK[EoL]Otsikkokenttiä[EoL][EoL]HTML sivu"); var kuvaArray = new Array("GET /kuva", ".png HTTP/1.1[EoL]Host: www.example.com[EoL][EoL]", "HTTP/1.1 200 OK[EoL]Otsikkokenttiä[EoL][EoL]kuva", ".png"); $(document).ready(function() { alusta(); piirra(); $('a').click(function(event) { var tila = this.id; switch (tila) { case "protokolla": switch (protokollaTila) { case 0: if (kuvia === 0) { piirra_nuoli("h1", "h2", getArray[0]); protokollaTila = 1; } else if (kuvia < 4) { piirra_nuoli("h1", "h2", kuvaArray[0] + kuvia + kuvaArray[1]); protokollaTila = 1; } else { // } break; case 1: if (kuvia === 0) { piirra_nuoli("h2", "h1", getArray[1]); protokollaTila = 0; } else if (kuvia < 4) { piirra_nuoli("h2", "h1", kuvaArray[2] + kuvia + kuvaArray[3]); if (kuvia === 3) { protokollaTila = 2; } else { protokollaTila = 0; } } else { // should not be here } kuvia++; break; case 2: text = text.concat("\nNote right of " + hosts.h1 + ": Kaikki data siirretty!"); protokollaTila++; break; case 3: alusta(); 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: HTTP Protokolla"; protokollaTila = 0; kuvia = 0; $('#protokolla').fadeIn(500, function() { $('#protokolla').html('Seuraava viesti'); }); } function piirra() { $('#diagram').html(''); var diagram = Diagram.parse(text); diagram.drawSVG("diagram", { //theme: 'hand' //theme: 'simple' theme: $('.theme').val() }); }
<a id="protokolla" href="javascript:void(0);">Seuraava viesti</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; }