3d2
< <title>Show Some Shapes - RJM Programming - October, 2023</title>
9,20c8,10
<   var lastimagesuffix='bezier', lastiframesuffix='circle';
<   var ifw=334, ifh=334, imifw=334, imifh=334, ififw=334, ififh=334;
<   var thimageextras='&nbsp;Width:&nbsp;<input onblur=fixv(this); onchange=fixv(this); type=number id=imagew value=' + ifw + ' step=1 min=0></input>&nbsp;x&nbsp;<input onblur=fixv(this); onchange=fixv(this); type=number id=imageh value=' + ifh + ' step=1 min=0></input>&nbsp;Height&nbsp;<br><select onchange=fixv(this); id=imageself><option id=imageoptf value=" ">Fill</option><option id=imageotherf value="transparent">Transparent Fill</option><option id=imagenonef value="">Fill None</option></select><input onblur=fixv(this); id=imagecpfo type=text value="" placeholder=":" title="Optional fill colour opacity 0.0 to [1.0]"></input>&nbsp;<input onblur=fixv(this); onchange=fixv(this); id=imagecpf type=color title="Fill" data-last="#00ff00" value="#00ff00"></input>&nbsp;<select onchange=fixv(this); id=imagesels><option id=imageopts value=" ">Stroke</option><option id=imageothers value="transparent">Transparent Stroke</option><option id=imagenones value="">Stroke None</option></select><input onblur=fixv(this); id=imagecpso type=text value="" placeholder=":" title="Optional stroke colour opacity 0.0 to [1.0]"></input>&nbsp;<input onblur=fixv(this); onchange=fixv(this); id=imagecps type=color title="Stroke" data-last="#000000" value="#000000"></input>';
<   var thiframeextras=thimageextras.replace(/image/g, 'iframe').replace(/00ff00/g,'0000ff');
<   var iframemid='0000ff+';
<   var imagemid='00ff00+';
<   var jframemid=iframemid + lastiframesuffix;
<   var jmagemid=imagemid + lastimagesuffix;
<   var fopacity='', mopacity='';
<   var sopacity='', topacity='';
<   var sifcol='', simcol='';
<   
---
>   var lastimagesuffix='bezier', lastiframesuffix='quadrant';
>   var ifw=334, ifh=334;
> 
25,26c15,16
<              document.getElementById('myiframe').style.width='' + eval(1.5 * ififw) + 'px';
<              document.getElementById('myiframe').style.height='' + eval(1.5 * ififh) + 'px';
---
>              document.getElementById('myiframe').style.width='' + eval(1.5 * ifw) + 'px';
>              document.getElementById('myiframe').style.height='' + eval(1.5 * ifh) + 'px';
28,29c18,19
<              document.getElementById('myiframe').style.width='' + ififw + 'px';
<              document.getElementById('myiframe').style.height='' + ififh + 'px';
---
>              document.getElementById('myiframe').style.width='' + ifw + 'px';
>              document.getElementById('myiframe').style.height='' + ifh + 'px';
34d23
<           jframemid=iframemid + lastiframesuffix;
38,39c27,28
<              document.getElementById('myimage').style.width='' + eval(1.5 * imifw) + 'px';
<              document.getElementById('myimage').style.height='' + eval(1.5 * imifh) + 'px';
---
>              document.getElementById('myimage').style.width='' + eval(1.5 * ifw) + 'px';
>              document.getElementById('myimage').style.height='' + eval(1.5 * ifh) + 'px';
41,42c30,31
<              document.getElementById('myimage').style.width='' + imifw + 'px';
<              document.getElementById('myimage').style.height='' + imifh + 'px';
---
>              document.getElementById('myimage').style.width='' + ifw + 'px';
>              document.getElementById('myimage').style.height='' + ifh + 'px';
47d35
<           jmagemid=imagemid + lastimagesuffix;
52,264d39
<   
<   function fixv(oselinvo) {
<     var theval=oselinvo.value;
<     switch('' + oselinvo.id) {
<       case 'imagew': // width
<        if (theval.trim() != '') {
<        imifw=eval('' + theval);
<        document.getElementById('myimage').style.width='' + theval + 'px';
<        document.getElementById('myimage').src=document.getElementById('myimage').src.replace('blog/' + document.getElementById('myimage').src.split('/')[4] + '/', 'blog/' + theval + '/');
<        }
<        break;
<        
<       case 'iframew': 
<        if (theval.trim() != '') {
<        ififw=eval('' + theval);
<        document.getElementById('myiframe').style.width='' + theval + 'px';
<        document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace('blog/' + document.getElementById('myiframe').src.split('/')[4] + '/', 'blog/' + theval + '/');
<        }
<        break;
<        
<       case 'imageh': // height
<        if (theval.trim() != '') {
<        imifh=eval('' + theval);
<        document.getElementById('myimage').style.height='' + theval + 'px';
<        document.getElementById('myimage').src=document.getElementById('myimage').src.replace('blog/' + document.getElementById('myimage').src.split('/')[4] + '/' + document.getElementById('myimage').src.split('/')[5] + '/', 'blog/' + document.getElementById('myimage').src.split('/')[4] + '/' + theval + '/');
<        }
<        break;
<        
<       case 'iframeh': 
<        if (theval.trim() != '') {
<        ififh=eval('' + theval);
<        document.getElementById('myiframe').style.height='' + theval + 'px';
<        document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace('blog/' + document.getElementById('myiframe').src.split('/')[4] + '/' + document.getElementById('myiframe').src.split('/')[5] + '/', 'blog/' + document.getElementById('myiframe').src.split('/')[4] + '/' + theval + '/');
<        }
<        break;
<        
<       case 'imageself': // fill dropdown
<        if (theval == '') {
<        document.getElementById('myimage').src=document.getElementById('myimage').src.replace(imagemid, 'none' + fopacity.replace(/^1\.0$/g, '') + '+' + simcol + sopacity.replace(/^1\.0$/g, ''));
<        //imagemid='none+';
<        imagemid='none' + fopacity.replace(/^1\.0$/g, '') + '+' + simcol + sopacity.replace(/^1\.0$/g, '');
<        } else if (theval == 'transparent') {
<        document.getElementById('myimage').src=document.getElementById('myimage').src.replace(imagemid, 'transparent' + fopacity.replace(/^1\.0$/g, '') + '+' + simcol + sopacity.replace(/^1\.0$/g, ''));
<        //imagemid='transparent+';
<        imagemid='transparent' + fopacity.replace(/^1\.0$/g, '') + '+' + simcol + sopacity.replace(/^1\.0$/g, '');
<        }
<        jmagemid=imageemid + lastimagesuffix;
<        break;
<        
<       case 'iframeself': 
<        if (theval == '') {
<        document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(iframemid, 'none' + mopacity.replace(/^1\.0$/g, '') + '+' + sifcol + topacity.replace(/^1\.0$/g, ''));
<        //iframemid='none+';
<        iframemid='none' + mopacity.replace(/^1\.0$/g, '') + '+' + sifcol + topacity.replace(/^1\.0$/g, '');
<        } else if (theval == 'transparent') {
<        document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(iframemid, 'transparent' + mopacity.replace(/^1\.0$/g, '') + '+' + sifcol + topacity.replace(/^1\.0$/g, ''));
<        //iframemid='transparent+';
<        iframemid='transparent' + mopacity.replace(/^1\.0$/g, '') + '+' + sifcol + topacity.replace(/^1\.0$/g, '');
<        }
<        jframemid=iframemid + lastiframesuffix;
<        break;
<        
<       case 'imagesels': // stroke dropdown
<        if (theval == '') {
<        document.getElementById('myimage').src=document.getElementById('myimage').src.replace(imagemid, imagemid.split('+')[0] + '+' + 'none' + sopacity.replace(/^1\.0$/g, ''));
<        //imagemid='none+';
<        imagemid=imagemid.split('+')[0] + '+' + 'none' + sopacity.replace(/^1\.0$/g, '');
<        } else if (theval == 'transparent') {
<        document.getElementById('myimage').src=document.getElementById('myimage').src.replace(imagemid, imagemid.split('+')[0] + '+' + 'transparent' + sopacity.replace(/^1\.0$/g, ''));
<        //imagemid='transparent+';
<        imagemid=imagemid.split('+')[0] + '+' + 'transparent' + sopacity.replace(/^1\.0$/g, '');
<        }
<        jmagemid=imageemid + lastimagesuffix;
<        break;
<        
<       case 'iframesels': 
<        if (theval == '') {
<        document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(iframemid, iframemid.split('+')[0] + '+' + 'none' + topacity.replace(/^1\.0$/g, ''));
<        //iframemid='none+';
<        iframemid=iframemid.split('+')[0] + '+' + 'none' + topacity.replace(/^1\.0$/g, '');
<        } else if (theval == 'transparent') {
<        document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(iframemid, iframemid.split('+')[0] + '+' + 'transparent' + topacity.replace(/^1\.0$/g, ''));
<        //iframemid='transparent+';
<        iframemid=iframemid.split('+')[0] + '+' + 'transparent' + topacity.replace(/^1\.0$/g, '');
<        }
<        jframemid=iframemid + lastiframesuffix;
<        break;
<        
<       case 'imagecpfo': // fill opacity
<        if (theval.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,'').replace(/\./g,'') == '') {
<          if (fopacity != '') {
<            document.getElementById('myimage').src=document.getElementById('myimage').src.replace(imagemid, imagemid.replace(fopacity + '+','+'));
<            imagemid=imagemid.replace(fopacity + '+','+');
<            fopacity='';
<          } else if (fopacity == '') {
<            document.getElementById('myimage').src=document.getElementById('myimage').src.replace(imagemid, imagemid.replace('+', theval + '+'));
<            imagemid=imagemid.replace('+', theval + '+');
<            fopacity=theval;
<          } else {
<            document.getElementById('myimage').src=document.getElementById('myimage').src.replace(imagemid, imagemid.replace(fopacity + '+',theval + '+'));
<            imagemid=imagemid.replace(fopacity + '+',theval + '+');
<            fopacity=theval;
<          }
<        }
<        jmagemid=imagemid + lastimagesuffix;
<        break;
<        
<       case 'iframecpfo': 
<        if (theval.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,'').replace(/\./g,'') == '') {
<          if (mopacity != '') {
<            document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(iframemid, iframemid.replace(mopacity + '+','+'));
<            iframemid=iframemid.replace(mopacity + '+','+');
<            mopacity='';
<          } else if (mopacity == '') {
<            document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(iframemid, iframemid.replace('+', theval + '+'));
<            iframemid=iframemid.replace('+', theval + '+');
<            mopacity=theval;
<          } else {
<            document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(iframemid, iframemid.replace(mopacity + '+',theval + '+'));
<            iframemid=iframemid.replace(mopacity + '+',theval + '+');
<            mopacity=theval;
<          }
<        }
<        jframemid=iframemid + lastiframesuffix;
<        break;
<        
<       case 'imagecpso': // stroke opacity
<        if (theval.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,'').replace(/\./g,'') == '') {
<          if (sopacity != '') {
<            document.getElementById('myimage').src=document.getElementById('myimage').src.replace(jmagemid, jmagemid.replace(sopacity + lastimagesuffix,lastimagesuffix));
<            jmagemid=jmagemid.replace(sopacity + lastimagesuffix,lastimagesuffix);
<            sopacity='';
<          } else if (sopacity == '') {
<            document.getElementById('myimage').src=document.getElementById('myimage').src.replace(jmagemid, jmagemid.replace(lastimagesuffix, theval + lastimagesuffix));
<            jmagemid=jmagemid.replace(lastimagesuffix, theval + lastimagesuffix);
<            sopacity=theval;
<          } else {
<            document.getElementById('myimage').src=document.getElementById('myimage').src.replace(jmagemid, jmagemid.replace(sopacity + lastimagesuffix,theval + lastimagesuffix));
<            jmagemid=jmagemid.replace(sopacity + lastimagesuffix,theval + lastimagesuffix);
<            sopacity=theval;
<          }
<        }
<        iframemid=jframemid.split(lastiframesuffix)[0];
<        break;
<        
<       case 'iframecpso': 
<        if (theval.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,'').replace(/\./g,'') == '') {
<          if (topacity != '') {
<            document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(jframemid, jframemid.replace(topacity + lastiframesuffix,lastiframesuffix));
<            jframemid=jframemid.replace(topacity + lastiframesuffix,lastiframesuffix);
<            topacity='';
<          } else if (topacity == '') {
<            document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(jframemid, jframemid.replace(lastiframesuffix, theval + lastiframesuffix));
<            jframemid=jframemid.replace(lastiframesuffix, theval + lastiframesuffix);
<            topacity=theval;
<          } else {
<            document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(jframemid, jframemid.replace(topacity + lastiframesuffix,theval + lastiframesuffix));
<            jframemid=jframemid.replace(topacity + lastiframesuffix,theval + lastiframesuffix);
<            topacity=theval;
<          }
<        }
<        imagemid=jmagemid.split(lastimagesuffix)[0];
<        break;
<        
<       case 'imagecpf': // fill colour
<        if (theval.trim() != '') {
<        if (document.getElementById('imageself').value == ' ') {
<        document.getElementById('myimage').src=document.getElementById('myimage').src.replace(imagemid, theval.replace('#','') + fopacity.replace(/^1\.0$/g, '') + '+' + simcol + sopacity.replace(/^1\.0$/g, ''));
<        oselinvo.setAttribute('data-last', theval);
<        imagemid=theval.replace('#','') + fopacity.replace(/^1\.0$/g, '') + '+' + simcol + sopacity.replace(/^1\.0$/g, '');
<        } else {
<        oselinvo.value=oselinv.getAttribute('data-last');
<        }
<        }
<        jmagemid=imagemid + lastimagesuffix;
<        break;
<        
<       case 'iframecpf': 
<        if (theval.trim() != '') {
<        //alert(document.getElementById('myiframe').src + ' becomes ' + document.getElementById('myiframe').src.replace(iframemid, theval.replace('#','')));
<        if (document.getElementById('iframeself').value == ' ') {
<        document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(iframemid, theval.replace('#','') + mopacity.replace(/^1\.0$/g, '') + '+' + sifcol + topacity.replace(/^1\.0$/g, ''));
<        oselinvo.setAttribute('data-last', theval);
<        iframemid=theval.replace('#','') + mopacity.replace(/^1\.0$/g, '') + '+' + sifcol + topacity.replace(/^1\.0$/g, '');
<        } else {
<        oselinvo.value=oselinv.getAttribute('data-last');
<        }
<        }
<        jframemid=iframemid + lastiframesuffix;
<        break;
<        
<       case 'imagecps': // stroke colour
<        if (theval != '') {
<        document.getElementById('myimage').src=document.getElementById('myimage').src.replace(imagemid, imagemid.split('+')[0] + '+' + theval.replace('#','') + sopacity.replace(/^1\.0$/g, ''));
<        simcol=theval.replace('#','');
<        imagemid=imagemid.split('+')[0] + '+' + simcol + sopacity.replace(/^1\.0$/g, '');
<        }
<        jmagemid=imagemid + lastimagesuffix;
<        break;
<        
<       case 'iframecps': 
<        if (theval != '') {       
<        document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(iframemid, iframemid.split('+')[0] + '+' + theval.replace('#','') + topacity.replace(/^1\.0$/g, ''));
<        sifcol=theval.replace('#','');
<        iframemid=iframemid.split('+')[0] + '+' + sifcol + topacity.replace(/^1\.0$/g, '');
<        }
<        jframemid=iframemid + lastiframesuffix;
<        break;
<        
<       default:
<        break;
<     }
<   }
267c42
<     var thimagesel='<select style=background-color:yellow; id=thimagesel onchange=drawvia(this);><option id=thimageopt value="">Image</option></select>';
---
>     var thimagesel='<select id=thimagesel onchange=drawvia(this);><option id=thimageopt value="">Image</option></select>';
283,289c58,59
<     document.getElementById('thimage').innerHTML=thimagesel + thimageextras;
<     document.getElementById('thiframe').innerHTML=thiframesel + thiframeextras;
<   }
<   
<   function tdit() {
<      document.getElementById('tdimg').innerHTML=document.getElementById('myimage').src;
<      document.getElementById('tdif').innerHTML=document.getElementById('myiframe').src;
---
>     document.getElementById('thimage').innerHTML=thimagesel;
>     document.getElementById('thiframe').innerHTML=thiframesel;
291,292d60
<   
<   setInterval(tdit, 4000);
302,303c70,71
< <img title="Click for new window version" onclick="window.open(this.src,'_blank');" style='width:334px;height:334px;' id=myimage src='//www.rjmprogramming.com.au/ITblog/334/334/?svg00ff00+bezier=y'></img>
< <span id=tdimg style=display:none;></span></td>
---
> <img style='width:334px;height:334px;' id=myimage src='//www.rjmprogramming.com.au/ITblog/334/334/?svggreenbezier=y'></img>
> </td>
305,306c73,74
< <iframe title="Click for new window version" onclick="window.open(this.src,'_blank');" style='width:334px;height:334px;' frameborder=0 id=myiframe src='//www.rjmprogramming.com.au/ITblog/334/334/?svg0000ff+circle=y'></iframe>
< <span id=tdif style=display:none;></span></td></tr>
---
> <iframe style='width:334px;height:334px;' frameborder=0 id=myiframe src='//www.rjmprogramming.com.au/ITblog/334/334/?svgbluecircle=y'></iframe>
> </td></tr>