research/statebuddy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

logo

Browse source
This commit is contained in:
Joeri Exelmans 2025-10-19 16:36:07 +02:00
parent 5bd886b930
commit 4a264b1dd4
6 changed files with 4605 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -1,5 +1,5 @@
![logo](./logo.png) ![logo](.artwork/logo.svg)
# StateBuddy # StateBuddy
dependencies, bla, bla dependencies, bla, bla

BIN
artwork/logo.pdf Normal file
View file

Binary file not shown.

4593
artwork/logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 391 KiB

BIN
artwork/logo.xopp Normal file
View file

Binary file not shown.

BIN
logo.png → artwork/old_logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 64 KiB

Before After
Before After

19
src/App/TopPanel.tsx
View file

@ -75,7 +75,7 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
if (e.key === " ") { if (e.key === " ") {
e.preventDefault(); e.preventDefault();
if (rt) if (rt)
onChangePaused(time.kind !== "paused", performance.now()); onChangePaused(time.kind !== "paused", Math.round(performance.now()));
}; };
if (e.key === "i") { if (e.key === "i") {
e.preventDefault(); e.preventDefault();
@ -122,15 +122,16 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
}, []) }, [])
function updateDisplayedTime() { function updateDisplayedTime() {
const now = performance.now(); const now = Math.round(performance.now());
const timeMs = getSimTime(time, now); const timeMs = getSimTime(time, now);
setDisplayTime(formatTime(timeMs)); setDisplayTime(formatTime(timeMs));
} }
useEffect(() => { useEffect(() => {
// This has no effect on statechart execution. In between events, the statechart is doing nothing. However, by updating the displayed time, we give the illusion of continuous progress.
const interval = setInterval(() => { const interval = setInterval(() => {
updateDisplayedTime(); updateDisplayedTime();
}, 20); }, 43); // every X ms -> we want a value that makes the numbers 'dance' while not using too much CPU
return () => { return () => {
clearInterval(interval); clearInterval(interval);
} }
@ -171,7 +172,7 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
const nextTimedTransition: [number, TimerElapseEvent] | undefined = timers[0]; const nextTimedTransition: [number, TimerElapseEvent] | undefined = timers[0];
function onSkip() { function onSkip() {
const now = performance.now(); const now = Math.round(performance.now());
if (nextTimedTransition) { if (nextTimedTransition) {
setTime(time => { setTime(time => {
if (time.kind === "paused") { if (time.kind === "paused") {
@ -185,10 +186,10 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
} }
function onSlower() { function onSlower() {
onTimeScaleChange((timescale/2).toString(), performance.now()); onTimeScaleChange((timescale/2).toString(), Math.round(performance.now()));
} }
function onFaster() { function onFaster() {
onTimeScaleChange((timescale*2).toString(), performance.now()); onTimeScaleChange((timescale*2).toString(), Math.round(performance.now()));
} }
return <> return <>
@ -240,8 +241,8 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
&emsp; &emsp;
<KeyInfo keyInfo={<><kbd>Space</kbd> toggles</>}> <KeyInfo keyInfo={<><kbd>Space</kbd> toggles</>}>
<button title="pause the simulation" disabled={!rt || time.kind==="paused"} className={(rt && time.kind==="paused") ? "active":""} onClick={() => onChangePaused(true, performance.now())}><PauseIcon fontSize="small"/></button> <button title="pause the simulation" disabled={!rt || time.kind==="paused"} className={(rt && time.kind==="paused") ? "active":""} onClick={() => onChangePaused(true, Math.round(performance.now()))}><PauseIcon fontSize="small"/></button>
<button title="run the simulation in real time" disabled={!rt || time.kind==="realtime"} className={(rt && time.kind==="realtime") ? "active":""} onClick={() => onChangePaused(false, performance.now())}><PlayArrowIcon fontSize="small"/></button> <button title="run the simulation in real time" disabled={!rt || time.kind==="realtime"} className={(rt && time.kind==="realtime") ? "active":""} onClick={() => onChangePaused(false, Math.round(performance.now()))}><PlayArrowIcon fontSize="small"/></button>
</KeyInfo> </KeyInfo>
&emsp; &emsp;
@ -250,7 +251,7 @@ export function TopPanel({rt, rtIdx, time, setTime, onInit, onClear, onRaise, on
<KeyInfo keyInfo={<kbd>S</kbd>}> <KeyInfo keyInfo={<kbd>S</kbd>}>
<button title="slower" onClick={onSlower}>÷2</button> <button title="slower" onClick={onSlower}>÷2</button>
</KeyInfo> </KeyInfo>
<input title="controls how fast the simulation should run in real time mode - larger than 1 means: faster than wall-clock time" id="number-timescale" value={timescale.toFixed(3)} style={{width:40}} readOnly onChange={e => onTimeScaleChange(e.target.value, performance.now())}/> <input title="controls how fast the simulation should run in real time mode - larger than 1 means: faster than wall-clock time" id="number-timescale" value={timescale.toFixed(3)} style={{width:40}} readOnly onChange={e => onTimeScaleChange(e.target.value, Math.round(performance.now()))}/>
<KeyInfo keyInfo={<kbd>F</kbd>}> <KeyInfo keyInfo={<kbd>F</kbd>}>
<button title="faster" onClick={onFaster}>×2</button> <button title="faster" onClick={onFaster}>×2</button>
</KeyInfo> </KeyInfo>