From 3244da620af9b017c2756c6aac634bfcf922d808 Mon Sep 17 00:00:00 2001 From: parhom Date: Sat, 24 Feb 2024 01:44:41 +0200 Subject: [PATCH 01/12] Static blur and rounding effect for dash-to-dock --- resources/ui/dash.ui | 36 ++ ...shell.extensions.blur-my-shell.gschema.xml | 5 + src/components/dash_to_dock.js | 384 ++++++++++++++---- src/conveniences/keys.js | 1 + src/effects/blur_effect.glsl | 61 +++ src/effects/blur_effect.js | 164 ++++++++ src/effects/rounding_effect.glsl | 55 +++ src/effects/rounding_effect.js | 117 ++++++ src/extension.js | 11 +- src/preferences/dash.js | 12 + 10 files changed, 756 insertions(+), 90 deletions(-) create mode 100644 src/effects/blur_effect.glsl create mode 100644 src/effects/blur_effect.js create mode 100644 src/effects/rounding_effect.glsl create mode 100644 src/effects/rounding_effect.js diff --git a/resources/ui/dash.ui b/resources/ui/dash.ui index 5eac21b9..24621043 100644 --- a/resources/ui/dash.ui +++ b/resources/ui/dash.ui @@ -21,6 +21,36 @@ + + + Static blur + Uses a static blurred image, can be used with rounding effect. + true + + + + + Round corner radius + The radius for the rounding effect. + radius_scale + + + + center + true + 200px + true + right + horizontal + 0 + radius + + + + + + + Override background @@ -70,4 +100,10 @@ Dark + + + 0 + 40 + 1 + \ No newline at end of file diff --git a/schemas/org.gnome.shell.extensions.blur-my-shell.gschema.xml b/schemas/org.gnome.shell.extensions.blur-my-shell.gschema.xml index 2ae8267d..de7b046a 100644 --- a/schemas/org.gnome.shell.extensions.blur-my-shell.gschema.xml +++ b/schemas/org.gnome.shell.extensions.blur-my-shell.gschema.xml @@ -269,6 +269,11 @@ false Boolean, whether to disable blur from this component when opening the overview or not + + + 0 + Radius for corner rounding effect + diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index 3c56588e..3718b0e4 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -1,9 +1,13 @@ import St from 'gi://St'; import Shell from 'gi://Shell'; +import Meta from 'gi://Meta'; +import Mtk from 'gi://Mtk'; import * as Main from 'resource:///org/gnome/shell/ui/main.js'; const Signals = imports.signals; import { PaintSignals } from '../effects/paint_signals.js'; +import { BlurEffect } from '../effects/blur_effect.js'; +import { RoundingEffect } from '../effects/rounding_effect.js'; const DASH_STYLES = [ "transparent-dash", @@ -12,19 +16,39 @@ const DASH_STYLES = [ ]; +// An helper function to find the monitor in which an actor is situated, +/// there might be a pre-existing function in GLib already +function find_monitor_for(actor) { + let extents = actor.get_transformed_extents(); + let rect = new Mtk.Rectangle({ + x: extents.get_x(), + y: extents.get_y(), + width: extents.get_width(), + height: extents.get_height(), + }); + + let index = global.display.get_monitor_index_for_rect(rect); + + return Main.layoutManager.monitors[index]; +} + + /// This type of object is created for every dash found, and talks to the main /// DashBlur thanks to signals. /// /// This allows to dynamically track the created dashes for each screen. class DashInfos { - constructor(dash_blur, dash, background_parent, effect, settings) { + constructor(dash_blur, dash, dash_container, dash_background, background, background_parent, effects) { // the parent DashBlur object, to communicate this.dash_blur = dash_blur; + this.dash_container = dash_container; // the blurred dash this.dash = dash; + this.dash_background = dash_background; this.background_parent = background_parent; - this.effect = effect; - this.settings = settings; + this.background = background; + this.effects = effects; + this.settings = dash_blur.settings; this.old_style = this.dash._background.style; dash_blur.connections.connect(dash_blur, 'remove-dashes', () => { @@ -38,11 +62,22 @@ class DashInfos { }); dash_blur.connections.connect(dash_blur, 'update-sigma', () => { - this.effect.sigma = this.dash_blur.sigma; + this.effects[0].sigma = this.dash_blur.sigma; + if(this.dash_blur.is_static) + this.effects[1].sigma = this.dash_blur.sigma; }); dash_blur.connections.connect(dash_blur, 'update-brightness', () => { - this.effect.brightness = this.dash_blur.brightness; + this.effects[0].brightness = this.dash_blur.brightness; + if(this.dash_blur.is_static) + this.effects[1].brightness = this.dash_blur.brightness; + }); + + dash_blur.connections.connect(dash_blur, 'update-radius', () => { + if(this.dash_blur.is_static) { + let monitor = find_monitor_for(this.dash); + this.effects[2].radius = this.dash_blur.radius * monitor.geometry_scale; + } }); dash_blur.connections.connect(dash_blur, 'override-background', () => { @@ -66,12 +101,102 @@ class DashInfos { }); dash_blur.connections.connect(dash_blur, 'show', () => { - this.effect.sigma = this.dash_blur.sigma; + if(this.dash_blur.is_static) + this.background_parent.show(); + else + this.effects[0].sigma = this.dash_blur.sigma; }); dash_blur.connections.connect(dash_blur, 'hide', () => { - this.effect.sigma = 0; + if(this.dash_blur.is_static) + this.background_parent.hide(); + else + this.effects[0].sigma = 0; + }); + + dash_blur.connections.connect(dash_blur, 'update-wallpaper', () => { + if(this.dash_blur.is_static) { + let bg = Main.layoutManager._backgroundGroup.get_child_at_index( + Main.layoutManager.monitors.length + - find_monitor_for(this.dash).index - 1 + ); + if (bg) { + this.background.content.set({ + background: bg.get_content().background + }); + this._log('bg set'); + } else + this._warn("could not get background for dash-to-dock"); + } }); + + dash_blur.connections.connect(dash_blur, 'update-size', () => { + this.background.width = this.dash_background.width; + this.background.height = this.dash_background.height; + + if(this.dash_blur.is_static) { + var x, y; + [x, y] = this.get_dash_position(this.dash_container, this.dash_background); + + if(this.dash_container.get_style_class_name().includes("left")) { + this.background.x = 0; + } else { + this.background.x = -x; + } + + if(this.dash_container.get_style_class_name().includes("top")) { + this.background.y = 0; + } else { + this.background.y = -y; + } + + this.effects.forEach((effect) => { + effect.width = this.dash_background.width; + }); + + this.effects.forEach((effect) => { + effect.height = this.dash_background.height; + }); + + this.background.set_clip(x, y, this.dash_background.width, this.dash_background.height); + } else { + this.background.y = this.dash_background.y; + this.background.x = this.dash_background.x; + } + }); + + dash_blur.connections.connect(dash_blur, 'change-blur-type', () => { + this.background_parent.remove_child(this.background); + this.effects.forEach((effect) => { + effect.get_actor()?.remove_effect(effect); + }); + let [background, effects] = this.dash_blur.add_blur(this.dash, this.dash_background, this.dash_container); + this.background = background; + this.effects = effects; + this.background_parent.add_child(this.background); + }); + } + + get_dash_position(dash_container, dash_background) { + var x, y; + + let monitor = find_monitor_for(dash_container); + + if(dash_container.get_style_class_name().includes("top")) { + x = (monitor.width - dash_background.width)/2; + y = dash_background.y; + } else if(dash_container.get_style_class_name().includes("bottom")) { + x = (monitor.width - dash_background.width)/2; + y = monitor.height - dash_container.height; + } else if(dash_container.get_style_class_name().includes("left")) { + x = dash_background.x; + y = (monitor.height - dash_background.height + Main.panel.height)/2; + } else if(dash_container.get_style_class_name().includes("right")) { + x = monitor.width - dash_container.width; + y = (monitor.height - dash_background.height + Main.panel.height)/2; + } + + return [x, y]; } _log(str) { @@ -92,6 +217,8 @@ export const DashBlur = class DashBlur { this.brightness = this.settings.dash_to_dock.CUSTOMIZE ? this.settings.dash_to_dock.BRIGHTNESS : this.settings.BRIGHTNESS; + this.radius = this.settings.dash_to_dock.RADIUS; + this.is_static = this.settings.dash_to_dock.STATIC_BLUR; this.enabled = false; } @@ -143,13 +270,6 @@ export const DashBlur = class DashBlur { // Blurs the dash and returns a `DashInfos` containing its information blur_dash_from(dash, dash_container) { - // the effect to be applied - let effect = new Shell.BlurEffect({ - brightness: this.brightness, - sigma: this.sigma, - mode: Shell.BlurMode.BACKGROUND - }); - // dash background parent, not visible let background_parent = new St.Widget({ name: 'dash-blurred-background-parent', @@ -158,99 +278,175 @@ export const DashBlur = class DashBlur { height: 0 }); - // dash background widget - let background = new St.Widget({ - name: 'dash-blurred-background', - style_class: 'dash-blurred-background', - x: 0, - y: dash_container._slider.y, - width: dash.width, - height: dash.height, + // finally blur the dash + let dash_background = dash.get_children().find(child => { + return child.get_style_class_name() === 'dash-background'; }); + + let [background, effects] = this.add_blur(dash, dash_background, dash_container); + + this.update_size(); + this.update_wallpaper(); // updates size and position on change - this.connections.connect(dash_container._slider, 'notify::y', _ => { - background.y = dash_container._slider.y; - }); this.connections.connect(dash, 'notify::width', _ => { - background.width = dash.width; + this.update_size(); + this.update_wallpaper(); }); this.connections.connect(dash, 'notify::height', _ => { - background.height = dash.height; + this.update_size(); + this.update_wallpaper(); }); - - // add the widget to the dash - background.add_effect(effect); + background_parent.add_child(background); dash.get_parent().insert_child_at_index(background_parent, 0); - // HACK - // - //`Shell.BlurEffect` does not repaint when shadows are under it. [1] - // - // This does not entirely fix this bug (shadows caused by windows - // still cause artifacts), but it prevents the shadows of the panel - // buttons to cause artifacts on the panel itself - // - // [1]: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/2857 - - if (this.settings.HACKS_LEVEL === 1) { - this._log("dash hack level 1"); - this.paint_signals.disconnect_all(); - - let rp = () => { - effect.queue_repaint(); - }; - - dash._box.get_children().forEach((icon) => { - try { - let zone = icon.get_child_at_index(0); - - this.connections.connect(zone, [ - 'enter-event', 'leave-event', 'button-press-event' - ], rp); - } catch (e) { - this._warn(`${e}, continuing`); - } - }); + // create infos + let infos = new DashInfos( + this, + dash, + dash_container, + dash_background, + background, + background_parent, + effects + ); - this.connections.connect(dash._box, 'actor-added', (_, actor) => { - try { - let zone = actor.get_child_at_index(0); + // update the background + this.update_background(); - this.connections.connect(zone, [ - 'enter-event', 'leave-event', 'button-press-event' - ], rp); - } catch (e) { - this._warn(`${e}, continuing`); - } + // returns infos + return infos; + } + + add_blur(dash, dash_background, dash_container) { + let monitor = find_monitor_for(dash); + + // dash background widget + let background = this.is_static + ? new Meta.BackgroundActor({ + meta_display: global.display, + monitor: monitor.index,}) + : new St.Widget({ + name: 'dash-blurred-background', + style_class: 'dash-blurred-background', + x: 0, + y: dash_container._slider.y, + width: dash_background.width, + height: dash_background.height, }); - let show_apps = dash._showAppsIcon; + // the effects to be applied + if(this.is_static) { + let effect_vert = new BlurEffect({ + width: dash_background.width, + height: dash_background.height, + sigma: this.sigma, + brightness: this.brightness, + direction: 0 + }); + let effect_hor = new BlurEffect({ + width: dash_background.width, + height: dash_background.height, + sigma: this.sigma, + brightness: this.brightness, + direction: 1 + }); + let effect_round = new RoundingEffect({ + width: dash_background.width, + height: dash_background.height, + radius: this.radius * monitor.geometry_scale + }); - this.connections.connect(show_apps, [ - 'enter-event', 'leave-event', 'button-press-event' - ], rp); + // connect to every background change (even without changing image) + // FIXME this signal is fired very often, so we should find another one + // fired only when necessary (but that still catches all cases) + this.connections.connect( + Main.layoutManager._backgroundGroup, + 'notify', + _ => this.update_wallpaper() + ); - this.connections.connect(dash, 'leave-event', rp); - } else if (this.settings.HACKS_LEVEL === 2) { - this._log("dash hack level 2"); + background.add_effect(effect_round); + background.add_effect(effect_vert); + background.add_effect(effect_hor); - this.paint_signals.connect(background, effect); + return [background, [effect_vert, effect_hor, effect_round]]; } else { - this.paint_signals.disconnect_all(); - } - - // create infos - let infos = new DashInfos( - this, dash, background_parent, effect, this.settings - ); + let effect = new Shell.BlurEffect({ + brightness: this.brightness, + sigma: this.sigma, + mode: Shell.BlurMode.BACKGROUND + }); - // update the background - this.update_background(); + background.add_effect(effect); + + // HACK + // + //`Shell.BlurEffect` does not repaint when shadows are under it. [1] + // + // This does not entirely fix this bug (shadows caused by windows + // still cause artifacts), but it prevents the shadows of the panel + // buttons to cause artifacts on the panel itself + // + // [1]: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/2857 + + if (this.settings.HACKS_LEVEL === 1) { + this._log("dash hack level 1"); + this.paint_signals.disconnect_all(); + + let rp = () => { + effect.queue_repaint(); + }; + + dash._box.get_children().forEach((icon) => { + try { + let zone = icon.get_child_at_index(0); + + this.connections.connect(zone, [ + 'enter-event', 'leave-event', 'button-press-event' + ], rp); + } catch (e) { + this._warn(`${e}, continuing`); + } + }); + + this.connections.connect(dash._box, 'actor-added', (_, actor) => { + try { + let zone = actor.get_child_at_index(0); + + this.connections.connect(zone, [ + 'enter-event', 'leave-event', 'button-press-event' + ], rp); + } catch (e) { + this._warn(`${e}, continuing`); + } + }); + + let show_apps = dash._showAppsIcon; + + this.connections.connect(show_apps, [ + 'enter-event', 'leave-event', 'button-press-event' + ], rp); + + this.connections.connect(dash, 'leave-event', rp); + } else if (this.settings.HACKS_LEVEL === 2) { + this._log("dash hack level 2"); + + this.paint_signals.connect(background, effect); + } else { + this.paint_signals.disconnect_all(); + } + + return [background, [effect]]; + } + } - // returns infos - return infos; + change_blur_type() { + this.is_static = this.settings.dash_to_dock.STATIC_BLUR; + this.emit('change-blur-type', true); + this.update_size(); + this.update_wallpaper(); } /// Connect when overview if opened/closed to hide/show the blur accordingly @@ -276,6 +472,15 @@ export const DashBlur = class DashBlur { this.emit('reset-background', true); } + update_wallpaper() { + if (this.is_static) + this.emit('update-wallpaper', true); + } + + update_size() { + this.emit('update-size', true); + } + set_sigma(sigma) { this.sigma = sigma; this.emit('update-sigma', true); @@ -286,6 +491,11 @@ export const DashBlur = class DashBlur { this.emit('update-brightness', true); } + set_radius(radius) { + this.radius = radius; + this.emit('update-radius', true); + } + // not implemented for dynamic blur set_color(c) { } set_noise_amount(n) { } diff --git a/src/conveniences/keys.js b/src/conveniences/keys.js index 115bb206..103693b9 100644 --- a/src/conveniences/keys.js +++ b/src/conveniences/keys.js @@ -68,6 +68,7 @@ export const Keys = [ { type: Type.B, name: "unblur-in-overview" }, { type: Type.B, name: "override-background" }, { type: Type.I, name: "style-dash-to-dock" }, + { type: Type.I, name: "radius" }, ] }, { diff --git a/src/effects/blur_effect.glsl b/src/effects/blur_effect.glsl new file mode 100644 index 00000000..fadc3f8c --- /dev/null +++ b/src/effects/blur_effect.glsl @@ -0,0 +1,61 @@ +uniform sampler2D tex; +uniform int width; +uniform int height; +uniform int dir; +uniform float radius; +uniform float brightness; + +float radius_band = 5; +int band = int(radius/radius_band); +int elements; +float[31] weights; + +/* +** initWeights gets executed on every pixel instance of the shader. Because of the parallel execution of the main instances every pixel instance gets a copy of the global variables, +** which also means that those instances can't change the value of the global variable. +*/ + +void initWeights() { + if(band == 1) { + elements = 11; + weights = float[](0.0877142386894625, 0.08571761885514498, 0.0799963364506413, 0.07129680990889681, 0.06068342691594618, 0.049325341222694934, 0.03828865390084329, 0.02838377126232145, 0.020094171210084107, 0.013585327059749568, 0.008771423868946249, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); + } else if(band == 2) { + elements = 16; + weights = float[](0.0586256816448148, 0.058028782785674825, 0.056274303376764534, 0.05346725712469989, 0.04977104899549517, 0.04539173617000566, 0.0405590622531167, 0.035506685021076116, 0.030453938115135727, 0.025591038213833354, 0.02106897757449955, 0.016994567929708503, 0.01343036777015676, 0.010398646009483488, 0.007888179673460876, 0.005862568164481478, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); + } else if(band == 3) { + elements = 21; + weights = float[](0.0440280172323652, 0.043775299669453475, 0.04302581720435111, 0.04180508663519469, 0.040154028951265845, 0.038126692151510426, 0.03578731597266526, 0.033206960669429846, 0.03045994590950288, 0.02762034683326305, 0.024758773555951772, 0.021939621342538233, 0.019218926584070265, 0.016642904755081178, 0.014247187103581744, 0.01205671868468385, 0.01008623604931275, 0.00834121139372131, 0.006819132478725233, 0.005510983716277974, 0.004402801723236519, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); + } else if(band == 4) { + elements = 26; + weights = float[](0.035251311548426645, 0.03512167985428671, 0.03473563797921578, 0.034101641135581943, 0.03323343864771841, 0.032149578233677256, 0.030872747420843664, 0.02942898474365488, 0.02784679898571322, 0.026156237964777153, 0.02438794909471392, 0.022572272253890677, 0.0207384015755935, 0.01891364702785695, 0.017122819549254917, 0.01538775559811883, 0.013726988815983374, 0.012155568634473212, 0.010685018534585205, 0.009323420668711375, 0.00807560893439296, 0.006943449478165318, 0.005926186022712806, 0.00502082725973912, 0.004222554657282778, 0.0035251311548426634, 0.0, 0.0, 0.0, 0.0, 0.0); + } else if(band == 5) { + elements = 31; + weights = float[](0.02939238997940825, 0.0293172877821358, 0.02909313061808605, 0.028723337500726337, 0.02821351026143142, 0.02757129236128949, 0.026806178255796353, 0.025929279956616785, 0.024953058808301565, 0.023891031518258905, 0.022757460108256487, 0.02156703567869248, 0.020334565697082033, 0.019074673963800762, 0.017801521513017445, 0.01652855553153197, 0.015268291990392636, 0.014032136157813015, 0.012830243573388909, 0.011671422487248699, 0.010563077271987156, 0.009511190959338476, 0.008520343885258975, 0.007593764480959185, 0.0067334075441362, 0.005940054871217317, 0.0052134329221157774, 0.004552342206966415, 0.003954793303635894, 0.0034181448028725646, 0.0029392389979408244); + } else { // default + elements = 6; + weights = float[](0.1742497602122148, 0.15891767006870802, 0.12055138079000842, 0.07606277909668431, 0.03991831391727037, 0.017424976021221478, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); + } +} + +vec2 step_size = vec2((mod(radius, radius_band)/15.0 + 1.0)/(4/3*float(width)), (mod(radius, radius_band)/15.0 + 1.0)/(4/3*float(height))); + +vec2 direction = vec2(dir, (1.0-dir)); + +void main(void) { + vec2 pos = cogl_tex_coord_in[0].xy; + + if(radius == 0.0) { + cogl_color_out = texture2D(tex, pos); + } else { + initWeights(); + + cogl_color_out = texture2D(tex, pos) * weights[0]; + for(int t = 1; t < elements; t++) { + cogl_color_out += texture2D(tex, pos + t * step_size * direction) * weights[t]; + cogl_color_out += texture2D(tex, pos - t * step_size * direction) * weights[t]; + } + + cogl_color_out.a = 1.0; + cogl_color_out.rgb *= brightness; + } +} \ No newline at end of file diff --git a/src/effects/blur_effect.js b/src/effects/blur_effect.js new file mode 100644 index 00000000..f82d34e5 --- /dev/null +++ b/src/effects/blur_effect.js @@ -0,0 +1,164 @@ +import GLib from 'gi://GLib'; +import GObject from 'gi://GObject'; +import Clutter from 'gi://Clutter'; +import Shell from 'gi://Shell'; + +const SHADER_PATH = GLib.filename_from_uri(GLib.uri_resolve_relative(import.meta.url, 'blur_effect.glsl', GLib.UriFlags.NONE))[0]; + + +const get_shader_source = _ => { + try { + return Shell.get_file_contents_utf8_sync(SHADER_PATH); + } catch (e) { + console.warn(`[Blur my Shell] error loading shader from ${SHADER_PATH}: ${e}`); + return null; + } +}; + +export const BlurEffect = new GObject.registerClass({ + GTypeName: "BlurEffect", + Properties: { + 'width': GObject.ParamSpec.double( + `width`, + `Width`, + `Actor width`, + GObject.ParamFlags.READWRITE, + 0.0, Number.MAX_SAFE_INTEGER, + 0.0, + ), + 'height': GObject.ParamSpec.double( + `height`, + `Height`, + `Actor height`, + GObject.ParamFlags.READWRITE, + 0.0, Number.MAX_SAFE_INTEGER, + 0.0, + ), + 'sigma': GObject.ParamSpec.double( + `sigma`, + `sigma`, + `Blur sigma`, + GObject.ParamFlags.READWRITE, + 0.0, 200.0, + 200.0, + ), + 'brightness': GObject.ParamSpec.double( + `brightness`, + `Brightness`, + `Blur brightness`, + GObject.ParamFlags.READWRITE, + 0.0, 1.0, + 0.6, + ), + 'direction': GObject.ParamSpec.double( + `direction`, + `Direction`, + `Blur direction`, + GObject.ParamFlags.READWRITE, + 0.0, 1.0, + 0.0, + ), + } +}, class BlurEffect extends Clutter.ShaderEffect { + constructor(params, settings) { + super(params); + + this._width = null; + this._height = null; + this._sigma = null; + this._brightness = null; + this._direction = null; + + this._static = true; + this._settings = settings; + + if (params.width) + this.width = params.width; + if (params.height) + this.height = params.height; + if (params.sigma) + this.sigma = params.sigma; + if (params.brightness) + this.brightness = params.brightness; + if (params.direction) + this.direction = params.direction; + + // set shader source + this._source = get_shader_source(); + if (this._source) + this.set_shader_source(this._source); + } + + get width() { + return this._width; + } + + set width(value) { + if (this._width !== value) { + this._width = value; + + this.set_uniform_value('width', this._width); + } + } + + get height() { + return this._height; + } + + set height(value) { + if (this._height !== value) { + this._height = value; + + this.set_uniform_value('height', this._height); + } + } + + get sigma() { + return this._sigma; + } + + set sigma(value) { + value = 30*value/200; + if (this._sigma !== value) { + this._sigma = value; + + this.set_uniform_value('radius', parseFloat(this._sigma-1e-6)); + } + } + + get brightness() { + return this._brightness; + } + + set brightness(value) { + if (this._brightness !== value) { + this._brightness = value; + + this.set_uniform_value('brightness', parseFloat(this._brightness-1e-6)); + } + } + + get direction() { + return this._direction; + } + + set direction(value) { + if (this._direction !== value) { + this._direction = value; + + this.set_uniform_value('dir', this._direction); + } + } + + + vfunc_paint_target(paint_node = null, paint_context = null) { + this.set_uniform_value("tex", 0); + + if (paint_node && paint_context) + super.vfunc_paint_target(paint_node, paint_context); + else if (paint_node) + super.vfunc_paint_target(paint_node); + else + super.vfunc_paint_target(); + } +}); \ No newline at end of file diff --git a/src/effects/rounding_effect.glsl b/src/effects/rounding_effect.glsl new file mode 100644 index 00000000..c9e4284c --- /dev/null +++ b/src/effects/rounding_effect.glsl @@ -0,0 +1,55 @@ +uniform sampler2D tex; +uniform float radius; +uniform float width; +uniform float height; + +float circleBounds(vec2 p, vec2 center, float clip_radius) +{ + vec2 delta = p - vec2(center.x, center.y); + float dist_squared = dot(delta, delta); + + float outer_radius = clip_radius + 0.5; + if(dist_squared >= (outer_radius * outer_radius)) + return 0.0; + + float inner_radius = clip_radius - 0.5; + if(dist_squared <= (inner_radius * inner_radius)) + return 1.0; + + return outer_radius - sqrt(dist_squared); +} + +vec4 shapeCorner(vec4 pixel, vec2 p, vec2 center, float clip_radius) +{ + float alpha = circleBounds(p, center, clip_radius); + return vec4(pixel.rgb*alpha, min(alpha, pixel.a)); +} + +vec2 pixel_coord = cogl_tex_coord_in[0].xy; +vec2 pos = pixel_coord * vec2(width, height); + +void main(void) { + vec4 outColor = texture2D(tex, pixel_coord); + + //Left side + if (pos.x < radius) { + //Top left corner + if (pos.y < radius) { + outColor = shapeCorner(outColor, pos, vec2(radius, radius), radius); + //Bottom left corner + } else if (pos.y > height - radius) { + outColor = shapeCorner(outColor, pos, vec2(radius, height - radius), radius); + } + //Right side + } else if (pos.x > width - radius) { + //Top right corner + if (pos.y < radius) { + outColor = shapeCorner(outColor, pos, vec2(width - radius, radius), radius); + //Bottom right corner + } else if (pos.y > height - radius) { + outColor = shapeCorner(outColor, pos, vec2(width - radius, height - radius), radius); + } + } + + cogl_color_out = outColor; +} \ No newline at end of file diff --git a/src/effects/rounding_effect.js b/src/effects/rounding_effect.js new file mode 100644 index 00000000..59293d75 --- /dev/null +++ b/src/effects/rounding_effect.js @@ -0,0 +1,117 @@ +import GLib from 'gi://GLib'; +import GObject from 'gi://GObject'; +import Clutter from 'gi://Clutter'; +import Shell from 'gi://Shell'; + +const SHADER_PATH = GLib.filename_from_uri(GLib.uri_resolve_relative(import.meta.url, 'rounding_effect.glsl', GLib.UriFlags.NONE))[0]; + + +const get_shader_source = _ => { + try { + return Shell.get_file_contents_utf8_sync(SHADER_PATH); + } catch (e) { + console.warn(`[Blur my Shell] error loading shader from ${SHADER_PATH}: ${e}`); + return null; + } +}; + +export const RoundingEffect = new GObject.registerClass({ + GTypeName: "RoundingEffect", + Properties: { + 'width': GObject.ParamSpec.double( + `width`, + `Width`, + `Width`, + GObject.ParamFlags.READWRITE, + 0.0, Number.MAX_SAFE_INTEGER, + 0.0, + ), + 'height': GObject.ParamSpec.double( + `height`, + `Height`, + `Height`, + GObject.ParamFlags.READWRITE, + 0.0, Number.MAX_SAFE_INTEGER, + 0.0, + ), + 'radius': GObject.ParamSpec.double( + `radius`, + `Radius`, + `Radius`, + GObject.ParamFlags.READWRITE, + 0.0, Number.MAX_SAFE_INTEGER, + 0.0, + ), + } +}, class RoundingEffect extends Clutter.ShaderEffect { + constructor(params, settings) { + super(params); + + this._width = null; + this._height = null; + this._radius = null; + + this._static = true; + this._settings = settings; + + if (params.width) + this.width = params.width; + if (params.height) + this.height = params.height; + if (params.radius) + this.radius = params.radius; + + // set shader source + this._source = get_shader_source(); + if (this._source) + this.set_shader_source(this._source); + } + + get width() { + return this._width; + } + + set width(value) { + if (this._width !== value) { + this._width = value; + + this.set_uniform_value('width', parseFloat(this._width - 1e-6)); + } + } + + get height() { + return this._height; + } + + set height(value) { + if (this._height !== value) { + this._height = value; + + this.set_uniform_value('height', parseFloat(this._height - 1e-6)); + } + } + + get radius() { + return this._radius; + } + + set radius(value) { + if (this._radius !== value) { + this._radius = value; + + this.set_uniform_value('radius', parseFloat(this._radius - 1e-6)); + } + } + + + vfunc_paint_target(paint_node = null, paint_context = null) { + this.set_uniform_value("tex", 0); + + if (paint_node && paint_context) + super.vfunc_paint_target(paint_node, paint_context); + else if (paint_node) + super.vfunc_paint_target(paint_node); + else + super.vfunc_paint_target(); + } +}); \ No newline at end of file diff --git a/src/extension.js b/src/extension.js index fb933aa4..26fc4497 100644 --- a/src/extension.js +++ b/src/extension.js @@ -364,11 +364,16 @@ export default class BlurMyShell extends Extension { } }); - // TODO implement static blur for dash // static blur toggled on/off this._settings.dash_to_dock.STATIC_BLUR_changed(() => { - //if (this._settings.dash_to_dock.BLUR) - // this._dash_to_dock_blur.change_blur_type(); + if (this._settings.dash_to_dock.BLUR) + this._dash_to_dock_blur.change_blur_type(); + }); + + // dash-to-dock corner radius changed + this._settings.dash_to_dock.RADIUS_changed(() => { + if (this._settings.dash_to_dock.STATIC_BLUR) + this._dash_to_dock_blur.set_radius(this._settings.dash_to_dock.RADIUS); }); // dash-to-dock override background toggled on/off diff --git a/src/preferences/dash.js b/src/preferences/dash.js index ef8d9ed2..35ef348f 100644 --- a/src/preferences/dash.js +++ b/src/preferences/dash.js @@ -10,6 +10,8 @@ export const Dash = GObject.registerClass({ InternalChildren: [ 'blur', 'customize', + 'static_blur', + 'radius', 'override_background', 'style_dash_to_dock', 'unblur_in_overview' @@ -24,6 +26,16 @@ export const Dash = GObject.registerClass({ 'blur', this._blur, 'active', Gio.SettingsBindFlags.DEFAULT ); + this.preferences.dash_to_dock.settings.bind( + 'static-blur', + this._static_blur, 'enable-expansion', + Gio.SettingsBindFlags.DEFAULT + ); + this.preferences.dash_to_dock.settings.bind( + 'radius', + this._radius, 'value', + Gio.SettingsBindFlags.DEFAULT + ); this.preferences.dash_to_dock.settings.bind( 'override-background', this._override_background, 'enable-expansion', From 3dea67ef03447dfeedcd31bb5cd0de3e0b6cda78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Hamy?= Date: Mon, 26 Feb 2024 11:45:29 +0100 Subject: [PATCH 02/12] Fix some bugs and format --- Makefile | 2 +- resources/ui/dash.ui | 27 ++++++++++----- src/components/dash_to_dock.js | 58 ++++++++++++++++++-------------- src/components/panel.js | 2 +- src/effects/blur_effect.glsl | 34 +++++++++---------- src/effects/blur_effect.js | 22 +++++++----- src/effects/rounding_effect.glsl | 34 +++++++++---------- src/effects/rounding_effect.js | 6 ++-- 8 files changed, 101 insertions(+), 84 deletions(-) diff --git a/Makefile b/Makefile index 8e2080b3..a792075e 100644 --- a/Makefile +++ b/Makefile @@ -46,7 +46,7 @@ pot: test-shell: install env GNOME_SHELL_SLOWDOWN_FACTOR=2 \ MUTTER_DEBUG_DUMMY_MODE_SPECS=1500x1000 \ - MUTTER_DEBUG_DUMMY_MONITOR_SCALES=1 \ + MUTTER_DEBUG_DUMMY_MONITOR_SCALES=3 \ dbus-run-session -- gnome-shell --nested --wayland diff --git a/resources/ui/dash.ui b/resources/ui/dash.ui index 24621043..a5e57fd3 100644 --- a/resources/ui/dash.ui +++ b/resources/ui/dash.ui @@ -8,7 +8,8 @@ Dash to Dock blur - Blur the background of the Dash to Dock extension, if it is used. + Blur the background of the Dash to Dock + extension, if it is used. center @@ -17,16 +18,19 @@ - + Static blur - Uses a static blurred image, can be used with rounding effect. + Uses a static blurred image, can be used + with rounding effect. true - + @@ -54,14 +58,17 @@ Override background - Makes the background either transparent or semi-transparent, disable this to use Dash to Dock preferences instead. + Makes the background either transparent or + semi-transparent, disable this to use Dash to Dock preferences instead. true - + Background style - The transparent/semi-transparent style for the dock background. + The transparent/semi-transparent style + for the dock background. style_dash_to_dock @@ -78,9 +85,11 @@ Disable in overview - Disables the blur from Dash to Dock when entering the overview. + Disables the blur from Dash to Dock when + entering the overview. unblur_in_overview - + diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index 3718b0e4..618e36aa 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -63,18 +63,18 @@ class DashInfos { dash_blur.connections.connect(dash_blur, 'update-sigma', () => { this.effects[0].sigma = this.dash_blur.sigma; - if(this.dash_blur.is_static) + if (this.dash_blur.is_static) this.effects[1].sigma = this.dash_blur.sigma; }); dash_blur.connections.connect(dash_blur, 'update-brightness', () => { this.effects[0].brightness = this.dash_blur.brightness; - if(this.dash_blur.is_static) + if (this.dash_blur.is_static) this.effects[1].brightness = this.dash_blur.brightness; }); dash_blur.connections.connect(dash_blur, 'update-radius', () => { - if(this.dash_blur.is_static) { + if (this.dash_blur.is_static) { let monitor = find_monitor_for(this.dash); this.effects[2].radius = this.dash_blur.radius * monitor.geometry_scale; } @@ -101,26 +101,26 @@ class DashInfos { }); dash_blur.connections.connect(dash_blur, 'show', () => { - if(this.dash_blur.is_static) + if (this.dash_blur.is_static) this.background_parent.show(); else this.effects[0].sigma = this.dash_blur.sigma; }); dash_blur.connections.connect(dash_blur, 'hide', () => { - if(this.dash_blur.is_static) + if (this.dash_blur.is_static) this.background_parent.hide(); else this.effects[0].sigma = 0; }); dash_blur.connections.connect(dash_blur, 'update-wallpaper', () => { - if(this.dash_blur.is_static) { + if (this.dash_blur.is_static) { let bg = Main.layoutManager._backgroundGroup.get_child_at_index( Main.layoutManager.monitors.length - find_monitor_for(this.dash).index - 1 ); - if (bg) { + if (bg && bg.get_content()) { this.background.content.set({ background: bg.get_content().background }); @@ -134,17 +134,17 @@ class DashInfos { this.background.width = this.dash_background.width; this.background.height = this.dash_background.height; - if(this.dash_blur.is_static) { + if (this.dash_blur.is_static) { var x, y; [x, y] = this.get_dash_position(this.dash_container, this.dash_background); - if(this.dash_container.get_style_class_name().includes("left")) { + if (this.dash_container.get_style_class_name().includes("left")) { this.background.x = 0; } else { this.background.x = -x; } - if(this.dash_container.get_style_class_name().includes("top")) { + if (this.dash_container.get_style_class_name().includes("top")) { this.background.y = 0; } else { this.background.y = -y; @@ -182,18 +182,18 @@ class DashInfos { let monitor = find_monitor_for(dash_container); - if(dash_container.get_style_class_name().includes("top")) { - x = (monitor.width - dash_background.width)/2; + if (dash_container.get_style_class_name().includes("top")) { + x = (monitor.width - dash_background.width) / 2; y = dash_background.y; - } else if(dash_container.get_style_class_name().includes("bottom")) { - x = (monitor.width - dash_background.width)/2; + } else if (dash_container.get_style_class_name().includes("bottom")) { + x = (monitor.width - dash_background.width) / 2; y = monitor.height - dash_container.height; - } else if(dash_container.get_style_class_name().includes("left")) { + } else if (dash_container.get_style_class_name().includes("left")) { x = dash_background.x; - y = (monitor.height - dash_background.height + Main.panel.height)/2; - } else if(dash_container.get_style_class_name().includes("right")) { + y = (monitor.height - dash_background.height + Main.panel.height) / 2; + } else if (dash_container.get_style_class_name().includes("right")) { x = monitor.width - dash_container.width; - y = (monitor.height - dash_background.height + Main.panel.height)/2; + y = (monitor.height - dash_background.height + Main.panel.height) / 2; } return [x, y]; @@ -203,6 +203,11 @@ class DashInfos { if (this.settings.DEBUG) console.log(`[Blur my Shell > dash] ${str}`); } + + _warn(str) { + if (this.settings.DEBUG) + console.warn(`[Blur my Shell > dash] ${str}`); + } } export const DashBlur = class DashBlur { @@ -282,7 +287,7 @@ export const DashBlur = class DashBlur { let dash_background = dash.get_children().find(child => { return child.get_style_class_name() === 'dash-background'; }); - + let [background, effects] = this.add_blur(dash, dash_background, dash_container); this.update_size(); @@ -297,18 +302,18 @@ export const DashBlur = class DashBlur { this.update_size(); this.update_wallpaper(); }); - + background_parent.add_child(background); dash.get_parent().insert_child_at_index(background_parent, 0); // create infos let infos = new DashInfos( - this, - dash, + this, + dash, dash_container, dash_background, - background, - background_parent, + background, + background_parent, effects ); @@ -326,7 +331,8 @@ export const DashBlur = class DashBlur { let background = this.is_static ? new Meta.BackgroundActor({ meta_display: global.display, - monitor: monitor.index,}) + monitor: monitor.index, + }) : new St.Widget({ name: 'dash-blurred-background', style_class: 'dash-blurred-background', @@ -337,7 +343,7 @@ export const DashBlur = class DashBlur { }); // the effects to be applied - if(this.is_static) { + if (this.is_static) { let effect_vert = new BlurEffect({ width: dash_background.width, height: dash_background.height, diff --git a/src/components/panel.js b/src/components/panel.js index b034a36e..ba587950 100644 --- a/src/components/panel.js +++ b/src/components/panel.js @@ -320,7 +320,7 @@ export const PanelBlur = class PanelBlur { Main.layoutManager.monitors.length - this.find_monitor_for(actors.widgets.panel).index - 1 ); - if (bg) + if (bg && bg.get_content()) actors.widgets.background.content.set({ background: bg.get_content().background }); diff --git a/src/effects/blur_effect.glsl b/src/effects/blur_effect.glsl index fadc3f8c..521787ef 100644 --- a/src/effects/blur_effect.glsl +++ b/src/effects/blur_effect.glsl @@ -6,7 +6,7 @@ uniform float radius; uniform float brightness; float radius_band = 5; -int band = int(radius/radius_band); +int band = int(radius / radius_band); int elements; float[31] weights; @@ -16,43 +16,43 @@ float[31] weights; */ void initWeights() { - if(band == 1) { + if (band == 1) { elements = 11; weights = float[](0.0877142386894625, 0.08571761885514498, 0.0799963364506413, 0.07129680990889681, 0.06068342691594618, 0.049325341222694934, 0.03828865390084329, 0.02838377126232145, 0.020094171210084107, 0.013585327059749568, 0.008771423868946249, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); - } else if(band == 2) { + } else if (band == 2) { elements = 16; - weights = float[](0.0586256816448148, 0.058028782785674825, 0.056274303376764534, 0.05346725712469989, 0.04977104899549517, 0.04539173617000566, 0.0405590622531167, 0.035506685021076116, 0.030453938115135727, 0.025591038213833354, 0.02106897757449955, 0.016994567929708503, 0.01343036777015676, 0.010398646009483488, 0.007888179673460876, 0.005862568164481478, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); - } else if(band == 3) { + weights = float[](0.0586256816448148, 0.058028782785674825, 0.056274303376764534, 0.05346725712469989, 0.04977104899549517, 0.04539173617000566, 0.0405590622531167, 0.035506685021076116, 0.030453938115135727, 0.025591038213833354, 0.02106897757449955, 0.016994567929708503, 0.01343036777015676, 0.010398646009483488, 0.007888179673460876, 0.005862568164481478, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); + } else if (band == 3) { elements = 21; - weights = float[](0.0440280172323652, 0.043775299669453475, 0.04302581720435111, 0.04180508663519469, 0.040154028951265845, 0.038126692151510426, 0.03578731597266526, 0.033206960669429846, 0.03045994590950288, 0.02762034683326305, 0.024758773555951772, 0.021939621342538233, 0.019218926584070265, 0.016642904755081178, 0.014247187103581744, 0.01205671868468385, 0.01008623604931275, 0.00834121139372131, 0.006819132478725233, 0.005510983716277974, 0.004402801723236519, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); - } else if(band == 4) { + weights = float[](0.0440280172323652, 0.043775299669453475, 0.04302581720435111, 0.04180508663519469, 0.040154028951265845, 0.038126692151510426, 0.03578731597266526, 0.033206960669429846, 0.03045994590950288, 0.02762034683326305, 0.024758773555951772, 0.021939621342538233, 0.019218926584070265, 0.016642904755081178, 0.014247187103581744, 0.01205671868468385, 0.01008623604931275, 0.00834121139372131, 0.006819132478725233, 0.005510983716277974, 0.004402801723236519, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); + } else if (band == 4) { elements = 26; - weights = float[](0.035251311548426645, 0.03512167985428671, 0.03473563797921578, 0.034101641135581943, 0.03323343864771841, 0.032149578233677256, 0.030872747420843664, 0.02942898474365488, 0.02784679898571322, 0.026156237964777153, 0.02438794909471392, 0.022572272253890677, 0.0207384015755935, 0.01891364702785695, 0.017122819549254917, 0.01538775559811883, 0.013726988815983374, 0.012155568634473212, 0.010685018534585205, 0.009323420668711375, 0.00807560893439296, 0.006943449478165318, 0.005926186022712806, 0.00502082725973912, 0.004222554657282778, 0.0035251311548426634, 0.0, 0.0, 0.0, 0.0, 0.0); - } else if(band == 5) { + weights = float[](0.035251311548426645, 0.03512167985428671, 0.03473563797921578, 0.034101641135581943, 0.03323343864771841, 0.032149578233677256, 0.030872747420843664, 0.02942898474365488, 0.02784679898571322, 0.026156237964777153, 0.02438794909471392, 0.022572272253890677, 0.0207384015755935, 0.01891364702785695, 0.017122819549254917, 0.01538775559811883, 0.013726988815983374, 0.012155568634473212, 0.010685018534585205, 0.009323420668711375, 0.00807560893439296, 0.006943449478165318, 0.005926186022712806, 0.00502082725973912, 0.004222554657282778, 0.0035251311548426634, 0.0, 0.0, 0.0, 0.0, 0.0); + } else if (band == 5) { elements = 31; - weights = float[](0.02939238997940825, 0.0293172877821358, 0.02909313061808605, 0.028723337500726337, 0.02821351026143142, 0.02757129236128949, 0.026806178255796353, 0.025929279956616785, 0.024953058808301565, 0.023891031518258905, 0.022757460108256487, 0.02156703567869248, 0.020334565697082033, 0.019074673963800762, 0.017801521513017445, 0.01652855553153197, 0.015268291990392636, 0.014032136157813015, 0.012830243573388909, 0.011671422487248699, 0.010563077271987156, 0.009511190959338476, 0.008520343885258975, 0.007593764480959185, 0.0067334075441362, 0.005940054871217317, 0.0052134329221157774, 0.004552342206966415, 0.003954793303635894, 0.0034181448028725646, 0.0029392389979408244); + weights = float[](0.02939238997940825, 0.0293172877821358, 0.02909313061808605, 0.028723337500726337, 0.02821351026143142, 0.02757129236128949, 0.026806178255796353, 0.025929279956616785, 0.024953058808301565, 0.023891031518258905, 0.022757460108256487, 0.02156703567869248, 0.020334565697082033, 0.019074673963800762, 0.017801521513017445, 0.01652855553153197, 0.015268291990392636, 0.014032136157813015, 0.012830243573388909, 0.011671422487248699, 0.010563077271987156, 0.009511190959338476, 0.008520343885258975, 0.007593764480959185, 0.0067334075441362, 0.005940054871217317, 0.0052134329221157774, 0.004552342206966415, 0.003954793303635894, 0.0034181448028725646, 0.0029392389979408244); } else { // default elements = 6; weights = float[](0.1742497602122148, 0.15891767006870802, 0.12055138079000842, 0.07606277909668431, 0.03991831391727037, 0.017424976021221478, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); } } -vec2 step_size = vec2((mod(radius, radius_band)/15.0 + 1.0)/(4/3*float(width)), (mod(radius, radius_band)/15.0 + 1.0)/(4/3*float(height))); +vec2 step_size = vec2((mod(radius, radius_band) / 15.0 + 1.0) / (4 / 3 * float(width)), (mod(radius, radius_band) / 15.0 + 1.0) / (4 / 3 * float(height))); -vec2 direction = vec2(dir, (1.0-dir)); +vec2 direction = vec2(dir, (1.0 - dir)); void main(void) { vec2 pos = cogl_tex_coord_in[0].xy; - if(radius == 0.0) { + if (radius == 0.0) { cogl_color_out = texture2D(tex, pos); } else { initWeights(); - cogl_color_out = texture2D(tex, pos) * weights[0]; - for(int t = 1; t < elements; t++) { - cogl_color_out += texture2D(tex, pos + t * step_size * direction) * weights[t]; - cogl_color_out += texture2D(tex, pos - t * step_size * direction) * weights[t]; + cogl_color_out = texture2D(tex, pos) * weights[0]; + for (int t = 1; t < elements; t++) { + cogl_color_out += texture2D(tex, pos + t * step_size * direction) * weights[t]; + cogl_color_out += texture2D(tex, pos - t * step_size * direction) * weights[t]; } cogl_color_out.a = 1.0; diff --git a/src/effects/blur_effect.js b/src/effects/blur_effect.js index f82d34e5..7014c7e0 100644 --- a/src/effects/blur_effect.js +++ b/src/effects/blur_effect.js @@ -39,7 +39,7 @@ export const BlurEffect = new GObject.registerClass({ `sigma`, `Blur sigma`, GObject.ParamFlags.READWRITE, - 0.0, 200.0, + 0.0, 2000.0, 200.0, ), 'brightness': GObject.ParamSpec.double( @@ -70,18 +70,18 @@ export const BlurEffect = new GObject.registerClass({ this._direction = null; this._static = true; - this._settings = settings; + this._settings = settings; if (params.width) this.width = params.width; if (params.height) - this.height = params.height; + this.height = params.height; if (params.sigma) - this.sigma = params.sigma; + this.sigma = params.sigma; if (params.brightness) - this.brightness = params.brightness; + this.brightness = params.brightness; if (params.direction) - this.direction = params.direction; + this.direction = params.direction; // set shader source this._source = get_shader_source(); @@ -118,11 +118,15 @@ export const BlurEffect = new GObject.registerClass({ } set sigma(value) { - value = 30*value/200; + value = 30 * value / 200; if (this._sigma !== value) { + this.set_enabled( + value > 0 + ); + this._sigma = value; - this.set_uniform_value('radius', parseFloat(this._sigma-1e-6)); + this.set_uniform_value('radius', parseFloat(this._sigma - 1e-6)); } } @@ -134,7 +138,7 @@ export const BlurEffect = new GObject.registerClass({ if (this._brightness !== value) { this._brightness = value; - this.set_uniform_value('brightness', parseFloat(this._brightness-1e-6)); + this.set_uniform_value('brightness', parseFloat(this._brightness - 1e-6)); } } diff --git a/src/effects/rounding_effect.glsl b/src/effects/rounding_effect.glsl index c9e4284c..7f810571 100644 --- a/src/effects/rounding_effect.glsl +++ b/src/effects/rounding_effect.glsl @@ -3,26 +3,24 @@ uniform float radius; uniform float width; uniform float height; -float circleBounds(vec2 p, vec2 center, float clip_radius) -{ - vec2 delta = p - vec2(center.x, center.y); +float circleBounds(vec2 p, vec2 center, float clip_radius) { + vec2 delta = p - center; float dist_squared = dot(delta, delta); float outer_radius = clip_radius + 0.5; - if(dist_squared >= (outer_radius * outer_radius)) + if (dist_squared >= (outer_radius * outer_radius)) return 0.0; float inner_radius = clip_radius - 0.5; - if(dist_squared <= (inner_radius * inner_radius)) + if (dist_squared <= (inner_radius * inner_radius)) return 1.0; return outer_radius - sqrt(dist_squared); } -vec4 shapeCorner(vec4 pixel, vec2 p, vec2 center, float clip_radius) -{ +vec4 shapeCorner(vec4 pixel, vec2 p, vec2 center, float clip_radius) { float alpha = circleBounds(p, center, clip_radius); - return vec4(pixel.rgb*alpha, min(alpha, pixel.a)); + return vec4(pixel.rgb * alpha, min(alpha, pixel.a)); } vec2 pixel_coord = cogl_tex_coord_in[0].xy; @@ -31,23 +29,23 @@ vec2 pos = pixel_coord * vec2(width, height); void main(void) { vec4 outColor = texture2D(tex, pixel_coord); - //Left side + // left side if (pos.x < radius) { - //Top left corner + // top left corner if (pos.y < radius) { - outColor = shapeCorner(outColor, pos, vec2(radius, radius), radius); - //Bottom left corner + outColor = shapeCorner(outColor, pos, vec2(radius + 2., radius + 2.), radius); + // bottom left corner } else if (pos.y > height - radius) { - outColor = shapeCorner(outColor, pos, vec2(radius, height - radius), radius); + outColor = shapeCorner(outColor, pos, vec2(radius + 2., height - radius - 1.), radius); } - //Right side + // right side } else if (pos.x > width - radius) { - //Top right corner + // top right corner if (pos.y < radius) { - outColor = shapeCorner(outColor, pos, vec2(width - radius, radius), radius); - //Bottom right corner + outColor = shapeCorner(outColor, pos, vec2(width - radius - 1., radius + 2.), radius); + // bottom right corner } else if (pos.y > height - radius) { - outColor = shapeCorner(outColor, pos, vec2(width - radius, height - radius), radius); + outColor = shapeCorner(outColor, pos, vec2(width - radius - 1., height - radius - 1.), radius); } } diff --git a/src/effects/rounding_effect.js b/src/effects/rounding_effect.js index 59293d75..f7292510 100644 --- a/src/effects/rounding_effect.js +++ b/src/effects/rounding_effect.js @@ -52,14 +52,14 @@ export const RoundingEffect = new GObject.registerClass({ this._radius = null; this._static = true; - this._settings = settings; + this._settings = settings; if (params.width) this.width = params.width; if (params.height) - this.height = params.height; + this.height = params.height; if (params.radius) - this.radius = params.radius; + this.radius = params.radius; // set shader source this._source = get_shader_source(); From 1a5aa5db1b251c440915cfe3ae110056609b3e65 Mon Sep 17 00:00:00 2001 From: parhom Date: Sat, 2 Mar 2024 02:15:02 +0200 Subject: [PATCH 03/12] Replace the blur shader with the one from Clutter blur effect --- src/components/dash_to_dock.js | 115 ++++++++++++++++++++++++--------- src/effects/blur_effect.glsl | 87 ++++++++++--------------- src/effects/blur_effect.js | 91 +++++++++++++------------- 3 files changed, 163 insertions(+), 130 deletions(-) diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index 618e36aa..a7cac75b 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -63,13 +63,15 @@ class DashInfos { dash_blur.connections.connect(dash_blur, 'update-sigma', () => { this.effects[0].sigma = this.dash_blur.sigma; - if (this.dash_blur.is_static) + if (this.dash_blur.is_static) { this.effects[1].sigma = this.dash_blur.sigma; + this.dash_blur.update_size(); + } }); dash_blur.connections.connect(dash_blur, 'update-brightness', () => { this.effects[0].brightness = this.dash_blur.brightness; - if (this.dash_blur.is_static) + if (this.dash_blur.is_static) this.effects[1].brightness = this.dash_blur.brightness; }); @@ -120,48 +122,60 @@ class DashInfos { Main.layoutManager.monitors.length - find_monitor_for(this.dash).index - 1 ); - if (bg && bg.get_content()) { + if (bg) { this.background.content.set({ background: bg.get_content().background }); this._log('bg set'); - } else + } else { this._warn("could not get background for dash-to-dock"); + } } }); dash_blur.connections.connect(dash_blur, 'update-size', () => { - this.background.width = this.dash_background.width; - this.background.height = this.dash_background.height; - if (this.dash_blur.is_static) { var x, y; [x, y] = this.get_dash_position(this.dash_container, this.dash_background); + + //Offset + var x_o, y_o, w_o, h_o; + [x_o, y_o, w_o, h_o] = this.get_offset( + this.dash_blur.sigma, + x, + y, + this.dash_background.width, + this.dash_background.height + ); + //console.log("blur offset [x_o, y_o, w_o, h_o]: ", x_o, y_o, w_o, h_o); + //console.log("blur ", x, y, this.dash_background.width, this.dash_background.height); + //console.log("blur ", x+x_o, y+y_o, this.dash_background.width+w_o, this.dash_background.height+h_o); if (this.dash_container.get_style_class_name().includes("left")) { this.background.x = 0; } else { - this.background.x = -x; + this.background.x = -(x+x_o); } if (this.dash_container.get_style_class_name().includes("top")) { this.background.y = 0; } else { - this.background.y = -y; + this.background.y = -(y+y_o); } - this.effects.forEach((effect) => { - effect.width = this.dash_background.width; - }); + this.effects[0].pixel_step = 1.0 / (this.dash_background.height+h_o); + this.effects[1].pixel_step = 1.0 / (this.dash_background.width+w_o); - this.effects.forEach((effect) => { - effect.height = this.dash_background.height; - }); + this.effects[2].width = this.dash_background.width; + this.effects[2].height = this.dash_background.height; - this.background.set_clip(x, y, this.dash_background.width, this.dash_background.height); + this.background.set_clip(x+x_o, y+y_o, this.dash_background.width+w_o, this.dash_background.height+h_o); } else { - this.background.y = this.dash_background.y; + this.background.width = this.dash_background.width; + this.background.height = this.dash_background.height; + this.background.x = this.dash_background.x; + this.background.y = this.dash_background.y; } }); @@ -182,10 +196,10 @@ class DashInfos { let monitor = find_monitor_for(dash_container); - if (dash_container.get_style_class_name().includes("top")) { + if (dash_container.get_style_class_name().includes("top")) { x = (monitor.width - dash_background.width) / 2; y = dash_background.y; - } else if (dash_container.get_style_class_name().includes("bottom")) { + } else if (dash_container.get_style_class_name().includes("bottom")) { x = (monitor.width - dash_background.width) / 2; y = monitor.height - dash_container.height; } else if (dash_container.get_style_class_name().includes("left")) { @@ -199,14 +213,55 @@ class DashInfos { return [x, y]; } + get_offset(sigma, x, y, w, h) { + var x_o, y_o, w_o, h_o; + + let bg = Main.layoutManager._backgroundGroup.get_child_at_index( + Main.layoutManager.monitors.length + - find_monitor_for(this.dash).index - 1 + ); + if (!bg) { + this._warn("could not get background for dash-to-dock"); + return [0, 0, 0, 0]; + } + + x_o = -sigma; + y_o = -sigma; + w_o = sigma*2; + h_o = sigma*2; + + if (x-sigma < 0) { + x_o = -x; + } + if (y-sigma < 0) { + y_o = -y; + } + if (x+x_o+w+sigma*2 > bg.width) { + w_o = bg.width - (x+x_o+w); + } + if (x-sigma < 0) { + w_o = w_o - sigma + x; + } + if (y+y_o+h+sigma*2 > bg.height) { + h_o = bg.height - (y+y_o+h); + } + if (y-sigma < 0) { + h_o = h_o - sigma + y; + } + this._warn("[sigma, x, y, w, h]: "+sigma+", "+x+", "+y+", "+ w+", "+h); + this._warn("[bg.width, bg.height]: "+bg.width+", "+bg.height); + this._warn("[x_o, y_o, w_o, h_o]: "+x_o+", "+y_o+", "+ w_o+", "+h_o); + return [0, 0, 0, 0]; + //return [x_o, y_o, w_o, h_o]; + } + _log(str) { if (this.settings.DEBUG) console.log(`[Blur my Shell > dash] ${str}`); } _warn(str) { - if (this.settings.DEBUG) - console.warn(`[Blur my Shell > dash] ${str}`); + console.warn(`[Blur my Shell > dash] ${str}`); } } @@ -287,7 +342,7 @@ export const DashBlur = class DashBlur { let dash_background = dash.get_children().find(child => { return child.get_style_class_name() === 'dash-background'; }); - + let [background, effects] = this.add_blur(dash, dash_background, dash_container); this.update_size(); @@ -302,18 +357,18 @@ export const DashBlur = class DashBlur { this.update_size(); this.update_wallpaper(); }); - + background_parent.add_child(background); dash.get_parent().insert_child_at_index(background_parent, 0); // create infos let infos = new DashInfos( - this, - dash, + this, + dash, dash_container, dash_background, - background, - background_parent, + background, + background_parent, effects ); @@ -345,15 +400,13 @@ export const DashBlur = class DashBlur { // the effects to be applied if (this.is_static) { let effect_vert = new BlurEffect({ - width: dash_background.width, - height: dash_background.height, + pixel_step: 1.0 / dash_background.height, sigma: this.sigma, brightness: this.brightness, direction: 0 }); let effect_hor = new BlurEffect({ - width: dash_background.width, - height: dash_background.height, + pixel_step: 1.0 / dash_background.width, sigma: this.sigma, brightness: this.brightness, direction: 1 diff --git a/src/effects/blur_effect.glsl b/src/effects/blur_effect.glsl index 521787ef..d9554ca4 100644 --- a/src/effects/blur_effect.glsl +++ b/src/effects/blur_effect.glsl @@ -1,61 +1,44 @@ uniform sampler2D tex; -uniform int width; -uniform int height; +uniform float sigma; +uniform float pixel_step; uniform int dir; -uniform float radius; uniform float brightness; -float radius_band = 5; -int band = int(radius / radius_band); -int elements; -float[31] weights; - -/* -** initWeights gets executed on every pixel instance of the shader. Because of the parallel execution of the main instances every pixel instance gets a copy of the global variables, -** which also means that those instances can't change the value of the global variable. -*/ - -void initWeights() { - if (band == 1) { - elements = 11; - weights = float[](0.0877142386894625, 0.08571761885514498, 0.0799963364506413, 0.07129680990889681, 0.06068342691594618, 0.049325341222694934, 0.03828865390084329, 0.02838377126232145, 0.020094171210084107, 0.013585327059749568, 0.008771423868946249, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); - } else if (band == 2) { - elements = 16; - weights = float[](0.0586256816448148, 0.058028782785674825, 0.056274303376764534, 0.05346725712469989, 0.04977104899549517, 0.04539173617000566, 0.0405590622531167, 0.035506685021076116, 0.030453938115135727, 0.025591038213833354, 0.02106897757449955, 0.016994567929708503, 0.01343036777015676, 0.010398646009483488, 0.007888179673460876, 0.005862568164481478, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); - } else if (band == 3) { - elements = 21; - weights = float[](0.0440280172323652, 0.043775299669453475, 0.04302581720435111, 0.04180508663519469, 0.040154028951265845, 0.038126692151510426, 0.03578731597266526, 0.033206960669429846, 0.03045994590950288, 0.02762034683326305, 0.024758773555951772, 0.021939621342538233, 0.019218926584070265, 0.016642904755081178, 0.014247187103581744, 0.01205671868468385, 0.01008623604931275, 0.00834121139372131, 0.006819132478725233, 0.005510983716277974, 0.004402801723236519, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); - } else if (band == 4) { - elements = 26; - weights = float[](0.035251311548426645, 0.03512167985428671, 0.03473563797921578, 0.034101641135581943, 0.03323343864771841, 0.032149578233677256, 0.030872747420843664, 0.02942898474365488, 0.02784679898571322, 0.026156237964777153, 0.02438794909471392, 0.022572272253890677, 0.0207384015755935, 0.01891364702785695, 0.017122819549254917, 0.01538775559811883, 0.013726988815983374, 0.012155568634473212, 0.010685018534585205, 0.009323420668711375, 0.00807560893439296, 0.006943449478165318, 0.005926186022712806, 0.00502082725973912, 0.004222554657282778, 0.0035251311548426634, 0.0, 0.0, 0.0, 0.0, 0.0); - } else if (band == 5) { - elements = 31; - weights = float[](0.02939238997940825, 0.0293172877821358, 0.02909313061808605, 0.028723337500726337, 0.02821351026143142, 0.02757129236128949, 0.026806178255796353, 0.025929279956616785, 0.024953058808301565, 0.023891031518258905, 0.022757460108256487, 0.02156703567869248, 0.020334565697082033, 0.019074673963800762, 0.017801521513017445, 0.01652855553153197, 0.015268291990392636, 0.014032136157813015, 0.012830243573388909, 0.011671422487248699, 0.010563077271987156, 0.009511190959338476, 0.008520343885258975, 0.007593764480959185, 0.0067334075441362, 0.005940054871217317, 0.0052134329221157774, 0.004552342206966415, 0.003954793303635894, 0.0034181448028725646, 0.0029392389979408244); - } else { // default - elements = 6; - weights = float[](0.1742497602122148, 0.15891767006870802, 0.12055138079000842, 0.07606277909668431, 0.03991831391727037, 0.017424976021221478, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0); - } -} - -vec2 step_size = vec2((mod(radius, radius_band) / 15.0 + 1.0) / (4 / 3 * float(width)), (mod(radius, radius_band) / 15.0 + 1.0) / (4 / 3 * float(height))); - -vec2 direction = vec2(dir, (1.0 - dir)); - void main(void) { - vec2 pos = cogl_tex_coord_in[0].xy; - - if (radius == 0.0) { - cogl_color_out = texture2D(tex, pos); - } else { - initWeights(); - - cogl_color_out = texture2D(tex, pos) * weights[0]; - for (int t = 1; t < elements; t++) { - cogl_color_out += texture2D(tex, pos + t * step_size * direction) * weights[t]; - cogl_color_out += texture2D(tex, pos - t * step_size * direction) * weights[t]; - } + vec2 uv = cogl_tex_coord_in[0].xy; + vec2 direction = vec2(dir, (1.0-dir)); + + vec3 gauss_coefficient; + gauss_coefficient.x = 1.0 / (sqrt (2.0 * 3.14159265) * sigma); + gauss_coefficient.y = exp (-0.5 / (sigma * sigma)); + gauss_coefficient.z = gauss_coefficient.y * gauss_coefficient.y; + + float gauss_coefficient_total = gauss_coefficient.x; + + vec4 ret = texture2D (tex, uv) * gauss_coefficient.x; + gauss_coefficient.xy *= gauss_coefficient.yz; + + int n_steps = int (ceil (1.5 * sigma)) * 2; + + for (int i = 1; i <= n_steps; i += 2) { + float coefficient_subtotal = gauss_coefficient.x; + gauss_coefficient.xy *= gauss_coefficient.yz; + coefficient_subtotal += gauss_coefficient.x; + + float gauss_ratio = gauss_coefficient.x / coefficient_subtotal; + + float foffset = float (i) + gauss_ratio; + vec2 offset = direction * foffset * pixel_step; + + ret += texture2D (tex, uv + offset) * coefficient_subtotal; + ret += texture2D (tex, uv - offset) * coefficient_subtotal; + + gauss_coefficient_total += 2.0 * coefficient_subtotal; + gauss_coefficient.xy *= gauss_coefficient.yz; + } + cogl_color_out = ret / gauss_coefficient_total; - cogl_color_out.a = 1.0; + if(dir==1) { cogl_color_out.rgb *= brightness; } } \ No newline at end of file diff --git a/src/effects/blur_effect.js b/src/effects/blur_effect.js index 7014c7e0..f04ddaae 100644 --- a/src/effects/blur_effect.js +++ b/src/effects/blur_effect.js @@ -2,6 +2,7 @@ import GLib from 'gi://GLib'; import GObject from 'gi://GObject'; import Clutter from 'gi://Clutter'; import Shell from 'gi://Shell'; +//import Cogl from 'gi://Cogl'; const SHADER_PATH = GLib.filename_from_uri(GLib.uri_resolve_relative(import.meta.url, 'blur_effect.glsl', GLib.UriFlags.NONE))[0]; @@ -18,20 +19,12 @@ const get_shader_source = _ => { export const BlurEffect = new GObject.registerClass({ GTypeName: "BlurEffect", Properties: { - 'width': GObject.ParamSpec.double( - `width`, - `Width`, - `Actor width`, + 'pixel_step': GObject.ParamSpec.double( + `pixel_step`, + `Pixel step`, + `Pixel step`, GObject.ParamFlags.READWRITE, - 0.0, Number.MAX_SAFE_INTEGER, - 0.0, - ), - 'height': GObject.ParamSpec.double( - `height`, - `Height`, - `Actor height`, - GObject.ParamFlags.READWRITE, - 0.0, Number.MAX_SAFE_INTEGER, + 0.0, 1.0, 0.0, ), 'sigma': GObject.ParamSpec.double( @@ -63,8 +56,7 @@ export const BlurEffect = new GObject.registerClass({ constructor(params, settings) { super(params); - this._width = null; - this._height = null; + this._pixel_step = null; this._sigma = null; this._brightness = null; this._direction = null; @@ -72,16 +64,16 @@ export const BlurEffect = new GObject.registerClass({ this._static = true; this._settings = settings; - if (params.width) - this.width = params.width; - if (params.height) - this.height = params.height; + this._tex = null; + + if (params.pixel_step) + this.pixel_step = params.pixel_step; if (params.sigma) - this.sigma = params.sigma; + this.sigma = params.sigma; if (params.brightness) - this.brightness = params.brightness; + this.brightness = params.brightness; if (params.direction) - this.direction = params.direction; + this.direction = params.direction; // set shader source this._source = get_shader_source(); @@ -89,27 +81,15 @@ export const BlurEffect = new GObject.registerClass({ this.set_shader_source(this._source); } - get width() { - return this._width; + get pixel_step() { + return this._pixel_step; } - set width(value) { - if (this._width !== value) { - this._width = value; + set pixel_step(value) { + if (this._pixel_step !== value) { + this._pixel_step = value; - this.set_uniform_value('width', this._width); - } - } - - get height() { - return this._height; - } - - set height(value) { - if (this._height !== value) { - this._height = value; - - this.set_uniform_value('height', this._height); + this.set_uniform_value('pixel_step', parseFloat(this._pixel_step-1e-6)); } } @@ -118,15 +98,10 @@ export const BlurEffect = new GObject.registerClass({ } set sigma(value) { - value = 30 * value / 200; if (this._sigma !== value) { - this.set_enabled( - value > 0 - ); - this._sigma = value; - this.set_uniform_value('radius', parseFloat(this._sigma - 1e-6)); + this.set_uniform_value('sigma', parseFloat(this._sigma-1e-6)); } } @@ -138,7 +113,7 @@ export const BlurEffect = new GObject.registerClass({ if (this._brightness !== value) { this._brightness = value; - this.set_uniform_value('brightness', parseFloat(this._brightness - 1e-6)); + this.set_uniform_value('brightness', parseFloat(this._brightness-1e-6)); } } @@ -156,6 +131,28 @@ export const BlurEffect = new GObject.registerClass({ vfunc_paint_target(paint_node = null, paint_context = null) { + /*let tex = this.get_pipeline().get_layer_texture(0); + if(tex !== null) { + this._tex = tex; + } + console.log("blur original texture width, height: ", this._tex.get_width(), this._tex.get_height()); + + let data = new Uint8Array(this._tex.get_width()*this._tex.get_height()*24); + this._tex.get_data(Cogl.PixelFormat.RGB_888, this._tex.get_width()*24, data); + + let new_tex_img = new Clutter.Image(); + new_tex_img.set_data( + data, + Cogl.PixelFormat.RGB_888, + this._tex.get_width(), this._tex.get_height(), this._tex.get_width()*24 + ); + + + this.get_pipeline().set_layer_texture(0,new_tex); + + //Invalid uniform of type 'CoglTexture2D' for name 'tex' + //this.set_uniform_value("tex", this._tex); + */ this.set_uniform_value("tex", 0); if (paint_node && paint_context) From 0629c79912000194e34b880660d9597248df3ff7 Mon Sep 17 00:00:00 2001 From: parhom Date: Sat, 2 Mar 2024 03:16:23 +0200 Subject: [PATCH 04/12] Restore the fix, that was wiped by previous commit --- src/components/dash_to_dock.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index a7cac75b..5f806fd9 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -122,7 +122,7 @@ class DashInfos { Main.layoutManager.monitors.length - find_monitor_for(this.dash).index - 1 ); - if (bg) { + if (bg && bg.get_content()) { this.background.content.set({ background: bg.get_content().background }); From 8d3d17caa32fba896376d44aafecd91503a2a481 Mon Sep 17 00:00:00 2001 From: parhom Date: Sat, 2 Mar 2024 22:26:27 +0200 Subject: [PATCH 05/12] Fixes for blur actor misplacement --- src/components/dash_to_dock.js | 69 ++++++++++++++++++++++------------ 1 file changed, 46 insertions(+), 23 deletions(-) diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index 5f806fd9..a3ed6bbd 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -136,7 +136,7 @@ class DashInfos { dash_blur.connections.connect(dash_blur, 'update-size', () => { if (this.dash_blur.is_static) { var x, y; - [x, y] = this.get_dash_position(this.dash_container, this.dash_background); + [x, y] = this.get_dash_position(this.dash_container, this.dash_background, this.dash); //Offset var x_o, y_o, w_o, h_o; @@ -151,25 +151,26 @@ class DashInfos { //console.log("blur ", x, y, this.dash_background.width, this.dash_background.height); //console.log("blur ", x+x_o, y+y_o, this.dash_background.width+w_o, this.dash_background.height+h_o); - if (this.dash_container.get_style_class_name().includes("left")) { - this.background.x = 0; - } else { - this.background.x = -(x+x_o); - } - - if (this.dash_container.get_style_class_name().includes("top")) { - this.background.y = 0; - } else { - this.background.y = -(y+y_o); - } + this.background.x = -(x + x_o); + this.background.y = -(y + y_o); - this.effects[0].pixel_step = 1.0 / (this.dash_background.height+h_o); - this.effects[1].pixel_step = 1.0 / (this.dash_background.width+w_o); + this.effects[0].pixel_step = 1.0 / (this.dash_background.height + h_o); + this.effects[1].pixel_step = 1.0 / (this.dash_background.width + w_o); this.effects[2].width = this.dash_background.width; this.effects[2].height = this.dash_background.height; - this.background.set_clip(x+x_o, y+y_o, this.dash_background.width+w_o, this.dash_background.height+h_o); + let dash_box = this.dash_container._slider.get_child(); + + if (dash_container.get_style_class_name().includes("top")) { + this.background.set_clip(x + x_o, y + this.dash.y + this.dash_background.y + y_o, this.dash_background.width + w_o, this.dash_background.height + h_o); + } else if (dash_container.get_style_class_name().includes("bottom")) { + this.background.set_clip(x + x_o, y + this.dash.y + this.dash_background.y + y_o, this.dash_background.width + w_o, this.dash_background.height + h_o); + } else if (dash_container.get_style_class_name().includes("left")) { + this.background.set_clip(x + this.dash.x + this.dash_background.x + x_o, y + this.dash.y + this.dash_background.y + y_o, this.dash_background.width + w_o, this.dash_background.height + h_o); + } else if (dash_container.get_style_class_name().includes("right")) { + this.background.set_clip(x + this.dash.x + this.dash_background.x + x_o, y + this.dash.y + this.dash_background.y + y_o, this.dash_background.width + w_o, this.dash_background.height + h_o); + } } else { this.background.width = this.dash_background.width; this.background.height = this.dash_background.height; @@ -191,25 +192,29 @@ class DashInfos { }); } - get_dash_position(dash_container, dash_background) { + get_dash_position(dash_container, dash_background, dash) { var x, y; let monitor = find_monitor_for(dash_container); + let dash_box = dash_container._slider.get_child(); if (dash_container.get_style_class_name().includes("top")) { x = (monitor.width - dash_background.width) / 2; - y = dash_background.y; + y = dash_box.y; } else if (dash_container.get_style_class_name().includes("bottom")) { x = (monitor.width - dash_background.width) / 2; y = monitor.height - dash_container.height; } else if (dash_container.get_style_class_name().includes("left")) { - x = dash_background.x; - y = (monitor.height - dash_background.height + Main.panel.height) / 2; + x = dash_box.x; + y = dash_container.y + dash_container._slider.y; } else if (dash_container.get_style_class_name().includes("right")) { x = monitor.width - dash_container.width; - y = (monitor.height - dash_background.height + Main.panel.height) / 2; + y = dash_container.y + dash_container._slider.y; } + //console.log("blur dash_container.width, dash_background.x: ", dash_container.width, dash_background.x); + //console.log("blur dash_container.y, dash_container._slider.y: ", dash_container.y, dash_container._slider.y); + return [x, y]; } @@ -248,9 +253,7 @@ class DashInfos { if (y-sigma < 0) { h_o = h_o - sigma + y; } - this._warn("[sigma, x, y, w, h]: "+sigma+", "+x+", "+y+", "+ w+", "+h); - this._warn("[bg.width, bg.height]: "+bg.width+", "+bg.height); - this._warn("[x_o, y_o, w_o, h_o]: "+x_o+", "+y_o+", "+ w_o+", "+h_o); + return [0, 0, 0, 0]; //return [x_o, y_o, w_o, h_o]; } @@ -357,6 +360,26 @@ export const DashBlur = class DashBlur { this.update_size(); this.update_wallpaper(); }); + this.connections.connect(dash_container, 'notify::width', _ => { + this.update_size(); + this.update_wallpaper(); + }); + this.connections.connect(dash_container, 'notify::height', _ => { + this.update_size(); + this.update_wallpaper(); + }); + this.connections.connect(dash_container, 'notify::y', _ => { + this.update_size(); + this.update_wallpaper(); + }); + this.connections.connect(dash_container, 'notify::x', _ => { + this.update_size(); + this.update_wallpaper(); + }); + /*this.connections.connect(dash_container._slider, 'notify::y', _ => { + this.update_size(); + this.update_wallpaper(); + });*/ background_parent.add_child(background); dash.get_parent().insert_child_at_index(background_parent, 0); From 339e0fd3fc0f497f88d600c2b8047381551e6cff Mon Sep 17 00:00:00 2001 From: parhom Date: Mon, 4 Mar 2024 02:17:02 +0200 Subject: [PATCH 06/12] Merge effects to one; more positioning fixes; enable/disable bug fix; code cleanup --- src/components/dash_to_dock.js | 174 +++++++++-------------------- src/effects/blur_effect.glsl | 61 ++++++++++- src/effects/blur_effect.js | 181 +++++++++++++++++++++---------- src/effects/rounding_effect.glsl | 53 --------- src/effects/rounding_effect.js | 117 -------------------- 5 files changed, 236 insertions(+), 350 deletions(-) delete mode 100644 src/effects/rounding_effect.glsl delete mode 100644 src/effects/rounding_effect.js diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index a3ed6bbd..9ca08549 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -7,7 +7,6 @@ const Signals = imports.signals; import { PaintSignals } from '../effects/paint_signals.js'; import { BlurEffect } from '../effects/blur_effect.js'; -import { RoundingEffect } from '../effects/rounding_effect.js'; const DASH_STYLES = [ "transparent-dash", @@ -38,7 +37,7 @@ function find_monitor_for(actor) { /// /// This allows to dynamically track the created dashes for each screen. class DashInfos { - constructor(dash_blur, dash, dash_container, dash_background, background, background_parent, effects) { + constructor(dash_blur, dash, dash_container, dash_background, background, background_parent, effect) { // the parent DashBlur object, to communicate this.dash_blur = dash_blur; this.dash_container = dash_container; @@ -47,7 +46,7 @@ class DashInfos { this.dash_background = dash_background; this.background_parent = background_parent; this.background = background; - this.effects = effects; + this.effect = effect; this.settings = dash_blur.settings; this.old_style = this.dash._background.style; @@ -62,23 +61,21 @@ class DashInfos { }); dash_blur.connections.connect(dash_blur, 'update-sigma', () => { - this.effects[0].sigma = this.dash_blur.sigma; + this.effect.sigma = this.dash_blur.sigma; if (this.dash_blur.is_static) { - this.effects[1].sigma = this.dash_blur.sigma; this.dash_blur.update_size(); } }); dash_blur.connections.connect(dash_blur, 'update-brightness', () => { - this.effects[0].brightness = this.dash_blur.brightness; - if (this.dash_blur.is_static) - this.effects[1].brightness = this.dash_blur.brightness; + this.effect.brightness = this.dash_blur.brightness; }); dash_blur.connections.connect(dash_blur, 'update-radius', () => { if (this.dash_blur.is_static) { let monitor = find_monitor_for(this.dash); - this.effects[2].radius = this.dash_blur.radius * monitor.geometry_scale; + let radius = this.dash_blur.radius * monitor.geometry_scale; + this.effect.radius = Math.min(radius, Math.min(this.effect.width/2, this.effect.height/2)); } }); @@ -106,14 +103,14 @@ class DashInfos { if (this.dash_blur.is_static) this.background_parent.show(); else - this.effects[0].sigma = this.dash_blur.sigma; + this.effect.sigma = this.dash_blur.sigma; }); dash_blur.connections.connect(dash_blur, 'hide', () => { if (this.dash_blur.is_static) this.background_parent.hide(); else - this.effects[0].sigma = 0; + this.effect.sigma = 0; }); dash_blur.connections.connect(dash_blur, 'update-wallpaper', () => { @@ -135,59 +132,45 @@ class DashInfos { dash_blur.connections.connect(dash_blur, 'update-size', () => { if (this.dash_blur.is_static) { - var x, y; - [x, y] = this.get_dash_position(this.dash_container, this.dash_background, this.dash); - - //Offset - var x_o, y_o, w_o, h_o; - [x_o, y_o, w_o, h_o] = this.get_offset( - this.dash_blur.sigma, - x, - y, - this.dash_background.width, - this.dash_background.height - ); - //console.log("blur offset [x_o, y_o, w_o, h_o]: ", x_o, y_o, w_o, h_o); - //console.log("blur ", x, y, this.dash_background.width, this.dash_background.height); - //console.log("blur ", x+x_o, y+y_o, this.dash_background.width+w_o, this.dash_background.height+h_o); + let [x, y] = this.get_dash_position(this.dash_container, this.dash_background, this.dash); - this.background.x = -(x + x_o); - this.background.y = -(y + y_o); + this.background.x = -x; + this.background.y = -y; - this.effects[0].pixel_step = 1.0 / (this.dash_background.height + h_o); - this.effects[1].pixel_step = 1.0 / (this.dash_background.width + w_o); + this.effect.width = this.dash_background.width; + this.effect.height = this.dash_background.height; - this.effects[2].width = this.dash_background.width; - this.effects[2].height = this.dash_background.height; + this.dash_blur.set_radius(this.dash_blur.radius); let dash_box = this.dash_container._slider.get_child(); if (dash_container.get_style_class_name().includes("top")) { - this.background.set_clip(x + x_o, y + this.dash.y + this.dash_background.y + y_o, this.dash_background.width + w_o, this.dash_background.height + h_o); + this.background.set_clip(x, y + this.dash.y + this.dash_background.y, this.dash_background.width, this.dash_background.height); } else if (dash_container.get_style_class_name().includes("bottom")) { - this.background.set_clip(x + x_o, y + this.dash.y + this.dash_background.y + y_o, this.dash_background.width + w_o, this.dash_background.height + h_o); + this.background.set_clip(x, y + this.dash.y + this.dash_background.y, this.dash_background.width, this.dash_background.height); } else if (dash_container.get_style_class_name().includes("left")) { - this.background.set_clip(x + this.dash.x + this.dash_background.x + x_o, y + this.dash.y + this.dash_background.y + y_o, this.dash_background.width + w_o, this.dash_background.height + h_o); + this.background.set_clip(x + this.dash.x + this.dash_background.x, y + this.dash.y + this.dash_background.y, this.dash_background.width, this.dash_background.height); } else if (dash_container.get_style_class_name().includes("right")) { - this.background.set_clip(x + this.dash.x + this.dash_background.x + x_o, y + this.dash.y + this.dash_background.y + y_o, this.dash_background.width + w_o, this.dash_background.height + h_o); + this.background.set_clip(x + this.dash.x + this.dash_background.x, y + this.dash.y + this.dash_background.y, this.dash_background.width, this.dash_background.height); } } else { this.background.width = this.dash_background.width; this.background.height = this.dash_background.height; this.background.x = this.dash_background.x; - this.background.y = this.dash_background.y; + this.background.y = this.dash_background.y + this.dash.y; } }); dash_blur.connections.connect(dash_blur, 'change-blur-type', () => { this.background_parent.remove_child(this.background); - this.effects.forEach((effect) => { - effect.get_actor()?.remove_effect(effect); - }); - let [background, effects] = this.dash_blur.add_blur(this.dash, this.dash_background, this.dash_container); + if (this.effect.chained_effect) + this.effect.get_actor()?.remove_effect(this.effect.chained_effect); + this.effect.get_actor()?.remove_effect(this.effect); + + let [background, effect] = this.dash_blur.add_blur(this.dash, this.dash_background, this.dash_container); this.background = background; - this.effects = effects; + this.effect = effect; this.background_parent.add_child(this.background); }); } @@ -206,58 +189,15 @@ class DashInfos { y = monitor.height - dash_container.height; } else if (dash_container.get_style_class_name().includes("left")) { x = dash_box.x; - y = dash_container.y + dash_container._slider.y; + y = dash_container.y + (dash_container.height - dash_background.height) / 2 - dash_background.y; } else if (dash_container.get_style_class_name().includes("right")) { x = monitor.width - dash_container.width; - y = dash_container.y + dash_container._slider.y; + y = dash_container.y + (dash_container.height - dash_background.height) / 2 - dash_background.y; } - //console.log("blur dash_container.width, dash_background.x: ", dash_container.width, dash_background.x); - //console.log("blur dash_container.y, dash_container._slider.y: ", dash_container.y, dash_container._slider.y); - return [x, y]; } - get_offset(sigma, x, y, w, h) { - var x_o, y_o, w_o, h_o; - - let bg = Main.layoutManager._backgroundGroup.get_child_at_index( - Main.layoutManager.monitors.length - - find_monitor_for(this.dash).index - 1 - ); - if (!bg) { - this._warn("could not get background for dash-to-dock"); - return [0, 0, 0, 0]; - } - - x_o = -sigma; - y_o = -sigma; - w_o = sigma*2; - h_o = sigma*2; - - if (x-sigma < 0) { - x_o = -x; - } - if (y-sigma < 0) { - y_o = -y; - } - if (x+x_o+w+sigma*2 > bg.width) { - w_o = bg.width - (x+x_o+w); - } - if (x-sigma < 0) { - w_o = w_o - sigma + x; - } - if (y+y_o+h+sigma*2 > bg.height) { - h_o = bg.height - (y+y_o+h); - } - if (y-sigma < 0) { - h_o = h_o - sigma + y; - } - - return [0, 0, 0, 0]; - //return [x_o, y_o, w_o, h_o]; - } - _log(str) { if (this.settings.DEBUG) console.log(`[Blur my Shell > dash] ${str}`); @@ -297,6 +237,9 @@ export const DashBlur = class DashBlur { this.blur_existing_dashes(); this.connect_to_overview(); + this.update_wallpaper(); + this.update_size(); + this.enabled = true; } @@ -346,40 +289,36 @@ export const DashBlur = class DashBlur { return child.get_style_class_name() === 'dash-background'; }); - let [background, effects] = this.add_blur(dash, dash_background, dash_container); + let [background, effect] = this.add_blur(dash, dash_background, dash_container); - this.update_size(); this.update_wallpaper(); + this.update_size(); // updates size and position on change this.connections.connect(dash, 'notify::width', _ => { - this.update_size(); this.update_wallpaper(); + this.update_size(); }); this.connections.connect(dash, 'notify::height', _ => { - this.update_size(); this.update_wallpaper(); + this.update_size(); }); this.connections.connect(dash_container, 'notify::width', _ => { - this.update_size(); this.update_wallpaper(); + this.update_size(); }); this.connections.connect(dash_container, 'notify::height', _ => { - this.update_size(); this.update_wallpaper(); + this.update_size(); }); this.connections.connect(dash_container, 'notify::y', _ => { - this.update_size(); this.update_wallpaper(); + this.update_size(); }); this.connections.connect(dash_container, 'notify::x', _ => { - this.update_size(); this.update_wallpaper(); - }); - /*this.connections.connect(dash_container._slider, 'notify::y', _ => { this.update_size(); - this.update_wallpaper(); - });*/ + }); background_parent.add_child(background); dash.get_parent().insert_child_at_index(background_parent, 0); @@ -392,7 +331,7 @@ export const DashBlur = class DashBlur { dash_background, background, background_parent, - effects + effect ); // update the background @@ -414,30 +353,23 @@ export const DashBlur = class DashBlur { : new St.Widget({ name: 'dash-blurred-background', style_class: 'dash-blurred-background', - x: 0, - y: dash_container._slider.y, + x: dash_background.x, + y: dash_background.y + dash.y, width: dash_background.width, height: dash_background.height, }); - // the effects to be applied + // the effect to be applied if (this.is_static) { - let effect_vert = new BlurEffect({ - pixel_step: 1.0 / dash_background.height, - sigma: this.sigma, - brightness: this.brightness, - direction: 0 - }); - let effect_hor = new BlurEffect({ - pixel_step: 1.0 / dash_background.width, + let radius = this.radius * monitor.geometry_scale; + radius = Math.min(radius, Math.min(dash_background.width/2, dash_background.height/2)); + + let effect_static = new BlurEffect({ sigma: this.sigma, brightness: this.brightness, - direction: 1 - }); - let effect_round = new RoundingEffect({ width: dash_background.width, height: dash_background.height, - radius: this.radius * monitor.geometry_scale + radius: radius }); // connect to every background change (even without changing image) @@ -449,11 +381,9 @@ export const DashBlur = class DashBlur { _ => this.update_wallpaper() ); - background.add_effect(effect_round); - background.add_effect(effect_vert); - background.add_effect(effect_hor); + background.add_effect(effect_static); - return [background, [effect_vert, effect_hor, effect_round]]; + return [background, effect_static]; } else { let effect = new Shell.BlurEffect({ brightness: this.brightness, @@ -520,15 +450,17 @@ export const DashBlur = class DashBlur { this.paint_signals.disconnect_all(); } - return [background, [effect]]; + return [background, effect]; } } change_blur_type() { this.is_static = this.settings.dash_to_dock.STATIC_BLUR; this.emit('change-blur-type', true); - this.update_size(); + this.update_wallpaper(); + this.update_background(); + this.update_size(); } /// Connect when overview if opened/closed to hide/show the blur accordingly diff --git a/src/effects/blur_effect.glsl b/src/effects/blur_effect.glsl index d9554ca4..decb21f5 100644 --- a/src/effects/blur_effect.glsl +++ b/src/effects/blur_effect.glsl @@ -1,13 +1,41 @@ uniform sampler2D tex; uniform float sigma; -uniform float pixel_step; uniform int dir; uniform float brightness; +uniform float radius; +uniform float width; +uniform float height; + +float circleBounds(vec2 p, vec2 center, float clip_radius) { + vec2 delta = p - center; + float dist_squared = dot(delta, delta); + + float outer_radius = clip_radius + 0.5; + if (dist_squared >= (outer_radius * outer_radius)) + return 0.0; + + float inner_radius = clip_radius - 0.5; + if (dist_squared <= (inner_radius * inner_radius)) + return 1.0; + + return outer_radius - sqrt(dist_squared); +} + +vec4 shapeCorner(vec4 pixel, vec2 p, vec2 center, float clip_radius) { + float alpha = circleBounds(p, center, clip_radius); + return vec4(pixel.rgb * alpha, min(alpha, pixel.a)); +} void main(void) { vec2 uv = cogl_tex_coord_in[0].xy; vec2 direction = vec2(dir, (1.0-dir)); + float pixel_step; + if (dir == 0) + pixel_step = 1.0 / height; + else + pixel_step = 1.0 / width; + vec3 gauss_coefficient; gauss_coefficient.x = 1.0 / (sqrt (2.0 * 3.14159265) * sigma); gauss_coefficient.y = exp (-0.5 / (sigma * sigma)); @@ -36,9 +64,34 @@ void main(void) { gauss_coefficient_total += 2.0 * coefficient_subtotal; gauss_coefficient.xy *= gauss_coefficient.yz; } - cogl_color_out = ret / gauss_coefficient_total; + vec4 outColor = ret / gauss_coefficient_total; + + // apply brightness and rounding on the second pass (dir==0 comes last) + if (dir == 0) { + vec2 pos = uv * vec2(width, height); - if(dir==1) { - cogl_color_out.rgb *= brightness; + // left side + if (pos.x < radius) { + // top left corner + if (pos.y < radius) { + outColor = shapeCorner(outColor, pos, vec2(radius + 2., radius + 2.), radius); + // bottom left corner + } else if (pos.y > height - radius) { + outColor = shapeCorner(outColor, pos, vec2(radius + 2., height - radius - 1.), radius); + } + // right side + } else if (pos.x > width - radius) { + // top right corner + if (pos.y < radius) { + outColor = shapeCorner(outColor, pos, vec2(width - radius - 1., radius + 2.), radius); + // bottom right corner + } else if (pos.y > height - radius) { + outColor = shapeCorner(outColor, pos, vec2(width - radius - 1., height - radius - 1.), radius); + } + } + + outColor.rgb *= brightness; } + + cogl_color_out = outColor; } \ No newline at end of file diff --git a/src/effects/blur_effect.js b/src/effects/blur_effect.js index f04ddaae..ec4d7eed 100644 --- a/src/effects/blur_effect.js +++ b/src/effects/blur_effect.js @@ -2,7 +2,6 @@ import GLib from 'gi://GLib'; import GObject from 'gi://GObject'; import Clutter from 'gi://Clutter'; import Shell from 'gi://Shell'; -//import Cogl from 'gi://Cogl'; const SHADER_PATH = GLib.filename_from_uri(GLib.uri_resolve_relative(import.meta.url, 'blur_effect.glsl', GLib.UriFlags.NONE))[0]; @@ -19,14 +18,6 @@ const get_shader_source = _ => { export const BlurEffect = new GObject.registerClass({ GTypeName: "BlurEffect", Properties: { - 'pixel_step': GObject.ParamSpec.double( - `pixel_step`, - `Pixel step`, - `Pixel step`, - GObject.ParamFlags.READWRITE, - 0.0, 1.0, - 0.0, - ), 'sigma': GObject.ParamSpec.double( `sigma`, `sigma`, @@ -43,37 +34,77 @@ export const BlurEffect = new GObject.registerClass({ 0.0, 1.0, 0.6, ), - 'direction': GObject.ParamSpec.double( + 'width': GObject.ParamSpec.double( + `width`, + `Width`, + `Width`, + GObject.ParamFlags.READWRITE, + 0.0, Number.MAX_SAFE_INTEGER, + 0.0, + ), + 'height': GObject.ParamSpec.double( + `height`, + `Height`, + `Height`, + GObject.ParamFlags.READWRITE, + 0.0, Number.MAX_SAFE_INTEGER, + 0.0, + ), + 'radius': GObject.ParamSpec.double( + `radius`, + `Radius`, + `Radius`, + GObject.ParamFlags.READWRITE, + 0, Number.MAX_SAFE_INTEGER, + 0, + ), + 'direction': GObject.ParamSpec.int( `direction`, `Direction`, - `Blur direction`, + `Direction`, GObject.ParamFlags.READWRITE, - 0.0, 1.0, - 0.0, + 0, 1, + 0, + ), + 'chained_effect': GObject.ParamSpec.object( + `chained_effect`, + `Chained Effect`, + `Chained Effect`, + GObject.ParamFlags.READABLE, + GObject.Object, ), } }, class BlurEffect extends Clutter.ShaderEffect { constructor(params, settings) { super(params); - this._pixel_step = null; this._sigma = null; this._brightness = null; - this._direction = null; + this._width = null; + this._height = null; + this._radius = null; this._static = true; this._settings = settings; this._tex = null; - if (params.pixel_step) - this.pixel_step = params.pixel_step; + this._direction = 0; + + this._chained_effect = null; + if (params.sigma) this.sigma = params.sigma; if (params.brightness) - this.brightness = params.brightness; + this.brightness = params.brightness; + if (params.width) + this.width = params.width; + if (params.height) + this.height = params.height; + if (params.radius) + this.radius = params.radius; if (params.direction) - this.direction = params.direction; + this.direction = params.direction; // set shader source this._source = get_shader_source(); @@ -81,18 +112,6 @@ export const BlurEffect = new GObject.registerClass({ this.set_shader_source(this._source); } - get pixel_step() { - return this._pixel_step; - } - - set pixel_step(value) { - if (this._pixel_step !== value) { - this._pixel_step = value; - - this.set_uniform_value('pixel_step', parseFloat(this._pixel_step-1e-6)); - } - } - get sigma() { return this._sigma; } @@ -102,6 +121,10 @@ export const BlurEffect = new GObject.registerClass({ this._sigma = value; this.set_uniform_value('sigma', parseFloat(this._sigma-1e-6)); + + if(this._chained_effect) { + this._chained_effect.sigma = value; + } } } @@ -114,6 +137,58 @@ export const BlurEffect = new GObject.registerClass({ this._brightness = value; this.set_uniform_value('brightness', parseFloat(this._brightness-1e-6)); + + if(this._chained_effect) { + this._chained_effect.brightness = value; + } + } + } + + get width() { + return this._width; + } + + set width(value) { + if (this._width !== value) { + this._width = value; + + this.set_uniform_value('width', parseFloat(this._width - 1e-6)); + + if(this._chained_effect) { + this._chained_effect.width = value; + } + } + } + + get height() { + return this._height; + } + + set height(value) { + if (this._height !== value) { + this._height = value; + + this.set_uniform_value('height', parseFloat(this._height - 1e-6)); + + if(this._chained_effect) { + this._chained_effect.height = value; + } + } + } + + get radius() { + return this._radius; + } + + set radius(value) { + if (this._radius !== value) { + this._radius = value; + + this.set_uniform_value('radius', parseFloat(this._radius - 1e-6)); + + if(this._chained_effect) { + this._chained_effect.radius = value; + } } } @@ -124,36 +199,32 @@ export const BlurEffect = new GObject.registerClass({ set direction(value) { if (this._direction !== value) { this._direction = value; - - this.set_uniform_value('dir', this._direction); } } + get chained_effect() { + return this._chained_effect; + } - vfunc_paint_target(paint_node = null, paint_context = null) { - /*let tex = this.get_pipeline().get_layer_texture(0); - if(tex !== null) { - this._tex = tex; + vfunc_set_actor(actor) { + super.vfunc_set_actor(actor); + + if(this._direction == 0) { + this._chained_effect = new BlurEffect({ + sigma: this.sigma, + brightness: this.brightness, + width: this.width, + height: this.height, + radius: this.radius, + direction: 1 + }); + actor.add_effect(this._chained_effect); } - console.log("blur original texture width, height: ", this._tex.get_width(), this._tex.get_height()); - - let data = new Uint8Array(this._tex.get_width()*this._tex.get_height()*24); - this._tex.get_data(Cogl.PixelFormat.RGB_888, this._tex.get_width()*24, data); - - let new_tex_img = new Clutter.Image(); - new_tex_img.set_data( - data, - Cogl.PixelFormat.RGB_888, - this._tex.get_width(), this._tex.get_height(), this._tex.get_width()*24 - ); - - - this.get_pipeline().set_layer_texture(0,new_tex); - - //Invalid uniform of type 'CoglTexture2D' for name 'tex' - //this.set_uniform_value("tex", this._tex); - */ + } + + vfunc_paint_target(paint_node = null, paint_context = null) { this.set_uniform_value("tex", 0); + this.set_uniform_value('dir', this._direction); if (paint_node && paint_context) super.vfunc_paint_target(paint_node, paint_context); diff --git a/src/effects/rounding_effect.glsl b/src/effects/rounding_effect.glsl deleted file mode 100644 index 7f810571..00000000 --- a/src/effects/rounding_effect.glsl +++ /dev/null @@ -1,53 +0,0 @@ -uniform sampler2D tex; -uniform float radius; -uniform float width; -uniform float height; - -float circleBounds(vec2 p, vec2 center, float clip_radius) { - vec2 delta = p - center; - float dist_squared = dot(delta, delta); - - float outer_radius = clip_radius + 0.5; - if (dist_squared >= (outer_radius * outer_radius)) - return 0.0; - - float inner_radius = clip_radius - 0.5; - if (dist_squared <= (inner_radius * inner_radius)) - return 1.0; - - return outer_radius - sqrt(dist_squared); -} - -vec4 shapeCorner(vec4 pixel, vec2 p, vec2 center, float clip_radius) { - float alpha = circleBounds(p, center, clip_radius); - return vec4(pixel.rgb * alpha, min(alpha, pixel.a)); -} - -vec2 pixel_coord = cogl_tex_coord_in[0].xy; -vec2 pos = pixel_coord * vec2(width, height); - -void main(void) { - vec4 outColor = texture2D(tex, pixel_coord); - - // left side - if (pos.x < radius) { - // top left corner - if (pos.y < radius) { - outColor = shapeCorner(outColor, pos, vec2(radius + 2., radius + 2.), radius); - // bottom left corner - } else if (pos.y > height - radius) { - outColor = shapeCorner(outColor, pos, vec2(radius + 2., height - radius - 1.), radius); - } - // right side - } else if (pos.x > width - radius) { - // top right corner - if (pos.y < radius) { - outColor = shapeCorner(outColor, pos, vec2(width - radius - 1., radius + 2.), radius); - // bottom right corner - } else if (pos.y > height - radius) { - outColor = shapeCorner(outColor, pos, vec2(width - radius - 1., height - radius - 1.), radius); - } - } - - cogl_color_out = outColor; -} \ No newline at end of file diff --git a/src/effects/rounding_effect.js b/src/effects/rounding_effect.js deleted file mode 100644 index f7292510..00000000 --- a/src/effects/rounding_effect.js +++ /dev/null @@ -1,117 +0,0 @@ -import GLib from 'gi://GLib'; -import GObject from 'gi://GObject'; -import Clutter from 'gi://Clutter'; -import Shell from 'gi://Shell'; - -const SHADER_PATH = GLib.filename_from_uri(GLib.uri_resolve_relative(import.meta.url, 'rounding_effect.glsl', GLib.UriFlags.NONE))[0]; - - -const get_shader_source = _ => { - try { - return Shell.get_file_contents_utf8_sync(SHADER_PATH); - } catch (e) { - console.warn(`[Blur my Shell] error loading shader from ${SHADER_PATH}: ${e}`); - return null; - } -}; - -export const RoundingEffect = new GObject.registerClass({ - GTypeName: "RoundingEffect", - Properties: { - 'width': GObject.ParamSpec.double( - `width`, - `Width`, - `Width`, - GObject.ParamFlags.READWRITE, - 0.0, Number.MAX_SAFE_INTEGER, - 0.0, - ), - 'height': GObject.ParamSpec.double( - `height`, - `Height`, - `Height`, - GObject.ParamFlags.READWRITE, - 0.0, Number.MAX_SAFE_INTEGER, - 0.0, - ), - 'radius': GObject.ParamSpec.double( - `radius`, - `Radius`, - `Radius`, - GObject.ParamFlags.READWRITE, - 0.0, Number.MAX_SAFE_INTEGER, - 0.0, - ), - } -}, class RoundingEffect extends Clutter.ShaderEffect { - constructor(params, settings) { - super(params); - - this._width = null; - this._height = null; - this._radius = null; - - this._static = true; - this._settings = settings; - - if (params.width) - this.width = params.width; - if (params.height) - this.height = params.height; - if (params.radius) - this.radius = params.radius; - - // set shader source - this._source = get_shader_source(); - if (this._source) - this.set_shader_source(this._source); - } - - get width() { - return this._width; - } - - set width(value) { - if (this._width !== value) { - this._width = value; - - this.set_uniform_value('width', parseFloat(this._width - 1e-6)); - } - } - - get height() { - return this._height; - } - - set height(value) { - if (this._height !== value) { - this._height = value; - - this.set_uniform_value('height', parseFloat(this._height - 1e-6)); - } - } - - get radius() { - return this._radius; - } - - set radius(value) { - if (this._radius !== value) { - this._radius = value; - - this.set_uniform_value('radius', parseFloat(this._radius - 1e-6)); - } - } - - - vfunc_paint_target(paint_node = null, paint_context = null) { - this.set_uniform_value("tex", 0); - - if (paint_node && paint_context) - super.vfunc_paint_target(paint_node, paint_context); - else if (paint_node) - super.vfunc_paint_target(paint_node); - else - super.vfunc_paint_target(); - } -}); \ No newline at end of file From 0d55ee9bfb05f29e3fc879081815d2934e405fbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Hamy?= Date: Mon, 4 Mar 2024 14:34:08 +0100 Subject: [PATCH 07/12] Prettifyied, changed `radius` to `corner_radius` and preferences updates --- resources/ui/applications.ui | 14 +++-- resources/ui/dash.ui | 62 ++++++++++--------- resources/ui/panel.ui | 46 ++++++++------ ...shell.extensions.blur-my-shell.gschema.xml | 57 ++++++++++------- src/components/dash_to_dock.js | 48 +++++++------- src/conveniences/keys.js | 2 +- src/effects/blur_effect.glsl | 46 +++++++------- src/effects/blur_effect.js | 52 ++++++++-------- src/extension.js | 4 +- src/preferences/dash.js | 8 +-- 10 files changed, 183 insertions(+), 156 deletions(-) diff --git a/resources/ui/applications.ui b/resources/ui/applications.ui index 0b4b83ca..a051923d 100644 --- a/resources/ui/applications.ui +++ b/resources/ui/applications.ui @@ -19,7 +19,8 @@ To get the best results possible, make sure to choose the option “No artifact - + @@ -27,8 +28,9 @@ To get the best results possible, make sure to choose the option “No artifact Opacity The opacity of the window on top of the blur effect, a higher value will be more legible. - opacity - + opacity_scale + @@ -52,7 +54,8 @@ To get the best results possible, make sure to choose the option “No artifact Forces the blur to be properly shown on all workspaces on overview. This may cause some latency or performance issues. blur_on_overview - + @@ -68,7 +71,8 @@ This may cause some latency or performance issues. Adds blur behind all windows by default. Not recommended because of performance and stability issues. enable_all - + diff --git a/resources/ui/dash.ui b/resources/ui/dash.ui index a5e57fd3..6abd43e8 100644 --- a/resources/ui/dash.ui +++ b/resources/ui/dash.ui @@ -8,8 +8,7 @@ Dash to Dock blur - Blur the background of the Dash to Dock - extension, if it is used. + Blur the background of the Dash to Dock extension, if it is used. center @@ -24,32 +23,41 @@ - + Static blur - Uses a static blurred image, can be used - with rounding effect. - true + Uses a static blurred image, can be used with rounding effect. + static_blur - - Round corner radius - The radius for the rounding effect. - radius_scale + + center + + + + - - - center - true - 200px - true - right - horizontal - 0 - radius - - + + + Rounded corner radius + The radius for the rounding effect. Only available with static blur. + corner_radius_scale + + + + + + center + true + 200px + true + right + horizontal + 0 + corner_radius @@ -58,8 +66,7 @@ Override background - Makes the background either transparent or - semi-transparent, disable this to use Dash to Dock preferences instead. + Makes the background either transparent or semi-transparent, disable this to use Dash to Dock preferences instead. true @@ -85,8 +92,7 @@ Disable in overview - Disables the blur from Dash to Dock when - entering the overview. + Disables the blur from Dash to Dock when entering the overview. unblur_in_overview @@ -110,9 +116,9 @@ - + 0 - 40 + 50 1 \ No newline at end of file diff --git a/resources/ui/panel.ui b/resources/ui/panel.ui index 4e14b004..60800acb 100644 --- a/resources/ui/panel.ui +++ b/resources/ui/panel.ui @@ -17,7 +17,8 @@ - + @@ -26,7 +27,8 @@ Static blur Uses a static blurred image, more performant and stable. static_blur - + @@ -36,27 +38,13 @@ - - - Disable in overview - Disables the blur from the panel when entering the overview. - unblur_in_overview - - - - - center - - - - - Force light text Use a light text for the panel, useful when using gnome-shell's light theme. force_light_text - + @@ -72,7 +60,8 @@ Override the background of the panel to use a transparent or semi-transparent one. Recommended unless you want to customize your GNOME theme. true - + @@ -104,6 +93,22 @@ Recommended unless you want to customize your GNOME theme. + + + + Disable in overview + Disables the blur from the panel when entering the overview. + unblur_in_overview + + + + + center + + + + @@ -118,7 +123,8 @@ Recommended unless you want to customize your GNOME theme. Hidetopbar extension Does not disable the blur in overview, best used with static blur. hidetopbar_compatibility - + diff --git a/schemas/org.gnome.shell.extensions.blur-my-shell.gschema.xml b/schemas/org.gnome.shell.extensions.blur-my-shell.gschema.xml index de7b046a..1e237e7b 100644 --- a/schemas/org.gnome.shell.extensions.blur-my-shell.gschema.xml +++ b/schemas/org.gnome.shell.extensions.blur-my-shell.gschema.xml @@ -1,11 +1,12 @@ - + 30 - Global sigma (gaussian blur radius) to use + Global gaussian sigma to use @@ -56,7 +57,8 @@ - + true @@ -70,7 +72,7 @@ 30 - Sigma (gaussian blur radius) to use for the blur effect + Gaussian sigma to use for the blur effect @@ -100,7 +102,8 @@ - + true @@ -114,7 +117,7 @@ 30 - Sigma (gaussian blur radius) to use for the blur effect + Gaussian sigma to use for the blur effect @@ -144,7 +147,8 @@ - + true @@ -158,7 +162,7 @@ 30 - Sigma (gaussian blur radius) to use for the blur effect + Gaussian sigma to use for the blur effect @@ -213,7 +217,8 @@ - + false @@ -227,7 +232,7 @@ 30 - Sigma (gaussian blur radius) to use for the blur effect + Gaussian sigma to use for the blur effect @@ -270,14 +275,15 @@ Boolean, whether to disable blur from this component when opening the overview or not - - 0 - Radius for corner rounding effect + + 12 + Radius for the corner rounding effect - + false @@ -291,7 +297,7 @@ 30 - Sigma (gaussian blur radius) to use for the blur effect + Gaussian sigma to use for the blur effect @@ -341,7 +347,8 @@ - + true @@ -355,7 +362,7 @@ 30 - Sigma (gaussian blur radius) to use for the blur effect + Gaussian sigma to use for the blur effect @@ -380,7 +387,8 @@ - + true @@ -394,7 +402,7 @@ 30 - Sigma (gaussian blur radius) to use for the blur effect + Gaussian sigma to use for the blur effect @@ -419,7 +427,8 @@ - + true @@ -433,7 +442,7 @@ 30 - Sigma (gaussian blur radius) to use for the blur effect + Gaussian sigma to use for the blur effect @@ -458,7 +467,8 @@ - + false @@ -467,7 +477,8 @@ - + true diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index 9ca08549..83503bc9 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -71,11 +71,13 @@ class DashInfos { this.effect.brightness = this.dash_blur.brightness; }); - dash_blur.connections.connect(dash_blur, 'update-radius', () => { + dash_blur.connections.connect(dash_blur, 'update-corner-radius', () => { if (this.dash_blur.is_static) { let monitor = find_monitor_for(this.dash); - let radius = this.dash_blur.radius * monitor.geometry_scale; - this.effect.radius = Math.min(radius, Math.min(this.effect.width/2, this.effect.height/2)); + let corner_radius = this.dash_blur.corner_radius * monitor.geometry_scale; + this.effect.corner_radius = Math.min( + corner_radius, this.effect.width / 2, this.effect.height / 2 + ); } }); @@ -123,7 +125,7 @@ class DashInfos { this.background.content.set({ background: bg.get_content().background }); - this._log('bg set'); + this._log('wallpaper updated'); } else { this._warn("could not get background for dash-to-dock"); } @@ -140,9 +142,7 @@ class DashInfos { this.effect.width = this.dash_background.width; this.effect.height = this.dash_background.height; - this.dash_blur.set_radius(this.dash_blur.radius); - - let dash_box = this.dash_container._slider.get_child(); + this.dash_blur.set_corner_radius(this.dash_blur.corner_radius); if (dash_container.get_style_class_name().includes("top")) { this.background.set_clip(x, y + this.dash.y + this.dash_background.y, this.dash_background.width, this.dash_background.height); @@ -181,10 +181,10 @@ class DashInfos { let monitor = find_monitor_for(dash_container); let dash_box = dash_container._slider.get_child(); - if (dash_container.get_style_class_name().includes("top")) { + if (dash_container.get_style_class_name().includes("top")) { x = (monitor.width - dash_background.width) / 2; y = dash_box.y; - } else if (dash_container.get_style_class_name().includes("bottom")) { + } else if (dash_container.get_style_class_name().includes("bottom")) { x = (monitor.width - dash_background.width) / 2; y = monitor.height - dash_container.height; } else if (dash_container.get_style_class_name().includes("left")) { @@ -220,7 +220,7 @@ export const DashBlur = class DashBlur { this.brightness = this.settings.dash_to_dock.CUSTOMIZE ? this.settings.dash_to_dock.BRIGHTNESS : this.settings.BRIGHTNESS; - this.radius = this.settings.dash_to_dock.RADIUS; + this.corner_radius = this.settings.dash_to_dock.CORNER_RADIUS; this.is_static = this.settings.dash_to_dock.STATIC_BLUR; this.enabled = false; } @@ -288,7 +288,7 @@ export const DashBlur = class DashBlur { let dash_background = dash.get_children().find(child => { return child.get_style_class_name() === 'dash-background'; }); - + let [background, effect] = this.add_blur(dash, dash_background, dash_container); this.update_wallpaper(); @@ -319,18 +319,18 @@ export const DashBlur = class DashBlur { this.update_wallpaper(); this.update_size(); }); - + background_parent.add_child(background); dash.get_parent().insert_child_at_index(background_parent, 0); // create infos let infos = new DashInfos( - this, - dash, + this, + dash, dash_container, dash_background, - background, - background_parent, + background, + background_parent, effect ); @@ -361,15 +361,15 @@ export const DashBlur = class DashBlur { // the effect to be applied if (this.is_static) { - let radius = this.radius * monitor.geometry_scale; - radius = Math.min(radius, Math.min(dash_background.width/2, dash_background.height/2)); - + let corner_radius = this.corner_radius * monitor.geometry_scale; + corner_radius = Math.min(corner_radius, dash_background.width / 2, dash_background.height / 2); + let effect_static = new BlurEffect({ - sigma: this.sigma, + sigma: this.sigma * monitor.geometry_scale, brightness: this.brightness, width: dash_background.width, height: dash_background.height, - radius: radius + corner_radius: corner_radius }); // connect to every background change (even without changing image) @@ -505,9 +505,9 @@ export const DashBlur = class DashBlur { this.emit('update-brightness', true); } - set_radius(radius) { - this.radius = radius; - this.emit('update-radius', true); + set_corner_radius(radius) { + this.corner_radius = radius; + this.emit('update-corner-radius', true); } // not implemented for dynamic blur diff --git a/src/conveniences/keys.js b/src/conveniences/keys.js index 103693b9..71a357c2 100644 --- a/src/conveniences/keys.js +++ b/src/conveniences/keys.js @@ -68,7 +68,7 @@ export const Keys = [ { type: Type.B, name: "unblur-in-overview" }, { type: Type.B, name: "override-background" }, { type: Type.I, name: "style-dash-to-dock" }, - { type: Type.I, name: "radius" }, + { type: Type.I, name: "corner-radius" }, ] }, { diff --git a/src/effects/blur_effect.glsl b/src/effects/blur_effect.glsl index decb21f5..567105db 100644 --- a/src/effects/blur_effect.glsl +++ b/src/effects/blur_effect.glsl @@ -2,7 +2,7 @@ uniform sampler2D tex; uniform float sigma; uniform int dir; uniform float brightness; -uniform float radius; +uniform float corner_radius; uniform float width; uniform float height; @@ -28,7 +28,7 @@ vec4 shapeCorner(vec4 pixel, vec2 p, vec2 center, float clip_radius) { void main(void) { vec2 uv = cogl_tex_coord_in[0].xy; - vec2 direction = vec2(dir, (1.0-dir)); + vec2 direction = vec2(dir, (1.0 - dir)); float pixel_step; if (dir == 0) @@ -37,30 +37,30 @@ void main(void) { pixel_step = 1.0 / width; vec3 gauss_coefficient; - gauss_coefficient.x = 1.0 / (sqrt (2.0 * 3.14159265) * sigma); - gauss_coefficient.y = exp (-0.5 / (sigma * sigma)); + gauss_coefficient.x = 1.0 / (sqrt(2.0 * 3.14159265) * sigma); + gauss_coefficient.y = exp(-0.5 / (sigma * sigma)); gauss_coefficient.z = gauss_coefficient.y * gauss_coefficient.y; float gauss_coefficient_total = gauss_coefficient.x; - vec4 ret = texture2D (tex, uv) * gauss_coefficient.x; + vec4 ret = texture2D(tex, uv) * gauss_coefficient.x; gauss_coefficient.xy *= gauss_coefficient.yz; - int n_steps = int (ceil (1.5 * sigma)) * 2; + int n_steps = int(ceil(1.5 * sigma)) * 2; for (int i = 1; i <= n_steps; i += 2) { float coefficient_subtotal = gauss_coefficient.x; gauss_coefficient.xy *= gauss_coefficient.yz; coefficient_subtotal += gauss_coefficient.x; - + float gauss_ratio = gauss_coefficient.x / coefficient_subtotal; - - float foffset = float (i) + gauss_ratio; + + float foffset = float(i) + gauss_ratio; vec2 offset = direction * foffset * pixel_step; - - ret += texture2D (tex, uv + offset) * coefficient_subtotal; - ret += texture2D (tex, uv - offset) * coefficient_subtotal; - + + ret += texture2D(tex, uv + offset) * coefficient_subtotal; + ret += texture2D(tex, uv - offset) * coefficient_subtotal; + gauss_coefficient_total += 2.0 * coefficient_subtotal; gauss_coefficient.xy *= gauss_coefficient.yz; } @@ -71,22 +71,22 @@ void main(void) { vec2 pos = uv * vec2(width, height); // left side - if (pos.x < radius) { + if (pos.x < corner_radius) { // top left corner - if (pos.y < radius) { - outColor = shapeCorner(outColor, pos, vec2(radius + 2., radius + 2.), radius); + if (pos.y < corner_radius) { + outColor = shapeCorner(outColor, pos, vec2(corner_radius + 2., corner_radius + 2.), corner_radius); // bottom left corner - } else if (pos.y > height - radius) { - outColor = shapeCorner(outColor, pos, vec2(radius + 2., height - radius - 1.), radius); + } else if (pos.y > height - corner_radius) { + outColor = shapeCorner(outColor, pos, vec2(corner_radius + 2., height - corner_radius - 1.), corner_radius); } // right side - } else if (pos.x > width - radius) { + } else if (pos.x > width - corner_radius) { // top right corner - if (pos.y < radius) { - outColor = shapeCorner(outColor, pos, vec2(width - radius - 1., radius + 2.), radius); + if (pos.y < corner_radius) { + outColor = shapeCorner(outColor, pos, vec2(width - corner_radius - 1., corner_radius + 2.), corner_radius); // bottom right corner - } else if (pos.y > height - radius) { - outColor = shapeCorner(outColor, pos, vec2(width - radius - 1., height - radius - 1.), radius); + } else if (pos.y > height - corner_radius) { + outColor = shapeCorner(outColor, pos, vec2(width - corner_radius - 1., height - corner_radius - 1.), corner_radius); } } diff --git a/src/effects/blur_effect.js b/src/effects/blur_effect.js index ec4d7eed..40a78539 100644 --- a/src/effects/blur_effect.js +++ b/src/effects/blur_effect.js @@ -50,10 +50,10 @@ export const BlurEffect = new GObject.registerClass({ 0.0, Number.MAX_SAFE_INTEGER, 0.0, ), - 'radius': GObject.ParamSpec.double( - `radius`, - `Radius`, - `Radius`, + 'corner_radius': GObject.ParamSpec.double( + `corner_radius`, + `Corner Radius`, + `Corner Radius`, GObject.ParamFlags.READWRITE, 0, Number.MAX_SAFE_INTEGER, 0, @@ -82,7 +82,7 @@ export const BlurEffect = new GObject.registerClass({ this._brightness = null; this._width = null; this._height = null; - this._radius = null; + this._corner_radius = null; this._static = true; this._settings = settings; @@ -94,15 +94,15 @@ export const BlurEffect = new GObject.registerClass({ this._chained_effect = null; if (params.sigma) - this.sigma = params.sigma; + this.sigma = params.sigma; if (params.brightness) - this.brightness = params.brightness; + this.brightness = params.brightness; if (params.width) this.width = params.width; if (params.height) this.height = params.height; - if (params.radius) - this.radius = params.radius; + if (params.corner_radius) + this.corner_radius = params.corner_radius; if (params.direction) this.direction = params.direction; @@ -120,9 +120,9 @@ export const BlurEffect = new GObject.registerClass({ if (this._sigma !== value) { this._sigma = value; - this.set_uniform_value('sigma', parseFloat(this._sigma-1e-6)); + this.set_uniform_value('sigma', parseFloat(this._sigma - 1e-6)); - if(this._chained_effect) { + if (this._chained_effect) { this._chained_effect.sigma = value; } } @@ -136,9 +136,9 @@ export const BlurEffect = new GObject.registerClass({ if (this._brightness !== value) { this._brightness = value; - this.set_uniform_value('brightness', parseFloat(this._brightness-1e-6)); + this.set_uniform_value('brightness', parseFloat(this._brightness - 1e-6)); - if(this._chained_effect) { + if (this._chained_effect) { this._chained_effect.brightness = value; } } @@ -154,7 +154,7 @@ export const BlurEffect = new GObject.registerClass({ this.set_uniform_value('width', parseFloat(this._width - 1e-6)); - if(this._chained_effect) { + if (this._chained_effect) { this._chained_effect.width = value; } } @@ -170,24 +170,24 @@ export const BlurEffect = new GObject.registerClass({ this.set_uniform_value('height', parseFloat(this._height - 1e-6)); - if(this._chained_effect) { + if (this._chained_effect) { this._chained_effect.height = value; } } } - get radius() { - return this._radius; + get corner_radius() { + return this._corner_radius; } - set radius(value) { - if (this._radius !== value) { - this._radius = value; + set corner_radius(value) { + if (this._corner_radius !== value) { + this._corner_radius = value; - this.set_uniform_value('radius', parseFloat(this._radius - 1e-6)); + this.set_uniform_value('corner_radius', parseFloat(this._corner_radius - 1e-6)); - if(this._chained_effect) { - this._chained_effect.radius = value; + if (this._chained_effect) { + this._chained_effect.corner_radius = value; } } } @@ -209,13 +209,13 @@ export const BlurEffect = new GObject.registerClass({ vfunc_set_actor(actor) { super.vfunc_set_actor(actor); - if(this._direction == 0) { + if (this._direction == 0) { this._chained_effect = new BlurEffect({ sigma: this.sigma, brightness: this.brightness, width: this.width, height: this.height, - radius: this.radius, + corner_radius: this.corner_radius, direction: 1 }); actor.add_effect(this._chained_effect); @@ -224,7 +224,7 @@ export const BlurEffect = new GObject.registerClass({ vfunc_paint_target(paint_node = null, paint_context = null) { this.set_uniform_value("tex", 0); - this.set_uniform_value('dir', this._direction); + this.set_uniform_value("dir", this._direction); if (paint_node && paint_context) super.vfunc_paint_target(paint_node, paint_context); diff --git a/src/extension.js b/src/extension.js index 26fc4497..556f3722 100644 --- a/src/extension.js +++ b/src/extension.js @@ -371,9 +371,9 @@ export default class BlurMyShell extends Extension { }); // dash-to-dock corner radius changed - this._settings.dash_to_dock.RADIUS_changed(() => { + this._settings.dash_to_dock.CORNER_RADIUS_changed(() => { if (this._settings.dash_to_dock.STATIC_BLUR) - this._dash_to_dock_blur.set_radius(this._settings.dash_to_dock.RADIUS); + this._dash_to_dock_blur.set_corner_radius(this._settings.dash_to_dock.CORNER_RADIUS); }); // dash-to-dock override background toggled on/off diff --git a/src/preferences/dash.js b/src/preferences/dash.js index 35ef348f..3a42ff20 100644 --- a/src/preferences/dash.js +++ b/src/preferences/dash.js @@ -11,7 +11,7 @@ export const Dash = GObject.registerClass({ 'blur', 'customize', 'static_blur', - 'radius', + 'corner_radius', 'override_background', 'style_dash_to_dock', 'unblur_in_overview' @@ -28,12 +28,12 @@ export const Dash = GObject.registerClass({ ); this.preferences.dash_to_dock.settings.bind( 'static-blur', - this._static_blur, 'enable-expansion', + this._static_blur, 'active', Gio.SettingsBindFlags.DEFAULT ); this.preferences.dash_to_dock.settings.bind( - 'radius', - this._radius, 'value', + 'corner-radius', + this._corner_radius, 'value', Gio.SettingsBindFlags.DEFAULT ); this.preferences.dash_to_dock.settings.bind( From c379eab114974931d36a24266c90a979f5c1005d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Hamy?= Date: Mon, 4 Mar 2024 14:40:15 +0100 Subject: [PATCH 08/12] Simplified style removal for the dash --- src/components/dash_to_dock.js | 30 ++++++++++++------------------ 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index 83503bc9..89650286 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -53,11 +53,7 @@ class DashInfos { dash_blur.connections.connect(dash_blur, 'remove-dashes', () => { this._log("removing blur from dash"); this.dash.get_parent().remove_child(this.background_parent); - this.dash._background.style = this.old_style; - - DASH_STYLES.forEach( - style => this.dash.remove_style_class_name(style) - ); + this.remove_style(); }); dash_blur.connections.connect(dash_blur, 'update-sigma', () => { @@ -82,24 +78,14 @@ class DashInfos { }); dash_blur.connections.connect(dash_blur, 'override-background', () => { - this.dash._background.style = null; - - DASH_STYLES.forEach( - style => this.dash.remove_style_class_name(style) - ); + this.remove_style(); this.dash.set_style_class_name( DASH_STYLES[this.settings.dash_to_dock.STYLE_DASH_TO_DOCK] ); }); - dash_blur.connections.connect(dash_blur, 'reset-background', () => { - this.dash._background.style = this.old_style; - - DASH_STYLES.forEach( - style => this.dash.remove_style_class_name(style) - ); - }); + dash_blur.connections.connect(dash_blur, 'reset-background', () => this.remove_style()); dash_blur.connections.connect(dash_blur, 'show', () => { if (this.dash_blur.is_static) @@ -175,7 +161,15 @@ class DashInfos { }); } - get_dash_position(dash_container, dash_background, dash) { + remove_style() { + this.dash._background.style = this.old_style; + + DASH_STYLES.forEach( + style => this.dash.remove_style_class_name(style) + ); + } + + get_dash_position(dash_container, dash_background) { var x, y; let monitor = find_monitor_for(dash_container); From 9ec8cc177a8ac2aef1c366c093f73250422b1a4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Hamy?= Date: Mon, 4 Mar 2024 14:49:35 +0100 Subject: [PATCH 09/12] Use `radius` instead of `sigma` for the custom blur effect --- src/components/dash_to_dock.js | 2 +- src/effects/blur_effect.js | 25 +++++++++++++------------ 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index 89650286..460593b4 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -359,7 +359,7 @@ export const DashBlur = class DashBlur { corner_radius = Math.min(corner_radius, dash_background.width / 2, dash_background.height / 2); let effect_static = new BlurEffect({ - sigma: this.sigma * monitor.geometry_scale, + radius: 2 * this.sigma * monitor.geometry_scale, brightness: this.brightness, width: dash_background.width, height: dash_background.height, diff --git a/src/effects/blur_effect.js b/src/effects/blur_effect.js index 40a78539..2bc385f0 100644 --- a/src/effects/blur_effect.js +++ b/src/effects/blur_effect.js @@ -18,10 +18,10 @@ const get_shader_source = _ => { export const BlurEffect = new GObject.registerClass({ GTypeName: "BlurEffect", Properties: { - 'sigma': GObject.ParamSpec.double( - `sigma`, - `sigma`, - `Blur sigma`, + 'radius': GObject.ParamSpec.double( + `radius`, + `Radius`, + `Blur radius`, GObject.ParamFlags.READWRITE, 0.0, 2000.0, 200.0, @@ -112,18 +112,19 @@ export const BlurEffect = new GObject.registerClass({ this.set_shader_source(this._source); } - get sigma() { - return this._sigma; + get radius() { + return this._radius; } - set sigma(value) { - if (this._sigma !== value) { - this._sigma = value; + set radius(value) { + if (this._radius !== value) { + this._radius = value; - this.set_uniform_value('sigma', parseFloat(this._sigma - 1e-6)); + // like Clutter, we use the assumption radius = 2*sigma + this.set_uniform_value('sigma', parseFloat(this._radius / 2 - 1e-6)); if (this._chained_effect) { - this._chained_effect.sigma = value; + this._chained_effect.radius = value; } } } @@ -211,7 +212,7 @@ export const BlurEffect = new GObject.registerClass({ if (this._direction == 0) { this._chained_effect = new BlurEffect({ - sigma: this.sigma, + radius: this.radius, brightness: this.brightness, width: this.width, height: this.height, From 6cc87c057ed6b91afd8a7eb556dc0911d218d5fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Hamy?= Date: Mon, 4 Mar 2024 15:23:36 +0100 Subject: [PATCH 10/12] Correct bad sigma renaming and added monitor scale for dash --- src/components/dash_to_dock.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index 460593b4..d62916e9 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -57,10 +57,11 @@ class DashInfos { }); dash_blur.connections.connect(dash_blur, 'update-sigma', () => { - this.effect.sigma = this.dash_blur.sigma; if (this.dash_blur.is_static) { this.dash_blur.update_size(); - } + this.effect.radius = 2 * this.dash_blur.sigma * this.effect.scale; + } else + this.effect.sigma = this.dash_blur.sigma * this.effect.scale; }); dash_blur.connections.connect(dash_blur, 'update-brightness', () => { @@ -91,7 +92,7 @@ class DashInfos { if (this.dash_blur.is_static) this.background_parent.show(); else - this.effect.sigma = this.dash_blur.sigma; + this.effect.sigma = this.dash_blur.sigma * this.effect.scale; }); dash_blur.connections.connect(dash_blur, 'hide', () => { @@ -366,6 +367,9 @@ export const DashBlur = class DashBlur { corner_radius: corner_radius }); + // store the scale in the effect in order to retrieve it in set_sigma + effect_static.scale = monitor.geometry_scale; + // connect to every background change (even without changing image) // FIXME this signal is fired very often, so we should find another one // fired only when necessary (but that still catches all cases) @@ -381,10 +385,13 @@ export const DashBlur = class DashBlur { } else { let effect = new Shell.BlurEffect({ brightness: this.brightness, - sigma: this.sigma, + sigma: this.sigma * monitor.geometry_scale, mode: Shell.BlurMode.BACKGROUND }); + // store the scale in the effect in order to retrieve it in set_sigma + effect.scale = monitor.geometry_scale; + background.add_effect(effect); // HACK From 0217828d50e8274b32e0b9f770cc06b588bccc8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Hamy?= Date: Tue, 5 Mar 2024 13:48:13 +0100 Subject: [PATCH 11/12] Remove unuseful changes --- Makefile | 2 +- resources/ui/applications.ui | 12 ++++-------- resources/ui/dash.ui | 18 ++++++------------ resources/ui/panel.ui | 18 ++++++------------ 4 files changed, 17 insertions(+), 33 deletions(-) diff --git a/Makefile b/Makefile index a792075e..8e2080b3 100644 --- a/Makefile +++ b/Makefile @@ -46,7 +46,7 @@ pot: test-shell: install env GNOME_SHELL_SLOWDOWN_FACTOR=2 \ MUTTER_DEBUG_DUMMY_MODE_SPECS=1500x1000 \ - MUTTER_DEBUG_DUMMY_MONITOR_SCALES=3 \ + MUTTER_DEBUG_DUMMY_MONITOR_SCALES=1 \ dbus-run-session -- gnome-shell --nested --wayland diff --git a/resources/ui/applications.ui b/resources/ui/applications.ui index a051923d..54b0a02b 100644 --- a/resources/ui/applications.ui +++ b/resources/ui/applications.ui @@ -19,8 +19,7 @@ To get the best results possible, make sure to choose the option “No artifact - + @@ -29,8 +28,7 @@ To get the best results possible, make sure to choose the option “No artifact Opacity The opacity of the window on top of the blur effect, a higher value will be more legible. opacity_scale - + @@ -54,8 +52,7 @@ To get the best results possible, make sure to choose the option “No artifact Forces the blur to be properly shown on all workspaces on overview. This may cause some latency or performance issues. blur_on_overview - + @@ -71,8 +68,7 @@ This may cause some latency or performance issues. Adds blur behind all windows by default. Not recommended because of performance and stability issues. enable_all - + diff --git a/resources/ui/dash.ui b/resources/ui/dash.ui index 6abd43e8..ce7db902 100644 --- a/resources/ui/dash.ui +++ b/resources/ui/dash.ui @@ -27,8 +27,7 @@ Static blur Uses a static blurred image, can be used with rounding effect. static_blur - + @@ -43,10 +42,8 @@ Rounded corner radius The radius for the rounding effect. Only available with static blur. corner_radius_scale - - + + @@ -68,14 +65,12 @@ Override background Makes the background either transparent or semi-transparent, disable this to use Dash to Dock preferences instead. true - + Background style - The transparent/semi-transparent style - for the dock background. + The transparent/semi-transparent style for the dock background. style_dash_to_dock @@ -94,8 +89,7 @@ Disable in overview Disables the blur from Dash to Dock when entering the overview. unblur_in_overview - + diff --git a/resources/ui/panel.ui b/resources/ui/panel.ui index 60800acb..f7a40e0d 100644 --- a/resources/ui/panel.ui +++ b/resources/ui/panel.ui @@ -17,8 +17,7 @@ - + @@ -27,8 +26,7 @@ Static blur Uses a static blurred image, more performant and stable. static_blur - + @@ -43,8 +41,7 @@ Force light text Use a light text for the panel, useful when using gnome-shell's light theme. force_light_text - + @@ -60,8 +57,7 @@ Override the background of the panel to use a transparent or semi-transparent one. Recommended unless you want to customize your GNOME theme. true - + @@ -99,8 +95,7 @@ Recommended unless you want to customize your GNOME theme. Disable in overview Disables the blur from the panel when entering the overview. unblur_in_overview - + @@ -123,8 +118,7 @@ Recommended unless you want to customize your GNOME theme. Hidetopbar extension Does not disable the blur in overview, best used with static blur. hidetopbar_compatibility - + From 4f543f17d2e54eae17660535fd9fc4f8629de132 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Hamy?= Date: Tue, 5 Mar 2024 14:11:43 +0100 Subject: [PATCH 12/12] Simplified the code a little bit --- src/components/dash_to_dock.js | 32 +++++++++++--------------------- 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/src/components/dash_to_dock.js b/src/components/dash_to_dock.js index d62916e9..80f42319 100644 --- a/src/components/dash_to_dock.js +++ b/src/components/dash_to_dock.js @@ -121,7 +121,7 @@ class DashInfos { dash_blur.connections.connect(dash_blur, 'update-size', () => { if (this.dash_blur.is_static) { - let [x, y] = this.get_dash_position(this.dash_container, this.dash_background, this.dash); + let [x, y] = this.get_dash_position(this.dash_container, this.dash_background); this.background.x = -x; this.background.y = -y; @@ -291,19 +291,15 @@ export const DashBlur = class DashBlur { // updates size and position on change this.connections.connect(dash, 'notify::width', _ => { - this.update_wallpaper(); this.update_size(); }); this.connections.connect(dash, 'notify::height', _ => { - this.update_wallpaper(); this.update_size(); }); this.connections.connect(dash_container, 'notify::width', _ => { - this.update_wallpaper(); this.update_size(); }); this.connections.connect(dash_container, 'notify::height', _ => { - this.update_wallpaper(); this.update_size(); }); this.connections.connect(dash_container, 'notify::y', _ => { @@ -355,11 +351,12 @@ export const DashBlur = class DashBlur { }); // the effect to be applied + let effect; if (this.is_static) { let corner_radius = this.corner_radius * monitor.geometry_scale; corner_radius = Math.min(corner_radius, dash_background.width / 2, dash_background.height / 2); - let effect_static = new BlurEffect({ + effect = new BlurEffect({ radius: 2 * this.sigma * monitor.geometry_scale, brightness: this.brightness, width: dash_background.width, @@ -367,9 +364,6 @@ export const DashBlur = class DashBlur { corner_radius: corner_radius }); - // store the scale in the effect in order to retrieve it in set_sigma - effect_static.scale = monitor.geometry_scale; - // connect to every background change (even without changing image) // FIXME this signal is fired very often, so we should find another one // fired only when necessary (but that still catches all cases) @@ -378,22 +372,13 @@ export const DashBlur = class DashBlur { 'notify', _ => this.update_wallpaper() ); - - background.add_effect(effect_static); - - return [background, effect_static]; } else { - let effect = new Shell.BlurEffect({ + effect = new Shell.BlurEffect({ brightness: this.brightness, sigma: this.sigma * monitor.geometry_scale, mode: Shell.BlurMode.BACKGROUND }); - // store the scale in the effect in order to retrieve it in set_sigma - effect.scale = monitor.geometry_scale; - - background.add_effect(effect); - // HACK // //`Shell.BlurEffect` does not repaint when shadows are under it. [1] @@ -450,9 +435,14 @@ export const DashBlur = class DashBlur { } else { this.paint_signals.disconnect_all(); } - - return [background, effect]; } + + // store the scale in the effect in order to retrieve it in set_sigma + effect.scale = monitor.geometry_scale; + + background.add_effect(effect); + + return [background, effect]; } change_blur_type() {