biipadmin/Burn-My-Windows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎉 Make matrix effect configurable

Browse Source
This commit is contained in:
Simon Schneegans
2021-12-24 12:25:17 +01:00
parent ca024872db
commit 32a57cc523
4 changed files with 245 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
prefs.js
+14 -1
View File
@@ -51,6 +51,10 @@ var PreferencesDialog = class PreferencesDialog {
this._bindColorButton('fire-color-3');
this._bindColorButton('fire-color-4');
this._bindColorButton('fire-color-5');
this._bindAdjustment('matrix-scale');
this._bindAdjustment('matrix-randomness');
this._bindColorButton('matrix-trail-color');
this._bindColorButton('matrix-tip-color');
// The fire-gradient-reset button needs to by bound explicitly.
this._builder.get_object('reset-fire-colors').connect('clicked', () => {
@@ -99,7 +103,8 @@ var PreferencesDialog = class PreferencesDialog {
}
// Colors are stored as strings like 'rgb(1, 0.5, 0)'. As Gio.Settings.bind_with_mapping
// is not available yet, we need to do the color conversion manually.
// is not available yet, we need to do the color conversion manually. It also binds the
// corresponding reset button.
_bindColorButton(settingsKey) {
const button = this._builder.get_object(settingsKey);
@@ -120,6 +125,8 @@ var PreferencesDialog = class PreferencesDialog {
// Initialize the button with the state in the settings.
settingSignalHandler();
this._bindResetButton(settingsKey);
}
// Connects any widget's property to a settings key. The widget must have the same ID as
@@ -129,6 +136,12 @@ var PreferencesDialog = class PreferencesDialog {
settingsKey, this._builder.get_object(settingsKey), property,
Gio.SettingsBindFlags.DEFAULT);
this._bindResetButton(settingsKey);
}
// Searches for a reset button for the given settings key and make it reset the settings
// key when clicked.
_bindResetButton(settingsKey) {
const resetButton = this._builder.get_object('reset-' + settingsKey);
if (resetButton) {
resetButton.connect('clicked', () => {
resources/ui/gtk4.ui
+193
View File
@@ -283,6 +283,199 @@
</object>
</child>
<child>
<object class="GtkBox">
<property name="margin-top">30</property>
<property name="margin-bottom">10</property>
<child>
<object class="GtkLabel">
<property name="label">Matrix Options</property>
<property name="xalign">0</property>
<property name="hexpand">1</property>
<style>
<class name="title-4" />
</style>
</object>
</child>
</object>
</child>
<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">Matrix 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">0</property>
<property name="value-pos">left</property>
<property name="width-request">300</property>
<property name="adjustment">
<object class="GtkAdjustment" id="matrix-scale">
<property name="upper">50</property>
<property name="lower">5</property>
<property name="step-increment">1</property>
<property name="page-increment">4</property>
</object>
</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-matrix-scale">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text">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">Matrix Randomness</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="matrix-randomness">
<property name="upper">1.0</property>
<property name="lower">0.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-matrix-randomness">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text">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">Trail Color</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="GtkColorButton" id="matrix-trail-color">
<property name="use_alpha">0</property>
<property name="show_editor">1</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-matrix-trail-colors">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text">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">Tip Color</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="GtkColorButton" id="matrix-tip-color">
<property name="use_alpha">0</property>
<property name="show_editor">1</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-matrix-tip-colors">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text">Reset to Default Value</property>
<style>
<class name="flat" />
</style>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
schemas/org.gnome.shell.extensions.burn-my-windows.gschema.xml
+25
View File
@@ -51,6 +51,31 @@
<description>The fifth color of the fire gradient.</description>
</key>
<key name="matrix-scale" type="i">
<default>20</default>
<summary>Matrix Scale</summary>
<description>The size of the matrix letters.</description>
</key>
<key name="matrix-randomness" type="d">
<default>1.0</default>
<summary>Matrix Randomness</summary>
<description>The randomness of the matrix effect.</description>
</key>
<key name="matrix-tip-color" type="s">
<default>"rgb(255, 255, 255)"</default>
<summary>Matrix Tip Color</summary>
<description>The color of the matrix trail tips.</description>
</key>
<key name="matrix-trail-color" type="s">
<default>"rgb(25, 255, 89)"</default>
<summary>Matrix Trail Color</summary>
<description>The color matrix trails.</description>
</key>
</schema>
</schemalist>
src/extension/MatrixShader.js
+13 -4
View File
@@ -36,6 +36,11 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
fontData.has_alpha ? Cogl.PixelFormat.RGBA_8888 : Cogl.PixelFormat.RGB_888,
fontData.width, fontData.height, fontData.rowstride);
const trailColor =
Clutter.Color.from_string(settings.get_string('matrix-trail-color'))[1];
const tipColor =
Clutter.Color.from_string(settings.get_string('matrix-tip-color'))[1];
// This is partially based on https://www.shadertoy.com/view/ldccW4 (CC-BY-NC-SA).
this.set_shader_source(`
@@ -51,9 +56,9 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
const float TRAIL_LENGTH = 0.2;
const float FINAL_FADE_START_TIME = 0.8;
const float LETTER_TILES = 16.0;
const float LETTER_SIZE = 20.0;
const float LETTER_SIZE = ${settings.get_int('matrix-scale')};
const float LETTER_FLICKER_SPEED = 2.0;
const float RANDOMNESS = 1.0;
const float RANDOMNESS = ${settings.get_double('matrix-randomness')};
// This returns a flickering grid of random letters.
float getText(vec2 fragCoord) {
@@ -106,8 +111,12 @@ var MatrixShader = GObject.registerClass({Properties: {}, Signals: {}},
rainAlpha *= clamp((uSizeY - pos.y) / EDGE_FADE, 0, 1);
// Add the matrix effect to the window.
vec3 trailColor = vec3(0.1,1,0.35);
vec3 tipColor = vec3(1,1,1);
vec3 trailColor = vec3(${trailColor.red / 255},
${trailColor.green / 255},
${trailColor.blue / 255});
vec3 tipColor = vec3(${tipColor.red / 255},
${tipColor.green / 255},
${tipColor.blue / 255});
cogl_color_out.rgb += mix(trailColor, tipColor, pow(rainAlpha, 5)) * rainAlpha * text;
// These are pretty useful for understanding how this works.