Start-up

FDProjection start-up

Program can be use on two ways: to edit or show panorama.

To use canvas projection (without WebGL) read more on Three.js home page. FDProjection is ready to use only canvas but need other javascript files.

Please notice that only last MS IE 11 support WebGL.

In program can be found same directories:

  • 3de – directory for 3d graphic engine – Three.js (to download from Three.js home page – file “three.min.js” with license file)
  • files – program files
  • saved_data – contain saved configurations made by user (use UTF-8)
  • scripts – directory with main file – FDProjection program and other scripts necessary to connect program with user’s page
  • textures – in this folder user should place panorama’s picures which will be used to build and presentation panormas

Program can be connected to existed page, and panorama can be placed in selected area – use ifames or program’s positioning method – second method is not always possible due to page construction. (more in documentation – “Positioning view”).

 

Example of placing script in user’s page (“three.min.js” file with license file can be download from Three.js home page):

<script src=”e3d/three.min.js”></script>
<script src=”fdp_files/scripts/cl_b.js”></script>

to display menu :

<script> menu.style.display=”inline-block”; </script>

or hide menu :

<script> menu.style.display=”none”; </script>

or (for FDProjection Light)

<script src=”e3d/three.min.js”></script>
<script src=”fdp_files/scripts/cl_r.js”></script>

Program uses AJAX, so please run this script on serwer.


Start-up – preparing to publish.

Additional settings for Sky version.

After building panoramas with connections hide administrator panel for read mode using javascript command: menu.style.display=”none”;

You can also set rotate mode to turn on after loading data from file – use rotate=-0.001; or rotate=0.001; with range <-0.01; 0.01>.

Load data using data_load(); function. Example below:

<script>
menu.style.display=”none”;
window.addEventListener(“load”,function(){
data_load();
rotate=-0.001;
});</script>

Quick guide for connecting panoramas.

1. Enter name of destination panorama (above “Accept name of view” button) (use NEXT & BACK buttons to change actual panorama).
2. Press “Accept name of view” button.
2. Draw door.
3. Select door and write (above button “Connect door with field (name)“) name of destination view.
4. Press “Connect door with field (name)” button.
5. Deselect door.

That’s it 🙂


Save file – data of panorama.

User can edit “pview_data.txt” file in “fdp_files/saved_data” folder to set photo file name, position and size of panorama.

Screen position x:0;
Screen position y:0;
Screen size x:500;
Screen size y:300;
Absolute screen position:1;
Panorama layer:100; //z-index
Start view nr:0;
>>p_view_start;
Texture:fdp_files/textures/photo.jpg; //photo / panorama name
Panorama type:1; //0: spherical, 1: cylindrical panorama
>>p_view_end;


IFRAME – using with panoramas.

NOTE: You can use iframe and load into it following example of page (with downloaded files and folders – You must place downloaded program files in location of following page):

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title> FDProjection – test page </title>

</head>

<body>

<script src=”e3d/three.min.js”>
</script>

<script src=”fdp_files/scripts/cl_r.js”>
</script>

<script>

document.body.style.overflow=”hidden”;

var parent_iframe=window.parent.document.getElementsByTagName(“iframe”)[0]; //or other number of iframe

parent_iframe.width=renderowanie.domElement.width;
parent_iframe.height=renderowanie.domElement.height;

</script>

</body>

</html>

 

To use iframe in full screen mode use parameter “allowfullscreen” in iframe tag:

<iframe style=”…” src=”example.html” width=”750″ height=”500″ frameborder=”0″ allowfullscreen>

 


Information about saving data to file.

It’s strongly important to use UTF-8 in any save files. For example Firefox can’t read files in other coding then UTF-8. If any problems occur check coding in save file “pview_data.txt” or other.

List of web browsers which can save file (in lastest versions for date : 30-03-2017):

  • Firefox
  • Internet Explorer
  • Chrome

MS Edge can’t save file but it’s possible to show data in window to copy and paste them to other program. Output file must be named “pview_data.txt” with UTF-8 coding.

Note: IE can save file in UTF-8 coding but output data can be other (page content). To solve this problem save firstly file in Unicode then convert it to UTF-8 (if it’s possible without BOM).


© R-Slider

Slider instruction / start-up:
 <div>
<div class=”slider_frame”>
<div class=”slider”>
<div class=”m_left m_direction”></div>
<div class=”m_right m_direction”></div>
<div class=”slider_buttons”></div>
<img src=”slider_p/image_1.JPG”>
<img src=”slider_p/image_2.JPG”>
<img src=”slider_p/image_3.JPG”>
<img src=”slider_p/image_4.JPG”>
</div>
</div>
</div>
<script src=”slider_script/slider.js”></script>
<script>
slider_list.push(new slider(
{
width:”55%”,
animation_speed:1000,
animation_interval: 2000
}));
</script>