Skin element in Screen Vs Skin Editor

edgar_ali · Fri Aug 30, 2019 4:04 am

I am currently having an issue with a skin element:

I have positioned the Gyro icon at the edge of the control bar in the skin editor, however, when I create the output and watch the tour, the skin element (gyro icon) appears in between the icon for next & previous panorama. Refer to the photographs.

I am attaching the skin just in case you need it

Any help would be greatly appreciated

Skin editor:

output:

soulbrother · Sat Aug 31, 2019 8:05 am

I guess you modified the original skin and mixed up the functions of the special design, that I call: "automatic button positioning".
This design uses variables and action filters and is the base for the "edit skin configuration"

So, if you are not 100% familiar with that "automatic button positioning", you should delete all actions that are using this design, to make shure that no residues are forcing your elements positioning.

edgar_ali · Sat Aug 31, 2019 1:08 pm

That is exactly correct...I modified the original skin...

Where are those actions for "automatic button positioning" so i can delete them all??

Never seen that before

soulbrother · Sat Aug 31, 2019 11:04 pm

Hi,
just found a few minutes, so see the screenshot of your skin:

: scr_01.jpg (190.37 KiB) Viewed 2472 times

For the container "gyro" you see an active logic block that changes the position of that container, due to the values of the variable "pos_gyro".
In the "Actions" you find 6 lines for setting the variable "pos_gyro".

This "construct" is used for that already mentioned "automatic button positioning".

So, make a safety copy of your skin and simply delete:
- the 6 actions lines
- the logic block for the "Position"
- the variable: pos_gyro
- and if not needed: the 5 lines for the "options" variables.

: scr_02.jpg (201.21 KiB) Viewed 2472 times

Look also in the button: "enter vr", there are 8 lines with actions, same construct: Those are needed for the positioning, but in your skin you don´t use that. And if you don´t use it, I would also delete, cause it is unnecessary code ballast.

Good luck!

edgar_ali · Mon Sep 02, 2019 6:33 am

Mate:

Thanks a lot...It works!

Really appreciated.

edgar_ali · Mon Sep 02, 2019 2:22 pm

Something is not right...

I did what you said and in one tour everything came great..now I trying with a different tour and it is not working...??

Any reason why?

Mon Sep 02, 2019 7:19 pm

Hi Guys,
I know this is a little late but if you want to start customising skins then don't use the default _v6 skins.
As it says in the skin if you want to modify it use the Skin Configuration button.

: 1.png (39.14 KiB) Viewed 2430 times

If you want to modify it past what you can do using the configuration button then you are best advised to start a new skin and just add the components you require.
I have been saying this since 6.0, of course, if you are happy in the skin editor then that's great, but if your not a skin junky and don't understand all the variables and logic blocks that this skin uses then I would not do it.

Also, a V6.1 skin opened in 6.0 will brake as 6.1 has new actions not found in 6.0.
What will happen is these actions will be substituted for actions in 6.0 which will be wrong.
So you can open old skins in new builds but not a new skin in old builds.
Of course happy to help if you need it.

Regards,
Hopki

edgar_ali · Tue Sep 03, 2019 1:28 pm

Hopki:

Thanks for replying... I am definetly not a skin junky..following your advice I started a skin from scratch and notice the following:

In the attached skin, all the elements seems to be in the same line, however the y-coordinates are different.

The y-coordinates for the icons of autorotation, gyroscope and full screen are equal to zero.
The y-coordinates for the map, hotspot and information icons are equal to 109.
The y coordinates for the VR icon are minus (-) 92

I took the actions for autorotation, full screen and gyroscope, and VR from the components toolbox. I copied the other actions from another template. Could that affect the coordinates?

Also notice that all the icons are not really centered once you create the output. Is there a better way to centre the icons?

I saw in other template that a logic block is used for the positioning..is that the approach I should used?,,

I still do not completely understand that logic block...

I also have another issue:

When I output the tour and watched in my mobile device using the app "documents" the gyroscope function works perfectly, however when I upload the tour to my website and watch the tour with my mobile device, the gyroscope function does not work...

The tour is in the following page:
https://the360guide.com/pano2vr/

I'm also attaching the tour that i watch in my mobile using documents. the same tour (files) that I used to watch it in my mobile are the same files that I uploaded to my website

Tony · Tue Sep 03, 2019 4:21 pm

The y-coordinates for the icons of autorotation, gyroscope and full screen are equal to zero.
The y-coordinates for the map, hotspot and information icons are equal to 109.
The y coordinates for the VR icon are minus (-) 92

The reason for the discrepancy is the fact that you have elements tucked away inside containers which are again in turn tucked away inside other containers. The X & Y positions of an element in a container are relative to that container. So if my container is set at X = 100px and Y = 100px and the element inside it has an X & Y of 10 & 10, and the element's anchor is top left, then the element will be offset from the top and top left of the container by 10px and sit at 110px x 110px in the skin.

In your skin the icons of autorotation, gyroscope and full screen are inside containers called, respectively, button_auto_rotate, gyro and button_fullscreen. The icons inside these containers have X & Y positions of 0:0 except button_image_fullscreen which is 1 & 0.

The three containers have the following X & Y positions. button_auto_rotate = -51px & -92px ; gyro = 29px & -92px ; button_fullscreen = -11px & -92px. The fact that all 3 have Y position of -92px means they are in aligned to their bottom edge.

Now all three containers are in another container called controller. Now the controller's X & Y is -118px & -119px.

The controller container is in another container called hide_controller_container and it's X & Y position is 1px & 23px and it's anchor is bottom center.

The map, hotspot and information icons are in the hide_controller_container so their X & Y positions are relative to only that container but their anchor point is set at top right.

The VR icon is in the hide_controller_container like map, hotspot an information but it's anchor point is bottom center.

In the image below I've highlighted all of the containers and pointed to their locations in your skin. This should give you an idea why they are all slightly out of place. (see image below)

: ipad-tutorial-1.jpg (301.31 KiB) Viewed 2397 times

I've gone through and repositioned all of the containers and elements so they are relative to each other as you move down through the container structure. (see image below)

: ipad-tutorial-7.jpg (411.23 KiB) Viewed 2397 times

I've also attached an updated skin file.

Tony

edgar_ali · Tue Sep 03, 2019 11:08 pm

Tony:

Thanks a lot, it looks tidier now.

There are still two issues now:

1. After your re-arrange the icons, now the action to hide the map is not working. How did you re-arrange the containers?..I was trying to do that, however every time I tried it, I was not able to de-select the files from the containers and then everything moved together, hence, not been able to re-arrange the files.
2. The gyroscope is still not working online (viewed from mobile device on the website), however it works when you run the tour in the app Documents.

https://the360guide.com/pano2vr/

I'm attaching the output (the one I watch on the app) and the tour files.

Any assistance would be greatly appreciated.

Tony · Wed Sep 04, 2019 1:36 am

1. After your re-arrange the icons, now the action to hide the map is not working.

My intention in supplying the skin wasn't to provide a working skin merely an example of how you can arrange the elements. You just need to reapply the actions.

How did you re-arrange the containers?..I was trying to do that, however every time I tried it, I was not able to de-select the files from the containers and then everything moved together, hence, not been able to re-arrange the files.

I just started by selecting the hide_controller container, set it's size to 300px x 60px, and centered it on the screen. Then selected the controller container set its size to 240px x 60px, set the anchor to bottom center and set the position to 0px x 0px. Of course everything in it moves off the screen but you just go through each element resetting the X & Y position.

2. The gyroscope is still not working online (viewed from mobile device on the website), however it works when you run the tour in the app Documents.

Make sure you are hosting on a secure site using https:

Tony

edgar_ali · Wed Sep 04, 2019 3:43 am

Tony:

Thanks for the clarifications...

Regarding the Gyroscope, I am sure my site use https: ... is there any other reason why that function could not be working?

edgar_ali · Wed Sep 04, 2019 5:47 am

Given that we have clarified the issue about the position for the icons in the screen and the skin editor, I considered that this post is concluded. I will open a new post for the discussion of the gyroscope.