You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Friday, July 1st 2016, 1:26pm

[SOLVED] Equirectangualr image in html5 viewer?

Hello

I just purchased Flash to HTML5 license upgrade and I'm in the process of adapting my system so that instead of Flash only - HTML5 with fallback to Flash is used. I used Equirectangualr images for Flash.


I use php to read folder content and if finds images it creates buttons which opens lightbox window and passes directory name and equi file name to file wioth Flash viewer.

So I would like to use same principle but with HTML5 support included, and to avoid any other image format to retain simplicity for my user.

Buttons opens this file with this code:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?php 
$WhichDir = $_GET["dir"];
$WhichPano= $_GET["pano"];
$Panorama = "../images/panorame/" . $WhichDir. "/" . $WhichPano. ".jpg";
?>
<!DOCTYPE html>
<html>
<head>
<title>360 panorama</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style>
html { height:100%; }
body {
	height:100%;
	overflow: hidden;
	margin:10;
	padding:10;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	color:#000;
	background-color:#fff;
}
a {
	color:#AAAAAA;
	text-decoration:underline;
}
a:hover {
	color:#FFFFFF;
	text-decoration:underline;
}
</style>
</head>
<body>
<script src="panorama.js"></script>
<div id="panoDIV" style="width:100%;height:100%;">
  <noscript>
  <table style="width:100%;height:100%;">
	<tr style="valign:middle;">
  	<td><div style="text-align:center;">ERROR:<br/>
      	<br/>
      	Javascript not activated<br/>
      	<br/>
    	</div></td>
	</tr>
  </table>
  </noscript>
<script type="text/javascript">
	var swf = createswf("panorama.swf");
	swf.addVariable("image.type", "SPHERE");
	swf.addVariable("image.sphere.url", "<?php echo $Panorama ?>");
	swf.addVariable("xml","panorama.xml");
	swf.embed("panoDIV");
</script> 
</div>
</body>
</html>

This is code in xml file:

Source code

1
2
3
<krpano>
	<view hlookat="0" vlookat="0" fovtype="MFOV" fov="120" fovmin="60" fovmax="120" />
</krpano>




Questions:

1. What can I do to keep function like above but with added HTML5 support?
(HTML5 should load 1st and fallout to Flash if not supported)

We have a TON of Equirectangular images created by one click 360 pano camera and software setup.
Process is easy: Click to take a torus shaped photo -> batch converted to Equirectangular via pre-set software - Equirectangular file is uploaded on server.

2. Is it possible to embed part (or setting) of XML file (which contains path to spherical image ) into my php file so that I can pass dir and filename variable into my php file?

I did it for Flash only version with code above but I'm struggling atm with HTML5 adaptation.

Any suggestions?

Thanks,
Regards

This post has been edited 2 times, last edit by "Krx" (Jul 25th 2016, 9:42am)


2

Saturday, July 2nd 2016, 1:46pm

Bump! :)
Anyone?
Anything?

3

Friday, July 8th 2016, 1:25pm

E.g.

html:

Source code

1
embedpano({xml:"pano.xml", initvars:{panofile:"pano.jpg"}, target:"...", ...});


xml:

Source code

1
2
3
4
5
<krpano>
  <image>
	<sphere url="%$panofile%" />
  </image>
</krpano>


Here some documentation links:
http://krpano.com/docu/html/#syntax
http://krpano.com/docu/html/#initvars

Best regards,
Klaus

4

Wednesday, July 20th 2016, 12:59pm

Hi

Sry for late reply, I've missed reply notification mail or wasn't subbed on it.
Thanks for the input. :)

Best regards