🎉 Add simple glide effect

This commit is contained in:
Simon Schneegans
2022-11-01 21:55:52 +01:00
parent 69066a144a
commit a3297ce9f5
7 changed files with 665 additions and 0 deletions
+1
View File
@@ -57,6 +57,7 @@ class Extension {
new Me.imports.src.EnergizeA.EnergizeA(), new Me.imports.src.EnergizeA.EnergizeA(),
new Me.imports.src.EnergizeB.EnergizeB(), new Me.imports.src.EnergizeB.EnergizeB(),
new Me.imports.src.Fire.Fire(), new Me.imports.src.Fire.Fire(),
new Me.imports.src.Glide.Glide(),
new Me.imports.src.Hexagon.Hexagon(), new Me.imports.src.Hexagon.Hexagon(),
new Me.imports.src.Incinerate.Incinerate(), new Me.imports.src.Incinerate.Incinerate(),
new Me.imports.src.Matrix.Matrix(), new Me.imports.src.Matrix.Matrix(),
+1
View File
@@ -53,6 +53,7 @@ var PreferencesDialog = class PreferencesDialog {
new Me.imports.src.EnergizeA.EnergizeA(), new Me.imports.src.EnergizeA.EnergizeA(),
new Me.imports.src.EnergizeB.EnergizeB(), new Me.imports.src.EnergizeB.EnergizeB(),
new Me.imports.src.Fire.Fire(), new Me.imports.src.Fire.Fire(),
new Me.imports.src.Glide.Glide(),
new Me.imports.src.Hexagon.Hexagon(), new Me.imports.src.Hexagon.Hexagon(),
new Me.imports.src.Incinerate.Incinerate(), new Me.imports.src.Incinerate.Incinerate(),
new Me.imports.src.Matrix.Matrix(), new Me.imports.src.Matrix.Matrix(),
+47
View File
@@ -0,0 +1,47 @@
//////////////////////////////////////////////////////////////////////////////////////////
// ) ( //
// ( /( ( ( ) ( ( ( ( )\ ) ( ( //
// )\()) ))\ )( ( ( )\ ) )\))( )\ ( (()/( ( )\))( ( //
// ((_)\ /((_|()\ )\ ) )\ '(()/( ((_)()((_) )\ ) ((_)))\((_)()\ )\ //
// | |(_|_))( ((_)_(_/( _((_)) )(_)) _(()((_|_)_(_/( _| |((_)(()((_|(_) //
// | '_ \ || | '_| ' \)) | ' \()| || | \ V V / | ' \)) _` / _ \ V V (_-< //
// |_.__/\_,_|_| |_||_| |_|_|_| \_, | \_/\_/|_|_||_|\__,_\___/\_/\_//__/ //
// |__/ //
//////////////////////////////////////////////////////////////////////////////////////////
// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: GPL-3.0-or-later
// The content from common.glsl is automatically prepended to each shader effect.
uniform float uScale;
uniform float uSquish;
uniform float uTilt;
void main() {
float progress = easeOutQuad(uProgress);
progress = uForOpening ? 1.0 - progress : progress;
vec2 coords = iTexCoord.st * 2.0 - 1.0;
coords /= mix(1.0, uScale, progress);
coords.y /= mix(1.0, (1.0 - uSquish), progress);
coords.x /= mix(1.0, 1.0 - uTilt * coords.y, progress);
coords = coords * 0.5 + 0.5;
vec4 oColor = getInputColor(coords);
// Dissolve window to effect color / transparency.
oColor.a = oColor.a * (1.0 - progress);
// These are pretty useful for understanding how this works.
// oColor = vec4(masks, 0.0, 1.0);
// oColor = vec4(vec3(masks.x), 1.0);
// oColor = vec4(vec3(masks.y), 1.0);
// oColor = vec4(vec3(particles), 1.0);
setOutputColor(oColor);
}
+254
View File
@@ -0,0 +1,254 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
SPDX-License-Identifier: GPL-3.0-or-later
-->
<interface domain="burn-my-windows">
<object class="GtkAdjustment" id="glide-animation-time">
<property name="upper">2000</property>
<property name="lower">100</property>
<property name="step-increment">1</property>
<property name="page-increment">100</property>
</object>
<object class="GtkAdjustment" id="glide-scale">
<property name="upper">1</property>
<property name="lower">0.1</property>
<property name="step-increment">0.01</property>
<property name="page-increment">0.1</property>
</object>
<object class="GtkAdjustment" id="glide-squish">
<property name="upper">1</property>
<property name="lower">0</property>
<property name="step-increment">0.01</property>
<property name="page-increment">0.1</property>
</object>
<object class="GtkAdjustment" id="glide-tilt">
<property name="upper">0.5</property>
<property name="lower">-0.5</property>
<property name="step-increment">0.01</property>
<property name="page-increment">0.1</property>
</object>
<object class="GtkBox" id="glide-prefs">
<property name="orientation">vertical</property>
<child>
<object class="GtkFrame">
<child>
<object class="GtkListBox">
<property name="selection-mode">none</property>
<style>
<class name="rich-list" />
</style>
<child>
<object class="GtkListBoxRow">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="spacing">8</property>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Animation Time [ms]</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">0</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">glide-animation-time</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-glide-animation-time">
<child>
<object class="GtkImage">
<property name="icon-name">edit-clear-symbolic</property>
<property name="icon-size">1</property>
</object>
</child>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="spacing">8</property>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Scale</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">2</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">glide-scale</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-glide-scale">
<child>
<object class="GtkImage">
<property name="icon-name">edit-clear-symbolic</property>
<property name="icon-size">1</property>
</object>
</child>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="spacing">8</property>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Squish</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">2</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">glide-squish</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-glide-squish">
<child>
<object class="GtkImage">
<property name="icon-name">edit-clear-symbolic</property>
<property name="icon-size">1</property>
</object>
</child>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="margin-start">10</property>
<property name="margin-end">10</property>
<property name="margin-top">10</property>
<property name="margin-bottom">10</property>
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="spacing">8</property>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Tilt</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">2</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">glide-tilt</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-glide-tilt">
<child>
<object class="GtkImage">
<property name="icon-name">edit-clear-symbolic</property>
<property name="icon-size">1</property>
</object>
</child>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</interface>
+216
View File
@@ -0,0 +1,216 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
SPDX-License-Identifier: GPL-3.0-or-later
-->
<interface domain="burn-my-windows">
<object class="GtkBox" id="glide-prefs">
<property name="orientation">vertical</property>
<child>
<object class="GtkFrame">
<child>
<object class="GtkListBox">
<property name="selection-mode">none</property>
<property name="show-separators">1</property>
<style>
<class name="rich-list" />
</style>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Animation Time [ms]</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">0</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">
<object class="GtkAdjustment" id="glide-animation-time">
<property name="upper">2000</property>
<property name="lower">100</property>
<property name="step-increment">1</property>
<property name="page-increment">100</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-glide-animation-time">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Scale</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">2</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">
<object class="GtkAdjustment" id="glide-scale">
<property name="upper">1</property>
<property name="lower">0.1</property>
<property name="step-increment">0.01</property>
<property name="page-increment">0.1</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-glide-scale">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Squish</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">2</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">
<object class="GtkAdjustment" id="glide-squish">
<property name="upper">1</property>
<property name="lower">0</property>
<property name="step-increment">0.01</property>
<property name="page-increment">0.1</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-glide-squish">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Tilt</property>
<property name="xalign">0</property>
<property name="halign">start</property>
<property name="valign">center</property>
<property name="hexpand">1</property>
</object>
</child>
<child>
<object class="GtkScale">
<property name="halign">end</property>
<property name="valign">center</property>
<property name="draw-value">1</property>
<property name="digits">2</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">
<object class="GtkAdjustment" id="glide-tilt">
<property name="upper">0.5</property>
<property name="lower">-0.5</property>
<property name="step-increment">0.01</property>
<property name="page-increment">0.1</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-glide-tilt">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</interface>
@@ -297,6 +297,46 @@ SPDX-License-Identifier: CC0-1.0
<description>The fifth color of the fire gradient.</description> <description>The fifth color of the fire gradient.</description>
</key> </key>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Glide Options -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<key name="glide-close-effect" type="b">
<default>true</default>
<summary>Glide Close Effect</summary>
<description>Use the glide effect for window closing.</description>
</key>
<key name="glide-open-effect" type="b">
<default>false</default>
<summary>Glide Open Effect</summary>
<description>Use the glide effect for window opening.</description>
</key>
<key name="glide-animation-time" type="i">
<default>200</default>
<summary>Glide Animation Time</summary>
<description>The time the glide effect takes.</description>
</key>
<key name="glide-scale" type="d">
<default>0.85</default>
<summary>Glide Scale</summary>
<description>The scale of the window.</description>
</key>
<key name="glide-squish" type="d">
<default>0.15</default>
<summary>Glide Squish</summary>
<description>The amount of squishing.</description>
</key>
<key name="glide-tilt" type="d">
<default>-0.15</default>
<summary>Glide Tilt</summary>
<description>The amount of tilting.</description>
</key>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Matrix Options --> <!-- Matrix Options -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+106
View File
@@ -0,0 +1,106 @@
//////////////////////////////////////////////////////////////////////////////////////////
// ) ( //
// ( /( ( ( ) ( ( ( ( )\ ) ( ( //
// )\()) ))\ )( ( ( )\ ) )\))( )\ ( (()/( ( )\))( ( //
// ((_)\ /((_|()\ )\ ) )\ '(()/( ((_)()((_) )\ ) ((_)))\((_)()\ )\ //
// | |(_|_))( ((_)_(_/( _((_)) )(_)) _(()((_|_)_(_/( _| |((_)(()((_|(_) //
// | '_ \ || | '_| ' \)) | ' \()| || | \ V V / | ' \)) _` / _ \ V V (_-< //
// |_.__/\_,_|_| |_||_| |_|_|_| \_, | \_/\_/|_|_||_|\__,_\___/\_/\_//__/ //
// |__/ //
//////////////////////////////////////////////////////////////////////////////////////////
// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: GPL-3.0-or-later
'use strict';
const GObject = imports.gi.GObject;
const _ = imports.gettext.domain('burn-my-windows').gettext;
const ExtensionUtils = imports.misc.extensionUtils;
const Me = imports.misc.extensionUtils.getCurrentExtension();
const utils = Me.imports.src.utils;
const ShaderFactory = Me.imports.src.ShaderFactory.ShaderFactory;
//////////////////////////////////////////////////////////////////////////////////////////
// This very simple effect fades the window to transparency with subtle 3D effects. //
//////////////////////////////////////////////////////////////////////////////////////////
// The effect class can be used to get some metadata (like the effect's name or supported
// GNOME Shell versions), to initialize the respective page of the settings dialog, as
// well as to create the actual shader for the effect.
var Glide = class {
// The constructor creates a ShaderFactory which will be used by extension.js to create
// shader instances for this effect. The shaders will be automagically created using the
// GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
// newly created shader instance.
constructor() {
this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
// Store uniform locations of newly created shaders.
shader._uScale = shader.get_uniform_location('uScale');
shader._uSquish = shader.get_uniform_location('uSquish');
shader._uTilt = shader.get_uniform_location('uTilt');
// Write all uniform values at the start of each animation.
shader.connect('begin-animation', (shader, settings) => {
// clang-format off
shader.set_uniform_float(shader._uScale, 1, [settings.get_double('glide-scale')]);
shader.set_uniform_float(shader._uSquish, 1, [settings.get_double('glide-squish')]);
shader.set_uniform_float(shader._uTilt, 1, [settings.get_double('glide-tilt')]);
// clang-format on
});
});
}
// ---------------------------------------------------------------------------- metadata
// The effect is available on all GNOME Shell versions supported by this extension.
getMinShellVersion() {
return [3, 36];
}
// This will be called in various places where a unique identifier for this effect is
// required. It should match the prefix of the settings keys which store whether the
// effect is enabled currently (e.g. '*-close-effect'), and its animation time
// (e.g. '*-animation-time').
getNick() {
return 'glide';
}
// This will be shown in the sidebar of the preferences dialog as well as in the
// drop-down menus where the user can choose the effect.
getLabel() {
return _('Glide');
}
// -------------------------------------------------------------------- API for prefs.js
// This is called by the preferences dialog. It loads the settings page for this effect,
// and binds all properties to the settings.
getPreferences(dialog) {
// Add the settings page to the builder.
dialog.getBuilder().add_from_resource(`/ui/${utils.getGTKString()}/Glide.ui`);
// Bind all properties.
dialog.bindAdjustment('glide-animation-time');
dialog.bindAdjustment('glide-scale');
dialog.bindAdjustment('glide-squish');
dialog.bindAdjustment('glide-tilt');
// Finally, return the new settings page.
return dialog.getBuilder().get_object('glide-prefs');
}
// ---------------------------------------------------------------- API for extension.js
// The getActorScale() is called from extension.js to adjust the actor's size during the
// animation. This is useful if the effect requires drawing something beyond the usual
// bounds of the actor. This only works for GNOME 3.38+.
getActorScale(settings) {
return {x: 1.0, y: 1.0};
}
}