tween on positions
This commit is contained in:
@@ -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))})"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -95,6 +95,7 @@ class EICController extends Controller {
|
||||
<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>' :''}
|
||||
<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>
|
||||
@@ -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');
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -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++) {
|
||||
|
||||
+35
-35
@@ -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()
|
||||
|
||||
@@ -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))
|
||||
|
||||
@@ -27,7 +27,10 @@ class SpaceView extends EICDomContent {
|
||||
|
||||
}
|
||||
|
||||
settings(){
|
||||
console.log('Settings!')
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user