{"id":43128,"date":"2019-01-22T03:01:27","date_gmt":"2019-01-21T17:01:27","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43128"},"modified":"2019-01-22T05:24:31","modified_gmt":"2019-01-21T19:24:31","slug":"flowchart-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-primer-tutorial\/","title":{"rendered":"Flowchart Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html\"><img decoding=\"async\" style=\"border: 15px solid pink;float:left;\" alt=\"Flowchart Primer Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.jpg\" title=\"Flowchart Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Flowchart Primer Tutorial<\/p><\/div>\n<p>A few things have come together recently to make it good to now tackle a project we&#8217;ve wanted to try for some time, that being <a target=_blank title='Flowchart information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Flowchart'>Flowcharts<\/a>.  We&#8217;ve got to the &#8220;ephemeral&#8221; stage of development today, being able to display in a web application, on the screen (thanks to <a target=_blank title='Enjoy CSS' href='https:\/\/enjoycss.com\/'>Online CSS3 Code Generator With a Simple Graphical Interface &#8211; EnjoyCSS<\/a>), displaying &#8230;<\/p>\n<ul>\n<li>oval for &#8220;Start&#8221; and &#8220;End&#8221;<\/li>\n<li>rectangle for statements or actions<\/li>\n<li>diamond for questions controlling the &#8220;flow&#8221; in &#8220;flowchart&#8221; &#8230; and connecting these &#8230;<\/li>\n<li>lines that have a red bit at one end (serving as an arrow &#8230; place another line next to the last going the other way and that could be a connector with two arrows)<\/li>\n<\/ul>\n<p> &#8230; and it may interest you to know that despite recent SVG work for us here at this blog, and lots of HTML5 canvas element work in the past, we use neither of these two concepts here today, and still think in days to come we can add &#8220;accountability&#8221; into the mix with today&#8217;s HTML and CSS and Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html_GETME\" title=\"flowchart.html\">flowchart.html<\/a> Flowchart web application  you can try at <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html\" title=\"Click picture\">this live run<\/a> link.<\/p>\n<p>What helped recently then?<\/p>\n<ul>\n<li>that recent <a target=_blank title='HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-image-reveal-game-tutorial\/'>HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial<\/a> series of blog postings taught us lots about &#8230;\n<ol>\n<li>trapping the x and y of mouse or touch clicks (albeit that we do this quite often) &#8230; that are then used for &#8230;<\/li>\n<li>drawing lines between mouse\/touch click positions (with HTML hr and\/or div elements)<\/li>\n<\/ol>\n<\/li>\n<li>as we mentioned above, reading <a target=_blank title='Enjoy CSS' href='https:\/\/enjoycss.com\/'>Online CSS3 Code Generator With a Simple Graphical Interface &#8211; EnjoyCSS<\/a> got us being able to draw all these things with no imagery involved &#8230; just CSS<\/li>\n<\/ul>\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='#43128' onclick='var dv=document.getElementById(\"d43128\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43128' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A few things have come together recently to make it good to now tackle a project we&#8217;ve wanted to try for some time, that being Flowcharts. We&#8217;ve got to the &#8220;ephemeral&#8221; stage of development today, being able to display in &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-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":[199,281,2812,342,1613,2814,576,652,2598,2813,2132],"class_list":["post-43128","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-chart","tag-css","tag-diamond","tag-div","tag-flowchart","tag-hr","tag-html","tag-javascript","tag-line","tag-oval","tag-rectangle"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43128"}],"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=43128"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43128\/revisions"}],"predecessor-version":[{"id":43130,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43128\/revisions\/43130"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}