Black screen - Resolution problems - smartphones and more

[ThirstyThursten]

Hey guys,
I have a problem.
I've been trying to tackle this one for a while.

I have my screens in config.js set up with max resolution. I'll post an example down below.
So the whole idea of this dashboard is that I want to use it on a 10" Tablet with a resolution 1920 x 1080. I also want a desktop version to check up on my Dekstop.

My main desktop monitor has a resolution of 2560 x 1440.
So when I put that resolution in my max_resolution it works on my dekstop with a big enough firefox or chrome window, otherwise it loads and just shows a black screen. This is the same for my phone and tablet.
As soon as I change max_resolution to 1920 x 1080 it always shows a black screen.

I even tried responsive mode in the developers tools of both browsers, with no succes.

Now I have also cleared my page cache several times, reloaded the page in chrome with empty cache & hard reload. Even (inside webinspector-network tab) ticked the box for disable cache.

I'll put the code for the screen below, I hope someone can help me cause this is driving me nuts..

Greetings,
Thirsty

Code:

1080P version, I made sure the total width of the collumns in here were max 12
Unless it has to do with individual block width..

Code: Select all

...
var columns = {}

columns[1] = {}
columns[1]['blocks'] = [title_presence, phone_thur, phone_peet, title_temperature, temperatuur_woonkamer, temperatuur_buiten, title_solar, solar_inverter, solar_nu, solar_totaal]
columns[1]['width'] = 2;

columns[2] = {}
columns[2]['blocks'] = [title_misc, 'garbage', title_gas_and_elektra, temp_woonkamer_setpoint, p1_gas_nu, p1_gas_totaal, p1_elektra_nu, p1_elektra_vandaag, p1_elektra_totaal, p1_grafiek_gas, p1_grafiek_elektra] 
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = ['sunrise', buttons.log]
columns[3]['width'] = 2; 

columns[5] = {}
columns[5]['blocks'] = [title_news, news_1, news_2, buttons.nos, buttons.telegraaf, buttons.nunlgames, buttons.nunltech, 'currentweather_big_owm', 'weather_owm']
columns[5]['width'] = 4; 

columns[6] = {}
columns[6]['blocks'] = [title_tvguide_1, tvguide.dutch_1, tvguide.dutch_2] 
columns[6]['width'] = 4;

columns[9] = {}
columns[9]['blocks'] = [title_raspberry, pi_up_time, pi_cpu_usage, pi_cpu_temperature, pi_memory_usage, pihole_status, pihole_ads_percentage, title_radio, 'streamplayer']
columns[9]['width'] = 4; 


var screens = {}

screens[max_resolution_desktop] = {}
screens[max_resolution_desktop]['maxwidth'] = 1920;
screens[max_resolution_desktop]['maxheight'] = 1080;

screens[max_resolution_desktop][1] = {}
screens[max_resolution_desktop][1]['columns'] = [1,2,3]

screens[max_resolution_desktop][2] = {}
screens[max_resolution_desktop][2]['columns'] = [5,6,9]

The 1440P version, noticeonly the resolution at maxwidth and maxheight have changed in this snippet.

Code: Select all

...
var columns = {}

columns[1] = {}
columns[1]['blocks'] = [title_presence, phone_thur, phone_peet, title_temperature, temperatuur_woonkamer, temperatuur_buiten, title_solar, solar_inverter, solar_nu, solar_totaal]
columns[1]['width'] = 2;

columns[2] = {}
columns[2]['blocks'] = [title_misc, 'garbage', title_gas_and_elektra, temp_woonkamer_setpoint, p1_gas_nu, p1_gas_totaal, p1_elektra_nu, p1_elektra_vandaag, p1_elektra_totaal, p1_grafiek_gas, p1_grafiek_elektra] 
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = ['sunrise', buttons.log]
columns[3]['width'] = 2; 

columns[5] = {}
columns[5]['blocks'] = [title_news, news_1, news_2, buttons.nos, buttons.telegraaf, buttons.nunlgames, buttons.nunltech, 'currentweather_big_owm', 'weather_owm']
columns[5]['width'] = 4; 

columns[6] = {}
columns[6]['blocks'] = [title_tvguide_1, tvguide.dutch_1, tvguide.dutch_2] 
columns[6]['width'] = 4;

columns[9] = {}
columns[9]['blocks'] = [title_raspberry, pi_up_time, pi_cpu_usage, pi_cpu_temperature, pi_memory_usage, pihole_status, pihole_ads_percentage, title_radio, 'streamplayer']
columns[9]['width'] = 4; 


var screens = {}

screens[max_resolution_desktop] = {}
screens[max_resolution_desktop]['maxwidth'] = 2560;
screens[max_resolution_desktop]['maxheight'] = 1440;

screens[max_resolution_desktop][1] = {}
screens[max_resolution_desktop][1]['columns'] = [1,2,3]

screens[max_resolution_desktop][2] = {}
screens[max_resolution_desktop][2]['columns'] = [5,6,9]

[Lokonli]

If your screen width or screen height is more than the ['maxwidth'] and ['maxheight'] settings then you end up with a black screen, because no screen definition can be selected. To prevent that, define default screens without 'maxwidth' and 'maxheight' for the biggest screen.

For instance:

Code: Select all

var screens = {}

//these two screens will be used by default
screens[1] = {}
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['columns'] = [5,6,9]


//the next two screens will only be used when display width<1920 AND display height < 1080
var max_resolution_tablet = 'whatever';

screens[max_resolution_tablet] = {}
screens[max_resolution_tablet]['maxwidth'] = 1920;
screens[max_resolution_tablet]['maxheight'] = 1080;

screens[max_resolution_tablet][1] = {}
screens[max_resolution_tablet][1]['columns'] = [1]

screens[max_resolution_tablet][2] = {}
screens[max_resolution_tablet][2]['columns'] = [2]

Maybe you have to enlarge the 1920 and 1080 a bit.

As an alternative solution:
You can create two config files, for instance CONFIG.js and CONFIG.desktop.js

You can load this second config file with:

Code: Select all

http://dashticzip:port/?cfg=CONFIG.desktop.js

[ThirstyThursten]

@Lonkoli,
Thanks for the reply!

I get that, I but how is it than that it actually goes black when it is smaller than the set max width and maxheight?
Because on phones and tablets (and windowed on my Desktop) are smaller or exactly 1920x1080 (or smaller because of browser ui). But as soon as I set it to maxwidth 2560 and maxheight 1440 it loads on Desktop but not on phone or tablet nor smaller browser window on Desktop.

Shall I record a little video to show the difference?

Because in my case it almost feels like maxwidth and maxheight are being interpreted as minwidth and minheight.

Greets,
Thirsty

[ThirstyThursten]

Hmmm.. Okay, well this is rather weird I guess.. xD I changed to max resolution of 4K (w3840xh2160) and now it scales both ways.. I don't understand Gonna test on my phone now!
Yep, it shows on my phone. Just looked it up, my phone should have a resolution of 1440 x 3120 in landscape mode it doesn't look great yet.. I suspect it having to do with the user agent.

So I have this Dekstop Screen and Smart Screen set up in my config right, how does Dashticz determine what screen it is loading on? based on user agent? Or just the screen resolution of the browser? Or something else?

[Lokonli]

Dashticz uses the browser window width/height (in pixels) to determine whether a screen set will fit. With screen set I mean the resolution dependent screen definitions.

For this part, Dashticz is not responsive: Only at the start Dashticz will select a certain screen set. When resizing the Dashticz browser window, or rotating a tablet portrait/landscape, it will continue to use the selected screen set until you refresh the Dashticz browser window.