watch & edit to use theme.xml; device batteries

This commit is contained in:
galister
2025-11-30 18:01:52 +09:00
parent 363c2d533c
commit 6c5ab63bec
13 changed files with 304 additions and 116 deletions

View File

@@ -1,37 +1,42 @@
<layout>
<include src="theme.xml" />
<macro name="button_style"
margin="2" overflow="hidden" box_sizing="border_box"
border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" 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="#0044CC" color="#000A1C" color2="#000002">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" sticky="${sticky}" border_color="~color_accent_translucent" color="~color_accent_5" color2="~color_accent_1">
<sprite id="${id}_sprite" width="48" height="48" src="${src}" />
</Button>
</template>
<template name="TopButtonDanger">
<Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="#CC0000" color="#110000" color2="#020000">
<Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_danger_translucent" color="~color_danger_5" color2="~color_danger_1">
<sprite width="48" height="48" src="${src}" />
</Button>
</template>
<template name="TopButtonFaded">
<Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="#707070" color="#202020" color2="#010101">
<Button macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_faded_translucent" color="~color_faded_5" color2="~color_faded_1">
<sprite 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="#0044CC" color="#000A1C" color2="#000002">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}" _release="${release}" border_color="~color_accent_translucent" color="~color_accent_5" color2="~color_accent_1">
<sprite id="${id}_sprite" width="40" height="40" src="${src}" />
</Button>
</template>
<elements>
<div width="100%" height="100%">
<rectangle id="shadow" width="100%" height="100%" padding="4" gap="4" align_items="center" justify_content="center" color="#000000DD" flex_direction="row">
<rectangle id="shadow" width="100%" height="100%" padding="4" gap="4" align_items="center" justify_content="center" color="#000000c0" flex_direction="row">
<div flex_direction="column">
<rectangle padding="16" gap="8" round="32" color="~color_bg" border="2" border_color="~color_accent" justify_content="center">
<div flex_direction="column" gap="8">

View File

@@ -8,5 +8,18 @@
<var key="color_accent_20" value="#001c33" /> <!-- 20% brightness -->
<var key="color_accent_5" value="#00070d" /> <!-- 5% brightness -->
<var key="color_accent_1" value="#000103" /> <!-- 1% brightness -->
<var key="color_danger" value="#ff3300" />
<var key="color_danger_translucent" value="#ff330040" />
<var key="color_danger_20" value="#330a00" /> <!-- 20% brightness -->
<var key="color_danger_5" value="#0d0200" /> <!-- 5% brightness -->
<var key="color_danger_1" value="#030000" /> <!-- 1% brightness -->
<var key="color_faded" value="#668299" />
<var key="color_faded_translucent" value="#66829940" />
<var key="color_faded_20" value="#141a1f" /> <!-- 20% brightness -->
<var key="color_faded_5" value="#050708" /> <!-- 5% brightness -->
<var key="color_faded_1" value="#010102" /> <!-- 1% brightness -->
</theme>
</layout>
</layout>

View File

@@ -1,4 +1,6 @@
<layout>
<include src="theme.xml" />
<theme>
<var key="border" value="2" />
<var key="kbd_color" value="#a6da95" />
@@ -15,30 +17,26 @@
</theme>
<macro name="button_style"
margin="2" overflow="hidden" box_sizing="border_box" align_items="center" justify_content="center"
border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical" />
margin="2" overflow="hidden" box_sizing="border_box"
border_color="~color_accent_translucent" border="2" round="8" color="~color_accent_5" color2="~color_accent_1" gradient="vertical"
align_items="center" justify_content="center" />
<template name="Device">
<div margin="4">
<sprite width="${size}" height="${size}" src="${src}" />
<div margin_top="10" margin_left="-31">
<label _source="battery" _device="${device}" size="18" shadow="#000000" weight="bold" />
<div id="dev_${idx}" margin="2" display="none">
<sprite id="dev_${idx}_sprite" width="32" height="32" src="${src}" />
<!-- div margin_top="10" margin_left="-31" -->
<div position="absolute" margin_top="6" margin_left="4">
<label _source="battery" _device="${idx}" size="18" shadow="#000000" weight="bold" />
</div>
</div>
</template>
<template name="SpriteButton">
<Button id="${id}" macro="button_style" tooltip="${tooltip}" _press="${press}">
<sprite width="40" height="40" src="${src}" />
</Button>
</template>
<template name="Overlay">
<Button macro="button_style" padding="4" id="overlay_${idx}" text="WLX-${idx}" tooltip="Toggle for current set" _press="::EditModeOverlayToggle ${idx}" />
</template>
<template name="Set">
<Button macro="button_style" id="set_${handle}" _press="::SetToggle ${handle}" tooltip="Switch to set" tooltip_side="top">
<Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="Switch to set" tooltip_side="top">
<sprite width="40" height="40" color="~set_color" src="watch/set2.svg" />
<div position="absolute" margin_top="9">
<label text="${display}" size="24" color="#00050F" weight="bold" />
@@ -46,60 +44,67 @@
</Button>
</template>
<!-- Elements with id="norm_*" show in normal mode. -->
<!-- Elements with id="edit_*" show in edit mode. -->
<elements>
<div width="460" height="260" padding="30" interactable="0">
<rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="~color_bg" justify_content="space_between">
<div width="100%" flex_direction="row" id="norm_top">
<Device src="watch/hmd.svg" size="40" device="0" />
<Device src="watch/controller_l.svg" size="36" device="1" />
<Device src="watch/controller_r.svg" size="36" device="2" />
<Device src="watch/track3.svg" size="40" device="3" />
<Device src="watch/track3.svg" size="40" device="4" />
<Device src="watch/track3.svg" size="40" device="5" />
</div>
<div width="100%" flex_direction="row" id="norm_pane">
<div width="460" height="260" padding="30" interactable="0" flex_direction="column">
<div padding="2" flex_direction="row" id="devices">
<!-- Src here may be changed, but maintain order: HMD, Left, Right, Tracker -->
<Device src="watch/hmd.svg" idx="0" />
<Device src="watch/controller_l.svg" idx="1" />
<Device src="watch/controller_r.svg" idx="2" />
<Device src="watch/track.svg" idx="3" />
<!-- Will populate additional <Device> tags at runtime -->
</div>
<rectangle height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="column" gap="4" color="#000000c0" border_color="~color_accent" border="2" round="8" justify_content="space_between">
<div flex_direction="row" id="norm_pane">
<div flex_direction="column" padding="4">
<label text="23:59" _source="clock" _display="time" color="~clock0_color" size="~clock0_size" weight="bold" />
<label text="22/2/2022" _source="clock" _display="date" color="~clock0_color" size="~clock0_date_size" weight="bold" />
<div width="100%" padding="2" />
<label text="Tuesday" _source="clock" _display="dow" color="~clock0_color" size="~clock0_dow_size" weight="bold" />
<div padding="2" gap="2" flex_direction="column">
<label text="22/2/2022" _source="clock" _display="date" color="~clock0_color" size="~clock0_date_size" weight="bold" />
<label text="Tuesday" _source="clock" _display="dow" color="~clock0_color" size="~clock0_dow_size" weight="bold" />
</div>
</div>
<div width="10" height="100%" />
<div flex_direction="column" padding="4">
<!-- Timezone names here are only placeholders. Set your timezones via ~/.config/wlxoverlay/conf.d -->
<div width="100%" padding="2" />
<div padding="2" />
<label text="Paris" _source="clock" _display="name" _timezone="0" color="~clock_alt1_color" size="~clock_alt_tz_size" weight="bold" />
<label text="23:59" _source="clock" _display="time" _timezone="0" color="~clock_alt1_color" size="~clock_alt_size" weight="bold" />
<div width="100%" padding="2" />
<div padding="2" />
<label text="New York" _source="clock" _display="name" _timezone="1" color="~clock_alt2_color" size="~clock_alt_tz_size" weight="bold" />
<label text="23:59" _source="clock" _display="time" _timezone="1" color="~clock_alt2_color" size="~clock_alt_size" weight="bold" />
</div>
<div flex_direction="column" padding="4">
</div>
</div>
<div width="100%" flex_direction="column" id="edit_pane" display="none" >
<div flex_direction="column" id="edit_pane" display="none" >
<div flex_direction="column" padding="4" align_items="center" justify_content="center">
<label text="Overlays can now be moved and tuned individually." />
<label text="Control which overlays are visible on this set:" />
</div>
<div flex_direction="row" flex_wrap="wrap" padding="4" align_items="center" justify_content="center" id="toolbox">
<Button macro="button_style" padding="4" translation="Keyboard" tooltip="Toggle for current set" _press="::OverlayToggle kbd" />
<!-- Will populate <Overlay> tags at runtime -->
<!-- Will populate additional <Overlay> tags at runtime -->
</div>
</div>
<div width="100%" flex_direction="row">
<div flex_direction="row">
<div id="norm_dash">
<Button macro="button_style" _press="::DashToggle" tooltip="Dashboard" tooltip_side="top" id="norm_dash">
<sprite color="~set_color" width="40" height="40" src="watch/home.svg" />
</Button>
</div>
<div id="edit_delete">
<Button macro="button_style" _press="::EditModeDeleteDown" _release="::EditModeDeleteUp" tooltip="Long Press: Delete Set" tooltip_side="top" border_color="#CC0000" color="#110000" color2="#020000" >
<div id="edit_delete" display="none">
<Button macro="button_style" _press="::EditModeDeleteDown" _release="::EditModeDeleteUp" tooltip="Long Press: Delete Set" tooltip_side="top" border_color="~color_danger_translucent" color="~color_danger_5" color2="~color_danger_1" >
<sprite color="~set_color" width="40" height="40" src="edit/delete.svg" />
</Button>
</div>
<div id="sets">
<!-- Will populate <Set> tags at runtime -->
<Set idx="0" display="1" />
<!-- Will populate additional <Set> tags at runtime -->
</div>
<div id="edit_add">
<div id="edit_add" display="none">
<Button macro="button_style" _press="::EditModeAddSet" tooltip="Add a new set" tooltip_side="top">
<sprite color="~set_color" width="40" height="40" src="edit/add.svg" />
</Button>