The latest version of the development branch picture preview white screen

[wmysummer]

Environment

• Raspberry Pi Hardware Version: Raspberry Pi 4
• Raspberry Pi Network Setup: built-in WiFi
• Screenly OSE Version: master@de1d6e6

I use balena etcher to burn "2021-01-11-raspios-buster-armhf- lite.img ", and then use" $bash < (curl - sl https://www.screenly.io/install-ose.sh ）"Installation of the master/development version. The video can be displayed normally, but some pictures will not be displayed and will be displayed on the white screen.



This is a picture that cannot be displayed properly

[vpetersson]

Can you post the logs?

$ cd ~/screenly
$ docker-compose logs
[....]

[wmysummer]

Can you post the logs?

$ cd ~/screenly
$ docker-compose logs
[....]

logs.zip

[vpetersson]

I see a number of errors trying to access various endpoints (such as GitHub). I'm not sure if that is related, but could you try to see if it works with proper internet connection?

[wmysummer]

I see a number of errors trying to access various endpoints (such as GitHub). I'm not sure if that is related, but could you try to see if it works with proper internet connection?

Yes, the raspberry network is connected

[vpetersson]

Could you try:

$ curl https://api.github.com/repos/screenly/screenly-ose/git/refs/heads/master

That's where the error happens.

[wmysummer]

Could you try:

$ curl https://api.github.com/repos/screenly/screenly-ose/git/refs/heads/master

That's where the error happens.

Hello, what is the problem that causes the white screen?

[ealmonte32]

@wmysummer , in the meantime , can you tell me if this is the image exact URL of the image not showing?

https://user-images.githubusercontent.com/28956825/108156569-df56de80-711b-11eb-9789-6a4716923d55.png

It is the one you posted/uploaded in the beginning, I want to try it on my Pi4 to see.
I will also try it both as a URL (raw) and as an uploaded local asset, after you confirm that I will be using the correct image file.

[wmysummer]

@wmysummer，同时，您能告诉我这是否是未显示图片的图片确切网址吗？

https://user-images.githubusercontent.com/28956825/108156569-df56de80-711b-11eb-9789-6a4716923d55.png

它是您一开始发布/上传的，我想在Pi4上尝试一下。
在确认我将使用正确的图像文件后，我还将尝试将其作为URL（原始）和上载的本地资产。

Yes, I also tried to convert it to JPG format, but it still can't be displayed normally,I don't know if it's a problem of resolution. I tried 1920x1080 and 3840x2160 for the image that can't be displayed normally.But the image below can be displayed normally

[ealmonte32]

Ok, here are the results of my troubleshooting:

After I uploaded the image locally, I renamed it to remove the ".png" from the name, then refreshed and assets and it showed.
Then after disabling it and enabling it, it didn't show, so this was not consistent.

I changed the size to 2048x1152 and uploaded it locally, and it worked every time.
I changed the size to 3000x1688 and uploaded it locally and works as well every time.

It may simply be a resolution issue, I don't know what is the highest it can go before reaching 4K (3840x2160) and not working, but I think 3000x1688 cannot be differentiated from 3840x2160 when looking at the TV, of course this depends on your TV and its capabilities but since mine is not 4K capable I cannot tell the difference.

Reference for my Pi4 connected TV: [HDMI CUSTOM RGB lim 16:9], 1920x1080 @ 60.00Hz, progressive

[wmysummer]

好的，这是我的故障排除结果：

在本地上传图像后，我将其重命名以从名称中删除“ .png”，然后刷新并显示资产并显示出来。
然后禁用并启用它之后，它没有显示，因此不一致。

我将尺寸更改为2048x1152并在本地上传，每次都可以使用。
我将尺寸更改为3000x1688并在本地上传，每次都可以正常运行。

这可能只是分辨率问题，我不知道达到4K（3840x2160）并无法正常工作之前可以达到的最高水平，但是我认为在看电视时无法将3000x1688与3840x2160区分开来，当然这取决于您的电视及其功能，但由于我的电视不具备4K功能，因此我无法分辨出两者之间的区别。

我的Pi4联网电视的参考： [HDMI CUSTOM RGB lim 16:9], 1920x1080 @ 60.00Hz, progressive

I try to set raspberry to CEA mode 16 to display 1080p image resources normally, 2160p resources to display white screen, and set raspberry to CEA mode 95 to display all 1080p and 2160p image resources on white screen

[ealmonte32]

I try to set raspberry to CEA mode 16 to display 1080p image resources normally, 2160p resources to display white screen, and set raspberry to CEA mode 95 to display all 1080p and 2160p image resources on white screen

What happens when you set it as Default (monitor preferred resolution) under the raspi-config settings?

By the way, when I say I change the resolution of the image, I mean I used a program to convert the size of the image from the original you posted, to the resolution I mentioned, without changing the monitor or raspberry pi resolution.
It seems to work on my end, so we just have to find the configuration that works for your TV/Pi4.

[wmysummer]

我尝试将树莓派设置为CEA模式16以正常显示1080p图像资源，将树莓派设置为CEA模式95以在白色屏幕上显示所有1080p和2160p图像资源

在raspi-config设置下将其设置为Default（显示器首选分辨率）时会发生什么？

顺便说一句，当我说要更改图像的分辨率时，我的意思是我使用了一个程序，将图像的大小从您发布的原始图像转换为我提到的分辨率，而无需更改显示器或树莓派的分辨率。
它似乎可以正常工作，所以我们只需要找到适用于您的TV / Pi4的配置即可。

Default is "state 0xa [HDMI CUSTOM RGB lim 16:9], 3840x2160 @ 30.00Hz, progressive",The 3840x2160 resolution image will display a white screen. Compared with the previous non docker version of screenly ose, it is not very stable.

[ealmonte32]

Ok so for testing purposes, can you change your resolution on the TV to something lower?
Then also you need to change resolution of the image, so here I am attaching the resized ones for you to test.
Download them, then upload as assets.

2048x1152:

3000x1688:

[wmysummer]

Ok so for testing purposes, can you change your resolution on the TV to something lower?
Then also you need to change resolution of the image, so here I am attaching the resized ones for you to test.
Download them, then upload as assets.

2048x1152:

3000x1688:

My TV can't set the screen resolution manually. I set the resolution to 1920x1080 through raspi config. The 2048x1152300x1688 resolution image you gave me and the 1080p image I uploaded can be displayed normally. 3840x2160 resolution image will still display white screen. I found that docker version of screenly ose sometimes has a short pause when switching pictures, which is not very smooth and seamless. When switching to a picture with a resolution higher than 1080p, it will be stuck for 1 or 2 seconds,I think it might be the performance of the browser or docker.

[ealmonte32]

The black line is usually overscan, read up here what I suggested to someone to manually reduce the black edges which always works because you make it your preferred configuration:
https://forums.screenly.io/t/how-to-change-default-monitor-resolution/475/8

But, you should test different numbers so that you dont cut off the image, for example load up a page that has a lot of white around it, like google.com, then use that as the way to measure how much you should be reducing the numbers I list on the overscan area. Then, when you finally got the entire white touching the furthest area of the monitor without cutting off the actual image, this is considered your fit-to-screen overscan numbers, that is the best we can do to get your image to fill the whole screen.

[ealmonte32]

I found that docker version of screenly ose sometimes has a short pause when switching pictures, which is not very smooth and seamless. When switching to a picture with a resolution higher than 1080p, it will be stuck for 1 or 2 seconds,I think it might be the performance of the browser or docker.

Yes I experienced this as well, this is due to the size / quality of the image being displayed in terms of quality/file size, for example I can take the same 3000x1688 resolution image and export it as JPEG with quality reduced, and the load time goes from the 2 seconds your original PNG took, to 1 second with the JPEG reduced size image..

[wmysummer]

The black line is usually overscan, read up here what I suggested to someone to manually reduce the black edges which always works because you make it your preferred configuration:
https://forums.screenly.io/t/how-to-change-default-monitor-resolution/475/8

But, you should test different numbers so that you dont cut off the image, for example load up a page that has a lot of white around it, like google.com, then use that as the way to measure how much you should be reducing the numbers I list on the overscan area. Then, when you finally got the entire white touching the furthest area of the monitor without cutting off the actual image, this is considered your fit-to-screen overscan numbers, that is the best we can do to get your image to fill the whole screen.

thank you，The problem of black edge has been solved by disabling underscan. Now the problem is whether the docker version of screenly ose does not support 4K resolution image display？

[ealmonte32]

The issue with 4K resolution has to do with the software displaying the images yes, I believe this is omxplayer at the moment, and this is an example reason why it doesnt support 4K.

As you know, you are already running 4K because as you posted your resolution it shows:

Default is "state 0xa [HDMI CUSTOM RGB lim 16:9], 3840x2160 @ 30.00Hz, progressive",

I remember helping you on this issue: #1355

Did you try to set the boot/config.txt we talked about there? hdmi_enable_4kp60=1
That is just so you get the 60hz and not 30hz, nothing to do with 4K resolution images.

Also, you can read this guide very quickly here about where you have to connect HDMI and what type of cable required, etc, just to make sure you have the requirements on your end.

Now.. if you are willing to tinker yourself with code, you can do something with VLC to try and display 4K images, but that is out of the scope of this Screenly issue. Also, as you know it is open source so you could contribute to code if you manage to get the 4K working with using some codec/program for raspbian that works and replaces omxplayer.

[wmysummer]

The issue with 4K resolution has to do with the software displaying the images yes, I believe this is omxplayer at the moment, and this is an example reason why it doesnt support 4K.

As you know, you are already running 4K because as you posted your resolution it shows:

Default is "state 0xa [HDMI CUSTOM RGB lim 16:9], 3840x2160 @ 30.00Hz, progressive",

I remember helping you on this issue: #1355

Did you try to set the boot/config.txt we talked about there? hdmi_enable_4kp60=1
That is just so you get the 60hz and not 30hz, nothing to do with 4K resolution images.

Also, you can read this guide very quickly here about where you have to connect HDMI and what type of cable required, etc, just to make sure you have the requirements on your end.

Now.. if you are willing to tinker yourself with code, you can do something with VLC to try and display 4K images, but that is out of the scope of this Screenly issue. Also, as you know it is open source so you could contribute to code if you manage to get the 4K working with using some codec/program for raspbian that works and replaces omxplayer.

Yes，#1355 The problem is to use the non docker version of screenly ose, to solve the 4K resolution image display problem by using 3840x2160 resolution images.
OK, thank you very much. I'm not a developer, so I'm not very familiar with the source code of VLC player called by screenly ose. So if I want to use docker version of screenly ose, I can only use 1080p resolution image resources for the time being. Another problem is that the browser can't display Chinese fonts. I have installed a Chinese font library on raspberry and set locale to zh_ CN.UTF -8

[ealmonte32]

Where did you put the chinese font libraries? because remember the docker containers are created/built using the Dockerfile, therefore you would need to include these fonts in that Dockerfile as far as I know, or I would first try to install it inside the containers by getting into them and executing the install there... hmm.. i will give it a quick try.

Show me a website where chinese fonts are showing properly, and how the screenly Webview browser doesnt show them properly?

Update* nevermind I will just check baidu and see, I already see the fonts come out as rectangles.. will test and see..

[wmysummer]

Where did you put the chinese font libraries? because remember the docker containers are created/built using the Dockerfile, therefore you would need to include these fonts in that Dockerfile as far as I know, or I would first try to install it inside the containers by getting into them and executing the install there... hmm.. i will give it a quick try.

Show me a website where chinese fonts are showing properly, and how the screenly Webview browser doesnt show them properly?

Update* nevermind I will just check baidu and see, I already see the fonts come out as rectangles.. will test and see..

Thank you very much. The website is"https://tianqi.qq.com/index.htm" I installed the open source Chinese font library on raspberry through "sudo apt-get install ttf-wqy-zenhei",And then through "sudo raspi-config"to configure Localisation Options，I used to use this solution to solve the problem of displaying Chinese fonts in non docker screenly ose. I forget that WebView is encapsulated by docker now. I will look for relevant information and try to solve it.

[ealmonte32]

Yes, I believe just simply include these packages for fonts in the Dockerfile for base/viewer inside the /screenly/docker/ folder.. and rebuild the images by running ./screenly/bin/upgrade_containers.sh
https://github.com/Screenly/screenly-ose/blob/master/bin/upgrade_containers.sh

This will then have the docker containers have your fonts in the underlying system.

[wmysummer]

Yes, I believe just simply include these packages for fonts in the Dockerfile for base/viewer inside the /screenly/docker/ folder.. and rebuild the images by running ./screenly/bin/upgrade_containers.sh
https://github.com/Screenly/screenly-ose/blob/master/bin/upgrade_containers.sh

This will then have the docker containers have your fonts in the underlying system.

I changed it". / screenly/docker/Dockerfile.base and Dockerfile.viewer File, added 'ttf-wqy-zenhei' to the file, and then executed "upgrade_containers.sh", but it still can't display Chinese font normally. What's wrong with my operation?

[ealmonte32]

Basically the upgrade containers script needs some work when the Dockerfile has been changed but this is some issue with docker-compose because it should automatically just rebuild the containers when it detects the changes..

Here it is working after making the changes I mention later on the post:

After you add these two packages (ttf.. and fonts-arph..) to both Dockerfile.base and Dockerfile.viewer:

make one small change to upgrade_containers shell script..
add the word --build next to up -d so that you make it rebuild the images/containers which will include your desired packages/fonts:

[wmysummer]

Basically the upgrade containers script needs some work when the Dockerfile has been changed but this is some issue with docker-compose because it should automatically just rebuild the containers when it detects the changes..

Here it is working after making the changes I mention later on the post:

After you add these two packages (ttf.. and fonts-arph..) to both Dockerfile.base and Dockerfile.viewer:

make one small change to upgrade_containers shell script..
add the word --build next to up -d so that you make it rebuild the images/containers which will include your desired packages/fonts:

Thank you very much. I just finished rebuilding the docker image and tested that the Chinese font can be displayed normally

[vpetersson]

@wmysummer Good research. You should really only need to add them to Dockerfile.viewer. Could you do a Pull Request for this and I can merge it in upstream so that it will be built into the next release.

@ealmonte32 The upgrade_container.sh was just a quick shorthand script I wrote to pull down the latest version for quicker iterations. We could definitely add a --build argument or similar to it that would rebuild containers too.

[vpetersson]

I've pushed updated Docker containers now, so we should be good.