vue-krpano

A Vue component for krpano player.

Demo

https://www.somewhats.cn/pois/10045

https://itunes.apple.com/cn/app/%E5%A3%B9%E4%BA%8C/id1190188895?l=en&mt=8

Installation

npm install vue-krpano --save

Dependency

• vuejs@2.0
• A Krpano player globally referenced by <script>

Example

Install the component

import Vue from "vue";
import Krpano from "vue-krpano";


Vue.use(Krpano);

Use the component

<krpano :xml="'krpano.xml'" :lazy-load="true" style="width:100%;height:400px" @panoCreated="init"></krpano>

Props

Name	Description	Example
xml	Krpano configuration XML path	krpano.xml
scene	Scene name	foo
lazyLoad	A Boolean setting to lazy load pano objects	true
freezeVertical	A Boolean setting to freeze scrolling vertically	false
hooks	An object that will be attached to the krpano instance	{foo:bar}
debug	Debug mode	false

Krpano builtin options

Name	Description	Example
bgcolor	The background color of the viewer (in html color format).	#000000
wmode	The wmode setting is typically a Flashplayer setting, but wmode=opaque and wmode=transparent will be evaluated also by the krpano HTML5 viewer and make the viewer background transparent there too. Overlapping html elements itself are always possible when using the HTML5 viewer.	opaque
vars	Pass a Javascript Object with krpano variable:value pairs. The variables will be set AFTER the xml file has been be loaded and parsed. So these variables can be used to add new settings or to overwrite settings that were already defined in the xml.
initvars	Pass a Javascript Object with krpano variable:value pairs. This is basically the same as the vars setting, but these variables will be set BEFORE the xml file wil be loaded and parsed.
basepath	Can be used in Flash and HTML5 for adjusting relative paths in the xml.
mwheel	A Boolean setting to control the mouse-wheel usage	false
focus	A Boolean setting to give the viewer the input / keyboard focus on startup.	true
consolelog	A Boolean setting that defines if krpano log/trace-messages should be sent also to the browser Javascript console.	false
webglsettings	Pass an object with special settings for the WebGL context creation. The WebGL context will be created at startup and can't be changed at runtime, therefore these settings need to be specified already during embedding.
mobilescale	By default all krpano content on mobile devices will be scaled by 0.5. To disable that scaling, set the mobilescale setting to 1.0. This can be useful for implementing responsive webdesigns.	0.5
fakedevice	Fake the krpano device detection settings. Available settings: mobile, tablet, desktop.	mobile

Events

panoCreated

This event will be fired along with a krpano object as soon as the krpano instance is successfully initialized.

sceneChanged

This event will be fired every time the scene is changed. The scene name will also be involved.

Two-way Communication

The hooks object will be attached to the krpano instance.

Example:

The Vue component wants to capture the event when user click the route spot in pano scenes.

<script>
    export default {
        data(){
            const vm = this;
            return {
                xml: "xml path",
                scene: "scene name",
                hooks:{
                    sceneChanged(scene){
                        //event handler
                    }
                }                
            }
        }
    }
</script>
<template>
    <krpano :xml="xml" :scene="scene" :hooks="hooks"></krpano>
</template>

In krpano scripts, you can access the callback object via krpano instance.

<events name="player_listener" keep="true" onnewscene="on_scene_loaded()"/>
<action name="on_scene_loaded">
    jscall(calc('krpano.hooks.sceneChanged("' + scene[get(xml.scene)].name + '")'));
</action>

About

For any question, please feel free to write email to chshapple@gmail.com