Redesigned sharable image

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);