Returning a container to the dashboard with colored text

Dash Python
1

I have created a string in my code that will print out in color using ANSI Code. So for example, I might use the following to create a string:
redString = “\033[91m” + “This string is red.”
yellowHighlightString = '\033[43m" + “Now it is highlighted in yellow.”

When I print either out to my console, they display as desired.

However, if I return these strings in container variables from my update_graph routine, and then display the strings on the dashboard, it does not recognize the ANSI code and prints it all out as actual text. Is there a way to display this string in color on the dashboard?

2

Hi @majudd , maybe this gives you some ideas:

1 Like
3

I am sorry, this does not help, not enough explanation for me.

4

@majudd so we are in the same boat.

Could you explain a bit more, what you are trying to do? How does your code look like? With the information you provided ist is difficult to help you.

It would be very helpful if you created a MRE

EDIT: by any chance you are looking for something like this?

from dash import Dash, Input, Output, html, ctx

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            id='dump',
            children=['color string'],
            style={
                'font-size': 60,
                'text-align': 'left'
            }
        ),
        html.Button(
            'red',
            id='red'
        ),
        html.Button(
            'yellow',
            id='yellow'
        )
    ]
)


@app.callback(
    Output('dump', 'style'),
    Input('red', 'n_clicks'),
    Input('yellow', 'n_clicks'),
    prevent_initial_call=True
)
def start_interval(red, yellow):
    # since the two buttons have the id "red" and "yellow" 
    # the triggered id will be just ste color string
    
    color = ctx.triggered_id
    return {
            'color': color,
            'font-size': 60,
            'text-align': 'left'
    }


if __name__ == "__main__":
    app.run(debug=True)

creates:
colors

1 Like