Relative positioning on a screen to the borders??

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
nigbo
Posts: 57
Joined: Mon May 21, 2012 8:27 am

I put two arrows on the left and right side of the screen, trying to get it realtive alsways near the horizontal outside in the vertical middel of the screen. I did not find a solution yet, how to do this, my arrows always stay on the same place (absolute positioning)

I would appreciate a short hint or which tutorial I should watch to learn this...

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

Hi,
Have a look at the anchor, the nine small squares next to the elements position.
Example if you want an element to stay half way up the right hand side, then select the anchor middle right.
It will then say the same relative distance from the middle right.
Regards,
Hopki
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/
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi nigbo,

Is this what you are trying to achieve?

https://rebrand.ly/p2vr-arrows

If so take a look at the attached skin.

arrows.ggsk
(1.45 KiB) Downloaded 232 times

Just remember when you are placing elements the 0,0 point of the object is top left. In the attached skin each arrow is 24 pixels high, so after using the Menu/Edit/Center Element in Canvas/Vertical the element has to be moved up 12 pixels to compensate for the offset and to center it vertically.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Tony, I looked at your example.

I noticed that the black [<-] [->] 30 px wide on the horizontal X axis by 24 px high on the Y vertical axis arrows correctly screen edge stay in position EVEN when increasing / decreasing the browser window size. ie... large desktop monitor size down to smaller smart phone screen size.

The arrows remain 24x30px dimension size.

To expand on this discussion I went in search of where x = zero and y = zero.

I found that canvas 0,0 is located in the upper left corner of the canvas See black dot
I found that [<-] and [->]objects 0,0 is located in the upper left corner of the arrow object box See black dot

This means to me that all pixel dimensions are measured from upper left corner of the object boxes and canvas area.
The ANCHOR point is for relative positioning the object on the canvas borders regardless of the large or smaller screen monitor size.

To get passed the geek talk, here is a picture of the drawing I was working on.

UPdate:
Calculate Right Arrow box position.
Canvas = 640px.
-arrow 30px width = 610px.
-2 px edge border space to -> right side arrow box width = 608 pix
upper left corner of right arrow box = 608 pix from far left canvas edge

Thanks Tony I used your dimensions from your .ggsk file.

Where is 0,0
Where is 0,0
positions.jpg (54.46 KiB) Viewed 5185 times
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Comments ?
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

360Texas wrote: Thu Dec 14, 2017 12:48 amComments ?
Yes, aware of the 0,0 positioning on canvas and objects. It would be good to be able to define the position the 0,0 point on both the canvas and the object. Especially on the object as it would make precise positioning easier.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
nigbo
Posts: 57
Joined: Mon May 21, 2012 8:27 am

Thanks for all the contributions to the question.
Sorry for a long delay of coming back. I tried out a lot, but do not find the answer and don't understand the concept of the canvas size

What I try to do: to position the arrows previous and next panorama at the left and right edge of the canvas.

If the canvas is 640 and I put the arrows on 0 for the left one and 620 on the right one, would that put the arrows at the edge no matter what the size would be on the final screen? My result gives me a fixed position. So the larger the screen size, the more the arrows go away from the edge.

Is it at all possible to get the arrows relative to the edges????
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi
What I try to do: to position the arrows previous and next panorama at the left and right edge of the canvas.

If you take a look at my sample project the arrows always stay at the left and right of the screen no matter how big or small the page gets.
Is it at all possible to get the arrows relative to the edges????
https://rebrand.ly/p2vr-arrows

I also provided you a skin so you can build a test project.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
nigbo
Posts: 57
Joined: Mon May 21, 2012 8:27 am

Thanks Tony,

I tried it again, more thoroughly. Copied your arrows into my template.
Your arrows work well, my own, with exactly the same settings stay where they are fixed in the template

The only difference between yours and mine is:
yours arrow simple arrows with no action
my arrows are from the component list and have the action "Pano next" and opening Panorama $next or $previous

Now I manually added these functions into your own arrows: it works well, yours stay at the edge left or right, mine don't.
I got a solution but don't understand, what the difference between the two arrows are...

Any idea? what parameter did I not find? All the visual available fields and settings are exactly the same.
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,
Now I manually added these functions into your own arrows: it works well, yours stay at the edge left or right, mine don't.
I got a solution but don't understand, what the difference between the two arrows are... Any idea? what parameter did I not find? All the visual available fields and settings are exactly the same.
If you are using the Next/Previous Component the button and text elements are grouped within a container called 'button_(simplex)_next_previous'. Try moving the button and text elements out of the container.

Here's an new skin with both the old arrows and new arrows built using the Next/Previous component.

Tony
Attachments
arrows_2.ggsk
(6.35 KiB) Downloaded 209 times
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi nigbo,
The magic is in the position anchoring.
Example: With a skin canvas size of 640 x 480 look at the position and anchoring.


left.png
left.png (53.21 KiB) Viewed 4951 times
right.png
right.png (54.88 KiB) Viewed 4951 times

The rectangles will always be 10px for the sides.
Regards,
Hopki
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