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

When loading on web, match style and show a progress indicator while wasm is loading #2421

Merged
merged 11 commits into from
Jun 15, 2023
6 changes: 6 additions & 0 deletions crates/re_ui/src/design_tokens.rs
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,12 @@ fn apply_design_tokens(ctx: &egui::Context) -> DesignTokens {
egui_style.text_styles.get_mut(&text_style).unwrap().size = font_size;
}

egui_style
.text_styles
.get_mut(&egui::TextStyle::Heading)
.unwrap()
.size = 16.0;

// We want labels and buttons to have the same height.
// Intuitively, we would just assign font_size to
// the interact_size, but in practice text height does not match
Expand Down
36 changes: 22 additions & 14 deletions crates/re_viewer/src/ui/wait_screen_ui.rs
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@ use itertools::Itertools as _;

pub fn wait_screen_ui(ui: &mut egui::Ui, rx: &Receiver<LogMsg>) {
ui.centered_and_justified(|ui| {
fn ready_and_waiting(ui: &mut egui::Ui, txt: &str) {
fn waiting_ui(ui: &mut egui::Ui, heading_txt: &str, msg_txt: &str) {
let style = ui.style();
let mut layout_job = egui::text::LayoutJob::default();
layout_job.append(
"Ready",
heading_txt,
0.0,
egui::TextFormat::simple(
egui::TextStyle::Heading.resolve(style),
style.visuals.strong_text_color(),
),
);
layout_job.append(
&format!("\n\n{txt}"),
&format!("\n\n{msg_txt}"),
0.0,
egui::TextFormat::simple(
egui::TextStyle::Body.resolve(style),
Expand All @@ -30,28 +30,36 @@ pub fn wait_screen_ui(ui: &mut egui::Ui, rx: &Receiver<LogMsg>) {

match rx.source() {
re_smart_channel::SmartChannelSource::Files { paths } => {
ui.strong(format!(
"Loading {}…",
paths
.iter()
.format_with(", ", |path, f| f(&format_args!("{}", path.display())))
));
waiting_ui(
ui,
"Loading...",
&format!(
"{}",
paths
.iter()
.format_with(", ", |path, f| f(&format_args!("{}", path.display())))
),
);
}
re_smart_channel::SmartChannelSource::RrdHttpStream { url } => {
ui.strong(format!("Loading {url}…"));
waiting_ui(ui, "Loading...", url);
jleibs marked this conversation as resolved.
Show resolved Hide resolved
}
re_smart_channel::SmartChannelSource::RrdWebEventListener => {
ready_and_waiting(ui, "Waiting for logging data…");
waiting_ui(ui, "Ready", "Waiting for logging data…");
}
re_smart_channel::SmartChannelSource::Sdk => {
ready_and_waiting(ui, "Waiting for logging data from SDK");
waiting_ui(ui, "Ready", "Waiting for logging data from SDK");
}
re_smart_channel::SmartChannelSource::WsClient { ws_server_url } => {
// TODO(emilk): it would be even better to know whether or not we are connected, or are attempting to connect
ready_and_waiting(ui, &format!("Waiting for data from {ws_server_url}"));
waiting_ui(
ui,
"Ready",
&format!("Waiting for data from {ws_server_url}"),
);
}
re_smart_channel::SmartChannelSource::TcpServer { port } => {
ready_and_waiting(ui, &format!("Listening on port {port}"));
waiting_ui(ui, "Ready", &format!("Listening on port {port}"));
}
};
});
Expand Down
159 changes: 109 additions & 50 deletions scripts/demo_assets/static/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,9 @@ html {
}

body {
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #909090;
background: #0d1011;
}

@media (prefers-color-scheme: dark) {
body {
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
}
}

/* Allow canvas to fill entire web page: */
html,
Expand All @@ -36,15 +27,105 @@ canvas {
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
/* canvas must be on top when visible */
z-index: 1000;
}

* {
font-family: "Inter", sans-serif;
font-family: 'Inter', sans-serif;
color: #f0f0f0;
}


/* Match the Rerun header bar. */
.header {
z-index: 1000;
width: 100%;
height: 44px;
/* background: #111415; */
/* Actual value from Rerun Viewer */
background: #141414;

}

/* Create a container filling the remaining space. */
.container {
position: absolute;
height: calc(100vh - 44px);
width: 100vw;

}

/* Centered div inside the container. */
.centered {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

/* Rerun styling for normal text. */
p {
/*Gray-775*/
color: #cad8de;
letter-spacing: -0.15px;
font-weight: 500;
line-height: 14px;
}

/* Rerun styling for strong text. Matches `TextStyle::Heading`. */
.strong {
/*Gray-775*/
color: #ffffff;
/* Match current rerun header value */
font-size: 16px;
}

/* Rerun styling for subdued text.*/
.subdued {
/*Gray-550*/
color: #7d8c92;
/* Larger subdued size to match current rerun font */
font-size: 12px;
letter-spacing: -0.12px;
}

pre {
/*Gray-550*/
color: #7d8c92;
font-size: 10px;
letter-spacing: -0.12px;
}

a .button {
display: inline-block;
background: white;
color: black;
padding: .75rem 1rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
}

/* Transition to hidden */
.hidden {
opacity: 0;
transition: opacity 0.2s ease-out;
visibility: hidden;
}

/* Transition to visible */
.visible {
opacity: 100;
transition: opacity 0.2s ease-in;
visibility: visible;
}

.demo_header {
z-index: 1100;
position: absolute;
transform: translate(-50%, 0);
left: 50%;
Expand All @@ -54,9 +135,6 @@ canvas {
flex-direction: row;
gap: 4px;
}
.header:not(.visible) {
display: none;
}

.examples {
position: relative;
Expand All @@ -69,14 +147,17 @@ canvas {
border: none;
border-radius: 33%;
}
.example-description:hover > .example-description-body {

.example-description:hover>.example-description-body {
display: flex;
}
.example-description:hover > .example-description-icon {

.example-description:hover>.example-description-icon {
background: #404040;
border: none;
border-radius: 50%;
}

.example-description-icon {
display: flex;
justify-content: center;
Expand All @@ -85,6 +166,7 @@ canvas {
height: 20px;
user-select: none;
}

.example-description-body {
display: none;

Expand All @@ -101,7 +183,8 @@ canvas {

width: 280px;
}
.example-description-body > p {

.example-description-body>p {
margin: 0;
}

Expand All @@ -111,11 +194,13 @@ a.icon-link {
width: 24.5px;
height: 24px;
}

a.icon-link:hover {
background: #404040;
border: none;
border-radius: 50%;
}

img.icon {
max-height: 100%;
}
Expand All @@ -140,13 +225,16 @@ img.icon {
font-size: 14px;
line-height: 16px;
}
.dropdown-title > img {

.dropdown-title>img {
width: 16px;
height: 16px;
}

.dropdown-title:hover {
background: #404040;
}

.dropdown-title:active {
background: #404040;
}
Expand All @@ -170,6 +258,7 @@ img.icon {

width: 92px;
}

.dropdown-body.visible {
display: flex;
}
Expand All @@ -182,6 +271,7 @@ img.icon {
display: flex;
justify-content: space-between;
}

.dropdown-entry:hover {
background: #404040;
}
Expand Down Expand Up @@ -213,34 +303,3 @@ a.button {
text-decoration: none;
font-weight: 500;
}

/* ---------------------------------------------- */
/* Loading animation from https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 24px;
height: 24px;
}

.lds-dual-ring:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 0px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

Loading