SVG-oriented Services - part #3

Reminder

I've given you illustrations of a pie chart, an analog watch, a column chart, a radar chart, a burndown chart, I've shown you that there are documented (and FREELY accessible) services, I've shown you how to create an n-branched star, and how to create an n-pointed flower, how to create a sign with text centered and rotated, potentially at a certain angle, how to create a regular polygon, with or without canvas, I've shown you how to combine 2 services (polygon and arrow) to create an SVG that combines the two services. Not bad at all.

Now let's add a service to create a circle (illustrated in this article) and how to create a rectangle.

This won't take long!

Circle

https://trql.fm/test.circle.service.php?svg-width=1024&svg-height=1024&fill=orange&stroke=yellow&stroke-width=25        

Try it for yourself: https://trql.fm/test.circle.service.php?svg-width=1024&svg-height=1024&fill=orange&stroke=yellow&stroke-width=25

And what's the code of test.circle.service.php?

<?php
use \trql\vaesoli\Vaesoli   as v;
if ( ! defined( 'VAESOLI_CLASS_VERSION' ) )
    require_once( '/home/vaesoli/snippet-center/trql.vaesoli.class.php' );

$url        = "https://www.trql.fm/vaesoli!/?svg-circle";
$params[]   = 'svg-width';
$params[]   = 'svg-height';
$params[]   = 'x';
$params[]   = 'y';
$params[]   = 'radius';
$params[]   = 'fill';
$params[]   = 'stroke';
$params[]   = 'stroke-width';
foreach( $params as $param )
{
    if ( isset( $_GET[ $param ] ) )
        $url .= "&{$param}=" . urlencode( $_GET[ $param ] );
}   /* foreach( $params as $param ) */
$url .= "&id=mySVG";
$svgFile = str_replace( array( 'test.','.service' ),'',basename( FILE,'.php' ) . '.svg' );
$json   = v::HTTP_GetURL( $url );
if ( $result = json_decode( $json ) )
{
    echo $result->payload->svg;
    echo "<div class=\"call\" style=\"width:512px;\">\n";
    echo "<p style=\"text-align:center;\"><a href=\"{$url}\" target=\"_blank\">{$url}</a></p>\n";
    echo "</div> <!-- .call -->\n";
    echo "<div style=\"width:512px;\">\n";
        echo "<p style=\"text-align:center;\"><a href=\"data:image/svg+xml,\" download=\"{$svgFile}\" onclick=\"return copy( this,'mySVG' );\">Download</a></p>\n";
    echo "</div>";
    echo "<div>\n";
        echo "<h3>Parameters</h3>\n";
        foreach( $params as $param )
        {
            echo "<p>?{$param}=&lt;...&gt;</p>\n";
        }
    echo "</div>";
}
else
{
    echo "<p>Invalid result</p>";
}
?>
<script>
    function copy( a,id )
    {
        console.log( a );
        let svg;
        svg = document.getElementById(id).outerHTML;
        svg = svg.replace( /"/g,"'" );
        svg = svg.replace( /#/g,"%23" );
        a.setAttribute( "href","data:image/svg+xml," + svg );
        console.log( a.getAttribute( "href" ) ); 
        return ( true );
    }
</script>        

Rectangle

https://trql.fm/test.rectangle.service.php?svg-width=1024&svg-height=1024        

Conclusion

Tomorrow, we will add to our list of services (1) the ability to create SVG text (2) the ability to create a check-mark and (3) the ability to create a smiley face. And we will have reached 10 SVG services.

No fuss, friends !