get the size of the screen

Schüler

Donnerstag, 4. März 2010, 18:45

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

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

2

Freitag, 5. März 2010, 11:04

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.

Quellcode

<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

Zum Seitenanfang

bulp

Fortgeschrittener

Beiträge: 390

Wohnort: Malaysia

3

Freitag, 5. März 2010, 14:13

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

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

4

Freitag, 5. März 2010, 18:46

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

Quellcode

<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/>

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

5

Freitag, 5. März 2010, 19:53

obviously autosize shouldn't be there
*unsure*

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

6

Samstag, 6. März 2010, 11:24

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.

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »michael crane« (6. März 2010, 13:05)

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

7

Samstag, 6. März 2010, 13:49

Hi mick,

On your code you have this:

	Quellcode
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:

	Quellcode
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:

Quellcode

<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...

Quellcode

<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.

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

8

Samstag, 6. März 2010, 14:16

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

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

9

Samstag, 6. März 2010, 14:21

any idea why the image is cropped in the textfield ?

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

10

Samstag, 6. März 2010, 14:36

Hi mick,

your data code:

	Quellcode
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():

Quellcode

<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.

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

11

Samstag, 6. März 2010, 15:53

http://mickiwiki.com/pages/GraganEast4.html
nope
*thumbdown*

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

12

Samstag, 6. März 2010, 16:41

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=>:

Quellcode

<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.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »michel« (6. März 2010, 23:50)

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

13

Samstag, 6. März 2010, 20:25

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.

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

14

Samstag, 6. März 2010, 23:49

Hi mick,

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

Quellcode

<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.

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

15

Sonntag, 7. März 2010, 00:31

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

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

16

Sonntag, 7. März 2010, 00:38

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...

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

SAlut.

Zum Seitenanfang

michel

Profi

Beiträge: 1 153

Wohnort: ANDORRA

Beruf: TV

17

Sonntag, 7. März 2010, 15:09

Hi mick,

Here your code modified the way explained above:

Quellcode

<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.

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

18

Montag, 8. März 2010, 01:37

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

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

19

Montag, 8. März 2010, 08:54

Hi,

Zitat

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

Zitat

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

Zitat

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

Zitat

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

Zum Seitenanfang

michael crane

Schüler

Beiträge: 133

20

Montag, 8. März 2010, 10:29

Zitat von »klaus.krpano«

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »michael crane« (8. März 2010, 12:18)

Zum Seitenanfang