Feat (WIP): Backend-Based Filters for Backgrounds

[leherkom]

Pull request

• Have you followed the guidelines in our Contributing document?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?
• Are your git commits signed with a valid GPG key?

New Feature Submissions:

1. Did you lint your code locally before submission?
2. Did you test your feature thoroughly to ensure there are no bugs?
3. Does your feature introduce breaking changes?

Please describe your changes

PoC for a new, more stable way to filter background images. This method uses Rust to decrease the brightness and add the blur on the background image and write out a filtered copy. The copy can then be used as the image source for the Kanban boards.

Uses additional storage space for saving the copy, but ensures that the backgrounds always look the same on all devices. The filters no longer rely on CSS filters applying correctly.

Overview of the general idea:

Additional context

TODOs

• Needs proper implementation in the frontend
  • Store original background and copy somewhere (the Kanri data directory?) and pass the paths into Rust
  • Invoke Rust on background and blur changes
  • Properly handle the async invocation (currently hangs until the image is done)

Considerations

• This is not the most efficient way to apply the filters since it always applies both parameters. Because the background doesn't change that often, it should be fine, but it doesn't play well with applying the filters immediately on a change on the slider. Since a gaussian blur is somewhat computationally expensive and backgrounds can be large images, I would suggest changing the dialog to include an "Apply" button rather than applying changes in real time. I experienced some lag when applying a blur to a 4k image on a Ryzen 7 7800X3D. Maybe even limit the maximum size of uploaded images so users can't crash their PC on accident.
• Note that I only invoke the backend code on the brightness slider for testing. To test, paste paths to existing image files in this part in CustomBackground.vue:

watch(bgBrightnessDebounced, (newVal, oldVal) => {
  if (newVal != oldVal) {
    emit("setBrightness", `${newVal}%`);
    // FIXME: Filter invocation currently not great
    // FIXME: Needs proper image paths
    invoke("filter_bg", {
      brightness: newVal / 100,
      blur: parseInt(bgBlur.value),
      srcPath: "",
      destPath: "",
    });
  }
});

Then open the dialog and move the brightness slider. The filtered image is not yet displayed as the background of the board, but the result can be checked out in the file explorer.

• In theory, the brightness is a linear interpolation between the original image at 100 and a black screen at 0. During testing I found that changing the brightness below ~60% turns the image really dark really quickly. This might be because of my monitor or my eyes though.

[trobonox]

Small update on my end: as part of the current rewrite going on I'm planning to add background image logic into a composable useBackgroundImage and potentially a separate component that will be responsible for rendering the background and keeping track of the values.

Since the rewrite is currently taking a bit longer than expected, until some other critical aspects are done this is postponed by a bit.
I'll keep you updated once things are moving again and if I need further help, but the Rust code looks good so far and I'm sure I can use that as a solid starting point.