[PYTHON] GUI-Programmierung mit kivy ~ Teil 5 Erstellen von Schaltflächen mit Bildern ~
Einführung
Letztes Mal habe ich verschiedene Tasten eingeführt. Es bezieht sich auch auf Schaltflächen. Zuvor habe ich versucht, ein Bild an eine Schaltfläche anzuhängen, aber es hat nicht funktioniert, also habe ich ein wenig recherchiert. Ich denke, es wird ein Memorandum sein. Übrigens möchte ich ein Beispiel für die Verwendung zeigen (obwohl der Inhalt des Titels nicht der Hauptinhalt ist ...)
Wie ich einen Fehler gemacht habe
Ich habe einfach versucht, `Image``` mit` add_widget für das `` `Button Widget zu verwenden. Ich denke, es wird so aussehen. Die Schaltfläche wird fest hinter dem Bild angezeigt, wodurch es unangenehm aussieht. (Wenn Sie viel schreiben, sieht es möglicherweise gut aus.) Wenn Sie die Position der Schaltfläche verschieben, folgt das Bild nicht, sodass ich nicht verstehe, warum. Deshalb habe ich die Implementierung vorher aufgegeben.
Was zu tun ist Es sieht so aus.
Machen Sie eine Bildschaltfläche wie diese!
Verwenden Sie zum Erstellen einer Bildschaltfläche ein Modul namens "kivy.uix.behaviors". Mit `` `behaviours.ButtonBehavior``` können Sie Beschriftungen und Bildern Schaltflächenfunktionen hinzufügen. Es scheint viele andere Dinge zu geben, die Sie tun können! https://kivy.org/doc/stable/api-kivy.uix.behaviors.html
Der Quellcode lautet wie folgt. Erstellen Sie eine neue Klasse, die `` behaviours.ButtonBehavior``` erbt und was Sie eine Schaltfläche sein möchten, hier `Image```. Und wenn Sie das Bild von Image ändern und das Bild beim Drücken der Taste und das Bild beim Sprechen angeben, funktioniert es gut.
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)
#Passendes Bild
self.source = 'data/val2017/000000000285.jpg'
def on_press(self):
#Bild beim Drücken
self.source = 'data/val2017/000000000776.jpg'
def on_release(self):
#Kehren Sie zum Originalbild zurück
self.source = 'data/val2017/000000000285.jpg'
class SampleApp(App):
def build(self):
return MyButton()
SampleApp().run()
Wenn Sie Umschalttasten verwenden möchten, erben Sie `` `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()
Mit der Bildschaltfläche erstellt
Während der Untersuchung, wie eine Bildschaltfläche erstellt wird, wurde ein Bildbetrachter erstellt, bevor ich es wusste. Das Bild sieht so aus.
Es ist so, als würden Sie alle Bilder in einem beliebigen Bildordner in der Bildlaufansicht anzeigen und das Bild der angeklickten Bildschaltfläche im obigen Bild anzeigen.
Quelle
Das Ergebnis ist wie folgt.
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
#Bildschaltflächenklasse
class MyButton(ToggleButtonBehavior, Image):
def __init__(self, **kwargs):
super(MyButton, self).__init__(**kwargs)
#Speichert den Bildnamen der Bildschaltfläche
self.source = kwargs["source"]
#Behandeln Sie das Bild als Textur, damit Sie es bearbeiten können
self.texture = self.button_texture(self.source)
#Das Bild ändert sich abhängig vom Status der Umschalttaste und dem Status
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)
#Ändern Sie das Bild, rechteckig, wenn Sie es drücken+Verdunkeln Sie die Farbe
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)
#auf den Kopf stellen
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
#Machen Sie das Bild quadratisch
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
#Verdunkeln Sie die Farbe des Bildes
def adjust(self, img, alpha=1.0, beta=0.0):
#Führen Sie eine Produktsummenoperation durch.
dst = alpha * img + beta
# [0, 255]Clip mit, um uint8 Typ zu machen.
return np.clip(dst, 0, 255).astype(np.uint8)
class Test(BoxLayout):
def __init__(self, **kwargs):
super(Test, self).__init__(**kwargs)
#Verzeichnis zum Lesen
image_dir = "data/val2017"
#Vertikale Anordnung
self.orientation = 'vertical'
#Verwalten von Bilddateinamen
self.image_name = ""
#Vorbereiten eines Widgets zum Anzeigen eines Bildes
self.image = Image(size_hint=(1, 0.5))
self.add_widget(self.image)
#Definition der Bildlaufansicht zum Platzieren von Bildschaltflächen
sc_view = ScrollView(size_hint=(1, None), size=(self.width, self.height*4))
#Weil nur ein Widget in der Bildlaufansicht platziert werden kann
box = GridLayout(cols=5, spacing=10, size_hint_y=None)
box.bind(minimum_height=box.setter('height'))
#Stapeldefinition von Bildschaltflächen, angeordnet im Rasterlayout
box = self.image_load(image_dir, box)
sc_view.add_widget(box)
self.add_widget(sc_view)
#Bildschaltfläche laden
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
#Wenn Sie die Bildtaste drücken, wird das Bild im Bild-Widget angezeigt
def set_image(self, btn):
if btn.state=="down":
self.image_name = btn.source
#Bildschirm aktualisieren
Clock.schedule_once(self.update)
#Bildschirmaktualisierung
def update(self, t):
self.image.source = self.image_name
class SampleApp(App):
def build(self):
return Test()
SampleApp().run()
Ein kleiner Kommentar
In der obigen Erklärung denke ich, dass es nicht klar war, ob die Taste gedrückt wurde, nur durch Umschalten des Bildes der Taste. Wenn Sie auf das Bild drücken, wird daher ein Rahmen angehängt und das Bild wird etwas dunkler, sodass Sie sehen können, dass Sie es gedrückt haben. Darüber hinaus haben wir einen Trimmvorgang in der Bildmitte hinzugefügt, um sie übersichtlich im Rasterlayout anzuordnen.
In der Bildschaltflächenklasse gibt es eine Variable `` `source```, die den Dateinamen des Bildes als Schaltfläche speichert. Mit dieser Funktion wird das Bild mit opencv aus dem Bildnamen verarbeitet. Um das verarbeitete Bild verwenden zu können, muss außerdem eine Textur verwendet werden, sodass die Textur als Rückgabewert angegeben wird.
- `` `Textur``` wurde in Teil 3 erklärt, daher werde ich es dieses Mal weglassen.
#Ändern Sie das Bild, rechteckig, wenn Sie es drücken+Verdunkeln Sie die Farbe
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)
#auf den Kopf stellen
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
Dies ist der Vorgang, wenn die Taste auf der Anwendungsseite gedrückt wird, aber wenn die Taste gedrückt wird, ändert sich das Bild nicht nur durch Ändern der `Quelle``` des` `Bilds oben auf dem Bildschirm. Sie müssen den Bildschirm aktualisieren, um das Bild zu ändern. Wenn Sie auf das Bild drücken, wird "Uhr" einmal verschoben, um den Bildschirm zu aktualisieren.
#Wenn Sie die Bildtaste drücken, wird das Bild im Bild-Widget angezeigt
def set_image(self, btn):
if btn.state=="down":
self.image_name = btn.source
#Bildschirm aktualisieren
Clock.schedule_once(self.update)
#Bildschirmaktualisierung
def update(self, t):
self.image.source = self.image_name
Verweise
- OpenCV-Bildhelligkeit und -kontrast ändern, Gammakorrektur usw.-Pynote Ich bezog mich auf die Quelle des Prozesses der Verdunkelung des Bildes.
・ COCO-Datensatz Dies ist der Link des diesmal verwendeten Bildes.
Recommended Posts