kivy: change the color of a label

Question

kivy: change the color of a label

Navigation

#1 by (2 votes)

1

is the following code in python:

# config
from kivy.config import Config
Config.set('kivy', 'keyboard_mode', 'system')

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder

Builder.load_file('design.kv')

class MyWidget(BoxLayout):
    def __init__(self):
        super(MyWidget, self).__init__()

    def showquestion(self):
        with open("question.txt","r") as f:
            filetext = f.read()
            self.ids['label1'].text = filetext

    def showanswer(self):
        with open("answer.txt","r") as f:
            filetext = f.read()
            self.ids['label2'].text = filetext


class myApp(App):
    def build(self):
        return MyWidget()
    def on_pause(self): 
        return True
    def on_resume(self): 
        pass


if __name__ in ('__main__', '__android__'): 
    myApp().run()

And the following code in .kv:

<MyWidget>:
    BoxLayout:
        size: root.size

        Button:
            id: button1
            text: "Mostrar respuesta"
            on_release: root.showanswer()
            size_hint: 1, 0.1

        Button:
            id: button2
            text: "Pregunta Acertada"
            size_hint: 1, 0.1
        Button:
            id: button3
            text: "Pregunta Fallada"
            size_hint: 1, 0.1
        Button:
            id: button4
            text: "mostrar pregunta"
            on_release: root.showquestion()
            size_hint: 1, 0.1

#label1 muestra la pregunta
        Label:
            id: label1
            color: 1,0,1,1
            canvas.before:
                Color:
                    rgba:  0, 0, 0, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
#label2 muestra la respuesta        
        Label:
            id: label2
            background_color: 1,0,1,0

I would like to put the orange label1 and the green label2. I've searched Stackoverflow in English, and I found this . But I want to do it from the .kv file itself and not going through the .py file In the label1 what I have managed to change are the color of the letters. While in the label2 it seems to ignore the label "background_color". Thank you very much in advance

python color kivy

asked by Mr. Baldan 18.04.2017 в 06:27

source

1 answer

Print all the vector by C ++ screen C # - Hide or show panels within a SplitPanel

score 2 · Accepted Answer

There are two aspects to consider:

To change the text color of Label the attribute color is used as you do it in your label1 .
To change the background color background_color is not used since this attribute does not exist by default for the vast majority of widgets. Instead a canvas is used as you do in label1 .

Related to this there are two other important aspects:

A Canvas in Kivy is not a witget to draw on. It is a very common mistake to start in kivy because the name is ambiguous. In other frameworks a 'canvas' is that, a canvas on which to draw things, for example in Tkinter or in HTML5.

In Kivy a Canvas is more like an instruction container that tells us how to draw over another widget. It contains instructions for painting, it is not a surface to paint on. Let's say it's something like a box of pencils and not a sheet of paper, it contains the tools to paint.
Another common problem is the use of the attributes rgb and rgba . In kivy the rgb values are floats from 0 to 1 and not integers from 0 to 255 as we often use. Since the vast majority of mortals do not know the rgb value of all colors, we use tables or online tools that give us the rgb values of a color. To pass the color to appropriate values for kivy you simply divide each channel by 255. Remember that rgba uses in addition to the values for red, green and blue the alpha value that defines the transparency (1 is no transparency and 0 is total transparency , so you will not see any color but the background behind the widget).

For example, an orange tone with some transparency would be:
```
rgba(173, 120, 40, 0.8) 
```
In kivy it should be:
```
rgba(173/255, 120/255, 40/255, 0.8) 
```

Your Labels should be defined something like this:

#label1 muestra la pregunta
        Label:
            id: label1
            color: 1,0,1,1
            canvas.before:
                Color:
                    rgba: 191/255.0, 144/255.0, 63/255.0, 1
                Rectangle:
                    size: self.size
                    pos: self.pos

#label2 muestra la respuesta
        Label:
            id: label2
            color: 1,0,1,1
            canvas.before:
                Color:
                    rgba:  110/255.0, 191/255.0, 63/255.0, 1
                Rectangle:
                    pos:self.pos
                    size: self.size

Important Note: Note that I use 110/255.0 and not 110/255 , this is to allow compatibility with Python 2 and therefore with Android. In Python 3 the division operator always returns a float . In Python 2 the returned type depends on the input types (in this case two integers), if we do 110/255 it returns an integer, that is, it gives us the integer division of 110/255 which is 0. When using 255.0 we force to return a float (0.4313 ...). If we do not do this, in Python 2, we will always get a black background ( 0,0,0,1 ).

I think that for what you are trying it will be better that you change the main container, a BoxLayout does not seem the best. Look at the different options in the documentation and remember that they can be combined within each other without problems. The one that gives more freedom (and more work) is the FloatLayout, everything depends on the structure that you want your app to have at the end. If for now you are just experimenting with the logic and widget of your app, continue with the BoxLayout and worry about this at the end.