RomanNum3ral
/
wayvr
mirror of https://github.com/wayvr-org/wayvr.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dash-frontend: Welcome screen: Add 2 pages with videos (double press and laser colors)

This commit is contained in:
Aleksander 2026-06-27 22:55:48 +02:00
parent 92b9cb8d30
commit 1f061a6289
10 changed files with 71 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dash-frontend/assets/dashboard/click.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="currentColor" d="M11.7 18q-2.4-.125-4.05-1.85T6 12q0-2.5 1.75-4.25T12 6q2.425 0 4.15 1.65T18 11.7l-2.1-.625q-.325-1.35-1.4-2.212T12 8q-1.65 0-2.825 1.175T8 12q0 1.425.863 2.5t2.212 1.4zm8.825 4.5l-4.275-4.275L15 22l-3-10l10 3l-3.775 1.25l4.275 4.275z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 470 B

2
dash-frontend/assets/gui/tab/welcome.xml
View File

@ -6,7 +6,7 @@
<elements>
<div flex_direction="column" flex_grow="1" gap="16" align_items="center" overflow_y="hidden">
<!-- Content -->
<div id="content" flex_direction="column" flex_grow="1" align_items="center" justify_content="center" gap="16" overflow_y="scroll">
<div id="content" flex_direction="column" flex_grow="1" align_items="center" justify_content="center" gap="16" overflow_y="scroll" width="100%">
<!-- filled-in at runtime -->
</div>
<!-- Page buttons -->

18
dash-frontend/assets/gui/tab/welcome_common.xml Normal file
View File

@ -0,0 +1,18 @@
<layout>
<!-- icon, title -->
<template name="PageTitle">
<div position="absolute" align_self="start" justify_self="center" width="100%" margin_top="8" gap="8" align_items="center" justify_content="center">
<sprite width="48" height="48" src_builtin="${icon}" color="#FFFFFF"/>
<label size="28" weight="bold" text="${title}" shadow="#000000" shadow_x="3" shadow_y="3" />
</div>
</template>
<!-- text -->
<template name="TextDesc">
<label wrap="1" text="${text}" size="20" width="500" shadow="#000000" weight="bold"/>
</template>
<macro name="video_overlay_component" looping="1" width="100%" height="auto" max_height="100%" aspect_ratio="1.777777" position="relative"/>
<macro name="video_overlay_content" new_pass="1" position="absolute" width="100%" height="100%"/>
</layout>

11
dash-frontend/assets/gui/tab/welcome_page_1.xml
View File

@ -1,5 +1,14 @@
<layout>
<include src_builtin="welcome_common.xml"/>
<elements>
<label text="Page 1"/>
<Video macro="video_overlay_component" src_builtin="video/onboarding_double_press.ivf">
<div macro="video_overlay_content">
<PageTitle icon="dashboard/panorama.svg" title="Working Set"/>
<div position="relative" align_self="end" padding="16">
<TextDesc text="Double-press B (on Index) or Y (on Meta) to toggle the visibility of your workspace. Try it now."/>
</div>
</div>
</Video>
</elements>
</layout>

16
dash-frontend/assets/gui/tab/welcome_page_2.xml
View File

@ -1,5 +1,19 @@
<layout>
<include src_builtin="welcome_common.xml"/>
<elements>
<label text="Page 2" weight="bold" size="20"/>
<Video macro="video_overlay_component" src_builtin="video/onboarding_laser_colors.ivf">
<div macro="video_overlay_content">
<PageTitle icon="dashboard/click.svg" title="Laser Colors"/>
<div position="relative" flex_direction="row" gap="16" margin="16" align_self="end" justify_self="end" align_items="center">
<rectangle flex_direction="column" gap="8" padding="8" round="4" border_color="~color_accent" border="2" >
<label size="16" weight="bold" color="#00FFFF" text="— Regular Mode: Blue laser"/>
<label size="16" weight="bold" color="#FFAA00" text="— Right-click Mode: Orange laser" />
<label size="16" weight="bold" color="#FF88FF" text="— Middle-click Mode: Purple laser" />
</rectangle>
<label wrap="1" size="18" width="450" weight="bold" shadow="#000000" text="Much of the functionality in WayVR depends on what color of laser is used to interact with a UI element. You don't need to press these buttons, just touch them!"/>
</div>
</div>
</Video>
</elements>
</layout>

BIN
dash-frontend/assets/video/onboarding_double_press.ivf Normal file
View File

Binary file not shown.

BIN
dash-frontend/assets/video/onboarding_laser_colors.ivf Normal file
View File

Binary file not shown.

7
dash-frontend/src/tab/welcome.rs
View File

@ -30,6 +30,8 @@ pub struct TabWelcome<T> {
current_page: u8,
id_pips: WidgetID,
id_content: WidgetID,
state_tab: Option<ParserState>,
}
const PAGE_COUNT: u8 = 5; // 0-4 inclusive
@ -94,6 +96,7 @@ impl<T> TabWelcome<T> {
id_pips,
id_content,
tasks,
state_tab: None,
})
}
@ -120,7 +123,7 @@ impl<T> TabWelcome<T> {
let globals = layout.state.globals.clone();
let _ = wgui::parser::parse_from_assets(
self.state_tab = Some(wgui::parser::parse_from_assets(
&ParseDocumentParams {
globals,
path: AssetPath::BuiltIn(&format!("gui/tab/welcome_page_{}.xml", self.current_page)),
@ -128,7 +131,7 @@ impl<T> TabWelcome<T> {
},
layout,
self.id_content,
)?;
)?);
Ok(())
}

4
wgui/src/parser/mod.rs
View File

@ -586,6 +586,10 @@ impl ParserContext<'_> {
Some(val / 100.0)
}
pub fn parse_auto(value: &str) -> bool {
value.contains("auto")
}
fn parse_size_unit<T>(&self, tag_name: &str, key: &str, value: &str) -> Option<T>
where
T: taffy::prelude::FromPercent + taffy::prelude::FromLength,

17
wgui/src/parser/style.rs
View File

@ -233,34 +233,51 @@ pub fn parse_style(ctx: &ParserContext<'_>, attribs: &[AttribPair], tag_name: &s
ctx.print_invalid_attrib(tag_name, key, value);
}
},
"aspect_ratio" => {
if let Some(aspect) = ctx.parse_val(tag_name, key, value) {
style.aspect_ratio = Some(aspect);
}
}
"min_width" => {
if let Some(dim) = ctx.parse_size_unit(tag_name, key, value) {
style.min_size.width = dim;
} else if ParserContext::parse_auto(value) {
style.min_size.width = taffy::prelude::auto();
}
}
"min_height" => {
if let Some(dim) = ctx.parse_size_unit(tag_name, key, value) {
style.min_size.height = dim;
} else if ParserContext::parse_auto(value) {
style.min_size.height = taffy::prelude::auto();
}
}
"max_width" => {
if let Some(dim) = ctx.parse_size_unit(tag_name, key, value) {
style.max_size.width = dim;
} else if ParserContext::parse_auto(value) {
style.max_size.width = taffy::prelude::auto();
}
}
"max_height" => {
if let Some(dim) = ctx.parse_size_unit(tag_name, key, value) {
style.max_size.height = dim;
} else if ParserContext::parse_auto(value) {
style.max_size.height = taffy::prelude::auto();
}
}
"width" => {
if let Some(dim) = ctx.parse_size_unit(tag_name, key, value) {
style.size.width = dim;
} else if ParserContext::parse_auto(value) {
style.size.width = taffy::prelude::auto();
}
}
"height" => {
if let Some(dim) = ctx.parse_size_unit(tag_name, key, value) {
style.size.height = dim;
} else if ParserContext::parse_auto(value) {
style.size.height = taffy::prelude::auto();
}
}
"gap" => {