QtWebService の画像対応

はじめに

昨日は @task_jp さんによる Qt の値型のクラスで使われている Implicit Sharing 技術の紹介と実装 でした。

今日は勉強会中に参加する予定だったのですが、家族一同体調がわるくてキャンセルしてしまいました。。。

QtWebService とは？

qtwebservice.io が公式サイトです。
概要は Qt Advent Calendar 2017 ５日目の QtWebService の紹介 をご覧ください。

QtWebService の画像対応

これまで様々な テキスト形式 のデータを QML で記述することを目指してきた QtWebService ですが、諸事情により画像の動的生成に対応しました。

hello.qml

import QtWebService.Image 1.0

Image {
    id: root
    width: 100
    height: 100
    contentType: 'image/png'
    source: './qt-logo.png'

    Text {
        y: 70
        text: 'Hello World'
    }
}

こんな QML を書くと以下の画像が生成されます。

注意点

QtWebService の画像の生成機能を使うためには QtGui モジュールが必要です。

QT += gui

それから、QCoreApplication の代わりに QGuiApplication を使う必要があります。

また、QtQuick モジュールの Image や Text と同じ名前ではありますが、一切関係ないエレメントです。そのうち同じようなプロパティを整備する予定ですが、いまは最低限の機能しか用意していません。

なにがうれしいの？

画像を生成することができます。昔懐かしの画像のアクセスカウンターを以下のような感じで作ることも可能です。

counter.qml

import QtWebService.Image 1.0
import QtWebService.Cache 1.0
import QtQml 2.2

Image {
    id: root
    width: 100
    height: 30
    contentType: 'image/png'

    Cache { id: cache }
    Text {
        id: text
        y: 20
        x: root.width - text.width
    }

    Component.onCompleted: {
        var counter = cache.fetch('counter')
        counter = counter ? counter + 1 : 1
        cache.add('counter', counter)
        text.text = counter
    }
}

実行結果：

なんで作ったの？

Google の Static Maps API で、地図上に画像マーカーを指定する際に、様々な画像を用意するのが面倒だったので、QtWebService で提供した画像を表示するようにしています。

以下のような marker.png を用いて、

以下のようなコードで画像を生成します。

marker.qml

import QtWebService.Image 1.0

Image {
    id: root
    width: 32
    height: 32
    contentType: 'image/png'
    source: './marker.png'

    Text {
        x: (root.width - width) / 2
        y: 22
        text: (new Date).getSeconds()
    }
}

これを表示すると以下のようになります。

実際に運用している（秘密の）サービスでは、画像の qml にパラメータを渡して、少し高度な画像の生成を行っています。

おわりに

Qt を使うとウェブサービスでの動的な画像の生成も簡単ですね。
アイディア次第で本当に色々な事ができるので、様々なことに活用してみてください。

明日は @argama147 さんによる「今更聞けないシグナル・スロット総整理」です。お楽しみに！