{"id":17614,"date":"2015-10-08T05:01:46","date_gmt":"2015-10-07T19:01:46","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=17614"},"modified":"2015-10-07T17:46:32","modified_gmt":"2015-10-07T07:46:32","slug":"htmljavascript-broadcast-and-listen-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-broadcast-and-listen-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Broadcast and Listen Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Broadcast and Listen Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.jpg\" title=\"HTML\/Javascript Broadcast and Listen Primer Tutorial\" id='balo' onmouseover=\" this.src=this.src.replace('.jpg','.xgif').replace('.gif','.xjpg').replace('.x','.'); \"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Broadcast and Listen Primer Tutorial<\/p><\/div>\n<p>The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management.<\/p>\n<p>In today&#8217;s tutorial we mainly use the <a target=_blank href='http:\/\/www.w3schools.com\/tags\/canvas_stroketext.asp' title='HTML5 Canvas strokeText() method information from w3schools ... thanks'>strokeText<\/a> function to create a webpage where you can either be a &#8230;<\/p>\n<ul>\n<li>Broadcaster (of wording content) &#8230; or &#8230;<\/li>\n<li>Listener (to wording content)<\/li>\n<\/ul>\n<p> &#8230; and we use the HTML canvas element as a &#8220;videogame captioner&#8221; (somehow we think of the word &#8220;teletext&#8221;<sub>er<\/sub>) type of letter by letter presenter of the wording.<\/p>\n<p>Today&#8217;s tutorial also features some Javascript form validation using the HTML form element&#8217;s <a target=_blank title='Javascript onsubmit event information frpm w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp'><i>onsubmit<\/i><\/a> event logic to say, with client-side Javascript (even though the HTML form&#8217;s <a target=_blank title='HTML form element method property information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_form_method.asp'>method<\/a> is POST), whether a broadcaster&#8217;s &#8220;words&#8221; fit the bill.<\/p>\n<p>This web application is in &#8220;hugely&#8221; (just &#8220;massively&#8221;) early days, and so we know there is so much to do.  Is it?<\/p>\n<ul>\n<li><a target=_blank title='Email information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Email'>email<\/a><\/li>\n<li><a target=_blank title='Chat information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Online_chat'>chat<\/a><\/li>\n<\/ul>\n<p>We&#8217;re not exactly sure, but we&#8217;re working on it.  Email and chat require user registration.  We only have the Broadcaster optionally registering up to now.  Email can have attachments.  We have no such facility here yet.  Chat is all about the here and now, as you may get a handle on by visiting our RJM Programming hosted phpChat website at <a target=_blank title='RJM Programming chat website via phpChat' href='http:\/\/www.rjmprogramming.com.au\/plus'>RJM Programming phpChat website<\/a>, while today&#8217;s web application is more about the past, the way things sit just now.  Chat is a multi-user interactive communicator using <a target=_blank title='Network socket information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Network_socket'>sockets<\/a> to facilitate inter-process communications, and we were not going to those lengths today &#8230; but do have ideas here for a product called &#8220;Broadcast Listener&#8221; or perhaps RRPC (Really Really Patient Chat).  We&#8217;ll see.<\/p>\n<p>The code consists of &#8230;<\/p>\n<ul>\n<li>HTML\/Javascript supervisor called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html_GETME' title='broadcast_listen.html'>broadcast_listen.html<\/a><\/li>\n<li>PHP <a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.php_GETME' title='broadcast_listen.php'>broadcast_listen.php<\/a> (aka our recent <a target=_blank title='\"Client Pre-emptive Iframe\" at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client-pre-emptive-iframe'>&#8220;Client Pre-emptive Iframe&#8221;<\/a> concept)<\/li>\n<li>HTML everchanging broadcast data iframe child called <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_list.html' title='broadcast_list.html'>broadcast_list.html<\/a> (nuts and bolts of which can be gleaned via Web Browser&#8217;s View-&gt;Page Source)<\/li>\n<\/ul>\n<p>Within that <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html_GETME' title='broadcast_listen.html'>broadcast_listen.html<\/a> code you&#8217;ll see an innocuous line of code &#8230;<\/p>\n<p><code><br \/>\n      nextx+=8;<br \/>\n<\/code><\/p>\n<p> &#8230; that is moving the X co-ordinate along in the &#8220;teletext&#8221;<sub>er<\/sub> (ie. to the next letter).  To make a &#8220;videogame captioner&#8221; act like one you need to not slap the whole text onto the HTML canvas all at once, but instead, do it one letter at a time, and delay the process a bit between letters.  So we will have trouble making this look good for fonts that are not <a target=_blank title='Monospaced font information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Monospaced_font'>monospaced<\/a> (or fixed width) like <a target=_blank title='Courier New font information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Courier_%28typeface%29#Courier_New'>Courier New<\/a> (which we use today in 14px form).<\/p>\n<p>You may want to read more at <a target=_blank title='HTML Canvas Reference' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>HTML Canvas Reference<\/a> as a generic reference, or here, at the tutorial <a target=_blank title='javascript - How do I add a simple onClick event handler to a canvas element? - Stack Overflow' href='http:\/\/stackoverflow.com\/questions\/9880279\/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element'>javascript &#8211; How do I add a simple onClick event handler to a canvas element? &#8211; Stack Overflow<\/a>.<\/p>\n<p>As you can imagine, this HTML canvas element, new to HTML5, can be very useful for some practical client-side web functionality.<\/p>\n<p>We hope you enjoy this communication tutorial <a target=_blank title='Canvas HTML element live run tutorial'  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/broadcast_listen.html\">live run<\/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='#d17614' onclick='var dv=document.getElementById(\"d17614\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/?tag=email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d17614' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Canvas HTML element tag can be used as the container to draw graphics on the fly usually via the use of Javascript functions for rendering and event management. In today&#8217;s tutorial we mainly use the strokeText function to create &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-broadcast-and-listen-primer-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":[1710,184,200,1709,380,453,576,587,652,1711,1712,932,997,1319],"class_list":["post-17614","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-broadcast","tag-canvas","tag-chat","tag-communication","tag-email","tag-form-validation","tag-html","tag-iframe","tag-javascript","tag-listen","tag-onsubmit","tag-php","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17614"}],"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=17614"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17614\/revisions"}],"predecessor-version":[{"id":17625,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/17614\/revisions\/17625"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=17614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=17614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=17614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}