<html>
<head>
<title>Show Some Shapes - RJM Programming - October, 2023</title>
<style>
* { padding: 5 5 5 5; }
</style>
<script type='text/javascript'>
var shapeopts='arc,semicircle,rectangle,square,pie,crescent,quadrant,line,octagon,circle,ellipse,bezier,triangle,rhombus';
var lastimagesuffix='bezier', lastiframesuffix='circle';
var ifw=334, ifh=334, imifw=334, imifh=334, ififw=334, ififh=334;
var thimageextras=' Width: <input onblur=fixv(this); onchange=fixv(this); type=number id=imagew value=' + ifw + ' step=1 min=0></input> x <input onblur=fixv(this); onchange=fixv(this); type=number id=imageh value=' + ifh + ' step=1 min=0></input> Height <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> <input onblur=fixv(this); onchange=fixv(this); id=imagecpf type=color title="Fill" data-last="#00ff00" value="#00ff00"></input> <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> <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='';

function drawvia(what) {
if (what.value != '') {
if (what.id.indexOf('frame') != -1) {
if (what.value == 'rhombus') {
document.getElementById('myiframe').style.width='' + eval(1.5 * ififw) + 'px';
document.getElementById('myiframe').style.height='' + eval(1.5 * ififh) + 'px';
} else {
document.getElementById('myiframe').style.width='' + ififw + 'px';
document.getElementById('myiframe').style.height='' + ififh + 'px';
}
document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(lastiframesuffix, what.value);
//document.body.innerHTML=document.body.innerHTML.replace(lastiframesuffix, what.value);
lastiframesuffix=what.value;
jframemid=iframemid + lastiframesuffix;
document.getElementById('thiframeopt').innerText='Iframe';
} else if (what.id.indexOf('mage') != -1) {
if (what.value == 'rhombus') {
document.getElementById('myimage').style.width='' + eval(1.5 * imifw) + 'px';
document.getElementById('myimage').style.height='' + eval(1.5 * imifh) + 'px';
} else {
document.getElementById('myimage').style.width='' + imifw + 'px';
document.getElementById('myimage').style.height='' + imifh + 'px';
}
document.getElementById('myimage').src=document.getElementById('myimage').src.replace(lastimagesuffix, what.value);
//document.body.innerHTML=document.body.innerHTML.replace(lastiframesuffix, what.value);
lastimagesuffix=what.value;
jmagemid=imagemid + lastimagesuffix;
document.getElementById('thimageopt').innerText='Image';
}
}
}

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;
}
}

function onl() {
var thimagesel='<select style=background-color:yellow; id=thimagesel onchange=drawvia(this);><option id=thimageopt value="">Image</option></select>';
var thiframesel=thimagesel.replace(/mage/g, 'frame');
thimagesel=thimagesel.replace('>Image<', '>Image ... showing bezier below<');
var arrs=shapeopts.split(',');
for (var i=0; i<arrs.length; i++) {
thimagesel=thimagesel.replace('</select>', '<option value=' + arrs[i] + '>' + arrs[i] + '</option></select>');
if (document.getElementById('myimage').src.indexOf(arrs[i]) != -1 && thimagesel.indexOf('>Image<') != -1) {
thimageesel=thimagesel.replace('>Image<', '>Image ... showing ' + arrs[i] + ' below<');
lastimagesuffix=arrs[i];
}
thiframesel=thiframesel.replace('</select>', '<option value=' + arrs[i] + '>' + arrs[i] + '</option></select>');
if (document.getElementById('myiframe').src.indexOf(arrs[i]) != -1 && thiframesel.indexOf('>Iframe<') != -1) {
thiframesel=thiframesel.replace('>Iframe<', '>Iframe ... showing ' + arrs[i] + ' below<');
lastiframesuffix=arrs[i];
}
}
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;
}

setInterval(tdit, 4000);

</script>
</head>
<body onload="onl();">
<h1>Show Some Shapes</h1>
<h3>RJM Programming - October, 2023</h3>
<table border=50 style=width:98%;>
<tr><th id=thimage style="width:50%;">Image</th><th id=thiframe>Iframe</th></tr>
<tr><td>
<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>
<td>
<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>
</table>
</body>
</html>