Page 1 of 1

using two different index.xml files for one tour

PostPosted: Fri Jan 13, 2017 6:00 pm
by Siewers
I want to have different hotspot styles for the mobile and the desktop version of the tour, the hotspot style is embedded in the index.xml file, so I want to use 2 different .xml files in one tour. is this possible?

Re: using two different index.xml files for one tour

PostPosted: Mon Jan 16, 2017 9:34 am
by Annis
The hotspot style is set in the _skin.xml not the main index.xml (that's where your hotspot positions are).

And you can set your tour to use a different _skin.xml following the tutorial here: http://www.kolor.com/wiki-en/action/vie ... ic_devices

Re: using two different index.xml files for one tour

PostPosted: Mon Jan 16, 2017 2:25 pm
by Siewers
I want to have a different style but also a different action behind the hotspots, because if I open a web page on a mobile tour i't doesn't get aligned nicely. thats why I would like to use to index.xml files

Re: using two different index.xml files for one tour

PostPosted: Mon Jan 16, 2017 3:35 pm
by Annis
In that case it would be much more complicated, and the device check based in the html instead.

Probably similar to this but instead of opening a different tour you're opening different xml.

I'll have to do some tests and get back to you.

Re: using two different index.xml files for one tour  [SOLVED]

PostPosted: Mon Jan 16, 2017 5:05 pm
by Annis
Alright, as I warned, this is quite complicated.

For these edits to work, you must have already set up your index_mobile.xml and index_mobile_skin.xml and their _vr versions (index_skin_mobile_vr & index_mobiles_vr) files.
Make sure the include at the top of the index_mobile.xml and index_mobile_vr files link to the mobile version of their skin file.

Now, open your index.html file in a text editor.
  1. Search for
    Code: Select all
    jQuery( document ).ready(function() {
  2. Above the JQuery line, add a line and paste this
    Code: Select all
    var isMobile = false;
  3. Underneath the jQuery line, add
    Code: Select all
                var mobilecheck = function() {
                              var check = false;
                              (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|awa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})
                (navigator.userAgent||navigator.vendor||window.opera);
                              return check;
                            }
                            
                            isMobile = mobilecheck();
                
                            if (isVRModeRequested()){
                                           accessWebVr();
                                        }else{
                                           accessStdVr();
                                        }
  4. Now lower down, search for
    Code: Select all
    function loadPlayer(isWebVr)
  5. Just below you'll find
    Code: Select all
    ,xml:"indexdata/index_vr.xml"
    add
    Code: Select all
    "+(isMobile?"_mobile":"")+"
    between index and _vr.xml, so the result would be
    Code: Select all
    ,xml:"indexdata/index"+(isMobile?"_mobile":"")+"_vr.xml"
  6. Repeat the last step a few lines down for
    Code: Select all
    ,xml:"indexdata/index.xml"
  7. Last step, search the bottom of your html file for
    Code: Select all
                <script type="text/javascript">
                   if (isVRModeRequested()){
                      accessWebVr();
                   }else{
                      accessStdVr();
                   }
                </script>
    and remove this section.

Because of the extensive modifications this couldn't be handled by PTP, or even in a custom html template, so you'd have to do these edits manually each time. Make sure you do this at the end once you don't need to build the tour anymore and backup your files.

I'm attaching a modified version of the html file that you can use to COMPARE to a normal tour html file, but you can not replace yours with this one since the data won't match.
isMobile.zip
(3.55 KiB) Downloaded 215 times

Re: using two different index.xml files for one tour

PostPosted: Mon Jan 16, 2017 5:07 pm
by Siewers
thank you very much, I'm going to test it right now :-)