Skip to content
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

Example loading spinners #1902

Merged
merged 7 commits into from Jun 27, 2023
Merged

Example loading spinners #1902

merged 7 commits into from Jun 27, 2023

Conversation

nicksenger
Copy link
Contributor

@nicksenger nicksenger commented Jun 7, 2023

This PR adds an example of how to implement animated loading spinner widgets. I went with the material design style because the animation easing curves etc are described in detail, but the colors can be changed through the theme, & the speed+sizing through the example widgets' APIs.

spinners.mov

TODO:

  • I need to investigate whether requesting a redraw unconditionally like this is a viable approach, or if it would be better to determine an appropriate frame-rate and use RedrawRequest::At(), which may allow for some throttling/debouncing if necessary.

@13r0ck
Copy link
Member

13r0ck commented Jun 8, 2023

Comment on lines 10 to 12
iced = { path = "../..", features = ["canvas"] }
iced_core = { path = "../../core" }
iced_widget = { path = "../../widget" }
Copy link
Member

@hecrj hecrj Jun 8, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should be able to rely solely on iced if you enable the advanced feature, which will expose the advanced module.

See the custom_widget example:

use iced::advanced::layout::{self, Layout};
use iced::advanced::renderer;
use iced::advanced::widget::{self, Widget};
use iced::{Color, Element, Length, Point, Rectangle, Size};

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh cool, I also forgot to remove the flo_curves dependency now that it is instead using lyon for the easing curves. Updated in 56eacdb

@hecrj
Copy link
Member

hecrj commented Jun 8, 2023

I need to investigate whether requesting a redraw unconditionally like this is a viable approach, or if it would be better to determine an appropriate frame-rate and use RedrawRequest::At(), which may allow for some throttling/debouncing if necessary.

Requesting NextFrame every time will render at the maximum framerate. Currently, this is quite inefficient since we don't support incremental rendering in iced_wgpu yet.

We should be able to efficiently incrementally re-render eventually, however!

@nicksenger
Copy link
Contributor Author

Requesting NextFrame every time will render at the maximum framerate. Currently, this is quite inefficient since we don't support incremental rendering in iced_wgpu yet.

We should be able to efficiently incrementally re-render eventually, however!

I see, I've updated to use RedrawRequest::At and assume 60fps. Still probably not ideal, but at least it shouldn't go beyond that

@nicksenger nicksenger marked this pull request as ready for review June 8, 2023 15:00
@nicksenger
Copy link
Contributor Author

Iced aw has some spinners https://github.com/iced-rs/iced_aw/blob/main/src/native/spinner.rs

Nice! I didn't realize that was there. If this PR is unnecessary then or more appropriate elsewhere I can close / move it.

style: <Theme as StyleSheet>::Style,
easing: &'a Easing,
cycle_duration: Duration,
rotaion_duration: Duration,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is an error here rotaion should be rotation

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, fixed it in 9d69af1

Copy link
Member

@hecrj hecrj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really cool example! Thanks 🥳

@hecrj hecrj merged commit 2d2ed40 into iced-rs:master Jun 27, 2023
9 checks passed
@hecrj hecrj added the improvement An internal improvement label Jun 27, 2023
@hecrj hecrj added this to the 0.10.0 milestone Jun 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
improvement An internal improvement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants