Vue-krpano NPM

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>