Converting RGB value to Integer

[Passch]

The Problem:

I would like to add a more following function in to the app:

1. Function for converting RGB value to integer.
   → Show live value on the interface (same like #HEX value)
   → Able to input the number, and change the color.
   → Able to pass the current value to another function in my app.

2. Ability to add a blank custom input field into the interfaces (with editable caption)
   → This doesn't need to show any value, I'd like that use can able to type input by themselves.

The Solution:

Converting function is pretty simple as below, but I don't know how to add it into the app..

// convert three r,g,b integers (each 0-255) to a single decimal integer (something between 0 and ~16m)
function colourToNumber(r, g, b) {
  return (r << 16) + (g << 8) + (b);
}

// convert it back again (to a string)
function numberToColour(number) {
  const r = (number & 0xff0000) >> 16;
  const g = (number & 0x00ff00) >> 8;
  const b = (number & 0x0000ff);
  
  return [r, g, b];
  // or eg. return `rgb(${r},${g},${b})`;
}

Could you help me please? contact: pc@passch.com

[Wondermarin]

The Problem:

I would like to add a more following function in to the app:

1. Function for converting RGB value to integer.
   → Show live value on the interface (same like #HEX value)
   → Able to input the number, and change the color.
   → Able to pass the current value to another function in my app.
2. Ability to add a blank custom input field with the same design into the interfaces (with editable caption)
   → This doesn't need to show any value, I'd like that use can able to type input by themselves.

The Solution:

Converting function is pretty simple as below, but I don't know how to add it into the app..

// convert three r,g,b integers (each 0-255) to a single decimal integer (something between 0 and ~16m)
function colourToNumber(r, g, b) {
  return (r << 16) + (g << 8) + (b);
}

// convert it back again (to a string)
function numberToColour(number) {
  const r = (number & 0xff0000) >> 16;
  const g = (number & 0x00ff00) >> 8;
  const b = (number & 0x0000ff);
  
  return [r, g, b];
  // or eg. return `rgb(${r},${g},${b})`;
}

Could you help me please? contact: pc@passch.com

Not sure I follow.
Do you want to add the feature to add custom fields to interface?

[Passch]

Hmmm, Yes :)
I would like to add the feature of showing integer of that specific color, and a feature to add custom fields to interface.

[Passch]

can you please guide, where should I start ? Or can I somehow hire you for adding those features?

[Passch]

one more question, how can I use RGB value as a default ?

// this work
const [color, setColor] = useColor("hex", "#0000FF");

// this doen't work
 const [color, setColor] = useColor("rgb", "(0, 0, 255)");

[Wondermarin]

one more question, how can I use RGB value as a default ?

// this work
const [color, setColor] = useColor("hex", "#0000FF");

// this doen't work
 const [color, setColor] = useColor("rgb", "(0, 0, 255)");

const [color, setColor] = useColor("rgb", { r: 0, g: 0, b: 255 });

[Passch]

Thank you !

But after I set useColor as "rgb" → I can't select another color anymore. Could you please check what i did wrong?

https://codesandbox.io/s/heuristic-river-f9htb?file=/src/App.js

thanks

[Wondermarin]

Thank you !

But after I set useColor as "rgb" → I can't select another color anymore. Could you please check what i did wrong?

https://codesandbox.io/s/heuristic-river-f9htb?file=/src/App.js

thanks

This is related with bug #25, which has already been fixed.
The update will be released this week.

[Passch]

Thank you @Wondermarin :)

[Wondermarin]

Outdated