Skip to content

Commit

Permalink
Improve automatic icon colors (#61)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bokub
bokub authored Mar 8, 2022
1 parent 7bae317 commit abb7c78
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 20 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ MIT © [Boris K](https://github.com/bokub)
[version-src]: https://runkit.io/bokub/npm-version/branches/master/rgb-light-card?style=flat
[code-style-src]: https://flat.badgen.net/badge/code%20style/prettier/ff69b4
[hits-src]: https://flat.badgen.net/jsdelivr/hits/npm/rgb-light-card
[downloads-src]: https://flat.badgen.net/github/assets-dl/bokub/rgb-light-card/1.9.0?label=installs%20(HACS)
[downloads-src]: https://flat.badgen.net/github/assets-dl/bokub/rgb-light-card/1.10.0?label=installs%20(HACS)
[hacs-src]: https://flat.badgen.net/badge/HACS/default/orange
[codecov-src]: https://flat.badgen.net/codecov/c/github/bokub/rgb-light-card
[version-href]: https://www.npmjs.com/package/rgb-light-card
Expand Down
14 changes: 13 additions & 1 deletion card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,13 +195,25 @@ class RGBLightCard extends HTMLElement {
if (Array.isArray(color['rgb_color']) && color['rgb_color'].length === 3) {
return `rgb(${color['rgb_color'].join(',')})`;
}
if (Array.isArray(color['rgbw_color']) && color['rgbw_color'].length === 4) {
return `rgb(${color['rgbw_color'].slice(0, 3).join(',')})`;
}
if (Array.isArray(color['rgbww_color']) && color['rgbww_color'].length === 5) {
return `rgb(${color['rgbww_color'].slice(0, 3).join(',')})`;
}
if (Array.isArray(color['hs_color']) && color['hs_color'].length === 2) {
return `hsl(${color['hs_color'][0]},100%,${100 - color['hs_color'][1] / 2}%)`;
}
if (Array.isArray(color['xy_color']) && color['xy_color'].length === 2) {
const rgb = this.xyToRGB(color['xy_color'][0], color['xy_color'][1], 255);
return `rgb(${rgb.join(',')})`;
}
if (color['brightness']) {
return `rgba(253,216,53,${color['brightness'] / 255})`;
}
if (color['brightness_pct']) {
return `rgba(253,216,53,${color['brightness_pct'] / 100})`;
}
return '#7F848E';
}

Expand Down Expand Up @@ -281,7 +293,7 @@ window.customCards.push({
});

console.info(
'\n %c RGB Light Card %c v1.10.0 %c \n',
'\n %c RGB Light Card %c v1.11.0 %c \n',
'background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 3px 0 0 3px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)',
'background-color: #bc81e0;background-image: linear-gradient(90deg, #b65cff, #11cbfa);color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 3px 3px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)',
'background-color: transparent'
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "rgb-light-card",
"description": "A Lovelace custom card for RGB lights",
"version": "1.10.0",
"version": "1.11.0",
"author": "Boris K",
"bugs": "https://github.com/bokub/rgb-light-card/issues",
"devDependencies": {
Expand Down
58 changes: 41 additions & 17 deletions test/render-tests.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
const test = require('ava');
const YAML = require('yamljs');

const circleMarkup = (background, innerText) =>
`<div class="color"><div class="color-circle" style="background: ${background};"></div><div class="color-label">${
innerText || ''
}</div></div>`;

const styleMarkup = (str) => `<style>${str.replace(/\s\s+/g, ' ')}</style>`;
const testCases = [
{
name: 'Test icon colors',
Expand All @@ -10,6 +16,8 @@ colors:
- rgb_color: [255, 127, 255]
brightness: 220
transition: 1
- rgbw_color: [0, 127, 255, 220]
- rgbww_color: [255, 127, 0, 200, 150]
- hs_color: [60, 30]
- color_name: turquoise
- type: call-service
Expand All @@ -28,21 +36,32 @@ colors:
- xy_color:
- 0.368
- 0.203
- brightness: 51
- brightness_pct: 41
`,
result:
'<style> .wrapper { justify-content: flex-start; margin-bottom: -4px; } .wrapper.hidden { display: none; } .color-circle { width: 32px; height: 32px; margin: 4px 8px 8px; } .color-label { font-size: 12px; margin-bottom: 4px; } </style>' +
'<div class="color"><div class="color-circle" style="background: rgb(255, 127, 255);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: hsl(60, 100%, 85%);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: turquoise;"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(127, 132, 142);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(127, 132, 142);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(255, 240, 0);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(166, 209, 255);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(255, 160, 0);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(255, 237, 206);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(215, 235, 255);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(130, 0, 255);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(254, 129, 255);"></div><div class="color-label"></div></div>',
styleMarkup(`
.wrapper { justify-content: flex-start; margin-bottom: -4px; }
.wrapper.hidden { display: none; }
.color-circle { width: 32px; height: 32px; margin: 4px 8px 8px; }
.color-label { font-size: 12px; margin-bottom: 4px; }
`) +
circleMarkup('rgb(255, 127, 255)') +
circleMarkup('rgb(0, 127, 255)') +
circleMarkup('rgb(255, 127, 0)') +
circleMarkup('hsl(60, 100%, 85%)') +
circleMarkup('turquoise') +
circleMarkup('rgb(127, 132, 142)') +
circleMarkup('rgb(127, 132, 142)') +
circleMarkup('rgb(255, 240, 0)') +
circleMarkup('rgb(166, 209, 255)') +
circleMarkup('rgb(255, 160, 0)') +
circleMarkup('rgb(255, 237, 206)') +
circleMarkup('rgb(215, 235, 255)') +
circleMarkup('rgb(130, 0, 255)') +
circleMarkup('rgb(254, 129, 255)') +
circleMarkup('rgba(253, 216, 53, 0.2)') +
circleMarkup('rgba(253, 216, 53, 0.41)'),
},
{
name: 'Test justify and size options',
Expand All @@ -58,10 +77,15 @@ size: 28
label_size: 10
`,
result:
'<style> .wrapper { justify-content: space-around; margin-bottom: -3.5px; } .wrapper.hidden { display: none; } .color-circle { width: 28px; height: 28px; margin: 3.5px 7px 7px; } .color-label { font-size: 10px; margin-bottom: 3.5px; } </style>' +
'<div class="color"><div class="color-circle" style="background: rgb(234, 136, 140);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(251, 180, 140);"></div><div class="color-label"></div></div>' +
'<div class="color"><div class="color-circle" style="background: rgb(135, 198, 237);"></div><div class="color-label">Blue</div></div>',
styleMarkup(`
.wrapper { justify-content: space-around; margin-bottom: -3.5px; }
.wrapper.hidden { display: none; }
.color-circle { width: 28px; height: 28px; margin: 3.5px 7px 7px; }
.color-label { font-size: 10px; margin-bottom: 3.5px; }
`) +
circleMarkup('rgb(234, 136, 140)') +
circleMarkup('rgb(251, 180, 140)') +
circleMarkup('rgb(135, 198, 237)', 'Blue'),
},
];

Expand Down

0 comments on commit abb7c78

Please sign in to comment.