UI定制

1. 图层

  • 支持4个图层，分别为Main / Overlay / Pip / Icon

  • Main在最上方，向下依次为Overlay, Pip, Icon

  • AHC层使用其中3层

    Main: 主要贴Warning信息

    Overlay：贴OSD

    PIP：用在预览/回放

2. 字符串

在SDK开发包，Mercury5\proj\sc\project\Dvr_CarDV_SDK\OSDString目录下，有三个文件夹，其中Font，OSDStringsPool这两个文件夹放置OsdStringTable中工具geFont.exe处理后生成的文件。

图 2‑1 字符串文件夹

在OsdStringTable文件夹下找到Excel文档strings.xlsx，打开会看到第一行有"String ID", "English", "SCHINESE", "TCHINESE" 等字符串。

列代表一个国家或地区，新增一列表示新增一种语言。

行代表字符串在各种语言下对应的描述。

图 2‑2 字符串文档

2.1. 字符串转换

  1. 修改第一列的"String ID"， 同步更新后面各语言列，确保一一对应。

  2. 复制Excel文档各语言列的全部内容，保存到对应语言的TXT文件中。如第二列 "ENGLISH" 的全部内容保存到StringTable_English.txt。

  3. 确认批处理文件StringTable.bat是否需要更新，如重定义某语言对应的字体、大小、存放位置等。

    图 2‑3 字符串批处理

  4. 双击StringTable.bat，将会在 "FONT" 文件夹中生成各字符的点阵图，在 "OSDStringsPool" 文件夹中生成字符串包含的各字符数组。

2.2. 字符串链接

  1. 把生成的文件添加到project_Dvr_CarDV_SDK_OSDString.mak。

  2. 把strings.xlsx第一列的 "String ID" 复制到 OSDStrings.h 中。

2.3. 字符串使用方法

AHC_OSDSetFont()

OSD_ShowString()

AHC_OSDDrawText()

AHC_OSDSetColor()

AHC_OSDSetBkColor()

AHC_OSDSetPenSize()

3. 图标

  • 图标格式：.BMP，.PNG

  • 转换工具：uC-GUI-BitmapConvert.exe

  • SDK没有直接解码图标文件，而是通过转换工具把图标转换成.C档

3.1. 图标转换

3.1.1. PNG文件转换

  1. 打开uC-GUI-BitmapConvert.exe

    图 3‑1 图标转换工具

  2. "File -> Open..." 选择需要转换的图标，或者直接把图标拖进窗口

    图 3‑2 打开图标

  3. "File -> Save As..." ，弹出窗口中 "保存类型" 为 "C bitmap file (*.c)"

    图 3‑3 保存文件

    打开保存的文件，可以看到bm1, ac1直接用的是文件名。

    图 3‑4 转换后的文件

3.1.2. BMP文件转换

  1. 打开uC-GUI-BitmapConvert.exe，同3.1.1.1

  2. "File -> Open..." 选择需要转换的图标，或者直接把图标拖进窗口，同3.1.1.2

    图 3‑5 打开图标

  3. "Image -> Convert Into -> Best palette"，优化调色板

    图 3‑6 优化调色板

    它会尽可能的使用相邻色，示例ICON颜色由原来11种减少到了4种。

    图 3‑7优化调色板

  4. "Image -> Transparency..."，弹出窗口会列出当前ICON有用到的所有颜色，从中选择一种作为透明色。

    图 3‑8 选取透明色

    在图3-8中，每个颜色Index高8位为蓝色，中间8位为绿色，低8位为红色，类似0xBBGGRR。

  5. 如果选择0xFF00FF为透明色，工具最下面一栏会显示选择

    图 3‑9 透明色选择成功

  6. "File -> Save As..." ，弹出窗口中 "保存类型" 为 "C bitmap file (*.c)"， 同3.1.1.3

3.2. 图标链接

  1. 把生成的.C文件放到 "Mercury5\proj\sc\project\Dvr_CarDV_SDK\OSDIcon\OSDIcon\src" 目录下面。

  2. 打开project_Dvr_CarDV_SDK_OSDIcon.mak，添加新增的.C档。

  3. 复制.C文件 "GUI_BITMAP" 结构体，打开IconDefine.h，在文档合适位置添加extern声明。

    比如，复制图3-4 295行内容到IconDefine.h中声明：

    extern GUI_CONST_STORAGE GUI_BITMAP bm1;

3.3. 图标使用方法

AHC_OSDDrawBitmap()

AHC_OSDDrawBitmapMag()