Warning (with Cookies)
NOTE: THIS TUTORIAL HAS BEEN DESIGNED TO RUN ON PANO2VR VERSION 7.1.2.
In a recent update to iOS 17 in Safari, a bug was introduced that dramatically affected Virtual Tours. The bug affected the virtual tour panoramas by randomly turning them very dark with high contrast and the only way to fix it was to reload the tour.
To inform viewers about this bug and to provide a remedy I developed a “Warning” feature that displays when a tour is loaded but before the Splashscreen or first node with the UI is displayed.
Warning is an function that allows you to display a graphic before the splashscreen or virtual tour is shown. The display of the warning is managed by setting a cookie. When the Warning is shown and the viewer clicks to proceed the cookie is set and the warning will not be shown again until the cookie has expired or is reset.
The initial version only worked on iPhones with iOS 17 and Safari. In this version, I’ve expanded it to have the following features so it can be used as a way of creating a one-time option for communicating with the viewer.
Toggle on/off
User-selected Logo (square)
Reset Cookie Button (optional, with multiple positions)
Show on All or show just on Mobile
Show on specific browsers (Safari, Chrome, Edge, Firefox)
Multiple Language support
The screenshots below show the iPhone/Safari warnings in both English (left) and Burmese (right) and alternate logos.
Adding a Warning (Global)
Open the 4_SPLASHSCREEN_VALAN.(p2vr) file and save it with the name 1_WARNING_VALAN.(p2vr).
Open the Edit Skin Configuration window and scroll to the -[ COOKIES ]- section.
Set the attributes for - [ COOKIES ]-;
Show a Warning on Splashscreen: = checked
Waring Logo [ inc. ext ]: = warning_iphone.svg
Reset Cookie Btn Position [ top/left, right - bottom/left, right ]: = topleft
Show on Desktop [ select browser version/s ]: = checked
Show on Chrome: = checked
Note: With “Show on Desktop” checked the Warning will only appear on desktop devices and the browser/s selected. In this case Chrome.
Chrome is my default browser, if you are using another browser check that one.
Click OK to save the Edit Skin Configuration changes.
Select the “Loading” node and in the Properties - User Data > User Data panel enter the following text in the Comment field.
Warning is a function that allows you to display a graphic before the splashscreen or virtual tour is shown. The display of the warning is managed by setting a cookie. When the Warning is shown and the viewer clicks to proceed the cookie is set and the warning will not be shown again until the cookie has expired or is reset.
Click OK to save the Edit Text changes.
Save the project and output the project. The splashscreen on the iPhone (Safari) and browser (Chrome) should look like the example below.
Note: With “Show on Mobile” checked the Warning will only appear on mobile devices and the browser/s selected. In this case Safari.
Using the iOS simulator the only browser I have availabe is Safari.
To target just the mobile device we would apply the following:
Open the Edit Skin Configuration window and scroll to the -[ COOKIES ]- section.
Set the attributes for - [ COOKIES ]-;
Show a Warning on Splashscreen: = checked
Waring Logo [ inc. ext ]: = warning_iphone.svg
Reset Cookie Btn Position [ top/left, right - bottom/left, right ]: = topleft
Show on Mobile [ select browser version/s ]: = checked
Show on Safari: = checked
Click OK to save the Edit Skin Configuration changes.
Save the project and output the project. The splashscreen on the iPhone (Safari) and browser (Chrome) should look like the example below.
To target desktop and mobile devices we would apply the following:
Open the Edit Skin Configuration window and scroll to the -[ COOKIES ]- section.
Set the attributes for - [ COOKIES ]-;
Show a Warning on Splashscreen: = checked
Waring Logo [ inc. ext ]: = warning_iphone.svg
Reset Cookie Btn Position [ top/left, right - bottom/left, right ]: = topleft
Show on Desktop [ select browser version/s ]: = checked
Show on Mobile [ select browser version/s ]: = checked
Show on Chrome: = checked
Show on Safari: = checked
Click OK to save the Edit Skin Configuration changes.
Save the project and output the project. The splashscreen on the iPhone (Safari) and browser (Chrome) should look like the example below.
Note: Both examples are showing the red Cookie Status button is visible showing the current status “Cookie Not Set”.
Clicking on the red warning icon to continue will change the cookie status button to green “Cookie Set” and reveal the Splashscreen.
Note: Once the cookie is set the warning will not be displayed until the cookie has expired. To hide the Cookie Status button leave the Reset Cookie Btn Position field empty.
Note: For testing purposes you can reset the cookie by clicking on the green “Cookie Set” button.
Note: In order to change the language you will need to generate a new Translation Template, open the my_MM.po file, update it from the POT file just generated, 4_SPLASHSCREEN_VALAN.pot and then translate the text.In the top left corner,
Changing the Cookie Time
In the **UNIVERSAL_SKIN folder double click on the UNIVERSAL_SKIN.ggsk to open it.
In the Tree, select IND SETTINGS to reveal the sub-headings.
Select CONFIG LOADED and open the Actions panel.
Double-click on the Config Loaded | Go to URL action to reveal the Action Settings window.
Click on the “pencil” icon next to URL: and change the days to your new setting.
Select OK to close the windows.
Collapse the IND SETTINGS.
Save the Skin and republish the Project.
This finishes the section on Warning with Cookies.
In the next post, we will examine the different Navigational Menus available within the project.
