CODEWITHSUNDEEP
pythoncolorsiconspngkivy
Mattis Asp
Mattis Asp

Reputation: 1003

Best way to integrate a Kivy label and icon

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

Upvotes: 1

Views: 2788

Answers (1)

PalimPalim
PalimPalim

Reputation: 3058

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

Upvotes: 1

Related Questions