Beiträge von stevenChen

hi everyone：
I have find out two ideas:

a: txtadd(hotspot[get(hsText)].onclick, 'doSomething(',get(hsText),')' );
b: set(hotspot[get(hsText)].onclick, doSomething(get(name)) );

Hello:
i need to add many hotspots dynamically by code, and add onclick action for every hotspot; when click every hotspot,it should be done different things;
my xml code as below:

<action name="addHotspot">
		txtadd(hsText, 'hsText_', %1);
		js(console.log('consolelog-hostspotCount=',get(hotspot.count)) );
		addhotspot(hsText);
		set(hotspot[get(hsText)].url, "%SWFPATH%/pic/test.png");
		set(hotspot[get(hsText)].width, 150);
	  	set(hotspot[get(hsText)].height, 40);
		set(hotspot[get(hsText)].ath, %2);
	  	set(hotspot[get(hsText)].atv, %3);
	  	set(hotspot[get(hsText)].onclick, doSomething(get(hsText)) );
	</action>


	<action name="doSomething">
		js(console.log('hotspotName=',%1 );
	</action>

i called the addHotspot action as below:
addHotspot('test1',15, 0);
addHotspot('test2',25, 0);
addHotspot('test3',-15, 0);

but when i click the hotspot "test1"and "test2", it always print the "test3"; i kown the rayson because of var hsText final value is "test3"; And i can not come out any idea, could some one can help me? thanks

hi klaus:
i find out when set <Image> label type to sphere, the progress.progress value is always 0
i tested in the offical loading-progress demo and just modified the code as below :

<!-- <preview url="https://krpano.com/tours/corfu/pa…preview.jpg%22/>
<image>
<cube url="https://krpano.com/tours/corfu/pa…%25%24random%25" devices="tablet|desktop" />
<cube url="https://krpano.com/tours/corfu/pa…%25%24random%25" devices="mobile" />
</image> -->

<preview url="%SWFPATH%/pic/Park_preview.jpg" />
<image>
<sphere url="%SWFPATH%/pic/Park.jpg" />
</image>

I have find the idea to achieve what i need
just use the layer to layout ui, and set the "parent" attribute of layer be the hotspot[name];

so we can achieve the custom ui as a hotspot

Dear klaus：
because the hotspot attribute does not support manual css, so i do not kown how to add a custom ui that contains the images and text as hotspot?
like this:

the link http://720yun.com/t/a362dwavcna?pano_id=72894

do you have other idea? thank you

Zitat von klaus.krpano

Hi,

add:

Code

renderer="css3d"

to your element.

See also here:
https://krpano.com/docu/xml/#hotspot.sprite
and here:
https://krpano.com/docu/xml/#hotspot.renderer

Best regards,
Klaus

hi klaus:

thank you for reply! You have worked hard

i also find the reason！

Zitat von klaus.krpano

This could be also used to add any other html content. Only two things to respect - the size need to be set and this will work only in HTML5.

Hi klaus:
could you give come example foe add any other html content to hostspot? it will be best for include some text and image element

and i copy your demo code to my code it does not works
Firefox browser:
INFO: krpano 1.19-pr4 (build 2016-04-07)
INFO: HTML5/Desktop - Firefox 45.0 - WebGL
INFO: ready to hideInputDialog
ERROR: add_iframe - TypeError: caller.sprite is null

Chrome browser:
INFO: krpano 1.19-pr4 (build 2016-04-07)
INFO: HTML5/Desktop - Chrome 47.0 - WebGL
INFO: ready to hideInputDialog
ERROR: add_iframe - TypeError: Cannot read property 'appendChild' of null

hi klaus:
the hotspot attribute css does not support class and id selector, just support element selector.

my xml file as below:
<hotspot name="textfieldhotspot"
url="textfield.swf"
width="150"
height="150"
ath="0.7747"
atv="-11.2726"
distorted="true" rx="0.0" ry="0.5" rz="0.2"
html="[p id='texthotspotCls']Hello World[/p]"
css="p.texthotspotCls {
color:#00ff00;
font-family:Arial;
font-weight:bold;
font-size:14;
margin-left:5;
margin-right:5;
text-align:center;
}"
backgroundcolor="0xFFFFFF"
backgroundalpha="1.0"
roundedge="5"
shadow="1"
borderwidth="0"
glow="4"
glowcolor="0xFFFFFF"
autosize="center"
ondown="draghotspot();"/>

the id selector did not work

<hotspot name="textfieldhotspot"
url="textfield.swf"
width="150"
height="150"
ath="0.7747"
atv="-11.2726"
distorted="true" rx="0.0" ry="0.5" rz="0.2"
html="[p id='texthotspotCls']Hello World[/p]"
css="p{
color:#00ff00;
font-family:Arial;
font-weight:bold;
font-size:14;
margin-left:5;
margin-right:5;
text-align:center;
}"
backgroundcolor="0xFFFFFF"
backgroundalpha="1.0"
roundedge="5"
shadow="1"
borderwidth="0"
glow="4"
glowcolor="0xFFFFFF"
autosize="center"
ondown="draghotspot();"/>

the element work ok
could you give me some advice? thank you

Zitat von herrpedro

https://krpano.com/docu/actions/#jsget

you read this?

hi：
i find out in other thread jsget function not work?
klaus said the jsget action is the new action since 1.19.r3;
does any method to achieve this except jsget action?

Zitat von Umalo

Other option is to have image with text instead of textfield but I don't think you want to go in this direction

yes this option is not adapt to me, because i want get the user input message, then add a hotspot just use the message text
; this is my first step, second I want to achieve a hotspot use both image and text; but i do not find some sample code in offical demo code

thank you

Zitat von Umalo

First, I don't understand what you mean by text hotspot. You want to have text displayed over the hotspot all the time, you want hotstpot to be just a text, or?
Second, what is the reason why not to use textfield as his purspose is to display text?

Hi Umalo:
thank you for reply!
first, yes i want hotspot just to be a text;
second, because i want the proglem run in mobile, and it does not need flashplayer,just use html

thank you

Zitat von Umalo

"In the krpano HTML5 Viewer, the textfield plugin is directly integrated into the viewer itself. "
source: https://krpano.com/plugins/textfield/#top
That mean if you run html5 viewer use internal implementation for placing text.

hi Umalo:
my problem is that i do not known how to set a text to hotspot without using textfield plugin

Zitat von michel

Hi viewinz,

I just tried with textfield as hotspot... like this:

Code

<hotspot name="textessai" url="%SWFPATH%/plugins/textfield.swf" 
		width="100" height="20"
		ath="" atv=""
		html="[p]salut[/p]"
		css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
		backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF"
		autosize="center"
		/>
<hotspot name="hotspot1" ..........
		onover="set(hotspot[textessai].html,[p]some txt for hotspot1[/p]);
				set(hotspot[textessai].ath,10); 
				set(hotspot[textessai].atv,-10); 
				set(hotspot[textessai].visible,true); "
		onout="set(hotspot[textessai].visible,false); "
		onclick=""; 
		/>


<hotspot name="hotspot2" ..........
		onover="set(hotspot[textessai].html,[p]some txt for hotspot2[/p]);
				set(hotspot[textessai].ath,100); 
				set(hotspot[textessai].atv,-40); 
				set(hotspot[textessai].visible,true); "
		onout="set(hotspot[textessai].visible,false); "
		onclick=""; 
		/>

Alles anzeigen

This way you have only 1 "hotspot textfield".
for each hotspot, onover makes the action to give the right html text , the position with ath and atv, and makes visible the "hotspot textfield".....
and onout makes the "hotspot textfield" invisible....

I think it is correct...

About ath and atv:

I hope this can make the job... tell me..

Salut.

Alles anzeigen

Hi Michel:
do you have any method add a text to hotspot without using textfield plguin?
i want a use this run in mobile, and it do not support flashplayer,

could help me? thank you

Hi Umalo:

Oh ,i am still do not understand, could you give me some example code ;
and my question is how to add text hotspot without using internal implementation?

thank you

hi everyone:
i need to add text hotspot with html, any plgin can use ??
below is using the flash plugin to show the text hotspot:

code in xml:
.......
<hotspot name="textfieldhotspot"
url="textfield.swf"
width="150"
height="100"
ath="0.7747"
atv="-11.2726"
distorted="true" rx="0.0" ry="0.5" rz="0.2"
html="[p]Helo[/p]"
css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
backgroundcolor="0xFFFFFF"
backgroundalpha="1.0"
roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" autosize="center" />
......

the "url" is only support jpg,png,gif and swf; Anyone have a good idea?

thank you

the log message can be show in the console, and i debug it use firefox broswer, there is no exception???
did i miss something?

hi:
i want to dynamically add text hotspot in pano viewer when click mouse, my code as below;but i canot find some method
to debug the code, could some one help me? thanks you!
my js code in html file as below:

function showMosueInfo(){
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");
console.log(mouse_at_x+"-"+mouse_at_y);

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) + "°";

}

// var lookat_interval = setInterval('getLookat()', 1000/30);

function mouseClick(){

var krpano = document.getElementById("krpanoSWFObject");
if(krpano && krpano.get)// it can take some time until krpano is loaded and ready
{
// krpano.call(addHostspotText);
krpano.call("screentosphere(mouse.x, mouse.y, mouseath, mouseatv);js( showMosueInfo() );"+addHostspotText);
console.log("show over");

}

}

var addHostspotText ="addhotspot(newHotspot);set(hotspot[newHotspot].name, 'addtext');set(hotspot[newHotspot].url, textfield.swf);set(hotspot[newHotspot].ath, mouseath);set(hotspot[newHotspot].atv, mouseatv);set(hotspot[newHotspot].html, '[p] aaaaaa[/p]');set(hotspot[newHotspot].backgroundcolor, 0xFFFFFF);set(hotspot[newHotspot].roundedge, 5);set(hotspot[newHotspot].shadow, 1);set(hotspot[newHotspot].borderwidth, 0);set(hotspot[newHotspot].glow, 4);set(hotspot[newHotspot].glowcolor, 0xFFFFFF);set(hotspot[newHotspot].autosize, 'center');set(hotspot[newHotspot].css, 'p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }');";

When i add static hotspot in xml file,it works:
code in xml file:
<hotspot name="textfieldhotspot" url="textfield.swf"
width="100"
height="20"
ath="61.7747"
atv="-11.2726"
html="[p]Helo[/p]"
css="p{color:#000000; font-family:Arial; font-weight:bold; font-size:14; margin-left:5; margin-right:5; text-align:center; }"
backgroundcolor="0xFFFFFF" roundedge="5" shadow="1" borderwidth="0" glow="4" glowcolor="0xFFFFFF" autosize="center" />

I have find the reason