chshapple / vue-krpano

A Vue component for krpano player.

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

• [email protected]
• 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 [email protected]

vue-krpano's Issues

Vue-krpano and nuxtjs

Hey, I try krpano with nuxtjs and it doesn't work.
My config (plugin/vue-krpano.js) :
`import Vue from 'vue'
import Krpano from "vue-krpano";

Vue.use(Krpano);`

I have this error :
TouchEvent is not defined
krpano player is required
And vue warm :
`[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

How can I use vue-krpano with nuxt ?
Thanks,

About Krpano player

Hi, I'd like to konw what do you mean "Krpano player"? And how to set the globally reference? (I use the vue2.0 +webpack 1.x)

touch event error in ie11

like title

Is it possible to add hotspots after the vuejs component is loaded

Hi,
I'm trying to add some hotspots after the component is loaded using @panoCreated="panoCreated"
But unfortunately with no success. After using the function above the component is reloaded an all settings that were made are overwritten. Here is my code:

<template>
    <div>

    <a href="#" @click.prevent="addHotspot">ADd</a>
    <krpano :xml="xml" basepath="/assets/krpano/templates/xml/" :initvars="initvars" :consolelog="true"
            :hooks="hooks" :debug="true" :lazy-load="false"
            style="width:100%;height:400px" @panoCreated="panoCreated" @sceneChanged="sceneChanged" @loadSceneData.prevent="loadSceneData"></krpano>
    </div>
</template>

<script>
    export default {
        methods: {
            addHotspot(krpano, hotSpot) {
                krpano = this.krpanoPano

                if (krpano) {
                    var h = krpano.get("view.hlookat");
                    var v = krpano.get("view.vlookat");
                    var hs_name = "hs" + ((Date.now() + Math.random()) | 0);	// create unique/randome name
                    krpano.call("addhotspot(" + hs_name + ")");
                    krpano.set("hotspot[" + hs_name + "].url", "/img/infospot.png");
                    krpano.set("hotspot[" + hs_name + "].ath", h);
                    krpano.set("hotspot[" + hs_name + "].atv", v);
                    krpano.set("hotspot[" + hs_name + "].distorted", true);

                    if (krpano.get("device.html5")) {
                        // for HTML5 it's possible to assign JS functions directly to krpano events
                        krpano.set("hotspot[" + hs_name + "].onclick", function (hs) {
                            alert('hotspot "' + hs + '" clicked');

                        }.bind(null, hs_name));
                    }
                    else {
                        // for Flash the js() action need to be used to call from Flash to JS (this code would work for Flash and HTML5)
                        krpano.set("hotspot[" + hs_name + "].onclick", "js( alert(calc('hotspot \"' + name + '\" clicked')) );");
                    }

                }
            },
            loadSceneData() {
              console.log('load scene data')
            },
            panoCreated(pano) {
                this.krpanoPano = pano
                this.krpanoPano.call("lookto(" + (Math.random() * 360.0 - 180.0) + "," + (Math.random() * 180.0 - 90.0) + "," + (80.0 + Math.random() * 100.0) + ")");
                var krpano = this.krpanoPano

                if (krpano) {
                    var h = krpano.get("view.hlookat");
                    var v = krpano.get("view.vlookat");
                    var hs_name = "hs" + ((Date.now() + Math.random()) | 0);	// create unique/randome name
                    krpano.call("addhotspot(" + hs_name + ")");
                    krpano.set("hotspot[" + hs_name + "].url", "/img/infospot.png");
                    krpano.set("hotspot[" + hs_name + "].ath", h);
                    krpano.set("hotspot[" + hs_name + "].atv", v);
                    krpano.set("hotspot[" + hs_name + "].distorted", true);

                    if (krpano.get("device.html5")) {
                        // for HTML5 it's possible to assign JS functions directly to krpano events
                        krpano.set("hotspot[" + hs_name + "].onclick", function (hs) {
                            alert('hotspot "' + hs + '" clicked');

                        }.bind(null, hs_name));
                    }
                    else {
                        // for Flash the js() action need to be used to call from Flash to JS (this code would work for Flash and HTML5)
                        krpano.set("hotspot[" + hs_name + "].onclick", "js( alert(calc('hotspot \"' + name + '\" clicked')) );");
                    }
                }
            },
            sceneChanged(scene) {
            }
        },
        mounted() {
            this.addHotspot()
        },
        data() {
            const vm = this;
            return {
                xml: "/uploads/panorama/21/vtour/tour_edit.xml",
                initvars: {
                    krpanoPano: null,
                    basepath: '/public/assets/',
                    hotspots: {
                        hotspot: {
                            id: 0,
                            name: 'hotSpotName',
                            title: 'name',
                            ath: 0,
                            atv: 1,
                            html: '',
                            icon_path: '/img/infospot.png',
                            type: 'info',
                            onclick: "looktohotspot(get(name),90);iframe_open('');",
                            linkedScene: '',
                            scene: 'scene_1'
                        }
                    }
                },
                hooks: {
                    loadSceneData(scene) {
                    },
                    sceneChanged(scene) {
                    }
                }
            }
        }
    }
</script>

Error in mounted hook: "Error: krpano player is required"

vue.js:1743 Error: krpano player is required
at VueComponent.createPano (vue.runtime.esm.js:8032)
at VueComponent.scrollListener (vue.runtime.esm.js:8032)
at VueComponent.mounted (vue.runtime.esm.js:8032)
at callHook (vue.js:2921)
at Object.insert (vue.js:4152)
at invokeInsertHook (vue.js:5947)
at Vue.patch [as patch] (vue.js:6166)
at Vue._update (vue.js:2660)
at Vue.updateComponent (vue.js:2788)
at Watcher.get (vue.js:3140)

communication doesn't work

Hey, I just try krpano script and vue.js communication. And it doesn't work.

methods:{
doSomething(){
//do something
console.log("doSomething");
}
}

jscall(calc('krpano.hooks.doSomething()'));

There's no log show in console.

Is there any chance this work with VUE3 ?

可否提供一个 demo ?

在 vue-cli 3 新建的项目中 会存在路径问题，如果一个 xml 文件内引用了另一个文件如 plugins webvr.xml ,webvr.xml 就会 404

ERROR: loadscene() - scene "null" not found

Hey there, amazing job integrating this software with Vue,

I have a couple days giving your component a try and so far it's working good for simple images, but there's a problem which i have not been able to work out.

INFO: krpano 1.19-pr10 (build 2017-05-10)
INFO: HTML5/Desktop - Chrome 58.0 - WebGL
ERROR: loadscene() - scene "null" not found 

This error shows on the console when the image is loaded, i don't have this problem when using the desktop viewer or the html generated by the makepano file, but when using the same xml on the vue-krpano component it shows up, although everything is working correctly.

My xmls are like this:

<krpano>
	
	<!-- the skin -->
	<include url="skin/defaultskin.xml" />
	
	<!-- view settings -->
	<view hlookat="0" vlookat="0" maxpixelzoom="1.0" fovmax="150" limitview="auto" />
	

	<preview url="1_propertyid_2017-07-02_25V.tiles/preview.jpg" />

	<image>
		<cube url="1_propertyid_2017-07-02_25V.tiles/pano_%s.jpg" />
	</image>

</krpano>

And this is my component call:

<krpano v-if="selected.id" :xml="selected.path" style="width:100%;height:400px" :lazy-load="true">
</krpano>

Please let me know if you have any suggestion.

有一个地方没看明白，还望大佬指点

core.js中，tour.xml中可以直接使用
jscall(calc('krpano.hooks.sceneChanged("' + scene[get(xml.scene)].name + '")'));
这个krpano对象是怎么创建的? 我在core,js的onready回到中也只看到 vm.krpanoObj = krpanoObj;
tour.xml中是如何拿到krpano的呢。 看了很久没看明白。 我自己之前的做法是在全局声明了一个krpano的变量， 然后在onready的时候赋值。 希望大佬解释一下。