-
+
clock: {(clock / 1000).toFixed(2).toString().split(".").join(":")}
-
+
{available_btns[timerState].map((cmd) => (
micro_s_per_minute / bpm * 4 / ts;
-const msqn2bpm = (msqn, ts) => micro_s_per_minute / msqn / ts * 4;
+const bpm2msqn = (bpm, ts) => ((micro_s_per_minute / bpm) * 4) / ts;
+const msqn2bpm = (msqn, ts) => (micro_s_per_minute / msqn / ts) * 4;
export default function useTM(initValues) {
- const [{msqn, ts1, ts2, ppqn}, setTM] = useState(
- {
- ...defaults,
- ...initValues,
- }
- );
- const ts = ts1 / ts2 * 4;
- const setTempo = (t) => setTM((state) => ({
- ...state,
- msqn: bpm2msqn(t, ts)
- }));
- const setTS1 = (ts1) => setTM((state) => ({
- ...state,
- ts1: ts1
- }));
- const setTS2 = (ts2) => setTM((state) => ({
- ...state,
- ts2: ts2
- }))
+ const [{ msqn, ts1, ts2, ppqn }, setTM] = useState({
+ ...defaults,
+ ...initValues,
+ });
+ const ts = (ts1 / ts2) * 4;
+ const setTempo = (t) =>
+ setTM((state) => ({
+ ...state,
+ msqn: bpm2msqn(t, ts),
+ }));
+ const setTS1 = (ts1) =>
+ setTM((state) => ({
+ ...state,
+ ts1: ts1,
+ }));
+ const setTS2 = (ts2) =>
+ setTM((state) => ({
+ ...state,
+ ts2: ts2,
+ }));
- return [{tempo: ~~msqn2bpm(msqn, ts), msqn, ts, ts1, ts2, ppqn}, {setTempo, setTS1, setTS2, setTM}];
-}
\ No newline at end of file
+ return [
+ { tempo: ~~msqn2bpm(msqn, ts), msqn, ts, ts1, ts2, ppqn },
+ { setTempo, setTS1, setTS2, setTM },
+ ];
+}
diff --git a/src/ui.js b/src/ui.js
index 7e229188..a9d1205f 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -12,7 +12,7 @@ import { mkcanvas } from "../chart/chart.js";
const rowheight = 40;
const pixelPerSec = 12;
-const [W, H] = [4200, 120];
+const [W, H] = [(visualViewport.width / 3) * 2, 120];
export function mkui(
eventPipe,
@@ -23,8 +23,10 @@ export function mkui(
constructor(idx, cb) {
this.config = {
nsemi: 24,
- pxpqn: 20,
+ pxpqn: 50,
qnPerBar: 4,
+ mspqn: 500000,
+ sPerqn: 0.5,
qnOffset: 0,
pxPerSemi: 5,
};
@@ -150,13 +152,21 @@ export function mkui(
this._active = false;
this._midi = null;
this.tt = 0;
+ this.toffset = 0;
+ this.timePerFrame = (W / this.config.pxpqn) * this.config.sPerqn;
}
rendFrame() {
const ppt = this.config.pxpqn * 2;
-
+ if (this.timePerFrame < this.tt - this.toffset) {
+ this.cctx.clearRect(0, 0, W, H);
+ this.toffset += this.timePerFrame;
+ }
+ this.cctx.clearRect(0, 0, 100, 20);
+ this.cctx.fillText(this.tt.toFixed(1), 0, 10, 100);
+ //this.tt + "|" + this.toffset, 0, 10, 100);
+ this.cctx.save();
for (const [t0, k0, dt] of this.timeline) {
- const x0 = (t0 * ppt) % W;
-
+ const x0 = (t0 - this.toffset) * ppt;
if (this.tt > t0 + 10) continue;
const h1 = this.config.pxPerSemi * (k0 - baseOctave);
this.cctx.fillRect(x0, h1, dt * ppt, this.config.pxPerSemi);