Can I color my power table component with gradient colors?
Sure. You would need to apply the CSS style to your table cells (assuming it's not the table background you want to modify).
In the sample above you can see that "country" and "population" are simple values but that "city" has been converted to an object with style properties. Linear-gradient can be defined in there.
You can instead apply the gradient to the whole column using
props.columns.0.sytle.background-image : linear-gradient(to right, blue, white) or similar. This would eliminate the need to modify the data as shown above.
Really you should define the formatting in a Perspective style and then apply that class to the object being modified. This makes it very easy to maintain a professionally consistent look and feel across your application and a modification just requires an adjustment to the style - once!
Also, I recommend using built-in theme colors so that the application looks good in light and dark modes.
https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes
sorry but my project is in vision not perspective.
What an interesting challenge. This problem has been bugging me in the back of my brain every since I read it, and I've been hoping somebody would come up with a solution. I finally found some time this morning to mess around with it, and so far, this is all I have been able to come up with that approximates what you've asked for. It's definitely not a finished product, but at least it's a direction you could explore:
Here is the script that runs in the configureCell extension function:
#def configureCell(self, [...], colView):
from java.awt import GradientPaint
from java.awt.image import BufferedImage
from javax.swing import ImageIcon
if selected:
return {'background': self.selectionBackground}
if rowView % 2 == 0:
colorOne = system.gui.color(255,0,0)
colorTwo = system.gui.color(0,255,255)
else:
colorOne = system.gui.color(0,255,0)
colorTwo = system.gui.color(0,0,255)
text = textValue
font = self.font
renderer = self.table.defaultCellRenderer
editor = self.table.getCellEditor(rowIndex, colIndex)
cellRect = self.table.getCellRect(rowIndex, colIndex, True)
gradient = GradientPaint(0, 0, colorOne, cellRect.width, cellRect.height, colorTwo)
image = BufferedImage(cellRect.width, cellRect.height, BufferedImage.TYPE_INT_ARGB)
graphic = image.createGraphics()
graphic.setPaint(gradient)
graphic.fillRect(0, 0, cellRect.width, cellRect.height)
fontMetrics = graphic.getFontMetrics(font)
textWidth = fontMetrics.stringWidth(text)
textHeight = fontMetrics.height
x = int(0.5*(float(cellRect.width) - float(textWidth)))
y = int(0.5*(float(cellRect.height) + float(fontMetrics.ascent - fontMetrics.descent)))
graphic.setColor(system.gui.color(255, 255, 255))
graphic.setFont(font)
graphic.drawString(text, x, y)
graphic.dispose()
renderer.icon = ImageIcon(image)
renderer.text = None
return {'renderer':renderer}
Basically, the script replaces the text with a gradient image that has the text drawn on it. However, if the cell is selected, it does not do this. The script does not work with a boolean column, although it could if it were developed further to draw the checkbox. Also, it exhibits some unexpected behavior if auto row height is selected. I'm guessing it's because he cellRect.height property is slightly taller than the row height forcing a resize when repaints occur. If the autoRowHeight property is important to your table, it could probably be fixed by calculating the image height a different way.
2 Likes
woah. Thanks I will definitely explore it and try it.
1 Like
I have developed a way for a separate problem that would work for the Boolean columns in this problem. The code has been posted here:
Also, I was able resolve this issue in the above example by simply subtracting a small margin from the cell rectangle dimensions.