Last Updated or created 2023-05-10

UPDATE FROM: https://www.henriaanstoot.nl/2023/05/08/wss-websocket-to-mqtt-updating-website/

Mqtt controlled

for f in 1 2 3 4 5 6 7 0 ; do mosquitto_pub -h mqttserver -t web/mapviewer -m $f ;sleep 2 ;done

Below can be used in yesterdays script.
And can be called as image source.

<img src="draw.php?direction=0">

CODE

<?php

function imagelinethick($image, $x1, $y1, $x2, $y2, $color, $thick = 3)
{
    /* this way it works well only for orthogonal lines
    imagesetthickness($image, $thick);
    return imageline($image, $x1, $y1, $x2, $y2, $color);
    */
    if ($thick == 1) {
        return imageline($image, $x1, $y1, $x2, $y2, $color);
    }
    $t = $thick / 2 - 0.5;
    if ($x1 == $x2 || $y1 == $y2) {
        return imagefilledrectangle($image, round(min($x1, $x2) - $t), round(min($y1, $y2) - $t), round(max($x1, $x2) + $t), round(max($y1, $y2) + $t), $color);
    }
    $k = ($y2 - $y1) / ($x2 - $x1); //y = kx + q
    $a = $t / sqrt(1 + pow($k, 2));
    $points = array(
        round($x1 - (1+$k)*$a), round($y1 + (1-$k)*$a),
        round($x1 - (1-$k)*$a), round($y1 - (1+$k)*$a),
        round($x2 + (1+$k)*$a), round($y2 - (1-$k)*$a),
        round($x2 + (1-$k)*$a), round($y2 + (1+$k)*$a),
    );
    imagefilledpolygon($image, $points, 4, $color);
    return imagepolygon($image, $points, 4, $color);
}
header("Content-Type: image/png");
$im = imagecreate(640, 640);
$background_color = imagecolorallocate($im, 0, 0, 0);
$text_color = imagecolorallocate($im, 255, 255, 255);
$text_color1 = imagecolorallocate($im, 128, 128, 128);

$max=640;
$depth1=80;
$depth2=160;
$depth3=190;
$depthcolor1 = imagecolorallocate($im, 255, 255, 255);
$depthcolor2 = imagecolorallocate($im, 128, 128, 128);
$depthcolor3 = imagecolorallocate($im, 32, 32, 32);

$direction = $_GET["direction"];


// draw always
imagelinethick($im,0,0,$depth1,$depth1,$depthcolor1);
imagelinethick($im,$max,0,$max-$depth1,$depth1,$depthcolor1);
imagelinethick($im,0,$max,$depth1,$max-$depth1,$depthcolor1);
imagelinethick($im,$max,$max,$max-$depth1,$max-$depth1,$depthcolor1);

if ( $direction == "1" ) {
imagelinethick($im,$max-$depth1,$depth1,$max-$depth2,$depth2,$depthcolor2);
imagelinethick($im,$max-$depth1,$max-$depth1,$max-$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$max-$depth2,$depth2,$max-$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth1,$max-$depth2,$max-$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth1,$depth2,$max-$depth2,$depth2,$depthcolor2);
// front
imagelinethick($im,$depth1,$depth1,$depth1,$max-$depth1,$depthcolor1);
}

if ( $direction == "4" ) {
imagelinethick($im,$depth1,$max-$depth1,$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth1,$depth1,$depth2,$depth2,$depthcolor2);
imagelinethick($im,$depth2,$depth2,$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth2,$max-$depth2,$max-$depth1,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth2,$depth2,$max-$depth1,$depth2,$depthcolor2);
// front
imagelinethick($im,$max-$depth1,$depth1,$max-$depth1,$max-$depth1,$depthcolor1);
}

if ( $direction == "5" ) {
imagelinethick($im,$depth1,$depth2,$max-$depth1,$depth2,$depthcolor2);
imagelinethick($im,$depth1,$max-$depth2,$max-$depth1,$max-$depth2,$depthcolor2);
// front
imagelinethick($im,$depth1,$depth1,$depth1,$max-$depth1,$depthcolor1);
imagelinethick($im,$max-$depth1,$depth1,$max-$depth1,$max-$depth1,$depthcolor1);
}

if ( $direction == "2" ) {
imagelinethick($im,$depth1,$depth1,$depth2,$depth2,$depthcolor2);
imagelinethick($im,$max-$depth1,$depth1,$max-$depth2,$depth2,$depthcolor2);
imagelinethick($im,$max-$depth1,$max-$depth1,$max-$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth1,$max-$depth1,$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth2,$depth2,$depth3,$depth3,$depthcolor3);
imagelinethick($im,$max-$depth2,$depth2,$max-$depth3,$depth3,$depthcolor3);
imagelinethick($im,$depth2,$max-$depth2,$depth3,$max-$depth3,$depthcolor3);
imagelinethick($im,$max-$depth2,$max-$depth2,$max-$depth3,$max-$depth3,$depthcolor3);
}

if ( $direction == "3" ) {
imagelinethick($im,$max-$depth1,$depth1,$max-$depth2,$depth2,$depthcolor2);
imagelinethick($im,$max-$depth1,$max-$depth1,$max-$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth2,$depth2,$depth1,$depth2,$depthcolor2);
imagelinethick($im,$depth2,$max-$depth2,$depth1,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth2,$depth2,$depth2,$max-$depth2,$depthcolor2);

//depth3
imagelinethick($im,$depth2,$depth2,$depth3,$depth3,$depthcolor3);
imagelinethick($im,$max-$depth2,$depth2,$max-$depth3,$depth3,$depthcolor3);
imagelinethick($im,$depth2,$max-$depth2,$depth3,$max-$depth3,$depthcolor3);
imagelinethick($im,$max-$depth2,$max-$depth2,$max-$depth3,$max-$depth3,$depthcolor3);
//front
imagelinethick($im,$depth1,$depth1,$depth1,$max-$depth1,$depthcolor1);
}

if ( $direction == "6" ) {
imagelinethick($im,$depth1,$depth1,$depth2,$depth2,$depthcolor2);
imagelinethick($im,$depth1,$max-$depth1,$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$max-$depth1,$depth2,$max-$depth2,$depth2,$depthcolor2);
imagelinethick($im,$max-$depth1,$max-$depth2,$max-$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$max-$depth2,$max-$depth2,$max-$depth2,$depth2,$depthcolor2);

//depth3
imagelinethick($im,$depth2,$depth2,$depth3,$depth3,$depthcolor3);
imagelinethick($im,$max-$depth2,$depth2,$max-$depth3,$depth3,$depthcolor3);
imagelinethick($im,$depth2,$max-$depth2,$depth3,$max-$depth3,$depthcolor3);
imagelinethick($im,$max-$depth2,$max-$depth2,$max-$depth3,$max-$depth3,$depthcolor3);
//front
imagelinethick($im,$max-$depth1,$depth1,$max-$depth1,$max-$depth1,$depthcolor1);
}

if ( $direction == "7" ) {
imagelinethick($im,$depth1,$depth2,$depth2,$depth2,$depthcolor2);
imagelinethick($im,$depth1,$max-$depth2,$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$depth2,$max-$depth2,$depth2,$depth2,$depthcolor2);
imagelinethick($im,$max-$depth1,$depth2,$max-$depth2,$depth2,$depthcolor2);
imagelinethick($im,$max-$depth1,$max-$depth2,$max-$depth2,$max-$depth2,$depthcolor2);
imagelinethick($im,$max-$depth2,$max-$depth2,$max-$depth2,$depth2,$depthcolor2);
//depth3
imagelinethick($im,$depth2,$depth2,$depth3,$depth3,$depthcolor3);
imagelinethick($im,$max-$depth2,$depth2,$max-$depth3,$depth3,$depthcolor3);
imagelinethick($im,$depth2,$max-$depth2,$depth3,$max-$depth3,$depthcolor3);
imagelinethick($im,$max-$depth2,$max-$depth2,$max-$depth3,$max-$depth3,$depthcolor3);
//front
imagelinethick($im,$max-$depth1,$depth1,$max-$depth1,$max-$depth1,$depthcolor1);
imagelinethick($im,$depth1,$depth1,$depth1,$max-$depth1,$depthcolor1);
}

if ( $direction == "0" ) {
imagelinethick($im,$depth1,$depth1,$max-$depth1,$depth1,$depthcolor1);
imagelinethick($im,$max-$depth1,$depth1,$max-$depth1,$max-$depth1,$depthcolor1);
imagelinethick($im,$max-$depth1,$max-$depth1,$depth1,$max-$depth1,$depthcolor1);
imagelinethick($im,$depth1,$max-$depth1,$depth1,$depth1,$depthcolor1);
}

imagepng($im);
imagedestroy($im);
?>