求助，如何在EMwin中，实现在背景图片上显示字符串与数值

xyzjacky

求助，如何在EMwin中，实现在图片上显示字符串与数值。
我想用window控件显示一张背景图片，并在背景图片上显示文字与数值。
文字和数值是变化的，同时，文字和数值只在图片上占用很小的一块儿。

有的帖子里已经提到用WM_PAINT进行重绘，那请问，进行重绘，是不是会将整个背景图片重绘掉？
如不是，那是不是要将文字或数值占据的那一小块的背景图片，进行单独重绘？

本人新手，还望各位多多指教？

eric2013

直接使用TEXT文本控件即可，更新时，它仅会更新它所在的区域。

xyzjacky

eric2013 发表于 2018-5-28 11:13
直接使用TEXT文本控件即可，更新时，它仅会更新它所在的区域。

那请问，如果我的数值是不断变化的、带小数的（来自传感器的），也是用text控件吗？
请问在text控件中怎么具体实现呢？我现在的代码中，是用GUI_DispFloat(float v, char Len);这个函数来实现的，但用这个函数，就不能用图片背景，只能用纯色的背景.

eric2013

xyzjacky 发表于 2018-5-29 10:38
那请问，如果我的数值是不断变化的、带小数的（来自传感器的），也是用text控件吗？
请问在text控件中怎 ...

是的，你用函数sprintf函数转换下就好了。

xyzjacky

eric2013 发表于 2018-5-29 12:10
是的，你用函数sprintf函数转换下就好了。

你好，我的代码当前已经在模拟器上实现了在背景图片上显示文本。但是又遇到新问题，怎么重绘文本呢？
我的文本现在显示的是变动的数据，比如日历时间，
用什么办法回调文本的显示呢，或者说数据改变后数据怎么传进去？

亲，盼望你再指点指点。
下图是现在在模拟器上的显示效果：


以上的显示效果，是在执行CreateFramewin();后得到的。

xyzjacky

^_^，我搞定了！我知道怎么实现TEXT的重绘了，虽然文本控件不支持通知代码。

eric2013

xyzjacky 发表于 2018-6-1 17:48
^_^，我搞定了！我知道怎么实现TEXT的重绘了，虽然文本控件不支持通知代码。

使用emWin自带的定时就可以更新

xyzjacky

eric2013 发表于 2018-6-2 01:39
使用emWin自带的定时就可以更新

请教版主，我现在显示底色为透明的ICON图标，但是实际结果是，图标下面始终有底色怎么办呢？（我两个ICON图标都不需要底色，要透明）
代码如下：
case WM_INIT_DIALOG:
……
                hItem = WM_GetDialogItem(pMsg->hWin, ID_ICONVIEW_1);
                //pData = _GetImageById(ID_ICONVIEW_0_IMAGE_0, &FileSize);
                //ICONVIEW_AddStreamedBitmapItem(hItem, pData, "");
                ICONVIEW_SetIconAlign(hItem, ICONVIEW_IA_TOP);
                //ICONVIEW_SetTextColor(hItem, ICONVIEW_CI_UNSEL, GUI_BLUE);
                //ICONVIEW_SetTextColor(hItem, ICONVIEW_CI_SEL, GUI_GREEN);
                //ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_UNSEL, GUI_BLUE);
                ICONVIEW_SetFrame(hItem, GUI_COORD_X, 0);//设置图标到IconView边框的间距
                ICONVIEW_SetFrame(hItem, GUI_COORD_Y, 0);
                ICONVIEW_SetFont(hItem, GUI_FONT_8_1);
                ICONVIEW_AddBitmapItem(hItem, &bmwindtype_M, "");//添加图标项

                hItem = WM_GetDialogItem(pMsg->hWin, ID_ICONVIEW_2);
                ICONVIEW_SetIconAlign(hItem, ICONVIEW_IA_TOP);
                //ICONVIEW_SetTextColor(hItem, ICONVIEW_CI_UNSEL, GUI_BLUE);
                //ICONVIEW_SetTextColor(hItem, ICONVIEW_CI_SEL, GUI_GREEN);
                ICONVIEW_SetBkColor(hItem, ICONVIEW_CI_SEL, GUI_BLUE);
                ICONVIEW_SetFrame(hItem, GUI_COORD_X, 0);//设置图标到IconView边框的间距
                ICONVIEW_SetFrame(hItem, GUI_COORD_Y, 0);
                ICONVIEW_SetFont(hItem, GUI_FONT_8_1);
                ICONVIEW_AddBitmapItem(hItem, &bmWifi32_X, "");//添加图标项



在模拟器上的执行结果如图：


请问版主，这里初始化时的代码该怎么写呢，才能使图标的背景为透明。
现在作ICON的图片是.png格式且透明的，是用BmpCvtST工具取的.C文件。

eric2013

xyzjacky 发表于 2018-6-4 14:59
请教版主，我现在显示底色为透明的ICON图标，但是实际结果是，图标下面始终有底色怎么办呢？（我两个ICON ...

把你的原始图片上传一张，我看看是不是带alpha透明通道的。

xyzjacky

这个电池电量图片，就是其中一个图标。

xyzjacky

eric2013 发表于 2018-6-4 15:44
把你的原始图片上传一张，我看看是不是带alpha透明通道的。

这个电池电量图标，就是我用的背景透明的图片。

这个图片，用BmpCvtST工具取模，生成.C文件后，再使用GUI_DrawBitmap()函数（不使用窗口管理器）就可以实现透明方式显示。

我要达到的目的是：emwin用于一种手持设备，手持设备的底图是一张图片，然后文本（含数值）、图标（比如电池电量）都要在底图上显示出来，
文本的我算是弄了个雏形了，但是这个图标的就老是弄不对。

eric2013

xyzjacky 发表于 2018-6-4 16:36
这个电池电量图标，就是我用的背景透明的图片。

这个图片，用BmpCvtST工具取模，生成.C文件后，再使 ...

图标没问题，你的BmpCvt要生成ARGB8888格式的，试试看行不。

xyzjacky

eric2013 发表于 2018-6-5 03:46
图标没问题，你的BmpCvt要生成ARGB8888格式的，试试看行不。

现在保存的已经是ARG8888格式的了。
我怀疑，是不是要初始化某些和ICONVIEW相关的函数，才能使用ICONVIEW_AddBitmapItem显示背景透明的图。

我手上的示例代码编译没法通过，所以没法把我取模后的.C文件加进去，测试看到底是哪里不对。

xyzjacky

eric2013 发表于 2018-6-5 03:46
图标没问题，你的BmpCvt要生成ARGB8888格式的，试试看行不。

这个图片，用BmpCvtST工具取模，生成每个像素为32位的.C文件后（即ARGB888），再使用GUI_DrawBitmap()函数（不使用窗口管理器）是可以实现透明方式显示的，但使用了窗口管理之后的ICONVIEW_AddBitmapItem()函数来显示就不行了。以下代码就是我写的模拟器上的，能否请版主测试一下，看看问题在哪里？


这里的模拟器代码有问题，6月13日将其删除，如果还有链接，请大家不要下载。

wx_D4tOZzZO

我创建图标使用的是这个GUI_CreateBitmapFromStream先转换一下 再添加bitmap

xyzjacky

wx_D4tOZzZO 发表于 2018-6-5 16:12
我创建图标使用的是这个GUI_CreateBitmapFromStream先转换一下 再添加bitmap

那为何我现在的程序没有转换，也直接能显示？
注意，我用BmpCvtST工具生成的是.C文件的ARGB888格式的数据。

xyzjacky

eric2013 发表于 2018-6-5 03:46
图标没问题，你的BmpCvt要生成ARGB8888格式的，试试看行不。

请看这个人写的模拟器上的代码，他的运行起来就没有问题，版主和各位朋友可以运行试一试。我的仿照他的写，就是有问题的。

这里的模拟器代码有问题，6月13日将其删除，如果还有链接，请大家不要下载。

eric2013

没有正确调用设置透明效果的函数。

xyzjacky

eric2013 发表于 2018-6-6 00:16
没有正确调用设置透明效果的函数。

把你说的这个地方改了，还是不行。

eric2013

xyzjacky 发表于 2018-6-6 11:20
把你说的这个地方改了，还是不行。

白天有时间了，我测试下你的Demo。

xyzjacky

eric2013 发表于 2018-6-7 02:50
白天有时间了，我测试下你的Demo。

OK，谢谢！

xyzjacky

eric2013 发表于 2018-6-7 02:50
白天有时间了，我测试下你的Demo。

版主，请问你测试过我的demo代码了没？

eric2013

xyzjacky 发表于 2018-6-11 11:09
版主，请问你测试过我的demo代码了没？

收到，有时间了我测试下

xyzjacky

我现在已经实现了显示透明的ICON图标，也找到问题所在点了。只是没有能全面解决。
问题点在于创建窗口及其内容的资源列表，如下：
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
……
{ ICONVIEW_CreateIndirect, "Iconview2", ID_ICONVIEW_1, 242, 2, 32, 32, 0, 0x00200020, 0 }
｝;
这个资源列表是由GUIBuilder.exe工具生成的，在使用GUIBuilder.exe时，点击ICONVIEW生成一个ICONVIEW控件后，对着窗口中的ICONVIEW控件点右键，可以看到右键菜单中只有Delete和Add streamed bitmap item两个选项，也就是删除这个ICONVIEW控件和给这个ICONVIEW控件添加一张流位图。

而和ICONVIEW控件相关的其他设置GUIBuilder.exe并没有生成，因为它根本就没有提供对应的操作。
那么我们就只能手动改造这个资源列表。
ICONVIEW_CreateIndirect这个东西，无论是安福莱，还是正点原子，还是野火等等主流开发板的教程中，都没有讲解，并且在emWin5.2英文手册中，是按<WIDGET>_CreateIndirect来讲解的，
也就是说emWin把它做成了一个通用型的XXXX_CreateIndirect的函数（姑且叫它函数），用于创建一个XXXX型的控件（这个控件就是BUTTON、TEXT等等，具体的大家看开发板教程或中英文手册）。开发板上很注重讲解BUTTON、TEXT等等，对于ICON却是几乎一笔带过。不过我们也可以从安福莱V6_型开发板的教程中，了解一部分<WIDGET>_CreateIndirect的用法。

开发板教程中是以BUTTON_CreateIndirect举例来讲解的，在教程的1126、1127、1139页中分别提及到（不明白这么重要的东西为何是被分开讲的，一个地方讲那么一点儿）。





但是，注意但是，虽然这里把资源列表中的成员构成和相关，这里讲解得还是很笼统，而且明显少了东西，可能是emWin的英文手册都没有讲解全面的原因吧。

请大家看，我把资源列表手动改成了这样，一样的编译通过，且有显示，只是没能实现ICONVIEW控件的透明效果：
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
……
{ ICONVIEW_CreateIndirect, "Iconview1", ID_ICONVIEW_0, 162, 2, 32, 32, WM_CF_SHOW | WM_CF_HASTRANS, 0x00200020, 0},
｝;

之所以没有能实现我想要的透明效果，是因为emWin手册和安福莱的教程中，都没有讲解明白这些传入参数的作用，及其可以是哪些值，
我数了下，总共可以传入14个量的，但是我们看到的是10个，那是因为有些控件是没有相关的传入参数的，如BUTTON的，见教程1127页的截图：




但是这些传入参数可以是哪些值，就真没有讲解明白，至少我在教程里没有看到。要弄清这一点，大概只能去反复阅读emWin5.2中英文手册。
如下图：
<WIDGET>_CreateIndirect的原型：

xyzjacky

以上就是我折腾了两周得到的初步结论。后来为了显示我想要的在背景图片上显示底色透明的图标，我就只好曲线救国，幸运的是，这次没有走弯路，成功了。中间那个为绿色的，右边的为白色的，也就是说各种颜色的图标都能搞定。



然后对安福莱的教程提一个意见：
现在有很多手持式的设备、或着家用电气的控制器，如中央空调各个房间的温控器，又如门禁设备的，，都会采用STM32这种单片机的低成本方案实现（这种低成本方案中都不会采用触摸屏），
在背景图上显示变化的图标是其主要实现的功能，所以教程里应该着重讲一讲ICONVIEW。

另外，关于<WIDGET>_CreateIndirect中的资源列表的各个参数可以是哪些值，也应该为大家讲一讲，毕竟教程写得和emWin手册一样，意义就不大了。

xyzjacky

来，给大伙儿看个完整的图。以及我的模拟器的代码也上传到此，供大家参阅和指点。



模拟器代码：

SeggerEval_WIN32_MSVC_MinGW_GUI_V532 test 0613 - 已经实现在图片上显示透明图标.rar (23.52 MB, 下载次数: 1907)

2018-6-13 11:18 上传

点击文件名下载附件
模拟器代码

xyzjacky

在STM32F103上的的显示效果，因为没有片外FLASH，所以只显示了四分之一的背景图片。

奋进love

这个外壳是3D打印机做的吗？

xyzjacky

奋进love 发表于 2018-6-13 20:53
这个外壳是3D打印机做的吗？

不是。

Jinran

楼主，我用你的实例测试了，数据显示正常透明，但两个图片都是淡蓝色的背景，这是什么情况？也不是你的之前显示的蓝色背景。

eric2013

Jinran 发表于 2023-10-27 18:12
楼主，我用你的实例测试了，数据显示正常透明，但两个图片都是淡蓝色的背景，这是什么情况？也不是你的之前 ...

这个应该是你emWin的颜色格式配置问题。

你显示下0x0000FF和0xFF0000，看看是不是RGB和BGR问题。

Jinran

eric2013 发表于 2023-10-27 18:57
这个应该是你emWin的颜色格式配置问题。

你显示下0x0000FF和0xFF0000，看看是不是RGB和BGR问题。

背景图片显示都跟你的一样，正常，数据也正常的走，透明的。只是那个电池图标和风扇图标，背景没有透明，显示是天蓝色的。

eric2013

Jinran 发表于 2023-10-27 20:27
背景图片显示都跟你的一样，正常，数据也正常的走，透明的。只是那个电池图标和风扇图标，背景没有透明， ...

这个可以考虑下载个透明图标自制添加到工程里面，看看正常不。