Created
March 17, 2025 13:38
-
-
Save jettero/7f59203c2db1c91ea8ed3d7d6af2db8c to your computer and use it in GitHub Desktop.
my giant bright monitor might as well be an led panel light...
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LED Panel Lighting</title> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.6/jscolor.min.js"></script> | |
| <style> | |
| body, html { | |
| height: 100%; | |
| margin: 0; | |
| background-color: #500; /* red is broken */ | |
| } | |
| .controls { | |
| position: fixed; | |
| top: 10px; | |
| left: 10px; | |
| z-index: 10; | |
| padding: 10px; | |
| border-radius: 5px; | |
| } | |
| input[type=range] { | |
| width: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="controls"> | |
| <input class="jscolor" id="picker" value="#0F8ECE"> | |
| </div> | |
| <script> | |
| function adjust_brightness(hex, factor) { | |
| let r = parseInt(hex.substring(1, 3), 16); | |
| let g = parseInt(hex.substring(3, 5), 16); | |
| let b = parseInt(hex.substring(5, 7), 16); | |
| r = Math.min(255, Math.max(0, Math.round(r * factor))); | |
| g = Math.min(255, Math.max(0, Math.round(g * factor))); | |
| b = Math.min(255, Math.max(0, Math.round(b * factor))); | |
| return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`; | |
| } | |
| function update() { | |
| let color = $('#picker').val(); | |
| let darkened = adjust_brightness(color, 0.8); | |
| let brightened = adjust_brightness(color, 1.2); | |
| // If darkening makes it too dark, use brightened color instead | |
| let border_color = (parseInt(color, 16) > 0x222222) ? darkened : brightened; | |
| $('body, .controls, #picker').css('background-color', `${color}`); | |
| $('#picker').css({ | |
| 'border': `2px solid ${border_color}`, | |
| 'outline': `1px solid ${border_color}` | |
| }); | |
| } | |
| $(document).ready(function() { | |
| $('#picker').on('input change', update); | |
| update(); // Initialize with the default color | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment