画面遷移ほかいろいろ

前回のpywebviewお試しでwindowをapiに覚えてもらうことで使いやすくするってところをやりましたが結構これが良いのでぜひみんなやるべきです（ぁ

今回は画面遷移どうすんの？とかCSSを外部読み込みしたいよねとかその他もろもろをやります。

今回のもろもろでこんな具合に画面を作れるようになりましたよ。
労力少ない！　最高か！

画面遷移どうすんの？

これは思いのほか簡単で以下のようにHTML文書を文字列で渡してやるだけでした。

self.window.load_html(htmlDocument);

CSSを外部から読み込みたい

これもHTMLと一緒で文字列でCSSを渡すだけ。

self.window.load_css(cssDocument);

デフォルトで読み込まれるCSSというのをどうにかしたい。

HTML文書の方にJSでPython側のAPIを呼び出すスクリプトを書けば出来るのですけれどもすべてのページにそれを書くの？　嫌すぎる。
Python側でドキュメントを読み込み終わったらCSSを読み込むようにします。

api = Api()
api.window = webview.create_window ....

#ハンドラを指定
api.window.events.loaded += api.on_loaded

このようにイベントハンドラを登録します。
Apiクラスにon_loadedというファンクションを作っておけば各ページが読み込み終わり、webviewが動作可能になったタイミングでここが読み込まれますのでデフォルトのCSSを読み込んでやるなどします。

ところで画像表示できないんだけど？

IMGタグを使おうとCSSでurl指定しようと出てくる気配はありません。
どうやら自前で読み込んでやる必要があるようです。

Apiにこのようなファンクションを用意します。
base64を利用するのでimport base64を忘れずに。

    def readPng(self, iid, path):
        with open(path, "rb") as fr:
            buf = fr.read()
        b64str = base64.b64encode(buf).decode("utf-8")
        data = "data:image/png;base64,%s" % b64str
        self.window.evaluate_js(
            """document.getElementById("%s").src = '%s';""" % (iid, data)
            )

HTMLの画像を表示したいところにはIMGタグで、例えば

<img id="image"/>

などとし、スクリプトのpywebviewreadyの中で

pywebview.api.readPng("image", "img/hoge.png");

このように、ID、image、パスをimg/hoge.png で表示してくれ。みたいにしてやればPython側からHTML側に作用して画像表示が可能です。
この辺り、loadedイベントの中でjsにてドキュメント捜査を行って自動的にやったりしたほうがカッコよさそうです、今のところはこういう事にしておきましょう。

画面遷移したあとCSS適用される瞬間が、その、なんというか・・・ダサいんですけど。

CSSの適用されていないHTMLドキュメントが表示されて、CSSが適用されるという感じで動作します。とってもダサいです。
画面を隠して全部終わってから画面を表示するとかもろもろやってみたのですが一番いいのはCSSアニメーションを使う事でした。

まず利用するHTMLのBODYタグ すべて に対してこのように書きます。

<body style="opacity:0;" class="fadeIn">

共通で後程読み込むCSSの中でアニメーションを設定します。
単純なフェードインですがかなり効果的です。

.fadeIn {
    animation: fadeInAnim 1s ease 0s 1 forwards;
}

@keyframes fadeInAnim {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

〆

と、今回はいろいろとやってみました。

フォームとのやりとりを簡単にするとかページ遷移後にフォームの値が保存されている風味にするとか、まだまだ興味どころは尽きませんがここまで出来てしまえばあとは書くだけって感じですね。

つぎはその辺りも踏まえつつファイル選択ダイアログの動作とかマルチウィンドウとかあたりもいじってみたいと思います。