Résumé

Kivy (https://kivy.org/#home) crée une bibliothèque GUI pour Python, mais elle n'est pas très connue au Japon. La raison la plus courante est qu'il est bon de l'installer, mais il n'y a pas beaucoup d'informations en japonais, et j'entends souvent des gens dire qu'ils ne savent pas comment l'utiliser. De plus, lors de l'écriture d'une mise en page dans Kivy, vous pouvez créer une mise en page en utilisant le propre langage de Kivy similaire au CSS appelé Kv Language séparément du code saisi par Python, mais il faut du temps pour s'y habituer car il y a peu d'informations. .. Ici, nous allons introduire un programme simple qui utilise le langage Kv et présenter l'utilisation de base du langage Kv.

À propos du programme à créer cette fois

Le programme à créer cette fois est le suivant.

Le bord gauche de l'image est l'état immédiatement après le démarrage, le sous-jacent "matin", "midi", respectivement, en cliquant sur le bouton de "nuit", "bonjour", "Bonjour", le caractère de "Bonsoir" sera affiché. Le contenu est une introduction à la mise en page en langage Kv et à la manière d'exécuter la fonction lorsque vous cliquez sur le bouton.

Matériel de référence

Bien qu'il s'agisse d'un document, le contenu va de «Kivy Basics» à «Kv Language» du Guide de programmation du manuel officiel Kivy (https://kivy.org/docs/). Cependant, comme il est rédigé en anglais et difficile à comprendre, je citerai le non officiel * traduit en japonais (https://pyky.github.io/kivy-doc-ja/) traduit par des bénévoles.

Nous avons contacté le site Web d'origine à l'avance pour confirmer qu'il n'y a pas de problème avec le travail de traduction lui-même.

Postscript: J'ai traduit "Kv Language" de la référence API, il est donc recommandé de le lire également.

Kivy Language (Référence API)

J'ai expliqué le code lorsque je suis monté sur scène à Pycon JP 2017. Ceci est une explication générale de Kivy, ce sera donc une bonne référence pour ce que vous pouvez faire avec Kivy.

Explication du code source de "Recommandation de développement d'application par kivy" de Pycon JP 2017

Ajouté en décembre 2017: Je vais vous présenter un très bon article d'introduction rédigé en japonais. C'est une bonne idée de le lire une fois lorsque vous démarrez Kivy.

Introduction à Kivy par la technologie proche de vous

Ajouté en octobre 2018: Il y avait une personne qui a créé une application avec Kivy, je vais donc la présenter

kivy Senki

Présentation du processus et du code source de création d'une application de bureau pour la sélection de fichiers sur six mois. Puisqu'il est également implémenté en utilisant RecycleView, je pense que ce sera une référence pour le type d'application qui peut être fait avec Kivy, donc je vous recommande de le lire.

À propos du programme

Il existe différentes manières d'écrire du code à l'aide de Kivy. C'est juste un exemple. De plus, le code source utilisé lors de la rédaction de cet article est répertorié sur Github. Cependant, les matériaux tels que les polices et les images ne sont pas placés, veuillez donc les préparer et les placer vous-même si nécessaire.

Github

Environnement de vérification

L'environnement de vérification est le suivant.

OS: Windows10 64bit
Kivy:1.9.1
Python3.4※

Bien que le code puisse être exécuté dans la série Python2, une erreur se produira au niveau de la partie affichée en japonais. Dans ce cas, essayez de changer le code. (Exemple: 'Japonais' → u'Japonais ')

À propos de l'éditeur

Il existe une extension pour le langage Kv dans le code Visual Studio.

https://marketplace.visualstudio.com/items?itemName=BattleBas.kivy-vscode

Liste d'utilisation de Python Kivy

Je publie ce qui suit comme suite. Ce sera comment faire une application réelle.

Explication réelle

Ci-dessous, je publierai le code et les résultats.

1. 1. Afficher un écran vide

Résultat d'exécution

code

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App

App().run()

Fichier kv

Non utilisé cette fois

Commentaire

Veuillez vous référer au [Guide de programmation (traduit) »Bases de Kivy (traduit)" (https://pyky.github.io/kivy-doc-ja/guide/basic.html) pour le mécanisme de base de Kivy. ..

Ici, la classe App est la classe de base pour créer des applications Kivy. L'utilisation de base est de ne pas oublier d'hériter de la classe App, de créer une sous-classe et d'ajouter ses étiquettes, boutons, etc. lors de la création de votre propre application.

2. Affichage des applications et des étiquettes

Résultat d'exécution

code

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.label import Label

class TestApp(App):
    def build(self):
        return Label(text='Hello World')

TestApp().run()

Fichier kv

Non utilisé cette fois

Commentaire

J'ai créé la classe TestApp en héritant de la classe App. De plus, la fonction de construction est exécutée pour renvoyer Label () au moment de la création. Une fois exécuté, une étiquette avec les caractères "Hello world" affichés au centre de l'écran sera créée sur tout l'écran. Label () est l'un des widgets de Kivy (éléments constitutifs de l'interface utilisateur graphique et de leur collection). Kivy crée une interface graphique en combinant des widgets tels que des pièces et des mises en page.

De plus, "Test" est affiché dans le titre en haut à droite de la fenêtre. Dans kivy, le titre est le nom de la sous-classe qui hérite de la classe App avant l'application. (Exemple: TestApp → Test s'affiche)

Pour plus d'informations, reportez-vous à la référence API.

3. 3. Affichage de l'application et de l'étiquette (en utilisant la langue Kv)

Résultat d'exécution

code

`main.py`


#-*- coding: utf-8 -*-
from kivy.app import App

class TestApp(App):
    pass

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

Fichier kv

`test.kv`


Label:  # add comment
    text: "Hello World"

Commentaire

La différence avec 2 est que le côté main.py a uniquement créé la sous-classe TestApp et que rien n'est fait en interne. Au lieu de cela, je crée un nouveau fichier Kv (langage Kivy) appelé test.kv. Bien qu'il s'agisse d'un fichier Kv, dans kivy, le titre correspond au même ** nom de fichier avec un début inférieur ** parmi les noms des sous-classes qui héritent de la classe App comme avant l'App. Ici, le nom de la sous-classe est TestApp, donc test.kv correspond.

Bien qu'il s'agisse d'un langage Kivy, il présente les caractéristiques suivantes.

Très similaire au CSS html.
Comme pour la méthode d'écriture, écrivez : pour la valeur à ajouter et la classe. Bien que ce soit ":", ** N'ouvrez pas d'espace entre celui-ci et le précédent **.
Comme Python, il peut être indenté avec des espaces ou des tabulations. Notez que le retrait est ** déterminé par le nombre d'espaces ou de tabulations trouvés pour la première fois depuis le début du fichier **. Par exemple, si vous insérez un caractère d'espace demi-largeur au début du fichier kv et que vous démarrez une nouvelle ligne, le retrait sera défini sur un caractère d'espace demi-largeur par la suite, donc l'ajout d'un retrait avec quatre caractères d'espacement demi-largeur entraînera une erreur.
Vous pouvez ajouter un commentaire avec "#". Comme python, '' '' '' n'est pas possible

Cette fois, dans test.kv

Label:  # add comment
    text: "Hello World"

En déclarant, cela revient à exécuter (Label (text = 'Hello World')) avec "Hello world" spécifié dans l'argument texte de la fonction Label () dans le fichier Python.

Le langage Kv sera également expliqué ici, mais voir [Guide de programmation (traduit) »Langage Kv (traduit)" (https://pyky.github.io/kivy-doc-ja/guide/lang.html). Nous vous recommandons de le lire.

référence

Kivy Language(API Reference)

[Note] À propos de l'utilisation du langage Kv

Il est possible d'écrire du code et de créer des mises en page en Python comme n'importe quelle autre bibliothèque d'interface graphique sans utiliser le langage Kv. Certaines personnes au Japon sont écrites uniquement en code Python.

Référence Introduction à la création d'applications d'interface graphique multiplateforme à l'aide de la bibliothèque d'interface graphique Python Kivy

Cependant, vous pouvez utiliser le langage Kv pour ** séparer les descriptions de mise en page et de fonctionnalités **. Cela facilite la compréhension du code si vous souhaitez ajouter des fonctionnalités ou modifier la disposition. Par exemple, si vous créez une application et la distribuez aux utilisateurs et que vous souhaitez modifier la mise en page sans modifier la fonction, vous pouvez directement modifier le fichier kv et modifier la mise en page à votre guise.

[Note] À propos du fichier à écrire en langage Kv

Bien qu'il s'agisse du langage Kv, vous pouvez choisir parmi trois modèles en fonction du fichier dans lequel vous écrivez.

Écrivez directement dans un fichier Python
Créez et décrivez un fichier kv (extension .kv) correspondant au nom de la sous-classe de l'application
Spécifiez le fichier Kv correspondant dans le fichier Python et décrivez le fichier Kv.

C'est une méthode pour écrire directement dans le fichier Python de 1, mais pour importer et décrire la classe Builder. La façon d'écrire est la suivante.

from kivy.lang import Builder
Builder.load_string("""
<Nom de l'application>:
Contenu
""")

La méthode 2 a déjà été couverte, je vais donc l'omettre. C'est une méthode pour spécifier le fichier Kv correspondant dans le fichier Python de 3, mais la méthode d'écriture est la suivante.

from kivy.lang import Builder
Builder.load_file('file.kv')

Dans ce cas, file.kv est le fichier Kv qui correspond à ce fichier Python. Habituellement, il est souvent décrit en utilisant une ou deux méthodes. Je pense que c'est au cas par cas ce qui est mieux, 1 ou 2.

référence

Charger le fichier Kv

~~ Aussi, bien que non couvert cette fois, il semble qu'il soit possible de diviser le fichier Kv en plusieurs fichiers en créant un fichier kv avec le même nom que le widget. (Non vérifié) ~~ (C'était une erreur)

Il semble qu'il puisse être divisé en utilisant "#: include [force] " dans le fichier Kv. Voir ci-dessous pour plus de détails.

Comment utiliser Python Kivy (référence) -J'ai traduit le langage Kivy de l'API reference-include

[Note] À propos de l'outil de prévisualisation du langage Kv

2017/07 / 14t ajouté

Je pense qu'il faut beaucoup de temps pour écrire un fichier Kv, exécuter le résultat et le vérifier. A partir de la 1.10, un outil appelé "kviewer" a été ajouté qui reflète les changements dans le fichier kv en temps réel. Veuillez vous référer aux articles suivants pour savoir comment installer et comment l'utiliser en détail.

référence

Outil pour écrire des fichiers Kv lors de la vérification des résultats de kviewer

Quatre. Affichage de plusieurs étiquettes

Résultat d'exécution

code

(Il n'y a pas de changement par rapport au contenu de 3.)

Fichier kv

La langue Kv est la suivante.

`test.kv`


BoxLayout:
    Label:
        text: "Good Morning"
    Label:
        text: "Hello"
    Label:
        text: "Good Evening"

Commentaire

Cette fois, j'ai créé trois étiquettes et les ai disposées horizontalement à intervalles égaux. J'utilise ** "Box Layout" ** pour définir la mise en page. kivy a plusieurs dispositions pour organiser les widgets. "Box Layout" est un ** layout pour organiser plusieurs widgets verticalement ou horizontalement **.

Réimprimé du manuel officiel

Kivy crée des mises en page en utilisant une ou plusieurs de ces mises en page. Bien qu'il existe des types de mise en page autres que BoxLayout, il existe "FloatLayout", "RelativeLayout", "GridLayout", "PageLayout", "ScatterLayout" et "StackLayout", mais il est recommandé de créer d'abord un modèle avec "BoxLayout". ..

référence

5. Affichage de plusieurs étiquettes (verticalement)

Résultat d'exécution

code

(Il n'y a pas de changement par rapport au contenu de 3.)

Fichier kv

La langue Kv est la suivante.

`test.kv`


BoxLayout:
    orientation: 'vertical'     # 'horizontal'Puis une rangée
    
    Label:
        text: "Good Morning"
    Label:
        text: "Hello"
    Label:
        text: "Good Evening"

Commentaire

Dans le cas de 4, les étiquettes étaient alignées horizontalement à intervalles égaux, mais cette fois, trois sont alignées verticalement. La différence avec le précédent est que le fichier Kv a une description de «orientation:« verticale »». ʻOrientation` est l'une des options de BoxLayout et définit l'ordre des widgets. Il existe deux types de valeurs. ** "horizontal" définit une ligne horizontale et "vertical" définit une ligne verticale **. Dans le cas de 4, même s'il n'y a pas de description de l'orientation, ils sont alignés sur une ligne horizontale car le réglage par défaut de l'orientation est "horizontal".

[Note] À propos du système de coordonnées de Kivy

Comme vous pouvez le voir sur l'arrangement cette fois, les coordonnées d'origine de Kivy sont ** en bas à gauche **. C'est l'un des points difficiles d'accès de Kivy. Il n'y a pas de problème une fois que vous vous y êtes habitué, mais rappelez-vous que contrairement à la plupart des logiciels d'interface graphique, Kivy a son origine en bas à gauche.

6. Réglage de la taille

Résultat d'exécution

code

(Il n'y a pas de changement par rapport au contenu de 3.)

Fichier kv

La langue Kv est la suivante.

`test.kv`


BoxLayout:
    orientation: 'vertical'     # 'horizontal'Puis une rangée
    
    Label:
        text: "Good Morning"
        size_hint_y: 0.5
    Label:
        text: "Hello"
        size_hint_y: 1
    Label:
        text: "Good Evening"
        size_hint_y: 2

Le résultat de l'exécution est le suivant.

Commentaire

size_hint_y: <valeur> est nouvellement ajouté au paramètre. En conséquence, la position de Label a changé. L'ajout d'une valeur à ** size_hint_x ** modifie la taille dans la direction x, et l'ajout d'une valeur à ** size_hint_y ** change la taille dans la direction y. Par défaut, les deux sont définis sur 1. La taille est le rapport de la taille de l'écran entier. A titre d'exemple, dans ce cas, il s'agit de la taille du libellé "Good Morning", Rapport direction Y = (valeur Good Morning) / (Toutes les valeurs size_hint) = 0,5 / (0,5 + 1 + 2) = 14% Sera 14% de la taille de l'écran entier.

En plus de size_hint, il existe également un paramètre appelé pos_hint qui définit les coordonnées à partir du rapport d'écran. À propos, Kivy vous permet de spécifier des coordonnées par coordonnées au lieu de ratios, mais ce n'est pas recommandé. La raison en est que la taille de l'écran peut être modifiée librement, donc si vous spécifiez un widget par coordonnées, la position est fixe et elle ne sera pas affichée proprement.

Il existe différentes manières de spécifier la position dans Kivy, mais fondamentalement, il n'y a pas de problème si vous la définissez en utilisant ** size_hint et pos_hint **. Je ne couvrirai pas pos_hint cette fois, donc si vous êtes intéressé, essayez d'écrire le code.

Bien qu'il s'agisse d'une valeur valide de hint, 0,1 à 1 est une plage valide lorsque vous consultez le manuel, mais comme vous pouvez le voir en écrivant le code, même si vous entrez une valeur de * 10 ou 100, cela fonctionne efficacement. Il semble que le manuel ou l'implémentation interne de Kivy soit manquant.

7. 7. Réglage de la taille 2

Résultat d'exécution

code

(Il n'y a pas de changement par rapport au contenu de 3.)

Fichier kv

La langue Kv est la suivante.

`test.kv`


BoxLayout:
    orientation: 'vertical'     # 'horizontal'Puis une rangée
    
    Label:
        text: "Good Morning"
        size_hint_y: 0.5
    Label:
        text: "Hello"
        size_hint_y: 1
    Label:
        text: "Good Evening"
        size_hint_y: 0.5

Commentaire

J'ai changé la valeur du cas de 6.

8. Changer la couleur du texte et la couleur de l'étiquette

Résultat d'exécution

code

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App


class TestApp(App):

    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'greeting'    #Renommer la fenêtre

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

Fichier kv

`test.kv`


BoxLayout:

    Label:        
        text: "Good Morning"
        color: 1,0,1,1
        size_hint_x: 0.5
    Label:
        text: "Hello"
        color: 0,1,0,1 # rgba
        size_hint_x: 1
        
        canvas.before:
            Color:
                rgba: 0, 1, 1, 1
            Rectangle:
                pos: self.pos
                size: self.size
    Label:
        text: "Good Evening"
        color: 0,0,1,1 # rgba
        size_hint_x: 0.5

Commentaire

Du côté Python, la commande suivante est insérée lors de l'initialisation de la classe TestApp.

self.title = 'greeting'    #Renommer la fenêtre

En faisant cela, vous pouvez modifier le nom du titre affiché dans le coin supérieur gauche de la fenêtre au démarrage.

référence

Changer le titre

De plus, pour les fichiers Kv, un nouveau paramètre "couleur" a été ajouté à Label. "Couleur" est un paramètre de la couleur des lettres. Les valeurs à prendre sont la structure de liste de [r (rouge), g (jaune), b (bleu), a (transparence)]. La plage de valeurs valides va de 0 à 1. Dans Kivy, il existe plusieurs autres façons de spécifier la couleur, comme le mode HSV. Il suffit de se rappeler que ** utilisez la couleur pour afficher les couleurs **. Je change également la couleur d'arrière-plan de Label, qui est réalisé par le code suivant

        canvas.before:              #①
            Color:                        #②
                rgba: 0, 1, 1, 1
            Rectangle:                #③
                pos: self.pos     
                size: self.size

① Couleur avec la commande canvas. avant n'est pas expliqué en détail ici, pour le canevas, voir [Guide de programmation (traduit) »Graphiques (traduit)" (https://pyky.github.io/kivy-doc-ja/guide/graphics.html) Lisez s'il vous plaît. Pour ②, coloriez avec (R, G, B, A) = (0,1,1,1). Notez que l'ouverture C est en majuscule, ce qui est différent de Label. ③ Rectangle est une commande pour afficher un rectangle (carré). Le paramètre pos spécifie les coordonnées à afficher et la taille spécifie la largeur et la hauteur de la plage de dessin. J'utilise self pour les valeurs de pos et size ici, mais ** self est le mot réservé pour Kv et je l'utilise pour obtenir ce widget **. Cette fois, c'est dans l'étiquette qui affiche Hello, donc self.pos pointe vers les coordonnées xy de l'étiquette et self.size pointe vers les valeurs de largeur et de hauteur de cette étiquette. Cela vous permet de dessiner un carré de couleur (0.1.1.1.1) pour les coordonnées, la largeur et la hauteur de l'étiquette affichant Hello. En plus des carrés, vous pouvez dessiner des triangles, des cercles et des lignes.

référence

Description du canevas (référence API)

[Note] À propos des mots réservés Kv

Kivy Language a des mots réservés qui sont prédéterminés pour être utilisés sur le système. Les éléments suivants sont typiques.

auto ・・・ Obtenez le widget
root ・・・ Obtenez rootWidget
application ・・・ Obtenir l'application

Extrait de Mots réservés du fichier Kv

référence

9. Ajouter un bouton

Résultat d'exécution

code

~~ (Il n'y a pas de changement par rapport au contenu de 8.) ~~ 2018/02/03 Ajouté: Il y avait une indication sur le net. 8. S'il est laissé tel quel, une erreur se produira.

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty 

class TextWidget(Widget):
    pass

class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'greeting'
        
    def build(self):
        return TextWidget()

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

Fichier kv

La langue Kv est la suivante.

`test.kv`


TextWidget:

<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size
        
        #étiquette
        Label:
            id: label1
            font_size: 68
            text: "Hello World"
        
        Button:
            id: button1
            text: "OK"
            font_size: 48

Commentaire

Un nouveau bouton a été ajouté. Button est une sous-classe de Label, vous pouvez donc utiliser les paramètres utilisés dans Label. Même si je lance ce programme et clique sur le bouton OK, rien ne se passe, seule la couleur du bouton change lorsque je clique dessus. Ce que j'ai pu faire ici était juste une mise en page utilisant Label et Button, et je n'ai pas enregistré l'opération lorsqu'une action (événement) était déclenchée pour le bouton. L'enregistrement de l'opération est expliqué dans l'élément suivant. De plus, font_size est la taille des caractères affichés. Par défaut, il est de 15, mais comme la taille d'affichage était petite, je l'ai augmentée.

De plus, un nouveau paramètre appelé id est ajouté pour chaque widget, mais cette fois je n'y toucherai pas. L'utilisation est expliquée dans l'élément de référence.

2018/02/03 Ajout: Cette fois, nous avons ajouté un widget personnalisé, TextWidget, et ajouté un widget existant tel que Button. L'ajout d'un widget personnalisé dans un fichier Kv entraînera une erreur. La raison en est que Kivy ne peut pas résoudre ce qu'est le TextWidget. Par conséquent, il est nécessaire de déclarer la classe TextWidget qui hérite de la classe widget côté fichier Python.

Dix. Ajout de fonctions lors de l'appui sur un bouton

Résultat d'exécution

code

Le code est ci-dessous.

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty 

class TextWidget(Widget):
    text = StringProperty()    #Ajouter une propriété

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = ''

    def buttonClicked(self):        #En cliquant sur le bouton
        self.text = 'Hello World'


class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'greeting'
        
    def build(self):
        return TextWidget()

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

Fichier kv

La langue Kv est la suivante.

`test.kv`


TextWidget: #Ajouter à l'itinéraire

<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size
        
        #étiquette
        Label:
            id: label1
            font_size: 68
            text: root.text    # root(TextWidget)Récupère la valeur du texte variable de
        
        Button:
            id: button1
            text: "OK"
            font_size: 68
            on_press: root.buttonClicked()  #Appelez la fonction côté python lorsque vous cliquez sur le bouton

Commentaire

Lorsque j'exécute le programme, rien n'est affiché sur l'étiquette au démarrage, mais lorsque je clique sur le bouton OK, les mots «Hello World» sont affichés sur l'étiquette. Tout d'abord, la commande côté python

from kivy.properties import StringProperty

Importe StringProperty '' depuis kivy.properties ''. kivy properties est un mécanisme à exécuter lorsqu'il y a un changement de la valeur de l'attribut de l'objet lorsqu'un événement tel que lorsqu'un bouton est pressé est exécuté. Cette fois, il est utilisé pour changer les lettres sur l'étiquette lorsque le bouton est enfoncé. Bien qu'il s'agisse d'une propriété, il existe un type pour chaque chaîne de caractères, nombre et type de dictionnaire. Les types sont les suivants.

StringProperty
NumericProperty
BoundedNumericProperty
ObjectProperty
DictProperty
ListProperty
OptionProperty
AliasProperty
BooleanProperty
ReferenceListProperty

Veuillez vous reporter au [Guide de programmation (traduit) »Evénements et propriétés (traduit)" (https://pyky.github.io/kivy-doc-ja/guide/events.html) pour plus de détails sur la propriété. Dans le code réel, après cela, le texte de la variable de classe est déclaré dans la classe TextWidget et StringProperty () y est affecté. Ensuite, dans la méthode "init", un espace est affecté au texte, une fonction buttonClicked () est créée et le caractère "Hello World" est affecté au texte qu'il contient.

class TextWidget(Widget):
    text = StringProperty()    #Ajouter une propriété

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = ''

    def buttonClicked(self):        #En cliquant sur le bouton
        self.text = 'Hello World

D'un autre côté, bien qu'il s'agisse d'un fichier kv, il se présente comme suit avec des étiquettes et des boutons.


        #étiquette
        Label:
            id: label1
            font_size: 68
            text: root.text    # root(TextWidget)Récupère la valeur du texte variable de
        
        Button:
            id: button1
            text: "OK"
            font_size: 68
            on_press: root.buttonClicked()  #Appelez la fonction côté python lorsque vous cliquez sur le bouton

Tout d'abord, root.text est défini dans le paramètre text de Label. root est un terme réservé au langage Kv qui fait référence au widget racine. Nous pointons donc ici vers le texte de la variable de classe TextWidget.

De plus, Button a un paramètre supplémentaire appelé on_press. on_press est un événement préparé à l'avance dans Kivy qui est exécuté lorsque le bouton est enfoncé. Dans ce cas, définissez root.buttonClicked (), qui exécutera buttonClicked () de TextWiget lorsque le bouton OK est enfoncé.

En plus de cela, il y a "on_release" dans l'événement Button, qui est l'événement qui est exécuté lorsque le bouton est relâché.

référence

Button Behavior(API Reference)

11. Si vous ajoutez plusieurs boutons

Résultat d'exécution

Au démarrage

Cliquez matin

Cliquez sur le jour

Cliquez nuit

code

Le code est ci-dessous.

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty

class TextWidget(Widget):
    text = StringProperty()

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = ''

    def buttonClicked(self):
        self.text = 'Good morning'

    def buttonClicked2(self):
        self.text = 'Hello'

    def buttonClicked3(self):
        self.text = 'Good evening'


class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'greeting'

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

Fichier kv

La langue Kv est la suivante.

`test.kv`


#-*- coding: utf-8 -*-


TextWidget: #Ajouter à l'itinéraire

<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size
        
        #étiquette
        Label:
            id: label1
            font_size: 68
            text: root.text

        BoxLayout:
            Button:
                id: button1
                text: "morning"
                font_size: 68
                on_press: root.buttonClicked()  #Lorsque vous cliquez sur le bouton

            Button:
                id: button2
                text: "day"
                font_size: 68
                on_press: root.buttonClicked2()  #Lorsque vous cliquez sur le bouton

            Button:
                id: button3
                text: "night"
                font_size: 68
                on_press: root.buttonClicked3()  #Lorsque vous cliquez sur le bouton

Commentaire

Tout d'abord, du côté du fichier python, je vais omettre l'explication car la fonction lorsque plusieurs boutons sont enfoncés a été ajoutée à partir du contenu précédent.

Bien qu'il s'agisse du langage Kv, je pense qu'il n'y a pas de problème car l'opération lorsque le bouton est enfoncé a été expliquée la dernière fois. Le problème est la mise en page, cette fois il a la structure suivante

<TextWidget>:
    BoxLayout:　    #①
        orientation: 'vertical'
        size: root.size

        Label:
~ Omis ~
        BoxLayout: #②
            Button:
~ Omis ~
            Button:
~ Omis ~
              Button:
~ Omis ~

BoxLayout est utilisé deux fois, mais tout d'abord, le paramètre d'orientation est "vertical" dans BoxLayout de ①. Cela crée une disposition dans laquelle l'écran est divisé en parties supérieure et inférieure. Ensuite, ajoutez une étiquette et elle sera placée en haut de l'écran divisé supérieur et inférieur. Le problème est en bas de l'écran. Au moment du placement, la disposition de la boîte sera placée dans in. Il n'y a pas de jeu de paramètres d'orientation, mais l'orientation est définie sur "horizontale" par défaut. En conséquence, le bas de l'écran a une disposition côte à côte, et cette fois trois boutons ont été ajoutés, résultant en une disposition avec trois boutons côte à côte. En combinant deux BoxLayouts, la moitié supérieure de l'écran peut être disposée en une et la moitié inférieure peut être disposée horizontalement en trois parties. ** Kivy permet d'installer des mises en page complexes en combinant plusieurs mises en page. ** **

12. Changer la disposition

Résultat d'exécution

Le résultat de l'exécution est le suivant.

Au démarrage

Cliquez matin

Cliquez sur le jour

Cliquez nuit

code

Il n'y a pas de changement par rapport à 11.

Fichier kv

La langue Kv est la suivante.

`test.kv`


<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size
        
        #étiquette
        Label:
            size_hint_y: 0.7    #Ajusté pour afficher 70% de l'écran entier
            id: label1
            font_size: 68
            text: root.text

        BoxLayout:
            size_hint_y: 0.3     #Ajusté pour afficher 30% de l'écran entier
            Button:
                id: button1
                text: "morning"
                font_size: 68
                on_press: root.buttonClicked()  #Lorsque vous cliquez sur le bouton

            Button:
                id: button2
                text: "day"
                font_size: 68
                on_press: root.buttonClicked2()  #Lorsque vous cliquez sur le bouton

            Button:
                id: button3
                text: "night"
                font_size: 68
                on_press: root.buttonClicked3()  #Lorsque vous cliquez sur le bouton

Commentaire

La taille est ajustée en utilisant size_hint_y du côté du fichier Kv. La taille verticale de l'étiquette dans la moitié supérieure est plus grande et la taille du bouton dans la moitié inférieure est plus petite.

13. Ajout d'une fonction en cliquant (change la couleur du texte)

Résultat d'exécution

Le résultat de l'exécution est le suivant.

Au démarrage

Cliquez matin

Cliquez sur le jour

Cliquez nuit

code

Le code est ci-dessous.

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty, ListProperty

class TextWidget(Widget):
    text  = StringProperty()
    color = ListProperty([1,1,1,1])

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = 'start'
        
    def buttonClicked(self):
        self.text = 'Good morning'
        self.color = [1, 0, 0 , 1]

    def buttonClicked2(self):
        self.text = 'Hello'
        self.color = [0, 1, 0 , 1 ]

    def buttonClicked3(self):
        self.text = 'Good evening'
        self.color = [0, 0, 1 , 1 ]

class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'greeting'

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

Fichier kv

La langue Kv est la suivante.

`test.kv`


#-*- coding: utf-8 -*-


TextWidget: #Ajouter à l'itinéraire

<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size

        #étiquette
        Label:
            size_hint_y: 0.7
            id: label1
            font_size: 68
            text: root.text
            color: root.color
            
        BoxLayout:
            size_hint_y: 0.3
            padding: 20,30,20, 10
            Button:
                id: button1
                text: "morning"
                font_size: 68
                on_press: root.buttonClicked()  #Lorsque vous cliquez sur le bouton

            Button:
                id: button2
                text: "day"
                font_size: 68
                on_press: root.buttonClicked2()  #Lorsque vous cliquez sur le bouton

            Button:
                id: button3
                text: "night"
                font_size: 68
                on_press: root.buttonClicked3()  #Lorsque vous cliquez sur le bouton

Commentaire

Nous avons ajouté une fonction pour changer la couleur des caractères affichés sur l'étiquette avec le code jusqu'à la fois précédente. Quant au contenu, côté Python, la classe TextWidget déclare une nouvelle couleur comme variable de classe avec ListProperty pour réaliser la valeur. color utilise ListProperty pour stocker plusieurs valeurs de rgba.

14. Affichage japonais (ajout de police)

Résultat d'exécution

Le résultat de l'exécution est le suivant.

Au démarrage

Cliquez le matin

Cliquez midi

Cliquez la nuit

code

Le code est ci-dessous.

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty, ListProperty

from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path

#Changer la police par défaut
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Spécifiez une police japonaise pour que le japonais puisse être utilisé


class TextWidget(Widget):
    text  = StringProperty()
    color = ListProperty([1,1,1,1])

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = 'start'
        
    def buttonClicked(self):
        self.text = 'Bonjour'
        self.color = [1, 0, 0 , 1]

    def buttonClicked2(self):
        self.text = 'Bonjour'
        self.color = [0, 1, 0 , 1 ]

    def buttonClicked3(self):
        self.text = 'Bonsoir'
        self.color = [0, 0, 1 , 1 ]

class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'Salutation'

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

Fichier kv

La langue Kv est la suivante.

`test.kv`



TextWidget:

<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size

        #étiquette
        Label:
            size_hint_y: 0.7
            id: label1
            font_size: 68
            text: root.text
            color: root.color
            
        BoxLayout:
            size_hint_y: 0.3
            padding: 20,30,20, 10
            Button:
                id: button1
                text: "Matin"
                font_size: 68
                on_press: root.buttonClicked()

            Button:
                id: button2
                text: "Le midi"
                font_size: 68
                on_press: root.buttonClicked2()

            Button:
                id: button3
                text: "Nuit"
                font_size: 68
                on_press: root.buttonClicked3()

Commentaire

Kivy, mais dans Windows, il y a des données de police sous ** Python34 \ Lib \ site-packages \ kivy \ data \ fonts **, mais le code de caractère par défaut est ** Roboto, et Roboto est une police européenne, il est donc japonais tel quel Ne s'affiche pas correctement **. Donc, pour afficher le japonais, vous devez utiliser une police qui affiche vous-même le japonais. Du côté du code Python

from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path

#Changer la police par défaut
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Spécifiez une police japonaise pour que le japonais puisse être utilisé

Cependant, resource_add_path spécifie le chemin de lecture dans kivy. Ensuite, LabelBase.register spécifie la police qui peut afficher le japonais comme police standard. Cette fois, le dossier "fonts" est créé dans la même hiérarchie que le fichier python, et le fichier "mplus-2c-regular.ttf" y est placé. Le fichier "mplus-2c-regular.ttf" est spécifié comme police d'affichage des caractères.

Je pense qu'il y a à peu près deux façons d'afficher le japonais.

Spécifiez une police qui peut afficher le japonais dans la police système pour chaque système d'exploitation.
Préparez une police et préparez une police par défaut au démarrage.

C'est une méthode pour spécifier une police qui peut afficher le japonais dans la police système de chaque OS, mais kivy a une fonction appelée platform. Vous pouvez l'utiliser pour obtenir le système d'exploitation au moment de l'exécution. Vous pouvez l'utiliser pour modifier la police d'affichage par défaut pour chaque système d'exploitation. Il y a des gens qui le font aussi au Japon.

référence

Tofu issue de l'affichage des polices japonaises - Calendrier de l'Avent Kivy 2013

Cependant, avec cette méthode, la police spécifiée pour un modèle avec de nombreuses personnalisations pour chaque modèle, comme un système d'exploitation inconnu ou Android, peut ne pas exister.

Pour préparer une police et préparer une police par défaut au démarrage, préparez un fichier de police (.ttf), joignez-le au programme et définissez-le pour qu'il soit utilisé au démarrage. Cette fois, j'utilise cette méthode. La police utilise une police sans licence appelée M +. Il existe différentes façons de spécifier la police, et certaines sont introduites, donc si vous êtes intéressé, veuillez consulter ce qui suit.

Mise à jour du 30/07/2019 Je voudrais vous présenter une personne qui a créé un package pour afficher le japonais.

Python: j'ai créé japanize-kivy qui permet à Kivy d'afficher le japonais simplement en l'important

référence

Remarque à propos du code de caractère du fichier Kv

Sous Windows, le fichier kv ne s'affichera pas correctement à moins qu'il ne soit enregistré comme "shift-jis" pour la série Python 3 et "utf-8" pour la série 2.

Remarque sur le titre de l'application

~~ S'il s'agit d'un système Python2, une erreur se produira même si vous entrez "u'Japanese '". Le message d'erreur est le suivant. Si vous savez quoi faire, veuillez nous contacter. ~~

File "c:\Python27\lib\site-packages\kivy\core\window\window_sdl2.py", line 332, in set_title
     self._win.set_window_title(title)
 TypeError: Argument 'title' has incorrect type (expected str, got unicode)

2017/2/4 postscript J'ai pu l'afficher avec le contenu que vous m'avez dit dans le commentaire. Après avoir affiché "title" comme "u'Japanese" ", vous pouvez l'exécuter en changeant" main "comme suit.

import sys

if __name__ == '__main__':
     reload(sys)
     sys.setdefaultencoding('utf-8')
     TestApp().run()

référence http://d.hatena.ne.jp/shu223/20111201/1328334689 http://blog.livedoor.jp/kaz0215/archives/51124286.html

15. 15. À propos de la modification de la résolution au démarrage et de la réutilisation des paramètres

Résultat d'exécution

Le résultat de l'exécution est le suivant.

Au démarrage

Le code est ci-dessous.

`main.py`


#-*- coding: utf-8 -*-
from kivy.config import Config
Config.set('graphics', 'width', '640')
Config.set('graphics', 'height', '480')

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty, ListProperty

from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path

#Changer la police par défaut
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Spécifiez une police japonaise pour que le japonais puisse être utilisé


class TextWidget(Widget):
    text  = StringProperty()
    color = ListProperty([1,1,1,1])

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = 'start'
        
    def buttonClicked(self):
        self.text = 'Bonjour'
        self.color = [1, 0, 0 , 1]

    def buttonClicked2(self):
        self.text = 'Bonjour'
        self.color = [0, 1, 0 , 1 ]

    def buttonClicked3(self):
        self.text = 'Bonsoir'
        self.color = [0, 0, 1 , 1 ]

class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'Salutation'

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

La langue Kv est la suivante.

`test.kv`




TextWidget:


<MyButton@Button>:
    font_size: 68

<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size

        #étiquette
        Label:
            size_hint_y: 0.7
            id: label1
            font_size: 68
            text: root.text
            color: root.color
            
        BoxLayout:
            size_hint_y: 0.3
            padding: 20,30,20, 10
            MyButton:
                id: button1
                text: "Matin"
                #font_size: 68
                on_press: root.buttonClicked()

            MyButton:
                id: button2
                text: "Le midi"
                #font_size: 68
                on_press: root.buttonClicked2()

            MyButton:
                id: button3
                text: "Nuit"
                #font_size: 68
                on_press: root.buttonClicked3()

Commentaire

Il est difficile de comprendre s'il s'agit d'une image, mais lorsque vous la démarrez, vous pouvez voir que la taille de l'écran est plus petite.

from kivy.config import Config
Config.set('graphics', 'width', '640')
Config.set('graphics', 'height', '480')

Les commandes suivantes ont été ajoutées au début du fichier Python. Kivy est configuré pour démarrer avec une résolution de 800x600 par défaut immédiatement après l'installation. Il est écrit dans [Guide de programmation (traduit) »Configurer Kivy (traduit)" (https://pyky.github.io/kivy-doc-ja/guide/config.html), mais Kivy dit "config. Les paramètres de base y sont décrits dans un fichier appelé "ini". Sous Windows, il se trouve sous * C: \ Users \ <username \ .kivy *. Le contenu de "config.ini" est le suivant.

[kivy]
keyboard_repeat_delay = 300
keyboard_repeat_rate = 30
log_dir = logs
log_enable = 1
log_level = info
log_name = kivy_%y-%m-%d_%_.txt
window_icon = 
keyboard_mode = 
keyboard_layout = qwerty
desktop = 1
exit_on_escape = 1
pause_on_minimize = 0
config_version = 14

[graphics]
display = -1
fullscreen = 0
height = 600
left = 0
maxfps = 60
multisamples = 2
position = auto
rotation = 0
show_cursor = 1
top = 0
width = 800
resizable = 1
borderless = 0
window_state = visible
minimum_width = 0
minimum_height = 0

[input]
mouse = mouse
wm_touch = wm_touch
wm_pen = wm_pen

[postproc]
double_tap_distance = 20
double_tap_time = 250
ignore = []
jitter_distance = 0
jitter_ignore_devices = mouse,mactouch,
retain_distance = 50
retain_time = 0
triple_tap_distance = 20
triple_tap_time = 375

[widgets]
scroll_timeout = 250
scroll_distance = 20
scroll_friction = 1.
scroll_stoptime = 300
scroll_moves = 5

[modules]

Parmi ceux-ci, les valeurs de hauteur et de largeur de l'élément "graphiques" sont la résolution au démarrage. Il est possible de réécrire le contenu de ce fichier config.ini et de le modifier, mais s'il est distribué, cela dépendra du paramètre de config.ini pour chaque utilisateur, donc changez-le temporairement comme ceci Est également possible.

référence Faisons une application simple avec Kivy

Vous pouvez également utiliser windw () pour changer la résolution.

from kivy.core.window import Window
#Window.size = (450, 600)

Cependant, si vous l'affichez sur un appareil mobile tel qu'Android par cette méthode, la résolution sera étrange, donc si vous souhaitez l'afficher sur mobile, n'utilisez pas window () ou n'utilisez pas le pratform expliqué précédemment et ne l'affichez pas en fonction du type d'OS Etc. est requis.

C'est aussi un fichier Kv, mais c'est comme suit

<MyButton@Button>:　# ①
    font_size: 68

<TextWidget>:
~ Omis ~
            MyButton:　#②
                id: button1
                text: "Matin"
                #font_size: 68
                on_press: root.buttonClicked()
            MyButton:
                id: button2
                text: "Le midi"
                #font_size: 68
                on_press: root.buttonClicked2()

            MyButton:
                id: button3
                text: "Nuit"
                #font_size: 68
                on_press: root.buttonClicked3()

La différence avec la dernière fois est Le widget "MyButton @ Button" est déclaré dans ①, et l'endroit où "Button" était défini dans ② jusqu'à la dernière fois est défini sur "MyButton". Dans kivy, vous pouvez hériter du type de widget après @ en déclarant ** widget @ type de widget ** lors de la déclaration de widget. Cette fois, j'ai créé un widget "MyButton" qui hérite du widget "Button" en déclarant un widget "Button". En définissant font_size dans MyButton, il n'est pas nécessaire de spécifier font_size individuellement pour chaque Button jusqu'à la dernière fois, et la même valeur peut être utilisée. Pour plus d'informations, veuillez lire le [Guide de programmation (traduit) »Langue Kv (traduit)" (https://pyky.github.io/kivy-doc-ja/guide/lang.html).

16. Affichage de l'image

Résultat d'exécution

Le résultat de l'exécution est le suivant.

Au démarrage

code

Le code est ci-dessous.

`main.py`


#-*- coding: utf-8 -*-
from kivy.config import Config
Config.set('graphics', 'width', '640')
Config.set('graphics', 'height', '480')

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty, ListProperty

from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path

#Changer la police par défaut
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Spécifiez une police japonaise pour que le japonais puisse être utilisé


class TextWidget(Widget):
    text  = StringProperty()

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        pass
        
    def buttonClicked(self):
        pass

    def buttonClicked2(self):
        pass

    def buttonClicked3(self):
        pass
        
class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'Affichage de l'image'

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

La langue Kv est la suivante.

`test.kv`




TextWidget:

<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size

        Image:
            source: './image/sample2.jpg'

            
        BoxLayout:
            size_hint_y: 0.3
            padding: 20,30,20, 10
            Button:
                id: button1
                text: "Échantillon 1"
                font_size: 30
                on_press: root.buttonClicked()

            Button:
                id: button2
                text: "Échantillon 2"
                font_size: 30
                on_press: root.buttonClicked2()

            Button:
                id: button3
                text: "Échantillon 3"
                font_size: 30
                on_press: root.buttonClicked3()

Commentaire

Les images peuvent être affichées sur Kivy.

`python`


        Image:
            source: './image/sample2.jpg'

Vous pouvez afficher l'image en spécifiant. Vous pouvez également modifier la taille d'affichage à l'aide du paramètre de taille. Cette fois, cliquer sur le bouton ne change pas l'image. Le changement d'image en cliquant sur un bouton est expliqué dans l'élément suivant.

référence

Image(API Reference)

17. Affichage de l'image (changement d'image avec les boutons)

Résultat d'exécution

Le résultat de l'exécution est le suivant.

Au démarrage ou en cliquant sur l'échantillon 1

En cliquant sur l'échantillon 2

En cliquant sur l'échantillon 3

code

Le code est ci-dessous.

`main.py`


#-*- coding: utf-8 -*-
from kivy.config import Config
Config.set('graphics', 'width', '640')
Config.set('graphics', 'height', '480')

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty

from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path

#Changer la police par défaut
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Spécifiez une police japonaise pour que le japonais puisse être utilisé

resource_add_path('./image')


class ImageWidget(Widget):
    source = StringProperty('./image/sample.jpg')
    #source = StringProperty(None)
    

    def __init__(self, **kwargs):
        super(ImageWidget, self).__init__(**kwargs)
        pass
        
    def buttonClicked(self):
        self.source= './image/sample.jpg'

    def buttonClicked2(self):
        self.source = 'sample2.jpg'

    def buttonClicked3(self):
        self.source = 'sample3.jpg'

        
class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'Affichage de l'image'

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

Fichier kv

La langue Kv est la suivante.

`test.kv`



ImageWidget:

<ImageWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size

        Image:
            source: root.source

            
        BoxLayout:
            size_hint_y: 0.3
            padding: 20,30,20, 10
            Button:
                id: button1
                text: "Échantillon 1"
                font_size: 30
                on_press: root.buttonClicked()

            Button:
                id: button2
                text: "Échantillon 2"
                font_size: 30
                on_press: root.buttonClicked2()

            Button:
                id: button3
                text: "Échantillon 3"
                font_size: 30
                on_press: root.buttonClicked3()

Commentaire

En ce qui concerne l'explication, si vous lisez le contenu jusqu'à la dernière fois, vous comprendrez le contenu en général, je vais donc omettre l'explication détaillée, mais du côté Python, créez une source de variable de classe en utilisant StringProperty, et lorsque vous cliquez sur le bouton, là Le chemin est commuté et affiché.

Ajouté le 2017/5/16, si None est spécifié lors de la déclaration "None" dans StringProperty, un écran vide sera affiché car aucune image n'est spécifiée au démarrage.

Cette fois, l'image est une image traitée, mais dans le processus de buttonClicked (), un filtre est appliqué à l'aide d'une bibliothèque d'images telle que Pillow ou OpenCV pour générer un fichier image, et ce fichier image est généré. Je pense que cela peut être traité. Il est également possible de lire directement une chaîne d'octets sans générer de fichier image. Dans ce cas, il peut être réalisé en utilisant Texture's blit_buffer ().

Mise à jour du 09/10/2017 Dans un autre article, j'ai écrit un article sur la façon d'afficher des images lues par OpenCV ou Pillow avec blit_buffer ().

Comment afficher des images avec Opencv ou Pillow avec Python Kivy

référence

[Python] QR Code Creation-Kivy Advent Calendar 2013

Résumé

Jusqu'à présent, j'ai expliqué la mise en page de base et l'exécution de l'opération lorsque le bouton est cliqué, donc je pense qu'il est désormais possible de mettre en œuvre une application simple. Si vous lisez le contenu jusqu'à présent et relisez le "Guide de programmation" du Site officiel de traduction de manuels, vous trouverez diverses découvertes. , Il est recommandé de le lire une fois.

Aussi, bien qu'il s'agisse d'un exemple de programme de Kivy, il existe divers exemples dans [sous exemple] de Kivy (https://github.com/kivy/kivy/tree/master/examples), donc je pense que vous devriez y jeter un œil. Je vais. Voir Galerie d'exemples (traduits) »Galerie (traduits) et [Obtenir] Démarré »Exemples](https://pyky.github.io/kivy-doc-ja/gettingstarted/examples.html) a une description du contenu.

Kivy lui-même a beaucoup de fonctionnalités, mais j'espère que vous lirez ceci et que vous trouverez quelque chose d'utile. Les volontaires font également Traduction du manuel officiel, donc si vous êtes intéressé, rejoignez-nous. En 2017, je pense me concentrer sur l'API.

Référence: sélectionnez un fichier

Lors de la sélection d'un fichier dans Kivy, vous pouvez utiliser File Chooser pour ouvrir la boîte de dialogue de sélection de fichier.

Bien qu'il s'agisse de l'utilisation réelle, veuillez vous référer au site suivant car d'autres personnes ont publié l'utilisation réelle avec le code.

référence

Kivy, lecteur de musique simple ①

Référence: À propos de la saisie japonaise (Attention)

Dans ce qui suit, saisissez des caractères dans la zone de texte et cliquez sur le bouton "OK" pour afficher les caractères saisis dans l'étiquette.

Résultat d'exécution

Le résultat de l'exécution est le suivant.

code

Le code est ci-dessous.

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty

from kivy.core.text import LabelBase, DEFAULT_FONT
from kivy.resources import resource_add_path

#Changer la police par défaut
resource_add_path('./fonts')
LabelBase.register(DEFAULT_FONT, 'mplus-2c-regular.ttf') #Spécifiez une police japonaise pour que le japonais puisse être utilisé


class TextWidget(Widget):
    text = StringProperty()

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = ''

    def buttonClicked(self):
        self.text =  self.ids["text_box"].text


class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        
    def build(self):
        return TextWidget()

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

Fichier kv

La langue Kv est la suivante.

`test.kv`


TextWidget: #Ajouter à l'itinéraire

<TextWidget>:
    BoxLayout:
        orientation: 'vertical'
        size: root.size
        #étiquette
        Label:
            id: label1
            font_size: 68
            text: root.text
        
        BoxLayout:
            TextInput:
                id: text_box
                size_hint_x: 70
                font_size: 68
                focus: True
                on_text_validate: root.buttonClicked()
            Button:
                id: button1
                size_hint_x: 30
                text: "OK"
                font_size: 68
                on_press: root.buttonClicked()  #Lorsque vous cliquez sur le bouton

Commentaire

Vous pouvez saisir du texte en utilisant Textinput.

Cependant, il y a un problème. La saisie japonaise elle-même peut être effectuée en spécifiant la police du japonais. Vous pouvez également coller par copier-coller. Le problème est que ** selon le système d'exploitation, IME ne s'ouvre pas, donc les caractères pleine largeur ne sont pas affichés tant que les caractères ne sont pas confirmés **. Officiellement, c'est Problème, mais l'arrière-plan du problème est que Kivy s'appuyait à l'origine sur une bibliothèque appelée pygame pour la saisie de caractères, et pygame Il y avait un problème connu où l'IME n'était pas affiché. Depuis lors, Kivy lui-même a cessé de s'appuyer sur pygame et a réécrit diverses fonctionnalités basées sur SDL pour éviter d'utiliser pygame. Cependant, Kivy ne dispose d'aucun traitement pour recevoir l'événement "SDL_TEXTEDIT" émis par SDL lors de l'entrée (IME). Par conséquent, le japonais que vous tapez n'est pas affiché.

Soyez prudent lorsque vous souhaitez utiliser activement l'entrée japonaise. À l'heure actuelle, l'IME pour chaque système d'exploitation est comme ça.

** [Ajout] En juillet 2018, la dernière version (1.10.1) de Kivy est sortie. Voici l'écran IME La demande d'extraction de contenu a été adoptée et IME fonctionne et le japonais en cours de saisie s'affiche. ** **

En juillet 2018, la situation a changé depuis l'adoption du PR concernant la contribution japonaise.

windows: Oui, IME s'ouvre
MacOS: Oui, IME s'ouvre
Linux: pas possible (?).
Android: Oui, je l'ai essayé sur Nexus 5 et je peux saisir le japonais sans aucun problème.
iOS: Non, IME ne s'ouvre pas. (Non vérifié)

J'ai écrit un article sur les raisons pour lesquelles IME lors de la saisie du japonais ne s'ouvre pas, comment l'ouvrir et comment créer un environnement, veuillez donc vous reporter à ce qui suit.

Les caractères d'entrée japonais de Kivy sont affichés
[Comment entrer le japonais avec Kivy (exécution)] (https://qiita.com/dario_okazaki/items/815cdebe91211f2b3826)

À propos de la saisie japonaise dans Windows

Bien que ce ne soit pas officiel à propos de Windows, il y a une personne qui a créé une DLL en écrivant du code même candidat à la conversion.

Entrez le japonais avec Kivy
github: https://github.com/Naotonosato/MilletPie
La DLL est ici.
Créé par: https://weekly.ascii.jp/elem/000/000/436/436756/

La saisie du texte lorsque le bouton est cliqué sera expliquée dans la référence suivante.

Référence: Comment obtenir la valeur du fichier kv côté Python

En regardant le code pour «Entrée japonaise (Remarque)», TextInput est le code suivant.

`test.kv`



<TextWidget>:
        BoxLayout:
            TextInput:
                id: text_box    #★ Attention

Ce qu'il faut noter ici, c'est que "text_box" est entré pour "id". D'autre part, bien qu'il s'agisse du code côté Python, la fonction buttonClicked () qui est appelée lorsque le bouton est enfoncé est la suivante.

`python.py`


    def buttonClicked(self):
        self.text =  self.ids["text_box"].text

Kivy gère tous les widgets étiquetés avec identifiant et emplacement en un seul endroit avec une propriété de type dictionnaire appelée ** self.ids **. Ce faisant, vous pouvez obtenir la valeur de chaque paramètre du widget en utilisant le nom de l'id comme clé. Pour plus d'informations, voir «Guide de programmation (traduit)» Langage Kv (traduit) »(https://pyky.github.io/kivy-doc-ja/guide/lang.html)« Du code Python à l'intérieur de Kv lang » Il est décrit dans l'élément "Accéder aux widgets définis". Cependant, selon le manuel du site officiel, il est préférable d'apprendre la valeur en utilisant ObjectProperty. L'explication de la façon d'obtenir la valeur en utilisant ObjectProperty est un peu compliquée et pas pour les débutants, donc je vais l'expliquer dans un autre article.

Référence: Comment appeler une fonction dans un fichier Python côté Kivy

Jusqu'à présent, les méthodes (fonctions) des classes du côté Python peuvent être utilisées du côté du fichier Kv en utilisant des mots réservés tels que "self" et "root". Alors, au contraire, comment puis-je appeler et utiliser la méthode écrite côté Python? Une façon consiste à importer le fichier Python dans le fichier Kv et à l'utiliser.

Exemple d'exécution

Le résultat de l'exécution est le suivant.

code

Le fichier python (main.py) est le suivant.

`main.py`


#-*- coding: utf-8 -*-

from kivy.app import App
from kivy.uix.widget import Widget

from kivy.properties import StringProperty

def buttonClicked():    #Appelez cette fonction
    print("call def")
    text = 'Hello World'
    
    return text

class TextWidget(Widget):

    def __init__(self, **kwargs):
        super(TextWidget, self).__init__(**kwargs)
        self.text = ''

    def buttonClicked(self):
        self.text = 'Hello World'


class TestApp(App):
    def __init__(self, **kwargs):
        super(TestApp, self).__init__(**kwargs)
        self.title = 'greeting'
        
    def build(self):
        return TextWidget()

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

La langue Kv est la suivante.

`test.kv`


#: import main main
# ↑①main.Importer py.

TextWidget: #Ajouter à l'itinéraire

<TextWidget>:
    BoxLayout:
    	id: input
        orientation: 'vertical'
        size: root.size
        l_text:'aa'
  
        #étiquette
        Label:
            id: label1
            font_size: 68
            text: input.l_text  #Après avoir cliqué sur aa'Hello World'L'affichage passe à
        
        Button:
            id: button1
            text: "OK"
            font_size: 68
            on_press: input.l_text = main.buttonClicked()  # ②main.Appelez la fonction py.

Commentaire

`test.kv`


#: import main main
# ↑①main.Importer py.


<TextWidget>:
    BoxLayout:
 
~ Omis ~
        Button:
            id: button1
            text: "OK"
            font_size: 68
            on_press: input.l_text = main.buttonClicked()  # ②main.Appelez la fonction py.

J'importe le main.py dans ①. L'utilisation détaillée est la suivante

`python`


#: import <Le nom que vous souhaitez utiliser dans le fichier Kv> <Nom de la bibliothèque ou du fichier que vous souhaitez importer>

En écrivant de cette façon, vous pouvez appeler une bibliothèque ou un nom de fichier spécifique du côté du fichier Kv. Cette fois, après avoir importé main.py avec le nom main dans ①, buttonCliced () de main.py est appelé quand le bouton OK de ② est cliqué.

référence

Kivy Language -> Directives(API Reference)

Référence: Comment utiliser GridLayout

J'ai vu un article que je ne pouvais pas utiliser GridLayout avec Kivy, donc j'ai écrit le code, donc je le posterai.

référence

J'ai utilisé le framework Python GUI kivy mais j'ai abandonné car c'était trop de gaspillage dans Windows7 et Python2.7

Exemple d'exécution

Le résultat de l'exécution est le suivant.

C'est peut-être ce que l'auteur voulait faire.

code

Bien que ce soit le code réel, c'est une implémentation, mais j'ai préparé deux plans

Proposition 1

Le fichier python est le suivant.

`buttonlauncher.py`


# -*- coding: utf-8 -*
import kivy

from kivy.app import App
from kivy.config import Config
from kivy.uix.widget import Widget
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label

#from kivy.lang import Builder
#Builder.load_file('buttonlauncher.kv')

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

class ButtonLauncherApp(App):
    def build(self):
        return MyWidget()


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

La langue Kv est la suivante.

`buttonlauncher.kv`


<MyWidget>:
    rows: 2
    cols: 2

    Button:
        text: 'button1'
    Button:
        text: 'button2'
    Button:
        text: 'button3'
    Button:
        text: 'button4'

Proposition 2

Le fichier python est le suivant.

`buttonlauncher2.py`


# -*- coding: utf-8 -*-

import kivy
kivy.require('1.9.0')

from kivy.app import App
from kivy.config import Config
from kivy.uix.widget import Widget
from kivy.uix.label import Label

from kivy.lang import Builder
Builder.load_file('buttonlauncher2.kv')

class MyWidget(Widget):
    def __init__(self ,**kwargs):
        super(MyWidget, self).__init__()

class ButtonLauncher2App(App):
    def build(self):
        return MyWidget()


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

La langue Kv est la suivante.

`buttonlauncher2.kv`


<MyWidget>
    GridLayout:
        rows: 2
        cols: 2
        size: root.size    #★ Obtenez la valeur de l'écran entier
        
        Button:
            text: 'button1'
        Button:
            text: 'button2'
        Button:
            text: 'button3'
        Button:
            text: 'button4'

Commentaire

La raison pour laquelle seule une partie de la partie inférieure droite de l'écran est affichée à moins que "root.size" ne soit défini pour la taille est que MyWidget hérite de Widget, mais la valeur initiale de Widget est 100 x 100 (pixels). Toutes les interfaces utilisateur Kivy ont une classe Widget comme classe de base, donc si vous la placez sans spécifier de taille, elle sera de 100x100. En passant, je pense personnellement que c'est assez important, mais ce n'est pas spécifié dans le tutoriel officiel. GridLayout lui-même est un peu bizarre à utiliser, et je pense que c'est probablement une mise en page qui est censée être utilisée dans BoxLayout. En ce qui concerne la mise en page, je pense que c'est une bonne idée d'utiliser d'abord BoxLayout, puis d'assembler la mise en page à partir de là.

Écran de réglage de référence

Dans Kivy, si vous appuyez sur la touche F1 au moment de l'exécution, l'écran de configuration s'affiche. Cela vous permet de modifier le niveau du journal et bien plus encore.

référence

Option de démarrage de référence

Je ne savais pas, mais Kivy a un mode qui vous permet de voir la structure hiérarchique du widget et de vérifier la valeur de Property juste en donnant des paramètres au démarrage. Nous vous recommandons de lire les liens de référence.

référence

Application adaptée à la création avec Kivy

Il convient aux applications qui passent à quelques écrans en appuyant sur un bouton de l'écran de démarrage. Personnellement, je pense que cela ne convient pas aux applications qui changent fréquemment d'écran et conservent des valeurs.

De plus, je ne pense pas que les applications qui affichent des modèles 3D haute définition conviennent. Comme il utilise OpenGL ES, certaines personnes peuvent penser qu'il convient aux jeux 3D, mais comme mentionné dans la référence officielle de l'API, l'index ne peut afficher que 65535. Si vous voulez créer un jeu 3D croquant, je pense que vous devriez utiliser un moteur de jeu tel que Unity ou UE4.

référence

class kivy.graphics.Mesh

Suite de ce contenu

Je vous ai expliqué comment créer une application de calculatrice. Comment utiliser Python Kivy (2) -Créer une calculatrice-

Comment utiliser Python Kivy ① ～ Bases du langage Kv ～

Résumé

À propos du programme à créer cette fois

Matériel de référence

À propos du programme

Environnement de vérification

À propos de l'éditeur

Liste d'utilisation de Python Kivy

Explication réelle

1. 1. Afficher un écran vide

Résultat d'exécution

code

main.py

Fichier kv

Commentaire

2. Affichage des applications et des étiquettes

Résultat d'exécution

code

main.py

Fichier kv

Commentaire

3. 3. Affichage de l'application et de l'étiquette (en utilisant la langue Kv)

Résultat d'exécution

code

main.py

Fichier kv

test.kv

Commentaire

[Note] À propos de l'utilisation du langage Kv

[Note] À propos du fichier à écrire en langage Kv

[Note] À propos de l'outil de prévisualisation du langage Kv

Quatre. Affichage de plusieurs étiquettes

Résultat d'exécution

code

Fichier kv

test.kv

Commentaire

5. Affichage de plusieurs étiquettes (verticalement)

Résultat d'exécution

code

Fichier kv

test.kv

Commentaire

[Note] À propos du système de coordonnées de Kivy

6. Réglage de la taille

Résultat d'exécution

code

Fichier kv

test.kv

Commentaire

7. 7. Réglage de la taille 2

Résultat d'exécution

code

Fichier kv

test.kv

Commentaire

8. Changer la couleur du texte et la couleur de l'étiquette

Résultat d'exécution

code

main.py

Fichier kv

test.kv

Commentaire

[Note] À propos des mots réservés Kv

9. Ajouter un bouton

Résultat d'exécution

code

main.py

Fichier kv

test.kv

Commentaire

Dix. Ajout de fonctions lors de l'appui sur un bouton

Résultat d'exécution

code

main.py

Fichier kv

test.kv

Commentaire

11. Si vous ajoutez plusieurs boutons

Résultat d'exécution

`main.py`

`main.py`

`main.py`

`test.kv`

`test.kv`

`test.kv`

`test.kv`

`test.kv`

`main.py`

`test.kv`

`main.py`

`test.kv`

`main.py`

`test.kv`

`main.py`

`test.kv`

`test.kv`

`main.py`

`test.kv`

`main.py`

`test.kv`

`main.py`

`test.kv`

`main.py`

`test.kv`

`python`

`main.py`

`test.kv`

`main.py`

`test.kv`

`test.kv`

`python.py`

`main.py`

`test.kv`

`test.kv`

`python`