{"id":42471,"date":"2018-12-22T03:01:45","date_gmt":"2018-12-21T17:01:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=42471"},"modified":"2018-12-21T12:54:03","modified_gmt":"2018-12-21T02:54:03","slug":"html-square-horizontal-rule-tracing-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-primer-tutorial\/","title":{"rendered":"HTML Square Horizontal Rule Tracing Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.jpg\" title=\"HTML Square Horizontal Rule Tracing Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Primer Tutorial<\/p><\/div>\n<p>One sad thing about today&#8217;s blog posting title is it gives the game away.   We&#8217;re tackling a proof of concept web application for a future venture.  We want to be able to draw a grid of lines (or you could see them as matches) and we&#8217;ll want to &#8230;<\/p>\n<ul>\n<li>graphically present them (ie. grid square border lines (or matches)) around the edges of each grid square &#8230; and &#8230;<\/li>\n<li>graphically present vertices at match end points and half way between, and well as in the middle of squares &#8230; then let the user &#8230;<\/li>\n<li>click\/touch a match &#8230; then &#8230;<\/li>\n<li>click\/touch two vertices to reposition that match to the clicked vertex positioning<\/li>\n<\/ul>\n<p>Now, it seems to me, off the top of the head, you could proceed along the lines of &#8230;<\/p>\n<ul>\n<li>HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element graphics &#8230; or <\/li>\n<li><a target=_blank title='SVG information from w3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp'>SVG<\/a> graphics &#8230; but we prefer <font size=1> &#8230; you guessed it<\/font> &#8230; <\/li>\n<li><a target=_blank title='HTML hr element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_hr.asp'>HR<\/a> (Horizontal Rule) HTML elements, transformed as required, to suit our purposes<\/li>\n<\/ul>\n<p>Interested?!  Why not try the HTML\/Javascript\/CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html_GETME\">square_hr_tracing.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html\" title=\"Click picture\">live run<\/a> to see what we mean here.<\/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='#d42471' onclick='var dv=document.getElementById(\"d42471\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42471' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>One sad thing about today&#8217;s blog posting title is it gives the game away. We&#8217;re tackling a proof of concept web application for a future venture. We want to be able to draw a grid of lines (or you could &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-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":[281,541,2298,2770,576,652,2598,2772,997,1986,1071,2771,1298,1300,1319],"class_list":["post-42471","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-css","tag-graphics","tag-grid","tag-horizontal-rule","tag-html","tag-javascript","tag-line","tag-match","tag-programming","tag-proof-of-concept","tag-rotate","tag-square","tag-transform","tag-translate","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42471"}],"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=42471"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42471\/revisions"}],"predecessor-version":[{"id":42476,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42471\/revisions\/42476"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=42471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=42471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=42471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}