STEINNI
94 lines
2.6 KiB
Plaintext
94 lines
2.6 KiB
Plaintext
//0. Add you dependencies in your controller.json :
|
|
// { ...
|
|
// "controllerDependencies": [
|
|
// ...
|
|
// "/thirdparty/Snaptobus/snap.svg-min",
|
|
// "/thirdparty/Snaptobus/snaptobus"
|
|
// ]
|
|
// }
|
|
// 1. Create your sprites :
|
|
agentTypes = {
|
|
molecule1:{
|
|
type: 'circle',
|
|
attrs: {
|
|
r: 10,
|
|
fill: '#BFB',
|
|
stroke: "#0A0",
|
|
strokeWidth: 2,
|
|
}
|
|
},
|
|
molecule2:{
|
|
type: 'circle',
|
|
attrs: {
|
|
r: 10,
|
|
fill: '#BBF',
|
|
stroke: "#00A",
|
|
strokeWidth: 2,
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 2. instantiate Snaptobus with the SVG playground selector, the sprites definitions,
|
|
// and the configuration mapping bus chans, bus event, and events playloads to SNap attributes
|
|
// You can assign a path in the event payload, or a transformer function like :
|
|
// fill: {
|
|
// arguments: [ 'age' ], // What to give from the event as function's params
|
|
// transformer: i => `rgb(${Math.round(255 * i / 10)},0,${Math.round(255 * (1 - i / 10))})`
|
|
// },
|
|
//
|
|
|
|
this.snaptobus = new Snaptobus({
|
|
snap: Snap("svg.stb"),
|
|
spriteDefs: this.agentTypes,
|
|
busConfig: [
|
|
{
|
|
chan: 'gps:agents', // What to subscribe to
|
|
events: [ // What to select on this chan
|
|
{ eventName: 'moving', // which event will trigger a change
|
|
snaps: [
|
|
{
|
|
selector: '#${aid}', // what svg elements do we change ?
|
|
assign: { // what do we change and with what from the payload ?
|
|
cx: 'attrs.x',
|
|
cy: 'attrs.y',
|
|
},
|
|
animate: true
|
|
}
|
|
]
|
|
},
|
|
]
|
|
},
|
|
]
|
|
})
|
|
|
|
|
|
//3. Create your sprites
|
|
this.createAgent('molecule2', 'agent42', 100,100)
|
|
createAgent(agentType, id, x, y){
|
|
if(!Object.keys(this.agentTypes).includes(agentType)) return
|
|
this.agentTypes[agentType]
|
|
const svgAgent = this.snaptobus.snap[this.agentTypes[agentType].type]().attr(this.agentTypes[agentType].attrs)
|
|
svgAgent.attr({
|
|
id: id,
|
|
cx: x,
|
|
cy:y,
|
|
})
|
|
}
|
|
|
|
//4. Send a bus event like : (this is a bmsg)
|
|
// {
|
|
// "channel":"gps:agents",
|
|
// "packet":{
|
|
// "eventType": "moving",
|
|
// "payload": {
|
|
// "aid": "agent42",
|
|
// "attrs": {
|
|
// "x": "950",
|
|
// "y": "650"
|
|
// }
|
|
// },
|
|
// "sender": "toto"
|
|
// }
|
|
// }
|