步骤 2 - 为汽车变体创建一个主题

在本教程的此步骤中,您将学习如何使用一个 Kanzi Studio 项目为产品的两个变体。在上一步中,您为汽油车变体创建了两个主题(Classic 和 Modern)。在此步骤中,您将修改该项目并为混合动力车变体创建主题。

为组合仪表结构设置主题

在本节中,您将为每个汽车车型设置组合仪表背景的可视外观、主要仪表之间显示的汽车模型、以及 RPM 仪表中心显示的汽车车型名称。

../../_images/primary-gauges-classic.png

要为组合仪表结构设置主题:

  1. 在 Library 按 Alt 并右键单击 Themes 中,选择 Theme Group,并将其命名为 Car variant。

    ../../_images/car-variant-library.png
  2. 在 Theme Editor 中打开 Car variant 主题组,并创建两个主题:Gasoline 和 Hybrid。

    ../../_images/car-variant-gasoline-hybrid.png
  3. 在 Prefabs 中右键单击 Primary gauges Classic > Background 并选择 Add Resources to a Theme Group。

    在此,您将集群背景的资源添加到 Car variant 主题组中。

    ../../_images/primary-gauges-classic-add-resources-theme-group.png ../../_images/primary-gauges-classic-background.png
  4. 在 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。

    ../../_images/add-resources-to-theme-group-frame-inner-outer.png

    小技巧

    当为资源 ID 使用在工程上下文中有意义的名称时,您创建一个更容易设置主题和维护的工程。如果在将资源 ID 添加到主题组时无法选择一个好的名称,您可以在 Theme Editor 中重命名资源 ID。

  5. 在 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。

    ../../_images/car-variant-cluster-frame.png
  6. 在 Prefabs 中,右键单击 Primary gauges Classic > Car,然后选择 Add Resources to a Theme Group。

    在此,您将汽车模型的资源添加到 Car variant 主题组中,该模型显示在主要仪表之间。

    ../../_images/primary-gauges-classic-car-add-resources-theme-group.png ../../_images/cae-gasoline.png
  7. 在 Add Resources to a Theme Group 窗口中:

    • 将 Theme Group 设置为 Car variant。

    • 将 Car.PrefabViewConcept.Prefab 资源 ID 重命名为 Car。

    单击 Add。

    ../../_images/add-resources-to-theme-group-car.png

    小技巧

    如果您不小心将资源 ID 添加到错误的主题组中,在 Dictionaries 中,点击您想要移动的资源 ID 旁边的 image0,然后将资源 ID 放入您想要使用的主题组中。

  8. 在 Car variant 主题组的 Theme Editor 中设置 Car 资源 ID:

    • 对于 Gasoline 主题,将资源 ID 设置为指向 Car Gasoline 预设。

    • 对于 Hybrid 主题,将资源 ID 设置为指向 Car Hybrid 预设。

    ../../_images/car-variant-car.png
  9. 在 Prefabs 中,右键单击 Primary gauges Classic > Primary gauges grid Classic > Table RPM,然后选择 Add Resources to a Theme Group。

    在此,您将资源添加到 Car variant,以显示在 RPM 仪表中央的汽车变体名称。

    ../../_images/add-resources-to-theme-group-table-rpm.png ../../_images/rpm-info.png
  10. 在 Add Resources to a Theme Group 窗口中:

    1. 将 Theme Group 设置为 Car variant。

    2. 单击 image1 以启用查看 Text Block 节点。

      在窗口右上角,您可以选择要在窗口中显示哪些类型的资源。

    3. 选择并将 G A S O L I N E 资源 ID 重命名为 Variant。

    单击 Add。

    ../../_images/add-resources-to-theme-group-variant.png
  11. 在 Car variant 主题组的 Theme Editor 中,双击每个主题的单元格,并输入 Variant 资源 ID 的文本:

    • 对于 Gasoline 主题,输入 G A S O L I N E。

    • 对于 Hybrid 主题,输入 H Y B R I D。

    ../../_images/car-variant-variant.png

现在,当您在 Dictionaries 中选择 Car variant 主题组中的一个主题时,Preview 会显示您迄今为止为这两种汽车变体定义的资源。

为主要仪表颜色设置主题

在本节中,为每个汽车车型设置主要仪表的颜色。

../../_images/primary-gauges-classic-gauges.png

要为主要仪表颜色设置主题:

  1. 在 Prefabs 中,右键单击 Primary gauges Classic > Gauges,然后选择 Add Resources to a Theme Group。

    ../../_images/add-resources-to-theme-group-primary-gauges-gauges.png
  2. 在 Add Resources to a Theme Group 窗口中:

    • 将 Theme Group 设置为 Car variant。

    • 选择并将 Gauge.Node.Style 资源 ID 重命名为 Primary gauges color Classic。

    单击 Add。

    ../../_images/add-resources-to-theme-group-primary-gauges-color-classic.png
  3. 在 Car variant 主题组的 Theme Editor 中设置 Primary gauges color Classic 资源 ID:

    • 对于 Gasoline 主题,将资源 ID 设置为指向 Primary gauges color Classic Gasoline 样式。

    • 对于 Hybrid 主题,将资源 ID 设置为指向 Primary gauges color Classic Hybrid 样式。

    ../../_images/car-variant-primary-gauges-color-classic.png

    这些样式为材料设置了 Emissive Color 属性,该材料由定义两个主量表的 Gauge Model 节点使用。

    ../../_images/style-primary-gauges-color-classic-gasoline.png ../../_images/style-primary-gauges-color-classic-hybrid.png

现在,当您在 Dictionaries 中选择 Car variant 主题组中的一个主题时,Preview 会显示您迄今为止为这两种汽车变体定义的资源。

为次要仪表设置主题

在本节中,您将学习为每个汽车车型设置次要仪表的可视外观,以便更改:

  • 仪表颜色

  • 左侧仪表的图标

  • 左侧次要仪表值的来源、仪表刻度和单位

../../_images/secondary-gauges.png

要为次要仪表设置主题:

  1. 在 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 属性获得引擎温度仪表的值。

    ../../_images/secondary-gauges-grid-left-gauge-value.png ../../_images/left-gauge-value-set-style.png
  2. 在 Properties > Bindings 中,在设置 Text 属性值的绑定旁边,单击 image2 以移除该绑定。

    您移除绑定是因为您使用 Secondary gauges Left gauge value Gasoline 样式来设置绑定。

    ../../_images/left-gauge-value-remove-property.png
  3. 在 Prefabs 中右键单击 Secondary gauges,选择 Add Resources to a Theme Group,并在 Add Resources to a Theme Group 窗口中:

    1. 将 Theme Group 设置为 Car variant。

    2. 单击 image3 以启用查看 Text Block 节点。

    3. 选择并重命名这些资源 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。

    ../../_images/add-resources-to-theme-group-secondary-gauges-color-unit-scale.png
  4. 在 Car variant 主题组的 Theme Editor 中,设置您在上一步中添加的资源 ID:

    • 对于 Gasoline 主题集:

      • Secondary gauges Right 指向 Secondary gauge right Gasoline 样式。

        此样式为定义右侧次要量表的 Gauge Model 节点使用的材质设置 Emissive Color 属性。

        ../../_images/style-secondary-gauge-right-gasoline.png
      • Secondary gauges Left 指向 Secondary gauge left Gasoline 样式。

        此样式设置绑定,以从 RootNode 节点中的 Temperature 属性获得引擎温度仪表的值,并为定义左侧次要仪表的 Gauge Model 节点所使用的材质设置 Emissive Color 属性。Secondary gauges > Gauges > Scene > Left gauge > Gauge Model 节点使用绑定中的值来设置仪表条的位置。

        ../../_images/style-secondary-gauge-left-gasoline.png
      • 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 节点显示该值。

        ../../_images/style-secondary-gauge-left-gauge-value-gasoline.png
      • 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 到 %

    ../../_images/car-variant-secondary-gauges.png

现在,当您在 Dictionaries 中选择 Car variant 主题组中的一个主题时,Preview 会显示您迄今为止为这两种汽车变体定义的资源。

更改 Primary gauges Modern 预设。

在本节中,您将更改 Primary gauges Modern 预设,以便可以对 Gasoline 和 Hybrid 汽车变体主题使用相同的预设。

../../_images/primary-gauges-modern.png

要更改 Primary gauges Modern 预设:

  1. (可选) 在 Dictionaries 中将 Cluster theme 设置为 Modern,以便您可以在 Preview 中看到对 Primary gauges Modern 预设所做的更改。

    ../../_images/dictionaries-cluster-theme-modern-step-2.png
  2. 在 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。

      ../../_images/primary-gauges-modern-cluster-frame-outer.png ../../_images/primary-gauges-modern-cluster-frame-outer-properties.png
    • 在 Prefabs 中,选择 Primary gauges Modern > Gauges > Scene > Cluster frame inner,并在 Properties 中将 Mesh 属性设置为 <ResourceID>,并使用 Cluster frame inner 资源 ID。

      ../../_images/primary-gauges-modern-cluster-frame-inner.png ../../_images/primary-gauges-modern-cluster-frame-inner-properties.png
    • 在 Prefabs 中,选择 Primary gauges Modern > Primary gauges grid Modern > Table RPM,并在 Properties 中添加并将 Theming.TableRPMVariant 属性设置为 <ResourceID>,并使用 Variant 资源 ID。

      ../../_images/primary-gauges-modern-table-rpm.png ../../_images/primary-gauges-modern-table-rpm-properties.png
  3. 在 Primary gauges Modern > Gauges > Scene > Right gauge 和 Left gauge 节点中,将 Render Transformation 属性替换为样式:

    1. 在 Prefabs 中,选择 Primary gauges Modern > Gauges > Scene > Right gauge,在 Properties 中添加 Style 属性,并将其设置为 Primary gauges right position Modern Gasoline 样式。

      此样式设置 Render Transformation 属性的值。

      ../../_images/primary-gauges-modern-right-gauge.png ../../_images/primary-gauges-modern-right-gauge-set-style.png
    2. 从 Right gauge 节点中移除 Render Transformation 属性。

      您删除此属性,因为您使用 Primary gauges right position Modern Gasoline 样式来设置此属性的值。

      ../../_images/primary-gauges-modern-right-gauge-remove-property.png
    3. 对 Primary gauges Modern > Gauges > Scene > Left gauge 节点重复前两个步骤,但使用 Primary gauges left position Modern Gasoline 样式。

      ../../_images/primary-gauges-modern-left-gauge.png ../../_images/primary-gauges-modern-left-gauge-remove-property.png
  4. 在 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。

    ../../_images/add-resources-to-theme-group-primary-gauges-modern.png
  5. 在 Car variant 主题组的 Theme Editor 中,设置您在上一步中添加的资源 ID:

    • 对于 Gasoline 主题集:

      • Primary gauges Modern Right gauge 指向 Primary gauges right position Modern Gasoline 样式。

        样式使用 Render Transformation 属性设置右侧主仪表的位置。

        ../../_images/style-primary-gauges-right-position-modern-gasoline.png
      • Primary gauges Modern Top 指向 Primary gauges color Modern Gasoline 样式。

        此样式为材料设置 Ambient Color 属性,该材料由定义两个仪表顶层的 Gauge top Model 节点使用。

        ../../_images/style-primary-gauges-color-modern-gasoline.png
      • Primary gauges Modern Left gauge 指向 Primary gauges left position Modern Gasoline 样式。

        样式使用 Render Transformation 属性设置左侧主仪表的位置。

        ../../_images/style-primary-gauges-left-position-modern-gasoline.png
      • Primary gauges Modern Value 指向 Primary gauges value Modern Gasoline 样式。

        此样式使用 Vertical Margin 属性设置 Speed value trajectory 和 RPM value trajectory Trajectory Layout 节点的位置。主要的仪表速度和 RPM 值沿着这些 Trajectory Layout 节点移动。

        ../../_images/style-primary-gauges-value-modern-gasoline.png
    • 对于 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 样式。

    ../../_images/car-variant-primary-gauges-modern.png

现在,当您在 Cluster theme 主题组中选择 Dictionaries Modern 主题并更改 Car variant 主题组中的主题时,Preview 会在 Modern 主题中显示两个汽车变体的资源。

另请参阅

为您的应用程序设置主题

使用 Themes

使用 styles