I made a panoram with a program called Kolor. So I'm trying to add the find pano feature which is searching through the images of the panoramics so they can be displayed. I found an HTML file containing the search feature but can seem to know how to merge it with the original html file. And in the help forums it wasn't any help. Here's the find pano file:
<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>
And here's the file where the search should be:
<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>
The html-file containing the search function is intended as an replacement for the "original" template files (fullpage.html or generic.html) that you can find on the "create"-screen in the Panotour programm.
To be able to pick the replacement template from that list, extract the zip-file containing the search into the Kolor-html-directory in your home (then restart the programm if it is running already).
On Linux, something like: /home/#your-username-here#/Kolor/PanotourPro 2/html
On Windows, something like: C:\users#your-username-here#\documents\Kolor\PanotourPro 2/html