{"id":49252,"date":"2020-06-11T03:01:44","date_gmt":"2020-06-10T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49252"},"modified":"2020-06-10T14:09:18","modified_gmt":"2020-06-10T04:09:18","slug":"canvas-annotations-and-datetime-or-number-or-emoji-sequences-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-annotations-and-datetime-or-number-or-emoji-sequences-tutorial\/","title":{"rendered":"Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial"},"content":{"rendered":"
\"Canvas<\/a>

Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial<\/p><\/div>\n

Yesterday’s Canvas Annotations and Datetime or Number Sequences Tutorial<\/a> was a basis to launch into some Annotation Sequences that can go beyond the 0 to 127 ascii values, into the “Wooooorrrrrlllllddddd of Emoji” and “HTML Entities” and “Unicode Characters”. So far with emoji work we’ve never tried to map “HTML Entity Names” to a “String CodePoint<\/a>“. What do we mean here by “HTML Entity Names”? We mean a classification noting how HTML Entities like …<\/p>\n\n\n\n\n\n
Character<\/th>\nDescription<\/th>\nEntity Number … can have an …<\/th>\nEntity Name<\/b> … sometimes<\/th>\n<\/tr>\n
&<\/td>\nAmpersand<\/td>\n&#38;<\/td>\n&amp<\/b>;<\/td>\n<\/tr>\n
><\/td>\nGreater than<\/td>\n&#62;<\/td>\n&gt<\/b>;<\/td>\n<\/tr>\n
<<\/td>\nLess than<\/td>\n&#60;<\/td>\n&lt<\/b>;<\/td>\n<\/tr>\n<\/table>\n

… just to name some of the really commonly used ones, at least around here. But there are lots of them and we thank the great Freeformatter website for Complete list of HTML entities – FreeFormatter.com<\/a> as a great resource.<\/p>\n

As you might imagine, not every HTML Entity you can think of has a corresponding HTML Entity Name like this, so in our extension of external Javascript logic<\/a> of world.js<\/a> (again used in Annotations part of feedback web application<\/a>) we allow the user to enter the integer of the String CodePoint (the function String.fromCodePoint<\/a>() references (and just quietly you can compose your own composite emoji type by including a decimal place like “127462.127482” for the Australian flag 🇦🇺 as an example)<\/font>) that can be used to display in the Feedback canvas<\/a> your emoji characters.<\/p>\n

The conduit by which we make the HTML Entity Name parts of the new “c” format<\/i> functionality happen is via some new html_entity_name_to_codepoint.php<\/a> which is contacted by our external Javascript via new Ajax<\/a> and FormData<\/a> object logic you can see two new Javascript functions for below …<\/p>\n


\nfunction ajaxEntityIt(inval) {
\n if (inval != '') {
\n ourfdstart=inval;
\n }
\n var lastxinc=eval(eval(x - lastx) \/ eval(-1 + eval(ourfdnumber)));
\n var lastyinc=eval(eval(y - lasty) \/ eval(-1 + eval(ourfdnumber)));
\n if (('' + ourfdstart).trim() != '') {
\n for (var thisij=1; thisij<ourfdnumber; thisij++) {
\n context.font = document.getElementById('myfont').value;
\n storecanvascommands(\"context.font = '\" + document.getElementById('myfont').value + \"';\", false);
\n context.strokeStyle=document.getElementById('mycolour').value;
\n storecanvascommands(\"context.strokeStyle='\" + document.getElementById('mycolour').value + \"';\", false);
\n if (('' + ourfdstart).indexOf('.') != -1) {
\n storecanvascommands(\"context.strokeText(String.fromCodePoint(\" + ('' + ourfdstart).replace(\/\\.\/g,',') + \"),\" + lastx + \",\" + lasty + \");\", false);
\n eval(canvascommands[eval(-1 + canvascommands.length)]);
\n } else {
\n context.strokeText(String.fromCodePoint(eval('' + ourfdstart)),lastx,lasty);
\n storecanvascommands(\"context.strokeText(String.fromCodePoint(\" + ourfdstart + \"),\" + lastx + \",\" + lasty + \");\", false);
\n }
\n lastx+=lastxinc;
\n lasty+=lastyinc;
\n if (('' + ourfdinc).replace('0','') != '') {
\n ourfdstart=eval('' + ourfdstart);
\n ourfdstart+=eval('' + ourfdinc);
\n }
\n }
\n context.font = document.getElementById('myfont').value;
\n storecanvascommands(\"context.font = '\" + document.getElementById('myfont').value + \"';\", false);
\n context.strokeStyle=document.getElementById('mycolour').value;
\n storecanvascommands(\"context.strokeStyle='\" + document.getElementById('mycolour').value + \"';\", false);
\n if (('' + ourfdstart).indexOf('.') != -1) {
\n storecanvascommands(\"context.strokeText(String.fromCodePoint(\" + ('' + ourfdstart).replace(\/\\.\/g,',') + \"),\" + lastx + \",\" + lasty + \");\", false);
\n eval(canvascommands[eval(-1 + canvascommands.length)]);
\n } else {
\n context.strokeText(String.fromCodePoint(eval('' + ourfdstart)),lastx,lasty);
\n storecanvascommands(\"context.strokeText(String.fromCodePoint(\" + ourfdstart + \"),\" + lastx + \",\" + lasty + \");\", false);
\n }
\n }
\n}
\n
\nfunction ajaxEntityNameIt() {
\n if (ourzhr != null) {
\n if (ourzhr.readyState == 4) {
\n if (ourzhr.status == 200) {
\n ourfdstart=ourzhr.responseText;
\n ajaxEntityIt('');
\n }
\n ourzhr=null;
\n ourzform=null;
\n }
\n }
\n}
\n<\/code><\/p>\n

Today’s tutorial picture<\/a> shows us using this new emoji creation capability for …<\/p>\n