From 9f4851dc8b9b9b2b2208ac0638d2fa29fea96dd8 Mon Sep 17 00:00:00 2001
From: dosse91 <dosse91@paranoici.org>
Date: Tue, 24 Sep 2019 13:58:31 +0200
Subject: [PATCH 1/2] Redesigned sharable image

---
 results/index.php | 127 ++++++++++++++++++++++++++++------------------
 1 file changed, 78 insertions(+), 49 deletions(-)

diff --git a/results/index.php b/results/index.php
index ffddaaa..daf27f1 100644
--- a/results/index.php
+++ b/results/index.php
@@ -1,4 +1,6 @@
 <?php
+$WATERMARK_TEXT="HTML5 Speedtest";
+
 error_reporting(0);
 putenv('GDFONTPATH=' . realpath('.'));
 function tryFont($name){
@@ -11,44 +13,66 @@ function tryFont($name){
 	}
 	return $name;
 }
+function format($d){
+    if($d<10) return number_format($d,2,".","");
+    if($d<100) return number_format($d,1,".","");
+    return number_format($d,0,".","");
+}
 
 $SCALE=1.25;
-$WIDTH=530*$SCALE;
-$HEIGHT=150*$SCALE;
+$WIDTH=400*$SCALE;
+$HEIGHT=229*$SCALE;
 $im=imagecreatetruecolor($WIDTH,$HEIGHT);
-$BACKGROUND_COLOR=imagecolorallocate($im,248,248,248);
-$FONT_1=tryFont("OpenSans-Semibold");
-$FONT_1_SIZE=16*$SCALE;
-$FONT_2=tryFont("OpenSans-Light");
-$FONT_2_SIZE=24*$SCALE;
-$FONT_3=tryFont("OpenSans-Semibold");
-$FONT_3_SIZE=14*$SCALE;
-$FONT_4=tryFont("OpenSans-Semibold");
-$FONT_4_SIZE=10*$SCALE;
+$BACKGROUND_COLOR=imagecolorallocate($im,255,255,255);
+$FONT_LABEL=tryFont("OpenSans-Semibold");
+$FONT_LABEL_SIZE=14*$SCALE;
+$FONT_LABEL_SIZE_BIG=16*$SCALE;
+$FONT_METER=tryFont("OpenSans-Light");
+$FONT_METER_SIZE=20*$SCALE;
+$FONT_METER_SIZE_BIG=22*$SCALE;
+$FONT_MEASURE=tryFont("OpenSans-Semibold");
+$FONT_MEASURE_SIZE=12*$SCALE;
+$FONT_MEASURE_SIZE_BIG=12*$SCALE;
+$FONT_ISP=tryFont("OpenSans-Semibold");
+$FONT_ISP_SIZE=9*$SCALE;
 $FONT_WATERMARK=tryFont("OpenSans-Light");
 $FONT_WATERMARK_SIZE=8*$SCALE;
-$TEXT_COLOR_1=imagecolorallocate($im,40,40,40);
-$TEXT_COLOR_2=imagecolorallocate($im,96,96,96);
-$TEXT_COLOR_3=imagecolorallocate($im,40,40,40);
-$TEXT_COLOR_4=imagecolorallocate($im,40,40,40);
+$TEXT_COLOR_LABEL=imagecolorallocate($im,40,40,40);
+$TEXT_COLOR_DL_METER=imagecolorallocate($im,96,96,170);
+$TEXT_COLOR_UL_METER=imagecolorallocate($im,96,96,96);
+$TEXT_COLOR_PING_METER=imagecolorallocate($im,170,96,96);
+$TEXT_COLOR_JIT_METER=imagecolorallocate($im,170,96,96);
+$TEXT_COLOR_MEASURE=imagecolorallocate($im,40,40,40);
+$TEXT_COLOR_ISP=imagecolorallocate($im,40,40,40);
 $TEXT_COLOR_WATERMARK=imagecolorallocate($im,160,160,160);
-$POSITION_Y_1=24*$SCALE;
-$POSITION_Y_2=78*$SCALE;
-$POSITION_Y_3=118*$SCALE;
-$POSITION_Y_4=146*$SCALE;
-$POSITION_Y_WATERMARK=146*$SCALE;
-$POSITION_X_DL=68*$SCALE;
-$POSITION_X_UL=200*$SCALE;
-$POSITION_X_PING=330*$SCALE;
-$POSITION_X_JIT=460*$SCALE;
+$POSITION_Y_DL_LABEL=105*$SCALE;
+$POSITION_Y_UL_LABEL=105*$SCALE;
+$POSITION_Y_PING_LABEL=24*$SCALE;
+$POSITION_Y_JIT_LABEL=24*$SCALE;
+$POSITION_Y_DL_METER=143*$SCALE;
+$POSITION_Y_UL_METER=143*$SCALE;
+$POSITION_Y_PING_METER=60*$SCALE;
+$POSITION_Y_JIT_METER=60*$SCALE;
+$POSITION_Y_DL_MEASURE=169*$SCALE;
+$POSITION_Y_UL_MEASURE=169*$SCALE;
+$POSITION_Y_PING_MEASURE=60*$SCALE;
+$POSITION_Y_JIT_MEASURE=60*$SCALE;
+$POSITION_Y_ISP=205*$SCALE;
+$POSITION_X_DL=120*$SCALE;
+$POSITION_X_UL=280*$SCALE;
+$POSITION_X_PING=125*$SCALE;
+$POSITION_X_JIT=275*$SCALE;
 $POSITION_X_ISP=4*$SCALE;
+$SMALL_SEP=8*$SCALE;
+$SEPARATOR_Y=211*$SCALE;
+$SEPARATOR_COLOR=imagecolorallocate($im,192,192,192);
+$POSITION_Y_WATERMARK=223*$SCALE;
 $DL_TEXT="Download";
 $UL_TEXT="Upload";
 $PING_TEXT="Ping";
 $JIT_TEXT="Jitter";
 $MBPS_TEXT="Mbps";
 $MS_TEXT="ms";
-$WATERMARK_TEXT="HTML5 Speedtest";
 
 $id=$_GET["id"];
 include_once('telemetry_settings.php');
@@ -91,6 +115,11 @@ if($db_type=="mysql"){
 	$conn=null;
 }else die();
 
+$dl=format($dl);
+$ul=format($ul);
+$ping=format($ping);
+$jit=format($jit);
+
 $ispinfo=json_decode($ispinfo,true)["processedString"];
 $dash=strpos($ispinfo,"-");
 if(!($dash===FALSE)){
@@ -99,35 +128,35 @@ if(!($dash===FALSE)){
 	if(!($par===FALSE)) $ispinfo=substr($ispinfo,0,$par);
 }else $ispinfo="";
 
-$dlBbox=imageftbbox($FONT_1_SIZE,0,$FONT_1,$DL_TEXT);
-$ulBbox=imageftbbox($FONT_1_SIZE,0,$FONT_1,$UL_TEXT);
-$pingBbox=imageftbbox($FONT_1_SIZE,0,$FONT_1,$PING_TEXT);
-$jitBbox=imageftbbox($FONT_1_SIZE,0,$FONT_1,$JIT_TEXT);
-$dlMeterBbox=imageftbbox($FONT_2_SIZE,0,$FONT_2,$dl);
-$ulMeterBbox=imageftbbox($FONT_2_SIZE,0,$FONT_2,$ul);
-$pingMeterBbox=imageftbbox($FONT_2_SIZE,0,$FONT_2,$ping);
-$jitMeterBbox=imageftbbox($FONT_2_SIZE,0,$FONT_2,$jit);
-$mbpsBbox=imageftbbox($FONT_3_SIZE,0,$FONT_3,$MBPS_TEXT);
-$msBbox=imageftbbox($FONT_3_SIZE,0,$FONT_3,$MS_TEXT);
+$dlBbox=imageftbbox($FONT_LABEL_SIZE_BIG,0,$FONT_LABEL,$DL_TEXT);
+$ulBbox=imageftbbox($FONT_LABEL_SIZE_BIG,0,$FONT_LABEL,$UL_TEXT);
+$pingBbox=imageftbbox($FONT_LABEL_SIZE,0,$FONT_LABEL,$PING_TEXT);
+$jitBbox=imageftbbox($FONT_LABEL_SIZE,0,$FONT_LABEL,$JIT_TEXT);
+$dlMeterBbox=imageftbbox($FONT_METER_SIZE_BIG,0,$FONT_METER,$dl);
+$ulMeterBbox=imageftbbox($FONT_METER_SIZE_BIG,0,$FONT_METER,$ul);
+$pingMeterBbox=imageftbbox($FONT_METER_SIZE,0,$FONT_METER,$ping);
+$jitMeterBbox=imageftbbox($FONT_METER_SIZE,0,$FONT_METER,$jit);
+$mbpsBbox=imageftbbox($FONT_MEASURE_SIZE_BIG,0,$FONT_MEASURE,$MBPS_TEXT);
+$msBbox=imageftbbox($FONT_MEASURE_SIZE,0,$FONT_MEASURE,$MS_TEXT);
 $watermarkBbox=imageftbbox($FONT_WATERMARK_SIZE,0,$FONT_WATERMARK,$WATERMARK_TEXT);
 $POSITION_X_WATERMARK=$WIDTH-$watermarkBbox[4]-4*$SCALE;
 
 imagefilledrectangle($im, 0, 0, $WIDTH, $HEIGHT, $BACKGROUND_COLOR);
-imagefttext($im,$FONT_1_SIZE,0,$POSITION_X_DL-$dlBbox[4]/2,$POSITION_Y_1,$TEXT_COLOR_1,$FONT_1,$DL_TEXT);
-imagefttext($im,$FONT_1_SIZE,0,$POSITION_X_UL-$ulBbox[4]/2,$POSITION_Y_1,$TEXT_COLOR_1,$FONT_1,$UL_TEXT);
-imagefttext($im,$FONT_1_SIZE,0,$POSITION_X_PING-$pingBbox[4]/2,$POSITION_Y_1,$TEXT_COLOR_1,$FONT_1,$PING_TEXT);
-imagefttext($im,$FONT_1_SIZE,0,$POSITION_X_JIT-$jitBbox[4]/2,$POSITION_Y_1,$TEXT_COLOR_1,$FONT_1,$JIT_TEXT);
-imagefttext($im,$FONT_2_SIZE,0,$POSITION_X_DL-$dlMeterBbox[4]/2,$POSITION_Y_2,$TEXT_COLOR_2,$FONT_2,$dl);
-imagefttext($im,$FONT_2_SIZE,0,$POSITION_X_UL-$ulMeterBbox[4]/2,$POSITION_Y_2,$TEXT_COLOR_2,$FONT_2,$ul);
-imagefttext($im,$FONT_2_SIZE,0,$POSITION_X_PING-$pingMeterBbox[4]/2,$POSITION_Y_2,$TEXT_COLOR_2,$FONT_2,$ping);
-imagefttext($im,$FONT_2_SIZE,0,$POSITION_X_JIT-$jitMeterBbox[4]/2,$POSITION_Y_2,$TEXT_COLOR_2,$FONT_2,$jit);
-imagefttext($im,$FONT_3_SIZE,0,$POSITION_X_DL-$mbpsBbox[4]/2,$POSITION_Y_3,$TEXT_COLOR_3,$FONT_3,$MBPS_TEXT);
-imagefttext($im,$FONT_3_SIZE,0,$POSITION_X_UL-$mbpsBbox[4]/2,$POSITION_Y_3,$TEXT_COLOR_3,$FONT_3,$MBPS_TEXT);
-imagefttext($im,$FONT_3_SIZE,0,$POSITION_X_PING-$msBbox[4]/2,$POSITION_Y_3,$TEXT_COLOR_3,$FONT_3,$MS_TEXT);
-imagefttext($im,$FONT_3_SIZE,0,$POSITION_X_JIT-$msBbox[4]/2,$POSITION_Y_3,$TEXT_COLOR_3,$FONT_3,$MS_TEXT);
-imagefttext($im,$FONT_4_SIZE,0,$POSITION_X_ISP,$POSITION_Y_4,$TEXT_COLOR_4,$FONT_4,$ispinfo);
+imagefttext($im,$FONT_LABEL_SIZE_BIG,0,$POSITION_X_DL-$dlBbox[4]/2,$POSITION_Y_DL_LABEL,$TEXT_COLOR_LABEL,$FONT_LABEL,$DL_TEXT);
+imagefttext($im,$FONT_LABEL_SIZE_BIG,0,$POSITION_X_UL-$ulBbox[4]/2,$POSITION_Y_UL_LABEL,$TEXT_COLOR_LABEL,$FONT_LABEL,$UL_TEXT);
+imagefttext($im,$FONT_LABEL_SIZE,0,$POSITION_X_PING-$pingBbox[4]/2,$POSITION_Y_PING_LABEL,$TEXT_COLOR_LABEL,$FONT_LABEL,$PING_TEXT);
+imagefttext($im,$FONT_LABEL_SIZE,0,$POSITION_X_JIT-$jitBbox[4]/2,$POSITION_Y_JIT_LABEL,$TEXT_COLOR_LABEL,$FONT_LABEL,$JIT_TEXT);
+imagefttext($im,$FONT_METER_SIZE_BIG,0,$POSITION_X_DL-$dlMeterBbox[4]/2,$POSITION_Y_DL_METER,$TEXT_COLOR_DL_METER,$FONT_METER,$dl);
+imagefttext($im,$FONT_METER_SIZE_BIG,0,$POSITION_X_UL-$ulMeterBbox[4]/2,$POSITION_Y_UL_METER,$TEXT_COLOR_UL_METER,$FONT_METER,$ul);
+imagefttext($im,$FONT_METER_SIZE,0,$POSITION_X_PING-$pingMeterBbox[4]/2-$msBbox[4]/2-$SMALL_SEP/2,$POSITION_Y_PING_METER,$TEXT_COLOR_PING_METER,$FONT_METER,$ping);
+imagefttext($im,$FONT_METER_SIZE,0,$POSITION_X_JIT-$jitMeterBbox[4]/2-$msBbox[4]/2-$SMALL_SEP/2,$POSITION_Y_JIT_METER,$TEXT_COLOR_JIT_METER,$FONT_METER,$jit);
+imagefttext($im,$FONT_MEASURE_SIZE_BIG,0,$POSITION_X_DL-$mbpsBbox[4]/2,$POSITION_Y_DL_MEASURE,$TEXT_COLOR_MEASURE,$FONT_MEASURE,$MBPS_TEXT);
+imagefttext($im,$FONT_MEASURE_SIZE_BIG,0,$POSITION_X_UL-$mbpsBbox[4]/2,$POSITION_Y_UL_MEASURE,$TEXT_COLOR_MEASURE,$FONT_MEASURE,$MBPS_TEXT);
+imagefttext($im,$FONT_MEASURE_SIZE,0,$POSITION_X_PING+$pingMeterBbox[4]/2+$SMALL_SEP/2-$msBbox[4]/2,$POSITION_Y_PING_MEASURE,$TEXT_COLOR_MEASURE,$FONT_MEASURE,$MS_TEXT);
+imagefttext($im,$FONT_MEASURE_SIZE,0,$POSITION_X_JIT+$jitMeterBbox[4]/2+$SMALL_SEP/2-$msBbox[4]/2,$POSITION_Y_JIT_MEASURE,$TEXT_COLOR_MEASURE,$FONT_MEASURE,$MS_TEXT);
+imagefttext($im,$FONT_ISP_SIZE,0,$POSITION_X_ISP,$POSITION_Y_ISP,$TEXT_COLOR_ISP,$FONT_ISP,$ispinfo);
 imagefttext($im,$FONT_WATERMARK_SIZE,0,$POSITION_X_WATERMARK,$POSITION_Y_WATERMARK,$TEXT_COLOR_WATERMARK,$FONT_WATERMARK,$WATERMARK_TEXT);
-
+imagefilledrectangle($im, 0, $SEPARATOR_Y, $WIDTH, $SEPARATOR_Y, $SEPARATOR_COLOR);
 header('Content-Type: image/png');
 imagepng($im);
 imagedestroy($im);

From 19c19ac0888a94cf2efb1a2004ae7d1b9e28d5ae Mon Sep 17 00:00:00 2001
From: dosse91 <dosse91@paranoici.org>
Date: Tue, 24 Sep 2019 14:11:57 +0200
Subject: [PATCH 2/2] Updated examples for better consistency

---
 example-multipleServers-full.html | 10 +++++++---
 example-singleServer-full.html    | 10 +++++++---
 example-singleServer-gauges.html  |  6 +++---
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/example-multipleServers-full.html b/example-multipleServers-full.html
index 345cd8a..f81b886 100644
--- a/example-multipleServers-full.html
+++ b/example-multipleServers-full.html
@@ -59,7 +59,7 @@ function initServers(){
 
 var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
 var dlColor="#6060AA",
-	ulColor="#309030";
+	ulColor="#616161";
 var progColor=meterBk;
 
 //CODE FOR GAUGES
@@ -384,12 +384,12 @@ function initUI(){
 		<div class="testGroup">
             <div class="testArea2">
 				<div class="testName">Ping</div>
-				<div id="pingText" class="meterText"></div>
+				<div id="pingText" class="meterText" style="color:#AA6060"></div>
 				<div class="unit">ms</div>
 			</div>
 			<div class="testArea2">
 				<div class="testName">Jitter</div>
-				<div id="jitText" class="meterText"></div>
+				<div id="jitText" class="meterText" style="color:#AA6060"></div>
 				<div class="unit">ms</div>
 			</div>
 		</div>
@@ -445,6 +445,10 @@ function initUI(){
         </ul>
         No personal information is disclosed to third parties.
     </p>
+    <h4>Your consent</h4>
+    <p>
+        By starting the test, you consent to the terms of this privacy policy.
+    </p>
     <h4>Data removal</h4>
     <p>
         If you want to have your information deleted, you need to provide either the ID of the test or your IP address. This is the only way to identify your data, without this information we won't be able to comply with your request.<br/><br/>
diff --git a/example-singleServer-full.html b/example-singleServer-full.html
index ca4fc46..cc4f42b 100644
--- a/example-singleServer-full.html
+++ b/example-singleServer-full.html
@@ -13,7 +13,7 @@ s.setParameter("telemetry_level","basic"); //enable telemetry
 
 var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
 var dlColor="#6060AA",
-	ulColor="#309030";
+	ulColor="#616161";
 var progColor=meterBk;
 
 //CODE FOR GAUGES
@@ -277,12 +277,12 @@ function initUI(){
 		<div class="testGroup">
 			<div class="testArea2">
 				<div class="testName">Ping</div>
-				<div id="pingText" class="meterText"></div>
+				<div id="pingText" class="meterText" style="color:#AA6060"></div>
 				<div class="unit">ms</div>
 			</div>
 			<div class="testArea2">
 				<div class="testName">Jitter</div>
-				<div id="jitText" class="meterText"></div>
+				<div id="jitText" class="meterText" style="color:#AA6060"></div>
 				<div class="unit">ms</div>
 			</div>
 		</div>
@@ -338,6 +338,10 @@ function initUI(){
         </ul>
         No personal information is disclosed to third parties.
     </p>
+    <h4>Your consent</h4>
+    <p>
+        By starting the test, you consent to the terms of this privacy policy.
+    </p>
     <h4>Data removal</h4>
     <p>
         If you want to have your information deleted, you need to provide either the ID of the test or your IP address. This is the only way to identify your data, without this information we won't be able to comply with your request.<br/><br/>
diff --git a/example-singleServer-gauges.html b/example-singleServer-gauges.html
index 4f3313e..623feec 100644
--- a/example-singleServer-gauges.html
+++ b/example-singleServer-gauges.html
@@ -12,7 +12,7 @@ var s=new Speedtest(); //create speedtest object
 
 var meterBk=/Trident.*rv:(\d+\.\d+)/i.test(navigator.userAgent)?"#EAEAEA":"#80808040";
 var dlColor="#6060AA",
-	ulColor="#309030";
+	ulColor="#616161";
 var progColor=meterBk;
 
 //CODE FOR GAUGES
@@ -228,12 +228,12 @@ function initUI(){
         <div class="testGroup">
 			<div class="testArea2">
 				<div class="testName">Ping</div>
-				<div id="pingText" class="meterText"></div>
+				<div id="pingText" class="meterText" style="color:#AA6060"></div>
 				<div class="unit">ms</div>
 			</div>
 			<div class="testArea2">
 				<div class="testName">Jitter</div>
-				<div id="jitText" class="meterText"></div>
+				<div id="jitText" class="meterText" style="color:#AA6060"></div>
 				<div class="unit">ms</div>
 			</div>
 		</div>