get the size of the screen

michael crane · March 4, 2010 at 6:45 PM

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

klaus.krpano · March 5, 2010 at 11:04 AM

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.

Code

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

Display More

best regards,
Klaus

bulp · March 5, 2010 at 2:13 PM

Great Code.. thank you Klaus!...

michael crane · March 5, 2010 at 6:46 PM

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

Code

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

Display More

michael crane · March 5, 2010 at 7:53 PM

obviously autosize shouldn't be there

michael crane · March 6, 2010 at 11:24 AM

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 must be something simple but I can't see it.

michel · March 6, 2010 at 1:49 PM

Hi mick,

On your code you have this:

Code

<events onresize="customresize();"/>


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

The trace action returns this:

Code

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:

Code

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

Display More

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

Code

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

Display More

SAlut.

michael crane · March 6, 2010 at 2:16 PM

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

michael crane · March 6, 2010 at 2:21 PM

any idea why the image is cropped in the textfield ?

michel · March 6, 2010 at 2:36 PM

Hi mick,

your data code:

Code

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

Code

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

michael crane · March 6, 2010 at 3:53 PM

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

michel · March 6, 2010 at 4:41 PM

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

Code

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

Display More

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

SAlut.

michael crane · March 6, 2010 at 8:25 PM

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 · March 6, 2010 at 11:49 PM

Hi mick,

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

Code

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

SAlut.

michael crane · March 7, 2010 at 12:31 AM

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 · March 7, 2010 at 12:38 AM

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

Code

set(plugin[image].url,path_to_your_image)

SAlut.

michel · March 7, 2010 at 3:09 PM

Hi mick,

Here your code modified the way explained above:

Code

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

Display More

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

SAlut.

michael crane · March 8, 2010 at 1:37 AM

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

klaus.krpano · March 8, 2010 at 8:54 AM

Hi,

Quote

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

Quote

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

Quote

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

Quote

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)

https://krpano.com/examples/108b9…agegallery.html

xml-files:
https://krpano.com/examples/108b9…magegallery.xml
https://krpano.com/examples/108b9…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

michael crane · March 8, 2010 at 10:29 AM

Quote from 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

get the size of the screen

Participate now!

Users Viewing This Thread