Create a Desktop App via Electron

William_Robinson · February 6, 2020, 12:12pm

Hi, Just had a go at making a desktop app firstly with the example (Weather App) which works fine. Then I had a go at trying to make a Desktop app out of one of my own apps which is not fine

The only thing I did differently to my app was not to include any code in the properties window for Package.json as I don’t have any dependencies like the example weather app.
I included an Icon (Icon.png) in a folder called build in my project folder and included the folder name (build) in extra headers in the properties window. The size of my forms are coincidentally the same size as stated in ElcetronMain.js

When I try to run the app via electron from the run menu, I get a message in the left hand corner saying setting up Electron. That’s as far as it gets. An empty folder named Electron is created in my project folder.
Can somebody tell me what I’m missing just to get app running on screen.
Thanks
Will.

ghenne · February 6, 2020, 1:49pm

What is in your Package.json property?

William_Robinson · February 6, 2020, 2:42pm

Hi George, I left that as is. Do I need to change?

{{
  "name": "{title}",
  "version": "{version}",
  "description": "{description}",
  "main": "electronMain.js",
  "scripts": {{
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  }},
  "author": "",
  "license": "ISC",
  "repository": "",
  "devDependencies": {{
    "electron": "^7.1.0",
    "electron-builder": "^22.0.0",
    "npm": "^6.13.0"
  }},
  "dependencies": {{
  }},
  "build": {{
    "appId": "{id}",
    "mac": {{
      "category": "public.app-category.developer-tools"
    }}
  }}
}}

ghenne · February 6, 2020, 4:08pm

If you left it as is, you should be fine.

Can you zip your project folder and send it to me? I’ll give it a try.

William_Robinson · February 6, 2020, 5:24pm

Hi George, sent that to your email address via Google drive

Thanks

Will.

ghenne · February 6, 2020, 5:44pm

Thanks - we are able to reproduce this. We’ll get to work.

ghenne · February 12, 2020, 11:21pm

Fixed in 8.0.4.

William_Robinson · February 13, 2020, 6:41pm

Hi, George that’s great. For some reason I only get a fraction of my icon in the top tool bar?
Also, is there a way of getting rid of those pesky scroll bars ?
Thanks
Will.

ghenne · February 13, 2020, 9:04pm

Check that your icon is actually the right size.

Can you include a screen shot of the scroll bars?

William_Robinson · February 13, 2020, 9:51pm

Vertical and Horizontal Scroll bars present when app is launched

ghenne · February 13, 2020, 10:02pm

Look at the electronMain.js property. You set the initial form size there in lines 11 and 12.

33%20PM

William_Robinson · February 13, 2020, 10:12pm

Yes I did that George

function createWindow() {{
  // see https://electronjs.org/docs/api/browser-window for all options
  mainWindow = new BrowserWindow({{
    width: 645,
    height: 890,
    title: '{title}',
    webPreferences: {{nodeIntegration: true}},
  }})

William_Robinson · February 13, 2020, 10:35pm

Hi George, with regards to the icon size I can see that the Electron build sources the icon from the Phone Gap build properties (Size 1024x1024). So I looked up the icon size for a windows build from here : Icons - electron-builder and the size no less than 256x256 is recomended. I exchanged this in the PG build properties but got the same result as shown in the top left corner of the screen shot. Builds the launch Icon fine with both sizes.
Thanks
Will.

ghenne · February 14, 2020, 2:42pm

So are the scrollbars OK now?

Yes, it uses the icon (1024). It has to be at least 256x256 for Windows (512 for MacOS), so a 1024x1024 is fine. I just ran a test here - I’m seeing my full icon. Can you try a different icon and see if the same happens?

William_Robinson · February 14, 2020, 6:52pm

Scrollbars are still there, I can pull the app out vertically and horizontally and they’ll disappear. I tried another icon, one of yours from the Weather app (512x512) and it worked fine? The only difference I can see between yours and mine is the size, mine at 330KB at 512x512 and yours at 57.2KB.
Thanks
Will.

Adrian_Nicolaiev · February 14, 2020, 9:40pm

Hi!

Could you try this in CSS code?:

overflow-y: hidden; /* Hide vertical scrollbar /
overflow-x: hidden; / Hide horizontal scrollbar */

I didn’t test. Hope this helps.

Best regards,

Adrian Nicolaiev

William_Robinson · February 15, 2020, 7:32pm

Thanks, I did try that in styles (Properties Window) but it didn’t work for me.
Will.

ghenne · February 16, 2020, 6:34pm

What happens if you use really big values for the size?

My guess is that your icon isn’t formatted properly. Try displaying it on your screen and making a screenshot of it, then using the screenshot.

William_Robinson · February 18, 2020, 7:15pm

Ignore my last reply to you. That did actually get rid of the scroll bars -) originally I put the code in the styles properties for the Form when I should have put the code in the styles properties window for Project properties and global code.
Thanks
Will.

William_Robinson · February 18, 2020, 7:31pm

Hi, tried taking a screenshot of the icon and making a new one in paint but with the same results. Went bigger (3354x4181 pix) still had same results. Used online png compressing software (https://tinypng.com/) to see if I could make smaller and still have the same result. The strange thing is that when the installer is going it’s showing the exact icon in the top tool bar that I want in the tool bar of my app The icon works in everything else but that top tool bar?
Thanks
Wll.