Published
Edited
Jul 30, 2020
core = require('https://cdn.jsdelivr.net/npm/@openhps/core@0.1.0-alpha.53')
callbackSink = new core.CallbackSinkNode();
class MyPullBasedSource extends core.SourceNode {
/**
* Triggered when a pull request is received
**/
onPull() {
// The source node is responsible for creating frames
const frame = new core.DataFrame(new core.DataObject("HelloWorld"));
// Push the frame to this node, since we have not implimented
// a push handler, it will be forwarded to the next node
this.push(frame);
}
}
model1 = await core.ModelBuilder.create()
.from(new MyPullBasedSource())
.to(callbackSink)
.build()
new Promise((resolve, reject) => {
callbackSink.callback = frame => {
resolve(frame.source);
};
// Pull a frame
Promise.resolve(model1.pull());
})
class MyPushBasedSource extends core.SourceNode {
constructor() {
super();
// Start our timer when we build our model
this.on('build', this._timer.bind(this));
// TODO: Make sure to stop the timer when the model is destroyed
}
_timer() {
var i = 0;
// Trigger every 500ms
setInterval(() => {
this.push(new core.DataFrame(new core.DataObject(`Frame-${i}`)));
i++;
}, 500);
}
}
model2 = await core.ModelBuilder.create()
.from(new MyPushBasedSource())
.to(
new core.CallbackSinkNode(frame => {
document.getElementById("output").innerHTML = frame.source.uid;
})
)
.build()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
