felix/speedoverlay
Watch
1
1
Fork
You've already forked speedoverlay
 0
Code Issues 9 Pull requests 1 Releases Activity

Add visual template editor #24

Open
Felix Klenner wants to merge 45 commits from template-editor into master
pull from: template-editor
merge into: felix:master
Conversation 0 Commits 45 Files changed 78 +7581 -1483
Felix Klenner commented 2026-10-11 06:28:37 +02:00
Owner
Copy link

This adds a visual template editor:

  • Removes need for the settings like "show unit" and so on, since they are now easily controllable through the editor
  • Improves presets with user savable presets
  • Preset sharing
  • Drag & Drop editable blocks and lines
  • Live preview
This adds a visual template editor: - Removes need for the settings like "show unit" and so on, since they are now easily controllable through the editor - Improves presets with user savable presets - Preset sharing - Drag & Drop editable blocks and lines - Live preview
The structured layouts are stored as JSON with kotlinx.serialization. JUnit is
added for unit tests.
The pulse is updated at a low frame rate and only scales the drawing of the
button, since every animation frame redrew the whole window.
The orientation listener is started and stopped, when the setting changes, and
stopped, when the overlay is closed.
The color picker selects colors with a saturation and brightness field and a
hue bar besides the hex value. Recently chosen colors and colors, which are
readable on most backgrounds, can be selected with one tap. The recent colors
are shared by all color pickers of the app.
The values of a location are collected as numbers in base units. Unavailable
values are left out instead of being replaced by a placeholder, so they can be
formatted by the code, which shows them. Date and time are formatted from the
time of the location, when they are shown. MQTT sends unavailable values, date
and time as null.
A layout consists of lines of blocks, which render themselves into styled
texts, so a new type of block only needs its own class. Layouts are stored
as JSON with the type of each block. Lines are objects, so settings of lines
can be added later without changing the format.

Text blocks show static text. Value blocks show the current value of a tag
with its own unit and decimals, optionally followed by the unit symbol. The
unit symbol is styled like the value or separately, with an adjustable gap
between value and unit.

The layout is not used yet.
Coordinate blocks show the latitude or longitude in decimal degrees, degrees
and minutes or degrees, minutes and seconds. The hemisphere can be shown as a
label instead of the sign, like the unit of a value. Rounding carries over to
the next unit, and coordinates rounded to zero have no sign.

Date and time blocks show the time of the location in the system date or time
format of the device or with a custom pattern, which follows the current
locale and time zone.
Text templates with tags like ((speed)), ((0.6)) or ((#ff0000)) are
converted to layouts. Sizes and colors apply to the following blocks until the
next tag of the same type, units and coordinate formats are taken from the tag
suffixes, and invalid tags are kept as text, so nothing gets lost. The layout,
which was configured by switches, is recreated as well.
The overlay text is rendered from a layout into spans with the size and color
of each block, instead of parsing the text template on every update. The text
template and the switches for the visible elements are converted to the
layout. Emojis are shown about as high as capital letters and centered on
them, since the color emoji font is larger than the text next to it.
The layout is stored as JSON in the preferences and replaces the text
template, the switches for the visible elements and the settings for showing
units and using integers. They are converted to a layout once and removed,
together with the settings for the text template.

The included presets are defined as layouts and follow the unit selected in
the app instead of changing it. Text templates of the previous presets are
replaced by the new versions of the presets.
The tags only provide their unit type and default decimals, since values and
coordinates are formatted by their blocks. The coordinate formats, which were
units of the coordinates, and the date and time tags are removed, so MQTT no
longer sends date and time.
The presets are previewed with the view of the overlay and plausible sample
values at the default size of the overlay, scaled to the width of the dialog,
so the previews match the overlay and follow the selected unit.
The editing model gives lines and blocks stable ids while editing and returns
a new model for each change: inserting, updating, removing, duplicating and
moving blocks, moving them one step across lines, adding and removing lines
and applying the style of a block to its line.

New blocks for a tag are values or coordinates with a smaller unit or
hemisphere. Tags with variants, like the altitude sources, are offered once.
The editor state holds the editing model with the selected block or line and
reports every change of the layout. Changes can be undone, and changes to
the same block while it is selected are undone together. New blocks are
inserted after the selection with the style of their neighbour, and empty
text blocks are removed, when they are deselected. A layout, which replaces
the whole layout, e.g. from a preset, can be undone as well.
Each type of block provides its name and its settings for the editor, so the
editor does not need to know the types of blocks:
- Text blocks edit their text.
- Values select the variant of their tag, like the source of the altitude,
  their unit, which follows the unit of the app by default, and decimals.
- Coordinates select their format with an example.
- Date and time blocks offer system formats and common patterns with
  examples, or a custom pattern, which is applied while it is valid.

The settings pass a changed copy of their block to the editor, so neither
needs to cast blocks.
The panel shows the settings of the selected block with its size and color.
Values and coordinates show their unit or hemisphere in a second tab, where it
is hidden, styled like the value or styled with its own size and color, with
an adjustable gap to the value.

Sizes are changed with a slider in steps of 0.1 or entered manually. Colors
are chosen from the default color, recent colors and the colors of the layout,
or with the color picker. The block can be deleted, duplicated or its style
applied to its whole line.
The layout is shown with sample values, the font and the background of the
overlay. Elements are added from a palette above the layout by tapping them,
either from a scrolling row or from a list with sample values. Tapping an
element or a line selects it and shows its settings, tapping it again or going
back finishes editing. The selected line can be deleted and new elements are
added to it. Changes are saved immediately and can be undone.

Moving and deleting elements is also available as accessibility actions.
Presets replace the layout in the editor, so applying them can be undone.
Elements of the layout and of the palette are dragged after a long press.
They are dropped between other elements or below the last line, which adds
a new line, and elements dropped onto the palette are deleted. A placeholder
at the drop position moves the other elements aside, and the drop position
only changes after the finger moved a bit, so the elements do not jump back
and forth. The screen scrolls, while an element is dragged near its top or
bottom edge, so all lines of the layout can be reached.
Added, moved and duplicated elements are scrolled into view, but only as far as
needed to show them, so the elements to add stay visible. Tapped elements are
already visible, so selecting them does not scroll. While the selected element
changes the height of the layout, e.g. while changing its size with the slider,
its settings stay in place, so the slider stays below the finger.
Every change of the preferences, e.g. each change of the layout, created a new
MQTT client.
The current layout, background color, transparency and font can be saved as
named preset. Saved presets are shown above the included presets and can be
shared as text and imported from the clipboard, which also accepts layouts and
text templates of previous versions. Values of imported presets are limited to
the ranges of the settings, and presets, which cannot be read, are left out
without hiding the other presets.
The settings are grouped into the look of the overlay with the layout, unit,
size, transparency, background color and font, its behavior and advanced
settings, which are rarely changed after setting up the app. The presets and
the undo button of the layout are shown next to the title of the overlay
section. Labels are shortened and aligned with the list items, the advanced
settings are always shown and the troubleshooting hint is part of them.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The bearing can be shown with 8 or 16 compass points instead of degrees, which
is easier to read at a glance. Directions have no unit symbol and no decimals.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The vertical speed can be shown in meters or feet per minute. Without a fixed
unit it uses feet per minute with miles per hour or knots, like in aviation, and
meters per second otherwise. Horizontal speed units are no longer offered for it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The included presets are named by their use: Large, Driving, Cycling, Hiking,
Track day, Flying, Marine and GPS status join Default, Digital and Icons. They
show elements, which no preset used before, like grade, vertical speed,
acceleration, date and time, hemispheres and compass directions.

Presets follow the unit selected in the app, except Marine, which shows knots.
Icons uses a dark background, which keeps its colors readable. Digital shows the
altitude of the location, which is available on all devices. Simple, Instrument
panel and Modern are replaced; their text templates are still migrated to them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
"Alternative notification style" did not say what it changes. The switch now
enables the notification with larger buttons, which is easier to use, instead of
the standard one. The stored setting is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The slider sets the opacity of the background, which "Transparency" described
the other way round. It is shown below the background color, since it belongs to
it. Instead of a dialog after changing it, a note below the slider tells, that
the overlay may be hard to see. The stored setting is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This pull request can be merged automatically.
You are not authorized to merge this pull request.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin template-editor:template-editor
git switch template-editor

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch master
git merge --no-ff template-editor
git switch template-editor
git rebase master
git switch master
git merge --ff-only template-editor
git switch template-editor
git rebase master
git switch master
git merge --no-ff template-editor
git switch master
git merge --squash template-editor
git switch master
git merge --ff-only template-editor
git switch master
git merge template-editor
git push origin master
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
Bug

   
Feature

   
Improvement
No labels
Bug
Feature
Improvement
Milestone
Clear milestone
No items
No milestone
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
felix/speedoverlay!24
No description provided.