From 8be18e8d83c5ad7e4cce52682ca38a54593f9e7b Mon Sep 17 00:00:00 2001 From: STEINNI Date: Sun, 28 Sep 2025 18:28:17 +0000 Subject: [PATCH] tween on positions --- app/assets/json/threetobus/eventsMapping.json | 95 ++++++++++--------- .../dashboard/DashboardsController.js | 6 +- app/libs/EIC/EICController.js | 6 ++ app/libs/EIC/EICDomContent.js | 6 ++ app/libs/myUser.js | 2 - .../Threetobus/threetobus.module.js | 72 +++++++------- app/views/templates/EICAppTemplate.js | 2 +- app/views/visualisers/SpaceView.js | 5 +- 8 files changed, 106 insertions(+), 88 deletions(-) diff --git a/app/assets/json/threetobus/eventsMapping.json b/app/assets/json/threetobus/eventsMapping.json index d759cf1..205f897 100644 --- a/app/assets/json/threetobus/eventsMapping.json +++ b/app/assets/json/threetobus/eventsMapping.json @@ -1,51 +1,54 @@ [ - { - "chan": "gps:agents", - "events": [ - { - "eventName": "moving", - "mappings": [ - { - "id": "aid", - "assign": { - "position.x": "coords.x", - "position.z": "coords.y" + { + "chan": "gps:agents", + "events": [ + { + "eventName": "moving", + "mappings": [ + { + "id": "aid", + "assign": { + "position.x": "coords.x", + "position.z": "coords.y", + "position.y": "coords.z" + }, + "tween": true, + "tweenDelay": 1000 + } + ] }, - "animate": true - } - ] - }, - { - "eventName": "rotating", - "mappings": [ - { - "id": "aid", - "assign": { - "r": "rotangle" - }, - "animate": true - } - ] - } - ] - }, - { - "chan": "agent:*", - "events": [ - { - "eventName": "aging", - "mappings": [ - { - "id": "aid", - "assign": { - "fill": { - "arguments": ["age"], - "transformer": "rgb(${Math.round(255 * age / 10)},0,${Math.round(255 * (1 - age / 10))})" - } + { + "eventName": "rotating", + "mappings": [ + { + "id": "aid", + "assign": { + "r": "rotangle" + }, + "tween": true, + "tweenDelay": 500 + } + ] } - } ] - } - ] - } + }, + { + "chan": "agent:*", + "events": [ + { + "eventName": "aging", + "mappings": [ + { + "id": "aid", + "assign": { + "fill": { + "arguments": ["age"], + "transformer": "rgb(${Math.round(255 * age / 10)},0,${Math.round(255 * (1 - age / 10))})" + } + } + } + ] + } + ] + } ] diff --git a/app/controllers/dashboard/DashboardsController.js b/app/controllers/dashboard/DashboardsController.js index 29ff368..65042af 100644 --- a/app/controllers/dashboard/DashboardsController.js +++ b/app/controllers/dashboard/DashboardsController.js @@ -22,11 +22,10 @@ class DashboardsController extends EICController { grid: true, }) - console.log('===CTRL molecule1==>', this.agentDefs.molecule1) const m1 = ttb.buildFromJSON('agent42', this.agentDefs.molecule1) ttb.scene.add(m1) // setTimeout(() => { - // ttb.smoothRelMove({ + // ttb.smoothMove({ // object: m1, // dX: 5, // dY:0, @@ -47,6 +46,7 @@ class DashboardsController extends EICController { // } // }) + //TODO: eventsMapping: address child by suffix in assignations this.loadWindow( 'visualisers/SpaceView', @@ -54,6 +54,7 @@ class DashboardsController extends EICController { title: '3D view', static: true, expanded: false, + withSettings: true, windowStyle:{ width: '800px', height: '600px', @@ -75,6 +76,7 @@ class DashboardsController extends EICController { title: '2D View', static: true, expanded: false, + withSettings: true, windowStyle:{ width: '600px', height: '450px', diff --git a/app/libs/EIC/EICController.js b/app/libs/EIC/EICController.js index b49e03b..9488cc9 100755 --- a/app/libs/EIC/EICController.js +++ b/app/libs/EIC/EICController.js @@ -95,6 +95,7 @@ class EICController extends Controller {

${options.title || ''}

+ ${(options.withSettings) ? '' :''} @@ -136,6 +137,11 @@ class EICController extends Controller { content.addEventListener('expanded', this.onFocusRequest.bind(this)); content.addEventListener('shrinked', this.onFocusRequest.bind(this)); + if(options.withSettings && (typeof(view.settings) == 'function')){ + let settings = content.querySelector('header button.settings'); + settings.addEventListener('click', view.settings.bind(view)); + } + content.setAttribute('sparc-id', view._sparcId); let parent = Controller._template.view.find('.app-workspace'); diff --git a/app/libs/EIC/EICDomContent.js b/app/libs/EIC/EICDomContent.js index 8b5c841..939b540 100755 --- a/app/libs/EIC/EICDomContent.js +++ b/app/libs/EIC/EICDomContent.js @@ -14,6 +14,9 @@ class EICDomContent extends View { get expanded() { return this.el.hasAttribute('expanded'); } + +//TODO: memorize size & position + /** * */ @@ -28,6 +31,9 @@ class EICDomContent extends View { this.DOMContentResized() } +//TODO: restore to previous memorize size & position + + /** * */ diff --git a/app/libs/myUser.js b/app/libs/myUser.js index a89dfb2..0910995 100755 --- a/app/libs/myUser.js +++ b/app/libs/myUser.js @@ -271,8 +271,6 @@ class myUser extends app.LoadedClasses.User { setPreference(path, value) { if(app.MessageBus) { let segments = path.split('.'); - -console.log('=====>',this, this.preferences) let pointer = this.preferences; for(let i = 0; i < segments.length - 1; i++) { diff --git a/app/thirdparty/Threetobus/threetobus.module.js b/app/thirdparty/Threetobus/threetobus.module.js index 73e87ea..c0adaf5 100644 --- a/app/thirdparty/Threetobus/threetobus.module.js +++ b/app/thirdparty/Threetobus/threetobus.module.js @@ -69,60 +69,45 @@ export class Threetobus{ processBusEvent(eventType, chan, payload, userId, x){ - console.log('processBusEvent====>',eventType, chan, payload, userId) const chanObj = this._curEventsMapping.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) - for(const mapping of eventObj.mappings){ const id = this.getValueByPath(payload, mapping.id) - console.log('agent ID:', id) - if(id){ const obj3D = this.scene.getObjectByName(id) - this.assignFromConfig(payload, mapping.assign, obj3D) + this.assignFromConfig(payload, mapping, obj3D) } - - - // console.log(`found ${mappings.length} mappings`) - // mappings.forEach(snapEl => { - // const newAttr = this.assignFromConfig(payload, mapping.assign) - // if(mapping.animate){ - // snapEl.animate( - // newAttr, - // 400, - // mina.linear - // ) - // } else { - // snapEl.attr(newAttr) - // } - // }) } } - assignFromConfig(payload, replaceDef, obj3D) { - console.log('assignFromConfig', payload, replaceDef) - for (const [path, rule] of Object.entries(replaceDef)) { + assignFromConfig(payload, mapping, obj3D) { + const toTween = {} + for (const [path, rule] of Object.entries(mapping.assign)) { let value if (typeof rule === 'string') { // plain path value= this.getValueByPath(payload, rule) - } else if((typeof(rule) == 'object') && (typeof(rule.transformer) == 'function')) { // transformer const fnargs = (rule.arguments || []).map(arg => this.getValueByPath(payload,arg)) value = rule.transformer(...fnargs) } - - console.log('====>',path ,value) if (value !== undefined) { - this.setProp(obj3D, path, value) + if(mapping.tween && path.startsWith('position.')){ //TODO allow other tweenables + toTween[path.substring(9)] = value + } else { + this.setProp(obj3D, path, value) + } } - } + } + if(mapping.tween && (Object.keys(toTween).length>0)){ + toTween.object = obj3D + toTween.delay = mapping.tweenDelay + this.smoothMove(toTween) + } } - setProp(obj3D, path, value) { console.log('====>setProp', path, value) + setProp(obj3D, path, value) { const parts = path.split('.') let target = obj3D for (let i = 0; i < parts.length - 1; i++) { @@ -194,7 +179,7 @@ export class Threetobus{ } - buildFromJSON(id, desc){ console.log('===buildFromJSON molecule1==>', desc) + buildFromJSON(id, desc){ let obj if(desc.type === 'Mesh') { const geom = new THREE[desc.geometry.type](...(desc.geometry.args || [])) @@ -222,8 +207,11 @@ export class Threetobus{ return obj } - smoothRelMove(options){ + smoothMove(options){ console.log('=====>', options) // options: object, dX, dY, dZ, delay, easing, easingMode + // Absolute: x,y,z + // Relative: dx,dy,dz + // delay: ms // easings: Linear, Quadratic, Cubic, Quartic, Quintic, Sinusoidal, Exponential, Circular, Elastic, Back, Bounce // easingMode: In → starts slow, accelerates towards the end. // Out → starts fast, decelerates smoothly. @@ -231,10 +219,22 @@ export class Threetobus{ options.easing = options.easing ? options.easing : 'Quadratic' options.easingMode = options.easingMode ? options.easingMode : 'InOut' + let newX = parseFloat(options.x) + newX = isNaN(newX) ? options.object.position.x : newX + newX += (parseFloat(options.dx) || 0) + + let newY = parseFloat(options.y) + newY = isNaN(newY) ? options.object.position.y : newY + newY += (parseFloat(options.dy) || 0) + + let newZ = parseFloat(options.z) + newZ = isNaN(newZ) ? options.object.position.z : newZ + newZ += (parseFloat(options.dz) || 0) + new TWEEN.Tween(options.object.position) - .to({ x: options.object.position.x + options.dX, - y: options.object.position.y + options.dY, - z: options.object.position.z + options.dZ, + .to({ x: newX, + y: newY, + z: newZ, }, options.delay) .easing(TWEEN.Easing[options.easing][options.easingMode]) .start() diff --git a/app/views/templates/EICAppTemplate.js b/app/views/templates/EICAppTemplate.js index 9588cd4..e0c12c5 100755 --- a/app/views/templates/EICAppTemplate.js +++ b/app/views/templates/EICAppTemplate.js @@ -92,7 +92,7 @@ class EICAppTemplate extends EICDomContent { this.userIcon = new UserIcon(this.session.querySelector('[eicuser]')); this.userIcon.showStatus = true; this.userIcon.uuid = app.User.identity.uuid; - this.userIcon.fullname = app.User.identity.firstname + ' ' + app.User.identity.lastname + this.userIcon.fullname = app.User.identity.username this.userIcon.online = app.MessageBus.connected; app.events.channel.addEventListener('MessageBus.Connected', this.onBusConnected.bind(this)) diff --git a/app/views/visualisers/SpaceView.js b/app/views/visualisers/SpaceView.js index 15e00fa..f6f0b61 100644 --- a/app/views/visualisers/SpaceView.js +++ b/app/views/visualisers/SpaceView.js @@ -27,7 +27,10 @@ class SpaceView extends EICDomContent { } - + settings(){ + console.log('Settings!') + + } }