work on gui

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

@@ -306,7 +306,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                         value = propertyValue;
                         let parentNodeAF = aframeObject.el;
-                        let defs = ['color', 'transparent', 'opacity'];
+                        let defs = ['color', 'transparent', 'opacity', 'side'];
 
                         defs.forEach(element => {
                             element == propertyName ? parentNodeAF.setAttribute('material', element, propertyValue) :
@@ -772,7 +772,11 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             value = parentNodeAF.getAttribute('material').opacity;
                             break;
 
-                            case "transparent":
+                        case "side":
+                            value = parentNodeAF.getAttribute('material').side;
+                            break;
+
+                        case "transparent":
                             value = parentNodeAF.getAttribute('material').transparent;
                             break;
                         

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

@@ -195,81 +195,121 @@ define([
                             {
                                 $cell: true,
                                 $type: "h3",
-                                $text:"Create"
+                                class: "mdc-typography--subheading2",
+                                $text:"Primitives"
                             },
                             {
                                 $cell: true,
                                 $type: "div",
-                                class: "mdc-list-group",
+                                class: "mdc-grid-list",
                                 $components: [
-                                    {
-                                        $cell: true,
-                                        $type: "h3",
-                                        class: "mdc-list-group__subheader",
-                                        $text:"3D Primitives" 
-                                     
-                                    },
                                     {
                                         $cell: true,
                                         $type: "ul",
-                                        class: "mdc-list mdc-list--two-line",
-                                        $components: make3DPrimitiveList()  
-                                    },
-                                    self.widgets.listDivider(),
-                                    {
-                                        $cell: true,
-                                        $type: "h3",
-                                        class: "mdc-list-group__subheader",
-                                        $text:"Light" 
-                                     
-                                    },
+                                        class: "mdc-grid-list__tiles",
+                                        $components: make3DPrimitiveList()
+                                    }
+                                ]
+                            },
+                            widgets.divider,
+                            {
+                                $cell: true,
+                                $type: "h3",
+                                $text:"Lights",
+                                class: "mdc-typography--subheading2"
+                            },
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-grid-list",
+                                $components: [
                                     {
                                         $cell: true,
                                         $type: "ul",
-                                        class: "mdc-list mdc-list--two-line",
+                                        class: "mdc-grid-list__tiles",
                                         $components: makeLightsList()
-                                    },
-                                    self.widgets.listDivider(),
-                                    {
-                                        $cell: true,
-                                        $type: "h3",
-                                        class: "mdc-list-group__subheader",
-                                        $text:"Assets" 
-                                     
-                                    },
+                                    }
+                                ]
+                            },
+                            // widgets.divider,
+                            // {
+                            //     $cell: true,
+                            //     $type: "h3",
+                            //     class: "mdc-typography--subheading2",
+                            //     $text:"Objects"
+                            // },
+                            // {
+                            //     $cell: true,
+                            //     $type: "div",
+                            //     class: "mdc-grid-list",
+                            //     $components: [
+                            //         {
+                            //             $cell: true,
+                            //             $type: "ul",
+                            //             class: "mdc-grid-list__tiles",
+                            //             $components: [  
+                            //                 self.widgets.gridListItem({
+                            //                     imgSrc: "vwf/view/lib/images/ui/icons/floor.png",
+                            //                     title: 'Floor',
+                            //                     styleClass: "createListItem",
+                            //                     onclickfunc: function(){
+                            //                         //let cubeName = self.GUID();
+                            //                        // vwf_view.kernel.callMethod(vwf.application(), "createFloor")
+                            //                     }
+                            //                 })
+                                        
+                                        
+                            //             ]
+                            //         }
+                            //     ]
+                            // }, 
+                            widgets.divider,
+                            {
+                                $cell: true,
+                                $type: "h3",
+                                class: "mdc-typography--subheading2",
+                                $text:"Assets" 
+                             
+                            },
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-grid-list",
+                                $components: [
                                     {
                                         $cell: true,
                                         $type: "ul",
-                                        class: "mdc-list mdc-list--two-line",
+                                        class: "mdc-grid-list__tiles",
                                         $components: [
-                                            self.widgets.createListItem({
+                                            self.widgets.gridListItem({
                                                 imgSrc: "vwf/view/lib/images/ui/icons/3ditem.png",
-                                                title: '3D Model'
+                                                title: '3D Model',
+                                                styleClass: "createListItem"
                                             }),
-                                            self.widgets.createListItem({
+                                            self.widgets.gridListItem({
                                                 imgSrc: "vwf/view/lib/images/ui/icons/image.png",
                                                 title: 'Image',
+                                                styleClass: "createListItem",
                                                 onclickfunc: function(){
                                                     //let cubeName = self.GUID();
                                                     vwf_view.kernel.callMethod(vwf.application(), "createAssetItemImg")
                                                 }
                                             }),
-                                            self.widgets.createListItem({
+                                            self.widgets.gridListItem({
                                                 imgSrc: "vwf/view/lib/images/ui/icons/video.png",
-                                                title: 'Video'
+                                                title: 'Video',
+                                                styleClass: "createListItem"
                                             }),
-                                            self.widgets.createListItem({
+                                            self.widgets.gridListItem({
                                                 imgSrc: "vwf/view/lib/images/ui/icons/sound.png",
-                                                title: 'Sound'
+                                                title: 'Sound',
+                                                styleClass: "createListItem"
                                             })
                                         
                                         ]
                                     }
-
                                 ]
-                            }
-   
-                            
+                            } 
                         ]
                     }
 
@@ -277,10 +317,11 @@ define([
             }
 
             function make3DPrimitiveList() {
-                let nodeNames = ['Plane', 'Cube', 'Sphere', 'Cylinder', 'Cone'];
+                let nodeNames = ['Plane', 'Cube', 'Sphere', 'Cylinder', 'Cone', 'Text'];
                 return nodeNames.map(el => {
-                   return  self.widgets.createListItem({
+                   return  self.widgets.gridListItem({
                         imgSrc: "vwf/view/lib/images/ui/icons/" + el.toLowerCase()+".png",
+                        styleClass: "createListItem",
                         title: el,
                         onclickfunc: function(){
                             let avatarID = 'avatar-' + vwf.moniker_;
@@ -294,7 +335,8 @@ define([
             function makeLightsList() {
                 let nodeNames = ['Ambient', 'Directional', 'Hemisphere', 'Point', 'Spot'];
                 return nodeNames.map(el => {
-                   return self.widgets.createListItem({
+                   return self.widgets.gridListItem({
+                        styleClass: "createListItem",
                         imgSrc: "vwf/view/lib/images/ui/icons/light_"+el.toLowerCase()+".png",
                         title: el,
                         onclickfunc: function(){

support/client/lib/vwf/view/lib/editorLive.css

@@ -213,4 +213,37 @@
       .editButton{
         height: 30px;
         width: 30px;
-      }
+      }
+
+      .createListItem {
+        width: 30px;
+        cursor:pointer;
+      }
+
+   /*    .tooltip {
+       position: relative;
+        display: inline-block; 
+        border-bottom: 1px dotted black; 
+    }
+     */
+
+    .tooltip .tooltiptext {
+        visibility: hidden;
+        width: 100px;
+        background-color: rgba(134, 134, 134, 0.85);
+        color: rgb(255, 255, 255);
+        text-align: center;
+        border-radius: 6px;
+        padding: 5px 0;
+        
+        /* Position the tooltip */
+        position: absolute;
+        z-index: 1;
+        bottom: 100%;
+        left: 50%; 
+        margin-left: -50px; 
+    }
+    
+    .tooltip:hover .tooltiptext {
+        visibility: visible;
+    }

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

@@ -383,6 +383,43 @@ define(function () {
             
         }
 
+        gridListItem(obj) {
+            return {
+                $cell: true,
+                $type: "li",
+                class: "mdc-grid-tile " + obj.styleClass,
+                $components:[
+                    {
+                        $cell: true,
+                        class: "mdc-grid-tile__primary",
+                        $type: "div",
+                        style: "background-color: transparent;",
+                        $components:[
+                            {
+                                $cell: true,
+                                class: "mdc-grid-tile__primary-content tooltip",
+                                $type: "div",
+                                'aria-label': obj.title,
+                                alt: obj.title,
+                                style: "background-image: url("+ obj.imgSrc + ");",
+                                onclick: obj.onclickfunc,
+                                $components:[
+                                    {
+                                        $cell: true,
+                                        class: "tooltiptext",
+                                        $type: "span",
+                                        $text: obj.title
+                                    }
+                                ]
+                            }
+                            
+                           
+                        ]
+                    }
+                ]
+            }
+        }
+
         switch(obj) {
 
             return   {

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

@@ -5,4 +5,5 @@ type: "component"
 properties:
   opacity:
   transparent:
-  color:
+  color:
+  side:

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

@@ -62,6 +62,49 @@ this.sphereProto = function () {
             "clickable": true
         },
         children: {
+            "material": {
+                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component"
+            },
+            "interpolation":
+                {
+                    "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
+                    "type": "component",
+                    "properties": {
+                        "enabled": true
+                    }
+                },
+            "cursor-listener": {
+                "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
+                "type": "component"
+            }
+        },
+        events: {
+            "clickEvent": {
+                "body": ""
+            }
+        }
+    }
+
+    return node
+}
+
+this.textProto = function () {
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/atext.vwf",
+        "properties": {
+            "displayName": "text",
+            "color": "white",
+            "value": "Text",
+            "side": "double",
+            "clickable": true
+        },
+        children: {
+            "material": {
+                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component"
+            },
             "interpolation":
                 {
                     "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
@@ -109,6 +152,10 @@ this.cubeProto = function () {
             "cursor-listener": {
                 "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
                 "type": "component"
+            },
+            "material": {
+                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component"
             }
         },
         events: {
@@ -172,6 +219,13 @@ this.planeProto = function () {
             "clickable": true
         },
         children: {
+            "material": {
+                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component",
+                "properties": {
+                    "side": "double"
+                }
+            },
             "interpolation":
                 {
                     "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
@@ -233,6 +287,10 @@ this.createPrimitive = function (type, avatar, params, name, node) {
             newNode = this.lightProto(params);
             break;
             
+        case "text":
+            newNode = this.textProto(params);
+            break;
+
         default:
             newNode = undefined;
             break;

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

@@ -19,6 +19,7 @@ methods:
   planeProto:
   cubeProto:
   sphereProto:
+  textProto:
   lightProto:
      parameters:
       - lightType