1

I downloaded a bunch of icons from https://github.com/iconic/open-iconic The icons are originally black and in .png format.

I want to add an arrow pointing upwards on one of my canvas.

I found one way of importing the icon, but the problem is that I cannot change the icon-color. Can I change the icon color within Kivy, or do I need to create a separate .png image for each color that I will use?

<VitalBoard>:
canvas:
    Color:
        rgba: 0.17, 0.89, 0.89, 1
        hsv: 0.48, 0.80, 0.34
    Rectangle:
        pos: root.width * 2 / 3 + 20, root.height * 13 / 24 + 20
        size: root.width * 2 / 6 - 10 , root.height * 9 / 24 - 20
Label:
    font_size: 70
    text: "0"
    pos: root.width * 2 / 3 + 20, root.height * 13 / 24 + 20
    size: root.width * 2 / 6 - 10 , root.height * 9 / 24 - 20
    Image:
        source: 'open-iconic/png/arrow-thick-top-8x.png'
        pos: root.width * 2 / 3 + 20, root.height * 13 / 24 + 20
        size: root.width * 2 / 6 - 10 , root.height * 9 / 24 - 20
        width: 74
Mattis Asp
  • 993
  • 3
  • 14
  • 29
  • I don't think you can change image colors within kivy. You have to change them in a paint program before you load them to kivy. – George Bou Sep 29 '17 at 20:24

1 Answers1

1

Kivy has a color attribute on image https://kivy.org/docs/api-kivy.uix.image.html#kivy.uix.image.Image.color

enter image description here

It seems that black and transparent are not changed by it. But white can be changed.

GridLayout:
    cols:4
    canvas.before:
        Color:
            rgba: [1,1,1,1]
        Rectangle:
            pos: self.pos
            size: self.size

    Image:
        source: 'arrow-bottom-8x.png'
    Image:
        source: 'arrow-bottom-8x.png'
        color: [1,0,0,1]
    Image:
        source: 'arrow-bottom-8x.png'
        color: [0,1,0,1]
    Image:
        source: 'arrow-bottom-8x.png'
        color: [0,0,1,1]
    Image:
        source: 'download.png'
    Image:
        source: 'download.png'
        color: [1,0,0,1]
    Image:
        source: 'download.png'
        color: [0,1,0,1]
    Image:
        source: 'download.png'
        color: [0,0,1,1]

I think you need to do it manually or outside of kivy. You might want to take a look here for example https://stackoverflow.com/a/1616893/6646710

PalimPalim
  • 2,892
  • 1
  • 18
  • 40
  • 1
    This is correct, the color is used to tint the pixels, by multiplication, so while white (1, 1, 1, 1) is transformed into the given tint, black (0, 0, 0, 1) is only impacted on the opacity chanel, and transparent (X, X, X, 0) is not impacted on the only chanel that matters, alpha. If you want to colorize the black part of the icon, it could be worth creating an inverted version in an image editor, and use the color attribute on this one too, and use both versions on top of each others, to create combinations of colors. – Tshirtman Sep 30 '17 at 11:01
  • 1
    This is great! Since many icons come in black, I will, therefore, add this code for future viewers using imagemagick. `for i in `ls *.png`; do convert -negate ${i%.*}.png results/${i%.*}.png; done` This will invert the image from black to white, so that we can use the code submitted by PalimPalim – Mattis Asp Oct 02 '17 at 08:26