kivyMDチュートリアル其の肆什壱 Components - FitImage篇

Good, (morning|evening|night)!

はい、ということで変なスタートで今週もKivyMDのお時間となりました。
コンポーネンツも残りわずか2回ほどとなる状況です。いやー、ここまで来るのになか
なか大変と言うと大袈裟ですが、骨のいる作業でした。まぁ、でもこんなこというのは
ちょっと早いかな。

アプリも作らないと作らないといつも言っていますが、まだ出来ておりません
そろそろやらねば。。いつもこんな調子だと、いつまで経ってもやらない気がするので
計画を立てたいと思います。

ずばり、年末もしくは年初にFirst Appをリリースしたいと思います。なんか冬休みの
宿題みたい。あとはするって言ってないのがミソです。それほど凝って作るということは
計画しておりませんので、ほんとに子供の宿題程度に見てもらえればうれしいです。。
# 今度の機会で触れますが、このアプリをフレームワークみたいに作っていくのとDevOpsと絡めていく予定です
# なので、それほどゴイゴイスーなアプリが登場するわけではないというのは大事なことですね

ということで、うだうだ言っていますが今日のお題に触れていきたいと思います。今日の
お題目は先週の周知の通り、FitImage篇となります。

FitImage

マニュアルの最初は参照コード(Gist)と以下の記載がありますね。

Feature to automatically crop a Kivy image to fit your layout Write by Benedikt Zwölfer

Referene - https://gist.github.com/benni12er/95a45eb168fc33a4fcd2d545af692dad

この機能は〇〇さんによって作られていますよー！ということでしょうか。automati-
cally cropが少し気にはなりますが、、んー、英語ってホント難しいですね。

リンクを辿ると、それらしきコードが置かれています。KivyMDパッケージはどうな
ってるんだろうと思い、同じようなものは見つけました。場所は以下になります。

UsersDirectory/.pyenv/versions/3.7.6/lib/python3.7/site-packages/kivymd/utils
※pyenv使われていない方はまた違う場所にあります
fitimage.py

少し中身が異なっていたので、URL参照先(Gist)はバージョンが古いのかもしれ
ません。それかまた別の方がいじり直したとか。後、気になるところとしてはパッケ
ージの場所がButtonだとかLabelだとかと異なっていたので、サードパーティのよ
うな扱い方をしているので別の方がいじっているという可能性はないかもしれませんね。

FitImageはご認識の方もいられるかもしれませんが、以前にも触れていたときが
あります。その形跡(URLリンク)を以下に記載しておきます。

まぁ、これらはあくまで参照なので、気になった方はこれらを見るかもしくは該当
マニュアルの方をご覧ください。

Example:

具体的な使い方です。マニュアルと同じものを以下に記載しておきます。

MDBoxLayout:
    size_hint_y: None
    height: "200dp"
    orientation: 'vertical'

    FitImage:
        size_hint_y: 3
        source: 'images/img1.jpg'

    FitImage:
        size_hint_y: 1
        source: 'images/img2.jpg'

なんてことはありませんね。なんらかのLayoutを用意して、その配下に配置しています。

Example with round corners:

この調子で今日のメインテーマであるサンプルコードを見てみましょう。こちらもそれほど
手強くはありません。

xli/fitimage.py

from kivy.uix.modalview import ModalView
from kivy.lang import Builder

from kivymd import images_path
from kivymd.app import MDApp
from kivymd.uix.card import MDCard

Builder.load_string(
    '''
<Card>:
    elevation: 10
    radius: [36, ]

    FitImage:
        id: bg_image
        source: "photo/genba_neko.png"
        size_hint_y: .35
        pos_hint: {"top": 1}
        radius: 36, 36, 0, 0
''')


class Card(MDCard):
    pass


class Example(MDApp):
    def build(self):
        modal = ModalView(
            size_hint=(0.4, 0.8),
            background=f"{images_path}/transparent.png",
            overlay_color=(0, 0, 0, 0),
        )
        modal.add_widget(Card())
        modal.open()


Example().run()

みた感じではそれほど難しくなさそうです。ここも以前のコンポーネントに対して
触れ込んでいるということもあるので、触れ込みに対してはそちらにてお譲りします。
て言って自分の書いたものだけど。分かりにくーとなった方は該当のマニュアルをご覧
頂ければと思います。

あとは見慣れないModalViewというのもありますね。これはパッケージ名から分かる
ように、KivyMDのパッケージからなるものではありません。Kivyのもので、ダイア
ログに似たようなものでしょうか。これに関しても、Kivyの公式マニュアルにお譲り
したいと思います。当初からKivyがわかる人が前提と謳っていましたし。。

結果

ということで触れ込みも完了した、というかやってもないけど、ということなので、
実行結果の方に入りたいと思います。量が少ないとサクサク進みますね。

最初はなにが起こっているかてんで分かりませんでしたが、起こった事実(カード
と異なる領域を押下するとカードが消える)をただ動画キャプチャにてまとめて
いるだけになります。こればっかりは原因が分かっておりません。。transpare-
nt.pngが正しく認識されていないのかとか考えていましたがそんなこともなく。
不思議なことが起こるものです。

まぁこの辺りをうーん、うーん、とずっと悩むよりかはコントリビューターの方に
見てもらうしかないようです。我々は今後のバージョンアップにて見てみるしか方法
がありません(そんなことはない)。またTodoが増えるな。。

API - kivymd.uix.fitimage.fitimage

まとめに入る前に、使用したAPIについて触れておきます。て言っても2つほどしか
ありませんね。

class kivymd.uix.fitimage.fitimage.FitImage(**kwargs)

いつものごとく、詳細は他で確認してくれよなと記載があります。

source

Filename/source of your image.

source is a StringProperty and defaults to None.

言うまでも無く、画像のパスを指定します。実質今はこれくらいしか使いませんが、
角を丸くするためにradiusプロパティも使うことも出来ます。なんでかということ
を考えることも実力UPにはもってこいかもしれません。

reload(self)

投稿者が気になっているものですね。どう使うかも気になるところ。

まとめ

はい、なんか早く終わった気がしますが、今日はこの辺にて。いかがだったでしょうか。

これまでも登場してきたので、それほど新鮮さはなかったかもしれませんね。ですが、
画像などをアプリに入れたいとなると、必須のコンポーネントかもしれません。と言っ
てもそれほど使い方も難しくないし、手軽に扱えるのはいいですね。

ですが、今日みたいに使い方を間違えると、思わぬ結果を巻き起こすかもしれません。
まぁ、でも特殊なことをしなければ構えることはないかと。

ということで、来週の予定ですが予定通りLayout篇2をやっていきたいと思います。
いつの間にやら増えたもの達ですね。ということで次回もお楽しみにー。

それでは、ごきげんよう。

参照

Components » FitImage
https://kivymd.readthedocs.io/en/latest/components/fitimage/

くまみね工房 イラストレーターのブログ
https://kumamine.blogspot.com/2019/12/blog-post_27.html