-
Notifications
You must be signed in to change notification settings - Fork 46
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(js): Added UI to update animation speed parameter (delta) #706
Conversation
Can one of the admins verify this patch? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As a side note on the {delta}
state that was added to the animation context, it would actually require a bit more work as right now, if you refresh your browser or some other client connects and plays the animation, you loose the current value or it reflects a wrong value.
For that purpose, we would actually use the delta that is on {animationParams}
(as the server keeps its value and it will be synced between clients). But the problem with that is that we also use it to play/stop.
Though, there is nothing you can do at the moment, I hope that you understand the issue.
import Menu from '@material-ui/core/Menu'; | ||
import MenuItem from '@material-ui/core/MenuItem'; | ||
|
||
export default class AnimSpeedController extends React.Component<IAnimSpeedControllerProps, IAnimSpeedControllerState> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
export default class AnimSpeedController extends React.Component<IAnimSpeedControllerProps, IAnimSpeedControllerState> { | |
export default class AnimationSpeedController extends Component<Props, State> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also rename the file to animation-speed-controller.tsx
.
js/apps/viewer/src/app/animation-player/anim-speed-controller.tsx
Outdated
Show resolved
Hide resolved
js/apps/viewer/src/app/animation-player/anim-speed-controller.tsx
Outdated
Show resolved
Hide resolved
js/apps/viewer/src/app/animation-player/anim-speed-controller.tsx
Outdated
Show resolved
Hide resolved
js/apps/viewer/src/app/animation-player/anim-speed-controller.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A few more changes left and it should be ok.
Also, align the speed controller button all the way to the right (near the right edge of the window). Use a combination of classes and styles for this (same as for the other buttons).
|
||
const animationSpeedId = 'animation-speed-controller'; | ||
|
||
function speedLabel(value: number) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move speedLabel
fn right after the class.
} | ||
|
||
export default class AnimationSpeedController extends Component<Props, State> { | ||
state : State = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
state : State = { | |
state: State = { |
anchorEl: null | ||
} | ||
|
||
openMenu = (evt : MouseEvent<HTMLElement>) => this.setState({ anchorEl: evt.currentTarget }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Run yarn test
at the root of the js
folder to catch these code format issues.
openMenu = (evt : MouseEvent<HTMLElement>) => this.setState({ anchorEl: evt.currentTarget }); | |
openMenu = (evt: MouseEvent<HTMLElement>) => this.setState({anchorEl: evt.currentTarget}); |
|
||
openMenu = (evt : MouseEvent<HTMLElement>) => this.setState({ anchorEl: evt.currentTarget }); | ||
|
||
closeMenu = () => this.setState({ anchorEl: null }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
closeMenu = () => this.setState({ anchorEl: null }); | |
closeMenu = () => this.setState({anchorEl: null}); |
|
||
closeMenu = () => this.setState({ anchorEl: null }); | ||
|
||
changeAnimationSpeed = (evt : MouseEvent<HTMLSelectElement>) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
changeAnimationSpeed = (evt : MouseEvent<HTMLSelectElement>) => { | |
changeAnimationSpeed = (evt: MouseEvent<HTMLSelectElement>) => { |
{speedLabel(delta ? delta : 1)} | ||
</Button> | ||
<Menu | ||
id='simulation-speed-controller' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
id='simulation-speed-controller' | |
id={animationSpeedId} |
interface Props { | ||
delta?: number; | ||
disabled?: boolean; | ||
onDeltaChange(delta : number): void; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onDeltaChange(delta : number): void; | |
onDeltaChange(delta: number): void; |
@@ -86,6 +89,9 @@ export class Controls extends PureComponent<Props> { | |||
</IconButton> | |||
</div> | |||
</Tooltip> | |||
<Tooltip title={"Animation speed"} placement="right" {...TOOLTIP_DELAY}> | |||
<AnimationSpeedController delta={delta} disabled={disabled} onDeltaChange={onDeltaChange} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For readability:
<AnimationSpeedController delta={delta} disabled={disabled} onDeltaChange={onDeltaChange} /> | |
<AnimationSpeedController | |
delta={delta} | |
onDeltaChange={onDeltaChange} | |
disabled={disabled} | |
/> |
disablePrev?: boolean; | ||
disableNext?: boolean; | ||
disabled?: boolean; | ||
onPrev(): void; | ||
onPlayToggle(): void; | ||
onNext(): void; | ||
onDeltaChange(delta : number): void; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onDeltaChange(delta : number): void; | |
onDeltaChange(delta: number): void; |
}); | ||
} | ||
|
||
onDeltaChange = async (delta : number) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onDeltaChange = async (delta : number) => { | |
onDeltaChange = async (delta: number) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a few more format changes left to do and it should be good to go.
@@ -25,6 +25,7 @@ import {onKeyboardLockChange, onPageVisibilityChange} from '../../common/events' | |||
import Controls from './controls'; | |||
import ProgressBar from './progress-bar'; | |||
import {frameToTimeStr} from './utils'; | |||
import AnimationSpeedController from './animation-speed-controller'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move this above the Controls
import (run yarn test
at the root of the js
dir to catch these format issues, I must have mentioned it before).
@@ -208,6 +211,12 @@ export class AnimationPlayer extends PureComponent<Props> { | |||
<Typography variant="caption"> | |||
{currentMs} / {totalMs} {animationParams.unit} | |||
</Typography> | |||
<span className={classes.spacer}></span> | |||
<AnimationSpeedController | |||
delta={delta} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use 4 spaces for indentation for all these comp. props 😉
delta={delta} | |
delta={delta} |
@@ -15,7 +15,6 @@ import SkipPreviousIcon from '@material-ui/icons/SkipPrevious'; | |||
|
|||
import {TOOLTIP_DELAY} from '../../common/constants'; | |||
|
|||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Undo changes to this file, you have 3 blank lines that were removed.
Adds a button on the animation player controls that pops up a a menu and allows to select the animation rendering speed (delta parameter)
PS: Second pull request, rebuilt using the latest master from BlueBrayns/Brayns.