<!DOCTYPE HTML> <html> <head> <title>Pannellum Embed Configuration</title> <meta charset="utf-8"> <link type="text/css" rel="Stylesheet" href="css/pannellum.css" /> <script> function processForm (form) { var id = 'pannellum_' + randomString(); var embed_code = document.getElementById('embed_code'); embed_code.innerHTML = '<iframe title="pannellum panorama viewer"' + ' width="' + escape(form.embed_width.value) + '" height="' + escape(form.embed_height.value) + '" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + ' style="border-style:none;"' + ' id="' + escape(id) + '" src="' + escape(form.pannellum_url.value) + '?' + 'panorama=' + escape(form.pano_url.value); if(form.use_logo.checked) { embed_code.innerHTML += '&amp;logo=yes'; } if(form.pano_title.value != '') { embed_code.innerHTML += '&amp;title=' + escape(form.pano_title.value); } if(form.pano_author.value != '') { embed_code.innerHTML += '&amp;author=' + escape(form.pano_author.value); } if(form.autoload.checked) { embed_code.innerHTML += '&amp;autoload=yes'; } if(form.autorotate.value != 'none') { embed_code.innerHTML += '&amp;autorotate=' + escape(form.autorotate.value); } if(form.license.value > -1) { embed_code.innerHTML += '&amp;license=' + escape(form.license.value); } if(form.fallback_url.value != '') { embed_code.innerHTML += '&amp;fallback=' + escape(form.fallback_url.value); } if(form.fov.value != 0) { embed_code.innerHTML += '&amp;fov=' + escape(form.fov.value); } if(form.lat.value != 0) { embed_code.innerHTML += '&amp;lat=' + escape(form.lat.value); } if(form.lon.value != 0) { embed_code.innerHTML += '&amp;lon=' + escape(form.lon.value); } if(form.preview_url.value != '') { embed_code.innerHTML += '&amp;preview=' + escape(form.preview_url.value); } if(form.haov.value != 0) { embed_code.innerHTML += '&amp;haov=' + escape(form.haov.value); } if(form.vaov.value != 0) { embed_code.innerHTML += '&amp;vaov=' + escape(form.vaov.value); } if(form.voffset.value != 0) { embed_code.innerHTML += '&amp;voffset=' + escape(form.voffset.value); } embed_code.innerHTML += '"></iframe>'; return false; } function randomString() { var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; var randomstring = ''; for (var i=0;i<10;i++) { var rnum = Math.floor(Math.random() * chars.length); randomstring += chars.substring(rnum,rnum+1); } return randomstring; } </script> </head> <body> <form name="embed_gen_form" onsubmit="return processForm(embed_gen_form); return false;"> Pannellum Location:<br> <input name="pannellum_url" placeholder="pannellum.htm Location" required><p> Panorama URL:<br> <input name="pano_url" placeholder="Image File" required><p> Panorama Preview URL (optional):<br> <input name="preview_url" placeholder="Image File"><p> Basic Information:<br> <input name="pano_title" placeholder="Title"> <input name="pano_author" placeholder="Author"><p> Partial Panorama (degrees) (optional):<br> <input name="haov" type="number" min="0" max="360" placeholder="Horizontal Angle of View"> <input name="vaov" type="number" min="0" max="180" placeholder="Vertical Angle of View"> <input name="voffset" type="number" min="-90" max="90" placeholder="Vertical Offset"><p> Embed Size:<br> <input name="embed_width" type="number" min="200" placeholder="Width" required> <input name="embed_height" type="number" min="150" placeholder="Height" required><p> Initial Parameters (degrees) (optional):<br> <input name="fov" type="number" min="40" max="100" placeholder="Field of View"> <input name="lat" type="number" min="-85" max="85" placeholder="Lat"> <input name="lon" type="number" min="-180" max="180" placeholder="Lon"><p> Include Pannellum Logo: <input name="use_logo" type="checkbox"><p> Auto Load: <input name="autoload" type="checkbox"><p> Auto Rotate: <select name="autorotate"> <option value="none">None</option> <option value="cw">CW</option> <option value="ccw">CCW</option> </select><p> Creative Commons License: <select name="license"> <option value="-1">None</option> <option value="0">CC BY 3.0</option> <option value="1">CC BY-SA 3.0</option> <option value="2">CC BY-ND 3.0</option> <option value="3">CC BY-NC 3.0</option> <option value="4">CC BY-NC-SA 3.0</option> <option value="5">CC BY-NC-ND 3.0</option> </select><p> URL to fall back to if WebGL is not supported:<br> <input name="fallback_url" placeholder="Fallback URL"><p> <input type="submit" value="Generate" onclick="document.getElementById('embed_code').innerHTML = ''"><p> </form> <textarea id="embed_code" style="resize: none; height:200px;" onclick="this.select()" cols="100" readonly></textarea> </body> </html>