{"id":65728,"date":"2024-11-24T03:01:00","date_gmt":"2024-11-23T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=65728"},"modified":"2024-11-24T06:54:51","modified_gmt":"2024-11-23T20:54:51","slug":"regional-text-google-chart-text-onclick-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/regional-text-google-chart-text-onclick-tutorial\/","title":{"rendered":"Regional Text Google Chart Text Onclick Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Regional Text Google Chart Text Onclick Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_text_onclick.jpg\" title=\"Regional Text Google Chart Text Onclick Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Regional Text Google Chart Text Onclick Tutorial<\/p><\/div>\n<p>The SVG elements in the <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Charts<\/a> subplayer, for Map Chart option, in our latest Regional Maps web application of interest, featuring in yesterday&#8217;s <a title='Regional Text Google Chart Text Tooltip Tutorial' href='#rtgcttt'>Regional Text Google Chart Text Tooltip Tutorial<\/a>, behave, for the most part, as far as Javascript DOM ideas go, like regular HTML elements, with their event-driven programming capabilities.<\/p>\n<p>And so, getting past &#8220;the look&#8221; of them, we turn our attention today, to the &#8220;way they behave&#8221; via &#8230;<\/p>\n<ul>\n<li>event &#8230; in our case <i>onclick<\/i> event &#8230; logics &#8230; pointing to &#8230;<\/li>\n<li>Javascript &#8230; largely using &#8230;<\/li>\n<li>DOM &#8230; <a target=\"_blank\" title='Javascript DOM information from W3schools' href='https:\/\/www.w3schools.com\/js\/js_htmldom.asp' rel=\"noopener\">Document Object Model<\/a><\/li>\n<\/ul>\n<p> &#8230; modus operandi, making those regional text parts to these Regional Maps spring to life, and become more useful, and now capable of navigating a user to relevant &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Google Maps' href='\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> &#8230;<\/li>\n<li><a target=\"_blank\" title='Google Maps' href='\/\/maps.google.com' rel=\"noopener\">Google Maps<\/a><\/li>\n<\/ul>\n<p> &#8230; resources, that latter one accessed on a double click, but not needing the <i>ondblclick<\/i> event, just checking for a second call, in a row, of that <i>onclick<\/i> event Javascript function &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var lastwwoo='';<br \/>\n  <br \/>\n  function wowox() {<br \/>\n    var latlongstuffs=[],alatis='',alongis='',suggm='';<br \/>\n    <br \/>\n    if (lastwwoo != '\/\/wikipedia.org\/wiki\/' + encodeURIComponent(event.target.innerHTML.split('&lt;')[0].replace(\/\\ \/g,'_').replace(\/\\+\/g,'_'))) {<br \/>\n    lastwwoo='\/\/wikipedia.org\/wiki\/' + encodeURIComponent(event.target.innerHTML.split('&lt;')[0].replace(\/\\ \/g,'_').replace(\/\\+\/g,'_'));<br \/>\n    window.open('\/\/wikipedia.org\/wiki\/' + encodeURIComponent(event.target.innerHTML.split('&lt;')[0].replace(\/\\ \/g,'_').replace(\/\\+\/g,'_')),'_blank','top=50,left=50,height=600,width=600');<br \/>\n    } else {<br \/>\n    latlongstuffs=document.head.innerHTML.split(',' + String.fromCharCode(39) + event.target.innerHTML.split('&lt;')[0] + String.fromCharCode(39) + ',2]');<br \/>\n    <br \/>\n    if (eval('' + latlongstuffs.length) &gt; 1) {<br \/>\n    alatis=('+' + latlongstuffs[0].split('[')[eval(-1 + latlongstuffs[0].split('[').length)].split(',')[0]).replace('+-','-');<br \/>\n    alongis=('+' + latlongstuffs[0].split('[')[eval(-1 + latlongstuffs[0].split('[').length)].split(',')[1]).replace('+-','-');<br \/>\n    \/\/suggm='\/\/maps.google.com\/maps?z=11&t=m&q=loc:' + alatis + alongis;<br \/>\n    \/\/suggm='\/\/earth.google.com\/web\/@' + alatis + alongis + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r';<br \/>\n    suggm='\/\/maps.google.com\/maps?q=' + alatis.replace('+','') + ',' + alongis.replace('+','');<br \/>\n    if (lastwwoo != suggm) {<br \/>\n    lastwwoo=suggm;<br \/>\n    window.open(suggm,'_blank','top=60,left=60,height=580,width=920');<br \/>\n    }<br \/>\n    <br \/>\n    }<br \/>\n    <br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>It also occurred to us we could improve on the &#8220;strike rate&#8221; shading more &#8220;island based country&#8221; parts of country boundaries behind our Regional Map (SVG) text elements because we had all those <font color=blue>extra text anchor positions to check polygons against<\/font> &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  <font color=blue>var tarray=[]; \/\/ elsewhere filled with SVG text element objects<\/font><br \/>\n  <br \/>\n  function pointInPolygon(polygon, point) { \/\/ thanks to https:\/\/community.appinventor.mit.edu\/t\/geofence-check-if-a-point-is-inside-a-polygon-javascript-map\/57091<br \/>\n    var odd = false<font color=blue>, tar=0, worryonthis=false, jtar=0, excludethis=false, excludeall=false<\/font>;<br \/>\n    <font color=blue>var inlisti=['&gt;Jawa&lt;'];<br \/>\n    var exlisti=['&gt;Champasak'];<br \/>\n    var callitoffi=['&gt;Attapu'];<\/font><br \/>\n    for (var i = 0, j = polygon.length - 1; i &lt; polygon.length; i++) {<br \/>\n        if (((polygon[i][1] &gt; point[1]) !== (polygon[j][1] &gt; point[1]))<br \/>\n            && (point[0] &lt; ((polygon[j][0] - polygon[i][0]) * (point[1] - polygon[i][1]) \/ (polygon[j][1] - polygon[i][1]) + polygon[i][0]))) {<br \/>\n            odd = !odd;<br \/>\n        }<br \/>\n        j = i;<br \/>\n    }<br \/>\n    <font color=blue>if (!odd && !doingtar) {<br \/>\n     if (eval('' + tarray.length) &gt; 0) {<br \/>\n       doingtar=true;<br \/>\n       excludeall=false;<br \/>\n       for (jtar=0; jtar&lt;inlisti.length; jtar++) {<br \/>\n           if (tarray[tar].outerHTML.indexOf(callitoffi[jtar]) != -1) {<br \/>\n             excludeall=true;<br \/>\n           }<br \/>\n       }<br \/>\n       if (!excludeall) {<br \/>\n       for (tar=0; tar&lt;tarray.length; tar++) {<br \/>\n         worryonthis=false;<br \/>\n         excludethis=false;<br \/>\n         for (jtar=0; jtar&lt;inlisti.length; jtar++) {<br \/>\n           if (tarray[tar].outerHTML.indexOf(exlisti[jtar]) != -1) {<br \/>\n             excludethis=true;<br \/>\n           }<br \/>\n         }<br \/>\n         if (!excludethis) {<br \/>\n         for (jtar=0; jtar&lt;inlisti.length; jtar++) {<br \/>\n           if (tarray[tar].outerHTML.indexOf(inlisti[jtar]) != -1) {<br \/>\n             worryonthis=true;<br \/>\n           }<br \/>\n         }<br \/>\n         odd=pointInPolygon(polygon, eval('[' + tarray[tar].outerHTML.split('x=\\\"')[1].split('\\\"')[0] + ',' + tarray[tar].outerHTML.split('y=\\\"')[1].split('\\\"')[0] + ']'));<br \/>\n         if (odd) {<br \/>\n          doingtar=false;<br \/>\n          return odd;<br \/>\n         } else if (worryonthis) {<br \/>\n          odd=pointInPolygon(polygon, eval('[' + eval(-8 + eval('' + tarray[tar].outerHTML.split('x=\\\"')[1].split('\\\"')[0])) + ',' + eval(-8 + eval('' + tarray[tar].outerHTML.split('y=\\\"')[1].split('\\\"')[0])) + ']'));<br \/>\n          if (!odd) {<br \/>\n            odd=pointInPolygon(polygon, eval('[' + eval(8 + eval('' + tarray[tar].outerHTML.split('x=\\\"')[1].split('\\\"')[0])) + ',' + eval(8 + eval('' + tarray[tar].outerHTML.split('y=\\\"')[1].split('\\\"')[0])) + ']'));<br \/>\n          }<br \/>\n          if (!odd) {<br \/>\n            odd=pointInPolygon(polygon, eval('[' + eval(8 + eval('' + tarray[tar].outerHTML.split('x=\\\"')[1].split('\\\"')[0])) + ',' + eval(-8 + eval('' + tarray[tar].outerHTML.split('y=\\\"')[1].split('\\\"')[0])) + ']'));<br \/>\n          }<br \/>\n          if (!odd) {<br \/>\n            odd=pointInPolygon(polygon, eval('[' + eval(-8 + eval('' + tarray[tar].outerHTML.split('x=\\\"')[1].split('\\\"')[0])) + ',' + eval(8 + eval('' + tarray[tar].outerHTML.split('y=\\\"')[1].split('\\\"')[0])) + ']'));<br \/>\n          }<br \/>\n          if (odd) {<br \/>\n           doingtar=false;<br \/>\n           return odd;<br \/>\n          }<br \/>\n         }<br \/>\n         }<br \/>\n       }<br \/>\n       }<br \/>\n       doingtar=false;<br \/>\n       return odd;<br \/>\n     }<br \/>\n    }<\/font><br \/>\n    return odd;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>Again, feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-----------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">geo_chart.php<\/a> used in the Map Chart option of <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">the inhouse web application<\/a> interfacer.<\/p>\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\/regional-text-google-chart-text-onclick-tutorial\/' rel=\"noopener\">Regional Text Google Chart Text Onclick Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rtgcttt'>Previous relevant <a target=\"_blank\" title='Regional Text Google Chart Text Tooltip Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/regional-text-google-chart-text-tooltip-tutorial\/' rel=\"noopener\">Regional Text Google Chart Text Tooltip 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Regional Text Google Chart Text Tooltip Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_text_tooltip.gif\" title=\"Regional Text Google Chart Text Tooltip Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Regional Text Google Chart Text Tooltip Tutorial<\/p><\/div>\n<p>Inherent with the involvement of <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Charts<\/a> in <a title='Regional Text Google Chart Text Configurations Tutorial' href='#rtgctct'>Regional Text Google Chart Text Configurations Tutorial<\/a>&#8216;s web application Map Chart option &#8230;<\/p>\n<ul>\n<li>there will be text clutter, sometimes &#8230; and a &#8230;<\/li>\n<li>font sizing piece of functionality in yesterday&#8217;s <a title='Regional Text Google Chart Text Configurations Tutorial' href='#rtgctct'>Regional Text Google Chart Text Configurations Tutorial<\/a> offered one method of decluttering &#8230; while, today &#8230;<\/li>\n<li><a target=\"_blank\" title='Tooltips information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Tooltip' rel=\"noopener\">tooltips<\/a> &#8230; applied to the SVG <a target=\"_blank\" title='SVG text element information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/text' rel=\"noopener\">text<\/a> elements ( via &lt;<a target=\"_blank\" title='SVG title element information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/title' rel=\"noopener\">title<\/a>&gt;tooltip&lt;\/title&gt; embedded within ) &#8230;<\/li>\n<li>\n<p> &#8230; can be a clientside Javascript methodology on non-mobile platforms to effectively &#8220;see under the clutter&#8221;.<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function addtooltips() {<br \/>\n           var dotooltips=false, tta=[], itta=0, wih='', ihwas='', attc=0, kt=0, twords=[];<br \/>\n           ihwas=document.getElementById('chart_div').innerHTML;<br \/>\n           ihwas+='&lt;text&gt;&lt;\/text&gt;';<br \/>\n           tta=ihwas.split('&lt;\/title&gt;&lt;\/text&gt;');<br \/>\n           if (!dottdone) {<br \/>\n           dottdone=true;<br \/>\n           <br \/>\n           tta=ihwas.split('&lt;\/text&gt;');<br \/>\n           for (itta=0; itta&lt;eval(-1 + tta.length); itta++) {<br \/>\n             if (('&gt;' + tta[itta]).slice(-1) != '&gt;') {<br \/>\n               twords.push(tta[itta].split('&gt;')[eval(-1 + tta[itta].split('&gt;').length)]);<br \/>\n             }<br \/>\n           }<br \/>\n <br \/>\n           for (itta=0; itta&lt;twords.length; itta++) {<br \/>\n             if (('&gt;' + tta[itta]).slice(-1) != '&gt;') {<br \/>\n                  ihwas=ihwas.replace('&gt;' + twords[itta] + '&lt;\/text&gt;', '&gt;' + twords[itta] + '&lt;title&gt;' + twords[itta] + '&lt;\/title&gt;&lt;\/text&gt;');<br \/>\n             }<br \/>\n           }<br \/>\n     <br \/> <br \/>\n     document.getElementById('chart_div').innerHTML=ihwas.replace('&lt;text&gt;&lt;\/text&gt;','');<br \/>\n           }<br \/>\n           if (document.getElementById('ctyflag')) {<br \/>\n             document.getElementById('ctyflag').innerHTML=yorflag('\" . (isset($_GET['shade']) ? $_GET['shade'] : (isset($_POST['shade']) ? $_POST['shade'] : '')) . \"');<br \/>\n           }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>Also we add some form of shading (sometimes all encompassing, sometimes not) within the country boundaries is applied, as well as the inclusion of a small country emoji flag.<\/p>\n<p>So feel free to try <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php----------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php----------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">geo_chart.php<\/a> used in the Map Chart option of <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">the inhouse web application<\/a> interfacer.<\/p>\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\/regional-text-google-chart-text-tooltip-tutorial\/' rel=\"noopener\">Regional Text Google Chart Text Tooltip Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rtgctct'>Previous relevant <a target=\"_blank\" title='Regional Text Google Chart Text Configurations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/regional-text-google-chart-text-configurations-tutorial\/' rel=\"noopener\">Regional Text Google Chart Text Configurations 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Regional Text Google Chart Text Configurations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_better_text.gif\" title=\"Regional Text Google Chart Text Configurations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Regional Text Google Chart Text Configurations Tutorial<\/p><\/div>\n<p>Moving on, and sideways, from yesterday&#8217;s <a title='Regional Text Google Chart Data via Country Code Tutorial' href='#rtgcdcct'>Regional Text Google Chart Data via Country Code Tutorial<\/a>, today, we wanted the user to be able to better control the text look of these <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Charts<\/a> presented with these Regional Maps, as much as anything, starting with &#8230;<\/p>\n<ul>\n<li>control of text font-size (SVG text attribute) &#8230; either + or &#8211; &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n$tminus=\"-\";<br \/>\n$tplus=\"+\";<br \/>\nif (isset($_GET['text']) || isset($_POST['text'])) {<br \/>\n  $tminus=\"&lt;\/a&gt;&lt;a title='Text ... use + then - or vice versa for other text styling' id=atbigger class=dotminus style=text-decoration:none;cursor:pointer; onclick=dotminus(this);&gt;&lt;sup&gt;-&lt;\/sup&gt;\";<br \/>\n  $tplus=\"&lt;\/a&gt;&lt;a title='Text ... use + then - or vice versa for other text styling' id=atsmaller class=dotplus style=text-decoration:none;cursor:pointer; onclick=dotplus(this);&gt;&lt;sup&gt;+&lt;\/sup&gt;\";<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; used &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['width']) && isset($_POST['height']) && isset($_POST['data'])) {<br \/>\n    $smore=\"&lt;a onclick='if (!document.getElementById(\\\"ourw\\\")) { askhw(String.fromCharCode(32)); } else { var qqq=document.getElementById(\\\"ourw\\\"); qqq.style.display=\\\"block\\\"; } ' title='Width?' href='#'&gt;W?&lt;\/a&gt;&nbsp;&nbsp;&lt;a onclick='if (!document.getElementById(\\\"ourw\\\")) { askhw(String.fromCharCode(32)); } else { var qqq=document.getElementById(\\\"ourh\\\"); qqq.style.display=\\\"block\\\"; } ' title='Height?' href='#'&gt;H?&lt;\/a&gt;&nbsp;&nbsp;&lt;a href=# onclick=askhw(1.1); style=display:none; id=abigger title=Bigger&gt;+\" . $tplus . \"&lt;\/a&gt;&nbsp;&nbsp;&lt;a href=# onclick=askhw(0.9); style=display:none; id=asmaller title=Smaller&gt;-\" . $tminus . \"&lt;\/a&gt;&nbsp;&nbsp;\";<br \/>\n  } else if (isset($_GET['width']) && isset($_GET['height']) && isset($_GET['data'])) {<br \/>\n    $smore=\"&lt;a onclick='if (!document.getElementById(\\\"ourw\\\")) { askhw(String.fromCharCode(32)); } else { var qqq=document.getElementById(\\\"ourw\\\"); qqq.style.display=\\\"block\\\"; } ' title='Width?' href='#'&gt;W?&lt;\/a&gt;&nbsp;&nbsp;&lt;a onclick='if (!document.getElementById(\\\"ourw\\\")) { askhw(String.fromCharCode(32)); } else { var qqq=document.getElementById(\\\"ourh\\\"); qqq.style.display=\\\"block\\\"; } ' title='Height?' href='#'&gt;H?&lt;\/a&gt;&nbsp;&nbsp;&lt;a href=# onclick=askhw(1.1); style=display:none; id=abigger title=Bigger&gt;+\" . $tplus . \"&lt;\/a&gt;&nbsp;&nbsp;&lt;a href=# onclick=askhw(0.9); style=display:none; id=asmaller title=Smaller&gt;-\" . $tminus . \"&lt;\/a&gt;&nbsp;&nbsp;\";<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; perhaps helping with decluttering or cluttering &#8230; and as this happened it occurred that &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function dotplus(ost) {<br \/>\n    if (document.getElementById('chart_div').innerHTML.indexOf('&lt;svg ') != -1) {<br \/>\n    if (document.getElementById('chart_div').innerHTML.split('&lt;svg ')[1].indexOf(' font-size=' + String.fromCharCode(34)) != -1) {<br \/>\n    var fszis=document.getElementById('chart_div').innerHTML.split('&lt;svg ')[1].split(' font-size=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0];<br \/>\n    if (eval('' + fszis) &gt; -990) {<br \/>\n      var ihwas=document.getElementById('chart_div').innerHTML;<br \/>\n      while (ihwas.indexOf(' font-size=' + String.fromCharCode(34) + fszis + String.fromCharCode(34)) != -1) {<br \/>\n        ihwas=ihwas.replace(' font-size=' + String.fromCharCode(34) + fszis + String.fromCharCode(34), ' font-size=' + String.fromCharCode(34) + eval(1 + eval('' + fszis)) + String.fromCharCode(34));<br \/>\n      }<br \/>\n      document.getElementById('chart_div').innerHTML=ihwas;<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    var otherost=document.getElementById('' + ost.id.replace('bigger','SMALLER').replace('smaller','BIGGER').toLowerCase());<br \/>\n    if (('' + ost.getAttribute('data-count')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') == '') {<br \/>\n      ost.setAttribute('data-count', '1');<br \/>\n    } else {<br \/>\n      ost.setAttribute('data-count', '' + eval(1 + eval(('' + ost.getAttribute('data-count')).replace(\/^undefined\/g,'').replace(\/^null\/g,''))));<br \/>\n    }<br \/>\n    if (('' + ost.getAttribute('data-count')) == ('' + otherost.getAttribute('data-count'))) {<br \/>\n      setTimeout(othertextideas, 1000);<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function dotminus(ost) {<br \/>\n    if (document.getElementById('chart_div').innerHTML.indexOf('&lt;svg ') != -1) {<br \/>\n    if (document.getElementById('chart_div').innerHTML.split('&lt;svg ')[1].indexOf(' font-size=' + String.fromCharCode(34)) != -1) {<br \/>\n    var fszis=document.getElementById('chart_div').innerHTML.split('&lt;svg ')[1].split(' font-size=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0];<br \/>\n    if (eval('' + fszis) &gt; -990) {<br \/>\n      var ihwas=document.getElementById('chart_div').innerHTML;<br \/>\n      while (ihwas.indexOf(' font-size=' + String.fromCharCode(34) + fszis + String.fromCharCode(34)) != -1) {<br \/>\n        ihwas=ihwas.replace(' font-size=' + String.fromCharCode(34) + fszis + String.fromCharCode(34), ' font-size=' + String.fromCharCode(34) + eval(-1 + eval('' + fszis)) + String.fromCharCode(34));<br \/>\n      }<br \/>\n      document.getElementById('chart_div').innerHTML=ihwas;<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    var otherost=document.getElementById('' + ost.id.replace('bigger','SMALLER').replace('smaller','BIGGER').toLowerCase());<br \/>\n    if (('' + ost.getAttribute('data-count')).replace(\/^undefined\/g,'').replace(\/^null\/g,'') == '') {<br \/>\n      ost.setAttribute('data-count', '1');<br \/>\n    } else {<br \/>\n      ost.setAttribute('data-count', '' + eval(1 + eval(('' + ost.getAttribute('data-count')).replace(\/^undefined\/g,'').replace(\/^null\/g,''))));<br \/>\n    }<br \/>\n    if (('' + ost.getAttribute('data-count')) == ('' + otherost.getAttribute('data-count'))) {<br \/>\n      setTimeout(othertextideas, 1000);<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<li>if a user clicked a &#8211; then a + (or vice versa) that restores the original size &#8230; and so, here, why not present a prompt window way to adjust other SVG generic text attributes &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function othertextideas() {<br \/>\n    var ig=0, fszis='', defblurb='', defans='', vsans='', ihwas='', subsq=0;<br \/>\n    var ideastare=['font-size', 'text-anchor', 'font-family', 'stroke', 'stroke-width', 'fill'];<br \/>\n    var jdeastare=['', '', '', '', '', ''];<br \/>\n    var kdeastare=['', '', '', '', '', ''];<br \/>\n    if (document.getElementById('chart_div').innerHTML.indexOf('&lt;svg ') != -1) {<br \/>\n    for (ig=0; ig&lt;ideastare.length; ig++) {<br \/>\n    if (subsq == 0) {<br \/>\n      subsq=eval('' + document.getElementById('chart_div').innerHTML.indexOf(' ' + ideastare[ig] + '=' + String.fromCharCode(34)));<br \/>\n      if (subsq == -1) { return ''; }<br \/>\n      subsq-=100;<br \/>\n    }<br \/>\n    if (document.getElementById('chart_div').innerHTML.substring(subsq).indexOf(' ' + ideastare[ig] + '=' + String.fromCharCode(34)) != -1) {<br \/>\n      jdeastare[ig]=document.getElementById('chart_div').innerHTML.substring(subsq).split(' ' + ideastare[ig] + '=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0];<br \/>\n      if (jdeastare[ig] != '') {<br \/>\n        defblurb+=' ' + ideastare[ig] + '=' + String.fromCharCode(34) + jdeastare[ig] + String.fromCharCode(34);<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    if (defblurb != '') {<br \/>\n      defans=defblurb;<br \/>\n      vsans=prompt('Change generic text properties as required.', defans);<br \/>\n      if (vsans == null) { vsans=''; }<br \/>\n      for (ig=0; ig&lt;ideastare.length; ig++) {<br \/>\n        if (vsans.indexOf(' ' + ideastare[ig] + '=' + String.fromCharCode(34)) != -1) {<br \/>\n          kdeastare[ig]=vsans.split(' ' + ideastare[ig] + '=' + String.fromCharCode(34))[1].split(String.fromCharCode(34))[0];<br \/>\n        } else {<br \/>\n          kdeastare[ig]=jdeastare[ig];<br \/>\n        }<br \/>\n      }<br \/>\n      for (ig=0; ig&lt;ideastare.length; ig++) {<br \/>\n        if (kdeastare[ig] != jdeastare[ig]) {<br \/>\n          ihwas=document.getElementById('chart_div').innerHTML;<br \/>\n          while (ihwas.indexOf(' ' + ideastare[ig] + '=' + String.fromCharCode(34) + jdeastare[ig] + String.fromCharCode(34)) != -1) {<br \/>\n           ihwas=ihwas.replace(' ' + ideastare[ig] + '=' + String.fromCharCode(34) + jdeastare[ig] + String.fromCharCode(34), ' ' + ideastare[ig] + '=' + String.fromCharCode(34) + kdeastare[ig] + String.fromCharCode(34));<br \/>\n          }<br \/>\n          document.getElementById('chart_div').innerHTML=ihwas;<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php---------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php---------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">geo_chart.php<\/a> used in the Map Chart option of <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">the inhouse web application<\/a> interfacer.<\/p>\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\/new-regional-text-google-chart-data-via-country-code-tutorial\/' rel=\"noopener\">New Regional Text Google Chart Data via Country Code Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rtgcdcct'>Previous relevant <a target=\"_blank\" title='Regional Text Google Chart Data via Country Code Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/regional-text-google-chart-data-via-country-code-tutorial\/' rel=\"noopener\">Regional Text Google Chart Data via Country Code 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Regional Text Google Chart Data on AlmaLinux Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_better_data.gif\" title=\"Regional Text Google Chart Data via Country Code Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Regional Text Google Chart Data via Country Code Tutorial<\/p><\/div>\n<p>It&#8217;s ongoing, but many data related problems with our Regional Map creations got sorted today.  You rarely go wrong with data when it is &#8220;indexed&#8221; by numerical data, but we were required to compare one data set of regional names with another, and when you compare strings with strings, problems are bound to happen on occasions.  We start, instead, not being so stringent on mismatches of names of more than one word, if a first word match is found.  While we sort this out we warn in the prompt window blurb of this, in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------------------------GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------------------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p>User entries can accept a comma separated list of ISO-3166 two letter character codes now, though we prefer to still think in terms of Google Chart Image Chart tendencies with the vertical bar ( ie. | ) syntax.<\/p>\n<p>Another issue happened with apostrophies in the Region Names we have remedied onto yesterday&#8217;s <a title='Regional Text Google Chart Iframe via Country Code Tutorial' href='#rtgcicct'>Regional Text Google Chart Iframe via Country Code Tutorial<\/a>.<\/p>\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\/regional-text-google-chart-data-via-country-code-tutorial\/' rel=\"noopener\">Regional Text Google Chart Data via Country Code Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rtgcicct'>Previous relevant <a target=\"_blank\" title='Regional Text Google Chart Iframe via Country Code Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/regional-text-google-chart-iframe-via-country-code-tutorial\/' rel=\"noopener\">Regional Text Google Chart Iframe via Country Code 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Regional Text Google Chart Iframe on AlmaLinux Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_one_better_window.jpg\" title=\"Regional Text Google Chart Iframe via Country Code Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Regional Text Google Chart Iframe via Country Code Tutorial<\/p><\/div>\n<p>Better than yesterday&#8217;s <a title='Regional Text Google Chart Map Charts via Country Code Tutorial' href='#rtgcmccct'>Regional Text Google Chart Map Charts via Country Code Tutorial<\/a>&#8216;s use of &#8230;<\/p>\n<ul>\n<li>popup windows &#8230; if the recipient URLs share the same domain we prefer &#8230;<\/li>\n<li>iframe<\/li>\n<\/ul>\n<p> &#8230; webpage hosting, because that way you can use that one web browser tab performing a multiple country scenario.  You&#8217;ll see this as a really pronounced improvement on mobile platforms, where the navigating between web browser tabs is harder to manage.<\/p>\n<p>And it occurred to us that the title for yesterday&#8217;s incarnation of the &#8220;multiple country scenario&#8221; <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> was pretty vanilla, and more use can happen if in that title we list country names involved.  Sounds easy, doesn&#8217;t it?  Well, we ran into an issue making the image_venn.html parent here, in an old version of the code, perform suboptimally when called in an iframe, <font color=blue>the fix being<\/font> &#8230;<\/p>\n<p><code><br \/>\nvar vso=null;<br \/>\ntry {<br \/>\nif (window.parent) { <font color=blue>if (parent.document.URL.indexOf('\/image_venn.htm') != -1) { if (1 == 1) { vso=window.self; } else {<\/font>  vso=window.parent;  <font color=blue>}  }<\/font> }<br \/>\n} catch(exc) {<br \/>\nvso=null;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>A few hours of angst trying to figure this out, alas!<\/p>\n<p>Codewise, this needed &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------------------------------GETME\" rel=\"noopener\">a tweaked<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------------------------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php--------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">the less significantly changed<\/a> &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n$mapize=0;<br \/>\n$mapizec='';<br \/>\n$mapwo='';<br \/>\n$maptbit='';<br \/>\nif (isset($_GET['gtimes']) && isset($_GET['data']) && isset($_GET['title'])) {<br \/>\n   if (file_exists($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_GET['gtimes'] . '.html')) {<br \/>\n    $maptbit=explode(';',str_replace('+',' ',urldecode($_GET['title'])))[-1 + sizeof(explode(';',str_replace('+',' ',urldecode($_GET['title']))))];<br \/>\n    $mapizec=file_get_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_GET['gtimes'] . '.html');<br \/>\n    $mapwo=\"\\n top.windowdotopen('\/PHP\/fgc\/mapize_\" . $_GET['gtimes'] . \".html','mcofgc','top=50,left=50,height=550,width=550'); \\n\";<br \/>\n    \/\/$mapwo=\"\\n top.window.open('\/PHP\/fgc\/mapize_\" . $_GET['gtimes'] . \".html','_blank','top=50,left=50,height=550,width=550'); \\n\";<br \/>\n   }<br \/>\n} else if (isset($_POST['gtimes']) && isset($_POST['data']) && isset($_POST['title'])) {<br \/>\n   if (file_exists($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_POST['gtimes'] . '.html')) {<br \/>\n    $maptbit=explode(';',str_replace('+',' ',urldecode($_POST['title'])))[-1 + sizeof(explode(';',str_replace('+',' ',urldecode($_POST['title']))))];<br \/>\n    $mapizec=file_get_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_POST['gtimes'] . '.html');<br \/>\n    $mapwo=\"\\n top.windowdotopen('\/PHP\/fgc\/mapize_\" . $_POST['gtimes'] . \".html','mcofgc','top=50,left=50,height=550,width=550'); \\n\";<br \/>\n    \/\/$mapwo=\"\\n top.window.open('\/PHP\/fgc\/mapize_\" . $_POST['gtimes'] . \".html','_blank','top=50,left=50,height=550,width=550'); \\n\";<br \/>\n   }<br \/>\n}<br \/>\nif (strpos($mapizec, '&lt;title&gt;') !== false && strpos($mapizec, '&lt;\/scr' . 'ipt&gt;') !== false && strpos($mapizec, 'location.href=') === false) {<br \/>\n  $mapize=explode('&lt;', explode(' ', explode('&lt;title&gt;', $mapizec)[1])[0])[0];<br \/>\n  if (isset($_GET['gtimes']) && isset($_GET['data'])) {<br \/>\n     if (strpos($mapizec, '#00 ') !== false) {<br \/>\n     $mapizec=str_replace('#00 ','#' . $maptbit . ' ', $mapizec);<br \/>\n     } else if (strpos($mapizec, ', 00,') !== false) {<br \/>\n     $mapizec=str_replace(', 00,',', ' . $maptbit . ',', $mapizec);<br \/>\n     } else if (strpos($mapizec, ',00 ') !== false) {<br \/>\n     $mapizec=str_replace(', 00 ',', ' . $maptbit . ' ', $mapizec);<br \/>\n     }<br \/>\n     $mapizec=str_replace(' Regions#',', 00 Regions#',str_replace('&lt;\/scr' . 'ipt&gt;', \"\\n bigurl+=encodeURIComponent(\\\",\" . str_replace('|',',',str_replace(',2]',']',str_replace('+',' ',urldecode($_GET['data'])))) . \"\\\"); \\n\" . '&lt;\/scr' . 'ipt&gt;', $mapizec));<br \/>\n  } else if (isset($_POST['gtimes']) && isset($_POST['data'])) {<br \/>\n     if (strpos($mapizec, '#00 ') !== false) {<br \/>\n     $mapizec=str_replace('#00 ','#' . $maptbit . ' ', $mapizec);<br \/>\n     } else if (strpos($mapizec, ', 00,') !== false) {<br \/>\n     $mapizec=str_replace(', 00,',', ' . $maptbit . ',', $mapizec);<br \/>\n     } else if (strpos($mapizec, ', 00 ') !== false) {<br \/>\n     $mapizec=str_replace(', 00 ',', ' . $maptbit . ' ', $mapizec);<br \/>\n     }<br \/>\n     $mapizec=str_replace(' Regions#',', 00 Regions#',str_replace('&lt;\/scr' . 'ipt&gt;', \"\\n bigurl+=encodeURIComponent(\\\",\" . str_replace('|',',',str_replace(',2]',']',str_replace('+',' ',urldecode($_POST['data'])))) . \"\\\"); \\n\" . '&lt;\/scr' . 'ipt&gt;', $mapizec));<br \/>\n  }<br \/>\n  if (isset($_GET['gtimes']) && isset($_GET['data'])) {<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_GET['gtimes'] . '.html', $mapizec);<br \/>\n  } else if (isset($_POST['gtimes']) && isset($_POST['data'])) {<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_POST['gtimes'] . '.html', $mapizec);<br \/>\n  }<br \/>\n  if (sizeof(explode(' bigurl+=', $mapizec)) &gt; $mapize) {<br \/>\n     $mapizec=str_replace('&lt;\/title&gt;', \"&lt;\/title&gt;\\n&lt;meta charset='UTF-8'\/&gt;\\n&lt;scr\" . \"ipt type=text\/javascript src='\/gchartgen.js'&gt;&lt;\/scr\" . \"ipt&gt;\\n\", str_replace('var bigurl=', \"\\n\\n function dothis() { \\n var bigurl=\",  str_replace('&lt;\/scr' . 'ipt&gt;', \"\\n location.href=iftoobig('',bigurl.replace('My%20Regional%20Places',encodeURIComponent(document.title.split('#')[1].replace(', 00','')))); \\n } \\n\\n dothis(); \\n \" . '&lt;\/scr' . 'ipt&gt;', $mapizec)));<br \/>\n  if (isset($_GET['gtimes']) && isset($_GET['data'])) {<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_GET['gtimes'] . '.html', $mapizec);<br \/>\n  } else if (isset($_POST['gtimes']) && isset($_POST['data'])) {<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_POST['gtimes'] . '.html', $mapizec);<br \/>\n  }<br \/>\n  } else {<br \/>\n     $mapwo='';<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php--------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">geo_chart.php<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\" rel=\"noopener\">Geo Chart interfacer<\/a><\/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\/new-regional-text-google-chart-iframe-via-country-code-tutorial\/' rel=\"noopener\">Regional Text Google Chart Iframe via Country Code Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rtgcmccct'>Previous relevant <a target=\"_blank\" title='Regional Text Google Chart Map Charts via Country Code Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/regional-text-google-chart-map-charts-via-country-code-tutorial\/' rel=\"noopener\">Regional Text Google Chart Map Charts via Country Code 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Regional Text Google Chart Map Charts on AlmaLinux Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_im_mc_multiple_yettwomore.jpg\" title=\"Regional Text Google Chart Map Charts via Country Code Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Regional Text Google Chart Map Charts via Country Code Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Regional Text Google Chart Geo Charts via Country Code Tutorial' href='#rtgcgccct'>Regional Text Google Chart Geo Charts via Country Code Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>honed in on single country region code Geo Chart solutions &#8230; but today we turn our attention to &#8230;<\/li>\n<li>honing in on multiple country region codes, the solution we&#8217;ve come up with involves &#8230;\n<ol>\n<li>displays a Geo Chart window regional map for each country &#8230; and &#8230;<\/li>\n<li>displays a combined <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Chart Map Chart' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; because the Google Chart Map Chart can show the whole world yet be able to move around and zoom into particular places on this world map, as well as offering &#8220;onclick&#8221; event logics for each region code pin presented.<\/p>\n<p>Codewise, this needed &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----------------------------GETME\" rel=\"noopener\">a tweaked<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----------------------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a><\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">the significantly changed<\/a> &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n$mapize=0;<br \/>\n$mapizec='';<br \/>\n$mapwo='';<br \/>\nif (isset($_GET['gtimes']) && isset($_GET['data'])) {<br \/>\n   if (file_exists($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_GET['gtimes'] . '.html')) {<br \/>\n    $mapizec=file_get_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_GET['gtimes'] . '.html');<br \/>\n    $mapwo=\"\\n window.open('\/PHP\/fgc\/mapize_\" . $_GET['gtimes'] . \".html','_blank','top=50,left=50,height=550,width=550'); \\n\";  \/\/ used before &lt;\/script&gt; later<br \/>\n   }<br \/>\n} else if (isset($_POST['gtimes']) && isset($_POST['data'])) {<br \/>\n   if (file_exists($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_POST['gtimes'] . '.html')) {<br \/>\n    $mapizec=file_get_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_POST['gtimes'] . '.html');<br \/>\n    $mapwo=\"\\n window.open('\/PHP\/fgc\/mapize_\" . $_POST['gtimes'] . \".html','_blank','top=50,left=50,height=550,width=550'); \\n\";  \/\/ used before &lt;\/script&gt; later<br \/>\n   }<br \/>\n}<br \/>\nif (strpos($mapizec, '&lt;title&gt;') !== false && strpos($mapizec, '&lt;\/scr' . 'ipt&gt;') !== false && strpos($mapizec, 'location.href=') === false) {<br \/>\n  $mapize=explode('&lt;', explode('&lt;title&gt;', $mapizec)[1])[0];<br \/>\n  if (isset($_GET['gtimes']) && isset($_GET['data'])) {<br \/>\n     $mapizec=str_replace('&lt;\/scr' . 'ipt&gt;', \"\\n bigurl+=encodeURIComponent(\\\",\" . str_replace('|',',',str_replace(',2]',']',str_replace('+',' ',urldecode($_GET['data'])))) . \"\\\"); \\n\" . '&lt;\/scr' . 'ipt&gt;', $mapizec);<br \/>\n  } else if (isset($_POST['gtimes']) && isset($_POST['data'])) {<br \/>\n     $mapizec=str_replace('&lt;\/scr' . 'ipt&gt;', \"\\n bigurl+=encodeURIComponent(\\\",\" . str_replace('|',',',str_replace(',2]',']',str_replace('+',' ',urldecode($_POST['data'])))) . \"\\\"); \\n\" . '&lt;\/scr' . 'ipt&gt;', $mapizec);<br \/>\n  }<br \/>\n  if (isset($_GET['gtimes']) && isset($_GET['data'])) {<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_GET['gtimes'] . '.html', $mapizec);<br \/>\n  } else if (isset($_POST['gtimes']) && isset($_POST['data'])) {<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_POST['gtimes'] . '.html', $mapizec);<br \/>\n  }<br \/>\n  if (sizeof(explode(' bigurl+=', $mapizec)) &gt; $mapize) {<br \/>\n     $mapizec=str_replace('&lt;\/title&gt;', \"&lt;\/title&gt;\\n&lt;meta charset='UTF-8'\/&gt;\\n&lt;scr\" . \"ipt type=text\/javascript src='\/gchartgen.js'&gt;&lt;\/scr\" . \"ipt&gt;\\n\", str_replace('var bigurl=', \"\\n\\n function dothis() { \\n var bigurl=\",  str_replace('&lt;\/scr' . 'ipt&gt;', \"\\n location.href=iftoobig('',bigurl); \\n } \\n\\n dothis(); \\n \" . '&lt;\/scr' . 'ipt&gt;', $mapizec)));<br \/>\n  if (isset($_GET['gtimes']) && isset($_GET['data'])) {<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_GET['gtimes'] . '.html', $mapizec);<br \/>\n  } else if (isset($_POST['gtimes']) && isset($_POST['data'])) {<br \/>\n    file_put_contents($_SERVER['DOCUMENT_ROOT'] . '\/PHP\/fgc\/mapize_' . $_POST['gtimes'] . '.html', $mapizec);<br \/>\n  }<br \/>\n  } else {<br \/>\n     $mapwo='';<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php-------------------------------------------------------------------------------------------GETME\" title=\"geo_chart.php\" rel=\"noopener\">geo_chart.php<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php\" title=\"Click picture\" rel=\"noopener\">Geo Chart interfacer<\/a><\/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\/regional-text-google-chart-map-charts-via-country-code-tutorial\/' rel=\"noopener\">Regional Text Google Chart Map Charts via Country Code Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rtgcgccct'>Previous relevant <a target=\"_blank\" title='Regional Text Google Chart Geo Charts via Country Code Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/regional-text-google-chart-geo-charts-via-country-code-tutorial\/' rel=\"noopener\">Regional Text Google Chart Geo Charts via Country Code 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Regional Text Google Chart Geo Charts on AlmaLinux Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gc_ic_mc_regionals_via_gc_gc_iso_3166_only.gif\" title=\"Regional Text Google Chart Geo Charts via Country Code Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Regional Text Google Chart Geo Charts via Country Code Tutorial<\/p><\/div>\n<p>The &#8220;fly in the ointment&#8221; with yesterday&#8217;s <a title='Regional Text Google Chart Geo Charts on AlmaLinux Tutorial' href='#rtgcgcalt'>Regional Text Google Chart Geo Charts on AlmaLinux Tutorial<\/a>, in it&#8217;s thinking, was assuming that &#8230;<\/p>\n<blockquote><p>\nregional ISO-3166 codes\n<\/p><\/blockquote>\n<p> &#8230; for most users, was likely to be a known entity.  Do you know the regional code for the state\/county\/territory\/district\/precinct you live in?  Well, as it so happens, we do, but only because of doing all this work, with the help of <a target=\"_blank\" title=\"Wikipedia\" href='\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> &#8230; yes &#8230; AU-NSW &#8230; but we didn&#8217;t, before all this work.<\/p>\n<p>Even before all this work though, somehow, &#8220;around the traps&#8221; we&#8217;d cottoned onto the fact that &#8230;<\/p>\n<ul>\n<li>(the <a target=\"_blank\" title='ISO_3166-2 information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/ISO_3166-2' rel=\"noopener\">ISO-3166<\/a> country code) &#8220;AU&#8221; was the code for the country Australia (as much as anything because this website&#8217;s domain name is rjmprogramming.com.<strong>au<\/strong>)<\/li>\n<li>and those regional ISO-3166 regional codes all start with the ISO-3166 two character country code<\/li>\n<li>and we&#8217;d already written a <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/regions_via_countries.html\" title=\"Regions via Countries\" rel=\"noopener\">Regions via Countries<\/a> web application<\/li>\n<li>that can help us out (via PHP) &#8230; not this time in an iframe, we&#8217;ve decided, because it&#8217;s faster &#8230; filtering it&#8217;s contents via &#8230;<\/li>\n<li>PHP <a target=\"_blank\" title='PHP shell_exec() method information' href='http:\/\/php.net\/manual\/en\/function.shell-exec.php' rel=\"noopener\">shell_exec<\/a> call like &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n   $ctone=shell_exec('fgrep \"a' . strtoupper($entered) . '-\" ' .  $_SERVER['DOCUMENT_ROOT'] . \"\/HTMLCSS\/regions_via_countries.html\");<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; where that $entered PHP variable contains an ISO-3166 2 letter country code &#8230;<\/li>\n<li>leaving us with data to link a regional ISO-3166 regional code of the form [ISO-3166TwoLetterCountryCode]-[RegionalCodeSuffix] with a Region Name (which is an added bonus not needed to flesh out our URL construction) &#8230;<\/li>\n<li>used in the URL we use to navigate to our derived <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> &#8230;<\/li>\n<li>should the user enter, just, an ISO-3166 2 letter country code<\/li>\n<\/ul>\n<p>It&#8217;s in the &#8220;better blurbed&#8221; prompt window presented off the dropdown Map Chart option selection this can happen.  And we&#8217;ve decided a savvy user might want the next country of interest by adjusting that address bar URL to, say, Albania&#8217;s &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" onmouseover=\"document.getElementById('myalif').src=document.getElementById('myalif').title; document.getElementById('myalif').style.display='block';\" onclick=\"document.getElementById('myalif').src=document.getElementById('myalif').title; document.getElementById('myalif').style.display='block';\" href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html?type=map&#038;chld=AL' title='\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html?type=map&#038;chld=AL' rel=\"noopener\">https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html?type=map&chld=AL<\/a><br \/>\n<\/code><\/p>\n<p><iframe id=myalif title='\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html?type=map&#038;chld=AL'  style=display:none;width:95%;height:600px; src='\/\/www.rjmprogramming.com.au\/About_Us.html'><\/iframe><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/regional-text-google-chart-geo-charts-via-country-code-tutorial\/' rel=\"noopener\">Regional Text Google Chart Geo Charts via Country Code Tutorial<\/a>.<\/p-->\n<hr>\n<p id='rtgcgcalt'>Previous relevant <a target=\"_blank\" title='Regional Text Google Chart Geo Charts on AlmaLinux Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/regional-text-google-chart-geo-charts-on-almalinux-tutorial\/' rel=\"noopener\">Regional Text Google Chart Geo Charts on AlmaLinux 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Regional Text Google Chart Geo Charts on AlmaLinux Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ic_mc_interfacing.gif\" title=\"Regional Text Google Chart Geo Charts on AlmaLinux Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Regional Text Google Chart Geo Charts on AlmaLinux Tutorial<\/p><\/div>\n<p>You might recall from <a title='QuickChart Interfacing of GraphViz via PHP on AlmaLinux Tutorial' href='#qcigvphpalt'>QuickChart Interfacing of GraphViz via PHP on AlmaLinux Tutorial<\/a> we noted &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/quickchart-interfacing-of-graphviz-via-php-on-almalinux-tutorial\/'>\n<p> &#8230; the most work left with this interfacing, in all likelihood, will go to the &#8220;missing from the list above&#8221; Map Chart, and some Venn Chart user entered parameter logics, where any Map Chart replacement logic will never match the Google means by which region boundaries were defined and, hence, able to be allocated a shaded colour, though we think we&#8217;ll be able to show region place name text, in position, moving forward, using <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> and\/or <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> and <a target=\"_blank\" title='Wikipedia' href='\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a>, thanks.<\/p>\n<\/blockquote>\n<p>Well, today is a day heading further down that road, certainly not all the way, but some of the way trying to allow for Regional Map Views, not as well as on the deprecated Google Chart Image Chart Map Charts but using text based <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Charts<\/a> along with those <a target=\"_blank\" title='Wikipedia ... thanks' href='http:\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a> regional location helping informational webpages.  This involved, as a start, allowing for our WordPress Blog 404.php work returning HTML (in an iframe &#8230;<\/p>\n<p><code><br \/>\n    var ievn='img';<br \/>\n    if (document.URL.indexOf('&woit=') != -1) { ievn='iframe'; } \/\/ ... <font color=blue>now used<\/font> in Javascript codelines of the ilk ...<br \/>\n    <br \/>\n    documentwrite(\"&lt;h1&gt;&lt;span onclick=\\\"location.href=document.URL.split('?')[0].split('#')[0];\\\" title=Reset style=cursor:pointer;&gt;Interfacing&lt;\/span&gt; to &lt;a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'&gt;Google Charts&lt;\/a&gt; &lt;a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'&gt;Image Chart&lt;\/a&gt; regarding your \" + cname + \"&lt;\/h1&gt;&lt;h3 id=myh3&gt;RJM Programming &lt;a target=_blank href='.\/image_venn.html' style='cursor:pointer;text-decoration:none;' title='Back to home menu'&gt;-&lt;\/a&gt; November, 2023&lt;\/h3&gt;&lt;table style='width:100%;margin:0 0 0 0;'&gt;&lt;tr&gt;&lt;td id=tdleft data-style=vertical-align:top;&gt;&lt;\"<font color=blue> + ievn<\/font> + evn + \"ask(event); title='Google Chart Image Chart ' + cname + ' image ... to modify, please click' id=myvenn width=\" + Math.min(550,window.innerWidth) + \" height=\" + Math.min(350,window.innerHeight) + \" data-style='display:block;width:\" + Math.min(550,window.innerWidth) + \"px;height:\" + Math.max(350,window.innerHeight) + \"px;background:url(\" + defcheck(1, \"\/\/www.rjmprogramming.com.au\/ITblog\/\" +  Math.min(550,window.innerWidth) + \"\/\" +  Math.min(350,window.innerHeight) + \"\/?cht=\" + ctype + \"&chd=\" + encodeURIComponent(chd)) + \");background-size:cover;' src='\" + defcheck(2, \"\/\/www.rjmprogramming.com.au\/ITblog\/\" + Math.min(550,window.innerWidth) + \"\/\" + Math.min(350,window.innerHeight) + \"\/?cht=\" + ctype + chdeq + encodeURIComponent(chd) + therest) + \"' usemap='#mymap'&gt;&lt;\/<font color=blue>\" + ievn + \"<\/font>&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td id=tdright style='border-left:1px dotted purple;vertical-align:top;'&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;\");<br \/>\n<\/code><\/p>\n<p> &#8230; element) rather than the png data the Google Charts Image Chart Map Chart used to (in an img element).<\/p>\n<p>But, so far, that Google Chart Geo Chart alternative solution can only be practical when all the regional ISO-3166 regional codes land in the one single country.  Some countries, in this sense, work quicker because we have already gathered the Wikipedia geographicals, and part of the ongoing aspects to the project, involve &#8230;<\/p>\n<ul>\n<li>collecting more &#8230; and iron out &#8230;<\/li>\n<li>subregion &#8220;overmentions&#8221; &#8230;<\/li>\n<li>better collection method than the prompt window asking for ISO-3166 region code ways at present<\/li>\n<\/ul>\n<p>Plenty to keep us off the streets in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html---------------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html---------------------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/new-quickchart-interfacing-of-graphviz-via-php-on-almalinux-tutorial\/' rel=\"noopener\">New QuickChart Interfacing of GraphViz via PHP on AlmaLinux Tutorial<\/a>.<\/p-->\n<hr>\n<p id='qcigvphpalt'>Previous relevant <a target=\"_blank\" title='QuickChart Interfacing of GraphViz via PHP on AlmaLinux Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/quickchart-interfacing-of-graphviz-via-php-on-almalinux-tutorial\/' rel=\"noopener\">QuickChart Interfacing of GraphViz via PHP on AlmaLinux 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"QuickChart Interfacing of GraphViz via PHP on AlmaLinux Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/quickchart_interfacing.gif\" title=\"QuickChart Interfacing of GraphViz via PHP on AlmaLinux Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">QuickChart Interfacing of GraphViz via PHP on AlmaLinux Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Dot HTML Table Tutorial' href='#gvphpaldhtmltt'>GraphViz via PHP on AlmaLinux Dot HTML Table Tutorial<\/a> tweaked us to discovering another item to add to our list of GraphViz guises last reviewed at <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial' href='#gvphpaldcwt' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial<\/a>, <font color=olive>adding<\/font> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-doit-colour-wheel-tutorial\/'>\n<ul>\n<li>the recent, alas now deprecated, <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Charts<\/a> GraphViz option means of drawing <a target=\"_blank\" title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp' rel=\"noopener\">SVG<\/a> graphics within an HTML image &#8230; we&#8217;ve known about before <i>about yesterday<\/i> &#8230;<\/li>\n<li>today&#8217;s interest, that being <a target=\"_blank\" title='Image GraphViz via Pear' href='https:\/\/pear.php.net\/package\/Image_GraphViz\/docs\/latest\/Image_GraphViz\/Image_GraphViz.html' rel=\"noopener\"><i>PHP Image GraphViz via Pear on AlmaLinux<\/i><\/a> install, via the AlmaLinux cPanel &#8220;Module Installers&#8221; <a target=\"_blank\" title='PEAR installer repository information from Wikiedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/PEAR' rel=\"noopener\">Pear<\/a> installer page, means by which we can use GraphViz calls in PHP code &#8230; and, for the future &#8230;<\/li>\n<li>GraphViz installs for Python via pip<\/li>\n<li><font color=magenta>GraphViz via Dot language via command line<\/font><\/li>\n<li><font color=olive>GraphViz via <a target=\"_blank\" title='QuickChart' href='https:\/\/quickchart.io\/' rel=\"noopener\">QuickChart<\/a> product interfacing, we interface to, thanks<\/font><\/li>\n<\/ul>\n<\/blockquote>\n<p>But, it&#8217;s not just the very interesting <font size=1>(curl https: posted JSON data based)<\/font>  QuickChart GraphViz interfacing that we add to our inhouse <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">Image Based Graphs<\/a> web application, we now have, in a first review, &#8220;splashpage aspect&#8221; improvements to all of &#8230;<\/p>\n<ul>\n<li>Bar Chart<\/li>\n<li>Line Chart<\/li>\n<li>Venn Chart<\/li>\n<li>Scatter Chart<\/li>\n<li>GraphViz Chart<\/li>\n<li>Google-O-Meter Chart<\/li>\n<li>Radar Chart<\/li>\n<li>Pie Chart<\/li>\n<\/ul>\n<p> &#8230; the most work left with this interfacing, in all likelihood, will go to the &#8220;missing from the list above&#8221; Map Chart, and some Venn Chart user entered parameter logics, where any Map Chart replacement logic will never match the Google means by which region boundaries were defined and, hence, able to be allocated a shaded colour, though we think we&#8217;ll be able to show region place name text, in position, moving forward, using <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\" rel=\"noopener\">Google Chart<\/a> <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart' rel=\"noopener\">Geo Chart<\/a> and\/or <a target=\"_blank\" title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/map' rel=\"noopener\">Map Chart<\/a> and <a target=\"_blank\" title='Wikipedia' href='\/\/wikipedia.org' rel=\"noopener\">Wikipedia<\/a>, thanks.<\/p>\n<p>So, if this is an HTML web application, why the &#8220;PHP&#8221; mention in the blog posting title?  Well, it is good ol&#8217; WordPress Blog TwentyTen theme&#8217;s 404.php that remaps URLs from Google Chart Image Chart friendly ones to QuickChart friendly (so far only &#8220;splashpage&#8221; wise) ones via PHP code snippets &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n       if (strpos(str_replace('cht=gom', 'cht=b', str_replace('cht=v', 'cht=b', str_replace('cht=gv', 'cht=b', str_replace('cht=p', 'cht=b', str_replace('cht=s', 'cht=b', str_replace('cht=r', 'cht=b', str_replace('cht=l', 'cht=b', qcpc($theqs)))))))), 'cht=b') === false) { \/\/ allow in Quick Charts \/\/ || 1 == 1) {<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/chart.googleapis.com\/chart' . $theqs);<br \/>\n       } else if (strpos($theqs, 'cht=gv') !== false) {<br \/>\n       if (1 == 1) {<br \/>\n       exec(\"curl -X POST 'https:\/\/quickchart.io\/graphviz' -H 'Content-Type: application\/json' -d @payload.json -o render.png\");<br \/>\n       if (3 == 3) {<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('render.png');<br \/>\n       } else {<br \/>\n       file_put_contents('xccgxv.xccgxv',  \"&lt;html&gt;&lt;body onload=\\\"top.window.open('\" . '\/\/quickchart.io\/graphviz' . str_replace('&amp;','&',explode('#', qcpc($theqs))[0]) . \"','_blank','top=50,left=50,width=600,height=600');\\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\");<br \/>\n       echo \"&lt;html&gt;&lt;body onload=\\\"top.window.open('\" . '\/\/quickchart.io\/graphviz' . str_replace('&amp;','&',explode('#', qcpc($theqs))[0]) . \"','_blank','top=50,left=50,width=600,height=600');\\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n       exit;<br \/>\n       }<br \/>\n       } else {<br \/>\n       file_put_contents('xccgv.xccgv', 'ht<font color=black>tp<\/font>:\/\/quickchart.io\/graphviz' . str_replace('&amp;','&',explode('#', qcpc($theqs))[0]));<br \/>\n       $gcont=file_get_contents('ht<font color=black>tp<\/font>:\/\/quickchart.io\/graphviz' . str_replace('&amp;','&',explode('#', qcpc($theqs))[0]));<br \/>\n       file_put_contents('xccgvv.xccgvv', $gcont);<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo $gcont;<br \/>\n       }<br \/>\n       } else if (strpos($theqs, 'cht=v') !== false) {<br \/>\n       if (substr(qcpc($theqs),0,1) == '\/') {<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/www.rjmprogramming.com.au' . explode('#', qcpc($theqs))[0]);<br \/>\n       } else {<br \/>\n       file_put_contents('xccc.xccc', 'http:\/\/quickchart.io\/chart' .  explode('#', qcpc($theqs))[0]);<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/quickchart.io\/chart' . explode('#', qcpc($theqs))[0]);<br \/>\n       }<br \/>\n       } else if (strpos($theqs, 'cht=r') !== false) {<br \/>\n       file_put_contents('xccc.xccc', 'http:\/\/quickchart.io\/chart' .  explode('#', qcpc($theqs))[0]);<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/quickchart.io\/chart' . explode('#', qcpc($theqs))[0]);<br \/>\n       } else if (strpos($theqs, 'cht=gom') !== false) {<br \/>\n       file_put_contents('xcccgom.xcccgom', 'http:\/\/quickchart.io\/chart?c=' . str_replace('+','%20',urlencode(substr(explode('#cht', qcpc($theqs))[0],3))) );<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/quickchart.io\/chart?c=' . str_replace('+','%20',urlencode(substr(explode('#cht', qcpc($theqs))[0],3))));<br \/>\n       } else if (strpos($theqs, 'cht=s') !== false) {<br \/>\n       file_put_contents('xcccc.xcccc', 'http:\/\/quickchart.io\/chart' .  explode('#', qcpc($theqs))[0]);<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/quickchart.io\/chart' . explode('#', qcpc($theqs))[0]);<br \/>\n       } else {<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/quickchart.io\/chart' . qcpc($theqs));<br \/>\n       }<br \/>\n       }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; calling &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nfunction qcpc($inuis) {<br \/>\n  $outuis=$inuis;<br \/>\n  $sometext='';<br \/>\n  \/\/ ?chs=550x350&cht=p&chd=t:1,2,3,4&chdl=January|February|March|April&chtt=My%20Pie%20Chart&chco=ff0000,00ff00,0000ff,ff00ff&ufr=_6992072<br \/>\n  \/\/ to something like<br \/>\n  \/\/ https:\/\/quickchart.io\/chart?c={type:'pie',data:{labels:['January','February','March','April','May'],           datasets:[{data:[50,60,70,180,190]}]}}#cht=b<br \/>\n<br \/>\n  \/\/ ?chs=550x350&cht=r&chd=t:10,20,30,40,50&chxt=x&chxl=0:|1|2|3|4|5|6&chtt=My%20Radar%20Chart&chco=FF0000,FF9900,ff0a00,00ffb0,000cff&ufr=_17351792%<br \/>\n  \/\/ to something like<br \/>\n  \/\/                         ?c={ type: 'radar', data: { labels: [ ['Eating', 'Dinner'], ['Drinking', ' ... }, options: { title: { display: true, text: 'Chart.js Radar Chart', }, }, }<br \/>\n<br \/>\n  \/\/ ?chs=550x350&cht=s&chd=t:12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54&chdl=Cats|Dogs&chxt=x,y&chtt=My%20Scatter%20Chart&chco=FF0000<br \/>\n<br \/>\n  \/\/ ?chs=550x350&cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}&chtt=My%20GraphViz%20Chart&chco=&ufr=_5020598<br \/>\n  \/\/ to something like<br \/>\n  \/\/ https:\/\/quickchart.io\/graphviz?format=png&width=100&height=150&graph=graph{a--b}<br \/>\n  <br \/>\n  \/\/ ?chs=550x350&cht=gom&chd=t:20,40,60&chdl=A|B|C&chtt=My%20Google-O-Meter%20Chart&chco=ff0000,00ff00,0000ff&ufr=_13133851<br \/>\n  \/\/ to something like<br \/>\n  \/\/ ?c={type:'gauge',data:{datasets:[{value:50,data:[20,40,60],backgroundColor:['green','orange','red'],borderWidth:2}]},options:{valueLabel:{fontSize:22,backgroundColor:'transparent',color:'#000',formatter:function(value,context){returnvalue+'mph';},bottomMarginPercentage:10}}}<br \/>\n<br \/>\n  \/\/ ?chs=550x350&cht=v&chd=t:100,80,60,30,30,30,10&chdl=A|B|C&chtt=My%20Venn%20Diagram&chco=ff0000,00ff00,0000ff&ufr=_18142737<br \/>\n  \/\/ Thanks to https:\/\/www.infosol.com\/venn-diagrams-in-xcelsius\/ for<br \/>\n  \/\/ chd=t:66,100,-1,33,-1,-1,-1<br \/>\n  \/\/ These numbers specify the size and overlaps for all groups.<br \/>\n  \/\/ The ordering is as follows:<br \/>\n  \/\/ Group 1 size,<br \/>\n  \/\/ Group 2 size,<br \/>\n  \/\/ Group 3 size,<br \/>\n  \/\/ Group 1 & 2 overlap amount,<br \/>\n  \/\/ Group 1 & 3 overlap amount,<br \/>\n  \/\/ Group 2 & 3 overlap amount,<br \/>\n  \/\/ Group 1 & 2 & 3 overlap amount. In this case, we only had two groups to display, so all of the parameter slots reserved for the third group were set to \u201c-1\u201d. If you have a third group, then those \u201c-1\u201d values would be replaced with actual amounts. The Google Chart API provides for a maximum of 3 groups in Venn diagrams.<br \/>\n    <br \/> <br \/>\n  if (strpos($inuis, 'cht=p') !== false && strpos($inuis, 'chd=t:') !== false && strpos($inuis, 'chdl=') !== false) {<br \/>\n    if (strpos($inuis, 'chtt=') !== false) {<br \/>\n      $sometext=explode('&', explode('chtt=', $inuis)[1])[0];<br \/>\n      $labels=\"?c={type:'doughnut',data:{labels:['\" . str_replace(\"|\", \"','\", explode('&', explode('chdl=', $inuis)[1])[0]) . \"'],\";<br \/>\n      $values=\"datasets:[{data:[\" . explode('&', explode('chd=t:', $inuis)[1])[0] . \"]}]},options:{plugins:{doughnutlabel:{labels:[{text:'\" . $sometext . \"',font:{size:20}}]}}}}#cht=b\";<br \/>\n    } else {<br \/>\n      $labels=\"?c={type:'pie',data:{labels:['\" . str_replace(\"|\", \"','\", explode('&', explode('chdl=', $inuis)[1])[0]) . \"'],\";<br \/>\n      $values=\"datasets:[{data:[\" . explode('&', explode('chd=t:', $inuis)[1])[0] . ']}]}}#cht=b';<br \/>\n    }<br \/>\n    $outuis=$labels . $values;<br \/>\n    \/\/$outuis='?c=' . str_replace('+','%20',urlencode(substr($labels . $values,3)));<br \/>\n    file_put_contents('xcc.xcc', $outuis);<br \/>\n  } else if (strpos($inuis, 'cht=gom') !== false && strpos($inuis, 'chco=') !== false && strpos($inuis, 'chd=t:') !== false && strpos($inuis, 'chdl=') !== false) {<br \/>\n    $outuis=\"?c={type:'gauge',data:{datasets:[{value:\". explode(',',explode('&', explode('chd=t:', $inuis)[1])[0])[0] . \",data:[\" . explode('&', explode('chd=t:', $inuis)[1])[0] . \"],backgroundColor:['#\" . str_replace(\",\",\"','#\",explode('&', explode('chco=', $inuis)[1])[0]) . \"'],borderWidth:2}]},options:{valueLabel:{fontSize:22,backgroundColor:'transparent',color:'#000',formatter:function(value,context){return '\" . str_replace('+',' ',urldecode(explode('&', explode('chtt=', $inuis)[1])[0])) . \"';},bottomMarginPercentage:10}}}#cht=b\";<br \/>\n    file_put_contents('xcc.xcc', $outuis);<br \/>\n  } else if (strpos($inuis, 'cht=v') !== false && strpos($inuis, 'chco=') !== false && strpos($inuis, 'chd=t:') !== false && strpos($inuis, 'chdl=') !== false) {<br \/>\n    if (3 == 3) {<br \/>\n    $outuis=\"\/defvenn.png#cht=b\";<br \/>\n    } else {<br \/>\n    $outuis=\"?c={type:'gauge',data:{datasets:[{value:\". explode(',',explode('&', explode('chd=t:', $inuis)[1])[0])[0] . \",data:[\" . explode('&', explode('chd=t:', $inuis)[1])[0] . \"],backgroundColor:['#\" . str_replace(\",\",\"','#\",explode('&', explode('chco=', $inuis)[1])[0]) . \"'],borderWidth:2}]},options:{valueLabel:{fontSize:22,backgroundColor:'transparent',color:'#000',formatter:function(value,context){return '\" . str_replace('+',' ',urldecode(explode('&', explode('chtt=', $inuis)[1])[0])) . \"';},bottomMarginPercentage:10}}}#cht=b\";<br \/>\n    file_put_contents('xcc.xcc', $outuis);<br \/>\n    }<br \/>\n  } else if (strpos($inuis, 'cht=r') !== false && strpos($inuis, 'chd=t:') !== false && strpos($inuis, 'chxl=0:') !== false) {<br \/>\n    file_put_contents('xcc.xcc', $outuis);<br \/>\n    if (strpos($inuis, 'chtt=') !== false) {<br \/>\n      $sometext=str_replace('+',' ',urldecode(explode('&', explode('chtt=', $inuis)[1])[0]));<br \/>\n      $labels=\"?c={type:'radar',data:{labels:['\" . str_replace(\"|\", \"','\", str_replace('+',' ',urldecode(explode('&', explode('chxl=0:', $inuis)[1])[0]))) . \"'],\";<br \/>\n      $values=\"datasets:[{label: '\" . $sometext . \"',data:[\" . str_replace('+',' ',urldecode(explode('&', explode('chd=t:', $inuis)[1])[0])) . \"]}]},options: { title: { display: true, text: 'Radar Chart', }, }, }#cht=b\";<br \/>\n    } else {<br \/>\n      $labels=\"?c={type:'radar',data:{labels:['\" . str_replace(\"|\", \"','\", str_replace('+',' ',urldecode(explode('&', explode('chxl=0:', $inuis)[1])[0]))) . \"'],\";<br \/>\n      $values=\"datasets:[{label: 'My First dataset',data:[\" . str_replace('+',' ',urldecode(explode('&', explode('chd=t:', $inuis)[1])[0])) . ']}]}}#cht=b';<br \/>\n    }<br \/>\n    $outuis='?c=' . str_replace('+','%20',urlencode(explode('#',substr($labels . $values,3))[0])) . '#cht=b';<br \/>\n    file_put_contents('xcc.xcc', $outuis);<br \/>\n  } else if (strpos($inuis, 'cht=s') !== false && strpos($inuis, 'chd=t:') !== false && strpos($inuis, 'chdl=') !== false && strpos($inuis, 'chxt=') !== false) {<br \/>\n    $labels=explode('|', str_replace('+',' ',urldecode(explode('&', explode('chdl=', $inuis)[1])[0])));<br \/>\n    $xys=explode(',', str_replace('+',' ',urldecode(explode('&', explode('chxt=', $inuis)[1])[0])));<br \/>\n    $xysets=explode('|', str_replace('+',' ',urldecode(explode('&', explode('chd=t:', $inuis)[1])[0])));<br \/>\n    while (sizeof($labels) &lt; sizeof($xysets)) {<br \/>\n      array_push($labels, '');<br \/>\n      $labels[-1 + sizeof($labels)]='Data Set ' . sizeof($labels);<br \/>\n    }<br \/>\n    $outuis='?c={\"type\":\"scatter\",\"data\":{\"datasets\":[';<br \/>\n    for ($ii=0; $ii&lt;sizeof($xysets); $ii++) {<br \/>\n      if ($ii &gt; 0) { $outuis.=','; }<br \/>\n      $outuis.='{\"label\":\"' . $labels[$ii] . '\",\"data\":[';<br \/>\n      $cxys=explode(',', $xysets[$ii]);<br \/>\n      for ($iii=0; $iii&lt;sizeof($cxys); $iii+=2) {<br \/>\n       if ($iii &gt; 0) { $outuis.=', '; }<br \/>\n       $outuis.='{\"' . $xys[0];<br \/>\n       $outuis.='\":' . $cxys[$iii];<br \/>\n       $outuis.=',\"' . $xys[1];<br \/>\n       $outuis.='\":' . $cxys[1 + $iii] . '}';<br \/>\n      }<br \/>\n      $outuis.=']}';<br \/>\n    }<br \/>\n    $outuis.=']},\"options\":{\"title\":{\"display\":true,\"text\":\"Scatter Chart\"}}}';<br \/>\n    file_put_contents('xccq.xccq', 'http:\/\/quickchart.io\/chart' . $outuis);<br \/>\n    $outuis='?c=' . str_replace('+','%20',urlencode(explode('#',substr($outuis,3))[0])) . '#cht=b';<br \/>\n    file_put_contents('xcc.xcc', $outuis);<br \/>\n  } else if (strpos($inuis, 'cht=gv') !== false && strpos($inuis, 'chl=') !== false) {<br \/>\n    $labels='?format=png&graph=';<br \/>\n    $values=str_replace('+',' ',urldecode(explode('&', explode('chl=', $inuis)[1])[0]));<br \/>\n    file_put_contents('payload.json', '{  \"graph\": \"' . str_replace('\"', \"'\", $values) . '\",' . \"\\n  \" . '\"layout\": \"dot\",' . \"\\n  \" . '\"format\": \"png\"' . \"\\n  \" . '}');<br \/>\n    $outuis=str_replace('+','%20',$labels . urlencode($values)) . '#cht=b';<br \/>\n  }<br \/>\n  return $outuis;<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; to help us down this new road.<\/p>\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\/quickchart-interfacing-of-graphviz-via-php-on-almalinux-tutorial\/' rel=\"noopener\">QuickChart Interfacing of GraphViz via PHP on AlmaLinux Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gvphpaldhtmltt'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot HTML Table Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-html-table-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot HTML Table Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/html_table_basis.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Dot HTML Table Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/html_table_basis.jpg\" title=\"GraphViz via PHP on AlmaLinux Dot HTML Table Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Dot HTML Table Tutorial<\/p><\/div>\n<p>In the <a target=\"_blank\" title=\"GraphViz\" href='\/\/graphviz.org\/' rel=\"noopener\">GraphViz<\/a> Dot command line world, there are a variety of (what we think of as) &#8220;verbs&#8221; supplied along with Dot installs for various purposes &#8230; think <i>neat -n<\/i> that helped with the Venn Diagrams of day before yesterday&#8217;s  &#8230; but today we&#8217;re back to using &#8220;verb dot&#8221; again, thanks to <a target=\"_blank\" title='Dot GraphViz package information' href='\/\/quickchart.io\/documentation\/graphviz-api\/' rel=\"noopener\">QuickChart Graph API<\/a>, thanks, with &#8230;<\/p>\n<ul>\n<li>GraphViz based &#8230;<\/li>\n<li><a target=\"_blank\" title=\"dot\" href='https:\/\/graphviz.org\/docs\/layouts\/dot\/' rel=\"noopener\">Dot<\/a> based <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/html_table_basis.dot-GETME\" rel=\"noopener\">html_table_basis.dot<\/a> code used for &#8230;<\/li>\n<li>graphs based on HTML table code<\/li>\n<\/ul>\n<p> &#8230; for our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/html_table_basis.php-GETME\" rel=\"noopener\">&#8220;how we got there&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/html_table_basis.php-GETME\" rel=\"noopener\">html_table_basis.php<\/a> PHP hosting Dot first go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/html_table_basis.php\" rel=\"noopener\">HTML Table<\/a> web application.<\/p>\n<p>In so doing we were able to test the integrity of yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Require Once Tutorial' href='#gvphpalrot'>GraphViz via PHP on AlmaLinux Require Once Tutorial<\/a> &#8230; spoiler alert &#8230; all okay <font size=1>(but we still have to remember to make our crontab arrangements for each new such web application)<\/font>!  And remind ourselves to revisit the excellent <a title='QuickChart' href='https:\/\/quickchart.io\/'>QuickChart<\/a> product, which can help us get over the demise of <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Charts<\/a> &#8230; somewhat.<\/p>\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\/graphviz-via-php-on-almalinux-dot-html-table-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot HTML Table Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gvphpalrot'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Require Once Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-require-once-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Require Once Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/twopi_vs_circo_example.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Require Once Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/make_graphviz_peers.gif\" title=\"GraphViz via PHP on AlmaLinux Require Once Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Require Once Tutorial<\/p><\/div>\n<p>What is a near relative to &#8230;<\/p>\n<ul>\n<li>external Javascript talents regarding <i>peer to peer<\/i> arrangements on the client side of web applications  &#8230;\n<li>for the PHP server side &#8230;<\/li>\n<\/ul>\n<p> &#8230; arrangements?  We&#8217;d say &#8230;<\/p>\n<ul>\n<li>require .. and\/or &#8230;<\/li>\n<li>include<\/li>\n<\/ul>\n<p> &#8230; styles of PHP syntax, <a target=\"_blank\" title='PHP include or require' href='https:\/\/www.w3schools.com\/php\/php_includes.asp' rel=\"noopener\">as explained below<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/php\/php_includes.asp'><p>\nThe include (or require) statement takes all the text\/code\/markup that exists in the specified file and copies it into the file that uses the include statement.<br \/>\n<br \/>\nIncluding files is very useful when you want to include the same PHP, HTML, or text on multiple pages of a website.\n<\/p><\/blockquote>\n<p>By <i>peer to peer<\/i> arrangements, we&#8217;re referring to those programming occasions where you&#8217;ve written a series of web applications, in today&#8217;s case, a series of server side PHP ones, further to the work of yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Dot Circular Layout Tutorial' href='#gvphpaldclt'>GraphViz via PHP on AlmaLinux Dot Circular Layout Tutorial<\/a>, and want each to have means by which they can link to the others.  In <i>external Javascript<\/i> client side land, that would involve an arrangement like &#8230;<\/p>\n<ul>\n<li>visit each HTML code and add the link to the external Javascript &#8230; and &#8230;<\/li>\n<li>within that external Javascript a dropdown (or some other HTML) element would be dynamically added to the webpage via DOM methodologies &#8230; based on &#8230;<\/li>\n<li>essentially a hardcoded list (which, likely, needs to be rewritten when something new in the peer list happens) the programmer knows about<\/li>\n<\/ul>\n<p>But using PHP <a target=\"_blank\" title='PHP include or require' href='https:\/\/www.w3schools.com\/php\/php_includes.asp' rel=\"noopener\">require_once<\/a> in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/twopi_vs_circo_example.php--GETME\" rel=\"noopener\">our minimally tweaked<\/a> code &#8230; just adding &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nrequire_once(rtrim(dirname(__FILE__), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . 'make_graphviz_peers.php');<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; into <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/twopi_vs_circo_example.php--GETME\" rel=\"noopener\">twopi_vs_circo_example.php<\/a> PHP hosting Dot second go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/twopi_vs_circo_example.php\" rel=\"noopener\">Circular Layout<\/a> web application, is all the &#8220;code visiting&#8221; needed <font size=1>(as long as somebody &#8230; anybody &#8230; executes it once in a while &#8230; <font color=blue>more on that later<\/font>)<\/font> in this server side methodology.  The reason server side works so well is that server side can read and adjust web server code files, where PHP writes PHP here in this solution, whereas external Javascript client side approaches cannot do this.<\/p>\n<p>With this in mind, what goes into that <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/make_graphviz_peers.php_GETME\" rel=\"noopener\">make_graphviz_peers.php<\/a> to suit any\/all &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='PHP include or require' href='https:\/\/www.w3schools.com\/php\/php_includes.asp' rel=\"noopener\">PHP include or require<\/a><\/li>\n<li>standalone web surfing<\/li>\n<li>curl<\/li>\n<li>command line<\/li>\n<li><font color=blue>curl scheduled in crontab<\/font><\/li>\n<li><font color=blue>command line scheduled in crontab<\/font><\/li>\n<\/ul>\n<p> &#8230; modes of use to achieve this peer to peer additional dropdown functionality?  Quite short &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n\/\/ make_graphviz_peers.php<br \/>\n\/\/ October, 2024<br \/>\n\/\/ Look for &lt;h1 id=myh1&gt;Trying out &lt;span title='Actually neato -n for this Flow Chart idea'&gt;Dot&lt;\/span&gt; GraphViz hosted in PHP \" . $plus . \" Venn Diagram &lt;span id=ssel&gt;&lt;\/span&gt; &lt;a id=pemail title=Email class=share  onclick=emailit(this); style=text-decoration:none;cursor:pointer;&gt;&#128231;&lt;\/a&gt;&nbsp;&lt;a id=psms title=SMS class=share  onclick=smsit(this); style=text-decoration:none;cursor:pointer;&gt;&#128223;&lt;\/a&gt;&lt;\/h1<br \/>\n  error_reporting( E_ERROR | E_USER_ERROR );<br \/>\n<br \/>\n  $yesrecall='';<br \/>\n  $listis='';<br \/>\n  $selis='';<br \/>\n  $two=2;<br \/>\n  foreach(glob('.\/*.php') as $filename) {<br \/>\n    $cont=file_get_contents(rtrim(dirname(__FILE__), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . basename($filename));<br \/>\n    if (strpos($filename, '_junk.') === false && strpos($cont, '&lt;\/' . 'h1&gt;') !== false && strpos($cont, '&lt;\/ti' . 'tle&gt;') !== false && strpos($cont, 'GraphV' . 'iz hosted in PHP') !== false) {<br \/>\n     if (sizeof(explode('&lt;\/' . 'h1&gt;', $cont)) &lt;= 3) {<br \/>\n      $hashbit='#' . explode(' - ', explode('&lt;\/ti' . 'tle&gt;', explode('&lt;ti' . 'tle&gt;', $cont)[1])[0])[-1 + sizeof(explode(' - ', explode('&lt;\/ti' . 'tle&gt;', explode('&lt;ti' . 'tle&gt;', $cont)[1])[0]))];<br \/>\n      $listis.=\"\/\" . basename($filename) . $hashbit . \"\\n\";<br \/>\n      if ($selis == \"\") {<br \/>\n        $selis='&lt;sup id=\"supgws\" style=\"vertical-align: top;\"&gt;&nbsp;&lt;details title=\"Open to reveal other GraphViz web applications you can navigate to.\" style=\"display: inline-block;\" id=\"gvdtls\"&gt;&lt;summary style=\"color: #e162bf;list-style-type:' . \"'\\\\\\\\01F4C8'\" . '\"&gt;&lt;\/summary&gt;&lt;select size=\"2\" id=\"gvwapps\" onchange=\"if (this.value != ' . \"''\" . ') { this.style.cursor=' . \"'progress'\" . '; location.href=this.value; }\"&gt;&lt;option value=\"\"&gt;Optionally select a GraphViz web application below ...&lt;\/option&gt;&lt;option value=\"\/' . basename($filename) . '\"&gt;' . substr($hashbit,1) . '&lt;\/option&gt;&lt;\/select&gt;&lt;\/details&gt;&lt;\/sup&gt;';<br \/>\n      } else {<br \/>\n        $two++;<br \/>\n        $selis=str_replace('&lt;\/select&gt;', '&lt;option value=\"\/' . basename($filename) . '\"&gt;' . substr($hashbit,1) . '&lt;\/option&gt;&lt;\/select&gt;', str_replace(' size=\"' . (-1 + $two) . '\"', ' size=\"' . (0 + $two) . '\"', $selis));<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  $selis=str_replace('\"', '\\\"', $selis);<br \/>\n  <br \/>\n  \/\/file_put_contents('x.x', $listis);<br \/>\n  \/\/echo \"&lt;html&gt;&lt;body&gt;&lt;textarea&gt;\" . $listis . \"&lt;\/textarea&gt;&lt;h1&gt;Wow \" . $selis . \"&lt;\/h1&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n<br \/>\n  if (2 == 2) {<br \/>\n  foreach(glob('.\/*.php') as $filename) {<br \/>\n    $cont=file_get_contents(rtrim(dirname(__FILE__), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . basename($filename));<br \/>\n    if (strpos($filename, '_junk.') === false && strpos($cont, '&lt;\/' . 'h1&gt;') !== false && strpos($cont, '&lt;\/ti' . 'tle&gt;') !== false && strpos($cont, 'GraphV' . 'iz hosted in PHP') !== false) {<br \/>\n     if (sizeof(explode('&lt;\/' . 'h1&gt;', $cont)) &lt;= 3) {<br \/>\n      if (strpos($cont, '&lt;sup ') !== false) {<br \/>\n        $oldsup='&lt;sup ' . explode('&lt;\/sup&gt;', explode('&lt;sup ', $cont)[1])[0] . '&lt;\/sup&gt;';<br \/>\n        $lendiff=abs(strlen($oldsup) - strlen($selis));<br \/>\n        if ($lendiff &gt; 20) {<br \/>\n          file_put_contents(rtrim(dirname(__FILE__), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . str_replace('.', '_junk.',basename($filename)), $cont);<br \/>\n          $cont=str_replace($oldsup, '', $cont);<br \/>\n          $cont=str_replace('&lt;\/h1&gt;', $selis . '&lt;\/h1&gt;', $cont);<br \/>\n          file_put_contents(rtrim(dirname(__FILE__), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . basename($filename), $cont);<br \/>\n          if (basename(__FILE__) == basename($_SERVER[\"SCRIPT_FILENAME\"])) {<br \/>\n            $listis=$listis;<br \/>\n          } else if (basename($filename) == basename($_SERVER[\"SCRIPT_FILENAME\"])) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/4545878\/how-to-know-if-php-script-is-called-via-require-once<br \/>\n            $yesrecall='\/' . basename($filename);<br \/>\n          }<br \/>\n       }<br \/>\n      } else {<br \/>\n        file_put_contents(rtrim(dirname(__FILE__), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . str_replace('.', '_junk.',basename($filename)), $cont);<br \/>\n        $cont=str_replace('&lt;\/h1&gt;', $selis . '&lt;\/h1&gt;', $cont);<br \/>\n        file_put_contents(rtrim(dirname(__FILE__), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . basename($filename), $cont);<br \/>\n        if (basename(__FILE__) == basename($_SERVER[\"SCRIPT_FILENAME\"])) {<br \/>\n            $listis=$listis;<br \/>\n        } else if (basename($filename) == basename($_SERVER[\"SCRIPT_FILENAME\"])) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/4545878\/how-to-know-if-php-script-is-called-via-require-once<br \/>\n            $yesrecall='\/' . basename($filename);<br \/>\n        }<br \/>\n      }<br \/>\n     }<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n  <br \/>\n  if ($yesrecall != '') {<br \/>\n    header('Location: ' . $yesrecall);<br \/>\n    exit;<br \/>\n  }<br \/>\n<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; really?!  And thanks to <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/4545878\/how-to-know-if-php-script-is-called-via-require-once' title='https:\/\/stackoverflow.com\/questions\/4545878\/how-to-know-if-php-script-is-called-via-require-once' rel=\"noopener\">https:\/\/stackoverflow.com\/questions\/4545878\/how-to-know-if-php-script-is-called-via-require-once<\/a> for the wisdom here.<\/p>\n<p><font color=blue>And just in case our Circular Layout dot web application &#8220;feels a bit forgotten&#8221; here is a new crontab record &#8230;<\/font><\/p>\n<p><code style=\"font-color:blue;color=blue;\"><br \/>\n<font color=blue>09 9 * * * ksh -c 'curl \"ht<\/font><font color=\"blue\">tp:\/\/www.rjmprogramming.com.au\/make_graphviz_peers.php\"'<\/font><br \/>\n<\/code><\/p>\n<p><font color=blue> &#8230; ensuring Peer to Peer logic is executed at least once a day!<\/font><\/p>\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\/graphviz-via-php-on-almalinux-require-once-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Require Once Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gvphpaldclt'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot Circular Layout Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-circular-layout-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Circular Layout Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/twopi_vs_circo_example.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Dot Circular Layout Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/twopi_vs_circo_eg.jpg\" title=\"GraphViz via PHP on AlmaLinux Dot Circular Layout Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Dot Circular Layout Tutorial<\/p><\/div>\n<p>In the <a target=\"_blank\" title=\"GraphViz\" href='\/\/graphviz.org\/' rel=\"noopener\">GraphViz<\/a> Dot command line world, there are a variety of (what we think of as) &#8220;verbs&#8221; supplied along with Dot installs for various purposes &#8230; think <i>neat -n<\/i> that helped with the Venn Diagrams of yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Box Tutorial' href='#gvphpaldvdbt'>GraphViz via PHP on AlmaLinux Dot Venn Diagram Box Tutorial<\/a> &#8230; and today we start down the road, thanks to <a target=\"_blank\" title='' href='https:\/\/stackoverflow.com\/questions\/72531363\/how-to-create-a-graph-with-a-circular-layout-in-graphviz' rel=\"noopener\">How to Create a Graph with a Circular Layout in GraphViz<\/a>, thanks, with &#8230;<\/p>\n<ul>\n<li>GraphViz based &#8230;<\/li>\n<li><a target=\"_blank\" title=\"dot\" href='https:\/\/graphviz.org\/docs\/layouts\/dot\/' rel=\"noopener\">Dot<\/a> based &#8230;<\/li>\n<li><a target=\"_blank\" title=\"circo\" href='https:\/\/graphviz.org\/docs\/layouts\/twopi\/' rel=\"noopener\">twopi<\/a> based &#8230; (and <a target=\"_blank\" title=\"circo\" href='https:\/\/graphviz.org\/docs\/layouts\/circo\/' rel=\"noopener\">circo<\/a> can be good) &#8230;<\/li>\n<li>graphs with a Circular Layout<\/li>\n<\/ul>\n<p> &#8230; for our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/twopi_vs_circo_example.php-GETME\" rel=\"noopener\">&#8220;how we got there&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/twopi_vs_circo_example.php-GETME\" rel=\"noopener\">twopi_vs_circo_example.php<\/a> PHP hosting Dot first go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/twopi_vs_circo_example.php\" rel=\"noopener\">Circular Layout<\/a> web application.<\/p>\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\/graphviz-via-php-on-almalinux-dot-circular-layout-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Circular Layout Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gvphpaldvdbt'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Box Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-venn-diagram-box-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Box Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Box Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/venn_diagram_basis_box.jpg\" title=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Box Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Box Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Functionality Tutorial' href='#gvphpaldvdeft'>GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Functionality Tutorial<\/a> the improvements, today, are &#8230;<\/p>\n<ul>\n<li>user can control the Venn (or, it&#8217;s getting towards other uses) Diagram fill colour and opacity &#8230;<\/li>\n<li>circles can be ellipses also &#8230;<\/li>\n<li>the dot (or neat -n) shape option Box is coded for as far as diagram editing is concerned &#8230; which means some other Polygon shapes work too, except that changes (via two discrete click\/taps) followed through on, turns Polygons without 4 sides into a Box with 4 sides<\/li>\n<li>user can add dot (or neat -n) generic node attributes via the Font Size textbox ( eg. 14 fontcolor=blue margin=0 )<\/li>\n<\/ul>\n<p>Those Javascript functions of yesterday now look like &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n function movethis(xprevlastoh, xpos3, xpos4, xptx, xpty, firsttime) {<br \/>\n   var mshape='ellipse';<br \/>\n   var mxpts=0, mypts=0, mx=0, my=0, mxnew=0, mynew=0, wasto=null, szeroouterHTML='', newr=0, newry=0, svgindexofinterest=0;<br \/>\n   var ynft='youllneverfindthis', ynftw='youllneverfindthis';<br \/>\n   var yntxtft='youllneverfindthis', yntxtftw='youllneverfindthis';<br \/>\n   var yncolft='youllneverfindthis', yncolftw='';<br \/>\n   var zncolft='youllneverfindthis', zncolftw='';<br \/>\n   var ges=szero.outerHTML.split('&lt;\/g&gt;'), gess=[], dotx=0, doty=0, dotdx=0, dotdy=0;<br \/>\n   var hashbit=(xprevlastoh + '##').split('##')[1];<br \/>\n   var hashcs=hashbit.split(',');<br \/>\n   var precursor='[height=';<br \/>\n   var defcol='#90806090';<br \/>\n   var atoz='0123456789abcdef';<br \/>\n   var partsof=document.getElementById('one').value.split('[height=');<br \/>\n   var eight=8;<br \/>\n   var ynn='youllneverfindthis';<br \/>\n   relrec='';<br \/>\n   wasfrom=null;<br \/>\n   var wh=[];<br \/>\n   var sets=[];<br \/>\n   var cpts='';<br \/>\n   var shapeword='circle';<br \/>\n   var diameter='diameter (or use comma for ellipse width,height)';<br \/>\n   ellfill='';<br \/>\n   ellfillop='';<br \/>\n   if (xprevlastoh.indexOf('&lt;polygon') != -1) { eight=4; ynn='cx';   mshape='polygon'; shapeword='polygon'; diameter='width and height';   }<br \/>\n   if (eval('' + hashcs.length) &gt; 6) {<br \/>\n      dotdx=eval(1 * eval(eval('' + xptx) - eval('' + hashcs[0])));<br \/>\n      dotdy=eval(1 * eval(eval('' + xpty) - eval('' + hashcs[1])));<br \/>\n      svgindexofinterest=eval('' + ('' + hashcs[6].replace(\/^0000\/g, '').replace('-','')));<br \/>\n   }<br \/>\n   if (eval('' + partsof.length) &gt; eval('' + svgindexofinterest)) {<br \/>\n     \/\/alert(xprevlastoh);<br \/>\n     if (eval('' + svgindexofinterest) == 0) {<br \/>\n      relrec=partsof[svgindexofinterest];<br \/>\n      if (xprevlastoh.indexOf('&lt;text') == 0 && eval('' + hashcs.length) &gt; 1) {<br \/>\n        if (relrec.indexOf(' xlp=\\\"') == -1 && relrec.indexOf(' pos=\\\"') == -1) {<br \/>\n           relrec+=precursor + partsof[1].split(']')[0]<br \/>\n        }<br \/>\n      } else {<br \/>\n        if ((partsof[eval(-1 + eval('' + svgindexofinterest))] + '~').indexOf(' ' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).outerHTML.split('&gt;')[1].split('&lt;')[0] + ' ~') != -1) {<br \/>\n          precursor=' ' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).outerHTML.split('&gt;')[1].split('&lt;')[0] + ' [height=';<br \/>\n        }<br \/>\n        relrec=precursor + partsof[svgindexofinterest].split(']')[0];<br \/>\n      }<br \/>\n     } else {<br \/>\n      if (xprevlastoh.indexOf('&lt;text') == 0) {<br \/>\n       if ((partsof[eval(-1 + eval('' + svgindexofinterest))] + '~').indexOf(' ' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).outerHTML.split('&gt;')[1].split('&lt;')[0] + ' ~') != -1) {<br \/>\n          precursor=' ' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).outerHTML.split('&gt;')[1].split('&lt;')[0] + ' [height=';<br \/>\n       }<br \/>\n      }<br \/>\n      relrec=precursor + partsof[svgindexofinterest].split(']')[0];<br \/>\n     }<br \/>\n   }<br \/>\n   console.log('31:' + xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]);<br \/>\n   \/\/ lastoh ##pointx,pointy,pxx,pxy,cx,cy,svgindexofinterest,dotx,doty,svgid<br \/>\n   if (svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)])) {<br \/>\n   \/\/alert('found');<br \/>\n   if (xprevlastoh.indexOf('&lt;' + mshape) != -1) {<br \/>\n   console.log('1:' + xprevlastoh.split('##')[1]);<br \/>\n   if (('' + xpos3) != ('' + xprevlastoh.split('##')[1].split(',')[2]) || ('' + xpos4) != ('' + xprevlastoh.split('##')[1].split(',')[3])) {<br \/>\n   mx=eval(1.0 * eval(eval('' + xpos3) - eval('' + xprevlastoh.split('##')[1].split(',')[2])));<br \/>\n   my=eval(1.0 * eval(1.0 * eval(eval('' + xpos4) - eval('' + xprevlastoh.split('##')[1].split(',')[3]))));<br \/>\n   \/\/alert('mxy=' + mx + ',' + my + ' ... ' + xprevlastoh);<br \/>\n   \/\/mxnew=eval(eval('' + xprevlastoh.split('##')[1].split(',')[4]) + mx);<br \/>\n   \/\/mynew=eval(eval('' + xprevlastoh.split('##')[1].split(',')[5]) + my);<br \/>\n   \/\/if (xprevlastoh.indexOf('&lt;polygon') != -1) { alert(xprevlastoh); }<br \/>\n   mxnew=eval(eval('' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx')) + mx);<br \/>\n   mynew=eval(eval('' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy')) + my);<br \/>\n   \/\/alert('mxnewxy=' + mxnew + ',' + mynew);<br \/>\n   mxpts=eval(0.75 * eval(eval('' + xpos3) - eval('' + xprevlastoh.split('##')[1].split(',')[2])));<br \/>\n   mypts=eval(0.75 * eval(-1 * eval(eval('' + xpos4) - eval('' + xprevlastoh.split('##')[1].split(',')[3]))));<br \/>\n   \/\/alert('1:tocxcy ' + xptx + ',' + xpty + ' ... ' + mxnew + ',' + mynew + ' ' + xprevlastoh);<br \/>\n   \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cx', '' + xpos3);<br \/>\n   \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cy', '' + xpos4);<br \/>\n   \/\/alert((xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/' + mshape + '&gt;').replace(svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx'), '' + xpos3).replace(svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy'), '' + xpos4));<br \/>\n   if (firsttime) {<br \/>\n   document.getElementById('myif').style.width='291pt';<br \/>\n   document.getElementById('myif').style.height='210pt';<br \/>\n   document.getElementById('bltd').innerHTML=szero.outerHTML;<br \/>\n   document.getElementById('bltd').style.display='block';<br \/>\n   document.getElementById('bltd').style.visibility='visible';<br \/>\n   if (mshape == 'polygon') {<br \/>\n     cpts=document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('points');<br \/>\n     sets=cpts.split(' ');<br \/>\n     for (var klj=0; klj&lt;sets.length; klj++) {<br \/>\n       cpts=cpts.replace(sets[klj], '' + eval(mx + eval('' + sets[klj].split(',')[0])) + ',' + eval(my + eval('' + sets[klj].split(',')[1])));<br \/>\n     }<br \/>\n     document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('points', cpts);<br \/>\n   }<br \/>\n   document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cx', '' + mxnew);<br \/>\n   document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cy', '' + mynew);<br \/>\n   \/\/document.getElementById('ltd').style.backgroundRepeat='no-repeat';<br \/>\n   \/\/document.getElementById('ltd').style.backgroundPosition='right bottom';<br \/>\n   \/\/document.getElementById('ltd').style.backgoundImage='URL(data:image\/svg+xml;base64,' + window.btoa(szero.outerHTML.replace('&lt;\/g&gt;' + ges[eval(-1 + ges.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/' + mshape + '&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + ges[eval(-1 + ges.length)]) + ')';<br \/>\n   setTimeout(function(){ movethis(xprevlastoh, xpos3, xpos4, xptx, xpty, false); }, 3000);<br \/>\n   return '';<br \/>\n   }<br \/>\n   if (mshape == 'polygon') {<br \/>\n   wasfrom='' + eval(eval(eval('' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('rx')) * 8 \/ 3) \/ 96) + ',' + eval(eval(eval('' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('ry')) * 8 \/ 3) \/ 96);   \/\/'1'; \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).innerHTML;<br \/>\n   } else {<br \/>\n   wasfrom='' + eval(eval(eval('' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('rx')) * 8 \/ 3) \/ 96);   \/\/'1'; \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).innerHTML;<br \/>\n   }<br \/>\n   wasto=prompt('If you want the ' + shapeword + ' ' + diameter + ' not be as suggested (in inches), enter different ' + diameter.split(' (or use comma')[0] + ' (in inches) now, where for any non-initial ' + shapeword + 's a value of 0 makes them invisible.  Prefix + to your answer means an independent new ' + shapeword + ' is created.  Suffix with hash (#) followed by 6 or 8 character length fill colour.  Cancel withdraws proposed changes that are positionally shown below.', wasfrom);<br \/>\n   \/\/wasto=prompt('If you want the circle diameter not be as suggested (in inches), enter different diameter (in inches) now.  Cancel withdraws proposed changes that are positionally shown below.', wasfrom);<br \/>\n   if (wasto == null) {<br \/>\n   wasto='';<br \/>\n   document.getElementById('bltd').style.visibility='hidden';<br \/>\n   } else {<br \/>\n   wh=wasto.split(',');<br \/>\n   if (relrec != '') {<br \/>\n     if (('           ' + wasto).slice(-9).substring(0,1) == '#') {<br \/>\n        yncolftw=' fillcolor=\\\"' + wasto.slice(-9) + '\\\"';<br \/>\n        ellfill='' + wasto.slice(-9).substring(0,7);<br \/>\n        defcol=wasto.slice(-9);<br \/>\n        ellfillop='' + eval(eval(eval(eval('' + atoz.split(wasto.slice(-2).substring(0,1).toLowerCase())[0].length) * 16) + eval(eval('' + atoz.split(wasto.slice(-1).substring(0,1).toLowerCase())[0].length) * 1)) \/ 256);<br \/>\n        wasto=wasto.replace(wasto.slice(-9), '');<br \/>\n     } else if (('           ' + wasto).slice(-7).substring(0,1) == '#') {<br \/>\n        yncolftw=' fillcolor=\\\"' + wasto.slice(-7) + '\\\"';<br \/>\n        defcol=wasto.slice(-7);<br \/>\n        ellfill='' + wasto.slice(-7).substring(0,7);<br \/>\n        ellfillop='1.0';<br \/>\n        wasto=wasto.replace(wasto.slice(-7), '');<br \/>\n     }<br \/>\n     \/\/alert('relrec=' + relrec);<br \/>\n     if (relrec.indexOf('[height=') != -1) {<br \/>\n       if (relrec.indexOf(' fillcolor=') != -1 && yncolftw != '') {<br \/>\n         yncolft=' fillcolor=\\\"' + relrec.split(' fillcolor=\\\"')[1].split('\\\"')[0] + '\\\"';<br \/>\n       }<br \/>\n     \/\/alert('Relrec=' + relrec);<br \/>\n       if (relrec.indexOf(' pos=\\\"') != -1) {<br \/>\n         ynft=' pos=\\\"' + relrec.split(' pos=\\\"')[1].split('\\\"')[0] + '\\\"';<br \/>\n         dotx=eval('' + relrec.split(' pos=\\\"')[1].split('\\\"')[0].split(',')[0]);<br \/>\n         doty=eval('' + relrec.split(' pos=\\\"')[1].split('\\\"')[0].split(',')[1]);<br \/>\n     \/\/alert('ynft=' + ynft + ' and dotxy=' + dotx + ',' + doty + ' and dotdxy=' + dotdx + ',' + dotdy);<br \/>\n         dotx+=dotdx;<br \/>\n         doty+=dotdy;<br \/>\n         ynftw=' pos=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"';<br \/>\n         \/\/ynftw=' pos=\\\"' + Math.round(xptx) + ',' + Math.round(xpty) + '\\\"';<br \/>\n         \/\/alert('ynftw=' + ynftw + ' ... ' + document.getElementById('one').value.replace(relrec, relrec.replace('' + relrec.substring(0).split(' ')[0] + ' ', '[height=' + hwize(wasto.replace(\/^\\+\/g,'')) + ' ').replace(ynft, ynftw).replace(yncolft, yncolftw).replace(zncolft, zncolftw)));<br \/>\n       }<br \/>\n       if (wasto.trim() == '') { wasto='0';  } else if (wasto.trim() == '+') {  wasto='+0';  }<br \/>\n       if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n       document.getElementById('one').value=document.getElementById('one').value.replace(relrec, relrec.replace('' + relrec.substring(0).split(' ')[0] + ' ', '[height=' + hwize(wasto.replace(\/^\\+\/g,'')) + ' ').replace(ynft, ynftw).replace(yncolft, yncolftw).replace(zncolft, zncolftw));<br \/>\n       } else {<br \/>\n       partsof=document.getElementById('one').value.split('[height=');<br \/>\n       document.getElementById('one').value=document.getElementById('one').value.replace('[height=' + partsof[eval(-1 + partsof.length)].split(']')[0] + ']',  '[height=' + partsof[eval(-1 + partsof.length)].split(']')[0] + ']' + String.fromCharCode(10) + '  ' + clickcnt + ' [height=' + hwize(wasto.replace(\/^\\+\/g,'')) + ' fillcolor=\\\"' + defcol + '\\\" style=\\\"filled\\\" pos=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\" label=\\\"\\\" xlabel=\\\"\\\"]');<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   wh=wasto.split(',');<br \/>\n   if (wasto != wasfrom) {<br \/>\n   if (wasto.substring(0,1) == '+') {<br \/>\n   wh=wasto.substring(1).split(',');<br \/>\n   if (wasto.substring(1) != wasfrom) {<br \/>\n   newr='' + eval(eval(wasto.substring(1).split(',')[0] * 96 * 3 \/ eight));<br \/>\n   if (eval('' + wh.length) &gt; 1) { newry='' + eval(eval(wasto.replace(\/^\\+\/g,'').split(',')[1] * 96 * 3 \/ eight)); } else {  newry=newr; }<br \/>\n   \/\/alert('here ' + (xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=newel' + clickcnt + '&gt;&lt;\/' + mshape + '&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('rx') + '\\\"', '\\\"' + newr + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('ry') + '\\\"', '\\\"' + newry + '\\\"'));<br \/>\n   if (mshape == 'polygon') {<br \/>\n   xprevlastoh=reshape(xprevlastoh, '0.0', svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]),  mxnew, mynew, newr, newry);<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=\\\"newel' + clickcnt + '\\\"&gt;&lt;\/' + mshape + '&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('rx') + '\\\"', '\\\"' + newr + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('ry') + '\\\"', '\\\"' + newry + '\\\"');<br \/>\n   } else {<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=\\\"newel' + clickcnt + '\\\"&gt;&lt;\/' + mshape + '&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('rx') + '\\\"', '\\\"' + newr + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('ry') + '\\\"', '\\\"' + newry + '\\\"');<br \/>\n   }<br \/>\n   if (ellfill != '') {<br \/>\n     setTimeout(function(){  svgconto.document.getElementById('newel' + clickcnt).setAttribute('fill', '' + ellfill); }, 1000);<br \/>\n     \/\/alert('111:' + ellfill + ' ' + ellfillop);<br \/>\n   }<br \/>\n   if (ellfillop != '') {<br \/>\n     setTimeout(function(){  svgconto.document.getElementById('newel' + clickcnt).setAttribute('fill-opacity', '' + ellfillop); }, 1100);<br \/>\n   }<br \/>\n   } else {<br \/>\n   \/\/alert('There ' + (xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=newel' + clickcnt + '&gt;&lt;\/' + mshape + '&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"'));<br \/>\n   if (mshape == 'polygon') {<br \/>\n   xprevlastoh=reshape(xprevlastoh, '0.1', svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]), mxnew, mynew, newr, newry);<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=\\\"newel' + clickcnt + '\\\"&gt;&lt;\/' + mshape + '&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   } else {<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=\\\"newel' + clickcnt + '\\\"&gt;&lt;\/' + mshape + '&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   }<br \/>\n   if (ellfill != '') {<br \/>\n     setTimeout(function(){  svgconto.document.getElementById('newel' + clickcnt).setAttribute('fill', '' + ellfill); }, 1000);<br \/>\n     \/\/alert('11:' + ellfill + ' ' + ellfillop);<br \/>\n   }<br \/>\n   if (ellfillop != '') {<br \/>\n     setTimeout(function(){  svgconto.document.getElementById('newel' + clickcnt).setAttribute('fill-opacity', '' + ellfillop); }, 1100);<br \/>\n   }<br \/>\n   }<br \/>\n   } else {<br \/>\n   if (mshape == 'polygon') {<br \/>\n      xprevlastoh=reshape(xprevlastoh, '1.0', svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]), svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx'), svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy'), newr, newry);<br \/>\n   } else {<br \/>\n   wh=wasto.replace(\/^\\+\/g,'').split(',');<br \/>\n   newr='' + eval(eval(wasto.replace(\/^\\+\/g,'').split(',')[0] * 96 * 3 \/ eight));<br \/>\n   if (eval('' + wh.length) &gt; 1) { newry='' + eval(eval(wasto.replace(\/^\\+\/g,'').split(',')[1] * 96 * 3 \/ eight)); } else {  newry=newr; }<br \/>\n     svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('rx', '' + Math.round(newr));<br \/>\n     svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('ry', '' + Math.round(newry));<br \/>\n   }<br \/>\n   if (ellfill != '') {<br \/>\n     svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('fill', '' + ellfill);<br \/>\n   }<br \/>\n   if (ellfillop != '') {<br \/>\n     svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('fill-opacity', '' + ellfillop);<br \/>\n   }<br \/>\n   }<br \/>\n      }<br \/>\n   if (5 == 5) {<br \/>\n   if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n   newr='' + eval(eval(wasto.substring(0).split(',')[0] * 96 * 3 \/ eight));<br \/>\n   if (wasto.indexOf(',') != -1) { newry='' + eval(eval(wasto.substring(0).split(',')[1] * 96 * 3 \/ eight)); } else {  newry=newr; }<br \/>\n   if (mshape == 'polygon') {<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cx', '' + mxnew);<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cy', '' + mynew);<br \/>\n   xprevlastoh=reshape(xprevlastoh, '1.1', svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]), svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx'), svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy'), newr, newry);<br \/>\n   } else {<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cx', '' + mxnew);<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cy', '' + mynew);<br \/>\n   }<br \/>\n   if (ellfill != '') {<br \/>\n     svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('fill', '' + ellfill);<br \/>\n   }<br \/>\n   if (ellfillop != '') {<br \/>\n     svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('fill-opacity', '' + ellfillop);<br \/>\n   }<br \/>\n   }<br \/>\n   } else {<br \/>\n   newr='' + eval(eval(wasto.replace(\/^\\+\/g,'').substring(0).split(',')[0] * 96 * 3 \/ eight));<br \/>\n   if (wasto.indexOf(',') != -1) { newry='' + eval(eval(wasto.replace(\/^\\+\/g,'').substring(0).split(',')[1] * 96 * 3 \/ eight)); } else {  newry=newr; }<br \/>\n   if (mshape == 'polygon') {<br \/>\n   xprevlastoh=reshape(xprevlastoh, '0.4', svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]),  mxnew, mynew, newr, newry);<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=newel' + clickcnt + '&gt;&lt;\/' + mshape + '&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   } else {<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=newel' + clickcnt + '&gt;&lt;\/' + mshape + '&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   }<br \/>\n   if (ellfill != '') {<br \/>\n     setTimeout(function(){  svgconto.document.getElementById('newel' + clickcnt).setAttribute('fill', '' + ellfill); }, 1000);<br \/>\n     \/\/alert('1:' + ellfill + ' ' + ellfillop);<br \/>\n   }<br \/>\n   if (ellfillop != '') {<br \/>\n     setTimeout(function(){  svgconto.document.getElementById('newel' + clickcnt).setAttribute('fill-opacity', '' + ellfillop); }, 1100);<br \/>\n   }<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).style.visibility='hidden';<br \/>\n   \/\/var woox=window.open('','_blank','top=50,left=50,width=500,height=500');<br \/>\n   \/\/var ges=szero.outerHTML.split('&lt;\/g&gt;');<br \/>\n   \/\/woox.document.write(szero.outerHTML.replace('&lt;\/g&gt;' + ges[eval(-1 + ges.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/' + mshape + '&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + ges[eval(-1 + ges.length)]);<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   <br \/> <br \/>\n   } else if (xprevlastoh.indexOf('&lt;text') != -1) {<br \/>\n   if (('' + xpos3) != ('' + xprevlastoh.split('##')[1].split(',')[2]) || ('' + xpos4) != ('' + xprevlastoh.split('##')[1].split(',')[3])) {<br \/>\n   mx=eval(1.0 * eval(eval('' + xpos3) - eval('' + xprevlastoh.split('##')[1].split(',')[2])));<br \/>\n   my=eval(1.0 * eval(1.0 * eval(eval('' + xpos4) - eval('' + xprevlastoh.split('##')[1].split(',')[3]))));<br \/>\n   mxnew=eval(eval('' + xprevlastoh.split('##')[1].split(',')[4]) + mx);<br \/>\n   mynew=eval(eval('' + xprevlastoh.split('##')[1].split(',')[5]) + my);<br \/>\n   mxpts=eval(0.75 * eval(eval('' + xpos3) - eval('' + xprevlastoh.split('##')[1].split(',')[2])));<br \/>\n   mypts=eval(0.75 * eval(-1 * eval(eval('' + xpos4) - eval('' + xprevlastoh.split('##')[1].split(',')[3]))));<br \/>\n   console.log('11:tocxcy ' + xptx + ',' + xpty + ' ... ' + mxnew + ',' + mynew + ' ' + xprevlastoh);<br \/>\n   \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('x', '' + xpos3);<br \/>\n   \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('y', '' + xpos4);<br \/>\n   \/\/alert((xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/' + mshape + '&gt;').replace(svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x'), '' + xpos3).replace(svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y'), '' + xpos4));<br \/>\n<br \/>\n   if (firsttime) {<br \/>\n   \/\/document.getElementById('ltd').style.backgroundRepeat='no-repeat';<br \/>\n   \/\/document.getElementById('ltd').style.backgroundPosition='right bottom';<br \/>\n   \/\/alert(1);<br \/>\n   szeroouterHTML=szero.outerHTML;<br \/>\n   while (szeroouterHTML.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n      szeroouterHTML=szeroouterHTML.replace(String.fromCharCode(10),' ');<br \/>\n   }<br \/>\n   \/\/alert(11);<br \/>\n   gess=szeroouterHTML.split('&lt;\/g&gt;')<br \/>\n   \/\/document.getElementById('ltd').style.backgoundImage=\\\"URL('data:image\/svg+xml;utf8,\\\" + (szeroouterHTML.replace('&lt;\/g&gt;' + gess[eval(-1 + gess.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/' + mshape + '&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + gess[eval(-1 + ges.length)]) + \\\"')\\\";<br \/>\n   \/\/alert(111);<br \/>\n   document.getElementById('myif').style.width='291pt';<br \/>\n   document.getElementById('myif').style.height='210pt';<br \/>\n   document.getElementById('bltd').innerHTML=szero.outerHTML;<br \/>\n   document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('x', '' + mxnew);<br \/>\n   document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('y', '' + mynew);<br \/>\n   \/\/document.getElementById('ltd').style.backgroundRepeat='no-repeat';<br \/>\n   \/\/document.getElementById('ltd').style.backgroundPosition='right bottom';<br \/>\n   \/\/document.getElementById('ltd').style.backgoundImage='URL(data:image\/svg+xml;base64,' + window.btoa(szero.outerHTML.replace('&lt;\/g&gt;' + ges[eval(-1 + ges.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/' + mshape + '&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + ges[eval(-1 + ges.length)]) + ')';<br \/>\n   \/\/alert(1111);<br \/>\n   document.getElementById('bltd').style.display='block';<br \/>\n   document.getElementById('bltd').style.visibility='visible';<br \/>\n   setTimeout(function(){ movethis(xprevlastoh, xpos3, xpos4, xptx, xpty, false); }, 3000);<br \/>\n   \/\/alert(11111);<br \/>\n   return '';<br \/>\n   }<br \/>\n   wasfrom=svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).innerHTML;<br \/>\n   wasto=prompt('If you want the words not to be as suggested, enter different wording now.  Prefix + to your answer means an independent new text (without the prefixing text showing) is created.    Cancel withdraws proposed changes that are positionally shown below.', wasfrom);<br \/>\n   \/\/wasto=prompt('If you want the words not to be as suggested, enter different wording now.   Cancel withdraws proposed changes that are positionally shown below.', wasfrom);<br \/>\n   if (wasto == null) {<br \/>\n   wasto='';<br \/>\n   document.getElementById('bltd').style.visibility='hidden';<br \/>\n   } else {<br \/>\n   if (relrec != '') {<br \/>\n     \/\/alert('relrec=' + relrec + ' ' + xprevlastoh);<br \/>\n     if (relrec.indexOf(' xlp=') != -1 || relrec.indexOf(' pos=') != -1) {<br \/>\n     \/\/alert('RelRec=' + relrec + ' and xprevlastoh=' + xprevlastoh);<br \/>\n       if (relrec.indexOf(' xlp=\\\"') == -1 && relrec.indexOf(' pos=\\\"') != -1) { \/\/  label= xlabel=W  xlp=144,144<br \/>\n         ynft=' pos=\\\"' + relrec.split(' pos=\\\"')[1].split('\\\"')[0] + '\\\"';<br \/>\n         dotx=eval('' + relrec.split(' pos=\\\"')[1].split('\\\"')[0].split(',')[0]);<br \/>\n         doty=eval('' + relrec.split(' pos=\\\"')[1].split('\\\"')[0].split(',')[1]);<br \/>\n     \/\/alert('Ynft=' + ynft + ' and dotxy=' + dotx + ',' + doty + ' and dotdxy=' + dotdx + ',' + dotdy);<br \/>\n         dotx+=dotdx;<br \/>\n         doty+=dotdy;<br \/>\n         ynftw=' pos=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"';<br \/>\n         \/\/ynftw=' pos=\\\"' + Math.round(xptx) + ',' + Math.round(xpty) + '\\\"';<br \/>\n         \/\/alert('with=' + (relrec + ' label=\\\"\\\" xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\" xlp=\\\"' + dotx + ',' + doty + '\\\"'));<br \/>\n         if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n         document.getElementById('one').value=document.getElementById('one').value.replace(relrec, (relrec + ' label=\\\"\\\" xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\" xlp=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"').replace(' ' + wasfrom + ' [height=', ' ' + wasto.replace(\/^\\+\/g,'') + ' [height=').replace(' xlabel=\\\"' + wasfrom + '\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"').replace(' xlabel=\\\"\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"'));<br \/>\n         } else {<br \/>\n         document.getElementById('one').value=document.getElementById('one').value.replace('}', '  ' + wasto.replace(\/^\\+\/g,'') + ' [shape=plaintext pos=\\\"0,0\\\" label=\\\"\\\" xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\" xlp=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"]' + String.fromCharCode(10) + '}');<br \/>\n         }<br \/>\n       } else if (relrec.indexOf(' xlp=\\\"') != -1) {<br \/>\n         ynft=' xlp=\\\"' + relrec.split(' xlp=\\\"')[1].split('\\\"')[0] + '\\\"';<br \/>\n         dotx=eval('' + relrec.split(' xlp=\\\"')[1].split('\\\"')[0].split(',')[0]);<br \/>\n         doty=eval('' + relrec.split(' xlp=\\\"')[1].split('\\\"')[0].split(',')[1]);<br \/>\n     \/\/alert('ynft=' + ynft + ' and dotxy=' + dotx + ',' + doty + ' and dotdxy=' + dotdx + ',' + dotdy);<br \/>\n         dotx+=dotdx;<br \/>\n         doty+=dotdy;<br \/>\n         ynftw=' xlp=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"';<br \/>\n         \/\/ynftw=' pos=\\\"' + Math.round(xptx) + ',' + Math.round(xpty) + '\\\"';<br \/>\n         \/\/alert('ynftw=' + ynftw + ' ... ' + document.getElementById('one').value.replace(relrec, relrec.replace('' + relrec.substring(0).split(' ')[0] + ' ', '[height=' + hwize(wasto.replace(\/^\\+\/g,'')) + ' ').replace(ynft, ynftw).replace(yncolft, yncolftw).replace(zncolft, zncolftw).replace(' xlabel=\\\"' + wasfrom + '\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"').replace(' xlabel=\\\"\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"')));<br \/>\n         if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n         document.getElementById('one').value=document.getElementById('one').value.replace(relrec, relrec.replace(' ' + wasfrom + ' [height=', ' ' + wasto.replace(\/^\\+\/g,'') + ' [height=').replace(ynft, ynftw).replace(yncolft, yncolftw).replace(zncolft, zncolftw).replace(' xlabel=\\\"' + wasfrom + '\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"').replace(' xlabel=\\\"\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"'));<br \/>\n         } else {<br \/>\n         document.getElementById('one').value=document.getElementById('one').value.replace('}', '  ' + wasto.replace(\/^\\+\/g,'') + ' [shape=plaintext pos=\\\"0,0\\\" label=\\\"\\\" xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\" xlp=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"]' + String.fromCharCode(10) + '}');<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   if (wasto != wasfrom) {<br \/>\n   if (wasto.substring(0,1) == '+') {<br \/>\n   \/\/alert('adding ' + (xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;' + wasto.replace(\/^\\+\/g,'') + '&lt;\/text&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"'));<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=\\\"newel' + clickcnt + '\\\"&gt;' + wasto.replace(\/^\\+\/g,'') + '&lt;\/text&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   } else {<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).innerHTML=wasto;<br \/>\n   }<br \/>\n   }<br \/>\n   if (5 == 5) {<br \/>\n   if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('x', '' + mxnew);<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('y', '' + mynew);<br \/>\n   }<br \/>\n   } else {<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/' + mshape + '&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).style.visibility='hidden';<br \/>\n   \/\/var woox=window.open('','_blank','top=50,left=50,width=500,height=500');<br \/>\n   \/\/var ges=szero.outerHTML.split('&lt;\/g&gt;');<br \/>\n   \/\/woox.document.write(szero.outerHTML.replace('&lt;\/g&gt;' + ges[eval(-1 + ges.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split(' ' + ynn + '=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/' + mshape + '&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + ges[eval(-1 + ges.length)]);<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   lastoh='';<br \/>\n   document.getElementById('bltd').style.visibility='hidden';<br \/>\n }<br \/>\n <br \/>\n function clickreg(evt) {<br \/>\n       \/\/ lastoh ##pointx,pointy,pxx,pxy,cx,cy,svgindexofinterest,dotx,doty,svgid<br \/>\n                     \/\/alert(evt.target.outerHTML);<br \/>\n<br \/>\n       var ptx=0, pty=0, ptfromx=0, ptfromy=0;<br \/>\n       var prevlastoh=lastoh;<br \/>\n       if (evt.touches) {<br \/>\n       \/\/if (evt.touches[0].screenX) { pos3 = evt.touches[0].screenX;  pos4 = evt.touches[0].screenY; } else<br \/>\n       if (evt.touches[0].pageX) {<br \/>\n       pos3 = evt.touches[0].pageX;<br \/>\n       pos4 = evt.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = evt.touches[0].clientX;<br \/>\n       pos4 = evt.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/  \/\/ console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4);<br \/>\n       \/\/} else if (evt.screenX) { pos3 = evt.screenX;  pos4 = evt.screenY;<br \/>\n       } else if (evt.clientX || evt.clientY) {<br \/>\n        pos3 = evt.clientX;<br \/>\n        pos4 = evt.clientY;<br \/>\n        \/\/ console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4);<br \/>\n       } else {<br \/>\n        pos3 = evt.pageX;<br \/>\n        pos4 = evt.pageY;<br \/>\n        \/\/ console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4);<br \/>\n       }<br \/>\n       if (lastoh.indexOf(',' + pos3 + ',' + pos4 + ',') == -1) {<br \/>\n       if (document.getElementById('pointsx') && document.getElementById('pointsy')) {<br \/>\n       ptx=eval(document.getElementById('pointsx').innerHTML);<br \/>\n       pty=eval(document.getElementById('pointsy').innerHTML);<br \/>\n       } else {<br \/>\n       ptx=eval(pos3 * 3.0 \/ 4.0);<br \/>\n       pty=eval(288 - eval(pos4 * 3.0 \/ 4.0));<br \/>\n       }<br \/>\n       if (lastoh.indexOf('##') != -1) {<br \/>\n         console.log('6:' + lastoh.split('##')[1]);<br \/>\n         ptfromx=eval('' + lastoh.split('##')[1].split(',')[0]);<br \/>\n         ptfromy=eval('' + lastoh.split('##')[1].split(',')[1]);<br \/>\n         if (lastoh.split('##')[0].split(' id=')[0] == evt.target.outerHTML.split(' id=')[0] && lastoh.split('##')[0] != bigoh) {<br \/>\n           try {<br \/>\n           var xm=ptx;<br \/>\n           xm-=ptfromx;<br \/>\n           var ym=pty;<br \/>\n           ym-=ptfromy;<br \/>\n           \/\/alert('xm=' + xm + ' and ym=' + ym);<br \/>\n           if (eval('' + eval(Math.abs(xm) + Math.abs(ym))) &gt; 6) {<br \/>\n             lastoh=lastoh.replace(' id=', ' ID=').replace('&gt;##', '##');<br \/>\n           }<br \/>\n           } catch(exer) {<br \/>\n           alert('bad ' + lastoh);<br \/>\n           alert('bAd ' + ptx);<br \/>\n           alert('bAd ' + pty);<br \/>\n           alert('bAd ' + ptfromx);<br \/>\n           alert('bAd ' + ptfromy);<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       \/\/if (lastoh.split('##')[0].split(' id=')[0] == evt.target.outerHTML.split(' id=')[0]) {<br \/>\n       \/\/   alert('why ' + bigoh + ' ? ' + evt.target.outerHTML + ' ... ' + lastoh.split('##')[0].split(' id=')[0]);<br \/>\n       \/\/}<br \/>\n       if (lastoh.split('##')[0].split(' id=')[0] != evt.target.outerHTML.split(' id=')[0]) {<br \/>\n       \/\/lastoh=evt.target.outerHTML + '##' + Math.round(eval('' + (document.getElementById('pointsx') ? document.getElementById('pointsx').innerHTML : '0'))) + ',' + Math.round(eval('' + (document.getElementById('pointsy') ? document.getElementById('pointsy').innerHTML : '0'))) + ',' + pos3 + ',' + pos4;<br \/>\n       \/\/lastoh=evt.target.outerHTML + '##' + (eval('' + (document.getElementById('pointsx') ? document.getElementById('pointsx').innerHTML : '0'))) + ',' + (eval('' + (document.getElementById('pointsy') ? document.getElementById('pointsy').innerHTML : '0'))) + ',' + pos3 + ',' + pos4;<br \/>\n       lastoh=evt.target.outerHTML + '##' + ptx + ',' + pty + ',' + pos3 + ',' + pos4;<br \/>\n       clickcnt++;<br \/>\n       \/\/alert('467:' + clickcnt + ' ' + evt.target.outerHTML + ' ... ' + lastoh.split('##')[0].split(' id=')[0]);<br \/>\n       if (lastoh.split('##')[0].split(' id=')[0] == bigoh.split(' id=')[0]) {<br \/>\n       if (eval(clickcnt % 2) == 0) {<br \/>\n       if (top.document.URL.indexOf('nofix=') == -1) {<br \/>\n         document.getElementById('myh4').innerHTML+='&lt;span style=display:none;&gt;' + clickcnt + ': YesMoveTo' + ptx + ',' + pty + '&lt;\/span&gt;';<br \/>\n         \/\/setTimeout(function(){ movethis(prevlastoh, pos3, pos4, ptx, pty); }, 2100);<br \/>\n         \/\/alert(98);<br \/>\n         movethis(prevlastoh, pos3, pos4, ptx, pty, true);<br \/>\n       }<br \/>\n       lastoh='';<br \/>\n       } else {<br \/>\n       clickcnt--;<br \/>\n       }<br \/>\n       } else {<br \/>\n       if (lastoh.split('##')[0].split(' id=')[0] == bigoh.split(' id=')[0] && eval(clickcnt % 2) == 1) {<br \/>\n       clickcnt--;<br \/>\n       } else {<br \/>\n       if (eval(clickcnt % 2) == 0) {<br \/>\n       if (top.document.URL.indexOf('nofix=') == -1) {<br \/>\n         document.getElementById('myh4').innerHTML+='&lt;span style=display:none;&gt;' + clickcnt + ': ' + evt.target.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + '-yesMoveTo' + ptx + ',' + pty + '&lt;\/span&gt;';<br \/>\n         \/\/setTimeout(function(){ movethis(prevlastoh, pos3, pos4, ptx, pty); }, 2100);<br \/>\n         \/\/alert(298);<br \/>\n         movethis(prevlastoh, pos3, pos4, ptx, pty, true);<br \/>\n       }<br \/>\n       } else {<br \/>\n        if (top.document.URL.indexOf('nofix=') == -1) {<br \/>\n        document.getElementById('myh4').innerHTML+='&lt;span style=display:none;&gt;' + clickcnt + ': ' + onerecord(evt.target.outerHTML,ptx,pty,pos3,pos4).substring(1).split(' ')[0].split('&gt;')[0] + '&lt;\/span&gt;';<br \/>\n        \/\/alert('LASTOH=' + lastoh);<br \/>\n        }<br \/>\n        if (evt.target.outerHTML.indexOf(' id=') == -1) {<br \/>\n        \/\/alert('LAStOH=' + lastoh);<br \/>\n         evt.target.id='svgel' + clickcnt;<br \/>\n         lastoh+=',svgel' + clickcnt;<br \/>\n         lasto=evt.target;<br \/>\n         \/\/alert('lastoh=' + lastoh);<br \/>\n         if (midpoint != '' && rxry != '') {<br \/>\n           evt.target.setAttribute('cx', '' + midpoint.replace(\/^\\,\/g,'').split(',')[0]);<br \/>\n           evt.target.setAttribute('cy', '' + midpoint.replace(\/^\\,\/g,'').split(',')[1]);<br \/>\n           evt.target.setAttribute('rx', '' + rxry.replace(\/^\\,\/g,'').split(',')[0]);<br \/>\n           evt.target.setAttribute('ry', '' + rxry.replace(\/^\\,\/g,'').split(',')[1]);<br \/>\n           lastoh.replace('\/&gt;', '&gt;&lt;\/' + lastoh.substring(1).split(' ')[0] + '&gt;');<br \/>\n           lastoh.replace('&gt;', ' cx=\\\"' + midpoint.replace(\/^\\,\/g,'').split(',')[0] + '\\\" cy=\\\"' + midpoint.replace(\/^\\,\/g,'').split(',')[1] + '\\\" rx=\\\"' + midpoint.replace(\/^\\,\/g,'').split(',')[0] + '\\\" ry=\\\"' + rxry.replace(\/^\\,\/g,'').split(',')[1] + '\\\"&gt;');<br \/>\n           midpoint='';<br \/>\n           rxry='';<br \/>\n         }<br \/>\n         \/\/alert('67:' + clickcnt);<br \/>\n       } else {<br \/>\n         lastoh+=',' + evt.target.id;<br \/>\n         lasto=evt.target;<br \/>\n         \/\/alert('Lastoh=' + lastoh);<br \/>\n         if (midpoint != '' && rxry != '') {<br \/>\n           evt.target.setAttribute('cx', '' + midpoint.replace(\/^\\,\/g,'').split(',')[0]);<br \/>\n           evt.target.setAttribute('cy', '' + midpoint.replace(\/^\\,\/g,'').split(',')[1]);<br \/>\n           evt.target.setAttribute('rx', '' + rxry.replace(\/^\\,\/g,'').split(',')[0]);<br \/>\n           evt.target.setAttribute('ry', '' + rxry.replace(\/^\\,\/g,'').split(',')[1]);<br \/>\n           lastoh.replace('\/&gt;', '&gt;&lt;\/' + lastoh.substring(1).split(' ')[0] + '&gt;');<br \/>\n           lastoh.replace('&gt;', ' cx=\\\"' + midpoint.replace(\/^\\,\/g,'').split(',')[0] + '\\\" cy=\\\"' + midpoint.replace(\/^\\,\/g,'').split(',')[1] + '\\\" rx=\\\"' + midpoint.replace(\/^\\,\/g,'').split(',')[0] + '\\\" ry=\\\"' + rxry.replace(\/^\\,\/g,'').split(',')[1] + '\\\"&gt;');<br \/>\n           midpoint='';<br \/>\n           rxry='';<br \/>\n         }<br \/>\n         \/\/alert('267:' + clickcnt);<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php-----GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php-----GETME\" rel=\"noopener\">venn_diagram_basis.php<\/a> PHP hosting Dot fifth go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\">Venn Diagram<\/a> web application.<\/p>\n<p>And not that it makes much difference, but dot (or neat -n) graph, <i>or digraph,<\/i> are both available as graph types for the user to choose from.<\/p>\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\/graphviz-via-php-on-almalinux-dot-venn-diagram-box-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Box Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gvphpaldvdeft'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Functionality Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-venn-diagram-editing-functionality-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Functionality Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Functionality Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/venn_diagram_basis_editing_functionality.jpg\" title=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Functionality Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Functionality Tutorial<\/p><\/div>\n<p>Yes, further to yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Design Tutorial' href='#gvphpaldvdedt'>GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Design Tutorial<\/a> we have some SVG data based Venn Diagram editing functionality to offer the user today.  In amongst &#8220;editing&#8221; is new functionality (via a &#8220;+&#8221; prefix to the Javascript prompt window answer a user gives) to be able to create new circles or text in SVG and Dot formats.  As alluded to yesterday, these Javascript onmousedown and ontouchdown event instigated functions look like &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n function movethis(xprevlastoh, xpos3, xpos4, xptx, xpty, firsttime) {<br \/>\n   var mxpts=0, mypts=0, mx=0, my=0, mxnew=0, mynew=0, wasfrom=null, wasto=null, szeroouterHTML='', newr=0, svgindexofinterest=0;<br \/>\n   var ynft='youllneverfindthis', ynftw='youllneverfindthis';<br \/>\n   var yntxtft='youllneverfindthis', yntxtftw='youllneverfindthis';<br \/>\n   var ges=szero.outerHTML.split('&lt;\/g&gt;'), gess=[], dotx=0, doty=0, dotdx=0, dotdy=0;<br \/>\n   var hashbit=(xprevlastoh + '##').split('##')[1];<br \/>\n   var hashcs=hashbit.split(',');<br \/>\n   var precursor='[height=';<br \/>\n   var partsof=document.getElementById('one').value.split('[height=');<br \/>\n   var relrec='';<br \/>\n   if (eval('' + hashcs.length) &gt; 6) {<br \/>\n      dotdx=eval(1 * eval(eval('' + xptx) - eval('' + hashcs[0])));<br \/>\n      dotdy=eval(1 * eval(eval('' + xpty) - eval('' + hashcs[1])));<br \/>\n      svgindexofinterest=eval('' + ('' + hashcs[6].replace(\/^0000\/g, '').replace('-','')));<br \/>\n   }<br \/>\n   if (eval('' + partsof.length) &gt; eval('' + svgindexofinterest)) {<br \/>\n     \/\/alert(xprevlastoh);<br \/>\n     if (eval('' + svgindexofinterest) == 0) {<br \/>\n      relrec=partsof[svgindexofinterest];<br \/>\n      if (xprevlastoh.indexOf('&lt;text') == 0 && eval('' + hashcs.length) &gt; 1) {<br \/>\n        if (relrec.indexOf(' xlp=\\\"') == -1 && relrec.indexOf(' pos=\\\"') == -1) {<br \/>\n           relrec+=precursor + partsof[1].split(']')[0]<br \/>\n        }<br \/>\n      } else {<br \/>\n        if ((partsof[eval(-1 + eval('' + svgindexofinterest))] + '~').indexOf(' ' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).outerHTML.split('&gt;')[1].split('&lt;')[0] + ' ~') != -1) {<br \/>\n          precursor=' ' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).outerHTML.split('&gt;')[1].split('&lt;')[0] + ' [height=';<br \/>\n        }<br \/>\n        relrec=precursor + partsof[svgindexofinterest].split(']')[0];<br \/>\n      }<br \/>\n     } else {<br \/>\n      if (xprevlastoh.indexOf('&lt;text') == 0) {<br \/>\n       if ((partsof[eval(-1 + eval('' + svgindexofinterest))] + '~').indexOf(' ' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).outerHTML.split('&gt;')[1].split('&lt;')[0] + ' ~') != -1) {<br \/>\n          precursor=' ' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).outerHTML.split('&gt;')[1].split('&lt;')[0] + ' [height=';<br \/>\n       }<br \/>\n      }<br \/>\n      relrec=precursor + partsof[svgindexofinterest].split(']')[0];<br \/>\n     }<br \/>\n   }<br \/>\n   console.log('31:' + xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]);<br \/>\n   \/\/ lastoh ##pointx,pointy,pxx,pxy,cx,cy,svgindexofinterest,dotx,doty,svgid<br \/>\n   if (svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)])) {<br \/>\n   \/\/alert('found');<br \/>\n   if (xprevlastoh.indexOf('&lt;ellipse') != -1) {<br \/>\n   console.log('1:' + xprevlastoh.split('##')[1]);<br \/>\n   if (('' + xpos3) != ('' + xprevlastoh.split('##')[1].split(',')[2]) || ('' + xpos4) != ('' + xprevlastoh.split('##')[1].split(',')[3])) {<br \/>\n   mx=eval(1.0 * eval(eval('' + xpos3) - eval('' + xprevlastoh.split('##')[1].split(',')[2])));<br \/>\n   my=eval(1.0 * eval(1.0 * eval(eval('' + xpos4) - eval('' + xprevlastoh.split('##')[1].split(',')[3]))));<br \/>\n   \/\/alert('mxy=' + mx + ',' + my + ' ... ' + xprevlastoh);<br \/>\n   \/\/mxnew=eval(eval('' + xprevlastoh.split('##')[1].split(',')[4]) + mx);<br \/>\n   \/\/mynew=eval(eval('' + xprevlastoh.split('##')[1].split(',')[5]) + my);<br \/>\n   mxnew=eval(eval('' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx')) + mx);<br \/>\n   mynew=eval(eval('' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy')) + my);<br \/>\n   \/\/alert('mxnewxy=' + mxnew + ',' + mynew);<br \/>\n   mxpts=eval(0.75 * eval(eval('' + xpos3) - eval('' + xprevlastoh.split('##')[1].split(',')[2])));<br \/>\n   mypts=eval(0.75 * eval(-1 * eval(eval('' + xpos4) - eval('' + xprevlastoh.split('##')[1].split(',')[3]))));<br \/>\n   \/\/alert('1:tocxcy ' + xptx + ',' + xpty + ' ... ' + mxnew + ',' + mynew + ' ' + xprevlastoh);<br \/>\n   \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cx', '' + xpos3);<br \/>\n   \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cy', '' + xpos4);<br \/>\n   \/\/alert((xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/ellipse&gt;').replace(svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx'), '' + xpos3).replace(svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy'), '' + xpos4));<br \/>\n   if (firsttime) {<br \/>\n   document.getElementById('myif').style.width='291pt';<br \/>\n   document.getElementById('myif').style.height='210pt';<br \/>\n   document.getElementById('bltd').innerHTML=szero.outerHTML;<br \/>\n   document.getElementById('bltd').style.display='block';<br \/>\n   document.getElementById('bltd').style.visibility='visible';<br \/>\n   document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cx', '' + mxnew);<br \/>\n   document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cy', '' + mynew);<br \/>\n   document.getElementById('ltd').style.backgroundRepeat='no-repeat';<br \/>\n   document.getElementById('ltd').style.backgroundPosition='right bottom';<br \/>\n   document.getElementById('ltd').style.backgoundImage='URL(data:image\/svg+xml;base64,' + window.btoa(szero.outerHTML.replace('&lt;\/g&gt;' + ges[eval(-1 + ges.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/ellipse&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + ges[eval(-1 + ges.length)]) + ')';<br \/>\n   setTimeout(function(){ movethis(xprevlastoh, xpos3, xpos4, xptx, xpty, false); }, 3000);<br \/>\n   return '';<br \/>\n   }<br \/>\n   wasfrom='' + eval(eval(eval('' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('rx')) * 8 \/ 3) \/ 96);   \/\/'1'; \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).innerHTML;<br \/>\n   wasto=prompt('If you want the circle diameter not be as suggested (in inches), enter different diameter (in inches) now, where for any non-initial circles a value of 0 makes them invisible.  Prefix + to your answer means an independent new circle is created.  Cancel withdraws proposed changes that are positionally shown below.', wasfrom);<br \/>\n   \/\/wasto=prompt('If you want the circle diameter not be as suggested (in inches), enter different diameter (in inches) now.  Cancel withdraws proposed changes that are positionally shown below.', wasfrom);<br \/>\n   if (wasto == null) {<br \/>\n   wasto='';<br \/>\n   document.getElementById('bltd').style.visibility='hidden';<br \/>\n   } else {<br \/>\n   if (relrec != '') {<br \/>\n     \/\/alert('relrec=' + relrec);<br \/>\n     if (relrec.indexOf('[height=') != -1) {<br \/>\n     \/\/alert('Relrec=' + relrec);<br \/>\n       if (relrec.indexOf(' pos=\\\"') != -1) {<br \/>\n         ynft=' pos=\\\"' + relrec.split(' pos=\\\"')[1].split('\\\"')[0] + '\\\"';<br \/>\n         dotx=eval('' + relrec.split(' pos=\\\"')[1].split('\\\"')[0].split(',')[0]);<br \/>\n         doty=eval('' + relrec.split(' pos=\\\"')[1].split('\\\"')[0].split(',')[1]);<br \/>\n     \/\/alert('ynft=' + ynft + ' and dotxy=' + dotx + ',' + doty + ' and dotdxy=' + dotdx + ',' + dotdy);<br \/>\n         dotx+=dotdx;<br \/>\n         doty+=dotdy;<br \/>\n         ynftw=' pos=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"';<br \/>\n         \/\/ynftw=' pos=\\\"' + Math.round(xptx) + ',' + Math.round(xpty) + '\\\"';<br \/>\n         \/\/alert('ynftw=' + ynftw + ' ... ' + document.getElementById('one').value.replace(relrec, relrec.replace('' + relrec.substring(0).split(' ')[0] + ' ', '[height=' + wasto.replace(\/^\\+\/g,'') + ' ').replace(ynft, ynftw)));<br \/>\n       }<br \/>\n       if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n       document.getElementById('one').value=document.getElementById('one').value.replace(relrec, relrec.replace('' + relrec.substring(0).split(' ')[0] + ' ', '[height=' + wasto.replace(\/^\\+\/g,'') + ' ').replace(ynft, ynftw));<br \/>\n       } else {<br \/>\n       partsof=document.getElementById('one').value.split('[height=');<br \/>\n       document.getElementById('one').value=document.getElementById('one').value.replace('[height=' + partsof[eval(-1 + partsof.length)].split(']')[0] + ']',  '[height=' + partsof[eval(-1 + partsof.length)].split(']')[0] + ']' + String.fromCharCode(10) + '  ' + clickcnt + ' [height=' + wasto.replace(\/^\\+\/g,'') + ' fillcolor=\\\"#90806090\\\" style=\\\"filled\\\" pos=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\" label=\\\"\\\" xlabel=\\\"\\\"]');<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   if (wasto != wasfrom) {<br \/>\n   if (wasto.substring(0,1) == '+') {<br \/>\n   if (wasto.substring(1) != wasfrom) {<br \/>\n   newr='' + eval(eval(wasto.substring(1) * 96 * 3 \/ 8));<br \/>\n   \/\/alert('here ' + (xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=newel' + clickcnt + '&gt;&lt;\/ellipse&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('rx') + '\\\"', '\\\"' + newr + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('ry') + '\\\"', '\\\"' + newr + '\\\"'));<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=\\\"newel' + clickcnt + '\\\"&gt;&lt;\/ellipse&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('rx') + '\\\"', '\\\"' + newr + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('ry') + '\\\"', '\\\"' + newr + '\\\"');<br \/>\n   } else {<br \/>\n   \/\/alert('There ' + (xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=newel' + clickcnt + '&gt;&lt;\/ellipse&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"'));<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=\\\"newel' + clickcnt + '\\\"&gt;&lt;\/ellipse&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   }<br \/>\n   } else {<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('rx', '' + eval(eval('' + wasto) * 48 * 3 \/ 4));<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('ry', '' + eval(eval('' + wasto) * 48 * 3 \/ 4));<br \/>\n   }<br \/>\n   }<br \/>\n   if (5 == 5) {<br \/>\n   if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cx', '' + mxnew);<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('cy', '' + mynew);<br \/>\n   }<br \/>\n   } else {<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/ellipse&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).style.visibility='hidden';<br \/>\n   \/\/var woox=window.open('','_blank','top=50,left=50,width=500,height=500');<br \/>\n   \/\/var ges=szero.outerHTML.split('&lt;\/g&gt;');<br \/>\n   \/\/woox.document.write(szero.outerHTML.replace('&lt;\/g&gt;' + ges[eval(-1 + ges.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/ellipse&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + ges[eval(-1 + ges.length)]);<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   } else if (xprevlastoh.indexOf('&lt;text') != -1) {<br \/>\n   if (('' + xpos3) != ('' + xprevlastoh.split('##')[1].split(',')[2]) || ('' + xpos4) != ('' + xprevlastoh.split('##')[1].split(',')[3])) {<br \/>\n   mx=eval(1.0 * eval(eval('' + xpos3) - eval('' + xprevlastoh.split('##')[1].split(',')[2])));<br \/>\n   my=eval(1.0 * eval(1.0 * eval(eval('' + xpos4) - eval('' + xprevlastoh.split('##')[1].split(',')[3]))));<br \/>\n   mxnew=eval(eval('' + xprevlastoh.split('##')[1].split(',')[4]) + mx);<br \/>\n   mynew=eval(eval('' + xprevlastoh.split('##')[1].split(',')[5]) + my);<br \/>\n   mxpts=eval(0.75 * eval(eval('' + xpos3) - eval('' + xprevlastoh.split('##')[1].split(',')[2])));<br \/>\n   mypts=eval(0.75 * eval(-1 * eval(eval('' + xpos4) - eval('' + xprevlastoh.split('##')[1].split(',')[3]))));<br \/>\n   console.log('11:tocxcy ' + xptx + ',' + xpty + ' ... ' + mxnew + ',' + mynew + ' ' + xprevlastoh);<br \/>\n   \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('x', '' + xpos3);<br \/>\n   \/\/svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('y', '' + xpos4);<br \/>\n   \/\/alert((xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/ellipse&gt;').replace(svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x'), '' + xpos3).replace(svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y'), '' + xpos4));<br \/>\n<br \/>\n   if (firsttime) {<br \/>\n   document.getElementById('ltd').style.backgroundRepeat='no-repeat';<br \/>\n   document.getElementById('ltd').style.backgroundPosition='right bottom';<br \/>\n   szeroouterHTML=szero.outerHTML;<br \/>\n   while (szeroouterHTML.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n      szeroouterHTML=szeroouterHTML.replace(String.fromCharCode(10),' ');<br \/>\n   }<br \/>\n   gess=szeroouterHTML.split('&lt;\/g&gt;')<br \/>\n   document.getElementById('ltd').style.backgoundImage=\\\"URL('data:image\/svg+xml;utf8,\\\" + (szeroouterHTML.replace('&lt;\/g&gt;' + gess[eval(-1 + gess.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/ellipse&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + gess[eval(-1 + ges.length)]) + \\\"')\\\";<br \/>\n   document.getElementById('myif').style.width='291pt';<br \/>\n   document.getElementById('myif').style.height='210pt';<br \/>\n   document.getElementById('bltd').innerHTML=szero.outerHTML;<br \/>\n   document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('x', '' + mxnew);<br \/>\n   document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('y', '' + mynew);<br \/>\n   document.getElementById('ltd').style.backgroundRepeat='no-repeat';<br \/>\n   document.getElementById('ltd').style.backgroundPosition='right bottom';<br \/>\n   document.getElementById('ltd').style.backgoundImage='URL(data:image\/svg+xml;base64,' + window.btoa(szero.outerHTML.replace('&lt;\/g&gt;' + ges[eval(-1 + ges.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/ellipse&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cx') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('cy') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + ges[eval(-1 + ges.length)]) + ')';<br \/>\n   setTimeout(function(){ movethis(xprevlastoh, xpos3, xpos4, xptx, xpty, false); }, 3000);<br \/>\n   return '';<br \/>\n   }<br \/>\n   wasfrom=svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).innerHTML;<br \/>\n   wasto=prompt('If you want the words not to be as suggested, enter different wording now.  Prefix + to your answer means an independent new text (without the prefixing text showing) is created.    Cancel withdraws proposed changes that are positionally shown below.', wasfrom);<br \/>\n   \/\/wasto=prompt('If you want the words not to be as suggested, enter different wording now.   Cancel withdraws proposed changes that are positionally shown below.', wasfrom);<br \/>\n   if (wasto == null) {<br \/>\n   wasto='';<br \/>\n   document.getElementById('bltd').style.visibility='hidden';<br \/>\n   } else {<br \/>\n   if (relrec != '') {<br \/>\n     \/\/alert('relrec=' + relrec + ' ' + xprevlastoh);<br \/>\n     if (relrec.indexOf(' xlp=') != -1 || relrec.indexOf(' pos=') != -1) {<br \/>\n     \/\/alert('RelRec=' + relrec + ' and xprevlastoh=' + xprevlastoh);<br \/>\n       if (relrec.indexOf(' xlp=\\\"') == -1 && relrec.indexOf(' pos=\\\"') != -1) { \/\/  label= xlabel=W  xlp=144,144<br \/>\n         ynft=' pos=\\\"' + relrec.split(' pos=\\\"')[1].split('\\\"')[0] + '\\\"';<br \/>\n         dotx=eval('' + relrec.split(' pos=\\\"')[1].split('\\\"')[0].split(',')[0]);<br \/>\n         doty=eval('' + relrec.split(' pos=\\\"')[1].split('\\\"')[0].split(',')[1]);<br \/>\n     \/\/alert('Ynft=' + ynft + ' and dotxy=' + dotx + ',' + doty + ' and dotdxy=' + dotdx + ',' + dotdy);<br \/>\n         dotx+=dotdx;<br \/>\n         doty+=dotdy;<br \/>\n         ynftw=' pos=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"';<br \/>\n         \/\/ynftw=' pos=\\\"' + Math.round(xptx) + ',' + Math.round(xpty) + '\\\"';<br \/>\n         \/\/alert('with=' + (relrec + ' label=\\\"\\\" xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\" xlp=\\\"' + dotx + ',' + doty + '\\\"'));<br \/>\n         if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n         document.getElementById('one').value=document.getElementById('one').value.replace(relrec, (relrec + ' label=\\\"\\\" xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\" xlp=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"').replace(' ' + wasfrom + ' [height=', ' ' + wasto.replace(\/^\\+\/g,'') + ' [height=').replace(' xlabel=\\\"' + wasfrom + '\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"').replace(' xlabel=\\\"\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"'));<br \/>\n         } else {<br \/>\n         document.getElementById('one').value=document.getElementById('one').value.replace('}', '  ' + wasto.replace(\/^\\+\/g,'') + ' [shape=plaintext pos=\\\"0,0\\\" label=\\\"\\\" xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\" xlp=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"]' + String.fromCharCode(10) + '}');<br \/>\n         }<br \/>\n       } else if (relrec.indexOf(' xlp=\\\"') != -1) {<br \/>\n         ynft=' xlp=\\\"' + relrec.split(' xlp=\\\"')[1].split('\\\"')[0] + '\\\"';<br \/>\n         dotx=eval('' + relrec.split(' xlp=\\\"')[1].split('\\\"')[0].split(',')[0]);<br \/>\n         doty=eval('' + relrec.split(' xlp=\\\"')[1].split('\\\"')[0].split(',')[1]);<br \/>\n     \/\/alert('ynft=' + ynft + ' and dotxy=' + dotx + ',' + doty + ' and dotdxy=' + dotdx + ',' + dotdy);<br \/>\n         dotx+=dotdx;<br \/>\n         doty+=dotdy;<br \/>\n         ynftw=' xlp=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"';<br \/>\n         \/\/ynftw=' pos=\\\"' + Math.round(xptx) + ',' + Math.round(xpty) + '\\\"';<br \/>\n         \/\/alert('ynftw=' + ynftw + ' ... ' + document.getElementById('one').value.replace(relrec, relrec.replace('' + relrec.substring(0).split(' ')[0] + ' ', '[height=' + wasto.replace(\/^\\+\/g,'') + ' ').replace(ynft, ynftw).replace(' xlabel=\\\"' + wasfrom + '\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"').replace(' xlabel=\\\"\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"')));<br \/>\n         if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n         document.getElementById('one').value=document.getElementById('one').value.replace(relrec, relrec.replace(' ' + wasfrom + ' [height=', ' ' + wasto.replace(\/^\\+\/g,'') + ' [height=').replace(ynft, ynftw).replace(' xlabel=\\\"' + wasfrom + '\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"').replace(' xlabel=\\\"\\\"', ' xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\"'));<br \/>\n         } else {<br \/>\n         document.getElementById('one').value=document.getElementById('one').value.replace('}', '  ' + wasto.replace(\/^\\+\/g,'') + ' [shape=plaintext pos=\\\"0,0\\\" label=\\\"\\\" xlabel=\\\"' + wasto.replace(\/^\\+\/g,'') + '\\\" xlp=\\\"' + Math.round(dotx) + ',' + Math.round(doty) + '\\\"]' + String.fromCharCode(10) + '}');<br \/>\n         }<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   if (wasto != wasfrom) {<br \/>\n   if (wasto.substring(0,1) == '+') {<br \/>\n   \/\/alert('adding ' + (xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;' + wasto.replace(\/^\\+\/g,'') + '&lt;\/text&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"'));<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + ' id=\\\"newel' + clickcnt + '\\\"&gt;' + wasto.replace(\/^\\+\/g,'') + '&lt;\/text&gt;').replace('&gt;' + wasfrom + '&lt;', '&gt;' + wasto.substring(1) + '&lt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   } else {<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).innerHTML=wasto;<br \/>\n   }<br \/>\n   }<br \/>\n   if (5 == 5) {<br \/>\n   if ((wasto + ' ').substring(0,1) != '+') {<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('x', '' + mxnew);<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).setAttribute('y', '' + mynew);<br \/>\n   }<br \/>\n   } else {<br \/>\n   gzero.innerHTML+=(xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/ellipse&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"');<br \/>\n   svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).style.visibility='hidden';<br \/>\n   \/\/var woox=window.open('','_blank','top=50,left=50,width=500,height=500');<br \/>\n   \/\/var ges=szero.outerHTML.split('&lt;\/g&gt;');<br \/>\n   \/\/woox.document.write(szero.outerHTML.replace('&lt;\/g&gt;' + ges[eval(-1 + ges.length)], (xprevlastoh.split(' id=')[0].split(' ID=')[0].split('\/&gt;')[0].split('&gt;')[0] + '&gt;&lt;\/ellipse&gt;').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('x') + '\\\"', '\\\"' + mxnew + '\\\"').replace('\\\"' + svgconto.document.getElementById(xprevlastoh.split(',')[eval(-1 + xprevlastoh.split(',').length)]).getAttribute('y') + '\\\"', '\\\"' + mynew + '\\\"') + '') + '&lt;\/g&gt;' + ges[eval(-1 + ges.length)]);<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   lastoh='';<br \/>\n   document.getElementById('bltd').style.visibility='hidden';<br \/>\n }<br \/>\n<br \/> <br \/>\n function clickreg(evt) {<br \/>\n       \/\/ lastoh ##pointx,pointy,pxx,pxy,cx,cy,svgindexofinterest,dotx,doty,svgid<br \/>\n                     \/\/alert(evt.target.outerHTML);<br \/>\n<br \/>\n       var ptx=0, pty=0, ptfromx=0, ptfromy=0;<br \/>\n       var prevlastoh=lastoh;<br \/>\n       if (evt.touches) {<br \/>\n       \/\/if (evt.touches[0].screenX) { pos3 = evt.touches[0].screenX;  pos4 = evt.touches[0].screenY; } else<br \/>\n       if (evt.touches[0].pageX) {<br \/>\n       pos3 = evt.touches[0].pageX;<br \/>\n       pos4 = evt.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = evt.touches[0].clientX;<br \/>\n       pos4 = evt.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/  \/\/ console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4);<br \/>\n       \/\/} else if (evt.screenX) { pos3 = evt.screenX;  pos4 = evt.screenY;<br \/>\n       } else if (evt.clientX || evt.clientY) {<br \/>\n        pos3 = evt.clientX;<br \/>\n        pos4 = evt.clientY;<br \/>\n        \/\/ console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4);<br \/>\n       } else {<br \/>\n        pos3 = evt.pageX;<br \/>\n        pos4 = evt.pageY;<br \/>\n        \/\/ console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4);<br \/>\n       }<br \/>\n       if (lastoh.indexOf(',' + pos3 + ',' + pos4 + ',') == -1) {<br \/>\n       if (document.getElementById('pointsx') && document.getElementById('pointsy')) {<br \/>\n       ptx=eval(document.getElementById('pointsx').innerHTML);<br \/>\n       pty=eval(document.getElementById('pointsy').innerHTML);<br \/>\n       } else {<br \/>\n       ptx=eval(pos3 * 3.0 \/ 4.0);<br \/>\n       pty=eval(288 - eval(pos4 * 3.0 \/ 4.0));<br \/>\n       }<br \/>\n       if (lastoh.indexOf('##') != -1) {<br \/>\n         console.log('6:' + lastoh.split('##')[1]);<br \/>\n         ptfromx=eval('' + lastoh.split('##')[1].split(',')[0]);<br \/>\n         ptfromy=eval('' + lastoh.split('##')[1].split(',')[1]);<br \/>\n         if (lastoh.split('##')[0].split(' id=')[0] == evt.target.outerHTML.split(' id=')[0] && lastoh.split('##')[0] != bigoh) {<br \/>\n           try {<br \/>\n           var xm=ptx;<br \/>\n           xm-=ptfromx;<br \/>\n           var ym=pty;<br \/>\n           ym-=ptfromy;<br \/>\n           \/\/alert('xm=' + xm + ' and ym=' + ym);<br \/>\n           if (eval('' + eval(Math.abs(xm) + Math.abs(ym))) &gt; 6) {<br \/>\n             lastoh=lastoh.replace(' id=', ' ID=').replace('&gt;##', '##');<br \/>\n           }<br \/>\n           } catch(exer) {<br \/>\n           alert('bad ' + lastoh);<br \/>\n           alert('bAd ' + ptx);<br \/>\n           alert('bAd ' + pty);<br \/>\n           alert('bAd ' + ptfromx);<br \/>\n           alert('bAd ' + ptfromy);<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n       \/\/if (lastoh.split('##')[0].split(' id=')[0] == evt.target.outerHTML.split(' id=')[0]) {<br \/>\n       \/\/   alert('why ' + bigoh + ' ? ' + evt.target.outerHTML + ' ... ' + lastoh.split('##')[0].split(' id=')[0]);<br \/>\n       \/\/}<br \/>\n       if (lastoh.split('##')[0].split(' id=')[0] != evt.target.outerHTML.split(' id=')[0]) {<br \/>\n       \/\/lastoh=evt.target.outerHTML + '##' + Math.round(eval('' + (document.getElementById('pointsx') ? document.getElementById('pointsx').innerHTML : '0'))) + ',' + Math.round(eval('' + (document.getElementById('pointsy') ? document.getElementById('pointsy').innerHTML : '0'))) + ',' + pos3 + ',' + pos4;<br \/>\n       \/\/lastoh=evt.target.outerHTML + '##' + (eval('' + (document.getElementById('pointsx') ? document.getElementById('pointsx').innerHTML : '0'))) + ',' + (eval('' + (document.getElementById('pointsy') ? document.getElementById('pointsy').innerHTML : '0'))) + ',' + pos3 + ',' + pos4;<br \/>\n       lastoh=evt.target.outerHTML + '##' + ptx + ',' + pty + ',' + pos3 + ',' + pos4;<br \/>\n       clickcnt++;<br \/>\n       \/\/alert('467:' + clickcnt + ' ' + evt.target.outerHTML + ' ... ' + lastoh.split('##')[0].split(' id=')[0]);<br \/>\n       if (lastoh.split('##')[0].split(' id=')[0] == bigoh.split(' id=')[0]) {<br \/>\n       if (eval(clickcnt % 2) == 0) {<br \/>\n       if (top.document.URL.indexOf('nofix=') == -1) {<br \/>\n         document.getElementById('myh4').innerHTML+='&lt;span style=display:none;&gt;' + clickcnt + ': YesMoveTo' + ptx + ',' + pty + '&lt;\/span&gt;';<br \/>\n         \/\/setTimeout(function(){ movethis(prevlastoh, pos3, pos4, ptx, pty); }, 2100);<br \/>\n         \/\/alert(98);<br \/>\n         movethis(prevlastoh, pos3, pos4, ptx, pty, true);<br \/>\n       }<br \/>\n       lastoh='';<br \/>\n       } else {<br \/>\n       clickcnt--;<br \/>\n       }<br \/>\n       } else {<br \/>\n       if (lastoh.split('##')[0].split(' id=')[0] == bigoh.split(' id=')[0] && eval(clickcnt % 2) == 1) {<br \/>\n       clickcnt--;<br \/>\n       } else {<br \/>\n       if (eval(clickcnt % 2) == 0) {<br \/>\n       if (top.document.URL.indexOf('nofix=') == -1) {<br \/>\n         document.getElementById('myh4').innerHTML+='&lt;span style=display:none;&gt;' + clickcnt + ': ' + evt.target.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + '-yesMoveTo' + ptx + ',' + pty + '&lt;\/span&gt;';<br \/>\n         \/\/setTimeout(function(){ movethis(prevlastoh, pos3, pos4, ptx, pty); }, 2100);<br \/>\n         \/\/alert(298);<br \/>\n         movethis(prevlastoh, pos3, pos4, ptx, pty, true);<br \/>\n       }<br \/>\n       } else {<br \/>\n        if (top.document.URL.indexOf('nofix=') == -1) {<br \/>\n        document.getElementById('myh4').innerHTML+='&lt;span style=display:none;&gt;' + clickcnt + ': ' + onerecord(evt.target.outerHTML,ptx,pty,pos3,pos4).substring(1).split(' ')[0].split('&gt;')[0] + '&lt;\/span&gt;';<br \/>\n        }<br \/>\n        if (evt.target.outerHTML.indexOf(' id=') == -1) {<br \/>\n         evt.target.id='svgel' + clickcnt;<br \/>\n         lastoh+=',svgel' + clickcnt;<br \/>\n         lasto=evt.target;<br \/>\n         \/\/alert('67:' + clickcnt);<br \/>\n       } else {<br \/>\n         lastoh+=',' + evt.target.id;<br \/>\n         lasto=evt.target;<br \/>\n         \/\/alert('267:' + clickcnt);<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n       }<br \/>\n }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>And along the way, here, we determined by starting down that road, that the effort was not worth the reward to also allow HTML output format also work this Venn Diagram editing functionality.  No problems, because in any case, the PNG and JPEG formats are not capable either.  It is a case of &#8220;horses for courses&#8221;!<\/p>\n<p>Similarly for the shape dropdown we&#8217;ve opened up again.  Only the shape=circle scenario works SVG format output for Venn Diagram editing functionality.<\/p>\n<p>And so, yet again. feel free to try <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php----GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php----GETME\" rel=\"noopener\">venn_diagram_basis.php<\/a> PHP hosting Dot fourth go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\">Venn Diagram<\/a> web application.<\/p>\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\/graphviz-via-php-on-almalinux-dot-venn-diagram-editing-functionality-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Functionality Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gvphpaldvdedt'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Design Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-venn-diagram-editing-design-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Design Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Design Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/venn_diagram_basis_editing.jpg\" title=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Design Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Design Tutorial<\/p><\/div>\n<p>Oh well!  We need another <font size=1>(ie. third)<\/font> day on the &#8230;<\/p>\n<ul>\n<li>circle and text Venn Diagram positioning &#8230;<\/li>\n<li>circle scaling &#8230;<\/li>\n<li>text wording<\/li>\n<\/ul>\n<p> &#8230; &#8220;Venn Diagram Editing&#8221; journey we started with yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Positioning Tutorial' href='#gvphpaldvdpt'>GraphViz via PHP on AlmaLinux Dot Venn Diagram Positioning Tutorial<\/a>.  But, today, we think we can settle on a &#8220;two discrete (so far just) SVG (but later also HTML) click&#8221; paradigm &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n              gs[sd].addEventListener('mousedown', function(event){ parent.clickreg(event); });<br \/>\n              gs[sd].addEventListener('touchdown', function(event){ parent.clickreg(event); });<br \/>\n<\/code><br \/>\n&#8220;; ?><\/p>\n<p> &#8230; applied to all the SVG &#8220;g&#8221; elements, and we can use for the &#8220;whole shebang&#8221; of our solution to this piece of functionality.  We&#8217;ll be showing you a more settled upon &#8220;function clickreg&#8221; <font size=1>(hopefully before the day of rest)<\/font>.<\/p>\n<p>And so, again. feel free to try <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php---GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php---GETME\" rel=\"noopener\">venn_diagram_basis.php<\/a> PHP hosting Dot third go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\">Venn Diagram<\/a> web application.<\/p>\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\/graphviz-via-php-on-almalinux-dot-venn-diagram-editing-design-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Editing Design Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gvphpaldvdpt'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Positioning Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-venn-diagram-positioning-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Positioning Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Positioning Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/venn_diagram_basis_units.jpg\" title=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Positioning Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Positioning Tutorial<\/p><\/div>\n<p>We&#8217;ve had to break up yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Tutorial' href='#gvphpaldvdt'>GraphViz via PHP on AlmaLinux Dot Venn Diagram Tutorial<\/a>&#8216;s proposed <font size=1>(moving forward)<\/font> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-venn-diagram-tutorial\/'>\n<p>You&#8217;ll see playing with Venn Diagrams that we&#8217;ll need some time to think on whether we can improve positioning of the circles, a matter critical to Venn Diagram &#8220;drawing&#8221;.<\/p>\n<\/blockquote>\n<p> &#8230; &#8220;forewarning work&#8221; into a &#8220;more than one day&#8221; scenario, it looks like, from today&#8217;s &#8230;<\/p>\n<ol>\n<li>get the user, via <a target=\"_blank\" title='Onmousemove event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onmousemove.asp' rel=\"noopener\"><sub>on<\/sub>mousemove<\/a> event Javascript logic <font size=1>(&#8220;szero&#8221; referring to the SVG topmost element object of the SVG (no HTML imagemap thoughts yet) within the id=myif iframe element of the parent window)<\/font> &#8230;<br \/>\n<code><br \/>\nszero.addEventListener('mousemove', function(){<br \/>\n       if (event.touches) {<br \/>\n       \/\/if (event.touches[0].screenX) { pos3 = event.touches[0].screenX;  pos4 = event.touches[0].screenY; } else<br \/>\n       if (event.touches[0].pageX) {<br \/>\n       pos3 = event.touches[0].pageX;<br \/>\n       pos4 = event.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = event.touches[0].clientX;<br \/>\n       pos4 = event.touches[0].clientY;<br \/>\n       }<br \/>\n       console.log('pos3 = ' + pos3 + ',pos4 = ' + pos4);<br \/>\n       \/\/} else if (event.screenX) { pos3 = event.screenX;  pos4 = event.screenY;<br \/>\n       } else if (event.clientX || event.clientY) {<br \/>\n        pos3 = event.clientX;<br \/>\n        pos4 = event.clientY;<br \/>\n       console.log('pos3 = ' + pos3 + ' ,pos4 = ' + pos4);<br \/>\n       } else {<br \/>\n        pos3 = event.pageX;<br \/>\n        pos4 = event.pageY;<br \/>\n       console.log('pos3 = ' + pos3 + ', pos4 = ' + pos4);<br \/>\n       }<br \/>\n       if (event.target.outerHTML.indexOf('&lt;body') == 0) {<br \/>\n       if (dbt == '') { dbt=document.body.title; }<br \/>\n       }<br \/>\n       pos4+=140; pos3-=40;<br \/>\n       parent.document.getElementById('pos').innerHTML=' ... ' + pos3 + ',' + pos4 + ' ... inches ... ' + eval(pos3 \/ 96).toPrecision(5) + ',' + eval(eval(288 - pos4) \/ 96).toPrecision(5) + ' ... points ... &lt;span id=pointsx&gt;' + eval(pos3 * 3.0 \/ 4.0).toPrecision(5) + '&lt;\/span&gt;,&lt;span id=pointsy&gt;' + eval(288 - eval(pos4 * 3.0 \/ 4.0)).toPrecision(5) + '&lt;\/span&gt;';<br \/>\n});<br \/>\n<\/code><br \/>\n &#8230; a display of useful <font size=1>set of<\/font> co-ordinate<font size=1> set<\/font>s to base their element movements via &#8230; day one progress &#8230; and then &#8230;<\/li>\n<li>add more event driven Javascript clientside SVG or HTML imagemap clicking logic to both &#8230;\n<ul>\n<li>show the user a display showing what would happen should they click\/tap the &#8220;Draw&#8221; button &#8230; as well as &#8230;<\/li>\n<li>modify the top textarea user entries to reflect these proposed changes<\/li>\n<\/ul>\n<\/ol>\n<p> &#8230; ideas <font size=1>(turned into a day&#8217;s worth of reality)<\/font>, as day two&#8217;s job <font size=1>(and hopefully not into day three)<\/font>.<\/p>\n<p>Guess today&#8217;s work can be thought of as &#8220;a unit&#8217;s day&#8221;.  When you talk of co-ordinates, it&#8217;s all relative, right?!  With this work, for the first time we can remember, &#8220;real world&#8221; units such as &#8220;inches&#8221; <font size=1>(as well as &#8220;points&#8221; and the pixel &#8220;px&#8221; webpage units yours truly is most familiar with)<\/font> make an appearance, of some importance.  We&#8217;re not going to delve into why <strike>dot<\/strike>&#8220;<a target=\"_blank\" title='neato command line info' href='https:\/\/graphviz.org\/docs\/layouts\/neato\/' rel=\"noopener\">neato<\/a> -n&#8221; refers to &#8220;inches&#8221;, but learn a bit trying to fit in with <strike>dot<\/strike>&#8220;<a target=\"_blank\" title='neato command line info' href='https:\/\/graphviz.org\/docs\/layouts\/neato\/' rel=\"noopener\">neato<\/a> -n&#8221;<sup><font size=1>&#8216;s<\/font><\/sup> wooooooorrrrrrrllllllddddd.  Our research and development here led to <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/14242125\/determining-the-width-of-a-webpage-in-inches' rel=\"noopener\">this link for px to inches thoughts<\/a>, thanks, and <a target=\"_blank\" href='https:\/\/www.google.com\/search?q=is+a+point+unit+the+same+as+pixel&#038;oq=is+a+point+unit+the+same+as+pixel&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigAdIBCTE0MjQxajBqN6gCALACAA&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">this link for px to points thoughts<\/a>, thanks.  We suspect we might need to reference some\/all of the three co-ordinate system ideas tomorrow, including the way in Javascript client land Y co-ordinates start at the top with zero and go down the webpage with ever increasing Y&#8217;s, but in <strike>dot<\/strike>&#8220;<a target=\"_blank\" title='neato command line info' href='https:\/\/graphviz.org\/docs\/layouts\/neato\/' rel=\"noopener\">neato<\/a> -n&#8221; land the Y co-ordinate increases as you go up the webpage, as most good graph systems we&#8217;ve ever known, would do, too!<\/p>\n<p>So, feel free to try <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php--GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php--GETME\" rel=\"noopener\">venn_diagram_basis.php<\/a> PHP hosting Dot second go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\">Venn Diagram<\/a> web application.<\/p>\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\/new-graphviz-via-php-on-almalinux-dot-venn-diagram-tutorial\/' rel=\"noopener\">New GraphViz via PHP on AlmaLinux Dot Venn Diagram Tutorial<\/a> ...<\/p-->\n<hr>\n<p id='gvphpaldvdt'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot Venn Diagram Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-venn-diagram-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.jpg\" title=\"GraphViz via PHP on AlmaLinux Dot Venn Diagram Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Dot Venn Diagram Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Dot Colour Wheel Outputs Tutorial' href='#gvphpaldcwot'>GraphViz via PHP on AlmaLinux Dot Colour Wheel Outputs Tutorial<\/a>, today we turn to the very generous Open Source community out there for a &#8230;<\/p>\n<ul>\n<li>Dot <a target=\"_blank\" title=\"GraphViz\" href='\/\/graphviz.org\/' rel=\"noopener\">GraphViz<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.dot-GETME\" rel=\"noopener\">venn_diagram_basis.dot<\/a> simple <font size=1>(but clever)<\/font> starting point for some exploratory <a target=\"_blank\" title='Venn Diagram information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Venn_diagram' rel=\"noopener\">Venn Diagram<\/a> work, thanks, to <a target=\"_blank\" title='Dot GraphViz package information' href='\/\/forum.graphviz.org\/t\/subset-diagrams\/1118\/4' rel=\"noopener\">https:\/\/forum.graphviz.org\/t\/subset-diagrams\/1118\/4<\/a> &#8230;<\/li>\n<li>PHP hosted and using <a target=\"_blank\" title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php' rel=\"noopener\">exec<\/a> call of <strike>dot<\/strike>&#8220;<a target=\"_blank\" title='neato command line info' href='https:\/\/graphviz.org\/docs\/layouts\/neato\/' rel=\"noopener\">neato<\/a> -n&#8221; this time on the command line to create the GraphViz graph<\/li>\n<\/ul>\n<p> &#8230; for our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php-GETME\" rel=\"noopener\">&#8220;how we got there&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php-GETME\" rel=\"noopener\">venn_diagram_basis.php<\/a> PHP hosting Dot second go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/venn_diagram_basis.php\" rel=\"noopener\">Venn Diagram<\/a> web application.<\/p>\n<p>You might see with the whole Dot file presented to the user as an &#8220;up for grabs&#8221; we have some <i>fillcolor<\/i> attributes such as &#8230;<\/p>\n<p><code><br \/>\n fillcolor=\"#90806090\"<br \/>\n<\/code><\/p>\n<p> &#8230; which is Dot&#8217;s equivalent to <strike><font size=1>rgba(146,130,96,0.9) ( ie. rgb(146,130,96) with opacity 0.9 )<\/font><\/strike> <font size=1> &#8230; on 12\/10\/2024 <font color=blue>realized<\/font> ((9 x 16) + (0 x 1)) \/ 256 = 0.5625 &#8230;<\/font> rgba(146,130,96,<font color=blue>0.5625<\/font>) ( ie. rgb(146,130,96) with opacity <font color=blue>0.5625<\/font> ) &#8230; but, please, stick to the &#8220;Dot way&#8221; because some other ways just cause black filled in circles.  Because Venn Diagrams are often about overlapping, you&#8217;d expect opacity to be a feature of use here.<\/p>\n<p>You&#8217;ll see playing with Venn Diagrams that we&#8217;ll need some time to think on whether we can improve positioning of the circles, a matter critical to Venn Diagram &#8220;drawing&#8221;.<\/p>\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\/new-graphviz-via-php-on-almalinux-dot-colour-wheel-outputs-tutorial\/' rel=\"noopener\">New GraphViz via PHP on AlmaLinux Dot Colour Wheel Outputs Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gvphpaldcwot'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot Colour Wheel Outputs Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-colour-wheel-outputs-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Colour Wheel Outputs Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Dot Colour Wheel Outputs Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/dot_colour_wheel_html.jpg\" title=\"GraphViz via PHP on AlmaLinux Dot Colour Wheel Outputs Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Dot Colour Wheel Outputs Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial' href='#gvphpaldcwt'>GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial<\/a> catered for the output formats &#8230;<\/p>\n<ul>\n<li>SVG &#8230; (via the dot switch -Tsvg) and &#8230;<\/li>\n<li>PDF &#8230; (via the dot switch -Tpdf) but, today, we open it up for &#8230;<\/li>\n<li>PNG &#8230; (via the dot switch -Tpng) and &#8230;<\/li>\n<li>JPEG &#8230; (via the dot switch -Tjpg) and &#8230;<\/li>\n<li>HTML &#8230; made up of &#8230;\n<ol>\n<li>body element &#8230; consisting of &#8230;<\/li>\n<li>img element as the image<sub>map<\/sub> part &#8230; (via the dot switch -Tpng) as well as &#8230;<\/li>\n<li>map element as the <sub>image<\/sub>map part &#8230; (via the dot switch -Tcmapx)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; that last <a target=\"_blank\" title='Imagemap info from W3schools' href='https:\/\/www.w3schools.com\/html\/html_images_imagemap.asp' rel=\"noopener\">imagemap<\/a> based one taking up most of the work day, but worth it, we think.  And thanks to <a target=\"_blank\" title='Excellent link' href='https:\/\/sheep-thrills.net\/Dot_image_map.html' rel=\"noopener\">this excellent advice<\/a> regarding this.<\/p>\n<p>With the PNG and JPEG <font size=1>(and HTML, we belatedly realized)<\/font> outputs we initialize the canvas editor with that Colour Wheel image contents, and with SVG and HTML clicks can shape the colour picking for the canvas editor, while PDF is just for &#8230; well &#8230; PDF.<\/p>\n<p>Again, please try the <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.php--GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.php--GETME\" rel=\"noopener\">dot_colour_wheel.php<\/a> PHP hosting Dot second go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.php\" rel=\"noopener\">Colour Wheel<\/a> web application.<\/p>\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\/graphviz-via-php-on-almalinux-dot-colour-wheel-outputs-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Colour Wheel Outputs Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gvphpaldcwt'>Previous relevant <a target=\"_blank\" title='GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/graphviz-via-php-on-almalinux-dot-colour-wheel-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.gif\" title=\"GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial<\/p><\/div>\n<p>We&#8217;ve discovered another item to add to our list of <a target=\"_blank\" title=\"GraphViz\" href='\/\/graphviz.org\/' rel=\"noopener\">GraphViz<\/a> guises, <font color=magenta>adding<\/font> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-graphviz-via-pear-on-almalinux-primer-tutorial\/'>\n<ul>\n<li>the recent, alas now deprecated, <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Charts<\/a> GraphViz option means of drawing <a target=\"_blank\" title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp' rel=\"noopener\">SVG<\/a> graphics within an HTML image &#8230; we&#8217;ve known about before <i>about yesterday<\/i> &#8230;<\/li>\n<li>today&#8217;s interest, that being <a target=\"_blank\" title='Image GraphViz via Pear' href='https:\/\/pear.php.net\/package\/Image_GraphViz\/docs\/latest\/Image_GraphViz\/Image_GraphViz.html' rel=\"noopener\"><i>PHP Image GraphViz via Pear on AlmaLinux<\/i><\/a> install, via the AlmaLinux cPanel &#8220;Module Installers&#8221; <a target=\"_blank\" title='PEAR installer repository information from Wikiedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/PEAR' rel=\"noopener\">Pear<\/a> installer page, means by which we can use GraphViz calls in PHP code &#8230; and, for the future &#8230;<\/li>\n<li>GraphViz installs for Python via pip<\/li>\n<li><font color=magenta>GraphViz via Dot language via command line<\/font><\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; <font color=magenta>and we host that in PHP<\/font>, starting, today, down this road, taking the Colour Wheel of <a target=\"_blank\" href='\/\/graphviz.org\/Gallery\/neato\/color_wheel.html' title='https:\/\/graphviz.org\/Gallery\/neato\/color_wheel.html' rel=\"noopener\">https:\/\/graphviz.org\/Gallery\/neato\/color_wheel.html<\/a> as an example of &#8220;Dot&#8221; language GraphViz code (we&#8217;ve called <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.dot-GETME\" rel=\"noopener\">colour_wheel.dot<\/a>, thanks), made use of, after user supplied amendments as required, on the AlmaLinux command line, such as &#8230;<\/p>\n<p><code><br \/>\n\/usr\/bin\/dot -Tsvg \/tmp\/colour_wheel__114_74_162_103.dot > \/home\/rjmprogr\/public_html\/doctest-output\/my-cc.gv.svg  2&gt;&gt; \/home\/rjmprogr\/public_html\/colour_wheel.bad<br \/>\n<\/code><\/p>\n<p> &#8230; further to yesterday&#8217;s <a title='Python GraphViz via PHP on AlmaLinux Family Tree Recall Tutorial' href='#pgvphpalftrt'>Python GraphViz via PHP on AlmaLinux Family Tree Recall Tutorial<\/a>.<\/p>\n<p>So please try the <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.php-GETME\" rel=\"noopener\">&#8220;how we got there&#8221;<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.php-GETME\" rel=\"noopener\">dot_colour_wheel.php<\/a> PHP hosting Dot first go <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/dot_colour_wheel.php\" rel=\"noopener\">Colour Wheel<\/a> web application, acting like a Colour Picker colour selector for our canvas element interfacing tool.<\/p>\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\/graphviz-via-php-on-almalinux-dot-colour-wheel-tutorial\/' rel=\"noopener\">GraphViz via PHP on AlmaLinux Dot Colour Wheel Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pgvphpalftrt'>Previous relevant <a target=\"_blank\" title='Python GraphViz via PHP on AlmaLinux Family Tree Recall Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/python-graphviz-via-php-on-almalinux-family-tree-recall-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Family Tree Recall Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Python GraphViz via PHP on AlmaLinux Family Tree Recall Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/family_tree_recall.jpg\" title=\"Python GraphViz via PHP on AlmaLinux Family Tree Recall Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Python GraphViz via PHP on AlmaLinux Family Tree Recall Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Python GraphViz via PHP on AlmaLinux Family Tree Image Tutorial' href='#pgvphpalftit'>Python GraphViz via PHP on AlmaLinux Family Tree Image Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>you go to all the effort of linking images with associated <a target=\"_blank\" title=\"GraphViz\" href='\/\/graphviz.org\/' rel=\"noopener\">GraphViz<\/a> nodes &#8230; means &#8230;<\/li>\n<li>you don&#8217;t want to have to do it again &#8230; so &#8230;<\/li>\n<li>why don&#8217;t we allow a &#8220;recall functionality&#8221; &#8230; huh?! &#8230; !?huh &#8230;<\/li>\n<li>let&#8217;s offer a new Save button &#8230; that if clicked\/tapped &#8230;<\/li>\n<li>updates any web server SVG files with any image data linked in &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['newablzero']) && isset($_POST['infile'])) {<br \/>\n    $sg='&lt;\/svg&gt;';<br \/>\n    $infis=str_replace('+',' ',urldecode($_POST['infile']));<br \/>\n    if (file_exists($infis)) {<br \/>\n       if (strpos($infis, 'doctest-output') !== false) {<br \/>\n       $suffile='\/doctest-output' . explode('doctest-output', $infis)[1];<br \/>\n       if (strlen($_POST['newablzero']) &gt; 0) {<br \/>\n          $excont=file_get_contents($infis);<br \/>\n          if (strpos($excont, '&lt;\/svg&gt;') !== false) {<br \/>\n             if (strpos($excont, '&lt;\/g&gt;') !== false) {<br \/>\n                $sgs=explode('&lt;\/g&gt;', $excont);<br \/>\n                $sg='&lt;\/g&gt;' . $sgs[-1 + sizeof($sgs)];<br \/>\n             }<br \/>\n             $newcont=plusdata(str_replace('+',' ',urldecode($_POST['newablzero'])));<br \/>\n             if (strpos($excont, $newcont) === false) {<br \/>\n                $newercont=str_replace($sg, $newcont . $sg, $excont);<br \/>\n                $outfis=rtrim(dirname(__FILE__), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . str_replace('doctestoutput','doctest-output',str_replace('-','',$infis));<br \/>\n                file_put_contents($outfis, $newercont);<br \/>\n                echo \"&lt;html&gt;&lt;body onload=\\\" parent.setAVal('saved_family_tree_\" . server_remote_addr() . str_replace('\/','_',$_POST['infile']) . \"-' + parent.document.getElementById('ititle').value.replace(\/\\-\/g,'_').replace(\/\\ \/g,'_'), top.document.URL.split(':')[0] + ':\/\/' + '\" . $_SERVER['SERVER_NAME'] . $suffile .  \"'); parent.cookieAVal('saved_family_tree_', true); \\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n                exit;<br \/>\n             }<br \/>\n          }<br \/>\n       } else {<br \/>\n                $excont=file_get_contents($infis);<br \/>\n                $outfis=rtrim(dirname(__FILE__), DIRECTORY_SEPARATOR) . DIRECTORY_SEPARATOR . str_replace('doctestoutput','doctest-output',str_replace('-','',$infis));<br \/>\n                file_put_contents($outfis, $excont);<br \/>\n                echo \"&lt;html&gt;&lt;body onload=\\\" parent.setAVal('saved_family_tree_\" . server_remote_addr() . str_replace('\/','_',$_POST['infile']) . \"-' + parent.document.getElementById('ititle').value.replace(\/\\-\/g,'_').replace(\/\\ \/g,'_'), top.document.URL.split(':')[0] + ':\/\/' + '\" . $_SERVER['SERVER_NAME'] . $suffile .  \"'); parent.cookieAVal('saved_family_tree_', true); \\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n                exit;<br \/>\n       }<br \/>\n       }<br \/>\n    }<br \/>\n    exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; (in an SVG version with no <i>&#8211;<\/i> &#8220;minuses&#8221; in it&#8217;s file name) &#8230; so that &#8230;<\/li>\n<li>storing in window.localStorage is a simple matter of name=<i>value<\/i> association where <i>value<\/i> is a simple RJM Programming domain absolute SVG URL (with the &#8220;minuses&#8221;, but they are taken out in the first argument of the window.open first argument &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction gotothis(inu) {<br \/>\n  if (inu.trim() != '') {<br \/>\n   if (inu.indexOf('HttP') == 0) {<br \/>\n     var toe=null;<br \/>\n     if (document.getElementById('sells').innerHTML.indexOf(inu + '\\\"&gt;') != -1) {<br \/>\n      toe=prompt('Please enter email address or SMS number to share ' + document.getElementById('sells').innerHTML.split(inu + '\\\"&gt;')[1].split('&lt;')[0].replace('Email or SMS ','') + ' with.', '');<br \/>\n     } else {<br \/>\n      toe=prompt('Please enter email address or SMS number to share with.', '');<br \/>\n     }<br \/>\n     if (toe == null) { toe=''; }<br \/>\n     if (toe.indexOf('@') != -1) {<br \/>\n        if (document.getElementById('sells').innerHTML.indexOf(inu + '\\\"&gt;') != -1) {<br \/>\n          document.getElementById('myaemailsms').href='mailto:' + toe.trim() + '?subject=' + encodeURIComponent(document.getElementById('sells').innerHTML.split(inu + '\\\"&gt;')[1].split('&lt;')[0].replace('Email or SMS ','')) + '&body=' + encodeURIComponent(inu.replace('HttP','http').split('#')[0].replace(\/\\-\/g,'').replace('doctestoutput','doctest-output'));<br \/>\n          document.getElementById('myaemailsms').click();<br \/>\n        } else {<br \/>\n          document.getElementById('myaemailsms').href='mailto:' + toe.trim() + '?subject=' + encodeURIComponent('Family Tree') + '&body=' + encodeURIComponent(inu.replace('HttP','http').split('#')[0].replace(\/\\-\/g,'').replace('doctestoutput','doctest-output'));<br \/>\n          document.getElementById('myaemailsms').click();<br \/>\n        }<br \/>\n     } else if (toe.trim() != '') {<br \/>\n        if (toe.trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n          document.getElementById('myaemailsms').href='sms:' + toe.trim() + '&body=' + encodeURIComponent(inu.replace('HttP','http').split('#')[0].replace(\/\\-\/g,'').replace('doctestoutput','doctest-output'));<br \/>\n          document.getElementById('myaemailsms').click();<br \/>\n        }<br \/>\n     }<br \/>\n     document.getElementById('sells').value='';<br \/>\n   } else if (inu.indexOf('HTTP') == 0) {<br \/>\n     if (inu.indexOf('#saved_family_tree_') != -1) {<br \/>\n       deleteAVal(inu.split('#')[eval(-1 + inu.split('#').length)], encodeURIComponent(inu.replace('#' + inu.split('#')[eval(-1 + inu.split('#').length)], '').replace('HTTP','http')));<br \/>\n       cookieAVal('saved_family_tree_', true);<br \/>\n     }<br \/>\n   } else {<br \/>\n     woo=window.open(inu.replace(\/\\-\/g,'').replace('doctestoutput','doctest-output').replace('http:','').replace('https:',''), '_blank', 'top=50,left=50,width=800,height=800');<br \/>\n   }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n) &#8230; to open GraphViz SVGs in a new window or email or SMS them and an option to stop their recall in that intersessional and intrasessional <font size=1>(also via a right hand cell double click)<\/font> way<\/li>\n<\/ul>\n<p>As well, onto the progress cursor <font size=1>(which is of no use on mobile platforms)<\/font> method of flagging to the user they should wait, we add an animated &#8220;Draw&#8221; button border animation Javascript function &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction animbord() {<br \/>\n  var bcolsare=['green','#F0F8FF','#F0FFFF','#F0F0E0','#F0FFF0','#FFFFF0','#FFF0E0','#FFFFE0','#F0FFF0','#FFFFFF','#F0F0F0','#F0F7FF','#FFF8F0','#FFF0F0','#E0FFFF','#FFFFE0'];<br \/>\n  document.getElementById('mysub').style.border='3px dotted ' + bcolsare[lastj];<br \/>\n  lastj++;<br \/>\n  if (lastj &gt;= eval('' + bcolsare.length)) { lastj=0; }<br \/>\n  setTimeout(animbord, 200);<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>As the user enters in any image URL, we allow a hash delimiting user answer idea whereby they can use an opacity that is not the <i>0.6<\/i> default value in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/family_tree.php---GETME\" rel=\"noopener\">the changed<\/a> PHP <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.php---GETME\" rel=\"noopener\">family_tree.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.php\" rel=\"noopener\">Family Tree<\/a> creation.<\/p>\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\/python-graphviz-via-php-on-almalinux-family-tree-recall-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Family Tree Recall Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pgvphpalftit'>Previous relevant <a target=\"_blank\" title='Python GraphViz via PHP on AlmaLinux Family Tree Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/python-graphviz-via-php-on-almalinux-family-tree-image-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Family Tree Image Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Python GraphViz via PHP on AlmaLinux Family Tree Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/family_tree_image.gif\" title=\"Python GraphViz via PHP on AlmaLinux Family Tree Image Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Python GraphViz via PHP on AlmaLinux Family Tree Image Tutorial<\/p><\/div>\n<p>So far with our <a target=\"_blank\" title=\"GraphViz\" href='\/\/graphviz.org\/' rel=\"noopener\">GraphViz<\/a> usages, there have been no images, within any SVG output created.  Today, at least with the Family Tree functionality, we want to allow image URL user entered imagery to <a target=\"_blank\" title='Overlay blog postings around here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay' rel=\"noopener\">overlay<\/a> SVG node elements, using that node&#8217;s positioning to guide where this overlayed image should be placed, further to yesterday&#8217;s <a title='Python GraphViz via PHP on AlmaLinux Family Tree Tutorial' href='#pgvphpalftt'>Python GraphViz via PHP on AlmaLinux Family Tree Tutorial<\/a>.<\/p>\n<p>Is it Javascript DOM helping with this?  Yes, we host SVG GraphViz output within HTML iframe elements, where (in the spirit of <a target=\"_blank\" title='Client Pre-Emptive Iframe blog postings around here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/client-pre-emptive-iframe\/' rel=\"noopener\">&#8220;Client Pre-Emptive Iframe&#8221;<\/a> thinking), which have an <i>onload<\/i> event Javascript function looking like &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction checksvg(iois) {<br \/>\n  var gs=[];<br \/>\n  if (iois != null) { \/\/ check out window.svgDocument<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       \/\/alert(1);<br \/>\n       if (aconto.document) {<br \/>\n         aconto = aconto.document;<br \/>\n         gs=aconto.getElementsByTagName('g');<br \/>\n         if (eval('' + gs.length) &gt; 0) {<br \/>\n           gzero=gs[0];<br \/>\n           for (var sd=0; sd&lt;gs.length; sd++) {<br \/>\n              gs[sd].onclick=function(event){ parent.svgit(event.target, '');  };<br \/>\n              gs[sd].ondblclick=function(event){ parent.svgit(event.target, 'ask');  };<br \/>\n           }<br \/>\n         }<br \/>\n         gs=aconto.getElementsByTagName('svg');<br \/>\n         if (eval('' + gs.length) &gt; 0) {<br \/>\n           szero=gs[0];<br \/>\n           for (var sd=0; sd&lt;gs.length; sd++) {<br \/>\n              gs[sd].onclick=function(event){ parent.svghost(event.target, '');  };<br \/>\n           }<br \/>\n         }<br \/>\n         console.log(gs.length);<br \/>\n         console.log(aconto);<br \/>\n       }<br \/>\n       \/\/alert(11);<br \/>\n       if (aconto.body != null) {<br \/>\n         iois=iois;<br \/>\n         \/\/alert('yay!');<br \/>\n       }<br \/>\n    }<br \/>\n    if (gzero) {<br \/>\n      gzero=gzero;<br \/>\n      \" . (strlen($addimg) == 0 ? $addimg : ' gzero.innerHTML+=\"' . $addimg . '\"') . \"<br \/>\n      if (aimg != '') { eval(' gzero.innerHTML+=\\\"' + aimg + '\\\"');  }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt; <\/p>\n<p> &#8230; relying on <i>iois.contentDocument<\/i> (as our reading said would help) before any of our <i>aconto.body<\/i> thinking which suits (our usual) HTML content with the relevant iframe hosting element.  From there on, Javascript DOM principles can help modify and scour SVG content, and make use of new Javascript functions, as per &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction svghost(svgheo, imgc) {<br \/>\n if (9 == 8) {<br \/>\n if (gzero) {<br \/>\n  gzero.innerHTML+=\\\"&lt;image x='0' y='0' href='\/camel.png'&gt;&lt;\/image&gt;\\\";<br \/>\n } else {<br \/>\n  svgheo.innerHTML+=\\\"&lt;image x='0' y='0' href='\/camel.png'&gt;&lt;\/image&gt;\\\";<br \/>\n }<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction psvgit() {<br \/>\n  svgit(lastsvgeo, lastimgc);<br \/>\n}<br \/>\n<br \/>\nfunction svgit(svgeo, imgc) {<br \/>\n  var pres='';<br \/>\n  lastsvgeo=svgeo;<br \/>\n  lastimgc=imgc;<br \/>\n  if (('' + svgeo.outerHTML).indexOf('&lt;text') == 0) {<br \/>\n   if ((svgeo.innerHTML.toHtmlEntities().split('&')[0].split('(')[0].split('&lt;')[0]).replace('%20',' ').replace('+',' ').indexOf(' ') != -1 && lasturl != '\/\/thatsthem.com\/name\/' + encodeURIComponent(svgeo.innerHTML.toHtmlEntities().split('&')[0].split('(')[0].split('&lt;')[0])) {<br \/>\n     lasturl='\/\/thatsthem.com\/name\/' + encodeURIComponent(svgeo.innerHTML.toHtmlEntities().split('&')[0].split('(')[0].split('&lt;')[0])<br \/>\n     window.open('\/\/www.google.com\/search?sca_esv=8957a51bd870705f&sxsrf=ADLYWIL9Z95Y2XILCVHy1Ep_vA8UA0HVLw:1728014294038&q=' + encodeURIComponent(svgeo.innerHTML.toHtmlEntities().split('&')[0].split('(')[0].split('&lt;')[0]) + '&udm=2&fbs=AEQNm0CrHVBV9axs7YmgJiq-TjYcvrKLYvLdNLLD2b8MCfaxte6rE3yH_shvJRqV-Iqr8JJvO9luGxMyf8tABHRE_ER5WVi_ouuYD0ZGCgonp8RpBmOUpTB-X6dVFbJc8KMdvjlHxs0_OJiYCY4-Y60oHTMiC_1a9mkGkMIYHO4XqP68ipa4P5rJaQCtA4WPne6f0aAKhdyAMTPbTsWJEdFYpNvI5RzOgw&sa=X&ved=2ahUKEwjCwabx6vOIAxWJ7DQHHQIOJBoQtKgLegQIDRAB&biw=1433&bih=739&dpr=2', '_blank', 'top=100,left=' + eval(-600 + screen.width) + ',width=600,height=600');<br \/>\n     window.focus();<br \/>\n     uselast=true;<br \/>\n     setTimeout(psvgit, 2000);<br \/>\n     return '';<br \/>\n   }<br \/>\n   lasttext=svgeo;<br \/>\n   if (lastiurl.indexOf(\\\"&lt;image x='\\\" + svgeo.getAttribute('x') + \\\"' y='\\\" + svgeo.getAttribute('y')) == -1 && (imgc == 'ask' || lasturl == '\/\/thatsthem.com\/name\/' + encodeURIComponent(svgeo.innerHTML.toHtmlEntities().split('&')[0].split('(')[0].split('&lt;')[0]))) {<br \/>\n    if (('' + svgeo.getAttribute('width')).indexOf('null') != -1) {<br \/>\n    lastiurl=\\\"&lt;image x='\\\" + eval(-20 + eval('' + svgeo.getAttribute('x'))) + \\\"' y='\\\" + eval(-20 + eval('' + svgeo.getAttribute('y'))) + \\\"' width='45' height='45' opacity='0.6' href=''&gt;&lt;\/image&gt;\\\";<br \/>\n    } else {<br \/>\n    lastiurl=\\\"&lt;image x='\\\" + svgeo.getAttribute('x') + \\\"' y='\\\" + svgeo.getAttribute('y') + \\\"' opacity='0.6' width='\\\" + svgeo.getAttribute('width') + \\\"' height='\\\" + svgeo.getAttribute('height') + \\\"' href=''&gt;&lt;\/image&gt;\\\";<br \/>\n    }<br \/>\n    window.focus();<br \/>\n    pres=null;<br \/>\n    try {<br \/>\n    if (lastp != 'Regarding ' + svgeo.innerHTML + ' please enter an optional image URL') {<br \/>\n    pres=prompt('Regarding ' + svgeo.innerHTML + ' please enter an optional image URL', '');<br \/>\n    }<br \/>\n    } catch(exc) {<br \/>\n    console.log('error');<br \/>\n    }<br \/>\n    if (pres == null) { console.log('err'); pres=''; if (uselast) { setTimeout(psvgit, 2000);  } } else { uselast=false;  lastp='Regarding ' + svgeo.innerHTML + ' please enter an optional image URL';  }<br \/>\n    if (pres != '') {<br \/>\n      uselast=false;<br \/>\n      lastp='Regarding ' + svgeo.innerHTML + ' please enter an optional image URL';<br \/>\n      lastiurl=lastiurl.replace(\\\" href=''\\\", \\\" href='\\\" + pres + \\\"'\\\");<br \/>\n      if (gzero) {<br \/>\n       \/\/alert(\\\"&lt;image x='0' y='0' width='45' height='45' href=\\\" + lastiurl.split('href=')[1]);<br \/>\n       \/\/gzero.innerHTML+=\\\"&lt;image x='0' y='0' width='45' height='45' href=\\\" + lastiurl.split('href=')[1]; \/\/.replace(\/\\-\/g,'');<br \/>\n       \/\/if (document.getElementById('addimg').value == '') {<br \/>\n       \/\/  document.getElementById('addimg').value=' gzero.innerHTML+=\\\"\\\"; ';<br \/>\n       \/\/}<br \/>\n       document.getElementById('addimg').value+=lastiurl;<br \/>\n       \/\/alert(document.getElementById('addimg').value);<br \/>\n       gzero.innerHTML+=lastiurl;<br \/>\n      }<br \/>\n    }<br \/>\n   }<br \/>\n   if (lasturl != '\/\/thatsthem.com\/name\/' + encodeURIComponent(svgeo.innerHTML.toHtmlEntities().split('&')[0].split('(')[0].split('&lt;')[0])) {<br \/>\n    lasturl='\/\/thatsthem.com\/name\/' + encodeURIComponent(svgeo.innerHTML.toHtmlEntities().split('&')[0].split('(')[0].split('&lt;')[0])<br \/>\n    if (('' + svgeo.innerHTML.toHtmlEntities().split('&')[0].split('(')[0].split('&lt;')[0]).replace('%20',' ').replace('+',' ').indexOf(' ') == -1) {<br \/>\n    setTimeout(function(){ window.open(lasturl, '_blank', 'top=100,left=' + eval(-600 + screen.width) + ',width=600,height=600'); }, 3000);<br \/>\n    } else {<br \/>\n    lasturl+=' ';<br \/>\n    }<br \/>\n    \/\/svgeo.innerHTML+='&lt;\/text&gt;&lt;text&gt;+';<br \/>\n   }<br \/>\n  }<br \/>\n  if (1 == 2) {<br \/>\n   svgeo.innerHTML+='+';<br \/>\n   alert('' + svgeo.outerHTML);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt; <\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/family_tree.php--GETME\" rel=\"noopener\">a changed<\/a>  PHP <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.php--GETME\" rel=\"noopener\">family_tree.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.php\" rel=\"noopener\">Family Tree<\/a> creation.  This usage, including some data URI image links, is apparent clicking <a target=\"_blank\" href=\"\/\/www.rjmprogramming.com.au\/family_tree.php?rand=7267744#title=simpsons-family-tree#back=aed8e8#fsize=#shape=#mode=Digraph#fmt=svg#one=%22Clancy%20Bouvier%22%2C%20%22Grampa%20Simpson%20Abraham%20II%22%2C%20%22Homer%20Jay%20Simpson%22#two=%22Jacqueline%20Ingrid%20Bouvier%22%2C%20%22Mona%20Simpson%22%2C%20%22Marjorie%20Jacqueline%20Simpson%22#three=%22Clancy%20Bouvier%22%3A%20%5B%22Patty%20Bouvier%22%2C%20%22Selma%20Bouvier%22%2C%20%22Marjorie%20Jacqueline%20Simpson%22%5D%2C%20%22Grampa%20Simpson%20Abraham%20II%22%3A%20%5B%22Homer%20Jay%20Simpson%22%2C%20%22Herbert%20Herb%20Powell%22%2C%20%22Abbey%20Simpson%22%5D%2C%20%22Homer%20Jay%20Simpson%22%3A%20%5B%22Bartholemew%20Jolo%20Simpson%22%2C%20%22Lisa%20Marie%20Simpson%22%2C%20%22Maggie%20Simpson%22%5D#addimg=%3Cimage%20x%3D'226'%20y%3D'-180.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAJIAAAFZCAMAAABE%2FYZ%2FAAAClFBMVEX%2F%2F%2F9Vqsyqu8x3d4hEd5nuZqr%2F3REiEUQRACLuuxH8%2FPyqu8sAAACZRGb%2F3xH%2F4BH82RL29vZHe57w8PDxvRHl5eW9vb3stxFcX180a4ERACDx8fHLy8u2trauv9D3wRPc7e1WocPb29v%2F6BBZsNNzcoHHx8elpaVycnL%2F8AtIMwCWy%2BsAABvt%2BP%2Ff39%2BamplsbGxoUwBFRUUAAAouYnSe5vZHjrB8f5A%2FPkWDg4OvutJGRkaou9NdW2k%2FP02hoaCfrMJTUlI9TFjFmACYcgCrhQDyzxGbiACLeQB0ZwDDrwD9zBFfSQTZvgA8LgBJPwCVhwBuZgDArAB4WgBwLEfkZ58kJQBkWgCpmwB3uNstU3KQz%2BCCtMYAADAqKjISDzIrJkIrLz0hLzdQTl2MnbG4xORlaoahocUjM0JETWKDjKJeaniBfpyFlqEmNTRldocgIBrQ4PPj4%2FyMjLDM0vTY1vlUU3C8ut0gJSwTGBs2R03b6%2F%2FJyNY3NTRGW2aBlKNfXXkyMUlRRDogDgBLUUlWTzljVR5LOSxNQxrVpwlPMhFSVIPdyDb53l52eViVmnHl3Iv%2F6kzg0ZYMGC3%2F7oUiJBZeVjhta1WAfnPEjQ46PQCajzzVy4gtGwB1TgRlVkd1Yyy4rob%2B8Kv%2B6YjGvwA4Oy2new87GC87ACJTPESDOlVUED6uR3YhABFUVygxACEjAAA8KCJbJjuSVXRwGkn%2FkcoxBiyaPHLKhaFpLT1vWGSwQoq9Y5INFwBxbiDBuFT2lMFpPFINM1oRUHMARE2eYH%2F7lLr7b6j%2F%2FJs7JTTKU34%2Fh5y9njsAKyz%2FrOKHfED%2F%2F3m2n2YxCQVpl5xOKEITQl0wH2M3KFAdAERTNotPPH9iTqIqdw0RAAAgAElEQVR4nO2di1tTZ7bwIyBKgtk7kBuSi2QLCSgkATGEa2IuJCQhmoDBS2lRQAQq9dIWxGB1wJqeaota7dhaZ6xovXTm1NbTzjnOqW3t9OJpx54ZmdHzz3zvu%2FfOfSeYnTc93%2FM933r6iNSE%2FFhrvetda72XzeE8g5TLpU0DTVoR9Y1IJOI%2By7tyICJZVZVKAP4iM79gaG3d0zag5XJEHdKBgSaNjHoJF8qvBsSVt0zu2tWkE3Plk681N%2FN4PIWpXaPe3Tb46lDr8IAavuRXg6HEONlmMBgqN%2FVLg8N7eLw8IIrmtk2DQwpA1zw4IAevEam1Rq341yIzjkwY8oEYKvcOjzbnkcJTNOcpeNTfBpvqVNLdY%2BOjL461yHKsr1K51miUa%2FdN5NNiyB%2Fk5dES%2FYti%2FKUmgymvWTF0iBdU5xKIa5waaG9vbwqOhYkq8yv35CWLgjdqUigAI29o%2F5HD4twRCTQDtL3CRPnjo6NMSAAqrLDWA0fqVTmznXoyykKqyHDQ1KzgMSJFbMl7tfZFKfBztSoHRKX9E%2FFE46ZmXlogyr8OHdpzcFBbaTaWIgbicuQD8UoymNJrKCytzUND%2B%2FcfOGKYFaEl4pZK2%2BKIhpmdiEFRPKjL1kO1BjNClxLINPUvDVQmKOkZkWiu1kMH9sqR%2BbnKfHb3RLwjAU9qfiazhZEA1PSRFkRAHNm%2BTYZ4N4JIo62ZIEGmQ9P9cnEVCocS1M8kAWWOBKCGpk1jY21tCKK5fB8DUX7lwYwMB5Fahw4devllhVSbpUdxOZrdDERgKjEplsZIYGptzRs6sKY%2BS9txOdIxBqLRPXueNQhEkchwoJgeNGanJmYk0moZGi4MduCINFsk3SvJrv1scZsZ6ciaTdnlv1yOtj1JSRlFyURR7J8VZEMEBlxTknsbeCyNRmrp1elKszoLKIFmV5IrVR7NRkm8oZcP8DT1MtZEupHkoFQ5mBVSXuvQ%2FmlFk5wlUmLWRiFlPPzjkWDQrD3SzzI6tVQmE4EBl4UrUVitQ9ODOnahYGqCASl%2F%2FBmTt9SKAqnK%2FiZ2WSYzEpniZsk0tL%2BNnYfXMxmOLgSWzLvTQg0dqGRXTGkPM2UBpICsMovgxMt7maWW6iZTEQHjZefjh9rl7OJlx64UagIpXDZAIJ87ItXVsUEql25KZbdM06V4JJDP1arrq9gwVQ0we7iBlw0SrA6ah2rFQTZ6km9KYbkstQRdfKhWLc2cSKDbnQJpMCskCmt%2FbXvmrQJVE7PdgHtnFy1JplenDZnXBrKBcWYkMi7xYOLEPnnitb68R5MxUlWqIAAi%2BJ7WVoWiOc90kGWEAr%2FLflPmSDKGfCksw%2BOjJtOe0fHKg6zdav9g5kiilrHUTJWV%2BePDwNfGMy18o0jNLFK5jgHGZCBeDpJMvIwnYjD5HmnJmImrGVmaybCnGVQeJhbZ5qu1PHPm6aV2YPeSUMOjg3tMhozbBEAUtRMZ9y24HPVAaneCMtZugH5VWbkncyRe3jRPl3l6qW5Pj7SbDhSVBzN3c17zoQPmzCO4tiW91dqb2CPl5Q3VskBaUkthwxoyBwJqYjPPVfUv4Uv99KQDCjwWljvAAqm0fzgtUmV%2FG2250Yw7PLDKrJRm7t9aeu0khRg2hWed4T0ZB8u8oQO1o%2BaMmcp1%2B8YMhuSubsRyk7SaWEwtvLzW%2FbUGXcaFr0DbMtK0uy0VkmF3eHkl8ywKpAPN%2B2vHOjJFAtOvvMPI2GwmZeJwOE5UjmZeCMNqxVyeORMQOVMbhVJT275w8lk5Ppp5cNo%2FXcmut1MqTVUa5M%2FENA8nMqxdYINg%2BkWWzfC6%2BvYxoI2xsWhjzlCZDx1%2FUxQJRoLMBGh1Wsu2Py%2FS1MPF3d3BvdRiqsGwd9%2FhTTNtmyYHokiZ5wO8vANstQQVJZbLq7gizcAM4JmYGZCK1UapVCOOFjKsZrpDBtbrYuG3ccWagcnJXTo5HCgCASe2X2%2FIOILnKY60a1nqKEYEKpVMVR6hVLdH0rzMZzqQ7ypmEDDFS3kwpgTNsFMPfoGh6endyJnkZ2Oy4T2ZFQZwn8qBNU2sW%2BGpRBOTVVUebc3QeDzFNE%2BKemuRqD5mDgTzSkZE5Ap5tut0SVIat0iWcScTLq2g3pxSF9djybjVw2uefpFFOpBWRObKWCVl3iZ4%2BUXUY65U2hbxbzbtXt7Lo2xXelIJ1xjt12W%2BYg%2FkAIrl%2BniRR1tRlYaMtcRrfVk9i9q%2FRU0xfR8WK%2FZDtUdaUDNpY%2Ba5UUWmnR3IpGDRRUkrpeZosGSxwgLrp2HUalL1vxYdc3vCZeazmhCotfYo8rlXvG84yjQYrjOffT1xGjkSl2OOTiqRkq5tdEk98RQQm2c6gDxackSTMRlKK70Vdbg9RTIeHQGmNrL64x3IRx0tObJglGic9iWFqeXFqJp4MXtVjkaq0ObhICgieIqh3ci3hcoPR%2B12kP5onuK1sQgSz7Qnuow39sJB2s14zcPtIJINHWDRsGCFZNgbtdXgrvzmyArH4OQ4CQu%2BVeyeUPCaX53ONyJO46qimWV0y4Xi6CvRWK4wBSciI1AxGIyMSsCtgEtPqNNdUXCCAWl0dxSJB5jGo0yHxxVhOvgiXnOtwYiUiMuRvhZjuHCoNOyNnYQVpkk6vwP129hYBKmdRDrUbEacgYujbc3xyNb0yrG4YKkwtIeVphibCCO9SKny0P56xEgC894IEz2ceM3jA3tig6XCNBBOgxVBOozyWseGW%2BHqHnokjmwymqHQ%2FQpec9sr8RndjI4GMb1Au7fCtPeoApKhNxw0XXROoZtfvNaz8XNKpZT6VjFTGdbk8IyC%2FLqfh3JvMS3q%2FkhDLtyaV4ztjkHi5b1CObVi8BhtUYWp%2FSiNVFuJuk6BsakywXJ5vMHJOF%2FqP0ohHd1LRwfF4GEKltc6vb8JcRrH5XREu4fhaZVnOhuLNNpPO1lr2M%2BBvmj61kPTBuRVgTGCZAg7tWL0cIzdmoN0fOQNDdA%2BphhtH6L9%2FNVpcebLvUuINooUnuWGjo0rIvM%2Fb8%2BUKfz%2FB8IL1W2kd%2FEUeROmWjHLHWmpRR3tpIbnEcXEQOxKxkx%2B2Nl3QcOB%2FG0cmhJ8bQW51bQpyy28ySKL9gaOhnOPV8c2RYecIr%2BNmv%2BBe%2BcpgJiG%2B%2FcomhWtpoOvNO15uZblVqt0ogkvIlTSxwvgQJo8Gk0GRlsoK5lGxltNptHh479pGXvttbG248XDea0HXtQhJ%2BKodkVXCuihBea1Y0NRpE0KYKTm0YHu2dnZuRN%2BS8hmBWKzvG5q3n8kiDqJg6KNmXtpT1YM9r8a8e%2Fh4aHmweFjJ20hCxCJUilUkiJ0Du%2BfVmS585pZuJrDEdNFwuMxujoAjvXC5MDkG37IAqVIiOO43W534YV9%2F1Jby2ITyrNIuZnu64yH%2B82KPcHw6Hv1Fb0lFJJIhEIhiVKIFwIh7HaM6AJI7bk5JyYwU5lctKejmNhLjzLTK3qlUFgEgFwEYfd4AAkB%2FvMEHDj2ptk0pslyL3gKKZ2k158j7UHFDMi4YeAZPeyUSJTATHyM8HQ6AwHn5r4uT1dnwMHHCk%2Bd7tfmhoijmjIkIh1sUjQPDU60uG1KiQvn8%2FmFmM%2Fr8Hk8Pocz4Aw4PNXAeqfeQpt4p0cyHZsYPjYHfVpix6Dz8LtquoDJMKIaA9YjMOhR2NvHc3UKsjS8ZzWmrzvWbbWEhMoiibKQFL7HQ5COjRdiGEb9v8L5Mws5YhKYqbZl7OJzpRUO%2BKIiiZ1PM4U5YuXUmTnkXQFK5GcpJBgp6XAkBU5UFIvELOfOLIDoXY7eycvDhQo505O%2BdDwkLCKR8CSkGH3h%2FCvQxY2sNsqmF9lkG60mBaknxcEal4RCciUSEX0%2BkhLHQXwizl1p4ajNpaXofUpLL%2FYaBpspLc3RWiqKRYL%2BjWOeixiICWDo2bv6Oh2n3zGb5Woz8t5XJLeszCeTN17esB%2BoSQgdnMbBoE6gYNVeDwjknQHv%2BQvvvqvVBqfqpUb0OZPIHKkwqXxSMeoWFiktfomwyAUGPQjdvk6HU6%2FXb7F2XnX2ddUENWqRqFTA5Qg0spxcSRCztXeQzk7Oh5Qhid4dKpKAiH0i2C%2FVqsVVYrFca2zr%2F3i3qmpySgxzAG5pSy4SpjgkumYzzVpcbv9v9cU1%2BuOvaevkwZjNOB3AcdTFxUZYenPrWnJzL4Ioul5oIP2bZ5q1KUN%2Bt9%2FtPgu3nZuLi0mlkFcz6MCYLzfC08%2BAxpirOSVm2QmGSx5AsiiLXBKLRVmjAh8sn4ps7eIK%2BtW8QdOoQQvPN4incpQLcOTRHR8Hm02mvCEQBcAEB1Paa2SdpooQcdQXnU5HZ%2Bd7b51uksuCc%2BpcnauP7Kaf2DSw8Pon7a%2B5qVAJgmVN%2FGYOUfAqzAP4fPzU%2B%2BcvdZ2by5Xl6oJkGJh4bdIPBpnEcukDJY0kDH0iJr2GC%2F%2FgiNo6MZg%2FwZll%2FsxJD%2FH2cW2O1FQ1AD18YtJGFh%2FKkN4SZlJaTqojZjsyu5mIRHPsw8seDH%2F7spFsnqAGA0On3ZBvOGZVApe2FAGosOFAMmAPXDAdEYlEKp7R7auOzi%2FE%2B%2Bc9WCF27q3j2qq6HEDBQTcxGRJec3uLvZYoEaiSMMzn%2FN2F0xd%2B5%2By0V3tgugIKJxyrnj%2FeCbMC7NGZty5cBuEcMRFHC7Q0fFIiDFm8VtslizCsIyVMT2B10tXlwaoJhxN8zyeqqwmP82InlWDi848%2BPPP70zc0iKFkIAOfWJAUuWwfKJU2vzJstXBOQk65nRedQEl83PlGTXeg0xNNnfjz566ceSuItqoTtIzlG85ahC6rFZS0kjARlcHxgY76rIGtgaukXvh2UNDhWHzuiwOoWbS3bFRNVRpmvBJlKFQU9WzqU%2Fn2gNft7IQ1SjizxLDkDPjDK29le6w%2BQTomh0fb3Raly0U7ksSF0akbyNiICE9Kmb%2Fye9T9L%2FWuvRN7F%2FxWB51SCqkyiSCoIbYEEES6gH4Z0zxjGNs70k0jUaUA0edIT4LTNiTePI96eQ5ejtKenz%2B610obDn4OhjkDXdGBxSfsiTULH%2FPZwRwDhuNcNmfFU0np5ES%2B4WsbFQHskMhzsdhxlcCgP5PS95suakahi17wDw4vqMg9jm4jq4OPSwg5rUxM0tObCxJ1d9kdIAbZfF1Xr3ZZnMVeTzUVonBQkgPBrwbaj%2F%2FhD0GpOjcJL9z1sfuVk5QrSYA%2FY%2FpOgg%2FrEafXW1Pj1W8OODt9XUD6Nm8p3trV5etzmsUcASgIcniRVLnmrD9c6BYSPj2ITDgOJxBKCJ9jS8DvD2xxgBque9ZoFHPCCXDumATma8pwoUt0%2BWhfxsMCAhT8AuCq7eeRT7TMUnci3A6A7p0conGyAwYSAdwt5%2Fw6t7Z1%2BKl2gDAy4yYINfIITw36ojtJRCqZTCWbo8abMFTTx9TH4fPtQDw%2BP7tzxRkSBVtmpeYpvZLKbt%2FYzDilEX0nzp%2Bfk2pYngjPSLh1UuAaogXSk4Qhbx9Bu048kW9WJRL9Cjik1LWIZWsqrVSK63TSRAQRS4R5jpMZ0a%2Fi1iqp%2BbDZ3FL8WyWlJA9Ga6UzxqP49oviX%2Bs2Qi5Ha1StAe6tfR0aTmjxVlMLEw6vJwaJ2JLTu%2FUSxChfQ4qR7HVd20IiET63PWo4nOjM%2FDBThkL%2BfIFIVSXXGoNaCknWDd3b6iC73ISjsxqPEoUWcjW1xvCoxFqd%2BfpHH93p%2BUhKEtWukYJ610Uh8XEHNe5I22G4N6ehCAKpOnQ3AMzNz1dB6Sd1pNXsq9F%2FYLV2EqQ3O30EJCPrFMKRsyUTCqhULb1xq%2BfmqohcF69Zo5YatXIeT93S7SNrI9wJtQRmf1hddl3IqdlUxuCdz2J4gPTMrqk1GqHpajmqYnthVEuYA%2BiMjwfQn6mIiKDKfL1nVZLc2ad%2BUQOtB3IfTWc1ObUGgMmILjfOx4m%2BNpUUdYVNS2mV%2BeNkoNu3b69adevjfYAIvkh1kvB4PHaHoxrnY4E%2Bgl%2BN%2FUHGEXTU5yC9FsgB0O0EnB9%2FXP7d8u96e2%2Bv%2BqN4DeyKcuqO68%2Bb27rdOBj6fc5qwt7naIITmxrxgjf4YVW6P%2FZ8Hq%2BdH3uXf%2FfdclJ6b38mXQM%2FWazTqVUCjtYLUlzP1k673TtWKdUYZRwN2ujN5ZQaf%2BiJV0%2Fv8uU0Ds30MSxX5fVyMp%2FmGPTVnkvBd092AxKRWCs1SxFHb3nwVizQ5%2Fd6lydI7%2Bc3X9LKBHKdgI7sOu95eZ1A1UJVsSJtPdI4IJL%2BMc5kyUCQadXNf615%2FZPiNfSbVE1kwBYYdeXk8kQQ5ZAT99%2BJs1mcwSLy3Y%2Bf37EIhQ56TxIXOg%2BX%2FKqBf4oRTrsCY7yKbjOpiNJTT6dLIqlRc6hLo9VS6oSuQNcBU2GEU4r6v1fdfCai5ctXbcbswlA32eIrl%2BvUtLpUU5xS6adNyFJcgfTmzevXIyE7HRFAqua7hJbXDS8axi7UtAgodZXqqupmP7v7FbL%2BUWk9mMOKnTX%2FRqkqHdHyzzeDFEmiDFmtNptFYp2F8VqgDha3Ddzq%2Fe4LZBvfZB9%2FfuuSJdStvwTDwG1Gz44gwUkEhztx4DJB0bWgUazr14dCIedn3y2%2FfwPRkKsK%2FnDdLQlttbpC3Z8toSQSCcz7QrhDCWRKrpDVfS1UpFQW%2Bv4EnP9TNP1RWX3HPqcrdBHUQ8rQ1pvPggSrWrq9bHe5gMYK%2BZjdfXv58i9YXAqVLOIW4%2BVrLsslq5KsYj9Z9WNapNvO6rhqko8V2gtBQodXOz4Havp3FEmTWjdnU1q6O%2FEiCVx%2FsN5Kj%2FQfCUjh1Bskl3fAP3%2BLYpuw%2BkRIKfR0ERhuJ6G6P88UKVyieIHl7umyDk1co1uiLMIxmN5jdlCihf58J60z3UuFhBP%2FCS33VbaW4xr9RcKicOeKb5co%2Fd430kaB1EjYl3%2FvXX7302xTJq1eGbu7BnOFtob8n6XVkiOV4QrPBXuh5bJLUOQ1krgtSDgWsLpst9gh4Y9OA2e6eyOr1STVyZBQIoxpOGIer0Rp%2BVM6pG9TI82%2Ff%2Bu75VnOczobKPDxmG4a4e4TCkPu%2F0hN1PttJ8GMhBFvnv8YWO4L9kkTlyPXS4ThBSxS%2BPZOuwt4%2BO00WvqUAYlcrvDp95XMgHfe%2FyGLeU5nUUqE8T1QME1IXNZVqYnufuUjyJYtnxT6r5jH8fqmkoptR3ug5dgvl4r9IDImb6%2BzCwM3UyPdvxHouwqqSrud7Lzb7R6Pr%2FM%2Fd31dVrF22bJl665%2Ft7z3no51X9Boc0mEiW1ZHPM4G3pSI%2F2l%2FZtvHo8snDyxxQlky4mTC19%2F%2Fc3GirUQCCANgNnobpDd9TQgUz4Ne3wJSsIJj%2FfWnTtptLRvLZCKjSW0QBqaByJNrIJhgG2fSeZWQrvFq6na131rVcPfUxL1fjFCfv7aiCyLlXU7gTMt%2F5btCq74A5ekyF7osWNRo83%2F9Yebq%2F5%2BPc0s98WDeIh42bYTKvheE1skPUSyO7duDhM5fjl9%2Feaqz673XE%2BJdPfbDWmRduyGYYBtACeRXIWEx033sPmO9bC8%2FLjn%2Bscpkf7y1cN0SMsaH9787sdekDTFqIlbWqeSqVTPsGYgdlNIXQHadFjfv8HO1p2bPw2kRLr%2FQ0U6omXr%2Ftaz%2FM69ezEnBmAH9vjxubm5WY18qRgqcwvh%2BizR6SAzAbwQe5NEWtXz4FgqpN77P6VVEvDvG70%2F3vkqSFuOKzee2PJfX54D8v3bv798eYnERXTBogTuXe0gd%2FQUgpjs%2BYEs414oS6mlu1%2FsSo%2B0Y8fe28t7P%2F%2F0Brm1S65z9tmrCYxc1Jx%2F9P2Zy8b01jPalBKARHZlgSN5MPtlWO%2F27CrZlQKp9%2B6325dAapwhJ8h7X2k5KukWH5%2FgR2dE%2Fqkrp3Vpw6jaD7SE2QNwYR%2Fz6D0Y9ldYWf6woeSnFBVB7%2F0bD9MSLdvWOPFZL2zc%2FeWG5g8%2BPBYIyvz3p9PmCVUgESgiPAE44Ig%2BB15IvAec6eZPJSUjKVKBuz9fr0iPtK6x4KPPYCl472MHARL6xKQB%2B%2F5yuvXV8svAmYg%2BJ1WEAfNhX4JAef1xSckD5lSg9%2B4Xh9MTAaRh75aA9%2B%2BfBTxA9z6nJ3FWn7%2BykK5e0ABn4vc5yOLE7yNw7JS5Z9VUQUHJBubw3fvzzYIlkfb6qqt9f3ZgWCHh6HbAzSbxmjr1vjklEJfT4RRKcFJLfNwP%2B%2FzzF3p6HpcUFBRMMiIBu21M791rG9fNejC8r68aKH6z114NskJf3LpmIQ53DKX0J9VcSKj0QBXzC7eQSO%2Fd%2BggAFTz8M5Mz9d6%2FN7KEK21rrAjAJSgMB8FFbwcKwq5643N14tSZdGd5zRZhEUbGJQKEAuDfX348AohKtp%2B9w1TK%2FfzthiXtVuaohi0MPuF04nBjLHY1EJtr4ITzv66cTpl2AstZiyQuew3wbKIT%2FAQQOILbgd1KRrb%2FxGC53p%2B%2FKltKSTsXPATMNX01TmqzEEaN6OiQ87gX5nR1IpGonFFXopNwr5YdbkLAAlvA7%2FToMkR6uKtgA4Oa7v78p5IlppPGsc3VNmfA3e31YeFmj7Mvzpn4hOe903PHg0GzsSoZigstJ3ER9hoL0JPTQeDzf90OB9xIQclPyd50FwTKtEjbGo967c5AH0jBqsOa4WMOR3jMUZA4H5sHM973Z37%2FegeDouRuOKdgXcAF%2BUS3pxD75TFAegxGXVlyznT%2F%2Fo30A65x51aPZzM8bUWFSPAzMRy3UVsKgGfhZDVDfgOmvFPnrjB17suD0HKYpxuMCqzTTxR%2B2ES6UgngSmK6f789LdKOHfu6QHCLzCEAwudRKm1wjxMsM0Iul0tpB0oKbzB6NMeU6mmt8DiZHWZxmKemGn90vKyk7EEZ9PEHie60BNK2dYdjvYaPEXY3KMuUlm4PGYydv6mxhsit2S47DjfPEZ4FpgSqrkZYJMExmx7EpqtAV%2FOntxfQAph6E5DS%2BdK2dSPX%2BDFAnk7v1muwX3XiLCTl20%2FIVMYgPCcKqkchSNW6%2FC8xVjKCd2GGguEB8DaIxP%2FlQUGEKcF2d%2B9%2FlVpLa7cdBgrn02rCcOc7eguY1ZUSr1rtJwf%2FH4BK5Jcube12%2B63XrP6TLR0pkkyZmzy%2BBXez2P0Ezn97siTKNDUZ2969%2F3PqxHvtzqAt5Pc74ME9EHI9AT9sikuUIbeaIzshgW5xWgQLbKtVYrM6HHNjqbtQ5TobbAyQe37gwD23ECXaPlI2cie65gRCZaq4tPbhT37cZrX6wbQGfr2%2Bi2R7WAL8SA5ijdQCpgfPaQAh0xd1W5QurPpDqSD1rCJ2A%2F1GZ6FTFzaE1VQyuaGkZMPAnUiE%2Bvkmc%2FReu2zDJz3dcEC5bF6fxxfwUjvBXLY5Mdw3BMYQn%2FDBbQSq8xJbN9wk%2BuhymrqKq7mmLIq2BuZ%2F%2F3XEclNlgKtgw8idm%2FfuLu%2Ft7f352%2B2MRBsfgGKrpyakBOPrmturt4XIHUVCv5T63NLXQ67qvneBWsovWFwBv9DFf3Q6XZGugvt%2FIu1K%2FMz6kojdqK8FBY8nf%2Fj0i%2FtAjlUwIJUVk0tUPd1QN0JJSKKE%2B4mElppI7t%2FhLnJ9QFYnQGFFbr%2BQf%2Bp1Zt%2FmcsplVSqQg4NZJYzEfzsYthuImCUbN1LflP109uwnX33738lDbuPhl%2B7AVfybPdffuQYPpZMLPpJQ7P48rvHkSaqrqpq7FrIVL%2BgXGNPdKq1WfaHGe8koANllRE38Dy9sp9RUUlYAdLK2guqSTAFtlW14vDGJaNffJj662dPz9xsaVZ0uYAtJgIRs%2Fvr4g811KtqbVboWs1bE%2FHA%2B8SXrNW%2B30CVxa%2BpeKoqoif%2F26cdhZ6KttHZtxbKCxw9LSirWJg%2B4irWN%2FTekxilymZ4j15zX%2B%2F0nLmvULPoUgpaQS6l0fwBcW79bHyqKqOlKBKkkxoM3lAF1MTnSsnU76kG1r6uik1eRWEw9oDAVEzfVP3HL31FKJEKJ20%2B6mzDS%2FcajSDEEaw%2BnDJI7yEfayXXhz%2BPE%2FyUDEU1awMCATCRRREvzVyK%2BFEO0cSTVVFKx4yhcFRT1Z7uaI9DV6C8FQPgQFrlhqIwclig8d2aKQUkF2xmNBv%2BpcQJ2bgTm7FZzuLD2VgqtNRYQ8r1kXAsrKWq3ktgPZnYjGomsgeTZrX1zYYcCxnuv3ur1w%2B2ktCfx8XNnXipLUlI6qdhBIWX9JEmtVQjChxJMym7Y1g2fugGedJz2pKQAlBoJzdFF0XEPbneBdIZUUVGE6O0LD5I9KT1S41FEJ3DEXpCZg4JLAoHCS03zb18OEz2rkmDfDdW9IepuDzwJBc%2F90EDY%2FPsLYaJMkNYh22xWVe%2Fw4ATdtANlA3Hql6ntmROB6N2ObO9Lufa4wwerQHhWA%2Fd8aR4pi2RKFc%2BOtGPHDML9lAK55vTvnA4o%2Bvqvt8ck3c9OBFuB6E6YwZ9Tqvn6m6%2B%2F%2Fvqbb0BuFCHKREkgVu5EsqkjIgJpGb1kFAXKSEnQmVBaDs6%2BDwuSJBMlwXbJBNITJ7KzJdkibWvcmf2mjhjRPk5GyiACQFnbuGMTQstxdRuSkTJTErkigO4IJZdbX5ZEVJIp0rrGvyE8Q1k6mbXdINK6Teh2nYr2IUDa1tj4GJ0zyX7K3pWWrUUaBuQjSUiZxUlS1jXuNCMLA9oHSUgZ2w0iNbJ9AnCigBw8OQawQNoGwgCiY%2FlcjiYZqSJzpLU7QBjIIRILLYFgua0eTYLCiMSCqAI6E5ot%2BkxIS6zdMgs6Z0KJdBTNfmEmJBZhiUTahqZOYQoCrJCAM%2B1oQeTexk1okHaAnAnJcSZkWgIz744xRMGyIympZBOWyGSgBNF9IfIkJFYjDvp3BapuRXImUMEGCUwpqKo5VTISK8sB%2F97ZhiY%2FYUBipSU45GbQnCCs24UGCaRMO8bQJLsM5QC7IQeR0FROInRIjYh6ltYfX5EAAAfUSURBVKXJFQrLKNCIqCTgChAilSBJLLmCIIKiiURClusK6hEiaRAhJbeXWCHB8I3m%2FmWuOblNwQoJhu%2F0WyafHSmJiGUUgEhIKgImLbGe5HRIKl6utAxRFGhs3FmJRksMSEtsLksh65AZjgmp4v8j5RApzf6f%2Fy0kac5G3P9LhqtEM6EgREKUCQCkRKL%2FdSSGOY4tEpoUDikSot63oIXBcGyIQCaAqBxgyipZzXEVqIomxtybXWsQVWnJVKGwy5e2ISvAy1EhrUPWpkCyHreMbFbuRPSoIYYCnJ2WGhtHEbW8VAyGq2BBBGqmiQ40SLLk%2FhIrpG07dswguoGNoTHIDqlxRzuie47UD0qQ9Ly2Ne40I9oLI6t%2FXJAIxQ7pb8ieEaUyHn5cFg%2BVERJ9wnkdqhmOgtLu2xUL9UzzCU1SsRFKycOHD8cmkV4JV6eun9peUPKMSOSh9Idl2x%2BPnJ1c6J86eeJkv1RjVKO%2BOa9cpntpZANIAoC2UkZKcmf1xpKyw5Pv1OitNR%2FAnd0ht0UZamE%2Bw5WtcEVa874HG2DwTjr%2BThupYmPZpn0tOq35mkuotNSE4LO%2BlHqbK4RqrDFIqfZSzcl95O78isjxfLg%2Fd%2BPGgrLtM7NSoxzGnndtyiKJ36qE29%2BVbpvLgvz5hxHhckrPh0I1er%2F%2B%2FOzs4ccbtlOyYWZmRqfRqmVkKORyBRcsSngdKzziYbfrfZgF%2BfMPY6TuZMhVY3EJQxZLzQe2azZbjUYurpLV0c%2FGoW6fLqeQCD6G8eGRdqIzZ48XAaLySpTe38Knwbm8IZdL6fJHxlH0AoxSEuli%2BO5TAnPm6BlaFFKNUvkBvAheItTb4D5%2BrypZAaLzwLFDNeT5Mp8bxzA92scbxIvMrRRa3ARwEbuvuwj8yXTjK0ASAsNh5AMQfAROnETSNU0hVXqXRFnjwQr5fKzTWY3PLzCchVKdgEjuLgweyYXGW8jl3bnwagjhNSd0E6zLXY2%2FyfRIYRV8hI3Q6qjGMbsXgM0Hc3nlsdwPkCxueBoZ6wtU87%2FUMHwYiaS0wQPC%2FL4%2BovDLnDy5MizwgnOldQupJScYS%2B8xVfkyeMG30qIn7Yvzsfdz8%2BRKSrhaKxhLl%2BBhZAx7w15I%2FJXpKgnyxhZhSE8%2BkoFfOP9WLu9f5757TSl5g7y0F%2FN4q3Hid0zpdBW8sUVpCV%2F78Qj9kzJiRPCuzdXpJ0%2FVYhbg5PPnmSKOGF5drbQ66achnjufy4uY4RE%2Fdxd9mFxP4I8Yrw0lkSTX6FsC8O9nc%2FlwgdLLIWXNVeoqahygnatn%2BDS52Qov%2BbfT57rxKwvaHF7FXDoXcrl99GU18KYKafKHqYuLSaTw8%2F7mr7z0HNKt1fEiel3osjrCB7QLsV%2BS7knhcuvXN1jh2UXq2iww4N6eWvxH7rxJ9AY8sxk%2BuofP%2F5L8sC7R5MrVxd1%2BmweDz4XAsavvvfP84j9yNuZK1d3KIqH3auQcO0PEka9fuXLl%2BvUNDVu9%2BkDAvXX9yhUrFltyZTiRtLgGzCfhJzDCu%2FD6E359LsdYvHLlakD1%2FIrnoKyAspij3JvL0RavJ%2B%2BIiiCdu7C%2BQZbwIk0DJFq9%2BvkVMdKeiwfUwE%2FTNTRclLiK6CfD4jjx%2FeUVK%2BLTai5HCg0HmOKQ%2FpGjO%2BIFTetXN7zjDxWSl9BhBOY7v37FPxM2k3FbaKSVsUiLz6O4yTNZZJPAIusbfgOfLXzVY3FcXA0%2FLcGZyoMUEnSmGHm6YolrldiJuGE1%2BVnPPbceCvWRzydMcqJ%2B6kUJalrxZIUZeQLOBWEZflC8kyxOJaTVqjBSwgtXPF18Qc1FfSd7RzGDk7yQ0HyIQYpX0z8Xn67QoFUUMxIcS3G%2FOelw1OsS1ASMt3hMi1JREaT4D3piToGU%2FFKg06f%2FyPI8MSPSytXxLvJCvDGihmNiWvHkyfNSZGETuvfqZKTFBMuJYpESrQxf%2F2Sx34gspZMzIa14Wh835kSRuJRKUcDNXzCq0HhUVQMT0uKKuGxAEFy9ktLT6vCXJKinICCgeTByHWWTxI9YbIpzjpbi9SvDUGE0Bk0BKASKEgCbkJ%2BS8OMX49JYlXGqmLTdeurVq5mhnjx9PvvqjkqFmNT0z%2FgfLlIHAVRDcQP9GzBr6un%2FrEdgu7qXSD9JGkZPnk%2FY7i4QtzQUFzcUxw2%2BxN%2FkfxazNx1UE%2FkxyWH5bOJMwZXpNDJjAlP8%2B548NSNoO4mKi6GHJP3Ci4stTD9doIm6erKinj5pyh4JZLGACc5eyUxJmzjJ52l3TBWvjIOKed%2FTp1IUKVS5WNrA6BhPVjCPHxn4JeKMF%2BuBiCopkDStZmR6nnn8cCHU6kjojL5tcVGKqINZFf6lE%2BeVxbYUhT9XZJxsaFid%2BLbVLahmurpwvExS0z9TH3wp7TBPNTSsJ99Hve25BjQbvkih42USEhhA6by1TqtrgrFq%2FXpQcq5fLUX58GHZ1OokTyV948lzaaIxDIoiudaoa6lvN%2Bu0YrRZuIausJMst5i2fqSb0aUiUWmYEZnQGdHqxHnlyZMlT%2BbmrK8rpgd1wky6mN6ZcivhjPf%2FIiSOeqohGenpP5hWCn41kcGMKN6XFp82%2FArPF00jImND8XPxSC%2F8mk%2BHZBSVtr8hoqfnVzZIc%2FcAvWeXUpnR3A8mioapJil8MFuO5P8AkIe3%2FVxLs4IAAAAASUVORK5CYII%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'70'%20y%3D'-180.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAANwAAADlCAMAAAAP8WnWAAABgFBMVEX%2B%2Fv6DcxD90yC%2BMSQAAAD%2F%2F%2F%2BLzfaFdRD%2F2SH%2F1yH%2F2iGHdxDDMiXEMyXGgAuBcRCP0%2F17bA%2F3zh9zZQ54aQ%2F29vZZTgvv7%2B%2FxyR7MhAtgVAxvYQ4vKQbMzMzq6upmWQxKQQkYFQPX19e4LyNFPAgiHgQyLAarLCDivBzbtxvi4uIpJAULCQFSSApHPgnDw8M%2BNgjKqRncuBy2trazlRalpaVwXABRRgCCwOZpm7oUEQMPAAAvAAAAEBGdKB2QkZGhhxS9nRaLi4wAABd0dXlei6c8AAAYAAA8QEAiAAB5HRRdYWFIAACMIxs3AAtUERCYgBNqGxRPUFQAABkhISEAAAtkZWZ4eHmdZQiwcgk0NTiIVwcmOUR4sdVLb4UEERxPMgRFEAtXBgAlJwMFGAAvDAl1HhYoAAkaHQFLBg9GSFApLTooKQM3NzcgIigVFx0lDQBKLQAHJTwnPU1mQAA4HgArS2E9YXmMWQIFHShsRQAsJiFUfJQeMkFLMAQ7JAJ9y4hvAAAfRUlEQVR4nO1d%2B18a17YHsrbz2CDyEBFQQAFBQIeAGqFRNC%2BjMUEStbFN0qY9SWtOY0%2FTJqe9Oaf%2F%2Bl17hjfzJkFzP3f%2FkJjwcL6zXt%2F12Hscjv9fqoso67Iv43MsQpbXdne35%2F6vwOsRFSFzTajdvfsV3Cz%2FX0CHsBbKa2vlBRnhKbzcuubxuJdewYnji0dHprdvAty7B%2FBkjczswZbHfY0tzxI0mezIF2yCZPVmbX8JZXVt6QiaZ%2FcXFWi43Euwi6DmV7dPT7dXZ75AeKQMR9daeDyLd193sSG6Q1hYOAC4%2F%2FLBPbi5O%2F2loSMLsO%2FpwvH0%2FMz%2B%2BT3A3S23B9e1wxrMfVnoCNl74L6mvZa%2Bb1sgSvcIyl8UOjIHSzrYEFKvlu5%2FWbIjp195tJENLs%2FRzZkvCB052NfTyqGF7vOyL9nkYsFrzxI4dJ9fhsskZGZ5btkauGuL6FOufkAnZPUAeQmANXCeB83dg93y9FWGh9CewIPDpWtLW1agMb28f%2FflVwBrVxcdcSA7XvJYklkbHQvoi%2FtwelXRkekmsmMbyDrLswXbVxMccezBoh2p9aJD1nkl0ZHbsDQiNkT31e2rCI6swpYZbG7GvBYXF1s%2FDb56CFeQrGDcfmlsb2730uGjh6Csh4%2FQrw7iW7yKPBNzHH2qzKBdO0RgIVopXb9%2BvVShIUzpXg1619ra1QvmZO2eIbRXAMGSi%2BcFweVyCQLPu3KNH%2BDhVp963tueW7hqwZycvtS3OLSmH%2BthkeHqLoEXSnGE11Vo9%2FdMY69Ydk5u65qc%2B9oj8Pl51%2FAS%2BGwEfu7GkMWlxcVD%2BOVKFcjIqV7q7V6q%2FVQSVaDJS8xJ%2FVzUvXjv4EqBW6tpg3NvQdEvaGFD6bnqvcKTP3CVgjmZ1w5zeKlRbWTy4nP%2F7KMAntr21alqkum1m480jM69BEE1a%2BsXnj8Oh110ngcH5dPT7bmrYHpk7iYcacW5xXsJHZXsCs8Lh%2B3b4178B8CDB%2Ffh7PIbC2SuW4EdWp67%2F%2FSbwIZ%2BpdGpdS7V7mP0c7sXj%2BC243K1kzhuascB9z7kzAiOoau3ZOf%2Bxz9a9wqToFPimJm%2BPHzImRe1sF1bgrpmDFCR3RbLWre6zgWd0d7ZzSd7p3OXBI%2Fsalcp3Q8Ths6kswR%2FCunJ91uPvu%2BhLEevDre29u%2FC2fKloMMArgUOb7xZpWTxoHDv6HAfCdir3pgnL8%2FSg8vJF3QCuPt%2B1LzgwvDomgeBLKk6Xs9LmL8EdNoBHNly2DQ2Pniv0xxR1%2FBL4WTkFJZUFdP9MG7am7j8Px7qJhao4pdhdsRxoFqFxcvJmsaGWmmQ7rph7VJE5%2FilpnI1nkdF097E5coagfM8uJTqEeqlqtVBxQK4MOirJbqUk8tQyznVaqz7sGDenWAIj%2F%2BsX2K6HMmR07tq99xz14I7wZS1CLrYMA%2B6DJsjZ6pNnUXYsaCVTnho4C2XLiWDVQeHvtJcOsAWH%2B1M4WiCe7l3Kf7kQC0rcB9JprWSrxj2UPBeXQ7%2FKqu2Ce43zFOvH18Z1as9XzUvJTEgjub9paHS%2FxLkzEITSibq1YdwcjnoZg7g9euj%2Fjt9lDEtN9RKE42GpctCt5avN%2Frv%2FiLUTWslX6%2BZ6FoiusvoTRLHRV3kpd76l%2BfoJ%2FO%2BUqiAqfbXpTS4yAIyZGGnx614DqFk3p24csY2J6%2FLCONkl3l9jFVtdIiNWmAnLlF6ZEZ0npfjT%2BmI441iX0U49GAu7Vk8AqcFciK7y0MNq%2FNcW9pauqa86H7VHD%2B4ZbiuXKQXakf7r36GH3esyA0X71SP4u6lR3Ib9pGsE54H488LyFqt5TzEbKOYScUrLgv21pIdB0eLw9gOIVPPhXOVlJwNL17CaCa5HemA4fEn3pJKtj%2B489O9Qdl59qGO38iLvKsOR27P0SUMwJEXFoiW9soMtlKQTlZEQchWKiwjgv19WL0EfwIlO7LqXxjrBtXS%2FToqCuEIVEN%2Budh%2Bc%2BxKScj8tpU6kNYSi0M9MGSnfDgt5VzKrcuPPREnjl2A9OjYXGJhMCl0HyLJyQBIStGa3xk3PyHTB3D4SvoEJqcKzlWBUqnYunf%2BcftKcgBLnkchi1FNXnz%2FHVFVy3CSiny4ZdLixnj1kqwh4%2FL8HLUBjm80rveGQ74%2B7FCgwfooYirAK584Hyc44niCGbTnIbWhlnwjCVK9B164cDQYCvahwst%2BNMveJlTejLNHTubY3bYHDkN91gs9ZVt0GIP80nMkVz6FRDUrjB%2FcNksy3a%2FNp6X9S%2FQ3INSZUOEb8GqgVuF%2BXWSv%2BEOMvPL183Fm4mT7vse25BR4uWqmk9Si2X215emt8GHyXZG%2FO8fCuG%2BsOQH6kxHBuQR%2FPtH5B5%2BNYwKw36uYr7rFT74w1lSVzDMzsectu4Bawmn9qx7vb4fVvK0vF3Jj7s%2BRbTh0u48SBuBUmaeAdF%2FwZ0uljWqv4HmxLyZ0m7N8fKyRQBmvcbv3f9DnzUJi0OMIvCtcqgclTEOPH58NDAX4fzzqNTtQUg50puNtFZD5m3gdRg1UsdH%2FuiD6SxzienOyXV5Ynp8mbyt92NFr9oru1Q%2Fyf2bHvVWL3FZ69LrtHLSVnV4m4t%2BJAJxvz0239xuT84F00N%2FXhsTcQBD4Etweb0WWzCgNVc9rPdEJUpd6CuJ1J8AJ22PcvdQhcHzwda9Led0Qc%2Btj3wnTmotCm6%2FrYCt1kYu5CLwpz%2FRPchHyYqC73N868Bz9kILzsY9HkbX77LcvglPVW2azbA5dTMRbcuGzG9AcPpuBLA9NGfn%2F2RMN8N6dLY%2B%2FSUDWagq9VRUZH4BiCb1iK2Hhwz5oLqjMvyITGOQAYvRuz%2FTXFrDBxLGDk3dKuF9rEZRcEai4o8Qp%2FPvFKsIijpNf%2Blw6cbwZKi9hHtBjc0jBaudjL3sRB9vjsqg5uyYgIm89LTKStQ678t1HOQH0gVsbHqES%2BnoH6C7DsbOxt0Awhu97tnTmu8QSJIsiWlv%2BRcsjkDLALz3XiR5XpS4Yhu7eSSTPJT6ceTN%2B2ZWhdjfvV%2BdXbCGvSIkowGbn0sjaaY8QCGlKap%2FrDu14lu4lsy4hHGuO3e7I%2FPYBhPmKZpwTGwWxwo7R6MHT%2B%2FMuZFXujFhohXG2AyjCMj4hzAaCx42OEKh7NauygpiFIGjNmDNsqm08QeEobvfhvXaujhxl%2FPVm2YrUrpBts2LsGDQrcux8G%2FUWpR%2FYdPriPkAw3H4DUtTx91UR3NAVIjDEFU8DnJ2caqVhZKap1X7NwuHWq4fwI5ftpQeXUHJGd9dPUBBZrp4CuHV7bQGp1gm8VXN0hKw%2BzmfVsSH%2FAvjJV%2Brft4X%2FO%2B75KHLS5%2B4EPryzjunMrkwhcd2GXOrFwiArIWThHJzKNkGVwQB%2FKecXhzph%2FMaYG6tkviffwUwN85nHJ%2BXlFsmSPYboj8DuDOld82tN2MjJAsfEWyVOqufupXEXGtagU5oTMDOBkwv5%2FCTlxZY3RDoFJ%2BV5eefK9HJ59w3Aek4Wm0ugUDfd%2FxKk8SaspOlTLE4M1%2FPQLDsW0Fzm%2B7EhbtdOvIZWeOvWMb6caJRcygZPPpsAC%2B1zvv54rGVZxxu5RiBmMQndZdrIwE23Tmk76XpDgfdnSxVcpWyYb1kTawZLGj5FfWXHOrlHph%2BjyfHZdUxCHYqZzW0rPo3MnEOu392hjxDaOijwrkoSVdJST1bMj1MvmeTE8Dqcr3ZYVduVzN3KhPuv3F8Ky%2FAEgRf9OW8BvGErYnOx2lFznBuySHO9ARerQxko2Yb1wX2qWWZulVKpVGmEqpCsW4WG4t65Ne0YjCufEVwZ3paHoS28gcqQoxD8O0EJWQskM9FKVrRTg8%2FC8hM4mR8TPExYB3MRDGOnEFd1FDLfDIddvGjJ1LrLD3sQr8L2mJwmmX7ypOdOohCXdyFpZWTP0spAlHIRWVvGg%2B4Atpc73KN8ALGKNR9ofglZSFCnk3oTcD4e0yOk%2FAT2Tsvl8trpOVpUVPhcYnO5pDTnxMXRQB5Ox3JABQpsbrdZKDBnmGtY2E1gdfE%2B8MngGLw4aCbBnxwert2kS3Sl7faQTWCrQJw624tzbsDeuMICWYYd5M4W9jpaXC2D6y4azLcKhp8dGznfEBn%2FH7wk0xd%2FXe9wCrbyMc7Zt2TdXB2D8DD3ybLkptB%2FQXwlY1KUfoMAIkQ7BtcjPO8KcyyfG9uyvI8A88leLHw4BA1z2FyucEBvtBGT2ugQNkV4F5%2B5BUQc5xvybfenfR3axYfrkMmZT9dEmtGu7pYgRIexyY4l1VcX%2FQzgdlsSQ9E1MBNlxD%2FbAKgb2pw85NtaYc0wIoQLkjo2RXjNz1j1I6udtJTfAeAwKXXGEJrqsUO9yIRs3RtvtHmoIGnGSKmqopMdy%2FMVLj5bdQUNrtGjjI2VZDWZ4EpGM%2Bq8vyLB2cnt884EWETrnXEVZ9KnmrHjz4QOM9aNvlESwe%2F380Yz6gJfqcHuCasmbbfVUcOxajiTPnT5s8%2FiNAlppq1TLr6UZpnLKiDnntbfaoeaHtEyuA66wOcp%2B2l0anSX4PLC7XnG2ZoHmErogkPWkzDC5qSpvc%2FhMTF6W87exGymxSzIAsyhWuphC1cz%2BjqpCO5zNIFQscyfVdO6XFed9f5bnz%2FZm4OKzt3xZ5JOY3DpfFE5kvZTnqiFd56zKDcxF4O15U7lFnNdn45WiyF9R6koZRGCNMTQkemZmZlP9DgSsnxr3Ro2PrwOJzOE%2FLLbqtyugU%2FnGzCFCxjLLco8TjAD52cvWEn7%2BOLsZLs8PyI%2BMvNiwyK0BpwxKoiY0HUTstxUKZP1vL8BUUNnwnmrsVAGoBqTNiLxaDQaj2xkqgBvT1dHSNaJY0%2BbU6gsEY2txQOJQzaRXUjp1dPFinEQQPrFRhulSMBLKeWUhT%2F4AhtpuDhdsCk%2B4mhWw%2BZbNHyYwq21MijpJdluOrahtqMX65EtF42DgDcF6QjHYPVjRoTeSBL2bCV8rNFhOsAJYs4Hb9emMWCXlXL7%2FO3HBuSTz8GKMbYIFCKchlkiwIBkBx5r15vFxvM7G61WCTk5YIa%2BfHpsxKuFLGQMiQmXgpRX710cRUfTtFijZthyphwlUn9Mfm7vPlHmo%2BZgZrp8BtKOQQVQyBZihti8eVakNXgTDaQtHstukpgIYriCQlubJzOMQrBAdHByDL6cUd1WCKfTRsGbc6YLQUPFZfINWcr4ENuOITaUDaojnMgeixycILLyyS3Y2PEbbmsV%2FJmq1xBbvhA0DILyosHqsem%2BpQnShTLbicLxyerBqcIXVmGtCYhs8ExgdblJVUNigiHAmLy0bwQnmVVNzE71d4EIor8Sxzj6ZJrI4Xp%2Bdbv5AtLeUtjcVmS%2FBEZyc9J4b43WcCE92zaDjsw81iNdPB%2BuhAC%2B%2B%2BZXVpdaA3iBQTbv3QkLJjdZo04aY%2BN8JgLFwM0wg46caO9S5fmsjOzrya9lD7wNlVxjJxcenpnRXmEJjG2JpgrG2cIwOhNKqT4cK%2FDoGxMAv389OTv7DZuWR2w7osBbaWnxopgCnzHp8plgZsPoDPc6IbjhYofA8%2F5cQ2Iym8U1%2BS%2F5iS1zVsZM2LdgTGRMMWWYCtBU0io22e6MUlqkUI0%2BjydPJ1TWa3ALqk8R2OTs03tvl9m09hufJWzi9Tj89vzO5p13EDeKAxCyppQKuoRhqQWdxHqO7aJiG6kEf26HsvNST8prx%2F%2BdRGiTs%2F%2BGA1aLQsFZ2R4vuBrw7tnEFFvPDTwKFzEfBvo%2Bl94z6guRuXOMWOu4NjCPgj%2FPd9ks2y78xaBNTv7ecktkrWpBcHw2drw5NTWhrBcbulpHM4a8Ux2c13icGJlvefc2rlO2k0reczS%2FB1%2FLYnv6d7utRMpgoVNQgvc32tAmpp7rm5TXllYydHHjqc2%2BCUPGGefgj6cytq%2FhrH34K5mHdaaXgokuOealzzvQcD3TjQZc1ESwUF9UOrPWsGQu%2F3dZI1kE6H6WzL1hIzUbG9Rofo2vwJ1ebBNTENEDFwJbWumUFdPS3lf2vKF%2Fy2Kb%2FK6fwREHexzp9u4bqMiHtmhFcnEQ28TUu5TO5VPJMB3S%2FuzGsfnKO6rk8a%2BKSj799WKgBd9W3DXI1p3r3npONUHlS4PYJqY%2BpvUklzYuQmt%2B1mt%2BEyW78N8nW%2BamlTVhNge%2Fvf%2Fw%2FjdIN4bn2YRcv73J4DbBq32B3oJNf8IW3QCTVkccJ4pKTs7%2BpdnhJI69400WwCZu3Lk1fE5d%2BNf3g9j0PQrefIO2j94ybXVk4eKeopKTf%2Bvs%2FGj%2B2fbyU1MfIdERnsIENn4bgjYxcUOHpHBBE6Va7WWya4Iq%2BS9FJZ%2FW3moSG3xXN4JNTN34DyiPQxHDpUqjUWnAs2HBTUz8RzuMIzhb%2FKT98YCZHQp41QopQcJ1oumC0OA%2B9l%2F9B1ajYMPD8Pi33x4PORPlHrzX9hkY5gzzPT1wtGbCpSDjgm9mZcKlk8NjEBy88I9QF3fg3eYNtMN3KgbH3vNBm2AhzbAFTi5Fc16vc%2BPMuBBNVpFZPp19%2BgfojYKQQcHJ6Lz4v1OybT1Tw6ZHwDgubR0cwxWIJDLpZKFQqMKp3CjRR3cGx988hT290%2FaRmd0YvvSP8GFK%2BeGtKraJqTuaJIRDtm4NHEedwVAMJZGWEqFIJBJKpEHe%2BqwLbgHf30u41N5z%2Bu2w3k09ayGe%2BnYoxLXesQlaRXIJilbAocwCxSQUpEjA2eqV4F%2FOaAYO9IuZZPkXg5IZcfyPisOYunPR%2Bk%2FYnJpQcrghcOrXSosQN29zCCRYTLPc3kv7WwocDdTe6j%2FgwbDDR5bVjGrqQ8uNoASnbjzb3LzzcXPgLc%2FU3T2NQ4QGTIYCjvpCaaiuRDm1ojva7lsDrmKU2JZBRe%2Bmvv3YBvfxPcCbDx83B2%2BBOkXBKJCg5uIcAoqzE9%2BiTq12Aucb8QxesvuuP5dR1ltFV1H54MPmjYlBpdQCh5eDEYIz0UzmqLdYhXxcExlbdONipGlUctDnMaY%2BPv94587H57KpyeBuqABTwA0D4Lxye8SYW6JBpaCwEjRoAaEKjLKbctifPLvz4dtvv22B0wxz7JVhABgEZH306qayCA1dYTLiNepusSLaKOMrZLoNo08xJy5akKfUyZc6OJpqS7OqMX0pXzAXT0M%2BSrX6rZ8Q3IyqaDoOZer5hWnJ0VC79cHlNYknRxGaZNiSbL3ZOxq4ZRV%2BwkJBO7LfgPcTqrIbsjkMAu3%2BP81ozJaiQuYhEzAHTfa9o8zDIYdRA4eYFNFN3XgBf6qmPIPeEhOVTlmFpvJq4NCNxCxAYxXos5Gc5ao6uAmA58z6bvyZ9%2BVV7W4giHO%2BQnf0nhYLKuCoT4K0SYVsrdGe9aMBbupDLQ4vnt%2F5AHkvx23AhyHVHOCWnDNd7basMOcZ9qRcCApxM16kezdCox2erA4OeXOcejfyUIuwG02jtReDqjmQFdBMryC5oU0GaGxJxl0sQLNcwhwGp2pzU%2F%2BJUcbWqy0PwaFCPe8X3tSHXrOiK33uBYNvvyulXgkyZiYb%2Bj4kjTg7rOotMZtjzgKVq%2B0zOBqBF5t9XKW3hsIygb4r74%2FibPq%2BELciNjnrCcGIx1JhEB%2BKc6iUcle0r25MfSl496wDD02uKypEPhC0uWrPVBiHYktZyV4xWYgnpBi8lbtTI4Bz1IZd4Z9yeYR1fvtuP%2Frx95stYr3Z9ftokkNTzjTWDXQ0UAVrYgtIhWpMWkmkkpiPj7LTaYA4M6G8q8l%2Bj4soRWVMTWhrQyNrGX%2B4s7n58T8983roPYZCdjfQcahdGWutfy7go%2B3F8nH7hke2%2FxxocTxvKVzr7tN47KeVlu%2FjYhCS7gFUU4EutiAMT3DTYrL1CVTJkDUnySyu%2ByMmvvbP3Rp0l%2BhMFN%2BAjpjVlNGevvurllRMhg29UqfX25OEofLGhgXDtfaIcL6kiVlafaTegu2xfUJ%2B%2BTDVJ7c2%2BVXa2l74a3Z2staJCaiC%2FcSkmlYJzMjFgnKAZCRgJGyj5eMYxjtJz9TE%2B45PV3wlfvPTycnZ39sVWLzc3ulYFGVStaIgp6sYASRLlER9YT5u1%2ByIA0CJYOgDX9S6xlRg7h2V85vZ2dk%2FOu6wm9fINzWpjs1J0dMitpRVc1NbIyQ%2B5LSWgPfPbty4ceddTzhCxZL9Csbnb77%2Bbw%2Bb6makMjYNraPJYk8KNOKiSZt6iQ4ljsQQjm8BSD3ZCG23tbkiQL6PW6XTbU%2BoJTfGNVcCFifbdMBl7B0HR0gzT5Es%2BeLxKO3VISp1zIxyAz5EiWsYA7TkJge64eg3dnCrEKDMbw%2BOxjuTmjqlTFJiANLxhKjNhmPC5sFV7aklOZMozQznzSge7eocZXN7cV3iQRMj9R8Hlj2HQubQO%2FhUCnHDGVnvi85kJoQWpX31qLKWJxK1vyxybIujkIMYxQx5WL24UFVnWgGh688%2F0YzeJIfFxRVsmRxmc1GOJlXmZejK4GEE%2FS%2FHdUkVxhGjmUXzCwmgrad5k22geCEq1qVZnGtfvu61U2m47WoXLGq4TXfydoPSlJoG0aT9GSB5yGYgeaXO0IqOnmsvjgN7zwHFAB5EbqNW%2Bub0q%2F0GFxTor2liZp0oWHMwbc3gvGnVIypNgNsusOKIarQaxWjaaW5rUd8KSLrblQZwse11iq%2BmvuqFzWyO7CUoF1MbuRhtwIkm8j3pJvK3pLlSrNIND0YSsQKkvXI9EPbsYpvHRHKwCNf6NSMNONFET%2FE5kDSVisubBQORVBWgIMXrdQyzbF%2Bh7dP0MYJ7aaKq%2Bquio4FrS06uoJjYhUBZvSsPLHruXA8LohhGVhiBY7tnNMlTlpQrqHrFdsJjb3FtO%2Ba8GUx7DLqn6EnjCRRY3lfJ%2BjtbbgooQ5uH4LAZh5npkwzVADEiuKDijmigWgjoh0vKydM1krPUv%2BNGKMKpvZqlvFHu7OIYCpmY%2BpBTBxyzcOsouUyaKhUUPfYsT9egyKI74aEHUfJBm09KlrdeZTbi8UhI0jg0og2OCxXQZiyjQ9GlWJDRqaAwmSVQF2lJdfMXX39hD9tME0JeeQ6Jas1UtEIBevG%2FvvkjaZ1asIQopNPVYdM1SYjRnNa2NqEE9rZY70F7RAJ9mcavV4qWTlYdmrRDVmgwqXmSCCdPM0CwpPdU1Ou22DKS5Y6eadNjhX554ens5GzVRp0HdVLjUxi%2BIgCJikt%2F%2B2jYToJKpi%2B6LI%2FTOtDKqbTmuMLvs7NPbTAxtFkNY0aaCeDLGe9FzNtoPJLV7rSdTi1BkSkXh7%2B%2FU2kFGK%2Bk6oc41ggr1M3sjBUTNk4WZpG787u0T31qkQwalTI2tgioJvdsN78EGZNPVubtPM6uFxwNJTUunPlxZ2uss30UhpXCeFotufeuQN70Q6P5%2Bhsb4Mog5xQsNaapwS03ynEeTq%2FXF4cIC4ShEP4VjweCQZ%2FPdEtDTd05JyYHFp6HLew8tk6%2BWNkkmsikCwWk3bFeZ8lw%2BQLxohRLQnslk8lC5x%2BmQwI3NEwqnwZpeEJcH7icjVhApp8AVKViKIKK0tlPxIAFQhJDVc2sFOMSBHy4WPT2sh98QV8gEDUbzJGgDEwXOSUoWjz0Omx5GpGgVlaLPtmQmKeXZSGzV4yqhXwx7pOtLAAR2rEyzrrNDZQuaLSQSQetHmJl9ZR54jiFYrctqoBD9ppGrhlis%2BEyAM5bkEYrzNEE9FS7uKIUoCn2xHbegvBEi89KZofb9NYbKQPHYcaRiPbOhnNSYcR2KOuVdL6Pi8cpRxMZwSU2vOa324sW%2B1bIvHrSKw7tnoGLDMyGI%2BEcoX7S%2Bu4ApDszvpzSWhcEn%2B4zDAfBbViqM6Oj7GFeNBoDub02ePKRz8TZecbogvLIqGzc7I9gEfwRSwfjieuWHoVDTmvd%2BB2MQSyq5iO4%2FCcp83NcBH1vLIGRsphi1RGIVa9b8Ze888QCuB7KzMptGpOP7Oi4T1Pm51hwySeT1XRMCgXisGL%2BnC4ZnKVHeKNWti6b%2BtIQUvfsGKI%2BUSPbKUdPTvkLTS5qBZnL6oOgyUKLzSJbSGuNB9JPo5QDIDGGWz7W3DI4X2s%2BIaUVkPEOj7LbVONLMSsvWX6%2BslCx8iAcMsOyTo6uaFeAMXzr7W23iS0OKevPG2HM2cpWF3KSRsec0Tn3CJnFyNNMA4tzrugeIvnJwM0hP8noDJphiNPZyWFrUYx3xieQqYKzpJYs0EEGdErANGV4Upm1xXJeOyrJljWHwrjlsR42O4ci6WPzZaBh93kkDJwFbGxrtV6fHi3uU8qNJahp%2B8%2BR4bkDi4cL6mHrNpA5UzukjLB5JQhaeNjD4LLGLTFP1XUX7ZIV54xIoZFtj0Yhbe3crUFwGQspD7KvhP58RVKpqGCC9zeM6FnYqZ1xm56kDc5CskpmLvQPdOo2dlgN%2FddRgjmztuRIYnOx52qZrqEQ0gT9OReaUIqYVPrX7OTsXzYOXOt8E1rbupVKl9qyUtpDR2mQyXBVJUeliT8mZ2e%2Fs32IEIttn%2BBhW%2BK66YozOhODwya7vVQf%2FPff39muNLAs2DuCk2wvv2mTQ2eif8KanCu0M9lABtJWzt3sWRx%2BTcbcQb36i98xu3WOkDPVbZZ94LqtuuETpU1Di1atPidSa6XNlofQ4Az72gZbu80stm0zMpr%2Fby%2BxYXZ%2BlKwan%2B46OItmY2EMyX%2Bip%2FYJFRWL%2B1%2ByNB3%2FSSR5xgAAAABJRU5ErkJggg%3D%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'165.5'%20y%3D'-107.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAJwAAAFDCAMAAAD4eZcxAAACc1BMVEX%2F%2F%2F8Au%2B6qu90AiLtmd7v%2F3SLuuxH%2F3RHxvRHumbv%2F3yMAAABkdboAir0Auu7%2F3CHd3e75%2BfkAwvdpe8H%2F1hvz8%2FPuVYjs7OwAjLj4xBAAirutvt4d1vwd1vfg4OCoudz%2FzxPOzMyokgAk4v8AotUAgqT%2F0BX%2F4g0AirIAq94Al8oAs%2BQAeZg5YGoAc5avq6kAPFXAwL9ucXuSo9HLyuQwQm0Ab4i4uLprUQAAfagAs9%2FY19YAmcW7jgBVWWOQiodKSU1%2BfnykpKJYZ6eDk82WlaW2tsbCxuoyMjG2yOM%2FP0Ccrc%2BXl5RlZWOBktDVpgArLT8mIgD%2F8X%2B9mwD%2F4ETXuAA7LwC%2BlABMPwD%2F8KStiAtlYFFVTgBjXwBSY57qlq0UMEgASFmReQDJgJAAUm0AmrhgRgAAZIwAKDelcQAASWUAcp4AOUoUEzWGlLZkbYUwMERPXYoxLU5td5DH2OUPFixOTWVndnY3NUFFRD%2BGhpAlLF5xepU1RHw%2FQn8tPGEpKS0OGh5ydMYuPGVXZ3eOnMc8S1ggGhdYV3FRQiRKV3JNMgCQaAAwKTA7IQCXg0tdWUBLRy1zclBFPE7q3IHIu4l5e6WZiWeGdhOhnWE4Niqzn0nKtXj%2F4GLd2JCll24bGAHFtj3%2F52Dy4apYWCrWxwCMhAAAF0hXGTo0GRoAABb87LIvDSOsPFtkREbZnA6GVWjueqNTIC%2FHRG4AACBVNC0AACqrYX2RP1Z%2FH0RPTCZZACDiwzxvGzmkmkQAMDKdbHX1r8l%2BVFv1rs%2BWXGpXMRx4Pl1XMUM2VERnUzEQh5QAZXEYu9EAIiGOfDgoIRQfOjHUE2IiAAAgAElEQVR4nMWdi18TV%2FbAxUhIAyEGQpMJEIgKhMIvEFSSEB5JsBZDYoQ8jUhJjCGGiI8WCyoVahdrTasirJSKunbb3Xa3a3e73d366y7d7v62D%2BvaP%2Bl378wkmUlmkplkYk8%2F%2FagQki%2Fn3PO45z5my5Y8RWI0Ww%2FNHLKalZJ834JjUSqVMuxvRvPJveODFfumT50eQL8kMWqBGGt%2BJjKZxdzf328f0AEAo2nvYPW26t0NtbXDp%2BzKLVtU5rl%2Bs7mr3275Wdgsc5fGB4GcOWsy1ljPbNsG2Gq3Aml4xVpjtr4yvPXAq9v36Oymn0F59pNAVahUj88MzYO%2FV%2Bxr2IpKw6nyc8OQs%2BHA9u3bX7TKnjGaZOBSxbaEVA9erkgpbuvW2oZXtuKYWyGd%2FRnTaU%2Bn2CAX%2BL%2FiIK44ojS8BOi6bEqdzWazqKjeSabkGr3GfmZbulTsq82EQ%2Bn2m4b6z7%2F44muz0FPIZDb7nHXObqbEzleUZzPYtm3bTQW3teFVQAfHHpDz5Ubiu0gs78wPVlTsHr44a%2BJQfZbL1UzhttZu3%2F7qSy%2B9hPLtH0J1VwMEqM1%2BoaIadaParReHtEqjUcmJY5vnmcM17KltwAy8BzoHGK8WMxCb1j6Pjobd6G8wbTWd67ebLemGZy0ymZ0KjnLMkQTQ2W3m2dfHgbx%2B%2BhL6HtXD2PeGgUxPd811FAAm6bAuLCwsnqGAo%2FLWNAGqK5%2BvQJ17WwXuRqSfOvCqyZyvbSVa68kz26qBZLJVVNPYlSAvbd9%2FuYL8U%2BRfCYTtroE84Wwz41Rc8EOA5FZdw%2Fb9l9J%2BKu2HGvZsv6XNi007M0hJBrS2bzcQJnApzVW8cXAfkDS4A9t1c%2FmwyayDlGoDBm0A8SCnUWHQM1%2BoIPwQlPTX7NluzUd1A3up2Q42MODC4V40LVxC1b%2BP7ode2m7OY9TJ%2BisKZANmBYHYfGi8Os1Jya950cweTrVECUcXfCnlwIEDe%2Fa8eHowi%2B%2FkB6e7RAVXsY85GvhkOMYOnL%2BUxXXyhLtMadXdbOAwGZ79RTa412zs50jUmjvIwqjJzz93MRtcl8luMebmIYnqNAUcO6viUnvqTfpfCdRY%2B%2Fefn7Owy2I1diq4LAbKD25r7R7o0%2F2scqxMN0dRi%2BQFt%2FWVi9kGQ8MetDK1Mx55yoGZC3vHKTR3MB%2B4rdkHKkbHeMqrMl0Yr6DMD2%2Fk4RC52V9Fy2Zmtbtxdp46OwDJI5TklIZaqLolRqqTWKkqX4BWfXDfL4oBh%2BY5tKbPLR0XKHMDTN5MapF8BM5395uYwFnH86x88xfoEnuYwCkPURm1uij2xKUB9QgmZu2YoFLccBHZMLOeZ1IAWM5SBN98cipzQSPdLJOKuON0JlxRjYq2CbbrhhiwbdFSmJXBJLUAgY29Pf06JnCShYxIkqXM5ogNTL9zw0mURtVQRgwuNhzqrNYcXUeJauDW2Qt7M7oPxYUD1fyBPWhhkq2vU2ObfX28YlvmLL%2FIcDC7QjqbPUtRN3CWZoq%2FrbrIcHgc7rLRstkocyqquWcAB71izwKd6pSH6PRWsa24YS5FZ6ILxDTtByishhyxHzKczHq5MwyawmhaE5IjtEZlNctvODedYrPif6%2BdPsWk1whcghrOaKWDY%2BUODUunUmwLiZnNcLapKwM47S1azTHK%2BsPDsMM1fe7KNP6rDE8fOo01fWob3rrFoKqB7kpjVi3VJJoF3NKtt86cefvqCf%2FVMxenh4enL57z%2Ba%2B9Pb21trZh%2Bu1rcwn7Dk%2FTvkMWh7AsFgT3dtjRd8LvdfAFDn946NChhbCfjzji71w69%2FbEgp%2FvH%2FplLSzyp2%2F107wZ9Nb9C5RoMvsMxTSVIVzD8PSsHhGgwufD%2F4EIELEU%2FNXp9zsQoRjxXlvvf%2FPU7DsX6cYvrOmog3CNde822kCyrTo7W%2B3b7%2Br7MKKEAMpmaamwWSoFiFKxsFQsRRzB6yOv0HYe4arZi%2BVGimm%2FhHKNJqm5HHOb2tN9AhIbgiBSaSkmQvzPUqm0bPQG%2FYBreHXP9v1dJopFO91Z2jCC0mUPwrWHnGQ2qVhcmiHC0rLR5SwBpbYWrjiet6ZbtsZOO95wu2ZV3fACyaR8hAINCtBc1mjXsBUkf60pbZ6jukWXVZOGzRamXgkjDOFu0psVwwPK2zNLbktoL2e1KkpHr7rh014BQ7jlWxdzBOM9yYXQ5JCj7tuQDEsL1%2FCWnmxVWrhS18rqjbeyDl98HZ4I11EI3PDptDBChBMKSXTClbs5LAuj3X7SZEJ7KRdbNs39MkyvObGUTOc6fO%2Bt7BG9FjZNiP1r1ekcDgEGHb01hmcdJNUJCHDOoJtkY9ed26asbChcPzHY1ZhzhBK4%2FkCvuiWyQzRKUzzuNZ%2BDSOd6b%2F1Qzh4sGW6Llmr7Axkui13fJsbg5kbSIBO%2FP0Kmu7NwKisdhCOaVWaZpVtZJQjtNGL4NMGsSGOaCwjveNyEL5W5Dq%2B%2FQvdOW%2FHaxJzKsFrThZxW3ZallzN9lTDeGtPDSNnG7TUxiW4Vr92pFQjgulI5QneapnGebtg3aLa5nIujWKj2%2BqSl6SK8%2B8hB1GbZyj001k1PU27pgZrrT%2BQI4yxVk5WSDmRYivc7FYZWdej7QEHn1WOhQ0iUldvOFikmLS3g365V0%2FDW6XOf%2FJJadTD94x5RY2LKBvEO7oPzBNLi%2Fosfe9EC0%2F%2F02glHcE0sBh9fCqo4gdvtcDqdDrd7457n6vrQYvni0PrVo0E3%2F6s7c0uHZl%2BBZs1cVce2ku2%2FwtBPSXQVb1RXV1cQh1%2BDKQjM6XAgfL%2Fe5%2FH5%2FU6vc8caKHu7EmJft2uNuqFyq0qpspzvWiovLz81%2FBIsny%2B%2BRZUuYJLADNuVrcqkZazet7u2Fu%2F7Tz9yCBz6cDzo9%2FrDnnB5%2BaEuyyflC6qEx0lkA2CA68rLr2ANOKXOfOWtU6fe7F9aeouyDID51YJOEWdzxxBqvINw9wakG%2B4HdnV44%2Fqwz%2Be5f8OmVNYYgXII%2B4Bs5bYtRqC5RMZUWS8C%2BQWYS1IOOrja9KoV%2Fm4zOVM%2BHR4QNPYNnwNw6MwGTLyuYiP5Snl5Ksgrb%2Fzqe5PKqE0Gr463c0zSgV0XZIXAwS5eNWwVT18lxOAgtmyqMutScXQgWDZ674bdpjIqlTLwmUpTjpITwqGrdLSdpVxog2fm9%2B7d%2B8uGhnNBQgx2hDOm7Dqfu6VsdGX13vKRI3a73aa152ybgKkOuk2HTSQhso3P6P19ffH1U2%2BGiTWJwPFu2gRFt%2B4uAyJ0PRi9%2B8Hq6uq99UO5OhPAXbEFExvVpsLcbGeeOtEZtGPsflq95PARO7vKLqg3XED8dY0e%2FuBmttwKpXbPdis6ZGsW8lHd%2BLoDcThg74EfTptACPhBH4hrSiBGVZfno7IkGy4P7p7LrrqG2u0vmnA%2Fv5CH5vYGBf6wL%2ByLgxCXVgbzBS1C59rYjSNHboyt7XCXZYory9QaG3L7Tbiv19jZG7Zi3YvE%2Bxz%2B%2Bz49X5AOJy0DyvrQDSVDa6iIf02Z8pPy0qsLSa%2BqsWef7lPB%2BcBAE%2FD1cb7enwGHI7S0UJKBb3x4OodHvLp%2FLlU02Wbnx1nxYXB9Hj7iD6cblZoIwuJ%2FSD20jabEoDtw4M1Uvam0zNE3q6ngPChcnC%2FwxslszTRozh1OtxiQid07Hs29knvL4gE7YYMTu4hSMZs%2BVU2NN2pxf3R0bOzo0aNjvuBXq0feHs7ZjRwmzCMsVKvT9DKedAQipEBMxwbdQAxd5EOxuGXjg9sz2V0C6u5UKpgb%2F8wKruLCGqzLYeOSYFIaDyAMO%2BwVDw6v3jRNU3gF0dzTs6lp%2FxC7WDx4QQ9CMCiUriVjcDa1pYlr5fDq8q2LiR52Emh3soit3X3wZApO9xtW%2Flq9be%2F9sTH9%2BslkKEGYswEbPxj93ertW6fA2Ktt2IeNwNra3dUV%2B7aiRWzD7oNv%2FCYFJzHvZcM2eGnmt3%2F%2F%2B8efnEx2mHBfyGXahAhdo7%2F7YHlmePc%2BWHnBXce7UdOhNey%2Bg6BcJMBtqTFfHszSsyazjf%2F%2B0%2Beff%2Fm55479ofyhgBhDPtzBwrobh%2B%2F9phoarAIV7L2xv1ZsGzxEbDXV2Gb3jo8PDjIw7%2FjvP0fZnnvu5c%2F0BMW1uD1HxUx1B6R0Y4ZOHdXj%2FeTVTa2tq%2F807XpwSioOAb398TlUXv4WG3UYnM%2BHJnu6zJUuLe6TdHAV8xlLEjUyZe7qs%2FrMn57HFQfkmC%2BpuRbnmNjtHPOMrbmltKmVgNbiHKH9sMFZqoM6Otrl6iTcJaC453G2517%2BAs0WxNzgDvpGfGtut1hcRq1E8EWxWPrRyEnqze9QJijXcpSUe8BIcBOfJ60K5A%2F%2BdLgWmEOD%2BrGxsY92gKwgRRkTUlYmBV9zrq3%2F5gJttVFdcYlmf6nlLP3vk4JLmvW5b7BBl6GcFqnbuSO4BlPqWvCjHQn5aO3oo9kLr4M6iPqoBTwZcuasmWZ3qcT253m87UQNWT3xKQHu5S9wj8i0H9STGC07nTvWZi6DydpeAIVGBLq%2BVvX462cun7Tq6He%2BqoZmLpwBbzA4T9m3q94LHSJJV44nCQFdSQJN2eJEt%2BHnDFPzV%2BxUy19kPJsZTDHt5rm0k3L4KR8Y5p7%2FIxbo%2FvCXYCKD0eIBuB3zWZAq0HM%2B1RXjl%2BdY7AM3mggrFNWD83vR4QhiCaRDneKvZ1%2BPp8omWjrxUaKbVY%2BThvX42bPzUC5YbazOgSlNF8arMRm%2F%2FBfzwFlssOB0z%2F%2Fxb2cHB9dyFZtgOAZnUjjVFfMzJ1Os1YOHbMYOYCmzju0RNYltcebC%2FOuXzy5abbItEssC6v%2FVZw796W%2Bffvrlx5cGBycIq0uUiXVtxDNit8%2FMw4wJk%2Bb8SZNSi59%2BAV8YX4QNKQkQlmgontZmNg90JA5T29ETcIPzC%2FbXXptbWLLazWFHVjjXklImQQ82n758%2BdLZ2Tk73GRQY5u7BN9o%2FvQcl2c2tdBZzDYtPNuo1aq2KPUpuBYKV7h%2BHv9BmVan02mTC%2BXKjgH0DCLHx5wlMhnhHY0Es1Io7sFNegesqSn2OfvscC3v53XmrAhwFM7q%2Bu%2FPc3geikwp06biHMWUeuNRwUdY8xTJAEgj%2FfHkvo1MzQl%2FNfdzXd9g%2B9%2FPP%2F%2F8y3fHEv3DzEgi%2FMf53G9THDFheeLLT5x0cK7%2F5ndAlAMxf4nCPf%2FpU3TFlWLq6lpme6KLM1H9L6a65%2F8WdggEAgq4r7Ju%2FS2umP%2BOwT3%2FJ6%2Bjr8%2BdMWFo%2BdWzvquBINpyvDz5cuTj3%2F7291fWPiSzif%2BxYLL%2FTKNO%2B4mme%2FNL4LGffvwndNLz2RdB6BTo5ApUwB%2F6vv362NfvMNquz7UYhzQKRVMo9s7HV33YbPHlY5%2BBKb97x0dHx%2FRrO5xXvwbV8j%2B%2FzuOIaMGinAspeDyewtAe0Pv%2FnpjK%2Fifo9Hz212PHjv31m%2FvfopX8Mfo93UWTGnOUh4pIpPb4w3%2FD57L%2FLP%2FDMXzq88%2FZY2jDYsisetZpwhJrEvFwvMd679iXn78MFfWv8n8nZrT%2F%2BvozaGjf%2B9cfzXU8U69VbmoSbDxRU8zviP%2Fff%2F4NrPnZyGfJKe033%2F713992f%2Bd0jd5Ztj9Lt7CHkmxg3GmGHHyHX%2F%2FFF9eC3i%2F%2B%2FRzEe%2FnYt9f04ZHJkt6bbqFr5c6RrmcWjzueqPEBh%2F4hD3kQtDhxNwoc4SvffvPZNx8%2FDQoQpG%2BorUrtQYRC1%2BF7Q89IeTITNKoC9VYF5JN3ot1%2FpLm0uRnh%2B4PxoLO5VCgUN54IVNW1%2B%2BAGp9HVR3lfscFKbDG5SG7oDkU7O6MhjRyCxuCKNSIVlzZLxUCk2PYXKd%2BnqKoLxcG%2FxBuHb%2Fc%2FA9MqTd3qptDEo2Cf07lD%2F1OnRs4TaRb85L1zqIgbvZ1tVSU%2FOQGqGJiW04kgtVg6FVMRnxcU5mKhsNnt%2FyTaJFJ0PzmBZO7XbOb71FVVP17lQ0UKV1bXiz3waiIazRU%2FcABsH7WwRbq22M1TtP8F4CLp2zQb%2B0JtJXXHw5iZR%2B%2FezONOATbSEZuK%2BBE4whIIUufIpELRHgk6ADAZT%2Bq42ltSWdcdRL8q3rh743xR3WJoshOdcqU28gmFjpFJedPJ8ms%2BfdzvJm6YEyJxNYCr38R2IIof3D1C17fkQlQRDVwNJo0vIVDQxJ%2BDbrf7V3eWR%2FTulPaE0hPdJZUlVT%2FihhW77h7pLx6cOdqJdjMRovFA7I03wu1xwjLX6HtDesKGPm%2BgraSksv5xHKMrcx1eLhpdjUnjQdcKSfuB%2BdeCCViId%2F2mM7HpVYzB1dV%2F58S%2BUOZaudFVpHGntWrC2EJhEk4oRR6OONB%2FC6ViqWNH8PpceRDBldcXqCwBdFXHH%2BFbmstcRRt3lmi3XpAJ5%2BELGkG%2BEjv1Hs%2FRoN8%2FtqjHtrlKTxggXElVXXdcnKS7ke99TFlFYp4MxNPggO2Qd%2F2C5kaB3%2BPzI9ieTdf1T9zwT8dPu0pQqasPeKUJy969WchNW3Si7NdEM%2BGakRPhPoffp3eimzZRdbruPHUDGz9SY2xAdT3rQJmYVzy4W4xcYbQaEnBEb5UK%2FMCezsRGeWjgMtc9XzD%2BnRxHa1Orj8fCbjFmWvGDVTZ9fYaiivFCGJygmUBX2oh4rzjgQSUwAqViZ1Cv16%2FdWZ7c1VaFukNvaOK7I8vLyzd9QT6q2rLRe9zfLKnq5D3GW3KkbejiZv8YAhKasFTq93l8QafT6R8bAXkVSm9g%2Fb2VDReQjbvL63iMXrnN6CoLNqLt5OHeyiftQxcjfh%2BoSqSOIBh4MMECkTp9TUBrraHv74y6ysrQwVbm2nhvDtUeCHdctz11nYomH9aRQ6QkOMe7fQ7gE0F36oSG0O3rLTEsvb%2FhKku9UujaWB5zw1h9d4jj8g7AGW7iu0lIg07a6PX4fD4%2BKesLHZHor78SlpWSRPjgzlVQfgKn4PJqxi1wzCl4geRKIZmO773mSPkriBrC5rX73mZyhYcp7w6MKmUry9y2A4BDiCbjfAo4YbPAe9TRLMbQxCBoiB16vbslk60UntoYgTFv5SanhlXFDCJNYotrM6kqB9Ek7GiGsy6p2xlcc4u9Pn8jJRrMEbdhlfLgPeZXHjEQo3VKZIjhcAhxgAG7grrpoQOA6T0%2BJ18a9Lkzz0ck6TZuOIHlV25wmcZk9m6RInQC7%2B6TJzRixBkeefddz5rXP4Iga9cENGqDA1LKvz4G%2FNp19x0uQ7EtxBNNrVPCgUgshVNWqbTR7xlbQ%2BjYmt38oMc3NubzOVtGl7lcDdDF5Dz5RGJrGvWYEjc6yv3NVN9Bv%2Bsu98Whv4jdbqH4ronDmbbS2sRThMbwk5kI9agSu51Uh1zxb%2Bp97sR5GJhjucwT5pCcp15MLNtQRDFU6EwK2Jz3iQZ3rXLZclcuqkWikF5AFesYiFA61kciX1nmsrKzRxU89To%2B6jKPeuUQsTdM9uIHq1xWJ8rIlEIUilM7bE7FIeG002GgZOcyENs6FSLDQmLUNdJgUEtLUJ%2F%2B66zc5DL9y0wwECeXqOlSFKXi3Pcd6W2y0RucrvKohjQiw0RinzUbwzaCdJv28rJRTj0C%2BESnSKHxJNfPGXusOOjLcO%2By0RuclibaoXYeT90ZzB6JM0Xo8HgpDnLe5LIbq1pAFyHUI4kkxpBOyB%2FzCzKyGrcbAZRDGgXa4Z8c47OiE%2BvXKLxHuIPDpTuZKYSxidQBPz7qBI256aTiHdccmb%2BFENFzN%2BQk5oA6sa40lQx2ArocS9Cbc%2BQhklmqCJ0c5lZbakWOJw%2F5%2BAxzrLAUOIMg06%2BFyDp3Uc4SaUoteiVWbjC6rHhihw%2FM2Zqlab4qRDzcTcBUEdwZcMPyYvEkXbZxJ%2BSH0UOJAoSEJxTouWOTWScJq4VQDLHkIaEsdGJED08A4njNybktPzzAWRiR2JPOQKDTI0mvoKYTlvL1gdBQ2I%2FgV%2FwIpI2Njc3NUv9TC3chzhbJYOOJ5BOpk5o08c7hA7MixWTnE32fw%2BHADtY7HPH1Lg7LEe1mUwYb1F2ASJdZBQgdV0Nq%2BQvg12gPRWO%2BcDx%2B4sSJ%2BPf281wWI0pTt4IKjiePXvMmrqLJXDgUOz2TCl5b23EFXJ1tWrBpdRaLRafidnmTYsDhllWH7vchSeWRMpSw1PkUONELlSUlu%2BBrFaGi7EW0zFCjobqbmtGnjuEijXBSCnQmbm5EgjPtCt4LaIezqleh4LUXY38TKDDl9HQidedVf%2BoAnQBBkEbwv8Ch7wQJRdGDda0re3pFhhj3u5tk9lAWNkBnmIzEneSrrQT8Pt%2BkAQy11pKEVPb0dHMX2hJiiRmyscFk0RT1xB3JoScQIA79Qjf81q4Sguzs%2BR%2Bu7apcbKf2VCKeqCkwo3%2BIwzn6rs1Em8APiUhslXU7u7leHrGGcrLxdr2gkBuinUO%2BeDyuv7rZOWmAA%2BGFnpI0uOMcr2haKFJDusgr23phwpiaRMUgR38dzE%2BJUle%2FyenqiPKdptyK6wVqaXsBNS8U7GutlelsJcCuXLapJeaQKDsYFMx8PS%2BkNmApejLIYLTb2WPlEE4XocypaZKIF5WtvS8A6e1tpUJDVbfE3axB1s%2FAGygGF40Al%2FiBu6XggU41A6u%2BwJAN2vVHzlKYrLydARv1%2BKJRXX2AqxRmj2bNW7iI6EYYJVwTR%2F6qXcgd4iBcZswovl1r7Ey8AY1yzFW388cAJ6WmNtLOhI3HfMihdu3mouSssU8yYuMxDSSY7Dxu4gBOG2li4KpgyFWxgquvm%2BGgqDNNMhpx5JItt9TtDBReN6kWGbkqW6sCuB8KX3yYS%2B8%2B0Ii6hEUkgbuu6uqHCrUrwxjHQ2d%2BLFX3U4FJQmKeZJIceKyHHFqsF5j8VVYmpRKPVe7CBRR12W7mZ6C4ASY1Zl5Wreypry9sQ7NyScMQjq1V0STxuKCtB5YYsxiXh1WhXY8XNLleYBiAWdSZBNn5Y38BlYk2wtBVecfzYCuwMjFlb44QhE1FkoSrqi9g5m8cYhiA84ODgy7%2FDGYLMBxx%2BQ05WDZF8mWT2ZkVmbx8AgkqdfWRfMOwLsAwO%2FAU7JJ%2BCm5nvpGOeXbgyfNTXAFlk3Jpiikc69yFCXDXH%2FM85K%2FqVDCFyyM9oFJVt5PhE%2FnSxcxsQgitmlcggVK%2FM5DXoJNEGFu1ty0%2Fs%2Bbf0FHNMI7AeUa5Emzinw%2BcOcpUcSwaOBlw9fV5bewbytHXT0k%2B5RImsOBcymMioWLQn05YNc8RV4J1JfLI%2FbZOpr7KqoGTLsAj2LfCJHaG01Ve3okVFVCYsD8oZJxjmldZT%2FWJAmJJHtWwLsaYjceugZNGl081bGOc9HmiAtgAXP1jtvNDuMObKVw%2B04cUHPAItu4KKhLGVs07yqFStfMHtjvA4JEHpnD5RzlMc6znETbG0y5WPXQq2fnjJks4FlGukBCMwrFd3pQ80TBlKygEQ6mrj7GLJcoZxlYt0B%2FQSQ47d4UHHhiKvID8gMOx7CGao4yzvqJwOJYzMBNzfyigXkKlEhTDJjZsEqZNal7h%2FgDhWC2pK58whlMUDlfPruWvZdrPBHCFOis6d2UTSyydzEuSQv0Bwm2yqUvMzEsSxnsO6KWe3SKYnXl%2ByH%2FKmhQQhVmsvNbYmZfohfoDVtGxmOMo57Lt4eMaDmjuOIsUoRpaDDQxwyvcH1A4FuWmLjYViIUMTMKJqKfABFECWxI9LPJXR1Qk10Q3QwYGu3AKVxyAY9PMsYTgDsf2aCTKy5UpCq00S7AUwfxssGQAC3OKps7FQLs8q%2FY4iCRgilPPfP9LTTIGyw2BzVi3IQtfwckLSFvPD8zbYDJ7chlTJDeENjexC6sopUBnrSyp2tUeCrGAU%2FYT%2B60KQ3dnJDalpvbdwny1quT444nJ3rp6E%2BPbN9In1FB9TyKhJl5iFyZXcK2hzUBTJezRMd%2BGaMyc7YvUk51PYt0ag4KswPydtae3PRDrboU9IAD3P8zhAobMISaSN4UCsRgYfnKC%2FvKCq6rqUWsehzTqNqw9xQ4uRgEHRC5v745GYgGNOukfLOEqUbL2UCz0A2GrKSs4%2Bj4J0JkBxObFSEADcq%2BIfdpvVYcikZCijeTk7OAmsqRVERh%2F6snAZmQiCoZgawmjxmEViGW9ve2Podp7qtJ%2FhBWczBzJkfVFcvnUZCDWCT6rSd3b2lZZVZXxkSgUkLbWXnVTe3cg8Li7qbeS6mWs4LZIVKaIJkfSFynkCoNG3dQd6oxFQyFNO6Dsbe3pQTmrKit7WnuPA6buUCAQCHWDb%2FZkqiwvOJDBOhZjTbmnh7Caa2trbZU3wbsPY5FI5ElkM4LKkwiwIVDW8dZWfITRhkRWcQ7Tnm0o2pRrSbO3B%2F%2FIqpS0QalM%2FrMyK1eecCBRDFhBVMs69gptReBSdzyP9S%2FjwGYo6%2BERTqq5kqaoPZ9raSUy8ycBtTozpeJS%2BOymqq49YlLlu0NCNrAe0NAFlgLhqtp6uhcKu39bNmDv7DZQDb4CmzitvaH%2BgYJvKpPp7BFYcKZbN%2F%2BlfeDevZqoXcvJBvAa40AkMslL017eHSbgBJ0Rm5G7M0ISrR1Md5p4BP2xX6GuhAeI2o4HrGbOz%2FOZw%2Fr16OSUQoEDsm4HV4FxZgiUz3UU4aJIi5%2FvPaFfiIYmQW3HdsyBZHHcMBm4Gvd7inLHuy7OFwgcjj79%2BsnOEJgwMunNYbdEghLTEOrc1J%2BAD%2FS7WpSbtrV67HQjn%2B8IhkeexCZ3tRF2u1CnssrKtp7jmsCTp%2BHgQ%2FSct8Bf2OZgOlEln3cjECCChyf04WvrgW5Db2%2FvLlB6VFbi%2BR8AAaS21l29vWDiseS5po%2F7HQiSOFoaL8YFliDX3iQ9HFiA8B1evz8e1z%2BaWwqFJjXdGlS6Jyc1k6FQYM6nj8f9wJDY6fjEyU1fcW5iVh4hPx0YM5OA7wDi9fbpTR2o6LQD4RNerxeeiBcIyLTUSe0AAAWESURBVGdx%2BQLHXHEusZbZ0%2BGIjEg42dlV6XFsipfuKNIjSiRdD6nhMHma9ELV9zS%2FBZ%2BP6Iv1VJzzNA9tRVXiXU%2B%2BzviITsVIYxEuJcXEdiILXDDVnjTeoIRDkGaxe6lIbFtshEei8ZHGRoT40fpU4M%2F0HHgfBzza3%2FKPrmLBWfREOHgbWnOzFMHcwe1LBX6i5wiaoTQm7sl9VLTnk%2BjGyHD4jSOoOAmBnwQnJd4IujFStGu%2FdVcp4PC7K%2FwEL6whwRFvkXify9PKZFGt08EJxWMEe9W8RgPn%2Bm9RroZGxThHC%2BcmTlQk5oeUcMKNG8V7xoHSSoCTkm79cHYRBpOkq48a7v0jxbsHXzZLC3edGPjp4FzvFfEa%2FBoCnIB0m4vLSqw16OA2bhfz6QtLqWcEkq6aEX5FCvw0cMIVbm%2BZy4ATUMNdJwV%2BOs1xep1mhvTTwLm%2BJ9mLCJd6XdnGveIFEgj3kBKubGOE5IUkuKTfiA8fKepDBGnghO%2BbSC8jFn4pONfh2aI%2ByaXfSQnnuk5WCTFDJF8mHl0t4hMraOEyAj8xt6bgDi8XdcjRwb0%2FRw78xKok6awPDi8zXxzkDs713nly4CcWm6lLBDcOrw4V8yEzBIdIXXAo3Ei%2FXtRIhEuFEvHK3WWOr3Cng0tZdeVGmrmMhNkX0py6a1C8UcynG%2FVTmUuYEfhVhOf0ovf0JfDEDw6vzhWnHUFKXyk41730rUhawtNmMbykbV2HV4vytA8Il%2FrAJFzZyo30Ya6L89MESV7n6jr8wUhRahNiPSdNwa0eSeuiWjLnt0jiZnqx6%2FDduWJMwZQpOEI559q4e%2B%2BmjRDpJOZw6p68FF7iiT3AskeKkMcIcwgB8Yp%2B18YHRwgBtsY%2B8VTvSMdDkkHF9bvbnD47ABPVTdKMP3Vne1np4dWnyZEki7Xzon%2FWO%2FjkPlPiGklh40eB%2FE4YZhXdr9M%2BjZDCRu8k%2FUIWMYhEU6FNfZ%2BDhIddhChGgpd6foxwHoxJ7QjUUqlZjnjjg2U8i2nhznaF3BCKheN9%2FJR54YNehFLnWHdrVT3r4yM5hdTIQUce4UJSlA59mTmAbVtUGKZCT69BPqyfIpAKG53hn9ToPs11rjPF%2BRP8dCcUNCaVVwbo0HCsnAs1oesocCuFIRpZ9OiD%2Fr6%2BPn%2FctxiToyv9lVU%2FcDxLrDH%2FRd%2BXgUe4zHX0Xjmqj5oBqya5sUiuNkyGAp1QoupWfBMC200HuUVpnwrF9H5H2n2QSTrhV9814e1olT1G2DErUshRIWwFrKz7gdsJhXHJoDB0b4aDfHIMw%2FN6i9tzPHnQV9ZhjRnSd8wS9sZW1hV0qUWmaDvhLjW1JnZ%2FzMsnBDEBfHqLsLlvQl5SlbocTWI7FGpXkBZpCYtllVX1IU7ThAW7Sw0M8tDEetyLLzPAtqZY7PaORXdVlVTuPJ5qIsoGTKFuhYJmDbQuj7OjWUSXHEdy3lSoc10f9%2Fd5UfEHfx1S4wM9QBjoSkt%2FLJTa80mG4%2BS6raRItEtRfHukSKTgTXWHoj%2BtezyepwtRQ29iONWTD8DJtObIxCS%2B45gAVwl%2BjQjXwWRCkzCTCF20VjQB4akJCqlL%2F0yZzrQYCXQ3KQhwleC%2FHze5noyp7AENcRcRppHUrtfKKqpjXBLtgH3O2hnoVh%2FvBWKYmny8NGc3c55fZR2maObWXMImjjqatClT6Sw22wAUm8XSoSrONExpWepM33id2jgEAlied1VwJDLLwsQkGOMpQEVKc1U73%2Fn5niOPic6%2BHmg38JJBlgjH4eWj%2BYrKZl%2BKhqZAFIOACY%2Boqqqq%2F%2BlneYh8moAhbrZGYtGQRmPYBRf2W3f1GjShwLN6GnUukciUWovdNITthYwt9dsHtEoZZ8H1%2FwE%2BLfNdw17xgQAAAABJRU5ErkJggg%3D%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'34.5'%20y%3D'-107.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fjpeg%3Bbase64%2C%2F9j%2F4AAQSkZJRgABAQAAAQABAAD%2F2wCEAAkGBxISEhUTEBIQFRUXGRkWFRgWFhcXFhgYGx0WGhgVFRYYHSghGRonHRUYITEhJykrLi4uFyAzOjMtNygtLisBCgoKDg0OGxAQGy0mHyUtLS0tLTAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf%2FAABEIAS4ApwMBEQACEQEDEQH%2FxAAbAAEAAgMBAQAAAAAAAAAAAAAABAUDBgcCAf%2FEAEAQAAICAQIDBQUFBgUDBQEAAAECAAMRBBIFITEGE0FRYSIycYGhFCNCUpEHM2JygrE0kqKywSRDU3OTwuHwFf%2FEABsBAQACAwEBAAAAAAAAAAAAAAAEBQECAwYH%2F8QAMxEAAgIBAwIEBAQGAwEAAAAAAAECAxEEEiEFMRMiQVEyYXGhQoGR0QYUIzOx4VLB8Rb%2F2gAMAwEAAhEDEQA%2FAO4wBAEAQBAEAQBAEAqdZ2l0VTbLNVp1boVNi5H8wz7PzjAM2r41p66e%2Fa1DWeSsp37yeioFyXY%2BAGTGAV9fa%2FT%2FAPdF9Cno91ZRPm3RP6sTZxaMZML9r886dJqrE8H%2B7QMPNFscMR6kDMyoNjcW%2FCeL1ahC1ZYFTtdHG10brh18OXPPQ9QTNWsDJIo1lbkhLK2I6hWBI%2BIB5TBkzwBAEAQBAEAQBAEAQBAEA8uwAJJAA5knkAPEkwDXx2urc%2FcU6i5P%2FIiqtZ9Uaxl3j1XI9ZsoNmMkLi3F%2FtWKEF9S4LXkgoSnRa1sU49o9SpzhT0zN41vPJhsg1Kla7KUREHQKoEkqCNMmGnT1rZ3gRd%2FPnjHM8i2By3Y5ZxnHKNiMZM1jFs7ueeo8P0m2AfXsJ6mEgRbdFW7hnUnltK7iFYdQHUHD4JOM5xkzWUExkXaGpsEVVoR7rIAjr6q64ImHWmjOS24X2wCKatSmoe2s4Zq6HdWXkVsyowCQRkDxBkaVbTN1I2bhvEatQneUOrrkjI6gjqrA81YeIPOczYlQBAEAQBAEAQBAEAQDU%2B1Gvr1BXSVsXG%2F%2FqdoJQIoJNTv7uWYKCuc4JyJvCOWatkG6zJwOQHIASZFHMxgzIEyBAEAQBAEA%2BhiOhMwDzw3XjS6hrGS012J953a78OhGxio5k7WYZAPujyE4Wwb5RtF4N04ZxKnUILKLFdTyyPA%2BKsDzVh4g4IkZrB0JcAQBAEAQBAEAQCh7a6%2FutMQH2PayUqQcN7bKrFPHcFJPLpjMzFZZhlI6isCusBUUYAHISbGJzZim5gQBAEAQBAEAQBAEAi9m9T3PEKwudup31OB0JRHtRyPMCtlz%2FEPKcdRHjJmD5OkSIdRAEAQBAEAQDHqbwiM7dFBY%2FADJ%2FtAND0js4GqvAN9o3AdRUh5rUnkAMZPicnyAlVwObZ7Zs8zOyNT5MgQBAEAQBAEAQBAEAi30uLEups2WVhtuVVkO4YO5Tz6csgg8zNJw3cBPBtfZTjx1SutiBLayA4ByrAjK2JnntPMYPMFSOfUxJwcXg6p5L2aGRAEAQBAEAw62gWVvWTgOrKT5AgjP1gGgcO1HeUVN5LsJHukoSpZD%2BJDtyG6EEGTa3lHJmedDAgCAIAgCAIAgCAIAgHlxkYgH3sjqFq1zpYdpsqVayeS2MGsYqp%2FMAc464J8jI%2Bo5wzaBv8AIx0EAQBAEAQCk7aWEaO3BIzsRiOWEZ1Vznw9kmZXcwyi1Rwdo5AcgB0k2KObKmzim2x6zVcQgRi6KbFw%2B7G4KMqcq3h4Tlbqa6v7jwZjBy7GHUcSZ1K6eq4seQdlNaKfzEuMn4AH5SHf1bTVxzuy%2FkdYaeyT7Hv7ZqEAFmnNh8WqdcH12WFSPhkyPT17TzXm4N5aSxdjGvF3VidRSaajja5YMQ3j3oTIQHwOT0OccpKo6rp7p7Is5z084rLRZabUJYivWwZWGVYdCPMSxTycTLMgQBAEAQBAEApe0Z%2B7chtrIpdWHVXX2lYeoIEOOYvJj1Op6WwsiswwSoJHkSASJXHcywBAEAQBAMOs0qWo1dihkcFWB6EHkRAOc6LU7dJVbc53Kn3pbmwZfZZWx1YEbfMkSZCWI5ZyaJ%2FAqXC3WWI9ZtsXargB%2B7RAqkjPLJ3HHrPH%2FwAQ6mM8Riyy0cGuWWG2eWyyeCJjLBjtpDCbwslF5MNZNc0hNF32fblH32VkEYTBG%2Bsjyy2RjzI8J9A6LrvHq2Puio1VWyWV6ltLwiiAIAgCAfCYB8RgRkQCss06vqKqrP3T2hbB4kEEqv8AKWCg%2BhM0tbUOBHudTkE7CAIAgCAIBE4nxCvT1my04UfUnoB6npANHu0ml1WoutVt%2BnXu2NYb7p72G42Ovou3K9M5JGRK%2FqWrnRV5O51prU5cljdq0wWLryBJ5jwnipQutszJPLLROMVwQuB2WPX31rH70B0Q8gifgGPzEEE%2Bp9JvqoRjLw4Lt3fuzEHlZZY7h5j9ZG8Ofsb7kQP%2FAOogfYWyxPIDmQv5m%2FKo8zJL0k3HckaeIk8Ffx5O7sq1HVULB%2FStwAW%2BAIU%2FDMuegatV3bZevBG1le6OUTgfKe5Ko%2BzIEAQBAMd9mB6%2BEIGFH2Lg9euJnuzBH4ZS1%2BrprUZ2ut1p%2FKiEkZ9WYAAfHynK%2BSUcG0FydQkI6iAIAgCAIB5trDAqwBBGCCMgjyIgHMT2V0zai63T6fQV07u7C2UG7dZWSHsRd6rWM5XlnOzPKQNX1KrTPEu51rolPsY%2BG9iaKEdFr0DB2LE2aV7GGfwrut9kDwEhf%2FQUezOv8nMyaDgWhoUV6zQDUhRhLxX3rMPAWoSWVh0yAQceHSdtN1bSz7PazSensXzIl%2FAOFHUG%2FS8Ptdyu0VPX3WkBxje6sM5x5A%2FDxki3qengsuWWaxom%2FQncK7JaWsZbT0FydzEIAMk55L4AZwB4CeU1fVLrZvbLC9iwrojFcrkttbWMA%2FL5SHRN7jrJcGsdndZTWncg7fvLApKsEbLsV2ORtOQQAAfSfRtFqYSqjFyW7HbPJSWwak3jg2CWByEA8WOFGTBg%2Bs4HUgQZMdFm7J8PCGsGCt47b925VtpCNhh4HB5zPZMHQ%2Bz%2FAAyrT0qKa9m4B3ySzMxAyXZubHw5%2BUrm23ydkWcwZEAQBAEAQCn4lx0I5qpre6xcbgpComeY7y1uSnHPAycHOJytuhWsyZtGLl2NUTRausuy3aZ%2B8drDUUdUrLHJFdgOSM8%2Ba8ySeXSeV6jfo77Nzzn5E%2BmFkFglaL7Rkm%2FuAPBa95OfMs2P0xKi7wMYqz%2BZIjv%2FABEyRzcQDFbqUVlVmUM2doJwTjrjzm8apyTklwjDkk8DVe6Zmr4g%2Bxq%2FFdPYWZ7dQ32bYxsRtndkcsKoABXAyd2c5Il3ppxWIxj58rD5yRpxfdvgsuFl%2B5q7zO%2FYu7PXOBnPrPfQztWe5TvuSWHLribAjJRuOSxYTOTBnsUEe0AcTCMldq9eirglUHqwH6TbhcswWXZ%2FsydUBbqC607spVt2m0DBDWE8whPRQBkDnyOJEtub4XY3jH3OgSOdBAEAQBAEAQDW%2BIcE1Ad201lJV3NhrtVhhiADixD05dCpx5%2BVfrenw1SW5tHWq519iB9i4gDz0%2BlYea6hh9GrlTL%2BHV%2BGf2JC1j9UQeKa3Vadq1s0i%2FeEhSt67cgbsElQc4Bxy8DIt3Q3TDfKfH0OkNVueEjC2v1R92rTp6tY7%2FRVH95DWm067yb%2FACwdd036D7FqrPf1TIPKqtU%2Brbm%2FtMO7T1%2FDDP1f%2Fg2zfdmSvs9QMFg7uCGFljs9gIORhmJIHoOU5y19r4WEvZLCNlVE9dpNR3OltcdVQ7f5sYX6kTPT6%2FF1MY%2B7MWy2wbNKHCgDvTew0orPdl2at35Mw2E4yEGR6uPKe9vdNFscRWX3eCvopnbXJ57G1VcTpsOwWLu2hiufawehlnn2IRiuvUZL2EIOZJ5AD1m74Rg9vrlVcqRsAzuJ5Y88%2BXrMY9WDGbb7ANmn1TBhldtRCsPAhmwAPiRNPFgjO1m0dlezRrJv1Sp3pG1E5N3S9T7Xi5OMkcuQAzjJi22b2dIxwbVORsIAgCAIAgCAIAgCAaz2%2FwBKbdPWgR3%2B%2FpJ2BiwAbJI28x06%2Bs0sWYNG9eN6z2NY4LS9dr02LauALa%2B9JLFGyCMkkkBlPX8wnlOraeVUVPGMllXOEpNQ7GwTz53EA17t1aBphuICm2rcScDb3ibuvpmXPQo51cWRtW%2F6bI3CEIpUt1fNrfFzuAPwXaPlLzW277myboqtlKRsXZXhGlv0rUPUmabGGVGxxnDK4dcHcUYAnxwZaaexygpFLqa9ljiWeh7GaStw5FlpHNe%2Bc2Kp8wp5Z9SMyRKcn3ZwUUjNX2R0Kv3g09ec5AOSgPXK1k7QfgJrufYYReTBkQBAEAQBAEAQBAEAQBAPhgHHNdxm%2B7WUuHwWDpuPNUVixNdSgbS6mpQSxzk%2BMrNXXG%2BLjZ2T7E%2BmvG3b6%2BpPt42%2BmZRYxtV92N5RWUqMn2gACCOQGOpA8ZTWdNruWYeXBLtXhY5zk8abV2XVi8XW1swLBeQSvrhHrIwcYw2eec9J1%2Fk6YJV7c%2FM2rrU4b2%2BSifjq6vnqlCI1RQMoYit25OCWXAbb0YZHh485dGiWlX9Pl5ONXn80lxjuX3ZJKtVa9T6y9cBe5GypDYAPaZC1ftAchjGeRPQiTaqK5rMlz9TTUX21NKOcfQ6BwLgFelNjI9ztZt3GxlPu7toAVQB7x8JMhCMFiJX2WSm8y7lvNzQQBAEAQBAEAQBAEAQBAEAreM8bq0wG8lnbOytebtjqQPBR4scAecN4NoQlN4ijn%2FHu0dt3KwkKxwtNZJBPgrMMG0%2BnJfQ9Zyc2%2BEXFWghVHfd%2BhV8I4Atmq3Xqns1bjWoAVS52oWK9XAR%2Bfh4ecpusamVNSUHy3%2FgxZFSsXGF7G1aXg9NZJVWyepZmc48BliTj0nmrNbdZ3ZnavU17tNpqN5rrH3r%2B0%2BC21FP43XO0scYAI54z4S56V49q3S%2BFfczCnxJbV%2BZGqpVVCqMKOQEvnyXMIRjHauxF1em8efIgggkMpHRlI5gjzkWcHW90TWyqNkdslwb72E7VNd%2F02pOblGUfkO%2BUdSQOlg5ZA5HqPECfRcrF8zzGr0rol8vQ3OdyIIAgCAIAgCAIAgCAIAgFB2n7RDT4rqAe9hkA%2B7WvTvbD5Z5AdWPTxIw3g600ytltic61ur27ndnsdiAzH95Y34UA8Bk8kHIfWcG3JnoqqK9LDL7mTTafuvbswb2HxWpfyr%2FyfE%2BmJhvHCM11ytlvmeuG8QWjUM9zYrtRVZz0VkLFdx8AQ7DPTIHnKjq2lnqKk4cuPp9Tnq4OMlJdiw4j2mQgpo2W2w%2FiHOqv%2BJmHJj%2FCDnzwOcqdH0iyyW61Yj92R4RlY8R%2FUptPTtB5lmY7nZveZj1Zj%2F8AsDlPUxjGKUYrCRbVVRrjhGSZOgIhrIIF6MjBkYq6nfWw6qw6H%2FgjxBI8ZD5pnlHDUUq2DizrfZbjS6zTraAAw9i1fyWL7y%2FDxHmCDLaMlJZR5OyDhJxfoW82NBAEAQBAEAQBAEAQBAOSdorjTqLk1De0W7xrMHuyGz3aluiFVAGwnwzzzI9sluxnn2Lrpt9UI4fD9yDwsrY735DJV93UBzBcgF39Tz2jy9rzjsiY349vHZEh2JOT1nMsEsLCPMDAAgJJdhAMVV%2B5nUD3SBnzJAJHyyJlo0jPdJr2MswbmO9Mj%2B052w3RBY9geJdxrBWfc1I2nyFqAlG%2Bahl%2FpWZ0VneDKLqtGGrF9GdWk8phAEAQBAEAQBAEAQCBxziQ09LW4yRhUX8zsQqL82Imlliri5S7Iyll4RrGmoKI247nYl7G%2FM59448vADwAAngNTqp6i92P8i3rrUI4NOpBVrdPVU7sLWswgAUJYAwZmOFXmSMZzy6T1VWrrhp4yslj0%2BZ10t8asrB6vS6vnbprgviy7bAPiEJYfpM1a%2FT2PEZrPzJi10c%2BZNHym5XGUYMPMH6eklkuM4yWUzxXeXO2iuy4jke7Hsj%2BawkKPhnM5W6iqlZskkR7NZXF4XL%2BRLHCtaeYq049GuOf9KESA%2BsaVP1%2FQ4vWy9IkCrT26dQuqrKFiSbFIeosxJxvHNfIbgJMp1tGo%2Ftvn2fcafUxXlnw%2FsSpILAQCs11hq%2B8XrWy2r8UIbHzwR85Fg9lxF1te%2BmSO6VuGAI6EZHwMtjyZ6gCAIAgCAIAgCAIBrHad92oor8EV7j%2FADcq0z%2Fnc%2FESk67c4afavVknSxzPPsYLFyCJ42Lw8lmUXA9WKyara7a7LLLW3OuEc7jtVWzzOwLgeSnyllq63NKcJJpJcJ8o4Vyw8MvpWHcp%2BM9nKdR7WNln5l%2FF%2FDaoIFi%2Bh%2FUSfpeo20eXOV7fsaSj7PB60euNbrRdUKsjFbp%2B4c%2FlX8j4Gdp6%2BBMxbT4kXbXLPun3X7o1jLa9rROv1aK6IxINmQh8CQM7c%2Fmxkgeh8pGhVKUXNenc3ckngotRxc6ez7NrEeyt1Y12hd%2B5BgMlyKM7huHMAgjnyllVpP5iPi6fiS7r%2FtHNNp7WslPoh7Ps7toZghYEMUydmQ3Ppjr5T1Fe%2FYt%2FfHJb6VvwluMr2Ae8QPiQP7zpgkOcV3ZW6ywXbkoD3MylQKVNnPmMEqCB8yJwnTOU00iHfrKYxa3HbuGVlaa1YYZUQEeoUAyyPLEmAIAgCAIAgCAIAgGr9oRjV1Hwep1HxVkbHxwxP9M8%2FwDxBBumMvZ%2F5JekeJNGKeRLEj6%2FRrahRxyPQjkQR0ZSOhB5gzrTbKqW5GsoqSwyu4dxNkcUak%2B2eVdnRbfTyWweK%2BPUeIEq%2FTKUfFq7eq9v9GkZtPbIuZAOpg12lW2tq3zhhjlyIPgynwIOCD5idKbXVNSRrKKksM13iml1V9ddDqyujo%2F2lShUlDkMqZ3Bm6FSMczzMtKJ6eqTtT4aa2%2FU4SjOSUfuetboLdXZUupoCrUWJZbMixiNo2bSGVcEk5xzwOfWKb69NGUqp8v0x2NsSk1n0Jg7J6T%2FAMRPxdz%2FAHacn1fUv8R02%2FN%2FqQeJcN0mmRn7ijK4xlFJZjgIoLeJYgfOSdPfqNRNRUnz8znZtiss6H2b4YNNpqqsLlVG7AABY82PL1JnsYrCSKos5kCAIAgCAIAgCAIAgFbx3hf2isBW2WKd9T4ztYZHMeKkEqR4gmcb6Y3VuufZm0ZOLyjWL31VPK7SWt%2FHpytqH%2BkkOPgV%2BZnmLv4ftT%2FpyTROjrI%2FiRC1vaWmkA2pqkydo3ae4ZbBOB7PXAP6SI%2Bi6pd0v1R2jfCTxEoeJ9oargVGm1Fit5ha8eTAuwII6gjmJNo0NlWHvSf6m7qsn%2BFnrgnal6vY1g%2B7z7FoO9lHgL8AZ%2FnAx5%2Bc56vpsZ%2Banv6r9v2NnVbUvOuP8G51WqyhlIZTzBByCPMESilCUHiS5CafY9TUyIBg1mqWtSzkAAZJJwAPMnwE61VSsliJhtJcmgcW1n2xssD3K52KeXeE8u8YeA%2FKPn5T02mp%2Flo8fF%2Fj5HbT6bxPNNceiOj%2FALPeOm%2Bk02km6jCknrZWfct%2BPIqfVT5iX1Nisjkp9VQ6bHH09DbJ1IwgCAIAgCAIAgCAIAgCAc27ZXfadQ2WPd6f7tAOjWkA2N8hhf8ANI%2BojuWC46VV5t5QDTL6yKqIIvj0KlHgJuq4rshgx00tUxbTWNUTzKj2qmPm1Z5Z9Rgznfpqr1iyOfn6kOzRQk8x4ZY19ptQn73TpZ%2FFU%2B3P9D9P8xlNb0SH4JY%2BqIstNdH0TPN%2FbGwjFWlYHztsQL%2FoLEzjDpEU%2FPP9F%2B5hUXP8OPqUeqe29g2pffg5VFG2sHwO3qx9ST8pY1VwqW2tfn6kmrRpPdN5f2MjKR1m7i13Jpn4XxI6W%2BvUDOE5WAfiqbG8epGAw9V9ZI0tuyeH2ZX9Q0%2Fi15XdHakcEAgggjII6EHoZbHmj1AEAQBAEAQBAEAQBAIPHOIfZ9PbdjOxSQPNvwr8zgfODKWeDmFtZrRKydzAbnbxZ2JLsfUsSfnI03lnqtHVsgYZoSxAEAQD4VB6gTDimAqgdAJhRS7Ax6hMj1E0uhuiCFIBg6P%2BzbiXeaY0sfaoOwetZ51n5DK%2F0GXVFm%2BCZ5TWU%2BFa4m3TsRRAEAQBAEAQBAEAQDVe3d%2BRRQPx2d4%2F8lQ3f7%2B7msnwSNLDdajStQ%2B5ifMyKesgsRwY4NhAEAQBAEAQCBcmCRK%2B2O2WDBc9h9d3OuQE%2BzcppP8AN79Z%2FwBLD%2BuStFPlxKfq1WYqf5HWZZFEIAgCAIAgCAIAgCAaD2qv3a1%2FKqhFHo1jMzfRK5zsfBZ9NhmTZrUjnoxAEAQBAEAQBAI%2BsXoflI2ojwmGQdQ7KN6e8hFi%2FwAyEOv1WcaZbZpkbVV%2BJVKJ3PR6gWVpYvR1DD4EZ%2F5l2eSM0AQBAEAQBAEAQBAOYcSv326x85zeUHwrVEx%2BqtONrLzpceMlXOJdCAIAgCAIAgCAeL1ypnOyOYsECV5g6Z%2BzXVF9BWp61M9J%2BCMQn%2BjbLyqW6CZ5DUQ2Wyj8zaZ0OIgCAIAgCAIAgCAcjrbNO48zZbbYf6rLG%2F5kezuej6bHEEYJzLMQBAEAQBAEAQBAK5hg4lbJYeDBun7LNR7Wqq9a7R%2FUpQ%2FWr6y00cs149jzfU4bb8%2B50CSiuEAQBAEAQBAEA8Xn2W%2BB%2FtAOR6dcaXTj%2BBf9sjT7np9CsQX0Mc0J4gCAIAgCAIAgCAQtSPaMgXLEzBffs5t268j89D%2FMo9ZH0dpM0L7opOrx5jI6lJ5SiAIAgCAIAgCAYdb%2B7fH5W%2FsYByiv%2FDaf%2BRP9okafc9RovhX0MM0JwgCAIAgCAIAgCARdYOY%2BEh6hcphk%2FsdcE1%2Bnz%2BLvEHzRm%2F8AhOuifmZUdWWa0%2FmdelmUAgCAIAgCAIAgHl1yCPPlAOTrUV09aHrX923xTKH6rI8%2B56XQSzBfQjTmWIgCAIAgCAIAgCAR9YOki6n0DJXY7TPdrqTUpZaHL3N%2BFAa7FCk%2FnJcez1xznTR1y3bvQpuqXwcPDXc7DLIohAEAQBAEAQBAEA1PtD2SawvZpbFRmO5q7Mmpm%2FMCPaRj4kZHpnnNZRTJem1c6Hxyjna8RAyLUsqwzoSw%2B7LIxRsWDl1U9cGRW47tueS9p19Vi54%2BpLRwwypBHmDkfSME1ST7M9QZEAQBAEAxX6lEGXdFH8RA%2FvM4ZpKyEe7JOg0t%2Bo%2Fw2nucHo7Du6vjvfG4eqgzdVMg29Tph8PJsXD%2BwLvg620Y693QSAfRrWAYj4BZv4MfUq7%2BpW2cR4Ru2i0ddKCulFRF6KowBOpXGeAIAgCAIAgCAIAgCAaOumUXamsgcrmb5WKtn92P6Tx3W3OvVbl6pFlpcOGCv1fZbTOSe7CnzQtW361kSJT1S%2Bv1%2FwCzvsS7cFZf2aKn2NTqU9G2WD9XXP1llX1ib7pM2Vl0e039iTwPspqdQtjfa6wEsNYzpwcgKpJO1x4kj5S%2F00ldUptYycJdSvhLHDPPGeyur0%2FdH7TQwd9hxQwIO1mB%2FenPu4%2Bc11c1RU7MZwbV9SunLHBjXs5efe1Dj%2BWqtf8AcDKOXW%2FaKJDvvf4vsZR2WT%2FuNqLPjaVH%2BWvbI8usWy4TS%2FI0crH8UmR%2BJ8Loq09xrprVhW%2FPaC3Q%2FiPOZo1Ftt0VKT7nCxJRbOraWvair5KB%2BgE9gVZlgCAIAgCAIAgCAIAgCAIBqvHKtmrDeF1eM%2BG%2Bsk4%2BJVz%2FAJJ53%2BIKM1xtXpwTNJPEnE8TyZYEfWjkPjO9D5MMs%2Bwv%2BHc%2Bd9%2F0sYf8T3uiWKI%2FQqLfjZK7W6dn0rmsZevFqDzNZDbfmAR851vqVtcoP1RrGW1plRTarqGQ5VgGU%2BYPMT5xOLjJxZcp5WT1NTJS9pq%2FuLvWt%2FoDLLp8sWR%2BpyuXlZ0OhgVUjoQCP0nvCoMkAQBAEAQBAEAQBAEAQCg492gNb%2FZ9MosvIDNuz3dSno9pHUnHJBzPoOch6zW16WG6ff0R0rrc3hFPXpCWFl1j3WDmGc%2ByueR7useynI45DPmTPHazqd2p4fEfYsaqIw%2BpKlcdzBrfd%2Bc7UfEYZZ9hxjTsPK6%2F62Mf%2BZ77RPNEfoVFvxs2GSjmaPo6e5e3TdO7bNfrU%2BWTHoDuT%2BieK63pvC1G9dpclnpZ7oY9iXKYkkHi1W5CPNWX9RiS9JLEv0NJrKNp7NajvNJp386kz8doB%2BoM%2BgxeUmUzLKbAQBAEAQBAEAQBAEAr%2BPcQ%2Bz0WWgAsBhAfF2IVAfQsRBmMXJ4RzTRa63SlwR9o3MbLGyFtNje9jPssvgASMAAdBKHqPTf5qe9Sw%2FsXsNHOuHl5LAdraAPbTVKfI0O31r3CU0uialPjD%2FP9zVqa7xZjs7X04%2B7p1dh8u62D5m0ribQ6HqH8TS%2FP9jCU32iys4rx7UOhJ7vTp4ndvsx57jhU%2Bsn1dJrp8ze5%2FY7rTSxmx4RuX7LdO6aM7kdVa13r353MjBSbDnn7Tbzz5nOfGehpUlBKRSal1ux%2BH2JHFOPvY7U6PACHbbeRlVbxrqX8bjxJ9lfU5AgdQ6nDSrC5l7fuKaHZ9CBpNAlbM%2BWaxsb7HYtY2M4BY%2BAycAYAzyE8fqtbbqXmxljXVGHYlSKdCBxnWV1V77GAGeXmT5KOpPoJK0lU7J4ijWRL%2FZhxM26eytl2mq1wFznCP94n6B8fFTPe6b%2B0lntwVd9brm0zcZ3OIgCAIAgCAIAgCAIBS9rNDbdSBQFZ1sSzazbQwXOVDYODzyM8uUw1lHSqeyakc7s0eqXO%2FR6sH0r7z61lszi6megh1ShrnKPqaDUt7uj1Z%2BNez6uRMeEzMuqULtksNH2T19vvJTQvnY%2FeP%2F7dfL%2FXNlV7kWzq%2FwDwj%2BpsvCew%2BnqZbLi2osXmpswEU%2Ba1D2c%2BpyfWdFFLsVl2qtu%2BJkrtnrnr0%2B2litlzCpGHVc5LuPUIGI9cTLeEc6ob5qJoWg1r6QdzUi2UrnYGcrYo6ldxBDjOeZwfjKDW9LhqLHYnhsvVo5xj5OxKbtQ%2FhpLM%2BttYH6%2F%2FAFIK6DL1mjXwLv8AiQ9RxzWP7o09A8%2Bdr4%2BYVR9ZKp6JTH4239jdaS18yaSIvC%2BEX61%2FuN9h6NqrsmtB4ivGAx%2FhTl5kS4r0kIx2xWER7dTTp1ivmXudT7O8Cq0dIqpBOTud25tY5xl2PnyHLoAAByElpJLCKec3N7pdy0mTUQBAEAQBAEAQBAEAQBAEAQBAKftJwdtSid3YEsrbehZdy9GUqwBBwQx5g8phrJ0qsdclJGiajszxJThdPp7P4l1G0fMMmR9Zz8L5lsusccw%2B%2FwDol6XsTrn%2FAHlmmpH8Ie5sehOwQqkc59XsfwxS%2B5e6DsHpVIN5s1BHPFpHd5%2F9JcKfmDOiil2INuqtt%2BJm0ogAAUAAcgByA%2BAmSOeoAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgCAIAgH%2F9k%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'348.5'%20y%3D'-107.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAMQAAAEBCAMAAAAQKvrqAAACQ1BMVEX%2F%2F%2F%2FU5Z4KfMD%2B1R4AAAANYJ2lunDU5ZzU5Z8KfcD%2F1x4NYJsNYJ6munLX6KDU5KAAAAj4%2BPjx8fH%2F3CDh4eEAAA0OdLWswHbwXDEAesEAABPn5%2BcObq7%2F3iG2x4DK25S%2B0IU4icrNzc0ABx8AAB4OaKYOcbQsf8S7vLwAQm9IOABPQgAABRmMjI%2BnqKz%2F7IzmtCr3yiNUTBngqyfsuSfa6K43JwB7fYVARFJPVF7Cw8Y8O0BkaFvC0oujoqRETCklAAD5XjFtamc9ODJ%2BfHkwLipLSEQ7MykGJDlXfKFolcBvhaciKDAwN0KRs9uHpMdDV3EhGxIAWoxTkcmAqNpZWFQAHUkAHj%2BYuehVZnoRICwAM1Fyotd%2FlbcuQVdlYV0ARHEALEp7mbYWGCQACjBbcYlVjsCEcgwAS36tiCaDYAW%2FkR5wXx3WuR4AL1%2BNaRemhSVsWAC1lxMAEDxLPRXmxSF1ZgAAQXR%2BYiQbGxtfQwibiBVcTgAlHgCDelO3q3FdVj%2FTwoH%2F9J13cVH%2F6lq1nTzDphw3MRifk2X%2B3GLMvnNbRR9dUxwZGAB%2BGAw9AABbKiODRS1cAACeLSH%2FoHbPfGLGPCoVJQtkGxzANyqwRiaTPzLjQCv%2FiGHNZ0QAFgtZCxp5ciUlABSsn217iWmern31%2F9l%2BjH7%2F85iHlV%2FM17mlr5vv35373EVIWj6EmGI6QCrdwUYnQDO0u6FgbD48RCBdazkrFQC6r3iwcll8VUPESx%2F5rYyAKABSKRGHVjudMgDSkgoaAAAUYklEQVR4nO1di1daV7pHz8YDh5c8BImASoJBDQIBRTGSSDTpjMYUH82ztTNNhyaUqDTkNhpNYlLUNk06TZum1k5eSq5pMPSOub2dtnP7p929zznA4U171yqbtfylxvjq%2Bn5%2B7%2B%2FbZ8Pj7WAHO9jBDnawgx3s4A%2BA23v48IBKbhmsBUc85Rbm90Fx9LU%2F%2FfnPQ8PHhkZGTh5%2F3Scvt0C%2FA3IwulerrW4eG2sW7h0bHxnyHZmoLHU0GBssrdVCobBaWF1djd41j4yMHD8FjOWWrGR0fAreOLEbiZ%2BEVtg8Pg6tqmJYePeI1EKtMI1EtRb%2BEY6NHwfllq40mPfodOkEOEzGT3kqwsGPikzq6jwsqpuPnzp92F1uEYsD6ETQmPKQEI6fPHn8tYFyy1gExiNndHy1Ng%2BHai308LMnd3eUW8yCGNgnajGJdfk4oGir1Y7h7d7uOrWOzxep85Jg1HH2LZzdYlDUIhbxTfk8gtVGdfPQ4ICi3LLmgwKoTWKRuIgiqqv3nhwZwjbtqXapTfziJFDaGzkOVOUWNzfkQAdJwHxdmIRQq9U2n3zTV25x82BiVCfm8%2FMl7BQL%2BA3NI2%2BZyy1ubljOQBIicTGfoImcHfKWW9ycUAGYJPiiItGJRfNfD2NZRlladSI%2BPzPE5qG0d2SozlJuiXNgctQEORT3CQQt6pPewrCKmuTrSiaBvmd8ZBd%2B2cLT2iISiaE5leQU1cK9I28eLrfMWVAAHXIKUUmqQBY1dhLgV350ABMMT3xxiSxg%2FTHcUG6Zs2EGTHwqjQOsZ4ct%2BKmCB9RQEyJ%2BiZqAEWoIYJe4FTQJ5BWFaCS%2Fpq1uHh%2FBr55lzAlWsvlJcL4i1FZrMRzjeN9GrR1kUVgXHB57R17HreVWgFHYF0EeaHBTUPjkv84OYZe3G8BfRCjK8ou2FQmLan4Tw3LWA%2F3ityQL4V8HMZwbgBZEosRkAX17fOQ0fkN%2Fn4kuZktWBQyz%2B7ALs5YzLUgTYnER307qQjh%2BHLuGWw5G1SjOlmxRsOHGrxBUgRMiEx1mS7Mn2HAfw86eYDl7BOigLkqzJ4hmHEmgStAEE7cORZ%2Fi0Da%2FgycJHQpRMOMJS6Ch%2FRuOjSqao0FNwCBlKiVxC7VnR7ArAyGMaAaFIi2%2FBBZaoXb8dez6CggLGNXRcRblvKI8hGNvTpZb4lwwg930HKroQFCIuqO9%2BOU7BgOtrHOX4BV7sXQKHppD0SRK8u3moYlyi5sb5hM62rULLLZTJE5h1xoxUDDJgtVFkU3eyFv41eM0LOfUJjHMFsXXeNXasRGA5aifx%2FOCURFqudVF0zaumQLBPQGQLnTFnUI7NoTjuoKGvFYtKiFXoGkgpvsvCNWeFlFJrapw77vYaoItZ8XFdTE2jGMhy2DybZ2IHkMVUYT2bwDDMT8LBRChQjAnCe5YtnrsOK4xloeK8rfRHEqXM8gKhXRNohW1VleffRdbz4a6mDxjyghQkJAaHTlV68S7ToyK3vugzb%2BnpfkkxqrgWd5Dvq1OU4DJdIZvMokugvOBCzNTAeL94Dnhm2%2Fh69pov42OQSVO1WmhBkz8izPtALRNOZzOaaddqXw%2FPKPrOYVrzoYYgAFKxI7StNXQhiCnN2ZsTqfzfJggKH8w1AZ6d4PWd09jenwIwXyiRZQ6kaY2vX3xg65LToqi9KGQklKGgQUJrxgAkzzc9i0cAPoIkYk5Oa57b%2FZ8yGm%2FHbnc3t7u11P2ukR%2B6DjiwdiejMCUPOAoNP0HcoIIcLlVKrcXBNtSNjSJb%2BEB4QZnTPRoVijUic99SOgvd7MT5IZ9rtS3qa6UR7wS0YBms2KTWm0ytc6Gbs%2F1JL%2Bi4CYHnBMF9O2LOno1zB890WUjItzJhoexIQ%2Ba7vdiHJ6gz16kJ2ki8V980CFCHBOCqqDfWdDxzF58a0AI4x5mS89vab2qV%2FrTghDHhjCdPSUA2EWeWvtGiKBJKAbZem8Q%2BbjZAlOEGeMKEMFzQs1nmiPTvL8d5TQVYH%2FvoMHsBQvXFo6p8Ft6ZeAIvaTni4XqLn2wG31GxYisANcXblit1sWb4DqGC%2B10TL5nQt22GpLQ%2BzjlqsV%2FKxYjKIr4aOEFxs0dgwl6Ri7WiUBIH6xLGo4CUASiYHe%2B77fewO%2FcUDqOiHSwDEQJ74OIPrKHlVZ1LgJJOJ0221RtOLZ4A7gK%2F1%2FKDO8oOi4h5uuEQkApg%2FPDFrPZ0u0LQg6E8%2FwsWApTRGxxcRlr7zafUzNnPmCUDcIyPBzy%2B%2BeCSsSBoIKRsB7aFBGzLt54p9ySFoJvFPVG0KJ0bwRpP1AqGQqIBcX%2Bi1pZxLqAUoC30W5b3PpB3fmEzNlQfryv3IIWhBydEBS3Xg3bp9N%2F%2FexH8E2pnMM9zALoFeJaWzDsdCKp2bcUDT0xh3l04tEFlJjfFbh0Zdpmh%2BLrwxyXUCqJUHstjmd9M2Bp1YnFe2yfOAIOJ1TC7cd6vR56t5IIB0P%2BT3e5MM90DBSw1za1XnBMOxwOu35pP6itA1dq62prfbfbK0AHLIxgtEV9YiYwfQmq4rEeRthw2A7tSq9vw7qnS4dqEozq3rvYOm%2BzEckkQVAR%2FP05HUBnEpvOQXtKRSUC1ycH88IMROqWiwEOCYI4Vm6hfjOMvtoTu6YdTk6Wxry3zgmFquNCGol2T0VE1wyoZqFnp5xi7s5drCeYOaGyzDq4JIK1n%2F19EOfiNQcsn9%2Fbz5RPqOgjlPq5B%2FVffFlZUVZxd%2B3%2BQ3DJDksOuqmwf%2FXgAWRRKEQphnGLwg131g7dW%2Ft66fGupWD4dl37%2FtX6L%2F6%2B%2Bs1NX37v7gmuDP%2BBEhaH2wLuPVi7v%2FbZvbX6Q0ur334J6vu%2F%2FcfDuZXFpXw7FjnQ31r6Q4UsDOPpy6HAlA8S8K3V169%2Btga18E1%2F%2FaOgHnamS3l00TFHWTHSRMcPTqfD4XReuvcA3K%2Fv%2F6YOMrn7%2BMmhOVhJUSsvcvfXKkDEruETgz2zdkjBDkPSq8D5XXceXJp6cu%2BRX6%2BEalhWEpT1Rk%2BOH3K126lYHJtS3XzVbnPY6epVaXfaQkHCGQkF9ejj2A0%2FfL94PdugXHNomnPjHQ%2Bi0WAZ3N9rLmdKUfmSHFB%2BoAcFiWkBZV0OKYmVF3VZP9SlR3FYb3269NqpidvXFm4%2BvTZYDulZ1NmcSQ6ZoGKL14NKu3U581CmK0KF527fniZiKysryzcXrNab18s4muo576R765wckFsfiehji5ljTKiI6SARjtwOoS5KqQ9dDYdzec4fA3eXnVswJYRn7Aomb%2BXK4oGIMtO3XUGKHUmh2Uhkbn9Ir7xQvj0GsNnSOiGCHpbp0awjEprzX756aXDi2Fxs8SDXt40zSrbGQn%2BFQ0ElZZ%2FuLhsHl9%2FJcqAYj1bq7ZG5mUvxAwfW1zc2DI0yqSwafea%2F9YIzUZbP0%2FI7nXY7EwPsdsds%2BYxJBaAxsYqIfRzQKyOX4wc2DTIpDYFUWlVVRco6o8%2FmuL7di%2BIAFfFdCDjQqRynI3AVlPEQy7FIUhGxG7MO%2F9Z6IxReRsoEUHYBCVFVJSCrOqMHIv%2BZ9G1XkJn8R1yu7lrfD%2BBKt6Wcaz13m51tSKnYC3BwvZP%2B1WeBFHRGe1dunGZ%2ByONX0j%2Bi7yqj5By85kikiNji0U1Nn5SU5SIBtRJ9PrOyQBdK7qt6dgWDR7%2Fkbk8ogrAux5skBlKQkwP8bGe0h7B%2BClsgYxc7XtO34THtP21j6g0KprTuw001hpwUaMiiz4LQ4mCNoiRYRZQvHHFh7HKyiogtLil6DTWa%2FCTIzu9CypWPe7rY7EAo5%2FFQhDeQyHPWa17ewIZG0pifhBSSoL6fT4xqqRAeHiEHCY%2BwLgJYkG8bJH0pJ8h0i8ZnEYq4TSR2YXZMxoMdF5gcARvQBZiqVK%2BQZ%2BfThMAwCL2H1QMsqrowGQ66QjZ6v0VYX9CrUdBXk9%2BeDJI2QpmsrvR%2BPIyJx%2Bu2MdYUW1yg5xmuTY1EkzvGkgbNViRVrStD2AzMj7HWFFtmWjLjq6aapFdkcnj5SdIdKCqyp8yip9DDrFRgo8zaxi4DVEUODo2aGsm8w8Z2fxQRqcVmPMBzBWy0OVHW68ww0rPdJJFkJ7xGg6QpDts%2Fptq128%2FjdFjFfdVpo7PvygtmBCaHrl1T05gjvlYNd8Mqy%2BGAGd42NYzVoBwkqj%2FWs3mu9aaaXGlbuuHl7QvZEQvHLGbHGl3T7E5l5QWTuhhVNGWpQvqdhSfvbo84bX7sruBSALYjoqxPGd92bRqgKrKShfQZ6tuMp471YPgQgmuKVUVscZ727QbQByNRZkVOdj7D7ffPBXCwI6cVJmnzLNtNGk2mKjAn4QbJOnaZMSjQtHl0q6miSPBcM7RboMOKcVpQ91bcOSshBWmVYOczDH2Bg9fOs6kYRii6MB2eDrRJGsk0ErLv8FlD5IICRBwo5VGwlkVH5Nz7ri8vHN2SpU09BM97yy1nYahoFrRbfA9UPX5CH7tlvTFokHJClCB6BY9eNC9USV0Q54FNT4RCoYBzpUvGdYvO7zDL01lQgZATFXeU7RMb5PL9MtiOT80YOAZFdkYfYrawzoJizxSKUbDCo6fDt6xxycsNgSylCVIW%2FSfmXgHR02WzofUpVMe1Dx2EdVAjIBkSgoQq4pg01QXQAWDDAGtaiootTk4TH6%2BnRScZGmNitLHOB0V3V8TmtDvh28rNaWIpfbCMpvsVoAqUIS7Dlqc2PuWMxQPzaSRIZE%2B45woWHjDdtm54OR%2Fw%2F5ckczoui0YfYp4rWMh7tpokGsn2tkAqyBijQVVgXnsk0AAMkhqJpk8qzRpkVohrQ%2FRswpZI0phrWyQQRKM4TTnyQgWaJJLc4zMYZTujB7B%2F4A5iclOTRw8oQFWGUyhAvjEmTQKWHrhXgTzUX2sKLbwEnZWQKYChwGgfkYhislgpAHPcUEgRaIGKP4mJzUI7u8ogIYfxtcD2tDJIdGwXsaZKINGzoakpaE0CGfYkoDUV2sUzJLKOM2IG88Fi1kR2Psf6SWAIL4xN%2BbI1w6EK%2F2SHivCCLoE0geU1vikY48UCLCTxT1w28HlggdZU2CXQORvMq9h3YFfaVIwE5gN%2BBegr5hKQxAG8hzbmg0059o0ZJKKDeLenaGtaxK%2BrsE%2FY%2BwwF%2ByGGxHM8Dv3lgwIt4Q25m%2BuEMWEfYc1bTZKagvm6AoLTADpIUNivZWT0CN57FpglipEgcfdr%2BlyKpLA1YV%2F%2BoXNzOSKsjBRUpVaouBcdnu2cJEiZoS81G48extslJjagX2enCYFgizPgf15bbjELA8BUl4OEdCuVOkj8T0b0QRJZaUK6sS1tTHyW7BzE25qMsPrLIkEKGr%2FqazQkPiBx769pv85MEzIyvmFIODspk65j%2BjoUCXg3c5Ag17e5U81O3LdEwyhfZ0RY0vAV7FeTfi3dwDvTodP66PBihkf4JJJtaSLTkVLcN%2FF0a5oRYaXQmLb6OOl6V7mlLAL3NqzD04MTafBpNjelHE6YuzXPtWFAJDjnzEjZoEQSl6aytQzrSwAR6lCq4x5zJ5ExHeSwkq7jna15vIZ4U0Zwkvb5NC%2FXpalDWyTenQSEZx25hIFzDEI6KNG8kqUe4MRfEbweCSxhOQNx2pg2uYe2ZNgrAmYJRCKVm2UwMmkOcmpw6TbeAwII1cE%2BjksIqgTSOolGssFRRB%2F%2BiuiAhVPqQSJY6d3c1Gg4IyiBdAvTF1LjIN0lZORGXGNID1W4X6DMYwqnlEugNKcxcLO39Dr%2B1gRdooaTJaTrLzV9aYrYWD9SbhmLwoNmfzXJ9UrjtqavjxNuBdKN73Avm3i8XhiKJElrkm5A7%2BDUs6SMjE7g3VsjoCd%2FJZpkUtAYyMZGLgkB5sNLBCPdXid%2F98gduG2qDP%2B1Lw8tTQ2c9roxc%2BMlIKOYz%2FMRalHxl4xGhqzBuCAax94lVHHuxKkve82C%2BzwfAVqTpOBiovM53i%2Fvg0APYQte1oH5UoJHH%2BjInl9mkMD%2BfLhrU5M9%2BuNyICvgxBw6HlTwOK%2B08znuJNy5puFJoLuqNm5iX4ej8%2B01msw7U2So7IMEJOtx4MX64V8EOeiT5FjBk1Ip2bcZB21TAUxf4JuLjm1DFgmoAnJj%2B%2FT8hwGHw3kBez3weF400YeO3YjGAwIkv7TKsPkKuIZtNvrO0k%2FLLWEJcG1rNDQN2I82Njb2bUACvR5YKrXT94woP8J%2BZIbgeri1%2BXLjJcTmfx98WOftYGo9t9%2FpcFJELF4ZT6TtD0x9OAvhs5iNqbG3K4IuQqOs5bsl8rfA7HfY6D%2FpUegddOEnFVuuALfm0bcKIdiupiU09wx98%2BrKdcw3jQzkP9icdohgmt00APppYCK2jPc5MxaeafrR5VuX0hy49%2F2Ijb5ryLqA95E%2FBqfp%2BxWoj9N%2B4w2H1h5citAv2GX9n13Yx6eGWWQ11Er6Os54Z23t%2FoNXEfQKPysvlnBPFZaAAyki43Zz1edra2v99d88eRwhlErr01qsn9RUzDrC6N6U6xkmA9bW6vv76%2Bvv33ny6vLctaegF99Qq%2FDZHOiuDmvmq1BOfL1W%2F9NqPUR%2F%2Ff3Ve6s%2F%2FvgvgKlRKeqYm%2Bf0H%2F0ro942Qnu6YgE%2F9dez%2BPaLn3%2F04ThBk%2B%2Bm4yiljHz2c%2BY4o%2FfuIQuv4djnkAZDpB%2FS%2BAE%2F15DvDtH3xOrnHtX%2FnNX5KOhU7e4Bn%2F%2ByivDrr7%2F8G7%2BrbBgOBKV8fKe%2F%2Fsu86we5scNjgfB0uPEbZSrqAqg60gcfft3%2F73%2F8L%2B6TgJxQgTtP9kf04ceP6vvvTKweLbc8vwdmcB%2Fm5Ee%2BJ6v9%2Fb9YjJhGz8Lw3F1D2Qzls%2F7VCnhan0VaXDEeghQY9P9aAVWqx20xe808uUXlhvFFYea5Ozp43q8ZDlARFfGyXF6Pd8As5xkHBlwW%2BF%2BHp8Pi5U3cowujn365662Ixi2BlLANCqiXYQDAsLejoijsYAc72MEOdrCDHfz%2F8H9%2BNfkrDGbCKQAAAABJRU5ErkJggg%3D%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'550'%20y%3D'-107.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAJ0AAAFCCAMAAADc5y%2BqAAACSVBMVEX%2F%2F%2F9w0f7%2B2Q9CT0bRsnFcsdAAAADcuRX%2FZv%2FR0dH%2F2w9x0%2F9bsM7z8%2FP8%2FPz39%2Fft7e3V1dXk5OTb29vFxcVy1v%2FNzc3p6enf39%2BBgYFiYmK%2Bvr7%2F3w%2BsrKx0dHSr9P8kLB%2B1tbWWlpZmwuZMTExBQUFXV1czMzONjY1gudg9SECnp6cbGxtEREQsLCzhvhWxklltbW3%2F%2F3zoxhOdnZ2v%2BP8yOzR8iYAUFBTyzxETEwkuLi6g6%2F2NxMwxXm122%2F8AABKSeQHWrwD%2F3G3%2F0mgeSFVOlawbDQuS4%2F0hKCMaGgBrbDr%2F8VhUTAD%2F%2F4T99Gbn53dLPgC1mxcsKxD%2Frv%2F%2Fhv9EDgDFqGw9PRSBcU%2FDrhD%2FX%2F71Z%2FU3NAD%2Frhe4l12TflEYHCk%2FeYwAGiFWoryZ2OAeMTVXX1oqKzNqYQN8bABeTwBHSSyFfiKiiQiAgEnKv0CVlFLs4FwrJQD%2F6T3AwGfW2Hbr7H3Q0Gynplg1NRCslBnMtxhkZT0hJTJeWgMAFAAyGzJnS2iWbZaygLLjoeM%2FKkD%2Fm%2F%2FXhte6eLmQUZHfX95%2BCgjFYsVSJ1OOQpCXDQBnMm%2FV1ayzCwAtEQ5vclwuADKpSqrJP8c9Pyno1DyXmn54LXkAHAAiPzmpLKUWCCOJZxgsYTciOBNMj5S9ixUAPBE%2Fh1BxFniUch3hN9hKDlglUUw9G0CvfBtcRBDgpR7TOc%2BQaRlBLgDFq4E%2BKSojADxjNmVUB19cAwDfwo9lVjkxPgDHrFnYwGIABiAFMERqjIxQcG%2BMNIHCAAAgAElEQVR4nO2d%2B38a55noZTkaDBJ3jBguE0DDAGIAYagyoESR1EguODgG0hpjyZFlRRbIwusqF1tgO27SZHdV23VPGkU9Tr3erfc0PrUtr9vd5mjTpPnLzvu%2BM0iABpgZKM5nP31%2BsKwrX577e52enr%2FL30WcaBwe3OMzPW8MPlH6qADG0EBIZ8RjM2ieN1CVaCKMCzcoewYdFO1yYZjbxbhs3xdAI0VCFqXPT3osOo2DDBkNHr%2Ffon7eYFAsLhx6my7k8unQF0yUebDH5HE7vwd4%2BoBHCT4Mmv26ypdMZkLZo7IFIs8RixWVC4cqUnlcmh4VEPRFrdsB%2FnVg2ueKBsQHqNSDJttyiAgBITw%2Bg35Q7XPDoHC6VM8XTk069Q6c2krmC4XJyclCIb%2BSypC4M2AD31QiFT5HkdOU%2F8JquhyORnt7e6PRcFCWSxcLKcztANpzmp%2Bn8lQ218TFfwhHFQpF765EwzKZLI%2FRfp9K536OnmdwZS791FpNBgV8Gg6WYoXi2pjFb3tebBpP4tKJd%2BrQKiKLrYRzhQTjfE5wevOFd9%2Bw8rP19lozKZksWEpQ%2BucDR1597%2FUGioN0xTx0vyRGPo%2BuRek69v7rDdmg80V7Ad5KMrnc%2FXZATV5tCsdKVJZcKa%2B4lN2mc2bee6OxWXclnF2RyebwLic9%2BfKVI%2B%2B0huvtLRVlwfSYpatwSuLqcSGqg7YFUjB31fUMgcvCVNcLI0OWm%2Bum8pShi8ffEAbX2xsEaW%2BS6mIfKt%2B6fFyg6pDygum1LuZkz7H3BauO9byV7hU09diV461zXY1pC66u0RnWTwiNiYppS1jX6IhjwmOCM23uaLeqrdotyrCgmQLKW%2BtWTpHTogyL6MJz3Ro8%2BraOvyGaLtWtoIVuJ6iKcaKAdElPd%2BCUlEi36yqdfvnyEXF0QWjZLtEZxkQGBdLdXJf8zmc%2FLo6OzSjdGTla4gL7zho6WULeDTgNdUlcTLB0OWywG3SW7Ikj1t59CaXhsLYXVbJu1Vn84vHL5dfr8p0iWgq%2F3tDckG4y3hU66uIl5lKd44FxYbxJHMMepUB2hY7A7O8eqbVjOJ260AQOprvgSnfSHZGphVP0hqdWrp6oyc%2BKYLAaD9DJUl1pUfT78kk4WLhw%2BciRakdUhGXhGreTpdd0rf92%2BxKqH8dGZVOxK0fqx0AyWbSaLlgc7caA1nj2vTrVBYP5C8drVQcVKgtW%2FR%2BOGLsxlYJfqFMdeOm1K0f2dQXRKuXB4XbB04WZFLX5Ut2IIhhMx04cOfKOlZMKuqzieQoYFLlkN4LC5AfNk4LjgB9BdE7ajx8%2F8Q%2B5UqlYLKVzwShLGKyYNhwFdOl1eRcGPcblE8dfD6cL%2BWRqbm4ulcxPFssF%2B7HsWgyLIcFia8nJstUKFcaaeD0NQNNkxP23Dwuj%2B%2BKFCQwjQ7gzAsRDkMvXJhjCJ9f06DEgeI%2FOgpPXmOtlGUtnXcUK4L9FM4kZ%2FuZ0etINGKpXl1Q6wo%2F%2BM0hhGM0S6GzEcqqYgwZWZJKpHAiKCZL2%2Fc3pNJTTjNG1faQtwK3beYi9VSd5hEylrb3WXKYMTZvCbBTeCQCVSm0yWBwOOW%2BCIswao7Z2sktOcw6vrvkNnXkd0OXz0VQxKItRmhDRJpjaQpCjo6Px%2BAdQ4ud5soCD2TcPp3bxjqNV5oJVEV4vRwvA8TBfDx5qi03pY2787MOPgPz8TSgf%2FexGQF7PonZxvYZaZ7FZjHqTyaQLufjC0XIt3GstZazRyaysQA72eNppoQYt1McA65MfI5mdPXRo9sf%2FeBbz1BdvC22EH3R4IHvsanY9Y7dnro7yKE8TKoCoyK%2BCvnQ9hwGrRqTT6SLnlz%2F8%2BZv%2F9M8bp6EcYuXmjV9g5%2BvXVwm4dDNovvruifffP%2FHe5cvvXn7%2FyrJx31%2BMrJcVimC2rADN3woGFO6QPIFnGV2Gervptt%2BaPbQnt3%2Fyyzu36bq2cZCidD341feOv%2F5ORaIFf30lcMTTChCx2TBIyysYBpTrcEustL7Yh2%2B%2B%2BePZQzftv9q6vQe3cet%2Ffbp56OZE3TBZ66IdtU2eIpq%2FVjstbMOKsENdXY3CHmY9DuLL4pYGZ3R%2F9OYnh4A5Z%2B%2F%2B%2BlefbezSbR795SPw2cZneM1gTz56bO3CiZo2ShGdxJy6im6U2lAC5DrQg67nQEkL5tLXgGpNAUk9lJL42Zs%2F5rT12a%2BGNw%2FNbm4i%2B258HNs8dPr053cxc7XhDFs%2FTWd%2FU9fPWdNJl8ciN5n0Rgdhz5eh5hThfBh0KOlC8puIqUfPSOqOLcs%2F%2F2R2Y%2FP2JgC6e%2F5%2F353d%2FOK3myzsTQB371%2Be3F%2Bp7h0NF376m0S5fvxqDecK2WW%2F3zUGaliUY4dNVDGzMjmZIvUasxTdqckP3%2FzHR4%2FG%2FvULYMWb2L%2FdPnT7t7%2B7WwmO0%2FcmHpx58ASrKkNAd9bsav1ie69CEQ2Hy%2BVgOFozFI%2Fai9Fe2VSBVEsybOTjn39y59%2F%2Fz7%2Fab0CimzdnD20s%2Fe5Wxfse%2Fn7yyyeZ%2B4%2BrXFrrumwtTwB%2FV1QLVB%2Fs%2BfZRw%2F0MsnTumaT2U0N%2F9Obsxp07dzf3cgn9u2WO7vTD%2F%2Fvg8WPm%2FoOxvXKgo668s%2Bp2ZUrlMCfBcjlXLBRz5bCCZ8JCUc5i2XTBLIXO93ElJPbk0R%2F%2B8Dmnunup7TNnvnyyndjrS1Seq5cCfzw5v2NfzyaTyVQ2a7e7t3ZO7WzZk8Dl6vkU4dT1WDFYkJRQQj97c7YO7vS9L5aesvXi4aPHZ848frKynagqGXo%2F9sf%2F98ILJ98aGZmfnx%2BBcvLkC%2BALI%2FM7meslay2fopQN51eCk2MS4FQHP%2FpkN7%2FdQfY8ffrh08%2B5ggYMe%2BYBtnL%2FWaCqHZAvzwM4fjl5iknlqvenANWVFLlnU5NidacedOAU9iFHt3Hj06N3ZgHaw9MP73zwwdOHT59uzp6%2Bl3yQfXJmZbmq4VSGdhrCQTk1cb1cjlYiF9Za62oqmBfnd2oDkUkWCvk5VmMbt37yi083Ye69%2B%2Fmj1IOVu4%2FWH03cPn0v9R9PvnzwrLrrdoz9sRncyfmtCZqms6s5ji%2Faa50sylZELaZo8K0CcGHQQiRRctt49Omdm7Onn2Kp%2B6n729uPU%2Fcf%2FOnO2dMwKlZczqoGTkmdaqa6kQtb0BfnT%2B3YV8MVDwxPpdfEjBhVoSQbXtFgmr51GyZimFI%2Bf3ojtb395ZNnz9bubz%2F5jD799D8fnLlW00QZ7E1VN3%2FqJKvCkfmx60HwCmGrIjo1VTCLWduOrJU5z5VNrZw%2FePY2W1lvPLy3sn2f8RiMTvrZ%2Fbn%2FOn1vbvsxWfOHzc29bk%2FeGtm6HraGE6VwcKpA7%2B8AG4tuOc1pPQqGc9%2F8%2Btdscdh49OhfMnNu1JKoncyNjdNPAw8eBxxVnZkSa6q6Wjz3alRRWmPWzpKiKoUvU4ELynLJu7fvbG7cBHyzd7AnT%2Bzc29QN3wQ9wH9mt%2F%2FDX9W8OTICVYeMG88pwlMFzCJuHoC4jujgPsPg5Mcbh0Ati8O2eOPsSorzELXn1sOHv%2F%2F4%2FuMz2%2B4qs%2BBCDQtkZGTnuiI4NRkTxdajBqM5GEqATZanN2E%2BGf%2FuAxS6d24FnBaLw%2Bc5v%2Fz5wz%2BnHmw%2FfrztqtId2TRi6007z0Ql0IUgXViWLl3PPLo5O7s58YeFJbanA73noxtAHt3eOP37ue1MJvblg6qNOEr3H4XTnRwZCaTF0%2FXgSUAXTGfmVhKbmx%2Bv%2F3cy9SxxZwPF7SwrsD%2F584Pt2JMHZ74M7bVmpmXBQQHp3toqhMXTWeJRqLucLJdlrhdz4agMtEAZmFY2%2FuvWbvcE6J5tn9nOVFUK%2FbJw1UG6nesS6JQuOGYKykpZkJQVVrSLFHwCjHvnq6%2F%2BmYO796ftM%2FcfPF4hqyLOxzShO1n3%2BVsS6Xp8azCPl2Kr4Uo%2FASKk%2BGhj49Nf%2FOQmS%2FeUBv3JylqAqIoJk79xe%2FLCCzvztXwjwLL58FQxIZauxwzyeDpW2p3nVYRlwfTcxp2vfnlnluvZvzzzYIJy1BSKyFYzw26dqqEDQYGioih%2BAU9H5nMArqoPk8kA3a2vvkKxO7vx8M%2BPt9fq5gGUoWaqe2Fnp4YOdqdMGNKJnwXQmpl8dRcLLFv6eON2DAUFSHtAd48DdaVb05RuZCs2Ugs3spME2TiNSdjdZjsbrGphQb1Np24fmoUF7dDs7fNfbH6eelI%2FbaTyNK4UIzuBUxe2dvFgX48qGaA7KmGc7Uzuqk5hzeXXMzHsDpdMNtznv9h4eBfbt5Qvd%2FOXCtByMjsjL5y0s3gnERvwOjiPMjUlYQuUkijuaq6cTVwv5dLF5Adswdjc2toEQfvZ%2Fg30BvfW%2FMla3z85cmqLsbMBcfLUCBsNUObpQhSuQE5J2AI1aE5XjFrKFOASA0h5k7GbbJ8HWgKQjXnORphwyjV6YefUPJJTYJwYB6PFkWpgRDc%2FvzNxHc5YQDrxZyx0VI5roorrJTbpgaRSYPPJBjTx6T97eGYXlE7c5vPgxBi2A%2BTUqfmRt%2BrtDKr%2Fln1rC0OTLeGpoISNMppQmhtvrqcr0RGWlW%2FcrBrXLhNV9d%2FiQKxaGrQsarXSgYHcW18ddrUHxhY7WSs7pggmxS8GqPECWu4oJ0pVGVm2%2FugW5NvY3Ji9e%2BvehHtXfZZAjIRVw5DIsKpwxnb2aW1Pe2%2FN07kK3YqEWYpIFk3NrE7uZT1Id%2FXiF5uzs3f%2Bm76VWkncvYu5nDYE6Nj6SwxOwCpDDMEtn5i3GugO5rqtPDdgnJJNSpgyNi6HFWi4WQUXzNm%2F%2FuHXmbt3l%2F8ycvEvZx4%2F%2BdOT%2B1gA7sJREsd%2BmIHzvz0aS2UqVO%2Bfb0h3Kluu0E0Vl8WnYyVVrCpkbBcvW9l57bXXvr548Wvw4bUzZ7YfPLgft0FV2ba%2B%2FqH9GVETJiqnnV95J9%2Baz3AZAdJNXZOSjuf26ABbMChLJ7f%2B8tqebJ858%2FiZ3wjh1K6RH76V%2BJKqfRkNucNPN0%2Bv9u7RySYIn03sNihNIL2LF5YV88n1BGa%2F9PUe3%2FbjtbEIqy1N7NjV2P1nnjoT6Rg%2BvJPzzKq1ii6YoEJu0SugnlR0d6F8MpNamcylC6m1zNbV%2BUsjIGcdSyw7d2fbfWexpJ0AqlNrq2fgQ9j%2BwH1rJ1PlM5AuRThITOwqnma0WKHLZcGQHTgeGN6WJgv5FSD5QtWUYo%2FKghMo4RkZvMr5QheObdX2nKDkJnPVZ8tksqnUhJvwiD4zaJvjAktRToZhJYMCHRD8RbjDpWaJhJuWjiS29oa3KvPFn5YyVT0xqLnrpXBV72ONAnu4cZtcTos99qYJ5bmEgk75wZmBPQlO8h3HUYV2sqhsqvU23Ewyl96whldjAVB4QW3dcdPABrtz7gqrNVxMJUinQa6Vm2jRmxe1y8W6OXI2eJHw7iHBsS2Qk%2BVOiqbdFG6jr7yhAPrJ5VNz6%2Btz10vhyp4PULmj5WL2GhnR9ejlQLRm8fXM8U2uDg82BOgcYnCS5EmiWrPZ0mPAXLhND76rTFx%2Bg1sMiEajle0oYJAXDeYms65QBFnThOgi4pdTVM7dqbIaYU9s8CVRtQYqkEvL8sz79efdAFo4V8pnSdxWWaLXIDqLS%2FwBEDUxx4uHdqU12gZBUn62ZYtcqN8DCjytkMxQEaNpT%2FFqI8QzSDkYpQnN7Vv0YhNB3YkNtbyS6JQBn8eF9Gq%2BWLdny5qbCxAOnbrWYyGc3EhK2dOr9kyk9%2BPBDYfp6n2uyhDm1rAvaqSNBhL6uOla3ckoRW79LE%2FWRWEhxyXt1FKG8g2UV33qQOtfoc3s2Nvn1mojDMh6vnjtjjJFOeuxufc7v44LCymbjVREgW8%2FLjQttfdTGvPKEwwdbu%2FBKaAMM6VUhmoNay3PEZpBniliJXQ8rc0lZaeWipjko4NxcbaqszC61kJs1JlxvVxrYCLG5cvVW0ARXE%2FP2P5YUiPdOURXC5ZulY8OJpX16j0BaiXrNxrSpwUv5qT9NUdUFeW5kBqx738F%2BPMGkpKyXbuBZeFm0iLfH9S6LVqoCxJ7t2pDJYRD9M79WVcF8rGDISUtvasIvqhApp2y8%2BQog9uADDXmurTnddZyisvQBv9%2BikELTpulHZFuRIeO1fNkAYcLOTnltLh2J7E4n4Oid%2B8LC2XERUbkBCFp8R2%2FzkuHNs%2B7OEWoLWCEDQTHcYqEcD7QwfhiXCK3Bud2J5c19dcrqBxkwGPQyi3i1lQq4knx7%2FCH20lT7Evp3AG%2FmZOxkFarNfrhS3nYKr3rc%2Bh9UNXLiarBiJvxKFV6mPAkbUnxzPHSKdDueQq%2BrMoV2nMaJ2mz2Qj2hodQErSainIqtFdVVR688olaZyBoEq1Qok6AknJ6JmJvcDoC7idNwBRqCVjw3dRnDJF%2BN8Y6l8acD1vLSaK6CtjMKNCVWhvucuGVVSikPFpCLbOdbUAHPS%2BJaywR%2FzdmbG%2FVQmPS45XBhZ4qhJOhmrxjADVBb%2FOY3S6PRb%2BLozRq9fIA7vQ4beJi1%2FJNo5MlcLp24trZbL5YXE1UhaKO3B3%2FgRJC1tZPk8vvYhgqotfUdK8mCxg20qTfRdOUTYQO9WfDDeggXrDM7n4u%2BPd%2BA686Yi%2FftzBswG37krjK5GfYJgI4Iz7GGATzDV7jbUBZ41a2H1hz2G4RNwXELAZDUUYYvFJlVTq93BPAhZY1tYunwdsnir1zkkRIpHdrCFd166nR6h2UWWjHQvE2KXViLZAck54WOeugIshaZSu1WkNIaN3lbT%2F36a58lnu3uNj5OI%2B7fo5HCUa4ZoF7LSP86bheeROsdbQBkRXJyDPDA7KznuIbkvL8eqJh0FbTzbGdm5OnN28mSj%2FfOBt28676OS3%2B34%2FlhDheHgWDjhRZj2wM37sBPR%2Fo5QVZIV4SQleiYNq10OImCpVm%2FgUBpVau9QiKjBBvd1wnihwczauJkDjDGgINCAbBCNwsZBTpSIYb5uM9uuA1kBd0IueSVM6G7waMnWxCNvno1wU4niJ81gL3XIsz7CDV8N2AgaSWELD9XUmVWuuuNxoHrahZpGF5Gvm974GRGt06MFSRfFQAnR3QYSIj1tjkwiWNUa7HBdycYrQ3bgT26DK2HiMjsgHwNdE1GucK8GONudgSrje6buvxiLw9SUU0WWCE41wtLmB6xZdtbVqoO0rkARgV1WxL5SCadWzteTp%2F64QM%2FE7JM0vSVNSuZr%2BghPN6BN7a85wZIXRaRuRMjbrp5YFK6Hg%2Bd%2BuBhppsWS%2BiAYNN7O6N5lcbquGEjKGp8TmRJ9LNw1YRXpY7xW65Vgaa0sFZUa3HL%2BAtR%2BbqVwf20WlxsSeblGOt6RwBAe6i9qw3HV8oyn65WexaXAvLsgstlJBtDaoIs2ptrD5rmtKK7e1AVDRLtpBOC3QnbBnIsDy3e%2BxlP90koXWLPcnZIqNotXJLiCYEhpqJCKAN5rx013Gb2NFYi2ysNNhwe0JAvuNEbTEn8umwggfQmjWTggYCNXTNKpk2YnbnS5NiZh01BgqbyxfLUSt3UAfN0AGxxmhC%2FIqDs5HZ9L7QcqaQlgXTPFO5TURlcpJ0LDGXn0znyuVwOBpFx51ykm6ftFD735Fa7wi56fV8GS4IB9Proi920Vg8BOVfvna2IteWsYCUo9dGl1GpRqLUDOpMcouPIO1rKWAcK3v4XJZLSropV63Ryw0WJAaLwYNJOnk9aCZDOO7x4HjITLnsc8nrhWK6zJ3bRzPnsnz7938Y3ZSkQ5wqky3iJLBjq%2Bg6gVwZnobbCzm0TF1o%2Bx7fQUpsd1IFqNK73n29t3f3XNyewCWbYFHk5ML%2BFyCwdq5RHqTe5b%2BSjg2Ldq8nsWDSlkI4URJXjvAXIBQWz8ROVtaKZqzJuE%2BIOC8eb0zXeIlf4B8XO06sF9%2FV9%2FnbHxQWK23dJaB1Szs4vCeO0fd5bxVSsEHbzml9Fd72FRjG5RP8F3ChoC2NtXFXqTEg6XhptZiWLzcIWuh3ubj021PUONZeSPTA6zeaBa0sId02Jkx4A9ZI1OaL9RcLVdEF16UHrUfUQboGdMSFIw0XMmVhCTuSOVFiHbiPSOmk%2Ba%2FN5YJW7PLMrojv1nlEY%2Fumwa15bKWVfMGwvxNXE2sM3zRJKbK0X%2BLdfXJpbV09nfZagz4AXXuYW5bYAOFYJ%2B7o0phclxrcYIr2SUpqu%2BHGnfZurKn8GT11rElKkWWk3WhpaT8Ts3TE1Qb396GgTUm7I9fJu4wknk7rzDahk3ix9SDVmWvsNVrHOn%2BXwl34LulljJ0xLFzwTLzXJKVMCp1KqRGbuzM3Emrk%2Bti7TeiKIQn7GpWh9hsAJINyE32F%2F2EXiK5ESdCCJtChu2sH5Xp3s4SXlkKnZzp0LxygIxvRwYSXdkkoFj5JmyF56bShi036T0l0EnbON6TDmxWL3KiEC4bpTl3oDOicxxo8GAE9QsIu3oVUbU1P1NGBIW0TOglXR%2BuZTl3oDOgc2RPN6MTPhNg6dtGkTq61ZN9rQjfHiB40evytf6ZDdOvinShEtf4Z4XTrzeguiD7R1dOZzpOlk1syTelcY2K7FH%2B790xWBG4raq67LbNox3N3KhkLoPOILemqgLlDhQxuT2geFaM2UqyhSIyKdKS%2FU%2Btb5Lu0y%2BkWG4IaH42NER3gg3SRY83oMExKF64N0ZjfomlzcKHWyrXExWYd1ITo9UFWBp1j2FGP0dQOoFKOuk9eOERXFLm7qkqc2Pg05vfYtJL%2FAtzw1GhcgegmpdMZji4szixMY24zHjFI%2Bis6o9yQaeB2qHMvSs8OmtA5b9%2FAwMDMNIYddZOETWzeVIGg8DSYXuQmoaSMKzhxHJ057O3r6%2FN6BxbGl86B%2BAqYnQbdoEYpzJXVwO1cjdyOHfX4pT%2BDS00tDfX3HxjyeiEhsPL49DRgPOoKeWwW4FI6TXNKpdHg%2BKZBLuZitp0HchqwhcMHDvQfODA0NASMDHS4ODOzACCXMAhJhXCP02ezWSwGuVZr0rFi0srlBovD5ovgIbOLbmDYNkY9u2Je6gNsQPoRondgAGixb2BxEVCyqmQg59GA2%2B12%2BVlxud1j9NGjGHNuaXz824sNn3vVPp0OKW9X%2Bvv7gQ77ICOQAfgfEDUsKpRx9O8C%2BHRxEXxjoG%2FmbKOI7QRdjw%2Bb6T9QK6wWYbRAuD5W2ODxoi97%2B3Zl4Sq7xtjoIHGbdBrzkrcej4Mcgs7oRapEeuKRxWmUihWl3%2FBkZETX5sNCjWPTh3npdmWIw%2FRymFUys4Ui1hrjWy0LtpnvoKiIWtdrIP2V0K6gQhlauHgCHY1PXG6gu2K7j5PEMWxGAF6FsebTBXaGJ5zgi42g5NnFarr4d8y%2ByBAIu3AJzqEoconduePd%2BxgUUVmD05zi6Oi3v4svCtVeLd0MmqWwFjNcSlaUKpuvg2ydlTjnXq27H7w9Lg2v37t06cg71mjyKjsNpQgnWDpF8HoY0W21O4sJ6F72Tsek4c3Er15ZTWFcwbCmE9zJ1nQmiuh47qsXSbf0g5dfHRrfn5WFyGHv%2BLffLnzLrZVZi1mu6K6uss%2BSJNudsEF0B14djy0MSeDrPzw0NPAtl1CsBfaImCKczKHnNOXbnnTA3T94GVh1aCE27pVk3QPebyuroHl227oCXuUPDdv%2Bg984OuBD9JLE2KjQhSt34%2BRX2fPXgbZH9fgoS3egv2%2BJkWTdCp21vB5mD1Rnclb0TO72Z0RwF0cHfGiBWVrsF803NM1GhTWdRafrrNlVK7xwYnKs%2FUnMXd0BObw4jS30HRbJ9%2Bo4t%2B0DPpsBpuRM2BoOyopbHZidxof36EDbNBNfEst3eMYOty4owlngdgpFOrFWSqeL%2BVFfB1a7cLKKDnTH3oXY0oL3VTF8Q%2BcuHn%2FHal3NR63W6GRizEdm1uKEvBNrrPj5ajqWj2HGB4D%2BhBL2e5kLl64kseulUn5tesnVox7UKTvz8C3iu1o6GB3ehSUMKBAMJ4UBHh5amJ4eX5j%2B9tvxBe94x2al4Z3I%2B%2Big%2FuDwOza9sNg3dBhIa0b4U0Ogefb2dZROyUcHZKhvEQAyS2AYNjPgFZQGvWjs4Z3u1LwvpDPz0wE%2BOFaEKozRSwtDAuiG%2Bv42dPyaGWKHhgOLM9PDb%2F9IKF1fl%2Bj6weuxxloYfvtlAXQDHadDUdHQqzg8MXQDndXdX5vQQecTTHeAo%2Bvg03wHqaZ0rELE0XXwaW%2B6FnQH4FTFwqggOjaIpjv4fHAd2YIOKk8gHUp4HfW71nTgNRfcwug6HhWt6Prhay6Mvf3i95IO2UsoXfctCx1vYewVIXRDHded3t%2BSDlg2Lpyuo7VC625B14%2FoBFmWLRbTnVo5r9C10siMQN2xdG2fPJBAJ6DDQ3Te6Q52n1r3Ky82744gXUwIXf%2FzojsqTHeo3epk595xur7xDj6%2BXB4AdK0yCrSsgAkgTncSn9DYkK6l7gTSIb8bl%2FJAtQZiPNoxOi4qxgOdozP8D6DDxFj2%2B0rX972m%2B17rzvv9puu%2BZfv%2Fh9D19z2PqBgQSMe2d993ug5WMmFRwbzy4qvPg85IC6BbxP7amq7%2FuegOROIiI4iu73nQDQijq8zMdjcqhOqu4ncLXac7J4aug72xBXu7RTYWTddB3bWkQ34nik7CE%2Bka0jEt6KCvLy6JiIpO0jla0PVX6FovWPxt6F5urrsBwXQVy3bk8GuFroVlnysd%2FXZzlxJL17eAdeZ8KaILdIyOXa%2FwzmBt7aYUR%2BcVTseu4nWY7uVmdDAZ9y1Oi6KT9FwBXrHFhehOEF0%2Fu2I6M9Gpc4iAbqm57g70CdcdS7d4rkNHh4H4Rpvrrp%2Bd5RdGN8DSdW6REdD9oLnfARGoO7ZYDJxr%2F%2F6xitiw4e9mBl4Fcrh%2Fd4MH%2FN%2Fhw%2FCLQ94ZtClfGB2b8M51bsHCFz%2B%2FxDBw78TM4oDXW9lPPIDOMyzR4FvMuaVpRgSdd6ljBwm3j7sAAAQPSURBVBFVzu9e%2FBHSz%2FRSPIZVJBaLLy1NT49D5sU%2B7%2BLSd6%2F86ECrfSlwQwp4U0viD1Y2pPN89%2BLhfrTXxcseBkCyuDjQ50UbZQ6zPQpzdBrtS4FbZ%2FYz9h9%2BFf4g2h%2ByNH6uc3RAd9zuO8S4JxUn5CrZKwvTMRraHzK%2ByjolEoAFuJAfxBjwFhY7aVnPdy1G%2BUh3YLTdP%2BRdBIQYxkCbA6NzAlxiiQbOEB9Hhy6g33VsKUpJtKQDWWyGeeVlTruQEXlpReD2rJkBqM7KgHapY8sprelgjp3BXtldS2MdAFoUfeTcYNcJOkx38O1Xm%2BINoaboFQH7Avo7Tqf1Y8MLi0ONAfuB7mbGGSF0u7rrlN%2FZAvHzw8DPx2e8h1G1QGUCCXQzEJLeGXgOThxdR2JWpaWw8y%2B9dP7gKMzDsd%2BicsHVC%2B8AqhZLbGqOiaPrRL7TRMbcBGBDMjwaj8fYWhGD1atSMeKjo3a7Pd513ZlCzMGXKnAc4vBotQwPo68CvDjdZd1pSWDV0EEBMgzosL%2B%2B3DyyoaB85x1YaPeqSRirDFGruMYC6UApWARF9kA%2F%2FzZaNpCGBgZgE0C2O56Vu%2BiXhMIBuhjmHgV%2BCEJ7AMZMhaYfBDnUKBtGiyC6gb%2FG2m5RBilasOYAXQzzv0SguIFVdnocnWSsyAI6MxpnuDACb4Vukw5nQi%2B9JBRuOI4Ncz8NwwbG9l4jiGFHY2xogyCC4Q3doL1TFRaY5oTCHRzFxmp%2Ferhe9r7D0rU1nlW6XcKd7uAwLcJFD0I8rK1xhYd5SYTq4sALBMPB5GjH2qmzetd5MarDSBFvBSkvRrYxveijRakuICK6DyLlxUQ%2B5aRaNGZxqhMTQBxdG5cSyUGqE%2F56dEDEW0FvB9JJTymOODDscOuXOQgzhWjVsXSSJz%2FV%2BLAwbQzTcRiwIlXXJp2SFKaNYRqjgWHdkuikX51BC6IbZWiaQYYlhIMxo23TBQ62drthBqOH4wyosGJUR2McnZCnufCL2sMMn29KB5oRjDLTqNLTYjIjxtFhbYwYlT4Si8VHh%2FkJh%2BEIiPLpBi1Os9njdwmnG8Xi0LLw99tp8FSDRo8fNmN0nB09cDLKNnA0bkBuo9JoTNTBl5rruVZzTByoHWOI9u5XQIQ%2B3OwK0NzoCwlDu80ReZXPwIoszO2GGcZFwz8VIKTdocMrGpPc4rBFgNgsRn3939VRw8IMO4q5LD1qg9PZmRtYhYnKEXA38M9qvY3GMFz6BTdt4BnNMIKasoERhdnSmZtXRYvSQsGZw1FeDaIAxwhj5zxNvAz6zG7k8WBwg6IcfIijaGJoV8jRuYVsqaLSWyIeImSmKIqEV%2FOQFGUmcKej3dTRUVFrNIMmPRCTpsVdTH%2BXDsr%2FBzEId%2BWrfAZSAAAAAElFTkSuQmCC'%3E%3C%2Fimage%3E%3Cimage%20x%3D'461.5'%20y%3D'-34.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAKcAAAEuCAMAAADcAPJ6AAABvFBMVEX%2F%2F%2F%2F%2F3SLuRDPuuxEAmd0AAAC7%2FxHdIhGZ3REAd6r%2F7qqIiIj%2F3yOb4BH2whDd7u7%2Fu6p3d3f%2F1RqysrLVrBH29vagoKAnJyfd3d3r6%2BvNzc1BQUFycnJNTU1nZ2f8xw84ODhfX19XV1e%2Fv78ZGRnwzBYAAAx9uQ6RkZIwMDDmPSXz%2F6%2BNcwUPDw%2B5kgyn%2BRBsogxilg0AW3ZvXACJZgcXDgD%2F534ARl8AjL8AGyji0Z0AcJO%2FoQsRHwAAMUT%2F650AABZQOwC%2BIg%2FUPi2eiA9agQid4%2F9HaAlbSgCccwwAgKo2VAQjFgD%2F4UQUAAD%2F4F5AMwAAEADq%2F5tsTQCZLB9gVzzavR60MyIAZpkwIgAvQQDG%2FzvM%2F2eEeV0mHy0ARGshJQBxEADC0o3coJQqAADuUkOaFgDc%2F4U9OiUwKR8eNgAYKwGbkWpkFQv2cWGcqXZxdElEAAAAGRv%2Fopz0hXJRt%2BZXgZRky%2FJFQQCNbWB8IhoxLge4q4JuRkdPSTrPlA19iWMALU9KMyoyPiBkHQMpPUeqe3t6xdbCr1kUACG8pmt6q8zh0XailFFgXimFczPXuUeokDRXJymk1ETA9%2BFUAAAgAElEQVR4nNWdiUMaWbbwJXgSFSRhKaqKHQoQEiAq4oooEVtMlEgbjWZaox07k0U7MdM9nXTSe3dmeuZt3%2Ff%2B4XeXqqI2dqrnvTNLCCnxx7n3nHvuuefeOzT0rxBf3C295H3%2FEoJWwsgvAsAK4usA8PSF4Db4kX%2BF%2BIISmwA%2FPksz4ksQ302D91%2FDpZUIAFUZE30%2FtngSwi959vtn5AUCjojEbon8DxMhxSn%2BApUMBRUgd3%2FlHL9mbIXFI5b8c2hvcY8lj6cBOIMPG7jw0gsmBhG5LZnojiucX8UEsXLCbp99HuOHfMmjsfMsVh%2FPno8tQmAIq%2FP8eYh2Cp7XfvYAJRWXLNgHM2Xwi7%2FLCx67PVyOMFiddovF%2FndwM8Gt%2B2NjW07yz4n7Kx9QizP%2BvbEPpKvy6Guah8kEISiipSBnrRT8pBF5f9WF4HIgMKGdBOZMvI0hYsvs2BFqbiZatVi2V76PIHV%2BGBt7FmOGfOmT537zOH1sHmL0ZXzXarXmCgQ7BR4LhtuNCasVO35pqST9O1a7ZXYRaY9bLaI3t%2F89KYR2ZsfGzoHn4s8W92LmcbrBmgMbIYYM4nTsn%2FiZISY5Y5HhXHby2vMeMugdy%2Bw5cKlDB9HxezZZ3B4bW6zZkntji89s5nGmalbrDLFr25YHcYbtxVpqKFXwULh9AKJOolso0vfeBiMVF3mzCtWEZWVsbA%2B%2BX0S%2BK2UaJhMtO6zWt8c%2B1FHLWJ0uu2tzNRUh6sRw8DYhclpmagnaA4pQL9KvkUE9FnXZsSNYRFqtD3yIkodEPj2DOD3lJI%2F6IXrlwL%2F%2BLYCDwlks%2BZxFksQ%2BVaLdVcxTeHuikrBYkA9YRJjITw3a4XMhQSTlCZ01dxhzAvrT6iI9sZBxSXB2u8xpkV%2B6LMp%2F3kYNP0Y4B%2B3vfZCM0s%2FkkC%2FCkoNkWea07CcUdO1lZWyFcg7azzOwc5gMcYT4B8LpyBBgsWHtXWFaZmeJSv8xcM6h9K41cwhoOPeBx0olZ5U5u5VtyzbW53ly4JzOQ6vDk4F0SpA5iVZ7wrQQU0Kc8YFzukkr53ZrcRVnuFfOWcIZGTgnl9x0kMauvldxdtcvG0Ls6HWQaf%2BbuxMUZhBOh1WJ2TMn9UyvYwPnZJxbDqtOeu6exIzG9kID50Txox6zTzMaexYYPKc7mRs45y%2FOwXNybEbf8D1zzlJ9msDJ%2BHf1%2BuzPLY2dmBF%2Bhsp6zl4xJU4zws%2FUoUfH2duoaS6nAHpD6plzxTxOHjb%2FT3AOwcz%2FDc5gdXCcYyZyOvWG9L9Sn24YHKeZ%2BvTpDf5%2FJSe3qhs5%2B%2BU0JR3CB%2FMD5jRjfMch6OGAOc2Il4ZwSm5Q%2FXN7zLT4c8goVO6T04x4HomwqjX4fjkHPz%2FCwrGbjsFw0nBp7Gjw800sjH9mwJx%2Bc9YRYtpQuU%2FOc9YczsCOZ6CcrwafXyKiC%2Bn75Rx8vo6Iu5YbKOfg859UOMg5Bstpzpo3o5169M1p0lL3oDlPTFrpZvMD5Vz5xWkOZ6w6UM4xs9YNtVOkfjmP0uZwemEwnCgSIahHYA6ndirXOyfV6blJDlQ7lTPktEvSRqNobrz4LGYKKAfqyM6A046XNZEkEpY2pNvEg5oy9eDZlpwIzOWp5KvlnZ2dcj6T21escIoPuMhTVNk42XAUN6Okhffvqjg1mK5EZaeQTUedNpstEGOzhXJRue5pd4WtnkomU6nsJ1wIdda0oZMJlVtwhnNbqwF3Qz%2B%2BVAzeFl0SadhTOYTksT8SOU5COWclSXpzhk7t6kxCQemy5iHgU%2Fc23h2BDF2Zd%2BH10YBb4LD4vDHYyWHOD%2BaEIpqpsaJV7cUd1mDVn7FBOYE6pcuzk7TxjW%2FBcCH4Dzw1Nmfq4VZzOhSYcrWQ9keOdxJ2VwViWoMR2F8Wz02KmDSOvsHpKQSbGa4vnk9UwKb%2FFlz6ecGcTIN2Cu%2BQfKa1nG7uX3xQLRi6Sc5vVqGd71jlQCV9umZa%2FkJ3s%2Fo0jjUn04CaypAzBy0zmUyg2QRYMKkmlFenGiiny%2FW%2BzTDNxZt9j9DgSxqwMMFdA30Wk%2B2s1tascoEDc0rX1BG9qM982%2FoJrllFFeM0JwRVr3JSTutO%2B2lOsNkjbnMGJOeOrtwG13y2%2FblUuolhc2lTGl6dupE429uCu9kzTDA0YEQi3i19%2BVJF3cV8XgP1%2BhQOlvcpmUNRMzjVKSYHGYwyq8onQgCgz2crDCmFHlAMTwFTkrXqGZIBpwBYdBptcHJx%2FEDDkZnDqU6FiZzKdk%2BBGkMUn8zpJQ80FBoyJdfAQKV1%2F3Qb67PRP%2BkDjfEpZoodqVN2BvbORHH%2F1Bl3w96ZGHrAL1sVHzFnQCI13mp9FlXq470hr77H2Rr%2Bk3emo4pJVNacSFlV1UD1mSi3bTqm6TCeAnMiu2Mdp8WSaREkUxGaDVl80KSUXSSv47R72kaRsSaTp%2BZfoF9RrSFJcXK1jULdEPfH4%2FEkElauHMfCg82cZkcBk0fHiRTaMmLiYydHr4%2BOzrG8fgZROUJiQqxZO5FshwacyIW2slob3iIjyeKHWlxq6xSYND9CH72l57RYHPnV5v3MC%2BdjSlncE2NOG%2FK0JmGqU8oSp93iKB83i9i98J%2BzstD6%2Fu9xFoR3wvkz0zjdRpyI1FpdMGx6NLHIuBrpne1tjIqzX%2B4gUvOeaZw%2BY07c9ODUOx%2BfHzLaYmtECkE%2FPFvElSzmcebzu%2FnNnI7T4qpsHbvVpD4n7BRdurTy9koEyv%2BPVIiYtVGKQ2HGzs4hFHatDg2n3eLJgN8mSKicN7CKogGj5Pc2m0%2BQ0nSzOAV2i8Qhns0tPKFT1yfb7S7rzGEhzgaR%2BNls4X0mYTHCdCWgYifp%2BWfmbOji0mUPDZMdnsNNgzpquyVRrGTyWDKVfVeTpQRX5sRjJ9nk5%2BZwxg49UjTv8Oj0KSpVAW0IaXflsAswkVOaHHk8BvauYtWsHkkLSuh%2FLtd%2BFXaRbZnISZIMnkwB6rueVpxaCVs9%2B9YEFo%2Bn8hZ2KtgFmMfJBHet1tx7yJeRzf%2FQOac9UT3ZKVeRvN0CqFb2ybtmcuYdjvxOzlPeytXJAk2HnJZiJY8xq%2FlKMREW%2B%2B22mZzUgmDTkct00e52lYhvbpvn5wM0Rs5hc3J0wWkoJvp5MWnjmWlj751zmlR4Ead7UeSMSD%2BcZAH%2Be3PiJaExK%2B673QmnSZWVaKIges5c3tMvJ3ZMe%2BZUViKNpqE8sznzFg5%2F6JcTr7%2Bft5359ypcKguFrd1NT9%2Ftjhv%2Bw6ppp7Vw7KZyfO91A6eFNPyKWZVrKBhZaGRAHeFwz1vPLKQ63aTlI8rZmB%2BFHf1wog76LGrWBF7Jae2vhGnFlC3boqiXthN9llotmnY4j4rTIWJ2uU9fFOxBX8f%2FCE7aO%2B0uz34voNukdM2kDqpKiFDO%2FS3I985pDuaQO%2BlRNDvGs%2B68z3V3jkSD8x91szIiKk7829D0cb8nd4%2BmnOe1wR8pIHGCmtOeyEPV04M%2B7Y5%2FPDNKSZnGuVN%2BC9WcceqjGaPLUcy9haiJR5vpOK2FirWyheaRpLivHSyawaNHipkqQJQzayzCotwthd2n3QpFO%2Bqk5TpUi9aExbhI1S7N5iwOaxExskGDxTDTOPE5EvZ9xIkrP4sZNK%2BvZnLF%2FYRFqvKUxYVJXYn9HFLkaszpNv8gMx2nNeMRtZfA2Q6A99V8JlMpehIK2S9WMjO75QKCdPt4k1VJJKXhbAyaWKvhxH4lU337%2FrBQB6Ukk3E2Egx4%2F7hDDPWcGjvBbyX2PcVcpcy6vVTcbsFnqtXoRdXuzdwmoXVUTVslaAgvuG02W8or8IxaDzZwtNKnwkV6%2FoDzCXEeHuDysgbwJupWFsh0ymmxZBYG2tIMJ7i9KSxet8BRIj4Ip3cu4Om1O3eenl4iVK9MmuqI046LGAcWAjO8OxqJZwtbVAqFQjbO%2BkNenxPuXLt2p3B6jcrTS2BJBpBhuIBil3HTebE9bM0PbCmY8%2FoByrszlZyHyg%2B5XC4zU0VeDmpPEejF5TVJ7pyCXxgSAm8AdtpykhWayIDGbs4WgepmzqNIa%2BHfjA99K%2Bbyh6hznl7WrjXk6eUbZ7x2%2BvRSwdlkcmS3ZJK2wYw4jDdeyOsPLmmIJ1NersM1pZzC2R38%2F42Hmk7i8gOqpkDmPNOKkmjWk8e9VKlSuLyD%2Fk8%2B6KZZ97QnqoMpi%2Bf8WwanFOlIcxpODIoVWi46WqvTugORVP9W5EtrN%2BAac1a0nAj0AoPWM55WnPb9k3d7rUsxOtImW1bZTlPODFzTyikgX4U8KwrgPVaXcVRstxfhyY2PfbvPIF380YhH1xOMOK9dEB3fOT2D93iVxeAsQBRr5hDnje%2F67KNeg4N%2FkFT05%2BzMGHDeOaNO9crDizOov69miolwWLXsEnblTgo3btx40l%2FOkPfrz6lxOFyuxH8mdzW9dqZ2UxZFF72D%2F34FydqDbxEsHCLYoseDd5uhcK6CZhUXa39BoD%2F35ZzcenUiStRcs%2BfJw4qq4%2BbPrjTk5hUR9vJC8e6VtYcUFpaJoOj44sHDK1e%2BRJzvgEQMvdk9YytoMcPUbrdxwU5Z%2BSWql1d0cvPaaW1N%2B%2Bba2trDhw%2BwPFyj%2F%2FgF4vyIQy4cxsecqa4nG4xfe4ySXL9xf2zs1ffJM%2BRzqFI9O9%2FqOREpPDB6WyNfoQ7Kvnvy5Mm7d9999%2FPzGkYO2rwdmxafrKgxFQlhnOd7dQSF3Rwh9ZwYAxV%2B7YATN%2FzPP9%2BggnCffETAbOdpbk7TPR1KZ0120y6es3CIRlVHsf7QEOHiUtfwevkCWdJ3Z1988cWXX371lxsS73fZTltfx6l2fqQMamzxKIJ66iYY83y71QHnTdTw72rELSDngGgJ7JNap75Kz6lx09v3qVL3oADG%2BnxQ74ATN%2FxHhcVh1q%2B%2B%2BsvPnY6m%2FLFmr73B1IFupkbWX7swIuqM8wusPe0X%2FeJbtsN8DRPQnKZjvLJyn7T%2F%2Bfdg0Bc76p9Xbv7lxpO4zhAfIrsPejvxqW7toRUOfWGZ3FMXz0%2FOdFBg6K4MOG%2FEdU%2BuwTn68nGnu62D4oPa01%2FCxqC4thCRxrXO%2FkGTbqvlRIbE6jhvkvOyjwD8beNTATQ91JoIN4skt1fGFp%2Brxskra2cX2l9uLMiQ%2FDpPe1Msrf2wV4d2UyibtuVxJ21CikDPVfpbu2jirYw4v9P15DX4u3Qox1EhmWrZ%2BkwUigZnjrpcRu2%2FPTb2TNl6Fx2NmliQwb%2FTde41KDaO9z6CSMvMDh81DkENF3%2FxooT829Y6xySOSdeVHy6TZCmt%2F8WuL9qq8floLWMESgJRLejKosyGME9v9sX54MTT8CY4nFg22uXdAA2ANii25vJS%2B6s5Z8feXNBYee2s9vRax5xXjDi%2F3ZE294uki89ab0QRIqDOMzhmpMBUY%2F7bY0c1cQ6Hpu9dcCIHmtX2kouy4hACSvqs9fyEty3UZnKeRgA%2Fs6W0KXXDI76nNSBpsc45sQM91fzAZV5pA0SnK3ttdm1zNoByHqPirBLSp3KBVQE6uwhPn14SZXbL%2Bf2l%2BifWzmbUtkpOEXne7hQRxh1LAtTKM5XcDz%2FMFNQFALKTur%2F4DNi0lHPoivNdTf0zDyGn8SkY9EPr7d6k9f2P1jfuvaCLE6o94w2Nbo%2FtpTl3thfOj9LMWvypB%2BDR%2BT4E%2Bku63XAvwOT4yMgEkskNzXjaCPjGXvtR%2BNIbp5z5IT93ceLQJc%2BQRj%2B0y%2BQz6XsjSMaRTLw4Kai9v6zQsaNsg%2FNaN5xPFBkqFNavne3qOdFIsvgs0Ik6idxbnnhUVnkqOY7qgzP%2BVJFLuYm6p0MfSCCFinckNVVn4IVIOT6JiCfVRw87GpzJXjmfnyo4r53WPQacaCRpU33hO56i6hwfebmBWn9KvTuzwRnpkfPGd6AErVWtPXGmQFLnemFifGR8Ylk2JWz6cv%2Fciyk4Ozakr8hMWPK7JDVVUXtmqeHbcDLHGyLmxIuNcUwrRqZhhxVnYkUXgvynU8HZsUK%2FJHP2j%2FEzqY9ekDsg9LFuO04BJkQrWqevNg6pAYXDm9j2RdMkFy31zHnjyc9i29%2BpSa2lIUWcyVacsXtis4%2BcbBCtviQn%2BqJP8WzhxQLEWamQC6F8Ss5OG%2F7mF19RUrGTnsKOuG9Jc8D%2BNjaAFs0eXx%2BXjB2rc3yCNnsYn6%2BSI5yO6o7dsoKPG%2BuBE5F%2BSUifvCPZ8rNYDHCFq8OqSe2jAa%2FVoQLuZbHZx%2B%2FdE3Fp0bErByQmSdgT5ap9ewVXESs4O7d4ufE%2FItBTFBbxfihs4RUhVRZmu%2FXFUqF7IuZEnSgWuSXaJtZCskB27dj3Dyv2%2B2N1Gz5HSeGvuwH9giSW3tUv8boCH8kX81uQUQ9K2y1P3%2BL9kvOcqk8oOF2WfJItUMV6wGOfxbsDfW9Oe%2BS8QnvpO3I%2Bk5BFPSs3s6nObdw%2FX20RgQpJydo3Tm7fljnDrgrU4YTsfnNlthz22fM4N%2BQ%2Fu9YrJwnskTHha%2FlsYvGT2tvPtqyqTdUl5%2Flo4%2BrVcdo%2FHY5wpVCHJN4O47I4IIMvpwuh3qkcp7vEFJv%2BZ%2BA4VjweR9Xs9pVWS01M6J7EWZ%2B8ihWKhyOPJ5O89zKIj9tJhC0VKNrvo2bnI5d9qFM0pies3yleRqUx939vVZ3OyGP7JIxcvXobD5sAW1uwPlUXosiRhvEyZbny92cs41UtIHbPSYZQvK6QMXCf9vstvRIvhXSIc%2FwqAkX9dHlyampi5J6fD844EGaVdUePVyOcWp29cF6h3qmeE%2Bc0Ks6%2Ft4ySeWnQROZDOG%2BP1HHMhLTqZaI7OU%2BumnQP8ZzADXlVvbPr7ikr9MbPdP1Xrc7Ef7QMPjl5cJ96dPsqBp0gGkbYHLKbwhakpa%2BZVqmzJ05qSk9W8XFYamO3F9Xzd4Zzp2y2QJoc2wJszCZzYm1iWX9BgxE%2Fg8uXBLlvC2p19tLsdOELe9EftIN7uKA8DYdx4%2FNx4lnMmI34%2FREWGpwi6CMa5S1rU%2F2h%2FtV5RWz5J2xeg%2BmqKHf480HIRgNOLDEW2KjTGYjJnJP3aLsvr9%2FG72idGceeDoJTVGjdo8K0eAqKpS83sAGbJM5oHIIIVGFHlHNjAhnTVR2n2in12OySQm%2Bs5pVDpt1aVhx05c5GbApxhiIINKTlFOVPSXXswoRq1wbCSU3pI3ganC5LVeHiOVBh2lDjpyEa1XOSP%2F70u5pT2%2Bw9c4o9dDWjsKGMwtZ5f7oB6KR%2FBliI1TWc42j4xJx1NaegKWbpnfOmqFC5GNOVUfYxL1C4WDqbjbMxJwGNZlkd5%2FIU%2FuOz5%2Bo1Xae62Xs1Iyx0mE%2FmKKcLzRoUKuEj6RTmjALr9wdZYlFIrxHQct4%2BoZyaW0oiFwNS5xUxwEvnqTYdKkzUbkSdthB2S4EAMnbCGdJxXn25Tji%2FV53JycCguqek0I9b9AbhvNqxOFm5b0b9cWDj2KrQX%2BI6zheUc08VtHLqwag%2FTmLyT%2FBVtuSsGVW7pf0SZwwg6gyxkA2RhtdxPiKcf1bfjujWmFE%2FmKLJH%2BfJLK5YUI3rEBU5Q%2BDneJ7nAuDHnEE95wbh%2FNGv5LSdDZKTDEofl63kzuUdm54TgfnjAk9OBWbTxpz3RE7VUYiawb1Pzpsk50RcfVPOdNBHMPkY6zTk3NjAf376Y1zJGRsoJ1Hok9%2FJjdEazmxQbPdIQ59NOO%2FhwOnTV0klZ3CwnDTZWMaGtP9eNaBE%2FHL%2FjAmof%2FqcEDS2o%2FVHlFNph4z%2FdLCcX5IhyWC6YWOdsr1HArZAEFk9Hjn1fmlK4lQsPvCRAXN%2BIQ6d9vtHar8kQEByTCE2iwTSZODU%2B%2FnJl2je%2Badbr5TLYwPnJNnwbNFuWdQUsvL%2BCBk3bXQ8isXjTmL9es6J5T%2BCEzX8k%2BOKffYcnOpTy71UoSk2go%2FxydLxPZTVt%2FtE%2FY%2FgRA3%2FcTWzjasEkgFlWomJ0pEziFs9HiN9IMDG9fHnBExQTkV2YuB2hKK776CaoLVcz1VDPJeNOMVAPkBfBCJotqSZv19FMw7C%2BbnKDgfOufb%2FYSZh2b5%2Ff3Z2BelUCSrEqc1LEkhnY6GgzDkpco5jzquffq6aTwfVYV1%2FcQiSB2fklBSyhrY9O%2FZatabt82ejDcxoFuJxiDflVMUH2vGoP861i2TyhKTsaDHC9sqJyur5gDQvDkRZfE5oICXoOG%2BLnKokdEDD2VfDPzgrLT2uesqbdH0GyX89V3snRggAZOPxLIrqUm68V41ryvmLctxNnV0blEIfXsDc%2FPzCpmcXDmdyeMuLJ7ejP2CRF5AfTcl1wtp8Heac1HMKcDaYgH7t11rp7vDwXZy58cwc1nfy%2BfKW%2FjYCnRhwbuEJ0qe31IvMeM%2FR6dN%2BOde%2BhdLB%2FPDw8OMduiqZgdVgzNbBBjoDTjLx%2BPSWJm3K%2BJMLcHna9XKcivJsYRpTDs%2B%2FkZak8%2BDuqBK0wTkBciKMcL4Oqp9MwfRSKVmTULumfPhrTaTEzS5tgfEcdrZrUs95mwT0f7712q9%2BkoG50dGl6ZKo1S5V%2BeAyWVoalqQU8Us1czMt1zRb6XPjHuXU3vLkhINRJAePS0mE%2BqDDekWsyQe%2F1t5Mj8qUw6NJNxeETbJqvtk95wjV5wZOLCNObR6ai%2F80SgVp9Q2cXV50wvrw28tavTQ6P6yQORYn1uiuh2qkV871l4RTPUHCgnroqCxIrQgWK%2Fbh2poRL95E8esZQGnuQAU5PLxEQwchBrXyYYe7ZfnfpzScVyeXEednt37UFePz%2FoWlUYUcLE3PlRbqULu8vPj2W7ytgwre4fHrxSVhXBrVQCJZEFPcvNsWDXVYSd9YP5qoT4icQDhfZXVVTxw2Ja0sIdq50iqu0apRQa%2FeLCDEu3pE0urxxkm%2FTKcbE7riRMG2ASiRu4h3aRrL0sHovDGg1Oq97ERjjtfFZYSJZZFzAnOiQDmrH8yYFDxuAkqlJSG19QVdv%2B%2BZc5xwxg2WGxl%2F6a4OTZJ2iFjm30DrYqpmnJFGsc2kgvMq4jSwRN6vbfhO4Bpytz431xtnTOZ8JHOOkIApbmCKvrim3e92hTm6UPr6rz0dYcQEG5xTEifuALc%2Bjxv0dzcdkxSt3g3mNPw0%2FE2PnFG5KkjiHKGB8i2jqpIULPXMOVqC6eHhT3rkDD2SOddFTrLigTgNdofZQGNGHVPOHyQXUCDyda%2BcTqlWcYQmPhHnyykSiBicEs1HF3pT5%2Fx0CXAcP%2FxNj5xDqWUd54vmnOnHvXDenUZD6BJ%2Bdv6TnjnrEueGyDlOOsBntwxOMee0br4DyNGlEiTnpqlj%2BLpnTi%2FInPdETqLYz27t6ct0BK0ZtWntURSoACxMy9HIQDgfqTlf629dSGncUtNmJ5EUjkdKpeklxRf6pmdOt1ykKnHSgB4Fdvod4aEOzWgUA5bm5qaX7t5VPTgQzhcS5yPC%2BUp%2FKic71ynntPrB4QFwSgmR9ZcS5wvKeazlZLRm1JxT3Y%2Fv9s8p6DnXTyinrnyQa6YmPeeBMWfvdiTXAY5PvRQLBaYwpzYDisXdqbkvDZ7T93uDU5wYTy034bR1qs8lgy80T%2BZ%2ByAn4DTnaCXcsTTinlsWJ3FQdB%2FSf3tLtXHKzkCxNH3TCWfoJmTuVn7AsJAEKz4Mhm7f93tImnHIh4LI84cQB%2Faef6ycynODMIr9deiz6myZ2ND9dK1ffHoqCD0nPz5TTPo7r4%2Bgy3r%2FehPOW4X4ghvPGInECizSrR7w7ejC3sLpj1Uo%2BaPBh3XAGN6QJpzxBwjPPPxkHdpTV500FgjgjDauoeR9TmSuVVtE7W4dQntFtuPT0e0oYH9vQTowJMOJ81uqWZob3Rcq5zUx%2B9%2B0OlfLuTGYzl8v9g9Xvtgxb3%2FZ5pC%2FTqPde1nAaBCKqn1TfbinLv32veT8RDls8W%2F2eH%2BN8Ie09Wp6UAnrK%2BbrNsdtR7ZZvkXNP7p0OR8KFNwLbLcpT1xiG0R7f1oHY5IBe5sQvEOePkdYfFjDidIRnjwrSyTmkKNFudyWKGcqJVwecoSj6T8hp607DqZdSILIsTuTGRU51qYDBNzzUn4vkCON6fSmrjTfX2V2ecgGvVDm5lD8eX1j4DflUYGMRtruD7bzyvomX4kTuNgbGnG1uqtSdPeNw4AMpt1eOpI1WYYyZg0hK8Ak25Hn%2F%2Btd%2FfkJkDjdVsKtj5xv7O6QJ51VxIveq3Q5V9Q56R1jcPzu7uEdBE4jTVYQo%2FbpC5M3fPhHlb%2FioE3eHCmWwDAl1aeCUJnK0JKw9p%2BZWPrlClhyRczjzA94aYk%2FUZGv0xec%2B%2Beabr4lM1xB86%2BvpOXcqEI1FxBJlYOtTWs6NScL5ebtLW6NGt7NZyEnYr%2FaeA%2BAdttWklxOPF0RznAN53Fpw4r8371j4wDqIp9O4SDnrDwaDEZAGTmkid3X8NuWst0n2qjqocvMLWVf%2FcL73PEl1Id66zfhL8gA7HeFQx2m6kQeFPH5aKRKIpSEeczoDSYmTVtpgQxohgfLnv7TZ8MsfZ4xPBdyebVxrhuTVSYQTvxiJ8Kan54fnUZTDOJvk7hgb%2BJ0puV41ykJQwTn1UgxESCYMcba7Nwt9nLE%2BLZb7K6o72E7oXmw%2BVsLBfnwL8c5F%2BKbXAdsgqqwUcIb8EHOuShm7ybrIOUI5b7W9h0xYVZzqr67gRjqdbbB%2BEGNZG8wPl4I%2BX3R1fhRZO298HbAXYqoSZVwelo0eyztmahpO7ZKcXqGxnSb6FFm379ML4%2F6tTstJ3dnR4QXExj1%2FPFxCWggZ3czoiwdFvEAgIJcox9OPqAMdp4nPq2JJAx7g26Z%2BhYZran3rRGaVcHLswXwSj5cpGD4AxvCiSMYJlNKPPRIbpCXKsWz8hVTqL3GSJXg8wLefcoUOi51wSrey8unH86TiXciOjqLOyRgsfnBi5%2FRDJIb8p75EeQQmFZxX8QDfdi7DpWUf2ur0V3tRHDP8j%2FKTPmYAAAcxSURBVIex50SKXZpfQMB%2B%2FSXHzqxTbHTU3KFALJ4lJWHRxhaPl1NazvbHdwqr0sGVre6csHsanHM4H4Q4h0sovjVw9axfqlAmc4asVKKclXe%2F35MCkZe0VOBVvYMB2CsFHUZ7sI047%2BK2FgoHw9MIWNCPzdTYnaSqLmJLOdOQDZBSapiSdhyKA%2BftR3QJ3nDJQydOEL19i1snlJzDc1s2Xwg5qIMt3xCX1XZQTi6pjYGTpyXKMeKaQHSgI%2Btyxk7kPOkolE1JZ6U0PRhJ7p9M%2BjEeM5EdL6FxCRk7o7sAnIOQyMmKpb8c%2BPHf%2FSAteZBECOGkGbtbnV3wxXihSv29wbk4VFyivSO%2FRFIjS2T8xB3AplvmlzkhRDF5VuR8KQ1IcknDI7IUe6vTi7MEtrYpHukSphMieqA7PZ0cv8jQsmzkjhRzfczp1e55Zxql1GlSoswLVJ9pAGlAkkpE1gtkKfbWL20OoGh8uG2hJh%2BWkMAlXqgPuCxhVxj%2FNxz%2BLzEySsG8kjNldHW9bEdRiAqoe7qDEMR%2Fj0uOSVEqQJeM0QDf8czA50yWN3PNTmjdozlfJtQI7JBgjy%2FoQhG6sUe092ggxlJ7D2TZ1clxzQye7D281W4Gr1YpF4KtaqZIDl%2FWyKY47PhqS1pOn2651w1SKbUzlI4jAT%2BapDqD2eDxhuRARUdP5VOjFH0r0hAb%2FS0JSK0ej3Im6smD7fp1%2FERoQZWMwu3OsVrfx6dFR0%2F3zATjLK2pTQfYexLnhprzVVcXIPPgve7z2qK%2FAdR2qrszouTLq6nrSHDUoVInsSM%2BrfN9KVGhWTYSjKQBl9diZxp1RsRUQ2PmQQTN5Lq6OIsDN%2Ba57hPQDCyYXpUuG4gJ16lEFu52wom3SmDQGIsaPU29VAjhOv3i1Hh8%2FYWaU59S7oRTLTbc6AQ%2FCJoKIfzpHGsUMUklyk6pVDnOBgKhiDhyNlL0RD7rkpOXiNSC%2FDXi93kjOGuuxBwtCNiODMZmd5aVp0dEs%2FF4FE3nQJxyjk9IqVqRU5%2F6biVMIGvEeT2FJpxoWktqdZQKPcCzOyFrpAoBT4hkTPSzaHYcsXFikcj4yMsJNWehm5sx%2BTSEDEGvp6LRQJQsQig553Dexm2czOCd2WwshOYdATSHQ1F91Ibz%2Bk4xpB9%2FqXRMyNG3TNVq1RlcKEHIpwJkGEZ85Y4vLGmWHkjA7G12k5TPJtphxOb2iZkKaVFuXIpAKWfbVK1KcPndHEQUtiT%2BLLahQO23%2Bpvpu0qFjuKJEmNrMbfh3G63oPTgUjXg%2BPq92yrO1%2BnOB0527u7B9OMFYENujmDS9xmGF6KQnP7mb3OAQRvdE4%2FsfKyb46oZv9hBJ05GVJztUqCKj3DC0mO81j5dSgKkQ86UG4s3hftXaXp0eP6bT%2BZg7m5DoXO4wJTrrorNVhcNqaY0%2BD%2B3TYE2hK%2FNTUPAmy6Njh7gxfek5OV%2FkgoCCei0vIg4v4pttIkZNRN51Xh5QsX5eccfk0oiTOzVxRVDg2I2AnoggS6Rj476u0rUc8dikkk1wneQWpSFLc2xaHz0SpzDBjL%2Fzd9%2B%2B%2BlAtKUFbKJM%2B7P1VMKEHlHOqZPbPXFyMFcKXm9wGq8oIlDJi86TIcTb7eUzKfEQnkkY6YnTm5xeQM1%2BPZBcarVC%2B%2FUnvy3Qr0Fm8Yy%2F24sieZpdbFQtdsnpXFhaRaO7rzbXstBhGCmUPkGsqGt1Dg0FxUmnMrT7rHPOaGlpNYBjjunWnF9%2FMkcUOoetiPdHusWULH58anm8B07eP3e3FPGloNR6YR4p9J%2FY5JeStuv8kK1jK1X8Jno6HDk2qMHZdslDFB%2BLHDxymaU2BQSkh6KHSmk0ZAk9XbeagpFx1aoH5ezMzwtxFhZKc1JZRouyu68%2F%2BWvyYAnwTMTf05UZogsdn6iPNDhfs53ZowCCOwarpem77Thxw08vxLBr6KHVsdjEPOiLjdsyZ6cXzLoB%2FWLBFsQVf204v%2F4nJEHAJtfjSjcf3xCzN9LY%2BafPOx0uvEAiJM7tZAE1f5MK%2F2FaCArgxANCzxdNeemJRhOPHokK%2FezHTuebXtLhaEAcjUNy4bGRTkdRLFUICSnAmJ2nWnQSEA8EXL5Hu%2Bh%2F1zs1SMYGAU6Oj90omCugGI%2FUAYpyMLeAQvMoPnNcAOTA%2BikX4f0nBHSy%2FmJ9feT2%2BMZx5wbpVUbyuILIbYv6a4o7A9MBr3grig8CEOrrdhyOXZ4ip9SuL7%2BcmHzR3ew9BlGfzImF4XmOE4hwHN%2BoXeLirReKOxA%2BCi%2FX8bm%2FExvwe6CrEBZ54DQ4BQVnM%2BHi%2Fd9ay7ijNBKPpLr3blwKsoS09WPegVxPji%2Fmk2%2Fk61Z4G2SDqZbtgCZ1RouFf7Qw7lgcWJtb2SHFf8G54RBA0MRra7sRxucNsXRhMpXySpKilW7BlPDHXsDZUpDqBG8gGIkr%2FFI86PS2vSX0fwDWXzaR7z2uEQAAAABJRU5ErkJggg%3D%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'733'%20y%3D'-107.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAMQAAAEBCAMAAAAQKvrqAAACQ1BMVEX%2F%2F%2F%2FU5Z4KfMD%2B1R4AAAANYJ2lunDU5ZzU5Z8KfcD%2F1x4NYJsNYJ6munLX6KDU5KAAAAj4%2BPjx8fH%2F3CDh4eEAAA0OdLWswHbwXDEAesEAABPn5%2BcObq7%2F3iG2x4DK25S%2B0IU4icrNzc0ABx8AAB4OaKYOcbQsf8S7vLwAQm9IOABPQgAABRmMjI%2BnqKz%2F7IzmtCr3yiNUTBngqyfsuSfa6K43JwB7fYVARFJPVF7Cw8Y8O0BkaFvC0oujoqRETCklAAD5XjFtamc9ODJ%2BfHkwLipLSEQ7MykGJDlXfKFolcBvhaciKDAwN0KRs9uHpMdDV3EhGxIAWoxTkcmAqNpZWFQAHUkAHj%2BYuehVZnoRICwAM1Fyotd%2FlbcuQVdlYV0ARHEALEp7mbYWGCQACjBbcYlVjsCEcgwAS36tiCaDYAW%2FkR5wXx3WuR4AL1%2BNaRemhSVsWAC1lxMAEDxLPRXmxSF1ZgAAQXR%2BYiQbGxtfQwibiBVcTgAlHgCDelO3q3FdVj%2FTwoH%2F9J13cVH%2F6lq1nTzDphw3MRifk2X%2B3GLMvnNbRR9dUxwZGAB%2BGAw9AABbKiODRS1cAACeLSH%2FoHbPfGLGPCoVJQtkGxzANyqwRiaTPzLjQCv%2FiGHNZ0QAFgtZCxp5ciUlABSsn217iWmern31%2F9l%2BjH7%2F85iHlV%2FM17mlr5vv35373EVIWj6EmGI6QCrdwUYnQDO0u6FgbD48RCBdazkrFQC6r3iwcll8VUPESx%2F5rYyAKABSKRGHVjudMgDSkgoaAAAUYklEQVR4nO1di1daV7pHz8YDh5c8BImASoJBDQIBRTGSSDTpjMYUH82ztTNNhyaUqDTkNhpNYlLUNk06TZum1k5eSq5pMPSOub2dtnP7p929zznA4U171yqbtfylxvjq%2Bn5%2B7%2B%2FbZ8Pj7WAHO9jBDnawgx3s4A%2BA23v48IBKbhmsBUc85Rbm90Fx9LU%2F%2FfnPQ8PHhkZGTh5%2F3Scvt0C%2FA3IwulerrW4eG2sW7h0bHxnyHZmoLHU0GBssrdVCobBaWF1djd41j4yMHD8FjOWWrGR0fAreOLEbiZ%2BEVtg8Pg6tqmJYePeI1EKtMI1EtRb%2BEY6NHwfllq40mPfodOkEOEzGT3kqwsGPikzq6jwsqpuPnzp92F1uEYsD6ETQmPKQEI6fPHn8tYFyy1gExiNndHy1Ng%2BHai308LMnd3eUW8yCGNgnajGJdfk4oGir1Y7h7d7uOrWOzxep85Jg1HH2LZzdYlDUIhbxTfk8gtVGdfPQ4ICi3LLmgwKoTWKRuIgiqqv3nhwZwjbtqXapTfziJFDaGzkOVOUWNzfkQAdJwHxdmIRQq9U2n3zTV25x82BiVCfm8%2FMl7BQL%2BA3NI2%2BZyy1ubljOQBIicTGfoImcHfKWW9ycUAGYJPiiItGJRfNfD2NZRlladSI%2BPzPE5qG0d2SozlJuiXNgctQEORT3CQQt6pPewrCKmuTrSiaBvmd8ZBd%2B2cLT2iISiaE5leQU1cK9I28eLrfMWVAAHXIKUUmqQBY1dhLgV350ABMMT3xxiSxg%2FTHcUG6Zs2EGTHwqjQOsZ4ct%2BKmCB9RQEyJ%2BiZqAEWoIYJe4FTQJ5BWFaCS%2Fpq1uHh%2FBr55lzAlWsvlJcL4i1FZrMRzjeN9GrR1kUVgXHB57R17HreVWgFHYF0EeaHBTUPjkv84OYZe3G8BfRCjK8ou2FQmLan4Tw3LWA%2F3ityQL4V8HMZwbgBZEosRkAX17fOQ0fkN%2Fn4kuZktWBQyz%2B7ALs5YzLUgTYnER307qQjh%2BHLuGWw5G1SjOlmxRsOHGrxBUgRMiEx1mS7Mn2HAfw86eYDl7BOigLkqzJ4hmHEmgStAEE7cORZ%2Fi0Da%2FgycJHQpRMOMJS6Ch%2FRuOjSqao0FNwCBlKiVxC7VnR7ArAyGMaAaFIi2%2FBBZaoXb8dez6CggLGNXRcRblvKI8hGNvTpZb4lwwg930HKroQFCIuqO9%2BOU7BgOtrHOX4BV7sXQKHppD0SRK8u3moYlyi5sb5hM62rULLLZTJE5h1xoxUDDJgtVFkU3eyFv41eM0LOfUJjHMFsXXeNXasRGA5aifx%2FOCURFqudVF0zaumQLBPQGQLnTFnUI7NoTjuoKGvFYtKiFXoGkgpvsvCNWeFlFJrapw77vYaoItZ8XFdTE2jGMhy2DybZ2IHkMVUYT2bwDDMT8LBRChQjAnCe5YtnrsOK4xloeK8rfRHEqXM8gKhXRNohW1VleffRdbz4a6mDxjyghQkJAaHTlV68S7ToyK3vugzb%2BnpfkkxqrgWd5Dvq1OU4DJdIZvMokugvOBCzNTAeL94Dnhm2%2Fh69pov42OQSVO1WmhBkz8izPtALRNOZzOaaddqXw%2FPKPrOYVrzoYYgAFKxI7StNXQhiCnN2ZsTqfzfJggKH8w1AZ6d4PWd09jenwIwXyiRZQ6kaY2vX3xg65LToqi9KGQklKGgQUJrxgAkzzc9i0cAPoIkYk5Oa57b%2FZ8yGm%2FHbnc3t7u11P2ukR%2B6DjiwdiejMCUPOAoNP0HcoIIcLlVKrcXBNtSNjSJb%2BEB4QZnTPRoVijUic99SOgvd7MT5IZ9rtS3qa6UR7wS0YBms2KTWm0ytc6Gbs%2F1JL%2Bi4CYHnBMF9O2LOno1zB890WUjItzJhoexIQ%2Ba7vdiHJ6gz16kJ2ki8V980CFCHBOCqqDfWdDxzF58a0AI4x5mS89vab2qV%2FrTghDHhjCdPSUA2EWeWvtGiKBJKAbZem8Q%2BbjZAlOEGeMKEMFzQs1nmiPTvL8d5TQVYH%2FvoMHsBQvXFo6p8Ft6ZeAIvaTni4XqLn2wG31GxYisANcXblit1sWb4DqGC%2B10TL5nQt22GpLQ%2BzjlqsV%2FKxYjKIr4aOEFxs0dgwl6Ri7WiUBIH6xLGo4CUASiYHe%2B77fewO%2FcUDqOiHSwDEQJ74OIPrKHlVZ1LgJJOJ0221RtOLZ4A7gK%2F1%2FKDO8oOi4h5uuEQkApg%2FPDFrPZ0u0LQg6E8%2FwsWApTRGxxcRlr7zafUzNnPmCUDcIyPBzy%2B%2BeCSsSBoIKRsB7aFBGzLt54p9ySFoJvFPVG0KJ0bwRpP1AqGQqIBcX%2Bi1pZxLqAUoC30W5b3PpB3fmEzNlQfryv3IIWhBydEBS3Xg3bp9N%2F%2FexH8E2pnMM9zALoFeJaWzDsdCKp2bcUDT0xh3l04tEFlJjfFbh0Zdpmh%2BLrwxyXUCqJUHstjmd9M2Bp1YnFe2yfOAIOJ1TC7cd6vR56t5IIB0P%2BT3e5MM90DBSw1za1XnBMOxwOu35pP6itA1dq62prfbfbK0AHLIxgtEV9YiYwfQmq4rEeRthw2A7tSq9vw7qnS4dqEozq3rvYOm%2BzEckkQVAR%2FP05HUBnEpvOQXtKRSUC1ycH88IMROqWiwEOCYI4Vm6hfjOMvtoTu6YdTk6Wxry3zgmFquNCGol2T0VE1wyoZqFnp5xi7s5drCeYOaGyzDq4JIK1n%2F19EOfiNQcsn9%2Fbz5RPqOgjlPq5B%2FVffFlZUVZxd%2B3%2BQ3DJDksOuqmwf%2FXgAWRRKEQphnGLwg131g7dW%2Ft66fGupWD4dl37%2FtX6L%2F6%2B%2Bs1NX37v7gmuDP%2BBEhaH2wLuPVi7v%2FbZvbX6Q0ur334J6vu%2F%2FcfDuZXFpXw7FjnQ31r6Q4UsDOPpy6HAlA8S8K3V169%2Btga18E1%2F%2FaOgHnamS3l00TFHWTHSRMcPTqfD4XReuvcA3K%2Fv%2F6YOMrn7%2BMmhOVhJUSsvcvfXKkDEruETgz2zdkjBDkPSq8D5XXceXJp6cu%2BRX6%2BEalhWEpT1Rk%2BOH3K126lYHJtS3XzVbnPY6epVaXfaQkHCGQkF9ejj2A0%2FfL94PdugXHNomnPjHQ%2Bi0WAZ3N9rLmdKUfmSHFB%2BoAcFiWkBZV0OKYmVF3VZP9SlR3FYb3269NqpidvXFm4%2BvTZYDulZ1NmcSQ6ZoGKL14NKu3U581CmK0KF527fniZiKysryzcXrNab18s4muo576R765wckFsfiehji5ljTKiI6SARjtwOoS5KqQ9dDYdzec4fA3eXnVswJYRn7Aomb%2BXK4oGIMtO3XUGKHUmh2Uhkbn9Ir7xQvj0GsNnSOiGCHpbp0awjEprzX756aXDi2Fxs8SDXt40zSrbGQn%2BFQ0ElZZ%2FuLhsHl9%2FJcqAYj1bq7ZG5mUvxAwfW1zc2DI0yqSwafea%2F9YIzUZbP0%2FI7nXY7EwPsdsds%2BYxJBaAxsYqIfRzQKyOX4wc2DTIpDYFUWlVVRco6o8%2FmuL7di%2BIAFfFdCDjQqRynI3AVlPEQy7FIUhGxG7MO%2F9Z6IxReRsoEUHYBCVFVJSCrOqMHIv%2BZ9G1XkJn8R1yu7lrfD%2BBKt6Wcaz13m51tSKnYC3BwvZP%2B1WeBFHRGe1dunGZ%2ByONX0j%2Bi7yqj5By85kikiNji0U1Nn5SU5SIBtRJ9PrOyQBdK7qt6dgWDR7%2Fkbk8ogrAux5skBlKQkwP8bGe0h7B%2BClsgYxc7XtO34THtP21j6g0KprTuw001hpwUaMiiz4LQ4mCNoiRYRZQvHHFh7HKyiogtLil6DTWa%2FCTIzu9CypWPe7rY7EAo5%2FFQhDeQyHPWa17ewIZG0pifhBSSoL6fT4xqqRAeHiEHCY%2BwLgJYkG8bJH0pJ8h0i8ZnEYq4TSR2YXZMxoMdF5gcARvQBZiqVK%2BQZ%2BfThMAwCL2H1QMsqrowGQ66QjZ6v0VYX9CrUdBXk9%2BeDJI2QpmsrvR%2BPIyJx%2Bu2MdYUW1yg5xmuTY1EkzvGkgbNViRVrStD2AzMj7HWFFtmWjLjq6aapFdkcnj5SdIdKCqyp8yip9DDrFRgo8zaxi4DVEUODo2aGsm8w8Z2fxQRqcVmPMBzBWy0OVHW68ww0rPdJJFkJ7xGg6QpDts%2Fptq128%2FjdFjFfdVpo7PvygtmBCaHrl1T05gjvlYNd8Mqy%2BGAGd42NYzVoBwkqj%2FWs3mu9aaaXGlbuuHl7QvZEQvHLGbHGl3T7E5l5QWTuhhVNGWpQvqdhSfvbo84bX7sruBSALYjoqxPGd92bRqgKrKShfQZ6tuMp471YPgQgmuKVUVscZ727QbQByNRZkVOdj7D7ffPBXCwI6cVJmnzLNtNGk2mKjAn4QbJOnaZMSjQtHl0q6miSPBcM7RboMOKcVpQ91bcOSshBWmVYOczDH2Bg9fOs6kYRii6MB2eDrRJGsk0ErLv8FlD5IICRBwo5VGwlkVH5Nz7ri8vHN2SpU09BM97yy1nYahoFrRbfA9UPX5CH7tlvTFokHJClCB6BY9eNC9USV0Q54FNT4RCoYBzpUvGdYvO7zDL01lQgZATFXeU7RMb5PL9MtiOT80YOAZFdkYfYrawzoJizxSKUbDCo6fDt6xxycsNgSylCVIW%2FSfmXgHR02WzofUpVMe1Dx2EdVAjIBkSgoQq4pg01QXQAWDDAGtaiootTk4TH6%2BnRScZGmNitLHOB0V3V8TmtDvh28rNaWIpfbCMpvsVoAqUIS7Dlqc2PuWMxQPzaSRIZE%2B45woWHjDdtm54OR%2Fw%2F5ckczoui0YfYp4rWMh7tpokGsn2tkAqyBijQVVgXnsk0AAMkhqJpk8qzRpkVohrQ%2FRswpZI0phrWyQQRKM4TTnyQgWaJJLc4zMYZTujB7B%2F4A5iclOTRw8oQFWGUyhAvjEmTQKWHrhXgTzUX2sKLbwEnZWQKYChwGgfkYhislgpAHPcUEgRaIGKP4mJzUI7u8ogIYfxtcD2tDJIdGwXsaZKINGzoakpaE0CGfYkoDUV2sUzJLKOM2IG88Fi1kR2Psf6SWAIL4xN%2BbI1w6EK%2F2SHivCCLoE0geU1vikY48UCLCTxT1w28HlggdZU2CXQORvMq9h3YFfaVIwE5gN%2BBegr5hKQxAG8hzbmg0059o0ZJKKDeLenaGtaxK%2BrsE%2FY%2BwwF%2ByGGxHM8Dv3lgwIt4Q25m%2BuEMWEfYc1bTZKagvm6AoLTADpIUNivZWT0CN57FpglipEgcfdr%2BlyKpLA1YV%2F%2BoXNzOSKsjBRUpVaouBcdnu2cJEiZoS81G48extslJjagX2enCYFgizPgf15bbjELA8BUl4OEdCuVOkj8T0b0QRJZaUK6sS1tTHyW7BzE25qMsPrLIkEKGr%2FqazQkPiBx769pv85MEzIyvmFIODspk65j%2BjoUCXg3c5Ag17e5U81O3LdEwyhfZ0RY0vAV7FeTfi3dwDvTodP66PBihkf4JJJtaSLTkVLcN%2FF0a5oRYaXQmLb6OOl6V7mlLAL3NqzD04MTafBpNjelHE6YuzXPtWFAJDjnzEjZoEQSl6aytQzrSwAR6lCq4x5zJ5ExHeSwkq7jna15vIZ4U0Zwkvb5NC%2FXpalDWyTenQSEZx25hIFzDEI6KNG8kqUe4MRfEbweCSxhOQNx2pg2uYe2ZNgrAmYJRCKVm2UwMmkOcmpw6TbeAwII1cE%2BjksIqgTSOolGssFRRB%2F%2BiuiAhVPqQSJY6d3c1Gg4IyiBdAvTF1LjIN0lZORGXGNID1W4X6DMYwqnlEugNKcxcLO39Dr%2B1gRdooaTJaTrLzV9aYrYWD9SbhmLwoNmfzXJ9UrjtqavjxNuBdKN73Avm3i8XhiKJElrkm5A7%2BDUs6SMjE7g3VsjoCd%2FJZpkUtAYyMZGLgkB5sNLBCPdXid%2F98gduG2qDP%2B1Lw8tTQ2c9roxc%2BMlIKOYz%2FMRalHxl4xGhqzBuCAax94lVHHuxKkve82C%2BzwfAVqTpOBiovM53i%2Fvg0APYQte1oH5UoJHH%2BjInl9mkMD%2BfLhrU5M9%2BuNyICvgxBw6HlTwOK%2B08znuJNy5puFJoLuqNm5iX4ej8%2B01msw7U2So7IMEJOtx4MX64V8EOeiT5FjBk1Ip2bcZB21TAUxf4JuLjm1DFgmoAnJj%2B%2FT8hwGHw3kBez3weF400YeO3YjGAwIkv7TKsPkKuIZtNvrO0k%2FLLWEJcG1rNDQN2I82Njb2bUACvR5YKrXT94woP8J%2BZIbgeri1%2BXLjJcTmfx98WOftYGo9t9%2FpcFJELF4ZT6TtD0x9OAvhs5iNqbG3K4IuQqOs5bsl8rfA7HfY6D%2FpUegddOEnFVuuALfm0bcKIdiupiU09wx98%2BrKdcw3jQzkP9icdohgmt00APppYCK2jPc5MxaeafrR5VuX0hy49%2F2Ijb5ryLqA95E%2FBqfp%2BxWoj9N%2B4w2H1h5citAv2GX9n13Yx6eGWWQ11Er6Os54Z23t%2FoNXEfQKPysvlnBPFZaAAyki43Zz1edra2v99d88eRwhlErr01qsn9RUzDrC6N6U6xkmA9bW6vv76%2Bvv33ny6vLctaegF99Qq%2FDZHOiuDmvmq1BOfL1W%2F9NqPUR%2F%2Ff3Ve6s%2F%2FvgvgKlRKeqYm%2Bf0H%2F0ro942Qnu6YgE%2F9dez%2BPaLn3%2F04ThBk%2B%2Bm4yiljHz2c%2BY4o%2FfuIQuv4djnkAZDpB%2FS%2BAE%2F15DvDtH3xOrnHtX%2FnNX5KOhU7e4Bn%2F%2ByivDrr7%2F8G7%2BrbBgOBKV8fKe%2F%2Fsu86we5scNjgfB0uPEbZSrqAqg60gcfft3%2F73%2F8L%2B6TgJxQgTtP9kf04ceP6vvvTKweLbc8vwdmcB%2Fm5Ee%2BJ6v9%2Fb9YjJhGz8Lw3F1D2Qzls%2F7VCnhan0VaXDEeghQY9P9aAVWqx20xe808uUXlhvFFYea5Ozp43q8ZDlARFfGyXF6Pd8As5xkHBlwW%2BF%2BHp8Pi5U3cowujn365662Ixi2BlLANCqiXYQDAsLejoijsYAc72MEOdrCDHfz%2F8H9%2BNfkrDGbCKQAAAABJRU5ErkJggg%3D%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'656.5'%20y%3D'-34.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAALAAAAEeCAMAAAAdCG9GAAAB41BMVEX%2F%2F%2F%2F%2F1SHwXi%2FvsRLU0tPaWjf%2B1SD%2F7Kz8%2FPz4rYX90yH%2F2CD%2F663tsRLX1dbuXS%2F09PQAAADu7u7%2F3B7%2F7arl5OTXWTb97bD4sIje3N3%2F8rDytBPr6urvtRT3xhu7urrLy8veWjQAABMAABuUlJUnIyT4Xy%2FCwsL85Y%2Bzs7TxuhZIR0z%2F4R2mpqf83GHhqh3W4efDVDWdk3FZWmEtKzP93m3hxCSioqX844X91jHh1J392Ut4eoLt4aZmZmo0Nj7%2F%2FbmyiSRMPBy8oSTKrCdhVSeKi46ulSvYtyUjICl2ZivqySKYgykaFhk7ODlVVFQqIxhAOCxDOySGcyYnLCn0lW1YQ0PjoX7yg1o0Oi6ld2KvTzTAi29MOTJfLiBZLynImCIpAABoYEqzomY1LiZ%2BdluxrIFPUV3mzyMxKhZkVB0SFi5NRCfasB%2FGuYhQSDnKlxdoTxOScCFbVECziB2ljChfVTCBbi%2BKeSh2YQhfTQBtYC6mnoHgzYwZGSkUFiuZi1wgFAC1o1UZEghTQBIpKjgAACc8LhEuIQCFcRZ%2FdFMzHh52NioxHigAGCR7XE3FeluQQi0%2BEwCJZlYfESfzi2FEJRxlSj0YLjKUQSU4GhJQKhswIyEhKz9MKy%2BhWkR2MRqT3QBhAAAgAElEQVR4nO19i1saaZa317JSlVLkGigUMJSIaAhiJBiEIHcRkEtPJk2ibBZjx2aMId6600PvbLTT%2BWLsz%2B2dpDPtZPtP3fetC1QhKMSqOPs8OXk6aRORH6fOe%2B7nvB0dX%2Bj%2FGKF62WVDaIv6Uy9thssG0Qb1TD%2Ba%2FfdiGL1sHK2SITGlu62I7zv1l42kNeqhpvqU7k48vu6UXzaWVsg4PaXR3EKQzk73wv8FHmt9qzqNEusEhCMh77%2B8HOttj%2Bb6NDc6aUJm5s2XDegc0qcezSk1txEGcKdiZsl12ZDOJu%2FTOWVf3x0OcKciULFcNqYzCA2nZ%2Fv6agzu7MTw7Wltg%2B%2BUyS1mj9PpumQ1Yk7M6vquatxVvEBX4Nm1elQyo2utsrSfXdze916qBTeMPNZdBQzu5BHSGc94BN%2Blcq1Nz%2B8Fv%2FkGwfHok8lLwgrJkKDxApuB8BBjePTnmqrQWteW1iMzigkFBgnP2j4Hi2V6rdFiMFh6tHp5Tc9aKlO6PiAQtzrrCA9%2Ba2VeZwkfFBejGI4jGMb8U2RaJTVadNKWTKYZSgKyecOTln6V3DAN8fZpxrB6wJgiQnl6LC6vrfRdEFfgWO07kL9MS65E%2BhNTGxuzs3Pg1%2BzsxsbjqalHTxMj09PUBpAHZZ%2FmDlIPGPJ44UlmYTsYxxV1H2c8Y5Ua8ORTXZ9SA3ipBOj6dJDmAPANqB%2BuApvR2QBwJ47H43hNEmrMH9%2BX3LCYV%2BGTB8KqVF4FEAHIvqsQNfgKfgh3I7wMuFOyAgE%2FC0sNOLwK2QuxajRXAUglDR%2F8AbD3nT5xZxM2XpbczYeAIdC%2BsbExJUQLcSuVkN%2FgxLWHF8HIskdqwFAklH2MecDcd%2B7cunUbANfQNNZcIBoDHia3JLd15kcQMFC3NDYEsglzu%2B%2FcuHXr1o0GUnom4cPkpuRRCdASShowjkG84Bd0GDpZ5dAeh%2FHhbntSasthfaqDioHvknEPuE3%2BQsCE%2FUm%2FxIANybtX%2BxoCbp%2FwcYLYN0oM2ELNAZ1W55N9IiEQsNQJl%2F7YHC3DY9jFWUwDltrUqaZnaadszH0%2BoHMBDxFDkps6lW8D2uarIgBGEAIA9pz%2FnhcieQq46cAuK0XgcGc3QZZtHdLaOpnz8V0gw33KOxfHi3V3d29REps6mXfqLpRhZSPHt33AhP2VxB4xBEy7ZmIAJohu0p%2FwhY2NUgGiAV69Cw%2Fd1RtIu65DQ8Dd5KZ%2FvWjzuIxQNCQQZ5lz9S4dC90QQQ8PASHuJknSvll%2BlvZ5rVoJ5Fnum6IBX73VeWEOI8NEN%2BAx%2BI8kh%2Bxb5Scxr1X0BK1lBOph4K%2BLARgbHoJS0c0xugCEwyyq%2B6Z3jazqYGCkBNGQCO4PggyPc4gJggCY%2Fa9GRIRssCV%2B0NACAWVYBMAQM4DMYYZ8tpcTNnFcTpnVlp6aY2LmPlF8CQZwJ4%2FLNGb7vlcEdaF32YpTMPnQRwfMYyKo4SpkKMs1wAT57OKAZRDuHIzmoGupGbvRZrh5LmYMyAXByfKFCw0qV%2Bz5Y83dPhjNKzXK2yK4EfWEARXHyYV96YKGz%2BArbszRwtAHYvnbIgoDn6BSZmR4y3ahSFrlTf%2BgY9NTgLtinbXTgLEhghXhC0mE0bY6y2mGq5C7bfIXa5hUawSYlQnSnjZeAK82%2BZgOMDjN0L51w5GWor%2BqDJP%2BtYt4FD0VmPcFdgLIbqeAvU3thjCpim8H8JbwclrNPn8hB1nlg84ZEN4bddxFsKgQCIffLUip4NFYoAUG41UdQfqnL5a8chVnuUKA4I0V0ViU9xdAVJlkGxLZ4aXZMTxbwlsAPFw1dcSTC8b9suQULHbXvymmiP4UxHnVCmw3Dr8HwQMVvlGJF7cnzpf7mtMGJPii2UFLYkPXIE%2BtmPk2yOOdYrEUZ1gcpYIKmuUwTYgHKzPnizBWNczEBSWYpnB67sbpN0GQWADHuPOFR6kAC9%2B9s4djuAJH3PG4e2Jx53wGYzUPE0b9FyZ9crVBIg2bSC%2FiuEKhAHoWwRTbFMduRYSamYgHFr%2F7HtDr0ouZCb5Mn1bKWNXEAbz2JTFi6J6RHzhzjFSfLzIRyUSDgUAw%2Bg2Od06EdqucVJReLFA%2Bb9jscoU9NirxAogO%2B3LcHT%2F9qGpOBEEuiJOQd8X%2B6maffBBhGKWIB7IjI5XKQaWytL8diJciHB%2FxmfXrXoOK9Q%2FlPZPO6wtBnOFltLR4KtbGeN77ZlKcOqPM8%2Fw2zSRwhoAZQDAcicxTTpdFq9Kr%2Bg1mH7UPThqj%2BRSRn51GlAvYURQW750vgfSAVweohToOA%2BU%2BznPdy15R8AI%2BJR%2FR5w7DtytAmeHB%2BYMwP4zp98RKUWCDwVHMfttAj1p963Hwqh%2F3FPXy0Dlcw9ttf2IUCXCHMfYfCgbxQjE6ERh09vOSHpCfRuffIuA78MWK4XS0gHZofevueDrbIPfCA0wWDsTLS1gO%2FpMxE8ge9WLQXI8JfG3%2BaRFXLFb6G0U3aId%2BbWdnoZ6%2FNPHiOfuSiOn4yZdAFhBo4rIjDfxVtAOdHAkEvzXQYtvgn1WxYrxRcgvBajEzuSVicR8NL81AHuPx%2FWbVVvOTJXOz6BHtMCSieCMbgvH8iCH%2FtHi5TNT8BLwjMBG%2BZsYeTdkaspf5R9TT2A3CeEJBkFsvRUTseQV4DBjcjIvys7WoMdbEM2ZjI5bHP4rJ41xQEaw0TSRNpmRnpBPQDu96k4CQ5%2FwQpD8hYuPS5Elk0dkUlbepBDOArT9HGwOueRM0jysi5uQtyZdNQ1o02UAF80k20ixaQnjaGPA4JgpilQWmbrWJpqpSm%2Bw5%2ByegtsWGegJ6GTxtDKVCDO2m8trCk4ZJivtZqMusEnDUmGyYsKl9C%2BrJTgB%2FVIE3CKMxQXLN%2F89zPntrpA17vSnKyHwh9w4OUgKEllOAtWGPhf%2BRwuvRyOJCNtpIuw0TfB6XE%2BJkXFFUywE2UhQ1KJDnU4BVqcFBgQSFB79Nh16U9pocvJpyI4iyTaTCEsqJRA%2BVoAYFCqi%2FXoatgxSV8PKUSjgT%2FEYBW%2B0ayjHPzwS6Yl6s3poUCxJ1UZRH8DNlybrzWA8YdYIIGlLDdBciFOPNlyKp47CHNb9of38dD5J1elhlGxwc5H0I9CDQREuwYtzN5%2FG%2BSGV%2BI9W0MBWut3T6sMdYg9th%2FFv0rJC%2FThn7RCrNyFJNH5Vx0Njsn2jAnu%2FPyNsjMJtS8%2BU3KdHMnTUpZDGUEBQS%2BCzext4wQ1pfoKEHT584hH%2FmQLj%2FSry%2BD9Qr9Idlcr1eLpfrVVqjd%2FAMC4WGQ82ybLAqw1PD3aQ9I1Y0CqkfuFNVyD1hb8pms6VSKZtvJJk8I9lv%2FDHY7MghwwKVRtpFHmOyDlq5rINnML06xdLj2VvxpVQz7amqbDfDK9DAMBZdEnnABp1kXVZ9qvh4TnMXduOOjd2%2B4e7Eg0tAN59%2BNxDSre02ScRj%2FMNGBx1LHtHbGycpjx5Kc3pWN3brxp07brebbmyEiL2NnqbKt4417q8YrhXoGP6WExKMA8m96WmXyprYEPSz0jF1dD4GWzV4PhpQH9ZK1t2oxIDVSQNgcPmfUkxKWB%2FNTS35fKlbWH2VBsNnFq57jYLv7vFWFvGG%2FMXGBdztJolnMWPDd7wY6RMbmjF3oLjYKPeLKwLrg75wj0ouQ2VyVU%2FYN%2FjdTJ0CxnHG5PHdB1adSdGdK%2FOuajS3O%2BOZSP3QAMtkJLj3auTA6fV41w5GnuwFBezFcAUWn4kjilOASfu8R4qeMNRDzcH%2Bjnhpr1l2Hcfd0cD269evFwNRtwIXFG%2Fw%2BF4pXUzuRBBE4KAB%2FbAvSX85aoYjG3CAZy8dRwRHqfYFwKVgqM7dwfAAFYpEo9HF4gu3EDBp90nSS%2BwaeayjZxLxaCw7DLwAhiBErIWaJ7YTUQARxhXxTBYfFgAmxIoyBBQehHjpspIimktv2ceHhzE65xbcTcfPL8BgCgX04DEMj8cimNBkiFBBqid0ksZ7G2MebzT0U3q97N%2Fy%2B8vrxUoo2GrvHTh4ik7FXhETqGByV%2FxOV1cC4q2OayB4IBvKpNOZUigbmFG0UvOEhLsjL3ajePB6gRQALkyLrSSsDF5eikyhoOtxkGVnhj8CvNESVS7bh%2F5C%2BfmAAeR5kWe%2FtL4pZV%2FfqXkjtrDUKl5FtLhTtJPdhL1YFgImyyLLhOupRqnUNCiLtkMIXiwP70Co9lgdh8mCTdxORjgl0%2FdJrdk89uOBEjheuyTwI4UyDGUiI65MWJ9q%2BhpU9lsgvFZBxbN%2BcqgcGgeoK0N1eMWepVLZGBvXPt4gGx4hwNBENkmy4CdJewywuQ5w4WINVafItbRxl9ls0CbgaIWu3gJziGMYnTwjyAXK3l1HpD0tStqyRuGRqTlw6tptVcLwyLdxgBiLZ4HrRsDKAFH%2BcYusB9xNPhPZfUet1NPHuvb1BP5NaQ%2F6opg%2Fvf2XcZIct6%2F%2FVB4iTgMuiz6HogpPP9%2B4Ab2d1tgMjigQg2gothMH%2FzdO7v5UfFEuh6iinzlxdMgBm%2FdhxzMxLsUcSn%2FY93wbuLmKczAjsPUDOJjx4GImtrCYnoFVT3spVN4pza%2BX7cyBAyiHCDukzc3Cln%2BXkmKWCtVbncX1xSg2MaHgMqeCg4jRuSdEMTHhjkYW0tABxuMQ8HB3gSqQMEwmSfaU%2Bb97tr8%2FP%2F%2Fq1asnSwmf1yKFCw9Jb%2FWsJUtZ4IrPQFcCQXD4iyYoLvH4TDQIsRZ39oJu%2BLmioTjMmJQzNNJq4%2FvOmgvQ5OSk1WDskXijir7HYPas2dL7%2B%2BsLu7vZ7N4ipL1sdnfhxU4mncysZyPBGboIA1gejyIwhCvt8lUD8M%2BEQYbkK1VQVKbXWswHmVAotLOzA35%2FsbCbXYwEovFhuDSgOixKiwnWba8IdBlZ%2FizbD06RfC0ygcPAB7BzAhLgaiPfeJj0Vzb5gKUfTmtMMu%2B2AqkeuKaOJjJOlot2vvK171%2FSlhrzQiveOzI0vl7cJHkstr%2B6pA0ePcVg0%2BQ6T9sRZGlkqVyDTNqXLmtHjflJBG9UkeXDBVp4KDdpWCs%2BKwwxmMkCJfkCjyaEug4y2%2BdIBT7cTRwYO1CLtzJfLtiBjSP9tktbDYWqzD9uny0W4MzZD6DalfWEbdT8s%2FLW5sXa8y9IMm%2FjNq%2BaTIwD%2F5wTAb3B5fF6PZe5LQz1rJ8JGMGGyC0WMFtLPavjRnq8aHj97EQKAFz%2Bl1oZZw6dGTthEPDlrnoSEuDw2cEeRo7v%2FistjDtfhv3zLymv4V%2BEx%2F0Gi3NvAnpnjbbjwEZdLFvxTE56EpJUBdolS8pmS45s49Fg1M2mTBDuBEIvE8ExRdZnlN%2B8edM4Lflmn%2FPJnDJoVf2TyX3Kl1yHvWkgPHLPfEMvesIU0e3X2Ug8XrF0yADgm1bq0jWFMUmHDcZEWKvXG3xZBYbEt0GUtg4nJfDI0oHTebC%2B4ASiQCNOSb6e6hxCvbSP2AML0CjaofItKgLUmsti9fyUdSOvfRaA9GZ4BLrqKATsuWyZUDG1FI%2BXbu5AOww%2FR5bC8GTJrCORIBO0oTfD8DEwgC97taSWSeCx%2FWFohyw5yAQ%2BwPgVM5NMk4pennSxImG7VA8CYrH1QJgUF%2F%2Bi3kHWxZHdTFYbCW%2BGwROgGfxk3XbJ2xjDMKkrS%2FSwPo3Mm2RVreymswbYNeih8VIFYitzuduJDQCK%2FCbXtYbenK4B9g4yKgHw1rO%2B%2FtK29nLdThLkUPlnj4Q7MM4hi%2B9Rzumy2ig6tYvKwktP6NkItAPIa5rxHoDJOIi4g5FIME53HJD2dd%2FkJfkV5sSUbjZNFZ8%2BnTbIZfKbnkT0tZPWF3J5eD%2F6MixD4VnzhuIIzF0w%2FXQEQRYy3stgsj6c3tD1zaUfz86NZUdsXmdlPjARLXq0KArE9klUEXjpnbRYJtfmYc8EXSmlm5sBYvszn%2FGz4%2B2xPZrVaZT%2FnoRz%2B%2B7gYvZ1II534tF5n8cVXstEQSQdXY8dHFCva4OLbE8dQRL%2Bg1MjN9KSPkw91mk0Svf3cEuGEqNbDmh%2FBwl89%2F33EQynfZ94MBrneZ4I16QPxOKVJB0ozcjihOzV3HbPwCWomjGY4OacSxx34wrObwNUv%2B%2BSrRrZ552fLTOhdT59rNNp%2Bm5gE3vTmr4%2BzS1%2BLR92WFXbhE%2FvkqvymHjWcN2v%2BCQzT0%2FNQbbeAc7uEygRDXeKNiWE7f8iiLJP5EpXI0INtkdAOWg0t2BrR%2FSnDV37O0i4QYihXWk6Z%2FikTaWBNED2wseNL6Y01TWNNJ0aMz%2BDxwQxVJ6WlseoeXp1DrKX7UuJz0%2Fd1d3VwdoAzia14f8jSMP4rgGPyQWRi%2FhCMtqeb%2BiU9Eo7hGZwoPLD46nV%2F7fwApYN6KJBdnE7EJ2Ju7lEPNKwjbHa40wQz6SrHKDm2JRGp9Qo2a2cIBhOHI2MJBJvPq6sLB8CWl5Z%2Bfi2Ejs6uh%2FKbgdmMMBrLI40aH7nTdza56XaiKr3pOkNfLfdCK3EMHyx8suvD%2F5%2Fr2mgq6trFBL4s2vApHbkjw8%2Fvo3ldrKRKB4IBRsWPdi%2BNWJosyJNKr5n%2BtGcTsNKQye9vPn6g2vXrnSNdg0IiMUOcB8vvz0qZZ%2F%2B%2BGLmdFUBqc7%2Bkf6YFKqiZ3pVo4S6rGoR4olfrly5ZuqC%2FBUSRN3Fcvv4Ye7oeqZRyz430APE2Cm%2BGFuoKVrf0ueIFeDkvSvXvho9BVdIo6Om%2FOHJ9b0GNQVu9o%2B0L4kem2ppvLd574oHjx5cuXLlz%2BfgBdzuGuh1HF5fiJ8Si2rLM%2Bk%2FENlGq2wQ7y1%2BY60i9CcgEF%2BdlofTZOrtNR0fleKntQXbzkgQ8%2BIWGVHvqk5z9UZnzcPBFIFvAYOv%2FXm0BcQAsNp0eD3TYLhnmKs7J0RlsfX5HL0nEK%2BWZREk9P4akIhWGAwB9%2FYe50ZK9c3atakIoumE96eQKjULm5yxOAwko8AQYLAT%2BB5g8N9bwcsAzietlfTMqZPHnTu%2FT0QWu4BAjGF4dCedSU9XMtmoAsMW3l%2BBEtEaYDUEnJBZK6VTUsFNsNpFnGjWJzd0GuCbueNx2LyxXaIieDQGVURrEsEAdvybscMwkqk%2Feew%2BAYJ85hRNJqzpuT4ld9xgJ08kFsn%2BCTL4q5bwMiLh%2BC%2FAQsv0zinE4%2Byxaz6V3h6hHUBFXK2togGxGx5IU19faUUJ8wCrl%2BFcv3Fw3d0p6D7nrIeItXKgg68KthNh%2BN70vdYlggHce%2BiFk0qWyou6nWYY0whE7IuV65b5QDgvBBwP%2FdKGRABL1wtNB%2FTUIeLIouDocV7bM7H2U8um6wEjwaN7resIBrDalKfDN7Rj8uX1IA8wIj7gUxzGs0lgNIBj2RaHHUd0mhXt8IwIVlhx5nlfNL0G%2FQj%2B%2FicEy%2F0KAZ%2FrqAkA96pZTYs6MwKDx2Yp7K9EShsDLfFIx78KAjju39JK%2BM%2FtATa9CdN5WOug0DmuWg7Rwmegh%2Fmdzhi%2B8ydaR5haFgk1LcTLtJsusy0IskSMCBPkVky0TJuKoi0dpzvxKPUrxNuSZ8lyWA0BH9MbYVxLfAlG2AlsgiyviWbpUA%2FwJW7XGLxYecDoiFYR04B7TXn40C3XI3yBQLgBn6GLbt%2FjE5AJZV91gCMemoaO5bWWJQJEdvShU7%2B0ApUzz1%2BxVd3eQW4eiJgBkgM9wbIY%2BMTBBKMjWmZwFfCyB%2FXOCwPo6sLLZ6ImJ8xP5%2Fr67rA6Yvs6IxGt6gg6doaAe%2F%2BwhUcEA9lINUTaXDKKiLdDlaiyuFNRSranI2qA81RCOJjJLQwER84pJl60w5wAMRLNYjz%2BU1t%2BBA%2BwKS8cIK%2Fl18jCgcipFJVvChoPBK4xvA49yxaDI5ZMjG3%2B76wAL17d4UvMi17knyyCsA6uq8cXGM%2ByVccHMph2fnodMQHe2iYwgngmfv%2BSbBqyGOtEZjIwmGvZFa4xWL0SEuxcq618IstiLezgk6s4pwRSDJQaHWu07Ph0cc7aYU4QHNV2w5FbB1L05cptwMm8jSkWr7flCtMMVsMD9xtvqQuCVBUwQfopSfqIrdPAZ7uFIayZa0MiGE%2FiTVYQfFbT2aQ%2FIUUbkMxTTKzeVWLIzBGtI1qXiAFGIo6LQoEYZoN7oiyJPHSEn24Al%2B1OJ5NRa8vM0UdOvSKcjOdie%2FszaQp1Rmp2IzZ7qxNR0PmItswcDdjxNijcPTBE32tRmHdKUwoNr97dSCmBqo9nfr3SapKVFQno%2BZgcMeEmYui1wzWMUt2o513VzaYAg%2FEg9aBNMwcBAx2RE%2BxtpXUwWZ6WbFrKu6pRzt0B3useDJfbkwgG8P1TgMXPuvPI9Ry4lyCqi5d%2BpQG3gReqYSFgDIRFQ0BBSHnppjaxoQP%2BsIJNoPy9lbQ7H3BvTSTg%2FBp0KsnCdSnbMMNPNcAuK3b%2F1GZwRAOGWoKKsn4EBi8MAYCHFori%2BuxC0ttWYQo%2BR1uNthyfAUYPvw0wO5WHuUsWCj8VvpOyx1yeSv5VEXl7r21XmM2srdBrtjkDB2eYy%2BNbPin7teVmXyjzS9tWo4vxJUzANCPVRa2k3Z8JASYnpW1SkrnoSmI7VoMhGCA5Yts4t7aO3EyXFgDgLaknFl0n19r1I1gWwzLd%2FSjOVeXshaFCiRgqSzw9hSZ%2Fbdez5LFY%2FXEHUXCLAUlyqwwCI4m7tQ0nrBJuG%2FAAEyJlogjZzSUiyPGyT%2BLeZ%2B8nHTmo2Ji6l%2FowtwgH6ZhrsaRyhGtkTD5oNx9Rw2xi8hIfiyF%2FwQ4Mh91fkmQREY9Qz3uOwe0LMZdw7c0ffozlcun0Z5jy6WF1WltuRI3YZFUv0w80bZV%2BxMf7%2FtMkuMpiloDrZhr4XfppDi316RLMsLi3StCfl7pJFPV8ooqoAVbzEPcui7mLsxFZqHsXYvCAADCI8STZfcEjJy3BbTrCQsh8wL2mw5Skjo%2F1zacauSaAe9XvpBQKue3rtjOW5wA25c%2FaTXtRcj281m4C8DSZ6hAf2yRrgO%2BZvqBKawRY3ftOMmWc%2BoU9cRcRidOA89xsldg0%2BfDeJ%2FntdTQgUMSMUEiiKVS%2BTwuMTgFmZRdw2mSifaHe36UYX0RZN%2FjCeFkX07Fy8u4wrzbR5iMpwbmbPLnXem9E%2FacacDgGWPeOsXVq04rT4PLYksvHeUD%2FEN%2Fe9dMCceXvHz4MnM%2FjUeGnGhg4PqocVl%2FGdE3Aggaq77d6UsWTYkp0H0iegoHng%2FdHqSNHlYk1CAKeDnSpHUL8jqOyP%2FdRzX0NpTefk3Zsw%2Fz%2B2r0H7xNOi8qXZ2HlWfUG0ebzArwnuQ8CwIc5%2B%2Fhm%2BqN6tMbiw0b3KolI3ofviwmvEe3Q5xw0qIHlo0OWrQOjx0eUmgfwnacnl%2BdFJKZYmSRI%2B07MQf8lndpeefFUUq9H60166ayo9sREv%2BXK%2FdIb1mcbNR3thlaqoj2a%2F62nw3XkqMrxaD5XoKfQQrH8aBdz7Bz%2FXfhO2nVEMj0TfRnfQUkwreQKhescpsO0ffPomGPpwO9eWYfM%2B44ziANdhyWCDumJUAUghiLUm%2F%2FRviVqo0FTci0DVpo%2BZuzkUOyYPVLfbpFk%2BaiX4yd9mYXMtlydiHhbhnmTITghdXTMCMVxkbCXPssCpfAfQCZXMptAKEuHjASvlOAK1swhIxQDh8x2257fGDEeGM0fbZLdQ8Pw%2FmjSf7RsgkxeCZFi7%2BNsTKjnw6j6JAO3xJLljwOMyBbAV5vpHKMp1BR7%2FA0Uc8ZGVzIkMYTRy7LhXPCbD1Dq%2FSS5GfsMQ38yb95xclQACAjS%2FxaI6ajpTXkIVoqdrjdQakePqy0E5n%2F0wr9QH2UIYpie9cLGwdFbOFrJH2bs4DXrUkegHfDigt%2BpZNoOHzBZ%2BM00CqXRTvfqhGUpeO4G3lRrhDLP7wO0zqtsDnOtBlCQC6XcEVxpRxZGpJ9dlXlSRtezYQxOldlzjlFgxPxwFSQxPwkiagdgMO%2BaIbkXCKz6xOUpVxsOYOGIJO12prdZ6jwrJJW%2Bw%2FMah8O04%2FbS4WjXmx2muAIHJL3Lo2rBrV%2Bq3LJjOYm61nmXmtKlLgbv0JYUHSinyRnB6To8uXtiOs7R24PJgk%2BFdvTnlt8JC0L9Kcpm7FAVqxemIYLrFIknn2OPh9xG91Ujw92b1LvrZXo3KNw%2FBZAaw6663LTeAnm4xr9%2FjHc3BFmOfQYW9yej9F5IDF7J9oJtQPyO0alNFOvkk2%2F4dyTXOCzmNTdNyZJkehnBswXWgwW8f2ZLqt4X4bV18O%2Fh9X%2BGkXHr0zu17heuw6h0Zr0YDT%2FnT5TzLuAgStJLsev5DXYWdJgYH%2BcujT%2FbL9D6Nu4I2jqqrWpbYs5KNSQ0%2FIibNMCG2YLb0Gbja%2FRq5Fkdq%2FV%2B8S%2FwEnvirwFgz2oVMLe%2FgCwkz0n99ydmb%2FOFgqxJscTmDpV5p2qjERxg%2F7l3bnuf62pz%2B7z7ryXf3IrKUz%2FwRiMYnTrkXzvvdcbKhu4Gb9PAeJXFhX9KKsWo3PZ4rDbSzBy6oRbalMOPNJo7tSbR2jVe5Lq0fjHsvaxdvMBuW2jhEmvV9IZOeae6UACvKYrCkqR%2Bsdy2oXPXniyzXvy7FuQQdt8oqxtIkNo9J0O7kvrFEHDVCnCAW%2FET6RGF2iVVvHNnL0pZmYGAb1SnZZhxHKKl9auT1Gyf5jbCTMgjfOsh6SZMCPgWC7g6Ane2K8GR55EGIGanuLFOHovFGvBqBrg23sNyuDXA%2Bmn67pyaiqlKcVm6NiVUltrQjdVriRZn9iapOV0fHMmjLwqtnTvCPi9ZGkhuBGqtOivMMIkgWnw%2FmfcRvN7lthvHEcyNgUCW27VfkChYkpudvpHHdzVu4VNtFXCHngJCodP8NbKYXXjxYmHPD3c806vXMiLOeNXImHz%2F4N7Dp3PVfUncEFxrMtwBvf%2FZucf3pz8eHn%2F48OH48ONJbn2LoEP%2B5lelfjKhkz5Yab53slrdPyjsR98AAAT9SURBVMQAbvXQwZ9hfv6U%2BvqeaXSU3Z%2BSXzkK0TcxiO8Dab2PVulmiQdHP3Bqom3AHUbq62vXHvwP3KuzfHgMKx%2BOFapMkIDFRnHxGqgpnW714b1rV%2F7%2BPyMbbgHg7pZHkWXer%2B%2F9Giu%2B2NuOQDm%2BHzt0mEz5j5kCOb4urvWYjG3o%2BpSzP3791cDAwOHzOCKQ4ZYXjctTv7wtRmYw5goMbCYQqqw4TOqVXEHkQS9zcRbo%2FKtj%2FxkzjXZ1DcTYRAMH%2BLtWo3WZN%2Ff4jgI4a6yFxhWbC7Hj3t7j2BYpZuJqcgRuq7t9B8NCH0a7BkY%2F5OCAJMINlhEtX8dlSc%2Fq7sDrFaMzcbi3BMSFpP%2F%2Bstp0mNsUUVEYkg8fzfXdogdBP9I1jpVdBTBXw9ygYb0%2FDK8VRmUy8IesSnqVSiWzPdZs%2FMdOCV4Ol9nZjcQRxTBBbqaX1eqVkv2ZWMMR2pMH105Wb9OLqfAdukzhoKKwx5qbPPU7GXByvR7i0mq14Ld%2BmrTa2h9ac3Hqaez9cd7hUDvyHw4%2FxkKBYVhgur9sUr8t%2B0fC4PV6Gf1JL3DvCTjZQJf9GMHpS1YjK7CQZVopczdcwdsIdmIeiJJG1dPTw0Cl%2F6eHT0ZbAijhr0a7mP1bAwOO5aMQ3IrqPzo25XP3H54Y6M%2FGfGCVXv9peoPuQ7n26xNmc8zMffUA7DjL0BcnkKS9sJt7u7KcM0J8PWdSv3nw%2FT0448iVawZGR9UrR36CGNp96%2Bg9zpv%2B8Gir3wyRg9%2B1KrlcdsaN1adJbmM2BrwFmgHBsImdY7q6fVK22%2B0F%2F26JWjl2mPK%2Bs7EyGLx0Cw6vA2ega3Tg%2BKg8NF6%2BfmwymXqPU3WfmXlEkOl6eat3CFjfM1X8%2FH24uxIL3D%2BGC5F6j6lisXjy8DDPjNunWsBrnH5weop0wJSP7ZZzKw76h9qavxqCbglzitns1GX6uLAbSr%2F9eKxmGkkc%2BbxDDdmiVpscb8zniAN8S%2BtJoyFHYOnevD3shb0ejn%2BEtWf9ACAiKvl5mLX0bjLICsfhMY2x1hBF93yqe02O5aTxfMBa1%2FtGPTgm8HkdzI9bSRrP%2F9jac06iAcodXVUGJ3ugl0dqepVBr9pxnLBZzsfbow0zbYV1U46mXrYJyPGupR%2FT0382Yuv7a9e%2BohfqDdDTRAxXIV8BqR0f%2FlimbOYW%2BAsB%2F0K3vdWNXDGzw%2BAxvUu2hvccwHrbr%2FeYhzhaFQYGa%2F54%2Bd1J0mm2GPtbeaMerZneG1bXucn1LOXfpFrCqz1PJDp6nLnlD8A0qdUOhvL548Pl309%2B%2B83mNVt7gEVrBS1kjSHx9bUrwgUPzFMz9TqWfwuf%2F7H7e4A1OV9RyI2TYa8tefJvNL0cTOR8Nq%2FHPGkw9rfG2ur7man3cH1jzXTAzgtA%2BcO%2Fea1n%2Fyz4Vv2q1vQaQyhwFICboNLTdge4MlqVlvlJbSA2emPANt%2Fj9UubHPnDE5%2FH0Ow5VQ0HYO3FXCPwAeTQzYGfXNuqWPT3Wz22WPHh8h8wCP3w4Y9DcAq8ZkuD14PHD%2F%2BSditat3Lnw4YuGvDRtP2s53Me8n6t0eAKe7zOVMqWcnrDrtOCxfk%2FwHGTy9pzI9qELoc8Z7w2LetVNnrE%2FZxbV%2FU9OYg0OwE%2F5ahkMBsiZ%2F12gJ8Re460NeL9rR5%2BH%2B3io58V5xf6Ql%2FoC32hL%2FSFvtAX%2BkIC%2Bl8dKtStmtrHvgAAAABJRU5ErkJggg%3D%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'815.5'%20y%3D'-34.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAALsAAAEOCAMAAADmPpYqAAACClBMVEX%2F%2F%2F9pz%2Ff52hAAAABev%2Bzhui5rzvep4fpdvuz42BFdvun42g9rz%2FX7%2B%2FvguS0AAAv%2B8aMAABMAABj09fUAABQAAA8AAAcAAB1kxu8AABrx8vLe39%2Fq6%2Bz%2F3hHwWzBqz%2FP%2F%2B6ni4%2BTV1tey6P%2BFh4n%2F5xEAChK7vL4%2BOzmxtLZ0dXhgYGLFxsf%2F%2Bajqwiz88J%2F88Kj43zRTV1kAACGYxdgoJSSTlJaqrK4QExUwMzdcYEf75Wbb2ZU%2BQkyfoKGBgYOP1vX76XsUCQDhzRkADhvw0BrtyCOski6pmizEtSxGQhh9cyfHqzQcISo7OB3ZxidbVir4YDKUgDDykWeqTTLXWzfpYTXDWDNfq86Nuc1KTE5RjaMuTVxoipdu2vVCdZA8ZXdGSz7KyJGWklgbFwWRjmc1MCEhKSCjpHXIzY7630S3uYeqqon77onZ0GB7cSqsoCCRiihfXFB2bgD97GByd1psZiwqIw0zRlV3nKsUHC3p2x5cdX91dmMUKDT%2F8klGPQkaMDKSgg6RfDZVTysmRFhQX243Lgq4mjMhIi5tbDTHwBxpXxk5OhjOrzJUTxfayWirqWtoWjYvIyR6Uj2kZlLCf11POCv8fVWLW0RlOzMmEQv%2FiF9wOTCHRjDfimbFbUZCKR%2BbRi%2FAUTNWKBkwGA6gmkDZ1YZMlrhChqhVqNEVNDwAICt5xNwSXOorAAAgAElEQVR4nO19%2B0MadxZv5CsoDIjvEHWCEhDlJVIfYBQ1gEoUUNtaNCZq1kdq1lW70Zg0ZduNSZPdrLm72T6226bbx71rY%2FI%2F3nO%2B35kBFCTYEfeHnt0mBlE%2Bc%2BZ8z%2FucOXfuN%2FqNfqMTku6sAZycHObuprPGcEJqrVxonumqO2sYJyFHsKfxZg%2FxtZ41kPypYWbB3eZ03lwgdtNZY8mXbFduOtvK2xp7f7cYtOY8tLqqQmB6S7KSpfLycnebu609vFzRdSw0U2u%2F3e7%2Fn0Hf5FvobSsvb2tztyssofFaT9YjW9fd5%2FWuLKwQRyHxHUM6G7nZWI6Mv6zg1Hz7KOnLqC0bHDay2HPrQ3fjTWIuNMgs5Kj%2BhEFfUys4Ts1xm7We%2BiPvMvk9pOfWTWejE25QD2k4A6BHqcrjRYkBcV9VcAo1p1ZYRmpmDnHe1O8jPbfdTie9SPfvyf%2BGMrWSW8DK8jb3ZbVarVAjWTZrfamMNdkJ6bnpdOKhgDe61%2F5wte%2FM8KZScKHX2dZW7gSJEaBzHDfi9Umcr%2B8n3q2bjchyOM7la5fbOW6d%2FC84EKgfkZ%2FuVQCuQPhU6Ecq7AxdVZePfIQ8RwLkd9pBsCwbtV1njBtIZ1%2FpRY461xSUOPgPOW%2FZ1NtQidd7SOQWIHe3oZwPrtK7ouBii%2FazRg5KpmapkYrxKhxSCh5OK%2BADmSf9Ol13cHGpl76hDQ8zRy8OGT%2Fed1QVFZh0%2FaSXKshBjqPQATeCxz83SZe59iMQdMpzkHN6cewKLZs13WeNvb7lIwq9HKQdwYNAAG7eYrHwCm605u4tt6AV2y63q3k1Aw5v48PkzAW%2Bldyi2NdQTJCrwG%2FLxyOjf%2FzjBserR2J33G5ULu7BdipIInYFH6jsL5hPo6N05FVbC7VL5XeoWeKozIx0kgv3z9eOB3ieV99pc4I%2BX%2BUYck7EznF%2Fy%2Bw4nAI1dPWb%2B%2FvN%2FlaHKWl0dA6%2FfsuNqm%2BtnckLuDOB7drEg3vT0w9qNwGwgrvsbhtMYbhAasvo%2BUJ5%2Bt1ka2lpq2chqA96%2Bv317Aa0EkKW0eq4L1OmwhEF6OTxdMkloNm7MR7ZvbqK31Afxr5ZMF%2FSFu11NgLI3ptLH9WQiKcV0Nd37nTce1y7COhX1cygKgD6gxKkgYHp4DqPL%2FKKFP0iYec3CubS3N9yorYohwtodN9cWiA%2Bh8mX6AD2llyPkI9iIMg8Fwp9vE4eXALgRm2RUTtfqeSpHFH1eRh7oFCKpo4GRuXuwTuXLw%2BuAf9vby0QgDlgNA6UdDyovrsZCIw8u7o7TmaQ58YilVZbdK1mmOe4w5IuYOcCd%2B2Fyeg0oK8I2FfVKMLtq3cG13o%2Fqb13CflrBPHYIc%2FHSeJxgiSmLwF0o0oF4OOJ7RCv5jJiV3CBv80UBruJ3KZuIMejM4JWM%2FSn3wWnSwwqVVFRkWqg5F6C7HRcuk6uI3QVvqotMjyKKtVZsHOK0HNfYRS8lUZ17jWUXaaq1ZbtRAdwGEll0E53HpRcGrhO7l0qAZartCg0xvkrY9mwwy8YDRYmE2W9QrEPAtMFZwq8qYOOAVWRCsXDqJ0D1ANG%2BqeWMl1rMCL2UBaJAQb8ubYwcR%2FwHfXMIPrmwsfznyamB1BiirRalXHe2zGg1V4D7MB04dWiOcDOZWM89%2BcCxawC9svqpN7gP41MDxSlYNcatPvkeokRBIa9qp2%2F8mQoi56Bl8HNbKXkaGo4zVNrJbcb07GDzOjviXxHjuNNMH7mmwb9yF5VGWevjA1lUTPwi0Y6F0mS%2BszobpzG6XUw7HcUEnS1ZZ1cBxsETAaoxnnS98ZofPMZSVwzIt%2BZjoyWubJiV4TC4fDGCNKf%2F%2Fhs%2FG9wIRfA3TDJDt9E9TvNHXGCmoCQ8wEYIS09qg9INUnMzj8iy1H97FwcdM8NOKpk0uXKpt%2FBzvISqUOBQNmTye2ri%2BSpvd8hL%2FwmsiTIu8h2iKmXIx1GYDzoyDkSfDi8%2B%2Fndu9tjruEoCSYezc7PP9KPK8uGsmNPJeBJaMjlcu2Nre8ueiNmOU8x%2BARuil0QGoQO3tRj4K5R88sBiQ7DB7vK9lxKpUv55OHzTz%2F%2F%2FNNnw0qlMpTNKRDB04NL38OFysqU8FvGJscXW%2BQEH9xyUx2pTkJRc5M1wN7ZBAF2K4HFiF45FAIGKvfGxvbgJWD7Ec89BbpC8NBYfKum4BG%2FctIrZyDu63FCiAFBhBT6gKIPPdmO3l0en0TkypBCHQLC9BKiR%2BTK7BKT8Vo4uHb8Oddwn5x8ty30Up9AkRK2qRUhJRKwu2woxCUxIHx6HfTLt8euCFHsSuWoXc7j6m9G49TWnmImOYnDrqEQTYYJAqwWMwYc9%2FbQqfiD0IDUKPc%2BlzX%2F4WAp9vaUyJOlYRiD2S2naFMViCKbK5aN70oUeNeT%2B7KGg%2FXkVhvNOSbPKicoCBoaKYQkQFp4R3OTb4sdfyOVwbKh9cMZ8F9HDX2gaNrcd%2Fh8sORNKO%2Fw%2FwqZqyJdC4h9MEUGJPV8hLJ%2F5xjCnxlCeXdNyisy5%2BptXjfmYVL1%2B7HYTwJd7cKTqtyVLxisc5g9Mz7S43aXu9tSziqT88w4km4%2BfWf6P7OBB3EvQ%2BVO%2FLLg1tX7nxKy3LN0uxdT6FiElD6LD4QyaxF6TdJ3pLzw8bcCI0mwE3BWx4ksyE1mstizdLPX2SjUityrIgcB%2Bu5YlpPLKQLhJFKqOLls8VMK29WoIZXDsuRt6sxPV5Zu0tocZv7dTnf5WruYZVdbRs6H%2BSwyYxmJxHgJFAgDqvrjscMVDlFvZtcngz9Q10eWgOMIHJG3DV5ebQ%2BxHBfFvr0byibGlvFgCnY%2BEB3hj7NSaNBQuQN2eaS9rmWhtxExt9GaRbtCze68hH38eSib5VFHxkNJYIGr1Rv8sVaK6qUhFHal1y4D21v1txqFMtHgKqdg9l0tJhcR%2B9VAZjzA6OpRic1qbvOdTf44rcnR4CNE3d%2BHlXJkWE1Pb2GhiJYsWOmOo%2F6WxPf1SJjPiEXNh89v8uwS8R%2FBbQvVNMdgB66gknE9WZQnSenpacQq9B2awkPUfGx8w6IWPBY8qxuCPjykvgHuO8NC8g9%2Bdnw5xuPdyood%2BaJAs%2BQC%2FSiPJ2PFHCSGGyyzDhjDT%2F9ioWUjeiWByDbH00pNio2iFwp8H%2BFZjQZCcvz6WOwKMWRyTcpkljDOo6GS4BvCp3%2B83dkulE95LvbX3cjIX2OxEM9zKdKM2C0oM0zA1NxuNIbyc6yK5EKU7WNe2WKObnLTifVcTsI0UgGnDv62xEbWr97FlNDnV59thjlLis%2BONadYJZ5OzmLhLeHKUS7F88no6qipagdHxidbCarO9xEKDdMs1DCGrq6EeYt6Y%2Fsu0ftsXf5uf%2F%2Fj%2B%2BTK1RGLRSFB5y3cRuXy86u7z59tjvx12xu2JDMCGf03jsUcrod6GcMlK1lqxDhPwSrtHGeJvTMeCC%2BTant3UgubzH010bCaZwh5LrweJLXeiM%2Fne3q%2BkpDFkQDHC2cmm%2B%2FpYlZJTre9zlbR28hOqyA4ls3zVyv09tZ0sWzq9tU%2BDPD08mKjev1Mv9%2FqMAFZu7tsEfK3zQBPjzT9NZZ051MM9ZR7u7L4YBKZIhAtYQMbll4oV2MrhPgbzqXVieHL%2Bn7yLGBR8%2B2bnxO7tSl5aboGk7%2BPPA%2Fz6FqiQKnD6Sl5xE5DjrFd0i9rMcFPft9YvsZtjFgEYd6ujVjPVekOYdedq%2FJXjgcssSjps4o1cJHO1bX6mifZj3Ph3afpFg1FyEWzA2XbZEbWcvHM4k1n%2BeXRCxs8coifrG0xMaanY4d%2FWWvXN4PBrjrx22nou955jjIV2rwQDR8yZACehktlLtfkYlDO5Ea9Dzuq%2FoD6Rc3xYW%2BnNXOvOAA0kxrirzp3pOuAXkrr%2Fe0h3jJ5fjtmOXpWXdT5RZcgSuTs%2BmzVg2swGHsniiK7TrqyuRu6cw49KIos39bprOTZ0GbldiBT%2FDTE0gMAHoTeJmM6z0%2BWnO7LsZXzYUvYC3FBZnTA2y5irzra6SF920yWq7c%2F5kSVlarfQzTWoxlM5S6ZkTGPakbwq7HnlZPjEI5lQac710TAKlZlxa6rmyGRkCVT4MoJZpWB39ZH5AOvsxHwhtsDm%2B%2FUEIeAnZ3HlHugq7KBPKW9ck6XVKX4d2vNMmaJM%2BQWqDujZPCVynW9fK4BmChyq7Ft1TIS9DWdk7Acagayeg99oqRrxBeaZvR7IcVRkUHGU%2FCM9UrlJOmTD7wOxWZNHVvxiIyFv6vS9aSZ2A79EH439UbAgXg4FOIygFdT8ALby8qGHtbIKTZm8knv2pjXJrHRZJsxN6QwtcFODqlmapS6ulNAOCLjylCmdBRNgA8pRQI%2FXi9HskCkLrJw8xaxi2gbfOD%2FmlOwm%2FrIIVbB6TTDm2aaJI1f1ff5XuZasVoUG1HqHxKbnHq%2BebElid1KmpsBVlIgTD5y2CSds3bWwrvMInbdOdviE5c6S8KAozkOgVzKf8gWQSGBVBCPqMBNRN9MPE1JaXZEIofeX6XzNwPR6xWwd5FhVyhb%2FpVTuyTsYKWiEVl9G3OnZJp0%2FV6cB0qRGV%2FzoXeDoY0c4jtgV2ZtMEjFjvFfVNaaE5xYk8jpOqvfkaoiM8iMripd3kXs2fJRKTJDCzfyzlU4QAhTEaZgr5%2FJkJ2oAj2TfBXdgix8p5WpoSR0zGUr14mcUlNlT2mT0p1LHT9ssB1tGRQscPKf9rtjmfjO0UxrKAU6TQgrozNySk03AExhfLptynCL001vQ9%2FVsowyg3cipCxLlRmUmvWInLWbuk5Pw7mkh55q87trZ45GbOktxI7Itqssi7ynCrsA3jUpb5t5K0p8qoNF%2F26oNzm6miPWdBfgyEWgiiw7bFgxjk31ZwR5wUDkrqyV%2BXPn7Cg1VaIvWeXo6vf03a%2FFLJMXTGGGTm0JO6giLyA85EfSlBr4A6kqhgoMmFaZoZ9rmKkV1Tq47DZCoj09W1tbS0tLt71ex7HYwRVzHe2nEUqTaSoGmL43TuRIxKdT%2FYy3W3BvwdJu3ex1IzndzsYl4qk7Jm5yBKN7tJ8mE%2FSydN2unIxW%2B0%2Bhe7KuU9%2FPDmw%2FWaIDbm10hMbt%2FkgIqzLg152raqmZdJW5jnjAEDRJjruStc%2B4hnfJ01OZZGnoXCG1XaY6sFSfuOmoh7t8bW0Q6P9ESevR6QSmjCCsWscmmyOWSXTByljrjNJVBsj75HTEUsjsvX1rgUTsXR5y20nn%2BNZW2yk3%2BfBKpPXoZAW%2B0GAm23tKZPsheRcKk0zOXS7l2MNdEvGf0viQI%2FJJY3nvrYUKQjpvltOaDqudYkAU9kb85w4F3HgpJrt%2Bdw%2BVjJq1qaTQEJN1Kit7w9tRQH5qsxR%2B8mGju7zR3Xvb13kb61FtdIiP5dgt4SjNrwhBt6COqrojtdsozEO0ZJWeFnOViU1iw9vLpMJnPb0G5wZ7BACDqNz50%2B%2Fo%2FKT7Mg2faQJAzfGBURI0C%2BMsVHiq6rv7SHRS6aLdY0fEnYoMZlK3VyA8MJ%2Fq%2BEp9BHtRQMZDfCy40NuIk59M1XFC49LGOAnaux2mhoa6hnpHt9lHFrfHXCDrIfVheaHYmXrZrfWZu0%2B5H96k70Fml1%2Fm1PxmdU9bI51aVat5Xuy54gIbuzUk4pvxeGb6IrVkZX1MiUmAEHdE1kWZge8%2BLMD0h6mmx4mFbhz45DZrlv%2Feu8bxPG8JBITpKwUtR02ORzu93pXo7voT2sYH8kKrPkc0pIJllVx7nfKb0cNUX9FDB%2FRYn9jIMon0rG9uTj5bpkVUhYKN3%2FIWPkTbO7HdE1TfELsuVkmjN0ga7Aux3LtrUn%2FqI0MNMwtY7W6j9XmOj20%2Bv%2FsOUOfuZCDZbcuqk%2BpQaAiJ9XtK3bPJwhnT7yz5rtxbtp%2F2CEVVf2cb7lBQs5EVjvs4Ft7YCMcCokAI9Q1B%2BkURl7DTNLA41q1gNT6q312Tpz9n1k2wQbWNii%2BtpoOwW3he6jRQCMynmTpW805lswJr9XzKizROxf%2BNRWdOG7vj6RI2eQpVYKGbSn0orS620grQU78R%2Fsf2yAat%2BwldFULcIXdsnYmq7B81Op3OVQstQOXbLcnxI8vR%2B%2B%2F8bSSpc4QEQZnyyemPcHd5l5Y%2B%2BeR3GzHOwnNp5%2B4tCN4dCMRGIpWTfHJGWswQjMuZQM1EOkwY6fXVNRcWRv%2FK8Vye2FHOeMvH29WbFrXQYcO6r7GwrT9d%2BwTQX%2Fzziy%2B%2F%2FPKLf%2F5QGdwOY7ldcVx%2FyRGhAcar%2BcDzd2I80zMKQWbAPnnlTP4eJUftV1%2B%2B%2B%2B3XX099%2FfV%2FvviqcmU0xlpo3pb5XHh9fHwzZNmopn1YyPuQGDK5xmUs1mQg34vv3%2F166iKlqa%2F%2F06KPjlgU6reWe36js%2BZ8bfU6F1i5GmK2IOSSwtRh%2BcZxHR5CfOkbiOrJv979emJigoGfmPj6ixcV60PiIo63wB5%2BFt4MRis2LFeXw%2FR%2BDSmlJEFZWadZpk7gVrKwtbWSXg32ky%2B%2BnZj66acpEf7UB99UjO%2BF1BlGso8SSAgYslFveDtsee4NA%2FIQDT2keHVbppSM48JWr9N5syXNYnT9%2B%2FtvP%2FgmWPPze4LcXJyY%2Bq5yfGwodHzjqVoh%2BQmBaNQCpxX4HhpylaWmIJXKyZqTRKr1frOt329KSXzag87GtvLG22k50u5%2Ff%2FnFleZ%2FftESfCmBn3hZvax0ZSzgSSS5B5xltBJn%2F2OdV8tYSiOZy0OBP4FPYyVkObp8hZD%2BekFNtWL3CUTSvT33U95XR1ZqvvkeFM1%2FXnx1UaSJH2t292hEdwx2BR8K0B6%2BjckQbkmpWXclcxsinWRIpWlm4Wbvf3tv39oi1TYHDZPN5EOWv3iW1k7ku%2FIvQA54Pwi%2BNyGBf1m9XVaWbWSSYgeffqQzjD2ePPzB%2FzUaGXOloqZi7yrbzb%2FW0UpuQ%2FAPbor7w63aGpsD18q00LUy7VwadhP54t13py5OXZz46d%2F%2FnLgoyc3PzcMuCj7reQ0NjUF8Qt0IzhLbrX7Igj2RlGwa7m7%2BLo2f3ATZdoJv63T3fqJv9jhwZRg26Sk%2BTsVe5%2Fvnu98i4In3XtQk%2BX5x4v0Xy3suCEmzYKe6cG9Zv7wRsFgsXHi5eltJ0SapDMf4yAmMUyvpQeCX29vbVwcbe7dawGf5CJeErCo%2Bfp6Q3lZlfwHQAfLUdxeaX4KafB9uAF7K1MR7FeOuMle2pnIaHT2siXqrnz5%2F9my5enkShGR4cvjJkycjT4YnH66P7y5W3%2B87UYqjyUOWnM7LGE3Abb%2Bz1nt7a2HJ7Xa3rfKxaHIjlSPyBcr6xamX%2Bh%2FeA2Z%2F9%2BKHH6co%2BItT31wYy5QqFbCj3Y%2BefzI8Hg0Gg1EcXYTbIM0M197vs5v9jhPqdpOXbN38k7BtSN1%2BZ9DZi43vbe18LEUEu15QiZn6seKH90HYv2r%2B7pvmn9%2BnojPxXs22S8kqMhkzGa4nwSgcyb3h4Sd7mPNwDVd0ORxWJIfDVJ%2Bc2K5zdOeZG2vykad%2Ft6jF1mT16hpmpdfa%2BfCi1J%2FRMAMOARXuIACeeFnx48TEBy8iUxT81A%2FLNON4ZLCDebkQj1ZSrQiiTRW6a7gmo4RYvcHqmkh%2BqrLK7NWPtvOsyRr9wvY7a22Daj7s7RffYiJffnuRqsevQNbfq%2F5mCv%2Fx72%2BmmJ4EVQOMP9q1DDZ1CLCPV0%2B6RGVIdXnGjoEmsnDr9q2ePOvCOmuw%2Bu%2BramEKgH5%2Be7uajy1LIbDjyvffMha%2F%2BOmnl94fqLRMfHflA%2Fr3exWo9lxHfQOhU2DF%2ByS16K7cu5sp0rB5bzY6G91Lh7tCcpEDdMsdMb1F%2BYfyM0r6TSYqgK0%2FfP81VYkfdAa9lV8hdJD67%2F79PuX7BxXriCnEH%2FblaXO7a6xiecyVLM1gQiYD9gZfjxsM4p0%2F3LUd%2FeZxVAU6nY4GU63GsSQcx2%2BTWvAVmgD7i%2B%2BnBHX%2B3XeCdp%2F4wPuSffVB7TN0UIYCh7KOdPgHjib6DWWSEwDYFzPIhbXiVmNbG6ewPH%2FrubgGk8Pa6rc332pzY05aHA6m%2FkdgnBw8eBzRd5n8tV9%2BLfpf1AeGK3n%2FhxcXBUVTjUUZpSu6eWgKBEUGjmrFdplLKdhQhj0D39FIYjGCT%2FeG60xWf5ffmkGJmsyep5U4%2BXYb03Vr7cm0D9yDwDbxdJSUTD9IRLy1X3x9MYVQXX4jujXg0zzEKfk972g6dpoHKHOt13jHh2l6Ugjx9hYzKBM%2F%2BdAJBlGRht3ktz0lKwsLNbYjutP%2FNLJ06%2FbND3vdYFvL29raFbwwL4ZCM0r66P6kSx3TfaTl3QkJNvXdvwm%2BZF9PTP2w%2BASz7MOVEASm60hayBvXR4h3fHKPOgAMuzUT9l5nW7taYdnuE3DW%2Be0%2B0rIErqL7dvPhkNBPthobG%2Bk6TUDuhDvGh2PCp6otw3pfyaUShr7kMflXKuMn3v%2Bq5uUEo4sva%2F5BXfD1ihhLxVNpwd%2BCQ9iusWXvvTmiJ%2FrldWqcwPGqzeCrY0VoDT93s9JfV1VVZ4Kws3Ort7yx0e12OhcOhYRNMz2NbXQhJR1%2Ba7vD8bF3RtmyA9CQFyLTAnSgjoPaL4RoD2zT1Hsv9M0%2FvHzvg%2Fc%2F%2BOnHr2qWy1wU4%2FkAHcRiuXhOGNzf2yY7A8ZZ4sES%2FgVy9%2BrudsakAMr7Gv5QIEqCHk8lhJ23exudAG5tcHU1egi7tXoLrglYPnj58p3V1XacSLkwSROlwDzcuDUAJIC%2FR5q%2FeW8K%2BTz1wY8%2FB2uwIayy88WLzubq8T3kOrD9uTBUJIx%2F8BCSYuHxs%2BmBojiYI1ALrf4um83O4oQj2G8Ddsq1ka2erVu3e9vAMXe3Dd6B8xvwHjrdXWTBSRezqdXisNtI5ShL1IJD4Hujxe1DRgH%2BvSC58vN3L19%2B9%2FP%2FJaQ5iNibK2qaCfFOohzsbXvfCeMeQDiumB8Gfzc2vL17l5DHHSXaImPEJnR%2BVNXVZUwjdUO0RhcJAN1xNzqddAhytZ0uGto8nAJpsJNbje41DueR2E4BS%2Fh8lN13UI%2F7xiJc%2FaRSFWm1A3hir%2B9EmpuDrxOzOxH0ACl6srND9Cvb6%2BP4UvTZ5shGLBQKhDdGNp8v34dr9F3vuFQyYFAZE1kTX1UNDr%2FZ3AX%2BLMVODeTq4Nra2uVVVisBlupth%2B%2BUw9v8%2B94%2FBChxbKLqavUo3gbwZRJGI13iQzdXFWkHBi5dKpm%2Bd%2B%2FeNKrN6493El7MTkY6Sq73gQXTRx7Aawf3L%2Bgl91Yf2Xlwr%2BMS235lbM7spujqW21eEpzdASO41Ii1LOqLJ7Usx%2FOxTdJyxE%2FQtdaCah8fv%2Fr5p1dHYyjnlvDKeUx1gn6cu8Gws81EqiKUHdyVh%2BcX%2FuiA67juw1Vulzru4SWBMuqgL15%2F8ODxgwfX6VUi8gG4f9r9w323lOOmbtsMIZ7r0yCSfYAdlyCkGwguFt7czdzgXN%2FlqQAWJe6T86MW6kuNbYd5sKidwTdFqhTsWro3DOGLmgdg0aViKZfEvqBfi38PGLW4DevNTmeaWtTVObo8My2dJPj4Hr3CkksPUIBX0705fmh3eQW8kuNDEz%2F5f%2BA6gtBYMCa2jJB5oyEFOxDuIsKvBiS9WXJpmtwrMRqMcJ5xk45wskXSGukPGYtUxvgOabZZHdauri5zv30GzwZJ7Dy%2Bfq9DuGigx1jxP8R3PnY1WtOXI0Ns9eEyyEE6bhgC7HhSjRL2IrpYSaWlJwAuQVKcHbjciu5dYqdCfDOeb%2FyrSIvr9YzxRGLH50skEp8lDnZ2Zh8%2FuH6dCdSlpAEpeVzdS32CwzJz9fhalK67eqsXjSvry1ArQt5EXKstykgUEeUvSAR5MKBVJa8u09u1RuD7mzcdAkkSd4mtaxygt0yLUkWXrShSk5soB6MVx4bhOJNCNz5DsIRjnZawfvZNNuyIVVCdRu1BX4poZSG4UvgZwU6ksJrCNtJfhtgPFqgbmZZVxnxUuMZzjLhbcS4CV27AZcfGYh9zYArmDUZjFijwaUaEg9J9zZv1GpP3CcELC%2ByMWuEw0GV8AmyUTmP8NWJXCNh5KQBAuzSTPVXp6XHTzdBtq9xIc03w6mZ4nMxrDAYDcovC1RYlAaqE%2F4pQ%2BRjiBlUO7HQLGWIUf479LhX%2BQ2ukvx11QPz1R43uy5ww1x5ORhEKbnORZG1n8m05ketr7dwmsfX7CFn0AnZNaalGU2xQMd5kAKjS5pKWfIjy%2FTLzhviNlZhQiaO%2BXfgvlT5zZvT9y7hxY9ACsUa3TlfX4DD7KN9LkQA96nZVBpw5GJ4n9kQL7o2lScuPty%2FELBJ2MK1%2F%2Bu8n3uaMTXCmip5e51p7ePmpJFd2Mr%2F%2FSlNcrEEyoGgf%2FTSjSmuQD%2Fubgwi25oRjlo9j2zXjFnUKdrgTd%2F67pLdnGKTXtQZbln73PPX5HFU2QoI7c68QfTHyPp3tKrrvTzs3%2F6tZrxXvKHj4HzZe5p5GR0dXanYDbJBL6P1gCbu%2Fd2ZSODqTLVjb150W4jq6bT6SmHtlMIDgFyPz8VBqBYUBp1ir2ids%2Bd%2BJcaOOwYNKFfwcaLtBfmw8cr9lMsaphR1UrHOBXkT7CMkQKlKv%2BujS6CoIu17Px4sNxXhwiw0G4dgyF0FrnPWW%2FKrjSq0EKk6VChj06jWoO8zOhUIst0ix06UIrGJliWVMSWUlk62FPPrlFTC%2BGNUOVZzsClTgGj64pFX9ihOLKh5%2BkYGdquL5K7edq4CSF5Z%2BoTv8l9EABDFCF%2BNIvsND%2BHyLxNw%2BnFvkPv0YxI%2BrOcn0JeqgnYjnRVRmDAb4vaWUMYZXpKd3kPU%2BseIburP6qyMx2qdj4TaWj%2FcOMlGD1UaCj%2BZQdko1VG0Ck4pVmshOSYlRlVPLUx%2B4SDARRmpGMR5QUdgAGniCfwFf5siWk2eLS4SlASM1M%2Bb7i8%2F%2BOBLe2HxGavwnKR83%2BMr32fkAAAz3SURBVGe8BNUOwgf2w%2F8MKDK4ITUX39GBF84IlW8Qu1KmfEGBJQl%2F5Rz5aM0idMTRxU1%2FqXaAFnzc9zTy9Gmf%2F8TFY5PZ3kkOQHhKUfBLS%2BGD7pWU4DLgHNgROkWMhJCFW4c3r1iCT434q89Iy0hAwbOgFTc9snURYC8bfl03XJ3Db%2FeSxPwv%2B3G436pZL0RqA7mxgw4RjRwiRSEpZq8kmY6vF2vic2TmKdkdiWGjIluJIGNrSp3J2g9G62B%2BLh6P%2BDreCrtBAwJNmU3vGKIvZUpLQ28A9TsMhvgv8wfE1oCPYYmOr%2F8ZWy5xSY%2FMe96auu2%2BTm8N2UHsENMdf1ZVGknBphK116VU6QLDr80nCOlkdt3U74sEyS52Lir4wF3Ze4J0plYzeVxCsefiO8UJrC1NI%2FGEvtqfA36Tzhlb0qzrmhw2MjkUYs57Rlv6K6kPsZdoc%2BpIAx7M0ldxZHbyxL56Fd%2B%2FNjf%2FCPgdsXd1O5rS1V8diY7hwlUuFu07hcXNZtyy%2FxZOgQEVeHwncjA7OzvPaHb20cHrGgKwPeZWU%2F1RdwTD0HUlLi6FkEL%2BZqwq9nCDgUyOfRppQYWUFsdnMbHR2SKQ3ea3muqPEeUGT8WTIVTyged5lp9yk8mXuEexZ0wOpGE3MNXyar7Z23ru6DxLFnJElsdCPMQi209lhu7wJaZZsJ9TaMBp0VCTr9l%2FncfOCp2fRIdjPLdxV%2BZeYQfxdVwSsOdyCsA7LxY0ezzRmYfwdoGmf%2F7poszybiKzAnSQ95w5DmQ8U5QGzXw%2BrYQOj%2B%2FpjKz7sXExzYEEPbczRv0v5hCA3MxDOP%2FWH6SrN8msIBvsZFqCXvRW2FWiB1as2fGehrF5W%2BrGp2Ewohm546EL8a2GeeqlpfHPzvD5fCbqDFC6gZ55LvAMu6FU8HSL91%2B3nNljcj2RpMS8baQNykgjuOkYHp3SqGROsgoPC0KJyRkzSbxHXcMcdRD6vDSljKSz6SW25%2FbdU7CrRL6Xlu6T%2FjORGof3sQg9t6inYtdSiccDW2rYOZPnmOq68LE1oo7Jiww0RqJyA4w%2FA%2BwNMwmxapEvdhVmSFhGIL5zFnrSQZ%2BNRdmeL3YQGk2pkKGay1RtPW3yiyLz9vpRJCNgF1MxrxKnPkh2hHT2hOg%2F5p1EBRXPZAYuQTNb%2BOeY1tXOiro97zwkahrRuBrmCv%2Fw23rRMA3kn3gXzRPFfgaaxkqui9jzlveiJN8hAAzKulLpbag7eVTzT12DJyzmHotLE8cVfE%2BFbM2CQ5CHP5Dku1bMQILUzLYU2qeRfMiTYFdppfRpqWG%2Bs9Bugf0zEbs2fz1jNBqkvK%2Bq8Iqmz9chhtiqvO0q5gvOELsvBXue0LH94Ez5PiNhz5kOy4C96Eyx24VsGMh73rVJbFo5S5mxR5LY85b3dOxXCp3q6GqelvyZk2NHw1p4HdmajJryxm5MYgc1P3u0W%2FOUyfErsCPfi6VcwSNPYZ5imqQm0Rc7gaJBHSnKTHE8WKCn9iapTkrO5M67Z8TOwGuK92tlfj5WbtLZZ5mCv5Q%2FdnAiqF3VYFl87gyyHF2RDknR5Mt3ATuKjGb%2BDBIFVil9fYLYQyX4M5rS%2BEHhY%2B1z9Z3XpYxe3tgNpUIzQekvZ5HjqOo%2FSKl45KUmjYKawer8bIGelZxO3UQq1xTlLJOlsz0Z8sXl3aH7tlTf8iDJ%2BPzsk%2BhFasAhOJskdn9Q1DQD%2BdlWlZBa0hiA7WdT%2BahP1g60KdhzFlmxj4Y2o4A%2FUHBfRiRbUPQlB0TArB%2FsOJ5r2Uml%2FdFnV7MBn0aqlTGnxsi62I4FrzWqqBemKTXsB099L1R2aj2UC1bR9sxjseNtoU3ppYb4ga%2FQHmQKdZNZht0odOHTXodje%2Fi1wHfWEBE%2FOCMdQ6kp8qBDsk4q1i2A2I8VGeQ7tkPsH2QYESsc2Q9E6EUq7NukvQLFubGjL7AfqZ0vvPcrkRQ60Qffg6hraE9scU7s4M3EfYl91dypdK%2B9DVXZd6TgA5tSVbS%2FkWLPAR7vz37cUKqZPauGAqtXZDttJKfnlLZq5kxQqjRCgXVffxYVStwJVJHiRlKJYdGzJmcjPLpiCF9jmC94boaS5L%2FjsABgL6bYNRqDUXUjRxQotHKgE9x8%2BgtSM1CrEDeBRUWhEersGpAY4%2Fzc8Z6ZFGljefUsGG%2Fb6RAjPhT34lImBzgXRq7l8io1Ysj36sBTeEdSzHEMsJMqcBJ0u9Gwc%2FAmB3SVRkyLlc6d%2Bp7Oo2Qi9yRPBpUMC%2BIMdMLnWo5sk9i7hDYqnii8P%2BYX6k1sctPAtF4xHFrNgTf3jJmIvfRMdLzgDyDbWecgYjEYjdprZDZnj2eRQWhBAUN2BqfVNyu6Mmgq2dwKCLtKOw8nNVcZRysKPOb0Cl7XrupkgbZWgoLDQqAfjQcknivjoZISBXBC4sFC54EbvMwysZiDBqBUxxjfRCKGnEWcZG0Yfu7RTIEF3uS9noyXsL0aZAaYrjLGyYEx54yWUWyGQKswK%2BdjBN%2BGHIzvLEzFVlNkO4YfcTJ7I9fMuVFSkkizMwVuoDGlY9dQ7OAdFFHsOfVMCnZDwWs2InYWptJoiYZ9RW%2FDd8mWUXkvON%2FTZKbIQCdytZhSjV%2BZvZHLmzFK2NEJeuQpcP9MvYidEg7pYcAB%2F71ZeZRzx4KEnTaTv5Z9AiUH1XkfpPBd7EtFzs9Gcu4pKBJrlGjQXhW8C17X%2BTgFuzi6ijPc8yRelENJSrVhWm%2FyFtyfmdlJyUOKaTyQd%2B0%2B2c%2FVhYXj0cniAbF1F9gN7qftkSJ2IfuL4%2FPxyPyNHNiNWqEHBVyJfe%2FrRDOJyPmA4ZxEkzOZ6pPa%2Bc9yzzlpheHV4vgO2Tfszx0QX2vh0DfQunam2uo%2BiefwI7WiL1ZqmCfzhmKDIT73GV2SWBjSzQjDk0clYv9NzjknFeshN%2ByTWTZ2U%2FpqlngKJvbdNE9wtD4JCjJnwVVL46zS4rh3No5DKziyDkGIrE8RPI7qqQc%2FQOdrDqHPPS1UzNJ%2Fs8D1YrooACda5%2BR8tvOxZJoJoqZBhzfvmrxBw1pSr8VLWdmMzW7PkcK0qHb5CG0oQA8%2B%2F959Ol3OclFJpwx7C04%2Fq61rjSSuT4vdBHn3dhpZkYHNxkt%2BPFagDk69762hnzzoELdUGfPv06NOcDEbBy3VCDNy9AjEm085AGyyN98rkUrauLgqX%2BwMv0EQ%2B2IxO0lXTJxqa0SDXWoVY9mZk%2B1uoQOhbJ2NRurkL311QHIjODFV2aTC5ABd%2FfP2c1mHsNMcrEEj7uOggUjxL6fZxtRKHktN%2B7ivSJszk5SZcIMLnhXc4FIqbhLRaOIHnlODrvMJicj828SyXQRNkrGpoVLs7Di10yrNrObfSpuZ6Eir2MqPiWEyY7OZ%2Fa0m%2Bf3KfkHasaQqC%2FYiFavMiplhTYS8fv06iLsibNYmWQsLLayHeUB1QtWYgVDLGsQClMYQmY0LKzoOSKfZISP7faxUY8yyI%2FKEpDXSA0uTyXNzBiGqiu%2FPN1%2BxyecZC3GqfLCRhF4EtleHdkoIG3Y0r%2BZJ54n2QmWi%2Fs86MrrtvxI8ttUY6OIv0VGgd6G4WBWHYFwmubHW0pBDzp2LFLyKJfrY1giNOCKKK8w0c3J5l0KcypglklZlpGmOEy92w4NP1Q0V%2BVJxZxd10DTFc3KNWtojuBramLaCzqgyGgD%2Br1oHKHVJJJ3iUmEbVjwo06PjHGQHwNOFueKH0qLBW%2Bx1yw0%2BqegFB4eO02sSMqUsq8xkZ5qGHKnYtXPXtDnrHTmQ0%2F2LhuJU0tAriDfL9ci%2BOhuJPL73xigs8TPS7bLayMEb2hRxVG7oHroits5ZyF6yYFx7aCMD7fAT%2B0FKaa8H05hyjha3egkJzl6Lv2G9BJjWvZEg8yjwR3pnxAuk6yGFZXp0qy5brZeyxJltdBRHzjSSuonPy9pFWee3%2BcDf8O7Mz81dA5qbn28mZM54dAwXseEGYZVRaPoUNwHSolNRUeoQZhp2ynGIrOLXEldkDsB1ptYum6evk5LX1zJjt0fInCZ1F7ZK3HZfpGKItQYDZX1a7%2BohvqtUdAEASgxueZubT5CWVvk7PXR1DU31jJqaGhrqHJ1k59ob7Q2AaqCVD%2BONGzewozAep3dmPrlVbG4O79d%2BPG6Ag3DjhngG2F5GEBSVCnD%2FMj%2BbgHvbVZCUTZWHkGY4BgYArTXEAfLc%2FOyj13T9vtfr7RQJvvaKC%2FkTIHZ4cIxSEAVisg%2BwX8PPdPZ1nYIXn4WsNnxO2OvEwQFzwAkBYYJIoqvL6nDA3aFkcgB1AfX399s8PnoJr9mqN%2FgDfhIvtcVjM2d6%2BsspUpWpG47BDGn2wGf7%2Fa0OU1OmNXMS6ZpMVr%2FfbPd0Cjei02Pv7%2FLjA9HPoi9eV9XQUF8P8p%2FHEquUk9OQ%2BbEZv9Fv9Bv9f6MkkKqMVxeHAAAAAElFTkSuQmCC'%3E%3C%2Fimage%3E%3Cimage%20x%3D'935.5'%20y%3D'-107.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAALsAAAEOCAMAAADmPpYqAAAB9VBMVEX%2F%2F%2F8zmNNHRUEAAAD%2F1CHTr3yYajczmNQTAAA0mdMVAAAbAAAwmdNIRkE2l9Kz2PH29vawsLAMAABMSkYdAACempczq%2FAAABIAABgAABv%2F0yby8vIAAB%2F%2F1R%2FBwcHp6enT09M3peX%2F5CT%2F3SN1dXXLy8seHh5gYGBQUFBsbGz%2F6R8AESgwnt3i4uKnp6cthLUhYoWHh4cAAAurdzqwdD%2F%2F7xw1NTXCo3jf%2F%2F84LynH9%2F%2B95f7J7%2F%2FU9%2F8aTmgskMMdLDshGhVHKAVYNwlAIwkAEhc2O0GCXCeNZziChIhtQhycaS6yez6YaEFLTlJXNxR1UjF2SxtOPi1fQik7IiB9UzKJgBP%2F%2BiDj2h1dVwCBXzVfXBqHhwBiRykoJRNARh1zbxq7tiWWcDg4GSKemB3TvyU4NRs7OADp6DAoKkLCth0wKgCypyFNUGDZySCYgxpNSBtmbhnfxREmGB8AACpLSQBDRlhaQgChpBFPMi0bHhafkA8rNAA9MzhdTkWPeV3wy44IFwBoWjRMWB6nkADSrIPdunlvYUuyjGmaiF6AaU2gk10AL0h%2FcR12hodfbXwAVH6HoqIAJ00rbIWqwckocaHRtBglN0YywP8AHTAsQl8kWXhuZ2EfNj8od51BOS4ojKsfUV4ACz4aXYgWbYYAIS4lFAA3ucxXAAAca0lEQVR4nO2di3sT15XAJV3j0UjXgyVZ10a2ZF3JyEZce0YYmZjYGjkJFMojBBIwCSSQkKRQ4jRxSLJpSr3dXZKmTngUVcYKolsa%2Fs49Z0ajhzWWye73zUz3y2nTyLKgvzlz7nndc0c%2B3y%2Fyi%2Fwi%2F1dJRUCm3ab4%2BTIemSRDL7388ivBI3vdZvlZMh0%2FSl7%2B1YnZ2f7Z2dlj5LjbPM8t43ES%2FfWJkwcB%2FER%2F%2F6n%2Bdw%2BScbeZnk9Sp8mrAP3umdzwyPxlA7%2F%2FtbjbVM8jqSPkNTATAD6B1nJ2%2BMxBeDVPDkTcJttJ0nPkVydnj507d%2FbYbD%2FK7OzrZ2bfGDt%2FYfniR6Nu0%2FWUAui8%2F9zw2TNvvnFuFbgPnuw%2Fdm5k5K3lfDJRvDTmNl4vOf3qyf7%2By2%2BCxczOnnxj5PWxPcNvv3PlaiafSCaSfcUrE24Dbi%2BTr6GdgKW%2Fe%2FDMeyPvnL%2F2%2FvJyppjP9iWN%2F%2FQViWf9%2FOnXTBPvnz019sGX%2BXwmm00CcVMS2RvEbcZtZCZ0EMFPnZg9c%2BBmMduXSLSDG%2FDFDz3qbI6aSu8%2FcXn4NxeyCVB5MgG8fc0rSCSyK9fdprSVadKwmBPHXt%2FzwY18oq9LEskLv%2FWkxc%2B80mAHez9xbORmpgs%2BiRb%2FkducdnL81ydOvWvYu8E%2FspzswO5DC0om88SLCfHx1%2FrbZHb%2BWtbCThrePZnIZ95fKV7youKPvtnO%2Fu4bHxRNXSeS2UwmC4rPfvy7Lz%2FOZsjxQbdRu%2BTor%2Fo7ZE%2FGWJ6Z%2FMrHn3xyfgVU%2F2k%2Bm%2B3L5s%2BTlNusW2UL%2B%2BwY4iazN1evXPt0%2Bf33s2g3htfMLwe9Bt9p7%2F2zq%2BfzaOWfXshk%2Bwx7t9ZuIlskabdpO%2BX45RMd8JffypsOBqNUX5vTSSYzXvOU8ZdmO9jfeCsD2obEAP6bR4EVi0E2m8l%2Fupxzm7ZT0qST%2FcxbeSMfSPblV64MDX9GwldWiuAob9win3%2BUI55Kh8c72Wf%2F7UoefXsyWbzy2czooG9wNHL0w5ULFz9Kg48cHC94ytuc7nA0s2M3wUT6ktnlZ60yO0V%2B20wkp70EX3i1uVghGZ4dXjHSyOLbM22fmW6rPgY91PfYGzSM5hiY%2BtnLkNAUjYz9SqHjQ%2Bm2VRqZdJiwhxBT52dGzpyY7T%2BFS7Uvuby1vp5Ao0kZljPqoSqq8Bq2NM4u4RWcOGfkYplLW3tKqPhxYganOe9kNunowWO54XMHTTfzJbLnL3alvGjlE5MGtYfYfWXQ98FGS8lkz3yB%2FaTpXBtla7UOeshmfAUjtJ7q0Duyz5A299J6mZ5yA3IbGSdoL1A8zQL7ecyBM5%2BgEx%2Fd1%2BZsWnlYwFO168Srhs7PrF6evWzUHtmbWxvv4OFHR8cj8eOfz512hXE7AcWD1ufPzZ7oPzVspJHLZMt6PP7hlS9e%2FuLKpZt%2Fu0a81ayZeOnNkXmjAzy7Z8WoUS%2Fd7fhAihQxpcxDCZX%2FjYcCqw9dx7snTUdz8N%2BuZbDILt5qt5q9ZCWbwIYZ1LGJzLWZbf8iNyRFZk81kpp38kZvLH%2Fr86Z6C2Qlg50yo4ZKJlc8VoLse2X2lOkl31tOGO2lC5fIZGp8fHw6Tq7kzY6TUU0lsje8toOWe%2B3ku%2F0HT5w8NbLSKPQyy9e%2BIIRcvLZcROZmt6n4dtpt2C0yfuC9sa%2BGz7z31UrG4ETlZ%2FPFItR8sHYTraI178Gm8PGL%2BQs39twsQumRMBWMZSvQJrCrl0hmoWItZpYvecxFoqSjxWLywlUjrG7pAidA2cXs1S9%2Ff%2FHrrz7zUtlkyd2bxbNjIzfyXR3sZF9x%2BdqHY3%2B4%2FcdDh3atrR3yUibWkM8%2F%2FXTlnQvns9nOLjD2wz4Z%2BeMuoN5lyNp3%2B9xG7ZLPP00WX89nOjaa0MqL58cONbAb8N4KqyjHL%2BWz1252bDXBGs0s%2F%2Ft3HeS7dt35k7fCqg%2Br0OWs0bNu2%2FdI5m8MH9qCvmvXt94zmhmysry8kk0mWnsH%2BWtju%2B5sRd91x4OrNTVMyH80t2zA2DM3x7qUjuJBdpDrV7PN1m8yuzJii752Oe02p51MXs02V2syQ%2BzI0eCPus1pJ8dvZK2kK1H85I%2Fdtt5QvAdjqy%2F%2Bn82UILk8tvZf2yj%2BjhcVn%2Fo4Yy3U4sVvDU47%2FrWgh7pLlhS%2BbyTAWG03FqoN%2FB1vtQpMKVzMNyJq9to3por%2F0q31O17MJZHdjE3JzBXDZNa%2BOdvJvevOoT8RTw7vxW%2FlTf%2BezJsO8s%2FkyTd%2FhtzXkEOHvv3uFTIZ8ebsW%2BpW0WRPFA32ta%2FWdv35u%2FkDULYS%2BJ8DR057cSQCJULIWw299xWJ4dy%2FgQV7Z21tDX%2BAf%2F3Fax0CS26vb9QbazVhsW9ZpR94qo3akieaXlr9PtOYmcl8fajLM65950XfCHJb2zjyw91mbMpe21pzrH1L9nkwJEHlEdQYv%2Ffw7s1sX6MDluk0mju7lval3aa0l8k6o0KdXPiwaOWRmat%2FaFf8obm024zbyDRhikQ5eWHzRtaq%2BYpXbjfhPdnZaEhEE5Is8dL9RZJvFk7F89d3rVnoabcRt5UJTfj9fqFGX7j%2FdjFhtqoTUGmP%2FAGC6qG%2FnPXuQLDPF6gjO%2BXD91%2B4e6toKT6RLV79%2Fuuvv%2F6dJ3MvU8bngxUh%2B%2F0K15YWFu5%2BWLR6Y3AH8sV8ceXBI%2B%2F1T01JEf2vJa6A4mVG7r%2B4cDe4nDEm3MxVm8hfVNl%2BT6aOvglCmWay%2B3k9tLD78A%2FkarHVcu%2FLLx1gfMyL8JP7uaDaJrJLssxB8bsPPyQXi5lkIztIruyfqHDuvbb7aGydU1lUrjPDZiReIYd3735x4TS5UczizkGiL7tyd5FA5PJcCzVWYpLkF3qY%2BQ1R2P4fFnbv3r3w8MCtZRzkh%2Brv0v3FSV0RatBt2E6ZKjEqgbHQqKF3fKUQZN%2F94uEfDnx4o5jPZosXH7748B6nrFbY%2BS90TibXuaRQWaFSUEhUlhQ%2FpWxzwoDfvXD4%2Fufkys2%2F%2Ff7A4u6FES5LzEvBNb6HgZ6pJEn8J5UqsFQRXia7G%2FLiwuJxcr1MJhYWCaVgNR5ar4RyKrgAel6rbXCZUgHwvDK1YNEvLAViAzHycHHOL0mUVcmkR%2BrsFHkcCgbLdVA%2BLMRSOThU5pJfpow8fLGBvo%2FEAoGBuckX7qpC0oVar8%2B7TW1InFRVxrhaDlOucL2ucn2dQ2YgCz20aNrMw9zRALAPHFksVASVhJ7buOeBBTs6%2F0gHc1EkwSrhClNkIbNNDbMav8TXDT%2B5ezH38P4SKD4W%2FSFegSSZVZ9CjEq7jZ4idSZkWJ4UUGmozmHB0iiYPLh4KqhhNS%2FeP7q4QAaAfWkuAGuZ1cJVxusB19F1MA90LICsCBHUBeUlzUxqZD%2FX5sFqDpOHwB%2FExRohuuD18kYQPuay4vcS8CioY1MkQYNcFiEO98GMrvz63OLh%2BzGwnIXT84G50wsEfNFqbeOxKnEt5ib6IFGEX%2Fa3hHJNY1qNC1kyfoblGiQToHZcr2Qu9MMLwC7xaqhcYoq7IWq%2BAsZBW%2BgQUHkQHA6DwNR4C6qQgukpH5Kp%2BckXMDbJnGpDJc6fujjLHN%2FktEPtIAwc5XqFN%2B0IqpBIIzUgsRhJT6roggRnJbg77p0xmyaArnSQQ65SBQce8ovG%2B5AWq5gMm%2BwD85NxoxiH9VDf5Lz0o1vs86qgneiYt5fq4EiWOLXeACdv5mToJWPRJc0sTkQFbpq8dXjSKYmssy32Akx%2BZJcYLkVqLVfZWKu7D0eBfW6pZrBTUakyyh65NA3xTDToOoRX67Aa%2BVCdWe8orDSJil%2BMBgB%2BqdrQe32V%2B4X6xBX0yHprQbbbexgWIyQsEKSaJs8NxS9GMbI%2ByTFD77wWopAcuLNah8ANdtmMQsHPQCav8HoIihDJuDMYhQ4b7AOg%2BTDqHa6xFIKMkmtuHHNKrTNlKzmw%2B1kUiKGCYqUwhxd4LxTBMa1ZJMg%2BFTTzBVYe%2BifENeFGa%2FVHw093rVXKseiDvIyycpWbagej0aAKMdljYQXTY8pyj6F0BSfkfJdvnLBucrQZvcxkCTwjWEp4E5yNH8s%2FCS1%2BkQTQ4J%2BpkOuAnwnVQwy9v%2FOxdeYet3EyEDDrVaYYv4G8MqhBYmbcHSj%2FDoOfCRjs8BaV9RAPgtXBanW8W3NbEV1OxoAE927aElRHNKqabh53Ex6%2BgDYTiM3Xwcyp0MMbYYiwMr%2FntIuf%2FozLdnpX2KreeAnKFQpROcLLgmuQhg1g3Tf%2FFHyrRLUaK6vgqST%2FgMPscc3OZMDIabDlfsBTquDmIdGUFFD8glFux%2BZrwK7wUoVVIaeApTDscMfgGbWLqYa58yY7tjzqQS4puHhZ6fRqDA3%2BSZXh4i0rRnkFV%2FHUWaNJ72eyLTzfNPY9GlYjUT%2FTjnAgR58fmkP2gQAsZiAOc1EvwR2Av8fZbkdBEzbkmDNGadsSBhuSWakK5TfQ8%2Bo82kxgAJwoxK4yl1T4R3E8L7htq3RgB5zOaCsprFoy8k2hhg2bQXY%2F6lxSf2JoV8JRoxkl9s5dYpsa3%2FIW3ItwhWO1wYIYmwJPkJ1vquCFsBUCq4HedpAdApNNLmMkBGjjnW9CfReFrAtMXHt2u8EuM0wiRQiyaArlCnHQ0xRscxnw52qYSd31CMZQBWyeBg0fuYn2HoVEjQXBW8l%2BcDgOGg3U%2BnZB1Wgq2YQsyjVM2iW%2BCat1APy7ImBdCJlF4cNYeKvOla2jI8x2rYKXAfV2WRPQYVMAb8tQbCC2VBEyRCawOjakmCpwMBFOrXPFlr3LyzTxOcRXWA5Q9U09qwvKyyq1Siz4NRtxbKfeaOV2A4I3bAtMnVYjdDBw8PVvx2JhHRNgjG2sbH6eiqeO7bnGVGmrNzHYeVCydZ1GqVEDL0%2BVELAziao5uBIFg7ChBKo7lo8NSFK3vYPL29ZkUBh2iNHFlyGn1zT07PyeJswM2bEkHkomG7VTw8tsAy6hMxliCv%2Fr%2FJMah3pPxfSMa5pRBMBVPHDI4KcJ64pAKDxsn1ua9Aov17lQQ2%2BrYOhRSH4hGdBqHG0Gw5ZDGzjT%2B%2B3YJRkUaxexGiILJciFCIWFDDUthxzBZDfuilAdMvhpcJG0O3ryGvjwHvASr2qcVcuMijr29RQJ%2F41%2FAPdNHPLwmM10N8T84K3p1tZqxyegpuJCe8zAu%2BuSsRsFyaTRwKF%2BviftCHv8qU0zT1JEiNu4n3Z4Vq1wNcohY2OmpTTYIdXh685sdBeecn%2F3UpUg4fL3Qqe4f8N4EOJUlfuNVjAm8eZNE5ozKU3hno1dw8oLCttMocWusLK6MaRyzQinyL5utekl1ZnCz56dMvAg3YlYm8lQcCdlqE7YKsX1gvv3LXbFGfaZTZtUTMbQ1FvxWFeFaL3GsGCF%2B%2BBvC8SSQ0Xr9LBdXAWSVZvCo5NdVEp%2Fr%2F5d45j3mOyNP6A4xD6OcXUrJIb4kG5bkrTdHAGfebZOZQwPklGBNH6j8HvOpJIDul0upvBaiW99t1NwvKa6lDObrdRPW%2ByyqDuziTBRseujyjt6GnRGcuhZ3dwKhzIbGzQWe8UZ9tQjbheEIPbUeiTBhuIpq4Ya17eFXXWGHdszdooXGJ56okPirwO7GZDkDptxSO%2B%2BZ7pt8102irjerobCajXZ0b83%2FYzfMXb7DjbUnfVc77wAq25L7xJt07tz7On93E7vkh%2Bzle2oTUOR4CPt7I0rlahT1cfgkH1%2FRmGlku1VGdgyJowKDzX3dPytuKpwx1oFP1bs1CvDUgxtzy64zrnMg9YfbWf38%2FW0Q%2BzpR3Ybw9gvvW57VQa6HCxHNS6ivJ298VphI06x%2B6LCZt8Doq2orDK%2FbVYDtbbKeFUWwWb%2B5cc8svFZBzcQMLTaLlc5ul3tJJaYIuoaDsK1sTeuU3Jwm3Vv8%2F91q3Y3a9zmfRD6GNhVTbLYca1uNv8W4eAwChH2%2B6tUCdlU4n507KuUsbKuhBvsssneuAe6gxtm8af2PQGFhew3FsBHBkvhGteHmMVO1VIzn1EdfKThNGG2dq3gDqvdLyDqClXnkrrEu9kV8dTJgfjbqr2LV9CB2ykeci9IgbEF3MEuGZsLTvU4TEnZVa1%2BWZF6tFRR%2B814JMPrEjNyYbjg%2FY7usRK7DQS50ah5DnYonNQQxCq8CCd3bVCwPWa7Q8yGt9v%2B8GO%2BWG3q3a%2F%2BtxaSBYX7R51lN1rZNnQSrZSZtF3HQNQtvWOtrTEth3vbouLwIQRIyGzdpMzCenefuMm%2B2WSXdE3dCFFsR9YcPuSXHrbNGc29pW0zA61V08o8XN2oVrifsjGnxyTfVsXWzTE85QThZ5NDkmW7cYbsjbF%2BAcW5ahy8dHZX3pDUHrbVTeKQjxqu1KJPuW2yhh7Uqj0USnGIpsqhgHJyGsKU%2Be7wL7FKWOWcl6Kq7VQWW7ViGk5Q1gWyS84VTS2ZIayZd%2BERPpzZ2CQqGDtleggTyq2eSIJ1jG9B%2FKVMqzKZa483FAf3tZsyGsUJeNmILjgeAfYyfGt5qQ6mpAhermLPtd1w4EpY0JxVlalQf2IUPAyB%2BOTCYO1esmoUPujNwdEx%2FR%2B%2Ffb944Tx5zPEusNoRJuDK2lUvyUFjWkuShP6YgcmzR9eC1KGeWIf8qF%2BvMxlEEpzRyj9eupHP5q8doNUyB4cjcTWscGNEpuVm1FXDRVJZqXDMZChZJqWS8zPBg4SpQVUHTLWyuYd8v1LMJouXhmXBypggwp3QoxrjQljdL4kKzUp7jUYOrNLzv6%2BEXTCZ1Drn%2BtJPP4XDwYvn38%2Fns4nM8sXPgFXmoTo32jG8GtRUfdWyd3AtalvIpVCmLgc3iAunEuP3wL2FGAuqZBnAk%2Fn878k9LmTZj8fLwNXLcBV6LbepW25R0FB7AieLysUbm393PDD5DPfOtRor1Zh6q5jPr5wnDxRMBiRZhnDJKEYqSeLMLKglY1yi1Kxm8XQCG74RnAq4cWye6GAcVA8zLo99fzF84B6uTHPbmIIfb%2FSKZStdBwtSh7Rm6x7WKa8PEZcO2hDw0asbpbq4XipVVMo4dkll1LFieu%2BOsERlIYb%2BGWy27vFo3BB1w158mMDLvFRnm3VIAWCBgq1AsPRLpvv28zIkDM2UQQKnyOWQtlGCgCXhaTTwobjXut8d9jSRIEoK9RHEGKUrk8cNeCslgCgKdq%2FiMQQWrXDj0KhMOZTd%2FIE7z4iYJkZs5CHdti2Ac4VWWILbwDeDKrYqabAC1wqrgOLwhPPJb0OIqOC8oGbbkIFUJaSb09qKX7B6qCpw2p2C%2B6zBSoB8JwjJkOTOuTKfL0ifwu0HRtXudByeLQNSyFw4rwfLOloQ%2FAypZjWsc8Fyda4Iza2nGxf0EsOsqh613aQHgw7pjMlqKVrGk%2FQyzjZBBkwhkyjRMtg9dc1kcAdByBRnNDe76wwZfsPVIz89OgAVBjcecgGKz3H8jeDqKpQmktPHJdpl3zpnOCrLwxqeg%2Bjkx8cuCQbCBVg8OEYIo2VzV0SB3BeqVKq4%2BZ0wBbJeUStaiQzVIebYNuQV62QxhtGwtdVDFR5l3OWH6KTiP06kxuObOY1v25NpsMs8rFvHRMCCQvyBJx7YlXqwUa4xYyhme0FnavU9IMcMO91P2kbGCYPMEZTag13iQaW5WUJlnXjky8rGCYRIfCbB9uwyf1pluuVLZaF75pmATxQ8wkR7DBMoPKdD2mvlPaLijefPgEyp0ratX4s23HbiVXZsenlnmezRcm%2BYu97OLvGSN1YqSOSe%2FUZCG60aattd8xI7njzvzS4qQx3s6575jonUiP0mSFNkUV9qP%2BHNxzwRmFDSwzuwG5s1bZ9wOx9ok3H78bd2vWtb2L3zhGBCew%2B%2F%2B4W2ztvt3VPs3fP87WoHh77ZNjwpufb0Fhshuv0haItd6WQX%2BlduE7ckqNsPpTQEqtpS%2B7Sw5ODRyR1l3nY0osWu8I4RPlHxEPtkxe70eQd7rZ297iH2%2BFP7IawWe1VrsUNC7CX2bZ4t0mRn5bbRFLgLnkkjgb1kO1feZPcju9xid3TWZweJbz9MiyIpbFVr85FsOO02cUt%2BLrv7D49sSXz9%2Fy%2B7H9mbP7r8CMMtMmN%2FBsQSKrOlNh8JqZiHvlZlxn6cv8muIHvTz0j%2BJbeB2ySyZ4fY1Kl3h47vPZ9EyHPo3TIq2dHx3x0F2HugI3uunV31ks2ktnkkjcUuo59pNiOpp%2FSe2tFmcm3sQnX1EbVbZGf2cnOtSt5K3317n4O9ucsNxauHUjFk3zkHbjpRXvtXYjcOWVo%2FQfruJfb0Tnrn1VpT795K33dk97cfwPEY%2ByDhvbYOJDCTTd6ajHDhaZ3bS3pH9lqTXfbzR176KqTIcG92GdmbP%2FHP3OZtl%2FhP9keyLJFxd7U5Jsk9s8mHAnVTz2PmBntzd96VJ%2BtuK%2FHezyaQjf67dXUeZO9l8O3sVPIYe62nf0f2nHVnIAf2FvvTnj1s3CsLWXtllP7LsTf3KKlEn7nN2y7xiu3T4JsiiUqYNX2k5PzZlB4C7D2fqiDhczGtH6jioS6wqfce6MjePKIoU8WNp75vK%2FGK%2FWnhFrwatIabqSsHPLaX%2BHbPJbBE1qOWvVPq1MM3nk92shlYDNGmj3T82GRvAR%2FZe1%2FbL5rskvfYdxiGoEHeZPfO0BJKfKfHFQF7cxfTY%2BwztR0GOfwiZAUA2WPskZ2ezwXs1mQTdYk95ov4UlO%2ByPTkTMfwTqrUs%2BZDdvMEpYvsZIaMTqUik1Nzkx3lctr2cQWd7GqL3ZVBt7lcITVF5iJ7I%2BmO9wcf7DSoh8cTGuxOPYCuKSkjFk769qYLvoBvdK%2FZYbEMZ3D%2FDnqXea55Ypg7%2FL2C07lp3%2FSML7XXV5ga9KX3wVuAP2Pt1w3u2WGGXObluuWInLb3AoBPFVIThfG5OKzXmXRk7%2BjkeCEdN2enBnv39LCPV603nmdARd1Z9qn0vr2BXKowkyKRNJncN1qYnNoXSc00vtf%2B57BLVDi77TERn%2FAVYIlGfJGJvdODoz5gHkxPRGItvfe0GWC3Uk2q8AeOsttL2uqJDu40IKnw0lNuaF0WnHmtD9z7SXo4MMbYxgZjVNfKnvq25Odgrw2FgsFgNBgemp%2BPTnqoib1D%2F91gX4oN4PfHxlDmIL65zWzJYM99Ppn6KdOWYsaXk%2BA%2FgUAssOSVL0xGvfd4%2BruMh%2Fga1A0B%2FS%2FlvEE%2FafvskIa9UJlpwSexQKcMxAZILu02uA83KTXK8YQTxe8Gwm%2Fwxb6jTI2j8lzPhQKxTr2b9AHihZbBeCBaUgXDL9fGk06SIXg4ntFKeWhudS4W62IHs4%2FlvDDClAvMh0OhWl3nLRFqvUbCz8A6BsCzbDUaS%2FXuH%2F0g4PoG5uafhaPh1fL65mY5F4qGnr3%2BBBal6VhyuYCd6gdixPUzN8bXwAXQecOLJyCBgcYPln1sq3rX4SfnLN8NAciQLuMG1Q%2FYWj1xOcxGSAvLhs%2B4pNhcNGCjelgN7rL79pFAw0QG5uw8oql6sBv41EA7eCzmvqdMzZEc4g%2BA45uLdduMeUeiOZLLzbXdnBwhx91GB0nvAxBQOomQqK1TQWISicxM5XLwSQJXkZsrzHjlzE06tW%2BKEN9ogaB1tFZsc%2FHG5hrH48enp70C3SajyDQ4Y94D03ja7kGMeGmKYzsZTe0LgF3MmW6%2FKV5JfneU6XThODEkSpZA4IUrTyn638tgKmLJvxb4L%2FKLeE3%2BB12WzgXk%2Ft4pAAAAAElFTkSuQmCC'%3E%3C%2Fimage%3E%3Cimage%20x%3D'1094.5'%20y%3D'-107.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAJUAAAFTCAMAAAAHur5gAAACglBMVEX%2F%2F%2F93iO7%2F3RHdzLvuuxFmZruImZmqqpnd7u4AAAD%2F3hFmZnf%2F3ADwvRHtuxH8%2FPz%2F4xHy8vLe3t7w8PDWpAB1dNjWy7pCSFDn5%2Bf%2F5hF3gedldMf%2F7RJ3iOrMu8zQ0ND%2F8RL40BF3iOP%2F4v%2F%2F0hH%2F3e5mZseIlZm0tLTz0hHCwsLezcxpeNCIm5n2vRH%2F3f%2BVlJMXFxmIiIKmpqZYWFj%2F8P%2F%2F5%2F%2BTpv8TJDaQnv%2FNy7qyq6HKysr%2F9hLfzcW1tqT%2F%2Bk14id7txRF6ffJaZJs5RZFmcXhbTgD%2F72AUAAAAAB%2B6qgC5q6iupgoUFwDq2goAABQ%2BJQCoewAVFSaom6iHi5koJzCilpfl3Mo4ODjHuQA7OkjHybaMfAAsLiJsYQDIqAB9bQD%2F5Ur%2F%2F7pNQgCAc1OBYwAiHQBJMwAxLwBEOy1rSABmdXTaudoAACzhrBGakQAXGkE0PmW%2Fpr9sebuVcgBEOh8oKSVeVlNxb2eUj31XS0z4591aWk1CODyEgHX8%2FuyAcnRgXgA3KyFQUUJKQ1Opm2L%2F%2F6EhJUH%2F9IK3qYrl4aRAQh%2FJxoLYzQjq2Yj%2F%2Bni5tFttYCMvICW2soG7kwBsYEsiIQROSwW5o0PDvQi%2BszTTxVpyWgDg4QZxcYYuQ0KMfUA9OgBaXDf%2F4mj97Lz%2F6Ir9xVPzvYDytZP%2F2Er2uGrwo6nwnMOBVlztl83Vhql%2BTGZPMTi3cZonEgNVOgBGLyfpm3Kva1B5TDn%2FrHzHc2T9lnZTQSE%2BIyYrFCZuQGK0ime2gHxLJwD%2FtNbQzIDf0Kesvv9CRGo2Q39cY5EcGUzPlan%2Fp7Y6OoRtWl5vcrMAAERqRUuegY6aYHLNiJW%2Bwz8ZAAAgAElEQVR4nOWdi1taZ574xYgpiHITgQMIxRsg4Xq8xFtWDZB4CSYC8WDRmBgviUTQGkJISGni1DSt7U5ik50dJ51MpzvTmex2ukl3Z3Yz2d9utjuMmaRTu%2F%2FP733P4c4BDxHT3%2FP8vn2ePFVRPnzf7%2Fu9vZdTUkJZ2Fw%2BT2NAsQAuGIYGzXIum%2Frv74FwIdA57FLQZD7U%2BdZbGo1mqPNy8MaNoIb3Q4Gx5aqFUChoOKRpHkuVK2Md%2B4OoScP9IZhUC8Krlw8194x19OyrSUpPTc%2FYlStXOi4Lg5rXDmVGw9cOdTR3dNTsq9mXIc37ajrG3uGdxIKi18qkwc5d7ujp6MjkiUtPT8e%2BKyX8awzVa0Niy9HrJ5vHerJ0lK6vjp53SlS3TfzXAyUyYKaOsexxy9JXR82Vkp6rQd7rgOpCg509NTsyEVxX3nnnWki%2B50xsM3Yytzllm9fYO9yT2F5rixuZGGqmDAVljMu%2BHNhbLBEaKhAKYF0puSzcSw8hClzt7KE6eInpMHblnUhw7%2Fw8D9h5B0Wqnp7EjOgZ4165ZN6rsMhDrw4dqslNlTota8Yum5o7iO%2BAmcjuuLFHpiUKhob2H8oN1ZPqVmvGrjEi8blas%2B8dtsm6J8rimsKd%2B%2FenD2Cq3Tfvv9yT8nVPx9FpYU3sGx3N74xhexKqzYH9h%2FYPZWinI5WKceNQ8uuOMczniWM1d1wp2Y%2FtAVQX4%2FIhoKrmVKiek4eSbqJjX4SBDY3FB7FmzPCufQrtIGwLONMrga6iQ%2FGxCBi%2F%2FT2pVDXNpusnk%2BqqUU3cC9d0xLF6eubd9ukggdlTc%2BWdy2jRqQxYJ6AaSnegNWOHjJcTWDU1wSkbmrD4jjHUJ11ndBJYNWPvjLmKPQ3l2GWgqf1DzWlUYNQ6jScT3xvrvK4eSY5h8%2F5Je%2FfweGwMQRZ4w1xcKHYQHYJUhzKocKzOuLI6elbdG8Ke%2BCztqAm7xYq5yFhNB5SxkkPB4jqHLuzkflIqMOdNoUQKMRaxKUY748rq6LD6OMx17C2QRXe8NdQ5FEGLGg3Zhkud%2B8lGELcm7HLMlmrGThq7Z6wwkcdl38lpO4czWWGwBkMoGjQZVEUNhiI0kptqzHT9Spyqc4DjBobUE6vAekJuJtM9OfUjo0HO4xfbt8uxkwRVRzYVmPQB1Vg84LWrf3bx0JVmldkQCaIVFX6PtJRjZ75XbDvHxUzY%2Bv79b5FQ1YxdDRLeoQZQrUun1sZHR47N26Y8QAaZpUwm6%2BZZU%2FGh2MFgZz4qwwQ%2BzWC52t4nHZzy9bGk3d0KKJxSIKzT7wtFRY%2FN3LApN1VNzdhb18ZAOdN50oRix%2B2lYoVCWpomLPGts%2BcMxS7A%2BJiBhKqmoxNMM2DYzZrOkxEU%2B2ByxTfoZpaSCOvI5x9eLXYmw5%2BIGft%2BTSrVUKhjbKzDbELHr097Bt3rdo5YLCaDAljM0x%2FdKLJt8QJxqlTP0Lz%2FRqdJ6DLeW3Hb7WImh8Mh1VOc6%2FQdRnFTd95tUqqTjEdzM9WVTAWHycwHhAuYiBeL6x6SukqJOB1jJltVfX1lWZ96JyLAxFTbP75qKCoVf6IzRtWZSuWcKYNSqd5RUaVMu%2Bfx314sborMT9pVMmuv6TFtVuFYb%2B5MVVraN%2FzjIjeN%2BOE4VWdK3dV8crOqkjIVh2P%2FW1dRa0IuFgvOaYGwuXN6UZeLiqMQlzIVad9iKT66bSgiVjLi7G9OmYSHjlfjutKRQNk9bo56U53mvljMWxNFNC224WqcKnUS1pw7hVNVZlMx7b7Z4cmpDCVyjtwJFTHvU4WG4obVk0IV2silq1KO1D3NWI%2FHQ6aUQFV%2F%2FkkRvYMci%2BtKlTT3mp7gCjEHSc1bbD%2Fuiw0gU%2B2DuYPY1nfkTqCEryqScfHQk%2Fvj5p5S0RvO45MwxxzkrB8bJLCkg3c5QF%2FgX%2FFHE%2BygqUhU%2FOC1OFVzyhAOucioEtGHM2iz4%2FmV4p6nW6oonR1WsG7%2BwoWCcFgU6wLVxFC2rjo60BO6TCoQW%2BK%2Bnmm3DYuBoxIPMk4Ne6YeMXyn%2Bv7uopDN70KLU0VrEobVmdKk6rk2TVAxkx6AyfF44skDZ9j2M6ndPTztQq1OZ5PBVCEcZaBmNGQozkwEhpWIz0lzH%2Bt0VRG6cqvBUBEwzMHpdYVUChIbjtRu%2B8nw5CMGA4vlx1xeF4oZVEUr7E3B%2BBD2pITCMeFKPYzO6za7uFQ66ZaWShWK0k2bb2pqE8iU58G8UGVlMBjJP4QWM3FQYTGqTk0qlemurqqvVOGZBA6J45kdlPZ5po8zjONWpxnI%2FYsMA7dExWCkmBFWzHYRW3g5hqVKiTk9zcYNXdmb3dM%2BBRiwbh%2BDMbLqTF2IMMFET66C661cPp8PEANFhAJ%2FHzuUlWKBHMs6rdO5p477fra%2B7p5zAQtK%2ByUusUDIFsnNFeeAXDIXdQCBvRv3x%2Bw9xY3WdPQc3ajvGz46b5t7tGo2AwtKy6F4qFwk15idqw88w3%2F%2F059%2BeOcXjCK3sLDIULZ37xgLbuo43dOTNgzMLLmRkf6uXSMoKIBsnsF1jlQs5hw5c6uYcRCKIUwyhCBEP9rY8M3OXoM0bI0pLVNhGzYHT%2FXZ7aD%2BgT6DxTp95sPZ4hY6fMblzsxkBirr2rTt8bvkyzQ8l1vMZKYUQKzPfnmuyKtyoVjq19mRrizM3d1tc5L8Atvq4aQHbKCsT4rcnTHfIGs2dIxFNpnM9Rskbqhzel2cRfWLIq9D8wKxbkP6qldHp2tdzPGhWSOjOZoJVco6cutukSchH42lM%2BnLXjVjFZPdTLEvlK4ttnm0T5oJdfq9s5HiQsHsfSgrecd77gP2UqZ4eDS1gOGhF382OJViVkymtPtvPvqEUfT2WryRnNEdrRlDp0CNpVDfM97v4kIRqT495hF3M3xJZTHtfe6fY4yzdy5ai0zFC8Xz5Jp0ZQ0dgzknU%2BGemp4PhwOzxzd9doV0xZYC5Z5%2FYJv0rX985tYTa3E9Ftd0Ld7GSrP3mivjHgjAlIo57sHBQZBsgfzKN59SDTLt7nVQ94hZn5259QtTcbHMl%2BLthn1pVD0np9WECcG%2BGhCm1O6ZdqfOQCb4Zsw33PqkuIu9mkSSlb7M29HjGkybb3bfg8kstxB372fuhIu6RMETXjZnVTqEJ51KfWem%2BvigIkcvspR585dnF4qqrKCVJG%2BAcmg%2Bfby6M11VirLUZ76ZLaqyTMIhMnMHwXB1MJduSMbwl8VdFFAFYlRDGXt3xkwzdipdLEJZ790pap4sN8brr0yqzgnKVKWsm8WNhvyAmVDWoZ6MIewQnqJO9cWZGy5T8UyLj%2B0np%2BrpiUzlNvBMqtKPbt05e6xoKQ0fO0lOVTNm%2BIAyVSnr8zO%2FPHPnerEqQ1Ggc4jUrmBxT3kSAjn92edn7mBF8lryQKzxnjkH9411uPooGxaoK1ig3rlYJJNPeAZN5h6enh7hIPUhhPL5L4u1KmBCD5FFHFxWfYqdUVLU9dmZi8UxLF7c2FU9WVRjqKcwqptFcqVsU6iTPAziVFMFUTGL1U42x1fqM%2F0CblhURxBYOofFkp4%2BGynKFDRgsdXnTpJNdMDaN%2FJTARgOwGGx%2FuFXv%2F71F%2B571mI4dzkauHyIpHaO%2BasOjauPk4%2BJ8%2BZvfvWr3%2FRxvvjtw4fPHv7j%2FO7zUTZXhTLQWLAhg4JedKQ07q9I%2FBbrzV8%2F%2FCcgD3%2F7Tw8ffvm7o0XYMCPHAteDJw%2FFswWy7YY1HcFpwl3B9guTI05fheb8w0NA8%2FCfngGk77%2FCForhEniMa4cOxey8g8TQ98GcAdvA319sH%2FR5fMPudbw%2FRNQWUiaE%2BvLLf%2F7%2B%2B9%2BFUJO5SC494RH2v0XiPvfha9CPq6BuxOubDChHQfXn8fmGCfH87j9%2B9x%2BroYjJrOoqcOhEvJybM0TCeJ%2BPzKnDAdRMnMBXvjiTjDQ5BoRx%2FLxnhmHgifiF14EmoVCY063JA5dVBJWKzKw6xtZmKsugqtyzjCyZq64vmy3YY5pNBn6J9fipNwcf5UzyNa54zTWU7ddrxoTnFxchldSXDTW7oSs7Xmj1wMcebdruRu5W1TMVNwdyRnGV61rMMXQ2pxt8zVgNaluEiwHkVDM63Uyhi0ls6%2BMyqeJvRzw6NZN5BFREuZybBgvGWtudmp4kV82%2BsUPCTQBVFqO6%2FvXXv%2F86laqv9NSTQnuhmnPV9aWcm1dP1DNLWX9zR6gy5Jq4chQzDQ2l%2BwfAtM%2BErVQBKJyKY5%2F%2F%2Bl%2BAfH39X38fp2JxfIVGPLZzBswd1sdnH0Mq6R3GpO%2BsMEeazzcHQifjXJp9Pc01NWM9Q9iTjcrkmjjHPfL7f%2FvDH%2F7l63%2F%2Fw7%2FGddXtE8rlBTkEHrpRhitpDlIpvrHZOR%2FfybkFVmQygghNgA0d6mjuORlmrOh0qTtAmOp3GX%2F8%2Fb%2F9y7%2F%2F%2Bx9i2pr3bPzYGDAWspOh68kiTvUjgup9m5rJOZMn8eEaUCwUiVw2GS5HgkLMiAk3KxdxqLLYCipTYfdN3pu%2F%2B%2BiPT58%2BvX379ldf%2FceXINjUhgtIhzWbi%2BoklRRSsT6%2Fk29XGbvLbEKhBE1mDap64%2BhGTFeJPTwcqaJU7R70%2Ffz%2F%2FOfzL7%2BEGQKIgQ2RAso%2F84pOLU5QMe9Aqo%2Fv7HTygi%2Fi8UTgNRr0jTea%2FmuxMp2qFO%2BhSaUc9Re%2F%2BdVvQaoAVPVsOUQ9IrMNtpUNuxjY1XGQf7BY30yrOawj71Pcgcc2Nb3xxhtWG75Q30eW57GYgOy3D7%2F850i4gHxKjs1tPrCti%2F%2Fmzmw9TnUPIAIqar%2FNC2kA1Rvo4%2FpKUipcayxW6d9dDzAKiTjYSqW42zYJdPWoPqYrQHWH4tZqFfoGLguM6vpKks0yCZ19%2FI2rACjNcWDrTPX8uuK%2FCaqPHqwDqm%2Bo9Z7ZwSaC6o1y48qiOndBz3zvk0LioHVG9yaTaZ93iz87Bqci69ZcH6Silr%2FyMU2M6g2N9bHPLs21K%2FP0RxcLCTnYCZzqwaC4dBhm26ybc24x64tvrlLKFuMDCIWvqbD57OQdWubHdxiRAlKrwAbcKWi%2FNywuJf4e5xSYg6dvXaU0i4XlSSqgOc2n81NuqSKrlGCJwQCaCjgFYDxVCeKEdMaXqJmY0Gud%2BYSKxxMxulKggLDHKozznnWOAt8%2FGhep4qdXx%2FlsjPJiJdtYDaMX89Tkz7pTtqEyP79M5U9oAgmohB74joo117QHrjUTsn7K98QFD6ZqKNdaOBVMP%2B7NT56yJyol6Nyp7K82obxMKiAildNqHXedu%2FjBxYvnxoXtDCdupCKUahwEVLibYa4Pe%2B696xYz43PmFqXzayJGDCvLkrk8jUYFRNMlssY3OJgp7wULgMgKwxdHKrb7pofjWJyPPqHywYL%2BKJqlqgxhX7JMEJ9Qjsq5IiA7swlP6MrqCRKxeHA63qwDhkUhGxIx6NroRMLWc7zoHBIlPCjbFAgYgQTQiCq%2FfQAvWlYWt3Gx75g9NoQ376A7%2B5dLS1qAxSAZwBRRuWiyAWLudBlFbC5XxFMFQVpmZuf%2B2ObpygQV8KJ9cXM%2F8uG5HalULm0jHWAZ8%2B5oNCz1I3QXYQ%2BmYPy7PJA7mnJW0fz5al1ZsvUrTZj7hxM7TUIuGpXQgWgt43lyFBFKpyGIRYhjiQIpbrDLgKKqHFzBEyCRJAtc53aiUq3hUHQ60riWe8W2aw1BIBbWCcnlgdSzSzwV4CL9TTPM2LK2ewLXsBOVCLUQUAIEEWzlciTca1EaQgNYEmPQPMbToIy0uc3XCFGS2Ma2MjYqy7K69xSoVFsCLbSrRvieNMsx8qSua0AAoMBLaLKo32gcCWQ6HK4Zy%2Fb57OvnN0AhR0J1MScVm89TmdBAu98fpUvoWvCeyt5%2B7VaoK9u6REYLZKLJepW9tH4E%2BZ8%2FBbNewzUYDRnD2HW8rJKM6siH13NRyc2oEF04YDabyxfQ9igwZhnQhQyx%2BE3yjL8uwqI0pYwmU8oQmbIXKE3ZNk7iB%2BUoqkn7rnUTVk0kVHdukBuwyPzpgjkRlHkaE2YR0ACWktavfeEypU4qtuZGFAGjq5RJotEo4KbR%2BtveHifJRtgq1JBqmCDiwOokk4p5833ydEgDPtYbqZkCm2e6QEcI20EElrWrJhWPywbCMwcDFvwHMm27SXM1SrwEYJFNDJ4pJXbL7%2BI1U9YREebnZ0lTGbOxPI2JUAnDQhPA9wRjhNCjoxPnbgCZGH0hwL%2BN0KLXYB4g6ccn4%2F%2F82UX6eVXJit86hZe92e7q1g2SPJuNYvLU5DPxQSeitF7cqgFCP03Q%2BO23wIvBL%2FBv9eNx8C4dUtGQ3iVj9llsthwNjAdik5E3TlS9WWYFBjDb2PloSpqeZnXyCQktJkpESZNBoSHAzokJKAmrRCY%2F%2FqWMFn3JfpkZY%2BVBrAl8XpQYH4MNPyGSaVYs9S2SDFmEWnNAwZHtR2S0BBkUWvJLGd2%2FtqTFX9CLRJdb2JG0zywyM4RE%2BWYm3oc49VCfSfX5%2B9mejR9cyDKp5AhcispSODJEhggaZcSMALqKtLbwgyl9jK6K8xvncHNdwKlU04tk%2FQHo2LNUxTXlgQJjwNAqZbmxZP1KJGZ4dFdtaws3GPembEP4hK5y4yIYB7mwC1fVCR3ZUQxgVWjW%2B5oxXq7hwyUQ7UdyUqVJ1BgOq1pWifYtXzgNcvSyysXHn7LL8TalivzgEav0zI2soNYV6MoLVWLeoghFownoDAebHYIOUc5YqYQMlfVHfs7Ad5jzJwiryhrAI7eOZloVP6DKD1UiGmhEduDqJ7QJxnJ0ua6lBTXxVRc36iFTXz1T%2FN77N2CaZiYOrVRlpjFwADPeMtnlyJmjc1305CyUIWQ21kgn%2FIeMthTR15WIQugTIrKoYWVc%2Bt6dTwxs%2FuyGjlRV6o%2BybN2M5bN0AhzFswNEhodq8M4ZilPSoqPYmgV%2BW6bULr3cdhhW13DH1EesJoL3vXU2Yj2Pu%2FVsVR358FGmk8N2MCpIZQCBTgA8uxL%2BQ5cg%2FWmuAvisGzy%2B3CiA35UhysPto35J258AQ%2BKYJuv0mV%2BeZVSRnxtj3byckQNxg84doYA%2BoyApkERBpEG2jt2%2BzcBzmIQg%2FS%2FgXw1ZiLADA1O%2FrK1t6XzKyiZsuqwQjd%2FMwAwy9qsZ%2BWJqPygnFMhNEVk0%2FPJlwDISqa3T14a2Uo0LodGvctm8QGM8OApARKIdbFvziBMATLFnrhKHIsusMvYn8oSqnYwKimZLFg1BnEikta6hQa8PRVPDDjDxT%2FaHo%2BnGhgCs5L47jnu%2BOrsZTQDfPJuRLUaSTj1fKq%2FZog946xpa6%2Boa4H%2BtekcU6U2hUiIWMLzpYQkRtL39YD3WpGLabTOxlZcsVTE%2FupQ%2BgLwU%2F5mvGtVE6QNARUBJrXpcIlFaqn%2BQATtX0jI8BiJr%2B3N8DJl9m0QG05d17o91%2Bk5GYEYXqFgV1BWyFmHX6fVerH18Wd9au9bY30vbSQQH315LKEvcl%2BNAMOvmtfRoowpQg4LW3n%2BhQl%2FnNX7%2FfPuoo27ZL9EiO2PR2g7PJPZHMdWVlX3ZmyFYzFtYWhLKRsvZVMavhA08Aw0ZwGqdXzU8e%2FZ9uGUZCwHjzp3exMew7e12e9KqmWQn31lHMtIF1c5ePUZlAkUy3b%2Ftvf%2F9s788e367Re%2F1eu%2FSM118tsjaoqd22HnHei%2BcVkWI0AMUHCihVAsN5AJ6%2FfbtZ8%2BefXcfGJi%2B7tKLHdMbUPUctnXnhzp9y5Vm6yn92PyqKuFih2l%2BR52%2Boa7iq%2B%2B%2BCnn10GW9pJJ0tb1tzL%2FxjnXzbPqyEtf0KTVVlXBH6N%2B6WoCCGuocFQ7oGYDnClMawd4Bst0%2BSSjxrWOZmZXBKKcwAYFbu6Cl3wam5K311rXgHquuwWHs31FTcAj9WUdR0qiO%2FCiU9XbYdTMVKrOfhlj87a61AQYYuzrHqtOx7aIygMCR%2Bk%2Flo2J%2Bnn3%2BiHd944mVtyNUSRB6AW1jozbKACZV52BYXkTpO2sKUCnb%2FO48VKzTPwplWY9hU1d9PtdOghQJWPplMqS%2Fv9%2FyqM6r19caachOGXOMipafivkZSXNBuKFb1K2M7HiggCGBWSjIo%2BgMfUtry%2FaFfmRHDxqnupBv5x3zv7OvkOw6VwZSnvq%2BOaMj7yTUDMQVgyw92o6cGyHN3EmpDvYO5B3AzBwGiGEGT%2B4rdRvTIU2e1SHTVj%2BhGplMFl2KRgV5Sul0kbV9ezePF2X%2BVJjVh%2BFaieqsTCdWD0%2BjuQ9P30ikLTJlP0jMSQIgufKAY%2FjTJjOnwwKqyt4uIL8R26pQyeSI10%2FdW3WSr2aKJgSJdwVIMhI7z1Hwg%2BzdX63ry3VxCOun49nvqIolYnjbhsOxuyddFQ6SjFTF2MkzKWUScqy2b7%2BGndk3SdXFUvw8e%2BMW13SC2AET63AxxQq177gRNWdamCnaL8gPRZO0S0jUJTj4P9GNHMk6pPpiJNtoeFdjv1GV%2FA0FALs366pQwb2DsSHnX23cwbqR%2FhGyXpJA1naYKOHxjlXm9lem9F2S7R7y6WpdYgATwlFI7cOeybnwqsms6ZLLeaLOQIbHJEp6JOEekP6lNZksS1XAqL6dq45DwXFUpyV94kGy1STVTFXsU6SsSeMvhztzfjI1EI3618ZR9Fw0zWXKlEpY1ANXryQGDUEs7QJEkGF6CCi8%2Fsx4vFFZWZXg6ntTXZpcR1fbSHrGbNNK7HOk8KvF0riNTb2AbTwBnS7Rps17RCZrfBEFYpHBFp8S6besSWggGmWo6uDbSyG54eJmta4qyQUyd7VaXV9fr%2B57cwUlURX3KtEgSaWSbjxwx7ZSvDlPpwmAZJgL%2BNLy14F3PR7P5rG%2FWgA2rX9pVEKjR7cs6ao6vDRq4JawedajM4u65DACK64kpJr0ZAz%2FcWzM%2B1KtyjNrW5dymKXS4ZEs64VvRkP804NS%2FKK3bvccqHwkI0sCmuTopUiI0QiYicFG1hhGNDa%2FeOjsymJZZSoYVFrVPGlSIH8cH%2B3UiaFQe%2Ban1sVi6ZSFxEkhtMZHvsQtZgr7dPRPftgf8m%2B3tLZu%2B5USiQB3qIikt%2B3PcaySLuu5qWpdJdAYMZRVVeD%2F55ykKYF5U5eYsqnakq57jnvW16e12WkBQqNPDIo5zDgX89QAUBSdTmd49d7WhkdPw2EjcBEAqx%2FY%2Bp8SFTG7yxnaPFENAq4Ojp1OV7bx2EneQDCt6MivtxIz3Z57766lTP0ElMT%2FwLM5OeVbJ4yPeSqKCJbWwuGwF1Q9DcvLtbW1X%2BNlIpgGACvZ4WbLVcEnmysb1YuLi9UbJzbP5Vo2Rk%2FkoMK5pgZeaGnp2uqlSf56d9I3OOh5d95j7waGZbdZ%2BtdeNjQ0eBvqar14C6KudoTwXEh%2FW9vStZT35vNUwXNzx4FcDKpyPlMA28hJBZyKWL058ALM%2B97E5JPRXhzz2aVS8DNp373ZySnP1N0lpJEBWyJ6fYXRuKrH%2ByMMLeHmQb7QtpbeQGCz%2BSKRiJtnV0HJRHVuKgjWvT55N6qlxRr8wHf%2F1Za8w0nhG3jx4gUdjOnR1lZYX%2Fzx%2BbPvVsEwAptPDLgSYBV6XG82Hgxy5RlMqdvzwKKFq%2FAwyvinpIpE605st0lgTEGQAYe%2BTt%2BCff%2Fs2XNjq967vdaYkn21vZ2d1e1AtbgDFXhvjttz%2BwWd1g8cevTBsM83WJpoGngsNAFcQaU%2FWgYWFfnu2bPvA60NFQytMulQwEQ8XOA9jBSooN2v%2ByaidBBVGLNzk7Z5G3D9CikH%2BI8poteNIJK1bb3eG%2F7uH43LQFerlpSCGpqWv7C7LWZPVZL5q0wB2aBv4q%2BWCw8G7VK72nNsyjZ1Sl2q9hkbZS%2B2gB6Rfv82MC3vthN2H%2BpOtqflYrK2twu7h3E2bu19eanwQ%2F2DjEk7fu%2BItO%2FYMdv8saMjW43I1r0Nz%2BxhmhbDmyF10GO16iNpFTWCO9NCqAJxz7DzfXyK4cQNH1L7PZ9ikAGmwNZmt6J78BHSGK4FVA2ACqDVhtOzVjgPs%2FZe5JOEFwVJQ34scR8j2RqTrh%2F%2FidtI00Yn4fAybY39a45WqCxvZHvZMW5RpkdPBOSjhVyDb5rRJbKxvFgc8TR%2BPUMs82KuePoYlqUpfBOcerqRJhmPeOtavSGQJEbpWVFKdrBtvABlyecWE9lFZT4sqW9WDA93ue3E%2FXe%2BGc7kk0H8qLh0cLQfzMKl8MtLYbjTQpbdfQDz8FtKmxsJ4Z47kVBWPm2J7Q9OwU6BYvLBT7rFTM7Ppjc4UinuTzn2SQt8337BYQsdRKfMLJmQg73jBbhS8%2FmksuAyXq4B9NkIl97tY9hO9fXZJu3xFrrU8wIhtlrkrFPhUlnb4QLuyhOhK6kZInklCUeuL%2FZ%2FCvf87IPjU4lLLDi%2BLW1MO8o8q%2BXIwbfHCziC0nUjowIh5xLHOz1MsW96vS9%2BHx1H7PurNrveyhIlonz7QgFBmq05N7OoSy1A6vPfTytef5BUlNh3QUuhN6OUIVFhYff38dDjJ3RJm9%2BJi8mZ9MSSGbHYM4BQaxj5X7bwXIUd4usSzm30pVYglWrSg6eESKcmiYO8YPZtkTWMSFRFD%2BvrWtAC759imwZub4CKLXU65jJ8YPl4k5PDdM9GKUGB4G0J6evYZmGhVFHL1vWV6sVEYUQYfinpUOKWzxFvDFiodWtBDqu93lDXwjMWdgs3TyjRNlqio%2BdPVOt0CdOvApV3DhNjStVTfglFKKistZN1rSXhwlLlLj%2B%2BXVVi8c9tnljU1Sc0BsFKs5fOONLhaYqjB0Up6x9Y1ddpRgo7jWleIjbRSiSS6MCjxyeq63WJtkBVZSXUWCqYYv3eAJ2Wv8mWLn4ApQ9fKsg3cINRely0AGzrgnFzYxHYvi7hYIkbrZl4PWb3XIgiOy8qpYyf5WiLvrXW2FDQo5lEwiQVbAppG%2BnRLf9%2FzcAqtwxW37EOST3Io%2B1PNhIAABBASURBVNXrnqcvGknygjwDSIuGWrx1y09bQoUYlmjtW3qawH2EgCy6dt02s7JxCm8OACkDhfgUBne15ol42SLrB1RgBF21kUJOgsWMPY1KCUtAAR2gPZ34r%2FMzMysnVlZmzs8vWSSyQkYPH0GEboSZsyOAFXLHrtnfmEUFG%2BqIAFi0wL%2FsXXbeX2X4oxa6tl%2BmLAyJkAEHvtzpKOQaAkM0naoxrUKJGmvB5wwvwe6iUtD7Ckwg4hx1wPKHhxZg7rEt%2F0mqlL8Igm%2F0wsCA3wIURyFlIReE9q3%2F6A1vq4hsq3suEUa1aVTa1L8IsLR0QdYesAKxECXd76gTvSxgEo7SJbmpaDJg%2BTKydZuCsGhgIra2OKinDdyBvFS5NvEVKoLR7WYD9RPR8guN6da%2BS72Qi1ImGb3NoF5%2FqbbS%2FcLeUMECqO1t6q7B4Ne%2BDirgVg6%2BLaTsGkwZU5BeSDZQiPQf7F2lTIW%2BLipEtguqxr2iosnalijX9Zglg6p376iilKkCh3MHnGJTLVE%2BIxrIcKKSnf%2F8K1NFqZ9cfY1Uf6IaCLlGSeNroqIdPEw1EPJG6K%2BNqo06lbHxdVEhbYephmf5aLoP%2Ff%2BOqn8XVJnp1f8bVHsWcAqh0rTvNjjDyodSMf06qZSyfq0WQXppMlnWhowMeX1USqXEHw67LDIEgdVZ3v7R66OS0QMOb%2B1QaElGX2p3LdFzrwW8RiqlbGm7Fe4WmFhadXi9ywFLjv19r5UK0fprG%2BD27eVVuHugoXm0Mafhg5yB6qVBmvbGXelKsLWsx7H0Dfjm8kg0D9VhqlS781fAxKPbdXC1WQ%2FZANV2NOeLoa6oQe2OSoZoo65IKzx4UutthVStLy25X009v9oNlVKpXYsse%2BtagVWFV5chVsNo7noSUFHNRbMymQKokP6lSw36uga9N%2Fyfz%2F%2FX5dXrW%2FIMYCEZ8m6oaDQjbuoNy9%2F95eGzr7bhxh1LTj%2FaX4Cu%2BBkZckHlIHKslqD66vkz71MHoIpg0VxHh%2FoLqLx2SeUl3ELku%2B2v7sNpWFf70pKjBddfQJXKz8jbC6FC%2Bo2OVmDr%2BgavI7Ksx6laHUsy8j8hONhLmUqUYVeFUClp0XMAxusF7gp4B%2FzgUGskl64EBXQ%2FMq29oBHsReCR6zA8MwTcQu2yvq7F4SLfPLA7qsLmIMiqQI17vQG3eQcjgIYG6LmShkL6V7ujovXCmzeuN9QBqNbltWjUkvvXX5%2BuaLA%2FrL3uxakcUWD%2FudMrQQEdyF1TwZm4DOZha62QjmRtMP3BqOBS27K31pB5gPeHpQIz0XLs%2BrG1nc5XvWYqmgA%2FDL7ThgtAZaXab%2BcZ6bumwndD73jAClBRXgUAVBLJYYsEX9vVavewdgZUlB8xBKiiay7XkoUOjxwcluwp1TWqVPLRaNixvBwZufB09VLIuCTZSyrKmw55o6Pb8GDnsqMW%2FhtaK8YCVy4q6iM4uhbx1kJZXq4Fbgfbs8624CC9AKro6nJtUi69KGhbx15RGaOMbUDjJRRWGzq8u9XcIlExXC%2BBrrzb21BjXsftPev1FaYrXEWuo09dy7Xe2nB07%2BbgwW8pU8kDYOi8q989fPiPE15vaGsvPcO3lNedcarawPfPn%2F%2FvUa932xUV5Gn17EJAGtZLuVEEqKA5vfzq%2BfPvQsBhOa7nLjN3RxX1j1O%2FtRynql1e%2FeNt6CAA1jHtXkxCyVpkWe6kTKXBcJfgXV7GfQMwrZ3vXChYEGTJodezHdSpgK5SvOhy7cut4lPRJOFavb6lACrGwAjuRmtBJAS6qp2g7wVVyFsQlaqdbvHjDnTZuO2tXQ75iz8HZQjidxRGtSagtxNUrqMVkfBSY9GpEKWsMXrbW1cAldmvlfgdwJ68Dhd9aelw8VeXEEQbXVvdbtCzVZS30BnWtPRoCOZW24BPIin6ShyCNF546YU9%2BRaUcsQxLGnpEv%2FTbUfkGFFNFH19ENnaboGd72XG08x7RnMK3CYjoUf9fn9sX0ORqZD%2BxlHY2NIvH%2FUuU9YVvnlHom2UNEr2RFdIP90Fr3vRC7%2Bv26ZMdY3YJpOsCYtMJZNpB2rhugX2vMFBmSr4ImMdp9h2JaMtbcPtoq6CqDI3OhV%2FBEccsEE5%2Fv32baoLJuxLGVuK6NpCnChCo%2B2YYUS3W1q9zjCGUb7fHV7VlLELuZFieoVvahXAX8j%2FMRDLy4blS6YufgGbkPkYPZOKUooMb%2FaFR7JDkZdPD%2Bd%2FpWDtZfazvXeQ4Bb9FZYtgT61IDv0gzjSsGwU5BlFJYjMhT%2BcjY0OROlaQhqpUgEtrY0M%2BKNGeBa8BbUczLXa3CugCbZe6Ylx5pBxbW1raWkpepjeKJE0Ir07WRbw1wPbeq8j%2FLIFeKKW4JZAS1ZwK2Hn3TL6qk%2BgFqkMBoMpiKIYtha1SBD8vsQ8VL3ateWWhobWhlp8UXc7HLq9pCU2WvT29iqVAAeBV%2FUgjdHxzOsdCxcuT2M2BceXLCCdyXdjkzK6ip9D1UM%2FBJcHG2ojazK4iRruakAEAq1W0Eg%2FHF0SXiO%2Fvv0V0OQqU2jtBX56ghxMiVi29fAqyFbv9rYDP9nf2nIp2mixWKIvotGtrS0Q659e3DxuynmvwKsIW3VuJbBlgfkf2aKMjGZ52QrvGdjGvv7qj%2BNwsWvZOc5wzW3OnNjApbp6sWqx6sdFewwvIV3nKnUbttEt%2FGBH9rEEkMcBlNblR8%2BfPXv2%2Fe3a7TXj3Eq1rk%2BnK6tMyGLVk6JTlS3qdIsrc7PRRqQfaIyY%2BIn7k2R0hrdBX%2FG%2Fz%2F7yl788%2Bx1j%2BoSuXgdPFCWPR8LLq4pNJcfKKsuqquorq1dsd5csEgEig7dtKHEiICBnqmutq%2Fjy2W%2Bf%2F%2FNXtg14jigViKBa3BMqKDpd1caJmem1pSgIRfjkB%2FNeBq%2F4bmmorfjd999h0xtVuiwiguqDIj2EN4sK3pOPH1o6Yft6zb8VjVpwifpdkdBqGDVorCu6SlIoQPWLIlPxwlUpB47hbStlukrItrJ5%2Fvz5zcfGoMGsEYlAGmBYqSRl2huqssw3IyaWrh6IruqTeA6QvOmIhOpJsamwKvI3w29YXqy%2BQYkq%2B8rC3YlIWJ3rzeD7VV%2BKr9SyIzmpdIs3iq0rylTBlPsBMl71ObXnYFGXnXSFplKRTsG%2BN1m3LhWage6OaiNJhZJSVdbDG3ILzosLoFLDuVdVRdz2VYlfqFWdvKopSVWFSyW8CoyJ34x%2Bq5CDeVSEm0KFHy1%2BU61W9wFRw0PjHHficdLsqwkqNS718Ut8WaXf7CUVfpdEypPOwBeDifVj9o04VWXix4Sw1HtPlX40%2FFTiOYHsG%2FHLX7KeaXGa4nP7ikY1mLh5iHsuJxXVpwm%2BElUfyTn6DWfihXmpipSzF051MU6ly3omApUnhhWRiuMjocp6KslNqk%2F0LBKV1JM45M09Hr%2BAKeM1LNbnPyxVGTnVmR8V%2BhzqAqhIHkcqnUp0xwBV9k2SOFXpmbM%2FGBVvLheV%2BszZgh8kTp2K5GYs6Y8TVKLjizmovsj3XOQ9oUqWVLw4VVUm1WdnflHgVS27pUqWVPK5quxbN3Gqm2duFLkczE%2FFZCYTcvlcGSkVS%2FzemWInyDtQqZMPPNCQU3EU9h%2BdZQhRU7EaRbiI8lMlN6OqzldmuzWOdH1ypH3cumC1YiOYmcLTN4tBtS5MbIQzx6l0yZ%2BL7Z4B4cIBh6PcrFI5nCiW60HzxaVyJ54Ex0M342EwCbU%2BOX7f2XSgqckJ%2F3VaXQxhcYqdJNViNpXUzYit1LKDjPOxK4QSL%2BO4p4VOZ3lT%2BQEn4BK2uz44%2B%2F77WAEP785HVVZPiC6TqbS0e2ogVr2YR4PG2GNc4lScvtmKcmd5OYAyNAkH5gbVdvtHZz6cKIbv4gs3Zh7PHT8%2Bt3liHV5ymqaq9REriiuLi6IL1nZbFeSKUXHsRyuaIBSgWmVMqhUKJhOkD2dufbB7bYkMgfb2cSjt7QNPfHZx8gJ9Jkd9XGhewJNfFbZQUWEVHjuhiz%2FPkyOeE%2BJQTU1N7ZNuKfw9pphpv3nrzqPd%2BlQeGgBKwGXB6awYvwi4YupiitfvCQ80lcMHhrFN44CqYgEd3dzQEfqUTrVDEy8HNn7bQzzOW8x0D05dDIQx4%2B5mogjFFhZwqooKfCLdH7fFHoIgLfV9UAE0cUAIhlCEouAVQFvB8eszg2qFuFQ6OGICUMDOK64Pc8TE1Ji6OG6973SqFrKf31CIoJh1ASoBeEEA1dRUDt7krk8BrwQftAWsTXB8UJRdIocDiMtChXBi2uPmrD%2BwgskHfr5wm3g6slTsmRfebzoAPppK8%2Blucoigcbx9BApjZGDV2YT7nCbryHC31G1jVAAi8K7OhQC7pCsQp6qwOpsWxo%2FO3x13Og9AUw8MK%2BCQStcfrMG%2FAL4DlOVwvbrbMjBmz69sLEJXteF7d3Yc%2Fk3oC0c8tgGh09HUBN%2F2QJNRRBh7TFng247y%2BxXlBw6AyecI3%2FWcstulnMHrVkc5wXnAWV5bUcDzztNFHlqBl6vBHkdZvULh9ty1lkN1OazjcMoTbwGp5CXmOJUVjuoBJ3hRE%2F7DA07rartrzue7bQW6I34D%2FIrDjL1iFsE1Qa8Y6xy8CQ3DPY%2BCQTtAzPby%2BFs4XZoSw7g1oSrIUk44KijAGq3W1fEFQ%2BxT4FRNtdYC7vNMFc2TxcUqojNLpAHAFcyiB4hRa0q%2BhdOlAo4hpqoKE66q8vLEz5twAzfgpp%2F8HaCsV%2Bpoca0zZbp6XVV19alFnbgbd54c9YjVmfrnk1RxXZWXowtNibFKkDkzv6FaKOReroSAkqVqw3aXAZ%2F%2BbZyfckvFTKZ0Y9TaREJVomGghGEBVzvOWHA4neX5xakqD7zKEJoebxrbx4ULUO5XjK898qlBsmR1NqV%2FamBBxi64UdG1YCWoMGwEhdrAjY8AxyXlg8DpqRK%2BQpRmG41C1BqLNcDPgGjzwbvY%2FSRUU9MC7kWdKN7Z4JkwDH6EpvJPKyqMAdQKzcmJz4kmQlKGD4hTc7%2FAyyChyBlEnIEWvICnSM4K1JSEAgZvRME7N1kxwiGyuwxoIIChqNEVCKDBMIZaISMIOk0GGBYSkzZG1WRlFD6EhkDcfisqcONtgi4qCeVsQhkocNMLrkQCwBbJVSYripo0PBGfpzGhGLBIF%2FbppyiIWAsLppixgWiwgAqxgPAVEhpUmKBaSNhDiok77jMw1FmOGtOzEvhc5fjzjblcrkiuMRtMKFCi0chICBhgk0r0CgGabUStcRd0P8O%2B4RRqMjHQELoQKKALC3BFUF7Ne%2BIiNy4kqJqyoICRBIzj4CMXu1DfQVTGlCQgXVfAfMFEM6nMKs0uPvYriTmQkgSkUYGkwbmAverWkt2J6dOkrjKYmsqt1DenF1ciydTkfpqZHyhfwLAiL6tRluB4nAo4hgOEhR%2BAHmtBiBW7m0hd0E9jnh26KzxcQA%2B6gI6nP0z%2BNYvBOB6vuGBtA7zyQhD9FDPle%2FrY3gtfbsKMMKqBkspptaKfgtgGIskPMvNShc3lmYMwUhiBtwwaurjc1z%2Fv%2Fi9r%2FUE9vXzFJQAAAABJRU5ErkJggg%3D%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'876'%20y%3D'-180.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fjpeg%3Bbase64%2C%2F9j%2F4AAQSkZJRgABAQAAAQABAAD%2F2wCEAAkGBxMTEhMSExMVFhUWFxYXGBgYGRgfGBkeHxgbHh0hGBgfHSggIBonIBgbITEhJTUrLi4uGx8zODMsNygtLisBCgoKDg0OGxAQGzAmICUyNTI2KzItLys1Ly0vLS01LS8tNTUtLTAvLS8tLy0tLzUvLystKy03NSsvLS0tLS8tLf%2FAABEIARwAsgMBIgACEQEDEQH%2FxAAcAAEAAgMBAQEAAAAAAAAAAAAABAUDBgcCAQj%2FxABGEAACAQMCAwUEBwUFBgcBAAABAgMABBESIQUxQQYTUWFxByIygRQjQlJikaEzcoKSsUNTc7LBJIOTosLTFTR0o%2BHi8Bb%2FxAAbAQEAAgMBAQAAAAAAAAAAAAAAAwQBAgUGB%2F%2FEADERAAIBAwMCBAUDBAMAAAAAAAABAgMEERIhMQVBE1FhgSJxkbHwMqHBI9Hh8QYUFf%2FaAAwDAQACEQMRAD8A7jSlKAUpSgFKUoBWs9re0E1tJAsMSSBlld1OQ7BNG0ZzgMdZPvbHAG2cjZq0rtZJqvYQDkJbyEjwLyIBn17tvyNVL6u6FvKpHlElGCnNRZV8e4473P0q2dikNtBKigsFkDtIzqyZxlkUDcZU4PSugi9j7sTF1WMqG1MQBgjIJJ25VzfhnC1h73DM3eOznUdlB5Ko6KN9vM1XvF3EEC3EqSvGI4Ie9IWFCBpUhScDABZnOWIBweQrj2%2FWoyqTWG8taV7YfyWS1O1aivTlnVOGcUguFLwTRyqGKlo2VgDgHBIPPBB%2BYqZWudkrmyRBb29zFLIcu5DqXkY%2FE5APkBgbKAANgK2OvRReUUmKUpWTApSlAKUpQClKUApSlAKUpQClKUApSlAKqu0HG1tkGxeRyVijHNz1yfsoObMeQ8SQDRdqO2aRyrawT26y4LO7spCb4ChNQzId9iRgDrkVSRxTNO88syyllCj3NJUDGAhDEBScsdsknnsBXL6h1OnaxcV%2BvGy3LFG3lUeexlu43nOq5cyE%2FYBZYV8lTO%2F7zZPpyGK14VBG2qOGNGxjKqAcetfZHn1ELHHgctUjZb5BDj8zXy3viW0SIY3PLcFWxz0OOo8CAeZxjevG1q1zVzKc289s%2FwAZOnGMI7JEyoNzeDvBAqF53I7pDsH8SG3AVdyx5gDkcjM6ovEY2064ziWI95E3g4BwD%2BFhlSOoY1Fa%2BF4sfF%2FTnc2qatL08m1cF7MLGyTTOZZ1yVO4jjJBB7pOQ2JGo5bBO%2BDithqJwm%2FWeCKdPhljSQejKD%2FrUuvpFOnGnFRgsJHDlJt5YpSlbmBSlKAUpSgFKUoBSlKAUpSgFKUoBWk9se0RkSW0tUeR8hJJFYIiDI7xRITnvNOV9wHSTuQRWx8Y4oYtEcSd5PJq7tM4XAxqaR8HTGuRk4J3AAJOK13hXYNlRRNeTMRn3YtEaZJyd9JkJyTklt%2BeKr3KrOGKOM%2Bbz%2FBvDRn4igskYBY2tY0TGPcdGVRjqpVfTbNSLl0jQJofBBVVjVthjoV2TyJI8qn8f4K1sY%2Fo80sskjBUt5NLa8bsVkChk0jcu5ZdgMZYVJg7I3LjM12Iifs28anT5GSUNq9dK%2BleVl0O6dTG2PPLxn3y8nRV3Twai0dqDl7ORT98wszD1dNTD1NWnDYxpysvexnBQk6ivQjvM5Yeu433PS5uuyl1GMw3CzY5pMiqzeksYAU%2BqH5VV2dwHDDSUdWKyRsAHRuZDAbZ3BBGQQQQSDVa%2Fs7i3h8a2885X7rKN6NWE3t%2FYcQue6iklxnQjPjxwCf9KrJpJoIWY%2B8kds7Mc5Z5AudhjbfV16rgbVb3EasjK%2FwspDZ5YIwf0rXbiaaSz7sK2prMvrIIGsICu%2FLJPMcx5jlVtYppbd98%2BX%2BNySo8HWeBWIgtoIB%2FZxRpt%2BFQP9KnVgsrgSRxyDk6Kw9CAf8AWs9fRTiClKUApSlAKUpQClKUApSlAKUpQCqqfjJ1skELzlDhypRUU%2Fd1Owy3kucdcVa1odlxEwWvcFtL2%2FefSF1Kjn3nYys5ye6fdtSBmJbGxBoDItxczS8RaBO4vBHAkK3AGFQAsSNJZSpdpBqGRlRnlW1W9wYoIzdSRK4VRI2dMZfHvadR5ZziucIJ7ru57hmhIjKpFA7rpRipIklB1uxKqTuAPDmT5uezdtJjvIzIRyLySsR6FmJBriVuvW1ObisvHdcfctxs6jWeDZU45bJxG4klnj2gt0hGQSVYys5jAyTllGcf3a%2BFbFa8agkDmOQOUGplX4wMdU%2BIZ6ZFck4HcfQXlvIYQ0hknimhGFDIrHQdZ2QqiK2o7MHPMlcX9x2g%2BkRd%2Bk8SzxyIIWZdMut5EQJ3BIcW7asHWSWzqGnCmulbXUK8cx58vzt6kFSm4Pc3Hsf2lj4hbi5jjkjUsy6ZAA2VPkSCPMeY6VRdr4tN9buv9rBKsg8e7aMoT6d44%2FiqRxPiLQD67iSBjyjhgQux%2FBGWdjWrC2uZ5DcT3EqsRoRNMGUjznDYQrrJ3OnbYDJxmqfV69KFtKE2sy4%2FPQktoSc012LG7uljGWzucAAEsx8FUbk1WcS400cUjNbTqAjYJEZGcHGrS5KjzIwOpFZ7HhzrM8kkrygKqx69GVzkvgKqjfCj5V94OWkUTuxy4JCZ9xBnZSvVxjcnrkDArxsY04bv4sY8%2B%2FZfzk6jy9uDo%2FBrfu7eGPIbRFGuRyOFAyPI4qZWs%2Bzxj9E0ZysU08UfkiysFUeS%2FB%2FDWzV9FhNTipLucRrDwKUpWxgUpSgFKUoBSlKAUpSgFKUoCqv%2B0lnC5jluYUcYyrOoYZ5ZXORWqdteM2t5bSwQx9%2FI6MiSGMiOMsMB%2B9Zcbc%2Fcydqp7lDZPKlz9WGllkE7Z7qUPIzAmXkrgMFKsQfd2yMVjl47bKUBni9%2FZTrXB%2BecD586p1LicW0okiivMQdoAqhZ45Y5APeCxSOhI6o6KQVPTkfECvN3xGeZStshTI%2FazAqB%2B5GRqLfvAAefKrIeIrBFextI0QYd4mMrybBGQQOo8x5iuFHptup68N%2Bmdvz5lt3E8YKu%2B4fcOdSlEfSFLK7e8By7wMjI%2FqVyKwJa4cSXsMk5UECQmOVEBxnESohGccwpPpVvxHiKQaTLlVY41YJUHIwDjcZzttjz5V4HE4n91C0hO2mJJHb8kUkfpirP%2FVjKOFH3XP1NPFaeWS7RraNQ0XcorDIK6FDDxyMZqarAjIII8Ry%2FOqq27KvpGnh0MQJwBM0Ksx9FD7nz3qFLwswS92sX0O4ILoBpMUoGNRKodLjJAOQrjIIxXPrdDnhy1P3X33Jo3a4wbHVXFbSAiJXCyXVwQpG6xAqSxUEbkLGzbjBdvCvUHEXki1pGDIjaZIi2CCPiCtyzghlJwCCOWciJLHLcyRMY5bYQsZFctH3neaSqaAjMMDUSdWx5YIJrmW0PCq%2F1saU91tnb05%2BhYm9Ufh57HVOGWCQRJDGMIihRk5PqSdyxO5J5kmpVUHZnjzTF4JgFnjCsSudEiEkB0zuNwQV30nG5BBN%2FX0CnUjUipweUzjSTTwxSlK3MClKUApSlAKUpQClKUApSlAfCKxi2TBGhcHmMDf1rLSgNY4n2BsJUdRAsRbJ1w%2B4wPjge6fRgQfCoH%2F8AJSLELb6LwyWIElS0JTB8TEAwLY5kFc%2BVbtSgNEtez5sNMiwcLLgY75gbZht0OmXz5FfStK7Xe0DicUUN9E8Kxtle5VSyYYZVmckFz7pwcKNxsedW76pZrhpwpuVklXDjPdrqIjCKeUZQIcrjVuTvVJ2j7Mz3iCOS5RUVtQCREZOMDJMh2GT4VUlcYnp4SJFDY5n2g7a399IjzTuShzGqe6qHxVVx734ufnUC04hcLOtxmR5IyCSxYnA5hicnBGR8636z9n80Ge7eKQnqdSMPIbMP6VmTstOcq4SKM51vrBwOpAA5%2BuKxO6WcJZXzOhQs7aVLXUrYlv8ADpft6bm22k2LpCvw3EBY%2FvIVKn10yEfwirHi%2BsQu0bYdAXXlgld9LbfC2MH1yNxVVYYkk%2BkL7sEMTJEx5PnBZwPuAIAD1948sE1U%2FakXMKW0Z0TTRfWu4KpCDHlzuQSegxtvzry9xbSuLvNJZxhP0%2Bft%2FYzSlpp4l7G1dj%2BOwm6%2BkSFoo3iSKB5FKq5Z9TZY%2FDkiNV16dWDjORXTa4%2FBxD4YriOMI%2F1aOh1wPnYK2R7pPIK2QeQJO1bn7OeJCSGaESB%2Fo8zxKCcuqADAbO5AbWoPgoHMGvV21ONKmqUVsipcQ3155NtpSlWSqKUpQClKUApUGbjNsp0tcQq3gZEB%2FImpkbhgCCCDuCNwfQ0B6pSlAKUpQClKUAry7gAkkAAZJPIDzNV%2FHuNxWqB5MlmOmONd3kbwUfqScADckCtEvnluzquiCv2bdSe5X9%2F%2B8bzbbwA5nWUlElp0pVHsYvaDxq1uJbZEUzohkeSWGN3IIGlEEiL8JLMxwf7MA86o%2BHcR0sYofrFJZljkLRzoM5ICyga0BJwc7DA3xWzAdKj39jHMuiRcjmDyZT0KNzVh0IqtPE%2BUXY26UcEEcZRdpwYGHR%2FhP7sg90%2BnMdRUHium9TuYkWQZBMjqe7UddJx7zkZGV5ZJzyBlWHEJl1xSRPKYmCmRNHvgqGVimQc6SAdOdwcCpB45GOaTj%2FcTf6JUaoxTyjCox7sr%2BJidpI4p5E7llld4olI1LGFOlnYklSWGQAM8q37sn2chMUV1PGkk8katlgGEYYBgkWdgoyNxux3PgNLikM1zFIscgRI5lLSIUBLGPACthj8J3xirTh9zeW8Yht54xEowiyxFzGOiqyyLlR0BzgbZre3p0qK0wWDFenOa%2BEkdteD26XEKxoq%2FSEmE0agBXVVXDlR9tWKrqG%2Fv%2BQxX2to1uI3tfdliBC6jtICdTJK3Mhjk6uYY6vEGltr24%2Bsu5neaVGMV0hwdIUkhoAAMKFcPo%2B0D97nskUgZQykFWAII5EEZBHlUk5b5RtRprRpkb5wTiqXMKTR5AbIKnGpGBwysByZWBB9KnVoXZG5MN60X9ncqXHgJYwAfm8eD%2FujW83EyorO5AVQWYnkABkk%2FKp4vKyUKkNEnEyV8JrUZO2ErDMNrscEGaXQSPHSquR6HB8cVW8Tvbi6Xu5zGsR%2BKOPUe8%2FC7tjKeKgDVyO2QefW6ra0k8zTa7Lckhb1Jdi04h2uL5WzUP07989z%2FALsA6pD6YX8XSqS6geb%2FAMxNJN%2BEnTF%2FwkwCP3tR86zgViuY2ZWVXKEjAYBSV8wGBGfWvK3XWLi4lhS0x9P5fJ0KdtCC4yzGllCi4Ecar5KoH9MVY9hZwbiZIMGARgvp%2FZCXXsEI93Vp1agv4c71X8FuLQIn0nh8xk0jW8gScFuun6x2AJGQABjyrc%2BCcatZvq4HUFBvFpKOo%2Fw2AYDzxiu50uwjSqeJ42p%2BSf33KlxWco6dOC2pSld8pilKUAqDxrisdtE00h2GAFHxOx2VUHVidgKnVzrjN79KuS%2FOG3LJCOjPuskny3jX0c%2FaFaylhZJKVNzlgwFpJXNxPjvmGMDdYl56EPh4tzY78sAZaUqs3k60YqKwhSleVYHOCDg4OOh8PWsGT4sShmYDdsZPjjl%2FWvdQJuMQKWUyDKnDYyQp%2FGQCF%2BeK9z8SjVVYHXr%2BBY%2FeZ%2F3QOm%2B7ch1IrDaW7MZRMpVd312dxbxAbe6057z%2FAJYigP8AER51JsbtZUDrkZyCDjKkEhgcbZBBG3hUVK4pVcqEk8eQyVsZ7u%2FZfszwB%2F44m0n81kT%2BWvvA17qSa15KhEkXlHJn3R5K4dR4DTXviI%2F2uzPXFwPl3an%2BoWl8dN3bPn41mh9dlkH5d038xqwacP3%2B5Ou4mOlo20SxtrifnpbBG46qQSpHUMeVbLdcdguOGSSzgosiPDJGN3EhzG0a8tT6th47HlVFVLFEReOrMTGVE8SHGkSY7uVgOerTo8hrb7xraE8EVejraaPVrxqSNEW5t5RJ7qZjCujtjbBDe6Tjk2N%2BRPOpfDuJPMzAR92sbFXWQgy505GFUlQpBB1EnPh1r1xWz72JkB0tsyN911IZDjqAwG3UZFV0AW4JJLW93GNL6Dh1542I0yQk5Kkgj0OccSv0ajKMnT2k%2Fovz3wTapJ4ybFSte4HM%2BpVubmTv1BzE3dIjdNcelAXQ5yNzjkRkVY3%2FABeOI43cj3nCe8Y0%2B1JJj4UXqTjyzXm6llVjV8JLL9EyRVFjL2Mlo9y7zIsCyCPSfq5B3hVs4PduFGNiPi5g1gv5WYaUiuFuVz3OYJldX5Aq%2BjToz8TAldOc5FWGXVllhYLKowCd0ZTuVcDmh2ORuDuOoO5cA4utzFrClHVikiE5KOMZGeoIIIPUEGu50y1tLlRlHMZx5Sf7lS4qVKeU90ywjzgZ54Gccs16pSvVnOFKUoDVe2vF2XRaRMVeVWaRxzjiBAJU9HYnSp6e832cHX4IVRVRQFVQFUDkABgAeVe%2BJSd5f3jkfAYYB6JGJP8ANO35UqvUeWdO2gowz5nl84OMZxtnlnpnyqtPFmT9rbzKfGNTKh9CmWx%2B8oq0rFdTrGjyMcKisxPkBk%2F0qMnZR8W7RoE0Rl0mcqqh4pA4DNguqFcsFGTsDuBmq6LiNrHAUtJJQJHCtKwnKxgt9Y5dxpVgCx6e8RmpQs2buw5InuzmUg%2B9HCo1NGh6LgrGSOrludbHZTxkvCi6e6wpTGAFK5UqOWgjIB8iOhrm9Q6irb4Ixy%2BX6Lj7kajKT5PlnJChW3jIXCBlXxXxU%2Fa57kZ5786gWtqkN6wjUATQl2AGysrgZHhr1nI5Ernnmsdjw2NjPbMuY4ZEeHBIaLWmcIwOVwdWMclYDlWTi3DhHbTmLUWIDOSzGR1U5ZdZOQSuoDHLO1ecSgpuGp%2FFhb8b4ab%2B%2FwA%2B5Ju1nHBkk4lJKxS2C6QcNO%2B6A9RGo%2FaEdTso8SQRUmwtBEgQEnGSScZYkksTjbJJJ28a922nQujATSNOOWnG2B4YrLXq7WzpW0dMF835j1ZU3AzfQ%2BCQTt82eJR%2BgavvaAACGXH7KeJvQMe7b5aZCflRf%2FPN%2FwCmXH%2FFbP8AQVN4jaiWKSInAdWXI5jIxkeY5%2FKrZrjKZIqNfWQlA3Ksp1I6%2FEh8RnbyIOxGxrxwi7MsKOww%2BMOPuup0uPkwNTKwbbNFdbXrKwinADn4HX9nJjwzur430H5E4OM19w6OXGtd1%2BFgSrr%2B66kMPlzrJe2iSo0bjKn5EHmCp5hgdwRyIqJwy8IjkEzDVAWWRzsCAoYOegyhDHoDmsmPRka%2F4X9W%2Fe3TmIAs3eR276QNzu0fTxOa3P2Z9nUtbFMxBZJ8yS5VQxDElFcAAZVGC4AAznbeo%2FZ7s%2B1wVnuU0xAh4oWG7Ebq8wPLoVj6bFt8Bd3qenFpbnOuKkZPETTpeyMkRxavH3P2YpNX1flG659zwUjbkDjAFz2b4MbdZCzBpJX1uVGFBChQFHPACjc8zk7ZwLilR07SjTqOrCOJPlkTqSlHS3sKUpVg0FKUoDm1zkXl8pHKdWHmGghOfz1D5V6q07bcMZJBfRqXXQI7hFBLaQSUkVRzKamBA3KttnSAaiGVXUOjBlYZDA5BHiD1FVqiwzqW81KCXke6q%2B0x%2FwBlm8NO%2Fpkav0zVpWK7t1kR43GVdWVh5EYP9a0RM1lYIEwxfQHoYLhR664T%2FQH8qmX%2FAA3WwkR2ilA0610nK5zpZWBDDO4zyOcYyc0cLSSRIu30y0YHSTjXgFc%2FuSoThuQJ8VxV5w7i0Uw91sMPijbaRD4Oh3HryPMEivN9ao1YVVWjxjH%2B%2FRiDT2fcycOsViUgFmLEs7scs7HAJY%2BgAwMAAAAACpLDII8aq%2BJ8eiiITIZyVyBkhFJ3aQgHSuM4zzOw8vE3HAwK2yNM%2BNjpZYh5tIwAx5Lk%2BVcmNpc1mpKLee%2F52N9cVsYrCzu4YY4x9Hfu0VAMyKTgY%2BLB8PCpdjfByyMpSRMakbGQDnDAjZkODgjwIOCCKjQX90iqJbbvCAMmGVCSep0uIwPQE19tBJLP37xNEqxmNVcoXbLBiSFJAA0gDfO7bDr6W0qX3i6a8Vjz2%2Fgj2WME02o70S76ghTywWDb%2BeV%2FU1npSuqbHiOJV1YAGo6jjqcAZ9dhXulKAVF4fw2N%2BIRCU%2FVTIcp0kli96MHxGkyMR17pc7ZFSqhcVm7tY5xgdzNDLk9FEgD%2FAPIzj51tB4ZHWWYM6pSlKtHIFKUoBSlKAUpSgFazxPsXC7NJA720jHU3d6TG58XiYFcnqy6WPjWzUo1kym08o0J%2By9%2BuwktJfMiWL9MyVTcUW%2Bt5Io5ILZjIHYd3cPsE05zqgHVxiurVpHtMLJ9DljXVKJXQLkDUhiZ3XJ6%2FVKR5gdM1HKEcFinXm5JNmncSsp7nSDDHCy5xMZSZEzz7sR6SfRmA8Qa%2B3PZZZQBPPLKB99Lcn5N3OofI1cWN6kqa0ORyIIwynqGU7qw8DUioctF%2FRF78kThfDYrdBHCgRR0HU%2BJPMnzNSyaUrU3SwKUpQClKUApSlAKre0MeuBoRu05WFR4l2C%2FkASx8gTU25nWNS7sFVRkk8hULs60snEbOZlKgtKEiYDKx9y%2BqRx0csY1%2FCGxzY1tBZZFWliDOs0pSrRyRSlKAUpSgFKUoBSlKAVS9quEfSIhpbTJE3exk7jUFYEMPusrMp8M56VdUoZTw8o4vZzQ3WmRddvcMittgOVxkeKypv54z9k1N%2BlTx7SRd6v34efq0THP8pb0rxc8LVXmtJFyIJD3Z5EI3vRlCDkEKdGRjdDXlPpEXwsJk%2B7IdMg9JAMN6MAfFqjlQfMdy7TuU%2FwBWxOsuJRS5COCw5qchx%2B8hww%2BYqXVFd3ttJgXMZjI3DSrp0%2BazD3QfRgakJbTKAYbhXToJRr%2FllUg%2FzaqhccclqM88blrSqv6Zcr8Vsrf4Uqn9HVP6mvS8Ub7VtcL%2FAAxn%2FK5rGDbUiypVa3FH%2Bzazt6iNR%2FzOD%2BlC90%2FJY4R4sTI38o0qD8zTA1Fg7gAkkADmTsB6mq48V17W6GX8Z92Ifxke9%2FAGqJcR20bjvnaebmqt77c%2BawqNK8%2FiwPM1lkkuJdh%2Fs6fJpiPXdE%2BWo%2BlbxpuXBFOqo8sxXLBXUynv5%2BccSDCJ%2BLBJx%2FiPk89I3xWx%2ByyMySXty7h2DpbjHwpoUO6x%2Fh1SAEnclDnoBrr2JRO7gGkufekJyw8WJOS0nQZz4nlg7t7L7IR2WVXSJJpnUfhDaEOfNYwfnVjw1BFCrWc9uxt1KUoQilKUApSlAKUpQClKUApSlAaH26gC3dvIB%2B1ikjY%2BJRlZB%2BTy1UVf%2B0gEGxbG30h1Pzt5j%2F01QVNDgyhUE8JizqQGNs5JiZkyfxBSAfmDU6lbNJ8mU8cEHuLhfguc%2FwCLEjfqmg17D3f37c%2BfdyD9O8NS6%2BMuQR47VG6MPIkVaou5EH0sneaED8MLZ%2FNpSP0rw3Dmb9rPM48AwjX%2FANsKcepNQLCa87u1UiDMtsk2tmkJ56feXA97qd%2BvOpgsZ2%2Fa3Bx1WFO7B8ixLv8ANStI04dkYdWb5ZJs7eKPKRqikYLKuM75wW674O5571JrDaWiRjSihRnJ8SfFidyfM71mqU0MN7Nojkf7qM35An%2FSuj9mrYRWltGPswxj%2FkFcy41IFt52PIRSE%2FJDXVuGx6YYlznSiDPooFRVDDJNKUqMwKUpQClKUApSlAKUpQClKUBqXtJT6i3f7l1ET%2FEHiH6yitZrdO3qj%2Fw%2B6Y%2F2cZlHrH9YP1QVpdS0%2BDKFKUqQyK%2BivlfRQFRwx8tbr%2Fd2eP5rqcD9IhVtVVwVR7reNtbH5M0z%2FwDXVrWseDApSlbGSJxOLWiw4z30kUOPKSRVb8lLH5V0rtBxhbSJZWVmTvI0OkElQzY1YAJIHPArmHF9a9zOjY%2BjypOwxnWqZLKPUZrry6JFVhhlOHU8xy2I%2FOoanJhmoTe0FFeFO4k1SxMwjJAl7wGQd3pPu5BhkBOdiFG%2Bqrfs1x97oy6rWSARlQGdoyG1KGGArEg6WU%2BHvc6tWsYiQTGmQ2oHSMg5Jz65Zj6k%2BNZlQDOABnn57Y%2FoAK0MGo3HbdIhPJNoVFwYk3DsveFAzOxEeGIyFG4GM7nA%2B8S7exRBj3Tn3kVCSoDFjgk41MoB23GT0BrYF4NbjV9TH75ywKggnJPI%2BZJ9Sa9vwqAqyGGMq2kMNC4bT8ORjfHTwoCuTtTAX0K6tp1CTS3vIygHBXAJXB%2BIbZx41DvO2cembuFEzxsEVQxAZtLEhjgldPdtkYJ5YByK2NLSMDARAAMbKP8A90H5Viu%2BHRSDDpyOoEEqwOCMhlIOcEj0JFAUydubHA1TqrYGpSr5U9QcrnIO1fKuY%2BFwKAohjwAAPdXkPlSgJlKUoBSlV3aDigtreScjJUYVfvOSFRfmxA%2BdAa3274wH1WEe5YA3DdEQ76PN3G2Oikk81zQ1htISoJdtUjsXkf7ztux9OgHQADpWap4rCMilKVsZFR%2BIyMsbaBl2wkY8XY6UHzZgKkVZdkLHvroyEfV22MeBlZf%2BhD%2Bcg8K1k8IwQ%2BOcOFtdRRL8DWkSp5mBmVv0lj%2FWsNbX7QbAtbCdRl7Zu9wM5KYxKBjn7hLAdWVa1NWBAIOQdwfGsQewR9pSlbmRWy%2Bzq%2F8AqXtGPv2xwvnE2TEfQAGP1jPjWtVge%2Fe0kW8jUuYlYSIDvJEd2A6alIDjPgw%2B1Wk1lGDrVKpuzPaKO8RmVWRkIDo2kkZGVKspKsjDcMPMbEEC5qEwKUpQClKUApSlAKUpQCuOdory5urn6QHZoYJpUS2BCqwQtHr3OGl1BmGrbGAMcz03tTxkWtu8uMv8ES9XkbZAPnuT0AJ6Vzrh9t3caR5yVUAnxPU%2FM5PzreCyZR4tOJRSHSrYcc0bKyD1Q4Pz5VLrBd2cco0yIjjoGUHHpnlUQ8IA%2FZzTx%2Bj6h8lkDgD0qUyWVKrmtrkfDcRn%2FEhyfzSRf6U03f3rf%2BWT%2BmqhgmXU4RGc5woJwOZx0A8Tyrf%2ByHCzb2scb47w5klI6yOdT8%2BgJwPICuU8TsriRVQyrraRBEsSFSZM5QsxdjpVgJDgDZPlXbYwQACcnAyfE1HNhnoiuWXdj9FuHtcYQZkt%2FAxE%2FCP8Njox0Xuz1rqdcp9pEM818FjkEb28cTw6g2htbOJCcHcNoVDzxp%2FEDWsXuYPdKr1v5Bs9tJnqUKOvy94Nj1Ar6eJHpBOf4AP1LCpsmxPqBxS6IAijI76QEL%2BEci7D7q5%2BZwOtYxcXMnwwiEfelZWYekaEg%2FNhUmwsFiyclnbGuRt2bHLPQAdFGAM7ChgtOwhS2vBEPdSa3jij5Y1QF2C%2FvFJGPojeFdJrkPE30qjg6WSWBkPg3eoB%2BedOOoYjrXXqimsMwxSlK0ApSlAKUpQClKwXt3HEjSSuqIoyWYgKPUnagNI9psyLLZuz50GXMY95xqUASaB72lcMpONu8qmt7hJFDIysp5FSCPzFeuDTd%2FEbnVmS41MzggkZJAAI6IMKB5edR7Ps5D3cYeNVkRQpeJmVjjrrXDb88HPM864b%2FwCQ06dSUJReE8evzwXVaScU0yVWO4nVFLuwVVGSxOAPU15%2F8FkB9y6lx4Osbj89Ib9a5T2k4xLPKyO4aON2VNK6VbBI1Fcnc9N%2BXhmunbdVoXKfhZyvTBiNnUclE2ziPb6JSRDG0v4idKH0yCx%2FKq9faFLne3THgHbP56a02lTOtI6EbCklvlnWew%2Fa6CfiFqHBiIEuO8K6S7KqqFbPxEFgOXM%2BNdsr8dEV3j2NdtXukazuGLTQqGRz8Ukecb%2BLKcAnqCDzzWVPVyUbu08L4o8HSbm4WNGd2CooLMzEAADmSTyFcE9oPtCS4u45LRAywpIiySAgEuyEsigg4wmPe%2FKrH26dp2aZeHo2I0CvNg%2FEx3VT5KMNjqWHhXKKxKeHsSWlmpx1z48i%2Bftjek%2FtVHkI0x%2BoNS7Ht3cKfrVSReuBpb5EbfpWrUrVVJeZednRaxg7JwfisVzH3kTZHIg7Mp8GHQ1NdgASSABuSeQ9TXHOCcWe1lEqEYPuuDnSV8Tj7vP8%2FGuvQcG14aeTveRCAaYR4HRklv4iR1AFRXfVKVrBSqcvhLucydnNVNK48yrYi5ngWSPNs3eFA39qyrkMV%2FuQCcE820nlgnpXs%2Fu2ks1DsWMUk8GokksscrIpJO5bSq5PUgmtatoZbmUw2%2BF7vAmmIysWRnSg5NKRg6eSggt0U73wfhkdtCkMedK53JyzEkszMerFiSfM1U6fUuK8ncVVhNbL3e%2F0%2BvJHXUIrRHlE2lKV1SsKUpQClKUArXO3%2FZk8Qs2txJ3baldSRlcryDD7v%2Fwa2OlDKeHlH5gv%2Bz3FOGkkxzRqP7SEl4j5nTkD%2BICsvD%2FaLdL8XdTDzGlvzU4%2FSv01VPxPsrY3BzNaQOfvGNdX82M1UrWVCt%2BuKfsXIXjX6o%2FTY4mvtLyrBrZgxBAKyAgHGx3UVzyJcADwAr9F3nsi4W%2BdMckZP3JX%2FQMWFarxP2T2kerTPdbZ5tF%2F2q1t7Glb58JYz8yxTvqaeWn%2B3%2BDkFK3267DwLylmPqY%2F%2B3Uzgns6tph701wP3TF%2FrGasaGTf%2BjS8n%2Be5zatt9kzuOLWvdgn9prwM4Qxtkt4DOnc9cV1Xh%2Fse4aoBcTy8j78pA%2FJAorc%2BD8EtrVSlvBHEp3OhQM%2FvHmT61lQwVq98qkHGK5OSe1H2dXcl1Le2y9%2BspUsgIEiEKF2BwGXCjluPA1yi6iaNtEqtG%2F3XUq35MAa%2FYVYLuyjlGmWNJF8HUMPyIrLgmRUb2dNaeUfkGlfp279nfC5M5soRn7i6Py0EVVyeyHhZ5RSr6TS%2F6saxoLK6lHvH9z87EVtp7fTLaxwRRhZVRUMpbPIYyq4%2BLHjy866mfYzw3xuP%2BL%2F9azxeyDhY5xyt6zSD%2FKRUFa0p1seIs43MVL6nLs%2F2Pz5b3kybpI6EksSruCSeZJBG58a3b2ddsOJG8ggSeS4R3USRv74VMjU2o5ZcDJznFdis%2FZ1wuPGLKJsf3gMn%2BcmtjtbSOMaY40ReWEUKPyAqwo4K1W5hNYUPf%2FWDNSlK3KYpSlAKUpQH%2F9k%3D'%3E%3C%2Fimage%3E%3Cimage%20x%3D'1044.5'%20y%3D'-180.8'%20width%3D'45'%20height%3D'45'%20opacity%3D'0.6'%20href%3D'data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAGQAAAEnCAMAAABohxYQAAABs1BMVEX%2F%2F%2F%2BkUCLnztLKs9%2F%2F7hhyQj6pST3ozdLp0NS6jRikTyHlztJwQj3Kst9wPC%2F%2F%2Ff%2F%2F8RnljyyoSjyXRTpzQT%2F69%2FnMstzu6%2B2pSTtCHxulST8WCgonISXt6ez28%2FV9enohDw7NurzYw8ZiWVkaFhcsJidYNjImGBbOycylnaTj3%2BKoqKgAAAB5NzLKw8hTLiebTyZlPjkUERStmborJy4eGR5TS1C6psw4MDSXjJRQTBRHQyBxaB8kJCRCPD91cCG7tLno3SkeGgvy5iAwKxXazyUkIB98c3qzoaNgLSgyGBa7qKpRIh2IPTcwHBtjOC1QKRk0HRJ4PCAwLQ2Ohx%2BfeiCsgxxFKytFO0hXRlcwLDVlWGychqaFd5Chi7E7MEOIeoRLQlReVWgoIjGEfJFANg6onyTIuSGKfitZTw4ZFgq3qirgzyleX2CgmDSWlJVLRylBRUJbUyBvcWvX2NKHh4VXWlfNwSacj6VxZG9zZoA3NzOuqzNoXhNTRkV8UybUhzWyci9YOhuRXCZrNBpKLxlFIROJRyF3QSWBc39%2BdDIyLCFXRR0%2BMA5uVx2AYxlTQiF0IOB6AAAdGUlEQVR4nO2d%2B1%2FaaLrAvVVY0cKqeEu4JhhApIiCCdpwJwhKQejo2LpHOyNQqPWMU4diR3cujnZ2pp39k8%2FzhotcEgjY%2FZxf9vm0tbUhX577874JcWDgv%2FJf%2Bf8RtcZqtWq0auV%2FjKA1WwiWxmnWTTA%2Bq%2Fo%2FQFBaLW6T62D%2F669fHe8fuEi67NN8aYZmiXWuvXi5vj6DZH318NiFE%2BYvajatz%2B08uFydmRjmZQK%2Bzqy%2BcOFH1i9FUCqtHLl2uQonHq7LBIBWX5Gs%2FUu5xsySr1b50zbIBHxj5vCbNeaLUNRmN%2F7tzHAToU76x%2F84z74ExcyuvZwRIvCyerzm%2BxIM%2FKWwGhVd1l%2BZHkzREK6XwzPimkwMrx%2B7Hxhj2iPn7x30qFjsoKx9EMTn%2Bnp9ogtk%2BNC1BEmJ8rKv3NS411a7IYaH19dMnE6nY%2BL2vgraEnnZzVggMy9sNheOu1wu%2BvTM3CtH4z5Y784Ynlh1md6vrq6%2BvDxec5kIS29xsET%2BPtMdApn%2FYh8KJ3ydWX35Ys25b1dKd46awFe764FkHRQGCJKZ1cMDEyO9C8y699elQYYbPDcDVcBZlmwyDftKPAtFBTRav3S57RIhZtOlBLcLaAXlGaclUuyuw74g0DonXh5IpPjwl31BeG1WD1izJMiaxOASpLz%2FhpASY3YpNUUUMnPpskiAmE2HD9BkYv3APdsd0l8I1ynDly4JvtdC6eofAo0GP5JgL8aFujsMdP1BZvZZCfay4%2BWZifXjVxKqpKC8wCVEsfoUfz8x88rVbyQfunwS7GV3Ha9PrH6zLxTKEnrASycjAaI%2BckL5unRWoqwyQ85UfkOxPby8fIFEtC78w6WTAEET0bfgFefhOmRXRVD9W%2F%2FHy8t9UyAQSp98CtheiYwaE6trkiBotluFAe6b48PV9YpAm331DRk42cyWSmG%2F35%2FBvhWbZ6RClGaWfj%2Bz%2Fv7Y6Vo7ONjf3z%2FAIyGPN5vzB1UjIyqQLPlezCmruDQI6OJeO1yfuQzlr157PCefPPlsyQ9nH6kKQGDEFFZFOmTAyuEHxwebwZFgMOj3B0eapSNEmuN50dqP2EKxdtKRRjU6Q166pIRwRdTW%2BIGnVQMkwaJfpSqShxMidefQKaXYw8SiGVBbaDKdq77xJgl%2FKqlUpdClGORSIoQpz1rpUKbkDwYbGKqKxXLp0ogq6DkeFoEcS6ldIBaXz4xveD0nntf5or9qpTcoQYIq%2F9WGXxUseddWBX2Culb3NYXVpx2w0m5fxPb0u9NT99PCSRaSw5%2F1hEKh9Mbm281CRhX0nrwNvBCYmGH8kuT3Jdw3oFzCcef35lmtWvvubC2QDWY3Cqzu7Ez3A%2B60bQaD%2BVDG%2F9r5XiDnJ4ZfSbGWxk2DLoztdLay8wDr4NB5gV6aRasDrfni6UZxM5RVjeQCQuMsWIuQsgKzEjhhcX94Vx3SlQPmp66zd%2Bhv%2FHd8dCH0Yzib8eedAgab%2BFbStAK6WFjSdnb%2Fb9%2FTxlW7csn5v%2F9KYx6%2F%2F8p12B5gr2gpU7cVVk2zXOTesOrvWWvjymP21JbezIRHRvwb7QZbdXESVilKhuYsZ%2ByH%2B2Fg9oOuabGm9JF5vphBrrRF8SEuaRi2HtEm3PYDf14t8qH56VLz29B8Fzq%2FCo%2BoSoHLFnNBbElIEiRqq9nO8pDZ739YUg%2FYn9bf3OzSkhVNGiFvxj%2FC95QWyuqBNLfDqSyE6ztkLjNpg69Lpne1%2F1ly2i4Q5BxZS5VfW2%2BuX7CMZKUutswsy%2FKOf%2FedCeLqHqLW2Ww6NGNu8tXZS7dCVnFG6uJUbdXY8e%2BRba3vZmff6cil2rrWfKqDd%2FqOzvCV0ovm2SbPv1iTVhsrouXIC%2FPShe70hw9PC5D8ta0NNXLVUqgkCIE55ainTQMr64w4bWnP%2BWY%2Bc0VeNIaM%2BcNr3lqqDFqL30Ng6pSUiPfiw222QuZNEDWU8EkDRW1nA5WmrCoWoDvWIFB%2FDyVWlJpo3aE0FN9qt8qdOE%2FNPEb77uJpuvp9lT%2B9vz5TrcRoB%2FSgLGGcbxAz7s2HSvWe%2BMYbiJxenJ1d%2FPA0cFX%2FtirjvJzhtyT4Jda%2B5PCtiNJSKJZCV%2F5a64VOmD8JFQKhE2%2BuoSH7N1zH%2B8eH78FmMG9CH%2BpNuHQ4mC94UY%2BvjUH%2BN7lcmJ8g65r4z6FUbqZdlxNoFWfpcXNNWT7xj%2FjzAYiubF0bVevgosoX8uFwqXTleg%2FrBbbXTXwlB5CRYC6%2FeZURGr2qks38eJUO5cLpV8Or%2F%2BPkrD2qcpT2V2fG1qmrSYowXASKqtfQV1a%2FdvYYXLy5JMibbPgtpP8mhPIwrGd6SxMN%2B7qDlRrd4vfAFAYQyPzVtd7cAr1PEgOieDMLkeyegXK8%2FqInVbTlQFHojMF2G6qCI%2BFN%2FD2%2FG%2F5SUn%2BvKxLxBgUcrnrrKTV%2FO%2Fs2%2FCaTdh1WyiTkvHR72emTsFBQqXIhT7hJs3whFHLtv6xVyRek1O3BgVn3Rk44clXFgLcpIPwe56uXaMe9shi%2FdPqkQqwffhRLDhi0m9wSvMJXh%2B8n4h4gGhZ1V7%2BgV7Ibzb73uhogM69ckruvmkvnguGNej0JBtGaGi2BgiVP8wJPlScbIOsHPXRGqzvk2XCSaLRCJ97cfFvMgRQz5yGnx99YJ1UZ8tuq18Evh84j6SGstDKc7oyjN%2FLZIiwT0hsb8Av%2BSF9ls6HzYoMuqozN9O1MFYIU6fVSitrMsR8iztDbcNAf5gW5KedJ5xpWkRkn6XpRmbrXjyVtQbVhNFbfQQh19Eo95g3lLwXr9lKBuS50rv1VdMn22NXvxUclLHleF%2F2Ngda4ZzCScZ7Jj5wm9%2F4%2BTlv6vcalBP8cFDab8rwBVzrBo3KDiaTZ07Oe%2FdHEMZedXsHCryqmTVGFzGA6smoefAFVwxWyLSqgP%2FxvQ2xcNiSPm3z9XaBrEjVj8zQnOsqfoifCGRUKhdxi6mXKFhGlBWcLRVXj%2FsdIOOsJsBbFEIIcmb7A9Xmf6TrObgbv4zaY86YjLGOUKRSyIYD0OGYLiYalDQoOOjkvwXAx4wmZiKhRJhsC4TUxq3u4MCesiOtCoWAKmVwpXCpmXqcLETdjGJIPVQRBbCzX88XMFolHonJFNBIJIInQBBc3ymUVNSoQxmbD6Adi7CaAGONxC8Mw0TiKJwU4Q3EPiTqxrS296UEYjZuAU8prMtQsQATIzsLONoXuaenbNQwelyuGRITXRD81Nze6sxWj2DNrnze1WGmdXCFGAU3izvmFudHR0cmp5Xk93cO12QbRWvAPhiFxVWSGp%2FMLk6O8LOzMO8t9ULSMCyOj4vaSG3XOrdHROsRG%2BvpgkFtbnSDRa6dteQ5pMrmwsKUnbTau1yhTMq6thcdkvJ4Xjd4YksmNXITVUctzvB5T8xFdlLW5e62XdhPYe8tkEICApRTR66ecIUrtAGQBGKbokNygM7H2niJMW47tTI5u08ahdohcESciRFQh18WmeH9sYQwfH3GW7kkXH7k1OrcwT8cV8iYM5KQxSpDQUOQyBRFbQJAdPWEEBhjRQPdy44yWgDc5N6W3RcoGBSpYMhlKeoXRwJRZkiTicMYhI7vNe2SbjA%2Bh0q%2BQyc5cPWzk%2BJxbC6OTyxhxjUUIXdyAJBq94NiIM8JCoYQ3Lhsy0HwET%2BkJRS0iFBzuk%2BoWjRtbBoduRwxGhjA5IyYkkUjExBIMlGK%2BDMjkcXwZQVCcVyBQPo0EK3WlYoGiNLqwEHMb4ZWG6JGO4zgmGo0bjNBOqoVYJj%2BjdpDb51njUB0iM14T0tbbGrcNXDq3g3Fy3tfyxkpcL%2FYyTj%2FFW4trLNCKKHkmyWA%2Bp20bRWbdDsJSCa7l5qqgMLoldX4tQWKQylPztFEUAGJkn%2FCxZTI0VmqZPEpKubJlN32HrD2lL3diyOORLShc4DhFEwS8IkEV5RFN6KcWRpcxppO15AxSF3KJU7T%2BhwRVZt0EWHtyAezQEaLTQ%2BWC6LhoPcp43X1VbzadueehfMeuRas8EigqU3MoYc9aIDDFkF13QZZM8etteIt6XUeIzA1lenJ0K9I%2BBxjZbhcHlBxrMG3xoSna35EY6G0EAaPKWg6TyZlu6zs1QfAQ5JIOEHnctTUJ5kLdoOUwtHApd66TsyxnMC3zoSnUr%2BrvNootA2RhXgiiKHeZ9600E6eWoUnohgS7Yg1ypN8ZBcj2B2OruZCaps5RbKajUYAsY1BTRM0lQx1rCjQR8glSxt05in143AIJv40bhsQdj%2FK6MnOhMQCOa%2FV9F9cztPEIEh4VcHGIAoLrCUyPk6PLKD4UipZDwfUd5yMdiyBTMaJT%2FCoUULlG0Ty0QzFyaM2t7lMQnQoYpImRiy3sYLqOZV4BwVUZuWLXRlk02gKBrHctiUO07msjlC7e7%2BICwYXt8IPdJKS84rq1AnVJlVmWUBDzU1uRjtURgotvi9WB6LregRsO6GAvWC4gyDyEf0eIuzJz8Q307NpkaD1gSNdh%2Fjaboorr7Sm9u2PhkhnZ%2BSoEDak01LmWA2TQ60UhkCbGD9s7%2BiPxTBziQ7S%2Bahhd1tucrf1NBkcQok6xmAwAWabi8k7mQr23DoFZ2NYei51aF2MyGD5sQx4LTNoNkFoEo%2FiaA1249jDhxO9mOGKNhsg2FPBONRg1%2BEoEI0Wg0ccIgUPEd71PrxVGejvmZDpDYLCbrNsLxn93eyWOijZhtZuA7jlPYbShEwTV4NEGCGjeai%2B5wXQkAtGwZQjPhP6JvmNZQUuTuXvKqNBkY%2FwgFl5WmpMbWUy%2FA1VYIe57xfV8E2SLjLdDWFZknLCuIYgtMbVMWcQTBQ7ZnmxgjAqWOkLs3kszfoQg87BuIBQCLa8KacxFvoC1T5symTjkKSM30rbthbktWnw3og2C1g8ttpXJxSEmBrLZBg1ph4qKRnFTwqN8nIpxaJuq%2BaCyWMrb8ag8TtqWUTfixCFRcrmBMTc5xRu3BcKJFXtfBEGwHbRMuzaKMNoh%2FJTWBhGrK0sw2sZJviFB%2FRL1STOkskpph4htG1toA0Aq67RIe%2BzXXg%2Bla3K0IYhhuGmHHEVEIEdQH6JOviHt6C9EfcJDRrtBRMyl5BCERJs%2FUFo5UciRfmq0BWKUDEFTl7yy%2BSNYWhsgc80Q2tg6eskZEZ%2BoT%2BsQGHbaS6u4Ju2bVqIQrdsNc5me12R0CxfzvJxrhWwLQI5EIDB1yaoQeGFlPGiac%2FmxVyENwolEl9XEgZoJZHBY19pYftJpHY5kPKTRJ5OTghCRlZDVpBsaAgh65TK2R0WIuEJ%2BX%2FoQTY7%2B3QKZE4aIRJcdP5PLjyqQLerxs3ksgjafaps4Q0ajIcow5WuyBTLXiyZQumRyjocszCceP36GpX6j0AUHHcPodATBmiIRTK9P6O%2BHFZ6BalDr8kHUJ0wkXofEYgDR%2F%2FOnn%2F%2F5y29UgXRimD6RmH%2Fy5Nmzx4%2BfNGV8ZVXXusQU00R5BFpXIVOxPYBQv%2F4d5Keffv6VSj1Dp6%2BIEKRNE5ElsLoMiVuNz4XYfB2CONT843tpg2wJaCIC0RKwbJKfxu59Uof8TD1pgjSX%2BlFYzyhaepyCEI4uDayAZENEZVWwpX%2FWCEn1DBHpjGjqgjU4v3ie29HvPXtG%2FVOqJvF2TYQHCTPOwHrZzWsCpR7TU9gvP1UhWDNkpwVCxodaZ0ERiA%2FGiCFjFbKjf3xzq8dSv%2Fz6808%2F%2Ff1X7FkzpLFpTfJttMXxMrcwxII6bhUyuhW7G3Tc7d4kU%2FrUb7%2F8hu09qcheLEZhzdEFELIdIqKJDs3NFXNBz0oODo6NjQ0OOnaTtylKr48h0WNUKpWcb4O0aSI2QaoJ1KYQBG0u6j8CAAn64nDcgdT%2BHLyBVJprM1dTtZaJ%2BGSWRYv%2BysQ%2BCdYaq1JaZawdgsb61v2Va0GI1fQ9P7FvTU7CwjlZ0aHx5Lygv0mBwNJBCGLHYeWDhml4%2FU5sd0yAUKW0QPhkbDGX2HanhWR4yPIkspZDxFhIdtHudBOkvZ%2BIQBgyyk%2Fsy3MothziDIDsNKy05gQhMlZoOaf8HUWw3EDPL0%2Ft6Hc7KDK4C2VlDjWrGmXb1DZ3yVihfSI18YHfEmRoCvKtk7UG7%2FTLk6MVr8zNoQuaaIJsWTMprssCF1LUHMmgLUyFIcqRtx0hjlv%2BisPC5CTa7ESZe902Cxs%2FcAIuGTDTJKPgJwZD5KYDAuRmfgcQFVUggqdibRC0jhe6JKTkbDCcROPRKEHddVJkcOwOqsyTreXl5a2tre35%2BXmsbX0CEMG9Ya37PHMSKPwRKdhuWxOxBeLYvblN6fUwuehTSAQhghteVjqr8uey2Vw2cNMFMga%2F%2BEKGShmUNKptzSg34EIQpeWPUuUmmCx1NyhWuKqUwWqJrnx1tC%2Fn5HHBu8eVRxv%2ByieZNiHdO0OqiNofjvbVrzwq%2BJiG2ocMRvzpZMcAFtAr1a5J9KnQsGJlM5WbhoqBjukuJEna2LKVLmcEp1TfH7nKPXaZjsVRQJGxsV3sQoHy%2BH7bXs6QQpCzUHgkWHyjCnq6BLAAxnEbYQwKORqL5OiyusIYZYUWWkoO%2FB5Oe1XhUJd0F9LlLuXE3bDKgMVFPMroCJqkfe31UaklXgdHglcb%2FmKXdBeEjCWxk1AgQtN0JFIIBEIF4Q3uWdaLbnQNlfKp3lxSwdwEiuFcNu%2F15jPZXOlNJiK4l6rZB8hIvvDjebJbjgjJbiCnqt6aiaT0h3BRQREcTtvOAx%2F7gIwhSMMdgP4Twdu6raaMauRtIG3T3%2FWuBxT%2FQNNt3sFzwQ5vpTMQvZ5cKOXoNYKRJFvu%2BvcKLhw0rFf1JuT1b7QPXBLEEdtsuWtZEDLLbo7kAtkcuKTnXER%2BL9bvZET3S4pAQJMRCOC3KEt61yRZu8e7mPeP%2BP3IXELbnKgIZ9LhzVSngUtMFUfMqxrxo5vyvemwKvPaH7wSnunLnmDeEz5J9o6AAKayqqB3o8RD4Lc%2F6BG%2BOselw3lPMdBz4UJF5WOoFMw7bZAECPD6JCiSJwNLAe%2B5J4%2F1kSVjYzdpfzGQwiCdNzcAcBIMh4Svm2kZNlII9eMS5PfSRuwj9haS0BP0p18Hi8K1C30%2Bz044e3cJktvQuX73rgDTzol3JBzyBoUjGIkSlii9u4RPk5j%2Bhq%2BRkGmqYiEb9HS4F2OJ6qtwwQh%2B5xi7CZVGMqGSKh8o5QLin29UctBL%2Bihcg%2Fy8B%2BULil8weHIS3uxw5XfWfdtlquvAcNx6gqVABiy2mQ38Ln4N2wwu6VMTqJGpqyBYasSL%2Feuk0wc1LV3n044Qbyl0FSyFbIVON3cquZjjIZDz80Au6MVub%2FUdrvhrwSUPkCRmO4HETzocyU5X%2FE1dlgxdVLmJpfMhFJ93lPh9UT5q9yEQKMYpLIUSzZES%2F3TYWaKvhlVnjKGc5P%2BaFE14LdF5zdudcb%2F5InrH0izbX3UUkF2xIjxgp24e4pEGAc%2BL3Ruz1PukLQZxJMTu9WD6mbSFxZESeWCJGvz%2BhRhjg7enwjGsqfv9ofpAhN2KxLA9UvP7g6zm4F%2BdFLlOvoRV8%2F2ujxZc0wFOn0S5kvwgnCio9Y7xe6X9Q8BSSb653oiUSCbBKwor2Z6X8Y2aPOYX6GIpz1Uj%2BG6%2B%2FyCDE3zkF1G7Ihe0uNvK6ufmQU0FIMi1u8I3%2BajL1fKYTD4khsfu9DcdIfxRjtsHda4xRyrJQwTNpS3zux0P8jsvt8giwpoo0WCHPHeX2n0QYxDFsJi5Bs6g%2BfJXFO4eVlduYh0gVjq16%2BCPeWCj10PHSIrkidLHUvM3d789tODfQQzfpcSaPHpwcYTCHggZu4slH6dM4p%2FeUM6az3ABSC9T5ZhD78QJe8fPhim55iXKWHXHVCJhDJmLM2sHOn8G0ee6aT7lWNft22ZFkhKetDTrTtWnbn4j2%2BGozFTSII5neikf2fG5kneO6pW%2Fu91kKpa6Td7s3jWV5jqxepmrZlPHXRKT9FQJLYPrU0kktymqkH792rORDmDwrV3HWG3%2FvH4RzeHgN%2Bv5N%2BW4u7mlTJy0j9CpzUcE7SxsnJ9fZXJh9Py2cG7Thpv0qZu7wftR9O7jTfI2lqJSv%2F2WSt2CpCjTK4v0T1AqtVZiA53%2B%2FjPLgajZcorHkh8rlxk%2BPr7VF0Inns1MNpvNeDc9J2mn22Lu8VPZltD957BVAEHDrdbMsRS6YKKnIjQdyYf9QX5fE20HBnN%2F%2BHojDKBb%2FBofWwGQSlxqfBad7uJsyWw1mzJNnzkv%2FtH755ln2ayq8RRtm%2BIaOtO0H5i9fx6TZFETma6QJk2y3%2FX2QBReuKvGnctM2xw1yzZD3vYD0Z00Pggh33bnZCskL%2BUxoG2QUNFf3RNXBYsb3SAjeUnPbWuF2NCTJnPo6QvFzYCtDaJ2Nz%2BaJX%2Fa%2BweZlUeFPz%2BhJxKl0%2BnQp8%2F%2FbvOJmnjd%2BICO0kYfkAFL4PlXz5%2F%2F9Rnk%2BVd%2F%2B9wWoGoikOef%2BgDW9L%2FJhGzf9wFhAs%2F%2Fdi%2Bf22ZbNWErhK4yIPmrk1Do3wFdH5%2BTtlBNkLZOpCZCf%2F0ZChTAoqE%2FPz9%2F%2Fof0J07ey1KhsyZKLvTV38Cgz59%2F9RUc8Dwg%2FtmGDhDszwbKX%2B1LgYvQVw3v4nmgt4cT8aIhnNine8pfWNsDPC5SD4Woj8jFRX2oRnn%2Bp61tJLwINEL%2Bivh6hthNe%2BOPFqnAZz6O%2FwxgzjbPN5urD4i6TK1MP3q0gtkCoQCFUXuLi23PFmzS5Pnn3n9Ogi%2By%2BGgcQfaQLK48erTYenVSqSugLAX56vnnkwCGkUxvxUtddsK5nyzu6UGfaVBJAGJlnVjh019QEz4FkKorCWnPUayLHccoisIwW2IciSDEQi6u7FEYqACEcaEjOotSR65Mr6ys7NmwxaoijxZbHKtxozewiFGLK%2FAu0K9FKY%2FIvhcruzc%2BPT0%2BTlGJxUdVWWmB%2BEh4%2B9OLWO2A8Ud7vT20BCyBIHvYYsVUPIRs2ovTlhMrANnDVu4hPT20ZNZtS4AjV6gEkKZrEKypAJrxPfi%2FcSpRexfj43s9PY%2FMRybA6%2FBrEUxWhUw3QZRKBvJoHKy1V2VMgya9QMClK%2FB6yla3N68J1XjZRcMm0DfvrTXdo7mQR0B5J7W30gCZphqvJIDb%2BYKQqP9%2Fb44304np8ZU9DDm2CdLQw2HNh94AxFbNZRAhkkNYPWuhE5Dle9heEwLOQjXc3WalQc3xlQRVfyPjKBklQdRWxk0ixvjiYgujCaK0ODF0tzUGEXYPWZGS8Wp7eY1MLEKGo%2Bxoh9ybS0tQK4t7CRuqOo2Qbg1YqbTqcGSDcf4V09OtjEZNzKY93iPU3njDe1nBukHUSzTWFE2tkGnq%2FhISxB9KPgzK1nQPEDXjSnRAPOLzpKa0xk2h0ry416zuir4LBOJ25VGriZBU7TYNAeqrHjt7hCFFUP41vWKc6gxBVaLV09PIEehUUMUh3LDqs0GU1jIKb%2F7o5peMU52fQKh1J6bbwgl1CWhLi%2BPQWCinu%2FIDaLQWFnzXemwVInIRoGYB914bpIIw4RhUS5y1oOKntloIEqht8V3TpKO5tDCcQMEdrwqcf3p6emVP7%2BLM5rKbOzNr0MOlzZwJ4wtai5lQqUZ5ou88DavtJkS5F3DCHoW70S1aaq26egyNJRYFLAVNGMo1qN0t49U%2BumLqaZTw4IQEhpftTSOOZh8MNd4WgaDzIoYmJ4rs%2FmAiMxHRU%2FyUlUhQGM4y9pYpysd3gHbPgZloNx6h3RYJj4nT2pkyywvBWcyzbS9g9JDf7dUGstTk05rNVqmTnVajmQUR3j7k9CuP2vJ1Ghh4%2FMv9fDVdOwRctJLo%2B6GAQsJUWn7FK5V%2BAMVGb7J8yR97Z4b4Q%2FNcTSCuoEnTkp%2FeI03sBEzI%2FEAGsoi6FoZz5i%2F9YwK1ZqZMu0iMF5LEWe6L%2FRi6JlFbzT4G%2FcSupSW7uf8HqXWX%2F%2BCpHyL%2FB1EIPI%2BAySyTAAAAAElFTkSuQmCC'%3E%3C%2Fimage%3E\" rel=\"noopener\">Simpsons Family Tree<\/a> link.<\/p>\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\/python-graphviz-via-php-on-almalinux-family-tree-image-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Family Tree Image Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pgvphpalftt'>Previous relevant <a target=\"_blank\" title='Python GraphViz via PHP on AlmaLinux Family Tree Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/python-graphviz-via-php-on-almalinux-family-tree-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Family Tree Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Python GraphViz via PHP on AlmaLinux Family Tree Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/family_tree_start.gif\" title=\"Python GraphViz via PHP on AlmaLinux Family Tree Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Python GraphViz via PHP on AlmaLinux Family Tree Tutorial<\/p><\/div>\n<p>Thinking on the hierarchical skills of <a target=\"_blank\" title=\"GraphViz\" href='\/\/graphviz.org\/' rel=\"noopener\">GraphViz<\/a>, it is not surprising that we turn to <i>Family Tree<\/i> functionality, as the follow up work onto yesterday&#8217;s <a title='Python GraphViz via PHP on AlmaLinux Organization Hierarchy Emoji Tutorial' href='#pgvphpalohet'>Python GraphViz via PHP on AlmaLinux Organization Hierarchy Emoji Tutorial<\/a>.<\/p>\n<p>y<\/p>\n<p>If you examine this <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/family_tree.php-GETME\" rel=\"noopener\">how we got there<\/a> link, you will see by how little has changed, how there is so much in common as we build on previous GraphViz work, rather than worrying about the differences &#8230; they soon become apparent as you test the <a target=\"_blank\" href='\/\/forum.graphviz.org\/t\/emojis-not-working\/1935\/2' title='https:\/\/forum.graphviz.org\/t\/emojis-not-working\/1935\/2' rel=\"noopener\">https:\/\/forum.graphviz.org\/t\/emojis-not-working\/1935\/2<\/a> inspired <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.py-GETME\" rel=\"noopener\">family_tree.py<\/a> Python code inspiration, thanks.<\/p>\n<p>That last link&#8217;s Python code made us ditch the inhouse <i>| and ; and .<\/i> delimitation ideas in favour of the Python structure syntax, it being as self explanatory (or more, we daresay) as the inhouse delimiter ideas, and easier to implement &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n\/\/ family_tree.php<br \/>\n\/\/ RJM Programming<br \/>\n\/\/ September, 2024<br \/>\n\/\/ Trying out Python GraphViz package ... thanks to https:\/\/forum.graphviz.org\/t\/emojis-not-working\/1935\/2<br \/>\n<br \/>\n  $abl=['my_family_tree',\"\\\"Malik\u2705\\\", \\\"Cecil\\\", \\\"Sultan\\\"\",\"\\\"Mehwish\\\", \\\"Miriam\\\", \\\"Sultana\\\"\",\"\\\"Malik\u2705\\\": [\\\"Sultan\\\", \\\"Usman\\\"], \\\"Cecil\\\": [\\\"Margaret\\\", \\\"Christina\\\"], \\\"Sultan\\\": [\\\"Lilly\\\", \\\"Adam\\\"]\"];<br \/>\n  $newabl=['my-family-tree',\"\\\"Malik\u2705\\\", \\\"Cecil\\\", \\\"Sultan\\\"\",\"\\\"Mehwish\\\", \\\"Miriam\\\", \\\"Sultana\\\"\",\"\\\"Malik\u2705\\\": [\\\"Sultan\\\", \\\"Usman\\\"], \\\"Cecil\\\": [\\\"Margaret\\\", \\\"Christina\\\"], \\\"Sultan\\\": [\\\"Lilly\\\", \\\"Adam\\\"]\"];<br \/>\n<\/code><br \/>\n  \/\/ lots more PHP code follows<br \/>\n?&gt;<\/p>\n<p>It also served to remind us that users might want to embed emojis into their Family Tree names, so to leave SVG as our default output format would be advantageous, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">again<\/a>.  All the <a href='#psp'>Stop Press<\/a> ideas yesterday were relevant too, for the PHP <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.php-GETME\" rel=\"noopener\">family_tree.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/family_tree.php\" rel=\"noopener\">Family Tree<\/a> creation &#8230;<\/p>\n<blockquote><p>\nCalling cab (6754 &#8211; 6756 + 5).\n<\/p><\/blockquote>\n<p> &#8230; helper (of Python).<\/p>\n<p>Sharing and collaboration concepts mean that we can share links such as <a target=\"_blank\" title='The Simpsons Family Tree' href='\/\/www.rjmprogramming.com.au\/family_tree.php?rand=2575732#title=the%20simpsons%20family%20tree#back=aed8e8#fsize=#shape=#mode=Digraph#fmt=svg#one=%22Clancy%20Bouvier%22%2C%20%22Grampa%20Simpson%20Abraham%20II%22%2C%20%22Homer%20Jay%20Simpson%22#two=%22Jacqueline%20Ingrid%20Bouvier%22%2C%20%22Mona%20Simpson%22%2C%20%22Marjorie%20Jacqueline%20Simpson%22#three=%22Clancy%20Bouvier%22%3A%20%5B%22Patty%20Bouvier%22%2C%20%22Selma%20Bouvier%22%2C%20%22Marjorie%20Jacqueline%20Simpson%22%5D%2C%20%22Grampa%20Simpson%20Abraham%20II%22%3A%20%5B%22Homer%20Jay%20Simpson%22%2C%20%22Herbert%20Herb%20Powell%22%2C%20%22Abbey%20Simpson%22%5D%2C%20%22Homer%20Jay%20Simpson%22%3A%20%5B%22Bartholemew%20Jolo%20Simpson%22%2C%20%22Lisa%20Marie%20Simpson%22%2C%20%22Maggie%20Simpson%22%5D' rel=\"noopener\">The Simpsons Family Tree<\/a> we gleaned from <img src='\/\/images.edrawmax.com\/what-is\/simpsons-family-tree\/example.png'><\/img> thanks to <a target=\"_blank\" href='\/\/www.edrawmax.com\/article\/simpsons-family-tree.html' rel=\"noopener\">this great link<\/a> to look like <img src='\/\/www.rjmprogramming.com.au\/doctest-output\/simpsonsfam_ilytree.svg'><\/img> as shown in <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/family_tree_start.gif' rel=\"noopener\">today&#8217;s animated GIF<\/a> presentation.<\/p>\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\/python-graphviz-via-php-on-almalinux-family-tree-tutorial\/' rel=\"noopener\">New Python GraphViz via PHP on AlmaLinux Family Tree Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pgvphpalohet'>Previous relevant <a target=\"_blank\" title='Python GraphViz via PHP on AlmaLinux Organization Hierarchy Emoji Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/python-graphviz-via-php-on-almalinux-organization-hierarchy-emoji-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Organization Hierarchy Emoji Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Python GraphViz via PHP on AlmaLinux Organization Hierarchy Emoji Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/pythongraphviz_example_organization_emoji.gif\" title=\"Python GraphViz via PHP on AlmaLinux Organization Hierarchy Emoji Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Python GraphViz via PHP on AlmaLinux Organization Hierarchy Emoji Tutorial<\/p><\/div>\n<p>As far as the title of today&#8217;s tutorial goes, onto yesterday&#8217;s <a title='Python GraphViz via PHP on AlmaLinux Organization Hierarchy Tutorial' href='#pgvphpaloht'>Python GraphViz via PHP on AlmaLinux Organization Hierarchy Tutorial<\/a>, we figure &#8220;the new word&#8221; in the title could have come from &#8230;<\/p>\n<ul>\n<li>Emoji &#8230; as we decided upon <font size=1>(as much as anything, because non-ascii characters for other non-English language requirements, might now be possible within the content of the GraphViz entity, as a result)<\/font> &#8230; or &#8230;<\/li>\n<li>Format &#8230; or &#8230;<\/li>\n<li>Sharing &#8230; or &#8230;<\/li>\n<li>Encoding &#8230; or &#8230;<\/li>\n<li>Delimitation<\/li>\n<\/ul>\n<p>We wanted to look back at yesterday to it&#8217;s &#8220;code architecture&#8221;, if you will, as a &#8220;lead in&#8221; to where we are coming at here.  Yesterday, in the user definable textarea elements &#8230;<\/p>\n<blockquote><p>\n<font size=4>|<\/font> &#8230; &#8220;edge&#8221; linkage record set delimiter<br \/>\n<font size=4>;<\/font> &#8230; parent from rest delimiter<br \/>\n<font size=4>,<\/font> &#8230; rest child name(s) delimiter\n<\/p><\/blockquote>\n<p> &#8230; this <i>user usage delimiter characters<\/i> &#8220;inhouse rules&#8221; architecture contributes to making it all the more crucial in the coding, to nail down how the <font size=4>+<\/font> character is handled &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function contentfix(inid) {<br \/>\n    document.getElementById('ititle').value=document.getElementById('ititle').value.replace(\/\\+\/g,'-').replace(\/\\=\/g,'-').replace(\/\\ \/g,'-');<br \/>\n    document.getElementById('none').value=various(document.getElementById('one').value.replace(\/\\+\/g,String.fromCharCode(9)));<br \/>\n    document.getElementById('ntwo').value=various(document.getElementById('two').value.replace(\/\\+\/g,String.fromCharCode(9)));<br \/>\n    document.getElementById('nthree').value=various(document.getElementById('three').value.replace(\/\\+\/g,String.fromCharCode(9)));<br \/>\n    return inid;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; which, as you can see with our HTML form <i>onsubmit<\/i> event fired Javascript function above, amounts to mapping real content <font size=4>+<\/font> characters to <i>horizontal tab<\/i> to differentiate this mode of use from the use HTML form encoding uses for it to represent an encoded space character.  Are you now getting a bit of an idea with today&#8217;s &#8220;tidying up&#8221; and &#8220;nuancing&#8221; feel?!<\/p>\n<p>What about if any &#8220;edge&#8221; names contain one of those delimiters, as above?  Well, we try &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  function various(indi) {<br \/>\n    var outdi=indi;<br \/>\n    outdi=outdi.replace(\/\\|\\;\/g, encodeURIComponent('|') + ';');<br \/>\n    outdi=outdi.replace(\/\\,\\;\/g, encodeURIComponent(',') + ';');<br \/>\n    outdi=outdi.replace(\/\\;\\;\/g, encodeURIComponent(';') + ';');<br \/>\n<br \/>\n    outdi=outdi.replace(\/\\|\\,\/g, encodeURIComponent('|') + ',');<br \/>\n    outdi=outdi.replace(\/\\,\\,\/g, encodeURIComponent(',') + ',');<br \/>\n    outdi=outdi.replace(\/\\;\\,\/g, encodeURIComponent(';') + ',');<br \/>\n<br \/>\n    outdi=outdi.replace(\/\\|\\|\/g, encodeURIComponent('|') + '|');<br \/>\n    outdi=outdi.replace(\/\\,\\|\/g, encodeURIComponent(',') + '|');<br \/>\n    outdi=outdi.replace(\/\\;\\|\/g, encodeURIComponent(';') + '|');<br \/>\n<br \/>\n    return outdi;<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in that regard, and &#8220;double decode&#8221; <font size=1>(with a bit of nuance in between)<\/font> on the other side, to try to account for this.  We&#8217;ll see!<\/p>\n<p>But the day started thinking about Emojis.  What would happen in our <i>PDF<\/i> default output with Emoji content being introduced by the user within input textarea elements, as they go to Draw their Hierarchical Organization chart?  Well, not so good.  But, thanks to <a target=\"_blank\" href='https:\/\/stackoverflow.com\/questions\/6743382\/graphviz-not-supporting-utf-8-encoding' title='Graphviz not supporting UTF-8 encoding' rel=\"noopener\">Graphviz not supporting UTF-8 encoding<\/a> webpage, we got put onto the idea that an alternative, and now the default, format of output could be <i>SVG<\/i> &#8230; and trying it worked &#8230; thanks!<\/p>\n<p>And then there&#8217;s Sharing (and collaboration) thoughts, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">again<\/a>?!  Email and SMS hashtagged URLs, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">again<\/a>?!  Well, here, we modelled ideas from the sharing ideas of the <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/pdf-to-images-and-microsoft-office-on-almalinux-tutorial\/' title='PDF to Images and Microsoft Office on AlmaLinux Tutorial' rel=\"noopener\">PDF to Images and Microsoft Office on AlmaLinux Tutorial<\/a> thread of blog postings, ending up with &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction emailit(inais) {<br \/>\n   event.stopPropagation();<br \/>\n   var em=null;<br \/>\n   em=prompt('Please enter email address to send output ' + document.getElementById('fmt').value + ' URL link to.', '');<br \/>\n   if (em == null) { em=''; }<br \/>\n   if (em.indexOf('@') != -1) {<br \/>\n    document.getElementById('ititle').value=document.getElementById('ititle').value.replace(\/\\+\/g,'-').replace(\/\\=\/g,'-').replace(\/\\ \/g,'-');<br \/>\n    document.getElementById('none').value=various(document.getElementById('one').value.replace(\/\\+\/g,String.fromCharCode(9)));<br \/>\n    document.getElementById('ntwo').value=various(document.getElementById('two').value.replace(\/\\+\/g,String.fromCharCode(9)));<br \/>\n    document.getElementById('nthree').value=various(document.getElementById('three').value.replace(\/\\+\/g,String.fromCharCode(9)));<br \/>\n     em+='?subject=Hierarchy%20Organization&body=' + encodeURIComponent( (document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#title=' + encodeURIComponent(document.getElementById('ititle').value) + '#fmt=' + encodeURIComponent(document.getElementById('fmt').value) + '#one=' + encodeURIComponent(document.getElementById('none').value) + '#two=' + encodeURIComponent(document.getElementById('ntwo').value) + '#three=' + encodeURIComponent(document.getElementById('nthree').value)).replace('#fmt=svg#one=#','#fmt=pdf#one=#')   );<br \/>\n     document.getElementById('dimap').innerHTML=\\\"&lt;a style=display:none; id=theaemail target=_blank href='mailto:\\\" + em + \\\"'&gt;Email&lt;\/a&gt;\\\";<br \/>\n     document.getElementById('theaemail').click();<br \/>\n   }<br \/>\n   return false;<br \/>\n}<br \/>\n<br \/>\nfunction smsit(inais) {<br \/>\n   event.stopPropagation();<br \/>\n   var em=null;<br \/>\n   em=prompt('Please enter SMS number to send output ' + document.getElementById('fmt').value + ' URL link to.', '');<br \/>\n   if (em == null) { em=''; }<br \/>\n   if (em.trim() != '') {<br \/>\n     if (em.trim() != '') {<br \/>\n    document.getElementById('ititle').value=document.getElementById('ititle').value.replace(\/\\+\/g,'-').replace(\/\\=\/g,'-').replace(\/\\ \/g,'-');<br \/>\n    document.getElementById('none').value=various(document.getElementById('one').value.replace(\/\\+\/g,String.fromCharCode(9)));<br \/>\n    document.getElementById('ntwo').value=various(document.getElementById('two').value.replace(\/\\+\/g,String.fromCharCode(9)));<br \/>\n    document.getElementById('nthree').value=various(document.getElementById('three').value.replace(\/\\+\/g,String.fromCharCode(9)));<br \/>\n     em+='&body=' + encodeURIComponent( (document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#title=' + encodeURIComponent(document.getElementById('ititle').value) + '#fmt=' + encodeURIComponent(document.getElementById('fmt').value) + '#one=' + encodeURIComponent(document.getElementById('none').value) + '#two=' + encodeURIComponent(document.getElementById('ntwo').value) + '#three=' + encodeURIComponent(document.getElementById('nthree').value)).replace('#fmt=svg#one=#','#fmt=pdf#one=#')    );<br \/>\n     document.getElementById('dimap').innerHTML=\\\"&lt;a style=display:none; id=theasms target=_blank href='sms:\\\" + em + \\\"'&gt;SMS&lt;\/a&gt;\\\";<br \/>\n     if (!document.getElementById('theasms') && document.getElementById('psms')) {<br \/>\n     document.getElementById('psms').click();<br \/>\n     } else {<br \/>\n     document.getElementById('theasms').click();<br \/>\n     }<br \/>\n     }<br \/>\n   }<br \/>\n   return false;<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; within <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php--GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php--GETME\" rel=\"noopener\">hierarchy_organization.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php\" rel=\"noopener\">Hierarchy Organization<\/a> diagram &#8220;drawer&#8221;.<\/p>\n<p id=psp><b><i>Stop Press<\/i><\/b><\/p>\n<p>And then it occurred to us that there is also the GraphViz graph mode ( default Digraph versus Graph ), and it&#8217;s &#8220;edge&#8221; element background colour and shape and font size, as well as a resizing mechanism, that could be up for grabs, via user input in  <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php---GETME\" rel=\"noopener\">the tweaked<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php---GETME\" rel=\"noopener\">hierarchy_organization.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php\" rel=\"noopener\">Hierarchy Organization<\/a> diagram &#8220;drawer&#8221;.<\/p>\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\/python-graphviz-via-php-on-almalinux-organization-hierarchy-emoji-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Organization Hierarchy Emoji Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pgvphpaloht'>Previous relevant <a target=\"_blank\" title='Python GraphViz via PHP on AlmaLinux Organization Hierarchy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/python-graphviz-via-php-on-almalinux-organization-hierarchy-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Organization Hierarchy Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Python GraphViz via PHP on AlmaLinux Organization Hierarchy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/pythongraphviz_example_organization.gif\" title=\"Python GraphViz via PHP on AlmaLinux Organization Hierarchy Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Python GraphViz via PHP on AlmaLinux Organization Hierarchy Tutorial<\/p><\/div>\n<blockquote><p>\nCalling cab (6754 &#8211; 6756 + 4).\n<\/p><\/blockquote>\n<p>Huh?!<\/p>\n<blockquote><p>\nCalling the <i>second cab off the rank<\/i>.\n<\/p><\/blockquote>\n<p>Yes, now that we understand a bit more about file permission issues, after yesterday&#8217;s <a title='Python GraphViz via PHP on AlmaLinux Permissions Tutorial' href='#pgvphpalpt'>Python GraphViz via PHP on AlmaLinux Permissions Tutorial<\/a>, having PHP hosting Python with GraphViz calls, let&#8217;s turn our attention to the issue of &#8220;lots of data&#8221;, today, with our &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php\" rel=\"noopener\">Organization Hierarchy<\/a><sub><font size=1 color=blue>ist<\/font><\/sub><br \/>\n<\/code><\/p>\n<p> &#8230; what do you say?!  It&#8217;s a bit embarrassingly easy a remedy because we are writing in PHP, to just &#8230;<\/p>\n<ul>\n<li>make any $_GET[] <font size-1>(web browser address bar arguments) references become $_POST[] equivalents &#8230; and any &#8230;<\/li>\n<li>HTML form method=GET should become HTML form method=POST<\/li>\n<\/ul>\n<blockquote><p>\nCalling log (6754 &#8211; 6756 + 4 &#8211; 1) &#8230; to fall off.\n<\/p><\/blockquote>\n<p>Python code wise, our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.py-GETME\" rel=\"noopener\">hierarchy_organization.py<\/a> inspiration came from <a target=\"_blank\" title='Python GraphViz package information' href='\/\/graphviz.readthedocs.io\/en\/stable\/examples.html' rel=\"noopener\">https:\/\/graphviz.readthedocs.io\/en\/stable\/examples.html<\/a> thanks.<\/p>\n<p>Then we worked on PHP <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/hierarchy_organization.php-GETME\" rel=\"noopener\">hierarchy_organization.php<\/a> to be as close to being a buddy with a Python as, well, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=4vuW6tQ0218' rel=\"noopener\">Monty<\/a>?!<\/p>\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\/python-graphviz-via-php-on-almalinux-organization-hierarchy-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Organization Hierarchy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pgvphpalpt'>Previous relevant <a target=\"_blank\" title='Python GraphViz via PHP on AlmaLinux Permissions Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/python-graphviz-via-php-on-almalinux-permissions-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Permissions Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/subgraph_example.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Python GraphViz via PHP on AlmaLinux Permissions Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/pythongraphviz_example_permissions.gif\" title=\"Python GraphViz via PHP on AlmaLinux Permissions Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Python GraphViz via PHP on AlmaLinux Permissions Tutorial<\/p><\/div>\n<p>Did you guess, regarding the <i>Python Graphviz via PHP<\/i> work of yesterday&#8217;s <a title='Python GraphViz via PHP on AlmaLinux Tutorial' href='#pgvphpalt'>Python GraphViz via PHP on AlmaLinux Tutorial<\/a>, we were experiencing File Permission issues?<\/p>\n<p>Well, yesterday, regarding the <i>Python Graphviz via PHP<\/i> work of yesterday&#8217;s <a title='Python GraphViz via PHP on AlmaLinux Tutorial' href='#pgvphpalt'>Python GraphViz via PHP on AlmaLinux Tutorial<\/a>, we were experiencing File Permission issues.<\/p>\n<p>We thought we&#8217;d move the Python, via PHP processing, totally into the purview of the web server administration owner, by involving a &#8230;<\/p>\n<ol>\n<li>Korn Shell *.ksh &#8230; supervised by &#8230;<\/li>\n<li>crontab &#8230; pointing to &#8230;<br \/>\n<code><br \/>\nksh -c 'for i in `find \/home\/rjmprogr\/public_html\/ -name \"subgraph_example_*.ksh\"`; do ksh -c `echo $i`; done'<br \/>\n<\/code><br \/>\n &#8230; very regularly\n<\/li>\n<\/ol>\n<p> &#8230; arrangement, but even that failed, in a first incarnation using <i>\/tmp\/<\/i> placement of the Korn Shell file.  &#8220;Permission denied&#8221;, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">again<\/a>.  Running a Korn Shell from <i>\/tmp\/<\/i> on AlmaLinux must be a no-no, so moved the place to be AlmaLinux web server&#8217;s Document Root place, and then things started happening, in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/subgraph_example.php--GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/subgraph_example.php--GETME\" rel=\"noopener\">subgraph_example.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/subgraph_example.php\" rel=\"noopener\">Python GraphViz using web application<\/a>.<\/p>\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\/python-graphviz-via-php-on-almalinux-permissions-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Permissions Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pgvphpalt'>Previous relevant <a target=\"_blank\" title='Python GraphViz via PHP on AlmaLinux Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/python-graphviz-via-php-on-almalinux-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/subgraph_example.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Python GraphViz via PHP on AlmaLinux Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/pythongraphviz_example.gif\" title=\"Python GraphViz via PHP on AlmaLinux Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Python GraphViz via PHP on AlmaLinux Tutorial<\/p><\/div>\n<p>Do you remember reading, with <a target=\"_blank\" title='PHP Image GraphViz via Pear on AlmaLinux Primer Tutorial' href='#PIGVPOAPT' rel=\"noopener\">PHP Image GraphViz via Pear on AlmaLinux Primer Tutorial<\/a> below, our outlining three known GraphViz guises &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-graphviz-via-pear-on-almalinux-primer-tutorial\/'>\n<ul>\n<li>the recent, alas now deprecated, <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Charts<\/a> GraphViz option means of drawing <a target=\"_blank\" title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp' rel=\"noopener\">SVG<\/a> graphics within an HTML image &#8230; we&#8217;ve known about before <i>about yesterday<\/i> &#8230;<\/li>\n<li>today&#8217;s interest, that being <a target=\"_blank\" title='Image GraphViz via Pear' href='https:\/\/pear.php.net\/package\/Image_GraphViz\/docs\/latest\/Image_GraphViz\/Image_GraphViz.html' rel=\"noopener\"><i>PHP Image GraphViz via Pear on AlmaLinux<\/i><\/a> install, via the AlmaLinux cPanel &#8220;Module Installers&#8221; <a target=\"_blank\" title='PEAR installer repository information from Wikiedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/PEAR' rel=\"noopener\">Pear<\/a> installer page, means by which we can use GraphViz calls in PHP code &#8230; and, for the future &#8230;<\/li>\n<li>GraphViz installs for Python via pip<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230;?  Well, today, we start down the road of &#8230;<\/p>\n<ol>\n<li>installing Python GraphViz package via &#8230;<br \/>\n<code><br \/>\npip install graphviz<br \/>\n<\/code><br \/>\n &#8230; then &#8230;\n<\/li>\n<li>getting great help from <a target=\"_blank\" title='Python GraphViz package information' href='\/\/graphviz.readthedocs.io\/en\/stable\/' rel=\"noopener\">https:\/\/graphviz.readthedocs.io\/en\/stable\/<\/a>, thanks, as the Python code basis we call <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/subgraph_example.py-GETME\" rel=\"noopener\">subgraph_example.py<\/a> &#8230; and &#8230;<\/li>\n<li>used and remoulded by our overseeing PHP <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/subgraph_example.php-GETME\" rel=\"noopener\">subgraph_example.php<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/subgraph_example.php\" rel=\"noopener\">Python GraphViz using web application<\/a><\/li>\n<\/ol>\n<p> &#8230; we need to work on more after this first draft start to another road of our GraphViz journey last talked about at <a title='PHP Image GraphViz via Pear on AlmaLinux Focus Tutorial' href='#phpigvpalft'>PHP Image GraphViz via Pear on AlmaLinux Focus Tutorial<\/a>.<\/p>\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\/python-graphviz-via-php-on-almalinux-tutorial\/' rel=\"noopener\">Python GraphViz via PHP on AlmaLinux Tutorial<\/a>.<\/p-->\n<hr>\n<p id='phpigvpalft'>Previous relevant <a target=\"_blank\" title='PHP Image GraphViz via Pear on AlmaLinux Focus Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-graphviz-via-pear-on-almalinux-focus-tutorial\/' rel=\"noopener\">PHP Image GraphViz via Pear on AlmaLinux Focus Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image GraphViz via Pear on AlmaLinux Focus Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/recipe_helper_focus.gif\" title=\"PHP Image GraphViz via Pear on AlmaLinux Focus Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Image GraphViz via Pear on AlmaLinux Focus Tutorial<\/p><\/div>\n<p>It reared it&#8217;s ugly head with the <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"Animated GIF Creator\" rel=\"noopener\">Animated GIF Creator<\/a> here at RJM Programming (helped out by the great <a target=\"_blank\" href='http:\/\/www.jeroenvanwissen.nl\/weblog\/php\/howto-generate-animated-gif-with-php' rel=\"noopener\">Jeroen van Wissen<\/a> open source work, thanks).  And with yesterday&#8217;s <a title='PHP Image GraphViz via Pear on AlmaLinux Recallable Tutorial' href='#phpigvpalrt'>PHP Image GraphViz via Pear on AlmaLinux Recallable Tutorial<\/a> it reared up again.<\/p>\n<blockquote><p>\nOn <i>non-mobile<\/i> focus goes to the address bar on many web browsers unless there is a (nominally) visible input type=text or textarea next in line.\n<\/p><\/blockquote>\n<p>It&#8217;s hard to keep in mind except as it &#8220;rears up&#8221; in an annoying way, but if we&#8217;d thought back, yes, we allow in the linked list feel of <i>revealing textboxes (or textareas) only as they are needed scenarios<\/i> we allow for two blank ones to be (nominally) visible at any given time &#8230; not one &#8230; but two, presumably because there is a tiny Javascript DOM &#8220;refresh period&#8221; not short enough to stop the web browser &#8220;desperation measure&#8221; (of placing focus in the address bar) happening<a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=qLNYsqpXQXE' rel=\"noopener\">?<\/a>!<\/p>\n<p>Why the <i>non-mobile<\/i> mention?  Well, on mobile, a user programming [HTMLelement].focus(); call has no affect, as the touch operating systems need control of focus arrangements, presumably<a target=\"_bkank\" href='https:\/\/www.youtube.com\/watch?v=Cf3eElpP2Kg' title='?' rel=\"noopener\">?<\/a>!<\/p>\n<p>How can we forget?   My liege, please accept my humble apologies<a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=g2Y_p8-LbY4&#038;t=1m25s' rel=\"noopener\">?<\/a>!<\/p>\n<p>Why the <i>(nominally)<\/i> mentions?  Well, we have, successfully, in the past, just arranged a (statically HTML placed) textbox (ie. input type=text) that sits outside the viewing screen but not (nominally) invisible (eg. style=&#8217;position:absolute;top:-200px;left:-200px;&#8217;) can help you avoid the focus going up to the web browser address bar.<\/p>\n<p>So that&#8217;s that, and other progress today is to allow the emailing or SMS of a recalled URL <i>Step<\/i> arrangement via more options on that &#8220;Recall Dropdown&#8221; we started allowing for yesterday.<\/p>\n<p>Please see this happening in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/recipe_helper.php----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php----GETME\" rel=\"noopener\">PHP coded<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php\" rel=\"noopener\">My Recipe Steps<\/a> web application you can <a href='#myrhif'>also try below<\/a>.<\/p>\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\/new-php-image-graphviz-via-pear-on-almalinux-focus-tutorial\/' rel=\"noopener\">PHP Image GraphViz via Pear on AlmaLinux Focus Tutorial<\/a>.<\/p-->\n<hr>\n<p id='phpigvpalrt'>Previous relevant <a target=\"_blank\" title='PHP Image GraphViz via Pear on AlmaLinux Recallable Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-graphviz-via-pear-on-almalinux-recallable-tutorial\/' rel=\"noopener\">PHP Image GraphViz via Pear on AlmaLinux Recallable Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image GraphViz via Pear on AlmaLinux Recallable Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/recipe_helper_localstorage.jpg\" title=\"PHP Image GraphViz via Pear on AlmaLinux Recallable Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Image GraphViz via Pear on AlmaLinux Recallable Tutorial<\/p><\/div>\n<p>After yesterday&#8217;s <a title='PHP Image GraphViz via Pear on AlmaLinux Sharing Tutorial' href='#phpigvpalst'>PHP Image GraphViz via Pear on AlmaLinux Sharing Tutorial<\/a> some readers may be curious to understand the distinction between &#8230;<\/p>\n<ul>\n<li>email and SMS sharing &#8230; and &#8230;<\/li>\n<li>inhouse intersessional sharing via window.<a target=\"_blank\" title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a> (ie. like HTTP Cookies)<\/li>\n<\/ul>\n<p> &#8230; over yesterday&#8217;s and today&#8217;s blog posting timings.  Simply put, for us, we &#8230;<\/p>\n<ul>\n<li>take a deep breath before starting intersessional window.localStorage work, as it is not to be sneezed at, as any sort of doddle <font size=1>(at least for us)<\/font> &#8230; as well as &#8230;<\/li>\n<li>since last intersessional window.localStorage work we&#8217;ve started using email and SMS sharing hashtagging arrangements that fit in, like a glove, with this intersessional window.localStorage work &#8230; so that &#8230;<\/li>\n<li>even though, we write the code here in PHP, all this functionality is client based &#8230; which we like because &#8230;<\/li>\n<li>get the idea correct, with careful forward planning and implementation, we&#8217;ll be able to apply similar such thinking into the future, whether that be for clientside only web applications and\/or ones that call on serverside code (like PHP) &#8230; and &#8230;<\/li>\n<li>if we can keep things <i>just clientside<\/i> more readers can be involved, we figure<\/li>\n<\/ul>\n<p>If you&#8217;re wondering about the worry of any of this, it is to do with large <i>title and\/or URL link and\/or ingredient type data<\/i> whose data length could be huge, where most of our concern lies, and &#8230;<\/p>\n<ul>\n<li>hashtagging <font size=1>(where data limits are so much longer)<\/font> can help it remain as a clientside only solution environment (rather than relying on some form method=POST to a serverside (eg. PHP) receiver solution) &#8230;<\/li>\n<li>window.localStorage is a step up from the HTTP Cookie style of intersessional (personal) storage as far as amounts that can be stored is concerned<\/li>\n<\/ul>\n<p>What are we aiming for here, then, with our improvements?<\/p>\n<ul>\n<li><font color=blue>extend<\/font> the existant email and SMS functionality &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction emailit(<font color=blue>insg<\/font>) {<br \/>\n   var <font color=blue>em='', ccok='';<br \/>\n   if (estitle == '') {<br \/>\n     if (cookb.split(' Or hash delimited appended string can ')[0] != '') {<br \/>\n      cookb=cookb.replace(cookb.split(' Or hash delimited appended string can ')[0], '');<br \/>\n     }<br \/>\n   }<br \/>\n   if (('' + insg).replace(\/^null\/g,'').replace(\/^undefined\/g,'').trim() != '') {<br \/>\n   em='' + insg;<br \/>\n   } else {<\/font><br \/>\n   em=prompt('Please enter Email address to share with. '<font color=blue> + cookb<\/font>, '');<br \/>\n   <font color=blue>}<br \/>\n   if (em != null) {<br \/>\n     if (em.trim() == '' && estitle != '') {<br \/>\n       em='#' + estitle;<br \/>\n     } else if (em == estitle && estitle != '') {<br \/>\n       em='#' + estitle;<br \/>\n     }<br \/>\n   }<br \/>\n   if (em.indexOf('#') != -1) {<br \/>\n     cook=em.substring(eval(1 + eval('' + em.indexOf('#'))));<br \/>\n     em=em.split('#')[0].trim();<br \/>\n     if (cook.trim() != '') {<br \/>\n        deleteAVal('steps_' + cook.replace(\/\\ \/g,'-'),'');<br \/>\n        setAVal('steps_' + cook.replace(\/\\ \/g,'-'), \\\"\" . $hashurl . $hashurld . \"\\\" + anyhashes);<br \/>\n     }<br \/>\n   }<\/font><br \/>\n   if (em == null) { em=''; }<br \/>\n   if (em.trim() != '') {<br \/>\n     if (em.trim().indexOf('@') != -1) {<br \/>\n     em+='?subject=Steps&body=' + encodeURIComponent(\\\"\" . $hashurl . $hashurld . \"\\\" + anyhashes);<br \/>\n     document.getElementById('dimap').innerHTML=\\\"&lt;a style=display:none; id=theaemail target=_blank href='mailto:\\\" + em + \\\"'&gt;Email&lt;\/a&gt;\\\";<br \/>\n     document.getElementById('theaemail').click();<br \/>\n     } else if (em.trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n     em+='&body=' + encodeURIComponent(\\\"\" . $hashurl . $hashurld . \"\\\" + anyhashes);<br \/>\n     document.getElementById('dimap').innerHTML=\\\"&lt;a style=display:none; id=theasms target=_blank href='sms:\\\" + em + \\\"'&gt;SMS&lt;\/a&gt;\\\";<br \/>\n     document.getElementById('theasms').click();<br \/>\n     }<br \/>\n   }<br \/>\n   return false;<br \/>\n<br \/>\n}<br \/>\n<br \/>\nfunction smsit(<font color=blue>insg<\/font>) {<br \/>\n   var <font color=blue>em='', cook='';<br \/>\n   if (estitle == '') {<br \/>\n     if (cookb.split(' Or hash delimited appended string can ')[0] != '') {<br \/>\n      cookb=cookb.replace(cookb.split(' Or hash delimited appended string can ')[0], '');<br \/>\n     }<br \/>\n   }<br \/>\n   if (('' + insg).replace(\/^null\/g,'').replace(\/^undefined\/g,'').trim() != '') {<br \/>\n   em='' + insg;<br \/>\n   } else {<\/font><br \/>\n   em=prompt('Please enter SMS number to share with. '<font color=blue> + cookb<\/font>, '');<br \/>\n   <font color=blue>}<br \/>\n   if (em != null) {<br \/>\n     if (em.trim() == '' && estitle != '') {<br \/>\n       em='#' + estitle;<br \/>\n     } else if (em == estitle && estitle != '') {<br \/>\n       em='#' + estitle;<br \/>\n     }<br \/>\n   }<br \/>\n   if (em.indexOf('#') != -1) {<br \/>\n     cook=em.substring(eval(1 + eval('' + em.indexOf('#'))));<br \/>\n     em=em.split('#')[0].trim();<br \/>\n     if (cook.trim() != '') {<br \/>\n        deleteAVal('steps_' + cook.replace(\/\\ \/g,'-'),'');<br \/>\n        setAVal('steps_' + cook.replace(\/\\ \/g,'-'), \\\"\" . $hashurl . $hashurld . \"\\\" + anyhashes);<br \/>\n     }<br \/>\n   }<\/font><br \/>\n   if (em == null) { em=''; }<br \/>\n   if (em.trim() != '') {<br \/>\n     if (em.trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'') == '') {<br \/>\n     em+='&body=' + encodeURIComponent(\\\"\" . $hashurl . $hashurld . \"\\\" + anyhashes);<br \/>\n     document.getElementById('dimap').innerHTML=\\\"&lt;a style=display:none; id=theasms target=_blank href='sms:\\\" + em + \\\"'&gt;SMS&lt;\/a&gt;\\\";<br \/>\n     document.getElementById('theasms').click();<br \/>\n     } else if (em.trim().indexOf('@') != -1) {<br \/>\n     em+='?subject=Steps&body=' + encodeURIComponent(\\\"\" . $hashurl . $hashurld . \"\\\" + anyhashes);<br \/>\n     document.getElementById('dimap').innerHTML=\\\"&lt;a style=display:none; id=theaemail target=_blank href='mailto:\\\" + em + \\\"'&gt;Email&lt;\/a&gt;\\\";<br \/>\n     document.getElementById('theaemail').click();<br \/>\n     }<br \/>\n   }<br \/>\n   return false;<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; to cater for additional personalized Title (of steps) and Content of steps (using the hashtagging email and SMS URL methods set up yesterday)<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var estitle=\\\"\" . $estitle . \"\\\";<br \/>\n  var cookb=\\\"\" . $cookblurb . \"\\\";<br \/>\n  var lssel='';<br \/>\n  var woo=null;<br \/>\n <br \/>\nfunction deleteAVal(goodname, aparticularvalue) {<br \/>\n if (window.localStorage && goodname.indexOf('steps_') == 0) {<br \/>\n      if (('' + localStorage.getItem(goodname)).replace(\/^undefined\/g,'').replace(\/^null\/g,'') != '') {<br \/>\n        if (aparticularvalue == '') {<br \/>\n        localStorage.removeItem(goodname);<br \/>\n        } else {<br \/>\n        if (aparticularvalue.replace('HTTP','http').toLowerCase() == ('' + localStorage.getItem(goodname)).toLowerCase()) {<br \/>\n        localStorage.removeItem(goodname);<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction setAVal(cName, cVal) {<br \/>\n if (cName.indexOf('steps_') == 0) {<br \/>\n   if (window.localStorage) {<br \/>\n    localStorage.setItem(cName, encodeURIComponent(cVal));<br \/>\n    cookieAVal('steps_', true);<br \/>\n    return ' ';<br \/>\n   }<br \/>\n   return '';<br \/>\n }<br \/>\n return '';<br \/>\n}<br \/>\n<br \/>\nfunction gotothis(inu) {<br \/>\n  if (inu.trim() != '') {<br \/>\n   if (inu.indexOf('HTTP') == 0) {<br \/>\n     \/\/alert('2:' + inu);<br \/>\n     if (inu.indexOf('#steps_') != -1) {<br \/>\n     \/\/alert('22:' + inu.split('#')[eval(-1 + inu.split('#').length)]);<br \/>\n       deleteAVal(inu.split('#')[eval(-1 + inu.split('#').length)], encodeURIComponent(inu.replace('#' + inu.split('#')[eval(-1 + inu.split('#').length)], '').replace('HTTP','http')));<br \/>\n     \/\/alert('222:' + inu.split('#')[eval(-1 + inu.split('#').length)]);<br \/>\n       cookieAVal('steps_', true);<br \/>\n     \/\/alert('2222:' + inu.split('#')[eval(-1 + inu.split('#').length)]);<br \/>\n     }<br \/>\n   } else {<br \/>\n     woo=window.open(inu, '_blank', 'top=50,left=50,width=800,height=800');<br \/>\n   }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction cookieAVal(cName, selize) {<br \/>\n var key=null;<br \/>\n if (selize && window.localStorage) {<br \/>\n  lssel=' ';<br \/>\n  for (var i=0; i&lt;localStorage.length; i++) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/41271092\/how-to-loop-through-localstorage-values<br \/>\n   key = localStorage.key(i);<br \/>\n   if (('' + key).indexOf(cName) == 0) {<br \/>\n     if (lssel.trim() == '') {<br \/>\n       lssel='&lt;select id=sells onchange=gotothis(this.value);&gt;&lt;option value=\\\"\\\"&gt;Recallable Steps below ...&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n     }<br \/>\n     lssel=lssel.replace('&lt;\/select&gt;', '&lt;option value=\\\"' + decodeURIComponent(localStorage.getItem('' + key)) + '\\\"&gt;' + ('' + key).substring(eval('' + cName.length)).replace(\/\\_\/g,' ').replace(\/\\-\/g,' ') + '&lt;\/option&gt;' + '&lt;option value=\\\"' + decodeURIComponent(localStorage.getItem('' + key).replace('http','HTTP')) + '#steps_' + ('' + key).substring(eval('' + cName.length)) + '\\\"&gt;Remove ' + ('' + key).substring(eval('' + cName.length)).replace(\/\\_\/g,' ').replace(\/\\-\/g,' ') + '&lt;\/option&gt;' + '&lt;\/select&gt;');<br \/>\n   }<br \/>\n  }<br \/>\n  if (lssel != '') {<br \/>\n   document.getElementById('ssel').innerHTML=lssel.trim();<br \/>\n  }<br \/>\n }<br \/>\n if (cName.indexOf('steps_') == 0) {<br \/>\n   if (window.localStorage) {<br \/>\n    if (decodeURIComponent(('' + localStorage.getItem(cName)).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {<br \/>\n     return decodeURIComponent(localStorage.getItem(cName));<br \/>\n    }<br \/>\n    if (decodeURIComponent(('' + sessionStorage.getItem(cName)).replace(\/^undefined\/g,'').replace(\/^null\/g,'')) != '') {<br \/>\n     return decodeURIComponent(sessionStorage.getItem(cName));<br \/>\n    }<br \/>\n   }<br \/>\n   return '';<br \/>\n }<br \/>\n return '';<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;\n<\/li>\n<li>add a new &#8230;<br \/>\n<code><br \/>\n&lt;a id=pcookie title='Recall this'  class=share  onclick=\"return emailit(estitle);\" style='display:none;text-decoration:none;cursor:pointer;'&gt;&#127850;&lt;\/a&gt;<br \/>\n<\/code><br \/>\n &#8230; emoji link for intersessional window.localStorage work that calls the email functionality modified Javascript function &#8230;<\/li>\n<li>allowing a window.localStorage.setItem([Title (of steps)], encodeURIComponent([Content of steps])) to add a personalized and recallable record be kept on the web browser of use &#8230; recallable via &#8230;<\/li>\n<li>new dropdown populated with existant such records, as well as a dropdown option allowing the user to remove said records, too &#8230; which &#8230;<\/li>\n<li>can navigate the user to this recallable Steps idea in a new webpage incarnation &#8230; <\/li>\n<li>a dropdown arrangement which is intersessional as well as intrasessional by nature, and personalized to that user&#8217;s use of the web browser on that device in question<\/li>\n<\/ul>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/recipe_helper.php---GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php---GETME\" rel=\"noopener\">PHP coded<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php\" rel=\"noopener\">My Recipe Steps<\/a> web application you can <a href='#myrhif'>also try below<\/a>.<\/p>\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\/php-image-graphviz-via-pear-on-almalinux-recallable-tutorial\/' rel=\"noopener\">PHP Image GraphViz via Pear on AlmaLinux Recallable Tutorial<\/a>.<\/p-->\n<hr>\n<p id='phpigvpalst'>Previous relevant <a target=\"_blank\" title='PHP Image GraphViz via Pear on AlmaLinux Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-graphviz-via-pear-on-almalinux-sharing-tutorial\/' rel=\"noopener\">PHP Image GraphViz via Pear on AlmaLinux 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\/recipe_helper.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image GraphViz via Pear on AlmaLinux Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/recipe_helper_sharing.jpg\" title=\"PHP Image GraphViz via Pear on AlmaLinux Sharing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Image GraphViz via Pear on AlmaLinux Sharing Tutorial<\/p><\/div>\n<p>Adding to yesterday&#8217;s <a title='PHP Image GraphViz via Pear on AlmaLinux Primer Tutorial' href='#PIGVPOAPT'>PHP Image GraphViz via Pear on AlmaLinux Primer Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>on many mobile devices the horizontally spreading right cell arrangements has been improved by laying out these textarea elements vertically now &#8230;<\/li>\n<li>hashtagged URL mailto: and\/or sms: &#8220;a&#8221; links to email and\/or SMS communication conduits, respectively &#8230;<br \/>\n&lt;?php echo &#8221;<br \/>\n<code><br \/>\n  var anyhashes='';<br \/>\n  var aone=1;<br \/>\n  var tdc=0;<br \/>\n<br \/>\n  function checkforlh() {<br \/>\n    aone=1;<br \/>\n    if (('' + location.hash.indexOf('dtitle')) != -1) {<br \/>\n    if (('' + location.hash.indexOf('dtitle=')) != -1) {<br \/>\n      document.getElementById('therest').value=decodeURIComponent(('' + location.hash).split('dtitle=')[1].split('#')[0].split(encodeURIComponent('#'))[0]);<br \/>\n      document.getElementById('therest').name='dtitle';<br \/>\n    } else if (('' + location.hash.indexOf('dtitle' + encodeURIComponent('='))) != -1) {<br \/>\n      document.getElementById('therest').value=decodeURIComponent(('' + location.hash).split('dtitle' + encodeURIComponent('='))[1].split('#')[0].split(encodeURIComponent('#'))[0]);<br \/>\n      document.getElementById('therest').name='dtitle';<br \/>\n    }<br \/>\n    }<br \/>\n    var retv='';<br \/>\n    while (('' + location.hash.indexOf('step' + aone)) != -1) {<br \/>\n    if (('' + location.hash.indexOf('step' + aone + '=')) != -1) {<br \/>\n    if (aone &lt;= 1) {<br \/>\n    document.getElementById('tdi' + aone).value=decodeURIComponent(('' + location.hash).split('step' + aone + '=')[1].split('#')[0].split(encodeURIComponent('#'))[0]);<br \/>\n    } else {<br \/>\n    document.getElementById('tdi' + aone).value=decodeURIComponent(('' + location.hash).split('step' + aone + '=')[1].split('#')[0].split(encodeURIComponent('#'))[0]);<br \/>\n    obl(document.getElementById('tdi' + aone), true); \/\/document.getElementById('tdi' + aone).blur();<br \/>\n    if ( document.getElementById('tdi' + eval(1 + aone))) {<br \/>\n      document.getElementById('tdi' + eval(1 + aone)).focus();<br \/>\n    }<br \/>\n    }<br \/>\n    } else if (('' + location.hash.indexOf('step' + aone + encodeURIComponent('='))) != -1) {<br \/>\n    if (aone &lt;= 1) {<br \/>\n    document.getElementById('tdi' + aone).value=decodeURIComponent(('' + location.hash).split('step' + aone + encodeURIComponent('='))[1].split('#')[0].split(encodeURIComponent('#'))[0]);<br \/>\n    } else {<br \/>\n    document.getElementById('tdi' + aone).value=decodeURIComponent(('' + location.hash).split('step' + aone + encodeURIComponent('='))[1].split('#')[0].split(encodeURIComponent('#'))[0]);<br \/>\n    obl(document.getElementById('tdi' + aone), true); \/\/document.getElementById('tdi' + aone).blur();<br \/>\n    if ( document.getElementById('tdi' + eval(1 + aone))) {<br \/>\n      document.getElementById('tdi' + eval(1 + aone)).focus();<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    aone++;<br \/>\n    }<br \/>\n    if (aone &gt; 1 || document.getElementById('therest').value != '') { anyhashes=('' + location.hash).replace(\/\\%23\/g,'#'); setTimeout(function(){ if (confirm('Draw now (versus add more yourself)?') == true) { document.getElementById('mysub').click(); } }, 8000); }<br \/>\n  }<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<br \/>\n &#8230; help out with some new sharing functionalities<\/li>\n<\/ul>\n<p> &#8230; so that &#8220;a procedure made up of steps&#8221; can now be shared and\/or created collaboratively in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/recipe_helper.php--GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php--GETME\" rel=\"noopener\">PHP coded<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php\" rel=\"noopener\">My Recipe Steps<\/a> web application.<\/p>\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\/php-image-graphviz-via-pear-on-almalinux-sharing-tutorial\/' rel=\"noopener\">PHP Image GraphViz via Pear on AlmaLinux Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='PIGVPOAPT'>Previous relevant <a target=\"_blank\" title='PHP Image GraphViz via Pear on AlmaLinux Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-graphviz-via-pear-on-almalinux-primer-tutorial\/' rel=\"noopener\">PHP Image GraphViz via Pear on AlmaLinux 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\/recipe_helper.php\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image GraphViz via Pear on AlmaLinux Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/image_graphviz_via_pear_on_almalinux_using_php.gif\" title=\"PHP Image GraphViz via Pear on AlmaLinux Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">https:\/\/en.wikipedia.org\/wiki\/Graphviz<\/p><\/div>\n<p>The term <a target=\"_blank\" title='Graphviz information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Graphviz' rel=\"noopener\">&#8220;GraphViz&#8221;<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Graphviz'><p>\nGraphviz (short for Graph Visualization Software) is a package of open-source tools initiated by AT&#038;T Labs Research for drawing graphs (as in nodes and edges, not as in bar charts) specified in DOT language scripts having the file name extension &#8220;gv&#8221;. It also provides libraries for software applications to use the tools. Graphviz is free software licensed under the Eclipse Public License.\n<\/p><\/blockquote>\n<p> &#8230; we&#8217;ve learnt recently, means a lot of things, differently (nuanced) for a range of users, three that we&#8217;ve so far become aware of being &#8230;<\/p>\n<ul>\n<li>the recent, alas now deprecated, <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Charts<\/a> GraphViz option means of drawing <a target=\"_blank\" title='HTML svg information from w3schools' href='https:\/\/www.w3schools.com\/html\/html5_svg.asp' rel=\"noopener\">SVG<\/a> graphics within an HTML image &#8230; we&#8217;ve known about before <i>about yesterday<\/i> &#8230;<\/li>\n<li>today&#8217;s interest, that being <a target=\"_blank\" title='Image GraphViz via Pear' href='https:\/\/pear.php.net\/package\/Image_GraphViz\/docs\/latest\/Image_GraphViz\/Image_GraphViz.html' rel=\"noopener\"><i>PHP Image GraphViz via Pear on AlmaLinux<\/i><\/a> install, via the AlmaLinux cPanel &#8220;Module Installers&#8221; <a target=\"_blank\" title='PEAR installer repository information from Wikiedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/PEAR' rel=\"noopener\">Pear<\/a> installer page, means by which we can use GraphViz calls in PHP code &#8230; and, for the future &#8230;<\/li>\n<li>GraphViz installs for Python via pip<\/li>\n<\/ul>\n<p> &#8230; in amongst many others we&#8217;ve seen programmers using &#8230; totally cute, totally useful!<\/p>\n<p>It seems with our <i>PHP Image GraphViz via Pear on AlmaLinux<\/i> as what looks like a very much &#8220;pared down&#8221; version of the last mode of use above, that we add constructed graph node or edge or cluster objects, and form them into SVG based HTML image elements.  It&#8217;s look got me thinking &#8220;Steps&#8221;, then &#8220;Recipe Steps&#8221;, and back, quietly, to &#8220;Any Old Steps&#8221; as the day got more generic.<\/p>\n<p>At first we got, as far as Recipes go <font size=1>(and here we thank <a target=\"_blank\" title='Italian Wedding Soup' href='https:\/\/www.eatingwell.com\/recipe\/269824\/minestra-maritata-italian-wedding-soup\/' rel=\"noopener\">Italian Wedding Soup<\/a> for today&#8217;s inspiration)<\/font>, to &#8230; <\/p>\n<ul>\n<li>cooking steps showing as Image GraphViz <i>edge<\/i> graphic components (having arrows connect ellipses containing text, a bit like Speech Bubbles) &#8230; and then trying to face the &#8220;real world&#8221; a user interested in recipes might want to see happen &#8230;<\/li>\n<li>an Image GraphViz <i>node<\/i> graphic component whose wording could be a user supplied recipe Title along with a &#8220;URL&#8221; attribute link, optionally user supplied <font size=1>(via our HTML div SVG hosting ondblclick event allowing its <a target=\"_blank\" title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp' rel=\"noopener\">contenteditable<\/a>=true attribute and onblur event means by which these optional additional data items can enter the &#8220;mix&#8221;, if you&#8217;ll pardon the pun)<\/font>, probably pointing back to the original recipe information <strike style='color:red;'>sauce<\/strike>source &#8230; and &#8230;<\/li>\n<li>this title and\/or &#8220;URL&#8221; and\/or ingredient list (for example) can all be expressed as the &#8220;on hover&#8221; title attribute of the tailored user PHP webpage (yes, here we have PHP writing PHP) &#8230; and &#8230;<\/li>\n<li>at least on Safari, given a recipe Title defined, we can arrange any browser context menu (ie. right click) over the HTML iframe hosted recipe content &#8220;Save Iframe As&#8221; option being able to download to a reasonably self explanatory download filename &#8230; and\/or &#8230;<\/li>\n<li>any web browser&#8217;s Add Bookmark functionality can be harnessed to help the user out in such a way that our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php-GETME\" rel=\"noopener\">PHP coded<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php\" rel=\"noopener\">My Recipe Steps<\/a> web application could end up being your one stop shop &#8220;Recipe Organizer&#8221; online?!<\/li>\n<\/ul>\n<p>See what we mean below &#8230;<\/p>\n<p><iframe id=myrhif src='https:\/\/www.rjmprogramming.com.au\/recipe_helper.php' style='width:100%;height:900px;'><\/iframe><\/p>\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\/php-image-graphviz-via-pear-on-almalinux-primer-tutorial\/' rel=\"noopener\">PHP Image GraphViz via Pear on AlmaLinux Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicatat'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Angled Text Annotation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-angled-text-annotation-tutorial\/' rel=\"noopener\">Google Chart Image Chart Angled Text Annotation 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Angled Text Annotation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_angled_text.gif\" title=\"Google Chart Image Chart Angled Text Annotation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Angled Text Annotation Tutorial<\/p><\/div>\n<p>It&#8217;s Tuesday, in places around the world, looking back at yesterday&#8217;s <a title='Google Chart Image Chart Image Map Event Editing Tutorial' href='#gcicimeet'>Google Chart Image Chart Image Map Event Editing Tutorial<\/a>.  Can&#8217;t help but think we&#8217;ve forgotten something.  Ah yes &#8230;<\/p>\n<p>You talkin&#8217; to me? You talkin&#8217; to me? <font size=1>Meanwhile, back at the questions!<\/font>  Welcome back, Mr De Niro, sir.  We hope your T<a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/recipe_helper.php\" rel=\"noopener\">uesday is treating you well. <font size=1>(Rhetorical.  Let it please be Rhetorical &#8230; oh dear God &#8230; it must be Rhetorical &#8230; it must be Rhetorical)<\/font>  We have news regarding &#8220;the dosh&#8221; <font size=1>(wink, wink)<\/font> we were discussing the other day.  You see &#8230;<\/p>\n<p>Better to be king for a night than schmuck for a lifetime. <font size=1>Well, at least it&#8217;s not a question.<\/font> &#8230; the thing is, silly us, it turns out that angled text issue was not a problem with [element].<a target=\"_blank\" title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect' rel=\"noopener\">getBoundingClientRect<\/a>() but how the PHP <a target=\"_blank\" title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php' rel=\"noopener\">GD<\/a> <a target=\"_blank\" title='PHP GD imagettftext' href='https:\/\/www.php.net\/manual\/en\/function.imagettftext.php' rel=\"noopener\">imagettftext<\/a> text placement emanated from the bottom left of the text always, Mr De Niro sir.<\/p>\n<p>Never rat on your friends and always keep your mouth shut. <font size=1>Really wish we could!<\/font>  Yes, Mr De Niro, sir, but, you see this means the rats are completely out of the picture, just leaving us with our money spinner.  Right, Mr De Niro &#8230; sir.<\/p>\n<p>There are three ways of doing things around here: the right way, the wrong way and the way that I do it. <i>[Exeunt: Stage right]<\/i> <font size=1>Well, that&#8217;s odd?<\/font>   Mr De Niro wasn&#8217;t interested in the <font color=blue>quadrant nature<\/font> to our problem solution &#8230;<\/p>\n<p><code><br \/>\n    var rectex=extents[eval(-1 + extents.length)].getBoundingClientRect();<br \/>\n    <font color=blue>if (document.URL.indexOf('debug=') != -1) {<br \/>\n      document.body.innerHTML+='&lt;div style=\"position:absolute;border:1px solid rgba(255,0,0,0.5);top:' + rectex.top + 'px;left:' + rectex.left + 'px;width:' + rectex.width + 'px;height:' + rectex.height + 'px;z-index:200;\" title=\"position:absolute;border:1px solid rgba(255,0,0,0.5);top:' + rectex.top + 'px;left:' + rectex.left + 'px;width:' + rectex.width + 'px;height:' + rectex.height + 'px;z-index:200;\"&gt;&lt;\/div&gt;';<br \/>\n    }<\/font><br \/>\n    var invs=inv.split('.');   \/\/ angled text origin depends on angle quadrant<br \/>\n    <font color=blue>var wasi=inv;<br \/>\n    var theang=eval('' + fsx);<br \/>\n    \/\/alert('' + inv + ' ' + theang);<\/font><br \/>\n    if (eval('' + invs.length) &gt; 2 && inv.indexOf(',') != -1) {<br \/>\n   \/\/alert('' + rectex.width + 'x' + rectex.height + ' ' + ';' + rectex.top + 'vs' + rectex.bottom + ' ' + ';' + rectex.left + 'vs' + rectex.right + ' ' + inv + ' ' + extents[-1 + extents.length].outerHTML + ' ' + rectex.x + '+' + rectex.y);<br \/>\n       <font color=blue>if (7 == 8) {<\/font><br \/>\n       inv=inv.replace(invs[0], '' + Math.floor(eval(rectex.left + rectex.width \/ 2)));<br \/>\n       <font color=blue>} else {<br \/>\n       if (theang &gt; (315 + 45) || theang &lt; (45 + 45)) {<br \/>\n       inv=inv.replace(invs[0], '' + Math.floor(eval(rectex.left * 1 + rectex.right * 0 + 0 * rectex.width \/ 2)));<br \/>\n       } else if (theang &gt;= (45 + 45) && theang &lt;= (135 + 45)) {<br \/>\n       inv=inv.replace(invs[0], '' + Math.floor(eval(rectex.left * 0 + rectex.right * 1 + 0 * rectex.width \/ 2)));<br \/>\n       } else if (theang &gt;= (225 + 45) && theang &lt;= (315 + 45)) {<br \/>\n       inv=inv.replace(invs[0], '' + Math.floor(eval(rectex.left * 1 + rectex.right * 0 + 0 * rectex.width \/ 2)));<br \/>\n       } else {<br \/>\n       inv=inv.replace(invs[0], '' + Math.floor(eval(rectex.left * 0 + rectex.right * 1 + 0 * rectex.width \/ 2)));<br \/>\n       }<br \/>\n       }<\/font><br \/>\n<br \/>\n       <font color=blue>if (7 == 8) {<\/font><br \/>\n       inv=inv.replace(',' + invs[1].split(',')[1], ',' + Math.floor(eval(rectex.top + rectex.height \/ 2)));<br \/>\n       <font color=blue>} else {<br \/>\n       if (theang &gt; (315 + 45) || theang &lt; (45 + 45)) {<br \/>\n       inv=inv.replace(',' + invs[1].split(',')[1], ',' + Math.floor(eval(rectex.top * 0 + rectex.bottom * 1 + 0 * rectex.height \/ 2)));<br \/>\n    \/\/alert('' + wasi + ' vs ' + inv + ' ' + invs.length);<br \/>\n       } else if (theang &gt;= (225 + 45) && theang &lt;= (315 + 45)) {<br \/>\n       inv=inv.replace(',' + invs[1].split(',')[1], ',' + Math.floor(eval(rectex.top * 1 + rectex.bottom * 0 + 0 * rectex.height \/ 2)));<br \/>\n       } else if (theang &gt;= (45 + 45) && theang &lt; (135 + 45)) {<br \/>\n       inv=inv.replace(',' + invs[1].split(',')[1], ',' + Math.floor(eval(rectex.top * 0 + rectex.bottom * 1 + 0 * rectex.height \/ 2)));<br \/>\n       } else {<br \/>\n       inv=inv.replace(',' + invs[1].split(',')[1], ',' + Math.floor(eval(rectex.top * 1 + rectex.bottom * 0 + 0 * rectex.height \/ 2)));<br \/>\n       }<br \/>\n       }  <\/font><br \/>\n<br \/> <br \/>\n       \/\/alert('was=' + wasi + ' and now=' + inv);<br \/>\n    } <font color=blue>else if (eval('' + invs.length) == 2 && inv.indexOf(',') != -1) {<br \/>\n   \/\/alert('' + rectex.width + 'x' + rectex.height + ' ' + ';' + rectex.top + 'vs' + rectex.bottom + ' ' + ';' + rectex.left + 'vs' + rectex.right + ' ' + inv + ' ' + extents[-1 + extents.length].outerHTML + ' ' + rectex.x + '+' + rectex.y);<br \/>\n       if (theang &gt; (315 + 45) || theang &lt; (45 + 45)) {<br \/>\n       inv=inv.replace(invs[0], '' + Math.floor(eval(rectex.left * 1 + rectex.right * 0 + 0 * rectex.width \/ 2)));<br \/>\n       } else if (theang &gt;= (45 + 45) && theang &lt;= (135 + 45)) {<br \/>\n       inv=inv.replace(invs[0], '' + Math.floor(eval(rectex.left * 0 + rectex.right * 1 + 0 * rectex.width \/ 2)));<br \/>\n       } else if (theang &gt;= (225 + 45) && theang &lt;= (315 + 45)) {<br \/>\n       inv=inv.replace(invs[0], '' + Math.floor(eval(rectex.left * 1 + rectex.right * 0 + 0 * rectex.width \/ 2)));<br \/>\n       } else {<br \/>\n       inv=inv.replace(invs[0], '' + Math.floor(eval(rectex.left * 0 + rectex.right * 1 + 0 * rectex.width \/ 2)));<br \/>\n       }<br \/>\n       invs=inv.split(',');<br \/>\n       if (theang &gt; (315 + 45) || theang &lt;= (45 + 45)) {<br \/>\n       inv=inv.replace(',' + invs[1].split(',')[0].split('.')[0], ',' + Math.floor(eval(rectex.top * 0 + rectex.bottom * 1 + 0 * rectex.height \/ 2)));<br \/>\n    \/\/alert('' + wasi + ' vs ' + inv + ' ' + invs.length);<br \/>\n       } else if (theang &gt;= (225 + 45) && theang &lt;= (315 + 45)) {<br \/>\n       inv=inv.replace(',' + invs[1].split(',')[0].split('.')[0], ',' + Math.floor(eval(rectex.top * 1 + rectex.bottom * 0 + 0 * rectex.height \/ 2)));<br \/>\n       } else if (theang &gt;= (45 + 45) && theang &lt; (135 + 45)) {<br \/>\n       inv=inv.replace(',' + invs[1].split(',')[0].split('.')[0], ',' + Math.floor(eval(rectex.top * 0 + rectex.bottom * 1 + 0 * rectex.height \/ 2)));<br \/>\n       } else {<br \/>\n       inv=inv.replace(',' + invs[1].split(',')[0].split('.')[0], ',' + Math.floor(eval(rectex.top * 1 + rectex.bottom * 0 + 0 * rectex.height \/ 2)));<br \/>\n       }<br \/>\n       \/\/alert('was=' + wasi + ' and now=' + inv);<br \/>\n    }<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; that temporary div element text border drawing, being the crucial way to find out what was happening, and showing us, at least on Google Chrome web browser, not to worry so much about [element].getBoundingClientRect() results for transformed HTML elements.  And that is a huge relief in itself.<\/p>\n<p>Also taking up a lot of today, we shored up Image Map Event Editing results bubbling through to an email or SMS recipient.  The size of this data, and an analysis of &#8230;<\/p>\n<ul>\n<li>client pre-emptive iframe &#8230; versus &#8230;<\/li>\n<li><a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29' rel=\"noopener\">Ajax<\/a> methodologies<\/li>\n<\/ul>\n<p> &#8230; when it comes to complex and sizeable data such as &#8220;Javascript scripting&#8221; is, we should start swinging towards Ajax thinking, <font color=blue>even pinching it off a client pre-emptive iframe onload event logic thought\/start<\/font> sometimes &#8230;<\/p>\n<p><code><br \/>\n  var myxhr=null, rawhtml='';<br \/>\n  var zhr=null, zform=null;<br \/>\n<br \/>\n function stateChanged() {<br \/>\n if (myxhr.readyState == 4) {<br \/>\n  if (myxhr.status == 200) {<br \/>\n   console.log('myxhr=' + myxhr);<br \/>\n   rawhtml = myxhr.responseText.replace(\/\\\\\"\/g, '\"').replace(\/\\\\'\/g, \"'\");<br \/>\n         if (document.getElementById('jdiv')) {<br \/>\n         \/\/alert('1:' + rawhtml);<br \/>\n    \/\/alert('21111 ' + rawhtml.split('&lt;scr')[1]);<br \/>\n          document.getElementById('jdiv').innerHTML=rawhtml.split('&lt;scr')[0]; \/\/xaconto.body.innerHTML;<br \/>\n    \/\/alert(31111);<br \/>\n          if (document.getElementById('talkimg')) {<br \/>\n          document.getElementById('talkimg').useMap='#mymap';<br \/>\n          } else {<br \/>\n          document.getElementById('myvenn').useMap='#mymap';<br \/>\n          }<br \/>\n    \/\/alert(41111);<br \/>\n         } else {<br \/>\n          document.body.innerHTML+=rawhtml.split('&lt;scr')[0]; \/\/xaconto.body.innerHTML;<br \/>\n          if (document.getElementById('talkimg')) {<br \/>\n          document.getElementById('talkimg').useMap='#mymap';<br \/>\n          } else {<br \/>\n          document.getElementById('myvenn').useMap='#mymap';<br \/>\n          }<br \/>\n         }<br \/>\n         if (rawhtml.indexOf('&lt;scr') != -1) {<br \/>\n         <br \/>\n         if (1 == 1) {<br \/>\n      var tag = document.createElement('script');<br \/>\n      var nextsep=rawhtml.split('&lt;scr')[1].split('&gt;')[0] + '&gt;';<br \/>\n      \/\/var qw=prompt(rawhtml.split('&lt;scr')[1].split(nextsep)[1].split('&lt;\/scri')[0],rawhtml.split('&lt;scr')[1].split(nextsep)[1].split('&lt;\/scri')[0]);<br \/>\n      \/\/alert('2:' + rawhtml.split('&lt;scr')[1].split(nextsep)[1].split('&lt;\/scri')[0]);<br \/>\n      tag.innerHTML = rawhtml.split('&lt;scr')[1].split(nextsep)[1].split('&lt;\/scri')[0];<br \/>\n      var firstScriptTag = document.getElementsByTagName('script')[eval(-1 + document.getElementsByTagName('script').length)];<br \/>\n      firstScriptTag.insertAdjacentElement(\"afterend\", tag);<br \/>\n         }<br \/>\n         <br \/>\n         }<br \/>\n  }<br \/>\n }<br \/>\n }<br \/>\n <br \/>\n   function prehrefcheck(inso) {<br \/>\n            if (obsuffix != '') {<br \/>\n  zhr = new XMLHttpRequest();<br \/>\n  zform = new FormData();<br \/>\n  if (decodeURIComponent(obsuffix.replace('&thescript=','')).indexOf('&lt;scr') == -1) {<br \/>\n  zform.append('scrstuff', ('&lt;scr' + 'ipt type=\"text\/javascript\"&gt; ' + decodeURIComponent(obsuffix.replace('&thescript=','')) + ' &lt;\/scr' + 'ipt&gt;').replace(\/\\ \\ \\ \/g, String.fromCharCode(9)).replace(\/\\+\\=\/g, ' += '));<br \/>\n  } else {<br \/>\n  zform.append('scrstuff', ('&lt;scr' + decodeURIComponent(obsuffix.replace('&thescript=','')).split('&lt;scr')[1]).replace(\/\\ \\ \\ \/g, String.fromCharCode(9)).replace(\/\\+\\=\/g, ' += '));<br \/>\n  }<br \/>\n       if (jufr == '') {<br \/>\n         jufr='_' + Math.floor(Math.random() * 19878675);<br \/>\n       }<br \/>\n  zform.append('ufr', jufr);<br \/>\n  zhr.responseType='Document';<br \/>\n  zhr.open('post', '\/\/www.rjmprogramming.com.au\/ITblog\/' + Math.min(550,window.innerWidth) + '\/' + Math.min(350,window.innerHeight) + '\/?cht=' + ctype, true);<br \/>\n  zhr.send(zform);<br \/>\n            }<br \/>\n  }<br \/>\n<br \/>\n  function sofarpj(iois) {<br \/>\n   var aname='', partsare=[], ipis=0, areabits='', repfrom='', repto='', iv=0, variety=String.fromCharCode(10) + ' var variety=[]; ' + String.fromCharCode(10);<br \/>\n   while (thescript.indexOf(' var variety' + ('' + iv).replace(\/^0$\/g, '') + '=') != -1) {<br \/>\n      repfrom='[' + thescript.split(' var variety' + ('' + iv).replace(\/^0$\/g, '') + '=[')[1].split('];')[0] + '];';<br \/>\n      iv++;<br \/>\n   }<br \/>\n   if (iv &gt; 0) {  variety=String.fromCharCode(10) + ' var variety' + iv + '=[]; ' + String.fromCharCode(10); }<br \/>\n   if (iois.src != '') {<br \/>\n       var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n          if (aconto.body.innerHTML.indexOf('&lt;scr') != -1 || document.URL.indexOf('ufr=') != -1) {<br \/>\n            <font color=blue>if (document.URL.indexOf('ufr=') != -1) {<br \/>\n         if (!document.getElementById('jdiv')) {<br \/>\n           document.body.innerHTML+='&lt;div id=jdiv&gt;&lt;\/div&gt;';<br \/>\n         }<br \/>\n       \/\/thescript='';<br \/>\n    myxhr = new XMLHttpRequest();<br \/>\n    myxhr.open('GET', '\/\/www.rjmprogramming.com.au\/presentation' + (location.search.split('ufr=')[1] ? decodeURIComponent(location.search.split('ufr=')[1].split('&')[0]) : '') + '.html', true);<br \/>\n    myxhr.responseType = \"text\";<br \/>\n    myxhr.onreadystatechange=stateChanged;<br \/>\n    myxhr.send(null);<br \/>\n            } else if (aconto.body.innerHTML.indexOf('&lt;scr') != -1) {<\/font><br \/>\n            thescript='&lt;scr' + aconto.body.innerHTML.split('&lt;scr')[1];<br \/>\n            var tag = document.createElement('script');<br \/>\n            var nextsep=thescript.split('&lt;scr')[1].split('&gt;')[0] + '&gt;';<br \/>\n            tag.innerHTML = thescript.split('&lt;scr')[1].split(nextsep)[1].split('&lt;\/scri')[0];<br \/>\n            var firstScriptTag = document.getElementsByTagName('script')[eval(-1 + document.getElementsByTagName('script').length)];<br \/>\n            firstScriptTag.insertAdjacentElement(\"afterend\", tag);<br \/>\n            <font color=blue>}<\/font><br \/>\n          }<br \/>\n          pjsbih=aconto.body.innerHTML.split('&lt;scr')[0];<br \/>\n          if (lastpjsbih != '' && pjsbih != lastpjsbih.replace(\/\\ $\/g,'')) {<br \/>\n            \/\/alert('Found new Image Map data of ' + pjsbih);<br \/>\n            \/\/ {\"chartshape\":[{\"name\":\"axis0_0\",\"type\":\"RECT\",\"coords\":[21,336,28,344]},{\"name\":\"axis0_1\",\"type\":\"RECT\",\"coords\":[65,336,77,344]},{\"name\":\"axis0_2\",\"type\":\"RECT\",\"coords\":[111,336,124,344]},{\"name\":\"axis0_3\",\"type\":\"RECT\",\"coords\":[158,336,170,344]},{\"name\":\"axis0_4\",\"type\":\"RECT\",\"coords\":[204,336,217,344]},{\"name\":\"axis0_5\",\"type\":\"RECT\",\"coords\":[251,336,263,344]},{\"name\":\"axis0_6\",\"type\":\"RECT\",\"coords\":[297,336,310,344]},{\"name\":\"axis0_7\",\"type\":\"RECT\",\"coords\":[344,336,356,344]},{\"name\":\"axis0_8\",\"type\":\"RECT\",\"coords\":[390,336,403,344]},{\"name\":\"axis0_9\",\"type\":\"RECT\",\"coords\":[437,336,449,344]},{\"name\":\"axis0_10\",\"type\":\"RECT\",\"coords\":[480,336,499,344]},{\"name\":\"axis1_0\",\"type\":\"RECT\",\"coords\":[14,326,20,334]},{\"name\":\"axis1_1\",\"type\":\"RECT\",\"coords\":[8,297,20,305]},{\"name\":\"axis1_2\",\"type\":\"RECT\",\"coords\":[8,267,20,275]},{\"name\":\"axis1_3\",\"type\":\"RECT\",\"coords\":[8,237,20,245]},{\"name\":\"axis1_4\",\"type\":\"RECT\",\"coords\":[8,208,20,216]},{\"name\":\"axis1_5\",\"type\":\"RECT\",\"coords\":[8,178,20,186]},{\"name\":\"axis1_6\",\"type\":\"RECT\",\"coords\":[8,148,20,156]},{\"name\":\"axis1_7\",\"type\":\"RECT\",\"coords\":[8,119,20,127]},{\"name\":\"axis1_8\",\"type\":\"RECT\",\"coords\":[8,89,20,97]},{\"name\":\"axis1_9\",\"type\":\"RECT\",\"coords\":[8,59,20,67]},{\"name\":\"axis1_10\",\"type\":\"RECT\",\"coords\":[2,29,20,37]},{\"name\":\"legend0\",\"type\":\"RECT\",\"coords\":[500,167,512,179]},{\"name\":\"legend1\",\"type\":\"RECT\",\"coords\":[500,185,512,197]},{\"name\":\"circle0\",\"type\":\"CIRCLE\",\"coords\":[80,39,4]},{\"name\":\"circle1\",\"type\":\"CIRCLE\",\"coords\":[429,152,1]},{\"name\":\"circle2\",\"type\":\"CIRCLE\",\"coords\":[373,250,3]},{\"name\":\"circle3\",\"type\":\"CIRCLE\",\"coords\":[215,230,4]},{\"name\":\"circle4\",\"type\":\"CIRCLE\",\"coords\":[131,164,2]},{\"name\":\"circle5\",\"type\":\"CIRCLE\",\"coords\":[471,96,5]},{\"name\":\"circle6\",\"type\":\"CIRCLE\",\"coords\":[341,158,3]},{\"name\":\"circle7\",\"type\":\"CIRCLE\",\"coords\":[355,111,5]},{\"name\":\"circle8\",\"type\":\"CIRCLE\",\"coords\":[183,277,3]},{\"name\":\"circle9\",\"type\":\"CIRCLE\",\"coords\":[66,105,3]}]}<br \/>\n            if (pjsbih.replace(\/\\[\\]\/g, '').indexOf('[') != -1) {<br \/>\n               partsare=pjsbih.split('\",\"coords\":[');<br \/>\n               for (ipis=1; ipis&lt;partsare.length; ipis++) {<br \/>\n                 if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'RECT') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   if (variety.indexOf(aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/rect') == -1) {<br \/>\n                     if (variety.indexOf('[]') != -1) {<br \/>\n                       variety=variety.replace(\"[]\", \"['\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/rect' + \"']\");<br \/>\n                     } else {<br \/>\n                       variety=variety.replace(\"]\", \",'\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/rect' + \"']\");<br \/>\n                     }<br \/>\n                     repto='[' + variety.split('[')[1].split('];')[0] + '];';<br \/>\n                   }<br \/>\n                   areabits+='&lt;area onmousedown=defclick(event); ondblclick=defclick(event); oncontextmenu=defclick(event); ontouchend=defclick(event); ontouchstart=defclick(event); onmouseout=defclick(event); onmousemove=defclick(event); ontouchdown=defclick(event); onmouseover=defclick(event); shape=\"rect\" coords=\"' + partsare[ipis].split(']')[0] + '\" id=\"' + aname + '\" name=\"' + aname + '\" alt=\"' + aname + '\" onclick=\"' + \"youralert(this,'This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'CIRCLE') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   if (variety.indexOf(aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/circle') == -1) {<br \/>\n                     if (variety.indexOf('[]') != -1) {<br \/>\n                       variety=variety.replace(\"[]\", \"['\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/circle' + \"']\");<br \/>\n                     } else {<br \/>\n                       variety=variety.replace(\"]\", \",'\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/circle' + \"']\");<br \/>\n                     }<br \/>\n                     repto='[' + variety.split('[')[1].split('];')[0] + '];';<br \/>\n                   }<br \/>\n                   areabits+='&lt;area onmousedown=defclick(event);  ondblclick=defclick(event); oncontextmenu=defclick(event); ontouchend=defclick(event); ontouchstart=defclick(event); onmouseout=defclick(event); onmousemove=defclick(event); ontouchdown=defclick(event); onmouseover=defclick(event); shape=\"circle\" coords=\"' + partsare[ipis].split(']')[0] + '\" id=\"' + aname + '\" name=\"' + aname + '\" alt=\"' + aname + '\" onclick=\"' + \"youralert(this,'This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'POLY') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   if (variety.indexOf(aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/poly') == -1) {<br \/>\n                     if (variety.indexOf('[]') != -1) {<br \/>\n                       variety=variety.replace(\"[]\", \"['\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/poly' + \"']\");<br \/>\n                     } else {<br \/>\n                       variety=variety.replace(\"]\", \",'\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/poly' + \"']\");<br \/>\n                     }<br \/>\n                     repto='[' + variety.split('[')[1].split('];')[0] + '];';<br \/>\n                   }<br \/>\n                   areabits+='&lt;area onmousedown=defclick(event);  ondblclick=defclick(event); oncontextmenu=defclick(event); ontouchend=defclick(event); ontouchstart=defclick(event); onmouseout=defclick(event); onmousemove=defclick(event); ontouchdown=defclick(event); onmouseover=defclick(event); shape=\"poly\" coords=\"' + partsare[ipis].split(']')[0] + '\" id=\"' + aname + '\" name=\"' + aname + '\" alt=\"' + aname + '\" onclick=\"' + \"youralert(this,'This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 }<br \/>\n               }<br \/>\n               document.getElementById('mymap').innerHTML=areabits + '&lt;area' + atend.split('&lt;area')[1].split('&gt;')[0] + '&gt;';  \/\/\"&lt;area onclick=defclick(event); shape='default' nohref&gt;\";<br \/>\n               if (repto.replace('[];','') != '' && repfrom != '') { thescript=thescript.replace(repfrom, repto);  } else if (thescript.indexOf('[' + variety.split('[')[1]) == -1) { thescript=thescript.replace('&gt;', '&gt;' + variety); }<br \/>\n               origmap=document.getElementById('mymap').outerHTML + thescript;<br \/>\n            }<br \/>\n          } else if (lastpjsbih != '') {<br \/>\n            \/\/alert('Found the same ' + pjsbih);<br \/>\n            if (pjsbih.replace(\/\\[\\]\/g, '').indexOf('[') != -1) {<br \/>\n               partsare=pjsbih.split('\",\"coords\":[');<br \/>\n               for (ipis=1; ipis&lt;partsare.length; ipis++) {<br \/>\n                 if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'RECT') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   if (variety.indexOf(aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/rect') == -1) {<br \/>\n                     if (variety.indexOf('[]') != -1) {<br \/>\n                       variety=variety.replace(\"[]\", \"['\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/rect' + \"']\");<br \/>\n                     } else {<br \/>\n                       variety=variety.replace(\"]\", \",'\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/rect' + \"']\");<br \/>\n                     }<br \/>\n                     repto='[' + variety.split('[')[1].split('];')[0] + '];';<br \/>\n                   }<br \/>\n                   areabits+='&lt;area onmousedown=defclick(event);  ondblclick=defclick(event); oncontextmenu=defclick(event); ontouchend=defclick(event); ontouchstart=defclick(event); onmouseout=defclick(event); onmousemove=defclick(event); ontouchdown=defclick(event); onmouseover=defclick(event); shape=\"rect\" coords=\"' + partsare[ipis].split(']')[0] + '\" id=\"' + aname + '\" name=\"' + aname + '\" alt=\"' + aname + '\" onclick=\"' + \"youralert(this,'This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'CIRCLE') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   if (variety.indexOf(aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/circle') == -1) {<br \/>\n                     if (variety.indexOf('[]') != -1) {<br \/>\n                       variety=variety.replace(\"[]\", \"['\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/circle' + \"']\");<br \/>\n                     } else {<br \/>\n                       variety=variety.replace(\"]\", \",'\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/circle' + \"']\");<br \/>\n                     }<br \/>\n                     repto='[' + variety.split('[')[1].split('];')[0] + '];';<br \/>\n                   }<br \/>\n                   areabits+='&lt;area onmousedown=defclick(event);  ondblclick=defclick(event); oncontextmenu=defclick(event); ontouchend=defclick(event); ontouchstart=defclick(event); onmouseout=defclick(event); onmousemove=defclick(event); ontouchdown=defclick(event); onmouseover=defclick(event); shape=\"circle\" coords=\"' + partsare[ipis].split(']')[0] + '\" id=\"' + aname + '\" name=\"' + aname + '\" alt=\"' + aname + '\" onclick=\"' + \"youralert(this,'This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'POLY') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   if (variety.indexOf(aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/poly') == -1) {<br \/>\n                     if (variety.indexOf('[]') != -1) {<br \/>\n                       variety=variety.replace(\"[]\", \"['\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/poly' + \"']\");<br \/>\n                     } else {<br \/>\n                       variety=variety.replace(\"]\", \",'\" + aname.split('_')[0].split('0')[0].split('1')[0].split('2')[0].split('3')[0].split('4')[0].split('5')[0].split('6')[0].split('7')[0].split('8')[0].split('9')[0] + '\/poly' + \"']\");<br \/>\n                     }<br \/>\n                     repto='[' + variety.split('[')[1].split('];')[0] + '];';<br \/>\n                   }<br \/>\n                   areabits+='&lt;area onmousedown=defclick(event);  ondblclick=defclick(event); oncontextmenu=defclick(event); ontouchend=defclick(event); ontouchstart=defclick(event); onmouseout=defclick(event); onmousemove=defclick(event); ontouchdown=defclick(event); onmouseover=defclick(event); shape=\"poly\" coords=\"' + partsare[ipis].split(']')[0] + '\" id=\"' + aname + '\" name=\"' + aname + '\" alt=\"' + aname + '\" onclick=\"' + \"youralert(this,'This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 }<br \/>\n               }<br \/>\n               document.getElementById('mymap').innerHTML=areabits + '&lt;area' + atend.split('&lt;area')[1].split('&gt;')[0] + '&gt;';  \/\/\"&lt;area onclick=defclick(event); shape='default' nohref&gt;\";<br \/>\n               if (repto.replace('[];','') != '' && repfrom != '') { thescript=thescript.replace(repfrom, repto);  } else if (thescript.indexOf('[' + variety.split('[')[1]) == -1) { thescript=thescript.replace('&gt;', '&gt;' + variety); }<br \/>\n               origmap=document.getElementById('mymap').outerHTML + thescript;<br \/>\n            }<br \/>\n          }<br \/>\n          lastpjsbih=pjsbih;<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n   cimg=new Image;<br \/>\n<br \/>\n   cimg.onload = function(){<br \/>\n     var honebit=\"&lt;h2&gt;&lt;span onclick=\\\"location.href=document.URL.split('?')[0].split('#')[0];\\\" title=Reset style=cursor:pointer;&gt;Interfacing&lt;\/span&gt; to &lt;a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'&gt;Google Charts&lt;\/a&gt; &lt;a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'&gt;Image Chart&lt;\/a&gt;&lt;\/h2&gt;&lt;h4 id=myh3&gt;RJM Programming - November, 2023&lt;\/h4&gt;\";<br \/>\n     var hthreebit=\"\";<br \/>\n     document.body.style.backgroundColor='transparent';<br \/>\n     document.body.innerHTML=agscript.replace(\"'';\", \"'\" + cht.replace('_','') + \"';\").replace('&lt;canvas ','&lt;canvas width=' + cimg.width + ' height=' + cimg.height + ' ') + \"&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;img style='border-right:1px dotted pink;border-bottom:1px dotted pink;' ondblclick=\\\"window.open(document.URL.split('?')[0].split('#')[0],'_blank','top=50,left=50,width=600,height=600');\\\" title='Talk image that will update over time (double click for Google Chart Image Chart interfacing) ... \" + (\"\" + (new Date())) + \"' id=talkimg src='\" + cimg.src + \"?rand=\" + Math.floor(Math.random() * 198786754) + \"' usemap='#mymap'&gt;&lt;\/img&gt;&lt;\/td&gt;&lt;td id=tdtr style=\\\"opacity:0.0;background-image:url(\" + cimg.src.replace('presentation_', 'presentation__') + \"),url(\" + cimg.src + \"?rand=0);background-position:0% 0%,50% 0%;background-size:50% 50%,50% 50%;background-repeat:no-repeat,no-repeat;\\\"&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;tr&gt;&lt;td id=tdbl&gt;\" + honebit + hthreebit + \"&lt;\/td&gt;&lt;td&gt;&lt;img style='border-right:1px dotted pink;border-bottom:1px dotted pink;' ondblclick=\\\"window.open(document.URL.split('?')[0].split('#')[0],'_blank','top=50,left=50,width=600,height=600');\\\" title='Talk first and last images that will update over time (double click for Google Chart Image Chart interfacing) ... \" + (\"\" + (new Date())) + \"' id=talkimgg src='\" + cimg.src.replace('.png','.gif') + \"?rand=\" + Math.floor(Math.random() * 198786754) + \"'&gt;&lt;\/img&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;&lt;div id=idiv&gt;&lt;\/div&gt;&lt;iframe onload=mapsofarpj(this); id=mappjs style=display:none; src=&gt;&lt;\/iframe&gt;&lt;div id=jdiv&gt;&lt;\/div&gt;\";<br \/>\n     document.body.style.cursor='progress';<br \/>\n     if (cht.substring(0,1) == '_') {<br \/>\n     \/\/alert('\/\/www.rjmprogramming.com.au\/presentation' + cht + '.html_GETME');<br \/>\n       <font color=blue>if (1 == 1) {<br \/>\n    myxhr = new XMLHttpRequest();<br \/>\n    myxhr.open('GET', '\/\/www.rjmprogramming.com.au\/presentation' + cht + '.html', true);<br \/>\n    myxhr.responseType = \"text\";<br \/>\n    myxhr.onreadystatechange=stateChanged;<br \/>\n    myxhr.send(null);<br \/>\n       } else {<\/font><br \/>\n       document.getElementById('mappjs').src='\/\/www.rjmprogramming.com.au\/presentation' + cht + '.html';<br \/>\n       <font color=blue>}<\/font><br \/>\n       setTimeout(canvinit, 5000);<br \/>\n     }<br \/>\n     setTimeout(talkupdate, eightthousand);<br \/>\n   };<br \/>\n   <br \/>\n   cimg.src='\/\/www.rjmprogramming.com.au\/presentation' + cht + '.png';<br \/>\n         return '';<br \/>\n     }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/google-chart-image-chart-angled-text-annotation-tutorial\/' rel=\"noopener\">Google Chart Image Chart Angled Text Annotation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicimeet'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Image Map Event Editing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-image-map-event-editing-tutorial\/' rel=\"noopener\">Google Chart Image Chart Image Map Event Editing 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Image Map Event Editing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_map_event_editing.gif\" title=\"Google Chart Image Chart Image Map Event Editing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Image Map Event Editing Tutorial<\/p><\/div>\n<p>If we are talking &#8220;layers&#8221; <font size-1>(of functionality)<\/font> again, onto the progress that yesterday&#8217;s <a title='Google Chart Image Chart Image Map Events Tutorial' href='#gcicimet'>Google Chart Image Chart Image Map Events Tutorial<\/a> represented, then , it is logical &#8230;<\/p>\n<ul>\n<li>that if yesterday we presented some programmer defined image map event logic &#8230; then, today, we&#8217;d want to &#8230;<\/li>\n<li>offer the user the chance to change that default programmer defined image map event logic, to that of their own design<\/li>\n<\/ul>\n<p> &#8230; in the form of <\/p>\n<ul>\n<li>user defined Javascript .. editable in a &#8230;<\/li>\n<li>HTML textarea element<\/li>\n<\/ul>\n<p> &#8230; and then the coding latching onto a <i>document.<a target=\"_blank\" title='Javascript createElement method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_createelement.asp' rel=\"noopener\">createElement(&#8216;script&#8217;)<\/a><\/i> paradigm, to add Javascript clientside logic, on the fly.<\/p>\n<p>There&#8217;s a first <font size=1>time we can remember<\/font> aspect to how we present these possibilities to the user.  We present it in &#8230;<\/p>\n<ul>\n<li>amongst the inhouse annotation options &#8230; as a &#8230;<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" title='WordPress reveal posts' rel=\"noopener\">&#8220;reveal&#8221;<\/a> pairing of HTML5 <a target=\"_blank\" title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">details<\/a>\/<a target=\"_blank\" title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">summary<\/a> element combination look &#8230; the <font size=1>first time we can remember<\/font> aspect to that being &#8230;<\/li>\n<li>only initially displaying within the details element innerHTML is a summary element nesting a single &#8220;icon like&#8221; image (like the other &#8220;inhouse annotation&#8221; icon images) &#8230; but if clicked &#8230;<\/li>\n<li>the details innerHTML has added to it a textarea element &#8230;<br \/>\n<code><br \/>\n  function fillindetsed(odet) {<br \/>\n     if (odet.innerHTML.split('&lt;\/summary&gt;')[1] == '') {<br \/>\n      document.getElementById('tdleft').style.verticalAlign='top';<br \/>\n  var onls=thescript.split('&lt;scr' + 'ipt type=\"text\/javascript\"&gt;');<br \/>\n  var onlstuff=onls[1].split('&lt;\/sc' + 'ript&gt;')[0];<br \/>\n       odet.innerHTML+='&lt;scr' + 'ipt type=\"text\/javascript\"&gt;' + \"&lt;br&gt;&lt;textarea onblur=tproc(this); id=tscript rows=100 cols=80 value=''&gt;\" + onlstuff + \"&lt;\/textarea&gt;&lt;br&gt;&lt;\/script&gt;\";<br \/>\n       \/\/odet.innerHTML+='&lt;scr' + 'ipt type=\"text\/javascript\"&gt;' + \"&lt;br&gt;&lt;textarea onblur=tproc(this); id=tscript rows=100 cols=80 value=''&gt;\" + encodeURIComponent(onlstuff) + \"&lt;\/textarea&gt;&lt;br&gt;&lt;\/script&gt;\";<br \/>\n       \/\/document.getElementById('tscript').value=decodeURIComponent(document.getElementById('tscript').innerHTML);<br \/>\n     }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; from which <i>document.createElement(&#8216;script&#8217;)<\/i> code <i>onblur<\/i> event logic emanates &#8230;<\/p>\n<p><code><br \/>\n  function tproc(ota) {<br \/>\n      \/\/alert(ota.value);<br \/>\n      var tag = document.createElement('script');<br \/>\n      if (1 == 1) {<br \/>\n      obsuffix='&thescript=' + encodeURIComponent(ota.value);<br \/>\n      if (document.getElementById('aemail')) {<br \/>\n        hrefcheck(document.getElementById('aemail'));<br \/>\n      }<br \/>\n      \/\/alert('&lt;scr' + 'ipt type=\"text\/javascript\"&gt; ' + String.fromCharCode(10) + ota.value + String.fromCharCode(10) + ' &lt;\/scr' + 'ipt&gt;');<br \/>\n      tag.innerHTML = ' &lt;scr'.substring(0,1) + 'ipt type=\"text\/javascript\"&gt; '.slice(-1) + String.fromCharCode(10) + ota.value + String.fromCharCode(10) + ' &lt;\/scr'.substring(0,1) + 'ipt&gt; '.slice(-1);<br \/>\n      document.getElementById('dmap').innerHTML=document.getElementById('mymap').outerHTML + ' &lt;scr' + 'ipt type=\"text\/javascript\"&gt; ' + String.fromCharCode(10) + ota.value + String.fromCharCode(10) + ' &lt;\/scr' + 'ipt&gt; ';<br \/>\n      }<br \/>\n      var firstScriptTag = document.getElementsByTagName('script')[eval(-1 + document.getElementsByTagName('script').length)];<br \/>\n      \/\/alert(tag.outerHTML);<br \/>\n      firstScriptTag.insertAdjacentElement(\"afterend\", tag);<br \/>\n      \/\/alert(ota.value);<br \/>\n      document.getElementById('detsed').open=false;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html---------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html---------------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/google-chart-image-chart-image-map-event-editing-tutorial\/' rel=\"noopener\">Google Chart Image Chart Image Map Event Editing Tutorial<\/a> ...<\/p-->\n<hr>\n<p id='gcicimet'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Image Map Events Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-image-map-events-tutorial\/' rel=\"noopener\">Google Chart Image Chart Image Map Events 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Image Map Events Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_image_map_events.gif\" title=\"Google Chart Image Chart Image Map Events Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Image Map Events Tutorial<\/p><\/div>\n<p>We really like HTML image maps, and it occurred to us with yesterday&#8217;s <a title='Google Chart Image Chart Image Map Tutorial' href='#gcicimt'>Google Chart Image Chart Image Map Tutorial<\/a> we were hiding its light under some bushel somewhere, because &#8230;<\/p>\n<ul>\n<li>yesterday we introduced with only the <i>onclick<\/i> event coded for in the HTML <i>area<\/i> subelements to the <a target=\"_blank\" title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\"><i>map<\/i><\/a> parent element &#8230; linked to an &#8230;<\/li>\n<li>associated <i>img<\/i> element &#8230; via an &#8230;<\/li>\n<li>attribute called <i>usemap<\/i> &#8230; and two aspects, at the very least, to stuff under the bushel are &#8230;\n<ol>\n<li>many more events than <i>onclick<\/i> can be defined as you define the <i>area<\/i> subelements &#8230; and here&#8217;s the kicker &#8230;<\/li>\n<li>you can add <i>area<\/i> subelement event logic that, on paper, would cause interference with other event logic (ie. the same event type in an event bubbling through scenario) but it won&#8217;t if you, as a programmer, turn that use of the <i>usemap<\/i> attribute <span style=cursor:pointer;background-color:rgba(0,255,0,0.5); title=\"eg. document.getElementById('myvenn').useMap='#mymap';\">on<\/span> and <span style=cursor:pointer;background-color:rgba(255,0,0,0.5); title=\"eg. document.getElementById('myvenn').removeAttribute('usemap');\">off<\/span> like a tap<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; which, to our mind, represents the bee&#8217;s knees of event management.  So useful!<\/p>\n<p>To tip our toes into this woooorrrrrlllllddd we&#8217;ll show you some <font color=blue>newly added <i>area<\/i> subelement event logics<\/font> in a Google Chart Image Chart Radar Chart example below &#8230;<\/p>\n<p><code><br \/>\n&lt;map name=\"mymap\" id=\"mymap\"&gt;&lt;area <font color=blue>onmousedown=\"defclick(event);\" ondblclick=\"defclick(event);\" oncontextmenu=\"defclick(event);\" ontouchend=\"defclick(event);\" ontouchstart=\"defclick(event);\" onmouseout=\"defclick(event);\" onmousemove=\"defclick(event);\" ontouchdown=\"defclick(event);\" onmouseover=\"defclick(event);\"<\/font> shape=\"rect\" coords=\"151,34,157,42\" id=\"axis0_0\" name=\"axis0_0\" alt=\"axis0_0\" onclick=\"youralert(this,'This feature name is axis0_0');\" nohref=\"\"&gt;&lt;area <font color=blue>onmousedown=\"defclick(event);\" ondblclick=\"defclick(event);\" oncontextmenu=\"defclick(event);\" ontouchend=\"defclick(event);\" ontouchstart=\"defclick(event);\" onmouseout=\"defclick(event);\" onmousemove=\"defclick(event);\" ontouchdown=\"defclick(event);\" onmouseover=\"defclick(event);\"<\/font> shape=\"rect\" coords=\"281,110,288,118\" id=\"axis0_1\" name=\"axis0_1\" alt=\"axis0_1\" onclick=\"youralert(this,'This feature name is axis0_1');\" nohref=\"\"&gt;&lt;area <font color=blue>onmousedown=\"defclick(event);\" ondblclick=\"defclick(event);\" oncontextmenu=\"defclick(event);\" ontouchend=\"defclick(event);\" ontouchstart=\"defclick(event);\" onmouseout=\"defclick(event);\" onmousemove=\"defclick(event);\" ontouchdown=\"defclick(event);\" onmouseover=\"defclick(event);\"<\/font> shape=\"rect\" coords=\"281,260,288,268\" id=\"axis0_2\" name=\"axis0_2\" alt=\"axis0_2\" onclick=\"youralert(this,'This feature name is axis0_2');\" nohref=\"\"&gt;&lt;area <font color=blue>onmousedown=\"defclick(event);\" ondblclick=\"defclick(event);\" oncontextmenu=\"defclick(event);\" ontouchend=\"defclick(event);\" ontouchstart=\"defclick(event);\" onmouseout=\"defclick(event);\" onmousemove=\"defclick(event);\" ontouchdown=\"defclick(event);\" onmouseover=\"defclick(event);\"<\/font> shape=\"rect\" coords=\"151,336,157,344\" id=\"axis0_3\" name=\"axis0_3\" alt=\"axis0_3\" onclick=\"youralert(this,'This feature name is axis0_3');\" nohref=\"\"&gt;&lt;area <font color=blue>onmousedown=\"defclick(event);\" ondblclick=\"defclick(event);\" oncontextmenu=\"defclick(event);\" ontouchend=\"defclick(event);\" ontouchstart=\"defclick(event);\" onmouseout=\"defclick(event);\" onmousemove=\"defclick(event);\" ontouchdown=\"defclick(event);\" onmouseover=\"defclick(event);\"<\/font> shape=\"rect\" coords=\"20,260,27,268\" id=\"axis0_4\" name=\"axis0_4\" alt=\"axis0_4\" onclick=\"youralert(this,'This feature name is axis0_4');\" nohref=\"\"&gt;&lt;area <font color=blue>onmousedown=\"defclick(event);\" ondblclick=\"defclick(event);\" oncontextmenu=\"defclick(event);\" ontouchend=\"defclick(event);\" ontouchstart=\"defclick(event);\" onmouseout=\"defclick(event);\" onmousemove=\"defclick(event);\" ontouchdown=\"defclick(event);\" onmouseover=\"defclick(event);\"<\/font> shape=\"rect\" coords=\"20,110,27,118\" id=\"axis0_5\" name=\"axis0_5\" alt=\"axis0_5\" onclick=\"youralert(this,'This feature name is axis0_5');\" nohref=\"\"&gt;&lt;area id=\"adef\" onclick=\" defclick(event); if (!done) { done=false;  if (atstart) { normalcall=false; ask(null);  normalcall=true; atstart=false; } else { ask(event); } } \"<\/font> shape=\"default\" nohref=\"\"&gt;&lt;\/map&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; with <font color=blue>new relevant event code snippet<\/font> to help add intelligence to the event logic of our Google Chart Image Chart interfacing web application &#8230;<\/p>\n<p><code><br \/>\n  function defclick(evt) {<br \/>\n   <font color=blue>switch ('' + evt.type) {<br \/>\n   case 'click':<\/font><br \/>\n    alert('Welcome to RJM Programming interfacing to Google Charts Image Chart ' + cname);<br \/>\n    <font color=blue>break;<br \/>\n    <br \/>\n    default:<br \/>\n    switch (('' + evt.type + '     ').substring(0,5)) {<br \/>\n    case 'mouse':<br \/>\n     document.getElementById('myh3').innerHTML='RJM Programming - November, 2023 ... non-mobile mouse event ' + evt.type + ' called by ' + ('' + evt.target.id);<br \/>\n     break;<br \/>\n     <br \/>\n    case 'touch':<br \/>\n     document.getElementById('myh3').innerHTML='RJM Programming - November, 2023 ... mobile touch event ' + evt.type + ' called by ' + ('' + evt.target.id);<br \/>\n     break;<br \/>\n     <br \/>\n    default:<br \/>\n      alert(evt.type);<br \/>\n     break;<br \/>\n    }<br \/>\n    break;<br \/>\n    }<\/font><br \/>\n  }<br \/>\n<\/code><\/p>\n<p>Interesting, huh?!<\/li>\n<p>Feel free to try this out in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/google-chart-image-chart-image-map-events-tutorial\/' rel=\"noopener\">Google Chart Image Chart Image Map Events Tutorial<\/a> .<\/p-->\n<hr>\n<p id='gcicimt'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Image Map Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-image-map-tutorial\/' rel=\"noopener\">Google Chart Image Chart Image Map 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Image Map Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_image_map.jpg\" title=\"Google Chart Image Chart Image Map Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Image Map Tutorial<\/p><\/div>\n<p>Do you like to come at explaining things in layers?  Sort of like the analogy &#8230;<\/p>\n<ul>\n<li>you start a project thinking of it in terms of &#8220;2D&#8221; &#8230; and then to move forward &#8230;<\/li>\n<li>you spend a day making it work for &#8220;3D&#8221; (and keep the &#8220;2D&#8221; working as well)<\/li>\n<\/ul>\n<p> &#8230; or &#8230;<\/p>\n<ul>\n<li>you start a web application project thinking of only working via a URL entered on the web browser address bar &#8230; and then to move forward &#8230;<\/li>\n<li>you spend a day making it work for serving the same purpose and\/or a difference purpose called within an HTML iframe  (and keep it working for the address bar way as well)<\/li>\n<\/ul>\n<p>And so we look at a &#8220;picturesque&#8221; but &#8220;kinda dumb&#8221; <font size=1>(as far as &#8220;action items&#8221; go)<\/font> image we have coming off the interfacing to Google Charts Image Chart.  Where can we go here?  Well, it would be kind of you to take it to the beach, but that&#8217;s not always a possibility now, is it?!  <font size=2>Were you pulling my leg?!<\/font> <font size=1>Tee hee.<\/font>  No, we were thinking &#8230; <font size=1>oh no &#8230; we have a bad feeling about this<\/font> &#8230; let&#8217;s open it up to the class &#8230; <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA' rel=\"noopener\">anyone, anyone<\/a>?   Yes, <a target=\"_blank\" title='?' href='https:\/\/en.wikipedia.org\/wiki\/Auguste_and_Louis_Lumi%C3%A8re' rel=\"noopener\">Louis<\/a>, would you and <a target=\"_blank\" title='?' href='https:\/\/en.wikipedia.org\/wiki\/Auguste_and_Louis_Lumi%C3%A8re' rel=\"noopener\">Auguste<\/a> like to share with the class what is so amusing to you?<\/p>\n<p>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<p>Okay, thank you for your thoughts on this, and yes, you could take the &#8220;picture&#8221; to &#8220;a picture show&#8221;.  Yes, very droll, indeed.  Any other ideas?   Okay, <a target=\"_blank\" title=\"?\" href='https:\/\/en.wikipedia.org\/wiki\/Johann_Zahn' rel=\"noopener\">Johann<\/a>, you say the idea just &#8220;clicked&#8221; with you.  This sounds promising.  Go on &#8230;<\/p>\n<p>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<p>Indeed, a young &#8220;picturesque&#8221; might like to go tap dancing, that is true.  <font size=1>Sheeeeesh!<\/font>  But given the lesson is a Computing one, rather than Drama or Dance or Music or the Arts, maybe we would be looking for a way to use the picture in an enhanced way.  Okay <a target=\"_blank\" title=\"?\" href='https:\/\/en.wikipedia.org\/wiki\/Kevin_Hughes_(Internet_pioneer)' rel=\"noopener\">Kevin<\/a>, we&#8217;ll try you.  What do you think?<\/p>\n<p>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<p>Frankly, we are flabbergasted!  It&#8217;s as if you invented HTML <a target=\"_blank\" title='HTML image map' href='https:\/\/www.w3schools.com\/tags\/tag_map.asp' rel=\"noopener\">image maps<\/a> <font size=1>(as a way to add position based event logic)<\/font>, or something &#8230; 9<sup>3<\/sup>\/<sub>4<\/sub> points to Gryffindor!<\/p>\n<p>Yes, helping out we image map enthusiasts regarding interfacing to <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Charts<\/a> is Google&#8217;s <a target=\"_blank\" title='Image Map creator helping tool' href='https:\/\/developers.google.com\/chart\/image\/docs\/json_format#{%22chartshape%22:[{%22name%22:%22legend0%22,%22type%22:%22RECT%22,%22coords%22:[523,165,535,177]},{%22name%22:%22legend1%22,%22type%22:%22RECT%22,%22coords%22:[523,183,535,195]},{%22name%22:%22legend2%22,%22type%22:%22RECT%22,%22coords%22:[523,201,535,213]},{%22name%22:%22circle0%22,%22type%22:%22CIRCLE%22,%22coords%22:[324,222,127]},{%22name%22:%22circle1%22,%22type%22:%22CIRCLE%22,%22coords%22:[176,222,113]},{%22name%22:%22circle2%22,%22type%22:%22CIRCLE%22,%22coords%22:[237,126,98]}]}' rel=\"noopener\">Image Map creation helping Json output tool<\/a>.  From that help, we can &#8230;<\/p>\n<ul>\n<li>at the demonstrator&#8217;s webpage, create an Image Map &#8230; and as the user requires &#8230;<\/li>\n<li>at the uniquifier definition phase of our WordPress 404.php&#8217;s contribution we accept the demonstrator&#8217;s image map HTML, <font color=blue>and save it to a public resource<\/font> &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['canvcont'])) {<br \/>\n     if (isset($_POST['uniquifier'])) {<br \/>\n       $uniquifier=str_replace('+',' ',urldecode($_POST['uniquifier']));<br \/>\n     }<br \/>\n     if ($uniquifier == '') {<br \/>\n       $uniquifier='_' . rand(0,78654356);<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n     <font color=blue>if (isset($_POST['mapstuff'])) {<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".html\", '&lt;html&gt;&lt;body&gt;' . str_replace('+',' ',urldecode($_POST['mapstuff'])) . '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n     }<\/font><br \/>\n       exec(\"\/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 20 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\");<br \/>\n       echo \"&lt;html&gt;&lt;body onload=\\\"if (parent.document.getElementById('uniquifier')) {  if (parent.document.getElementById('uniquifier').value == '') { parent.document.getElementById('uniquifier').value='\" . $uniquifier . \"';  }  }\\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n     } else {<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\")) {<br \/>\n       $middelay='';<br \/>\n       $enddelay='';<br \/>\n       if (filesize($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\") &lt; filesize($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png\")) {<br \/>\n        $middelay=' -delay 800 ';<br \/>\n        $enddelay=' -delay 800 ';<br \/>\n       }<br \/>\n       exec(\"rm -f  \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif ; \/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 600 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png \" . $middelay . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png \" . $enddelay . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\");<br \/>\n       } else {<br \/>\n       exec(\"rm -f  \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif ; \/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 200 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\");<br \/>\n       }<br \/>\n     }<br \/>\n     exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<li>helping keep the image mapping going, even if the Image Chart is &#8230;\n<ol>\n<li>shared via email or SMS &#8230; and\/or &#8230;<\/li>\n<li>forms the basis of a Broadcast Talk demonstration session<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>We could use <a target=\"_blank\" title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)' rel=\"noopener\">Ajax<\/a> techniques for the Javascript client ways an emailee&#8217;s link&#8217;s webpage invocation can use this new resource, but we kind of like <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings' rel=\"noopener\">&#8220;client pre-emptive iframe&#8221;<\/a> <font size=1>onload<\/font> event thinking, for both sides of the ledger, to get this going, as per &#8230;<\/p>\n<p><code><br \/>\n function htmlDecode(input) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/1912501\/unescape-html-entities-in-javascript<br \/>\n  var e = document.createElement('textarea');<br \/>\n  e.innerHTML = input;<br \/>\n  \/\/ handle case of empty input<br \/>\n  return e.childNodes.length === 0 ? \"\" : e.childNodes[0].nodeValue;<br \/>\n }<br \/>\n  <br \/>\n  function mapsofarpj(xiois) {<br \/>\n   \/\/alert(('' + xiois.src));<br \/>\n   if (xiois.src != '' && ('' + xiois.src).indexOf('presentation') != -1) {<br \/>\n   \/\/alert(('' + xiois.src));<br \/>\n       var xaconto = (xiois.contentWindow || xiois.contentDocument);<br \/>\n   \/\/alert(11);<br \/>\n       if (xaconto != null) {<br \/>\n   \/\/alert(111);<br \/>\n       if (xaconto.document) { xaconto = xaconto.document; }<br \/>\n    \/\/alert(1111);<br \/>\n       if (xaconto.body.innerHTML.indexOf('&lt;map') != -1) {<br \/>\n        var ihis=xaconto.body.innerHTML;<br \/>\n        \/\/while (ihis.indexOf('\\&quot;') != -1) {<br \/>\n        \/\/  ihis=ihis.replace('\\&quot;', '')<br \/>\n        \/\/}<br \/>\n        ihis=htmlDecode(ihis).replace(\/\\\\\"\/g,'').replace(\/\\\\'\/g,\"'\").replace(\/\\=\\\"\\\"\/g,'').replace(\/This\\\"\/g,\"This\").replace(\/\\;\\ nohref\/g, ';\" nohref');<br \/>\n        \/\/alert(ihis);<br \/>\n         if (document.getElementById('jdiv')) {<br \/>\n    \/\/alert(21111);<br \/>\n          document.getElementById('jdiv').innerHTML=ihis; \/\/xaconto.body.innerHTML;<br \/>\n    \/\/alert(31111);<br \/>\n          document.getElementById('talkimg').useMap='#mymap';<br \/>\n    \/\/alert(41111);<br \/>\n         } else {<br \/>\n          document.body.innerHTML+=ihis; \/\/xaconto.body.innerHTML;<br \/>\n          document.getElementById('talkimg').useMap='#mymap';<br \/>\n         }<br \/>\n        }<br \/>\n       }<br \/>\n   }<br \/>\n  }<br \/>\n <br \/>\n  function sofarpj(iois) {<br \/>\n   var aname='', partsare=[], ipis=0, areabits='';<br \/>\n   if (iois.src != '') {<br \/>\n       var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n          pjsbih=aconto.body.innerHTML;<br \/>\n          if (lastpjsbih != '' && pjsbih != lastpjsbih.replace(\/\\ $\/g,'')) {<br \/>\n            \/\/alert('Found new Image Map data of ' + pjsbih);<br \/>\n            \/\/ {\"chartshape\":[{\"name\":\"axis0_0\",\"type\":\"RECT\",\"coords\":[21,336,28,344]},{\"name\":\"axis0_1\",\"type\":\"RECT\",\"coords\":[65,336,77,344]},{\"name\":\"axis0_2\",\"type\":\"RECT\",\"coords\":[111,336,124,344]},{\"name\":\"axis0_3\",\"type\":\"RECT\",\"coords\":[158,336,170,344]},{\"name\":\"axis0_4\",\"type\":\"RECT\",\"coords\":[204,336,217,344]},{\"name\":\"axis0_5\",\"type\":\"RECT\",\"coords\":[251,336,263,344]},{\"name\":\"axis0_6\",\"type\":\"RECT\",\"coords\":[297,336,310,344]},{\"name\":\"axis0_7\",\"type\":\"RECT\",\"coords\":[344,336,356,344]},{\"name\":\"axis0_8\",\"type\":\"RECT\",\"coords\":[390,336,403,344]},{\"name\":\"axis0_9\",\"type\":\"RECT\",\"coords\":[437,336,449,344]},{\"name\":\"axis0_10\",\"type\":\"RECT\",\"coords\":[480,336,499,344]},{\"name\":\"axis1_0\",\"type\":\"RECT\",\"coords\":[14,326,20,334]},{\"name\":\"axis1_1\",\"type\":\"RECT\",\"coords\":[8,297,20,305]},{\"name\":\"axis1_2\",\"type\":\"RECT\",\"coords\":[8,267,20,275]},{\"name\":\"axis1_3\",\"type\":\"RECT\",\"coords\":[8,237,20,245]},{\"name\":\"axis1_4\",\"type\":\"RECT\",\"coords\":[8,208,20,216]},{\"name\":\"axis1_5\",\"type\":\"RECT\",\"coords\":[8,178,20,186]},{\"name\":\"axis1_6\",\"type\":\"RECT\",\"coords\":[8,148,20,156]},{\"name\":\"axis1_7\",\"type\":\"RECT\",\"coords\":[8,119,20,127]},{\"name\":\"axis1_8\",\"type\":\"RECT\",\"coords\":[8,89,20,97]},{\"name\":\"axis1_9\",\"type\":\"RECT\",\"coords\":[8,59,20,67]},{\"name\":\"axis1_10\",\"type\":\"RECT\",\"coords\":[2,29,20,37]},{\"name\":\"legend0\",\"type\":\"RECT\",\"coords\":[500,167,512,179]},{\"name\":\"legend1\",\"type\":\"RECT\",\"coords\":[500,185,512,197]},{\"name\":\"circle0\",\"type\":\"CIRCLE\",\"coords\":[80,39,4]},{\"name\":\"circle1\",\"type\":\"CIRCLE\",\"coords\":[429,152,1]},{\"name\":\"circle2\",\"type\":\"CIRCLE\",\"coords\":[373,250,3]},{\"name\":\"circle3\",\"type\":\"CIRCLE\",\"coords\":[215,230,4]},{\"name\":\"circle4\",\"type\":\"CIRCLE\",\"coords\":[131,164,2]},{\"name\":\"circle5\",\"type\":\"CIRCLE\",\"coords\":[471,96,5]},{\"name\":\"circle6\",\"type\":\"CIRCLE\",\"coords\":[341,158,3]},{\"name\":\"circle7\",\"type\":\"CIRCLE\",\"coords\":[355,111,5]},{\"name\":\"circle8\",\"type\":\"CIRCLE\",\"coords\":[183,277,3]},{\"name\":\"circle9\",\"type\":\"CIRCLE\",\"coords\":[66,105,3]}]}<br \/>\n            if (pjsbih.replace(\/\\[\\]\/g, '').indexOf('[') != -1) {<br \/>\n               partsare=pjsbih.split('\",\"coords\":[');<br \/>\n               for (ipis=1; ipis&lt;partsare.length; ipis++) {<br \/>\n                 if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'RECT') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"rect\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'CIRCLE') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"circle\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'POLY') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"poly\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 }<br \/>\n               }<br \/>\n               document.getElementById('mymap').innerHTML=areabits + '&lt;area' + atend.split('&lt;area')[1].split('&gt;')[0] + '&gt;';  \/\/\"&lt;area onclick=defclick(event); shape='default' nohref&gt;\";<br \/>\n               origmap=document.getElementById('mymap').outerHTML;<br \/>\n            }<br \/>\n          } else if (lastpjsbih != '') {<br \/>\n            \/\/alert('Found the same ' + pjsbih);<br \/>\n            if (pjsbih.replace(\/\\[\\]\/g, '').indexOf('[') != -1) {<br \/>\n               partsare=pjsbih.split('\",\"coords\":[');<br \/>\n               for (ipis=1; ipis&lt;partsare.length; ipis++) {<br \/>\n                 if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'RECT') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"rect\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'CIRCLE') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"circle\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'POLY') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"poly\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 }<br \/>\n               }<br \/>\n               document.getElementById('mymap').innerHTML=areabits + '&lt;area' + atend.split('&lt;area')[1].split('&gt;')[0] + '&gt;';  \/\/\"&lt;area onclick=defclick(event); shape='default' nohref&gt;\";<br \/>\n               origmap=document.getElementById('mymap').outerHTML;<br \/>\n            }<br \/>\n          }<br \/>\n          lastpjsbih=pjsbih;<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code> <\/p>\n<p> &#8230; further to yesterday&#8217;s <a title='Google Chart Image Chart Dynamic Icons Tutorial' href='#gcicdit'>Google Chart Image Chart Dynamic Icons Tutorial<\/a> in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/google-chart-image-chart-image-map-tutorial\/' rel=\"noopener\">Google Chart Image Chart Image Map Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicdit'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Dynamic Icons Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-dynamic-icons-tutorial\/' rel=\"noopener\">Google Chart Image Chart Dynamic Icons 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Dynamic Icons Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_dynamic_icons.jpg\" title=\"Google Chart Image Chart Dynamic Icons Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Dynamic Icons Tutorial<\/p><\/div>\n<p>Does statistics have to be staid and boring?  Kitch and quiche?!  Welcome to the wooorrrlllddd of <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Chart<\/a> <a target=\"_blank\" title='Google Charts Image Chart Dynamic Icons' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/dynamic_icons' rel=\"noopener\">Dynamic Icons<\/a>!<\/p>\n<p>Think of Dynamic Icons as a way to decorate one or more data points displayed in one of &#8230;<\/p>\n<ul>\n<li>Line Chart<\/li>\n<li>Bar Chart<\/li>\n<li>Map Chart<\/li>\n<li>Radar Chart<\/li>\n<\/ul>\n<p>We had that certain <font size=5>&#8220;Wow<sup>!<\/sup>&#8220;<\/font> factor going as we remembered our state&#8217;s motto from some years back, and we tried out the Map Chart to see whether we could embellish the map with a Dynamic Icon relevant to New South Wales, as you can see with today&#8217;s <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_dynamic_icons.jpg\" rel=\"noopener\">tutorial picture<\/a>.<\/p>\n<p>We&#8217;ll show you the most recent snapshot of Javascript parameters a little later, but the change for this is an optional one up to the user to work out, with prompts such as the Map Chart one <font color=blue>updated<\/font> &#8230;<\/p>\n<table style=\"width:100%;\">\n<tr>\n<td><img src='\/\/www.rjmprogramming.com.au\/ITblog\/550\/330\/?cht=map&#038;chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&#038;chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&#038;chem=y;s=bubble_icon_text_small;d=ski,bb,NSW%20State%20of%20Wow!,FFFFFF;dp=1;ds=0'><\/img><\/td>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'>\n<blockquote><p>\nEnter vertical bar separated country ISO Country and\/or Region Code list<font color=blue size=1>.  Please note that optional Dynamic Icons are available via a suffixing string example applied to the second data point such as &#038;chem=y;s=bubble_icon_text_small;d=ski,bb,NSW%20State%20of%20Wow!,FFFFFF;dp=1;ds=0 <\/font> eg. AU-NT|AU-NSW|AU-SA|NZ|IN&#8217;\n<\/p><\/blockquote>\n<\/td>\n<tr><\/table>\n<p>And <font color=blue>here is its relevance<\/font> in a new snapshot of parameterizations &#8230;<\/p>\n<p><code><br \/>\n  var prefixandon='';<br \/>\n  var dtextis='dtext';<br \/>\n  var pretherest='';<br \/>\n  var newtherest='';<br \/>\n  var tmod='';<br \/>\n  var colchange='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  \/\/if ((cht + '  ').substring(0,2) == 'bv' && cht != 'bv') { pretherest=cht.substring(2); if (1 == 1) { cht='bv'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'bv'.substring(0,1) && cht != 'bv'.substring(0,1)) { pretherest=cht.substring(1); if (1 == 1) { cht='bv'.substring(0,1); }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'l' && cht != 'l') { pretherest=cht.substring(1); if (1 == 1) { cht='l'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'r' && cht != 'r') { pretherest=cht.substring(1); if (1 == 1) { cht='r'; }   }<br \/>\n  var ccode=location.search.split('chld=')[1] ? decodeURIComponent(location.search.split('chld=')[1].split('&')[0]) : \"\";<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar Chart' : (ctype.substring(0,1) == 'l' ? 'Line Chart' :<br \/>\n  (ctype == 'map' ? 'Map Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter Chart' :<br \/>\n  (ctype == 'r' ? 'Radar Chart' :<br \/>\n  '')))))))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar%20Chart' : (ctype.substring(0,1) == 'l' ? 'Line%20Chart' :<br \/>\n  (ctype == 'map' ? 'Map%20Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter%20Chart' :<br \/>\n  (ctype == 'r' ? 'Radar%20Chart' :<br \/>\n  '')))))))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=t:' : (ctype.substring(0,1) == 'l' ? '&chd=t:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chd=t:' :<br \/>\n  (ctype == 'r' ? pretherest + '&chd=t:' :<br \/>\n  '')))))))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chd=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=' : (ctype.substring(0,1) == 'l' ? '&chd=' :<br \/>\n  (ctype == 'map' ? '&chld=' :<br \/>\n  (ctype == 'gom' ? '&chld=' :<br \/>\n  (ctype == 'r' ? '&chd=' :<br \/>\n  '')))))))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 't:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 't:' : (ctype.substring(0,1) == 'l' ? 't:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 't:' :<br \/>\n  (ctype == 'r' ? 't:' :<br \/>\n  '')))))))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chdl=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chbh=' : (ctype.substring(0,1) == 'l' ? '&chbh=' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chdl=' :<br \/>\n  (ctype == 'r' ? '&chxt=x&chxl=' :<br \/>\n  '')))))))));<br \/>\n<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '1,2,3,4' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '5,5,5|10,10,10|15,15,15' : (ctype.substring(0,1) == 'l' ? '5,45,5|10,60,10|15,85,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '20,40,60' :<br \/>\n  (ctype == 'r' ? '10,20,30,40,50' :<br \/>\n  '')))))))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'January|February|March|April' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '15,4,15' : (ctype.substring(0,1) == 'l' ? '15,4,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'A|B|C' :<br \/>\n  (ctype == 'r' ? '0:|1|2|3|4|5|6' :<br \/>\n  '')))))))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '4D89F9,C6D9FD,C6FDD9&chxt=x,y' : (ctype.substring(0,1) == 'l' ? '3D89F9.B6D9FD,B6FDD9&chxt=x,y' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'ff0000,00ff00,0000ff' :<br \/>\n  (ctype == 'r' ? 'FF0000,FF9900,ff0a00,00ffb0,000cff' :<br \/>\n  '')))))))));<br \/>\n<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt :<br \/>\n  (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? chdt + prenchtt + chdl + preachtt : (ctype.substring(0,1) == 'l' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'r' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  '')))))))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter v for Vertical or h for Horizontal then one of g for Group or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and horizontal Bar Chart idea eg. hg 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  (ctype == 'r' ? \"Enter delimited values string for Radar Chart but prefix with an s for smooth lines\" :<br \/>\n  \"\")))))))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter g for Grouped or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  (ctype == 'r' ? \"Enter delimited values string for Radar Chart but prefix with an s for smooth lines\" :<br \/>\n  \"\")))))))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false :<br \/>\n  (ctype.substring(0,1) == 'p' ? true :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? true : (ctype.substring(0,1) == 'l' ? true :<br \/>\n  (ctype == 'map' ? false :<br \/>\n  (ctype == 'gom' ? true :<br \/>\n  (ctype == 'r' ? true :<br \/>\n  false)))))))));<br \/>\n  <br \/>\n  <font color=blue>var answersuffix=(ctype.substring(0,1).replace('m','l').replace('b','l').replace('r','l') == 'l' ? '.  Please note that optional Dynamic Icons are available via a suffixing string example applied to the second data point such as &chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=1;ds=0 ' : '');<\/font><br \/>\n  <br \/>\n  var twopb=(ctype.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n  var beforeanswer=(ctype.substring(0,1) == 'l' ? 'c ' : ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'vg ' : ''));<br \/>\n  <br \/>\n  var emsmlist='';<br \/>\n<\/code><\/p>\n<p> &#8230; further to yesterday&#8217;s <a title='Google Chart Image Chart Broadcast Talk Commentary Tutorial' href='#gcicbtct'>Google Chart Image Chart Broadcast Talk Commentary Tutorial<\/a> in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/google-chart-image-chart-dynamic-icons-tutorial\/' rel=\"noopener\">Google Chart Image Chart Dynamic Icons Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicbtct'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Broadcast Talk Commentary Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-commentary-tutorial\/' rel=\"noopener\">Google Chart Image Chart Broadcast Talk Commentary 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Broadcast Talk Commentary Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_commentary.gif\" title=\"Google Chart Image Chart Broadcast Talk Commentary Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Broadcast Talk Commentary Tutorial<\/p><\/div>\n<p>We&#8217;ll leave yesterday&#8217;s <a title='Google Chart Image Chart Radar Chart Tutorial' href='#gcicrct'>Google Chart Image Chart Radar Chart Tutorial<\/a> angled text predilections for now, given we&#8217;ve got until Tuesday until tswhtf so to speak.  Let&#8217;s today remedy the concern we had when we presented <a title='Google Chart Image Chart Broadcast Talk Context Tutorial' href='#gcxicbtct'>Google Chart Image Chart Broadcast Talk Context Tutorial<\/a> regarding, the at the time new, &#8220;Broadcast Talk&#8221;, concept &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-tutorial\/'><p>\n &#8230; even though it is only visual by nature, presented as an update image still presented and updated periodically.  Go figure?!\n<\/p><\/blockquote>\n<p> &#8230; and offer a way to help the &#8220;Broadcast Talk&#8221; demonstrator &#8220;speak&#8221; during their demonstration, effectively.  In so doing, we are going to add to &#8230;<\/p>\n<ul>\n<li>the demonstrator&#8217;s visual inputs coming from that canvas annotator helper &#8230; with, today &#8230;<\/li>\n<li>the demonstrator&#8217;s commentary, collected via an HTML textarea element (to optionally supplement the visuals) from that canvas annotator helper&#8217;s originator window (ie. the <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Chart<\/a> interfacing supervisor) &#8230; presented &#8230;<\/li>\n<\/ul>\n<p> &#8230; via a new &#8220;middle of three slide&#8221; &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n      $uwidth=trim($uparts[$ioff - 2 + sizeof($uparts)]);<br \/>\n      $uheight=trim(explode('#',explode('?',$uparts[$ioff - 1 + sizeof($uparts)])[0])[0]);<br \/>\n  <font color=blue>if (isset($_GET['canvcont']) && isset($_GET['uniquifier'])) {<br \/>\n       $uniquifier=str_replace('+',' ',urldecode($_GET['uniquifier']));<br \/>\n       if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\")) {<br \/>\n          $im = imagecreatefromstring(file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\"));<br \/>\n          $white = imagecolorallocate($im, 255, 255, 255);<br \/>\n          $black = imagecolorallocate($im, 1, 1, 1);<br \/>\n          imagefilledrectangle($im, 0, 0, $uwidth, $uheight, $white);<br \/>\n          imagesavealpha($im, TRUE);<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  imagettftext($im, 12, 0, 20, 20, $black, realpath('arial.ttf'), str_replace('+',' ',urldecode($_GET['canvcont'])));<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n<br \/>\n imagepng($im, $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\");<br \/>\n imagedestroy($im);<br \/>\n exit;<br \/>\n       }<br \/>\n       exit;<br \/>\n  }   <\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; animated GIF (PHP 404.php helping) means of display in the viewer windows (off email invitation links they receive via the demonstrator) in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------GETME\" rel=\"noopener\">the changed<\/a> &#8230;<\/p>\n<p><code><br \/>\n  function askaway() {<br \/>\n     var waspis=prefixandon, nl='', newwaspis='';<br \/>\n     if (document.getElementById('bcommentary')) {<br \/>\n     if (document.getElementById('bcommentary').value.trim() != '') {<br \/>\n       if (document.getElementById('bcommentary').value.trim().indexOf(String.fromCharCode(10)) == -1) {<br \/>\n         nl=String.fromCharCode(10);<br \/>\n       }<br \/>\n       eightthousand=24000;<br \/>\n       if (('   ' + document.getElementById('bcommentary').value.trim()).slice(-3) != '...' && ('   ' + prefixandon.trim()).slice(-3) != '...' && (document.getElementById('bcommentary').value.trim() + '   ').substring(0,3) != '...') {<br \/>\n         prefixandon='';<br \/>\n         lastval='';<br \/>\n       } else if ((document.getElementById('bcommentary').value.trim() + '   ').substring(0,3) == '...') {<br \/>\n         if (waspis.indexOf(lastval.trim()) == -1) {<br \/>\n         prefixandon=String.fromCharCode(10) + lastval.trim().replace(\/\\.\\.\\.NoWayJosE$\/g, ' ' + nl + ('' + (new Date()))  + ' ... ') + waspis;<br \/>\n         newwaspis=prefixandon;<br \/>\n         }<br \/>\n       }<br \/>\n       if (('   ' + document.getElementById('bcommentary').value.trim()).slice(-3) == '...') {<br \/>\n       document.getElementById('ifco').src='\/\/www.rjmprogramming.com.au\/ITblog\/' + Math.min(550,window.innerWidth) + '\/' + Math.min(350,window.innerHeight) + '\/?uniquifier=' + encodeURIComponent(document.getElementById('uniquifier').value) + '&canvcont=' + encodeURIComponent(document.getElementById('bcommentary').value.trim().replace(\/\\.\\.\\.$\/g, ' ' + nl + ('' + (new Date())) + ' ... ' + String.fromCharCode(10) + String.fromCharCode(10) + prefixandon));<br \/>\n       } else {<br \/>\n       document.getElementById('ifco').src='\/\/www.rjmprogramming.com.au\/ITblog\/' + Math.min(550,window.innerWidth) + '\/' + Math.min(350,window.innerHeight) + '\/?uniquifier=' + encodeURIComponent(document.getElementById('uniquifier').value) + '&canvcont=' + encodeURIComponent(document.getElementById('bcommentary').value + String.fromCharCode(10) + String.fromCharCode(10) + prefixandon);<br \/>\n       }<br \/>\n       document.getElementById('bcommentary').title=document.getElementById('bcommentary').value;<br \/>\n       if ((document.getElementById('bcommentary').value.trim() + '   ').substring(0,3) == '...') {<br \/>\n         if (newwaspis != '') { waspis=newwaspis;  }<br \/>\n         if (waspis.indexOf(document.getElementById('bcommentary').value.trim()) == -1) {<br \/>\n         prefixandon=String.fromCharCode(10) + document.getElementById('bcommentary').value.trim().replace(\/\\.\\.\\.$\/g, ' ' + nl + ('' + (new Date()))  + ' ... ') + waspis;<br \/>\n         }<br \/>\n       }<br \/>\n       lastval=document.getElementById('bcommentary').value;<br \/>\n       document.getElementById('bcommentary').value='';<br \/>\n       setTimeout(function(){ document.getElementById('subcc').click(); }, 2000);<br \/>\n     }<br \/>\n     }<br \/>\n  }<br \/>\n  <br \/>\n  function newfunction() {<br \/>\n         if (document.getElementById('bshare')) {<br \/>\n         document.getElementById('sbshare').innerHTML='&lt;iframe id=ifco style=display:none; src=&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;br&gt;&lt;textarea rows=2 cols=80 id=bcommentary placeholder=\"Commentary to Viewers can go here ... start with or end with  ... for ongoing ...\" onblur=\"askaway(this);\" value=\"\"&gt;&lt;\/textarea&gt;&lt;br&gt;&lt;br&gt;';<br \/>\n         }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/google-chart-image-chart-broadcast-talk-commentary-tutorial\/' rel=\"noopener\">Google Chart Image Chart Broadcast Talk Commentary Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicrct'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Radar Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-radar-chart-tutorial\/' rel=\"noopener\">Google Chart Image Chart Radar Chart 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Radar Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_radar.jpg\" title=\"Google Chart Image Chart Radar Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Radar Chart Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Google Chart Image Chart Box Chart Tutorial' href='#gcicbct'>Google Chart Image Chart Box Chart Tutorial<\/a>, today we have a two part stepping forward via new &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Google Chart Image Chart Radar Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/radar_charts' rel=\"noopener\">Radar Chart<\/a> interfacing for <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Chart<\/a> &#8230; and &#8230;<\/li>\n<li>first tentative steps towards, on non-mobile platforms, allowing for text placement rubber banding<\/li>\n<\/ul>\n<p>Why the trepidation?  Well, so far, when the text is angled we can&#8217;t understand what results we are getting back from a call to [element].getBoundingClientRect() just yet.<\/p>\n<p>Why is this needed?  <font size=1>Again, with the questions!<\/font>  Well, Mr De Niro, you see, well, somebody might want to go onto that more complex annotating.<\/p>\n<p>And why would they do that?  <font size=1>Sheesh.<\/font>  Well, Mr De Niro, sir, you see, sometimes things happen in life, and well, fingers slip on keyboards, and mice get awfullllly nervous around screens these days.<\/p>\n<p>Yeh, well, show us the money, wiseguy.  <font size=1>Who&#8217;s is that question?  And what&#8217;s with the questions?<\/font>  Well, you see, Mr De Niro, the money is if we can get PHP text placement for text at an angle, where it rotates from the middle of the text, to get a similar positioning to good ol&#8217; &#8230; pardon, Mr De Niro &#8230; good and well respected Javascript transform rotations &#8230; not with a triple pike, Mr De Niro, but you&#8217;re awfulllllly close, Mr De Niro, sir &#8230; rather, we throw in a couple of translations &#8230; no, not Latin, Mr De Niro &#8230; of co-ordinates, Mr De Niro.<\/p>\n<p>And that will bring in how much by next Tuesday?  <font size=1>Back to the questions?  Why so many questions?<\/font>  We think it&#8217;s a pretty big money spinner, Mr De Niro, sir, and we think you should come back next Tuesday, and we can show you the ropes.  <font size=1>Sweat, oozing from the brow, as Mr De Niro exits stage left.<\/font><\/p>\n<p>And just while we have a few minutes, here&#8217;s the updated Javascript parameterization &#8230;<\/p>\n<p><code><br \/>\n  var dtextis='dtext';<br \/>\n  var pretherest='';<br \/>\n  var newtherest='';<br \/>\n  var tmod='';<br \/>\n  var colchange='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  \/\/if ((cht + '  ').substring(0,2) == 'bv' && cht != 'bv') { pretherest=cht.substring(2); if (1 == 1) { cht='bv'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'bv'.substring(0,1) && cht != 'bv'.substring(0,1)) { pretherest=cht.substring(1); if (1 == 1) { cht='bv'.substring(0,1); }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'l' && cht != 'l') { pretherest=cht.substring(1); if (1 == 1) { cht='l'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'r' && cht != 'r') { pretherest=cht.substring(1); if (1 == 1) { cht='r'; }   }<br \/>\n  var ccode=location.search.split('chld=')[1] ? decodeURIComponent(location.search.split('chld=')[1].split('&')[0]) : \"\";<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar Chart' : (ctype.substring(0,1) == 'l' ? 'Line Chart' :<br \/>\n  (ctype == 'map' ? 'Map Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter Chart' :<br \/>\n  (ctype == 'r' ? 'Radar Chart' :<br \/>\n  '')))))))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar%20Chart' : (ctype.substring(0,1) == 'l' ? 'Line%20Chart' :<br \/>\n  (ctype == 'map' ? 'Map%20Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter%20Chart' :<br \/>\n  (ctype == 'r' ? 'Radar%20Chart' :<br \/>\n  '')))))))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=t:' : (ctype.substring(0,1) == 'l' ? '&chd=t:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chd=t:' :<br \/>\n  (ctype == 'r' ? pretherest + '&chd=t:' :<br \/>\n  '')))))))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chd=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=' : (ctype.substring(0,1) == 'l' ? '&chd=' :<br \/>\n  (ctype == 'map' ? '&chld=' :<br \/>\n  (ctype == 'gom' ? '&chld=' :<br \/>\n  (ctype == 'r' ? '&chd=' :<br \/>\n  '')))))))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 't:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 't:' : (ctype.substring(0,1) == 'l' ? 't:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 't:' :<br \/>\n  (ctype == 'r' ? 't:' :<br \/>\n  '')))))))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chdl=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chbh=' : (ctype.substring(0,1) == 'l' ? '&chbh=' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chdl=' :<br \/>\n  (ctype == 'r' ? '&chxt=x&chxl=' :<br \/>\n  '')))))))));<br \/>\n<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '1,2,3,4' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '5,5,5|10,10,10|15,15,15' : (ctype.substring(0,1) == 'l' ? '5,45,5|10,60,10|15,85,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '20,40,60' :<br \/>\n  (ctype == 'r' ? '10,20,30,40,50' :<br \/>\n  '')))))))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'January|February|March|April' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '15,4,15' : (ctype.substring(0,1) == 'l' ? '15,4,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'A|B|C' :<br \/>\n  (ctype == 'r' ? '0:|1|2|3|4|5|6' :<br \/>\n  '')))))))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '4D89F9,C6D9FD,C6FDD9&chxt=x,y' : (ctype.substring(0,1) == 'l' ? '3D89F9.B6D9FD,B6FDD9&chxt=x,y' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'ff0000,00ff00,0000ff' :<br \/>\n  (ctype == 'r' ? 'FF0000,FF9900,ff0a00,00ffb0,000cff' :<br \/>\n  '')))))))));<br \/>\n<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt :<br \/>\n  (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? chdt + prenchtt + chdl + preachtt : (ctype.substring(0,1) == 'l' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'r' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  '')))))))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter v for Vertical or h for Horizontal then one of g for Group or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and horizontal Bar Chart idea eg. hg 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  (ctype == 'r' ? \"Enter delimited values string for Radar Chart but prefix with an s for smooth lines\" :<br \/>\n  \"\")))))))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter g for Grouped or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  (ctype == 'r' ? \"Enter delimited values string for Radar Chart but prefix with an s for smooth lines\" :<br \/>\n  \"\")))))))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false :<br \/>\n  (ctype.substring(0,1) == 'p' ? true :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? true : (ctype.substring(0,1) == 'l' ? true :<br \/>\n  (ctype == 'map' ? false :<br \/>\n  (ctype == 'gom' ? true :<br \/>\n  (ctype == 'r' ? true :<br \/>\n  false)))))))));<br \/>\n  <br \/>\n  var twopb=(ctype.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n  var beforeanswer=(ctype.substring(0,1) == 'l' ? 'c ' : ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'vg ' : ''));<br \/>\n<br \/> <br \/>\n  var emsmlist='';<br \/>\n<\/code><\/p>\n<p> &#8230; that goes into helping make <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>, have regular sleepovers on cloud nine.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Did you notice the inclusion of CSS styling &#8230;<\/p>\n<p>&lt;style&gt;<br \/>\n<code><br \/>\n#fsangle { background-image: url(\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'&gt;&lt;text y='50%'&gt; \\00B0&lt;\/text&gt;&lt;\/svg&gt;\"); background-repeat: no-repeat; background-position: center right; }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<\/p>\n<p>?  It styles an input type=number textbox where a <i>placeholder<\/i> is not really an option to explain a textbox&#8217;s purpose, and we do dislike set aside labels, these days.  It&#8217;s also a way to explain the textbox for mobile users who do not get a hovering message to help.  It&#8217;s also got an internationalization feel to it, using the degree sign emoji &#176; (ie. &amp;#176; <font size=1>or that \\u0080 <a target=\"_blank\" title='Degree symbol' href='https:\/\/www.fileformat.info\/info\/unicode\/char\/b0\/index.htm' rel=\"noopener\">UTF-16 Encoding style of definition<\/a> suitable for CSS styling usage<\/font>) to both associate the units we&#8217;d want, as well as that we are asking for an angle.  Clockwise or anticlockwise, alas, comes down to user experience!<\/p>\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\/new-google-chart-image-chart-box-chart-tutorial\/' rel=\"noopener\">New Google Chart Image Chart Radar Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicbct'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Box Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-box-chart-tutorial\/' rel=\"noopener\">Google Chart Image Chart Box Chart 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Box Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_box.jpg\" title=\"Google Chart Image Chart Box Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Box Chart Tutorial<\/p><\/div>\n<p>Today we offer new &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Google Chart Image Chart Box Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/compound_charts#box_charts' rel=\"noopener\">Box Chart<\/a> compound chart arrangements off the <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Chart<\/a> Bar Chart and Line Chart functionalties<\/li>\n<li><a target=\"_blank\" title='Google-O-Meter Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/googleometer_chart' rel=\"noopener\">Google-O-Meter Chart<\/a> guage<\/li>\n<\/ul>\n<p> &#8230; interfacings, onto the progress up to yesterday&#8217;s <a title='Google Chart Image Chart Colour Tutorial' href='#gcicct'>Google Chart Image Chart Colour Tutorial<\/a>.<\/p>\n<p>As such, it&#8217;s probably timely to update you with the parameterization up the top of the Javascript code &#8230;<\/p>\n<p><code><br \/>\n  var pretherest='';<br \/>\n  var newtherest='';<br \/>\n  var tmod='';<br \/>\n  var colchange='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  \/\/if ((cht + '  ').substring(0,2) == 'bv' && cht != 'bv') { pretherest=cht.substring(2); if (1 == 1) { cht='bv'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'bv'.substring(0,1) && cht != 'bv'.substring(0,1)) { pretherest=cht.substring(1); if (1 == 1) { cht='bv'.substring(0,1); }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'l' && cht != 'l') { pretherest=cht.substring(1); if (1 == 1) { cht='l'; }   }<br \/>\n  var ccode=location.search.split('chld=')[1] ? decodeURIComponent(location.search.split('chld=')[1].split('&')[0]) : \"\";<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar Chart' : (ctype.substring(0,1) == 'l' ? 'Line Chart' :<br \/>\n  (ctype == 'map' ? 'Map Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter Chart' :<br \/>\n  ''))))))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar%20Chart' : (ctype.substring(0,1) == 'l' ? 'Line%20Chart' :<br \/>\n  (ctype == 'map' ? 'Map%20Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter%20Chart' :<br \/>\n  ''))))))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=t:' : (ctype.substring(0,1) == 'l' ? '&chd=t:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chd=t:' :<br \/>\n  ''))))))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chd=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=' : (ctype.substring(0,1) == 'l' ? '&chd=' :<br \/>\n  (ctype == 'map' ? '&chld=' :<br \/>\n  (ctype == 'gom' ? '&chdl=' :<br \/>\n  ''))))))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 't:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 't:' : (ctype.substring(0,1) == 'l' ? 't:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 't:' :<br \/>\n  ''))))))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chdl=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chbh=' : (ctype.substring(0,1) == 'l' ? '&chbh=' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chdl=' :<br \/>\n  ''))))))));<br \/>\n<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '1,2,3,4' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '5,5,5|10,10,10|15,15,15' : (ctype.substring(0,1) == 'l' ? '5,45,5|10,60,10|15,85,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '20,40,60' :<br \/>\n  ''))))))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'January|February|March|April' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '15,4,15' : (ctype.substring(0,1) == 'l' ? '15,4,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'A|B|C' :<br \/>\n  ''))))))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '4D89F9,C6D9FD,C6FDD9&chxt=x,y' : (ctype.substring(0,1) == 'l' ? '3D89F9.B6D9FD,B6FDD9&chxt=x,y' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'ff0000,00ff00,0000ff' :<br \/>\n  ''))))))));<br \/>\n<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt :<br \/>\n  (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? chdt + prenchtt + chdl + preachtt : (ctype.substring(0,1) == 'l' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ''))))))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter v for Vertical or h for Horizontal then one of g for Group or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and horizontal Bar Chart idea eg. hg 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  \"\"))))))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter g for Grouped or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  \"\"))))))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false :<br \/>\n  (ctype.substring(0,1) == 'p' ? true :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? true : (ctype.substring(0,1) == 'l' ? true :<br \/>\n  (ctype == 'map' ? false :<br \/>\n  (ctype == 'gom' ? true :<br \/>\n  false))))))));<br \/>\n  <br \/>\n  var twopb=(ctype.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n  var beforeanswer=(ctype.substring(0,1) == 'l' ? 'c ' : ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'vg ' : ''));<br \/>\n  <br \/>\n  var emsmlist='';<br \/>\n<\/code><\/p>\n<p> &#8230; that goes into helping make <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------------GETME\" rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>, one of the happiest little vegemites we know.<\/p>\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\/google-chart-image-chart-box-chart-tutorial\/' rel=\"noopener\">Google Chart Image Chart Box Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicct'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Colour Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-colour-tutorial\/' rel=\"noopener\">Google Chart Image Chart Colour 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Colour Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_colour_angle.jpg\" title=\"Google Chart Image Chart Colour Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Colour Tutorial<\/p><\/div>\n<p>Restricting you creatives to &#8220;inhouse annotations&#8221; of the &#8220;gray variety&#8221; might be seen as a bit boooorrrriiiinnnngggg!  And so, onto the progress up to yesterday&#8217;s <a title='Google Chart Image Chart Rubber Banding Tutorial' href='#gcicrbt'>Google Chart Image Chart Rubber Banding Tutorial<\/a>, today we&#8217;ve added a &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='HTML input type=color Colour Picker element information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_type_color.asp' rel=\"noopener\">colour picker<\/a> &#8230; way user can define an &#8220;inhouse annotations&#8221; colour &#8230; and while we were at it &#8230;<\/li>\n<li>as far as text &#8220;inhouse annotations&#8221; go we&#8217;ve added a counterclockwise from the horizon, in degrees, way to define an angle the text should be placed at &#8230; and &#8230;<\/li>\n<li>we&#8217;ve stopped closing off the text font size dropdown too early, allowing the user to mix it up with their annotations, and so &#8230;<br \/>\n<blockquote><p>\nWe now recommend, for those users pushing the boundaries of functionality, to gather all their &#8220;inhouse annotations&#8221; together before any &#8220;graphical canvas annotations&#8221; are thought about.\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p>Which begs the question &#8230;<\/p>\n<blockquote cite='https:\/\/www.facebook.com\/classicOzTV\/videos\/where-do-ya-get-it\/229525111056606\/'><p>\n<a target=\"_blank\" title=\"?\" href='https:\/\/www.facebook.com\/classicOzTV\/videos\/where-do-ya-get-it\/229525111056606\/' rel=\"noopener\">Where do you get it?<\/a>\n<\/p><\/blockquote>\n<p>Well, here, via <font size=2>&#8230; dare we say it?! &#8230; <\/font> &#8230; via &#8230;<\/p>\n<blockquote><p>\nMantissa Madness Monday\n<\/p><\/blockquote>\n<p>Both colour and degree counterclockwise angle became <a href='pmmm'>&#8220;Mantissa Madness Monday&#8221;<\/a> tragics, a bit like moi, really?<\/p>\n<p>How did we express these two measures?<\/p>\n<ul>\n<li><font color=blue>colour<\/font> can be derived at the 404.php end via mantissae that are 9 or more long where a number of the form rrrgggbbb is numerical and passed across to 404.php in the y co-ordinate mantissa &#8230; while &#8230; kind of crazily &#8230;<\/li>\n<li><font color=purple>angle<\/font> can be a set of zeros in the x co-ordinate mantissa represented by zero characters to the length of the angle from 1 to 359 in front of a pre-existant font size (in px) usage, from last <a href='#gcicgvct'>&#8220;Mantissa Madness Monday&#8221;<\/a> <font size=1>(us getting away with this because no font size should start with a zero)<\/font><\/li>\n<\/ul>\n<p>Oh!   We have such fun around here?!  Below is PHP WordPress blog 404.php code &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n \/\/ text placement<br \/>\n       $black = imagecolorallocatealpha($im, 1, 1, 1, 0);<br \/>\n       $blackish = imagecolorallocatealpha($im, 127, 127, 127, 64);<br \/>\n       <font color=blue>$yis=$csv[1];<br \/>\n       $mantissae=explode('.', ('' . $csv[1]));<br \/>\n       if (sizeof($mantissae) &gt; 1) {<br \/>\n         if (strlen($mantissae[1]) &gt;= 9) {<br \/>\n                $black = imagecolorallocatealpha($im, intval(substr($mantissae[1],0,3)), intval(substr(substr($mantissae[1],3),0,3)), intval(substr(substr($mantissae[1],6),0,3)), 0);<br \/>\n                $blackish = imagecolorallocatealpha($im, intval(substr($mantissae[1],0,3)), intval(substr(substr($mantissae[1],3),0,3)), intval(substr(substr($mantissae[1],6),0,3)), 64);<br \/>\n         }<br \/>\n         $yis=$mantissae[0];<br \/>\n       }<\/font><br \/>\n       <font color=purple>$za=0;<br \/>\n       $xis=$csv[0];<\/font><br \/>\n       $mantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($mantissae) &gt; 1) {<br \/>\n         <font color=purple>if (substr($mantissae[1],0,1) == '0') {<br \/>\n            if (str_replace('0','',$mantissae[1]) != '') {<br \/>\n              while (substr($mantissae[1],0,1) == '0') {<br \/>\n                $za++;<br \/>\n                $mantiss=substr($mantissae[1],1);<br \/>\n                $mantissae[1]=$mantiss;<br \/>\n              }<br \/>\n            }<br \/>\n         }<\/font><br \/>\n         $tenpx=$mantissae[1];<br \/>\n         $xis=$mantissae[0];<br \/>\n       }<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  \/\/echo explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1];<br \/>\n  \/\/exit;<br \/>\n  imagettftext($im, $tenpx, <font color=purple>$za<\/font>, $xis, <font color=blue>$yis, $black,<\/font> realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; used by <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/google-chart-image-chart-colour-tutorial\/' rel=\"noopener\">Google Chart Image Chart Colour Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicrbt'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Rubber Banding Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-rubber-banding-tutorial\/' rel=\"noopener\">Google Chart Image Chart Rubber Banding 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Rubber Banding Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_fix.gif\" title=\"Google Chart Image Chart Rubber Banding Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Rubber Banding Tutorial<\/p><\/div>\n<p>The Javascript clientside idea of <a target=\"_blank\" title='Ruber banding explanation' href='https:\/\/www.javatpoint.com\/computer-graphics-elastic-or-rubber-band-techniques#:~:text=Rubber%20banding%20is%20a%20popular,ellipse%20on%20the%20computer%20screen.' rel=\"noopener\">&#8220;Rubber Banding&#8221;<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.javatpoint.com\/computer-graphics-elastic-or-rubber-band-techniques#:~:text=Rubber%20banding%20is%20a%20popular,ellipse%20on%20the%20computer%20screen.'><p>\nRubber banding is a popular technique of drawing geometric primitives such as line, polylines, rectangle, circle and ellipse on the computer screen.\n<\/p><\/blockquote>\n<p> &#8230; really appeals to our &#8220;inner programmer&#8221; <font size=1>&#8230; damn<sup>!<\/sup> &#8230; come, thou, out into the open, reveal thyself<sup>!<\/sup> &#8230; the sunshine is wonderful down here, and we&#8217;ve done away with death duties<sup>!<\/sup> &#8230; mostly<sup>!<\/sup> &#8230;<\/font> but it is &#8230;<\/p>\n<ul>\n<li>only really a non-mobile prospect &#8230;<br \/>\n<code><br \/>\n  function checkforaction(rubberbanding,nx,ny) {<br \/>\n    var bcbit='background-color:rgba(127,127,127,0.5);';<br \/>\n    var zeroes='';<br \/>\n    var classbit='';<br \/>\n    var brbit='';<br \/>\n    var ourdist=0;<br \/>\n    var ioff=(rubberbanding == true ? 1 : 0);<br \/>\n    var mone=1;<br \/>\n    <br \/>\n    curno=eval('' + xneeds.length);<br \/>\n    if (eval(ioff + curno) &gt;= needtohave) {<br \/>\n      if (!rubberbanding) {<br \/>\n        document.getElementById('fauxdtext').innerHTML='';<br \/>\n      }<br \/>\n      if (curmode == 8) {<br \/>\n        zeroes='00000000';<br \/>\n        classbit=' class=\"crerect\" ';<br \/>\n      } else if (curmode == -5) {<br \/>\n      \/\/alert(1);<br \/>\n        bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n      if (rubberbanding) {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((nx - xneeds[0]) * (nx - xneeds[0]) + (ny - yneeds[0]) * (ny - yneeds[0])));<br \/>\n        ourdist-=10;<br \/>\n        bcbit='border:2px solid gray;background-color:transparent;';<br \/>\n      } else {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((xneeds[1] - xneeds[0]) * (xneeds[1] - xneeds[0]) + (yneeds[1] - yneeds[0]) * (yneeds[1] - yneeds[0])));<br \/>\n      }<br \/>\n      \/\/alert(ourdist);<br \/>\n        \/\/xneeds[1]=Math.floor('' + ourdist);<br \/>\n        \/\/yneeds[1]=xneeds[1];<br \/>\n        brbit='border-radius:' + Math.floor(eval(ourdist \/ 2)) + 'px;';<br \/>\n        zeroes='00000';<br \/>\n        classbit=' class=\"ocirc\" ';<br \/>\n        \/\/alert('open circle');<br \/>\n      } else if (curmode == 6) {<br \/>\n      if (rubberbanding) {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((nx - xneeds[0]) * (nx - xneeds[0]) + (ny - yneeds[0]) * (ny - yneeds[0])));<br \/>\n        ourdist-=10;<br \/>\n      } else {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((xneeds[1] - xneeds[0]) * (xneeds[1] - xneeds[0]) + (yneeds[1] - yneeds[0]) * (yneeds[1] - yneeds[0])));<br \/>\n      }<br \/>\n        \/\/xneeds[1]=Math.floor('' + ourdist);<br \/>\n        \/\/yneeds[1]=xneeds[1];<br \/>\n        brbit='border-radius:' + Math.floor(eval(ourdist \/ 2)) + 'px;';<br \/>\n        \/\/bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        zeroes='000000';<br \/>\n        classbit=' class=\"ccirc\" ';<br \/>\n        \/\/alert('closed circle ' + bcbit);<br \/>\n      } else if (curmode == -4) {<br \/>\n        if (rubberbanding) {<br \/>\n        mone=0.90;<br \/>\n        bcbit='border:2px solid gray;background-color:transparent;';<br \/>\n        } else {<br \/>\n        bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        }<br \/>\n        zeroes='00';<br \/>\n        classbit=' class=\"orect\" ';<br \/>\n      } else if (curmode == 2) {<br \/>\n        zeroes='0';<br \/>\n        if (rubberbanding) {<br \/>\n        if (Math.min(xneeds[0],nx) == xneeds[0] && Math.min(yneeds[0],ny) == ny) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else if (Math.min(xneeds[0],nx) == nx && Math.min(yneeds[0],ny) == yneeds[0]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else {<br \/>\n        classbit=' class=\"crossedtotr\" ';<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (Math.min(xneeds[0],xneeds[1]) == xneeds[0] && Math.min(yneeds[0],yneeds[1]) == yneeds[1]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else if (Math.min(xneeds[0],xneeds[1]) == xneeds[1] && Math.min(yneeds[0],yneeds[1]) == yneeds[0]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else {<br \/>\n        classbit=' class=\"crossedtotr\" ';<br \/>\n        }<br \/>\n        }<br \/>\n        bcbit='';<br \/>\n      } else if (curmode == 4) {<br \/>\n        if (rubberbanding) {<br \/>\n        mone=0.90;<br \/>\n        }<br \/>\n        zeroes='0000';<br \/>\n        classbit=' class=\"crect\" ';<br \/>\n      }<br \/>\n      if (!rubberbanding) {<br \/>\n      curno=-1;<br \/>\n      \/\/if (brbit != '') {<br \/>\n      \/\/document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],nx) + 'px;top:' + Math.min(yneeds[0],ny) + 'px;width:' + Math.abs(xneeds[0] - nx) + 'px;height:' + Math.abs(yneeds[0] - ny) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      \/\/} else {<br \/>\n      \/\/document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      \/\/}<br \/>\n      document.getElementById('aemail').href+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      document.getElementById('asms').href+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      aemailurl+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      asmsurl+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      arest+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      }<br \/>\n      if (brbit != '') {<br \/>\n      \/\/alert('brbit=' + brbit);<br \/>\n      \/\/xneeds[0]-=(xneeds[1] - xneeds[0]);<br \/>\n      \/\/yneeds[0]-=(yneeds[1] - yneeds[0]);<br \/>\n      \/\/alert('xneeds[0]=' + xneeds[0]);<br \/>\n      if (rubberbanding) {<br \/>\n      document.getElementById('fauxdtext').innerHTML='&lt;div' + classbit + ' style=\"' + brbit + 'z-index:-89;position:absolute;left:' + Math.floor(eval(Math.min(xneeds[0],xneeds[0]) - ourdist \/ 2)) + 'px;top:' + Math.floor(eval(Math.min(yneeds[0],yneeds[0]) - ourdist \/ 2)) + 'px;width:' + ourdist + 'px;height:' + ourdist + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      } else {<br \/>\n      document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.floor(eval(Math.min(xneeds[0],xneeds[0]) - ourdist \/ 2)) + 'px;top:' + Math.floor(eval(Math.min(yneeds[0],yneeds[0]) - ourdist \/ 2)) + 'px;width:' + ourdist + 'px;height:' + ourdist + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      }<br \/>\n      } else {<br \/>\n      if (rubberbanding) {<br \/>\n      document.getElementById('fauxdtext').innerHTML='&lt;div' + classbit + ' style=\"' + brbit + 'z-index:-89;position:absolute;left:' + Math.min(xneeds[0],nx) + 'px;top:' + Math.min(yneeds[0],ny) + 'px;width:' + Math.max(Math.floor(eval(-30 + Math.abs(xneeds[0] - nx))),Math.floor(eval(mone * Math.abs(xneeds[0] - nx)))) + 'px;height:' + Math.max(Math.floor(eval(-30 + Math.abs(yneeds[0] - ny))),Math.floor(eval(mone * Math.abs(yneeds[0] - ny)))) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      } else {<br \/>\n      document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      }<br \/>\n      }<br \/>\n      if (!rubberbanding) {<br \/>\n      textnum++;<br \/>\n      xneeds=[];<br \/>\n      yneeds=[];<br \/>\n      \/\/alert('arest=' + arest);<br \/>\n      document.getElementById('tdright').innerHTML=\"&nbsp;&nbsp;&lt;span id=spemail&gt;&lt;a target=_blank href='mailto:?subject=My%20\" + cencodename + \"%20...%20best%20viewed%20in%20landscape%20...&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace((document.getElementById('myvenn').src + arest).split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=spsms&gt;&lt;a target=_blank onmouseover=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" ontouchstart=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" href='sms:&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;input title=\\\"\\\" onclick=\\\"event.stopPropagation();\\\" id=ilp onblur=\\\"waitfortwo(0); lasttext=this.value.replace(\/\\~\\~\/g, '&lt;br&gt;'); this.title=lasttext;  if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { this.value=''; } this.placeholder='Click where you want ... ' + lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)); mvp.setAttribute('content','initial-scale=1'); document.getElementById('myvenn').scrollIntoView();\\\" placeholder='Enter text and later click place for it on \" + decodeURIComponent(cencodename) + \" to left (line feed is ~~)' type=text style=width:500px; value=''&gt;&lt;\/input&gt;\" + fszbit + \"&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;img id=line src='\/MarkItUp\/line.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red'; waitfortwo(2);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=rectangle src='\/MarkItUp\/rectangle.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red';  waitfortwo(4);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=orectangle src='\/MarkItUp\/orectangle.png' onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(-4);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=circle src='\/MarkItUp\/circlefill.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red';  waitfortwo(6);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=ocircle src='\/MarkItUp\/circle.png' onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(-5);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;button id=orerect onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(8);\\\" title=\\\"Zoom in on rectangle you define via two clicks\\\" style=display:none;&gt;&amp;#128270;&lt;\/button&gt;\" + lastbit + atend;<br \/>\n \/\/alert(1);<br \/>\n      if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('ilp').focus(); }<br \/>\n      document.getElementById('ilp').placeholder='Enter text and later click place for it on ' + decodeURIComponent(cencodename) + ' to left (line feed is ~~)';<br \/>\n      }<br \/>\n    } else if (curmode == 2 && !rubberbanding) {<br \/>\n      document.getElementById('line').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == -4 && !rubberbanding) {<br \/>\n      document.getElementById('orectangle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 4 && !rubberbanding) {<br \/>\n      document.getElementById('rectangle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == -5 && !rubberbanding) {<br \/>\n      document.getElementById('ocircle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 6 && !rubberbanding) {<br \/>\n      document.getElementById('circle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 8 && !rubberbanding) {<br \/>\n      document.getElementById('orerect').style.border='1px dashed yellow';<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n         \/\/ Rubber banding<br \/>\n         document.body.addEventListener('mousemove', function(evt){<br \/>\n       evt = evt || window.event;<br \/>\n<br \/>\n       evt.preventDefault();<br \/>\n<br \/>\n    elemLeft = document.getElementById('myvenn').offsetLeft;<br \/>\n    elemTop = document.getElementById('myvenn').offsetTop;<br \/>\n    <br \/>\n    \/\/document.getElementById('myh3').innerHTML+=' ' + elemLeft + ':' + elemTop;<br \/>\n    \/\/document.getElementById('myh3').innerHTML+=' ' + document.body.scrollLeft + '.' + document.body.scrollTop;<br \/>\n<br \/>\n       if (evt.touches) {<br \/>\n       if (evt.touches[0].pageX) {<br \/>\n       \/\/alert('here');<br \/>\n       xx = evt.touches[0].pageX + document.body.scrollLeft - elemLeft;<br \/>\n       yy = evt.touches[0].pageY + document.body.scrollTop - elemTop;<br \/>\n       if (xx &gt;= 0 && xx &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && yy &gt;= 0 && yy &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno == 1 && (lastx != xx || lasty != yy)) {<br \/>\n       checkforaction(true,xx,yy);<br \/>\n       }<br \/>\n       \/\/lastx=xx;<br \/>\n       \/\/lasty=yy;<br \/>\n              \/\/alert('x:' + x + ' and y:' + y);<br \/>\n       }<br \/>\n       } else {<br \/>\n       \/\/alert('Here');<br \/>\n       xx = evt.touches[0].clientX + document.body.scrollLeft - elemLeft;<br \/>\n       yy = evt.touches[0].clientY + document.body.scrollTop - elemTop;<br \/>\n       if (xx &gt;= 0 && xx &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && yy &gt;= 0 && yy &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno == 1 && (lastx != xx || lasty != yy)) {<br \/>\n       checkforaction(true,xx,yy);<br \/>\n       }<br \/>\n       \/\/lastx=xx;<br \/>\n       \/\/lasty=yy;<br \/>\n              \/\/alert('x:' + x + ' and y:' + y);<br \/>\n       }<br \/>\n       }<br \/>\n       } else if (evt.clientX || ev.clientY) {<br \/>\n       \/\/alert('HERE');<br \/>\n        xx = evt.clientX + document.body.scrollLeft - elemLeft;<br \/>\n        yy = evt.clientY + document.body.scrollTop - elemTop;<br \/>\n       if (xx &gt;= 0 && xx &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && yy &gt;= 0 && yy &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno == 1 && (lastx != xx || lasty != yy)) {<br \/>\n       checkforaction(true,xx,yy);<br \/>\n       }<br \/>\n       \/\/lastx=xx;<br \/>\n       \/\/lasty=yy;<br \/>\n       }<br \/>\n       } else {<br \/>\n       \/\/alert('HEre');<br \/>\n        xx = evt.pageX + document.body.scrollLeft - elemLeft;<br \/>\n        yy = evt.pageY + document.body.scrollTop - elemTop;<br \/>\n       if (xx &gt;= 0 && xx &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && yy &gt;= 0 && yy &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno == 1 && (lastx != xx || lasty != yy)) {<br \/>\n       checkforaction(true,xx,yy);<br \/>\n       }<br \/>\n       \/\/lastx=xx;<br \/>\n       \/\/lasty=yy;<br \/>\n       }<br \/>\n       }<br \/>\n                });<br \/>\n<\/code><br \/>\n &#8230; at least for us <font size=1>(being as we do not want to clobber any pinch or spread gesture ideas, for the user)<\/font><\/li>\n<li>is only a really, &#8220;nice to have&#8221; functionality idea<\/li>\n<\/ul>\n<p>Even so, achieving even a 95% percent working &#8220;rubber band&#8221; is like &#8230; <font size=1>is like &#8230;<\/font><\/p>\n<blockquote><p>\nBarracking for Hairtie United &#8230;<br \/>\n<font size=1>You little beauty, Untied!<\/font>\n<\/p><\/blockquote>\n<p>And so, further to yesterday&#8217;s <a title='Google Chart Image Chart Circle Annotation Tutorial' href='#gciccat'>Google Chart Image Chart Circle Annotation Tutorial<\/a> we have this non-mobile &#8220;Rubber Banding&#8221; inhouse annotation functionality included in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------------GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------------GETME\" rel=\"noopener\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?reload=9&#038;v=iiATDMHU7gc' rel=\"noopener\">But there&#8217;s more!<\/a>  Despite how long out of the day it takes to barrack for Hairtie United, there was a mobile matter we resolved.  A slide in today&#8217;s animated GIF presentation shows the issue.  On mobile platforms, with these inhouse annotations, it would immediately show a tiny annotation.  There panned out to be two event programming related issues we needed to fix related to this problem &#8230;<\/p>\n<ol>\n<li>change looking for a &#8220;touchstart&#8221; event, and instead look for a <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=m7AVvnWywvc' rel=\"noopener\">&#8220;touchdown&#8221; event<\/a> for a document.body scope <font size=1>(else we might have restricted the &#8220;scope&#8221; to just document.getEleementById(&#8216;myvenn&#8217;) as another approach (and you should note our event.<a target=\"_blank\" title='Javascript event.stopPropagation() method information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_stoppropagation.asp' rel=\"noopener\">stopPropagation<\/a>() statements in lots of places as another research point for you))<\/font> because we are talking <font color=purple>&#8220;discrete click&#8221;<\/font> user behaviour we are targeting &#8230; as well as &#8230;<\/li>\n<li>start checking that the co-ordinates calculated fall into the range of the Google Charts Image Chart image dimensions &#8230; <font color=blue>doh!<\/font><\/li>\n<\/ol>\n<p><code><br \/>\n         document.body.addEventListener('<font color=purple>touchdown<\/font>', function(evt){<br \/>\n         \/\/alert(8);<br \/>\n       evt = evt || window.event;<br \/>\n<br \/>\n       evt.preventDefault();<br \/>\n<br \/>\n    elemLeft = document.getElementById('myvenn').offsetLeft;<br \/>\n    elemTop = document.getElementById('myvenn').offsetTop;<br \/>\n    <br \/>\n    \/\/document.getElementById('myh3').innerHTML+=' ' + elemLeft + ';' + elemTop;<br \/>\n<br \/>\n       if (evt.touches) {<br \/>\n       if (evt.touches[0].pageX) {<br \/>\n       \/\/alert('here');<br \/>\n       x = evt.touches[0].pageX + document.body.scrollLeft - elemLeft;<br \/>\n       y = evt.touches[0].pageY + document.body.scrollTop - elemTop;<br \/>\n       <font color=blue>if (x &gt;= 0 && x &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && y &gt;= 0 && y &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<\/font><br \/>\n       if (curno &gt;= 0 && (lastx != x || lasty != y)) {<br \/>\n       xneeds.push(x);<br \/>\n       yneeds.push(y);<br \/>\n       checkforaction(false,-1,-1);<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       <font color=blue>}<\/font><br \/>\n              \/\/alert('x:' + x + ' and y:' + y);<br \/>\n       } else {<br \/>\n       \/\/alert('Here');<br \/>\n       x = evt.touches[0].clientX + document.body.scrollLeft - elemLeft;<br \/>\n       y = evt.touches[0].clientY + document.body.scrollTop - elemTop;<br \/>\n       <font color=blue>if (x &gt;= 0 && x &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && y &gt;= 0 && y &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<\/font><br \/>\n       if (curno &gt;= 0 && (lastx != x || lasty != y)) {<br \/>\n       xneeds.push(x);<br \/>\n       yneeds.push(y);<br \/>\n       checkforaction(false,-1,-1);<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       }<br \/>\n              \/\/alert('x:' + x + ' and y:' + y);<br \/>\n       <font color=blue>}<\/font><br \/>\n       } else if (evt.clientX || ev.clientY) {<br \/>\n       \/\/alert('HERE');<br \/>\n        x = evt.clientX + document.body.scrollLeft - elemLeft;<br \/>\n        y = evt.clientY + document.body.scrollTop - elemTop;<br \/>\n       <font color=blue>if (x &gt;= 0 && x &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && y &gt;= 0 && y &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<\/font><br \/>\n       if (curno &gt;= 0 && (lastx != x || lasty != y)) {<br \/>\n       xneeds.push(x);<br \/>\n       yneeds.push(y);<br \/>\n       checkforaction(false,-1,-1);<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       <font color=blue>}<\/font><br \/>\n       } else {<br \/>\n       \/\/alert('HEre');<br \/>\n        x = evt.pageX + document.body.scrollLeft - elemLeft;<br \/>\n        y = evt.pageY + document.body.scrollTop - elemTop;<br \/>\n       if (x &gt;= 0 && x &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && y &gt;= 0 && y &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno &gt;= 0 && (lastx != x || lasty != y)) {<br \/>\n       xneeds.push(x);<br \/>\n       yneeds.push(y);<br \/>\n       checkforaction(false,-1,-1);<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       <font color=blue>}<\/font><br \/>\n       }<br \/>\n                });<br \/>\n<\/code><\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Well &#8230; we didn&#8217;t?!  We happened to try the web application above on a tiny iPad and saw that HTML button elements with an innerHTML label containing a line feed ( ie. &lt;br&gt; ) only showed the top line, and, alas, for that button in question, the vital new information used to be on the second line.  Hence our fix &#8230;<\/p>\n<p><code><br \/>\n      \/\/document.getElementById('bshare').innerHTML='Repainting Top Left Image Periodically ... &lt;br&gt;Click here to Broadcast this session to other interested parties ...';<br \/>\n      document.getElementById('bshare').innerHTML='Click here to Broadcast this session to other interested parties ...&lt;br&gt;Repainting Top Left Image Periodically ...';<br \/>\n<\/code><\/p>\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\/google-chart-image-chart-rubber-banding-tutorial\/' rel=\"noopener\">Google Chart Image Chart Rubber Banding Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gciccat'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Circle Annotation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-circle-annotation-tutorial\/' rel=\"noopener\">Google Chart Image Chart Circle Annotation 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Circle Annotation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_circle.jpg\" title=\"Google Chart Image Chart Circle Annotation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Circle Annotation Tutorial<\/p><\/div>\n<p>Today, we add &#8230;<\/p>\n<ul>\n<li>open circle<\/li>\n<li>filled circle<\/li>\n<\/ul>\n<p> &#8230; annotation possibilities onto the &#8220;Broadcast Talk&#8221; work in yesterday&#8217;s <a title='Google Chart Image Chart Broadcast Talk Context Tutorial' href='#gcxicbtct'>Google Chart Image Chart Broadcast Talk Context Tutorial<\/a>.<\/p>\n<p>The CSS <font color=blue><a target=\"_blank\" title='CSS border-radius property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_border-radius.php' rel=\"noopener\">border-radius<\/a> property<\/font> has come to the rescue of many a programmer, saving us from resorting to SVG to display circle or ellipses or arcs of various sorts &#8230;<\/p>\n<p><code><br \/>\n  function checkforaction() {<br \/>\n    var bcbit='background-color:rgba(127,127,127,0.5);';<br \/>\n    var zeroes='';<br \/>\n    var classbit='';<br \/>\n    <font color=blue>var brbit='';<br \/>\n    var ourdist=0;<\/font><br \/>\n    <br \/>\n    curno=eval('' + xneeds.length);<br \/>\n    if (curno &gt;= needtohave) {<br \/>\n      if (curmode == 8) {<br \/>\n        zeroes='00000000';<br \/>\n        classbit=' class=\"crerect\" ';<br \/>\n      } else <font color=blue>if (curmode == -5) {<br \/>\n      \/\/alert(1);<br \/>\n        ourdist=eval(2.0 * Math.sqrt((xneeds[1] - xneeds[0]) * (xneeds[1] - xneeds[0]) + (yneeds[1] - yneeds[0]) * (yneeds[1] - yneeds[0])));<br \/>\n      \/\/alert(ourdist);<br \/>\n        \/\/xneeds[1]=Math.floor('' + ourdist);<br \/>\n        \/\/yneeds[1]=xneeds[1];<br \/>\n        brbit='border-radius:' + Math.floor(eval(ourdist \/ 2)) + 'px;';<br \/>\n        bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        zeroes='00000';<br \/>\n        classbit=' class=\"ocirc\" ';<br \/>\n        \/\/alert('open circle');<br \/>\n      } else if (curmode == 6) {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((xneeds[1] - xneeds[0]) * (xneeds[1] - xneeds[0]) + (yneeds[1] - yneeds[0]) * (yneeds[1] - yneeds[0])));<br \/>\n        \/\/xneeds[1]=Math.floor('' + ourdist);<br \/>\n        \/\/yneeds[1]=xneeds[1];<br \/>\n        brbit='border-radius:' + Math.floor(eval(ourdist \/ 2)) + 'px;';<br \/>\n        \/\/bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        zeroes='000000';<br \/>\n        classbit=' class=\"ccirc\" ';<br \/>\n        \/\/alert('closed circle ' + bcbit);<br \/>\n      }<\/font> else if (curmode == -4) {<br \/>\n        bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        zeroes='00';<br \/>\n        classbit=' class=\"orect\" ';<br \/>\n      } else if (curmode == 2) {<br \/>\n        zeroes='0';<br \/>\n        if (Math.min(xneeds[0],xneeds[1]) == xneeds[0] && Math.min(yneeds[0],yneeds[1]) == yneeds[1]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else if (Math.min(xneeds[0],xneeds[1]) == xneeds[1] && Math.min(yneeds[0],yneeds[1]) == yneeds[0]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else {<br \/>\n        classbit=' class=\"crossedtotr\" ';<br \/>\n        }<br \/>\n        bcbit='';<br \/>\n      } else if (curmode == 4) {<br \/>\n        zeroes='0000';<br \/>\n        classbit=' class=\"crect\" ';<br \/>\n      }<br \/>\n      curno=-1;<br \/>\n      \/\/if (brbit != '') {<br \/>\n      \/\/document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      \/\/} else {<br \/>\n      \/\/document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      \/\/}<br \/>\n      document.getElementById('aemail').href+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      document.getElementById('asms').href+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      aemailurl+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      asmsurl+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      arest+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      <font color=blue>if (brbit != '') {<br \/>\n      \/\/alert('brbit=' + brbit);<br \/>\n      \/\/xneeds[0]-=(xneeds[1] - xneeds[0]);<br \/>\n      \/\/yneeds[0]-=(yneeds[1] - yneeds[0]);<br \/>\n      \/\/alert('xneeds[0]=' + xneeds[0]);<br \/>\n      document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.floor(eval(Math.min(xneeds[0],xneeds[0]) - ourdist \/ 2)) + 'px;top:' + Math.floor(eval(Math.min(yneeds[0],yneeds[0]) - ourdist \/ 2)) + 'px;width:' + ourdist + 'px;height:' + ourdist + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      } else {<\/font><br \/>\n      document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      <font color=blue>}<\/font><br \/>\n      textnum++;<br \/>\n      xneeds=[];<br \/>\n      yneeds=[];<br \/>\n      \/\/alert('arest=' + arest);<br \/>\n      document.getElementById('tdright').innerHTML=\"&nbsp;&nbsp;&lt;span id=spemail&gt;&lt;a target=_blank href='mailto:?subject=My%20\" + cencodename + \"%20...%20best%20viewed%20in%20landscape%20...&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace((document.getElementById('myvenn').src + arest).split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=spsms&gt;&lt;a target=_blank onmouseover=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" ontouchstart=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" href='sms:&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;input title=\\\"\\\" onclick=\\\"event.stopPropagation();\\\" id=ilp onblur=\\\"waitfortwo(0); lasttext=this.value.replace(\/\\~\\~\/g, '&lt;br&gt;'); this.title=lasttext;  if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { this.value=''; } this.placeholder='Click where you want ... ' + lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)); mvp.setAttribute('content','initial-scale=1'); document.getElementById('myvenn').scrollIntoView();\\\" placeholder='Enter text and later click place for it on \" + decodeURIComponent(cencodename) + \" to left (line feed is ~~)' type=text style=width:500px; value=''&gt;&lt;\/input&gt;\" + fszbit + \"&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;img id=line src='\/MarkItUp\/line.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red'; waitfortwo(2);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=rectangle src='\/MarkItUp\/rectangle.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red';  waitfortwo(4);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=orectangle src='\/MarkItUp\/orectangle.png' onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(-4);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=circle src='\/MarkItUp\/circlefill.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red';  waitfortwo(6);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=ocircle src='\/MarkItUp\/circle.png' onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(-5);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;button id=orerect onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(8);\\\" title=\\\"Zoom in on rectangle you define via two clicks\\\" style=display:none;&gt;&amp;#128270;&lt;\/button&gt;\" + lastbit + atend;<br \/>\n \/\/alert(1);<br \/>\n      if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('ilp').focus(); }<br \/>\n      document.getElementById('ilp').placeholder='Enter text and later click place for it on ' + decodeURIComponent(cencodename) + ' to left (line feed is ~~)';<br \/>\n    } else if (curmode == 2) {<br \/>\n      document.getElementById('line').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == -4) {<br \/>\n      document.getElementById('orectangle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 4) {<br \/>\n      document.getElementById('rectangle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == -5) {<br \/>\n      document.getElementById('ocircle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 6) {<br \/>\n      document.getElementById('circle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 8) {<br \/>\n      document.getElementById('orerect').style.border='1px dashed yellow';<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; to team up with WordPress blog 404.php changes &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n      if (strlen($zeroesbit) == 6) { \/\/ filled in circle<br \/>\n         if (sizeof($csv) == 3) {<br \/>\n           array_push($csv, $csv[2]);<br \/>\n         } else if (sizeof($csv) >= 4) {<br \/>\n           $dist=(2.0 * sqrt(($csv[0] - $csv[2]) * ($csv[0] - $csv[2]) + ($csv[1] - $csv[3]) * ($csv[1] - $csv[3])));<br \/>\n           $csv[2]=$dist;<br \/>\n           $csv[3]=$dist;<br \/>\n         }<br \/>\n         imagefilledellipse($im, $csv[0], $csv[1], $csv[2], $csv[3], $blackish);<br \/>\n       } else if (strlen($zeroesbit) == 5) { \/\/ circle<br \/>\n         if (sizeof($csv) == 3) {<br \/>\n           array_push($csv, $csv[2]);<br \/>\n         } else if (sizeof($csv) >= 4) {<br \/>\n           $dist=(2.0 * sqrt(($csv[0] - $csv[2]) * ($csv[0] - $csv[2]) + ($csv[1] - $csv[3]) * ($csv[1] - $csv[3])));<br \/>\n           $csv[2]=$dist;<br \/>\n           $csv[3]=$dist;<br \/>\n         }<br \/>\n         imageellipse($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; with <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------GETME\" rel=\"noopener\">ninth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/new-google-chart-image-chart-broadcast-talk-context-tutorial\/' rel=\"noopener\">New Google Chart Image Chart Circle Annotation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcxicbtct'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Broadcast Talk Context Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-context-tutorial\/' rel=\"noopener\">Google Chart Image Chart Broadcast Talk Context 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Broadcast Talk Context Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_context.jpg\" title=\"Google Chart Image Chart Broadcast Talk Context Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Broadcast Talk Context Tutorial<\/p><\/div>\n<p>The progress, today, along the same lines as yesterday&#8217;s <a title='Google Chart Image Chart Broadcast Talk Tutorial' href='#gcicbtt'>Google Chart Image Chart Broadcast Talk Tutorial<\/a>&#8216;s introduction of a &#8220;Broadcast Talk&#8221; functionality, was to &#8230;<\/p>\n<ul>\n<li>improve &#8220;Broadcast Talk&#8221; context, by adding onto yesterday&#8217;s &#8230;<br \/>\n<blockquote><p>\npresented as an update image still presented and updated periodically\n<\/p><\/blockquote>\n<p> &#8230; only display option, with, as of today &#8230;<\/li>\n<li>a presenter&#8217;s first snapshotted image retained for user display (in case they arrive late to the lesson <font size=1>&#8230; tutt tutt<\/font>) &#8230; and &#8230;<\/li>\n<li><a target=\"_blank\" title='ImageMagick command line' href='http:\/\/www.imagemagick.org\/script\/command-line-tools.php' rel=\"noopener\">ImageMagick<\/a> created <font color=blue>animated GIF<\/font> with slides for just this first image and the most recent image, updated periodically, in bottom right cell of user display &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['canvcont']) && isset($_POST['uniquifier']) && strpos(('?' . $_SERVER['QUERY_STRING']), 'cht=') === false) {<br \/>\n     if (isset($_POST['uniquifier'])) {<br \/>\n       $uniquifier=str_replace('+',' ',urldecode($_POST['uniquifier']));<br \/>\n     }<br \/>\n     if ($uniquifier == '') {<br \/>\n       $uniquifier='_' . rand(0,78654356);<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       <font color=blue>exec(\"\/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 20 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\");<\/font><br \/>\n       echo \"&lt;html&gt;&lt;body onload=\\\"if (parent.document.getElementById('uniquifier')) {  if (parent.document.getElementById('uniquifier').value == '') { parent.document.getElementById('uniquifier').value='\" . $uniquifier . \"';  }  }\\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n     } else {<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       <font color=blue>exec(\"rm -f  \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif ; \/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 200 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\"); <\/font><br \/>\n     }<br \/>\n     exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; and &#8230;<\/li>\n<li>images saved as changes are detected gathered, as ever smaller thumbnails, in the top right of four table cells of the user display &#8230;<br \/>\n<code><br \/>\n  var iijk=0, uniquif=''; snapshots=[], elem=null, elemcontext=null, oimg=null, checkforsquare=2;<br \/>\n  <br \/>\n  function canvinit() {<br \/>\n    var kkii=0, wpx=0, hpx=0;<br \/>\n    var tdr=document.getElementById('tdtr').getBoundingClientRect();<br \/>\n    wpx=eval('' + tdr.width);<br \/>\n    hpx=eval('' + tdr.height);<br \/>\n    elem=document.getElementById('agcanvas');<br \/>\n    elemcontext=elem.getContext('2d');<br \/>\n    elem.width=elem.width;<br \/>\n    elemcontext.drawImage(document.getElementById('talkimg'),0,0);<br \/>\n    if (iijk == 0 || ('' + document.getElementById('tdtr').style.backgroundImage).indexOf('rand=0') != -1) {<br \/>\n      \/\/alert('89 ' + elem.toDataURL().length);<br \/>\n      \/\/snapshots.push(elem.toDataURL());<br \/>\n      iijk=eval(-1 + eval('' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),').length));<br \/>\n      document.getElementById('tdtr').style.backgroundImage=('' + document.getElementById('tdtr').style.backgroundImage).replace(('' + document.getElementById('tdtr').style.backgroundImage).split('),')[iijk], '' + 'url(' + elem.toDataURL() + '),' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),')[iijk]).replace('rand=0', 'rand=x');<br \/>\n      iijk=eval(0 + eval('' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),').length));<br \/>\n      setInterval(canvinit, 9000);<br \/>\n    } else {<br \/>\n      elem.width=elem.width;<br \/>\n      elemcontext.drawImage(document.getElementById('talkimg'),0,0);<br \/>\n      if (document.body.innerHTML.indexOf(elem.toDataURL()) == -1) {<br \/>\n        \/\/snapshots.push(elem.toDataURL());<br \/>\n        iijk=eval(-1 + eval('' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),').length));<br \/>\n        document.getElementById('tdtr').style.backgroundImage=('' + document.getElementById('tdtr').style.backgroundImage).replace(('' + document.getElementById('tdtr').style.backgroundImage).split('),')[iijk], '' + 'url(' + elem.toDataURL() + '),' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),')[iijk]).replace('rand=x','rand=x' + Math.floor(Math.random() * 9));<br \/>\n        iijk=eval(0 + eval('' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),').length));<br \/>\n      }<br \/>\n    }<br \/>\n    var bpx='background-position:;';<br \/>\n    var bbpx='background-position:;';<br \/>\n    var bsx='background-size:;';<br \/>\n    var brx='background-repeat:;';<br \/>\n    var xstart=0;<br \/>\n    var ystart=0;<br \/>\n    var xxstart=eval('' + tdr.left);<br \/>\n    var yystart=eval('' + tdr.top);<br \/>\n    if (iijk &gt; eval(checkforsquare * checkforsquare)) { checkforsquare++; }<br \/>\n    for (kkii=1; kkii&lt;=iijk; kkii++) {<br \/>\n      if (bsx.indexOf(':;') != -1) {<br \/>\n      bsx=bsx.replace(':;', ':' + Math.round(eval(wpx \/ checkforsquare)) + 'px ' + Math.round(eval(hpx \/checkforsquare)) + 'px;');<br \/>\n      brx=brx.replace(':;', ':no-repeat;');<br \/>\n      bpx=bpx.replace(':;', ':' + Math.round(xstart) + 'px ' + Math.round(ystart) + 'px;');<br \/>\n      bbpx=bbpx.replace(':;', ':' + Math.round(xxstart) + 'px ' + Math.round(yystart) + 'px;');<br \/>\n      } else {<br \/>\n      bsx=bsx.replace(';', ',' + Math.round(eval(wpx \/ checkforsquare)) + 'px ' + Math.round(eval(hpx \/checkforsquare)) + 'px;');<br \/>\n      brx=brx.replace(';', ',no-repeat;');<br \/>\n      bpx=bpx.replace(';', ',' + Math.round(xstart) + 'px ' + Math.round(ystart) + 'px;');<br \/>\n      bbpx=bbpx.replace(';', ',' + Math.round(xxstart) + 'px ' + Math.round(yystart) + 'px;');<br \/>\n      }<br \/>\n      if (eval(kkii % checkforsquare) == 0) {<br \/>\n        xstart=0;<br \/>\n        xxstart=eval('' + tdr.left);<br \/>\n        ystart+=eval(hpx \/ checkforsquare);<br \/>\n        yystart+=eval(hpx \/ checkforsquare);<br \/>\n      } else {<br \/>\n        xstart+=eval(wpx \/ checkforsquare);<br \/>\n        xxstart+=eval(wpx \/ checkforsquare);<br \/>\n      }<br \/>\n    }<br \/>\n    \/\/alert('iijk=' + iijk + ' ' + bbpx + ' ' + bpx + ' ' + bsx + ' ' + brx);<br \/>\n    document.getElementById('tdtr').style.backgroundRepeat=brx.split(':')[1];<br \/>\n    document.getElementById('tdtr').style.backgroundSize=bsx.split(':')[1];<br \/>\n    document.getElementById('tdtr').style.backgroundPosition=bpx.split(':')[1];<br \/>\n    \/\/document.body.style.backgroundImage=('' + document.getElementById('tdtr').style.backgroundImage);<br \/>\n    \/\/document.body.style.backgroundRepeat=brx.split(':')[1];<br \/>\n    \/\/document.body.style.backgroundSize=bsx.split(':')[1];<br \/>\n    <br \/>\n    document.body.style.backgroundPosition=bbpx.split(':')[1];<br \/>\n    var kdss=bsx.split(':')[1].replace(\/\\;\/g,'').split(',');<br \/>\n    var idss=bbpx.split(':')[1].replace(\/\\;\/g,'').split(',');<br \/>\n    var jdss=(('' + document.getElementById('tdtr').style.backgroundImage) + ',').replace(';,',',').replace(\/url\\(\/g,'').replace(\/URL\\(\/g,'').replace(\/\\&quot\\;\/g,'').replace(\/\\\"\/g,'').split('),');<br \/>\n    document.getElementById('idiv').innerHTML='';<br \/>\n    var istuff='', laststuff='';<br \/>\n    for (var iop=0; iop&lt;idss.length; iop++) {<br \/>\n      \/\/while (istuff == laststuff) {<br \/>\n      if (('' + jdss[iop]) != 'undefined' && ('' + jdss[iop]).trim() != '') {<br \/>\n      if (jdss[iop].trim().indexOf('iVBOR') != -1) {<br \/>\n      istuff+='&lt;img style=\"position:absolute;width:' + kdss[iop].split(' ')[0] + ';height:' + kdss[iop].split(' ')[1] + ';left:' + idss[iop].split(' ')[0] + ';top:' + idss[iop].split(' ')[1] + ';\" src=\"data:image\/png;base64,iVBOR' + jdss[iop].trim().split('iVBOR')[1] + '\"&gt;&lt;\/img&gt;';<br \/>\n      } else if (jdss[iop].trim() .indexOf('\/\/') != -1) {<br \/>\n      istuff+='&lt;img style=\"position:absolute;width:' + kdss[iop].split(' ')[0] + ';height:' + kdss[iop].split(' ')[1] + ';left:' + idss[iop].split(' ')[0] + ';top:' + idss[iop].split(' ')[1] + ';\" src=\"' + jdss[iop].trim() + '\"&gt;&lt;\/img&gt;';<br \/>\n      }<br \/>\n      \/\/}<br \/>\n      laststuff=istuff;<br \/>\n      }<br \/>\n    }<br \/>\n    document.getElementById('idiv').innerHTML=istuff;<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>We hope you try new functionality in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------GETME\" rel=\"noopener\">eighth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/google-chart-image-chart-broadcast-talk-context-tutorial\/' rel=\"noopener\">Google Chart Image Chart Broadcast Talk Context Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicbtt'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Broadcast Talk Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-tutorial\/' rel=\"noopener\">Google Chart Image Chart Broadcast Talk 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Broadcast Talk Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_broadcast.gif\" title=\"Google Chart Image Chart Broadcast Talk Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Broadcast Talk Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Google Chart Image Chart Statistical Charts Tutorial' href='#gcicsct'>Google Chart Image Chart Statistical Charts Tutorial<\/a> progress we want to offer &#8230;<\/p>\n<ul>\n<li>once a user has that &#8220;More Annotation&#8221; annotating happening &#8230; offer the chance to &#8230;<\/li>\n<li>Broadcast &#8230; their work as it happens, dynamically &#8230; <\/li>\n<li>to an emailee list audience<\/li>\n<\/ul>\n<p> &#8230; and we&#8217;re calling this &#8230;<\/p>\n<blockquote><p>\nBroadcast Talk\n<\/p><\/blockquote>\n<p> &#8230; even though it is only visual by nature, presented as an update image still presented and updated periodically.  Go figure?!  We&#8217;re blaming that <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw' rel=\"noopener\">supper time<\/a> two back.  We&#8217;re not sure?!<\/p>\n<p>Anyway, we hope you try out the new arrangements in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------GETME\" rel=\"noopener\">seventh draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>, and helped out by a WordPress blog <font size=1>good ol&#8217;<\/font> TwentyTen theme 404.php which now includes &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['canvcont']) && isset($_POST['uniquifier']) && strpos(('?' . $_SERVER['QUERY_STRING']), 'cht=') === false) {<br \/>\n     if (isset($_POST['uniquifier'])) {<br \/>\n       $uniquifier=str_replace('+',' ',urldecode($_POST['uniquifier']));<br \/>\n     }<br \/>\n     if ($uniquifier == '') {<br \/>\n       $uniquifier='_' . rand(0,78654356);<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       echo \"&lt;html&gt;&lt;body onload=\\\"if (parent.document.getElementById('uniquifier')) {  if (parent.document.getElementById('uniquifier').value == '') { parent.document.getElementById('uniquifier').value='\" . $uniquifier . \"';  }  }\\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n     } else {<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n     }<br \/>\n     exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; featuring our first use of this 404.php in response to a method=POST form call.  Verrrrrryyyy interesting!<\/p>\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\/google-chart-image-chart-broadcast-talk-tutorial\/' rel=\"noopener\">Google Chart Image Chart Broadcast Talk Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicsct'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Statistical Charts Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-statistical-charts-tutorial\/' rel=\"noopener\">Google Chart Image Chart Statistical Charts 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Statistical Charts Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_statistical_charts.jpg\" title=\"Google Chart Image Chart Statistical Charts Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Statistical Charts Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Google Chart Image Chart Pie Chart Tutorial' href='#gcicpct'>Google Chart Image Chart Pie Chart Tutorial<\/a>, today, we embark on our first ventures into composite charts, along what we like to think of as &#8220;statistical lines&#8221;, regarding interfacing to <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Chart<\/a> &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='Google Chart Image Chart Line Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/line_charts' rel=\"noopener\">Line Chart<\/a> &#8230; with its three display options &#8230;\n<ol>\n<li>Even<\/li>\n<li>Sparkline<\/li>\n<li>Just XY<\/li>\n<\/ol>\n<\/li>\n<li><a target=\"_blank\" title='Google Chart Image Chart Bar Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/bar_charts' rel=\"noopener\">Bar Chart<\/a> &#8230; with its three display options &#8230;\n<ol>\n<li>Grouped<\/li>\n<li>Stacked<\/li>\n<li>Overlapped<\/li>\n<\/ol>\n<\/li>\n<li><a target=\"_blank\" title='Google Chart Image Chart Candlestick Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/compound_charts#candlestick_charts' rel=\"noopener\">Candlestick Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; the latter being like a &#8220;parasite&#8221; display idea off the more conventional Statistical Graph favourites, the Line Chart and Bar Chart, where you have a relationship between a numerical concept (eg. sales) and another type of concept (eg. month of the year), and you want to present the data in a graphical form.<\/p>\n<p>Again, we haven&#8217;t stopped our &#8220;retweaking&#8221;. We might &#8220;retweak&#8221; <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw' rel=\"noopener\">in the morning<\/a> or we might &#8220;retweak&#8221; <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw' rel=\"noopener\">over a coffee break<\/a> or we might &#8220;retweak&#8221; <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw' rel=\"noopener\">at supper time<\/a>, but the end result is, well, you&#8217;re reading it now!<\/p>\n<p><code><br \/>\n  var pretherest='';<br \/>\n  var newtherest='';<br \/>\n  var tmod='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  if ((cht + '  ').substring(0,2) == 'bv' && cht != 'bv') { pretherest=cht.substring(2); if (1 == 1) { cht='bv'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'l' && cht != 'l') { pretherest=cht.substring(1); if (1 == 1) { cht='l'; }   }<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie Chart' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? 'Bar Chart' : (ctype.substring(0,1) == 'l' ? 'Line Chart' : ''))))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? 'Bar%20Chart' : (ctype.substring(0,1) == 'l' ? 'Line%20Chart' : ''))))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '&chd=t:' : (ctype.substring(0,1) == 'l' ? '&chd=t:' : ''))))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chd=' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '&chd=' : (ctype.substring(0,1) == 'l' ? '&chd=' : ''))))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 't:' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? 't:' : (ctype.substring(0,1) == 'l' ? 't:' : ''))))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chdl=' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '&chbh=' : (ctype.substring(0,1) == 'l' ? '&chbh=' : ''))))));<br \/>\n<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '1,2,3,4' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '5,5,5|10,10,10|15,15,15' : (ctype.substring(0,1) == 'l' ? '5,45,5|10,60,10|15,85,15' : ''))))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'January|February|March|April' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '15,4,15' : (ctype.substring(0,1) == 'l' ? '15,4,15' : ''))))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '4D89F9,C6D9FD,C6FDD9&chxt=x,y' : (ctype.substring(0,1) == 'l' ? '3D89F9.B6D9FD,B6FDD9&chxt=x,y' : ''))))));<br \/>\n<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt :<br \/>\n  (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? chdt + prenchtt + chdl + preachtt : (ctype.substring(0,1) == 'l' ? chdt + prenchtt + chdl + preachtt : ''))))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? \"Enter g for Group or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Prefix just the delimited string you enter by 1: to additionally display Candlestick Charts or by 0: to only display Candlestick Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Prefix just the delimited string you enter by 1: to additionally display Candlestick Charts or by 0: to only display Candlestick Chart\" : \"\"))))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? \"Enter g for Grouped or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Prefix just the delimited string you enter by 1: to additionally display Candlestick Charts or by 0: to only display Candlestick Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Prefix just the delimited string you enter by 1: to additionally display Candlestick Charts or by 0: to only display Candlestick Chart\" : \"\"))))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false :<br \/>\n  (ctype.substring(0,1) == 'p' ? true :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? true : (ctype.substring(0,1) == 'l' ? true : false))))));<br \/>\n  var twopb=(ce.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n  var beforeanswer=(ctype.substring(0,1) == 'l' ? 'c ' : ((ctype + ' ').substring(0,2) == 'bv' ? 'g ' : ''));<br \/>\n  <br \/>\n  if ((document.URL.toLowerCase().indexOf('chd=t%3a') == -1 && document.URL.toLowerCase().indexOf('chd=t:') == -1) && document.URL.toLowerCase().indexOf('chd=t') != -1  && document.URL.toLowerCase().indexOf('%3a') != -1) {<br \/>\n        tmod=document.URL.toLowerCase().split('chd=t')[1].split('%3')[0];<br \/>\n        \/\/tc='t' + tmod + ':';<br \/>\n        \/\/chdt=chdt.replace('t:', 't' + tmod + ':');<br \/>\n        \/\/answer=answer.trim().replace(tmod + ':','');<br \/>\n        \/\/therest+='&chm=F,,1,1:4,20';<br \/>\n  } else if ((document.URL.toLowerCase().indexOf('chd=t%3a') == -1 && document.URL.toLowerCase().indexOf('chd=t:') == -1) && document.URL.toLowerCase().indexOf('chd=t') != -1  && document.URL.toLowerCase().substring(8).indexOf(':') != -1) {<br \/>\n        tmod=document.URL.toLowerCase().split('chd=t')[1].split(':')[0];<br \/>\n        \/\/tc='t' + tmod + ':';<br \/>\n        \/\/chdt=chdt.replace('t:', 't' + tmod + ':');<br \/>\n        \/\/answer=answer.trim().replace(tmod + ':','');<br \/>\n        \/\/therest+='&chm=F,,1,1:4,20';<br \/>\n  }<br \/>\n<br \/>\n  var atend=\"&lt;canvas id=sharecanvas style=display:none;&gt;&lt;\/canvas&gt;&lt;div style=display:none;&gt;&lt;label for='shareurl'&gt;&lt;input type=button onclick='downloadmaybe(); shareurl();' id='sbut' value='Share URL Link'&gt;&lt;\/input&gt;: &lt;\/label&gt;&lt;input onblur=changeu(this.value); title='Suffix by hashtag 1 is text and hashtag 2 is title' style='width:45%;' type=url value='' placeholder='https:\/\/www.rjmprogramming.com.au\/ITblog\/#RJM Programming Blog#IT Blog' id=shareurl ondblclick='this.value=trythis(this.placeholder);'&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;&lt;span&gt; ... and\/or ... &lt;\/span&gt;&lt;br&gt;&lt;br&gt;&lt;label for='files'&gt;&lt;input type=button onclick=document.getElementById('share').click(); value='Share media or document files'&gt;&lt;\/input&gt;: &lt;\/label&gt;&lt;input id='files' type='file' accept='image\/*,video\/*,audio\/*,application\/*,text\/*' multiple&gt;&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&lt;button id='share' type='button'&gt;Share your media or documents or link!&lt;\/button&gt;&lt;output id='output'&gt;&lt;\/output&gt;&lt;scr\" + \"ipt type='text\/javascript' src='\/web_share_api_test.js?canv\" + \"asshare=as_necessary9867654' defer&gt;&lt;\/scr\" + \"ipt&gt;\";<br \/>\n  atend='';<br \/>\n <br \/>\n  var vals=[], annowin=null;<br \/>\n <br \/> <br \/>\n  var lastbit=\"&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;button title='Other complex canvas annotation functionalities (forgoes the simpler ones above) ...' id=annobut onclick=\\\"document.getElementById('tdleft').style.verticalAlign='top'; setTimeout(prerepaint, 12000); if (arest.length != 0) { alert('arest=' + arest); if (document.getElementById('myvenn').src.indexOf(arest) == -1) { pdivhide(); document.getElementById('myvenn').src=document.getElementById('myvenn').src.split(arest.substring(0,5))[0] + arest;  document.getElementById('tdleft').style.verticalAlign='top'; } } annowin=window.open('\/HTMLCSS\/user_of_signature_signature.htm?elemode=img','_blank','top=420,left=620,width=900,height=420');     \\\" style=\\\"background-color:yellow;\\\"&gt;More Annotations&lt;\/button&gt;&nbsp;&nbsp;&lt;button id=bshare onclick=repaint(); style=display:none;&gt;Repaint &lt;font size=1&gt;(but lose sharing emojis above)&lt;\/font&gt;&lt;\/button&gt;&lt;br&gt;&lt;div id=divcanvas style=display:none;&gt;&lt;canvas id=bottomcanvas&gt;&lt;\/canvas&gt;&lt;\/div&gt;\";<br \/>\n  var fszbit='&nbsp;&nbsp;&lt;span id=spanfsz&gt;&lt;select id=fsz onchange=\"fsz=this.value;\"&gt;&lt;option value=\".10\"&gt;10px&lt;\/option&gt;&lt;option value=\".6\"&gt;6px&lt;\/option&gt;&lt;option value=\".8\"&gt;8px&lt;\/option&gt;&lt;option value=\".9\"&gt;9px&lt;\/option&gt;&lt;option value=\".11\"&gt;11px&lt;\/option&gt;&lt;option value=\".12\"&gt;12px&lt;\/option&gt;&lt;option value=\".14\"&gt;14px&lt;\/option&gt;&lt;option value=\".16\"&gt;16px&lt;\/option&gt;&lt;option value=\".18\"&gt;18px&lt;\/option&gt;&lt;option value=\".20\"&gt;20px&lt;\/option&gt;&lt;option value=\".24\"&gt;24px&lt;\/option&gt;&lt;option value=\".30\"&gt;30px&lt;\/option&gt;&lt;option value=\".36\"&gt;36px&lt;\/option&gt;&lt;option value=\".40\"&gt;40px&lt;\/option&gt;&lt;option value=\".48\"&gt;48px&lt;\/option&gt;&lt;option value=\".50\"&gt;50px&lt;\/option&gt;&lt;option value=\".64\"&gt;64px&lt;\/option&gt;&lt;\/select&gt;&lt;\/span&gt;';<br \/>\n  var origemailurl='mailto:?subject=My%20' + cencodename + '%20...%20best%20viewed%20in%20landscape%20...&body=';<br \/>\n  var origsmsurl='sms:&body=My%20' + cencodename + '%20...%20best%20viewed%20in%20landscape%20...';<br \/>\n  var smsee='';<br \/>\n  var chd=location.search.split(chdeq)[1] ? (tc + dectypodeURIComponent(location.search.split(chdeq)[1].split('&')[0])).replace('t:t:', 't:').replace(\/^t\\:$\/g, '') : \"\";<br \/>\n  var therest=location.search.split(chdeq)[1] ? (pretherest + document.URL.split(document.URL.split('#')[0].split(chdeq)[1].split('&')[0])[1].split('#')[0]) : \"\";<br \/>\n  newtherest=((ctype + ' ').substring(0,2) == 'bv' ? therest : '');<br \/>\n<\/code><\/p>\n<p>And yes, you can, and we did, put line feeds into those ternery statements to help with their readability as we add complexity to the parameterization, as we go along, in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----GETME\" rel=\"noopener\">sixth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/google-chart-image-chart-statistical-charts-tutorial\/' rel=\"noopener\">Google Chart Image Chart Statistical Charts Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicpct'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Pie Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-pie-chart-tutorial\/' rel=\"noopener\">Google Chart Image Chart Pie Chart 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Pie Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/google_chart_image_chart_annotation_phase_two.gif\" title=\"Google Chart Image Chart Pie Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Pie Chart Tutorial<\/p><\/div>\n<p>As we intimated in yesterday&#8217;s <a title='Google Chart Image Chart GraphViz Chart Tutorial' href='#gcicgvct'>Google Chart Image Chart GraphViz Chart Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-graphviz-chart-tutorial\/'><p>\nstart with an at least two part &#8220;inhouse phase&#8221; of additional &#8220;extra to text&#8221; annotation functionality possibilities &#8230;\n<\/p><\/blockquote>\n<p> &#8230; we would return!  And so, here thou lingers.  It&#8217;s <font size=5>&#8220;part two&#8221; day<\/font>, even bigger than &#8220;Ben Hur&#8221; <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=B1E7h3SeMDk' rel=\"noopener\">in certain outback towns we&#8217;re a little bit shy to divulge<\/a> until we get to know our readers that little bit better.<\/p>\n<p>Yes, we are dovetailing with work we&#8217;ve done in the past using the excellent &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp' rel=\"noopener\">canvas<\/a> &#8230; element introduced with HTML5 &#8230; whereby &#8230;<\/li>\n<li>annotations like &#8230;\n<ol>\n<li>scribble &#8230; as the default, and various other &#8230;<\/li>\n<li>discrete click shapes &#8230; and &#8230;<\/li>\n<li>text &#8230; including emojis &#8230; and &#8230;<\/li>\n<li>image<\/li>\n<\/ol>\n<p> &#8230; annotating modus operandi\n<\/li>\n<\/ul>\n<p> &#8230; can be part of the arrangements.  It works that the <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\" rel=\"noopener\">Annotation Helper<\/a> is opened &#8230;<\/p>\n<ul>\n<li>in a new <span title=\"Via window.opener\" style=cursor:pointer;>&#8220;known about&#8221;<\/span> popup window &#8230; looking out for &#8230;<\/li>\n<li>parent based &#8220;img&#8221; element (in the modus operandi we use, calling it, regarding the parent top left image) &#8230; so as to be able to &#8230;<\/li>\n<li>populate its canvas element with a clone of that calling &#8220;img&#8221; graphical content &#8230; but add into the mix &#8230;<\/li>\n<li>menu driven annotation functionality which can change that canvas look and underlying data &#8230; and &#8230;<\/li>\n<li>the caller can keep track of this and arrange, or not, for these changes to be reflected back at its top left &#8220;img&#8221; element &#8230; the catch being &#8230;<\/li>\n<li>the &#8220;within range of GET argument&#8221; limits are ruined by this introduction of graphical data, and so in agreeing to this, a user forgoes those simpler sharing and annotating functionalities of yesterday&#8217;s (and before) work &#8230; though your normal image sharing capabilities via the web browser remain in the caller and the called<\/li>\n<\/ul>\n<p>As well, today, we are introducing new <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Chart<\/a> <a target=\"_blank\" title='Google Chart Image Chart Pie Chart info' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/pie_charts' rel=\"noopener\">Pie Chart<\/a> interfacing, and because this chart type can have the three &#8230;<\/p>\n<ul>\n<li>Normal<\/li>\n<li>3D<\/li>\n<li>Concentric<\/li>\n<\/ul>\n<p> &#8230; guises, there was some work to keep us off <a target=\"_blank\" title=\"?\" href='https:\/\/www.bbc.com\/travel\/article\/20220613-the-outback-way-is-this-the-worlds-emptiest-road' rel=\"noopener\">this street<\/a> <font size=1>(okay &#8230; so we <i>divulged<\/i> &#8230; <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">again<\/a>)<\/font> &#8230;<\/p>\n<p><code><br \/>\n  var pretherest='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' : (ctype.substring(0,1) == 'p' ? 'Pie Chart' : ''))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' : (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' : ''))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' : (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' : ''))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' : (ctype.substring(0,1) == 'p' ? '&chd=' : ''))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' : (ctype.substring(0,1) == 'p' ? 't:' : ''))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' : (ctype.substring(0,1) == 'p' ? '&chdl=' : ''))));<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' : (ctype.substring(0,1) == 'p' ? '1,2,3,4' : ''))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' : (ctype.substring(0,1) == 'p' ? 'January|February|March|April' : ''))));<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt : (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt : ''))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' : (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' : ''))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" : (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" : \"\"))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" : (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" : \"\"))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false : (ctype.substring(0,1) == 'p' ? true : false))));<br \/>\n  var twopb=(ctype.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n<br \/>\n  var atend=\"&lt;canvas id=sharecanvas style=display:none;&gt;&lt;\/canvas&gt;&lt;div style=display:none;&gt;&lt;label for='shareurl'&gt;&lt;input type=button onclick='downloadmaybe(); shareurl();' id='sbut' value='Share URL Link'&gt;&lt;\/input&gt;: &lt;\/label&gt;&lt;input onblur=changeu(this.value); title='Suffix by hashtag 1 is text and hashtag 2 is title' style='width:45%;' type=url value='' placeholder='https:\/\/www.rjmprogramming.com.au\/ITblog\/#RJM Programming Blog#IT Blog' id=shareurl ondblclick='this.value=trythis(this.placeholder);'&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;&lt;span&gt; ... and\/or ... &lt;\/span&gt;&lt;br&gt;&lt;br&gt;&lt;label for='files'&gt;&lt;input type=button onclick=document.getElementById('share').click(); value='Share media or document files'&gt;&lt;\/input&gt;: &lt;\/label&gt;&lt;input id='files' type='file' accept='image\/*,video\/*,audio\/*,application\/*,text\/*' multiple&gt;&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&lt;button id='share' type='button'&gt;Share your media or documents or link!&lt;\/button&gt;&lt;output id='output'&gt;&lt;\/output&gt;&lt;scr\" + \"ipt type='text\/javascript' src='\/web_share_api_test.js?canv\" + \"asshare=as_necessary9867654' defer&gt;&lt;\/scr\" + \"ipt&gt;\";<br \/>\n  atend='';<br \/>\n <br \/>\n  var vals=[], annowin=null;<br \/>\n  var lastbit=\"&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;button title='Other complex canvas annotation functionalities (forgoes the simpler ones above) ...' id=annobut onclick=\\\"document.getElementById('tdleft').style.verticalAlign='top'; setTimeout(prerepaint, 12000); if (arest.length != 0) { if (document.getElementById('myvenn').src.indexOf(arest) == -1) { pdivhide(); document.getElementById('myvenn').src=document.getElementById('myvenn').src.split(arest.substring(0,5))[0] + arest;  document.getElementById('tdleft').style.verticalAlign='top'; } } annowin=window.open('\/HTMLCSS\/user_of_signature_signature.htm?elemode=img','_blank','top=420,left=620,width=900,height=420');     \\\" style=\\\"background-color:yellow;\\\"&gt;More Annotations&lt;\/button&gt;&nbsp;&nbsp;&lt;button id=bshare onclick=repaint(); style=display:none;&gt;Repaint &lt;font size=1&gt;(but lose sharing emojis above)&lt;\/font&gt;&lt;\/button&gt;&lt;br&gt;&lt;div id=divcanvas style=display:none;&gt;&lt;canvas id=bottomcanvas&gt;&lt;\/canvas&gt;&lt;\/div&gt;\";<br \/>\n  var fszbit='&nbsp;&nbsp;&lt;span id=spanfsz&gt;&lt;select id=fsz onchange=\"fsz=this.value;\"&gt;&lt;option value=\".10\"&gt;10px&lt;\/option&gt;&lt;option value=\".6\"&gt;6px&lt;\/option&gt;&lt;option value=\".8\"&gt;8px&lt;\/option&gt;&lt;option value=\".9\"&gt;9px&lt;\/option&gt;&lt;option value=\".11\"&gt;11px&lt;\/option&gt;&lt;option value=\".12\"&gt;12px&lt;\/option&gt;&lt;option value=\".14\"&gt;14px&lt;\/option&gt;&lt;option value=\".16\"&gt;16px&lt;\/option&gt;&lt;option value=\".18\"&gt;18px&lt;\/option&gt;&lt;option value=\".20\"&gt;20px&lt;\/option&gt;&lt;option value=\".24\"&gt;24px&lt;\/option&gt;&lt;option value=\".30\"&gt;30px&lt;\/option&gt;&lt;option value=\".36\"&gt;36px&lt;\/option&gt;&lt;option value=\".40\"&gt;40px&lt;\/option&gt;&lt;option value=\".48\"&gt;48px&lt;\/option&gt;&lt;option value=\".50\"&gt;50px&lt;\/option&gt;&lt;option value=\".64\"&gt;64px&lt;\/option&gt;&lt;\/select&gt;&lt;\/span&gt;';<br \/>\n  var origemailurl='mailto:?subject=My%20' + cencodename + '%20...%20best%20viewed%20in%20landscape%20...&body=';<br \/>\n  var origsmsurl='sms:&body=My%20' + cencodename + '%20...%20best%20viewed%20in%20landscape%20...';<br \/>\n  var smsee='';<br \/>\n  var chd=location.search.split(chdeq)[1] ? (tc + decodeURIComponent(location.search.split(chdeq)[1].split('&')[0])).replace('t:t:', 't:').replace(\/^t\\:$\/g, '') : \"\";<br \/>\n  var therest=location.search.split(chdeq)[1] ? (pretherest + document.URL.split(document.URL.split('#')[0].split(chdeq)[1].split('&')[0])[1].split('#')[0]) : \"\";<br \/>\n<\/code><\/p>\n<p>Please acquaint yourself with these new annotating features in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----GETME\" rel=\"noopener\">fifth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\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\/new-google-chart-image-chart-graphviz-chart-tutorial\/' rel=\"noopener\">New Google Chart Image Chart GraphViz Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicgvct'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart GraphViz Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-graphviz-chart-tutorial\/' rel=\"noopener\">Google Chart Image Chart GraphViz Chart 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart GraphViz Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_graphviz.gif\" title=\"Google Chart Image Chart GraphViz Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart GraphViz Chart Tutorial<\/p><\/div>\n<p>Today we have two strands of forward progress, onto the progress up to yesterday&#8217;s <a title='Google Chart Image Chart Scatter Chart Tutorial' href='#gcicsct'>Google Chart Image Chart Scatter Chart Tutorial<\/a>, they being &#8230;<\/p>\n<ul>\n<li>establish a new interfacing to <a target=\"_blank\" title='Scatter Chart info' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/graphviz' rel=\"noopener\">GraphViz Chart<\/a> &#8230;<br \/>\n<blockquote cite='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/graphviz'><p>\nGraphViz is a package of open source tools for visualizing connectivity graphs. You can create GraphViz graphs using the DOT language and your choice of layout engines.\n<\/p><\/blockquote>\n<p> &#8230; a chart looking a bit like <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/orgchart' rel=\"noopener\">Organization Charts<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/orgchart'><p>\nOrg charts are diagrams of a hierarchy of nodes, commonly used to portray superior\/subordinate relationships in an organization. A family tree is a type of org chart.\n<\/p><\/blockquote>\n<p>\n<iframe id=vxennif src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html?type=gv\" style=\"width:98%;height:640px;\"><\/iframe><br \/>\n\n<\/li>\n<li>start with an at least two part &#8220;inhouse phase&#8221; of additional &#8220;extra to text&#8221; annotation functionality possibilities &#8230; just starting with &#8230;\n<ol>\n<li>line<\/li>\n<li>open rectangle<\/li>\n<li>filled rectangle<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; additional functionality, that we may well add to, but being as we <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg' rel=\"noopener\">feel a change<\/a> we&#8217;ll leave that for another time.<\/p>\n<p>The WordPress blog &#8220;404.php&#8221; code snippet becomes &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    if (strpos(('?' . $_SERVER['QUERY_STRING']), '?cht=') !== false || strpos(('?' . $_SERVER['QUERY_STRING']), '&cht=') !== false) {<br \/>\n<br \/>\n       $theqs=str_replace('??','?',('?' . $_SERVER['QUERY_STRING']));<br \/>\n       if (strpos($theqs, '?chs=') === false && strpos($theqs, '&chs=') === false) {<br \/>\n          $theqs='?chs=' . $newWidth . 'x' . $newHeight . '&' . explode('?', $theqs)[1];<br \/>\n       }<br \/>\n    <br \/> <br \/>\n       if (strpos(('?' . $_SERVER['QUERY_STRING']), 'text1=') !== false) {<br \/>\n       $theone=2;<br \/>\n       $im = imagecreatefromstring(file_get_contents('http:\/\/chart.googleapis.com\/chart' . explode('&text1=', $theqs)[0]));<br \/>\n       <br \/>\n       if (7 == 7) {<br \/>\n       <br \/>\n       $plotstring=str_replace('+',' ',urldecode($_GET['text1']));<br \/>\n       $csv=explode(',', $plotstring);<br \/>\n       $black = imagecolorallocatealpha($im, 1, 1, 1, 0);<br \/>\n       $blackish = imagecolorallocatealpha($im, 127, 127, 127, 64);<br \/>\n       if (sizeof($csv) &gt;= 3) {<br \/>\n       if (trim($csv[2]) == '') { \/\/ non text annotations<br \/>\n<br \/>\n       $zeroesbit='';<br \/>\n       $izeroes=0;<br \/>\n       $xmantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($xmantissae) &gt; 1) {<br \/>\n         $csv[0]=$xmantissae[0];<br \/>\n         while (substr($xmantissae[1],0,1) == '0') {<br \/>\n           $zeroesbit.='0';<br \/>\n           $xmantissae[1]=substr($xmantissae[1],1);<br \/>\n         }<br \/>\n         $csv[2]=$xmantissae[1];<br \/>\n       }<br \/>\n       $ymantissae=explode('.', ('' . $csv[1]));<br \/>\n       if (sizeof($ymantissae) &gt; 1) {<br \/>\n         $csv[1]=$ymantissae[0];<br \/>\n         if (sizeof($csv) &gt; 3) {<br \/>\n         $csv[3]=$ymantissae[1];<br \/>\n         } else {<br \/>\n         array_push($csv, $ymantissae[1]);<br \/>\n         }<br \/>\n       }<br \/>\n    <br \/> <br \/>\n       if (strlen($zeroesbit) == 4) { \/\/ filled in rectangle<br \/>\n         imagefilledrectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $blackish);<br \/>\n       } else if (strlen($zeroesbit) == 2) { \/\/ rectangle<br \/>\n         imagerectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       } else if (strlen($zeroesbit) == 1) { \/\/ line<br \/>\n         imageline($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       }<br \/>\n<br \/>\n       } else { \/\/ text placement<br \/>\n       $xis=$csv[0];<br \/>\n       $mantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($mantissae) &gt; 1) {<br \/>\n         $tenpx=$mantissae[1];<br \/>\n         $xis=$mantissae[0];<br \/>\n       }<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  \/\/echo explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1];<br \/>\n  \/\/exit;<br \/>\n  imagettftext($im, $tenpx, 0, $xis, $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n}<br \/>\n         while (isset($_GET['text' . $theone])) {<br \/>\n       $plotstring=str_replace('+',' ',urldecode($_GET['text' . $theone]));<br \/>\n       $csv=explode(',', $plotstring);<br \/>\n       if (sizeof($csv) &gt;= 3) {<br \/>\n       if (trim($csv[2]) == '') { \/\/ non text annotations<br \/>\n<br \/>\n       $zeroesbit='';<br \/>\n       $izeroes=0;<br \/>\n       $xmantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($xmantissae) &gt; 1) {<br \/>\n         $csv[0]=$xmantissae[0];<br \/>\n         while (substr($xmantissae[1],0,1) == '0') {<br \/>\n           $zeroesbit.='0';<br \/>\n           $xmantissae[1]=substr($xmantissae[1],1);<br \/>\n         }<br \/>\n         $csv[2]=$xmantissae[1];<br \/>\n       }<br \/>\n       $ymantissae=explode('.', ('' . $csv[1]));<br \/>\n       if (sizeof($ymantissae) &gt; 1) {<br \/>\n         $csv[1]=$ymantissae[0];<br \/>\n         if (sizeof($csv) &gt; 3) {<br \/>\n         $csv[3]=$ymantissae[1];<br \/>\n         } else {<br \/>\n         array_push($csv, $ymantissae[1]);<br \/>\n         }<br \/>\n       }<br \/>\n    <br \/> <br \/>\n       if (strlen($zeroesbit) == 4) { \/\/ filled in rectangle<br \/>\n         imagefilledrectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $blackish);<br \/>\n       } else if (strlen($zeroesbit) == 2) { \/\/ rectangle<br \/>\n         imagerectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       } else if (strlen($zeroesbit) == 1) { \/\/ line<br \/>\n         imageline($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       }<br \/>\n<br \/>\n       } else { \/\/ text placement<br \/>\n         try {<br \/>\n       $xis=$csv[0];<br \/>\n       $mantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($mantissae) &gt; 1) {<br \/>\n         $tenpx=$mantissae[1];<br \/>\n         $xis=$mantissae[0];<br \/>\n       }<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  imagettftext($im, $tenpx, 0, $xis, $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n       }<br \/>\n       $theone++;<br \/>\n         }<br \/>\n       }<br \/>\n\/\/}<br \/>\n       }<br \/>\n    <br \/> <br \/>\n       }<br \/>\n       <br \/>\n header('Content-Type: image\/png');<br \/>\n<br \/>\n imagepng($im);<br \/>\n imagedestroy($im);<br \/>\n       } else {<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('http:\/\/chart.googleapis.com\/chart' . $theqs);<br \/>\n       }<br \/>\n       exit;<br \/>\n<br \/>\n    }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; utilizing that <font size=1>good ol&#8217;<\/font> PHP <a target=\"_blank\" title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php' rel=\"noopener\">GD<\/a> image library.<\/p>\n<p id=pmmm>We hope you enjoy the &#8230;<\/p>\n<blockquote><p>\nMantissa Madness Monday\n<\/p><\/blockquote>\n<p> &#8230; coding feel utilized to retain yesterday&#8217;s &#8230;<\/p>\n<p><code><br \/>\n&text<sub>n<\/sub>=x,y,<i>Text<\/i><br \/>\n<\/code><\/p>\n<p> &#8230; argument snippet basis, adding &#8220;x&#8221; and &#8220;y&#8221; <a target=\"_blank\" title='Mantissa information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Common_logarithm#Mantissa_and_characteristic' rel=\"noopener\">mantissa<\/a> arrangement smarts with a &#8220;nothing&#8221; <i>Text<\/i> in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html---GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html---GETME\" rel=\"noopener\">fourth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Would you believe, at least to us, it is far less obvious how to display a straight line (that is perhaps not horizontal nor vertical) within a webpage, than it is to display a rectangle, filled or not?! <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=3OdmULs9s9I' rel=\"noopener\">Talk about irony!<\/a>  Over time, we have developed &#8230;<\/p>\n<ul>\n<li>HTML hr elements (with a rotation) &#8230; and the less kludgy &#8230;<\/li>\n<li>HTML div (defining a box with defined dimensions) for a nested SVG element containing the line definition using percentage dimensions<\/li>\n<\/ul>\n<p> &#8230; in the past, for when we needed to do this.  But, today, we&#8217;d like to thank <a target=\"_blank\" title='Great webpage, thanks' href='https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css' rel=\"noopener\">this great webpage<\/a> for its suggestion to involve linear gradients &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n<br \/>\n.crossedtotl {<br \/>\n     background:<br \/>\n         linear-gradient(to top left,<br \/>\n             rgba(0,0,0,0) 0%,<br \/>\n             rgba(0,0,0,0) calc(50% - 0.8px),<br \/>\n             rgba(0,0,0,1) 50%,<br \/>\n             rgba(0,0,0,0) calc(50% + 0.8px),<br \/>\n             rgba(0,0,0,0) 100%);<br \/>\n}<br \/>\n.crossedtotr {<br \/>\n     background:<br \/>\n         linear-gradient(to top right,<br \/>\n             rgba(0,0,0,0) 0%,<br \/>\n             rgba(0,0,0,0) calc(50% - 0.8px),<br \/>\n             rgba(0,0,0,1) 50%,<br \/>\n             rgba(0,0,0,0) calc(50% + 0.8px),<br \/>\n             rgba(0,0,0,0) 100%);<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; in a, basically, CSS solution.  Great stuff, thanks!<\/p>\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\/google-chart-image-chart-graphviz-chart-tutorial\/' rel=\"noopener\">Google Chart Image Chart GraphViz Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicsct'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Scatter Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-scatter-chart-tutorial\/' rel=\"noopener\">Google Chart Image Chart Scatter Chart 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Scatter Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_scatter.jpg\" title=\"Google Chart Image Chart Scatter Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Scatter Chart Tutorial<\/p><\/div>\n<p>Today, we bring the <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Chart<\/a> &#8230;<\/p>\n<ul>\n<li>Venn Chart interfacing knowledge via yesterday&#8217;s <a title='Google Chart Image Chart Venn Chart User Text Tutorial' href='#gcicvcutt'>Google Chart Image Chart Venn Chart User Text Tutorial<\/a> &#8230; using it to encase some &#8230;<\/li>\n<li><a target=\"_blank\" title='Scatter Chart info' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/scatter_charts' rel=\"noopener\">Scatter Chart<\/a> interfacing logic &#8230; and along the way fix &#8230;<\/li>\n<li>mobile platform User Text issues<\/li>\n<\/ul>\n<p> &#8230; making distributing &#8220;Venn Chart&#8221; hardcodings into a dropdown selectable arrangement, because there are more commonalities than differences, really, and we do like to parameterize <font size=1>&#8230; even in the shower, with a fairly loud rendition of <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw' rel=\"noopener\">this, perhaps<\/a><\/font>.<\/p>\n<p>Here is our framework for parameterization, <font color=purple>here<\/font>, and <font color=blue>into the future<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;title&gt;Interfacing to Google Charts Image Chart Venn Chart <font color=purple>or Scatter Chart<\/font> - RJM Programming - November, 2023&lt;\/title&gt;<br \/>\n&lt;script type=text\/javascript&gt;<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? <font color=purple>'Scatter Chart'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? <font color=purple>'Scatter%20Chart'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? <font color=purple>'12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? <font color=purple>'Cats|Dogs'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var prechtt=(ctype == 'v' ? '&chd=t:' + prenchtt + '&chdl=' + preachtt : (ctype == 's' ? <font color=purple>'&chd=t:' + prenchtt + '&chdl=' + preachtt + '&chxt=x,y'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? <font color=purple>'FF0000|0000FF&chxt=x,y'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? <font color=purple>\"Enter delimited values string for Scatter Chart\"<\/font> : <font color=blue>\"\"<\/font>));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? <font color=purple>\"Enter delimited values string for Scatter Chart\"<\/font> : <font color=blue>\"\"<\/font>));<br \/>\n<br \/>\n\/\/ etcetera etcetera etcetera<br \/>\n<\/code><\/p>\n<p> &#8230; but, as you can imagine, there will probably be small retweaks of this arrangement, which is holding out okay so far for Scatter Charts in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--GETME\" rel=\"noopener\">third draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>In this online world with so many platforms and devices and software choices, there is no need to ever be embarrassed by what might seem an obvious feature you&#8217;ve missed.<\/p>\n<p>Take the way on macOS, but not iOS, using a web browser to get to <a target=\"_blank\" title=\"YouTube\" href='https:\/\/youtube.com' rel=\"noopener\">YouTube<\/a>, you can flag that a video should loop.  Especially good for &#8230;<\/p>\n<ul>\n<li>song obsessions &#8230;<\/li>\n<li>earworms you need to salve<\/li>\n<\/ul>\n<p> &#8230; and what about if your shower is taking an awfully long time?!  Please be careful with moisture and devices, though, in the bathroom!<\/p>\n<p>How does it happen?  Right click the play button, and looping is there as the top option.  Now back to that shower <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw' rel=\"noopener\">song obsession<\/a>.<\/p>\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\/google-chart-image-chart-scatter-chart-tutorial\/' rel=\"noopener\">Google Chart Image Chart Scatter Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicvcutt'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Venn Chart User Text Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-venn-chart-user-text-tutorial\/' rel=\"noopener\">Google Chart Image Chart Venn Chart User Text 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Venn Chart User Text Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_text.jpg\" title=\"Google Chart Image Chart Venn Chart Interfacing Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Venn Chart User Text Tutorial<\/p><\/div>\n<p>We think a way to improve on our interfacing web application start regarding yesterday&#8217;s <a title='Google Chart Image Chart Venn Chart Interfacing Primer Tutorial' href='#gcicvcipt'>Google Chart Image Chart Venn Chart Interfacing Primer Tutorial<\/a> would be to offer the user the chance to enter their own text onto the Venn Diagrams &#8230;<\/p>\n<blockquote><p>\nBut we would say that.\n<\/p><\/blockquote>\n<p> &#8230; given what we learnt in Primary school <font size=1>&#8230; or should we say &#8230;<\/font><\/p>\n<blockquote><p>\n&#8220;Gryffindor Slytherin Ravenclaw Hufflepuff Junior Business College&#8221;\n<\/p><\/blockquote>\n<p> &#8230; and, yes, <a target=\"_blank\" title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA' rel=\"noopener\">is that you<\/a>, <a target=\"_blank\" href='https:\/\/en.wikipedia.org\/wiki\/Aoife_N%C3%AD_Fhearraigh' rel=\"noopener\">Aoife<\/a>?  What did you want to point out?  After you swallow those Rice Bubbles, that is?! Class is waiting &#8230;<\/p>\n<p>.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<blockquote><p>\nYes &#8230; miss something &#8230; and &#8230;\n<\/p><\/blockquote>\n<p>.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<blockquote><p>\nUse your words &#8230; okay &#8230; missing &#8230; don&#8217;t worry, the bus will wait &#8230; no &#8230; there&#8217;s no need to point &#8230; oh! &#8230;\n<\/p><\/blockquote>\n<p> &#8230; do you mean &#8230;<\/p>\n<blockquote><p>\nmissing ewe &#8230; no &#8230; missing you &#8230; oh! &#8230; missing u &#8230; oh! &#8230; &#8220;Gryffindor Slytherin Ravenclaw Hufflepuff Junio<font color=red>u<\/font>r Business College&#8221; &#8230; quite so, Aiofe &#8230; 3 points for Hufflepuff!\n<\/p><\/blockquote>\n<p>Anyway we needed a fleshed out &#8220;function ask&#8221; to cater for <font color=blue>potential onclick event logic catering for co-ordinates<\/font> &#8230;<\/p>\n<p><code><br \/>\n  function ask(evt) {<br \/>\n   var answer='', answertherest='';<br \/>\n   if (lasttext != '' && evt && normalcall) {<br \/>\n   document.getElementById('ilp').placeholder='Enter text and later click place for it on Venn Diagram to left (line feed is ~~)';<br \/>\n<br \/>\n<font color=blue>    elemLeft = document.getElementById('myvenn').offsetLeft;<br \/>\n    elemTop = document.getElementById('myvenn').offsetTop;<br \/>\n<br \/>\n       if (evt.touches) {<br \/>\n       if (evt.touches[0].pageX) {<br \/>\n       x = evt.touches[0].pageX + document.body.scrollLeft - elemLeft;<br \/>\n       y = evt.touches[0].pageY + document.body.scrollTop - elemTop;<br \/>\n       } else {<br \/>\n       x = evt.touches[0].clientX + document.body.scrollLeft - elemLeft;<br \/>\n       y = evt.touches[0].clientY + document.body.scrollTop - elemTop;<br \/>\n       }<br \/>\n       } else if (evt.clientX || ev.clientY) {<br \/>\n        x = evt.clientX + document.body.scrollLeft - elemLeft;<br \/>\n        y = evt.clientY + document.body.scrollTop - elemTop;<br \/>\n       } else {<br \/>\n        x = evt.pageX + document.body.scrollLeft - elemLeft;<br \/>\n        y = evt.pageY + document.body.scrollTop - elemTop;<br \/>\n       }<\/font><br \/>\n    <br \/> <br \/>\n       document.getElementById('dtext').innerHTML+='&lt;p style=\"position:absolute;font-size:10px;font-family:Arial;left:' + x + 'px;top:' + y + 'px;z-index:98;\"&gt;' + lasttext + '&lt;\/p&gt;';<br \/>\n<br \/>\n   document.getElementById('aemail').href+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   document.getElementById('asms').href+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   arest+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   therest+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   asmsurl+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   aemailurl+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   document.getElementById('tdright').innerHTML=\"&nbsp;&nbsp;&lt;span id=spemail&gt;&lt;a target=_blank href='mailto:?subject=My%20Venn%20Diagram%20...%20best%20viewed%20in%20landscape%20...&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace((document.getElementById('myvenn').src + arest).split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=spsms&gt;&lt;a target=_blank onmouseover=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" ontouchstart=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" href='sms:&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;input id=ilp onblur=\\\"lasttext=this.value.replace(\/\\~\\~\/g, '&lt;br&gt;'); this.value=''; this.placeholder='Click where you want ... ' + lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)); mvp.setAttribute('content','initial-scale=1'); document.getElementById('myvenn').scrollIntoView();\\\" placeholder='Enter text and later click place for it on Venn Diagram to left (line feed is ~~)' type=text style=width:500px; value=''&gt;&lt;\/input&gt;\";<br \/>\n   \/\/alert(   document.getElementById('aemail').outerHTML );<br \/>\n   \/\/alert(   document.getElementById('asms').outerHTML );<br \/>\n   textnum++;<br \/>\n   lasttext='';<br \/>\n   } else if (!evt || !normalcall) {<br \/>\n   if (chd == '') {<br \/>\n   answer=prompt(\"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\", (chd == '' ? \"100,80,60,30,30,30,10\" : (chd.replace('t:',''))));<br \/>\n   } else {<br \/>\n   answer=prompt(\"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\", (chd == '' ? \"100,80,60,30,30,30,10\" : (chd.replace('t:',''))));<br \/>\n   }<br \/>\n   vals=[];<br \/>\n   if (answer != null) {<br \/>\n    answer=answer.trim();<br \/>\n    if (answer.trim() != '') {<br \/>\n      var delimis='';<br \/>\n      for (var ii=0; ii&lt;answer.length; ii++) {<br \/>\n        if (delimis == '' && (answer.substring(ii).substring(0,1) &lt; '0' || answer.substring(ii).substring(0,1) &gt; '9')) {<br \/>\n          delimis=answer.substring(ii).substring(0,1);<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    if (delimis != '') {<br \/>\n      vals=answer.split(delimis);<br \/>\n    }<br \/>\n    if (vals.length == 6 || vals.length == 7) {<br \/>\n      answertherest=prompt('Any optional legend or title argument snippets?  Eg. &chdl=A|B|C&chtt=My%20Venn%20Diagram&chco=ff0000,00ff00,0000ff', therest);<br \/>\n      if (answertherest == null) { answertherest=''; }<br \/>\n      therest=answertherest.trim();<br \/>\n      var aone=1;<br \/>\n      var plotstring='';<br \/>\n      var flds=[];<br \/>\n      if (therest.indexOf('&text' + aone + '=') != -1) {<br \/>\n        while (therest.indexOf('&text' + aone + '=') != -1) {<br \/>\n        if (chd == '') {<br \/>\n          plotstring=decodeURIComponent(therest.split('&text' + aone + '=')[1].split('&')[0]);<br \/>\n          while (plotstring.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n            plotstring=plotstring.replace(String.fromCharCode(10), '&lt;br&gt;');<br \/>\n          }<br \/>\n          flds=plotstring.split(',');<br \/>\n          if (eval('' + flds.length) &gt;= 3) {<br \/>\n       document.getElementById('dtext').innerHTML+='&lt;p style=\"position:absolute;font-size:10px;font-family:Arial;left:' + flds[0] + 'px;top:' + flds[1] + 'px;z-index:98;\"&gt;' + plotstring.split('' + flds[0] + ',' + flds[1] + ',')[1] + '&lt;\/p&gt;';<br \/>\n          }<br \/>\n        }<br \/>\n        aone++;<br \/>\n        textnum=aone;<br \/>\n        }<br \/>\n      }<br \/>\n      \/\/document.getElementById('myvenn').style.backgroundImage='URL(\/\/www.rjmprogramming.com.au\/ITblog\/' + Math.min(550,window.innerWidth) + '\/' + Math.min(350,window.innerHeight) + '\/?cht=v&chd=t:' + encodeURIComponent(answer + therest) + ')';<br \/>\n      document.getElementById('myvenn').src='\/\/www.rjmprogramming.com.au\/ITblog\/' + Math.min(550,window.innerWidth) + '\/' + Math.min(350,window.innerHeight) + '\/?cht=v&chd=t:' + encodeURIComponent(answer) + therest + '';<br \/>\n      if (document.getElementById('tdright').innerHTML == '') {<br \/>\n        document.getElementById('tdright').innerHTML=\"&nbsp;&nbsp;&lt;span id=spemail&gt;&lt;a target=_blank href='mailto:?subject=My%20Venn%20Diagram%20...%20best%20viewed%20in%20landscape%20...&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=spsms&gt;&lt;a target=_blank onmouseover=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" ontouchstart=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" href='sms:&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;input id=ilp onblur=\\\"lasttext=this.value.replace(\/\\~\\~\/g, '&lt;br&gt;'); this.value=''; this.placeholder='Click where you want ... ' + lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10));\\\" placeholder='Enter text and later click place for it on Venn Diagram to left (line feed is ~~)' type=text style=width:500px; value=''&gt;&lt;\/input&gt;\";<br \/>\n      }<br \/>\n    } else {<br \/>\n      alert('Try again.');<br \/>\n      ask(null);<br \/>\n    }<br \/>\n   }<br \/>\n   }<br \/>\n   atstart=false;<br \/>\n   normalcall=true;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-GETME\" rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-GETME\" rel=\"noopener\">second draft image_venn.html<\/a> Google Chart Image Chart Venn Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>As far as this WordPress blog&#8217;s 404.php role goes in all this, we were keen to maintain Venn Diagrams that were purely image based data, because the web browser sharing mechanisms are so much better this way, else we were tempted to just construct a webpage HTML dataset positioning text in an absolute way with a Venn Chart background image.  In order to do these purely image based Venn Diagrams we used PHP&#8217;s <a target=\"_blank\" title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php' rel=\"noopener\">GD<\/a> image library <font color=blue>as per<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    if (strpos(('?' . $_SERVER['QUERY_STRING']), '?cht=') !== false || strpos(('?' . $_SERVER['QUERY_STRING']), '&cht=') !== false) {<br \/>\n<br \/>\n       $theqs=str_replace('??','?',('?' . $_SERVER['QUERY_STRING']));<br \/>\n       if (strpos($theqs, '?chs=') === false && strpos($theqs, '&chs=') === false) {<br \/>\n          $theqs='?chs=' . $newWidth . 'x' . $newHeight . '&' . explode('?', $theqs)[1];<br \/>\n       }<br \/>\n       <br \/>\n       <font color=blue>if (strpos(('?' . $_SERVER['QUERY_STRING']), 'text1=') !== false) {<br \/>\n       $theone=2;<br \/>\n       $im = imagecreatefromstring(file_get_contents('ht<\/font><font color=blue>tp<\/font><font color=blue>:\/\/chart.googleapis.com\/chart' . explode('&text1=', $theqs)[0]));<br \/>\n       <br \/>\n       if (7 == 7) {<br \/>\n       <br \/>\n       $plotstring=str_replace('+',' ',urldecode($_GET['text1']));<br \/>\n       $csv=explode(',', $plotstring);<br \/>\n       $black = imagecolorallocatealpha($im, 1, 1, 1, 0);<br \/>\n       if (sizeof($csv) &gt;= 3) {<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  \/\/echo explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1];<br \/>\n  \/\/exit;<br \/>\n  imagettftext($im, 10, 0, $csv[0], $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n         while (isset($_GET['text' . $theone])) {<br \/>\n       $plotstring=str_replace('+',' ',urldecode($_GET['text' . $theone]));<br \/>\n       $csv=explode(',', $plotstring);<br \/>\n       if (sizeof($csv) &gt;= 3) {<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  imagettftext($im, 10, 0, $csv[0], $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n       }<br \/>\n       $theone++;<br \/>\n         }<br \/>\n       }<br \/>\n       <br \/>\n       }<br \/>\n    <br \/> <br \/>\n header('Content-Type: image\/png');<br \/>\n<br \/>\n imagepng($im);<br \/>\n imagedestroy($im);<br \/>\n       } else {<\/font><br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/chart.googleapis.com\/chart' . $theqs);<br \/>\n       <font color=blue>}<\/font><br \/>\n       exit;<br \/>\n<br \/>\n    }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\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\/google-chart-image-chart-venn-chart-user-text-tutorial\/' rel=\"noopener\">Google Chart Image Chart Venn Chart User Text Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicvcipt'>Previous relevant <a target=\"_blank\" title='Google Chart Image Chart Venn Chart Interfacing Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-venn-chart-interfacing-primer-tutorial\/' rel=\"noopener\">Google Chart Image Chart Venn Chart Interfacing 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\/image_venn.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Venn Chart Interfacing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.jpg\" title=\"Google Chart Image Chart Venn Chart Interfacing Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Venn Chart Interfacing Primer Tutorial<\/p><\/div>\n<p>So, moving on from <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Chart<\/a> Map Charts, today, let&#8217;s turn our attention to <a target=\"_blank\" href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.' rel=\"noopener\">Google Charts<\/a> <a target=\"_blank\" title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall' rel=\"noopener\">Image Chart<\/a> <a target=\"_blank\" title='Google Chart Image Chart Venn Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/venn_charts' rel=\"noopener\">Venn Charts<\/a> which we were dead set curious about given work we&#8217;d done in the past regarding Venn Diagrams, which we referenced when we presented <a target=\"_blank\" title='Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-and-venn-diagram-and-mind-map-token-subject-emoji-tutorial\/' rel=\"noopener\">Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial<\/a> some time back.  Gobsmackingly good is the <a target=\"_blank\" title=\"Google\" href='https:\/\/google.com' rel=\"noopener\">Google<\/a> approach, <a target=\"_blank\" title=\"?\" href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s' rel=\"noopener\">again<\/a>, as you&#8217;d expect, but the approach covers different ground, so one feels one should go back to Primary School!  You thought we were going to give away the answer to one of those security questions, didn&#8217;t you?!  <font size=6>Didn&#8217;t you!?!<\/font>  <font size=1>Well, the answer is &#8220;Gryffindor Slytherin Ravenclaw Hufflepuff Junior Business College&#8221; &#8230; if you must know.<\/font><\/p>\n<p>The sharing capabilities are good with the Google Charts approach too, given we are creating an HTML image, as our WordPress blog <font size=1>good ol&#8217;<\/font> 404.php has been woken up to address via &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    if (strpos(('?' . $_SERVER['QUERY_STRING']), '?cht=') !== false || strpos(('?' . $_SERVER['QUERY_STRING']), '&cht=') !== false) {<br \/>\n<br \/>\n       $theqs=str_replace('??','?',('?' . $_SERVER['QUERY_STRING']));<br \/>\n       if (strpos($theqs, '?chs=') === false && strpos($theqs, '&chs=') === false) {<br \/>\n          $theqs='?chs=' . $newWidth . 'x' . $newHeight . '&' . explode('?', $theqs)[1];<br \/>\n       }<br \/>\n<br \/> <br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/chart.googleapis.com\/chart' . $theqs);<br \/>\n       exit;<br \/>\n<br \/>\n     }<br \/>\n    <\/code><br \/>\n?&gt;<\/p>\n<p>Yes, all these Image Chart smarts come, essentially, from a &#8220;one line&#8221; calling URL!  Who&#8217;d have believed it!  Shiver me timbers!<\/p>\n<p>Well, it&#8217;s early days with this Venn Chart interfacing where we allow for &#8230;<\/p>\n<ul>\n<li>circle (think up to three) definition &#8230; and the rest, in this first draft <font size=1>(hoping you&#8217;ve done some reading)<\/font> &#8230;<\/li>\n<li>legend and title and colour selection user definitions dumped into a fairly unfriendly &#8220;the rest&#8221; Javascript prompt entry we ask of the user should they go ahead with the previous definition &#8230; and &#8230;<\/li>\n<li>sharing and collaboration email and SMS functionality<\/li>\n<\/ul>\n<p> &#8230; we hope you try via our <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html_GETME\" rel=\"noopener\">&#8220;proof of concept&#8221; first draft image_venn.html<\/a> Google Chart Image Chart Venn Chart interfacing <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" rel=\"noopener\">web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=vennif src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" style=\"width:98%;height:800px;\"><\/iframe><\/p>\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\/google-chart-image-chart-venn-chart-interfacing-tutorial\/' rel=\"noopener\">Google Chart Image Chart Venn Chart Interfacing Tutorial<\/a>.<\/p-->\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='#d61748' onclick='var dv=document.getElementById(\"d61748\"); 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='d61748' 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='#d61758' onclick='var dv=document.getElementById(\"d61758\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61758' 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='#d61779' onclick='var dv=document.getElementById(\"d61779\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/parameter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61779' 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='#d61792' onclick='var dv=document.getElementById(\"d61792\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/line\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61792' 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='#d61807' onclick='var dv=document.getElementById(\"d61807\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61807' 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='#d61823' onclick='var dv=document.getElementById(\"d61823\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/statistics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61823' 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='#d61834' onclick='var dv=document.getElementById(\"d61834\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/broadcast\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61834' 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='#d61841' onclick='var dv=document.getElementById(\"d61841\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/context\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61841' 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='#d61847' onclick='var dv=document.getElementById(\"d61847\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/border-radius\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61847' 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='#d61852' onclick='var dv=document.getElementById(\"d61852\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/rubber-band\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61852' 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='#d61871' onclick='var dv=document.getElementById(\"d61871\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/colour\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61871' 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='#d61881' onclick='var dv=document.getElementById(\"d61881\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/guage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61881' 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='#d61887' onclick='var dv=document.getElementById(\"d61887\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/justification\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61887' 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='#d61909' onclick='var dv=document.getElementById(\"d61909\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/commentary\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61909' 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='#d61921' onclick='var dv=document.getElementById(\"d61921\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/icon\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61921' 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='#d61939' onclick='var dv=document.getElementById(\"d61939\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61939' 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='#d61948' onclick='var dv=document.getElementById(\"d61948\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/attribute\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61948' 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='#d61959' onclick='var dv=document.getElementById(\"d61959\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61959' 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='#d61970' onclick='var dv=document.getElementById(\"d61970\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ajax\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61970' 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='#d64793' onclick='var dv=document.getElementById(\"d64793\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/graphviz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64793' 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='#d64808' onclick='var dv=document.getElementById(\"d64808\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64808' 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='#d64815' onclick='var dv=document.getElementById(\"d64815\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/localstorage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64815' 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='#d64835' onclick='var dv=document.getElementById(\"d64835\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/focus\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64835' 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='#d64858' onclick='var dv=document.getElementById(\"d64858\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/python\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64858' 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='#d64863' onclick='var dv=document.getElementById(\"d64863\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/file\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64863' 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='#d64869' onclick='var dv=document.getElementById(\"d64869\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hierarchy\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64869' 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='#d64880' onclick='var dv=document.getElementById(\"d64880\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/delimitation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64880' 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='#d64896' onclick='var dv=document.getElementById(\"d64896\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/tree\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64896' 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='#d64910' onclick='var dv=document.getElementById(\"d64910\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64910' 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='#d64934' onclick='var dv=document.getElementById(\"d64934\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/recall\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64934' 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='#d64940' onclick='var dv=document.getElementById(\"d64940\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/command-line\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64940' 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='#d64949' onclick='var dv=document.getElementById(\"d64949\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/imagemap\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64949' 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='#d64959' onclick='var dv=document.getElementById(\"d64959\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/venn-diagram\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64959' 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='#d64969' onclick='var dv=document.getElementById(\"d64969\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/position\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64969' 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='#d64969' onclick='var dv=document.getElementById(\"d64969\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/position\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64969' 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='#d64991' onclick='var dv=document.getElementById(\"d64991\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/deployment\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d64991' 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='#d65010' onclick='var dv=document.getElementById(\"d65010\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/shape\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65010' 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='#d65027' onclick='var dv=document.getElementById(\"d65027\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/layout\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65027' 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='#d65034' onclick='var dv=document.getElementById(\"d65034\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/peer-to-peer\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65034' 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='#d65069' onclick='var dv=document.getElementById(\"d65069\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65069' 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='#d65074' onclick='var dv=document.getElementById(\"d65074\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quickchart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65074' 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='#d65663' onclick='var dv=document.getElementById(\"d65663\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geo-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65663' 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='#d65672' onclick='var dv=document.getElementById(\"d65672\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/country-code\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65672' 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='#d65690' onclick='var dv=document.getElementById(\"d65690\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65690' 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='#d65696' onclick='var dv=document.getElementById(\"d65696\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65696' 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='#d65703' onclick='var dv=document.getElementById(\"d65703\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/data\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65703' 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='#d65709' onclick='var dv=document.getElementById(\"d65709\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65709' 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='#d65715' onclick='var dv=document.getElementById(\"d65715\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/tooltip\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65715' 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='#d65728' onclick='var dv=document.getElementById(\"d65728\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65728' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The SVG elements in the Google Chart Geo Charts subplayer, for Map Chart option, in our latest Regional Maps web application of interest, featuring in yesterday&#8217;s Regional Text Google Chart Text Tooltip Tutorial, behave, for the most part, as far &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/regional-text-google-chart-text-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":[3849,1669,249,2247,290,2492,354,385,3192,2242,1619,519,527,576,587,590,604,4993,2395,3266,4642,652,2126,1520,861,932,997,1620,4564,4643,4992,2766,1626,1226,1254,2167,4994,1319,1325,1345,1431,3276],"class_list":["post-65728","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-404-php","tag-address-bar","tag-configuration","tag-country-code","tag-data","tag-declutter","tag-dom","tag-emoji","tag-emoji-flag","tag-flag","tag-geo-chart","tag-google-charts","tag-google-maps","tag-html","tag-iframe","tag-image","tag-index","tag-indexed","tag-iso","tag-iso-code","tag-iso-3166","tag-javascript","tag-map-chart","tag-numerical","tag-onclick","tag-php","tag-programming","tag-region","tag-region-code","tag-regional","tag-regional-code","tag-setting","tag-string","tag-svg","tag-text","tag-title","tag-tolltip","tag-tutorial","tag-twentyten-theme","tag-url","tag-wikipedia","tag-wordpress-blog"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65728"}],"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=65728"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65728\/revisions"}],"predecessor-version":[{"id":65733,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65728\/revisions\/65733"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=65728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=65728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=65728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}