chshapple / vue-krpano Goto Github PK

View Code? Open in Web Editor NEW

159.0 5.0 44.0 30 KB

A Vue component for krpano player.

JavaScript 100.00%

krpano vue

vue-krpano's People

Contributors

Stargazers

Watchers

Forkers

lsslu oczywisty anchorgoogle diaoshao huangjihua pickwei refineidea spacetimeplus mlgrozev mvilera bnasoft xxiongwj huguge leetia316 marshallswain roceys taoboy chen-shixin long20150122 southernpl mvpleung tjtb2018 joychen1579 marigray johnnyma wbrume zfsn2222 czqclm lovotte panboren hebbbbbb zpzyyzp guoliang1994 lovepocky ihaust dropletmedia vipzhicheng-forked heweitao baobin81 belinkang wavaya ccczone ellen-wu

vue-krpano's Issues

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

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的时候赋值。希望大佬解释一下。

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)

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,

可否提供一个 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.

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.

chshapple / vue-krpano Goto Github PK

vue-krpano's People

Contributors

Stargazers

Watchers

Forkers

vue-krpano's Issues

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

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

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

Vue-krpano and nuxtjs

可否提供一个 demo ?

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

communication doesn't work

touch event error in ie11

About Krpano player

Is there any chance this work with VUE3 ?

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent