☰

Useless Things Series: Brightness Overlay with Slider

Add an overlay to the entire webpage with a brightness slider positioned at the center below the screen. The brightness slider appears and disappears when 'alt b' or 'alt c' is clicked, respectively. Color Temperature Presets and Color Finder to adjust the brightness color.

  1. // ==UserScript==
  2. // @name         Useless Things Series: Brightness Overlay with Slider
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @description  Add an overlay to the entire webpage with a brightness slider positioned at the center below the screen. The brightness slider appears and disappears when 'alt b' or 'alt c' is clicked, respectively. Color Temperature Presets and Color Finder to adjust the brightness color.
  6. // @match        *://*/*
  7. // @grant        none
  8. // @license      MIT
  9. // @namespace https://greasyfork.org/users/1126616
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     let overlayVisible = false;
  16.     let brightnessSliderVisible = false;
  17.     const defaultBrightnessValue = 50; // Default to neutral grey
  18.     let brightnessValue = localStorage.getItem('brightness') || defaultBrightnessValue;
  19.     let defaultColor = localStorage.getItem('color') || defaultColorValue;
  20.  
  21.     let defaultColorValue = '#808080'; // Default color set to grey
  22.  
  23.     // Create overlay element
  24.     const overlay = document.createElement('div');
  25.     overlay.style.position = 'fixed';
  26.     overlay.style.top = 0;
  27.     overlay.style.left = 0;
  28.     overlay.style.width = '100%';
  29.     overlay.style.height = '100%';
  30.     overlay.style.backgroundColor = `rgba(0, 0, 0, ${1 - brightnessValue / 100})`;
  31.     overlay.style.zIndex = 9999;
  32.     overlay.style.display = 'none';
  33.  
  34.     // Create brightness slider element
  35.     const brightnessSlider = document.createElement('input');
  36.     brightnessSlider.type = 'range';
  37.     brightnessSlider.min = '0';
  38.     brightnessSlider.max = '100';
  39.     brightnessSlider.value = brightnessValue;
  40.     brightnessSlider.style.width = '80%';
  41.     brightnessSlider.style.margin = '20px auto';
  42.     brightnessSlider.style.position = 'fixed';
  43.     brightnessSlider.style.bottom = '50px';
  44.     brightnessSlider.style.left = '50%';
  45.     brightnessSlider.style.transform = 'translateX(-50%)';
  46.     brightnessSlider.style.zIndex = 10000;
  47.     brightnessSlider.style.background = 'linear-gradient(to right, #333, #fff)';
  48.     brightnessSlider.style.borderRadius = '5px';
  49.     brightnessSlider.style.border = 'none';
  50.     brightnessSlider.style.padding = '5px';
  51.     brightnessSlider.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.3)';
  52.     brightnessSlider.style.display = 'none';
  53.  
  54.     // Create color picker element
  55.     const colorPicker = document.createElement('input');
  56.     colorPicker.type = 'color';
  57.     colorPicker.value = defaultColor;
  58.     colorPicker.style.position = 'fixed';
  59.     colorPicker.style.bottom = '100px';
  60.     colorPicker.style.left = '50%';
  61.     colorPicker.style.transform = 'translateX(-50%)';
  62.     colorPicker.style.zIndex = 10000;
  63.     colorPicker.style.display = 'none'; // Hide by default
  64.  
  65.     // Create color temperature selector element
  66.     const colorTemperatureSelector = document.createElement('select');
  67.     colorTemperatureSelector.style.position = 'fixed';
  68.     colorTemperatureSelector.style.bottom = '150px';
  69.     colorTemperatureSelector.style.left = '50%';
  70.     colorTemperatureSelector.style.transform = 'translateX(-50%)';
  71.     colorTemperatureSelector.style.zIndex = 10000;
  72.     colorTemperatureSelector.style.display = 'none'; // Hide by default
  73.     // Add a default option with the name "Color Temperature"
  74.     const defaultOption = document.createElement('option');
  75.     defaultOption.value = 'color_temperature';
  76.     defaultOption.text = 'Color Temperature';
  77.     colorTemperatureSelector.appendChild(defaultOption);
  78.  
  79.     // Array of color options
  80.     const colorOptions = ['#ffddad', '#ffb6b9', '#fab1a0', '#f9cb40', '#a0e7e5', '#cfd8dc', '#82b1ff', '#b388ff', '#f48fb1', '#81c784'];
  81.  
  82.     // Append overlay, slider, and color picker to the body
  83.     document.body.appendChild(overlay);
  84.     document.body.appendChild(brightnessSlider);
  85.     document.body.appendChild(colorPicker);
  86.     document.body.appendChild(colorTemperatureSelector);
  87.  
  88.  
  89.     // Function to update brightness and color
  90.     function updateBrightnessAndColor(value, color) {
  91.         const backgroundColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, ${1 - value / 100})`;
  92.         overlay.style.backgroundColor = backgroundColor;
  93.         localStorage.setItem('brightness', value);
  94.         localStorage.setItem('color', color);
  95.     }
  96.  
  97.     // Event listener for slider input
  98.     brightnessSlider.addEventListener('input', function() {
  99.         const brightnessValue = this.value;
  100.         const color = colorPicker.value;
  101.         updateBrightnessAndColor(brightnessValue, color);
  102.         // Reset the auto-hide timeout whenever the slider is interacted with
  103.         resetAutoHideTimeout();
  104.     });
  105.  
  106.     // Event listener for color picker input
  107.     colorPicker.addEventListener('input', function() {
  108.         const brightnessValue = brightnessSlider.value;
  109.         const color = this.value;
  110.         updateBrightnessAndColor(brightnessValue, color);
  111.         resetAutoHideTimeout();
  112.     });
  113.  
  114.     // Event listener for color temperature selector change
  115.     colorTemperatureSelector.addEventListener('change', function() {
  116.         const selectedColor = this.value;
  117.         // Update the color picker value to match the selected preset color
  118.         colorPicker.value = selectedColor;
  119.         // Retrieve the current brightness value from the slider
  120.         const brightnessValue = brightnessSlider.value;
  121.         // Update brightness and color based on the selected preset color
  122.         updateBrightnessAndColor(brightnessValue, selectedColor);
  123.         // Reset the auto-hide timeout
  124.         resetAutoHideTimeout();
  125.     });
  126.  
  127.     // Function to create and append color options to the color picker
  128.     colorOptions.forEach(color => {
  129.         const option = document.createElement('option');
  130.         option.value = color;
  131.         option.style.backgroundColor = color; // Set background color of option
  132.         colorTemperatureSelector.appendChild(option);
  133.     });
  134.  
  135.     // Variable to hold timeout for automatic slider disappearance
  136.     let autoHideTimeout;
  137.  
  138.     // Function to reset the auto-hide timeout
  139.     function resetAutoHideTimeout() {
  140.         // Clear the existing timeout
  141.         clearTimeout(autoHideTimeout);
  142.         // Set a new timeout to hide slider after 3 seconds if user is not adjusting it
  143.         autoHideTimeout = setTimeout(() => {
  144.             brightnessSlider.style.display = 'none';
  145.             brightnessSliderVisible = false;
  146.             colorPicker.style.display = 'none';
  147.             colorTemperatureSelector.style.display = 'none';
  148.         }, 5000);
  149.     }
  150.  
  151.     // Show or hide the slider, color picker, and color temperature selector when 'c' is pressed
  152.     document.addEventListener('keydown', function(event) {
  153.         if (event.altKey && event.key === 'c') {
  154.             if (brightnessSliderVisible) {
  155.                 brightnessSlider.style.display = 'none';
  156.                 brightnessSliderVisible = false;
  157.             } else {
  158.                 brightnessSlider.style.display = 'block';
  159.                 brightnessSliderVisible = true;
  160.             }
  161.             if (colorPicker.style.display === 'none') {
  162.                 colorPicker.style.display = 'block';
  163.                 // Reset the auto-hide timeout for color picker
  164.                 resetAutoHideTimeout();
  165.             } else {
  166.                 colorPicker.style.display = 'none';
  167.             }
  168.             if (colorTemperatureSelector.style.display === 'none') {
  169.                 colorTemperatureSelector.style.display = 'block';
  170.                 // Reset the auto-hide timeout for color temperature selector
  171.                 resetAutoHideTimeout();
  172.             } else {
  173.                 colorTemperatureSelector.style.display = 'none';
  174.             }
  175.         }
  176.     });
  177.  
  178.     // Show or hide everything when 'b' is pressed
  179.     document.addEventListener('keydown', function(event) {
  180.         if (event.altKey && event.key === 'b') {
  181.             if (overlayVisible) {
  182.                 overlay.style.display = 'none';
  183.                 brightnessSlider.style.display = 'none';
  184.                 colorPicker.style.display = 'none';
  185.                 overlayVisible = false;
  186.                 brightnessSliderVisible = false;
  187.                 colorTemperatureSelector.style.display = 'none';
  188.  
  189.             } else {
  190.                 overlay.style.display = 'block';
  191.                 brightnessSlider.style.display = 'block';
  192.                 colorPicker.style.display = 'block';
  193.                 overlayVisible = true;
  194.                 brightnessSliderVisible = true;
  195.                 colorTemperatureSelector.style.display = 'block';
  196.                 // Reset the auto-hide timeout for slider and color picker
  197.                 resetAutoHideTimeout();
  198.             }
  199.         }
  200.     });
  201.  
  202. })();