プロパティ
|
JavaScript
|
タイプ
|
説明
|
||
テキスト
|
text
|
string
|
ウィジェットに表示されるテキスト。
|
||
高さ
|
height
|
number
|
ラベルの高さ。デフォルトでは、このフィールドの値には 0.05 が設定されています (このフィールドを空にした場合も、このデフォルト値が設定されます)。
|
||
幅
|
width
|
number
|
ラベルの幅。
|
||
クラス
|
class
|
string
|
ウィジェットに割り当てられているクラス。
現時点では、次の CSS プロパティがサポートされています。
• font-family - フォントファミリを設定します
• color- フォントの色または塗りつぶしの色を設定します
• --text-stroke-color- color と似ていますが、フォントの色ではなく、フォントストロークの色を設定する点が異なっています
• --text-stroke-width - ストロークの幅を設定します
• font-weight - フォントの幅 (厚み) を設定します
• font-style
- フォントのスタイルを設定します (標準、斜体 (italic)、斜体 (oblique) など)
• background-color - ラベルの塗りつぶしの色を設定します
• text-decoration - 下線をサポートします
• border-color - ラベルを囲む境界線の色を設定します
• border-radius - イメージを囲む境界線のコーナーを丸めます
• border-style - ラベルを囲む境界線のスタイルを設定します
• border-width - ラベルを囲む境界線のストローク幅を設定します
• border - border-color、border-style、border-width を組み合わせます
• padding - ラベルテキストの外側にパディングを適用します
たとえば、「プロジェクト」枠の「スタイル」で「アプリケーション」をクリックし、以下のコードをエディタで入力します。
.my-label {
font-family: Century Gothic; color: black; --text-stroke-color: yellow; --text-stroke-width: 3px; font-weight: normal; font-style: italic; background-color: grey }
次に、3D ラベルの「クラス」フィールドに「my-label」と入力します。この値は、 > で追加されたコンテンツを参照します。
|
||
状態ベースのフォーマットを有効化
|
enableStateFormatting
|
boolean
|
ThingWorx で設定されている状態定義に基づいて、ウィジェットのフォーマットを設定することができます。
このチェックボックスをオンにすると、次のプロパティが表示されます。
• 依存フィールド
• 状態定義
たとえば、3D ラベルの「状態定義」の値が「error」になっている場合、そのラベルの色が赤になります。
|
||
依存フィールド
|
stateFormatValue
|
string
|
このプロパティは、「状態ベースのフォーマットを有効化」チェックボックスがオンになっている場合に表示されます。ThingWorx のスタイル定義と状態定義の詳細については、ThingWorx ヘルプセンターでスタイルと状態の定義を参照してください。
|
||
状態定義
|
stateFormat
|
boolean
|
このプロパティは、「状態ベースのフォーマットを有効化」チェックボックスがオンになっている場合に表示されます。ThingWorx のスタイル定義と状態定義の詳細については、ThingWorx ヘルプセンターでスタイルと状態の定義を参照してください。
|
||
フォントファミリー
|
fontFamily
|
string
|
フォントのスタイル。Arial、Times New Roman、Century Gothic などの有効なフォントファミリを入力します。デフォルトでは、Arial に設定されています。
|
||
フォントの色
|
fontColor
|
string
|
フォントの色。色の名前、16 進数値、または RGBA の値を入力します。たとえば、フォントの色を赤にする場合は、以下のいずれかを入力します。
• red
• #FF0000
• rgba(255, 0, 0, 1)
デフォルトでは、黒に設定されています。
|
||
フォント輪郭の色
|
fontOutlineColor
|
string
|
フォントの輪郭の色。色の名前、16 進数値、または RGBA の値を入力します。たとえば、ラベルの輪郭の色を赤にする場合は、以下のいずれかを入力します。
• red
• #FF0000
• rgba(255, 0, 0, 1)
デフォルトでは、白に設定されています。
|
||
スケール
|
scale
|
string
|
ラベルのスケール。
|
||
X 座標
|
x
|
number
|
X 軸上のラベルの位置。
|
||
Y 座標
|
y
|
number
|
Y 軸上のラベルの位置。
|
||
Z 座標
|
z
|
number
|
Z 軸上のラベルの位置。
|
||
X 回転
|
rx
|
number
|
X 軸を中心としたラベルの回転。
|
||
Y 回転
|
ry
|
number
|
Y 軸を中心としたラベルの回転。
|
||
Z 回転
|
rz
|
number
|
Z 軸を中心としたラベルの回転。
|
||
ビルボード
|
billboard
|
boolean
|
常にビューアに向かって、ウィジェットの中心を基準としてウィジェットを回転します。ウィジェットの位置は、画面に合わせて調整されます。
|
||
遮蔽
|
occlude
|
boolean
|
これを選択すると、ウィジェットのジオメトリが非表示になりますが、それと同時に、3D シーン内のウィジェットの背後に配置されているその他の拡張もすべて非表示なります。
そのため、非表示ウィジェットの位置に、背景またはカメラフィードが表示されます。このプロパティを使用して特定の拡張の周囲に配置されている 3D ジオメトリを非表示にすることにより、その拡張を強調することができます。
|
||
常に手前に表示
|
decal
|
boolean
|
3D シーン内のウィジェットジオメトリの深さに関係なく、そのウィジェットジオメトリが別の拡張上にオーバーレイされます。これを「はい」に設定すると、別の拡張によって 3D シーン内のウィジェットジオメトリが非表示になることはありません。通常、このプロパティは、常に表示しておく必要があるラベルやセンサーで使用することができます。
|
||
不透明度 (1 不透明 - 0 透明)
|
opacity
|
number
|
0 から 1 までの数値を設定します。この数値により、オブジェクトの透明度レベルを制御します。0 を設定するとオブジェクトが完全に透明になり、1 を設定すると完全に不透明になります。
|
||
ピボット
|
pivot
|
number
|
イメージのピボット点を決定します。
• 左上
• 中央上
• 右上
• 中央左
• 中央
• 中央右
• 左下
• 中央下
• 右下
|
使用時に必要な最小ステップ
|
外観
|
1. 「3D ラベル」ウィジェットをキャンバス上にドラッグアンドドロップします。
2. (オプション) 「詳細」枠で「ビルボード」のチェックボックスを選択します。
3. 表示するテキストを「テキスト」フィールドに入力するか、データプロパティをウィジェットの「テキスト」フィールドにバインドします。
|
|
クラスに一意の名前を付けて、別のクラスや OOTB プロパティと競合しないようにすることをお勧めします。
|
CSS の例
|
外観
|
.ptc-3DLabel {
font-family: Century Gothic; color: black; --text-stroke-color: yellow; --text-stroke-width: 3px; /*csslint ignore*/ font-weight: normal; font-style: italic; background-color: grey } |