当背景设置为全透明或半透明时，UI刷新问题

[WeSrc-Yin]

最新awtk代码，将UI背景设置为全透明时，UI不刷新；设置为半透明时，UI刷新慢。
平台：在电脑端Linux系统运行
问题下图。
我跑的是awtk例子程序，MusicPlayer，将主界面main的背景设置为：
/全透明/

<style name="default"> </style>

/半透明/

<style name="default"> </style>

[WeSrc-Yin]

[WeSrc-Yin]

[sohide]

新版本awtk用opengl时使用了脏矩形机制，所以需要指定一个背景色或背景图片才行，没有背景色实际使用感觉也没有什么意义，lcd表面总要以某种颜色刷上去的

[xianjimli]

在style中，给window_manager指定一个背景颜色。

[WeSrc-Yin]

在style中，给window_manager指定一个背景颜色。

什么意思？没明白。就是还是要有背景颜色？在style中，怎么给window_manager指定一个背景颜色？
@xianjimli

[WeSrc-Yin]

新版本awtk用opengl时使用了脏矩形机制，所以需要指定一个背景色或背景图片才行，没有背景色实际使用感觉也没有什么意义，lcd表面总要以某种颜色刷上去的

没有背景色，是有实际应用场景的。做安防视频监控、或者视频播放器时，就是搞一排按钮在下面，其余部分是播放视频的。要是背景不透明，就没法看了啊。不知道我说明白没有。我找个图片贴上来说明下。
@soyzhc

[xianjimli]

styles/default.xml增加：

<window_manager>
  <style name="default">
    <normal bg_color="#f0f0f0"/>
  </style>
</window_manager>

[WeSrc-Yin]

styles/default.xml增加：

<window_manager>
  <style name="default">
    <normal bg_color="#f0f0f0"/>
  </style>
</window_manager>

可以了，谢谢。可是为什么啊？我对代码还不熟悉啊，你们的文档还不够强大啊，文档我都看完了，到目前为止也不理解。。。
@xianjimli

[xianjimli]

不好意思。主要我们自己也还没这样用过，我写个文档吧。

正常情况下，不需要绘制窗口管理器的背景，因为窗口管理器被窗口完整覆盖了，绘制了也是浪费。

你遇到的情况需要绘制，否则透明部分的数据是不确定的。

[WeSrc-Yin]

不对，加了
<window_manager>

<style name="default"> </style>

</window_manager>
也不行，我原本想显示视频的地方会被"#f0f0f0"颜色盖住。开始在电脑上模拟跑一下，不刷新问题是ok了，但移植到linux-arm平台上后，"#f0f0f0"会把我原本打算用来显示视频的地方盖住了，视频看不到了。
我换成<normal bg_color="rgba(122,123,124,0)"，又会不刷新。
@xianjimli

[xianjimli]

视频是怎么显示的，是放在mutable image里的，还是直接写的fb。

[WeSrc-Yin]

视频是怎么显示的，是放在mutable image里的，还是直接写的fb。
直接写的fb

[WeSrc-Yin]

[WeSrc-Yin]

如上图，红色矩形区域时用来显示视频的，比如实时监控视频，或者回放监控视频。绿色区域时我们的UI，可以操作上下曲或者进入设置界面设置某些参数之类的

[xianjimli]

UI FB的格式是RGBA8888之类带透明通道的吗？

[WeSrc-Yin]

UI FB的格式是RGBA8888之类带透明通道的吗？

是，
fb->var.bits_per_pixel = 32;
fb->var.transp.offset = 24;
fb->var.red.offset = 16;
fb->var.green.offset = 8;
fb->var.blue.offset = 0;

fb->var.transp.length = 8;
fb->var.red.length = 8;
fb->var.green.length = 8;
fb->var.blue.length = 8;

[xianjimli]

我先想想。

[xianjimli]

我增加了TK_CLEAR_IMAGE_ALPHA 宏，alpha为这个值的颜色，直接写入framebuffer，缺省为0。你把窗口的背景颜色设置成rgba(0, 0, 0, 0)试试。

[xianjimli]

视频的图像数据最好用mutable image来显示，这样放到任何地方都可以。

[WeSrc-Yin]

在lcd_mem_linux_sync(lcd_t* lcd)函数里面加下面这句话
memset(lcd_mem->offline_fb, 0, size);也可以达到你加这个宏的效果
，但是回到我这个问题的最开始，就是在电脑端Linux系统运行awtk的demo，仍然存在不刷新的问题。

我的软件最终是要在linux-ARM上运行的，目前是没问题了，但是在电脑端linux调试UI时，就会不刷新

[WeSrc-Yin]

视频的图像数据最好用mutable image来显示，这样放到任何地方都可以。

你说的这个mutable image，我没用过，我几个同事也没用过，惭愧。。。。

[WeSrc-Yin]

我增加了TK_CLEAR_IMAGE_ALPHA 宏，alpha为这个值的颜色，直接写入framebuffer，缺省为0。你把窗口的背景颜色设置成rgba(0, 0, 0, 0)试试。

李老师，更新最新代码，TK_CLEAR_IMAGE_ALPHA宏设置为0x00后，混色会出问题，会把原来没透明的地方变成了透明的，大概观察了下问题的现象，黑色#000000、浅黑色（例如#010101）就会被透掉。如下面的style：

<style name="default"> </style> <style name="label_1"> </style> 当使用style default时，这个label会被透掉，使用label_1时是ok的。 不知道底下是不是对000000色是怎么处理的？ @xianjimli

[xianjimli]

黑色（#000000）的alpha值是0xff啊。理论上，应该不会，我看看。

[xianjimli]

我这里没问题啊。把你的style文件贴上来我看看吧。

[xianjimli]

用mutable image吧：https://github.com/zlgopen/awtk/blob/master/docs/manual/mutable_image_t.md

[xianjimli]

我把TK_CLEAR_IMAGE_ALPHA去掉了，mutable image才是完整的解决方案。

[WeSrc-Yin]

style文件如下，不过我觉得跟style文件关系不大，不支持上传xml文件，我把它贴到txt文件了
window_factory_set.txt

[WeSrc-Yin]

不过我还是觉得awtk地下对背景透明处理得有问题。当背景透明时，叠在上层的控件半透明就无法实现。

<style name="default"> </style>

参数a会被当成1或0处理，不能做到0.5等半透明的效果。你们可以在你们自己的demo上测试。
@xianjimli

[xianjimli]

我试了一下，如果窗口透明，给window manager设置背景颜色，是没有问题的。

你还是试下mutable image吧。

[WeSrc-Yin]

我试了一下，如果窗口透明，给window manager设置背景颜色，是没有问题的。

你还是试下mutable image吧。

1、嗯，我试下mutable image。
2、但是，李老师，窗口全透明，上层再叠加控件，控件做不到半透明的。就是做不到像上面我贴的男人洗澡的图片那个半透明的效果，我整理下我的代码后上传给你看看。
3、我小小的修改了你们的MusicPlayer-Demo的主题文件default.xml如下：
<window_manager>

<style name="default"> //搞成红色的 </style>

</window_manager>

<style name="default">
//窗口搞成全透明的
</style>
<style name="black">

</style>
<style name="white">

</style>
<style name="bg_main">

</style>

.
.下面的主题省略。。
.

ui的main.xml文件指定使用上面的default主题（即全透明）
编译，在电脑Linux环境下跑起来底是红色的，即是window_manager设置的颜色，(如下图)。当然，不刷新的问题是没有了，因为这样做就相当于窗口不透明了，窗口不透明的时候刷新是没有问题的，跟加不加
'<window_manager>

<style name="default"> //搞成红色的 </style>

</window_manager>'
没关系

所以，你上面说“给window manager设置背景颜色，是没有问题的。”，我比较疑惑。

[WeSrc-Yin]

[xianjimli]

<window_manager>
  <style name="default">
    <normal bg_image="bricks" bg_image_draw_type="repeat"/>
  </style>
</window_manager>

<view>
  <style name="test">
    <normal bg_color="rgba(0, 0, 0, 0.5)" border_color="#a0a0a0" />
  </style>
</view>

<window>
  <style name="default">
    <normal bg_color="rgba(0, 0, 0, 0)"/>
  </style>
</window>

ui

<window anim_hint="htranslate">
  <view style="test" x="0" y="10" w="100%" h="100" children_layout="default(r=1,c=3,s=20,m=20)">
    <button name="close" text="1" x="0" y="0" w="128" h="30"/>
    <button name="close" text="2" x="0" y="0" w="128" h="30"/>
    <button name="close" text="3" x="0" y="0" w="128" h="30"/>
  </view>
</window>

我在PC上测试的。

[WeSrc-Yin]

我跟你一样啊，当窗口不透明时，上层叠加的控件是可以做到半透明的。我是说当窗口全透明时，上层叠加的控件就不能半透明了。
你的xml文件看起来虽然是窗口透明，但你的底层window_manager还是填充了一张图片的嘛。你改成这样试下，肯定不行。
<window_manager>

<style name="default"> </style>

</window_manager>

[xianjimli]

那是自然。一定要有底色，否则和谁进行alpha混合呢？

[WeSrc-Yin]

那是自然。一定要有底色，否则和谁进行alpha混合呢？

那我要做那种视频播放视频时，我悬浮在视频上面的按钮等UI，就不能做半透明了？或者说我播放的视频要有alpha通道才能做半透明？我上面贴的 男人洗澡的图，男人洗澡这个画面是视频的内容，下面及上面用绿色框框起来的是画的UI

我表述清楚了没？

[xianjimli]

在视频存在的时侯，就有了底色，应该是没问题的，要不就是在没有播放视频的时候，提供一个底色。否则每次绘制都没有清除底色，底色不断叠加，颜色是不确定的。

[WeSrc-Yin]

还有两个问题，李老师有没有什么想法或建议：
1、你上面说，“一定要有底色，否则和谁进行alpha混合呢”，我觉得
<window_manager>

<style name="default"> </style>

</window_manager>
加这个其实是有给window_manager设置颜色的，只是alpha值为0，上面的UI就可以跟这个底色混合吧？
2、上面这个bg_color="rgba(0,0,255,0)"，这个bg_color在代码的哪儿解析的？我上面的赋值是bgra，即下面这样的代码，上面也贴了这段代码：
fb->var.bits_per_pixel = 32;
fb->var.transp.offset = 24;
fb->var.red.offset = 16;
fb->var.green.offset = 8;
fb->var.blue.offset = 0;

bgra跟你这个rgba顺序不一样，会不会对做半透明有影响？所以，我再找底层代码怎么解析xml文件里面的这个bg_color="rgba(0,0,255,0)"参数？？
@xianjimli

[WeSrc-Yin]

对了，我验证了下，awtk版本39678db0e是ok的，就是说，版本39678db0e当窗口设置为全透明时，不需要给window_manager设置背景色，界面可以刷新。（我仍然是在MusicPlayer-Demo上测试的，就是将awtk恢复到版本39678db0e，将MusicPlayer-Demo的背景改成全透明）

所版本615c27就开始出这个问题了，对比了下这两个版本，改动还是很大的。特别是vgcanvas_nanovg_gl.c改动相当大，是不是跟这里面的改动有关系，李老师忙的话，可以让你其他同事查一下。查一下这两个版本之间是不是有考虑不周全的地方。
@xianjimli

[WNsACE]

我觉得你应该是采用了gles的模式，因为在615c27版本加入了opengles的脏矩形机制，所以导致出现了这个问题，之前的版本由于没有脏矩形，每次都是在新的opengl的fb上面刷整屏幕的数据，所以对于透明部分就没有问题，但是加入了fbo的脏矩形机制后，只会把脏区域刷新，而且是在fbo上面刷，不是在新的opengl的fb上面刷（新的opengl的fb是全透明的），所以就会出现透明区域的残影问题，我觉得你的项目应该让awtk制定的fb，然后后台播放的视频又刷到另外一个fb上面，最后通过硬件混合把两个fb合在一起吧？如果是这样的话，我建议可以把视频通过mutable_image控件显示到awtk中，然后在awtk中做界面这样可能会比较好操作

[Zhaotianzheng]

@WeSrc-Yin 大佬，这个问题最后咋解的呀，我也是类似场景，由于我们需要在gui起来之前就显示流，所以mutable image不太合适。
我尝试了开启WITH_LCD_CLEAR_ALPHA，但还是没有作用。