MiaoUI library

MiaoUI是一套轻量级高性能的跨平台DirectUI渲染引擎库并用于我们的一些内部项目

MiaoUI Core 仅用于内部项目如果你具有访问权限请转到MiaoUI仓库本页面仅为面向开源项目的MiaoUI Lite页面

MiaoUI Lite

MiaoUI Lite 是 MiaoUI Core 的精简版去除了大部分小型项目不常用的功能并完全开放源代码可以为小型项目提供快速美观的配置GUI 本项目也可作为一个起始框架来自定义改造

部分功能需要在Mui_Config.h中启用对应的宏定义

功能差异

XML语法

MiaoUI使用XML作为中间语言来创建UI 例如

<UIControl size="100%,100%" align="Center" bgColor="@hex:ffffff">
  <UIControl autoSize="true" align="LinearV">
    <UILabel fontSize="14" text="hello world!" fontColor="50,150,50,255" />
    <UIButton pos="0,5" text="click here" />
  </UIControl>
</UIControl>

screenshot

Lite版本完全兼容Core版本的XML控件语法 Core的代码可以直接迁移至Lite 反之亦然但请注意版本对应 Lite版本从2.0.8开始兼容Core 2.1.0的语法

完整的控件属性列表详见AttribName.txt和GeometryXML.txt文件

或者直接查看对应控件的头文件例如 Mui_Button.h 所有控件的属性列表都在头文件有注释

若要从Core版本迁移到Lite版本部分功能Lite不支持以下列表列出具体项目

| 平台支持 | Core v2.1.0 | Lite v2.0.8 | | --- | :---: | :---: | | Windows | 7+ | XP+ | | Android | 7+ | | Linux | X11 GUI |

</details> <details> <summary>用户层API</summary>

| 控件 | Core v2.1.0 | Lite v2.0.8 | | --- | :---: | :---: | | UIButton | ✔ | ✔ | | UICheckBox | ✔ | ✔ | | UIColorPicker | ✔ | ✔ | | UIComBox | ✔ | ✔ | | UIControl | ✔ | ✔ | | UIEditBox | ✔ | ✔ | | UIEffectLayer | ✔ | | UIGroup | ✔ | | UIIconBtn | ✔ | | UIImgBox | ✔ | ✔ | | UIImgListBox | ✔ | | UILabel | ✔ | ✔ | | UIListBox | ✔ | ✔ | | UIMenu | ✔ | | UINavBar | ✔ | Basic | | UIPanel | ✔ | ✔ | | UIProgress | ✔ | ✔ | | UIScroll | ✔ | ✔ | | UISlider | ✔ | ✔ | | UISwitch | ✔ | | UIVideoPlayer | ✔ | | UIPage | ✔ | | UIDialogPage | ✔ | | UITabPage | ✔ |

| 资源类 | Core v2.1.0 | Lite v2.0.8 | | --- | :---: | :---: | | DMResFile V1 | ✔ | ✔ | | DMResFile V2 | ✔ |

| 其他功能 | Core v2.1.0 | Lite v2.0.8 | | --- | :---: | :---: | | SVG图像渲染 | ✔ | | 缓动和动画效果 | ✔ | | GPU硬件加速 | ✔ | | 内存字体加载器 | ✔ | | 滤镜效果 | ✔ | | 帧缓存和批渲染 | ✔ | | EditBox硬件加速 | ✔ | | 亮/暗模式默认样式 | ✔ | 仅亮模式 | | D3D设备丢失资源重建支持 | ✔ | | UIBasicWindow脏区域支持 | | ✔ | | 高DPI缩放支持 | ✔ | ✔ |

</details> <details> <summary>底层API</summary>

| 图形后端 | 适用平台 | Core v2.1.0 | Lite v2.0.8 | | --- | --- | :---: | :---: | | GDIPlus 1.0 | Windows | | ✔ | Direct2D 1.1/D3D11 | Windows | ✔ | | OpenGL Core 3.3 | Windows/Linux | ✔ | | OpenGL ES 3.2 | Android | ✔ |

GDIPlus渲染器不支持以下接口

Render:

CreateSVGBitmap

CreateSVGBitmapFromXML

DrawBatchBitmap

DrawBitmapEffects

Font:

SetFontSize的range参数

SetFontStyle的range参数

SetFontColor的range参数

| 音频后端 | 适用平台 | Core v2.1.0 | Lite v2.0.8 | | --- | --- | :---: | :---: | | DirectSound | Windows | ✔ | OpenSL ES | Windows | ✔ | | PulseAudio | Linux |

| 解码器 | Core v2.1.0 | Lite v2.0.8 | | --- | :---: | :---: | | wave | ✔ | | mp3 | ✔ | | ogg | ✔ | | ffmpeg(可选) | ✔ |

</details>

快速开始

先决条件

Visual Studio 2022
C++ MSVC v143生成工具
Windows 10/11 SDK

Lite版本仅支持Windows 使用Visual Studio进行开发如果要支持Windows XP 你需要改用MSVC v141 WindowsXP工具集 MiaoUI基于C++17标准编写

你可以转到Release页面下载已经编译好的库或者自行编译

如果要自行编译请继续阅读以下内容

克隆本储存库然后打开MiaoUI.sln 此解决方案分为3个项目按需进行编译

MiaoUILite - 项目核心库
MiaoUITest - 用于测试的一个项目可以测试库是否正常运行
DmResEditor - DMResFile V1的文件编辑器如果你打算使用这个文件系统可以用它编辑dm资源文件

在编译之前你可以修改MiaoUILite项目下的Mui_Config.h文件来控制一些功能的开关

生成并运行MiaoUITest项目这会自动编译MiaoUILite库生成后的库文件位于.\MiaoUI\library目录下

注意项目默认是静态链接的 Release:/MT Debug:/MTD 如果你想使用运行库可以修改编译选项

开始使用

<details> <summary>一个简单的demo</summary>

创建一个新的C++项目并设置好附加库目录到MiaoUI的library文件夹添加MiaoUI的src\include目录到附加头文件目录 无需向编译器添加附加库文件名 mui头文件已经添加了链接指令

项目必须基于C++17及以上

#include "Mui.h"

using namespace Mui;

int APIENTRY wWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPWSTR lpCmdLine, int nCmdShow)
{
  //注意 MiaoUI支持每个显示器的高DPI缩放 你可以在清单设置 或使用代码告诉系统 DPI由我们自己管理
  //Windows 8+才支持此API 低版本系统无需设置
  SetProcessDpiAwarenessContext(DPI_AWARENESS_CONTEXT_PER_MONITOR_AWARE_V2);

  //设置MiaoUI默认的异常最后处理函数 你也可以自己设置回调 空留为默认
  M_SetLastExceptionNotify();

  //初始化界面库 全局仅有一个MiaoUI类
  MiaoUI engine;
  std::wstring err;
  if (!engine.InitEngine(err))
  {
    MessageBoxW(nullptr, (L"MiaoUI初始化失败! 错误信息: " + err).c_str(), L"error", MB_ICONERROR);
    return 0;
  }

  //创建窗口上下文
  std::wstring title = L"MiaoUI Demo " + std::wstring(Settings::MuiEngineVer) + L" - Test";
  MWindowCtx* windowCtx = engine.CreateWindowCtx(UIRect(0, 0, 452, 328), MiaoUI::MWindowType::Normal, title, true, true);

  //加载默认的UI样式
  windowCtx->XML()->LoadDefaultStyle();

  //绑定全局控件事件回调
  windowCtx->SetEventCallback([](MWindowCtx* ctx, UINotifyEvent event, Ctrl::UIControl* control, _m_param param)
  {
    //你可以通过全局事件回调和MUIEVENT宏来处理控件事件
    //也可以通过绑定对应控件的EventSlot来单独处理
    if (MUIEVENT(Event_Mouse_LDown, L"test_button"))
    {
      MessageBoxW(ctx->Base()->GetWindowHandle<HWND>(), L"hello world!", L"msg", MB_OK);
      return true;
    }
    return false;
  });

  //初始化窗口
  bool result = windowCtx->InitWindow([](MWindowCtx* ctx, Ctrl::UIControl* root, XML::MuiXML* xmlUI)
  {
    //可以通过MXMLCODE宏内联XML代码
    std::wstring_view xml = MXMLCODE(
    <UIControl size="100%,100%" align="Center" bgColor="@hex:ffffff">
      <UIControl autoSize="true" align="LinearV">
        <UILabel fontSize="14" text="hello world!" fontColor="50,150,50,255" />
        <UIButton pos="0,5" text="click here" name="test_button" />
      </UIControl>
    </UIControl>
    );

    return xmlUI->CreateUIFromXML(root, xml.data());
  }, false);
  if(!result)
  {
    MessageBoxW(nullptr, L"初始化窗口失败！XML代码不正确", L"error", MB_ICONERROR);
    return 0;
  }

  //可以访问窗口类设置更多
  auto base = windowCtx->Base();

  base->CenterWindow();
  
  //base->ShowDebugRect(true); //显示控件边界区域 用于调试
  //base->SetRenderMode(true); //启用即时渲染模式 可用于连续画面或者压力测试

  base->ShowWindow(true);

  //base->SetMaxFPSLimit(60); //限制渲染的最大帧率

  //窗口消息循环 直到窗口关闭
  windowCtx->EventLoop();
  return 0;
}

</details>

MiaoUILite

Install / Use

README