{"id":43277,"date":"2019-01-30T03:01:45","date_gmt":"2019-01-29T17:01:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43277"},"modified":"2019-01-30T16:15:11","modified_gmt":"2019-01-30T06:15:11","slug":"venn-diagrams-onclick-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/venn-diagrams-onclick-tutorial\/","title":{"rendered":"Venn Diagrams Onclick Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html?venn=y\"><img decoding=\"async\" style=\"border: 15px solid pink;float:left;\" alt=\"Venn Diagrams Onclick Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/venn_diagrams.jpg\" title=\"Venn Diagrams Onclick Tutorial\" \/><\/a><p class=\"wp-caption-text\">Venn Diagrams Onclick Tutorial<\/p><\/div>\n<p>We&#8217;ve long been interested in <a target=_blank title='Venn Diagrams information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Venn_diagram'>Venn Diagrams<\/a>, that great mathematical tool we learnt about at primary school in Queensland in Australia to aid with the understanding of set theory, and the last foray on this topic involved the wonderful HTML5 canvas element when we presented the <a target=_blank title='HTML\/Javascript\/PHP Canvas Venn Diagram Import Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascriptphp-canvas-venn-diagram-import-tutorial\/'>HTML\/Javascript\/PHP Canvas Venn Diagram Import Tutorial<\/a>.  Fast forward to more recent times with the <a title='Flowchart Colours Tutorial' href='#fct'>Flowchart Colours Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-colours-tutorial\/'><p>\n&#8230; background image via (\u2018 \/browse\u2019 suffix) browse button upload of local image file (thanks to this great link) or (via absolute) image URL<br \/>\n\u2026 and that last piece of functionality had us sorely tempted to invite users to use this web application for far more than just Flowcharts.\n<\/p><\/blockquote>\n<p> &#8230; but we started thinking about &#8230;<\/p>\n<ul>\n<li>Flowcharts &#8230; and &#8230;<\/li>\n<li>Venn Diagrams<\/li>\n<\/ul>\n<p> &#8230; together, from the point of view of a &#8220;basically lazy developer&#8221; who is always looking for a leg up from one project to the next, or to another &#8220;limb&#8221; of an existing one.  We chose <b>&#8220;limb&#8221; of an existing one<\/b> and have added onto the original Flowchart web application, treating Flowcharts and Venn Diagrams as peers for each other, allowing the navigation from one to the other via an additional header input type=button arrangement.<\/p>\n<p>Generally speaking, you integrate this way when a lot of useful design elements have commonality.  Take a look at our assessment of this below.<\/p>\n<table style='width:100%;'>\n<tr>\n<th colspan=2>Flowcharts and Venn Diagrams<\/th>\n<\/tr>\n<tr>\n<th>Similarities<\/th>\n<th>Points of Difference<\/th>\n<\/tr>\n<tr>\n<td>Both display graphical elements imaginable in CSS.<\/td>\n<td>Venn Diagrams have no need for link lines.<\/td>\n<\/tr>\n<tr>\n<td>Both are suitable for emailing and saving.<\/td>\n<td>Venn Diagrams need a title to explain.<\/td>\n<\/tr>\n<tr>\n<td>Both benefit from graphical element annotation.<\/td>\n<td>Venn Diagrams can benefit from variable user controlled circle sizing.<\/td>\n<\/tr>\n<tr>\n<td>Both benefit from user colour control.<\/td>\n<td>Venn Diagrams can benefit from an initial variety to background colour.<\/td>\n<\/tr>\n<tr>\n<td>Both benefit from user controlled element placement via body onclick event.<\/td>\n<td>Venn Diagram existing element onclick logic has to allow for the deliberately overlapping scenario.<\/td>\n<\/tr>\n<\/table>\n<p>In doing this exercise, notice how the Similarities are much more generic and overarching than (the more nitpicky) Points of Difference?  This is an indication that the &#8220;limb of&#8221; approach could well succeed.<\/p>\n<p>To examine the implications of that basis for integration coding, take a look at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html---GETME\" title=\"flowchart.html\">the changed<\/a> HTML and CSS and Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html---GETME\" title=\"flowchart.html\">flowchart.html<\/a> (working with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.php-GETME\" title=\"flowchart.php\">the changed<\/a> PHP <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.php-GETME\" title=\"flowchart.html\">flowchart.php<\/a>) Flowchart, and now Venn Diagrams, functionality you can try at <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html\" title=\"Click picture\">this live run<\/a> link.  We would like to thank <a target=_blank href='https:\/\/www.ck12.org\/probability\/venn-diagrams\/lesson\/Probability-Using-a-Venn-Diagram-and-Conditional-Probability-ALG-II\/' title='Useful link'>this excellent link<\/a> for ideas regarding our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/venn_diagrams.jpg\">tutorial picture<\/a> today.<\/p>\n<hr>\n<p id='fct'>Previous relevant <a target=_blank title='Flowchart Colours Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-colours-tutorial\/'>Flowchart Colours 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\/flowchart.html\"><img decoding=\"async\" style=\"border: 15px solid pink;float:left;\" alt=\"Flowchart Colours Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart_colours.jpg\" title=\"Flowchart Colours Tutorial\" \/><\/a><p class=\"wp-caption-text\">Flowchart Colours Tutorial<\/p><\/div>\n<p>The last <a title='Flowchart Sharing Tutorial' href='#fst'>Flowchart Sharing Tutorial<\/a> regarding our Flowcharts web application was a <b>genericization step<\/b>, in a development cycle, that for this project has gone, so far &#8230;<\/p>\n<ul>\n<li>proof of concept &#8230; the &#8220;ephemeral&#8221; stage of the Primer tutorial<\/li>\n<li><b>sharing mechanism<\/b>  &#8230; the &#8220;email and save&#8221; stage of the Sharing tutorial<\/li>\n<li>aesthetics and user control &#8230; the &#8220;style&#8221; push we call the Colours tutorial &#8230;<\/li>\n<\/ul>\n<p> &#8230; but this last work, a lot of which is shown in our gobbledegooky <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart_colours.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> allows the user additional control over flowchart &#8230;<\/p>\n<ul>\n<li>undo and redo functionality <font size=1>(for those unintentional mistakes)<\/font><br \/>\n<code><br \/>\nvar idarr=[];  \/\/ wherever an element is created we ... idarr.push([thatElement's].id);  undoid=eval(-1 + idarr.length);<br \/>\nvar undoid=-1;<br \/>\nvar redoid=-1;<br \/>\n<br \/>\nfunction doundo() {   \/\/ undo button onclick points here<br \/>\n       notc();<br \/>\n       if (undoid &gt;= 0) {<br \/>\n         redoid=undoid;<br \/>\n         document.getElementById(idarr[undoid]).style.display='none';<br \/>\n         document.getElementById('iredo').style.display='inline-block';<br \/>\n         undoid--;<br \/>\n         if (undoid &lt; 0) {<br \/>\n           document.getElementById('iundo').style.display='none';<br \/>\n         }<br \/>\n       }<br \/>\n}<br \/>\n<br \/>\nfunction doredo() {  \/\/ redo button onclick points here<br \/>\n       notc();<br \/>\n       if (redoid &gt;= 0 && redoid &lt; idarr.length) {<br \/>\n         undoid=redoid;<br \/>\n         document.getElementById(idarr[redoid]).style.display='block';<br \/>\n         document.getElementById('iundo').style.display='inline-block';<br \/>\n         redoid++;<br \/>\n       }<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<li>background colour control with colour pickers (HTML input type=color type elements) and (a backup) HTML div contenteditable=true and prompt window methods<\/li>\n<li>background image via (&#8216; \/browse&#8217; suffix) browse button upload of local image file (thanks to this <a target=_blank href='http:\/\/www.html5rocks.com\/en\/tutorials\/file\/dndfiles\/' title='Great link'>great link<\/a>) or (via absolute) image URL<\/li>\n<\/ul>\n<p> &#8230; and that last piece of functionality had us sorely tempted to invite users to use this web application for far more than just Flowcharts.  That last functionality means you can place labelled rectangles with slightly transparent background images or non-labelled rectangles with fully opaque background images all over your webpage (via entries with a space followed by &#8216;\/browse&#8217; or an absolute URL), and as you may imagine, you can create effects that are vastly different to a flowchart here, should you wish.<\/p>\n<p>Today <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html--GETME\" title=\"flowchart.html\">the changed<\/a> 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 has that new user control 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<hr>\n<p id='fst'>Previous relevant <a target=_blank title='Flowchart Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-sharing-tutorial\/'>Flowchart Sharing 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\/flowchart.html\"><img decoding=\"async\" style=\"border: 15px solid pink;float:left;\" alt=\"Flowchart Sharing Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart_sharing.jpg\" title=\"Flowchart Sharing Tutorial\" \/><\/a><p class=\"wp-caption-text\">Flowchart Sharing Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Flowchart Primer Tutorial' href='#fpt'>Flowchart Primer Tutorial<\/a> was the &#8220;ephemeral&#8221; prelude to today&#8217;s &#8230;<\/p>\n<ul>\n<li>sharing &#8230; or what we like to think of in terms of &#8230;<\/li>\n<li>accountability<\/li>\n<\/ul>\n<p> &#8230; drive to our Flowchart web application.  We do that, not by needing HTTP Cookie or Web Storage or any database or flat file usage.  That last one, &#8220;flat file&#8221;, though, is a clue.  We add stored information into a new PHP <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.php_GETME\" title=\"flowchart.php\">flowchart.php<\/a> &#8230;<\/p>\n<ul>\n<li>sometimes supervisor &#8230; can be called in a way to absorb the HTML like with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.php\" title='Another way'>this link<\/a><\/li>\n<li>sometimes helper &#8230; can be called in a child iframe way to add user saved entries dynamically creating a dropdown in the HTML<\/li>\n<li>sometimes emailer &#8230; can be called to share via email a Flowchart snapshot (where HTML and CSS are allowed in email attachments, and we can share this way without the need for Javascript (which is often blocked by email client programs) &#8230; just)<\/li>\n<li>sometimes saver &#8230; can be called to save within itself a user named Flowchart snapshot which can be recalled only by that same user and web browser combination (replacing any HTTP Cookie or Web Storage intersessional talent requirements)<\/li>\n<\/ul>\n<p> &#8230; of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html-GETME\" title=\"flowchart.html\">that changed<\/a> 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 whose new sharing functionality 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<hr>\n<p id='fpt'>Previous relevant <a target=_blank title='Flowchart Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-primer-tutorial\/'>Flowchart Primer 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\/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<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='#43140' onclick='var dv=document.getElementById(\"d43140\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sharing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43140' 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='#43201' onclick='var dv=document.getElementById(\"d43201\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/undo\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43201' 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='#43277' onclick='var dv=document.getElementById(\"d43277\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43277' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve long been interested in Venn Diagrams, that great mathematical tool we learnt about at primary school in Queensland in Australia to aid with the understanding of set theory, and the last foray on this topic involved the wonderful HTML5 &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/venn-diagrams-onclick-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":[2098,126,199,224,281,2812,342,380,1613,1839,2814,576,614,652,2598,752,2813,2132,1843,2821,1124,1133,1137,1168,2167,1842,1891,2820],"class_list":["post-43277","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-accountability","tag-background","tag-chart","tag-colour","tag-css","tag-diamond","tag-div","tag-email","tag-flowchart","tag-genericization","tag-hr","tag-html","tag-integration","tag-javascript","tag-line","tag-mathematics","tag-oval","tag-rectangle","tag-redo","tag-set","tag-set-theory","tag-share","tag-sharing","tag-software-integration","tag-title","tag-undo","tag-user","tag-venn-diagrams"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43277"}],"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=43277"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43277\/revisions"}],"predecessor-version":[{"id":43323,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43277\/revisions\/43323"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}