Responsive skin

edgar_ali · Sun Oct 27, 2019 7:26 am

Currently the skin simplex_v6 has almost everything that I need, however I need to add two additional buttons:

One button to show/hide a map
Another button to show/hide polygon hotspots.

I understand that the current configuration of the skin is design to be responsive using the following parameters:

the above is a logic block for the thumbnail element in the skin. Counting from left to right this is the 5th element in the skin. As the element move towards the right, the number of actions in the logic block increase. For example for the element autorotate, which is the element # 3, there are 3 actions. for the element information, which is number 4, there are four actions. so when you get to the thumbnails, which is the element #5 there are 5 actions.

Having said that for the elements 1 and 2, which are the zoom in and zoom out, there are no actions in the logic block, no logic block at all in the position. Why is this?

Is there any way to add additional buttons to the simplex_v6 skin maintaining its configuration?. I really struggle with logic blocks and the parameters.

I do not need the buttons for zoom in, zoom out, projections. I tried removing the zoom in and zoom out buttons, then adding the map and polygon buttons but then one of the buttons is on top of the information button or the autorotate button.

any suggestion to add these two buttons without having to start a skin from scratch?

I am aware that we should not be modifying the template simplex_v6, but i am desperate

Tony · Mon Oct 28, 2019 4:26 pm

Hi Edgar,

I read your post and I've been meaning to do a deep dive into the V6 skin so I took the opportunity to do so. That said I've managed to add two new buttons,Camera and Cart, to the skin retaining all the existing functionality and adding the two new buttons to the 'Edit Skin Configuration' window.

: p2vr-v6-1.jpg (176.82 KiB) Viewed 2068 times

The following are two versions the one on the left has the zoom, rotate, info, camera & cart buttons activated, the one on the right only the camera & cart are activated. The green boxes show the containers, 'controller' and 'controller-slider', I've added them so I can visually see what's happening. I also have a couple of text boxes showing me some of the value outputs (handy for testing).

: p2vr-v6-2.jpg (192.24 KiB) Viewed 2068 times

Having said that for the elements 1 and 2, which are the zoom in and zoom out, there are no actions in the logic block, no logic block at all in the position. Why is this?

Elements 1 & 2 always appear together and they are at positions 0,0 and 32,0 respectively so there is no need to move them, they only need to be visible or hidden.

Is there any way to add additional buttons to the simplex_v6 skin maintaining its configuration?. I really struggle with logic blocks and the parameters.

Yes, but you need to understand the relationship between the controller container, the controller-slider container and the child elements within the controller-slider container. When you add new elements you need to make the controller container larger to accommodate them. Then you have to add additional variables 'opt_"button name"' and 'pos_"button name"' and update the controller | Properties | Position Logic Block; controller | Properties | Actions. You also have to create new Properties | Position Logic Blocks and Actions for each new element.

: p2vr-v6-3.jpg (1.07 MiB) Viewed 2068 times

Basically each element adds a value to a variable as you can see from the examples above. When only the camera and cart are selected the 'pos controller value is = 2'. This means the first element, the camera will be at 0,0 position in the controller-slider container and the controller-slider container top left will be located 144 pixels from the top left of the controller container.

: p2vr-v6-4.jpg (25.82 KiB) Viewed 2068 times

I am aware that we should not be modifying the template simplex_v6, but i am desperate

You don't have to modify the template, simply save it with a new name and then you can play around trying different things.

If you want to send me the two buttons I can add them to a V6 skin if you like.

cheers,

Tony

edgar_ali · Tue Oct 29, 2019 6:19 am

Tony:

Thanks a lot for your reply, I really appreciate your support..

The size of the container is something i did not take into account before... While I practice with this it would be fantastic if you could add those two buttons to the skin...

The button for the map (Map Simplex) I just took it from the Components Toolbox, in the skin editor. The other button is to show/hide the polygon hotspots, I am attaching it here.

I do not understand why I could not attach the SVG file by itself, I had to zip it and then attach it. The system was not accepting the SVG file by itself.

Tony · Tue Oct 29, 2019 6:38 am

Hi Edgar,

What do you want the tooltips for each button to display? ie Show/Hide Map, Show/Hide Polygons?

Tony

Tony · Tue Oct 29, 2019 7:21 am

Hi Edgar,

All done. You can see an output version here https://p2vr.s3-ap-southeast-2.amazonaw ... index.html

I've attached the skin. You can turn the Map and Polygon buttons on and off via the 'Edit Skin Configuration' window. I've also included the testing elements that you can enable by checking the 'Turn on Testing Elements' in the config window.

At the moment I've only added a simple Mouse Click Action that toggles the Alpha of a rectangle.

cheers,

Tony

edgar_ali · Wed Oct 30, 2019 9:48 am

Tony:

Thanks a lot...It looks great...

I am adding tiny things and when I finish it I will put it here in case someone find it useful.

Regards,

Edgar

Tony · Wed Oct 30, 2019 10:03 am

Hi Edgar,

I'd like to see it once you've finished.

Tony

edgar_ali · Mon Nov 04, 2019 1:35 am

Tony:

I did some tiny modifications to the skin that you provided and published a tour at this address:

https://the360guide.com/sydney/

The tour titled "Fear Factory" is the one with the skin that we have worked on.

I also want to add a logic block to the text containers, so these can be responsive in a mobile environment. So I added the following logic block:

However when I see the tour in full screen the text container looks giant:

When you decrease the size of the window, it looks like this:

Which looks fine...the issue is when is full screen.

The tour on the website does not have the logic block.

Is there a better way to do this?

I am also attaching the skin that contains the logic block in case you would like to have a look at it.

Regardless of the logic block/ responsive issue that I am trying to implement, the skin works really good, thanks for all the support.

Edgar

Tony · Mon Nov 04, 2019 2:47 am

Hi,

Are you using a point hotspot or polygon in the panorama to manage the visibility of the userdata element?

Tony

edgar_ali · Mon Nov 04, 2019 2:54 am

I think the user data does not use a hotspot, it is controlled by the button (i) in the control panel...isn't that the case?

Tony · Mon Nov 04, 2019 4:01 am

Okay, is the content hard coded into the text boxes?

edgar_ali · Mon Nov 04, 2019 4:17 am

Well I have got three different text boxes:

1. User data (activated using the i button in the control panel)

2.information from polygon hotspots. These are activated when clicking on a polygon hotspot:

I also have got a button in the skin that show/hide the polygon hotspots

3. Finally I have information hotspots (ht_info) to provide additional information in some points...

Tony · Mon Nov 04, 2019 4:57 am

Hi,

When you are in Fullscreen the UserData window looks huge because you have the userdata element Size Property set to 64% x 80%. Also all of the child_elements within the container have percentages applied to them. This means everything scales wildly and looks weird except the text which doesn't have a scaling option. The original V6 has all fixed pixel dimensions.

: p2vr-1.jpg (288.98 KiB) Viewed 1839 times

What is your intent for the UserData window in regards to viewing it in fullscreen or on a large browser window?

Tony

edgar_ali · Mon Nov 04, 2019 11:06 pm

The reason is that when you watch the tour in a mobile device, the screen of a mobile device is not a big as your normal monitor and end up cropping the text containers, so I thought that if I was to include a logic block to react to the mobile screen size, then you will be able to see the full text container

Tony · Tue Nov 05, 2019 1:03 am

Hi,

Yes that's easy to do but you also need to have it useable on the desktop version. I'm trying to find out how you want the desktop view to look so I can set up both.

Tony