シンボル

すべての シンボルは、ビジュアライゼーションのさまざまな場所で使用できます。そのため、これらを変数またはテキストとして定義することが可能です。

ビジュアライゼーションにシンボルを出力するには、タグ [icon:SYMBOLPFAD] を直接テキスト内で宣言します。シンボルパスは、右クリックまたはCTRL+Cでシンボルライブラリからコピーできます。可能な限りMaterial Symbolsのみを選択してください。ビジュアライゼーションのスタイルが一貫するようにするためです。

シンボルライブラリ

すべての利用可能なシンボルは、コンテキストメニュー Visualisierung ▸ シンボル から呼び出し、検索できます。独自のシンボルセットをライブラリにインポートすることも可能です。手順は後述します。

注意: シンボルリストに表示される名前は、シンボルパスと一致しません。パスにシンボルセットが指定されていない場合、自動的にGlyphiconsセットが使用されます。

シンボルライブラリのフィルターは、登録されたタグも検索します。この挙動を希望しない場合は、フィルターを=で開始して名前のみを検索できます。

シンボルセット Material Symbols（標準）

この シンボルセットは完全に動的であり、シンボルのスタイルはビジュアライゼーションのデザインに応じて自動的に構成されます。さらに、シンボルがアクティブである必要がある場合、自動的に塗りつぶしシンボルが使用されます。ただし、すべてのシンボルに塗りつぶしバージョンがあるわけではありません。

スイッチ半径が 16ピクセル 以上または等しい場合、シンボルは自動的に丸められます。半径が 0px の場合、鋭いシンボルが使用されます。ただしエディタでは常に通常のシンボルが使用されます。

注意: ビジュアライゼーションを統一してデザインするためには、「Material Symbols」シンボルセットを使用することをお勧めします。

シンボルセット Material Animated

Material Symbolsの一部のシンボルは、値を表すためにアニメーション化されています。これらのシンボルには、シンボルの 構造のみがアニメーションされます。選択すると、さらに変数が有効になります。

シンボルセット Philips Hue

Philips Hueのシンボルは、Hueインターフェースを使用する場合に自由に使用できます。さらに、Home Assistant HASSコミュニティから追加のHueシンボルセットがあります。詳細はこの章の最後に記載されています。

シンボルセット 天気

このシンボルセットはビジュアライゼーションに天気シンボルを表示します。これらは、さまざまなインターフェースからシームレスにサポートされます。以下の章 Wetter-Icons を参照してください。

シンボルセット Legacy（旧バージョン）

レガシーサンボルセットには、古いビジュアライゼーションのすべてのシンボルが含まれています。新しいインターフェースの表示スタイルは同じままです。これらのシンボルは使用しないでください。新しいインターフェース向けに最適化されていないためです。

さまざまな古いシンボルは引き続きアニメーションされています:

  • legacy/door
  • legacy/door_2
  • legacy/lock
  • legacy/shutter
  • legacy/shutter_blinds
  • legacy/window
  • legacy/window_tilt

非表示シンボル

ビジュアライゼーション用の非表示シンボルもあります。これらは以下の章でさらに説明されています。

シンボルを呼び出すには、URLプレフィックスのみが必要です。

独自のシンボルセット

シンボルセットをプロジェクトにインポートすることができます。すべての シンボルセットはZIPファイルとして準備する必要があります。いくつかのサンプルデータをダウンロードできます:

プロのヒント: インポートに成功した後、シンボルセットを.antobjとしてエクスポートして、インポートを簡素化できます。右クリックでシンボルセットを選択し、エクスポートを選択します。

以下の規則は シンボルセットの構造と要件を定義しています。これらを慎重に読み、厳密に従ってください。

規則

  • プレフィックス
    • _、a–z、および 0–9のみを含めることができます。
    • 大文字は自動的に小文字に変換されます。
    • sys、src、または doc のような予約済み名称は無効です。
    • a–zの文字で始める必要があります。数字のみは許可されません。
    • 後置きのアンダースコア (_) は削除されます。
    • 3文字以上である必要があります。
    • 複数のアンダースコア (__) は単一のものに削減されます。
  • シンボル名
    • 自動的に小文字に変換されます。
    • 許可される文字は -、_、a–z、および 0–9 です。
    • 長い名前とプレフィックスは避ける必要があります。
    • プレフィックスは一意で、一度だけ使用する必要があります。
    • シンボルがシステムシンボルと同じ名前とプレフィックスを持っている場合、そのシンボルを置き換えることができます。
  • ファイル制限
    • クリーンアップ後の最大ファイルサイズ: 10 kB。大きいファイルは拒否されます。
    • SVGファイルはクリーンアップする必要があります:
      • 改行は自動的に削除されます。
      • 以下の要素が削除されます: <title>、<desc>、<script>、<image>、<style>、<foreignObject>。
      • 以下の属性が削除されます: style、fill、stroke、color、stop-color、flood-color、lighting-color。
      • 埋め込みスクリプト、画像、CSS、または外部リソースを含むアイコンは拒否されます。
      • スタイルに色やスタイルブロックが含まれている場合、インポートも拒否される可能性があります。
  • SVGヘッダー要件
    • viewBox、width、および heightを含む必要があります。可能な場合、欠落した値は自動的に補完されます。
    • xmlns="http://www.w3.org/2000/svg"名前空間を含む必要があります。欠落しているか不正な場合、自動的に補完されます。
    • アイコン名が正確に次元と一致しない場合、アイコンは拒否されます。
    • 次元は正方形である必要があります（幅 = 高さ）。標準: 24px。
    • 矛盾するスタイルや不適切な次元を避ける必要があります。
  • 一般
    • 悪く作成されたアイコンは表示を大幅に遅らせたり、エラーを引き起こしたりする可能性があります。
    • シンボルの著作権には必ず注意してください。
    • すべてのベクターは3桁の小数点以下に丸められます。

構造

  • iconset.iniファイルは、シンボルセットを識別するために必須です。
    • ZIPファイルのルートディレクトリまたはサブディレクトリに配置できます。
    • iconset.iniと小文字で記述する必要があります。
    • シンボルファイル名は大文字と小文字を区別しません。
  • インポートは自動的にSVGファイルを検索しません。
    • iconset.iniでアイコンフォルダを明示的に定義する必要があります（大文字と小文字を区別します）。
    • ZIPファイルテンプレートには icons/という名前のフォルダーが定義されています。
  • サブディレクトリ
    • icons/で定義されたフォルダ内のサブディレクトリはカテゴリとして機能します。
    • シンボル名はすべてのカテゴリを通じて一意である必要があります。
    • シンボルフォルダーの命名規則:
      • 最小限: 次元とファイル拡張子のみ（例: 24.svg)。
      • filled24.svgやround_filled_24.svgのようなバリエーションは有効です。
      • 複数の数字を含むファイル名（例: 24_48.svg) は無効です。
      • スタイルバリエーションは以下のように認識されます:
        • 塗りつぶし: filledまたはfillを含む必要があります。
        • 丸い: roundを含む必要があります。
        • 鋭角: sharpを含む必要があります。
        • 丸いと鋭角は組み合わせることができません。
      • 複数の規則が適用される場合、最後に認識されたファイルが使用されます（選択がランダムに見える可能性があります）。
  • その他の規則
    • 入れ子になったサブサブディレクトリは検索されません（これらはバックアップやオリジナルに使用できます）。
    • .svgでないファイルは無視されます。
    • シンボルフォルダー内には、tags.txtという名前のファイルを配置でき、追加のタグを検索に追加できます。
      • タグは,、;、または改行で区切ることができます。

特殊なシンボルセット

独自のシンボルセットと同様にインポートできるさまざまな特殊な シンボルセットもありますが、これらは上記の要件に従う必要はありません。

Hass Hue Icons

その一つはGibhubページのhass-hue-iconsです。これはHome Assistant HASSコミュニティから追加のHueシンボルセットであり、非商用プロジェクトのみで使用できます。このライブラリはCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Internationalライセンスに基づいているためです。そのため、Antcas Controlにはこのシンボルセットが同梱されていません。ただし、ZIPファイルhass-hue-icons-main.zipを使用してプロジェクトに新しいシンボルセットとして簡単にインポートできます。Githubウェブサイトのライセンス条項に注意してください。

ソース: https://github.com/arallsopp/hass-hue-icons.

PictogrammersのMaterial Design Icons

もう一つはPictogrammersからです。そのためには、ファイルmdi-###.jsonをZIPファイルに圧縮してインポートする必要があります。このファイルはブラウザの開発者コンソールで見つけてダウンロードできます。アウトラインシンボルと塗りつぶしシンボルを組み合わせようとしています。このライブラリはMaterial Symbolsとほぼ同じです。ただし、多くのコミュニティ拡張機能があります。他のシンボルセットをライブラリに統合したい場合は、お気軽にお問い合わせください。

ソース: https://pictogrammers.com/library/mdi/

サブページ