|
|
@@ -0,0 +1,250 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <title>Speedtest</title>
|
|
|
+ <style type="text/css">
|
|
|
+ html,body{
|
|
|
+ margin:0;
|
|
|
+ padding:0;
|
|
|
+ border:none;
|
|
|
+ text-align:center;
|
|
|
+ }
|
|
|
+ #startBtn{
|
|
|
+ display:inline-block;
|
|
|
+ border:0.15em solid #000000;
|
|
|
+ padding:0.3em 0.5em;
|
|
|
+ margin:0.6em;
|
|
|
+ color:#000000;
|
|
|
+ text-decoration:none;
|
|
|
+ }
|
|
|
+ #ip{
|
|
|
+ margin:0.8em 0;
|
|
|
+ font-size:1.2em;
|
|
|
+ }
|
|
|
+
|
|
|
+ #chart1Area, #chart2Area{
|
|
|
+ width:100%;
|
|
|
+ max-width:30em;
|
|
|
+ height:10em;
|
|
|
+ display:block;
|
|
|
+ margin:0 auto;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <script src="example5_data/Chart.bundle.min.js"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ var w=null;
|
|
|
+ function runTest(){
|
|
|
+ var chart1ctx=document.getElementById("chart1Area").getContext('2d'),
|
|
|
+ chart2ctx=document.getElementById("chart2Area").getContext('2d');
|
|
|
+ var dlDataset={
|
|
|
+ label: "Download",
|
|
|
+ fill: false,
|
|
|
+ lineTension: 0.1,
|
|
|
+ backgroundColor: "rgba(75,192,192,0.4)",
|
|
|
+ borderColor: "rgba(75,192,192,1)",
|
|
|
+ borderCapStyle: 'butt',
|
|
|
+ borderDash: [],
|
|
|
+ borderDashOffset: 0.0,
|
|
|
+ borderJoinStyle: 'miter',
|
|
|
+ pointBorderColor: "rgba(75,192,192,1)",
|
|
|
+ pointBackgroundColor: "#fff",
|
|
|
+ pointBorderWidth: 1,
|
|
|
+ pointHoverRadius: 5,
|
|
|
+ pointHoverBackgroundColor: "rgba(75,192,192,1)",
|
|
|
+ pointHoverBorderColor: "rgba(220,220,220,1)",
|
|
|
+ pointHoverBorderWidth: 2,
|
|
|
+ pointRadius: 1,
|
|
|
+ pointHitRadius: 10,
|
|
|
+ data: [0],
|
|
|
+ spanGaps: false,
|
|
|
+ },
|
|
|
+ ulDataset={
|
|
|
+ label: "Upload",
|
|
|
+ fill: false,
|
|
|
+ lineTension: 0.1,
|
|
|
+ backgroundColor: "rgba(192,192,75,0.4)",
|
|
|
+ borderColor: "rgba(192,192,75,1)",
|
|
|
+ borderCapStyle: 'butt',
|
|
|
+ borderDash: [],
|
|
|
+ borderDashOffset: 0.0,
|
|
|
+ borderJoinStyle: 'miter',
|
|
|
+ pointBorderColor: "rgba(192,192,75,1)",
|
|
|
+ pointBackgroundColor: "#fff",
|
|
|
+ pointBorderWidth: 1,
|
|
|
+ pointHoverRadius: 5,
|
|
|
+ pointHoverBackgroundColor: "rgba(192,192,75,1)",
|
|
|
+ pointHoverBorderColor: "rgba(220,220,220,1)",
|
|
|
+ pointHoverBorderWidth: 2,
|
|
|
+ pointRadius: 1,
|
|
|
+ pointHitRadius: 10,
|
|
|
+ data: [0],
|
|
|
+ spanGaps: false,
|
|
|
+ },
|
|
|
+ pingDataset={
|
|
|
+ label: "Ping",
|
|
|
+ fill: false,
|
|
|
+ lineTension: 0.1,
|
|
|
+ backgroundColor: "rgba(75,220,75,0.4)",
|
|
|
+ borderColor: "rgba(75,220,75,1)",
|
|
|
+ borderCapStyle: 'butt',
|
|
|
+ borderDash: [],
|
|
|
+ borderDashOffset: 0.0,
|
|
|
+ borderJoinStyle: 'miter',
|
|
|
+ pointBorderColor: "rgba(75,220,75,1)",
|
|
|
+ pointBackgroundColor: "#fff",
|
|
|
+ pointBorderWidth: 1,
|
|
|
+ pointHoverRadius: 5,
|
|
|
+ pointHoverBackgroundColor: "rgba(75,220,75,1)",
|
|
|
+ pointHoverBorderColor: "rgba(220,220,220,1)",
|
|
|
+ pointHoverBorderWidth: 2,
|
|
|
+ pointRadius: 1,
|
|
|
+ pointHitRadius: 10,
|
|
|
+ data: [],
|
|
|
+ spanGaps: false,
|
|
|
+ },
|
|
|
+ jitterDataset={
|
|
|
+ label: "Jitter",
|
|
|
+ fill: false,
|
|
|
+ lineTension: 0.1,
|
|
|
+ backgroundColor: "rgba(220,75,75,0.4)",
|
|
|
+ borderColor: "rgba(220,75,75,1)",
|
|
|
+ borderCapStyle: 'butt',
|
|
|
+ borderDash: [],
|
|
|
+ borderDashOffset: 0.0,
|
|
|
+ borderJoinStyle: 'miter',
|
|
|
+ pointBorderColor: "rgba(220,75,75,1)",
|
|
|
+ pointBackgroundColor: "#fff",
|
|
|
+ pointBorderWidth: 1,
|
|
|
+ pointHoverRadius: 5,
|
|
|
+ pointHoverBackgroundColor: "rgba(220,75,75,1)",
|
|
|
+ pointHoverBorderColor: "rgba(220,220,220,1)",
|
|
|
+ pointHoverBorderWidth: 2,
|
|
|
+ pointRadius: 1,
|
|
|
+ pointHitRadius: 10,
|
|
|
+ data: [],
|
|
|
+ spanGaps: false,
|
|
|
+ }
|
|
|
+ ;
|
|
|
+ var chart1Options={
|
|
|
+ type: 'line',
|
|
|
+ data: {
|
|
|
+ datasets: [dlDataset,ulDataset]
|
|
|
+ },
|
|
|
+ options:{
|
|
|
+ responsive: true,
|
|
|
+ legend: {
|
|
|
+ position: 'bottom',
|
|
|
+ },
|
|
|
+ scales: {
|
|
|
+ xAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ },
|
|
|
+ ticks:{
|
|
|
+ beginAtZero: true
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: "Speed",
|
|
|
+ ticks:{
|
|
|
+ beginAtZero: true
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chart2Options={
|
|
|
+ type: 'line',
|
|
|
+ data: {
|
|
|
+ datasets: [pingDataset,jitterDataset]
|
|
|
+ },
|
|
|
+ options:{
|
|
|
+ responsive: true,
|
|
|
+ legend: {
|
|
|
+ position: 'bottom',
|
|
|
+ },
|
|
|
+ scales: {
|
|
|
+ xAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: {
|
|
|
+ display: false,
|
|
|
+ },
|
|
|
+ ticks:{
|
|
|
+ beginAtZero: true
|
|
|
+ }
|
|
|
+ }],
|
|
|
+ yAxes: [{
|
|
|
+ display: true,
|
|
|
+ scaleLabel: "Latency",
|
|
|
+ ticks:{
|
|
|
+ beginAtZero: true
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ var chart1 = new Chart(chart1ctx, chart1Options),
|
|
|
+ chart2 = new Chart(chart2ctx, chart2Options);
|
|
|
+
|
|
|
+ document.getElementById("startBtn").style.display="none";
|
|
|
+ document.getElementById("testArea").style.display="";
|
|
|
+ document.getElementById("abortBtn").style.display="";
|
|
|
+ w=new Worker("speedtest_worker.min.js");
|
|
|
+ var interval=setInterval(function(){w.postMessage("status");}.bind(this),100);
|
|
|
+ w.onmessage=function(event){
|
|
|
+ var data=event.data.split(";");
|
|
|
+ var status=Number(data[0]);
|
|
|
+ if(status>=4){
|
|
|
+ clearInterval(interval);
|
|
|
+ document.getElementById("abortBtn").style.display="none";
|
|
|
+ document.getElementById("startBtn").style.display="";
|
|
|
+ w=null;
|
|
|
+ }
|
|
|
+ if(status==5){
|
|
|
+ document.getElementById("testArea").style.display="none";
|
|
|
+ }
|
|
|
+ if(status==1&&Number(data[1])>0){
|
|
|
+ chart1.data.datasets[0].data.push(Number(data[1]));
|
|
|
+ chart1.data.labels[chart1.data.datasets[0].data.length-1]="";
|
|
|
+ chart1.update();
|
|
|
+ }
|
|
|
+ if(status==3&&Number(data[2])>0){
|
|
|
+ chart1.data.datasets[1].data.push(Number(data[2]));
|
|
|
+ chart1.data.labels[chart1.data.datasets[1].data.length-1]="";
|
|
|
+ chart1.update();
|
|
|
+ }
|
|
|
+ if(status==2&&Number(data[3])>0){
|
|
|
+ chart2.data.datasets[0].data.push(Number(data[3]));
|
|
|
+ chart2.data.datasets[1].data.push(Number(data[5]));
|
|
|
+ chart2.data.labels[chart2.data.datasets[0].data.length-1]="";
|
|
|
+ chart2.data.labels[chart2.data.datasets[1].data.length-1]="";
|
|
|
+ chart2.update();
|
|
|
+ }
|
|
|
+ ip.innerHTML=data[4];
|
|
|
+ }.bind(this);
|
|
|
+ w.postMessage("start");
|
|
|
+ }
|
|
|
+ function abortTest(){
|
|
|
+ if(w)w.postMessage("abort");
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <h1>Speedtest</h1>
|
|
|
+ <div id="testArea" style="display:none">
|
|
|
+ <div id="ip">Please wait...</div>
|
|
|
+ <h2>Speed</h2>
|
|
|
+ <canvas id="chart1Area"></canvas>
|
|
|
+ <h2>Latency</h2>
|
|
|
+ <canvas id="chart2Area"></canvas>
|
|
|
+ <br/>
|
|
|
+ <a href="javascript:abortTest()" id="abortBtn">Abort</a>
|
|
|
+ </div>
|
|
|
+ <a href="javascript:runTest()" id="startBtn">Run speedtest</a>
|
|
|
+ <br/><br/>
|
|
|
+ Charts by <a href="http://www.chartjs.org/">Chart.js</a>
|
|
|
+ </body>
|
|
|
+</html>
|
dosse91