将 Find Pano 功能添加到 Kolor Panotour

Question

我用一个叫Kolor的程序做了一张全景图。所以我正在尝试添加查找全景图功能，该功能正在搜索全景图的图像，以便可以显示它们。我找到了一个包含搜索功能的 HTML 文件，但似乎知道如何将其与原始 html 文件合并。在帮助论坛中，它没有任何帮助。这是找到的全景文件：

<style type="text/css">
            @-ms-viewport { width: device-width; }
            @media only screen and (min-device-width: 800px) { html { overflow: hidden; } }
            * { padding: 0; margin: 0; }
            html { height: 100%; }
            body { height: 100%; overflow: hidden; }
            div#container { height: 100%; min-height: 100%; width: 100%; margin: 0 auto; }
            div#tourDIV {
                height: 100%;
                position: relative;
                overflow: hidden;
            }
{%include "htmlheadpanocss.tmpl" %}
            div#searchDiv {
                top: 0px;
                left: -320px;
                transition: left 0.3s;
                position: fixed;
                overflow: auto;
                z-index: 4250;
                background: #ffffff;
                padding: 20px;
                max-height: 100vh;
                max-width: 310px;
                box-shadow: 0px 0px 5px #555;
            }
            div#searchDiv.opened {
                left: 0px;
            }
            div#toggleButton {
                position: fixed;
                display: table;
                top: 20px;
                left: 20px;
                border-radius: 100px;
                padding: 10px;
                background: white;
                transition: left 0.3s, box-shadow 0.5s;
                z-index: 9999;
            }
            div#toggleButton p {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
            div#toggleButton img.inactive {
                display: none;
            }
            div#toggleButton img {
                /* icon size */
                width: 20px;
                height: auto;
            }
            div#toggleButton:hover {
                cursor: pointer;
                box-shadow: 2px 2px 30px 5px #222;
            }
            div#toggleButton.opened {
                left: 320px;
                background: white;
            }
            #resultList, #resultDiv {
                padding-top: 20px;
            }
            #mainForm.hasScrolled {
                position: fixed;
                top: 0px;
                left: 0px;
                padding: 20px;
                background-color: white;
                max-width: 300px;
                z-index: 99;
            }
            #mainForm #fixedResultsHeader {
                display: none;
            }
            #mainForm.hasScrolled #fixedResultsHeader {
                display: block;
                padding-top: 20px;
            }
            .list-group-item {
                border: none;
                border-top:1px solid #eee;
                padding: 10px 10px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .list-group-item:first-child {
                border-radius: 0px;
            }
            .list-item-thumb {
                width: 100%;
            }
            /*fix box sizing*/
            div.kolorBox,
            ul.kolorMenu li.kolorMenuItem>p {
                box-sizing: content-box;
                -webkit-box-sizing: content-box;
                -moz-box-sizing: content-box;
                -ms-box-sizing: content-box;
                -o-box-sizing: content-box;
            }
        </style>
{%include "htmlheadscripts.tmpl" %}
    </head>
    <body>
        <script type="text/javascript">
          var panos = [
{% for group in project.panoGroups %}{% for pano in group.panos %}
        { id:"{{pano.tourId}}" , name:"{{pano.description.name}}", description:"{{pano.description.description|striphtmltags}}", thumb:"./{{dataDirectory}}/{{pano.thumbnailPath}}" },
{% endfor %}{% endfor %}
            ];
            function resetsearch() {
                document.getElementById('resultDiv').style.display = "none";
                document.getElementById('texttosearch').innerHTML = "";
            }
            function finddesiredspot() {
                if (texttosearch.value == "")
                {
                    alert("Empty string");
                    return;
                }
                var found = false;
                var foundpanos = [];
                for (i = 0; i < panos.length; i++) {
                        if (kindofsearch.value == "name")
                        {
                            if (panos[i].name.toLowerCase().indexOf(texttosearch.value.toLowerCase()) > -1)
                            {
                                found = true;
                                foundpanos.push(panos[i]);
                            }
                        }
                        if (kindofsearch.value == "description")
                        {
                            if (panos[i].description.toLowerCase().indexOf(texttosearch.value.toLowerCase()) > -1)
                            {
                                found = true;
                                foundpanos.push(panos[i]);
                            }
                        }
                }
                if (found)
                {
                    if (foundpanos.length == 1)
                    {
                        document.getElementById('resultDiv').style.display = "none";

                        var callstr = "mainloadscene(" + foundpanos[0].id + ")";
                        getTemplateTourPlayer().call(callstr);
                        callstr = "looktohotspot(" + foundpanos[0].id + ")";
                        getTemplateTourPlayer().call(callstr);
                    }
                    else
                    {
                        document.getElementById('resultDiv').style.display = "block";

                        var resultsStr = "<div class='list-group'>";
                        for (i = 0 ; i < foundpanos.length ; i++)
                        {
                            resultsStr += "<a href='#' class='list-group-item' onclick=\"getTemplateTourPlayer().call('mainloadscene(" + foundpanos[i].id + ")');\"><img class='list-item-thumb' src=\""+ foundpanos[i].thumb + "\"/><strong>" + foundpanos[i].name + "</strong>";
                        }
                        resultsStr += "</ul>";
                        document.getElementById('resultList').innerHTML = resultsStr;
                    }
                }
                else
                {
                        document.getElementById('resultDiv').style.display = "block";
                        document.getElementById('resultList').innerHTML = "No Result found";
                }
            }
            var templatetourplayer = null;
            function getTemplateTourPlayer() {if ( templatetourplayer == null ) {templatetourplayer = document.getElementById('krpanoSWFObject');}return templatetourplayer;}

        </script>
        <div id="container">
{% comment %}<!-- tourDIV is used to display the VR viewer and all plugins which can be displayed in Fullscreen mode -->{% endcomment %}
            <div id="tourDIV">
{%include "htmlpanodiv.tmpl" %}
{%include "pluginshtmltemplates.tmpl" %}
{%include "htmlembedpanoscript.tmpl" %}
                <div id="toggleButton">
                    <p>
                        <img src="img/ic_search_48px.svg" alt="toggle button">
                        <img src="img/ic_close_48px.svg" alt="toggle button" class="inactive">
                    </p>
                </div>
                <div id="searchDiv">
                    <div id="mainForm">
                        <div class="input-group">
                            <input type="text" id="texttosearch" class="form-control" placeholder="Text to search">
                            <span class="input-group-btn">
                                <button id="searchbutton" type="button" onclick="finddesiredspot()" class="btn btn-primary">Search</button>
                            </span>
                        </div>
                        <br>
                        <label>Search field</label>
                        <select id="kindofsearch" class="form-control">
                          <option value="name">Name</option>
                          <option value="description">Description</option>
                        </select>
                        <br>
                        <div id="fixedResultsHeader">
                            <span>Search results</span>
                            <button id="resetbutton" type="button" onclick="resetsearch()" class="btn btn-xs pull-right btn-primary">Reset</button>
                        </div>

                    </div>
                    <div id="resultDiv" style="display:none">
                        <span>Search results</span>
                        <button id="resetbutton" type="button" onclick="resetsearch()" class="btn btn-xs pull-right btn-primary">Reset</button>
                        <div id="resultList">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/bootstrap.min.js"></script>
        <script>
        jQuery(document).ready(function(){
            jQuery('#toggleButton').on('click', function(){
                jQuery('#searchDiv, #toggleButton').toggleClass('opened');
                jQuery('#toggleButton img').toggleClass('inactive');
            });
            var $document = jQuery('#searchDiv'),
                $element = $('#mainForm'),
                className = 'hasScrolled';
            $document.scroll(function() {
              if ($document.scrollTop() >= 250) {
                // user scrolled 50 pixels or more;
                // do stuff
                $element.addClass(className);
              } else {
                $element.removeClass(className);
              }
            });
        });
        </script>
    </body>

这里是应该搜索的文件：

<div id="container">     
            <div id="tourDIV">
                <div id="panoDIV">
                    <noscript>

                        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="Jordan360 Test Planedata/Jordan360 Test Plane">
                            <param name="movie" value="Jordan360 Test Planedata/Jordan360 Test Plane.swf"/>
                            <param name="allowFullScreen" value="true"/>
                            <!--[if !IE]>-->
                            <object type="application/x-shockwave-flash" data="Jordan360 Test Planedata/Jordan360 Test Plane.swf" width="100%" height="100%">
                                <param name="movie" value="Jordan360 Test Planedata/Jordan360 Test Plane.swf"/>
                                <param name="allowFullScreen" value="true"/>
                                <!--<![endif]-->
                                <a href="http://www.adobe.com/go/getflash">
                                    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
                                </a>
                            <!--[if !IE]>-->
                            </object>
                            <!--<![endif]-->
                        </object>

                    </noscript>
                </div>

                <script type="text/javascript" src="Jordan360 Test Planedata/Jordan360 Test Plane.js"></script>
                <script type="text/javascript">
                    embedpano({

                    swf:"Jordan360 Test Planedata/Jordan360 Test Plane.swf"

                    ,target:"panoDIV"
                    ,passQueryParameters:true


                    ,wmode:"opaque"

                    });
                </script>
            </div>
        </div>

Answer 1

包含搜索功能的 html 文件旨在替代 "original" 模板文件（fullpage.html 或 generic.html），您可以在"create"-Panotour 程序中的屏幕。

为了能够从该列表中选择替换模板，将包含搜索的 zip 文件解压缩到您家中的 Kolor-html-目录中（如果是 [=33，则重新启动程序=] 已经）。

在 Linux，类似于： /home/#你的用户名-这里#/Kolor/PanotourPro 2/html

在 Windows，类似于： C:\users#你的用户名-这里#\documents\Kolor\PanotourPro 2/html

看看： http://www.kolor.com/wiki-en/action/view/Panotour_-Advanced-_Extra_Plugins?action=view&title=Panotour_-Advanced-_Extra_Plugins#How_to_install_plugins

将 Find Pano 功能添加到 Kolor Panotour

Adding Find Pano feature to a Kolor Panotour

html

javascript

css

search

panoramas