0.24
集成面板
集成面板可以将多个模块整合进一个面板中,用多个模块为一个内容提供多样的显示形态和交互体验。
术语约定
TODO
功能特性
对齐网格(Align Grid)
将视窗(Viewport)划分为N行M列的网格,在开启吸附功能后,在(x,y)坐标位置打开的集成面板会自动寻找最靠近的网格,并将最终打开的坐标位置设置为网格的中心的坐标位置(x', y')。
标签跳转
当内容(Content)的元数据文件中,kvS字段中存在格式为 label.{{label}}.uri
的项时,标签可以在点击时跳转到对应的内容。
配置说明
<?xml version="1.0" encoding="utf-8"?>
<MyConfig version="1.0">
<!-- UI
visible: 预加载完成后是否显示
slot: ui根节点在主Canvas中的挂载路径
-->
<UI visible="true" slot="[root]"/>
<!-- World
visible: 预加载完成后是否显示
slot: 3D世界根节点在主世界中的挂载路径
-->
<World visible="true" slot="[root]"/>
<!-- 远程过程调用
address: 地址
-->
<GRPC address="https://localhost:19000"/>
<!-- 交融检测
mode: 模式,可选值为 circular, rectangle
-->
<!-- 样式列表
name: 名称
autoCloseTimeout: 自动关闭的超时时间,0值时不启动此功能
AlignGrid: 对齐网格,将屏幕划分为n行xm列的网格,可控制面板吸附在最近的网格的中心位置
AlignGrid.visible: 是否可见
AlignGrid.row: 行数
AlignGrid.column: 列数
AlignGrid.stickH: 水平吸附
AlignGrid.stickV: 垂直吸附
MainMask.image: 主遮罩的图片,位于theme文件夹
MainMask.Anchor: 主遮罩的锚点
MainMask.Border: 主遮罩的图片的九宫格边界
MainBackground.image: 主背景的图片,位于theme文件夹
MainBackground.Anchor: 主背景的锚点
MainBackground.Border: 主背景的图片的九宫格边界
Panel.Anchor: 面板的锚点
TitleBarBackground: 首页标题栏背景
TitleBarBackground.image: 位于theme文件夹中的图片
TitleBarBackground.color: 图片的叠加颜色
TitleBarBackground.Border: 图片的九宫格边界
Like.Anchor: 点赞的锚点,控制位置和大小
Like.Background: 点赞背景
Like.Background.image: 位于theme文件夹中的图片
Like.Background.color: 图片的叠加颜色
Like.Background.Border: 图片的九宫格边界
Like.SelectedIcon.image: 已点赞按钮的图片
Like.UnselectedIcon.image: 未点赞按钮的图片
Topic.Anchor: 点赞的锚点,控制位置和大小
Topic.Background: 标语背景
Topic.Background.image: 位于theme文件夹中的图片
Topic.Background.color: 图片的叠加颜色
Topic.Background.Border: 图片的九宫格边界
Topic.SwitchIcon.image: 标语切换按钮的图片
Description.descriptionMaxHeight: 描述框的最大高度
Description.Anchor: 描述的锚点,控制位置和大小
Description.Background: 描述背景
Description.Background.image: 位于theme文件夹中的图片
Description.Background.color: 图片的叠加颜色
Description.Background.Border: 图片的九宫格边界
Description.SwitchIcon.image: 描述切换按钮的图片
ImageToolBox: 首页封面图工具箱
TabBar: 标签栏
TabBar.layout: 标签的布局方式,可选值为[row, round]
TabBar.space: 标签间的间隔,layout为round时,为角度
TabBar.offset: 标签栏的偏移量,标签默认位置为标签栏的上边线对齐面板的下边线
TabBar.Background: 标签栏背景
TabBar.TabButtons: 标签按钮列表
TabBar.TabButton.contentKey: 对应content的meta.json的kvS中的键,如果存在值则显示。“_”表示不与content对应,始终显示。
CoverPicture.fitmode: 匹配模式,可选值为(none:使用原图大小,zoomout:比容器大时缩小为容器大小,zoomin:比容器小时放大为容器大小,zoom:同时使用zoomin和zoomout)
CoverPicture.maxZoomIn: 最大放大倍数,0表示不限制
PageSlot.page: 页面的名称
PageSlot.InlaySubject: 页面嵌入实体时发布的消息
PageSlot.RefreshSubject: 页面刷新时发布的消息
TabBar.CloseButton.Subjects: 关闭面板时发布的消息
TabBar.TabButton.Subjects: 标签栏的标签激活时发布的消息
LabelButton.fontSize: 标签的字体大小
LabelButton.fontColor: 标签的字体颜色
LabelButton.height: 标签的高度,宽度自动适配
LabelButton.image: 标签的图片
LabelButton.Border: 标签图片的九宫格边界
EventHandler.OnRefreshS: 内容刷新事件的发布的消息订阅列表
EventHandler.OnLikeS: 点赞刷新事件的发布的消息订阅列表
EventHandler.OnCloseS: 集成面板关闭后发布的消息订阅列表
-->
<Styles>
<Style name="rectangle" width="880" height="740" autoCloseTimeout="300" effect="blur">
<AlignGrid row="1" column="1" stickH="true" stickV="true"/>
<MainMask image="rectangle_panel_bg.png">
<Anchor horizontal="center" vertical="center" marginH="0" marginV="40" width="880" height="660"/>
<Border top="56" bottom="56" left="56" right="56"/>
</MainMask>
<MainBackground image="rectangle_panel_bg.png" color="#272930CC">
<Anchor horizontal="center" vertical="center" marginH="0" marginV="40" width="880" height="660"/>
<Border top="56" bottom="56" left="56" right="56"/>
</MainBackground>
<Panel>
<Anchor horizontal="center" vertical="center" marginH="0" marginV="0" width="880" height="660"/>
</Panel>
<TitleBarBackground image="rectangle_titlebar_bg.png" color="#3333334C">
<Border top="56" bottom="56" left="56" right="56"/>
</TitleBarBackground>
<Like>
<Anchor horizontal="right" vertical="bottom" marginH="36" marginV="24" width="100" height="48"/>
<Background image="rectangle_button.png" color="#11111188">
<Border top="16" bottom="16" left="16" right="16"/>
</Background>
<SelectedIcon image="rectangle_icon_liked.png">
<Anchor horizontal="left" vertical="center" marginH="12" marginV="0" width="20" height="20"/>
</SelectedIcon>
<UnselectedIcon image="rectangle_icon_unliked.png">
<Anchor horizontal="left" vertical="center" marginH="12" marginV="0" width="20" height="20"/>
</UnselectedIcon>
</Like>
<Topic>
<Anchor horizontal="left" vertical="bottom" marginH="36" marginV="24" width="444" height="48"/>
<Background image="rectangle_button.png" color="#11111188">
<Border top="16" bottom="16" left="16" right="16"/>
</Background>
<SwitchButton background="rectangle_switch_button_bg.png" icon="rectangle_icon_switch1.png" iconSize="16">
<Border top="16" bottom="16" left="16" right="16"/>
</SwitchButton>
</Topic>
<Description maxHeight="110">
<Anchor horizontal="left" vertical="bottom" marginH="36" marginV="24" width="444" height="48"/>
<Background image="rectangle_button.png" color="#11111188">
<Border top="16" bottom="16" left="16" right="16"/>
</Background>
<SwitchButton background="rectangle_switch_button_bg.png" icon="rectangle_icon_switch2.png" iconSize="16">
<Border top="16" bottom="16" left="16" right="16"/>
</SwitchButton>
</Description>
<LabelButton fontSize="12" fontColor="#FFFFFFFF" height="24" image="label.png">
<Border top="12" bottom="12" left="12" right="12"/>
</LabelButton>
<ImageToolBox image="rectangle_button.png" color="#5B656F88">
<Border top="16" bottom="16" left="16" right="16"/>
<Anchor horizontal="right" vertical="bottom" marginH="36" marginV="24" width="132" height="48"/>
<ZoomInButton image="rectangle_imagetoolbox_zoomin.png" color="#FFFFFFFF">
<Anchor height="36" width="36"/>
</ZoomInButton>
<ZoomOutButton image="rectangle_imagetoolbox_zoomout.png" color="#FFFFFFFF">
<Anchor height="36" width="36"/>
</ZoomOutButton>
<BackButton image="rectangle_imagetoolbox_back.png" color="#FFFFFFFF">
<Anchor height="36" width="36"/>
</BackButton>
</ImageToolBox>
<PageSlots>
<PageSlot page="media">
<InlaySubject message="/XTC/MediaCenter/Inlay">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="style" value="default" type="string"/>
<Parameter key="slot" value="{{page_slot}}" type="_"/>
</Parameters>
</InlaySubject>
<RefreshSubject message="/XTC/MediaCenter/Refresh">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="source" value="assloud://" type="string"/>
<Parameter key="uri" value="{{uri}}" type="_"/>
</Parameters>
</RefreshSubject>
</PageSlot>
</PageSlots>
<TabBar space="24" layout="row" useMask="true" offset="80">
<Background image="rectangle_tabbar_bg.png" color="#272930A0">
<Border top="56" bottom="56" left="56" right="56"/>
</Background>
<CloseButton image="rectangle_tab_close.png" color="#FFFFFFFF">
<Anchor width="44" height="44"/>
<Subjects>
<Subject message="/XTC/IntegrationBoard/DirectClose">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="delay" value="0" type="float"/>
</Parameters>
</Subject>
</Subjects>
</CloseButton>
<TabButtons>
<TabButton name="__home__" contentKey="_"
uncheckedIcon="rectangle_tab_profile_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
checkedIcon="rectangle_tab_profile_checked.png" checkedWidth="96" checkedHeight="44">
<Subjects>
<Subject message="/XTC/IntegrationBoard/ActivatePage">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="page" value="__home__" type="string"/>
</Parameters>
</Subject>
</Subjects>
</TabButton>
<TabButton name="dossier" contentKey="dossier"
uncheckedIcon="rectangle_tab_dossier_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
checkedIcon="rectangle_tab_dossier_checked.png" checkedWidth="96" checkedHeight="44">
<Subjects>
<Subject message="/XTC/IntegrationBoard/ActivatePage">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="page" value="dossier" type="string"/>
</Parameters>
</Subject>
</Subjects>
</TabButton>
<TabButton name="media" contentKey="MediaCenter"
uncheckedIcon="rectangle_tab_media_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
checkedIcon="rectangle_tab_media_checked.png" checkedWidth="96" checkedHeight="44">
<Subjects>
<Subject message="/XTC/IntegrationBoard/ActivatePage">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="page" value="media" type="string"/>
</Parameters>
</Subject>
</Subjects>
</TabButton>
<TabButton name="search" contentKey="_"
uncheckedIcon="rectangle_tab_search_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
checkedIcon="rectangle_tab_search_checked.png" checkedWidth="96" checkedHeight="44">
<Subjects>
<Subject message="/XTC/IntegrationBoard/ActivatePage">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="page" value="search" type="string"/>
</Parameters>
</Subject>
</Subjects>
</TabButton>
</TabButtons>
</TabBar>
<CoverPicture fitmode="zoom" maxZoomIn="3.0"/>
<EventHandler>
<OnRefreshS>
<Subject message="/XTC/Analytics/TrackerRecord">
<Parameters>
<Parameter key="eventID" value="/XTC/IntegerationBoard/Open" type="string"/>
<Parameter key="eventParameter" value='{"uri":"{{uri}}"}' type="_"/>
</Parameters>
</Subject>
</OnRefreshS>
<OnLikeS>
<Subject message="/XTC/Analytics/TrackerRecord">
<Parameters>
<Parameter key="eventID" value="/XTC/IntegerationBoard/Like" type="string"/>
<Parameter key="eventParameter" value='{"uri":"{{uri}}"}' type="_"/>
</Parameters>
</Subject>
</OnLikeS>
<OnCloseS>
<Subject message="/XTC/Analytics/TrackerRecord">
<Parameters>
<Parameter key="eventID" value="/XTC/IntegerationBoard/Close" type="string"/>
<Parameter key="eventParameter" value='{"uri":"{{uri}}"}' type="_"/>
</Parameters>
</Subject>
</OnCloseS>
</EventHandler>
</Style>
<Style name="circle" width="880" height="880" autoCloseTimeout="300" effect="">
<AlignGrid row="1" column="1" stickH="true" stickV="true"/>
<MainMask image="circle_mask.png">
<Anchor horizontal="center" vertical="center" marginH="0" marginV="40" width="920" height="920"/>
<Border top="1" bottom="1" left="1" right="1"/>
</MainMask>
<MainBackground image="circle_panel_bg.png" color="#FFFFFFFF">
<Anchor horizontal="center" vertical="center" marginH="0" marginV="0" width="1200" height="1200"/>
<Border top="1" bottom="1" left="1" right="1"/>
</MainBackground>
<Panel>
<Anchor horizontal="center" vertical="center" marginH="0" marginV="0" width="880" height="880"/>
</Panel>
<TitleBarBackground image="rectangle_titlebar_bg.png" color="#33333300">
<Border top="56" bottom="56" left="56" right="56"/>
</TitleBarBackground>
<Like>
<Anchor horizontal="center" vertical="bottom" marginH="0" marginV="24" width="100" height="48"/>
<Background image="rectangle_button.png" color="#11111188">
<Border top="16" bottom="16" left="16" right="16"/>
</Background>
<SelectedIcon image="rectangle_icon_liked.png">
<Anchor horizontal="left" vertical="center" marginH="12" marginV="0" width="20" height="20"/>
</SelectedIcon>
<UnselectedIcon image="rectangle_icon_unliked.png">
<Anchor horizontal="left" vertical="center" marginH="12" marginV="0" width="20" height="20"/>
</UnselectedIcon>
</Like>
<Topic>
<Anchor horizontal="center" vertical="bottom" marginH="0" marginV="90" width="400" height="48"/>
<Background image="rectangle_button.png" color="#11111188">
<Border top="16" bottom="16" left="16" right="16"/>
</Background>
<SwitchButton background="rectangle_switch_button_bg.png" icon="rectangle_icon_switch1.png" iconSize="16">
<Border top="16" bottom="16" left="16" right="16"/>
</SwitchButton>
</Topic>
<Description maxHeight="110">
<Anchor horizontal="center" vertical="bottom" marginH="0" marginV="90" width="400" height="48"/>
<Background image="rectangle_button.png" color="#11111188">
<Border top="16" bottom="16" left="16" right="16"/>
</Background>
<SwitchButton background="rectangle_switch_button_bg.png" icon="rectangle_icon_switch2.png" iconSize="16">
<Border top="16" bottom="16" left="16" right="16"/>
</SwitchButton>
</Description>
<LabelButton fontSize="12" fontColor="#FFFFFFFF" height="24" image="label.png">
<Border top="12" bottom="12" left="12" right="12"/>
</LabelButton>
<ImageToolBox image="rectangle_button.png" color="#5B656F88">
<Border top="16" bottom="16" left="16" right="16"/>
<Anchor horizontal="center" vertical="bottom" marginH="0" marginV="40" width="132" height="48"/>
<ZoomInButton image="rectangle_imagetoolbox_zoomin.png" color="#FFFFFFFF">
<Anchor height="36" width="36"/>
</ZoomInButton>
<ZoomOutButton image="rectangle_imagetoolbox_zoomout.png" color="#FFFFFFFF">
<Anchor height="36" width="36"/>
</ZoomOutButton>
<BackButton image="rectangle_imagetoolbox_back.png" color="#FFFFFFFF">
<Anchor height="36" width="36"/>
</BackButton>
</ImageToolBox>
<PageSlots>
<PageSlot page="media">
<InlaySubject message="/XTC/MediaCenter/Inlay">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="style" value="default" type="string"/>
<Parameter key="slot" value="{{page_slot}}" type="_"/>
</Parameters>
</InlaySubject>
<RefreshSubject message="/XTC/MediaCenter/Refresh">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="source" value="assloud://" type="string"/>
<Parameter key="uri" value="{{uri}}" type="_"/>
</Parameters>
</RefreshSubject>
</PageSlot>
</PageSlots>
<TabBar space="10" layout="round" useMask="false" offset="20">
<Background image="rectangle_tabbar_bg.png" color="#27293000">
<Border top="56" bottom="56" left="56" right="56"/>
</Background>
<CloseButton image="rectangle_tab_close.png" color="#FFFFFFFF">
<Anchor width="44" height="44"/>
<Subjects>
<Subject message="/XTC/IntegrationBoard/DirectClose">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="delay" value="0" type="float"/>
</Parameters>
</Subject>
</Subjects>
</CloseButton>
<TabButtons>
<TabButton name="__home__" contentKey="_"
uncheckedIcon="rectangle_tab_profile_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
checkedIcon="rectangle_tab_profile_checked.png" checkedWidth="44" checkedHeight="44">
<Subjects>
<Subject message="/XTC/IntegrationBoard/ActivatePage">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="page" value="__home__" type="string"/>
</Parameters>
</Subject>
</Subjects>
</TabButton>
<TabButton name="dossier" contentKey="dossier"
uncheckedIcon="rectangle_tab_dossier_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
checkedIcon="rectangle_tab_dossier_checked.png" checkedWidth="44" checkedHeight="44">
<Subjects>
<Subject message="/XTC/IntegrationBoard/ActivatePage">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="page" value="dossier" type="string"/>
</Parameters>
</Subject>
</Subjects>
</TabButton>
<TabButton name="media" contentKey="MediaCenter"
uncheckedIcon="rectangle_tab_media_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
checkedIcon="rectangle_tab_media_checked.png" checkedWidth="44" checkedHeight="44">
<Subjects>
<Subject message="/XTC/IntegrationBoard/ActivatePage">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="page" value="media" type="string"/>
</Parameters>
</Subject>
</Subjects>
</TabButton>
<TabButton name="search" contentKey="_"
uncheckedIcon="rectangle_tab_search_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
checkedIcon="rectangle_tab_search_checked.png" checkedWidth="44" checkedHeight="44">
<Subjects>
<Subject message="/XTC/IntegrationBoard/ActivatePage">
<Parameters>
<Parameter key="uid" value="{{uid}}" type="_"/>
<Parameter key="page" value="search" type="string"/>
</Parameters>
</Subject>
</Subjects>
</TabButton>
</TabButtons>
</TabBar>
<CoverPicture fitmode="zoom" maxZoomIn="3.0"/>
<EventHandler>
<OnRefreshS>
<Subject message="/XTC/Analytics/TrackerRecord">
<Parameters>
<Parameter key="eventID" value="/XTC/IntegerationBoard/Open" type="string"/>
<Parameter key="eventParameter" value='{"uri":"{{uri}}"}' type="_"/>
</Parameters>
</Subject>
</OnRefreshS>
<OnLikeS>
<Subject message="/XTC/Analytics/TrackerRecord">
<Parameters>
<Parameter key="eventID" value="/XTC/IntegerationBoard/Like" type="string"/>
<Parameter key="eventParameter" value='{"uri":"{{uri}}"}' type="_"/>
</Parameters>
</Subject>
</OnLikeS>
<OnCloseS>
<Subject message="/XTC/Analytics/TrackerRecord">
<Parameters>
<Parameter key="eventID" value="/XTC/IntegerationBoard/Close" type="string"/>
<Parameter key="eventParameter" value='{"uri":"{{uri}}"}' type="_"/>
</Parameters>
</Subject>
</OnCloseS>
</EventHandler>
</Style>
</Styles>
<!-- 预创建的实例列表
uid: 实例的唯一ID
style: 使用的样式名
uiSlot: ui的挂载槽路径,空值时使用UI.slot
worldSlot: 3D世界的挂载槽路径,空值时使用World.slot
-->
<Instances>
<Instance uid="default" style="rectangle" uiSlot="" worldSlot=""/>
</Instances>
<!-- 预加载 -->
<Preload>
<!-- 消息订阅的主题
message: 消息
Parameter.key: 参数的键
Parameter.value: 参数的值
Parameter.type: 参数的类型,支持的类型为string,int,float,bool
-->
<Subjects>
<Subject message="/XTC/IntegrationBoard/Open">
<Parameters>
<Parameter key="uid" value="default" type="string"/>
<Parameter key="source" value="assloud://" type="string"/>
<Parameter key="uri" value="XTC.IntegrationBoard/1" type="string"/>
<Parameter key="delay" value="0" type="float"/>
</Parameters>
</Subject>
</Subjects>
</Preload>
</MyConfig>
变量
CloseButton.Subbjects
{{uid}}
string
实例的uid
PageSlot.InlaySubbject
{{uid}}
string
实例的uid
PageSlot.RefreshSubbject
{{uid}}
string
实例的uid
{{bundle_uuid}}
string
当前页面显示资源的包的uuid
{{content_uuid}}
string
当前页面显示资源的内容的uuid
{{content_kv_key}}
string
当前页面显示资源的kvS对应的键
{{content_kv_value}}
string
当前页面显示资源的kvS对应的值
{{uri}}
string
[已弃用] 当前页面显示资源在源中的相对路径, 等于 {{bundle_uuid}}/{{content_kv_value}}
{{content_path}}
string
[已弃用] 当前页面显示内容的路径,等于{{bundle_uuid}}/{{content_uuid}}
TabButton.Subjects
{{uid}}
string
实例的uid
消息订阅
/XTC/IntegrationBoard/ActivatePage
此消息将激活一个标签,打开对应的页面
uid
string
准备创建的实例的uid
page
string
要打开的页面的名称,对应TabButton.name
/XTC/IntegrationBoard/DirectOpen
此消息将首先创建一个集成面板,然后刷新内容并显示,最后对齐到网格。
uid
string
准备创建并打开的实例的uid
style
string
准备创建并打开的实例的样式
source
string
内容的源类型,可选项为assloud://
uiSlot
string
创建完成的实例的挂载槽的绝对路径
uri
string
内容在源中的访问地址
delay
float
延时打开的时间,单位为秒
position_x
float
打开的位置的x坐标
position_y
float
打开的位置的y坐标
/XTC/IntegrationBoard/DirectClose
此消息将关闭并销毁一个集成面板
uid
string
准备关闭并销毁的实例的uid
delay
float
延时关闭的时间,单位为秒
/XTC/IntegrationBoard/Refresh
此消息将刷新一个集成面板
uid
string
准备刷新的实例的uid
source
string
源
bundle_uuid
string
包的uuid
content_uuid
string
内容的uuid
依赖插件
oelMVCS
更新日志
0.24.0
[新增] circle样式 [修改] 配置文件
0.20.0
[新增] 标签显示以及跳转,对应配置字段为LabelButton [新增] 刷新和点赞事件处理,对应配置字段为EventHandler
0.19.0
[新增] 增加配置项自动关闭集成面板 [更新] 切换标语和描述的按钮
0.18.0
[新增] 标语和描述宽度可配置 [修正] 封面图片右部有空白间距
0.17.0
新增:
增加刷新的消息订阅
0.16.0
修改:
加入CoverPicture.maxZoomIn配置项控制封面图片最大放大倍数
0.15.0
修改:
DirectOpen消息,加入uiSlot参数
0.9.0
新增:
支持视频循环,对应配置为:
<VideoLoop mode="none" visible="false"/>
Last updated