Embed VR Gallery technology in a website

In this blog, we are going to learn how to create a Run VR package button, Which we use in our VR Gallery.

This button will automatically download the (.vrpackage) file and run it within SimLab VR Viewer. however, it will ask the user to download the VR Viewer if he hasn’t already installed it on his machine(First time only).

This button can be implemented using three main components in the page:

1

First add the following jQuery link to the top of the web page:

In this step we will copy the jQuery Plugin link and paste it in the header tag of the webpage

	  
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

2

Second step you can add the element that will run the whole functionality in three ways

A. In this step choose the element shape whether it is button or image or URL and copy the code where you desire, and change the URL https://s3.amazonaws.com/web-material/vr_viewer/Yacht.vrpackage to the URL of the package

RUN

 

	
   <button class="button2" id="launch" value="simlabvr://https://s3.amazonaws.com/web-material/vr_viewer/Yacht.vrpackage" style="width: 49.3%;color:#686868"><p>RUN</p></button>

RUN

 

	
<a class="button2" id="launch" value="simlabvr://https://s3.amazonaws.com/web-material/vr_viewer/Yacht.vrpackage" style="width: 49.3%;color:#686868"><p>RUN</p></a>

RUN

 

	
<button class="button2" id="launch" value="simlabvr://https://s3.amazonaws.com/web-material/vr_viewer/Yacht.vrpackage" style="width: 49.3%;"><p><img src="http://www.simlab-soft.com/SimlabArt/wp-content/uploads/2019/02/Asset-2-Copy.png?x52295" alt="" width="81" height="85" class="img-responsive center-block resz"> RUN</p>
</button>

B. If Viewer is not downloaded this message box will handle it and give the user a popup to download the viewer.

 

	
<link rel="stylesheet" type="text/css" href="https://www.simlab-soft.com/vrPack/test_files/vrCatalog.css?x52295" >
<div id="container_large">
 <div class="alert" id="panel"> <br> <span  class="closebtn" onclick="document.getElementById('container_large').style.display = 'none';">× </span>  <span id="changable_text" class="text-center center-block"> Try Again Please </span>  <br> 
 </div>
</div>

3

The third step adds the protocol script:

In this step copy the script link that improves the protocol concept in the footer

	  
<script src="https://www.simlab-soft.com/vrPack/test_files/vrCatalog.js?x52295"></script>

Here is a ZIP File for a complete example:

Share: