Changing anchor positions with a Logic Block

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
We have a feature request to be able to change the anchor position of an element using a logic block/button.
The attached project does this using CSS.
In reality, you would probably only want to change an anchor position of an element to two different positions, for example, an element to be anchored to the side for desktop and anchored centre for a mobile.
However, this project looks at all nine anchor positions.

On open, you will see the nine squares representing the anchor positions of the two circles.
The Green one is a parent element in the skin while the Red circle is a child element of a rectangle that has size using percentage and changes size with the browser.

How this works is both circles have their actual anchor set to the top left.
Using RAW CSS, known as just CSS in Pano2VR, you can then use the calc CSS to set positions.
The skin has a numbered variable, the nine squares just set a variable value 0 ~ 8 .
In the position logic block, there are the calc settings.
For example, to set, top middle of a circle that is 100px wide you would use:

X: calc(50% -50px) then Y: 0px

So what this does is move the 100px circle to 50% of the window, but this would reference the top left edge of the circle.
This is where the -50 px comes in so it centres the circle in the middle of the window.
Then Y: 0 means its stays at the top of the window.

Another example, to anchor the circle to the top right the CSS would be:

X: calc(100% -100px) then Y: 0px

So moves the circle to 100% of the window, but not forgetting it is referenced top left of the circle so it will now be off-screen.
But the -100px will bring it back, and as the circle is 100px wide you will see all of it.
Have a look at the position logic block and you should be able to work it out for the rest of the positions.

Once the logic block was created for one of the circles, it was just copied and pasted into the other circles' position logic block.
Regards,
Attachments
anchor.zip
(14.37 KiB) Downloaded 360 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply