Startup Image / Animation support would be nice

[kaystrobach]

Hello Guys,

as loading a packaged app takes some seconds, i would like to see a simple startup image during loading (e.g. a png or something similar).

Is there a way to achieve that?

I would have expected it as setting in the package.json file ;)

Regards Kay

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[trevorlinton]

@damianb Two:

1. In order to package things up a custom build tool will need to be used.
2. You'll still need to store your package.json in a zip file (either as a app.nw or appended to the executable). The only way to get around this is refactoring the original package loader which i'm hesitant to do because it may break existing versions of node-webkit and require a lot of coordination and effort. However from what I can tell node-webkit really doesn't break a sweat unpacking a few bytes before it loads.

That seems about it. I should add I added support for range requests to the embed protocol (I may be wrong, but I don't believe traditional file:// protocol supports this). Supporting range requests allows for chromium to only load/cache portions of a file rather than having to load the entire file into memory. For example, if you load a PDF it will read only enough to render a certain portion of pages. As you scroll down (or if chromium feels it has more memory to burn) it will load (and unload) only the data that is needed to render at that moment. This significantly helps with memory foot prints.

[YurySolovyov]

how long it takes to build project with 200 MB of resources with this type of packaging?

ps. maybe it is possible to have partially prebuild components to reduce compile time?

[trevorlinton]

@Dream707 It's fairly quick, not much time at all. I think i'll write together some nodejs javascript to package items up. With that said i'm looking into trying to hit two birds with one stone with Issue #843. This may require holding off on a release as it requires the new method/build tool to properly update and stamp image sizes/check sums and windows PE header files to avoid antivirus software from blocking node-webkit.

Hopefully since I have a good portion of the work done (and I don't have to deal with reallocation tables in Windows PE headers) it shouldn't be too hard and would make node-webkit/normal C++ windows executables indistinguishable.

[YurySolovyov]

@rogerwang any news on supporting this type of packaging in 0.7.X ?

[YurySolovyov]

any updates on this? @trevorlinton @rogerwang

[trevorlinton]

@Dream707 I've implemented it in Tint, the code is in my repository if @rogerwang wishes to implement it. I'd be willing to put together a diff patch for node-webkit if there's interest in pushing this up stream.

You can checkout tint at www.trueinteractions.com, however its commercial support for node-webkit and not necessarily the same thing as node-webkit.

Let me know what I can do to help get this pushed into node-webkit, as i think it would add alot of value.

[YurySolovyov]

yeah, thanks for the update, one more quetstion, how is build process going? is there need for any additional tools/scripts to pack/build your app?

[trevorlinton]

@Dream707 I'm refactoring the tint compiler to pull out the packager code (written in javascript). Once i'm finished i'll post it to this thread and the embed protocol commits. This would allow someone to build a nodejs commandline script or a desktop gui written in node-webkit to produce packaged applications.

The script also includes "Stamping" and manifest tools to write manifest data and change the icons on windows and macosx from a 512x512 png file. This required writing a javascript program to parse through windows executables..... if you want to see that horror, take a peak: https://github.com/trevorlinton/node-windowsexe/blob/master/windowspe.js

[YurySolovyov]

@trevorlinton that's awesome, but we still don't know what @rogerwang thinks about it. Maybe it's better to start a new issue, since it's not about "Startup Image / Animation support" anymore?

[trevorlinton]

@Dream707 The problem of animation support or a "Loading screen" unfortunately doesn't have a simple solution. Reason why is unextracting the contents using the previous packaging method is too much time. Creating support for a loading or animation to appear while the extraction occurs is also impraticle, it becomes a chicken and egg problem since the animation/loading screen resources can't be accessed until the contents are unzipped.

With this new packaging method it removes the time it takes for node-webkit to load dramatically by only grabbing resources needed as requested, essentially both eliminating the need for a load screen, while also allowing roger or other contributors to create loading screens prior to even node-webkit/chromium booting.

While agree the bug is filed from a user needs perspective the solution is highly dependent on an entire new packager.

[kaystrobach]

i can't understand the problem.

Basicly you need to do:

• unpack settings (can be left out by a convention)
• unpack image / indicator
• show image
• unpack all the other stuff
• launch application

I know that this may take some milliseconds longer, as the ZIP Index needs to be checked if the file defined in your convention exists - but luxury and speed do not always match

[YurySolovyov]

@kaystrobach with new packaging system there will no need to unzip anything at all, it will be just embedded in executable as a resourse that can be accessed by special pseudo-protocol.

[DavidKahnt]

I solved this issue with using "document ready" (jQuery) and then removing or hiding your "loader image" after everything is initialized. You even can wait for the event when window is loaded https://github.com/rogerwang/node-webkit/wiki/Window#loaded

[kaystrobach]

@Dream707 nice, if that is solved with new packaging, i'm fine @mclckr it's not about loading the app, but about unpacking it, during the unpacking there is no window available ...

[YurySolovyov]

@kaystrobach you can get basic idea from latest 5-7 trevorlinton's comments

[dubcanada]

If you want a startup image, it should be left out of the app.nw if you want to put it in app.nw you'd need to open the zip which is 90% of the work anyways. The only way this would work is the following

Have some sort of addition to your manifest file

"startup": "image.jpg"

In the files before it does the unzipping of app.nw create a frameless window with the image.jpg as the background.

Do the unzipping, and when it's done close the startup window and open the regular window.

The same sort of thing for animation, but this would be better once transparent windows are finished.

[trevorlinton]

@dubcanada The manifest is located within the zip file unfortunately, in addition this would require keeping the start up image.jpg outside of the zip file next to the executable or package which isn't ideal. I suppose the idea is to have a longer term fix than a short term patch.

I've actually finished support for transparent windows and the new package/embed. I'm waiting on @rogerwang to see when/if he wants to incorporate these (the transparent windows does not yet support linux unfortunately).

[Mithgol]

A predefined filename could be a solution. Such as always looking for splash.png in the same directory where .nw package resides.

[jtenner]

If I were the one developing an app, I would want a convention, not a configuration.

splash.png is fine.

I also would NEVER use it myself.

[trevorlinton]

For those who downloaded or want to use the embed:// protocol the source is up and the compiler/packager is at:

https://github.com/trevorlinton/node-webkit/blob/master/tools/compiler.js

[YurySolovyov]

@trevorlinton compiler should respect case if I need window/mac/linux - only build something like build.data.Platforms = ['win','mac','linux']

it would be cool to be able to use this compiler as node module, like

var nwCompiler = require('./compiler'); 
nwCompiler.run(config);

currently got stuck with error:

{ [Error: ENOENT, no such file or directory 'd:\Projects\nw-compiler\Resources\Runtime.app']
  errno: 34,
  code: 'ENOENT',
  path: 'd:\\Projects\\nw-compiler\\Resources\\Runtime.app',
  syscall: 'stat' }

p.s. is it working with original nw? or it should be builded from your sources?

[trevorlinton]

@Dream707 To work you'll need to build from my repo or grab my binaries, Roger hasn't pulled in the sources yet for the embed protocol but you can find NW-compatible runtimes at http://www.trueinteractions.com/trial.zip. Within the zip there's a "Resources" folder, just copy out those items into the same folder as compile.js. Or you can build from my sources @ http://github.com/trevorlinton/node-webkit.

As for the script, it isn't built as a nodejs module, however if anyone cares to wrap it I doubt it'd be too hard. It only needs to export a handful of functions. PS, i only distribute mac/win runtimes, but you can compile out linux builds as the embed:// protocol isn't platform specific.

[rogerwang]

@trevorlinton I don't see any opening pull req from you?

[trevorlinton]

@rogerwang Oops. I'll put one together today.

[trevorlinton]

@rogerwang It would be vastly easier for me to bundle the transparency support + embed protocols into one pull. The transparency doesn't support Linux but in another forum someone said it would be trivial for them to add. There's currently just stubs for the linux version for compatibility, is that ok?

[trevorlinton]

@rogerwang

I've sent a pull request that has support for embed:// and transparency support for Mac/Win with stubs for linux to both nodewebkit and nw-chromium projects.

[ghostoy]

@kaystrobach Why not use a frameless window as the splash screen? You can put anything you want in the splash screen. Not just static or animated images.

1. Simply hide the main window when starting up by setting show to false in manifest.

{
        "window": {
              "show": false
        }
}

1. Use following code to show a frameless window before loading resources:

var splashwin = require('nw.gui').Window.open('path-to-your-splash-page.html', {
        'frame': false,  // frameless
        'position': 'center', // centered
        'always-on-top': true // always on top
});

3.And finally when everything is loaded, hide the splash window and show the main:

splashwin.close(true);
require('nw.gui').Window.get().show();

[kaystrobach]

i already described, is not about the time after unpacking, that's an easy task, it's about the time during unpacking. But as the packaging should have changed away from zip, this should be solvedable now.

[kaystrobach]

here is still described to use zip files - https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps so what's the right way?

[YurySolovyov]

I just hope that @trevorlinton 's patch will arrive one day and we'll see more intelligent packaging system

[thejae]

Hello, a splash screen would be really nice. Looking forward to that.

[coreybutler]

+1 on the new packaging.

[parag]

+1 for the new splash screen especially for windows. User clicks on the app and keep clicking thinking what exactly is wrong because he is not able to see anything. Not good user behaviour.

[the86freak]

For those who can't wait for the new unpacking: I just wrote a small c++ app that loads nw.exe as a unhandled child application. During the unpacking event the splash waits for special Tags in the Clipboard and renderes a progressbar with the inputs. When the loading is finished, i closes itself.

So you have to modify your node-webkit app: just use the JS-script which will give you the functionality to paste stuff to the clipboard with https://github.com/rogerwang/node-webkit/wiki/Clipboard

to be honest: the current release code-release status is pretty massy, it's more or less a copy paste of different sources. But it works on Win XP-8.1 without .Net.

https://github.com/the86freak/Splashscreen-Clipboard

[amadeomano]

+1 for unpacking process tracking, it would be even nicer to know the percentage of unpacking. but anyway the splash screen is wonderful for the first step.

[jasonfutch]

For Windows - Enigma Protector has a built in splash screen that can be set, if you are already using the Enigma Virtual Box to combine your .dll with the .exe this will be an easy transition.

You could also just have Enigma include the file structure instead of compressing it with .nw. I would also recommend that you combine and compress your JS as you would with serving them on the web.

[stephan-nordnes-eriksen]

+1 I have a very large app, and it takes sometimes minutes for it to load. It is very confusing that nothing shows up until the entire app is loaded. I would love to see a loading screen with progress if possible.

[Chris2011]

So as I understand it correct, the problem is while unpacking the zip archive and for this there is no native solution in node webkit to see a splash screen right? We have to use Enigma for example or whatever?

[kaystrobach]

yes - will never understand that ...

[uiliw]

wow.. this topic has more than 2 years and still no solution for a such important thing?? i wished i was a good programmer!!

+1 for the splash screen!!

[kaystrobach]

@uiliw what should i say ;) ... yes i switched to nightrain finally https://github.com/naetech/nightrain, this one needs no startup image, as it starts faster (no unpacking needed)

[uiliw]

hmm.. this has no support for ajax calls.. wont fit for my needs! NW is still the best solution. As my app has 250mb, it take a while to unpack in windows.. thats why i need a splash screen just to tell the user that something is going on before it start.. i just discovery that the app Popcorn-Time is built in on Node-Webkit too, and it has a loading page before start the app.. ill take a look and try see how they did it!

[rogerwang]

@uiliw you don't need to pack it into zip -- NW now supports another "package" format: just put NW files in your tree.

[uiliw]

@rogerwang yeapp.. i just found out this!! and this really improved a lot!! Thanks @kaystrobach this comment has the answer for what you was looking for!

[Chris2011]

@rogerwang is this already part of the documentation about "how to package and distribute your app?"?

[uiliw]

@Chris2011 yes it is! .. second item

[Chris2011]

But for both I have to create a zip, as I understand it right oO.

[herringtown]

Still no splash screen? This makes n-w sooooo unfriendly on windows....pretty much everyone assumes the apps have hung or dies.

[shaynem]

Check #514 it's probably more to-do with slow unpacking of zip.

Still no splash screen? This makes n-w sooooo unfriendly on windows....pretty much everyone assumes the apps have hung or dies.

— Reply to this email directly or view it on GitHub https://github.com/nwjs/nw.js/issues/151#issuecomment-94042285.

[coreybutler]

You can mimic a splash screen, as @ghostoy suggested above. For Fenix Web Server, I don't package everything in a zip because it is too slow & unnecessary to unpack every time the user opens the app. The source is available on Github if you want to see an example.