ホーム>プログラミング関連>その他のソースコード
ダウンロード

カードモッド3

ホーム アシスタント フロントエンドのさまざまな要素に CSS スタイルを適用できます。

インストール中

HACS を使用してインストールするか、このガイドを参照してください。

パフォーマンスの向上

Card-Mod は lovelace リソースとしてインストールできますが、一部の機能は代わりにフロントエンド モジュールとしてインストールすることで大きなメリットが得られます。

これを行うには、 configuration.yamlファイルに以下を追加し、Home Assistant を再起動します。 

 frontend :
  extra_module_url :
    - /local/card-mod.js

card-mod.jsインストールした場所に応じてそのパスを調整する必要があります。 HACS 経由でインストールした場合、これはおそらく/hacsfiles/lovelace-card-mod/card-mod.jsです。

HACS によって自動的に追加されたリソース定義は、 extra_module_urlを追加した後でもそのまま保持できます。

クイックスタート

  • GUI エディターでカードを開きます
  • 下部にある「コードエディターを表示」ボタンをクリックします。
  • コードの最後に以下を追加します。 
 card_mod :
  style : |
    ha-card {
      color: red;
    }

入力すると、カードのテキストが赤くなるのがわかります。
また、[SHOW VISUAL EDITOR] ボタンの近くに小さなブラシ アイコンが表示されるはずです。これは、このカードにビジュアル エディターには表示されないカード変更コードが含まれていることを示します。

クイックスタート

使用法

スタイリングカード

カードのスタイルは、カード構成に以下を追加することで設定されます。 

 card_mod :
  style : <STYLES>

最も単純な形式の場合、 <STYLES>はカードの<ha-card>要素に挿入される CSS の文字列です。

注:card-mod は、ha-card 要素を含むカードでのみ機能します。これには、表示できるほぼすべてのカードが含まれますが、 conditional 、 entity_filter 、 vertical-stack 、 horizontal-stack 、 gridは含まれません。

ただし、これらのカードには、card-mod が機能する他のカードが含まれていることが多いことに注意してください。
付属のカードのパラメータを指定する方法については、各カードのマニュアルを参照してください。

スタイルを設定できる最下位の要素は<ha-card>です。

Chrome DOM インスペクターの ha-card 要素のスクリーンショット

はカード

ヒント: ホーム アシスタント テーマでは CSS 変数が使用されます。これらは両方とも Card-MOD で設定および使用できます。先頭に 2 つのダッシュが付けられます。 

 card_mod :
  style : |
    ha-card {
      --ha-card-background: teal;
      color: var(--primary-color);
    }

エンティティ、バッジ、要素のスタイリング

entitiesとglanceカードでは、各エンティティにオプションがあります。これらの要素は、 card_modパラメーターをエンティティ構成に追加することで個別にスタイル設定できます。

このような場合、スタイルはshadowRootに挿入され、最下位の要素は:hostを介してアクセスされます。

これはpicture-elementsカード内のバッジおよび要素の表示にも当てはまります。 

 type : entities
entities :
  - entity : light.bed_light
    card_mod :
      style : |
        :host {
          color: red;
          }
  - entity : light.ceiling_lights
    card_mod :
      style : |
        :host {
          color: green;
        }
  - entity : light.kitchen_lights
    card_mod :
      style : |
        :host {
          color: blue;
        }

アイコンの変更

Card-Mod がインストールされている場合、 <ha-icon>要素 (たとえば、 entities 、 glanceやその他多くのカードで使用される) は、そのアイコンを CSS 変数--card-mod-icon (存在する場合) にある値に設定します。

また、CSS 変数--card-mod-icon-colorが存在する場合、アイコンの色をその値に設定します。これはエンティティの状態を無視しますが、 --card-mod-icon-dim noneに設定しない限り、引き続き薄暗くなります。 

- entity : light.bed_light
  card_mod :
    style : |
      :host {
        --card-mod-icon: mdi:bed;
      }

テンプレート

すべてのスタイルには、Home Assistant バックエンドによって処理される jinja2 テンプレートが含まれる場合があります。

また、card-mod は、次の変数をテンプレートで使用できるようにします。

  • config - カード、エンティティ、またはバッジの全体構成 - ( config.entity特に重要になる場合があります)
  • user - 現在ログインしているユーザーの名前
  • browser - ブラウザのbrowser_id (browser_modがインストールされている場合)
  • hash - 現在の URL の#の後に続くもの (これは最初の読み込み時にのみ考慮されます。動的に更新されません)

DOM ナビゲーション

Home Assistant は、Shadow DOM と呼ばれるものを広範囲に使用します。これにより、コンポーネント ( ha-cardやha-iconなど) を簡単に再利用できますが、CSS スタイルを適用しようとするといくつかの問題が発生します。

ブラウザの要素インスペクタでカードを調べているときに、「 #shadow-root (open) 」のような行を見つけたかもしれません (正確に何を表示するかはブラウザによって異なります)。その中の要素が、外側からのスタイル。

シャドウルート内の要素をスタイル設定するには、 style:文字列ではなく辞書にする必要があります。

辞書エントリごとに、変更されたquerySelector()関数を通じて 1 つまたは複数の要素を選択するためにキーが使用されます。エントリの値がそれらの要素に注入されます。

注: 変更されたquerySelector()関数は、セレクター内のドル記号 ( $ ) を#shadow-rootに置き換えます。

このプロセスは再帰的であるため、値は辞書になる場合もあります。 「 . 」(ピリオド) キーを押すと、現在の要素が選択されます。

例：

マークダウン カード内のすべての第 3 レベルのタイトル ( ### like this ) の色を変更し、背景も変更しましょう。

chrome の要素インスペクターでカードを見ると、次のようになります。

マークダウンカードダム

<ha-card>要素がベースであり、そこから<h3>に到達するには 1 つの#shadow-root経由する必要があることがわかります。その#shadow-rootは<ha-markdown>要素内にあるため、セレクターは次のようになります。 

 ha-markdown$

これにより、最初の<ha-markdown>要素が検索され、次にその中にあるすべての#shadow-root検索されます。

<ha-card>に背景を追加するには、キーを持つベース要素にスタイルを直接適用します。 

 .

これにより、最終的なスタイルが得られます。 

 card_mod :
  style :
    ha-markdown$ : |
      h3 {
        color: purple;
      }
    . : |
      ha-card {
        background: teal;
      }

DOM ナビゲーション

注: キューのセレクター チェーンは、スペースまたは " $ " で区切られて一度に 1 つの要素を検索します。
各ステップでは、最初に一致したもののみが選択されます。
ただし、チェーンの最後のセレクター (つまり、特定の辞書キー内) では、一致するすべての要素が選択されます。 $で終わるチェーンは便宜上の特別なケースであり、すべての要素のシャドウルートを選択します。

たとえば、次の例では、マップ カードの最初のマーカーのdiv要素が選択されます。 

 "ha-map $ ha-entity-marker $ div" : |

ただし、次のコードでは、マップ カード上のすべてのマップ マーカーの div 要素が選択されます ( ha-entity-marker $セレクターの最初のキーを終了し、 divの各結果内で新しい検索を開始するため)。 

 " ha-map $ ha-entity-marker $ " :
  "div" : |

注 2: 上記の注に続きます。ホーム アシスタントでは高度なロード順序の最適化が使用されているため、card-mod がha-entity-marker要素を探している時点でその要素が存在するかどうかは保証されません。もう一度鎖を断ち切ると: 

 " ha-map $ " :
  " ha-entity-marker $ " :
    "div" : |

そうすれば、card-mod は後でha-map $ポイントからの検索を再試行できるようになり、より安定した結果が得られる可能性があります。

要するに;物事が断続的に動作しているように見える場合は、チェーンをいくつかのステップに分割してみてください。

デバッグのヒント

DOM ナビゲーションは、最初の数回は正しく操作するのが難しいかもしれませんが、最終的にはコツを掴むことができます。

これを助けるために、ブラウザの要素インスペクターを使用して、card-mod がどのような手順を実行するかを確認できます。

  • 要素インスペクターを開き、ベース要素 (例: <ha-card> ) を見つけます。スタイルを指定したかどうかに関係なく、これには<card-mod>要素が含まれている必要があります。
  • <card-mod>要素が選択されていることを確認してください。
  • ブラウザのコンソールを開きます（Chrome では、Esc キーを押してコンソールとインスペクタを同時に開くことができます）。
  • $0.card_mod_inputと入力して Enter キーを押します。
    チェーンのステップに与えられたスタイル情報です。これが文字列の場合、チェーンの終端になります。オブジェクトの場合は、次のステに進むことができます。
  • $0.card_mod_childrenと入力して Enter キーを押します。
    これは、チェーンの次のステップにある<card-mod>要素のセットです。設定項目のvalue:の「card-mod」をクリックすると、インスペクター内のその<card-mod>要素が表示され、チェーンの残りの部分を検査し続けることができます。
  • $0.card_mod_parent使用して、チェーン内の<card-mod>要素の親を見つけることもできます。

もう少し詳しい情報については、問題が発生しているカードの設定で次の情報を使用できます。役に立つかもしれないし、役に立たないかもしれない。 

 card_mod :
  debug : true

<ha-card>要素のないカードのスタイル設定

<ha-element>を持たないカードでも、提供されているcustom:mod-cardカードを使用してスタイルを設定できます。

これはごく少数の場合にのみ必要であり、解決するよりも多くの問題を引き起こす可能性があります。

ほとんどの場合、カードに別のカードが含まれており、その場合は、そのカードにスタイルを適用する必要があります。

警告は十分です。

私は自分が何をしているのか知っています
 type : custom:mod-card
card :
  type : vertical-stack # for example
  ...
card_mod :
  style : |
    ha-card {
      ...
    }

mod-card は、背景と境界線を削除した<ha-card>要素を作成し、その中にカードを置きます。

他の例

私のテスト ケースはすべてtest/viewsディレクトリで入手できます。

docker でデモを実行するには、 testディレクトリに移動して以下を実行します。 

 docker-compose up

次に、 http://localhost:8125に移動し、ユーザー名devとパスワードdevを使用してログインします。

または、vscode devcontainer を使用してタスク「 Run hass 」を実行することもできます。

テーマ

カード MOD テーマの開発方法については、README-themes.md を参照してください。

発達

カスタム カードにカード MOD のスタイル機能を追加するには、README-developers.md を参照してください。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて