🖼

【DaVinci Resolve】インスペクタに画像を表示する方法

2025/01/19に公開

まえがき

こんにちは。火注ゆかなです。
今年の冬はインフルエンザの流行が凄いですね。
何事も身体が資本ですし、ちゃんと栄養と睡眠を摂って、マスクやうがい手洗いして感染予防に努めましょう。

さて、今回はタイトルの通りです。
インスペクタ欄に画像を表示する方法について解説します。こんな感じで。

We Suck Less フォーラムで投稿されてるこちらを参考にしました。
https://www.steakunderwater.com/wesuckless/viewtopic.php?p=35596

上記のトピックによるとLabelControlで HTML を記述して表示することができます。
なので<img>タグで画像も表示できる、というのが正しいですね。

ちょっとした注意点も踏まえながらやり方を説明していきます。

LabelControl で HTML 表示をする方法

今回はユーザーコントロール(マクロ)で実装していきます。

HTML の記述箇所

HTML はLabelControlのコントロール名に記述すると反映されます。
コントロールを編集画面の名前欄がコントロール名です。ここに入力すればOK。
とりあえず<img>タグで適当な画像を表示してみてください。
src属性に画像ファイルパスを入力)

<img src="I:/Image.png" width="100">


ノードを右クリックからコントロールを編集をクリック

コントロールを編集画面の名前に HTML を記述(入力はLabelControlにしておくこと)

さて、<img>タグで画像を表示するようにしてみましたが、これだけだと上手くいきません。
画像が上手く表示されないのはラベルが 1 行分しか表示しないからです。画像全体を表示するには高さが足りません。

画像は表示されているが見切れてしまう

画像の見切れ対策

対策としてコントロールに以下の属性を追加し、複数行表示できるように修正します。

LBLC_MultiLine = true,    -- ラベルの複数行表示

コントロール属性はテキストエディタで編集して追加します。
ノードをCtrl+C等でコピーし、テキストエディタに貼り付けると下記のようになります。

{
    Tools = ordered() {
        Text1 = TextPlus {
            CtrlWZoom = false,
            Inputs = {
                GlobalOut = Input { Value = 2355, },
                Width = Input { Value = 1920, },
                Height = Input { Value = 1080, },
                UseFrameFormatSettings = Input { Value = 1, },
                ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
                LayoutRotation = Input { Value = 1, },
                TransformRotation = Input { Value = 1, },
                Softness1 = Input { Value = 1, },
                Font = Input { Value = "Open Sans", },
                Style = Input { Value = "Bold", },
                VerticalJustificationNew = Input { Value = 3, },
                HorizontalJustificationNew = Input { Value = 3, }
            },
            ViewInfo = OperatorInfo { Pos = { 55, 16.5 } },
            UserControls = ordered() {  -- ユーザーコントロール一覧
                HTMLLabel = {  -- HTML 表示するための ラベル
                    LINKS_Name = "<img src=\"I:/Image.png\" width=\"100\">",
                    LINKID_DataType = "Number",
                    INPID_InputControl = "LabelControl",
                    INP_Integer = false,
                    INP_SplineType = "Default",
                    LBLC_DropDownButton = false,
                    INP_External = false,
                },
            }
        }
    },
    ActiveTool = "Text1"
}

これにLBLC_MultiLineを追記します。

add_attr_multiline.setting
{
    Tools = ordered() {
        Text1 = TextPlus {
            CtrlWZoom = false,
            Inputs = {
                GlobalOut = Input { Value = 2355, },
                Width = Input { Value = 1920, },
                Height = Input { Value = 1080, },
                UseFrameFormatSettings = Input { Value = 1, },
                ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
                LayoutRotation = Input { Value = 1, },
                TransformRotation = Input { Value = 1, },
                Softness1 = Input { Value = 1, },
                Font = Input { Value = "Open Sans", },
                Style = Input { Value = "Bold", },
                VerticalJustificationNew = Input { Value = 3, },
                HorizontalJustificationNew = Input { Value = 3, }
            },
            ViewInfo = OperatorInfo { Pos = { 55, 16.5 } },
            UserControls = ordered() {  -- ユーザーコントロール一覧
                HTMLLabel = {  -- HTML 表示するための ラベル
                    LINKS_Name = "<img src=\"I:/Image.png\" width=\"100\">",
                    LINKID_DataType = "Number",
                    INPID_InputControl = "LabelControl",
                    INP_Integer = false,
                    INP_SplineType = "Default",
                    LBLC_DropDownButton = false,
                    INP_External = false,
                    LBLC_MultiLine = true,  -- ←ラベルの複数行表示
                },
            }
        }
    },
    ActiveTool = "Text1"
}

編集したテキストをコピーし、Fusionページ上の元々のノードを削除して貼り付けます。
これで無事に画像全体が表示できました。

画像全体が表示されるようになった

HTML を効率良く記述する

今回はコントロールを編集画面から HTML を記述しましたが、流石に 1 行だけの入力欄に記述するのは視認性がよくありません。
テキストエディタにコピペすると、コントロール名はLINKS_Name属性で設定していることがわかったと思います。

しかし、テキストエディタで記述しようとすると"(ダブルクォーテーション)を記述するために一々\(バックスラッシュ)を入れるのは面倒だと感じることでしょう。私もそう思います。

幸いなことに Lua では[[ ]](長括弧)で囲めばリテラル文字列として扱われます。
新規に記述する際はエスケープシーケンスを気にする必要はなく、下記のようにスッキリ記述可能です。

    HTMLLabel = {  -- HTML 表示するための ラベル
        LINKS_Name = [[<img src="I:/Image.png" width="100">]],  -- コントロール名に HTML を記述
        LINKID_DataType = "Number",
        INPID_InputControl = "LabelControl",
        INP_Integer = false,
        INP_SplineType = "Default",
        LBLC_DropDownButton = false,
        INP_External = false,
        LBLC_MultiLine = true,  -- ←ラベルの複数行表示
    },

スクリプトから HTML 内容を更新する

一度表示した内容を途中で変更したい場合もあるでしょう。
しかし、その度にテキストエディタで編集→コピペしたり、コントロールで編集画面を開くのは億劫ですし、それでは自動化ができません。

こういう場合はSetAttrs()メソッドでINPS_Name属性を変更すればOKです。
例えば、画像の幅を 100 → 300 px に変更したい場合、コンソールなどで下記のコードを実行してwidth属性を変更した HTML を再設定します。

--[[ 
    コンソールなどで下記の 2 行を実行すると HTML 表示が更新される
    HTMLLabel の部分は HTML 表示するコントロールIDで置き換えること
]]
tool = ActiveTool   -- アクティブノード取得
tool.HTMLLabel:SetAttrs({INPS_Name=[[<img src="I:/Image.png" width="300">]]})


画像サイズを変更して大きくした

スライダーなどの値に応じてリアルタイムで更新はできる?

スライダーの値に応じた画像をリアルタイムで変更するように HTML を自動更新する……ということは、ユーザーコントロール(そしてマクロ)では不可能です。
コントロールの値ならエクスプレッションで連動させることはできますが、ラベルは値ではないのでエクスプレッションでは変更できず、HTML はラベル部分に記述しているので無理です。

リアルタイムでなければButtonControlで 1 クリックで変更できるようにする、スクリプトで一括変更することは可能です。

どうしても「コントロールの値を変更したときに〇〇という処理をさせたい」のであれば Fuse (プラグイン)なら可能なので、頑張って自作してください。
(一応「一定周期でコントロールの値を確認してそれを HTML に反映する」という監視スクリプトも作れるかもしれませんが、処理負荷や汎用性を考えると現実的ではありません)

表示可能範囲を拡げる

インスペクタパネル上のコントロールは左側にラベル用の空間が確保されています。
そのため、コントロールの表示範囲は画像の赤線より右側だけになっています。
(なお、LabelControlの表示内容はコントロール側に表示されます)

ラベル用の空間があるのでコントロールの表示範囲は赤線より右側のみ

ラベルは赤線を基準に右寄り、コントロールは赤線を基準に左寄りで統一されているので見やすいレイアウトですが、インスペクタの幅いっぱいにコントロールを表示したい場合もあるかもしれません。
そういう場合はIC_NoLabel属性でラベル表示を消すことができます。
LabelControlの場合は赤線を超えて左寄りになります)

IC_NoLabel = true,    -- ラベル非表示

ラベル表示を消すとインスペクタの幅いっぱいにコントロールが表示されるようになります。
試しに HTML 表示したLabelControlと、SliderControlでラベル表示・非表示した場合を確認すると以下のようになります。

nolabel_show_compare.settings
{
    Tools = ordered() {
        Text1 = TextPlus {
            CtrlWZoom = false,
            Inputs = {
                GlobalOut = Input { Value = 2355, },
                Width = Input { Value = 1920, },
                Height = Input { Value = 1080, },
                UseFrameFormatSettings = Input { Value = 1, },
                ["Gamut.SLogVersion"] = Input { Value = FuID { "SLog2" }, },
                LayoutRotation = Input { Value = 1, },
                TransformRotation = Input { Value = 1, },
                Softness1 = Input { Value = 1, },
                Font = Input { Value = "Open Sans", },
                Style = Input { Value = "Bold", },
                VerticalJustificationNew = Input { Value = 3, },
                HorizontalJustificationNew = Input { Value = 3, }
            },
            ViewInfo = OperatorInfo { Pos = { 55, 16.5 } },
            UserControls = ordered() {
                HTMLLabel = {   -- 通常(ラベルあり)の場合
                    LINKS_Name = "<img src=\"I:/Image.png\" width=\"100\">",
                    LINKID_DataType = "Number",
                    INPID_InputControl = "LabelControl",
                    INP_Integer = false,
                    INP_SplineType = "Default",
                    LBLC_DropDownButton = false,
                    INP_External = false,
                    LBLC_MultiLine = true,
                },
                HTMLLabel2 = {  -- ラベル非表示の場合
                    LINKS_Name = "<img src=\"I:/Image.png\" width=\"100\">",
                    LINKID_DataType = "Number",
                    INPID_InputControl = "LabelControl",
                    INP_Integer = false,
                    INP_SplineType = "Default",
                    LBLC_DropDownButton = false,
                    INP_External = false,
                    LBLC_MultiLine = true,
                    IC_NoLabel = true,         -- ←ラベル非表示
                },
                TestSlider = {  -- 通常のコントロールの場合
                    LINKS_Name = "スライダー",
                    LINKID_DataType = "Number",
                    INPID_InputControl = "SliderControl",
                    INP_Integer = false,
                    INP_SplineType = "Default",
                },
                TestSlider2 = {  -- 通常のコントロールでラベル非表示の場合
                    LINKS_Name = "スライダー",  -- ←IC_NoLabel が有効なので表示されない
                    LINKID_DataType = "Number",
                    INPID_InputControl = "SliderControl",
                    INP_Integer = false,
                    INP_SplineType = "Default",
                    IC_NoLabel = true,         -- ←ラベル非表示
                }
            }
        }
    },
    ActiveTool = "Text1"
}


ラベル非表示にしたので赤線を超えてインスペクタ幅いっぱいに表示された

注意点

機能するタグや属性に制限がある

本記事のコード例では<img>タグを使って画像表示をしましたが、実はwidth属性で割合指定ができません。<img src="I:/Image.png" width="100%">と記述すると表示されなくなります。画像を表示する場合はピクセル指定のみとなります。

他にも<a>タグでハイパーリンクを設定しても指定URLへは飛べませんし、<button><canvas>タグに至っては HTML 表示もされません。
<a>タグでのハイパーリンクは左クリックしても跳びませんが、右クリックすると URL をコピーできるようなので使い道はあるかも?)

その一方で<table>タグによる表形式の表示や、<span>タグでの文字の装飾(文字色、太字 etc)などはできたので、基本的に何らかのアクションを返すタグは使えず、表示形式を指定するだけのタグは機能すると思われます。

私は HTML については詳しくありませんし全て試すには時間がかかりすぎるので、どのタグ・属性が機能するかは各自で確認してください。

ちなみに<img>タグで gif アニメーションを表示すると静止状態で表示されました。動きません。

LBLC_MultiLine 属性の設定方法の制限

コントロールの属性を変更する方法はいくつかあります。

  1. コントロールを編集画面で設定
  2. テキストエディタにコピペして編集
  3. スクリプトでTool.Input:SetAttrs({ 属性名1 = 値, 属性名2 = 値, ...})を実行

LBLC_MultiLine属性はこの内の 2 番目の「ノードをテキストエディタで編集」する方法じゃないと反映できないようです。

1 番目のコントロールを編集画面ではそもそも項目がないので設定できません。
3 番目のSetAttrs()メソッドでは設定するべき属性名が確認できません。
コントロールの属性一覧はGetAttrs()メソッドで確認可能です。
しかし、GetAttrs()メソッドで出力した属性一覧の中にLBLC_MultiLineに該当する属性名はありません。
一応、該当しそうなパターンの属性名を指定してSetAttrs()メソッドを実行してみましたが全然ダメでした。

また、テキストエディタで編集した内容を再度Fusionページに貼り付け直す場合、元のノードを削除してから貼り付ける、という手順で置き換える必要があります。
ノードを右クリック→設定をペーストでは属性の上書きはできないようです。

以上のことから、現状だとLBLC_MultiLine属性はスクリプトで動的に変更することはできない(あるいは難しい)と考えた方が良いでしょう。
まあ、この属性に関しては一度設定しておけば十分なので、そこまで問題にはならないとは思います。

あとがき

インスペクタに HTML を表示させる方法については以上となります。
そこまで複雑じゃないしサクッと書き終わるかと思いきや、書き始めてみると結構長くなってしまいました。順序立てて書こうとすると、普段から省略していることの多さにビックリします。

HTML 表示についてはやや制限はありますが、画像表示の他にもエラー表示の文字色を変えて目立つようにしたりできるので結構役立つのではないでしょうか?

それでは、この記事が皆様のお役に立てば幸いです。

Discussion