Update LabelItem to allow transparency in the text

[ElpadoCan]

Use the QColor.HexArgb NameFormat when retrieving the name of the color in setText to allow text with transparency

[j9ac9k]

Hi @ElpadoCan

Thanks for the PR!

Are there I'm wondering if there are backward compatibility issues here I need to be concerned about; as pg.mkColor explicitly does not support the #AARRGGBB format; but I'll look over that in a bit.

[ElpadoCan]

Thanks! I didn't test on PyQt6, I have PyQt5. I subclassed LabelItem, used the setText as in the PR and it works

[j9ac9k]

Thanks! I didn't test on PyQt6, I have PyQt5. I subclassed LabelItem, used the setText as in the PR and it works

The full enum namespace is mandatory on PyQt6 bindings but works on all the other bindings we support. The shortened namespace works on PySide2/6 and PyQt5. We don't put this in the documentation, but just an FYI checking against PyQt6 will catch these issues.

Regarding the #AARRGGBB bit; pretty sure that won't work without doing some more string manipulation. Looking at the source, looks like we take the hex representation of the color and put it as part of the `text'. HTML seems to want the alpha to be the last two hex characters.

I'm toying with the example here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

Can you provide a code-snippet showing say, transparent Red text?

[ElpadoCan]

Sure, below is the code that generates both transparent and opaque text on top of a random noise image (I subclassed LabelItem). This is a screenshot of the created window

import pyqtgraph as pg

import numpy as np

from pyqtgraph.Qt import QtGui, QtWidgets

class myLabelItem(pg.LabelItem):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    def setText(self, text, **args):
        self.text = text
        opts = self.opts
        for k in args:
            opts[k] = args[k]

        optlist = []

        color = self.opts['color']
        if color is None:
            color = pg.getConfigOption('foreground')
        color = pg.functions.mkColor(color)
        optlist.append('color: ' + color.name(QtGui.QColor.NameFormat.HexArgb))
        if 'size' in opts:
            optlist.append('font-size: ' + opts['size'])
        if 'bold' in opts and opts['bold'] in [True, False]:
            optlist.append('font-weight: ' + {True:'bold', False:'normal'}[opts['bold']])
        if 'italic' in opts and opts['italic'] in [True, False]:
            optlist.append('font-style: ' + {True:'italic', False:'normal'}[opts['italic']])
        full = "<span style='%s'>%s</span>" % ('; '.join(optlist), text)
        #print full
        self.item.setHtml(full)
        self.updateMin()
        self.resizeEvent(None)
        self.updateGeometry()

app = pg.mkQApp("Test transparent text LabelItem")

win = QtWidgets.QMainWindow()

layout = QtWidgets.QHBoxLayout()
centralWidget = QtWidgets.QWidget()
win.setCentralWidget(centralWidget)
centralWidget.setLayout(layout)

graphLayout = pg.GraphicsLayoutWidget()
layout.addWidget(graphLayout)

ax = pg.PlotItem()
ax.invertY(True)
graphLayout.addItem(ax)

label1 = myLabelItem()
label2 = myLabelItem()

imgItem = pg.ImageItem()
imgItem.setLevels((0,512))
img = np.random.randint(0,255,size=(40,40))
imgItem.setImage(img)
ax.addItem(imgItem)

label1.setText('Test', color=(255,0,0))
label1.setPos(0,20)
label2.setText('Test', color=(255,0,0,100))

ax.addItem(label1)
ax.addItem(label2)

win.show()
pg.exec()

[ElpadoCan]

Forgot to mention that I am not doing any additional string manipulation, I only added QtGui.QColor.NameFormat.HexArgb to the original code, and it seems to work.

[ElpadoCan]

So I did some additional testing and I am confused. Every online HTML editor I tried requires the #RRGGBBAA format for color with transparency. However, I tried with QLabel and it actually requires the #AARRGGBB format.

Interestingly, my code editor also gives a preview of the color and interprets the hex string with the #AARRGGBB format, see this screenshot (the 80 in the hex string is for 50% transparency):

In any case, since the #AARRGGBB format is the only alternative provided by Qt, my guess is that it is fully compatible with their HTML rendering.

Here is a screenshot and the code-snippet with two QLabels, the label1 has the #RRGGBBAA but is then displayed as a blue color.

from pyqtgraph.Qt import QtWidgets, QtGui

import pyqtgraph as pg

app = pg.mkQApp('Test transparent text')
win = QtGui.QMainWindow()

centralWidget = QtWidgets.QWidget()
layout = QtWidgets.QVBoxLayout()

centralWidget.setLayout(layout)
win.setCentralWidget(centralWidget)

label1 = QtWidgets.QLabel()
label1.setText('<span style="color: #ff000080; font-size:50px">Test</span>')

label2 = QtWidgets.QLabel()
label2.setText('<span style="color: #80ff0000; font-size:50px">Test</span>')

layout.addWidget(label1)
layout.addWidget(label2)

win.show()

app.exec_()

[j9ac9k]

Hi @ElpadoCan

Sorry I didn't follow up a while ago, glad you share in my confusion, but it looks like Qt adheres to its own ARGB ordering (instead of RGBA) so that bit of code is fine.

I do need the enum to change to it's full namespace one like I put in the in-line comment.

Thanks!

[ElpadoCan]

Hi @j9ac9k, I changed the enum to the full namespace. Let me know if we need any other change, thanks!

[j9ac9k]

Ha, this PR triggered a rather critical error (that has nothing to do w/ your code diff).

[j9ac9k]

Closing/Re-Opening to hopefully trigger a new CI run.

[j9ac9k]

Ok, passing now; LGTM, thanks for the PR merging!