KRPano-screen interaction principle

Posted on Edited on In

KRPano synchronization between multiple screen display can be realized, mainly applied to Websocket technology for communication.

 

On the control side, we need to send the KRPano scene perspective and scene information in real time, you can use the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
embedpano({
                swf: "tour.swf",
                xml: "tour.xml",
                target: "pano",
                html5: "auto",
                mobilescale: 1.0,
                passQueryParameters: true,
                onready: krpanoReady
            });

            function krpanoReady(krpano) {
                krpano.call("trace(krpano is ready...)");
                krpano.call("loadscene(scene_04, null, MERGE);")
                initialWebSocket();
            }
            Send KRPano perspective information in real time
            function IntervalSendMessage() {
                var krpano = document.getElementById("krpanoSWFObject");

                if (krpano && krpano.get) {
                    var hlookat = krpano.get("view.hlookat");
                    var vlookat = krpano.get("view.vlookat");
                    var fov = krpano.get("view.fov");
                    var scene = krpano.get("xml.scene");

                    var krObj = {
                        hlookat: hlookat,
                        vlookat: vlookat,
                        fov: fov,
                        scene: scene
                    }

                    ws.send(JSON.stringify(krObj));
                }
            }
            var ws;
            var WebSocketsExist;

            function initialWebSocket() {
                WebSocketsExist = true;
                try {
                    ws = new WebSocket("ws://localhost:8989/");
                } catch (ex) {
                    try {
                        ws = new MozWebSocket("ws://localhost:8989/");
                    } catch (ex) {
                        WebSocketsExist = false;
                    }
                }
                if (WebSocketsExist) {
                    console.log("The current browser support websocket!");
                } else {}
                    console.log("The current browser not support websocket!")
                    return;
                }
                ws.onopen = WSonOpen;
                ws.onmessage = WSonMessage;
                ws.onclose = WSonClose;
                ws.onerror = WSonError;
            }

            function WSonOpen() {
                console.log("websocket opened success!");
                setInterval(IntervalSendMessage, 50);
            };

            function WSonMessage(event) {
                console.log(event.data);
            };

            function WSonClose() {
                console.log("Websocket closed.");
            };

            function WSonError() {
                console.log("Websocket error occur.");
            };

 

On the control side, we need to receive real-time control over the perspective of information and periodic updates to the current perspective and scene.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
embedpano({
                swf: "tour.swf",
                xml: "tour.xml",
                target: "pano",
                html5: "auto",
                mobilescale: 1.0,
                passQueryParameters: true
            });

            const WebSocket = require('ws');

            const wss = new WebSocket.Server({
                port: 8989
            });

            wss.on('connection', function connection(ws) {
                ws.on('message', function incoming(message) {
                    console.log('received: %s', message);
                    krObj = JSON.parse(message);
                    var hlookat = krObj.hlookat;
                    var vlookat = krObj.vlookat;
                    var fov = krObj.fov;
                    var scene = krObj.scene;
                    var krpano = document.getElementById("krpanoSWFObject");
                    if (krpano && krpano.set) {
                        krpano.call("loadscene(get(" + "scene_04" + "), null, MERGE);")
                        krpano.set("view.hlookat", hlookat);
                        krpano.set("view.vlookat", vlookat);
                        krpano.set("view.fov", fov);
                        if (krpano.get("xml.scene") !== scene) {
                            loadscene(get(startscene), null, MERGE);
                            krpano.call("loadscene(" + scene + ", null, MERGE);")
                        }
                    }
                });

                ws.send('something');
            });

 

If the control port (such as a Web page) cannot be directly creating a WebSocket. Server, you can use the server for relay control Terminal and control terminal are connected to the server, server side state control information to the console.

 

This post was published on: http://www. krpano. tech/archives/534

Posted by：Leapever Software

Reprinted please specify the source, thank you!