You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Thursday, March 4th 2010, 6:45pm

get the size of the screen

hello,
I want to use scrolling thumbnails which opens a textfield that has a photo and some text which if the photo is clicked opens a panorama.
everything is working but I do not know the size of the screen and the thumbnail size is in pixels. I think the textfield can be a percentage but cannot be sure.
If I knew the size of the display then I could use maths presumably to get the sizes so the bottom of the text field just touches the thumbs.Probably it is simple. how can I find the size of the screen ?

cheers
mick

2

Friday, March 5th 2010, 11:04am

Hi,

yes, the pixelsize of the current full window can be readed via the "stagewidth" and "stageheight" variables,
and the pixelsize of the current pano area can be readed via "area.pixelwidth" and "area.pixelheight",

to size elements individually based on these values the "onresize" event can be used,

e.g.

Source code

1
2
3
4
5
6
7
8
9
10
<events onresize="customresize();" />

<action name="customresize">
  trace('windowsize = ', stagewidth, 'x', stageheight);
  trace('areasize = ', area.pixelwidth, 'x', area.pixelheight);
  ...
  <!-- here you could change the size of plugins, e.g.: -->
  sub(plugin[map].width, stagewidth, 300);
  ...
</action>


best regards,
Klaus

bulp

Intermediate

Posts: 389

Location: Malaysia

  • Send private message

3

Friday, March 5th 2010, 2:13pm

Great Code.. thank you Klaus!... *thumbsup*

4

Friday, March 5th 2010, 6:46pm

I can't understand *cry* the image goes bigger than the screen whatever size I make it. or if I use a calculation in the plugin
latest fumble

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<action name="show_html_field">
set(plugin[htmltext].y,-1500);
tween(plugin[htmltext].alpha,1,0);
tween(plugin[htmltext].textblur,0,0);
tween(plugin[htmltext].blur,0,0);
set(plugin[htmltext].visible,true);
set(plugin[htmltext].enabled,true);
tween(plugin[htmltext].y,0);
sub(plugin[htmltext].height,area.pixelheight,200);
mul(calcwidth,plugin[htmltext].height,0.6667);
trace('panoheight',area.pixelheight, 'textboxheight', plugin[htmltext].height,'textboxwidth',calcwidth);

</action>
<plugin name="htmltext" url="../textfield.swf"
align="top" visible="false"
html="data:html1"
css="data:css1"
roundedge="0"
borderwidth="1"
bordercolor="0xFFFFFF"
backgroundcolor="0xFFFFFF"
background="false"
selectable="false"
shadow="5"
autosize="center"
ondown="set(control.usercontrol,off);"
onup="set(control.usercontrol,all);"
capture="false"
/>

<data name="html1">
<img src="../images/0002b.jpg" width="500" /><p/>

5

Friday, March 5th 2010, 7:53pm

obviously autosize shouldn't be there
*unsure*

6

Saturday, March 6th 2010, 11:24am

can anyone see why the test works ok locally but not when I upload it ?
http://www.mickiwiki.com/pages/GraganEast2.xml
http://www.mickiwiki.com/pages/GraganEast2.html
cheers
mick

[edit] I think it might be something with the plugin, only the leftmost thumbnail seems to start to do something (show the textfield) then nothing works.
[edit] it's not the thumbnail plugin http://www.mickiwiki.com/pages/GraganEast3.html

has a hotspot which does the same thing and that doesn't work either *unsure* must be something simple but I can't see it.

This post has been edited 3 times, last edit by "michael crane" (Mar 6th 2010, 1:05pm)


michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

7

Saturday, March 6th 2010, 1:49pm

Hi mick,

On your code you have this:

Source code

1
2
3
4
5
<events onresize="customresize();"/>

<action name="customresize">
  trace('xxxxxxxxxxxxxx','areasize = ', area.pixelwidth, 'x', area.pixelheight);
</action>


The trace action returns this:

Source code

1
2
3
4
INFO: krpano 1.0.8 beta 8 (build 2009-06-15)
INFO: Flashplayer WIN 10,0,42,34 PlugIn
INFO: registered to: michael crane
INFO: xxxxxxxxxxxxxxareasize = area.pixelwidthxarea.pixelheight

note: INFO: xxxxxxxxxxxxxxareasize = area.pixelwidthxarea.pixelheight
It seems that area.pixelwidth and area.pixelheight are not defined... I supose that is because no area is defined...

So, I think the problem is on your show_html_field() action... in lines 10 and 11:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
<action name="show_html_field">

set(plugin[htmltext].y,-1500);
tween(plugin[htmltext].alpha,1,0);
tween(plugin[htmltext].textblur,0,0);
tween(plugin[htmltext].blur,0,0);
set(plugin[htmltext].visible,true);
set(plugin[htmltext].enabled,true);
tween(plugin[htmltext].y,0);
sub(plugin[htmltext].height,area.pixelheight,200);
mul(plugin[htmltext].width, plugin[htmltext].height,0.666667);

</action>

At the end of the tween (line 9) you try to set the height and width of the plugin with values that are strings instead of numbers... Tha's why the plugin disappear...

Try using stageheight instead of area.pixelheight in line 10...

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
<action name="show_html_field">

set(plugin[htmltext].y,-1500);
tween(plugin[htmltext].alpha,1,0);
tween(plugin[htmltext].textblur,0,0);
tween(plugin[htmltext].blur,0,0);
set(plugin[htmltext].visible,true);
set(plugin[htmltext].enabled,true);
tween(plugin[htmltext].y,0);
sub(plugin[htmltext].height,stageheight,200);
mul(plugin[htmltext].width, plugin[htmltext].height,0.666667);

</action>


SAlut.

8

Saturday, March 6th 2010, 2:16pm

*thumbsup* *thumbsup* *thumbsup* *thumbsup* *thumbsup* *thumbsup*
Hi Michel,
thank you thank you!!
why it worked locally I do not know.
http://mickiwiki.com/pages/GraganEast4.html
cheers

9

Saturday, March 6th 2010, 2:21pm

any idea why the image is cropped in the textfield ?

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

10

Saturday, March 6th 2010, 2:36pm

Hi mick,

your data code:

Source code

1
2
3
4
5
6
<data name="htmldata1">
<a href="event:action(hidewindow);">
<img src="../images/burren/0001b.jpg" width="plugin[htmltext].width" height="plugin[htmltext].height"/>
</a>
<p/>
</data>


Try using get():

Source code

1
2
3
4
5
6
<data name="htmldata1">
 <a href="event:action(hidewindow);">
 <img src="../images/burren/0001b.jpg" width="get(plugin[htmltext].width)" height="get(plugin[htmltext].height)"/>
 </a>
 <p/>
 </data>


SAlut.

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

12

Saturday, March 6th 2010, 4:41pm

Hi mick,

Then, it seems that variables inside a <data> node are not resolved....
So, I think you have to set the content of your <data> node dinamicaly to be able to include the value of a variable...
Try to call this action inside <krpano onstart=>:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
<krpano version="1.0.8" onstart="build_htmldata1();">
....
<action name="build_htmldata1">
  set(data[htmldata1].content,'<a href="event:action(hidewindow);"> ');
  txtadd(data[htmldata1].content,
		get(data[htmldata1].content),
		'<img src="../images/burren/0001b.jpg" width="',
		get(plugin[htmltext].width),
		'" height="',
		get(plugin[htmltext].height),
		'" /></a><p/>');
</action>
....


edited: wrong code... see next post...


SAlut.

This post has been edited 1 times, last edit by "michel" (Mar 6th 2010, 11:50pm)


13

Saturday, March 6th 2010, 8:25pm

I will try what you suggest yet I am concerned that I am easily going to loose understanding and not be able to carry on myself.
at present for testing just the size I load the same image each time into the textfield. but looking at the next step I think I need a way to just load another image into the textfield ?
and then that image is a link to load a new panorama in the background.
and the scrolling thumbnails should be constant.
probably that is done with scenes ? and can I declare a variable in the <action name="load1"> in the .xml and conditionally load a different image in the textfield ?
I can as in previous tests write down every option but a smarter understanding would be good.

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

14

Saturday, March 6th 2010, 11:49pm

Hi mick,

The code above is wrong... malformed and missing values for plugin[htmltext].height and width...
here is corrected:

Source code

1
2
3
4
5
6
<action name="build_htmldata1">
	sub(plugin[htmltext].height,stageheight,150);
	mul(plugin[htmltext].width, plugin[htmltext].height,0.666667);
	txtadd(data[htmldata1].content,,'<a href="event:action(hidewindow);"> <img src="../images/burren/0001b.jpg" width="',get(plugin[htmltext].width),'" height="',get(plugin[htmltext].height),'" /></a><p/>');
	trace('data[htmldata1].content = ', get(data[htmldata1].content));
</action>

I have tried and it works...

One question about what you are looking to do: did you need to use the textfield.swf plugin to display your images for some reason???

Anyway, I like your idea of a show of flora inside your pano. *thumbup*

SAlut.

15

Sunday, March 7th 2010, 12:31am

I asked myself that, only because I have used textbox before and might want to write something.
I tried with hotspot but it is floating in the panorama.
http://www.mickiwiki.com/pages/test01.html
can I lock the hotspot to the screen like the textfield ?
very best regards

mick

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

16

Sunday, March 7th 2010, 12:38am

Hi mick,

You can just use a plugin with, in the url , your image to be displayed instead of the textfield.swf plugin...
This would be more easy to implement for what you are looking to do...
In each action to load the next image, you just have to set the correct image to the url...

Source code

1
set(plugin[image].url,path_to_your_image)


SAlut.

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

17

Sunday, March 7th 2010, 3:09pm

Hi mick,

Here your code modified the way explained above:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<krpano version="1.0.8">
<plugin name="thumbnails" url="../as3Thumbsforkrpano.swf?TheXML=gallery1.xml" keep="true" align="bottomleft" x="0" y="0" scale="1" zorder="100"/>
	<view hlookat="0" vlookat="0" maxpixelzoom="1.0" />
	<display details="22" />
	<preview type="CUBESTRIP" url="../images/burren/GraganEast2.tiles/preview.jpg" />
	<image type="CUBE" multires="true" tilesize="553">
	    <level tiledimagewidth="2212" tiledimageheight="2212">
	   	 <left  url="../images/burren/GraganEast2.tiles/l3_l_%0v_%0h.jpg" />
	   	 <front url="../images/burren/GraganEast2.tiles/l3_f_%0v_%0h.jpg" />
	   	 <right url="../images/burren/GraganEast2.tiles/l3_r_%0v_%0h.jpg" />
	   	 <back  url="../images/burren/GraganEast2.tiles/l3_b_%0v_%0h.jpg" />
	   	 <up	url="../images/burren/GraganEast2.tiles/l3_u_%0v_%0h.jpg" />
	   	 <down  url="../images/burren/GraganEast2.tiles/l3_d_%0v_%0h.jpg" />
	    </level>
	    <level tiledimagewidth="1106" tiledimageheight="1106">
	   	 <left  url="../images/burren/GraganEast2.tiles/l2_l_%0v_%0h.jpg" />
	   	 <front url="../images/burren/GraganEast2.tiles/l2_f_%0v_%0h.jpg" />
	   	 <right url="../images/burren/GraganEast2.tiles/l2_r_%0v_%0h.jpg" />
	   	 <back  url="../images/burren/GraganEast2.tiles/l2_b_%0v_%0h.jpg" />
	   	 <up	url="../images/burren/GraganEast2.tiles/l2_u_%0v_%0h.jpg" />
	   	 <down  url="../images/burren/GraganEast2.tiles/l2_d_%0v_%0h.jpg" />
	    </level>
	    <level tiledimagewidth="553" tiledimageheight="553">
	   	 <left  url="../images/burren/GraganEast2.tiles/l1_l_%0v_%0h.jpg" />
	   	 <front url="../images/burren/GraganEast2.tiles/l1_f_%0v_%0h.jpg" />
	   	 <right url="../images/burren/GraganEast2.tiles/l1_r_%0v_%0h.jpg" />
	   	 <back  url="../images/burren/GraganEast2.tiles/l1_b_%0v_%0h.jpg" />
	   	 <up	url="../images/burren/GraganEast2.tiles/l1_u_%0v_%0h.jpg" />
	   	 <down  url="../images/burren/GraganEast2.tiles/l1_d_%0v_%0h.jpg" />
	    </level>
	</image>
	
	<events onresize="set_plugin_width_height()" />
	
	<action name="load1">
	    set(plugin[htmltext].url,'../images/burren/0001b.jpg');
	    show_html_field();
	</action>    
	<action name="load2">
	    set(plugin[htmltext].url,'../images/burren/0002b.jpg');
	    show_html_field();
	</action>
	<action name="load3">
	    set(plugin[htmltext].url,'../images/burren/0003b.jpg');
	    show_html_field();
	</action>
	<action name="load4">
	    set(plugin[htmltext].url,'../images/burren/0004b.jpg');
	    show_html_field();
	</action>    
	<action name="load5">
	    set(plugin[htmltext].url,'../images/burren/0005b.jpg');
	    show_html_field();
	</action>
	<action name="load6">
	    set(plugin[htmltext].url,'../images/burren/0006b.jpg');
	    show_html_field();
	</action>
	<action name="load7">
	    set(plugin[htmltext].url,'../images/burren/0007b.jpg');
	    show_html_field();
	</action>
	<action name="load8">
	    set(plugin[htmltext].url,'../images/burren/0008b.jpg');
	    show_html_field();
	</action>
	<action name="load9">
	    show_html_field();
	    trace(stageheight);
	</action>
	<action name="load10">
	    show_html_field();
	    trace(stageheight);
	</action>
	
	<plugin name="htmltext"
	    url="" 
	    visible="false"
	    origin="top"
	    x="0" y="0" 
	    onclick="hidewindow()"
	    onloaded="set_plugin_width_height()"
    	/>
	    
	<action name="set_plugin_width_height">
	    sub(plugin[htmltext].height,stageheight,150);
	    mul(plugin[htmltext].width, plugin[htmltext].height,0.666667);
	</action>
	    
	<action name="show_html_field">
	    set(plugin[htmltext].y,-1500);
	    tween(plugin[htmltext].alpha,1,0);
	    tween(plugin[htmltext].textblur,0,0);
	    tween(plugin[htmltext].blur,0,0);
	    set(plugin[htmltext].visible,true);
	    set(plugin[htmltext].enabled,true);
	    tween(plugin[htmltext].y,0);
	</action>

	<action name="hidewindow">
	    tween(plugin[htmltext].blur,20);
	    tween(plugin[htmltext].alpha,0);
	    set(plugin[htmltext].enabled,false);
	</action>    

</krpano>  


Some notes:
line 76-83 - The plugin[htmltext] becomes a simple plugin without url value...
line 82 - onloaded (when loading of the plugin is done) the action set_plugin_width_height() is called...
line 85-88 - action set_plugin_width_height(), to set the needed values for width and height of the plugin[htmltext]...
line 35-74 - actions called from each Thumbs. Each action sets the plugin[htmltext].url value with the path to the needed image...
line 33 - an onresize event that calls the action set_plugin_width_height() on a resizing of the window....

I Hopes this is clear... *smile*

SAlut.

18

Monday, March 8th 2010, 1:37am

hey thanks,
I did this, remembering stuff slowly.
http://www.mickiwiki.com/pages/test%28plugin%295.html
I need to change the data and for some reason the middle image does not properly go away.
I'd like to put a zoomable map in there eventually. it's not a bad base for something.
cheers
mick

19

Monday, March 8th 2010, 8:54am

Hi,

Quoted

krpano 1.0.8 beta 8 (build 2009-06-15)

Quoted

note: INFO: xxxxxxxxxxxxxxareasize = area.pixelwidthxarea.pixelheight
It seems that area.pixelwidth and area.pixelheight are not defined... I supose that is because no area is defined...

right, the <area> tag is new since beta 9, but the older beta 8 version was used


Quoted

width="plugin[htmltext].width"
width="get(plugin[htmltext].width)"

Quoted

it seems that variables inside a <data> node are not resolved....

static definitions in the xml like above are never resolved/parsed,
dynamic code can be only used in events and actions,



for a bit more complex image gallery maybe have a look at the
"image gallery" example (included in the download package)

http://krpano.com/examples/108b9/example…agegallery.html


xml-files:
http://krpano.com/examples/108b9/example…magegallery.xml
http://krpano.com/examples/108b9/example…ry/thumbbar.xml

it checks for the current screen size when showing the images, and if an image is
larger it will be scaled down to fit inside the screen,

best regards,
Klaus

20

Monday, March 8th 2010, 10:29am

right, the <area> tag is new since beta 9, but the older beta 8 version was used
hmmm, I seem to have put beta 8 swf into beta 9 foder.
your imagegallery is certainly smarter( I 'll use that )
a tiny refinement would be to close the image if clicking again where the thumbnail was.
[edit]
where can I change the end position of the image ?
tween(plugin[%1].x,0);
tween(plugin[%1].y,0);
doesn't seem to


cheers

mick

This post has been edited 1 times, last edit by "michael crane" (Mar 8th 2010, 12:18pm)