首页 > 其他分享 >第二代串口屏UI编辑工具素材格式要求

第二代串口屏UI编辑工具素材格式要求

时间：2023-08-07 17:24:30浏览次数：44  
标签：控件 素材 文件夹 UI 串口 格式 参数 图片

  • UI_Editor是乐升半导体公司开发的一款针对TFT串口屏的显示功能开发的软件，使用UI_Editor编辑工具，用户可以快速对TFT串口屏进行显示功能的开发，使得用户从繁杂的UI开发中挣脱出来，把更多的精力放在底层功能的真正实现上来。
  • 按照UI_Editor的使用说明(详情查看乐升半导体公司官网)，使用该软件建立一个工程，需要准备工程所需要的素材，这里说明一下针对不同的控件需要准备什么样的素材。
  • 这里针对的是UI_Editor-II的v2.0版本的素材说明。

图片素材要求

对于所有的图片素材，BMP和JPG格式的图片采用24位色深，PNG图片采用32位色深。不建议采用8位的图片。

文件素材要求

如下图所示，使用UI_Editor-II新建一个工程时，需要包含以下文件夹，每一个文件夹存放不同的素材，对于一个新的工程，这些文件夹缺一不可，下面详细介绍各个文件夹的素材要求。

image

Picture文件夹

  • 存放内容：页面底图、弹窗底图、键盘底图。
  • 素材格式：BMP、JPG
  • 素材命名：以4位数字给图片编排序号，按照0000~9999排序，固定命名为“xxxx”或者“xxxx_注释”，如“0000_封面底图，0001,0003_底图3”等。
  • 素材要求：各个素材的序号可以留空，但是不可以出现重复的序号。

Icon文件夹

  • 存放内容：小图标素材、图片数字素材、滑动菜单素材、滑条进度条素材、模拟时钟素材等。
  • 素材格式：BMP、JPG、PNG
  • 素材命名：以4位数字给图片编排序号，按照0000~9999排序，固定命名为“xxxx”或者“xxxx_注释”，如“0000_图标1，0001,0003_滑动菜单”等。

FontBin文件夹

  • 存放内容：字库bin文件
  • 素材格式：bin文件
  • 素材命名：以2位数给字库文件编号，按00~35排列，最多只能防止36个字库，命名固定为“xx_Font-注释”
  • 说明：乐升半导体公司为用户提供了字库取模工具，用来给用户自行生成想要的字库，软件下载详情请参考公司官网。

Gif文件夹

  • 存放内容：Gif文件
  • 素材格式：Gif
  • 素材命名：以4位数字给动图编排序号，按照0000~9999排序，固定命名为“xxxx”或者“xxxx_注释”，如“0000_动图1，0001,0003_动图2”等。

WavBin文件夹

  • 存放内容：音频bin文件
  • 素材格式：bin文件
  • 素材命名：以4位数字给音频编排序号，按照0000~9999排序，固定命名为“xxxx”或者“xxxx_注释”，如“0000_音频1，0001,0003_音频2”等。

Video文件夹

  • 存放内容：视频文件
  • 素材格式：avi、mp4
  • 素材命名：以4位数字给视频编排序号，按照0000~9999排序，固定命名为“xxxx”或者“xxxx_注释”，如“0000_视频1，0001,0003_视频2”等。

控件素材要求

按键(Button)、变量调节(Variable Button)和多变量操作(Multi-Variable Button)控件

按键、变量调节、多变量操作控件均有unpressedIcon和pressedIcon两个参数，前一个参数表示未按压所显示的图标，后一个参数表示按压后未松开显示的图标。下面介绍两个属性所需要的图标的格式要求:

  • 图标格式：BMP、JPG、PNG；
  • 存放位置：Icon文件夹
  • 要求：两个参数所使用的的素材的格式要一致；图片的分辨率要一致；
  • 示例如下：
    image

滑动菜单(SlideMenu)控件

滑动菜单控件需要设置两个参数：foreground和background，前一个参数表示前景图，滑动菜单选中区域采用该图对应区域作为显示；后一个参数表示背景图，滑动菜单未选中区域采用该图对应区域作为显示。关于两张图片的格式如下：

  • 素材格式：BMP、PNG，如果IC为LT268x/LT269时只能为BMP格式
  • 存放位置：Icon文件夹
  • 要求：两张图片的素材格式要一致；图片分辨率要一致且满足单张素材H < 8192 且W <8192 且 WH < 800480
  • 图片示例如下：
    image

弹窗(Popupbox)控件

弹窗控件也是一个虚拟控件，可以通过设置unpressedIcon和pressedIcon使得控件实体化（这两个参数可以不设置）；除此之外，弹窗控件还需要一张弹窗页面图。弹窗页面图本质上是一张底图。关于以上素材的格式如下：

  • 素材格式：BMP、PNG，若IC为LT268x/LT269则PNG图分辨率满足W*H<=40000
  • 存放位置：unpressedIcon和pressedIcon素材存放在Icon文件夹内；弹窗页面底图存放在Picture文件夹内。
  • 要求：unpressedIcon和pressedIcon两个参数的素材的素材格式要一致，示例请参考按键控件。弹窗页面底图按照Picture文件夹内素材要求设置即可。

环型触摸(Circular Touch)和环形进度条(Circular Progress Bar)控件

环型触摸控件需要设置三个参数：foreground、background和slideButton，第一个参数表示环型触摸滑动后显示的图片，第二个参数表示环型触摸滑动前显示的图片，第三个参数表示环型触摸的滑动图标；环形进度条需要设置两个参数：foreground和background，其含义与上面相同。以上素材格式如下：

  • 素材格式：PNG
  • 存放位置：Icon文件夹
  • 要求：foreground和background两个参数的素材为正方形且分辨率相同，若IC为LT268x/LT269则fgImage和bgImage的分辨率应满足W=H<=200；slideButton的素材要求和Icon文件夹内素材要求相同。
  • 示例如下：
    image

滑条(Slider Bar)和条形进度条(Progress Bar)控件

滑条控件需要设置三个参数：barIcon、slideButton和background，第一个参数是滑条图标，表示滑动后显示的图片，第二个参数表示滑动图标，第三个参数是滑条控件的背景图，表示滑动前显示的图片；条形进度条有两个参数：progressIcon和background，progressIcon参数与barIcon参数含义一致，以上参数的素材格式如下：

  • 素材格式：PNG
  • 存放位置：Icon文件夹
  • 要求：若IC为LT268x/LT269则background符合W*H<=40000。
  • 示例如下：
    image

数字键盘(Numeric Keypad)、英文键盘(EN_KeyBoard)和中文键盘(CN_KeyBoard)控件

键盘类控件需要设置两张底图，一张作为按压前的键盘图，一张作为按压后的键盘图，按压前的图在键盘控件中的pageID中设置，按压后的图在键盘按键（SingleKey）中的pressPage中设置，以上控件素材格式如下：

  • 素材格式：BMP
  • 存放位置：Picture文件夹
  • 要求：底图分辨率小于屏幕分辨率，按照Picture文件夹内格式要求设置；
  • 示例如下：
    image
    image

键盘类控件除了底图，还需要字库支持，不同的键盘类控件可选的字库不同，数字键盘和英文键盘的字库编码可选ASCII、GBK和GB2312；中文键盘的字库编码只能选GBK

字符串显示(String_Label)、文字滚动(Text Scroll)和字库数字(Text Number Display)控件

三个控件均可以使用编码类型为ASCII、GBK、GB2312和Unicode的字库，当以上控件与键盘控件相关联时，以上控件与键盘控件所选的字库要相同。

图片数字(Graphics Number Display)控件

图片数字控件需要设置两个参数：firstIcon和lastIcon，firstIcon是一组图片的开始图片，lastIcon是一组图片的结束图片，这一组素材格式如下：

  • 素材格式：BMP、PNG(推荐)
  • 存放位置：Icon文件夹
  • 要求：一组图片的编号要连续；要按照【数字0~9、小数点、负号】的顺序排列；所有图片的分辨率要相同，宽高也要相同。
  • 示例：
    image

模拟时钟(Analog Clock)控件

模拟时钟需要设置两个参数：background和centreIcon，前一个参数表示模拟时钟的背景图，后一个参数表示模拟时钟的中心点，其素材格式如下：

  • 素材格式：PNG
  • 存放位置：Icon文件夹
  • 要求：background的素材为正方形，若IC为LT268x/LT269则bgImage的分辨率应满足W=H<=200。
  • 示例如下：
    image

数字时钟(Digital Clock)和计时器(Timer)控件

数字时钟需要设置两个参数：firstIcon和lastIcon，这两个参数需要选择一组数字时钟素材，包括【09、冒号、斜杠（年）、斜杠（月）、斜杠（日）】【星期日星期六】；计时器的素材只需要【0~9、冒号、斜杠（年）、斜杠（月）、斜杠（日）】。其素材格式如下：

  • 素材格式：BMP、PNG（推荐）
  • 存放位置：Icon文件夹
  • 要求：所有的素材按日期素材【09、冒号、斜杠（年）、斜杠（月）、斜杠（日）】、星期素材【星期日星期六】的顺序排列且编号必须连续；日期素材的分辨率要相同；星期素材的分辨率要相同；日期素材和星期素材的分辨率可不相同。
  • 示例如下：
    image

动图(Gif)控件

GIF是一种图片格式，一组连贯的、分辨率相同的图片可以通过特殊的方式压缩成GIF文件。GIF控件需要选择一个动图素材，其素材格式如下：

  • 素材格式：.gif
  • 存放位置：Gif文件夹
  • 要求：若IC为LT268x/LT269，且原图为PNG格式制作GIF时，分辨率符合W*H<=40000 才可以正常播放。

动图所占的内存与其帧数（原图的数量）有关，帧数（原图数量）越多，所占SPI FLASH的内存越大，其计算公式如下：
Size(MB) = W×H×N×K÷1024÷1024，其中W和H为分辨率；N为帧数；K为数据格式系数，数据格式为RGB565时K=2，数据格式为RGB888时K=3 。

音频播放(Audio Play)控件

音频控件需要选择bin文件的音频，其素材格式如下：

  • 素材格式：bin
  • 存放位置：WavBin文件夹
  • 要求：素材的采样率为22050、位数为16位

位元状态(Bit Status)控件

位元状态控件有两个参数：offStateIcon和onStateIcon，需要两张图片素材，其素材格式如下：

  • 素材格式：BMP或PNG
  • 存放位置：Icon文件夹
  • 要求：两张图片的分辨率要一致
  • 示例可以参照触摸控件的示例图

小图标(Icon)

小图标控件有两个参数：firstIcon和lastIcon，可以防止一张或者多张图片，放置多张图片时这些图片为同一组图片，其素材格式如下：

  • 素材格式：BMP、PNG
  • 存放位置：Icon文件夹
  • 要求：同一组图片的标号要连续、其分辨率要一致
  • 示例可以参照触摸控件的示例图

指针(Needle)控件

指针控件有三个参数：background、needleIcon和pivotIcon，第一个参数是指针控件的背景图，第二个参数是指针中针的形状图，第三个参数是指针中心点的素材图。此外指针还有firstIcon和lastIcon两个参数，这两个参数所需要的素材与图片数字中的素材要求一致，这里不再重复。前三个参数的素材格式如下：

  • 素材格式：PNG
  • 存放位置：Icon文件夹
  • 要求：素材的分辨率要小于屏幕分辨率，若IC为LT268x/LT269则W*H<=40000 。
  • 示例如下：
    image

标签：控件,素材,文件夹,UI,串口,格式,参数,图片
From： https://www.cnblogs.com/levetop/p/17571238.html

相关文章

  • Element UI 在非template/render 模式下使用ICON要注意的问题
    有很多时候，我们不需要编译Vue和ElementUI，只是想简单的试用一下，做一个原型出来。我们会使用HTML方式编写，这种方式下，使用ICON需要注意一些问题。1.例如CopyDocument图标，如果是用htmltag方式调用，根据vue的组件规范，驼峰格式需要改写成小写横线分割的格式<copy-document></copy-docu......
  • 关于引用elementui中的el-date-picker组件
    最近有一个需求要用到elementui中的日期选择器组件，但是elementui中的不太满足，在网上找到一个引用里面的组件的教程https://blog.csdn.net/mouday/article/details/103932261但是引用完成后报错Moduleparsefailed:Unexpectedtoken(65:6)Youmayneedanappropriateloader......
  • 实现无限存储：基于JuiceFS 创建 Samba 和 NFS 共享
    随着企业数据量的持续增长，存储容量需求日益增大。如何采用没有容量上限的云存储替换本容量有限的本地磁盘，已成为广泛的需求和共识。特别是在企业中常用的Samba和NFS共享，如果能够使用云存储作为底层存储，就能有效解决存储扩容和本地磁盘损坏导致的数据丢失问题。本文将以Linux......
  • HISUI问题合集
    属于是代码有问题，编译不出来的报错$的用法1、$()可以是$(expresion)，即css选择器、Xpath或html元素，也就是通过上述表达式来匹配目标元素。 比如：$("a")构造的这个对象，是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。如： $("a").click(function(){...}) ......
  • centos generate uuid,install libuuid-devel,compile -luuid
    //installlibuuid-develsudoyuminstalllibuuidlibuuid-devel#include<iostream>#include<stdio.h>#include<uuid/uuid.h>char*uuid_value=(char*)malloc(40);char*get_uuid(){uuid_tnew_uuid;uuid_generate(new......
  • DockerFile 构建缓存 Buildkit
    缓存Dockerfile构建缓存功能从Docker17.05版本开始引入可以加速构建直接服用缓存构建我们看到fromcache就是来自缓存缓存是一个命令为单位如果想服用缓存需要考虑查看缓存大小清除缓存dockervolumeprune--all--forcedockerimageprune--all--force......
  • 如何在 SwiftUI 中创建悬浮操作按钮
    前言悬浮操作按钮（FloatingActionButton,FAB）是一种在Android和MaterialDesign中使用的UI元素。它用于触发特定屏幕的主要操作。尽管它来自Android，但在一些iOS应用中也可以看到这种模式。以下是Twitter应用中悬浮操作按钮的示例。TwitterApp在最重要的操作步骤，发布......
  • Cisco CCNA——Equipment Infrastructure Management
    Equipmentinfrastructuremanagement路由器组件路由器的组成及功能CPU：执行操作系统的指令随机访问存储器（RAM内存）：RAM中内容断电丢失只读存储器（ROM）：开机自检软件，路由器启动引导程序，迷你IOS（防止IOS丢失）非易失（NVRAM）：存储启动配置Flash：运行操作系统（CiscoIOS）Interfaces：拥有多种物理接口用......
  • AI绘画：两组赛博咒语和ComfyUI使用方法
    虽迟但到啊，上次说过要发，必然是要发滴！ ​ 本来我是可以直接发的，但是我又想着发关键词的同时，最好是讲解一下用法，这样更友好。所以就拖了一天！ 下面先展示一下两套咒语的效果：     这套咒语可以生成动物外形的赛博生物，巨......
  • c#串口通信讲解（一）（winform、wpf）
    转载：https://blog.csdn.net/weixin_30466421/article/details/99278174串口操作需要注意的几点如下：1、如果是USB转串口；则需要安装USB转串口驱动，附件有此驱动。2、串口打开状态最好不要直接插拔串口，可能会导致中控板或者串口线烧坏。3、使用串口调试工具CEIWEI，下一章节会贴上......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99