Search code examples
awesome-wm

Resize textbox widget to fit content

I'm creating a widget to indicate cpu usage in percentage. The widget is a graph with a textbox drawn on top of it. Since the text is the same color as the graph I want to give the text a background. So I tried something like this:

cpu_graph = wibox.widget {
    widget = wibox.widget.graph,
    width = 40,
}
vicious.cache(vicious.widgets.cpu)
vicious.register(cpu_graph, vicious.widgets.cpu, "$1", 2)
cpu_text = wibox.widget {
    align = 'center',
    widget = wibox.widget.textbox
}
vicious.register(cpu_text, vicious.widgets.cpu, "$1%", 2)
cpu_txt_bg = wibox.container.background(
    cpu_text,
    '#ff0000',
    gears.shape.rectangle
)
cpu_graph_s = wibox.widget {
    wibox.container.mirror(cpu_graph, { horizontal = true }),
    cpu_txt_bg,
    layout = wibox.layout.stack
}

Unfortunately the background seems to cover the whole graph like so:

enter image description here

I presume this is because the textbox is the same size as the graph so I think the textbox should be resized to fit only it's content.

Using a margin container I kinda get what I want:

cpu_graph_s = wibox.widget {
    wibox.container.mirror(cpu_graph, { horizontal = true }),
    wibox.container.margin(cpu_txt_bg, 12, 12, 5, 5)
    layout = wibox.layout.stack
}

The result is way better:

enter image description here

Sadly this seems to resize the whole graph when the text changes in size:

enter image description here

Is there a better solution to resize the textbox to size without changing the size of the whole graph?

Solution

  • Instead of "$1%", try '<span bgcolor="#ff0000">$1%</span>'. See https://developer.gnome.org/pango/stable/PangoMarkupFormat.html.