Mask question

Tuur

Sage

Posts: 3,431

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

1

Monday, February 23rd 2009, 1:41am

Hi,

I made my first mask 84kb .png

When fullscreen it moves a little bumpy or 'hobbely' (?) how come??

It was not like that without an mask.
Am i doing something wrong??

www.studiotuur.nl/RSG/tour.html

Thanx

Tuur *thumbsup*

https://www.virtualtuur.com
Skype:studiotuur

Krpano ToolBox: https://krpano.com/forum/wbb/index.php?p…&threadID=16023
Measure in 360 photos with

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top

Go to the top of the page

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

2

Monday, February 23rd 2009, 3:20am

it's looking fine for me again. *wacko*

Have you loaded up the hard drive so much that there's limited room for processing? I'm not even sure that would cause it with an online flash app... but I know when I run low on space... funny things happen with other items.

Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Go to the top of the page

klaus.krpano

Administrator

Posts: 12,884

3

Monday, February 23rd 2009, 10:48pm

Hi,

the mask is a very big image,
it's small as .png, but decoded in memory it's near 7MB (=1680×1049x4),
and flash needs to scale/render this large image pixel per pixel every frame, and this costs performance

(the most of the image is transparent, but every pixel will be processed anyway!)

try to split the mask into 4 parts - a part for every edge, then it should performance better!

best regards,
Klaus

Go to the top of the page

Tuur

Sage

Posts: 3,431

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

4

Tuesday, February 24th 2009, 12:06am

Ahhhh, gonna try that .

Thanx Klaus *thumbup*

I 'm afraid the nxt question is how to get the 4 quaters to show... like the cube thing?

Thanx again

Tuur *thumbsup*

https://www.virtualtuur.com
Skype:studiotuur

Krpano ToolBox: https://krpano.com/forum/wbb/index.php?p…&threadID=16023
Measure in 360 photos with

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top

Go to the top of the page

Tuur

Sage

Posts: 3,431

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

5

Tuesday, February 24th 2009, 10:51am

Is this also the same procedure the other masks use??

Like Graydon or the Spacevirtualine Guys??

Or are they doing something else to make those borders and so.

Thanx

Tuur *thumbsup*

https://www.virtualtuur.com
Skype:studiotuur

Krpano ToolBox: https://krpano.com/forum/wbb/index.php?p…&threadID=16023
Measure in 360 photos with

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top

Go to the top of the page

klaus.krpano

Administrator

Posts: 12,884

6

Tuesday, February 24th 2009, 11:46am

Hi,

just cut/crop the mask images into separate parts

(sorry with the edges and the logos it will be more than 4 images)

I prepared a example for this now:
optimized_mask.zip

(the FPS plugin to show the current framerate is included)

on my PC (a Intel P4 2.8GHZ) I get in Fullscreen 1280x1024 following framerates:

without mask ~50 FPS
with fullscreen mask ~31 FPS
with splitted/optimized mask ~48 FPS

the optimized mask is near as fast as without mask,
and about 50% faster then the fullscreen mask

best regards,
Klaus

Go to the top of the page

Tuur

Sage

Posts: 3,431

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

7

Tuesday, February 24th 2009, 11:51am

Thanx Klaus,

gonna fix that after my wintersport *thumbsup*

i also have some performance problems..

it looks that suddenly all my pano's shock a little while moving 'on smallscreen'... only in safari.. and only in the frameset of my site... *confused*

not with the direct link
i realy have to go leopard i think..
maybe i changed a setting.. *confused*

Thanx

tuur *thumbup*

https://www.virtualtuur.com
Skype:studiotuur

Krpano ToolBox: https://krpano.com/forum/wbb/index.php?p…&threadID=16023
Measure in 360 photos with

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top

Go to the top of the page

Virtual Northland

Professional

Posts: 1,336

Location: Duluth MN

8

Tuesday, February 24th 2009, 3:33pm

The borders are skins a mask is what Klaus uses to give that alein and spotlight effect. I had the same question a few weeks back and Graydon stated that to make a skin you just create a small .png file with what ever gradeint or pattern you would like. Use the plugin same as you would add a google map icon or any of the objects I have seen embedded into your other tours. Make that image 25 px in hieght and 5 px in width. Then in your .xml file leave the hieght at 25 and make the width 100% that will stretch the 5px width all the way across the screen. same thing for the sides just swap the hieght and width. Use the zorder to determine which piece is on top of the other. My latest tour I posted has the frist skin I made in the examples section. Does this make sense?

Good luck.

Quoted from "Tuur"

Is this also the same procedure the other masks use??

Like Graydon or the Spacevirtualine Guys??

Or are they doing something else to make those borders and so.

Thanx

Tuur

Go to the top of the page

Tuur

Sage

Posts: 3,431

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

9

Tuesday, February 24th 2009, 4:26pm

ahhh that's smart. Thanx VN...

gonna try that but first SKI *thumbsup*

Cheers
Tuur *thumbup*

https://www.virtualtuur.com
Skype:studiotuur

Krpano ToolBox: https://krpano.com/forum/wbb/index.php?p…&threadID=16023
Measure in 360 photos with

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top

Go to the top of the page

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

10

Tuesday, February 24th 2009, 6:44pm

You can get creative with the borders / masks... especially if you are using full spherical images. Then you don't have to worry about sections of the photo being hid behind the borders. I'm still just using cylindrical... so I have to make an effort to leave open the top / bottom areas... or minimize how much I hide.

In this sample , the left-top and right-bottom fades are actually 2px by 2px pngs... then similar to how VN is doing it, I just specify the height in px and the width in % to cover the area I want.

You can create the pngs or jpgs in lots of different programs... but Inkscape is my friend *smile*

Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Go to the top of the page

Tuur

Sage

Posts: 3,431

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

11

Tuesday, February 24th 2009, 7:33pm

How is this gonna work in the corners then when i've not just a color but some lines an stuff???

Thanx
tuur *thumbsup*

https://www.virtualtuur.com
Skype:studiotuur

Krpano ToolBox: https://krpano.com/forum/wbb/index.php?p…&threadID=16023
Measure in 360 photos with

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top

Go to the top of the page

Graydon

Professional

Posts: 614

Location: Texas

Occupation: Industrial gas turbine services.

12

Tuesday, February 24th 2009, 9:25pm

depending upon the complexity of the lines / design you may have to split your design into multiple images and then layer them using the z-order.

It may be as simple as a single image for the bottom and then an image for the side... but you could have an image that goes across the bottom, another image that sits in the corner and a third image that goes up the side.

If you have a specific idea I might be able to suggest something.

Graydon

Marlin Creek
Marlincreek.com
graydon@marlincreek.com

Go to the top of the page

klaus.krpano

Administrator

Posts: 12,884

13

Wednesday, February 25th 2009, 10:43am

Hi,

don't forget to have a look at to the example included in this post:
http://krpano.com/forum/wbb/index.php?pa…D=1433#post1433

there I made a example exactly like this:

Source code

<!-- borders -->
<plugin name="mask_l" url="mask_l.png" align="left"   height="100%" enabled="false" zorder="1" />
<plugin name="mask_r" url="mask_r.png" align="right"  height="100%" enabled="false" zorder="1" />
<plugin name="mask_t" url="mask_t.png" align="top"     width="100%" enabled="false" zorder="1" />
<plugin name="mask_b" url="mask_b.png" align="bottom"  width="100%" enabled="false" zorder="1" />

<!-- edges -->
<plugin name="mask_tl" url="mask_tl.png" align="topleft"     enabled="false" zorder="2" />
<plugin name="mask_tr" url="mask_tr.png" align="topright"    enabled="false" zorder="2" />
<plugin name="mask_bl" url="mask_bl.png" align="bottomleft"  enabled="false" zorder="2" />
<plugin name="mask_br" url="mask_br.png" align="bottomright" enabled="false" zorder="2" />

<!-- logos -->
<plugin name="mask_logo1" url="mask_logo1.png" align="bottom"      enabled="false" zorder="3" />
<plugin name="mask_logo2" url="mask_logo2.png" align="bottomright" enabled="false" zorder="3" edge="bottom" y="5" x="25%" />

Go to the top of the page

nelk

Intermediate

Posts: 358

Location: Paris

14

Thursday, July 16th 2009, 4:29pm

Hi,

I'm trying to make a mask, but with rounded border.

Is there an easy way to do this ?

VideoStitch, a video stitching engine / blog sur les visites virtuelles ( french ).

Go to the top of the page

nelk

Intermediate

Posts: 358

Location: Paris

15

Thursday, July 16th 2009, 4:56pm

Ok ... finally, i made my own swf plugin to do this

This is basically the code I've used :

Source code

var s:Sprite = new Sprite ();
s.graphics.beginFill(0xFFFFFF);
s.graphics.drawRect(0,0,stage.stageWidth, stage.stageHeight);
s.blendMode = BlendMode.LAYER ;
addChild(s);

var mask:Sprite = new Sprite ();
mask.graphics.beginFill(0xFFFFFF);
mask.graphics.drawRoundRect(100,20,600,500, 40);
mask.blendMode = BlendMode.ERASE ;
s.addChild(mask);

VideoStitch, a video stitching engine / blog sur les visites virtuelles ( french ).

Go to the top of the page

nelk

Intermediate

Posts: 358

Location: Paris

16

Thursday, July 16th 2009, 5:27pm

arg ... if the "box" is not center, the field of view is really strange ...

Klaus, you'll add the crop feature soon ? *unsure*

VideoStitch, a video stitching engine / blog sur les visites virtuelles ( french ).

Go to the top of the page

klaus.krpano

Administrator

Posts: 12,884

17

Friday, July 17th 2009, 8:01am

Hi,

you could use the "scale9grid" feature for that,

e.g.
there is this image with an alpha channel: (the white area is transparent)

select the area that should be scaled:

and set it: (scalegrid="x-position|y-position|width|height")

	Source code
1	<plugin ... scale9grid="29\|32\|391\|228" >

then only the middle area and the side areas are scaling,
the edges will always stay in the same size,

here an example:

HTML: http://krpano.com/examples/108b8/example…scale9mask.html
XML: http://krpano.com/examples/108b8/example…/scale9mask.xml

best regards,
Klaus

Go to the top of the page

nelk

Intermediate

Posts: 358

Location: Paris

18

Friday, July 17th 2009, 10:23am

Thanks Klaus,

And for the "crop" or "select area" feature, to choose where krPano should draw the panorama (to make an asymmetric mask, with more space on the left than on the right), any chance to have it during this summer ?

VideoStitch, a video stitching engine / blog sur les visites virtuelles ( french ).

Go to the top of the page

klaus.krpano

Administrator

Posts: 12,884

19

Sunday, July 19th 2009, 3:42pm

Hi,

okay, I understand, you the pano view area,
yes, I think/hope so that it should be ready this summer,

best regards,
Klaus

Go to the top of the page

Mask question

Mask question

Quoted from "Tuur"

Source code

Source code

Source code

Similar threads