Skip to content

Commit

Permalink
change color format from rgb to hex
Browse files Browse the repository at this point in the history
  • Loading branch information
@mchilli
mchilli committed Nov 8, 2024
1 parent 664b8c8 commit deb0a67
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 30 deletions.
12 changes: 7 additions & 5 deletions circuitpython/utils/devices.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ def color(self, color:tuple) -> None:
def update_colors(self) -> None:
""" update the backgroundcolor and color based on type
"""
if self.type in ["blank", "group"]:
if self.type in [None, "group"]:
self._label.background_color = 0x000000
self._label.color = 0xffffff
else:
Expand All @@ -117,12 +117,14 @@ def update_colors(self) -> None:

self._set_led(self.color)

def _set_led(self, color:tuple[int, int, int]) -> None:
def _set_led(self, color:list[int, int, int] | str) -> None:
""" set and update the led color
Args:
color (tuple): the led color (R, G, B)
color (list | string): the led color (R, G, B) | rrggbb
"""
if isinstance(color, str):
color = (int(color[0:2], 16), int(color[2:4], 16), int(color[4:6], 16))
self._macropad.pixels[self._index] = color
self._macropad.pixels.show()

Expand All @@ -131,7 +133,7 @@ def clear_props(self) -> None:
"""
self._label.text = ""
self._type = None
self._color = (0, 0, 0)
self._color = '000000'
self._func = None
self._func_args = None

Expand All @@ -158,7 +160,7 @@ def _on_pressed(self) -> None:
""" Action that triggered when Key is pressed
"""
if self._func:
self._set_led((255, 255, 255))
self._set_led('ffffff')
self.call_func()

def _on_released(self) -> None:
Expand Down
8 changes: 4 additions & 4 deletions webui/js/modules/classes/Dialogs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -919,7 +919,7 @@ export class EditDialog extends BaseDialog {

if (values.type !== 'blank') {
values.label = this.inputs.label.value;
values.color = utils.hexToRGB(this.inputs.colorPicker.value);
values.color = this.inputs.colorPicker.value.slice(1);
values.content = this.keyInstance.content.length === 0 ? undefined : this.keyInstance.content;
}

Expand Down Expand Up @@ -956,9 +956,9 @@ export class EditDialog extends BaseDialog {
this.inputs.container.classList.add(key.type);

this.inputs.label.value = key.label;

this.inputs.colorPicker.value = utils.rgbToHex(key.color);
this.inputs.colorText.value = utils.rgbToHex(key.color).toUpperCase();
this.inputs.colorPicker.value = `#${utils.validateHex(key.color)}`;
this.inputs.colorText.value = `#${utils.validateHex(key.color).toUpperCase()}`;

switch (key.type) {
case 'macro':
Expand Down
14 changes: 5 additions & 9 deletions webui/js/modules/classes/KeyContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,10 @@ export default class KeyContainer {
_initDOM() {
let DOM = {};

const [r, g, b] = this.color;
const style = `background-color: rgb(${r},${g},${b})`;

DOM.container = utils.create({
attributes: {
class: 'key-container',
style: style,
style: `background-color: #${utils.validateHex(this.color)}`,
},
children: [
(DOM.type = utils.create({
Expand Down Expand Up @@ -281,13 +278,12 @@ export default class KeyContainer {

/**
* Sets the color for the KeyContainer.
* @param {number[]} [color=[255, 255, 255]] - The color to set for the KeyContainer.
* @param {string} [color='ffffff'] - The color to set for the KeyContainer.
*/
setColor(color = [255, 255, 255]) {
this.color = color;
const [r, g, b] = this.color;
setColor(color = 'ffffff') {
this.color = utils.validateHex(color);
utils.style(this.DOM.container, {
'background-color': `rgb(${r},${g},${b})`,
'background-color': `#${this.color}`,
});
}

Expand Down
33 changes: 21 additions & 12 deletions webui/js/modules/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,23 +92,32 @@ export function capitalize(s) {
* @returns {Array} - An array representing the RGB color values [R, G, B].
*/
export function hexToRGB(hexcolor) {
const r = parseInt(hexcolor.substr(1, 2), 16);
const g = parseInt(hexcolor.substr(3, 2), 16);
const b = parseInt(hexcolor.substr(5, 2), 16);
const r = parseInt(hexcolor.substring(1, 3), 16);
const g = parseInt(hexcolor.substring(3, 5), 16);
const b = parseInt(hexcolor.substring(5, 7), 16);
return [r, g, b];
}

/**
* Converts an RGB color array to a hexadecimal color string.
* @param {Array} rgb - An array representing the RGB color values [R, G, B].
* @returns {string} - The hexadecimal color string (e.g., '#RRGGBB').
* @returns {string} - The hexadecimal color string (e.g. 'RRGGBB').
*/
export function rgbToHex([r, g, b]) {
const intToHex = (c) => {
const hex = c.toString(16);
return hex.length == 1 ? '0' + hex : hex;
};
return '#' + intToHex(r) + intToHex(g) + intToHex(b);
return intToHex(r) + intToHex(g) + intToHex(b);
}

/**
* Validates and converts RGB color objects to hex format if needed.
* @param {string|object} color - The color in hex format or RGB object.
* @returns {string} - The color in hex format (e.g. 'RRGGBB').
*/
export function validateHex(color) {
return typeof color === 'object' ? rgbToHex(color) : color;
}

/**
Expand Down Expand Up @@ -190,7 +199,7 @@ export function convertJsonToFileIds(baseData) {
dataStore[keyId] = {
type: "group",
label: item.label,
color: item.color,
color: validateHex(item.color),
content: processContent(item.content),
encoder: {
switch: item.encoder.switch,
Expand All @@ -205,7 +214,7 @@ export function convertJsonToFileIds(baseData) {
dataStore[fileId] = {
type: "macro",
label: item.label,
color: item.color,
color: validateHex(item.color),
content: item.content
};
processedContent.push(fileId);
Expand Down Expand Up @@ -248,7 +257,7 @@ export function restoreJsonFromFileIds(dataStore) {
let groupData = {
type: "group",
label: data.label,
color: data.color,
color: validateHex(data.color),
content: loadContent(data.content),
encoder: {
switch: data.encoder.switch,
Expand All @@ -261,7 +270,7 @@ export function restoreJsonFromFileIds(dataStore) {
let macroData = {
type: "macro",
label: data.label,
color: data.color,
color: validateHex(data.color),
content: data.content
};
content.push(macroData);
Expand Down Expand Up @@ -295,13 +304,13 @@ export const defaultKeys = {
macro: {
type: 'macro',
label: 'unkown',
color: [255, 255, 255],
color: 'ffffff',
content: []
},
group: {
type: 'group',
label: 'unkown',
color: [255, 255, 255],
color: 'ffffff',
content: [],
encoder: {
switch: [],
Expand All @@ -312,7 +321,7 @@ export const defaultKeys = {
close: {
type: 'macro',
label: '<-',
color: [18, 18, 18],
color: '121212',
content: [{ sys: 'close_group' }],
}
};

0 comments on commit deb0a67

Please sign in to comment.