Skin Elements no longer aligning accurately, off by 1

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
mbb
Posts: 210
Joined: Mon Oct 19, 2009 11:42 pm

Skin Elements no longer aligning accurately, off by 1

Post by mbb » Sat Dec 01, 2018 7:02 am

Pano2VR v6.01, Win10 64bit

This is a strange one- all of a sudden, I have noticed that certain skin elements that were aligned perfectly before are now of by 1 pixel or so.

I have round svg icons with a rounded rect as an outline. all elements are set at center. these were aligning perfectly before and now they are off by 1 pixel. Which looks sloppy in the tour UI.

Even started a brand new empty skin, inserted an svg icon (GG silhoutte icon), sized it down to a smaller even number, put a rounded rect behind it slightly bigger by a few (even) pixels, had everything set to "center" and they are not aligned with each other.

I did not have problems with this in the past.

mbb
Posts: 210
Joined: Mon Oct 19, 2009 11:42 pm

Re: Skin Elements no longer aligning accurately, off by 1

Post by mbb » Sat Dec 01, 2018 7:28 am

aaand it gets stranger.. uploading the vr tour to the web server and viewing it from there shows the skin elements in question aligning properly.

Opening P2VR again and loading it locally shows the misalignment (in browser and skin editor). Same browser (Firefox), same output files..

Really have no idea what's going on at this point.

User avatar
Hopki
Gnome
Posts: 9373
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Skin Elements no longer aligning accurately, off by 1

Post by Hopki » Tue Dec 04, 2018 4:02 pm

Hi,
In Pano2VR 6 the skin uses the same rules for element alignment as CSS.
Before it copied how Flash treated borders.

So if you have two rectangles anchored top left, 100 x 100px which are both parent elements and are in the same position and both with border 0 stacked onto of each other then one will cover the other.
If you add a 5px border to the back rectangle you will see it move to the right and down as its anchored to top left.
The border is of course adding size the the rectangle.

If you then reset the test and anchored both middle the the back rectangles border will scale up from the centre.

If you reset the test and then moved front rectangle as a child of the back with it anchored centre and the parent anchored top left it will still scale up evenly.

If this is not what you are seeing then maybe send in a simple project that shows the issue as tested on both Windows and Mac and see no real issue.
But then I can. not see without your project what you are doing.

Regards,
Hopki

mbb
Posts: 210
Joined: Mon Oct 19, 2009 11:42 pm

Re: Skin Elements no longer aligning accurately, off by 1

Post by mbb » Tue Dec 04, 2018 10:40 pm

This has to do with elements that are *centered* over each other, not top right, left, bottom etc.

Here's a skin example with two elements that should be centered but do not appear as such-
alignment_test.ggsk
(1.42 KiB) Downloaded 29 times

User avatar
3DV
Posts: 58
Joined: Tue Dec 15, 2015 12:44 pm
Contact:

Re: Skin Elements no longer aligning accurately, off by 1

Post by 3DV » Mon Mar 04, 2019 10:25 pm

Can confirm this issue.

If an object has a border width > 0, the total size of it increases of course due to the border being added around it.
But it also uses a new anchor point for it's children, instead of the original/entered X and Y position.
With middle-centered aligned objects this effect is not visible, but with anything else the border width shifts the anchor point that the children use.

In the example the Rectangle 1 anchor is at 40,60. But with a border of 5, the anchor that is used by Rectangle 2 is 45,65.

I think there are two options to fix it:
1: the border can be drawn outside the rectangle as is done now, but it should not move the background rectangle based on the border width/anchor alignment, and it should not change the anchor position.
2: the border could be drawn on the inside of the rectangle, then the total width/height of the rectangle including border will still be correct
Attachments
Skin-alignment-borderwidth-issue.mp4
(971.57 KiB) Downloaded 16 times
http://www.3dv.nl - Artist impressions and animations
http://www.vrtourviewer.com - Enjoy Pano2VR tours on Oculus Go, Rift, Gear VR, Daydream and Cardboard

User avatar
Hopki
Gnome
Posts: 9373
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Skin Elements no longer aligning accurately, off by 1

Post by Hopki » Tue Mar 05, 2019 4:48 pm

Hi,
Yes, the border adds width, if you have the anchor top left and add a border to the parent rectangle it will expand moving to the right.
For the child element it will be anchored to the top left of the rectangle not the border and will also mode in relation to its parent.

In the case you would change the anchoring of the child element to say top middle.
Adding say 3px border to both parent and child rectangles will keep them together.
anchor.mp4
(2.99 MiB) Downloaded 16 times
Regards,
Hopki

User avatar
3DV
Posts: 58
Joined: Tue Dec 15, 2015 12:44 pm
Contact:

Re: Skin Elements no longer aligning accurately, off by 1

Post by 3DV » Thu Mar 07, 2019 12:57 pm

Thanks for the explanation, so it seems it's intended behaviour.
I just think it's a bit odd that the anchor point for the children is shifted in x/y when the parent has a border width (depending on anchor position, only no shift when center/middle is chosen). But can easily be countered by moving all children back in the reverse direction, or creating a single child without border, that's moved back and contains all children.
http://www.3dv.nl - Artist impressions and animations
http://www.vrtourviewer.com - Enjoy Pano2VR tours on Oculus Go, Rift, Gear VR, Daydream and Cardboard

Post Reply

Who is online

Users browsing this forum: No registered users and 5 guests