{"id":49245,"date":"2020-06-10T03:01:45","date_gmt":"2020-06-09T17:01:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49245"},"modified":"2020-06-09T21:03:17","modified_gmt":"2020-06-09T11:03:17","slug":"canvas-annotations-and-datetime-or-number-sequences-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-annotations-and-datetime-or-number-sequences-tutorial\/","title":{"rendered":"Canvas Annotations and Datetime or Number Sequences 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=\"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","protected":false},"excerpt":{"rendered":"<p>Today we&#8217;ve added some &#8230; two canvas click based &#8230; number &#8230; or &#8230; datetime sequenced text annotation canvas placements &#8230; and you&#8217;ll probably guess the nature of our interest if we direct you to HTML Square Horizontal Rule Image &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/canvas-annotations-and-datetime-or-number-sequences-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":[1832,184,409,1847,576,578,3321,652,752,997,1895,1254,1319],"class_list":["post-49245","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-annotation","tag-canvas","tag-external-javascript","tag-feedback","tag-html","tag-html5","tag-increment","tag-javascript","tag-mathematics","tag-programming","tag-sequence","tag-text","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49245"}],"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=49245"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49245\/revisions"}],"predecessor-version":[{"id":49250,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49245\/revisions\/49250"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}