JavaScript: Emby's Computed styles for plugins development.

[chef 3746]

This is most likely old hat to advanced programmers, but perhaps this trick might be useful to someone at some point....

 

Recently I took another look at the Disk Space plugin. 

 

When I had originally written it, my JavaScript programming skill were somewhat new, and after a couple years of practice, I thought  there might be some advancements that could be added to the plugin.

 

One of the aspects of the plugin I didn't really like was how the colors added to the drive cards (by default) were black and white.

Ewww....

 

Mind you the plugin always had the ability to change the colors of the charts,  But the default black and white color scheme is gross! 

 

I thought that the first change that should happen is to have the default color scheme match the applied  theme colors set in dashboard.

 

Enter javascripts 'getComputedStyles()'.

 

The 'getComputedStyles()' function allows you to access the css in the DOM in javavscript.

For example, getting the 'primary color' for the currently applied dashboard theme, can be easily obtained like this.

getComputedStyle(document.documentElement).getPropertyValue('--theme-primary-color')

It is requesting the custom css variable for emby's applied theme's primary color.

 

For more information on  custom css variables, I would recommended watching Kevin Powell's explanation on them found here.

A css master for sure. 

 

 

Things got a little more tricky with the DiskSpace plugin code.

 

Adding the custom variable for the theme primary color wasn't as simple as requesting the computed style.

The code used in Diskspace's color values is expecting  hexadecimal color format, and emby is using HSL.

                                                                                                                                                                                                                                                                         

Emby's applied theme css custom variables:

    --theme-primary-color-hue: 116;
    --theme-primary-color-saturation: 41.7%;
    --theme-primary-color-lightness: 50.2%;
    --theme-primary-color: hsl(var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness));

The theme layouts are looking at colors in a color wheel, like this:

In essence, the numbers are just telling us how far to traverse the circle's circumference  to find the color, and how far towards the center the color's origin is located.

                                                                                                                                                                                                                                                                       

 

In order to use these values with DiskSpace, the HSL would have to be converted into the Hexadecimal counterpart.

 

Luckily someone had done this before, and posted an example on StackOverflow! 

https://stackoverflow.com/questions/36721830/convert-hsl-to-rgb-and-hex

This code it's great!

This code return the hexadecimal value (very close...in most cases exactly... but... not always exact because it is being rounded) to the HSL color.

//From StackOverflow
function hslToHex(h, s, l) {
  l /= 100;
  const a = s * Math.min(l, 1 - l) / 100;
  const f = n => {
    const k = (n + h / 30) % 12;
    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
    return Math.round(255 * color).toString(16).padStart(2, '0');   // convert to Hex and prefix "0" if needed
  };
  return `#${f(0)}${f(8)}${f(4)}`;
}

 

There is one extra step to take here in order to make the conversion usable.

Using the getComputedStyles() function will return the value of "--primary-theme-color" as a string.

"hsl(116,41.7%,50.2%)"

 

The function found on StackOverflow, wants individual values of the color code split up as: hue, saturation, lightness .

 

Doing some edits using string.replace, splits, and parseInt's work! 

         //Edited code to handle the string value of HSL
         function hslToHex(hsl) {
            hsl.replace('%', '');
            let hslValues = hsl.split(',')
            let h = parseInt(hslValues[0].split('(')[1]);
            let s = parseInt(hslValues[1]);
            let l = parseInt(hslValues[2].split(')')[0]);
            l /= 100;
            const a = s * Math.min(l, 1 - l) / 100;
            const f = n => {
                const k = (n + h / 30) % 12;
                const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
                return Math.round(255 * color).toString(16).padStart(2, '0');   // convert to Hex and prefix "0" if needed
            };
            return `#${f(0)}${f(8)}${f(4)}`;
        }

 

Now calling the function like so:

hslToHex(getComputedStyle(document.documentElement).getPropertyValue('--theme-primary-color'));

result:

#52B54B

 

Cool,  applying the primary color  as a default when the plugin loads works now. 

 

The entire DiskSpace plugin code can be found here: https://github.com/chefbennyj1/Emby.DiskSpace

Maybe this is useful info.   

 

Edited February 19, 2022 by chef

[Luke 37093]

Yea that works but it's slow so you wouldn't use it in performance critical code that runs frequently. But for something that only runs once when the page loads it's fine