Repository navigation
Expand file tree
/
Copy pathusage.typ
More file actions
122 lines (104 loc) · 5.31 KB
/
Copy pathusage.typ
File metadata and controls
122 lines (104 loc) · 5.31 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
#import "lib.typ": *
// light-theme UI element helpers (the app window is light)
#let fillbox(x, y, w, h, col, radius: 0pt, stroke: none) = place(top + left, dx: x * 1pt, dy: y * 1pt,
box(width: w * 1pt, height: h * 1pt, radius: radius, fill: col, stroke: stroke))
#let dtxt(x, y, body, col: rgb("#22252e"), size: 10pt, weight: "regular") = place(top + left, dx: x * 1pt, dy: y * 1pt,
text(fill: col, size: size, weight: weight, body))
#let seg(x1, y1, x2, y2, col, w: 1pt) = place(top + left, line(start: (x1 * 1pt, y1 * 1pt), end: (x2 * 1pt, y2 * 1pt), stroke: w + col))
#let handle(x, y) = fillbox(x - 3.5, y - 3.5, 7, 7, blue, stroke: 0.6pt + white)
#let winbg = rgb("#ecedf1")
#let panbg = rgb("#f6f7f9")
#let gridc = rgb("#e6e7ec")
#let inkd = rgb("#24262e")
#let mutd = rgb("#7b8090")
#sheet(1040, 620, [
#heading-block("Using Screen Mask", "The overlays live on your desktop; you shape them from this one control window")
// ================= mock window =================
#let X0 = 250
#let Y0 = 150
#fillbox(X0, Y0, 540, 372, winbg, radius: 10pt, stroke: 1pt + rgb("#cfd2da"))
// ---- left canvas (white desktop preview) ----
#let cx0 = 274
#let cy0 = 182
#let cx1 = 600
#let cy1 = 500
#fillbox(cx0, cy0, cx1 - cx0, cy1 - cy0, white, stroke: 1pt + rgb("#c7c9d2"))
// grid + rulers
#for gx in (338, 424, 510) {
seg(gx, cy0, gx, cy1, gridc)
}
#for gy in (250, 340, 430) {
seg(cx0, gy, cx1, gy, gridc)
}
#dtxt(cx0 - 2, cy0 - 15, "0", col: mutd, size: 7.5pt)
#dtxt(324, cy0 - 15, "640", col: mutd, size: 7.5pt)
#dtxt(410, cy0 - 15, "1280", col: mutd, size: 7.5pt)
#dtxt(496, cy0 - 15, "1920", col: mutd, size: 7.5pt)
#dtxt(cx0 - 22, 246, "300", col: mutd, size: 7.5pt)
#dtxt(cx0 - 22, 336, "600", col: mutd, size: 7.5pt)
// mask A (selected, with handles)
#fillbox(330, 224, 126, 78, rgb("#20222b"), stroke: 2pt + blue)
#dtxt(360, 258, "780×470", col: rgb("#d8dbe4"), size: 8pt)
#for p in ((330, 224), (456, 224), (330, 302), (456, 302), (393, 224), (393, 302), (330, 263), (456, 263)) {
handle(p.at(0), p.at(1))
}
// mask B (unselected, colored)
#fillbox(402, 356, 104, 76, rgb("#3a1620"), stroke: 1pt + rgb("#7c3a48"))
#dtxt(430, 390, "650×450", col: rgb("#e7cdd4"), size: 8pt)
// ---- right control panel ----
#let px0 = 616
#fillbox(px0, Y0 + 12, 174, 360, panbg, radius: (right: 10pt))
#seg(px0, Y0 + 12, px0, Y0 + 372, rgb("#dcdee5"))
#let ix = px0 + 16
#dtxt(ix, 170, "Screen Mask", col: inkd, size: 13pt, weight: "bold")
#dtxt(ix, 190, "drag on the canvas to add a mask", col: mutd, size: 7.5pt)
#dtxt(ix, 210, "MASKS (2)", col: mutd, size: 8pt, weight: "bold")
// row 1 (selected)
#fillbox(ix, 226, 142, 22, rgb("#e1ecfa"), radius: 4pt)
#fillbox(ix + 4, 231, 12, 12, rgb("#20222b"), radius: 2pt)
#dtxt(ix + 22, 231, "#1 1200,300 780×470", col: inkd, size: 8pt)
#dtxt(ix + 130, 231, "×", col: rgb("#b23c3c"), size: 9pt, weight: "bold")
// row 2
#fillbox(ix + 4, 257, 12, 12, rgb("#3a1620"), radius: 2pt)
#dtxt(ix + 22, 257, "#2 640,700 650×450", col: inkd, size: 8pt)
#dtxt(ix + 130, 257, "×", col: rgb("#b23c3c"), size: 9pt, weight: "bold")
// opacity
#dtxt(ix, 286, "OPACITY 86%", col: mutd, size: 8pt, weight: "bold")
#fillbox(ix, 306, 142, 6, rgb("#d2d5dc"), radius: 3pt)
#fillbox(ix, 306, 122, 6, blue, radius: 3pt)
#fillbox(ix + 116, 301, 12, 16, white, radius: 3pt, stroke: 1pt + blue)
// click-through
#fillbox(ix, 330, 18, 18, blue, radius: 3pt)
#seg(ix + 4, 339, ix + 8, 344, white, w: 2pt)
#seg(ix + 8, 344, ix + 14, 333, white, w: 2pt)
#dtxt(ix + 26, 334, "Click-through", col: inkd, size: 9pt)
// color
#dtxt(ix, 362, "COLOR", col: mutd, size: 8pt, weight: "bold")
#let cols = (rgb("#000000"), rgb("#20202a"), rgb("#46464e"), rgb("#141e3c"), rgb("#3c1414"), rgb("#f5f5f5"))
#for (i, c) in cols.enumerate() {
fillbox(ix + i * 24, 380, 18, 18, c, radius: 3pt, stroke: if i == 0 { 2pt + blue } else { 0.7pt + rgb("#c7c9d2") })
}
// remove button
#fillbox(ix, 424, 142, 28, rgb("#d64545"), radius: 6pt)
#dtxt(ix + 26, 431, "Remove mask (Del)", col: white, size: 9pt, weight: "bold")
// ================= callouts =================
#let call(x, y, w, body, col) = place(top + left, dx: x * 1pt, dy: y * 1pt,
box(width: w * 1pt, radius: 7pt, fill: col.transparentize(88%), stroke: 0.9pt + col.transparentize(40%),
inset: 8pt, text(size: 8.5pt, fill: ink, body)))
// left callouts
#call(24, 150, 190, [*Scaled desktop preview.* Drag empty space to _create_, drag a mask to _move_, drag a handle to _resize_.], green)
#arrow(214, 178, 300, 230, col: green)
#call(24, 262, 190, [*Pixel rulers* show live virtual-screen coordinates (negative on monitors left/above the primary).], amber)
#arrow(214, 285, 320, 205, col: amber)
#call(24, 360, 190, [*Right-click a mask* to delete it. `Del` removes the selected one; `Esc` cancels a drag.], pink)
#arrow(214, 388, 402, 400, col: pink)
// right callouts
#call(824, 214, 194, [*Mask list* — every overlay. Click a row to select; the *×* removes it.], blue)
#arrow(822, 236, 760, 236, col: blue)
#call(824, 296, 194, [*Opacity* sets the layered-window alpha (8–255) in real time.], violet)
#arrow(822, 312, 760, 309, col: violet)
#call(824, 344, 194, [*Click-through* toggles `WS_EX_TRANSPARENT` so the mouse passes to whatever is behind.], green)
#arrow(822, 360, 636, 339, col: green)
#call(824, 420, 194, [*Color* recolors the mask; *Remove* deletes the selected overlay.], amber)
#arrow(822, 440, 760, 438, col: amber)
])