window settings for axes & grid

app/assets/html/sapceViewSetting.html

@@ -0,0 +1,12 @@
+<div class="cols-2">
+    <div>
+        <li menuitem="" aria-enabled="true" success="" class="menu-link">
+            <input eicinput type="toggler" name="grid" primary="" xsmall="" value="no" aria-enabled="true" labelleft="Grid" classOff="greyed"/>
+        </li>
+        <li menuitem="" aria-enabled="true" success="" class="menu-link">
+            <input eicinput type="toggler" name="axes" primary="" xsmall="" value="no" aria-enabled="true" labelleft="Axes" classOff="greyed"/>
+        </li>                    
+    </div>
+    <div>
+    </div>
+</div>

app/assets/styles/app.css

@@ -307,4 +307,7 @@ article[eiccard][media] > header {
 div.window > section:first-of-type > article[eiccard]:first-of-type{
     border: 2px solid var(--app-color-primary);
     border-radius: .5rem;
+}
+div.window header .controls menu[data-output="settingsMenu"]{
+    background: var(--app-color-secondary)
 }

app/controllers/dashboard/DashboardsController.json

@@ -24,6 +24,9 @@
     "assets": {
         "styles": [ 
         ],
+        "html": [
+            { "id":"sapceViewSetting", "name": "sapceViewSetting.html"}
+        ],
         "json": [
             {"id":"agentDefs", "name": "agents/basic3D.json"},
             {"id":"eventsMapping", "name": "threetobus/eventsMapping.json"}            

app/libs/EIC/EICController.js

@@ -90,12 +90,21 @@ class EICController extends Controller {
             visible: true,
             active: false
         });
-        
+
+        let settingsMarkup = ''
+        if(options.withSettings){
+            settingsMarkup=`
+                <div eicdropdown>
+                    <button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cog settings" title="settings"></button>
+                    <menu eicmenu data-output="settingsMenu"></menu>
+                </div>
+            `
+        }
         let content = ui.create(`<div class="window">
             <header class="cols-2 right">
                 <h1>${options.title || ''}</h1>
                 <div class="controls">
-                    ${(options.withSettings) ? '<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cog settings" title="settings"></button>' :''}
+                    ${settingsMarkup}
                     <button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-copy shrink" title="shrink"></button>
                     <button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-square-o expand" title="expand"></button>
                     <button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cancel close" title="close"></button>

app/thirdparty/Snaptobus/snaptobus.js

@@ -99,13 +99,10 @@ class Snaptobus{
 
 
     processBusEvent(eventType, chan, payload, userId, x){
-        console.log('processBusEvent====>',eventType, chan, payload, userId)
         const chanObj = this._curBusConfig.find(item => item.chan==chan)
         if(!chanObj) return
-        console.log('processBusEvent====>chanObj', chanObj)
         const eventObj = chanObj.events.find(item => item.eventName==eventType)
         if(!eventObj) return
-        console.log('processBusEvent====>eventObj', eventObj)
         // assign attributes in payload to all snap objects for that eventType
         // each snap is an assignation of attributes via a selector
         for(const snapDef of eventObj.snaps){

app/thirdparty/Threetobus/threetobus.module.js

@@ -134,16 +134,20 @@ export class Threetobus{
 
         if(options.grid){
             this.grid = new THREE.GridHelper(20, 20, 0x8888AA, 0x8888AA)
+            this.grid.layers.set(1)
             this.scene.add(this.grid)        
         }
         if(options.axes){
             this.axes = new THREE.AxesHelper(5, 5)
+            this.axes.layers.set(2)
             this.scene.add(this.axes)        
         }
 
         // Cameras
         this.cameras.camPerspective = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
         this.cameras.camPerspective.position.set(3, 3, 5)
+        this.cameras.camPerspective.layers.enable(1)
+        this.cameras.camPerspective.layers.enable(2)
         const aspect = window.innerWidth / window.innerHeight
         const frustumSize = 10 
         this.cameras.cam2Dtop = new THREE.OrthographicCamera(
@@ -156,6 +160,7 @@ export class Threetobus{
         ) 
         this.cameras.cam2Dtop.position.set(0, 100, 0)
         this.cameras.cam2Dtop.lookAt(0, 0, 0)
+        this.cameras.cam2Dtop.layers.enable(1)
 
         // Lights
         const light = new THREE.DirectionalLight(0xffffff, 1)
@@ -169,13 +174,14 @@ export class Threetobus{
     startRendering(canvasEl, mode){
         let renderEngine
         if(mode=='2D'){
-            renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.cam2Dtop)
+            renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.cam2Dtop, mode)
          } else if(mode=='3D') {
-            renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.camPerspective)
+            renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.camPerspective, mode)
         } else console.error('Unknown rendering mode !')
-        renderEngine.addControls(mode)       
+        renderEngine.addControls()       
         renderEngine.render()
         this.renderers.push(renderEngine)
+        return(renderEngine)
     }
 
 
@@ -207,7 +213,7 @@ export class Threetobus{
         return obj
     }
 
-    smoothMove(options){ console.log('=====>', options)
+    smoothMove(options){ 
         // options:  object, dX, dY, dZ, delay, easing, easingMode
         //      Absolute: x,y,z
         //      Relative: dx,dy,dz
@@ -242,19 +248,20 @@ export class Threetobus{
 }
 
 class RenderingEngine{
-    constructor(canvasEl, scene, camera){
+    constructor(canvasEl, scene, camera, mode){
         this.canvasEl = canvasEl
         this.scene = scene
         this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
         this.camera = camera
+        this.mode = mode
     }
 
-    addControls(mode){
+    addControls(){
         this.controls = new OrbitControls(this.camera, this.canvasEl)
-        if(mode=='2D'){
+        if(this.mode=='2D'){
             this.controls.maxPolarAngle = 0 // Math.PI / 2
             this.controls.minPolarAngle = 0 // Math.PI / 2
-        } else if(mode=='3D'){
+        } else if(this.mode=='3D'){
         }
         
         this.controls.mouseButtons = {

app/views/visualisers/SpaceView.js

@@ -21,17 +21,28 @@ class SpaceView extends EICDomContent {
         const components = ui.eicfy(this.el)       
         this.setupTriggers(components)        
         this.setupRefs(components)
-
+        this.renderingEngine = this.ttb.startRendering(this.outputs.ttbCanvas, options.mode)
-        this.ttb.startRendering(this.outputs.ttbCanvas, options.mode)
+        this.output('settingsMenu',app.Assets.Store.html.sapceViewSetting)
-
+        this.outputs.settingsMenu.querySelectorAll('input[type="toggler"]').forEach(el => {  
-
+                const tog = new InputToggler(el)
+                if(this.ttb[tog._el.name].layers){
+                    tog.value = this.renderingEngine.camera.layers.test(this.ttb[tog._el.name].layers) ? 'yes' : 'no'
+                }
+                tog.onToggle = this.settingsToggle.bind(this)
+        })
     }
 
-    settings(){
+    settingsToggle(value, object){
-        console.log('Settings!')
+        if(['grid','axes'].includes(object._el.name)){
-        
+            const layerId = {'grid':1,'axes':2}[object._el.name]
+            if(value=='yes'){
+                this.renderingEngine.camera.layers.enable(layerId)
+            } else {
+                this.renderingEngine.camera.layers.disable(layerId)
+            }
+        }
     }
-
+    
 }
 
 app.registerClass('SpaceView', SpaceView)