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

2025/01/19に公開
更新履歴
2025/7/3
コントロールの値に応じたリアルタイム更新方法について修正・該当記事へのリンク追加
ユーザコントロール以外だと HTML が機能しない点について追記



 まえがきこんにちは。火注ゆかなです。

今年の冬はインフルエンザの流行が凄いですね。

何事も身体が資本ですし、ちゃんと栄養と睡眠を摂って、マスクやうがい手洗いして感染予防に努めましょう。
さて、今回はタイトルの通りです。

インスペクタ欄に画像を表示する方法について解説します。こんな感じで。

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">]]})


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

 スライダーなどの値に応じてリアルタイムで更新はできる？以前は無理でしたが、Ver 20.0 からコントロールにINPS_ExecuteOnChange属性が追加され、これを利用してリアルタイム更新が可能になりました。

詳細はこちらの記事を参照してください。

https://zenn.dev/hitsugi_yukana/articles/hy_usercontrol_executeonchanged

 表示可能範囲を拡げるインスペクタパネル上のコントロールは左側にラベル用の空間が確保されています。

そのため、コントロールの表示範囲は画像の赤線より右側だけになっています。

（なお、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 属性の設定方法の制限コントロールの属性を変更する方法はいくつかあります。

コントロールを編集画面で設定
テキストエディタにコピペして編集
スクリプトでTool.Input:SetAttrs({ 属性名1 = 値, 属性名2 = 値, ...})を実行
LBLC_MultiLine属性はこの内の 2 番目の「ノードをテキストエディタで編集」する方法じゃないと反映できないようです。
1 番目のコントロールを編集画面ではそもそも項目がないので設定できません。

3 番目のSetAttrs()メソッドでは設定するべき属性名が確認できません。

コントロールの属性一覧はGetAttrs()メソッドで確認可能です。

しかし、GetAttrs()メソッドで出力した属性一覧の中にLBLC_MultiLineに該当する属性名はありません。

一応、該当しそうなパターンの属性名を指定してSetAttrs()メソッドを実行してみましたが全然ダメでした。
また、テキストエディタで編集した内容を再度Fusionページに貼り付け直す場合、元のノードを削除してから貼り付ける、という手順で置き換える必要があります。

ノードを右クリック→設定をペーストでは属性の上書きはできないようです。
以上のことから、現状だとLBLC_MultiLine属性はスクリプトで動的に変更することはできない（あるいは難しい）と考えた方が良いでしょう。

まあ、この属性に関しては一度設定しておけば十分なので、そこまで問題にはならないとは思います。

 ユーザコントロール以外は HTML が反映されないHTMLならLabelControl以外のラベル文字色の変更などもできますが、HTMLが動作するのはユーザコントロールのみで既存のコントロール（TextPlusノードならStyledTextやSize等）だとHTMLが上手く動作しないようです。

下記のようにSizeコントロールのラベル文字色を変更しようとしても素のHTML文がそのまま表示されます。
tool.Size:SetAttrs({INPS_Name=[=[<span style="color:red;">サイズ</span>]=]})    -- リテラル文字列の入れ子になるので [=[ ]=] と言う風に括弧の間に = を挟む


ラベル文字色を変えるはずの HTML が反映されない
HTMLで文字色を変更したりしたいならユーザコントロールを利用しましょう。

 あとがきインスペクタに HTML を表示させる方法については以上となります。

そこまで複雑じゃないしサクッと書き終わるかと思いきや、書き始めてみると結構長くなってしまいました。順序立てて書こうとすると、普段から省略していることの多さにビックリします。
HTML 表示についてはやや制限はありますが、画像表示の他にもエラー表示の文字色を変えて目立つようにしたりできるので結構役立つのではないでしょうか？
それでは、この記事が皆様のお役に立てば幸いです。