Monthly Archives: December 2020

Combining a Beveled Frame with Noise for Images and Videos

Leave a comment


This app combines two that I have previously discussed..
Although it can be used for images it is best with videos, where the two effects combine to mask poor video quality and give a sort of 3 dimensional quality.

Here is the interface with an image loaded:

To view a video clip Click

This is the code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head profile=”http://gmpg.org/xfn/11″&gt;
<title>Bevel</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
#svg1 {position: absolute; left: 40px; top: 40px;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#svg2, #frame{position: absolute; left: 10px; top: 10px; width: 700px; height: 680px; }
#frame{background: #771111}
#img1{position: absolute; left: 0; top: 0; width: 100%}
#b1{position: absolute; left: 1000px}
#b2{position: absolute; left: 1000px; top: 35px}
#b3{position: absolute; left: 1060px; top: 35px}
#b4{position: absolute; left: 1110px; top: 35px}
#b5{position: absolute; left: 1200px; top: 35px}
#fil{position: absolute; left: 1060px}
#s1{position: absolute; left: 1260px}
#ta{position: absolute; left: 0; top: 0; width:100%; height: 100%; visibility : hidden}
</style>
</head>
<body>
<div id=”frame”></div>
<svg id = “svg1”></svg>
<svg id = “svg2″></svg>
<input type=”button” id=”b1″ name=”b1″ value=”Draw” onclick=’drw();’/> <input type=”file” id=”fil” name=”files” onchange=’ld();’/> <input type=”button” id=”b2″ name=”b2″ value=”Save” onclick=’sve();’/> <input type=”button” id=”b3″ name=”b3″ value=”New” onclick=’location.reload();’/> <input type=”button” id=”b4″ name=”b4″ value=”Pause/Play” onclick=’ps();’/> <input type=”button” id=”b5″ name=”b5″ value=”Controls On/Off” onclick=’ctl();’/>
<select id=”s1″ name=”s1″>
<option>Choose Folder</option>
<option></option>
<option>A-E/</option>
<option>F-J/</option>
<option>K-O/</option>
<option>P-R/</option>
<option>S-T/</option>
<option>SVG/</option>
<option>Nails/</option>
<option>Animated GIF/</option>
<option>../Debut/Wondershare/MP4/</option>
<option>../mediaplayer-viral/FLV/WebM/</option>
<option>file:///media/removable/TOSHIBA%20EXT/Debut/Wondershare/MP4/</option>
<option>../videos/</option>
</select>
<textarea id=”ta” name=”ta” ondblclick=’document.getElementById(“ta”).style.visibility=”hidden”;’ ></textarea>

<script type=”text/javascript”>
var ht; var r = 0; var g = 0; var b = 0; var lft=0; var tp = 0; var wd; var op; var fldr; var fname; var ht2; var wd2; var paus = false; var ctrl = false;

function ctl() {
if (ctrl) {
document.getElementById(“svg1”).style.visibility = “hidden”;
document.getElementById(“svg2”).style.visibility = “hidden”;
ctrl = false;
} else {
document.getElementById(“svg1”).style.visibility = “visible”;
document.getElementById(“svg2”).style.visibility = “visible”;
ctrl = true;
}
}

function ps() {
if (paus) {
document.getElementById(“img1”).play();
paus = false;
} else {
document.getElementById(“img1″).pause();
paus = true;
}
}

function sve() {
var savstr = ‘<html> <input type=”button” id=”b4″ name=”b4″ style=”position: absolute; left: 1010px” value=”Pause/Play” onclick=”ps();” /> <input type=”button” id=”b5″ name=”b5″ style=”position: absolute; left: 1100px” value=”Controls On/Off” onclick=”ctl();”/> <select id=”vol” size=”22″ style=”position: absolute; left: 1010px; top: 40px” onchange=\’vlm();\’></select><dlv id=”frame” style=”position: absolute; left: 10px; top: 10px; width:’ + (wd2 + 60) + ‘px; height:’ + (ht2 + 60) + ‘px; background: #771111″ >’ + document.getElementById(“frame”).innerHTML + ‘ </div> <svg id=”svg1″ style=”position: absolute; left: 30px; top: 30px; width:’ + (wd2) + ‘px; height:’ + (ht2) + ‘px” >’ + document.getElementById(“svg1″).innerHTML + ‘ </svg> <svg id=”svg2″ style=”position: absolute; left: 0; top: 0; width:’ + (wd2 + 60) + ‘px; height:’ + (ht2 + 60) + ‘px” >’ + document.getElementById(“svg2”).innerHTML + ‘ </svg> <script>\nvar paus = true; var ctrl = true; document.getElementById(“img1”).volume = .5;\nfor (var i = 0; i <= 20; i ++) {\nif (i == 0) document.getElementById(“vol”).innerHTML = “<option>Choose Volume</option>”;\nif (i > 0) document.getElementById(“vol”).innerHTML += “<option>” + (.05 * i).toFixed(2) + “</option>”;\n}\nfunction ctl() {\nif (ctrl) {\ndocument.getElementById(“svg1”).style.visibility = “hidden”;\ndocument.getElementById(“svg2”).style.visibility = “hidden”;\nctrl = false;\n } else {\ndocument.getElementById(“svg1”).style.visibility = “visible”;\ndocument.getElementById(“svg2”).style.visibility = “visible”;\nctrl = true;\n}\n}\n function ps() {\nif (paus) {\ndocument.getElementById(“img1”).play();\npaus=false;\n} else {\ndocument.getElementById(“img1”).pause();\npaus = true;\n}\n}\nfunction vlm() {\ndocument.getElementById(“img1”).volume = parseFloat(document.getElementById(“vol”).value);\n}\n<\/script>\n </html>’;

document.getElementById(“ta”).value = savstr;
document.getElementById(“ta”).style.visibility=”visible”;
document.getElementById(“ta”).focus();
document.getElementById(“ta”).select();
success = document.execCommand(“copy”);
}

function ld() {
fldr = document.getElementById(“s1”).value;
fname = document.getElementById(“fil”).value;
fname = fldr + fname.substr(fname.lastIndexOf(“\\”) + 1);
if (fname.indexOf(“webm”) > -1 || fname.indexOf(“mp4”) > -1) document.getElementById(“frame”).innerHTML = ‘<div id= “vid” style = “position: absolute; left: 30px; top: 30px; width: 640px”><video id=”img1″ autoplay = “true” loop=”true” controls=”true” width=”100%” ><source src=”‘ + fname + ‘”></video></div>’;
if (fldr == “SVG/”) document.getElementById(“frame”).innerHTML = ‘http://'%20+%20fname%20+%20'‘;
if (fldr != “SVG/” && fname.indexOf(“webm”) == -1 && fname.indexOf(“mp4”) == -1) document.getElementById(“frame”).innerHTML = ‘<img id=”img1″ src=”‘ + fname + ‘” style = “position: absolute; left: 30px; top: 30px; width: 640px” />’;
//alert(document.getElementById(“frame”).innerHTML);
}

function drw() {
ht = img1.clientHeight;
wd = img1.clientWidth;
if (fname.indexOf(“svg”) == -1) {
if (img1.clientWidth / img1.clientHeight >= 1.5) {

if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) > -1) {
document.getElementById(“vid”).style.width = “900px”;
document.getElementById(“vid”).style.height = 900 * (ht/wd) + “px”;
} else if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) == -1) {
document.getElementById(“img1”).style.width = “900px”;
document.getElementById(“img1”).style.height = 900 * (ht/wd) + “px”;
}

} else if (img1.clientWidth >img1.clientHeight) {
if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) > -1) {
document.getElementById(“vid”).style.width = “800px”;
document.getElementById(“vid”).style.height = 800 * (ht/wd) + “px”;
} else if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) == -1) {
document.getElementById(“img1”).style.width = “800px”;
document.getElementById(“img1”).style.height = 800 * (ht/wd) + “px”;
}

} else if (fname.indexOf(“svg”) == -1) {
if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) > -1) {
document.getElementById(“vid”).style.height = “600px”;
document.getElementById(“vid”).style.width = 600 * (wd/ht) + “px”;
} else if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) == -1) {
document.getElementById(“img1”).style.height = “600px”;
document.getElementById(“img1”).style.width = 600 * (wd/ht) + “px”;
}
}
}
if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) > -1) {
ht =parseInt(document.getElementById(“vid”).style.height.substr(0, document.getElementById(“vid”).style.height.length – 2));
wd = parseInt(document.getElementById(“vid”).style.width.substr(0, document.getElementById(“vid”).style.width.length – 2));
ht2 =parseInt(document.getElementById(“vid”).style.height.substr(0, document.getElementById(“vid”).style.height.length – 2));
wd2 = parseInt(document.getElementById(“vid”).style.width.substr(0, document.getElementById(“vid”).style.width.length – 2));
} else {
ht = img1.clientHeight;
ht2 = img1.clientHeight;
wd = img1.clientWidth;
wd2 = img1.clientWidth;
}

//alert(wd2);

document.getElementById(“svg1”).style.width = wd + “px”;
document.getElementById(“svg1”).style.height = ht + “px”;
document.getElementById(“svg1″).innerHTML = ‘<defs><pattern id=”noise” width=”2″ height=”2″ patternUnits=”userSpaceOnUse”><rect x=”1″ y=”1″ width=”1″ height=”1″ style=”fill:#000000; fill-opacity:1; stroke:none”></rect></pattern></defs> <rect x=”0″ y = “0” width=”‘ + wd + ‘” height=”‘ + ht + ‘” fill=”url(#noise)” stroke=”none” /> ‘;
document.getElementById(“svg2”).innerHTML = ‘<rect x = “0” y = “0” width = “‘ + (wd + 60) + ‘” height= “‘ + (ht + 60) + ‘” fill = “none” stroke=”rgb(0,0,0)” stroke-width=”1″ stroke-opacity=”.5″ />’;
for (var i = 1; i < 30; i ++) {
lft ++
tp ++;
wd -= 2;
ht -=2;
r += 8;
g += 8;
b += 8;
if ( i < 27) {
op = .5;
} else {
op = .6;
}
document.getElementById(“svg2″).innerHTML += ‘<rect id=”rect1” x = “‘ + lft + ‘” y = “‘ + tp + ‘” width = “‘ + (wd + 60) + ‘” height= “‘ + (ht + 60) + ‘” fill = “none” stroke=”rgb(‘ + r + ‘,’ + g + ‘,’ + b + ‘)” stroke-width=”1″ stroke-opacity=”‘ + op + ‘” />’;
}
document.getElementById(“frame”).style.height = (ht2 + 60) + “px”;
document.getElementById(“frame”).style.width = (wd2 + 60) + “px”;
document.getElementById(“svg2”).style.height = (ht2 + 60) + “px”;
document.getElementById(“svg2”).style.width = (wd2 + 60) + “px”;
}
</script>

</body></html>


The big t string is placed in a textarea, which can be saved to a html file.
Here is the file for the video shown:

<html> <input type=”button” id=”b4″ name=”b4″ style=”position: absolute; left: 1010px” value=”Pause/Play” onclick=”ps();” /> <input type=”button” id=”b5″ name=”b5″ style=”position: absolute; left: 1100px” value=”Controls On/Off” onclick=”ctl();”/> <select id=”vol” size=”22″ style=”position: absolute; left: 1010px; top: 40px” onchange=’vlm();’></select><dlv id=”frame” style=”position: absolute; left: 10px; top: 10px; width:860px; height:660px; background: #771111″ ><div id=”vid” style=”position: absolute; left: 30px; top: 30px; width: 800px; height: 600px;”><video id=”img1″ autoplay=”true” loop=”true” controls=”true” style=”width: 800px; height: 600px;”><source src=”../Debut/Wondershare/MP4/HHHClip.webm”></video></div> </div> <svg id=”svg1″ style=”position: absolute; left: 30px; top: 30px; width:800px; height:600px” ><defs><pattern id=”noise” width=”2″ height=”2″ patternUnits=”userSpaceOnUse”><rect x=”1″ y=”1″ width=”1″ height=”1″ style=”fill:#000000; fill-opacity:1; stroke:none”></rect></pattern></defs> <rect x=”0″ y=”0″ width=”800″ height=”600″ fill=”url(#noise)” stroke=”none”></rect> </svg> <svg id=”svg2″ style=”position: absolute; left: 0; top: 0; width:860px; height:660px” ><rect x=”0″ y=”0″ width=”860″ height=”660″ fill=”none” stroke=”rgb(0,0,0)” stroke-width=”1″ stroke-opacity=”.5″></rect><rect id=”rect1″ x=”1″ y=”1″ width=”858″ height=”658″ fill=”none” stroke=”rgb(8,8,8)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”2″ y=”2″ width=”856″ height=”656″ fill=”none” stroke=”rgb(16,16,16)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”3″ y=”3″ width=”854″ height=”654″ fill=”none” stroke=”rgb(24,24,24)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”4″ y=”4″ width=”852″ height=”652″ fill=”none” stroke=”rgb(32,32,32)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”5″ y=”5″ width=”850″ height=”650″ fill=”none” stroke=”rgb(40,40,40)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”6″ y=”6″ width=”848″ height=”648″ fill=”none” stroke=”rgb(48,48,48)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”7″ y=”7″ width=”846″ height=”646″ fill=”none” stroke=”rgb(56,56,56)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”8″ y=”8″ width=”844″ height=”644″ fill=”none” stroke=”rgb(64,64,64)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”9″ y=”9″ width=”842″ height=”642″ fill=”none” stroke=”rgb(72,72,72)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”10″ y=”10″ width=”840″ height=”640″ fill=”none” stroke=”rgb(80,80,80)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”11″ y=”11″ width=”838″ height=”638″ fill=”none” stroke=”rgb(88,88,88)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”12″ y=”12″ width=”836″ height=”636″ fill=”none” stroke=”rgb(96,96,96)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”13″ y=”13″ width=”834″ height=”634″ fill=”none” stroke=”rgb(104,104,104)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”14″ y=”14″ width=”832″ height=”632″ fill=”none” stroke=”rgb(112,112,112)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”15″ y=”15″ width=”830″ height=”630″ fill=”none” stroke=”rgb(120,120,120)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”16″ y=”16″ width=”828″ height=”628″ fill=”none” stroke=”rgb(128,128,128)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”17″ y=”17″ width=”826″ height=”626″ fill=”none” stroke=”rgb(136,136,136)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”18″ y=”18″ width=”824″ height=”624″ fill=”none” stroke=”rgb(144,144,144)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”19″ y=”19″ width=”822″ height=”622″ fill=”none” stroke=”rgb(152,152,152)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”20″ y=”20″ width=”820″ height=”620″ fill=”none” stroke=”rgb(160,160,160)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”21″ y=”21″ width=”818″ height=”618″ fill=”none” stroke=”rgb(168,168,168)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”22″ y=”22″ width=”816″ height=”616″ fill=”none” stroke=”rgb(176,176,176)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”23″ y=”23″ width=”814″ height=”614″ fill=”none” stroke=”rgb(184,184,184)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”24″ y=”24″ width=”812″ height=”612″ fill=”none” stroke=”rgb(192,192,192)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”25″ y=”25″ width=”810″ height=”610″ fill=”none” stroke=”rgb(200,200,200)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”26″ y=”26″ width=”808″ height=”608″ fill=”none” stroke=”rgb(208,208,208)” stroke-width=”1″ stroke-opacity=”0.5″></rect><rect id=”rect1″ x=”27″ y=”27″ width=”806″ height=”606″ fill=”none” stroke=”rgb(216,216,216)” stroke-width=”1″ stroke-opacity=”0.6″></rect><rect id=”rect1″ x=”28″ y=”28″ width=”804″ height=”604″ fill=”none” stroke=”rgb(224,224,224)” stroke-width=”1″ stroke-opacity=”0.6″></rect><rect id=”rect1″ x=”29″ y=”29″ width=”802″ height=”602″ fill=”none” stroke=”rgb(232,232,232)” stroke-width=”1″ stroke-opacity=”0.6″></rect> </svg> <script>
var paus = true; var ctrl = true; document.getElementById(“img1”).volume = .5;
for (var i = 0; i <= 20; i ++) {
if (i == 0) document.getElementById(“vol”).innerHTML = “<option>Choose Volume</option>”;
if (i > 0) document.getElementById(“vol”).innerHTML += “<option>” + (.05 * i).toFixed(2) + “</option>”;
}
function ctl() {
if (ctrl) {
document.getElementById(“svg1”).style.visibility = “hidden”;
document.getElementById(“svg2”).style.visibility = “hidden”;
ctrl = false;
} else {
document.getElementById(“svg1”).style.visibility = “visible”;
document.getElementById(“svg2”).style.visibility = “visible”;
ctrl = true;
}
}
function ps() {
if (paus) {
document.getElementById(“img1”).play();
paus=false;
} else {
document.getElementById(“img1”).pause();
paus = true;
}
}
</script>
</html>


The string that creates that file is the following:
var savstr = ‘<html> <input type=”button” id=”b4″ name=”b4″ style=”position: absolute; left: 1010px” value=”Pause/Play” onclick=”ps();” /> <input type=”button” id=”b5″ name=”b5″ style=”position: absolute; left: 1100px” value=”Controls On/Off” onclick=”ctl();”/> <select id=”vol” size=”22″ style=”position: absolute; left: 1010px; top: 40px” onchange=\’vlm();\’></select><dlv id=”frame” style=”position: absolute; left: 10px; top: 10px; width:’ + (wd2 + 60) + ‘px; height:’ + (ht2 + 60) + ‘px; background: #771111″ >’ + document.getElementById(“frame”).innerHTML + ‘ </div> <svg id=”svg1″ style=”position: absolute; left: 30px; top: 30px; width:’ + (wd2) + ‘px; height:’ + (ht2) + ‘px” >’ + document.getElementById(“svg1″).innerHTML + ‘ </svg> <svg id=”svg2″ style=”position: absolute; left: 0; top: 0; width:’ + (wd2 + 60) + ‘px; height:’ + (ht2 + 60) + ‘px” >’ + document.getElementById(“svg2”).innerHTML + ‘ </svg> <script>\nvar paus = true; var ctrl = true; document.getElementById(“img1”).volume = .5;\nfor (var i = 0; i <= 20; i ++) {\nif (i == 0) document.getElementById(“vol”).innerHTML = “<option>Choose Volume</option>”;\nif (i > 0) document.getElementById(“vol”).innerHTML += “<option>” + (.05 * i).toFixed(2) + “</option>”;\n}\nfunction ctl() {\nif (ctrl) {\ndocument.getElementById(“svg1”).style.visibility = “hidden”;\ndocument.getElementById(“svg2”).style.visibility = “hidden”;\nctrl = false;\n } else {\ndocument.getElementById(“svg1”).style.visibility = “visible”;\ndocument.getElementById(“svg2”).style.visibility = “visible”;\nctrl = true;\n}\n}\n function ps() {\nif (paus) {\ndocument.getElementById(“img1”).play();\npaus=false;\n} else {\ndocument.getElementById(“img1”).pause();\npaus = true;\n}\n}\nfunction vlm() {\ndocument.getElementById(“img1”).volume = parseFloat(document.getElementById(“vol”).value);\n}\n<\/script>\n </html>’;

Another thing I want to discuss is the sizing, which is different for portrait or landscape images or wide videos, and also if the width is more than 1.5 times the height, created in the function drw().

For videos and wider images:
if (img1.clientWidth / img1.clientHeight >= 1.5) {

if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) > -1) {
document.getElementById(“vid”).style.width = “900px”;
document.getElementById(“vid”).style.height = 900 * (ht/wd) + “px”;
} else if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) == -1) {
document.getElementById(“img1”).style.width = “900px”;
document.getElementById(“img1”).style.height = 900 * (ht/wd) + “px”;
}
}

For landscape images:
else if (img1.clientWidth >img1.clientHeight) {
if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) > -1) {
document.getElementById(“vid”).style.width = “800px”;
document.getElementById(“vid”).style.height = 800 * (ht/wd) + “px”;
} else if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) == -1) {
document.getElementById(“img1”).style.width = “800px”;
document.getElementById(“img1”).style.height = 800 * (ht/wd) + “px”;
}

For portrait images and narrow videos:
else if (fname.indexOf(“svg”) == -1) {
if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) > -1) {
document.getElementById(“vid”).style.height = “600px”;
document.getElementById(“vid”).style.width = 600 * (wd/ht) + “px”;
} else if (document.getElementById(“frame”).innerHTML.indexOf(“vid”) == -1) {
document.getElementById(“img1”).style.height = “600px”;
document.getElementById(“img1”).style.width = 600 * (wd/ht) + “px”;
}
}

The frame and svg element are set wider and higher than the image by 30 pixels on each side:
document.getElementById(“frame”).style.height = (ht2 + 60) + “px”;
document.getElementById(“frame”).style.width = (wd2 + 60) + “px”;
document.getElementById(“svg2”).style.height = (ht2 + 60) + “px”;
document.getElementById(“svg2”).style.width = (wd2 + 60) + “px”;

Finally, the video is equipped with a control, but it is inaccessible due to being covered by the svg. Therefore, the is a button that temporarily hides the svg so the control can be used:

function ctl() {
if (ctrl) {
document.getElementById(“svg1”).style.visibility = “hidden”;
document.getElementById(“svg2”).style.visibility = “hidden”;
ctrl = false;
} else {
document.getElementById(“svg1”).style.visibility = “visible”;
document.getElementById(“svg2”).style.visibility = “visible”;
ctrl = true;
}
}

HTML Control Parent Window from Child Window

Leave a comment


This app inserts a table from a child window into its parent.

Here is how it looks at the start:

After Double clicking the table in the child window:

To try Click

It uses an iframe so the are 2 files. This is the parent:

Since it involves cross scripting it must be run from a server.

<html>
<head>
<title>IFrame</title>
</head>
<body>
<center>
<table id= “tb” border=”2px” bordercolor=”blue” ><tr><td>test</td></tr></table><br /><br />
http://Child.html<br />
</center>

<script type=”text/javascript”>

function getValue(val) {
document.getElementById(“tb”).innerHTML = val;
}
</script>
</body>
</html>


This is the child file:

<html>
<head>
<title>IFrame Example</title>
</head>
<body>

<center><h1><font color=”#000099″>IFRAME</font></h1>

<table id= “tb1″ border=”2” contenteditable = “true” ondblclick=’scr();’ >
<tr><td > A New Test </td><td > New Test 2</td><td > New Test 3</td></tr>
<tr><td > New Test 4</td><td > New Test 5</td><td > New Test 6</td></tr>
</table></center>

<script type=”text/javascript”>
function scr() {
parent.getValue(document.getElementById(“tb1”).innerHTML);
}
</script>
</body></html>

</div>
</html>


This parent sets up the iframe and gets the value frim the child:
function getValue(val) {
document.getElementById(“tb”).innerHTML = val;
}

The child sends the table by way of scr() This is done by double clicking the table:
function scr() {
parent.getValue(document.getElementById(“tb1”).innerHTML);
}

HTML Scrolling Panorama Viewer

Leave a comment


These two html files scroll a 360° panoramic image.

Here is a still appearance of the app:

It is best appreciated by actually viewing it. Click

Here is the first file which creates an Iframe and selects and passes the image to the second file:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head profile=”http://gmpg.org/xfn/11″&gt;
<title>Panoramas</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;background: black}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#divf2{position:absolute;width:100%;height:230px;left:0;top:15%;border-width:0px;border-style:ridge;background-color:#ccaa77;visibility:visible;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:-0px 0px 16px rgba(0,0,0,1);-webkit-box-shadow:-0px 0px 16px rgba(0,0,0,1);box-shadow:-0px 0px 16px rgba(0,0,0,1);}
#f2{position:absolute; width:98%; height: 90%; left: 1%;top:5%; border-width:0;}
</style>

</head>
<body>
<center><select id=”s1″ name=”s1″ onchange=’setSrc();’>
<option >Choose Image</option>
<option >PI5.jpg</option>
<option >PI7.jpg</option>
</select></center>
<div id=”divf2″>
<IFrame id=”f2″ name=”I2″ scrolling=”no”></IFrame>
</div>

<script type=”text/javascript”>
function setSrc() {
document.getElementById(“f2”).src = “pan2.html?im=” + document.getElementById(“s1”).value;
}
</script>
</body></html>

here is the second file which displays and scrolls the image :

<!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Transitional//EN’ ‘http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd’&gt;
<html xmlns=’http://www.w3.org/1999/xhtml’&gt;
<head profile=’http://gmpg.org/xfn/11′&gt;
<title>Panoramas</title>
<style type=’text/css’>
body {margin-left:0;margin-right:0;font:normal normal normal 12px Arial; background: black}
a{ text-decoration: }
:link { color: rgb(255, 255, 255) }
:visited {color :rgb(255, 255,255) }
:hover { }
:active { }
#layer1{position:absolute;width:200%;left:0%;top:0%;border-width:0;font:normal normal normal 12px Arial;}
#layer2{position:absolute;width:200%;left:200%;top:0%;border-width:0;font:normal normal normal 12px Arial;}
</style>
</head>
<body onload=’setImage();’>

<p></p>
<div id=’layer1′></div>
<div id=’layer2′></div>

<script type=’text/javascript’>
var pos1 =0; var pos2 =200; var s;

function setImage() {
im = window.location.search.substr(4);
document.getElementById(“layer1″).innerHTML = ‘<img src=”‘ + im + ‘” width=”200%” />’;
document.getElementById(“layer2″).innerHTML = ‘<img src=”‘ + im + ‘” width=”200%” />’;
setTimeout(“direct1()”, 200);
}

function hideLayer(layerName){
document.getElementById(layerName).style.visibility=’hidden’;
}

function showLayer(layerName){
document.getElementById(layerName).style.visibility=’visible’;
}
function direct1() {
s= setInterval(“move1()”, 3);
}
function move1() {
document.getElementById(‘layer1′).style.width=’100%’;
document.getElementById(‘layer1’).style.borderWidth=”0″;
hideLayer(“layer1”);
pos1 -= .01;
str1 = pos1.toString().concat(“%”);
document.getElementById(‘layer1’).style.left=str1;
document.getElementById(‘layer2′).style.width=’100%’;
document.getElementById(‘layer2’).style.borderWidth=”0″;
hideLayer(“layer2”);
pos2 -= .01;
str2 = pos2.toString().concat(“%”);
document.getElementById(‘layer2’).style.left=str2;
if (pos1 < -200 ){pos1 = pos2 + 200;}if (pos1 > 100 | pos1 < -200) {hideLayer(“layer1”);}
if (pos1<100 & pos1> -200) {showLayer(“layer1”);}
if (pos2 < -200 ){pos2 = pos1 + 200;}if (pos2 > 100 | pos2 < -200) {hideLayer(“layer2”);}
if (pos2<100 & pos2> -200) {showLayer(“layer2”);}
}
</script>
</body></html>


It could have been created as a single file without the iframe, bug I think it is neater this way.

The main part of the first file us the creation of the iframe:
<div id=”divf2″>
<IFrame id=”f2″ name=”I2″ scrolling=”no”></IFrame>
</div>

In order to pass the image file name set by a select value it is necessary to set the iframe src by means of a script function which is called by a select change:
function setSrc() {
document.getElementById(“f2”).src = “pan2.html?im=” + document.getElementById(“s1”).value;
}

The second file receives the URL query and uses window.location.search, which yields the entire query string.
A variable is set up by parsing the string.
With only one value passed, this is easy:
im = window.location.search.substr(4);

The image is placed in two layers, one set at the end of the other:
#layer1{position:absolute;width:200%;left:0%;top:0%;border-width:0;font:normal normal normal 12px Arial;}
#layer2{position:absolute;width:200%;left:200%;top:0%;border-width:0;font:normal normal normal 12px Arial;}

The function that places the image in the layers is setImage();
function setImage() {
im = window.location.search.substr(4);
document.getElementById(“layer1″).innerHTML = ‘<img src=”‘ + im + ‘” width=”200%” />’;
document.getElementById(“layer2″).innerHTML = ‘<img src=”‘ + im + ‘” width=”200%” />’;
setTimeout(“direct1()”, 200);
}

direct1 starts the scrolling but cannot work until the images are loaded, so a slight delay is put in:
setTimeout(“direct1()”, 200);

direct1() is a timer that calls move1():
function direct1() {
s= setInterval(“move1()”, 3);
}

function move1() {
document.getElementById(‘layer1′).style.width=’100%’;
document.getElementById(‘layer1’).style.borderWidth=”0″;
hideLayer(“layer1”);
pos1 -= .01;
str1 = pos1.toString().concat(“%”);
document.getElementById(‘layer1’).style.left=str1;
document.getElementById(‘layer2′).style.width=’100%’;
document.getElementById(‘layer2’).style.borderWidth=”0″;
hideLayer(“layer2”);
pos2 -= .01;
str2 = pos2.toString().concat(“%”);
document.getElementById(‘layer2’).style.left=str2;
if (pos1 < -200 ){pos1 = pos2 + 200;}if (pos1 > 100 | pos1 < -200) {hideLayer(“layer1”);}
if (pos1<100 & pos1> -200) {showLayer(“layer1”);}
if (pos2 < -200 ){pos2 = pos1 + 200;}if (pos2 > 100 | pos2 < -200) {hideLayer(“layer2”);}
if (pos2<100 & pos2> -200) {showLayer(“layer2”);}
}

The two layers are synchronously moved to the left:
pos1 -= .01;
str1 = pos1.toString().concat(“%”);
document.getElementById(‘layer1’).style.left=str1;
pos2 -= .01;
str2 = pos2.toString().concat(“%”);
document.getElementById(‘layer2′).style.left=str2;

Both layers are initially hidden and alternately exposed within limiting positions.
When a layer is hidden it is simultaneously placed at the end of the other:
if (pos1 < -200 ){pos1 = pos2 + 200;}if (pos1 > 100 | pos1 < -200) {hideLayer(“layer1”);}
if (pos1<100 & pos1> -200) {showLayer(“layer1”);}
if (pos2 < -200 ){pos2 = pos1 + 200;}if (pos2 > 100 | pos2 < -200) {hideLayer(“layer2”);}
if (pos2<100 & pos2> -200) {showLayer(“layer2”);}

hideLayer() and showLayer() are functions for changing the visibility of an element:
function hideLayer(layerName){
document.getElementById(layerName).style.visibility=’hidden’;
}

function showLayer(layerName){
document.getElementById(layerName).style.visibility=’visible’;
}

HTML App to Convert Table to CSV File

Leave a comment


This app takes a table and converts ir to a csv file so it can be imported into a spreadsheet. It can do it for either an interactively created table or one copied from a web page.

Here is an example:

As you see it can take functions. This function is made to work with Libre Office Calc. In a future post I may try to generalize it.

Here is an example of a table copy. The table is copied and pasted into the division below the line. Double clicking tranfers it to the table on top:


This is the first example converted to a spreadsheet:

You will notice the interactive form has cell notations. Since spreadsheets already have them, they will have to be removed on conversion, something not necessary for the second type.

This is the code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head profile=”http://gmpg.org/xfn/11″&gt;
<title>Table2CSV</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 18px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
table{border: 1px solid black}
td{ border: 1px solid black; padding: 5px}
#cpy{width: 100%; border: 1px solid black; height: 400px}
</style>
</head>
<body>
<center><select id=”s1″ name=”s1″>
<option>Formula</option>
<option>=Product( , )</option>
</select> <select id=”s2″ name=”s2″ onchange=’cnvrt();’>
<option>Conversion Type</option>
<option>Interactive</option>
<option>Non Interactive</option>
</select><br/><br />
<table id= “tbl1” contenteditable = “true” >
<tr><td> </td><td>A </td><td>B </td><td>C </td><td>D </td></tr>
<tr><td>1 </td><td id=”a1″ ondblclick=’insrt(“a1″);’> </td><td id=”b1” ondblclick=’insrt(“b1″);’> </td><td id=”c1” ondblclick=’insrt(“c1″);’> </td><td id=”d1” ondblclick=’insrt(“d1″);’> </td></tr>
<tr><td>2 </td><td id=”a2” ondblclick=’insrt(“a2″);’> </td><td id=”b2” ondblclick=’insrt(“b2″);’> </td><td id=”c2” ondblclick=’insrt(“c2″);’> </td><td id=”d2” ondblclick=’insrt(“d2″);’> </td></tr>
<tr><td>3 </td><td id=”a3” ondblclick=’insrt(“a3″);’> </td><td id=”b3” ondblclick=’insrt(“b3″);’> </td><td id=”c3” ondblclick=’insrt(“c3″);’> </td><td id=”d3” ondblclick=’insrt(“d3″);’> </td></tr>
</table><br />
<div id=”cpy” contenteditable=”true” ondblclick=’transfr();’></div>
</center>

<script type=”text/javascript”>
var a; var b = -1; var str = “”; var c; var oldURL = “tmp.csv”; var str1 = “”;

function transfr() {
var strtmp = document.getElementById(“cpy”).innerHTML;
strtmp = strtmp.replace(new RegExp(‘<div>’, ‘g’),”);
strtmp = strtmp.replace(new RegExp(‘</div>’, ‘g’),”);
strtmp = strtmp.replace(new RegExp(‘<‘, ‘g’),'<‘);
strtmp = strtmp.replace(new RegExp(‘>’, ‘g’),’>’);
document.getElementById(“tbl1”).innerHTML = strtmp;
}

function insrt(v) {
document.getElementById(v).innerHTML = document.getElementById(“s1”).value;
}

function cnvrt() {
//alert(document.getElementById(“cpy”).innerHTML);
str = “”;
if (document.getElementById(“s2”).selectedIndex == 1) {
str1 = “<td id”;
} else if (document.getElementById(“s2”).selectedIndex == 2) {
str1 = “<td”;
}

for (var i = 1; i <= 1000000; i ++) {
a = document.getElementById(“tbl1”).innerHTML.indexOf(str1, b + 1);
if (i == 1) c = a;
if (i > 1 && a <= c) {
break;
}
b = a;
a = document.getElementById(“tbl1”).innerHTML.indexOf(“>”, b + 1);
b = a;
a = document.getElementById(“tbl1”).innerHTML.indexOf(“</td”, b + 1);
str += document.getElementById(“tbl1”).innerHTML.substr(b + 1, a – (b + 1));
if( document.getElementById(“tbl1”).innerHTML.indexOf(“</tr”, a + 1) == a + 5) {
str += “\n”;
} else {
str += “~”;
}
b = a;
}
//alert(str);
document.getElementById(“s2″).selectedIndex == 0;
sve();
}

function sve() {
var textToSave = str;
var textToSaveAsBlob = new Blob([textToSave], {type:”text/plain”});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
fileNameToSaveAs = prompt(“FileName to save as”,oldURL);
oldURL = fileNameToSaveAs;
var downloadLink = document.createElement(“a”);
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = “Download File”;
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = “none”;
document.body.appendChild(downloadLink);
downloadLink.click();
}

function destroyClickedElement(event) {
document.body.removeChild(event.target);
}
</script>
</body></html>


The function transfr() places the copied table:
function transfr() {
var strtmp = document.getElementById(“cpy”).innerHTML;
strtmp = strtmp.replace(new RegExp(‘<div>’, ‘g’),”);
strtmp = strtmp.replace(new RegExp(‘</div>’, ‘g’),”);
strtmp = strtmp.replace(new RegExp(‘<‘, ‘g’),'<‘);
strtmp = strtmp.replace(new RegExp(‘>’, ‘g’),’>’);
document.getElementById(“tbl1”).innerHTML = strtmp;
}

A string is created from the contents of the division, some reformatting is done and the string is placed in the table,

The formula is placed in the table cell by the function insrt():
function insrt(v) {
document.getElementById(v).innerHTML = document.getElementById(“s1”).value;
}

It is called by double clicking the chosen cell.

The conversion is done by convrt():
function cnvrt() {
//alert(document.getElementById(“cpy”).innerHTML);
str = “”;
if (document.getElementById(“s2”).selectedIndex == 1) {
str1 = “<td id”;
} else if (document.getElementById(“s2”).selectedIndex == 2) {
str1 = “<td”;
}

for (var i = 1; i <= 1000000; i ++) {
a = document.getElementById(“tbl1”).innerHTML.indexOf(str1, b + 1);
if (i == 1) c = a;
if (i > 1 && a <= c) {
break;
}
b = a;
a = document.getElementById(“tbl1”).innerHTML.indexOf(“>”, b + 1);
b = a;
a = document.getElementById(“tbl1”).innerHTML.indexOf(“</td”, b + 1);
str += document.getElementById(“tbl1”).innerHTML.substr(b + 1, a – (b + 1));
if( document.getElementById(“tbl1”).innerHTML.indexOf(“</tr”, a + 1) == a + 5) {
str += “\n”;
} else {
str += “~”;
}
b = a;
}
//alert(str);
document.getElementById(“s2”).selectedIndex == 0;
sve();
}

Depending on whether the table is interactive or not str is searched for the first cell:
if (document.getElementById(“s2”).selectedIndex == 1) {
str1 = “<td id”;
} else if (document.getElementById(“s2”).selectedIndex == 2) {
str1 = “<td”;
}
The cell notations do not have id’s, so they can be removed by including id in the search string.

An escape is put in so the search can include a large number of characters:
for (var i = 1; i <= 1000000; i ++) {
a = document.getElementById(“tbl1”).innerHTML.indexOf(str1, b + 1);
if (i == 1) c = a;
if (i > 1 && a <= c) {
break;
}

To allow for the id or any formatting included in the <td tag, the end of the tag is made the new starting point:
b = a;
a = document.getElementById(“tbl1”).innerHTML.indexOf(“>”, b + 1);
b = a;

The </td> tag is the end of the selection:
a = document.getElementById(“tbl1”).innerHTML.indexOf(“</td”, b + 1);
str += document.getElementById(“tbl1”).innerHTML.substr(b + 1, a – (b + 1));

If the row is ended a line feed is added, otherwise a delimiting character is added:
if( document.getElementById(“tbl1”).innerHTML.indexOf(“</tr”, a + 1) == a + 5) {
str += “\n”;
} else {
str += “~”;
}

Since commas are often included in the cells, they are not good delimiters since they would cause premature spreadsheet cell changes.
I therefore use a less common delimiter,

Finally the code loops to the next selection:
b = a;
}

After the loop has been escaped the string is saved as a csv file:
sve();