feat: rework the tablet about tab, and theme both tablet diagrams - #655
Merged
Conversation
A to-scale rectangle under the spec rows, with the width beneath it, the height beside it, and the diagonal labelled on the dashed line it measures. The numbers were already in the rows above; what the drawing adds is the SHAPE. How wide or how square a tablet is reads instantly from a rectangle and not at all from "224 × 148 mm". Scaled on the longer edge to a fixed 232 DIP box, so a wide tablet and a squarer one are drawn at comparable visual weight rather than one dwarfing the other. The diagonal is built as a Geometry in the view model and bound straight to Path.Data. The obvious alternative -- a nested LineGeometry with its EndPoint bound to a Point -- relies on a non-visual element inheriting DataContext, which is exactly the kind of thing that renders blank without erroring. Hidden entirely when the tablet is not detected: there are no dimensions to draw, and the existing "Connect this tablet…" line already covers it. Verified both ways -- drawn for a connected PTH-660 at the right proportion, gone for a remembered XP-Pen with no empty box left behind. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The diagonal now runs lower-left to upper-right. BASICS becomes MODEL and keeps only the tablet's identity. The three size rows move to a new ACTIVE AREA section alongside the drawing of the same thing, so the measurements and the picture of what they measure sit together instead of the drawing trailing a list that had already moved on. Also shortened those row labels, which goes slightly beyond the ask: "Active area" / "Active area diagonal" / "Active area aspect ratio" -> "Size" / "Diagonal" / "Aspect ratio". The prefix was carrying the context back when they sat under BASICS; under a heading that says ACTIVE AREA it was repeating it three times. Easy to put back. ACTIVE AREA hides entirely when the tablet is not detected -- there is nothing to measure, and MODEL still carries the "connect this tablet" line. Verified both ways. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
TheSevenPens
force-pushed
the
feat/about-area-diagram
branch
from
September 2, 2026 14:12
323d72f to
013ac2b
Compare
MODEL / ACTIVE AREA / FEATURES were SectionLabel largetitle — 13px uppercase SemiBold on 1.5 tracking, in muted ink. Home's section headings are the opposite: 44px Light lowercase on -1.4 tracking, in primary ink. Two different answers to the same question, one app. Home's is the one the redesign is built around, so the About tab now uses it: the headings are the type, not a label stuck above the type. ACTIVE AREA's top margin goes 16 -> 26, since a 44px heading needs more air above it than a 13px one did, and each heading carries a 2px bottom margin so the fact list below lands 12px under it — the same gap Home puts between "your tablets" and its list. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
44 was Home's size, and on Home it works: the page menu is TypeNavSize, so a Display heading under it is a clean 2x jump. A tablet tab's menu is already TypePivotSize (40), so the same heading came out larger than the tab containing it — model read as a bigger deal than about, one step above it on screen. New TypeSectionSize (22) and a TextBlock.Display.section modifier put the headings a rung down: 40 tab menu, 22 section, 13 body. Same voice — Inter Light, lowercase, primary ink — just not competing with the tab. TypeSectionSize equals TypeNavSize today but is deliberately its own token: retuning the page menu should not drag section headings with it. LetterSpacing goes -1.4 -> -0.7 for this size. -1.4 was drawn for a 44px heading; carried unchanged onto one half that size it sets the letters twice as tight. Gaps come in with it — the heading-to-list gap 12 -> 6, and ACTIVE AREA's top margin 26 -> 20. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The mapping diagram was half themed and half hardcoded. Beams and the active-area outline read AccentBrush; the selected display was nailed to #6366F1 — which IS the Light theme's accent. So on any other skin the beams changed colour and the box they pointed at did not: pink beams arriving at an indigo screen. A hardcoded #22C55E bottom beam and cool fixed greys (#D9D9E3 display, #8A8A92 tablet) put five hue families on a warm pink ground. Now one hue, the theme's. The accent marks only the mapping — selected border, active-area outline, all three beams — and every other surface is ink at a low alpha, so the neutrals tint themselves to whatever ground they are on rather than staying cool grey. Selection is carried by the border, the glow and a slightly heavier fill instead of a saturated block. New InkBrush on both diagrams, bound to TextPrimaryBrush. DiagramDrawing's TabletFill/TabletBorder become Tablet(ink) so the two diagrams stay in step (#620) — ActiveAreaDiagram's tablet moves with it, which it has to, or the same tablet reads one way on one tab and another on the next. Two things only the running app showed: - Beam alpha 0x9C -> 0x60. The beams were legible against saturated boxes; against tinted neutrals they became the loudest thing in the diagram, and where the three overlap the alpha compounded into a solid wedge. - ActiveAreaDiagram's "No active-area data" was drawn in white, which worked on a #8A8A92 fill and would have vanished into the light tint replacing it. Now ink at 0xA6. Also drops a dead `Muted` brush in ScreenMappingDiagram — declared, never referenced. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This was referenced Sep 3, 2026
TheSevenPens
added a commit
that referenced
this pull request
Sep 3, 2026
Home was reworked into two columns (#653) and its About section reworked again (#655), but the manual still described the old single-flow page. HOME.md said "Below Needs Attention, you'll see a list of tablets" — Needs attention is the right-hand column now, and the tablet list is on the left under About, so nothing is below anything. It also called the tablet rows "cards", which they stopped being when Entity was de-boxed: they are hairline-separated rows with no container. Adds the About section, which the page never documented at all. USERMANUAL.md's per-page line promised "the About/Help cards". The Help card is gone — its text moved to HELP.md and the card became a "Get help" link — and About is a section with links rather than a card. HELP.md told people to find their version "in parentheses next to ABOUT", which was true for about a day. It is plain text at the end of the About paragraph now, so the instruction points there instead of naming a version-shaped string that will drift. Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
TheSevenPens
added a commit
that referenced
this pull request
Sep 3, 2026
I added these in #655. The files were edited with a script that read them as utf-8-sig and wrote them back the same way, which strips a BOM if there is one and unconditionally adds one if there is not — so three files that had none gained one. Harmless to the compiler, but it is an unintended change to the first byte of each file, and it puts a spurious first-line hunk in every future diff of them. No other file in OpenTabletArtist/ or tests/ carries a BOM, so these three were the whole of it. Content is untouched: the diff is the first line of each file and nothing else. Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Three passes over the tablet about and mapping tabs. They grew on one branch as one thing led to the next; they touch different files and can be read independently.
1 · The active area, drawn
The numbers were already in the rows above it. What the drawing adds is the shape — how wide or how square a tablet is reads instantly from a rectangle and not at all from "224 × 148 mm". Scaled on its longer edge to a fixed 232 DIP box, so a wide tablet and a squarer one are drawn at comparable visual weight. The diagonal runs lower-left to upper-right, dashed so it reads as a measurement across the area rather than an edge of it.
BASICSbecomesMODELand keeps only the tablet's identity; the three size rows move to a newACTIVE AREAsection beside the drawing. Their labels shorten fromActive area/Active area diagonal/Active area aspect ratiotoSize/Diagonal/Aspect ratio— the prefix carried context underBASICSand merely repeated the heading underACTIVE AREA.2 · Section headings that stop out-typing the tab
Those headings started as
SectionLabel largetitle— 13px uppercase SemiBold in muted ink — which is a different answer to the same question than Home's, in one app. Home's headings are 44px Inter Light lowercase in primary ink, and that is what the redesign is built around, so these moved to match.At 44 they were larger than the tab menu containing them:
aboutin the tab row isTypePivotSize(40), somodelbeneath it read as the bigger deal. Home has no such problem — its page menu isTypeNavSize(22), giving Display a clean 2× jump.New
TypeSectionSize(22) and aTextBlock.Display.sectionmodifier put them a rung down: 40 tab menu → 22 section → 13 body, same voice, no longer competing. The token equalsTypeNavSizetoday but is deliberately its own: retuning the page menu should not drag section headings with it.LetterSpacinggoes-1.4→-0.7, since-1.4was drawn for a 44px heading and sets the letters twice as tight at half that size.3 · The mapping diagram, drawn from the theme
The diagram was half themed and half hardcoded. Beams and the active-area outline read
AccentBrush; the selected display was nailed to#6366F1— which is the Light theme's accent. On any other skin the beams changed colour and the box they pointed at did not, so pink beams arrived at an indigo screen. A hardcoded#22C55Ebottom beam and cool fixed greys (#D9D9E3display,#8A8A92tablet) put five hue families on a warm pink ground.Now one hue. The accent marks only the mapping — selected border, active-area outline, all three beams — and every other surface is ink at a low alpha, so neutrals tint themselves to whatever ground they sit on. Selection is carried by the border, the glow and a slightly heavier fill rather than a saturated block.
New
InkBrushon both diagrams, bound toTextPrimaryBrush.This reaches past the mapping tab.
DiagramDrawing'sTabletFill/TabletBorderare shared by both diagrams on purpose (#620), so the same tablet does not read one way on Active Area and another on Display Mapping. Retinting one required retinting both — the Active Area tab's tablet moves with it.Two things only the running app showed:
0x9C→0x60. Legible against saturated boxes; against tinted neutrals the beams became the loudest thing in the diagram, and where the three overlap the alpha compounded into a solid wedge.ActiveAreaDiagram's "No active-area data" wasBrushes.White— fine on a#8A8A92fill, invisible against the light tint replacing it. Now ink at0xA6.For the reviewer
Geometryin the view model and bound straight toPath.Data. The obvious alternative — a nestedLineGeometrywith itsEndPointbound to aPoint— relies on a non-visual element inheritingDataContext, which renders blank without erroring.ACTIVE AREAhidden entirely for a remembered tablet with no dimensions,MODELstill carrying the "Connect this tablet…" line and no empty box left behind.AccentBrushandTextPrimaryBrushrather than from a literal.Mutedbrush inScreenMappingDiagram— declared, never referenced.Avalonia.Mediause inTabletDetailViewModel, so macOS and Linux see it here for the first time.