next multipixel

public/multipixel/appui.js

@@ -3,15 +3,6 @@ function createApp() {
 
     let self = this
 
-    function toggleFullScreen() {
-        if (!document.fullscreenElement) {
-            document.documentElement.webkitRequestFullscreen();
-        } else {
-          if (document.exitFullscreen) {
-            document.exitFullscreen(); 
-          }
-        }
-      }
 
     return {
         $cell: true,
@@ -28,13 +19,16 @@ function createApp() {
                         $type: "div",
                         class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                         $components: [
+                          
                             {
                                 $cell: true,
                                 $type: "button",
                                 class: "mdc-button mdc-button--raised",
-                                $text: "Fullscreen",
+                                $text: "Camera 1",
                                 onclick: function (e) {
-                                    toggleFullScreen()
+                                    let nodeID = vwf.find("","/multicam/camera1/cameraNode/cam")[0];
+                                    let avatarID = vwf.moniker_;
+                                    vwf_view.kernel.callMethod(nodeID, "setCameraToActive", [avatarID]);
                                 }
 
                             },
@@ -42,9 +36,9 @@ function createApp() {
                                 $cell: true,
                                 $type: "button",
                                 class: "mdc-button mdc-button--raised",
-                                $text: "Camera 1",
+                                $text: "Camera 2",
                                 onclick: function (e) {
-                                    let nodeID = vwf.find("","/multicam/camera1/cameraNode/cam")[0];
+                                    let nodeID = vwf.find("","/multicam/camera2/cameraNode/cam")[0];
                                     let avatarID = vwf.moniker_;
                                     vwf_view.kernel.callMethod(nodeID, "setCameraToActive", [avatarID]);
                                 }
@@ -54,14 +48,14 @@ function createApp() {
                                 $cell: true,
                                 $type: "button",
                                 class: "mdc-button mdc-button--raised",
-                                $text: "Camera 2",
+                                $text: "Camera 3",
                                 onclick: function (e) {
-                                    let nodeID = vwf.find("","/multicam/camera2/cameraNode/cam")[0];
+                                    let nodeID = vwf.find("","/multicam/camera3/cameraNode/cam")[0];
                                     let avatarID = vwf.moniker_;
                                     vwf_view.kernel.callMethod(nodeID, "setCameraToActive", [avatarID]);
                                 }
 
-                            },
+                            }
 
                         ]
                     }

public/multipixel/index.vwf.yaml

@@ -27,12 +27,12 @@ children:
   box:
     extends: http://vwf.example.com/aframe/abox.vwf
     properties:
-      position: "-1 0.5 -3"
+      position: "-1 0.5 -8"
       rotation: "0 -30 0"
       color: "#3c7249"
       depth: 2
-      height: 1
-      width: 1
+      height: 9
+      width: 2
   groundPlane:
     extends: http://vwf.example.com/aframe/aplane.vwf
     properties:
@@ -53,8 +53,8 @@ children:
       opacity: 0.5
       transparent: true
       color: "green"
-      fullHeight: 3390
-      fullWidth: 2400
+      fullHeight: 2048
+      fullWidth: 3072
     children:
       interpolation:
         extends: http://vwf.example.com/aframe/interpolation-component.vwf
@@ -64,19 +64,27 @@ children:
         extends: http://vwf.example.com/aframe/offsetcamera.vwf
         properties:
           xoffset: 0
-          yoffset: -847.5
-          width: 2400
-          height: 1695
+          yoffset: 0
+          subcamWidth: 1536
+          subcamHeight: 2048
       camera2:
+        extends: http://vwf.example.com/aframe/offsetcamera.vwf
+        properties:
+          xoffset: 1536
+          yoffset: 0
+          subcamWidth: 1536
+          subcamHeight: 2048
+      camera3:
         extends: http://vwf.example.com/aframe/offsetcamera.vwf
         properties:
           xoffset: 0
-          yoffset: 847.5
-          width: 2400
-          height: 1695
+          yoffset: 2048
+          subcamWidth: 2048
+          subcamHeight: 1536
 methods:
   initialize:
     body: |
           console.log("initializing...");
           this.children.multicam.camera1.createCamera();
           this.children.multicam.camera2.createCamera();
+          this.children.multicam.camera3.createCamera();

public/multipixel/index.vwf.yaml_old

@@ -0,0 +1,82 @@
+# 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();

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

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

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

@@ -907,7 +907,101 @@ define([
 
             let propertiesCell = function (m) {
 
-                var editComponents = [{}, {}]
+                var editComponents = [{}, {}];
+
+                // fullWidth:
+                // fullHeight:
+                // xoffset:
+                // yoffset:
+                // width:
+                // height:
+
+                let sliderPropNames = ['width', 'height', 'depth', 'fullWidth', 'fullHeight', 'xoffset', 'yoffset', 'subcamWidth', 'subcamHeight'];
+                let sliderProps = {
+                    'width': {
+                        min: 0,
+                        max: 30
+                    },
+                    'height': {
+                        min: 0,
+                        max: 30
+                    },
+                    'depth': {
+                        min: 0,
+                        max: 30
+                    },
+                    'fullWidth': {
+                        min: 0,
+                        max: 5000,
+                        setp:1
+                    },
+                    'fullHeight': {
+                        min: 0,
+                        max: 5000,
+                        setp:1
+                    },
+                    'xoffset': {
+                        min: -5000,
+                        max: 5000,
+                        setp:1
+                    },
+                    'yoffset': {
+                        min: -5000,
+                        max: 5000,
+                        setp:1
+                    },
+                    'subcamWidth': {
+                        min: 0,
+                        max: 5000,
+                        setp:1
+                    },
+                    'subcamHeight': {
+                        min: 0,
+                        max: 5000,
+                        setp:1
+                    }
+                }
+                if (sliderPropNames.includes(m.name)){
+
+                   let currenValue = JSON.parse(m.getValue());
+
+                    var sliderComponent =  widgets.sliderContinuous({
+                        'id': 'prop-slider-' + m.name,
+                        'label': 'Slider',
+                        'min': sliderProps[m.name].min,
+                        'max': sliderProps[m.name].max,
+                        'step': sliderProps[m.name].step ? sliderProps[m.name].step: 0.01,
+                        'value': currenValue,
+                        'init': function(){
+
+
+        const myEl = this;
+        var continuousSlider = new mdc.slider.MDCSlider(myEl);
+        this._comp = continuousSlider;
+        continuousSlider.listen('MDCSlider:input', function(e) {
+            console.log(continuousSlider.value)
+            let myEl = e.currentTarget;
+           // let prop = myEl._prop.body;
+            //document.querySelector('#propAceEditor').env.editor.setValue(prop);
+            self.kernel.setProperty(myEl._currentNode, m.name, continuousSlider.value);
+          //continuousValue.textContent = continuousSlider.value;
+         
+        });
+        continuousSlider.listen('MDCSlider:change', function(e) {
+          console.log(continuousSlider.value);
+          let myEl = e.currentTarget;
+         // let prop = myEl._prop.body;
+          //document.querySelector('#propAceEditor').env.editor.setValue(prop);
+          self.kernel.setProperty(myEl._currentNode, m.name, continuousSlider.value);
+
+          //continuousCommittedValue.textContent = continuousSlider.value;
+        })
+    }
+})
+
+                } else {
+                    sliderComponent = {}
+                }
 
                 if (m.name.indexOf("semantics") > -1) { }
                 else if (m.name.indexOf("grammar") > -1) { }
@@ -958,6 +1052,9 @@ define([
                             $type: "div",
                             class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-6",
                             $components: [
+                                
+                                   sliderComponent,
+                               
                                 {
                                     class: "mdc-textfield",
                                     $cell: true,
@@ -1631,6 +1728,28 @@ define([
 
             }
 
+            let numberSliderComponent = {
+                $cell: true,
+                $type: "div",
+                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-4",
+                $init: function () {
+                    
+                },
+                $components: [
+                    {
+                        $cell: true,
+                        $type: "div",
+                        style: "padding: 0 16px;", 
+                        $components:[
+                            {}
+                        ]
+                    }
+                    
+                        
+                    
+                ]
+            }
+
             let colorPickerComponent = {
                 $cell: true,
                 $type: "div",
@@ -1744,6 +1863,7 @@ define([
                         if (this._propName == 'color') {
                             livePropertyComponent = colorPickerComponent
                         }
+                        
 
                     } else {
                         editorClass = "mdc-layout-grid__cell mdc-layout-grid__cell--span-12"
@@ -2920,6 +3040,8 @@ define([
 
 
             let propCell = document.querySelector("#currentNode #prop-" + propertyName);
+            let propSlider = document.querySelector("#currentNode #prop-slider-" + propertyName);
+            
 
             if (propCell !== null) {
                 if (propCell._currentNode == nodeID) {
@@ -2927,6 +3049,13 @@ define([
                 }
             }
 
+            if (propSlider !== null) {
+                if (propSlider._currentNode == nodeID) {
+                    //const propSliderComp = new new mdc.slider.MDCSlider(propSlider);
+                    propSlider._comp.value = node.properties[propertyName].getValue();
+                }
+            }
+
         },
 
         //gotProperty: [ /* nodeID, propertyName, propertyValue */ ],

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

@@ -30,6 +30,135 @@ define(function () {
 
         }
 
+        sliderDiscrete(obj) {
+            return {
+                $cell: true,
+                $type: "div",
+                class: "mdc-slider mdc-slider--discrete",
+                role: "slider",
+                'aria-valuemin': obj.min,
+                'aria-valuemax': obj.max,
+                'aria-label': obj.label,
+                $init: obj.init,
+                $components: [
+                    {
+                        $cell: true,
+                        $type: "div",
+                        class: "mdc-slider__track-container",
+                        $components: [
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-slider__track",
+                                
+                            }
+                        ]
+                    },
+                    {
+                        $cell: true,
+                        $type: "div",
+                        class: "mdc-slider__thumb-container",
+                        $components: [
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-slider__pin",
+                                $components: [
+                                    {
+                                        $cell: true,
+                                        $type: "span",
+                                        class: "mdc-slider__pin-value-marker",
+                                    }
+                                ]
+                                
+                            },
+                            {
+                                $cell: true,
+                                $type: "svg",
+                                class: "mdc-slider__thumb",
+                                width: 21,
+                                height: 21,
+                                $components: [
+                                    {
+                                        $cell: true,
+                                        $type: "circle",
+                                        cx: 10.5,
+                                        cy: 10.5,
+                                        r: 7.875
+                                    }
+                                ]
+                            },
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-slider__focus-ring"
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+
+        sliderContinuous(obj) {
+            return {
+                $cell: true,
+                $type: "div",
+                class: "mdc-slider",
+                role: "slider",
+                tabindex: 0,
+                'id': obj.id,
+                'aria-valuemin': obj.min,
+                'aria-valuemax': obj.max,
+                'aria-label': obj.label,
+                'aria-valuenow': obj.value,
+                'data-step': obj.step,
+                $init: obj.init,
+                $components: [
+                    {
+                        $cell: true,
+                        $type: "div",
+                        class: "mdc-slider__track-container",
+                        $components: [
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-slider__track",
+                                
+                            }
+                        ]
+                    },
+                    {
+                        $cell: true,
+                        $type: "div",
+                        class: "mdc-slider__thumb-container",
+                        $components: [
+                            {
+                                $cell: true,
+                                $type: "svg",
+                                class: "mdc-slider__thumb",
+                                width: 21,
+                                height: 21,
+                                $components: [
+                                    {
+                                        $cell: true,
+                                        $type: "circle",
+                                        cx: 10.5,
+                                        cy: 10.5,
+                                        r: 7.875
+                                    }
+                                ]
+                            },
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-slider__focus-ring"
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+
         icontoggle(obj) {
             return {
                 $cell: true,

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

@@ -40,8 +40,8 @@ this.createCamera = function () {
                             fullHeight: fullHeight,
                             xoffset: this.xoffset,
                             yoffset: this.yoffset,
-                            width: this.width,
-                            height: this.height
+                            subcamWidth: this. subcamWidth,
+                            subcamHeight: this. subcamHeight
                         }
 
                     }

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

@@ -8,8 +8,8 @@ properties:
     fullheight:
     xoffset:
     yoffset:
-    width:
-    height:
+    subcamWidth:
+    subcamHeight:
 methods:
     initialize:
 scripts:

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

@@ -7,5 +7,5 @@ properties:
   fullHeight:
   xoffset:
   yoffset:
-  width:
-  height:
+  subcamWidth:
+  subcamHeight: