I’m quite new to Node-red, a few weeks under my belt. I’ve been developing home automation dashboards and am ready to move off my PC to a dedicated Pi with its own screen to run my interactive dashboards.
I have a question about screen resolutions vs what is actually displayed on the screen.
I have an iPad Pro 12.9 inch (2016 mode) which I believe has a resolution of 2732 x 2048.
I also have a much older Sony Z2 which has a resolution of 1920 x 1200.
My dashboard has a width of 26 blocks, yet despite the pro have over 33% more pixels (2732/1900), across the width, the dashboard fills up the width of both the iPad and the Sony tablets. Ok, so the iPad is a little room to spare, but nothing like 40%, more like less than 10%
However, when I look down the screen the iPad show 22 rows of data and the Sony only shows 14 rows of data. That's 57% more rows (22/14) on the iPad. Yet the iPad has only 42% more pixels (2048/1200) from top to bottom.
Can anyone explain what is going on?
The reason I ask is because I want to buy a dedicated touchscreen for my dashboard, but can’t figure out what resolution I really need. I want something similar to the iPad, but without knowing how to estimate what will be displayed I’m finding it difficult to narrow down the right model touchscreen with the right resolution.
Hi Alex.
The way your dashboard is displayed does not directly depend on the amount of pixels. Much more on the scaling factor your device uses.
Example: the Huawei p30 pro has a display resolution of 2340x1080
As browser I use chrome for Android here.
Example 1 standard mobile page
Obviously the resolution stays the same but is scaled differently. You can only compare a 100% (that means no zoom in or out) scaling with another.
The Sony probably scales differently than your apple. Because they have different pixel densities. So you might compare that on a desktop or laptop and use different display resolutions until it works for you.
To me a 26 blocks wide dashboard yells for full HD at 100% scaling.
Like in the description above: scaling is no parameter of node red. It simply depends on the device you are browsing the dashboard with.
The scaling of your device is exclusively dependent on your device / browser.
Please have a look again at the text between the 2 screenshots above and focus on the "desktop view " option of your devices browser.
Desktop view should be unscaled.
Mobile view is often scaled so you can interact it with your fingers. The content is displayed bigger (>100%)
Like I said, as a suggestion:
Sit down to a desktop computer (windows, Mac Linux) that means:no mobile device, no iPad pro
If you have a full HD screen on it:
-Go to the dashboard with your browser
how much place is there left and right of your 26blocks?
None? Perfect!
Dashboard gets resized?(groups are shifted further down on the site)-> you need a bigger res eg 2560x1440
Have still some space ?
Set the display resolution to 1680
Try again
Til it fits. But FHD should work for 26 blocks
The point is you actually can manipulate font sizes in dashboard and stuff. But in the end the standard looks best.
So if you are building a dashboard my hint was:
Build it for the display you want to use it on.
For more than one this could be a compromise.
But with some cleverness in arranging it you'll get a descent result.
Edit:
In this moment I discovered: I probably gave you the answer to your question.
On the 1280 display. Four groups fill the screen, that's 24 blocks
So for 26 you go with full HD and have some space left and right
I agree that I need full HD for width, what I need to figure out next is the height as I want to see all of the rooms on one screen i.e. group 3 of 4 in the image above....
Ok, so I tested what you said, but maybe it's too early in the morning and I haven't had a coffee yet, which I'm going to fix straight after this post....BUT, my monitor does not produce the same results as yours
I have set my screen resolution to 1280 x 768 and have 100% scale and layout, so not over or under scaling:
26 won't fit in 1280 generically.
i think your browser does the following:
"damn this groups are 26 blocks and i have to display them without rearranging them. huh. I have to zoom out to show the hole width of this site. huh . 2/3 scaling would work because x*1280/1920...I'll give 66.66666667% a shot and 2/3 = 1/2 + 1/6 = 66,6666667% so i do that. I dont like like even numbers, i like divisions by even numbers. cause this is best for me to recalculate to pixels "
okay just kiddin, but thats actually what happens.
if your groups were not one-piece-26-blocks they were rearranged.
like this the are not.
BTW. the two gauges in the manual override group look nice! can you tell me the name of the palette?
In behalf of the height:
You can hide the top bar in the the dashboard options.
If you don't want that:
Height of the bar at the top is 2 blocks. Blocks are square.lets say You are using full HD and fit 42 blocks in width and your display has a 16:9 ratio and your browser runs full screen:
(X+2) /9 = 42/16
X= 42*9/16 - 2= 25.56
You fit 25 blocks in height.
That means [#blocks vertical] = [#blockshorizontal]/[aspectRatioScreen] -2
Where aspectRatioScreen can be 16/9, 16/10 , 4/3, 21/9 and so on
If you are using portrait mode instead of
horizontalblocks devided by aspectratio
just do
horizontalblocks TIMES aspectratio
Where one block has approximately 40 pixels.()
Without group spaceing
Horizontalblocks is Math.floor(pixel width of your screen/40)
So That means [#blocks vertical] = [horizontal pixels/40pixels]/[aspectRatioScreen] -2
Example blocks vertical = 1920/40/(16/9)-2 =25
Tadaaa
If you PM me I can send them to you, however I say PM, as they were designed for a specific much more complex purpose and I hacked away at them to do a very simple job, so it's not straightforward to use them.
