Skip to content

Add invert filter for background imagery#12340

Open
kalucky0 wants to merge 4 commits into
openstreetmap:developfrom
kalucky0:display-control-invert
Open

Add invert filter for background imagery#12340
kalucky0 wants to merge 4 commits into
openstreetmap:developfrom
kalucky0:display-control-invert

Conversation

@kalucky0
Copy link
Copy Markdown

I've been doing some mapping lately in areas where the aerial imagery is pretty outdated, so I've had to rely on geodetic plans. The problem is those plans are mostly white, which makes it super hard to see what I'm drawing and just starts to hurt my eyes after a while.

I started adding filter: invert(1); through the browser dev tools and I figured I'd just build it in as a feature instead of doing it every time. I know the contributing guide says to open an issue for discussion first, but this felt like such a small, specific addition that I just went for it.

I tried to keep the changes as minimal as possible and stuck to the existing coding style in the files I was editing so I didn't mess up the formatting.

image

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds an “Invert” display option for background imagery so users can invert light imagery (e.g., white geodetic plans) to reduce eye strain and improve editing visibility.

Changes:

  • Adds an invert slider to the Background “Display Options” UI alongside brightness/contrast/saturation/sharpness.
  • Extends the background renderer’s CSS filter chain to include invert(...) and exposes a background.invert() setter/getter.
  • Adds an English localization string for the new option.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File Description
modules/ui/sections/background_display_options.js Adds an invert slider and refactors slider config to per-option {def,val,min,max} objects.
modules/renderer/background.js Adds _invert state, includes it in the computed CSS filter string, and exposes background.invert().
data/core.yaml Adds en.background.invert localization key.

Comment thread modules/ui/sections/background_display_options.js Outdated
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Comment thread modules/ui/sections/background_display_options.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants