add camera offset example wolrd

public/multicamera/appui.js

@@ -1,5 +0,0 @@
-//-----App ui-----
-
-// function createApp() {
-//     return {}
-// }

public/multicamera/assets.json

@@ -1,10 +0,0 @@
-{
-    "bg2":{
-        "tag": "img",
-        "src": "/../assets/checker.jpg"
-    },
-    "sky":{
-        "tag": "img",
-        "src": "/../assets/skyes/sky3.jpg"
-    }
-}

public/multicamera/index.vwf.config.yaml

@@ -1,8 +0,0 @@
----
-info:
-  title: "VWF & AFrame Example App"
-model:
-  vwf/model/aframe:
-view:
-  vwf/view/aframe:
-  vwf/view/editor-new:

public/multicamera/index.vwf.yaml

@@ -1,106 +0,0 @@
-# A-Frame & VWF simple scene
-# Copyright 2017 Krestianstvo.org project
----
-extends: http://vwf.example.com/aframe/ascene.vwf
-properties:
-  transparent: true
-  assets: "assets.json"
-children:
-  sky:
-    extends: http://vwf.example.com/aframe/asky.vwf
-    properties:
-      color: "#ECECEC"
-      side: "back"
-      fog: false
-  spaceText:
-    extends: http://vwf.example.com/aframe/atext.vwf
-    properties:
-      value: "Virtual World Framework & A-Frame"
-      color: "#b74217"
-      position: "-2 2.5 -2"
-  spaceText2:
-    extends: http://vwf.example.com/aframe/atext.vwf
-    properties:
-      value: "Project by Krestianstvo.org"
-      color: "#305b32"
-      position: "1 3 -4"
-  box:
-    extends: http://vwf.example.com/aframe/abox.vwf
-    properties:
-      position: "-1 0.5 -3"
-      rotation: "0 -30 0"
-      color: "#3c7249"
-      depth: 2
-      height: 1
-      width: 1
-  groundPlane:
-    extends: http://vwf.example.com/aframe/aplane.vwf
-    properties:
-      height: 50
-      width: 50
-      repeat: "10 10"
-      rotation: "-90 0 0"
-      color: "white"
-      wireframe: false
-      src: "#bg2"
-  multicam:
-    extends: http://vwf.example.com/aframe/abox.vwf
-    properties:
-      position: "0 1.6 -2"
-      depth: 0.5
-      height: 0.5
-      width: 0.5
-      opacity: 0.5
-      transparent: true
-      color: "green"
-    children:
-      camera1:
-        extends: http://vwf.example.com/aframe/abox.vwf
-        properties:
-          position: "0 0 0"
-          depth: 0.2
-          height: 0.2
-          width: 0.2
-          color: "red"
-        children:
-          cam:
-            extends: http://vwf.example.com/aframe/acamera.vwf
-            properties:
-              look-controls-enabled: false
-              wasd-controls-enabled: false
-              user-height: 0
-            children:
-              viewoffset:
-                extends: http://vwf.example.com/aframe/viewOffsetCamera-component.vwf
-                properties:
-                  fullWidth: 1000
-                  fullHeight: 1000
-                  xoffset: -250
-                  yoffset: 0
-                  width: 500
-                  height: 1000
-      camera2:
-        extends: http://vwf.example.com/aframe/abox.vwf
-        properties:
-          position: "0 0 0"
-          depth: 0.2
-          height: 0.2
-          width: 0.2
-          color: "red"
-        children:
-          cam:
-            extends: http://vwf.example.com/aframe/acamera.vwf
-            properties:
-              look-controls-enabled: false
-              wasd-controls-enabled: false
-              user-height: 0
-            children:
-              viewoffset:
-                extends: http://vwf.example.com/aframe/viewOffsetCamera-component.vwf
-                properties:
-                  fullWidth: 1000
-                  fullHeight: 1000
-                  xoffset: 250
-                  yoffset: 0
-                  width: 500
-                  height: 1000

public/multipixel/appui.js

@@ -6,7 +6,8 @@ function createApp() {
   function createCameraButton(camNum) {
 
         let label = "Camera " + camNum;
-        let camID = "/multicam/camera"+ camNum + "/cameraNode/cam";
+        let camID = "/multicam/camera"+ camNum + "/cam";
+        let camOffsetID = "/multicam/camera"+ camNum + "/cam/viewoffset";
 
       return {
         $cell: true,
@@ -15,7 +16,9 @@ function createApp() {
         $text: label,
         onclick: function (e) {
             let nodeID = vwf.find("",camID)[0];
+            let offsetCompID =  vwf.find("",camOffsetID)[0];
             let avatarID = vwf.moniker_;
+            vwf_view.kernel.callMethod(offsetCompID, "setParams", []);
             vwf_view.kernel.callMethod(nodeID, "setCameraToActive", [avatarID]);
         }
     }
@@ -39,48 +42,9 @@ function createApp() {
                         class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                         $components: [
                           
-                            {
-                                $cell: true,
-                                $type: "button",
-                                class: "mdc-button mdc-button--raised",
-                                $text: "Camera 1",
-                                onclick: function (e) {
-                                    let nodeID = vwf.find("","/multicam/camera1/cameraNode/cam")[0];
-                                    let avatarID = vwf.moniker_;
-                                    vwf_view.kernel.callMethod(nodeID, "setCameraToActive", [avatarID]);
-                                }
+                            createCameraButton("1"),
+                            createCameraButton("2")
 
-                            },
-                            {
-                                $cell: true,
-                                $type: "button",
-                                class: "mdc-button mdc-button--raised",
-                                $text: "Camera 2",
-                                onclick: function (e) {
-                                    let nodeID = vwf.find("","/multicam/camera2/cameraNode/cam")[0];
-                                    let avatarID = vwf.moniker_;
-                                    vwf_view.kernel.callMethod(nodeID, "setCameraToActive", [avatarID]);
-                                }
-
-                            },
-                            {
-                                $cell: true,
-                                $type: "button",
-                                class: "mdc-button mdc-button--raised",
-                                $text: "Camera 3",
-                                onclick: function (e) {
-                                    let nodeID = vwf.find("","/multicam/camera3/cameraNode/cam")[0];
-                                    let avatarID = vwf.moniker_;
-                                    vwf_view.kernel.callMethod(nodeID, "setCameraToActive", [avatarID]);
-                                }
-
-                            },
-                            createCameraButton("4"),
-                            createCameraButton("5"),
-                            createCameraButton("6"),
-                            createCameraButton("7"),
-                            createCameraButton("8"),
-                            createCameraButton("9")
 
                         ]
                     }

public/multipixel/index.vwf.yaml

@@ -1,5 +1,6 @@
 # A-Frame & VWF simple scene
 # Copyright 2017 Krestianstvo.org project
+# Christmas tree model by 14islands Lab Made with Blocks Public / Remixable (CC-BY) https://poly.google.com/view/2VSoAQN6JoH
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
@@ -71,11 +72,11 @@ children:
   box:
     extends: http://vwf.example.com/aframe/abox.vwf
     properties:
-      position: "20 0.5 0"
+      position: "10 0.5 0"
       rotation: "0 -30 0"
       color: "#3c7249"
       depth: 2
-      height: 9
+      height: 5
       width: 2
   sphere:
     extends: http://vwf.example.com/aframe/asphere.vwf
@@ -104,105 +105,28 @@ children:
       wireframe: false
       src: "#bg2"
   multicam:
-    extends: http://vwf.example.com/aframe/abox.vwf
-    properties:
-      position: "0 10 -2"
-      rotation: "0 0 0"
-      depth: 0.5
-      height: 0.5
-      width: 0.5
-      opacity: 0.5
-      transparent: true
-      color: "green"
-      fullHeight: 2048
-      fullWidth: 3072
-    children:
-      interpolation:
-        extends: http://vwf.example.com/aframe/interpolation-component.vwf
-        properties:
-          enabled: true
-      camera1:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: -500
-          yoffset: -450
-          subcamWidth: 1667
-          subcamHeight: 3958
-      camera2:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: 1400
-          yoffset: -500
-          subcamWidth: 1583
-          subcamHeight: 4208
-      camera3:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: 1330
-          yoffset: -3300
-          subcamWidth: 1750
-          subcamHeight: 2333
-      camera4:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: -500
-          yoffset: -3000
-          subcamWidth: 1417
-          subcamHeight: 1583
-      camera5:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: -500
-          yoffset: -4700
-          subcamWidth: 1417
-          subcamHeight: 1583
-      camera6:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: -500
-          yoffset: -6300
-          subcamWidth: 1417
-          subcamHeight: 1583
-      camera7:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: 1250
-          yoffset: -5000
-          subcamWidth: 1250
-          subcamHeight: 1458
-      camera8:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: 1200
-          yoffset: -6500
-          subcamWidth: 1375
-          subcamHeight: 1083
-      camera9:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: 833
-          yoffset: -3000
-          subcamWidth: 625
-          subcamHeight: 916
+      extends: http://vwf.example.com/aframe/abox.vwf
+      properties:
+        position: "0 4 -2"
+        rotation: "0 0 0"
+        depth: 0.5
+        height: 0.5
+        width: 0.5
+        opacity: 0.5
+        transparent: true
+        color: "green"
+      children:
+        interpolation:
+          extends: http://vwf.example.com/aframe/interpolation-component.vwf
+          properties:
+            enabled: true
+        camera1:
+          extends: http://vwf.example.com/aframe/offsetcamera.vwf
+        camera2:
+          extends: http://vwf.example.com/aframe/offsetcamera.vwf
 methods:
   initialize:
     body: |
           console.log("initializing...");
-          this.children.multicam.camera1.createCamera();
-          this.children.multicam.camera2.createCamera();
-          this.children.multicam.camera3.createCamera();
-          this.children.multicam.camera4.createCamera();
-          this.children.multicam.camera5.createCamera();
-          this.children.multicam.camera6.createCamera();
-          this.children.multicam.camera7.createCamera();
-          this.children.multicam.camera8.createCamera();
-          this.children.multicam.camera9.createCamera();
-
-          //var runL = vwf_view.kernel.find("", "/myLight3")[0];
-          //vwf_view.kernel.callMethod(runL, "run");
-
-          //var runL2 = vwf_view.kernel.find("", "/myLight2")[0];
-          //vwf_view.kernel.callMethod(runL2, "run");
-
-          //var runModel = vwf_view.kernel.find("", "/model")[0];
-          // vwf_view.kernel.callMethod(runModel, "run");
+          this.children.multicam.camera1.createCamera(3000, 2000, 0, 0, 1500, 2000);
+          this.children.multicam.camera2.createCamera(3000, 2000, 1500, 0, 1500, 2000);

public/multipixel/index.vwf.yaml_old

@@ -1,82 +0,0 @@
-# A-Frame & VWF simple scene
-# Copyright 2017 Krestianstvo.org project
----
-extends: http://vwf.example.com/aframe/ascene.vwf
-properties:
-  transparent: true
-  assets: "assets.json"
-children:
-  sky:
-    extends: http://vwf.example.com/aframe/asky.vwf
-    properties:
-      color: "#ECECEC"
-      side: "back"
-      fog: false
-  spaceText:
-    extends: http://vwf.example.com/aframe/atext.vwf
-    properties:
-      value: "Virtual World Framework & A-Frame"
-      color: "#b74217"
-      position: "-2 2.5 -2"
-  spaceText2:
-    extends: http://vwf.example.com/aframe/atext.vwf
-    properties:
-      value: "Project by Krestianstvo.org"
-      color: "#305b32"
-      position: "1 3 -4"
-  box:
-    extends: http://vwf.example.com/aframe/abox.vwf
-    properties:
-      position: "-1 0.5 -3"
-      rotation: "0 -30 0"
-      color: "#3c7249"
-      depth: 2
-      height: 1
-      width: 1
-  groundPlane:
-    extends: http://vwf.example.com/aframe/aplane.vwf
-    properties:
-      height: 50
-      width: 50
-      repeat: "10 10"
-      rotation: "-90 0 0"
-      color: "white"
-      wireframe: false
-      src: "#bg2"
-  multicam:
-    extends: http://vwf.example.com/aframe/abox.vwf
-    properties:
-      position: "0 1.6 -2"
-      depth: 0.5
-      height: 0.5
-      width: 0.5
-      opacity: 0.5
-      transparent: true
-      color: "green"
-      fullHeight: 3390
-      fullWidth: 2400
-    children:
-      interpolation:
-        extends: http://vwf.example.com/aframe/interpolation-component.vwf
-        properties:
-          enabled: true
-      camera1:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: 0
-          yoffset: -847.5
-          width: 2400
-          height: 1695
-      camera2:
-        extends: http://vwf.example.com/aframe/offsetcamera.vwf
-        properties:
-          xoffset: 0
-          yoffset: 847.5
-          width: 2400
-          height: 1695
-methods:
-  initialize:
-    body: |
-          console.log("initializing...");
-          this.children.multicam.camera1.createCamera();
-          this.children.multicam.camera2.createCamera();

public/webapps.json

@@ -44,16 +44,10 @@
         "text": "VR controler example",
         "featured": false
     },
-    "multicamera":{
-        "title":"Multi-Camera",
-        "imgUrl": "./multicamera/webimg.jpg",
-        "text": "Multi-camera example",
-        "featured": false
-    },
     "multipixel":{
         "title":"Multi-Pixel",
         "imgUrl": "./multipixel/webimg.jpg",
-        "text": "Multi-Pixel example",
+        "text": "Multi offset view camera example",
         "featured": false
     }
 }

support/client/lib/vwf/model/aframe/addon/aframe-components.js

@@ -519,9 +519,15 @@ AFRAME.registerComponent('gearvrcontrol', {
     
                 init: function () {
                     var self = this;
-                    this.setNewOffset();
+                    this.el.sceneEl.addEventListener('loaded', setOffset);
+
+                    function setOffset(){
+                        this.setNewOffset();
+                    }
+                    
                 },
             
+
                 update: function (old) {
                     this.fullWidth = this.data.fullWidth;
                     this.fullHeight = this.data.fullHeight;

support/client/lib/vwf/model/aframeComponent.js

@@ -231,15 +231,32 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                         value = propertyValue;
                         let parentNodeAF = aframeObject.el;
-                        let defs = ['fullWidth', 'fullHeight', 'xoffset', 'yoffset'];
+                        // let defs = ['fullWidth', 'fullHeight', 'xoffset', 'yoffset'];
 
-                        defs.forEach(element => {
-                            element == propertyName ? parentNodeAF.setAttribute('viewoffset', element, propertyValue) :
-                                value = undefined;
-                        })
+                        // defs.forEach(element => {
+                        //     element == propertyName ? parentNodeAF.setAttribute('viewoffset', element, propertyValue) :
+                        //         value = undefined;
+                        // })
 
                         switch (propertyName) {
                     
+                            case "fullWidth":
+                            parentNodeAF.setAttribute('viewoffset', 'fullWidth', propertyValue);
+                            break;
+
+                            case "fullHeight":
+                            parentNodeAF.setAttribute('viewoffset', 'fullHeight', propertyValue);
+                            break;
+
+                            case "yoffset":
+                            parentNodeAF.setAttribute('viewoffset', 'yoffset', propertyValue);
+                            break;
+
+                            case "xoffset":
+                            parentNodeAF.setAttribute('viewoffset', 'xoffset', propertyValue);
+                            break;
+
+                            
                             case "subcamWidth":
                                 parentNodeAF.setAttribute('viewoffset', 'width', propertyValue);
                                 break;
@@ -651,11 +668,11 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             break;
 
                         case "subcamWidth":
-                            value = parentNodeAF.getAttribute(aframeObject.compName).subcamWidth;
+                            value = parentNodeAF.getAttribute(aframeObject.compName).width;
                             break;
 
                         case "subcamHeight":
-                            value = parentNodeAF.getAttribute(aframeObject.compName).subcamHeight;
+                            value = parentNodeAF.getAttribute(aframeObject.compName).height;
                             break;
 
                         case "xoffset":

support/client/lib/vwf/view/aframeComponent.js

@@ -112,6 +112,7 @@ define(["module", "vwf/view"], function (module, view) {
                     }
                     break;
             }
+            
 
         },
 

support/client/lib/vwf/view/editor-new.js

@@ -933,32 +933,32 @@ define([
                     'fullWidth': {
                         min: 0,
                         max: 5000,
-                        step:1
+                        step:10
                     },
                     'fullHeight': {
                         min: 0,
                         max: 5000,
-                        step:1
+                        step:10
                     },
                     'xoffset': {
                         min: -10000,
                         max: 10000,
-                        step: 100
+                        step: 10
                     },
                     'yoffset': {
                         min: -10000,
                         max: 10000,
-                        step: 100
+                        step: 10
                     },
                     'subcamWidth': {
                         min: 0,
-                        max: 6000,
-                        step:1
+                        max: 5000,
+                        step:10
                     },
                     'subcamHeight': {
                         min: 0,
-                        max: 6000,
-                        step:1
+                        max: 5000,
+                        step:10
                     }
                 }
                 if (sliderPropNames.includes(m.name)){

support/proxy/vwf.example.com/aframe/offsetcamera.js

@@ -1,55 +1,30 @@
 this.initialize = function () {
-
 }
 
-this.createCamera = function () {
-
-    var fullHeight = this.parent.fullHeight;
-    if (!fullHeight) {
-        fullHeight = this.fullHeight;
-    }
-
-    var fullWidth = this.parent.fullWidth;
-    if (!fullWidth) {
-        fullWidth = this.fullWidth;
-    }
-    
+this.createCamera = function (fw, fh, xoffset, yoffset, subcamWidth, subcamHeight) {
 
-    var newNode = {
-        "extends": "http://vwf.example.com/aframe/abox.vwf",
+    let cameraNode = {
+        "extends": "http://vwf.example.com/aframe/acamera.vwf",
         "properties": {
-            "position": [0, 0, 0],
-            "depth": 0.2,
-            "height": 0.2,
-            "width": 0.2,
-            "color": "red"
+            "look-controls-enabled": false,
+            "wasd-controls-enabled": false,
+            "user-height": 0
         },
         children: {
-            cam: {
-                "extends": "http://vwf.example.com/aframe/acamera.vwf",
-                "properties": {
-                    "look-controls-enabled": false,
-                    "wasd-controls-enabled": false,
-                    "user-height": 0
-                },
-                children: {
-                    viewoffset: {
-                        extends: "http://vwf.example.com/aframe/viewOffsetCamera-component.vwf",
-                        properties: {
-                            fullWidth: fullWidth,
-                            fullHeight: fullHeight,
-                            xoffset: this.xoffset,
-                            yoffset: this.yoffset,
-                            subcamWidth: this. subcamWidth,
-                            subcamHeight: this. subcamHeight
-                        }
-
-                    }
+            viewoffset: {
+                extends: "http://vwf.example.com/aframe/viewOffsetCamera-component.vwf",
+                properties: {
+                    fullWidth: fw,
+                    fullHeight: fh,
+                    xoffset: xoffset,
+                    yoffset: yoffset,
+                    subcamWidth: subcamWidth,
+                    subcamHeight: subcamHeight
                 }
             }
         }
-    }
+}
 
-    this.children.create("cameraNode", newNode);
+    this.children.create("cam", cameraNode);
 
     }

support/proxy/vwf.example.com/aframe/offsetcamera.vwf.yaml

@@ -1,16 +1,18 @@
-# avatar
+# offset camera
 # Copyright 2017 Krestianstvo.org project
 ---
 extends: http://vwf.example.com/aframe/aentity.vwf
-type: "multicamera"
+type: "offsetcamera"
 properties:
-    fullWidth:
-    fullheight:
-    xoffset:
-    yoffset:
-    subcamWidth:
-    subcamHeight:
 methods:
     initialize:
+    createCamera:
+        parameters:
+            - fw
+            - fh
+            - xoffset
+            - yoffset
+            - subcamWidth
+            - subcamHeight
 scripts:
 - source: "http://vwf.example.com/aframe/offsetcamera.js"

support/proxy/vwf.example.com/aframe/viewOffsetCamera-component.js

@@ -0,0 +1,15 @@
+this.initialize = function () {
+}
+
+this.setParams = function(w, h) {
+   // debugger;
+    let width = this.properties.subcamWidth;
+    let height = this.properties.subcamHeight;
+
+    //TODO: not good trick to force updating property
+    vwf_view.kernel.setProperty(this.id, "subcamWidth", 1); 
+    vwf_view.kernel.setProperty(this.id, "subcamHeight", 1);
+
+    vwf_view.kernel.setProperty(this.id, "subcamWidth", width); 
+    vwf_view.kernel.setProperty(this.id, "subcamHeight", height);
+}

support/proxy/vwf.example.com/aframe/viewOffsetCamera-component.vwf.yaml

@@ -8,4 +8,8 @@ properties:
   xoffset:
   yoffset:
   subcamWidth:
-  subcamHeight:
+  subcamHeight:
+methods:
+  setParams:
+scripts:
+- source: "http://vwf.example.com/aframe/viewOffsetCamera-component.js"