dataviz & research
playbackrate
videoControls(canvas)
html`<div class="element" id="el2">0</div>`
canvas = {
const ctx = DOM.context2d(160, 90);
ctx.font = '48px sans-serif';
ctx.textAlign = 'center';
const draw = t => {
ctx.fillStyle = `limegreen`;
ctx.fillRect(0, 0, 160, 90);
ctx.fillStyle = 'white';
ctx.fillText(Math.floor(t * 10), 80, 60);
};
return mediatize(ctx.canvas, {
duration: 10,
onstep: draw,
playbackRate: 1
// ontimeupdate: draw // try the difference with ontimeupdate
});
// example taken from the excellent: https://observablehq.com/@mourner/canvas-recorder
}
mutable playbackrate = 0
block = ({
start: function(event) {
console.log('start', event);
},
change: function(force, event) {
// event.preventDefault();
this.style.width = Pressure.map(force, 0, 1, 200, 300) + 'px';
this.innerHTML = force;
mutable playbackrate = force
console.log('change', force);
},
startDeepPress: function(event) {
console.log('start deep press', event);
this.style.backgroundColor = '#FF0040';
},
endDeepPress: function() {
console.log('end deep press');
this.style.backgroundColor = '#0080FF';
},
end: function() {
console.log('end');
mutable playbackrate = 0
this.style.width = '200px';
this.innerHTML = 0;
},
unsupported: function() {
console.log(this);
this.innerHTML = 'Your device / browser does not support this :(';
}
})
Pressure.set(document.querySelectorAll('#el2'), block);
Pressure = require("pressure/dist/pressure.js")
import {mediatize} from "@severo/timer-media"
import {videoControls} from "@severo/detached-video-controls"
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.
