diff --git a/app/assets/html/sapceViewSetting.html b/app/assets/html/sapceViewSetting.html new file mode 100644 index 0000000..647c7bb --- /dev/null +++ b/app/assets/html/sapceViewSetting.html @@ -0,0 +1,12 @@ +
+
+
  • + +
    • +
  • + +
    • +
    +
    +
    +
    \ No newline at end of file diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css index f15a56c..f155873 100755 --- a/app/assets/styles/app.css +++ b/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) } \ No newline at end of file diff --git a/app/controllers/dashboard/DashboardsController.json b/app/controllers/dashboard/DashboardsController.json index b2bbacc..dde53ac 100644 --- a/app/controllers/dashboard/DashboardsController.json +++ b/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"} diff --git a/app/libs/EIC/EICController.js b/app/libs/EIC/EICController.js index 9488cc9..0365b5d 100755 --- a/app/libs/EIC/EICController.js +++ b/app/libs/EIC/EICController.js @@ -90,12 +90,21 @@ class EICController extends Controller { visible: true, active: false }); - + + let settingsMarkup = '' + if(options.withSettings){ + settingsMarkup=` +
    + + +
    + ` + } let content = ui.create(`

    ${options.title || ''}

    - ${(options.withSettings) ? '' :''} + ${settingsMarkup} diff --git a/app/thirdparty/Snaptobus/snaptobus.js b/app/thirdparty/Snaptobus/snaptobus.js index 79d61ad..d998723 100644 --- a/app/thirdparty/Snaptobus/snaptobus.js +++ b/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){ diff --git a/app/thirdparty/Threetobus/threetobus.module.js b/app/thirdparty/Threetobus/threetobus.module.js index c0adaf5..2f18f3e 100644 --- a/app/thirdparty/Threetobus/threetobus.module.js +++ b/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 = { diff --git a/app/views/visualisers/SpaceView.js b/app/views/visualisers/SpaceView.js index f6f0b61..b19ee82 100644 --- a/app/views/visualisers/SpaceView.js +++ b/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.ttb.startRendering(this.outputs.ttbCanvas, options.mode) - - + this.renderingEngine = 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(){ - console.log('Settings!') - + settingsToggle(value, object){ + 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)