Posts made by ijoshea

@MMRIZE @sdetweil thanks for the help. I havent had a chance to play around with it on my set up but looks to be going in the right direction!

I’m using MMM-GooglePhotos for revolving background images and depending on the color of the image show the font on modules displaying over the image can be hard to read.

I’ve been trying to get custom.css to handle this by using colorthief (https://lokeshdhakar.com/projects/color-thief/) to determine if the image is light or dark and to set a contrasting color palette.

I don’t have a lot experience with CSS/JS should this be doable?

Here is the code I have tried to date but the @import on the custom.css gets an error, “This page failed to load a stylesheet from a URL.”
This is currently aimed at MMM-CalendarExt3 which is most used for me.

/* custom.css code
@import url('https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.2/color-thief.min.js');

body::after {
  content: '';
  display: none;
  /* Ensure the external script is loaded before running the adaptiveFontColor.js script */
  background-image: url('modules/MMM-GooglePhotos/adaptiveFontColor.js');
}
// adaptiveFontColor.js

function isColorDark(rgbColor) {
    const [r, g, b] = rgbColor;
    // Calculate luminance
    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
    return luminance < 128;
}

function applyAdaptiveFontColor(imageElement, targetElements) {
    const colorThief = new ColorThief();
    const dominantColor = colorThief.getColor(imageElement);
    console.log('Dominant Color:', dominantColor); // Log the dominant color
    const isDark = isColorDark(dominantColor);

    const fontColor = isDark ? 'white' : 'black';
    const textShadow = isDark ? '0 0 5px rgba(0,0,0,0.8)' : '0 0 5px rgba(255,255,255,0.8)';

    console.log('Font Color:', fontColor); // Log the font color
    console.log('Text Shadow:', textShadow); // Log the text shadow

    targetElements.forEach(element => {
        element.style.color = fontColor;
        element.style.textShadow = textShadow;
        console.log('Applied styles to:', element); // Log the element being styled
    });
}

function setupObserver(imageSelector, targetSelector) {
    const imageElement = document.querySelector(imageSelector);
    const targetElements = document.querySelectorAll(targetSelector);

    console.log('Image Element:', imageElement); // Log the image element
    console.log('Target Elements:', targetElements); // Log the target elements

    if (imageElement) {
        const observer = new MutationObserver((mutations) => {
            console.log('Mutation observed:', mutations); // Log mutations
            if (imageElement.complete) {
                applyAdaptiveFontColor(imageElement, targetElements);
                console.log('Image complete');
            } else {
                imageElement.addEventListener('load', () => {
                    applyAdaptiveFontColor(imageElement, targetElements);
                    console.log('Image loaded');
                });
            }
        });

        observer.observe(imageElement, {
            attributes: true,
            attributeFilter: ['src']
        });

        // Initial check in case the image is already loaded
        if (imageElement.complete) {
            applyAdaptiveFontColor(imageElement, targetElements);
            console.log('Initial image complete');
        } else {
            imageElement.addEventListener('load', () => {
                applyAdaptiveFontColor(imageElement, targetElements);
                console.log('Initial image loaded');
            });
        }
    } else {
        console.log('Image element not found with selector:', imageSelector);
    }
}

// Wait for the document to load
window.addEventListener('load', function() {
    console.log('Document loaded'); // Log document load event
    const imageSelector = '#GPHOTO_CURRENT'; // Updated selector for the image
    const targetSelector = '.CX3A .event .headline'; // Adjusted selector for calendar events

    setupObserver(imageSelector, targetSelector);
});

Any help would be appreciated.