introduction

La dernière fois, j'ai introduit différents boutons. Il est également lié aux boutons. Auparavant, j'avais essayé de joindre une image à un bouton et cela ne fonctionnait pas, alors j'ai fait un peu de recherche. Je pense que ce sera un mémorandum. En passant, je voudrais donner un exemple de son utilisation (bien que le contenu du titre ne soit pas le principal ...)

Comment j'ai fait une erreur

J'essayais simplement d'utiliser Image avec add_widget pour le widget `` `Button```. Je pense que ça ressemblera à ça. Le bouton apparaît fermement derrière l'image, ce qui la rend gênante. (Peut-être que si vous écrivez beaucoup, cela peut sembler bon) De plus, si vous changez la position du bouton, l'image ne suivra pas, donc je ne comprends pas pourquoi. Par conséquent, j'ai abandonné la mise en œuvre avant.

Que faire Cela ressemble à ceci.

Créez un bouton d'image comme celui-ci!

Pour créer un bouton image, utilisez un module appelé kivy.uix.behaviors ''. En utilisant `` behavior.ButtonBehavior '', vous pouvez ajouter des fonctions de bouton aux étiquettes et aux images. Il semble y avoir beaucoup d'autres choses que vous pouvez faire! https://kivy.org/doc/stable/api-kivy.uix.behaviors.html

Le code source est le suivant. Créez une nouvelle classe qui hérite de `` behavior.ButtonBehavior``` et de ce que vous voulez être un bouton, ici `Image```. Et si vous changez l'image de Image et spécifiez l'image lorsque vous appuyez sur le bouton et l'image lorsque vous parlez, cela fonctionne bien.

from kivy.app import App
from kivy.uix.image import Image
from kivy.uix.behaviors import ButtonBehavior


class MyButton(ButtonBehavior, Image):
    def __init__(self, **kwargs):
        super(MyButton, self).__init__(**kwargs)
        #Image appropriée
        self.source = 'data/val2017/000000000285.jpg'

    def on_press(self):
        #Image lorsque vous appuyez sur
        self.source = 'data/val2017/000000000776.jpg'

    def on_release(self):
        #Revenir à l'image d'origine
        self.source = 'data/val2017/000000000285.jpg'


class SampleApp(App):
    def build(self):
        return MyButton()


SampleApp().run()

Si vous souhaitez utiliser des boutons bascule, héritez de `` ToggleButtonBehavior ''.


from kivy.app import App
from kivy.uix.image import Image
from kivy.uix.behaviors import ToggleButtonBehavior


class MyButton(ToggleButtonBehavior, Image):
    def __init__(self, **kwargs):
        super(MyButton, self).__init__(**kwargs)
        self.source = 'data/val2017/000000000285.jpg'

    def on_state(self, widget, value):
        if value == 'down':
            self.source = 'data/val2017/000000000776.jpg'
        else:
            self.source = 'data/val2017/000000000285.jpg'


class SampleApp(App):
    def build(self):
        return MyButton()


SampleApp().run()

Fabriqué à l'aide du bouton d'image

Tout en étudiant comment créer un bouton d'image, une visionneuse d'image a été créée avant que je ne le sache. L'image ressemble à ceci.

C'est comme afficher toutes les images dans n'importe quel dossier d'image dans la vue de défilement et afficher l'image du bouton d'image cliqué dans l'image ci-dessus.

La source

Le résultat est comme ci-dessous.


import os
import cv2
import numpy as np

from kivy.app import App
from kivy.uix.image import Image
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.scrollview import ScrollView
from kivy.uix.behaviors import ToggleButtonBehavior
from kivy.clock import Clock
from kivy.graphics.texture import Texture

#Classe de bouton d'image
class MyButton(ToggleButtonBehavior, Image):
    def __init__(self, **kwargs):
        super(MyButton, self).__init__(**kwargs)
        #Stocke le nom d'image du bouton d'image
        self.source = kwargs["source"]
        #Traitez l'image comme une texture afin de pouvoir la modifier
        self.texture = self.button_texture(self.source)

    #L'image change en fonction de l'état du bouton bascule et de l'état
    def on_state(self, widget, value):
        if value == 'down':
            self.texture = self.button_texture(self.source, off=True)
        else:
            self.texture = self.button_texture(self.source)

    #Changer l'image, rectangulaire lorsque vous appuyez sur+Assombrir la couleur
    def button_texture(self, data, off=False):
        im = cv2.imread(data)
        im = self.square_image(im)
        if off:
            im = self.adjust(im, alpha=0.6, beta=0.0)
            im = cv2.rectangle(im, (2, 2), (im.shape[1]-2, im.shape[0]-2), (255, 255, 0), 10)

        #retourner à l'envers
        buf = cv2.flip(im, 0)
        image_texture = Texture.create(size=(im.shape[1], im.shape[0]), colorfmt='bgr')
        image_texture.blit_buffer(buf.tostring(), colorfmt='bgr', bufferfmt='ubyte')
        return image_texture

    #Rendre l'image carrée
    def square_image(self, img):
        h, w = img.shape[:2]
        if h > w:
            x = int((h-w)/2)
            img = img[x:x + w, :, :]
        elif h < w:
            x = int((w - h) / 2)
            img = img[:, x:x + h, :]

        return img

    #Assombrir la couleur de l'image
    def adjust(self, img, alpha=1.0, beta=0.0):
        #Effectuez une opération de somme de produits.
        dst = alpha * img + beta
        # [0, 255]Coupez avec pour créer le type uint8.
        return np.clip(dst, 0, 255).astype(np.uint8)


class Test(BoxLayout):
    def __init__(self, **kwargs):
        super(Test, self).__init__(**kwargs)
        #Annuaire à lire
        image_dir = "data/val2017"

        #Disposition verticale
        self.orientation = 'vertical'

        #Gérer les noms de fichiers image
        self.image_name = ""

        #Préparer un widget pour afficher une image
        self.image = Image(size_hint=(1, 0.5))
        self.add_widget(self.image)

        #Définition de la vue de défilement pour placer les boutons d'image
        sc_view = ScrollView(size_hint=(1, None), size=(self.width, self.height*4))

        #Parce qu'un seul widget peut être placé dans la vue de défilement
        box = GridLayout(cols=5, spacing=10, size_hint_y=None)
        box.bind(minimum_height=box.setter('height'))

        #Définition par lots des boutons d'image, disposés en grille
        box = self.image_load(image_dir, box)

        sc_view.add_widget(box)
        self.add_widget(sc_view)

    #Bouton de chargement d'image
    def image_load(self, im_dir, grid):
        images = sorted(os.listdir(im_dir))

        for image in images:
            button = MyButton(size_hint_y=None,
                              height=300,
                              source=os.path.join(im_dir, image),
                              group="g1")
            button.bind(on_press=self.set_image)
            grid.add_widget(button)

        return grid

    #Afficher l'image dans le widget d'image lorsque le bouton est enfoncé
    def set_image(self, btn):
        if btn.state=="down":
            self.image_name = btn.source
            #Écran de mise à jour
            Clock.schedule_once(self.update)

    #Mise à jour de l'écran
    def update(self, t):
        self.image.source = self.image_name


class SampleApp(App):
    def build(self):
        return Test()


SampleApp().run()

Un petit commentaire

Dans l'explication ci-dessus, je pense qu'il n'était pas clair si le bouton avait été enfoncé, simplement en changeant l'image du bouton. Par conséquent, lorsque vous appuyez sur l'image, un cadre est attaché et l'image devient un peu plus sombre pour que vous puissiez voir que vous avez appuyé dessus. De plus, afin de les ranger proprement dans la disposition de la grille, nous avons ajouté un processus de rognage au centre de l'image.

Dans la classe de bouton d'image, il existe une variable `` source '' qui stocke le nom de fichier de l'image comme bouton, et cette fonction est utilisée pour traiter l'image avec opencv à partir du nom de l'image. De plus, pour utiliser l'image traitée, il est nécessaire d'utiliser la texture, donc la texture est spécifiée comme valeur de retour.

La `` texture '' a été expliquée dans la Partie 3, donc je l'omettrai cette fois.

    #Changer l'image, rectangulaire lorsque vous appuyez sur+Assombrir la couleur
    def button_texture(self, data, off=False):
        im = cv2.imread(data)
        im = self.square_image(im)
        if off:
            im = self.adjust(im, alpha=0.6, beta=0.0)
            im = cv2.rectangle(im, (2, 2), (im.shape[1]-2, im.shape[0]-2), (255, 255, 0), 10)

        #retourner à l'envers
        buf = cv2.flip(im, 0)
        image_texture = Texture.create(size=(im.shape[1], im.shape[0]), colorfmt='bgr')
        image_texture.blit_buffer(buf.tostring(), colorfmt='bgr', bufferfmt='ubyte')
        return image_texture

C'est le processus lorsque le bouton du côté de l'application est enfoncé, mais lorsque le bouton est enfoncé, l'image ne change pas simplement en changeant la `source``` de` `ʻImage``` en haut de l'écran. Vous devez actualiser l'écran pour changer l'image. Par conséquent, lorsque vous appuyez sur l'image, Horloge '' est déplacé une fois pour mettre à jour l'écran.


    #Lorsque vous appuyez sur le bouton d'image, l'image s'affiche dans le widget d'image
    def set_image(self, btn):
        if btn.state=="down":
            self.image_name = btn.source
            #Écran de mise à jour
            Clock.schedule_once(self.update)

    #Mise à jour de l'écran
    def update(self, t):
        self.image.source = self.image_name

Les références

OpenCV-Change la luminosité et le contraste de l'image, correction gamma, etc.-Pynote J'ai évoqué la source du processus d'assombrissement de l'image.

・ Ensemble de données COCO C'est le lien de l'image utilisée cette fois.

[PYTHON] Programmation GUI à l'aide de kivy ~ Partie 5 Création de boutons avec des images ~