Need an addition to Levelbar: different colored segments sum up to the total bar.

Development
1

The Levelbar widget provides modes ‘continuous’ and ‘discrete’ and can set some levels at which the state changes.
But both modes, when colors have been defined in css for the levels, make the entire bar change color when a level is surpassed.
This is extremely annoying in my application where the bar is supposed to show an ever changing level (radio receiver signal strength).
Wish is that the part of the bar up to a set level is of a set color, and from that level in another set color, etc. Not that the entire bar changes color, which give a sort of annoying flickering effect when the level hovers around a limit level.
Is there a way to achive my wish with current Gtk4 or Adwaita?

2

Hi,

Do you use a “discrete” levelbar, right?
If yes then you can apply custom colors to each block using CSS:

levelbar.discrete block.filled:nth-child(1) {
	background: green;
}

levelbar.discrete block.filled:nth-child(2) {
	background: yellowgreen;
}

levelbar.discrete block.filled:nth-child(3) {
	background: yellow;
}

levelbar.discrete block.filled:nth-child(4) {
	background: orange;
}

levelbar.discrete block.filled:nth-child(5) {
	background: red;
}

For testing, you can paste that in the GTK inspector and tweak to your needs.

3

@gwillems
thanks for the suggestion. Would like to use the continuous mode because the metering needs some accuracy.
The levels in my app can go from 0 to 114 and, the level indicating a value in dB, I’d like to have 3 dB accuracy, which gives more than 30 blocks in the discrete scenario.
Towards 54 the color must be green, and the part from 54 upwards to 114 must be red, against a background of say grey where the bar hasn’t reached. I’ll draw a scale next to it. I guess your suggestion is to set the predefined levels (low, high, full) such that they do not overrule the colors set for the individual blocks and make the color of all blocks change when a level is surpassed?
Looking at the source code of levelbar it should be possible to make a variety that has the operating mode that I need.
When the three predefined levels exist, and perhaps more custom ones, the widget before drawing blocks should start with some tests of level.
When value is between lowest-value and low-level, just a single block. When between low-level and high-level, it draws the first fully and continues from where that ends with a second block. And likewise to full, and from full to highest level. So in the default situation, with three predefined levels, a maximum of 4 blocks, each with their own name for css purposes. Setting that in css is preferable over setting color for more than 30 blocks.

4

The description is a bit confusing to me…
Could you share some pictures of how it should look like?