next on multicamera world

public/multipixel/appui.js

@@ -0,0 +1,74 @@
+
+function createApp() {
+
+    let self = this
+
+    function toggleFullScreen() {
+        if (!document.fullscreenElement) {
+            document.documentElement.webkitRequestFullscreen();
+        } else {
+          if (document.exitFullscreen) {
+            document.exitFullscreen(); 
+          }
+        }
+      }
+
+    return {
+        $cell: true,
+        $type: "div",
+        class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
+        $components: [
+            {
+                $cell: true,
+                $type: "div",
+                class: "mdc-layout-grid__inner",
+                $components: [
+                    {
+                        $cell: true,
+                        $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",
+                                onclick: function (e) {
+                                    toggleFullScreen()
+                                }
+
+                            },
+                            {
+                                $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]);
+                                }
+
+                            },
+                            {
+                                $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]);
+                                }
+
+                            },
+
+                        ]
+                    }
+
+
+                ]
+            }
+        ]
+    }
+}

public/multipixel/assets.json

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

public/multipixel/index.vwf.config.yaml

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

public/multipixel/index.vwf.yaml

@@ -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();

public/webapps.json

@@ -49,5 +49,11 @@
         "imgUrl": "./multicamera/webimg.jpg",
         "text": "Multi-camera example",
         "featured": false
+    },
+    "multipixel":{
+        "title":"Multi-Pixel",
+        "imgUrl": "./multipixel/webimg.jpg",
+        "text": "Multi-Pixel example",
+        "featured": false
     }
 }

support/client/lib/index.css

@@ -350,4 +350,21 @@ text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
     height:100%;
     text-align:center;
     z-index: 1000;
+ }
+
+ .guiwindow {
+
+  position: absolute;
+  border: 0;
+  right: 40px;
+  bottom: 20px;
+  cursor: pointer;
+  min-width: 50px;
+  min-height: 30px;
+  padding-right: 5%;
+  padding-top: 4%;
+  position: absolute;
+  transition: background-color .05s ease;
+  -webkit-transition: background-color .05s ease;
+  z-index: 9999;
  }

support/client/lib/index.html

@@ -37,7 +37,9 @@
     <script type="text/javascript" src="vwf/view/lib/cell.js"></script>
     <script type="text/javascript" src="vwf/view/lib/he.js"></script>
     <script type="text/javascript" src="vwf/view/lib/draggabilly.pkgd.js"></script>
- 
+    <script type="text/javascript" src="js/screenfull.min.js"></script>
+    
+
     <link rel="stylesheet" href="vwf/view/lib/mdc/dist/material-components-web.css">
     <script src="vwf/view/lib/mdc/dist/material-components-web.js"></script>
 
@@ -81,7 +83,7 @@
         var application;
         var regex = /([^&=]+)=?([^&]*)/g;
 
-        
+
 
         var requireConfig = {
             paths: {
@@ -93,7 +95,7 @@
                     deps: ["jquery"],
                     exports: "$"
                 },
-                "jquery-encoder-0.1.0": ["jquery"] 
+                "jquery-encoder-0.1.0": ["jquery"]
             }
         };
         require(requireConfig, ["jquery", "jquery-encoder-0.1.0"], function ($) {
@@ -166,14 +168,64 @@
 
     <div id="incompatibleBrowser">
         <div>
-            <span style="color:#3090C7;"><br/><br/>Your browser does not support Virtual World Framework. Please review our <a href='https://virtual.wf/requirements.html'>requirements</a> for supported browser versions.</span>
+            <span style="color:#3090C7;">
+                <br/>
+                <br/>Your browser does not support Virtual World Framework. Please review our
+                <a href='https://virtual.wf/requirements.html'>requirements</a> for supported browser versions.</span>
         </div>
     </div>
     <div id="vwf-root"></div>
 
+    <div id="ui-controls" class="guiwindow">
+        <i id="hideui" class="mdc-icon-toggle material-icons" role="button" aria-pressed="true" aria-label="Hide Toollbar" tabindex="0"
+        data-toggle-on='{"label": "Hide", "content": "grid_on"}' data-toggle-off='{"label": "Show", "content": "grid_off"}'>
+        grid_on
+        </i>
+
+        <i id="fullscreenui" class="mdc-icon-toggle material-icons" role="button" aria-pressed="true" aria-label="Hide Toollbar" tabindex="0"
+        data-toggle-on='{"label": "Hide", "content": "fullscreen"}' data-toggle-off='{"label": "Show", "content": "fullscreen_exit"}'>
+        fullscreen
+    </i>
+
+    </div>
+
 
     <script>
-        mdc.autoInit()
+        mdc.autoInit();
+        window.addEventListener("load", function (event) {
+
+            console.log("All resources finished loading!");
+
+        });
+
+        const iconEl = document.querySelector('#hideui');
+        iconEl.addEventListener('MDCIconToggle:change', (e) => {
+
+            let ui = document.querySelector('.mdc-toolbar');
+            if (ui) {
+
+            let chkAttr = e.detail.isOn;
+            if (chkAttr) {
+                ui.style.visibility = 'visible'
+            } else {
+                ui.style.visibility = 'hidden'
+            }
+        }
+
+        });
+
+       
+
+        const fullScreenToggle = document.querySelector('#fullscreenui');
+        fullScreenToggle.addEventListener('MDCIconToggle:change', (e) => {
+
+            if (screenfull.enabled) {
+                screenfull.toggle();
+            } else {
+                // Ignore or do something else
+            }
+        });
+
     </script>
 
 </body>

support/client/lib/js/screenfull.js

@@ -0,0 +1,168 @@
+/*!
+* screenfull
+* v3.3.2 - 2017-10-27
+* (c) Sindre Sorhus; MIT License
+*/
+(function () {
+	'use strict';
+
+	var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};
+	var isCommonjs = typeof module !== 'undefined' && module.exports;
+	var keyboardAllowed = typeof Element !== 'undefined' && 'ALLOW_KEYBOARD_INPUT' in Element;
+
+	var fn = (function () {
+		var val;
+
+		var fnMap = [
+			[
+				'requestFullscreen',
+				'exitFullscreen',
+				'fullscreenElement',
+				'fullscreenEnabled',
+				'fullscreenchange',
+				'fullscreenerror'
+			],
+			// New WebKit
+			[
+				'webkitRequestFullscreen',
+				'webkitExitFullscreen',
+				'webkitFullscreenElement',
+				'webkitFullscreenEnabled',
+				'webkitfullscreenchange',
+				'webkitfullscreenerror'
+
+			],
+			// Old WebKit (Safari 5.1)
+			[
+				'webkitRequestFullScreen',
+				'webkitCancelFullScreen',
+				'webkitCurrentFullScreenElement',
+				'webkitCancelFullScreen',
+				'webkitfullscreenchange',
+				'webkitfullscreenerror'
+
+			],
+			[
+				'mozRequestFullScreen',
+				'mozCancelFullScreen',
+				'mozFullScreenElement',
+				'mozFullScreenEnabled',
+				'mozfullscreenchange',
+				'mozfullscreenerror'
+			],
+			[
+				'msRequestFullscreen',
+				'msExitFullscreen',
+				'msFullscreenElement',
+				'msFullscreenEnabled',
+				'MSFullscreenChange',
+				'MSFullscreenError'
+			]
+		];
+
+		var i = 0;
+		var l = fnMap.length;
+		var ret = {};
+
+		for (; i < l; i++) {
+			val = fnMap[i];
+			if (val && val[1] in document) {
+				for (i = 0; i < val.length; i++) {
+					ret[fnMap[0][i]] = val[i];
+				}
+				return ret;
+			}
+		}
+
+		return false;
+	})();
+
+	var eventNameMap = {
+		change: fn.fullscreenchange,
+		error: fn.fullscreenerror
+	};
+
+	var screenfull = {
+		request: function (elem) {
+			var request = fn.requestFullscreen;
+
+			elem = elem || document.documentElement;
+
+			// Work around Safari 5.1 bug: reports support for
+			// keyboard in fullscreen even though it doesn't.
+			// Browser sniffing, since the alternative with
+			// setTimeout is even worse.
+			if (/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)) {
+				elem[request]();
+			} else {
+				elem[request](keyboardAllowed && Element.ALLOW_KEYBOARD_INPUT);
+			}
+		},
+		exit: function () {
+			document[fn.exitFullscreen]();
+		},
+		toggle: function (elem) {
+			if (this.isFullscreen) {
+				this.exit();
+			} else {
+				this.request(elem);
+			}
+		},
+		onchange: function (callback) {
+			this.on('change', callback);
+		},
+		onerror: function (callback) {
+			this.on('error', callback);
+		},
+		on: function (event, callback) {
+			var eventName = eventNameMap[event];
+			if (eventName) {
+				document.addEventListener(eventName, callback, false);
+			}
+		},
+		off: function (event, callback) {
+			var eventName = eventNameMap[event];
+			if (eventName) {
+				document.removeEventListener(eventName, callback, false);
+			}
+		},
+		raw: fn
+	};
+
+	if (!fn) {
+		if (isCommonjs) {
+			module.exports = false;
+		} else {
+			window.screenfull = false;
+		}
+
+		return;
+	}
+
+	Object.defineProperties(screenfull, {
+		isFullscreen: {
+			get: function () {
+				return Boolean(document[fn.fullscreenElement]);
+			}
+		},
+		element: {
+			enumerable: true,
+			get: function () {
+				return document[fn.fullscreenElement];
+			}
+		},
+		enabled: {
+			enumerable: true,
+			get: function () {
+				// Coerce to boolean in case of old WebKit
+				return Boolean(document[fn.fullscreenEnabled]);
+			}
+		}
+	});
+
+	if (isCommonjs) {
+		module.exports = screenfull;
+	} else {
+		window.screenfull = screenfull;
+	}
+})();

support/client/lib/js/screenfull.min.js

@@ -0,0 +1,7 @@
+/*!
+* screenfull
+* v3.3.2 - 2017-10-27
+* (c) Sindre Sorhus; MIT License
+*/
+
+!function(){"use strict";var a="undefined"!=typeof window&&void 0!==window.document?window.document:{},b="undefined"!=typeof module&&module.exports,c="undefined"!=typeof Element&&"ALLOW_KEYBOARD_INPUT"in Element,d=function(){for(var b,c=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],d=0,e=c.length,f={};d<e;d++)if((b=c[d])&&b[1]in a){for(d=0;d<b.length;d++)f[c[0][d]]=b[d];return f}return!1}(),e={change:d.fullscreenchange,error:d.fullscreenerror},f={request:function(b){var e=d.requestFullscreen;b=b||a.documentElement,/ Version\/5\.1(?:\.\d+)? Safari\//.test(navigator.userAgent)?b[e]():b[e](c&&Element.ALLOW_KEYBOARD_INPUT)},exit:function(){a[d.exitFullscreen]()},toggle:function(a){this.isFullscreen?this.exit():this.request(a)},onchange:function(a){this.on("change",a)},onerror:function(a){this.on("error",a)},on:function(b,c){var d=e[b];d&&a.addEventListener(d,c,!1)},off:function(b,c){var d=e[b];d&&a.removeEventListener(d,c,!1)},raw:d};if(!d)return void(b?module.exports=!1:window.screenfull=!1);Object.defineProperties(f,{isFullscreen:{get:function(){return Boolean(a[d.fullscreenElement])}},element:{enumerable:!0,get:function(){return a[d.fullscreenElement]}},enabled:{enumerable:!0,get:function(){return Boolean(a[d.fullscreenEnabled])}}}),b?module.exports=f:window.screenfull=f}();

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

@@ -279,6 +279,23 @@ define([
                                                 //controlEl.setAttribute('visible', !vis);
                                             }
 
+                                        },
+                                        {
+                                            $cell: true,
+                                            $type: "button",
+                                            class: "mdc-button mdc-button--raised",
+                                            $text: "Hide Avatar",
+                                            onclick: function (e) {
+                                                //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
+                                                let avatarID = 'avatar-' + self.kernel.moniker();
+                                                //let cursorID = 'myCursor-' + avatarID;
+                                                let controlEl = document.querySelector("[id='" + avatarID + "']");
+                                                let vis = controlEl.getAttribute('visible');
+                                                this.$text = vis ? 'Show Avatar' : 'Show Avatar';
+                                                vwf_view.kernel.callMethod(avatarID, "showHideAvatar", [!vis]);
+                                                //controlEl.setAttribute('visible', !vis);
+                                            }
+
                                         }
 
                                     ]

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

@@ -51,7 +51,7 @@ this.createAvatarBody = function (modelSrc) {
     var newNode = {
         "extends": "http://vwf.example.com/aframe/aentity.vwf",
         "properties": {
-            "position": [0, -userHeight, 0]
+            "position": [0, -userHeight, 0] //-userHeight
         },
         children: {
            
@@ -300,6 +300,10 @@ this.showHideCursor = function(bool){
     this.avatarNode.myHead.myCursor.properties.visible = bool;
 }
 
+this.showHideAvatar = function(bool){
+    this.properties.visible = bool;
+}
+
 this.setBigVideoHead = function(val){
     this.avatarNode.myHead.visual.height = 4;
     this.avatarNode.myHead.visual.width = 3;

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

@@ -11,6 +11,9 @@ properties:
 methods:
     initialize:
     updateAvatar:
+    showHideAvatar:
+        parameters:
+            - bool
     showHideCursor:
         parameters:
             - bool

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

@@ -0,0 +1,55 @@
+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;
+    }
+    
+
+    var newNode = {
+        "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: fullWidth,
+                            fullHeight: fullHeight,
+                            xoffset: this.xoffset,
+                            yoffset: this.yoffset,
+                            width: this.width,
+                            height: this.height
+                        }
+
+                    }
+                }
+            }
+        }
+    }
+
+    this.children.create("cameraNode", newNode);
+
+    }

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

@@ -0,0 +1,16 @@
+# avatar
+# Copyright 2017 Krestianstvo.org project
+---
+extends: http://vwf.example.com/aframe/aentity.vwf
+type: "multicamera"
+properties:
+    fullWidth:
+    fullheight:
+    xoffset:
+    yoffset:
+    width:
+    height:
+methods:
+    initialize:
+scripts:
+- source: "http://vwf.example.com/aframe/offsetcamera.js"