Imagens clicáveis em Kivy


Implementando uma imagem clicável em Kivy

Normalmente associamos aos botões a funcionalidade de executar uma atividade ao ser clicado. Mas podemos associar esta funcionalidade também às imagens. Podemos fazer que quando uma imagem for clicada, uma dada função seja chamada. Ou seja, podemos ter uma imagem clicável.

Este comportamento que combina características de diferentes widgets Kivy é conseguido através do módulo kivy kivy.uix.behaviors.Com este módulo é possível criar novos widgets que apresentam um comportamento combinado dos widgets básicos.

Os experimentos aqui realizados foram executados no Linux Mint 18.1, versão do Python 2.7, versão do Kivy 1.10.0 .

Os scripts e figuras aqui descritos podem ser obtidos em na página https://cadernodelaboratorio.com.br/scripts-softwares-e-arquivos-de-configuracao/ , sob o nome pack171013.tar.gz.

Combinando uma imagem e um botão

Com o uso da classes disponíveis em kivy.uix.behaviors, fica bem simples combinarmos diferentes comportamentos. Por exemplo, pPara combinarmos os comportamentos de uma imagem e um botão usamos a seguinte sintaxe:

No arquivo Python:

.Combinando comportamentos imagem/botão 
class ImageButton(ButtonBehavior, Image):  # criamos uma classe ImageButton que combina o comportamento esperado de um botão com o comportamento esperado de uma imagem  
    

E no arquivo Kv:

.Combinando comportamentos imagem/botão 
BoxLayout:
    orientation:'vertical'
    Label:
        text: "bla, bla ...."
     
    ImageButton:  #aqui definimos o widget que incorpora ambos comportamentos
        source: 'folhaGigante.jpg'  #figura que será apreentada...

Experimento 1; Imprimindo uma frase quando clicamos na figura

Vamos criar um script que imprima no terminal a frase “você clicou na figura” , no terminal, sempre que a imagem for clicada:

imageButton.py

.Primeiro experimento com imagens clicáveis . Arquivo Python

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

# experimento com imagens clicáveis
#experimento 1
# ao clicar sobre a imagem inicial, uma mensagem é impressa no terminal
# www.cadernodelaboratorio.com.br



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
from kivy.uix.behaviors import ButtonBehavior  
from kivy.uix.image import Image

class ImageButton(ButtonBehavior, Image):  
    def on_press(self):  
        print ('Você clicou na imagem!')
   

class MeuPrograma(App):
     pass
    

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



meuprograma.kv

.Primeiro experimento com imagens clicáveis. arquivo kv 

BoxLayout:
    orientation:'vertical'
    Label:
        text: "Maior folha de decotiledônia registrada na Amazônia Brasileira"
     
    ImageButton:  
        source: 'folhaGigante.jpg'

Execute este programa a partir do terminal com o comando python imageButton.py . A seguinte imagem deve estar na sua tela:

Imagem clicável 1


Clique com o botão esquerdo do mouse sobre a figura. A mensagem “Você clicou na imagem” irá ser impressa na tela do terminal. OU seja, você inseriu o comportamento de reagir a um click na imagem, e associou este click a uma função print que imprime a frase na tela.

Experimento 2. Alterando a imagem quando a mesma é clicada

Vamos agora alterar o comportamento imprimir para o comportamento modificar a imagem quando a mesma é clicada.

imageButton_1.py

.Segundo experimento com imagens clicáveis. arquivo py 

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

# experimento com imagens clicáveis
#experimento 2
# ao clicar sobre a imagem inicial, a imagem é modificada
# www.cadernodelaboratorio.com.br



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
from kivy.uix.behaviors import ButtonBehavior  
from kivy.uix.image import Image
from kivy.properties import StringProperty



class ImageButton(ButtonBehavior, Image):  

    def __init__(self, **kwargs):
        super(ImageButton, self).__init__(**kwargs)
 
 
   
class TesteImagem(BoxLayout):

    minhaImagem = StringProperty("folhaGigante.jpg")
      
    def __init__(self, **kwargs):
        super(TesteImagem, self).__init__(**kwargs)
        
    def mudaFigura(self):
        self.minhaImagem=  "deserto.jpeg"  
        
       

class MeuPrograma(App):
   def build(self):
     return TesteImagem() 
 
    
    

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

meuprograma.kv

.Segundo experimento com imagens clicáveis. arquivo kv 
<TesteImagem>:
	BoxLayout:
		orientation:'vertical'
		Label:
			text: "Hoje a Amazônia tem folhas deste tamanho..."
			
		ImageButton:  
			source: root.minhaImagem
			on_press: root.mudaFigura()
						
		Label:
			text: "Clique sobre a figura para ver como ficará ...."
			
		Label:
			text: "Se não nos unirmos e pararmos com a destruição atual!"
            color: [0,1,1,1]         

Observe que no arquivo kv temos o widget ImageButtom, que criamos no arquivo py. Este widget tem uma propriedade típica de uma imagem, o source: nome do arquivoimagem , e uma propriedade típica de botão , onpress: ação . O que a ação root.mudaFigura faz, é alterar a propriedade source, alterando a figura a ser apresentada.

Execute este programa a partir do terminal com o comando python imageButton.py . A seguinte imagem deve estar na sua tela:

Figura Inicial


Clique sobre a imagem e a mesma irá se alterar, conforme visto na figura a seguir:

Figura após o click

Esta é uma forma simples de alterarmos a imagem apresentada na tela em função de um clique sobre a mesma. As aplicações deste tipo de funcionalidade são incontáveis!

O que você acha de usar a estrutura deste programa e modificar, além da figura, também os textos? Mãos a obra e divirta-se!

Até nosso próximo encontro!

 

Deixe um comentário