はじめに
昨日は @task_jp さんによる Qt の値型のクラスで使われている Implicit Sharing 技術の紹介と実装 でした。
今日は勉強会中に参加する予定だったのですが、家族一同体調がわるくてキャンセルしてしまいました。。。
QtWebService とは?
qtwebservice.io が公式サイトです。
概要は Qt Advent Calendar 2017 5日目の QtWebService の紹介 をご覧ください。
QtWebService の画像対応
これまで様々な テキスト形式 のデータを QML で記述することを目指してきた QtWebService ですが、諸事情により画像の動的生成に対応しました。
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 = webservice
QT += gui
それから、QCoreApplication
の代わりに QGuiApplication
を使う必要があります。
また、QtQuick モジュールの Image や Text と同じ名前ではありますが、一切関係ないエレメントです。そのうち同じようなプロパティを整備する予定ですが、いまは最低限の機能しか用意していません。
なにがうれしいの?
画像を生成することができます。昔懐かしの画像のアクセスカウンターを以下のような感じで作ることも可能です。
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 を用いて、
以下のようなコードで画像を生成します。
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 さんによる「今更聞けないシグナル・スロット総整理」です。お楽しみに!