[Electron] Splash screen display in error location

[swxlion]

Bug Description:

Two cases:

1. Splash screen display in error location, and a wide black bar is under the splash image;
2. Splash screen is not displayed.

Steps to Reproduce:

prepare

1. An image which size is 3200 x 2000 px;
2. My monitor resolution ratio is 2240 x 1400;
3. Using Theia IDE project with version 1.58.100

Reproduce case 1

1. config theia\frontend\config\electron\splashScreenOptions in application/electron/package.json with width 1600, height 1000
2. yarn clean && yarn && yarn build && yarn download:plugins && yarn electron start

the screen capture is following:

Reproduce case 2

1. config theia\frontend\config\electron\splashScreenOptions in application/electron/package.json with width 3200, height 2000
2. yarn clean && yarn && yarn build && yarn download:plugins && yarn electron start

Nothing is displayed!

Issue location

In source code:
Theia 1.58.1: packages/core/src/electron-main/electron-main-application.ts
line 297, function determineSplashScreenBounds(...)

In this function, line 305:
screen.getDisplayNearestPoint(windowCenterPoint) returned a display object. The function is using the bound member, but not using the scaleFactor member.

In my computer,the display data is:

Size: width=1494, height=934
Logic: width=1494, height=934
scaleFactor: 1.5
Real: width=2241, height=1401

PS: My monitor resolution ratio shown in Windows 11 settings is 2240 x 1400

Additional Information

• Operating System: Windows 11
• Theia Version: 1.58.1

[sdirix]

Thanks for the report and analysis 💟 ! Do you have some cycles available to contribute a fix for this issue?

[swxlion]

Sorry, currently, I haven't any idea to fix this issue. I thought this issue maybe including two sub issues.

1. the display logic (I haven't seen these codes);
2. the position calcuating logic (function determineSplashScreenBounds(...)).

I thought the first problem is the primary issue since I using the following codes in an electron project to calcuate the Theia splash screen position:

import { screen } from 'electron';

function ttt() {

 calcActualSize({x: 400, y: 300})

  xxx(3200, 2000)

  console.log("------------------")

  xxx(1600, 1000)

  console.log("------------------")

  xxx(800, 500)
}

function xxx(w: muber, h: number) {
        const rev = determineSplashScreenBounds(w, h, {x:120, y:100, width: 2000, height: 1200 })
        console.log(`=====@@ 2000 x 1200 ===${rev.x}, ${rev.y}, ${rev.width}, ${rev.height} =====`)

        const rev2 = determineSplashScreenBounds(w, h, splashScreen.getBounds())
        console.log(`=====@@ ${splashScreen.getBounds().width} x ${splashScreen.getBounds().height} ===${rev2.x}, ${rev2.y}, ${rev2.width}, ${rev2.height} =====`)
    }

function calcActualSize(point: {x: number, y: number}) {

    const display = screen.getDisplayNearestPoint(point);

    console.log(`Size: width=${display.size.width}, height=${display.size.height}`);
    console.log(`Logic: width=${display.bounds.width}, height=${display.bounds.height}`);
    console.log(`scaleFactor: ${display.scaleFactor}`);

    const actualWidth = display.bounds.width * display.scaleFactor;
    const actualHeight = display.bounds.height * display.scaleFactor;

    console.log(`Real: width=${actualWidth}, height=${actualHeight}`);
}

function determineSplashScreenBounds(w: number, h: number, initialWindowBounds: { x: number, y: number, width: number, height: number })
{
    const width = w;
    const height = h;

    // determine the screen on which to show the splash screen via the center of the window to show
    const windowCenterPoint = { x: initialWindowBounds.x + (initialWindowBounds.width / 2), y: initialWindowBounds.y + (initialWindowBounds.height / 2) };
    const { bounds } = screen.getDisplayNearestPoint(windowCenterPoint);

    console.log(`=====@@ centPoint ===${windowCenterPoint.x}, ${windowCenterPoint.y}, --bound: ${bounds.x}, ${bounds.y}, ${bounds.width}, ${bounds.height} =====`)

    // place splash screen center of screen
    const screenCenterPoint = { x: bounds.x + (bounds.width / 2), y: bounds.y + (bounds.height / 2) };
    const x = screenCenterPoint.x - (width / 2);
    const y = screenCenterPoint.y - (height / 2);

    return {
        x, y, width, height
    };
}

the function determineSplashScreenBounds(...) is copyed and modified from the theia source codes in electron-main-application.ts.
And run this temp codes just call ttt() in app.whenReady() callback.

And the following is the output:

Size: width=1494, height=934
Logic: width=1494, height=934
scaleFactor: 1.5
Real: width=2241, height=1401
=====@@ centPoint ===1120, 700, --bound: 0, 0, 1494, 934 =====
=====@@ 2000 x 1200 ===-853, -533, 3200, 2000 =====
=====@@ centPoint ===746.5, 442.5, --bound: 0, 0, 1494, 934 =====
=====@@ 801 x 501 ===-853, -533, 3200, 2000 =====
------------------
=====@@ centPoint ===1120, 700, --bound: 0, 0, 1494, 934 =====
=====@@ 2000 x 1200 ===-53, -33, 1600, 1000 =====
=====@@ centPoint ===746.5, 442.5, --bound: 0, 0, 1494, 934 =====
=====@@ 801 x 501 ===-53, -33, 1600, 1000 =====
------------------
=====@@ centPoint ===1120, 700, --bound: 0, 0, 1494, 934 =====
=====@@ 2000 x 1200 ===347, 217, 800, 500 =====
=====@@ centPoint ===746.5, 442.5, --bound: 0, 0, 1494, 934 =====
=====@@ 801 x 501 ===347, 217, 800, 500 =====

So, for the first case: 1600 * 1000, the display location is not following the function determineSplashScreenBounds(...) returned result, and the second case 3200 * 2000, I haven't know it is really displayed?

So I think the display logic is the import key for solving this issue. The position calcuating logic with whether using the scaleFactor
is the secondary, and fix it is very simple. But the fixed result is dependent by the first problem. So, currently I have nothing idea.

[swxlion]

Sorry for the mistake by fatigue work, I mismatched the splash image size by exchanging the width & hight. (I have become accustomed to width first and height later by default, so I assigned the width value to height, and height to width in yesterday.)

And now, I adjust this. The splash screen all can be displayed, but still not in right position.

Following is 3200x200(width x height):

The under is 1600 x 1000 (width x height):