osc-example update

public/osc-example/index.vwf.yaml

@@ -37,101 +37,106 @@ children:
       depth: 1
       height: 1
       width: 1
+    children:
+      sphere:
+        extends: http://vwf.example.com/aframe/asphere.vwf
+        properties:
+          position: "0 2 0"
+          rotation: "0 0 0"
+          color: "#3c7249"
+          radius: 0.4
+  newSky:
+    extends: http://vwf.example.com/aframe/aentity.vwf
+    children:
+      skyshader:
+        extends: http://vwf.example.com/aframe/app-skyshader-component.vwf
+  oscLang:
+    extends: http://vwf.example.com/ohm/node.vwf
+    properties:
       osc: true
+      grammar:
+      semantics:
+      ohmLang: |
+                parseOSC {
+                            all = address ":" props
+                            address = ("/" addr)*
+                            addr = ~("/") propSingle
+                            props 
+                                = propSingle row  -- single
+                                | "rgb" row       -- rgb
+                                | propSingle number -- prop
+                            row = "[" col rep "]"
+                            rep = ("," col)*
+                            col = colChar*
+                            colChar = ~("[" | "," | "]") number
+                            propSingle = ~("rgb") letter*
+                            number  (a number)
+                                = digit* "." digit+  -- fract
+                                | digit+             -- whole
+                            }
     methods:
+      initLang:
+        body: |
+              console.log("add operations to semantics")
+              this.addOperationLang();
+      addOperationLang:
+        body: |
+              var self = this;
+              this.semantics.addOperation('parse',
+              {
+                  all: function(e, _, k){ return {"address": e.parse(), "params": k.parse()} },
+                  address: function(_, e){ return e.parse()},
+                  addr: function(e) {return e.parse() },
+                  props: function(e) {return e.parse()},
+                  props_single: function( e, k){
+                          return {'propName': e.parse(), 'propValue': k.parse()};
+                  },
+                  props_rgb: function(_, e)
+                  {
+                      return {'propName': 'color', 'propValue': ['rgb('+ e.parse() + ')']};
+                  },
+                  props_prop: function(e, k){
+                          return {'propName': e.parse(), 'propValue': k.parse()};
+                  },
+                  row: function(_l, e, k, _e){
+                         let end = k.parse();
+                          if (end.length !== 0) {
+                           return e.parse() +','+ k.parse();
+                         }
+                         return e.parse()    
+                  },
+                  rep: function(_, e){ return e.parse()},
+                  col: function(e) {return e.parse()},
+                  colChar: function(e) {return e.parse()},
+                  number: function(_) {return parseFloat(this.sourceString)},
+                  propSingle: function(_){return this.sourceString}
+              });
       getOSC:
         parameters:
           - msg
         body: |
-              this.parseColorOSC(msg);
-              this.parseSingleOSC(msg);
-      parseColorOSC:
+              this.parseOSC(msg);
+      parseOSC:
         parameters:
           - msg
         body: |
                 let str = msg.address + JSON.stringify(msg.args);
-                var match = this.oscLang.grammar.match(str, "rgb");
+                var match = this.grammar.match(str, "all");
                 if (match.succeeded())
                 {
-                    let res = this.oscLang.semantics(match).parse();
-                   this.setColorFromOSC(res);
-                }
-      setSinglePropFromOSC:
-        parameters:
-          - val
-        body: |
-                if (this.properties[val.propName]){
-                  this[val.propName] = val.propValue
+                    let res = this.semantics(match).parse();
+                    this.setPropsFromOSC(res);
                 }
-      setColorFromOSC:
-        parameters:
-          - propValue
-        body: |
-              this.color = propValue;
-              //this.parent.myLight.color = propValue;
-      parseSingleOSC:
+      setPropsFromOSC:
         parameters:
-          - msg
+          - res
         body: |
-                let str = msg.address + JSON.stringify(msg.args[0]);
-                var match = this.oscLang.grammar.match(str, "prop");
-                if (match.succeeded())
-                {
-                    let res = this.oscLang.semantics(match).parse();
-                    this.setSinglePropFromOSC(res);
-                }
-    children:
-      oscLang:
-          extends: http://vwf.example.com/ohm/node.vwf
-          properties:
-            grammar:
-            semantics:
-            ohmLang: |
-                      parseOSC {
-                        rgb = "/rgb/" row
-                        row = "[" col rep "]"
-                        rep = ("," col)*
-                        col = colChar*
-                        colChar = ~("[" | "," | "]") number
-                        prop = "/" propSingle "/" number
-                        propSingle = letter*
-                        number  (a number)
-                          = digit* "." digit+  -- fract
-                          | digit+             -- whole
-                      }
-          methods:
-            initLang:
-              body: |
-                    console.log("add operations to semantics")
-                    this.addOperationLang();
-            addOperationLang:
-              body: |
-                    var self = this;
-                    this.semantics.addOperation('parse',
-                    {
-                        rgb: function(_, e)
-                        {
-                            return 'rgb('+ e.parse() + ')'
-                        },
-                         prop: function(_l, e, _r, k){
-                                return {'propName': e.parse(), 'propValue': k.parse()};
-                        },
-                        row: function(_l, e, k, _e){
-                                return e.parse() +','+ k.parse();
-                        },
-                        rep: function(_, e){ return e.parse()},
-                        col: function(e) {return e.parse()},
-                        colChar: function(e) {return e.parse()},
-                        number: function(_) {return parseFloat(this.sourceString)},
-                        propSingle: function(_){return this.sourceString}
-                    });     
-  skySun:
-    extends: http://vwf.example.com/aframe/aentity.vwf
-    children:
-      sun:
-        extends: http://vwf.example.com/aframe/app-sun-component.vwf
-  newSky:
-    extends: http://vwf.example.com/aframe/aentity.vwf
-    children:
-      skyshader:
-        extends: http://vwf.example.com/aframe/app-skyshader-component.vwf
+              //console.log(res);
+              let address = '/'+res.address.join('/');
+              let nodeID = vwf.find("", address);
+              if (res.params.propValue.length == 1) {
+                  vwf_view.kernel.setProperty(nodeID, res.params.propName, [res.params.propValue[0]])
+              }
+              if (res.params.propValue.length >= 1) {
+                  vwf_view.kernel.setProperty(nodeID, res.params.propName, [res.params.propValue])
+              }

public/web/lib/app.css

@@ -10,7 +10,7 @@ background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(
 }
 
 .world-card {
-  background-color: white;
+  background-color: #f5f5f5;
 }
 
 .world-link a:link {

public/web/lib/app.js

@@ -122,7 +122,7 @@ var options = {
                             class: "mdc-card__media world-card__16-9-media",
                             $init: function () {
                                 if (desc[1].imgUrl !== "") {
-                                    this.style.backgroundImage = 'linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(' + desc[1].imgUrl + ')';
+                                    this.style.backgroundImage = 'linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url(' + desc[1].imgUrl + ')';
                                 }
                             }
                         },

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

@@ -4,58 +4,58 @@ if (typeof AFRAME === 'undefined') {
 
 AFRAME.registerComponent('linepath', {
     schema: {
-      color: { default: '#000' },
-      width: { default: 0.01 },
-      path: {
-        default: [
-          { x: -0.5, y: 0, z: 0 },
-          { x: 0.5, y: 0, z: 0 }
-        ]
-  
-        // Deserialize path in the form of comma-separated vec3s: `0 0 0, 1 1 1, 2 0 3`.
-        // parse: function (value) {
-        //   return value.split(',').map(coordinates.parse);
-        // },
-  
-        // Serialize array of vec3s in case someone does setAttribute('line', 'path', [...]).
-        // stringify: function (data) {
-        //   return data.map(coordinates.stringify).join(',');
-        // }
-      }
+        color: { default: '#000' },
+        width: { default: 0.01 },
+        path: {
+            default: [
+                { x: -0.5, y: 0, z: 0 },
+                { x: 0.5, y: 0, z: 0 }
+            ]
+
+            // Deserialize path in the form of comma-separated vec3s: `0 0 0, 1 1 1, 2 0 3`.
+            // parse: function (value) {
+            //   return value.split(',').map(coordinates.parse);
+            // },
+
+            // Serialize array of vec3s in case someone does setAttribute('line', 'path', [...]).
+            // stringify: function (data) {
+            //   return data.map(coordinates.stringify).join(',');
+            // }
+        }
     },
-    
+
     update: function () {
-      var material = new MeshLineMaterial({
+        var material = new MeshLineMaterial({
             color: new THREE.Color(this.data.color), //this.data.color
             lineWidth: this.data.width
-      });
-  
-      var geometry = new THREE.Geometry();
-      this.data.path.forEach(function (vec3) {
-        geometry.vertices.push(
-          new THREE.Vector3(vec3.x, vec3.y, vec3.z)
-        );
-      });
-  
-     let line = new MeshLine();
-      line.setGeometry( geometry );
+        });
 
-//new THREE.Line(geometry, material)
+        var geometry = new THREE.Geometry();
+        this.data.path.forEach(function (vec3) {
+            geometry.vertices.push(
+                new THREE.Vector3(vec3.x, vec3.y, vec3.z)
+            );
+        });
+
+        let line = new MeshLine();
+        line.setGeometry(geometry);
 
-      this.el.setObject3D('mesh', new THREE.Mesh( line.geometry, material ));
+        //new THREE.Line(geometry, material)
+
+        this.el.setObject3D('mesh', new THREE.Mesh(line.geometry, material));
     },
-    
+
     remove: function () {
-      this.el.removeObject3D('mesh');
+        this.el.removeObject3D('mesh');
     }
-  });
+});
 
 
 AFRAME.registerComponent('gizmo', {
 
     schema: {
         mode: { default: 'translate' }
-      },
+    },
 
     update: function (old) {
         let modes = ['translate', 'rotate', 'scale'];
@@ -64,8 +64,8 @@ AFRAME.registerComponent('gizmo', {
                 return el == this.data.mode
             })
             if (newMode.length !== 0) {
-            this.mode = this.data.mode
-            this.transformControls.setMode(this.mode)
+                this.mode = this.data.mode
+                this.transformControls.setMode(this.mode)
             }
         }
     },
@@ -78,50 +78,50 @@ AFRAME.registerComponent('gizmo', {
 
         this.transformControls = new THREE.TransformControls(activeCamera, renderer.domElement);
 
-        this.transformControls.attach( this.el.object3D);
-        this.el.sceneEl.setObject3D('control-'+this.el.id,  this.transformControls);
+        this.transformControls.attach(this.el.object3D);
+        this.el.sceneEl.setObject3D('control-' + this.el.id, this.transformControls);
 
         this.transformControls.addEventListener('change', function (evt) {
-           // console.log('changed');
+            // console.log('changed');
             var object = self.transformControls.object;
             if (object === undefined) {
-              return;
+                return;
             }
 
             var transformMode = self.transformControls.getMode();
             switch (transformMode) {
-              case 'translate':
-              vwf_view.kernel.setProperty(object.el.id, 'position', 
-              [object.position.x, object.position.y, object.position.z] )  
-           
-                break;
-              case 'rotate':
-              vwf_view.kernel.setProperty(object.el.id, 'rotation', 
-              [THREE.Math.radToDeg(object.rotation.x), THREE.Math.radToDeg(object.rotation.y), THREE.Math.radToDeg(object.rotation.z)] )  
-              
-                break;
-              case 'scale':
-              vwf_view.kernel.setProperty(object.el.id, 'scale', 
-              [object.scale.x, object.scale.y, object.scale.z] )
-               
-                break;
+                case 'translate':
+                    vwf_view.kernel.setProperty(object.el.id, 'position',
+                        [object.position.x, object.position.y, object.position.z])
+
+                    break;
+                case 'rotate':
+                    vwf_view.kernel.setProperty(object.el.id, 'rotation',
+                        [THREE.Math.radToDeg(object.rotation.x), THREE.Math.radToDeg(object.rotation.y), THREE.Math.radToDeg(object.rotation.z)])
+
+                    break;
+                case 'scale':
+                    vwf_view.kernel.setProperty(object.el.id, 'scale',
+                        [object.scale.x, object.scale.y, object.scale.z])
+
+                    break;
             }
-            
+
             //vwf_view.kernel.fireEvent(evt.detail.target.id, "clickEvent")
-      });
+        });
     },
 
     remove: function () {
         this.transformControls.detach();
-        this.el.sceneEl.removeObject3D('control-'+this.el.id);
-       
-      },
+        this.el.sceneEl.removeObject3D('control-' + this.el.id);
+
+    },
 
     tick: function (t) {
         this.transformControls.update();
     }
 
-  });
+});
 
 
 
@@ -129,15 +129,15 @@ AFRAME.registerComponent('cursor-listener', {
     init: function () {
         this.el.addEventListener('click', function (evt) {
             console.log('I was clicked at: ', evt.detail.intersection.point);
-            let cursorID = 'cursor-avatar-'+ vwf_view.kernel.moniker();
+            let cursorID = 'cursor-avatar-' + vwf_view.kernel.moniker();
             if (evt.detail.cursorEl.id.includes(vwf_view.kernel.moniker())) {
-                 vwf_view.kernel.fireEvent(evt.detail.target.id, "clickEvent")
+                vwf_view.kernel.fireEvent(evt.detail.target.id, "clickEvent")
             }
-            
+
             //vwf_view.kernel.fireEvent(evt.detail.target.id, "clickEvent")
-      });
+        });
     }
-  });
+});
 
 AFRAME.registerComponent('raycaster-listener', {
     init: function () {
@@ -146,52 +146,51 @@ AFRAME.registerComponent('raycaster-listener', {
         this.intersected = false;
         this.casters = {}
 
-      this.el.addEventListener('raycaster-intersected', function (evt) {
+        this.el.addEventListener('raycaster-intersected', function (evt) {
 
-        if (evt.detail.el.nodeName == 'A-CURSOR') {
-            //console.log('CURSOR was intersected at: ', evt.detail.intersection.point);
-
-        } else {
-            if (self.intersected) { 
-                
+            if (evt.detail.el.nodeName == 'A-CURSOR') {
+                //console.log('CURSOR was intersected at: ', evt.detail.intersection.point);
 
             } else {
-                console.log('I was intersected at: ', evt.detail.intersection.point);
-                vwf_view.kernel.fireEvent(evt.detail.target.id, "intersectEvent")
+                if (self.intersected) {
+
+
+                } else {
+                    console.log('I was intersected at: ', evt.detail.intersection.point);
+                    vwf_view.kernel.fireEvent(evt.detail.target.id, "intersectEvent")
+                }
+
+                self.casters[evt.detail.el.id] = evt.detail.el;
+                self.intersected = true;
             }
-          
-            self.casters[evt.detail.el.id] = evt.detail.el;
-            self.intersected = true;
-        }
-        
-      });
 
-      this.el.addEventListener('raycaster-intersected-cleared', function (evt) {
+        });
+
+        this.el.addEventListener('raycaster-intersected-cleared', function (evt) {
 
 
-        if (evt.detail.el.nodeName == 'A-CURSOR') {
-            //console.log('CURSOR was intersected at: ', evt.detail.intersection.point);
+            if (evt.detail.el.nodeName == 'A-CURSOR') {
+                //console.log('CURSOR was intersected at: ', evt.detail.intersection.point);
 
-        } else {
-            if (self.intersected) { 
-                console.log('Clear intersection');
-                if (Object.entries(self.casters).length == 1 && (self.casters[evt.detail.el.id] !== undefined))
-                {
-                    vwf_view.kernel.fireEvent(evt.detail.target.id, "clearIntersectEvent")
+            } else {
+                if (self.intersected) {
+                    console.log('Clear intersection');
+                    if (Object.entries(self.casters).length == 1 && (self.casters[evt.detail.el.id] !== undefined)) {
+                        vwf_view.kernel.fireEvent(evt.detail.target.id, "clearIntersectEvent")
+                    }
+                    delete self.casters[evt.detail.el.id]
+                } else { }
+
+                self.intersected = false;
             }
-                delete self.casters[evt.detail.el.id]
-            } else {}
-        
-            self.intersected = false;
-        }
 
-        
 
-      });
+
+        });
 
 
     }
-  });
+});
 
 AFRAME.registerComponent('envmap', {
 
@@ -277,83 +276,97 @@ AFRAME.registerComponent('envmap', {
     }
 })
 
- //https://threejs.org/examples/webgl_shaders_sky.html
-
- AFRAME.registerComponent('skyshader', {
-    
-    
-        init: function () {
-    
-            let sunSphereEl = document.querySelector('a-scene').querySelector('#sun');
-            this.sunSphere = sunSphereEl.object3D;
-    
-            this.sky = new THREE.Sky();
-            let scene = this.el.sceneEl;
-    
-    
-            let effectController = {
-                turbidity: 5,
-                rayleigh: 2,
-                mieCoefficient: 0.005,
-                mieDirectionalG: 0.8,
-                luminance: 1,
-                inclination: 0, // elevation / inclination
-                azimuth: 0.25, // Facing front,
-                sun: ! true
-            };
-    
-            let uniforms = this.sky.uniforms;
-            uniforms.turbidity.value = effectController.turbidity;
-            uniforms.rayleigh.value = effectController.rayleigh;
-            uniforms.luminance.value = effectController.luminance;
-            uniforms.mieCoefficient.value = effectController.mieCoefficient;
-            uniforms.mieDirectionalG.value = effectController.mieDirectionalG;
-    
-            this.el.setObject3D('mesh', this.sky.mesh);
-    
-            let distance = 400000;
-    
-            var theta = Math.PI * (effectController.inclination - 0.5);
-            var phi = 2 * Math.PI * (effectController.azimuth - 0.5);
-    
-            this.sunSphere.position.x = distance * Math.cos(phi);
-            this.sunSphere.position.y = distance * Math.sin(phi) * Math.sin(theta);
-            this.sunSphere.position.z = distance * Math.sin(phi) * Math.cos(theta);
-    
-            this.sunSphere.visible = effectController.sun;
-            this.sky.uniforms.sunPosition.value.copy(this.sunSphere.position);
-    
-    
-        },
-    
-        update: function () {
-    
-        },
-    
-        tick: function (t) {
-    
-        }
-    })
-    
-    AFRAME.registerComponent('sun', {
-    
-    
-        init: function () {
-    
-            this.sunSphere = new THREE.Mesh(
-                new THREE.SphereBufferGeometry(20000, 16, 8),
-                new THREE.MeshBasicMaterial({ color: 0xffffff })
-            );
-            this.sunSphere.position.y = - 700000;
-            this.sunSphere.visible = true;
-    
-            this.el.setObject3D('mesh', this.sunSphere);
-    
-        },
-    
-        update: function () {
-        },
-    
-        tick: function (t) {
-        }
-    })
+//https://threejs.org/examples/webgl_shaders_sky.html
+
+AFRAME.registerComponent('skyshader', {
+
+
+    makeSun: function () {
+        let sunSphere = new THREE.Mesh(
+            new THREE.SphereBufferGeometry(20000, 16, 8),
+            new THREE.MeshBasicMaterial({ color: 0xffffff })
+        );
+        sunSphere.position.y = - 700000;
+        sunSphere.visible = true;
+
+        let scene = this.el.sceneEl;
+        this.el.sceneEl.setObject3D('sun', sunSphere);
+    },
+
+    init: function () {
+
+        //let sunSphereEl = document.querySelector('a-scene').querySelector('#sun');
+        //this.sunSphere = sunSphereEl.object3D;
+        this.makeSun();
+        this.sunSphere = this.el.sceneEl.getObject3D('sun');
+
+        this.sky = new THREE.Sky();
+        let scene = this.el.sceneEl;
+
+
+        let effectController = {
+            turbidity: 5,
+            rayleigh: 2,
+            mieCoefficient: 0.005,
+            mieDirectionalG: 0.8,
+            luminance: 1,
+            inclination: 0, // elevation / inclination
+            azimuth: 0.25, // Facing front,
+            sun: ! true
+        };
+
+        let uniforms = this.sky.uniforms;
+        uniforms.turbidity.value = effectController.turbidity;
+        uniforms.rayleigh.value = effectController.rayleigh;
+        uniforms.luminance.value = effectController.luminance;
+        uniforms.mieCoefficient.value = effectController.mieCoefficient;
+        uniforms.mieDirectionalG.value = effectController.mieDirectionalG;
+
+        this.el.setObject3D('mesh', this.sky.mesh);
+
+        let distance = 400000;
+
+        var theta = Math.PI * (effectController.inclination - 0.5);
+        var phi = 2 * Math.PI * (effectController.azimuth - 0.5);
+
+        this.sunSphere.position.x = distance * Math.cos(phi);
+        this.sunSphere.position.y = distance * Math.sin(phi) * Math.sin(theta);
+        this.sunSphere.position.z = distance * Math.sin(phi) * Math.cos(theta);
+
+        this.sunSphere.visible = effectController.sun;
+        this.sky.uniforms.sunPosition.value.copy(this.sunSphere.position);
+
+
+    },
+
+    update: function () {
+
+    },
+
+    tick: function (t) {
+
+    }
+})
+
+AFRAME.registerComponent('sun', {
+
+
+    init: function () {
+
+        this.sunSphere = new THREE.Mesh(
+            new THREE.SphereBufferGeometry(20000, 16, 8),
+            new THREE.MeshBasicMaterial({ color: 0xffffff })
+        );
+        this.sunSphere.position.y = - 700000;
+        this.sunSphere.visible = true;
+
+        this.el.setObject3D('mesh', this.sunSphere);
+
+    },
+
+    update: function () {
+    },
+
+    tick: function (t) {
+    }
+})

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

@@ -71,7 +71,16 @@ define(["module", "vwf/view", "vwf/view/oscjs/dist/osc-module"], function(module
 
 	function findAllNodesWithOSC(oscMessage){
 
-		var children = vwf.children(vwf.application());
+		let appID = vwf.application();
+		var oscSceneProp = vwf.getProperty(appID, 'osc');
+		if (oscSceneProp !== undefined){
+			if (oscSceneProp){
+				//console.log('now callMethod');
+				vwf_view.kernel.callMethod(appID, 'getOSC', [oscMessage]);
+			}
+		}
+
+		var children = vwf.children(appID);
 			children.forEach(function(child){
 				var oscprop = vwf.getProperty(child, 'osc');
 				if (oscprop !== undefined){