{"id":21623336,"url":"https://github.com/chiqors/electron-floating-screen","last_synced_at":"2025-07-17T10:31:13.128Z","repository":{"id":37189271,"uuid":"272960935","full_name":"chiqors/electron-floating-screen","owner":"chiqors","description":"Electron Boilerplate for a Discord, GitKraken, Slack's Floating Screen","archived":false,"fork":false,"pushed_at":"2023-02-03T09:08:03.000Z","size":24,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-04T10:09:54.456Z","etag":null,"topics":["boilerplate","chiqo-practice","discord","electron","electron-app","electron-boilerplate","electron-loading-screen","floating-screen","gitkraken","loading-screen","slack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chiqors.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-17T11:52:23.000Z","updated_at":"2020-06-17T11:57:48.000Z","dependencies_parsed_at":"2023-01-21T04:52:00.369Z","dependency_job_id":null,"html_url":"https://github.com/chiqors/electron-floating-screen","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiqors%2Felectron-floating-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiqors%2Felectron-floating-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiqors%2Felectron-floating-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chiqors%2Felectron-floating-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chiqors","download_url":"https://codeload.github.com/chiqors/electron-floating-screen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226248364,"owners_count":17595160,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","chiqo-practice","discord","electron","electron-app","electron-boilerplate","electron-loading-screen","floating-screen","gitkraken","loading-screen","slack"],"created_at":"2024-11-25T00:12:28.979Z","updated_at":"2024-11-25T00:12:29.474Z","avatar_url":"https://github.com/chiqors.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ELECTRON FLOATING SCREEN\n\n## Introduction\n\nThis tutorial deals with the creation of floating screens using Electron, specifically a Discord / Slack / GitKraken like loading screen.\n\n[Electron](https://electronjs.org/) is an innovative system that allows you to create desktop / mobile applications taking advantage of all the power, comfort and quality of a web application.\n\n## Getting Started\n\nTo begin, following the official guide of Electron, we are advised to start from their **boilerplate**:\n\n1. Let's clone and build the basic Electron project:\n\n```bash\ngit clone https://github.com/electron/electron-quick-start\n```\n\n2. Move to the root directory:\n\n```bash\ncd electron-quick-start\n```\n\n3. Install dependencies\n\n```bash\nnpm install\n```\n\n4. Launch the project\n\n```bash\nnpm start\n```\n\nIf everything is successful, a Hello World by electron window will open!\n\n## CREATE THE LOADING SCREEN\n\nNow that we have started everything successfully, we just have to proceed with the creation of the loading screen.\n\nIn the project folder, inside the file **main.js**, you will find a method **createWindow**, which takes care of creating the main _BrowserWindow_ by loading the **index.html** file of the project.\n\nThe process to create a loading screen is very simple, in practice it's necessary to create a second _BrowserWindow_, which loads a separate **html** file, which we will call for convenience **loading.html**.\n\nLet's proceed with the creation of this screen:\n\n1. Create a separate directory for our loading screen:\n\n```bash\nmkdir windows/loading\ncd windows/loading\n```\n\n2. Create the html file for the loading screen:\n\n```bash\necho \u003e\u003e loading.html\n```\n\n3. We can copy and paste what is present in the index.html file or create an html document according with our needs. For this first step we copy the contents of the index.html file:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eHello Loading World!\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eHello Loading World!\u003c/h1\u003e\n    \u003c!-- All of the Node.js APIs are available in this renderer process. --\u003e\n    We are using Node.js\n    \u003cscript\u003e\n      document.write(process.versions.node);\u003c/script\n    \u003e, Chromium\n    \u003cscript\u003e\n      document.write(process.versions.chrome);\u003c/script\n    \u003e, and Electron\n    \u003cscript\u003e\n      document.write(process.versions.electron);\u003c/script\n    \u003e.\n\n    \u003cscript\u003e\n      // You can also require other files to run in this process\n      require('./renderer.js');\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n4. Once the loading.html file has been created, we need to modify the main.js file so that it loads the loading screen first, and then the main one:\n\n```javascript\n/// Before\napp.on('ready', createWindow);\n```\n\n```javascript\n/// After\napp.on('ready', () =\u003e\n  createLoadingScreen();\n  /// for now, let's comment this\n  /// createWindow();\n);\n```\n\nby this way the application, when ready, will call up the **createLoadingScreen** method, which will be defined later.\n\n5. Definition of the **createLoadingScreen** method. This method allows us to instantiate a secondary window, used for loading:\n\n```javascript\n/// create a global var, wich will keep a reference to out loadingScreen window\nlet loadingScreen;\nconst createLoadingScreen = () =\u003e {\n  /// create a browser window\n  loadingScreen = new BrowserWindow(\n    Object.assign({\n      /// define width and height for the window\n      width: 200,\n      height: 400,\n      /// remove the window frame, so it will become a frameless window\n      frame: false,\n      /// and set the transparency, to remove any window background color\n      transparent: true\n    })\n  );\n  loadingScreen.setResizable(false);\n  loadingScreen.loadURL(\n    'file://' + __dirname + '/windows/loading/loading.html'\n  );\n  loadingScreen.on('closed', () =\u003e (loadingScreen = null));\n  loadingScreen.webContents.on('did-finish-load', () =\u003e {\n    loadingScreen.show();\n  });\n};\n```\n\nIn the main directory (electron-quick-start) if we launch the command **npm start** the application will be rendered starting from the loading screen, which at present has no style, so you will only see the strings of the html file. Let's proceed with the most creative part of our tutorial, the creation of the floating loading screen!\n\n## LOADING SCREEN CUSTOMIZATION\n\nAt this point we just have to create a respectable loading screen.\n\n1. Open the file _loading.html_, and define layouts, styles and more for the page:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003ctitle\u003eFLOATING LOADING SCREEN\u003c/title\u003e\n    \u003cstyle\u003e\n      /* Define the main wrapper style */\n      .LoaderWrapper {\n        position: absolute;\n        top: 0;\n        left: 0;\n\n        width: 100%;\n        height: 100%;\n\n        display: flex;\n        align-content: center;\n        justify-content: center;\n        align-items: center;\n        justify-items: center;\n\n        box-sizing: border-box;\n        background-color: black;\n      }\n\n      .LoaderContent {\n        color: white;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"LoaderWrapper\"\u003e\n      \u003cdiv class=\"LoaderContent\"\u003e\n        FLOATING SCREEN!\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cscript\u003e\n      // You can also require other files to run in this process\n      require('./renderer.js');\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nObviously this is an example, you can separate styles and logic in different files, for simplicity we keep everything in one file for the moment.\n\n**PLUS** I strongly recommend using the unit **rem** (Responsive em), to manage any responsive behavior in relation to the font-size of the element **root**;\n\n2. Once we have created our loading screen (think of it as an html page, you can do whatever you want, add preloaders, images, svg, webgl and much more), we need to manage the **dispose** event of the window, where the main window will show up.\n\nReturn to the file **main.js**, inside the function **createWindow** and add the following:\n\n```javascript\n[...]\n/// keep listening on the did-finish-load event, when the mainWindow content has loaded\nmainWindow.webContents.on('did-finish-load', () =\u003e {\n  /// then close the loading screen window and show the main window\n  if (loadingScreen) {\n    loadingScreen.close();\n  }\n  mainWindow.show();\n});\n```\n\nTo ensure that the window is not shown as long as it is loaded, we need to review the way it is instantiated:\n\n```javascript\nmainWindow = new BrowserWindow({\n  width: 800,\n  height: 600,\n  webPreferences: {\n    nodeIntegration: true\n  },\n  /// show to false mean than the window will proceed with its lifecycle, but will not render until we will show it up\n  show: false\n})\n[...]\n```\n\n3. Once we have defined the creation and dispose of the loading screen and the mainWindow, we need to restore the call to the **createWindow** function:\n\n```javascript\n[...]\napp.on('ready', () =\u003e {\n  createLoadingScreen();\n  /// add a little bit of delay for tutorial purposes, remove when not needed\n  setTimeout(() =\u003e {\n    createWindow();\n  }, 2000);\n})\n[...]\n```\n\nBy running the **npm start** command again, you can check the loading screen operation, it remains visible for about 2 seconds and then it's destroyed, to show up the main window.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchiqors%2Felectron-floating-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchiqors%2Felectron-floating-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchiqors%2Felectron-floating-screen/lists"}