Skip to content

Commit

Permalink
track isPlaying instead of isPaused and request frames by frame numbe…
Browse files Browse the repository at this point in the history 
…r instead of time, callbacks for streaming changes
  • Loading branch information
@interim17
interim17 committed Dec 16, 2024
1 parent 9779253 commit 94be934
Show file tree
Hide file tree
Showing 5 changed files with 233 additions and 117 deletions.
36 changes: 20 additions & 16 deletions examples/src/Components/CacheAndStreamingLogs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,24 @@ import React, { useState } from "react";
import { CacheLog } from "../../../src";

interface StreamingReadoutProps {
playbackState: string;
streamingState: string;
playbackPlayingState: boolean;
isStreamingState: boolean;
cacheLog: CacheLog;
playbackFrame: number;
totalDuration: number;
}

const CacheAndStreamingLogs: React.FC<StreamingReadoutProps> = ({
playbackState,
streamingState,
playbackPlayingState,
isStreamingState,
cacheLog,
playbackFrame,
totalDuration,
}) => {
const [isOpen, setIsOpen] = useState(false);

const {
size,
enabled,
maxSize,
firstFrameNumber,
lastFrameNumber,
} = cacheLog;
const { size, enabled, maxSize, firstFrameNumber, lastFrameNumber } =
cacheLog;
return (
<div>
<button onClick={() => setIsOpen(!isOpen)}>
Expand All @@ -33,15 +30,22 @@ const CacheAndStreamingLogs: React.FC<StreamingReadoutProps> = ({

{isOpen && (
<>
<div>Playback State: {playbackState}</div>
<div>Streaming State: {streamingState}</div>
<div>
Playback State:{" "}
{playbackPlayingState === true ? "playing" : "paused"}
</div>
<div>
Streaming State:{" "}
{isStreamingState == true
? "streaming"
: "not streaming"}
</div>
<div>Cache Size: {size}</div>
<div>Cache Enabled: {enabled ? "Yes" : "No"}</div>
<div>Max Size: {maxSize}</div>
<div>
First Frame Number: {firstFrameNumber}
</div>
<div>First Frame Number: {firstFrameNumber}</div>
<div>Last Frame Number: {lastFrameNumber}</div>
<div>Current playback frame: {playbackFrame}</div>
<div>Total Duration: {totalDuration}</div>
</>
)}
Expand Down
92 changes: 62 additions & 30 deletions examples/src/Viewer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,8 @@ interface ViewerState {
firstFrameTime: number;
followObjectData: AgentData;
cacheLog: CacheLog;
playbackPlaying: boolean;
streaming: boolean;
}

const simulariumController = new SimulariumController({});
Expand Down Expand Up @@ -141,6 +143,8 @@ const initialState: ViewerState = {
lastFrameNumber: 0,
lastFrameTime: 0,
},
playbackPlaying: false,
streaming: false,
};

class Viewer extends React.Component<InputParams, ViewerState> {
Expand Down Expand Up @@ -402,7 +406,7 @@ class Viewer extends React.Component<InputParams, ViewerState> {
}
this.setState({ currentFrame, currentTime });
if (currentFrame < 0) {
simulariumController.pauseStreaming();
this.handlePauseStreaming();
}
}

Expand Down Expand Up @@ -454,7 +458,8 @@ class Viewer extends React.Component<InputParams, ViewerState> {
public handleTrajectoryInfo(data: TrajectoryFileInfo): void {
console.log("Trajectory info arrived", data);
// NOTE: Currently incorrectly assumes initial time of 0
const totalDuration = (data.totalSteps - 1) * data.timeStepSize;
// const totalDuration = (data.totalSteps - 1) * data.timeStepSize;
const totalDuration = data.totalSteps;
this.setState({
totalDuration,
timeStep: data.timeStepSize,
Expand All @@ -464,14 +469,31 @@ class Viewer extends React.Component<InputParams, ViewerState> {
});
}

public handlePlay(): void {
simulariumController.resumePlayback();
if (!simulariumController.isStreaming()) {
simulariumController.resumeStreaming();
}
}

public handlePause(): void {
simulariumController.pausePlayback();
if (
simulariumController.visData.currentFrameNumber >
simulariumController.visData.frameCache.getFirstFrameNumber()
) {
simulariumController.resumeStreaming();
}
}

public handleScrubTime(event): void {
simulariumController.movePlaybackTime(parseFloat(event.target.value));
}

public handleScrubFrame(event): void {
simulariumController.movePlaybackFrame(parseInt(event.target.value));
}

public handleUIDisplayData(uiDisplayData: UIDisplayData): void {
console.log("uiDisplayData", uiDisplayData);
const allTags = uiDisplayData.reduce(
Expand Down Expand Up @@ -501,15 +523,16 @@ class Viewer extends React.Component<InputParams, ViewerState> {
}

public gotoNextFrame(): void {
simulariumController.movePlaybackTime(
this.state.currentTime + this.state.timeStep
);
simulariumController.movePlaybackFrame(this.state.currentFrame + 1);
}

public gotoPreviousFrame(): void {
simulariumController.movePlaybackTime(
this.state.currentTime - this.state.timeStep
);
simulariumController.movePlaybackFrame(this.state.currentFrame - 1);
}

public handlePauseStreaming(): void {
simulariumController.pauseStreaming();
this.setState({ streaming: simulariumController.isStreaming() });
}

private translateAgent() {
Expand Down Expand Up @@ -693,11 +716,16 @@ class Viewer extends React.Component<InputParams, ViewerState> {
};

public handleCacheUpdate = (log: CacheLog) => {
this.setState({
cacheLog: log
this.setState({
cacheLog: log,
playbackPlaying: simulariumController.isPlaying(),
streaming: simulariumController.isStreaming(),
});
}
};

public handleStreamingChange = (streaming: boolean) => {
this.setState({ streaming });
};

public render(): JSX.Element {
if (this.state.filePending) {
Expand All @@ -715,7 +743,7 @@ class Viewer extends React.Component<InputParams, ViewerState> {
<div className="container" style={{ height: "90%", width: "75%" }}>
<select
onChange={(event) => {
simulariumController.pauseStreaming();
this.handlePauseStreaming();
playbackFile = event.target.value;
this.configureAndLoad();
}}
Expand Down Expand Up @@ -782,10 +810,12 @@ class Viewer extends React.Component<InputParams, ViewerState> {
Load a smoldyn trajectory
</button>
<br />
<button onClick={() => simulariumController.resumePlayback()}>
Play
<button onClick={this.handlePlay.bind(this)}>
Play / resume streaming
</button>
<button onClick={this.handlePause.bind(this)}>
Pause playback
</button>
<button onClick={this.handlePause.bind(this)}>Pause playback</button>
<button
onClick={() => simulariumController.abortRemoteSimulation()}
>
Expand All @@ -800,14 +830,16 @@ class Viewer extends React.Component<InputParams, ViewerState> {
<input
name="slider"
type="range"
min={this.state.firstFrameTime}
step={this.state.timeStep}
value={this.state.currentTime}
min={0}
step={1}
value={this.state.currentFrame}
max={this.state.totalDuration}
onChange={this.handleScrubTime}
onChange={this.handleScrubFrame}
/>
<label htmlFor="slider">
{this.state.currentTime} / {this.state.totalDuration}
{this.state.currentFrame * this.state.timeStep +
this.state.firstFrameTime}
/ {this.state.totalDuration * this.state.timeStep}
</label>
<br />
{this.state.particleTypeNames.map((id, i) => {
Expand Down Expand Up @@ -988,17 +1020,14 @@ class Viewer extends React.Component<InputParams, ViewerState> {
)}
<AgentMetadata agentData={this.state.followObjectData} />
<CacheAndStreamingLogs
playbackState={
simulariumController.isPlaybackPaused
? "paused"
: "playing"
}
streamingState={
simulariumController.isStreaming
? "streaming"
: "not streaming"
playbackPlayingState={this.state.playbackPlaying}
isStreamingState={
this.state.streaming
}
cacheLog={this.state.cacheLog}
playbackFrame={
simulariumController.visData.currentFrameNumber
}
totalDuration={Math.ceil(
this.state.totalDuration / this.state.timeStep
)}
Expand Down Expand Up @@ -1036,8 +1065,11 @@ class Viewer extends React.Component<InputParams, ViewerState> {
backgroundColor={[0, 0, 0]}
lockedCamera={false}
disableCache={false}
maxCacheSize={Infinity} // means no limit, provide limits in bytes, 1MB = 1000000, 1GB = 1000000000
maxCacheSize={2e6} // means no limit, provide limits in bytes, 1MB = 1000000, 1GB = 1000000000
onCacheUpdate={this.handleCacheUpdate.bind(this)}
onStreamingChange={(streaming) => {
this.handleStreamingChange(streaming);
}}
/>
</div>
</div>
Expand Down
Loading

0 comments on commit 94be934

Please sign in to comment.