Changing UI chart colors? Using ui_control?

General
1

Changing UI chart colors? I believe the following should work right?

msg.ui_control = {"colors":['#FF0000', '#00FF00', '#0000FF', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000']};

The question is can I use predefined HTML color names? Or does it have to be an HTML hex color code?

msg.ui_control = {"colors":['red', 'green', 'blue', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000']};

Does not seem to work?

2

Ah... I think I have something else goofed up...

6/18/2022, 4:08:45 PMnode: Messagemsg : Object
object
payload: 12.06
enabled: true
color: "#0000ff"
ui_control: object
colors: array[9]
0: "#0000ff"
1: "#000000"
2: "#000000"
3: "#000000"
4: "#000000"
5: "#000000"
6: "#000000"
7: "#000000"
8: "#000000"
_msgid: "ca7fb5a7e6fcb681"
_event: "node:a9262e35158f35f8"

The above looks right to me, but does not seem to customize the chart line color, only have 1 series so should only have to change the first color, right?

I am rolling my own 'msg' since I a function node that has multiple outputs to various UI elements...

theTemperature=msg.payload[ZERO].temperature;
theColor=Colorize(theTemperature);
theColors = { "colors": [
    theColor, 
        '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000'
    ]
};
        
theMessages[TEMPERATURE]={ payload: theTemperature, ...ENABLE, color: theColor, ui_control: theColors };

I know the temperature, enable, color object properties are working, but never tried to set ui_control this way before. The Colorize() function varies the color based on a scale so temperature 40C red, 35C orange, etc.

3

Ok, I was cleaning up the code a bit, and replacing the static colors array with an array fill method, and the colorization worked! So scratching my head a bit, why the following works...

theColors = { "colors": Array(NINE).fill(theColor) };

But the following does not...

theColors = { "colors": [
    theColor, 
        '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000'
    ] 
};

I only have one series, so first color should be the only one that matters, I got the default color, not black or dark blue using the above.

4

Ok... I swear it worked, but now I just looked at it again, and default color has taken over. So a simple array of 9 identical color values for 'colors' in ui_control, is not working? What did I goof-up?

I found a forum thread, that suggested I quality the entire settings for chart, which I tired. Again.... this looks right to me... But it clearly is not working as expected, I just get the default color. Interesting that no errors, and if change the line type or other settings the chart adapts. Just don't seem to get the color accepted.

msg : Object
object
payload: 11.55
enabled: true
color: "#0000ff"
ui_control: object
look: "line"
legend: false
interpolate: "bezier"
xformat: "HH:mm"
colors: array[9]
0: "#0000ff"
1: "#0000ff"
2: "#0000ff"
3: "#0000ff"
4: "#0000ff"
5: "#0000ff"
6: "#0000ff"
7: "#0000ff"
8: "#0000ff"
options: object
empty
_msgid: "96ef5d84248a63b2"
_event: "node:a9262e35158f35f8"
5

Ok, I figured out what gets the colorization to work... but someone that knows the 'code' logic applicable will have to explain why this is the case.

I figured out that after I set the colors (array) I have to sent chart clear payload? Or I should say clear chart payload, the colorization starts working? Color me [COUGH] confused.

The question is... how to change the color without clearing the chart? I don't want to reset/clear the chart just to change the line color. Please tell me there is a way to do this, I hope?

6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.