You are not logged in.

1

Tuesday, February 28th 2017, 8:57pm

Add hotspot with javascript

Hi All

I am quite new with krpano. I try to add a hotspot with JavaScript. Bud it does not work. Can someone help me?
<html>
<head>
<title>Add Hotspot</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; background-color:#000000; margin:0; padding:0; }
a{ color:#FFFFFF; text-decoration:underline; }
a:hover{ color:#AAAAAA; text-decoration:underline; }
</style>
<script src="krpano/krpano.js" type="text/javascript" async=""></script>
</head>
<body>

<center>

<h2>Add Hotspot with Javascript</h2>

<table width="700" style="border: 1px solid white; border-image: none;">
<tbody>
<tr style="vertical-align: top;">
<td>
<div onclick="addhotspotonkarpano()" id="krpanoDIV" style="width: 600px; height: 400px;">

</div>
</td>
<td>
<div style="padding: 5px; width: 100px;">
<span><b><u>mouse</u></b></span><br>
<span>x=</span><span id="mouse_x"></span><br>
<span>y=</span><span id="mouse_y"></span><br>
<span>ath=</span><span id="mouse_ath"></span><br>
<span>atv=</span><span id="mouse_atv"></span><br>
</div>
</td>
</tr>

</tbody></table>

</center>


<script src="krpano/krpano.js"></script>

<script>
// <![CDATA[

embedpano({swf:"krpano/krpano.swf", id:"krpanoSWFObject", xml:"Aussen1.xml", html5:"prefer", target:"krpanoDIV"});


function getlookat()
{
var krpano = document.getElementById("krpanoSWFObject");


if (krpano && krpano.get) // it can take some time until krpano is loaded and ready
{
krpano.call("screentosphere(mouse.x, mouse.y, mouseath, mouseatv); js( showmouseinfo() );");
}
}

function showmouseinfo()
{
var krpano = document.getElementById("krpanoSWFObject");

var mouse_at_x = krpano.get("mouse.x");
var mouse_at_y = krpano.get("mouse.y");
var mouse_at_h = krpano.get("mouseath");
var mouse_at_v = krpano.get("mouseatv");

document.getElementById("mouse_x").innerHTML = mouse_at_x + "px";
document.getElementById("mouse_y").innerHTML = mouse_at_y + "px";
document.getElementById("mouse_ath").innerHTML = mouse_at_h.toFixed(2) + "°";
document.getElementById("mouse_atv").innerHTML = mouse_at_v.toFixed(2) + "°";
}

// update mouse info 30 times per second
var lookat_interval = setInterval('getlookat()', 1000.0 / 30.0);


// disable text selection to avoid cursor flickering
window.onload = function()
{
document.onselectstart = function() {return false;} // ie
document.onmousedown = function() {return false;} // mozilla
}

function addhotspotonkarpano()
{
var krpano = document.getElementById("krpanoSWFObject");

var mouse_at_h = krpano.get("mouseath");
var mouse_at_v = krpano.get("mouseatv");

krpano.call(addhotspot(newspot));
krpano.set(hotspot[newspot].url,hotspot.png);
krpano.set(hotspot[newspot].ath, mouse_at_h);
krpano.set(hotspot[newspot].atv, mouse_at_v);
krpano.set(hotspot[newspot].scale,0.7);
krpano.set(hotspot[newspot].zoom,true);
krpano.set(hotspot[newspot].onclick, draghotspot());

}

// ]]>
</script>

</body>
</html>

This post has been edited 1 times, last edit by "dama79" (Feb 28th 2017, 9:50pm) with the following reason: typo


2

Wednesday, March 1st 2017, 8:50pm

Solution

A way it works is:

function addhotspotonkarpano()
{
var krpano = document.getElementById("krpanoSWFObject");

var mouse_at_h = krpano.get("mouseath");
var mouse_at_v = krpano.get("mouseatv");

var spotname = "spot1";

var str = "";
str += "addhotspot(" + spotname + ");";
str += "set(hotspot[" + spotname + "].url,hotspot.png);";
str += "set(hotspot[" + spotname + "].ath,"+ mouse_at_h +");";
str += "set(hotspot[" + spotname + "].atv,"+ mouse_at_v +");";
str += "set(hotspot[" + spotname + "].scale,0.7);";
str += "set(hotspot[" + spotname + "].zoom,true);";
str += "set(hotspot[" + spotname + "].onhover,showtext(Name of the Hostpot));";
krpano.call(str);

}

Birdseye

Trainee

Posts: 124

Location: De Haan

Occupation: Freelance Photographer

  • Send private message

3

Saturday, April 29th 2017, 6:41am

Hi Dama,

Just woundering if you get this to work and if it works in the editor too?

Grts,
Yvan

4

Tuesday, May 2nd 2017, 6:20pm

My Solution

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function addhotspot() {

var krpano = document.getElementById("krpanoSWFObject");

var spotname="myspot";

var hlookat = Number( krpano.get("view.hlookat") );
var vlookat = Number( krpano.get("view.vlookat") );

krpano.call("addhotspot(" + spotname + ");");
krpano.call("set(hotspot[" + spotname + "].url,skin/vtourskin_hotspot.png);");
krpano.call("set(hotspot[" + spotname + "].ath,"+hlookat+");");
krpano.call("set(hotspot[" + spotname + "].atv,"+vlookat+");");
}


This function works for me *smile*

This post has been edited 1 times, last edit by "sebastien.b" (May 4th 2017, 6:03pm)


Birdseye

Trainee

Posts: 124

Location: De Haan

Occupation: Freelance Photographer

  • Send private message

5

Thursday, May 4th 2017, 8:09am

Thank you Sebastien, this code works for me too now.

But does someone knows a solution to get this work in the tour editor? I'm looking for a solution to add 4 kinds of hotspots in the tour editor.

Tnx for help,
Yvan

6

Thursday, May 4th 2017, 6:09pm

The plugin editor is in flash so i think you need to create your own tour editor in html5 and add some button to exec js code like this function.
To change the style of the hotspot you juste have to change the image source.

Birdseye

Trainee

Posts: 124

Location: De Haan

Occupation: Freelance Photographer

  • Send private message

7

Friday, May 5th 2017, 6:12am

Mmm... this will be overkill for me but tnx anyway for the help Sebastien. ;)

Yvan