Multi language tour

Q&A about the latest versions
MSchneiter
Posts: 14
Joined: Thu May 10, 2018 5:06 pm

Multi language tour

Post by MSchneiter » Fri May 18, 2018 4:25 am

Hi,

I've seen few ideas floating around for dealing with multi-language tours, but I though it might be interesting to have a dedicated conversation on that.
So I'd be keen hearing from you guys on how you might have handled multi language in your tours, whether for managing
  • titles,
  • logos,
  • hotspots labels,
  • information popups,
  • ...
Keen on any advice on the best way to handle the change of language, taking into account that the tour will surely be a multi node tour, with lots of node & information hotspots and popups...

Thanks in advance.

mbb
Posts: 156
Joined: Mon Oct 19, 2009 11:42 pm

Re: Multi language tour

Post by mbb » Fri May 18, 2018 12:24 pm

I've just begun looking into multi-language options as well, particularly for a recent project I have been working on that I think could really benefit from it. In particular, I am looking at ways this could perhaps be done without stuffing everything through P2VR.

The first thing that has struck me is the XML format of a tour's main XML file- This could easily be parsed on-the-fly with an additional PHP script (if one is accustomed to coding PHP for various web related stuff that is) that could swap out the various elements using text with their corresponding translations stored in a sort of template or master-file for all text instances used in the tour and found in the main XML.

The skin.js file is another matter.. Text used within the skin are buried within the .js code and thus not easily parsed. Perhaps the "CSS-Classes:" field for skin elements could be utilized to id these elements for replacement/substitution via CSS? Same with the images perhaps? Worth looking into I think.

I am relatively new to P2VR and am finding P2VR's usage of XML, JS etc. at it's core very intriguing, and very much full of possibilities that are just barely touched upon in the P2VR documentation.

Example: I was editing a text file and pasted what I thought was a line of text from another file, but instead it was a whole chunk of XML.. Upon closer inspection I realized that it was a "skin element" that was still on my clipboard from working on my P2VR tour earlier. Did not realize that P2VR skin elements were basically just chunks of XML being pushed around in that program. Very "Unix like" :) Is P2VR originally written on Linux btw?

Which led me to think about things like: generation of skin elements on the fly via scripts and database records? Yeah, that could be pretty cool actually. So much to consider and think about :D

mbb
Posts: 156
Joined: Mon Oct 19, 2009 11:42 pm

Re: Multi language tour

Post by mbb » Fri May 18, 2018 1:33 pm

Ok so after some initial recon online- it looks like JS could be the way to go with this. I am not in the development biz, just a photographer that was once a programmer long ago- so if there are others with more advanced knowledge of these processes in action, chime in!

Some links to explore on the topic-

https://dzone.com/articles/a-step-by-st ... lization-2
https://info.moravia.com/blog/javascrip ... calization

Looks as though localization should really be handled outside of the P2VR app itself, with P2VR only providing the hooks to take advantage of the above methods. To what degree it can be "grafted" on to P2VR tours at this point is unknown to me. Maybe Thomas has some thoughts? If he hasn't already considered this option?

MSchneiter
Posts: 14
Joined: Thu May 10, 2018 5:06 pm

Re: Multi language tour

Post by MSchneiter » Sat May 19, 2018 1:26 am

Thanks for the research on that @MBB. It seems to me going into Javascript to handle languages would probably be possible, but quite complex, and I'm thinking that there might be other (easier) path to be explored?

For example I have recently read an interesting post from @TONY (viewtopic.php?f=6&t=12299&p=50870&hilit ... ots#p50844) showing how it is possible to integrate an HTML page made externally which can be loaded into an information/image hotspot text box using iFrame code. I think this could potentially do the job for all popups, although unsure yet on how all of that could be tied together as far as language is concerned... anyway I'll explore this avenue myself. You could almost think of having a database where you record all popups text+photo+title in various language, then have the external html pages auto generated from the database content, so that the maintenance of the text would only have to be done at the DB level. Handy solution which wouldn't require tour rebuilding each time text changes. I think I might have seen TONY touched on that in some posts

While this would probably work for info popup, I'm not sure however how to handle the rest, such as tour textboxes, logos, menus, apart from duplicating them in the skin? However, it seems to me that duplicating skin elements leads to heavy skin, and potentially tours that take too long to load initially...

mbb
Posts: 156
Joined: Mon Oct 19, 2009 11:42 pm

Re: Multi language tour

Post by mbb » Sat May 19, 2018 6:08 am

Yes, iFrame content is a great way to go to load up bigger stuff.

$h $u placeholder content can be found in the main XML file where it can be easily parsed and replaced server-side.

There is the issue of text elements possibly varying in length depending on the language used, which could break certain layouts or UI items. One would have to take that into account during testing/design.

User avatar
Tony
Posts: 487
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Multi language tour

Post by Tony » Sat May 19, 2018 12:22 pm

Hi,

I've been working on a project to develop a template based solution to deliver over a 100 individual 360˚ panoramas that can be embedded into the clients website. The requirements require multi-language options, English, French and German, for all Tooltips, Titles and Content. The following 2 projects have been developed using the template.

Brown Bluff: https://s3-ap-southeast-2.amazonaws.com ... index.html

Walls of Dubrovnik: https://s3-ap-southeast-2.amazonaws.com ... index.html

Multi-language is managed by a variable in the skin "Name: Lan | Type: Text | Initial Value: en". The 3 flag buttons set a value, either en, fr or de. Elements that don't change between locations, ie Tooltips etc are managed within the Logic Block for the text window.

Image

Multi-language elements such as Titles, Information Popups are managed using individual html pages, loaded into text windows using iFrame code and then the active element is managed in the Logic Block.

Image

Example of an individual html page, in this case Cruise News for landscape, English.

https://s3-ap-southeast-2.amazonaws.com ... ws_en.html

Content in the individual pages can be managed by hand coding or by a content management system. Once the page is updated the new content is reflected in the project. This page shows the clients what elements can be updated and the parameters for each element.

Image

Language pages can also be configured to display a specific language by default by using Direct URL's for example Brown Bluff (simplified version without info popups).

German: http://panos.expedition.photography/Bro ... tml?lan=de

French: http://panos.expedition.photography/Bro ... tml?lan=de

English: http://panos.expedition.photography/Bro ... tml?lan=de

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

mbb
Posts: 156
Joined: Mon Oct 19, 2009 11:42 pm

Re: Multi language tour

Post by mbb » Sat May 19, 2018 4:41 pm

Wow Tony, the skin.js file for that Penguin tour is ~384k and over 10,000+ lines of javascript. Is that a normal thing for P2VR? (I am new to how P2VR does things, so please bear with me!). That just seems really large to me. Results look good though!

I noticed you did your slide show using iFrame w/individual html pages for each image. Why that choice, as opposed to something like dedicated external gallery js script?

MSchneiter
Posts: 14
Joined: Thu May 10, 2018 5:06 pm

Re: Multi language tour

Post by MSchneiter » Sun May 20, 2018 11:30 am

@TONY, thanks for your extensive message, your stuff looks very good and pro, a good inspiration! nice to see what & how you have done your single pano info hotspot template for the cruise, very useful to analyse your CSS for getting to know a little more what CSS instruction does what (embpanel, embpopupimage,...).

On the language management, I'm wondering how your solution could work with a multi pano tour, where each pano has multiple information popups...
What I understand is that your single pano template (Brown Bluff or Dubrovnik) always use the same hotspot iframe "include/locinfo_en.html" / "include/locinfo_fr.html". That's why you can insert this file name in the skin hotspot logic block, for language management. Each of your mono pano tour will then use the same locinfo_xx.html file from their own folder.
I guess for your Dubrovnik or Brown bluff mono pano tour, it probably means that you had to define a separate skin hotspot template for each hotspot (cruise news, location), which is fine because you have only one pano and the number of hotspot is known and small.

In the case of a multiple pano tour with variable number of info hotspots, it would be cumbersome and heavy to define a hotspot template in the skin for each pano hotspot... so still unsure how to deal with language in this case.... but will explore your solution a little further in case I missed something (highly probable!)

Thanks again

User avatar
Tony
Posts: 487
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Multi language tour

Post by Tony » Sun May 20, 2018 1:12 pm

Hi MSchneiter,

Thanks for you kind words, much appreciated. The single pano template is a unique case in it's own and the underlying methodology of the skin was designed so I could have a base template, that I wouldn't touch, and simply add in the content and pano tiles for that particular panorama. As you may have seen I also have both landscape and portrait versions of each popup to accommodate mobile devices.

My preference is to use include html files for the information popups as it allows me to easily update/modify the content contained within them without having to go back into the skin.

If you have multiple nodes and a variable number of hotspots you could possibly create a single template and then just add additional values into the Logic Block such as Tags, that identify the panorama, to further filter the content.

I'll be interested to see how you get on and what solution you come up with. To me the beauty of Pano2VR is the fact that there are numerous ways to solve a problem.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

MSchneiter
Posts: 14
Joined: Thu May 10, 2018 5:06 pm

Re: Multi language tour

Post by MSchneiter » Sun May 20, 2018 1:33 pm

@Tony, that is exactly what I'm trying at the moment:

1- my external HTML files are: html/grotterh-fr.html and html/grotterh-en.html
2- I have placed the word "grotterh" in the description of hotspot properties ($hd)
HS_properties.JPG
HS_properties.JPG (27.29 KiB) Viewed 359 times
3- in skin popup body text, I created the same logic blocks than yours, but I'm trying to use the $hd information as a parameter in my <iframe...> string.
HS_logicblocks.JPG
HS_logicblocks.JPG (43.48 KiB) Viewed 359 times
Unfortunately this way of using $hd placeholder within a string doesn't seem to work... but I feel this solution could do the job as you would just need one hotspot template in the skin, and to identify within the HS description the core of the html file to load for each info popup...

Is anyone aware of another syntax for using $hd placeholder in my iframe string ?

mbb
Posts: 156
Joined: Mon Oct 19, 2009 11:42 pm

Re: Multi language tour

Post by mbb » Mon May 21, 2018 1:44 pm

MSchneiter, I am doing something similar with variables in iFrame markup.

I think a simpler solution for what you need could be the following:

Example, for html page called mypage-en.html-

1. Make global var for languages that you can set with some other action, ie $lang (eg: $lang = en)

2. Put html page base name of "mypage" into Hotspot Link Target URL property (each hotspot will likely have a different name html page etc)

3. Make a global $var to hold the above page name, which gets set to equal $(hu) whenever the hotspot is clicked. Eg: $MyPageURL. (note that I am leaving off path and the .html extension and using base name only)

3. For your iFrame element, make text like so-

<iframe src="html/$(*MyPageURL)-$(*lang).html" width="100%" height="100%" frameborder= "0" scrolling="no"></iframe>

No logic blocks necessary, and you only have to write the iFrame markup once.

MSchneiter
Posts: 14
Joined: Thu May 10, 2018 5:06 pm

Re: Multi language tour

Post by MSchneiter » Mon May 21, 2018 9:00 pm

Many thanks @Mbb, you were faster than me, that is exactly what I came up with as well, it works using a global variable as I think the hotspot description is only available at the moment you click on the hotspot, that is why using the $hd for the iframe string wasn’t working. You went even further than me by removing the logic block for the language, which is even better!

I think we now have quite a decent solution for getting few language in. The rest (title, logo,..) can be done with logic blocks as mentioned by Tony.

Thanks to all

User avatar
Hopki
Gnome
Posts: 8414
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Multi language tour

Post by Hopki » Mon May 21, 2018 10:16 pm

Hi Guys,
If your not into javascript and coding and are looking for a in Pano2VR solution you can use logic blocks for the static text boxes.
Then for the hotspots you can use the List View to select all your hotspots in a node then copy and paste them, creating a copies of all the hotspots.
In the copies change the Skin ID to de, then set the title and if your using it the description text.
You then need a hotspot template per language, and as your copy and pasting, all the hotspots will all be in the exact same position.

As an the attached example use Skin IDs: en and de.
Then in the skin there are two hotspot templates that have the IDs en and de.
Im using a text variable using en and de.
Then have two buttons/text boxes that set the variable value to either en or de.
You can use a Host logic block to select which language on open, but does require a different host.
Regards,
Hopki
Attachments
language.zip
(61.09 KiB) Downloaded 16 times

MSchneiter
Posts: 14
Joined: Thu May 10, 2018 5:06 pm

Re: Multi language tour

Post by MSchneiter » Mon May 21, 2018 11:07 pm

Thanks Hopki for the tips and sample file. I guess this is a good (if not the only) way to go with nodes, unless we had the possibility to define some user variables at the hotspot level, where we could store the various title translations...

Just a bit worried of this duplication of nodes in terms of loading time, but maybe not?

User avatar
Tony
Posts: 487
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Multi language tour

Post by Tony » Tue May 22, 2018 12:10 am

Hi,
mbb wrote:
Mon May 21, 2018 1:44 pm
I think a simpler solution for what you need could be the following:
Nice Work, very creative solution :D

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

Post Reply

Who is online

Users browsing this forum: Google [Bot] and 11 guests