| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/360/ |
Upload File : |
<html>
<?php
session_start();
if (!empty($_POST['linksJson'])) {
$_SESSION['linksJson'] = $_POST['linksJson'];
}
$photos = array(
array(
'id' => 'P1',
'path' => '01.jpeg',
'defaultView' => '0, 0, 5000',
),
array(
'id' => 'P2',
'path' => '02.jpg',
'defaultView' => '0, 0, 5000',
),
array(
'id' => 'P3',
'path' => 'tunnel.jpg',
'defaultView' => '0, 0, 5000',
),
);
$photos = json_decode(json_encode($photos));
if (empty($_SESSION['linksJson'])) {
$links = array(
array('id' => 'L1', 'photoId' => 'P1', 'coordinate' => '-4834.12, -870.41, -892.01', 'linkTo' => 'P2'),
array('id' => 'L2', 'photoId' => 'P1', 'coordinate' => '222.59, -639.66, 4943.64', 'linkTo' => 'P3'),
array('id' => 'L3', 'photoId' => 'P2', 'coordinate' => '-4482.21, -1278.53, -1784.01', 'linkTo' => 'P1'),
array('id' => 'L4', 'photoId' => 'P3', 'coordinate' => '1301.27, -178.89, -4813.35', 'linkTo' => 'P1'),
);
$links = json_decode(json_encode($links));
} else {
$links = json_decode($_SESSION['linksJson']);
}
$insertKey = 'i';
unset($_POST['linksJson']);
?>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstarp.css">
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
#pcontainer {
width: 100%;
height: 480px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div id="pcontainer"></div>
</div>
<div class="row">
<div class="col-md-3">
<h3><span id="photoId"></span></h3>
</div>
<div class="offset-md-6 col-md-3">
* Press [ <?php echo $insertKey; ?> ] to insert link.
</div>
</div>
<br>
<div class="row">
<h3>Link</h3>
</div>
<br>
<div class="row">
<input type="file"><button type="button" class="btn btn-success" disabled>Upload</button>
</div>
<br>
<div class="row">
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">Photo</th>
<th scope="col">Link</th>
<th scope="col" style="display:none">Coordinate</th>
<th scope="col">Link to</th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="linkBody">
<?php foreach ($links as $link) { ?>
<tr>
<th scope="row" name="photoId"><?php echo $link->photoId; ?></th>
<th scope="row" name="id"><?php echo $link->id; ?></th>
<td name="coordinate" style="display:none"><?php echo $link->coordinate; ?></td>
<td>
<select name="linkTo">
<option value=""> --- </option>
<?php foreach ($photos as $photo) { ?>
<option value="<?php echo $photo->id; ?>" <?php echo $link->linkTo == $photo->id ? 'selected' : ''; ?>><?php echo $photo->id; ?></option>
<?php } ?>
</select>
</td>
<td><button type="button" class="btn btn-danger" onClick="deleteRow(this)">Delete</button></td>
</tr>
<?php } ?>
<tr id="linkTemplate" style="display:none">
<th scope="row" name="photoId"></th>
<th scope="row" name="id"></th>
<td name="coordinate" style="display:none"></td>
<td name="linkTo">
<select name="linkTo">
<option value=""> --- </option>
<?php foreach ($photos as $photo) { ?>
<option value="<?php echo $photo->id; ?>"><?php echo $photo->id; ?></option>
<?php } ?>
</select>
</td>
<td><button type="button" class="btn btn-danger" onClick="deleteRow(this)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<button type="button" class="btn btn-primary" onClick="submitTable()">Submit</button>
</div>
</div>
<form id="linksForm" method="post" style="display:none">
<input id="linksJson" name="linksJson" value="">
</form>
</body>
<script src="js/three.min.js"></script>
<script src="js/panolens.onsolution.min.js"></script>
<script src="js/jquery.min.js"></script>
<script>
var viewer = new PANOLENS.Viewer({ output: 'return', container: $('#pcontainer')[0], controlButtons: [], autoHideInfospot: false });
var panoramas = {};
var panoramaId = '<?php echo $photos[0]->id; ?>';
var infospotId = null;
function init() {
setPanoramas();
setInfospots();
}
function setPanoramas() {
<?php foreach ($photos as $photo) { ?>
panoramas['<?php echo $photo->id; ?>'] = new PANOLENS.ImagePanorama('photo/<?php echo $photo->path; ?>');
panoramas['<?php echo $photo->id; ?>'].addEventListener('leave', function () {
viewer.tweenControlCenter(new THREE.Vector3(<?php echo $photo->defaultView; ?>), 0);
});
viewer.add(panoramas['<?php echo $photo->id; ?>']);
<?php } ?>
}
function setInfospots() {
<?php foreach ($links as $link) { ?>
<?php if (empty($link->linkTo)) { ?>
var infospot = new PANOLENS.Infospot(500, PANOLENS.DataImage.info);
<?php } else { ?>
var infospot = new PANOLENS.Infospot(500, PANOLENS.DataImage.Arrow);
infospot.addEventListener('click', function () {
panoramaId = '<?php echo $link->linkTo; ?>';
genSpanPhotoId();
viewer.setPanorama(panoramas['<?php echo $link->linkTo; ?>']);
});
<?php } ?>
infospot.addHoverText('<?php echo $link->id; ?>');
infospot.position.set(<?php echo $link->coordinate; ?>);
infospot.addEventListener('hoverenter', function () {
infospotId = '<?php echo $link->id; ?>';
});
infospot.addEventListener('hoverleave', function () {
infospotId = null;
});
panoramas['<?php echo $link->photoId; ?>'].add(infospot);
<?php } ?>
}
function genSpanPhotoId() {
$('#photoId').html('Photo: ' + panoramaId);
}
function deleteRow(obj){
console.log(obj);
$(obj).parentsUntil('tr').parent().remove();
}
var postJson = rowjson = [];
var rowId, rowPhotoId, rowCoordinate, rowLinkTo;
function submitTable(){
$('#linkBody tr:not([style="display:none"])').each(function (){
rowId = $(this).find('[name="id"]').html() || 'L' + Math.round(Math.random() * 10000);
rowPhotoId = $(this).find('[name="photoId"]').html();
rowCoordinate = $(this).find('[name="coordinate"]').html();
rowLinkTo = $(this).find('[name="linkTo"] option:selected').val();
postJson.push({id: rowId, photoId: rowPhotoId, coordinate: rowCoordinate, linkTo: rowLinkTo});
});
$('input#linksJson').val(JSON.stringify(postJson));
$('form#linksForm').submit();
}
$(function () {
init();
genSpanPhotoId();
$(document).bind('keydown', function (e) {
if (e.key == '<?php echo $insertKey; ?>') {
var clone = $('#linkTemplate').clone();
$('#linkBody').append(clone.show());
$('#linkBody tr:last-child').find('[name="photoId"]').html(panoramaId);
$('#linkBody tr:last-child').find('[name="coordinate"]').html(viewer.outputPosition());
}
// else if (e.key == 'Home') {
// console.log('view: ', viewer.outputPosition(), panoramaId);
// } else if (e.key == 'Delete' && infospotId !== null) {
// console.log('delete: ', infospotId);
// }
})
})
</script>
</html>