Trend widget styling

[ivan141]

I've been quite busy exploring the new trend widget in WinCC OA 3.15 (patch 7) and have a couple of questions about it for you experts.

The help file literally mentions the following in the release notes:
The ruler line itself can now also be styled like a curve line.

I havent been able to find a way to do this, and as far as I can tell, it's not documented.
However: I have a need for this.
With the introduction of color schemes it is tempting to implement a dark and light UI theme,
but if I give my trend widget a dark background the black ruler becomes invisible.

Some other styling issues I am having with it are:
-I can style the background of the legend area, but if I do this I lose the textcolor of the curve names,
and they are sorted in a flat list in stead of in 2 columns (when size allows for it).
Is there any way to style the legend without losing the textcolor and formatting? I managed to do this in 3.13
by styling TrendQT QComboBox but it doesnt work in 3.15.

-I can style the scroll bar, but there is an area behind it that retains the standard grey backgroundcolor.
Is this area styleable?

Does anyone have an overview of the Qt classes used to build TrendQT?

Hope someone out there has some ideas...

[mkoller]

For the ruler use the config entries like
trendRulerLineType = "[dotted, oneColor, JointMiter, CapNotLast, 5]"
trendRulerColor = "{255,0,0}"
However currently you can only define the color with RGB values, therefore it will also not change on a color scheme change during runtime.

ad Legend: I don't see this problem.
Try
TrendLegend { background: steelblue; }

ad Scrollbar: I'm ptretty sure you can. See http://doc.qt.io/qt-5/stylesheet-reference.html

ad Qt classes in trend:
The trend uses a bunch of Qt widgets, e.g. the main widget is a QSplitter, which contains TrendLegend, a QWidget with QScrollBar and QPushButtons for the "commands", QScrollArea,
TrendAreaQT (derived from QWidget) which itself contains the scales and the plot ...
Maybe it's simpler if you ask what you want to do.

[Andorhal]

Hello.

Thank you for the feedback, we are currently working on improving the documentation for this.

Styling the ruler:
1) trendRulerLineType string (lineType) [solid, oneColor, JointMiter, CapButt, 0]
2) trendRulerColor string (color) {0,0,0}
These are config entries, please have a look at the reference tables [ui] section.

You can now also style the rubberband selection (drag&hold mouse) via CSS:
TrendPlot
{
qproperty-rubberBandLineColor: red;
qproperty-rubberBandFillColor: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(255, 255, 255, 80), stop:1 rgba(0, 255, 0, 130));
}
qproperty-rubberBandLineColor is used for the moving(!) ruler.

Legend:
The trend legend can be styled via CSS:
TrendLegend { background: steelblue; }
Help: GEDI > Stylesheets > Available Classes, there you can also find an overview for the trend classes.

Best regards,
Robert

[ivan141]

Thank you all for your quick replies.. very helpful.

You are offcourse right about the list of classes mentioned in the online help.
I'm not sure how I managed to miss the extensive listing for TrendQT.

Nice to know the ruler color is implemented, I'll give it a try, but I'm sure I wont surprise you when
I suggest it would be a nice feature to have this as a configurable property of the trend so it can be used
with color schemes.

I'll give it another go and let you know if I managed to do everything I asked you about.

[ivan141]

Thanks to your input I managed to:
-color the ruler (config entry)
-color the background of the scrollbar (TrendQT QWidget{background-color: ...})
-color the background of the TrendLegend (TrendQT TrendLegend{background-color:...})

I still want to accomplish the following things:

-Set border of TrendQT to 'none' without side-effects (TrendQT{border: none;})
When I do this, I lose the default styling of the trendlegend, which is a dealbreaker for me.

-Change the color of the 'tooltip' text that pops up when dragging the scroll bar. This is currently black.

And a few nice-to haves that are probably not possible:
-Change the attention effect color for TrendLegend.. it looks pretty bad on a dark background.
-Change the icon's for the buttons on the toolbar (especially 1:1 is nearly invisible on dark backgrounds.

[mkoller]

-color the background of the scrollbar (TrendQT QWidget{background-color: ...})

This is not only changing the scrollbar but ALL descendant QWidgets of the trend - which means ALL descendants.
Use TrendQT QScrollBar { ... } instead.

TrendQT{border: none;} - it seems this just changes the background color to transparent. Would it work when you add a background-color: xxx; ?

-Change the color of the 'tooltip' text:
TrendQT QLabel#currSliderPos { background: white }

-Change the attention effect color for TrendLegend.
you mean the animation which is shown while loading data ?
That's a gif image but it's "hardcoded" (data inside the executable), so sorry, you can't change this.

-Change the icon's for the buttons on the toolbar
These buttons use image files you can change. They are in the pictures dir named zoom_orig.* and undo.*
Just create own ones and place them in your projects/pictures dir.

[ivan141]

Hi Martin,

Using TrendQT QScrollBar does not work for changing the background of the 'frame' it's loaded in (at least for me).
I use a slimmer scrollbar without +/- buttons, but the frame remains the original size and is therefore visible all around the scrollbar and the 2 menu buttons.
Perhaps this could be addressed by targeting the QWidget by it's specific name?(which I dont know).

The border property for TrendQT does do what I expect it to (the border in foreground color around the entire control dissapears),
but it has side effects on the TrendLegend, which loses it's item colors and formatting. I'm looking for a way to get rid of the border of the trendcontrol
without affecting the legend.

The label backcol solves my problem with legibility nicely, thanks again!

While we are at it: any suggestions for styling the default datetime selector widgets?
It looks like a combination of QComboBox and QCalendarWidget but I'm pretty sure it's not mentioned in the available classes list in the help file.

[mkoller]

- QScrollBar: unfortunately I did not set a specific objectName for this QScrollBar widget.
- border: What I meant was, try using 2 properties { border: none; background-color: something }. I have no idea why the border around the main widget interferes with the TrendLengend widget inside ...

- datetime: I assume you mean the DateTimeEdit.ewo
It's derived from QDateTimeEdit and yes, the popup uses QCalendarWidget

[ivan141]

Setting multiple properties for TrendQT does not help either I'm afraid.
I think the problem is stylesheet inheritance. This could be avoided by addressing the objects by name from css (using an id selector, e.g.: TrendQT#TrendControlName).
If a name is set offcourse, which is unlikely if you didnt see a need for it.