add clock app

public/core/app.js

@@ -245,6 +245,9 @@ class App {
       recall, 1000)
   }
 
+  set streamMsg(value){
+    this.config.streamMsg = value
+  }
 
   get isLuminary() {
 

public/defaults/proxy/aframe/ascene.js

@@ -464,6 +464,28 @@ this.createModelObj = function (mtlSrc, objSrc, name, avatar) {
 
 }
 
+this.createClock = function (parentName, avatar) {
+    var self = this;
+    let nodeName = 'clock-' + this.smallRandomId();
+
+    let node = {
+        "extends": "proxy/objects/clock.vwf",
+        "properties": {
+            "displayName": nodeName
+        }
+    }
+
+    let rootNode = parentName ? this.getChildByName(parentName) : this;
+    rootNode.children.create(nodeName, node, function( child ) {
+        if (avatar) child.placeInFrontOf(avatar, -2);
+        child.init();
+        child.run();
+       
+
+    })
+
+
+}
 
 this.createLegoBoost = function (boostID, parentName) {
     var self = this;

public/defaults/proxy/aframe/ascene.vwf.json

@@ -144,6 +144,12 @@
         "boostID",
         "parentName"
       ]
+    },
+    "createClock": {
+      "parameters": [
+        "id",
+        "avatar"
+      ]
     }
   },
   "scripts": {

public/defaults/proxy/objects/clock.js

@@ -0,0 +1,157 @@
+this.init = function () {
+    let self = this;
+
+    let arrows = {
+        "second": {
+            color: "red",
+            radius: 0.01,
+            height: 1,
+            offset: 0,
+            visible: true,
+            visWidth: 0.5,
+            textPos: "-0.25,0,0"
+        },
+        "minute": {
+            color: "blue",
+            radius: 0.02,
+            height: 0.8,
+            offset: 0.3,
+            visible: true,
+            visWidth: 0.3,
+            textPos: "-0.15,0,0"
+        },
+        "hour": {
+            color: "green",
+            radius: 0.03,
+            height: 0.6,
+            offset: 0.5,
+            visible: false,
+            visWidth: 0.3,
+            textPos: "-0.15,0,0"
+        }
+    }
+
+    for (const [key, value] of Object.entries(arrows)) {
+
+        let arrowNode = {
+            "extends": "proxy/aframe/aentity.vwf",
+            "properties": {
+                displayName: key
+            },
+            "children": {
+
+                "arrow": {
+                    "extends": "proxy/aframe/acylinder.vwf",
+                    "properties": {
+                        radius: value.radius,
+                        height: value.height,
+                        position: [0, value.height / 2, 0]
+                    },
+                    "children": {
+                        "material": {
+                            "extends": "proxy/aframe/aMaterialComponent.vwf",
+                            "type": "component",
+                            "properties": {
+                                "color": value.color
+                            }
+                        },
+                        "digit": {
+                            "extends": "proxy/aframe/aplane.vwf",
+                            "properties": {
+                                height: 0.3,
+                                width: value.visWidth,
+                                position: [0, value.height + value.offset, 0],
+                                visible: value.visible
+                            },
+                            children: {
+                                "material": {
+                                    "extends": "proxy/aframe/aMaterialComponent.vwf",
+                                    "type": "component",
+                                    "properties": {
+                                        "color": "white",
+                                        "side": "double"
+                                    }
+                                },
+                                "text": {
+                                    "extends": "proxy/aframe/atext.vwf",
+                                    "properties": {
+                                        "color": "black",
+                                        "value": "",
+                                        "side": "double",
+                                        position: value.textPos
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        self.children.create(key, arrowNode)
+    }
+
+    let vis = {
+        "extends": "proxy/aframe/acylinder.vwf",
+        "properties": {
+            radius: 1.2,
+            height: 0.01,
+            rotation: [90, 0, 0],
+            position: [0, 0, -0.05]
+        },
+        "children": {
+            "clock": {
+                "extends": "proxy/aframe/a-asset-image-item.vwf",
+                "properties": {
+                    "itemID": "clock",
+                    "itemSrc": "/defaults/assets/textures/clock.png"
+                }
+            },
+            "material": {
+                "extends": "proxy/aframe/aMaterialComponent.vwf",
+                "type": "component",
+                "properties": {
+                    "src": "#clock",
+                    "side": "double"
+                    //"color": "white"
+                }
+            }
+        }
+    }
+
+    self.children.create("vis", vis)
+
+}
+
+this.run = function () {
+
+
+    let seconds = this.time//Math.floor(this.time/2);
+    let minutes = Math.floor(seconds / 60);
+    let hours = Math.floor(minutes / 60);
+
+    if (this.second && this.minute && this.hour) {
+        this.second.rotation = [0, 0, -360 * (seconds / 60)];
+        this.minute.rotation = [0, 0, -360 * (minutes / 60)];
+        this.hour.rotation = [0, 0, -360 * (hours / 12)];
+
+        this.second.arrow.digit.rotation = [0, 0, 360 * (seconds / 60)];
+        this.minute.arrow.digit.rotation = [0, 0, 360 * (minutes / 60)];
+        this.hour.arrow.digit.rotation = [0, 0, 360 * (hours / 60)];
+
+
+        let sText = Number.parseFloat(seconds % 60 ).toFixed(1);
+        let minText = minutes % 60;
+        let hrText = hours % 12;
+
+
+        this.second.arrow.digit.text.value = (sText == 0) ? "" : sText
+        this.minute.arrow.digit.text.value = (minText == 0) ? "" : minText
+        this.hour.arrow.digit.text.value = (hrText == 0) ? "" : hrText
+
+    }
+
+    this.future(0.1).run()
+
+}
+

public/defaults/proxy/objects/clock.vwf.json

@@ -0,0 +1,11 @@
+{
+    "extends": "proxy/aframe/aentity.vwf",
+    "properties": {},
+    "methods": {
+        "init": {},
+        "run":{}
+    },
+    "scripts": {
+        "source": "clock.js"
+    }
+}

public/drivers/view/aframe.js

@@ -989,7 +989,12 @@ class AFrameView extends Fabric {
        
 
         else if (self.isDesktop){
-            cursorEl.setAttribute('cursor', {rayOrigin: 'mouse'});
+            cursorEl.setAttribute('cursor',
+             {
+                rayOrigin: 'mouse'
+            });
+            cursorEl.setAttribute('visible', false);
+             
         }
 
         // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});

public/drivers/view/editor.js

@@ -308,6 +308,17 @@ class LCSEditor extends Fabric {
                                         }
 
                                     }),
+                                    self.widgets.gridListItemWithIco({
+                                        imgSrc: "schedule",
+                                        title: 'Clock',
+                                        imgSize: '30px',
+                                        styleClass: "",
+                                        onclickfunc: function () {
+                                            let avatarID = 'avatar-' + vwf.moniker_;
+                                            vwf_view.kernel.callMethod(vwf.application(), "createClock", [null, avatarID])
+                                        }
+
+                                    })
 
 
                                 ]
@@ -875,6 +886,94 @@ class LCSEditor extends Fabric {
                                                     }
                                                 })
                                         ]
+                                    },
+                                    {
+                                        $type: "div",
+                                        class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                        $components: [
+                                            {
+                                                $type: "h2",
+                                                class: "",
+                                                $text: 'App settings' 
+                                            },
+                                            self.widgets.streamMsgConfig(),
+                                            {
+                                                $type: "h3",
+                                                class: "",
+                                                $text: 'Delay' 
+                                            },
+                                            {
+                                                class: "mdc-text-field prop-mdc-text-field",
+    
+                                                $type: "div",
+                                                $components: [
+                                                    self.widgets.inputTextFieldStandart({
+                                                        "id": "input-delay",
+                                                        "label": "Delay",
+                                                        "value": vwf.virtualTime.streamDelay,
+                                                        "change": function (e) {
+                                                            //set property
+    
+                                                            let value = this.value;
+                                                            vwf.virtualTime.streamDelay = value;
+
+                                                            let slider = document.querySelector('#slider-delay');
+                                                            slider._comp.setValue(value);
+
+                                                        }
+                                                    })
+    
+                                                ]
+    
+                                            },
+                                            self.widgets.sliderContinuous({
+                                                'id': 'slider-delay',
+                                                'label': 'Slider',
+                                                'min': 0,
+                                                'max': 1000,
+                                                'step': 1,
+                                                'value': vwf.virtualTime.streamDelay, //parseInt(currenValue),
+                                                'init': function () {
+                
+                                                    const myEl = document.querySelector('#slider-delay');//this;
+                                                    if (myEl) {
+                                                        myEl.children[0].setAttribute("value", vwf.virtualTime.streamDelay);
+                                                        let input = document.querySelector('#input-delay');
+                                                        input.value = vwf.virtualTime.streamDelay;
+                
+                                                        var continuousSlider = new mdc.slider.MDCSlider(myEl);
+                
+                                                        this._comp = continuousSlider;
+
+
+                                                        continuousSlider.listen('MDCSlider:input', function (e) {
+
+                                                            let myEl = e.currentTarget;
+    
+                                                            let value = continuousSlider.getValue();
+                                                            vwf.virtualTime.streamDelay = value;
+
+                                                            let input = document.querySelector('#input-delay');
+                                                            input.value = value;
+                                                        });
+                                                        continuousSlider.listen('MDCSlider:change', function (e) {
+                                                            //console.log(continuousSlider.value);
+                                                            let myEl = e.currentTarget;
+
+                                                            let value = continuousSlider.getValue();
+                                                            vwf.virtualTime.streamDelay = value;
+                
+                                                           let input = document.querySelector('#input-delay');
+                                                            input.value = value;
+
+                                                        })
+                
+                                                    }
+                
+                                                }
+                                            })
+                                            
+                                        ]
                                     }
                                 ]
                             }
@@ -1514,7 +1613,6 @@ class LCSEditor extends Fabric {
 
                                 }
                             })
-                            //sliderComponent._initMDC();
 
                         } else {
                             sliderComponent = {}

public/lib/ui/widgets.js

@@ -648,6 +648,49 @@ Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contribu
             }
         }
 
+       
+        gridListItemWithIco(obj) {
+            return {
+                $type: "div",
+                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2 tooltip " + obj.styleClass,
+                $components:[
+                    {
+                        class: "tooltiptext",
+                        $type: "span",
+                        $text: obj.title
+                    },
+                    // {
+
+                    //     $type: "button",
+                    //     class: "mdc-button",
+                    //     onclick: obj.onclickfunc,
+                    //     $components:[
+                    //         {
+                               
+                    //             $type: "i",
+                    //             class: "material-icons mdc-button__icon",
+                    //             $text: obj.imgSrc
+                    //         }
+                    //     ]
+                    // }
+                    {
+                        $type: "div",
+                        style: "background-color: transparent;",
+                        $components:[
+                            {
+                                $type: "i",
+                                class: "material-icons mdc-list-item__graphic",
+                                'aria-hidden': "true",
+                                $text: obj.imgSrc,
+                                onclick: obj.onclickfunc
+                            }
+
+                        ]
+                    }
+                ]
+            }
+        }
+
         gridListItem(obj) {
             return {
                 $type: "div",
@@ -972,48 +1015,55 @@ Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contribu
 
             }
 
-        reflectorGUI() {
+            streamMsgConfig() {
 
-            let self = this;
+            return {
 
-            let webrtcConnection = {
                 $cell: true,
+                _streamMsgConfig: null,
                 $components: [
                   {
                     $type: "p",
                     class: "mdc-typography--headline5",
-                    $text: "Use WebRTC for connection"
+                    $text: "Use Stream of Messages"
                   },
                   {
                     $type: 'p'
                   },
                   _app.widgets.switch({
-                    'id': 'forceWebRTC',
+                    'id': 'streamMsgConfig',
                     'init': function () {
                       this._switch = new mdc.switchControl.MDCSwitch(this);
                       let config = localStorage.getItem('lcs_config');
-                      this._switch.checked = JSON.parse(config).webrtc;
-                      
-                     // this._replaceSwitch = this._switch;
-                     this.addEventListener('change',
-                     function (e) {
+                      this._switch.checked = JSON.parse(config).streamMsg;
+                      this.addEventListener('change',
+                      function (e) {
     
                         if (this._switch) {
                             let chkAttr = this._switch.checked;//this.getAttribute('checked');
                             if (chkAttr) {
                                 let config = JSON.parse(localStorage.getItem('lcs_config'));
-                                config.webrtc = true;
+                                config.streamMsg = true;
                                 localStorage.setItem('lcs_config', JSON.stringify(config));
+                                //update _app
+                                if(_app){
+                                    _app.streamMsg = config.streamMsg;
+                                }
+
                                 //this._switch.checked = false;
                             } else {
                                 let config = JSON.parse(localStorage.getItem('lcs_config'));
-                                config.webrtc = false;
+                                config.streamMsg = false;
                                 localStorage.setItem('lcs_config', JSON.stringify(config));
+                                //update _app
+                                if(_app){
+                                    _app.streamMsg = config.streamMsg;
+                                }
                             }
                         }
                     }
-                     
-                     )
+                      )
+                     // this._replaceSwitch = this._switch;
                       
                     },
                     'onchange': ""
@@ -1021,51 +1071,58 @@ Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contribu
                   ),
                   {
                     $type: 'label',
-                    for: 'input-forceWebRTC',
+                    for: 'input-streamMsgConfig',
                     $text: 'On / Off'
                   }
     
                 ]
-              }
+            }  
+            
+        }
+
+
+        reflectorGUI() {
 
-            let streamMsgConfig = {
+            let self = this;
 
+            let webrtcConnection = {
                 $cell: true,
-                _streamMsgConfig: null,
                 $components: [
                   {
                     $type: "p",
                     class: "mdc-typography--headline5",
-                    $text: "Use Stream of Messages"
+                    $text: "Use WebRTC for connection"
                   },
                   {
                     $type: 'p'
                   },
                   _app.widgets.switch({
-                    'id': 'streamMsgConfig',
+                    'id': 'forceWebRTC',
                     'init': function () {
                       this._switch = new mdc.switchControl.MDCSwitch(this);
                       let config = localStorage.getItem('lcs_config');
-                      this._switch.checked = JSON.parse(config).streamMsg;
-                      this.addEventListener('change',
-                      function (e) {
+                      this._switch.checked = JSON.parse(config).webrtc;
+                      
+                     // this._replaceSwitch = this._switch;
+                     this.addEventListener('change',
+                     function (e) {
     
                         if (this._switch) {
                             let chkAttr = this._switch.checked;//this.getAttribute('checked');
                             if (chkAttr) {
                                 let config = JSON.parse(localStorage.getItem('lcs_config'));
-                                config.streamMsg = true;
+                                config.webrtc = true;
                                 localStorage.setItem('lcs_config', JSON.stringify(config));
                                 //this._switch.checked = false;
                             } else {
                                 let config = JSON.parse(localStorage.getItem('lcs_config'));
-                                config.streamMsg = false;
+                                config.webrtc = false;
                                 localStorage.setItem('lcs_config', JSON.stringify(config));
                             }
                         }
                     }
-                      )
-                     // this._replaceSwitch = this._switch;
+                     
+                     )
                       
                     },
                     'onchange': ""
@@ -1073,12 +1130,14 @@ Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contribu
                   ),
                   {
                     $type: 'label',
-                    for: 'input-streamMsgConfig',
+                    for: 'input-forceWebRTC',
                     $text: 'On / Off'
                   }
     
                 ]
-            }  
+              }
+
+            
 
             let multiSocket = {
                 $cell: true,
@@ -1437,7 +1496,7 @@ Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contribu
                                { 
                                 $type: "div",
                                 class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
-                                $components: [streamMsgConfig ]
+                                $components: [self.streamMsgConfig() ]
                                },
                             //    { 
                             //     $type: "div",