Counter

I got nostalgic and thought I would create a script to generate a SVG hit counter that looked like the old hit counters that were common back in the 90's.

The HTML creates a placeholder for the jQuery to place the counter.

<p id="counter"></p>

The jQuery code is a simple AJAX call to load the counter. It could be embedded directly into the page using <?php include_once('counter.php'); ?> instead.

<script>

$.get("/projects/counter/counter.php?digits=6&val=246", function(data) {
$('#counter').html(data);
});

</script>

The PHP code generates the SVG and ticks a variable at the top of itself to track the hits.  If someone really wanted to they could make it count unique impressions by using a cookie to track visitors and store the values in a database and keep track of unique impressions on each page where the counter appears.  Perhapss, one day I'll get around to making a nicer class with a fancier data handler.

<?php $val = 53; ?>
<?php

$val++;
$source = file_get_contents('counter.php');

$source = preg_replace('/<\?php \$val = ([\d]+); \?>/i', '<?php $val = '.$val.'; ?>', $source);

if ($fp=fopen('counter.php', 'w')) {
 fputs($fp, $source);
 fclose($fp);
}

// header("Content-Type: image/svg+xml");

$digits = !empty($_REQUEST['digits']) ? $_REQUEST['digits'] : 6;
// $val = !empty($_REQUEST['val']) ? $_REQUEST['val'] : 0;
if (strlen($val)>$digits) $digits = strlen($val);
$val = str_pad($val, $digits, 0, STR_PAD_LEFT);

$border = 3;

$x1 = $border;
$y1 = $border;
$w1 = 32;
$h1 = $w1 * 1.4;

$width = ($digits*$w1)+(2*$border);
$height = $h1+(2*$border);

?>

<style>

@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');

</style>
<svg width="<?php echo $width; ?>px" height="<?php echo $height; ?>px" viewBox="0 0 <?php echo $width; ?> <?php echo $height; ?>" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <defs id="defs2">
  <linearGradient id="linearGradient410">
   <stop style="stop-color:#000000;stop-opacity:1;" offset="0" id="stop406" />
   <stop style="stop-color:#4b4b4b;stop-opacity:1;" offset="0.5" id="stop1055" />
   <stop style="stop-color:#000000;stop-opacity:1;" offset="1" id="stop408" />
  </linearGradient>
  <linearGradient xlink:href="#linearGradient410" id="linearGradient412" x1="100.46775" y1="119.36781" x2="100.46646" y2="121.88057" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.8761717,0,0,1.8761717,-186.6239,-223.63978)" />
  <linearGradient xlink:href="#linearGradient410" id="linearGradient3082" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.8761717,0,0,1.8761717,-186.6239,-223.63978)" x1="195.49971" y1="120.8285" x2="195.60861" y2="144.79439" />
 </defs>
<?php

echo "\t\t<rect style=\"fill:#cccccc;fill-opacity:1;stroke-width:0\" width=\"".(($digits*$w1)+(2*$border))."px\" height=\"".($h1+(2*$border))."px\" x=\"0px\" y=\"0px\" />\r\n";

for ( $i=0;$i<$digits;$i++ ) {
 $num = substr($val, $i, 1);
 $offsetX = $x1 + ($w1 * $i);
 $offsetY = $y1;
 $textX = $offsetX + ($w1 * 0.2);
 $textY = $offsetY + ($h1 * 0.8);
 $textH = $h1;
 echo "\t\t<rect style=\"fill:url(#linearGradient3082);fill-opacity:1;stroke-width:1;stroke-color:#cccccc;\" width=\"$w1\" height=\"$h1\" x=\"{$offsetX}px\" y=\"{$offsetY}px\" /><text xml:space=\"preserve\" style=\"font-optical-sizing: auto;font-family:'Kode Mono',monospace;font-size:{$textH}px;fill:#ffffff;fill-opacity:1;stroke-width:0\" x=\"{$textX}px\" y=\"{$textY}px\">$num</text>\r\n";
}

?>
</svg>