Emoji Borders and Backgrounds Image Text PHP SVG Tutorial

☞

Emoji Borders and Backgrounds Image Text PHP SVG Tutorial

To add to yesterday’s Emoji Borders and Backgrounds Image Text Parent Tutorial today it is “PHP tool” work catching up so as to say …

• emoji border … now with content control via comma separated list of emoji HTML decimal Entity(s) … argumented to PHP tool
• emoji background … now with content control via comma separated list of emoji HTML decimal Entity(s) … argumented to PHP tool
• centralized text (in foreground) … now with wording control via HTML span contenteditable=true elements … not yet argumented to PHP tool
  <?php
  

if (isset($_GET['text'])) {

$txt=str_replace("\n","<br>", str_replace('&nbsp;',' ',str_replace('+', ' ', urldecode($_GET['text']))));

$minus30=($w / 2.0) - strlen(explode('<br>', $txt)[0]) * 3.1;

$top30=($h / 2.0) + 25 - (sizeof(explode('<br>', $txt)) * 8);

$lines=explode('<br>', $txt);

for ($il=0; $il<sizeof($lines); $il++) {

$textcontent.='<text x="' . $minus30 . '" y="' . $top30 . '">' . $lines[$il] . '</text>';

$top30+=15;

}

} else if (isset($_POST['text'])) {

$txt=str_replace("\n","<br>", str_replace('&nbsp;',' ',str_replace('+', ' ', urldecode($_POST['text']))));

$minus30=($w / 2.0) - strlen(explode('<br>', $txt)[0]) * 3.1;

$top30=($h / 2.0) + 25 - (sizeof(explode('<br>', $txt)) * 8);

$lines=explode('<br>', $txt);

for ($il=0; $il<sizeof($lines); $il++) {

$textcontent.='<text x="' . $minus30 . '" y="' . $top30 . '">' . $lines[$il] . '</text>';

$top30+=15;

}

}


  ?>
  
• centralized image (in foreground) … including some width and height control … argumented to PHP tool

… via a new “text” argument arranged for the PHP and in readiness for some more aesthetic improvements in the display side of things with our emoji borders and backgrounds changed⚪inline_svg.php (latest) versus inline_svg.php--GETME (this)inline_svg.php--GETME (this) versus inline_svg.php-GETME (previous ... default)inline_svg.php--GETME (this) versus inline_svg.php_GETMEinline_svg.php (latest) versus inline_svg.php_GETME (oldest)underlying inline_svgphp PHP tool liverun web application (or in iframe).

Previous relevant Emoji Borders and Backgrounds Image Text Parent Tutorial is shown below.

Emoji Borders and Backgrounds Image Text Parent Tutorial

Today’s work continues on from yesterday’s Emoji Borders and Backgrounds for Image Tutorial combining both …

• inline_svgphp underlying PHP liverun (or in iframe) … modelled under …
• today’s⚪emoji_border_background.html (latest) versus emoji_border_background.html--GETME (this)emoji_border_background.html--GETME (this) versus emoji_border_background.html-GETME (previous ... default)emoji_border_background.html--GETME (this) versus emoji_border_background.html_GETMEemoji_border_background.html (latest) versus emoji_border_background.html_GETME (oldest)changed emoji_border_backgroundhtml HTML Parent

… partnership during testing. Our final aim is to make the “underlying PHP” a proper standalone tool, but “that’s a ways off”, as they say. Why this extra level of complication? It’s easier to …

• see
• test
• debug (via web browser web inspectors)

… the functionalities that would be “cool” at the HTML/Javascript/CSS parent side, and then work out how to implement similar functionality, as possible, in SVG, and if possible, we should be able to pass arguments over to the “PHP tool” to eventually code it to be standalone to help other “parenting arrangements”.

And so, today, we “get functional” the combination of parental control through to PHP SVG child display …

Optionally enter an image URL ( as needs be, suffix by &width=[preferredWidth]&height=[preferredHeight] and/or &background=y ) and/or # prefixed comma separated list of emoji HTML decimal Entity(s) ( eg. #127462,127465 ) ? Cancel if it is wording you want to change to the left there.

• emoji border … now with content control via comma separated list of emoji HTML decimal Entity(s) … argumented to PHP tool
• emoji background … now with content control via comma separated list of emoji HTML decimal Entity(s) … argumented to PHP tool
• centralized text (in foreground) … now with wording control via HTML span contenteditable=true elements … not yet argumented to PHP tool
• centralized image (in foreground) … including some width and height control … argumented to PHP tool



function ask(sois) {

var huhi=prompt('Optionally enter an image URL ( as needs be, suffix by &width=[preferredWidth]&height=[preferredHeight] and/or &background=y ) and/or # prefixed comma separated list of emoji HTML decimal Entity(s) ( eg. #127462,127465 ) ? Cancel if it is wording you want to change to the left there.','');

if (huhi == null) { huhi=''; }

if (huhi.trim() != '') {

if (document.URL.indexOf('rjmprogramming.com.au') == -1 && sois.title.indexOf('rjmprogramming.com.au') != -1) {

sois.title=document.URL.substring(0,8) + document.URL.substring(8).split('/')[0] + sois.title.split('rjmprogramming.com.au')[1];

}

if (huhi.indexOf('#') != -1) {

var huhis=huhi.split('#')[1];

for (var ihuhis=0; ihuhis<huhis.length; ihuhis++) {

if (eval('' + ihuhis) < eval('' + huhis.length)) {

if (huhis.substring(ihuhis).substring(0,1).replace('0','').replace('1','').replace('2','').replace('3','').replace('4','').replace('5','').replace('6','').replace('7','').replace('8','').replace('9','').replace(',','') != '') {

huhi=huhi.replace('#' + huhis.split(huhis.substring(ihuhis).substring(0,1))[0], '');

huhis=huhis.split(huhis.substring(ihuhis).substring(0,1))[0];

}

}

}

if (huhis == '') {

if (sois.title.indexOf('?insvg=') != -1) {

sois.title=sois.title.replace('?insvg=' + sois.title.split('?insvg=')[1].split('&')[0].split('#')[0],'');

} else if (sois.title.indexOf('&insvg=') != -1) {

sois.title=sois.title.replace('&insvg=' + sois.title.split('&insvg=')[1].split('&')[0].split('#')[0],'');

}

} else if (sois.title.indexOf('?insvg=') != -1) {

sois.title=sois.title.replace('?insvg=' + sois.title.split('?insvg=')[1].split('&')[0].split('#')[0],'?insvg=' + encodeURIComponent(huhis));

} else if (sois.title.indexOf('&insvg=') != -1) {

sois.title=sois.title.replace('&insvg=' + sois.title.split('&insvg=')[1].split('&')[0].split('#')[0],'&insvg=' + encodeURIComponent(huhis));

} else if (sois.title.indexOf('?') != -1) {

sois.title=sois.title.replace('?','?insvg=' + encodeURIComponent(huhis) + '&');

} else {

sois.title=sois.title.split('#')[0] + '?insvg=' + encodeURIComponent(huhis);

}

}

if (huhi.split('&')[0].split('#')[0].trim() != '') {

if (sois.title.indexOf('?image=') != -1) {

sois.title=sois.title.replace('?image=' + sois.title.split('?image=')[1].split('&')[0].split('#')[0],'');

} else if (sois.title.indexOf('&image=') != -1) {

sois.title=sois.title.replace('&image=' + sois.title.split('&image=')[1].split('&')[0].split('#')[0],'');

}

sois.title+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');

} else if (sois.title.indexOf('?image=') != -1) {

sois.title=sois.title.replace('?image=' + sois.title.split('?image=')[1].split('&')[0].split('#')[0],'');

} else if (sois.title.indexOf('&image=') != -1) {

sois.title=sois.title.replace('&image=' + sois.title.split('&image=')[1].split('&')[0].split('#')[0],'');

}

document.getElementById(sois.id.replace('span','if')).src=sois.title; //+='&image=' + encodeURIComponent(huhi.split('&')[0]) + huhi.replace(huhi.split('&')[0],'');

}

}




function snapshot(sio) {

lastih=sio.innerHTML;

lastio=-1;

for (var iuh=0; iuh<cds.length; iuh++) {

if (lastih == cds[iuh]) { lastio=iuh; } else if (sio.innerHTML.indexOf(' of ') != -1) { if (lastih.split(' of ')[0] == cds[iuh].split(' of ')[0]) { lastio=iuh; } }

}

}




function newwords(sio) {

if (lastih != sio.innerHTML && lastio >= 0) {

cds[lastio]=sio.innerHTML.replace(/\ \;/g,' ').replace(/\<br\>/g,String.fromCharCode(10));

var documentURL=document.URL.split('#')[0].split('?arr' + lastio + '=')[0].split('&arr' + lastio + '=')[0];

location.href=(documentURL + '&arr' + lastio + '=' + encodeURIComponent(cds[lastio])).replace('.html&','.html?').replace('.htm&','.htm?'); // fancystuff();

}

}



Previous relevant Emoji Borders and Backgrounds Context Tutorial is shown below.

Emoji Borders and Backgrounds Context Tutorial

It’s all fine and good creating the Emoji Borders and Backgrounds of yesterday’s Emoji Borders and Backgrounds Primer Tutorial, but it’s the context of their use that we are starting to take an interest in with today’s …

1. take yesterday’s table as a starting bit to our …
2. “making use of” “proof of concept” emoji_border_backgroundhtml liverun link for you to contextualize and make use of those table’s iframe contents from yesterday …
   

… as we figure out, perhaps, some better “tool like generics” here. We’ll see (we hope)!

But, so far, how would we assess the approach, here? Well, what we had to do today reminded us a lot of what we do here, often, at this blog, when we talk about “overlay” webpage design approaches. CSS position:absolute and opacity and Javascript [element].getBoundingClientRect() all made guest appearances!

Previous relevant Emoji Borders and Backgrounds Primer Tutorial is shown below.

Emoji Borders and Backgrounds Primer Tutorial

Time for a new project into the new year. It’s an “old chestnut” project, for us. Being able to handle …

• borders made up of emoji images (in the form of “image/svg+xml” mimetype data)
• backgrounds made up of emoji images (in the form of “image/svg+xml” mimetype data)

… via “proof of concept” (at least for our “Primer” tutorial start) inline_svgphp‘s singleviolin emoji or …

Cute, huh?!

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.