Panorama Lock for Pano2VR light

Post Reply
User avatar
Posts: 10833
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK

Sat Nov 02, 2019 8:52 pm

This component prevents the viewer from interacting with the panorama until they enter a password.
If you're using Pano2VR pro please Click Here.

(32.73 KiB) Downloaded 118 times

After downloading the component double lick to add to the components toolbox.
Then select a category or create a new one.

Because of security, you need to open a blank image first so you will need to have two project files.

How to use the component:
• Build your project as normal creating a new skin or using one of the skins that come with Pano2VR.
Note if you're using a skin that comes with Pano2VR select File => Save.
You will see the Error writing file dialogue, click OK then save to the projects folder.

1.png (37.73 KiB) Viewed 4590 times

When you are happy with the project deselect the skin and create the output. Then Save and close the project file.

2.png (28.3 KiB) Viewed 4590 times

• Start a new project and add the blank.png as the panorama then save the project. This will be the opening project so give it an appropriate file name such as "pano_lock.p2vr".

• Add an HTML5 output and set the output to use the same output folder by right button clicking the output file path and selecting, Edit.

3.png (40.76 KiB) Viewed 4590 times

Change the file name to the first projects output folder by default it is "output". Pano2VR will say the folder is not empty, Use it anyway, select Yes, then save the project.

4.png (21.69 KiB) Viewed 4590 times

•Select the skin you used for the first project, then using the Edit Skin button open the skin and Components Toolbox and add the Panorama Lock light component. Make sure the component is above all other elements in the skins tree with the Key Pad at the top, then Lock Screen below that.

5.png (38.97 KiB) Viewed 4590 times

• Under the Advanced tab of the HTML5 output and under "Output", change the file name from the default "output/pano.xml" to "output/lock.xml". To change the file name right button click on the file path and select Edit.

6.png (46.72 KiB) Viewed 4590 times

Then change the multi-resolution naming convention to: tiles/$n/cf_%c/l_%l/c_%x/tile_%y.jpg.

7.png (106.18 KiB) Viewed 4590 times

• Create the output. The output folder should have one index.html file and two XML files, one for the panorama and one for the lock screen "blank" panorama.

8.png (42.13 KiB) Viewed 4590 times

Note the lock project overwrites the HTML page which it should so it opens the blank panorama. Make sure the pano_lock.p2vr project file is the last project that creates an output otherwise the index.html page will open the wrong panorama.

What will happen is the project will open showing the blank panorama the rectangle which covers the skin and the keypad. If you have not entered a password you will see a textbook asking you to set one.

9.png (13.54 KiB) Viewed 4590 times

Enter the password using the keypad. The rectangle will hide and the pano_lock project will load the pano.xml file and display the panorama.

The component comes with no encryption so it will be easy to see how to unlock it.
This is because the buttons use their numbers.
Example, Key Pad button 1 enters 1, Key Pad button 2, enters 2 and so on.
This is not secure because you can see the password used if you open the skin.js file with a plain text editor.

10.png (49.58 KiB) Viewed 4590 times

What is required is a way of encrypting the password so you cannot decipher it from the skin.js file.
As already said each button enters its matching number, if you go to the skins tree and expand the container "Key Pad", you will see text boxes Key 1 to Key 0 then Key # and Key *.

11.png (29.76 KiB) Viewed 4590 times

Each key has an action to enter a value into the variable called "password".
But what if Key 1 used a letter and not a number!
You can make up your own Cypher so only you will know the numbers.

Again here is an example:

Key 1 = Z
Key 2 = b
Key 3 = p
Key 4 = q
Key 5 = a

So in the skin editor, you would change the action.
Example for Key 1 which now will enter z.

12.png (48.17 KiB) Viewed 4590 times

Note letters are case sensitive so z is not the same as Z.

The above Cypher is totally random, but if the password I want the viewer to enter is 54123.
Then in the skin.js file, you will see: aqzbp
Unless you have the cypher it will be very difficult to find the password.

Please see a working project attached.

(1.26 MiB) Downloaded 113 times
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
Post Reply