Apq
/
speedtest
mirror of https://github.com/librespeed/speedtest.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							<!DOCTYPE html>
<html>
    <head>
        <title>Speedtest</title>
        <style type="text/css">

            html,body{
                margin:0;
                padding:0;
                border:none;
                text-align:center;
                font-family: 'Open Sans';
            }

            h1,h2,h3,h4,h5,h6
            {
                font-family: 'Roboto', sans-serif;
                font-weight: 700;
            }

            div.meter{
                display:inline-block;
                height:300px;
                width:400px;
                text-align: center;
                font-size:6vw;
            }

            div#testArea
            {
                display: flex; 
                justify-content: center;
                flex-flow: row wrap;
            }


            a {
                text-decoration: none;
            }

            .button {
                display: inline-block;
                margin: 10px 5px 0 2px;
                padding: 16px 40px;
                border-radius: 5px;
                font-size: 18px;
                border: none;
                background: #34aadc;
                color: white;
                cursor: pointer;
                text-transform: uppercase;
                font-weight: 700;
                font-family: 'Roboto';
            }    
			
			#ip{
				margin:1em 0;
				font-size:1.2em;
			}

        </style>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/justgage/1.2.2/justgage.min.js"></script>
        <script type="text/javascript">
            var w=null;
            var ggdl,ggul,ggping;
            function runTest(){
                w=new Worker("speedtest_worker.min.js");
                var interval=setInterval(function(){w.postMessage("status");}.bind(this),100);
                document.getElementById("abortBtn").style.display="";
                document.getElementById("startBtn").style.display="none";
                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;
                    }
                    updateGauge(ggdl,   data[1]);
                    updateGauge(ggul,   data[2]);
                    updateGauge(ggping, data[3]);
					document.getElementById("ip").innerHTML="Your IP: "+data[4];
					updateGauge(ggjitter, data[5]);
                }.bind(this);
                w.postMessage('start {"time_ul":"10", "time_dl":"10", "count_ping":"50", "url_dl":"garbage.php","url_ul":"empty.dat","url_ping":"empty.dat","url_getIp":"getIP.php"}');
            }
            function abortTest(){
                if(w)w.postMessage("abort");
            }

            document.addEventListener("DOMContentLoaded", function(event) {
                ggdl = new JustGage({
                    id: 'ggdl',
                    title: "Download",
                    label: "Mbit/s",
                    titleFontFamily : "Open Sans",
                    valueFontFamily : "Open Sans",                    
                    refreshAnimationTime: 300,                    
                    value: 0,
                    min: 0,
                    max: 10,
                    decimals : 2,
                    formatNumber: true,                    
                    humanFriendly : false,  
                    levelColors: [
                        "#999999",
                        "#339933"
                    ]
                });

                ggul = new JustGage({
                    id: 'ggul',
                    title: "Upload",
                    label: "Mbit/s",
                    titleFontFamily : "Open Sans",
                    valueFontFamily : "Open Sans",
                    refreshAnimationTime: 300, 
                    value: 0,
                    min: 0,
                    max: 10,
                    decimals : 2,
                    formatNumber: true,                    
                    humanFriendly : false,  
                    levelColors: [
                        "#999999",
                        "#333399"
                    ]

                });

                ggping = new JustGage({
                    id: 'ggping',
                    title: "Ping",
                    label: "ms",
                    titleFontFamily : "Open Sans",
                    valueFontFamily : "Open Sans",
                    refreshAnimationTime: 300, 
                    value: 0,
                    min: 0,
                    max: 100,
                    decimals : 2,
                    formatNumber: true,                    
                    humanFriendly : false,  
                    levelColors: [
                        "#999999",
                        "#993333"
                    ]
                });
				ggjitter = new JustGage({
                    id: 'ggjitter',
                    title: "Jitter",
                    label: "ms",
                    titleFontFamily : "Open Sans",
                    valueFontFamily : "Open Sans",
                    refreshAnimationTime: 300, 
                    value: 0,
                    min: 0,
                    max: 100,
                    decimals : 2,
                    formatNumber: true,                    
                    humanFriendly : false,  
                    levelColors: [
                        "#999999",
                        "#993333"
                    ]
                });
            });

            function updateGauge(gauge, value)
            {
                // Alway use next power of 2 as maximum
                var max = Math.max(Math.pow(2, Math.ceil(Math.log2(value))), gauge.config.max);
                // Refresh the gauge
                gauge.refresh(value, max);
            }
        </script>        
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700|Roboto:400,500,700" rel="stylesheet">
    </head>
    <body>
        <h1>Speed Test</h1>
        <div id="testArea">
            <div class="meter" id="ggdl"></div>
            <div class="meter" id="ggul"></div>
            <div class="meter" id="ggping"></div>
			<div class="meter" id="ggjitter"></div>
        </div>
		<div id="ip"></div>
        <div>
            <a href="javascript:runTest()"   id="startBtn" class="button">Start</a>
            <a href="javascript:abortTest()" id="abortBtn" class="button" style="display:none;">Abort</a>
        </div>
        <p>Fonts: <a href="https://fonts.google.com/">Google Gonts</a> | Gauges: <a href="http://justgage.com/">justgage.com</a></p>
    </body>
</html>