heuzef
/
pannellum
mirror of https://github.com/mpetroff/pannellum.git

<!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 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) +
                    '" allowfullscreen' +
                    ' style="border-style:none;"' +
                    '" src="' + escape(form.pannellum_url.value) +
                    '?' +
                    'panorama=' + escape(form.pano_url.value);
                    if(form.pano_title.value != '') {
                        embed_code.innerHTML += '&amp;amp;title=' + escape(form.pano_title.value);
                    }
                    if(form.pano_author.value != '') {
                        embed_code.innerHTML += '&amp;amp;author=' + escape(form.pano_author.value);
                    }
                    if(form.autoload.checked) {
                        embed_code.innerHTML += '&amp;amp;autoLoad=true';
                    }
                    if(form.autorotate.value != 'none') {
                        embed_code.innerHTML += '&amp;amp;autoRotate=' + escape(form.autorotate.value);
                    }
                    if(form.fallback_url.value != '') {
                        embed_code.innerHTML += '&amp;amp;fallback=' + escape(form.fallback_url.value);
                    }
                    if(form.hfov.value != 0) {
                        embed_code.innerHTML += '&amp;amp;hfov=' + escape(form.hfov.value);
                    }
                    if(form.pitch.value != 0) {
                        embed_code.innerHTML += '&amp;amp;pitch=' + escape(form.pitch.value);
                    }
                    if(form.yaw.value != 0) {
                        embed_code.innerHTML += '&amp;amp;yaw=' + escape(form.yaw.value);
                    }
                    if(form.preview_url.value != '') {
                        embed_code.innerHTML += '&amp;amp;preview=' + escape(form.preview_url.value);
                    }
                    if(form.haov.value != 0) {
                        embed_code.innerHTML += '&amp;amp;haov=' + escape(form.haov.value);
                    }
                    if(form.vaov.value != 0) {
                        embed_code.innerHTML += '&amp;amp;vaov=' + escape(form.vaov.value);
                    }
                    if(form.voffset.value != 0) {
                        embed_code.innerHTML += '&amp;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="hfov" type="number" min="40" max="100" placeholder="Horizontal Field of View"> <input name="pitch" type="number" min="-85" max="85" placeholder="Pitch"> <input name="yaw" type="number" min="-180" max="180" placeholder="Yaw"><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>
            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>