Create a Multilingual Project

Pano2VR supports the use of translation files to easily build projects in multiple languages.

Pano2VR supports not only a translated project but a translated skin as well. This means you’ll find two options to translate; one in the project settings and one in the Skin Editor. Once a project and/or skin has translation files, you can use the skin to switch languages.

We are using the translation tool, Poedit. It is free and available across all operating systems.

Translating the Project

Hotspots, nodes, user data, project user data, and PDF files are examples of what gets translated in the project translation file.

1. Download and install Poedit. This is the tool we use to create the translations.
2. Go to the General Properties.
3. In the Translations section, choose the project language. This is the default language.
   

   

4. Click the button for Generate Translations Template. This will automatically create the translation template file and add it to the translations folder. This is a POT file that is compatible with Poedit.
5. In the dialog that appears, click the link that will take you to the file’s location.
6. Open the template file in Poedit. Note that it is a template file, not the translation file.
7. At bottom of the Poedit window, click the big button that says Create new translation.
   

   

8. Choose the language to translate to.
9. Now you can start translating by selecting a line and at the bottom of the screen, for “Translation” type the translation. In the panel at the top-right, there are suggested translations that you can use by clicking on them. However, you can only use this 10 times in the free version. After that, you’ll be asked to upgrade.
10. Save the translation and two files will be generated. Pano2VR uses the .po file.
11. In the Skin Editor, add a button(s) to change languages.

All project text will now be translated. If you need to translate the skin as well, the steps are just about the same. See the next section.

★ Tip: If you’re using macOS, you can translate the text by selecting it, and in the context menu, choose Translate Text.

★ Tip: In the lower, right panel under Notes for translators, you’ll see where the correct text is from.

★ Any media added to the project will also appear in the translation file. It will show the file path of the media. To have the media change with the translation, add the filename and path (if not located in the same directory as the original media) that matches the language. When translating YouTube or Vimeo videos, use the video’s ID: https://youtu.be/gGyVjkRDLYY = gGyVjkRDLY.

Translating the Skin

1. Download and install Poedit. This is the tool we use to create the translations.
2. In Pano2VR, open the skin to translate.
3. Click on the Generate Translations Template button in the Toolbar.
4. This will automatically create the translation file and add it to the same location as the skin. This is a POT file that is compatible with Poedit.
5. Open the template file and then click Create new translation.
6. Start translating!
7. Use a button in the skin to change language: Mouse Click > Player Settings > Change Language. Better yet, use a logic block to detect the browser language. Pano2VR automatically detects the browser language and if that language is in the translation, it will use that translation.

★ Image elements and button elements are not translated. However, the URL of the External Image Loader is translated. So, if you’re looking to swap out images for different translations, use the External Image Loader.

Button to Change Language

You can create language buttons in many ways. Here’s one way to get you started that changes between two languages.

1. Add a container, a graphic/button for each language, and a text box.
2. Make all elements children of the container.
3. For the text box, add default text. For example, “Deutsch”.
4. Add a logic block for Text with the condition: Trigger = Language (Player > Langauge); Comparison = start with; Value = de; Text = English. If the player detects the german language in the browser, then the text box will display, English.
5. For one of the buttons/graphics, and an action to set the language: Source = Mouse Click; Action = Player Settings; Type: Change Language; Language = Project Language or one of translated languages. Repeat for the rest the buttons.

In the project above, the language buttons are set to show or hide depending on the current language. Do this by setting a Logic Block for the Visible parameter. Use the same condition as in step 3. Just change the langauge accordingly.

Create a Langauge Menu

Below are the basic instructions to build a menu using the Cloner Element in the skin. This will create a menu out of the translations added to the Translations table in the Project Settings.

1. In the Skin Editor, add a Cloner. Select Cloner from Toolbar, then click in the canvas to add it.

2. Add a text box. Select Text Box from the Toolbar, then click in the Canvas to add it.

3. In the Tree, make the text box a child element of the Cloner.

4. In the Text Box’s Position properties, double-click on the position indicators to set the X and Y values to 0 (this lines up the textbox to the cloner).

5. Select the Cloner and find the Cloner properties. There, select Translations as the Source.

6. Select the Text Box and change its title to $(ctitle). This placeholder is also found in the placeholder list: Cloner > Cloner Title.

7. Give the Text Box an action to switch the language:

   Source = Mouse Click

   Action = Player Settings

   Type = Set Language

   Language = From Cloner (this is found at the top of the languages list)

8. Add a button to open and hide the menu by adding an element (like another Text Box) and giving the action:

   Source = Mouse Click

   Action = Visibility

   Type = Toggle Visibility

   Target = Cloner 1

Now, you can go back and make the menu nicer by adjusting its size, or giving it button states (like changing the background color of the text box when the mouse hovers over it), or give the cloner a hand cursor.

For inspiration, check out the Material Dart skin.

Update a Translation

If you added content that should get translated to the project after the initial translation, you need to make a new template and load it.

1. Recreate the template file .pot by clicking the Generate Translations Template button. This will add the new content.

2. Open the .po file in POedit.

3. In Poedt, go to the Translation menu and choose, Update from POT file. The PO file will now have the new context, ready to be translated.

   

4. Save the PO file and re-output the project in Pano2VR.

See also…

• Poedit
• Project Properties
• Skin Editor
• Webinar|Translations Part 1
• Webinar|Translations Part 2