Git Product home page Git Product logo

rm-ui-designer's Introduction

RoboMaster UI Designer

如何使用

在bbs上有一个简易的使用教程供参考,也可以直接通过以下途径使用

  1. 直接使用我们的在线Demo
  2. 打开在线Demo后使用浏览器弹出的安装应用功能安装PWA应用以供离线使用
  3. 在Release中下载我们使用Tauri打包的本地应用,支持Windows、Linux、MacOS平台

各客户端可自由选择,数据类型互通,均自备自动更新功能

如果在使用过程中遇到故障,请先测试nightly版本中是否存在相同问题,如有请提交issue或联系作者

自行部署

本项目为纯前端项目,可直接部署在任何静态服务器上,如Nginx、Apache等, 在线demo使用Github Pages托管,如需自行构建前端可以参考以下步骤:

git clone https://github.com/bismarckkk/RM-UI-Designer.git
cd RM-UI-Designer
yarn
yarn build

如果需要自行构建Tauri应用,首先需要配置Tauri编译环境, 然后自行生成签名密钥并配置tauri.conf.json中的tauri.updater.pubKey字段, 将私钥和密码加入环境变量,然后执行以下命令进行构建

yarn tauri build

也可以在Github上Fork我们的项目,利用Github Action进行跨平台构建

路线图

  • 基本组件
    • 直线
    • 矩形
    • 正圆
    • 椭圆
    • 文本
    • 圆弧
    • 自定义背景图
  • 高级组件
    • 旋转矩形
    • 平行四边形
    • 路径
  • 编辑功能
    • 拖拽
    • 缩放
    • 通过缩放翻转
    • 撤销/重做
    • 多选
    • 复制/粘贴
    • 删除
    • 自动保存到浏览器
    • 保存/读取文件
    • 在同一工程中切换frame
  • 高级功能
    • 生成代码
    • 双向模拟器
    • PWA应用
    • Tauri应用
  • 功能改进
    • 文本切换为自绘方案,与客户端对齐
    • 历史记录采用内部事件机制记录,不再保存整个画布

贡献代码

欢迎修复任何bug或添加上述路线图中的功能,请fork本项目主分支,然后提交PR,PR需要任何一个管理员审核通过即可合并

项目结构

详见代码目录结构

组件结构

组件结构

联系作者

rm-ui-designer's People

Contributors

bismarckkk avatar andykong2020 avatar

Stargazers

铋砷_晞 avatar 前尘旧梦 avatar  avatar Qingz avatar  avatar  avatar  avatar Gavin Lee avatar WintBit avatar TIANSHUN MAO avatar Ultra avatar  avatar Falling42 avatar Hengjie Ma avatar Reiky avatar  avatar  avatar  avatar  avatar F avatar  avatar  avatar Chen zhou avatar kaqi avatar Tiny_Fish avatar Bill Jack avatar ENTER avatar  avatar  avatar TuxMonkey avatar  avatar

Watchers

 avatar

rm-ui-designer's Issues

problem: 使用的问题

问几个使用过程中的问题:
1.我在使用这个生成的代码时,是不是只要调用带有init的初始化函数就可以了(当然是加了串口的)?
2.在修改图形时,是不是要对带有updata的函数修改?
updata

init

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.