Universal Skin Workflow

The concept of the Universal Skin is to provide a “Click and Implement” solution for creating fully functional, device responsive Virtual Tours. To accomplish this the addition of over 100 Custom Properties, hundreds of Logic Blocks and Exposed Colors result in a skin that contains over 170,000 lines of text.

This amount of data can have an significant impact of the Output times when publishing. It can be quite frustrating during the rapid development phase of a project.

This post contains a workflow that can be applied that removes the roadblock during development and we will cover the following topics:


Comparing Skin .ggsk Files

It can be helpful to understand the issue by examing the .ggsk and .xml files and how they work within Pano2VR.

If we were to compare the size of the UNIVERSAL_SKIN (.ggsk), to one of the standard V7 skins such as the feather_box_extended (.ggsk) we can see that the universal skin is 905 KB compared to the feather box 407 bytes is almost 230,000% larger.

Note: The Universal_Skin (.ggsk), includes all the skin elements, such as audio, svg, fonts and skin.xml. While the feather_box_extended (.ggsk) only contains the skin.xml.


Comparing Skin .xml Files

The skin.xml files contained within the .ggsk file feather_box_extended (.ggsk) is 557 bytes (unzipped) and 293 bytes (zipped) and contains 21,304 lines of code, while the RPGTV 2025 Universal_Skin is 7.3 MB (unzipped) and 227 KB (zipped) and contains 170,454 lines of code. This is over 800% larger!

If we look at the UNIVERSAL_SKIN_BASE_COLOR (.ggsk) it is slightly smaller at 7.2 MB (unzipped) and 239 KB (zipped)


Time to Generate an Output

While the size difference doesn’t have any effect on the development time while working within Pano2VR or the viewing time when running the project on a server it does have a significant impact on the time to generate an output.

During the output the .ggsk file (basically a zip file) needs to be uncompressed this causes a slow down in the Pano2VR application.

For example, I’m working on a Mac Studio with the Apple M2 max and 96 GB of Memory, The output time for the project *BASE_EN (.p2vr) with the UNIVERSAL_SKIN (.ggsk) is approximately 25 seconds.

However if I use the UNIVERSAL_SKIN_BASE_COLOR (.ggsk) the output time is reduced to 5 seconds.

This is quite a difference knowing that the two .xml files are only 1.38% different but using the UNIVERSAL_SKIN_BASE_COLOR (.ggsk) is 133% faster than using the UNIVERSAL_SKIN (.ggsk)


Optimising the Workflow

We can optimise the workflow by working in two stages; Stage 1: Functional development and Stage 2: Colorization of the UI.

Stage 1: Using the Universal_Skin.ggsk all of the nodes, functionality of the hotspots are developed and refined and project settings via the Edit Skin Configuration window.

Stage 2: The skin.xml file of the Universal_Skin (.ggsk) is modified by adding in the "externalized color" settings code found in the UNIVERSAL_COLOR.txt file and the color assigment made via the Edit Skin Configuration window.

To modify the Universal_Skin (.ggsk) we need to use an application that will open (unzip) the .ggsk to show us the files contained within it and once we can see the files open the skin.xml in an application that we can edit in.

The image below shows a number of applications that allow us to “peek” inside a .ggsk file and potentially edit it. Personally I use WinZip, it’s a paid application but very powerful on both Mac and Windows. For a Mac only free application I have tested BetterZip and it meets the requirements.


Updating the UNIVERSAL_SKIN_BASE_COLOR.ggsk

1. Duplicate the UNIVERSAL_SKIN_BASE_COLOR (.ggsk) and give it a unique name eg UNIVERSAL_SKIN_PROJECT1 (.ggsk)

2. Open the UNIVERSAL_SKIN_PROJECT1 (.ggsk) with WinZip

3. Scroll down to the skin.xml entry

3. Right-click on the skin.xml entry and select “Open With” and then your text editor. In this example I’m using Xcode.

4. Scroll to the bottom of the code and add a return after </variable>

5. Open the UNIVERSAL_COLOR.txt in your text editor and select all of the text.

6. Copy all of the text

7. Return to the skin.xml file and paste in the code

8. Close the editor window
9. When prompted click on Update

Note; the application will update zip up the updated files

10. Close the application

11. Open your .p2vr file and change the skin to UNIVERSAL_SKIN_PROJECT1 (.ggsk)

Note: The Edit Skin Configuration images below show the UNIVERSAL_SKIN_NOCOLOR (.ggsk)(left) and UNIVERSAL_SKIN_PROJECT (.ggsk) (right)