From 00dc7284cc8c20b8d2b0d1592c8d6443c7eee251 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Wed, 12 Apr 2023 18:05:18 +0900
Subject: [PATCH] blur strength slider added

---
 public/index.html            |  2 +-
 public/scripts/power-user.js | 32 +++++++++++++++++
 public/style.css             | 66 ++++++++++++++++++++----------------
 3 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/public/index.html b/public/index.html
index d435c49d2..40c64209e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1186,7 +1186,7 @@
                                 Blur Strength
                             </div>
                             <div class="range-block-range">
-                                <input type="range" id="blur_strength" name="blur_strength" min="0.8" max="1.2" step="0.05">
+                                <input type="range" id="blur_strength" name="blur_strength" min="0" max="30" step="1">
                             </div>
                             <div class="range-block-counter">
                                 <span id="blur_strength_counter">WIP</span>
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 6420612dd..cd4d6baa3 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -44,6 +44,7 @@ let power_user = {
     sort_field: 'name',
     sort_order: 'asc',
     font_scale: 1,
+    blur_strength: 10,
 
     main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`,
     italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
@@ -71,6 +72,7 @@ const storage_keys = {
     italics_text_color: "TavernAI_italics_text_color",
     fastui_bg_color: "TavernAI_fastui_bg_color",
     blur_tint_color: "TavernAI_blur_tint_color",
+    blur_strength: "TavernAI_blur_strength",
 };
 
 const chat = document.getElementById('chat');
@@ -162,6 +164,23 @@ async function applyThemeColor(type) {
     chat.style.transition = chatTransition;
 }
 
+async function applyBlurStrength() {
+    power_user.blur_strength = Number(localStorage.getItem(storage_keys.blur_strength) ?? 1);
+
+    // temporarily unset transition from chat to not make the browser calculate the animation
+    chat.style.transition = 'unset';
+
+    // now apply the blur strength to the document
+    document.documentElement.style.setProperty('--blurStrength', power_user.blur_strength);
+    $("#blur_strength_counter").text(power_user.blur_strength);
+
+    // a small delay to let the browser do the layout redraw
+    await delay(1);
+    // set transition back to chat
+    chat.style.transition = chatTransition;
+}
+
+
 async function applyFontScale() {
     power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
 
@@ -183,6 +202,7 @@ switchUiMode();
 applyChatDisplay();
 applySheldWidth();
 applyFontScale();
+applyBlurStrength();
 applyThemeColor();
 
 // TODO delete in next release
@@ -214,6 +234,7 @@ function loadPowerUserSettings(settings) {
     power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
     power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
     power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
+    power_user.blur_strength = Number(localStorage.getItem(storage_keys.blur_strength) ?? 10);
 
     $("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
     $("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
@@ -233,11 +254,15 @@ function loadPowerUserSettings(settings) {
     $("#font_scale").val(power_user.font_scale);
     $("#font_scale_counter").html(power_user.font_scale);
 
+    $("#blur_strength").val(power_user.blur_strength);
+    $("#blur_strength_counter").html(power_user.blur_strength);
+
     $("#main-text-color-picker").attr('color', power_user.main_text_color);
     $("#italics-color-picker").attr('color', power_user.italics_text_color);
     $("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color);
     $("#blur-tint-color-picker").attr('color', power_user.blur_tint_color);
 
+
     $(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true);
     sortCharactersList();
 }
@@ -339,6 +364,13 @@ $(document).ready(() => {
         applyFontScale();
     });
 
+    $(`input[name="blur_strength"]`).on('input', function (e) {
+        power_user.blur_strength = Number(e.target.value);
+        $("#blur_strength_counter").text(power_user.blur_strength);
+        localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength);
+        applyBlurStrength();
+    });
+
     $("#main-text-color-picker").on('change', (evt) => {
         power_user.main_text_color = evt.detail.rgba;
         applyThemeColor('main');
diff --git a/public/style.css b/public/style.css
index 8ac3863c4..a555e6c2f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -41,12 +41,18 @@
     --SmartThemeEmColor: rgb(175, 175, 175);
     --SmartThemeFastUIBGColor: rgba(0, 0, 0, 0.9);
     --SmartThemeBlurTintColor: rgba(0, 0, 0, 0.5);
+    --SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
 
     --sheldWidth: 800px;
     /*base variable calculated in rems*/
     --fontScale: 1;
     --mainFontSize: calc(var(--fontScale) * 1rem);
 
+    /* base variable for blur strength slider calculations */
+    --blurStrength: 10;
+
+
+
     /*styles for the color picker*/
     --tool-cool-color-picker-btn-bg: transparent;
     --tool-cool-color-picker-btn-border-color: transparent;
@@ -182,10 +188,10 @@ code {
     color: var(--black30a);
     border-bottom: 1px solid var(--black70a);
     box-shadow: 0 2px 20px 0 var(--black70a);
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeBlurTintColor);
     /* border-radius: 0 0 20px 20px; */
-    -webkit-backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
     z-index: 3000;
 }
 
@@ -214,9 +220,9 @@ code {
     border-bottom: 1px solid var(--grey30a);
     border-left: 1px solid var(--grey30a);
     border-right: 1px solid var(--grey30a);
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--SmartThemeBlurTintColor);
-    -webkit-backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
     text-shadow: #000 0 0 3px;
     scrollbar-width: thin;
     transition: all 1s ease-in-out;
@@ -241,7 +247,7 @@ code {
 
     border-radius: 0 0 20px 20px;
     background-color: var(--crimson70a);
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
 }
 
 #send_but_sheld {
@@ -1145,9 +1151,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin-top: 36svh;
     box-shadow: 0 0 2px var(--black50a);
     padding: 4px;
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--black70a);
-    -webkit-backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
     border-radius: 10px;
 }
 
@@ -1254,8 +1260,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
 }
 
 #shadow_popup {
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
     display: none;
     opacity: 0.0;
     position: absolute;
@@ -1267,8 +1273,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 #colab_shadow_popup {
 
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
     display: none;
     opacity: 1.0;
     position: absolute;
@@ -1377,8 +1383,8 @@ input[type=search]:focus::-webkit-search-cancel-button {
 
 #world_popup {
     display: none;
-    background-color: var(--black30a);
-    backdrop-filter: blur(50px);
+    background-color: var(--SmartThemeBlurTintColor);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
     max-width: var(--sheldWidth);
     height: calc(100% - 40px);
     position: absolute;
@@ -1803,9 +1809,9 @@ input[type="range"]::-webkit-slider-thumb {
     margin-top: 15vh;
     box-shadow: 5px 5px var(--black30a);
     padding: 4px;
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--black70a);
-    -webkit-backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
     border-radius: 10px;
     padding-top: 30px;
 }
@@ -1913,9 +1919,9 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 #shadow_character_popup {
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--black70a);
-    -webkit-backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
     display: none;
     opacity: 1.0;
     position: absolute;
@@ -1927,8 +1933,8 @@ input[type="range"]::-webkit-slider-thumb {
 #character_popup {
     display: none;
     background-color: var(--black30a);
-    backdrop-filter: blur(50px);
-    -webkit-backdrop-filter: blur(30px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
     grid-template-rows: 50px 1fr 1fr 1fr 5fr;
     grid-gap: 10px;
     max-width: var(--sheldWidth);
@@ -2007,9 +2013,9 @@ h5 {
     height: 40px;
     margin-top: 15px;
     margin-left: 36px;
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
     background-color: var(--black70a);
-    -webkit-backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
     width: 110px;
     text-align: center;
 }
@@ -2022,8 +2028,8 @@ h5 {
     height: 100svh;
     z-index: 3001;
     top: 0;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(var(--SmartThemeBlurStrength));
+    -webkit-backdrop-filter: blur(var(--SmartThemeBlurStrength));
 }
 
 #select_chat_popup {
@@ -2692,9 +2698,9 @@ a {
     left: auto;
     padding: 0;
     margin-bottom: 5px;
-    backdrop-filter: blur(10px);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     background-color: var(--SmartThemeBlurTintColor);
-    -webkit-backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
     z-index: 3000;
     border: 0;
     border-left: 1px solid var(--grey30a);
@@ -2895,7 +2901,8 @@ label[for="extensions_autoconnect"] {
 
 .drawer-icon.openIcon {
     /*  background-image: url('img/circle-chevron-up-solid.svg'); */
-    filter: invert(1) brightness(200%);
+    filter: invert(1) brightness(200%) drop-shadow(0px 0px 2px black);
+    ;
     transition: all 0.275s;
 }
 
@@ -2905,7 +2912,8 @@ label[for="extensions_autoconnect"] {
 
 .drawer-icon.closedIcon {
     /* background-image: url('img/circle-chevron-down-solid.svg'); */
-    filter: invert(1);
+    filter: invert(1) drop-shadow(0px 0px 2px black);
+    ;
     opacity: 0.3;
     transition: all 0.275s;
 }
@@ -2965,8 +2973,8 @@ label[for="extensions_autoconnect"] {
     width: min-content;
     max-width: var(--sheldWidth);
     margin: 35px auto 0 auto;
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
+    -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
 }
 
 .fillRight,