Widget Label em kvlang 2


Interagindo com o widget Label em kvlang

Vimos no artigo anterior como interagir com o widget Label em Kivy através da linguagem Python. Agora vamos aprender como realizar as mesmas operações através da linguagem kvlang. A linguagem kvlang permite a criação de uma árvore representando as relações entre todos os widgets da interface, e associa cada widget ao código de processamento de uma maneira natural. A prototipagem fica muito mais rápida, assim como as alterações de manutenção ao longo d vida útil do software. É muito interessante que você compare a metodologia de programação utilizando a linguagem kv e o mesmo resultado obtido com a linguagem Python, comparando ambos os textos.

A melhor forma de compreender o efeito das diferentes configurações é testando na prática. Não deixe de executar todos os scripts e ver o efeito dos mesmos. Para não ter que copiar tudo obtenha os arquivos em https://cadernodelaboratorio.com.br/scripts-softwares-e-arquivos-de-configuracao/. , fazendo o download do arquivo pack170823.tar.gz. Utilizamos em nossos experimentos o LInux Mint 18.1, 64 bits, kivy 1.10.0 e o Python 2.7.

Algumas considerações iniciais sobre a kvlang

Quando desenvolvemos em kivy com a metodologia de uso da kvlang, temos no mínimo dois arquivos. Um deles possui a extensão .py, e é onde a funcionalidade do programa é explicitado. O outro arquivo possui a extensão .kv, é é onde a interface é definida.

Para associar estes dois arquivos de forma a operarem em conjunto, temos três maneiras:

  • 1- Através do nome do arquivo kv. Kivy procura por um arquivo kv cujo nome seja iqual ao nome da classe App em minúscula, sem o App no final, por ex:

Se a sua classe de aplicação é chamada de meuProgramaApp , o nome do arquivo para inserção automática deve ser meuprograma.kv . Se o arquivo kc tiver definido um widget raiz, este será associado ao atributo raiz da aplicação.

  • 2 – Através de uma chamada direta no arquivo kivy, utilizando a instrução Builder.load_file(‘caminho/para/arquivo/arquivo.kv’)
  • 3 – Carregando uma string com o conteúdo kv diretamente, utilizando a instrução Builder.loadstring(kvstring)

A linguagem kv, de forma similar à linguagem Python, utiliza da indentação para especificar a relação entre objetos. Cada indentação deve possuir 4 espaços. Só pode existir um widget raiz no arquivo kv. Ele irá ocupar a primeira posição no arquivo.

Vamos criar um programa que apresenta na tela a string “Alô mundo”, para começarmos a compreender o funcionamento conjunto dos arquivos py e kv:

.labelkv.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class MeuProgramaApp(App):
     pass


if __name__ == '__main__':
    MeuProgramaApp().run()

O arquivo kv associado deve ser chamado de meuprograma.kv

.meuprograma.kv
Label:
	text: "Alô mundo"

Execute o programa através da linha de comando, como “python labelkv.py” e uma tela irá se abrir, com a mensagem “Alô mundo” no centro da mesma. Exatamente o que ocorreu quando construímos o programa totalmente em Python.

Alterando o tamanho do font do texto.

Vamos relembrar como especificamos as as unidades no Kivy

  • pt
  • mm
  • cm
  • in
  • dp
  • sp

Configurando o tamanho do font em Python

Basta alterar a propriedade font-size no arquivo kv.
lbl.font_size= ’60sp’

.labelkv_1.py 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class MeuPrograma_1App(App):
     pass


if __name__ == '__main__':
    MeuPrograma_1App().run()

O arquivo meuprograma_1.kv fica da forma:

.meuprograma_1.py 
Label:
	text: "Alô mundo"
	font_size: '60sp'

Execute o programa e verifique como o font altera de tamanho.

Alterando o font para Negrito (bold)

Basta alterarmos a propriedade bold para True, no arquivo kv.

.labelkv_2.py 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class MeuPrograma_2App(App):
     pass


if __name__ == '__main__':
    MeuPrograma_2App().run()

O arquivo kv é o seguinte:

.meuprograma_2.kv 
Label:
	text: "Alô mundo"
	font_size: '60sp'
	bold: True

Execute o programa e veja como o label está modificado.

Alterando a cor de um Label

A cor de um label é especificada da forma:

Altere a propriedade color= [r, g, b, a], especificando as componentes vermelha (r) , verde (g), azul (b) e a transparência (a). Por exemplo, para obter um cor vermelho puro utilize [1,0,0,1].

O script fica da seguinte forma:

.labelkv_3.py 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class MeuPrograma_3App(App):
     pass


if __name__ == '__main__':
    MeuPrograma_3App().run()

Com o correspondente arquivo kv:

.meuprograma_3.kv 
Label:
	text: "Alô mundo"
	font_size: '60sp'
	bold: True
	color: [1,0,0,0.5]

Quais são as outras cores que podemos alterar?

disabledcolor : cor quando o label está desabilitado. No formato lbl.disabledcolor= [r, g, b, a]

disabledoutlinecolor: cor do outline do texto, quando o label está desabilitado, no formato [r,g,b]. Outline é uma linha que envolver cada caractere contido no label.

: cor do outline do texto quando o label está habilitado.

Quais são os nomes de fonts default do kivy

DejaVuSans.ttf
Roboto-Bold.ttf
Roboto-BoldItalic.ttf
Roboto-Italic.ttf
Roboto-Regular.ttf
RobotoMono-Regular.ttf

font_name: ‘Roboto-BoldItalic’

Para você visualizar estes fonts, utilize o script a seguir:

.labelkv_4.py 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class MeuPrograma_4App(App):
     pass


if __name__ == '__main__':
    MeuPrograma_4App().run()

E o arquivo kv correspondente:

.meuprograma_4.kv
BoxLayout:
	orientation: 'vertical'
	
	Label:
		text: 'DejaVuSans'
		font_size: '60sp'
		bold: True
		color: [1,0,0,0.5]
		font_name: 'DejaVuSans'
	
	Label:
		text: 'Roboto-Bold'
		font_size: '60sp'
		bold: True
		color: [1,0,0,0.5]
		font_name: 'Roboto-Bold'


	Label:
		text: 'Roboto-BoldItalic'
		font_size: '60sp'
		bold: True
		color: [1,0,0,0.5]
		font_name: 'Roboto-BoldItalic'

	Label:
		text: 'Roboto-Italic'
		font_size: '60sp'
		bold: True
		color: [1,0,0,0.5]
		font_name: 'Roboto-Italic'
		
	Label:
		text: 'Roboto-Regular'
		font_size: '60sp'
		bold: True
		color: [1,0,0,0.5]
		font_name: 'Roboto-Regular'		
		
	Label:
		text: 'RobotoMono-Regular'
		font_size: '60sp'
		bold: True
		color: [1,0,0,0.5]
		font_name: 'RobotoMono-Regular'	

A sua tela deve ficar aproximadamente igual a:

Fonts no kivy

Como sublinhar o texto do Label

Faça a propriedade underline: ‘True’

Como tachar o texto do Label

Faça a propriedade strikethrough:  ‘True’

Compreendendo o alinhamento do texto em Labels

As propriedades de alinhamento vertical e horizontal de um label ( halign e valign) podem ser difíceis de compreender sob uma avaliação preliminar. O seguinte raciocínio pode aclarar as coisas:

  • 1- A imagem correspondente ao texto (texture) é do tamanho exato para conter os caracteres do mesmo, é é posicionado sempre no centro do label. A propriedade valign não tem nenhum efeito e a propriedade halign, somente se o texto tiver mais de uma linha.
  • 2- Para que o alinhamento ocorra, estabeleça primeiro a propriedade text_size, que especifica o tamanho de um retângulo dentro do qual o texto será renderizado. Dentro deste retângulo poderemos alinhar a posição horizontal ou vertical do texto.
  • 3- Para criar este retângulo utilize a propriedade text_size: (x,y)

Caso você não queira limitar uma dimensão x ou y, especifique None, por exemplo (300,None) não terá nenhuma limitação na vertical.

  • 4- O alinhamento horizontal é especificado através da propriedade halign: ‘left’ .Os alinhamentos possíveis são : left (esquerda), center (centro) , right( direita) e justify (justificado).
  • 5- O alinhamento vertical é especificado através da propriedade valign = ‘bottom’. Os alinhamentos possíveis são ‘bottom’ (inferior), ‘middle’ (ou ‘center’) e ‘top’ (topo).

Um script para compreender a sistemática do alinhamento

Os códigos a seguir exercitam o que acabamos de dizer:

.labelkv_5.py 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class MeuPrograma_5App(App):
     pass


if __name__ == '__main__':
    MeuPrograma_5App().run()

E o arquivo kv correspondente:

.meuprograma_5.kv 
BoxLayout:
	orientation: 'vertical'
	

	Label:
	    text: 'alinhamento horizontal à esquerda'
            text_size:  (800,100)
            halign:  'left'
            font_size: '30sp'
            color:  [1,0,0,1]
            font_name: 'DejaVuSans'
            underline: 'True'
        
           
        Label:
	    text: 'alinhamento horizontal à direita'
            text_size: (800,100)
            halign: 'right'
            font_size: '30sp'
            color:  [1,0,0,1]
            font_name: 'DejaVuSans'
            underline: 'True'
        
        Label:
	    text:'alinhamento horizontal no centro'
            text_size: (800,100)
            halign: 'center'
            font_size: '30sp'
            color: [1,0,0,1]
            font_name: 'DejaVuSans'
            underline: 'True'
        

A imagem a seguir mostra como fica a tela com a execução deste script

Alinhamentos horizontais no kivy

Como envolver cada caractere do texto por uma linha de cor diferente

As propriedades que devemos configurar para criar uma linha que envolva cada caractere são:

outline_width: 1 Especifica a espessura da linha. Aqui especificamos 1 pixel
Especifica a cor da linha, Aqui especificamos verde puro ([r,g.b])

Um código que exemplifica o uso do outline pode ser visto a seguir:

.labelkv_6.py 

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class MeuPrograma_6App(App):
     pass


if __name__ == '__main__':
    MeuPrograma_6App().run()

Com o kv associado:

.meuprograma_6.kv 
BoxLayout:
	orientation: 'vertical'
	

	Label:
		text: 'alinhamento horizontal à esquerda'
        text_size:  (800,100)
        halign:  'left'
        font_size: '30sp'
        color:  [1,0,0,1]
        font_name: 'DejaVuSans'
        underline: 'True'
        outline_width: 1
        outline_color: [0,1,0]
        
           
    Label:
		text: 'alinhamento horizontal à direita'
        text_size: (800,100)
        halign: 'right'
        font_size: '30sp'
        color:  [1,0,0,1]
        font_name: 'DejaVuSans'
        underline: 'True'
        
    Label:
		text:'alinhamento horizontal no centro'
        text_size: (800,100)
        halign: 'center'
        font_size: '30sp'
        color: [1,0,0,1]
        font_name: 'DejaVuSans'
        underline: 'True'
        

A figura a seguir mostra como é renderizado o texto com outline:

Exemplo de outline

Para profissionais de interfaces, um ajuste fino no fonte

As propriedades a seguir permitem ajuste fino do font. É mais fácil de experimentar e visualizar a ação que realizam sobre a aparência do font do que explicar estas alterações. No script a seguir introduzimos as três propriedades de forma que você pode experimentar facilmente todas as suas variações.

font_blended: True Pode assumir True ou False

font_hinting: ‘mono’ Pode assumir ‘normal’, ‘light’, ‘mono’ ou None.

font_kerning: True Pode assumir True ou False

.labelkv_7.py 
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout



class MeuPrograma_7App(App):
     pass


if __name__ == '__main__':
    MeuPrograma_7App().run()

.meuprograma_7.kv 
BoxLayout:
	orientation: 'vertical'
	

	Label:
		text: 'alinhamento horizontal à esquerda'
        text_size:  (800,100)
        halign:  'left'
        font_size: '30sp'
        color:  [1,0,0,1]
        font_name: 'DejaVuSans'
        underline: 'True'
        outline_width: 1
        outline_color: [0,1,0]
        font_blended: True
        font_hinting:  'mono'
        font_kerning:  True
        
           
    Label:
		text: 'alinhamento horizontal à direita'
        text_size: (800,100)
        halign: 'right'
        font_size: '30sp'
        color:  [1,0,0,1]
        font_name: 'DejaVuSans'
        underline: 'True'
        
    Label:
		text:'alinhamento horizontal no centro'
        text_size: (800,100)
        halign: 'center'
        font_size: '30sp'
        color: [1,0,0,1]
        font_name: 'DejaVuSans'
        underline: 'True'
        

A imagem a seguir mostra como fica o font configurado com estas propriedades:

Exemplo de blending, hinting e kerning

Como associar o Label a um evento?

Iremos marcar o texto (ou parte dele) com uma referencia à uma função que será chamada quando o usuário clicar sobre a palavra marcada. Tudo isto sem nenhuma linha de código de sua parte. Muito legal, não é?

  • 1 – Informe que o texto terá marcações, através da propriedade markup: markup: True
  • 2 – Marque o texto com o tag. text= “Clique [ref= clique1] aqui [/ref] para testar”
  • 3- Informe a ação a ser executada: onrefpress: print ( bla, bla, bla…)
.labelkv8.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout


class MeuPrograma_8App(App):
     pass


if __name__ == '__main__':
    MeuPrograma_8App().run()

E o arquivo kv:

.meuprograma_8.kv
BoxLayout:
	orientation: 'vertical'
	

	Label:
		text: 'Clique [b][ref=aqui]aqui[/ref][/b] para testar!'
        font_size: '40sp'
        color:  [1,0,0,1]
		markup: True
        on_ref_press:  print ("Usuario clicou sobre o link ")  

 

Conclusão

Aqui terminamos o nosso estudo comparativo do widget Label em Kivy implementado através da linguagem kvlang e da linguagem Python, Qual método é o melhor? Bem, do ponto de vista teórico a separação entre interface e funcionalidade é sempre a melhor solução. Assim o uso de arquivo kv e arquivo py é mais adequado. Na prática, veja aquela solução que você se sente melhor e na qual você é mais eficaz e escolha esta. E ainda melhor, domine ambas as formas de implementação. Assim poderá escolher a que melhor se aplica para uma dada situação.

Um lembrete  aos  nossos leitores que se utilizam do tradutor automático  para lerem em seus idiomas:

We realize that automatic translated services nowdays are terrible. Non portuguese speakers can have a hard time to understand parts of the translated text. If this is your case, you can ask us in english about anything in the blog. We will answer also in english.

Nos damos cuenta de que los textos traducidos automáticamente tienen sus limitaciones. Los que no hablan portugues pueden tener dificultades para entender parte del texto traducido. Si este es su caso, no dude en preguntarnos en español sobre cualquier informacion del blog. Responderemos también en español (or portuñol, estoy seguro que podremos llegar a entendernos).:-) ).

Até a próxima!


Deixe um comentário

2 pensamentos em “Widget Label em kvlang

  • DayllonXavier

    Tavares, boa noite.

    Eu gostaria de saber se tem como definir uma resolução para a tela que o kivy exibe. Se tem como eu definir um tamanho (width e height) e eu coloco todos os meus widgets dentro dessa resolução, Não sei se deu para entender. Ai quando eu executar essa aplicação ele já vem com o tamanho que eu pré-defini. Como se eu quisesse fazer uma aplicação para celular e quando eu rodar esta aplicação no PC ele aparece conforme uma resolução de tela do celular.

    PS: Tavares, dando uma idéia de possível post, você poderia falar como executar áudios pelo kivy 🙂

    • tavares Autor do post

      Dayllon, creio que o que voce pretende fazer, se entendi bem, pode ser executado com o uso das unidades de dimensões sp e dp, e da visualização utilizando o parâmetro “screen” ao executar a chamada do python. De uma olhada no post de hoje (27/09) onde discorremos sobre isto e veja se se aplica ao que você precisa.

      Quanto a sugestão da execução de audio, obrigado e sugestão aceita. Para a próxima sexta (29/09).

      abs
      Roberto