/*online-demo*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Virtual Tour</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
.scene {
width: 100%;
height: 100%;
}
#toolbar {
position: absolute;
left: 50%;
top: 0;
z-index: 10000;
}
#tours {
position: absolute;
left: 0;
right: 0px;
bottom: 50px;
height: 200px;
overflow: hidden;
overflow-x: auto;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10000;
color: #fff;
}
#tours ul {
margin: 0;
padding: 0;
display: flex;
width: 100%;
border-bottom: solid 1px #ccc;
}
#tours li {
cursor: pointer;
margin: 0;
margin-left: 10px;
list-style: none;
}
#tours li:hover {
color: #f60;
}
#options {
display:none;
position: absolute;
width: 200px;
top: 0;
right: 0;
bottom: 50px;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10000;
color: #fff;
}
#options > div {
margin-top: 10px;
color: #fff;
}
#tour-list li{
position: relative;
}
#tour-list li.active {
border: solid 1px #f60;
}
.progress{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
}
.progress div{
height: 100%;
width: 0;
background-color: #f60;
}
[xui_min_map] {
right:10px;
top:10px
}
#navs{
position: absolute;
left: 0;
bottom: 0;
z-index:1000
}
</style>
</head>
<body>
<div id="scene" class="scene"></div>
<div id="toolbar">
<button id="btn_addFrame">Add a POV</button>
<button id="btn_addPart">Add a Clip</button>
<button id="btn_play">Play</button>
<button id="btn_pause">Pause</button>
</div>
<div id="navs">
<button onclick="kankan.Camera.panorama()">panorama</button>
<button onclick="kankan.Camera.floorplan()">floorplan</button>
<button onclick="kankan.Camera.dollhouse()">dollhouse</button>
</div>
<div id="tours"></div>
<div id="options">
<div>Dwell Time:<input id="time" value="3.5" />s</div>
<div>Angle of Rotation:<input id="rotateRange" value="35" />°</div>
<div>
Rotate Type:
<select id="rotateType" style="width: 100%">
<option value="L" selected>From left to right</option>
<option value="R">From right to left</option>
</select>
<label for=""><input type="checkbox" />Apply to all</label>
</div>
<div>
Transition Methods:
<select id="transitType" style="width: 100%">
<option value="normal" selected>Roaming</option>
<option value="fast">Dip to Black</option>
</select>
<label for=""><input type="checkbox" />Apply to all</label>
</div>
<div>
Entry:
<img style="width: 200px; height: 140px" id="enterCover" />
</div>
<div>
Exit:
<img style="width: 200px; height: 140px" id="exitCover" />
</div>
<div style="text-align: center" id="btn_save"><button>Settings</button></div>
</div>
<script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk-deps.js"></script>
<script src="//4dkk.4dage.com/v4/sdk/4.2.2/kankan-sdk.js"></script>
<script>
var kankan = new KanKan({
dom: '#scene',
num: 'KJ-JYo2ZZyKKJ', // '' //'t-YhBCzQr' t-QiKQpuF
})
function render(tours) {
var html = []
var parts = tours.map(item => item.name)
var frames = tours[0].list
html.push('<ul data-part>')
parts.forEach((item, i) => {
html.push('<li data-id="' + i + '">' + item + '</li>')
})
html.push('</ul>')
html.push('<ul data-frame style="margin-top:10px;border:none" id="tour-list">')
frames.forEach((item, i) => {
html.push('<li data-id="' + i + '">')
html.push('<img style="width:200px;height:140px" src="' + item.enter.cover + '">')
html.push('<div class="progress"><div></div></div>')
html.push('</li>')
})
html.push('</ul>')
document.getElementById('tours').innerHTML = html.join('')
document.querySelectorAll('#tour-list li').forEach(el => {
el.addEventListener('click', () => {
kankan.TourManager.recorder.then(recorder => {
var frame = recorder.selectFrame(el.getAttribute('data-id'))
if (frame) {
document.querySelectorAll('#tour-list li').forEach(el => {
el.classList.remove('active')
})
el.classList.add('active')
document.getElementById('time').value = frame.time / 1000
document.getElementById('rotateRange').value = frame.rotateRange
document.getElementById('rotateType').value = frame.rotateType
document.getElementById('transitType').value = frame.transitType
document.getElementById('enterCover').src = frame.enter.cover
}
})
kankan.TourManager.player.then(player=>{
player.selectFrame(el.getAttribute('data-id'))
})
})
})
}
kankan.use('TourRecorder').then(recordr => {
document.getElementById('btn_addFrame').onclick = () => recordr.addFrame()
document.getElementById('btn_addPart').onclick = () => recordr.addPart()
document.getElementById('btn_save').onclick = () => {
var data = {
// Dwell Time3.5s
time: document.getElementById('time').value * 1000,
// Angle of Rotation
rotateRange: parseFloat(document.getElementById('rotateRange').value),
// Rotate Type L,R
rotateType: document.getElementById('rotateType').value,
// Transition Methods normal：General(Roaming),fast:Instant（Dip to Black）
transitType: document.getElementById('transitType').value,
}
recordr.setFrame(recordr.frameId, data)
}
document.getElementById('exitCover').onclick = () => {
recordr
.setExit()
.then(frame => {
document.getElementById('exitCover').src = frame.exit.cover
})
.catch(err => {
alert(err.errMsg)
})
}
recordr.on('change', tours => {
render(tours)
})
})
kankan.use('TourPlayer').then(player => {
document.getElementById('btn_play').onclick = () => player.play()
document.getElementById('btn_pause').onclick = () => player.pause()
player.on('play', tours => {
document.querySelector('[data-frame]').querySelectorAll(`[data-id] .progress div`).forEach(el=>el.style.width=0)
})
player.on('pause', tours => {
})
player.on('end', tours => {
document.querySelector('[data-frame]').querySelectorAll(`[data-id]`).forEach(el=>el.classList.remove('active'))
document.querySelector('[data-frame]').querySelector(`[data-id="${player.frameId}"]`).classList.add('active')
$progress = document.querySelector('[data-frame]').querySelector(`[data-id="${player.frameId}"] .progress div`)
})
player.on('progress', ({ partId, frameId, progress }) => {
$progress.style.width= Number(progress*100).toFixed(5)+'%'
})
var $progress = null
player.on('next', ({ partId, frameId, progress }) => {
document.querySelector('[data-frame]').querySelectorAll(`[data-id]`).forEach(el=>el.classList.remove('active'))
document.querySelector('[data-frame]').querySelector(`[data-id="${frameId}"]`).classList.add('active')
$progress = document.querySelector('[data-frame]').querySelector(`[data-id="${frameId}"] .progress div`)
})
})
kankan.render()
</script>
</body>
</html>
