Save this as "script.js" var canvas; var picture = new Array (); var pictureduration = 900900; var initial_cpb_removal_delay = 900900; var initial_cpb_removal_delay_offset = 90090; var cbr_flag = true; function init () { Canvas = document.getElementById (' canvas '); Resetstream (); Update (); } function Resetstream () { var bit_rate = document.getElementById (' bitrate '). Value * 1000; var averagepicsize = pictureduration/27000000 * BIT_RATE/8; for (var i = 0; i < i++) { Picture[i] = averagepicsize + (math.random ()-0.5) * averagepicsize; } } function Ticktox (tick) { return tick/900900 * 64; } function Leveltoy (level) { return canvas.height-level/50; } function Drawdecodepictures (CTX) { Ctx.strokestyle = ' Rgba (255, 0, 0, 255) '; Ctx.beginpath (); Ctx.moveto (0, Leveltoy (0)); Ctx.lineto (Ticktox (Initial_cpb_removal_delay), Leveltoy (0)); var PrevX = Ticktox (Initial_cpb_removal_delay) var prevlevel = 0; for (var i = 0; i < i++) { var level = Prevlevel + picture[i]; var x1 = PrevX; var x2 = PrevX + Ticktox (pictureduration) var y = Leveltoy (level); Ctx.lineto (x1, y); Ctx.lineto (x2, y); Prevlevel = level; PrevX = x2 } Ctx.stroke (); } function Levelfromperiod (period, bitrate) { return period/27000000.0 * BITRATE/8; } function Drawinputdata (CTX) { var t_af = new Array (); var t_ai = new Array (); var t_ai_earliest = new Array (); var t_rn = new Array (); var bit_rate = document.getElementById (' bitrate '). Value * 1000; T_ai[0] = 0; T_af[0] = picture[0] * 8 * 27000000/bit_rate; T_rn[0] = Initial_cpb_removal_delay; for (var n = 1; n < picture.length; n++) { T_rn[n] = t_rn[n-1] + pictureduration; if (Cbr_flag = = True) { T_ai[n] = t_af[n-1]; } Else { T_ai_earliest = T_rn[n]-(Initial_cpb_removal_delay + initial_cpb_removal_delay_offset); T_ai[n] = Math.max (t_af[n-1], t_ai_earliest); } T_af[n] = T_ai[n] + picture[n] * 8 * 27000000/bit_rate; } Ctx.strokestyle = ' Rgba (0, 0, 255, 255) '; Ctx.beginpath (); Ctx.moveto (Ticktox (0), Leveltoy (0)); var level = 0; for (var n = 0; n < picture.length; n++) { Ctx.lineto (Ticktox (T_ai[n]), Leveltoy (level)); Level + = Picture[n]; Ctx.lineto (Ticktox (T_af[n]), Leveltoy (level)); } Ctx.stroke (); level = 0; for (var n = 0; n < picture.length; n++) { var isicrdvisible = document.getElementById ("isicrdvisible"). Checked; if (isicrdvisible) { Draw Initial_cpb_removal_delay Period var icrd_x1 = Ticktox (T_rn[n]-Initial_cpb_removal_delay) var icrd_x2 = Ticktox (T_rn[n]) var icrd_y = Leveltoy (level)-4 Ctx.strokestyle = ' Rgba (0, 0, 0, 255) '; Ctx.beginpath (); Ctx.moveto (icrd_x1, icrd_y); Ctx.lineto (icrd_x2, icrd_y); Ctx.stroke (); Ctx.beginpath (); Ctx.moveto (icrd_x1 + 2, icrd_y-2); Ctx.lineto (icrd_x1, icrd_y); Ctx.lineto (icrd_x1 + 2, icrd_y + 2); Ctx.stroke (); Ctx.beginpath (); Ctx.moveto (icrd_x2-2, icrd_y-2); Ctx.lineto (icrd_x2, icrd_y); Ctx.lineto (icrd_x2-2, icrd_y + 2); Ctx.stroke (); } var isicrdovisible = document.getElementById ("isicrdovisible"). Checked; if (isicrdovisible) { Draw Initial_cpb_removal_delay Period var icrdo_x1 = Ticktox (T_rn[n]-Initial_cpb_removal_delay-initial_cpb_removal_delay_offset) var icrdo_x2 = icrd_x1 var icrdo_y = Leveltoy (level)-4 Ctx.strokestyle = ' Rgba (0, 0, 0, 255) '; Ctx.beginpath (); Ctx.moveto (icrdo_x1, icrdo_y); Ctx.lineto (icrdo_x2, icrdo_y); Ctx.stroke (); Ctx.beginpath (); Ctx.moveto (icrdo_x1 + 2, icrdo_y-2); Ctx.lineto (icrdo_x1, icrdo_y); Ctx.lineto (icrdo_x1 + 2, icrdo_y + 2); Ctx.stroke (); Ctx.beginpath (); Ctx.moveto (icrdo_x2-2, icrdo_y-2); Ctx.lineto (icrdo_x2, icrdo_y); Ctx.lineto (icrdo_x2-2, icrdo_y + 2); Ctx.stroke (); } Level + = Picture[n]; } } function SetMode (mode) { Cbr_flag = mode = = "CBR"; } function UpdateUI (uiname, ValueName) { document.getElementById (uiname). InnerHTML = document.getElementById (valueName). Value } function Update () { var ctx = Canvas.getcontext (' 2d '); Ctx.fillstyle = ' Rgba (255, 255, 255, 255) '; Ctx.fillrect (0, 0, canvas.width, canvas.height); UpdateUI ("Showbitrate", "bitrate"); UpdateUI ("Showicrd", "Initial_cpb_removal_delay"); UpdateUI ("Showicrdo", "Initial_cpb_removal_delay_offset"); Initial_cpb_removal_delay = document.getElementById (' Initial_cpb_removal_delay '). Value * 27000; Initial_cpb_removal_delay_offset = document.getElementById (' Initial_cpb_removal_delay_offset '). Value * 27000; Drawdecodepictures (CTX); Drawinputdata (CTX); }; |