タイルテンプレートフォーマット

概要 ¶

タイル表示システムは、レンダリング統計情報の様々な種類の情報を表示するために作成されました。タイルのルックとレイアウトは、JSONテンプレートファイルで定義されています。

タイルシステムは新しく実験的なもの であり、 多くの望ましい機能が欠けています が、なにかしら役立つカスタマイズが可能です。

各タイルには、タイルのルックとコンテンツを制御する プロパティ のセットがあります。レンダリング統計情報では、プロパティをJSONPathにマッピングできるため、レンダリング統計情報に合わせてプロパティを設定することができます。こうして、レンダリング画像の統計情報に基づいて、テンプレートに取り込みます。

タイルテンプレートの例 については、$HFS/houdini/config/render_stats_toolbar.json(レンダリング統計情報サイドバーのテンプレート)および$HFS/houdini/config/render_stats_overlay.json(レンダリング統計情報オーバーレイユーティリティのテンプレート)を参照してください。

Tip

このドキュメントは、値のリストに“array”(配列)、キーと値のマッピングに“object”(オブジェクト)など、JSON用語を使用します。

構造 ¶

テンプレートのタイルは、JSONオブジェクトで表現されます。

最もシンプルなテンプレートは、単なるデフォルトのタイルです:

{}

オブジェクトにtypeキーがない場合、デフォルトはテキストタイルです。

{
    "text": "<i>どうしても</i>タイプを指定したくない場合、指定する必要はありません。
}

typeキーは、タイルタイプを指定します。

{
    "type": "number",
    "value": 123.5
}

共通プロパティとタイルタイプの固有のプロパティを使用して、タイルのルックを変更することができます。

{
    "type": "number",
    "label": "Number",
    "value": 123.5,
    "text_size": "xlarge"
}

通常は複数のタイルを表示しておきたいので、上位レベルのタイルはコンテナタイルになり、そのサブタイルをレイアウトします。

{
    "type": "matrix",
    "margins": 20,
    "min_column_width": 80,
    "row_height": 60,
    "items": [
        {
            "type": "text",
            "label": "Text",
            "value": "Hello",
            "text_size": "xlarge"
        },
        {
            "type": "number",
            "label": "Number",
            "value": 123.5,
            "text_size": "xlarge"
        }
    ]
}

JSONPathを使用してレンダリング統計情報から値を抽出する ¶

レンダリング統計情報をタイルに追加するには、 プロパティ名 を JSONPath にマッピングします。タイルシステムはJSONPathを使用して統計内の情報を見つけ、一致する場合、対応するプロパティを更新します。

Tip

レンダリング統計システムで使用されているJSONデータを表示するには、HoudiniシェルでEXRファイルに対してiinfo -J ‹file›を実行します。

プロパティをJSONPathにマッピングする ¶

重要

JSONPathは、実際の標準というよりもよく似た構文の集まりです。現在タイルシステムは、拡張機能が有効になっているjsonpath_ngを使用しています。構文に関する詳細は、jsonpath_ngドキュメントを参照してください。

JSONPathをプロパティに関連付けるには、タイルのpropertiesキーをオブジェクトに設定します。オブジェクトのキーがプロパティ名で、その値はJSONPath文字列です。例えば次のようになります:

{
    "type": "duration",
    "label": "Elapsed",
    "properties": {
        "value": "husk.system_time.wallclock"
    }
}

ショートカットとして、タイルにjson_pathキーを設定すると、タイルのvalueプロパティにJSONPathを指定することができます(単一の情報を表示するタイルには、通常valueプロパティがあります)。これは、上記のJSONと同等です:

{
    "type": "duration",
    "label": "Elapsed",
    "text_size": "large",
    "json_path": "husk.system_time.wallclock"
}

JSONPathは、文字列ではなくJSONオブジェクトとしても指定できます。ここではいくつかのオプションを設定できます。オブジェクトには以下のキーがあります:

path

string

JSONPath文字列(必須)

all

boolean

技術的には、JSONPathはデータ内の複数の箇所とマッチすることができ、常にマッチの リスト を返します。しかし、これは通常では望ましいことではなく、その結果の処理が面倒になります。そのためデフォルトで、最初のマッチをJSONPathの“値”として使用します。

本当に すべて のマッチが必要な場合は、これをtrueに設定してください。

デフォルトはfalseです。

default

any

JSONPathが一致しない場合、これを値として使用します。

Note

allがtrueの場合、defaultは使用されません(allがオンでJSONPathが一致しない場合、空っぽのリストを返します)。

Pythonエクスプレッション ¶

JSONPathはJSONから値を抽出するには便利ですが、値を操作したり、データに応じて様々な表示を行ないたい場合、JSONPathはそこまで強力ではありません。これ以上のことを行ないたい場合、タイルシステムでは、Pythonエクスプレッションを使用してプロパティの値を計算することができます。

常に同じ値に評価されるPythonエクスプレッションは、あまり便利ではありません。Pythonエクスプレッションでデータから入力を取り込んで、それからプロパティ値を計算することをお勧めします。次のように定義します。

Pythonエクスプレッションで使用できる変数をセットアップするには、タイルのvariablesキーをオブジェクトに設定します。オブジェクトのキーが 変数名 で、値はJSONPath文字列です。例えば次のようになります:

{
    "type": "number",
    "variables": {
        "engine": "husk.render_settings.engine",
    }
}

propertiesで、プロパティ名が.pyで終わる場合、JSONPathではなくPythonエクスプレッションとして扱われます。エクスプレッションは、variablesオブジェクトで定義される変数を使用することができます。例えば、これは、タイルのvalueプロパティをエクスプレッションの評価結果に設定します:

{
    "type": "number",
    "variables": {
        "engine": "husk.render_settings.engine",
        "pixelsamples": "husk.render_settings.samplesperpixel",
        "pathsamples": "husk.render_settings.pathtracedsamples"
    },
    "properties": {
        "value.py": "pixelsamples if engine == 'cpu' else pathsamples"
    }
}

また、variables内で‹name›.pyエクスプレッションを使用することもできます。これにより、エクスプレッションから変数の値を計算することができます。

例えば、デフォルトのレンダリング統計情報では、サンプル数について、レンダリングエンジンがXPUの場合 または 収束モードが“Path Traced”の場合、“パスサンプル”設定を表示する必要があります。そして、それに基づいてラベルと値を別々に設定する必要があります。コードを複製してラベルと値の両方のモードを計算するのではなく、Pythonエクスプレッションを使用してuse_path変数を設定します。

{
    "type": "number",
    "text_size": "large",
    "variables": {
        "engine": "husk.render_settings.engine",
        "mode": "husk.render_settings.convergence_mode",
        "pixelsamples": "husk.render_settings.samplesperpixel",
        "pathsamples": "husk.render_settings.pathtracedsamples",
        "use_path.py": "engine == 'xpu' or mode == 'Path Traced'"
    },
    "properties": {
        "label.py": "'Path Samples' if use_path else 'Pixel Samples'",
        "value.py": "pathsamples if use_path else pixelsamples"
    }
}

各タイルについて、システムは以下の順序で値を計算します:

JSONPathによって定義された変数を計算します。
Pythonエクスプレッションによって定義された変数を計算します。Pythonエクスプレッションは、前のステップからの変数を使用できます。
propertiesを計算します。properties内のPythonエクスプレッションは、前のステップからの変数を使用できます。

JSONPathヘルパー ¶

インタラクティブレンダリング時に使用できるJSON統計情報データ(レンダリング統計情報サイドバー)と、EXRファイルからのデータ(レンダリング統計情報オーバーレイ)は形が異なります(インタラクティブレンダリング向けのJSONデータは、EXRデータのaovs[0].metadata.'husk:render_stats'に相当します)。統計情報システムでは、データ内にいくつかの上位レベルキーがあり、両方を使用しやすくなっています。

インタラクティブな統計情報(レンダリング統計情報サイドバー)をカスタマイズする場合、huskで始まるパスのみ使用する必要があります。

`aovs`	EXRファイルからの統計情報では、これはAOVデータのリストです。インタラクティブ統計情報では、このキーは存在しません。
`md`	EXRファイルからの統計情報では、これは最初のAOVの`metadata`オブジェクトです(これは、画像制作者が画像に埋め込んだ“任意の”キー-値メタデータです。JSON内のその他のキーは、画像に関するintrinsicデータです)。インタラクティブ統計情報では、このキーは存在しません。
`husk`	EXRファイルからの統計情報では、これは最初のAOVのメタデータの`husk:render_stats`オブジェクトです。インタラクティブ統計情報では、これらの統計情報のみ利用可能です。

テンプレートをテストする ¶

タイルテンプレートファイルを表示するシンプルなシェルフツールを作成して、タイルテンプレートファイルの動作や見た目を確認することができます。

表示したいテンプレートファイルを作成します。
JSONPathをテストしたい場合、統計情報を読み込むレンダリングEXRファイルも必要です。

以下のスクリプトを使用して新しいシェルフツールを作成します。以下のスクリプトの/path/to/template.jsonおよび/path/to/image.exrを、ファイルの実際のパスに置き換えてください。

from PySide2 import QtWidgets
import hou
from hutil.qt.data import tiles

class TestWindow(QtWidgets.QMainWindow):
    def __init__(self, parent: QtWidgets.QWidget = None):
        parent = parent or hou.qt.mainWindow()
        super().__init__(parent)
        view = tiles.StatsViewer(self)
        self.setCentralWidget(view)

        # 読み込んで表示したいテンプレートファイル
        view.loadTemplate("/path/to/template.json")
        # これはオプション: テンプレートに画像からデータを入力
        view.loadStatsFromImage("/path/to/image.exr")

        self.resize(640, 480)

hou.session.w = TestWindow()
hou.session.w.show()

テンプレートを変更したり保存するたびに、Houdiniでシェルフツールをクリックすれば、ウィンドウでテンプレートを読み込み直し、表示することができます。

Note

上記のスクリプトは、内部のHoudini Pythonモジュールを使用します。このスクリプトは、この特定の目的のためにヘルパーとして提供されています。それ以外の目的でこれらの内部モジュールを使用したり、依存することがないようにしてください。 SideFXは、これらをいつでも変更、名前変更、削除する権利を留保します。

Tipsとメモ ¶

このドキュメントの中で、数値が“ピクセル単位”で指定されると記されている場合、画面上のアイテムの実際のサイズはグローバルUIスケールによって影響を受け、すべてのビューが拡大/スケールします。

デフォルトでは、ほとんどの“コンテナ”タイルにラベルがあり、背景がオフになっているため、コンテナ自体ではなく、含まれるタイルのみが見えます。

コンテナのラベルおよび/または背景をオンにして、サブタイルでそれらをオフにすると、サブタイルが“親”タイルに表示されている情報のように見える、複雑な複合タイルを作成することができます。

この例では、親タイルで背景を表示し、サブタイルの背景を非表示にすることで、単一のタイルが複数のデータを含んでいるように見せています。

{
    "type": "grid",
    "col_width": 60,
    "bg_visible": true,
    "label": "Record",
    "items": [
        {
            "type": "number",
            "value": 20,
            "text_size": "xlarge",
            "label": "Wins",
            "label_edge": "bottom",
            "bg_visible": false
        },
        {
            "type": "number",
            "value": 5,
            "text_size": "xlarge",
            "label": "Losses",
            "label_edge": "bottom",
            "bg_visible": false
        },
        {
            "type": "number",
            "value": 1,
            "text_size": "xlarge",
            "label": "Ties",
            "label_edge": "bottom",
            "bg_visible": false
        }
    ]
}

コンテンツシャドウを明るいカラーにして、シャドウオフセットを0,0に設定すると、タイルのコンテンツをわずかに“輝かせる”ことができます。その後、データに基づいてcontent_shadow_visibleプロパティを設定でき、例えば、特定の閾値を越えると数値が“輝く”ようにすることなどが可能です。
{ "label": "Glowing Value", "text": "100", "text_size": "xlarge", "content_shadow_visible": true, "content_shadow_offset": [0, 0], "content_shadow_color": "#ffff80", "content_shadow_blur": 20.0 }

共通のタイルプロパティ ¶

`name`	string	タイルの内部名。これは、主にコメントやデバッグに役立ちます。
`visible`	boolean	このタイルを表示するかどうか。 JSONPathを使用してこれを設定したり、Pythonエクスプレッションを使用して、データに応じて様々なタイルを表示または非表示にできます。表示されないタイルは、親コンテナのレイアウトから削除されます。
`text_color`	color	値のカラー(テキストおよび数値の表示タイル用)。
`bg_visible`	boolean	タイルの背景を描画するかどうか。
`bg_color`	color	タイル背景の塗りつぶしのカラー。
`margins`	margins	タイルのコンテンツとタイルの境界の間に追加するスペースの量(ピクセル単位)。
`left_margin`	number	左側の余白を設定するためのショートカット。
`top_margin`	number	上部の余白を設定するためのショートカット。
`right_margin`	number	右側の余白を設定するためのショートカット。
`bottom_margin`	number	下部の余白を設定するためのショートカット。
`label`	string	タイルのラベルテキスト。
`label_visible`	boolean	ラベルを表示するかどうか。
`label_size`	text_size	ラベルテキストのフォントサイズ。
`label_color`	color	ラベルテキストのカラー。
`label_bg`	brush	ラベル背景の塗りつぶしのカラー。
`label_bg_visible`	boolean	ラベル背景を描画するかどうか。
`label_edge`	edge	ラベルを配置するタイルのエッジ。
`label_align`	alignment	領域内にラベルを配置する方法。
`label_margins`	margins	ラベルテキストの周囲に追加するスペースの量(ピクセル単位)。
`overlay_label`	boolean	これが`true`の場合、タイルのラベルは独自に確保されたスペースではなく、コンテンツにオーバーレイされます。
`corner_radius`	number	タイル背景のコーナーを丸める量(ピクセル単位)。これを`0`に設定すると直角になります。
`scale`	number	この乗数によってタイルをスケールします。
`rotation`	number	タイルの回転(度)。
`blur`	number	タイルをぼかす量(デフォルトは`0`)。これは、タイルのグラフィックに適用されるガウスブラーの半径(ピクセル単位)です。次の`content_blur`も参照してください。
`content_blur`	number	`blur`と似ていますが、タイル全体ではなく、タイルコンテンツのみに適用します。
`shadow_visible`	boolean	タイルの下にシャドウを描画するかどうか。シャドウはタイルのピクセルに適用されます。タイル背景が表示されている場合(`bg_visible`が`true`)、背景がシャドウを投影します。背景が非表示になっている場合(`bg_visible`が`true`)、タイル内のすべてがシャドウを投影します。以下の`content_shadow_visible`も参照してください。
`shadow_color`	color	タイルシャドウのカラー。デフォルトは黒です。
`shadow_blur`	number	タイルシャドウのブラー半径。
`shadow_offset`	2つの数値の配列	タイルシャドウの水平および垂直オフセットを設定します。
`shadow_offset_x`	number	タイルシャドウの水平オフセット。
`shadow_offset_y`	number	タイルシャドウの垂直オフセット。
`content_shadow_visible`	boolean	`shadow_visible`と似ていますが、タイルコンテンツのみに適用し、タイルラベルや背景には適用しません。
`content_shadow_color`	color	コンテンツシャドウのカラー。
`content_shadow_blur`	number	コンテンツシャドウのブラー半径。
`shadow_offset`	2つの数値の配列	コンテンツシャドウの水平および垂直オフセットを設定します。
`content_shadow_offset_x`	number	コンテンツシャドウの水平オフセット。
`content_shadow_offset_y`	number	コンテンツシャドウの垂直オフセット。
`label_line_width`	number	ラベルとコンテンツの間に描画されるラインのペン幅(ピクセル単位)。これが`0`の場合(デフォルト)、ラインは描画されません。
`label_line_color`	color	ラベルのラインのカラー。
`min_width`	number	タイルの最小幅を設定します(ピクセル単位)。
`fixed_height`	number	タイルの高さを固定サイズに設定します(ピクセル単位)。

スタイリング ¶

現在のタイルシステムは、共通のスタイル、テンプレートやスタイルの再利用、カスケードスタイル、テーマ、カラースキームを十分にはサポートしていません。今後のバージョンでの改善が期待されています。

現在、タイルシステムは以下のキーをサポートしています:

`styles`	文字列をスタイルプロパティマップにマッピングするオブジェクト	(コンテナタイルで)名前と“スタイル”オブジェクト(プロパティ名を値にマッピングするオブジェクト)を関連付けます。これらの“スタイル”は、すべての子タイルで利用可能です。
`style`	string	名前付きスタイルが親タイルで定義されていると想定し、このタイルにそのスタイルを適用します。
`item_style`	string	(コンテナタイルで)独自の`style`プロパティを持たないすべての子タイルに、デフォルトスタイルを設定します。

現在のところ、1つのタイルが同時に持つことができる“スタイル”は1つのみです。

例えば、ルートタイルでstylesキーを使用して一般的なスタイルをいくつか定義し、それらのスタイルをstyleキーを使用して個別のタイルに適用することができます:

{
    "type": "matrix",
    "min_column_width": 80,
    "row_height": 60,
    "styles": {
        "simple": {
            "bg_visible": false,
            "text_size": "xlarge"
        },
        "ok": {
            "bg_color": "#405040",
            "text_size": "xlarge"
        },
        "warn": {
            "label_bg": "#505030",
            "label_color": "#ffff00",
            "text_size": "xlarge"
        }
    },
    "items": [
        {
            "label": "Warning",
            "style": "warn",
            "text": "Not Found"
        },
        {
            "label": "Generic",
            "style": "simple",
            "text": "Hello"
        },
        {
            "label": "Good News",
            "style": "ok",
            "text": "Finished"
        }
    ]
}

タイルタイプ ¶

テキスト ¶

HTML/テキストを表示します。

{
    "type": "text",
    "label": "Text",
    "text": "Text Tile",
    "text_size": "xlarge"
}

`type`	string	`text`
`text`	string	タイル内に表示するテキスト。
`value`	string	これは`text`のエイリアスです。
`text_alignment`	alignment	テキストの配置。
`text_size`	text size	フォントサイズ。
`text_weight`	font weight	テキストに使用するフォントウェイト。
`text_family`	string	テキストに使用するフォントファミリー。
`value_map`	文字列を文字列にマッピングするオブジェクト	テキストがオブジェクトのキーのいずれかと一致する場合、対応する値に変更されます。これは、レンダリング統計情報から取得した文字列をより読みやすい表現に変更するなど、文字列の“書き換え”に便利な場合があります。例えば、`"unk"`という値が表示される場合、以下のようにしてそれを`"Unknown"`に書き換えることができます。 { "name": "source", "type": "text", "json_path": "husk.example.source", "value_map": { "unk": "Unkown" } }

数値 ¶

設定可能なフォーマッタを使用して、数値をテキストとしてフォーマットします。数値タイルはtextのサブクラスであり、同じプロパティをサポートします。

{
    "type": "number",
    "label": "Number",
    "value": 123456,
    "brief": true,
    "text_size": "xlarge"
}

`type`	string	`number`
`value`	number	表示する数値。この値は、フォーマッタによって表示テキストに変換されます。
`formatter`	formatter	タイルが数値を表示する方法を制御します。フォーマッタを設定する方法を参照してください。
`brief`	string	省略した単位で数値を表示するタイミング。 `"always"`、`"never"、`“auto”`のいずれか。デフォルトは`“auto”`。これは、フォーマッタの簡易モードを設定するためのショートカットです。
`decimal_places`	number	小数点以下を丸める桁数。これは、フォーマッタの小数部を設定するためのショートカットです。

チャート ¶

1つ以上の数値をチャートとして表示します。

{
    "type": "chart",
    "label": "Chart",
    "chart": {
        "type": "stacked_donut"
    },
    "values": [1, 3, 2]
}

`type`	string	`chart`
`chart`	chart	表示するチャートのタイプ。
`monochrome`	boolean	チャートの`monochrome`プロパティを設定します。
`value`	数値または数値の配列	チャートに表示する1つ以上の数値。
`values`	数値の配列	`value`のエイリアス。
`total`	number	チャートの`total`プロパティを設定します。
`text`	string	指定したテキストをチャートにオーバーレイします。
`formatter`	formatter	タイルが数値を表示する方法を制御します(`auto_text`が`true`の場合)。フォーマッタを設定する方法を参照してください。
`number`	number	`text`と似ていますが、タイルのフォーマッタを使用して数値をテキストに変換します。
`auto_text`	boolean	これが`true`で、`value`が数値に設定されている場合、タイルの`number`プロパティが設定されているかのように、その数値が自動的にフォーマットされ、チャートに表示されます。

時間 ¶

秒数(経過時間、残り時間など)を時間、分、秒として表示します。これはnumberタイルのサブクラスであり、同じプロパティをサポートします。

{
    "type": "duration",
    "label": "Duration",
    "value": 58327,
    "text_size": "xlarge"
}

type

string

duration

value

number

時間の秒数。

long

boolean

これがtrueの時、タイルは常に00:00:00.0の形式で時間、分、秒を表示します。 falseの時、タイルは必要な単位のみを表示します。時間が1分に満たない時は32.5sのように秒数を表示します。

推定残り時間 ¶

これはdurationタイルのサブクラスであり、同じプロパティをサポートします。

経過時間(秒)および完了率から、推定残り時間を表示します。完了率(パーセンテージ/割合)が設定されていない、または0の場合、タイルは?を表示します。 (Pythonエクスプレッションを使用してdurationタイルでも同じことができますが、これは便宜上用意されています)。

`type`	string	`est_remaining`
`percent_complete`	number	パーセンテージ(0.0～100.0)による完了率。
`fraction_complete`	number	小数(0.0～1.0)による完了率。
`value`	number	経過時間(秒)。

パス ¶

タイルはtextのサブクラスであり、同じプロパティをサポートします。

テキストを明確なファイルパスとしてフォーマットします。現在のところ、このタイルはパス(ファイル名)の最後のコンポーネントのみを太字で表示します。

{
    "type": "path",
    "label": "Path",
    "value": "/foo/bar/baz",
    "text_size": "large",
    "filename_weight": 900
}

`type`	string	`path`
`value`	string	フォーマットするパス文字列。
`filename_weight`	font weight	パスの最後のセグメントに使用するフォントウェイト。

サイズ ¶

数値のリストを値として受け取り、それらを寸法としてフォーマットします(1920 x 1080など)。タイルはtextのサブクラスであり、同じプロパティをサポートします。

{
    "type": "size",
    "label": "Size",
    "value": [100, 200],
    "text_size": "xlarge"
}

`type`	string	`size`
`value`	数値の配列	タイル内に表示する寸法。例えば、値が`[640, 480]`の場合、`640 x 480`として表示されます。

ロゴ ¶

画像を表示します。

{
    "type": "logo",
    "label": "Logo",
    "image_path": "$HFS/houdini/pic/karma_logo.svg",
    "image_size": [32, 32],
    "alignment": "center"
}

`type`	string	`logo`
`image_path`	string	表示する画像ファイルへのパス。
`stretch`	boolean	画像がタイルで使用できるスペースよりも小さい場合、画像を拡大し、タイルを埋めます(アスペクト比は維持します)。
`alignment`	alignment	タイル内に画像を配置する方法。
`image_size`	size	この幅と高さに画像のサイズを変更します(ピクセル単位)。
`tint_color`	color	指定した色相で画像を色付けします。 { "type": "logo", "image_path": "$HFS/houdini/pic/karma_logo.svg", "tint": "#ff00ff" } Tip これを黒に設定して、画像の彩度を下げることができます。

ロゴテキスト ¶

画像とテキストの文字列を表示します。画像が 最初に 配置され(image_alignmentを使用)、その後、残りのスペースにテキストが配置されます(text_alignmentを使用)。

{
    "type": "logo_text",
    "label": "Logo Text",
    "tint_color": "#000000",
    "tint_amount": 1.0,
    "top_margin": 5,
    "text_size": "small",
    "image_size": [32, 32],
    "gap": 5,
    "image_path": "$HFS/houdini/pic/karma_logo.svg",
    "value": "Karma"
}

`type`	string	`logo_text`
`image_path`	string	表示する画像ファイルへのパス。
`text`	string	画像の横に表示するテキスト。
`value`	string	`text`プロパティのエイリアス。
`text_alignment`	alignment	タイル内にテキストを配置する方法。
`image_size`	size	この幅と高さに画像のサイズを変更します(ピクセル単位)。
`image_alignment`	alignment	タイル内に画像を配置する方法。
`gap`	number	画像とテキストの間隔(ピクセル単位)。
`tint_color`	color	指定した色相で画像を色付けします。これを黒に設定して、画像の彩度を下げることができます。

チャートテーブル ¶

スプレッドシートのように、行と列に名前/値をペアにしたチャート および テーブルとして、データを表示します。

`type`	string	`"chart_table"`
`rows`	各種	これは通常、統計データから引き出すようにセットアップします。以下のように、様々な書式のデータを処理することができます。ラベルの文字列を値の数値にマッピングするオブジェクト: `{"foo": 1.0, "bar": 2.0, "baz": 3.0}` ラベル/値のペアのリスト: `[["foo", 1.0], ["bar", 2.0], ["baz", 3.0]]` ラベルの文字列のリスト: `["foo", "bar", "baz"]` 値の数値のリスト: `[1.0, 2.0, 3.0]` 異なる形式のデータがある場合、Pythonエクスプレッションを使用してサポートされている形式のいずれかに変更することができます。
`show_zero`	boolean	これが`true`の場合、テーブルは値が`0`の行を表示します。これが`false`の場合、値が`0`のアイテムは表示されません。
`chart`	chart	チャートタイルの`chart`プロパティを参照してください。
`total`	number	チャートタイルの`total`プロパティを参照してください。
`formatter`	formatter	テーブル内の値のフォーマッタ。
`decimal_places`	number	フォーマッタで小数点以下の桁数を設定するのに便利です。
`hide_when_empty`	boolean	これが`true`の場合、データを含まないタイルは自動的に非表示になります。デフォルトは`false`です。
`min_column_width`	number	テーブル内のセルの最小幅(ピクセル単位)。セルが狭くなりすぎるのを防ぎます。
`max_column_width`	number	テーブル内のセルの最大幅(ピクセル単位)。ラベルと値が離れすぎるのを防ぎます。
`row_height`	number	テーブル内のセルの高さ(ピクセル単位)。これが`0`または`null`の場合(デフォルト)、高さはフォントサイズから計算されます。
`column_gap`	number	列の間の水平方向のスペース(ピクセル単位)。
`item_decorations_visible`	boolean	各アイテムに関連付けたカラーチップまたはアイコンを表示するかどうか。
`value_key`	string	JSONPathによって検出された“アイテム”が辞書の場合、このキーを使用してアイテムの値を取得します。
`sorted`	boolean	これが`false`の場合(デフォルト)、アイテムは検出された順序で表示されます。これが`true`の場合、アイテムはソートされます。デフォルトでは、アイテムはラベルによってソートされます。値でソートするには、`sort_column`を`1`に設定します。デフォルトでは、最小から最大の順序でソートされます。ソート順を変更するには`reversed`を使用します。
`sort_column`	number	`sorted`が`true`で、これが`0`の場合、アイテムはラベルによってソートされます。これが`1`の場合、アイテムは値でソートされます。
`reversed`	boolean	`sorted`が`true`で、これが`true`の場合、アイテムは最大から最小の順序でソートされます。
`key_label_map`	文字列を文字列にマッピングするオブジェクト	このマッピングでアイテムのラベルがキーの場合、対応する値に“書き換え”られます。これは、統計から引き出したデータに、より“人が解読可能”なラベルを表示したい場合に便利です。
`included_keys`	文字列の配列	このリスト内のラベル付きアイテムのみ(`key_label_map`を適用する前)がテーブルに表示されます。
`excluded_keys`	文字列の配列	このリスト内のラベル付きアイテムは(`key_label_map`を適用する前)テーブルに表示されません。

コンテナタイル ¶

コンテナタイルはサブタイルのリストを受け取り、タイル内のレイアウトに配置します。デフォルトでは、コンテナタイルでは背景とラベルが非表示になっています。

コンテナタイルのタイプは以下の共通オプションをサポートします:

`items`	タイルオブジェクトの配列	このリストの各オブジェクトが、このタイル内で表示するタイルを指定します。
`item_style`	string	値はスタイルの名前です。コンテナは、独自の`style`プロパティを持たないすべてのサブタイルに、このスタイルを適用します。

ライン ¶

単一の行または列にサブタイルをレイアウトします。

`type`	string	`"line"`
`orientation`	orientation	`"horizontal"`の行または`"vertical"`の列にタイルをレイアウトするかどうか。

マトリックス ¶

均一な行と列にサブタイルをレイアウトします。このタイルでは、すべてのサブタイルが均一の幅と高さになります。このレイアウトでは、指定したmin_column_widthにフィットするタイルが各行に並び、次の行に移ります。

これは、同様のサイズのタイルのリスト(単一の数字の統計情報の集まりなど)を素早くレイアウトする際に便利です。より複雑なグリッドレイアウトには、代わりにgridコンテナを使用します。

{
    "type": "matrix",
    "min_column_width": 120,
    "row_height": 80,
    "items": [
        {"label": "First"},
        {"label": "Second"},
        {"label": "Third"},
        {"label": "Fourth"}
    ]
}

`min_column_width`	number	列の最小サイズ(ピクセル単位)。デフォルトは128です。サブタイルが狭すぎて読めなくなるのを防ぎます。
`max_column_width`	number	列の最大サイズ(ピクセル単位)。
`row_height`	number	行の高さ(ピクセル単位)。この値は設定する必要があります。
`orientation`	orientation	`"horizontal"`の場合、セルは行ごとに、左から右に入力されます。 `"vertical"`の場合、セルは列ごとに、上から下に入力されます。

グリッド ¶

ビンパッキングアルゴリズムを使用してタイルをレイアウトし、サブタイルを利用可能な幅に合わせます。

このレイアウトは、含まれるタイルを特定のグリッドサイズの倍数に“スナップ”し、きれいに並べます。

denseがtrueの時(デフォルト)、レイアウトはスペースがある場所にタイルを配置するため、タイルがJSONファイルで定義した順序とは異なる順序で表示されることに注意してください。

{
    "type": "grid",
    "cell_size": [80, 60],
    "items": [
        {"label": "First", "grid:cols":  2},
        {"label": "Second"},
        {"label": "Third"},
        {"label": "Fourth"},
        {"label": "Fifth", "grid:rows": 2},
        {"label": "Sixth"},
        {"label": "Seventh"}
    ]
}

グリッドコンテナのプロパティ ¶

`cell_size`	2つの数値の配列	グリッドのセルサイズを設定するのに便利なプロパティ(`col_width`および`row_height`)。
`col_width`	number	グリッド正方形の幅(ピクセル単位)。
`row_height`	number	グリッド正方形の高さ(ピクセル単位)。
`spacing`	number	タイル間の水平間隔と垂直間隔を同じ数値に設定するのに便利なプロパティ(`h_spacing`および`v_spacing`)。
`h_spacing`	number	タイル間の水平間隔(ピクセル単位)。
`v_spacing`	number	タイル間の垂直間隔(ピクセル単位)。
`dense`	boolean	前のタイルがレイアウト内に残した空きスペースを、後のタイルで埋めるかどうか。デフォルトは`true`です。
`stretch`	boolean	これが`true`で、利用可能な水平スペースが列幅の倍数ちょうどでない場合、スペースが埋まるようにタイルが引き伸ばされます。デフォルトは`true`です。
`max_cols`	number	レイアウト内の列の最大数(`"horizontal"`方向の使用時)。 `grid`タイルのこのプロパティは、レンダリング統計情報オーバーレイのテンプレートでタイルレイアウトを制御するのに便利です。レンダリング統計情報サイドバーのテンプレートでは、利用可能な水平スペースが自動的に埋められるため、これを使用することはできません。

グリッド内のタイルのプロパティ ¶

gridタイル内のタイルの以下のプロパティは、タイルのレイアウト方法に影響を与えます。

grid:cols

number

タイルが広がる列の数。デフォルトは1です。

grid:rows

number

タイルが広がる行の数。デフォルトは1です。

grid:pos

2つの数値の配列

タイルがフィットする場所にレイアウトするのではなく、特定のグリッド座標にタイルを“ピン留め”します。その他のタイルが、“ピン留めされた”タイルの周囲のスペースを埋めます。

水平座標が負の場合、使用できるスペースの右端から逆方向に数えます。例えば、[-1, 0]はタイルを右上コーナーにピン留めします(タイルの幅が1単位であると想定)。

Tip

colsおよびrowsを使用してグリッド単位でサイズを指定するのではなく、widthおよびheightを使用してサブタイルの正確なサイズを指定することも可能ですが、その場合はタイルがきれいに並びません。

特殊なプロパティのタイプ ¶

通常のJSONデータタイプ(string、number、boolean、null、object、array)に加えて、値の解釈が特殊なプロパティもあります:

Color

これは次のいずれかになります:

"#rrggbb"や"#rrggbbaa"形式のWebスタイルの“HEXカラー”("#808080"など)、または"white"、"black"、"transparent"といった名前を含む文字列。
[r, g, b]または[r, g, b, a]のような浮動小数点の配列([1.0, 0.6, 0.0, 0.5]など)。
グレースケール値として解釈される、単一の浮動小数点(0.7は[0.7, 0.7, 0.7]と同じです)。

Text size

フォントサイズを示す数字(ピクセル単位)、またはxsmall(またはx-small)、small、medium、large、xlarge(またはx-large)、hugeのいずれか。

Font weight

ウェイト値(400または700)またはウェイト名("thin"、"extralight"、"light"、"normal"、"demibold"、"bold"、"extrabold"、"black"のいずれか)。フォントファミリーによっては使用できないウェイトもあることに注意してください。

Margins

これは次のいずれかになります:

左、上、右、下の余白(ピクセル)を示す4つの数値の配列。
水平および垂直の余白(ピクセル)を示す2つの数値の配列。
すべての辺の余白(ピクセル)を示す単一の数字。

Brush

現在、これはカラータイプと同じです。

Edge

"top"、"left"、"right"、"bottom"のいずれかの文字列値。

Alignment

left、rightまたはhcenter、および/または、top、bottomまたはvcenterの組み合わせを含むスペース区切りの文字列。

hcenter vcenterの意味でcenterを使用することができます。
また、topleft、topright、bottomleft、bottomrightを使用したり、n、nw、e、seなどのコンパス方向も使用できます。

Orientation

"horizontal"または"vertical"のいずれか。

数値フォーマッタ ¶

これがオブジェクトの場合、"type"キーはフォーマッタのタイプを指定する文字列、その他のキーはフォーマッタを設定する引数でなければなりません。これが文字列の場合、デフォルト設定によりフォーマッタのタイプを指定します。

以下のフォーマッタを使用できます:

number

以下のオプションを持つ、汎用的な数値フォーマッタ:

decimal_places(number)

小数点以下をこの桁数に丸めます。デフォルトは2です。

auto_decimal(number)

decimal_placesが0で、この数値が0でない場合、値が1.0未満であれば、フォーマッタは小数点以下をこの桁数に丸めます。デフォルトは1です。

通常は整数を表示したいが、0.5などの数値を単に0と表示したくない場合に使用します。

whole_weight(string)

数字の整数部のためのフォントウェイト。

fraction_weight(string)

数字の小数部のためのフォントウェイト。

brief(boolean or string)

"always"またはtrue: フォーマッタは常に数値を省略します。
"never"またはfalse: フォーマッタは決して数値を省略しません。
"auto": フォーマッタは、999より大きい数値のみ省略します。

デフォルトは"auto"です。

brief

これは、briefがtrueに設定されたnumberと同じです。

memory/bytes/disk

バイト数専用の単位の接尾辞が付いたbriefフォーマッタ。

percent

小数値(0.5など)をパーセンテージ(50%など)としてフォーマットします。decimal_placesオプションをサポートし、デフォルトは1です。

duration

秒を、時間、分、秒としてフォーマットします。

long(boolean)

これがtrueの場合、フォーマッタは常に時間、分、秒を表示します。

チャートタイプ ¶

chartやchart_tableなど一部のタイルタイプは、“チャート”(数値や複数の数値から成る小さい視覚的表現)を表示します。これらのタイルでは、chartキーを使用してチャートをセットアップできます。

chartの値が文字列の場合、チャートタイプを指定します(デフォルト値を使用)。chartがオブジェクトの場合、typeキーがチャートタイプを指定し、チャートタイプによっては他のキーでオプションを設定できる場合もあります。

親タイルのチャート内に表示される実際の値を設定することができます(chartタイルタイプのvalueまたはvaluesプロパティを使用するなど)。

便宜上、チャートを表示するタイルタイプには、多くの場合チャートのプロパティに対応する独自のプロパティが含まれています。データからプロパティを設定できるため、 使用できる場合はタイルプロパティを使用 することをお勧めします。

すべてのチャートタイプには、以下の共通キーがあります:

`type`	string	チャートタイプを設定します。
`total`	number	チャート空間の最大値。例えば、ドーナツチャートの`total`が`1.0`とすると、`0.25`の値は25%を埋める弧を描画します(空間を使用できる場合)。棒グラフの`total`が`700`とすると、`70`の値はグラフの高さの1/10の棒を描画します。 `total`を指定しない場合、チャートタイプによって動作が異なります。デフォルトの合計があるチャートタイプもあれば、値から合計を計算するチャートタイプもあります(合計値を使用したり、最大値を合計として使用するなど)。詳細は、以下の個別のチャートタイプを参照してください。
`color`	color	チャートのアイテムに使用するカラー。チャート内のすべてのアイテムで同じカラーを使用するように設定します。
`colors`	colorの配列	チャートのアイテムに使用するカラーのセット。チャート内にカラーよりも多くの値がある場合、カラーがループします。
`monochrome`	boolean	これが`true`の場合、チャートは、チャートカラーを循環させるのではなく、カラースキームに基づく単一のカラーですべてのアイテムに色を付けます。
`track_visible`	boolean	チャートの値の背後に薄く“トラック”を描画するかどうか。チャートタイプによって“トラック”の描画方法は異なります。
`track_color`	color	トラックの描画に使用するカラー。
`track_alpha`	number	デフォルトのトラックカラーの不透明度を0.0～1.0で設定します。明示的な`track_color`を指定する場合、そのカラーのアルファチャンネルは上書きされます。デフォルトは`0.25`です。
`square`	boolean	これが`true`の場合、チャートはスクエア(1:1)のアスペクト比を維持し、スペースを埋めるために引き伸ばすことはしません。デフォルトは`false`です。 Note ドーナツチャートや円グラフは、常にスクエア(1:1)のアスペクト比で描画されます。
`alignment`	alignment	`square`が`true`の場合、これはスペース内でのチャートの配置を制御します。

積み上げドーナツ ¶

円弧を“積み上げ”て値を表示します。

totalを指定しない場合、チャートは値の合計を使用します。

`type`	string	`stacked_donut`
`pen_width`	number	円弧の幅。これはチャートサイズの割合であり、ピクセルではありません(幅はタイルサイズでスケールします)。デフォルトは`0.1`です。
`rounded`	boolean	両端が丸い円弧を描画します。これがfalseの場合、両端は平らになります。デフォルトは`true`です。
`clockwise`	boolean	正の値の円弧は時計回りに進みます。デフォルトは`true`です。
`gap_angle`	number	チャート範囲の開始と終了の間に、この度数のギャップを挿入します。
`start_angle`	number	チャート範囲は、視覚的にこの絶対角度で始まります(`0`が右側のエッジ、`90`は上側のエッジなど)。`gap_angle`が`0`より大きい場合、実際の開始はこの角度からオフセットされます。
`sweep`	number	チャート範囲は、視覚的にこの度数の長さになります。デフォルトは`360`です。`gap_angle`が`0`より大きい場合、実際の長さはこの角度からオフセットされます。
`spacing`	number	積み上げる円弧の間にこの度数のスペースを挿入します。デフォルトは`0`です。このプロパティを使用している場合、`rounded`を`false`にすることをお勧めします。

円 ¶

これはstacked_donutと同じですが、円弧ではなくパイの一切れのようなセグメントを表示します。

type

string

pie

同心円のドーナツ ¶

別々の同心円の円弧として、値を表示します。

totalを指定しない場合、チャートは値の 最大値 を使用します。

このチャートタイプは、stacked_donutと同じプロパティをサポートしますが、以下の違いがあります:

`type`	string	`concentric_donut`
`spacing`	number	同心円の円弧の間隔を0.0～1.0( チャートサイズの割合 )で指定します。デフォルトは`0.025`です。

セグメント化されたドーナツ ¶

このチャートタイプは合計を使用しません。代わりに、整数のsegment_countの割合としてvalueが表示されます。

`type`	string	`segmented_donut`
`segment_count`	number	表示するセグメント数。

セグメント化された棒 ¶

このチャートタイプは合計を使用しません。代わりに、整数のsegment_countの割合としてvalueが表示されます。

`type`	string	`segmented_bar`
`orientation`	orientation	セグメントを`horizontal`または`vertical`のどちらに並べるか。デフォルトは`horizontal`です。
`segment_count`	number	表示するセグメント数。
`analog`	boolean	これがtrueで、`value`が2つの整数の間である場合、対応するセグメントは小数部の値の分だけ“明るく”なります。例えば、値が`1.25`の場合、1つ目のセグメントは完全に不透明で、2つ目のセグメントは25%の不透明度で描画されます。デフォルトは`true`です。
`reversed`	boolean	trueの場合、左から右でなく、右から左にセグメントを埋めていきます。
`spacing`	number	セグメント間のギャップのサイズ(ピクセル単位)。デフォルトは`1`です。

選択 ¶

segmented_barと似ていますが、valueは いくつの セグメントが描画されるかではなく、どのセグメントが描画されるかを設定します。最初のセグメントには0の番号が付けられます。タイル上に複数のvaluesを指定すると、チャートはすべての対応するセグメントを“オンにします”。

type

string

choice

segment_style

string

セグメントのビジュアルで、rectangle、circle、boxのいずれか。デフォルトはrectangleです。

棒 ¶

棒グラフとして値を表現します。

totalを指定しない場合、チャートは値の 最大値 を使用します。

`type`	string	`bar`
`orientation`	orientation	棒の方向で、`horizontal`または`vertical`。デフォルトは`vertical`です。
`centered`	boolean	“ゼロ”値がチャート領域の中心にきます。これは、負の値を示すのに便利です。
`spacing`	number	棒の間のギャッのサイズ(ピクセル単位)。デフォルトは`1`です。

折れ線 ¶

折れ線グラフとして値を表現します。

totalを指定しない場合、チャートは値の 最大値 を使用します。

`type`	string	`line`
`dot_radius`	number	値のポイントを示すドットの半径(ピクセル単位)。これを`0`に設定するとドットが非表示になります。

面 ¶

lineと似ていますが、ポリラインではなく、塗りつぶされたポリゴンで描画されます。

type

string

area

概要 ¶

構造 ¶

JSONPathを使用してレンダリング統計情報から値を抽出する ¶

プロパティをJSONPathにマッピングする ¶

Pythonエクスプレッション ¶

JSONPathヘルパー ¶

テンプレートをテストする ¶

Tipsとメモ ¶

共通のタイルプロパティ ¶

スタイリング ¶

タイルタイプ ¶

テキスト ¶

数値 ¶

チャート ¶

時間 ¶

推定残り時間 ¶

パス ¶

サイズ ¶

ロゴ ¶

ロゴテキスト ¶

チャートテーブル ¶

コンテナタイル ¶

ライン ¶

マトリックス ¶

グリッド ¶

グリッドコンテナのプロパティ ¶

グリッド内のタイルのプロパティ ¶

特殊なプロパティのタイプ ¶

数値フォーマッタ ¶

チャートタイプ ¶

積み上げドーナツ ¶

円 ¶

同心円のドーナツ ¶

セグメント化されたドーナツ ¶

セグメント化された棒 ¶

選択 ¶

棒 ¶

折れ線 ¶

面 ¶

SolarisとKarma

USD ¶

ジオメトリ ¶

レイアウト ¶

ルック開発 ¶

Karmaユーザガイド ¶

Karmaの基本とワークフロー ¶