Read the statement by Michael Teeuw here.
Dynamic Font Colors
-
@MMRIZE AND it doesn’t work…
-
@ijoshea I added the scripts to MMM-ImagesPhotos (getScripts response)
and they are loaded… BUT the document on(‘load’) from the script above doesn’t fire…
I don’t know if that is because in my version of MMM-ImagesPhotos I set an onload for each image loaded so that I can adjust the size to keep the aspect ratio from the image
(css cover and contain both adjust the aspect ratio) -
@ijoshea
I had the same needs on building modules. (btw, GooglePhotos and CX3 were built by me :D )Sometimes I suggested other module’s background for the readability. Sometimes, I made an auto-calculated contrast color(e.g. CX3)
My final conclusion is… waiting for new CSS feature
contrast-color()
. It will be introduced later this year in the most modern browsers.
https://drafts.csswg.org/css-color-5/#contrast-color -
@ijoshea
Anyway, It looks so interesting, So I tried something. I simply did monkey patching to get dominant color fromMMM-GooglePhotos
’s image on load.
You can do your job with this code without modifying the source codes itselfs./* config/config.js */ { module: "MMM-ModuleMonkeyPatch", config: { patches: [ { module: "MMM-GooglePhotos", method: "ready", patch: async function (original, [ url, target ]) { const ret = original(url, target) let color = null const process = async () => { const { resolve, promise } = Promise.withResolvers() const img = new Image() img.crossOrigin = 'Anonymous' img.src = 'https://corsproxy.io/?' + url img.onload = () => { const colorThief = new ColorThief() const color = colorThief.getColor(img) resolve(color) } return promise } if (typeof ColorThief === 'undefined') { const loadScript = async (src) => { const { resolve, promise } = Promise.withResolvers() const script = document.createElement('script') script.src = src document.head.appendChild(script) script.onload = () => resolve() return promise } await loadScript('https://cdn.jsdelivr.net/npm/colorthief@2/dist/color-thief.min.js') color = await process() } else { color = await process() } console.log(color) // It will show [R, G, B] array // doYourJob(color) return ret }, }, ], }, },
-