{"id":49323,"date":"2020-06-15T03:01:47","date_gmt":"2020-06-14T17:01:47","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49323"},"modified":"2020-06-21T12:15:39","modified_gmt":"2020-06-21T02:15:39","slug":"feedback-canvas-curve-annotations-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/feedback-canvas-curve-annotations-tutorial\/","title":{"rendered":"Feedback Canvas Curve Annotations Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Feedback Canvas Curve Annotations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/canvas_more_shapes.jpg\" title=\"Feedback Canvas Curve Annotations Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Feedback Canvas Curve Annotations Tutorial<\/p><\/div>\n<p>Additional functionality possibilities for the &#8220;base graphics&#8221; are an important foundation for more useful Standing Order Sequence work for the Feedback web application of yesterday&#8217;s <a title='Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial' href='#soscidft'>Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial<\/a>, because you can &#8230;<\/p>\n<ul>\n<li>create a form image, which you may have captured via the Camera app of a mobile device, that becomes the canvas via the &#8220;Canvas Equals Image&#8221; button &#8230; but also &#8230;<\/li>\n<li>it might be that you design your own form on the canvas that can serve as &#8220;base graphics&#8221; to some Standing Order Sequences to reach similar end results<\/li>\n<\/ul>\n<p> &#8230; and the more shape drawing (onto canvas) options you have available to you, the more sophisticated can you design your own forms, as an alternative to a Word Processing approach achieving this.<\/p>\n<p>And so, today, we add more Annotation shape drawing (button) functionality, as per &#8230;<\/p>\n<ul>\n<li>Circle (infilled)<\/li>\n<li>Arc (infilled or not)<\/li>\n<li>Quadratic Curve (infilled or not)<\/li>\n<li>Bezier Curve (infilled or not)<\/li>\n<li>Polygon<\/li>\n<li>Polyline<\/li>\n<\/ul>\n<p> &#8230; all but that first one, having in common that the shapes are more than likely involving more than the two discrete clicks\/touches we have catered for up to now with all the non-scribble (discrete click\/touch) functionality available on the Annotation menu for the Feedback web application (via global var<font size=1>iables<\/font> &#8220;lastx&#8221; and &#8220;lasty&#8221; and &#8220;x&#8221; and &#8220;y&#8221;).  We&#8217;ve achieved this via a variable introduced by &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js------------------------------GETME' title='world.js'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js------------------------------GETME'>world.js<\/a> &#8230;<br \/>\n<code><br \/>\nvar polyco=[];   \/\/ store all click x,y until used<br \/>\n<\/code><br \/>\n &#8230; called via &#8230;\n<\/li>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------------------------------GETME' title='feedback.htm'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------------------------------GETME'>feedback.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">feedback web application<\/a> &#8230; and <font color=blue>referenced via<\/font> &#8230;<br \/>\n<code><br \/>\n\/\/ Add event listener for `click` events.<br \/>\nelem.addEventListener('click', function(event) {<br \/>\n   if (first) elem.width = elem.width;<br \/>\n   first=false;<br \/>\n   elem.style.backgroundImage = \"none\";<br \/>\n   elem.style.opacity = 1.0;<br \/>\n <br \/> <br \/>\n       if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {<br \/>\n       if (event.pageX || event.pageY) {<br \/>\n       x = event.pageX - elemLeft;<br \/>\n       y = event.pageY - elemTop;<br \/>\n       } else {<br \/>\n       x = event.clientX - elemLeft;<br \/>\n       y = event.clientY - elemTop;<br \/>\n       }<br \/>\n       <font color=blue>if (typeof polyco == 'array' || typeof polyco == 'object') {<br \/>\n         if (('' + x + y).indexOf('-') == -1) {<br \/>\n         polyco.push(x);<br \/>\n         polyco.push(y);<br \/>\n         }<br \/>\n       }<\/font><br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       \/\/xxoff=0;<br \/>\n       \/\/yyoff=0;<br \/>\n       } else {<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       if (event.pageX || event.pageY) {<br \/>\n       x = event.pageX - elemLeft;<br \/>\n       y = event.pageY - elemTop;<br \/>\n       } else {<br \/>\n       x = event.clientX - elemLeft;<br \/>\n       y = event.clientY - elemTop;<br \/>\n       }<br \/>\n       <font color=blue>if (typeof polyco == 'array' || typeof polyco == 'object') {<br \/>\n         if (('' + x + y).indexOf('-') == -1) {<br \/>\n         polyco.push(x);<br \/>\n         polyco.push(y);<br \/>\n         }<br \/>\n       }<\/font><br \/>\n       xxoff=0;<br \/>\n       yyoff=0;<br \/>\n    if (document.getElementById('canbet')) {<br \/>\n    if ((document.getElementById('canbet').value == 'transparent' || document.getElementById('mycolour').value == 'Transparent') && !allowable) {<br \/>\n      allowable=true;<br \/>\n    } else if ((document.getElementById('canbet').value == 'transparent' || document.getElementById('mycolour').value == 'Transparent') && allowable) {<br \/>\n      allowable=false;<br \/>\n      document.getElementById('canbet').value='';<br \/>\n      if (obeforetransparent != \"\") {<br \/>\n      omyimgdata=inlinecheck(elem.toDataURL('image\/png',0));<br \/>\n      document.getElementById('myim').style.width=elem.style.width;<br \/>\n      document.getElementById('myim').style.height=elem.style.height;<br \/>\n      document.getElementById('myim').src=omyimgdata;<br \/>\n      omidatax=eval(Math.min(x,lastx));<br \/>\n      omidatay=eval(Math.min(y,lasty));<br \/>\n      omidataw=Math.abs(x - lastx);<br \/>\n      omidatah=Math.abs(y - lasty);<br \/>\n      document.getElementById('mycolour').value=obeforetransparent;<br \/>\n      }<br \/>\n    } else if (omyimgdata != \"\") {<br \/>\n         context.drawImage(document.getElementById('myim'),omidatax,omidatay,omidataw,omidatah, x, y,omidataw,omidatah); \/\/, omidataw, omidatah);<br \/>\n         omyimgdata=\"\";<br \/>\n    }<br \/>\n    }<br \/>\n<br \/>\n       }<br \/>\n<br \/> <br \/>\n    clickno = clickno + 1;<br \/>\n<br \/>\n   var r = Math.floor((Math.random()*56)+200);<br \/>\n   var g = Math.floor((Math.random()*56)+200);<br \/>\n   var b = Math.floor((Math.random()*56)+200);<br \/>\n   var thiscol ='#' + arr[(r-(r % 16)) \/ 16] + arr[r % 16] + arr[(g-(g % 16))  \/ 16] + arr[g % 16] + arr[(b-(b % 16))  \/ 16] + arr[b % 16];<br \/>\n<br \/>\n   if (('' + elem.getAttribute('data-nocb')).replace('null','') == '') {<br \/>\n   elem.style.backgroundColor = thiscol;  \/\/'rgba(' + r + ',' + g + ',' + b + ',0.5)'; \/\/thiscol;<br \/>\n   }<br \/>\n<br \/> <br \/>\n}, false);<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; as the basis for dynamic HTML &#8230;<\/p>\n<p><code><br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/sequence.png' onclick=\\\" dosequence(''); \\\" alt='Sequence' title='Sequence'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/line.png' onclick=' doline(); ' alt='Line' title='Line'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/rectangle.png' onclick=' dorectangle(); ' alt='Rectangle' title='Rectangle'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/polygon.png' onclick=' dopolygon(true); ' alt='Polygon' title='Polygon'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/rectangleborder.png' onclick=' dorectangleborder(); ' alt='Rectangle Border' title='Rectangle Border'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/circle.png' onclick=' docircle(); ' alt='Circle' title='Circle'&gt;&lt;\/img&gt;\";<br \/>\n    <font color=blue>hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/circlefill.png' onclick=' docirclefill(); ' alt='Circle' title='Circle'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/arctoclosed.png' onclick=' doarcto(true); ' alt='Arc' title='Arc'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/qctoclosed.png' onclick=' doqcto(true); ' alt='Quadratic Curve' title='Quadratic Curve'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/bztoclosed.png' onclick=' dobzto(true); ' alt='Bezier Curve' title='Bezier Curve'&gt;&lt;\/img&gt;\";<br \/>\n    <\/font>hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/clear.png' onclick=' clearall(); ' alt='Clear' title='Clear'&gt;&lt;\/img&gt;\";<br \/>\n    <font color=blue>hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/polyline.png' onclick=' dopolygon(false); ' alt='Polyline' title='Polyline'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/arctoopen.png' onclick=' doarcto(false); ' alt='Arc' title='Arc'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/qctoopen.png' onclick=' doqcto(false); ' alt='Quadratic Curve' title='Quadratic Curve'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/bztoopen.png' onclick=' dobzto(false); ' alt='Bezier Curve' title='Bezier Curve'&gt;&lt;\/img&gt;\";<br \/>\n    <\/font>hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/sline.png' onclick=\\\" alert('Ready to Scribble in two seconds.  Any key stroke stops scribbling.'); setTimeout(intwo,2000); \\\" alt='Scribble' title='Scribble'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/zline.png' onclick=\\\" if (isScribble == 2 || isScribble == 1) { storecanvascommands('context=context;', true); } isScribble=0; \\\" alt='End of scribble' title='End of scribble'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/minus.png' onclick=\\\" if (isScribble == 2 || isScribble == 1) { isScribble=0; storecanvascommands('context=context;', true); }  undo(); \\\" alt='Undo' title='Undo'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/minusminus.png' onclick=\\\" if (isScribble == 2 || isScribble == 1) { isScribble=0; storecanvascommands('context=context;', true); } butnotfirst=1; undo();  butnotfirst=0; \\\" alt='Undo original image only and replace by transparent background' title='Undo original image only and replace by transparent background'&gt;&lt;\/img&gt;\";<br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/plus.png' onclick=\\\" if (isScribble == 2 || isScribble == 1) { isScribble=0; storecanvascommands('context=context;', true); }  redo(); \\\" alt='Redo' title='Redo'&gt;&lt;\/img&gt;\";<br \/>\n<\/code><\/p>\n<p> &#8230; and exemplary external Javascript like &#8230;<\/p>\n<p><code><br \/>\nfunction dopolygon(dofill) { \/\/ new idea ... June, 2020<br \/>\n    var ipl=0;<br \/>\n    if (eval(document.getElementById('rotation').value) != 0 && rotcmd == \"\" && 'dopolygon' != 'dopolygon') {<br \/>\n    rotcmd=\"dopolygon();\";<br \/>\n    drawRotated(eval(document.getElementById('rotation').value));<br \/>\n    } else {<br \/>\n    rotcmd=\"\";<br \/>\n    if (dofill) {<br \/>\n    context.fillStyle=document.getElementById('mycolour').value;<br \/>\n    storecanvascommands(\"context.fillStyle='\" + document.getElementById('mycolour').value + \"';\", false);<br \/>\n    } else {<br \/>\n    context.strokeStyle=document.getElementById('mycolour').value;<br \/>\n    storecanvascommands(\"context.strokeStyle='\" + document.getElementById('mycolour').value + \"';\", false);<br \/>\n    }<br \/>\n    context.beginPath();<br \/>\n    storecanvascommands(\"context.beginPath();\", false);<br \/>\n    console.log(polyco);<br \/>\n    if (dofill) {<br \/>\n    polyco.push(polyco[0]);<br \/>\n    polyco.push(polyco[1]);<br \/>\n    }<br \/>\n    while (eval('' + ipl) &lt; eval('' + polyco.length)) {<br \/>\n    if (eval('' + ipl) == 0) {<br \/>\n    console.log('pen up ' + eval('' + polyco.length));<br \/>\n    context.moveTo(eval('' + polyco[ipl]),eval('' + polyco[eval(1 + eval('' + ipl))]));<br \/>\n    storecanvascommands(\"context.moveTo(\" + eval(rotoffx + eval('' + polyco[ipl])) + \",\" + eval(rotoffy + eval('' + polyco[eval(1 + eval('' + ipl))])) + \");\", false);<br \/>\n    } else {<br \/>\n    context.lineTo(eval('' + polyco[ipl]),eval('' + polyco[eval(1 + eval('' + ipl))]));<br \/>\n    storecanvascommands(\"context.lineTo(\" + eval(rotoffx + eval('' + polyco[ipl])) + \",\" + eval(rotoffy + eval('' + polyco[eval(1 + eval('' + ipl))])) + \");\", false);<br \/>\n    console.log('pen down ' + ipl);<br \/>\n    if (eval(2 + eval('' + ipl)) &gt;= eval('' + polyco.length)) {<br \/>\n    if (dofill) {<br \/>\n    context.closePath();<br \/>\n    storecanvascommands(\"context.closePath();\", false);<br \/>\n    context.fill();<br \/>\n    storecanvascommands(\"context.fill();\", true);<br \/>\n    } else {<br \/>\n    context.stroke();<br \/>\n    storecanvascommands(\"context.stroke();\", true);<br \/>\n    }<br \/>\n    } else if (1 == 2) {<br \/>\n    context.strokeStyle=document.getElementById('mycolour').value;<br \/>\n    context.beginPath();<br \/>\n    storecanvascommands(\"context.beginPath();\", false);<br \/>\n    storecanvascommands(\"context.strokeStyle='\" + document.getElementById('mycolour').value + \"';\", false);<br \/>\n    context.moveTo(eval('' + polyco[ipl]),eval('' + polyco[eval(1 + eval('' + ipl))]));<br \/>\n    storecanvascommands(\"context.moveTo(\" + eval(rotoffx + eval('' + polyco[ipl])) + \",\" + eval(rotoffy + eval('' + polyco[eval(1 + eval('' + ipl))])) + \");\", false);<br \/>\n    }<br \/>\n    }<br \/>\n    ipl=eval(2 + eval('' + ipl));<br \/>\n    console.log('pre pen up ' + ipl);<br \/>\n    }<br \/>\n    }<br \/>\n    polyco=[];<br \/>\n  rotoffx=0.0;<br \/>\n  rotoffy=0.0;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>We hope you get to <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">try this out<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-standing-order-sequences-canvas-of-image-dimensions-flexibility-tutorial\/'>New Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='soscidft'>Previous relevant <a target=_blank title='Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/standing-order-sequences-canvas-of-image-dimensions-flexibility-tutorial\/'>Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial<\/a> is shown below.<\/p>\n\n\n\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial\"]<a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/canvas_equals_image_flexibility.jpg\" title=\"Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial\"   \/><\/a>[\/caption]\n\n\n\n\n\n<p>We find, quite often, with I.T. work, we have ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>ideas days ... and ...<\/li>\n\n\n\n\n<li>implementation days<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... and sometimes the first needs the second, because the first needed the day to effectively \"get the ideas on paper\", but the detail of making it work and be flexible and useful for users often needs days like today, for us, \"implementation days\" (that also have the advantage of a day's worth of \"mulling\" for reworked \"ideas\").  That \"mulling\" led to a \"flexibility thinking\" session that led to the email subject ...<\/p>\n\n\n\n\n\n<blockquote>\nMinus prefix deletes, blank suffix uses current background, same updates data: with current background, plus suffix adds onto, yyyymmdd_ start to new 5th column name is the only way to create two within a day\n<\/blockquote>\n\n   \n\n\n\n<p> ... coming from a half decent \"offsite thinking session\" because in some form already they were all relevant and all implemented ... quite rare for an \"offsite thinking result set\" in our woooooorrrrrlllllllddd.<\/p>\n\n\n\n\n\n<p>A surprise we discovered as well, by implementing (and bedding down yesterday's <a title='Standing Order Sequences Canvas of Image Dimensions Tutorial' href='#soscidt'>Standing Order Sequences Canvas of Image Dimensions Tutorial<\/a> ideas) that yesterday's ...<\/p>\n\n\n\n\n\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/standing-order-sequences-canvas-of-image-dimensions-tutorial\/'>\n ... we stopped using <i>elem.toDataURL(\"image\/png\",0)<\/i> in favour of the filterable (ie. <a target=_blank title='Image lossless compression' href='https:\/\/www.google.com\/search?rlz=1C5CHFA_enAU832AU832&sxsrf=ALeKk010WURt7j9yL0MdZaHQH5wKc2IS_A%3A1591926717247&ei=vd_iXtziDpaY4-EP9Oi7wA8&q=image+lossless+compression&oq=image+los&gs_lcp=CgZwc3ktYWIQARgBMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADoECCMQJzoICAAQBxAKEB46BAgAEAo6BggAEAoQHjoECAAQDVCuLljuVGD_d2gAcAB4AIABnAKIAecTkgEFMC41LjeYAQCgAQGqAQdnd3Mtd2l6&sclient=psy-ab'>image lossless compression)<\/a> <i>elem.toDataURL(\"image\/jpeg\",0.1)<\/i> instead.\n<\/blockquote>\n\n\n\n\n\n<p> ... was true for Standing Order Sequences involving images using that \"Canvas Equals Image\" functionality, but for other scenarios the \"we stopped\" decision above has been overridden.  There is a place for <i>elem.toDataURL(\"image\/png\",0)<\/i> especially when any opacity starts becoming involved.<\/p>\n\n\n\n\n\n<p>Let's go into more detail regarding the context of that refinement list above <font color=purple>and others as well<\/font> ...<\/p>\n\n\n\n\n\n<table>\n\n\n<tr>\n\n<th>Description ... catered for at ...<\/th>\n\n\n\n<th>Sequence Definition prompt<\/th>\n\n\n\n<th>Standing Order rerun prompt<\/th>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td>Minus prefix deletes\n\n... way for user to delete a Standing Order<\/td>\n\n\n\n<td><\/td>\n\n\n\n<td>&#10004;<\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td>Blank suffix uses current background\n\n... way for user to just call on Sequences of Standing Order only<\/td>\n\n\n\n<td><\/td>\n\n\n\n<td>&#10004;<\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td>Same updates data: with current background\n\n... way for user to control base graphics content of a Standing Order<\/td>\n\n\n\n<td><\/td>\n\n\n\n<td>&#10004;<\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td>Plus suffix adds onto\n\n... way for user to append Sequences to a Standing Order<\/td>\n\n\n\n<td><\/td>\n\n\n\n<td>&#10004;<\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td><font color=purple>Standing Order name part in 5th column ... <\/font>yyyymmdd_ start to new 5th column name is the only way to create two within a day\n\n... way for user to personalize a Standing Order via its name<\/td>\n\n\n\n<td>&#10004;<\/td>\n\n\n\n<td><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td><font color=purple>Cancel cancels standing order action\n\n... way for user to not act on Standing Order just now<\/font><\/td>\n\n\n\n<td><\/td>\n\n\n\n<td><font color=purple>&#10004;<\/font><\/td>\n\n<\/tr>\n\n\n\n\n<tr>\n\n<td><font color=purple>Append format with a space for no Standing Order recall usage in this session\n\n... way for user to define Sequences for the rest of this session that are not stored in any Standing Order parts later<\/font><\/td>\n\n\n\n<td><font color=purple>&#10004;<\/font><\/td>\n\n\n\n<td><\/td>\n\n<\/tr>\n\n\n<\/table>\n\n\n\n\n\n<p>And today we extend the Standing Order Sequence arrangements of <a title='Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial' href='#socdnest'>Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial<\/a> <font color=red>with the optional (ie. if not default)<\/font> ...<\/p>\n\n\n\n\n\n<ul>\n\n\n<li>window.localStorage (one per day, for the most part) record consisting of ...<\/li>\n\n\n\n\n<li># delimited ... subrecords consisting of ...<\/li>\n\n\n\n\n<li><font color=blue>startOrRelativeValue, numberOf, incrementOf, formatOf<\/font>, lastx, lasty, x, y<font color=red>, FontSize_px_FontName_FontColour<\/font>,  dataURIcanvasSnapshotFirstSubrecordOnly<\/li>\n\n\n<\/ul>\n\n\n\n\n\n<p> ... to snapshot font arrangements the user had established before starting to define their first Sequence.<\/p>\n\n\n\n\n\n<p>Also coded for today is the possibility to apply a rotation (in degrees) to your Annotation Sequences and then onto any affected and saved Standing Order Sequences.  The way this is done is via a <a target=_blank title='Mantissa' href='https:\/\/www.yourdictionary.com\/mantissa#:~:text=noun,234%20in%20the%20number%201101.234.'>mantissa<\/a> part applied to the \"lastx\" part of the data transfers through to the window.<a target=_blank title='localStorage information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> data conduit.  Clearly, not all timesheets show all sequenced annotation as horizontal text, so this new functionality may be useful to the user.  It shows for them as they shape to involve images, whether they follow through on this, or not.<\/p>\n\n \n\n\n\n<p>Today <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-----------------------------GETME' title='world.js'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-----------------------------GETME'>world.js<\/a> (again used in Annotations part of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------------------------------GETME' title='feedback.htm'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.html-------------------------------GETME'>feedback.htm<\/a>'s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">feedback web application<\/a>) continuing to allow for Standing Order Sequencing and \"canvas dimensions equals image dimensions\" possibilities.<\/p>\n\n \n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/standing-order-sequences-canvas-of-image-dimensions-flexibility-tutorial\/'>Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial<\/a>.<\/p-->\n<hr>\n<p id='soscidt'>Previous relevant <a target=_blank title='Standing Order Sequences Canvas of Image Dimensions Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/standing-order-sequences-canvas-of-image-dimensions-tutorial\/'>Standing Order Sequences Canvas of Image Dimensions Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Standing Order Sequences Canvas of Image Dimensions Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/canvas_equals_image.jpg\" title=\"Standing Order Sequences Canvas of Image Dimensions Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Standing Order Sequences Canvas of Image Dimensions Tutorial<\/p><\/div>\n<p>To us, <i>resolution<\/i> of static graphical base content was a &#8220;missing ingredient&#8221; to more generic usefulness regarding the Feedback web application &#8220;Standing Order Sequencing&#8221; functionality started with yesterday&#8217;s <a title='Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial' href='#socdnest'>Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial<\/a>.  The unwieldy nature of &#8230;<\/p>\n<ul>\n<li>the previous static dimensions of the canvas &#8230; needed to change &#8230;<\/li>\n<li>when the user clicks a new &#8220;Canvas Equals Image&#8221; button &#8230; so that &#8230;<\/li>\n<li>canvas dimensions will match the browsed for image dimensions<\/li>\n<\/ul>\n<p> &#8230; but to make this a feasible approach, we needed to introduce &#8220;Z&#8221; into the reasoning.  Huh?!  Yes, we needed to start being able to, between the &#8230;<\/p>\n<ul>\n<li>(potentially large) canvas &#8230; and &#8230;<\/li>\n<li>annotation menu<\/li>\n<\/ul>\n<p> &#8230; be able to establish some of our favourite <a target=_blank title='Overlay postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> principles &#8230;<\/p>\n<ul>\n<li>annotation menu gets put to <a target=_blank title='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a> 0.6 &#8230;<\/li>\n<li>both up at the top heading and in the annotation menu itself we introduce a new toggle &#128260; button to toggle the <a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='CSS z-index information from w3schools'>z-index<\/a> property of the annotation menu between &#8230;\n<ol>\n<li>(Z sitting) below the canvas &#8230; and &#8230;<\/li>\n<li>(Z sitting) above the canvas<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; allowing the user to both &#8230;<\/p>\n<ul>\n<li>get to mouse click or touch canvas places &#8230; and, helped out via control of toggle &#128260; button &#8230;<\/li>\n<li>get to say what those clicks\/touches mean via the annotation menu buttons and dropdowns<\/li>\n<\/ul>\n<p>The other danger this functionality change may incur is that the <i>resolution<\/i> improvement allowances means that the dataURI (canvas) content could become very big, so for &#8220;Standing Order Sequence&#8221; window.localStorage we stopped using <i>elem.toDataURL(&#8220;image\/png&#8221;,0)<\/i> in favour of the filterable (ie. <a target=_blank title='Image lossless compression' href='https:\/\/www.google.com\/search?rlz=1C5CHFA_enAU832AU832&#038;sxsrf=ALeKk010WURt7j9yL0MdZaHQH5wKc2IS_A%3A1591926717247&#038;ei=vd_iXtziDpaY4-EP9Oi7wA8&#038;q=image+lossless+compression&#038;oq=image+los&#038;gs_lcp=CgZwc3ktYWIQARgBMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADoECCMQJzoICAAQBxAKEB46BAgAEAo6BggAEAoQHjoECAAQDVCuLljuVGD_d2gAcAB4AIABnAKIAecTkgEFMC41LjeYAQCgAQGqAQdnd3Mtd2l6&#038;sclient=psy-ab'>image lossless compression)<\/a> <i>elem.toDataURL(&#8220;image\/jpeg&#8221;,0.1)<\/i> instead.<\/p>\n<p>With <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js----------------------------GETME' title='world.js'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js----------------------------GETME'>world.js<\/a> (again used in Annotations part of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">feedback web application<\/a>) we allow for Standing Order Sequencing and &#8220;canvas dimensions equals image dimensions&#8221; possibilities.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/standing-order-sequences-canvas-of-image-dimensions-tutorial\/'>Standing Order Sequences Canvas of Image Dimensions Tutorial<\/a>.<\/p-->\n<hr>\n<p id='socdnest'>Previous relevant <a target=_blank title='Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/standing-order-canvas-datetime-or-number-or-emoji-sequences-tutorial\/'>Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/standing_order_ts.jpg\" title=\"Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial<\/p><\/div>\n<p>We want yesterday&#8217;s <a title='Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial' href='#cadnest'>Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial<\/a> be a jigsaw piece on the way to &#8230;<\/p>\n<ul>\n<li>fine tuning timesheet filling out web application &#8230; and we&#8217;re happy now that that is possible via &#8230;<\/li>\n<li>sequenced annotations onto a static graphical base content &#8230; via HTML5 canvas and concept of &#8220;Standing Order&#8221; &#8230; and then &#8230;<\/li>\n<li>allow for email sharing of canvas timesheet content<\/li>\n<\/ul>\n<p>Today&#8217;s work is the refinement of how the &#8220;Standing Order&#8221; side of the story above can work.  We decided our user specific data storage conduit for this should be via window.<a target=_blank title='localStorage information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a> and extended the <font color=blue>four column sequences<\/font> of recent days into &#8230;<\/p>\n<ul>\n<li>window.localStorage (one per day, for the most part) record consisting of &#8230;<\/li>\n<li># delimited &#8230; subrecords consisting of &#8230;<\/li>\n<li><font color=blue>startOrRelativeValue, numberOf, incrementOf, formatOf<\/font>, lastx, lasty, x, y, dataURIcanvasSnapshotFirstSubrecordOnly<\/li>\n<\/ul>\n<p> &#8230; where we encourage the user, for ease of &#8220;Standing Order&#8221; use to reference just the one start<strike>OrRelative<\/strike>Value per &#8220;Standing Order&#8221; meaning that on a reuse of the &#8220;Standing Order&#8221; the web application only needs to ask for the one user start<strike>OrRelative<\/strike>Value for their &#8220;Standing Order&#8221; rerun.  But if all others cannot be described via <strike>startOr<\/strike>RelativeValue we ask for multiple redefinitions for each start<strike>OrRelative<\/strike>Value encountered.<\/p>\n<p>As an example, supposing you establish Fortnightly Timesheet scenario with Standing Order basis being &#8220;Period Ending date&#8221; (12\/06\/2020) &#8230;<\/p>\n<ul>\n<li><i>base graphics<\/i> in the canvas consisting of &#8230;\n<ol>\n<li>timesheet photo image (possibly created via Camera app of a mobile phone or tablet) browse into canvas (via Annotations menu) &#8230;<\/li>\n<li>scribbled signature into canvas (via Annotations menu)<\/li>\n<li>default ticks and crosses and totals (can be base graphics into canvas (via Annotations menu), or can be sequences)<\/li>\n<\/ol>\n<\/li>\n<li>first sequence consisting of Timesheet right hand top rightmost click 1 and near middle of right half click 2 &#8230; teamed with <font color=purple>start<strike>OrRelative<\/strike>Value<\/font> sequence &#8230;<br \/>\n<code><br \/>\n<font color=purple>12\/06\/20<\/font>,5,-1,DD\/MM\/YY<br \/>\n<\/code>\n<\/li>\n<li>second sequence consisting of Timesheet near middle of left half rightmost click 3 and left hand top click 4 &#8230; teamed with <font color=red><strike>startOr<\/strike>RelativeValue<\/font> sequence &#8230;<br \/>\n<code><br \/>\n<font color=red>-7<\/font>,5,-1,DD\/MM\/YY<br \/>\n<\/code>\n<\/li>\n<li>up top right of Timesheet title top rightish click 5 and top rightish click 6 &#8230; teamed with <font color=red><strike>startOr<\/strike>RelativeValue<\/font> sequence &#8230;<br \/>\n<code><br \/>\n<font color=red>0<\/font>,1,0,DD\/MM\/YYYY<br \/>\n<\/code>\n<\/li>\n<li>down bottom right of Timesheet signature date bottom rightish click 7 and bottom rightish click 8 &#8230; teamed with <font color=red><strike>startOr<\/strike>RelativeValue<\/font> sequence &#8230;<br \/>\n<code><br \/>\n<font color=red>0<\/font>,1,0,DD\/MM\/YYYY<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; that would be stored in window.localStorage as encodeURIComponent version of &#8230;<\/p>\n<p><code><br \/>\n12\/06\/20,5,-1,DD\/MM\/YY,lastx_1,lasty_1,x_2,y_2,dataURIcanvasSnapshotFirstSubrecordOnly#-7,5,-1,DD\/MM\/YY,lastx_3,lasty_3,x_4,y_4#0,1,0,DD\/MM\/YYYY,lastx_5,lasty_5,x_6,y_6#0,1,0,DD\/MM\/YYYY,lastx_7,lasty_7,x_8,y_8<br \/>\n<\/code><\/p>\n<p> &#8230; as you can see in action with today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/standing_order_ts.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> &#8230; whose existence causes the next web application execution to display &#8220;Standing Order&#8221; <img style='display:inline-block;' src='\/\/www.rjmprogramming.com.au\/MarkItUp\/standingorder.png'><\/img> button that when pressed will ask the question (with default answer, underneath, for a Javascript prompt window) &#8230;<\/p>\n<p><code><br \/>\nInitial value for Standing Order Sequence (please keep the same format and leaving the same updates with current canvas static background)<br \/>\n12\/06\/20<br \/>\n<\/code><\/p>\n<p> &#8230; which would then display into the canvas that same <i>base graphics<\/i> above with overlayed sequences based on new start<strike>OrRelative<\/strike>Value you provide with the Javascript prompt window above.<\/p>\n<p>And so, in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js---------------------------GETME' title='world.js'>the changed<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js---------------------------GETME'>world.js<\/a> (again used in Annotations part of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">feedback web application<\/a>) we allow for Standing Order Sequencing possibilities.  Early days, and stay tuned for further refinements!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/standing-order-canvas-datetime-or-number-or-emoji-sequences-tutorial\/'>Standing Order Canvas Datetime or Number or Emoji Sequences Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cadnest'>Previous relevant <a target=_blank title='Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas-annotations-and-datetime-or-number-or-emoji-sequences-tutorial\/'>Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/htmlentity_emoji.jpg\" title=\"Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Canvas Annotations and Datetime or Number Sequences Tutorial' href='#cadnst'>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 &#8220;Wooooorrrrrlllllddddd of Emoji&#8221; and &#8220;HTML Entities&#8221; and &#8220;Unicode Characters&#8221;.  So far with emoji work we&#8217;ve never tried to map &#8220;HTML Entity Names&#8221; to a &#8220;String <a target=_blank title='CodePoint information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Code_point'>CodePoint<\/a>&#8220;.  What do we mean here by &#8220;HTML Entity Names&#8221;?  We mean a classification noting how HTML Entities like &#8230;<\/p>\n<table>\n<tr>\n<th>Character<\/th>\n<th>Description<\/th>\n<th>Entity Number &#8230; can have an &#8230;<\/th>\n<th>Entity <b>Name<\/b> &#8230; sometimes<\/th>\n<\/tr>\n<tr>\n<td>&amp;<\/td>\n<td>Ampersand<\/td>\n<td>&amp;#38;<\/td>\n<td>&amp;<b>amp<\/b>;<\/td>\n<\/tr>\n<tr>\n<td>&gt;<\/td>\n<td>Greater than<\/td>\n<td>&amp;#62;<\/td>\n<td>&amp;<b>gt<\/b>;<\/td>\n<\/tr>\n<tr>\n<td>&lt;<\/td>\n<td>Less than<\/td>\n<td>&amp;#60;<\/td>\n<td>&amp;<b>lt<\/b>;<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; 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 <a target=_blank title='Useful link, thanks' href='https:\/\/www.freeformatter.com\/html-entities.html'>Complete list of HTML entities &#8211; FreeFormatter.com<\/a> as a great resource.<\/p>\n<p>As you might imagine, not every HTML Entity you can think of has a corresponding HTML Entity Name like this, so in <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js--------------------------GETME' title='world.js'>our extension of external Javascript logic<\/a> of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js--------------------------GETME'>world.js<\/a> (again used in Annotations part of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">feedback web application<\/a>) we allow the user to enter the integer of the String CodePoint (the function <a target=_blank title='String.fromCodePoint() information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/String\/fromCodePoint'>String.fromCodePoint<\/a>() references <font size=1>(and just quietly you can compose your own composite emoji type by including a decimal place like &#8220;127462.127482&#8221; for the Australian flag &#127462;&#127482; as an example)<\/font>) that can be used to display in the Feedback <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> your emoji characters.<\/p>\n<p>The conduit by which we make the HTML Entity Name parts of the new <i>&#8220;c&#8221; format<\/i> functionality happen is via some new <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html_entity_name_to_codepoint.php' title='html_entity_name_to_codepoint.php'>html_entity_name_to_codepoint.php<\/a> which is contacted by our external Javascript via new <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a> and <a target=_blank title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData'>FormData<\/a> object logic you can see two new Javascript functions for below &#8230;<\/p>\n<p><code><br \/>\nfunction ajaxEntityIt(inval) {<br \/>\n    if (inval != '') {<br \/>\n      ourfdstart=inval;<br \/>\n    }<br \/>\n    var lastxinc=eval(eval(x - lastx) \/ eval(-1 + eval(ourfdnumber)));<br \/>\n    var lastyinc=eval(eval(y - lasty) \/ eval(-1 + eval(ourfdnumber)));<br \/>\n    if (('' + ourfdstart).trim() != '') {<br \/>\n    for (var thisij=1; thisij&lt;ourfdnumber; thisij++) {<br \/>\n  context.font = document.getElementById('myfont').value;<br \/>\n  storecanvascommands(\"context.font = '\" + document.getElementById('myfont').value + \"';\", false);<br \/>\n  context.strokeStyle=document.getElementById('mycolour').value;<br \/>\n  storecanvascommands(\"context.strokeStyle='\" + document.getElementById('mycolour').value + \"';\", false);<br \/>\n  if (('' + ourfdstart).indexOf('.') != -1) {<br \/>\n  storecanvascommands(\"context.strokeText(String.fromCodePoint(\" + ('' + ourfdstart).replace(\/\\.\/g,',') + \"),\" + lastx + \",\" + lasty + \");\", false);<br \/>\n  eval(canvascommands[eval(-1 + canvascommands.length)]);<br \/>\n  } else {<br \/>\n  context.strokeText(String.fromCodePoint(eval('' + ourfdstart)),lastx,lasty);<br \/>\n  storecanvascommands(\"context.strokeText(String.fromCodePoint(\" + ourfdstart + \"),\" + lastx + \",\" + lasty + \");\", false);<br \/>\n  }<br \/>\n  lastx+=lastxinc;<br \/>\n  lasty+=lastyinc;<br \/>\n  if (('' + ourfdinc).replace('0','') != '') {<br \/>\n  ourfdstart=eval('' + ourfdstart);<br \/>\n  ourfdstart+=eval('' + ourfdinc);<br \/>\n  }<br \/>\n    }<br \/>\n  context.font = document.getElementById('myfont').value;<br \/>\n  storecanvascommands(\"context.font = '\" + document.getElementById('myfont').value + \"';\", false);<br \/>\n  context.strokeStyle=document.getElementById('mycolour').value;<br \/>\n  storecanvascommands(\"context.strokeStyle='\" + document.getElementById('mycolour').value + \"';\", false);<br \/>\n  if (('' + ourfdstart).indexOf('.') != -1) {<br \/>\n  storecanvascommands(\"context.strokeText(String.fromCodePoint(\" + ('' + ourfdstart).replace(\/\\.\/g,',') + \"),\" + lastx + \",\" + lasty + \");\", false);<br \/>\n  eval(canvascommands[eval(-1 + canvascommands.length)]);<br \/>\n  } else {<br \/>\n  context.strokeText(String.fromCodePoint(eval('' + ourfdstart)),lastx,lasty);<br \/>\n  storecanvascommands(\"context.strokeText(String.fromCodePoint(\" + ourfdstart + \"),\" + lastx + \",\" + lasty + \");\", false);<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction ajaxEntityNameIt() {<br \/>\n  if (ourzhr != null) {<br \/>\n  if (ourzhr.readyState == 4) {<br \/>\n    if (ourzhr.status == 200) {<br \/>\n    ourfdstart=ourzhr.responseText;<br \/>\n    ajaxEntityIt('');<br \/>\n    }<br \/>\n    ourzhr=null;<br \/>\n    ourzform=null;<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/htmlentity_emoji.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> shows us using this new emoji creation capability for &#8230;<\/p>\n<ul>\n<li>Greek Uppercase via &#8220;Alpha,24,1,c&#8221;<\/li>\n<li>Greek Lowercase via &#8220;alpha,24,1,c&#8221;<\/li>\n<li>ISO-8859-1 Characters via &#8220;192,64,1,c&#8221;<\/li>\n<\/ul>\n<p> &#8230; as a <i>sequencing sequence<\/i> you might say, but the third value can easily be zero (ie. 0) to create a <i>static (ie. repeated) sequence<\/i> for timesheet requirements like a &#8220;tick&#8221; (alas, the closest &#8220;HTML Entity Name&#8221; to tick is &#8220;radic&#8221; (&radic;) (though &#8220;10004&#8221; (&#10004;) will look more apt as a &#8220;tick&#8221;)).<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-canvas-annotations-and-datetime-or-number-or-emoji-sequences-tutorial\/'>Canvas Annotations and Datetime or Number or Emoji Sequences Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cadnst'>Previous relevant <a target=_blank title='Canvas Annotations and Datetime or Number Sequences Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas-annotations-and-datetime-or-number-sequences-tutorial\/'>Canvas Annotations and Datetime or Number Sequences Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Canvas Annotations and Datetime or Number Sequences Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dosequence.jpg\" title=\"Canvas Annotations and Datetime or Number Sequences Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Canvas Annotations and Datetime or Number Sequences Tutorial<\/p><\/div>\n<p>Today we&#8217;ve added some &#8230;<\/p>\n<ul>\n<li>two <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> click based &#8230;\n<ol>\n<li>number &#8230; or &#8230;<\/li>\n<li>datetime<\/li>\n<\/ol>\n<\/li>\n<li>sequenced text annotation canvas placements<\/li>\n<\/ul>\n<p> &#8230; and you&#8217;ll probably guess the nature of our interest if we direct you to <a title='HTML Square Horizontal Rule Image Map Jigsaw Timesheet Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-image-map-jigsaw-timesheet-tutorial\/'>HTML Square Horizontal Rule Image Map Jigsaw Timesheet Tutorial<\/a> as background reading.<\/p>\n<p>Sequences are that predictable and pleasing thing to many people in mathematics whereby, just as with popular music, somehow you can work out what is coming next.  After all, music is all about sequences, with its scales and arpeggios and double stops etcetera.<\/p>\n<p>Requirements of the user are &#8230;<\/p>\n<ul>\n<li>two discrete clicks &#8230;<\/li>\n<li>click new button <img style='display:inline-block;' src='\/\/www.rjmprogramming.com.au\/MarkItUp\/sequence.png'><\/img> &#8230; and &#8230;<\/li>\n<li>filling out the 4 comma separated fields of a Javascript prompt window as per &#8230;\n<ol>\n<li>start date or number (latter is format &#8220;n&#8221; below)<\/li>\n<li>number of annotations<\/li>\n<li>increment of annotation values (note in example below how we allowed for <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> and added mins (for minutes) units)<\/li>\n<li>format of annotation that matches format of start date or &#8220;n&#8221; if number<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Try thinking how tedious it would have been to space nicely and write out the 5 annotation texts of today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dosequence.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> as opposed to the Javascript prompt answer (after the two positional canvas clicks) &#8230;<\/p>\n<p><code><br \/>\n09\/June\/2020 10:00:00,5,-213 * 24 * 60 -23 * 60 -23 mins,DD\/Month\/YYYY HH24:MI:SS<br \/>\n<\/code><\/p>\n<p>To add this new functionality into the <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-------------------------GETME' title='world.js'>changed external Javascript<\/a> <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world.js-------------------------GETME'>world.js<\/a> (used in Annotations part of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/feedback.htm\" title=\"Click picture\">feedback web application<\/a>) what was needed?<\/p>\n<ul>\n<li>add new button via Javascript codeline &#8230;<br \/>\n<code><br \/>\n    hstuff+=\"&amp;nbsp;&lt;img src='\/\/www.rjmprogramming.com.au\/MarkItUp\/sequence.png' onclick=' dosequence(); ' alt='Sequence' title='Sequence'&gt;&lt;\/img&gt;\";<br \/>\n<\/code>\n<\/li>\n<li>add one new Javascript &#8220;function dosequence()&#8221; as you can glean via the &#8220;changed external Javascript&#8221; link above<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/canvas-annotations-and-datetime-or-number-sequences-tutorial\/'>Canvas Annotations and Datetime or Number Sequences Tutorial<\/a>.<\/p-->\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49245' onclick='var dv=document.getElementById(\"d49245\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sequence\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49245' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49252' onclick='var dv=document.getElementById(\"d49252\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49252' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49262' onclick='var dv=document.getElementById(\"d49262\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/standing-order\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49262' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49271' onclick='var dv=document.getElementById(\"d49271\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49271' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49281' onclick='var dv=document.getElementById(\"d49281\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/implementation\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49281' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d49323' onclick='var dv=document.getElementById(\"d49323\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/shape\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49323' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Additional functionality possibilities for the &#8220;base graphics&#8221; are an important foundation for more useful Standing Order Sequence work for the Feedback web application of yesterday&#8217;s Standing Order Sequences Canvas of Image Dimensions Flexibility Tutorial, because you can &#8230; create a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/feedback-canvas-curve-annotations-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2990,69,1832,3329,142,174,184,1824,2022,245,2365,385,3192,409,1847,3330,2242,2730,2399,3324,2258,576,2658,3322,3323,578,1659,3321,652,2415,720,3326,752,876,894,932,962,997,1761,3328,1072,1895,1586,1131,2228,1626,3331,1254,3325,1319,1333,2257,1496],"class_list":["post-49323","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-abscissa","tag-ajax","tag-annotation","tag-arc","tag-bezier-curves","tag-button","tag-canvas","tag-character","tag-codepoint","tag-compression","tag-dimensions","tag-emoji","tag-emoji-flag","tag-external-javascript","tag-feedback","tag-fill","tag-flag","tag-formdata","tag-freeformatter","tag-fromcodepoint","tag-height","tag-html","tag-html-entity","tag-html-entity-name","tag-html-entity-number","tag-html5","tag-implementation","tag-increment","tag-javascript","tag-localstorage","tag-lossless","tag-mantissa","tag-mathematics","tag-opacity","tag-overlay","tag-php","tag-polygon","tag-programming","tag-prompt","tag-quadratic-curve","tag-rotation","tag-sequence","tag-shape","tag-shapes","tag-standing-order","tag-string","tag-stroke","tag-text","tag-toggle","tag-tutorial","tag-unicode","tag-width","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49323"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=49323"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49323\/revisions"}],"predecessor-version":[{"id":49397,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49323\/revisions\/49397"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}