Giter VIP home page Giter VIP logo

vue-krpano's Issues

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)

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

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

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.

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,

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>

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.

可否提供一个 demo ?

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.