[GH-ISSUE #135] ColorButton: color format #83

New issue

Closed

opened 2026-05-05 11:39:56 -06:00 by gitea-mirror · 3 comments

gitea-mirror commented

2026-05-05 11:39:56 -06:00

Owner

Originally created by @mischnic on GitHub (May 17, 2018).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/135

At first the onChanged events's color object returns the component values from 0-255 (but the preview on the button itself is always white - are you setting the color of underlying uiColorButton using 0-255?). Moving the silder below the color wheel makes the button emit colors from 0-1 (the preview works but the area expected 0-255).

Same code as in the previous issue:

import React, { Component } from 'react';
import { render, App, Window, Area, Box, ColorButton } from './src';

class Main extends Component {
  state = {
    c: 'red',
  };

  render() {
    return (
      <App>
        <Window title="Title" size={{ w: 400, h: 400 }} margined>
          <Box padded>
            <ColorButton
              color="red"
              onChange={({ r, g, b, a }) => {
                console.log(r, g, b, a);
                this.setState({
                  c: `rgba(${r.toFixed(0)}, ${g.toFixed(0)}, ${b.toFixed(0)}, ${a})`,
                });
              }}
            />
            <Area>
              <Area.Rectangle
                x="0"
                y="0"
                width="100%"
                height="100%"
                fill={this.state.c}
              />
            </Area>
          </Box>
        </Window>
      </App>
    );
  }
}

render(<Main />);

Not an issue with libui-node:

const libui = require('../..');

const win = new libui.UiWindow('UiColorButton example', 320, 60, true);

const widget = new libui.UiColorButton();
widget.color = new libui.Color(0, 1, 1, 1);
widget.onChanged(() => {
	console.log(widget.color)
});
win.setChild(widget);

win.show();
libui.Ui.main();

Originally created by @mischnic on GitHub (May 17, 2018). Original GitHub issue: https://github.com/kusti8/proton-native/issues/135 At first the onChanged events's color object returns the component values from 0-255 (but the preview on the button itself is always white - are you setting the color of underlying uiColorButton using 0-255?). Moving the silder below the color wheel makes the button emit colors from 0-1 (the preview works but the area expected 0-255). ![colorbutton](https://user-images.githubusercontent.com/4586894/40167533-9441d766-59c1-11e8-8fd7-84e747d8a5f4.gif) Same code as in the previous issue: ```js import React, { Component } from 'react'; import { render, App, Window, Area, Box, ColorButton } from './src'; class Main extends Component { state = { c: 'red', }; render() { return ( <App> <Window title="Title" size={{ w: 400, h: 400 }} margined> <Box padded> <ColorButton color="red" onChange={({ r, g, b, a }) => { console.log(r, g, b, a); this.setState({ c: `rgba(${r.toFixed(0)}, ${g.toFixed(0)}, ${b.toFixed(0)}, ${a})`, }); }} /> <Area> <Area.Rectangle x="0" y="0" width="100%" height="100%" fill={this.state.c} /> </Area> </Box> </Window> </App> ); } } render(<Main />); ``` Not an issue with libui-node: ```js const libui = require('../..'); const win = new libui.UiWindow('UiColorButton example', 320, 60, true); const widget = new libui.UiColorButton(); widget.color = new libui.Color(0, 1, 1, 1); widget.onChanged(() => { console.log(widget.color) }); win.setChild(widget); win.show(); libui.Ui.main(); ```

gitea-mirror closed this issue

2026-05-05 11:39:59 -06:00

gitea-mirror commented

2026-05-05 11:40:04 -06:00

Author

Owner

@mischnic commented on GitHub (May 17, 2018):

Ok, I found the issue. What should the color format be? 0-255 or 0-1?

@mischnic commented on GitHub (May 17, 2018): Ok, I found the issue. What should the color format be? 0-255 or 0-1?

gitea-mirror commented

2026-05-05 11:40:07 -06:00

Author

Owner

@khanhas commented on GitHub (May 18, 2018):

I also want to report a problem with ColorButton.
Init color option is converted all wrong, both in hex and rgb format.

Example code:

<ColorButton color="rgb(255,80,80)" />

And in color picker:

You can see R, G, B 0-255 range values are mistakenly set in 0-1 range boxes.

@mischnic, I wonder if your commit fixes this problem?

@khanhas commented on GitHub (May 18, 2018): I also want to report a problem with ColorButton. Init `color` option is converted all wrong, both in hex and rgb format. Example code: ```jsx <ColorButton color="rgb(255,80,80)" /> ``` And in color picker: ![image](https://user-images.githubusercontent.com/26436809/40242249-4ceba17c-5ae7-11e8-9021-7d30a9ab28be.png) You can see R, G, B 0-255 range values are mistakenly set in 0-1 range boxes. @mischnic, I wonder if your commit fixes this problem?

gitea-mirror commented

2026-05-05 11:40:10 -06:00

Author

Owner

@mischnic commented on GitHub (May 18, 2018):

@khanhas Yes, it does.

@mischnic commented on GitHub (May 18, 2018): @khanhas Yes, it does.