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

remove stale wgui docs, fix xmls for wayvr

This commit is contained in:
Aleksander 2026-07-11 18:28:44 +02:00
parent 155340b78d
commit c3cbc43f6f
11 changed files with 84 additions and 685 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@
<Button id="btn_donate" tooltip="DONATE.BUTTON_TOOLTIP" align_self="baseline">
<image src_builtin="dashboard/opencollective_logo.svg" width="252" height="42" margin="8" margin_left="16" margin_right="16"/>
</Button>
<label text="opencollective.com/wayvr-org" color="~color-accent"/>
<label text="opencollective.com/wayvr-org"/>
</div>
<label weight="bold" size="24" translation="DONATE.THANK_YOU_WAYVR"/>

8
uidev/assets/gui/wlx_theme.xml
View File

@ -1,8 +0,0 @@
<layout>
<!-- TODO: deprecate this in favor of theme.xml -->
<theme>
<var key="color_bg" value="#24273a" />
<var key="color_bg_active" value="#44475a" />
<var key="text_color" value="#dddddd" />
</theme>
</layout>

1
wayvr/src/assets/edit/check.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="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 300 B

11
wayvr/src/assets/gui/decor.xml
View File

@ -10,18 +10,17 @@
round="8"
align_items="center"
justify_content="space_between"
color="~color_bg"
border_color="~color_accent"
color="background"
border_color="outline"
>
<label id="label_title" margin_left="8" color="~color_text" size="22" weight="bold" />
<label id="label_title" margin_left="8" color="on_background" size="22" weight="bold" />
<div gap="4">
<Button macro="window_button" _release="::EditToggle"
border_color="~color_faded_translucent" color="~color_faded_50" color2="~color_faded_10">
<Button macro="window_button" _release="::EditToggle">
<sprite macro="window_button_icon" src="watch/edit.svg" />
</Button>
<Button macro="window_button" _release="::DecorCloseWindow"
border_color="~color_danger_translucent" color="~color_danger_50" color2="~color_danger_10">
border_color="danger" color="danger">
<sprite macro="window_button_icon" src="edit/close.svg" />
</Button>
</div>

23
wayvr/src/assets/gui/edit.xml
View File

@ -1,33 +1,28 @@
<layout>
<macro name="button_style"
margin="2" overflow="hidden" box_sizing="border_box"
border_color="~color_accent" border="2" round="8" color="~color_accent_50" color2="~color_accent_10" gradient="vertical"
align_items="center" justify_content="center" />
<macro name="button_style"
margin="2" overflow="hidden" box_sizing="border_box" align_items="center" justify_content="center"
border="2" round="50%" padding="8" gradient="vertical" tooltip_side="bottom" />
<template name="TopButton">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" sticky="${sticky}" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" sticky="${sticky}">
<sprite id="${id}_sprite" width="48" height="48" src="${src}" />
</Button>
</template>
<template name="TopButtonDanger">
<Button macro="button_style" tooltip="${tooltip}" _release="${release}" border_color="~color_danger_translucent" color="~color_danger_50" color2="~color_danger_10">
<Button macro="button_style" tooltip="${tooltip}" _release="${release}" border_color="danger" color="danger">
<sprite width="48" height="48" src="${src}" />
</Button>
</template>
<template name="TopButtonFaded">
<Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_faded_translucent" color="~color_faded_50" color2="~color_faded_10">
<sprite width="48" height="48" src="${src}" />
<template name="TopButtonTertiary">
<Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" color="tertiary" border_color="tertiary">
<sprite color="on_tertiary" width="48" height="48" src="${src}" />
</Button>
</template>
<template name="PosButton">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" >
<sprite id="${id}_sprite" width="40" height="40" src="${src}" />
</Button>
</template>
@ -37,7 +32,7 @@
<rectangle id="shadow" width="100%" height="100%" padding="4" gap="4" align_items="center" justify_content="space_between" color="#000000c0" flex_direction="column">
<div />
<div flex_direction="column">
<rectangle padding="16" gap="8" round="32" color="~color_bg" border="2" border_color="~color_accent" justify_content="center">
<rectangle padding="16" gap="8" round="32" color="background(opacity-0.9)" border="2" border_color="outline" justify_content="center">
<div flex_direction="column" gap="8">
<div flex_direction="row" gap="4">
<TopButton sticky="0" id="top_lock" src="edit/lock_open.svg" tooltip="EDIT_MODE.LOCK_INTERACTION" press="::EditModeToggleLock" />
@ -51,7 +46,7 @@
<!-- TopButton sticky="0" id="top_resize" src="edit/resize.svg" tooltip="EDIT_MODE.RESIZE_PRESS_AND_DRAG" / -->
<TopButtonDanger src="edit/delete.svg" tooltip="EDIT_MODE.DELETE" release="::EditModeDelete" />
<div width="8" height="100%" />
<TopButtonFaded src="watch/edit.svg" tooltip="EDIT_MODE.LEAVE" press="::EditToggle" />
<TopButtonTertiary src="edit/check.svg" tooltip="EDIT_MODE.LEAVE" press="::EditToggle" />
</div>
<div id="tab_none" display="none" height="100">
<label align="center" translation="EDIT_MODE.HINT_POINT_WINDOW" />
@ -129,7 +124,7 @@
</div>
<div width="100%" justify_content="end" flex_direction="row">
<div>
<Button id="resize_corner" macro="button_style" tooltip="EDIT_MODE.RESIZE_CORNER" tooltip_side="left" _press="::EditModeResizeStart" _release="::EditModeResizeStop" border_color="~color_accent_translucent" color="~color_accent_50" color2="~color_accent_10">
<Button id="resize_corner" macro="button_style" tooltip="EDIT_MODE.RESIZE_CORNER" tooltip_side="left" _press="::EditModeResizeStart" _release="::EditModeResizeStop">
<sprite width="48" height="48" src="edit/resize-corner.svg" />
</Button>
</div>

10
wayvr/src/assets/gui/grab-help.xml
View File

@ -6,25 +6,25 @@
padding="16"
flex_direction="column"
gap="8"
color="~color_bg" border_color="~color_accent" border="2" round="8">
color="background" border_color="outline" border="2" round="8">
<div flex_direction="row" padding="8" justify_content="space_between">
<div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
<sprite color="~color_text" src="grab-help/controller-grip-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
<sprite src="grab-help/controller-grip-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
<label wrap="1" size="25" padding_left="16" padding_right="16" translation="GRAB.ADJUST_DISTANCE" align="center" />
</div>
<div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
<sprite color="~color_text" src="grab-help/controller-grip-trigger-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
<sprite src="grab-help/controller-grip-trigger-joy.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
<label wrap="1" size="25" padding_left="16" padding_right="16" translation="GRAB.ADJUST_SIZE" align="center" />
</div>
<div flex_direction="column" align_items="center" gap="8" max_width="160" min_width="160">
<sprite color="~color_text" src="grab-help/controller-grip-b.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
<sprite src="grab-help/controller-grip-b.svg" min_width="128" min_height="128" max_width="128" max_height="128" flex_grow="1" />
<label wrap="1" size="25" padding_left="16" padding_right="16" translation="GRAB.UNRESTRICTED_MOVEMENT" align="center" />
</div>
</div>
<!-- A simple separator -->
<rectangle width="100%" height="2" color="~color_accent" />
<rectangle width="100%" height="2" color="outline" />
<div align_items="center" padding="8" >
<label display="none" id="grabbing_watch" wrap="1" size="20" padding_right="16" translation="GRAB.GRABBING_WATCH" />

52
wayvr/src/assets/gui/keyboard.xml
View File

@ -1,20 +1,24 @@
<layout>
<macro name="keycap_rect"
margin="2" width="100%" overflow="hidden" box_sizing="border_box"
border_color="~color_accent_translucent" border="2" round="6" color="~color_accent_40" color2="~color_accent_10" gradient="vertical"
border_color="outline" border="2" round="6" color="background_variant" color2="background" gradient="vertical"
align_items="center" justify_content="center" />
<macro name="tray_rect"
margin="2" width="100%" overflow="hidden" box_sizing="border_box"
border_color="~color_accent_translucent" border="2" round="6" color="~color_bg" color2="~color_accent_10" gradient="vertical"
border_color="outline" border="2" round="6" color="background" color2="background_variant" gradient="vertical"
align_items="center" justify_content="center" />
<macro name="keycap_div"
width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}"
/>
<theme>
<var key="text_size" value="20" />
</theme>
<template name="VerticalSeparator">
<rectangle width="2" height="100%" color="~color_accent" />
<rectangle width="2" height="100%" color="primary" />
</template>
<!-- The keyboard is build from the xkb keymap. This file is for customizing the keycaps. -->
@ -24,7 +28,7 @@
<template name="KeySpecial">
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect">
<sprite color="~color_text" width="24" height="24" src="keyboard/${text}.svg" />
<sprite color="on_background" width="24" height="24" src="keyboard/${text}.svg" />
</rectangle>
</div>
</template>
@ -34,7 +38,7 @@
<template name="KeyLetter">
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect">
<label text="${text}" size="18" />
<label text="${text}" size="~text_size" />
</rectangle>
</div>
</template>
@ -44,8 +48,8 @@
<template name="KeyLetterAltGr">
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect" gap="3">
<label text="${text}" size="18" />
<label color="~color_text_translucent" text="${text_altgr}" size="18" />
<label text="${text}" size="~text_size" />
<label color="on_background(opacity-0.5)" text="${text_altgr}" size="~text_size" />
</rectangle>
</div>
</template>
@ -55,8 +59,8 @@
<template name="KeySymbol">
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect" gap="3">
<label color="~color_text_translucent" text="${text_shift}" size="18" />
<label text="${text}" size="18" />
<label color="on_background(opacity-0.5)" text="${text_shift}" size="~text_size" />
<label text="${text}" size="~text_size" />
</rectangle>
</div>
</template>
@ -67,14 +71,14 @@
<div macro="keycap_div">
<rectangle id="${id}" macro="keycap_rect" flex_direction="row" flex_wrap="wrap" padding="4">
<div width="50%" height="50%" align_items="center" justify_content="center">
<label color="~color_text_translucent" text="${text_shift}" size="18" />
<label color="on_background(opacity-0.5)" text="${text_shift}" size="~text_size" />
</div>
<div width="50%" height="50%" align_items="center" justify_content="center" />
<div width="50%" height="50%" align_items="center" justify_content="center">
<label text="${text}" size="18" />
<label text="${text}" size="~text_size" />
</div>
<div width="50%" height="50%" align_items="center" justify_content="center">
<label color="~color_text_translucent" text="${text_altgr}" size="18" />
<label color="on_background(opacity-0.5)" text="${text_altgr}" size="~text_size" />
</div>
</rectangle>
</div>
@ -90,10 +94,10 @@
</div>
</template>
<macro name="button_style" border="2" border_color="~color_accent_translucent" color="~color_bg" round="6"
<macro name="button_style" border="2" round="6"
align_items="center" justify_content="center" padding="6" width="60" height="60" overflow="visible"/>
<macro name="bg_rect" width="100%" color="~color_bg" round="10" border="2" border_color="~color_accent" />
<macro name="bg_rect" width="100%" color="background_contrast" round="10" border="2" border_color="primary" />
<blueprint name="menu_app">
<context_menu >
@ -108,7 +112,7 @@
<!-- An app with a single icon. -->
<template name="App">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_app" _press_right="::OverlayToggle ${name}">
<sprite width="38" height="38" color="~color_text" src_ext="${icon}" />
<sprite width="38" height="38" color="on_background" src_ext="${icon}" />
</Button>
</template>
@ -123,9 +127,9 @@
<!-- A screen with a shortened connector name, e.g. "H1" for HDMI-A-1 or "D2" for DP-2 -->
<template name="Screen">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_screen" _press_right="::OverlayToggle ${name}">
<sprite width="38" height="38" color="~color_text" src_builtin="edit/screen.svg" />
<sprite width="38" height="38" color="on_background_variant" src_builtin="edit/screen.svg" />
<div position="absolute" margin_top="-7" margin_left="-1">
<label text="${display}" size="18" color="~color_faded_20" weight="bold" />
<label text="${display}" size="~text_size" color="on_background_variant(opacity-0.2)" weight="bold" />
</div>
</Button>
</template>
@ -141,7 +145,7 @@
<template name="Panel">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_panel" _press_right="::OverlayToggle ${name}">
<sprite width="38" height="38" color="~color_text" src="${icon}" />
<sprite width="38" height="38" color="on_background_variant" src="${icon}" />
</Button>
</template>
@ -156,9 +160,9 @@
<template name="Mirror">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_mirror" _press_right="::OverlayToggle ${name}">
<sprite width="38" height="38" color="~color_text" src_builtin="edit/mirror.svg" />
<sprite width="38" height="38" color="on_background_variant" src_builtin="edit/mirror.svg" />
<div position="absolute" margin_top="5" margin_left="13">
<label text="${display}" size="20" color="~color_faded_20" weight="bold" />
<label text="${display}" size="20" color="on_background(opacity-0.2)" weight="bold" />
</div>
</Button>
</template>
@ -185,9 +189,9 @@
<template name="Set">
<Button macro="button_style" id="set_${idx}" _press="::SetSwitch ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="bottom">
<sprite width="38" height="38" color="~color_text" src_builtin="watch/set2.svg" />
<sprite width="38" height="38" color="on_background_variant" src_builtin="watch/set2.svg" />
<div position="absolute" margin_top="10" margin_left="-7">
<label text="${display}" size="20" color="~color_faded_20" weight="bold" />
<label text="${display}" size="20" color="on_background(opacity-0.2)" weight="bold" />
</div>
</Button>
</template>
@ -205,7 +209,7 @@
<rectangle macro="bg_rect" padding="10" align_items="center" justify_content="space_between">
<div gap="10">
<Button macro="button_style" id="btn_dashboard" _press="::DashToggle">
<sprite width="38" height="38" color="~color_text" src="watch/wayvr_dashboard_mono.svg" />
<sprite width="38" height="38" color="on_background_variant" src="watch/wayvr_dashboard_mono.svg" />
</Button>
<VerticalSeparator />
<div id="panels_root" gap="6">
@ -216,7 +220,7 @@
</div>
<div id="tray_root" flex_direction="row" gap="10">
<Button macro="button_style" _press="::ContextMenuOpen menu_burger">
<sprite width="38" height="38" color="~color_text" src_builtin="keyboard/burger.svg" />
<sprite width="38" height="38" color="on_background_variant" src_builtin="keyboard/burger.svg" />
</Button>
<VerticalSeparator />

12
wayvr/src/assets/gui/toast.xml
View File

@ -6,22 +6,22 @@
padding="16"
flex_direction="column"
gap="8"
color="#000000c0" border_color="~color_accent" border="2" round="8">
color="background" border_color="outline" border="2" round="8">
<!-- Toast title -->
<div flex_direction="row" align_items="center" gap="8">
<sprite src="icons/bell.svg" min_width="32" min_height="32" max_width="32" max_height="32" flex_grow="1" />
<label wrap="1" id="toast_title" weight="bold" size="25" padding_left="16" padding_right="16" />
<sprite src="icons/bell.svg" color="on_background" min_width="32" min_height="32" max_width="32" max_height="32" flex_grow="1" />
<label wrap="1" id="toast_title" color="on_background" weight="bold" size="25" padding_left="16" padding_right="16" />
</div>
<!-- A simple separator -->
<rectangle width="100%" height="2" color="~color_accent" />
<rectangle width="100%" height="2" color="outline" />
<div>
<!-- Toast message -->
<label id="toast_body" wrap="1" size="20" padding_left="16" padding_right="16" />
<label id="toast_body" color="on_background" wrap="1" size="20" padding_left="16" padding_right="16" />
</div>
</rectangle>
</div>
</elements>
</layout>
</layout>

43
wayvr/src/assets/gui/watch.xml
View File

@ -10,17 +10,14 @@
</theme>
<macro name="decorative_rect"
padding="8" color="~color_bg"
border="2" border_color="~color_accent" round="8" />
padding="8" color="background"
border="2" border_color="outline" round="8" />
<macro name="button_style"
padding="8"
border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_40" color2="~color_accent_10" gradient="vertical"
align_items="center" justify_content="center" />
<macro name="button_style" padding="8" border="2" round="8" align_items="center" justify_content="center" />
<template name="Device">
<rectangle macro="decorative_rect" padding_top="4" padding_bottom="4" align_items="center" gap="8">
<sprite width="32" height="32" src_builtin="${src}" color="~color_text" />
<sprite width="32" height="32" src_builtin="${src}" color="on_background" />
<label _source="battery" _device="${idx}" size="24" weight="bold" />
</rectangle>
</template>
@ -40,34 +37,34 @@
<template name="Screen">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
<sprite width="38" height="38" color="~color_text" src_builtin="edit/screen.svg" />
<sprite width="38" height="38" color="on_background" src_builtin="edit/screen.svg" />
<div position="absolute" margin_top="-7" margin_left="-1">
<label text="${display}" size="18" color="~color_faded_20" weight="bold" />
<label text="${display}" size="18" color="on_background(opacity-0.2)" weight="bold" />
</div>
</Button>
</template>
<template name="Panel">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
<sprite width="38" height="38" color="~color_text" src_builtin="edit/panel.svg" />
<sprite width="38" height="38" color="on_background" src_builtin="edit/panel.svg" />
</Button>
</template>
<template name="Mirror">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
<sprite width="38" height="38" color="~color_text" src_builtin="edit/mirror.svg" />
<sprite width="38" height="38" color="on_background" src_builtin="edit/mirror.svg" />
<div position="absolute" margin_top="5" margin_left="13">
<label text="${display}" size="20" color="~color_faded_20" weight="bold" />
<label text="${display}" size="20" color="on_background" weight="bold" />
</div>
</Button>
</template>
<template name="App">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
<sprite width="38" height="38" color="~color_text" src_ext="${icon}" />
<sprite width="38" height="38" color="on_background" src_ext="${icon}" />
</Button>
</template>
<template name="Set">
<Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="top">
<sprite width="38" height="38" color="~color_text" src_builtin="watch/set2.svg" />
<sprite width="38" height="38" color="on_background" src_builtin="watch/set2.svg" />
<div position="absolute" margin_top="9">
<label text="${display}" size="24" color="#00050F" weight="bold" />
</div>
@ -77,10 +74,10 @@
<template name="Clock">
<div gap="12" flex_direction="column" padding="4">
<div flex_direction="column" >
<label text="11:22 PM" _source="clock" _display="time" color="~color_text" size="~clock0_size" weight="bold" align="center" />
<label text="11:22 PM" _source="clock" _display="time" color="on_background" size="~clock0_size" weight="bold" align="center" />
<div padding_left="2" gap="16" flex_direction="row" justify_content="center">
<label text="Tue" _source="clock" _display="dow_short" color="~color_text" size="~clock0_dow_size" weight="bold" />
<label text="22/2/2022" _source="clock" _display="date" color="~color_text" size="~clock0_date_size" weight="bold" />
<label text="Tue" _source="clock" _display="dow_short" color="on_background" size="~clock0_dow_size" weight="bold" />
<label text="22/2/2022" _source="clock" _display="date" color="on_background" size="~clock0_date_size" weight="bold" />
</div>
</div>
<div flex_direction="row" gap="8" justify_content="space_around">
@ -98,7 +95,7 @@
</template>
<template name="VerticalSeparator">
<rectangle width="2" height="100%" color="~color_accent" />
<rectangle width="2" height="100%" color="outline" />
</template>
<elements>
@ -128,18 +125,18 @@
<div flex_direction="column" gap="8">
<div gap="8">
<Button id="btn_keyboard" macro="button_style" _press="::OverlayToggle kbd" tooltip="EDIT_MODE.KEYBOARD" tooltip_side="left">
<sprite src_builtin="watch/keyboard.svg" color="~color_text" width="40" height="40" />
<sprite src_builtin="watch/keyboard.svg" color="on_background" width="40" height="40" />
</Button>
<Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="left">
<sprite color="~color_text" width="40" height="40" src="watch/edit.svg" />
<sprite color="on_background" width="40" height="40" src="watch/edit.svg" />
</Button>
</div>
<div gap="8">
<Button macro="button_style" _press="::PlayspaceRecenter" tooltip="WATCH.RECENTER" tooltip_side="left">
<sprite width="40" height="40" color="~color_text" src="watch/recenter.svg" />
<sprite width="40" height="40" color="on_background" src="watch/recenter.svg" />
</Button>
<Button macro="button_style" _press="::PlayspaceFixFloor" tooltip="WATCH.FIX_FLOOR" tooltip_side="left">
<sprite width="40" height="40" color="~color_text" src="watch/fix-floor.svg" />
<sprite width="40" height="40" color="on_background" src="watch/fix-floor.svg" />
</Button>
</div>
</div>
@ -149,7 +146,7 @@
<div flex_direction="row" gap="8">
<div gap="4">
<Button id="btn_dashboard" macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top">
<sprite color="~color_text" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
<sprite color="on_background" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
</Button>
</div>
<VerticalSeparator />

18
wayvr/src/assets/gui/whisper.xml
View File

@ -1,11 +1,11 @@
<layout>
<macro name="button_style" border="2" border_color="~color_accent_translucent" color="~color_bg" round="6"
<macro name="button_style" border="2" round="6"
align_items="center" justify_content="center" padding="6" width="60" height="60" overflow="visible"/>
<macro name="bg_rect" width="100%" color="~color_bg" round="10" border="2" border_color="~color_accent" />
<macro name="bg_rect" width="100%" color="background" border_color="outline" round="10" border="2" />
<template name="VerticalSeparator">
<rectangle width="2" height="100%" color="~color_accent" />
<rectangle width="2" height="100%" color="outline" />
</template>
<elements>
@ -13,27 +13,27 @@
<rectangle macro="bg_rect" padding="10" align_items="center" justify_content="space_between">
<div gap="10">
<Button macro="button_style" _press="::WhisperTranscribeStart" _release="::WhisperTranscribeStop" tooltip="WHISPER.TRANSCRIBE" tooltip_side="right">
<sprite width="38" height="38" color="~color_text" src="icons/mic.svg" />
<sprite width="38" height="38" src="icons/mic.svg" />
</Button>
<VerticalSeparator />
<Button macro="button_style" _press="::WhisperPaste" tooltip="WHISPER.PASTE" tooltip_side="right">
<sprite width="38" height="38" color="~color_text" src_builtin="icons/paste.svg" />
<sprite width="38" height="38" src_builtin="icons/paste.svg" />
</Button>
<Button macro="button_style" _press="::WhisperPasteAndGo" tooltip="WHISPER.PASTE_AND_GO" tooltip_side="right">
<sprite width="38" height="38" color="~color_text" src_builtin="icons/paste-go.svg" />
<sprite width="38" height="38" src_builtin="icons/paste-go.svg" />
</Button>
<VerticalSeparator />
<Button macro="button_style" _press="::SendKey Return down" _release="::SendKey Return up" tooltip="WHISPER.ENTER_KEY" tooltip_side="right">
<sprite width="38" height="38" color="~color_text" src_builtin="keyboard/return.svg" />
<sprite width="38" height="38" src_builtin="keyboard/return.svg" />
</Button>
<VerticalSeparator />
<Button macro="button_style" _press="::WhisperSendOSC" tooltip="WHISPER.SEND_OSC" id="btn_osc_send" tooltip_side="right">
<sprite width="38" height="38" color="~color_text" src_builtin="icons/chat.svg" />
<sprite width="38" height="38" src_builtin="icons/chat.svg" />
</Button>
</div>
<div gap="10">
<Button macro="button_style" _press="::WhisperUnloadAndClose" tooltip="WHISPER.UNLOAD_AND_CLOSE" tooltip_side="left">
<sprite width="38" height="38" color="~color_text" src_builtin="edit/close.svg" />
<sprite width="38" height="38" src_builtin="edit/close.svg" />
</Button>
</div>
</rectangle>

589
wgui/doc/widgets.md
View File

@ -1,589 +0,0 @@
# Quick jump
## [Widgets](#widgets)
[div](#div-widget), [label](#label-widget), [rectangle](#rectangle-widget), [sprite](#sprite-widget)
## [Built-in components](#components)
[Button](#button-component), [Slider](#slider-component), [CheckBox](#checkbox-component), [Tabs](#tabs-component) ([Tab](#tab-component)), [EditBox](#editbox-component), [BarGraph](#bargraph-component)
## [Examples](#examples)
[Simple layout](#simple-layout)
[Value substitution (themes)](#value-substitution-themes)
[File inclusion](#file-inclusion)
[Macros](#macros)
[Templates](#templates)
# Universal widget attributes
_They can be used in any widget/component._
`display`: "flex" | "block" | "grid"
`position`: "absolute" | "relative"
`flex_grow`: **float**
`flex_shrink`: **float**
`gap`: **float** | **percent**
`flex_basis`: **float** | **percent**
`justify_self`: "center" | "end" | "flex_end" | "flex_start" | "start" | "stretch"
`justify_content`: "center" | "end" | "flex_start" | "flex_end" | "space_around" | "space_between" | "space_evenly" | "start" | "stretch"
`flex_wrap`: "wrap" | "no_wrap" | "wrap_reverse"
`flex_direction`: "row" | "column" | "column_reverse" | "row_reverse"
`align_items`, `align_self`: "baseline" | "center" | "end" | "flex_start" | "flex_end" | "start" | "stretch"
`box_sizing`: "border_box" | "content_box"
`margin`, `margin_left`, `margin_right`, `margin_top`, `margin_bottom`: **float** | **percent**
`padding`, `padding_left`, `padding_right`, `padding_top`, `padding_bottom`: **float** | **percent**
`overflow`, `overflow_x`, `overflow_y`: "hidden" | "visible" | "clip" | "scroll"
`min_width`, `min_height`: **float** | **percent**
`max_width`, `max_height`: **float** | **percent**
`width`, `height`: **float** | **percent**
## Advanced attributes
`interactable`: "1" | "0"
_Set to 0 if you want to exclude this widget from altering the event state_
`consume_mouse_events`: "1" | "0"
_Used in case of overlapping pop-ups or windows, most notably applied to various backgrounds_
`new_pass`: "1" | "0"
_Set to 1 if you want to render overlapping pop-ups to properly render your widgets in order. Wgui renders with as few Vulkan drawcalls as possible, so this is your responsibility._
## Default Colors
_These colors can be defined by the user to control the color scheme. They always exists and can be used in any place a normal color could be used._
`~color_text`: default: white(#FFFFFF)
`~color_accent`: default: light blue(#21ADFF)
`~color_danger`: default: red(#E60000)
`~color_faded`: default: grey(#ABBDCC)
`~color_bg`: default: black(#00121ABF) (color_background in config)
_Only the default colors can be changed with the following suffixes._
`_translucent`
_Halves the alpha of the color._
`_10`
`_20`
`_30`
`_40`
`_50`
_Darkens the color by multiplying it with a percentage. `~color_accent_50` Would be half of the normal brightness but the same alpha. You can't combine the suffixes_
### Color
# Widgets
## div widget
### `<div>`
### The most simple element
#### Parameters
_None_
---
## label widget
### `<label>`
### A simple text element
#### Parameters
`text`: **string**
_Simple text_
`translation`: **string**
_Translated by key_
`size`: **float** (default: 14)
_Text size in pixel units_
`wrap`: "1" | "0" (default: "0")
_Enable text wrapping?_
`color`: #FFAABB | #FFAABBCC
`align`: "left" | "right" | "center" | "justified" | "end"
`weight`: "normal" | "bold"
`shadow`: #112233 | #112233CC (default: None)
`shadow_x`: **float** (default: 1.5)
_Horizontal offset of the shadow from the original text. Positive is right._
`shadow_y`: **float** (default: 1.5)
_Vertical offset of the shadow from the original text. Positive is down._
---
## rectangle widget
### `<rectangle>`
### A styled rectangle
#### Parameters
`color`: #FFAABB | #FFAABBCC
_1st gradient color_
`color2`: #FFAABB | #FFAABBCC
_2nd gradient color_
`gradient`: "horizontal" | "vertical" | "radial" | "none"
`round`: **float** (default: 0) | **percent** (0-100%)
`border`: **float**
`border_color`: #FFAABB | #FFAABBCC
---
## sprite widget
### `<sprite>`
### Image widget for small images
Always set the `width` & `height` of a `<sprite>`!
Supported formats: svg, png, jpeg, gif, webp
Maximum image size: 256x256 pixels
For large or frequently changing images (e.g. album art), or if borders/rounding is desired, consider the `<image>` tag instead.
Sprite images are atlassed, making them very efficient to render.
Adding large sprites permanently increases the atlas size (and thus VRAM usage) for the session. (Atlas space can be re-used, but the atlas won't shrink back.)
#### Parameters
`src`: **string**
_External (filesystem) image path. Falls back to Internal (assets) if not found._
`src_ext`: **string**
_External (filesystem) image path_
`src_builtin`: **string**
_Internal (assets) image path_
`src_internal`: **string**
_wgui internal image path. Do not use directly unless it's related to the core wgui assets._
## image widget
### `<image>`
### Image widget for large images
Always set the `width` & `height` of an `<image>`!
Supported formats: svg, png, jpeg, gif, webp
Maximum image size: Max texture size for the GPU (usually 8K+)
For small images such as icons, consider using the `<sprite>` tag instead.
`<image>` requires a single draw call per widget, while `<sprite>` widgets all share a single draw call per panel.
#### Parameters
`src`: **string**
_External (filesystem) image path. Falls back to Internal (assets) if not found._
`src_ext`: **string**
_External (filesystem) image path_
`src_builtin`: **string**
_Internal (assets) image path_
`src_internal`: **string**
_wgui internal image path. Do not use directly unless it's related to the core wgui assets._
`round`: **float** (default: 0) | **percent** (0-100%)
`border`: **float**
`border_color`: #FFAABB | #FFAABBCC
---
# Components
## Button component
### `<Button>`
### A clickable, decorated button
#### Parameters
`text`: **string**
_Simple text_
`translation`: **string**
_Translated by key_
`round`: **float** (default: 4) | **percent** (0-100%)
`border`: **float** (default: 2)
`color`: #FFAABB | #FFAABBCC
`border_color`: #FFAABB | #FFAABBCC
`hover_color`: #FFAABB | #FFAABBCC
`hover_border_color`: #FFAABB | #FFAABBCC
`tooltip`: **string**
_Tooltip text on hover, translated by key_
`tooltip_str`: **string**
_Tooltip text on hover, raw text (not translated)_
`tooltip_side`: "top" | "bottom" | "left" | "right" (default: top)
`sticky`: "1" | "0" (default: "0")
_make button act as a toggle (visual only)_
`sprite_src` | `sprite_src_ext` | `sprite_src_builtin` | `sprite_src_internal`
_Image path (see [sprite](#sprite-widget)) for src descriptions_
#### Info
Child widgets are supported and can be added directly in XML.
---
## Slider component
### `<Slider>`
### A simple slider.
#### Parameters
`min_value`: **float**
`max_value`: **float**
_Needs to be bigger than `min_value`_
`value`: **float**
_Initial slider value_
`show_value`: "1" | "0"
_Set to 0 if you don't want to display value text in the slider handle_
---
## Checkbox component
### `<CheckBox>`
### A check-box with label.
#### Parameters
`text`: **string**
_Simple text_
`translation`: **string**
_Translated by key_
`box_size`: **float** (default: 24)
`color_checked`: #FFAABB | #FFAABBCC
`value`: **string**
_optional value that will be sent with internal events_
`checked`: **int** (default: 0)
---
## Radiobox component
### `<RadioBox>`
### A radio-box with label.
#### Parameters
`text`: **string**
_Simple text_
`translation`: **string**
_Translated by key_
`box_size`: **float** (default: 24)
`value`: **string**
_optional value that will be set as the RadioGroup's value_
`checked`: **int** (default: 0)
---
## RadioGroup component
### `<RadioGroup>`
### A radio group. Place `<RadioBox>` components inside this.
## Tabs component
### `<Tabs>`
### A tab bar component
#### Parameters
`id`: **string**
_Unique identifier for the tab group_
Only `<Tab>` components should be placed inside `<Tabs>`.
---
## Tab component
### `<Tab>`
### A single tab inside a `<Tabs>` component
#### Parameters
`name`: **string**
_Unique identifier for the tab_
`translation`: **string**
_Translated by key_
`sprite_src` | `sprite_src_ext` | `sprite_src_builtin` | `sprite_src_internal`
_Image path (see [sprite](#sprite-widget)) for src descriptions_
---
## EditBox component
### `<EditBox>`
### A single-line text input field.
#### Parameters
`text`: **string**
_Initial text content_
## BarGraph component
### `<BarGraph>`
### A bar graph widget
#### Parameters
`limit_min`: **float**
_Minimum limit value_
`limit_max`: **float**
_Maximum limit value_
`unit`: **string** (default: "")
_Unit type, for example "%" or "ms"_
`capacity`: **int** (default: 50)
_Value count_
---
# Examples
## Simple layout
```xml
<layout>
<elements>
<label text="Hello, world!"/>
<label translation="WELCOME.HELLO_WORLD" size="20" color="#FF0000"/>
<div gap="16" flex_direction="row">
<rectangle width="16" height="16" color="#FF0000"/>
<rectangle width="16" height="16" color="#00FF00"/>
<rectangle width="16" height="16" color="#0000FF"/>
</div>
</elements>
</layout>
```
## Value substitution (themes)
```xml
<layout>
<theme>
<var key="hello" value="Hello, world!" />
<var key="text_color" value="#FF0000" />
</theme>
<elements>
<!-- "~hello" will be replaced to "Hello, world!" -->
<label text="~hello"/>
<!-- "~text_color" will be replaced to "#FF0000" -->
<label text="This text will be red" color="~text_color"/>
</elements>
</layout>
```
## Macros
```xml
<layout>
<macro name="my_macro"
margin="4" min_width="100" min_height="100" flex_direction="row" gap="8"
align_items="center" justify_content="center"/>
<elements>
<!-- This div will have all attributes specified in "my_macro" -->
<div macro="my_macro">
<label text="hello, world!"/>
</div>
</elements>
</layout>
```
## File inclusion
theme.xml:
```xml
<layout>
<theme>
<var key="my_red" value="#FF0000" />
<var key="my_green" value="#00FF00" />
<var key="my_blue" value="#0000FF" />
</theme>
</layout>
```
bar.xml:
```xml
<layout>
<elements>
<!-- utilize theme variables included in theme.xml -->
<rectangle width="16" height="16" color="~my_red"/>
<rectangle width="16" height="16" color="~my_green"/>
<rectangle width="16" height="16" color="~my_blue"/>
</elements>
</layout>
```
main.xml:
```xml
<layout>
<!-- Include theme -->
<include src="theme.xml"/>
<elements>
<!-- Include as additional elements here -->
<include src="bar.xml"/>
</elements>
</layout>
```
## Templates
```xml
<layout>
<!-- "title" attrib will be passed to every matching ${title} -->
<template name="DecoratedTitle">
<rectangle color="#FFFF00" padding="8" round="4" gap="4">
<label text="${title}"/>
</rectangle>
</template>
<elements>
<!-- "title" used here -->
<DecoratedTitle title="This is a title.">
</elements>
</layout>
```