步骤 2 - 为汽车变体创建一个主题¶
在本教程的此步骤中,您将学习如何使用一个 Kanzi Studio 项目为产品的两个变体。在上一步中,您为汽油车变体创建了两个主题(Classic 和 Modern)。在此步骤中,您将修改该项目并为混合动力车变体创建主题。
为组合仪表结构设置主题¶
在本节中,您将为每个汽车车型设置组合仪表背景的可视外观、主要仪表之间显示的汽车模型、以及 RPM 仪表中心显示的汽车车型名称。
要为组合仪表结构设置主题:
在 Library 按 Alt 并右键单击 Themes 中,选择 Theme Group,并将其命名为 Car variant。
在 Theme Editor 中打开 Car variant 主题组,并创建两个主题:Gasoline 和 Hybrid。
在 Prefabs 中右键单击 Primary gauges Classic > Background 并选择 Add Resources to a Theme Group。
在此,您将集群背景的资源添加到 Car variant 主题组中。
在 Add Resources to a Theme Group 窗口中:
将 Theme Group 设置为 Car variant。
重命名资源 ID:
Cluster frame inner.Model3D.Mesh 到 Cluster frame inner
Cluster frame outer.Model3D.Mesh 到 Cluster frame outer
单击 Add。
小技巧
当为资源 ID 使用在工程上下文中有意义的名称时,您创建一个更容易设置主题和维护的工程。如果在将资源 ID 添加到主题组时无法选择一个好的名称,您可以在 Theme Editor 中重命名资源 ID。
在 Car variant 主题组的 Theme Editor 中设置资源 ID:
对于 Gasoline 主题集:
指向 Cluster frame outer Gasoline 网格的 Cluster frame outer 资源 ID。
用于指向 Cluster frame inner Gasoline 网格的 Cluster frame inner 资源 ID。
对于 Hybrid 主题集:
指向 Cluster frame outer Hybrid 网格的 Cluster frame outer 资源 ID。
指向 Cluster frame inner Hybrid 网格的 Cluster frame inner 资源 ID。
在 Prefabs 中,右键单击 Primary gauges Classic > Car,然后选择 Add Resources to a Theme Group。
在此,您将汽车模型的资源添加到 Car variant 主题组中,该模型显示在主要仪表之间。
在 Add Resources to a Theme Group 窗口中:
将 Theme Group 设置为 Car variant。
将 Car.PrefabViewConcept.Prefab 资源 ID 重命名为 Car。
单击 Add。
小技巧
如果您不小心将资源 ID 添加到错误的主题组中,在 Dictionaries 中,点击您想要移动的资源 ID 旁边的
,然后将资源 ID 放入您想要使用的主题组中。在 Car variant 主题组的 Theme Editor 中设置 Car 资源 ID:
对于 Gasoline 主题,将资源 ID 设置为指向 Car Gasoline 预设。
对于 Hybrid 主题,将资源 ID 设置为指向 Car Hybrid 预设。
在 Prefabs 中,右键单击 Primary gauges Classic > Primary gauges grid Classic > Table RPM,然后选择 Add Resources to a Theme Group。
在此,您将资源添加到 Car variant,以显示在 RPM 仪表中央的汽车变体名称。
在 Add Resources to a Theme Group 窗口中:
将 Theme Group 设置为 Car variant。
单击
以启用查看 Text Block 节点。在窗口右上角,您可以选择要在窗口中显示哪些类型的资源。
选择并将 G A S O L I N E 资源 ID 重命名为 Variant。
单击 Add。
在 Car variant 主题组的 Theme Editor 中,双击每个主题的单元格,并输入 Variant 资源 ID 的文本:
对于 Gasoline 主题,输入 G A S O L I N E。
对于 Hybrid 主题,输入 H Y B R I D。
现在,当您在 Dictionaries 中选择 Car variant 主题组中的一个主题时,Preview 会显示您迄今为止为这两种汽车变体定义的资源。
为主要仪表颜色设置主题¶
在本节中,为每个汽车车型设置主要仪表的颜色。
要为主要仪表颜色设置主题:
在 Prefabs 中,右键单击 Primary gauges Classic > Gauges,然后选择 Add Resources to a Theme Group。
在 Add Resources to a Theme Group 窗口中:
将 Theme Group 设置为 Car variant。
选择并将 Gauge.Node.Style 资源 ID 重命名为 Primary gauges color Classic。
单击 Add。
在 Car variant 主题组的 Theme Editor 中设置 Primary gauges color Classic 资源 ID:
对于 Gasoline 主题,将资源 ID 设置为指向 Primary gauges color Classic Gasoline 样式。
对于 Hybrid 主题,将资源 ID 设置为指向 Primary gauges color Classic Hybrid 样式。
这些样式为材料设置了 Emissive Color 属性,该材料由定义两个主量表的 Gauge Model 节点使用。
现在,当您在 Dictionaries 中选择 Car variant 主题组中的一个主题时,Preview 会显示您迄今为止为这两种汽车变体定义的资源。
为次要仪表设置主题¶
在本节中,您将学习为每个汽车车型设置次要仪表的可视外观,以便更改:
仪表颜色
左侧仪表的图标
左侧次要仪表值的来源、仪表刻度和单位
要为次要仪表设置主题:
在 Prefabs 中,选择 Secondary gauges > Secondary gauges grid > Left gauge info > Value,在 Properties 中添加 Style 属性,并将其设置为 Secondary gauges Left gauge value Gasoline 样式。
Secondary gauges Left gauge value Gasoline 样式仅针对 Text Block 2D 节点,使用绑定从 RootNode 节点中的 Temperature 属性获得引擎温度仪表的值。
在 Properties > Bindings 中,在设置 Text 属性值的绑定旁边,单击
以移除该绑定。您移除绑定是因为您使用 Secondary gauges Left gauge value Gasoline 样式来设置绑定。
在 Prefabs 中右键单击 Secondary gauges,选择 Add Resources to a Theme Group,并在 Add Resources to a Theme Group 窗口中:
将 Theme Group 设置为 Car variant。
单击
以启用查看 Text Block 节点。选择并重命名这些资源 ID:
Gauge.Node.Style 到 Secondary gauges Right
Gauge.Node.Style_1 到 Secondary gauges Left
130 到 Secondary gauges scale max Left
50 到 Secondary gauges scale min Left
Left gauge icon.Image2D.Image 到 Secondary gauges icon Left
Value.Node.Style 到 Secondary gauges value Left
° 到 Secondary gauges unit Left
单击 Add。
在 Car variant 主题组的 Theme Editor 中,设置您在上一步中添加的资源 ID:
对于 Gasoline 主题集:
Secondary gauges Right 指向 Secondary gauge right Gasoline 样式。
此样式为定义右侧次要量表的 Gauge Model 节点使用的材质设置 Emissive Color 属性。
Secondary gauges Left 指向 Secondary gauge left Gasoline 样式。
此样式设置绑定,以从 RootNode 节点中的 Temperature 属性获得引擎温度仪表的值,并为定义左侧次要仪表的 Gauge Model 节点所使用的材质设置 Emissive Color 属性。Secondary gauges > Gauges > Scene > Left gauge > Gauge Model 节点使用绑定中的值来设置仪表条的位置。
Secondary gauges scale max Left 到 130
Secondary gauges scale min Left 到 50
将 Secondary gauges icon Left 到 Temp_Icon 纹理。
Secondary gauges value Left 到 Secondary gauges Left gauge value Gasoline 样式。
此样式设置绑定,以从 RootNode 节点中的 Temperature 属性获得引擎温度仪表的值。Secondary gauges > Secondary gauges grid > Left gauge info > Value Text Block 2D 节点显示该值。
Secondary gauges unit Left 到 °
对于 Hybrid 主题集:
Secondary gauges Right 指向 Secondary gauge right Hybrid 样式。
Secondary gauges Left 指向 Secondary gauge left Hybrid 样式。
Secondary gauges scale max Left 到 100
Secondary gauges scale min Left 到 0
将 Secondary gauges icon Left 到 Battery_Icon 纹理。
将 Secondary gauges value Left 转换为 Secondary gauges Left gauge value Hybrid 样式。
Secondary gauges unit Left 到 %
现在,当您在 Dictionaries 中选择 Car variant 主题组中的一个主题时,Preview 会显示您迄今为止为这两种汽车变体定义的资源。
更改 Primary gauges Modern 预设。¶
在本节中,您将更改 Primary gauges Modern 预设,以便可以对 Gasoline 和 Hybrid 汽车变体主题使用相同的预设。
要更改 Primary gauges Modern 预设:
(可选) 在 Dictionaries 中将 Cluster theme 设置为 Modern,以便您可以在 Preview 中看到对 Primary gauges Modern 预设所做的更改。
在 Primary gauges Modern 预设中,将资源替换为资源 ID。
在本教程步骤的第一部分中,当您为 Primary gauges Classic 预设设置主题时,您创建并将这些资源 ID 添加到 Car variant 主题组中。
在 Prefabs 中,选择 Primary gauges Modern > Gauges > Scene > Cluster frame outer,并在 Properties 中将 Mesh 属性设置为 <ResourceID>,并使用 Cluster frame outer 资源 ID。
在 Prefabs 中,选择 Primary gauges Modern > Gauges > Scene > Cluster frame inner,并在 Properties 中将 Mesh 属性设置为 <ResourceID>,并使用 Cluster frame inner 资源 ID。
在 Prefabs 中,选择 Primary gauges Modern > Primary gauges grid Modern > Table RPM,并在 Properties 中添加并将 Theming.TableRPMVariant 属性设置为 <ResourceID>,并使用 Variant 资源 ID。
在 Primary gauges Modern > Gauges > Scene > Right gauge 和 Left gauge 节点中,将 Render Transformation 属性替换为样式:
在 Prefabs 中,选择 Primary gauges Modern > Gauges > Scene > Right gauge,在 Properties 中添加 Style 属性,并将其设置为 Primary gauges right position Modern Gasoline 样式。
此样式设置 Render Transformation 属性的值。
从 Right gauge 节点中移除 Render Transformation 属性。
您删除此属性,因为您使用 Primary gauges right position Modern Gasoline 样式来设置此属性的值。
对 Primary gauges Modern > Gauges > Scene > Left gauge 节点重复前两个步骤,但使用 Primary gauges left position Modern Gasoline 样式。
在 Prefabs 中右键单击 Primary gauges Modern,选择 Add Resources to a Theme Group,并在 Add Resources to a Theme Group 窗口中:
将 Theme Group 设置为 Car variant。
选择并重命名这些资源 ID:
Right gauge.Node.Style 到 Primary gauges Modern Right gauge
Gauge top.Node.Style 到 Primary gauges Modern Top
Left gauge.Node.Style 到 Primary gauges Modern Left gauge
Speed value trajectory.Node.Style 到 Primary gauges Modern Value
单击 Add。
在 Car variant 主题组的 Theme Editor 中,设置您在上一步中添加的资源 ID:
对于 Gasoline 主题集:
Primary gauges Modern Right gauge 指向 Primary gauges right position Modern Gasoline 样式。
样式使用 Render Transformation 属性设置右侧主仪表的位置。
Primary gauges Modern Top 指向 Primary gauges color Modern Gasoline 样式。
此样式为材料设置 Ambient Color 属性,该材料由定义两个仪表顶层的 Gauge top Model 节点使用。
Primary gauges Modern Left gauge 指向 Primary gauges left position Modern Gasoline 样式。
样式使用 Render Transformation 属性设置左侧主仪表的位置。
Primary gauges Modern Value 指向 Primary gauges value Modern Gasoline 样式。
此样式使用 Vertical Margin 属性设置 Speed value trajectory 和 RPM value trajectory Trajectory Layout 节点的位置。主要的仪表速度和 RPM 值沿着这些 Trajectory Layout 节点移动。
对于 Hybrid 主题集:
Primary gauges Modern Right gauge 指向 Primary gauges right position Modern Hybrid 样式。
Primary gauges Modern Top 指向 Primary gauges color Modern Hybrid 样式。
Primary gauges Modern Left gauge 指向 Primary gauges left position Modern Hybrid 样式。
Primary gauges Modern Value 指向 Primary gauges value Modern Hybrid 样式。
现在,当您在 Cluster theme 主题组中选择 Dictionaries Modern 主题并更改 Car variant 主题组中的主题时,Preview 会在 Modern 主题中显示两个汽车变体的资源。